:root {
    --header-height: 4rem;
    --card-gap: 1rem;
}
body {
    background-color: hsl(0, 0%, 90%);
    --section-gap: 1rem;
}
header {
    background-color: hsl(0deg 0% 100% / 80%);
    backdrop-filter: blur(1.5px);
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
main {
    margin-top: calc(var(--header-height) + var(--card-gap));
    margin-bottom: 3em;
}

input::-webkit-calendar-picker-indicator {
    display: none !important;
}

.dead {
    user-select: none;
    pointer-events: none;
}
.ghost {
    opacity: 0.50;
}
.fuzzy {
    filter: blur(.5px);
}


/* #region ==================== CARD */

main .card {
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
    border: none;
}
main .card-header {
    font-weight: 500;
    height: 3rem;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}
main > .card + :is(.card, .row),
main > .container > .card + :is(.card, .row),
main > .row + .row,
main > .container > .row + .row,
main > form,
main > .container > form,
main > .container > form > .row + .row,
main .col > .card + .card
{
    margin-top: calc(var(--card-gap));
}

/* #endregion */


/* #region ==================== NOTIFICATIONS */

main > .notifications > .alert,
main > :is(.container, .container-fluid) > .notifications > .alert {
    box-shadow: 0 0 2px hsl(0deg 0% 0% / 10%),
                0 1px 2px hsl(0deg 0% 0% / 20%);
    margin-bottom: 0;
}

main > .notifications > .alert + .alert,
main > :is(.container, .container-fluid) > .notifications > .alert + .alert {
    margin-top: 0.5em;
}

main > .notifications > .alert .close,
html#profile_info-edit main > :is(.container, .container-fluid) > .notifications > .alert .close {
    font-size: calc(1em * 1.5);
}

main > .notifications:not(:empty) + *,
main > :is(.container, .container-fluid) > .notifications:not(:empty) + *,
main .card + .notifications:not(:empty) {
    margin-top: var(--card-gap);
}

/* #endregion */


/* #region ==================== VALIDATION ERRORS */

:is(.form-control, .input-group) + .alert,
:is(.form-control, .input-group, .row) + .notifications > .alert,
.row > .notifications:not(:empty) > .alert {
    margin-top: 0.5em;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0;
}
:is(.form-control, .input-group) + .alert-dismissible .close,
:is(.form-control, .input-group, .row) + .notifications > .alert-dismissible .close,
.row > .notifications:not(:empty) > .alert .close {
    padding: 0.6rem 0.7rem;
    font-size: 1rem;
}

/* #endregion */


/* #region ==================== ICON */

.has-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.has-icon .icon + span {
    margin-left: 0.5em;
    white-space: nowrap;
}

/* #endregion */


/* #region ==================== SEPERATOR */

.hr-seperator {
    position: relative;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.hr-seperator:after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
    z-index: 9;
}
.hr-seperator.is-blank {
    height: 1px;
}
.hr-seperator.is-blank:after {
    top: 0;
}
.hr-seperator.middle-line:after {
    top: calc(50% + 1px);
}
.hr-seperator.middle-line .seperator-text {
    background-color: white;
    z-index: 99;
    position: relative;
    padding-right: 0.5em;
}
.hr-seperator.middle-line .seperator-text.text-indent {
    padding-left: 0.5em;
    margin-left: 0.5em;
}
.hr-seperator.middle-line .seperator-text.text-center {
    margin-left: auto;
    margin-right: auto;
    display: table;
    padding-left: 0.5em;
}
h2.hr-seperator {
    font-size: 1em;
} 
/* #endregion */


/* #region ==================== INPUTS */

input::placeholder {
    opacity: 0.4 !important;
}
input[type=password]::placeholder {
    opacity: 0.3 !important;
}
.custom-checkbox {
    user-select: none !important;
}
.input-group .input-group-prepend .dropdown .dropdown-toggle{
    border: 1px solid #ced4da !important;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: hsl(210, 15%, 93%);
}

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
}

/* #endregion */


/* #region ==================== MAINTENANCE */

.maintenance .alert {
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
}

/* #endregion */


/* #region ==================== WTF */

.move-handle {
    color: hsl(0, 0%, 0%, 0.4);
    cursor: grab;
}
.action-danger {
    color: hsla(0, 60%, 50%, 0.8);
    background-color: hsl(210, 15%, 93%);
    border: 1px solid hsl(210, 15%, 83%);
    margin-left: .5rem !important;
}
.action-danger:hover {
    color: hsla(0, 60%, 50%, 0.8);
    background: hsl(210, 15%, 90%);
    border-color: hsl(210, 15%, 80%);
}

html#profile_info-edit .custom-checkbox {
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0.5rem !important;
}
html#profile_info-edit .custom-checkbox label {
    padding-left: .5rem !important;
    background-color: hsl(210, 15%, 93%);
    border: 1px solid hsl(210, 15%, 83%);
    border-radius: .2rem;
    margin-right: 0px;
}
html#profile_info-edit .custom-checkbox label:hover {
    cursor: pointer;
    background: hsl(210, 15%, 90%);
    border-color: hsl(210, 15%, 80%);
}
html#profile_info-edit .custom-checkbox label:before,
html#profile_info-edit .custom-checkbox label:after {
    display: none;
}

main .form-group :is(select, .dropdown) + .icon {
    cursor: pointer;
}

.dropdown-item {
    user-select: none;
    cursor: pointer;
}
.dropdown-item:hover {
    background-color: hsla(0, 0%, 0%, 0.06);
}
.dropdown-item.active,
.dropdown-item:active {
    color: black;
    background-color: hsla(0, 0%, 0%, 0.1);
}

/* #endregion */


/* #region ==================== LANG SWITCHER */

.lang-switcher {
    display: inline-block;
}
.lang-switcher .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.6rem;
}
.lang-switcher .dropdown-toggle:after {
    margin-top: 0.2em;
    margin-left: 0.5em;
}
.lang-switcher .dropdown-menu {
    top: 34px !important;
}
.lang-switcher .dropdown-item {
    cursor: pointer;
    padding: 0.5em 0.8em;
    display: flex;
}
.lang-switcher .dropdown-item a {
    color: inherit;
}
.lang-switcher .dropdown-item a:hover {
    text-decoration: none;
}

.lang-switcher .language {
    display: flex;
    flex-grow: 1;
}
.lang-switcher .language img {
    width: 14px;
    aspect-ratio: 1;
    object-fit: contain;
    scale: 1.25;
}
.lang-switcher .language .icon {
    display: flex;
    align-items: center;
    position: relative;
    width: 17px;
}
.lang-switcher .language .icon + span {
    margin-left: 0.5em;
    line-height: 1;
}
.lang-switcher .language .icon i {
    scale: 1.25;
    position: absolute;
    opacity: 0;
}


.lang-switcher .language .icon i.fa-globe-americas {
    animation: 20s linear infinite lang-americas-fade;
}
.lang-switcher .language .icon i.fa-globe-europe {
    animation: 20s linear infinite lang-europe-fade;
}
.lang-switcher .language .icon i.fa-globe-africa {
    animation: 20s linear infinite lang-africa-fade;
}
.lang-switcher .language .icon i.fa-globe-asia {
    animation: 20s linear infinite lang-asia-fade;
}

@keyframes lang-americas-fade {
    0% { opacity: 0; }
    2.5% { opacity: 1; }
    22.5% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes lang-europe-fade {
    0% { opacity: 0; }
    25% { opacity: 0; }
    27.5% { opacity: 1; }
    47.5% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes lang-africa-fade {
    0% { opacity: 0; }
    50% { opacity: 0; }
    52.5% { opacity: 1; }
    73.5% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes lang-asia-fade {
    0% { opacity: 0; }
    75% { opacity: 0; }
    77.5% { opacity: 1; }
    97.5% { opacity: 1; }
    100% { opacity: 0; }
}

/* #endregion */