#main {
    display: grid;
    grid-template-areas:    "top top top top top top"
                            "mid mid mid mid mid mid"
                            "bot bot bot bot bot bot";
    grid-template-columns: 23%;
    grid-template-rows: min-content 850px;
}

iframe {
    width: 100%;
}

#top {
    grid-area: top;
}

#left {
    grid-area: left;
}

#mid {
    grid-area: mid;
}

#bot {
    grid-area: bot;
    background-color: #2C3747;
    color: #FFFFFF;
}

#titol {
    font-size: 25px;
    font-weight: bold;
}

.bottom-links {
    text-decoration: none;
    color: inherit;
}

#bot-padding {
    padding: 10px;
}

#bot-title {
    text-align: center;
    font-size: 22;
    font-weight: 500;
}

#bot-table {
    padding: 5px 20px;
}

.scrollable {
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

#bod-padding {
    padding: 15px;
}

#left-title {
    font-size: 22px;
    font-weight: 600;
}

.discret-click {
    text-decoration: none;
    color: inherit;
}

.center {
    display: flex;
    justify-content: center;
  	align-items: center;
    height: 100%;
}

.h-center {
    display: flex;
    justify-content: center;
  	align-items: center;
    padding: 10px;
}

td.error {
    color: #dd0000;
    font-weight: 700;
}

th.error {
    color: #dd0000;
    font-weight: 700;
}

label.error {
    color: #dd0000;
    font-weight: 700;
}

.spacer {
    height: 100px;
}

.v-spacer {
   height: 50px; 
}

.h-spacer {
    width: 50px;
}

td.input {
    width: 100%;
}

tr.selected {
    background-color: #7c93b3;
}