/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
 * {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

@font-face {
    font-family: Biko;
    src: url(/fonts/Biko_Regular.otf);
}

@font-face {
    font-family: Gotham;
    src: url(/fonts/Gotham_Black_italic.ttf);
}

@font-face {
    font-family: PingFang;
    src: url(/fonts/PingFang.ttf);
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#FFFFFF;
    font-family: Biko, PingFang, system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size:12px;
    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    /*text-transform:uppercase;*/
    width:100%;
    background-repeat: repeat-y;
    background-size: cover;
    overflow-y: auto;
}

body.logined {
    background-color:#000305;
}

/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.event {
    border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

#deviceready.ready .event.listening { display: none; }
#deviceready.ready .event.received { display: block; }

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}


@media screen and (prefers-color-scheme: dark) {
    body {
        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
    }
}

.landing_scan_icon {
    height: 1.5rem;
    width: 1.5rem;
}

.vehicle_plate {
    font-size: 1.1rem;
    font-family: PingFang;
    font-weight: 600;
}

.vehicle_brand .brand_main {
    font-family: Biko;
    font-size: 5rem;
    line-height: 5rem;
}

.vehicle_brand .brand_km {
    font-family: Gotham;
    font-size: 0.7rem;
}

.vehicle_brand .brand_nedc {
    font-family: Gotham;
    font-size: 0.7rem;
    color: #a0a0a0;
}

.font_uppercase {
    text-transform: uppercase;
}

.bg_round {
    background-color: #FFFFFF;
    border-radius: 10px;
}

.control_icon {
    width: 55px;
    display: grid;
    justify-content: center;
    align-content: end;
    justify-items: center;
}

.control_icon img {
    width: 1.5rem;
    padding-bottom: 0.3rem;
}

.control_icon svg {
    margin-bottom: 0.3rem;
}

.bt-key {
    background: #EFEFEF;
    height: 55px;
    border-radius: 5px;
    font-size: 0.9rem;
}

.bt-key.active {
    border: solid 1px #007BFF;
    background-color: rgba(0, 123, 255, 0.2);
    color: #008cff;
}

.control_font_gray {
    color: #8f8f8f;
}

.control_font_green {
    color: #82B052;
}

.bg_light_gray {
    background-color: #D8D8D8;
}

.stroke_black {
    stroke: #000305;
}

.stroke_light_black {
    stroke: #979797;
}

.stroke_red {
    stroke: #ff5917;
}

.stroke_light_red {
    stroke: #ffa27d;
}

.stroke_light_gray {
    stroke: #D8D8D8;
}

.stroke_gray {
    stroke: #8f8f8f;
}

.stroke_light_blue {
    stroke: #6e94ff;
}

.stroke_blue {
    stroke: #1755ff;
}

.fill_light_gray {
    fill: #D8D8D8;
}

.fill_gray {
    fill: #8f8f8f;
}

.fill_light_black {
    fill: #9FA3A5;
}

.fill_light_blue {
    fill: #6e94ff;
}

.fill_light_green {
    fill: #6eff81;
}

.fill_blue {
    fill: #3B6FFF;
}

.nowrap {
    white-space: nowrap;
}

.temperature_block {
    font-size: 20px;
    font-family: Biko;
    margin-left: 0.5rem;
}

.temperature_block sup {
    margin-left: -7px;
}

.active_title {
    font-size: 1.1rem;
}

.btn.bg_black {
    background-color: #000305;
    color: #FFFFFF;
}

.btn.bg_white {
    background-color: #FFFFFF;
}

.parking_loading .text {
    position: absolute;
    font-size: 1.1rem;
    font-family: 'PingFang';
    font-weight: 800;
}

.parking_title {
    font-size: 1rem;
}

.tab {
    margin: 0px 20px;
    padding: 2px;
    padding-right: 2px;
    padding-bottom: 10px;
    font-size: 0.9rem;
}

.tab.active {
    padding-bottom: 6px;
    border-bottom: solid 4px #007BFF ;
}

.key_card {
    background-image: url(/img/bg_arcs.svg);
    background-position-x: right;
    background-position-y: top;
    background-repeat: no-repeat;
}

.key_card .footer {
    font-size: 0.6rem !important;
    color: #585858;
    font-family: Biko;
}

.key_card.not_support {
    background-color: rgba(0, 0, 0, 0.2);
}

.key_card.bt_key.enabled {
    background-color: #5990f7;
    border: #1755ff 1px solid;
    color:#FFFFFF;
}

.key_card.nfc_mobile.enabled {
    background-color: #f89232;
    border: #ff7b00 1px solid;
    color:#FFFFFF;
}

.key_card.nfc_watch.enabled {
    background-color: #252525;
    border: #111111 1px solid;
    color:#FFFFFF;
}

.button {
    padding: 5px 20px;
    background-color: #747474;
    color: #FFFFFF;
} 

.button.round {
    border-radius: 15px;
} 

.button.bg_blue {
    background: #007BFF;
    color: #FFFFFF;
}

.button.tiny {
    padding: 2px 10px;
    font-size: 0.2rem;
}

.align-center {
    align-content: center;
}

.create_key_msg {
    background-color: #000305;
    color: #FFFFFF;
    flex-direction: column; 
    -ms-flex-direction: column;
    border-radius: 5px;
}

.steps_line .dot,
.steps_line .active {
    font-size: 0.8rem;
    height: 1.2rem;
    width: 1.2rem;
    display: flex;
    align-items: center;
}

.steps_line .active {
    display: flex;
    justify-content: center;
    background: #000305;
    color: #FFFFFF;
    border-radius: 50%;
    z-index: 1;
}

.steps_line .dot .last,
.steps_line .dot .next {
    height: 0.5rem;
    width: 0.5rem;
    z-index: 1;
}

.steps_line .dot .next {
    background: #DDD;
    border-radius: 50%;
}

.bg_transparent {
    background: transparent !important;
}

.steps_line .dot::after,
.steps_line .dot.transparent_node::before {
    content: "";
    position: absolute;
    width: 30%;
    height: 1px;
    background-color: #DDD;
}

.steps_line .dot.transition_node::before {
    left: 29%
}

.steps_line .dot .spacing {
    padding-left: 3px;
    padding-right: 3px;
    background-color: #FFFFFF;
    z-index: 1;
}

.steps_line .dot.active_node::after {
    background-color: #000305;
}

.steps_line .dot.last_node::after,
.steps_line .dot.first_node::after {
    background-color: transparent;
}

.step_content {
    text-align: center;
}

.step_content .title {
    font-size: 1.2rem;
}

.step_content .text {
    color: #747474;
}

.fixed.bottom {
    width: 100%;
    bottom: 1rem;
}

.btn {
    margin: 10px;
    padding: 10px 20px;
    cursor: pointer;
    color: #007BFF;
    font-size: 0.9rem;
    border-radius: 1.5rem;
    text-align: center;
}

.btn.blue {
    background-color: #007BFF;
    color: #FFFFFF;
    border-radius: 1.5rem;
}

.btn.disabled {
    background-color: #8f8f8f;
    color: #FFFFFF;    
    border-radius: 1.5rem;
}

.user_avatar {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
}

.add_account_input {
    padding: 0.25rem;
    background-color: #EFEFEF;
    border-radius: 5px;
    display: flex;
}

.add_account_input input {
    border-style: none;
    background: transparent;
    font-family: 'Biko';
    padding-left: 5px;
    padding-right: 5px;
    font-size: 1rem;
    width: 100%;
}

.add_account_input .left_border_splitter {
    padding: 0.5rem;
    border-left: #a0a0a0 2px solid;
}

.menu {
    width: 12vh;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100vh;
    padding: 15px 10px;
    margin-left: 2vh;
    color: #FFFFFF;
    font-family: 'PingFang';
}

.container {
    height: 98vh;
    margin: 5px;
    overflow-y: auto;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgb(239, 248, 255) 100%);
    border-radius: 10px;
    font-family: 'PingFang';
    font-size: 1rem;
}

.menu_item {
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.menu_item.active {
    background-color: #FFFFFF;
}

.box_shadow_gray {
    box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 30%);
}

.menu_panel.active {
    position: absolute;
    z-index: 50;
    height: 100vh;
    top: 0;
    background: rgba(0,0,0,0.5);
    width: 100%;
}

.menu_panel.container {
    background: linear-gradient(181deg,#f2f2f2 7%, #ffffff 99%);
    border-radius: 15px;
    position: relative;
    padding: 20px;
    margin: 0px;
}

.menu_panel.container .title .close_icon {
    margin-top: -10px;
    margin-left: -10px;
    width: 30px;
    cursor: pointer;
}

.menu_panel2.active {
    position: absolute;
    z-index: 50;
    height: 100vh;
    top: 0;
    background: rgba(0,0,0,0.5);
    width: 100%;
}

.menu_panel2.container {
    background: linear-gradient(181deg,#f2f2f2 7%, #ffffff 99%);
    border-radius: 15px;
    position: relative;
    padding: 0;
    margin: 0px;
}

.menu_panel2.container .title .close_icon {
    margin-top: -10px;
    margin-left: -10px;
    width: 30px;
    cursor: pointer;
}

.side_menu {
    width: 20%;
    max-width: 220px;
    margin-right: 20px;
    margin-top: 1.5rem;
}

.side_menu .menu_item {
    font-size: 1rem;
    padding: 15px 15px 15px 0px;
    margin-left: -20px;
    border-radius: 0px 10px 10px 0px;
}

.side_menu .menu_item.active {
    background: #fff;
    color: #1755ff;

}

.side_menu .menu_item .icon {
    width: 25px;
    margin: 0px 15px;
}

.side_menu .menu_item .content::before {
    content: '';
    border: 2px solid transparent;
}

.side_menu .menu_item.active .content::before {
    border-color: #1755ff;
    height: 25px;
}

.vehicle_control {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 0.7rem;
    background-color: #EAEAEA;
    border-radius: 10px;
    width: 10vw;
}

.vehicle_control.active {
    border: solid 1px #007BFF;
    background-color: rgba(0, 123, 255, 0.2);
    color: #008cff;
}

.vehicle_control .icon {
    height: 7vh;
    display: flex;
    justify-content: center;
}

.vehicle_control .icon img {
    width: 4vh;
}

.round-switch {
    display: inline-block;
    vertical-align: middle;
    background: #dfdfdf;
    border-radius: 30px;
    position: relative;
    padding: 5px 0px;
}

.round-switch label {
    padding: 5px 20px;
    border-radius: 30px;
}

.round-switch label:nth-child(n+4) {
    margin-left: -10px;
}

.round-switch input[type="radio"] {
    display: none;
}

.round-switch input[type="radio"]:checked + label {
    background-color: #1755ff;
    color: white;
}

.border_blue {
    border: #007BFF 1px solid;
}

.open-function {
    display: inline-block;
    width: 66px;
    height: 24px;
    line-height: 24px;
    margin-left: 20px;
    background: #1851ef;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    font-size: 0.86rem;
}

.mainContent {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.mainContent .fee_style {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.mainContent .fee_style .fee_border {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;;
    align-items: center;
    width: 360px;
    height: 80px;
    line-height: 80px;
    background: #fff;
    margin-bottom: 1vw;
    border-radius: 8px;
    padding-left: 1.5vw;
    font-size: 0.9rem;
}
.mainContent .fee_style .fee_select {
    border: 2px solid #3B6FFF;
}

.mainContent .fee_style .fee_one {

}

.mainContent .fee_style .fee_but {
    width: 360px;
    height: 2.4vw;
    line-height: 2.4vw;
    background: #3b6fff;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    font-size: 0.9rem;
}

.mainContent .fee_style .fee_code {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    height: 6vw;
    width: 16vw;
    margin-bottom: 1vw;
}

.mainContent .fee_style .fee_code .qrcode_info {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 1.2rem 0 1.6rem;
    height: 100%;
}
.mainContent .fee_style .fee_code .qrcode_info .tishi {
    font-size: 0.86rem;
    font-weight: 500;
    color: #000305;
}
.mainContent .fee_style .fee_code .qrcode_info .money {
    font-size: 1.3rem;
    font-weight: bold;
    color: #000305;
}

.lowopacity {
    opacity: 0.3;
}

.install {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}
.installed {
    border-radius: 23px;
    overflow: hidden;
    width: 96%;
    position: relative;
}
.installed .renew-text{
    position: absolute;
    top:12;
    left:20;
    z-index: 9;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.installed .renew-text:hover{
    color: rgb(2,167,240);
}
.primary-btn {
    padding: 0 15px;
    height: 2.4vw;
    line-height: 2.4vw;
    background: #3b6fff;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    font-size: 0.9rem;
}
.default-btn {
    padding: 0 15px;
    height: 2.4vw;
    line-height: 2.4vw;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    border: solid 1px #333;
}
.fee_banner {
    border-radius: 23px;
    overflow: hidden;
}
.title_header {
    color: #000305;
    text-align: center;
    width: 100%;
    font-size: 1.4rem;
    margin-top: 14vh;
    font-weight: bold;;
}
.title_info {
    color: #979797;
    text-align: center;
    width: 100%;
    font-size: 1.0rem;
    margin-top: 2vh;
}

.time_count {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0 18%;
    margin-top: 3vh;
}
.main_progress {
    position: relative;
    width: 80%;
    margin-left: 20%;
    height: 100%;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 40px;
}
.main_progress .progress {
    width: 80%;
    height: 20px;
    background: #ececec;
    border-radius: 40px;
}
.main_progress .progress_copy {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    right: 0;
    width: 80%;
    height: 20px;
    background: linear-gradient(90deg,#3589f8, #1851ef);
    border-radius: 40px;
}

.out_success {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
}

.out_success .success_info {
    font-size: 1.4rem;
    color: #000305;
    margin-top: 2vh;
    font-weight: bold;
}

.out_success .success_button {
    width: 16vw;
    height: 2.4vw;
    line-height: 2.4vw;
    background: #3b6fff;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 6vh;
}
.zuoyou {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.zuoyou1 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}