:root{
    --main-red:#EF4422;
    --warn-yellw:#FFFC03;
    --standard-border: 1px solid rgba(255,255,255,.1);
    --standard-bg-color: rgba(255,255,255,.2);
    --active-left-menu: #004381;
}

@media screen { /* Global */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: Kanit,Rooto,Arial,sans-serif;
        color: rgba(255,255,255,.8);
    }
    body {
        background: #00020b;
        width:100vw;
        height: 100vh;
        display: flex;
        flex-direction:column;
        justify-content: flex-start;
        align-items: center;
    }
        ::placeholder {
            opacity:0.6;
        }
        ::-webkit-scrollbar{
            width:5px;
            height:8px;
        }
        ::-webkit-scrollbar-track{
            -webkit-box-shadow:inset 0 0  6px #A5A5A5;
            border-radius: 2px;
        }
        ::-webkit-scrollbar-thumb {
            background: #CCC;
            border-radius: 2px;
            border: 1px solid #AAA;
        }

        .act-as-button{
            cursor:pointer;
        }
            .act-as-button:active{
                transform: scale(0.9,0.9);
                transform-origin: center center;
            }
        .click-able{
            cursor:pointer;
        }
}

@media screen { /* main frame */
    .main_frame {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap:0;
        align-items: center;
        width:100vw;
        height: 100vh;
        border: 1px solid white;
        padding: 1vh 1vw;
    }
        .main_left_column{
            width: 230px;
        }
    .main_top_ban{
        display:flex;
        flex-direction: row; 
        justify-content: flex-start;
        align-items: center;
        width:100%;
        height: max-content;
    }
        .top_ban_bubble {
            border:1px solid rgba(255,255,255,.2);
            border-radius: 8px;
        }
        .main_app_logo{
            display:flex;
            height: 100%;
            background: url(../images/NOC_logo.png) no-repeat center center;
            background-size: 80%;
        }
        .main_top_func {
            display: flex;
            flex-direction: row;
            width: 100%;
            gap: 0 15px;
            justify-content: space-between;
            align-items: center;
            background: var(--standard-bg-color);
            padding: 0 17px 0 15px; 
            max-width: calc( 100% - 230px );
            border:var(--standard-border);
            border-radius:5px;
        }
            .main_app_cust {
                display: flex;
                height: max-content;
                padding: 5px 10px;
                align-items: center;
                flex: 1 1 auto;
            }
                .main_app_cust > img{
                    height: 55px;
                }
            .top_filter_site {
                display: flex;
                height: 40px;
                width: 165px;
                align-items: center;
            }
                .top_filter_inp {
                    width: 100%;
                    outline: none;
                    height: 100%;
                    background: rgba(0,0,0,0);
                    padding-left: 10px;
                    border: 0px;
                }
            .top_calendar {
                display: flex;
                height: 40px;
                width:180px;
                justify-content: space-between;
                align-items: center;
                font-size: 0.8rem;
                padding:0 10px;
            }
            .top_alert_sign {
                display: flex;
                background: url(../images/alarm-bell.svg) no-repeat center center;
                background-size: 30px;
                height: 40px;
                width:50px;
                justify-content: flex-end;
                align-items: start;
                font-size: 0.8rem;
                padding:2px 5px
            }
                .top_alert_sign >span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: auto;
                    height: 20px;
                    aspect-ratio: 1 / 1;
                    border-radius: 9px;
                    font-size: 1rem;
                    background: red;
                    padding: 0;
                }
            .top_user_icon {
                position: relative;
                display: flex;
                height: 40px;
                width: 167px;
                justify-content: flex-start;
                align-items: center;
                gap: 0 10px;
                font-size: 0.8rem;
                padding: 3px 30px 3px 5px;
            }
                .top_user_icon:after{
                    content: '⌄';
                    position: absolute;
                    right: 7px;
                    top: 0px;
                    font-size: 1.2rem;
                }
                .user_icon{
                    display:block;
                    width:24px;
                    height:28px;
                    background: url(../images/Users.svg) no-repeat center center;
                    background-size: contain;
                    opacity: 0.6;
                }
                    .user_information{
                        display:flex;
                        flex-direction:column;
                        padding:0;
                    }
                        .user_information>span{
                            flex:1 1 auto;
                            font-size: 0.7rem;
                        }
                        .user_information .privilege { color: #A5A5A5; }

    .main_middle_cont{
        display:flex;
        flex-direction: row; 
        justify-content: flex-start;
        align-items: center;
        width:100%;
        min-height: 700px;
        flex:1 1 auto;
    }
        .main_left_panel {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            background: var(--standard-bg-color);
            border: var(--standard-border);
            border-radius: 5px;
            padding: 10px 17px;
        }
            .left_menu {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 100%;
                height: 46px;
                gap: 0 10px;
                padding-left: 10px;
                border-radius: 5px;
            }
                .left_menu:active {
                    transform: scale(0.9,0.9);
                    transform-origin: left center;
                    cursor:pointer;
                }
                .left_menu > img { 
                    height: 25px; 
                    opacity: .6;
                }
                .left_menu > label {
                    display:block;
                    flex: 1 1 0;
                    cursor:pointer;
                }
                .left_menu input[type='radio'] {
                    display:none;
                }
                .left_menu:has(input[type='radio']:checked) {
                    background: var(--active-left-menu);
                }

        .main_right_panel {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            background: none;
        }
                    
    .main_footer{
        display:flex;
        flex-direction: row; 
        justify-content: flex-start;
        align-items: center;
        width:100%;
        border: 1px solid white;
        height: 70px;
    }

}