/* Login Popup CSS Starts */

#login_popup_modal .modal-dialog{
    max-width: 1096px;
    /* margin: 5% auto; */
    width: 100%;
}

/* Login Popup CSS Ends */

/* My Account CSS Starts */
.header.is-middle h1{
    font-size: 36px !important;
}
.success-msg-new, .error-msg-new, .warning-msg-new {
    background: none;
    border: none;
    padding: 0;
}
.success-msg-new{
    color: #27953a;
    margin-bottom: 30px;
}
.error-msg-new, .warning-msg-new{
    color: #E54545;
    font-size: var(--font-libre-12);
    line-height: var(--font-libre-12-line-height);
    margin-top: 8px;
    width: 100% !important;
}
a.list-group-item:focus, a.list-group-item:hover{
    background-color: transparent;
    color: var(--color-jet);
}
.account-container, .address-list-content .row{
    margin: 0 !important;
}
.account-container .account-page{
    max-width: 480px;
    width: 100%;
    padding: 0 !important;
}
.account-container #content{
    float: right;
    max-width: 720px;
    width: 100%;
    padding: 0 !important;
}
.account-left-section{
    background-color: var(--color-milk);
    padding: 15px 60px !important;
    margin: 0;
}
.account-left-section .list-group-item{
    background-color: transparent;
}
.account-left-section .list-group-item h3, .account-left-section h3{
    font-family: var(--font-family-ivy);
    font-size: var(--font-ivy-24);
    line-height: var(--font-ivy-24-line-height);
    margin: 0;
    text-transform: capitalize;
}
.account-left-section h3.h1_size{
    padding: 15px 0 0;
    text-transform: lowercase;
    color: #4B3914;
}
.account-left-section h3.h1_size::first-letter{
    text-transform: uppercase;
}
.account-left-section #signin_tabcart{
    margin: 0 0 15px;
}
.existing-login-text{
    margin: 15px 0 !important;
    color: #4B3914;
}
.account-left-section a{
    padding: 15px 0;
}
.account-left-section #signup_tabcart, .account-left-section #signin_tabcart{
    width: 100%;
    font-size: var(--font-libre-14);
    line-height: var(--font-libre-14-line-height);
    font-weight: var(--font-weight-regular);
}
.reorder-btn{
    padding: 0 !important;
    text-align: right;
}
.Inputgroup.form-group select, .Inputgroup.form-group input {
    background: 0 0;
    border-bottom: 1px solid var(--color-jet) !important;
    border: 0;
    border-radius: 0;
    box-shadow: none!important;
    width: 100%;
    /* height: 32px; */
    /* padding: 0px 0px 8px; */
    color: var(--color-black);
}
.Inputgroup.form-group{
    flex-direction: row;
    gap: 0 30px;
}
.account-container .Inputgroup label{
    color: var(--color-jet) !important;
}
.title-dropdown-div, .gender-dropdown-div{
    width: 50%;
}
.account-container .Inputgroup.form-group::after, .account-container .Inputgroup.form-group::before,
.account-container::after, .account-container::before{
    display: none;
}
.account-container{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-bottom: 0;
}
.myaccount-content h2, .change-password-content h2, .newsletter-content h2, .address-list-content h2, .address-form-content h2,
.order-list-content h2, .order-info-content h2, .wishlist-content h2, .wishlist_subtitle,
.myaccount-content .form-horizontal .form-group, .change-password-content .form-horizontal .form-group, 
.address-form-content .form-horizontal .form-group, .newsletter-content .form-horizontal .form-group, .preference-text, 
.delete-account-content h2, .delete-account-content .form-horizontal .form-group {
    margin: 0 0 30px !important;
}
.update-btn a, .wishlist-btns a{
    text-transform: lowercase;
    padding: 16px 0;
}
.order-info-content .update-btn a, .reorder-btn a{
    text-transform: lowercase;
    padding: 16px 40px;
}
.update-btn a:first-letter, .wishlist-btns a:first-letter, .reorder-btn a:first-letter{
    text-transform: capitalize;
}
.myaccount-content [class*=col-], .change-password-content [class*=col-], .address-list-content [class*=col-],
.address-form-content [class*=col-], .delete-account-content [class*=col-]{
    padding: 0 !important;
}
.order-list-content .row{
    margin: 0;
}
.mandatory-text{
    margin: 30px 0 0;
}
.update-btn input, .update-btn a{
    width: 100%;
}
.order-info-content .update-btn a{
    width: auto;
}
.empty-address, .empty-order{
    margin: 30px 0 !important;
}

.address-update-btns{
    display: flex;
    gap: 0 30px;
    margin: 30px 0;
}
.address-update-btns a{
    width: 50%;
}
.address-form-content .address-default-radio label{
    font-weight: var(--font-weight-regular);
}
.addressform .mandatory-text{
    margin: 30px 0;
}
.default-text{
    width: 124px;
    padding: 0;
}
.default-radios label, .newsletter-radio label{
    align-items: center;
    margin-right: 30px;
    font-size: var(--font-libre-16);
    line-height: var(--font-libre-16-line-height);
}
.default-radios .radio-yes, .newsletter-radio label{
}

.wishlist-product-details{
    display: flex;
    gap: 0 34px;
}
.wishlist-product-details .wishlist_box1{
    max-width: 260px;
}
.wishlist-product-details .wishlist_box2{
    max-width: 426px;
    width: 100%;
}
h3.wishlist_pname{
    font-family: var(--font-family-ivy);
    font-size: var(--font-ivy-28);
    line-height: var(--font-ivy-28-line-height);
    margin: 0;
}
.whishlist_details{
    margin: 17px 0;
    color: #000;
}
.wishlist_pnumber{
    color: #000;
}
.wishlist_prd_left, .wishlist_prd_right {
    letter-spacing: .5px;
    line-height: var(--font-libre-16-line-height);
    display: table-cell;
    width: 55%;
}
.wishlist_prd_right{
    font-weight: var(--font-weight-semi-bold);
}
.wishlist_box3{
    display: flex;
    justify-content: space-between;
    gap: 0 30px;
    margin: 30px 0;
}
.wishlist_box3 .wishlist-btns, .wishlist-btns a{
    width: 100%;
    font-size: var(--font-libre-14);
    line-height: var(--font-libre-14-line-height);
}
.newsletter-radio .radio-brown input[type="radio"] + i{
    margin: 0;
}
.orderHistory{
    background-color: var(--color-milk);
    /* height: 52px; */
    padding: 0;
}
.orderHistory ul li {
    float: left;
    text-align: center;
    padding: 16px 0;
    line-height: var(--font-libre-16-line-height);
    font-weight: var(--font-weight-semi-bold);
    word-wrap: break-word;
}
.order-list-header{
    display: flex;
    gap: 0 16px;
    padding-left: 16px;
    align-items: center;
}
.orderDetails ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: center;
}
.orderDetails{
    padding-left: 16px;
    margin-top: 30px;
}
.pro{
    width: 37%;
    text-align: left !important;
}
.act, .reorder{
    width: 13%;
}
.order-view-btn{
    padding: 10px 26px;
    font-size: var(--font-libre-16);
    line-height: var(--font-libre-16-line-height);
}
.amount, .noOfProd, .ord, .ordDate, .status{
    width: 100px;
}
.order-details{
    margin-bottom: 30px;
}
.order-details p {
    margin: 0;
    display: flex;
    gap: 0 16px;
    font-size: var(--font-libre-14);
    line-height: var(--font-libre-14-line-height);
    color: #000;
}
.order-details .order-left{
    width: 120px;
    font-weight: var(--font-weight-semi-bold);
}

.address-detail-header, .product-detail-header{
    background-color: var(--color-milk);
}
.order-info-content .address-detail-table{
    margin-bottom: 30px;
}
.product-detail-table{
    margin-bottom: 0;
}
.order-info-content .table, .order-info-content .thead, .order-info-content .table-bordered td{
    border: none;
}
.order-info-content .table>thead>tr>td, .order-info-content .table>tbody>tr>td{
    padding: 16px 0;
    padding-left: 16px;
}
.prod-img, .product-detail-options img{
    width: 100px;
}
.product-detail-header .model-no, .product-detail-header .quantity, .product-detail-header .prod-price, .product-detail-header .prod-total-price{
    width: 80px;
}
.order-info-content .table>tbody>tr>td{
    font-size: var(--font-libre-14);
    line-height: var(--font-libre-14-line-height);
}
.prod-specification p{
    margin: 0 0 5px;
}
.grand-total-section{
    padding: 16px 0;
}
.total-amount {
    display: flex;
    gap: 0 16px;
    justify-content: flex-end;
    margin-right: 31px;
}
.total-amount:not(:last-child){
    margin-bottom: 16px;
}
.total-amount p{
    width: 155px;
    font-size: var(--font-libre-14);
    line-height: var(--font-libre-14-line-height);
    margin: 0;
}
.total-amount .font-semibold{
    font-weight: var(--font-weight-semi-bold);
}
.order-info-btn{
    display: flex;
    gap: 0 30px;
    margin-top: 30px;
    justify-content: flex-end;
}

/* Talkable content CSS */
#talkable-offer .campaign.is-dashboard .preheader{
    font-family: var(--font-family-ivy) !important;
    font-size: var(--font-ivy-36) !important;
    line-height: var(--font-ivy-36-line-height) !important;
}
/* Talkable content CSS */

/* Dropdown CSS */

.title-dropdown, .gender-dropdown, .country-dropdown {
    background-color: transparent;
}
.title-dropdown li, .gender-dropdown li, .country-dropdown li{
    margin-bottom: 2px;
}
.title-dropdown .selectpicker, .gender-dropdown .selectpicker, .country-dropdown .selectpicker{
    border: none;
    background: transparent;
    box-shadow: none;
}

.title-dropdown option, .gender-dropdown option, .country-dropdown option {
    background-color: #fff;
    color: #333;
}
.bootstrap-select.btn-group .btn .caret{
    display: none;
}

.title-dropdown ul li:hover a span, .gender-dropdown ul li:hover a span, .country-dropdown ul li:hover a span{ 
    color: var(--color-jet); 
}
.title-dropdown, .gender-dropdown, .country-dropdown {
	border: none;
	color: var(--color-jet);
	font-size: 16px;
	line-height: 20px;
	/*padding-bottom: 8px !important;*/
    background-image: url('/catalog/view/theme/default/image/icons/down_caret_old.png') !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
	background-size: 15px;
	appearance: none;
	-moz-appearance: none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
	font-weight: 600;
	margin-bottom: 0 !important;
    transition: all .4s ease;
}
.title-dropdown.open, .gender-dropdown.open, .country-dropdown.open{
    background-image: url('/catalog/view/theme/default/image/icons/up_caret.png') !important;
    transition: all .4s ease;
    background-repeat: no-repeat;
}
.title-dropdown .btn, .gender-dropdown .btn, .country-dropdown .btn {
    border: none;
    padding: 0px 0px 8px;
    background: transparent !important;
    box-shadow: none;
    border-bottom: 1px solid var(--color-jet);
}
.country-dropdown .dropdown-menu{ 
    height: 543px; 
    min-width: 610px !important;
}
.bootstrap-select.btn-group .dropdown-menu, .title-dropdown .dropdown-menu, .gender-dropdown .dropdown-menu, .country-dropdown .dropdown-menu{ 
    padding: 0 ; 
    margin-top: 3px;
    /* left: -30px; */
    border-radius: 0;
    /* scrollbar-width: none; */
}
.title-dropdown .dropdown-menu .selectpicker, .gender-dropdown .dropdown-menu .selectpicker, 
.country-dropdown .dropdown-menu .selectpicker{ 
    padding: 0px 0px 0px ; 
}
.title-dropdown .dropdown-menu>li>a:focus, .gender-dropdown .dropdown-menu>li>a:focus, .country-dropdown .dropdown-menu>li>a:focus{ 
    background:transparent; 
}
.title-dropdown .btn:hover, .gender-dropdown .btn:hover, .country-dropdown .btn:hover {
    background: transparent !important;
    color: var(--color-jet) !important
}
.bootstrap-select.btn-group .btn .caret{ display:none; }
.title-dropdown .btn:focus, .gender-dropdown .btn:focus, .country-dropdown .btn:focus {
    outline: none !important;
    box-shadow: none;
    color: var(--color-jet) !important;
}
.bootstrap-select.btn-group .btn .caret{ display:none; }
.bootstrap-select:not([class*=span]):not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}
.title-dropdown .glyphicon-ok:before, .gender-dropdown .glyphicon-ok:before, .country-dropdown .glyphicon-ok:before{ content:""; }
.title-dropdown .dropdown-menu, .gender-dropdown .dropdown-menu, .country-dropdown .dropdown-menu{ z-index: 999 !important; } 
/* .title-dropdown .filter-option, .gender-dropdown .filter-option, .country-dropdown .filter-option{ font-size: 14px; line-height: 22px; } */
.title-dropdown .dropdown-menu a, .gender-dropdown .dropdown-menu a, .country-dropdown .dropdown-menu a{ 
    font-size: var(--font-libre-14);
    line-height: var(--font-libre-14-line-height);
    padding: 8px 16px;
}
.btn-group.open .dropdown-toggle{
    box-shadow: none;
}
.title-dropdown .dropdown-menu>li>a:hover, .title-dropdown .dropdown-menu>li>a:hover span, .title-dropdown .selected,
.gender-dropdown .dropdown-menu>li>a:hover, .gender-dropdown .dropdown-menu>li>a:hover span, .gender-dropdown .selected, 
.country-dropdown .dropdown-menu>li>a:hover, .country-dropdown .dropdown-menu>li>a:hover span, .country-dropdown .selected{
    background: var(--color-milk);
}

/* .title-dropdown .selected span.text {
    color: var(--color-brown);
    font-weight: 600;
} */
#login_popup_modal .text{
    float: none;
    padding: 0;
}
/* Dropdown CSS */

.update-btn input, .update-btn a, .address-update-btns a{
    font-size: var(--font-libre-14);
    line-height: var(--font-libre-14-line-height);
    font-weight: var(--font-weight-semi-bold);
}
.address-detail-header .font-semibold, .product-detail-header .font-semibold{
    font-size: var(--font-libre-14);
    line-height: var(--font-libre-14-line-height);
    font-weight: var(--font-weight-semi-bold);
}

.flex-column{
    flex-direction: column !important;
}
.not-logged-section #signup_tabcart, .not-logged-section #signin_tabcart {
    cursor: pointer;
}
@media screen and (min-width: 1280px)  {
    .Inputgroup.form-group, .title-dropdown .filter-option, .gender-dropdown .filter-option, .country-dropdown .filter-option,
    .Inputgroup.form-group input, .Inputgroup.form-group .floating-label, .Inputgroup.form-group .message-label{
        font-size: var(--font-libre-16) !important;
        line-height: var(--font-libre-16-line-height) !important;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1400px){
    .account-container .account-page{
        width: 35%;
    }
    .account-container #content{
        width: 60%;
    }
}
@media screen and (max-width: 1024px)  {
    #login_popup_modal .modal-dialog{
        max-width: 90%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1024px)  {
    .account-container #content{
        max-width: 580px;
    }
    .account-container .account-page{
        max-width: 330px;
    }
    .account-left-section{
        padding: 15px 30px !important;
    }
    .orderDetails ul{
        justify-content: flex-start;
        gap: 0 12px;
    }
    .orderDetails ul li{
        font-size: var(--font-libre-14);
        line-height: var(--font-libre-14-line-height);
    }
    .pro{
        width: 30%;
    }
    .amount, .noOfProd, .ord, .ordDate, .status{
        width: 85px;
    }
    .wishlist-product-details .wishlist_box1{
        max-width: 230px;
    }
}
@media screen and (max-width: 992px)  {
    .account-container{
        flex-direction: column-reverse;
        gap: 30px 0;
    }
    .account-container .account-page{
        max-width: 100%;
    }
    .account-left-section{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0 30px;
        padding: 15px 30px !important;
    }
    .account-left-section.list-group{
        height: auto;
    }
    .account-left-section.list-group a{
        width: 30%;
        margin: 0;
    }
    .account-left-section .list-group-item h3, .account-left-section h3{
        font-size: var(--font-ivy-20);
        line-height: var(--font-ivy-20-line-height);
    }
    .Inputgroup.form-group, .title-dropdown .filter-option, .gender-dropdown .filter-option, .country-dropdown .filter-option,
    .Inputgroup.form-group input, .Inputgroup.form-group .floating-label, .Inputgroup.form-group .message-label, .addressform .mandatory-text{
        font-size: var(--font-libre-14) !important;
        line-height: var(--font-libre-14-line-height) !important;
    }
}
@media screen and (max-width: 767px)  {
    .account .account-page{
        display: block !important;
    }

    #login_popup_modal .modal-dialog{
       
        margin: 5% auto;
      
    }
    .account-left-section.list-group{
        justify-content: space-between;
        padding: 16px !important;
        gap: 30px 16px;
        margin: 0 -16px;
        /* flex-direction: row-reverse; */
        /* flex-flow: column wrap; */
        /* height: 309px;
        display: flex !important;
        align-items: start;
        justify-content: flex-start; */
    }
    .account-left-section.list-group a{
        width: 47%;
    }
    .my-account{ 
        order: 2;
    }
    .edit-password{ 
        order: 4;
    }
    .edit-address{ 
        order: 6;
    }
    .order-info{ 
        order: 8;
    }
    .referral-reward{ 
        order: 1;
    }
    .wishlist-info{ 
        order: 3;
    }
    .edit-newsletter{ 
        order: 5;
    }
    .logout-btn{ 
        order: 7;
    }
    .delete-account{ 
        order: 9;
    }
    .myaccount-content .Inputgroup.form-group.select-dropdown, .address-form-content .Inputgroup.form-group.select-dropdown{
        flex-direction: column !important;
        gap: 30px 0;
    }
    .address-default-radio i{
        margin: 0 !important;
    }
    .title-dropdown-div, .gender-dropdown-div, .change-password-content [class*=col-], .delete-account-content [class*=col-]{
        width: 100%;
    }
    .success-msg-new{
        text-align: center;
        font-size: var(--font-libre-14);
        line-height: var(--font-libre-14-line-height);
    }
    .orderDetails{
        padding: 0;
    }
    .orderDetails ul{
        flex-direction: column;
        gap: 16px 0;
    }
    .orderDetails ul li{
        display: flex;
        width: 100%;
        gap: 0 16px;
    }
    .orderDetails ul li.act{
        align-items: center;
    }
    .orderDetails ul li div, .orderDetails ul li span{
        width: 50%;
        text-align: left;
    }
    .order-view-btn{
        width: 50%;
    }
    .orderDetails ul li div{
        font-weight: var(--font-weight-semi-bold);
    }
    .order-list-content h2{
        margin: 0 !important;
    }
    .order-info-content .table-responsive{
        border: none;
    }
    .prod-img img{
        width: 100px;
    }
    .order-info-mob{
        background-color: var(--color-milk);
        display: flex;
        gap: 16px;
        margin: 0 -16px;
        padding: 16px;
        flex-direction: column;
    }
    .order-info-prod-details {
        display: flex;
        gap: 0 16px;
    }
    .product-detail-mob p{
        font-size: var(--font-libre-14);
        line-height: var(--font-libre-14-line-height);
    }
    .product-detail-mob .font-semibold, .address-details-mob .font-semibold{
        font-weight: var(--font-weight-semi-bold);
    }
    .product-detail-mob p{
        margin: 0;
    }
    .product-detail-mob p:not(:last-child){
        margin-bottom: 16px;
    }
    .product-detail-options{
        margin-bottom: 5px !important;
    }
    p.model-no.font-semibold{
        margin: 16px 0;
    }
    .grand-total-section{
        padding: 30px 0;
    }
    .total-amount{
        margin-right: 0;
    }
    .total-amount p{
        width: 163px;
        text-align: left;
    }
    .total-amount .font-semibold{
        text-align: right;
    }
    .order-info-btn{
        flex-direction: column;
        gap: 16px 0;
        margin: 0;
    }

    .billing-address, .shipping-address{
        display: flex;
        margin-bottom: 30px;
    }
    .address-details-mob p {
        width: 50%;
        margin: 0;
        font-size: var(--font-libre-14);
        line-height: var(--font-libre-14-line-height);
    }

    .wishlist-product-details{
        flex-direction: column;
        gap: 30px 0;
    }
    .wishlist-product-details .wishlist_box1{
        max-width: 100%;
    }
    h3.wishlist_pname{
        font-size: var(--font-ivy-24);
        line-height: var(--font-ivy-24-line-height);
        text-align: center;
    }
    .mandatory-text, .wishlist-content p, .preference-text, .empty-order, .empty-address{
        text-align: center;
    }
    .wishlist_box3{
        flex-direction: column;
        gap: 15px 0;
    }
    .wishlist_plist{
        display: flex;
        gap: 0 28px;
    }
    .wishlist_prd_left, .wishlist_prd_right{
        font-size: var(--font-libre-12);
        line-height: var(--font-libre-12-line-height);
    }
    .whishlist_details{
        margin: 16px 0;
    }
    .wishlist_pnumber{
        font-size: var(--font-libre-12);
        line-height: var(--font-libre-12-line-height); 
        text-align: center;
    }
    .newsletter-radio-btns{
        display: flex;
        gap: 0 30px;
    }
    .newsletter-radio label{
        margin: 0;
    }
    .newsletter-radio label{
        font-size: var(--font-libre-14);
        line-height: var(--font-libre-14-line-height);
    }
    .country-dropdown .dropdown-menu {
        min-width: 100% !important;
    }
    .country-dropdown-input .col-sm-12{
        width: 100%;
    }
    .account-left-section h3.h1_size{
        padding: 0;
    }
    .not-logged-section{
        margin: 8px 30px;
    }
    .account-left-section #signup_tabcart, .account-left-section #signin_tabcart{
        padding: 12px 40px;
    }
    .register-text{
        margin: 12px 0;
    }
    .register-text p{
        font-size: var(--font-libre-14);
        line-height: var(--font-libre-14-line-height);
    }
}
/* My Account CSS Ends */

/* Login Popup */

input.has-value + .floating-label{
    top: -15px !important;
    bottom: 0px;
    left: 0px;
}

#login_popup_modal .modal-header, #login_popup_modal .modal-body{
    max-width: 624px;
    margin: auto;
    border: none;
    padding: 0;
}
#login_popup_modal .modal-content {
    padding: 15px 15px 60px !important;
    border-radius: 0;
    max-height: calc(100vh - 60px);
    overflow: auto;
}

#login_popup_modal .modal-header h2{
    font-family: var(--font-family-ivy);
    font-size: var(--font-ivy-30);
    line-height: var(--font-ivy-30-line-height);
    text-align: center;
    padding: 45px 0 30px;
}
.login-register-radio{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 30px;
}
#loginFormFields .Inputgroup.form-group, #registerForm .Inputgroup.form-group{
    margin-bottom: 30px;
}
#loginFormFields .Inputgroup.form-group{
    flex-direction: column;
}
.register-text{
    padding: 0;
    margin: 15px 0;
}
#loginFormFields .Inputgroup.form-group input, #registerForm .Inputgroup.form-group input{
    /* padding: 0 0 10px; */
    border-bottom: 1px solid var(--color-jet) !important;
}
#loginFormFields .Inputgroup.form-group .floating-label, #registerForm .Inputgroup.form-group .floating-label{
    color: var(--color-jet);
}
.forgot-password-link{
    margin-top: 8px;
    color: var(--color-jet);
    font-weight: var(--font-weight-semi-bold);
    width: max-content;
}
#back-to-login{
    margin-bottom: 8px;
    color: var(--color-jet);
    font-weight: var(--font-weight-semi-bold);
}
#back-to-login img{
    margin-right: 10px;
}
#button-login-msg, #button-register-msg{
    text-align: center;
}
#button-login-msg input, #button-register-msg input{
    padding: 12px 26px !important;
}
.name-fields{
    display: flex;
    flex-direction: column;
    gap: 0 30px;
}
.name-fields .Inputgroup.form-group{
    flex-direction: column !important;
}


#registerForm .newsletter_new, #registerForm .tnc_agree{
    margin-top: -15px;
}
#registerForm .Inputgroup.form-group span{
    font-size: var(--font-libre-14);
    line-height: var(--font-libre-14-line-height);
}
.account-active h3{
    color: var(--color-brown);
    text-decoration: underline;
    text-underline-offset: 8px;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

.captcha-div, #button-forget-msg{
    max-width: max-content;
    margin: auto;
    margin-top: 30px;
}
.tnc_agree a{
    color: var(--color-jet);
}
@media screen and (min-width: 768px)  {
    #registerForm .register-name-field, #registerForm .title-gender-dropdown{
        flex-direction: row;
    }
    .register-name-field div, .title-gender-dropdown div{
        width: 50%;
    }
    .name-fields{
        flex-direction: row;
        gap: 0 30px;
    }
    .name-fields div{
        width: 50%;
    }
    .name-fields .Inputgroup.form-group{
        gap: 0;
    }
}

@media screen and (max-width: 767px)  {
    .login-register-radio{
        flex-direction: column;
        gap: 15px 0;
    }
    #registerForm .Inputgroup.form-group.title-gender-dropdown{
        gap: 30px 0;
        flex-direction: column;
    }
    #registerForm .Inputgroup.form-group span{
        font-size: var(--font-libre-12);
        line-height: var(--font-libre-12-line-height);
    }
    #login_popup_modal .modal-header h2{
        font-size: var(--font-ivy-24);
        line-height: var(--font-ivy-24-line-height);
        padding: 0px 0 30px;
    }
    .check-brown input[type="checkbox"] + i + span, .radio-brown input[type="radio"] + i + span, .address-style{
        font-size: var(--font-libre-14);
        line-height: var(--font-libre-14-line-height);
    }
}

/* =============== Loging and Register css 
========================================= */
.loginandregsec{
    padding-bottom: 0px !important;
}

.loginandregister{
    display: flex; gap: 60px;
}

.loginPanel-left, .loginPanel-right{
    max-width: 630px; width: 100%;
}

.loginandregister .section-header{ margin-bottom: 30px;}
.loginandregister .section-header h2{ text-transform: none;}

.loginandregister .Inputgroup.form-group{
    margin-bottom: 30px;
}

.loginandregister .forgot{
    text-align: center; color: var(--color-jet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

.loginandregister .btn-lg{
    width: 100%;
}

.loginandregister .Inputgroup.form-group .floating-label{
    color: var(--color-jet);
}

.loginandregister  .Inputgroup.form-group input{
    border-bottom: 1px solid var(--color-jet) !important;
}

.loginandregister .Inputgroup.form-group input:focus ~ .floating-label{
    color: var(--color-jet);
}

#forgot .modal-dialog .modal-content{ border-radius: 0px; }
#forgot .modal-dialog .modal-content .modal-header{ border-bottom: 0px; }
#forgot .modal-dialog .modal-content .modal-body{ padding: 0px 30px 60px; }

#forgot h3{
    font-family: var(--font-family-ivy);
    font-size: var(--font-ivy-30);
    line-height: var(--font-ivy-30-line-height);
    margin: 0px 0px 30px;
    color: var(--color-jet);
    text-align: center;
}

#forgot .modal-body p{ font-size: var(--font-libre-14); text-align: center;
    line-height: var(--font-libre-14-line-height); margin:0 0 30px; }

#forgot form{ text-align: center;}

#forgot .modal-dialog .modal-content .modal-header .close {
   opacity: 1;
}

.loginandregister .error_login, .loginandregister .error_register, .loginandregister  .error_forgot{
    margin-top: 8px;
}

@media screen and (min-width: 768px)  {
    .gender-dropdown{
        max-width: 198px; width: 100%;
    }
    .loginandregister .loginPanel-right{
        padding-top: 12px;
    }
}

@media screen and (max-width: 767px)  {
    .loginandregister{
        gap: 30px;
        flex-wrap: wrap;
    }   
   
    .loginandregister .check-brown input[type="checkbox"] + i + span{
        font-size: 12px;
    }

    .loginandregister .forgot{
         margin-top: -22px;
    }

    .loginandregister .btn-lg{
        font-size: var(--font-libre-14);
        line-height: var(--font-libre-14-line-height);
        padding: 12px 40px;
    }

    .loginandregister .signin #passwords + .error_login{
        margin-bottom: 24px; 
    }

    #forgot h3{
        font-size: var(--font-ivy-24);
        line-height: var(--font-ivy-24-line-height);
        margin-top: -15px;
    }

    #forgot .modal-dialog .modal-content .modal-body{
        padding: 0px 16px 15px;
    }
    #forgot .modal-dialog .modal-content .modal-header{
        position: relative;
        z-index: 99;
    } 
}


/* =============== Loging and Register css end
============================================= */