common.css

:root {
    --btn-background: #f6f6f6;
    --text-color: #444;
    --pre-color: #212121;
    --card-background-color: #fff;
    --btn-active-background: #e6e5e5;
    --btn-active-box-shadow: inset 0px 0px 8px #b0b0b0;
}

html.color-theme-in-transition,
html.color-theme-in-transition *,
html.color-theme-in-transition *:before,
html.color-theme-in-transition *:after {
    transition: all 750ms !important;
    transition-delay: 0ms !important;
}

.table-header-sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--text-color);
    opacity: 0.8; /* Firefox */
}
pre {
    color: var(--pre-color);
}
.btn {
    background: var(--btn-background);
    color: var(--text-color);
}
.card {
    background-color: var(--card-background-color);
}

.h4,.table,.form-control {
    color: var(--text-color);
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active {
    background: var(--btn-active-background);
}
.btn.active {
    box-shadow: var(--btn-active-box-shadow) !important;
}

* {
    color: var(--text-color);
}

/* styling for header about */
.about {
    position: relative;
    background: white;
    z-index: 100;
    display: -ms-flexbox;
    padding: .5em;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: .5rem;
}

div.sidepanel div.panelbar {
    position: absolute;
    height: 100%;
}

/* Toggle handles on panels */
div.sidepanel div.panelbar span {
    display: flex;
    width: 16px;
    height: 100%;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: .75em;
    color: #ADADAD;
}

/* used for ModalVanilla */
@keyframes opacity {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@media screen and (max-width: 800px) {

    @keyframes twopanel-right {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(0);
        }
    }

    @keyframes twopanel-left {
        0% {
            transform: translateX(-40%);
        }
        100% {
            transform: translateX(0);
        }
    }

    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    /* force header styling */
    #headerMenu {
        top: 0 !important;
        transform: translateY(0) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #headerContent {
        width: 100% !important;
        flex-flow: column !important;
        align-items: start !important;
    }

    /* focus is on left side */
    .focused-left {
        width: 90%;
    }

    .unfocused-right {
        position: fixed;
        left: 90%;
    }

    /* focus is on right side */
    .unfocused-left {
        margin-left: -40%;
        right: 90% !important;
    }

    .focused-right {
        width: 90% !important;
    }
}

.loader {
    border: 10px solid #f5f5f5;
    border-top: 10px solid #419641;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.loader-small {
    border: 10px solid #f5f5f5;
    border-top: 10px solid #419641;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
}