/*@import "variables/font_family";*/
.transition, .product-item-info, .product-item-info:hover .prod-img {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out; }

.ellips {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block; }

@media all and (min-width: 768px) and (max-width: 1199px) {
  .container {
    max-width: 100%; } }
.error-msg {
  font-size: 12px !important;
  margin-bottom: 0 !important; }

.transition {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out; }

.ellips {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block; }

.alert-success {
  background: #3b8036 !important;
  color: #fff !important; }

.link-blue-color {
  color: #4190FF;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.3px; }
  .link-blue-color:hover {
    color: #FFB818;
    text-decoration: none; }

.login-bg,
.register-bg,
.seller-register-bg {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: url("./../../../../images/login-bg.jpg") center center no-repeat;
  background-size: cover;
  min-height: calc(100vh - 200px);
  padding: 40px 0 80px; }
  .login-bg > .container,
  .register-bg > .container,
  .seller-register-bg > .container {
    max-width: 1320px; }

.login-wrapper,
.register-wrapper {
  display: flex;
  width: 100%;
  padding: 60px 40px;
  margin: 40px auto;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  background: #fff;
  box-shadow: -4px 0 20px 0 rgba(0, 0, 0, 0.1); }
  .login-wrapper form,
  .register-wrapper form {
    width: 100%; }
  .login-wrapper .form-label,
  .register-wrapper .form-label {
    display: block;
    margin-bottom: 9px; }
  .login-wrapper .form-group,
  .register-wrapper .form-group {
    margin-bottom: 24px; }
    .login-wrapper .form-group label,
    .register-wrapper .form-group label {
      color: #333;
      font-weight: 500;
      line-height: 1.5;
      margin-bottom: 9px; }
      .login-wrapper .form-group label.chk-wrap,
      .register-wrapper .form-group label.chk-wrap {
        margin-bottom: 0; }
      .login-wrapper .form-group label.radio-wrap,
      .register-wrapper .form-group label.radio-wrap {
        margin-bottom: 5px;
        display: inline-flex;
        align-items: center; }
        .login-wrapper .form-group label.radio-wrap .radio-label,
        .register-wrapper .form-group label.radio-wrap .radio-label {
          padding-left: 36px; }
    .login-wrapper .form-group .radio-group .radio-wrap,
    .register-wrapper .form-group .radio-group .radio-wrap {
      margin-right: 16px; }
  .login-wrapper input[type="text"],
  .login-wrapper input[type="email"],
  .login-wrapper input[type="password"],
  .login-wrapper input[type="tel"],
  .login-wrapper input[type="number"],
  .login-wrapper input[type="search"],
  .login-wrapper textarea,
  .login-wrapper select,
  .login-wrapper .form-elements,
  .register-wrapper input[type="text"],
  .register-wrapper input[type="email"],
  .register-wrapper input[type="password"],
  .register-wrapper input[type="tel"],
  .register-wrapper input[type="number"],
  .register-wrapper input[type="search"],
  .register-wrapper textarea,
  .register-wrapper select,
  .register-wrapper .form-elements {
    width: 100%;
    padding: 8px 0 10px;
    border: none;
    border-bottom: 1px solid #e0e2ee;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #333;
    font-size: 14px;
    line-height: 1.5; }
    .login-wrapper input[type="text"]::placeholder,
    .login-wrapper input[type="email"]::placeholder,
    .login-wrapper input[type="password"]::placeholder,
    .login-wrapper input[type="tel"]::placeholder,
    .login-wrapper input[type="number"]::placeholder,
    .login-wrapper input[type="search"]::placeholder,
    .login-wrapper textarea::placeholder,
    .login-wrapper select::placeholder,
    .login-wrapper .form-elements::placeholder,
    .register-wrapper input[type="text"]::placeholder,
    .register-wrapper input[type="email"]::placeholder,
    .register-wrapper input[type="password"]::placeholder,
    .register-wrapper input[type="tel"]::placeholder,
    .register-wrapper input[type="number"]::placeholder,
    .register-wrapper input[type="search"]::placeholder,
    .register-wrapper textarea::placeholder,
    .register-wrapper select::placeholder,
    .register-wrapper .form-elements::placeholder {
      color: #DDD; }
    .login-wrapper input[type="text"]:focus, .login-wrapper input[type="text"].focus, .login-wrapper input[type="text"]:hover, .login-wrapper input[type="text"].hover, .login-wrapper input[type="text"]:active, .login-wrapper input[type="text"].active,
    .login-wrapper input[type="email"]:focus,
    .login-wrapper input[type="email"].focus,
    .login-wrapper input[type="email"]:hover,
    .login-wrapper input[type="email"].hover,
    .login-wrapper input[type="email"]:active,
    .login-wrapper input[type="email"].active,
    .login-wrapper input[type="password"]:focus,
    .login-wrapper input[type="password"].focus,
    .login-wrapper input[type="password"]:hover,
    .login-wrapper input[type="password"].hover,
    .login-wrapper input[type="password"]:active,
    .login-wrapper input[type="password"].active,
    .login-wrapper input[type="tel"]:focus,
    .login-wrapper input[type="tel"].focus,
    .login-wrapper input[type="tel"]:hover,
    .login-wrapper input[type="tel"].hover,
    .login-wrapper input[type="tel"]:active,
    .login-wrapper input[type="tel"].active,
    .login-wrapper input[type="number"]:focus,
    .login-wrapper input[type="number"].focus,
    .login-wrapper input[type="number"]:hover,
    .login-wrapper input[type="number"].hover,
    .login-wrapper input[type="number"]:active,
    .login-wrapper input[type="number"].active,
    .login-wrapper input[type="search"]:focus,
    .login-wrapper input[type="search"].focus,
    .login-wrapper input[type="search"]:hover,
    .login-wrapper input[type="search"].hover,
    .login-wrapper input[type="search"]:active,
    .login-wrapper input[type="search"].active,
    .login-wrapper textarea:focus,
    .login-wrapper textarea.focus,
    .login-wrapper textarea:hover,
    .login-wrapper textarea.hover,
    .login-wrapper textarea:active,
    .login-wrapper textarea.active,
    .login-wrapper select:focus,
    .login-wrapper select.focus,
    .login-wrapper select:hover,
    .login-wrapper select.hover,
    .login-wrapper select:active,
    .login-wrapper select.active,
    .login-wrapper .form-elements:focus,
    .login-wrapper .form-elements.focus,
    .login-wrapper .form-elements:hover,
    .login-wrapper .form-elements.hover,
    .login-wrapper .form-elements:active,
    .login-wrapper .form-elements.active,
    .register-wrapper input[type="text"]:focus,
    .register-wrapper input[type="text"].focus,
    .register-wrapper input[type="text"]:hover,
    .register-wrapper input[type="text"].hover,
    .register-wrapper input[type="text"]:active,
    .register-wrapper input[type="text"].active,
    .register-wrapper input[type="email"]:focus,
    .register-wrapper input[type="email"].focus,
    .register-wrapper input[type="email"]:hover,
    .register-wrapper input[type="email"].hover,
    .register-wrapper input[type="email"]:active,
    .register-wrapper input[type="email"].active,
    .register-wrapper input[type="password"]:focus,
    .register-wrapper input[type="password"].focus,
    .register-wrapper input[type="password"]:hover,
    .register-wrapper input[type="password"].hover,
    .register-wrapper input[type="password"]:active,
    .register-wrapper input[type="password"].active,
    .register-wrapper input[type="tel"]:focus,
    .register-wrapper input[type="tel"].focus,
    .register-wrapper input[type="tel"]:hover,
    .register-wrapper input[type="tel"].hover,
    .register-wrapper input[type="tel"]:active,
    .register-wrapper input[type="tel"].active,
    .register-wrapper input[type="number"]:focus,
    .register-wrapper input[type="number"].focus,
    .register-wrapper input[type="number"]:hover,
    .register-wrapper input[type="number"].hover,
    .register-wrapper input[type="number"]:active,
    .register-wrapper input[type="number"].active,
    .register-wrapper input[type="search"]:focus,
    .register-wrapper input[type="search"].focus,
    .register-wrapper input[type="search"]:hover,
    .register-wrapper input[type="search"].hover,
    .register-wrapper input[type="search"]:active,
    .register-wrapper input[type="search"].active,
    .register-wrapper textarea:focus,
    .register-wrapper textarea.focus,
    .register-wrapper textarea:hover,
    .register-wrapper textarea.hover,
    .register-wrapper textarea:active,
    .register-wrapper textarea.active,
    .register-wrapper select:focus,
    .register-wrapper select.focus,
    .register-wrapper select:hover,
    .register-wrapper select.hover,
    .register-wrapper select:active,
    .register-wrapper select.active,
    .register-wrapper .form-elements:focus,
    .register-wrapper .form-elements.focus,
    .register-wrapper .form-elements:hover,
    .register-wrapper .form-elements.hover,
    .register-wrapper .form-elements:active,
    .register-wrapper .form-elements.active {
      border-color: #F94B5E;
      background: transparent;
      box-shadow: none;
      outline: 0; }
    .login-wrapper input[type="text"].error, .login-wrapper input[type="text"].is-invalid,
    .login-wrapper input[type="email"].error,
    .login-wrapper input[type="email"].is-invalid,
    .login-wrapper input[type="password"].error,
    .login-wrapper input[type="password"].is-invalid,
    .login-wrapper input[type="tel"].error,
    .login-wrapper input[type="tel"].is-invalid,
    .login-wrapper input[type="number"].error,
    .login-wrapper input[type="number"].is-invalid,
    .login-wrapper input[type="search"].error,
    .login-wrapper input[type="search"].is-invalid,
    .login-wrapper textarea.error,
    .login-wrapper textarea.is-invalid,
    .login-wrapper select.error,
    .login-wrapper select.is-invalid,
    .login-wrapper .form-elements.error,
    .login-wrapper .form-elements.is-invalid,
    .register-wrapper input[type="text"].error,
    .register-wrapper input[type="text"].is-invalid,
    .register-wrapper input[type="email"].error,
    .register-wrapper input[type="email"].is-invalid,
    .register-wrapper input[type="password"].error,
    .register-wrapper input[type="password"].is-invalid,
    .register-wrapper input[type="tel"].error,
    .register-wrapper input[type="tel"].is-invalid,
    .register-wrapper input[type="number"].error,
    .register-wrapper input[type="number"].is-invalid,
    .register-wrapper input[type="search"].error,
    .register-wrapper input[type="search"].is-invalid,
    .register-wrapper textarea.error,
    .register-wrapper textarea.is-invalid,
    .register-wrapper select.error,
    .register-wrapper select.is-invalid,
    .register-wrapper .form-elements.error,
    .register-wrapper .form-elements.is-invalid {
      border-bottom-color: #c71919; }
  .login-wrapper .inputgroup,
  .register-wrapper .inputgroup {
    position: relative;
    margin-bottom: 0; }
    .login-wrapper .inputgroup.toggle_icons.icons-right .form-elements,
    .login-wrapper .inputgroup.toggle_icons.icons-right input, .login-wrapper .inputgroup.icons-right .form-elements,
    .login-wrapper .inputgroup.icons-right input,
    .register-wrapper .inputgroup.toggle_icons.icons-right .form-elements,
    .register-wrapper .inputgroup.toggle_icons.icons-right input,
    .register-wrapper .inputgroup.icons-right .form-elements,
    .register-wrapper .inputgroup.icons-right input {
      padding-right: 36px; }
    .login-wrapper .inputgroup .password-visibility,
    .register-wrapper .inputgroup .password-visibility {
      position: absolute;
      right: 0;
      top: 0;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform: none;
      color: #4d4d4d;
      z-index: 2;
      line-height: 1;
      padding: 0;
      margin: 0; }
      .login-wrapper .inputgroup .password-visibility .fc-inner-iocns,
      .register-wrapper .inputgroup .password-visibility .fc-inner-iocns {
        position: static;
        top: auto;
        right: auto;
        height: auto;
        line-height: 1;
        min-width: auto;
        display: inline-block; }
      .login-wrapper .inputgroup .password-visibility:hover,
      .register-wrapper .inputgroup .password-visibility:hover {
        color: #F94B5E; }
    .login-wrapper .inputgroup.icons-right .fc-inner-iocns.fa-calendar-alt,
    .login-wrapper .inputgroup > .fc-inner-iocns.fa-calendar-alt,
    .register-wrapper .inputgroup.icons-right .fc-inner-iocns.fa-calendar-alt,
    .register-wrapper .inputgroup > .fc-inner-iocns.fa-calendar-alt {
      position: absolute;
      right: 0;
      top: 0;
      height: 40px;
      line-height: 40px;
      transform: none;
      color: #9a9a9a;
      pointer-events: none; }
    .login-wrapper .inputgroup .dob-calendar-trigger,
    .register-wrapper .inputgroup .dob-calendar-trigger {
      position: absolute;
      right: 0;
      top: 0;
      height: 40px;
      width: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      color: #9a9a9a; }
      .login-wrapper .inputgroup .dob-calendar-trigger .fc-inner-iocns,
      .register-wrapper .inputgroup .dob-calendar-trigger .fc-inner-iocns {
        position: static;
        height: auto;
        line-height: 1;
        pointer-events: none; }
      .login-wrapper .inputgroup .dob-calendar-trigger:hover,
      .register-wrapper .inputgroup .dob-calendar-trigger:hover {
        color: #F94B5E; }
    .login-wrapper .inputgroup .date-select,
    .login-wrapper .inputgroup .date-picker,
    .register-wrapper .inputgroup .date-select,
    .register-wrapper .inputgroup .date-picker {
      background-image: none !important;
      background-color: transparent !important;
      cursor: pointer; }
    .login-wrapper .inputgroup > .error-msg,
    .login-wrapper .inputgroup > .error,
    .register-wrapper .inputgroup > .error-msg,
    .register-wrapper .inputgroup > .error {
      position: static;
      display: block;
      width: 100%; }
  .login-wrapper .chkmark,
  .register-wrapper .chkmark {
    font-weight: 400;
    color: #333;
    font-size: 14px; }
    .login-wrapper .chkmark a,
    .register-wrapper .chkmark a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease; }
      .login-wrapper .chkmark a:hover, .login-wrapper .chkmark a:focus,
      .register-wrapper .chkmark a:hover,
      .register-wrapper .chkmark a:focus {
        color: #FFB818; }
  .login-wrapper .btn-primary,
  .login-wrapper .btn_login,
  .login-wrapper button.btn-primary,
  .login-wrapper input.btn-primary,
  .register-wrapper .btn-primary,
  .register-wrapper .btn_login,
  .register-wrapper button.btn-primary,
  .register-wrapper input.btn-primary {
    background-color: #F94B5E;
    border-color: #F94B5E;
    color: #fff;
    height: 50px; }
    .login-wrapper .btn-primary:hover, .login-wrapper .btn-primary:focus, .login-wrapper .btn-primary:active,
    .login-wrapper .btn_login:hover,
    .login-wrapper .btn_login:focus,
    .login-wrapper .btn_login:active,
    .login-wrapper button.btn-primary:hover,
    .login-wrapper button.btn-primary:focus,
    .login-wrapper button.btn-primary:active,
    .login-wrapper input.btn-primary:hover,
    .login-wrapper input.btn-primary:focus,
    .login-wrapper input.btn-primary:active,
    .register-wrapper .btn-primary:hover,
    .register-wrapper .btn-primary:focus,
    .register-wrapper .btn-primary:active,
    .register-wrapper .btn_login:hover,
    .register-wrapper .btn_login:focus,
    .register-wrapper .btn_login:active,
    .register-wrapper button.btn-primary:hover,
    .register-wrapper button.btn-primary:focus,
    .register-wrapper button.btn-primary:active,
    .register-wrapper input.btn-primary:hover,
    .register-wrapper input.btn-primary:focus,
    .register-wrapper input.btn-primary:active {
      background-color: #FFB818;
      border-color: #FFB818;
      color: #fff; }
  .login-wrapper .select_country,
  .register-wrapper .select_country {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #e0e2ee !important;
    background: transparent !important;
    padding: 0;
    min-height: 42px;
    box-shadow: none !important; }
    .login-wrapper .select_country input[name="ph_number"],
    .register-wrapper .select_country input[name="ph_number"] {
      flex: 1 1 auto;
      width: auto !important;
      min-width: 0;
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 8px 0 10px 12px !important; }
    .login-wrapper .select_country input#phone,
    .login-wrapper .select_country input#phone.form-elements,
    .register-wrapper .select_country input#phone,
    .register-wrapper .select_country input#phone.form-elements {
      opacity: 0;
      width: 1px !important;
      min-width: 1px !important;
      max-width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      position: absolute;
      left: 0;
      bottom: 0;
      pointer-events: none; }
    .login-wrapper .select_country .iti,
    .register-wrapper .select_country .iti {
      flex: 0 0 auto;
      display: inline-block !important;
      position: relative;
      width: auto !important;
      min-width: 96px;
      max-width: 140px !important;
      border: none !important;
      border-right: 1px solid #e0e2ee;
      background: transparent !important;
      padding: 0 10px 0 0;
      margin: 0;
      opacity: 1 !important;
      visibility: visible !important; }
      .login-wrapper .select_country .iti input#phone,
      .login-wrapper .select_country .iti input.form-elements,
      .login-wrapper .select_country .iti input[type="tel"],
      .register-wrapper .select_country .iti input#phone,
      .register-wrapper .select_country .iti input.form-elements,
      .register-wrapper .select_country .iti input[type="tel"] {
        opacity: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        position: absolute !important;
        left: 0;
        top: 0; }
      .login-wrapper .select_country .iti .iti__flag-container,
      .register-wrapper .select_country .iti .iti__flag-container {
        position: static;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important; }
      .login-wrapper .select_country .iti .iti__selected-flag,
      .register-wrapper .select_country .iti .iti__selected-flag {
        display: flex !important;
        align-items: center;
        height: 40px;
        padding: 0 4px 0 0 !important;
        background: transparent !important;
        opacity: 1 !important; }
      .login-wrapper .select_country .iti .iti__selected-dial-code,
      .register-wrapper .select_country .iti .iti__selected-dial-code {
        display: inline-block !important;
        color: #333 !important;
        font-size: 14px;
        margin-left: 6px;
        opacity: 1 !important;
        visibility: visible !important; }
      .login-wrapper .select_country .iti .iti__flag,
      .register-wrapper .select_country .iti .iti__flag {
        display: inline-block !important;
        opacity: 1 !important; }
      .login-wrapper .select_country .iti .iti__arrow,
      .register-wrapper .select_country .iti .iti__arrow {
        display: inline-block !important;
        margin-left: 6px;
        opacity: 1 !important; }
      .login-wrapper .select_country .iti .iti__country-list,
      .register-wrapper .select_country .iti .iti__country-list {
        z-index: 20; }

.flatpickr-calendar {
  z-index: 9999 !important; }

.login-wrapper,
.register-wrapper,
.login-create-shop .login-wrapper {
  width: 647px;
  max-width: 647px;
  padding: 60px 40px 80px; }
  .login-wrapper .login-box,
  .register-wrapper .login-box,
  .login-create-shop .login-wrapper .login-box {
    width: 100%; }

.main-title {
  font-size: 26px;
  line-height: 1.5;
  font-weight: 600;
  color: #333;
  margin-bottom: 33px;
  text-align: center;
  text-transform: inherit;
  width: 100%; }
  .main-title.login-title, .main-title.forgot, .main-title.reset, .main-title.register {
    text-align: center;
    justify-content: center !important; }
  .main-title.register {
    margin-bottom: 40px; }
  .main-title.forgot, .main-title.reset {
    margin-bottom: 12px; }

.auth-subtitle,
.small-title,
.login-wrapper .field.note,
.forget-desc {
  display: block;
  width: 100%;
  text-align: center;
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 32px; }

.password-visibility {
  color: #4d4d4d; }
  .password-visibility:hover {
    color: #F94B5E; }

.rememb-forget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 12px; }

.btn-wrap {
  text-align: center;
  margin-bottom: 20px; }

.btn_login,
.btn-reg-wrap .btn-primary,
.forget-btn-group .btn-primary,
.login-wrapper .btn-primary,
.register-wrapper .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 100%;
  max-width: 476px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 15px;
  line-height: 1.33;
  font-weight: 700;
  border: none;
  text-align: center; }

.forget-btn-group .btn-primary {
  max-width: 100%;
  align-self: stretch; }

.btn-reg-wrap .btn-primary {
  max-width: 600px; }

.sign-up-link {
  text-align: center;
  font-size: 14px;
  color: #333;
  margin-bottom: 28px; }
  .sign-up-link span {
    color: #333;
    font-size: 14px; }

.or-wrap {
  position: relative;
  text-align: center;
  margin-bottom: 1.25rem;
  width: 100%;
  max-width: 476px;
  margin-left: auto;
  margin-right: auto; }
  .or-wrap:before {
    position: absolute;
    width: 100%;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background: #e0e2ee; }
  .or-wrap .or {
    background: #fff;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    font-size: 0.875rem;
    line-height: 1.5;
    display: inline-block;
    color: #282828; }

#forget_password:hover {
  text-decoration: none; }

.socialbtn-group {
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  flex-direction: column; }

.loginBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 10px 24px;
  gap: 8px; }
  .loginBtn .icons {
    min-width: 22px;
    text-align: center;
    margin-right: 0;
    font-size: 1.5rem;
    background-color: inherit;
    border: none;
    padding: 0; }
  .loginBtn.fb_google {
    background-color: #fff;
    color: #282828;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid #cecece;
    border-radius: 30px;
    height: 50px; }
    .loginBtn.fb_google .g-icons {
      width: 22px;
      height: 22px;
      margin-right: 0;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("data:image/svg+xml,%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.1258 11.2139C21.1258 10.4225 21.0603 9.84497 20.9185 9.24609H11.6973V12.818H17.1099C17.0008 13.7057 16.4115 15.0425 15.102 15.9408L15.0836 16.0603L17.9992 18.2738L18.2012 18.2936C20.0563 16.6145 21.1258 14.1441 21.1258 11.2139Z' fill='%234285F4'/%3E%3Cpath d='M11.6967 20.6248C14.3484 20.6248 16.5745 19.7692 18.2006 18.2934L15.1014 15.9405C14.272 16.5073 13.1589 16.903 11.6967 16.903C9.09946 16.903 6.89512 15.224 6.10933 12.9033L5.99415 12.9129L2.9625 15.2122L2.92285 15.3202C4.53791 18.4644 7.85536 20.6248 11.6967 20.6248Z' fill='%2334A853'/%3E%3Cpath d='M6.11006 12.9038C5.90272 12.305 5.78273 11.6632 5.78273 11.0002C5.78273 10.3371 5.90272 9.69549 6.09915 9.09661L6.09366 8.96906L3.024 6.63281L2.92357 6.67963C2.25792 7.98437 1.87598 9.44953 1.87598 11.0002C1.87598 12.5509 2.25792 14.016 2.92357 15.3207L6.11006 12.9038Z' fill='%23FBBC05'/%3E%3Cpath d='M11.6967 5.09664C13.5409 5.09664 14.7849 5.87733 15.4943 6.52974L18.2661 3.8775C16.5638 2.32681 14.3485 1.375 11.6967 1.375C7.85539 1.375 4.53792 3.53526 2.92285 6.6794L6.09844 9.09638C6.89514 6.77569 9.09949 5.09664 11.6967 5.09664Z' fill='%23EB4335'/%3E%3C/svg%3E"); }
  .loginBtn.fb_btn {
    background-color: #1877f2;
    color: #fff;
    border-radius: 30px;
    height: 50px; }
  .loginBtn.fb_line {
    background-color: #00c300;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 30px;
    height: 50px; }
  .loginBtn.fb_wtitter {
    background-color: #00aced;
    color: #fff;
    border-radius: 30px;
    height: 50px; }
  .loginBtn.fb_apple {
    background-color: #444;
    color: #fff;
    border-radius: 30px;
    height: 50px; }
  .loginBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; }

/* Register */
.content-wrap .d-none {
  display: none !important; }

.btn-reg-wrap {
  text-align: center;
  margin-top: 8px; }
  .btn-reg-wrap .back-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none; }
    .btn-reg-wrap .back-login:hover {
      color: #F94B5E;
      text-decoration: none; }

.personal-info-wrap {
  padding-bottom: 0;
  width: 100%; }

.additional-info-wrap {
  width: 100%; }

/* Forget / Reset */
.forget-btn-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  gap: 24px;
  margin-top: 32px;
  width: 100%; }
  .forget-btn-group .btn-primary,
  .forget-btn-group button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    float: none !important;
    min-width: 0;
    border-radius: 30px;
    padding: 12px 24px;
    font-weight: 700; }
  .forget-btn-group .back-login {
    order: 2;
    line-height: 1.5;
    margin: 0 auto;
    align-self: center;
    width: auto;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; }
    .forget-btn-group .back-login:hover {
      color: #F94B5E;
      text-decoration: none; }
  .forget-btn-group .btn-primary {
    order: 1; }

.login-wrapper-inner {
  width: 100%; }

.login-create-shop .login-wrapper, .login-create-shop.row {
  width: 647px;
  max-width: 647px;
  margin-left: auto;
  margin-right: auto; }

/* Seller Register */
.seller-register {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 40px; }

.subtitle-seller {
  color: #333;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 150%;
  margin-bottom: 18px; }

.product-details .subtitle-seller {
  margin-bottom: 25px; }

.product-details .chk-wrap {
  padding: 20px 0; }

@media all and (max-width: 767px) {
  .m-txt-left {
    text-align: left !important; }

  .login-bg,
  .register-bg,
  .seller-register-bg {
    padding-left: 0;
    padding-right: 0; }
    .login-bg > .container,
    .register-bg > .container,
    .seller-register-bg > .container {
      padding-left: 16px;
      padding-right: 16px;
      max-width: 100%;
      width: 100%; }

  .login-wrapper,
  .register-wrapper,
  .login-create-shop .login-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 48px 20px 60px;
    margin: 24px 0; }

  .register-wrapper .radio-group .radio-wrap {
    margin: 0 16px 10px 0;
    width: auto; }

  .seller-register-bg .register-wrapper .radio-group .radio-wrap {
    width: auto;
    margin-right: 16px; }

  .btn_login,
  .btn-reg-wrap .btn-primary,
  .forget-btn-group .btn-primary {
    max-width: 100%; } }
.alert-success {
  background: #3B8036 !important;
  color: #fff !important; }

.login-wrapper .btn-primary,
.login-create-shop .btn-primary {
  min-width: 150px; }

.new-customer {
  position: relative;
  padding-bottom: 0; }

.loginreg-btn {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%); }

.signup-msg {
  text-align: center; }
  .signup-msg h1 {
    border-bottom: 1px solid #CECECE;
    padding-bottom: 10px;
    margin-bottom: 40px;
    text-transform: uppercase; }
  .signup-msg.inactive {
    display: none; }

.registered {
  padding-right: 30px; }

.ph-wrap {
  max-width: 80px;
  min-width: 80px; }

.title-login {
  font-weight: 600;
  padding-bottom: 0;
  margin-bottom: 12px;
  font-size: 26px;
  color: #1a1a1a;
  text-align: center;
  width: 100%; }

h1.title-login {
  font-size: 26px;
  margin-bottom: 12px;
  margin-top: 0; }

.subtitle-login {
  font-weight: 400;
  font-size: 0.875rem;
  color: #9a9a9a;
  text-align: center; }

.widthfit_contents {
  width: fit-content;
  margin: 0 auto;
  padding: 25px 0; }

.login-logo {
  margin-bottom: 30px; }

.fbtxtaccount {
  font-size: 1rem; }

@media all and (max-width: 767px) {
  .m-txt-left {
    text-align: left !important; }

  h1.title-login {
    margin-bottom: 10px; }

  .title-login {
    margin-bottom: 8px; }

  .login-wrapper .btn-primary,
  .login-create-shop .btn-primary {
    min-width: auto; }

  .signup-msg h1 {
    margin-bottom: 10px; }

  .registered {
    padding-right: 15px; }
    .registered .gtext {
      border-bottom: 1px solid #CECECE;
      padding-bottom: 15px; }
    .registered button[type="submit"] {
      width: 100%; }

  .new-customer {
    border-left: none;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0; }
    .new-customer .loginreg-btn {
      position: static;
      transform: translateX(0);
      text-align: center;
      margin-bottom: 5px; }
      .new-customer .loginreg-btn a {
        display: block; }

  .register #register {
    width: 100%;
    margin-bottom: 15px; } }
#resetPassForm {
  width: 100%; }
  #resetPassForm .forget-btn-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto; }
    #resetPassForm .forget-btn-group .btn-primary,
    #resetPassForm .forget-btn-group button[type="submit"] {
      display: flex !important;
      align-items: center;
      justify-content: center;
      align-self: stretch !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      float: none !important;
      min-width: 0 !important; }
    #resetPassForm .forget-btn-group .back-login {
      align-self: center;
      margin-left: auto;
      margin-right: auto; }