/* LOGIN MODAL */
.loginmodaldiv,
.registermodaldiv {
  display: none;
  overflow: auto;
}
.modaldiv {
  position: fixed;
  z-index: 100;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  padding: 0 10px;
  overflow: auto;
  z-index: 9999;
}
.contentmodal {
  width: 100%;
  max-width: 550px;
  height: auto;
  z-index: 2;
  position: relative;
  margin: 20px auto;
  margin-top: 30px;
  background: linear-gradient(180deg, #1c1c1c, #0f0e0a);
  border-radius: 20px;
  padding: 10px;
  margin-inline: auto;
  transition: all .3s;
  box-shadow: 0 0 15px black;
  padding-bottom: 25px;
}
@media (max-width:767px) {
  .contentmodal {
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    max-width: 100%;
    margin: 0;
    padding-top: 50px;
  }
}
.contentmodal iframe {
  height: 100%;
  width: 100%;
  border: none;
}
.closepopup {
  position: absolute;
  right: 2px;
  top: -10px;
  border-radius: 50px;
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  text-align: center;
  background: #ff4c4c;
  padding: 0;
}
@media (max-width:767px) {
  .closepopup {
    top: 10px;
    right: 10px;
  }
}
.closepopup i {
  display: block;
  margin: 0 auto;
  color: white;
}
.overlaymodal {
  position: fixed;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  background: #00000070;
  z-index: -1;
}
.contentmodal.animate__animated.animate__bounceInDown {
  --animate-duration: .6s;
}
.contentmodal .login h1 {
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
}
.contentmodal .login h1 img {
  width: 30px;
  height: auto;
}
.contentmodal .login {
  padding: 0 20px;
}
.contentmodal .login .logopopup img {
  width: 100%;
  max-width: 170px;
  height: auto;
  margin: 0 auto;
  display: block;
  margin-top: 15px;
  margin-bottom: 20px;
}
.contentmodal .login input,
.contentmodal .login select {
  background: #0a0a0a;
  width: 100%;
  border-radius: 9px;
  border: none;
  padding: 10px;
  outline: none;
  color: white;
  box-shadow: 0 0 2px white, 0 0 15px #0000009e;
}
.btnLogin {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  background: linear-gradient(180deg, #ff3a3a, #6a1a1a);
  display: block;
  margin: 20px auto;
  text-align: center;
  border-radius: 20px;
  color: white;
  border: none;
}
.modalspanbox {
  text-align: center;
  font-weight: 200;
  padding: 10px 0;
  padding-top: 0px;
}
.modalspanbox a {
  font-weight: 500;
}

/* LOGIN MODAL */

/* Modal Div */
.contentmodaldiv {
    display: none;
  }
  
  /* Modal Div */

/* LOGIN MODAL */
.modaldiv{
    display: none;
    position: fixed;
    z-index: 100;
    bottom: 0;
    right:0;
    top: 0;
    left: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    padding: 0 10px;
  }
  .contentmodal{
    width: 100%;
    max-width: 500px;
    height: auto;
    z-index: 2;
    position: relative;
    margin: 0 auto;
    background: linear-gradient(137deg,#3b3b3bed,#030303);
    border-radius: 20px;
    padding: 10px;
  }
  .contentmodal iframe{
    height: 100%;
    width: 100%;
    border: none;
  }
  .contentmodal button{
    position: absolute;
    right: 2px;
    top: -10px;
    border-radius: 50px;
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    text-align: center;
    background:#ff4c4c;
    padding: 0;
  }
  .contentmodal button i{
    display:block;
    margin:0 auto;
    color:white;
  }
  .overlaymodal{
    position: fixed;
    bottom: 0;
    right:0;
    top: 0;
    left: 0;
    background: #00000070;
    z-index: -1;
  }
  .contentmodal.animate__animated.animate__bounceInDown {
    --animate-duration: .6s;
  }
  .contentmodal .login h1{
    text-align:center;
    font-size:20px;
    margin-top:10px;
  }
  .contentmodal .login{
      padding: 0 20px;
  }
  .contentmodal .login img{
    width:100%;
    max-width:200px;
    height:auto;
    margin:0 auto;
    display:block;
    margin-top:15px;
  }
  .contentmodal .login input{
      background: #0a0a0a96;
      width:100%;
      border-radius: 9px;
      border: none;
      padding: 10px;
      outline: none;
      color: white;
      box-shadow: 0 0 2px white,0 0 15px #0000009e;
  }
  .contentmodal .login a.btnLogin{
      width:100%;
      max-width:200px;
      padding:10px;
      background: linear-gradient(181deg,#ffd34e,#794909);
      display:block;
      margin:20px auto;
      text-align:center;
      border-radius:20px;
  }
  .contentmodal .login a{
    text-decoration:none;
    color:white;
  }
  /* LOGIN MODAL */
  .bg-promotion {
    margin-left: 10px;
    margin-right: 10px;
    /*เปลี่ยนสี เปลี่ยนโปรโมชั่น*/
    background: radial-gradient(100% 100% at 50% 0, #ce0000 0, #810000 44%, #bb0000 100%), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255) 31.53%, rgb(255, 255, 255) 64.87%, rgb(255, 255, 255));
  }