/*@font-face {
    font-family: 'Kanit', sans-serif;
}*/
/*@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@font-face {
    font-family: 'PT Sans', sans-serif;
}*/

/*@import url(../fonts/thsarabunnew.css);*/
[class*="col-"] {
    padding-left: 7.5px;
    padding-right: 7.5px;
}
.color-1{
  background-color: #003830;
}
.color-2{
  background-color: #00695c;
}
.color-3{
  background-color: #005348;
}
.bg-color1{
  background-color: #f5f5f5;
}
.bg-color2{
  background-color: #e0e0e0;
}
html, body {
    overflow: auto;
}
header {
  position: relative;
  height: 60px;
  background-color: #4c106c;
  color: #FFFFFF;
  right: 0px;
  overflow:hidden;
}
article {
  padding: 15px 5% 15px 5%;
  height: auto;
}
footer {
  color: #FFFFFF;
  height: 70px;
  background-color: #00695c;
  //position: fixed;
  //bottom: 0px;
  padding: 5px 1rem 1rem 1rem;
  width:100%;
  overflow:hidden;
}
body {
  //padding-bottom:0px;
  /*font-family: 'Kanit', sans-serif;*/
  font-family: 'PT Sans', sans-serif;
   /*font-family: 'THSarabunNew', sans-serif;*/
}
.table-hover>tbody>tr:hover {
    background-color: #ececec;
}
.grayscale{
  -webkit-filter: grayscale(1); /* Webkit */
  filter: gray; /* IE6-9 */
  filter: grayscale(0.75); /* W3C */
}
.white-space{
  height: 80px;
  width:100%;
}
.black-line{
  background-color: #26003d;

  position: relative;
  height: 5px;
  width:100%;
}
hr{
  margin: 0px 5px 0px 5px;
}
.float-text{
  /*float:left;
  text-align: right;*/
  display:inline-block;
}
.content{
  //margin: 5px 5px 0 5px;
  padding: 20px 5% 10px 5%;
  //width: 90%;
  //height: auto;
}
.contain{
  padding-left: 2%;
  padding-right: 2%;
}
.card {
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
    border-radius: 5px;
    background-color: #f5f5f5;
    margin-bottom: 10px;
}
.card:hover {
    box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
    //border-radius: 5px;
}
.card-head {
    border-radius: 5px 5px 0 0;
    background-color: #0B7E6E;
}
.radius-top {
    border-radius: 5px 5px 0 0;
}
.radius-bot {
    border-radius: 0 0 5px 5px;
}
.radius-left {
    border-radius: 5px 0 0 5px;
}
.radius-right {
    border-radius: 0 5px 5px 0;
}
.radius-all {
    border-radius: 5px 5px 5px 5px;
}
.card-topic {
    min-height: 40px;
    padding-top: 5px;
    color: #FFF;
    align-items : center;
}
.card-content {
    //padding: 5px;
}
.card-list {
    min-height: 30px;
    padding-top: 5px;
    width:100%;
    cursor: pointer;
}
.card-bot {
    border-radius: 0 0 3px 3px;
}
.pointer{
  cursor: pointer;
}
.border-bot{
  border-bottom: 1px solid rgba(0, 77, 64,0.1);
}
.card-list:hover {
    background-color: rgba(0,0,0,0.1);
}
.content-left{
  float:left;
  //margin: 115px 0 0 5px;
  //padding-top: 10px;
  //padding-left: 10px;
  width: 15%;
}
.content-right{
  float:right;
  margin-top: 115px;
  padding-top: 10px;
  padding-right: 10px;
  width: 15%;
}
.content-main{
  padding: 20px 15px 30px 15px;
  min-height: 420px;
}
.row{
          //  padding-bottom:5px;
            //padding-top:5px;
        }
        .vertical-align {
        display: flex;
        align-items: center;
        //justify-content: center;
        flex-direction: row;
        }
        .txt-r {
            text-align: right;
        }
        .txt-l {
            text-align: left;
        }
        .txt-c{
          text-align: center;
        }
        .topic{
            padding-left:5px;
            padding-right:5px;
            text-align:right;
        }
        .pad20{
            padding-top:15px;
            padding-bottom:15px;
        }
        .wspace{
            height:75px;
        }
        .form-sm{
            display:inline-block;
            width:100px;
        }
        .form-md{
            display:inline-block;
            width:300px;
        }
        .form-lg{
            display:inline-block;
            width:90%;
        }
        .sq-checkbox{
            display:inline-block;
            width:35px;
            height:35px;
            cursor:pointer;
            overflow:hidden;
            border-width: thin;
        }
        .top-0{
            padding-top: 0px;
        }
        .top-20{
            margin-top: 20px;
        }
        .bot-0{
            padding-bottom: 0px;
        }
        .pad-10{
            padding-left: 10px;
        }
        .inline{
          display:inline-block;
        }
        pad-50{
            padding-left: 50px;
        }
        pad-50{
            padding-left: 50px;
        }
		pad-10{
            padding-left: 10px;
        }
        .pad-5{
                padding: 5px;
            }
            .padlr-0{
              padding-left: 0px;
              padding-right: 0px;
            }
        #titlename{
          font-size: 30px !important;
          //width: 80% !important;
          padding-top: 30px;
          padding-right: 10%;
        }
        .bs-wizard {margin-top: 15px;margin-bottom:15px}

        /*Form Wizard*/
        .bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
        .bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
        .bs-wizard > .bs-wizard-step + .bs-wizard-step {}
        .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
        .bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
        .bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
        .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
        .bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
        .bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
        .bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
        .bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
        .bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
        .bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
        .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
        .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
        .bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
        .bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
        .bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
        /*END Form Wizard*/

.obj-success{
  background-color: rgba(125, 222, 91, 0.35);
  border-color: rgba(53, 167, 13, 0.5);
}
.obj-pending{
  background-color: rgba(235, 169, 57, 0.35);
  border-color: rgba(180, 113, 0, 0.5);
}
.obj-failure{
  background-color: rgba(222, 91, 91, 0.35);
  border-color: rgba(167, 18, 13, 0.5);
}
.tb-hover:hover{
  filter: brightness(85%);
}
.chxbx-lg{
  width:40px; height:30px;
}
.black-ribbon {
  cursor: pointer;
  position: fixed;
  z-index: 9999;
  width: 50px;
}
@media only all and (min-width: 768px) {
  .black-ribbon {
    width: 60px;
  }
}
@media only all and (min-width: 900px) {
  .black-ribbon {
    width: 70px;
  }
}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }