:root {
    --left: 70%;
    --right: 30%;
    --font-pop-title:20px;
    --font-pop-text:16px;
    --ele-dist:30px;
    --right-pad-lr:15px;
    --grid-gap:5px;
}
/*
@font-face {
    font-family: 'Noto Sans TC';

    src: url('../fonts/NotoSansCJKtc-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Noto Sans TC';
    src: url('../fonts/NotoSansCJKtc-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}*/
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #ffffff;
    -webkit-text-size-adjust: none;
    overflow: auto;
    font-family: 'Microsoft JhengHei', PingFang, sans-serif,serif;
    font-weight: 400;
    line-height: 1.5;
    color: #4f4f4f;
    display: flex;
    flex-direction: column;
    min-height:100vh;
}

body .loading{
    background-color: #ffffff;
    overflow: hidden;
}

html {
    -webkit-text-size-adjust: none;
    font-size:16px;
}
img {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-drag: none;
}
input {
    padding: 8px 20px; 
    font-size:16px;
    font-weight: 500;
    border-radius: 100px;
    background-color: #ffffff;
    color:#4f4f4f;
    border:1px solid #b2b2b2;
    height:40px;
}
input::placeholder {
    color: #b2b2b2;
}

input:focus {
   border-bottom-color: #005bac; 
   outline:none;
}

input:disabled{
    background-color: #F4F4F4;
    color:#B2B2B2;
}

input.error{
    border-color:#EE5B6E;
}
.required-label::after{
    content:" *";
    color:#EE5E6E;
}
label{
    font-size:16px;
    font-weight:500;
    margin-bottom: 10px;
}
label.left{
    align-self: flex-start;
}
label.right{
    align-self: flex-end;
}
label.error{
    color:#EE5B6E;
}
label.error-hint{
    color:#EE5B6E;
    margin-top: 3px;
    display: none; 
    margin-bottom: 0px !important;
}
.input-block{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    margin-bottom:var(--label-bottom);
}

span.error{
    color:#EE5B6E;
    font-weight: 700;
}

main{
    flex: 1;
    position: relative;
    height: 100%;
    display: flex;
}

.main-bg{
    background:  url("../img/background.svg") top center/ cover no-repeat;
    aspect-ratio: 768/300;
    width: 100%;
    position: absolute;
    top : calc( var(--header-margin-bottom) * -1);
    z-index: -1;
}
/*
.main-bg.example{
    min-height:300px;
}*/

.main-content{
    padding-left: var(--pad-left);
    padding-right: var(--pad-right);
    flex:1;
    max-width: 100%;
}
.start-hidden{
    display: none !important;
}
.flex {
    display:flex !important;
}
.hidden{
    display: none !important;
}


#divStart {
    height: calc(100 * var(--rvh));
    background-color: white;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    display: block;
    z-index: 10000;
}

.title-h1{
    font-size:24px;
    font-weight: 700;
}
.title-h2{
    font-size:18px;
    font-weight: 700;
}
.upload-title{
    font-size:12px;
}
.title-example{
    color:#005bac;
}

/* buttons */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* div */

/* img */
.carnum-img {
    width: 100%;
}


/* text */
.maintext {
    color: #556671 !important;
}

/* text */
.countdown-mask-text {
    -webkit-text-fill-color: #71a6c9 !important;
    -webkit-text-stroke: 2px white!important;
    font-size: 6rem;
    font-family: 'Comic Neue', sans-serif;
}

.text-resize {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-fix {
    overflow: hidden;
    text-overflow: ellipsis;
}

.confirm-col {
    max-width: calc(7 * var(--rvw));
    height: auto;
    width: auto;
    position: relative;
    left: calc(6 * var(--rvw));
}

.confirm-hint-div {
    background-color: #f36b71 !important;
    border-color: #f36b71 !important;
}

/* bar */

.bar {
    position: absolute;
    background-image: linear-gradient(to right, #9bc3dc, #b9cedc);
    height: calc(10 * var(--rvh));
    width: 100%;
    border-radius: 5px 5px 0px 0px !important;
}

.info-col {
    background-color: #f4f9fd;
    height: calc(6 * var(--rvh));
    position: absolute;
    border-color: #17a5c4 !important;
    border-style: solid !important;
    /* display: none !important; */
}

/*border*/
.border-topleft {
    border-width: 0px 1px 1px 0px !important;
    border-radius: 5px 0px 0px 0px !important;
}

.border-topright {
    border-width: 0px 0px 1px 1px !important;
    border-radius: 0px 5px 0px 0px !important;
}

.border-bottom {
    border-width: 1px 0px 1px 0px !important;
}

/* footer */

.text-footer {
    color: #424242;
    text-align: center;
    font-size: 0.7rem;
}

/* finish blank screen */
.div-blank {
    height: calc(100 * var(--rvh));
    background-color: white;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    display: none;
    z-index: 9999;
}

/* webcam */
.div-webcam-main {
    height: calc(42 * var(--rvh));
    position: absolute;
    top: calc(53 * var(--rvh));
    display: none;
}


.div-green-box {
    height: auto;
    width: auto;
    position: absolute;

    border-color: rgb(0, 255, 0) !important;
}

.div-hint-img {
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: 0.5;
}



.div-camera-cover-landscape {
    height: calc(92 * var(--rvh)) !important;
    top: calc(2 * var(--rvh)) !important;
}

#divConfirmShowBox {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: unset;
    padding-right: unset;
}

.div-camera-landscape {
    position: absolute !important;
    top: calc(0.5 * var(--rvh)) !important;
    height: calc(99 * var(--rvh)) !important;
}

.div-msg-landscape {
    z-index: 1 !important;
    position: absolute !important;
    top: calc(4 * var(--rvh)) !important;
    width: auto !important;
    left: calc(15 * var(--rvw)) !important;
    right: calc(15 * var(--rvw)) !important;
}

.btnr-landscape {
    z-index: 1 !important;
    position: absolute;
    top: calc(70 * var(--rvh)) !important;
}



.div-camera-cover-btn-landscape {
    top: calc(68 * var(--rvh)) !important;
}

.div-camera-cover-infospan-landscape {
    top: calc(71 * var(--rvh)) !important;
}

.div-camera-cover-carnumber-text-landscape {
    top: calc(30 * var(--rvh)) !important;
}
.div-camera-cover-carnumber-box-landscape {
    top: calc(35 * var(--rvh)) !important;
    height: calc(20 * var(--rvh)) !important;
}
.div-footer-landscape {
    display: none !important;
}
.btn-landscape {
    height: calc(8 * var(--rvh)) !important;
}
.div-loading-landscape {
    height: calc(22 * var(--rvh)) !important;
}
/* confirm */

/* main */
#divMain {
    display: none; /*要show要用grid*/
    grid-template-columns: 7fr 3fr;
    gap:10px;
    height: calc(100 * var(--rvh));
    box-sizing: border-box;
    transition: grid-template-columns 0.5s ease;
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* videostatus */
#video-stats-div {
    display: flex;
    justify-items: center;
    align-items: center;
}
.video-status-text{
    white-space: nowrap;
}
#video-hr{
    height: calc(1 * var(--rvh))
}

/* Car Main Outer*/
#divCarMainOuter{
}

.left-main {
    border-radius: 20px;
    overflow: hidden;
    border: solid 1px #CEE4F2;
    display: flex;
    flex-direction: column;
}



.left-main .bottom {
    display:flex;
    position: relative;
    height: 100%;
}

.left-main .overlay{
    position:absolute;
    height: 100%;
    width:100%;
}
#right-block{
    height: 100%;
    overflow:hidden;
    border-radius:15px;
    border: solid 1px #CEE4F2;
}

.right-main{
    background: #F2F7FC;
    height: 100%;
    width: 100%;
    position:relative;
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    gap:20px;
}
.top-wrapper{
    background-color: #F2F7FC;
    font-weight: 700;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    border-bottom: solid 1px #CEE4F2;
    padding: 15px;
}
.top-wrapper.inner{
    background-color: #CEE4F2;
    color:#005BAC;

}

.top-wrapper, .bottom-wrapper{
    position: relative;
}
.bottom-wrapper{
    flex:1;
    min-height: 0;
}
.bottom-wrapper.center{
    align-items: center;
    justify-content: center;
}

#brandInfo{
    display: none;
    border-bottom: none;
    gap:30px;
}
.brand-sep {
    padding: 5px;
    gap: 20px;
    display: flex;
    justify-content: center;
}
/* main: car inspection */ 
#divCarMain{
    display: none;
}
.show-car-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    grid-template-rows: repeat(3, minmax(0,1fr));
    gap:var(--grid-gap);
    width: 100%;
    flex:1;
    min-height: 0;
}
.show-car-grid > .cell{
    position: relative;
}
.cell.show{
    border:1px solid #005BAC;
    background-color: #F4F4F4;
    border-radius: 10px;
}
.cell >.pattern{
    position: absolute;
    inset:5px; 
    border-radius: 5px;
    overflow: hidden;
    object-fit: contain;
    align-items: center;
    justify-content: center;
    display: flex;
}
.cell-img{
    min-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 5px;
    opacity: 0.7;
}
.cell > .icon{
    position: absolute;
    inset:0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 35% auto;
    background-image: url(../img/ok.svg);
    display: none;
}

.cell.focus{
    border: 2px solid #EE5B6E;
    background-color: #FFF5D9;
}
.cell.hidden{
    opacity: 0;
    pointer-events: none;
}

#carMainCImg{
    height: 100%;
    width:100%;
    object-fit: contain;
}


/*
#carMainB{
    background-image: url('../img/car_back.svg');
}
#carMainBI{ 
    background-image: url('../img/ok.svg')
}
#carMainBL{  
    background-image: url('../img/car_backleft.svg');
} 
#carMainBLI{ 
    background-image: url('../img/ok.svg');
}
#carMainFL{ 
    background-image: url('../img/car_frontleft.svg');
} 
#carMainFLI{ 
    background-image: url('../img/ok.svg');
}
#carMainF{ 
    background-image: url('../img/car_front.svg');
}
#carMainFI{ 
    background-image: url('../img/ok.svg');
}
#carMainFR{ 
    background-image: url('../img/car_frontright.svg');
}
#carMainFRI{ 
    background-image: url('../img/ok.svg');
}
#carMainBR{ 
    background-image: url('../img/car_backright.svg');
}
#carMainBRI{ 
    background-image: url('../img/ok.svg')
}
#carMainL{ 
    background-image: url('../img/car_left.svg');
}
#carMainLI{ 
    background-image: url('../img/ok.svg')
}

#carMainR{ 
    background-image: url('../img/car_right.svg');
}
#carMainRI{ 
    background-image: url('../img/ok.svg')
}
*/
/* main: car number/inner */
#divCarNumberInner{ 
    display: none;
    flex-direction: column;
    height: 100%;
    position: absolute;
    inset: 0;
}
#divRightBottom{
    position: relative;
    display: flex;
    padding: 20px 15px;
    flex-direction: column;
}
.right-bottom-button{
    margin-top: auto;
    width: 100%;
}

/*main: charging pile and comfirmation*/
#divChargingPile{ 
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    width:100%;
    gap: 20px;
}

#divChargingIcon {
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1;
    min-height: 0;
}

#chargConfImg{
    height: 100%;
    width: 100%;
}

.charg-img-block{

    display: flex;
    flex: 1;
    min-height: 0;
    justify-content: center;
    align-items: center;
}
/*main: car confirmation*/
#divConfirm{ 
    display: none;
    height: 20%;
    gap:var(--grid-gap);
    justify-content: center;
}

.conf-cell{
    height: 100%;;
    background-color: #F4F4F4;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    --conf-cell-color: #005BAC;
    border: 1px solid var(--conf-cell-color);
    border-radius: 10px;
}
.conf-cell.sep3{
    --cell-all-gap: calc( 2 * var(--grid-gap));
    flex:0 0 calc(( 100% - var(--cell-all-gap)) / 3);
}
.conf-cell.charg{
    width: 100%;
}
.conf-cell.focus{
    --conf-cell-color: #EE5B6E;
    border: 2px solid var(--conf-cell-color);
    background-color: #FFF5D9;
}
.conf-title{
    background-color: var(--conf-cell-color);
    color: #FFFFFF;
    font-weight: 500;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 12px;
}
.conf-title.sep3{
    flex:1;
    min-height:0;
}
.conf-title.charg{
    padding: 3px 5px;
}
.conf-pattern{
    border-radius: 3px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 5px;
    position: relative;
}
.conf-pattern.sep3{

    height: 50%;
}
.conf-pattern.charg{
    flex:1;
    min-height: 0;
}
.conf-pattern > img{
     min-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
}
.conf-icon{
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 35% auto;
    background-image: url(../img/ok.svg);
    display: none;
}
.conf-icon.charg{
    background-size: 10% auto;
}
/*center button group*/

/*message group*/

#msg-row-br{ 
    height: calc(0.5 * var(--rvh));
}

/*  video group  */
#videoElement{  
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-left: unset;
    padding-right: unset;
}
#videoElementHide{ 
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-left: unset;
    padding-right: unset;
    display: none;
}
/*orientation screen*/
#divOrientationScreen{ 
    height: calc(100 * var(--rvh));
    background-color: white;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    z-index: 9999;
}

#divForceOrientationScreen{ 
    position: fixed;
    top:50%;
    left:50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 60%;
    max-width: 80%;
    
}
#rotationIcon{
    max-width: 150px;
    margin-bottom: 30px;
}

#foreceOrientationScreenWarn {
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}


/*black screen*/
#divBlackScreen{ 
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2;
    background: rgba(0,0,0,0.5);
}
#divBlackScreenForForce{ 
    background-color: #000000;
    position: fixed;
    inset: 0;
    opacity: 0.5;
    z-index: 9998;
}
/*loading screen*/
#divLoading{ 
    position: fixed;
    top: 50%;
    left:50%;
    display: none;
    z-index: 3;
    transform: translate(-50%,-50%);
    width: 280px;
    max-width: 80%;
}

#loadingImg{ 
    margin-bottom: 30px;
}

#divLoading img {
    animation: spin 1.2s linear infinite ;
}
#divLoadingText{
    font-size: 1rem;
    color: #ffffff !important;
    font-weight: 700;
    min-height: 3rem;
}

@keyframes frame {
    0%,24% {opacity: 1;} 
    25%,100% {opacity: 0;} 
}

@keyframes swap {
    to {transform: rotate(360deg);}
}

@keyframes spin {
    to {transform: rotate(360deg);}
}

/*input box cover*/
.login-block-div{
    align-items: center;
    display: flex;
    flex-direction: column;
    flex:1;
    height:100%;
}
#divInput{ 
}

.div-login-icon{
    width:80%;
    max-width:400px;
    height: auto;
    margin-bottom: var(--ele-dist);
}
.div-login-title{
    margin-bottom: var(--ele-dist);
}

#divInputPlateNumber{
}
.login-input-group{
    position: relative;
    display: flex;
    align-items:center;
    width: 100%;
    gap:1px;
}

.login-input-group input{
    flex:1;
    min-width: 0;
}

.separator {
    flex:0 0 27px;
    height: 1px;
    margin: 0 1px;
    background-color: #B2B2B2;
    pointer-events: none;
}

#btnValidatePlateNumber{
    margin-top:30px;

}

#divInputSerialNumber{ 
}

#btnValidateSerialNumber{ 
}


/*input validate code*/
#divOtp{
}

#divOtpInfo{
    text-align: center;
    margin-bottom: var(--ele-dist);
}

.otp-input-group {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: var(--ele-dist);
    flex-direction: column;
}

#otpPrefix {
    font-size: 22px;
    font-weight: 500;
    margin-right: 10px;
}

#inputOtp{
    flex:1;
}

#countDiv{
    margin-bottom: var(--ele-dist);
}
#resendOtp{
    display: none;
}
#btnValidateOtp{
    margin-bottom: var(--ele-dist);
}

/*confirmation cover*/
#divConfirmation{
}

#confirmList{
    width: 100%;
    list-style: none;
    padding: 0;
    margin:0;
    margin-top: 20px;
}

#confirmList li{
    position: relative;
    padding-left:20px;
    line-height:1.6;
}

#confirmList li::before{
    content:"";
    position: absolute;
    left:0%;
    top:50%;
    width: 4px;
    height: 4px;
    background-color: #4f4F4F;
    border-radius: 50%;
    transform: translate(+100%,-50%);

}

#confirmMsg{
    width: 100%;
    background-color: #FFF5D9;
    color:#4f4f4f;
    border:solid 1px #FFCC00;
    border-radius: 20px;
    padding:15px 20px;
    text-align:center;
    margin-top: 20px;
    margin-bottom: 50px;
}

/*example page*/

#exampleImgBox{
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-content: center;
}

#exampleImg {
    max-height: 100%;
    max-width: 100%;
    width:auto;
    height: auto;
    object-fit: contain;
    margin-bottom: var(--ele-dist);
}
#exampleText{
    text-align:center;
    flex:1;

}

.exampleControls{
    position: relative;
    display: flex;
    align-items:center;
    width: 100%;
    gap:30px;
    margin-top: var(--ele-dist);
}
.exampleControls button{
    flex:1;
    min-width: 0;
}

/*message cover*/
.message-box{ 
    z-index: 99;
    position: fixed;
    display: none;
    inset: 0;
    justify-content: center;
    align-items:center;
    padding-left: var(--pad-left);
    padding-right: var(--pad-right);
}
.in-message-box{
    max-height: 80vh;
    overflow:auto;
    width: 576px;
    max-width: 100%;
    background-color: #ffffff;
    border-width: 1px;
    border-color: #e8e8e8;
    border-radius: 20px;
    padding-top: 40px;
    padding-bottom : 40px;
}
.msg-cover-icon{ 
    width: 100%;
    position: relative;
    margin-bottom: 30px;
    align-items: center;
    justify-content: center;
    display: flex;
}
#msgIcon{
    display: flex;
    margin: 0 auto;
}

#msgCoverTitle{ 
    width: 100%;
    text-align: center;
    position: relative;
    word-break:break-word;
    padding-left: 20px;
    padding-right: 20px;
    font-size: var(--font-pop-title);
    font-weight: 700;
    margin-bottom: 30px;
}
#messageBoxTitle{
}
.msg-cover-maintext{ 
    min-height: 48px;
    width: 100%;
    text-align: center;
    position: relative;
    display: flex;
    word-break:break-word;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 30px;
    font-size: var(--font-pop-text);
    align-items: center;
    justify-content: center;
}
#messageBoxText > ol{ 
    text-align: left;
}


.msg-cover-btn-group{ 
    display:flex;
    justify-content: center;
    align-items: center;
    gap:10px;
}

#found-carnum-icon{
    width:90%;
    max-width: 400px;
}

#messageFoundCarNum{
    text-align: left;
}


#btnMessageBox{ 
 
}
#btnMessageBox2{ 
    display: none;
}


/*floating on video streaming*/
#divCameraCover{
    padding-left: 10px;
    padding-right: 10px;
    padding-top:10px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
}
#divCameraCoverConfirmation{ 
    display: none;
    flex: 1;
    margin-top: 20px;
    position: relative;
    border:1px solid #FFCC00;
    background-color: #FFF5D9;
    border-radius: 20px;
}
#divLeftHintDiv{ 
    position: absolute; 
    height: 100%;
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.div-hint{
    flex:1;
    display: flex;
    align-items: flex-start;
    gap:10px;
    min-height: 0;
}
.div-hint img{
    height: 100%;
}
.div-hint > div{
    display: flex;
    flex:1;
    height: 100%;
    align-items: center;
    font-weight :700;
}

/*fsv-car inspection*/

#divCameraCoverRecording{ 
    display: none;
    flex:1;
    margin-top: 5px;
    position: relative;
}
#divCameraCoverHint{ 
    top:50%;
    left:50%;
    position: absolute;
    height: 100%;
    transform: translate(-50%, -50%);
}

#divCameraCoverRecordingBorder{
    border:3px solid #00CC99;
    border-radius: 10px;
    position: absolute;
    height: 100%;
    width: 100%;
}

/*fsv-car number*/
#divCameraCoverCarNumber{ 
    display: none;
    width: 100%;
    position: relative;
    height: 100%;
    flex-direction: column;
}
#divCameraCoverCarNumberText{ 
    position: absolute;
    align-items: center;
    width: 100%;
    justify-content: center;
    bottom: 100%;
    margin-bottom: 10px;
    display: flex;
}
#divCameraCoverCarNumberTextDiv{ 
    border-radius: 5px;
    padding: 5px 10px;
    color: #FFFFFF;
    background-color: #00CC99;
    font-weight: 700;
}
#divCameraCoverCarNumberBox{ 
    position: absolute;
    width: 100%;
    height:35%;
    border: 3px solid #00CC99;
    top:50%;
    border-radius: 10px;
    transform: translateY(-50%);
}


.bottom-button{ 
    position: absolute;
    bottom: 0;
    display: none;
    left: 50%;
    transform:  translate(-50%, 0);
}


#divCameraCoverStatusBar{
    display: flex;
    align-items: center;
}
#divCameraCoverStatusBar > .left{
    display: flex;
    gap:3px;
}
#divCameraCoverStatusBar > .right{
    display: flex;
    margin-left:auto;
    gap:3px;
    justify-content: flex-end;
}
.fsv-top-status{ 
    padding: 5px 10px;
    height: 31px;
    display: flex;
    gap: 3px;
    border-radius: 5px;
    border-style: none;
    background-color: #F2F7FC;
    color: #005BAC;
    font-weight: 700;
    font-size: 14px;
}


#divStreamMask{ 
    position: absolute; 
    top: calc(0.6 * var(--rvh)); 
    left: calc(4.5 * var(--rvw));
    width: calc(94 * var(--rvw)); 
    height: calc(42.5 * var(--rvh));
    /* background-image: url('../img/wait_photo.jpg'); */
    background-color: #E0E0E0;
    background-size: cover;
    background-position: center center;
    z-index: 2;
    display: none;
}
#spanStreamMask{ 
    font-size: 1.2rem;
}
#divCameraCoverSuccess{
    display:none;
}
.div-camera-cover-center-div{
    position: absolute; 
    left: 50%;
    z-index: 2;
    top: 50%;
    transform: translate(-50%,-50%);
}
.for-count-hide{
    display : none;
}
.div-camera-cover-center-icon{
    height: 40%;
}
/*header*/
.header{
    display: flex;
    flex-direction: column;
    height:95px;
    border-bottom:1px solid #e8e8e8;
    margin-bottom: var(--header-margin-bottom);
}
.header-top{
    height:var(--header-top-height);
    background: linear-gradient(to right,#00B3FE, #003399);
    border: 0;
}
.header-top::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/header_tbagc.svg");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: auto var(--header-top-height);
}

.header-center{
    flex:1;
    background: #ffffff;
    align-items: center;
    justify-content: center;
    display: flex;
}

.header-logo{
    width:245px;
    height:52px;
}

/*footer*/
#ele-footer{ 
    position: relative;
    background: linear-gradient(to right,#00B3FE, #003399);
    height: 67px;
    border: 0;
    padding-bottom: env(safe-area-inset-bottom);
    margin-top: 80px;
}

#ele-footer::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image:url("../img/footer_wave.svg");
    background-position: right bottom;
    background-repeat:  no-repeat ;
    background-size: 65px 18px;
}

#footer-text{ 
    font-size: 8.5px;
    color: #ffffff;
    top:30px;
    right:10px;
    position: absolute;
    text-align: center;
}
.footer-tmg{
    top:10px;
    left:10px;
    width: 134px;
    height: 14px;
    position: absolute;
}
.footer-tbagc{
    top:10px;
    right:10px;
    width:147px;
    height:15px;
    margin-bottom: 10px;
    position: absolute;
}



.div-hint-text-color{
    color: #EE5B6E;
}

.div-hint-text-color-green{
    color: rgb(46, 201, 46);
}



#conf-no-db-icon{ 
    background-image: url('../img/icon_nodashboard.png');
    background-size: calc(15 * var(--rvh));
    display: none;
}

#conf-no-cn-icon{ 
    background-image: url('../img/icon_nocarnumber.png');
    background-size: calc(15 * var(--rvh));
    display: none;
}

.div-hint-center{
    left:calc(12* var(--rvw)) !important;
}

.div-hint-center-text{
    left:calc(28 * var(--rvw)) !important;
}

#btnr-jump-this{
    width:112px;
}

#btnCancelRegon{
}

.charge-title{
    background-color: #E5EEF8;
    position:absolute;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.charge-value{
    background-color: #FAFAFA;
    position:absolute;
    font-weight: 500;
    letter-spacing: 1.4px;
}