:root {

    --border: #b3b3b3;
    --text: #808080;
    --background: #f2f2f2;
    --highlight: #FFA603;
    --dark-blue: #021a45;
    --odd-row: #ffffff;
    --active-text: #ffffff;
    --dark-text: #212529;
    --switch-on: #39B54A;
    --light-blue: #1A75D2;
    --form-background: #e0e0e0;
    --radius: 30px;
    --tab-radius: 15px;
}

body {
    background-color: var(--background);
    color: var(--dark-text);
    font-size: 0.9rem;
}

h3,
.h3 {
    font-size: 1.5rem;
}

h5,
.h5 {
    font-size: 1rem;
}

a,
a:visited,
a:hover {
    color: var(--light-blue);
}


.hide {
    display: none;
}

/*table {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6;
    color: #808080;
}*/

.btn {
    border: 2px solid;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.8em;
    padding: 8px;
    text-transform: uppercase;
    min-width: 80px;
}

.btn.in-field {
    padding: 0 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-primary {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
}

.btn-danger {
    background-color: #FF0000;
    border-color: #FF0000;
}

.red {
    color: #FF0000;
}

.breadcrumbs {
    padding: 20px 20px 30px 20px;
    max-width: 800px;
    min-width: 480px;
}

.breadcrumbs h3 {
    margin: 0;
}

.breadcrumbs [class*="col-"]:first-child {
    justify-content: center;
    display: flex;
    flex-direction: column;
    height: 40px;
}


.breadcrumbs [class*="col-"]:nth-child(2) {
    justify-content: right;
    display: flex;
    /*    flex-direction: column; */
    height: 40px;
    /*    align-items: end; */
}

.breadcrumb-button {
    display: inline;
    text-align: right !important;
}

.breadcrumb-item {
    display: inline-block;
    text-align: left !important;
}

.breadcrumb-item>* {
    display: inline;
}

.breadcrumb-col {
    justify-content: centre;
    display: flex;
    flex-direction: column;
    min-height: 40px;
}

.content {
    margin-left: 270px;
    max-height: 100vh;
    overflow-y: hidden !important;
}

.card {
    background-color: transparent;
    border: none;
    margin-bottom: 0rem;
}

.card-body {
    padding: 0px 0px 10px 0px;
}

.container-fluid {
    height: calc(100vh - 90px);
    overflow-y: auto !important;
    margin-left: unset;
    max-width: 800px;
    min-width: 480px;
    padding-right: 20px;
    padding-left: 20px;
}

.container-fluid.full {
    height: 100vh !important;
}


.inset-titlebar [class*="col-"]:first-child {
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.alert {
    margin: 20px 0 0 0;
}

.table-wrap {
    padding: 0 0px;
}

.invisible-table {
    margin: 0 -10px;
}

.table-fixed {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    border-spacing: 2px;
    table-layout: fixed;
    border: none;
}

.table-fixed thead tr th:first-child,
tbody tr td:first-child {
    width: 220px;
}

.table-auto {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    border-spacing: 2px;
    table-layout: auto;
    border: none;
}

.table-auto thead th,
table th,
td {
    border: none;
    padding: 0.5rem;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--form-background);
}

.events-list {
    max-height: 155px;
    overflow: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}

.form-control {
    background-color: var(--form-background);
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: transparent;
    opacity: 1;
    border: 1px solid var(--form-background);
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.9rem;
}

.custom-control-inline {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 1rem;
}

.custom-control-input {
    position: absolute !important;
    z-index: -1;
    opacity: 0;
}

.custom-control-label {
    position: unset;
    margin-bottom: 0.5rem;
    vertical-align: unset;
}

.custom-control-label::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 22px;
    height: 22px;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 2px solid #B3B3B3;
}

.custom-control-input:checked~.custom-control-label::before {
    border: 2px solid #B3B3B3;
    background-color: transparent;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23B3B3B3'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-label::after {
    position: absolute;
    top: -4px;
    left: -4px;
    display: block;
    width: 30px;
    height: 30px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 50%;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23B3B3B3' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-label::after {
    position: absolute;
    top: -2px;
    left: -2.5px;
    display: block;
    width: 26px;
    height: 26px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}

.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23495057' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
    display: block;
}

a[aria-expanded="false"] .showmore {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%231A75D2' stroke-width='1' d='M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    display: inline-block;
    padding-left: 25px;
}

a[aria-expanded="true"] .showmore {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%231A75D2' stroke-width='1' d='M13.889,11.611c-0.17,0.17-0.443,0.17-0.612,0l-3.189-3.187l-3.363,3.36c-0.171,0.171-0.441,0.171-0.612,0c-0.172-0.169-0.172-0.443,0-0.611l3.667-3.669c0.17-0.17,0.445-0.172,0.614,0l3.496,3.493C14.058,11.167,14.061,11.443,13.889,11.611 M18.25,10c0,4.558-3.693,8.25-8.25,8.25c-4.557,0-8.25-3.692-8.25-8.25c0-4.557,3.693-8.25,8.25-8.25C14.557,1.75,18.25,5.443,18.25,10 M17.383,10c0-4.07-3.312-7.382-7.383-7.382S2.618,5.93,2.618,10S5.93,17.381,10,17.381S17.383,14.07,17.383,10'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    display: inline-block;
    padding-left: 25px;
}

#show_hide_password,
#show_hide_passphrase,
#show_hide_confirm_password,
#show_hide_current_password {
    background-color: #e0e0e0;
    border: none;
    border-radius: var(--radius);
    max-height: 38px;
    margin-bottom: 0.5rem;
}

#show_hide_password .input-group-addon,
#show_hide_passphrase .input-group-addon,
#show_hide_confirm_password .input-group-addon,
#show_hide_current_password .input-group-addon {
    padding: .45rem .75rem;
}

#show_hide_password .input-group-addon a,
#show_hide_passphrase .input-group-addon a,
#show_hide_confirm_password .input-group-addon a,
#show_hide_current_password .input-group-addon a {
    color: var(--dark-text);
}

.input-group-btn {
    margin: 0;
    display: flex;
}

.login-page,
.login-page body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

.form-login {
    width: 100%;
    max-width: 350px;
    padding: 30px;
    margin: 0 auto;
}

.form-login .btn {
    width: 100%;
}

.cursor-pointer:hover {
    cursor: pointer;
}

.sidenav {
    height: 100%;
    left: 0;
    overflow-y: auto;
    padding: 20px 20px 0 20px;
    position: fixed;
    width: 270px;
    top: 0;
    z-index: 1;
    /* border-right: #B3B3B3 2px solid;*/
}

.sidenav .logo {
    overflow: auto;
    text-align: center;
    padding-bottom: 30px;
}

.sidenav .logo a {
    overflow: auto;
    display: block;
}

.sidenav label {
    margin-bottom: 0.5rem;
}

.sidenav label.status {
    margin-bottom: 2rem;
}

.sidenav-item {
    text-align: center;
    color: var(--text);
    border: var(--border) 2px solid;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.8em;
    padding: 10px;
    width: 100%;
    text-transform: uppercase;
}

.sidenav-item.active {
    border: var(--border) 2px solid;
    background-color: var(--border);
    color: var(--active-text);
}

.sidenav-item.status {
    background-color: transparent !important;
    border: var(--border) 2px solid;
    cursor: default;
    text-align: left;
    padding-left: 20px;
    position: relative;
}


.nav-tabs {
    border-bottom: var(--border) 2px solid;
}

.nav-tabs .nav-item {
    margin-right: 0.5rem;
}

.nav-tabs .nav-link {
    border-top-left-radius: var(--tab-radius);
    border-top-right-radius: var(--tab-radius);
}



.nav-tabs .nav-link,
.nav-tabs .nav-link:visited,
.nav-tabs .nav-link:hover {
    color: var(--text);
    background-color: transparent;
    border: var(--border) 2px solid;
    border-bottom: none !important;
    cursor: pointer;
    outline: none;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:visited,
.nav-tabs .nav-link.active:hover {
    background-color: var(--border);
    color: var(--active-text);
    border: var(--border) 2px solid;
    border-bottom: none !important;
}


.light {
    height: 15px;
    width: 33px;
    border-radius: var(--radius);
    display: inline-block;
    position: absolute;
    right: 12px;
    top: 12px;
}

.light.green {
    background-color: #39B54A;
}

.light.amber {
    background-color: #ffa603;
}

.light.red {
    background-color: #FF0000;
}

.sidenav .btn {
    width: 100%;
}

ul#availableEvents {
    list-style-type: none;
    padding-left: 0;
    margin: 0.2rem;
}

/* modals */
.modal-backdrop {
    background-color: #ffffff;
}

.modal-backdrop.show {
    opacity: 0.7;
}

.loadingModal {
    text-align: center;
}

.loadingModal .modal-content {
    background: none;
    border: none;
    color: #212529;
}

.loadingModal h3 {
    font-size: 1.25rem;
}

.loadingModal .modal-content h1 {
    animation-duration: 2s;
}

.loadingModal .modal-content img {
    animation-duration: 2s;
}

.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
    display: block;
    margin: auto;
}

.loader::before,
.loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #1A75D2;
    animation: prixClipFix 2s linear infinite;
}

.loader::after {
    transform: rotate3d(90, 91, 0, 180deg);
    border-color: #1A75D2;
}

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

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

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    75%,
    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }
}

/* bootstrap 5 switch */
.form-check .form-check-input5 {
    float: left;
    margin-left: -1.5em;
}

.form-check-input5 {
    width: 1em;
    height: 1.5em;
    margin-top: 0;
    vertical-align: top;
    background-color: #f2f2f2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 2px solid var(--border);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    /*
    color-adjust: exact;*/
    print-color-adjust: exact;

}

.form-check-input5[type=checkbox] {
    border-radius: 0.25em;
}

.form-check-input5:checked {
    background-color: var(--switch-on);
    border-color: var(--switch-on);
}

.form-check-input5:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-switch {
    padding-left: 2.5em;
}

.form-switch .form-check-input5 {
    width: 2.8em;
    margin-left: -2.5em;
    margin-right: 0.6em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: var(--radius);
    transition: background-position 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input5 {
        transition: none;
    }
}

.form-switch .form-check-input5:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25)
}

.form-switch .form-check-input5:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 5px;
    margin-bottom: 0.5rem;
}

.grid div {
    background-color: #ddd;
    padding: 5px;
    min-width: 20px;
    text-align: center;
}

.modem-info {
    height: 20px;
}

.sub-select {
    border-bottom: 2px solid #B3B3B3;
    margin-bottom: 0.5rem;
    padding-top: 3px;
}