/* Hide scrollbar for IE, Edge and Firefox */
html {
  scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}
/* Default page style */
body {
    padding: 0;
    margin: 0;
    font: 10pt/1.3em Tahoma, FreeSans, sans-serif;
    color: #575555;
    background-color: #e6e4da;
}
a, a:visited { color: #216fd7; }
a label {
    font-size: 12pt;
    cursor: pointer
}
/* page style */
.wrapper {
    margin: 0 auto;
    --topbar-height:35px;
    --lenta-width:400px;
    --padding-width:10px;
    --border-width:1px;
    --width: 100%;
    --height: 100vh;
    overflow: none;
}
/* top block position fixed when scroll and overlap content*/
.header {
    position: relative;
    float: left;
    height: var(--topbar-height);
    width: 100%;
    background: #dcd8c9;
    border-bottom: 1px solid #a8a8a8;
    
    
    position: fixed;
    #top: 0;
    #left: 0;
    z-index: 999;
    width: 100%;
    #height: 23px;
}
.level2 {
    width: calc(var(--width) - var(--lenta-width));
}
.header label.title {
    float: left;
    padding: 10px;
    color: #5386aa;
    font-size: 12pt;
    font-weight: bold;
}
/* main content */
.content {
    float: left;
    background: #E6E4DA;
    width: calc(var(--width) - var(--lenta-width));
    
    
    position: relative;
    top: calc(var(--topbar-height) + var(--border-width));
    
}
.content2 {
    float: left;
    background: #E6E4DA;
    width: calc(var(--width) - var(--padding-width) * 2);
    
    overflow-y: auto;
    height: 1000px;
    position: relative;
    top: calc(var(--topbar-height) + var(--border-width));
   border-right: 1px solid #a8a8a8;
}
.login {
    position: absolute;
    top: 180px;
    left: 50%;
    width: 520px;
    margin-left: -260px;
    text-align: left;
}
.login label, .login button {
    display: block;
}
.login input[type="text"], .login input[type="password"], .login input[type="submit"] {
    font-size: 1.9em;
}
.padded {
    padding: 10px;
}
/* rightside panel */
#lenta {
    background: #e6e4da;
    width: calc(var(--lenta-width) - var(--padding-width) * 2 - var(--border-width));
    float: right;
    padding: var(--padding-width);
    border-left: 1px solid #a8a8a8;
    
    position: relative;
    top: calc(var(--topbar-height) + var(--border-width));
}
#lenta label {
    font-size: 12pt;
    display: block;
    padding: 10px 0 5px 0;
}
#lenta label.problem-list-title{
    color: black;
}
hr {
    clear: both;
    visibility: hidden;
    margin: 2px;
}
#lenta ol {
    padding: 0;
    margin: 0;
    list-style-position: inline;
    list-style-type: none;
}
#lenta ol li {
    border-bottom: dashed 1px #999;
}
#lenta ol li span {
    padding: 0 5px;
}
#lenta ol li span.datetime {color: white; }
#lenta ol li span.description { color: black; }
#lenta ol li.group_critical.severity3 span.datetime, 
#lenta ol li.group_critical.severity4 span.datetime, 
#lenta ol li.group_critical.severity5 span.datetime { background-color: #ae1414; }
#lenta ol li.group_alert.severity2 span.datetime { background-color: #bd6b00; }
#lenta ol li.group_all span.datetime { background-color: #909090; }
#lenta ol li.group_all span.description { color: #575555; }
#lenta ol li.group_all.severity2 span.datetime { background-color: #e3caaa; }
#lenta ol li.group_all.severity3 span.datetime { background-color: #bf8888; }
#problems_all {
    padding-bottom: var(--topbar-height);
}
#lenta h3{
    display: inline;
}
#lenta .restored { background-color: #e0faca;}

/* footer */
.footer {
    height: var(--topbar-height);
    width: 100%;
    background: #dcd8c9;
    clear: both;
    position: relative;

    margin-top: - var(--topbar-height);
}
.right {
    float: right;
    padding-right: 10px;
}
/* menu */
.menu {
    position: absolute;
    display: inline;
    padding-left: 20px;
    bottom: 0px;
    width: -webkit-calc(100% - 400px);
    width:    -moz-calc(100% - 400px);
    width:         calc(100% - 400px);
}
.menu a {
    float: left;
    display: block;
    padding: 5px 10px;text-decoration: none;
}
.menu a.active {
    color: #fff;
    background-color: #a8a8a8;
    
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
/* map */
.map {
    position: relative;
}
.map_element, .submap_element {
    position: absolute;
    font-weight: bold;
    text-align: center;
    font-family: Tahoma, FreeSans, sans-serif;
    
    cursor: pointer;
}
.map_element label{
    position: absolute;
    width: 74px;
    height: 31px;
    line-height: 31px;
    font-size: 16px;
    color: black;
}
.submap_title{
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: black;
}
.submap_label{
    position: absolute;
    font-size: 18px;
    color: #216fd7;
}
.submap_value{
    position: absolute;
    font-size: 11px;
    color: black;
}
.submap_diagram{
    position: absolute;
    font-size: 18px;
    color: black;
}
.submap_label_small{
    position: absolute;
    font-size: 12px;
    color: #216fd7;
}
.rotate90{
    writing-mode: vertical-rl;
    left: 4px;
}
.map_element label.small{
    font-size: 13px;
}
.cell {
    z-index: 1;
}
.cell_gray {
    background-color: darkgray;
    #border: 3px solid #00998d;
}
.cell_green {
    background-color: #d1ed70;
    #border: 3px solid #00998d;
}
.cell_yellow {
    background-color: #ffff64;
    #border: 3px solid #00998d;
}
.cell_red {
    background-color: #ff0000;
    #border: 3px solid #00998d;
}
.door {
    top: -2px;
    z-index: 1;
}
.door_green {
    background-color: #5c9b18;z-index: 1;
}
.door_yellow {
    background-color: #ffff64;z-index: 1;
}
.door_red {
    background-color: #ff0000;z-index: 1;
}
.transformator {
    z-index: 0;
}
.transformator .submap_title {
    top: 10px;
}

/* raw data section */
.raw_data {
    border-bottom: dashed 1px #999;
}


.hided {
    display: none;
}

/* history_table */
.history_table {
    
    border-collapse: collapse;
    margin: 10px 0;
    table-layout:fixed;
}
.history_table tr td, .history_table tr th
{
    padding:5px;
    border: 1px solid black;
}

.history_table .normal_event { background-color: #909090; color: #FFF; font-weight: normal; }
.history_table .warning_event { background-color: #bd6b00; color: #FFF; font-weight: normal; }
.history_table .alert_event { background-color: #ae1414; color: #FFF; font-weight: normal; }