body {
    margin:0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #e8f2fb;
}

DIV { margin: 0 }
CHECKBOX { font-size: 12px; }

hr {
  height: 1px;
  border: 0;
  background-color: #e8f2fb;
  margin: 20px 0 20px 0;
}
.hr_grey { background-color: #ccd3d9; }

IMG { 
 border-color: #e1d5cf; 
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

ul {
    list-style-type: square;
    padding: 0;
    margin: 0;
}

li {
    list-style-position: inside;
    padding: 5px;
}
li::marker {
    color: #0f74b8;
}

/* ===== Utility ==== */
.pt5 {padding-top: 5px;}
.pb5 {padding-bottom: 5px;}
.pl5 {padding-left: 5px;}
.pr5 {padding-right: 5px;}

.p10 { padding: 10px; }
.pt10 { padding-top: 10px; }

.p20 { padding: 20px; }
.pt20 { padding-top: 20px; }
.pb20 { padding-bottom: 20px; }
.pl20 { padding-left: 20px; }
.pr20 { padding-right: 20px; }

.m10 {margin: 20px;}
.mt10 {margin-top:10px;}
.mb10 {margin-bottom:10px;}

.m20 {margin: 20px;}
.m20 {margin: 30px;}
.mt20 {margin-top:20px;}
.mb20 {margin-bottom:20px;}

.mt30 {margin-top:30px;}
.mb30 {margin-bottom:30px;}

.center {margin-left: auto; margin-right: auto;}

.w300 {width: 300px;}
.w600 {width: 600px;}

.center {text-align: center;}

.bg_blue {
    background-color: #e8f2fb;
}

/* ===== Common ==== */
.main_frame {
    display: flex; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background-color: #ffffff; 
    vertical-align: top; 
    position: relative; 
}
.sideBar_container {
    vertical-align: top; 
    background-color: #b2d5f1; 
    width: fit-content;
    flex-shrink: 0;
}
.content_container {
    flex: 1; 
    width: 90%;
    max-width: 1100px;
    vertical-align: top; 
    background-color: #ffffff;
    margin: 0;
    padding: 40px;
    padding-top: 60px;
}

@media screen and (max-width: 900px) {
    .main_frame {display: block;} 
    .sideBar_container {width: 100%;}
    .content_container {
        width: auto;
        max-width: 900px;
        padding: 30px;
    }
}
@media screen and (max-width: 680px) {
    .content_container {padding: 20px;}
}

.content_header {
    padding-top: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.list_header {
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    border-radius: 5px;
    background: #e8f2fb;
    font-weight: bold;
}

.locked_link {
    cursor: pointer;
}

.content_toggle {
    display: inline-block;
    padding: 0;
    font-weight: 500;
    text-decoration: none;
}

/* ===== BOX ==== */

/* стандартный блок все углы мягкие, по вертикали топ */
.box {    
    border: 0;   
    max-width: 960px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.20), 0 1px 1px rgba(0,0,0,0.20);
    vertical-align: top;
} 
.box_spacing {
    margin-top: 30px;
    padding: 20px;
    padding-top: 30px;
    padding-bottom: 50px;
}

/* ===== GRID ===== */
.data_grid_2cols {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 10px;
    align-items: baseline;
}
.data_grid_3cols {
    display: grid;
    grid-template-columns: max-content 1fr auto;
    gap: 6px 10px;
    align-items: baseline;
}