* {
 padding:0; margin:0; 
 font-size: 13px;
 font-family: Roboto;
 box-sizing: border-box;
 scrollbar-color: #d0d0d0 #e7e7e7; scrollbar-width: thin;
}
html {height: 100%;}
body {background-color: #eee; height: 100%;}
table {border-collapse: collapse; padding: 0 px; border-spacing: 0px; border: 0px;}
textarea {resize:none; outline:none;}
select {background:#fff; border-radius:5px; border: 1px solid #999; padding: 3px 5px;}
a, .divclic {outline: none; text-decoration: none; color: #106090; cursor:pointer;}
a:hover, .divclic:hover {color: #3070A0;}
ul {list-style-type:none;}
hr {border: 1px solid #eee;}
.bd {height: 100%;}
.nowrap, .nowrap100 {white-space:nowrap; overflow:hidden; text-overflow: ellipsis; word-break: break-all; table-layout: fixed;}
.nowrap100 {max-width:100px;}
.trdel td {color:red !important;}
.trban td {color:orange !important;}
.del {text-decoration: line-through; color: #c00;}
.cont {min-height: calc(100% - 131px); padding: 15px 15px 30px 15px;}
.cont_center {display:flex; align-content: center; justify-content: center; min-height: calc(100% - 82px); padding: 15px 10px;}
.frm_center {padding: 15px; margin:auto; box-shadow: 0 2px 7px 1px rgba(0,0,0,0.25); border-radius: 5px; background:#fff; max-width:100%;}
.frm {border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 1px 3px 1px rgba(0,0,0,0.25); background:#fff;}
.frm_cont {padding:15px; overflow-x: auto;}
.frm_head_panel {
 display: flex;
 height: 25px;
 align-items: center;
 padding: 0 15px;
 font-size: 16px; font-weight: 700; 
 color: #333;
 background: #cfd8dc;
 border-radius: 4px 4px 0 0;
}
.frm_head_title {flex: 1;}
.frm_head_id {font-size: 12px; color: #333; float:right;}
.tshadow {box-shadow: 0 2px 7px 1px rgba(0,0,0,0.25); border-radius: 5px; background:#fff;}
.vscroll {overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #aaa #eee; height: auto;}
.hscroll {overflow-x: scroll; scrollbar-width: thin; scrollbar-color: #aaa #eee; height: auto;}
.br {border-top: 1px solid #ccc;}
.nav {display: flex; width: 100%; background: #f9f9f9;}
.navlogo {
 display:flex;
 align-items:center;
 margin: 0 10px 0 20px;
 user-select: none;
}
.navlogo a {font-size:0;}
.logosmall {height:38px;}
#lpanelcont, #pe_lpanelcont{
 position: static;
 display: flex;
 justify-content: right;
 align-items:center;
 user-select: none;
 height: 42px;
 margin-right: 20px;
}
#lpanelcont {flex:1;}
.navbtnpanel {
 display: flex;
 justify-content: right;
 width: 100%;
 margin-top: 20px;
 user-select: none;
}

.navbtn {
 max-width: 120px;
 color: #444; fill: #444;
 padding: 0 15px;
 position: relative;
 cursor:pointer;
 float:left;
 padding-right:0;
}
.navbtn:hover {color: #111; fill: #111;}
.navbtnico {
 display: flex;
 justify-content: center;
}
.navbtntxt, .navbtntxtl{
 text-align: center;
 font-size: 14px;
 font-weight: 500;
 white-space: nowrap;
 overflow: hidden;
}

.nav_dvorsel_panel {display: flex; align-items: center;}
.nav_dvorsel {
 width: 250px;
 max-width: 100%;
 position: relative;
}
.nav_dvorsel_i{
 background: #fff;
 height: 31px;
 border: 1px solid #ccc; border-radius: 5px;
 color: #333;
 padding: 0 5px;
 cursor:pointer;
}
.nav_dvorsel_i h5, .nav_dvorsel_i p {
 font-size: 12px !important;
 margin-right: 20px;
 white-space: nowrap;
 overflow: hidden;
}
.nav_dvorsel_i:after {
 content: url(img/sel_down.svg);
 display: block;
 width: 12px; height: 12px;
 position: absolute; top:8px; right:8px;
}  

.nav_dvorsel_ul li {cursor: pointer; padding: 5px 0px;}
.nav_dvorsel_ul li p, .nav_dvorsel_ul li h5 {font-size: 12px;}
.nav_dvorsel_ul li:hover {color: #339;}
#nav_dvorsel_list {
 display: none;
 position: absolute;
 z-index: 999;
 top:27px; 
 padding: 10px;
 border: solid #ccc;
 border-width: 0 1px 1px 1px;
 border-radius: 0px 0 4px 4px;
 background: #fff;
 width: 250px;
}

.nav_menu {display:flex; overflow: auto; scrollbar-width: thin; scrollbar-color: #ddd #f6f6f6; background: #f9f9f9;}
.nav_menu div {color: #666; padding:10px; white-space:nowrap; font-size:14px; font-weight:600;}
.nav_menu div:hover {color: #333;}

.login_rules {margin:20px 0 10px; color:#666;}

.ot_table {margin: 10px 0 10px 0; max-width:100%;}
.ot_table th {font-size:12px; color:#666;}
.ot_table td {font-size:12px; padding:2px 5px; border: 1px solid #ddd;}

.zakey_kv{margin: 5px 0 2px;}
.zakey_key {margin-left: 15px;}
.zakkey_tab td:nth-child(4) {background:#fefeaa; color: #900; text-align:center;}
.zakkey_tab td:nth-child(5) {background:#eeeeff; color: #900; text-align:center; }

#dvmap {
 width: 500px; height: 500px;
 border: none;
}

#acc_panel_open, #cart_panel_open, #pe_dvorsel_panel_open {
 display: none;
 position: absolute;
 z-index: 999;
 top:40px; 
 right:5px;
 width:250px;
 height: auto;
 padding: 15px;
 background: #fff;
 border-radius: 4px 0 4px 4px;
 -webkit-box-shadow:0 2px 7px 1px rgba(0,0,0,0.25); box-shadow:0 2px 7px 1px rgba(0,0,0,0.25);
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 overflow: hidden;
 cursor: default;
}

.navmenu {flex:1; display:flex; scrollbar-width: thin; scrollbar-color: #ccf #d5d5ff;  overflow: auto;}
.navmenu ul {display:flex;}
.navmenu ul li {padding: 14px 10px 0 10px;}
.navmenu a label, .navmenu_vpm_l{font-size: 13px; text-shadow: black 0 0 5px; color:#fff; margin: 5px 0 5px 0; text-transform: uppercase; }
.navmenu li:hover a label, .navmenu_vpm:hover .navmenu_vpm_l {text-shadow: white 0 0 5px; transition: 0.5s;}
.navmenu_vpm_c {
 display: none;
 position: absolute;
 min-width: 170px;
 z-index: 999;
 background: #fff;
 border-radius: 4px 0 4px 4px;
 box-shadow: 0 2px 7px 1px rgba(0,0,0,0.25);
 padding: 10px 0;
}
.navmenu_vpm:hover .navmenu_vpm_c {display: block;}
.navmenu_vpm_c a div {padding: 10px;}
.menusel {color:#106090 !important;}

.lpanel_u_h {color:#333; font-size: 16px; margin: 10px; font-weight: 700;}
.lpanel_u_ul {margin-top: 10px;}
.lpanel_u_ul li {padding: 10px 10px;}
.lpanel_u_ul li a{
 color: #333;
}
.lpanel_u_ul li a:hover {
 color: #0e86b8;
}

.personal h1 {margin: 10px 0 0 15px;}
.personal p {margin: 10px 0 0 0; text-indent: 15px; text-align: justify;}


.addls_selvs {min-height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #eee; user-select: none; padding: 2px;}
.addls_selvs_btn, .addls_selvs_btns {min-height: 32px; display: flex; flex: 1 1; justify-content: center; align-items: center; cursor: pointer; padding: 0 20px; border-radius: 10px; }
.addls_selvs_btn {background: #eee; color: #555;}
.addls_selvs_btns {background: #fff; color: #222; font-weight:700;}
.btn_lsadd {height:28px; margin:2px 0 0 4px;}
.lsadd_platm {cursor:pointer;}
.lsadd_plat {width:600px; max-width:90%;}

.za_table {margin: 10px 0 10px 0; width:100%; max-width:100vw;}
.za_table tr {cursor:pointer;}
.za_table td {padding:5px; border: 1px solid #ddd;}
.za_table tr:nth-child(1n) {background: #fefefe;}
.za_table tr:nth-child(2n) {background: #f3f3f3;}
.za_table tr:hover td{background: #f3f3ff !important;}

.zav_head {color: #666; font-size: 16px; font-weight: 500; border-bottom: 1px solid #ddd; margin-bottom: 25px; padding:5px 0;}
.zav_t1 {color: #999; font-size: 14px; margin-top:5px; font-weight: 400;}
.zav_t2 {color: #111; font-size: 14px; margin-left:5px; font-weight:500;}
.zav_t3 {color: #333; font-size: 14px; margin-right:3px; font-weight:500;}
.zav_comment {width:100%; border-radius:5px; border: 1px solid #ddd; padding:5px; height: 60px;}
.zav_info {margin: 10px 0;}
.zav_info div {margin-top: 5px;}

.keys_table {margin: 10px 0 10px 0; width:100%; }
.keys_table th {padding:5px; border: 1px solid #ddd; font-size:12px; color:#666;}
.keys_table td {padding:5px; border: 1px solid #ddd; color:#111; cursor:pointer;}
.keys_table td:nth-child(1) {background: #fff url(img/edit.png) no-repeat 3px 4px; padding-left:20px;}
.keys_kvname {color: #106090;}
.keys_table tr:hover td{background-color: #eee !important;}
.key_ok {color:#090 !important;}
.key_wait {color:#990 !important;}
.keys_hist {max-height:160px; overflow-y: scroll; border: 1px solid #eee;}
.keys_anket {background:#ffc; border-radius:10px; border: 1px solid #eee; padding:10px;}
.no_auth_doc {background:#900; padding: 10px 10px; color:#fff; margin: 10px 0; text-align:center; border-radius:5px;}
.blinkwhite {animation: blinkwhite 0.5s linear infinite;}

.logs_group {display: flex; flex-wrap: wrap; width: 100%;}
.logs_elem {
 flex: 0 0 calc(100%/2 - 20px);
 padding:10px;
 margin: 20px 20px 0 0;
 height: calc(100vh - 200px);
 max-height: calc(100vh - 200px);
 border-radius: 5px;
 box-shadow: 0 2px 7px 1px rgba(0,0,0,0.25);
 background-color: #fff;
 min-width: 300px;
}
.logs_head {margin-bottom:10px; display:flex; align-items:center;}
.logs_cont {
 width:calc(100%);
 height:calc(100% - 30px);
 overflow-y: scroll;
 scrollbar-width: thin;
 scrollbar-color: #ddd #fafafa;
}
.logs_table {margin: 0px 0 10px 0;}
.logs_table th {padding:5px; border: 1px solid #ddd; font-size:12px; color:#666;}
.logs_table td {padding:2px 5px; border: 1px solid #ddd; color:#111;}
.logs_scroll {
 width:calc(100%);
 height:calc(100% - 30px);
 overflow-y: scroll;
 scrollbar-width: thin;
 scrollbar-color: #ddd #fafafa;
}

.g-recaptcha {margin-top:15px;}
.inp_title {color:#666; margin:10px 0 2px; font-weight:500;}
.inp_title2 {color:#666; margin:0px 0 2px; font-weight:500;}
.inp_title3 {color:#666; font-weight:500; margin:0 5px;}
.inp_comment {color:#3a3; margin:10px 0 2px; font-weight:500;}
.inp_comment2 {color:#999; margin:0px 0 2px; font-size:12px;}

.inp {
  height:26px;
  border: 1px solid #ccc; border-radius: 5px;
  color: #333;
  font-size: 14px;
  font-style: italic;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  padding: 1px 5px 1px 5px;
  background: #fff;
  outline:none;
}
.inp::placeholder {color: #999;}
.inp[readonly] {background:#eee;}
.inp100p {width: calc(100% - 10px);}
.inpobz {background:#ffa;}

.btn_panel_l {margin:15px 0 5px 0; display:flex; align-items:center;}
.btn_panel_r {margin:15px 0 5px 0; display:flex; justify-content:right; align-items:center;}
.btn {
 display:flex; align-items:center; justify-content:center; 
 margin-right: 10px;
 border-radius: 5px; border: 0; cursor: pointer;
 font-size: 14px; font-weight: bold;
 user-select: none; white-space: nowrap;
 box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 1px, rgba(0, 0, 0, 0.3) 0 0.2em 6px;
 transition: .3s;
}
.btn_blue {color: #fff; background: #0099CC;}
.btn_blue:hover {background-color: #0088BB;}
.btn_green {color: #fff; background: #00bc4c;} 
.btn_green:hover {background-color: #00ac3c;}
.btn_red {color: #fff; background: #900;} 
.btn_red:hover {background-color: #800;}
.btn_grey {color: #fff; background: #888;} 
.btn_grey:hover {background-color: #777;}

.err_i {width:20px; height:20px; position: absolute; margin: 4px 0 0 -27px; 
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
}
.msgerr {margin: 15px 0; animation: blinkmsgerr 0.5s linear infinite; }
.msgerr2 {animation: blinkmsgerr 0.5s linear infinite; }
.msgerr3 {padding:3px 5px; background:#900; border-radius:3px; animation: blinkmsgerr2 0.5s linear infinite; }
@keyframes blinkmsgerr {
 0% {color: #f22;}
 51% {color: #900;}
 100% {color: #f22;}
}
@keyframes blinkmsgerr2 {
 0% {color: #f99;}
 51% {color: #fff;}
 100% {color: #f99;}
}
.msgok {margin: 15px 0; animation: blinkmsgok 0.5s linear infinite;}
@keyframes blinkmsgok {
 0% {color: #2a2;}
 51% {color: #060;}
 100% {color: #2a2;}
}
@keyframes blinkwhite {
 0% {color: #fff;}
 51% {color: #aaa;}
 100% {color: #fff;}
}

.header {color: #666; font-size: 16px; padding: 0 0 5px 15px; font-weight: 500; border-bottom: 1px solid #ddd; margin-bottom: 25px;}
.header2 {color: #666; font-size: 14px; padding: 0 0 5px 5px; font-weight: 500; border-bottom: 1px solid #ddd; margin-bottom: 20px;}
.header3 {color: #666; font-size: 14px; padding: 0 0 5px 5px; font-weight: 500; border-bottom: 1px solid #ddd; margin-bottom: 10px;}

.sl_cpanel {display:flex;}

.btm {background-color: #113; display: flex; color: #eee; min-height:40px; padding:0 20px;}
.btm_c1 {flex:1; display:flex; align-items: center; min-width:95px; }
.btm_c2 {display: flex; align-items: center; flex-wrap: wrap;}
.btn_menu {padding:15px 0;}
.btn_menu div {padding: 3px 0;}
.btn_menu a{color:#eee;}
.btn_menu a:hover{color:#ddd;}

.hs_group {
 width: 100%;
 display: flex;
 overflow-y: scroll;
 padding: 5px 5px 10px;
 margin: 0 0 10px 0; 
}
.hs_elem {
 width: 260px; min-width: 260px; height: 70px;
 margin: 0 15px 0 0;
 position: relative;
 border-radius: 10px;
 box-shadow: 0 2px 7px 1px rgba(0,0,0,0.25);
 background: #fff url(img/dvor1.png) no-repeat 7px 7px;
 background-size: 50px, auto;
 cursor: pointer;
}
.hs_elem:hover {-webkit-transform: translateY(-1px); transform: translateY(+1px);}
.hs_elem_header {
 margin: 5px 5px 5px 65px;
 overflow: hidden;
 height:55px;
}
.hs_elem_header h5, .hs_elem_header p {
 font-size: 12px !important;
 margin-top: 5px;
 color: #333;
}
.hs_elem_header h5 {white-space: nowrap;}

.news_cont {width:700px; max-width:100%; padding: 15px; margin:auto; box-shadow: 0 2px 7px 1px rgba(0,0,0,0.25); border-radius: 5px; background:#fff; max-width:100%; margin-bottom: 20px;}
.news_head {display:flex; padding: 10px 0; border-bottom: 1px solid #ccc; margin-bottom:15px;}
.news_title {flex:1; font-weight:600; color:#106090;}
.news_date {color:#666; margin:0 10px;}
.news_cont img {max-width:100%;}

.help_cont {width:600px; max-width:100%; padding: 15px; margin:auto; box-shadow: 0 2px 7px 1px rgba(0,0,0,0.25); border-radius: 5px; background:#fff; max-width:100%; margin-bottom: 20px;}
.help_head {padding: 10px 0; border-bottom: 1px solid #ccc; margin:15px 0; font-weight:600; color:#222;}
.help_cont img {max-width:100%; margin:10px 0; border-radius:5px; border: 1px solid #ccc;}
.help_cont p {color:#a00; font-size:14px; margin: 5px 0; text-indent: 10px; font-size:14px;}
.help_cont ul li {padding: 3px 0;}
.help_asel {color:#900;}
.help_asel:hover {color:#900;}
.help_p1 {color:#111 !important;}
.help_cont hr{margin: 30px 0;}

.help_cont2 p {color:#111 !important;}
.help_cont2 h2 {color:#106090 !important;}
.help_cont2 h3 {color:#333 !important; margin: 10px 0 5px;}
.help_cont2 h4 {color:#090 !important; font-size: 14px; margin: 10px 0 5px;}
.help_cont2 h5 {color:#e00 !important; font-size: 14px; margin: 10px 0 5px;}



.fil_panel {display:flex; margin-bottom: 5px;}
.fil_el {display:flex; white-space: nowrap; align-items: center;}
.fil_panel input[type="text"], .fil_panel select {width: 100%; min-width:50px; margin-right:5px; padding: 2px 3px; border: 1px solid #ccc; border-radius: 5px; background: #fff;}
.fil_panel input[type="checkbox"] {}
.fil_panel label {color:#666; font-size: 12px; margin-right:1px;}
.fil_btn {height:22px; padding: 0 10px; border:0; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 1px, rgba(0, 0, 0, 0.3) 0 0.2em 6px; cursor: pointer; display:flex; align-items:center; user-select: none; white-space: nowrap;}

.block_photos img {max-height:150px; cursor:pointer; margin-right:3px;}
.block_photo {max-width:100%; width:900px;}

.log_imgs {display:flex;}
.log_imgs img {max-height:150px; cursor:pointer; margin-right:3px;}
.log_imgs_photo {max-width:100%; width:900px;}

.cam_view_fr {width:100%; aspect-ratio: 2/1.13; max-height: calc(100vh - 150px);}
.cam_view_nam {color:$666; width:100%; text-align:center;}
.camlst_gr {background:#eee;  padding:3px 5px 0 5px; font-weight: 700; margin-top:5px; color: #004080;}
.camlst_els {display:flex;  width: 100%; max-width: calc(100%); margin-top:2px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #aaa #eee;}
.camlst_el {width: 154px; min-width: 120px; margin: 5px 5px 5px 5px; border-radius: 3px; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.15); cursor:pointer;}
.camlst_img {width: 100%; height: 90px; display: flex; justify-content: center; align-items: center;}
.camlst_img img {max-width: calc(100% - 4px); max-height: calc(100% - 4px);}
.camlst_gn {height: 20px; display: flex; justify-content: center; align-items: center; padding: 0 5px; color:#004080; font-weight: 700;}
.camlst_nam {height: 16px; margin-bottom:5px; display: flex; justify-content: center; align-items: center; padding: 0 5px; color:#333; font-size:11px; overflow: hidden;}


.winmodal_bg {
 position: fixed; z-index: 1001;
 top: 0; left: 0; width: 100%; height: 100%;
 background: #333; opacity: 0.7;
}
.winmodal_frm {
 display: flex;
 position: fixed; z-index: 1002;
 top: 0; left: 0; width: 100%; height: 100%;
 align-items: center; align-content: center; justify-content: center; 
}
.winmodal_w {
 border: 1px solid #666; border-radius: 10px; box-shadow:0 2px 7px 1px rgba(0,0,0,0.25);
 padding: 10px;
 opacity: 1;
 background: #fff;
 overflow-y: auto;
 margin:10px;
 transition: 2s;
}
.winmodal_cont {
 max-height: calc(100vh - 150px);
 border: 1px solid #eee;
 overflow-y: auto;
 scrollbar-width: thin;
 scrollbar-color: #aaa #eee;
}
.winmodal_headp {
 display: flex;
}
.winmodal_headtext {
 flex: 1;
 height: 24px;
 padding-right: 15px;
 display: flex;
 align-items: center; 
 white-space: nowrap; overflow: hidden;
}

.winmodal_close {
 display: flex;
 width: 22px; height: 22px;
 padding-bottom:1px;
 align-items: center; align-content: center; justify-content: center;
 border-radius: 100%;
 -webkit-user-select: none;
 cursor: pointer;
 font-size: 14px;
 background: #fff;
}
.winmodal_close2 {
 display: flex;
 width: 50px; height: 30px;
 align-items: center; align-content: center; justify-content: center;
 border-radius: 7px;
 -webkit-user-select: none;
 cursor: pointer;
 font-size: 14px; color: #fff; margin-top: 5px;
}
.winmodal_close:hover {background: #fafafa; box-shadow: 0 0 5px 2px rgba(0,0,0,0.07)}
.winmodal_bottomp {
 display: flex;
 border-top: 1px solid #ddd; 
 margin-top: 20px;
}
.btn_close {font-size: 24px; width: 24px; height: 24px; cursor:pointer; color: #106090; text-decoration: none; }
.btn_close:hover {color: #3070A0;}

.TelCall {padding: 7px 20px; color: #fff; background: #00bc4c; border-radius:5px; user-select: none; 
 position: fixed;
 z-index: 9999;
 bottom: 20px; 
 right: 20px;
 box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 1px, rgba(0, 0, 0, 0.3) 0 0.2em 6px;
}
.TelCall:hover {color: #fff; background-color: #00ac3c;}

.videoplay { width: 100%; position: relative;}
.videoplay::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
    border-top-width: 20px;
    border-right-width: 20px;
    border-bottom-width: 20px;
    border-left-color: transparent;
  border-top-width: 12px;
  border-bottom-width: 12px;
  border-left-color: #fff;
  border-right-width: 0;
  transition: transform 0.2s ease;
}
.videoplay:hover::before{transform: scale(1.2);}
 
@media (max-width: 520px) {
 .navlogo {margin:0 5px;}
 .frm_center {width:100% !important;}
 .cont {padding: 5px !important;}
 .hs_group {margin: -5px 0 10px 0; }
 .nav_dvorsel_panel {max-width: calc(100% - 120px);}
 #dvmap {width: calc(100vw - 10px); height: calc(100vw - 10px);}
 .nav_menu div { padding:10px 5px; font-size:13px;}
 .logs_elem {flex: 0 100%; margin:5px 10px 0 0;}
}

@media (max-width: 450px) {
 .btn_lsadd {display:none;}
}