@font-face {
     font-family: 'Roboto';
     src: url('Roboto-Regular.eot');
     src: local('Roboto'), local('Roboto-Regular'),
         url('../css/fonts/Roboto-Regular.eot') format('embedded-opentype'),
         url('../css/fonts/Roboto-Regular.woff') format('woff'),
         url('../css/fonts/Roboto-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

 * {
     margin: 0;
     padding: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     scrollbar-width: thin;
     scrollbar-color: var(--border2) transparent;
 }

 header,
 nav,
 section,
 article,
 aside,
 footer {
     display: block;
 }

 body {
     font-family: Roboto, Arial, sans-serif !important;
     /*font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif !important;*/
     background-color: #eee;
     font-size: 14px;
     position: relative;
     border: 0;
     overflow-y: auto;
 }

 html,
 body {
     padding: 0;
     padding-top: 0px;
     padding-left: 0px;
     margin: 0;
     /*min-height: 100vh;*/
     min-height: calc(100vh - 50px);
 }

 header {
     background-color: #c8e9ff;
     border-bottom: 1px solid #cdcdcd;
     height: 40px;
     line-height: 40px;
     padding-left: 40px;
     font-weight: bold;
     font-size: 15px;
     /*letter-spacing: 1px;
  text-transform: uppercase;*/
 }

 header div.mainheader {
     width: 100%;
 }

 header div.iconheader {
     top: 0;
     right: 0;
     z-index: 3;
     text-align: right;
     padding-right: 15px;
     padding-left: 15px;
     line-height: 60px;
     float: right;
     position: relative;
     margin-top: -60px;
 }

 header .left-header {
     float: left;
 }

 header .right-header {
     float: right;
     font-size: 10px;
     font-weight: normal;
     padding-right: 10px;
 }

 .a_header {
     display: inline-block;
     z-index: 3;
     text-align: right;
     padding-right: 15px;
     padding-left: 15px;
     line-height: 60px;
     cursor: pointer;
     color: #5a5a5a;
     text-decoration: none;
 }

 main {
     background-color: #eee;
     position: relative;
     left: 0;
     /*height: calc(100vh - 65px);*/
     height: calc(100% - 25px);
     min-height: calc(100vh - 25px);
     left: 0;
     top: 0;
 }

 footer {
     /*background-color: #fff;*/
     /*  position: relative;*/
     height: 24px;
     font-size: 10px;
     line-height: 24px;
     /*  max-width: calc(100vw-25px);*/
     text-align: right;
     padding-right: 10px;
     /*  clear: both;*/
     /*top: 10px; bottom: 10px;*/
     /*bottom: calc(100vh - 24px); */
 }

 ul {
     list-style-type: none;
 }

 a {
     color: #4bacfe;
     text-decoration: none;
 }

 /*** Левое меню ***/
 /*        #accordion>li>span {
            display: none;
            position: absolute;
            left: 100%;
            margin-top: -37px;
            padding-left: 15px;
            width: 200px;
            min-width: 12em;
            background: #eee;
            border: 1px solid #cdcdcd;
            -webkit-transition: all 0.25s ease;
            -o-transition: all 0.25s ease;
            transition: all 0.25s ease;  
        }

        #accordion>li:hover>span {
            display: block;
        }
        #accordion li>span>a {
            display: block;
            color: #5a5a5a;
            font-size: 14px;
            text-decoration: none;
            padding: 12px;
            border-bottom: 1px solid #cdcdcd;
        }
        #accordion li>span>a:hover, #accordion li div span a:hover {
            color: #4bacfe;
        }
        #accordion li div span a{
            color: #000;
        }
        .border_bottom_none {
            border-bottom: 0 !important;
        }*/
 /*#accordion>li>span {*/
 .submenu {
     display: none;
     position: relative;
     left: 100%;
     /*    margin-top: -37px;*/
     margin: -5px 0 0 -210px;
     padding-left: 15px;
     width: 200px;
     /*    min-width: 12em;*/
     background: #eee;
     border: 1px solid #cdcdcd;
     -webkit-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
     transition: all 0.25s ease;
     z-index: 150;
 }

 .submenu li {
     display: block;
     color: #5a5a5a;
     font-size: 14px;
     text-decoration: none;
     padding: 5px;
     border-bottom: 1px solid #cdcdcd;
     width: 184px !important;
 }

 /*#accordion li>span>a:hover, #accordion li div span a:hover {
    color: #4bacfe;
}
*/
 #accordion li div span a {
     color: #000;
 }

 .border_bottom_none {
     border-bottom: 0 !important;
 }

 .fa-menu {
     position: relative;
     display: table-cell !important;
     width: 40px;
     height: 36px;
     text-align: center;
     vertical-align: middle;
     font-size: 18px !important;
     /*font-weight: bold !important; */
 }

 .main-menu:hover,
 nav.main-menu.expanded {
     width: 250px;
     overflow: visible
 }

 .main-menu {
     background: #fff;
     border-right: 1px solid #cdcdcd;
     /*    position:fixed;*/
     position: absolute;
     top: 40px;
     min-height: calc(100% - 40px);
     /*    max-height: calc(100vh + 41px);*/
     max-height: 800px;
     left: 0;
     width: 40px;
     overflow: hidden;
     -webkit-transition: width .05s linear;
     transition: width .05s linear;
     -webkit-transform: translateZ(0) scale(1, 1);
     z-index: 1005;
     display: inline-block;
 }

 #accordion li.last_menu {
     margin-bottom: 25px;
 }

 .main-menu>ul.logout {
     margin-top: -7px;
     padding-top: 7px;
     border-bottom: 1px solid #cdcdcd;
 }

 .main-menu>ul {
     /* margin:7px 0;
   margin-top: 12px;*/
     margin: 0;
 }

 .main-menu li {
     position: relative;
     display: block;
     width: 250px;
     padding-top: 5px;
 }

 .main-menu li>div,
 .main-menu li>a {
     position: relative;
     display: table;
     border-collapse: collapse;
     border-spacing: 0;
     color: #000000;

     font-size: 14px;
     text-decoration: none;
     -webkit-transform: translateZ(0) scale(1, 1);
     -webkit-transition: all .1s linear;
     transition: all .1s linear
 }

 /*.main-menu .nav-icon{position:relative;display:table-cell;width:60px;text-align:center;vertical-align:middle;font-size:14px}*/
 .main-menu .nav-text {
     position: relative;
     display: table-cell;
     vertical-align: middle;
     width: 190px;
 }

 .fa-nav-text {
     position: relative;
     padding-top: 10px;
 }

 nav {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
 }

 nav ul,
 nav li {
     outline: 0;
     margin: 0;
     padding: 0
 }

 .main-menu li:hover>div

 /*nav.main-menu li.active>div,
nav.main-menu li.active>a*/
     {
     color: #4bacfe;
     cursor: pointer;
 }

 /*.accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 14px;
}*/
 #accordion li.open .link {
     color: #4bacfe;
 }

 #accordion li.open i {
     color: #4bacfe;
 }

 /*#accordion li.open>div i.fa-chevron-right,  */
 #accordion div.active>i.fa-chevron-right {
     -webkit-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
 }

 /*** Submenu ***/

 .submenu a:hover {
     color: #4bacfe;
 }

 li.submenu_link.open {
     background-color: #c8e9ff;
 }

 li.submenu_link.open a {
     color: #4bacfe;
 }

 .submenu a {
     display: block;
     text-decoration: none;
     color: #5a5a5a;
     padding: 12px;
     padding-left: 52px;
     -webkit-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
     transition: all 0.25s ease;
 }

 a.disable {
     color: #999999;
     cursor: default;
     font-style: italic;
 }

 a.disable:hover {
     color: #999999;
     cursor: default;
     font-style: italic;
 }

 li.submenu_link.open a.disable {
     background-color: #eeeeee;
     color: #999999;
 }







 /*** Авторизация ***/
 .auth {
     width: 100vw;
     height: 100vh;
 }

 .login-page {
     width: 360px;
     padding: 8% 0 0;
     margin: auto;
 }

 .form {
     position: relative;
     z-index: 1;
     background: #FFFFFF;
     max-width: 360px;
     margin: 0 auto 100px;
     padding: 35px 45px 45px 45px;
     text-align: right;
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
     /*  border-radius: 4px;*/
 }

 .form input {

     outline: 0;
     background: #f2f2f2;
     width: 100%;
     border: 0;
     margin: 0 0 15px;
     padding: 15px;
     box-sizing: border-box;
     font-size: 14px;
     /*border-radius: 4px;*/
 }

 .form button {

     text-transform: uppercase;
     outline: 0;
     width: 100%;
     border: 0;
     padding: 15px;
     background: #4bacfe;
     color: #ffffff;
     font-size: 14px;
     -webkit-transition: all 0.3 ease;
     transition: all 0.3 ease;
     cursor: pointer;
     /*border-radius: 4px;*/
 }

 .form button:hover,
 .form button:active,
 .form button:focus {
     color: #5a5a5a;
     background: #c8e9ff;
 }

 .form .message {
     margin: 15px;
     color: #5a5a5a;
     font-size: 16px;
     text-align: left;
     font-weight: bold;
 }

 .form .message a {
     color: #4CAF50;
     text-decoration: none;
 }

 /*** Окончание блока авторизации ***/

 .main_title_bar {
     padding: 8px 20px;
     border-radius: 4px;
     margin: 15px 15px 0 15px;
     background-color: #fff;
     -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
     display: inline-block;
     float: left;
     line-height: 29px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     color: #5a5a5a;
     font-size: 16px;
     width: calc(100% - 280px);
 }

 .block-50 {
     padding: 20px;
     border-radius: 4px;
     background: #fff;
     margin: 15px 15px 0 15px;
     width: calc(100% - 20px);
     float: left;
     height: calc(50% - 40px);
     min-height: 400px;
     border: 1px solid #aed0ea;
 }

 .block-100 {
     display: block;
     padding: 20px;
     border-radius: 4px;
     background: #fff;
     margin: 45px 10px 0 50px;
     /*margin: 10px 10px 0 50px;*/
     width: calc(100% - 60px);
     float: left;
     height: calc(100vh - 85px);
     min-height: 830px;
     border: 1px solid #aed0ea;
 }

 /*section {
  height: 100%;
  min-height: 850px;
}*/
 .title_bar {
     padding: 5px 15px;
     border-radius: 4px !important;
     margin: -18px -18px 10px -18px;
     border: 1px solid #aed0ea !important;
     background: #deedf7 !important;
     line-height: 29px !important;
     color: #5a5a5a !important;
     font-size: 14px !important;
 }

 .title_bar_accordion {
     padding: 5px 15px;
     border-radius: 4px !important;
     margin: 2px 0 0 0;
     border: 1px solid #aed0ea !important;
     background: #deedf7 !important;
     line-height: 29px !important;
     color: #5a5a5a !important;
     font-size: 14px !important;
     padding: .5em .5em .5em .7em;
 }

 /***  Кнопки   ***/
 .buttonblue {
     background-color: #4bacfe;
     color: #fff;
     border: none;
     display: inline-block;
     -webkit-transition: border 0.2s linear, color 0.2s linear, width 0.2s linear, background-color 0.2s linear;
     -o-transition: border 0.2s linear, color 0.2s linear, width 0.2s linear, background-color 0.2s linear;
     transition: border 0.2s linear, color 0.2s linear, width 0.2s linear, background-color 0.2s linear;
     cursor: pointer;
     padding: 5px 8px;
     margin: 5px 0px 15px;
 }

 .buttonorange {
     background-color: #ed7023
         /*#006400*/
     ;
     color: #fff;
     border: none;
     display: inline-block;
     -webkit-transition: border 0.2s linear, color 0.2s linear, width 0.2s linear, background-color 0.2s linear;
     -o-transition: border 0.2s linear, color 0.2s linear, width 0.2s linear, background-color 0.2s linear;
     transition: border 0.2s linear, color 0.2s linear, width 0.2s linear, background-color 0.2s linear;
     cursor: pointer;
     padding: 5px 8px;
     margin: 5px 0px 15px 0px;
 }

 .button-form {
     margin: 0px 0px 10px 0px;
 }

 /***  ***/

 input:read-only,
 input:-moz-read-only {
     background-color: #cdcdcd;
 }

 thead input,
 thead select {
     width: 100%;
     padding: 1px;
     box-sizing: border-box;
     font-size: 12px;
 }

 .pos-r {
     float: right;
     margin-left: 5px;
 }

 .pos-l {
     float: left;
     margin-left: 5px;
 }

 /***  Preloder   ***/
 #preloader {
     z-index: 2000;
 }

 #preloader i {
     position: absolute;
     top: 48vh;
     left: 48vw;
     /*color: #4bacfe;*/
     font-size: 30px;
 }

 /***  Графики ***/
 #graphics_wrapper .chart-block {
     display: none;
 }

 .scroll-chart {
     overflow: scroll;
     /*width: calc(100% - 20px);*/
     width: 100%;
     height: 350px;
     padding: 5px;
     border: solid 1px #4bacfe;
 }

 .huge-chart {
     height: 700px;
 }

 #graphics_wrapper .legend {
     padding-top: 10px;
     width: 100%;
     height: 100px;
 }

 #graphics_wrapper .legend td {
     padding-bottom: 5px;
 }

 #graphics_wrapper #flot-placeholder {
     width: 100%;
     height: 100%;
     margin: 0 auto;
 }

 #graphics_wrapper .set_date_range {
     padding: 20px 0 0 0;
 }

 #graphics_wrapper .graphics_filter_messages {
     padding: 20px;
     color: #176c44;
     border: 1.1px solid #0c7744;
     line-height: 2;
     font-size: 13px;
 }

 #graphics_wrapper .show_hide_filter_block {
     padding: 0 0 10px 0;
     display: none;
 }

 #graphics_table td:nth-of-type(1) {
     text-align: center;
 }

 #graphics_table td:nth-of-type(2) {
     text-align: center;
 }

 .graphics_table_section,
 .reports_filter_section {
     min-width: calc(80vw/2 - 1vw);
     margin-right: 20px;
 }

 .graphics_draw_section {
     border: 1px solid #4bacfe;
     height: 81vh;
 }

 .graphics_table_section .buttonorange,
 .reports_filter_section .buttonorange {
     margin: 10px;
     /*float: right;*/
 }

 .graphics_table_section .jscolor {
     margin-top: 2px;
 }

 .graphics_table_filter .flex-2:last-child {
     margin-left: 20px;
 }

 .graphics_table_block hr,
 .graphics_checkbox_buttons hr,
 .date_range_filter_button hr,
 .logemergency_table_block hr,
 .loguseractivity-hr {
     margin: 10px 0;
     border: none;
     /* Убираем границу для браузера Firefox */
     color: #4bacfe;
     /* Цвет линии для остальных браузеров */
     background-color: #4bacfe;
     /* Цвет линии для браузера Firefox и Opera */
     height: 1px;
 }

 #graphics_table_length,
 #graphics_table_filter {
     margin: 10px 0;
 }

 .graphics_checkbox_buttons .buttonorange {
     margin: 10px 10px 10px 0;
 }

 .date_range_filter {
     margin-top: 10px;
 }

 .graphics_table_filter .div-string {
     padding-right: 20px;
 }

 .graphics_table_filter .div-string .flex-1 {
     text-align: right;
     padding-top: 5px;
     padding-right: 5px;
 }

 .date_range_filter .div-string {
     padding-right: 20px;
 }

 .date_range_filter .div-string .flex-1 {
     text-align: right;
     padding-top: 5px;
     padding-right: 5px;
 }

 .date_range_filter .div-string .flex-2 {
     padding-top: 5px;
     padding-right: 5px;
 }


 .date_range_filter_button .buttonorange {
     margin-left: 0;
 }

 /*----------------------------*/
 /*************   Карта   ****************/
 .block-map {
     width: 100%;
     float: right;
     background: #f2efe9;
 }

 .div-map-filter-label {
     margin: 0 10px;
     display: flex;
     align-items: center;
 }

 .map-field-search-obj {
     /*  border: 4px solid #7797b8;  */
     position: absolute;
     /*border: 1px solid aliceblue;*/
     /*margin: 4px 0;*/
     z-index: 1000;
     left: auto;
     right: 10px;
     background-color: rgba(125, 171, 202, 0.58);
     padding: 4px;
     /*border-radius: 7px 0 0 7px;*/
     width: 385px;
 }

 .btn-map-search {
     margin: 0;
     border: 1px solid aliceblue;
     margin-left: 5px;
 }

 #map_object {
     border: 1px solid aliceblue;
     /*border-radius: 3px;*/
 }

 div.olControlLayerSwitcher,
 div.layersDiv {
     width: 200px !important;
     height: 220px !important;
 }

 .olControlLayerSwitcher {
     margin-top: 20px !important;
     height: 200px !important;
     width: 200px !important;
 }

 .olControlLayerSwitcher .layersDiv {
     padding-top: 25px;
     /*background-color: rgba(34, 34, 34, 0.5) !important;*/
     background-color: rgba(125, 171, 202, 0.58) !important;
     padding: 5px 10px;
     /*border-radius: 7px 0 0 7px !important;*/
     /*border: 1px solid aliceblue;*/
     color: black;
     font-size: small;
 }

 .olControlLayerSwitcher .maximizeDiv {
     width: 24px !important;
     height: 24px !important;
 }

 .olPopup {
     /*background-color: rgba(34, 34, 34, 0.5) !important;*/
     background-color: rgba(125, 171, 202, 0.58) !important;
     padding: 5px 10px;
     /*border-radius: 7px !important;*/
     border: 1px solid aliceblue;
     height: auto !important;
     min-width: 350px;
 }

 .olPopupContent {
     width: 100% !important;
     margin-top: 10px;
     height: auto !important;
 }

 .ctrl_block {
     background-color: rgba(256, 256, 256, 0.9);
     /*border-radius: 7px;*/
     padding: 6px;
     width: 100%;
 }

 .ctrl_list {
     overflow-y: auto;
     max-height: 100px;
 }

 .olPopupCloseBox {
     background: none !important;
     border: 1px solid #3d80b3;
     /*border-radius: 3px;*/
     padding: 8px;
     right: 0 !important;
     top: 3px !important;
 }

 .olPopupCloseBox:hover {
     /*border: 1px solid #4bacfe;*/
     border: 1px solid aliceblue;
 }

 .olPopupCloseBox:before,
 .olPopupCloseBox:after {
     position: absolute;
     left: 7px;
     content: ' ';
     height: 14px;
     width: 2px;
     background-color: #3d80b3;
     top: 1px;
 }

 .olPopupCloseBox:before {
     transform: rotate(45deg);
 }

 .olPopupCloseBox:after {
     transform: rotate(-45deg);
 }

 .olPopupCloseBox:hover:before,
 .olPopupCloseBox:hover:after {
     background-color: aliceblue;
 }

 .dialog-emptying-trash {
     display: none;
 }

 .dialog-emptying-trash form {
     margin: 15px 0;
 }

 .list_calendar_emptying_trash {
     /*text-align: center;*/
     width: 100%;
     max-height: 300px;
     height: 300px;
     overflow-y: auto;
     overflow-x: hidden;
     margin: 10px 0;
     border-top: 1px solid #cdcdcd;
     border-bottom: 1px solid #cdcdcd;
 }

 .list_calendar_emptying_trash p {
     width: 100%;
     font-size: 14px;
     margin: 3px 5px;
     padding: 5px 5px;
 }

 .list_calendar_emptying_trash p:not(:last-child) {
     border-bottom: 1px solid #cdcdcd;
 }

 .switcher_layers {
     border: 1px solid aliceblue;
     width: 24px;
     height: 24px;
     background: rgba(125, 171, 202, 0.58);
     /*border-radius: 5px 0 0 5px;*/
 }

 .switcher_layers:before,
 .switcher_layers:after {
     position: absolute;
     left: 7px;
     content: ' ';
     height: 11px;
     width: 7px;
     border: 1px solid rgba(125, 171, 202, 0.85);
     top: -1px;
     -webkit-transform: skew(30deg);
     -moz-transform: skew(30deg);
     -o-transform: skew(30deg);
     transform: skew(30deg);
 }

 .switcher_layers:before {
     transform: rotate(90deg);
     margin-top: 8px;
     background-color: #dedde5;
 }

 .switcher_layers:after {
     margin-top: 4px;
     margin-left: 3px;
     transform: rotate(-90deg);
     background-color: white;
 }

 .ctrl_list>p {
     margin-bottom: 5px;
     display: flex;
     /*align-items: baseline;*/
     align-items: end;
 }

 p img {
     margin-right: 5px;
 }

 a.a-object {
     color: black;
     /*text-decoration: none;*/
     text-decoration: solid underline black 2px;
     cursor: pointer;
 }

 /****************************************/

 /*.fa-menu{
    position:relative;
    display:table-cell !important;
    width:40px;
    height:36px;
    text-align:center;
    vertical-align:middle;
    font-size:18px !important;
    font-weight: bold !important; 
}
.main-menu:hover,nav.main-menu.expanded{width:250px;overflow:visible}
.main-menu{
    background:#fff;
    border-right:1px solid #cdcdcd;
    position:fixed;
    top:40px;
    bottom:20px;
    height:calc(100% - 40px);
    min-height: 680px;
    left:0;
    width:40px;
    overflow:hidden;
    -webkit-transition:width .05s linear;
    transition:width .05s linear;
    -webkit-transform:translateZ(0) scale(1,1);
    z-index:99;
}
.main-menu>ul{
    margin:7px 0;
    margin-top: 12px;
}
.main-menu li{
    position:relative;
    display:block;
    width:250px;
    padding-top: 15px;
}
.main-menu li>div, .main-menu li>a{
    position:relative;
    display:table;
    border-collapse:collapse;
    border-spacing:0;
    color:#000000;
    
    font-size:14px;
    text-decoration:none;
    -webkit-transform:translateZ(0) scale(1,1);
    -webkit-transition:all .1s linear;
    transition:all .1s linear
}
.main-menu .nav-icon{position:relative;display:table-cell;width:60px;text-align:center;vertical-align:middle;font-size:14px}
.main-menu .nav-text{
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:190px;
}
.fa-nav-text {
    position: relative;
    padding-top: 10px;
}
.main-menu>ul.logout{position:absolute;left:0;bottom:0}
nav{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}
nav ul,nav li{
    outline:0;
    margin:0;
    padding:0
}
.main-menu li:hover>div,
nav.main-menu li.active>div,
nav.main-menu li.active>a{
    color:#4bacfe;
    cursor: pointer;
}*/

 /***  General blocks ****/
 .main-section {
     /*height: auto;*/
     align-items: flex-start;
 }

 .parent-aside-block {
     margin: 50px 10px 0 50px;
     width: 300px;
 }

 .aside-block {
     position: fixed;
     width: inherit;
 }

 .main-block-part {
     margin: 10px 10px 0 0;
     padding: 1em;
 }

 .top-block-part {
     margin-top: 50px !important;
 }

 .main-block {
     min-width: 0;
 }

 .flex-row-wrap {
     display: flex;
     flex-flow: row wrap;
 }

 .flex-1 {
     flex: 1;
 }

 .flex-2 {
     flex: 2;
 }

 .flex-3 {
     flex: 3;
 }

 .flex-4 {
     flex: 4;
 }

 .flex-5 {
     flex: 5;
 }

 .flex-6 {
     flex: 6;
 }

 .flex-row {
     display: flex;
     flex-direction: row;
 }

 .flex-row-btn {
     margin: 4px 0;
 }

 .aside-title {
     width: 25px;
 }

 .aside-block h2 {
     margin-bottom: 10px;
     text-transform: uppercase;
     font-size: 25px;
     word-wrap: break-word;
 }

 .aside-block div {
     margin-top: 10px;
 }

 .aside-block span {
     text-transform: uppercase;
     word-wrap: break-word;
 }


 .main-block-part,
 .aside-block,
 .table-section,
 .role-section,
 .category-section,
 .map-block,
 .rid-section,
 .video-block,
 .smarthousecamera-section {
     /*border-radius:10px;*/
     /* box-shadow: 0px 3px 3px #808080;*/
     border: #E5E5E5 solid 1px;
     padding: 20px;
     background: #fff;
     border: 1px solid #cdcdcd;
     /*
    -webkit-box-shadow:0px 3px 3px #808080;
    -khtml-box-shadow:0px 3px 3px #808080;
    -moz-box-shadow:0px 3px 3px #808080;
    -ms-box-shadow:0px 3px 3px #808080;
    */
 }

 .map-block,
 .video-block {
     padding: 0;
     margin: 10px 10px 0 50px;
 }

 .smarthousecamera-section {
     padding: 10px;
     margin: 10px 50px;
 }

 .map-block-dialog {
     margin-top: 15px;
     padding: 0px;
 }

 .map-sidebar {
     /*border: solid 1px #0070a3;*/
     padding: 0 0 5px 0;
     margin-right: 5px;
     /*  padding-top: 0;*/
     overflow-y: auto;
     height: calc(100vh - 300px);
     /*display: inline-block;*/
 }

 .map-result {
     font-size: 0.8em;
     margin: 5px;
     margin-top: 0px;
     margin-right: 0px;
     padding: 4px 8px;
     border-radius: 2px;
     background: #F0F7FF;
     border: 2px solid #D7E7FF;
     cursor: pointer;
     min-height: 5em;
 }

 .map-result.highlight {
     background-color: #D9E7F7;
     border-color: #9DB9E4;
 }

 .map-result.highlight .details {
     margin: 5px auto;
     display: block;
     max-width: 10em;
     padding: 4px;
     text-align: center;
     background: #F0F7FF;
     border: 2px solid #9DB9E4;
     border-radius: 2px;
 }

 .map-result .type {
     color: gray;
     font-size: 0.8em;
 }

 .map-result .details {
     display: none;
 }

 .map-result .coords {
     display: none;
 }

 .map-noresults {
     text-align: center;
     padding: 1em;
 }

 .m-style>div.ol-viewport,
 .m-style>div#OpenLayers_Map_2_OpenLayers_ViewPort {
     height: calc(100vh - 80px) !important;
     min-height: calc(100vh - 80px) !important;
 }

 /*#OpenLayers_Map_2_OpenLayers_ViewPort{
  height: calc(100% - 80px) !important;
  min-height: calc(100vh - 80px) !important;
}*/
 .map-legenda {
     /*background-color: rgba(125, 171, 202, 0.58);*/
     padding: 2px 17px;
     border: 1px solid #9eb9cb;
 }

 .map-legenda>p {
     margin-top: 1px;
 }

 .mapdiv-box>div {
     /*height: 721px;*/
     height: calc(100% - 101px) !important;
     min-height: calc(100vh - 101px) !important;
     width: 100%;
 }

 #div_map_obj>div {
     height: calc(100% - 300px) !important;
     min-height: calc(100vh - 300px) !important;
 }

 /*height: calc(100vh/2) !important;*/
 /*.newViewPort{
  height: calc(100vh/2) !important;
  min-height: calc(100vh) !important;
}*/

 .button-in-map {
     border: 1px solid #b6b6b6;
     padding: 3px 3px;
     background: #efefef;
     border-radius: 1px;
 }

 .page-content .breadcrumbs {
     box-shadow: none;
 }

 .wrapping-blocks {
     margin: 10px 0 0 50px;
     /*    width: calc(100vw - 50px);*/
     width: calc(100% - 50px)
 }

 .main-block-part .hidden-content {
     margin-top: 12px;
     display: none;
     padding: 20px;
 }

 .slider-header {
     cursor: pointer;
     display: inline;
     font-size: 16px;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .slider-header:hover,
 .main-block-title .edit-block-btn:hover,
 .hide-btn:hover,
 .generate-block-btn:hover,
 .hide-button:hover,
 .spin-block-btn:hover {
     color: #4bacfe;
 }

 .edit-block-btn,
 .hide-btn,
 .hide-button {
     float: right;
     cursor: pointer;
     margin-right: 20px;
     transform: scale(1.4);
 }

 .hide-btn,
 .edit-block-btn,
 .hide-button,
 .input-pass,
 .status-pass {
     display: none;
 }

 .block-btn {
     float: right;
 }

 .fa.generate-block-btn,
 .fa.spin-block-btn {
     display: none;
     cursor: pointer;
     float: right;
     margin-top: 2px;
 }

 .edit-block-btn.show,
 .hide-btn.show,
 .fa.generate-block-btn.show,
 .hide-button.show,
 .fa.spin-block-btn.show,
 .input-pass.show,
 .status-pass.show {
     display: block;
 }

 .fa-chevron-right {
     margin-right: 5px;
     transition-property: transform;
     transition-duration: .2s;
 }

 .slider-header.slider-open .fa-chevron-right {
     transform: rotate(90deg);
 }

 .slider-header .fa-chevron-right {
     transform: rotate(0deg);
 }

 .hidden-content input[readonly],
 .hidden-content textarea[readonly],
 .hidden-content select[disabled] {
     background-color: white;
     border: 0;
 }

 .hidden-content input[disabled] {
     outline: 1px solid black;
 }

 .hidden-content textarea {
     resize: none;
     width: 100%;
 }

 /*.hidden-content select[disabled]::-ms-expand {	display: none; }
.hidden-content select[disabled]{
    -webkit-appearance: none;
    appearance: none;
    color: black;
    padding: 0;
}*/
 .hidden-content select[disabled]::-ms-expand {
     display: none;
 }

 .hidden-content select[disabled] {
     -webkit-appearance: none;
     appearance: none;
     color: black;
     padding-left: 3px;
 }

 input[type=number][readonly]::-webkit-outer-spin-button,
 input[type=number][readonly]::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 input[type=number][readonly] {
     -moz-appearance: textfield;
     /* Firefox */
 }

 /*breadcrumbs*/

 .breadcrumbs {
     display: inline-block;
     counter-reset: flag;
     color: black;
     box-shadow: 0 0 2px #aaa;
     font-size: 13px;
     position: fixed;
     top: 0;
     left: 0;
     width: inherit;
     z-index: 1005;
     /*z-index: 99;*/
 }

 .noaccess-breadcrumbs {
     font-size: 18px;
     height: 40px;
     width: 100%;
     z-index: 1005;
     position: fixed;
     color: black;
     background-color: #7cc3ff;
     text-align: center;
 }

 .noaccess-breadcrumbs h4 {
     margin-left: 50px;
     margin-top: 10px;
 }

 .breadcrumbs a {
     position: relative;
     float: left;
     padding-left: 50px;
     padding-right: 10px;
     text-decoration: none;
     line-height: 40px;
     color: black;
     background: white;
     transition: all 0.5s;
 }

 .breadcrumbs a::after {
     content: '';
     position: absolute;
     top: 0;
     right: -20px;
     z-index: 1;
     width: 40px;
     height: 39px;
     background: white;
     box-shadow: 1px 1px 0 0 #cdcdcd;
     border-radius: 50px 0 0 0;
     transform: rotate(-45deg) scale(0.73);
     transition: all 0.5s;
 }

 .breadcrumbs a:hover,
 .breadcrumbs a:hover::after,
 .breadcrumbs a.active-page,
 .breadcrumbs a.active-page::after {
     background: #ed7023;
     color: white;
     /* background: #f1c40f;*/
     /* background: #aaa;*/
 }

 .breadcrumbs a:first-child {
     /* background:
     linear-gradient(
       to right,
       #4bacfe 0%,
       #4bacfe 5px,
       #c8e9ff
     );*/
     background-color: #7cc3ff;
     font-size: 15px;
     padding-left: 15px;
 }

 .breadcrumbs a:first-child::after {
     width: 24px;
     background-color: #7cc3ff;
     padding-left: 15px;
 }

 .breadcrumbs a:first-child:hover {
     color: black;
     /*text-decoration: underline; */
     text-shadow: 1px 0px 0px #000;
 }

 .addtype-block.edit-show {
     display: block;
 }

 .addtype-block {
     display: none;
 }

 /*DataTables*/
 div.dataTables_scrollHeadInner table

 /*, .dataTables_scrollHeadInner*/
     {
     width: 100% !important;
 }


 .dataTables_scroll {
     position: relative
 }

 /*.dataTables_scrollHead{
  margin-bottom:32px;
}*/
 /*table.dataTable thead th, table.dataTable thead td {
  border-bottom: 0px;
}*/
 table.dataTable tfoot {
     background-color: #ddd;
 }

 .dataTables_scrollFoot {
     position: absolute;
     top: 38px
 }


 /*Main parts*/
 .table-section,
 .edit-role-section {
     margin: 10px 10px 0 50px;
     width: calc(100% - 60px);
 }

 .role-section {
     padding-right: 20px;
     min-width: 0;
 }

 .category-section {
     max-width: 50%;
     margin-left: 10px;
     padding-left: 20px;
     display: none;
     transition: .2s;
 }

 .category-section.show,
 #refcategories-tree-err.show,
 #refcategories-tree.show {
     display: block;
 }

 #refcategories-tree-err.hide,
 #refcategories-tree.hide {
     display: none;
 }

 .category-section ul {
     padding-left: 20px;
 }

 .save-roles {
     float: right;
     margin: 0;
     margin-top: 20px;
 }

 .search-block .buttonorange {
     margin: 0;
 }

 .search-block {
     background-color: #ddd;
     margin-top: 20px;
     padding: 10px;
     display: none;
 }

 .search-block.show {
     display: block;
 }

 .jstree-proton .jstree-search {
     /*background-color:#ed7023 !important;  
    color: black !important; */
     color: #2779aa !important;
     border: 1px solid #2779aa;
     font-style: normal;
     font-weight: normal;

 }

 .search-input {
     padding-top: 2px;
     margin-right: 5px;
 }

 .header-search {
     overflow: hidden;
     margin: 15px 0;
 }

 .role-name {
     margin-left: 5px;
     margin-top: 1px;
 }

 .functionalrole_client,
 .objectroles_type {
     margin-bottom: 20px;
 }

 .select-header {
     text-align: center;
     margin-bottom: 5px;
     font-size: 16px;
     /*text-transform: uppercase;*/
 }

 .role-list {
     overflow-y: auto;
     margin-top: 20px;
     border: 1px solid grey;
     /*    min-height: 200px;
    max-height: calc(100vh - 200px);*/
     /*height: calc(100vh - 200px);*/
     height: calc(100vh - 217px);
 }

 .allwinheight {
     min-height: calc(100vh - 25px);
 }

 /*Form elements*/
 input,
 select,
 textarea {
     display: block;
     padding: 3px;
     width: 100%;
     border: 1px solid grey;
     /*border-radius: 5px;*/
     /*font-family: Roboto, Arial, sans-serif;*/
     font-size: 14px;
     /* color: #6C6C6C;*/
     transition: border-color 0.4s ease-out;
 }

 input:focus,
 input:hover,
 textarea:focus,
 textarea:hover,
 select:hover,
 select:focus {
     outline: none;
     border-color: black;
 }

 select {
     background-color: white;
 }

 input[type="checkbox"] {
     display: none
 }

 input[type="checkbox"]:checked+label {
     background: #787A77;
     border-color: #787A77;
 }

 input[type="checkbox"]:checked+label:after {
     transform: scale(1.3);
 }

 input[type="checkbox"]~label {
     display: block;
     box-sizing: border-box;
     width: 18px;
     height: 18px;
     /* background:#CCC;*/
     border: 1px solid grey;
     border-radius: 10%;
     position: relative;
     cursor: pointer;
     transition: .2s;
     margin-left: 5px;
     margin-top: 3px;
 }

 input[type="checkbox"]~label:before {
     content: '';
     position: absolute;
     display: block;
     height: 300%;
     width: 300%;
     top: -100%;
     left: -100%;
     z-index: -1;
     border-radius: 50%;
     transition: .3s
 }

 input[type="checkbox"]~label:after {
     content: '';
     display: block;
     height: 100%;
     width: 100%;
     background: url(../images/check.png) center center no-repeat;
     background-size: contain;
     transform: scale(0);
     transition: .2s
 }

 input[type="checkbox"]~label:active:before {
     background: #bfbfbf
 }

 textarea {
     resize: none;
 }

 select option {
     font-weight: normal;
 }

 .ui-dialog.ui-widget-content,
 .ui-dialog .ui-dialog-content,
 .ui-dialog-buttonpane.ui-widget-content {
     background: white !important;
     border: 0 !important;
     font-family: Roboto, Arial, sans-serif !important;
 }

 .ui-dialog.ui-widget-content {
     border: 1px solid #cdcdcd !important;
 }

 .ui-widget button {
     font-family: Roboto, Arial, sans-serif !important;
 }

 .dataTables_wrapper .dataTables_filter input {
     margin-left: 0 !important;
 }

 .dataTables_wrapper .dataTables_length {
     margin: 15px 0 !important;
 }

 /*----------------------------*/
 /*tr.selected{
  background-color: #B0BED9 !important;
  background-blend-mode: multiply !important;
}*/
 /*.sub_table{
  margin: -4px;
  padding: 20px 30px 20px 30px;
  background-color: #c8e9ff;
}
tr.selected{
  background-color: #B0BED9 !important;
}
.dataTables_wrapper .dt-buttons {
  float:none;  
  text-align:center;
}*/
 .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody #emergency_table>tbody>tr>td {
     padding-right: 30px;
 }

 /*td.comments-details-control {
  background: url('./../images/comments.png') no-repeat center center;
  cursor: pointer;
  width: 20px !important;
}*/
 /*#dialogmessage, #dialogquestion {
  padding-top: 12px;
}*/
 /*----------------------------*/
 /*
.ui-dialog .ui-dialog-titlebar {
    display:none;
}*/
 form .flex-row {
     margin: 4px 0;
 }

 #dialogmessage {
     text-align: center;
 }

 .dataTables_length select {
     display: inline-block;
     width: auto;
 }

 #clients_table a,
 #usersclient_table a {
     text-decoration: underline;
 }

 .attribute-name {
     font-size: 14px;
     /*background-color:#eee;*/
     background-color: #ddd;
     border: 1px solid #cdcdcd;
     /*color: #444;*/
     padding: 3px;
     text-transform: uppercase;
 }

 .attribute-value {
     border-bottom: 1px solid #cdcdcd;
 }

 .flex-verticalalign {
     align-items: flex-end;
     justify-content: center;
 }

 .flex-verticalalign .attribute-value {
     padding: 3px 0;
 }

 .flex-verticalalign .attribute-value.padbot-12 {
     padding-bottom: 12px;
 }

 /*UI dialog*/
 .ui-corner-all,
 .ui-corner-top,
 .ui-corner-left,
 .ui-corner-tl {
     border-radius: 0 !important;
 }

 .ui-widget-overlay.ui-front {
     background: none;
     background-color: grey;
     opacity: 0.7;
     z-index: 1006;
 }

 .ui-dialog-titlebar.ui-widget-header {
     background: none;
     border: 0;
     /*background-color: #c8e9ff;*/
 }

 #dialogquestion {
     text-align: center;
     font-size: 18px;
 }

 /*Lists*/
 .btn-list-del {
     /*background-color: grey;*/
     background-color: #4bacfe;
     padding: 5px 8px;
 }

 .btn-list-add {
     background-color: #ed7023;
     padding: 5px 8px;
     cursor: pointer;
 }

 .btn-list-params {
     background-color: #ed7023;
     cursor: pointer;
     padding: 5px 8px;
     float: right;
 }

 .btn-list-params .fa-map-marker {
     padding: 0 1.5px;
 }

 .btn-list-del .fa-minus {
     visibility: hidden;
 }

 .btn-list-del.edit-show .fa-minus {
     visibility: visible;
 }

 .btn-list-del.edit-show {
     cursor: pointer;
 }

 .list-val {
     background-color: #ddd;
     padding: 4px;
     border: 1px solid #cdcdcd;
 }

 .btn-add,
 .btn-del {
     /* background-color:#ed7023;
    padding: 5px 8px;*/
 }

 .list-head {
     background-color: #ddd;
     border: 1px solid #cdcdcd;
     padding: 5px 8px 5px 30px;
 }

 .list-item {
     border: 1px solid #cdcdcd;
     padding: 3px;
     background-color: white;
 }

 .fa.fa-language.icon-transl {
     float: right;
     padding-right: 5px;
     cursor: pointer;
     font-size: 16px !important;
     display: none;
 }

 .icon-transl:hover {
     color: #4bacfe;
 }

 .add-transl-block {
     display: none;
     margin-top: 20px;
 }

 .add-transl-block h3 {
     padding-top: 2px;
     text-transform: uppercase;
     margin-left: 10px;
 }

 .add-transl-block .fa-minus {
     visibility: visible;
 }

 .lang-pattern {
     display: none;
 }

 /*li .flex-row{
    margin: 0;
}*/
 .lang-part {
     margin: 10px 0;
     background-color: #ddd;
     border: 1px solid #cdcdcd;
 }

 .lang-part .flex-row {
     margin: 0;
 }

 .lang-part input {
     height: 27px;
 }

 li .transl-name-wrapper {
     padding-left: 8px;
 }

 .transl-name {
     margin-left: 40px;
     font-size: 14px;
     border-top: 2px solid #cdcdcd;
     padding: 3px;
     text-transform: uppercase;
 }

 .transl-name-top {
     margin-left: 23px;
     padding-top: 5px;
     text-transform: uppercase;
 }

 ul .btn-list-del {
     /*margin-left: -8px;*/
     cursor: pointer;
 }

 .transl-name-wrapper .btn-list-del {
     margin-left: -8px;
     height: 27px;
 }

 /*Search block*/
 .add-transl-block.show,
 .fa.fa-language.icon-transl.show {
     display: block;
 }

 .err {
     color: #ec1717;
     /*color: red;*/
     /*vertical-align: super;*/
 }

 .err_text {
     font-size: 12px;
     font-style: italic;

 }

 .header-search:after {
     margin-right: -100%;
 }

 .header-search:after {
     content: '';
     display: inline-block;
     vertical-align: middle;
     box-sizing: border-box;
     width: 100%;
     height: 1px;
     background: grey;
     border: solid #FFF;
     border-width: 0 10px;
 }

 .td-center {
     margin: auto !important;
     text-align: -webkit-center;
     text-align: -moz-center;
 }

 .color_btn {
     height: 20px;
     width: 60px;
     margin: 3px;
 }

 /*Refparameters*/
 .parameter_group_hide {
     display: none;
     min-width: 0;
     min-height: 0;
 }

 .setparam-outgroup,
 .arrows-block {
     display: none;
     min-width: 0;
 }

 .setparam-outgroup.show,
 .arrows-block.show {
     display: block;
 }

 .setparam-ingroup {
     margin-right: 10px;
     min-width: 0;
 }

 .setparam-ingroup,
 .setparam-outgroup {
     padding: 10px;

 }

 .arrows-block {
     width: 70px;
     border-right: 1px solid black;
     border-left: 1px solid black;
 }

 .arrows-block div {
     top: 40%;
     position: relative;
     text-align: center;
     width: 30px;
     margin: 10px auto;
     cursor: pointer;
 }

 .arrows-block div:hover {
     color: #4bacfe;
 }

 .setparam-header {
     text-align: center;
     text-transform: uppercase;
     border-top: 1px solid gray;
     border-bottom: 1px solid gray;
     padding: 3px;
     /*font-weight: normal;*/
     margin-bottom: 10px;
 }

 .transl-err-msg {
     margin-bottom: 2px;
     padding-left: 30px;
     font-size: 12px;
     font-style: italic;
     margin-top: -5px;
     color: #bf2a2a;
     display: block;
 }

 .err-msg {
     background-color: #ddd;
     display: block;
     color: #bf2a2a;
     font-size: 12px;
     font-style: italic;
 }

 /*.link{
    position: fixed;
    
}*/

 td.comments-details-control,
 td.detalization {
     background: url('./../images/comments.png') no-repeat center center;
     cursor: pointer;
     width: 20px !important;
 }

 .thead-th,
 .thead-td {
     word-wrap: normal;
 }

 /*Graphics*/
 .btn-filter-flex {
     margin: 0;
 }

 .filter-block .flex-5,
 .graphics-pattern-block .flex-5 {
     margin: 0 40px;
 }

 .graphics-pattern-block {
     margin-top: 10px;
 }

 .pattern-btn-block>div:not(:last-child) {
     margin-right: 10px;
 }

 #graphics-condition {
     list-style-type: square;
 }

 #graphics-condition li {
     margin-left: 12px;
 }

 .graphics-info {
     border-top: 1px solid grey;
     padding-top: 30px;
     margin-top: 30px;
 }

 .graphics-info-block-btn>div {
     margin-right: 10px;
 }

 .graphics-info-block-btn {
     margin-bottom: 20px;
 }

 .graphics-chart-block-btn {
     margin-bottom: 20px;
 }

 .graphics-info-block-date,
 .logemergency-filter-block,
 .reports-filter-block {
     margin-top: 20px;
 }

 .graphics-info-block-date .flex-row,
 .logemergency-filter-block .flex-row,
 .btn-margin,
 .reports-filter-block .flex-row {
     margin-right: 40px;
 }

 .graphics-info-block-date input,
 .logemergency-filter-block input,
 .reports-filter-block input {
     height: 27px;
 }

 .reports-filter-block {
     margin-bottom: 20px;
 }

 .equipmentmanagement-info-block-btn>div {
     margin-right: 10px;
 }

 .equipmentmanagement-info-block-btn {
     margin-top: 20px;
     margin-bottom: 20px;
 }

 #equipment_management_table .fa-star {
     font-size: 18px;
     cursor: pointer;
     color: darkgrey;
 }

 #equipment_management_table .favourite {
     color: orange;
 }

 .logemergency-filter-block .btn-logemergency,
 .reports-filter-block .btn-reports,
 .devices-filter-block .btn-devices {
     margin: 0;
     margin-right: 5px;
 }

 #logemergency_table_wrapper .dt-buttons {
     display: none;
 }

 .table-serching-row {
     background-color: #ddd;
 }

 #graphicsfilter-tree {
     /* max-height: 300px;*/
     min-height: 300px;
     border: 1px solid grey;
     overflow: auto;
     padding: 10px 25px;
 }

 #refcategories-tree,
 #refcategories-tree-err {
     max-height: calc(100vh - 25px);
     min-height: 300px;
     border: 1px solid grey;
     overflow: auto;
     padding: 10px 25px;
 }

 /*Справочник объектов*/
 .block-obj-categ {
     padding: 4px 15px;

 }

 .block-obj-categ-tree {
     height: 200px;
     min-height: 200px;
     overflow-y: auto;
 }

 .hidden_field {
     display: none;
 }

 .stick-to-bottom {
     margin-top: 15px;
 }

 /*jstree*/
 /*
.jstree-proton .jstree-hovered{
    background: white !important;
    color: black !important;
    box-shadow: none !important;
}
*/
 .edit-category-btn {
     cursor: pointer;
     margin-left: 20px;
     float: right;
 }

 .edit-disabled-li {
     pointer-events: none;
     opacity: 0.6;
 }

 .list-input {
     padding: 5px;
 }

 .form-edit {
     position: relative;
     top: 15px;
 }

 label.cent {
     margin-left: 35% !important;
 }

 .dialog-filter {
     max-height: 300px;
     min-height: 300px;
     border: 1px solid grey;
     overflow: auto;
     padding: 10px 25px;
 }

 .td-flt {
     display: none;
 }


 .label-div {
     margin-left: 20px;
     width: max-content;
 }

 .dataLayersDiv>label.labelSpan::after {
     /*width: 100% !important;*/
     top: -100%;
     /*border:1px solid red;*/
     position: relative;



 }

 .no_checkbox>i.jstree-checkbox {
     display: none;
 }

 #logs_table td {
     white-space: pre-wrap;
 }

 .logemergency-filter-block {
     margin-top: 20px;
 }

 .logemergency-filter-block .flex-row,
 .btn-margin,
 .reports-filter-block .flex-row,
 .route-date-block {
     margin-right: 30px;
 }

 .logemergency-filter-block input {
     height: 27px;
 }

 .logemergency-filter-block .btn-logemergency {
     margin: 0;
     margin-right: 5px;
 }

 .logvideoanalytics-filter-block,
 .lognotification-filter-block {
     margin-top: 20px;
 }

 .logvideoanalytics-filter-block .flex-row,
 .lognotification-filter-block .flex-row,
 .btn-margin,
 .reports-filter-block .flex-row,
 .route-date-block {
     margin-right: 30px;
 }

 .logvideoanalytics-filter-block input,
 .lognotification-filter-block input,
 select {
     height: 27px;
 }

 .logvideoanalytics-filter-block .btn-logemergency {
     margin: 0;
     margin-right: 5px;
 }

 .lognotification-filter-block .btn-lognotification {
     margin: 0;
 }

 /*List of filter*/
 .check-paragraph label {
     clear: both;
 }

 .check-paragraph label {
     float: left;
 }

 .check-paragraph span {
     display: inline-block;
     padding-top: 2px;
     margin-left: 10px;
     height: 22px;
 }

 #logemergency_displayingfield,
 #data_displayingfield {
     overflow: hidden;
 }

 /*Журнал обмена данными*/
 #logdataexchange_table_wrapper {
     margin-top: 40px;
 }

 .tabl_data {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 190px;
 }

 .fix-height {
     height: 27px;
 }

 #node_path_logemergency {
     text-align: center;
 }

 div.msg_no_access {
     height: 40em;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 div.msg_no_access p {
     margin: 0
 }

 .input-with-button {
     width: calc(100% - 27px);
 }

 .div-input-with-button {
     display: inline-flex;
 }

 .aside-descr {
     word-break: break-word;
 }

 .global_item {
     background-color: #F5F5F5;
 }

 #raw-data-date {
     padding: 5px 0 0 10px;
     font-size: 16px;
 }

 #parameter-data-date {
     padding: 5px 0 0 10px;
     font-size: 16px;
 }

 .attribute-value-tree {
     overflow: auto;
     height: 200px;
 }

 .div-params-calc {
     display: none;
 }

 .up-letter {
     text-transform: uppercase;
 }

 .attr-sysname {
     line-height: 25px;
     padding: 5px;
 }

 .parameter_setting_wrapper {
     height: 450px;
     overflow: auto;
     /*border: 1px solid #cdcdcd;*/

 }

 .param_set_heading {
     text-transform: uppercase;
     margin: 20px 0;
     text-align: center;
     border-top: 1px solid gray;
     border-bottom: 1px solid gray;
 }

 #nomemclator_block {
     display: none;
 }

 .first-block {
     width: 180px;
 }

 .filter-block .attribute-name,
 .graphics-pattern-block .attribute-name {
     max-width: 215px;
 }

 .power {
     color: #ed7023;
 }

 #menu_logout a:hover {
     color: #4bacfe;
 }

 .select-input-block .ui-state-default {
     color: black;
     background: none;
     border: 1px solid grey;
 }

 .select-input-block input:hover {
     border: 1px solid black;
 }

 .select-input-block .custom-combobox {
     display: flex;
 }

 .select-input-block a.ui-button {
     color: black;
     border-radius: 0;
     background: none;
     border: 1px solid grey;
     border-left: 0;
     padding: 0;
     margin: 0;
 }

 .select-input-block #combobox {
     display: none;
     background: none;
 }

 .ui-widget-content.ui-autocomplete {
     background: white;
     border: 1px solid grey;
     font-size: 14px;
 }

 .select-input-block .ui-state-default {
     font-weight: normal;
     font-family: Roboto, Arial, sans-serif;
     font-size: 14px;
 }

 .ui-widget-content.ui-autocomplete div:hover {
     background: #1e90ff;
     font-weight: normal;
 }

 .select-input-block .ui-button .ui-icon {
     background: url("../images/icon-3-points.png") center center no-repeat;
 }

 .noaccess-infoblock {
     background-color: white;
     padding: 50px 80px;
     border: 1px solid #cdcdcd;
     text-align: center;
     font-size: 18px;
     margin-top: 50px;
 }

 .noaccess-infoblock img {
     margin-bottom: 20px;
 }

 .block-error {
     text-align: center;
     margin-top: 30px;
     color: #ec1717;
 }

 .device-emerg {
     padding-left: 5px;
     cursor: pointer;
     color: red;

 }

 .device-section {
     margin: 10px 0px 0 0px;
     width: 100%;
     padding: 10px;
     background: #fff;
     border: 1px solid #cdcdcd;
 }

 .device-list-selection {
     color: white;
     background-color: #2694e8;
     padding: 3px;
     cursor: pointer;
 }

 .device-btn-active {
     background-color: #ffef8f;
     color: #000000;
     border-top: 1px solid #757272ee;
     border-left: 1px solid #757272ee;
     border-right: 1px solid #c4c4c4;
     border-bottom: 1px solid #c4c4c4;
 }

 .device-menu {
     font-size: 12px;
 }

 .device-aside-descr {
     font-size: 20px;
 }

 input.readonly-white {
     background-color: white;
     border: 0;
     cursor: pointer;
 }

 input.readonly-text {
     cursor: default;
 }

 .custom-combobox-input {
     height: 27px;
 }

 .flexbox-text-center {
     text-align: center;
 }

 .p-text-verticalalign {
     height: 27px;
     line-height: 27px;
     padding-left: 5px;
 }

 .device-label-center {
     text-align: center;
 }

 .device_filter {
     margin-top: 10px;
     padding-top: 10px;
     padding-bottom: 10px;
     border-bottom: 1px solid #ddd;
     border-top: 1px solid #ddd;
 }

 .device-datepicker-hidden {
     display: none;
 }

 .device-h3 {
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 18px;
     font-weight: bold;
 }

 .device-button {
     padding: 3px 0px 0px 0px;
 }

 button.ui-corner-all:focus {
     outline: none !important;
 }

 .without-background {
     background: none;
     border: none;
 }

 .readonly-form .err_star_edit,
 .err.err_text.hide,
 .readonly-form #star_group_num {
     display: none;
 }

 td.device-details-control {
     background: url(/images/icons/info.png) no-repeat center center;
     cursor: pointer;
     width: 30px;
     min-width: 30px;
     height: 30px;
     margin: auto !important;
     text-align: -webkit-center;
     text-align: -moz-center;

 }

 tr.shown td.device-details-control {
     background: url(/images/icons/minus.png) no-repeat center center;
 }

 td.device-edit {
     /* background: url(/images/icons/edit.png) no-repeat center center;*/
     cursor: pointer;
     height: 30px;
     width: 30px;
     margin: auto !important;
     text-align: -webkit-center;
     text-align: -moz-center;
 }

 td.device-del {
     /*    background: url(/images/icons/del.png) no-repeat center center;*/
     cursor: pointer;
     height: 30px;
     width: 30px;
     margin: auto !important;
     text-align: -webkit-center;
     text-align: -moz-center;
 }

 td.device-change {
     /*background: url(/images/icons/change.png) no-repeat center center;*/
     cursor: pointer;
     height: 30px;
     width: 30px;
     text-align: center;
     margin: auto !important;
     text-align: -webkit-center;
     text-align: -moz-center;
 }

 div.action_btn_cell {
     cursor: pointer;
     float: left;
     position: relative;
     padding: 4px 4px 0 4px;
 }

 div.action_btn_cell:hover {
     transition: all .3s ease;
     background-color: #C5C5C6;
     opacity: 1;
 }

 .device-select {
     padding-bottom: 4px;
 }

 .device-filter-block {
     margin-top: 20px;
 }

 p .file-input {
     width: auto;
     background: none;
     border: none;
     padding: 0;
     margin-top: -3px;
 }

 #upload_info_table {
     border-collapse: collapse;
     margin: auto;
     text-align: center;
     margin-bottom: 20px;
 }

 #upload_info_table td {
     padding: 3px;
     border: 1px solid black;
 }

 #upload_info_block {
     overflow: auto;
 }

 #parse_summary {
     font-weight: bold;
     letter-spacing: 0.5px;
 }

 .nod_path_text {
     height: 11px;
     padding-left: 10px;
     margin-top: 5px;
 }

 #global_table_wrapper .buttons-excel,
 #global_table_wrapper .buttons-pdf,
 #allobj_table_wrapper .buttons-excel,
 #personaluse_table_wrapper .buttons-excel,
 #personaluse_table_wrapper .buttons-pdf,
 #personaluse_table_wrapper .buttons-202,
 #place_table_wrapper .buttons-excel,
 #place_table_wrapper .buttons-pdf,
 #fault_table_wrapper .buttons-excel,
 #fault_table_wrapper .buttons-pdf,
 #garbage_allobj_table_wrapper .buttons-excel,
 #emergencyinobject_table_wrapper .buttons-excel,
 #emergencyinobject_table_wrapper .buttons-pdf,
 #emergencyinobject_table_wrapper .buttons-csv,
 #emerg_table_wrapper .buttons-pdf,
 #emerg_table_wrapper .buttons-excel {
     display: none;
 }

 form select {
     height: 27px;
 }

 .hiddenfile {
     width: 0px;
     height: 0px;
     overflow: hidden;
 }

 #device_placeholder div.xAxis div.tickLabel {
     transform: rotate(-30deg);
     -ms-transform: rotate(-30deg);
     /* IE 9 */
     -moz-transform: rotate(-30deg);
     /* Firefox */
     -webkit-transform: rotate(-30deg);
     /* Safari and Chrome */
     -o-transform: rotate(-30deg);
     /* Opera */
     text-align: center;
     margin-top: 20px;
     margin-bottom: 30px;
     font-size: 10px;
     /*rotation-point:50% 50%;*/
     /* CSS3 */
     /*rotation:270deg;*/
     /* CSS3 */
 }

 .remove-exportfile-icon {
     padding-top: 5px;
     visibility: hidden;
     cursor: pointer;
 }

 .remove-exportfile-icon:hover {
     color: #4bacfe;
 }

 .warning-block {
     border: 1px solid #f04747b3;
     background-color: #f04747b3;
 }

 .warning-block-parts {
     margin: 10px;
 }

 #global_month_del,
 #personal_month_del {
     left: -30px;
     margin-top: 2px;
     z-index: 500;
     position: relative;
     cursor: pointer;
 }

 #global_month,
 #personal_month,
 #input_search {
     padding: 4px;
 }

 .device_month_apply {
     margin-left: -20px;
 }

 .ui-datepicker select.ui-datepicker-month,
 .ui-datepicker select.ui-datepicker-year {
     width: 100% !important;
 }

 .hidden-element {
     display: none;
 }

 .no-visible-element {
     visibility: hidden;
 }

 li>a.jstree-anchor {
     height: auto !important;
 }

 .tree-item-span {
     white-space: break-spaces;
 }

 #block-tree {
     /*    height: 100%;*/
     max-height: 90vh;
     overflow-y: auto;
     overflow-x: hidden;
 }


 input.light-checkbox {
     line-height: 1.5;
     display: block;
     border: 0;
 }

 .wrapper-switch-light {
     margin-top: 20px;
     margin-bottom: 20px;
     text-align: center;
 }

 .light-checkbox {
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 0.75em;
     box-shadow: 0.0625em 0.0625em 0 0.0625em rgba(0, 0, 0, 0.3) inset;
     color: #fdea7b;
     font-size: 5em;
     display: inline-flex;
     align-items: center;
     margin: auto;
     padding: 0.07em;
     width: 1.5em;
     height: 0.75em;
     transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
 }

 .light-checkbox:before,
 .light-checkbox:after {
     content: "";
     display: block;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 .light-checkbox:before {
     background-color: #d7d7d7;
     border-radius: 50%;
     width: 0.6em;
     height: 0.6em;
     transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
     z-index: 1;
 }

 .light-checkbox:after {
     background:
         linear-gradient(transparent 50%, rgba(0, 0, 0, 0.15) 0) 0 50% / 50% 100%,
         repeating-linear-gradient(90deg, #bbb 0, #bbb, #bbb 20%, #999 20%, #999 40%) 0 50% / 50% 100%,
         radial-gradient(circle at 50% 50%, #888 25%, transparent 26%);
     background-repeat: no-repeat;
     border: 0.12em solid transparent;
     border-left: 0.2em solid #d8d8d8;
     border-right: 0 solid transparent;
     transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
     transform: translateX(-22.5%);
     transform-origin: 25% 50%;
     width: 0.6em;
     height: 0.5em;
     margin-left: 42px;
     margin-top: -39px;
 }

 /* Checked */
 .light-checkbox:focus {
     /* Normally an anti-A11Y practice, but set to remove an annoyance just for this demo */
     outline: 0;
 }

 .light-checkbox:checked {
     background-color: rgba(0, 0, 0, 0.3);
     box-shadow: 0.125em 0.125em 0 0.125em rgba(0, 0, 0, 0.1) inset;
 }

 .light-checkbox:checked:before {
     background-color: currentColor;
     transform: translateX(125%)
 }

 .light-checkbox:checked:after {
     border-left-color: currentColor;
     transform: translateX(-2.5%) rotateY(180deg);
 }

 #lightImg {
     -webkit-filter: grayscale(0%);
     filter: grayscale(0%);
 }

 #range-bright {
     margin: 50px 0;
     width: 95%;
     padding: 3px 0;
 }

 .btn-switch-light .buttonorange {
     margin: 0;
 }

 .btn-switch-light {
     margin: auto;
     text-align: right;
     margin-right: 15px;
 }

 .light-manage {
     visibility: hidden;
 }

 #range-bright-value {
     padding: 5px;
     border: 1px solid #cdcdcd;
     width: 100px;
     display: inline-block;
 }

 #notificationMsg {
     display: none;
     width: auto;
     position: absolute;
     right: 0;
     bottom: 0;
     z-index: 500;
     padding: 10px 40px;
     background-color: #ed7023;
     color: white;
 }

 .empty_th {
     min-width: 20px !important;
 }

 .progr_label {
     width: 100%;
     display: block;
     text-align: center;
     margin-top: -10px;

 }

 .garbage-allobj-filter-block {
     margin-bottom: 20px;
     border-bottom: 1px solid gray;
 }

 .garbage-allobj-filter-block .flex-row {
     margin-bottom: 1px;
 }

 progress.garbageProgress[value] {
     -webkit-appearance: none;
     appearance: none;
 }

 progress.garbageProgress[value]::-webkit-progress-bar {
     background-color: #fff;
     display: inline-block;
     border-radius: 2px;
     border: 1px solid #cdcdcd;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
 }

 progress.garbageProgress[value]::-webkit-progress-value {
     background-color: green;
 }

 progress.garbageProgress.garbageFull[value]::-webkit-progress-value {
     background-color: red;
 }

 progress.garbageProgress.garbageFull::-moz-progress-bar {
     background-color: red;
 }

 progress.garbageProgress.garbageEmpty[value]::-webkit-progress-value {
     background-color: green;
 }

 progress.garbageProgress.garbageEmpty::-moz-progress-bar {
     background-color: green;
 }

 progress.garbageProgress.garbageMiddle[value]::-webkit-progress-value {
     background-color: #ffff3f;
 }

 progress.garbageProgress.garbageMiddle::-moz-progress-bar {
     background-color: #ffff3f;
 }

 .input-max-height {
     height: 100%;
 }

 .obj-addcontroller {
     margin-right: 3px;
     width: 100%;
 }

 .obj-addcontroller-header {
     text-transform: uppercase;
     margin-bottom: 5px;
 }

 .btn-reports-rigth {
     margin-bottom: -10px;
 }

 .disabledbutton {
     pointer-events: none;
     opacity: 0.4;
 }

 a.map-icon-block {
     display: inline-block;
     /*width:10em;*/
     width: 100%;
     float: left;
     /*text-align:center;*/
     text-align: left;
 }

 a.map-icon-block i,
 a.map-icon-block span {
     /*width:100%;*/
     clear: both;
 }

 /*.tree-filter-block {
    height: 28px;
}*/
 .input-search-tree {
     margin-top: -26px;
     float: left;
     width: 400px;
     margin-left: 0px;
 }

 .block-filter-tree {
     position: relative;
     top: 10px;
     left: -2px;
     overflow: auto;
     max-height: 300px;
 }

 #button_clearsearch,
 #fotorama_button_delete {
     left: -5px;
     margin-top: 3px;
     z-index: 500;
     position: relative;
     cursor: pointer;
 }

 #fotorama_button_delete {
     padding-top: 2px;
     padding-right: 2px;
     padding-left: 5px
 }

 .filter-btn-block {
     padding: 3px;

 }

 .filter-btn-block-top {
     /*margin-top: 30px;*/
 }

 .btn-filter-searh {
     margin: 0 10px;
 }

 .div-filter-break {
     width: 500px;
 }

 .zindex-autocomplet {
     z-index: 20000 !important;
 }

 .goupoperschedule-typename {
     margin-left: 24%;
     padding-top: 5px;
     text-transform: uppercase;
 }

 .flex-row.goupoperschedule-block {
     margin: 0;
 }

 .goupoperschedule-info:not(:last-child) {
     margin-bottom: 40px;
 }

 .attribute-name label.error {
     text-transform: none;
 }

 .stub {
     display: none;
     background-color: #ddd;
 }

 .stub.show {
     display: block;
 }

 td.details-realization,
 td.details-middlerealization {
     background: url(/images/icons/plus.png) no-repeat center center;
     cursor: pointer;
     width: 25px;
     min-width: 25px;
     height: 25px;
     margin: auto !important;
     text-align: -webkit-center;
     text-align: -moz-center;
 }

 tr.shown td.details-realization,
 tr.shown td.details-middlerealization {
     background: url(/images/icons/minus.png) no-repeat center center;
     width: 25px;
     min-width: 25px;
     height: 25px;
     margin: auto !important;
     text-align: -webkit-center;
     text-align: -moz-center;
 }

 .child-table {
     width: 97%;
     margin: 0 0 50px 32px;
     border-left: 1px solid gray;
     border-bottom: 1px solid gray;
     padding-top: 50px;
 }

 #groupoperations_realization_high_table tr.shown+tr.selected {
     background-color: white;
 }

 .schedule-main-block-part,
 .groupoperation-isactive-block {
     display: none;
 }

 .schedule-main-block-part.show {
     display: block;
 }

 .groupoperation-isactive-block.show {
     display: flex;
     flex-direction: row;
 }

 #realization_msg {
     display: inline-block;
     margin-left: 30px;
     color: #bf2a2a;
     font-weight: bold;
 }

 .butn_set_param,
 #put_controller_to_inquiry_list_from_panel {
     cursor: pointer;
 }

 .led_rect.green_on {
     fill: #37F96B !important;
 }

 .led_rect.red_on {
     fill: #f01d1d !important;
 }

 .led_rect.yellow_on {
     fill: #FFF608 !important;
 }

 .led_red_line {
     stroke: #EA2F12;
 }

 #ridremotecontrol_date {
     padding-left: 2px;
     padding-top: 5px;
 }

 .rid-section-right {
     margin-left: 10px;
 }

 .rid-section {
     margin-top: 10px;
 }

 /*#rid-block svg{
    height: calc(100vh - 240px);
    width: calc(100% - 5px);
    margin-left: 30px;
}
*/
 .rid-section-svg {
     width: 79%;
 }

 #rid_500 svg {
     width: 100% !important;
 }

 .rid-section-header {
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 16px;
     text-align: left;
     margin-bottom: 20px;
 }

 .ridplot-average-header {
     text-align: right;
     margin: 5px 0;
 }

 .ridplot-average-value {
     text-align: right;
 }


 .map-field-search-obj-relocate {
     position: absolute;
     z-index: 1000;
     left: auto;
     right: 10px;
     background-color: rgba(125, 171, 202, 0.58);
     padding: 4px;
 }

 .clear_field {
     position: absolute;
     float: right;
     height: calc(2em - 5px);
     width: calc(2em - 4px);
     top: 0px;
     right: 0px;
     background: rgba(15, 15, 15, 0.1);
     color: black;
     text-align: center;
     cursor: pointer;
 }

 .clear_field:after {
     content: "\2715";
     /*"\274c";*/
     position: absolute;
     top: 3px;
     right: 6px;
 }

 .clear_field:hover,
 .clear_field:focus {
     background: rgba(75, 172, 254, .8);
     /*#888;*/
 }

 .clear_field:active {
     background: #666;
 }

 .border_none {
     border: none;
 }

 .btn-map-search_route {
     width: 100%;
     margin: 0;
     border: 1px solid aliceblue;
     text-align: center;
 }

 .ol-rotate {
     top: 4em;
     left: .5em;
     right: auto;
     transition: opacity .25s linear, visibility 0s linear
 }

 .route-filter-block {
     margin-bottom: 30px;
 }

 .superscript_character {
     background-color: white;
     position: absolute;
     margin-top: 10px;
     margin-left: -5px;
     font-size: 14px;
 }

 .superscript_character_truck {
     background-color: white;
     position: absolute;
     margin-top: -5px;
     margin-left: -4px;
     font-size: 14px;
 }

 #emergency_table tr:hover {
     background: #acbad4 !important;
 }

 #emergency_table tr.selected {
     background: #acbad4 !important;
 }

 #smarthouse_wrapperblock {
     margin-top: 50px;
     display: flex;
     flex-wrap: wrap;
 }

 .smarthouse-section {
     flex: 1 0 49%;
     white-space: nowrap;
 }

 .smarthouse-section:nth-child(2n+1):not(:last-child) {
     margin-right: 10px;
 }

 .smarthouse-section-header {
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 20px;
     text-align: left;
     padding-top: 15px;
     white-space: break-spaces;
 }

 .smarthouse-section .controller_params_block .attribute-name {
     max-width: 50%;
     min-width: 50%;
     white-space: break-spaces;
 }

 /*checkbox*/


 .mid {
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 0.72em;
     box-sizing: border-box;
     font-family: 'Arial', sans-serif;
     font-size: 100%;
 }

 .mid,
 .mid:before,
 .mid:after {
     box-sizing: inherit;
     margin: 0;
     padding: 0;
 }

 .rocker {
     display: inline-block;
     position: relative;
     font-size: 1.4em;
     /*size!!* 1.44*/
     font-weight: bold;
     text-align: center;
     text-transform: uppercase;
     color: #888;
     width: 5.04em;
     height: 2.88em;
     overflow: hidden;
     border-bottom: 0.36em solid #eee;
 }

 .rocker-small {
     font-size: 0.54em;
     /* Sizes the switch */
     margin: 0.72em;
 }

 .rocker::before {
     content: "";
     position: absolute;
     top: 0.36em;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #999;
     border: 0.36em solid #eee;
     border-bottom: 0;
 }

 .rocker input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .switch-left,
 .switch-right {
     cursor: pointer;
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 1.8em;
     width: 2.16em;
     transition: 0.2s;
 }

 .switch-left {
     height: 1.728em;
     width: 1.98em;
     left: 0.612em;
     bottom: 0.288em;
     background-color: #ddd;
     transform: rotate(15deg) skewX(15deg);
 }

 .switch-right {
     right: 0.36em;
     bottom: 0;
     background-color: #bd5757;
     color: #fff;
 }

 .switch-left::before,
 .switch-right::before {
     content: "";
     position: absolute;
     width: 0.288em;
     height: 1.764em;
     bottom: -0.324em;
     background-color: #ccc;
     transform: skewY(-65deg);
 }

 .switch-left::before {
     left: -0.288em;
 }

 .switch-right::before {
     right: -0.27em;
     background-color: transparent;
     transform: skewY(65deg);
 }

 input:checked+.switch-left {
     background-color: #4c9f27;
     color: #fff;
     bottom: 0px;
     left: 0.36em;
     height: 1.8em;
     width: 2.16em;
     transform: rotate(0deg) skewX(0deg);
 }

 input:checked+.switch-left::before {
     background-color: transparent;
     width: 2.219976em;
 }

 input:checked+.switch-left+.switch-right {
     background-color: #ddd;
     color: #888;
     bottom: 0.288em;
     right: 0.576em;
     height: 1.728em;
     width: 1.98em;
     transform: rotate(-15deg) skewX(-15deg);
 }

 input:checked+.switch-left+.switch-right::before {
     background-color: #ccc;
 }

 /* Keyboard Users */
 input:focus+.switch-left {
     color: #333;
 }

 input:checked:focus+.switch-left {
     color: #fff;
 }

 input:focus+.switch-left+.switch-right {
     color: #fff;
 }

 input:checked:focus+.switch-left+.switch-right {
     color: #333;
 }

 .mobile_title {
     display: none;
     background: #7cc3ff !important;
 }

 a.mobile_title::after {
     background: #7cc3ff !important;
 }

 /*кнопка зарядная станция*/

 .glow-on-hover-btn,
 .glow-on-hover-img {
     display: inline-block;
     padding: 15px;
     min-width: 100px;
     font-size: 16px;
     text-align: center;
     /* max-width: 95px;*/
     /* width: 220px;
    height: 50px;*/
     border: 1px solid #cdcdcd;
     outline: none;
     color: #fff;
     background: #9d9d9d;
     cursor: pointer;
     position: relative;
     z-index: 0;
     border-radius: 10px;
 }

 .chargingstation-param-box {
     display: inline-block;
     padding: 15px;
     /* margin: 0 15px;*/
     min-width: 100px;
     font-size: 16px;
     text-align: center;
     background: #ddd;
     border-radius: 10px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #fff 0 -1px 9px, rgba(45, 42, 42, 0.5) 0 2px 12px;
 }

 .chargingstation-param-box-red {
     box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
     background-color: #F00;
     color: #fff;
 }

 .chargingstation-param-box-green {
     box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
     background-color: #88C640;
     color: #fff;
 }

 .glow-on-hover-btn:before {
     content: '';
     background: #85c4f9;
     /*for old browsers*/
     /*  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);*/
     /* background: linear-gradient(45deg,#85c4f9,#4bacfe,#0b72ca,#0755d0,#0b72ca,#4bacfe,#85c4f9);*/
     background: linear-gradient(45deg, #0755d0, #0b72ca, #4bacfe, #85c4f9, #4bacfe, #0b72ca, #0755d0);
     position: absolute;
     top: -2px;
     left: -2px;
     background-size: 400%;
     z-index: -1;
     filter: blur(5px);
     width: calc(100% + 4px);
     height: calc(100% + 4px);
     animation: glowing 20s linear infinite;
     opacity: 0;
     transition: opacity .2s ease-in-out;
     border-radius: 10px;
 }

 .glow-on-hover-btn:active {
     color: #FFF;
 }

 .glow-on-hover-btn:active:after {
     background: transparent;
 }

 .glow-on-hover-btn:hover:before {
     opacity: 1;
 }

 .glow-on-hover-btn:after {
     z-index: -1;
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background: #9d9d9d;
     left: 0;
     top: 0;
     border-radius: 10px;
 }

 @keyframes glowing {
     0% {
         background-position: 0 0;
     }

     50% {
         background-position: 400% 0;
     }

     100% {
         background-position: 0 0;
     }
 }

 /**/

 /*charging station led*/

 .chargingstation-led-box {
     margin: 0 auto;
     width: 24px;
     height: 24px;
     border-radius: 50%;
 }

 .chargingstation-led-green {
     background-color: #ABFF00;
     box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
 }

 .chargingstation-led-red {
     background-color: #F00;
     box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
 }


 /**/

 #chargingstation-panel {
     border: 1px solid #9d9d9d;
     padding: 20px;
     width: 630px;
     margin: auto;
     /*padding-bottom: 0;*/
 }

 #chargingstation-panel-parameters {
     display: flex;
     flex-wrap: wrap;
 }

 #chargingstation-panel h3 {
     font-weight: normal;
     text-transform: uppercase;
     text-align: center;
 }

 .chargingstation-panel-element {
     margin: 15px 30px;
     text-align: center;
 }

 .chargingstation-panel-element-long {
     padding: 5px;
     margin: 15px;
     width: 100%;
 }

 .chargingstation-panel-block {
     /* flex: 1 0 30%;*/
     white-space: nowrap;
     flex: 1;
     text-align: center;
     border: 1px solid #9d9d9d;
     margin: 0 20px;
     border-radius: 18px;
     padding: 10px;
     margin-bottom: 40px;
     border-top: none;
 }

 .chargingstation-panel-block-header {
     text-align: center;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 12px;
     margin: 20px 0;
 }

 /*.chargingstation-panel-block h5{
    margin: 15px 0;
    text-align: center;
    text-transform: uppercase;
}*/
 #chargingstation-panel-status-info {
     height: auto;
     background: #ec3636;
     text-align: center;
     margin: 0 30px;
     border-radius: 10px;
 }

 #chargingstation-panel-status-info h2 {
     padding: 10px;
     color: white;
     font-size: 18px;
     text-transform: uppercase;
     font-weight: normal;
 }

 #chargingstation-stop-btn {
     height: 80;
     width: 80px;
     background: #ec3636;
     border-radius: 50%;
     color: white;
     text-transform: uppercase;
     text-align: center;
     line-height: 80px;
     font-size: 25px;
     font-weight: bold;
     margin: auto;
 }

 /*#chargingstation-stop-btn:hover{
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
    transition: box-shadow .2s ease-in-out;
}
#chargingstation-stop-btn:active{
    background: #b92727;
}*/
 #chargingstation-cablecheck {
     display: inline-block;
     padding: 7px;
     border: 2px solid #cdcdcd;
     border-radius: 10px;
 }

 #chargingstation-cablecheck:active {
     background: #d5d5d5;
 }

 .indicator-step {
     border: 1px solid #cdcdcd;
     border-radius: 5px;
     width: 15px;
     background: #85c4f9;
     /*for old browsers*/
     background: linear-gradient(to top, #0755d0, #0b72ca, #4bacfe, #85c4f9, #4bacfe, #0b72ca, #0755d0);
     margin-right: 3px;
     display: inline-block;
     opacity: 1;
 }

 .indicator-step.empty {
     opacity: 0.2;
 }

 .step-20 {
     height: 15px;
 }

 .step-40 {
     height: 30px;
 }

 .step-60 {
     height: 45px;
 }

 .step-80 {
     height: 60px;
 }

 .step-100 {
     height: 75px;
 }

 #chargingstation-indicator {
     /*padding-top: 15px;*/
 }

 .obj-editcontroller-header {
     border-top: 1px solid gray;
     border-bottom: 1px solid gray;
     padding: 3px;
     margin-bottom: 10px;
     margin-top: 40px;
     /* font-weight: bold;*/
     letter-spacing: 3px;
 }

 /*
    JQuery DataTables
    Show data as cards (<table class="cards">)
*/
 .cards {
     background-color: transparent;
 }

 .cards thead {
     display: none;
 }

 .cards tbody tr {
     float: left;
     margin: 10px;
     border: 1px solid #aaa;
     box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
     background-color: white;
     cursor: pointer;
 }

 .cards tbody tr:active {
     background-color: #B0BED9;
 }

 .cards.no-data tbody tr {
     float: none;
     border: none;
     box-shadow: none;
 }

 .flex-column {
     display: flex;
     flex-direction: column;
 }

 .padding-r-20 {
     padding-right: 20px;
 }

 .device-card-block .flex-row {
     margin: 2px 0;
 }

 .device-option-disabled {
     font-weight: bold;
     color: #1e1f23;
 }

 .device-option-italic {
     font-style: italic;
 }

 .device-option-grey {
     color: #888383;
 }

 .object-table-wrapper {
     padding: 20px;
 }

 .object-table-wrapper .button-form {
     margin-top: 20px;
 }

 .firmware_table_container {
     margin-top: 30px;
 }

 .firmware_table_container input[type="checkbox"] {
     display: block;
 }

 .firmware_table_container .input-flt input[type="text"] {
     padding: 5.5px;
 }

 #routes_dialog_tabs,
 #logemergency_dialog_tabs {
     padding: 0;
 }

 .comments-and-photos-tabs ul[role="tablist"] {
     border-top: none;
     border-left: none;
     border-right: none;
 }

 .comments-and-photos-tabs li:focus-visible {
     outline: none;
 }

 .comments-and-photos-tabs .fw .flex-row {
     flex-direction: row-reverse;
     margin-bottom: 10px;
 }

 /*mobile version*/
 @media screen and (max-width: 1000px) {
     .controller_grafics_block div.xAxis div.tickLabel {
         transform: rotate(-90deg);
         -ms-transform: rotate(-90deg);
         /* IE 9 */
         -moz-transform: rotate(-90deg);
         /* Firefox */
         -webkit-transform: rotate(-90deg);
         /* Safari and Chrome */
         -o-transform: rotate(-90deg);
         /* Opera */
         margin-top: 20px;
         margin-bottom: 25px;
     }
 }

 @media screen and (max-width: 705px) {
     #smarthouse_wrapperblock .smarthouse-section {
         margin-right: 0;
     }

     .device-card-block .flex-row {
         flex-direction: column;
     }

 }

 @media screen and (max-width: 630px) {
     /*    .main-menu{
        top:80px;
    }*/

     .main-menu>ul.logout {
         margin-top: 40px;
     }

     .table-section {
         margin-top: 85px !important;
     }

     .main-section .main-block {
         min-width: auto;
         width: 89%;
         margin-left: 50px;
         margin-top: 60px;
     }

     .parent-aside-block {
         margin-top: 85px;
     }

     .parent-aside-block .aside-block {
         width: 87%;
         position: absolute;
     }
 }

 @media screen and (max-width: 500px) {
     #userattributes-form .attribute-name {
         font-size: 12px;
     }

     .mobile_title {
         display: block;

     }

     .fullvers_title {
         display: none;
     }

     .aside-block h2 {
         font-size: 20px;
     }

     .top-block-part {
         margin-top: 80px !important;
     }

     .breadcrumbs a:first-child {
         padding-left: 10px;
         padding-right: 8px;
         font-size: 14.5px;
     }

     .breadcrumbs a {
         padding-left: 10px;
     }

     .breadcrumbs a.active-page {
         padding-left: 30px;
     }

     .smarthouse-section .controller_params_block .attribute-name {
         font-size: 13px;
     }



 }

 /*Дашбоард*/
 /* ============ THEMES ============ */
 :root,
 [data-theme="light"] {
     --bg: #f4f4f8;
     --bg2: #ffffff;
     --bg3: #ebebf2;
     --bg4: #e2e2ec;
     --border: rgba(0, 0, 0, 0.07);
     --border2: rgba(0, 0, 0, 0.12);
     --text: #15151f;
     --text2: #555565;
     --text3: #9090a8;
     --accent: #4bacfe;
     --accent2: #ed7023;
     --accent-glow: rgba(91, 84, 232, 0.18);
     --success: #16a34a;
     --warning: #d97706;
     --error: #dc2626;
     --info: #2563eb;
     --success-bg: rgba(22, 163, 74, 0.10);
     --warning-bg: rgba(217, 119, 6, 0.10);
     --error-bg: rgba(220, 38, 38, 0.10);
     --info-bg: rgba(37, 99, 235, 0.10);
     --shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
     --header-h: 57px;
     --sidebar-w: 240px;
     --rightbar-w: 282px;
     --radius: 10px;
 }

 [data-theme="dark"] {
     --bg: #0d0d0f;
     --bg2: #131316;
     --bg3: #1c1c21;
     --bg4: #242429;
     --border: rgba(255, 255, 255, 0.07);
     --border2: rgba(255, 255, 255, 0.12);
     --text: #f0f0f5;
     --text2: #9090a0;
     --text3: #606070;
     --accent: #4bacfe;
     --accent2: #ed7023;
     --accent-glow: rgba(108, 99, 255, 0.25);
     --success: #22c55e;
     --warning: #f59e0b;
     --error: #ef4444;
     --info: #3b82f6;
     --success-bg: rgba(34, 197, 94, 0.12);
     --warning-bg: rgba(245, 158, 11, 0.12);
     --error-bg: rgba(239, 68, 68, 0.12);
     --info-bg: rgba(59, 130, 246, 0.12);
     /* --header-h: 48px;
     --sidebar-w: 240px;
     --rightbar-w: 240px;
     --radius: 10px;*/
     --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
 }


 /* ============ RESET ============ */

 .dashboard-main-block .layout {
     padding: 40px 0 0 45px;
 }

 /* ============ LAYOUT ============ */
 .layout {
     display: grid;
     grid-template-columns: var(--sidebar-w) 1fr var(--rightbar-w);
     height: 100vh;
 }

 /* ============ SIDEBAR ============ */
 .sidebar {
     display: flex;
     flex-direction: column;
     background: var(--bg2);
     border-right: 1px solid var(--border);
     overflow: hidden;
 }

 .sidebar-top {
     padding: 14px 14px 12px;
     border-bottom: 1px solid var(--border);
 }

 .sidebar-logo {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
     font-size: 15px;
     letter-spacing: 0.05em;
     color: var(--text);
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .sidebar-logo span {
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 2px;
     background: var(--accent);
     box-shadow: 0 0 10px var(--accent-glow);
 }

 .search-wrap {
     position: relative;
 }

 .search-wrap svg {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     opacity: 0.4;
     pointer-events: none;
 }

 .dashboard-main-block .search-input,
 .charts-main-block .search-input {
     width: 100%;
     padding: 7px 10px 7px 32px;
     background: var(--bg3);
     border: 1px solid var(--border);
     border-radius: 6px;
     color: var(--text);
     font-family: inherit;
     font-size: 12px;
     outline: none;
     transition: border-color 0.2s, box-shadow 0.2s;

     &::placeholder {
         color: var(--text3);
     }

     &:focus {
         border-color: var(--accent);
         box-shadow: 0 0 0 3px var(--accent-glow);
     }
 }

 .sidebar-list-wrap {
     flex: 1;
     overflow-y: auto;
     padding: 6px 0;
 }

 .sidebar-list-wrap::-webkit-scrollbar {
     width: 3px;
 }

 .sidebar-list-wrap::-webkit-scrollbar-track {
     background: transparent;
 }

 .sidebar-list-wrap::-webkit-scrollbar-thumb {
     background: var(--border2);
     border-radius: 3px;
 }

 .dashboard-main-block .list-item,
 .charts-main-block .list-item {
     padding: 7px 14px;
     cursor: pointer;
     font-size: 12px;
     color: var(--text2);
     transition: background 0.15s, color 0.15s;
     border-left: 2px solid transparent;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     background-color: inherit;
     border: none;
 }

 .list-item:hover {
     background: var(--bg3);
     color: var(--text);
 }

 .list-item.active-controller {
     background: var(--bg3);
     color: var(--accent2);
     border-left-color: var(--accent);
 }

 /* ---- info panel ---- */
 .info-panel {
     padding: 14px;
     border-top: 1px solid var(--border);
     background: var(--bg2);
     flex-shrink: 0;
     overflow-y: auto;
     max-height: 350px;
     height: 350px;
 }

 .info-panel::-webkit-scrollbar {
     width: 3px;
 }

 .info-panel::-webkit-scrollbar-thumb {
     background: var(--border2);
     border-radius: 3px;
 }

 .info-label {
     font-family: 'Syne', sans-serif;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--text3);
     margin-bottom: 8px;
 }

 .info-title {
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     font-size: 14px;
     color: var(--text);
     margin-bottom: 8px;
 }

 .info-text {
     font-size: 11px;
     line-height: 1.6;
     color: var(--text2);
 }

 /* ============ MAIN ============ */
 .main {
     display: flex;
     flex-direction: column;
     overflow: hidden;
     background: var(--bg);
 }

 .topbar {
     display: flex;
     align-items: end;
     justify-content: space-between;
     height: var(--header-h);
     background: var(--bg2);
     flex-shrink: 0;
 }

 .topbar-left {
     display: flex;
     align-items: center;
     gap: 0px;
     height: 90%;
 }

 #general-tab,
 #controller-tab {
     font-family: 'Syne', sans-serif;
     font-size: 13px;
     color: var(--text2);
     cursor: pointer;
     font-weight: 700;

     &:hover {
         color: var(--accent2);
     }
 }

 .topbar-tab.active-tab #general-tab,
 .topbar-tab.active-tab #controller-tab {
     color: var(--accent2);
 }

 .topbar-tab {
     height: 100%;
     display: flex;
     align-items: center;
     padding: 0 20px;
     border-bottom: 1px solid var(--border);
     border-right: 1px solid transparent;
     border-left: 1px solid transparent;
     border-top: 1px solid transparent;
 }


 .topbar-tab.active-tab {
     border-right: 1px solid var(--border);
     border-left: 1px solid var(--border);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid transparent;
     background-color: #f4f4f8;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 }

 .topbar-right {
     flex-grow: 1;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding-right: 12px;
     border-bottom: 1px solid var(--border);
 }


 .theme-btn {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 5px 10px;
     background: var(--bg3);
     border: 1px solid var(--border2);
     border-radius: 20px;
     color: var(--text2);
     font-family: inherit;
     font-size: 11px;
     cursor: pointer;
     transition: all 0.2s;
 }

 .theme-btn:hover {
     border-color: var(--accent);
     color: var(--accent);
 }

 /* add-widget button */
 .add-widget-wrapper {
     position: relative;
 }

 .add-btn {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 6px 14px;
     background: var(--accent);
     border: none;
     border-radius: 6px;
     color: #fff;
     font-family: inherit;
     font-size: 12px;
     font-weight: 500;
     cursor: pointer;
     transition: opacity 0.2s, box-shadow 0.2s;
     box-shadow: 0 0 16px var(--accent-glow);
 }

 .add-btn:hover {
     opacity: 0.9;
     box-shadow: 0 0 24px var(--accent-glow);
 }

 .add-btn svg {
     flex-shrink: 0;
 }

 /* dropdown */
 .dropdown {
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     width: auto;
     min-width: 200px;
     max-width: 350px;
     background: var(--bg2);
     border: 1px solid var(--border2);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     max-height: 240px;
     overflow-y: auto;
     z-index: 1000;
 }

 .dropdown-header {
     font-weight: bold;
     pointer-events: none;
     padding: 8px 14px;
     font-size: 13px;
     color: var(--text2);
     transition: background 0.12s, color 0.12s;
     border-bottom: 1px solid var(--border);
 }

 .dropdown::-webkit-scrollbar {
     width: 3px;
 }

 .dropdown::-webkit-scrollbar-thumb {
     background: var(--border2);
     border-radius: 3px;
 }

 .dropdown.hidden {
     display: none;
 }

 .dropdown-item {
     padding: 8px 14px;
     font-size: 12px;
     color: var(--text2);
     cursor: pointer;
     transition: background 0.12s, color 0.12s;
     border-bottom: 1px solid var(--border);
 }

 .dropdown-item:last-child {
     border-bottom: none;
 }

 .dropdown-item:hover {
     background: var(--bg3);
     color: var(--text);
 }

 /* ---- alerts strip ---- */

 .wrapper-controller-emergency {
     display: flex;
     align-items: center;
     gap: 6px;
     width: 100%;
     min-height: 140px;


 }

 .wrapper-controller-emergency,
 .wrapper-all-emergency {
     .arrow {
         width: 30px;
         height: 30px;
         border: none;
         border-radius: 50%;

         display: flex;
         align-items: center;
         justify-content: center;

         background: rgba(255, 255, 255, 0.7);
         backdrop-filter: blur(8px);

         cursor: pointer;
         transition: all 0.2s ease;
     }

     .arrow svg {
         width: 14px;
         height: 14px;
     }

     .arrow svg path {
         /* stroke: #333;*/
         stroke: #000;
     }

     .arrow:hover:not(:disabled) {
         background: rgba(255, 255, 255, 0.9);
         transform: scale(1.1);
     }

     .arrow:disabled {
         opacity: 0.25;
     }
 }

 #carousel-controller-emergency {
     overflow: hidden;
     width: 100%;
 }

 #alerts-strip {
     display: flex;
     gap: 16px;
 }

 .alert-chip,
 .notification {
     position: relative;
     flex: 0 0 auto;
     min-width: 220px;
     padding: 12px;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     font-size: 12px;
     line-height: 1.4;
     max-width: 260px;
     width: 260px;
     /* margin: 0 auto;*/
     border: 1px solid var(--border);
     color: var(--text2);
     transition: box-shadow 0.2s;

     &:hover {
         box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
     }

     .truncate-emerg-class,
     .truncate-emerg-title,
     .truncate-emerg-contr {
         display: block;
         width: auto;
         max-width: 220px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

         span {
             cursor: help;
         }
     }

     .truncate-emerg-title,
     .truncate-emerg-contr {
         max-width: 203px;
     }

     .emerg-contr-link {
         display: inline-flex;
         align-items: center;
         cursor: pointer;
         gap: 2px;
         transition: color 0.2s ease;
         /* color: #75757e;*/
         color: var(--text2);

         /* Блок иконки */
         .arrow-icon {
             display: flex;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
             transition: transform 0.2s ease;
         }

         /* Настройка SVG */
         .arrow-icon svg {
             display: block;
             stroke: currentColor;
         }

         &:hover {
             color: var(--accent2);
         }

         &:hover .arrow-icon {
             transform: translateX(5px);
         }

     }

     .truncate-emerg-contr {

         span {
             cursor: pointer;
             transition: color 0.2s;
             /*font-weight: 600;*/
             /*border-radius: 4px;*/
         }

     }

     .close-btn {
         position: absolute;
         top: 6px;
         right: 6px;

         width: 18px;
         height: 18px;
         border-radius: 50%;

         border: none;
         background: rgba(0, 0, 0, 0.05);
         cursor: pointer;

         display: flex;
         align-items: center;
         justify-content: center;

         font-size: 12px;

         transition: all 0.2s ease;
     }

     .close-btn:hover {
         background: rgba(0, 0, 0, 0.15);
     }

     .emerg-title {
         font-size: 14px;
         border-bottom: 1px solid rgba(0, 0, 0, 0.18);
         margin-bottom: 3px;
         margin-right: 15px;
     }

 }

 .wrapper-all-emergency {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     height: 100%;
 }

 #carousel-all-emergency {
     overflow: hidden;
     height: calc(100vh - 180px);
     width: 100%;
 }

 #notifications {
     display: flex;
     flex-direction: column;
     height: 100%;
     touch-action: pan-y;
     gap: 16px;
     align-items: center;
 }



 /* ---- grid area ---- */
 .grid-area {
     flex: 1;
     overflow-y: auto;
     padding: 6px;
 }

 .grid-area::-webkit-scrollbar {
     width: 4px;
 }

 .grid-area::-webkit-scrollbar-thumb {
     background: var(--border2);
     border-radius: 4px;
 }

 .grid-stack {
     background: transparent;
     min-height: 60px;
 }

 .grid-widget-content {
     background: var(--bg2);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     height: 100%;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 .grid-stack-item-content {
     border-radius: 10px;
 }

 .grid-stack-item-content:hover {
     -webkit-box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
     box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
     transition: box-shadow 0.2s;
 }

 .widget-header {
     padding: 8px 12px;
     /* border-bottom: 1px solid var(--border2);*/
     cursor: move;
     padding-bottom: 0;

     .loader {
         margin-top: -1px;
         height: 1px;
         --c: no-repeat linear-gradient(#5555656e 0 0);
         background: var(--c), var(--c), transparent;
         background-size: 60% 100%;
         animation: l16 3s infinite;
     }
 }

 .widget-title {
     font-family: 'Syne', sans-serif;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.04em;
     color: var(--text2);
     max-width: 60%;
     flex: 1;

     p {
         /* max-width: 175px;
         width: 175px;*/
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         cursor: help;

     }

     & p:first-child {
         text-transform: uppercase;
     }

     p:last-child {
         text-transform: lowercase;
         font-weight: normal;
     }

 }

 .max-date-block {
     color: #9090a8;
     font-size: 11px;
     letter-spacing: 0.5px;
     /*  border: 1px solid var(--border);
         border-radius: 10px;*/
     /* padding: 5px;*/
     text-transform: lowercase;
     margin-top: 1px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.18);

     span {
         cursor: help;
     }
 }



 @keyframes l16 {
     0% {
         background-position: -150% 0, -150% 0
     }

     66% {
         background-position: 250% 0, -150% 0
     }

     100% {
         background-position: 250% 0, 250% 0
     }
 }

 .widget-parameter-option {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
 }

 .widget-controls {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .widget-select {
     background: var(--bg3);
     border: 1px solid var(--border);
     border-radius: 5px;
     color: var(--text2);
     font-family: inherit;
     font-size: 11px;
     padding: 3px 6px;
     outline: none;
     cursor: pointer;
 }

 .widget-close {
     background: none;
     border: none;
     color: var(--text3);
     font-size: 14px;
     cursor: pointer;
     width: 22px;
     height: 22px;
     border-radius: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.15s, color 0.15s;
     line-height: 1;
 }

 .widget-close:hover {
     /* background: var(--error-bg);*/
     color: #000;
 }

 .content {
     flex: 1;
     display: flex;
     align-items: stretch;
     width: 100%;
     overflow: hidden;
     min-width: 0;
     min-height: 0;
 }

 .value-display {
     width: 100%;
     container-type: inline-size;
     display: flex;
     justify-content: center;
     align-items: center;

 }

 .value-accent {
     color: #5070dd;
     font-size: min(17cqw, 55px);
     font-weight: 600;
     line-height: 1;

     span {
         font-weight: normal;
         color: var(--text2);
         font-size: 13px;
         display: block;
     }
 }

 .enum-list-block {
     width: 100%;
     margin: 10px 15px;
     margin-top: 0;
 }

 .enum-item {
     margin-top: 6px;
     font-size: 12px;
     line-height: 1.4;
     color: var(--text2);
 }

 .status-indicator {
     padding: 5px;
     font-size: 14px;
     font-weight: 600;
     width: 100%;
     border-radius: 5px;
 }

 .status-on {
     background-color: #5070dd;
 }

 .status-off {
     background-color: #f4f4f8
 }



 /* ============ RIGHT BAR ============ */
 .rightbar {
     display: flex;
     flex-direction: column;
     background: var(--bg2);
     border-left: 1px solid var(--border);
     overflow: hidden;
 }

 .rightbar-header {
     padding: 0 14px;
     height: var(--header-h);
     display: flex;
     align-items: center;
     gap: 8px;
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;

     .add-btn {
         padding: 6px;
     }
 }

 .rightbar-title {
     font-size: 12px;
     font-weight: 700;
     color: var(--text);
     flex: 1;
 }

 .notif-count {
     background-color: #ed7023;
     color: #ffffff;
     font-weight: 900;
     font-size: 14px;
     border-radius: 6px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 24px;
     height: 26px;
     line-height: 1;
     width: auto;
     padding: 5px;
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
     animation: clear-glow 3s infinite ease-in-out;
 }

 @keyframes clear-glow {
     0% {
         box-shadow: 0 0 2px #ed7023c7;
     }

     50% {
         box-shadow: 0 0 15px #ed7023db;
     }

     100% {
         box-shadow: 0 0 2px #ed7023c7;
     }
 }


 .notification-msg {
     color: var(--text);
     margin-bottom: 4px;
     line-height: 1.4;
 }

 .notification-time {
     color: var(--text3);
     font-size: 10px;
 }

 .notification.information {
     background: var(--info-bg);
     border-color: rgba(59, 130, 246, 0.2);
 }

 .notification.success {
     background: var(--success-bg);
     border-color: rgba(34, 197, 94, 0.2);
 }

 .notification.warning {
     background: var(--warning-bg);
     border-color: rgba(245, 158, 11, 0.2);
 }

 .notification.error {
     background: var(--error-bg);
     border-color: rgba(239, 68, 68, 0.2);
 }

 /* верхняя строка уведомления */
 .notif-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
 }

 /* кнопка закрытия */
 .close-btn {
     background: transparent;
     border: none;
     color: #353535;
     font-size: 14px;
     cursor: pointer;
     margin-left: 10px;
 }

 .close-btn:hover {
     opacity: 0.7;
 }

 /* время */
 .notif-time {
     font-size: 11px;
     opacity: 0.7;
     margin-top: 5px;
 }

 /*Дашбоард*/

 /* Новые графики*/

 .charts-main-block .layout {
     padding: 40px 0 0 45px;
     display: grid;
     grid-template-columns: var(--sidebar-w) 1fr;
     height: 100vh;
 }

 .chart-area {
     flex: 1;
     overflow-y: auto;
     padding: 10px;
     padding-bottom: 0;
 }

 .charts-main-block .data-input {
     width: 100%;
     padding: 7px 10px;
     background: var(--bg3);
     border: 1px solid var(--border);
     border-radius: 6px;
     color: var(--text);
     font-family: inherit;
     font-size: 12px;
     outline: none;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 .charts-main-block .data-input::placeholder {
     color: var(--text3);
 }

 .charts-main-block .data-input:focus {
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-glow);
 }

 .charts-settings {
     display: flex;
     align-items: center;
     /* justify-content: space-between;*/
     height: var(--header-h);
     background: var(--bg2);
     flex-shrink: 0;
     padding-left: 14px;
     gap: 20px;
     border-bottom: 1px solid var(--border);
 }

 .chart-select {
     background: var(--bg3);
     border: 1px solid var(--border);
     border-radius: 6px;
     color: var(--text);
     font-family: inherit;
     font-size: 12px;
     padding: 7px 10px;
     outline: none;
     cursor: pointer;
     height: auto;
     transition: border-color 0.2s, box-shadow 0.2s;

     &:focus {
         border-color: var(--accent);
         box-shadow: 0 0 0 3px var(--accent-glow);
     }
 }

 .chart-block {
     border-radius: 10px;
     background: var(--bg2);
     border: 1px solid var(--border);
     height: 100%;
     width: 100%;
     text-align: center;
     display: flex;
 }

 .charts-main-block {
     .tabs {
         display: flex;
         margin-bottom: 6px;
     }

     .tab-btn {
         position: relative;
         border: none;
         background: #f3f3f3;
         padding: 14px;
         cursor: pointer;
         font-size: 13px;
         color: #8a8a8a;
         flex: 1;
         min-width: 0;
         transition: color .25s ease, background .25s ease;
         border-bottom: 1px solid var(--border);
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
     }

     .tab-btn.active-btn {
         background: #fff;
         border-bottom: 1px solid transparent;
         border-right: 1px solid var(--border);
         border-left: 1px solid var(--border);
         border-top: 1px solid var(--border);
         color: var(--accent2);
     }

     .tab-btn:hover {
         /* background: #f3f3f3;*/
         color: var(--accent2);
     }

     .empty-tab {
         border-bottom: 1px solid var(--border);
         width: 3px;
     }

     .tabs-content {
         position: relative;
         flex: 1;
         overflow: hidden;
         min-height: 0;

     }

     .tab-content {
         position: absolute;
         opacity: 0;
         visibility: hidden;
         transform: translateY(10px);
         transition:
             opacity .25s ease,
             transform .35s ease,
             visibility .35s;

         pointer-events: none;
         inset: 0;

     }

     .tab-content.active-tab {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
         pointer-events: auto;
     }


     .sidebar-list-wrap {
         padding: 0;
     }

     .sidebar-top {
         border-bottom: none;
     }

     #controller-list {
         overflow-y: auto;
         height: calc(100% - 340px);
     }

 }

 #chart-legend {
     display: flex;
     flex-direction: column;

     .tab-content-inner {
         overflow-y: auto;
         overflow-x: hidden;
         padding-right: 4px;
         height: 100%;
     }
 }

 #chart-controllers {
     margin-top: 5px;
     overflow: hidden;

 }

 /* КАЛЕНДАРЬ */

 .flatpickr-current-month select {
     display: inline-block;

     option {
         font-size: 14px;
         ;
     }
 }


 /* CONTROLLER CARD */

 .charts-main-block {

     .sidebar-list-wrap {
         height: 100%;
         display: flex;
         flex-direction: column;
         overflow: hidden;


     }

     input[type="checkbox"] {
         display: inline-block;
     }


     .legend-item {
         padding: 14px 8px;
         padding-right: 5px;
         /* background: #fff;*/
         border-bottom: 1px solid #ececec;
         display: flex;
         font-size: 12px;

         .legend-color {

             div {
                 height: 100%;
                 width: 5px;
                 background-color: transparent;
                 margin-right: 5px;

             }
         }

         .legend-parameter {
             flex: 3;

             p:first-child,
             p:last-child {
                 color: var(--text2);
                 font-family: 'Syne', sans-serif;
                 font-size: 12px;
                 text-transform: uppercase;
             }

             p:nth-child(2) {
                 color: var(--text3);
                 font-size: 12px;
             }

             p:last-child {
                 font-weight: 700;
             }
         }
     }

     /* FIXED HEADER */

     .legend-toolbar {
         flex-shrink: 0;
         position: sticky;
         top: 0;
         z-index: 5;
         margin: 3px 0;
         display: block;
         text-align: center;
         color: var(--text3);
         font-size: 12px;

         div {
             display: inline-block;
             cursor: pointer;
         }

         div:hover {
             color: var(--text2);
         }
     }


     .sub-item {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 7px;
         /* border-bottom: 1px solid #ececec;*/
         font-size: 12px;
         color: #666;
         transition:
             background .2s ease,
             padding-left .2s ease;


     }

     .sub-item:hover {
         background: #f0f0f0;
         /* padding-left: 10px;*/
     }

     /* CUSTOM RADIO */

     .param-check {
         appearance: none;
         min-width: 12px;
         width: 12px;
         height: 12px;
         border-radius: 50%;
         border: 1px solid #bdbdbd;

         position: relative;
         transition:
             border-color .25s ease,
             background .25s ease,
             transform .2s ease;
     }


     /* INNER DOT */

     .param-check::before {
         content: "";
         position: absolute;
         inset: 3px;
         border-radius: 50%;
         background: #fff;
         transform: scale(0);
         transition: transform .2s ease;
     }

     /* CHECKED */
     .param-check:checked {
         background: var(--accent2);
         border-color: var(--accent2);
     }

     .param-check:checked::before {
         transform: scale(1);
     }


     .param-check:active {
         transform: scale(.9);
     }

     .param-label {
         cursor: pointer;
         flex: 1;
     }

     .info-label {
         text-align: center;
         margin: 14px;
         border-bottom: 1px solid var(--border);
         padding-bottom: 5px;

         & span {
             display: -webkit-inline-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
             overflow: hidden;
             word-break: break-all;
             vertical-align: top;
             text-align: left;
             margin-left: 5px;
             cursor: help;
         }

     }

     .info-text {
         text-align: center;
     }

     .info-panel {
         box-shadow: 0px -1px 10px 0px rgba(34, 60, 80, 0.15);
         overflow-y: hidden;
         padding: 0;
     }

     .equipment-type-header {
         font-weight: 600;
         font-size: 12px;
         color: var(--text2);
         /* border-bottom: 1px solid var(--border);*/
     }

     .equipment-type-header:not(:first-child) {
         margin-top: 15px;
     }

     .widget-close {
         align-items: initial;
     }
 }

 #list-controller-parameters {
     overflow-y: auto;
     height: calc(100% - 60px);
     padding: 14px;
     padding-top: 0;
 }


 /* Новые графики*/