@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: 'Sarabun', sans-serif;
}

h1,h2,h3{
    font-family: 'Sarabun', 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;
  }

}

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

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

.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(226, 38, 5) 0%,
      rgb(250, 95, 5) 100%
    );
}

.gradient_main_set {
  background: rgb(218, 215, 214);
  background: linear-gradient(
    135deg,
    rgb(207, 27, 3) 0%,
    rgb(248, 75, 45) 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: 50%;
  max-width: 300px;
  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: 20px; 
  text-align: left; 
  border-radius: 5px;
  background: rgba(201, 199, 199, 0.2)
}
 
.form-1-box legend {
    font-size:medium;
    line-height: 20px;
    text-transform: uppercase;
    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: 1rem;
    padding: .75rem 1.5rem;
    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 {
    font-size:medium;
    line-height: 20px;
    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: 20px;
    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;
}

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

.form-3-box label {
  font-size: 15px;
  color: #fff;
}
 
.form-3-box input[type="number"],
.form-3-box input[type="text"],
.form-3-box input[type="email"],
/*
.form-3-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-3-box input[type="number"]:focus,
.form-3-box input[type="text"]:focus,
.form-3-box input[type="email"]:focus,
.form-3-box input[type="password"]:focus {
    outline: 0;
    background: none;
    border: 1px solid #cfcfcf;
    box-shadow: none;
}
 
.form-3-box input[type="number"]::-moz-placeholder,
.form-3-box input[type="text"]::-moz-placeholder,
.form-3-box input[type="email"]::-moz-placeholder,
.form-3-box input[type="password"]::-moz-placeholder {
    color: #bbb;
    font-style: italic;
}
 
.form-3-box input[type="number"]:-ms-input-placeholder,
.form-3-box input[type="text"]:-ms-input-placeholder,
.form-3-box input[type="email"]:-ms-input-placeholder,
.form-3-box input[type="password"]:-ms-input-placeholder {
    color: #bbb;
    font-style: italic;
}
 
.form-3-box input[type="number"]::-webkit-input-placeholder,
.form-3-box input[type="text"]::-webkit-input-placeholder,
.form-3-box input[type="email"]::-webkit-input-placeholder,
.form-3-box input[type="password"]::-webkit-input-placeholder {
    color: #bbb;
    font-style: italic;
}
 
.form-3-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-3-box button.btn-customized:hover, 
.form-3-box button.btn-customized:active, 
.form-3-box button.btn-customized:focus, 
.form-3-box button.btn-customized:active:focus, 
.form-3-box button.btn-customized.active:focus,
.form-3-box button.btn.btn-primary:not(:disabled):not(.disabled):active,
.form-3-box button.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    outline: 0;
    background: #5df504;
    border: 0;
    color: #fff;
    box-shadow: none;
}

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

#myTable{
  font-size: 14px;
}

.wrapper-login{
  background: #fff;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
              0 32px 64px -48px rgba(0,0,0,0.5);
}

/* Login & Signup Form CSS Start */
.form-login{
  padding: 20px;
}
.form-login header{
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}
.form-login form{
  margin: 20px 0;
}
.form-login form .error-text{
  color: #721c24;
  padding: 8px 10px;
  text-align: center;
  border-radius: 5px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  margin-bottom: 10px;
  display: none;
}
.form-login form .name-details{
  display: flex;
}
.form-login .name-details .field:first-child{
  margin-right: 10px;
}
.form-login .name-details .field:last-child{
  margin-left: 10px;
}
.form-login form .field{
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
  position: relative;
}
.form-login form .field label{
  margin-bottom: 2px;
}
.form-login form .input input{
  height: 40px;
  width: 100%;
  font-size: 16px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.form-login form .field input{
  outline: none;
}
.form-login form .image input{
  font-size: 17px;
}
.form-login form .button input{
  height: 45px;
  border: none;
  color: #fff;
  font-size: 17px;
  background: rgb(66, 4, 211);
  border-radius: 5px;
  cursor: pointer;
  margin-top: 13px;
}
.form-login form .button input:hover{
  background: rgb(92, 25, 248);
}
.form-login form .field i{
  position: absolute;
  right: 15px;
  top: 70%;
  color: rgb(27, 27, 27);
  cursor: pointer;
  transform: translateY(-50%);
}
.form-login .link{
  text-align: center;
  margin: 10px 0;
  font-size: 17px;
}
.form-login .link a{
  color: #333;
}
.form-login .link a:hover{
  text-decoration: underline;
}

/*
@media screen and (max-width: 991px) {
  .card1 {
      border-bottom-left-radius: 0px;
      border-top-right-radius: 10px
  }

  .card2 {
      border-bottom-left-radius: 10px;
      border-top-right-radius: 0px
  }

}
*/
/* End Login & Signup Form CSS Start */

/* overlay loading */
#overlay-load {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
opacity: 0.8;
}

/*=============== table ===================*/
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  margin: .5em 0 .75em;
}

table tr {
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: left;
}

table th {
  text-transform: uppercase;
}

@media screen and (max-width: 500px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: right;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

.bg_01{
  background: rgba(65, 64, 64, 0.5);
  border-radius: 5px;
  padding: 5px;
}

.bg_index_text{
  background: rgba(141, 140, 140, 0.5);
  border-radius: 5px;
  padding: 5px;
}
.bg_index{
  background: rgba(231, 229, 229, 0.5);
  border-radius: 5px;
  padding: 5px;
}
.bg_bio_form{
  background: rgba(253, 248, 248);
  border-radius: 5px;
  padding: 5px;
}

.img-m{
  border-radius: 8px;
  width: 80%;
  height: auto;
}
.img-1 {
  border-radius: 8px;
  width: 20%;
  height: auto;
}
.img-2 {
  border-radius: 8px;
  width: 40%;
  height: auto;
}