header {
    width: 100%;
    background: #163355;
    color: #F2F0EC;
    padding: 15px;
    margin-bottom: 15px;
}

footer {
    width: 100%;
    background: #163355;
    color: #F2F0EC;
    padding: 15px;
    margin-top: 15px;
}

body {
    font-size: 0.8rem;
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
    body {
        font-size: 0.9rem;
    }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
    body {
        font-size: 1.0rem;
    }
}

@media (min-width: 2000px) {
    body {
        font-size: 1.3rem;
    }
}

h1 {
    font-size: 200%;
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 125%;
}

h4 {
    font-size: 110%;
}

.bg {
    background: #e7e7e7;
}

.box {
    background: #F2F0EC;
    border-radius: 5px;
}

.primary_vivid {
    color: #3c9ddd;
}

.primary_pastel {
    color: #6EA7CC;
}

.secondary {
    color: #F49E53;
}

.scrollable {
    overflow-x: auto;
}

.scrollable table {
    min-width: 800px;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}