*
{
    padding:0px;
    margin:0px;
    font-family: "Bai Jamjuree", serif;
}

.mh10p0
{
    min-height:10px;
    padding:0px;
}

.mh10p5
{
    min-height:10px;
    padding:5px;
}

.mh10p10
{
    min-height:10px;
    padding:10px;
}

.loginPageOuter
{
    width:100%;
    height:100vh;
    background-color:#0a2d44;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
}

.loginPageCenterBoxOuter
{
    width:350px;
    min-height:20px;
    background-color:#fff;
    border-radius:5px;
    padding:10px;
}

.loginPageCenterBoxOuter img
{
    width:100%;
    height:25px;
    float:left;
    object-fit: contain;
    object-position: center;
    margin-top:3px;
    margin-bottom:3px;
}

.loginPageCenterContentsOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-top:15px;
    padding-top:15px;
    border-top:1px solid #dadada;
}

.loginPageInputBoxOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-bottom:10px;
}

.loginPageInputBoxOuter p
{
    width:100%;
    float:left;
    font-size:14px;
    font-weight:550;
    color:#333;
    margin:0px;
    margin-bottom:4px;
}

.loginPageInputBoxOuter input
{
    width:100%;
    height:40px;
    float:left;
    border-radius:4px;
    border:1px solid #dadada;
    outline:0px!important;
    padding:0px 10px;
    padding-bottom:3px;
}

.loginPageLineLinkOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.loginPageLineLinkOuter a
{
    text-decoration:none!important;
    color:#e51122!important;
    font-weight:500;
    font-size:14px;
}

.loginButton
{
    width:100%;
    height:40px;
    float:left;
    background-color:#e51122;
    color:#fff;
    font-size:14px;
    font-weight:600;
    border:0px;
    outline:0px;
    border-radius:4px;
    margin-top:12px;
    padding-bottom:2px;
}

.loginPageNotificationBoxOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:#e51122;
    color:#fff;
    padding:10px;
    margin-bottom:15px;
    border-radius:4px;
    font-size:13px;
    font-weight:500;
    padding-bottom:8px;
}

.notificationSuccess
{
    background-color:rgb(0, 194, 0);
}

.notificationInfo
{
    background-color:rgb(0, 110, 194);
}

.notificationWarning
{
    background-color:rgb(255, 98, 0);
}

.notificationDanger
{
    background-color:rgb(255, 0, 0);
}

@media only screen and (max-width: 600px) 
{
    .loginPageCenterBoxOuter
    {
        width:calc(100% - 30px);
        float:left;
    }
}

.contentPageOuter
{
    width:100%;
    height:100vh;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sidebarOuter
{
    width:300px;
    height:100vh;
    float:left;
    background-color:#fff;
    padding:15px;
    overflow:auto;
    border-right:1px solid #dadada;
}

.sidebarLogoOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-bottom:10px;
}

.sidebarLogoOuter img
{
    width:100%;
    height:25px;
    object-fit: contain;
    object-position: center left;
}

.sidebarUserOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:10px 0px;
    padding:10px 0px;
    border-top:1px solid #f5f5f5;
    border-bottom:1px solid #f5f5f5;
    gap:10px;
}

.sidebarUserImageBox
{
    width:35px;
    height:35px;
    background-color:#dadada;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    color:#333;
}

.sidebarUserContentsOuter
{
    flex:1;
    min-height:10px;
    float:left;
}

.sidebarUserContentsOuter h3
{
    width:100%;
    font-size:14px;
    font-weight:600;
    color:#333;
    margin:0px;
    margin-bottom:2px;
}

.sidebarUserContentsOuter p
{
    width:100%;
    margin:0px;
    float:left;
    font-size:12px;
    opacity:0.8;
}

.customScroll::-webkit-scrollbar 
{
    width: 3px;
}
  
.customScroll::-webkit-scrollbar-track 
{
    background: #f1f1f1; 
}
   
.customScroll::-webkit-scrollbar-thumb 
{
    background: #cbcbcb; 
}
  
.customScroll::-webkit-scrollbar-thumb:hover 
{
    background: #555; 
}

.sidebarGroupTitle
{
    width:100%;
    min-height:10px;
    float:left;
    font-size:12px;
    font-weight:500;
    color:#333;
    opacity:0.6;
    margin-bottom:13px;
    margin-top:10px;
} 

.sidebarButtonLine
{
    width:100%;
    min-height:10px;
    float:left;
    padding:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    gap:8px;
    background-color:#f5f5f5;
    cursor:pointer;
    margin-bottom:10px;
    text-decoration: none!important;
}

.sidebarButtonLineIconBox
{
    width:30px;
    height:30px;
    float:left;
    border-radius:2px;
    background-color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    padding-left:1px;
    color:#333;
}

.sidebarButtonLine p
{
    flex:1;
    margin:0px;
    font-size:13px;
    font-weight:600;
    margin-top:-2px;
    color:#333!important;
}

.sidebarButtonLineBadge
{
    min-width:10px;
    height:20px;
    background-color:#e51122;
    color:#fff;
    padding:0px 7px;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    border-radius:4px;
}

.sidebarButtonLineSelect
{
    background-color:#e51122;
}

.sidebarButtonLineSelect .sidebarButtonLineIconBox
{
    color:#e51122;
}
.sidebarButtonLineSelect p
{
    color:#fff!important;
}

.contentPageRightOuter
{
    flex:1;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
}

.contentPageRightTopbarOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:#fff;
    border-bottom:1px solid #dadada;
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.topbarBtnOuter
{
    width:36px;
    height:36px;
    background-color:#f5f5f5;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:15px;
    position:relative;
    color:#333!important;
    text-decoration:none!important;
}

.contentPageRightTopbarOuter p
{
    flex:1;
    font-size:15px;
    font-weight:600;
    color:#333;
    margin:0px;
}

.contentPageRightTopbarOuter span
{
    font-size:13px;
    font-weight:400;
    color:#e51122;
    margin:0px;
    margin-left:5px;
}

.contentPageRightBoxes
{
    width:100%;
    flex:1;
    background-color:#0a2d44;
    overflow:auto;
    padding:5px;
}

.contentPageGraphOuter
{
    width:100%;
    min-height:10px;
    float:left;
    padding:13px;
    border-radius:5px;
    border:1px solid #ffffff5f;
}

.contentPageGraphTitleOuter
{
    width:100%;
    min-height:10px;
    float:left;
}

.contentPageGraphTitleOuter h3
{
    width:100%;
    float:left;
    margin:0px;
    font-size:20px;
    font-weight:600;
    color:#e51122;
    margin-bottom:10px;
}

.contentPageGraphTitleOuter h4
{
    width:100%;
    float:left;
    margin:0px;
    font-size:14px;
    font-weight:500;
    color:#fff;
    margin-bottom:10px;
}

.contentPageGraphTitleOuter p
{
    width:100%;
    float:left;
    margin:0px;
    font-size:12px;
    font-weight:400;
    color:#fff;
    margin-bottom:4px;
    opacity:0.8;
}

.contentPageGraphBoxesOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-top:10px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:13px;
}

.contentPageGraphBoxesBox
{
    flex:1;
    min-height:10px;
    float:left;
    padding:10px;
    border-radius:4px;
    border:1px solid #ffffff5f;
    padding-bottom:40px;
    position:relative;
}

.contentPageGraphBoxIcon
{
    width:30px;
    height:30px;
    background-color:#fff;
    float:left;
    border-radius:50%;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:#fff;
    padding-top:1px;
}

.contentPageGraphBoxesBox h3
{
    width:100%;
    float:left;
    margin:0px;
    font-size:15px;
    font-weight:600;
    color:#fff;
    letter-spacing: 1px;
    margin-bottom:10px;
}

.contentPageGraphBoxesBox p
{
    width:100%;
    float:left;
    margin:0px;
    font-size:13px;
    font-weight:400;
    color:#fff;
}

.contentPageGraphBoxesBox a
{
    width:100%;
    font-size:11px;
    color:#fff;
    float:left;
    position:absolute;
    bottom:10px;
    left:0px;
    padding:0px 10px;
    text-align:right;
    text-decoration: none!important;
    opacity:0.8;
}

.contentPageGraphBoxOuter
{
    width:100%;
    height:175px;
    float:left;
    background-color:#f5f5f539;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.contentPageGraphLines
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-direction: column;
    margin-top:10px;
}

.contentPageGraphLinesLine
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    gap:10px;
    border-radius:4px;
}

.contentPageGraphLinesLineIcon
{
    width:30px;
    height:30px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:#fff;
}

.contentPageGraphLinesLineContents
{
    flex:1;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    flex-direction: column;
}

.contentPageGraphLinesLineContents h3
{
    width:100%;
    font-size:13px;
    margin:0px;
    color:#fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contentPageGraphLinesLineContents p
{
    width:100%;
    font-size:13px;
    margin:0px;
    color:#fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity:0.8;
}

.contentPageTableOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-top:10px;
}

.contentPageTableOuter table
{
    margin-bottom:0px;
}

.contentPageTableOuter table thead tr td
{
    font-size:13px;
    font-weight:600;
    color:#fff;
    padding:15px 7px;
}

.contentPageTableOuter table tbody tr td
{
    font-size:13px;
    border-color:#ffffff57;
    color:#fff;
    padding:15px 7px;
    vertical-align: middle;
}

.table-striped>tbody>tr:nth-of-type(odd)
{
    background-color:#00000040;
}

.optionBtn
{
    margin:4px;
}

.tableTagOuter
{
    min-width:10px;
    min-height:10px;
    background-color:#f5f5f5!important;
    color:#333!important;
    float:left;
    padding:3px 10px;
    border-radius:4px;
    padding-bottom:5px;
    font-weight:500;
    text-decoration: none!important;
}

.tableTagGreen
{
    background-color:#00e58f!important;
    color:#00432a!important;
}

.tableTagRed
{
    background-color:#e50000!important;
    color:#fff!important;
}

.tableTagOrange
{
    background-color:#ff5100!important;
    color:#fff!important;
}

.tableTagBlue
{
    background-color:#00aaff!important;
    color:#fff!important;
}

.formNotificationBox
{
    width:100%;
    min-height:10px;
    float:left;
    padding:10px;
    background-color:#e51122;
    color:#fff;
    padding-bottom:12px;
    border-radius:4px;
    margin-bottom:7px;
}

.formNotificationBoxGreen
{
    background-color:#00e58f;
    color:#00432a;
}

.formNotificationBoxRed
{
    background-color:#e50000;
    color:#fff;
}

.formNotificationBoxOrange
{
    background-color:#ff5100;
    color:#fff;
}

.formNotificationBoxBlue
{
    background-color:#00aaff;
    color:#fff;
}

.customInputBoxOuter
{
    width:100%;
    min-height:10px;
    float:left;
}

.customInputBoxOuter p
{
    width:100%;
    font-size:14px;
    font-weight:600;
    color:#fff;
    margin:0px;
    margin-bottom:7px;
    float:left;
}

.customInputBoxOuter input
{
    width:100%;
    height:40px;
    float:left;
    background-color:#fff;
    border:0px!important;                                        
    outline:0px!important;
    padding:0px 12px;
    border-radius:3px;
    padding-bottom:2px;
}

.customInputBoxOuter select
{
    width:100%;
    height:40px;
    float:left;
    background-color:#fff;
    border:0px!important;                                        
    outline:0px!important;
    padding:0px 10px;
    border-radius:3px;
    padding-bottom:2px;
}

.customInputBoxOuter textarea
{
    width:100%;
    height:80px;
    float:left;
    background-color:#fff;
    border:0px!important;                                        
    outline:0px!important;
    padding:8px 10px;
    border-radius:3px;
    padding-bottom:2px;
    resize: none;
}

.customFormButton
{
    width:100%;
    height:40px;
    background-color:#198754;
    color:#fff!important;
    border:0px!important;
    outline:0px!important;
    font-size:15px;
    font-weight:500;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-bottom:1px;
    cursor:pointer;
    float:left;
    text-decoration: none!important;
}

.contentPageTableFilterOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-top:10px;
    margin-bottom:-10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 0px;
    border-top:1px solid #ffffff4a;
    border-bottom:1px solid #ffffff4a;
}

.contentPageTableFilterOuter p
{
    flex:1;
    font-size:13px;
    font-weight:500;
    color:#fff;
    margin:0px;
}

.contentPageTableFilterOuter input
{
    flex:1;
    max-width:170px;
    height:34px;
    float:left;
    border-radius:4px;
    background-color:#fff;
    border:0px!important;
    outline:0px!important;
    font-size:12px;
    font-weight:400;
    color:#333;
    padding:0px 6px;
    padding-bottom:2px;
}

.contentPageTableFilterOuter select
{
    flex:1;
    max-width:170px;
    height:34px;
    float:left;
    border-radius:4px;
    background-color:#fff;
    border:0px!important;
    outline:0px!important;
    font-size:12px;
    font-weight:400;
    color:#333;
    padding:0px 6px;
    padding-bottom:2px;
}

.contentPageTableFilterOuter button
{
    min-width:10px;
    height:34px;
    background-color:#198754;
    padding:0px 14px;
    color:#fff;
    border:0px!important;
    outline:0px!important;
    font-size:14px;
    font-weight:500;
    padding-bottom:0px;
    border-radius:4px;
}

.contentPageTableCounterOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    margin-top:5px;
    padding-top:15px;
    padding-bottom:5px;
    border-top:1px solid #ffffff4a;
    gap:10px;
}

.contentPageTableCounterBtn
{
    width:30px;
    height:30px;
    float:left;
    background-color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:600;
    color:#333!important;
    border-radius:4px;
    padding-bottom:1px;
    text-decoration: none!important;
}

.contentPageTableCounterBtnSelect
{
    background-color:#e51122;
    color:#fff!important;
}

.footerLineOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:#fff;
    padding:15px 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-top:1px solid #dadada;
}

.footerLineOuter p
{
    flex:1;
    font-size:13px;
    font-weight:600;
    color:#333;
    margin:0px;
    float:left;
}

.footerLineOuter a
{
    font-size:12px;
    font-weight:400;
    color:#e51122!important;
    text-decoration:none!important;
    margin:0px;
    float:left;
}

.formGroupTitle
{
    width:100%;
    min-height:10px;
    float:left;
    padding:13px 0px;
    font-size:15px;
    font-weight:500;
    color:#fff;
    border-top:1px solid rgba(255,255,255,0.3);
    border-bottom:1px solid rgba(255,255,255,0.3);
    margin:-5px 0px;
}    

.formGroupTitle i
{
    margin-right:5px;
}

.formGroupInputs
{
    width:100%;
    min-height:10px;
    float:left;
    padding:5px;
    background-color:rgba(255,255,255,0.1);
    border-radius:5px;
    padding-top:10px;
    margin-bottom:15px;
}

.buttonFormGroup
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
}

.buttonFormGroup .customInputBoxOuter
{
    width:auto;
    flex:1;
}

.buttonFormGroupBtn
{
    min-width:10px;
    height:40px;
    background-color:red;
    float:left;
    margin-top:25px;
    border-radius:3px;
    padding:0px 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    color:#fff;
    font-weight:500;
    padding-top:2px;
    cursor:pointer;
    text-decoration:none!important;
}

.accountTopBoxOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:orange;
    border-radius:5px;
    padding:15px;
}

.accountTopBoxOuter h3
{
    width:100%;
    float:left;
    margin:0px;
    font-size:21px;
    font-weight:600;
    text-align:center;
    color:#fff;
}

.accountTopBoxOuter h2
{
    width:100%;
    float:left;
    margin:0px;
    font-size:30px;
    font-weight:600;
    text-align:center;
    margin-top:7px;
    color:#fff;
}

.mobileMenuBtn
{
    display:none;
}

.sidebarTopbar
{
    display:none;
}

@media screen and (max-width: 600px) 
{
    .mobileMenuBtn
    {
        display:flex;
    }

    .sidebarTopbar
    {
        display:flex;
    }

    .sidebarOuter
    {
        display:none;
        position:absolute;
        width:100%;
        height:100vh;
        left:0px;
        top:0px;
        z-index:999;
    }

    .contentPageOuter
    {
        width:100%!important;
        display:block;
    }

    .contentPageRightOuter
    {
        width:100%!important;
    }

    .contentPageTableFilterOuter
    {
        flex-direction: column;
    }

    .contentPageTableFilterOuter p
    {
        width:100%;
    }

    .contentPageTableFilterOuter input
    {
        flex:auto;
        width:100%;
        max-width:100%;    
    }

    .contentPageTableFilterOuter select
    {
        flex:auto;
        width:100%;
        max-width:100%;    
    }

    .contentPageTableFilterOuter button
    {
        flex:auto;
        width:100%;
        max-width:100%;    
    }

    .contentPageRightTopbarOuter p span
    {
        display:none;
    }
    
    .footerLineOuter
    {
        flex-direction: column;
        padding:10px 10px;
    }

    .footerLineOuter p
    {
        width:100%;
    }

    .footerLineOuter a
    {
        width:100%;
    }

    .buttonFormGroup
    {
        flex-direction: column;
    }

    .buttonFormGroup .customInputBoxOuter
    {
        width:100%;
        flex:auto;
    }

    .buttonFormGroupBtn
    {
        width:100%;
        margin-top:0px;
    }

    .contentPageGraphBoxesOuter
    {
        flex-direction: column;
    }
}