@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
html{min-height: 100%; height: 100%; margin: 0px; padding: 0px;}
body{min-height: 100%; height: 100%; margin: 0px; padding: 0px; font-size: 14px; color:#1D1D1D; font-size: 14px;
    font-family: "Roboto", sans-serif;
    font-weight:400;
    font-style: normal;
}
a{font-weight: 500; color:#3B5DAA; text-decoration: none;}
a:hover{text-decoration:underline;transition: ease all .4s;}

.wrapper{height:100%; position: relative; background:#EBF0F3;}
.btn-primary{background: #47B99F;border:solid 1px #47B99F; padding:6px 30px;}
.btn-primary:hover{background: #35A188;border:solid 1px #35A188;}

/*Login*/
.login-page{background: #343F51;padding: 100px 0 0;}
.login{width:450px; margin: 0 auto; background:#FFF; padding: 30px; border-radius:10px;}
.login .logo{display: block; width: 160px; height: 60px; margin: 0 0 20px;}
.login .logo span{display: block;background:url("../images/logo.png") left top no-repeat; background-size: 100%; width: 160px; height: 60px;}
.login .login-btn{float: right;}
.login .forgot-pass{display: block; float: left; margin: 10px 0 0 0;}
.login .error-check{color:#F00;}
/*Login end*/
   
/*header*/
.header{background: #FFF; height:80px;position: absolute; width: 100%; top: 0px; z-index: 20;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.03);}
.header .logo{display: block; float:left; width: 160px; height: 60px; margin: 10px 0 0 50px;}
.header .logo a{display: block;background:url("../images/logo.png?v=1") left top no-repeat; background-size: 100%;  margin-top: 7px; width: 160px; height: 60px;}
.header .select-parking{float: left; margin:22px 0 0 80px; width: 200px;}
.header .header-tools{float:right; margin: 28px 30px 0 0;}
.header .header-tools .user-ico{float:right; width: 24px; height: 24px;background:url("../images/icons.svg") -48px -48px no-repeat; margin: 0 0 0 30px;}
.header .header-tools .notification-ico{float:right; width: 24px; height: 24px;background:url("../images/icons.svg") 0 -48px no-repeat; margin: 0 0 0 30px; position: relative;}
.header .header-tools .notification-ico .qnt{position: absolute; right: -6px; top: -6px; background:#F00; color:#FFF; font-size: 10px; width: 16px; height: 16px; text-align: center; line-height: 16px; border-radius:3px;}
.header .header-tools .current-time{float:right; line-height: 24px;}
/*header end*/

/*menubar*/
.menubar{background:#343F51; width: 260px; color:#FFF; position: absolute; top: 80px; bottom: 0px; left: 0px;padding:30px 0; z-index: 10;}
.menubar ul{margin:0px; padding: 0px;}
.menubar li{margin:0px; padding:10px 20px;}
.menubar li:hover,
.menubar li.active{background:#5C709D;transition: ease all .4s;}
.menubar li a{display: block;color:#FFF; text-decoration:none;}
.menubar li a:before{display: block;content:""; float:left; width:24px; height: 24px; margin: -2px 15px 0 0; background:url("../images/icons.svg") no-repeat;}
.menubar li.home a:before{background-position:0 0;}
.menubar li.entrance-exit a:before{background-position:-24px 0;}
.menubar li.events a:before{background-position:-48px 0;}
.menubar li.statistics a:before{background-position:-72px 0;}
.menubar li.inventory a:before{background-position:-96px 0;}
.menubar li.cctv a:before{background-position:-96px -24px;}
.menubar li.pricing a:before{background-position:0 -24px;}
.menubar li.user-management a:before{background-position:-24px -24px;}
.menubar li.management a:before{background-position:-48px -24px;}
.menubar li.settings a:before{background-position:-72px -24px;}
/*menubar end*/


/*Main container*/
.main-container{padding: 30px 30px 30px 290px; position: absolute; top:80px; left:0px; width:100%; z-index: 0; overflow: auto;height: calc(100vh - 80px);}
.block-element{padding:20px; border-radius:6px; background: #FFF;margin:0 0 20px;}
.block-element h1{font-size:20px; font-weight: 700; margin:5px 0px 25px; height: 38px; line-height: 38px;}
.block-element h2{font-size:15px; font-weight: 700; margin:5px 0px 25px; height: 38px; line-height: 38px;}
.block-element .grid-header{color:#7B7B7B; font-size: 14px;}
.block-element .grid .row{border-bottom:solid 1px #CCC; line-height:3; text-align: center;}
.block-element .grid-header div{line-height:2;}
.block-element .grid .row:last-child{border-bottom:0px;}
.grid label{margin:0px;}
.block-element .add-new{float: right; line-height:24px; margin:7px 0 0;}
.block-element .add-new:before{float:left; content:""; width:24px; height:24px; background:url("../images/icons.svg") -192px -72px no-repeat; margin: 0 10px 0 0;}
.filter-block .status{ margin:3px 0 0 30px; line-height: 30px;}
.block-element .status .btn{ margin:0 0 0 10px;}
.block-element .status .working{float: none; margin: 0px; color:#2ED5AF;} 
.block-element .status .stopped{float: none; margin: 0px; color:#F00;}
.remove-user{line-height: 24px; display:inline-table;margin: 20px 0 0;}
.remove-user:before{float:left; content:""; width:24px; height:24px; background:url("../images/icons.svg") -216px 0px no-repeat; margin: 0 10px 0 0;}
.dynamic-scroll-block{height: calc(100vh - 310px); overflow: auto;}
.dynamic-scroll-block-small{height: calc(100vh - 580px); overflow: auto;}
.companies .main-container{padding: 30px;}
.companies .height-100{margin:auto;}
.companies .back-ico{display: block; float: left; width: 24px; height: 24px; margin:11px 20px 0 0;background:url("../images/icons.svg") -48px -96px no-repeat; }

.form-grid .form-grid-label {line-height:36px;}
.form-grid .form-grid-label label{margin:0px}
.form-grid .form-grid-label,
.form-grid .form-grid-element{display: block; margin: 0 0 8px;}
.form-grid .plus-row,
.form-grid .minus-row{ width:36px; height:36px; display: block; padding:6px;float: left;border-radius:6px; cursor: pointer;}
.form-grid .plus-row{background:#2ED5AF;}
.form-grid .plus-row:hover{background:#35A188;transition: ease all .4s}
.form-grid .minus-row{background:#F00; margin:0 0 0 6px;}
.form-grid .minus-row:hover{background:#E50000;transition: ease all .4s}
.form-grid .plus-row span{width:24px; height:24px; display: block; background:url("../images/icons.svg") -168px 0px no-repeat;}
.form-grid .minus-row span{width:24px; height:24px; display: block; background:url("../images/icons.svg") -192px 0px no-repeat;}
.plus-minus-row{position:relative;}
.plus-minus-row .form-label{margin:0px;}
.plus-minus-row .plus-minus{position:absolute; right: -326px;}
.form-grid-element .element-1{float:left;}
.form-grid-element .element-1 label{width:auto;}

.double-block-element{margin: 0 0 20px;}
.double-block-element .double-block-element-1{float:left; width:50%; padding: 0 10px 0 0;}
.double-block-element .double-block-element-2{float:left; width:50%; padding: 0 0 0 10px;}
.double-block-element .block-element{margin: 0px;}

.registered-ico{display: block; width: 24px; height: 24px; background:url("../images/icons.svg") -120px -72px no-repeat; margin: 9px auto 0; cursor: pointer;}
.details-ico{display: block; width: 24px; height: 24px; background:url("../images/icons.svg") -144px -72px no-repeat; margin: 9px 0 0; float: right; cursor: pointer;}
.photo-ico{display: block; width: 24px; height: 24px; background:url("../images/icons.svg") -168px -72px no-repeat; margin: 9px 0 0; float: right; cursor: pointer;}
.delete-ico{display: block; width: 24px; height: 24px; background:url("../images/icons.svg") -217px 0px no-repeat; margin: 9px 0 0; float: right;  margin-right: 10px; margin-left: 10px; cursor: pointer;}

.status-expired{color:#F00;}
.status-leaving{color:#F5821E;}
.status .active:before,
.status .switched-off:before,
.status .blocked:before{float:left;content:""; margin:17px 10px 0 0; width:8px; height:8px;border-radius:4px;}
.status .active:before{ background:#2ED5AF;}
.status .blocked:before{ background:#F00;}
.status .switched-off:before{ background:#CCC;}
.align-left{text-align:left;}
.height-100{height: calc(100vh - 140px); margin: 0px;position: relative;}
.outline-btn{border:solid 1px #2ED5AF; padding:6px 15px; color:#2ED5AF;border-radius:4px; line-height: 1;}
.outline-btn:hover{border:solid 1px #2ED5AF; background: #2ED5AF; color:#FFF; text-decoration: none;}
.open-gate{float: right; margin:7px 30px 0 0;}
.block-bottom-margin-50{margin: 0 0 40px;}

.nav-tabs{border:0px; max-width:60%; line-height:44px;}
.nav-tabs .nav-link{font-size: 16px; font-weight: 700; color: #999; padding:0px; margin:0 30px 0 0; border:0px; border-bottom:solid #FFF 2px; background: none;}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{color:#1D1D1D; border:solid #2ED5AF;border-width:0 0 2px 0;}

.form-50 .width-50{float: left; width: 50%; padding: 0 100px 0 0;}
.entrance-exit-details .col{line-height:2.5;}
.entrance-exit-details .popup-image{margin: 0 0 10px;}

.entrance-exit-details .modal-body .col .col{border-bottom: solid 1px #CCC;}
.entrance-exit-details .popup-image{position: relative;}
.entrance-exit-details .photo-name{background: #EBF0F3; position: absolute; bottom: 30px; left: 0px; display: block; float: left; padding:2px 30px;}
/*Main container end*/

/*Pagination*/
.pagination{position: absolute; bottom:20px; right:20px; margin: 0px;}
.pagination .page-item .page-link{ width:36px; height:36px; margin: 0 3px; padding: 6px 0; text-align:center; border:0; background: #EBF0F3; border-radius: 5px;color:#1d1d1d;font-weight: normal;}
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link.active{background: #2ED5AF; color:#FFF; text-decoration: none;}
.pagination .prev-pages span, .pagination .prev span, .pagination .next-pages span, .pagination .next span { display: block; width: 24px; height: 24px;margin: 0 auto; background:url("../images/icons.svg") no-repeat;}
.pagination .prev-pages span{ background-position:0 -96px;}
.pagination .prev-pages:hover span{ background-position:-24px -96px;}
.pagination .prev span{ background-position:-48px -96px;}
.pagination .prev:hover span{ background-position:-72px -96px;}
.pagination .next-pages span{ background-position:0 -96px;transform: rotate(180deg);}
.pagination .next-pages:hover span{ background-position:-24px -96px;transform: rotate(180deg);}
.pagination .next span{ background-position:-48px -96px;transform: rotate(180deg);}
.pagination .next:hover span{ background-position:-72px -96px;transform: rotate(180deg);}
/*Pagination end*/

/*Statistics*/
.stats-block{float:left; width: 27%; min-height: 95px; border-left:solid 1px #CCC; padding:0 0 0 30px;}
.stats-block:first-child{border:0px; width:19%;padding: 0px;}
.stats-block .stats-amount{font-size: 40px; font-weight: 700; line-height: 1; margin: 0 0 8px; color: #2ED5AF;}
.block-element .stats-block h2{font-size:16px; font-weight: 700; margin:0 0 10px; height: auto; line-height: 1;}
.stats-block .stats-amount span{color:#CCC;}
.st-label, .st-bar, .st-qnt{float:left; display: block; line-height:30px;}
.st-label{width: 30%;}
.st-bar{width: 45%;padding: 0 10px 0 0;border-left:solid 1px #CCC;}
.st-qnt{width: 25%;}
.stats-total, .stats-repeated{margin: 15px 0 0;}
.stats-total .st-bar span{width:100%; background:#F5821E; height: 10px; border-radius: 0 3px 3px 0;display: block; margin: 10px 0;}
.stats-repeated .st-bar span{width:100%; background:#2ED5AF; height: 10px; border-radius: 0 3px 3px 0;display: block;  margin: 10px 0;}
/*Statistics end*/

/*Filter block*/
.filter-block{float: right; height:38px; margin:5px 0 0 0; font-size: 14px;}
.tab-pane .filter-block{margin:-70px 0 0 0;}
.filter-block input{width:240px;}
.filter-block select{width:200px;}
.filter-block span{float: left;margin:0 0 0 10px;}
.filter-block .filter-ico{width: 24px; height: 24px; background:url("../images/icons.svg") -72px -48px no-repeat; position: relative; margin:7px 0 0 30px; cursor: pointer;}
.filter-block .filter-ico .indicator{width:10px; height:10px; position: absolute; top:0px; right:0px; background:#2ED5AF; border:solid 2px #FFF; border-radius:5px;}
.filter-block .export{margin:7px 20px 0 0;}
.filter-block .export_link{line-height: 24px;}
.filter-block .export_link:before{display:block; float: left; margin:0 10px 0 0; content:""; width: 24px; height: 24px;background:url("../images/icons.svg") -96px -72px no-repeat;}
.filter-block .searchbar{position: relative;}
.filter-block .searchbar input:after{content:"";position: absolute; width: 24px; height: 24px; top:7px; right:7px; background:url("../images/icons.svg") -168px -48px no-repeat;}
.filter-block .add-new{margin:0px;}
.reset-btn{padding: 3px 15px;}
/*Filter block end*/

/*Custom checkbox*/
.auto-update{position: absolute; bottom:24px; left:20px;}

.form-group input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}
.form-group label {position: relative; cursor: pointer;}
.form-group label:before {
    content:'';
    -webkit-appearance: none;
    background-color:#EBF0F3;
    border:0px;
    border-radius:3px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right:10px;
    width:24px; height:24px;
}
.form-group input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top:4px;
    left:4px;
    width:16px;
    height:16px;
    background: #47B99F;
    border-radius:2px;
}
.form-element-double .form-group{float: left;}
.customecheckbox { margin: 0 30px 0 0;}
/*Custom checkbox end*/

/* Video CCTV */
.video-screenshot{margin: 0 0 20px;}
.video-screenshot a{background: #CCC; display: block; margin: 0 0 10px;}
.video-screenshot img{width: 100%;}
.modal-body .popup-image img{ width: 100%;border:0px;}
.open-gate-config{padding:15px 0 0;}
.modal-footer, .modal-header{border:0px;}
.modal-body .new-form .row{padding:0 0 5px;}
.modal-body .new-form .row .row{padding:0px;}
.modal-body .new-form .form-grid-element label.form-label{line-height: 36px; margin: 0px;}
/* Video CCTV End*/

/* Settings */
.tab-pane{padding:40px 0;}
.settings-page .form-grid-element {margin:0 0 10px; display: block;}
.settings-page .form-grid-element label.form-label{float: left; width:220px; line-height: 38px;margin: 0px;}
.settings-page .form-grid-element input[type=text],
.settings-page .form-grid-element input[type=password],
.settings-page .form-grid-element input[type=email],
.settings-page .form-grid-element select{max-width: 260px;}
.element-event{line-height: 24px; margin: 0 0 0 27px;}
.separator-v-40{ margin: 0 0 40px !important;}
/* Settings end */

/* Form Elements */
.form-control, .form-select{/*background: #EBF0F3;border:0px;*/ font-size: 14px;min-height:36px;}
.form-control:focus, .form-select:focus{box-shadow: none;}
.date-picker, .searchbar{position: relative; z-index:10;}
.date-picker .form-control{max-width:215px;}
.date-picker .date-ico{display: block; width: 24px; height: 24px;background:url("../images/icons.svg") -120px -48px no-repeat; position: absolute; top:5px; right: 6px; z-index:20;}
.searchbar .search-ico{display: block; width: 24px; height: 24px;background:url("../images/icons.svg") -168px -48px no-repeat; position: absolute; top:5px; right: 6px; z-index:20;}/* Form Elements End*/



.inventory-finance{background: #EBF0F3; border-radius:10px; padding: 20px;}
.form-50 .width-50.inventory-finance-col{padding: 0px;}
.inventory-stats{position: absolute; bottom:20px; left:20px;background: #EBF0F3; border-radius:6px; padding:8px 15px;}
.inventory-stats .inv-stats-block{float: left; margin: 0 20px 0 0;}
.inventory-stats .inv-stats-block:last-child{margin:0px;}
.inventory-stats .inv-stats-block span{ padding: 0 0 0 8px; font-weight: 500;color:#1FAA8A;}
.inventory-finance h4{font-size: 14px;margin: 0px;}
.inventory-finance .main-amount{font-size:26px; color:#2ED5AF;font-weight: 500;margin:0;}
.inventory-finance .label-value{font-size: 12px;}
.inventory-finance .label-value span.value{float: right;}
.inventory-finance .warning{color:#F00;}
.inventory-finance .acceptor-block{padding: 0 15px 0 0; min-height: 148px;}
.inventory-finance .emmiter-block{padding: 0 0 0 30px;border-left:solid 1px #CCC; min-height: 148px;}
.inventory-finance .refund-total{margin:30px 0 0; font-weight:700;}


.user-ico{position: relative; z-index: 10;}
.user-menu{display: none; position: absolute; top: 24px; right: 0px; z-index: 20; width: 180px; background: #FFF; padding:10px;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.03);border:solid 1px #F1F1F1;}
.user-menu ul, .user-menu li{padding: 0px; margin: 0px; list-style-type: none;}
.user-menu li a{display: block; padding: 6px 10px;}
.user-ico:hover .user-menu{display: block;}
.notif-type-title-1, .notif-type-title-2{float: left; min-width:220px; color:#999;}
.new-event{font-weight:700;}

/*Chart style*/
.linechart{height: calc(100vh - 410px)}