@font-face {
    font-family: app-name-font;
    src: url('/app/fonts/frekoda-one/FredokaOne-Regular.ttf');
}

:root {
    --primary-colour: #1a54ba;
    --secondary-colour: rgba(26, 84, 186, 0.4);
    --default-text-colour: #545454;
    --default-font: 'Ubuntu', sans-serif;
    --thick-blue-shadow: 0.0px 10.0px 0.02px var(--primary-colour),
    9.8px 2.1px 0.02px var(--primary-colour), 4.2px -9.1px 0.02px var(--primary-colour),
    -8.0px -6.0px 0.02px var(--primary-colour), -7.6px 6.5px 0.02px var(--primary-colour),
    4.8px 8.8px 0.02px var(--primary-colour), 9.6px -2.8px 0.02px var(--primary-colour),
    -0.7px -10.0px 0.02px var(--primary-colour), -9.9px -1.5px 0.02px var(--primary-colour),
    -3.5px 9.4px 0.02px var(--primary-colour), 8.4px 5.4px 0.02px var(--primary-colour),
    7.1px -7.0px 0.02px var(--primary-colour), -5.4px -8.4px 0.02px var(--primary-colour),
    -9.4px 3.5px 0.02px var(--primary-colour), 1.4px 9.9px 0.02px var(--primary-colour),
    10.0px 0.8px 0.02px var(--primary-colour), 2.9px -9.6px 0.02px var(--primary-colour),
    -8.7px -4.8px 0.02px var(--primary-colour), -6.6px 7.5px 0.02px var(--primary-colour),
    5.9px 8.0px 0.02px var(--primary-colour), 9.1px -4.1px 0.02px var(--primary-colour),
    -2.1px -9.8px 0.02px var(--primary-colour), -10.0px -0.1px 0.02px var(--primary-colour),
    -2.2px 9.8px 0.02px var(--primary-colour), 9.1px 4.2px 0.02px var(--primary-colour),
    6.1px -8.0px 0.02px var(--primary-colour), -6.5px -7.6px 0.02px var(--primary-colour),
    -8.8px 4.7px 0.02px var(--primary-colour), 2.7px 9.6px 0.02px var(--primary-colour),
    10.0px -0.6px 0.02px var(--primary-colour), 1.5px -9.9px 0.02px var(--primary-colour),
    -9.3px -3.6px 0.02px var(--primary-colour), -5.5px 8.4px 0.02px var(--primary-colour),
    7.0px 7.2px 0.02px var(--primary-colour), 8.5px -5.3px 0.02px var(--primary-colour),
    -3.4px -9.4px 0.02px var(--primary-colour), -9.9px 1.3px 0.02px var(--primary-colour),
    -0.8px 10.0px 0.02px var(--primary-colour), 9.6px 2.9px 0.02px var(--primary-colour),
    4.9px -8.7px 0.02px var(--primary-colour), -7.5px -6.7px 0.02px var(--primary-colour),
    -8.1px 5.9px 0.02px var(--primary-colour), 4.0px 9.2px 0.02px var(--primary-colour),
    9.8px -2.0px 0.02px var(--primary-colour), 0.2px -10.0px 0.02px var(--primary-colour),
    -9.7px -2.3px 0.02px var(--primary-colour), -4.3px 9.0px 0.02px var(--primary-colour),
    7.9px 6.1px 0.02px var(--primary-colour);
}

html, body {
    height: 100%;
    width: 100%;
    font-family: var(--default-font);
    font-style: normal;
    background-size: cover;
}

p {
    font-family: var(--default-font);
}

.app-name, .app-name-large {
    font-family: app-name-font, cursive;
    color: var(--primary-colour) !important;
    font-size: xx-large;
    font-weight: bolder;
}

.app-name-large {
    font-size: medium;
}

.navbar {
    background: none;
    -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

.scrolled {
    background-color: rgba(255, 255, 255, 0.97);
    -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

.navbar-nav .menu_btn {
    font-family: var(--default-font);
    color: white;
    background: var(--primary-colour);
    opacity: 0.85;
    min-width: 100px;
    max-width: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.navbar-nav .menu_div {
    font-family: var(--default-font);
    min-width: 100px;
    max-width: 200px;
}


.container, .container-fluid {
    width: 95%;
    align-content: center;
    margin-top: 0px;
    font-family: var(--default-font);
}

.btn, btn-link, btn-danger, btn-primary, btn-secondary, btn-lg {
    border: white;
}

.btn-link {
    color: var(--primary-colour);
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-colour) !important;
}

.btn-danger {
    background-color: #c65844 !important;
}

.blink {
    animation: blink 2s step-end infinite;
}

.fa-color-white {
    color: white;
}

.fa-color-primary {
    color: var(--primary-colour);
}

.fa-color-secondary {
    color: var(--secondary-colour);
}

.centre {
    display: block;
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.centre-no-width {
    text-align: center;
    color: var(--default-text-colour);
}

.default-text {
    color: var(--default-text-colour);
    font-family: var(--default-font);
}

.default-text-font {
    font-family: var(--default-font);
}

.footer {
    position: relative;
    margin: auto auto 0px;
    bottom: 0;
    max-height: 60px;
    width: 80%;
    color: #fff;
    font-family: var(--default-font);
    background-color: rgba(26, 84, 186);
    opacity: 0.6;
    border-radius: 15px 15px 0px 0px;
    overflow: hidden;
}

.footer-privacy-link {
    cursor: pointer;
    text-decoration: none;
}

.input-group-text {
    background-color: var(--primary-colour);
    color: white;
    border: 0 !important;
}

input:focus {
    outline: none !important;
    box-shadow: 0 0 0 0 !important;
}

.code {
    background-color: var(--primary-colour);
    color: white;
    border-radius: 3px;
    font-weight: bold;
    padding: 0 3px;
    opacity: 0.95;
}

.disappear {
    visibility: hidden;
    display: none;
}

.appear {
    visibility: visible;
    display: initial;
}

.modal-dialog {
    max-width: 750px !important;
    overflow-y: initial !important;
    padding-right: 10px;
    padding-left: 14px;
    font-family: var(--default-font);
}

.modal-body {
    overflow-y: auto;
    padding-right: 10px;
    padding-left: 14px;
}

.modal-header, .modal-header-fancy {
    background-color: white;
    /*padding: 5px 5px 10px 10px;*/
    color: var(--primary-colour);
    border-bottom: 2px dashed var(--primary-colour);
    font-style: normal;
}

.modal-header-fancy {
    background-image: url("../images/banners/bnr_general_pattern_wavy.jpg");
    background-size: cover;
    align-items: normal;
    height: 350px;
    color: #FFF;
}

.modal .modal-dialog .modal-content .modal-body {
    justify-content: left;
    text-align: left;
}

.progress {
    min-width: 100px;
    max-width: 120px;
    height: 37px;
    min-height: 20px;
    max-height: 50px;
    font-family: var(--default-font);
    color: var(--primary-colour);
    font-size: 18px;
}

.status-nok, .status-ok {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-block
}

.status-ok {
    background-color: #2FAF2F
}

.status-nok {
    background-color: #eb3333
}

.thick-blue-outline {
    color: white;
    text-shadow: var(--thick-blue-shadow);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--secondary-colour) !important;
}

.dataTables_wrapper {
    font-size: 13px;
}

.paginate_button.page-item.active .page-link {
    border-color: white;
    background-color: var(--primary-colour);
}

.beveled-button {
    margin-bottom: 7px;
    border-radius: 90px;
    width: 100%;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    background-color: white;
    color: grey;
}

.bootstrap-select > .dropdown-toggle {
    background: white;
}

.input-group .bootstrap-select.form-control {
    border: grey;
}

.input-group .bootstrap-select.form-control .dropdown-toggle {
    background-color: white;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    color: #4f4c4c;
}

/********************************FOR NOW LOADING ANIMATION************************************/

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    z-index: 2;
    cursor: pointer; /* Add a pointer on hover */
}

.loading-panel {
    width: 400px;
    height: 250px;
    border-radius: 0%;
    background-color: var(--secondary-colour);
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
}

.loading-panel .text-area {
    font-family: Tangerine;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    width: 60%;
    align-items: center;
}

.loading-panel .text-area p {
    color: white;
    font-size: 48px;
    animation: shadow-glow 5s infinite alternate;
}

.creative-list ol {
    list-style: none;
    counter-reset: my-awesome-counter;
}

.creative-list ol li {
    counter-increment: my-awesome-counter;
    margin: 0.25rem 0 0.25rem 0;
}

.creative-list ol li::before {
    content: counter(my-awesome-counter);
    background: var(--primary-colour);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-block;
    line-height: 2rem;
    color: white;
    text-align: center;
    margin-right: 0.5rem;
}

.creative-list ol ol li::before {
    background: var(--primary-colour);
}

.creative-list ol ol ol li::before {
    background: var(--primary-colour);
}

.clickable-item-primary {
    color: white;
    text-shadow: 0 0 1px var(--primary-colour),
    0 0 2px var(--primary-colour),
    0 0 3px var(--primary-colour),
    0 0 4px var(--primary-colour),
    0 0 5px var(--primary-colour),
    0 0 6px var(--primary-colour),
    0 0 7px var(--primary-colour),
    0 0 8px var(--primary-colour),
    0 0 9px var(--primary-colour);
    cursor: pointer;
}

.clickable-item-red {
    color: white;
    text-shadow: 0 0 1px #aa341d,
    0 0 2px #aa341d,
    0 0 3px #aa341d,
    0 0 4px #aa341d,
    0 0 5px #aa341d,
    0 0 6px #aa341d,
    0 0 7px #aa341d,
    0 0 8px #aa341d,
    0 0 9px #aa341d;
    cursor: pointer;
}

.clickable-item-green {
    color: white;
    text-shadow: 0 0 1px var(--bs-success),
    0 0 2px var(--bs-success),
    0 0 3px var(--bs-success),
    0 0 4px var(--bs-success),
    0 0 5px var(--bs-success),
    0 0 6px var(--bs-success),
    0 0 7px var(--bs-success),
    0 0 8px var(--bs-success),
    0 0 9px var(--bs-success);
    cursor: pointer;
}

.clickable-item-black {
    color: white;
    text-shadow: 0 0 1px black,
    0 0 2px black,
    0 0 3px black,
    0 0 4px black,
    0 0 5px black,
    0 0 6px black,
    0 0 7px black,
    0 0 8px black,
    0 0 9px black;
    cursor: pointer;
}

body.dragging, body.dragging * {
    cursor: move !important;
}

.draggable-btn {
    margin-bottom: 5px;
    cursor: grab;
}

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

ol.is-draggable li.placeholder {
    position: relative;
}

ol.is-draggable li.placeholder:before {
    position: absolute;
}

ul.is-draggable li.placeholder {
    position: relative;
}

ul.is-draggable li.placeholder:before {
    position: absolute;
}

/*animation: shadow-pulse 2s infinite ease-in-out;*/

.strolling-box {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(26, 84, 186, 0.4);
    border-top-color: var(--primary-colour);
    background-color: white;
    border-radius: 10%;
    position: absolute;
    left: 0;
    top: 0;
    animation: stroll 5s infinite ease-in-out;
}

@keyframes stroll {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(360deg);
    }

    25% {
        transform: translate(350px, 0) rotate(180deg);
    }

    50% {
        opacity: 0.1;
        transform: translate(350px, 200px) rotate(-360deg);
    }

    75% {

        transform: translate(0px, 200px) rotate(-180deg);
    }

    100% {
        opacity: 1;
        transform: translate(0px, 0px) rotate(360deg);
    }
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px -10px #aef4af;
    }
    to {
        box-shadow: 0 0 10px 10px #aef4af;
    }
}

@keyframes shadow-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }
    100% {
        box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
    }
}

@keyframes shadow-glow {
    to {
        text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
    }
}

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