html,
body {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: system-ui, 'Verdana', sans-serif;
    font-size: 15px;
    font-weight: 500;
}

* {
    box-sizing: border-box;
}

:root {
    --leftbar-width: 260px;
    --leftbar-shadow-color: #dfe1ee;
}

body {
    background: #f1f4f9;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

#body-container {
    display: flex;
    align-items: stretch;
    width: 100vw;
    min-height: 100vh;
}

#leftbar {
    position: relative;
    background: 0;
    width: var(--leftbar-width);
    padding: 20px;
    padding-top: 35px;
    color: #7989a5;
}

#leftbar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 2px 0px 15px 2px var(--leftbar-shadow-color);
}

#leftbar>.header {
    font-size: 22px;
    text-align: center;
}

#leftbar>hr {
    margin-bottom: 36px;
}

#leftbar>.button {
    display: block;
    color: #3e4b5b;
    padding: 10px 20px;
    position: relative;
    margin: 5px 0;
    text-decoration: none;
}

#leftbar>.button:hover {
    background: #cddfff;
}

#leftbar>.button>.fa {
    display: inline-block;
    width: 20px;
    margin-left: -4px;
    text-align: center;
}

#leftbar>.button.active {
    background: #4777cd;
    color: #f4f7fc;
}

#leftbar>.button.active:hover {
    background: #658acf;
}

#leftbar .button.arrow {
    position: relative;
}

#leftbar .button.arrow::after {
    content: '';
    position: absolute;
    top: calc(50% - 15px);
    left: calc(100% + 11px);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 10px solid var(--leftbar-shadow-color);
    transform: rotateX(45deg);
}

#leftbar .submenu>.button {
    background: #eff1f7;
    display: block;
    color: #3e4b5b;
    padding: 8px 20px;
    padding-left: 40px;
    position: relative;
    margin: 0;
    text-decoration: none;
}

#leftbar .submenu>.button:first-child {
    margin-top: -5px;
}

#leftbar .submenu>.button:hover {
    background: #dbe3fc;
    ;
}

#leftbar .submenu>.button.active {
    background: #bbc9f7;
    color: black;
}

#leftbar .submenu>.button.active:hover {
    background: #c9d5fc;
}

#content {
    flex: 1;
    padding: 10px;
    padding-top: 25px;
    padding-left: 30px;
    padding-right: 30px;
}

#content>.header {
    color: #4777cd;
    font-size: 28px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 42px;
}

#content>.box {
    background: #fff;
    box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.03);
    padding: 12px;
    display: flex;
    flex-direction: column;

}

@media only screen and (max-width: 600px) {
    :root {
        --leftbar-width: 0;
    }

    #body-container {
        flex-direction: column;
    }

    #leftbar {
        display: flex;
        position: static;
        width: 100%;
        height: 50px;
        padding: 0;
        border-bottom: 1px solid rgb(163, 158, 158);
    }

    #leftbar::before {
        display: none;
    }

    #leftbar>.header {
        margin: auto 10px auto;
    }

    #leftbar>.button {
        margin: 0;
    }

    #leftbar>.button:not(.active)+.button:not(.active) {
        border-left: 1px solid rgb(214, 209, 209);
    }

    #leftbar>.button>.fa {
        margin-left: 0;
        margin-top: 5px;
    }

    #leftbar>.button>span {
        display: none;
    }

    #leftbar>.button.active::after {
        display: none;
    }

    #leftbar .submenu {
        position: absolute;
        top: 97px;
        display: flex;
        align-items: baseline;
    }

    #leftbar .submenu>a.button {
        padding: 4px 20px;
    }

    #leftbar>hr {
        visibility: hidden;
        flex: 1;
    }

    #content {
        padding: 0;
        height: 100%;
    }

    #content>.header {
        padding: 10px;
        margin-bottom: 0px;
    }

    #content>.header.with-submenu {
        padding-bottom: 35px;
    }
}

.flex-rows {
    display: flex;
    flex-direction: column;
}

.table-concept {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

.table-concept .table-display {
    display: block;
}

.table-concept table {
    width: 100%;
    display: table;
}

.table-concept .pagination {
    display: flex;
}

.table-concept .pagination> a.active {
    color: #ffffff;
    background-color: #00000030;
    cursor: default;
}

.table-concept .pagination> a.disabled {
    opacity: 0.5;
    cursor: default;
}
.table-concept .pagination> a.disabled:hover {
    background-color: inherit;
}

.table-concept .table-display {
    background-color: #e2e2e2;
    text-align: right;
    padding: 8px;
    position: sticky;
    left: 0;
}

.table-concept table {
    background-color: #ffffff;
    border-collapse: collapse;
}

.table-concept table tr:last-child td {
    border-bottom: 0;
}

.table-concept table tr th,
.table-concept table tr td {
    text-align: left;
    padding: 8px 12px;
    box-sizing: border-box;
}

.table-concept table tr th {
    color: #ffffff;
    font-weight: normal;
    background-color: #4777cd;
    border-top: solid 2px #d8d8d8;
    border-bottom: solid 2px #d8d8d8;
    position: sticky;
    top: 0;
}

.table-concept table tr td {
    border: solid 1px #d8d8d8;
    border-left: 0;
    border-right: 0;
    white-space: nowrap;
}

.table-concept table tbody tr {
    transition: background-color 150ms ease-out;
}

.table-concept table tbody tr:nth-child(2n) {
    background-color: whitesmoke;
}

.table-concept table tbody tr:hover {
    background-color: #00000030;
}

.table-concept .pagination {
    display: flex;
    width: 100%;
    position: sticky;
    bottom: 0;
    left: 0;
    background-color: #4777cd;
    color: #ffffff;
}


.table-concept .pagination > * {
    padding: 8px 12px;
}

.table-concept .pagination > span {
    background-color: #e2e2e2;
    color: #000000;
}

.table-concept .pagination > a {
    cursor: pointer;
}

.table-concept .pagination > a:hover {
    background-color: #00000050;
}

.table-concept .pagination > a:active {
    background-color: #00000020;
}

.table-title {
    color: #ffffff;
    background-color: #2f2f2f;
    padding: 8px;
}

.table-title h2 {
    margin: 0;
    padding: 0;
}

a.button, a.button:hover, a.button:focus, a.button:active, a.button:visited {
    text-decoration: none;
    color: inherit;
}