:root {
    --activeblue: #2186eb;
    --activeblue2: #105aa5;
}

html,
body,
h1,
h2,
h3,
h4,
h5 {
    font-family: "Raleway", sans-serif;
}

/* html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
    color: rgb(0,100,200);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: rgb(0,80,160);
}

label {
    display: block;
}

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    -webkit-padding: 0.4em 0;
    padding: 0.4em;
    margin: 0 0 0.5em 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 2px;
}

input:disabled {
    color: #ccc;
}

button {
    color: #333;
    background-color: #f4f4f4;
    outline: none;
}

button:disabled {
    color: #999;
}

button:not(:disabled):active {
    background-color: #ddd;
}

button:focus {
    border-color: #666;
}

 */


.width-100-perc {
    width: 100%;
}

.width-narrow {
    max-width: 600px;
}

.small-gray {
    color: #ccc;
    font-size: 0.9em;
}

.cursor-pointer {
    cursor: pointer;
}

.sw3-button:hover {
    color: #000 !important;
    background-color: #e1d5c7 !important
}

/* You can add global styles to this file, and also import other style files */

.loader {
    border: 10px solid #f3f3f3;
    /* Light grey */
    border-top: 10px solid #aaaaaa;
    /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*********************************************************************/

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--activeblue);
    /* background-color: #5b8eb9; */
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--activeblue);
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*********************************************************************/

.bc-series0 {
    fill: #9EE6A9;
}

.bc-series1 {
    fill: #F7C0A8;
}

/*********************************************************************/

/* generator seed: #f2f2f2 */
/* generator seed: #d2b48c */

/* https://www.w3schools.com/w3css/w3css_color_generator.asp */
/*
.w3-theme-l5 {color:#000 !important; background-color:#fdfcfb !important}
.w3-theme-l4 {color:#000 !important; background-color:#f8f5f1 !important}
.w3-theme-l3 {color:#000 !important; background-color:#f0eae3 !important}
.w3-theme-l2 {color:#000 !important; background-color:#e9e0d5 !important}
.w3-theme-l1 {color:#000 !important; background-color:#e1d5c7 !important}
.w3-theme-d1 {color:#000 !important; background-color:#cbb89f !important}
.w3-theme-d2 {color:#000 !important; background-color:#bda485 !important}
.w3-theme-d3 {color:#fff !important; background-color:#af906b !important}
.w3-theme-d4 {color:#fff !important; background-color:#9d7c55 !important}
.w3-theme-d5 {color:#fff !important; background-color:#836847 !important}

.w3-theme-light {color:#000 !important; background-color:#fdfcfb !important}
.w3-theme-dark {color:#fff !important; background-color:#836847 !important}
.w3-theme-action {color:#fff !important; background-color:#836847 !important}

.w3-theme {color:#000 !important; background-color:#daccbb !important}
.w3-text-theme {color:#daccbb !important}
.w3-border-theme {border-color:#daccbb !important}

.w3-hover-theme:hover {color:#000 !important; background-color:#daccbb !important}
.w3-hover-text-theme:hover {color:#daccbb !important}
.w3-hover-border-theme:hover {border-color:#daccbb !important} */

/* generator seed: #dddddd */
/* color #000 -> #333 */

.w3-theme-l5 {
    color: #333 !important;
    background-color: #fdfdfd !important
}

.w3-theme-l4 {
    color: #333 !important;
    background-color: #f8f8f8 !important
}

.w3-theme-l3 {
    color: #333 !important;
    background-color: #f2f2f2 !important
}

.w3-theme-l2 {
    color: #333 !important;
    background-color: #ebebeb !important
}

.w3-theme-l1 {
    color: #333 !important;
    background-color: #e4e4e4 !important
}

.w3-theme-d1 {
    color: #333 !important;
    background-color: #c8c8c8 !important
}

.w3-theme-d2 {
    color: #333 !important;
    background-color: #b1b1b1 !important
}

.w3-theme-d3 {
    color: #fff !important;
    background-color: #9b9b9b !important
}

.w3-theme-d4 {
    color: #fff !important;
    background-color: #858585 !important
}

.w3-theme-d5 {
    color: #fff !important;
    background-color: #6f6f6f !important
}

.w3-theme-light {
    color: #000 !important;
    background-color: #fdfdfd !important
}

.w3-theme-dark {
    color: #fff !important;
    background-color: #6f6f6f !important
}

.w3-theme-action {
    /* color:#fff !important;
    background-color:#6f6f6f !important; */
    color: #ffffff !important;
    background-color: var(--activeblue) !important;
    border: 2px solid var(--activeblue);
}

.w3-theme-action:hover {
    /* color:#fff !important;
    background-color:#6f6f6f !important; */
    color: #ffffff !important;
    background-color: var(--activeblue) !important;
    border: 2px solid var(--activeblue) !important;
}

.w3-theme-danger {
    color: #ffffff !important;
    background-color: #b62316 !important;
    border: 2px solid #b62316;
}


.w3-theme {
    color: #000 !important;
    background-color: #eeeeee !important
}

.w3-text-theme {
    color: #dddddd !important
}

.w3-border-theme {
    border-color: #dddddd !important
}

.w3-hover-theme:hover {
    color: #000 !important;
    background-color: #dddddd !important
}

.w3-hover-text-theme:hover {
    color: #dddddd !important
}

.w3-hover-border-theme:hover {
    border-color: #dddddd !important
}

.w3-button-link {
    color: var(--activeblue) !important;
    background-color: #ffffff !important;
    padding: 0 4px !important;
    border: 1px solid #ffffff;
    cursor: pointer;
}

.w3-button-link::after {
    /* content: "»"; */
}

.w3-button-link:hover {
    color: var(--activeblue2) !important;
    border: 1px solid #eeeeee;
}

/* small fixes */
.w3-dropdown-content {
    z-index: 100;
}

.w3-sidebar {
    z-index: 2000;
}

.w3-green-lite {
    background-color: #89d18b;
}

.w3-red-lite {
    background-color: #f7a8a2;
}

.w3-blue-lite {
    background-color: #5b8eb9;
}

.w3-orange-lite {
    background-color: #ffd597;
}

.w3-btn+.w3-theme-light {
    border: #ccc solid 1px;
}
.w3-btn-small {
    padding: 2px 2px;
    font-size: 10px;
}

.w3-pale-purple,
.w3-hover-pale-purple:hover {
    color: #000 !important;
    background-color: #dfccfd !important;
}

.w3-centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

.w3-nowrap {
    white-space: nowrap;
}

.w3-bar {
    color: #666;
}

.question {
    font-weight: bold;
    padding: 5px 0;
}
.answer {
    font-weight: normal;
}

/*------------------------------------------*/

@font-face {
    font-family: 'OpenDyslexic';
    src: url('fonts/OpenDyslexic-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.nb-dislexic-font {
    font-family: 'OpenDyslexic', sans-serif;
}

.nb-font-size1 {
    font-size: 1.0em;
}

.nb-font-size2 {
    font-size: 1.2em;
}

.nb-font-size3 {
    font-size: 1.5em;
}