:root {
    --color-dark-blue: #004271;
    --color-blue: #0277bd;
    --color-light-blue: #5eafdf;
    --color-red: #ff0000;
    --color-dark-red: #e80000;
    --color-black: black;
    --color-green: #00a65a;
    --color-apple-green: #78a22f;
    --color-white: white;
    --color-very-light-grey: #fafafa;
    --color-light-grey: #f5f5f5;
    --color-medium-grey: #e9ecef;
    --color-grey: #bdbdbd;
    --color-dark-orange: #cb8026;
    --color-orange: #ee7122;
}

.bg-blue-soluris {
    background-color: var(--color-dark-blue);
}

.bg-light-grey-soluris {
    background-color: var(--color-light-grey);
}

.bg-very-light-grey-soluris {
    background-color: var(--color-very-light-grey);
}

.bg-light-blue-soluris {
    background-color: var(--color-light-blue);
}

.border-light-blue-soluris {
    border: 1px solid var(--color-light-blue);
}

.btn-green-soluris {
    color: var(--color-white);
    background-color: var(--color-apple-green);
}

.btn-green-soluris:hover,
.btn-green-soluris:focus {
    color: var(--color-white);
    background-color: var(--color-orange);
}

.btn-grey-soluris {
    color: var(--color-black);
    background-color: var(--color-light-grey);
    border: 1px solid var(--color-grey);
}

.btn-grey-soluris:hover,
.btn-grey-soluris:focus {
    color: var(--color-black);
    background-color: var(--color-medium-grey);
}

.btn-red-soluris {
    background-color: var(--color-red);
    color: var(--color-medium-grey);
}

.navbar-brand {
    width: 150px;
    height: auto;
}

a.active {
    border-bottom: 3.5px solid var(--color-orange);
}

.navbar-soluris .navbar-toggler {
    color: var(--color-white);
    border-color: var(--color-white);
}

.bg-menu-soluris {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}

.color-text-menu-soluris {
    color: var(--color-grey);
}

.deleteBtn {
    border-color: var(--color-grey);
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0px !important;
}

.tabButton {
    padding: 0px;
}

.buttunConfirmationModal {
    position: relative;
    float: right;
}

.buttunConfirmationModalAnnulation {
    position: relative;
    float: right;
    margin-right: 10px;
}

.searcher {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.form-soluris {
    height: 70vh;
    overflow-y: auto;
    padding: 10px;
}

#groups-table > tbody > tr > th {
    max-width: 10rem;
}

.loader-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #242f3f;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid var(--color-orange);
    animation: loader 2s infinite ease;
    z-index: 100;
}

.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: var(--color-orange);
    animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loader-inner {
    0% {
        height: 0%;
    }
    25% {
        height: 0%;
    }
    50% {
        height: 100%;
    }
    75% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

.form-group {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

input {
    transition-duration: 500ms;
}

input[type=text]:invalid {
    border-bottom: 3px solid var(--color-dark-red);
    background-color: rgba(232, 0, 0, 0.1);
}

input[type=email]:invalid {
    border-bottom: 3px solid var(--color-dark-red);
    background-color: rgba(232, 0, 0, 0.1);
}

input[type=password]:invalid {
    border-bottom: 3px solid var(--color-dark-red);
    background-color: rgba(232, 0, 0, 0.05);
}

input[type=text]:valid {
    border-bottom: 3px solid var(--color-apple-green);
}

input[type=email]:valid {
    border-bottom: 3px solid var(--color-apple-green);
}

input[type=password]:valid {
    border-bottom: 3px solid var(--color-apple-green);
}