@font-face {
    font-family: 'thai_sans_literegular';
    src: url('../fonts/thaisanslite_r1-webfont.eot');
    src: url('../fonts/thaisanslite_r1-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/thaisanslite_r1-webfont.woff2') format('woff2'),
        url('../fonts/thaisanslite_r1-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    padding: 0;
    position: relative;
    font-family: 'thai_sans_literegular';
    background-color: #e9eaec;
    font-size: 22px !important;
    min-height: 100vh;
}

body>.container {
    margin-bottom: 40px;
    line-height: 1.5;
}

@media print {
    div.page {
        height: 100%;
        margin: 0px 0px 0px 0px;
    }
}

.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}

.bs-callout2 {
    padding: 20px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    background: #c8e8c2;
    font-size: 23px;
}


.bs-callout3 {
    padding: 20px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    background: #ffc1c1;
    font-size: 23px;

}

.bs-callout4 {
    padding: 20px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    background: #ffffff;
    font-size: 23px;

}

.bs-callout-danger {
    border-left-color: #d9534f;
}

.bs-callout-primary {
    border-left-color: #428bca;
}

h1, h2 {
    font-family: 'thai_sans_literegular';
    text-transform: uppercase;
    font-weight: bold;
}

h3 {
    font-weight: 900;
}

/* a:link { color: #363636; text-decoration: none}
a:visited { color: #363636; text-decoration: none}
a:active { color: #4E4E4E; text-decoration: none}
a:hover { color: #4E4E4E; text-decoration: none} */

a {
    color: #363636;
}


a:hover {
    color: #4E4E4E;
}

li.list-group-item {
    font-weight: 100;
    font-size: 26px;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #5fc3f1;
    border-color: #337ab7;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.menulist {
    padding-left: 0;
    list-style: none;
}

/* .menulist a {
  text-decoration: none;
} */

.menulist .list-group-item {
    padding: 10px 15px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.menulist .active {
    background: #5fc3f1;
    border: #000000;

}

.menulist li:hover {
    background: #76c5e9;

}

.document {
    font-weight: bold;
}

.pointer {
    cursor: pointer;
    color: black;
    text-decoration: underline;
}

.pointer:hover {
    color: black;
    text-decoration: none;
}

.pointer:visited {
    color: black;
}

.panel-default>.panel-heading {
    color: #f8f8f8;
    background-color: #63aff1;
    font-size: 25px;
}

.panel-default>.panel-heading2 {
    color: #FFFFFF;
    background-color: #d00404;
    font-size: 28px;
}

.panel-body {
    border-color: #3598dc;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-warning {
    height: 20px;
    width: 20px;
}

.img-logoheader {
    max-height: 100px;
    width: auto;

}

.img-iconfooter {
    height: 20px;
    width: 20px;
}

.img-Newgif {
    width: 50px;
}

.img-steprg {
    width: 80%;
    height: 80%;
}

.pro {
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
    padding-left: 40px;
    list-style-position: outside;
}

.color-asterisk {
    color: #f00000;
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgba(0, 0, 0, .125)
}

.btn-success {
    background-color: #5cb85c;
}

.problemdt {
    font-size: 20px;
    font-weight: bold;
    ;
    color: green;
    background-color: #f7f7de;
}


.md-stepper-horizontal {
    display: table;
    width: 100%;
    margin: 0 auto;
    background-color: #e9eaec;
    /* box-shadow: 0 3px 8px -6px rgba(0,0,0,.50); */
}

.md-stepper-horizontal .md-step {
    display: table-cell;
    position: relative;
    padding: 24px;
}

.md-stepper-horizontal .md-step.active .md-step-circle {
    background-color: rgb(33, 150, 243);
}

/* .md-stepper-horizontal .md-step:hover,
  .md-stepper-horizontal .md-step:active {
  background-color:rgba(0,0,0,0.04);
  } */

.md-stepper-horizontal .md-step:active {
    border-radius: 15% / 75%;

}

.md-stepper-horizontal .md-step:first-child:active {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.md-stepper-horizontal .md-step:last-child:active {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.md-stepper-horizontal .md-step:hover .md-step-circle {
    background-color: #757575;
}

.md-stepper-horizontal .md-step:first-child .md-step-bar-left,
.md-stepper-horizontal .md-step:last-child .md-step-bar-right {
    display: none;
}

.md-stepper-horizontal .md-step .md-step-circle {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    background-color: #999999;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #e9eaec;
}

.md-stepper-horizontal .md-step.active .md-step-circle {
    background-color: rgb(33, 150, 243);
}

.md-stepper-horizontal.green .md-step.active .md-step-circle {
    background-color: #00ae4d;
}


.md-stepper-horizontal .md-step.done .md-step-circle:before {
    font-family: "FontAwesome";
    font-weight: 100;
    content: "\f00c";
}

.md-stepper-horizontal .md-step.done .md-step-circle *,
.md-stepper-horizontal .md-step.editable .md-step-circle * {
    display: none;
}

.md-stepper-horizontal .md-step.editable .md-step-circle {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.md-stepper-horizontal .md-step.editable .md-step-circle:before {
    font-family: "FontAwesome";
    font-weight: 100;
    content: "\f040";
}

.md-stepper-horizontal .md-step .md-step-title {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 600;
}

.md-stepper-horizontal .md-step .md-step-title,
.md-stepper-horizontal .md-step .md-step-optional {
    text-align: center;
    color: rgba(0, 0, 0, 0.26);
}

.md-stepper-horizontal .md-step.active .md-step-title {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87);
}

.md-stepper-horizontal .md-step.active.done .md-step-title,
.md-stepper-horizontal .md-step.active.editable .md-step-title {
    font-weight: 600;
}

.md-stepper-horizontal .md-step .md-step-optional {
    font-size: 12px;
}

.md-stepper-horizontal .md-step.active .md-step-optional {
    color: rgba(0, 0, 0, 0.54);
}

.md-stepper-horizontal .md-step .md-step-bar-left,
.md-stepper-horizontal .md-step .md-step-bar-right {
    position: absolute;
    top: 36px;
    height: 1px;
    border-top: 1px solid #dddddd;
}

.md-stepper-horizontal .md-step .md-step-bar-right {
    right: 0;
    left: 50%;
    margin-left: 20px;
}

.md-stepper-horizontal .md-step .md-step-bar-left {
    left: 0;
    right: 50%;
    margin-right: 20px;
}

@media (min-width: 768px) {
    .menu-column {
        max-width: 255px;
    }
}


@media (max-width: 768px) {
    .menu-column {
        width: 100%;
    }

    .content-column {
        width: 100%;
    }
}

input[type="radio"] {
    border: 1px solid gray;
    /* ทำให้เส้นขอบชัด */
    border-radius: 50%;
}

.ql-align-left {
    text-align: left;
}

.ql-align-center {
    text-align: center;
}

.ql-align-right {
    text-align: right;
}

.ql-align-justify {
    text-align: justify;
}