/*ДЕЛАЕМ СЕТКУ GRID*/
.container-grid {
    display: grid; 
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    /*grid-gap: 5px;*/
    padding: 5px;
    margin-top: 15px;
    border: 1px solid #eee;
    /*grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";*/
}
.menu-grid {
    /*grid-area: m;*/
    grid-row: 1;
    grid-column: span 4;
    padding: 5px;
    border: 1px solid #eee;
}
.content-grid {
    /*grid-area: c;*/
    grid-row: 1;
    grid-column: span 8;
    padding: 5px;
    border: 1px solid #eee;
}
@media screen and (max-width: 767px) {
    .menu-grid {
        grid-row: 2;
        grid-column: span 12;
    }
    .content-grid {
        grid-row: 3;
        grid-column: span 12;
    }
}
.red {
    color:red;
}

.alert-head {
    color: #31708f;
    background-color: #f5f5f5;
    border-color: #eee;
    border-end-end-radius: 80px 80px;
}

.mytable {
    border: 1px solid #eee;
    width: 100%;
    /*margin:auto;*/
    border-collapse: collapse; 

}
.mytable th {
    position: sticky;
    top: 0;
    font-weight: bold;
    background-color: #16a3fe;/*#efefef;*/
    color: #fff;
    border: 1px solid #dddddd;
    padding: 5px 10px;
    vertical-align: bottom;
}
.mytable td{
    border: 1px solid #eee;
    text-align: left;
    word-wrap: break-word;
    padding: 5px 10px;
}
.bg-blue {
    background-color: #f7f7f7;
}
.bg-white {
    background-color: #fff;
}