:root{
    --main-red:#EF4422;
    --warn-yellw:#FFFC03;
}

@media screen { /* Global */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: "Manrope", sans-serif;
        font-optical-sizing: auto;
    }
    body {
        background: rgba(243,243,243,1);
        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:#e4e4e4;
            border-radius: 2px;
        }

        .act-as-button{
            cursor:pointer;
        }
            .act-as-button:active{
                transform: scale(0.9,0.9);
                transform-origin: center center;
            }
}
@media screen { /* not Mobile */
    /* Mainpage */
    .main-page {
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        align-items:flex-start;
        width: 100vw;
        max-width: 1024px;
        /* height: 100vh;
        max-height: 768px; */
        box-shadow: 0px 2px 12px -1px rgba(0,0,0,0.25);
        margin: 0 auto;
        background: #F3F3F3;
        border-radius: 5px;
    }
        .main-headban{
            display:grid;
            grid-template-columns: 80px 175px auto 60px 100px;
            width:100%;
            height: 10.16%;
            min-height: 78px;
            margin:1px 0.04px 0px 0.04px;
            background:#FFFFFF;
        }
            .main-headban .headban-home{
                background:url(../img/HomePage.png) no-repeat center center;
                background-size:contain;
                background-color:#A5A7A5;
                height:100%;
                border-radius:5px;
            }
            .main-headban .headban-cont{
                display:flex;
                justify-content: center;
                align-items: center;
                height:100%;
            }
                .main-headban .headban-cont  .me-logo{
                    display: block;
                    width:125px;
                    height: 63px;
                    background:url(../img/IMG_0550.png) no-repeat center center;
                    background-size:contain;
                }
                .main-headban .headban-cont  .hb-user{
                    display: block;
                    width:60px;
                    height: 60px;
                    background:url(../img/top_account.png) no-repeat center center;
                    background-size:contain;
                }
                .main-headban .headban-cont  .hb-exit{
                    display: block;
                    width:60px;
                    height: 60px;
                    background:url(../img/exit_door.png) no-repeat center center;
                    background-size:contain;
                    margin-right: 30px;
                }
        .main-body{
            display:grid;
            width:100%;
            /* height: 89.84%;
            max-height: 690px; */
            grid-template-columns: 80px auto;
        }
            .main-body .left-pane{
                display:grid;
                grid-template-rows: repeat(5, 80px) auto;
                width:100%;
                height:100%;
                padding:0;
                margin:0;
            }
            .main-body .left-pane > div{
                width:100%;
                height:100%;
                background-color:#A5A7A5;
                border-radius:5px;
            }
            .main-body .right-box{
                width:100%;
                height:100%;
            }
            .main-body .left-pane > div{
                display:flex;
                justify-content:center;
                align-items:center;
            }
                .left-alarm{
                    width:50.17px;
                    height:50.7px;
                    background:url(../img/BrakeWarning.png) no-repeat center center;
                    background-size:contain;
                }
                .left-config{
                    width:50.17px;
                    height:50.7px;
                    background:url(../img/AdministrativeTools.png) no-repeat center center;
                    background-size:contain;
                }
                .left-report{
                    width:50.17px;
                    height:50.7px;
                    background:url(../img/BusinessReport.png) no-repeat center center;
                    background-size:contain;
                }
                .left-message{
                    width:50.17px;
                    height:50.7px;
                    background:url(../img/ChatSettings.png) no-repeat center center;
                    background-size:contain;
                }
                .left-user{
                    width:50.17px;
                    height:50.7px;
                    background:url(../img/User.png) no-repeat center center;
                    background-size:contain;
                }
            .left-active-icon{
                background-color:var(--main-red) !important;
            }
            .main-body .right-box {
                display:flex;
                flex-direction:column;
                justify-content:flex-start;
                align-items:flex-start;
                padding-left:26px;
                overflow-x:hidden;
                overflow-y:hidden;
            }
                .right-box .body-top-ban{
                    display:flex;
                    justify-content:flex-start;
                    align-items:center;
                    width:100%;
                    height:99px;
                    /* border:1px solid var(--main-red); */
                    font-size:38px;
                }
                .tank-container{
                    display:flex;
                    flex-direction:column;
                    justify-content:flex-start;
                    align-items:center;
                    box-shadow:0 2px 12px -1px rgba(0,0,0,0.25);
                    width:726px;
                    height:auto;
                    border:1px solid #a5a7a5;
                    border-radius:5px;
                    margin-bottom: 35px;
                    overflow:hidden;
                }
                .tank-container input[type=checkbox]{
                    visibility:hidden;
                } 
                .tank-container .top-ban {
                    display:grid;
                    grid-template-columns: 635px 20px auto;
                    width:100%;
                    height: 61px;
                    background:white;
                }
                    .tank-container .top-ban > *{
                        font-size:21px;
                        line-height: 61px;
                    }
                    .tank-container .top-ban .title-text{
                        padding-left:5%;
                        display:flex;
                        flex-direction:row;
                        align-items:center;
                    }
                        .tank-container .top-ban .title-text > p{
                            margin-right:20px;
                        }
                    .tank-container .top-ban > label{
                        background:url(../img/ChevronDown.png) no-repeat center center;
                        background-size:25px;
                    }
                    .tank-container .top-ban > input:checked+label{
                        background:url(../img/ChevronRight.png) no-repeat center center;
                        background-size:25px;
                    }
                    .tank-container .top-ban .tank-alarm-sign{
                        width:35px;
                        height:35px;
                        visibility:hidden;
                    }
                .tank-container .tank-detail{
                    display:grid;
                    grid-template-columns:163px auto;
                    width:100%;
                    height: 314px;
                }
                    .tank-detail .tank-graphic{
                        display:flex;
                        justify-content:center;
                        align-items:flex-start;
                        padding-top:20px;
                    }
                    .tank-detail .see-data {
                        display: grid;
                        grid-template-rows: 120px 86px 44px;
                        row-gap: 14px;
                        width: 565px;
                        height:calc(100% - 14px);
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 14px;
                    }
                        .see-data .guage-view{
                            display:grid;
                            grid-template-columns: repeat(4,120px) auto;
                            column-gap:10px;
                        }
                        .guage-view .guage-info {
                            display:grid;
                            grid-template-rows:30px 90px;
                            row-gap:0px;
                            background:white;
                            box-shadow:0 2px 12px -1px rgba(0,0,0,0.25);
                            border-radius:5px;
                            font-size:11pt;
                        }
                            .guage-info .guage-ban{
                                padding:8px 0 0 10px;
                            }
                            .guage-info .guage-val{
                                display:flex;
                                justify-content:center;
                                align-items:center;

                            }
                        .see-data .notify-view {
                            background: white;
                            height: 100%;
                            display: grid;
                            grid-template-rows: 26px auto;
                            overflow-x: hidden;
                            overflow-y: auto;
                            font-size: 9pt;
                        }
                            .see-data .notify-view >div{
                                padding:4px 0 0 10px; 
                            }
                        .see-data .button-row {
                            display:flex;
                            justify-content:center;
                            align-items:center;
                        }
                            .see-data .button-row > button{
                                background:#006FB5;
                                width:150px;
                                height:44px;
                                border-radius:5px;
                                border-width:0;
                                color:white;
                            }

}
@media screen { /* Mobile */
    .main-page-mobile{
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        align-items:flex-start;
        width: 100vw;
        margin: 0 auto;
        background: #F3F3F3;
        overflow-x:hidden;
    }
        .main-headban-moblie{
            display: flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            width: 100vw;
            height: 92px;
            background: #FFFFFF;
        }
            .main-headban-moblie .me-logo-mobile{
                display: block;
                width:125px;
                height: 63px;
                background:url(../img/IMG_0550.png) no-repeat center center;
                background-size:contain;
            }
        .main-body-mobile{
            display: flex;
            flex-direction: column;
            justify-content:flex-start;
            align-items:flex-start;
            width: 100vw;
            margin: 0 auto;
        }
            .main-body-mobile .mobile-top-ban{
                display: flex;
                flex-direction: column;
                justify-content:center;
                align-items:center;
                width: 100vw;
                height: 92px;
                font-size:15pt;
            }
            .main-body-mobile .tank-container-mobile{
                display: flex;
                flex-direction: column;
                justify-content:flex-start;
                align-items:flex-start;
                width: 290px;
                box-shadow: 0px 2px 12px -1px rgba(0,0,0,0.25);
                margin:auto auto 20px auto;
                border-radius:5px;
            }
                .tank-container-mobile .top-tank-mobile{
                    display:grid;
                    width:100%;
                    grid-template-columns: 210px 45px auto;
                    margin-bottom:10px;
                    /* padding-left:10px; */
                    height:50px;
                    padding-top:20px;
                    background:white;
                }
                    .top-tank-mobile .tank-alarm-mobile{
                        width:35px;
                        height:35px;
                        visibility:hidden;
                    }
                .top-tank-mobile > p {
                    text-align:right;
                    font-size:14pt;
                } 
                .tank-detail-mobile {
                    display:grid;
                    grid-template-columns: 150px 140px;
                    justify-content:center;
                    align-items:center;
                    height:275px;
                }
                    .tank-detail-mobile .tank-graphic{
                        display:flex;
                        flex-direction:column;
                        justify-content:center;
                        align-items: center;
                    }
                    .tank-detail-mobile .see-data-mobile{
                        font-size:18pt;
                        font-weight:600;
                        padding-left:5px;
                    }
                        .tank-detail-mobile .see-data-mobile > p:nth-child(2){
                            font-size:24pt;
                            font-weight:800;
                        }
                        .tank-detail-mobile .see-data-mobile > p:nth-child(3){
                            font-size:clamp(0.7em,0.8em,0.85em);
                            font-weight:600;
                        }
                        .tank-detail-mobile .see-data-mobile > p:nth-child(3)>span{
                            font-size:clamp(0.5em,0.6em,0.7em);
                            font-weight:300;
                        }
}