html,
body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    background: rgb(132, 145, 158, 0.85);
    font-size: 14px;
    height: 100%;
}

body::after {
    content: ' ';
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.4;
    background: url('../img/pattern.jpg');
    background-size: cover;
    z-index: -1;
}

body.cursor-wait {
    cursor: wait;
}

b,
strong {
    font-weight: bold;
}

p {
    font-size: inherit;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
}

::placeholder {
    color: #8898aa;
    opacity: 1;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.btn-link>.fas,
.btn-link>.far,
.btn-link>.fab,
.btn-link>.fa-solid,
.btn-link>.fa-regular,
.btn-link>.fa-duotone {
    font-size: 16px;
}

.btn-link:hover {
    outline: none;
}

.site-error {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.avatar {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: top center;
    border-radius: 50%;
}

.avatar-lg {
    width: 75px;
    height: 75px;
}

.avatar-md {
    width: 50px;
    height: 50px;
}

.avatar-sm {
    width: 28px;
    height: 28px;
    font-size: .7rem;
}

.avatar-xs {
    width: 23px;
    height: 23px;
    font-size: .6rem;
}

.avatar-group .avatar+.avatar {
    margin-left: -0.8rem;
}

.avatar-group {
    display: flex;
    justify-content: flex-end;
}

.reject {
    background-color: indianred !important;
}

.filter-gray {
    opacity: 0.4;
    filter: grayscale(1);
}

.filter-green {
    filter: invert(40%) sepia(49%) saturate(200%) hue-rotate(135deg) brightness(86%) contrast(92%);
}

.ring-gray {
    border: 3px solid #CCC !important;
    outline: 3px solid #FFF;
}

.ring-success {
    border: 3px solid var(--success) !important;
    outline: 3px solid #FFF;
}

.border-lighter {
    border: 1px solid var(--lighter);
}

.avatar-autocomplete {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: top center;
    border-radius: 50%;
}

#navbar-main .breadcrumb a {
    color: #FFFFFF;
}

#mainNav .dropdown-item.active {
    background: #7e8a961f;
    color: var(--dark);
}

nav.navbar h4 {
    font-size: 20px;
    font-weight: 700;

}

/* BREADCRUMB */
.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    align-items: center;

}

.breadcrumb .full {
    display: flex !important;
    align-items: center;
}

.breadcrumb li+li:before {
    content: '/';
    padding: 10px;
    font-weight: 100;
}

.breadcrumb li+li {
    font-weight: 100;
}

.breadcrumb li:first-child {
    font-weight: 400;
}

i+span {
    padding-left: 5px;
}

/* /BREADCRUMB */

/* FORMS */
form div.required label.control-label:after {
    content: " * ";
    color: indianred;
}

.has-success:not(.static):after,
.has-danger:not(.static):after {
    font-family: 'Font Awesome 6 Duotone';
    top: 36px;
    right: 24px;
    color: #FFF;
}

.has-success:after,
.has-danger:after {
    color: #FFF;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #333;
    -webkit-box-shadow: 0 0 0px 0px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

.desc:after,
.asc:after {
    font-family: "Font Awesome 6 Duotone";
    font-weight: 900;
    content: "\f15e";
    padding-left: 5px;
}

.asc:after {
    content: "\f15d";
}

.has-success:after,
.has-danger:after {
    font-family: 'Font Awesome 6 Duotone';
    font-weight: 900;
}

.has-success:after {
    content: '\f00c';
}

.has-danger:after {
    content: '\f12a';
}

.has-danger .form-control,
.has-danger>.select2>.selection>.select2-selection.select2-selection--single {
    border-color: indianred;
}

.has-danger .form-control,
.has-danger>.select2>.selection>.select2-selection.select2-selection__rendered {
    border-color: indianred;
}

.has-danger .help-block {
    color: indianred;
    font-size: 0.75rem;
}

.custom-control-alternative .custom-control-label::before {
    border: 0;
    box-shadow: 1px 2px 3px rgba(50, 50, 93, 0.21), 0 1px 0 rgba(0, 0, 0, 0.04);
    background: #EFEFEF;
    transform: scale(1.1);
}

.hint-block {
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 5px;
}

.hint-block:before {
    font-family: "Font Awesome 6 Duotone";
    content: '\f059';
    padding-right: 5px;
    font-style: normal;
}

.editing {
    opacity: 0.3;
}

.input-transparent,
.input-transparent:focus {
    border: 0;
    background: transparent !important;
    padding: 3px;
    outline: transparent;
    color: var(--default);
}

.category .input-transparent {
    color: #3d475e;
    font-weight: bolder;
}

.input-transparent:focus:not(:read-only) {
    outline: 2px dashed #999;
}

/* /FORMS */

#categories>.category .category-border {
    border-left: 6px solid;
}

#categories .children .category-border {
    border-left: #888 6px solid;
}

.add-item-button,
.add-item-button:focus {
    border: 2px solid var(--lighter);
    color: #777;
    font-size: small;
    width: 100%;
    background: transparent;
    padding: 10px;
    cursor: pointer;
    outline: 0;
}

.add-step,
.add-step:focus {
    border: 2px dashed var(--lighter);
    color: #777;
    font-size: small;
    width: 100%;
    background: transparent;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    outline: 0;
}

/* NOTIFICATIONS */
.wrapper {
    display: block;
}

#notifications {
    height: 97vh;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 9999;
    transition: all 0.3s;
    overflow-y: scroll;
    background: #5a626b;
    border-radius: 20px;
    margin: 12px;
}

#notifications.active {
    right: 0px;
}

.overlay {
    display: none;
    left: 0;
    top: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.overlay.active {
    display: block;
    opacity: 1;
}

.mCustomScrollBox:focus {
    outline: 0;
}

.border-priority-2,
.border-priority-1,
.border-priority-0 {
    position: relative;
}

.row>.border-priority-2,
.row>.border-priority-1,
.row>.border-priority-0 {
    position: relative;
    padding-left: 35px;
}

.border-priority-2::before,
.border-priority-1::before,
.border-priority-0::before {
    content: '';
    width: 4px;
    border-radius: 4px;
    position: absolute;
    height: 100%;
    left: 0px;
    opacity: 0.7;
}

#notifications .border-priority-2::before,
#notifications .border-priority-1::before,
#notifications .border-priority-0::before {
    left: 15px;
}


.border-priority-2::before {
    background-color: var(--danger);
}

.border-priority-1::before {
    background-color: var(--light);

}

.border-priority-0::before {
    background-color: var(--lighter);
}

.collapse-button[aria-expanded="true"] {
    outline: 1px solid var(--lighter);
    outline-offset: 3px;
}

/* /NOTIFICATIONS */

/* CARDS */
.card {
    box-shadow: 3px 3px 4px 4px rgba(136, 152, 170, 0.15) !important;
    background: #fbfbfb;
    overflow: hidden;
    border-radius: 0.4rem;
}

.card-header,
.card-footer,
.card-body {
    background: #fbfbfb;
}

/*.cards-dashboard .card-body {*/
/*    min-height: 115px;*/
/*}*/

/* /CARDS */

/* ALERTS */
.alert-danger {
    color: #dd5555;
    background: #f1afaf2b;
    border: 0;
}

.alert-gray {
    color: #222;
    background: #FEFEFE;
    box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02) !important;
    border: 0 !important;
    padding: 10px 10px 3px;
}

/* /ALERTS */
input[type=radio] {
    accent-color: var(--success);
}

/* MODAL */
.modal:nth-of-type(odd) {
    z-index: 1076;
}

.modal:nth-of-type(even) {
    z-index: 1074;
}

.modal-backdrop {
    z-index: 1073 !important;
}

.modal-backdrop.show:nth-child(1) {
    z-index: 1073 !important;
}

/* /MODAL */



/* GAP */
.g-5 {
    gap: 5px;
}

.g-10 {
    gap: 10px;
}

.g-15 {
    gap: 15px;
}

.g-20 {
    gap: 20px;
}

/* /GAP */

.tooltip {
    z-index: 1080 !important;
}

/* PROGRESS */
.progress {
    height: 17px;
    margin-bottom: 0;
    margin-top: 5px;
}

.circle-progress {
    display: flex;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: conic-gradient(var(--primary) var(--progress), #e2dfdf 0deg);
    font-size: 0;
}

.circle-progress[data-progress="100"]::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Duotone';
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: 4px;
    border-radius: 50%;
    background: white;
    font-size: 0.9rem;
    text-align: center;
}

.circle-progress::after {
    content: attr(data-progress) '%';
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: 4px;
    border-radius: 50%;
    background: white;
    font-size: 0.6rem;
    text-align: center;
}

/* /PROGRESS */

.btn:not(:last-child) {
    margin-right: .33rem;
}

a>span {
    font-weight: 400;
}

a.btn>i {
    margin-right: 0 !important;
}

.card.card-grey,
.card-grey .card-header,
.card-grey .card-body {
    background: #DADADA;
}

.card-boards {
    display: flex;
    column-count: auto;
    flex-wrap: nowrap;
}

.card-boards>.card {
    flex: 1;
    margin-right: 10px;
}

.card-boards ::-webkit-scrollbar {
    width: 0;
}

.small-scroller ::-webkit-scrollbar {
    height: 3px !important;
}

.small-scroller ::-webkit-scrollbar-track {
    background: #b7b7b7 !important;
}

.scroll-thin ::-webkit-scrollbar {
    height: 3px !important;
    width: 3px !important;
}

.scroll-thin ::-webkit-scrollbar-thumb {
    background: #CCC;
}

.scroll-thin ::-webkit-scrollbar-track {
    background: #FBFBFB;
}

.week-boards>div:not(:last-child) {
    border-right: 1px solid #CCCCCC;
}

.click-view {
    cursor: pointer;
}

.panelSelected+span.select2 .select2-selection.select2-selection--single,
.calSelected+span.select2 .select2-selection.select2-selection--single {
    background: transparent !important;
    border: 0;
    box-shadow: none !important;
    cursor: pointer;
    min-width: 200px;
}

.panelSelected+span.select2 .select2-selection.select2-selection--single .select2-selection__rendered,
.calSelected+span.select2 .select2-selection.select2-selection--single .select2-selection__rendered {
    color: var(--dark);
    margin-left: -20px;
    padding: 10px 15px;
    background-color: var(--lighter);
    border-radius: 10px;
    margin-top: -10px
}

.panelSelected+span.select2 .select2-selection.select2-selection--single .select2-selection__arrow b,
.calSelected+span.select2 .select2-selection.select2-selection--single .select2-selection__arrow b {
    border-color: #FFF transparent transparent transparent;
    margin-left: 5px;
}

.margin-top {
    margin-top: 10px !important;
}

#menu {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

#mainNav .nav-item i,
#menuHeader i {
    color: #a7b7c7;
}

#mainNav .nav-item.active i {
    color: #84919e;
}

.breadcrumb .select2-selection__rendered {
    font-size: 16px;
}

.cal-left-bar {
    background: var(--lighter);
    margin-left: -24px;
    width: 100%;
}

#mainNav {
    z-index: 3 !important;
    -webkit-transform: translate3d(0, 0, 0);
}

.active-0 {
    opacity: 0.2;
}


.icon-shape-alternative {
    padding: 30px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: -24px;
    right: -20px;
}

.icon-shape-alternative i {
    font-size: 1.5rem;
}

/** TIMELINE */
.cal-timeline {
    border-left: 2px dashed #e9ecef;
    padding-left: 20px;
    margin-left: -8px;
}

.cal-timeline.Confirmed {
    border-left: 2px solid #e9ecef;
}


.cal-timeline h3>i {
    position: absolute;
    top: 4px;
    left: -13px;
}

.cal-timeline h3::before {
    content: '';
    background: #FFF;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    display: block;
    position: absolute;
    top: 0px;
    left: -16px;
}

.cal-timeline-tag {
    position: relative;
    top: -13px;
    left: 30px;
}

/** /TIMELINE */
.cal-day-datails {
    scroll-behavior: smooth;
}

.cal-day-events .event-wrapper {
    border-color: #c3c3c3 !important;
    border-width: 1px !important;
}

.event-wrapper {
    border-bottom: 2px solid #e9ecef;
}

.event-wrapper:not(.Confirmed):last-child,
.event-wrapper:last-child {
    border-bottom: 0;
}

.event-wrapper:not(.Confirmed) {
    opacity: 0.7;
    border-bottom: 2px dashed #e9ecef;
}

.event-card:not(.confirmed-1),
.event-wrapper:not(.confirmed-1) h3,
.event-wrapper:not(.confirmed-1) h4 {
    color: indianred !important;
}

.cal-toolbar {
    position: fixed;
    bottom: 0;
    height: auto;
    background: #FEFEFE;
    width: 100%;
    padding: 8px 20px;
    display: flex;
    justify-content: space-evenly;
}

.cal-toolbar .fa-3x {
    font-size: 2.5em;
}

button.close small {
    font-size: 10px;
}

#mainNav :focus-visible {
    outline: 0;
}

.searchbox {
    position: absolute;
    min-width: 300px;
    max-height: 600px;
    height: auto;
    width: 600px;
    z-index: 4;
    box-shadow: 3px 3px 4px 4px rgba(136, 152, 170, 0.15) !important;
}

[x-cloak] {
    display: none !important;
}

.t-0 {
    top: 0;
}

#horizontalNav:has(li.nav-item:nth-of-type(1)) {
    --horizontal-nav-items: 1;
}

#horizontalNav:has(li.nav-item:nth-of-type(2)) {
    --horizontal-nav-items: 2;
}

#horizontalNav:has(li.nav-item:nth-of-type(3)) {
    --horizontal-nav-items: 3;
}

#horizontalNav:has(li.nav-item:nth-of-type(4)) {
    --horizontal-nav-items: 4;
}

#horizontalNav:has(li.nav-item:nth-of-type(5)) {
    --horizontal-nav-items: 5;
}

#horizontalNav:has(li.nav-item:nth-of-type(6)) {
    --horizontal-nav-items: 6;
}

#horizontalNav:has(li.nav-item:nth-of-type(7)) {
    --horizontal-nav-items: 7;
}

#horizontalNav:has(li.nav-item:nth-of-type(8)) {
    --horizontal-nav-items: 8;
}

@media (min-width: 900px) {

    #mainNav {
        border-radius: 0 80px 0 0;
    }

    .dropdown-menu.dropdown-menu-left>div.d-md-flex {
        gap: 30px;
        padding: 10px;
    }

    .cal-day-events {
        z-index: 1;
        height: calc(100vh - 205px);
        overflow: auto;
        width: 100%;
        overflow-x: hidden;
    }

    .cal-day-datails {
        z-index: 1;
        height: calc(100vh - 220px);
        overflow: auto;
        width: 100%;
        overflow-x: hidden;
    }
}

@media (min-width: 576px) {
    ::-webkit-scrollbar {
        width: 3px;
    }

    ::-webkit-scrollbar-track {
        background: transparent !important;
    }

    ::-webkit-scrollbar-thumb {
        background: #00000020 !important;
        border-radius: 10px !important;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #00000030 !important;
    }
}

@media (max-width: 576px) {
    #menu {
        margin-top: -1px;
    }

    h2 .select2-container--krajee-bs4 .select2-selection--single {
        height: auto;
        padding: 10px 15px 7px 15px !important;
    }

    h2 .select2-container .select2-selection--single .select2-selection__rendered {
        overflow: unset;
        white-space: normal;
    }

    .mobile-filters {
        position: fixed;
        bottom: -90px;
        z-index: 10;
        background: var(--lighter);
        left: 0px;
        padding: 15px 25px 90px;
        border-radius: 15px;
        width: 100%;
        min-height: 150px;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    ::-webkit-scrollbar {
        display: none;
        width: 0 !important;
    }

    ::-webkit-scrollbar-track {
        background: transparent !important;
        width: 0 !important;
    }

    ::-webkit-scrollbar-thumb {
        background: transparent !important;
        width: 0 !important;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: transparent !important;
    }

    .card-boards>.card {
        flex: 0 0 93vw;
        margin-right: 10px;
    }

    .col-12 {
        margin-bottom: 14px;
    }

    .breadcrumb li:first-child {
        display: none;
    }

    .breadcrumb li+li:before {
        content: '';
        display: none;
    }

    ul.breadcrumb {
        justify-content: center;
    }

    .cal-day-datails {
        height: 100%;
        min-height: 90vh;
    }

    #mainNav .nav-link {
        display: flex;
        align-items: center;
        padding-left: -1rem !important;
        padding-right: -1rem !important;
    }

    #mainNav .nav-link i {
        padding-right: 1rem !important;
    }

    .dropdown-menu.dropdown-menu-left>div.d-md-flex {
        padding: 0;
    }

    .dropdown-item {
        padding: 0.625rem 0 !important;
    }

    .panelSelected+span.select2 .select2-selection.select2-selection--single .select2-selection__rendered,
    .calSelected+span.select2 .select2-selection.select2-selection--single .select2-selection__rendered {
        margin-left: 0;
    }

    .btn-filter {
        width: 100%;
    }

    .navbar-nav .dropdown-menu {
        background: #f4f8fb;
    }

}