/*@import url('https://fonts.googleapis.com/css?family=K2D&display=swap');*/
/*font-family: 'K2D', sans-serif;*/


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400&display=swap');

body {
    /*font-family: 'K2D', sans-serif;
        font-family: 'Sarabun', sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .pichead{
        background-image: url("../Images/bg.jpg");
        height: 250px;
    }
    .imgText{
        margin-top: 40px;
    }

    .textHead {
        font-size: 25px;
    }

    .textTitle{
       font-size: 20px;
    }

    label {
        font-size: 15px;
    }

    .form-horizontal {
        margin-top: 30px;
    }

    .form-control-static{
        font-size: 14px;
    }

    .h2, h2 {
        font-size: 22px;
    }
    .h3, h3 {
        font-size: 18px;
    }
    .picRaopumjai{
        width: 50%;
    }

    legend {
        font-size: 14px !important;
    }




}

/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 600px) {
    .pichead {
        background-image: url("../Images/bg.jpg");
        height: 250px;
    }
    .imgText{
        margin-top: 50px;
    }
    .textHead {
        font-size: 30px;
    }
    .textTitle{
        font-size: 25px;
     }

    label {
        font-size: 15px;
    }

    .form-horizontal {
        margin-top: 30px;
    }
    .form-control-static{
        font-size: 14px;
    }
    .picRaopumjai{
        width: 50%;
    }
    legend {
        font-size: 15px !important;
    }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .pichead {
        background-image: url("../Images/bg.jpg");
        height: 350px;
    }
    .imgText{
        margin-top: 60px;
    }
    .textHead {
        font-size: 40px;
    }
    .textTitle{
        font-size: 35px;
     }
    label {
        font-size: 16px;
    }
    .form-horizontal{
        margin-top: 10px;
    }
    .form-control-static{
        font-size: 17px;
    }
    .picRaopumjai{
        width: 30%;
    }
    legend {
        font-size: 15px !important;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .pichead {
        background-image: url("../Images/bg.jpg");
        height: 400px;
    }
    .imgText{
        margin-top: 80px;
    }
    .textHead {
        font-size: 45px;
    }
    .textTitle{
        font-size: 40px;
     }
     label {
        font-size: 17px;
    }
    .form-horizontal{
        margin-top: 10px;
    }
    .form-control-static{
        font-size: 17px;
    }
    .picRaopumjai{
        width: 30%;
    }
    legend {
        font-size: 18px !important;
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .pichead {
        background-image: url("../Images/bg.jpg");
        height: 450px;
    }
    .imgText{
        margin-top: 58px;
    }
    .textHead {
        font-size: 50px;
    }
    .textTitle{
        font-size: 40px;
     }
     label {
        font-size: 18px;
    }
    .form-horizontal{
        margin-top: 10px;
    }
    .picRaopumjai{
        width: 35%;
    }
    legend {
        font-size: 18px !important;
    }
}

.imgText{
    text-align: center;
}
.textHead {
    color: white;
}
.textTitle{
    color: white;
}

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

.form-control-static {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 0px;
    margin-bottom: 0;
    /* font-size: 17px; */
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 500;
    /* font-size: 18px; */
}

.graduateNo{
    margin-top: 50px;
    margin-bottom: 50px;

}

.frameText{
    border: solid 2px #ba8a02;
}

.graduateNoTitle{
    margin-top: 70px;
}

.graduateNoDetail{
    margin-bottom: 70px;
    font-size: 50px;
    margin-top: -20px;
}

.remarkDetail{
    color: #484848;
    font-size: 16px;
    /* margin-top: 40px; */
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.5;
    color: inherit;
}

.remark{
    margin-top: 40px;
    margin-bottom: 40px;
}

.highlight{
    color: red;
}





/* checked */
* {
    /*font-family: 'K2D', sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
};}

@keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 35px;
  width: 35px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}
.option-input:hover {
  background: #9faab7;
}
.option-input:checked {
  background: #7840e0;
}
.option-input:checked::before {
  height: 35px;
  width: 35px;
  position: absolute;
  content: '✔';
  display: inline-block;
  font-size: 20.66667px;
  text-align: center;
  line-height: 35px;
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #7840e0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}

.option-input .checkbox{

}

/* fieldset */
fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 ;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
    margin-top: 23px;
}

legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 0px;
    font-size: 18px;
    line-height: inherit;
    color:  #d00;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

/* Show Loading and hide*/

#dvLoading {
    /*background: #9faab7 url("../Images/loading3.gif") no-repeat center center;*/
    background: url("../Images/loading3.gif") no-repeat center center;
    height: 100px;
    width: 150px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
}