/* scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #cccccc;
}
::-webkit-scrollbar-thumb:hover {
    background: #b2b2b2;
}

/* notyf overrides */
.notyf .notyf__toast {
    max-width: 400px;
}
/* spinner */

.spinning {
    animation: spin-animation 0.5s infinite;
    display: inline-block;
}

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

/* clickers */

.btn-pointer {
    cursor: pointer;
}

.no-decor-a {
    text-decoration: none;
    color: inherit;
}

.no-decor-a:hover {
    text-decoration: none;
    color: inherit;
}

.no-decor-a:visited {
    text-decoration: none;
    color: inherit;
}

.help-modal {
    position: relative;
    border-radius: 5px;
    background-color: #2EBADB;
    color: white;
    font-size: 12px;
    width: 100%;
    padding: 10px 10px 14px 10px;
}

.help-modal p {
    margin-bottom: 0px;
}

body .modal.show .modal-dialog a.btn.dropdown-toggle {
    text-overflow: ellipsis;
    overflow: hidden;
}

.dropdown.taskStatusContainer .fa.fa-flag {
    color: #2EBADB;
}

.dropdown.taskStatusContainer .fa.fa-gear {
    color: #FFCA1B;
}

.dropdown.taskStatusContainer .fa.fa-check {
    color: #77D50D;
}

.dropdown.taskStatusContainer .fa.fa-ban {
    color: #FE4F69;
}

li.locked-for-dev {
    background-color: lightgray;
    pointer-events: none;
    cursor: not-allowed;
}

li.locked-for-dev a span {
    color: gray;
}

li.locked-for-dev a span::before {
    color: gray;
}

li.locked-for-dev a span::after {
    color: gray;
}

/* BOOTSTRAP OVERRIDES */

/* TOOLTIPS */
.tooltip {
    --bs-tooltip-bg: #555;
    --bs-tooltip-border-radius: 6px;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-font-size: 12px;
    --bs-tooltip-padding-x: 10px;
    --bs-tooltip-padding-y: 10px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
}

/*.tooltip .tooltip-arrow {
    display: none;
}
*/
/* MODALS */

body .modal.show .modal-dialog .form-check-input {
    height: 15px;
    width: 15px;
    vertical-align: sub;
}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

body .modal.show .modal-dialog .form-check-label {
    margin-left: 2px;
}

.modal.show .modal-dialog .modal-body {
    padding: 0.5rem 2rem;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal.show .modal-dialog .modal-body.no-scroll {
    overflow: visible;
}

.modal.show .modal-dialog .modal-body .dropdown-menu {
    z-index: 5;
}

.modal.show .modal-dialog .btn.btn-info {
    background-color: white;
    font-size: 12px;
    color: #2EBADB;
    padding-right: 4px;
    padding-left: 4px;
    width: initial;
    margin-top: 3px;
    float: right;
}

.modal.show .fa.fa-xmark.show-help {
    position: absolute;
    color: white;
    cursor: pointer;
    right: 11px;
    top: 11px;
}

.modal.show .modal-dialog .modal-header, .modal.show .modal-dialog .modal-footer {
    padding: 10px 24px;
}

.modal .modal-dialog .modal-footer .btn-success {
    background: #F0F0F0;
    border: 0px;
    color: #3a4049;
    border-radius: 3px;
    margin-right: 6px;
}

.modal .modal-dialog .modal-header .show-help {
    margin-top: 5px;
    margin-left: 8px;
    font-size: 18px;
    text-decoration: none;
    color: #2EBADB;
}

.modal .modal-dialog .modal-header .show-help:hover {
    color: #2EBADB;
}

.modal .modal-dialog .modal-header .show-help:visited {
    color: #2EBADB;
}

.modal .modal-dialog .modal-header .show-help:active {
    color: #2EBADB;
}

.modal.show .modal-dialog .modal-content {
    border-radius: 5px;
}

.modal.show .modal-dialog .dropdown .dropdown-menu {
    max-height: 180px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.modal .modal-dialog .modal-footer .btn-success:hover {
    background: #D8D8D8;
}

.modal .modal-header, .modal .modal-footer {
    border: none;
    padding-top: 5px;
}

.modal {
    font-family: "Roboto", -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

h5.modal-title {
    margin: 0.5em auto auto auto;
    font-size: 1.85rem;
    font-weight: 400;
    line-height: 2rem;
    color: #3a4049;
}

.modal .modal-body label.lb-txtarea {
    margin-top: 0px;
}

.modal .close {
    text-decoration: none;
    color: #BCBCBC;
}

.modal .close span {
    font-size: 25px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 18px;
    transition: all .3s;
}

.modal .close:hover {
    text-decoration: none;
}

.modal .close span:hover {
    color: white;
    background-color: #FE4F69;
}

.modal .close:visited {
    text-decoration: none;
    color: #BCBCBC;
}

.modal-body label {
    margin-top: 7px;
    padding-top: 6px;
    font-size: 12px;
}

/* MODALS */

.modal-body .dropdown-toggle {
    font-size: 12px;
}

.modal-body .dropdown li a {
    font-size: 12px;
}

.modal.show .modal-footer .agir-icon-ModPlusIcn {
    vertical-align: text-top;
    font-size: 18px;
    margin-right: 2px;
}

.modal-body .dropdown-toggle::after {
    display: none;
}

.modal.show .modal-body .btn-success .agir-icon-ModPlusIcn {
    vertical-align: text-top;
}

input[type="range"] {
    overflow: hidden;
    width: 100%;
    color: #77D50D;
    --thumb-height: 25px;
    --track-height: 6px;
    --track-color: rgba(217, 217, 217, 1);
    --clip-edges: 0.125em;
}

input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));
    filter: brightness(100%);
    clip-path: polygon( 100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further) );
}

input[type="range"]:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #FFFFFF;
    background: #D9D9D9;
    border-radius: 5px;
    border: 0px solid #FFFFFF;
}

input[type=range]::-moz-range-progress {
    border-radius: 5px;
    background: #77D50D;
    height: 10px;
    border: 0px solid #FFFFFF;
    cursor: pointer;
    box-shadow: 0px 0px 0px #FFFFFF;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #FFFFFF;
    height: 25px;
    width: 25px;
    border-radius: 15px;
    background: #228DFF;
    cursor: pointer;
}

.modal-body input[type=text], .modal-body input[type=number], .modal-body input[type=password], .modal-body input[type=date], .modal-body select, .modal-body textarea {
    min-height: 24px;
    line-height: 18px;
    color: #757575;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #e8e8e8;
    background-color: white;
    width: 100%;
    outline: 0;
    padding: 6px 12px;
    margin-top: 5px;
    transition: border .3s;
}

.modal-body input[type=date]::-webkit-calendar-picker-indicator {
    filter: invert(50%) sepia(18%) saturate(0%) hue-rotate(273deg) brightness(88%) contrast(90%);
    cursor: pointer;
    font-size: 18px;
}

.modal-body input[type=date]::-webkit-calendar-picker-indicator:hover {
    filter: invert(50%) sepia(18%) saturate(0%) hue-rotate(273deg) brightness(88%) contrast(90%);
}

.modal-body textarea.textarea-autosize {
    margin-top: 7px;
    resize: none;
    overflow: hidden;
    max-height: 250px;
}

.modal-body input[type=text]:focus, .modal-body input[type=number]:focus, .modal-body input[type=password]:focus, .modal-body input[type=date]:focus, .modal-body select:focus, .modal-body textarea:focus {
    border-color: #2EBADB;
}

.modal-body select {
    padding-left: 3px;
    padding-right: 3px;
}

.modal-body input[type=checkbox] {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: bottom;
}

.modal-body .user-group-container label {
    padding: 0px;
    min-height: 14px;
    line-height: 14px;
    display: inline-block;
}

.modal-body .dropdown {
    color: #757575;
    margin-top: 6px;
}

.modal-body .dropdown .dropdown-menu {
    width: 100%;
    border-radius: 3px;
}

.modal-body .dropdown .btn.dropdown-toggle {
    border-radius: 3px;
    width: 100%;
    text-align: left;
    position: relative;
}

.modal-body .dropdown .btn.dropdown-toggle .fa-chevron-down {
    position: absolute;
    right: 7px;
    top: 9px;
}

.modal-body .dropdown a.btn.dropdown-toggle {
    border-color: #e8e8e8;
    color: #757575;
}

.modal-body .dropdown a.btn.dropdown-toggle:hover {
    border-color: #757575;
}

.modal-body .dropdown a.btn.dropdown-toggle:visited {
    color: #757575;
}

.modal-body .dropdown a.btn.dropdown-toggle span.fa-chevron-down {
    font-size: 12px;
}

/* COLORS */

span.agir-icon::before {
    color: #ffffff;
}

span.agir-icon-gray::before {
    color: #D2D2D2;
}

span.agir-icon-darkgray::before {
    color: #808080;
}

general-clr-darkgray {
    color: #808080;
}

.general-clr-gray {
    color: #D2D2D2;
}

span.agir-icon-green::before {
    color: #8BC34A;
}

span.agir-icon-darkgreen::before {
    color: #77D50D;
}

span.agir-icon-red::before {
    color: #EF5350;
}

span.agir-icon-blue::before {
    color: #42A5F5;
}

span.agir-icon-purple::before {
    color: #AB47BC;
}

span.agir-icon-pink::before {
    color: #EC407A;
}

span.agir-icon-yellow::before {
    color: #FFCA28;
}

i.agir-icon-yellow::before {
    color: #FFCA28;
}

span.agir-icon-w-h:hover::before {
    color: #ffffff;
}

span.agir-icon-gray-h:hover::before {
    color: #D2D2D2;
}

span.agir-icon-green-h:hover::before {
    color: #8ac926;
}

span.agir-icon-darkgreen-h:hover::before {
    color: #77D50D;
}

span.agir-icon-red-h:hover::before {
    color: #ff595e;
}

span.agir-icon-blue-h:hover::before {
    color: #3795F9;
}

span.agir-icon-purple-h:hover::before {
    color: #D156FF;
}

span.agir-icon-pink-h:hover::before {
    color: #FF39AB;
}

span.agir-icon-yellow-h:hover::before {
    color: #FFC107;
}

.clr-red {
    color: #ff595e;
}

.clr-red-hover:hover {
    color: #FE697F;
}

.bg-red {
    background-color: #EF5350;
}

.bg-red-hover:hover {
    background-color: #FE697F;
}

.text-green,
.clr-green {
    color: #8ac926;
}

.clr-green-hover:hover {
    color: #B6F618;
}

.bg-green {
    background-color: #8BC34A;
}

.bg-green-hover:hover {
    background-color: #B6F618;
}

.clr-blue {
    color: #1982c4;
}

.clr-blue-hover:hover,
.clr-blue-hover-icon:hover i {
    color: #3795F9;
}

.bg-blue {
    background-color: #42A5F5;
}

.bg-blue-hover:hover {
    background-color: #3795F9;
}

.clr-purple {
    color: #9A4EAE;
}

.clr-purple-hover:hover {
    color: #D156FF;
}

.bg-purple {
    background-color: #AB47BC;
}

.bg-purple-hover:hover {
    background-color: #D156FF;
}

.clr-pink {
    color: #CA1F7B;
}

.clr-pink-hover:hover,
.clr-pink-hover-icon:hover i {
    color: #FF39AB;
}

.bg-pink {
    background-color: #EC407A;
}

.bg-pink-hover:hover {
    background-color: #FF39AB;
}

.clr-yellow {
    color: #ffca3a;
}

.clr-yellow-hover:hover {
    color: #FFCA1B;
}

.clr-yellow.agir-icon::before {
    color: #ffca3a;
}

.clr-yellow-hover.agir-icon::before:hover {
    color: #FFCA1B;
}

.bg-yellow {
    background-color: #FFCA28;
}

.bg-yellow-hover:hover {
    background-color: #FFCA1B;
}

.required-field {
    border-color: #FE4F69 !important;
}

.fulfilled-field {
    border-color:#77D50D !important;
}

.required-field2 {
    border: 1px solid #FE4F69 !important;
    outline-color: #FE4F69 !important;
}

.fulfilled-field2 {
    border: 1px solid #77D50D !important;
    outline-color: #77D50D !important;
}

#toast-container .toast.toast-success {
    background-color: green;
}

#toast-container .toast.toast-error {
    background-color: darkred;
}

.searchbar-agir {
    border: none;
    color: #BCBCBC;
    margin-right: 0px;
    padding: 8px 14px 8px 8px;
    width: 300px;
    font-size: 15px;
    box-shadow: 0 4px 2px -2px #F7F7F7;
    outline: 1px solid transparent;
    transition: outline .3s;
}

.searchbar-agir:active {
    border: none;
    outline: none;
}

.searchbar-agir:focus {
    border: none;
    outline: 1px solid #2EBADB;
}

.clickable {
    cursor: pointer;
}

.text-limiter, .text-limiter2 {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.text-limiter {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-limiter2 {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-item-container {
    width: 140px;
    position: relative;
    margin: auto;
}

.grid-item-counter {
    position: absolute;
    top: 0;
    right: 10px;
    color: #2EBADB;
    font-weight: bold;
}

.grid-item-counter-docs {
    position: absolute;
    top: 0;
    right: -17px;
    color: #2EBADB;
    font-weight: bold;
}

.grid-item-container .agir-icon.add {
    position: absolute;
    top: 58px;
    right: -16px;
    font-size: 20px;
}

.grid-item-container .agir-icon::before {
    color: #2EBADB;
}

.grid-item-container .fa {
    font-size: 60px;
    color: #D9D9D9;
}

.grid-item-container .agir-icon {
    font-size: 60px;
}

.grid-item-container .agir-icon-gray {
    font-size: 60px;
}

.grid-item-container .agir-icon-gray::before {
    transition: color .3s;
}

.grid-item-container .agir-icon-gray:hover::before {
    color: #AFAFAF;
}

.search-btn {
    border: none;
    font-size: 18px;
    background-color: transparent;
    color: #BCBCBC;
    margin-left: -10px;
    padding: 8px 8px 7px 0px;
    box-shadow: 0 4px 2px -2px #F7F7F7;
}

/* HELPERS */

.toast-container .toast {
    display: block;
    bottom: 15px;
    left: 15px;
    z-index: 9999;
    letter-spacing: 0.5px;
    padding: 0;
    --bs-toast-max-width: 367px;
}

    .toast-container .toast .fade-new-alert {
        transition-duration: 0s;
        transition-timing-function: ease-in;
        transition-delay: 0s;
    }

    .toast-container .toast .toast-header {
        --bs-toast-header-bg: none;
    }

    .toast-container .toast .toast-title {
        font-size: 1.1em;
    }

    .toast-container .toast .btn-close {
        --bs-btn-close-focus-shadow: 0;
        outline: none;
        box-shadow: none;
        padding-right: .8em;
        visibility: hidden;
    }

    .toast-container .toast:hover .btn-close {
        visibility: visible;
    }

    .toast-container .toast .toast-body-newAlert {
        padding: 1.2rem;
        padding-bottom: .9em;
    }

    .toast-container .toast .alert-text {
        font-size: .95em;
    }

    .toast-container .toast .alert-subtext {
        font-size: .8em;
    }

    #changePageAlert:hover {
        background-color: #FFFAFA;
    }

    .toast-container .toast .btn-changeAlert {
        position: relative;
        float: right;
        top: 10px;
        right: 12px;
    }

    .toast-container .toast .header-changeAlert {
        display: block;
        padding: 0;
        border: 0;
        justify-content: right;
    }

    .toast-container .toast .toast-body-changeAlert {
        padding: 1.2rem;
        padding-bottom: 0;
    }

    .toast-container .toast .alert-description-changeAlert {
        position: relative;
        top: 6px;
    }

    .toast-container .toast .alert-subtext-changeAlert {
        font-size: .8em;
        padding-top: 1em;
    }

    .toast-container .toast .toast-footer {
        text-align: end;
        height: 20%;
    }

    .toast-container .toast .form-check {
        padding-right: .47em;
        padding-bottom: .6em;
        margin: 0;
    }

    .toast-container .toast .form-check-input {
        font-size: 1.05em;
        vertical-align: sub;
        cursor: pointer;
    }

    .toast-container .toast .form-check-label {
        vertical-align: middle;
        padding-left: .35em;
        padding-right: 1.2em;
        font-size: .8em;
    }

    .toast-container .toast .form-check-input:focus {
        box-shadow: none;
    }

    .toast-container .toast .toast-footer .form-check input[type=checkbox] {
        float: none;
    }

    .toast-container .toast.fade-new-alert.fade {
        background-color: white;
    }
/*  MEDIA QUERIES */
    @media (max-width:767px) {
        .toast-container .toast {
                --bs-toast-max-width: 307px;
        }
    }