:root{
    --primary-color:#005293;
    --primary-color2:#5189f9;
    --primary-color3:#5189f9;
    --primary-color4:#c3dbff;
    --primary-color5:#d0e8ff;
}

*,:after,:before{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

body,button,dd,dl,dt,fieldset,figcaption,figure,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul{
    font-family:Pretendard,Open Sans,AppleGothic,helvetica,sans-serif !important;
    margin:0;
    padding:0;
}

body,button,input,select,table,textarea{
    color:#fff !important;
    font-family:Pretendard,Open Sans,AppleGothic,helvetica,sans-serif !important;
    font-size:16px !important;
    letter-spacing:-.48px;
    line-height:1.75em !important;
    word-break:keep-all !important;
    -webkit-text-size-adjust:none;
}

body{
    background:#121212;
    overflow:hidden;
}

img{
    border:0;
    max-width:100%;
    vertical-align:top;
}

ol,ul{
    list-style:none;
}

fieldset{
    border:none;
}

fieldset legend{
    font-size:0;
    height:0;
    line-height:0;
    margin:0;
    overflow:hidden;
    padding:0;
    text-indent:-999em;
    width:0;
}

button{
    cursor:pointer;
}

article,canvas,figcaption,figure,footer,header,hgroup,nav,section,time{
    display:block;
}

hr{
    clear:both;
    display:none;
}

img[usemap]{
    border:none;
    height:auto;
    max-width:100%;
    width:auto;
}

a{
    color:inherit;
    -webkit-text-decoration:none;
    text-decoration:none;
}

a,a:active,a:hover{
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

::-webkit-input-placeholder{
    color:#878787;
}

:-moz-placeholder,::-moz-placeholder{
    color:#878787;
}

:placeholder-shown{
    color:#878787;
}

table caption{
    font-size:0;
    height:0;
    line-height:0;
    margin:0;
    overflow:hidden;
    padding:0;
    text-indent:-999em;
    width:0;
}

input[type=checkbox],input[type=radio]{
    margin:-.2em 3px 0 0 !important;
    vertical-align:middle !important;
}

input,select{
    background-color:#141414;
    vertical-align:middle;
}

button,input,textarea{
    -webkit-appearance:none;
    -webkit-border-radius:0;
}

input[type=checkbox]{
    -webkit-appearance:checkbox;
}

input[type=radio]{
    -webkit-appearance:radio;
}

::-webkit-scrollbar{
    height:4px;
    width:4px;
}

::-webkit-scrollbar-track{
    background:#2d2d2d;
    -webkit-box-shadow:none;
            box-shadow:none;
}

::-webkit-scrollbar-track:hover{
    background:none;
    -webkit-box-shadow:none;
            box-shadow:none;
}

::-webkit-scrollbar-thumb{
    background:#616161;
}

::-webkit-scrollbar-thumb:hover{
    background:#2d2d2d;
}

::-webkit-scrollbar-button{
    display:none;
}

.clear{
    clear:both;
}
.clearfix{
    *zoom:1;
}
.clearfix:after{
    clear:both;
    content:" ";
    display:block;
}
.pointer{
    cursor:pointer;
}
.inline-block{
    display:inline-block;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
.text-center{
    text-align:center !important;
}
.text-right{
    text-align:right !important;
}
.text-left{
    text-align:left !important;
}
.text-orange{
    color:var(--primary-color2);
}
.text-cyan{
    color:#26b4be;
}
.mgb5{
    margin-bottom:5px !important;
}
.mgb6{
    margin-bottom:6px !important;
}
.mgb8{
    margin-bottom:8px !important;
}
.mgb10{
    margin-bottom:10px !important;
}
.mgb14{
    margin-bottom:14px !important;
}
.mgb15{
    margin-bottom:15px !important;
}
.mgb20{
    margin-bottom:20px !important;
}
.mgb25{
    margin-bottom:25px !important;
}
.mgb30{
    margin-bottom:30px !important;
}
.mgt5{
    margin-top:5px !important;
}
.mgt10{
    margin-top:10px !important;
}
.mgt15{
    margin-top:15px !important;
}
.msg{
    color:#f53c3c;
    font-size:14px;
    margin-left:10px;
}
.msg:before{
    content:"*";
    margin-right:5px;
}
.pagination{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    margin-top:10px;
}
.pagination img{
        cursor:pointer;
        height:20px;
        margin:5px;
        width:20px;
    }
img.disabled{
    cursor:not-allowed;
    -webkit-filter:grayscale(100%);
            filter:grayscale(100%);
    opacity:.5;
}
.custom-alert{
    background:rgba(0,0,0,.5);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    opacity:0;
    -webkit-transition:visibility 0s,opacity .3s;
    transition:visibility 0s,opacity .3s;
    visibility:hidden;
    z-index:10000;
}
.custom-alert-content{
    background:#f0f0f0;
    border-radius:8px;
    -webkit-box-shadow:0 8px 20px rgba(0,0,0,.5);
            box-shadow:0 8px 20px rgba(0,0,0,.5);
    min-height:150px;
    padding:20px;
    text-align:center;
    width:400px;
}
.custom-alert-content p{
        color:#000;
        margin-bottom:25px;
        padding:5px;
    }
.plb-tooltip{
    background-color:#333;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    border-radius:5px;
    -webkit-box-shadow:0 2px 10px rgba(0,0,0,.2);
            box-shadow:0 2px 10px rgba(0,0,0,.2);
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:14px;
    max-width:200px;
    opacity:0;
    padding:8px 12px;
    text-align:center;
    -webkit-transition:opacity .3s ease-in-out;
    transition:opacity .3s ease-in-out;
    white-space:nowrap;
}
.plb-tooltip:after{
    border:6px solid transparent;
    border-top-color:#333;
    content:"";
    left:50%;
    position:absolute;
    top:100%;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
}
.plb-tooltip{
    opacity:1;
}
#cesiumContainer{
    height:100vh;
    width:100%;
}
#togglePanel{
    background-color:rgba(0,0,0,.7);
    border-radius:5px;
    color:#fff;
    left:650px;
    max-height:200px;
    overflow-y:auto;
    padding:10px;
    position:fixed;
    top:30px;
    -webkit-transform:translateY(-50%);
            transform:translateY(-50%);
    z-index:10;
}
#toggleButton{
    background-color:#555;
    border:none;
    color:#fff;
    cursor:pointer;
    padding:2px;
    width:200px;
}
.dataSourceItem{
    background-color:hsla(0,0%,100%,.1);
    cursor:pointer;
    margin:5px 0;
    padding:5px;
}
.dataSourceItem:hover{
    background-color:hsla(0,0%,100%,.2);
}
.overlay1{
    top:150px;
}
.overlay1,.overlay2{
    background-color:rgba(0,0,0,.5);
    border-radius:5px;
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:26px;
    padding:5px 10px;
    position:absolute;
    right:10px;
    z-index:10;
}
.overlay2{
    top:205px;
}
.overlay3{
    background-color:rgba(0,0,0,.5);
    border-radius:5px;
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:26px;
    padding:5px 10px;
    position:absolute;
    right:10px;
    top:250px;
    z-index:10;
}
.loading{
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    color:#666;
    gap:8px;
}
.loading:before{
    -webkit-animation:spin 1s linear infinite;
            animation:spin 1s linear infinite;
    border:2px solid #e0e0e0;
    border-radius:50%;
    border-top:2px solid var(--primary-color);
    content:"";
    height:16px;
    width:16px;
}
@-webkit-keyframes spin{
    0%{
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }
    to{
        -webkit-transform:rotate(1turn);
                transform:rotate(1turn);
    }
}
@keyframes spin{
    0%{
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }
    to{
        -webkit-transform:rotate(1turn);
                transform:rotate(1turn);
    }
}

#header{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    height:64px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    padding:0 24px;
}
.sitelogo{
    line-height:0;
    margin-right:24px;
}
.sitelogo img{
    height:60px;
    padding:6px 0;
}
.header{
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
#gnb ul,.header{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
#gnb ul li a{
    border-radius:22px;
    color:#fff;
    font-size:18px;
    font-weight:600;
    line-height:44px;
    padding:0 20px;
}
#gnb ul li a,#gnb ul li a i{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
#gnb ul li a i{
    background-position:50% 50%;
    background-repeat:no-repeat;
    height:20px;
    margin-right:5px;
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    width:20px;
}
#gnb ul li a i.icon1{
    background-image:url(../images/icons/ico_icon1.svg);
}
#gnb ul li a i.icon2{
    background-image:url(../images/icons/ico_icon2.svg);
}
#gnb ul li a i.icon3{
    background-image:url(../images/icons/ico_icon3.svg);
}
#gnb ul li a i.icon4{
    background-image:url(../images/icons/ico_icon4.svg);
}
#gnb ul li a i.download{
    background-image:url(../images/icons/icon_download.svg);
}
#gnb ul li a:hover{
    color:var(--primary-color3);
}
#gnb ul li a:hover i.icon1{
    background-image:url(../images/icons/ico_icon1_on.svg);
}
#gnb ul li a:hover i.icon2{
    background-image:url(../images/icons/ico_icon2_on.svg);
}
#gnb ul li a:hover i.icon3{
    background-image:url(../images/icons/ico_icon3_on.svg);
}
#gnb ul li a:hover i.icon4{
    background-image:url(../images/icons/ico_icon4_on.svg);
}
#gnb ul li a:hover i.download{
    background-image:url(../images/icons/icon_download_on.svg);
}
#gnb ul li.active a{
    background:var(--primary-color);
    color:#fff;
}
#gnb ul li.active a i.icon1{
    background-image:url(../images/icons/ico_icon1.svg);
}
#gnb ul li.active a i.icon2{
    background-image:url(../images/icons/ico_icon2.svg);
}
#gnb ul li.active a i.icon3{
    background-image:url(../images/icons/ico_icon3.svg);
}
#gnb ul li.active a i.icon4{
    background-image:url(../images/icons/ico_icon4.svg);
}
#gnb ul li.active a i.download{
    background-image:url(../images/icons/icon_download.svg);
}
#gnb ul li a.disabled{
    color:gray;
    cursor:not-allowed;
    pointer-events:none;
}
#container{
    position:relative;
}
#map{
    height:calc(100vh - 112px);
    left:0;
    top:0;
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:100%;
    z-index:9;
}
#map.shrink{
    width:calc(100% - 768px);
}
#map .map{
    height:100%;
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:100%;
}
#map .links,#map .map{
    left:0;
    position:absolute;
    top:0;
}
#map .links{
    z-index:10;
}
#map .links>li{
    position:absolute;
}
#map .links>li.m1{
    left:750px;
    top:280px;
}
#map .links>li.m2{
    left:1030px;
    top:270px;
}
#map .links>li.m3{
    left:730px;
    top:560px;
}
#map .links>li.m4{
    left:1000px;
    top:560px;
}
#map .links>li>a{
    background:var(--primary-color);
    border:1px solid hsla(0,0%,100%,.64);
    border-radius:36px;
    color:#fff;
    display:block;
    font-size:14px;
    height:36px;
    letter-spacing:-.21px;
    line-height:34px;
    padding:0 16px;
    position:relative;
    width:138px;
}
#map .links>li>a:after{
    content:"+";
    font-size:18px;
    line-height:32px;
    position:absolute;
    right:16px;
    top:0;
}
#map .links>li.active>a,#map .links>li>a:hover{
    background:var(--primary-color);
    border-color:#fff;
}
#map .link-content{
    display:none;
    left:160px;
    position:absolute;
    top:-100px;
    width:300px;
    z-index:12;
}
#map .link-content .title{
    background:var(--primary-color);
    border-radius:8px 8px 0 0;
    color:#fff;
    font-size:16px;
    font-weight:600;
    letter-spacing:-.24px;
    line-height:48px;
    padding:0 20px;
    position:relative;
}
#map .link-content .title .close{
    background:url(../images/dashboard/links_close.svg) 50% 50% no-repeat;
    display:block;
    height:24px;
    margin-top:-12px;
    position:absolute;
    right:15px;
    text-indent:-9999em;
    top:50%;
    width:24px;
}
#map .link-content .box{
    background:#121212;
    border-radius:0 0 8px 8px;
    padding:20px;
}
#company-logo{
    bottom:12px;
    padding-right:16px;
    position:absolute;
    right:24px;
    z-index:100;
}
#company-logo img{
    background:#fff;
    border-radius:10px;
    opacity:.7;
    padding:10px;
}
html.admin-opened #company-logo,html.cross-opened #company-logo,html.monitor-opened #company-logo,html.stat-opened #company-logo{
    right:768px;
}
html.cross-opened #map .map{
    left:400px;
}
html.cross-opened #map .links>li.m1{
    left:1150px;
}
html.cross-opened #map .links>li.m2{
    left:1430px;
}
html.cross-opened #map .links>li.m3{
    left:1120px;
}
html.cross-opened #map .links>li.m4{
    left:1400px;
}
html.monitor-opened #map{
    left:-768px;
}
html.monitor-opened #map .map{
    left:400px;
}
html.monitor-opened #map .links>li.m1{
    left:1150px;
}
html.monitor-opened #map .links>li.m2{
    left:1430px;
}
html.monitor-opened #map .links>li.m3{
    left:1120px;
}
html.monitor-opened #map .links>li.m4{
    left:1400px;
}
html.stat-opened #map{
    left:-768px;
}
html.stat-opened #map .map{
    left:400px;
}
html.stat-opened #map .links>li.m1{
    left:1150px;
}
html.stat-opened #map .links>li.m2{
    left:1430px;
}
html.stat-opened #map .links>li.m3{
    left:1120px;
}
html.stat-opened #map .links>li.m4{
    left:1400px;
}
html.admin-opened #map{
    left:-768px;
}
html.admin-opened #map .map{
    left:400px;
}
html.admin-opened #map .links>li.m1{
    left:1150px;
}
html.admin-opened #map .links>li.m2{
    left:1430px;
}
html.admin-opened #map .links>li.m3{
    left:1120px;
}
html.admin-opened #map .links>li.m4{
    left:1400px;
}
#map2{
    display:none;
    height:calc(100vh - 112px);
    left:50%;
    position:relative;
    width:50%;
    z-index:9;
}
#map2,#map2 .map2{
    top:0;
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
}
#map2 .map2{
    height:100%;
    width:100%;
}
#map2 .links,#map2 .map2{
    left:0;
    position:absolute;
}
#map2 .links{
    top:0;
    z-index:10;
}
#map2 .links>li{
    position:absolute;
}
#map2 .links>li.m1{
    left:375px;
    top:280px;
}
#map2 .links>li.m2{
    left:515px;
    top:270px;
}
#map2 .links>li.m3{
    left:365px;
    top:560px;
}
#map2 .links>li.m4{
    left:500px;
    top:560px;
}
#map2 .links>li>a{
    background:var(--primary-color);
    border:1px solid hsla(0,0%,100%,.64);
    border-radius:36px;
    color:#fff;
    display:block;
    font-size:14px;
    height:36px;
    letter-spacing:-.21px;
    line-height:34px;
    padding:0 16px;
    position:relative;
    width:138px;
}
#map2 .links>li>a:after{
    content:"+";
    font-size:18px;
    line-height:32px;
    position:absolute;
    right:16px;
    top:0;
}
#map2 .links>li.active>a,#map2 .links>li>a:hover{
    background:var(--primary-color);
    border-color:#fff;
}
#map2 .link-content{
    display:none;
    left:160px;
    position:absolute;
    top:-100px;
    width:300px;
    z-index:12;
}
#map2 .link-content .title{
    background:var(--primary-color);
    border-radius:8px 8px 0 0;
    color:#fff;
    font-size:16px;
    font-weight:600;
    letter-spacing:-.24px;
    line-height:48px;
    padding:0 20px;
    position:relative;
}
#map2 .link-content .title .close{
    background:url(../images/dashboard/graph_close.svg) 50% 50% no-repeat;
    display:block;
    height:24px;
    margin-top:-12px;
    position:absolute;
    right:15px;
    text-indent:-9999em;
    top:50%;
    width:24px;
}
#map2 .link-content .box{
    background:#121212;
    border-radius:0 0 8px 8px;
    padding:20px;
}
html.lidar-opened .lidar-control{
    display:block;
}
.lidar-control{
    background:#121212;
    border-radius:8px;
    bottom:24px;
    display:none;
    left:130px;
    padding:20px;
    position:absolute;
    width:1500px;
    z-index:50;
}
.lidar-control .title,.lidar-control .wrap{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.lidar-control .title{
    width:214px;
}
.lidar-control .title .icon{
    background:var(--primary-color) url(../images/floating_lis.svg) 50% 50% no-repeat;
    border-radius:12px;
    height:72px;
    margin-right:20px;
    width:72px;
}
.lidar-control .title .text{
    -webkit-box-flex:1;
    color:#fff;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    font-size:13px;
    line-height:1.6em;
    min-width:0;
    text-align:center;
    width:1%;
}
.lidar-control .title .text strong{
    font-size:24px;
    font-weight:600;
}
.lidar-control .info{
    -webkit-box-flex:1;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    min-width:0;
    width:1%;
}
.lidar-control .info ul{
    margin:0 -10px;
}
.lidar-control .info ul,.lidar-control .info ul li{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.lidar-control .info ul li{
    border:1px solid #555;
    padding:8px;
    width:20%;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    text-align:center;
}
.lidar-control .info ul li .tit{
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:-.18px;
    line-height:1.4em;
    margin-bottom:8px;
}
.lidar-control .info ul li .thumb{
    border-radius:4px;
    height:0;
    overflow:hidden;
    padding-bottom:56.5%;
    position:relative;
}
.lidar-control .info ul li .thumb img{
    height:auto !important;
    left:0;
    max-width:100%;
    min-height:100%;
    -o-object-fit:cover;
       object-fit:cover;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -webkit-transition:.3s;
    transition:.3s;
    width:100%;
}
.lidar-control .info ul li span.icon_b{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    background:#fff;
    border-radius:80%;
    height:60px;
    padding:0;
    text-align:center;
    width:60px;
}
.lidar-control .info ul li span.icon_b img{
    height:36px;
    vertical-align:middle;
    width:36px;
}

.input{
    background-color:#141414;
    border:1px solid #141414;
    border-radius:4px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    color:#fff;
    font-size:14px;
    font-weight:400;
    height:32px;
    letter-spacing:-.04em;
    line-height:1.3em;
    padding:0 10px;
    vertical-align:middle;
}
.input:active,.input:focus,.input:hover{
    border-color:var(--primary-color3);
    outline:0;
}
.input.date{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-image:url(../images/ui-controls/input_cal.svg);
    background-position:right 10px center;
    background-repeat:no-repeat;
}
.input.date:active,.input.date:focus,.input.date:hover{
    background-image:url(../images/ui-controls/input_cal_active.svg);
    border-color:var(--primary-color);
    outline:0;
}
.input.time{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-image:url(../images/ui-controls/input_time.svg);
    background-position:right 10px center;
    background-repeat:no-repeat;
}
.input.time:active,.input.time:focus,.input.time:hover{
    background-image:url(../images/ui-controls/input_time_active.svg);
    border-color:var(--primary-color);
    outline:0;
}
.input.disable{
    color:#626262;
    pointer-events:none;
}
.input.disable:active,.input.disable:focus,.input.disable:hover{
    border-color:#141414;
    outline:0;
}
select.input{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding:0 30px 0 10px;
}
select.input::-ms-expand{
    display:none;
}
textarea.input{
    height:auto;
    line-height:1.6em;
    overflow:auto;
    padding:7px 10px;
    resize:none;
}

.btn-pack{
    background:#fff;
    border:1px solid #ccc;
    border-radius:4px;
    color:#505050;
    cursor:pointer;
    display:inline-block;
    margin:0;
    overflow:visible;
    padding:0 10px;
    position:relative;
    text-align:center;
    -webkit-text-decoration:none !important;
    text-decoration:none !important;
    -webkit-transition:none !important;
    transition:none !important;
    vertical-align:middle;
    white-space:nowrap;
}
.btn-pack.focus{
    background:var(--primary-color);
    border:1px solid var(--primary-color);
    color:#fff;
}
.btn-pack.dark{
    background:#424242;
    border:1px solid #424242;
    color:#fff;
}
.btn-pack.border{
    background:#fff;
    border:1px solid var(--primary-color);
    color:var(--primary-color);
}
.btn-pack.border2{
    background:#212121;
    border:1px solid #bdbdbd;
    color:#bdbdbd;
}
.btn-pack.medium{
    font-size:16px;
    height:40px;
    letter-spacing:-.04em;
    line-height:38px;
    padding:0 15px;
}
.btn-pack.small{
    font-size:15px;
}
.btn-pack.small,.btn-pack.small2{
    height:32px;
    letter-spacing:-.04em;
    line-height:30px;
    min-width:80px;
    padding:0 14px;
}
.btn-pack.small2{
    font-size:14px;
}
.btn-pack.large{
    font-size:17px;
    height:46px;
    line-height:44px;
    padding:0 25px;
}
.btn-pack.large,.btn-pack.xlarge{
    border:1px solid #a8a8a8;
    font-weight:500;
    letter-spacing:-.04em;
}
.btn-pack.xlarge{
    font-size:18px;
    height:52px;
    line-height:50px;
    padding:0 29px;
}
.btn-pack.block{
    display:block;
    width:100%;
}
.btn-pack.cancel:before{
    background:url(../images/ui-controls/btn_cancel.svg) 50% 50% no-repeat;
}
.btn-pack.cancel:before,.btn-pack.submit:before{
    content:"";
    display:inline-block;
    height:20px;
    margin-right:5px;
    vertical-align:middle;
    width:20px;
}
.btn-pack.submit:before{
    background:url(../images/ui-controls/btn_submit.svg) 50% 50% no-repeat;
}
.btn-pack.add:before{
    background:url(../images/ui-controls/btn_plus.svg) 50% 50% no-repeat;
    content:"";
    display:inline-block;
    height:12px;
    margin-right:5px;
    vertical-align:middle;
    width:12px;
}
.btn-pack.add:hover{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:#fff;
}
.btn-pack.add:hover:before{
    background-image:url(../images/ui-controls/btn_plus_hover.svg);
}
.btn-pack.minus:before{
    background:url(../images/ui-controls/btn_minus.svg) 50% 50% no-repeat;
    content:"";
    display:inline-block;
    height:12px;
    margin-right:5px;
    vertical-align:middle;
    width:12px;
}
.btn-pack.minus:hover{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:#fff;
}
.btn-pack.minus:hover:before{
    background-image:url(../images/ui-controls/btn_minus_hover.svg);
}
.btn-pack.modify:before{
    background:url(../images/ui-controls/btn_modify.svg) 50% 50% no-repeat;
    content:"";
    display:inline-block;
    height:12px;
    margin-right:5px;
    vertical-align:middle;
    width:12px;
}
.btn-pack.modify:hover{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:#fff;
}
.btn-pack.modify:hover:before{
    background-image:url(../images/ui-controls/btn_modify_hover.svg);
}
.buttons{
    margin-top:20px;
}
.buttons:after{
    clear:both;
    content:"";
    display:block;
}
.buttons .fl{
    float:left;
}
.buttons .fr{
    float:right;
}
.buttons .cen{
    text-align:center;
}
.buttons .cen .btn-pack{
    margin:0 2px;
}
.inout-btn{
    background:#fff url(../images/icons/ico_inout.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:90px;
    position:absolute;
    top:18px;
    width:46px;
    z-index:49;
}
.inout-btn.active,.inout-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_inout_on.svg);
}
.inout-btn:hover .tooltip{
    opacity:1;
}
.traffic-btn{
    background:#fff url(../images/icons/ico_traffic.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:122px;
    width:46px;
    z-index:49;
}
.traffic-btn.active,.traffic-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_traffic_on.svg);
}
.traffic-btn:hover .tooltip{
    opacity:1;
}
.pedestriantraffic-btn{
    background:#fff url(../images/icons/ico_walk_on.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:264px;
    position:absolute;
    top:18px;
    width:46px;
    z-index:49;
}
.pedestriantraffic-btn.active,.pedestriantraffic-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_walk.svg);
}
.pedestriantraffic-btn:hover .tooltip{
    opacity:1;
}
.speed-btn{
    background:#fff url(../images/icons/ico_speed.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:272px;
    width:46px;
    z-index:49;
}
.speed-btn.active,.speed-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_speed_on.svg);
}
.speed-btn:hover .tooltip{
    opacity:1;
}
.history-btn{
    background:#fff url(../images/icons/ico_history.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:206px;
    position:absolute;
    top:18px;
    width:46px;
    z-index:49;
}
.history-btn.active,.history-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_history_on.svg);
}
.history-btn:hover .tooltip{
    opacity:1;
}
.warning-btn{
    background:#fff url(../images/icons/ico_warning_btn.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:172px;
    width:46px;
    z-index:49;
}
.warning-btn.active,.warning-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_warning_on.svg);
}
.warning-btn:hover .tooltip{
    opacity:1;
}
.lanequeue-btn{
    background:#fff url(../images/icons/ico_lanequeue.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:222px;
    width:46px;
    z-index:49;
}
.lanequeue-btn.active,.lanequeue-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_lanequeue_on.svg);
}
.lanequeue-btn:hover .tooltip{
    opacity:1;
}
.object-btn{
    background:#fff url(../images/icons/ico_letter-l.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:206px;
    position:absolute;
    top:18px;
    width:46px;
    z-index:49;
}
.object-btn.active,.object-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_letter-f.svg);
}
.object-btn:hover .tooltip{
    opacity:1;
}
.sound-btn{
    background:#fff url(../images/icons/ico_sound_off.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:322px;
    width:46px;
    z-index:49;
}
.sound-btn.active,.sound-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_sound_on.svg);
}
.sound-btn:hover .tooltip{
    opacity:1;
}
.camera-btn{
    background:#fff url(../images/icons/ico_camera_off.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:276px;
    width:46px;
    z-index:49;
}
.camera-btn.active,.camera-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_camera_on.svg);
}
.camera-btn:hover .tooltip{
    opacity:1;
}
.playback-btn{
    background:#fff url(../images/icons/ico_playback_off.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:276px;
    width:46px;
    z-index:49;
}
.playback-btn.active,.playback-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_playback_on.svg);
}
.playback-btn:hover .tooltip{
    opacity:1;
}
.burger-btn{
    background:#fff url(../images/icons/ico_panel_off.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:70px;
    width:46px;
    z-index:49;
}
.burger-btn.active,.burger-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_panel_on.svg);
}
.burger-btn:hover .tooltip{
    opacity:1;
}
.layer-control-btn{
    background:#fff url(../images/icons/ico_layer_off.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:372px;
    width:46px;
    z-index:49;
}
.layer-control-btn.active,.layer-control-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_layer_on.svg);
}
.layer-control-btn:hover .tooltip{
    opacity:1;
}
.building-control-btn{
    background:#fff url(../images/icons/ico_building.svg) 50% 50% no-repeat;
    border:none;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    cursor:pointer;
    height:46px;
    left:32px;
    position:absolute;
    top:326px;
    width:46px;
    z-index:49;
}
.building-control-btn.active,.building-control-btn:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_building_on.svg);
}
.building-control-btn:hover .tooltip{
    opacity:1;
}
#customAlertButton{
    background-color:#2196f3;
    border:none;
    border-radius:8px;
    color:#fff;
    cursor:pointer;
    font-size:16px;
    padding:10px 30px;
    -webkit-transition:background-color .2s;
    transition:background-color .2s;
}
#customAlertButton:hover{
    background-color:#1976d2;
}

.table01{
    max-height:300px;
    overflow-y:auto;
}
.table01 table{
    border-collapse:collapse;
    border-spacing:0;
    border-top:1px solid #424242;
    width:100%;
}
.table01 table thead th{
    background:#212121;
    font-size:14px;
    font-weight:500;
    padding:8px 10px;
    text-align:center;
}
.table01 table tbody th,.table01 table thead th{
    border:1px solid #2d2d2d;
    border-top:0;
    color:#fff;
    letter-spacing:-.03em;
    line-height:1.4em;
}
.table01 table tbody th{
    font-size:13px;
    font-weight:300;
    padding:8px 15px;
    text-align:left;
}
.table01 table tbody th .img-wrap{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.table01 table tbody th .img-wrap .icon{
    height:32px;
    width:32px;
}
.table01 table tbody th .img-wrap .tit{
    -webkit-box-flex:1;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    margin-left:20px;
    min-width:0;
    width:1%;
}
.table01 table tbody td{
    border:1px solid #2d2d2d;
    border-top:0;
    color:#fff;
    font-size:13px;
    letter-spacing:-.03em;
    line-height:1.5em;
    padding:8px 15px;
    text-align:center;
}
.table01 tr td:first-child,.table01 tr th:first-child{
    border-left:0;
}
.table01 tr td:last-child,.table01 tr th:last-child{
    border-right:0;
}
.table01.type2 table tbody td,.table01.type2 table tbody th{
    font-size:15px;
}
.table02 table{
    border-collapse:collapse;
    border-spacing:0;
    border-top:1px solid #616161;
    width:100%;
}
.table02 table thead th{
    background:#313131;
    font-size:14px;
    font-weight:500;
    line-height:1.4em;
}
.table02 table tbody td,.table02 table thead th{
    border:1px solid #424242;
    border-top:0;
    color:#fff;
    letter-spacing:-.03em;
    padding:8px 10px;
    text-align:center;
}
.table02 table tbody td{
    font-size:13px;
    line-height:1.5em;
}
.table02 tr td:first-child,.table02 tr th:first-child{
    border-left:0;
}
.table02 tr td:last-child,.table02 tr th:last-child{
    border-right:0;
}
.table02 .left{
    text-align:left;
}
.table02 img{
    margin-right:4px;
    vertical-align:middle;
}
.table02 a{
    display:block;
    max-width:470px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:100%;
}
.table02.hover table tbody tr:hover{
    background:rgba(233,70,9,.24);
}
.table02.hover a:hover{
    color:var(--primary-color3);
    -webkit-text-decoration:underline;
    text-decoration:underline;
}
.table02.hover table tbody tr.active{
    background:rgba(233,70,9,.24);
}
.table02.hover table tbody tr.active a{
    -webkit-text-decoration:underline;
    text-decoration:underline;
}

html.monitor-opened .monitor-list{
    -webkit-transform:translateX(0);
            transform:translateX(0);
}

html.monitor-opened #map{
    left:-768px;
}

html.monitor-opened #map .map{
    left:400px;
}

html.monitor-opened #map .links>li.m1{
    left:1150px;
}

html.monitor-opened #map .links>li.m2{
    left:1430px;
}

html.monitor-opened #map .links>li.m3{
    left:1120px;
}

html.monitor-opened #map .links>li.m4{
    left:1400px;
}

.monitor-list{
    background:#212121;
    height:calc(100vh - 111px);
    overflow:auto;
    padding:20px;
    position:fixed;
    right:0;
    top:63px;
    -webkit-transform:translateX(100%);
            transform:translateX(100%);
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:768px;
    z-index:32;
}

html.stat-opened .stat-list{
    -webkit-transform:translateX(0);
            transform:translateX(0);
}

html.stat-opened #map{
    left:-768px;
}

html.stat-opened #map .map{
    left:400px;
}

html.stat-opened #map .links>li.m1{
    left:1150px;
}

html.stat-opened #map .links>li.m2{
    left:1430px;
}

html.stat-opened #map .links>li.m3{
    left:1120px;
}

html.stat-opened #map .links>li.m4{
    left:1400px;
}

.stat-list{
    background:#212121;
    height:calc(100vh - 111px);
    overflow:auto;
    padding:20px;
    position:fixed;
    right:0;
    top:63px;
    -webkit-transform:translateX(100%);
            transform:translateX(100%);
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:768px;
    z-index:32;
}

html.cross-opened .cross-list{
    -webkit-transform:translateX(0);
            transform:translateX(0);
}

html.cross-opened #map .map{
    left:400px;
}

html.cross-opened #map .links>li.m1{
    left:1150px;
}

html.cross-opened #map .links>li.m2{
    left:1430px;
}

html.cross-opened #map .links>li.m3{
    left:1120px;
}

html.cross-opened #map .links>li.m4{
    left:1400px;
}

.cross-list{
    background:#212121;
    height:calc(100vh - 111px);
    overflow:auto;
    position:fixed;
    right:0;
    top:63px;
    -webkit-transform:translateX(100%);
            transform:translateX(100%);
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:768px;
    z-index:32;
}

.cross-list ul{
    padding:8px;
}

.cross-list ul li{
    height:calc(47vh - 36px);
    margin-bottom:8px;
    position:relative;
}

.cross-list ul li:last-child{
    margin-bottom:0;
}

.cross-list ul li .map{
    height:100%;
    left:0;
    -o-object-fit:cover;
       object-fit:cover;
    position:absolute;
    top:0;
    width:100%;
}

.cross-list ul li .tit{
    background:rgba(66,66,66,.8);
    border-radius:4px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    left:24px;
    line-height:40px;
    padding:0 16px;
    position:absolute;
    top:24px;
    z-index:2;
}

html.admin-opened .admin-list{
    -webkit-transform:translateX(0);
            transform:translateX(0);
}

html.admin-opened #map{
    left:-768px;
}

html.admin-opened #map .map{
    left:400px;
}

html.admin-opened #map .links>li.m1{
    left:1150px;
}

html.admin-opened #map .links>li.m2{
    left:1430px;
}

html.admin-opened #map .links>li.m3{
    left:1120px;
}

html.admin-opened #map .links>li.m4{
    left:1400px;
}

.admin-list{
    background:#212121;
    height:calc(100vh - 111px);
    overflow:auto;
    padding:20px;
    position:fixed;
    right:0;
    top:63px;
    -webkit-transform:translateX(100%);
            transform:translateX(100%);
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:768px;
    z-index:32;
}

html.admin-opened .playback-control,html.admin-opened .playback-video,html.cross-opened .playback-control,html.cross-opened .playback-video,html.monitor-opened .playback-control,html.monitor-opened .playback-video,html.stat-opened .playback-control,html.stat-opened .playback-video{
    left:-335px;
}

.dimBg{
    background:#000;
    filter:alpha(opacity=50);
    height:100%;
    left:0;
    opacity:.5;
    top:0;
    width:100%;
    z-index:51;
}
.admin-popup,.dimBg{
    display:none;
    position:absolute;
}
.admin-popup{
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
    z-index:52;
}
.admin-popup h2{
    background:var(--primary-color);
    border-radius:8px 8px 0 0;
    color:#fff;
    font-size:16px;
    font-weight:600;
    letter-spacing:-.24px;
    line-height:48px;
    padding:0 20px;
    position:relative;
}
.admin-popup .close{
    background:url(../images/dashboard/links_close.svg) 50% 50% no-repeat;
    height:24px;
    margin-top:-12px;
    position:absolute;
    right:15px;
    text-indent:-9999em;
    top:50%;
    width:24px;
}
.admin-popup .box{
    background:#121212;
    border-radius:0 0 8px 8px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.161);
            box-shadow:5px 5px 10px rgba(0,0,0,.161);
    padding:32px;
}
.admin-popup .box.box2{
    padding:20px;
}
.admin-popup .btns{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:0 -4px;
}
.admin-popup .btns .col{
    padding:0 4px;
    width:100%;
}
.admin-popup .txt{
    color:#d32f2f;
    font-size:14px;
    line-height:1.3em;
    margin-top:6px;
}
.camera-layout{
    display:none;
    left:100px;
    position:absolute;
    top:100px;
    width:400px;
    z-index:40;
}
.camera-layout h2{
    background:var(--primary-color);
    border-radius:8px 8px 0 0;
    color:#fff;
    font-size:16px;
    font-weight:600;
    letter-spacing:-.24px;
    line-height:48px;
    padding:0 20px;
    position:relative;
}
.camera-layout .close{
    background:url(../images/dashboard/links_close.svg) 50% 50% no-repeat;
    height:24px;
    margin-top:-12px;
    position:absolute;
    right:15px;
    text-indent:-9999em;
    top:50%;
    width:24px;
}
.camera-layout .box{
    background:#121212;
    border-radius:0 0 8px 8px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.161);
            box-shadow:5px 5px 10px rgba(0,0,0,.161);
    padding:10px 10px 15px 15px;
}
.camera-layout .scroll{
    height:320px;
    overflow:auto;
    padding-right:10px;
}
.camera-layout .btns{
    text-align:center;
}
.camera-layout .btns a{
    background:var(--primary-color);
    border-radius:4px;
    color:#fff;
    display:inline-block;
    font-size:14px;
    height:32px;
    line-height:32px;
    width:80px;
}
html.camera-opened .camera-layout,html.playback-opened .playback-layout{
    display:block;
}
.playback-layout{
    display:none;
    left:100px;
    position:absolute;
    top:100px;
    width:560px;
    z-index:20;
}
.playback-layout h2{
    background:var(--primary-color);
    border-radius:8px 8px 0 0;
    color:#fff;
    font-size:16px;
    font-weight:600;
    letter-spacing:-.24px;
    line-height:48px;
    padding:0 20px;
    position:relative;
}
.playback-layout .close{
    background:url(../images/dashboard/links_close.svg) 50% 50% no-repeat;
    height:24px;
    margin-top:-12px;
    position:absolute;
    right:15px;
    text-indent:-9999em;
    top:50%;
    width:24px;
}
.playback-layout .box{
    background:#121212;
    border-radius:0 0 8px 8px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.161);
            box-shadow:5px 5px 10px rgba(0,0,0,.161);
    padding:20px 5px 24px 20px;
}
.playback-layout .form{
    margin-bottom:24px;
}
.playback-layout .item{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:6px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.playback-layout .item:last-child{
    margin-bottom:0;
}
.playback-layout .item .tit{
    color:#9e9e9e;
    font-size:14px;
    font-weight:600;
    line-height:1.4em;
    width:60px;
}
.playback-layout .item .info{
    -webkit-box-flex:1;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    min-width:0;
    width:1%;
}
.playback-layout .item .input,.playback-layout .item .select2-container--default .select2-selection--single{
    background-color:#212121;
}
.playback-layout .item .time-wrap{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.playback-layout .item .time-wrap span{
    color:#9e9e9e;
    display:inline-block;
    font-size:14px;
    line-height:1.4em;
    text-align:center;
    width:15px;
}
.playback-layout .item .submit{
    background:var(--primary-color);
    border:0;
    border-radius:4px;
    color:#fff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-size:16px;
    font-weight:600;
    height:32px;
    line-height:32px;
    width:100%;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
}
.playback-layout .item .submit i{
    background:url(../images/icons/icon_search_active.svg) 50% 50% no-repeat;
    display:block;
    height:20px;
    margin-right:5px;
    width:20px;
}
.playback-layout .total{
    color:#9e9e9e;
    font-size:13px;
    letter-spacing:-.2px;
    line-height:1.4em;
    margin-bottom:8px;
}
.playback-layout .total strong{
    color:#fff;
    font-weight:700;
}
.playback-layout .scroll{
    height:336px;
    padding-right:10px;
}
.playback-layout .btn-play{
    background:url(../images/ui-controls/btn_play.svg) 50% 50% no-repeat;
    display:inline-block;
    height:20px;
    text-indent:-9999em;
    width:20px;
}
.playback-layout .btn-play:hover{
    background-image:url(../images/ui-controls/btn_play_on.svg);
}

#monitor-graph{
    border:0;
    max-width:100%;
    vertical-align:top;
}
.monitor-list .count-wrap{
    padding:22px 0;
}
.monitor-list .count-wrap ul{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.monitor-list .count-wrap ul li{
    position:relative;
    text-align:center;
    width:20%;
}
.monitor-list .count-wrap ul li:after{
    background:#fff;
    content:"";
    height:100%;
    left:0;
    opacity:.06;
    position:absolute;
    top:0;
    width:1px;
}
.monitor-list .count-wrap ul li:first-child:after{
    display:none;
}
.monitor-list .count-wrap ul li .ico{
    background:var(--primary-color);
    border-radius:20px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    height:64px;
    width:64px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    margin:0 auto 12px;
}
.monitor-list .count-wrap ul li .tit{
    color:#bdbdbd;
    font-size:13px;
    font-weight:500;
    line-height:1.4em;
}
.monitor-list .count-wrap ul li .num{
    color:#fff;
    font-size:32px;
    font-weight:600;
    letter-spacing:-.48px;
    line-height:1.4em;
}
.monitor-list .graph-box{
    background:#2c2c2c;
    border-radius:8px;
    height:280px;
    margin-bottom:14px;
    padding:16px;
}
.monitor-list .select2-container--default .select2-selection--single{
    height:44px;
}
.monitor-list .select2-container--default .select2-selection--single .select2-selection__arrow b{
    margin-top:-5px;
}
.monitor-list .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
    margin-top:-1px;
}
.monitor-list .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:44px;
}
.monitor-list .progress-wrap .item{
    background:#2c2c2c;
    border-radius:8px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:8px;
    padding:16px 25px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.monitor-list .progress-wrap .item:last-child{
    margin-bottom:0;
}
.monitor-list .progress-wrap .item .tit{
    color:#fff;
    font-size:16px;
    line-height:1.4em;
    width:145px;
}
.monitor-list .progress-wrap .item .number{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:60px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.monitor-list .progress-wrap .item .number .arrow{
    height:16px;
    margin-right:4px;
    width:16px;
}
.monitor-list .progress-wrap .item .number .num{
    color:#fff;
    font-size:26px;
    font-weight:500;
    line-height:1.4em;
}
.monitor-list .progress-wrap .item .bar-info{
    -webkit-box-flex:1;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    min-width:0;
    width:1%;
}
.monitor-list .progress-wrap .item .bar-info ul li{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:5px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.monitor-list .progress-wrap .item .bar-info ul li:last-child{
    margin-bottom:0;
}
.monitor-list .progress-wrap .item .bar-info ul li .tt{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:175px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    color:#fff;
    font-size:13px;
    line-height:1.2em;
}
.monitor-list .progress-wrap .item .bar-info ul li .tt .dot{
    height:10px;
    margin-right:4px;
    width:10px;
}
.monitor-list .progress-wrap .item .bar-info ul li:nth-child(2) .tt{
    color:#9e9e9e;
}
.monitor-list .progress-wrap .item .bar-info ul li .progress{
    position:relative;
    -webkit-box-flex:1;
    background:#424242;
    border-radius:4px;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    line-height:0;
    min-width:0;
    padding:4px;
    width:1%;
}
.monitor-list .progress-wrap .item .bar-info ul li .progress .bar{
    border-radius:2px;
    height:10px;
}
.monitor-list .progress-wrap .tab-container__item.active{
    border-bottom:2px solid #2c2c2c;
}
.monitor-list .progress-wrap .tab-container ul,.progress-wrap .tab-container li{
    list-style:none;
    margin:0;
    padding:0;
}
.monitor-list .progress-wrap .tab-container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.monitor-list .progress-wrap .tab-container__item{
    cursor:pointer;
}
.monitor-list .progress-wrap .tab-container__item:hover{
    background-color:#2c2c2c;
    -webkit-transition:background-color .4s ease-in-out;
    transition:background-color .4s ease-in-out;
}
.monitor-list .progress-wrap .tab-container__item:hover .tab-container__item--title{
    color:#fff;
    -webkit-transition:color .4s ease-in-out;
    transition:color .4s ease-in-out;
}
.monitor-list .progress-wrap .tab-container__item.active{
    background:#2c2c2c;
    border-bottom:2px solid #fff;
}
.monitor-list .progress-wrap .tab-container__item.active .tab-container__item--title{
    color:#fff;
}
.monitor-list .progress-wrap .tab-container__item.active:hover{
    background-color:#2c2c2c;
    -webkit-transition:background-color .4s ease-in-out;
    transition:background-color .4s ease-in-out;
}
.monitor-list .progress-wrap .tab-container__item.active:hover .tab-container__item--title{
    color:#fff;
    -webkit-transition:color .4s ease-in-out;
    transition:color .4s ease-in-out;
}
.monitor-list .progress-wrap .tab-container__item--title{
    color:#999;
    display:inline-block;
    font-weight:700;
    margin:15px;
    -webkit-text-decoration:none;
    text-decoration:none;
}
.monitor-list .progress-wrap .content-container{
    padding:10px;
}
.monitor-list .progress-wrap .content-container__content{
    display:none;
}
.monitor-list .progress-wrap .content-container__content.target{
    display:block;
}

.stat-list .title{
    color:#fff;
    font-size:20px;
    font-weight:700;
    letter-spacing:-.3px;
    line-height:1.4em;
    margin-bottom:12px;
    padding-left:12px;
    position:relative;
}
.stat-list .title:before{
    background:var(--primary-color3);
    border-radius:100%;
    content:"";
    height:6px;
    left:0;
    position:absolute;
    top:10px;
    width:6px;
}
.stat-list .title span{
    color:#fff;
    font-size:14px;
    font-weight:300;
    letter-spacing:-.21px;
    line-height:1.4em;
    padding-left:5px;
}
.stat-list .title-container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
}
.stat-list .title-container .submit{
    -ms-flex-negative:0;
    background:var(--primary-color);
    border:0;
    border-radius:4px;
    color:#fff;
        flex-shrink:0;
    font-size:16px;
    font-weight:600;
    height:100%;
    padding:6px 10px;
    text-align:center;
}
.stat-list .title-container .submit i{
    background:url(../images/icons/icon_search_active.svg) 40% 40% no-repeat;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    height:20px;
    margin-right:7px;
    vertical-align:sub;
    width:20px;
}
.stat-list .li-item{
    margin-bottom:24px;
}
.stat-list .li-item:last-child{
    margin-bottom:0;
}
.stat-list .box{
    background:#2c2c2c;
    border-radius:8px;
    padding:20px;
}
.stat-list .item{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:6px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.stat-list .item:last-child{
    margin-bottom:0;
}
.stat-list .item .tit{
    color:#9e9e9e;
    font-size:14px;
    font-weight:600;
    line-height:1.4em;
    width:80px;
}
.stat-list .item .info{
    -webkit-box-flex:1;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    min-width:0;
    width:1%;
}
.stat-list .item .time-wrap{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.stat-list .item .time-wrap span{
    color:#9e9e9e;
    display:inline-block;
    font-size:14px;
    line-height:1.4em;
    text-align:center;
    width:15px;
}
.stat-list .item .submit{
    background:var(--primary-color);
    border:0;
    border-radius:4px;
    color:#fff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-size:16px;
    font-weight:600;
    height:40px;
    line-height:40px;
    width:100%;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
}
.stat-list .item .submit i{
    background:url(../images/icons/icon_search_active.svg) 50% 50% no-repeat;
    display:block;
    height:20px;
    margin-right:5px;
    width:20px;
}
.stat-list .ul-graph li{
    margin-bottom:4px;
}
.stat-list .ul-graph li:last-child{
    margin-bottom:0;
}
.stat-list #statistics-graph1-img,.stat-list #statistics-graph2-img,.stat-list #statistics-graph3-img,.stat-list #statistics-graph32-img,.stat-list #statistics-graph4-img,.stat-list #statistics-graph42-img{
    height:270px;
    width:100%;
}
.stat-list #statistics-graph1,.stat-list #statistics-graph2,.stat-list #statistics-graph3,.stat-list #statistics-graph32,.stat-list #statistics-graph42{
    height:270px;
}
.stat-list #statistics-graph4{
    height:300px;
}
.stat-list #statistics-graph3-img2,.stat-list #statistics-graph32-img2{
    height:234px;
    width:100%;
}
.stat-list #statistics-graph32_2,.stat-list #statistics-graph3_2{
    height:234px;
}
#etc3,#etc32,#etc4,#etc42,.stat-list #etc2{
    display:none;
}
.stat-list .graph-opt{
    margin-bottom:10px;
    min-height:270px;
}

.admin-list .box{
    padding:30px 20px;
}
.admin-list .nav{
    margin-bottom:30px;
}
.admin-list .nav ul{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:0 -.5px;
}
.admin-list .nav ul li{
    padding:0;
    text-align:center;
    width:100%;
}
.admin-list .nav ul li a{
    background:#616161;
    border-radius:4px;
    color:#bdbdbd;
    display:block;
    font-size:18px;
    height:40px;
    line-height:40px;
}
.admin-list .nav ul li.active a{
    background:var(--primary-color);
    color:#fff;
}
.admin-list .btn{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:10px;
    -webkit-box-pack:end;
        -ms-flex-pack:end;
            justify-content:flex-end;
}
.admin-list .btn a{
    margin-left:4px;
}
.login-wrap h3{
    color:#fff;
    font-size:14px;
    font-weight:600;
    line-height:1.4em;
    margin-bottom:5px;
}
.login-wrap .group{
    margin-bottom:20px;
}
.login-wrap .input{
    background:#fff;
    color:#121212 !important;
    display:block;
    height:40px;
    width:100%;
}
.login-wrap .input.nopassword{
    border:2px solid #d32f2f;
}
.user-wrap .input{
    background:#212121;
}
.user-wrap .group ul li{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:4px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.user-wrap .group ul li:last-child{
    margin-bottom:0;
}
.user-wrap .group ul li .tit{
    color:#9e9e9e;
    font-size:14px;
    font-weight:600;
    line-height:1.3em;
    width:70px;
}
.user-wrap .group ul li .info{
    -webkit-box-flex:1;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    min-width:0;
    width:1%;
}
.user-wrap .group ul li .info .input{
    width:100%;
}
.jsonCont-scroll,.user-wrap .group ul li .select2-container--default .select2-selection--single{
    background:#212121;
}
.jsonCont-scroll{
    height:480px;
    overflow:auto;
    padding:20px;
}
.jsonCont-scroll .content{
    color:#fff;
    font-size:16px;
    line-height:20px;
}
.jsonCont-scroll .content,.jsonCont-scroll .content pre{
    font-family:Pretendard,Open Sans,AppleGothic,helvetica,sans-serif !important;
}
#admin_table tr td .btn-check{
    background:url(../images/ui-controls/checkbox.svg) 50% 50% no-repeat;
    display:inline-block;
    height:20px;
    text-indent:-9999em;
    width:20px;
}
#admin_table tr td .btn-check:hover,#admin_table tr td div.active .btn-check{
    background-image:url(../images/ui-controls/checkbox_on.svg);
}
#admin_info .txt{
    color:#d32f2f;
    font-size:14px;
    line-height:1.3em;
    margin-top:6px;
}
#admin_info .input.nopassword{
    border:2px solid #d32f2f;
}
#admin-msg{
    color:#d32f2f;
    font-size:16px;
    line-height:1.3em;
    margin-bottom:6px;
    margin-top:6px;
}
#reception ul{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
#reception ul li a{
    background:#616161;
    border:none;
    color:#bdbdbd;
    font-size:18px;
    font-weight:600;
    line-height:44px;
}
#reception ul li a,#reception ul li a i{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
#reception ul li a i{
    background-position:50% 50%;
    background-repeat:no-repeat;
    height:20px;
    margin:auto;
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    width:30px;
}
#reception ul li a i.admin-icon1{
    background-image:url(../images/icons/ico_signal.svg);
    background-size:20px;
}
#reception ul li a i.admin-icon2{
    background-image:url(../images/icons/ico_warning.svg);
    background-size:25px;
}
#reception ul li a i.admin-icon3{
    background-image:url(../images/icons/ico_car.svg);
    background-size:30px;
}
#reception ul li a:hover{
    background:var(--primary-color3);
}
#reception ul li.active a{
    background:var(--primary-color);
    border:none;
    color:#fff;
}

.playback-layout .btn-play{
    background:url(../images/ui-controls/btn_play.svg) 50% 50% no-repeat;
    display:inline-block;
    height:20px;
    text-indent:-9999em;
    width:20px;
}
.playback-layout .btn-play:hover{
    background-image:url(../images/ui-controls/btn_play_on.svg);
}
.playback-video{
    display:none;
    left:0;
    position:absolute;
    text-align:center;
    top:24px;
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:100%;
    z-index:30;
}
.playback-video .wrap{
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
    background:hsla(0,0%,7%,.8);
    border-radius:8px;
            justify-content:center;
    padding:12px 20px;
}
.playback-video .tt{
    color:#fff;
    font-size:20px;
    letter-spacing:-.21px;
    line-height:1.4em;
    margin-right:10px;
}
.playback-video button{
    background-color:transparent;
    border:2px solid #757575;
    border-radius:100%;
    color:#bdbdbd;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-size:14px;
    height:40px;
    line-height:36px;
    text-align:center;
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:40px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    padding:0;
}
.playback-video button:hover{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:#fff;
}
.playback-control{
    bottom:24px;
    display:none;
    left:0;
    position:absolute;
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:100%;
    z-index:30;
}
.playback-control .control{
    background:hsla(0,0%,7%,.8);
    border-radius:8px;
    height:56px;
    margin:0 auto;
    width:984px;
}
.playback-control .control ul{
    width:100%;
}
.playback-control .control ul li{
    display:inline-block;
    padding-top:5px;
}
.playback-control .control ul li.play_range{
    padding:0 10px;
    width:calc(100% - 280px);
}
.playback-control .control ul li.play_range input[type=range]{
    accent-color:var(--primary-color);
    border-radius:8px;
    height:6px;
    margin-top:-12px;
    width:100%;
}
.playback-control .control ul li.play_range input[type=range]:focus{
    outline:none;
}
.playback-control .control ul li div{
    border-radius:5px;
    height:40px;
    margin:5px;
    width:40px;
}
.playback-control .control ul li div:hover,div.vehicle_play ul li div:focus{
    background:rgba(0,0,0,.376);
}
.playback-control .control ul li div img{
    height:15px;
    margin:10px;
    vertical-align:-8px;
    width:15px;
}
.plb-tooltip{
    background:rgba(0,0,0,.8);
    border-radius:4px;
    color:#fff;
    font-size:12px;
    padding:5px 10px;
    pointer-events:none;
    position:absolute;
    white-space:nowrap;
    z-index:1000;
}
.btn-play{
    background:url(../images/ui-controls/btn_play.svg) 50% 50% no-repeat;
    display:inline-block;
    height:20px;
    width:20px;
}

.stat-list .crossroad-wrap{
    background:#212121;
    border-radius:8px;
    margin:0 auto;
    position:relative;
    width:502px;
}
.stat-list .crossroad-wrap .tt{
    background:rgba(64,92,229,.6);
    color:#fff;
    display:inline-block;
    font-size:14px;
    font-weight:500;
    left:0;
    line-height:1.4em;
    padding:3px;
    position:absolute;
    text-align:center;
    top:0;
    z-index:2;
}
.stat-list .crossroad-wrap .bg-box{
    background:url(../images/intersection/background.svg) 50% 50% no-repeat;
    background-size:89%;
    height:272px;
    position:relative;
    width:100%;
    z-index:1;
}
.stat-list .crossroad-wrap .bg-box .road-link{
    position:absolute;
    text-align:center;
}
.road-link:hover{
    opacity:.8;
    -webkit-transform:scale(1.05);
            transform:scale(1.05);
}
.road-link.active{
    -webkit-box-shadow:0 0 10px hsla(0,0%,100%,.5);
            box-shadow:0 0 10px hsla(0,0%,100%,.5);
    opacity:1;
}

.weather{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    margin-right:24px;
}
.weather .ico{
    height:40px;
    margin-right:8px;
    width:40px;
}
.weather .temp{
    color:#fff;
    font-size:24px;
    font-weight:600;
    line-height:1.2em;
}
.weather .temp sup{
    font-weight:300;
}
.weather .temp sup,.weather p{
    font-size:12px;
    line-height:1.2em;
}
.weather p{
    color:#9e9e9e;
}
.weather p span{
    background:#fff;
    display:inline-block;
    height:12px;
    margin:0 4px;
    opacity:.1;
    width:1px;
}
.weather.clock{
    margin-right:0;
}

.event-notice-wrap{
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
    height:48px;
            justify-content:space-between;
    padding:0 24px 0 0;
}
.event-notice-wrap,.event-notice-wrap .notice-info{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.event-notice-wrap .notice-info{
    -webkit-box-flex:1;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    min-width:0;
    width:1%;
}
.event-notice-wrap .notice-info .title{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    position:relative;
    width:210px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
    background:var(--primary-color);
    color:#fff;
    font-size:16px;
    font-weight:500;
            justify-content:center;
    line-height:48px;
}
.event-notice-wrap .notice-info .title i{
    background:url(../images/icons/icon_note.png) 50% 50% no-repeat;
    height:20px;
    margin-right:10px;
    width:20px;
}
.event-notice-wrap .notice-info .title .arrow{
    border-bottom:6px solid transparent;
    border-left:6px solid var(--primary-color);
    border-top:6px solid transparent;
    margin-top:-3px;
    position:absolute;
    right:-6px;
    top:50%;
}
.event-notice-wrap .notice-info .slider{
    -webkit-box-flex:1;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    min-width:0;
    padding-left:16px;
    position:relative;
    width:1%;
}
.notice-slider:hover{
    background:#121212 !important;
    border-radius:8px !important;
    bottom:0 !important;
    height:auto !important;
    left:226px !important;
    max-height:170px !important;
    overflow-y:auto !important;
    padding:15px !important;
    position:fixed !important;
    right:140px !important;
    width:auto !important;
    z-index:1000 !important;
}
.notice-slider:hover .item:last-child{
    margin-bottom:0 !important;
}
.notice-slider:hover .item .txt{
    font-size:15px !important;
    line-height:1.5 !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
}
.event-notice-wrap .notice-info .item .txt{
    color:#fff;
    font-size:14px;
    line-height:48px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.event-notice-wrap .notice-info .item a{
    display:block;
}
.event-notice-wrap .notice-info .item a:hover .txt{
    -webkit-text-decoration:underline;
    text-decoration:underline;
}
.event-notice-wrap .btns{
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:end;
        -ms-flex-pack:end;
            justify-content:flex-end;
}
.event-notice-wrap .btns,.event-notice-wrap .btns .lang-toggle{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:120px;
}
.event-notice-wrap .btns .lang-toggle{
    background-color:#1e1e2f;
    border-radius:20px;
    cursor:pointer;
    overflow:hidden;
    position:relative;
}
.event-notice-wrap .btns .lang-toggle .lang-btn{
    -webkit-box-flex:1;
    background:none;
    border:none;
    color:#fff;
        -ms-flex:1;
            flex:1;
    font-weight:500;
    padding:6px 0;
    -webkit-transition:color .3s ease;
    transition:color .3s ease;
    z-index:2;
}
.event-notice-wrap .btns .lang-toggle .lang-slider{
    background-color:var(--primary-color);
    border-radius:20px;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    -webkit-transition:-webkit-transform .3s ease;
    transition:-webkit-transform .3s ease;
    transition:transform .3s ease;
    transition:transform .3s ease,-webkit-transform .3s ease;
    width:50%;
    z-index:1;
}
.event-notice-wrap .btns .slick-btn{
    background-color:#212121;
    background-position:50% 50%;
    background-repeat:no-repeat;
    border:0;
    border-radius:50%;
    height:32px;
    text-indent:-999em;
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    width:32px;
}
.event-notice-wrap .btns .slick-btn.prev{
    background-image:url(../images/ui-controls/slick_prev.svg);
    margin-right:4px;
}
.event-notice-wrap .btns .slick-btn.next{
    background-image:url(../images/ui-controls/slick_next.svg);
}
.event-notice-wrap .btns .slick-btn:hover{
    background-color:var(--primary-color);
}
.event-notice-wrap .btns .slick-btn.prev:hover{
    background-image:url(../images/ui-controls/slick_prev_on.svg);
}
.event-notice-wrap .btns .slick-btn.next:hover{
    background-image:url(../images/ui-controls/slick_next_on.svg);
}

.tooltip{
    background-color:#000;
    border-radius:15px;
    color:#fff;
    font-size:13px;
    height:30px;
    left:100%;
    line-height:27px;
    opacity:0;
    padding:0 12px;
    pointer-events:none;
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%) translateX(8px);
            transform:translateY(-50%) translateX(8px);
    -webkit-transition:opacity .2s;
    transition:opacity .2s;
    white-space:nowrap;
}
.mapview-btns{
    background:#fff url(../images/icons/ico_expand.svg) 50% 50% no-repeat;
    border-radius:12px;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    height:46px;
    left:32px;
    position:absolute;
    top:18px;
    width:46px;
    z-index:49;
}
.mapview-btns:hover{
    background-color:var(--primary-color);
    background-image:url(../images/icons/ico_expand_on.svg);
}
.mapview-btns:hover .tooltip{
    opacity:1;
}
#help a:hover .tooltip{
    left:97.6%;
    opacity:1;
    top:70px;
    z-index:49;
}
#download a:hover .tooltip{
    left:92.5%;
    opacity:1;
    top:70px;
    z-index:49;
}
.floating-btns{
    bottom:24px;
    left:24px;
    position:absolute;
    z-index:50;
}
.floating-btns .btns{
    background:var(--primary-color);
    border:2px solid var(--primary-color);
    border-radius:100%;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.322);
            box-shadow:5px 5px 10px rgba(0,0,0,.322);
    display:block;
    height:72px;
    text-indent:-999em;
    width:72px;
}
.floating-btns .btns:before{
    background:url(../images/ui-controls/control_plus.svg) 50% 50% no-repeat;
    content:"";
    height:22px;
    left:50%;
    margin-left:-11px;
    margin-top:-11px;
    position:absolute;
    top:50%;
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    width:22px;
}
.floating-btns.active .btns{
    background:#121212;
    border-color:#121212;
}
.floating-btns.active .btns:before{
    -webkit-transform:rotate(45deg);
            transform:rotate(45deg);
}
.floating-btns .menu{
    display:none;
    left:0;
    position:absolute;
    top:0;
}
.floating-btns .menu li{
    left:0;
    position:absolute;
    top:0;
}
.floating-btns .menu li,.floating-btns .menu li a{
    -webkit-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
}
.floating-btns .menu li a{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
    border-radius:100%;
    height:0;
            justify-content:center;
    width:0;
}
.floating-btns .menu li a,.floating-btns .menu li a:hover{
    background:var(--primary-color);
}
.floating-btns.active .menu a{
    height:52px;
    width:52px;
}
.floating-btns.active .menu li:first-child{
    left:0;
    top:-60px;
}
.floating-btns.active .menu li:nth-child(2){
    left:60px;
    top:-40px;
}
.floating-btns.active .menu li:nth-child(3){
    left:80px;
    top:20px;
}
#customCompass{
    height:100px;
    position:absolute;
    right:25px;
    top:25px;
    width:100px;
    z-index:10;
}
#compassBackground{
    height:100%;
    position:absolute;
    width:100%;
    z-index:5;
}
#compassPin{
    height:50px;
    left:44px;
    position:relative;
    top:24px;
    -webkit-transform-origin:center;
            transform-origin:center;
    width:12px;
    z-index:10;
}
#compassPin img{
    height:100%;
    width:100%;
}

#gnb ul #help a{
    border-radius:22px;
    color:#fff;
    font-size:18px;
    font-weight:600;
    line-height:44px;
    padding:0;
}
#gnb ul #help a,#gnb ul #help a i{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
#gnb ul #help a i{
    background-position:50% 50%;
    background-repeat:no-repeat;
    height:20px;
    margin-right:5px;
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    width:30px;
}
#gnb ul #help a i.help-btn-full,#gnb ul #help a i.help-btn-lite{
    background-image:url(../images/icons/information.svg);
}
#gnb ul #help a:hover{
    color:var(--primary-color);
}
#gnb ul #help a:hover i.help-btn-full,#gnb ul #help a:hover i.help-btn-lite{
    background-image:url(../images/icons/information_on.svg);
}
#help-overlay{
    background-color:#121212;
    border-radius:5px;
    font-size:16px;
    padding:10px 14px 1px;
    position:fixed;
    right:0;
    text-align:left;
    top:64px;
    z-index:999;
}
#help-close{
    background:none;
    border:none;
    color:#333;
    cursor:pointer;
    font-size:20px;
    font-weight:700;
    padding-top:4px;
}

.select2-container{
    color:#fff;
    width:100% !important;
}
.select2-container--default .select2-selection--multiple{
    height:36px;
}
.select2-container--default .select2-selection--multiple,.select2-container--default .select2-selection--single{
    background-color:#141414;
    border:1px solid #141414;
    border-radius:4px;
    color:#fff;
    font-weight:600;
}
.select2-container--default .select2-selection--single{
    height:32px;
}
.select2-container .select2-selection--multiple .select2-selection__rendered,.select2-container .select2-selection--single .select2-selection__rendered{
    padding-left:10px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered,.select2-container--default .select2-selection--single .select2-selection__rendered{
    color:#fff;
    font-size:14px;
    line-height:30px;
}
.select2-container--default .select2-selection--multiple .select2-selection__arrow b,.select2-container--default .select2-selection--single .select2-selection__arrow b{
    border:solid #fff;
    border-width:0 2px 2px 0;
    display:inline-block;
    margin-top:-10px;
    padding:3px;
    -webkit-transform:rotate(45deg);
            transform:rotate(45deg);
}
.select2-container--default.select2-container--open .select2-selection--multiple .select2-selection__arrow b,.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color:var(--primary-color);
    border-width:0 2px 2px 0;
    margin-top:-5px;
    -webkit-transform:rotate(-135deg);
            transform:rotate(-135deg);
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{
    border:1px solid var(--primary-color);
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{
    border:1px solid var(--primary-color);
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}
.select2-dropdown{
    border:0;
    border-radius:4px;
    margin-top:0;
    padding:5px 0;
}
.select2-search--dropdown{
    margin-bottom:0;
}
.select2-results__option{
    color:#212121;
    font-size:14px;
    line-height:28px;
    padding:0 10px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background:#eee;
    color:var(--primary-color);
}
.select2-container--default .select2-search--dropdown .select2-search__field{
    display:none;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple,.select2-container--default.select2-container--disabled .select2-selection--single{
    background-color:#212121;
    border-color:#212121;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__arrow b,.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow b{
    border-color:#424242;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple:hover,.select2-container--default.select2-container--disabled .select2-selection--single:hover{
    border-color:#212121;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple:hover .select2-selection__arrow b,.select2-container--default.select2-container--disabled .select2-selection--single:hover .select2-selection__arrow b{
    border-color:#424242;
}
.select2-container--default .select2-selection--multiple:hover,.select2-container--default .select2-selection--multiple:hover .select2-selection__arrow b,.select2-container--default .select2-selection--single:hover,.select2-container--default .select2-selection--single:hover .select2-selection__arrow b{
    border-color:var(--primary-color);
}
.select2-container .select2-search--inline .select2-search__field{
    vertical-align:baseline;
    vertical-align:initial;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:0;
    position:absolute;
    right:10px;
    top:20px;
    width:20px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    color:rgba(0,0,0,.561);
    font-size:14px;
    margin-top:2px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    border-right:0;
    color:#999 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
    background-color:transparent;
    background-color:initial;
    color:#333 !important;
}

.gmi-date-picker{
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    width:254px;
}

.gmi-date-picker.has-time{
    width:324px;
}

.gmi-date-picker__header__icon-btn{
    color:#475669 !important;
    cursor:pointer;
    display:inline-block;
    float:right;
    height:16px;
    margin:3px 0;
    vertical-align:middle;
    width:16px;
}

.gmi-date-picker__header__icon-btn:hover{
    color:var(--primary-color);
}

.gmi-date-picker[data-role=year] .gmi-date-picker__header__label--year:hover{
    color:#475669 !important;
    cursor:default;
}

.gmi-picker-panel{
    background-color:#fff;
    border:1px solid #d3dce6;
    border-radius:2px;
    color:#475669;
    line-height:20px;
    margin:5px 0;
    z-index:2008;
}

.gmi-picker-panel span{
    color:#475669;
    cursor:pointer;
    font-size:14px;
    padding:0 3px;
}

.gmi-picker-panel span:first-child{
    padding-left:0;
}

.gmi-picker-panel span:hover{
    color:var(--primary-color);
    -webkit-text-decoration:none;
    text-decoration:none;
}

.gmi-picker-panel__body{
    height:100%;
    width:100%;
}

.gmi-picker-panel__body__header{
    line-height:22px;
    padding:12px 20px 5px;
}

.gmi-picker-panel__body__header span[class^=gmi-date-picker__header__label--]{
    color:#475669 !important;
}

.gmi-picker-panel__body__header span[class^=gmi-date-picker__header__label--]:hover{
    color:var(--primary-color) !important;
}

.gmi-picker-panel .gmi-month-picker__header,.gmi-picker-panel .gmi-year-picker__header{
    padding-bottom:10px;
}

.gmi-picker-panel__body__header--time{
    border-bottom:1px solid #d3dce6;
    min-height:30px;
    padding:8px;
}

.gmi-picker-panel__body__header--time__wrapper{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    float:left;
    padding:0 5px;
    width:50%;
}

.gmi-picker-panel__body__header--time__wrapper .gmi-input{
    display:inline-block;
    width:100%;
}

.gmi-picker-panel__body__header--time__wrapper .gmi-input__inner{
    -webkit-appearance:none;
    -moz-appearance:none;
    border:1px solid #bfcbd9;
    border-radius:2px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    color:#1f2d3d;
    display:block;
    font-size:13px;
    height:30px;
    line-height:1;
    outline:none;
    padding:3px 10px;
    -webkit-transition:border-color .4s cubic-bezier(.645, .045, .355, 1);
    transition:border-color .4s cubic-bezier(.645, .045, .355, 1);
    width:100%;
}

.gmi-picker-panel__body__header--time__wrapper .gmi-input__inner:hover{
    border:1px solid var(--primary-color);
}

.gmi-picker-panel__body__header--time__wrapper .gmi-time-picker--wrapper{
    position:relative;
    zoom:1;
}

.gmi-picker-panel__btn--prev{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABKElEQVRYR+2W/61BQRCFPxVQgg7o4NEBFXgqoIRXAhWgAjpAB3SghPcqIEdmEjZcuxsvN5KdP++v8805s5PboOZq1KxPASgOFAc+2oEWsLA9MgZ+c3ZKrgNtYA10TfQA9HMgcgAkugXkgDpXyYkTMAQEE12pAKH40pS+DUIxyIloiBQAF9c7EtwEberaDDinQMQCDKxDPd+r6FCQuxSIGAC39++FuBviEE2bEY/p4Vy8AkgVT4aoAnDxI6AINOUppaOqOelUOfEMQMM0ASSuzLOWjB1VzYQgpsA87OARgDIbvUHctbQvHELf9t1xvR8CuPjebM/tPGxUEIrjC7iDuAVw21d2zlPyjn3WG1QUiuTOgR/L7HrjH0uNylnplZ/S4kBxoDhQvwMXBcA9IYMw4zYAAAAASUVORK5CYII=) no-repeat 50%;
    background-size:100% 100%;
}

.gmi-picker-panel__btn--next{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABOElEQVRYR+2U0VHDMBAFNxVAB9ABKSGUQAVABZAO6CBQAVBB6ABKgA4oIVQAszMSI0ywfbEz5kP681i697TvTjMmXrOJ9akGKoFK4F8RuAEOgOWe34ZbYAOo9+Md8McV8ABc7smEtc+BO+C6acDvvOEFOEtOx/ByCKyBBfAIXOSi23ogm3gFTkcwofgzMG+KbyOQjYlnBQw1UYp/Yy+Rtk2BmO6TCeN4D2ZxnLB7c3tKsr9W1xhmE3atcUikz1JU7BL4U7wtglIkaqK3eF8D7rOok/HZQSKLS1bjT124uiIoz5cmxNosrqCNa03HrVdcEQMlCV/MMtsc00dEPBJBk4S3PypeTKclLL6rAc/Z3fbESXL2lm7utIRWNIKyuCbybBtBWHwIgdAt2zYPITCKiWqgEqgEJifwBe9kPSFgrTUbAAAAAElFTkSuQmCC) no-repeat 50%;
    background-size:100% 100%;
    margin-left:15px;
}

.gmi-picker-panel__body__main{
    min-width:224px;
    padding:0 15px 15px;
}

.gmi-picker-panel table{
    border-collapse:collapse;
    border-spacing:0;
    table-layout:fixed;
    width:100%;
}

.gmi-picker-panel .gmi-date-table{
    font-size:12px !important;
    min-width:224px;
    -webkit-user-select:none;
}

.gmi-picker-panel .gmi-date-table th{
    color:#8492a6;
    font-size:16px !important;
    font-weight:400;
    padding:4px;
    text-align:center;
}

.gmi-picker-panel .gmi-date-table td{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    color:#475669;
    cursor:pointer;
    font-size:15px !important;
    height:32px;
    text-align:center;
    vertical-align:middle;
    width:32px;
}

.gmi-picker-panel .gmi-date-table td.today{
    color:var(--primary-color);
}

.gmi-picker-panel .gmi-date-table td.current{
    background-color:var(--primary-color);
    color:#fff;
}

.gmi-picker-panel .gmi-date-table td.disabled{
    background-color:#f5f5f5;
    color:#ddd;
    cursor:not-allowed;
    opacity:1;
}

.gmi-picker-panel .gmi-date-table td.disabled:hover{
    background-color:#f5f5f5 !important;
}

.gmi-picker-panel .gmi-date-table td.available:not(.current):hover{
    background-color:var(--primary-color4);
}

.gmi-picker-panel .gmi-date-table td.next-month,.gmi-picker-panel .gmi-date-table td.prev-month{
    color:#ddd;
}

.gmi-picker-panel .gmi-date-table td.in-range{
    background-color:var(--primary-color5);
}

.gmi-picker-panel .gmi-date-table td.in-range:hover{
    background-color:var(--primary-color5) !important;
}

.gmi-picker-panel .gmi-date-table td.end-date,.gmi-picker-panel .gmi-date-table td.start-date{
    background-color:var(--primary-color);
    color:#fff;
}

.gmi-picker-panel .gmi-date-table td.end-date:hover,.gmi-picker-panel .gmi-date-table td.start-date:hover{
    background-color:var(--primary-color) !important;
}

.gmi-picker-panel .gmi-month-table,.gmi-picker-panel .gmi-year-table{
    font-size:12px !important;
    min-width:224px;
    -webkit-user-select:none;
}

.gmi-picker-panel .gmi-month-table td,.gmi-picker-panel .gmi-year-table td{
    padding:22px 3px;
    vertical-align:middle;
}

.gmi-picker-panel .gmi-month-table td .cell,.gmi-picker-panel .gmi-year-table td .cell{
    color:#475669 !important;
    cursor:pointer;
    display:block;
    font-size:12px !important;
    height:32px;
    line-height:32px;
    text-align:center;
}

.gmi-picker-panel .gmi-month-table td .cell:not(.current):hover,.gmi-picker-panel .gmi-year-table td .cell:not(.current):hover{
    background-color:var(--primary-color4);
}

.gmi-picker-panel .gmi-month-table td.current .cell,.gmi-picker-panel .gmi-year-table td.current .cell{
    background-color:var(--primary-color) !important;
    color:#fff !important;
}

.gmi-picker-panel .gmi-month-table td.disabled .cell,.gmi-picker-panel .gmi-year-table td.disabled .cell{
    background-color:#f5f5f5;
    color:#ddd !important;
    cursor:not-allowed;
    opacity:1;
}

.gmi-picker-panel .gmi-month-table td.disabled .cell:hover,.gmi-picker-panel .gmi-year-table td.disabled .cell:hover{
    background-color:#f5f5f5 !important;
}

.gmi-picker-panel__footer{
    background-color:#fff;
    border-top:1px solid #d3dce6;
    padding:0 8px;
    text-align:right;
}

.gmi-picker-panel__footer .gmi-picker-panel__link-btn{
    color:var(--primary-color);
    display:inline-block;
    padding:10px 5px;
}

.gmi-picker-panel__footer .gmi-picker-panel__link-btn--default{
    color:#8391a5;
}

.gmi-picker-panel__footer .gmi-picker-panel__link-btn--primary{
    color:var(--primary-color);
}

.gmi-picker-panel__footer .gmi-picker-panel__link-btn:hover{
    -webkit-text-decoration:none;
    text-decoration:none;
}

.gmi-picker-panel__footer .gmi-picker-panel__link-btn.disabled{
    color:#ccc;
    cursor:not-allowed;
}

.gmi-picker-panel.placement-left-bottom{
    -webkit-transform-origin:0 bottom !important;
    transform-origin:0 bottom !important;
}

.gmi-picker-panel.placement-center-bottom{
    -webkit-transform-origin:50% bottom !important;
    transform-origin:50% bottom !important;
}

.gmi-picker-panel.placement-right-bottom{
    -webkit-transform-origin:100% bottom !important;
    transform-origin:100% bottom !important;
}

.gmi-date-range-picker{
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    width:608px;
}

.gmi-date-range-picker.has-time{
    width:660px;
}

.gmi-date-range-picker__body{
    clear:both;
    overflow:hidden;
}

.gmi-date-range-picker__body__header{
    font-size:16px;
    padding-bottom:5px;
    position:relative;
    text-align:center;
}

.gmi-date-range-picker__body .gmi-picker-panel__body__main{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:15px;
    width:50%;
}

.gmi-date-range-picker__header--time__wrapper .gmi-input{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    float:left;
    padding:0 5px;
    width:50%;
}

.gmi-date-range-picker__header__icon-btn{
    cursor:pointer;
    height:16px;
    position:absolute;
    top:0;
    width:16px;
}

.gmi-date-range-picker__header__icon-btn:hover{
    color:var(--primary-color);
}

.gmi-date-range-picker__btn--prev{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABHklEQVRYR8XXuw3CMBCA4TsaRAWjwAYYJqBBpCNlYB6UEqiQ2AElI2QERmCCGBkUkSiJ48edoaEx/J8iRb5DIPikt2yZRCI3+avTPZurc8etKNQ3mvxIdya9PfaAeAaQl2S3jnVnVRxLmX3CEhdJJJ5egF8cAKSMk2h96QNUcQSYSQnXQ7Taez0BirgzgCruBKCMWwOo41YAjrgxgCtuBOCMDwK441pAiHgvIFS8ExAy3gKEjjcA/4h7AUZlmQPgVAIUkzGKeCNeLld74zq2fQoUiNY8EBrROZCERPRORKEQ2pEsBGJwJuRGDALUq8WJMAJwIowBXAgrAAfCGkCNcAJQIpwBVAgvQB1R3/d0++H3AlO75GjuvZxWIZ/1/A1dhe0wdsJuuwAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size:100% 100%;
    left:5px;
}

.gmi-date-range-picker__btn--prev-month{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAr0lEQVRYR8XVsRECMQxEUbk1aAIiIISCiI+ILmjNzAWkjFb6O3YD/8nJjlj8xuJ+WADP92cbIy5zxutxPlz/HYkDlPgOQwFqHAVU4higGkcAnXgb0I23AES8DKDiJQAZlwF0XAI44mmAK54COOMSIGJu99PxRs93aox+v+BApAD71S5EGuBCSAAHQgbQiBKARJQBFKIFIBBtQBeBADoIDFBFoIAKAgeoCAtAWczlgC8d87YhVW+y5wAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size:100% 100%;
    left:25px;
}

.gmi-date-range-picker__btn--next{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABLUlEQVRYR8XXsRGCMBQG4PdcQEbQCXQDT1kCKrWESodRSrHizsYJFDbRLdQmzyOcHByKeWgSGpq8+z9S5CcIlh/M86PktMjfge/GHM/mkI5RiHnouWvOXHUt7o6pc3+IKwD2gWjJQWyTc4YIEwCKA89ddkHIHci/pCdExkUUeMoAYNQVIQE2ESXAFqIGsIFoAEwj3gJMIj4CTCFaASYQXwG6EUoAnQhlgC4EC6ADwQaU7Ym4k2c44TDwp1eVIoqSdABIl2KuKD42oKhgShHA4bRnXly3h5wbE8E+9GfyF4AF+Hc4C6AjXBmgK1wJoDP8K0B3eCvARPhHgKnwtwCT4Q2A6fAawEZ4CbAVLgH/uBlVz3aVUqqu+flu2BNiEXjuihv8Ws8qo64hbXPWAU9Lh/8w7QLSzwAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size:100% 100%;
    right:5px;
}

.gmi-date-range-picker__btn--next-month{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAx0lEQVRYR8XXvQ3CMBBA4fMGjITCElCFlDBQ2oQqZTaAtaAySkGL7+ed4t5+n1z45CI7r7JzX5qAcXnOpUgvUufb+TTQ4CZgC2YiVIBMhBqQhTABMhBmAI1wAUiEG0AhQgACEQZEEQgggsAAXgQK8CBwgBWRCqhVHvdLd/03QXHAb3Jq4hsMBVjjKMATxwDeOAKIxMOAaDwEIOJuABV3Aci4GUDHTYCMuBqQFW8CpvV1eH/qKiJH7dtu/bqhs8Aab96A50Drni+AWrkh0KGJCQAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size:100% 100%;
    right:25px;
}

.gmi-date-range-picker .f-lt{
    border-right:1px solid #d3dce6;
    float:left;
}

.gmi-date-range-picker .f-rt{
    float:right;
}

.gmi-time-panel{
    background-color:#fff;
    border:1px solid #d1dbe5;
    border-radius:2px;
    -webkit-box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);
    box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);
    color:#475669;
    margin:5px 0;
    -webkit-transform-origin:center top 0;
    transform-origin:center top 0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    z-index:2011;
}

.gmi-time-panel__body{
    height:100%;
    overflow:hidden;
    position:relative;
    width:100%;
}

.gmi-time-panel__body:before{
    left:0;
    padding-left:33.33333%;
}

.gmi-time-panel__body:after,.gmi-time-panel__body:before{
    background-color:#039cef;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    color:#fff;
    content:":";
    font-size:14px;
    height:32px;
    line-height:16px;
    padding-top:6px;
    position:absolute;
    right:0;
    text-align:left;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}

.gmi-time-panel__body:after{
    left:66.66667%;
}

.gmi-time-panel__body__item{
    float:left;
    height:100%;
    overflow:hidden;
    position:relative;
    text-align:center;
    width:33.33%;
    z-index:1;
}

.gmi-time-panel__body__item--spinner{
    max-height:192px;
    width:100%;
}

.gmi-time-panel__body__item--spinner:after,.gmi-time-panel__body__item--spinner:before{
    content:" ";
    display:block;
    height:80px;
    width:100%;
}

.gmi-time-panel__body__item--spinner__item{
    cursor:pointer;
    font-size:12px;
    height:32px;
    line-height:32px;
}

.gmi-time-panel__body__item--spinner__item.active{
    color:#fff;
}

.gmi-time-panel__body__item--spinner__item.active:hover{
    cursor:default;
}

.gmi-time-panel__body__item--spinner__item.disabled{
    color:#cecece;
    cursor:not-allowed;
}

.picker-show{
    animation:showPanel .2s ease-in-out;
    -webkit-animation:showPanel .2s ease-in-out;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.picker-hide{
    animation:hidePanel .2s ease-in-out;
    -webkit-animation:hidePanel .2s ease-in-out;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@-webkit-keyframes showPanel{
    0%{
        opacity:0;
        -webkit-transform:scale(0);
        transform:scale(0);
        -ms-transform:scale(0);
    }
    to{
        opacity:1;
        -webkit-transform:scale(1);
        transform:scale(1);
        -ms-transform:scale(1);
    }
}

@-webkit-keyframes hidePanel{
    0%{
        opacity:1;
        -webkit-transform:scale(1);
        transform:scale(1);
        -ms-transform:scale(1);
    }
    to{
        opacity:0;
        -webkit-transform:scale(0);
        transform:scale(0);
        -ms-transform:scale(0);
    }
}

.timepicker{
    background-clip:padding-box;
    background-color:#fff;
    border:1px solid #ccc;
    border:1px solid rgba(0,0,0,.15);
    border-radius:4px;
    -webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);
    box-shadow:0 6px 12px rgba(0,0,0,.175);
    float:left;
    font-size:17px;
    list-style:none;
    margin:2px 0 0;
    padding:6px;
    position:absolute;
    text-align:center;
    width:180px;
    z-index:1000;
}

.timepicker:after,.timepicker:before{
    border-top:0;
    content:"";
    display:inline-block;
    position:absolute;
}

.timepicker .icon-up{
    background-image:url(../../images/icons/ico_arrow_up.svg);
}

.timepicker .icon-down{
    background-image:url(../../images/icons/ico_arrow_down.svg);
}

.timepicker .icon-down,.timepicker .icon-up{
    background-position:50%;
    background-repeat:no-repeat;
    background-size:45%;
    cursor:pointer;
    display:inline-block;
    height:30px;
    opacity:.6;
    width:55px;
}

.timepicker .icon-down:hover,.timepicker .icon-up:hover{
    opacity:1;
}

.timepicker:before{
    border-bottom:7px solid rgba(0,0,0,.2);
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    left:6px;
    top:-7px;
}

.timepicker:after{
    border-bottom:6px solid #fff;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    left:7px;
    top:-6px;
}

.timepicker .title{
    color:#888;
    cursor:default;
    padding:10px 0 5px;
    width:100%;
}

.timepicker .cell-2{
    cursor:default;
    float:left;
    min-height:14px;
    width:20%;
}

.timepicker .cell-4{
    float:left;
    width:40%;
}

.timepicker .handle,.timepicker .text{
    color:#555;
    position:relative;
}

.timepicker .chose-all{
    margin:0 10px;
    position:relative;
}

.timepicker .chose-all .text{
    font-size:19px;
    font-weight:700;
    line-height:22px;
}

.timepicker a{
    color:#aaa;
    -webkit-text-decoration:none;
    text-decoration:none;
}

.timepicker .text{
    color:#666;
}

.timepicker .text a{
    color:#444;
}

.timepicker .text a:active,.timepicker .text a:focus,.timepicker .text a:hover{
    color:#222;
}

.timepicker ul{
    list-style:none;
    margin:0 5px;
    padding:0;
}

.timepicker li.cell-2{
    cursor:pointer;
    padding:5px 0;
}

.timepicker li.cell-2:hover{
    background:var(--primary-color);
    border-radius:10px;
    color:#fff;
}

.camera-controls{
    background:transparent;
    border-radius:8px;
}
#sectorLoading{
    background:#2a2a2a;
    border-radius:4px;
    color:#fff;
    font-size:14px;
    margin-bottom:12px;
    padding:12px;
    text-align:center;
}
.sector-button-group{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    background:#212121;
    border:1px solid #212121;
    border-radius:4px;
    cursor:pointer;
    height:40px;
    margin-bottom:6px;
    padding:0 8px;
    -webkit-transition:all .2s ease;
    transition:all .2s ease;
}
.sector-button-group:last-child{
    margin-bottom:0;
}
.sector-button-group:hover{
    border-color:#9e9e9e;
}
.sector-button-group.sector-running{
    background:var(--primary-color);
    border-color:var(--primary-color);
}
.sector-button-group.sector-running:hover{
    border-color:var(--primary-color);
    opacity:.9;
}
.sector-label{
    -webkit-box-flex:1;
    color:#fff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    font-size:14px;
    letter-spacing:-.2px;
    line-height:1.4em;
    margin-right:12px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:1%;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.sector-label .icon{
    background:url(../images/ui-controls/checkbox.svg) 50% 50% no-repeat;
    height:20px;
    margin-right:8px;
    width:20px;
    -ms-flex-negative:0;
        flex-shrink:0;
}
.sector-button-group.sector-running .sector-label .icon{
    background-image:url(../images/ui-controls/checkbox_on.svg);
}
.sector-label .text{
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
.sector-buttons{
    display:none;
    gap:4px;
    -ms-flex-negative:0;
        flex-shrink:0;
}
@media (max-width:480px){
    .sector-label{
        font-size:12px;
    }

    .sector-label .icon{
        height:18px;
        margin-right:6px;
        width:18px;
    }
}
.video-container{
    bottom:24px;

    display:none;
    left:128px;
    position:absolute;
    right:24px;
    z-index:50;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-align:end;
        -ms-flex-align:end;
            align-items:flex-end;
    background:rgba(0,0,0,.4);
    gap:0 10px;
    height:300px;
    overflow:hidden;
    scrollbar-color:hsla(0,0%,100%,.3) transparent;
    scrollbar-width:thin;
}
.video-container::-webkit-scrollbar{
    width:6px;
}
.video-container::-webkit-scrollbar-track{
    background:transparent;
}
.video-container::-webkit-scrollbar-thumb{
    background:hsla(0,0%,100%,.3);
    border-radius:3px;
}
.video-container::-webkit-scrollbar-thumb:hover{
    background:hsla(0,0%,100%,.5);
}
.video-wrapper{
    background:#000;
    border:1px solid hsla(0,0%,100%,.1);
    border-radius:8px;
    -webkit-box-shadow:0 4px 8px rgba(0,0,0,.1);
            box-shadow:0 4px 8px rgba(0,0,0,.1);
    padding:0 10px 8px;
    position:relative;
    -webkit-transition:-webkit-transform .2s;
    transition:-webkit-transform .2s;
    transition:transform .2s;
    transition:transform .2s,-webkit-transform .2s;
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
    height:100%;
}
.camera-title{
    color:#fff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-weight:700;
    margin-bottom:8px;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
}
.video-canvas{
    border-radius:4px;
    height:250px;
    -o-object-fit:cover;
       object-fit:cover;
    width:100%;
}
@media (max-width:768px){
    .video-container{
        bottom:12px;
        gap:10px;
        height:200px;
        left:12px;
        padding:12px;
        right:12px;
    }

    .video-wrapper{
        min-width:150px;
    }

    .video-canvas{
        height:120px;
    }
}
@media (max-width:480px){
    .video-container{
        bottom:8px;
        gap:8px;
        height:160px;
        left:8px;
        padding:12px;
        right:8px;
    }

    .video-wrapper{
        min-width:120px;
    }

    .video-canvas{
        height:90px;
    }
}
.status-message{
    background:rgba(0,0,0,.7);
    border-radius:4px;
    bottom:12px;
    color:#fff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-size:12px;
    left:12px;
    padding:5px 10px;
    position:absolute;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    gap:5px;
}
.status-indicator{
    background-color:red;
    border-radius:50%;
    display:inline-block;
    height:8px;
    margin-right:5px;
    min-width:8px;
    width:8px;
}
.status-indicator.connected{
    background-color:#4caf50;
}
.camera-controls-top{
    top:3px;
}
.camera-controls-bottom,.camera-controls-top{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    gap:8px;
    opacity:0;
    position:absolute;
    right:12px;
    -webkit-transition:opacity .3s;
    transition:opacity .3s;
}
.camera-controls-bottom{
    bottom:16px;
}
.video-wrapper:hover .camera-controls-bottom,.video-wrapper:hover .camera-controls-top{
    opacity:1;
}
button{
    background-color:transparent;
    border:none;
    border-radius:4px;
    color:#fff;
    cursor:pointer;
    padding:8px 15px;
    -webkit-transition:background-color .3s;
    transition:background-color .3s;
}
button.close-btn{
    background-color:#f44336;
}
button.close-btn:hover{
    background-color:#d32f2f;
}
.btn{
    -webkit-box-flex:1;
    border:none;
    border-radius:4px;
    cursor:pointer;
        -ms-flex:1;
            flex:1;
    font-size:.9rem;
    padding:1px 7px;
    -webkit-transition:background-color .2s;
    transition:background-color .2s;
}
.video-wrapper.fullscreen-mode{
    background-color:#000;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    height:100vh;
    left:0;
    position:fixed;
    top:0;
    width:100vw;
    z-index:1000;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.video-wrapper.fullscreen-mode .video-canvas{
    height:100%;
    max-height:100vh;
    max-width:100vw;
    -o-object-fit:contain;
       object-fit:contain;
    width:100%;
}
.video-wrapper.fullscreen-mode .camera-title{
    background-color:rgba(0,0,0,.5);
    border-radius:4px;
    left:10px;
    padding:5px 10px;
    position:absolute;
    top:10px;
}
.video-wrapper.fullscreen-mode .camera-controls-bottom,.video-wrapper.fullscreen-mode .camera-controls-top{
    opacity:0;
    position:absolute;
}
.video-wrapper.fullscreen-mode:hover .camera-controls-bottom,.video-wrapper.fullscreen-mode:hover .camera-controls-top{
    opacity:1;
}
.video-wrapper.fullscreen-mode .close-btn{
    position:absolute;
    right:40px;
    top:10px;
}
.video-wrapper.fullscreen-mode .expand-btn{
    background-color:#2196f3;
    bottom:20px;
    position:absolute;
    right:40px;
}

.intersections-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    grid-gap:20px;
    gap:20px;
}

.loading-message{
    background:#f8f9fa;
    border:2px dashed #dee2e6;
    border-radius:10px;
    color:#6c757d;
    font-size:1.2em;
}

.error-message,.loading-message{
    grid-column:1 /  -1;
    padding:40px;
    text-align:center;
}

.error-message{
    background:#f8d7da;
    border:2px solid #f5c6cb;
    border-radius:10px;
    color:#dc3545;
    font-size:1.1em;
}

@-webkit-keyframes slideIn{
    0%{
        opacity:0;
        -webkit-transform:translateY(20px);
                transform:translateY(20px);
    }
    to{
        opacity:1;
        -webkit-transform:translateY(0);
                transform:translateY(0);
    }
}

@keyframes slideIn{
    0%{
        opacity:0;
        -webkit-transform:translateY(20px);
                transform:translateY(20px);
    }
    to{
        opacity:1;
        -webkit-transform:translateY(0);
                transform:translateY(0);
    }
}

@-webkit-keyframes fadeIn{
    0%{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes fadeIn{
    0%{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@-webkit-keyframes slideOut{
    0%{
        opacity:1;
        -webkit-transform:translateX(0);
                transform:translateX(0);
    }
    to{
        opacity:0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
}

@keyframes slideOut{
    0%{
        opacity:1;
        -webkit-transform:translateX(0);
                transform:translateX(0);
    }
    to{
        opacity:0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
}

@-webkit-keyframes toastSlideIn{
    0%{
        opacity:0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
    to{
        opacity:1;
        -webkit-transform:translateX(0);
                transform:translateX(0);
    }
}

@keyframes toastSlideIn{
    0%{
        opacity:0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
    to{
        opacity:1;
        -webkit-transform:translateX(0);
                transform:translateX(0);
    }
}

.text-primary{
    color:#007bff !important;
}

.text-success{
    color:#28a745 !important;
}

.text-danger{
    color:#dc3545 !important;
}

.text-warning{
    color:#ffc107 !important;
}

.text-info{
    color:#17a2b8 !important;
}

.text-muted{
    color:#6c757d !important;
}

.intersections-grid :focus{
    outline:2px solid #007bff;
    outline-offset:2px;
}

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#f1f1f1;
    border-radius:4px;
}

::-webkit-scrollbar-thumb{
    background:#c1c1c1;
    border-radius:4px;
}

::-webkit-scrollbar-thumb:hover{
    background:#a8a8a8;
}

@-webkit-keyframes slideIn{
    0%{
        opacity:0;
        -webkit-transform:translateY(20px);
                transform:translateY(20px);
    }
    to{
        opacity:1;
        -webkit-transform:translateY(0);
                transform:translateY(0);
    }
}

@keyframes slideIn{
    0%{
        opacity:0;
        -webkit-transform:translateY(20px);
                transform:translateY(20px);
    }
    to{
        opacity:1;
        -webkit-transform:translateY(0);
                transform:translateY(0);
    }
}

@-webkit-keyframes spin{
    0%{
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }
    to{
        -webkit-transform:rotate(1turn);
                transform:rotate(1turn);
    }
}

@keyframes spin{
    0%{
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }
    to{
        -webkit-transform:rotate(1turn);
                transform:rotate(1turn);
    }
}

@-webkit-keyframes fadeIn{
    0%{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes fadeIn{
    0%{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@-webkit-keyframes pulse{
    0%,to{
        opacity:1;
        -webkit-transform:scale(1);
                transform:scale(1);
    }
    50%{
        opacity:.7;
        -webkit-transform:scale(1.1);
                transform:scale(1.1);
    }
}

@keyframes pulse{
    0%,to{
        opacity:1;
        -webkit-transform:scale(1);
                transform:scale(1);
    }
    50%{
        opacity:.7;
        -webkit-transform:scale(1.1);
                transform:scale(1.1);
    }
}

@-webkit-keyframes toastSlideIn{
    0%{
        opacity:0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
    to{
        opacity:1;
        -webkit-transform:translateX(0);
                transform:translateX(0);
    }
}

@keyframes toastSlideIn{
    0%{
        opacity:0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
    to{
        opacity:1;
        -webkit-transform:translateX(0);
                transform:translateX(0);
    }
}

@-webkit-keyframes toastSlideOut{
    0%{
        opacity:1;
        -webkit-transform:translateX(0);
                transform:translateX(0);
    }
    to{
        opacity:0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
}

@keyframes toastSlideOut{
    0%{
        opacity:1;
        -webkit-transform:translateX(0);
                transform:translateX(0);
    }
    to{
        opacity:0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
}

@-webkit-keyframes streamingPulse{
    0%,to{
        -webkit-box-shadow:0 0 10px rgba(40,167,69,.3);
                box-shadow:0 0 10px rgba(40,167,69,.3);
        -webkit-transform:scale(1);
                transform:scale(1);
    }
    50%{
        -webkit-box-shadow:0 0 20px rgba(40,167,69,.6);
                box-shadow:0 0 20px rgba(40,167,69,.6);
        -webkit-transform:scale(1.02);
                transform:scale(1.02);
    }
}

@keyframes streamingPulse{
    0%,to{
        -webkit-box-shadow:0 0 10px rgba(40,167,69,.3);
                box-shadow:0 0 10px rgba(40,167,69,.3);
        -webkit-transform:scale(1);
                transform:scale(1);
    }
    50%{
        -webkit-box-shadow:0 0 20px rgba(40,167,69,.6);
                box-shadow:0 0 20px rgba(40,167,69,.6);
        -webkit-transform:scale(1.02);
                transform:scale(1.02);
    }
}

@-webkit-keyframes streamingGlow{
    0%,to{
        background:#d4edda;
        border-color:#28a745;
    }
    50%{
        background:#c3e6cb;
        border-color:#20c997;
    }
}

@keyframes streamingGlow{
    0%,to{
        background:#d4edda;
        border-color:#28a745;
    }
    50%{
        background:#c3e6cb;
        border-color:#20c997;
    }
}

.loading-icon{
    font-size:3em;
    margin-bottom:20px;
}

.loading-icon,.loading-spinner{
    -webkit-animation:spin 2s linear infinite;
            animation:spin 2s linear infinite;
}

.loading-spinner{
    display:inline-block;
    font-size:2em;
    margin-bottom:15px;
}

@media (prefers-reduced-motion:reduce){
    .loading-icon,.loading-spinner,.sensor-card.streaming,.status-indicator,.toast{
        -webkit-animation:none !important;
                animation:none !important;
    }

    .btn,.intersection-card,.sensor-action,.sensor-card,.sensor-stop-action,.toast{
        -webkit-transition:none !important;
        transition:none !important;
    }
}

.intersection-card{
    -webkit-animation:slideIn .5s ease-out;
            animation:slideIn .5s ease-out;
    background:#fff;
    border:2px solid #e9ecef;
    border-radius:15px;
    -webkit-box-shadow:0 8px 25px rgba(0,0,0,.1);
            box-shadow:0 8px 25px rgba(0,0,0,.1);
    padding:20px;
    -webkit-transition:border-color .3s ease,-webkit-transform .3s ease,-webkit-box-shadow .3s ease;
    transition:border-color .3s ease,-webkit-transform .3s ease,-webkit-box-shadow .3s ease;
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,-webkit-transform .3s ease,-webkit-box-shadow .3s ease;
}

.intersection-card:hover{
    border-color:#007bff;
    -webkit-box-shadow:0 12px 35px rgba(0,0,0,.15);
            box-shadow:0 12px 35px rgba(0,0,0,.15);
    -webkit-transform:translateY(-5px);
            transform:translateY(-5px);
}

.intersection-card.connected{
    border-left:4px solid #28a745;
}

.intersection-card.disconnected{
    border-left:4px solid #dc3545;
}

.intersection-title-row{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    margin-bottom:10px;
}

.intersection-title{
    color:#2c3e50;
    font-size:1.2em;
    font-weight:700;
}

.intersection-status{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    font-size:.9em;
    gap:8px;
}

.status-indicator{
    -webkit-animation:pulse 2s infinite;
            animation:pulse 2s infinite;
    border-radius:50%;
    height:12px;
    width:12px;
}

.status-indicator.connected{
    background-color:#28a745;
    -webkit-box-shadow:0 0 10px rgba(40,167,69,.3);
            box-shadow:0 0 10px rgba(40,167,69,.3);
}

.status-indicator.disconnected{
    background-color:#dc3545;
    -webkit-box-shadow:0 0 10px rgba(220,53,69,.3);
            box-shadow:0 0 10px rgba(220,53,69,.3);
}

.status-text{
    font-weight:500;
    -webkit-transition:color .3s ease;
    transition:color .3s ease;
}

.sensors-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    grid-gap:15px;
    gap:15px;
}

.sensor-card{
    background:#f8f9fa;
    border:2px solid #e9ecef;
    border-radius:12px;
    cursor:pointer;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    min-height:130px;
    padding:10px 0;
    position:relative;
    text-align:center;
    -webkit-transition:all .3s ease;
    transition:all .3s ease;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
    gap:4px;
            justify-content:center;
}

.sensor-card.clickable:hover{
    background:#e9ecef;
    border-color:#007bff;
    -webkit-box-shadow:0 8px 20px rgba(0,123,255,.2);
            box-shadow:0 8px 20px rgba(0,123,255,.2);
    -webkit-transform:translateY(-3px);
            transform:translateY(-3px);
}

.sensor-card.loading{
    background:#fff3cd;
    border-color:#ffc107;
    cursor:wait;
}

.sensor-card.loading:hover{
    -webkit-transform:none;
            transform:none;
}

.sensor-card.streaming{
    -webkit-animation:streamingPulse 2s infinite;
            animation:streamingPulse 2s infinite;
    background:#d4edda;
    border-color:#28a745;
    cursor:default;
}

.sensor-card.streaming:hover{
    -webkit-animation:streamingGlow 1.5s infinite;
            animation:streamingGlow 1.5s infinite;
}

.sensor-card.streaming.clickable:hover{
    -webkit-box-shadow:none;
            box-shadow:none;
    -webkit-transform:none;
            transform:none;
}

.sensor-name{
    color:#2c3e50;
    font-size:.85em;
    font-weight:700;
}

.sensor-action{
    border:1px solid transparent;
    border-radius:6px;
    color:#007bff;
    cursor:pointer;
    font-size:.7em;
    font-weight:500;
    -webkit-transition:all .2s ease;
    transition:all .2s ease;
}

.sensor-card.loading .sensor-action{
    color:#856404;
    cursor:wait;
}

.sensor-card.streaming .sensor-action{
    color:#155724;
}

.sensor-stop-action{
    background:rgba(220,53,69,.1);
    border:1px solid #dc3545;
    border-radius:6px;
    color:#dc3545;
    cursor:pointer;
    display:none;
    font-size:.7em;
    font-weight:500;
    margin:0 20px;
    padding:6px 12px;
    -webkit-transition:all .2s ease;
    transition:all .2s ease;
}

.sensor-stop-action:hover{
    background:rgba(220,53,69,.2);
    -webkit-box-shadow:0 2px 8px rgba(220,53,69,.3);
            box-shadow:0 2px 8px rgba(220,53,69,.3);
    -webkit-transform:translateY(-1px);
            transform:translateY(-1px);
}

.sensor-card.streaming .sensor-stop-action{
    display:block;
}

.sensor-card--inactive{
    cursor:not-allowed;
    opacity:.6;
}

.sensor-card--error{
    -webkit-animation:none;
            animation:none;
    background:#f8d7da;
    border-color:#dc3545;
}

.sensor-card--success{
    background:#d4edda;
    border-color:#28a745;
}

.stream-status-indicator{
    -webkit-animation:pulse 1s infinite;
            animation:pulse 1s infinite;
    background:#28a745;
    border-radius:50%;
    height:8px;
    position:absolute;
    right:8px;
    top:8px;
    width:8px;
}

.sensor-card.streaming .stream-status-indicator{
    display:block;
}

.stream-status-indicator:not(.sensor-card.streaming *){
    display:none;
}

.loading-state{
    background:#f8f9fa;
    border:2px dashed #dee2e6;
    border-radius:15px;
    color:#6c757d;
    font-size:1.2em;
    grid-column:1 /  -1;
    padding:40px;
    text-align:center;
}

.loading-message{
    font-weight:500;
}

.server-waiting-container{
    background:#f8f9fa;
    border:2px solid #dee2e6;
    border-radius:15px;
    -webkit-box-shadow:0 4px 15px rgba(0,0,0,.1);
            box-shadow:0 4px 15px rgba(0,0,0,.1);
    color:#495057;
    font-size:1.1em;
    grid-column:1 /  -1;
    padding:40px;
    text-align:center;
}

.attempt-info{
    font-weight:500;
    margin-bottom:15px;
}

.progress-bar{
    background:#e9ecef;
    border-radius:4px;
    height:8px;
    margin-bottom:20px;
    overflow:hidden;
    width:100%;
}

.progress-fill{
    background:-webkit-gradient(linear, left top, right top, from(#007bff), to(#0056b3));
    background:linear-gradient(90deg, #007bff, #0056b3);
    border-radius:4px;
    height:100%;
    -webkit-transition:width .3s ease;
    transition:width .3s ease;
}

.waiting-message{
    color:#6c757d;
    font-style:italic;
    margin-top:10px;
}

.error-container{
    background:#f8d7da;
    border:2px solid #f5c6cb;
    border-radius:15px;
    color:#721c24;
    grid-column:1 /  -1;
    padding:40px;
    text-align:center;
}

.error-icon{
    font-size:4em;
    margin-bottom:20px;
}

.error-title{
    font-size:1.5em;
    font-weight:700;
    margin-bottom:10px;
}

.error-message{
    margin-bottom:20px;
    opacity:.8;
}

#toast-container{
    pointer-events:none;
    position:fixed;
    right:20px;
    top:20px;
    z-index:1000;
}

.toast{
    -webkit-animation:toastSlideIn .3s ease-out;
            animation:toastSlideIn .3s ease-out;
    background:#fff;
    border-radius:8px;
    -webkit-box-shadow:0 6px 20px rgba(0,0,0,.15);
            box-shadow:0 6px 20px rgba(0,0,0,.15);
    margin-bottom:10px;
    max-width:400px;
    min-width:300px;
    padding:15px;
    pointer-events:auto;
}

.toast-content{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    gap:10px;
}

.toast-icon{
    font-size:18px;
    -ms-flex-negative:0;
        flex-shrink:0;
}

.toast-message{
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
    font-weight:500;
    line-height:1.4;
}

.toast-close{
    background:none;
    border:none;
    cursor:pointer;
    font-size:18px;
    margin-left:10px;
    opacity:.7;
    padding:0;
    -webkit-transition:opacity .3s ease;
    transition:opacity .3s ease;
    -ms-flex-negative:0;
        flex-shrink:0;
}

.toast-close:hover{
    opacity:1;
}

.toast-success{
    background:#d4edda;
    border-left:4px solid #28a745;
    color:#155724;
}

.toast-error{
    background:#f8d7da;
    border-left:4px solid #dc3545;
    color:#721c24;
}

.toast-warning{
    background:#fff3cd;
    border-left:4px solid #ffc107;
    color:#856404;
}

.toast-info{
    background:#d1ecf1;
    border-left:4px solid #17a2b8;
    color:#0c5460;
}

.modal-overlay{
    background:rgba(0,0,0,.5);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-animation:fadeIn .3s ease-out;
            animation:fadeIn .3s ease-out;
    z-index:1001;
}

.modal-content{
    -webkit-animation:slideIn .3s ease-out;
            animation:slideIn .3s ease-out;
    background:#fff;
    border-radius:12px;
    -webkit-box-shadow:0 10px 40px rgba(0,0,0,.2);
            box-shadow:0 10px 40px rgba(0,0,0,.2);
    max-width:500px;
    padding:30px;
    width:90%;
}

.btn{
    border:none;
    border-radius:8px;
    cursor:pointer;
    display:inline-block;
    font-size:14px;
    font-weight:700;
    -webkit-text-decoration:none;
    text-decoration:none;
    -webkit-transition:all .3s ease;
    transition:all .3s ease;
}

.btn-primary{
    background:#007bff;
    -webkit-box-shadow:0 4px 12px rgba(0,123,255,.3);
            box-shadow:0 4px 12px rgba(0,123,255,.3);
    color:#fff;
}

.btn-primary:hover{
    background:#0056b3;
    -webkit-box-shadow:0 6px 20px rgba(0,123,255,.4);
            box-shadow:0 6px 20px rgba(0,123,255,.4);
    -webkit-transform:translateY(-2px);
            transform:translateY(-2px);
}

.btn-secondary{
    background:#6c757d;
    -webkit-box-shadow:0 4px 12px hsla(208,7%,46%,.3);
            box-shadow:0 4px 12px hsla(208,7%,46%,.3);
    color:#fff;
}

.btn-secondary:hover{
    background:#545b62;
    -webkit-box-shadow:0 6px 20px hsla(208,7%,46%,.4);
            box-shadow:0 6px 20px hsla(208,7%,46%,.4);
    -webkit-transform:translateY(-2px);
            transform:translateY(-2px);
}

.btn-stop{
    background:#dc3545;
    -webkit-box-shadow:0 4px 12px rgba(220,53,69,.3);
            box-shadow:0 4px 12px rgba(220,53,69,.3);
    color:#fff;
}

.btn-stop:hover{
    background:#c82333;
    -webkit-box-shadow:0 6px 20px rgba(220,53,69,.4);
            box-shadow:0 6px 20px rgba(220,53,69,.4);
    -webkit-transform:translateY(-2px);
            transform:translateY(-2px);
}

.btn:disabled{
    background:#6c757d;
    -webkit-box-shadow:none;
            box-shadow:none;
    cursor:not-allowed;
    opacity:.6;
    -webkit-transform:none;
            transform:none;
}

.btn:focus,.sensor-action:focus,.sensor-stop-action:focus{
    outline:2px solid #007bff;
    outline-offset:2px;
}

.toast:focus-within{
    outline:2px solid #007bff;
    outline-offset:2px;
}

.sensor-card:focus{
    outline:2px solid #007bff;
    outline-offset:2px;
}

@media (prefers-contrast:more){

    .btn,.sensor-action,.sensor-stop-action,.toast{
        border:2px solid;
    }

    .intersection-card,.sensor-card.streaming{
        border-width:3px;
    }
}

@media print{
    .modal-overlay,.toast{
        display:none !important;
    }

    .intersection-card{
        page-break-inside:avoid;
        -webkit-column-break-inside:avoid;
           -moz-column-break-inside:avoid;
                break-inside:avoid;
        margin-bottom:20px;
    }

    .sensor-card{
        -webkit-animation:none !important;
                animation:none !important;
    }

    .sensor-action,.sensor-card,.sensor-stop-action{
        background:#fff !important;
        border:1px solid #ccc !important;
        color:#000 !important;
    }
}