/* Center the form on mobile devices */
/* @media (max-width: 600px) {
  form {
    margin: 0 auto;
    width: 50%;
  }
} */
/* Center the form on widescreen devices */
@media (min-width: 601px) {
  form {
    margin: auto;
    width: 50%;
  }
}


.butt {
 --glow-color: #cc8b00;
/*  --glow-spread-color: #cc8b00; */
 --enhanced-glow-color: #cc8b00;
 --btn-color: #312c20;
 border: .25em solid var(--glow-color);
/*  padding: 1em 3em; */
 color: var(--glow-color);
 font-size: 12px;
 font-weight: bold;
 background-color: var(--btn-color);
 border-radius: 1em;
 outline: none;
 box-shadow: 0 0 1em .25em var(--glow-color),
/*         0 0 5em 1em var(--glow-spread-color), */
        inset 0 0 .75em .25em var(--glow-color);
 text-shadow: 0 0 .5em var(--glow-color);
 position: relative;
 transition: all 0.3s;
}

.butt::after {
 pointer-events: none;
 content: "";
 position: absolute;
 top: 120%;
 left: 0;
 height: 100%;
 width: 100%;
/*  background-color: var(--glow-spread-color); */
 filter: blur(2em);
 opacity: .7;
 transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

.butt:hover {
 color: var(--btn-color);
 background-color: var(--glow-color);
 box-shadow: 0 0 1em .25em var(--glow-color),
/*         0 0 4em 2em var(--glow-spread-color), */
        inset 0 0 .75em .25em var(--glow-color);
}

.butt:active {
 box-shadow: 0 0 0.6em .25em var(--glow-color),
/*         0 0 2.5em 2em var(--glow-spread-color), */
        inset 0 0 .5em .25em var(--glow-color);
}

.inputt {
 --glow-color: #ccc;
 --glow-spread-color: #cc8b00;
 --enhanced-glow-color: #cc8b00;
 --btn-color: #333333;
 color: var(--glow-color);
 font-size: 13px;
 background-color: var(--btn-color);
 border-radius: 1em;
 outline: none;
 position: relative;
 transition: all 0.3s;
}

.inputt:focus {
 color: var(#ccc);
 box-shadow: 0 0 .75em 0em var(--glow-spread-color);
}

/* .inputt:active {
 box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
} */

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.fade-in.show {
  opacity: 1;
}


.centvert {
  transform: translateY(250%);
}

.smallabel {
  font-size: 8;
}

.p2 {
  line-height: 2;
}

.belowbtttn {
  margin-bottom: 3px;
}

.goto {
  background-color: #333333;
  color: none;
  padding: 7px 9px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}

.goto2 {
  border: 2px;
  border-color: #ccc;
  color: #ccc;
  background-color: #333333;
}

.goto:hover{
  background-color: #cc8b00 ;
  color: #333333;
}

#close-iframe-.btttn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 200;
}

iframe {
  position: relative;
  z-index: 100;
}


.bottomright{
  position: fixed;
  bottom: 0;
  right: 0;
  padding-right: 10;
  padding-bottom: 10;
}

iframe {
  outline: none;
  overflow: hidden;
  border: 0;
}

body {
  background-color: #212121;
  color: #f0ad4e;
  margin: 10px;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #e89a11;
}

a {
  color: #f0ad4e;
  text-decoration: none;
}

a:hover {
  color: #ffcd61;
}

ul {
  text-align: center;
  list-style-type: none;
}

.btn {
  background-color: #333333;
  border: none;
  color: none;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}

.butn {
  border: 2px;
  border-color: #ccc;
  color: #ccc;
  background-color: #333333;
}

.butn:hover {
/*   border: 1px solid;
  border-color: #cc8b00; */
  background-color: #cc8b00 ;
  color: #333333;
}

.nocenter{
  text-align: left;
}

.centerdiv{
  width: 35%;
  margin:  auto;
}


.ddm{
  appearance: none;
  border: 2px solid black;
  background-color: #333333;
  color: none;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
  outline: none;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}

.drdm {
  border: 2px;
  border-color: #ccc;
  color: #ccc;
  background-color: #333333;
}

.drdm:hover {
/*   border: 1px solid;
  border-color: #cc8b00; */
  background-color: #cc8b00 ;
  color: #333333;
}

drdm::before {
  content: "";
  /* Add a triangle shape using borders */
  border: 6px solid transparent;
  border-color: #333 transparent transparent transparent;
  /* Position the arrow at the right side of the select element */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}


input[type="submit"] {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-family: "Kanit", sans-serif !important;
  background-color: #cc8b00;
  color: #333333;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}


/* Add rounded class so elements can be rounded*/
  .rounded {
    border-radius: 10px !important;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
  }

/* Set the text color to a light shade */
body,
input {
  font-family: "Kanit", sans-serif !important;
  text-align: center;
  color: #ccc;
}

/* Set the background color of the input elements to a dark shade */
input {
  font-family: "Kanit", sans-serif !important;
  background-color: #333;
}

/* Set the text color of the input elements to a light shade */
input,
input::placeholder {
  font-family: "Kanit", sans-serif !important;
  color: #ccc;
}

/* Set the border color of the input elements to a dark shade */
input {
  font-family: "Kanit", sans-serif !important;
  border: 1px solid #333;
}

/* Set the focus color of the input elements to a light shade */
input:focus {
  font-family: "Kanit", sans-serif !important;
  box-shadow: 0 0 3px #db8b00;
}