.nav {background-color: #ddf;}

.panel_r10p10 {padding:10px; border: 1px solid #aaa; border-radius:10px;}


.pe_tab {margin:5px 5px 5px 0px; background:#fff; width:100%;}
.pe_tab th{border: 1px solid #C0C0C0; padding: 2px 5px; font-size: 12px;}
.pe_tab td{border: 1px solid #C0C0C0; padding: 2px 5px; font-size: 12px; word-wrap:break-word;}
.pe_tab_trdel td {text-decoration: line-through; color: #c00;}

.st_adm:before {content: "Администратор"; color: #900;}
.st_ohr:before {content: "Охрана"; color: #990;}
.st_np:before {content: "Не подтвержден"; color: #999;}
.st_skud:before {content: "Внесен"; color: #090; cursor:pointer;}
.st_noskud:before {content: "Не внесен"; color: #900; cursor:pointer;}

.pe_dvor_cols {display: flex;}
.pe_dvor_col {
 position: relative;
 padding: 5px 10px 10px 10px;
 box-shadow:0 2px 7px 1px rgba(0,0,0,0.25);
}
.pe_dvor_table td {cursor:pointer; position: relative;}
.pe_dvor_table td[data-del='0']{width:24px; background: url('/img/on.png') no-repeat center;}
.pe_dvor_table td[data-del='1']{width:24px; background: url('/img/off.png') no-repeat center;}

.pe_ted_panel {width: calc(100% - 3px); position: absolute; top:0; left:1px; z-index:999;}
.pe_ted_inp {width:100%; padding: 1px 5px; outline: none; border:0; background:#fff;}

.pe_fed_panel {position: absolute; left:0; top: 100px; width: 100%; background: #fff; padding:0 10px;}
.pe_fed_inp {width:100%; padding: 4px 5px; outline: none; border:1px solid #ddd; border-radius: 5px;}
.pe_fed_str {display:flex; padding: 6px 0 6px; border-bottom: 1px solid #eee;}
.pe_fed_col1 {flex:1;}
.pe_fed_col2 {display:flex; align-items:center;}
.pe_fed_col2 a {font-size:0;}
.pe_fed_col2 img {cursor:pointer; margin-left: 5px;}
.pe_fed_add { padding: 0px 0 5px 0; color: #060; font-weight: bold; cursor:pointer;}

.pe_dvorphoto_cont {
 display:flex;
 border-radius:10px;
 overflow: hidden;
 cursor: pointer;
 width:150px; height:150px;
}

.pe_avto_photo_cont {
 display:flex;
 justify-content:center; align-items:center;
 border-radius:10px;
 overflow: hidden;
 cursor: pointer;
 width:150px; height:150px;
}
.pe_avto_photo_cont img {max-width:100%; max-height:100%;}
.pe_avto_big_photo {max-width:100%; width:900px;}

.tabs {margin-top:8px; margin-bottom:7px;}
.tabs li {list-style:none; display:inline; margin-right: 5px;}
.tabs li a {
 background-color:#ccc;
 color:#000;
 padding:8px 14px 8px 14px;
 font-size:9px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-weight:bold;
 text-transform:uppercase;
 border:1px solid #ccc;
 border-radius: 5px 5px 0 0;
}
.tabs li a:hover {background-color:#ddd;}
.tabs li a.tabactive {
 background-color:#fff;
 border-bottom: 2px solid #fff;
}
.tabcont_active {
 padding:5px 0;
 background-color:#fff;
 border-top: 1px solid #ccc;
}
.tabcont {display:none;}

.pe_sel_statsus {margin-left:5px; background:#ff9;}

.pe_jf_groops {display: grid; gap:10px; grid-auto-rows: min-content; grid-template-columns: repeat(3, 1fr);}
.pe_jf_colhead {padding:5px; color:#666;}
.pe_jf_col {
 padding:5px;
 border-radius:5px; 
 background:#fff;
 box-shadow: 0px 2px 2px #00000024, 0px 1px 5px #0003;
 max-height: calc(100vh - 200px); overflow-y: scroll;
}
.jf_tab {width:100%;}
.jf_tab td {padding:3px 5px; cursor: pointer;}
.jf_tab td:nth-child(1) {background-color: #106090; width:20px; min-width:20px; mask-repeat: no-repeat; mask-position: center; }
.jf_tab td:nth-child(1):hover{background-color: #004070;}
.jf_tab td:nth-child(1) {mask-image: url(img/edit.svg);}
.jf_tab td:nth-child(2) {color: #106090;}
.jf_tab td:nth-child(2):hover {color: #004070;}
.js_tab_sel td {color:#181 !important;}
.pe_del td {color:#900 !important; text-decoration:line-through}
.jf_add {margin: 10px 0 5px 20px;}
.jf_add a {color:#300 !important;}
.pe_neopl {background:#faa !important;}

.pe_hm_group {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
}

.pe_hm_elem {
 flex: 0 0 calc(100%/2 - 20px);
 padding:10px;
 margin: 20px 20px 0 0;
 height: 400px;
 max-height: calc(100vh - 110px);
 border-radius: 5px;
 box-shadow: 0 2px 7px 1px rgba(0,0,0,0.25);
 background-color: #fff;
 min-width: 300px;
}
.pe_hm_head {margin-bottom:10px;}
.pe_hm_cont {
 width:calc(100%);
 height:calc(100% - 30px);
 overflow-y: scroll;
 scrollbar-width: thin;
 scrollbar-color: #ddd #fafafa;
}
.pe_hm_tab {width:100%;}
.pe_hm_tab th{border: 1px solid #eee; padding: 2px 5px; font-size: 11px;}
.pe_hm_tab td{border: 1px solid #eee; padding: 2px 5px; font-size: 12px; word-wrap:break-word;}
.pe_hm_tab td a{font-size: 12px;}

.pe_keys_table {margin: 10px 0 10px 0; width:100%; }
.pe_keys_table th {padding:5px; border: 1px solid #ddd; font-size:12px; color:#666;}
.pe_keys_table td {padding:5px; border: 1px solid #ddd; color:#111;}
.pe_keys_kvname {color: #106090;}
.pe_btn_sskud {width: 100px; height:20px; font-size:11px; }
.kvedit_kkey {font-weight:700;}
.kvedit_kkey span {color:#999; margin-left:5px; font-size:11px;}

.pe_ls_table {margin: 10px 0 10px 0; width:100%;}
.pe_ls_table tr {cursor:pointer;}
.pe_ls_table th {font-size:12px;}
.pe_ls_table td {padding:5px; border: 1px solid #ddd; font-size:12px;}
.pe_ls_table tr:hover td {background: #f3f3ff !important;}


.pe_post_tab {margin:10px 0 25px 0; box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 1px, rgba(0, 0, 0, 0.3) 0 0.2em 6px; outline:0;}
.pe_post_tab tr {height:25px; }
.pe_post_tab th {font-size: 11px; border:1px solid #C0C0C0; text-align:center; padding: 0 5px;}
.pe_post_tab td {padding: 1px 5px; border: 1px solid #C0C0C0; font-size: 12px;}
.pe_post_tab td:nth-child(4) {text-align:center; cursor: pointer; color:#900;}
.pe_post_tab td input{width:calc(100% - 4px); outline:0; padding: 2px 3px; border-radius:3px; border: 1px solid #999;}

.ot_sv_kv {margin: 5px 0 2px;}
.ot_sv_ot {margin: 5px 0 2px;}
.ot_sv_ot a {margin: 5px 0 2px; color:#393;}

.btn_plmi {display:flex;}
.btn_plmi div {width:30px;}

.i_ok, .i_ok2, .i_ok3 {color:#090; font-weight:800;}
.i_ok {position: absolute; margin: 2px 0 0 -18px; font-size:16px;}
.i_ok2 {margin-left: 5px;}
.i_ok3 {position: absolute; margin: -145px 0 0 130px; font-size:16px; text-shadow: 1px 0 1px #fff, 0 1px 1px #fff, -1px 0 1px #fff, 0 -1px 1px #fff;}
.i_ok:before, .i_ok2:before, .i_ok3:before {content: "\2713";}
.i_err, .i_err2, .i_err3 {
 border-radius: 50%;
 color: #fff; font-weight: bold;
 padding: 2px 8px;
 animation: blink_ierrbg 0.5s linear infinite;
}
.i_err {position: absolute; margin: 3px 0 0 -24px; width: 20px; height: 20px; font-size: 15px;}
.i_err2 {margin-left: 5px;}
.i_err3 {position: absolute; margin: -145px 0 0 125px;}
.i_err:before, .i_err2:before, .i_err3:before {content: "!";}
@keyframes blink_ierrbg {
 0% {background: #f22;}
 51% {background: #900;}
 100% {background: #f22;}
}

.i_load, .i_load2, .i_load3 {
 position: absolute; 
 width: 22px;
 aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#0000,#900) content-box;
 -webkit-mask: repeating-conic-gradient(#0000 0deg, #000 1deg 12deg, #0000 13deg 28deg), radial-gradient(farthest-side,#0000 calc(98% - 5px),#000 calc(100% - 5px));
 mask: repeating-conic-gradient(#0000 0deg, #000 1deg 12deg, #0000 13deg 28deg), radial-gradient(farthest-side,#0000 calc(98% - 5px),#000 calc(100% - 5px));
 -webkit-mask-composite: destination-in;
 mask-composite: intersect;
 animation: blink_iload 1s infinite steps(13);
}
.i_load {margin: 2px 0 0 -24px;}
.i_load2 {margin: -4px 0 0 5px;}
.i_load3 {margin: -145px 0 0 125px;}
@keyframes blink_iload {to{transform: rotate(1turn)}}

@media (max-width: 680px) {
.pe_hm_elem {flex: 0 100%; margin:5px 0;}
.nav_dvorsel {width: 40px;}
#pe_dvorsel_panel_open{left:5px; width: calc(100% - 10px); position:fixed;}
}