
body {
    transition: opacity .2s ease-in-out;
    opacity: 0;

    .fontawesome-i2svg-complete &, .force-show & {            
        opacity: 1;        
    }
}


ul {
    margin: 0;
    list-style: none;
    padding: 0;
}

img {
    @include img-fluid;

    transform: translateZ(0);
    perspective: 1000;
}

a {
    @include adv-transition(color, background, border);    
}

.container-fluid {
    max-width: 1200px + $grid-gutter-width;
}

$headerHeight: 122px;


.page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 5;
    height: $headerHeight;
}

.main-container {
    padding-top: $headerHeight + $grid-gutter-width;
}

.header-menu {
    .navbar {
        width: 100%;
    }
}

.minicart-wrapper {
    order: 3;
    padding-left: 10px;
}

.page-title {
    display: block;
    @extend .mb-4;
}
.loading-mask {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    position: fixed;
    z-index: 999999;
    background: rgba(255,255,255,.75);
    
    img { 
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

//BREADCRUMB
.breadcrumb strong {
    font-weight: normal;
    color: $breadcrumb-active-color;
}
//GRID

@mixin make-row($gutter: $grid-gutter-width) {
    display: flex;
    flex-wrap: wrap;
    margin-right: ($gutter / -2);
    margin-left:  ($gutter / -2);
}

@mixin make-col-ready($gutter: $grid-gutter-width) {
    position: relative;
    // Prevent columns from becoming too narrow when at smaller grid tiers by
    // always setting `width: 100%;`. This works because we use `flex` values
    // later on to override this initial width.
    width: 100%;
    min-height: 1px; // Prevent collapsing
    padding-right: ($gutter / 2);
    padding-left:  ($gutter / 2);
}

.col2-set,
.col2-set,
.col4-set {
    @include make-row();
}

// Content Columns
.col2-set {

    > .legend {
        margin-left: ($grid-gutter-width / 2);
        margin-right: ($grid-gutter-width / 2);
        width: auto;
    }

    .col-1,
    .col-2 {        
        @include make-col-ready();
        @include media-breakpoint-up(md){
            @include make-col(6);        
        }
    }
    .col-narrow {
        @include make-col-ready();
        @include media-breakpoint-up(md){
            @include make-col(4);
        }
    }
    .col-wide {
        @include make-col-ready();
        @include media-breakpoint-up(md){
            @include make-col(8);             
        }
    }
}

.col3-set {

    .col-1,
    .col-2,
    .col-3 {
        @include make-col-ready();
        @include media-breakpoint-up(md){
            @include make-col(4);
        }
    }
}

.col4-set {

    .col-1,
    .col-2,
    .col-3,
    .col-4 {
        @include make-col-ready();
        @include media-breakpoint-up(md){
            @include make-col(3);
        }
    }
}


//TABLES
.data-table {
    @extend .table;
    @extend .table-bordered;

    > tbody > tr:nth-child(odd) {
        > td,
        > th {
            background-color: $table-accent-bg;
        }
    }
}

.table-overflow-cont {
    overflow: hidden;
    position: relative;

    table {
        width: 100%;
    }
}

//FORMS
.password-strength-meter {
    @extend .form-text;
    @extend .text-muted;
    @extend small;
}


//BUTTON 
.btn-empty {
    border: 0 !important;
    background: transparent !important;
}

.input-group-addon label {
    margin-bottom: 0;
    font-weight: normal;
}


//ALERT
div.mage-error {
    @extend  .invalid-feedback;
    //@extend  .alert-danger;
}


.alert-error {
    @extend .alert-danger;
}

//CONTENT
/* CMS Home Page */
.cms-home,
.cms-index-index {
    .subtitle {

    }
}

//no-route
.cms-no-route {
    ul.disc {
        list-style: disc;
        padding-left: 20px;
        margin-top: 10px;
    }
}


// RSS
.rss-title h1 { background:url(#{$images-path}i_rss-big.png) 0 4px no-repeat; padding-left:27px; }
.rss-table .link-rss { display:block; line-height:1.55; background-position:0 4px; }

//RATING
// Ratings
.no-rating {
    margin: 0;
}

.ratings {
    margin-bottom: ($line-height-base / 2);
    font-size: $font-size-sm;
}
.ratings strong {
    float: left;
    margin: 1px 3px 0 0;
}
.ratings .rating-links {
    margin: 0;
}
.ratings .rating-links .separator {
    margin: 0 2px;
}
.ratings dt {}
.ratings dd {}
.rating-box {
    width: 69px;
    height: 13px;
    font-size: 0;
    line-height: 0;
    background: url(#{$images-path}bkg_rating.gif) 0 0 repeat-x;
    text-indent: -999em;
    overflow: hidden;
}
.rating-box .rating {
    float: left;
    height: 13px;
    background: url(#{$images-path}bkg_rating.gif) 0 100% repeat-x;
}
.ratings .rating-box {
    float: left;
    margin-right: 3px;
}
.ratings .amount {}

.ratings-table th,
.ratings-table td {
    font-size: $font-size-sm;
}
.ratings-table th {
    font-weight: bold;
    padding-right: 8px;
}

.logo {

    strong {
        //@include hide-text();
    }

    h1 {
        margin: 0;
    }
}

.dropdown-overlay {
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw; 
}