@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap');

* {
    font-family: 'Kanit', sans-serif;
}
/* DIV */
.row-line {
    padding:15px 0px;margin:15px 0px;
    border-bottom:1px solid #999;
}


/* Nav */
.ssi-hover.collapsible-header:hover, .ssi-hover.collapsible-header.active {
    background-color: #004899 !important;color:white !important;
}
.ssi-hover li a:not(.collapsible-header):active, .ssi-hover li a:not(.collapsible-header):hover {
    color: #002d57 !important;
    background:#c8dfff;
}


.csi-hover.collapsible-header:hover, .csi-hover.collapsible-header.active {
    background-color: #7aa8e6 !important;color:black !important;
}

.pdca-hover.collapsible-header:hover, .pdca-hover.collapsible-header.active {
    background-color: #999 !important;color:black !important;
}

.admin-hover.collapsible-header:hover, .admin-hover.collapsible-header.active {
    background-color: #db4444 !important;color:white !important;
}
.navy-blue-skin .side-nav .collapsible li a:not(.collapsible-header).active, .navy-blue-skin .side-nav .collapsible li a:not(.collapsible-header):active, .navy-blue-skin .side-nav .collapsible li a:not(.collapsible-header):hover {
    color: #002d57 !important;
    background:#c8dfff;
}
.btn {border-radius:.5rem}
.btn-edit {padding:.5rem 1rem;margin:0px;}
.badge-status {margin-top: 5px;}

/* ------- Table Fixed --------- */
.table-fixed-header          { overflow-y: auto; height: 550px; }
.table-fixed-header thead    { position: sticky; top: 0; }
.table-fixed-header table    { border-collapse: collapse; width: 100%; }

/* ------- KPI Focus --------- */
.bubble-top-inactive {
    margin-top:60px;
}
.bubble-top-active {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
    border-radius: 20px;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;
    background-color: #1c2331;
    margin-top:5px;
    margin-bottom: 15px;
}
.bubble-top-active > span::after{
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    border-top: 20px solid #ff9900;
    position: absolute;
    top: 40px;
    left: calc(50% - 20px);
}
.text-bullet-round {
    position:relative;top:0px;
    border-radius: 25px;
    width:40px;height:40px;
    display:inline-flex;
    padding:10px 16px;
}

/* ------- Font Size --------- */

.font-200 {
    font-size:200% !important;
}
.font-175 {
    font-size:175% !important;
}
.font-150 {
    font-size:150% !important;
}
.font-125 {
    font-size:125% !important;
}
.font-110 {
    font-size:110% !important;
}
.font-100 {
    font-size:100% !important;
}
.font-90 {
    font-size:90% !important;
}
.font-80 {
    font-size:80% !important;
}
.font-70 {
    font-size:70% !important;
}
.font-60 {
    font-size:60% !important;
}
.font-50 {
    font-size:50% !important;
}

.clear {
    clear:both;
    height:25px;
}
.hidden {
    display:none !important;
}

/* Language */
body.tha eng, body.tha div.eng {
    display:none;
}
body.eng tha, body.eng div.tha {
    display:none;
}

/* Customize Layout */
@media (min-width: 960px){
    main {
        padding-left: 220px !important;
    }
}