:root {
    --samgalope-gray0: #fff;
    --samgalope-gray1: #ccc;
    --samgalope-gray2: #999;
    --samgalope-gray3: #666;
    --samgalope-gray4: #333;
    --samgalope-dark-primary-color: #3D0F3C;
    --samgalope-dark-primary-hover: rgb(37, 10, 37);
    --samgalope-default-primary-color: #293241;
    --samgalope-light-primary-color: #C5CAE9;
    --samgalope-primary-text: #293241;
    --samgalope-accent-color: #D32F2F;
    --samgalope-accent-hover: #f25d27;
    --samgalope-accent-active: #6a1308;
    --samgalope-accent-text: #fff;
    --samgalope-primary-text-color: #212121;
    --samgalope-secondary-text-color: #757575;
    --samgalope-divider-color: border-color: #BDBDBD;
    --samgalope-font-heading: 'Oswald', sans-serif;
    --samgalope-font-text: 'Lato', sans-serif
}

body,
html {
    overflow-x: hidden;
    scroll-behavior: smooth
}

.dropdown-item {
    white-space: unset;
    width: 360px
}

@keyframes blink {
    0% {
        color: red
    }
    25% {
        color: #fff
    }
    50% {
        color: red
    }
    100% {
        color: #fff
    }
}

.blink {
    animation: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite
}

.mb-5 {
    margin-bottom: 2em
}

.mb-6 {
    margin-bottom: 2.5em
}

.mb-7 {
    margin-bottom: 3em
}

.mb-8 {
    margin-bottom: 3.5em
}

.mb-9 {
    margin-bottom: 4em
}

.mb-10 {
    margin-bottom: 4.5em
}

.mb-11 {
    margin-bottom: 5em
}

.mb-12 {
    margin-bottom: 5.5em
}

.w-80 {
    width: 80%
}

.w-85 {
    width: 85%
}

.w-90 {
    width: 90%
}

.w-95 {
    width: 95%
}

.medium {
    font-size: .9em
}

.btn-dark {
    background-color: var(--samgalope-accent-color);
    border: var(--samgalope-accent-color)
}

.btn-dark:hover {
    background-color: var(--samgalope-accent-hover);
    border: var(--samgalope-accent-hover)
}

.btn-dark:active {
    background-color: var(--samgalope-accent-active);
    border: var(--samgalope-accent-active)
}

.btn-primary {
    background-color: var(--samgalope-dark-primary-color);
    border: var(--samgalope-dark-primary-color)
}

.btn-primary:hover {
    background-color: var(--samgalope-dark-primary-hover);
    border: var(--samgalope-dark-primary-hover)
}

.btn-primary:active {
    background-color: var(--samgalope-dark-primary-hover);
    border: var(--samgalope-dark-primary-hover)
}

.clickable {
    cursor: pointer
}

.clickable1 {
    cursor: pointer;
    color: #999
}

.clickable1:hover {
    color: #6a1308
}

div.row {
    width: 100%;
    margin: 0 auto
}

.line-height-normal {
    line-height: normal
}

[class*=col-] {
    width: 100%;
    padding: 0
}

.branding {
    background-color: var(--samgalope-dark-primary-color);
    padding: 0;
    color: var(--samgalope-accent-text);
    text-align: center
}

.branding img {
    user-select: none
}

.branding .btn {
    margin: 20px auto
}

.branding .sidebar {
    color: var(--samgalope-accent-text);
    text-align: left
}

.content .wide-navi {
    display: none;
    padding: 10px 40px;
    font-size: .9em
}

.content .wide-navi a {
    padding: 10px;
    text-decoration: none;
    color: var(--samgalope-dark-primary-color)
}

.content .workarea {
    padding: 10px
}

.content .workarea h1 {
    font-size: 2em;
    color: var(--samgalope-dark-primary-color)
}

.content .workarea p {
    font-size: .9em;
    text-align: justify;
    line-height: 1.2em;
    width: 98%;
    margin: 10px auto
}

.substats {
    border: none;
    padding: 10px;
    font-size: .85em
}

.chart {
    padding: 20px;
    min-height: 400px;
    box-shadow: none;
    border: none
}

.mobile-navi {
    position: fixed;
    top: 10px;
    right: 10px;
    color: rgba(255, 255, 255, .6)
}

.mobile-navi i {
    user-select: none;
    cursor: pointer
}

.navi-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--samgalope-dark-primary-color)
}

.notice {
    display: block
}

.table {
    display: block;
    width: 100%;
    font-size: .9em
}

.map {
    width: 100%;
    height: 200px
}

.logo {
    filter: grayscale(1);
    opacity: .5;
    user-select: none;
    cursor: pointer
}

a.page-link {
    color: var(--samgalope-dark-primary-color)
}

a.page-link:hover {
    color: var(--samgalope-primary-text)
}

a,
strong {
    color: var(--samgalope-dark-primary-color)
}

div.chart-container {
    height: 20vh;
    width: 50vw;
    margin: 10px auto 40px auto
}

div.slide,
div.slide input,
div.slide textarea {
    font-size: .9em
}

.slide .form-group,
.slide label {
    margin-bottom: 6px;
    font-size: .96em
}

.colcount {
    column-count: 1
}

i.delete {
    color: var(--samgalope-accent-color);
    opacity: .7
}

i.delete:hover {
    color: var(--samgalope-accent-active);
    opacity: 1
}

i.edit {
    color: var(--samgalope-dark-primary-color);
    opacity: .7
}

i.edit:hover {
    color: var(--samgalope-accent-active);
    opacity: 1
}

.role-label {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: .85em;
    opacity: .5
}

.role-label-admin {
    position: absolute;
    top: 6px;
    left: 156px;
    font-size: .85em;
    opacity: .5
}

.form-check {
    padding-left: 40px
}

.form-check-label {
    font-size: .9em
}

.form-group .font-weight-bold {
    font-size: .85em
}

@media only screen and (min-width:500px) {
    .branding {
        background-color: var(--samgalope-dark-primary-color);
        padding: 0 20px;
        color: var(--samgalope-accent-text);
        text-align: center
    }
    .branding .btn {
        margin: 20px auto
    }
    .branding .sidebar {
        color: var(--samgalope-accent-text);
        text-align: left
    }
    .form-control {
        font-size: .85em
    }
    .content .wide-navi {
        display: block;
        padding: 10px 40px;
        font-size: .85em
    }
    .content .wide-navi a {
        padding: 10px;
        text-decoration: none;
        color: var(--samgalope-dark-primary-color)
    }
    .content .workarea {
        padding: 40px
    }
    .content .workarea h1 {
        font-size: 2em;
        color: var(--samgalope-dark-primary-color)
    }
    .content .workarea p {
        font-size: .9em;
        text-align: justify;
        line-height: 1.2em;
        width: 98%;
        margin: 10px 0
    }
    .map {
        width: 100%;
        height: 400px
    }
    .mobile-navi {
        display: none
    }
    .notice {
        display: none
    }
    .table {
        display: block;
        width: 100%;
        font-size: .9em
    }
    div.chart-container {
        width: 100%;
        margin: 20px auto
    }
    .colcount {
        column-count: 1
    }
    div.heatmap-overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 300px;
        color: var(--samgalope-dark-primary-color)
    }
}