@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");
/*
font-family: 'Kanit', sans-serif;
font-family: 'Sarabun', sans-serif;
*/
body{
    font-family: 'Kanit', sans-serif;
}

h1,h2,h3{
    font-family: 'Kanit', sans-serif;
}

h4{
  font-family: 'Sarabun', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5rem;
}
h5{
  font-family: 'Sarabun', sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
}
h6{
  font-family: 'Sarabun', sans-serif;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: darkslategray;
}
.menu-ou{
  font-size: 1rem;
}

@media only screen and (max-width: 768px) {
  a.navbar-brand{
    font-size: 1rem;
  }
  h4,h5 {
    font-size: 0.85rem;
    line-height: 1.35rem;
  }

}

.main-font{
  font-family: 'Sarabun', sans-serif;
}

P{
    font-family: 'Sarabun', sans-serif;
}

.P-1{
  font-family: 'Sarabun', sans-serif;
  font-size: 1.25rem;
}

.f-1{
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
}
.f-05{
    font-family: 'Sarabun', sans-serif;
    font-size: 0.8rem;
}
.error {
  color: red;
  background-color: rgb(248, 235, 227);
}
.error-message {
  color:rgb(231, 9, 9);
  }

.page-header {
    margin-top: 0rem;
    font-size: 1.25rem;
    color: #fff;
}

.gradient {
    background: rgb(50, 238, 166);
    background: linear-gradient(
      135deg,
      rgb(255, 24, 16) 0%,
      rgb(250, 152, 41) 100%
    );
}

.gradient_main {
  background: rgb(218, 215, 214);
  background: linear-gradient(
    135deg,
    rgb(194, 55, 55) 0%,
    rgb(250, 96, 7) 100%
  );
}

.gradient_payment-0 {
    background: rgb(50, 238, 166);
    background: linear-gradient(
      135deg,
      rgb(5, 57, 100) 0%,
      rgb(16, 90, 187) 100%
    );
    border-bottom: #f8f9fcea solid 2px;
}
.gradient_main_payment-0 {
    background: rgb(218, 215, 214);
    background: linear-gradient(
      135deg,
      rgb(13, 102, 204) 0%,
      rgb(5, 75, 155) 100%
    );
}
.gradient_payment {
    background: rgb(50, 238, 166);
    background: linear-gradient(
      135deg,
      rgb(6, 59, 48) 0%,
      rgb(7, 107, 110) 100%
    );
    border-bottom: #f8f9fcea solid 2px;
}

.gradient_main_payment {
    background: rgb(218, 215, 214);
    background: linear-gradient(
      135deg,
      rgb(4, 49, 45) 0%,
      rgb(6, 94, 28) 100%
    );
}

.margin-bottom-10 {
  margin-bottom: -10px;
}
.margin-top-10 {
  margin-top: -50px;
}

.responsiveV1 {
  width: 100%;
  max-width: 100px;
  height: auto;
}
.responsiveV1-5 {
  width: 100%;
  max-width: 140px;
  height: auto;
}
.responsiveV2 {
  width: 100%;
  max-width: 190px;
  height: auto;
}
.responsiveV3 {
  width: 100%;
  max-width: 200px;
  height: auto;
}

footer {
  background: #fff;
  font-size: 1.25rem;
  padding: 5vh 0;
  text-align: center;
  position: relative;
}

main {
  background: linear-gradient(to bottom, #ffffff 0%, #dddee1 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  padding: 0vh 0 10vh;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.main_left {
  padding: 0vh 2vh 2vh 10vh;
  text-align: left;
}

.main_right {
  background: linear-gradient(to bottom, #fdfcfc 0%, #e9eaeb 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  padding: 0vh 0 3vh;
  text-align: left;
}

.box-msg {
  background-color: rgb(247, 247, 247);
  border-left: 2px solid rgb(241, 145, 36);
  border-radius: 4px;
  box-shadow: 5px 5px 5px #aaaaaa;
  padding: 1rem;
}

.box-input {
  background-color: #fff;
  border-left: 2px solid rgb(4, 214, 4);
  border-top: 1px solid rgb(4, 214, 4);
  border-radius: 4px;
  box-shadow: 5px 5px 5px #aaaaaa;
  padding: 1rem;
}

/* Gray border */
hr.gray_1 {
  border-top: 1px dotted rgb(86, 112, 96);
}
/* Green border */
hr.green_1 {
  border-top: 1px dotted rgb(17, 218, 94);
}

/* Floating column for labels: width */
.col-10 {
  float: left;
  width: 10%;
  padding: 0 10px 0 10px;
}
.col-20 {
  float: left;
  width: 20%;
  padding: 0 10px 0 10px;
}
.col-30 {
  float: left;
  width: 30%;
  padding: 0 10px 0 10px;
}
.col-40 {
  float: left;
  width: 40%;
  padding: 0 10px 0 10px;
}
.col-50 {
  float: left;
  width: 50%;
  padding: 0 10px 0 10px;
}
.col-60 {
  float: left;
  width: 60%;
  padding: 0 10px 0 10px;
}
.col-70 {
  float: left;
  width: 70%;
  padding: 0 10px 0 10px;
}
.col-80 {
  float: left;
  width: 80%;
  padding: 0 10px 0 10px;
}
.col-100 {
  float: left;
  width: 100%;
  padding: 0 10px 0 10px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Preview */
a.hiddenTab {visibility:hidden; display:none;}
/* Button */
.button-upload{
  border: 0px;
  background-color: deepskyblue;
  color: white;
  padding: 5px 15px;
  margin-left: 10px;
}

/* box */
.form-1-box { 
  padding-top: 10px; 
  text-align: left; 
  border-radius: 5px;
  background: rgba(245, 244, 244, 0.2)
}
 
.form-1-box legend {
    font-size: medium;
    width: 100%;
    color: rgb(252, 248, 248);
}
 
.form-1-box .form-check-label {
    line-height: 1.5;
    vertical-align: top;
}
 
.form-1-box input[type="text"],
.form-1-box input[type="email"],
.form-1-box input[type="password"] {
    background: none;
    border: 1px solid rgb(248, 247, 247);
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: rgb(252, 249, 249);
    box-shadow: none;
}
 
.form-1-box input[type="text"]:focus,
.form-1-box input[type="email"]:focus,
.form-1-box input[type="password"]:focus {
    outline: 0;
    background: none;
    border: 1px solid #fce304;
    box-shadow: none;
}
 
.form-1-box input[type="text"]::-moz-placeholder,
.form-1-box input[type="email"]::-moz-placeholder,
.form-1-box input[type="password"]::-moz-placeholder {
    color: #bbb;
    font-style: italic;
}
 
.form-1-box input[type="text"]:-ms-input-placeholder,
.form-1-box input[type="email"]:-ms-input-placeholder,
.form-1-box input[type="password"]:-ms-input-placeholder {
    color: #bbb;
    font-style: italic;
}
 
.form-1-box input[type="text"]::-webkit-input-placeholder,
.form-1-box input[type="email"]::-webkit-input-placeholder,
.form-1-box input[type="password"]::-webkit-input-placeholder {
    color: #bbb;
    font-style: italic;
}
 
.form-1-box button.btn-customized {
    margin-top: 0px;
    padding: .5rem 1rem;
    background: #41bb35;
    border: 0;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    box-shadow: none;
}
 
.form-1-box button.btn-customized:hover, 
.form-1-box button.btn-customized:active, 
.form-1-box button.btn-customized:focus, 
.form-1-box button.btn-customized:active:focus, 
.form-1-box button.btn-customized.active:focus,
.form-1-box button.btn.btn-primary:not(:disabled):not(.disabled):active,
.form-1-box button.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    outline: 0;
    background: #5df504;
    border: 0;
    color: #fff;
    box-shadow: none;
}

/* == */
.form-2-box { 
  padding-top: 20px; 
  text-align: left; 
  border-radius: 5px;
  background: rgba(245, 244, 244, 0.2)
}
 
.form-2-box legend {
    width:inherit; /* Or auto */
    font-size:medium;
    line-height: 0px;
    text-transform: uppercase;
    color: rgb(252, 248, 248);
}
 
.form-2-box .form-check-label {
    line-height: 1.5;
    vertical-align: top;
}

.form-2-box label {
  font-size: 15px;
  color: #fff;
}
 
.form-2-box input[type="number"],
.form-2-box input[type="text"],
.form-2-box input[type="email"],
.form-2-box input[type="password"] {
    background: none;
    border: 1px solid rgb(248, 247, 247);
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: rgb(252, 249, 249);
    box-shadow: none;
}
 
.form-2-box input[type="number"]:focus,
.form-2-box input[type="text"]:focus,
.form-2-box input[type="email"]:focus,
.form-2-box input[type="password"]:focus {
    outline: 0;
    background: none;
    border: 1px solid #fce304;
    box-shadow: none;
}
 
.form-2-box input[type="number"]::-moz-placeholder,
.form-2-box input[type="text"]::-moz-placeholder,
.form-2-box input[type="email"]::-moz-placeholder,
.form-2-box input[type="password"]::-moz-placeholder {
    color: #bbb;
    font-style: italic;
}
 
.form-2-box input[type="number"]:-ms-input-placeholder,
.form-2-box input[type="text"]:-ms-input-placeholder,
.form-2-box input[type="email"]:-ms-input-placeholder,
.form-2-box input[type="password"]:-ms-input-placeholder {
    color: #bbb;
    font-style: italic;
}
 
.form-2-box input[type="number"]::-webkit-input-placeholder,
.form-2-box input[type="text"]::-webkit-input-placeholder,
.form-2-box input[type="email"]::-webkit-input-placeholder,
.form-2-box input[type="password"]::-webkit-input-placeholder {
    color: #bbb;
    font-style: italic;
}
 
.form-2-box button.btn-customized {
    margin-top: 1rem;
    padding: .75rem 1.5rem;
    background: #41bb35;
    border: 0;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    box-shadow: none;
}
 
.form-2-box button.btn-customized:hover, 
.form-2-box button.btn-customized:active, 
.form-2-box button.btn-customized:focus, 
.form-2-box button.btn-customized:active:focus, 
.form-2-box button.btn-customized.active:focus,
.form-2-box button.btn.btn-primary:not(:disabled):not(.disabled):active,
.form-2-box button.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    outline: 0;
    background: #5df504;
    border: 0;
    color: #fff;
    box-shadow: none;
}

.form-2-box p{
  font-size: 15px;
  color: #fff;
}

#myTable{
  font-size: 14px;
}

.link-1{
  font-size: 15px;
  color: #fff;
  text-decoration: underline;
}
.link-1:hover{
  font-size: 15px;
  color: #ccc8c8;
  text-decoration: underline;
}