:root {
    --agir-documents: #42A5F5;
    --agir-processes: #EF5350;
    --agir-new: #2EBADB;
}

body {
    font-family: "Poppins", -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
}

/* 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,
.clr-red-hover-icon:hover i,
.clr-red-hover:hover {
    color: #FE697F !important;
}

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

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

.text-q-agir-green,
.clr-green,
.clr-green-hover-icon:hover i {
    color: #8ac926 !important;
}

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

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

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

.text-q-agir-blue,
.clr-blue {
    color: #1982c4 !important;
}

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

.bg-q-agir-blue,
.bg-blue {
    background-color: #42A5F5 !important;
}

.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;
}

.text-q-agir-pink,
.clr-pink {
    color: #CA1F7B !important;
}

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

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

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

.text-q-agir-yellow,
.clr-yellow,
.clr-yellow.agir-icon::before {
    color: #ffca3a !important;
}

.clr-yellow-hover:hover,
.clr-yellow-hover-icon:hover i
/*.clr-yellow-hover.agir-icon::before:hover*/ {
    color: #FFCA1B;
}

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

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

.text-q-agir-delete,
.clr-delete,
.clr-delete-hover-icon:hover i {
    color: #E5316E !important;
}

.bg-planned {
    background-color: #228DFF;
}

.bg-pending {
    background-color: #FFCA1B;
}

.bg-overdue {
    background-color: #FE4F69;
}

.bg-suspended {
    background-color: gray;
}

.bg-completed {
    background-color: #A5E800;
}
/* TODO DA Colors*/
.text-agir-new,
.text-agir-new .agir-icon::before {
    color: var(--agir-new) !important;
}
.bg-agir-new,
.bg-agir-new .agir-icon::before {
    background-color: var(--agir-new) !important;
}

.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: 99%;
    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;
    }
}