
/*-- From common elements css --*/
@import url("./elements/_fonts.css?v=63636112");
@import url("./elements/_color.css?v=63636112");
@import url("./elements/_animations.css?v=63636112");
@import url("./elements/_reset.css?v=63636112");
@import url("./elements/_header.css?v=63636112");
@import url("./elements/_footer.css?v=63636112");
@import url("./elements/_search.css?v=63636112");
@import url("./elements/_selectbox.css?v=63636112");
@import url("./elements/_transitions.css?v=63636112");
@import url("./elements/_formidable.css?v=63636112");
@import url("./elements/_newsletter-modal.css?v=63636112");
@import url("./elements/swiper-bundle.min.css?v=63636112");
@import url("./elements/_swiper-pagination.css?v=63636112");
@import url("./elements/_geo-lander-modal.css?v=63636112");

@import url("./sections/_popular-brands-section.css?v=63636112");


.create-ac-main{text-align: left;}
.create-ac-main h1{margin-bottom: 22px;}
form.create-ac-form input{padding: 15px 23px 15px; border: 1px solid var(--Beige);}
.create-ac-field{margin-bottom: 11px;}
body .selectBox-dropdown span.selectBox-label{opacity: 0.5;}

.create-ac-field ul li{margin-bottom: 0;}
.create-ac-field ul li::before{content: ""; position: absolute; width: 3px; height: 3px; background: var(--Deep-Teal); border-radius: 50%; top: 9px; left: -10px;}
.create-ac-field ul li::marker{display: none;}

span.info-circle{width: 16px;height: 16px; top: 3px; right: 24px; background-image: url('../images/info-circle.svg'); background-repeat: no-repeat; background-size: contain;}

.create-ac-connect{padding: 20px 0 0;}
.create-ac-or{margin-bottom: 20px;}
.connect-btns{gap: 10px; padding-bottom: 10px;}
.create-ac-by a{color: var(--Deep-Teal);}
.create-ac-by a:hover{text-decoration-color: var(--Golden-Yellow);}


.alrdy-hv-ac .txt{flex: 1; gap: 32px;}
.alrdy-hv-ac .txt p, .alrdy-hv-ac .txt hr{margin-bottom: 0; width: fit-content;}
.alrdy-hv-ac .txt hr{width: 100%; flex: 1;}
.alrdy-hv-ac .lnk{width: fit-content; margin-left: auto;}

/* plugin css */
.create-ac-main.no_um_form{padding: 80px 0 80px;}
.create-ac-main .um-row._um_row_1 {margin:  0 0 20px!important}
.create-ac-main .um-form .um-col-1 #um_field_1421_first_name{padding: 0;}
.create-ac-main .um.um-register{max-width: 460px; margin: 0 auto 0 !important;}
.create-ac-main .um-form form .um-row .um-field .um-field-area input{ padding: 15px 23px 15px !important; border: 1px solid var(--Beige) !important; border-radius: 24px; height: auto !important; color: var(--Deep-Teal); font-family: var(--body-font);}
.create-ac-main .um-form form .um-row .um-field .um-field-label{margin: 0 0 4px 0;}
.create-ac-main .um-form form .um-row .um-field .um-field-label label{color: var(--Deep-Teal); padding: 0; font-size: 16px !important; line-height: 24px !important; font-weight: 500;}
.create-ac-main .um-form form .um-row .um-field .um-field-label label span{font-weight: 400;}
.create-ac-main .um-form form .um-row .um-field .um-field-area input::placeholder{color: var(--Deep-Teal);}
.create-ac-main .um-form form .um-row .um-field .um-col-alt { margin: 30px 0 5px 0; }
.create-ac-main .um-form form .um-row .um-field .um-field-area input:autofill,
.create-ac-main .um-form form .um-row .um-field .um-field-area input:-moz-autofill,
.create-ac-main .um-form form .um-row .um-field .um-field-area input:-webkit-autofill{background-color: var(--White); color: var(--Deep-Teal); -webkit-text-fill-color: var(--Deep-Teal); }

.create-ac-main .um-form form .um-field.um-field-select .um-field-label  label{color: var(--Deep-Teal); padding: 0;}
.create-ac-main .um-form form .um-field.um-field-select .um-field-area span .select2-selection{  height: 50px; border: 1px solid var(--Beige) !important; border-radius: 24px!important;} 
.create-ac-main .um-form form .um-field.um-field-select .um-field-area span.select2-container--open .select2-selection{border-radius: 0 !important;}


.create-ac-main .um-form form .um-field.um-field-select .um-field-area span .select2-selection .select2-selection__arrow{ right: 23px; top: calc(50% + 1px); transform: translateY(-50%); position: absolute; width: 16px !important; height: 16px !important; background-image: url('../images/chevron-right.svg') !important; background-repeat: no-repeat !important; background-size: contain !important; }
.create-ac-main .um-form form .um-field.um-field-select .um-field-area span.select2-container--open .select2-selection .select2-selection__arrow{ transform: translateY(-100%) rotate(180deg); top: calc(50% + 10px); }
.create-ac-main .um-form form .um-field.um-field-select .um-field-area span .select2-selection .select2-selection__arrow::before{display: none !important;}

.create-ac-field p{margin-bottom: 0; color: var(--Deep-Teal)}
.create-ac-field ul{margin: 0 0 20px 18px; color:  var(--Deep-Teal)}

#nsl-custom-login-form-1 .nsl-separator::before, #nsl-custom-login-form-1 .nsl-separator::after{display: none;}
#nsl-custom-login-form-1 .um-field:nth-child(3){padding: 0;}

/* button css */
.create-ac-main .um.um-register .um-col-alt #um-submit-btn{width: 100%!important; border-radius: 24px!important; background-color: var(--Deep-Teal); color: var(--White); font-weight: 500 !important; padding: 14px 20px !important; font-size: 16px;} 
.create-ac-main .um.um-register .um-col-alt #um-submit-btn:hover{background-color: var(--Golden-Yellow); color: var(--Deep-Teal)}

.create-ac-main .um-form form .um-field span.select2-selection__rendered {line-height: 18px; font-size: 14px; opacity: 0.5;  padding: 14px 52px 14px 10px!important; color: var(--Deep-Teal);}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color: var(--Deep-Teal) !important; }
.select2-selection__clear{display: none;}
.alrdy-hv-ac .txt{flex: 1; gap: 32px; color: var(--Deep-Teal);}
.alrdy-hv-ac .txt p{font-size: 16px!important; font-weight: 500!important;}
.alrdy-hv-ac .lnk .text-link span{background-image: url("../images/chevrons-right-white.svg"); background-position: center; background-repeat: no-repeat; color: var(--White);}
.alrdy-hv-ac .lnk .text-link span:hover{transform: translateX(2px);}

.um-field.um-field-block.um-field-block.um-field-type_block .create-ac-field p {text-align: left;}
.um-field.um-field-block.um-field-block.um-field-type_block p{color: var(--Deep-Teal); font-size: 12px; font-weight: 400; text-align: center;}
.um-field.um-field-block.um-field-block.um-field-type_block p a{color: var(--Deep-Teal)!important;}
.um-field.um-field-block.um-field-block.um-field-type_block p a:hover{text-decoration: none;}

.um-field.um-field-block.um-field-block.um-field-type_block {padding: 5px 0 0;}

/* dropdown css */
span.select2-search.select2-search--dropdown{padding: 8px 16px !important; width: 100%; color: var(--Deep-Teal); cursor: pointer !important; font-size: 14px !important; line-height: 18px; font-weight: 400; display: block; text-transform: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background: transparent; text-decoration: none;}
.select2-results ul.select2-results__options li { padding: 8px 16px !important;  background-color: var(--White)!important; color: var(--Deep-Teal)!important;}
.um-field .select2-container.select2-container--open .select2-dropdown .select2-results li:hover, 
.um-search-filter .select2-container.select2-container--open .select2-dropdown .select2-results li:hover,
.select2-results ul.select2-results__options li:hover{ background-color: var(--Deep-Teal)!important; color: var(--White)!important;transition: var(--b-transition); }

#um_field_1421_confirm_user_password .um .um-form input[type="password"]{color: var(--Deep-Teal);}



.nsl-container.nsl-container-block.nsl-container-um-register-layout-below-separator .nsl-container-buttons{width: 100%; padding: 0;}
.nsl-container.nsl-container-block.nsl-container-um-register-layout-below-separator .nsl-container-buttons .nsl-button-default{ flex-direction: row-reverse; text-align: center; justify-content: center; background-color: var(--Sky-Blue) !important; border-radius: 24px; color: var(--Deep-Teal); box-shadow: none; transition: var(--b-transition);}
.nsl-container.nsl-container-block.nsl-container-um-register-layout-below-separator .nsl-container-buttons .nsl-button-default:hover{background-color: var(--Golden-Yellow)!important; color: var(--Deep-Teal);}
.nsl-container.nsl-container-block.nsl-container-um-register-layout-below-separator .nsl-container-buttons .nsl-button-label-container{flex: 0 0 auto; margin: 2px 8px 2px 12px; font-family: var(--body-font); font-weight: 500; }
.nsl-container.nsl-container-block.nsl-container-um-register-layout-below-separator .nsl-container-buttons .nsl-button-svg-container{padding: 0;}

.um-form #nsl-custom-login-form-1 .nsl-separator {font-size: 12px; font-weight: 400; line-height: 18px; color: var(--Deep-Teal); margin: 20px 0 16px!important; justify-content: center;}

.create-ac-main .um-form form .um-field.um-field-select .um-field-label label span{width: 16px; height: 16px; top: 3px; right: 24px; background-image: url('../images/info-circle.svg'); background-repeat: no-repeat; background-size: contain; cursor: pointer;}
.alrdy-hv-ac{gap: 32px; padding: 10px 0 0;}



/* Tooltip css */


.create-ac-main .um-form form .um-field.um-field-select .um-field-label label span p { position: absolute; left: 32px; top: calc(50% - 1px); transform: translateY(-50%);  min-width: 160px; max-width: 160px; background-color: var(--Deep-Teal); color: var(--White); padding: 4px 10px 7px;; border: 1px solid var(--Deep-Teal); border-radius: 4px;  font-weight: 500; opacity: 0; visibility: hidden; transition: var(--b-transition); }
.create-ac-main .um-form form .um-field.um-field-select .um-field-label label span p:after{ content: ""; position: absolute; top: 50%; right: 100%; margin-top: -7px; border-width: 7px; border-style: solid; border-color: transparent  var(--Deep-Teal) transparent transparent;}
.create-ac-main .um-form form .um-field.um-field-select .um-field-label label span:hover p {left: 24px; opacity: 1; visibility: visible;}

div.nsl-container .nsl-button-svg-container svg{width: 20px; height: 20px;}
div.nsl-container .nsl-button-svg-container svg path{fill: var(--Deep-Teal);}

#um_field_1421_confirm_user_password .um-field-label label span{display: none;}

/*-- media css starts here --*/
@media only screen and (min-width: 768px){
    .create-ac-main{padding: 60px 0 73px; max-width: 460px;}
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .create-ac-main{padding: 23px 16px 30px;}
    .alrdy-hv-ac{padding-top: 18px; margin-top: 10px;border-top: 1px solid var(--Beige);  }
    .alrdy-hv-ac .txt hr{display: none;}
    .create-ac-main .um-form form .um-row .um-field{padding: 8px 0 0 0;}
    .create-ac-main .um-form form .um-field.um-field-select .um-field-label label span p{left: auto; right: 38px;}
    .create-ac-main .um-form form .um-field.um-field-select .um-field-label label span.open p,
    .create-ac-main .um-form form .um-field.um-field-select .um-field-label label span:hover p{left: auto; right: 24px; opacity: 1; visibility: visible;}
    .create-ac-main .um-form form .um-field.um-field-select .um-field-label label span p::after { left: 100%; right: auto; border-color: transparent transparent transparent var(--Deep-Teal); }

    .um-field.um-field-block.um-field-block.um-field-type_block p {max-width: 280px; margin: 0 auto;}
}