.animated-burger-icon-container {
    width: 20px;
    height: 10px;
    opacity: 1;
    position: relative;
    display: inline-block;
}

.animated-burger-icon-container span {
    width: 20px;
    height: 2px;
    background: white;
    opacity: 1;
    display: block;
    position: absolute;
    left: 0px;
    transition: 0.25s;
}

.animated-burger-icon-container span:nth-child(1) {
    top: -1px;
}

.animated-burger-icon-container span:nth-child(2) {
    top: 3px;
}

.animated-burger-icon-container span:nth-child(3) {
    top: 7px;
}

.animated-burger-icon-container.open {
    left: 3px;
}

.animated-burger-icon-container.open span:nth-child(1) {
    width: 14px;
    top:3px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.animated-burger-icon-container.open span:nth-child(2) {
    display: none;
}

.animated-burger-icon-container.open span:nth-child(3) {
    width: 14px;
    top:3px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.categories-dropitem {
    position: static;
}

#categories-dropdown-container {
    position: static;
}

#categories-dropdown-toggle {
    top: 58px;
    left: 237px;
    width: 149px;
    height: 45px;
}

@media screen and (max-width: 1000px) {
    #categories-dropdown-toggle {
        width: initial;
    }
}

#categories-dropdown-label {
    top: 71px;
    left: 294px;
    width: 68px;
    height: 19px;
    color: var(--white);
    text-align: left;
    font: normal normal 500 15px/19px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.categories-dropright-container {
    position: static!important;
    left: 350px;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #F7F7F9;
}

.categories-dropdown-submenu {
    animation-name: dropright-categories;
    animation-duration: 0.5s;
}

.categories-dropdown-submenu.dropdown-menu {
    align-content: flex-start;
    position: fixed;
    top: 156px;
    bottom: 0;
    left: 347px;
    width: calc(100% - 247px);
    height: calc(100% - 156px);
    border: 0;
    background-color: #F7F7F9;
    overflow-y: auto;
}

@media screen and (max-width: 768px) {
    .categories-dropdown-submenu.dropdown-menu {
        top: 216px;
        left: 247px;
        height: calc(100% - 216px);
    }
}

@media screen and (max-width: 450px) {
    .categories-dropdown-submenu.dropdown-menu {
        top: 206px;
        left: 247px;
        height: calc(100% - 206px);
    }
}

.categories-dropdown-submenu.dropdown-menu > div {
    padding: 20px;
    width: 24%;
}

@media screen and (max-width: 1450px) {
    .categories-dropdown-submenu.dropdown-menu > div {
        width: 32%;
    }
}

@media screen and (max-width: 1190px) {
    .categories-dropdown-submenu.dropdown-menu > div {
        width: 49%;
    }
}

@media screen and (max-width: 890px) {
    .categories-dropdown-submenu.dropdown-menu > div {
        padding: 12px;
    }
}

@media screen and (max-width: 670px) {
    .categories-dropdown-submenu.dropdown-menu > div {
        width: 99%;
    }
}

.categories-dropdown-submenu li.dropdown-item:hover {
    background-color: #FFFFFF;
}

.categories-dropdown-submenu.show {
    display: flex;
    flex-wrap: wrap;
}

@keyframes dropright-categories {
    from {width: 0px; opacity: 0;};
    to {width: 350px; opacity: 1;};
}

.categories-dropdown-submenu.odd {
    background: #F7F7F9 0% 0% no-repeat padding-box;
}

.categories-dropdown-submenu > .dropdown-item:hover {
    background-color: #F7F7F9;
}

.categories-dropdown-submenu.odd > .dropdown-item:hover {
    background-color: white;
}

.categories-dropdown-menu-right-item-text {
    width: 335px;
    height: 50px;
    color: var(--blue) !important;
    text-align: left !important;
    font: normal normal 500 14px/50px CF Asty Std !important;
    letter-spacing: 0px !important;
    color: #0D6AA0 !important;
    opacity: 1;
}

.categories-dropdown-menu {
    /* top: 119px; */
    left: 0;
    width: 350px;
    height: 961px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    transition: left 0.8s;
    padding-top: 0px!important;
}

@media screen and (max-width: 768px) {
    .categories-dropdown-menu {
        width: 250px;
    }
}

#categories-dropdown-container > .categories-dropdown-menu {
    display: block!important;
    left: -350px;
}

@media screen and (max-width: 768px) {
    #categories-dropdown-container > .categories-dropdown-menu {
        left: -250px;
    }
}

#categories-dropdown-container > .categories-dropdown-menu.show {
    left: 0;
}

.categories-dropdown-menu.dropdown-menu {
    position: fixed;
    top: 156px;
    bottom: 0;
    height: calc(100% - 156px);
    border: 0;
    border-radius: 0;
    padding: 10px 20px;
    font: normal normal 500 15px/50px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    overflow: hidden;
    overflow-y: auto;
}

@media screen and (max-width: 768px) {
    .categories-dropdown-menu.dropdown-menu {
        top: 215px;
        height: calc(100% - 215px);
    }
}

@media screen and (max-width: 450px) {
    .categories-dropdown-menu.dropdown-menu {
        top: 204px;
        height: calc(100% - 204px);
    }
}

.categories-dropdown-menu.dropdown-menu ul {
    padding: 0;
}

ul.collapse li {
    margin: 0;
}

.dropdown-item {
    height: 50px;
    line-height: 40px;
    text-align: left !important;
}

#categories-dropdown-container .dropdown-item {
    width: 335px;
    margin-left: 15px;
    padding: 0px;
    padding-left: 15px;
    border-radius: 7px 0px 0px 7px;
}

#categories-dropdown-container .categories-dropdown-submenu li.dropdown-item {
    width: 100%;
    border-radius: 7px;
}

#categories-dropdown-container .categories-dropdown-submenu ul li {
    padding-left: 25px;
}

#categories-dropdown-container .categories-dropdown-submenu ul li a {
    font-size: 13px;
}

@media screen and (max-width: 890px) {
    #categories-dropdown-container .categories-dropdown-submenu ul li a {
        font-size: 12px;
    }
}

.dropdown-item a {
    font: normal normal 500 15px/50px CF Asty Std;
    letter-spacing: 0px !important;
    color: #081E46 !important;
    text-decoration: none!important;
}

@media screen and (max-width: 890px) {
    .dropdown-item a {
        font-size: 13px;
    }
}

#categoriesModal .modal-header,
#categoriesModal button.close {
    color: #0D6AA0;
}

#categoriesModal button.close {
    font-size: 2rem;
}

#categoriesModal .back-button {
    margin-top: 5px;
    cursor: pointer;
}

#categoriesModal ul {
    list-style-type: none;
}

#categoriesModal ul li {
    margin-bottom: 33px;
    font-size: 15px;
    font-weight: 700;
    color: #081E46;
    cursor: pointer;
}

#categoriesModal .modal-body {
    position: relative;
    height: 700px;
}

#categoriesModal .mainMenu {
    position: relative;
    opacity: 1;
    z-index: 1000;
    transition: all 0.8s;
}

#categoriesModal .mainMenu.closed {
    opacity: 0;
    z-index: -400;
}

#categoriesModal .subcategories {
    position: absolute;
    top: 0;
    left: 500px;
    opacity: 0;
    transition: all 0.8s;
}

#categoriesModal .subcategories.open {
    opacity: 1;
    left: 1rem;
    width: 90%;
}

#categoriesModal .subcategories .card,
#categoriesModal .subcategories .card-header {
    background: none;
    border: none;
    font-size: 14pt;
    font-weight: 600;
    color: #081E46;
    padding-left: 1.25rem;
    padding-bottom: 0;
}

#categoriesModal .subcategories .card-body {
    padding-left: 2.5rem;
}

.categories-modal-submenu {
    position: relative;
}

/** Shopping List Details Modal **/
#shopping-list-details-modal .modal-dialog {
    max-width: 100%;
    width: 80%;
    top: 156px;
    z-index: 1041;
}

@media screen and (max-width: 768px) {
    #shopping-list-details-modal .modal-dialog {
        width: 100%;
    }
}

#shopping-list-details-modal .modal-body p {
    font-size: 21px;
    text-align: center;
}

.shopping-list-table {
    font: normal normal normal 16px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.shopping-list-table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #F7F7F9;
}

.shopping-list-table th, .shopping-list-table td, .shopping-list-table thead th {
    border: none;
    vertical-align: middle;
}

.header-config-container.navbar-light {
    flex-wrap: nowrap;
    padding: 12px 30px 12px 38px;
    background-color: #F7F7F9;
}

@media screen and (max-width: 576px) {
    .header-config-container.navbar-light {
        padding: 12px 20px 12px 20px;
        background-color: #F7F7F9;
    }
}

.header-config-container.navbar-light .navbar-text {
    font: normal normal normal 13px CF Asty Std;
    letter-spacing: 0.26px;
    color: #081E46;
}

#header-config-navbar-collapse {
    justify-content: right;
}

#header-config-navbar-collapse a.nav-link {
    margin-left: 30px;
    font: normal normal normal 13px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}
@media screen and (max-width: 992px) {
    #header-config-navbar-collapse a.nav-link {
        margin-left: 20px;
    }
}

@media screen and (max-width: 768px) {
    #header-config-navbar-collapse a.nav-link {
        text-align: right;
    }
}

#customCategoriesNav {
    background: #F7F7F9 0% 0% no-repeat padding-box;
    padding-top: 25px;
}

#loginModal {
    text-align: center;
    margin-top: 220px;
    z-index: 9999;
}

#loginModal h3 {
    font: normal normal 500 30px/75px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

#loginModal .form-control::placeholder {
    font: normal normal normal 13px/16px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 0.4;
}

#loginModal .btn.btn-primary {
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    padding: 13px 40px;
}

#loginModal a {
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
}

#loginModal h6 {
    font: normal normal 500 17px/40px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

#loginModal p {
    font: normal normal normal 13px/20px CF Asty Std;
    letter-spacing: 0.26px;
    color: #081E46;
}

#listsPopover ul {
    padding-left: 0;
    padding-right: 113px;
    list-style-type: none;
}

#listsPopover .popover-body {
    padding: 18px;
}

#autoSuggestionResults {
    width: 64%;
    max-height: 80%;
    border: 1px solid transparent;
    border-radius: 10px;
    background: white;
    position: fixed;
    left: 18%;
    overflow-y: auto;
    z-index: 9999;
}

@media screen and (max-width: 768px) {
    #autoSuggestionResults {
        width: 100%;
        left: 0;
    }
}

#autoSuggestionResults ul {
    list-style-type: none;
    font: normal normal normal 14px/21px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    padding: 27px 51px;
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
}

#autoSuggestionCategories ul {
    padding-top: 0;
}

#autoSuggestionTerms {
    background: #F7F7F9;
}

#autoSuggestionCategories p {
    font: normal normal 500 14px/33px CF Asty Std;
    letter-spacing: 0.28px;
    color: #0D6AA0;
    margin: 29px 0 0 51px;
}

#autoSuggestionCategories ul li {
    font: normal normal 500 14px/21px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    cursor: pointer;
}

#autoSuggestionCategories .auto-suggest-sub-categories {
    padding-left: 20px;
}

#autoSuggestionCategories ul.auto-suggest-sub-categories li {
    font: normal normal normal 14px/30px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

#autoSuggestionNoResults p {
    margin-top: 20px;
    text-align: center;
    font: normal normal 500 16px/33px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    opacity: 0.8;
}



/*******************
** HEADER NAV CSS **
*******************/
.header-nav-container.navbar-light {
    flex-wrap: nowrap;
    padding: 18px 30px;
    background-color: #FFFFFF;
}

@media screen and (max-width: 768px) {
    .header-nav-container.navbar-light {
        padding: 18px 15px;
    }
}

.header-nav-container.navbar-light #categories-dropdown-container {
    flex-shrink: 0;
}

.header-nav-container.navbar-light #categories-dropdown-toggle {
    border-radius: 8px;
}

.navbar-brand {
    height: 66px;
}

@media screen and (max-width: 768px) {
    .navbar-brand {
        height: 58px;
        margin-left: 20px;
    }
}

@media screen and (max-width: 426px) {
    .navbar-brand {
        height: 50px;
        margin-left: 10px;
    }
}

.navbar-brand a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#westnetLogo {
    max-height: 100%;
    max-width: 203px;
}

@media screen and (max-width: 450px) {
    .header-nav-container.navbar-light #westnetLogo {
        width: 101px;
    }
}

#header-nav-dropdown .nav-link {
    margin-left: 30px;
    font: normal normal normal 15px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

@media screen and (max-width: 1200px) {
    #header-nav-dropdown .nav-link {
        display: none;
    }
}

/* .header-nav-container.navbar-light .form-control {
    margin: 0 13px 0 30px;
    box-shadow: none;
    border: none;
} */

.header-nav-container.navbar-light .quantity-setter-container .form-control {
    margin: 0;
    border: 1px solid #EFEFF2;
}

@media screen and (max-width: 768px) {
    /* .header-nav-container.navbar-light .form-control {
        display: none;
    } */

    .header-nav-container.navbar-light .quantity-setter-container .form-control {
        display: block;
    }
}

.header-nav-search-prompt {
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

@media screen and (max-width: 768px) {
    .header-nav-container.navbar-light .header-nav-search-prompt {
        display: none;
    }
}

.header-nav-search-prompt > span {
    margin-right: 13px;
}

@media screen and (max-width: 1570px) {
    .header-nav-search-prompt > span {
        display: none;
    }
}

.header-nav-container.navbar-light .header-nav-login-button.btn.btn-warning {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 43px;
    padding: 11px 23px;
    border-radius: 8px;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
}

@media screen and (max-width: 450px) {
    .header-nav-container.navbar-light .header-nav-login-button.btn.btn-warning {
        margin-left: 10px;
        padding: 11px 12px;
    }
}

.header-nav-container.navbar-light .btn.btn-warning > span {
    margin-left: 9px;
}

@media screen and (max-width: 1200px) {
    .header-nav-container.navbar-light .btn.btn-warning > span {
        display: none;
    }
}

.header-nav-login-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left: 24px; */
}

@media screen and (max-width: 768px) {
    .header-nav-login-controls {
        margin-left: 12px;
    }
}

.header-nav-login-controls .btn > span {
    margin-left: 9px;
}

.header-nav-login-controls .lists-button-toggle.btn.btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    padding: 15px 22px;
}

@media screen and (max-width: 768px) {
    .header-nav-container.navbar-light .header-nav-login-controls .lists-button-toggle.btn.btn-primary {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    .header-nav-login-controls .lists-button-toggle.btn.btn-primary {
        padding: 15px 12px;
    }
}

@media screen and (max-width: 1480px) {
    .header-nav-login-controls #listsLabel {
        display: none;
    }
}

.modal-backdrop {
    z-index: 1;
}

.lists-button-menu .dropdown-item {
    padding: 0;
}

.lists-button-menu .dropdown-item > div {
    display: flex;
    justify-content: space-between;
}

.list-name-label {
    padding-left: 15px;
    height: 50px;
    line-height: 50px;
}

.delete-list-button {
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
    background-color: var(--white);
    background-color: #FFFFFF;
    width: 20%;
    height: 50px;
    text-align: center;
}

.delete-list-btn:hover {
    background-color: #E9ECEF;
}

.delete-list-btn:hover .lists-button-item-trash-icon {
    color: var(--danger);
    color: #DC3545;
}

.lists-button-item-trash-icon {
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
}

.lists-button-item-trash-icon:hover {
    cursor: pointer;
}

.header-nav-login-controls .header-nav-account-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
    padding: 12px 22px;
    border-radius: 8px;
}

@media screen and (max-width: 768px) {
    .header-nav-login-controls .header-nav-account-button {
        margin-left: 8px;
    }

    .header-nav-container.navbar-light .header-nav-login-controls .header-nav-account-button {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    .header-nav-login-controls .header-nav-account-button {
        padding: 12px;
    }
}

.header-nav-login-controls .header-nav-account-button > span {
    margin-left: 10px;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
}

@media screen and (max-width: 1480px) {
    .header-nav-login-controls .header-nav-account-button > span {
        display: none;
    }
}

.header-nav-login-controls #cartBtn {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin-left: 15px;
    padding: 13px 22px;
    border-radius: 8px;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
    box-shadow: 0px 0px 0px 0px #8cbb2e;
    transition: box-shadow 0.5s;
}

.header-nav-login-controls #cartBtn .badge-pill {
    position: absolute;
    top: 5px;
    right: 5px;
}

.animating-cart {
    animation: 0.3s linear 0s 4 alternate cart-grow;
}
@keyframes cart-grow {
    from {
        box-shadow: 0px 0px 0px 0px #8cbb2e;
    }
    to {
        box-shadow: 0px 0px 0px 5px #8cbb2e;
    }
}

@media screen and (max-width: 768px) {
    .header-nav-login-controls #cartBtn {
        margin-left: 8px;
    }
}

@media screen and (max-width: 450px) {
    .header-nav-login-controls #cartBtn {
        padding: 13px 12px;
    }
}

.header-nav-second-container.navbar-light {
    display: none;
    z-index: 100;
}

@media screen and (max-width: 768px) {
    .header-nav-second-container.navbar-light {
        display: flex;
        justify-content: flex-end;
        flex-wrap: nowrap;
        padding: 18px 15px;
        background-color: #FFFFFF;
    }
}

/* .header-nav-second-container.navbar-light .form-control {
    margin: 0 13px 0 0;
    box-shadow: none;
    border: none;
}

@media screen and (max-width: 768px) {
    .header-nav-second-container.navbar-light .form-control {
        margin: 0 10px 0 0;
    }
} */

@media screen and (max-width: 1480px) {
    .header-nav-login-controls #cartLabel {
        display: none;
    }
}

/*****************
** LISTS BUTTON **
*****************/
.lists-button-toggle.btn-primary {
    height: 45px;
    background: var(--white) 0% 0% no-repeat padding-box;
    background-color: var(--white) 0% 0% no-repeat padding-box;
    border: 1px solid var(--blue);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    background-color: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #0D6AA0;
    border-radius: 8px;
    opacity: 1;
}

.lists-button-toggle.btn-primary:hover {
    background: var(--blue) 0% 0% no-repeat padding-box;
    background-color: var(--blue) 0% 0% no-repeat padding-box;
    border-color: var(--blue);
    background: #0D6AA0 0% 0% no-repeat padding-box;
    background-color: #0D6AA0 0% 0% no-repeat padding-box;
    border-color: #0D6AA0;
}

.lists-button-toggle.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--white) 0% 0% no-repeat padding-box;
    background-color: var(--white) 0% 0% no-repeat padding-box;
    border-color: var(--blue);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    background-color: #FFFFFF 0% 0% no-repeat padding-box;
    border-color: #0D6AA0;
}

.lists-button-toggle.btn-primary:focus {
    background: var(--white) 0% 0% no-repeat padding-box;
    background-color: var(--white) 0% 0% no-repeat padding-box;
    border-color: var(--blue);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    background-color: #FFFFFF 0% 0% no-repeat padding-box;
    border-color: #0D6AA0;
    box-shadow: none;
}

.lists-button-icon {
    width: 17px;
    height: 17px;
    color: var(--blue);
    color: #0D6AA0;
    opacity: 1;
}

.lists-button-toggle:hover .lists-button-icon {
    color: var(--white);
    color: #FFFFFF;
}

.lists-button-toggle:not(:disabled):not(.disabled):active .lists-button-icon {
    color: var(--blue);
    color: #0D6AA0;
}

.lists-button-toggle:focus .lists-button-icon {
    color: var(--blue);
    color: #0D6AA0;
}

.lists-button-toggle span {
    color: var(--blue);
    text-align: left;
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
    opacity: 1;
}

.lists-button-toggle:hover span{
    color: var(--white);
    color: #FFFFFF;
}

.lists-button-toggle:not(:disabled):not(.disabled):active span{
    color: var(--blue);
    color: #0D6AA0;
}

.lists-button-toggle:focus span{
    color: var(--blue);
    color: #0D6AA0;
}

.lists-button-menu.dropdown-menu {
    width: 250px;
    max-height: 320px;
    overflow-y: auto;
    text-align: center;
    border-radius: 8px;
}

.lists-button-menu .dropdown-item-text {
    color: var(--dark-blue);
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 0.8;
}

.lists-button-menu .dropdown-item {
    width: 100%;
    color: var(--blue) !important;
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0 !important;
    opacity: 1;
}

.lists-button-menu .dropdown-item:hover {
    cursor: default;
}

.lists-button-menu .dropdown-item:active {
    background-color: #D8DBDE;
}

.lists-button-menu Button {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 120px;
    height: 35px;
    background: var(--white) 0% 0% no-repeat padding-box;
    border: 1px solid var(--blue);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #0D6AA0;
    border-radius: 8px;
    line-height: 17px;
    opacity: 1;
}

.lists-button-menu Button.btn-primary:hover {
    background: var(--blue) 0% 0% no-repeat padding-box;
    background-color: var(--blue) 0% 0% no-repeat padding-box;
    border-color: var(--blue);
    background: #0D6AA0 0% 0% no-repeat padding-box;
    background-color: #0D6AA0 0% 0% no-repeat padding-box;
    border-color: #0D6AA0;
}

.lists-button-menu Button.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--white) 0% 0% no-repeat padding-box;
    background-color: var(--white) 0% 0% no-repeat padding-box;
    border-color: var(--blue);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    background-color: #FFFFFF 0% 0% no-repeat padding-box;
    border-color: #0D6AA0;
}

.lists-button-menu Button.btn-primary:focus {
    background: var(--white) 0% 0% no-repeat padding-box;
    background-color: var(--white) 0% 0% no-repeat padding-box;
    border-color: var(--blue);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    background-color: #FFFFFF 0% 0% no-repeat padding-box;
    border-color: #0D6AA0;
}

.lists-button-menu Button span {
    width: 67px;
    height: 17px;
    color: var(--blue);
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
    opacity: 1;
}

.lists-button-menu Button:hover span {
    width: 67px;
    height: 17px;
    color: var(--white);
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}
/************************
** END OF LISTS BUTTON **
************************/

/*------------------------HOME-----------------------------*/

.hp-banner a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    max-width: 400px;
    margin: 46px auto;
}

.hp-banner img {
    max-width: 100%;
    max-height: 100%;
}

.welcome-section {
    background: #F7F7F9 0% 0% no-repeat padding-box;
}

#suggestions {
    margin: 104px 5.469vw; /* 104px 105px */
}

@media screen and (max-width: 768px) {
    #suggestions {
        margin: 104px 0;
    }
}

@media screen and (max-width: 450px) {
    #suggestions {
        margin: 52px 0;
    }
}

#categories {
    margin-top: 6px;
}

#customerCorner {
    margin-top: 126px;
    padding: 0 5.469vw; /* 105px */
    background-color: #F7F7F9;
}

@media screen and (max-width: 768px) {
    #customerCorner {
        padding: 0;
    }
}

@media screen and (max-width: 450px) {
    #customerCorner {
        margin-top: 63px;
    }
}

#topBrands {
    margin-top: 140px;
}

@media screen and (max-width: 450px) {
    #topBrands {
        margin-top: 70px;
    }
}

#westnetInfo {
    margin-top: 144px;
}

@media screen and (max-width: 450px) {
    #westnetInfo {
        margin-top: 72px;
    }
}

#westnetStatistics {
    margin-top: 138px;
}

@media screen and (max-width: 450px) {
    #westnetStatistics {
        margin-top: 69px;
    }
}

#services {
    margin-top: 104px;
    padding: 0 8.33333%;
}

@media screen and (max-width: 450px) {
    #services {
        margin-top: 52px;
    }
}

#orderAgain {
    margin-top: 107px;
    margin-bottom: 120px;
}

@media screen and (max-width: 450px) {
    #orderAgain {
        margin-top: 53px;
        margin-bottom: 60px;
    }
}

#seenRecently {
    margin-top: 126px;
}

@media screen and (max-width: 450px) {
    #seenRecently {
        margin-top: 63px;
    }
}

/*Banners*/
#bannersCarousel {
    margin: 46px 0;
    border-radius: 8px;
}

.carousel-control-prev, 
.carousel-control-next {
    z-index: 2;
}



/************
** WELCOME **
************/
.home-welcome-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 10.417vw; /* 0 200px */
}

@media screen and (max-width: 1200px) {
    .home-welcome-container {
        flex-direction: column;
    }
}

.home-welcome-prompt-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media screen and (max-width: 1200px) {
    .home-welcome-prompt-container {
        align-items: center;
    }
}

.home-welcome-prompt-container p:nth-child(1) {
    margin-bottom: 20px;
    font: normal normal 500 28px/36px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

@media screen and (max-width: 1200px) {
    .home-welcome-prompt-container p {
        text-align: center;
    }
}

.home-welcome-prompt-container p:nth-child(2) {
    margin-bottom: 27px;
    font: normal normal normal 17px/28px CF Asty Std;
    letter-spacing: 0.34px;
    color: #081E46;
}

.home-welcome-prompt-container .btn.btn-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 14px 32px;
    border-radius: 8px;
    font: normal normal 500 15px CF Asty Std;
    letter-spacing: 0.3px;
}

.home-welcome-info-cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 6.250vw; /* 120px */
}

@media screen and (max-width: 1600px) {
    .home-welcome-info-cards-container {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 1200px) {
    .home-welcome-info-cards-container {
        margin-top: 30px;
        margin-left: 0;
    }
}

.home-welcome-info-cards-container > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-welcome-info-card {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 235px;
    height: 250px;
    margin-left: 1.615vw; /* 31px */
    border-radius: 8px;
    background-color: #FFFFFF;
}

@media screen and (max-width: 1600px) {
    .home-welcome-info-card {
        margin-bottom: 1.615vw; /* 31px */
    }
}

@media screen and (max-width: 768px) {
    .home-welcome-info-card {
        width: 165px;
        height: 175px;
    }
}

@media screen and (max-width: 450px) {
    .home-welcome-info-card {
        width: 118px;
        height: 125px;
    }
}

.home-welcome-info-card .image-container {
    width: 23%;
}

.home-welcome-info-card img {
    max-width: 100%;
    filter: invert(25%) sepia(98%) saturate(1451%) hue-rotate(180deg) brightness(93%) contrast(90%);
}

.home-welcome-info-card p {
    margin-bottom: 0;
    padding: 0 60%;
    text-align: center;
    font: normal normal 500 15px CF Asty Std;
    letter-spacing: 0.3px;
    color: #0D6AA0;
}

@media screen and (max-width: 768px) {
    .home-welcome-info-card p {
        font-size: 12px;
    }
}

@media screen and (max-width: 450px) {
    .home-welcome-info-card p {
        font-size: 10px;
    }
}



/****************
** SUGGESTIONS **
****************/
.home-suggestions-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 99px 5.208vw 122px 5.208vw; /* 99px 100px 122px 100px */
    border-radius: 8px;
    background-color: #F7F7F9;
}

@media screen and (max-width: 992px) {
    .home-suggestions-container {
        flex-direction: column;
    }
}

.home-suggestions-navigation-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20%;
}

@media screen and (max-width: 992px) {
    .home-suggestions-navigation-tab {
        align-items: center;
        width: 100%;
        margin-right: 0;
        margin-bottom: 57px;
    }
}

.home-suggestions-nav-prompt {
    margin-bottom: 54px;
    font: normal normal 500 20px CF Asty Std;
    letter-spacing: 0.4px;
    color: #081E46;
    opacity: 0.4;
}

@media screen and (max-width: 992px) {
    .home-suggestions-nav-prompt {
        margin-bottom: 27px;
    }
}

.home-suggestions-nav-options {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 992px) {
    .home-suggestions-nav-options {
        flex-direction: row;
    }
}

@media screen and (max-width: 450px) {
    .home-suggestions-nav-options {
        flex-direction: column;
    }
}

.home-suggestions-nav-options .nav-link {
    width: fit-content;
    padding: 12px 26px;
    font: normal normal 500 27px CF Asty Std;
    letter-spacing: 0.54px;
    color: #081E46;
}

@media screen and (max-width: 768px) {
    .home-suggestions-nav-options .nav-link {
        padding: 12px 13px;
        font-size: 17px;
    }
}

.home-suggestions-nav-options .nav-link.active {
    border-left: 4px solid #8CBB2E;
    color: #0D6AA0;
}

@media screen and (max-width: 992px) {
    .home-suggestions-nav-options .nav-link.active {
        border-bottom: 4px solid #8CBB2E;
        border-left: none;
    }
}

@media screen and (max-width: 768px) {
    .home-suggestions-nav-options .nav-link.active {
        border-bottom-width: 2px;
    }
}

.home-suggestions-swiper-container {
    width: 80%;
}

@media screen and (max-width: 992px) {
    .home-suggestions-swiper-container {
        width: 100%;
    }
}

.home-suggestions-swiper-container .swiper {
    padding-bottom: 45px;
}

.home-suggestions-swiper-container .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 20px;
    height: 3px;
}

.home-suggestions-swiper-container .swiper-pagination-bullet {
    background-color: #0D6AA0;
}

.home-suggestions-swiper-container .swiper-wrapper {
    box-shadow: 0px 10px 29px -29px #102B6314;
}

.home-suggestions-swiper-container .swiper-slide {
    width: fit-content;
}

.home-suggestions-swiper-container .product-swiper-card {
    background-color: #FFFFFF;
}

@media screen and (max-width: 450px) {
    .home-suggestions-swiper-container .product-swiper-card {
        width: 209px;
        height: 319px;
    }
}



/***************
** CATEGORIES **
***************/
.home-categories-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 5.469vw; /* 0 105px */
}

@media screen and (max-width: 768px) {
    .home-categories-container {
        padding: 0;
    }
}

.home-categories-container > p {
    font: normal normal 500 25px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

@media screen and (max-width: 992px) {
    .home-categories-container > p {
        align-self: flex-start;
        padding-left: 4.010vw; /* 77px */
    }
}

@media screen and (max-width: 450px) {
    .home-categories-container > p {
        text-align: center;
    }
}

.home-categories-navigation {
    margin-top: 34px;
}

@media screen and (max-width: 992px) {
    .home-categories-navigation {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        background-color: #F7F7F9;
    }
}

@media screen and (max-width: 450px) {
    .home-categories-navigation {
        margin-top: 17px;
    }
}

.home-categories-navigation .nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px 44px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0.56px;
    color: #081E46;
}

@media screen and (max-width: 992px) {
    .home-categories-navigation .nav-link {
        padding-left: 4.010vw; /* 77px */
    }
}

@media screen and (max-width: 450px) {
    .home-categories-navigation .nav-link {
        padding-bottom: 11px;
    }
}

.home-categories-navigation .nav-link > img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.home-categories-navigation .nav-link.active {
    background-color: #F7F7F9;
    color: #0D6AA0;
}

.home-categories-sub-categories-container {
    width: 100%;
    padding: 50px 4.010vw; /* 50px 77px */
    border-radius: 8px;
    background-color: #F7F7F9;
}

@media screen and (max-width: 450px) {
    .home-categories-sub-categories-container {
        padding: 25px 4.010vw; /* 25px 77px */
    }
}

.home-categories-sub-categories-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

@media screen and (max-width: 992px) {
    .home-categories-sub-categories-grid {
        display: none;
    }
}

.home-categories-sub-category-card {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 220px;
    height: 280px;
    margin: 18px;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.home-categories-sub-category-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 82%;
    height: 47%;
    cursor: pointer;
}

.home-categories-sub-category-image img {
    max-width: 100%;
    max-height: 100%;
}

.home-categories-sub-category-card a:nth-child(2) {
    width: 82%;
    height:14%;
}

.home-categories-sub-category-card p {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-bottom: 0;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    cursor: pointer;
}

.home-categories-sub-categories-slider {
    width: 100%;
}

@media screen and (min-width: 993px) {
    .home-categories-sub-categories-slider {
        display: none;
    }
}

.home-categories-sub-categories-slider .swiper.swiper-horizontal {
    width: 100%;
    padding-bottom: 20px;
}

.home-categories-sub-categories-slider .swiper-slide {
    width: fit-content;
    height: fit-content;
}

.home-categories-sub-categories-slider .swiper-scrollbar-drag {
    cursor: grab;
}

.home-categories-sub-categories-slider .swiper-scrollbar-drag:active {
    cursor: grabbing;
}



/********************
** CUSTOMER CORNER **
********************/
.home-customer-corner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 99px 5.208vw 122px 5.208vw; /* 99px 100px 122px 100px */
    border-radius: 8px;
    background-color: #F7F7F9;
}

@media screen and (max-width: 992px) {
    .home-customer-corner-container {
        flex-direction: column;
    }
}

@media screen and (max-width: 450px) {
    .home-customer-corner-container {
        padding: 50px 5.208vw 61px 5.208vw; /* 50px 100px 61px 100px */
    }
}

.home-customer-corner-navigation-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20%;
}

@media screen and (max-width: 992px) {
    .home-customer-corner-navigation-tab {
        align-items: center;
        width: 100%;
        margin-right: 0;
        margin-bottom: 57px;
    }
}

@media screen and (max-width: 450px) {
    .home-customer-corner-navigation-tab {
        margin-bottom: 29px;
    }
}

.home-customer-corner-nav-prompt {
    margin-bottom: 54px;
    font: normal normal 500 20px CF Asty Std;
    letter-spacing: 0.4px;
    color: #081E46;
    opacity: 0.4;
}

@media screen and (max-width: 992px) {
    .home-customer-corner-nav-prompt {
        margin-bottom: 27px;
    }
}

@media screen and (max-width: 450px) {
    .home-customer-corner-nav-prompt {
        margin-bottom: 14px;
    }
}

.home-customer-corner-nav-options {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 992px) {
    .home-customer-corner-nav-options {
        align-items: center;
    }
}

@media screen and (max-width: 450px) {
    .home-customer-corner-nav-options {
        flex-direction: column;
    }
}

.home-customer-corner-nav-options .nav-link {
    width: fit-content;
    padding: 12px 26px;
    font: normal normal 500 27px CF Asty Std;
    letter-spacing: 0.54px;
    color: #081E46;
}

@media screen and (max-width: 768px) {
    .home-customer-corner-nav-options .nav-link {
        padding: 12px 13px;
        font-size: 17px;
    }
}

.home-customer-corner-nav-options .nav-link.active {
    border-left: 4px solid #8CBB2E;
    color: #0D6AA0;
}

@media screen and (max-width: 992px) {
    .home-customer-corner-nav-options .nav-link.active {
        border-bottom: 4px solid #8CBB2E;
        border-left: none;
    }
}

@media screen and (max-width: 768px) {
    .home-customer-corner-nav-options .nav-link.active {
        border-bottom-width: 2px;
    }
}

.home-customer-corner-swiper-container {
    width: 80%;
}

@media screen and (max-width: 992px) {
    .home-customer-corner-swiper-container {
        width: 100%;
    }
}

.home-customer-corner-swiper-container .customer-corner-slider {
    display: none;
}

.home-customer-corner-swiper-container .customer-corner-slider.show {
    display: block;
}

.home-customer-corner-swiper-container .swiper {
    padding-bottom: 45px;
}

.home-customer-corner-swiper-container .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 20px;
    height: 3px;
}

.home-customer-corner-swiper-container .swiper-pagination-bullet {
    background-color: #0D6AA0;
}

.home-customer-corner-swiper-container .swiper-wrapper {
    box-shadow: 0px 10px 29px -29px #102B6314;
}

.home-customer-corner-swiper-container .swiper-slide {
    width: fit-content;
}

.home-customer-corner-article-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 500px;
    height: 486px;
}

@media screen and (max-width: 768px) {
    .home-customer-corner-article-card {
        width: 350px;
        height: 340px;
    }
}

@media screen and (max-width: 450px) {
    .home-customer-corner-article-card {
        width: 250px;
        height: 243px;
    }
}

.home-customer-corner-article-image {
    display: flex;
    align-items: center;
    width: 100%;
    height: 68%;
}

.home-customer-corner-article-image > img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
}

.home-customer-corner-article-text {
    height: 16%;
    margin-bottom: 0;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    overflow-y: auto;
    scrollbar-color: #E3E3E3 transparent;
    scrollbar-width: thin;
}

@media screen and (max-width: 768px) {
    .home-customer-corner-article-text {
        font-size: 12px;
    }
}

@media screen and (max-width: 450px) {
    .home-customer-corner-article-text {
        font-size: 11px;
    }
}

.home-customer-corner-article-text > span {
    font: normal normal 500 19px CF Asty Std;
    letter-spacing: -0.19px;
}

@media screen and (max-width: 768px) {
    .home-customer-corner-article-text > span {
        font-size: 16px;
    }
}

@media screen and (max-width: 450px) {
    .home-customer-corner-article-text > span {
        font-size: 15px;
    }

    .home-customer-corner-br-hidden {
        display: none;
    }
}

.home-customer-corner-article-card .btn.btn-outline-primary {
    width: fit-content;
    padding: 15px 24px;
    border-radius: 8px;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
}

@media screen and (max-width: 768px) {
    .home-customer-corner-article-card .btn.btn-outline-primary {
        font-size: 12px;
    }
}

@media screen and (max-width: 450px) {
    .home-customer-corner-article-card .btn.btn-outline-primary {
        padding: 8px 12px;
        font-size: 11px;
    }
}



/***************
** TOP BRANDS **
***************/
.home-top-brands-container {
    display: flex;
    flex-direction: column;
    /* padding: 0 10.677vw; */ /* 0 205px */
    padding: 0 11.458vw;
    font: normal normal normal 19px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.home-top-brands-title {
    text-align: center;
    font-weight: 500;
    font-size: 25px;
}

.home-top-brands-text {
    margin-top: 34px;
}

.home-top-brands-container .btn.btn-outline-primary {
    align-self: center;
    margin-top: 34px;
    width: fit-content;
    padding: 15px 26px;
    border-radius: 8px;
    font: normal normal 500 13px CF Asty Std;
    letter-spacing: 0px;
}

.home-top-brands-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 450px) {
    .home-top-brands-header {
        flex-direction: column;
        justify-content: center;
    }
}

.home-top-brands-header-title {
    margin-bottom: 0;
    font: normal normal 500 20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.home-top-brands-header .btn.btn-outline-primary {
    width: fit-content;
    padding: 15px 26px;
    border-radius: 8px;
    font: normal normal 500 13px CF Asty Std;
    letter-spacing: 0px;
}

@media screen and (max-width: 450px) {
    .home-top-brands-header .btn.btn-outline-primary {
        margin-top: 26px;
    }
}

.home-top-brands-display {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 26px;
}

.home-top-brands-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 193px;
    height: 95px;
    padding: 20px;
}

.home-top-brands-image > img {
    max-width: 100%;
    max-height: 100%;
    /*filter: invert(87%) sepia(14%) saturate(5645%) hue-rotate(193deg) brightness(91%) contrast(104%);*/
}



/*****************
** WESTNET INFO **
*****************/
.home-westnet-info-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10.677vw; /* 0 205px */
}

@media screen and (max-width: 992px) {
    .home-westnet-info-container {
        flex-direction: column-reverse;
    }
}

.home-westnet-info-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 5.208vw; /* 100px */
}

@media screen and (max-width: 992px) {
    .home-westnet-info-main {
        padding-right: 0;
    }
}

.home-westnet-info-title {
    margin-bottom: 21px;
    font: normal normal 500 25px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

@media screen and (max-width: 450px) {
    .home-westnet-info-title {
        text-align: center;
        font-size: 22px;
    }
}

.home-westnet-info-text {
    margin-bottom: 30px;
    font: normal normal normal 19px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

@media screen and (max-width: 450px) {
    .home-westnet-info-text {
        margin-bottom: 15px;
        text-align: center;
        font-size: 16px;
    }
}

.home-westnet-info-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-right: -15px;
}

.home-westnet-info-footer .btn.btn-outline-primary {
    flex: 1;
    margin-top: 10px;
    margin-right: 15px;
    padding: 14px 25px;
    border-radius: 8px;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
    white-space: nowrap;
}

.home-westnet-info-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-westnet-info-image > img {
    max-width: 100%;
    max-height: 100%;
}

/***********************
** WESTNET STATISTICS **
***********************/
.home-westnet-statistics-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 11.458vw; /* 0 220px */
}

@media screen and (max-width: 992px) {
    .home-westnet-statistics-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 10.677vw; /* 0 205px */
    }
}

.home-westnet-statistics-card {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen {
    .home-westnet-statistics-card {
        margin-bottom: 20px;
    }
}

.home-westnet-statistics-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 33px;
    padding: 15px 1.719vw;
    border-right: 2px solid #8CBB2E;
    color: #0D6AA0;
}

.home-westnet-statistics-card-icon img {
    width: 75px;
    height: 75px;
    filter: invert(25%) sepia(98%) saturate(1451%) hue-rotate(180deg) brightness(93%) contrast(90%);
}

.home-westnet-statistics-card-text {
    padding-left: 33px;
    padding-left: 1.719vw;
}

.home-westnet-statistics-card-main-title {
    margin-bottom: 7px;
    font: normal normal 500 42px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

@media screen and (max-width: 1300px) {
    .home-westnet-statistics-card-main-title {
        font-size: 35px;
    }
}

.home-westnet-statistics-card-sub-title {
    font: normal normal 500 17px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

@media screen and (max-width: 1300px) {
    .home-westnet-statistics-card-sub-title {
        font-size: 14px;
    }
}



/*************
** SERVICES **
*************/
.home-services-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 992px) {
    .home-services-container {
        flex-direction: column;
    }
}

.service {
    display: flex;
    align-items: center;
    max-width: 24%;
    font: normal normal normal 14px/24px CF Asty Std;
    letter-spacing: 0.47px;
    color: #0D6AA0;
}

@media screen and (max-width: 992px) {
    .service {
        max-width: 100%;
        width: 100%;
        margin-bottom: 20px;
    }
}

.service-icon {
    margin-right: 25px;
    width: 44px;
}

.service-label {
    flex-grow: 3;
}

.service-icon, .service-label {
    color: #0D6AA0;
}



/****************
** ORDER AGAIN **
****************/
.home-order-again-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10.677vw; /* 0 205px */
}

.home-order-again-title {
    font: normal normal 500 23px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

@media screen and (max-width: 450px) {
    .home-order-again-title {
        text-align: center;
    }
}

.home-order-again-swiper-container {
    width: 100%;
    margin-top: 46px;
}

@media screen and (max-width: 450px) {
    .home-order-again-swiper-container {
        margin-top: 23px;
    }
}

.home-order-again-swiper-container .swiper {
    padding-bottom: 45px;
}

.home-order-again-swiper-container .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 20px;
    height: 3px;
}

.home-order-again-swiper-container .swiper-pagination-bullet {
    background-color: #0D6AA0;
}

.home-order-again-swiper-container .swiper-wrapper {
    box-shadow: 0px 10px 29px -29px #102B6314;
}

.home-order-again-swiper-container .swiper-slide {
    width: fit-content;
}

.home-order-again-swiper-container .product-swiper-card {
    background-color: #FFFFFF;
}

@media screen and (max-width: 450px) {
    .home-order-again-swiper-container .product-swiper-card {
        width: 209px;
        height: 319px;
    }
}



/******************
** SEEN RECENTLY **
******************/
.home-seen-recently-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10.677vw; /* 0 205px */
}

.home-seen-recently-title {
    font: normal normal 500 23px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

@media screen and (max-width: 450px) {
    .home-seen-recently-title {
        text-align: center;
    }
}

.home-seen-recently-swiper-container {
    width: 100%;
    margin-top: 46px;
}

@media screen and (max-width: 450px) {
    .home-seen-recently-swiper-container {
        margin-top: 23px;
    }
}

.home-seen-recently-swiper-container .swiper {
    padding-bottom: 45px;
}

.home-seen-recently-swiper-container .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 20px;
    height: 3px;
}

.home-seen-recently-swiper-container .swiper-pagination-bullet {
    background-color: #0D6AA0;
}

.home-seen-recently-swiper-container .swiper-wrapper {
    box-shadow: 0px 10px 29px -29px #102B6314;
}

.home-seen-recently-swiper-container .swiper-slide {
    width: fit-content;
}

.home-seen-recently-swiper-container .product-swiper-card {
    background-color: #FFFFFF;
}

@media screen and (max-width: 450px) {
    .home-seen-recently-swiper-container .product-swiper-card {
        width: 209px;
        height: 319px;
    }
}



/************
** ACCOUNT **
************/
.home-account-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 54px; */
    padding: 100px 8.33333%;
}

@media screen and (max-width: 1350px) {
    .home-account-container {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .home-account-container {
        padding: 0;
    }
}

.home-account-main-container {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 70%;
    padding: 50px 3.125vw; /* 50px 60px */
    box-shadow: 0px 0px 20px #0C11500A;
    border-radius: 8px;
    background-color: #FFFFFF;
}

@media screen and (max-width: 1350px) {
    .home-account-main-container {
        width: 100%;
    }
}

@media screen and (max-width: 992px) {
    .home-account-main-container {
        flex-direction: column;
    }
}

.home-account-user {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 55px;
}

@media screen and (max-width: 768px) {
    .home-account-user {
        flex-direction: column;
        margin-right: 0;
        margin-bottom: 55px;
    }
}

.home-account-user-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 40px;
}

@media screen and (max-width: 768px) {
    .home-account-user-text {
        align-items: center;
        margin-left: 0;
        text-align: center;
    }
}

.home-account-user-company {
    font: normal normal 500 17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    margin-bottom: 9px;
}

.home-account-user-name {
    font: normal normal 500 34px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    margin-bottom: 9px;
}

.home-account-user-logout {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font: normal normal 500 13px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
    cursor: pointer;
}

.home-account-user-logout > span {
    margin-left: 10px;
}

.home-account-controls.nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 55px;
    border-left: 2px solid #F7F7F9;
}

@media screen and (max-width: 768px) {
    .home-account-controls.nav {
        align-items: center;
        padding-left: 0;
    }
}

.home-account-controls.nav .home-account-nav-main-option.nav-link {
    font-weight: 500;
}

.home-account-controls.nav .nav-link {
    margin-bottom: 20px;
    padding: 0;
    font: normal normal normal 15px CF Asty Std;
    letter-spacing: 0.3px;
    color: #0D6AA0;
}

.home-account-sub-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30%;
    margin-left: 30px;
}

@media screen and (max-width: 1350px) {
    .home-account-sub-container {
        width: 100%;
        margin-top: 30px;
        margin-left: 0;
    }
}

.home-account-sub-container .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 23px 30px;
    box-shadow: 0px 0px 20px #0C11500A;
    border: none;
    border-radius: 8px;
    font: normal normal normal 16px CF Asty Std;
    letter-spacing: 0.32px;
}

@media screen and (max-width: 450px) {
    .home-account-sub-container .btn {
        padding: 12px 15px;
        font-size: 14px;
    }
}

.home-account-sub-container .btn > div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: -15px;
}

.home-account-sub-container .btn svg {
    margin: 0 15px;
}

.home-account-quick-order-button.btn {
    margin-bottom: 0;
    background-color: #8CBB2E;
}

.home-account-quick-order-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    margin: 0 15px;
}

.home-account-quick-order-image > img {
    max-width: 100%;
    max-height: 100%;
}

/*Account*/
#account {
    background: #F7F7F9 0% 0% no-repeat padding-box;
    padding-top: 53px;
    padding-bottom: 63px;
}

#account > .row {
    justify-content: center;
}

#accountDetails {
    margin: 0;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 20px #0C11500A;
    border: 1px solid white;
    border-radius: 8px;
}

#accountImg {
    padding-left: 63px;
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#accountInfo {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
}

#accountInfo h3 {
    font: normal normal 500 34px/42px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

#accountInfo h6 {
    font: normal normal 500 17px/21px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

#account .my-account-title {
    font: normal normal 500 16px/45px CF Asty Std;
}

#account .nav-link:not(.my-account-title) {
    font: normal normal normal 15px/20px CF Asty Std;
}

@media screen and (max-width: 1336px) {
    #accountInfo h3 {
        font: normal normal 500 34px/42px CF Asty Std;
        letter-spacing: 0px;
        color: #081E46;
    }
}

#accountManagement {
    padding: 53px 20px;
}

.account-btns.nav {
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.account-btns .nav-item {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid white;
    border-radius: 8px;
    width: 100%;
    font: normal normal normal 16px/18px CF Asty Std;
    letter-spacing: 0.32px;
}

.account-btns .nav-item:not(:last-child) {
    margin-bottom: 30px;
}

.account-btns .nav-link {
    display: flex;
    align-items: center;
}

.account-btns .nav-item:last-child {
    background: #8CBB2E 0% 0% no-repeat padding-box;
}

.account-btns .nav-item:last-child .nav-link {
    color: white;
}

.account-btn-icon {
    margin-right: 1rem;
}

img.account-btn-icon {
    height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.account-btn-chevron {
    flex: 1;
    text-align: right;
}

#logoutBtn {
    text-decoration: none;
    background-color: transparent;
    border: none;
    padding: 0;
    font: normal normal 500 13px/16px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0 !important;
}

.notifications-component {
    z-index: 10000;
}

#loginPage {
    width: 60%;
    min-width: 350px;
    padding: 40px;
    margin: 180px auto;
    border-radius: 8px;
    box-shadow: 6px 6px 26px #0C11500D;
    text-align: center;
    font-family: CF Asty Std;
    color: #081E46;
}

@media screen and (max-width: 768px) {
    #loginPage {
        margin: 60px auto;
    }
}

.my-account-nav-container {
    padding-left: 20px;
}

.my-account-nav-container .my-account-nav-accordion {
    display: none;
}

@media screen and (max-width: 1200px) {
    .my-account-nav-container {
        padding-left: 0;
    }
    .my-account-nav-container > div:first-child {
        display: none;
    }
    .my-account-nav-container .my-account-nav-accordion {
        display: block;
    }
}

.my-account-nav-container h6 {
    text-align: left;
    font: normal normal 500 16px/20px CF Asty Std;
    letter-spacing: 0.32px;
    color: #081E46;
    padding-top: 30px;
    padding-bottom: 20px;
    opacity: 1;
}

.my-account-nav-menu.nav {
    padding-bottom: 30px;
}

.my-account-nav-menu {
    margin-bottom: 0;
}

@media screen and (max-width: 1200px) {
    .my-account-nav-menu {
        margin-bottom: 20px;
    }
}

.my-account-nav-menu-link.nav-link {
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.my-account-nav-menu-link.nav-link.active {
    color: #0D6AA0;
}

.my-account-nav-accordion > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    border-radius: 5px;
    background-color: #FFFFFF;
}

.my-account-nav-accordion > div .chevron-down {
    transform: rotate(0deg);
    transition: all 0.3s;
}

.my-account-nav-accordion > div .chevron-up {
    transform: rotate(180deg);
    transition: all 0.3s;
}

body {
    margin: 0;
}

/* #__next {
    overflow: hidden;
} */

.navigation-overlay {
    position: fixed;
    top: 158px;
    display: block;
    width: 100%;
    height: calc(100% - 158px);
    background: #081E46;
    opacity: 0;
    z-index: -1;
    transition: all 0.5s;
}

.navigation-overlay.open {
    opacity: 0.8;
    z-index: 99;
}

header {
    position: sticky; /*fixed*/
    width: 100%;
    top: 0;
    z-index: 100;
}

@font-face {
    font-family: "CF Asty Std";
    font-weight: normal;
    src: local("CFAstyStd-Book"), 
    local("CF Asty Std Book"), 
    url("../Media/fonts/CFAstyStd-Book.ttf") format("ttf"), 
    url("../Media/fonts/CFAstyStd-Book.woff") format("woff");
}

@font-face {
    font-family: "CF Asty Std";
    font-style: oblique;
    font-weight: normal;
    src: local("CFAstyStd-BookOblique"), 
    local("CF Asty Std Book Oblique"), 
    url("../Media/fonts/CFAstyStd-BookOblique.ttf") format("ttf"), 
    url("../Media/fonts/CFAstyStd-BookOblique.woff") format("woff");
}

@font-face {
    font-family: "CF Asty Std";
    font-weight: 500;
    src: local("CFAstyStd-Medium"), 
    local("CF Asty Std Medium"), 
    url("../Media/fonts/CFAstyStd-Medium.ttf") format("ttf"), 
    url("../Media/fonts/CFAstyStd-Medium.woff") format("woff")
}

@font-face {
    font-family: "CF Asty Std";
    font-style: oblique;
    font-weight: 500;
    src: local("CFAstyStd-MediumOblique"), 
    local("CF Asty Std Medium Oblique"), 
    url("../Media/fonts/CFAstyStd-MediumOblique.ttf") format("ttf"), 
    url("../Media/fonts/CFAstyStd-MediumOblique.woff") format("woff")
}

@font-face {
    font-family: "CF Asty Std";
    font-weight: bold;
    src: local("CFAstyStd-Bold"), 
    local("CF Asty Std Bold"), 
    url("../Media/fonts/CFAstyStd-Bold.ttf") format("ttf"), 
    url("../Media/fonts/CFAstyStd-Bold.woff") format("woff")
}

@font-face {
    font-family: "CF Asty Std";
    font-style: oblique;
    font-weight: bold;
    src: local("CFAstyStd-BoldOblique"), 
    local("CF Asty Std Bold Oblique"), 
    url("../Media/fonts/CFAstyStd-BoldOblique.ttf") format("ttf"), 
    url("../Media/fonts/CFAstyStd-BoldOblique.woff") format("woff")
}

#footerContent {
    margin-top: 150px;
}

#footerContainer {
    background: #F7F7F9 0% 0% no-repeat padding-box;
    padding-top: 90px;
}

#footerContainer .col {
    text-align: center;
}

#footerContainer .nav-link {
    padding-left: 0;
}

footer h5 {
    font: normal normal 500 18px/22px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

footer .row div:not(:last-child) a {
    font: normal normal normal 14px/30px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    opacity: 1;
    padding: 0!important;
}

footer .row div:last-child a {
    font: normal normal normal 14px/30px CF Asty Std;
    letter-spacing: 0.28px;
    color: #0D6AA0;
}

footer .row div:last-child a:hover {
    font-size: 15px;
}

#footerContainer > .row:first-child > .col:last-child a {
    font: normal normal 500 16px/20px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

footer h6 {
    font: normal normal normal 12px/30px CF Asty Std;
    letter-spacing: 0.48px;
    color: #081E46;
    opacity: 0.5;
    margin-top: 40px;
}

footer .card {
    border: none;
}

footer .card-header {
    background: none;
    border: none;
    cursor: pointer;
    font: normal normal 500 20px/30px CF Asty Std;
    font-weight: bold;
    color: #081E46;
}

footer .card-header svg {
    transition: all 0.3s;
}

footer .card-header:not(.collapsed) svg {
    float: right;
    transform: rotate(180deg);
}

footer .card-header.collapsed svg {
    transform: rotate(0deg);
}

footer .footer-submenu {
    padding-left: 4px;
}

footer .westnet-contact-info {
    margin-top: 30px;
    padding-left: 1.25rem;
}

.footer-payment-methods-container {
    display: flex;
    justify-content: flex-end;
    padding: 4px 12px;
}

.footer-payment-image-container {
    width: 7%;
    border-radius: 8px;
    padding: 8px;
}

.footer-payment-image-container img {
    max-width: 100%;
    max-height: 100%;
}

.product-swiper-card {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 275px;
    height: 420px;
    box-shadow: 0px 10px 29px #102B6314;
    border-radius: 8px;
}

.product-swiper-card a:hover {
    text-decoration: none;
}

@media screen and (max-width: 450px) {
    .product-swiper-card {
        width: 240px;
        height: 366px;
    }
}

.product-swiper-card-image {
    width: 82%;
    height: 52%;
}

.product-swiper-card-image .card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: none;
}

.product-swiper-card-image .card a {
    max-width: 100%;
    max-height: 100%;
}

.product-swiper-card-image img {
    max-width: 100%;
    max-height: 100%;
}

.product-swiper-card-image .card-img-overlay {
    padding: 0;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
}

.product-swiper-card-image .card-img-overlay .badge {
    margin-right: 5px;
}

.product-swiper-card .product-availability {
    font: normal normal normal 12px CF Asty Std;
}

.product-swiper-card-desc {
    width: 82%;
    height: 13%;
    margin-bottom: 0;
    text-align: center;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    overflow-y: auto;
    scrollbar-color: #E3E3E3 transparent;
    scrollbar-width: thin;
}

@media screen and (max-width: 450px) {
    .product-swiper-card-desc {
        font-size: 12px;
    }
}

.product-swiper-card-initial-price {
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    text-decoration: line-through;
    opacity: 0.4;
}

.product-swiper-card-price {
    font: normal normal bold 15px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

@media screen and (max-width: 450px) {
    .product-swiper-card-initial-price {
        font-size: 12px;
    }

    .product-swiper-card-price {
        font-size: 13px;
    }
}

.product-swiper-card-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 11%;
}

.product-swiper-card-controls .quantity-setter-container {
    width: 50%;
}

.product-swiper-card-controls .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    padding: 0;
    border-radius: 50%;
}

.product-swiper-card-log-prompt {
    width: 80%;
    text-align: center;
    font: normal normal 500 13px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

@media screen and (max-width: 450px) {
    .product-swiper-card-log-prompt {
        font-size: 12px;
    }
}

/*****************
** Product List **
*****************/
.product-list-container {
    display: flex;
    padding: 44px 4.167vw; /* 4px 80px */
    background-color: #F7F7F9;
}

@media screen and (max-width: 992px) {
    .product-list-container {
        flex-direction: column;
    }
}

.product-list-side-container > .accordion {
    margin-bottom: 20px;
}

.product-list-side-container > .accordion > button {
    width: 280px;
    height: 80px;
    padding: 6px 24px;
    background: #0D6AA0 0% 0% no-repeat padding-box;
    border-radius: 5px;
    text-align: left;
    font: normal normal 500 16px/20px CF Asty Std;
    letter-spacing: 0.32px;
    color: #FFFFFF;
    opacity: 1;
}

@media screen and (max-width: 992px) {
    .product-list-side-container {
        display: none;
    }
    .product-list-side-container > .accordion > button {
        width: 100%;
    }
}

.product-list-side-container > .accordion .collapsed .rotating-caret {
    float: right;
    transform: rotate(0deg);
    transition: transform 0.5s ease 0s;
}

.product-list-side-container > .accordion .rotating-caret {
    float: right;
    transform: rotate(180deg);
    transition: transform 0.5s ease 0s;
}

.product-list-side-container > .accordion .list-group-item {
    padding: 12px 1.719vw; /* 12px 33px */
    text-align: left;
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.product-list-side-container > .accordion .list-group-item:hover {
    cursor: pointer;
    color: #0D6AA0;
    text-decoration: none;
}

.product-list-main-container {
    width: 100%;
    margin-left: 1.563vw; /* 30px */
    overflow-y: auto;
}

@media screen and (max-width: 992px) {
    .product-list-main-container {
        margin-left: 0;
    }
}

#categoryBannersCarousel {
    margin-bottom: 30px;
    border-radius: 8px;
}

.product-list-main-container > .container-fluid:first-child {
    margin-top: -46px;
    margin-bottom: 30px;
}

.product-list-main-container > .container-fluid:first-child .col-lg-10 {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.product-list-main-container > div:nth-child(4) {
    margin-top: 70px;
    text-align: center;
}

.product-list-main-container > div:nth-child(4) > h1 {
    font: normal normal 500 18px/75px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.product-list-main-container > div:nth-child(4) > p {
    text-align: center;
    font: normal normal 300 15px/28px CF Asty Std;
    letter-spacing: 0.3px;
    color: #081E46;
    opacity: 1;
}

.product-list-footer-category-info-text span {
    font: normal normal 500 18px/75px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.product-list-footer-category-info-text p {
    font: normal normal 300 15px/28px CF Asty Std;
    letter-spacing: 0.3px;
    color: #081E46;
}



/************************
** PRODUCT LIST FILTER **
************************/
.product-list-filter-container {
    /* position: sticky; */
    top: 122px;
    width: 280px;
    padding-top: 24px;
    background-color: #FFFFFF;
}

@media screen and (max-width: 992px) {
    .product-list-filter-container {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 450px) {
    .product-list-filter-container {
        position: absolute;
        padding-top: 0;
    }
}

.product-list-filter-container > span {
    font: normal normal 500 16px/20px CF Asty Std;
    letter-spacing: 0.32px;
    color: #081E46;
    opacity: 1;
}

.product-list-filter-container > div:nth-child(2),
.product-list-filter-modal .modal-body > div {
    display: flex;
    justify-content: space-between;
    margin-top: 11px;
    margin-bottom: 24px;
    padding: 0px 1.719vw; /* 0 33px */
}

.product-list-filter-container .product-list-filter-controls {
    display: flex;
    flex-wrap: wrap;
}

.product-list-filter-container > div:nth-child(2) > div:nth-child(1) > .btn,
.product-list-filter-modal .modal-body > div > div:first-child > .btn {
    padding: 0px 12px;
    margin: 1px;
    background: #0D6AA0 0% 0% no-repeat padding-box;
    border-radius: 5px;
    font: normal normal normal 11px/30px CF Asty Std;
    letter-spacing: 0.22px;
    color: #FFFFFF;
    opacity: 1;
}

.product-list-filter-container > div:nth-child(2) > div:nth-child(1) > .btn > svg,
.product-list-filter-modal .modal-body > div > div:first-child > .btn > svg {
    margin-left: 10px;
    vertical-align: text-top;
}

.product-list-filter-container > div:nth-child(2) > div:nth-child(2) > svg,
.product-list-filter-modal .modal-body > div > div:last-child > svg {
    width: 30px;
    height: 30px;
    padding: 8px;
    border: 1px solid #0D6AA0;
    border-radius: 5px;
    color: #0D6AA0;
}

.product-list-filter-container > div:nth-child(2) > div:nth-child(2) > svg:hover,
.product-list-filter-modal .modal-body > div > div:last-child > svg:hover {
    cursor: pointer;
    border-color: var(--danger);
    color: var(--danger);
}

.product-list-filter-container > .list-group .list-group-item {
    padding: 12px 1.719vw; /* 12px 33px */
    border: none;
    text-align: left;
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.product-list-filter-container > .list-group .list-group-item:hover {
    cursor: pointer;
}

.product-list-filter-container > .list-group .list-group-item.collapsed .rotating-caret {
    float: right;
    transform: rotate(0deg);
    transition: transform 0.5s ease 0s;
}

.product-list-filter-container > .list-group .list-group-item .rotating-caret {
    float: right;
    transform: rotate(180deg);
    transition: transform 0.5s ease 0s;
}

.product-list-filter-container .accordion .filter-collapse-list {
    background-color: #FFFFFF;
}

.product-list-filter-container .accordion > div:nth-child(2) > div {
    padding-left: 1.719vw; /* 33px */
    font: normal normal 500 14px/27px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.product-list-filter-container .accordion > div:nth-child(2) > div .form-check {
    text-align: left;
}

.product-list-filter-container .product-list-filter-mobile {
    position: fixed;
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
    border-radius: 8px;
    z-index: 1;
}

.product-list-filter-container .product-list-filter-mobile > span {
    margin: 0 40px 0 24px;
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
}

.product-list-filter-modal .modal-title {
    font: normal normal 500 18px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.product-list-filter-modal .modal-body .list-group {
    margin: 0 -16px;
}

.product-list-filter-modal .modal-body .list-group-item {
    border: none;
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.product-list-filter-modal .modal-body .accordion > div:last-child > div {
    padding-left: 20px;
    font: normal normal 500 14px/27px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

/**** Mobile Filters ****/
.mobile-filters-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    width: 160px;
    margin-left: -80px;
    font: normal normal 500 14px/17px CF Asty Std;
    z-index: 3;
}

.mobile-filters-btn svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0.75rem;
}

#mobile-filters-modal {
    font-weight: 500;
    font-family: CF Asty Std;
    color: #081E46;
}

#mobile-filters-modal .modal-body {
    padding: 0;
}

#mobile-filters-modal .list-group {
    border-radius: 0 0 0.25rem 0.25rem;
}

#mobile-filters-modal .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#mobile-filters-modal .modal-body > .list-group .list-group-item.collapsed .rotating-caret {
    float: right;
    transform: rotate(0deg);
    transition: transform 0.5s ease 0s;
}

#mobile-filters-modal .modal-body > .list-group .list-group-item .rotating-caret {
    float: right;
    transform: rotate(180deg);
    transition: transform 0.5s ease 0s;
}

#mobile-filters-modal .filter-collapse-list {
    padding: 0.75rem 1.25rem;
    text-align: start;
}

/*****************
** PRICE SLIDER **
*****************/
.product-list-price-slider {
    padding: 7px 1.719vw; /* 7px 33px */
}

.product-list-price-slider > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-list-price-slider > div:nth-child(1) > span {
    margin: 0 12px;
}

.product-list-price-slider .input-group-prepend {
    align-items: center;
    padding: 0 8px;
    border: 1px solid #ced4da;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-right: none;
}

.product-list-price-slider .form-control {
    text-align: right;
    border-left: none;
    font: normal normal 500 14px/27px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.product-list-price-slider .form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.product-list-price-slider .rc-slider-track {
    background-color: #081E46;
}

.product-list-price-slider .rc-slider-handle, 
.product-list-price-slider .rc-slider-handle:hover, 
.product-list-price-slider .rc-slider-handle.rc-slider-handle-click-focused {
    border-color: #081E46;
}

.product-list-price-slider .rc-slider-handle.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
    border-color: #081E46;
    box-shadow: none;
}

.product-list-price-slider .rc-slider-tooltip-inner {
    background-color: #FFFFFF;
    border: 1px solid #081E46;
    color: #081E46;
}

.product-list-price-slider .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
    border-top-color: #081E46;
}



/**************************************
** PRODUCT LIST CATEGORY TILE SLIDER **
**************************************/
.product-list-categories-tile-slider-container {
    margin-bottom: 10px;
}

.product-list-categories-tile-slider-container .swiper.swiper-horizontal {
    width: 100%;
    padding-bottom: 20px;
}

.product-list-categories-tile-slider-container .swiper-scrollbar-drag {
    cursor: grab;
}

.product-list-categories-tile-slider-container .swiper-scrollbar-drag:active {
    cursor: grabbing;
}

.product-list-categories-tile-slider-container .swiper-slide {
    width: 145px;
}

.product-list-slide-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 186px;
    padding: 23px 5px;
    border-radius: 5px;
    background-color: #FFFFFF;
}

.product-list-slide-tile-image-container {
    width: 135px;
    height: 95px;
}

.product-list-slide-tile-image-container img {
    max-width: 100%;
    max-height: 100%;
}

.product-list-slide-tile span {
    font: normal normal normal 13px/15px CF Asty Std;
    letter-spacing: 0.25px;
    color: #081E46;
}



/**********************
** PRODUCT LIST GRID **
**********************/
.product-list-grid-container {
    padding: 25px 0px;
    background-color: #FFFFFF;
}

.product-list-grid-container > span {
    font: normal normal 500 27px/75px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.product-list-grid-header {
    padding: 1.719vw;
    color: #081E46;
}

.product-list-grid-header span {
    font: normal normal 500 27px/75px CF Asty Std;
}

.product-list-grid-header p {
    font: normal normal 500 16px/21px CF Asty Std;
}

.product-list-grid-container > div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding: 1.719vw; /* 33px */
    border: 1px solid #F7F7F9;
}

.product-list-grid-container > div:nth-child(2) .dropdown-toggle {
    width: 155px;
    height: 45px;
    background: #F7F7F9 0% 0% no-repeat padding-box;
    border: none;
    border-radius: 8px;
    font: normal normal normal 14px/30px CF Asty Std;
    letter-spacing: 0.14px;
    color: #081E46 !important;
    opacity: 1;
}

.product-list-grid-container > div:nth-child(2) .dropdown-item {
    width: 155px;
    height: 45px;
    font: normal normal normal 14px/30px CF Asty Std;
    letter-spacing: 0.14px;
    color: #081E46;
    opacity: 1;
}

.product-list-grid-container > div:nth-child(3) {
    display: flex;
    flex-wrap: wrap;
}

.product-list-grid-container > div:nth-child(4) .pagination {
    justify-content: end;
    margin-top: 25px;
    margin-bottom: 0;
    padding-right: 1.615vw; /* 31px */
}

.product-list-grid-container > div:nth-child(4) .page-link {
    width: 45px;
    height: 45px;
    margin: 0 2px;
    padding: 0 12px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 2px solid #F1F1F5;
    border-radius: 50%;
    text-align: center;
    font: normal normal normal 14px/45px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    cursor: pointer;
    opacity: 1;
}

.product-list-grid-container > div:nth-child(4) .page-item.disabled {
    opacity: 0.4;
}

.product-list-grid-container > div:nth-child(4) .page-item:not(.active) .page-link:hover {
    background-color: #0D6AA0;
    color: #FFFFFF;
}

.product-list-grid-container > div:nth-child(4) .page-item.active .page-link {
    border: 2px solid #0D6AA0;
    color: #0D6AA0;
}



/*****************
** PRODUCT CARD **
*****************/
.product-list-product-card-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 25%;
    padding: 1.563vw; /* 30px */
    border: 1px solid #F7F7F9;
}

.product-list-product-card-offers-overlay {
    position: absolute;
    top: 0;
    align-self: flex-start;
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    height: fit-content;
}

.product-list-product-card-offers-overlay .badge {
    width: fit-content;
    height: fit-content;
    margin: 12px 8px 0 0;
}

@media screen and (max-width: 1600px) {
    .product-list-product-card-container {
        width: 33%;
    }
}

@media  screen and (max-width: 1200px) {
    .product-list-product-card-container {
        width: 50%;
    }
}

.product-list-product-card-inside-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.product-list-product-card-image {
    width: 100%;
    height: 210px;
}

@media screen and (max-width: 450px) {
    .product-list-product-card-image {
        height: 150px;
    }
}

.product-list-product-card-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.product-list-product-card-image img {
    max-width: 100%;
    max-height: 100%;
}

.product-list-product-card-inside-container .product-availability {
    font: normal normal normal 12px CF Asty Std;
}

.product-list-product-card-text {
    width: 100%;
    height: 150px;
    padding: 17px 0;
}

@media screen and (max-width: 450px) {
    .product-list-product-card-text {
        overflow-y: hidden;
    }
}

@media screen and (max-width: 768px) {
    .product-list-product-card-text {
        height: 95px;
    }
}

.product-list-product-card-text p {
    text-align: center;
    font: normal normal normal 14px CF Asty Std; /* 0.729vw */
    letter-spacing: 0.28px; /* 0.015vw */
    color: #081E46;
}

@media screen and (max-width: 450px) {
    .product-list-product-card-text p {
        margin-bottom: 8px;
        font-size: 12px;
    }
}

.product-list-product-card-prices {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

@media screen and (max-width: 450px) {
    .product-list-product-card-prices {
        flex-direction: row-reverse;
    }
}

.product-list-product-card-initial-price-tag {
    font: normal normal 500 15px CF Asty Std; /* 0.729vw */
    letter-spacing: 0px;
    color: #081E46;
    text-decoration: line-through;
    opacity: 0.4;
}

.product-list-product-card-price-tag {
    font: normal normal bold 17px CF Asty Std; /* 0.885vw */
    letter-spacing: 0px;
    color: #0D6AA0;
}

.product-list-product-card-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
}

@media screen and (max-width: 768px) {
    .product-list-product-card-controls {
        flex-direction: column;
        width: fit-content;
        height: 115px;
    }
}

.product-list-product-card-controls .quantity-setter-container {
    flex: 1;
}

.product-list-product-card-controls-shopping {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    margin-left: 5px;
}

@media screen and (max-width: 768px) {
    .product-list-product-card-controls-shopping {
        justify-content: space-between;
        width: 100%;
        margin-top: 5px;
        margin-left: 0;
    }
}

.product-list-product-card-controls-shopping > .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
}

@media screen and (max-width: 1350px) and (min-width: 1201px) {
    .product-list-product-card-controls-shopping > .btn {
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-width: 768px) {
    .product-list-product-card-controls-shopping > .btn {
        flex: 1;
        border-radius: 50px;
    }
}

.product-list-product-card-controls-shopping > .btn.btn-success {
    margin-left: 5px;
}

.product-list-product-card-login-prompt {
    width: 100%;
    height: 60px;
}

.product-list-product-card-login-prompt span {
    text-align: center;
    font: normal normal bold 14px CF Asty Std; /* 0.729vw */
    letter-spacing: 0.28px; /* 0.015vw */
    color: #081E46;
}


/********************
** PRODUCT DETAILS **
********************/
.product-details-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    padding: 50px 4.167vw; /* 50px 80px */
    background-color: #F7F7F9;
}

@media screen and (max-width: 768px) {
    .product-details-container {
        padding: 50px 0;
    }
}

#productDetailsPage .breadcrumb {
    margin-bottom: 0;
    margin-left: 1.625rem;
    background-color: #FFFFFF;
}

#productDetailsPage .breadcrumb .breadcrumb-item,
#productDetailsPage .breadcrumb .breadcrumb-item a {
    font: normal normal normal 12px/14px CF Asty Std;
    letter-spacing: 0.24px;
    color: #081E46;
}

#productDetailsPage .breadcrumb > .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

.product-details-container .nav-section {
    position: absolute;
    top: -185px;
}

@media screen and (((max-width: 1400px) and (min-width: 1183px)) or (max-width: 768px)) {
    .product-details-container .nav-section {
        top: -310px;
    }
}

.product-details-main-row {
    display: flex;
}

@media screen and (max-width: 1182px) {
    .product-details-main-row {
        flex-direction: column;
    }
}

.product-details-main-row > div {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 0 1.042vw; /* 0 20px */
}

@media screen and (max-width: 1182px) {
    .product-details-main-row > div {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .product-details-main-row > div {
        padding: 0;
    }
}

#media-sticky {
    height: fit-content;
}

@media screen and (min-width: 1183px) {
    #media-sticky {
        position: sticky;
    }
}

.product-details-footer-row {
    display: flex;
    max-width: 100%;
    margin-top: 170px;
    padding: 0 1.042vw; /* 0 20px */
}

@media screen and (max-width: 768px) {
    .product-details-footer-row {
        padding: 0;
    }
}

/**************************
** PRODUCT DETAILS MEDIA **
**************************/
.product-details-media-container {
    margin-bottom: 20px; /*20px*/
    padding: 37px 2.292vw 57px 2.292vw; /*37px 44px 57px 44px*/
    box-shadow: 6px 6px 26px #0C11500D; /*6px 6px 26px*/
    border-radius: 8px; /*8px*/
    background-color: #FFFFFF;
}

.product-details-media-offers-container {
    display: flex;
    justify-content: right;
}

.product-details-media-offers-container > .badge {
    margin-left: 10px; /*10px*/
    font: normal normal 500 13px/22px CF Asty Std; /*13px/22px*/
    letter-spacing: 0px;
}

.product-details-media-images-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.product-details-media-swiper-slider {
    width: 18%;
}

.product-details-media-swiper-slider .swiper {
    padding-right: 1.042vw; /* 20px */
}

.product-details-media-swiper-slider .swiper-pagination-vertical.swiper-pagination-bullets {
    right: 0;
}

.product-details-media-swiper-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.4;
}

.product-details-media-swiper-slider .swiper-slide:hover {
    border: 1px solid #0D6AA0;
    cursor: pointer;
}

.product-details-media-swiper-slider .swiper-slide-thumb-active {
    opacity: 1;
}

.product-details-media-swiper-slider img {
    max-width: 100%;
    max-height: 100%;
}

.product-details-media-displayed-image {
    width: 80%;
    /* height: fit-content; */
}

.product-details-media-displayed-image .swiper.swiper-horizontal {
    width: 100%;
    height: 100%;
}

.product-details-media-displayed-image .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-details-media-displayed-image img {
    max-width: 100%;
    max-height: 100%;
}

.product-details-media-shopping-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 -2.292vw -57px -2.292vw; /*0 -44px -57px -44px*/
    padding: 23px 2.292vw; /*23px 44px*/
    border-top: 1px solid #F3F2F2; /*1px*/
}

.product-details-media-shopping-container > p {
    margin: 0 5.208vw 0 0; /* 0 100px 0 0*/
    font: normal normal 500 14px/20px CF Asty Std; /*14px/20px*/
    letter-spacing: 0px;
    color: #081E46;
}

.product-details-media-shopping-container > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-details-media-shopping-container > div > p {
    margin-right: 1.354vw; /*26px*/
    text-align: right;
}

.product-details-media-shopping-initial-price {
    text-decoration: line-through;
    font: normal normal 500 17px/22px CF Asty Std; /*13px/22px*/
    letter-spacing: 0px;
    color: #081E46;
    opacity: 0.4;
}

.product-details-media-shopping-price {
    font: normal normal 500 19px/22px CF Asty Std; /*19px/22px*/
    letter-spacing: 0px;
    color: #0D6AA0;
}

.product-details-media-shopping-container > div .btn.btn-success {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 53px; /*53px*/
    height: 53px; /*53px*/
    padding: 0;
    border-radius: 50%;
}

.modal-dialog.product-details-image-modal {
    width: fit-content;
    max-width: 80%;
}

.modal-dialog.product-details-image-modal .modal-body {
    padding: 2.917vw;
}

.modal-dialog.product-details-image-modal img {
    max-width: 100%;
    max-height: 100%;
}



/********************************
** PRODUCT DETAILS DESCRIPTION **
********************************/
.product-details-description-container {
    display: flex;
    flex-direction: column;
    z-index: 1;
    box-shadow: 6px 6px 26px #0C11500D; /*6px 6px 26px*/
    border-radius: 8px 8px 0px 0px;
    background-color: #FFFFFF;
}

.product-details-description-info-container {
    display: flex;
}

.product-details-description-info-product {
    flex: 3;
    display: flex;
    flex-direction: column;
    padding: 60px 2.344vw 0 4.010vw; /* 60px 45px 0 77px */
}

.product-details-description-info-product-name {
    font: normal normal 500 19px/26px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.product-details-description-info-product-elements {
    font: normal normal normal 13px/25px CF Asty Std;
    letter-spacing: 0.52px;
}

.product-details-description-info-product-elements span {
    color: #0D6AA0;
}

.product-details-description-info-product-pricing-initial-price {
    text-decoration: line-through;
    font: normal normal 500 19px/28px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 0.4;
}

.product-details-description-info-product-pricing-price {
    font: normal normal 500 25px/28px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

.product-details-description-info-product-pricing span:last-child {
    font: normal normal normal 13px/25px CF Asty Std;
    letter-spacing: 0.52px;
    color: #8CBB2E;
}

.product-details-description-info-product-pricing span:last-child.not-available {
    color: #081E46;
    opacity: 0.4;
}

.product-details-description-info-brand {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 4.010vw 0 0; /* 60px 77px 0 0 */
}

.product-details-description-info-brand-image {
    max-width: 100%; /* width: 100%; */
    max-height: 100%;
    margin-bottom: 14px;
    box-shadow: 0px 3px 16px #091D5614; /*3px 16px*/
    /*filter: invert(87%) sepia(14%) saturate(5645%) hue-rotate(193deg) brightness(91%) contrast(104%);*/
}

.product-details-description-info-brand-name {
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
}

.product-details-description-controls-container {
    display: flex;
    flex-direction: row;
    margin-top: 23px;
    padding: 0 4.010vw; /* 0 77px */
}

@media screen and (((max-width: 1400px) and (min-width: 1183px)) or (max-width: 768px)) {
    .product-details-description-controls-container {
        flex-direction: column;
    }
}

.product-details-description-controls-shopping {
    flex: 9;
    display: flex;
    margin-right: 0.625vw; /* 12px */
}

@media screen and (((max-width: 1400px) and (min-width: 1183px)) or (max-width: 768px)) {
    .product-details-description-controls-shopping {
        margin-right: 0;
        margin-bottom: 12px;
    }
}

.product-details-description-controls-quantity {
    flex: 1;
}

.product-details-description-controls-cart {
    flex: 2;
    margin-left: 12px; /* 12px */
}

.product-details-description-controls-list {
    flex: 5;
}

.product-details-description-controls-container .btn {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    padding: 0;
    font: normal normal 500 12px/40px CF Asty Std; /*12px/42px*/
    letter-spacing: 0px;
}
.product-details-description-container-sticky {
    position: sticky;
    z-index: 1;
    box-shadow: 6px 6px 26px #0C11500D; /*6px 6px 26px*/
    border-radius: 8px; /*8px*/
    border-radius: 0px 0px 8px 8px;
    background-color: #FFFFFF;
}

.product-details-description-nav-row-wrapper {
    margin-top: 50px; /*50px*/
    border-top: 1px solid #F3F2F2; /*1px*/
}

.product-details-description-nav-row {
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    justify-content: space-evenly;
    /* padding: 0 4.010vw; */ /* 0 77px */
    font: normal normal 500 12px/42px CF Asty Std; /*12px/42px*/
    letter-spacing: 0.48px; /*0.48px*/
    color: #081E46;
}

@media screen and (((max-width: 1400px) and (min-width: 1183px)) or (max-width: 768px)) {
    .product-details-description-nav-row {
        flex-direction: column;
    }
}

.product-details-description-nav-row span {
    cursor: pointer;
}

.product-details-description-nav-row span.active-section {
    border-bottom: 2px solid #0D6AA0;
}



/*********************************
** PRODUCT DETAILS COMBINATIONS **
*********************************/
.product-details-combinations-container {
    position: relative;
    margin-top: 20px; /*20px*/
    box-shadow: 6px 6px 26px #0C11500D; /*6px 6px 26px*/
    border-radius: 8px; /*8px*/
    background-color: #FFFFFF;
}

.product-details-combinations-container > div:nth-child(1) {
    padding: 22px 50px; /*22px 50px*/
    border-bottom: 1px solid #F3F2F2; /*1px*/
    font: normal normal 500 16px/20px CF Asty Std; /*16px/20px*/
    letter-spacing: 0px;
    color: #081E46;
}

.product-details-combinations-container .list-group-item {
    display: flex;
    align-items: center;
    padding: 28px 2.604vw; /*28px 50px*/
    border-left: none;
    border-right: none;
}

.product-details-combinations-container .list-group-item:first-child, 
.product-details-combinations-container .list-group-item:last-child {
    border-radius: 0;
}

.product-details-combinations-container .list-group-item > .form-check {
    margin-right: 16px; /*16px*/
}

.product-details-combinations-container .list-group-item > .form-check .form-check-input {
    cursor: pointer;
}

.product-details-combinations-container .list-group-item > img {
    width: 100px; /*100px*/
    margin-right: 28px; /*28px*/
}

.product-details-combinations-container .list-group-item > p {
    width: 100%;
    font: normal normal normal 12px/20px CF Asty Std; /*12px/20px*/
    letter-spacing: 0.48px; /*0.48px*/
    color: #081E46;
}

.product-details-combinations-container .list-group-item > p > span {
    font: normal normal 500 16px/28px CF Asty Std; /*16px/28px*/
    letter-spacing: 0px;
    color: #0D6AA0;
}

.product-details-combinations-container .list-group-item .quantity-setter-container {
    width: 154px;
}

.product-details-combinations-container > div:nth-child(3) {
    display: flex;
    justify-content: right;
    padding: 26px 0; /*26px*/
}

.product-details-combinations-container > div:nth-child(3) > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60%;
    padding-right: 2.604vw; /* 50px */
}

.product-details-combinations-container > div:nth-child(3) > div > span:nth-child(1) {
    font: normal normal 500 12px/15px CF Asty Std; /*12px/15px*/
    letter-spacing: 0px;
    color: #081E46;
}

.product-details-combinations-container > div:nth-child(3) > div > span:nth-child(2) {
    font: normal normal 500 16px/28px CF Asty Std; /*16px/28px*/
    letter-spacing: 0px;
    color: #0D6AA0;
}

.product-details-combinations-container > div:nth-child(3) > div > .btn.btn-success {
    padding: 0 12px; /*12px*/
    font: normal normal 500 14px/32px CF Asty Std; /*14px/32px*/
    letter-spacing: 0px;
}

.product-details-combinations-container > div:nth-child(3) > div > .btn.btn-success svg {
    margin-right: 12px; /*12px*/
}



/****************************
** PRODUCT DETAILS SNIPPET **
****************************/
.product-details-snippet-container {
    position: relative;
    margin-top: 20px; /*20px*/
    box-shadow: 6px 6px 26px #0C11500D; /*6px 6px 26px*/
    border-radius: 8px; /*8px*/
    background-color: #FFFFFF;
}

.product-details-snippet-container > div:nth-child(1) {
    padding: 22px 2.604vw; /*22px 50px*/
    border-bottom: 1px solid #F3F2F2; /*1px*/
    font: normal normal 500 16px/20px CF Asty Std; /*16px/20px*/
    letter-spacing: 0px;
    color: #081E46;
}

.product-details-snippet-container > div:nth-child(2) {
    padding: 34px 2.604vw; /*34px 50px*/
    word-break: break-word;
    color: #081E46;
}

.product-details-snippet-container > div:nth-child(2) img {
    max-width: 100%;
}

.product-details-snippet-container > div:nth-child(2) > span {
    font: normal normal 500 14px/21px CF Asty Std; /*14px/21px*/
    letter-spacing: 0.28px; /*0.28px*/
    color: #081E46;
}

.product-details-snippet-container > div:nth-child(2) > div {
    display: flex;
    flex-direction: column;
    margin-top: 18px; /*18px*/
    font: normal normal normal 14px/25px CF Asty Std; /*14px/25px*/
    letter-spacing: 0.28px; /*0.28px*/
    color: #081E46;
}



/**************************
** PRODUCT DETAILS SPECS **
**************************/
.product-details-specs-container {
    position: relative;
    margin-top: 20px; /*20px*/
    box-shadow: 6px 6px 26px #0C11500D; /*6px 6px 26px*/
    border-radius: 8px; /*8px*/
    background-color: #FFFFFF;
}

.product-details-specs-container > div:nth-child(1) {
    padding: 22px 2.604vw; /*22px 50px*/
    border-bottom: 1px solid #F3F2F2; /*1px*/
    font: normal normal 500 16px/20px CF Asty Std; /*16px/20px*/
    letter-spacing: 0px;
    color: #081E46;
}

.product-details-specs-container > .table td {
    width: 50%;
    padding: 0 1.302vw; /*0 25px*/
    border-bottom: 0.066vw solid #F3F2F2;
    font: normal normal normal 14px/45px CF Asty Std; /*14px 45px*/
    letter-spacing: 0.27px; /*0.27px*/
    color: #081E46;
}

.product-details-specs-container > .table td:nth-child(1) {
    border-right: 1px solid #F3F2F2;
    text-align: right;
    font: normal normal 500 14px/45px CF Asty Std; /*14px 45px*/
    letter-spacing: 0px;
    color: #081E46;
}



/******************************
** PRODUCT DETAILS RESOURCES **
******************************/
.product-details-resources-container {
    position: relative;
    margin-top: 20px; /*20px*/
    box-shadow: 6px 6px 26px #0C11500D; /*6px 6px 26px*/
    border-radius: 8px; /*8px*/
    background-color: #FFFFFF;
}

.product-details-resources-container > div:nth-child(1) {
    padding: 22px 2.604vw; /* 22px 50px */
    border-bottom: 1px solid #F3F2F2; /*1px*/
    font: normal normal 500 16px/20px CF Asty Std; /*16px/20px*/
    letter-spacing: 0px;
    color: #081E46;
}

.product-details-resources-container .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.604vw; /* 0 50px */
    border: none;
    border-bottom: 1px solid #F3F2F2; /*1px*/
}

.product-details-resources-container .list-group-item > div > span {
    font: normal normal 500 14px/46px CF Asty Std; /*14px/46px*/
    letter-spacing: 0.27px; /*0.27px*/
    color: #081E46;
}

.product-details-resources-container .list-group-item > div > span.badge {
    margin-right: 18px; /*18px*/
    line-height: 14px; /*14px*/
    color: #FFFFFF;
}

.product-details-resources-container .list-group-item > a {
    font: normal normal 500 14px/21px CF Asty Std; /*14px/21px*/
    letter-spacing: 0.27px; /*0.27px*/
}



@media (max-width: 1400px) {

    .product-details-description-container > .row:nth-child(3) > .col {
        opacity: 1;
    }

    .product-details-description-container > .row:nth-child(2) > .col > .btn,
    .product-details-description-container > .row:nth-child(3) > .col > .btn {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        padding: 0;
        font: normal normal 500 12px/40px CF Asty Std; /*12px/42px*/
        letter-spacing: 0px;
    }

    .product-details-description-container > .row:nth-child(2) > .col:nth-child(1) {
        max-width: 178px;
        padding-left: 0;
    }

    .product-details-description-container > .row:nth-child(2) > .col:nth-child(2) {
        max-width: 100%;
        padding: 0;
    }

    .product-details-description-container > .row:nth-child(4) > .col {
        margin-top: 16px; /*16px*/
        padding: 0;
        font: normal normal normal 13px/25px CF Asty Std; /*13px/25px*/
        letter-spacing: 0.52px; /*0.52px*/
        color: #081E46;
        opacity: 0.4;
    }
    
    .product-details-description-container > .row:nth-child(5) > .col {
        display: flex;
        justify-content: space-around;
        margin-top: 50px; /*50px*/
        padding: 0;
        border-top: 1px solid #F3F2F2; /*1px*/
        font: normal normal 500 12px/42px CF Asty Std; /*12px/42px*/
        letter-spacing: 0.48px; /*0.48px*/
        color: #081E46;
    }
    
    .product-details-description-container > .row:nth-child(5) > .col > span {
        cursor: pointer;
    }
    
    .product-details-description-container > .row:nth-child(5) > .col > span.active-section {
        border-bottom: 2px solid #0D6AA0;
    }

    .product-details-description-container > .row:nth-child(5) > .col {
        flex-direction: column;
    }

    .product-details-combinations-container > div:nth-child(3) > div > .btn.btn-success {
        padding: 0;
        border-radius: 50%;
    }
    
    .product-details-combinations-container > div:nth-child(3) > div > .btn.btn-success svg {
        margin: 12px;
    }

    .product-details-combinations-container > div:nth-child(3) > div > .btn.btn-success span {
        display: none;
    }
}



/***************************
** PRODUCT DETAILS FOOTER **
***************************/
.product-details-footer-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 90px 5.729vw; /* 90px 110px */
    box-shadow: 6px 6px 26px #0C11500D;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.product-details-footer-container > span {
    font: normal normal 500 23px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.product-details-footer-slider {
    margin-top: 33px;
    box-shadow: 6px 6px 26px #0C11500D;
}

.product-details-footer-slider .swiper.swiper-horizontal {
    padding-bottom: 20px;
}

.product-details-footer-slider .swiper-slide {
    width: fit-content;
    height: fit-content;
}

.product-details-footer-slider .swiper-scrollbar-drag {
    cursor: grab;
}

.product-details-footer-slider .swiper-scrollbar-drag:active {
    cursor: grabbing;
}

.product-details-footer-slider .product-swiper-card {
    width: 275px;
}

@media screen and (max-width: 450px) {
    .product-details-footer-slider .product-swiper-card {
        width: 240px;
    }
}

.product-details-footer-card-image {
    width: 225px;
    height: 219px;
}

.product-details-footer-card-image .card {
    justify-content:center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: none;
}

.product-details-footer-card-image .card a {
    max-width: 100%;
    max-height: 100%;
}

.product-details-footer-card-image img {
    max-width: 100%;
    max-height: 100%;
}

.product-details-footer-card-image .card-img-overlay {
    width: fit-content;
    height:fit-content;
    padding: 0;
}

.product-details-footer-card-image .card-img-overlay .badge {
    margin-right: 5px;
}

.product-details-footer-card-desc {
    width: 225px;
    height: 55px;
    margin-bottom: 0;
    text-align: center;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    word-break: break-word;
}

.product-details-footer-card-desc:hover {
    color: #081E46;
    text-decoration: none;
}

.product-details-footer-card-price {
    font: normal normal bold 15px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

.product-details-footer-card-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 220px;
    height: 46px;
}

.product-details-footer-card-controls .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
}


/********************
** QUANTITY SETTER **
********************/
.quantity-setter-container {
    display: flex;
    height: 100%;
}

.quantity-setter-container > .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    padding: 0;
    border: 1px solid #EFEFF2;
}

.quantity-setter-container > .btn:focus {
    box-shadow: none;
}

.quantity-setter-container > .btn:nth-child(1) {
    border-radius: 50% 0 0 50%;
}

.quantity-setter-container > .form-control {
    width: 40%;
    height: 100%;
    padding: 6px 1px; /*6px 1px*/
    border: 1px solid #EFEFF2; /*1px*/
    border-radius: 0;
    text-align: center;
    font: normal normal normal 13px/30px CF Asty Std; /*13px/30px*/
    letter-spacing: 0.26px; /*0.26px*/
    color: #081E46;
    opacity: 1;
}

.quantity-setter-container > .form-control:focus {
    box-shadow: none;
}

.quantity-setter-container > .btn:nth-child(3) {
    border-radius: 0 50% 50% 0;
}

/***************
** MY ACCOUNT **
***************/

/**** general ****/
.my-account-container {
    display: flex;
    padding: 100px 10.417vw; /* 100px 200px */
    background-color: #F7F7F9;
    text-align: center;
}

@media screen and (max-width: 1200px) {
    .my-account-container {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .my-account-container {
        padding: 100px 0;
    }
}

.my-account-nav-menu {
    flex: 1;
    height: fit-content;
    margin-right: 15px;
    border-radius: 5px;
    background-color: #FFFFFF;
}

@media screen and (max-width: 1200px) {
    .my-account-nav-menu {
        flex: none;
        margin-right: 0;
    }
}

.my-account-main-menu {
    flex: 4;
    margin-left: 15px;
    border-radius: 5px;
    padding: 20px;
    background-color: #FFFFFF;
}

@media screen and (max-width: 1200px) {
    .my-account-main-menu {
        flex: none;
        margin-left: 0;
    }
}

.my-account-main-menu h1 {
    font: normal normal 500 27px/75px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

@media screen and (max-width: 450px) {
    .my-account-main-menu h1 {
        margin-bottom: 25px;
        line-height: 35px;
    }
}

/**** my account nav menu ****/

.my-account-nav-container {
    padding-left: 20px;
}

@media screen and (max-width: 1200px) {
    .my-account-nav-container {
        padding-left: 0;
    }
}

.my-account-nav-container h6 {
    text-align: left;
    font: normal normal 500 16px/20px CF Asty Std;
    letter-spacing: 0.32px;
    color: #081E46;
    padding-top: 30px;
    padding-bottom: 20px;
    opacity: 1;
}

.my-account-nav-menu.nav {
    padding-bottom: 30px;
}

.my-account-nav-menu {
    margin-bottom: 0;
}

@media screen and (max-width: 1200px) {
    .my-account-nav-menu {
        margin-bottom: 20px;
    }
}

.my-account-nav-menu-link.nav-link {
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.my-account-nav-menu-link.nav-link.active {
    color: #0D6AA0;
}

.my-account-nav-accordion > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    border-radius: 5px;
    background-color: #FFFFFF;
}

.my-account-nav-accordion > div .chevron-down {
    transform: rotate(0deg);
    transition: all 0.3s;
}

.my-account-nav-accordion > div .chevron-up {
    transform: rotate(180deg);
    transition: all 0.3s;
}

/**** my account account management ****/
.account-management-container {
    width: 100%;
    padding: 20px;
}

@media screen and (max-width: 450px) {
    .account-management-container {
        padding: 0;
    }
}

.account-management-container > .btn.btn-outline-primary {
    border-radius: 8px;
    font: normal normal 500 13px/16px CF Asty Std;
    letter-spacing: 0px;
}

@media screen and (min-width: 769px) {
    .account-management-container > .btn.btn-outline-primary {
        float: right;
    }
}

.account-management-corp-info {
    clear: both;
}

.account-management-container h4 {
    text-align: left;
    margin: 40px 0;
    font: normal normal 500 20px/25px CF Asty Std;
    letter-spacing: 0.4px;
    color: #081E46;
    opacity: 1;
}

.acc-man-table {
    width: 100%;
}

.account-management-table-row.odd {
    background-color: #F7F7F9;
}

.account-management-corp-info-field {
    text-align: left;
    font: normal normal 500 14px/45px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.account-management-corp-info-value {
    text-align: left;
    font: normal normal normal 14px/45px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
    opacity: 1;
}

.account-management-addresses {
    margin-top: 20px;
}

.acc-man-table > thead {
    height: 45px;
    background: #0D6AA0 0% 0% no-repeat padding-box;
    opacity: 1;
}

.acc-man-table > thead > tr > th {
    text-align: left;
    font: normal normal 500 14px/45px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.account-management-corp-info > span,
.account-management-addresses > span, 
.account-management-user-accounts > span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 45px;
    padding-left: 20px;
    background-color: #0D6AA0;
    text-align: left;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
}

.account-management-corp-info .list-group-item, 
.account-management-addresses .list-group-item, 
.account-management-user-accounts .list-group-item {
    text-align: left;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
}

.account-management-corp-info .list-group-item > p,
.account-management-addresses .list-group-item > p, 
.account-management-user-accounts .list-group-item > p {
    display: flex;
    flex-direction: column;
}

.account-management-corp-info .list-group-item > p > span:first-child,
.account-management-addresses .list-group-item > p > span:first-child, 
.account-management-user-accounts .list-group-item > p > span:first-child {
    margin-right: 8px;
    font-weight: 500;
}

.account-management-addresses-code {
    text-align: left;
    font: normal normal normal 14px/45px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.account-management-addresses-type {
    color: var(--dark-blue);
    text-align: left;
    font: normal normal normal 14px/45px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
    opacity: 1;
}

.account-management-addresses-address {
    text-align: left;
    font: normal normal bold 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
    opacity: 1;
}

.account-management-user-accounts {
    margin-top: 20px;
    margin-bottom: 20px;
}

.account-management-user-accounts-code {
    text-align: left;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
    opacity: 1;
}

.account-management-user-accounts-username {
    text-align: left;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
    opacity: 1;
}

.account-management-user-accounts-name {
    text-align: left;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
    opacity: 1;
}

.account-management-user-accounts-role {
    text-align: left;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
    opacity: 1;
}

.acc-man-table th {
    padding-left: 20px;
}

.acc-man-table td {
    padding: 12px 0 12px 20px;
}

#createNewUserForm .form-group {
    margin-bottom: 20px;
}

/**** my account margin management ****/
.margin-management-container {
    width: 100%;
    padding: 20px;
}

.margin-management-container > div {
    margin: 20px 0px;
}

.margin-management-container > div:nth-child(1) {
    text-align: left;
    margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
    .margin-management-container > div:nth-child(1) {
        text-align: center;
    }
}

.margin-management-edit {
    color: #081E46;
    cursor: pointer;
    margin-top: -16px;
    margin-left: -16px;
    margin-right: 5px;
}

.margin-management-progress {
    display: inline-block;
    width: 200px;
    height: 200px;
}

.margin-management-progress .CircularProgressbar-trail {
    stroke: #E7E7E9;
    stroke-width: 4px;
}

.margin-management-progress .CircularProgressbar-path {
    stroke: var(--success);
    stroke-width: 4px;
}

.margin-management-progress text {
    font: normal normal normal 27px/75px CF Asty Std;
    color: #081E46;
}

.margin-management-progress text > span {
    font: normal normal normal 47px/75px CF Asty Std;
    letter-spacing: -0.9px;
}

.margin-management-progress text > .form-control {
    display: inline;
    width: 68px;
    height: 52px;
    padding: 0px;
    font: normal normal normal 47px/75px CF Asty Std;
    letter-spacing: -0.9px;
    color: #081E46;
}

.margin-management-progress-label {
    display: inline-block;
    text-align: left;
    align-self: center;
    margin: 0px 10px;
    font: normal normal 500 20px/25px CF Asty Std;
    letter-spacing: 0.4px;
    color: #081E46;
    opacity: 1;
}

.margin-management-container > .btn-lg.btn-outline-primary {
    margin-bottom: 20px;
    float: right;
    border-radius: 8px;
    font: normal normal 500 13px/16px CF Asty Std;
    letter-spacing: 0px;
}

@media screen and (max-width: 768px) {
    .margin-management-container > .btn-lg.btn-outline-primary {
        float: none;
    }
}

.margin-management-accordion {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 25px #0B174014;
    border-radius: 8px;
    opacity: 1;
    clear: right;
}

.margin-management-accordion-toggle {
    display: flex;
    align-items: center;
    height: 70px;
    margin: 0px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    opacity: 1;
}

.margin-management-accordion-toggle > div {
    display: inline-block;
    text-align: left;
    width: 90%;
    padding: 0px 12px;
    font: normal normal 500 16px CF Asty Std;
    letter-spacing: 0.32px;
    color: #081E46;
    opacity: 1;
}

.margin-management-accordion-toggle > div.open {
    color: #0D6AA0;
}

.margin-management-accordion-toggle > svg {
    display: inline-block;
    width: 10%;
    padding: 0px 12px;
    color: #081E46;
    opacity: 1;
}

.margin-management-accordion-toggle > svg.chevron-down {
    transform: rotate(0deg);
    transition: all 0.3s;
}

.margin-management-accordion-toggle > svg.chevron-up {
    transform: rotate(180deg);
    transition: all 0.3s;
}


/*******************************************
**CSS Style for MarginValueTable Component**
********************************************/

.margin-value-table-container.table tr {
    height: 47px;
}

.margin-value-table-container.table th {
    text-align: center;
    vertical-align: middle;
    padding: 0px 12px;
    font: normal normal 500 14px/25px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    opacity: 1;
}

.margin-value-table-container th:nth-child(2) {
    width: 20%;
}

.margin-value-table-container.table td {
    padding: 0px 12px;
}

.margin-value-table-container td:nth-child(1) {
    text-align: left;
    vertical-align: middle;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
    opacity: 1;
}

.margin-value-table-container td:nth-child(2) {
    width: 20%;
    vertical-align: middle;
}

.margin-value-table-container td:nth-child(2) span {
    display: inline-block;
    width: 60%;
    font: normal normal normal 13px/19px CF Asty Std;
    letter-spacing: 0.26px;
    color: #081E46;
    opacity: 1;
}

.margin-value-table-container td:nth-child(2) .form-control {
    display: inline-block;
    width: 60%;
    font: normal normal normal 13px/19px CF Asty Std;
    letter-spacing: 0.26px;
    direction: rtl;
    color: #081E46;
    opacity: 1;
}

.margin-value-table-container td:nth-child(2) .mrg-btn {
    width: 20%;
    background: transparent;
    box-shadow: 0px 0px 0px transparent;
    border: 0px solid transparent;
    text-shadow: 0px 0px 0px transparent;
}

.margin-value-table-container td:nth-child(2) .mrg-btn:hover {
    background: transparent;
    box-shadow: 0px 0px 0px transparent;
    border: 0px solid transparent;
    text-shadow: 0px 0px 0px transparent;
    cursor: pointer;
}
  
.margin-value-table-container td:nth-child(2) .mrg-btn:active {
    outline: none;
    border: none;
}
  
.margin-value-table-container td:nth-child(2) .mrg-btn:focus {
    outline: 0;
}

/**** my account statement of account ****/
.statement-of-account-container {
    min-height: 400px;
    max-height: 600px;
    padding: 30px;
    padding-top: 0;
    overflow-y: auto;
}

@media screen and (max-width: 450px) {
    .statement-of-account-container {
        padding: 0;
    }
}

.statement-of-account-container > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

@media screen and (max-width: 992px) {
    .statement-of-account-container > div:nth-child(1) {
        flex-direction: column-reverse;
    }
}

.statement-of-account-container > div:nth-child(1) > .btn.btn-outline-primary {
    border-radius: 8px;
    font: normal normal 500 13px/16px CF Asty Std;
    letter-spacing: 0px;
}

@media screen and (max-width: 992px) {
    .statement-of-account-container > div:nth-child(1) > .btn.btn-outline-primary {
        margin-bottom: 20px;
    }
}

.statement-of-account-container .statement-of-account-date-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 900px) {
    .statement-of-account-container .statement-of-account-date-filter {
        flex-direction: column;
    }
}

.statement-of-account-container .statement-of-account-date-filter > div {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 900px) {
    .statement-of-account-container .statement-of-account-date-filter > div {
        margin-bottom: 12px;
    }
}

.statement-of-account-container .statement-of-account-date-filter > div > span {
    margin-right: 10px;
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.statement-of-account-container .statement-of-account-date-filter .input-group {
    flex-wrap: nowrap;
    align-items: center;
    width: 180px;
    margin-right: 10px;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.statement-of-account-container .statement-of-account-date-filter input {
    width: inherit;
    outline: none;
    border: none;
    text-align: center;
    color: #081E46;
}

.statement-of-account-container .statement-of-account-date-filter .input-group-text {
    border: none;
    background-color: #FFFFFF;
    color: #081E46;
}

.statement-of-account-mobile-list {
    display: none;
}

@media screen and (max-width: 900px) {
    .statement-of-account-mobile-list {
        display: block;
    }
}

.statement-of-account-mobile-list > span {
    display: inline-block;
    width: 100%;
    padding: 20px;
    background-color: #0D6AA0;
    text-align: left;
    vertical-align: middle;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
}

.statement-of-account-mobile-list .list-group-item {
    text-align: left;
    font: normal normal normal 14px/25px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
}

.statement-of-account-mobile-list .list-group-item > p {
    display: flex;
    flex-direction: column;
}

.statement-of-account-mobile-list .list-group-item > p > span:first-child {
    font-weight: 500;
}

@media screen and (max-width: 900px) {
    .statement-of-account-container .statement-of-account-table {
        display: none;
    }
}

.statement-of-account-container .statement-of-account-table thead {
    background-color: #0D6AA0;
}

.statement-of-account-container .statement-of-account-table tbody {
    background-color: #FFFFFF;
}

.statement-of-account-container .statement-of-account-table th {
    text-align: left;
    vertical-align: middle;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
}

.statement-of-account-container .statement-of-account-table .btn-warning {
    width: 30px;
    height: 30px;
    padding: 0px;
}

.statement-of-account-container .statement-of-account-table td {
    text-align: left;
    font: normal normal normal 14px/45px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
}

.statement-of-account-container .statement-of-account-table td:last-child {
    text-align: center;
}

.statement-of-account-container .statement-of-account-table td:last-child > .btn.btn-warning {
    width: 24px;
    height: 24px;
    padding: 0;
}

.statement-of-account-container .statement-of-account-table td:last-child > .btn.btn-warning > svg {
    vertical-align: baseline;
}

/**** my account order history ****/
.order-history-container {
    min-height: 400px;
    max-height: 600px;
    padding: 30px;
    padding-top: 0;
    overflow-y: auto;
}

@media screen and (max-width: 450px) {
    .order-history-container {
        padding: 0;
    }
}

.order-history-container > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

@media screen and (max-width: 992px) {
    .order-history-container > div:nth-child(1) {
        flex-direction: column-reverse;
    }
}

.order-history-container > div:nth-child(1) > .btn.btn-outline-primary {
    border-radius: 8px;
    font: normal normal 500 13px/16px CF Asty Std;
    letter-spacing: 0px;
}

@media screen and (max-width: 992px) {
    .order-history-container > div:nth-child(1) > .btn.btn-outline-primary {
        margin-bottom: 20px;
    }
}

.order-history-container .order-history-date-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .order-history-container .order-history-date-filter {
        flex-direction: column;
    }
}

.order-history-container .order-history-date-filter > div {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .order-history-container .order-history-date-filter > div {
        margin-bottom: 12px;
    }
}

.order-history-container .order-history-date-filter > div > span {
    margin-right: 10px;
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.order-history-container .order-history-date-filter .input-group {
    flex-wrap: nowrap;
    align-items: center;
    width: 180px;
    margin-right: 10px;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.order-history-container .order-history-date-filter input {
    width: inherit;
    outline: none;
    border: none;
    text-align: center;
    color: #081E46;
}

.order-history-container .order-history-date-filter .input-group-text {
    border: none;
    background-color: #FFFFFF;
    color: #081E46;
}

.order-history-mobile-list {
    display: none;
}

@media screen and (max-width: 1050px) {
    .order-history-mobile-list {
        display: block;
    }
}

.order-history-mobile-list .list-group-item {
    text-align: left;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
}

.order-history-mobile-list .list-group-item > svg {
    float: right;
    cursor: pointer;
}

@media screen and (max-width: 450px) {
    .order-history-mobile-list .list-group-item > svg {
        display: none;
    }
}

.order-history-mobile-list .list-group-item > p {
    display: flex;
    flex-direction: column;
}

.order-history-mobile-list .list-group-item > p > span:first-child {
    font-weight: 500;
}

.order-history-mobile-list .list-group-item > p:last-child > span:last-child {
    font-size: 16px;
    font-weight: bold;
    color: #0D6AA0;
}

@media screen and (max-width: 1050px) {
    .order-history-table {
        display: none;
    }
}

.order-history-container .order-history-table thead {
    background-color: #0D6AA0;
}

@media screen and (max-width: 1050px) {
    .order-history-mobile-list > span {
        display: inline-block;
        width: 100%;
        padding: 12px;
        background-color: #0D6AA0;
        text-align: left;
        vertical-align: middle;
        font: normal normal 500 14px CF Asty Std;
        letter-spacing: 0px;
        color: #FFFFFF;
    }
}

.order-history-container .order-history-table tbody {
    background-color: #FFFFFF;
}

.order-history-container .order-history-table th {
    text-align: left;
    vertical-align: middle;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
}

.order-history-container .order-history-table td {
    text-align: left;
    font: normal normal normal 14px/45px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
}

.order-history-container .order-history-collapsible-row {
    padding: 0;
}

.order-history-container .order-history-product-table thead {
    background-color: #FFFFFF;
}

.order-history-container .order-history-product-table th {
    text-align: left;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #0D6AA0;
}

.order-history-container .order-history-product-table td {
    padding: 6px 12px;
    text-align: left;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
}

/* .order-history-container .order-history-product-table tbody tr:last-child td {
    text-align: right;
    padding: 24px 12px 0 12px;
} */

.order-history-container .order-history-product-table .btn.btn-outline-primary {
    margin-left: 12px;
    padding: 0 20px;
    border-radius: 5px;
    font: normal normal 500 13px/35px CF Asty Std;
    letter-spacing: 0.25px;
}



/************************
** ORDER HISTORY MODAL **
************************/
.order-history-modal-paragraph {
    display: flex;
    flex-direction: column;
    text-align: left;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.27px;
    color: #081E46;
}

.order-history-modal-paragraph > span:first-child {
    font-weight: 500;
}

/**** my account change password ****/
.change-password-form-container {
    margin-bottom: 50px;
}

.change-password-form-control.form-control {
    height: 60px;
    background: var(--white) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    opacity: 1;
}

.change-password-form-control.form-control::placeholder {
    color: var(--dark-blue);
    text-align: left;
    font: normal normal normal 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.change-password-form-button.btn {
    width: 200px;
    height: 50px;
    border-radius: 8px;
    font: normal normal 500 15px/32px CF Asty Std;
    letter-spacing: 0px;
    opacity: 1;
}

/**********************
** END OF MY ACCOUNT **
**********************/

/***************
** CONTACT US **
***************/
.contact-us-container {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 450px) {
    .contact-us-container {
        flex-direction: column-reverse;
    }
}

.contact-us-map-container {
    width: 100%;
    height: 440px;
    position: relative;
}

.contact-us-main-container {
    display: flex;
    padding: 60px 10.677vw 100px 10.677vw; /* 60px 205px 100px 205px */
    background-color: #F7F7F9;
}

@media screen and (max-width: 768px) {
    .contact-us-main-container {
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 450px) {
    .contact-us-main-container {
        padding: 0;
    }
}

.contact-us-navigation-container {
    width: fit-content;
    height: fit-content;
    margin-right: 25px;
    padding: 30px 33px;
    border-radius: 5px;
    background-color: #FFFFFF;
}

@media screen and (max-width: 768px) {
    .contact-us-navigation-container {
        width: 100%;
        margin-top: 25px;
        margin-right: 0;
        padding: 0;
        border-radius: 8px;
    }
}

.contact-us-navigation-container > span {
    font: normal normal 500 16px/20px CF Asty Std;
    letter-spacing: 0.32px;
    color: #081E46;
}

.contact-us-navigation-container .list-group {
    margin-top: 19px;
}

@media screen and (max-width: 768px) {
    .contact-us-navigation-container .list-group {
        margin: 10px 20px 10px 20px;
    }
}

.contact-us-navigation-container .list-group-item {
    padding: 0;
    border: none;
    font: normal normal normal 14px/33px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.contact-us-navigation-container .list-group-item.active {
    background-color: transparent;
    color: #0D6AA0;
}

.contact-us-form-container {
    width: 100%;
    padding: 49px 4.167vw 66px 4.167vw; /* 49px 80px 66px 80px */
    border-radius: 5px;
    background-color: #FFFFFF;
}

.contact-us-form-container > span {
    font: normal normal 500 27px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.contact-us-form-inside {
    display: flex;
    margin-top: 30px;
}

@media screen and (max-width: 1200px) {
    .contact-us-form-inside {
        flex-direction: column;
    }
}

.contact-us-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-right: 15px;
}

@media screen and (max-width: 1200px) {
    .contact-us-info-container {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

.contact-us-info-container > span,
.contact-us-input-form-container > span {
    font: normal normal 500 17px/25px CF Asty Std;
    letter-spacing: 0.34px;
    color: #081E46;
}

.contact-us-info-main-office {
    margin-top: 12px;
}

.contact-us-info-secondary-offices {
    margin-top: 28px;
}

.contact-us-input-form-container {
    padding-right: 0;
}

.contact-us-input-form-container {
    flex: 1;
    margin-top: 75px;
    margin-left: 15px;
}

@media screen and (max-width: 1200px) {
    .contact-us-input-form-container {
        margin-top: 15px;
        margin-left: 0;
    }
}

.contact-us-input-form-container form {
    margin-top: 20px;
}

.contact-us-input-form-container .form-label {
    font: normal normal normal 12px/14px CF Asty Std;
    letter-spacing: 0px;
    opacity: 0.45;
}

.contact-us-input-form-container .form-control {
    height: fit-content;
    padding: 20px;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    font: normal normal normal 15px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.contact-us-input-form-container .form-control::placeholder {
    font: normal normal normal 15px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.contact-us-input-form-container textarea {
    min-height: 140px;
}

.contact-us-input-form-container .form-check-label {
    font: normal normal normal 12px/18px CF Asty Std;
    letter-spacing: 0.24px;
    color: #081E46;
}

.contact-us-input-form-container .form-check {
    padding-left: 25px;
}

.contact-us-input-form-container .form-check-input {
    margin-left: -25px;
}

.contact-us-form-footer {
    display: flex;
    flex-direction: column;
}

.contact-us-captcha {
   margin-bottom: 20px;
}

@media screen and (max-width: 450px) {
    .contact-us-captcha {
        transform: scale(0.7);
    }
}

.contact-us-form-footer .btn.btn-warning {
    width: 100%;
    border-radius: 8px;
    font: normal normal 500 15px/32px CF Asty Std;
    letter-spacing: 0px;
}


/**** contact us office info ****/

.contact-us-office-info-container .contact-us-info-address {
    font: normal normal normal 14px/16px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.contact-us-info-elements {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
}

.contact-us-info-elem {
    display: flex;
    align-items: center;
    margin-right: 15px;
    font: normal normal normal 14px/16px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

.contact-us-info-elem svg {
    margin-right: 8px;
}


/**** contact us accordion info ****/

.contact-us-office-info-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font: normal normal 500 16px/25px CF Asty Std;
    letter-spacing: 0.32px;
    color: #081E46;
    border: 1px solid #F1F1F3;
    border-radius: 8px;
}

.contact-us-office-info-toggle svg {
    transform: rotate(180deg);
    transition: 0.4s transform;
}

.contact-us-office-info-toggle.collapsed svg {
    transform: rotate(0);
}

.contact-us-office-info-toggle:hover {
    cursor: pointer;
}

.contact-us-accordion-info-container .contact-us-office-info-container {
    margin: 10px 20px 28px 20px;
}

/**** Help Form Contact Us ****/
.help-container {
    padding: 70px 10.417vw 105px 10.417vw; /* 70px 200px 105px 200px */
    background-color: #F7F7F9;
}

@media screen and (max-width: 500px) {
    .help-container {
        padding: 70px 0 105px 0;
    }
}

.help-container .help-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6.250vw; /* 0 120px */
    border-radius: 5px;
    background-color: #FFFFFF;
}

.help-container .help-main-title {
    margin-top: 67px;
    font: normal normal 500 27px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.help-container .help-form-container {
    display: flex;
    flex-direction: column;
    max-width: 650px;
    margin: 40px 0 111px 0;
}

.help-container .form-group {
    margin-bottom: 18px;
}

.help-container .form-label {
    margin-bottom: 15px;
    font: normal normal 500 17px CF Asty Std;
    letter-spacing: 0.34px;
}

.help-container .help-form-frame {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
}

.help-container .help-form-frame .form-check-input {
    position: relative;
    margin: 0 19px 0 0;
}

.help-container .help-form-frame .form-check-label {
    font: normal normal normal 14px/20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.help-container .help-form-frame .form-check-label.unchecked {
    opacity: 0.4;
}

.help-container .help-form-accordion {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #E8E9EE;
}

.help-container .help-form-quantity {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    font: normal normal normal 14px/20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.help-container .quantity-setter-container {
    margin-left: 24px;
}

.help-container .quantity-setter-container .form-control {
    height: 100%;
}

.help-form-additional-files {
    margin-bottom: 18px;
}

.register-form-dropzone {
    min-height: 80px;
    padding: 16px;
    margin-bottom: 18px;
    border-style: dashed;
    border-color: rgba(8, 30, 46, 0.5);
    opacity: 0.4;
}

.register-form-dropzone p {
    font: normal normal normal 14px/20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    white-space: normal;
}

.help-form-additional-files ul {
    max-height: 200px;
    overflow-y: auto;
    font: normal normal normal 14px/20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.help-container .form-control {
    height: fit-content;
    font: normal normal normal 14px/20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.help-container .form-control:focus {
    color: #081E46;
}

.help-container .form-control::placeholder {
    font: normal normal normal 14px/20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    white-space: normal;
    opacity: 0.4;
}

.help-container textarea {
    min-height: 163px;
}

.help-container .btn.btn-warning {
    align-self: flex-end;
    width: 200px;
    margin-top: 22px;
    border-radius: 8px;
    font: normal normal 500 15px/32px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
}

@media screen and (max-width: 500px) {
    .help-container .btn.btn-warning {
        align-self: center;
    }
}

/**********************
** END OF CONTACT US **
**********************/

/*********************
** CATEGORY LANDING **
*********************/

/**** category page ****/

#categoryLandingPage {
    text-align: center;
    background: #F7F7F9 0% 0% no-repeat padding-box;
}

#categoryLandingPage .category-description {
    width: 50%;
    margin: 0 auto;
}

.categories-breadcrumb {
    position: relative;
    top: 18px;
    left: 235px;
    text-align: left;
}

#categoryLandingWelcome {
    background-color: #F7F7F9;
    padding-bottom: 146px;
}

.categoryLandingWelcome .breadcrumb {
    padding-left: 2.625rem;
    background-color: #FFFFFF;
}

.categoryLandingWelcome .breadcrumb .breadcrumb-item,
.categoryLandingWelcome .breadcrumb .breadcrumb-item a {
    font: normal normal normal 12px/14px CF Asty Std;
    letter-spacing: 0.24px;
    color: #081E46;
}

.categoryLandingWelcome .breadcrumb > .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

.category-landing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-landing-desc-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 45px 25vw; /* 45px 480px */
}

@media screen and (max-width: 768px) {
    .category-landing-desc-container {
        padding: 45px 10.417vw; /* 45px 200px */
    }
}

.category-landing-main-title {
    font: normal normal 500 40px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.category-landing-description {
    margin-top: 25px;
    text-align: center;
    font: normal normal normal 15px/26px CF Asty Std;
    letter-spacing: 0.3px;
    color: #091940;
}

.category-landing-sub-categories-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 40px;
}

.category-landing-sub-categories-title {
    font: normal normal 500 20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.category-landing-sub-categories-tile-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    padding: 0 10.417vw; /* 0 200px */
}

@media screen and (max-width: 768px) {
    .category-landing-sub-categories-tile-container {
        display: none;
    }
}

.category-landing-tile-slider {
    max-width: 100%;
    width: fit-content;
    margin-top: 20px;
    padding: 0 10.417vw; /* 0 200px */
}

@media screen and (min-width: 769px) {
    .category-landing-tile-slider {
        display: none;
    }
}

.category-landing-tile-slider .swiper {
    width: 100%;
}

.category-landing-tile-slider .swiper-scrollbar-drag {
    cursor: grab;
}

.category-landing-tile-slider .swiper-scrollbar-drag:active {
    cursor: grabbing;
}

.category-landing-tile-slider .swiper-slide {
    width: fit-content;
}

.category-landing-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 330px;
    height: 353px;
    margin: 20px;
    border-radius: 8px;
    background-color: #FFFFFF;
    font: normal normal normal 18px/24px CF Asty Std;
    letter-spacing: 0.36px;
    color: #081E46;
    cursor: pointer;
}

@media screen and (max-width: 992px) {
    .category-landing-tile {
        width: 248px;
        height: 265px;
        font-size: 16px;
    }
}

@media screen and (max-width: 450px) {
    .category-landing-tile {
        width: 198px;
        height: 212px;
        font-size: 14px;
    }
}

.category-landing-tile > div {
    width: 90%;
    height: 65%;
}

.category-landing-tile > div > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.category-landing-tile > div > a > img {
    max-width: 100%;
    max-height: 100%;
}

.category-landing-tile > p {
    width: 90%;
    height: 15%;
    margin-bottom: 0;
}

.category-landing-tile > p > a {
    width: 100%;
    height: 100%;
    color: #081E46;
}

.category-landing-tile > p > a:hover {
    text-decoration: none;
}

.category-landing-articles-container {
    margin-top: 120px;
    background-color: #FFFFFF;
}

.category-landing-new-arrivals, 
.category-landing-offers {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 120px 10.417vw 0 10.417vw; /* 120px 200px 0 200px */
    background-color: #FFFFFF;
}

.category-landing-new-arrivals > span, 
.category-landing-offers > span {
    text-align: left;
    font: normal normal 500 23px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.category-landing-new-arrivals-slider, 
.category-landing-offers-slider {
    max-width: 100%;
    width: fit-content;
    margin-top: 46px;
}

.category-landing-new-arrivals-slider .swiper, 
.category-landing-offers-slider .swiper {
    padding-bottom: 45px;
    box-shadow: 29px -20px 29px -29px #102B6314, -29px -20px 29px -29px #102B6314;
}

.category-landing-new-arrivals-slider .swiper-pagination-bullets.swiper-pagination-horizontal, 
.category-landing-offers-slider .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 20px;
    height: 3px;
}

.category-landing-new-arrivals-slider .swiper-pagination-bullet, 
.category-landing-offers-slider .swiper-pagination-bullet {
    display: inline-block;
    width: 55px;
    height: 100%;
    margin: 0 3px;
    border-radius: 3px;
    background-color: #0D6AA0;
}

.category-landing-new-arrivals-slider .swiper-wrapper, 
.category-landing-offers-slider .swiper-wrapper {
    box-shadow: 0px 10px 29px -29px #102B6314;
}

.category-landing-new-arrivals-slider .swiper-slide, 
.category-landing-offers-slider .swiper-slide {
    width: fit-content;
}

@media screen and (max-width: 450px) {
    .category-landing-new-arrivals-slider .product-swiper-card, 
    .category-landing-offers-slider .product-swiper-card {
        width: 209px;
        height: 319px;
    }
}

/**** category article ****/

.category-article-container {
    display: flex;
    flex-direction: row;
}

.category-article-container.reverse {
    display: flex;
    flex-direction: row-reverse;
}

@media screen and (max-width: 992px) {
    .category-article-container, 
    .category-article-container.reverse {
        flex-direction: column-reverse;
    }
}

.category-article-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 2.083vw 7.292vw; /* 40px 140px */
}

@media screen and (max-width: 992px) {
    .category-article-text {
        width: 100%;
        padding: 40px 14.113vw; /* 40px 140px */ /* max-width: 992px */
    }
}

@media screen and (max-width: 768px) {
    .category-article-text {
        align-items: center;
    }
}

.category-article-text > span {
    font: normal normal 500 40px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.category-article-text > p {
    margin-top: 14px;
    font: normal normal normal 17px CF Asty Std;
    letter-spacing: 0.34px;
    color: #081E46;
}

.category-article-text > .btn.btn-outline-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 14px 25px;
    border-radius: 8px;
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0px;
}

.category-article-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

@media screen and (max-width: 992px) {
    .category-article-image {
        width: 100%;
    }
}

.category-article-image > img {
    width: 100%;
}

/****************************
** END OF CATEGORY LANDING **
****************************/

/******************
** CART DROPDOWN **
******************/
.cart-dropdown-menu.dropdown-menu {
    position: fixed;
    left: initial;
    top: 158px;
    right: 0;
    width: 350px;
    height: calc(100% - 158px);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    transition: right 0.8s;
}

@media screen and (max-width: 768px) {
    .cart-dropdown-menu.dropdown-menu {
        top: 225px;
        height: calc(100% - 225px);
    }
}

@media screen and (max-width: 450px) {
    .cart-dropdown-menu.dropdown-menu {
        top: 207px;
        height: calc(100% - 207px);
    }
}

#cart-dropdown-container > .cart-dropdown-menu {
    display: block !important;
    right: -350px;
}

#cart-dropdown-container > .cart-dropdown-menu.show {
    display: flex !important;
    flex-direction: column;
    right: 0;
}

.cart-dropdown-menu.dropdown-menu {
    border: 0;
    border-radius: 0;
}

.cart-dropdown-menu .dropdown-item {
    width: 335px;
    color: var(--dark-blue);
    text-align: left !important;
    font: normal normal 500 15px/50px CF Asty Std !important;
    letter-spacing: 0px !important;
    color: #081E46 !important;
    opacity: 1;
}

/**** cart dropdown menu ****/
#cart-dropdown-container {
    position: static;
}

.cart-dropdown-menu .btn {
    width: 100%;
    margin-bottom: 10px;
    padding: 14px;
}

.cart-dropdown-menu .quantity-setter-container .btn {
    width: 30%;
    margin: 0;
    padding: 0;
}

.cart-dropdown-menu > div:nth-child(2) {
    text-align: center;
    /* margin-top: 21px; */
    margin-bottom: 18px;
}

.cart-drop-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

#cartLabelInternal {
    margin: 0;
    font: normal normal 500 17px/29px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.cart-dropdown-menu > div:nth-child(2) > svg {
    position: absolute;
    right: 0;
    color: #081E46;
    cursor: pointer;
}

.cart-items {
    max-height: 500px;
    overflow-y: auto;
}

#cartBtn {
    width: 100%;
    height: 100%;
}

#cartSummary {
    width: 85%;
    margin: 0 auto;
    color: #081E46;
    font-size: 14px;
    font-weight: 600;
}

.cart-summary-line {
    clear: both;
}

.cart-summary-label {
    float: left;
    font: normal normal 500 14px/30px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

.cart-summary-value {
    float: right;
    font: normal normal 500 14px/30px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

/**** nav cart item ****/
.nav-cart-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 10px;
}

.nav-cart-item > div {
    padding: 0 5px;
}

.nav-cart-item-delete {
    padding: 0;
    cursor: pointer;
}

.nav-cart-item-delete:hover {
    color: var(--bs-danger);
}

.nav-cart-item-image-quantity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 110px;
}

.nav-cart-item-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
}

.nav-cart-item-image img {
    max-width: 100%;
    max-height: 100%;
}

.nav-cart-item-quantity {
    height: 25px;
}

.nav-cart-item-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.nav-cart-item-info p {
    margin: 0;
    font: normal normal normal 13px/19px CF Asty Std;
    letter-spacing: 0.26px;
    color: #081E46;
}

.nav-cart-item-westnet-code {
    opacity: 0.4;
}

.nav-cart-item-price {
    font: normal normal 500 14px/19px CF Asty Std;
}

/**** cart dropdown item ****/
.cart-dropitem.dropdown-item {
    width: 100%;
    height: auto;
    padding: 20px;
    cursor: auto;
}

.cart-item-delete-btn {
    margin-right: 10px;
    cursor: pointer;
}

.cart-item-delete-btn:hover {
    color: var(--bs-danger);
}

.cart-item-image {
    width: 100px;
    height: 100px;
    margin-right: 10px;
}

.cart-item-image img {
    max-width: 100%;
    max-height: 100%;
}

.cart-item-info {
    display: inline-block;
    vertical-align: middle;
}

.cart-item-info p {
    width: 170px;
    margin-bottom: 0;
    white-space: normal;
    word-break: break-word;
    font: normal normal normal 13px/19px CF Asty Std;
    letter-spacing: 0.26px;
    color: #081E46;
}

.cart-westnet-code {
    font: normal normal normal 13px/17px CF Asty Std;
    letter-spacing: 0.26px;
    color: #081E46;
    opacity: 0.4;
}

.cart-item-initial-price {
    display: block;
    text-decoration: line-through;
    font: normal normal normal 12px/19px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 0.4;
}

.cart-item-price {
    display: block;
    font: normal normal 500 14px/19px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

/*************************
** END OF CART DROPDOWN **
*************************/

/*********
** CART **
*********/
#cartPageContainer {
    background-color: #F7F7F9;
    color: #081E46;
    min-height: 935px;
}

#cartPageContainer .navbar {
    background-color: white;
}

#cartPageContainer .nav-item,
#checkoutCartPage .nav-item {
    padding-left: 33px;
    padding-right: 33px;
}

#cartPageContainer .nav-item .nav-link,
#checkoutCartPage .nav-item .nav-link,
#checkoutSuccessContainer .nav-item .nav-link {
    color: #081E46;
    font: normal normal bold 15px/75px CF Asty Std;
    opacity: 0.5;
}

#cartPageContainer .nav-item .nav-link.active,
#checkoutCartPage .nav-item .nav-link.active,
#checkoutSuccessContainer .nav-item .nav-link.active {
    font-size: 19px;
    opacity: 1;
    color: #0D6AA0;
}

#checkoutNav {
    transform: translateX(15%)
}

@media screen and (max-width: 1200px) {
    #checkoutNav {
        transform: none;
    }
}

/* Round Checkbox */
.cart-item-checkbox {
    position: relative;
    display: inline-block;
    margin-right: 24px;
  }
  
  .cart-item-checkbox label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 17px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: 17px;
  }
  
  .cart-item-checkbox label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    opacity: 0;
    position: absolute;
    top: -10%;
    left: 40%;
    transform: rotate(-45deg) translateX(-50%);
    width: 12px;
  }
  
  .cart-item-checkbox input[type="checkbox"] {
    /* visibility: hidden; */
  }
  
  .cart-item-checkbox input[type="checkbox"]:checked + label {
    background-color: #0D6AA0;
    border-color: #0D6AA0;
  }

  .cart-image-small {
      width: 60px;
      height: 60px;
      margin-right: 20px;
    }

    .cart-image-small img {
        max-width: 100%;
        max-height: 100%;
    }
  
  .cart-item-checkbox input[type="checkbox"]:checked + label:after {
    opacity: 1;
  }


/************
** New css **
************/
.cart-container {
  display: flex;
  flex-direction: column;
  padding: 50px 5.208vw; /* 50px 100px */
}

@media screen and (max-width: 992px) {
  .cart-container {
    align-items: center;
  }
}

@media screen and (max-width: 500px) {
  .cart-container {
    padding: 50px 0;
  }
}

.cart-container .cart-title {
  font: normal normal 500 27px CF Asty Std;
  letter-spacing: 0px;
  color: #081E46;
}

.cart-container .cart-inside-container {
  display: flex;
  margin-top: 20px;
}

@media screen and (max-width: 1400px) {
  .cart-container .cart-inside-container {
    flex-direction: column;
  }
}

.cart-container .cart-main-container {
  flex: 3;
  display: flex;
  flex-direction: column;
}

.cart-container .cart-quick-add-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 14px 40px;
  background: #0D6AA0 0% 0% no-repeat padding-box;
  border-radius: 5px;
}

@media screen and (max-width: 992px) {
  .cart-container .cart-quick-add-container {
    flex-direction: column;
    padding-right: 40px;
  }
}

@media screen and (max-width: 500px) {
  .cart-container .cart-quick-add-container {
    padding: 14px 12px;
  }
}

.cart-container .cart-quick-add-title {
  font: normal normal 500 17px CF Asty Std;
  letter-spacing: 0px;
  color: #FFFFFF;
  white-space: nowrap;
}

.cart-container .cart-quick-add-container .input-group {
  margin-left: 30px;
}

@media screen and (max-width: 992px) {
  .cart-container .cart-quick-add-container .input-group {
    margin-top: 30px;
    margin-left: 0;
  }
}

.cart-container .cart-quick-add-container .cart-quick-add-search-bar {
  padding: 17px 25px;
  padding-right: 0;
  border-right: none;
  background-color: transparent;
  font: normal normal normal 13px CF Asty Std;
  letter-spacing: 0.26px;
  color: #FFFFFF;
}

.cart-container .cart-quick-add-container .cart-quick-add-search-bar::placeholder {
  font: normal normal normal 13px CF Asty Std;
  letter-spacing: 0.26px;
  color: #FFFFFF;
  opacity: 0.6;
}

.cart-container .cart-quick-add-container .cart-quick-add-search-bar:focus {
  box-shadow: none;
  border-color: #ced4da;
}

.cart-container .cart-quick-add-container .input-group-text {
  border-left: none;
  background-color: transparent;
  color: #FFFFFF;
}

.cart-container .cart-quick-add-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
}

@media  screen and (max-width: 992px) {
  .cart-container .cart-quick-add-controls {
    margin-top: 15px;
    margin-left: 0;
    width: 100%;
  }
}

.cart-container .cart-quick-add-container .quantity-setter-container {
  margin-right: 15px;
  border-radius: 0.25rem;
  color: #0D6AA0;
}

.cart-container .cart-quick-add-container .quantity-setter-container .btn {
  width: 36px;
}

.cart-container .cart-quick-add-container .quantity-setter-container .form-control {
  width: 43px;
}

.cart-container .cart-quick-add-container .btn.btn-success {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  border-radius: 0.25rem;
}

@media screen and (max-width: 992px) {
  .cart-container .cart-quick-add-container .btn.btn-success {
    justify-content: center;
    width: 100%;
  }
}

.cart-container .cart-quick-add-container .btn.btn-success span {
  margin-left: 12px;
  font: normal normal 500 14px CF Asty Std;
  letter-spacing: 0px;
  white-space: nowrap;
}

@media screen and (max-width: 500px) {
  .cart-container .cart-quick-add-container .btn.btn-success span {
    display: none;
  }
}

.cart-quick-add-container .dropdown-menu {
    width: 100%;
}

.cart-quick-add-container p {
    font: normal normal 500 14px/33px CF Asty Std;
    letter-spacing: 0.28px;
    color: #0D6AA0;
    margin: 29px 0 0 51px;
}

.cart-quick-add-container ul {
    list-style-type: none;
    font: normal normal normal 14px/30px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
    padding: 27px 51px;
    padding-top: 0;
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.cart-quick-add-container ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.cart-quick-add-container ul li p {
    font: normal normal 500 14px/25px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

.cart-container .cart-table-container {
  margin-top: 30px;
  border-radius: 5px;
  background-color: #FFFFFF;
}
@media screen and (max-width: 992px) {
    .cart-container .cart-table-container .table {
        display: none;
    }
}

.cart-container .cart-table-container th {
  padding: 34px inherit;
  border: none;
  text-align: right;
  font: normal normal 500 14px CF Asty Std;
  letter-spacing: 0.28px;
  color: #081E46;
}

.cart-container .cart-table-container th:first-child {
  padding-left: 35px;
  text-align: left;
}

.cart-container .cart-table-container th:last-child {
  padding-right: 35px;
}

.cart-container .cart-table-container th .form-check {
  margin-right: 24px;
}

.cart-container .cart-table-container td {
  vertical-align: middle;
  text-align: right;
  font: normal normal normal 14px/21px CF Asty Std;
  letter-spacing: 0.28px;
  color: #081E46;
}

.cart-container .cart-table-container td:first-child {
  padding-left: 35px;
  text-align: left;
}

.cart-container .cart-table-container td:last-child {
  padding-right: 35px;
  font-weight: bold;
}

.cart-container .cart-table-container td .cart-table-product,
.cart-container .cart-table-container .cart-table-list-product .cart-table-product {
  display: flex;
  align-items: center;
}

.cart-container .cart-table-container td .cart-table-product p,
.cart-container .cart-table-container .cart-table-list-product .cart-table-product p {
  margin-bottom: 0;
}

.cart-container .cart-table-container td .quantity-setter-container {
  justify-content: flex-end;
}

.cart-container .cart-table-container td .quantity-setter-container .btn,
.cart-container .cart-table-container .cart-table-list-controls .quantity-setter-container .btn {
  width: 36px;
}

.cart-container .cart-table-container td .cart-table-prices {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.cart-container .cart-table-container td .cart-table-prices .cart-table-initial-price {
  text-decoration: line-through;
  font-size: 12px;
  opacity: 0.4;
}

@media screen and (min-width: 993px) {
    .cart-container .cart-table-container .list-group {
        display:none;
    }
}

.cart-container .cart-table-container .list-group-item {
  padding: 12px 35px;
  border-right: none;
  border-left: none;
}

.cart-container .cart-table-container .cart-table-list-product {
  display: flex;
  flex-direction: column;
}

.cart-container .cart-table-container .cart-table-list-info {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-left: 38px;
}

.cart-container .cart-table-container .cart-table-list-info p {
  display: flex;
  margin-bottom: 0;
  font: normal normal normal 14px/21px CF Asty Std;
  letter-spacing: 0.28px;
  color: #081E46;
}

.cart-container .cart-table-container .cart-table-list-info p > span:first-child {
  margin-right: 10px;
  font-weight: 500;
}

.cart-container .cart-table-container .cart-table-list-info p > .initial-price {
  margin-left: 8px;
  text-decoration: line-through;
  font-size: 12px;
  opacity: 0.4;
}

.cart-container .cart-table-container .cart-table-list-info p:last-child > span:last-child {
  font-weight: bold;
}

.cart-container .cart-table-container .cart-table-list-controls {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-left: 38px;
}

.cart-container .cart-table-container .cart-table-footer {
  display: flex;
  align-items: center;
  padding: 40px 35px;
}

@media screen and (max-width: 992px) {
  .cart-container .cart-table-container .cart-table-footer {
    flex-direction: column;
  }
}

.cart-container .cart-table-container .cart-table-footer .btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 10px;
  padding: 15px 19px;
  border-radius: 8px;
}

@media screen and (max-width: 992px) {
  .cart-container .cart-table-container .cart-table-footer .btn {
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
  }
}

.cart-container .cart-table-container .cart-table-footer .btn span {
  margin-left: 8px;
  font: normal normal normal 14px CF Asty Std;
  letter-spacing: 0.28px;
}

.cart-back-order-container {
    margin-top: 30px;
    border-radius: 5px;
    background-color: #FFFFFF;
    font-family: CF Asty Std;
    color: #081E46;
    text-align: center;
}

.cart-back-order-container h5 {
    padding: 20px;
    margin: 0;
}

.cart-container .cart-side-container {
  flex: 1;
  margin-left: 1.563vw; /* 30px */
}

@media screen and (max-width: 1400px) {
  .cart-container .cart-side-container {
    margin-top: 30px;
    margin-left: 0;
  }

  .cart-container .cart-side-container .checkout-summary-container .btn.btn-success {
    margin: 20px auto;
  }
}

/**** cart summary ****/

.checkout-summary-container {
    display: flex;
    flex-direction: column;
    padding: 30px 35px;
    border-radius: 5px;
    background-color: #FFFFFF;
}

.checkout-summary-title {
    font: normal normal 500 20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.checkout-summary-prices {
    display: flex;
    flex-direction: column;
}

.checkout-summary-prices > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.checkout-summary-prices > div:first-child {
    margin-top: 20px;
}

.checkout-summary-prices > div:last-child {
    margin-top: 20px;
}

.checkout-summary-prices > div > span:first-child {
    font: normal normal 500 14px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

.checkout-summary-prices > div > span:last-child {
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

.checkout-summary-prices span:last-child.checkout-summary-discounted-price {
    color: #8CBB2E;
}

.checkout-summary-prices > div:last-child > span:first-child {
    font-size: 16px;
}

.checkout-summary-prices > div:last-child > span:last-child {
    font: normal normal bold 22px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

.checkout-summary-container > .btn.btn-success {
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    font: normal normal 500 15px CF Asty Std;
    letter-spacing: 0
}

.checkout-summary-footer-message {
    text-align: center;
    font: normal normal normal 13px CF Asty Std;
    letter-spacing: 0.39px;
    color: #081E46;
    opacity: 0.5;
}

/****************
** END OF CART **
****************/

/************************
**CHECKOUT CONFIRMATION**
************************/
.checkout-confirmation-container {
    display: flex;
    padding: 55px 10.417vw; /* 55px 200px */
    background-color: #F7F7F9;
}

@media screen and (max-width: 1400px) {
    .checkout-confirmation-container {
        flex-direction: column;
    }
}

@media screen and (max-width: 500px) {
    .checkout-confirmation-container {
        padding: 55px 0;
    }
}

.checkout-confirmation-main-container {
    flex: 3;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    background-color: #FFFFFF;
}

.checkout-confirmation-title {
    padding: 32px 45px;
    border-bottom: 2px solid #F3F2F2;
    text-align: left;
    font: normal normal 500 27px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.checkout-confirmation-form-container {
    padding: 55px 9.115vw; /* 55px 175px */
}

.checkout-confirmation-form > div:nth-child(1) {
    display: flex;
    flex-direction: column;
}

.checkout-confirmation-form > div:nth-child(1) > span:nth-child(1) {
    margin-top: 45px;
    text-align: left;
    font: normal normal 500 20px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.checkout-confirmation-form > div:nth-child(1) > span:nth-child(2) {
    margin-top: 20px;
    margin-bottom: 25px;
    text-align: left;
    font: normal normal normal 15px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
    opacity: 1;
}

.checkout-confirmation-form .form-label {
    font: normal normal normal 12px/14px CF Asty Std;
    letter-spacing: 0px;
    opacity: 0.45;
}

.checkout-confirmation-form .form-control {
    font: normal normal normal 15px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.checkout-confirmation-form .form-control:focus {
    color:#081E46;
}

.checkout-confirmation-form .form-control::placeholder {
    font: normal normal normal 15px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.checkout-confirmation-form .input-group-text {
    background-color: #FFFFFF;
    color: #081E46;
}

.checkout-confirmation-form > div:nth-child(2), .checkout-confirmation-form > div:nth-child(3) {
    margin-top: 30px;
}

.checkout-confirmation-form > div:nth-child(2) > span, .checkout-confirmation-form > div:nth-child(3) > span {
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.checkout-confirmation-form > div:nth-child(2) > .form-group:nth-child(2) {
    display: flex;
    margin-top: 15px;
}

.checkout-confirmation-form > div:nth-child(2) > .form-group:nth-child(2) > .form-control:nth-child(1) {
    margin-right: 23px;
}

.checkout-confirmation-form > div:nth-child(2) .form-check-inline, .checkout-confirmation-form > div:nth-child(3) .form-check-inline {
    vertical-align: middle;
    font: normal normal normal 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.checkout-confirmation-form > div:nth-child(2) .form-check-input {
    margin-right: 21px;
}

.checkout-confirmation-form > div:nth-child(2) > .form-group:nth-child(3) > textarea {
    min-height: 130px;
}

.checkout-confirmation-form > div:nth-child(3) > .form-group:nth-child(2) {
    margin-top: 15px;
    margin-bottom: 40px;
}

.checkout-confirmation-form > div:nth-child(3) > .form-group:nth-child(2) .form-control {
    margin-bottom: 1rem;
}

.checkout-confirmation-form > div:nth-child(4) {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 992px) {
    .checkout-confirmation-form > div:nth-child(4) {
        flex-direction: column;
    }
}

.checkout-confirmation-form > div:nth-child(4) > .form-group {
    margin-right: 10px;
    margin-bottom: 0;
}

@media screen and (max-width: 992px) {
    .checkout-confirmation-form > div:nth-child(4) > .form-group {
        margin-right: 0;
        margin-bottom: 30px;
    }
}

.checkout-confirmation-form > div:nth-child(4) .form-check {
    font: normal normal normal 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

#collapseInstallments .list-group-item {
    font-family: 'CF Asty Std';
}

#collapseInstallments .list-group-item p {
    font-size: 14px;
}
#collapseInstallments .list-group-item h6, 
#collapseInstallments .list-group-item p > span {
    font-weight: 500;
}

.checkout-confirmation-form > div:nth-child(4) > .btn.btn-success {
    align-self: center;
    height: 50px;
    padding: 15px;
    border-radius: 8px;
    font: normal normal 500 15px CF Asty Std;
    letter-spacing: 0;
    white-space: nowrap;
}

.checkout-confirmation-side-container {
    flex: 1;
    margin-left: 1.563vw; /* 30px */
}

@media screen and (max-width: 1400px) {
    .checkout-confirmation-side-container {
        margin-top: 30px;
        margin-left: 0;
    }

    .checkout-confirmation-side-container .checkout-summary-container .btn.btn-success {
        margin: 20px auto;
    }
}

.checkout-confirmation-form #installments:not(.active) {
    height: 0;
    opacity: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
}

.checkout-confirmation-form #installments {
    transition: all 0.5s ease;
}

/**** checkout help info ****/
.checkout-confirmation-help-info-container {
    display: flex;
    height: fit-content;
    margin-top: 35px;
    padding: 0 40px;
}

@media screen and (max-width: 992px) {
    .checkout-confirmation-help-info-container {
        justify-content: center;
    }
}

.checkout-confirmation-help-info-inside-container {
    display: flex;
    flex-direction: column;
}

.checkout-confirmation-help-info-inside-container > div {
    display: flex;
    margin-bottom: 31px;
}

.checkout-confirmation-help-info-inside-container > div > svg {
    align-self: center;
    color: #0D6AA0;
}

.checkout-confirmation-help-info-inside-container > div > p {
    margin-left: 23px;
    margin-bottom: 0;
    font: normal normal normal 14px/24px CF Asty Std;
    letter-spacing: 0.42px;
    color: #0D6AA0;
    opacity: 1;
}

/**** CHECKOUT COMPLETE ****/
.checkout-complete-container {
    padding: 55px 6.250vw; /* 55px 120px */
    background-color: #F7F7F9;
}

@media screen and (max-width: 500px) {
    .checkout-complete-container {
        padding: 55px 0;
    }
}

.checkout-complete-container > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 77px 0px;
    background-color: #FFFFFF;
}

.checkout-complete-container > div > svg {
    color: #8CBB2E;
}

.checkout-complete-container > div > span:nth-child(2) {
    margin-top: 30px;
    text-align: center;
    font: normal normal 500 27px/75px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.checkout-complete-container > div > span:nth-child(3) {
    margin-top: 47px;
    font: normal normal normal 18px/75px CF Asty Std;
    letter-spacing: 0.36px;
    color: #081E46;
    opacity: 1;
}

.checkout-complete-container > div > div {
    height: 60px;
    padding: 0 95px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    text-align: center;
    font: normal normal 500 18px/60px CF Asty Std;
    letter-spacing: 0.36px;
    color: #0D6AA0;
    opacity: 1;
    opacity: 1;
}

@media screen and (max-width: 500px) {
    .checkout-complete-container > div > div {
        padding: 0 50px;
    }
}

.checkout-complete-container > div > span:nth-child(5) {
    margin-top: 47px;
    font: normal normal 500 19px/75px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
    opacity: 1;
}

.checkout-complete-container > div > a > .btn.btn-warning {
    margin-top: 28px;
    width: 241px;
    height: 50px;
    font: normal normal 500 14px/32px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

/*********************************
** END OF CHECKOUT CONFIRMATION **
*********************************/

/*************
** REGISTER **
*************/
.register-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.register-img-container.card {
    border: none;
}

.register-img-container.card .card-img-overlay {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.register-img-container.card .card-title {
    max-width: 650px;
    text-align: center;
    font: normal normal 500 33px/45px CF Asty Std;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .register-img-container.card .card-title {
        display: none;
    }
}

.register-img-container.card .card-text {
    max-width: 650px;
    text-align: center;
    font: normal normal normal 16px/25px CF Asty Std;
    letter-spacing: 0.32px;
    color: #FFFFFF;
    opacity: 0.8;
}

@media screen and (max-width: 768px) {
    .register-img-container.card .card-text {
        display: none;
    }
}

.register-form-container {
    max-width: 650px;
    width: 100%;
    margin-top: 70px;
    margin: 70px auto; /* 70px 120px(6.250vw) */
}

@media screen and (max-width: 768px) {
    .register-form-container {
        margin: 70px 0;
        padding: 0 6.250vw; /* 70px 120px */
    }
}

.register-form-title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.register-form-title span {
    font: normal normal 500 27px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.register-form-title p {
    margin-top: 25px;
    font: normal normal normal 14px/24px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

.register-form-container form {
    margin-top: 35px;
}

.register-form-container .form-check {
    display: inline-block;
}

.register-form-container .form-check + p {
    display: inline-block;
    vertical-align: top;
}

.register-form-container .register-form-section-title {
    margin-top: 30px;
    margin-bottom: 10px;
    font: normal normal 500 18px/25px CF Asty Std;
    letter-spacing: 0.36px;
    color: #081E46;
}

.register-form-container .accordion {
    margin-bottom: 32px;
}

.register-form-container .accordion > .register-form-toggle {
    height: 80px;
    margin-top: 45px;
    padding: 0px 50px;
    background: #F7F7F9 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font: normal normal 500 18px CF Asty Std;
    letter-spacing: 0.36px;
    color: #081E46;
    opacity: 1;
    cursor: pointer;
}

.register-form-container .accordion > .register-form-toggle p {
    position: relative;
    top: 50%;
    transform: translateY(-17%);
}

.register-form-container .register-form-toggle > svg.down {
    transform: rotate(0deg);
    transition: all 0.3s;
}

.register-form-container .register-form-toggle > svg.up {
    transform: rotate(180deg);
    transition: all 0.3s;
}

.register-form-container .form-group > span {
    font: normal normal normal 12px/14px CF Asty Std;
    letter-spacing: 0px;
    opacity: 0.45;
    color: #081E46;
}

.register-form-container .register-form-group-margin-top.form-group {
    margin-top: 65px;
}

.register-form-container .form-control::placeholder {
    font: normal normal normal 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.register-form-container .form-control {
    font: normal normal 500 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #0D6AA0;
}

.register-form-container .form-control.preview {
    color: #081E46;
}

.register-form-container .form-control:focus {
    font: normal normal normal 14px/17px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.register-form-container .invalid-feedback {
    text-align: left;
}

.register-form-terms-and-policy {
    display: flex;
    font: normal normal normal 12px/18px CF Asty Std;
    letter-spacing: 0.24
}

.register-form-terms-and-policy p.is-invalid {
    color: #dc3545;
}

.register-form-footer-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .register-form-footer-controls {
        flex-direction: column;
    }
}

@media screen and (max-width: 450px) {
    .register-form-captcha-container > div {
        transform: scale(0.7);
    }
}

.register-form-container .btn.btn-warning {
    padding: 16px 110px;
    border-radius: 8px;
    font: normal normal 500 15px CF Asty Std;
    letter-spacing: 0px;
}

@media screen and (max-width: 768px) {
    .register-form-container .btn.btn-warning {
        margin-top: 10px;
        padding: 16px 14.323vw; /* 16px 110px */
    }
}

/********************
** END OF REGISTER **
********************/

/****************************
** NOTIFICATION COMPONENTS **
****************************/
.toast-container {
    right: 0;
    bottom: 0;
    margin: 20px;
    border-radius: 0.25rem;
}

.toast-container.success {
    background-color: green;
}

.toast-container.danger {
    background-color: red;
}

.toast .d-flex {
    font: normal normal normal 18px CF Asty Std;
}

.toast d-flex.success {
    color: green;
}

.toast d-flex.danger {
    color: red;
}

/***********************************
** END OF NOTIFICATION COMPONENTS **
***********************************/

/******************
** GENERIC PAGES **
******************/
.westnet-generic-page {
    padding: 40px 10.417vw; /* 40px 200px */
    font-family: CF Asty Std;
    color: #081E46;
}

.westnet-generic-page-title {
    margin-bottom: 40px;
}

.westnet-generic-page-title h2 {
    text-align: center;
}

/*************************
** END OF GENERIC PAGES **
*************************/

/***********
** BRANDS **
***********/
.brands-container .brands-header {
    padding: 3.646vw 10.417vw; /* 70px 200px */
    background-color: #F7F7F9;
    text-align: center;
}

@media screen and (max-width: 500px) {
    .brands-container .brands-header {
        padding: 3.646vw 20px; /* 70px 0 */
    }
}

.brands-container .brands-title {
    font: normal normal 500 31px CF Asty Std;
    letter-spacing: 0px;
    color: #081E46;
}

.brands-container .brands-top-categories {
    display: flex;
    justify-content: space-between;
    margin-top: 2.344vw; /* 45px */
}

.brands-container .brands-filters-container {
    margin: 0 10.417vw; /* 200px */
    margin-top: 65px;
    padding: 50px;
    border-radius: 8px;
    background-color: #F7F7F9;
}

@media screen and (max-width: 500px) {
    .brands-container .brands-filters-container {
        margin: 0;
        padding: 20px;
    }
}

.brands-container .brands-filters-container .dropdown {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 1200px) {
    .brands-container .brands-filters-container .dropdown {
        flex-direction: column
    }
}

.brands-container .brands-categories-filter {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.brands-container .brands-categories-filter > span {
    font: normal normal 500 18px CF Asty Std;
    letter-spacing: 0.36px;
    color: #081E46;
}

.brands-container .brands-categories-filter .dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 19px 33px;
    box-shadow: 0px 3px 20px #091D560D;
    border-radius: 10px;
    font: normal normal 500 18px CF Asty Std;
    letter-spacing: 0.36px;
    color: #FFFFFF;
}

.brands-container .dropdown.show .dropdown-toggle.btn.btn-primary {
    border: none;
    background-color: #FFFFFF;
    color: #081E46 !important;
}

.brands-container .dropdown.show .dropdown-toggle.btn.btn-primary:focus {
    box-shadow: none;
}

.brands-container .brands-categories-filter .dropdown-menu.show {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 40px;
    padding-bottom: 60px;
    box-shadow: 0px 3px 20px #091D560D;
    border: none;
    border-radius: 8px;
}

@media screen and (max-width: 500px) {
    .brands-container .brands-categories-filter .dropdown-menu {
        padding: 0;
    }
}

.brands-container .dropdown-item {
    width: fit-content;
    height: fit-content;
    padding: 0;
}

@media screen and (max-width: 500px) {
    .brands-container .dropdown-item {
        transform: scale(0.7);
    }
}

.brands-container .dropdown-item:hover {
    background-color: #FFFFFF !important;
}

.brands-container .brands-categories-filter .brands-category-logo {
    width: 230px;
    height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font: normal normal normal 14px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

.brands-container .brands-categories-filter .brands-category-logo.selected {
    border: 1px solid #0D6AA0;
}

.brands-container .brands-categories-filter .brands-category-logo p {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
}

.brands-container .dropdown-item:hover .brands-category-logo {
    color: #0D6AA0;
}

.brands-container .brands-category-logo > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
}

.brands-container ,.brands-category-logo > div img {
    max-width: 100%;
    max-height: 100%;
}

.brands-container .brands-search-filter {
    flex: 2;
    width: 100%;
    margin-left: 30px;
}

@media screen and (max-width: 1200px) {
    .brands-container .brands-search-filter {
        width: 100%;
        margin-top: 30px;
        margin-left: 0;
    }
}

.brands-container .brands-search-filter > span {
    font: normal normal 500 18px CF Asty Std;
    letter-spacing: 0.36px;
    color: #081E46;
}

.brands-container .brands-search-filter .input-group {
    margin-top: 20px;
    box-shadow: 0px 3px 20px #091D560D;
}

.brands-container .brands-search-filter .form-control {
    height: fit-content;
    padding: 19px 33px;
    border: none;
    border-radius: 10px;
    font: normal normal normal 18px CF Asty Std;
    letter-spacing: 0.36px;
    color: #081E46;
}

.brands-container .brands-search-filter .form-control::placeholder {
    font: normal normal normal 13px/45px CF Asty Std;
    letter-spacing: 0.26px;
    color: #081E46;
    opacity: 0.4;
}

.brands-container .brands-search-filter .input-group-text {
    border: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #FFFFFF;
    color: #081E46;
}

.brands-container .brands-icon-list-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 10.417vw; /* 200px */
    padding: 50px;
}

@media screen and (max-width: 992px) {
    .brands-container .brands-icon-list-container.single-brand-view {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 500px) {
    .brands-container .brands-icon-list-container {
        margin: 0;
        padding: 20px;
    }
}

.brands-container .brands-icon-list-container .brands-brand-logo {
    width: 180px;
    height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px 20px 20px 0px;
    border: 1px solid rgba(8, 30, 70, 0.1);
    border-radius: 8px;
    font: normal normal normal 14px/90px CF Asty Std;
    letter-spacing: 0.28px;
    color: #081E46;
}

.brands-container .brands-icon-list-container .brands-brand-logo:hover {
    border: none;
    box-shadow: 0px 0px 20px -5px;
}

@media screen and (max-width: 992px) {
    .brands-container .brands-icon-list-container.single-brand-view .brands-brand-logo {
        width: 100%;
    }
}

.brands-container .brands-icon-list-container .brands-brand-logo > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
}

.brands-container .brands-icon-list-container .brands-brand-logo img {
    max-width: 100%;
    max-height: 100%;
}

@media screen and (max-width: 500px) {
    .brands-container .brands-icon-list-container .brands-brand-logo {
        transform: scale(0.7);
    }
}

.brands-container .brands-icon-list-container .brands-brand-logo:hover {
    cursor: pointer;
}

.brands-icon-list-container .brand-description {
    display: flex;
    flex-direction: column;
    height: 345px;
    flex: 2;
    margin-left: 20px;
}

@media screen and (max-width: 992px) {
    .brands-icon-list-container.single-brand-view .brand-description {
        width: 100%;
        margin: 0;
    }
}

.brands-icon-list-container .brand-description p {
    max-height: 70%;
    font: normal normal normal 18px/28px CF Asty Std;
    color: #081E46;
    overflow-y: auto;
}

.brands-icon-list-container .brand-description .btn {
    align-self: flex-end;
    width: fit-content;
    padding: 5px 15px;
    font: normal normal 500 16px CF Asty Std;
    border-radius: 10px;
}

@media screen and (max-width: 992px) {
    .brands-icon-list-container.single-brand-view .brand-description .btn {
        width: 100%;
    }
}



/** Brands category card **/
.brands-container .brands-category-card-container {
    width: 25vw; /* 480px */
    height: 20.833vw; /* 400px */
    border-radius: 0.417vw; /* 8px */
    background-color: slategrey;
}

.brands-container .brands-category-card-image {
    height: 100%;
}

.brands-container .brands-category-card-overlay {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 1.823vw; /* 35px */
}

.brands-container .brands-category-card-container .accordion {
    max-height: 100%;
}

.brands-container .brands-category-card-container .collapse.show::-webkit-scrollbar {
    width: 5px;
}

.brands-container .brands-category-card-container .collapse.show::-webkit-scrollbar-track {
    border-radius: 100vw;
    background-color: transparent;
}

.brands-container .brands-category-card-container .collapse.show::-webkit-scrollbar-thumb {
    border-radius: 100vw;
    background-color: #FFFFFF;
}

.brands-container .brands-category-card-container .collapse.show {
    max-width: 23.958vw; /* 460px */
    max-height: 14.583vw; /* 280px */
    overflow-y: auto;
    scrollbar-color: #FFFFFF transparent;
    scrollbar-width: thin;
}

.brands-container .brands-category-card-container .accordion > span:first-child {
    font: normal normal 500 0.938vw/2.344vw CF Asty Std; /* 18px/45px */
    letter-spacing: 0.019vw; /* 0.36px */
    color: #FFFFFF;
}

.brands-container .brands-category-card-collapse {
    display: flex;
    flex-direction: column;
}

.brands-container .brands-category-card-collapse span {
    padding: 0 0.521vw; /* 0 10px */
    font: normal normal normal 0.833vw/1.563vw CF Asty Std; /* 16px/30px */
    letter-spacing: 0.019vw; /* 0.36px */
    white-space: nowrap;
    color: #FFFFFF;
}

/******************
** END OF BRANDS **
******************/



/***************
** BREADCRUMB **
***************/
.breadcrumb {
    padding-left: 2.625rem;
    background-color: #FFFFFF;
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    font: normal normal normal 12px/14px CF Asty Std;
    letter-spacing: 0.24px;
    color: #081E46;
}

.breadcrumb > .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

/**********************
** END OF BREADCRUMB **
**********************/



/*********************
** FULL PAGE LOADER **
*********************/
.full-page-loader-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E7E7E9;
    font: normal normal 500 18px CF Asty Std;
    opacity: 0.7;
    z-index: 99;
}

.full-page-loader-image-container {
    min-width: 250px;
    width: 20%;
    margin-bottom: 16px;
}

.full-page-loader-image-container > img {
    max-width: 100%;
}

.full-page-loader-container .spinner-border {
    margin-bottom: 16px;
}

/****************************
** END OF FULL PAGE LOADER **
****************************/

/***********************
** NOTIFICATION TOAST **
***********************/
.toast-container .toast-body {
    font: normal normal normal 15px CF Asty Std;
}

.toast-container .toast-close-button {
    padding: 5px;
    font: normal normal normal 10px CF Asty Std;
}

/******************************
** END OF NOTIFICATION TOAST **
******************************/





/****************
** NOUI SLIDER **
****************/
.collapse .price-slider {
    display: none;
}

.collapse.show .price-slider {
    display: block;
}

.noUi-horizontal {
    height: 12px;
}

.noUi-connect {
    background-color: var(--bs-primary);
}

.noUi-horizontal .noUi-handle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.noUi-handle:after, .noUi-handle:before {
    display: none;
}

.noUi-tooltip {
    background-color: #F7F7F9;
    color: var(--bs-primary);
}

/***********************
** END OF NOUI SLIDER **
***********************/





/**********************
** FIREFOX SCROLLBAR **
**********************/
* {
    scrollbar-width: thin;
    scrollbar-color: #E6E6E8 #F7F7F9;
}

/*****************************
** END OF FIREFOX SCROLLBAR **
*****************************/

/*********************
** WEBKIT SCROLLBAR **
*********************/
::-webkit-scrollbar {
    width: 10px;
    background-color: #F7F7F9;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #F7F7F9;
    border-radius: 8px;
    background-color: #E6E6E8;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #D5D5D7;
}

/****************************
** END OF WEBKIT SCROLLBAR **
****************************/


/*****************************
** LIGHT GALLERY OVERWRITES **
*****************************/
.lg-backdrop {
    background-color: #FFF;
}
/************************************
** END OF LIGHT GALLERY OVERWRITES **
************************************/