/* ==================== 
1. resets & defaults
2. base styles
3. layout
4. components
5. content by pages
==================== */


:root{
    --font-family: '63Fonts', sans-serif;
    --font-family-caps: '63Fonts Caps', sans-serif;

    --bs-body-bg: #F5F5F5;
    --bs-body-bg-rgb: 245, 245, 245;

    --bs-body-color: #000;
    --bs-secondary-color: rgba(0, 0, 0, 0.80);
    --bs-tertiary-color: rgba(0, 0, 0, 0.70);

    --bs-primary-rgb: 255,141,6;
    --bs-primary: #FF8D06;

    --bs-secondary-rgb: 237,237,237;
    --bs-secondary: #EDEDED;
    --bs-secondary-bg-subtle: #F0F0F0;

    --color-gray-rgb: 36,36,36;
    --color-gray: #242424;
    --color-gray-light: rgba(var(--color-gray-rgb), 0.72);

    --bs-success-rgb: 30,137,4;
    --bs-success: #1E8904;

    --bs-warning-rgb: 255,141,6;
    --bs-warning: #FF8D06;

    --bs-danger-rgb: 199,0,0;
    --bs-danger: #C70000;

    --bs-font-sans-serif: var(--font-family);


    --btn-primary: var(--bs-primary);
    --btn-primary-hover: #FFB155;
    --btn-primary-active: #D77501;

    --btn-primary-light: #F5EEE7;
    --btn-primary-light-hover: #FEF6EE;
    --btn-primary-light-active: #EEE7E0;

    --btn-secondary: #EDEDED;
    --btn-secondary-hover: #F9F9F9;
    --btn-secondary-active: #E5E5E5;

    --bs-form-invalid-color: var(--bs-danger);
    --bs-form-invalid-border-color: var(--bs-danger);


    --bs-border-radius: var(--border-radius-md);

    --border-radius-xs: 4px;
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 15px;


    --app-header-top-wrap-height: 56px;
    --app-header-main-wrap-height: 64px;
    --app-header-height: calc(var(--app-header-top-wrap-height) + var(--app-header-main-wrap-height) + 1px);

    --content-px: 10px;

    --container-size-1: 384px;
    --container-size-2: 440px;
    --container-size-3: 860px;
    --container-size-4: 1200px;
    --container-size-5: 1386px;


    --fs-h1: 2rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-h5: 1.125rem;
    --fs-h6: 1rem;

    --fs-text: var(--fs-text4);
    --fs-text1: 1.25rem;
    --fs-text2: 1.125rem;
    --fs-text3: 1rem;
    --fs-text4: 14px;
    --fs-text5: 13px;
    --fs-text6: 12px;

    --form-element-size: var(--form-element-size-3);
    --form-element-size-1: 36px;
    --form-element-size-2: 40px;
    --form-element-size-3: 48px;

    --icon-size-xs: 14px;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;
    --icon-size-xl: 32px;
    --icon-size-2xl: 36px;
    --icon-size-3xl: 48px;

    --form-control-px: 16px;
    --form-control-py: 6px;
}

@media (min-width: 768px) {
    :root{
        --app-header-main-wrap-height: 80px;

        --content-px: 24px;

        --form-control-px: 20px;
    }
}



/* ==================== 1. resets & defaults ==================== */
html,body,
h1,h2,h3,h4,h5,h6,
ul,ol,p,figure,
form,fieldset,input,textarea{
    margin: 0;
    padding: 0;
}

header,nav,main,article,section,aside,footer,figure{
    display: block;
}

*{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}

/* ----- */

html,body{
    width: 100%;
    height: 100%;
}

nav ul,.nav ul{list-style: none;}
a img,fieldset{border:0;}

.logo img{display: block;}
.img-container img,
.thumb img,
figure img{
    display: block;
    max-width: 100%;
}

button,
input[type=button],
input[type=submit]{
    cursor: pointer;
    outline: none !important;
}

a,a:hover,a:focus{text-decoration: none;}
a.is-active{cursor: default;}

.disabled{opacity: 0.5; pointer-events: none;}
.disabled-click{pointer-events: none;}

/* ----- */

.no-scroll,
.no-scroll body{
    height: 100% !important;
    overflow: hidden;
}

.item-fade{opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; z-index: -1;}
.item-fade.fade-in{opacity: 1; visibility: visible; z-index: 1;}

/* ----- */

.text-nocase{text-transform: none !important;}

.highlight {background-color: #ffff00;}

b{font-weight: 500}
strong{font-weight: 700}

/* ----- */

body{
    background: var(--bs-body-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    color: var(--bs-body-color);
    font-size: 14px;
}



/* ==================== 2. base styles ==================== */


/* ----------- fonts ----------- */
body,input,textarea,button{
    font-family: var(--font-family);
}
.text-uppercase{
    font-family: var(--font-family-caps);
}
/* ----------- /fonts ----------- */


/* ----------- container ----------- */
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-fluid,
.form-container{
    width: 100%;
    padding-left: var(--content-px);
    padding-right: var(--content-px);
    margin: 0 auto;
}

.container .container-xxs,
.container .container-xs,
.container .container-sm,
.container .container-md,
.container .container-lg,
.form-container{
    padding-left: 0;
    padding-right: 0;
}

.container,
.container-md,
.t63-section[data-content-size="md"] .container{
    max-width: calc(var(--container-size-4) + var(--content-px) * 2);
}
.container .container-md{
    max-width: var(--container-size-4);
}

.container-xxs,
.t63-section[data-content-size="xxs"] .container{
    max-width: calc(var(--container-size-1) + var(--content-px) * 2);
}
.container .container-xxs{
    max-width: var(--container-size-1);
}

.container-xs,
.t63-section[data-content-size="xs"] .container{
    max-width: calc(var(--container-size-2) + var(--content-px) * 2);
}
.container .container-xs{
    max-width: var(--container-size-2);
}

.container-sm,
.t63-section[data-content-size="sm"] .container{
    max-width: calc(var(--container-size-3) + var(--content-px) * 2);
}
.container .container-sm{
    max-width: var(--container-size-3);
}

/*.container-md,
.t63-section[data-content-size="md"] .container{
	max-width: calc(var(--container-size-4) + var(--content-px) * 2);
}
.container .container-md{
	max-width: var(--container-size-4);
}*/

.container-lg{
    max-width: calc(var(--container-size-5) + var(--content-px) * 2);
}
.container .container-lg{
    max-width: var(--container-size-5);
}

.container-fluid,
.t63-section[data-content-size="fluid"] .container{
    max-width: 100%;
}

.form-container{
    width: 100%;
    margin: 0;
}
@media (min-width: 992px) {
    .form-container{
        width: 100%;
        max-width: calc(438px + var(--content-px) * 2);
    }
    .container .form-container{
        max-width: 438px;
    }
}
/* ----------- /container ----------- */


/* ----------- row ----------- */
.col-20{
    flex: 0 0 auto;
    width: 20%;
}
.col-30{
    flex: 0 0 auto;
    width: 30%;
}
.col-40{
    flex: 0 0 auto;
    width: 40%;
}
@media (min-width: 576px) {
    .col-sm-20{
        flex: 0 0 auto;
        width: 20%;
    }
    .col-sm-30{
        flex: 0 0 auto;
        width: 30%;
    }
    .col-sm-40{
        flex: 0 0 auto;
        width: 40%;
    }
}
@media (min-width: 768px) {
    .col-md-20{
        flex: 0 0 auto;
        width: 20%;
    }
    .col-md-30{
        flex: 0 0 auto;
        width: 30%;
    }
    .col-md-40{
        flex: 0 0 auto;
        width: 40%;
    }
}
@media (min-width: 992px) {
    .col-lg-20{
        flex: 0 0 auto;
        width: 20%;
    }
    .col-lg-30{
        flex: 0 0 auto;
        width: 30%;
    }
    .col-lg-40{
        flex: 0 0 auto;
        width: 40%;
    }
}
@media (min-width: 1200px) {
    .col-xl-20{
        flex: 0 0 auto;
        width: 20%;
    }
    .col-xl-30{
        flex: 0 0 auto;
        width: 30%;
    }
    .col-xl-40{
        flex: 0 0 auto;
        width: 40%;
    }
}
@media (min-width: 1400px) {
    .col-xxl-20{
        flex: 0 0 auto;
        width: 20%;
    }
    .col-xxl-30{
        flex: 0 0 auto;
        width: 30%;
    }
    .col-xxl-40{
        flex: 0 0 auto;
        width: 40%;
    }
}


.items-grid > div,
.grid-items-stretch > div{
    display: flex;
    flex-direction: column;
}
.items-grid > div > *,
.grid-items-stretch > div > *{
    flex-grow: 1;
}

.items-grid{
    --bs-gutter-x: 10px;
}
.items-grid:not([class*=gy]){
    --bs-gutter-y: 10px;
}
@media (min-width: 576px) {
    .items-grid{
        --bs-gutter-x: 1.25rem;
        --bs-gutter-y: 1.25rem;
    }
}
@media (min-width: 992px) {
    .items-grid{
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 1.5rem;
    }
}

@media (max-width: 359px) {
    .items-grid > div{
        width: 100%;
    }
}
/* ----------- /row ----------- */


/* ----------- icons ----------- */
img.svg-icon{
    opacity: 0;
}
.svg-icon{
    display: flex;
    width: var(--icon-size-md);
    height: auto;
}

.i-xs{
    width: var(--icon-size-xs) !important;
}
.i-sm{
    width: var(--icon-size-sm) !important;
}
.i-md{
    width: var(--icon-size-md) !important;
}
.i-lg{
    width: var(--icon-size-lg) !important;
}
.i-xl{
    width: var(--icon-size-xl) !important;
}
.i-2xl{
    width: var(--icon-size-2xl) !important;
}
.i-3xl{
    width: var(--icon-size-3xl) !important;
}
/* ----------- /icons ----------- */


/* ----------- rotate ----------- */
.r-0::before{
    transform: rotate(0deg);
}
.r-45::before{
    transform: rotate(45deg);
}
.r-90::before{
    transform: rotate(90deg);
}
.r-180::before{
    transform: rotate(180deg);
}
.r-270::before{
    transform: rotate(270deg);
}
.r-360::before{
    transform: rotate(360deg);
}
/* ----------- /rotate ----------- */


/* ----------- colors ----------- */
.text-white{
    color: #fff !important;
}

.text-body{
    color: var(--bs-body-color) !important;
}
.text-body-secondary{
    color: var(--bs-secondary-color) !important;
}
.text-body-tertiary{
    color: var(--bs-tertiary-color) !important;
}

.text-primary{
    color: var(--bs-primary) !important;
}
.text-secondary{
    color: var(--bs-secondary) !important;
}

.text-muted{
    color: rgba(0, 0, 0, 0.5) !important;
}

.text-gray{
    color: var(--color-gray) !important;
}
.text-gray-light{
    color: var(--color-gray-light) !important;
}
/* ----------- /colors ----------- */



/* ==================== 3. layout ==================== */


.app{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}


/* ---------- header ---------- */
.app-header{
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 300;

    color: #000;
}
.app-header a{
    color: inherit;
}
.app-header .container,
.app-header .container > div{
    display: flex;
    align-items: center;
}
.app-header .col-right{
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
}

.app-header nav a.active{
    color: var(--bs-primary);
}

/* --- top --- */
.app-header .top-wrap{
    background-color: var(--bs-body-bg);
}
.app-header .top-wrap .container{
    min-height: var(--app-header-top-wrap-height);
    padding-top: 8px;
    padding-bottom: 8px;
}
.app-header .top-wrap nav ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.app-header .top-wrap nav a{
    font-family: var(--font-family-caps);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

/* lang */
.lang-dropdown .lang-btn{
    --bs-btn-padding-x: 8px;
    --bs-btn-padding-y: 6px;
    --form-element-size: var(--form-element-size-2);

    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;

    gap: 6px;
}
.lang-dropdown .lang-btn[aria-expanded="true"]{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    z-index: 1001;
}
.lang-dropdown .dropdown-menu{
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 5px;

    width: 100%;
    min-width: auto;
    margin-top: 0 !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /*box-shadow: none;*/
}
.lang-dropdown .dropdown-menu::before{
    content: "";
    display: block;
    border-top: 1px solid #EFEFEF;
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
}
.lang-dropdown .dropdown-menu .lang-btn{
    justify-content: flex-start;
    width: 100%;
    min-height: auto;
}
.lang-dropdown .dropdown-menu .lang-btn:hover{
    background-color: #f9f9f9;
}

/* --- main --- */
.app-header .main-wrap{
    position: relative;
}
.app-header .main-wrap .container{
    gap: 1.5rem;
    min-height: var(--app-header-main-wrap-height);
    padding-top: 12px;
    padding-bottom: 12px;
}
.app-header .main-wrap .col-left,
.app-header .main-wrap .col-right{
    flex-shrink: 0;
}
.app-header .main-wrap .col-center{
    flex-grow: 1;
}

.app-header .main-wrap .logo{
    max-width: 180px;
}
.app-header .main-wrap .logo img{
    display: block;
    max-width: 100%;
}

.app-header .main-wrap .btn{
    position: relative;
}
.app-header .count-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    background-color: var(--btn-primary);
    border-radius: 50%;
    padding: 1px 3px 0;
    position: absolute;
    top: 4px;
    right: 3px;

    color: #fff;
    font-size: 10px;
    font-weight: 300;
}

/* search */
.app-header .search-container{
    width: 100%;
}
.app-header .search-container::before{
    content: "";
    width: 100%;
    height: 120vh;
    background-color: rgba(0,0,0,0.36);
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    transition: opacity 0.15s ease-in-out;
}
.app-search-is-open .app-header .search-container::before{
    opacity: 1;
    pointer-events: auto;
}

.app-header .search-box{
    display: flex;
    position: relative;
    z-index: 10;
}
/*.app-header .search-box > button{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}*/
.app-header .search-box .search-input{
    flex-grow: 1;
    background-color: #eee;
    border-color: #eee;
    border-radius: var(--border-radius-md);
}
.app-header .search-box .search-input::placeholder{
    color: rgba(0,0,0,0.5);
}

.app-header .search-close-btn{
    flex-shrink: 0;
}

.app-header .search-results-wrap{
    display: none;
    width: 100%;
    background-color: #fff;
    border-radius: var(--border-radius-md);
    margin-top: 8px;
    position: absolute;
    /*top: 100%;*/
    left: 0;
    z-index: 5;
}

.app-header .search-results-wrap .body{
    max-height: 420px;
    padding: 0 1rem;
}
.app-header .search-results-item{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EDEDED;
    gap: 10px;
}
.app-header .search-results-item:last-child{
    border-bottom: none;
}
.app-header .search-results-item > figure{
    flex-shrink: 0;
    width: 80px;
}
.app-header .search-results-item > div{
    flex-grow: 1;
    padding: 0.75rem 0;
}
.app-header .search-results-item .product-title{
    transition: color 0.15s ease-in-out;
}
.app-header .search-results-item .product-price-wrap{
    margin-top: 10px;
}
.app-header .search-results-item > .icon{
    flex-shrink: 0;
    width: var(--icon-size-md);
}
.app-header .search-results-item:hover .product-title{
    color: var(--bs-primary);
}

.app-header .search-results-wrap .foo{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    background-color: #eee;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

    color: var(--color-gray);
    font-size: 13px;
    font-weight: bold;
}
.app-header .search-results-wrap .foo button{
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: underline;
    background-color: transparent;
    border: 0;
}

.app-header .search-results-wrap .no-results-wrap{
    padding: 20px;
    font-size: 16px;
    text-align: center;
}

@media (max-height: 620px) {
    .app-header .search-results-wrap .body {
        max-height: calc(100vh - var(--app-header-height) - 72px);
    }
}

/* user dropdown */
.user-dropdown [data-bs-toggle="dropdown"]{
    --bs-btn-border-color: #F0F0F0;
    --bs-btn-hover-border-color: #F0F0F0;
    --bs-btn-active-border-color: #F0F0F0;
    gap: 8px;
}
.user-dropdown [data-bs-toggle="dropdown"]::after{
    display: none;
    margin-left: 0;
}
.user-dropdown [data-bs-toggle="dropdown"] > span{
    max-width: 124px;
}
.user-dropdown .dropdown-menu{
    --bs-dropdown-item-padding-x: 5px;
    --bs-dropdown-item-padding-y: 0.75rem;

    width: 100%;
}


/* --- nav --- */
.app-header .nav-wrap{

}

@media (min-width: 576px) {
    .app-header .col-right{
        gap: 8px;
    }

    /* --- top --- */
    .app-header .top-wrap nav ul{
        gap: 16px;
    }
    .app-header .top-wrap nav a{
        font-size: 14px;
    }

    /* --- main --- */

    /* search */
    /*.app-header .search-container::before{
        top: 0;
    }*/

    .app-header .search-results-wrap .body {
        max-height: 420px;
        padding: 0 20px;
    }

    .app-header .search-results-item{
        gap: 20px;
        padding-right: 20px;
    }
    .app-header .search-results-item > figure{
        width: 96px;
    }
    .app-header .search-results-item .product-title{
        max-width: 80%;
    }
}
@media (min-width: 992px) {
    .app-header .btn-hamburger,
    .app-header .search-close-btn,
    .app-header .nav-wrap .user-wrap{
        display: none !important;
    }

    .app-header .nav-item{
        display: flex;
        border-radius: var(--border-radius-xs);
        padding: 4px;
    }

    /* --- top --- */
    .app-header .top-wrap nav ul{
        gap: 0 20px;
    }
    .app-header .top-wrap .nav-item{
        transition: background-color 0.15s ease-in-out;
    }
    .app-header .top-wrap .nav-item:not(.active):hover{
        background-color: #ECECEC;
    }

    /* --- main --- */
    .app-header .search-container{
        max-width: 588px;
        margin: 0 auto;

        position: relative;
        z-index: 999;
    }

    /* search */
    .app-header .search-results-wrap{
        top: 100%;
    }

    /* --- nav --- */
    .app-header .nav-wrap{
        border-top: 1px solid #F0F0F0;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .app-header .nav-wrap  nav > ul{
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    .app-header .nav-wrap .nav-item{
        border: 1px solid transparent;
        transition: border-color 0.15s ease-in-out;
    }
    .app-header .nav-wrap .nav-item:not(.active):hover{
        border-color: #F0F0F0;
    }

    .app-header nav .dropdown-menu:not(.show){
        display: none !important;
    }
    .app-header nav .dropdown-menu.show{
        display: block !important;
    }
}
@media (min-width: 1200px) {
    .app-header .main-wrap .container{
        gap: 0;
    }
    .app-header .main-wrap .col-left,
    .app-header .main-wrap .col-right{
        width: 250px;
    }
}

@media (max-width: 991px) {
    .app-header{
        border-bottom: 1px solid #F0F0F0;
    }

    .app-header .search-container,
    .app-header .main-wrap .auth-btn,
    .app-header .main-wrap .user-dropdown,
    .app-header:not(.nav-is-open) .nav-wrap{
        display: none;
    }

    /* --- main --- */
    .app-header .main-wrap .logo{
        max-width: 128px;
    }

    /* search */
    .app-header .search-container{
        --container-py: 16px;

        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: var(--container-py) 0 var(--container-py) var(--content-px);

        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }
    .app-header .search-box{
        margin: auto 0;
    }
    .app-header .search-results-wrap{
        width: auto;
        left: var(--content-px);
        right: var(--form-element-size-1);
    }

    /* --- nav --- */
    .app-header .nav-wrap{
        width: 100%;
        height: calc(100vh - var(--app-header-height) + 10px);
        background-color: #fff;
        /*border-top: 1px solid #F0F0F0;
        box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.14);*/
        padding-top: 20px;
        padding-bottom: 20px;
        position: absolute;
        top: var(--app-header-height);
        left: 0;

        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-header .nav-wrap .container{
        flex-direction: column;
        align-items: flex-start;
    }
    .app-header .nav-wrap .user-wrap{
        margin-bottom: 16px;
    }
    .app-header nav > ul > li{
        padding: 4px 0;
    }

    .app-header .nav-wrap [data-bs-toggle="dropdown"]::after{
        transition: transform 0.1s ease-in-out;
    }
    .app-header .nav-wrap .dropdown-is-open [data-bs-toggle="dropdown"]::after{
        transform: rotate(-180deg);
    }

    .app-header nav .dropdown-menu{
        box-shadow: none;
        margin-top: 0 !important;
        transform: none !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }
    .app-header nav .dropdown-menu.show{
        display: none;
    }
    .app-header nav .dropdown-menu .dropdown-item{
        --bs-dropdown-item-padding-y: 0.375rem;
    }
}
@media (max-width: 767px) {
    /* search */
    .app-header .search-container{
        --container-py: 8px;
    }
}
@media (max-width: 575px) {
    .app-header .main-wrap .btn{
        --btn-size: var(--form-element-size-1);
    }
}
@media (max-width: 359px) {
    .app-header .lang-dropdown .lang-btn{
        --bs-btn-padding-x: 0.375rem;
        gap: 0.125rem;
    }
    .app-header .lang-dropdown .lang-btn > img{
        display: none;
    }

    .app-header .search-results-wrap{
        right: var(--content-px);
    }
    .app-header .search-results-wrap .body{
        padding: 0 0.5rem;
    }
    .app-header .search-results-item > figure {
        width: 64px;
    }
    .product-title{
        font-size: 12px;
    }
    .product-price{
        font-size: 14px;
    }
    .product-price-old{
        font-size: 12px;
    }
}
/* ---------- /header ---------- */


/* ---------- page ---------- */
.app-page{
    flex-grow: 1;
    width: 100%;
    position: relative;
}

/* --- page with aside --- */
.app-page.has-aside .main-container{
    border-top: 1px solid var(--bs-body-bg);
}

.app-page.has-aside .col-aside .card{
    --bs-card-spacer-y: 1.45rem;
    --bs-card-border-radius: 0;
    --bs-card-cap-padding-y: 10px;
}
.app-page.has-aside .col-aside .card-header{
    display: flex;
    align-items: flex-end;
    min-height: 53px;
    background-color: #fff;
    border-bottom-color: #F5F5F5;
    /*padding-top: 10px;
    padding-bottom: 10px;*/
}

.app-page.has-aside .col-main{
    --main-col-pt: 2rem;
    padding-top: var(--main-col-pt);
    padding-bottom: 2.5rem;
}

.app-page.has-aside .main-col-head{
    display: flex;
    flex-direction: column;
    min-height: 53px;
    margin-top: calc(var(--main-col-pt) * -1);
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (min-width: 992px) {
    .app-page.has-aside,
    .app-page.has-aside .main-container,
    .app-page.has-aside .col-aside{
        display: flex;
        flex-direction: column;
    }
    .app-page.has-aside .col-aside[style]{
        display: flex !important;
        top: 0 !important;
    }
    .app-page.has-aside .main-container,
    .app-page.has-aside .main-container > .row,
    .app-page.has-aside .col-aside,
    .app-page.has-aside .col-aside .card{
        flex-grow: 1;
    }

    .app-page.has-aside .mob-sidebar .sidebar-close-btn{
        display: none !important;
    }
}

@media (max-width: 991px) {
    .app-page.has-aside .mob-sidebar:not(.show){
        opacity: 0;
        z-index: -1;
        transition: opacity 0s ease-in-out;
    }
    .app-page.has-aside .mob-sidebar.show{
        opacity: 1;
        z-index: 999;
        transition-duration: 0.15s;
        transition-delay: 0.15s;
    }

    .app-page.has-aside .mob-sidebar{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.36);
        padding: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
    }

    .app-page.has-aside .mob-sidebar .sidebar-close-btn{
        margin-left: auto;
    }
    .app-page.has-aside .mob-sidebar .sidebar-close-btn img{
        width: 14px;
    }

    .app-page.has-aside .mob-sidebar .card{
        width: 300px;
        height: 100%;
        position: relative;
        z-index: 5;
        transition: transform 0.15s ease-in-out 0.15s;
    }
    .app-page.has-aside .mob-sidebar .card-header{
        --bs-card-cap-padding-y: 0;

        min-height: auto;
    }
    .app-page.has-aside .mob-sidebar .card-body{
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .app-page.has-aside .mob-sidebar:not(.show) .card{
        transform: translateX(-100%);
    }
}
@media (max-width: 575px) {
    .app-page.has-aside .mob-sidebar .card {
        width: 100%
    }
}

/* --- section --- */
.section{
    --section-py: 1.75rem;
    --section-px: 0;

    padding: var(--section-py) var(--section-px);
}
.section-title{
    font-size: var(--fs-h3);
    margin-bottom: 1.5rem;
}
.section .carousel + *{
    margin-top: 2.5rem;
}

@media (min-width: 576px) {
    .section {
        --section-py: 2rem;
    }
}
@media (min-width: 768px) {
    .section {
        --section-py: 2.5rem;
    }
}


/* --- article --- */
.article{
    --article-px: var(--content-px);

    max-width: calc(792px + var(--article-px) * 2);
    padding: 2.25rem var(--article-px) 3rem;
    margin-left: auto;
    margin-right: auto;
}
.article .has-side-icon{
    --title-icon-size: var(--icon-size-md);
    --title-gap: 0.5rem;

    display: flex;
    align-items: center;
    gap: var(--title-gap);
}
.article .has-side-icon > img{
    flex-shrink: 0;
    width: var(--title-icon-size);
    height: auto;
    margin: 0;
}

@media (min-width: 768px) {
    .article .has-side-icon{
        --title-icon-size: var(--icon-size-lg);
    }
    .article .has-side-icon > img{
        margin-left: -4px;
    }
}
@media (min-width: 992px) {
    .article .has-side-icon{
        --title-gap: 1rem;
    }
    .article .has-side-icon > img{
        margin-left: calc( (var(--title-icon-size) + var(--title-gap)) * -1);
    }
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
.app-footer{
    flex-shrink: 0;
    background-color: #010101;
    position: relative;
    z-index: 250;

    color: rgba(255,255,255,0.72);
    font-size: 13px;
}
.app-footer a{
    color: inherit;
    transition: color 0.15s ease-in-out;
}
.app-footer a:hover{
    color: #fff;
}

.app-footer .main-wrap{
    padding-top: 24px;
    padding-bottom: 2rem;
}
.app-footer .main-wrap > div{
    flex-grow: 1;
}
.app-footer .main-wrap .col-left{
    max-width: 306px;
}

.app-footer .main-wrap .logo{
    max-width: 132px;
    margin-bottom: 24px;
}
.app-footer .main-wrap .logo img{
    display: block;
    width: 100%;
}
.app-footer .main-wrap .text{
    color: inherit;
}
.app-footer .main-wrap .text > * + *{
    margin-top: 4px;
}

.app-footer .main-wrap .col-right{
    padding-top: 32px;
}

.app-footer .foo-title,
.app-footer .foo-links{
    font-family: var(--font-family-caps);
    text-transform: uppercase;
}
.app-footer .foo-title{
    color: #fff;
    font-size: inherit;
    margin-bottom: 10px;
}
.app-footer .foo-title a:hover{
    color: var(--bs-primary);
}
.app-footer .foo-links{
    list-style: none;
    color: rgba(255,255,255,0.6);
}
.app-footer .foo-links > li + li{
    margin-top: 8px;
}

.app-footer .bottom-bar{
    background-color: #171415;
}
.app-footer .bottom-bar .container{
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-footer .createdby{
    display: flex;
    align-items: center;
}
.app-footer .createdby > span{
    margin-right: 10px;
}
.app-footer .createdby img{
    display: block;
    height: 13px;
}

@media (min-width: 576px) {
    .app-footer .bottom-bar .container{
        justify-content: space-between;
        min-height: 52px;
    }
}
@media (min-width: 992px) {
    .app-footer .main-wrap{
        display: flex;
    }
    .app-footer .main-wrap .col-right{
        padding-top: 10px;
    }
    .app-footer .main-wrap .col-right .col{
        max-width: 154px;
    }
}

@media (max-width: 575px) {
    .app-footer .bottom-bar .container{
        flex-direction: column;
        padding-top: 16px;
        padding-bottom: 16px;
    }
}
/* ---------- /footer ---------- */



/* ==================== 4. components ==================== */


/* ----------- hamburger ----------- */
.hamburger,
.hamburger span,
.hamburger span::before,
.hamburger span::after{
    width: 18px;
}

.hamburger{
    flex-shrink: 0;
    display: block;
    height: 14px;
    background-color: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
    position: relative;
    z-index: 50;
}
.hamburger:before{
    content: "";
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: -12px;
    right: -12px;
}

.hamburger span,
.hamburger span::before,
.hamburger span::after {
    display: block;
    height: 1px;
    background-color: #000;
    position: absolute;
    transition: transform 0.15s ease;
}
.hamburger span{
    top: 0;
}
.hamburger span::before,
.hamburger span::after {
    content: "";
    display: block;
}
.hamburger span::before {
    width: 100%;
    top: 6px;
    transition-property: transform, opacity;
}
.hamburger span::after {
    top: 12px;
}

.hamburger.is-active span,
.nav-is-open .hamburger span{
    transform: translate3d(-1px, 7px, 0) rotate(45deg);
}
.hamburger.is-active span::before,
.nav-is-open .hamburger span::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}
.hamburger.is-active span::after,
.nav-is-open .hamburger span::after {
    transform: translate3d(0, -12px, 0) rotate(-90deg);
}
.hamburger.is-active span,
.hamburger.is-active span::before,
.hamburger.is-active span::after,
.nav-is-open .hamburger span,
.nav-is-open .hamburger span::before,
.nav-is-open .hamburger span::after{
    width: 21px;
}
/* ----------- /hamburger ----------- */


/* ---------- title,text ---------- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.title {
    display: block;
    color: var(--bs-body-color);
    font-weight: bold;
}
.text-wrap h1,
.text-wrap h2,
.text-wrap h3,
.text-wrap h4,
.text-wrap h5,
.text-wrap h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.title{
    font-family: var(--font-family-caps);
    text-transform: uppercase;
}

.title *{
    font-weight: inherit;
    line-height: inherit;
}

.title:not(.slide-title):not(.full-featured) *:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6):not([class*="display-"]) {
    font-size: inherit;
}

.title a{
    color: inherit;
}

h1,.h1{
    font-size: var(--fs-h1);
    line-height: 1.1;
}
h2,.h2{
    font-size: var(--fs-h2);
}
h3,.h3{
    font-size: var(--fs-h3);
}
h4,.h4{
    font-size: var(--fs-h4);
}
h5,.h5{
    font-size: var(--fs-h5);
}
h6,.h6{
    font-size: var(--fs-h6);
}

.text,
.text-wrap{
    --items-mb: 20px;
    --heading-mb: 10px;

    color: var(--bs-secondary-color);
    font-size: var(--fs-text);
    font-weight: 400;
}

.fs-1{
    font-size: var(--fs-text1) !important;
}
.fs-2{
    font-size: var(--fs-text2) !important;
}
.fs-3{
    font-size: var(--fs-text3) !important;
}
.fs-4{
    font-size: var(--fs-text4) !important;
}
.fs-5{
    font-size: var(--fs-text5) !important;
}
.fs-6{
    font-size: var(--fs-text6) !important;
}

html{
    font-size: 14px;
}

@media (min-width: 768px){
    html{
        font-size: 16px;
    }
    .text-wrap ul li::before{
        top: 0.625rem;
    }
}

.text-wrap:before,
.text-wrap:after {
    display: table;
    content: " ";
}
.text-wrap:after{
    clear:both;
}

.text-wrap > *{margin-bottom:var(--items-mb);}
.text-wrap > *:last-child{margin-bottom:0;}
.text-wrap ul,.text-wrap ol{margin-top: 8px}
.text-wrap ul:first-child,.text-wrap ol:first-child{margin-top: 0}
.text-wrap ol{padding-left:30px;}
.text-wrap li + li,.text-wrap li ul,.text-wrap li ol{margin-top:4px;}
.text-wrap ul{
    list-style:none;
}
.text-wrap ul li{
    padding-left: 21px;
    position: relative;
}
.text-wrap ul li::before{
    content: "";
    width: 3px;
    height: 3px;
    background-color: var(--bs-secondary-color);
    border-radius: 50%;
    position: absolute;
    top: 0.75rem;
    left: 7px;
}

.text-wrap h1,
.text-wrap h2,
.text-wrap h3,
.text-wrap h4,
.text-wrap h5,
.text-wrap h6{
    margin-bottom: var(--heading-mb);
}

.text-wrap img{
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 5px;
}
.text-wrap img[style*="float: left"]{
    margin-right: 15px;
}
.text-wrap img[style*="float: right"]{
    margin-left: 15px;
}

.text-wrap hr{
    margin: 35px 0;
}
.text-wrap hr + img,
.text-wrap hr + * img{
    margin-top: 8px;
}

.link,
.link:hover{
    color: var(--color-gray);
}
.text-wrap a:not(.btn),
.text-wrap a:not(.btn):hover{
    color: var(--bs-primary);
}
.link,
.text-wrap a:not(.btn){
    text-decoration: underline;
}
.link:hover,
.text-wrap a:not(.btn):hover{
    text-decoration: none;
}

button.link{
    background: none;
    border: 0;
    padding: 0;
}

.text-wrap audio,
.text-wrap video{
    display: block;
    width: 100%;
    outline: none;
}
.text-wrap video{
    height: auto;
}

.text-wrap iframe{
    display: block;
    max-width: 100%;
}

.text-wrap table {
    width: 100%;
    border: 1px solid #dee2e6;
    color: inherit;
}
.text-wrap table th,
.text-wrap table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    vertical-align: top;
}
.text-wrap table thead th {
    border-bottom: 2px solid #dee2e6;
    vertical-align: bottom;
}
.text-wrap table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

.text-wrap .table-plain {
    border: 0;
}
.text-wrap .table-plain th,
.text-wrap .table-plain td {
    border: 0;
    border-top: 1px solid #dee2e6;
}
/* ---------- /title,text ---------- */


/* ---------- buttons ---------- */
.btn{
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: var(--font-family-caps);
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: var(--border-radius-sm);
    --bs-btn-box-shadow: none;
    --bs-btn-disabled-opacity: 1;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-active-border-color: transparent;

    --btn-default-color: #000;
    --btn-disabled-color: #C6C6C6;
    --btn-disabled-bg: #F6F6F6;

    --btn-size: var(--form-element-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: var(--btn-size);
    min-height: var(--btn-size);
    text-transform: uppercase;
}

.btn img{
    flex-shrink: 0;
    width: var(--icon-size-md);
}

/*.icon-btn{
	--bs-btn-padding-x: 0;
	--bs-btn-padding-y: 0;
}*/
.btn-sm{
    --bs-btn-padding-x: 0.75rem;
    --btn-size: var(--form-element-size-2);
}
.btn-xs{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.25rem;
    --btn-size: var(--form-element-size-1);
}

.btn.size-auto{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: auto;
}

/* white */
.btn-white{
    --bs-btn-color: var(--btn-default-color);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--btn-default-color);
    --bs-btn-hover-bg: rgba(255,255,255,0.2);
    --bs-btn-hover-border-color: rgba(255,255,255,0.2);
    --bs-btn-active-color: var(--btn-default-color);
    --bs-btn-active-bg: rgba(255,255,255,0.7);
    --bs-btn-active-border-color: rgba(255,255,255,0.7);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}
.btn.btn-outline-white{
    border-color: #fff;
    color: #fff !important;
}
.btn.btn-outline-white:hover{
    background-color: #fff;
    border-color: #fff;
}

.btn svg *{
    fill: var(--bs-btn-color);
}
.btn:hover svg *{
    fill: var(--bs-btn-hover-color);
}
.btn:active svg *,
.btn.active svg *{
    fill: var(--bs-btn-active-color);
}
.btn.disabled svg *{
    fill: var(--bs-btn-disabled-color);
}
.btn.disabled img {
    opacity: 0.3;
}

/* primary */
.btn-primary {
    --bs-btn-color: var(--btn-default-color);
    --bs-btn-bg: var(--btn-primary);
    --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-color: var(--btn-default-color);
    --bs-btn-hover-bg: var(--btn-primary-hover);
    --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-color: var(--btn-default-color);
    --bs-btn-active-bg: var(--btn-primary-active);
    --bs-btn-active-border-color: var(--btn-primary-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}
.btn-outline-primary{
    --bs-btn-color: var(--btn-primary);
    --bs-btn-bg: rgba(var(--bs-primary-rgb),0.08);
    --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-color: var(--btn-primary);
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb),0.02);
    --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-color: var(--btn-primary);
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb),0.15);
    --bs-btn-active-border-color: var(--btn-primary-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}

.btn-primary-light {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--btn-primary-light);
    --bs-btn-border-color: var(--btn-primary-light);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--btn-primary-light-hover);
    --bs-btn-hover-border-color: var(--btn-primary-light-hover);
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--btn-primary-light-active);
    --bs-btn-active-border-color: var(--btn-primary-light-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}
.btn-outline-primary-light{
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--btn-primary-light);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--btn-primary-light-hover);
    --bs-btn-hover-border-color: var(--btn-primary-light-hover);
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--btn-primary-light-active);
    --bs-btn-active-border-color: var(--btn-primary-light-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}

/* secondary */
.btn-secondary {
    --bs-btn-color: var(--btn-default-color);
    --bs-btn-bg: var(--btn-secondary);
    --bs-btn-border-color: var(--btn-secondary);
    --bs-btn-hover-color: var(--btn-default-color);
    --bs-btn-hover-bg: var(--btn-secondary-hover);
    --bs-btn-hover-border-color: var(--btn-secondary-hover);
    --bs-btn-active-color: var(--btn-default-color);
    --bs-btn-active-bg: var(--btn-secondary-active);
    --bs-btn-active-border-color: var(--btn-secondary-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}
.btn-outline-secondary{
    --bs-btn-color: var(--btn-default-color);
    --bs-btn-border-color: var(--btn-secondary);
    --bs-btn-hover-color: var(--btn-default-color);
    --bs-btn-hover-bg: var(--btn-secondary-hover);
    --bs-btn-hover-border-color: var(--btn-secondary-hover);
    --bs-btn-active-color: var(--btn-default-color);
    --bs-btn-active-bg: var(--btn-secondary-active);
    --bs-btn-active-border-color: var(--btn-secondary-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}


/* back */
.btn-back{
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background-color: transparent;
    border: 0;
    padding: 0;

    color: #000;
    font-size: 14px;

    transition: opacity 0.15s ease-in-out;
}
.btn-back img{
    flex-shrink: 0;
    width: 14px;
}
.btn-back:hover{
    opacity: 0.8;
}

/* info modal toggle btn */
.info-btn{
    --btn-size: 24px;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-radius: 50%;
}
.info-btn img{
    width: var(--icon-size-sm);
}


/* is loading */
.btn.is-loading{
    --bs-btn-color: var(--btn-disabled-color);
    --bs-btn-bg: var(--btn-disabled-bg);
    --bs-btn-border-color: var(--btn-disabled-bg);

    background-image: url("../../images/icons/spinner_notch_primary.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    pointer-events: none;
}
.btn.is-loading > *{
    opacity: 0;
}

/* btn-row */
/*.app-page .btn-row{
	margin: 20px 0;
}
.app-page .btn-row:last-child{
	margin-bottom: 0;
}
.app-page .btn-row > div{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	padding-left: -6px;
	padding-right: -6px;
}
.app-page .btn-row > div .btn{
	margin: 6px;
}*/
/* ---------- /buttons ---------- */


/* ---------- pagination ---------- */
.pagination{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 3rem 0;
}
.pagination .btn{
    --bs-btn-padding-x: 0.25rem;
    --bs-btn-font-size: 16px;
}
.pagination .btn img{
    width: 16px;
}
.pagination .btn.active{
    color: #fff;
    background-color: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
    pointer-events: none;
}
/* ---------- /pagination ---------- */


/* ---------- badge ---------- */
.badge{
    --bs-badge-padding-x: 6px;
    --bs-badge-padding-y: 6px;
    --bs-badge-font-size: 13px;
    --bs-badge-border-radius: var(--border-radius-xs);
}
/* ---------- /badge ---------- */


/* ---------- tags ---------- */
.tag{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    background-color: #E0E0E0;
    border-radius: var(--border-radius-md);
    padding: 6px 8px;

    color: #3D3D3D;
    font-size: 13px;
    line-height: 1.25;
}

.tag > span{
    padding-left: 4px;
}

.tag button{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
    padding: 4px;
}
.tag button img{
    width: 12px;
}
/* ---------- /tags ---------- */


/* ---------- form ---------- */
.form-group{
    margin-bottom: 1.25rem;
}

.form-label{
    display: block;
    margin-bottom: 8px;

    color: var(--bs-body-color);
    font-size: 14px;
    font-weight: 500;
}

.form-control,
.form-control:focus,
.form-select,
.form-select:focus,
.virtual-select .vscomp-toggle-button,
.desktop .virtual-select .vscomp-wrapper:hover .vscomp-toggle-button,
.virtual-select .vscomp-wrapper.focused .vscomp-toggle-button,
.virtual-select.pop-comp-active .vscomp-wrapper:focus .vscomp-toggle-button{
    background-color: #eee;
    border-color: #eee;
    box-shadow: none !important;
    color: var(--bs-body-color);
    caret-color: var(--bs-primary);
}
.form-control,
.form-select,
.virtual-select .vscomp-toggle-button{
    height: var(--form-element-size);
    border-radius: var(--border-radius-sm);
    padding: var(--form-control-py) var(--form-control-px);

    font-family: var(--font-family);
    font-size: 13px;
}

.form-select{
    /*--color: #f00;*/
    /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");*/
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

textarea.form-control{
    height: auto;
}
.textarea-wrap{
    position: relative;
}
.textarea-wrap textarea{
    resize: none;
}
.textarea-wrap .input-counter{
    pointer-events: none;
    padding: 12px 20px;
    position: absolute;
    bottom: 0;
    right: 0;

    color: #777;
    font-size: 13px;
    line-height: 1;
}

.form-control::placeholder{
    color: #777;
}

.search-input{
    background-image: url(../../images/icons/magnifying_glass.svg);
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    padding-left: 40px;
}
.search-input::-webkit-search-cancel-button{
    appearance: none;
    background: url('/images/icons/xmark.svg') center no-repeat;
    background-size: 100% auto;
    width: 12px;
    height: 12px;
    cursor: pointer;
}
.search-input.is-loading{
    background-image: url(../../images/icons/spinner_notch_primary.svg);
}

/* virtual select */
.virtual-select.vscomp-ele{
    display: block;
    max-width: 100%;
}

.virtual-select .vscomp-wrapper:not(.has-value) .vscomp-value{
    color: #777;
}

.virtual-select .vscomp-toggle-button{
    padding-right: 40px;
}
.virtual-select.pop-comp-active .vscomp-toggle-button{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.virtual-select .vscomp-arrow::after{
    display: none;
}
.virtual-select .vscomp-arrow{
    width: 16px;
    background: url(../../images/icons/chevron.svg) center no-repeat;
    background-size: 100% auto;
    margin-right: 1rem;
}

.desktop .virtual-select.pop-comp-active .pop-comp-wrapper{
    z-index: 5 !important;
}
.desktop .virtual-select .pop-comp-wrapper{
    background-color: transparent;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14);
}
.desktop .virtual-select .pop-comp-wrapper::before{
    content: '';
    width: 100%;
    height: 6px;
    background-color: #eee;
    position: absolute;
    bottom: 100%;
    left: 0;
}
.desktop .virtual-select .pop-comp-wrapper::after{
    content: '';
    border-top: 1px solid #E1E1E1;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 6px;
}

.desktop .virtual-select .vscomp-dropbox{
    background-color: #eee;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.desktop .virtual-select .vscomp-option{
    padding: 5px var(--form-control-px);
}
.desktop .virtual-select .vscomp-option:hover,
.desktop .virtual-select .vscomp-option.focused{
    background-color: #E8E8E8;
}
.desktop .virtual-select .vscomp-option.selected{
    background-color: #E1E1E1;
}
.desktop .virtual-select .vscomp-option-text{
    font-size: 13px;
    line-height: 1.25;
}

.vscomp-wrapper.show-as-popup .vscomp-dropbox-container{
    z-index: 20 !important;
}


/*.virtual-select .vscomp-options-list,
.virtual-select .vscomp-option{
	height: auto !important;
}
.virtual-select .vscomp-option{
	min-height: 40px;
}*/


/* floating label */
.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select{
    height: var(--form-element-size);
    min-height: auto;
}
.form-floating>.form-control,
.form-floating>.form-select,
.form-floating .virtual-select .vscomp-toggle-button{
    font-weight: 500;
}

.form-floating>.form-control,
.form-floating>.form-select,
.form-floating>label{
    padding: var(--form-control-py) var(--form-control-px);
}
.form-floating>.form-select,
.form-floating .virtual-select .vscomp-toggle-button{
    padding-top: 20px;
}
.form-floating>label{
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 13px;
}
.form-floating>label,
.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label,
.form-floating .virtual-select .vscomp-wrapper:not(.has-value) .vscomp-value{
    color: #181818;
    font-weight: normal;
    opacity: 0.88;
}
.form-floating .virtual-select~label{
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label,
.form-floating .virtual-select~label{
    font-size: 12px;
}

/* theme light */
.form-control.theme-light,
.form-control.theme-light:focus,
.form-select.theme-light,
.form-select.theme-light:focus,
.virtual-select.theme-light .vscomp-toggle-button,
.desktop .virtual-select.theme-light .vscomp-wrapper:hover .vscomp-toggle-button,
.virtual-select.theme-light .vscomp-wrapper.focused .vscomp-toggle-button,
.virtual-select.theme-light.pop-comp-active .vscomp-wrapper:focus .vscomp-toggle-button{
    background-color: #fff;
    border-color: #DEDEDE;
}

.desktop .virtual-select.theme-light .pop-comp-wrapper{
    box-shadow: none;
}
.desktop .virtual-select.theme-light .pop-comp-wrapper::before{
    background-color: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.desktop .virtual-select.theme-light .pop-comp-wrapper::after{
    border-top-color: #ddd;
}
.desktop .virtual-select.theme-light .vscomp-dropbox{
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: 0;
}
.desktop .virtual-select.theme-light .vscomp-option:hover,
.desktop .virtual-select.theme-light .vscomp-option.focused{
    background-color: #F7F7F7;
}
.desktop .virtual-select.theme-light .vscomp-option.selected{
    background-color: #F2F2F2;
}


/* input group */
.form-control.input-group{
    padding: 0;
}
.form-control.input-group .form-control{
    padding-right: 0.5rem;
}
.form-control.input-group .input-group-append{
    display: flex;
    align-items: stretch;
    padding: 7px;
}
.form-control.input-group .btn{
    --btn-size: auto;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-font-size: 12px;
    --bs-btn-font-weight: 700;
}

/* checkbox, radio */
.form-check{
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 16px;
    padding: 0;
    margin: 4px 0;

    color: #000;
    font-size: 13px;
    line-height: 16px;
}
.form-check input,
.form-check .form-check-input{
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: -50px center;
    background-size: 14px auto;
    border-color: var(--bs-primary);
    margin: 0;
}
.form-check-input:active {
    filter: none;
}
.form-check-input:focus{
    box-shadow: none;
}
.form-check input[type="checkbox"]{
    background-image: url(../../images/icons/tick_white.svg);
    border-radius: var(--border-radius-xs);
}
.form-check input[type="radio"]{
    background-image: url(../../images/icons/radio_primary.svg);
    border-radius: 50%;
}

.form-check input:checked{
    background-position: center;
}
.form-check input[type="checkbox"]:checked{
    background-color: var(--bs-primary);
}
.form-check input[type="radio"]{
    background-color: transparent;
}

/* form check btn */
.form-check-btn{
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #E8E8E8;
    border-radius: var(--border-radius-sm);
    padding: 10px 13px;
    margin: 0;
}
.form-check-btn > span{
    display: flex;
    align-items: center;
    gap: 6px;
}
.form-check-btn > span > img{
    flex-shrink: 0;
    width: 20px;
}


/* form check btn group */
.form-check-btn-group{
    display: flex;
    border: 1px solid #E8E8E8;
    border-radius: var(--border-radius-sm);
    padding: 3px;
}
.form-check-btn-group label{
    position: relative;
    overflow: hidden;

    color: #000;
    font-size: 13px;
    cursor: pointer;
}
.form-check-btn-group label input{
    opacity: 0;
    position: absolute;
    right: 100%;
}
.form-check-btn-group label > span{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: var(--border-radius-xs);
    transition: background-color 0.15s ease-in-out;
}
.form-check-btn-group label input:checked + span{
    background-color: #FFE4C3;
}

/* toggler */
.form-toggler{
    display: inline-flex;
    gap: 10px;
    position: relative;
    overflow: hidden;
    margin: 0;

    color: #000;
    font-size: 13px;
}
.form-toggler input{
    opacity: 0;
    position: absolute;
    left: -100%;
}
.form-toggler > i{
    flex-shrink: 0;
    display: flex;
    width: 44px;
    height: 26px;
    background-color: #D4D7D9;
    border-radius: 16px;
    position: relative;
    padding: 3px;
}
.form-toggler > i::before{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}
.form-toggler > i,
.form-toggler > i::before{
    transition: all 0.3s ease;
}
.form-toggler input:checked + i{
    background-color: var(--bs-primary);
}
.form-toggler input:checked + i::before{
    transform: translateX(18px);
}

.form-toggler span{
    margin: auto 0;
}
.form-group .form-toggler{
    margin: 9px 0;
}


/* form controls with icon-btn */
.input-with-icon-btn{
    position: relative;
}
.input-with-icon-btn .form-control{
    padding-right: 40px;
}
.input-with-icon-btn .btn{
    min-width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}


/* fieldset */
.fieldset{
    --px: 15px;

    border: 1px solid #EAE8E8;
    border-radius: var(--border-radius-sm);
    margin-bottom: 20px;
}
.fieldset .legend{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #F9F9F9;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 10px var(--px);
    margin: 0;

    color: var(--bs-tertiary-color);
    font-size: 12px;
    font-weight: 500;
}
.fieldset .body{
    padding: 10px var(--px) 20px;
}
.fieldset .form-group:last-child{
    margin-bottom: 0;
}

/* error */
.error-text,
.global-error-text,
.invalid-feedback{
    color: var(--bs-danger);
    font-size: 14px;
}

.error-text {
    display: none;
}
.global-error-text {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.has-error .form-control {
    border-color: var(--bs-danger);
}
.has-error .error-text,
.has-error .invalid-feedback{
    display: block;
}

.form-control.is-invalid{
    background-image: none !important;
    box-shadow: none !important;
}
/* ---------- /form ---------- */


/* ---------- bg-img ---------- */
.bg-img{
    display: block;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.bg-img:not(.ratio)::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.bg-img--cover{
    background-size: cover;
}
.bg-img--contain{
    background-size: contain;
}
.bg-img.fit-container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/* ---------- /bg-img ---------- */


/* ---------- ratio, fit ---------- */
.ratio{
    display: block;
    overflow: hidden;
}
.ratio img,
.ratio video,
.object-fit-cover{
    object-fit: cover;
}
.object-fit-contain{
    object-fit: contain;
}
/* ---------- /ratio, fit ---------- */


/* ---------- scroll ---------- */
.os-scrollbar.os-scrollbar-vertical{
    width: 14px !important;
    padding: 8px 4px !important;
}
.os-scrollbar-handle{
    background-color: #D3D3D3 !important;
    border-radius: var(--border-radius-xs) !important;
}

.desktop .scrollable-container{
    overflow: hidden !important;
}
.mobile .scrollable-container,
.tablet .scrollable-container{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.horizontal-scrollable-container{
    width: 100%;
    overflow: auto;
}
/* ---------- /scroll ---------- */


/* ---------- item with icon ---------- */
.item-with-icon{
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: #000;
    font-size: 14px;
    line-height: 1.25;
}
button.item-with-icon:not(.btn){
    background-color: transparent;
    border: 0;
    padding: 0;
    text-align: left;
}

.item-with-icon img{
    flex-shrink: 0;
    width: 20px;
}

a.item-with-icon:not(.btn),
button.item-with-icon:not(.btn){
    transition: opacity 0.15s ease-in-out;
}
a.item-with-icon:not(.btn):hover,
button.item-with-icon:not(.btn):hover{
    opacity: 0.8;
}

.item-with-icon.size-sm{
    gap: 6px;
    font-size: 12px;
}
.item-with-icon.size-sm img{
    width: 16px;
}

/* --- wrap --- */
.item-with-icon-wrap{
    --gap: 1.5rem;
    --icon-wrap-size: 36px;
    --icon-size: var(--icon-size-md);

    display: flex;
    gap: var(--gap);
}
.item-with-icon-wrap > i{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-wrap-size);
    height: var(--icon-wrap-size);
    background-color: rgba(var(--bs-primary-rgb),.1);
    border-radius: var(--border-radius-xs);
}
.item-with-icon-wrap > i img{
    width: var(--icon-size);
}
/* ---------- /item with icon ---------- */


/* ---------- dropdown ---------- */
[data-bs-toggle="dropdown"]{
    display: flex;
    align-items: center;
}
[data-bs-toggle="dropdown"]::after{
    flex-shrink: 0;
    content: "";
    width: 12px;
    height: 12px;
    background: url(../../images/icons/chevron.svg) center no-repeat;
    background-size: 100% auto;
    margin-left: 4px;
}

.dropdown-menu{
    --bs-dropdown-spacer: 0;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-radius: var(--border-radius-sm);
    --bs-dropdown-padding-x: 10px;
    --bs-dropdown-padding-y: 4px;

    --bs-dropdown-link-color: #000;
    --bs-dropdown-link-hover-color: #000;
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-color: #000;
    --bs-dropdown-link-active-bg: transparent;
    --bs-dropdown-item-padding-x: 0;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-font-size: 12px;

    border: none;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
    margin-top: 6px !important;
}
.dropdown-menu ul{
    list-style: none;
}
.dropdown-menu li{
    display: flex;
}
.dropdown-menu .dropdown-item{
    display: flex;
    align-items: center;
    gap: 10px;

    transition: opacity 0.15s ease-in-out;
}
.dropdown-menu .dropdown-item img,
.dropdown-menu .dropdown-item svg{
    width: 16px;
}
.dropdown-menu .dropdown-item:not(.active):hover{
    /*color: var(--color-gray-light);*/
    opacity: 0.6;
}
.dropdown-menu .dropdown-item.active{
    color: var(--bs-primary);
}
.dropdown-menu .dropdown-item.active svg *{
    fill: var(--bs-primary);
}
.dropdown-menu .border-top{
    border-top-color: #F0F0F0 !important;
}
/* ---------- /dropdown ---------- */


/* ---------- slider ---------- */
/*.swiper:not(.swiper-initialized){
	opacity: 0;
}*/

.swiper{
    --swiper-btn-size: 36px;
    --swiper-btn-spacing: 16px;
}

.swiper .swiper-slide{
    display: flex;
    flex-direction: column;
    height: auto;
}
.swiper-slide > *{
    flex-grow: 1;
}

.swiper-btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-radius: 50%;
    --btn-size: var(--swiper-btn-size);

    --bs-btn-bg: #dedede;
    --bs-btn-border-color: #dedede;
    --bs-btn-hover-bg: #E9E9E9;
    --bs-btn-hover-border-color: #E9E9E9;
    --bs-btn-active-bg: #d2d2d2;
    --bs-btn-active-border-color: #d2d2d2;

    position: absolute;
    top: 50%;
    z-index: 3;
    margin-top: calc(var(--swiper-btn-size) * -0.5);
}
.swiper-btn img{
    width: 16px;
}
.swiper-btn-prev{
    left: 0;
    padding-right: 2px;
}
.swiper-btn-next{
    right: 0;
    padding-left: 2px;
}
.swiper-button-disabled{
    opacity: .35;
    pointer-events: none;
}

.swiper .swiper-btn-wrap{
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    padding: 4px;
    position: absolute;
    right: clamp(20px, 3.5vw, 94px);
    bottom: clamp(16px, 2.5vw, 40px);
    z-index: 3;
}
.swiper .swiper-btn-wrap .swiper-btn{
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.7);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.7);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;

    margin: 0;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

.swiper.swiper-horizontal>.swiper-pagination-bullets{
    --swiper-pagination-bullet-size: 4px;
    --swiper-pagination-bullet-horizontal-gap: 2px;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.4;
    --swiper-pagination-bottom: 6px;

    display: flex;
    align-items: center;
    width: auto !important;
    min-height: 14px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 4px 5px;
    left: 50%;
    transform: translateX(-50%);
}
.swiper .swiper-pagination-bullet-active{
    --swiper-pagination-bullet-size: 6px;
}

.swiper.carousel.swiper-horizontal>.swiper-pagination-bullets{
    --swiper-pagination-bullet-size: 6px;
    --swiper-pagination-color: var(--bs-primary);
    --swiper-pagination-bullet-inactive-color: var(--bs-primary);
    --swiper-pagination-bottom: 0;

    justify-content: center;
    width: 100% !important;
    min-height: auto;
    background-color: transparent;
    border-radius: 0;
    padding: 1rem 0 0;
    position: relative;
    left: 0;
    transform: none;
}

@media (min-width: 768px) {
    .swiper.carousel{
        padding: 0 calc(var(--swiper-btn-size) * 0.5);
        margin: 0 calc(var(--swiper-btn-size) * -0.5);
    }
    .swiper.carousel::before,
    .swiper.carousel::after{
        content: "";
        width: calc(var(--swiper-btn-size) * 0.5);
        height: 100%;
        background-color: var(--bs-body-bg);
        position: absolute;
        top: 0;
        z-index: 2;
    }
    .swiper.carousel::before{
        left: 0;
    }
    .swiper.carousel::after{
        right: 0;
    }

    .swiper.swiper-horizontal>.swiper-pagination-bullets{
        --swiper-pagination-bullet-size: 6px;
        --swiper-pagination-bullet-horizontal-gap: 3px;
        --swiper-pagination-bottom: 14px;

        padding: 5px 6px;
    }
    .swiper .swiper-pagination-bullet-active{
        --swiper-pagination-bullet-size: 8px;
    }
}
@media (min-width: 1340px) {
    .swiper.carousel{
        padding: 0 calc(var(--swiper-btn-size) + var(--swiper-btn-spacing));
        margin: 0 calc((var(--swiper-btn-size) + var(--swiper-btn-spacing)) * -1);
    }
    .swiper.carousel::before,
    .swiper.carousel::after{
        width: calc(var(--swiper-btn-size) + var(--swiper-btn-spacing));
    }
}

@media (max-width: 767px) {
    .swiper.carousel{
        padding: 0 var(--content-px);
        margin: 0 calc(var(--content-px) * -1);
    }
    .swiper.carousel .swiper-slide{
        max-width: calc(75vw);
    }

    .carousel .swiper-btn,
    .swiper .swiper-btn-wrap{
        display: none !important;
    }
}
/* ---------- /slider ---------- */


/* ---------- separator ---------- */
.separator-with-text{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;

    color: #000;
    font-size: 13px;
}
.separator-with-text::before,
.separator-with-text::after{
    content: "";
    flex-grow: 1;
    border-top: 1px solid #D9D9D9;
}
/* ---------- /separator ---------- */


/* ---------- card ---------- */
.card{
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--border-radius-md);
    --bs-card-color: #000;
    --bs-card-bg: #fff;
}

.card-secondary{
    --bs-card-bg: #f5f5f5;
}

.card hr{
    border-top-color: #EAEAEA;
    opacity: 1;
    margin: 1.25rem 0;
}

.card-section{
    border-bottom: 1px solid #E7E7E7;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    margin: 0 calc(var(--bs-card-spacer-x) * -1);
}
.card-section:first-child{
    margin-top: calc(var(--bs-card-spacer-y) * -1);
}
.card-section:last-child{
    border-bottom: none;
    margin-bottom: calc(var(--bs-card-spacer-y) * -1);
}

@media (min-width: 768px) {
    .card-p-lg,
    .card-p-xl,
    .card-p-xxl{
        --bs-card-spacer-y: 1.5rem;
        --bs-card-spacer-x: 1.5rem;
    }
}
@media (min-width: 1200px) {
    .card-p-xl,
    .card-p-xxl{
        --bs-card-spacer-y: 1.75rem;
        --bs-card-spacer-x: 2rem;
    }
}
@media (min-width: 1400px) {
    .card-p-xxl{
        --bs-card-spacer-x: 2.5rem;
    }
}
/* ---------- /card ---------- */


/* ---------- table ---------- */
.card-table{
    --bs-card-border-width: 0;
    margin-bottom: 0.5rem;
}

/* --- header --- */
.card-table .card-header{
    --bs-card-cap-padding-y: 1.125rem;
    --bs-card-cap-padding-x: 0;
    --bs-card-cap-bg: transparent;
    --bs-card-border-width: 0;
    --bs-card-cap-color: inherit;
}
.card-table .card-header .row{
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 1.25rem;

    align-items: center;
}
.card-table .card-header > .row{
    padding-left: calc(1.5rem - var(--bs-gutter-x));
    margin-left: 0;
    margin-right: 0;
}

.card-table .card-header .col-title{
    display: block;
    margin-bottom: 0.25rem;
    font-size: 13px;
    font-weight: bold;
}

.card-table .card-header .btn-col{
    min-width: 48px;
    border-left: 1px solid #EDEDED;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.card-table .card-header .btn{
    --btn-size: 32px;
}
.card-table .card-header .btn img{
    width: var(--icon-size-sm);
    margin: auto;
}

.card-table-head{
    --bs-card-bg: transparent;
    --bs-card-border-width: 1px;
    --bs-card-border-color: #E1E1E1;
}
.card-table-head .card-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40px;
    font-size: 13px;
    font-weight: bold;
}

/* --- body --- */
.card-table .card-body{
    --bs-card-spacer-x: 1.125rem;
    --bs-card-spacer-y: 1.125rem;

    padding-top: 0;
}

@media (min-width: 768px) {
    .card-table .card-header {
        --bs-card-cap-padding-y: 0.5rem;
    }
    .card-table .card-header > .row{
        padding-left: calc(1.5rem - var(--bs-gutter-x)/2);
    }
    .card-table .card-header .col-title{
        display: none;
    }
}

@media (max-width: 767px) {
    .card-table-head{
        display: none !important;
    }
    .card-table .card-header .btn-col{
        --bs-gutter-y: var(--bs-card-cap-padding-y);

        position: absolute;
        top: 0;
        right: 0;
    }

    /* --- body --- */
    .card-table .card-body{
        --bs-card-spacer-x: 1.5rem;
        --bs-card-spacer-y: 1.5rem;
    }
}
/* ---------- /table ---------- */


/* ---------- tabs ---------- */
.tab-nav {
    border-bottom: 1px solid #e8e9ea;
}

.tab-nav li {
    position: relative;
}

.tab-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    border: 1px solid #e8e9ea;
    border-bottom: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 10px 18px;
    color: #000;
    font-size: 16px;
    line-height: 24px;
}
.tab-nav a.active {
    background-color: #e3e6ec;
}

.tab-content {
    padding-top: 20px;
}
/* ---------- /tabs ---------- */


/* ---------- accordion ---------- */
.accordion-item{
    --accordion-px: 1.5rem;
    --accordion-py: 1.5rem;

    background-color: #fff;
    border-radius: var(--border-radius-sm) !important;
    margin-bottom: 10px;
    position: relative;
}
.accordion-item::after{
    content: "";
    width: 100%;
    border-bottom: 4px solid var(--bs-primary);
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: opacity 0.15s ease-in-out 0.1s;
}

.accordion-item-head{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--accordion-py) var(--accordion-px);
    cursor: pointer;
}
.accordion-item-head .title{
    font-size: 1rem;
    line-height: 1.4;
}
.i-accordion-toggle::after,
.accordion-item-head::after{
    content: "";
    display: block;
    background: url(../../images/icons/chevron.svg) center no-repeat;
    background-size: 100% auto;
    margin-left: auto;
}
.accordion-item-head::after{
    flex-shrink: 0;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.i-accordion-toggle{
    flex-shrink: 0;
    width: var(--icon-size-sm);
    margin-left: auto;
}
.i-accordion-toggle::after{
    padding-top: 100%;
}

.accordion-item-body{
    padding: 0 var(--accordion-px) calc(var(--accordion-py) + 10px);
}
.accordion-item-body .text-wrap{
    color: var(--bs-tertiary-color);
    font-size: 14px;
    line-height: 1.4;
}

.accordion-is-open{
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.accordion-is-open::after{
    opacity: 1;
}

.accordion-item-head::after,
.i-accordion-toggle{
    transition: transform 0.2s ease-in-out;
}
.accordion-is-open .accordion-item-head::after,
.accordion-is-open .i-accordion-toggle{
    transform: rotate(-180deg);
}
/* ---------- /accordion ---------- */


/* ---------- modal ---------- */
.modal-backdrop{
    --bs-backdrop-opacity: 0.36;
}
.modal{
    --bs-modal-bg: #fff;
}
.modal-dialog{
    --bs-modal-width: 588px;
    --modal-padding-x: 24px;
    --modal-padding-y: 24px;
}
.modal-sm{
    --bs-modal-width: 388px;
}
.modal-lg{
    --bs-modal-width: 800px;
}
.modal-xl{
    --bs-modal-width: 1140px;
}

.modal .modal-close-btn{
    background-color: transparent;
    border: 0;
    padding: 0;
    margin-left: auto;
}
.modal-content > .modal-close-btn{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
.modal .modal-header .modal-close-btn{
    align-self: flex-start;
    margin-top: 2px;
}

.modal-header{
    --bs-modal-header-padding: var(--modal-padding-x);
    padding-bottom: 24px;
    border: none;
}
.modal-body{
    --bs-modal-padding: var(--modal-padding-x);

    font-size: var(--fs-text4);
}
.modal-header + .modal-body{
    padding-top: 0;
}

.modal-title{
    font-size: var(--fs-h4);
    line-height: 1.4;
}

.modal-body .fieldset{
    --px: calc(var(--modal-padding-x) * 0.5);
    margin-left: calc(-1 * var(--px));
    margin-right: calc(-1 * var(--px));
}

@media (min-width: 768px) {
    .modal-dialog{
        --modal-padding-x: 32px;
        --modal-padding-y: 32px;
    }
}
/* ---------- /modal ---------- */

/* ---------- add to basket toast ---------- */
.success-toast{
	display: none;
	width: 100%;
	position: absolute;
	left: 0;
	top: 89px;
	z-index: 1080;
	pointer-events: none;
}
.success-toast.position-fixed{
	top: 0;
}
.success-toast .container{
	display: flex;
	justify-content: right;
	padding-top: 1px;
}
.success-toast .card{
	width: 100%;
	margin: 0;
	pointer-events: auto;
}
.success-toast .card-body{
	display: flex;
	padding: 10px 38px 10px 10px;
	font-size: 12px;
}
.success-toast .card-body .icon{
	flex-shrink: 0;
	height: 18px;
	margin-right: 12px;
}
.success-toast .card-body .modal-close-btn{
	width: 20px;
	height: 20px;
	margin: 0;
    padding: 0;
	position: absolute;
	top: 9px;
	right: 9px;
    border: 0;
    border-radius: 50%;
}
.success-toast .card-body .modal-close-btn img{
	height: 8px;
}
@media (min-width: 576px) {
	.success-toast{
		top: 120px;
	}
	.success-toast .card{
		max-width: 310px;
	}
}
@media (min-width: 768px) {
	.success-toast .container{
		padding-top: 8px;
	}
}

@media (max-width: 575px) {
	.success-toast .container{
		padding-left: 8px;
		padding-right: 8px;
	}
}
/* ---------- /add to basket toast ---------- */

/* ---------- products ---------- */
.product-img{
    --bs-aspect-ratio: 100%;
    display: block;
}
.product-img img{
    object-fit: contain;
}

.product-title{
    color: var(--bs-body-color);
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
}
.product-title a{
    color: inherit;
}

.product-price-wrap{
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.product-price{
    color: var(--bs-body-color);
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}
.product-price-old{
    padding-top: 4px;

    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: line-through;
}
.product-price-wrap .badge{
    margin-left: auto;
}

/*.sale-badge{
	background-color: var(--bs-danger);
	padding: 6px;

	color: #fff;
	font-size: 13px;
	font-weight: bold;
}*/

.products-grid-item{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px 10px 15px;
    position: relative;
}
.products-grid-item .img-wrap{
    display: block;
    width: 100%;
    margin-bottom: 20px;
}
.products-grid-item .img-wrap .product-img{
    max-width: 160px;
    margin: 0 auto;
}
.products-grid-item .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.products-grid-item .product-title{
    padding-bottom: 10px;
    margin-bottom: auto;
}
.products-grid-item .product-price-wrap{
    margin-bottom: 18px;
}

/* info items */
.products-grid-item.info-item .img-wrap{
    margin-bottom: 10px;
}
.products-grid-item.info-item .product-img::before{
    padding-top: 75%;
}

.products-grid-item.info-item .info-wrap > * + *{
    margin-top: 8px;
}
.products-grid-item.info-item .product-title{
    padding-bottom: 0;
    margin-bottom: 0;

    font-family: var(--font-family-caps);
    font-weight: bold;
}
.products-grid-item.info-item .link{
    color: #121212;
    font-weight: bold;
    text-decoration: none;
}
.products-grid-item.info-item .link:hover{
    color: var(--bs-primary);
}

@media (min-width: 400px) {
    .products-grid-item{
        padding-left: 12px;
        padding-right: 12px;
    }
}
@media (min-width: 576px) {
    .products-grid-item{
        padding-left: 16px;
        padding-right: 16px;
    }
    .products-grid-item .product-title{
        padding-bottom: 20px;
    }
    .products-grid-item .product-price-wrap{
        margin-bottom: 28px;
    }
}
@media (min-width: 768px) {
    .products-grid-item.info-item {
        padding: 1rem 1.5rem 1.5rem;
    }
}

@media (max-width: 575px) {
    .products-grid-item .product-title{
        font-size: 12px;
    }
    .products-grid-item .btn{
        --bs-btn-padding-x: 0;
        --bs-btn-font-size: 11px;
    }
}

/* --- carousel --- */
.swiper.products-carousel .swiper-pagination{
    position: relative;
    bottom: 0;
}

@media (max-width: 575px) {
    .featured-products-carousel .swiper-slide{
        width: 282px;
    }
}
@media (max-width: 359px) {
    .products-carousel .swiper-slide{
        width: 172px;
    }
}

/* --- list --- */
.products-list-item{
    --item-px: 1.125rem;
    --item-py: 1.5rem;

    background-color: #fff;
    border: 1px solid #E1E1E1;
    border-radius: var(--border-radius-sm);
    padding: var(--item-py) var(--item-px);
    overflow: hidden;
}

.products-list .products-list-item:not(:first-child){
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.products-list .products-list-item:not(:last-child){
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.products-list .products-list-item + .products-list-item{
    border-top: none;
}

.products-list-item > .row{
    --bs-gutter-x: 0;

    align-items: center;
}

.products-list-item .col-start .row{
    --bs-gutter-x: 1rem;

    align-items: center;
}
.products-list-item .product-img{
    --bs-aspect-ratio: 100%;

    width: 80px;
}
.products-list-item .product-price-wrap {
    margin-top: 0.55rem;
}

.products-list-item .col-end{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.products-list-item .col-end .item-with-icon{
    color: #242424;
}

@media (min-width: 768px) {
    .products-list-item {
        --item-px: 1.5rem;
    }
    .products-list-item > .row{
        --bs-gutter-x: calc(var(--item-px) * 2);
    }
    .products-list-item .col-end{
        border-left: 1px solid #E1E1E1;
    }
}

@media (max-width: 767px) {
    .products-list-item .col-end{
        border-top: 1px solid #E1E1E1;
        padding-top: var(--item-py);
        padding-left: 0.75rem;
        margin-top: calc(var(--item-py) - 0.35rem);
    }
}
/* ---------- /products ---------- */


/* ---------- product counter ---------- */
.product-counter{
    display: flex;
    align-items: stretch;
    width: 108px;
    height: 36px;
    border: 1px solid #D7D7D7;
    border-radius: var(--border-radius-sm);
}

.product-counter button{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    background-color: transparent;
    border: 0;
    padding: 0;

    color: inherit;
    font-size: 20px;
    font-weight: bold;
}
.product-counter button.btn-decrease{
    border-right: 1px solid #D7D7D7;
}
.product-counter button.btn-increase{
    border-left: 1px solid #D7D7D7;
}
.product-counter button img{
    width: 16px;
}
.product-counter input{
    width: 100%;
    background-color: transparent;
    border: 0;
    outline: none;
    padding: 1px 0 0;

    color: #000;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}
/* ---------- /product counter ---------- */


/* ---------- media ---------- */
.media-grid-item{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: var(--border-radius-sm);
}
.media-grid-item .img-wrap{
    --bs-aspect-ratio: 52.1%;

    border-bottom: 8px solid var(--bs-primary);
    border-top-left-radius: var(--border-radius-sm);
    border-top-right-radius: var(--border-radius-sm);
}
.media-grid-item .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 20px 22px;
}
.media-grid-item .title{
    margin-bottom: 0.5rem;
    font-size: 14px;
    line-height: 1.4;
}
.media-grid-item .text{
    margin-bottom: 1rem;
    color: var(--bs-tertiary-color);
    font-size: 13px;
    line-height: 1.6;
}
.media-grid-item .date{
    margin-top: auto;

    color: var(--bs-tertiary-color);
    font-size: 12px;
    font-family: var(--font-family-caps);
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .swiper.media-carousel{
        padding: 0 var(--content-px);
        margin: 0 calc(var(--content-px) * -1);
    }
    .swiper.media-carousel .swiper-slide{
        width: calc(75vw);
    }
}
/* ---------- /media ---------- */


/* ---------- branches ---------- */
.branches-grid-item{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: var(--border-radius-sm);
}
.branches-grid-item .img-wrap{
    --bs-aspect-ratio: 123.405%;

    border-bottom: 8px solid var(--bs-primary);
}
.branches-grid-item .img-wrap,
.branches-grid-item .img-wrap .ratio{
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
}
.branches-grid-item .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bs-secondary);
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
    padding: 1.5rem;
}
.branches-grid-item .title{
    font-size: 14px;
    line-height: 1.4;
}

@media (min-width: 576px) {
    .branches-grid-item .info-wrap{
        min-height: 90px;
        padding: 1rem;
    }
}
@media (min-width: 768px) {
    .branches-grid-item .info-wrap{
        padding: 1.125rem 1.25rem 1rem;
    }
    .branches-grid-item .title{
        font-size: 16px;
    }
}
/* ---------- /branches ---------- */


/* ---------- logos carousel ---------- */
.logos-carousel .item{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    background-color: #fff;
    border-radius: var(--border-radius-sm);
    /*box-shadow: 0 4px 14px 0 rgba(202, 202, 202, 0.25);*/
    padding: 8px 16px;
}
.logos-carousel .item img{
    max-width: 100px;
    max-height: 56px;
    object-fit: contain;
}
@media (max-width: 767px) {
    .logos-carousel .swiper-slide{
        width: 180px;
    }
}
/* ---------- /logos carousel ---------- */


/* ---------- logos grid ---------- */
.logos-grid-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--bs-primary-rgb),0.08);
    border-radius: var(--border-radius-sm);
    padding: 13.34% 1rem;

    transition: background-color 0.15s ease-in-out;
}
.logos-grid-item .img-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 80px;
    margin-bottom: 20.95%;
}
.logos-grid-item img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logos-grid-item,
.logos-grid-item .name{
    color: #121212;
    font-family: var(--font-family-caps);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.logos-grid-item:hover{
    background-color: rgba(var(--bs-primary-rgb),0.05);
}
/* ---------- /logos grid ---------- */


/* ---------- banner ---------- */
.banner-card{
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-border-radius: var(--border-radius-sm);

    box-shadow: 0 4px 14px 0 rgba(202, 202, 202, 0.25);
}
.banner-card .img-wrap{
    max-width: 167px;
}
.banner-card .img-wrap img{
    display: block;
    width: 100%;
}
.banner-card .text-wrap{
    color: #454545;
    max-width: 363px;
}
@media (min-width: 768px) {
    .banner-card{
        --bs-card-spacer-y: 2.5rem;
        --bs-card-spacer-x: 2.5rem;
    }
    .banner-card .img-wrap{
        max-width: 283px;
    }
}
@media (max-width: 767px) {
    .banner-card{
        max-width: 284px;
        margin: 0 auto;
    }
    .banner-card .text-wrap{
        font-size: 12px;
    }
}
/* ---------- /banner ---------- */


/* ---------- aside nav ---------- */
.aside-nav ul{
    list-style: none;
}

.aside-nav > ul > li{
    margin-bottom: 1rem;
}
.aside-nav li ul{
    padding: 0.75rem 1rem;
}
.aside-nav li ul li{
    margin-bottom: 0.65rem;
}
.aside-nav li ul li:last-child{
    margin-bottom: 0;
}

.aside-nav .nav-item,
.aside-nav .nav-sub-item{
    color: #000;
    font-size: 14px;
    line-height: 1.4;

    transition: opacity 0.15s ease-in-out;
}
.aside-nav .nav-item{
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    border: 0;
    padding: 0;

    font-family: var(--font-family-caps);
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
}
.aside-nav .nav-item > img,
.aside-nav .nav-item > svg{
    flex-shrink: 0;
    width: 20px;
}

.aside-nav .nav-item:not(.active):hover,
.aside-nav .nav-sub-item:not(.active):hover{
    opacity: 0.6;
}
.aside-nav .nav-item.active,
.aside-nav .nav-sub-item.active{
    color: var(--bs-primary);
}
.aside-nav .nav-item.active svg *,
.aside-nav .nav-sub-item.active svg *{
    fill: var(--bs-primary);
}

/* items with borders */
.aside-nav-bordered > ul > li{
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 0;
}
.aside-nav-bordered .nav-item{
    width: 100%;
    padding: 1rem 24px;
}
.aside-nav-bordered li ul{
    padding: 0 20px 30px 52px;
}
.aside-nav li ul li{
    margin-bottom: 0.85rem;
}
/* ---------- /aside nav ---------- */


/* ---------- key-value list ---------- */
.key-value-list{
    list-style: none;
}
.key-value-list li{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #E1E1E1;
    padding: 8px 0;
}
/* ---------- /key-value list ---------- */


/* ---------- categories grid ---------- */
.categories-grid-item{
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    transition: background-color 0.15s ease-in-out;
}
.categories-grid-item .img-wrap{
    width: 100%;
    max-width: 182px;
    margin: 0 auto 1rem;
}
.categories-grid-item .img-wrap::before{
    padding-top: 70.5%;
}
.categories-grid-item .img-wrap img{
    object-fit: contain;
}
.categories-grid-item .title{
    margin: 3.585% 0;
    font-size: 14px;
    text-align: center;
}

.categories-grid-item:hover{
    background-color: rgba(255,255,255,0.4);
}
/* ---------- /categories grid ---------- */


/* ---------- row 2col with img ---------- */
.row-2col-with-img{
    --bs-gutter-y: 1.75rem;
    --bs-aspect-ratio: 86%;
}
.row-2col-with-img .col-title{
    margin-bottom: 1.5rem;
}
.row-2col-with-img .col-title.has-border{
    margin-bottom: 1.25rem;
}
.row-2col-with-img .col-title.has-border::after{
    content: "";
    display: block;
    width: 100%;
    max-width: 290px;
    border-bottom: 4px solid var(--bs-primary);
    margin-top: 0.5rem;
}
.row-2col-with-img .text-wrap{
    --heading-mb: 0.25rem;
}

.row-2col-with-img .col-img{
    display: flex;
    flex-direction: column;
    margin-left: auto;
}
.row-2col-with-img .col-img figure{
    --border-width: 14px;

    flex-grow: 1;
    display: flex;
    position: relative;
}
.row-2col-with-img .col-img figure .ratio{
    border-radius: var(--border-radius-md);
    z-index: 2;
}
.row-2col-with-img .col-img figure.border-bottom{
    border: none !important;
}
.row-2col-with-img .col-img figure.border-bottom .ratio{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.row-2col-with-img .col-img figure.border-bottom::after{
    content: "";
    width: 100%;
    border-bottom: var(--border-width) solid var(--bs-primary);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
}
.row-2col-with-img .col-img figure.border-bottom-right::before{
    content: "";
    width: 52%;
    height: 72%;
    max-width: 300px;
    max-height: 424px;
    background-color: var(--bs-primary);
    border-radius: var(--border-radius-md);
    position: absolute;
    bottom: calc(var(--border-width) * -1);
    right: calc(var(--border-width) * -1);
    z-index: 1;
}

@media (min-width: 768px) {
    .row-2col-with-img .col-img figure{
        --border-width: 1rem;
    }
}
@media (min-width: 992px) {
    .row-2col-with-img .col-img figure{
        --border-width: 1.125rem;
    }
}
@media (min-width: 1200px) {
    .row-2col-with-img .col-img figure.border-bottom-right{
        --border-width: 1.5rem;
    }
}

@media (max-width: 767px) {
    .row-2col-with-img .col-img figure.border-bottom-right{
        margin-right: var(--border-width);
    }
}
/* ---------- /row 2col with img ---------- */


/* ---------- features section ---------- */
.section-features .row-2col-with-img{
    --bs-gutter-y: 0;
    --bs-aspect-ratio: 75%;
}
.section-features .row-2col-with-img .col-info{
    --container-size-2: 363px;
    --container-size-3: 504px;

    padding: 3rem 2rem;
}
.section-features .row-2col-with-img .col-info .container-xs,
.section-features .row-2col-with-img .col-info .container-sm{
    padding: 0;
    margin: 0;
}
.section-features .row-2col-with-img .col-info .card{
    background-color: #EAEAEA;
}
.section-features .row-2col-with-img .col-info .card-body{
    color: var(--bs-tertiary-color);
    font-size: 13px;
}

@media (min-width: 992px) {
    .section-features .row-2col-with-img{
        --bs-aspect-ratio: 88%;
    }
    .section-features .row-2col-with-img .col-img figure{
        width: 100%;
        max-width: 674px;
        margin-left: auto;
    }
    .section-features .row-2col-with-img .col-img figure::after,
    .section-features .row-2col-with-img .col-img figure .ratio{
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .section-features .row-2col-with-img .col-img figure::after{
        content: "";
        width: 50%;
        height: 100%;
        background: #EEEEEE;
        background: linear-gradient(270deg,rgba(238, 238, 238, 0) 0%, rgba(238, 238, 238, 1) 100%);
        /*border-radius: var(--border-radius-md);*/
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
    }
}
/* ---------- /features section ---------- */


/* ---------- services ---------- */
.services-list{
    width: 100%;
    overflow: hidden;
}

.services-list-item{
    --info-col-px: 2rem;
    display: flex;
}

.services-list-item .col-img{
    flex-shrink: 0;
    display: flex;
    width: 100%;
}
.services-list-item .col-img figure{
    --bs-aspect-ratio: 26.5%;

    min-height: 94px;
    border-radius: var(--border-radius-md);
}

.services-list-item .col-info{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    padding: 1.5rem;
    position: relative;
}
.services-list-item .col-info::before{
    content: "";
    background-color: #fff;
    width: 100%;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 0;
    z-index: -1;
}

.services-list .services-list-item{
    margin-bottom: 2.5rem;
}
.services-list .services-list-item:last-child{
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .services-list-item .col-img{
        width: 55%;
    }
    .services-list-item .col-img figure{
        --bs-aspect-ratio: 183px;
    }

    .services-list-item .col-info{
        padding: 1.5rem 0 1.5rem var(--info-col-px);
    }
    .services-list-item .col-info::before{
        width: 50vw;
        height: 100%;
        top: 0;
        left: -10px;
    }

    .services-list .services-list-item:nth-child(even){
        flex-direction: row-reverse;
    }
    .services-list .services-list-item:nth-child(even) .col-info{
        padding-left: 0;
        padding-right: var(--info-col-px);
    }
    .services-list .services-list-item:nth-child(even) .col-info::before{
        left: auto;
        right: -10px;
    }
}
@media (min-width: 992px) {
    .services-list-item .col-img{
        width: 60%;
    }
}

@media (max-width: 767px) {
    .services-list-item{
        flex-direction: column;
    }
}
/* ---------- /services ---------- */


/* ---------- map ---------- */
.map .gm-style-iw.gm-style-iw-c,
.map .gm-style .gm-style-iw-tc::after{
    background-color: #EF881E;
}
.map .gm-style-iw.gm-style-iw-c{
    max-height: none !important;
    border: 1px solid #000;
    padding: 0 !important;
}
.map .gm-style .gm-style-iw-tc{
    width: 24px;
    height: 30px;
    filter: none;
    left: 2px;
}
.gm-style .gm-style-iw-tc::before {
    content: "";
    width: 24px;
    height: 12px;
    background: #000;

    position: absolute;
    top: -1px;
    left: -1px;

    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.gm-style .gm-style-iw-tc::after{
    width: 22px;
    height: 10px;
}
.map .gm-style-iw-chr{
    position: absolute;
    top: 0;
    right: 0;
}
.map .gm-style-iw-chr button{
    width: 20px !important;
    height: 20px !important;
}
.map .gm-style-iw-chr button > *{
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}
.map .gm-style-iw-d{
    max-height: none !important;
    overflow: visible !important;
}

.map .info-window{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 1rem;

    color: #313131;
    font-size: var(--fs-text5);
    font-weight: 400;
}
/* ---------- /map ---------- */



/* ==================== 5. content by pages ==================== */


/* ---------- home ---------- */
.main-slider{
    max-width: 1400px;
    border-radius: var(--border-radius-md);
}
.main-slider .swiper-slide{
    display: flex;
    flex-direction: column;
    min-height: 156px;
    padding: 24px 16px 40px;
}
.main-slider .swiper-pagination-lock{
    display: none !important;
}
.main-slider .swiper-slide > a,
.main-slider .img-wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.main-slider .swiper-slide > a{
    z-index: 6;
}
.main-slider .info-wrap{
    flex-grow: unset;
    width: 60%;
    max-width: 500px;
    margin: auto 0;
    position: relative;
    z-index: 5;
}

.main-slider .title{
    color: #fff;
    font-size: clamp(20px, 3vw, 40px);
    line-height: 1.4;
    margin-bottom: clamp(8px, 1.25vw, 16px);
}
.main-slider .text{
    max-width: 400px;
    color: #fff;
}

@media (min-width: 576px) {
    .main-slider .swiper-slide{
        min-height: 30vw;
        padding: 40px clamp(16px, 5vw, 94px) clamp(40px, 6vw, 100px);
    }
}
@media (min-width: 1400px) {
    .main-slider .swiper-slide{
        min-height: 424px;
        padding: 40px 94px 100px;
    }
}

@media (max-width: 575px) {
    .main-slider .text{
        display: none;
    }
}
/* ---------- /home ---------- */


/* ---------- product details ---------- */
.product-details-container{
    padding-top: 1.5rem;
    padding-bottom: 4rem;
}
.product-details-container > .row{
    --bs-gutter-y: 2.5rem;
}

/* slider */
.product-slider,
.product-slider-nav .swiper-slide{
    background-color: #fff;
}
.product-slider .swiper-btn-prev{
    left: 10px;
}
.product-slider .swiper-btn-next{
    right: 10px;
}
.product-slider .product-img,
.product-slider-nav .product-img{
    width: 100%;
    margin: auto;
}

.product-slider .swiper-slide{
    padding: 26px;
}
.product-slider .product-img{
    max-width: 327px;
}

.product-slider-nav{
    margin-top: 8px;
}
.product-slider-nav .swiper-slide{
    padding: 6px;
}
.product-slider-nav .product-img{
    max-width: 83px;
}

.product-slider-nav .swiper-slide{
    cursor: pointer;
}
.product-slider-nav .swiper-slide-thumb-active{
    opacity: 0.3;
}

/* --- info --- */
.product-details-container .col-info{
    color: #000;
    font-size: 14px;
}

.product-details-container .product-title{
    font-size: var(--fs-h3);
    font-weight: bold;
    line-height: 1.4;
}

.product-details-container .body{
    margin-top: 1.125rem;
}
.product-details-container .text,
.product-details-container .text-wrap,
.product-details-container .key-value-list{
    color: inherit;
    font-size: inherit;
}

.product-details-container .foo{
    margin-top: 1.5rem;
}
.product-price-wrap{
    margin: auto 0;
}

.product-details-container .col-info .container-sm,
.product-details-container .col-info .container-xs{
    max-width: 100%;
}

@media (min-width: 768px) {
    .product-details-container .col-info{
        display: flex;
        flex-direction: column;
        max-width: 530px;
        margin-left: auto;
        margin-right: auto;
    }
    .product-details-container .col-info .container-sm{
        max-width: 390px;
        padding: 0;
        margin: 0;
    }
    .product-details-container .col-info .container-xs{
        max-width: 344px;
        padding: 0;
        margin: 0;
    }
}
/* ---------- /product details ---------- */


/* ---------- basket ---------- */
.basket-item{
    margin-bottom: 12px;
}
.basket-item .row{
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;

    align-items: center;
}
.basket-item .product-img{
    width: 80px;
}
.basket-item .product-price-wrap{
    margin-top: 0.5rem;
}
/* ---------- /basket ---------- */


/* ---------- account ---------- */
.page-account .col-aside .card-body{
    --bs-card-spacer-y: 8px;
    --bs-card-spacer-x: 2rem;
}
.page-account .aside-nav li:last-child{
    border: none;
}
.page-account .aside-nav .nav-item{
    padding: 1rem 0;

    font-weight: bold;
}

.page-account .col-main{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 992px) {
    .page-account .aside-nav li{
        padding: 8px 0;
    }
}
@media (min-width: 1200px) {
    .page-account .col-main{
        padding-left: 1.5rem;
    }
}
@media (min-width: 1400px) {
    .page-account .col-main{
        padding-left: 36px;
    }
}

@media (max-width: 991px) {
    .page-account .col-aside{
        display: none;
        width: auto;
        padding: 0;
        position: absolute;
        left: var(--content-px);
        z-index: 25;
    }
    .page-account .col-aside > .card{
        --bs-card-border-radius: var(--border-radius-md) !important;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .14);
    }
}
/* ---------- /account ---------- */


/* ---------- contact ---------- */
.section-branches{
    --col-height: 450px;
    margin-bottom: 3rem;
}

.section-branches .map-container{
    width: 100%;
    height: var(--col-height);
    border-radius: 15px;
    position: relative;
}
.section-branches .map-container .map{
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-md);
    position: absolute;
    top: 0;
    left: 0;
}

.section-branches .branches-card{
    height: var(--col-height);
    padding: var(--bs-card-spacer-y) 0;
    position: relative;

    color: #313131;
    font-size: 14px;
}
.section-branches .branches-card > .card-body{
    padding-top: 0;
    padding-bottom: 0;
}

.section-branches .branches-card .card{
    --bs-card-bg: #f5f5f5;

    width: 100%;
    cursor: pointer;
}
.section-branches .branches-card .card:hover{
    --bs-card-bg: #f0f0f0;
}
.section-branches .branches-card .card + .card{
    margin-top: 8px;
}

.section-branches .branches-card .card-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

@media (min-width: 768px) {
    .section-branches .branches-card .card{
        --bs-card-spacer-x: 1.5rem;
    }
}

/* --- info --- */
.section-contact-info{
    color: #000;
}

.section-contact-info > .row > div{
    display: flex;
    flex-direction: column;
}

.section-contact-info a{
    color: inherit;
}
.section-contact-info a:not(.link):hover{
    text-decoration: underline;
}
.section-contact-info .card,
.section-contact-info .card-section{
    flex-grow: 1;
}
.section-contact-info .card-body{
    display: flex;
    flex-direction: column;
}
.section-contact-info .link[target="_blank"]{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.section-contact-info .link[target="_blank"]::after{
    content: "";
    width: 1rem;
    height: 1rem;
    background: url(../../images/icons/arrow_up_right_from_square.svg) center no-repeat;
    background-size: 100% auto;
}

.section-contact-info .img-wrap{
    --bs-aspect-ratio: 75%;

    flex-grow: 1;
    border-radius: var(--border-radius-md);
}
/* ---------- /contact ---------- */


/* ---------- section ---------- */
/* ---------- /section ---------- */