:root{
    --my-side-w: 55px;
    --my-header-h: 8vh;
    --my-footer-h: 5vh;
    --my-content-h: 87vh;
    --my-lighter-grey: #F7F7F7;
    --my-light-grey: #e9e9e9;
    --my-grey: #8a8a8a;
    --my-dark-grey: #58666e;
    --my-darker-grey: #363535;
    --bs-body-bg:var(--my-lighter-grey);
    --bs-border-color:var(--my-grey);
    --bs-primary: #fdd700;
    --bs-primary-rgb: 253, 215, 0;
    --bs-secondary: #000000;
    /* --bs-secondary-rgb: 33, 103, 51; */
    --bs-secondary-rgb: 0, 0, 0;
    --bs-link-color: var(--bs-secondary);
    --bs-link-hover-color: var(--bs-secondary);
}

/* GENERAL */
.logo{
    width:auto;
    height:6vh;
}

.cursor_pointer{
    cursor: pointer;
}

.block{
    background-color:var(--my-lighter-grey);
    padding:1rem; 
}

.modal-content{
    margin-top:3rem;
}

*:not(.alert)>.btn-close{
    width:0.5rem;
    height:0.5rem;
    --bs-btn-close-color:#fff;
    --bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
}

.page-link:focus,
.btn-close:focus{
    outline:none!important;
    box-shadow:none!important;
    border-color:inherit;
}
.form-select:focus,
.form-check-input:focus,
.form-control:focus{
    outline:none!important;
    box-shadow:none!important;
    border-color:var(--bs-primary);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate{
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fdd700'/%3e%3c/svg%3e");
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #fdcf00;
    --bs-btn-hover-border-color: #fdcf00;
    --bs-btn-focus-shadow-rgb: 253, 207, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #fdc100;
    --bs-btn-active-border-color: #fdcf00;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 253, 207, 0;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-gray-dark);
    --bs-btn-hover-border-color: var(--bs-gray-dark);
    --bs-btn-focus-shadow-rgb: 58, 52, 64;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--my-darker-grey);
    --bs-btn-active-border-color: var(--my-darker-grey);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: 58, 52, 64;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.pagination {
    --bs-pagination-active-bg: var(--bs-secondary);
    --bs-pagination-active-border-color: var(--bs-secondary);
    --bs-pagination-focus-box-shadow: none;
}

.form-label{
    font-weight:500;
}

.form-check.my-check-alt-labels .form-check-input:checked~.off,
.form-check.my-check-alt-labels .form-check-input:not(:checked)~.on{
    display:none;
}

.form-check-input:enabled:hover{
    cursor:pointer;
}

label.is-invalid,
em.is-invalid{
    font-size:0.8rem;
    color:var(--bs-danger);
    display: inline-block;
    margin-left:0.5rem;
}
.accordion-button,
.accordion-body{
    padding: 0;
}
.accordion-button:focus{
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed){
    color: inherit;
    background-color: transparent;
    box-shadow: none;
    margin-bottom:1rem;
}

button.accordion-button * {
    order: 1;
}

.accordion-button::after{
    order:0;
    margin-left:0;
    margin-right:1rem;
}

.text-grey{
    color: var(--my-grey)!important;
}

.alert-success {
    --bs-alert-color: var(--bs-success);
    --bs-alert-bg: var(--bs-light-bg-subtle);
    --bs-alert-border-color: var(--bs-success);
    --bs-alert-link-color: var(--bs-success);
}

.alert-danger {
    --bs-alert-color: var(--bs-danger);
    --bs-alert-bg: var(--bs-light-bg-subtle);
    --bs-alert-border-color: var(--bs-danger);
    --bs-alert-link-color: var(--bs-danger);
}

.text-dark{
    color: var(--my-dark-grey)!important;
}

a:hover {
    text-decoration: none;
}

body.loading{
    overflow: hidden;
}

#loading{
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
}

#loading.fade{
    display:flex;
    opacity:1;
    background-color:rgba(255, 255, 255, 0.5);
    transition: background-color .15s linear;
}

/* HEADER BLOCK */
#header{
    width: 100%;
    height: var(--my-header-h);
    display:flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bs-gray-dark);
    padding: 0 var(--my-side-w);
}

#header .username{
    width:auto;
    display:flex;
    align-items: center;
    border:2px solid var(--bs-white);
    color:var(--bs-white);
    text-decoration:none;
}


/* FOOTER BLOCK */
footer{
    height: var(--my-footer-h);
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-gray-dark);
    color: white;
}

footer a,
footer a:hover {
    color: var(--bs-primary);
}

/* MAIN CONTENT */
#main_content{
    width:100%;
    position:relative;
    height:var(--my-content-h);
    background-color: var(--my-light-grey);
    overflow-y:auto;
}
#main_content.grey-bg{
    background-color: var(--my-grey);
}
/* MEDIA QUERY device XS */
@media (max-width: 575.98px) { 
    footer{
        font-size:0.8rem;
    }
}