/* ----- LIGHT MODE CSS ----- */

/* || PALETTE */
:root {
    /* --GREY-- */

    /* ALTERNATE BG */
    --G50: #fff;
    --G75: #fafafa;
    /* DEFAULT BG */
    --G100: #f5f5f5;
    /* CONTENT */
    --G200: #eaeaea;
    --G300: #e1e1e1;
    --G400: #cacaca;
    /* DISABLED TEXT */
    --G500: #b3b3b3;
    /* PLACEHOLDER TEXT */
    --G600: #8e8e8e;
    /* TEXT CONTENT */
    --G700: #6e6e6e;
    --G800: #4b4b4b;
    --G900: #2c2c2c;

    /* --PRIMARY-- */
    --P400: #009ee3;
    --P500: #0091de;
    --P600: #0084c8;
    --P700: #0078b2;

    /* --SUCCESS-- */
    --S400: #2d9d78;
    --S500: #268e6c;
    --S600: #12805c;
    --S700: #107154;

    /* --Warning-- */
    --W400: #e68619;
    --W500: #da7b11;
    --W600: #cb6f10;
    --W700: #bd640d;

    /*--Danger--*/
    --D400: #e34850;
    --D500: #d7373f;
    --D600: #c9252d;
    --D700: #bb121a;
}
/* || LOGIN*/
.loginBackground {
    height: 100vh;
    background-size: cover;
    margin: 0;
    padding: 0;
    border: none;
}
.loginContainer {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    background: rgba(255, 255, 255, 0.75);
    top: 0;
    color: var(--G900); /*900*/
}
.loginForm {
    border-radius: 5px;
    width: 90%;
    max-width: 320px;
    background: var(--G200); /*200*/
    position: relative;
    padding: 10px 20px 80px;
    box-shadow: 0px 5px 5px var(--G400); /*400*/
}
.loginInput {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    border: 1px solid var(--G800); /*800*/
    transition: border-width 0.2s ease;
    border-radius: 5px;
    background-color: var(--G400); /*400*/
    color: var(--G900); /*900*/
    font-family: Arial, FontAwesome, sans-serif;
}
.loginInput:focus {
    outline: none;
    border-color: var(--P400); /*400*/
}
.loginFields:focus {
    border-left-width: 35px;
}
.loginTittel {
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px 0 30px 0;
    border-bottom: 1px solid var(--P400); /*400*/
    padding-bottom: 20px;
}
.loginSubmit {
    width: 100%;
    height: 100%;
    padding: 10px 10px;
    background: var(--G400); /*400*/
    color: var(--G100); /*100*/
    margin-bottom: 0px;
    position: absolute;
    left: 0;
    bottom: 0;
    max-height: 60px;
    border-radius: 0 0 2px 2px;
}
.loginFooter {
    display: block;
    padding-top: 50px;
    text-align: center;
    color: var(--G900); /*900*/
    font-weight: normal;
    text-shadow: 0px -1px 0px var(--G800); /*800*/
    font-size: 0.8em;
}
.loginLink,
.loginLink:hover,
.loginLink:visited,
.loginLink:focus {
    color: var(--P400); /*400*/
}
.loginErrorText {
    color: var(--D500);
}
/* || ALERTS */
.alert-danger {
    color: var(--G900);
    background-color: var(--D400);
    border-color: var(--D700);
}
.alert-success {
    color: var(--G900);
    background-color: var(--S400);
    border-color: var(--S700);
}
/* || NAVIGATION*/
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.dropdown-item,
.navbar-light i {
    color: var(--G100);
}
.navbar-light .navbar-nav .nav-link.disabled {
    color: var(--G500);
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--G300);
}
.bg-light,
.dropdown-menu {
    background-color: var(--P400) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--G100) !important;
    color: var(--G700);
}
.nav-tabs {
    border-bottom-color: var(--G900);
}
.nav-tabs .nav-link.active {
    background-color: var(--G75);
    color: var(--G900);
    border-color: var(--G900) var(--G900) var(--G75);
}
.nav-tabs .nav-link {
    color: var(--G700);
    border-bottom-color: var(--G900);
    margin-left: 1vw;
    background-color: var(--G200);
}
.nav-tabs .nav-link:hover {
    cursor: pointer;
    background-color: var(--G100);
    color: var(--G900);
    border-color: var(--G900) var(--G900) var(--G75);
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.page-link {
    background-color: var(--G100);
    color: var(--G800);
}
.page-link:hover {
    cursor: pointer;
    background-color: var(--G300);
}
.page-item.active .page-link {
    background-color: var(--P400);
    color: var(--G100);
}
/* || CONTAINERS*/
.containerLowerAndCenter {
    width: 75vw;
    margin: 1vh auto auto auto;
}
.containerColumn100 {
    display: table;
    float: left;
    width: 100%;
}
.containerColumn50 {
    display: table;
    float: left;
    width: 50%;
}
.containerColumn33 {
    display: table;
    float: left;
    width: 33.33%;
}
.containerColumn25 {
    display: table;
    float: left;
    width: 25%;
}
.containerColumn66 {
    display: table;
    float: left;
    width: 66.66%;
}
.containerContent {
    display: block;
    float: left;
    width: 100%;
    padding: 15px;
    background-color: var(--G100);
    border-radius: 1vw;
    border-style: solid;
    border-color: var(--G500);
    border-width: 1px;
}
.containerSplitContent2 {
    float: left;
    width: 50%;
    padding: 15px;
    color: var(--G800);
}
.containerSplitContent4 {
    float: left;
    width: 25%;
    padding: 15px;
    color: var(--G800);
}
.containerFlagSelect {
    width: 2rem;
    position: relative;
}
/* || MODAL */
.modal-header,
.modal-header .close {
    color: var(--G900);
}
.modal-body {
    color: var(--G700);
}
.modal-content {
    background-color: var(--G100);
}
/* || CONTENT */
body {
    background-color: var(--G75);
    color: var(--G800);
    overflow-y: overlay;
}
thead tr {
    background: var(--G200);
}
i,
td,
th,
p,
h4,
h3,
h5,
label {
    color: var(--G800);
}
i {
    font-size: 1.25rem;
}
button i,
a i {
    font-size: 1rem;
}
.btn-primary {
    background-color: var(--P400) !important;
    border-color: var(--P400) !important;
}
.btn-primary:hover {
    background-color: var(--P700) !important;
}
.btn-outline-primary {
    color: var(--G800) !important;
    border-color: var(--P400) !important;
}
.btn-outline-primary:hover {
    background-color: var(--P600) !important;
    color: var(--G100) !important;
}
.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
    background-color: var(--P400);
    box-shadow: none;
    color: var(--G100) !important;
}
.reverseColor {
    color: var(--G50);
}
.input-group-text, .form-control {
    color: var(--G700);
    background-color: var(--G50);
}
.form-control:focus {
    color: var(--G700);
    background-color: var(--G50);
    border-color: var(--P700);
}
.form-control::placeholder {
    color: var(--G500);
}
.form-control-plaintext {
    color: var(--G800);
}
.card {
    background-color: var(--G100);
    border-color: var(--G400);
}
.flagSelectSelect {
    width: 100%;
    opacity: 0;
}
.flagSelectFlags {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.flagSelectFlag {
    height: 100%;
    box-sizing: border-box;
    display: none;
}
.flagSelectFlag.is-visible {
    display: block;
}
.contentLink,
.contentLink:visited,
.contentLink:focus {
    color: var(--G800);
    text-decoration: none;
}
.contentLink:hover {
    color: var(--G700);
    text-decoration: none;
    cursor: pointer;
}
.contentHeading {
    color: var(--G900);
    text-align: center;
}
.contentSubHeading {
    color: var(--G800);
    text-align: center;
}
.contentColorSuccess {
    color: var(--S400);
}
.contentColorWarning {
    color: var(--W400);
}
.contentColorDanger {
    color: var(--D400);
}
#contentDoors {
    display: table;
    width: 100%;
}
#contentZones {
    display: none;
    width: 100%;
}
#contentUsers {
    display: none;
    width: 100%;
}
#pageLoader {
    position: absolute;
    top: calc(calc(100vh - 3vw) / 2);
    bottom: auto;
    left: calc(calc(100vw - 3vw) / 2);
    right: auto;
    z-index: 99;
    display: none;
    border: 0.2vw double rgba(76, 175, 80, 0);
    border-top: 0.2vw double var(--P400);
    border-bottom: 0.2vw double var(--D400);
    border-radius: 50%;
    width: 3vw;
    height: 3vw;
    animation: spinFull 1s ease infinite;
}
/* MEDIA */
@media screen and (max-width: 1650px) {
    .flagSelectFlag {
        height: 85%;
    }
}
@media screen and (max-width: 1200px) {
    .flagSelectFlag {
        height: 70%;
    }
    .row-cols-md-4>* {
        flex: 0 0 33.3%;
        max-width: 33.3%;
    }
}
@media screen and (max-width: 992px) {
    table {
        width: 100%;
    }
    .flagSelectFlag {
        height: 50%;
    }
    .containerSplitContent4 {
        width: 50%;
    }
    .row-cols-md-4>* {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media screen and (max-width: 800px) {
    .containerLowerAndCenter {
        width: 100vw;
    }
    .containerColumn50 {
        width: 100%;
    }
    .flagSelectFlag {
        height: 25%;
    }
    .contentSingleCenter {
        flex: 0 0 100%;
        max-width:100%;
    }
    .containerSplitContent4 {
        width: 100%;
    }
    .row-cols-md-4>* {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #pageLoader {
        top: calc(calc(100vh - 25vw) / 2);
        left: calc(calc(100vw - 25vw) / 2);
        border: 1.5vw double rgba(76, 175, 80, 0);
        border-top: 1.5vw double var(--P400);
        border-bottom: 1.5vw double var(--D400);
        border-radius: 50%;
        width: 25vw;
        height: 25vw;
        animation: spinMin 1s ease infinite;
    }
}
/* ANIMATION SETS*/
@keyframes spinFull {
    0% {
        transform: rotate(0deg);
        top: calc(calc(100vh - 3vw) / 2);
        left: calc(calc(100vw - 3vw) / 2);
        width: 3vw;
        height: 3vw;
    }
    50% {
        top: calc(calc(100vh - 5vw) / 2);
        left: calc(calc(100vw - 5vw) / 2);
        width: 5vw;
        height: 5vw;
    }
    100% {
        transform: rotate(360deg);
        top: calc(calc(100vh - 3vw) / 2);
        left: calc(calc(100vw - 3vw) / 2);
        width: 3vw;
        height: 3vw;
    }
}
@keyframes spinMin {
    0% {
        transform: rotate(0deg);
        top: calc(calc(100vh - 25vw) / 2);
        left: calc(calc(100vw - 25vw) / 2);
        width: 25vw;
        height: 25vw;
    }
    50% {
        top: calc(calc(100vh - 27vw) / 2);
        left: calc(calc(100vw - 27vw) / 2);
        width: 27vw;
        height: 27vw;
    }
    100% {
        transform: rotate(360deg);
        top: calc(calc(100vh - 25vw) / 2);
        left: calc(calc(100vw - 25vw) / 2);
        width: 25vw;
        height: 25vw;
    }
}