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


.csi-hover.collapsible-header:hover, .csi-hover.collapsible-header.active {
    background-color: #2962ff !important;
}


/* ------- 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;
    font-family: Arial;
    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;
    }
}