@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&family=Pinyon+Script&display=swap");
.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%; } }
.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; }

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

.form-group label {
  color: #4E4D49;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 9px; }

.form-group label.chk-wrap {
  margin-bottom: 0px; }

.form-group label.radio-wrap {
  margin-bottom: 5px;
  display: inline-flex;
  align-items: center; }

.form-group label.radio-wrap .radio-label {
  padding-left: 36px; }

.form-group .radio-group .radio-wrap {
  margin-right: 16px; }

.link-blue-color {
  color: #007AFF;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.3px; }

.login-bg {
  background: url("./../../../../images/login-bg.jpg") center top no-repeat;
  background-size: cover; }

.login-wrapper {
  display: flex;
  width: 100%;
  max-width: 632px;
  padding: 60px 40px 100px 40px;
  margin: 100px auto;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  background: #fff;
  box-shadow: -4px 0px 20px 0px rgba(0, 0, 0, 0.1); }

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

.login-wrapper .form-label {
  display: block;
  margin-bottom: 9px; }

.login-wrapper .chkmark {
  font-weight: 400;
  color: #4e4d49;
  font-size: 0.75rem; }

.main-title {
  font-size: 26px;
  line-height: 1.5;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 33px;
  text-transform: inherit; }

.main-title.register {
  text-align: center;
  margin-bottom: 40px; }

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

.password-visibility:hover {
  color: #39B54A; }

.rememb-forget {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px; }

.btn-wrap {
  text-align: center; }

.btn_login {
  width: 100%;
  max-width: 476px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 15px;
  line-height: 1.33;
  font-weight: 700; }

.sign-up-link {
  text-align: center;
  font-size: 0.75rem; }

.or-wrap {
  position: relative;
  text-align: center;
  margin-bottom: 1rem;
  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: underline; }

.socialbtn-group {
  max-width: 470px;
  margin: 0 auto;
  text-align: center; }

.loginBtn {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  padding-right: 7px; }

.loginBtn .icons {
  min-width: 22px;
  text-align: center;
  margin-right: 8px;
  font-size: 1.5rem;
  background-color: inherit; }

.loginBtn.fb_google {
  background-color: #fff;
  color: #282828;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 10px 24px;
  border: 1px solid #CECECE;
  border-radius: 30px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  width: auto; }

.loginBtn.fb_google .g-icons {
  width: 22px;
  height: 22px;
  margin-right: 8px;
  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; }

.loginBtn.fb_line {
  background-color: #00c300;
  color: #fff; }

.loginBtn.fb_wtitter {
  background-color: #00aced;
  color: #fff; }

.loginBtn.fb_apple {
  background-color: #444;
  color: #fff; }

.loginBtn:hover {
  opacity: 0.7; }

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

.register-bg {
  background: url("./../../../../images/login-bg.jpg") center top no-repeat;
  background-size: cover; }

.register-wrapper {
  display: flex;
  width: 100%;
  max-width: 848px;
  padding: 60px 40px;
  margin: 100px auto;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  background: #fff;
  box-shadow: -4px 0px 20px 0px rgba(0, 0, 0, 0.1); }

.register-wrapper form {
  width: 100%; }

.register-wrapper .chkmark {
  font-size: 0.75rem; }

.btn-reg-wrap {
  text-align: center; }

.btn-reg-wrap .btn-primary {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 15px;
  line-height: 1.33;
  font-weight: 700; }

/*  Forget Passsword page  */
.forget-btn-group {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }

.forget-btn-group .back-login {
  line-height: 30px;
  margin: 2px 0; }

.forget-btn-group button, .forget-btn-group .btm {
  margin: 2px 0px;
  width: auto;
  min-width: 120px; }

/* Seller Register page */
.seller-register-bg {
  background: url("./../../../../images/login-bg.jpg") center top no-repeat;
  background-size: cover; }

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

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

.personal-info-wrap {
  padding-bottom: 40px; }

.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 {
    background: url("./../../../../images/login-bg.jpg") center top no-repeat;
    background-size: cover; }

  .login-wrapper {
    padding: 60px 20px;
    margin: 60px 16px;
    width: auto; }

  /* Register Page */
  .register-bg {
    background: url("./../../../../images/login-bg.jpg") center top no-repeat;
    background-size: cover; }

  .register-wrapper {
    padding: 60px 20px;
    margin: 60px 16px;
    width: auto; }

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

  .register-wrapper .radio-group .radio-wrap:last-child {
    margin-bottom: 0px; }

  /* Seller Register page */
  .seller-register-bg {
    background: url("./../../../../images/login-bg.jpg") center top no-repeat;
    background-size: cover; }

  .seller-register-bg .register-wrapper .radio-group .radio-wrap {
    width: auto;
    margin-right: 16px; } }
.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: 80px; }

.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; }

.or {
  text-align: center;
  position: relative;
  margin-bottom: -10px; }
  .or .ortxt {
    background: #fff;
    padding: 1px 10px;
    display: inline-block;
    margin: -13px 0 0px 0; }

.registered {
  padding-right: 30px; }

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

.title-login {
  font-weight: bold;
  padding-bottom: 0;
  margin-bottom: 33px;
  font-size: 1.125rem; }

h1.title-login {
  font-size: 1.5rem;
  margin-bottom: 50px;
  margin-top: 40px; }

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

.subtitle-login {
  font-weight: bold;
  font-size: 1.125rem; }

/* Register */
.new-customer .disc {
  list-style: square; }

.personal-info-wrap {
  padding-bottom: 35px; }

.signin-info-wrap {
  padding-bottom: 15px; }

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

.or-wrap {
  position: relative;
  padding: 8px 0; }
  .or-wrap .or {
    background: #fff;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    display: inline-block; }
  .or-wrap:before {
    position: absolute;
    width: 100%;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background: #CECECE; }

.socialbtn-group {
  max-width: 270px;
  margin: 0 auto; }

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

.loginBtn {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  padding-right: 7px; }
  .loginBtn .icons {
    width: 45px;
    text-align: center;
    margin-right: 10px;
    border-right: 1px solid #CECECE;
    padding: 7px;
    font-size: 1.5rem;
    background-color: inherit; }
  .loginBtn.fb_google {
    background-color: #dd4b39;
    color: #fff; }
  .loginBtn.fb_btn {
    background-color: #1877f2;
    color: #fff; }
  .loginBtn.fb_line {
    background-color: #00c300;
    color: #fff; }
  .loginBtn.fb_wtitter {
    background-color: #00aced;
    color: #fff; }
  .loginBtn.fb_apple {
    background-color: #444;
    color: #fff; }
  .loginBtn:hover {
    opacity: 0.7; }

.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: 2px; }

  .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;
    /*border-top: 1px solid $primary;*/
    padding-left: 15px;
    /*margin-top: 15px;*/
    padding-top: 15px;
    padding-bottom: 15px; }
    .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; } }