/*-- 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/_geo-lander-modal.css?v=63636112");

@import url("./sections/_popular-brands-section.css?v=63636112");



.login-wrap{padding: 80px 0;}
.login-main{max-width: 460px; }
.login-main .um.um-login{max-width: 460px;}

.login-main .um-form form .um-field:first-child{padding: 0!important;}
.login-main .um-form .um-field-label label, .login-main .um-form .um-row .um-col-1 .um-field label{color: var(--Deep-Teal); padding: 0; font-size: 16px !important; line-height: 24px !important; font-weight: 500;}

.login-main .um .um-form input[type="text"], .login-main .um .um-form input[type="password"],
.login-main .um-form .um-row .um-col-1 .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); background-color: var(--White);}

.login-main .um .um-form input[type="text"]:focus, .login-main .um .um-form input[type="password"]:focus,
.login-main .um-form .um-row .um-col-1 .um-field .um-field-area input:focus{border-color: var(--Beige) !important; color: var(--Deep-Teal); -webkit-text-fill-color: var(--Deep-Teal);}

.login-main .um-form .um-col-alt .um-field-checkbox .um-field-checkbox-option{color: var(--Deep-Teal) !important; margin: 0 0 0 36px;}

.login-main .um-form .um-col-alt-b { padding-top: 25px!important;}
.login-main .um-form .um-col-alt-b .um-link-alt{font-size: 16px; color: var(--Deep-Teal)!important; text-decoration: underline !important;}

.login-main .um-field-checkbox-state i{color: var(--Beige) !important; }

.login-main .um-form .um-col-alt-b .um-link-alt:hover {text-decoration: none!important;}

.um-form .um-misc-with-img {border-bottom: 0!important; padding-bottom: 18px;}
.um-form .um-misc-with-img .um-misc-img{padding-bottom: 5px;}
.um-form .um-misc-with-img .um-misc-img img{border:  4px solid var(--Sky-Blue); max-width: 80px; border-radius: 50px;}
.um-form .um-misc-with-img div strong{color: var(--Deep-Teal); font-size: 16px!important;}
ul.um-misc-ul{margin: 0; flex-direction: column; gap: 10px; display: flex; flex-wrap: wrap;}
ul.um-misc-ul li::before{display: none;}
ul.um-misc-ul li{margin: 0;}
ul.um-misc-ul li:first-child a{ background-color: var(--Sky-Blue) !important; color: var(--Deep-Teal); }
ul.um-misc-ul li:nth-child(2) a:hover{background-color: var(--Deep-Teal)!important; color: var(--White);}
ul.um-misc-ul li:nth-child(2) a {background-color: var(--Golden-Yellow); color: var(--Deep-Teal);}
ul.um-misc-ul li a{ width: 100%; padding: 10px 28px; background: var(--Deep-Teal); color: var(--White); gap: 9px; font-size: 16px; font-weight: 500; line-height: 24px; font-family: var(--body-font); display: flex; align-items: center; justify-content: center; border-radius: 24px; cursor: pointer; vertical-align: middle; text-transform: none; text-align: center; position: relative; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; text-orientation: mixed; box-shadow: none; z-index: 1; margin:0; transition: var(--b-transition); overflow: hidden; text-decoration: none; }

.login-main  .um-login.um-logout{max-width: inherit!important; margin-bottom: 0!important;}

ul.um-misc-ul li a:hover{ background: var(--Golden-Yellow)!important;  }
.um-1422.um{margin: 0 auto !important;}
.um-field-checkbox input, .um-field-radio input{padding: 0;}
.um-field-checkbox-option, .um-field-radio-option { margin: 0 0 0 24px; line-height: 24px; color: #888 !important; display: block; text-indent: 0; text-align: left; }
.um .um-form form .um-half .um-button.um-alt, .um-form form .um-half input#um-submit-btn, .login-main .um input[type="submit"].um-button{ width: 100%; padding: 14px 28px!important; background: var(--Deep-Teal); color: var(--White); gap: 9px; font-size: 16px; font-weight: 500 !important; line-height: 24px;  font-family: var(--body-font); display: flex; align-items: center; justify-content: center; border-radius: 24px !important; cursor: pointer; vertical-align: middle; text-transform: none; text-align: center; position: relative; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; text-orientation: mixed; box-shadow: none; z-index: 1; margin:0; transition: var(--b-transition); overflow: hidden; text-decoration: none; } .um .um-form form .um-half .um-button.um-alt:hover, .um-form form .um-half input#um-submit-btn:hover{ background: var(--Golden-Yellow); border-color: var(--Golden-Yellow) !important; color: var(--Deep-Teal); }
.login-main .um input[type="submit"].um-button:hover{background-color: var(--Golden-Yellow); color: var(--Deep-Teal);}
.um .um-form form .um-half .um-button.um-alt{ background: var(--Sky-Blue); color: var(--Deep-Teal); border: none !important; }
.login-main .um .um-form input::placeholder,
.login-main .um .um-form input::-moz-placeholder,
.login-main .um .um-form input::-webkit-input-placeholder{color: var(--Deep-Teal);}

.login-main .um-form .um-row .um-col-1 .um-field .um-field-area input:-webkit-autofill,
.login-main .um-form input[type="text"]:-webkit-autofill,
.login-main .um-form .um-row .um-col-1 .um-field .um-field-area textarea:-webkit-autofill,
.login-main .um-form .um-row .um-col-1 .um-field .um-field-area select:-webkit-autofill {
  background-color: var(--White);
  color: var(--Deep-Teal);
  -webkit-text-fill-color: var(--Deep-Teal);
  transition: background-color 5000s ease-in-out 0s;
}


.um .um-cover-add:hover, .um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i, .um .um-field-radio.active:not(.um-field-radio-state-disabled) i, .um .um-item-meta a, .um .um-member-less a:hover, .um .um-member-more a:hover, .um .um-member-name a:hover, .um .um-members-pagi a:hover, .um .um-profile-subnav a.active, .um .um-tip:hover, .um-account-name a:hover, .um-account-nav a.current, .um-account-side li a.current span.um-account-icon, .um-account-side li a.current:hover span.um-account-icon, .um-dropdown li a:hover, i.um-active-color, span.um-active-color{color: var(--Deep-Teal);}

/* password reset css */
.um-um_password_id.um {max-width: 460px!important;}
.login-main .um-form form .um-field.um-field-block{padding-top: 0!important;  padding-bottom: 20px!important;}
.login-main .um-form form .um-field .um-field-block{color: var(--Deep-Teal); font-size: 16px; line-height: 18px; font-weight: 400; max-width: 400px; margin: 0 auto; }


.um .um-form form .um-field .um-field-error{background: none!important; margin: 0; padding: 0; right: 0; text-align: right; font-size: 0.75rem; line-height: 0.875rem!important; color: var(--Red); font-weight: 300;}
.um .um-form form .um-field .um-field-error .um-field-arrow{display: none;}


.um-login .um-col-alt{margin: 0;}
.um-login .um-col-alt .um-field-area{padding-bottom: 8px;}


/*-- common um checkbox design --*/
.um-field-checkbox:not(.um-field), .um-field-radio:not(.um-field){cursor: pointer;}
.um:not(.um-admin):not(.um-directory) .um-field-checkbox  input[type="checkbox"]{ position: absolute; width: 24px !important; height: 24px; margin: 0; padding: 0; border-radius: 4px; border: 1px solid var(--Grey); opacity: 1 !important; transition-duration: .75s; transition-property: all; transition-timing-function: cubic-bezier(.075,.82,.165,1); }
.um:not(.um-admin):not(.um-directory) .um-field-checkbox  input[type="checkbox"]:checked { background: var(--Blush-Pink); border-color: var(--Peach-Blossom); }
.um:not(.um-admin):not(.um-directory) .um-field-checkbox  input[type="checkbox"]:checked:before{ background-image: url("../images/tick-white.png"); background-size: 16px !important; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; box-shadow: none; content: ""; font-size: 1.5rem; color: var(--Deep-Teal); top: 0px; position: absolute; }
.um:not(.um-admin):not(.um-directory) .um-field-checkbox .um-field-checkbox-state{display: none;}

.um-form p.um-notice.success { background: var(--Peach-Blossom) !important; color: var(--Deep-Teal); font-family: var(--body-font); font-weight: 400; border-radius: 30px; padding: 13px 24px 14px !important; margin: 0 0 24px !important; font-size: 16px; line-height: 20px; }
.um-form p.um-notice i { right: 20px; top: 6px;}


@media only screen and (min-width: 768px) and (max-width: 200px){

  .login-wrap{padding: 80px 0 50px;}

}