body {
    font-family: 'Rajdhani',sans-serif;
    background: #03091f;
}

.serif-font {
    font-family: sans-serif;
}

.rajdhani-font {
    font-family: 'Rajdhani'
}

.img-bottom-left {
    background-image: url('../images/Hexagon-title-visual.png');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 50%;
    position: absolute;
    bottom: 0;
    height: 375px;
    width: 100%;
    z-index: -1;
    margin-bottom: 15px;
    margin-left: -20px;
    overflow: hidden
}

.logo-top-left {
    background-image: url('../images/beeldmerk.svg');
    background-repeat: no-repeat;
    height: 100%;
    width: 110%;
    z-index: -1;
    overflow: hidden;
    margin-left: -25%;
    margin-top: -25%;
}

.logo-bottom-right {
    background-image: url('../images/beeldmerk.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150%;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    overflow: hidden
}

.logo {
    background-image: url("'../images/DSS lichtblauw-wit beeldmerk.svg'");
    background-position: center top;
    background-size: contain;
    position: absolute;
}

.validation-message {
    position: inherit !important;
    background-color: #cc330d;
    border-radius: 0 !important;
    padding: 6px;
    top: 2px;
    color: #fff;
}

.field-validation-error {
    position: inherit !important;
    background-color: #cc330d;
    border-bottom-left-radius: .25rem!important;
    border-bottom-right-radius: .25rem!important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 6px;
    top: 2px;
    color: #fff;
    display: block;
    width: 100%
}

.btn {
    box-shadow: none !important;
}

.btn-primary {
    color: #fff;
    background-color: #37bff0;
    border-color: #37bff0;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #10a1d5;
        border-color: #10a1d5;
    }

    .btn-primary:focus, .btn-primary.focus,
    .btn-primary:active, .btn-primary.active {
        box-shadow: none !important;
        color: #fff;
        background-color: #37bff0;
        border-color: #37bff0;
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #37bff0;
        border-color: #37bff0;
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #586570;
        border-color: #535f68;
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(111, 127, 140, 0.5);
        }

    .btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
        color: #37bff0;
        background-color: #fff;
        border-color: #fff;
    }

.layout-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom:5px;
}

.tab-active {
    background-color: #03091f;
    border-left: solid 1px #03091f;
    border-right: solid 1px #03091f;
    height: 50px;
}

.tab-not-active {
    background-color: #101622;
    border-left: solid 1px #03091f;
    border-right: solid 1px #03091f;
    height: 50px;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #37bff0;
    background-color: white;
    border-color: white;
}

.btn-primary:focus, .btn-primary.focus {
    box-shadow:none !important;
}

.form-check-input:checked {
    background-color: #37bff0;
    border-color: #37bff0;
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
}

.form-check-label{
    margin-top:3px;
}

.form-control  {
    background-clip:unset;
}

.table .thead-dark th {
    color: #fff;
    background-color: #37bff0;
    border-color: #37bff0;
}

.thead-payload {
    border-top: solid 1px #37bff0;
}

tbody tr {
    background-color: white;
    font-family: sans-serif;
}

.payload th {
    vertical-align: top;
    text-align: center;
    width:50px;
}

.payload td {
    vertical-align: top;
    text-align: center;
}

.payload td span {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.payload {
    table-layout: fixed;
}

.table-bordered {

}

@keyframes blink {
    50% {
        color: transparent
    }
}

.loader__dot {
    animation: 1s blink infinite
}

    .loader__dot:nth-child(2) {
        animation-delay: 250ms
    }

    .loader__dot:nth-child(3) {
        animation-delay: 500ms
    }
@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
        opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
        opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
        opacity: .2;
    }
}

.saving span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

    .saving span:nth-child(2) {
        /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
        animation-delay: .2s;
    }

    .saving span:nth-child(3) {
        /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
        animation-delay: .4s;
    }

#chartdiv {
    width: 100%;
    height: 300px;
    margin-bottom:15px;
}

#googleMap {
    width: 100%;
    height: 400px;
    border-radius: .25rem
}

.alert-warning {
    color: white;
    background-color: #ffa500;
    border-color: #ffa500;
    font-weight: bolder;
}

.alert-danger {
    color: white;
    background-color: #cc330d;
    border-color: #cc330d;
    font-weight: bold;
}

.alert-success {
    color: white;
    background-color: #3cb371;
    border-color: #3cb371;
    font-weight: bold;
}

.alert-popup {
    position: absolute;
    z-index: 1400;
    top: 25px;
    right: 50px;
    margin: 0px auto;
    text-align: center;
    display: none;
}

.input-validation-error {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.input-validation-error + span{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.my-card {
    margin-top: 1rem !important;
    padding: 1rem !important;
    border-radius: .25rem !important;
    background-color: #1E232E;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    max-width: 450px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.alert-white {
    border: 2px solid white;
    border-radius: .25rem;
    padding: 15px;
    color: white;
}

.alert-primary {
    color: white;
    background-color: #10a1d5;
    border-color: #10a1d5;
}