:root {
    --left: 70%;
    --right: 30%;
    --pad-left: 10px;
    --pad-right:10px;
    --header-top-height:9px;
    --header-margin-bottom:40px;
    --label-bottom:20px;
}

.btn-all {
    background-color: #EE5B6E;
    color: #FFFFFF;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 400;
    width: 100%;
    min-width: 50%;
    height: 48px;
    padding: 12px 10px;
    border: 0;
    gap:30px;
}
.btn-cap {
    background-color: #EE5B6E;
    color: #FFFFFF;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    padding: 8px 20px;
    border: 0;
}
.btn-conf {
    background-color: #EE5B6E;
    color: #FFFFFF;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    padding: 8px 10px;
    border: 0;
}
.btn-msg{
    background-color: #FFCC00;
    color: #4F4F4F;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 400;
    width: 140px;
    height: 48px;
    padding: 12px 10px;
    border: 0;
}
button.A{
    background-color: #FFFFFF !important;
    color: #B2B2B2 !important;
    border:1px solid #B2B2B2;
}

button:disabled{
    background-color: #F4F4F4 !important;
    color: #B2B2B2 !important;
}
.conf-btn-group{
    display:flex;
    flex-direction: column;
    gap: 10px;
}
.btn-conf{
    width: 100%;
}

@media screen and (min-width: 768px) {
    body{
        --pad-left: 20px;
        --pad-right:20px;
        --header-top-height:13px;
        --header-margin-bottom:80px;
        --label-bottom:30px;
    }
    #ele-footer::before{
        background-size: 108.62px 30px;
    }

    #footer-text{ 
        font-size: 12px;
        color: #ffffff;
        top:37px;
        right:130px;
    }
    .footer-tmg{
        top:50%;
        left:30px;
        width: 192px;
        height: 20px;
        transform: translate(0,-50%);
    }
    .footer-tbagc{
        top:10px;
        right:130px;
        width:216px;
        height:22px;
        position: absolute;
    }
    .btn-all-main{
        width: 214px !important;
        min-width: 0;
    }
    .conf-btn-group{
        display:inline-flex;
        flex-direction: row;
    }
    .btn-conf{
    }
}
/* 當螢幕方向為直向時套用的樣式 */
@media (orientation: portrait) {
    #spanCountdownMask{
        margin-top :'';
    }
    #divCameraCoverCarNumberBox{ 
        width: calc(80 * var(--rvw)) !important;
        height: calc(10 * var(--rvh));
        top: calc(18 * var(--rvh));
        left: calc(10 * var(--rvw));
    }

    #divMain{
        height: calc(100 * var(--rvh));
    }

    #btnMessageBox{
    }
    #divOrientationScreen{ 
        display: none !important;
    }

}
 
/* 當螢幕方向為橫向時套用的樣式 */
@media (orientation: landscape) {
    #divOrientationScreen{ 
        display: none;
    }

    #divMain{
        height: calc(var(--vh, 1vh) * 100);
    }
    
    #divStreamMask{
        top : calc(-1 * var(--rvh));
        left : calc(2 * var(--rvw));
        width : calc(100 * var(--rvw));
        height : calc(100 * var(--rvh));
    }

    #btnMessageBox{
    }
  
    #spanCountdownMask{
        margin-top :2.5rem;
    }

    .btnr{
        z-index: 1 !important;
        position: absolute;
        top: 90%;
        left: 73.5%;
        transform: translate(-50%,-50%);
        padding:0.4rem 1.05rem;
        letter-spacing: 1px;
        max-width:43%;
    }
   
    #btn-no-found-number{
        width: 100%;
    }
    #btn-jump{
        left:50% !important;
    }
    #btnCapture{
        height: 100%; 
        min-width: 20%;
    }
  

    #divForceOrientationScreen{
        display: none !important;
    }
    #divBlackScreenForForce{
        display: none !important;
    }
    .in-message-box{
        max-height: 90vh;
    }
}

#scrollHint {
    position: fixed;
    top: 10px;
    left:50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color:#FFF;
    padding : 8px 16px;
    border-radius:20px;
    font-size: 0.7rem;
    opacity:0;
    transition: opcity 0.5s;
    z-index:15;
    pointer-events: none;
    white-space: nowrap;
}

#scrollHint.show{
    opacity:1;
}

#btnSubmitCheck{
}
#btnReload{
   
}

#btn-reload-charge{
    top: 90% ;
    left:30% !important;
}
 
.btn-for-charge-confirm{
    top: 90.8% !important;
}

.btn-recheck-center {
    min-width: 38%;
    left:50%;
}

.conf-div-img-value{
    position: absolute;
    height: 16%;
    width: 40%;
}

#conf-cn-div{
    top:40%;
}

#conf-db-div{
    top:64%;
}

.btn-motor-check-left{
    left:26.5% !important;
}
.btn-motor-check-right{
    left:73.5% !important;
}

.hide-important{
    display:none !important;
}