/* prevent annoying horizontal scrolling on mobile */
html {
    /* set this to clip instead of hidden to prevent breaking sticky behavior */
    overflow-x: clip !important;
}
body {
    /* set this to clip instead of hidden to prevent breaking sticky behavior */
    overflow-x: clip !important;
    width: 100% !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* avatars */
.avatar-small {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border: 2px solid #dc3545;
    border-radius: 50%;
}
.avatar-large {
    vertical-align: middle;
    width: 100px;
    height: 100px;
    border: 2px solid #dc3545;
    border-radius: 50%;
}
.initial-avatar {
    background-color: #dc3545;
    color: #fff; 
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:100%;
    width:50px;
    height: 50px;
    font-weight: 600;
}
.initial-avatar-notifications {
    background-color: #dc3545;
    color: #fff; 
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:100%;
    width: 32px;
    height: 32px;
    font-weight: 400;
    font-size: 10pt;
}
.initial-avatar-nav {
    background-color: #ffffff;
    color: #dc3545; 
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:100%;
    width:50px;
    height: 50px;
    font-weight: 400;
    font-size: 8pt;
}

/* screens 576px and below */
/* @media screen and (max-width: 576px) { */
@media screen and (max-width: 669px) {
    #notificationsDropdown {
        position:static !important;
    }
    #notificationsMenu {
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, 0) !important;
        width: 100% !important;
    }
}

#notificationIcon {
    transform: translate(-248%, 368%);
    -webkit-transform: translate(-248%, 368%);

    font-size: 3pt;
}

.blink {
    /* animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite; */
    animation-delay: 0s;
    animation-direction: normal;
    animation-duration: 1s;
    animation-fill-mode: none;
    animation-iteration-count: infinite;
    animation-name: animationBlink;
    animation-play-state: running;
    animation-timing-function: steps(5, start);

    -webkit-animation-delay: 0s;
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: none;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: animationBlink;
    -webkit-animation-play-state: running;
    -webkit-animation-timing-function: steps(5, start);
}
@keyframes animationBlink {
    to {
        visibility: hidden;
    }
}
@-webkit-keyframes animationBlink {
    to {
        visibility: hidden;
    }
}

li .dropdown-toggle:after { content: none }

.border-dashed {
    border-style: dashed !important;
}

.form-check-input:checked {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.form-check-input-lg {
    width: 1.5rem;
    height: 1.5rem;
}