a[href] {
    color: var(--dark-color);
    position: relative;
}


/*.mi-sidebar-menu ul li:not(:first-child) {
display: none;
}*/

a:hover,
a:focus {
    color: var(--dark2-color);
    text-decoration: none;
}

.pre-loader {
    opacity: 0;
    width: 0%;
    height: 0%;
    background: var(--white-color);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pre-loader.show {
        opacity: 1;
        width: 100%;
        height: 100%;
    }

    .pre-loader > img {
        width: 180px;
    }

/*a:not(.mi-clickable-icon):after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: var(--dark2-color);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}

a:not(.mi-clickable-icon):hover:after {
width: 100%;
left: 0;
}*/
/* #NotiflixLoadingWrap {
background: var(--dark2-color) !important;
} */

#NotiflixLoadingWrap .notiflix-loading-icon svg {
    stroke: var(--white-color);
    fill: var(--white-color);
}

/*Common*/
.mi-modal .mi-modal-transparent {
    background-color: #ffffff85 !important;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    outline: none;
}

#employeeTabs .mi-cards-group.mi-card-bordered .mi-card .mi-card-header {
    /* padding-top: 7px;
    padding-bottom: 7px; */
    padding-right: 10px;
}

.mi-table.mi-table-compact tbody tr td .mi-form-control-sm {
    height: 26px;
    /*width: fit-content;*/
}

section > .container-fluid > .row > .col-lg-12 > .mi-card {
    margin-bottom: 0;
}

.mi-form-group.mi-fields-child {
    position: relative;
    margin-left: 30px;
}

    .mi-form-group.mi-fields-child:before {
        content: "\f3bf";
        font-family: "Font Awesome 5 Free";
        font-size: 15px;
        color: var(--dark-color);
        position: absolute;
        left: -20px;
        top: -5px;
        font-weight: 600;
        transform: rotate(90deg);
    }

.mi-count-cards {
    display: flex;
}

    .mi-count-cards > .mi-card-item {
        position: relative;
        flex: 1;
        background: var(--white-color);
        border-radius: .45rem;
        padding: 25px;
        box-shadow: 2px 6px 22px rgb(0 0 0 / 15%);
        margin-bottom: 20px;
        color: var(--dark2-color);
        cursor: pointer;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
        transition: .3s;
    }

        .mi-count-cards > .mi-card-item.active,
        .mi-count-cards > .mi-card-item:hover {
            background: var(--dark2-color);
            color: var(--white-color);
            box-shadow: none;
        }

            .mi-count-cards > .mi-card-item:hover > .icon {
                background: var(--white-color);
                color: var(--dark2-color);
                box-shadow: none;
            }

        .mi-count-cards > .mi-card-item:not(:last-child) {
            margin-right: 20px;
        }

        .mi-count-cards > .mi-card-item > .icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 25px;
            margin: auto;
            padding: 5px;
            border-radius: .45rem;
            font-size: 16px;
            transition: .7s;
        }

            .mi-count-cards > .mi-card-item > .icon.primary {
                background: var(--focus2-color);
                color: var(--theme-color);
            }

            .mi-count-cards > .mi-card-item > .icon.success {
                background: var(--success-focus2-color);
                color: var(--success-color);
            }

            .mi-count-cards > .mi-card-item > .icon.info {
                background: var(--info-focus2-color);
                color: var(--info-color);
            }

            .mi-count-cards > .mi-card-item > .icon.warning {
                background: var(--warning-focus2-color);
                color: var(--warning-color);
            }

            .mi-count-cards > .mi-card-item > .icon.danger {
                background: var(--danger-focus2-color);
                color: var(--danger-color);
            }

        .mi-count-cards > .mi-card-item > h6 {
            font-size: 13px;
            margin-top: 10px;
            margin-bottom: 0;
            font-weight: 400;
            opacity: 0.7;
        }

        .mi-count-cards > .mi-card-item > p {
            margin-bottom: 0;
            line-height: 1;
            font-size: 22px;
            font-weight: 600;
        }

            .mi-count-cards > .mi-card-item > p > small {
                font-size: 12px;
                font-weight: 700;
                font-family: "Nunito", "Segoe UI", Arial !important;
                color: var(--dark-color);
            }

.mi-actions {
    position: absolute;
    top: 5px;
    right: 5px;
}

.mi-grey-box {
    background: var(--light-focus2-color);
    color: var(--dark2-color);
    padding: 10px;
    margin-top: 15px;
}

.mi-entity-overlay {
    background-color: var(--dark2-color);
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 60px;
    opacity: 0;
    z-index: -99;
}

.mi-select-entity {
    margin-right: 50px;
}

    .mi-select-entity > .mi-btn {
        display: flex;
        padding-left: 40px;
        padding-right: 30px;
    }

        .mi-select-entity > .mi-btn:focus {
            box-shadow: none;
        }

        .mi-select-entity > .mi-btn:hover {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

            .mi-select-entity > .mi-btn:hover .mi-entity-menu {
                height: initial;
                opacity: 1;
                visibility: visible;
            }

            .mi-select-entity > .mi-btn:hover + .mi-entity-overlay {
                opacity: .5;
                z-index: 99;
            }

        .mi-select-entity > .mi-btn > .mi-badge {
            position: absolute;
            left: 0;
            width: 30px;
            height: 100%;
            padding: 0;
            margin: 0;
            top: 0;
            border-radius: 0;
            font-size: 14px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
        }

        .mi-select-entity > .mi-btn > .icon {
            justify-content: center;
            position: absolute;
            right: 0;
            width: 30px;
            height: 100%;
            padding: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 0;
            font-size: 10px;
            display: flex;
            align-items: center;
        }

    .mi-select-entity .mi-entity-menu {
        position: absolute;
        top: 33px;
        left: -1px;
        right: 0;
        background: var(--theme-color);
        color: var(--white-color);
        box-shadow: 0 2px 6px var(--focus-color);
        margin: 0;
        padding: 0;
        list-style: none;
        width: calc(100% + 2px);
        border-radius: .25rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        height: 0;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
    }

        .mi-select-entity .mi-entity-menu li {
            font-size: 12px;
            padding: 5px 10px;
            text-align: left;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 20px;
            transition: .3s;
        }

            .mi-select-entity .mi-entity-menu li:hover {
                background: var(--dark2-color);
            }

            .mi-select-entity .mi-entity-menu li:last-child:hover {
                border-bottom-left-radius: .25rem;
                border-bottom-right-radius: .25rem;
            }

            .mi-select-entity .mi-entity-menu li.selected:after {
                content: "\f058";
                font-family: "Font Awesome 5 Free";
                position: absolute;
                font-weight: 600;
                top: 0;
                bottom: 0;
                right: 10px;
                display: flex;
                align-items: center;
            }

.mi-badge.style-2 {
    font-weight: 700;
}

.mi-badge.mi-badge-detail {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI";
    margin-right: 5px !important;
    margin-bottom: 3px;
    margin-top: 3px;
}

    .mi-badge.mi-badge-detail.mi-badge-primary .heading {
        background: var(--hover-color);
    }

    .mi-badge.mi-badge-detail.mi-badge-success .heading {
        background: var(--success-hover-color);
    }

    .mi-badge.mi-badge-detail.mi-badge-info .heading {
        background: var(--info-hover-color);
    }

    .mi-badge.mi-badge-detail.mi-badge-warning .heading {
        background: var(--warning-hover-color);
    }

    .mi-badge.mi-badge-detail.mi-badge-danger .heading {
        background: var(--danger-hover-color);
    }

    .mi-badge.mi-badge-detail.mi-badge-dark .heading {
        background: var(--dark-hover-color);
    }

    .mi-badge.mi-badge-detail.mi-badge-dark2 .heading {
        background: var(--dark-focus2-color);
    }

    .mi-badge.mi-badge-detail .heading {
        margin: -10px;
        margin-right: 10px;
        padding: 5px 7px 4px 7px;
        border-radius: .25rem 0 0 .25rem;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .mi-badge.mi-badge-detail .icon {
        margin-left: 10px;
    }

.mi-import-export {
    border-radius: .45rem;
}

    .mi-import-export.opened .mi-card {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 1px solid var(--lightest-color);
        background-color: var(--theme-color) !important;
    }

    .mi-import-export .mi-card {
        margin-bottom: 0;
    }

    .mi-import-export .mi-card-body {
        padding: 15px;
    }

    .mi-import-export .mi-progress {
        background-color: var(--lightest-color) !important;
        box-shadow: none;
    }

    .mi-import-export .mi-file-area > i {
        font-size: 25px;
        margin-right: 20px;
        margin-left: 10px;
        color: var(--white-color);
    }

    .mi-import-export .mi-file-area {
        display: flex;
        align-items: center;
    }

        .mi-import-export .mi-file-area > div {
            color: var(--white-color);
        }

            .mi-import-export .mi-file-area > div h5 {
                margin-bottom: 5px;
            }

            .mi-import-export .mi-file-area > div p {
                margin-bottom: 0;
                line-height: 1;
            }

                .mi-import-export .mi-file-area > div p a {
                    color: var(--white-color);
                    text-decoration: underline;
                }

    .mi-import-export .mi-btns-area {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

        .mi-import-export .mi-btns-area .mi-btn:last-child {
            margin-right: 10px !important;
        }

    .mi-import-export .upload-btns .mi-btn-white,
    .mi-import-export .upload-btns + .mi-btn-white {
        color: var(--dark2-color) !important;
    }

.btn-close-import-export {
    position: absolute;
    top: -10px;
    right: 10px;
    cursor: pointer;
}

    .btn-close-import-export:hover {
        transform: rotate(90deg);
    }

        .btn-close-import-export:hover i {
            font-size: 14px;
            color: var(--white-color);
        }

    .btn-close-import-export i {
        font-size: 11px;
        color: var(--lightest-color);
    }

.mi-sort-tr {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
}

    .mi-sort-tr:active {
        cursor: grabbing;
    }

    .mi-sort-tr span {
        font-size: 18px;
        cursor: grab;
        user-select: none;
    }

        .mi-sort-tr span:active {
            cursor: grabbing;
        }

.mi-group-listing ul {
    padding: 0;
    margin: 0;
    list-style: none;
    border-radius: .25rem;
}

    .mi-group-listing ul li {
        border: 1px solid var(--light3-color);
        padding: 3px 10px;
        background: var(--lightest-color);
        padding-right: 0;
    }

        .mi-group-listing ul li:first-child {
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
            /* margin-top: 10px; */
        }

        .mi-group-listing ul li:last-child {
            border-bottom-left-radius: .25rem;
            border-bottom-right-radius: .25rem;
        }

        .mi-group-listing ul li .action {
            color: var(--danger-color);
            width: 33px;
            height: 34px;
            margin-top: -3px;
            display: flex;
            align-items: center;
            justify-content: center;
            float: right;
            font-size: 13px;
            border-radius: 0;
            transition: .3s;
        }

.mi-group-listing.style-2 {
    max-height: 200px;
    overflow-x: hidden;
}

    .mi-group-listing.style-2 ul li p {
        line-height: 1.5;
        margin: 0;
    }

    .mi-group-listing.style-2 ul li {
        position: relative;
        padding: 5px 10px;
    }

        .mi-group-listing.style-2 ul li p small {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
        }

        .mi-group-listing.style-2 ul li .action {
            color: var(--dark-color);
            border-radius: 50%;
            position: absolute;
            top: 3px;
            right: 2px;
        }

        .mi-group-listing.style-2 ul li .status {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
            font-size: 10px;
            position: absolute;
            bottom: 0;
            right: -1px;
            color: var(--white-color);
            padding: 1px 10px;
            line-height: 1.5;
            border-radius: .25rem 0 0 0;
        }

            .mi-group-listing.style-2 ul li .status.success {
                background: var(--success-color);
            }

            .mi-group-listing.style-2 ul li .status.warning {
                background: var(--warning-color);
            }

            .mi-group-listing.style-2 ul li .status.danger {
                background: var(--danger-color);
            }

.mi-btn-toggle {
    box-shadow: none;
    font-weight: 600;
    width: 100%;
}

.mi-link-top,
.mi-link-bottom {
    font-weight: 600;
    color: var(--dark2-color) !important;
}

.mi-link-top {
    margin-top: 20px;
    font-weight: 600;
}

    .mi-link-top:before {
        content: '';
        width: 2px;
        height: 20px;
        background: var(--light3-color);
        position: absolute;
        top: -21px;
        left: 10px;
    }

.mi-link-bottom {
    margin-bottom: 20px;
}

    .mi-link-bottom:after {
        content: '';
        width: 2px;
        height: 20px;
        background: var(--light3-color);
        position: absolute;
        bottom: -21px;
        left: 10px;
    }

.status-hover {
    position: relative;
}

.mi-hoverable-btns .mi-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    margin-bottom: 10px;
    margin-right: 0;
    padding: 10px 8px;
    border-radius: .25rem;
    transition: all 0.3s ease;
}

    .mi-hoverable-btns .mi-btn-group .mi-btn:hover,
    .mi-hoverable-btns .mi-btn:hover {
        width: auto;
    }

    .mi-hoverable-btns .mi-btn i {
        font-size: 15px;
        margin-right: 0;
        transition: all 0.3s ease;
    }

    .mi-hoverable-btns .mi-btn-group .mi-btn span,
    .mi-hoverable-btns .mi-btn span {
        position: absolute;
        margin: 0 5px;
        opacity: 0;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        pointer-events: none;
        letter-spacing: .5px;
        white-space: pre;
        transform: translateX(320px);
        transition: all 0.3s ease;
    }

    .mi-hoverable-btns .mi-btn-group .mi-btn:hover span,
    .mi-hoverable-btns .mi-btn:hover span {
        position: relative;
        opacity: 1;
        pointer-events: initial;
        transform: translateX(4px);
    }


/*  .status-hover:hover > .content-status {
top: 0;
z-index: 9;
}*/

.content-status {
    color: var(--white-color);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 13px;
    position: absolute;
    bottom: 3px;
    right: 5px;
    align-items: center;
    display: flex;
    justify-content: center;
    transition: ease .4s;
    margin: initial !important;
    padding: initial !important;
}

    .content-status.success {
        background: var(--success-color);
    }

    .content-status.info {
        background: var(--info-color);
    }

    .content-status.warning {
        background: var(--warning-color);
    }

    .content-status.danger {
        background: var(--danger-color);
    }

    .content-status.danger-dark {
        background: var(--danger-hover-color);
    }

.mi-history .mi-card-body .scrollbar-macosx {
    /*padding: 2.5px 5px 5px 5px !important;*/
    max-height: calc(100vh - 500px) !important;
    height: auto !important;
    overflow-x: hidden !important;
}

.mi-history .mi-timeline-list > .pos-absolute > strong {
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
}

.mi-sidebar-menu ul li.active .mi-sidebar-link .title {
    font-weight: 700;
}

.mi-sidebar-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 60px;
    padding-left: 10px;
    transition: .3s;
}

    .mi-sidebar-fixed .mi-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        margin-right: 0;
        padding: 10px 12px;
        border-radius: .25rem;
        transition: all 0.3s ease;
    }

        .mi-sidebar-fixed .mi-btn:last-child {
            margin-bottom: 30px;
        }

        .mi-sidebar-fixed .mi-btn:hover {
            width: 110px;
        }

        .mi-sidebar-fixed .mi-btn i {
            font-size: 15px;
            margin-right: 0;
            transition: all 0.3s ease;
        }

        .mi-sidebar-fixed .mi-btn span {
            position: absolute;
            margin-left: 5px;
            opacity: 0;
            font-size: 13px;
            pointer-events: none;
            letter-spacing: .5px;
            transform: translateX(320px);
            transition: all 0.3s ease;
        }

        .mi-sidebar-fixed .mi-btn:hover span {
            position: relative;
            opacity: 1;
            pointer-events: initial;
            transform: translateX(4px);
        }

.mi-btn-save-item {
    margin-left: -32px !important;
    opacity: 0;
    pointer-events: none;
}

    .mi-btn-save-item.show {
        margin-left: 0 !important;
        opacity: 1;
        pointer-events: initial;
    }

.mi-fieldset-group {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
}

    .mi-fieldset-group label {
        font-size: 1.1em !important;
        font-weight: bold !important;
        text-align: left !important;
        width: auto;
        padding: 0 10px;
        border-bottom: none;
        margin-bottom: 10px;
    }

.mi-bg-heading-style {
    background: var(--lightest2-color);
    color: var(--dark2-color);
    margin: -15px;
    padding: 7px 10px;
    font-size: 14px;
    margin-bottom: 10px !important;
    border-bottom: 1px solid var(--light3-color);
    border-top: 1px solid var(--light3-color);
}

    .mi-bg-heading-style.mi-sticky-heading-side-panel {
        position: sticky;
        top: -21px;
        margin-top: 20px;
        margin-bottom: 20px !important;
        margin-left: -20px;
        margin-right: -20px;
    }

.mi-no-data-area {
    text-align: center;
    padding: 50px 0;
    width: 100%;
}

    .mi-no-data-area img {
        width: 150px;
        height: 150px;
        margin-bottom: 20px;
    }

    .mi-no-data-area h6 {
        color: var(--dark2-color);
        font-size: 21px;
        margin-bottom: 10px;
    }

    .mi-no-data-area p {
        color: var(--dark-color);
        padding: 0 40px;
        font-size: 14px;
        line-height: 1.2;
    }

.no-access {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
}

.fas,
.far {
    transition: .3s;
}

.fa-rotate-90 {
    transform: rotate(90deg);
}

.fa-rotate-180 {
    transform: rotate(180deg);
}

.fa-rotate-270 {
    transform: rotate(270deg);
}

.fa-rotate-360 {
    transform: rotate(360deg);
}

.mi-offday-card {
    height: 85px;
}

    .mi-offday-card .mi-offday-content > h6 {
        position: absolute;
        background: repeating-linear-gradient( 45deg, var(--lightest-color), var(--lightest-color) 10px, var(--lightest2-color) 10px, var(--lightest2-color) 20px );
        /*background: var(--lightest-color);*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9;
        padding: 10px;
        /*     display: flex;
align-items: center;
justify-content: center;*/
        letter-spacing: 1px;
        border-radius: .35rem;
    }

.mi-card-users .mi-card:hover .mi-plus-minus {
    display: flex;
}

.mi-plus-minus {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 9;
}

    .mi-plus-minus > .mi-btn {
        height: 22px;
        width: 22px;
        border-radius: .25rem;
        font-size: 10px;
        margin: 0;
    }

        .mi-plus-minus > .mi-form-control:focus,
        .mi-plus-minus > .mi-btn:focus {
            box-shadow: none !important;
        }

        .mi-plus-minus > .mi-btn i {
            margin: 0;
        }

        .mi-plus-minus > .mi-btn:first-of-type {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .mi-plus-minus > .mi-btn:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

    .mi-plus-minus > .mi-form-control {
        padding: 0;
        line-height: 1;
        font-size: 14px;
        height: 22px;
        width: 35px;
        text-align: center;
        border-radius: 0;
    }

.mi-btn-header-fields {
    position: absolute;
    width: max-content;
    top: 8px;
    right: 5px;
    box-shadow: none;
    border-radius: 0.25rem 0.25rem 0 0;
    border-bottom: 1px solid var(--dark-color);
}
/*Floating Button*/
.mi-floating-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--dark2-color);
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
}

    .mi-floating-btn .plus {
        color: var(--white-color);
        position: absolute;
        top: 0;
        display: block;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        padding: 0;
        margin: 0;
        line-height: 55px;
        font-size: 38px;
        font-weight: 300;
        animation: plus-out 0.3s;
        transition: all 0.3s;
    }

.mi-floating-wrap {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 30px;
    right: 20px;
    z-index: 50;
}

    .mi-floating-wrap:hover {
        height: 400px;
        width: 90px;
        padding: 30px;
    }

        .mi-floating-wrap:hover .plus {
            animation: plus-in 0.15s linear;
            animation-fill-mode: forwards;
        }

    .mi-floating-wrap .edit {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        opacity: 0;
        font-size: 16px;
        margin: auto;
        color: var(--white-color);
        transform: rotateZ(-70deg);
        transition: 0.3s;
        animation: edit-out 0.3s;
    }

    .mi-floating-wrap:hover .edit {
        animation: edit-in 0.2s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
    }

@keyframes edit-in {
    from {
        opacity: 0;
        transform: rotateZ(-70deg);
    }

    to {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}

@keyframes edit-out {
    from {
        opacity: 1;
        transform: rotateZ(0deg);
    }

    to {
        opacity: 0;
        transform: rotateZ(-70deg);
    }
}

@keyframes plus-in {
    from {
        opacity: 1;
        transform: rotateZ(0deg);
    }

    to {
        opacity: 0;
        transform: rotateZ(180deg);
    }
}

@keyframes plus-out {
    from {
        opacity: 0;
        transform: rotateZ(180deg);
    }

    to {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}

.mi-floating-wrap .mi-float-btn {
    width: 40px;
    height: 40px;
    color: var(--white-color);
    border-radius: 50%;
    position: fixed;
    right: 30px;
    z-index: 300;
    transform: scale(0);
    cursor: pointer;
    animation-fill-mode: forwards;
}

    .mi-floating-wrap .mi-float-btn.btn-1 {
        background: var(--info-color);
        bottom: 100px;
        animation-delay: 0.2s;
        animation: bounce-out-btn 0.3s linear;
    }

    .mi-floating-wrap .mi-float-btn.btn-2 {
        background: var(--success-color);
        bottom: 160px;
        animation-delay: 0.15s;
        animation: bounce-out-btn 0.15s linear;
    }

    .mi-floating-wrap .mi-float-btn.btn-3 {
        background: var(--warning-color);
        bottom: 220px;
        animation-delay: 0.1s;
        animation: bounce-out-btn 0.1s linear;
    }

    .mi-floating-wrap .mi-float-btn.btn-4 {
        background: var(--danger-hover-color);
        bottom: 280px;
        animation-delay: 0.1s;
        animation: bounce-out-btn 0.1s linear;
    }

    .mi-floating-wrap .mi-float-btn.btn-5 {
        background: var(--danger-color);
        bottom: 340px;
        animation-delay: 0.1s;
        animation: bounce-out-btn 0.1s linear;
    }

    .mi-floating-wrap .mi-float-btn.btn-6 {
        background: var(--theme-color);
        bottom: 400px;
        animation-delay: 0.1s;
        animation: bounce-out-btn 0.1s linear;
    }


@keyframes bounce-btn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce-out-btn {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0);
    }
}

.mi-floating-wrap:hover .mi-float-btn {
    animation: bounce-btn 0.1s linear;
    animation-fill-mode: forwards;
}

    .mi-floating-wrap:hover .mi-float-btn .btn-1 {
        animation-delay: 0.08s;
    }

    .mi-floating-wrap:hover .mi-float-btn .btn-2 {
        animation-delay: 0.15s;
    }

    .mi-floating-wrap:hover .mi-float-btn .btn-3 {
        animation-delay: 0.2s;
    }

    .mi-floating-wrap:hover .mi-float-btn .btn-4 {
        animation-delay: 0.25s;
    }

    .mi-floating-wrap:hover .mi-float-btn .btn-5 {
        animation-delay: 0.3s;
    }

    .mi-floating-wrap:hover .mi-float-btn .btn-6 {
        animation-delay: 0.35s;
    }

/*.letter {
    font-size: 23px;
    font-family: 'Roboto';
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    line-height: 40px;
}*/

.mi-floating-wrap .mi-float-btn > .icon {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    line-height: 40px;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mi-floating-wrap .mi-float-btn > .badge {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 57px;
    margin: auto;
    width: max-content;
    height: fit-content;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    background: var(--theme-color);
    color: var(--white-color);
    padding: 5px 10px;
    border-radius: 0.25rem;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.mi-floating-wrap .mi-float-btn:hover > .badge {
    opacity: 1;
    visibility: visible;
    transition: .3s;
}

/*Toggle button with icon Start*/
.mi-toggle-icon-btns {
    display: flex;
}

    .mi-toggle-icon-btns > .mi-btn-item {
        position: relative;
        display: flex;
        flex: 1;
        background-image: linear-gradient( 45deg, var(--lightest-color), var(--lightest2-color));
        background-size: 120px 100%;
        background-repeat: no-repeat;
        background-position: left;
        border-width: 2px;
        border-style: solid;
        border-color: var(--lightest-color);
        border-radius: .45rem;
        padding: 10px;
        user-select: none;
        cursor: pointer;
        transition: .3s;
    }

        .mi-toggle-icon-btns > .mi-btn-item:hover {
            border-color: var(--success-color);
        }

        .mi-toggle-icon-btns > .mi-btn-item.selected {
            border-color: var(--dark-color);
            background-size: 100% 100%;
        }

            .mi-toggle-icon-btns > .mi-btn-item.selected:after {
                content: '';
                height: 25px;
                width: 2px;
                background: var(--dark-color);
                position: absolute;
                bottom: -27px;
                left: 55px;
            }

            .mi-toggle-icon-btns > .mi-btn-item.selected > .desc h6 {
                color: var(--dark2-color);
            }

            .mi-toggle-icon-btns > .mi-btn-item.selected > .desc p {
                color: var(--dark-color);
            }

            .mi-toggle-icon-btns > .mi-btn-item.selected > .mi-check-icon {
                color: var(--success-color);
            }

        .mi-toggle-icon-btns > .mi-btn-item:not(:last-child) {
            margin-right: 15px;
        }

        .mi-toggle-icon-btns > .mi-btn-item > .mi-check-icon,
        .mi-toggle-icon-btns > .mi-btn-item > .mi-cbrb {
            position: absolute;
            top: 7px;
            right: 7px;
            margin: 0;
        }

        .mi-toggle-icon-btns > .mi-btn-item > .mi-check-icon {
            display: flex;
            color: var(--light3-color);
            font-size: 20px;
        }

        .mi-toggle-icon-btns > .mi-btn-item > .mi-cbrb .state label:after, .mi-toggle-icon-btns > .mi-btn-item > .mi-cbrb .state label:before {
            border-radius: .25rem;
            border-width: 2px;
        }

        .mi-toggle-icon-btns > .mi-btn-item > .mi-cbrb .state label:before {
            border-color: var(--light3-color) !important;
        }

        .mi-toggle-icon-btns > .mi-btn-item > img {
            width: 100px;
            margin-right: 20px;
        }

        .mi-toggle-icon-btns > .mi-btn-item > .desc h6 {
            color: var(--dark-color);
            transition: .3s;
        }

        .mi-toggle-icon-btns > .mi-btn-item > .desc p {
            color: var(--light-color);
            margin-bottom: 0;
            line-height: 1.2;
            font-weight: 500;
            opacity: 0.8;
            transition: .3s;
        }

    .mi-toggle-icon-btns.mi-fixed-width .mi-btn-item {
        width: 200px;
        flex: none;
        background-size: 0 100%;
    }

        .mi-toggle-icon-btns.mi-fixed-width .mi-btn-item.selected:after {
            display: none;
        }

        .mi-toggle-icon-btns.mi-fixed-width .mi-btn-item.selected {
            border-color: var(--dark-color);
            background-size: 100% 100%;
        }

    .mi-toggle-icon-btns.mi-fixed-width > .mi-btn-item > .mi-check-icon,
    .mi-toggle-icon-btns.mi-fixed-width > .mi-btn-item > .mi-cbrb {
        position: absolute;
        right: 7px;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
    }
/*Radio Tabs*/
.mi-radio-tabs > .mi-tab {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 0;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-color: var(--light3-color);
    border-radius: 0.45rem;
    user-select: none;
    transition: .3s;
}

    .mi-radio-tabs > .mi-tab:not(:last-child) {
        margin-bottom: 15px;
    }

    .mi-radio-tabs > .mi-tab.selected,
    .mi-radio-tabs > .mi-tab:hover {
        border-color: var(--success-color);
        box-shadow: 0 0.46875rem 2.1875rem rgb(90 97 105 / 10%), 0 0.9375rem 1.40625rem rgb(90 97 105 / 10%), 0 0.25rem 0.53125rem rgb(90 97 105 / 12%), 0 0.125rem 0.1875rem rgb(90 97 105 / 10%);
    }

    .mi-radio-tabs > .mi-tab > .mi-check-icon {
        position: absolute;
        top: 15px;
        right: 15px;
        color: var(--light3-color);
    }

        .mi-radio-tabs > .mi-tab > .mi-check-icon > i {
            font-size: 17px;
        }

    .mi-radio-tabs > .mi-tab:hover > .mi-check-icon,
    .mi-radio-tabs > .mi-tab.selected > .mi-check-icon {
        color: var(--success-color);
    }

    .mi-radio-tabs > .mi-tab > .desc {
        padding: 0 30px 0 10px;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI";
    }

        .mi-radio-tabs > .mi-tab > .desc > h6 {
            color: var(--dark2-color);
            font-size: 17px;
            font-weight: 600;
            letter-spacing: .5px;
        }

        .mi-radio-tabs > .mi-tab > .desc > p {
            line-height: 1.5;
            opacity: 0.8;
            margin-bottom: 0;
            font-size: 12px;
            color: var(--dark-color);
        }
/*Style 2*/
.mi-radio-tabs.style-2 {
    display: flex;
}

    .mi-radio-tabs.style-2 .mi-tab {
        flex: 1;
        margin-bottom: 0;
        filter: grayscale(1);
    }

        .mi-radio-tabs.style-2 .mi-tab.selected,
        .mi-radio-tabs.style-2 .mi-tab:hover {
            filter: grayscale(0);
            box-shadow: none;
        }

        .mi-radio-tabs.style-2 .mi-tab:not(:first-of-type),
        .mi-radio-tabs.style-2 .mi-tab:not(:last-child) {
            margin-left: 5px;
            margin-right: 5px;
        }

        .mi-radio-tabs.style-2 .mi-tab:first-of-type {
            margin-right: 5px;
            margin-left: 0;
        }

        .mi-radio-tabs.style-2 .mi-tab:last-child {
            margin-left: 5px;
            margin-right: 0;
        }

    .mi-radio-tabs.style-2 > .mi-tab > .desc {
        padding: 0 10px;
    }

    .mi-radio-tabs.style-2 .mi-tab > .desc > h6 {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .mi-radio-tabs.style-2 .mi-tab > .desc > p {
        line-height: 1.2;
        font-size: 11px;
    }

    .mi-radio-tabs.style-2 > .mi-tab > .mi-check-icon {
        top: 5px;
        right: 7px;
        visibility: hidden;
        opacity: 0;
        transition: .3s;
    }

    .mi-radio-tabs.style-2 > .mi-tab.selected > .mi-check-icon,
    .mi-radio-tabs.style-2 > .mi-tab:hover > .mi-check-icon {
        visibility: visible;
        opacity: 1;
    }

    .mi-radio-tabs.style-2 > .mi-tab > .mi-check-icon > i {
        font-size: 14px;
    }

/*Check List*/
.mi-check-list > .mi-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 0;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-color: var(--light3-color);
    border-radius: 0.45rem;
    user-select: none;
    transition: .3s;
}

    .mi-check-list > .mi-item:not(:last-child) {
        margin-bottom: 15px;
    }

    .mi-check-list > .mi-item.selected,
    .mi-check-list > .mi-item:hover {
        border-color: var(--success-color);
    }

    .mi-check-list > .mi-item > .desc > h6 {
        color: var(--dark-color);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .5px;
        margin-bottom: 0;
    }

    .mi-check-list > .mi-item > .mi-check-icon {
        position: absolute;
        top: 5px;
        right: 5px;
        color: var(--success-color);
        display: flex;
        align-items: center;
        visibility: hidden;
        opacity: 0;
        transition: .3s;
    }

        .mi-check-list > .mi-item > .mi-check-icon > i {
            font-size: 13px;
        }

    .mi-check-list > .mi-item > .count {
        position: absolute;
        bottom: 5px;
        right: 5px;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI";
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .5px;
        opacity: 0.4;
        transition: .3s;
    }

    .mi-check-list > .mi-item:hover > .mi-check-icon,
    .mi-check-list > .mi-item.selected > .mi-check-icon {
        visibility: visible;
        opacity: 1;
    }

    .mi-check-list > .mi-item:hover > .count {
        opacity: 1;
    }
/*Toggle button with icon End*/
/*Summernote*/
.note-editor.note-frame.fullscreen, .note-editor.note-airframe.fullscreen {
    z-index: 99999 !important;
}
    /*Summernote*/
    .note-editor.note-frame.fullscreen .note-editing-area {
        background: var(--white-color);
    }

.note-editor.note-airframe,
.note-editor.note-frame {
    font-family: "Nunito", "Segoe UI", Arial;
}

.note-editor .note-toolbar .note-color-all .note-dropdown-menu,
.note-popover .popover-content .note-color-all .note-dropdown-menu {
    padding: 0;
}

.note-editor .note-toolbar .note-color-palette div .note-color-btn,
.note-popover .popover-content .note-color-palette div .note-color-btn {
    border: 2px solid var(--lightest-color) !important;
    border-radius: 0.25rem;
}

.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title,
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title {
    padding: 2px 10px;
    border-radius: 0;
    letter-spacing: 0;
    margin: 4px 0 0;
    font-weight: 800;
    font-size: 13px;
    border-bottom: 2px solid var(--light3-color);
}

.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset,
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select,
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset,
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select {
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
    padding: 2px 5px;
    border-radius: 0.25rem;
    margin: 4px 0;
    font-weight: 600;
    font-size: 12px;
}

.note-btn-group {
    margin-right: 0px;
}

    .note-btn-group > .dropdown-toggle:after {
        display: none;
    }

.note-editor .note-toolbar .note-para .note-dropdown-menu > div + div,
.note-popover .popover-content .note-para .note-dropdown-menu > div + div {
    margin-left: 4px;
}
/* Summernote Modal */
.note-modal {
    z-index: 999999 !important;
}

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

.note-modal .note-modal-header {
    background-color: var(--lightest-color);
    padding: 5px 15px;
    border-top-left-radius: 0.45rem;
    border-top-right-radius: 0.45rem;
}

    .note-modal .note-modal-header button.close {
        position: absolute;
        right: 12px;
        padding: 8px;
        top: 0;
        border-radius: 0.45rem;
        transform: translate(8px, -8px);
        background: var(--white-color);
        box-shadow: 0 4px 15px rgb(0 0 0 / 20%);
        display: flex;
        margin: 0px -12px 0px auto;
        outline: none;
        opacity: 1;
        transition: 0.2s;
    }

        .note-modal .note-modal-header button.close:hover {
            transform: translate(0px, 0px);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: 0;
            box-shadow: none;
        }

            .note-modal .note-modal-header button.close:hover > i {
                color: var(--dark2-color);
            }

        .note-modal .note-modal-header button.close > i {
            color: var(--dark-color);
            font-size: 15px;
            transition: .3s;
        }

    .note-modal .note-modal-header .note-modal-title {
        font-size: 16px;
    }

.note-modal .note-modal-body {
    padding: 15px;
}

    .note-modal .note-modal-body .form-group {
        padding: 0;
    }

        .note-modal .note-modal-body .form-group label {
            font-weight: 600;
            font-size: 13px;
            padding-left: 2px;
            margin-bottom: 5px;
            color: var(--dark-color);
            line-height: 1;
        }

        .note-modal .note-modal-body .form-group .form-control {
            color: var(--dark-color);
            background-color: var(--lightest-color);
            border-color: var(--lightest-color);
            height: 35px;
            display: block;
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 14px;
            line-height: 1.5;
            border-style: solid;
            border-width: 1px;
            background-clip: padding-box;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            z-index: 9;
        }

            .note-modal .note-modal-body .form-group .form-control:hover {
                border-color: var(--theme-color);
            }

            .note-modal .note-modal-body .form-group .form-control:focus {
                background-color: var(--white-color);
                box-shadow: 0 0 0 0.2rem var(--focus-color);
                border-color: var(--theme-color);
            }

    .note-modal .note-modal-body .checkbox > label {
        display: flex;
        align-items: center;
    }

        .note-modal .note-modal-body .checkbox > label > input {
            margin-right: 5px;
        }

.note-modal .note-modal-footer {
    height: auto;
    text-align: right;
    background: var(--lightest-color);
    padding: 15px;
    border-bottom-left-radius: 0.45rem;
    border-bottom-right-radius: 0.45rem;
}

    .note-modal .note-modal-footer .btn-primary {
        float: initial;
        border-color: var(--theme-color) !important;
        background-color: var(--theme-color) !important;
        box-shadow: 0 2px 6px var(--focus-color);
        color: var(--white-color) !important;
    }

        .note-modal .note-modal-footer .btn-primary:hover {
            background-color: var(--hover-color) !important;
        }

        .note-modal .note-modal-footer .btn-primary:focus {
            box-shadow: 0 0 0 0.2rem var(--focus-color);
        }

/*Table*/
.table-responsive.mi-datatable {
    padding: 5px 0;
    margin: 0 10px 10px 10px;
}

.mi-table-light.dataTable.display tbody .tr-deleted td.sorting_1,
.mi-table-light.dataTable.display tbody .tr-deleted td {
    background: var(--light-color) !important;
}

.mi-table-light .tr-deleted {
    opacity: 0.7;
}

.mi-table-light .td-deleted {
    position: relative;
}

.mi-table-light .tr-deleted .deleted-elem {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 11px 20px;
    background: var(--danger-focus-color);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--white-color);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    z-index: 9;
    transition: .2s;
}

.mi-table-light .tr-deleted:hover .deleted-elem {
    opacity: 1;
}

.mi-table-light {
    position: relative;
}

    .mi-table-light tbody td {
        background: var(--lightest-color);
        border-width: 3px;
        border-style: solid;
        border-color: var(--white-color);
    }

        .mi-table-light tbody td:first-child {
            border-left-width: 0 !important;
        }

        .mi-table-light tbody td:last-child {
            border-right-width: 0 !important;
        }

    .mi-table-light tbody tr:last-child td {
        border-bottom-width: 0 !important;
    }

    .mi-table-light.dataTable.display tbody tr.odd > .sorting_1,
    .mi-table-light.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
    .mi-table-light.dataTable.display tbody tr.even > .sorting_1,
    .mi-table-light.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
        background: var(--lightest-color);
    }
    /*  .mi-table-light thead.has-fields > tr th {
    height: 75px !important;
}*/
    .mi-table-light thead.has-fields > tr th > input {
        margin-top: 10px;
        background-color: var(--transparent-color) !important;
    }

.dataTables_wrapper .dataTables_length .custom-select-sm {
    font-size: 100%;
    width: 70px !important;
}

.mi-emp-detail {
    display: flex;
    align-items: center;
    font-family: "Nunito", "Segoe UI", Arial;
    position: relative;
}

    .mi-emp-detail > .mi-btn-hidden-sticky {
        position: absolute;
        right: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: .3s;
    }

.btn-advance-info:hover .mi-emp-detail > .mi-btn-hidden-sticky {
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
}

.mi-emp-detail > div > a {
    /*width: 11rem;*/
    display: block;
}

.mi-table .mi-bg-stiped {
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 15px;
}

.mi-multiheader-table {
    /*max-height: calc(100vh - 336px);*/
    max-height: calc(100vh - 130px);
}

    .mi-multiheader-table > .mi-table {
        border-collapse: separate;
        border-spacing: 0px;
    }

    .mi-multiheader-table.mi-thead-sticky .mi-table.mi-table-compact tr:nth-child(2) th {
        top: 30px;
    }

    .mi-multiheader-table.mi-thead-sticky .mi-table .tr-sticky.tr-employee td {
        top: 60px;
        font-weight: 400;
        text-align: center;
        height: 45px !important;
    }

    .mi-multiheader-table.mi-thead-sticky .mi-table .tr-sticky td {
        top: 107px;
        border-width: 1px;
    }

    .mi-multiheader-table.mi-thead-sticky .mi-table .tr-filters td > mi-table tbody td {
        border-width: 2px;
    }


    .mi-multiheader-table.mi-thead-sticky .mi-table td > .mi-table th {
        top: 158px;
        z-index: 99;
    }

    .mi-multiheader-table .tr-sticky .collections .mi-badge {
        height: 40px;
        width: 40px;
        font-size: 15px;
        font-weight: 400 !important;
        border: 5px solid var(--light3-color);
        border-radius: .65rem !important;
        margin-left: -10px !important;
        margin-right: 10px !important;
    }

    .mi-multiheader-table .tr-sticky .collections > i {
        color: var(--dark2-color) !important;
    }

    .mi-multiheader-table .tr-sticky .collections > h6 {
        padding-left: 10px;
        margin: 0;
        font-size: 14px;
    }
/*Datatable*/
.hide-action-sort thead tr th:last-child {
    pointer-events: none;
}

    .hide-action-sort thead tr th:last-child.sorting:after,
    .hide-action-sort thead tr th:last-child.sorting:before {
        content: "";
    }

.mi-table-light.dataTable .thead-dark2 th:first-child {
    border-top-left-radius: .65rem;
}

.mi-table-light.dataTable .thead-dark2 th:last-child {
    border-top-right-radius: .65rem;
}

.mi-table-light.dataTable .tfoot-dark2 th:first-child {
    border-bottom-left-radius: .65rem;
}

.mi-table-light.dataTable .tfoot-dark2 th:last-child {
    border-bottom-right-radius: .65rem;
}

.mi-table-light.dataTable.display tbody td {
    background: var(--lightest-color);
    border-width: 3px;
    border-style: solid;
    border-color: var(--white-color);
    border-right: 0 !important;
    border-top: 0 !important;
}

.mi-table-light.dataTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: .65rem;
}

.mi-table-light.dataTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: .65rem;
}

.mi-table-light.dataTable.no-footer {
    border-bottom: 0;
}

.dataTable .dataTables_empty .mi-no-data-area {
    padding: 0 0 20px 0;
}

.dataTables_wrapper .dataTables_filter label {
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-left: 2px;
}

.dataTables_wrapper .dataTables_filter input {
    /*margin-left: 10px;*/
}
/*Light Style 2*/
.mi-table-light.style-2.dataTable .thead-dark2 th, table.dataTable .thead-dark td, .mi-table-light.style-2.dataTable .tfoot-dark2 th {
    background-color: var(--light4-color) !important;
    color: var(--dark-color) !important;
    border-bottom: 0;
}

.mi-table-light.style-2.dataTable.display tbody tr.odd > .sorting_1, .mi-table-light.style-2.dataTable.order-column.stripe tbody tr.odd > .sorting_1, .mi-table-light.style-2.dataTable.display tbody tr.even > .sorting_1, .mi-table-light.style-2.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
    background: var(--white-color);
    height: 30px;
}

.mi-table-light.style-2.dataTable.display tbody td {
    background: var(--white-color);
    border-bottom: 2px solid var(--light4-color);
}

.mi-table-light.style-2.dataTable .thead-dark2 th:first-child {
    border-top-left-radius: .65rem;
    border-bottom-left-radius: .65rem;
}

.mi-table-light.style-2.dataTable .thead-dark2 th:last-child {
    border-top-right-radius: .65rem;
    border-bottom-right-radius: .65rem;
}

.mi-table-light.style-2.dataTable .tfoot-dark2 th:first-child {
    border-top-left-radius: .65rem;
    border-bottom-left-radius: .65rem;
}

.mi-table-light.style-2.dataTable .tfoot-dark2 th:last-child {
    border-top-right-radius: .65rem;
    border-bottom-right-radius: .65rem;
}

/* Data Table Footer */

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
    margin: 0 !important;
}

.page-item.disabled .page-link {
    opacity: 0.5;
    background-color: var(--lightest-color);
    border-color: var(--light3-color);
    cursor: not-allowed;
}

.page-item .page-link {
    border-color: var(--light3-color);
}

.page-item.active .page-link {
    color: var(--white-color);
    background-color: var(--dark2-color);
    border-color: var(--dark2-color);
    border-radius: .25rem;
}

.page-link:hover {
    color: var(--dark2-color);
}

.page-item .page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 0 !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        border: 0 !important;
    }

.dataTables_wrapper div.dataTables_info {
    margin: 0 !important;
    padding-top: 1em !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc {
    background-image: none !important;
}

table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
    right: 0.5em;
    content: "↑";
}

table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:after {
    position: absolute;
    bottom: .9em;
    display: block;
    opacity: .3;
}

table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
    content: "↓";
    right: 1px;
}

table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:after {
    opacity: 1;
}


/* Dashboard */

.mi-card {
    transition: .7s;
}

    .mi-card.save {
        border-color: var(--success-color) !important;
    }

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-0 label:before {
    width: 0% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-1 label:before {
    width: 1% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-2 label:before {
    width: 2% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-3 label:before {
    width: 3% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-4 label:before {
    width: 4% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-5 label:before {
    width: 5% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-6 label:before {
    width: 6% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-7 label:before {
    width: 7% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-8 label:before {
    width: 8% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-9 label:before {
    width: 9% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-10 label:before {
    width: 10% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-11 label:before {
    width: 11% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-12 label:before {
    width: 12% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-13 label:before {
    width: 13% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-14 label:before {
    width: 14% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-15 label:before {
    width: 15% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-16 label:before {
    width: 16% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-17 label:before {
    width: 17% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-18 label:before {
    width: 18% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-19 label:before {
    width: 19% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-20 label:before {
    width: 20% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-21 label:before {
    width: 21% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-22 label:before {
    width: 22% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-23 label:before {
    width: 23% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-24 label:before {
    width: 24% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-25 label:before {
    width: 25% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-26 label:before {
    width: 26% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-27 label:before {
    width: 27% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-28 label:before {
    width: 28% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-29 label:before {
    width: 29% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-30 label:before {
    width: 30% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-31 label:before {
    width: 31% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-32 label:before {
    width: 32% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-33 label:before {
    width: 33% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-34 label:before {
    width: 34% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-35 label:before {
    width: 35% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-36 label:before {
    width: 36% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-37 label:before {
    width: 37% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-38 label:before {
    width: 38% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-39 label:before {
    width: 39% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-40 label:before {
    width: 40% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-41 label:before {
    width: 41% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-42 label:before {
    width: 42% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-43 label:before {
    width: 43% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-44 label:before {
    width: 44% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-45 label:before {
    width: 45% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-46 label:before {
    width: 46% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-47 label:before {
    width: 47% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-48 label:before {
    width: 48% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-49 label:before {
    width: 49% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-50 label:before {
    width: 50% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-51 label:before {
    width: 51% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-52 label:before {
    width: 52% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-53 label:before {
    width: 53% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-54 label:before {
    width: 54% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-55 label:before {
    width: 55% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-56 label:before {
    width: 56% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-57 label:before {
    width: 57% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-58 label:before {
    width: 58% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-59 label:before {
    width: 59% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-60 label:before {
    width: 60% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-61 label:before {
    width: 61% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-62 label:before {
    width: 62% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-63 label:before {
    width: 63% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-64 label:before {
    width: 64% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-65 label:before {
    width: 65% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-66 label:before {
    width: 66% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-67 label:before {
    width: 67% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-68 label:before {
    width: 68% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-69 label:before {
    width: 69% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-70 label:before {
    width: 70% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-71 label:before {
    width: 71% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-72 label:before {
    width: 72% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-73 label:before {
    width: 73% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-74 label:before {
    width: 74% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-75 label:before {
    width: 75% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-76 label:before {
    width: 76% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-77 label:before {
    width: 77% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-78 label:before {
    width: 78% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-79 label:before {
    width: 79% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-80 label:before {
    width: 80% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-81 label:before {
    width: 81% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-82 label:before {
    width: 82% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-83 label:before {
    width: 83% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-84 label:before {
    width: 84% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-85 label:before {
    width: 85% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-86 label:before {
    width: 86% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-87 label:before {
    width: 87% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-88 label:before {
    width: 88% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-89 label:before {
    width: 89% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-90 label:before {
    width: 90% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-91 label:before {
    width: 91% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-92 label:before {
    width: 92% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-93 label:before {
    width: 93% !important
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-94 label:before {
    width: 94% !important;
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-95 label:before {
    width: 95% !important;
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-96 label:before {
    width: 96% !important;
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-97 label:before {
    width: 97% !important;
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-98 label:before {
    width: 98% !important;
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-99 label:before {
    width: 99% !important;
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status.bgw-100 label:before {
    width: 100% !important;
}

.colors ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

    .colors ul li.status {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .colors ul li.status:last-child {
            margin-right: 0;
        }

        .colors ul li.status.active:after,
        .colors ul li.status:hover:after {
            content: '\f00c';
            font-family: "Font Awesome 5 Free", "FontAwesome";
            color: var(--white-color);
            font-weight: 600;
            font-size: 10px;
        }

        .colors ul li.status.primary {
            background: var(--theme-color);
        }

        .colors ul li.status.info {
            background: var(--info-color);
        }

        .colors ul li.status.success {
            background: var(--success-color);
        }

        .colors ul li.status.warning {
            background: var(--warning-color);
        }

        .colors ul li.status.danger {
            background: var(--danger-color);
        }

.mi-input-as-label input {
    display: block;
}

    .mi-input-as-label input:focus {
        box-shadow: none;
    }

    .mi-input-as-label input:first-child {
        border: 0;
        background: var(--transparent);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--dark2-color);
    }

        .mi-input-as-label input:first-child::placeholder {
            color: var(--dark2-color) !important;
            font-weight: 700;
        }

    .mi-input-as-label input:last-child {
        border: 0;
        background: var(--transparent);
        font-size: 13px;
        color: var(--dark-color);
    }

        .mi-input-as-label input:last-child::placeholder {
            color: var(--dark-color) !important;
        }

.mi-validations .mi-form-control-icon > .mi-form-control {
    background: var(--lightest-color) !important;
    border-radius: 0.25rem 0.25rem 0 0;
    box-shadow: none !important;
    border: 0;
}

.mi-valid-password {
    background: var(--lightest-color);
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: var(--light-color);
    padding: 10px;
    border-radius: 0px 0px 0.25rem 0.25rem;
    margin-bottom: 10px;
    margin-top: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
    font-size: 12px;
    text-align: left;
    transition: .3s;
}

    .mi-valid-password.success {
        border-top-color: var(--success-color);
    }

    .mi-valid-password.warning {
        border-top-color: var(--warning-color);
    }

    .mi-valid-password.danger {
        border-top-color: var(--danger-color);
    }

    .mi-valid-password.info {
        border-top-color: var(--info-color);
    }

    .mi-valid-password > p {
        margin: 0;
        line-height: 1.5;
        color: var(--dark-focus-color);
    }

        .mi-valid-password > p > span {
            padding-left: 5px;
            font-weight: 800;
            font-family: "Nunito";
            font-size: 13px;
        }

    .mi-valid-password ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .mi-valid-password ul li > i {
            padding-right: 2px;
            transition: .3s;
        }

        .mi-valid-password ul li {
            color: var(--dark-focus-color);
            line-height: 1.9;
            transition: 0.3s;
        }

            .mi-valid-password ul li.done {
                color: var(--success-color);
                text-decoration: line-through;
            }

                .mi-valid-password ul li.done > i:before {
                    content: "\f058";
                    font-weight: 600;
                }

/*Dashboard*/

.mi-dash-header {
    display: flex;
}

.mi-dash-left {
    display: flex;
    align-items: center;
    border-right-style: solid;
    border-right-width: 1px;
    /*padding-right: 50px;*/
}

    .mi-dash-left img {
        width: 50px;
        height: 50px;
    }

    .mi-dash-left > div {
        margin-left: 25px;
    }

    .mi-dash-left .mi-text-status {
        display: flex;
        align-items: center;
    }

        .mi-dash-left .mi-text-status span {
            width: 10px;
            height: 10px;
            border-radius: .15rem;
            display: block;
        }

        .mi-dash-left .mi-text-status h6 {
            margin-bottom: 0;
            margin-left: 5px;
            font-size: 14px;
            font-weight: 600;
        }

    .mi-dash-left .mi-value {
        font-weight: 500;
        margin-top: 5px;
        margin-bottom: 0;
    }

    .mi-dash-left .mi-projections {
        margin-left: 30px;
    }

        .mi-dash-left .mi-projections span {
            font-weight: 500;
            margin-left: 5px;
        }

.mi-dash-right {
    display: flex;
    align-items: center;
    padding-left: 50px;
}

    .mi-dash-right .mi-amounts label {
        font-weight: 600;
        margin-bottom: 0;
    }

    .mi-dash-right .mi-amounts h5 {
        font-weight: 700;
        margin-bottom: 0;
    }

.mi-dash-cards {
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
    border-right-style: dashed;
    border-right-width: 2px;
    background-size: 0 100%;
    background-repeat: no-repeat;
    background-position: top;
    cursor: pointer;
    transition: .3s;
}

    .mi-dash-cards:hover {
        background-size: 100% 100%;
        border-radius: .45rem;
        /*transform: translateY(-4px);*/
    }

    .mi-dash-cards:last-child {
        border-right-width: 0;
    }

    .mi-dash-cards .mi-data {
        display: block;
        padding-left: 30px;
    }

        .mi-dash-cards .mi-data p {
            margin-bottom: 0;
            line-height: 1;
        }

            .mi-dash-cards .mi-data p:first-child {
                font-size: 27px;
                font-weight: 700;
            }

            .mi-dash-cards .mi-data p:last-child {
                font-size: 14px;
                font-weight: 600;
            }

    .mi-dash-cards .mi-projections {
        margin-left: 20px;
        display: flex;
        align-items: center;
    }

        .mi-dash-cards .mi-projections i {
            padding-right: 5px;
        }

    .mi-dash-cards > .hidden {
        display: none;
    }

    .mi-dash-cards.expanded {
        min-width: 100%;
        text-align: left;
    }

.mi-card-body .mi-charts {
    min-height: 260px;
    display: flex;
    align-items: center;
    overflow: auto;
}

.mi-dash-filters > .mi-btn {
    border-top-left-radius: .45rem !important;
    border-top-right-radius: .45rem !important;
}

.mi-dash-filters {
    position: fixed;
    width: calc(100% - 40px);
    bottom: -260px;
    transition: .3s;
    left: 0;
    right: 0;
    margin: auto;
    padding-left: 80px !important;
}

    .mi-dash-filters:hover {
        bottom: -250px;
    }

.mi-dash-shortcuts {
    display: flex;
    padding: 23px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: cubic-bezier(1, 0.62, 0, 0.39) .3s;
}

    .mi-dash-shortcuts:nth-child(n+1) {
        border-top: 0;
        border-left: 0;
    }

    .mi-dash-shortcuts:nth-child(4n) {
        border-right: 0;
    }

    .mi-dash-shortcuts:nth-child(n+5) {
        border-bottom: 0;
    }

    .mi-dash-shortcuts h6 {
        margin-top: 10px;
        font-weight: 600;
        font-size: 14px;
    }

.mi-dash-filters > .mi-clear-filters {
    position: absolute;
    top: 0;
    right: 0;
    left: 350px;
    opacity: 0;
}

    .mi-dash-filters > .mi-clear-filters.show {
        opacity: 1;
    }

.mi-dash-filters .owl-carousel {
    padding: 0 30px;
}

    .mi-dash-filters .owl-carousel .owl-stage {
        /*width: 100% !important;*/
        display: flex;
    }

        .mi-dash-filters .owl-carousel .owl-stage .owl-item .item {
            width: 300px !important;
            padding-right: 15px;
            margin-right: 15px;
        }

    .mi-dash-filters .owl-carousel .owl-nav {
        height: 0;
    }

        .mi-dash-filters .owl-carousel .owl-nav button i {
            font-size: 25px;
            height: 47px;
            position: absolute;
            width: 26px;
            cursor: pointer;
            top: 100px !important;
            transition: .3s;
        }

        .mi-dash-filters .owl-carousel .owl-nav button .prev-slide {
            left: 0;
        }

        .mi-dash-filters .owl-carousel .owl-nav button .next-slide {
            right: 5px;
        }

        .mi-dash-filters .owl-carousel .owl-nav button.disabled {
            pointer-events: none;
            opacity: 0.2;
        }

.mi-profile-tabs .mi-dash-cards {
    border: 1px solid var(--light3-color);
    border-right-width: thin;
    border-radius: 0.45rem;
}
/* .mi-profile-tabs .mi-avatar.mi-avatar-lg {
            width: 100%;
            height: 100%;
        } */
.mi-filter-list {
    height: 147px;
    overflow-x: hidden;
}

    .mi-filter-list ul {
        list-style: none;
        padding-left: 0;
        padding-top: 10px;
        margin-bottom: 0;
    }

        .mi-filter-list ul li:last-child .mi-form-group {
            margin-bottom: 0;
        }

.mi-price-filter p {
    margin-bottom: 10px !important;
}

    .mi-price-filter p label {
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 0;
    }

    .mi-price-filter p input {
        border: 0;
        font-weight: bold;
        float: right;
        text-align: right;
    }

.mi-price-filter .ui-slider-horizontal .ui-slider-handle {
    top: -0.6em;
}

.mi-price-filter .ui-slider-horizontal {
    height: .3em;
}

.mi-price-filter .ui-state-default,
.mi-price-filter .ui-widget-content .ui-state-default,
.mi-price-filter .ui-widget-header .ui-state-default {
    border-radius: 50%;
}

.mi-filter-overlay,
.mi-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
}

    .mi-filter-overlay.show,
    .mi-overlay.show {
        opacity: .5;
    }

.mi-sticky-btn {
    position: fixed;
    right: 0;
    top: 30%;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-top-left-radius: .45rem !important;
    border-bottom-left-radius: .45rem !important;
}

    .mi-sticky-btn .mi-btn {
        margin-bottom: 0;
        margin-right: 0;
        display: flex;
        padding: 12px;
        border-bottom-style: solid !important;
        border-bottom-width: 1px !important;
    }

        .mi-sticky-btn .mi-btn:first-child {
            border-top-left-radius: .45rem !important;
        }

        .mi-sticky-btn .mi-btn:last-child {
            border-bottom-left-radius: .45rem !important;
            border-bottom-width: 0 !important;
        }

.mi-settings .mi-sticky-nav {
    top: 90px;
}

    .mi-settings .mi-sticky-nav h6 {
        font-size: 10px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--dark2-color);
        margin: 8px 0;
    }

    .mi-settings .mi-sticky-nav ul .item {
        padding: 0;
        margin-bottom: 0;
        box-shadow: none;
        border: 0 !important;
    }

        .mi-settings .mi-sticky-nav ul .item:hover {
            transform: translateY(0);
            background: var(--light4-color);
        }

        .mi-settings .mi-sticky-nav ul .item.active:hover {
            background: var(--theme-color);
        }

            .mi-settings .mi-sticky-nav ul .item.active:hover a .desc h6 {
                color: var(--white-color);
            }

        .mi-settings .mi-sticky-nav ul .item a {
            padding: 10px;
        }

            .mi-settings .mi-sticky-nav ul .item a > i {
                font-size: 19px;
                padding: 0;
                background: var(--transparent-color);
                color: var(--dark-color);
                border: 0;
            }

        .mi-settings .mi-sticky-nav ul .item.active a > i {
            background: var(--transparent-color);
            color: var(--white-color);
        }

        .mi-settings .mi-sticky-nav ul .item:hover a > i {
            background: var(--transparent-color);
        }

        .mi-settings .mi-sticky-nav ul .item a .desc h6 {
            margin: 0;
            font-weight: 600;
        }

        .mi-settings .mi-sticky-nav ul .item:hover a .desc h6 {
            color: var(--dark-color);
        }

.mi-settings > div .heading {
    color: var(--dark2-color);
    margin-bottom: 15px;
}

.mi-settings .item {
    /*box-shadow: 1px 0px 8px var(--light-color);*/
    border: 1px solid var(--theme-color);
    border-radius: .25rem;
    padding: 20px 10px;
    margin-bottom: 15px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
}

    .mi-settings .item:hover {
        background: var(--theme-color);
        transform: translateY(-5px);
    }

        .mi-settings .item:hover .desc h6 {
            color: var(--white-color);
        }
    /*.mi-settings .item > .icon {
border-radius: 200px;
height: 200px;
width: 200px;
background: var(--focus-color) !important;
}*/
    .mi-settings .item > .icon img {
        width: 150px;
        height: 100px;
        margin-bottom: 10px;
    }

    .mi-settings .item > .desc h6 {
        font-size: 9px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--dark2-color);
        margin-bottom: 5px;
    }

    .mi-settings .item > .desc p {
        font-size: 12px;
        color: var(--light2-color);
        line-height: 1.3;
        margin-bottom: 0;
    }

.mi-settings .mi-settings-shortcuts .item > .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark2-color);
    color: var(--white-color);
    border: 1px solid var(--dark2-color);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 15px;
    transition: .3s;
}

.mi-settings .mi-settings-shortcuts .item:hover > .icon {
    background: var(--light4-color);
    color: var(--dark2-color);
    border: 1px solid var(--light4-color);
}

.mi-settings .mi-settings-shortcuts .item > .desc {
    text-align: left;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mi-settings .mi-settings-shortcuts .item:hover > .icon {
    color: var(--theme-color);
}

.mi-system-settings .mi-card-footer .col-lg-6 > span {
    height: 22px;
    margin-top: 6px;
}

.mi-system-settings .mi-card-header {
    transition: .3s;
}

    .mi-system-settings .mi-card-header:hover {
        background: var(--light3-color) !important;
    }

.mi-system-settings .mi-timeline {
    padding: 10px;
}

    .mi-system-settings .mi-timeline ul {
        padding: 0;
    }

        .mi-system-settings .mi-timeline ul h3 {
            font-size: 14px;
            line-height: 1.4;
        }

            .mi-system-settings .mi-timeline ul h3 > span > strong {
                font-weight: 700;
                text-transform: lowercase;
            }

        .mi-system-settings .mi-timeline ul .item {
            padding-bottom: 15px;
            margin-bottom: 0;
            padding-left: 20px;
            border-left: 1px solid var(--light-color);
        }

            .mi-system-settings .mi-timeline ul .item:before {
                left: -3px;
                top: 3px;
                border-width: 0;
                font-weight: 500 !important;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
            }

            .mi-system-settings .mi-timeline ul .item:after {
                content: attr(data-time);
                position: absolute;
                right: 0;
                top: 5px;
                font-size: 11px;
                line-height: 1;
                font-weight: 500 !important;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
                border-radius: .65rem;
                background: var(--light3-color);
                padding: 4px 10px;
            }

            .mi-system-settings .mi-timeline ul .item .content {
                margin-top: 30px;
            }

            .mi-system-settings .mi-timeline ul .item .mi-timeline-icon {
                font-size: 6px;
                width: 18px;
                height: 18px;
                padding: 0 0 0 1px;
                background: var(--white-color);
                border: 1px solid var(--light-color);
                color: var(--dark-color);
                left: -9.5px;
                top: 6px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

.mi-side-panel .mi-side-panel-body.mi-logs {
    height: calc(100vh - 80px);
    border-bottom: 0;
    padding: 10px 0 10px 10px;
}

.mi-logs .mi-timeline {
    padding: 15px;
}

    .mi-logs .mi-timeline ul {
        padding: 0;
    }

        .mi-logs .mi-timeline ul .item {
            padding-left: 20px;
            padding-bottom: 5px;
            margin-bottom: 0;
            border-left-width: 2px;
            border-left-style: dashed;
            border-left-color: var(--light3-color);
        }

            .mi-logs .mi-timeline ul .item .mi-timeline-icon {
                font-size: 13px;
                width: 28px;
                height: 28px;
                padding: 0 0 0 7px;
                background: var(--light3-color);
                color: var(--light2-color);
                left: -14.5px;
                top: 0;
                border-radius: 50% 0 0 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mi-logs .mi-timeline ul .item:before {
                left: 0;
                top: 0;
                border-width: 0;
                font-weight: 500 !important;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
                background: var(--light3-color);
                height: 28px;
                border-radius: 0 15px 15px 0;
                padding-top: 6px;
                padding-left: 0;
                padding-right: 0;
            }

            .mi-logs .mi-timeline ul .item.completed:before {
                background: var(--success-color);
                color: var(--white-color);
            }

            .mi-logs .mi-timeline ul .item.initiated {
                border-left-color: var(--theme-color);
            }

                .mi-logs .mi-timeline ul .item.initiated:before {
                    background: var(--theme-color);
                    color: var(--white-color);
                }

            .mi-logs .mi-timeline ul .item:after {
                content: attr(data-time);
                position: absolute;
                right: 0;
                top: 5px;
                font-size: 12px;
                line-height: 1;
                font-weight: 400 !important;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
                border-radius: 0.65rem;
                color: var(--dark-color);
                padding: 4px 10px;
            }

            .mi-logs .mi-timeline ul .item .content {
                margin-top: 40px;
            }

                .mi-logs .mi-timeline ul .item .content .name {
                    padding-left: 20px;
                    line-height: 1;
                    margin-bottom: 10px;
                    position: relative;
                }

                    .mi-logs .mi-timeline ul .item .content .name:before {
                        content: '';
                        width: 13px;
                        height: 13px;
                        border: 2px solid var(--dark-color);
                        position: absolute;
                        left: 0;
                        border-radius: 50%;
                    }

                    .mi-logs .mi-timeline ul .item .content .name:not(:last-child):after {
                        content: '';
                        width: 2px;
                        height: 11px;
                        position: absolute;
                        background: var(--dark-color);
                        left: 5.5px;
                        bottom: -10px;
                    }

        .mi-logs .mi-timeline ul h3 {
            font-size: 14px;
            line-height: 1.4;
        }


.mi-dashboard-recruitment .mi-amounts {
    cursor: pointer;
    transition: .3s;
}

    .mi-dashboard-recruitment .mi-amounts:hover {
        color: var(--dark2-color);
        font-weight: 700;
    }

    .mi-dashboard-recruitment .mi-amounts label {
        cursor: pointer;
        font-size: 13px;
        margin-bottom: 0;
    }

    .mi-dashboard-recruitment .mi-amounts h5 {
        margin-bottom: 0;
        color: var(--dark2-color);
    }

.mi-dashboard-recruitment .mi-card .mi-card-header h4 {
    font-size: 16px;
}

.mi-recruitment-filters {
    padding: 20px 0;
}

.mi-dashboard-recruitment .mi-analytics-progress div p {
    margin-bottom: 20px;
    line-height: 1;
}

.mi-dashboard-recruitment .mi-analytics-progress div:last-child p {
    margin-bottom: 0;
}

.mi-dashboard-recruitment .mi-recruitment-table tbody td.status {
    position: relative;
    padding: 10px 10px 10px 0;
    text-align: right;
}

    .mi-dashboard-recruitment .mi-recruitment-table tbody td.status label {
        margin-bottom: 0;
        cursor: pointer;
    }

        .mi-dashboard-recruitment .mi-recruitment-table tbody td.status label:before {
            content: "";
            width: 60%;
            height: 20px;
            position: absolute;
            left: 0;
            transition: .3s;
        }

        .mi-dashboard-recruitment .mi-recruitment-table tbody td.status label.success:before {
            background: var(--success-focus-color);
        }

        .mi-dashboard-recruitment .mi-recruitment-table tbody td.status label.warning:before {
            background: var(--warning-focus-color);
        }

        .mi-dashboard-recruitment .mi-recruitment-table tbody td.status label.danger:before {
            background: var(--danger-focus-color);
        }

        .mi-dashboard-recruitment .mi-recruitment-table tbody td.status label.success:hover:before {
            background: var(--success-color);
        }

        .mi-dashboard-recruitment .mi-recruitment-table tbody td.status label.warning:hover:before {
            background: var(--warning-color);
        }

        .mi-dashboard-recruitment .mi-recruitment-table tbody td.status label.danger:hover:before {
            background: var(--danger-color);
        }

.mi-dashboard-recruitment .mi-legend span {
    padding-left: 0 !important;
    font-size: 13px;
    letter-spacing: 0.5px;
}

    .mi-dashboard-recruitment .mi-legend span:before {
        width: 0;
    }

/*Dashboard Employee*/
.mi-dash-welcome-header {
    padding: 90px;
    border-radius: 0;
    margin: -20px;
    background-image: url(../img/grill.jpg);
    background-size: cover;
    position: relative;
}

    .mi-dash-welcome-header > .mi-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9;
        background: #262c3575;
        opacity: 0.2;
    }

    .mi-dash-welcome-header h4 {
        color: var(--white-color);
    }

    .mi-dash-welcome-header .actions {
        position: absolute;
        right: 90px;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

        .mi-dash-welcome-header .actions > .mi-btn {
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 15px;
            width: 170px;
            margin-right: 0;
        }

.mi-dash-shortcuts-2 {
    display: flex;
}

    .mi-dash-shortcuts-2 > .item {
        /*background: var(--white-color);*/
        /*box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 10%);*/
        /*border-radius: .45rem;*/
        flex: 1;
        padding: 20px;
        cursor: pointer;
        transition: .3s;
    }

        .mi-dash-shortcuts-2 > .item:hover {
            background: var(--lightest2-color);
        }

        .mi-dash-shortcuts-2 > .item:not(:last-child) {
            border-right: 1px solid var(--light3-color);
        }

        .mi-dash-shortcuts-2 > .item > .shown {
            position: relative;
            display: block;
            text-align: center;
        }

            .mi-dash-shortcuts-2 > .item > .shown > i {
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--theme-color);
                color: var(--white-color);
                padding: 15px;
                border-radius: .45rem;
                font-size: 21px;
                margin: auto;
            }

                .mi-dash-shortcuts-2 > .item > .shown > i.primary {
                    background: var(--focus2-color);
                    color: var(--theme-color);
                }

                .mi-dash-shortcuts-2 > .item > .shown > i.success {
                    background: var(--success-focus2-color);
                    color: var(--success-color);
                }

                .mi-dash-shortcuts-2 > .item > .shown > i.info {
                    background: var(--info-focus2-color);
                    color: var(--info-color);
                }

                .mi-dash-shortcuts-2 > .item > .shown > i.warning {
                    background: var(--warning-focus2-color);
                    color: var(--warning-color);
                }

                .mi-dash-shortcuts-2 > .item > .shown > i.danger {
                    background: var(--danger-focus2-color);
                    color: var(--danger-color);
                }

                .mi-dash-shortcuts-2 > .item > .shown > i.dark {
                    background: var(--dark-focus2-color);
                    color: var(--dark-color);
                }

            .mi-dash-shortcuts-2 > .item > .shown > .desc {
                margin-top: 15px;
            }

                .mi-dash-shortcuts-2 > .item > .shown > .desc h6 {
                    margin-bottom: 5px;
                    font-size: 13px;
                }

                .mi-dash-shortcuts-2 > .item > .shown > .desc p {
                    margin: 0;
                    line-height: 1;
                    font-size: 12px;
                    color: var(--light2-color);
                }

.mi-card-dashboard .mi-card {
    /*background: var(--light4-color) !important;*/
    border-radius: .25rem !important;
}

    .mi-card-dashboard .mi-card .mi-card-header {
        border-bottom-color: var(--light3-color) !important;
        padding: 10px 15px;
    }

        .mi-card-dashboard .mi-card .mi-card-header > h4 {
            font-size: 15px;
        }

    .mi-card-dashboard .mi-card .mi-card-body {
        padding: 15px;
    }

        .mi-card-dashboard .mi-card .mi-card-body.mi-announcements {
            max-height: calc(100vh - 156px);
            overflow-x: hidden;
        }

.mi-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .mi-list > li {
        position: relative;
        padding: 15px;
        border-radius: .25rem;
        cursor: pointer;
        transition: .3s;
    }

        .mi-list > li:hover {
            background: var(--light3-color);
        }

        .mi-list > li:not(:last-child) {
            border-bottom: 1px solid var(--light3-color);
        }

        .mi-list > li > i {
            content: '';
            position: absolute;
            top: 15px;
            left: 10px;
            margin: auto;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .mi-list > li > i.primary {
                background: var(--focus2-color);
                color: var(--theme-color);
            }

            .mi-list > li > i.success {
                background: var(--success-focus2-color);
                color: var(--success-color);
            }

            .mi-list > li > i.info {
                background: var(--info-focus2-color);
                color: var(--info-color);
            }

            .mi-list > li > i.warning {
                background: var(--warning-focus2-color);
                color: var(--warning-color);
            }

            .mi-list > li > i.danger {
                background: var(--danger-focus2-color);
                color: var(--danger-color);
            }

        .mi-list > li > h6 {
            font-size: 14px;
            color: var(--dark2-color);
            margin-bottom: 5px;
        }

            .mi-list > li > h6 > span {
                float: right;
                font-size: 11px;
                color: var(--dark-color);
                font-weight: 600;
            }

        .mi-list > li > p {
            font-size: 12px;
            color: var(--light2-color);
            line-height: 1.3;
            margin-bottom: 0;
        }

/*Employee List Start*/
/*.mi-employees > .row {
border-bottom: 1px dashed var(--light-focus-color);
padding-bottom: 15px !important;
}*/
.mi-search-area {
    background: var(--light4-color);
    padding: 10px;
    border-radius: 0.45rem;
}

    .mi-search-area .mi-form-control {
        background: var(--light3-color) !important;
        font-weight: 700;
    }

        .mi-search-area .mi-form-control::-webkit-input-placeholder {
            color: var(--dark-color) !important;
        }

    .mi-search-area .mi-filter {
        background: var(--light3-color);
        padding: 8px 13px;
        margin-right: 20px;
        font-weight: 700;
        border-radius: 0.45rem;
    }

        .mi-search-area .mi-filter:hover {
            background: var(--dark2-color);
            color: var(--white-color);
        }

.mi-employees .mi-talent-cards .mi-card {
    margin-bottom: 15px !important;
}

.mi-employees .mi-card {
    background: var(--light4-color) !important;
    border-color: var(--transparent-color) !important;
    border-radius: 0.45rem !important;
    cursor: pointer;
}

    .mi-employees .mi-card:hover {
        background: var(--light3-color) !important;
    }

    .mi-employees .mi-card .mi-clickable-icon:hover {
        background: var(--light4-color) !important;
    }

    .mi-badge.mi-badge-sticky-top,
    .mi-employees .mi-card > .mi-badge {
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI";
        font-weight: 600 !important;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: .5px;
        border-radius: .35rem 0 .35rem 0;
        position: absolute;
        top: -1px;
        left: -1px;
    }

        .mi-badge.success.mi-badge-sticky-top,
        .mi-employees .mi-card > .mi-badge.success {
            background: var(--success-focus2-color);
            color: var(--success-color);
        }

        .mi-badge.info.mi-badge-sticky-top,
        .mi-employees .mi-card > .mi-badge.info {
            background: var(--info-focus2-color);
            color: var(--info-color);
        }

        .mi-badge.warning.mi-badge-sticky-top,
        .mi-employees .mi-card > .mi-badge.warning {
            background: var(--warning-focus2-color);
            color: var(--warning-color);
        }

        .mi-badge.danger.mi-badge-sticky-top,
        .mi-employees .mi-card > .mi-badge.danger {
            background: var(--danger-focus2-color);
            color: var(--danger-color);
        }

    .mi-employees .mi-card > .mi-card-footer {
        background: var(--light3-color) !important;
        border-radius: 0 0 0.35rem 0.35rem;
        margin: -10px -1px -1px -1px;
    }

/*.mi-employees .mi-table-advance thead tr {
border-bottom: 10px solid var(--white);
height: 70px;
}*/

/*.mi-employees .table-responsive {
padding: 5px;
}*/
/*.mi-employees .mi-table-advance:not(:first-child) {
box-shadow: 0 0 6px var(--light2-color);
border-radius: 0.45rem;
}*/
/*Custom Advance Table Start*/
.mi-table-advance {
    margin-bottom: 10px;
}

    .mi-table-advance > thead tr th {
        background: var(--light4-color);
        color: var(--dark2-color);
        cursor: pointer;
        position: relative;
        margin-bottom: 10px;
        font-weight: 600;
    }

        .mi-table-advance > thead tr th.sorting:before,
        .mi-table-advance > thead tr th.sorting:after,
        .mi-table-advance > thead tr th.sorting_asc:before,
        .mi-table-advance > thead tr th.sorting_desc:after {
            position: absolute;
            bottom: 0.9em;
            display: block;
            opacity: .3;
        }

        .mi-table-advance > thead tr th.sorting:before,
        .mi-table-advance > thead tr th.sorting_asc:before {
            content: "↑";
            right: 0.5em;
        }

        .mi-table-advance > thead tr th.sorting:after,
        .mi-table-advance > thead tr th.sorting_desc:after {
            content: "↓";
            right: 1px;
        }

        .mi-table-advance > thead tr th.sorting_asc:before,
        .mi-table-advance > thead tr th.sorting_desc:after {
            opacity: 1;
        }

    .mi-table-advance > tbody tr {
        height: 50px;
    }

        .mi-table-advance > tbody tr.opened td:first-child {
            border-bottom-left-radius: 0;
        }

        .mi-table-advance > tbody tr.opened td:last-child {
            border-bottom-right-radius: 0;
        }

        .mi-table-advance > tbody tr td {
            background: var(--white-color);
            cursor: pointer;
            transition: .3s;
        }

        .mi-table-advance > tbody tr.tr-selected td,
        .mi-table-advance > tbody tr.tr-selected:hover td,
        .mi-table-advance > tbody .tr-advance-info.tr-selected > td {
            background: var(--success-focus2-color) !important;
        }

        .mi-table-advance > tbody tr.tr-exclude td,
        .mi-table-advance > tbody tr.tr-exclude:hover td,
        .mi-table-advance > tbody .tr-advance-info.tr-exclude > td {
            background: var(--danger-focus2-color) !important;
        }

        .mi-table-advance > tbody tr.tr-warning td,
        .mi-table-advance > tbody tr.tr-warning:hover td,
        .mi-table-advance > tbody .tr-advance-info.tr-warning > td {
            background: var(--warning-focus2-color) !important;
        }

        .mi-table-advance > tbody tr.tr-danger td,
        .mi-table-advance > tbody tr.tr-danger:hover td,
        .mi-table-advance > tbody .tr-advance-info.tr-danger > td {
            background: var(--danger-focus2-color) !important;
        }

        .mi-table-advance > tbody tr.opened td,
        .mi-table-advance > tbody tr:hover td {
            background: var(--light4-color);
        }
        .mi-table-advance > tbody tr:last-child td:first-child {
            border-radius: 0 0 0 0.45rem;
        }
        .mi-table-advance > tbody tr:last-child td:last-child  {
            border-radius: 0 0 0.45rem 0;
        }
        .mi-table-advance > thead tr th:first-child {
            border-radius: .45rem 0 0 0;
        }

        .mi-table-advance > thead tr th:last-child{
            border-radius: 0 .45rem 0 0;
        }
        .mi-table-advance > tbody tr:last-child td {
            border-bottom: 0;
        }
        .mi-table-advance > tbody tr td .mi-emp-detail img {
            border-radius: 50%;
            border: 1px solid var(--light-color);
            box-shadow: 0 0 15px var(--light2-color);
        }

    .mi-table-advance > tbody .tr-advance-info {
        border-top-width: 2px;
        border-top-style: solid;
        border-top-color: var(--light-color);
    }

        .mi-table-advance > tbody .tr-advance-info.tr-selected {
            border-top-color: var(--success-focus-color);
        }

        .mi-table-advance > tbody .tr-advance-info.tr-warning {
            border-top-color: var(--warning-focus-color);
        }

        .mi-table-advance > tbody .tr-advance-info.tr-danger {
            border-top-color: var(--danger-focus-color);
        }

        .mi-table-advance > tbody .tr-advance-info > td {
            background: var(--light3-color);
            border-radius: 0 0 .45rem .45rem !important;
        }

            .mi-table-advance > tbody .tr-advance-info > td > .mi-main {
                position: relative;
                background: var(--light3-color);
                width: 100%;
                padding: 20px;
                border-radius: 0 0 .45rem .45rem;
            }

                .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols {
                    width: 100%;
                    margin: auto;
                    margin-bottom: 10px;
                    transition: .3s;
                    /* max-height: 370px;
            overflow-x: hidden;*/
                }

.mi-form-control.result-review {
    overflow: hidden;
}

.mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols.scrollbar-sm {
    /*padding-right: 10px;*/
}

.mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content {
    padding: 0;
}

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content > p {
        position: sticky;
        top: 0;
        color: var(--white-color);
        background: var(--dark2-color);
        padding: 10px;
        text-align: center;
        margin-bottom: 0;
        border-right: 1px solid var(--dark-focus-color);
        z-index: 2;
    }

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content:last-child > p,
    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content:last-child > h6 {
        border-right: 0;
    }

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content:first-of-type > p {
        border-top-left-radius: .45rem;
    }

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content:last-child > p {
        border-top-right-radius: .45rem;
    }

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content > h6 {
        padding: 5px;
        margin-bottom: 0;
        text-align: center;
        background: var(--lightest2-color);
        border-right: 1px solid var(--light3-color);
        border-bottom: 1px solid var(--light3-color);
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content > h6:nth-child(even) {
            background: var(--lightest-color);
        }

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content:first-of-type > h6:last-child {
        border-bottom-left-radius: .45rem;
    }

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .mi-has-multi-cols > .mi-content:last-child > h6:last-child {
        border-bottom-right-radius: .45rem;
    }

.mi-table-advance > tbody .tr-advance-info > td > .mi-main .mi-btn-view-all {
    position: absolute;
    bottom: 25px;
    text-transform: uppercase;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1px;
    left: 0;
    right: 0;
    margin: auto !important;
    width: max-content;
}

.mi-table-advance > tbody .tr-advance-info > td > .mi-main > .item {
    display: flex;
}

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .item:not(:last-child) {
        margin-bottom: 20px;
    }

.mi-table-advance > tbody .tr-advance-info > td > .mi-main > .actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    z-index: 9;
}

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .actions .mi-clickable-icon:not(:last-child) {
        margin-right: 5px;
    }

    .mi-table-advance > tbody .tr-advance-info > td > .mi-main > .actions .mi-clickable-icon:hover {
        background: var(--light4-color);
    }

.mi-table-advance > tbody .tr-advance-info > td > .mi-main {
    padding-bottom: 5px !important;
}


    .mi-table-advance > tbody .tr-advance-info > td > .mi-main .mi-content {
        margin-bottom: 15px;
    }

.mi-table-advance .mi-cbrb input {
    width: 20px;
}

.mi-table-advance .mi-cbrb .state label {
    min-width: 20px;
}

.mi-table-advance .mi-cbrb-lg .state label:after {
    width: 16px;
    height: 16px;
    bottom: 0px;
    left: 0;
}

.mi-table-advance .btn-advance-info {
    position: relative;
}

    .mi-table-advance .btn-advance-info td > strong {
        font-weight: 600;
    }

.table:not(.table-sm):not(.table-md):not(.dataTable).mi-table-advance .btn-advance-info > td:first-child,
.table:not(.table-sm):not(.table-md):not(.dataTable).mi-table-advance thead tr > th:first-child {
    padding-left: 15px;
}

.mi-table-advance tbody > tr > td:last-child > a,
.mi-table-advance tbody > tr > td:last-child > div {
    float: right;
    /*margin-right: 10px;*/
}

.mi-table-advance tbody > tr > td:last-child .mi-clickable-icon:hover,
.tr-advance-info td .mi-main .actions .mi-clickable-icon:hover {
    background: var(--lightest2-color);
}

.mi-table-advance-info {
    padding: 5px;
    margin: auto;
    font-weight: 600;
    /*background: var(--light4-color);*/
    padding: 5px 0 5px 5px;
    border-radius: 0.45rem;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .mi-table-advance-info > div {
        padding: 0;
    }

    .mi-table-advance-info .mi-item-show {
        display: flex;
        align-items: center;
    }

        .mi-table-advance-info .mi-item-show .mi-entries {
            position: relative;
            margin: 0 10px;
            font-size: 13px;
        }

            .mi-table-advance-info .mi-item-show .mi-entries .mi-form-control {
                width: 65px;
                padding-left: 10px;
                font-size: 13px;
                font-weight: 700;
                background-color: var(--light3-color) !important;
                cursor: pointer;
                -webkit-appearance: none;
                line-height: 1.9;
            }

                .mi-table-advance-info .mi-item-show .mi-entries .mi-form-control:hover {
                    border-color: var(--dark2-color) !important;
                }

            .mi-table-advance-info .mi-item-show .mi-entries > i {
                font-size: 10px;
                color: var(--dark-color);
                position: absolute;
                top: 18px;
                right: 12px;
                margin-right: 0;
                /*padding: 12px;*/
                margin-top: -5px;
                cursor: pointer;
            }

            .mi-table-advance-info .mi-item-show .mi-entries .mi-entries-count {
                position: absolute;
                left: 0;
                right: 0;
                margin-bottom: 0;
                padding: 0;
                list-style: none;
                text-align: center;
                background: var(--light3-color);
                border-radius: 0 0 0.25rem 0.25rem;
                margin-top: -1px;
            }

                .mi-table-advance-info .mi-item-show .mi-entries .mi-entries-count > li:hover
                .mi-table-advance-info .mi-item-show .mi-entries .mi-entries-count > li.selected {
                    background: var(--dark-color);
                    color: var(--white-color);
                }

    .mi-table-advance-info .mi-pages {
        display: flex;
        justify-content: right;
        align-items: center;
    }

        .mi-table-advance-info .mi-pages .mi-pagination {
            width: initial;
            margin-left: 20px;
        }

            .mi-table-advance-info .mi-pages .mi-pagination ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
            }

                .mi-table-advance-info .mi-pages .mi-pagination ul li .mi-page-link {
                    padding: .6rem .95rem;
                    margin-left: -1px;
                    line-height: 1.25;
                    color: var(--dark-color);
                    background-color: var(--light3-color);
                    transition: .3s;
                }

                    .mi-table-advance-info .mi-pages .mi-pagination ul li .mi-page-link > i {
                        opacity: 1;
                    }

                .mi-table-advance-info .mi-pages .mi-pagination ul li:first-of-type .mi-page-link {
                    border-radius: .25rem 0 0 .25rem;
                    padding-right: 15px;
                }

                    .mi-table-advance-info .mi-pages .mi-pagination ul li:first-of-type .mi-page-link > i {
                        margin-right: 5px;
                    }

                .mi-table-advance-info .mi-pages .mi-pagination ul li:last-child .mi-page-link {
                    border-radius: 0 .25rem .25rem 0;
                    padding-left: 15px;
                }

                    .mi-table-advance-info .mi-pages .mi-pagination ul li:last-child .mi-page-link > i {
                        margin-left: 5px;
                    }

                .mi-table-advance-info .mi-pages .mi-pagination ul li .mi-page-link.active {
                    background: var(--dark2-color);
                    color: var(--white-color);
                    z-index: 9;
                }

                .mi-table-advance-info .mi-pages .mi-pagination ul li .mi-page-link.disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                }

                .mi-table-advance-info .mi-pages .mi-pagination ul li .mi-page-link:not(.active, .disabled):hover,
                .mi-table-advance-info .mi-pages .mi-pagination ul li .mi-page-link:not(.active, .disabled):focus {
                    background: var(--light-hover-color);
                }
/*    .mi-table-advance-info .mi-pages .mi-pagination ul li .mi-page-link.active {
                    background: var(--dark2-color);
                    color: var(--white-color);
                }*/
/*Custom Advance Table End*/
/*Employee List End*/
/*Hub Home Start*/
.mi-approvals {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--success-color);
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--white-color);
    border-radius: 0.15rem;
}

    .mi-approvals > i {
        font-size: 50px;
    }

    .mi-approvals > span {
        font-size: 18px;
        margin-top: 20px;
        letter-spacing: 1px;
    }

.mi-hub-home {
    overflow-y: hidden;
}

    .mi-hub-home .mi-home-header {
        padding: 50px;
        /*background: var(--dark2-color);*/
        background: linear-gradient(to right, var(--dark2-color), var(--dark2-color), var(--theme-color));
        color: var(--white-color);
    }

        .mi-hub-home .mi-home-header .mi-progress-area {
            padding: 30px;
            /*background: var(--theme-color);*/
            border-radius: 0.45rem;
            min-height: 235px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            background: url(../img/bg/gradient-blue.svg);
            background-position: bottom;
        }

            .mi-hub-home .mi-home-header .mi-progress-area .mi-progress-bar {
                cursor: pointer;
                transition: .3s;
            }

                .mi-hub-home .mi-home-header .mi-progress-area .mi-progress-bar:hover {
                    background: var(--white-color) !important;
                    color: var(--dark2-color);
                }

    .mi-hub-home .mi-home-body,
    .mi-hub-home .mi-home-cards {
        padding: 40px;
    }

    .mi-hub-home .mi-home-body {
        padding-bottom: 0;
    }

    .mi-hub-home .mi-card {
        border: 1px solid var(--light2-color);
        border-radius: 0.25rem;
        margin: 0;
    }

    .mi-hub-home .mi-home-body .mi-card .mi-card-header > h4 {
        color: var(--dark-color) !important;
        font-size: 19px;
    }

    .mi-hub-home .mi-home-body .mi-card .mi-card-body {
        height: 205px;
    }

        .mi-hub-home .mi-home-body .mi-card .mi-card-body .mi-list > li {
            border-radius: 0;
        }

            .mi-hub-home .mi-home-body .mi-card .mi-card-body .mi-list > li:after {
                content: '';
                width: 2px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: -2px;
            }

            .mi-hub-home .mi-home-body .mi-card .mi-card-body .mi-list > li.success:hover:after {
                background: var(--success-color);
            }

            .mi-hub-home .mi-home-body .mi-card .mi-card-body .mi-list > li.warning:hover:after {
                background: var(--warning-color);
            }

            .mi-hub-home .mi-home-body .mi-card .mi-card-body .mi-list > li.danger:hover:after {
                background: var(--danger-color);
            }

            .mi-hub-home .mi-home-body .mi-card .mi-card-body .mi-list > li.info:hover:after {
                background: var(--info-color);
            }

.mi-home-header .owl-carousel .owl-dots {
    text-align: right;
}

.mi-home-header .owl-carousel button.owl-dot {
    background: var(--dark-color);
    width: 30px;
    height: 6px;
    margin-right: 10px;
    border-radius: 0.15rem;
    opacity: 0.3;
}

    .mi-home-header .owl-carousel button.owl-dot.active {
        opacity: 1;
    }

.mi-shift-wrap {
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

    .mi-shift-wrap .mi-shift-time {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: var(--dark2-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 3px solid var(--info-focus-color);
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI";
        cursor: pointer;
        transition: .3s;
    }

        .mi-shift-wrap .mi-shift-time:hover {
            background: var(--theme-color);
        }

        .mi-shift-wrap .mi-shift-time > p {
            margin-bottom: 0;
            line-height: 1;
            letter-spacing: 1px;
        }

            .mi-shift-wrap .mi-shift-time > p:first-of-type {
                text-transform: uppercase;
                font-size: 11px;
                font-weight: 500;
            }

            .mi-shift-wrap .mi-shift-time > p:last-of-type {
                font-size: 12px;
            }

        .mi-shift-wrap .mi-shift-time > h6 {
            margin: 5px 0;
            font-size: 43px;
            position: relative;
            font-weight: 500;
        }

            .mi-shift-wrap .mi-shift-time > h6 > small {
                font-size: 11px;
                font-weight: 600;
                position: absolute;
                bottom: 5px;
                right: -23px;
            }

        .mi-shift-wrap .mi-shift-time .mi-shift-overlay {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            background: var(--theme-color);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transform: translate(100px, 0);
            visibility: hidden;
            opacity: 0;
            transition: .3s;
        }

        .mi-shift-wrap .mi-shift-time.active .mi-shift-overlay,
        .mi-shift-wrap .mi-shift-time:hover .mi-shift-overlay {
            visibility: visible;
            opacity: 1;
            transform: translate(0, 0);
        }

        .mi-shift-wrap .mi-shift-time .mi-shift-overlay > i {
            font-size: 34px;
            margin-bottom: 5px;
        }

        .mi-shift-wrap .mi-shift-time .mi-shift-overlay > span {
            display: block;
            font-weight: 600;
            margin-top: 0;
            font-size: 19px;
            letter-spacing: 1px;
        }
/*Hub Home End*/
.mi-tasks {
    height: calc(100vh - 370px);
    overflow-x: hidden;
}

    .mi-tasks > ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .mi-tasks > ul > .item {
            display: flex;
            align-items: center;
            padding: 10px 15px 10px 15px;
            position: relative;
        }

            .mi-tasks > ul > .item > i {
                padding: 7px;
                background: var(--lightest-color);
                border-radius: .25rem;
                border: 1px solid var(--light3-color);
                font-size: 21px;
                margin-right: 10px;
            }

            .mi-tasks > ul > .item:not(:last-child) {
                border-bottom: 1px solid var(--light3-color);
            }

            .mi-tasks > ul > .item > .desc h6 {
                font-size: 14px;
                color: var(--dark2-color);
                margin-bottom: 5px;
            }

            .mi-tasks > ul > .item > .desc p {
                font-size: 13px;
                color: var(--light2-color);
                line-height: 1.3;
                margin-bottom: 0;
            }

            .mi-tasks > ul > .item > .actions {
                position: absolute;
                right: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

.mi-sticky-nav {
    position: sticky;
    top: 75px;
    border-radius: .25rem;
}

    /*  .mi-sticky-nav .mi-card-body {
max-height: calc(100vh - 80px);
overflow-x: hidden;
}*/

    .mi-sticky-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .mi-sticky-nav ul > .item {
            position: relative;
            cursor: pointer;
            transition: .3s;
        }

            .mi-sticky-nav ul > .item:hover {
                background: var(--light4-color);
            }

            .mi-sticky-nav ul > .item.active {
                background: var(--theme-color);
            }

            .mi-sticky-nav ul > .item:first-child:hover,
            .mi-sticky-nav ul > .item:first-child.active {
                border-top-left-radius: .25rem;
                border-top-right-radius: .25rem;
            }

            .mi-sticky-nav ul > .item:last-child:hover,
            .mi-sticky-nav ul > .item:last-child.active {
                border-bottom-left-radius: .25rem;
                border-bottom-right-radius: .25rem;
            }

            .mi-sticky-nav ul > .item.active .desc > h6 {
                color: var(--white-color);
            }

            .mi-sticky-nav ul > .item:hover a > i,
            .mi-sticky-nav ul > .item.active a > i {
                background: var(--light4-color);
                color: var(--dark-color);
            }

            .mi-sticky-nav ul > .item:not(:last-child) {
                border-bottom: 1px solid var(--light4-color);
            }

            .mi-sticky-nav ul > .item a {
                padding: 10px 15px 10px 15px;
                display: flex;
                align-items: center;
            }

                .mi-sticky-nav ul > .item a > i {
                    padding: 7px;
                    background: var(--light3-color);
                    color: var(--dark-focus-color);
                    border-radius: 50%;
                    border: 1px solid var(--light3-color);
                    font-size: 21px;
                    margin-right: 10px;
                    transition: .3s;
                }

                .mi-sticky-nav ul > .item a .desc > h6 {
                    font-size: 9px;
                    text-transform: uppercase;
                    font-weight: 700;
                    letter-spacing: 1px;
                    color: var(--dark2-color);
                    margin-bottom: 5px;
                }

                .mi-sticky-nav ul > .item a .desc > p {
                    font-size: 12px;
                    color: var(--light2-color);
                    line-height: 1.3;
                    margin-bottom: 0;
                }

.mi-btn-sticky-vert {
    transform: rotate( 90deg );
    position: fixed !important;
    right: -33px;
    margin: auto;
    top: 200px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.mi-month-table .mi-table {
    margin-top: 20px;
}

    .mi-month-table .mi-table thead tr th:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 0;
    }

    .mi-month-table .mi-table thead tr th:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 0;
    }

    .mi-month-table .mi-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 0;
    }

    .mi-month-table .mi-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 0;
    }

    .mi-month-table .mi-table tfoot tr th:first-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 10px;
    }

    .mi-month-table .mi-table tfoot tr th:last-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 10px;
    }

.mi-hiring-states h2 {
    position: relative;
    margin-right: 15px;
}

.mi-hiring-states h2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    font-weight: 500;
    color: var(--dark2-color);
    padding-left: 25px;
    display: flex;
    align-items: center;
    line-height: 1;
}

    .mi-hiring-states h2 span {
        font-family: "Nunito", "Segoe UI", Arial;
        font-size: 15px;
        font-weight: 600;
        margin-left: 10px;
        margin-top: 5px;
    }

    .mi-hiring-states h2:before {
        content: "";
        position: absolute;
        left: 5px;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 12px;
        height: 12px;
    }

.mi-hiring-states:first-child h2:before {
    background: var(--success-color);
}

.mi-hiring-states:not(:first-child):not(:last-child) h2:before {
    background: var(--success-focus-color);
}

.mi-hiring-states:last-child h2:before {
    background: var(--light3-color);
}

.mi-filters {
    margin: 20px -10px 0px -10px;
}

    .mi-filters .mi-form-group > label {
        color: var(--dark-color);
    }

/*Filters Dropdown Start*/
.mi-filter-dropdown {
}
/*Filters Dropdown End*/
/*Profile Page*/
.has-hidden-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

    .has-hidden-btn .mi-btn {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        right: 5px;
    }

    .has-hidden-btn:hover .mi-btn {
        visibility: visible;
        opacity: 1;
        pointer-events: initial;
    }

.mi-team-members .mi-avatar-status {
    padding: 3px;
}

.mi-sticky-notes {
}

    .mi-sticky-notes ul {
        list-style: none;
        overflow: hidden;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

        .mi-sticky-notes ul li {
            margin: 1em;
            float: left;
        }

            .mi-sticky-notes ul li > div {
                position: relative;
            }

                .mi-sticky-notes ul li > div .actions {
                    position: absolute;
                    display: none;
                    right: 5px;
                    top: 0;
                    height: 39px;
                    transition: .3s;
                }

                .mi-sticky-notes ul li > div:hover .actions,
                .mi-sticky-notes ul li > div:focus .actions {
                    display: flex;
                }

                .mi-sticky-notes ul li > div .actions a:not(:last-child) {
                    margin-right: 3px;
                }

            .mi-sticky-notes ul li > div {
                display: block;
                width: 250px;
                height: 270px;
                padding: 0;
                color: var(--dark2-color);
                background: var(--white-color);
                border-radius: .45rem;
                box-shadow: 2px 4px 10px var(--light-color);
                text-decoration: none;
                transition: .15s linear;
            }

                .mi-sticky-notes ul li > div input.mi-form-control:focus {
                    background-color: var(--theme-color) !important;
                }

                .mi-sticky-notes ul li > div textarea.mi-form-control {
                    border-top: 0 !important;
                }

                    .mi-sticky-notes ul li > div input.mi-form-control:focus,
                    .mi-sticky-notes ul li > div textarea.mi-form-control:focus {
                        box-shadow: none !important;
                    }

                .mi-sticky-notes ul li > div h2,
                .mi-sticky-notes ul li > div input.mi-form-control {
                    width: 100%;
                    font-size: 16px;
                    font-weight: 500;
                    letter-spacing: 0.5px;
                    padding: 10px 15px 10px 15px;
                    margin-bottom: 0;
                    background-color: var(--theme-color) !important;
                    color: var(--white-color) !important;
                    border-radius: 0;
                    border-top-left-radius: 0.45rem;
                    border-top-right-radius: 0.45rem;
                    border: 0 !important;
                    line-height: 1.2;
                    height: auto;
                }

                .mi-sticky-notes ul li > div .content,
                .mi-sticky-notes ul li > div textarea.mi-form-control,
                .mi-sticky-notes ul li > div span {
                    font-size: 14px;
                    padding: 10px;
                    margin-bottom: 0;
                    width: 100%;
                    border: 0px;
                    margin-top: 0px;
                    margin-bottom: 10px;
                    resize: none;
                    padding: 10px;
                    overflow: auto;
                    line-height: 1.5;
                    /* word-break: break-all; */
                    background-color: var(--transparent-color) !important;
                    border-color: var(--transparent-color) !important;
                }

                .mi-sticky-notes ul li > div .content {
                    padding: 0;
                    overflow-x: hidden;
                }

                .mi-sticky-notes ul li > div textarea,
                .mi-sticky-notes ul li > div span {
                    height: 157px;
                }

                .mi-sticky-notes ul li > div .attachment {
                    position: absolute;
                    bottom: 0;
                    display: flex;
                    left: 0;
                    right: 0;
                    padding: 4px 0;
                    justify-content: center;
                    align-items: center;
                    background: var(--light-focus-color);
                    border-bottom-left-radius: .45rem;
                    border-bottom-right-radius: .45rem;
                    cursor: pointer;
                    transition: .3s;
                }

                    .mi-sticky-notes ul li > div .attachment:hover {
                        background: var(--light-color);
                    }

                .mi-sticky-notes ul li > div .attachment-added,
                .attachment-added {
                    display: flex;
                    flex-wrap: nowrap;
                }

.mi-attachments {
    background: var(--light3-color);
    padding: 20px;
    border-radius: 0.65rem;
}
/* Sticky Notes style 2 */
.mi-sticky-notes .mi-sticky-item {
    cursor: pointer;
}

    .mi-sticky-notes .mi-sticky-item .mi-card {
        height: 270px;
        border-radius: 0.25rem;
        box-shadow: none;
    }

        .mi-sticky-notes .mi-sticky-item .mi-card .mi-card-header {
            border: 0;
            padding: 10px 15px 0 15px;
        }

            .mi-sticky-notes .mi-sticky-item .mi-card .mi-card-header > h4 {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
                font-weight: 500;
            }

        .mi-sticky-notes .mi-sticky-item .mi-card .mi-card-body {
            padding: 5px 15px 10px 15px;
            height: calc(100% - 38px);
            overflow-x: hidden;
        }

.attachment-added {
    flex-wrap: wrap;
}

    .mi-sticky-notes ul li > div .attachment-added > div,
    .attachment-added > div {
        background: var(--light-focus-color);
        border-radius: .15rem;
        padding: 2px 7px;
        margin: 0 0 2px 5px;
        position: relative;
        width: 40%;
    }

    .attachment-added > div {
        width: auto;
        margin: 0 5px 5px 0;
    }

.mi-sticky-notes ul li > div .attachment-added > div a.ellipsis {
    width: 92%;
    display: block;
}

.attachment-added > div a.ellipsis {
    width: 100%;
    display: block;
    padding-right: 12px;
}

.mi-sticky-notes ul li > div .attachment-added > div a.remove-attachment,
.attachment-added > div a.remove-attachment {
    display: none;
    align-items: center;
    position: absolute;
    top: 0;
    right: -2px;
    height: 25px;
    transition: .3s;
}

.mi-sticky-notes ul li > div .attachment-added > div:hover a.remove-attachment,
.attachment-added > div:hover a.remove-attachment {
    display: flex;
}

.mi-sticky-notes ul li > div .attachment-added > div a.remove-attachment i,
.attachment-added > div a.remove-attachment i {
    color: var(--danger-color);
    font-size: 13px;
    transition: .3s;
}

.mi-sticky-notes ul li > div .attachment-added > div a.remove-attachment:hover i,
.attachment-added > div a.remove-attachment:hover i {
    transform: rotate(90deg);
}

.mi-sticky-notes ul li > div .attachment-added > div a > i,
.attachment-added > div a > i {
    color: var(--dark-color);
    width: 15px;
    margin-right: 7px;
    text-align: center;
}

/* .mi-sticky-notes ul li > div .attachment-added > div:not(:last-child) {
    margin-bottom: 5px;
} */

.mi-sticky-notes ul li .new-card {
    border-width: 2px;
    border-style: dashed;
    border-color: var(--light-focus-color);
    background: var(--transparent-color);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    transition: .3s;
}

    .mi-sticky-notes ul li .new-card:hover {
        border-color: var(--light2-color);
    }

        .mi-sticky-notes ul li .new-card:hover a svg,
        .mi-sticky-notes ul li .new-card:hover p {
            color: var(--light2-color);
        }

    .mi-sticky-notes ul li .new-card a svg {
        font-size: 30px;
        color: var(--light-color);
        transition: .3s;
    }

    .mi-sticky-notes ul li .new-card p {
        margin: 0;
        color: var(--light-color);
        transition: .3s;
    }

.mi-upload-copy {
    height: 35px;
    padding: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-width: 1px;
    border-style: solid;
    border-color: var(--light3-color);
    border-radius: .25rem;
    color: var(--dark-focus-color);
    font-size: 13px;
    cursor: pointer;
    transition: .3s;
}

    .mi-upload-copy:hover {
        border-color: var(--theme-color);
        color: var(--dark-color);
    }

    .mi-upload-copy .empty {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
    }

        .mi-upload-copy .empty i {
            margin-right: 5px;
        }

    .mi-upload-copy .filled {
        width: 100%;
        display: flex;
        align-items: center;
    }

        .mi-upload-copy .filled a {
            z-index: 999;
            transition: .4s;
        }

    .mi-upload-copy.hover-scale .filled a:not(.remove):hover {
        transform: scale(18);
    }

        .mi-upload-copy.hover-scale .filled a:not(.remove):hover > img {
            border-radius: 0;
        }

    .mi-upload-copy .filled a:not(.remove):hover {
        transform: scale(10);
        box-shadow: 0 0 2px 300px var(--dark-focus2-color);
        border-radius: .15rem;
        z-index: 999999;
    }

    .mi-upload-copy .filled a > img {
        height: 25px;
        border-radius: .15rem;
        /*  border-width: 1px;
    border-style: solid;
    border-color: var(--light-color);*/
        transition: .3s;
    }

    /*      .mi-upload-copy .filled a > img:hover {
border-color: var(--dark-color);
transform: scale(1.05);
}*/

    .mi-upload-copy .filled span.ellipsis {
        padding-right: 15px;
        padding-left: 5px;
    }

    .mi-upload-copy .filled > a.remove {
        position: absolute;
        right: 15px;
        display: flex;
    }

        .mi-upload-copy .filled > a.remove:hover i {
            transform: rotate(90deg);
        }

.mi-img-loader {
    background: var(--focus-color);
    border-radius: 50%;
    background-image: url(../img/loaders/spinner-white.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
    opacity: 0;
    height: 0;
    width: 0;
}

    .mi-img-loader.show {
        opacity: 1;
        height: 100%;
        width: 100%;
    }

.mi-add-img {
    padding: 0;
    width: max-content;
    position: relative;
}

    .mi-add-img > .data {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border-width: 2px;
        border-style: solid;
        border-color: var(--white-color);
        box-shadow: 0px 1px 13px var(--dark-focus-color);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        padding: 0;
        transition: .3s;
    }

        .mi-add-img > .data.primary {
            border-color: var(--theme-color);
        }

        .mi-add-img > .data.info {
            border-color: var(--info-color);
        }

        .mi-add-img > .data.success {
            border-color: var(--success-color);
        }

        .mi-add-img > .data.warning {
            border-color: var(--warning-color);
        }

        .mi-add-img > .data.danger {
            border-color: var(--danger-color);
        }

        .mi-add-img > .data img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .mi-add-img > .data .icon i {
            font-size: 21px;
            color: var(--white);
        }

        .mi-add-img > .data .icon {
            position: absolute;
            background: var(--focus-color);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: -2px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            opacity: 0;
            cursor: pointer;
            transition: .3s;
        }

        .mi-add-img > .data:hover .icon {
            opacity: 1;
        }

        .mi-add-img > .data .icon span {
            font-size: 7px;
            color: var(--white-color);
            margin-top: 5px;
            text-transform: uppercase;
            letter-spacing: .5px;
            font-weight: 600;
        }

        .mi-add-img > .data .icon img {
            width: 100%;
        }

    .mi-add-img > span {
        font-size: 14px;
        font-weight: 600;
        margin-left: 10px;
    }

    .mi-add-img > a {
        position: absolute;
        right: 10px;
        font-size: 14px;
        font-weight: 700;
        color: var(--theme-color);
    }

        .mi-add-img > a:hover {
            color: var(--focus-color);
        }

.mi-vert-wizard {
}

    .mi-vert-wizard .item {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        cursor: pointer;
        user-select: none;
    }

        .mi-vert-wizard .item:last-child {
            margin-bottom: 0;
        }

        .mi-vert-wizard .item span {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--white-color);
            color: var(--light-color);
            border-width: 1px;
            border-style: solid;
            border-color: var(--light3-color);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 12px;
            font-weight: 700;
            transition: .3s;
        }

        .mi-vert-wizard .item:hover span {
            border-color: var(--transparent-color);
            background: var(--focus2-color);
            color: var(--theme-color);
        }

        .mi-vert-wizard .item.completed span {
            border-color: var(--success-color);
            background: var(--success-color);
            color: var(--white-color);
        }

        .mi-vert-wizard .item.active span {
            border-color: var(--theme-color);
            background: var(--theme-color);
            color: var(--white-color);
        }

        .mi-vert-wizard .item:not(:last-child) span:after {
            content: '';
            width: 2px;
            height: 15px;
            background: var(--light3-color);
            position: absolute;
            bottom: -15px;
        }

        .mi-vert-wizard .item.active span:after {
            background: var(--theme-color);
        }

        .mi-vert-wizard .item.completed span:after {
            background: var(--success-color);
        }

        .mi-vert-wizard .item h6 {
            color: var(--light-color);
            margin-bottom: 0;
            margin-left: 15px;
            font-size: 13px;
            transition: .3s;
        }

        .mi-vert-wizard .item:hover h6,
        .mi-vert-wizard .item.active h6 {
            color: var(--dark2-color);
        }

        .mi-vert-wizard .item.completed h6 {
            color: var(--success-color);
        }

.mi-emp-cover {
    height: 170px;
    background: var(--theme-color);
    border-top-left-radius: .65rem;
    border-top-right-radius: .65rem;
    /*background-image: url('../img/bg/pattern-2.png');*/
    transition: .3s;
}

    .mi-emp-cover > .mi-btn {
        position: absolute;
        top: 21px;
        right: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .mi-emp-cover > .mi-btn > i {
            font-size: 17px;
        }
/*
.mi-emp-data > .mi-card > .mi-card-body > .row > div {
margin-top: -67px;
}*/

.mi-emp-data > .mi-card > .mi-card-body .mi-profile-values {
    text-align: left;
    margin-top: 10px;
    margin-left: 10px;
}

    .mi-emp-data > .mi-card > .mi-card-body .mi-profile-values h6 {
        margin-bottom: 5px;
        font-size: 17px;
        color: var(--dark2-color);
        font-weight: 700;
    }

    .mi-emp-data > .mi-card > .mi-card-body .mi-profile-values p {
        line-height: 1.2;
        margin-bottom: 0;
        font-size: 14px;
        padding: 0.25rem 0 0 0;
        font-weight: 700;
        color: var(--focus-color);
    }

.mi-emp-data > .mi-card > .mi-card-body .mi-emp-details {
    margin-top: 15px;
}

    .mi-emp-data > .mi-card > .mi-card-body .mi-emp-details > .mi-emp-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

.mi-profile-header {
    position: relative;
    /*display: flex;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 40px;
    background: var(--dark2-color);
    color: var(--white-color);
    /*background-image: url('../img/bg/pattern-2.png');*/
}

    .mi-profile-header .mi-avatar {
        border: 2px solid var(--white-color);
        background: var(--lightest-color);
        width: 100px;
        height: 100px;
        margin-right: 30px !important;
    }

    .mi-profile-header .mi-profile-values h3,
    .mi-profile-header .mi-profile-values p {
        margin-bottom: 0;
        color: var(--white-color) !important;
    }

    .mi-profile-header .mi-profile-values h3 {
        font-weight: 500;
    }

    .mi-profile-header .mi-profile-values p {
        font-weight: 600;
    }

    .mi-profile-header .mi-profile-values ul {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .mi-profile-header .mi-profile-values ul li {
            padding-right: 15px;
        }

        .mi-profile-header .mi-profile-values ul:not(.icons) li:not(:first-child):before {
            content: '|';
            padding-right: 15px;
        }

.upload-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: var(--light-focus-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark2-color);
    cursor: pointer;
    opacity: 0;
    transition: .4s;
}

    .upload-image.style-2 {
        position: absolute;
        bottom: 0;
        right: 0;
        top: initial;
        left: initial;
        padding: 4px;
        border-width: 2px;
        border-style: solid;
        border-color: var(--transparent-color);
        margin: auto;
        background: var(--white-color);
        box-shadow: 0px 0px 13px 0px rgb(0 0 0 / 10%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--theme-color);
        cursor: pointer;
        opacity: 1;
        transition: .4s;
    }

        .upload-image.style-2:hover {
            background: var(--dark2-color);
            border-color: var(--white-color);
            color: var(--white-color);
        }

        .upload-image.style-2 > i {
            font-size: 18px;
        }

.mi-avatar:hover .upload-image {
    opacity: 1;
}

.mi-filter-expand {
    position: absolute;
    bottom: -26px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 9;
}

    .mi-filter-expand i {
        border-bottom: 1px solid var(--light3-color);
        border-left: 1px solid var(--light3-color);
        border-right: 1px solid var(--light3-color);
        border-top: 1px solid var(--white-color);
        padding: 5px 6px;
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
        font-size: 13px;
        color: var(--light-color);
        cursor: pointer;
        transition: .2s;
    }

        .mi-filter-expand i:hover {
            color: var(--dark2-color);
        }

        .mi-filter-expand i span {
            font-family: "Nunito", "Segoe UI", Arial;
            font-weight: 600;
            margin-left: 5px;
            color: var(--dark-color);
        }

.mi-filter-applied {
    /*position: absolute;
bottom: 0;
left: 0;
right: 0;*/
    margin: 17px -17px -17px -17px;
    text-align: left;
    border-top: 1px solid var(--light3-color);
    padding: 8px 20px 6px 20px;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
    font-size: 13px;
    color: var(--dark-color);
    cursor: pointer;
    transition: .2s;
}

    .mi-filter-applied span:not(:first-child) {
        margin-left: 10px;
        display: inline-block;
    }

        .mi-filter-applied span:not(:first-child) i {
            border-width: 1px;
            border-style: solid;
            background: var(--light2-color);
            color: var(--white-color);
            border-radius: 50%;
            width: 17px;
            height: 17px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            margin-left: 5px;
        }

            .mi-filter-applied span:not(:first-child) i:hover {
                background: var(--dark-color);
                border-color: var(--dark-color);
                transform: rotate(90deg);
            }

    .mi-filter-applied span:last-child a:hover {
        text-decoration: underline;
    }

.mi-profile-expand {
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 9;
}

    .mi-profile-expand i {
        background: var(--lightest-color);
        padding: 5px 6px;
        border-radius: .25rem;
        font-size: 13px;
        color: var(--dark2-color);
        cursor: pointer;
        transition: .2s;
    }

        .mi-profile-expand i span {
            font-family: "Nunito", "Segoe UI", Arial;
            font-weight: 600;
            margin-left: 5px;
        }

.mi-btn-remove-card {
    color: var(--white-color);
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

    .mi-btn-remove-card i {
        font-size: 16px;
        transition: .3s;
    }

        .mi-btn-remove-card i:hover {
            transform: rotate(90deg);
        }

.no-items:hover .mi-btn-add-card {
    opacity: 1;
}

.no-items .mi-btn-add-card {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-color);
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    letter-spacing: 1px;
    font-size: 14px;
    cursor: pointer;
    border-radius: .45rem;
    transition: .3s;
}

    .no-items .mi-btn-add-card i {
        font-size: 18px;
        margin-right: 5px;
    }

.mi-profile-cards {
    padding: 40px 8px 20px;
}

    .mi-profile-cards .card-items {
        border: 1px solid var(--lightest-color);
        border-radius: .25rem;
        text-align: center;
        padding: 20px 0;
        position: relative;
    }

        .mi-profile-cards .card-items h2,
        .mi-profile-cards .card-items p,
        .mi-profile-cards .card-items label {
            margin-bottom: 0;
        }

        .mi-profile-cards .card-items p {
            color: var(--light-color);
        }

        .mi-profile-cards .card-items h2,
        .mi-profile-cards .card-items label {
            font-weight: 400;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
        }

    .mi-profile-cards .owl-carousel .item {
        width: 283px;
        margin-right: 10px;
    }

    .mi-profile-cards .owl-carousel .owl-nav {
        position: absolute;
        top: -30px;
        right: -5px;
    }

.mi-profile-sub-values {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

    .mi-profile-sub-values p {
        color: var(--white-color) !important;
    }

        .mi-profile-sub-values p:first-child {
            font-size: 45px;
        }

        .mi-profile-sub-values p:first-child {
            font-size: 45px;
        }

    .mi-profile-sub-values ul.icons {
        display: flex;
        justify-content: flex-end;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .mi-profile-sub-values ul.icons li {
            padding-right: 15px;
        }

            .mi-profile-sub-values ul.icons li:last-child {
                padding-right: 0;
            }

            .mi-profile-sub-values ul.icons li i {
                font-size: 18px;
            }

    .mi-profile-header .mi-profile-values ul li a,
    .mi-profile-sub-values ul li a {
        display: flex;
        align-items: center;
        color: var(--white-color);
        cursor: pointer;
        text-decoration: none;
    }

        .mi-profile-header .mi-profile-values ul li a span {
            line-height: 1;
        }

.mi-profile-tabs .mi-nav-tabs .nav-tabs {
    padding: 0 20px;
    background: var(--lightest-color);
    border: 0;
}

.mi-profile-tabs .mi-nav-tabs .tab-content {
    padding: 0 20px;
}

.mi-profile-tabs .mi-nav-tabs .nav-tabs .nav-item .nav-link.active,
.mi-profile-tabs .mi-nav-tabs .nav-tabs .nav-item .nav-link:hover {
    color: var(--dark2-color) !important;
    border-bottom-color: var(--dark2-color) !important;
    background: var(--transparent-color);
}

.mi-profile-tabs .mi-nav-tabs .nav-team-btns .mi-btn-group .mi-btn:not(:last-child) {
    border-right: 1px solid var(--light-color) !important;
}

.mi-profile-header .mi-pagination span:hover {
    color: var(--dark-color);
}

.mi-edit-profile,
.mi-edit-card {
    cursor: pointer;
}

    .mi-edit-profile svg.feather-save,
    .mi-edit-card svg.feather-save {
        color: var(--success-color);
    }

.mi-padding-cards {
    padding: 0 15px;
}

    .mi-padding-cards > div {
        padding: 0;
    }


/*
.mi-padding-cards > div > .mi-card {
border-radius: 0 !important;
}
.mi-padding-cards > div:first-child > .mi-card {
border-top-left-radius: 10px !important;
border-right: 0 !important;
border-bottom: 0 !important;
}
.mi-padding-cards > div:nth-child(2) > .mi-card {
border-top-right-radius: 10px !important;
border-bottom: 0 !important;
}
.mi-padding-cards > div:nth-last-child(2) > .mi-card {
border-bottom-left-radius: 10px !important;
border-right: 0 !important;
border-top: 0 !important;
}
.mi-padding-cards > div:last-child > .mi-card {
border-bottom-right-radius: 10px !important;
border-top: 0 !important;
}
.mi-padding-cards > div:nth-child(2n+1) > .mi-card {
border-right: 0 !important;
}*/

.mi-talent-cards {
    padding: 10px;
}

    .mi-talent-cards .mi-card {
        border-radius: .25rem;
        margin-bottom: 10px !important;
    }

.mi-card-sm .mi-card {
    border-radius: .25rem;
}

    .mi-talent-cards .mi-card .mi-card-header,
    .mi-card-sm .mi-card .mi-card-header {
        background: var(--lightest-color);
        padding: 0px 10px;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        color: var(--dark2-color);
        font-weight: 700;
    }

    .mi-talent-cards .mi-card .mi-card-body,
    .mi-card-sm .mi-card .mi-card-body {
        padding: 15px 20px 20px 20px;
    }

        .mi-talent-cards .mi-card .mi-card-body .mi-heading-value h5,
        .mi-card-sm .mi-card .mi-card-body .mi-heading-value h5 {
            font-size: 14px;
            margin-bottom: 13px;
        }

    .mi-talent-cards .mi-card .mi-card-footer,
    .mi-card-sm .mi-card .mi-card-footer {
        padding: 10px;
    }

.mi-card-sm .mi-card-header:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid var(--light3-color) !important;
}

.mi-card-sm .mi-form-group {
    margin-bottom: 10px;
}

.mi-card-sm .mi-card-body {
    padding: 5px 10px 10px 10px !important;
}

.mi-card-add {
    border-style: dashed !important;
    border-width: 1px !important;
    cursor: pointer;
    transition: .3s;
}

    .mi-card-add:hover {
        border-style: dashed !important;
        border-width: 1px !important;
    }

    .mi-card-add .mi-card-body {
        transition: .3s;
    }

        .mi-card-add .mi-card-body svg {
            color: var(--light2-color);
        }

.mi-card-expand .mi-card-header > input {
    padding: .35rem 0;
    border: 0;
    color: var(--darkest-color) !important;
    font-weight: 700;
    font-size: 14px;
}

    .mi-card-expand .mi-card-header > input:focus {
        box-shadow: none !important;
        background: var(--lightest-color) !important;
    }

.mi-plus-card {
    z-index: 9;
    background: var(--lightest-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    left: 0;
    border-radius: .25rem;
    transition: .3s;
}

    .mi-plus-card:hover {
        background: var(--white-color);
    }

.mi-profile-header .mi-info-card {
    margin-bottom: 20px;
}

.mi-info-card {
    background-image: linear-gradient(45deg, var(--dark2-color), var(--dark2-color));
    background-repeat: no-repeat;
    background-position: left;
    background-size: 0 100%;
    position: relative;
    border-radius: .45rem;
    justify-content: flex-start;
    border: 2px solid var(--dark2-color);
    color: var(--dark2-color);
    padding: 10px 10px !important;
    cursor: pointer;
    transition: all .4s;
}

    .mi-info-card.active,
    .mi-info-card:hover {
        background-size: 100% 100%;
        color: var(--white-color);
    }

    .mi-info-card.inverted {
        background-image: linear-gradient(45deg, var(--white-color), var(--white-color));
        border: 1px solid var(--white-color);
        color: var(--white-color);
        transition: all .4s;
    }

        .mi-info-card.inverted:hover {
            background-size: 100% 100%;
            color: var(--dark2-color);
        }

        .mi-info-card.inverted.no-hover:hover {
            background-size: 100% 100%;
            color: var(--white-color);
            background: transparent;
        }

    .mi-info-card p:first-of-type {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
        font-size: 30px !important;
        font-weight: 400 !important;
        margin-bottom: 10px !important;
    }

    .mi-info-card p:not(:first-child) {
        font-weight: 600;
        line-height: 1;
        margin-bottom: 0;
        font-size: 12px;
    }

    .mi-info-card > i,
    .mi-info-card > svg {
        position: absolute;
        top: 10px;
        right: 10px;
    }

.mi-legend {
    background: var(--dark2-color);
    color: var(--white-color);
    padding: 5px 10px;
    border-bottom-right-radius: .65rem;
    border-top-left-radius: .65rem;
}

    .mi-legend span {
        padding-left: 20px;
        padding-right: 10px;
        position: relative;
    }

        .mi-legend span:first-child {
            margin-left: 5px;
        }

        .mi-legend span:before {
            content: "";
            /* width: 15px;
        height: 15px;*/
            width: 13px;
            height: 13px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /*border-radius: .15rem;*/
            border-radius: 50%;
        }

        .mi-legend span.success:before {
            /*border: 2px solid var(--success-color);*/
            background: var(--success-color);
        }

        .mi-legend span.warning:before {
            /*border: 2px solid var(--warning-color);*/
            background: var(--warning-color);
        }

        .mi-legend span.danger:before {
            /*border: 2px solid var(--danger-color);*/
            background: var(--danger-color);
        }

        .mi-legend span.info:before {
            /*border: 2px solid var(--info-color);*/
            background: var(--info-color);
        }

.mi-legend-timecard {
    background: var(--dark-color);
    color: var(--white-color);
    padding: 5px 2px;
    border-bottom-right-radius: .65rem;
    border-top-left-radius: .65rem;
}

    .mi-legend-timecard span {
        padding-left: 15px;
        padding-right: 10px;
        position: relative;
    }

        .mi-legend-timecard span:first-child {
            margin-left: 5px;
        }

        .mi-legend-timecard span:before {
            content: "";
            width: 3px;
            height: 15px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .mi-legend-timecard span.success:before {
            background: var(--success-color);
        }

        .mi-legend-timecard span.warning:before {
            background: var(--warning-color);
        }

        .mi-legend-timecard span.danger:before {
            background: var(--danger-color);
        }

.mi-legend-timesheet {
    /*background: var(--dark-color);*/
    color: var(--dark2-color);
    padding: 5px 10px;
    width: fit-content;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
}

    .mi-legend-timesheet span {
        display: inline-block;
        padding-left: 20px;
        padding-right: 10px;
        position: relative;
        font-size: 12px;
        letter-spacing: 1px;
    }

        /* .mi-legend-timesheet span:first-child {
    margin-left: 5px;
} */

        .mi-legend-timesheet span:before {
            content: "";
            width: 15px;
            height: 15px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            border-width: 2px;
            border-style: solid;
        }

        .mi-legend-timesheet span.success:before {
            background: var(--success-color);
            border-color: var(--success-color);
        }

        .mi-legend-timesheet span.warning:before {
            background: var(--warning-color);
            border-color: var(--warning-color);
        }

        .mi-legend-timesheet span.danger:before {
            background: var(--danger-color);
            border-color: var(--danger-color);
        }

        .mi-legend-timesheet span.info:before {
            background: var(--info-color);
            border-color: var(--info-color);
        }

        .mi-legend-timesheet span.primary:before {
            background: var(--theme-color);
            border-color: var(--theme-color);
        }

        .mi-legend-timesheet span.dark:before {
            background: var(--dark-color);
            border-color: var(--dark-color);
        }

        .mi-legend-timesheet span.light:before {
            background: var(--light-color);
            border-color: var(--light-color);
        }

        .mi-legend-timesheet span.light2:before {
            background: var(--light2-color);
            border-color: var(--light2-color);
        }

        .mi-legend-timesheet span.info:before {
            background: var(--info-color);
            border-color: var(--info-color);
        }

        .mi-legend-timesheet span.danger-dark:before {
            background: var(--danger-hover-color);
            border-color: var(--danger-color);
        }

        .mi-legend-timesheet span.danger-light:before {
            background: var(--danger-color);
            border-color: var(--danger-color);
            opacity: 0.7;
        }

.table-week {
    max-height: 406px;
}

    .table-week .mi-table:not(.table-dark).table-bordered td {
        border-color: var(--light3-color) !important;
    }

.section-heading {
    font-size: 15px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 0 0 5px;
    /*background: var(--lightest-color);*/
    border-radius: .25rem;
    color: var(--dark2-color);
    font-weight: 700;
}

#memberTimeSheet .mi-table tr,
#memberTimeSheet .mi-table tr .overtime-status {
    cursor: default !important;
}


/*Owl Carousel Team Table*/

.mi-team-timesheet .owl-carousel .owl-stage .owl-item {
    width: 200px !important;
}

    .mi-team-timesheet .owl-carousel .owl-stage .owl-item .item {
        width: auto !important;
    }

.mi-team-timesheet .owl-carousel .owl-stage .owl-item {
    margin-right: -1px !important;
}

.mi-team-timesheet .owl-carousel .owl-nav {
    height: 0;
}

    .mi-team-timesheet .owl-carousel .owl-nav button i {
        font-size: 25px;
        height: 47px;
        position: absolute;
        width: 26px;
        cursor: pointer;
        top: 10px !important;
        transition: .3s;
    }

    .mi-team-timesheet .owl-carousel .owl-nav div i {
        font-size: 25px;
        height: 47px;
        position: absolute;
        width: 26px;
        cursor: pointer;
        top: 0 !important;
        transition: .3s;
    }

    .mi-team-timesheet .owl-carousel .owl-nav button .prev-slide {
        left: -25px;
    }

    .mi-team-timesheet .owl-carousel .owl-nav button .next-slide {
        right: -25px;
    }

    .mi-team-timesheet .owl-carousel .owl-nav div .prev-slide {
        left: -3px;
    }

    .mi-team-timesheet .owl-carousel .owl-nav div .next-slide {
        right: 0;
    }

    .mi-team-timesheet .owl-carousel .owl-nav div.disabled,
    .mi-team-timesheet .owl-carousel .owl-nav button.disabled {
        pointer-events: none;
        opacity: 0.2;
    }

.mi-team-timesheet .mi-table tbody tr:first-child td:first-child,
.mi-team-timesheet .mi-table tbody tr:last-child td:last-child {
    border-radius: 0;
}

.time-status {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
}

    .time-status.success {
        background: var(--success-color);
    }

    .time-status.info {
        background: var(--info-color);
    }

    .time-status.warning {
        background: var(--warning-color);
    }

    .time-status.danger {
        background: var(--danger-color);
    }

.status-tr {
    position: relative;
}

    .status-tr:hover > .day-status {
        left: 0;
    }

.day-status {
    color: var(--white-color);
    width: 100%;
    position: absolute;
    top: 0;
    left: -98%;
    bottom: 0;
    right: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
    letter-spacing: 0.5px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    transition: ease .4s;
}

    .day-status.opened {
        left: 0;
    }

    .day-status.style-2 {
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
        letter-spacing: 0.5px;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 500;
        left: -97%;
    }

    .day-status.active:after {
        content: 'Active';
    }

    .day-status.inactive:after {
        content: 'Inactive';
    }

    .day-status.deleted:after {
        content: 'Deleted';
    }

    .day-status.halfday:after {
        content: 'Half Day';
    }

    .day-status.absent:after {
        content: 'Absent';
    }

    .day-status.offday:after {
        content: 'Offday';
    }

    .day-status.late:after {
        content: 'Late';
    }

    .day-status.published {
        background: var(--theme-color);
    }

    .day-status.active,
    .day-status.success {
        background: var(--success-color);
    }


    .day-status.draft,
    .day-status.info {
        background: var(--info-color);
    }

    .day-status.inactive,
    .day-status.warning {
        background: var(--warning-color);
    }

    .day-status.deleted,
    .day-status.danger {
        background: var(--danger-color);
    }

    .day-status.danger-dark {
        background: var(--danger-hover-color);
    }

    .day-status.light {
        background: var(--light-color);
    }

    .day-status.light2 {
        background: var(--light2-color);
    }

    .day-status.dark {
        background: var(--dark-color);
    }

    .day-status.primary {
        background: var(--theme-color);
    }

    .day-status.danger-light {
        background: #e69798;
    }

.overtime-status {
    background-size: 0 100%;
    background-repeat: no-repeat;
    background-position: top;
    color: var(--transparent-color);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    cursor: not-allowed;
    transition: .6s;
}

    .overtime-status:hover {
        background-size: 100% 100%;
        color: var(--white-color);
    }

    .overtime-status.info:hover {
        cursor: pointer;
    }

    .overtime-status.success {
        background-image: linear-gradient(45deg, var(--success-color), var(--success-color));
    }

    .overtime-status.info {
        background-image: linear-gradient(45deg, var(--info-color), var(--info-color));
    }

    .overtime-status.warning {
        background-image: linear-gradient(45deg, var(--warning-color), var(--warning-color));
    }

    .overtime-status.danger {
        background-image: linear-gradient(45deg, var(--danger-color), var(--danger-color));
    }

    .overtime-status.light {
        background-image: linear-gradient(45deg, var(--light-color), var(--light-color));
    }

.mi-shift-time {
    position: relative;
}

.mi-time-details {
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    background: var(--white-color);
    border: 1px solid var(--light-color);
    text-align: left;
    padding: 10px;
    box-shadow: rgb(90 97 105 / 10%) 0px 0.46875rem 2.1875rem, rgb(90 97 105 / 10%) 0px 0.9375rem 1.40625rem, rgb(90 97 105 / 12%) 0px 0.25rem 0.53125rem, rgb(90 97 105 / 10%) 0px 0.125rem 0.1875rem;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
    z-index: 9;
}

    .mi-time-details > a {
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .mi-time-details > div > h6 {
        font-size: 11px;
        letter-spacing: .5px;
        text-transform: uppercase;
        margin: 0;
        color: var(--dark-focus-color);
    }

    .mi-time-details > div > p {
        margin-bottom: 10px;
        font-weight: 500;
        line-height: 2;
    }

    .mi-time-details > div:last-child > p {
        margin-bottom: 0;
    }

.mi-badge-detail.opened {
    border-radius: 0.25rem 0.25rem 0 0;
}

.mi-badge-detail .mi-badge-info {
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--white-color) !important;
    color: var(--dark-color) !important;
    border-radius: 0.15rem;
    border-width: 1px;
    border-style: solid;
    text-align: left;
    box-shadow: rgb(90 97 105 / 10%) 0px 0.46875rem 2.1875rem, rgb(90 97 105 / 10%) 0px 0.9375rem 1.40625rem, rgb(90 97 105 / 12%) 0px 0.25rem 0.53125rem, rgb(90 97 105 / 10%) 0px 0.125rem 0.1875rem;
}

.mi-badge-detail.mi-badge-success .mi-badge-info {
    border-color: var(--success-color);
}

.mi-badge-detail.mi-badge-info .mi-badge-info {
    border-color: var(--info-color);
}

.mi-badge-detail.mi-badge-warning .mi-badge-info {
    border-color: var(--warning-color);
}

.mi-badge-detail.mi-badge-danger .mi-badge-info {
    border-color: var(--danger-color);
}

.mi-badge-detail .mi-badge-info > div:not(:first-of-type) {
    margin-top: 15px;
}

.mi-badge-detail .mi-badge-info > div > h6 {
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: var(--dark-focus-color);
}

.mi-badge-detail .mi-badge-info > div > p {
    margin-bottom: 5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: pre-line;
}

.mi-side-panel-view-docs {
    width: 750px;
    right: -750px !important;
}

    .mi-side-panel-view-docs.opened {
        right: 400px !important;
    }

.view-doc-modal .modal-dialog {
    position: absolute;
    right: 450px;
}

.mi-side-panel-lg {
    width: 750px;
    right: -760px !important;
}

    .mi-side-panel-lg.opened {
        right: 0 !important;
    }
/*Side Panel Tabs*/
.mi-side-panel-tabs {
    width: 750px;
    right: -760px !important;
    border-radius: 0 0.65rem 0.65rem 0;
}

    .mi-side-panel-tabs.opened {
        right: 0 !important;
    }

    .mi-side-panel-tabs.closed .mi-nav-tabs .nav-tabs {
        height: auto !important;
        width: 50px;
        top: 200px;
        left: -50px;
    }

        .mi-side-panel-tabs.closed .mi-nav-tabs .nav-tabs .nav-item .nav-link {
            margin: 0 !important;
            background: var(--transparent-color);
            color: var(--white-color) !important;
            border-bottom: 1px solid var(--theme-color) !important;
            border-radius: 0 !important;
            height: 52px;
        }

            .mi-side-panel-tabs.closed .mi-nav-tabs .nav-tabs .nav-item .nav-link:hover > span {
                right: 55px;
                background: var(--theme-color);
                color: var(--white-color);
            }

        .mi-side-panel-tabs.closed .mi-nav-tabs .nav-tabs .nav-item:first-child .nav-link {
            border-top-left-radius: .65rem !important;
        }

        .mi-side-panel-tabs.closed .mi-nav-tabs .nav-tabs .nav-item:last-child .nav-link {
            border-bottom-left-radius: .65rem !important;
            border-bottom: 0 !important;
        }

        .mi-side-panel-tabs.closed .mi-nav-tabs .nav-tabs .nav-item .nav-link:hover {
            background: var(--theme-color);
        }

        .mi-side-panel-tabs.closed .mi-nav-tabs .nav-tabs .nav-item .nav-link > span {
            background: var(--theme-color);
            color: var(--white-color);
            right: 55px;
        }

        .mi-side-panel-tabs.closed .mi-nav-tabs .nav-tabs .nav-item .nav-link > i {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 9px;
            transition: .3s;
        }

    .mi-side-panel-tabs.opened .mi-nav-tabs .nav-tabs .nav-item .nav-link > i {
        display: none;
    }

    .mi-side-panel-tabs .mi-close-btn {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .mi-side-panel-tabs .mi-side-panel-header {
        background: var(--transparent-color);
        border-bottom: 0;
        padding: 20px 20px 20px 30px;
        height: auto;
    }

        .mi-side-panel-tabs .mi-side-panel-header > h5 {
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
            font-weight: 600;
            font-size: 22px;
            color: var(--dark2-color);
            margin-bottom: 0;
        }

    .mi-side-panel-tabs .mi-side-panel-body {
        height: 100%;
        border-bottom: 0;
    }

    .mi-side-panel-tabs .mi-nav-tabs .nav-tabs {
        flex-direction: column;
        width: 90px;
        position: absolute;
        top: 0;
        left: -90px;
        background: var(--dark2-color);
        border: 0;
        border-radius: 0.65rem 0 0 0.65rem;
        height: calc(100vh - 20px);
        text-align: center;
    }

        .mi-side-panel-tabs .mi-nav-tabs .nav-tabs .nav-item {
            width: 100%;
        }

            .mi-side-panel-tabs .mi-nav-tabs .nav-tabs .nav-item .nav-link {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 1rem;
                border: 0;
                height: 65px;
                transition: .2s;
            }

                .mi-side-panel-tabs .mi-nav-tabs .nav-tabs .nav-item .nav-link:not(.active):hover {
                    transform: scale(1.08);
                    color: var(--white-color) !important;
                }

                .mi-side-panel-tabs .mi-nav-tabs .nav-tabs .nav-item .nav-link.active {
                    padding: 0.5rem 0.1rem;
                    margin: 0 0 0 -40px;
                    border: 0;
                    border-radius: 0.45rem 0 0 0.45rem;
                    /*  font-size: 12px;
                line-height: 1.2;*/
                }

                    .mi-side-panel-tabs .mi-nav-tabs .nav-tabs .nav-item .nav-link.active svg {
                        width: 20px;
                    }

    .mi-side-panel-tabs:not(.style-2) .mi-nav-tabs .nav-tabs .nav-item .nav-link > span {
        display: none;
    }


    .mi-side-panel-tabs.style-2 .mi-nav-tabs .nav-tabs .nav-item .nav-link {
        margin: 10px;
        border-radius: 0.45rem;
    }


        .mi-side-panel-tabs.style-2 .mi-nav-tabs .nav-tabs .nav-item .nav-link > span {
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
            position: absolute;
            right: 87px;
            background: var(--white-color);
            color: var(--dark2-color);
            padding: 5px 10px;
            border-radius: 0 0.25rem .25rem 0;
            margin: auto;
            width: max-content;
            text-align: left;
            opacity: 0;
            visibility: hidden;
            transition: .3s;
        }

        .mi-side-panel-tabs.style-2 .mi-nav-tabs .nav-tabs .nav-item .nav-link:hover > span {
            opacity: 1;
            visibility: visible;
        }


        .mi-side-panel-tabs.style-2 .mi-nav-tabs .nav-tabs .nav-item .nav-link > span .mi-badge {
            width: 30px;
            height: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.25rem 0 0 0.25rem;
            position: absolute;
            left: -30px;
            top: 0;
        }

    .mi-side-panel-tabs .mi-side-panel-body .tab-content .tab-pane {
        padding: 0;
    }

        .mi-side-panel-tabs .mi-side-panel-body .tab-content .tab-pane > h5 {
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
            font-weight: 600;
            font-size: 22px;
            color: var(--dark2-color);
            margin-bottom: 20px;
        }

        .mi-side-panel-tabs .mi-side-panel-body .tab-content .tab-pane > .table-responsive {
            height: calc(100vh - 181px);
            padding-right: 10px;
            width: calc(100% + 10px);
        }
/*Side Panel Profile*/
.mi-side-panel-profile {
    width: 750px;
    right: -800px !important;
}

    .mi-side-panel-profile.opened {
        right: 0 !important;
    }

    .mi-side-panel-profile .mi-side-panel-body {
        height: inherit;
    }

    .mi-side-panel-profile.opened .mi-collapse-profile {
        left: -18px;
    }

    .mi-side-panel-profile .mi-collapse-profile {
        position: absolute;
        top: 50%;
        left: 0;
        background: var(--white-color);
        padding: 10px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: start;
        cursor: pointer;
    }

        .mi-side-panel-profile .mi-collapse-profile:hover {
            left: -15px;
        }

        .mi-side-panel-profile .mi-collapse-profile > i {
            margin-left: -8px;
        }

    .mi-side-panel-profile .mi-profile-header .mi-profile-values ul:not(.icons) li:not(:first-child):before {
        padding-right: 10px;
    }

    .mi-side-panel-profile .mi-profile-tabs .mi-nav-tabs .nav-tabs {
        line-height: 24px !important;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI";
        font-size: 13px;
        padding: 0;
        background: var(--light3-color);
    }

        .mi-side-panel-profile .mi-profile-tabs .mi-nav-tabs .nav-tabs .nav-item .nav-link.active {
            font-weight: 500;
        }

    .mi-side-panel-profile .table-week {
        max-height: calc(100vh - 230px);
    }

    .mi-side-panel-profile .mi-card .mi-card-header h4 {
        font-size: 14px;
    }

    .mi-side-panel-profile .mi-heading-value label {
        font-size: 12px;
    }

    .mi-side-panel-profile .mi-heading-value h6 {
        font-size: 13px;
    }

    .mi-side-panel-profile .mi-margin-value .mi-heading-value {
        margin-bottom: 10px;
    }

.mi-btn-load-more {
    border: 2px solid var(--light-color);
    background-image: linear-gradient( 45deg, var(--light3-color), var(--light3-color));
    background-repeat: no-repeat;
    background-position: top;
    background-size: 0 100%;
    color: var(--light2-color) !important;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 0.45rem;
}

    .mi-btn-load-more:hover {
        background-size: 100% 100%;
        border: 2px solid var(--dark-color);
        color: var(--dark2-color) !important;
    }

        .mi-btn-load-more:hover > i {
            -webkit-animation: fadeMoveDown 1s ease-in-out infinite;
            -moz-animation: fadeMoveDown 1s ease-in-out infinite;
            animation: fadeMoveDown 1s ease-in-out infinite;
        }

.mi-btn-expand {
    top: 90px;
    position: absolute;
    transform: rotate(90deg);
    right: -81px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 10px;
    box-shadow: 0px -2px 4px var(--light-color);
    border-radius: .25rem .25rem 0 0;
}

    .mi-btn-expand:focus {
        box-shadow: 0px -2px 4px var(--light3-color);
    }

/*Initiate Pay Run Start*/
/*.mi-initiate-payrun .header-cards > div:last-child > .mi-card*/
.mi-initiate-payrun .header-cards > div:not(:first-child) > .mi-card {
    border-radius: 0.45rem;
    background-color: var(--white-color) !important;
    box-shadow: 0 0 17px var(--light3-color);
}

.mi-initiate-payrun .payrun-date > span {
    padding: 5px 10px;
    border-radius: .35rem;
    cursor: pointer;
    transition: .3s;
}

    .mi-initiate-payrun .payrun-date > span:hover {
        background: var(--light3-color);
    }

.mi-initiate-payrun .header-cards > div > .mi-card .mi-card-body p {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 11px;
    margin: 0;
    letter-spacing: .5px;
    color: var(--light2-color);
    line-height: 1;
}
/*Steps*/
.mi-steps {
    display: flex;
    margin: 0 -10px
}

    .mi-steps > .item {
        flex: 1;
        background: var(--white-color);
        box-shadow: 0px 2px 7px var(--light-color);
        padding: 10px;
        border-radius: 0.45rem;
        margin: 0 10px;
        position: relative;
        cursor: pointer;
    }

        .mi-steps > .item > i {
            position: absolute;
            right: 7px;
            color: var(--success-color);
        }

        .mi-steps > .item > span {
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
            font-size: 12px;
            text-transform: uppercase;
            font-weight: 400;
            letter-spacing: 1px;
            color: var(--dark-color);
        }

        .mi-steps > .item > h6 {
            margin-top: 10px;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: .5px;
        }
    /*Style 2*/
    .mi-steps.style-2 {
        margin: 0 -2px
    }

        .mi-steps.style-2 > .item {
            background: var(--light3-color);
            box-shadow: none;
            border-radius: 0;
            margin: 0 2px;
            color: var(--dark-color);
            transition: .3s;
        }

            .mi-steps.style-2 > .item:first-child {
                border-radius: 0.45rem 0 0 0.45rem;
            }

            .mi-steps.style-2 > .item:after, .mi-steps.style-2 > .item:before {
                content: " ";
                position: absolute;
                top: 0;
                right: -30px;
                width: 0;
                height: 0;
                border-top: 31px solid transparent;
                border-bottom: 30px solid transparent;
                border-left: 30px solid var(--light3-color);
                z-index: 2;
                transition: .3s;
            }

            .mi-steps.style-2 > .item:first-child:before {
                border: none;
            }

            .mi-steps.style-2 > .item:before {
                right: auto;
                left: 0;
                border-left-width: 29px;
                border-left-style: solid;
                border-left-color: var(--white-color);
                z-index: 0;
            }

            .mi-steps.style-2 > .item > span {
                font-weight: 500;
                color: var(--dark-color);
            }

            .mi-steps.style-2 > .item.done > span,
            .mi-steps.style-2 > .item.current > span {
                color: var(--white-color);
            }

            .mi-steps.style-2 > .item.done {
                color: var(--white-color);
                background-color: var(--dark-color);
            }

                .mi-steps.style-2 > .item.done:after {
                    border-left-color: var(--dark-color);
                }

            .mi-steps.style-2 > .item.current {
                color: var(--white-color);
                background-color: var(--dark2-color);
            }

                .mi-steps.style-2 > .item.current:after {
                    border-left-color: var(--dark2-color);
                }

            .mi-steps.style-2 > .item:not(:first-child) {
                padding-left: 40px;
            }

            .mi-steps.style-2 > .item > h6 {
                margin-top: 0;
                font-size: 17px;
                font-weight: 600;
                letter-spacing: .5px;
                margin-bottom: 0;
            }

            .mi-steps.style-2 > .item:last-child {
                border-radius: 0 0.45rem 0.45rem 0;
            }

                .mi-steps.style-2 > .item:last-child:after {
                    border: none;
                }
    /*Style 3*/
    .mi-steps.style-3 {
        background: var(--light4-color);
        border-radius: 0.45rem;
        margin: 0;
    }

        .mi-steps.style-3 > .item {
            display: flex;
            align-items: center;
            box-shadow: none;
            background: var(--transparent-color);
            margin: 0;
            padding: 15px;
        }
            /*     .mi-steps.style-3 > .item:hover,
        .mi-steps.style-3 > .item.current {
            background: var(--light3-color);
        }*/
            .mi-steps.style-3 > .item > span {
                width: 30px;
                height: 30px;
                background: var(--white-color);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                font-size: 16px;
                font-weight: 600;
                box-shadow: 0 2px 10px var(--light2-color);
                transition: .3s;
            }

            .mi-steps.style-3 > .item > h6 {
                margin: 0;
                padding-left: 15px;
                margin-top: 1px;
                display: grid;
                transition: .3s;
            }

            .mi-steps.style-3 > .item.done > span {
                background: var(--success-color);
                color: var(--white-color);
            }

            .mi-steps.style-3 > .item.done > h6 {
                color: var(--success-color);
            }

            .mi-steps.style-3 > .item:hover > span,
            .mi-steps.style-3 > .item.current > span {
                background: var(--dark2-color);
                color: var(--white-color);
            }

            .mi-steps.style-3 > .item:hover > h6,
            .mi-steps.style-3 > .item.current > h6 {
                color: var(--dark2-color);
            }

.mi-card-shadow {
    box-shadow: 0 0 17px var(--light3-color);
}

    .mi-card-shadow .mi-card-header {
        font-size: 17px;
        font-weight: 700;
        color: var(--dark2-color);
    }

.mi-card-merged {
    padding: 25px 0;
    box-shadow: 0 0 17px var(--light3-color);
    border-radius: 0.65rem;
    display: flex;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
}

    .mi-card-merged .mi-content {
        flex: 1;
        text-align: left;
        padding: 0 20px;
    }

        .mi-card-merged .mi-content:not(:last-child) {
            border-right: 1px solid var(--light3-color);
        }

        .mi-card-merged .mi-content > h4 {
            font-weight: 500;
            color: var(--dark2-color);
            margin-top: 5px;
            margin-bottom: 0;
        }

        .mi-card-merged .mi-content > p {
            line-height: 1;
            margin-bottom: 0;
        }

.mi-card-gradient.primary {
    background: linear-gradient(to right, var(--hover-color), var(--hover-color), var(--theme-color));
}

.mi-card-gradient.dark {
    background: linear-gradient(to right, var(--dark-color), var(--dark-color), var(--light-color));
}

.mi-card-gradient.success {
    background: linear-gradient(to right, var(--success-hover-color), var(--success-hover-color), var(--success-color));
}

.mi-card-gradient.info {
    background: linear-gradient(to right, var(--info-hover-color), var(--info-hover-color), var(--info-color));
}

.mi-card-gradient.danger {
    background: linear-gradient(to right, var(--danger-hover-color), var(--danger-hover-color), var(--danger-color));
}

.mi-card-gradient .mi-card-body > img {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 120px;
}
/*Initiate Pay Run End*/
/*Hierarchy*/
.mi-org .orgchart {
    box-shadow: none;
    background-image: none;
    /*background-image: linear-gradient(90deg,rgb(103 119 239 / 0.22) 10%,rgba(0,0,0,0) 10%),linear-gradient(rgb(103 119 239 / 0.22) 10%,rgba(0,0,0,0) 10%);*/
}

    .mi-org .orgchart .node {
        width: 170px;
        box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1);
        background-color: var(--white-color) !important;
        margin: 0 5px;
        border-radius: 10px;
        transition: .3s;
    }

        .mi-org .orgchart .node:hover,
        .mi-org .orgchart .node.focused {
            box-shadow: 0 0 0 0.2rem var(--focus-color) !important;
            border-radius: 5px;
            cursor: pointer;
        }

        .mi-org .orgchart .node .node-popover {
            position: absolute;
            right: 10px;
            top: 3px;
        }

        .mi-org .orgchart .node .edge {
            color: var(--dark-color) !important;
        }

        .mi-org .orgchart .node .title {
            background-color: transparent;
            color: var(--theme-color) !important;
            border-bottom: 1px solid var(--lightest-color);
            border-radius: 7px 7px 0 0;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .5px;
            height: 25px;
            line-height: 25px;
        }

        .mi-org .orgchart .node .content {
            border: 0;
            border-radius: 0 0 7px 7px;
            background-color: var(--white-color) !important;
            color: var(--dark-color) !important;
            height: 30px;
            font-size: 11px;
            line-height: 32px;
            text-transform: capitalize;
        }

    .mi-org .orgchart .lines .rightLine {
        border-right: 1px solid var(--light3-color);
    }

    .mi-org .orgchart .lines .topLine {
        border-top: 2px solid var(--light3-color);
    }

    .mi-org .orgchart .lines .leftLine {
        border-left: 1px solid var(--light3-color);
    }

    .mi-org .orgchart .lines .downLine {
        background-color: var(--light3-color);
    }

    .mi-org .orgchart .edge:hover {
        border-radius: 5px;
        color: var(--darkest-color) !important;
    }

    .mi-org .orgchart .node .title .symbol {
        margin-top: 4px;
        margin-left: 4px;
        font-size: 18px;
    }

    .mi-org .orgchart .node.allowedDrop {
        border-color: var(--light-color);
        margin-right: 5px;
    }

    .mi-org .orgchart .node .positions {
        font-size: 11px;
        text-align: left;
        padding: 0 5px 5px;
        display: flex;
    }

        .mi-org .orgchart .node .positions span {
            display: flex;
            width: 33.3%;
            align-items: center;
            justify-content: center;
        }

            .mi-org .orgchart .node .positions span i {
                font-size: 17px;
            }

            .mi-org .orgchart .node .positions span:first-child {
                justify-content: flex-start;
            }

            .mi-org .orgchart .node .positions span:last-child {
                justify-content: flex-end;
            }

.mi-team-node {
    width: 250px !important;
    padding: 0 !important;
    border: 0 !important;
}

    .mi-team-node .node-popover {
        position: initial !important;
        float: left !important;
        padding: 10px;
    }

        .mi-team-node .node-popover figure {
            display: inline-block;
            width: 54px;
            height: 54px;
            margin-right: 0 !important;
        }

    .mi-team-node .title {
        display: inline-block;
        border-bottom: 0 !important;
        width: calc(100% - 75px);
        padding-top: 6px;
        line-height: 1.6 !important;
        height: auto !important;
        text-align: left !important;
    }

        .mi-team-node .title span.name {
            color: var(--dark-color);
        }

        .mi-team-node .title span:not(.name) {
            font-weight: 500;
            display: block;
            color: var(--dark-color);
        }

            .mi-team-node .title span:not(.name):last-child {
                color: var(--light2-color);
            }

    .mi-team-node .positions {
        background: var(--lightest-color);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 3px 10px !important;
    }

.mi-back-team {
    position: absolute;
    cursor: pointer;
    z-index: 9;
}

    .mi-back-team span {
        display: flex;
    }


/* Timeline */

.mi-timeline > .items {
    padding: 50px 30px 30px 30px;
    overflow-y: hidden;
    width: 100%;
}

.mi-timeline ul {
    letter-spacing: 0.5px;
    position: relative;
    font-size: 14px;
    padding: 0 30px 0 120px;
    list-style: none;
    text-align: left;
}

    .mi-timeline ul h3 {
        font-weight: 700;
        font-size: 15px;
    }

        .mi-timeline ul h3 > span {
            font-weight: 100;
        }

    .mi-timeline ul .item {
        padding-bottom: 15px;
        margin-bottom: 35px;
        border-left: 2px solid var(--light-color);
        padding-left: 40px;
        position: relative;
    }

        .mi-timeline ul .item:last-of-type {
            padding-bottom: 0;
            margin-bottom: 0;
        }

        .mi-timeline ul .item .mi-timeline-icon {
            position: absolute;
            left: -12px;
            font-size: 11px;
            background: var(--light-color);
            color: var(--white-color);
            border-radius: .25rem;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            padding: 6px;
            top: -29px;
            width: 23px;
            height: 23px;
            text-align: center;
        }

        .mi-timeline ul .item .content {
            margin-top: -27px;
            display: inline-block;
        }


        /*     .mi-timeline ul .item:before,
.mi-timeline ul .item:after {
position: absolute;
display: block;
top: 0;
}*/

        .mi-timeline ul .item:before {
            content: attr(data-date);
            position: absolute;
            left: -132px;
            top: -29px;
            text-align: center;
            font-size: 13px;
            min-width: 120px;
            padding: 4px 10px 2px 10px;
            border-radius: .25rem;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            line-height: 1;
            font-weight: 800 !important;
            border-width: 2px;
            border-style: solid;
            border-right: 0;
        }


/* .mi-timeline ul .item:after {
box-shadow: 0 0 0 4px #4298c3;
left: -57.85px;
background: #313534;
border-radius: 50%;
height: 11px;
width: 11px;
content: "";
top: 0;
}*/

.mi-timeline .mi-cards-group {
    width: max-content;
    padding: 0 !important;
    display: contents;
}

    .mi-timeline .mi-cards-group .mi-card {
        display: inline-block;
        margin-right: 10px;
        border-bottom: 1px solid var(--light3-color) !important;
        border-radius: .25rem !important;
    }

        .mi-timeline .mi-cards-group .mi-card .mi-card-header,
        .mi-timeline .mi-cards-group .mi-card .mi-card-body {
            padding: 0px 10px;
        }

.mi-timeline ul .item.mi-timeline-primary:before {
    color: var(--theme-color);
    border-color: var(--theme-color);
}

.mi-timeline ul .item.mi-timeline-primary {
    border-color: var(--theme-color);
}

    .mi-timeline ul .item.mi-timeline-primary .mi-timeline-icon {
        background: var(--theme-color);
    }

.mi-timeline ul .item.mi-timeline-info:before {
    color: var(--info-color);
    border-color: var(--info-color);
}

.mi-timeline ul .item.mi-timeline-info {
    border-color: var(--info-color);
}

    .mi-timeline ul .item.mi-timeline-info .mi-timeline-icon {
        background: var(--info-color);
    }

.mi-timeline ul .item.mi-timeline-success:before {
    color: var(--success-color);
    border-color: var(--success-color);
}

.mi-timeline ul .item.mi-timeline-success {
    border-color: var(--success-color);
}

    .mi-timeline ul .item.mi-timeline-success .mi-timeline-icon {
        background: var(--success-color);
    }

.mi-timeline ul .item.mi-timeline-warning:before {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.mi-timeline ul .item.mi-timeline-warning {
    border-color: var(--warning-color);
}

    .mi-timeline ul .item.mi-timeline-warning .mi-timeline-icon {
        background: var(--warning-color);
    }

.mi-timeline ul .item.mi-timeline-danger:before {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.mi-timeline ul .item.mi-timeline-danger {
    border-color: var(--danger-color);
}

    .mi-timeline ul .item.mi-timeline-danger .mi-timeline-icon {
        background: var(--danger-color);
    }

.mi-timeline ul .item.mi-timeline-dark:before {
    color: var(--dark-color);
    border-color: var(--dark-color);
}

.mi-timeline ul .item.mi-timeline-dark {
    border-color: var(--dark-color);
}

    .mi-timeline ul .item.mi-timeline-dark .mi-timeline-icon {
        background: var(--dark-color);
    }

.mi-timeline ul .item.mi-timeline-light {
    border-color: var(--light-color);
}

    .mi-timeline ul .item.mi-timeline-light:before {
        color: var(--light-color);
        border-color: var(--light-color);
    }

    .mi-timeline ul .item.mi-timeline-light .mi-timeline-icon {
        background: var(--light-color);
    }


/*Getting Started Panel*/

.mi-btn-onboard {
    border: 0;
    background: #fff;
    box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-top-left-radius: .65rem;
    border-bottom-left-radius: .65rem;
    cursor: pointer;
    transition: all .5s;
}

    .mi-btn-onboard:focus {
        outline: none;
    }

.mi-onboard {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    right: -300px;
    margin: auto;
    z-index: 999;
    transition: all .4s;
}

.mi-onboard-content {
    position: relative;
    background: var(--white-color);
    box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1);
    width: 300px;
    height: 400px;
    border-radius: .65rem;
    padding: 15px;
}

.mi-onboard.opened {
    right: 0;
}


/*Role*/

.mi-role-priority {
    display: flex;
    align-items: center;
    background: var(--lightest-color);
    border-radius: .25rem;
    margin-bottom: 10px;
    cursor: pointer;
}

    .mi-role-priority .mi-role-priority:last-child {
        margin-bottom: 0;
    }

    .mi-role-priority .mi-count {
        padding: 0 4px 0 7px;
        height: 30px;
        align-items: center;
        display: flex;
        background: var(--light3-color);
        color: var(--dark-color);
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        font-weight: 800;
    }

    .mi-role-priority .mi-desc {
        margin-left: 10px;
        font-weight: 700;
        font-size: 13px;
    }

    .mi-role-priority .mi-form-group {
        width: 100%;
    }

    .mi-role-priority .mi-select2 .select2 > .selection > .select2-selection > .select2-selection__rendered > .select2-search > input.select2-search__field {
        margin: 0;
    }

    .mi-role-priority .mi-select2 .select2-selection {
        align-items: center;
        padding: 0 30px 0 10px !important;
        height: 27px !important;
        /*border: 0 !important;*/
        display: flex !important;
        border-radius: 0 !important;
    }

    .mi-role-priority .mi-select2 .select2 > .selection > .select2-selection > .select2-selection__arrow {
        height: 24px !important;
    }

    .mi-role-priority .mi-select2 .select2-selection .select2-selection__rendered input {
        margin: 0;
    }

    .mi-role-priority .mi-bootstrap-multiSelect .btn-group > button:hover,
    .mi-role-priority .mi-bootstrap-multiSelect .btn-group > button:focus {
        background: transparent !important;
    }

    .mi-role-priority .mi-bootstrap-multiSelect .multiselect-container {
        border-color: transparent;
        box-shadow: none;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: .25rem;
    }

        .mi-role-priority .mi-bootstrap-multiSelect .multiselect-container button {
            border-bottom: 1px solid var(--light3-color);
        }

.mi-role-profile .mi-history .mi-card-body {
    max-height: 626px !important;
}


/*Entity*/

.mi-entity-tree {
    position: relative;
    background: var(--white-color);
    margin-top: 0;
    padding: 20px;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    padding-left: 0 !important;
}

    .mi-entity-tree span {
        font-size: 13px;
        color: var(--dark2-color);
    }

    .mi-entity-tree .fa-folder,
    .mi-entity-tree .fa-folder-open {
        color: var(--light2-color);
        transition: .3s;
    }

    .mi-entity-tree .item a:hover .fa-folder,
    .mi-entity-tree .item a:hover .fa-folder-open {
        color: var(--dark-color);
    }

    .mi-entity-tree .fa-file {
        color: var(--light2-color);
    }

    .mi-entity-tree ul {
        padding-left: 0;
        list-style: none;
        margin: 0;
    }

        .mi-entity-tree ul .item {
            position: relative;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 15px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

    .mi-entity-tree .item .actions {
        display: none;
        margin-left: 20px;
    }

    .mi-entity-tree .item a:hover .actions {
        display: inline-flex;
    }

    .mi-entity-tree .item .actions span {
        padding: 0 10px;
        background: var(--lightest-color);
        border-right: 1px solid var(--light3-color);
        line-height: 1.7;
        transition: .3s;
    }

        .mi-entity-tree .item .actions span:first-child {
            border-top-left-radius: .25rem;
            border-bottom-left-radius: .25rem;
        }

        .mi-entity-tree .item .actions span:last-child {
            border-top-right-radius: .25rem;
            border-bottom-right-radius: .25rem;
            border-right: 0;
        }

        .mi-entity-tree .item .actions span:hover {
            background: var(--light3-color);
        }

    .mi-entity-tree > ul > .item:first-child:before,
    .mi-entity-tree > ul > .item:first-child:after {
        background-color: var(--transparent-color);
    }

    .mi-entity-tree ul .item:before {
        content: "";
        position: absolute;
        top: 15px;
        left: 0;
        width: 10px;
        height: 1px;
        margin: auto;
        background-color: var(--light2-color);
    }

    .mi-entity-tree ul .item:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background-color: var(--light2-color);
    }

    .mi-entity-tree ul .item:last-child:after {
        height: 15px;
    }

    .mi-entity-tree ul a {
        cursor: pointer;
    }

        .mi-entity-tree ul a:hover {
            text-decoration: none;
        }


/*Create Position*/

.mi-btn-arrow {
    border-radius: .45rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    top: -32px;
    box-shadow: 1px -4px 6px var(--light-focus-color);
    /*position: absolute;
left: 0;
right: 0;
margin: auto;
width: fit-content;*/
}

.mi-fixed-card {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    /*padding-left: 80px !important;*/
    bottom: -45px;
    width: fit-content;
    transition: .3s;
}

    .mi-fixed-card.opened {
        bottom: 0;
    }

    .mi-fixed-card .mi-card {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .mi-fixed-card .mi-btns {
        display: flex;
    }

        .mi-fixed-card .mi-btns a {
            display: flex;
            align-items: center;
            margin-left: 10px;
            font-weight: 600;
            margin-right: 10px;
            transition: .4s;
        }

            .mi-fixed-card .mi-btns a i {
                transition: .4s;
            }

            .mi-fixed-card .mi-btns a:hover {
                text-decoration: none;
            }

                .mi-fixed-card .mi-btns a:hover i {
                    color: var(--dark-color) !important;
                }

.mi-position-header {
    position: relative;
    padding: 20px 17px !important;
    color: var(--dark2-color);
    transition: .3s;
}

    .mi-position-header h5,
    .mi-position-header p {
        font-weight: 700;
        margin-bottom: 0;
    }

    .mi-position-header p {
        color: var(--light2-color);
    }

    .mi-position-header .mi-heading-value {
        padding-right: 20px;
        margin-right: 20px;
        border-right: 2px solid var(--light3-color);
    }

        .mi-position-header .mi-heading-value:last-child {
            padding-right: 0;
            margin-right: 0;
            border-right: 0;
        }

        .mi-position-header .mi-heading-value h6 {
            color: var(--dark-color);
        }


    /*
.mi-position-header .dropdown .dropdown-item:last-child {
background: var(--dark2-color);
color: var(--white-color);
border-bottom-left-radius: .45rem;
border-bottom-right-radius: .45rem;
margin-top: -15px;
}*/

    .mi-position-header.status {
        border-top-width: 4px;
        border-top-style: solid;
        border-top-left-radius: .45rem;
        border-top-right-radius: .45rem;
    }

        .mi-position-header.status.success {
            border-top-color: var(--success-color);
        }

        .mi-position-header.status.info {
            border-top-color: var(--info-color);
        }

        .mi-position-header.status.warning {
            border-top-color: var(--warning-color);
        }

        .mi-position-header.status.danger {
            border-top-color: var(--danger-color);
        }

.mi-responsibilities .mi-card-body {
    padding: 0 !important;
}

    .mi-responsibilities .mi-card-body .note-editor {
        border: 0;
    }

        .mi-responsibilities .mi-card-body .note-editor .note-editable {
            min-height: 336px !important;
            max-height: 480px;
        }

        .mi-responsibilities .mi-card-body .note-editor .note-statusbar {
            display: none;
        }

/* .mi-skillsets .mi-card-body {
height: 180px !important;
} */

.mi-skillsets .mi-card-body .skills {
    margin-top: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
    overflow-x: scroll;
    height: calc(100% - 35px);
}

    .mi-skillsets .mi-card-body .skills .mi-badge {
        margin-right: 5px;
    }

.mi-qualifications .mi-card-body .mi-group-listing {
    overflow-x: hidden;
    max-height: 155px;
}

.mi-btn-dropdown.show .mi-btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

    .mi-btn-dropdown.show .mi-btn:focus {
        box-shadow: none;
    }

.mi-btn-dropdown.show .dropdown-menu {
    /*width: calc(100% + 1px);*/
    width: 100%;
    min-width: auto;
    box-shadow: none;
    border: 1px solid var(--theme-color);
    border-radius: .25rem;
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

    .mi-btn-dropdown.show .dropdown-menu .dropdown-item {
        padding: 10px;
        font-size: 12px;
        font-weight: 400;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
        display: flex;
        align-items: center;
        transition: .3s;
    }

        .mi-btn-dropdown.show .dropdown-menu .dropdown-item:hover {
            background: var(--light3-color);
            border-image: none;
        }

    .mi-btn-dropdown.show .dropdown-menu .dropdown-divider {
        margin: .1rem 0;
    }

.dropdown-toggle.no-arrow {
    padding: 6px 10px;
}

    .dropdown-toggle.no-arrow i {
        margin-right: -5px;
        margin-left: -4px;
    }

    .dropdown-toggle.no-arrow::after {
        content: "";
        border: 0;
        display: none;
    }

    .dropdown-toggle.no-arrow::before {
        content: "";
        border: 0;
        display: none;
    }

.dropdown-status.only-view {
    pointer-events: none;
    opacity: 0.5;
}

    .dropdown-status.only-view > .dropdown-toggle.arrow-left::after,
    .dropdown-status.only-view .dropdown-menu {
        display: none !important;
    }

    .dropdown-status.only-view .dropdown-toggle {
        padding-right: 5px !important;
    }

.dropdown-status {
    cursor: pointer;
    user-select: none;
}

    .dropdown-status .dropdown-item {
        user-select: none;
    }

    .dropdown-status > .dropdown-toggle.arrow-right::after {
        top: 10px;
        bottom: 0;
        margin: auto;
        font-size: 14px;
        color: var(--dark-color);
        display: flex;
        align-items: baseline;
    }

.dropdown-toggle.arrow-right {
    padding-right: 30px;
}

.dropdown-status > .dropdown-toggle.arrow-left::after {
    top: 5px;
    margin: auto;
    font-size: 14px;
    color: var(--dark-color);
    display: flex;
    align-items: baseline;
}

.dropdown-toggle.arrow-left {
    padding-right: 10px;
}

.dropdown-status > .dropdown-toggle {
    color: var(--dark-color) !important;
    padding-right: 40px;
    float: right;
}

.dropdown-status p {
    color: var(--light2-color) !important;
    font-size: 12px;
    font-weight: 700 !important;
}

.dropdown-status.show .dropdown-menu.show {
    top: 10px !important;
    /*   left: auto !important;
right: 73px !important;*/
}

.dropleft .arrow-left:before {
    content: "";
    display: none;
}

.mi-timeline-list > div {
    overflow: hidden;
    flex: 1;
}

.mi-list-cards {
    margin-bottom: 0 !important;
}

.mi-configuration .mi-card {
    margin-bottom: 15px !important;
}

.mi-grade-list {
    padding: 0 3px;
}

    .mi-grade-list ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .mi-grade-list ul li {
            border-bottom: 1px solid var(--lightest-color);
            padding: 0 10px;
        }

            .mi-grade-list ul li:last-child {
                border-bottom: 0;
            }

            .mi-grade-list ul li span {
                color: var(--dark-color);
                font-weight: 600;
            }

            .mi-grade-list ul li a {
                float: right;
                color: var(--dark-color);
                font-size: 13px;
                transition: .3s;
            }

                .mi-grade-list ul li a:hover {
                    color: var(--dark2-color);
                }


/*Compare Applicant*/

.mi-comparison {
    border: 1px solid var(--light3-color);
    border-radius: .25rem;
}

    .mi-comparison .mi-comparison-header {
        background: var(--dark2-color);
        color: var(--white-color);
        padding: 0 20px;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
    }

        .mi-comparison .mi-comparison-header .mi-position {
            padding: 10px;
            position: relative;
            height: 100%;
        }

            .mi-comparison .mi-comparison-header .mi-position h5 {
                font-weight: 500;
                margin-bottom: 0;
            }

        .mi-comparison .mi-comparison-header .mi-applicant {
            background: var(--white-color);
            color: var(--dark2-color);
            text-align: center;
            height: 100%;
            padding: 10px;
            border-right: 1px solid var(--lightest-color);
        }

        .mi-comparison .mi-comparison-header .col-lg-3:last-child .mi-applicant {
            border-right: 0;
        }

        .mi-comparison .mi-comparison-header .col-lg-3 .mi-applicant > a i {
            color: var(--light2-color);
            padding: 2px;
            font-size: 16px !important;
        }

        .mi-comparison .mi-comparison-header .mi-applicant h6,
        .mi-comparison .mi-comparison-header .mi-applicant p {
            margin-bottom: 0;
        }

        .mi-comparison .mi-comparison-header .mi-applicant h6 {
            margin-top: 5px;
        }

        .mi-comparison .mi-comparison-header .mi-applicant p {
            font-weight: 600;
            font-size: 14px;
            color: var(--light2-color);
            line-height: 1.5;
        }

    .mi-comparison .mi-comparison-body .mi-accordion {
        margin-bottom: 0;
    }

    .mi-comparison .mi-comparison-body .mi-accordion-header {
        background: var(--transparent-color);
        border-top: 1px solid var(--light3-color);
        border-radius: 0 !important;
    }

        .mi-comparison .mi-comparison-body .mi-accordion-header:hover,
        .mi-comparison .mi-comparison-body .mi-accordion-header[aria-expanded="true"] {
            box-shadow: none !important;
            background: var(--lightest2-color);
            color: var(--theme-color);
        }

    .mi-comparison .mi-comparison-body .mi-accordion-header,
    .mi-comparison .mi-comparison-body .mi-accordion-body {
        padding-top: 0;
        padding-bottom: 0;
    }

    .mi-comparison .mi-accordion:last-child .mi-accordion-header .mi-applicant-skills > div:first-child {
        border-bottom-left-radius: .25rem;
    }

    .mi-comparison .mi-accordion:last-child .mi-accordion-header[aria-expanded="true"] .mi-applicant-skills > div:first-child {
        border-bottom-left-radius: 0;
    }

    .mi-comparison .mi-applicant-skills > div {
        border-right: 1px solid var(--lightest-color);
        padding: 10px;
        font-weight: 600;
    }

    .mi-comparison .mi-accordion-header .mi-applicant-skills > div:first-child {
        background: var(--dark2-color);
        border-right: 1px solid var(--dark2-color);
        color: var(--white-color);
    }

    .mi-comparison .mi-applicant-skills > div:first-child h4 {
        font-weight: 600;
    }

    .mi-comparison .mi-applicant-skills > div:first-child i {
        font-size: 20px;
        position: absolute;
        right: 6px;
        top: 6px;
    }

    .mi-comparison .mi-applicant-skills > div:last-child {
        border-right: 0;
    }

    .mi-comparison .mi-comparison-body .mi-list-items {
        text-align: center;
    }

        .mi-comparison .mi-comparison-body .mi-list-items ul {
            list-style: none;
            padding: 0;
            margin-bottom: 0;
            font-weight: 600;
        }

            .mi-comparison .mi-comparison-body .mi-list-items ul li {
                color: var(--dark-color);
                margin-bottom: 10px;
                font-weight: 700;
                line-height: 1.5;
            }

                .mi-comparison .mi-comparison-body .mi-list-items ul li:last-child {
                    margin-bottom: 0;
                }


/*Applicant Profile*/

.mi-applicant-view {
    margin-top: 15px;
    margin-bottom: 15px;
}

    .mi-applicant-view .mi-heading-value {
        margin-bottom: 15px;
    }

.mi-applicant-summary.mi-card-body {
    padding: 10px 15px 0 15px !important;
}

.mi-applicant-summary .mi-hr-solid {
    margin-right: -16px;
    margin-left: -16px;
    margin-top: 0;
    margin-bottom: 0;
    height: 11px;
}

.mi-applicant-steps ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin-bottom: 10px;
}

    .mi-applicant-steps ul li {
        font-size: 14px;
        text-align: center;
        color: var(--dark2-color);
        cursor: default;
        margin: 0 6px 0 0px;
        padding: 5px 10px 5px 25px;
        height: 36px;
        /*min-width: 150px;*/
        flex: 1;
        float: left;
        position: relative;
        background-color: var(--light-color);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: background-color 0.2s ease;
    }

        .mi-applicant-steps ul li:after,
        .mi-applicant-steps ul li:before {
            content: " ";
            position: absolute;
            top: 0;
            right: -17px;
            width: 0;
            height: 0;
            border-top: 19px solid transparent;
            border-bottom: 17px solid transparent;
            border-left: 17px solid var(--light-color);
            z-index: 2;
            transition: border-color 0.2s ease;
        }

        .mi-applicant-steps ul li:before {
            right: auto;
            left: 0;
            border-left-width: 17px;
            border-left-style: solid;
            border-left-color: var(--white-color);
            z-index: 0;
        }


        /*.mi-applicant-sub-steps {
padding-left: 40px;
}

.mi-applicant-sub-steps ul li {
flex: 0.1;
}*/

        .mi-applicant-steps ul li:first-child:before {
            border: none;
        }

        .mi-applicant-steps ul li:first-child {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .mi-applicant-steps ul li:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            min-width: 100px;
            margin: 0;
        }

            .mi-applicant-steps ul li:last-child:after {
                border: none;
            }


        /*        .mi-applicant-steps ul li.current span:before {
font-family: "Font Awesome 5 Free", "FontAwesome";
content: "\f005";
border: 1px solid var(--theme-color);
background: var(--white-color);
color: var(--theme-color);
border-radius: 50%;
width: 23px;
height: 23px;
font-size: 13px;
font-weight: 800;
margin: auto;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -18px;
left: 12px;
}*/

        .mi-applicant-steps ul li.done {
            color: var(--white-color);
            background-color: var(--theme-color);
        }

            .mi-applicant-steps ul li.done:after {
                border-left-color: var(--theme-color);
            }

            .mi-applicant-steps ul li.current.primary,
            .mi-applicant-steps ul li.done.primary {
                color: var(--white-color);
                background-color: var(--theme-color);
            }

                .mi-applicant-steps ul li.current.primary:after,
                .mi-applicant-steps ul li.done.primary:after {
                    border-left-color: var(--theme-color);
                }

            .mi-applicant-steps ul li.current.info,
            .mi-applicant-steps ul li.done.info {
                color: var(--white-color);
                background-color: var(--info-color);
            }

                .mi-applicant-steps ul li.current.info:after,
                .mi-applicant-steps ul li.done.info:after {
                    border-left-color: var(--info-color);
                }

            .mi-applicant-steps ul li.current.success,
            .mi-applicant-steps ul li.done.success {
                color: var(--white-color);
                background-color: var(--success-color);
            }

                .mi-applicant-steps ul li.current.success:after,
                .mi-applicant-steps ul li.done.success:after {
                    border-left-color: var(--success-color);
                }

            .mi-applicant-steps ul li.current.warning,
            .mi-applicant-steps ul li.done.warning {
                color: var(--white-color);
                background-color: var(--warning-color);
            }

                .mi-applicant-steps ul li.current.warning:after,
                .mi-applicant-steps ul li.done.warning:after {
                    border-left-color: var(--warning-color);
                }

            .mi-applicant-steps ul li.current.danger,
            .mi-applicant-steps ul li.done.danger {
                color: var(--white-color);
                background-color: var(--danger-color);
            }

                .mi-applicant-steps ul li.current.danger:after,
                .mi-applicant-steps ul li.done.danger:after {
                    border-left-color: var(--danger-color);
                }

        .mi-applicant-steps ul li span {
            display: block;
        }

.mi-applicant-data {
    /*background: var(--lightest2-color);*/
    padding: 10px 5px;
    /*transition: all .3s;*/
}

    .mi-applicant-data td {
        height: 0 !important;
    }

    .mi-applicant-data.opened td {
        height: 85px !important;
    }

.mi-table-applicant {
    border-radius: .25rem;
    background: var(--lightest-color);
}

    .mi-table-applicant tr {
        transition: .3s;
    }

        .mi-table-applicant tr:hover {
            cursor: pointer;
            background: var(--lightest2-color);
        }

        .mi-table-applicant tr:not(:last-child) {
            border-bottom: 1px solid var(--light3-color);
        }

    .mi-table-applicant.table:not(.table-sm):not(.table-md):not(.dataTable) td {
        height: 85px !important;
    }

.mi-applicant-data td .row > div {
    display: flex;
}

    .mi-applicant-data td .row > div .mi-heading-value {
        margin-right: 30px;
        border-left: 2px solid var(--light3-color);
        padding-left: 20px;
    }


/*Setps View*/

.mi-step-circles {
    display: flex;
    margin-bottom: 30px;
}

    .mi-step-circles li {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

        .mi-step-circles li:last-of-type .step .line {
            display: none;
        }

        .mi-step-circles li.finished > .step .indicator {
            background-color: var(--theme-color);
            border-color: var(--theme-color);
            color: var(--white-color);
        }

        .mi-step-circles li.finished > .step .description {
            color: var(--theme-color);
        }

        .mi-step-circles li.finished > .step .line {
            background-color: var(--theme-color);
        }

        .mi-step-circles li.active > .step .indicator {
            border-color: var(--theme-color);
            color: var(--theme-color);
        }

        .mi-step-circles li.active > .step .description {
            color: var(--theme-color);
        }

        .mi-step-circles li .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

            .mi-step-circles li .step .indicator {
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 2px solid var(--light-color);
                color: var(--light-color);
                position: relative;
                z-index: 1;
                background-color: white;
            }

                .mi-step-circles li .step .indicator i {
                    font-size: 10px;
                }

            .mi-step-circles li .step .description {
                font-weight: bold;
                font-size: 0.875rem;
                color: var(--light-color);
                position: absolute;
                bottom: -1.5rem;
            }

            .mi-step-circles li .step .line {
                height: 4px;
                background-color: var(--light-color);
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateY(-50%);
            }


/*Applicant Panel*/

.mi-overlay-panel {
    background: var(--transparent-color);
    z-index: 999;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: url('../img/icons/close.png'), auto;
}

.mi-applicant-panel .mi-side-panel-header {
    padding: 20px !important;
    height: auto;
    display: block;
}

.mi-applicant-panel .mi-side-panel-body {
    padding: 0 !important;
    height: calc(100vh - 90px);
    border-bottom-width: 0;
}

.mi-applicant-panel .mi-applicant-contact ul.icons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

    .mi-applicant-panel .mi-applicant-contact ul.icons li:first-child {
        margin-right: 10px;
    }

    .mi-applicant-panel .mi-applicant-contact ul.icons li a {
        display: flex;
        border-width: 2px;
        border-style: solid;
        border-color: var(--theme-color);
        color: var(--theme-color);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        align-items: center;
        justify-content: center;
        transition: .4s;
    }

        .mi-applicant-panel .mi-applicant-contact ul.icons li a:hover {
            border-color: var(--theme-color);
            background: var(--theme-color);
            color: var(--white-color);
        }

.mi-applicant-logs .section-heading {
    font-size: 14px;
    margin: 20px 0 10px 0;
    padding-left: 15px;
}

    .mi-applicant-logs .section-heading:not(:first-child) {
        margin-top: 10px;
    }

.mi-applicant-panel .mi-applicant-logs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .mi-applicant-panel .mi-applicant-logs ul li {
        display: flex;
        padding: 15px 20px;
        color: var(--dark2-color);
        cursor: pointer;
        transition: .3s;
    }

        .mi-applicant-panel .mi-applicant-logs ul li:hover {
            background: var(--lightest-color);
        }

        .mi-applicant-panel .mi-applicant-logs ul li i {
            font-size: 30px;
            margin-right: 10px;
        }

        .mi-applicant-panel .mi-applicant-logs ul li h6 {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .mi-applicant-panel .mi-applicant-logs ul li p {
            line-height: 1.2;
            color: var(--dark-color);
            opacity: 0.8;
            font-weight: 600;
            margin-bottom: 0;
        }


/*Circle Progress*/

.progress-circle svg {
    width: 50px;
    height: 50px;
}

.progress-circle text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    font-size: 23px;
}

.circle-progress-value {
    stroke-width: 6px;
    stroke: var(--theme-color);
    stroke-linecap: round;
}

.circle-progress-circle {
    stroke-width: 8px;
    stroke: var(--white-color);
}

.circle-progress-text {
    fill: var(--theme-color);
    font-weight: 600;
}

.progress-circle.success .circle-progress-value {
    stroke: var(--success-color);
}

.progress-circle.success .circle-progress-text {
    fill: var(--success-color);
}

.progress-circle.info .circle-progress-value {
    stroke: var(--info-color);
}

.progress-circle.info .circle-progress-text {
    fill: var(--info-color);
}

.progress-circle.warning .circle-progress-value {
    stroke: var(--warning-color);
}

.progress-circle.warning .circle-progress-text {
    fill: var(--warning-color);
}

.progress-circle.danger .circle-progress-value {
    stroke: var(--danger-color);
}

.progress-circle.danger .circle-progress-text {
    fill: var(--danger-color);
}


/*Recruitment Board*/

.mi-recruitment .mi-info-card {
    border: 0;
    color: var(--white-color);
}

    .mi-recruitment .mi-info-card p {
        color: var(--white-color);
    }

.mi-recruitment .mi-nav-tabs .nav-link .mi-badge {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.mi-recruitment .mi-nav-tabs .nav-link i {
    font-size: 14px !important;
}

.mi-recruitment .mi-nav-tabs .nav-link .mi-badge {
    background: var(--dark-color);
    color: var(--white-color);
    transition: .3s;
}

.mi-recruitment .mi-nav-tabs .nav-link:hover .mi-badge,
.mi-recruitment .mi-nav-tabs .nav-link.active .mi-badge {
    background: var(--theme-color);
}

.mi-recruitment .mi-nav-tabs .nav-tabs {
    border-bottom: 1px solid var(--lightest-color);
}

.mi-card-jobs .mi-card {
    margin-bottom: 15px !important;
    box-shadow: none;
    border-style: solid;
    border-width: 2px;
    border-color: var(--lightest-color);
    border-radius: .45rem;
}

    .mi-card-jobs .mi-card.selected {
        border-color: var(--theme-color);
    }

.mi-vertical-values {
    padding: 10px;
    /* border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--light3-color);*/
    margin-bottom: 0;
}


    /*.mi-vertical-values:last-child {
border-bottom-width: 0;
}*/

    .mi-vertical-values h4 {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
        font-size: 25px;
        font-weight: 500;
        margin-bottom: 0;
    }

    .mi-vertical-values p {
        font-size: 14px;
        margin-bottom: 0;
    }

.mi-analytics .mi-candidate {
    margin-bottom: 20px;
}

    .mi-analytics .mi-candidate:last-child {
        margin-bottom: 0;
    }

.mi-analytics .mi-avatar,
.mi-analytics .progress-circle svg {
    width: 45px;
    height: 45px;
}

.mi-analytics .mi-progress {
    font-weight: 700;
}

.mi-analytics .mi-analytics-progress > div {
    margin-bottom: 10px;
}

    .mi-analytics .mi-analytics-progress > div:last-child {
        margin-bottom: 0;
    }

    .mi-analytics .mi-analytics-progress > div p {
        margin-bottom: 0;
    }

.mi-analytics-card-height {
    height: 338px;
}

.mi-recruitment .mi-recruitment-nav .mi-form-group {
    width: 280px;
}


/*Kanban Board*/

.mi-kanban {
    display: grid;
    padding: 0 20px 10px 20px;
    padding-bottom: 0;
}

    .mi-kanban .mi-kanban-board {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 10px;
    }

        .mi-kanban .mi-kanban-board .mi-board-group {
            height: 100%;
            display: flex;
            align-items: flex-start;
            padding-top: 60px;
            position: relative;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header {
                width: calc(100% - 20px);
                position: absolute;
                top: 0;
                left: 0;
                background: var(--white-color);
                color: var(--dark2-color);
                border-bottom-width: 4px;
                border-bottom-style: solid;
                padding: 0 10px;
                height: 45px;
                display: flex;
                align-items: center;
                z-index: 99;
            }

            .mi-kanban .mi-kanban-board .mi-board-group:last-child .mi-board-group-header {
                width: 100%;
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header span {
                font-weight: 700;
                font-size: 15px;
                letter-spacing: .5px;
                width: 50%;
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header a {
                width: 50%;
                margin: 0;
                padding: 0 !important;
                display: flex;
                justify-content: flex-end;
            }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header a i {
                    transition: .4s;
                }

                    .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header a i:hover {
                        transform: rotate(90deg);
                    }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header.primary {
                border-bottom-color: var(--theme-color);
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header.info {
                border-bottom-color: var(--info-color);
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header.success {
                border-bottom-color: var(--success-color);
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header.warning {
                border-bottom-color: var(--warning-color);
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group-header.danger {
                border-bottom-color: var(--danger-color);
            }

        .mi-kanban .mi-kanban-board::-webkit-scrollbar {
            width: 0px;
            /* Remove scrollbar space */
            background: transparent;
            /* Optional: just make scrollbar invisible */
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board {
            border-top-width: 4px;
            border-top-style: solid;
            border-top-color: var(--lightest-color);
            width: 280px;
            margin-right: 20px;
            /*height: 100%;*/
            background: var(--lightest-color);
            padding: 10px 0 10px 10px;
            border-radius: .45rem;
            transition: all .3s;
            /*height: calc(100vh - 170px);*/
            position: relative;
            z-index: 9;
        }

        .mi-kanban .mi-kanban-board .mi-board-group:last-child .mi-board:last-child {
            margin-right: 0;
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board.primary {
            border-top-color: var(--theme-color);
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board.info {
            border-top-color: var(--info-color);
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board.success {
            border-top-color: var(--success-color);
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board.warning {
            border-top-color: var(--warning-color);
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board.danger {
            border-top-color: var(--danger-color);
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress {
            height: 5px;
            position: absolute;
            top: -3px;
            left: 0;
            right: 0;
            border-radius: .45rem;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            background-color: var(--danger-focus-color) !important;
            box-shadow: none;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress.primary {
                background-color: var(--focus-color) !important;
            }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress.primary .mi-progress-bar {
                    background-color: var(--theme-color) !important;
                }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress.info {
                background-color: var(--info-focus-color) !important;
            }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress.info .mi-progress-bar {
                    background-color: var(--info-color) !important;
                }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress.success {
                background-color: var(--success-focus-color) !important;
            }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress.success .mi-progress-bar {
                    background-color: var(--success-color) !important;
                }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress.warning {
                background-color: var(--warning-focus-color) !important;
            }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress.warning .mi-progress-bar {
                    background-color: var(--warning-color) !important;
                }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-group .mi-board .mi-progress.danger {
            background-color: var(--danger-focus-color) !important;
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-progress.danger .mi-progress-bar {
            background-color: var(--danger-color) !important;
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-body {
            max-height: 450px;
            min-height: 30px;
            overflow-y: auto;
            scrollbar-width: none;
            border-bottom: 1px solid var(--light3-color);
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-body::-webkit-scrollbar {
                width: 0px;
                /* Remove scrollbar space */
                background: transparent;
                /* Optional: just make scrollbar invisible */
            }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-header {
            background: var(--transparent-color) !important;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            padding: 0px 10px 0 5px !important;
            height: 30px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-header .mi-badge {
                color: var(--dark-color);
                background: var(--light3-color);
                font-weight: 700;
                border-radius: 50%;
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-header > span {
                font-size: 14px;
                font-weight: 700;
                margin-right: auto;
                display: flex;
                align-items: center;
                color: var(--dark-color);
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-header > a {
                display: flex;
                align-items: center;
                transition: .3s;
            }


                /*
.mi-kanban .mi-kanban-board .mi-board-header > a:hover {
transform: rotate(90deg);
}*/

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board-header > a i {
                    font-size: 20px;
                    color: var(--dark-color);
                    /*background: var(--light3-color);*/
                    padding: 2px;
                    border-radius: 50%;
                }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-header .fa-ellipsis-h {
                cursor: pointer;
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-header button {
                width: 24px;
                height: 24px;
                padding: 1px;
                /*background: var(--light3-color);*/
                border-radius: 50%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board-header button i {
                    font-size: 20px;
                    color: var(--dark-color);
                    margin-right: 0;
                }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board-header button img {
                    width: 24px;
                    padding: 2px;
                }


        /* .mi-kanban .mi-kanban-board .mi-board-header button:hover {
background: var(--white-color);
}*/

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors {
            opacity: 0;
            position: absolute;
            top: -80px;
            right: 0;
            background: var(--lightest-color);
            width: 280px;
            height: 50px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-top-left-radius: .45rem;
            border-top-right-radius: .45rem;
            z-index: 9;
            transition: all .3s;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors.opened {
                opacity: 1;
                top: 0;
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
            }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.status {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    margin-right: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }

                    .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.status.active:after,
                    .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.status:hover:after {
                        content: '\f00c';
                        font-family: "Font Awesome 5 Free", "FontAwesome";
                        color: var(--white-color);
                        font-weight: 600;
                        font-size: 10px;
                    }

                    .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.status.primary {
                        background: var(--theme-color);
                    }

                    .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.status.info {
                        background: var(--info-color);
                    }

                    .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.status.success {
                        background: var(--success-color);
                    }

                    .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.status.warning {
                        background: var(--warning-color);
                    }

                    .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.status.danger {
                        background: var(--danger-color);
                    }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.btn-save-colors {
                    position: absolute;
                    right: 10px;
                    font-size: 15px;
                    color: var(--success-color);
                    opacity: 1;
                    font-weight: 800;
                    cursor: pointer;
                }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.btn-close-colors {
                    position: absolute;
                    right: 30px;
                    font-size: 15px;
                    color: var(--danger-color);
                    opacity: 1;
                    font-weight: 800;
                    cursor: pointer;
                }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin-bottom: 15px;
            cursor: move;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes .mi-card {
                margin-right: 10px;
                margin-bottom: 0;
                transition: .3s;
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes > .image-wrapper {
                margin: -20px -20px 10px -20px;
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes p {
                font-size: 14px;
                color: var(--text-grey-color);
                margin-bottom: 30px;
                line-height: 28px;
            }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes-sections {
            list-style-type: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 20px;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes-sections > * {
                height: 4px;
                width: 20px;
                border-radius: 10px;
                background: var(--section-color);
                margin-right: 4px;
            }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes-info {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes-info i,
            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes-info span {
                color: var(--dark-grey);
                font-size: 12px;
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes-info span {
                margin-left: 10px;
                margin-right: auto;
            }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-boxes-info img {
                border-radius: 50%;
                margin-left: 5px;
            }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board .add-card {
            /*background: var(--info-focus-color);*/
            background-image: linear-gradient(45deg, var(--transparent-color), var(--transparent-color));
            background-repeat: no-repeat;
            background-position: top;
            background-size: 0 100%;
            color: var(--light2-color);
            font-weight: 700;
            cursor: pointer;
            outline: 0;
            border-width: 2px;
            border-style: solid;
            margin-top: 10px;
            transition: all .3s;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board .add-card:hover {
                border-color: var(--white-color);
                color: var(--dark2-color);
                background-image: linear-gradient(45deg, var(--white-color), var(--white-color));
                background-size: 100% 100%;
                box-shadow: 1px 5px 13px rgb(0 0 0 / 22%);
                transform: translateY(-1px);
            }

                .mi-kanban .mi-kanban-board .mi-board-group .mi-board .add-card:hover i {
                    color: var(--dark2-color);
                    background: var(--white-color);
                    transform: rotate(90deg);
                }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board .add-card i {
                font-size: 20px;
                color: var(--white-color);
                background: var(--light2-color);
                padding: 2px;
                border-radius: 50%;
                margin-right: 10px;
                transition: .3s;
            }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-style {
            /*background: var(--white);*/
            width: 100%;
            border-radius: 5px;
            overflow: visible;
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-add .mi-board-style input {
            border: 0;
            font-weight: 700;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-add .mi-board-style input:hover,
            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-add .mi-board-style input:focus {
                border: 0;
                box-shadow: none !important;
                background: var(--transparent-color) !important;
            }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-add .mi-board-body {
            border: 0;
        }

        .mi-kanban .mi-kanban-board .mi-board-group .mi-board-style.dragging {
            border: 2px solid var(--light3-color);
            border-radius: .45rem;
            transition: .3s;
        }

            .mi-kanban .mi-kanban-board .mi-board-group .mi-board-style.dragging .mi-card {
                margin-right: 0;
                background-image: linear-gradient( 45deg, var(--white-color) 25%, var(--lightest-color) 25%, var(--lightest-color) 50%, var(--white-color) 50%, var(--white-color) 75%, var(--lightest-color) 75%, var(--lightest-color) 100%);
                background-size: 56.57px 56.57px;
            }

        .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-stage {
            width: max-content !important;
        }

        .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-item {
            width: 280px !important;
        }

        .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-nav {
            height: 0;
        }

            .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-nav button i {
                height: 40px;
                width: 40px;
                position: absolute;
                bottom: 40px !important;
                font-size: 25px;
                background: var(--lightest-color);
                color: var(--theme-color);
                box-shadow: 2px 3px 11px rgb(49 58 72 / 25%);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                cursor: pointer;
                transition: .3s;
            }

            .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-nav button .prev-slide {
                left: 20px;
            }

            .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-nav button .next-slide {
                right: 20px;
            }

            .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-nav button.disabled {
                pointer-events: none;
                opacity: 0;
            }

.mi-modal .mi-kanban {
    padding: 0;
}

    .mi-modal .mi-kanban .mi-board-group .mi-board-header {
        margin-bottom: 0;
    }

    .mi-modal .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel {
        padding: 0 20px 10px 20px;
    }

    .mi-modal .mi-kanban .mi-kanban-board .mi-board-group .mi-board {
        flex: auto;
        width: 100%;
        cursor: pointer;
    }

        .mi-modal .mi-kanban .mi-kanban-board .mi-board-group .mi-board .mi-board-colors {
            width: auto;
            padding: 3px;
            top: 0;
            border-radius: .45rem;
        }

    .mi-modal .mi-kanban .mi-kanban-board .mi-board-group {
        padding-top: 0;
        width: 100%;
    }

        .mi-modal .mi-kanban .mi-kanban-board .mi-board-group .mi-board-colors ul li.status {
            margin-right: 5px;
        }

        .mi-modal .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-nav button i {
            height: auto;
            width: auto;
            position: absolute;
            bottom: 22px !important;
            background: initial;
            color: var(--dark-color);
            box-shadow: initial;
            display: initial;
            align-items: initial;
            justify-content: initial;
            border-radius: initial;
            cursor: pointer;
            transition: .3s;
        }

        .mi-modal .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-nav button .prev-slide {
            left: 0;
        }

        .mi-modal .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-nav button .next-slide {
            right: 0;
        }

        .mi-modal .mi-kanban .mi-kanban-board .mi-board-group.owl-carousel .owl-nav button.disabled {
            pointer-events: none;
            opacity: 0.5;
        }


/*Candidate*/

.mi-common-filters {
    list-style: none;
    flex-direction: row;
    display: flex;
    margin: 0;
}

.mi-btn-group.mi-icon-svg button {
    padding: 8px 12px;
}

    .mi-btn-group.mi-icon-svg button:focus {
        box-shadow: none;
    }

.mi-doc-item {
    padding: 3px;
    cursor: pointer;
    margin-bottom: 10px;
    border-radius: .25rem;
    position: relative;
    transition: .2s;
}

    .mi-doc-item:hover {
        background: var(--lightest2-color);
    }

    .mi-doc-item .mi-actions {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: .3s;
    }

    .mi-doc-item:hover .mi-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: initial;
    }

.mi-docs-tooltip.mi-tooltip-content .mi-tooltip-body h6 {
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 500;
}

.mi-docs-tooltip.mi-tooltip-content .mi-tooltip-body p {
    line-height: 1.5;
    font-size: 13px;
    padding: 0;
}

.mi-docs-list .mi-table:not(.table-dark) thead th {
    background-color: var(--transparent-color);
    color: var(--dark-color);
}

.mi-docs-list .mi-table thead tr {
    border-bottom: 2px solid var(--lightest-color);
}

.mi-docs-list .mi-table tbody tr {
    border-bottom: 1px solid var(--lightest-color);
}

.mi-docs-list .mi-table tbody tr {
    cursor: pointer;
    transition: .3s;
}

    .mi-docs-list .mi-table tbody tr:hover {
        background: var(--lightest2-color);
    }

.mi-docs-list .mi-table td {
    font-size: 13px;
}

.mi-jquery-multiSelect input[type='checkbox']:hover:after,
input[type='checkbox']:checked:hover:after,
.mi-jquery-multiSelect input[type='checkbox']:checked:after {
    content: "✓";
}

.mi-jquery-multiSelect input[type='checkbox']:hover:after,
input[type='checkbox']:checked:hover:after,
.mi-jquery-multiSelect input[type='checkbox']:checked:after,
table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
    color: var(--white-color) !important;
}

.mi-expand-td {
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    cursor: pointer;
    transition: .4s;
    /*background-image: linear-gradient(var(--transparent-color), var(--light-color));*/
}

    .mi-expand-td:hover {
        bottom: -7px;
    }

.mi-vacancy-td,
.mi-multiple-td {
    position: relative;
}

    .mi-vacancy-td .mi-profile-expand i,
    .mi-multiple-td .mi-profile-expand i {
        padding: 2px 3px;
        font-size: 11px;
        border: 3px solid var(--white-color);
    }

    .mi-vacancy-td span.mi-badge,
    .mi-multiple-td span.mi-badge {
        float: right;
        padding: 4px 7px;
        border-radius: 30px;
        font-size: 10px;
        font-weight: 500;
    }

    .mi-vacancy-td div:first-child,
    .mi-multiple-td div:first-child {
        padding: 12px 0px 8px 0px;
        /*line-height: 1;*/
    }

    .mi-vacancy-td ul.tr-child,
    .mi-multiple-td ul.tr-child {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .mi-vacancy-td ul.tr-child li,
        .mi-multiple-td ul.tr-child li {
            border-top: 1px solid var(--white-color);
            line-height: 1;
            padding: 13px 0px;
        }

            .mi-vacancy-td a:not(:last-child),
            .mi-vacancy-td ul.tr-child li a:not(:last-child),
            .mi-multiple-td a:not(:last-child),
            .mi-multiple-td ul.tr-child li a:not(:last-child) {
                font-weight: 700;
                width: 60%;
                display: inline-block;
                margin-right: 0;
                line-height: 1;
            }

            .mi-vacancy-td span.mi-badge,
            .mi-vacancy-td ul.tr-child li span.mi-badge,
            .mi-multiple-td span.mi-badge,
            .mi-multiple-td ul.tr-child li span.mi-badge {
                float: right;
                padding: 4px 7px;
                border-radius: 30px;
                font-size: 10px;
                font-weight: 500;
                margin: 0;
            }
/*.mi-multiple-tr.two-cols .mi-profile-expand {
left: initial;
right: -13px;
}*/

.mi-folder-box {
    border-right: 1px solid var(--lightest-color);
}

    .mi-folder-box .mi-form-group .mi-form-control {
        border: 0;
        background: transparent !important;
        border-bottom: 1px solid #f5f5f5;
        border-radius: 0;
    }

        .mi-folder-box .mi-form-group .mi-form-control:focus {
            box-shadow: none !important;
        }

    .mi-folder-box .mi-form-group i {
        color: var(--light2-color);
    }

    .mi-folder-box .mi-folder-list {
        margin-bottom: 20px;
    }

        .mi-folder-box .mi-folder-list h6 {
            font-size: 14px;
            color: var(--dark-color);
        }

            .mi-folder-box .mi-folder-list h6 i {
                font-size: 13px;
                cursor: pointer;
                transition: .3s;
            }

                .mi-folder-box .mi-folder-list h6 i:hover {
                    transform: rotate(90deg);
                }

        .mi-folder-box .mi-folder-list ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .mi-folder-box .mi-folder-list ul li {
                border-bottom: 1px solid var(--lightest-color);
                font-weight: 600;
                cursor: pointer;
                position: relative;
                transition: .3s;
            }

                .mi-folder-box .mi-folder-list ul li .mi-actions {
                    opacity: 0;
                    visibility: hidden;
                    pointer-events: none;
                    transition: .3s;
                }

                .mi-folder-box .mi-folder-list ul li:hover .mi-actions {
                    opacity: 1;
                    visibility: visible;
                    pointer-events: initial;
                }

                .mi-folder-box .mi-folder-list ul li:last-child {
                    border-bottom: 0;
                }

                .mi-folder-box .mi-folder-list ul li.active,
                .mi-folder-box .mi-folder-list ul li:hover {
                    background: var(--lightest-color);
                }

                .mi-folder-box .mi-folder-list ul li:before {
                    content: "\f07b";
                    font-family: "Font Awesome 5 Free", "FontAwesome";
                    padding: 0 10px;
                    font-weight: 500;
                }

.mi-filter-box {
    border-right: 1px solid var(--lightest-color);
}

    .mi-filter-box .mi-form-group .mi-form-control {
        border: 0;
        background: transparent !important;
        border-bottom: 1px solid #f5f5f5;
        border-radius: 0;
    }

        .mi-filter-box .mi-form-group .mi-form-control:focus {
            box-shadow: none !important;
        }

    .mi-filter-box .mi-form-group i {
        color: var(--light2-color);
    }

    .mi-filter-box .mi-side-filter-list {
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .mi-filter-box .mi-side-filter-list h6 {
            font-size: 14px;
            color: var(--dark-color);
        }

            .mi-filter-box .mi-side-filter-list h6 i {
                font-size: 13px;
                cursor: pointer;
                transition: .3s;
            }

        .mi-filter-box .mi-side-filter-list ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .mi-filter-box .mi-side-filter-list ul li {
                padding: 2px 0;
            }

                .mi-filter-box .mi-side-filter-list ul li:last-child {
                    border-bottom: 0;
                }

.mi-side-filter-list ul li .mi-cbrb .state .icon {
    width: 18px;
}

.mi-side-filter-list ul li .mi-cbrb .state label {
    text-indent: 1.8em;
}

    .mi-side-filter-list ul li .mi-cbrb .state label:after,
    .mi-side-filter-list ul li .mi-cbrb .state label:before {
        width: 18px;
        height: 18px;
        bottom: -1px;
    }

.mi-side-filter-list ul li .mi-cbrb label {
    font-weight: 600;
}

.mi-side-filter-list ul li .count {
    font-size: 12px;
    font-weight: 700;
    background: var(--light-focus-color);
    color: var(--dark-color);
    width: 20px;
    height: 20px;
    border-radius: .25rem;
    padding: 2px 4px;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mi-side-filter-list ul li.active .count {
    background: var(--info-focus-color);
    color: var(--info-color);
}


/*Careers Page*/

.mi-career-jobs {
    padding: 30px 25px;
}

    .mi-career-jobs > .row:first-child h4 {
        color: var(--dark2-color);
        font-size: 21px;
        margin-bottom: 0;
        display: flex;
        align-items: center;
    }

    .mi-career-jobs .mi-card,
    .mi-career-job-detail .mi-card {
        box-shadow: 0 0 0 0.12rem var(--lightest-color) !important;
        margin-bottom: 15px;
        border-radius: .45rem;
    }

        .mi-career-jobs .mi-card:hover {
            box-shadow: 0 0 0 0.12rem var(--focus-color) !important;
        }

        .mi-career-jobs .mi-card .mi-card-body {
            padding: 20px;
            padding-bottom: 10px;
        }

            .mi-career-jobs .mi-card .mi-card-body h6 {
                font-size: 16px;
                margin-bottom: 10px;
                font-weight: 700;
                color: var(--dark2-color);
            }

            .mi-career-jobs .mi-card .mi-card-body p {
                font-size: 14px;
                line-height: 1.5;
                margin-bottom: 10px;
            }

            .mi-career-jobs .mi-card .mi-card-body .mi-badge {
                background: var(--light3-color) !important;
                color: var(--dark2-color) !important;
                font-weight: 700;
                border-radius: .25rem;
            }

        .mi-career-job-detail .mi-card .mi-card-footer,
        .mi-career-jobs .mi-card .mi-card-footer {
            border-bottom-left-radius: .45rem;
            border-bottom-right-radius: .45rem;
        }

.mi-career-job-detail {
    padding: 20px;
}

    .mi-career-job-detail .mi-card .mi-card-footer {
        padding: 15px;
    }

.mi-tech-progress {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .mi-tech-progress li {
        display: flex;
        align-items: center;
    }

        .mi-tech-progress li span {
            flex: 1;
            font-weight: 600;
        }

        .mi-tech-progress li > div {
            flex: 1;
        }

.mi-soft-skills .mi-badge {
    background: var(--success-focus2-color) !important;
    color: var(--success-color) !important;
    font-weight: 700;
    border-radius: .25rem;
}

.mi-skills-desc {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .mi-skills-desc li {
        list-style: none;
        margin: 0;
        padding: 0 21px;
        text-indent: -22px;
    }

        .mi-skills-desc li:before {
            content: "\f30b";
            font-family: "Font Awesome 5 Free", "FontAwesome";
            font-weight: 700;
            padding-right: 10px;
        }


/*Create Role*/

.mi-admin-tags {
    min-height: 95px;
    max-height: 95px;
    overflow-x: hidden;
}

.mi-view-page .mi-history .mi-card-body {
    max-height: 431px;
    overflow-x: hidden;
}
/*
.mi-view-page .mi-tree .table-responsive {
max-height: calc(100vh - 431px) !important;
} */


/*Roles Tree*/

.mi-tree {
    padding: 5px 10px 10px;
}

    /* .mi-tree .table-responsive {
max-height: 400px !important;
height: auto;
margin-bottom: 0 !important;
} */

    .mi-tree .mi-card-toolbar .mi-selectgroup .mi-selectgroup-item {
        margin-bottom: 0 !important;
    }

    .mi-tree .mi-card .mi-card-header {
        padding: 7px;
    }

    .mi-tree .mi-card-body {
        display: none;
        padding: 5px 10px !important;
    }

    .mi-tree ul {
        /* margin: 4px auto; */
        margin-left: 6px;
        /*border-left: 1px dashed #dfdfdf;*/
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .mi-tree li {
        padding: 5px;
        cursor: pointer;
        vertical-align: middle;
        list-style: none;
    }

    .mi-tree .mi-cbrb .state label.mi-tree-head {
        color: var(--dark2-color);
        font-weight: 700;
    }

    .mi-tree .mi-cbrb .state label {
        color: var(--dark2-color);
        margin-bottom: -4px;
        font-size: 13px;
    }

    /* .mi-tree li .mi-cbrb .state label:before {
border-color: var(--dark-color) !important;
} */

    .mi-tree label {
        cursor: pointer;
    }

    .mi-tree input[type=checkbox] {
        margin: -2px 6px 0 0px;
    }

    .mi-tree .mi-total {
        display: inline-flex;
        width: 20px;
        height: 20px;
        align-items: center;
        justify-content: center;
        text-indent: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
        font-weight: 500;
    }

    .mi-tree .mi-accordion-roles.mi-accordion .mi-accordion-header > i {
        position: absolute;
        top: 17px;
        left: 20px;
        right: initial;
    }

    .mi-tree .mi-accordion-roles .mi-role-actions {
        position: absolute;
        top: 6px;
        right: 7px;
    }

    .mi-tree .mi-accordion-roles.mi-accordion {
        border: 1px solid var(--light3-color);
        border-radius: .25rem;
    }

        .mi-tree .mi-accordion-roles.mi-accordion .mi-accordion-header {
            padding-left: 50px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

            .mi-tree .mi-accordion-roles.mi-accordion .mi-accordion-header:hover {
                background-color: var(--lightest-color);
            }

            .mi-tree .mi-accordion-roles.mi-accordion .mi-accordion-header[aria-expanded="true"] {
                box-shadow: none !important;
                background-color: var(--lightest-color);
                color: var(--dark-color);
            }

    .mi-tree .mi-accordion-roles .mi-role-actions .mi-selectgroup-item {
        margin-right: 2px;
    }

    .mi-tree .table th {
        font-size: 12px;
    }

    .mi-tree .table tbody .tr-child {
        background: var(--lightest2-color);
    }

        .mi-tree .table tbody .tr-child td:first-child {
            position: relative;
        }

            .mi-tree .table tbody .tr-child td:first-child:before {
                content: "";
                width: 2px;
                height: 23px;
                background: var(--light-color);
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
            }

        .mi-tree .table tbody .tr-child.has-child td:first-child:before {
            content: "";
            width: 0;
        }

        .mi-tree .table tbody .tr-child td:first-child + td {
            padding-left: 30px;
        }

    .mi-tree .table tbody tr {
        border-bottom: 1px solid var(--light3-color);
    }

        .mi-tree .table tbody tr:last-child {
            border-bottom: 0;
        }

    .mi-tree .mi-collapse-tr {
        cursor: pointer;
    }


    /*table childs tree*/

    .mi-tree .mi-cbrb .state label:before {
        background-color: var(--lightest-color);
        z-index: 9;
    }

    .mi-tree .mi-cbrb .state label:after,
    .mi-tree .mi-cbrb .state label:before {
        border-width: 2px;
        z-index: 9;
    }

    .mi-tree .mi-cbrb input:checked + .state .icon {
        z-index: 99;
    }

    .mi-tree .mi-cbrb.child:before {
        content: "";
        width: 2px;
        height: 44px;
        background: var(--light-color);
        position: absolute;
        left: -23px;
        top: -36px;
    }

    .mi-tree .mi-cbrb.child:after {
        content: "";
        width: 23px;
        height: 2px;
        background: var(--light-color);
        position: absolute;
        top: 2px;
        bottom: 0;
        margin: auto;
    }

    .mi-tree .mi-cbrb.child:after {
        left: -23px;
    }

    .mi-tree .mi-cbrb.child-1 {
        margin-left: 10px;
    }

    .mi-tree .mi-cbrb.child-2 {
        margin-left: 40px;
    }

    .mi-tree .mi-cbrb.child-3 {
        margin-left: 70px;
    }

    .mi-tree .mi-cbrb.child-4 {
        margin-left: 100px;
    }

    .mi-tree .mi-cbrb.child-5 {
        margin-left: 130px;
    }

    .mi-tree .mi-cbrb.child-6 {
        margin-left: 160px;
    }

    .mi-tree .mi-cbrb.child-7 {
        margin-left: 190px;
    }


/*Form Builder*/


/*.mi-form-builder .mi-builder,*/


/*.mi-form-builder .mi-builder-area,*/

.mi-preview-form {
    padding: 0 !important;
}

    .mi-preview-form .mi-form-builder .mi-elements {
        max-height: 100% !important;
        border-radius: .85rem;
    }

.mi-form-builder .mi-elements,
.mi-form-builder .mi-form-settings,
.mi-form-builder .mi-page-settings {
    max-height: calc(100vh - 210px) !important;
    overflow: auto;
}

.mi-form-builder .mi-settings-body {
    max-height: calc(100vh - 260px) !important;
    overflow: auto;
    padding: 15px;
}

.mi-form-builder .tab-pane > .mi-element-settings {
    overflow-x: hidden;
    padding: 15px;
    max-height: calc(100vh - 306px) !important;
}

.mi-form-builder .mi-element-settings {
    overflow-x: hidden;
    padding: 15px;
    max-height: calc(100vh - 260px) !important;
}

.mi-form-builder .mi-builder .mi-items {
    max-height: calc(100vh - 357px) !important;
    overflow: auto;
    margin: 0 -10px;
    padding: 2px 8px 2px 13px;
    margin-bottom: -10px;
    padding-bottom: 10px;
}


/*Add Margin bottom because color-profile scrollmacosx*/


/* .mi-form-builder .mi-elements .mi-element-preview,
.mi-form-builder .mi-builder .mi-items {
margin-bottom: 30px;
}*/

.mi-builder-popup {
    background: var(--transparent-color);
    box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1);
    padding: 0;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99999;
    transition: all .4s;
}

    .mi-builder-popup.right {
        bottom: -200%;
    }

        .mi-builder-popup.right.opened {
            bottom: 0;
            top: 0;
            margin: auto;
            height: fit-content;
        }

.mi-builder-overlay {
    background-color: var(--dark2-color);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
    opacity: 0;
    transition: all .3s;
}

    .mi-builder-overlay.show {
        opacity: .6;
        z-index: 9999;
    }

.mi-form-builder {
    margin-bottom: 0;
}

.mi-form-list .dropdown .dropdown-item,
.mi-form-list .dropleft .dropdown-item {
    padding: 0.65rem 1rem 0.45rem 1rem;
}

    .mi-form-list .dropdown .dropdown-item:first-child,
    .mi-form-list .dropleft .dropdown-item:first-child {
        padding-top: 0.75rem;
    }

    .mi-form-list .dropdown .dropdown-item:last-child,
    .mi-form-list .dropleft .dropdown-item:first-child {
        padding-bottom: 0.75rem;
    }

.mi-form-list .dropdown .dropdown-divider {
    margin: .25rem 0;
}

.mi-form-builder .mi-builder-area > div:first-child,
.mi-form-builder .mi-builder-area > div:last-child {
    padding: 0;
}

.mi-form-builder .mi-builder-area .mi-talent-cards .mi-card .mi-card-body {
    padding: 15px;
    padding-bottom: 5px;
}

.mi-position-header .mi-form-builder-actions,
.mi-form-builder .mi-form-builder-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .mi-form-builder .mi-form-builder-actions button {
        margin-right: 5px;
    }

    .mi-position-header .mi-form-builder-actions hr {
        display: inline-block;
        width: 1px;
        height: 17px;
        margin: 0;
        padding-bottom: 0;
        background: var(--light-color);
        letter-spacing: 0.4px;
        margin-left: 5px;
        margin-right: 10px;
    }

.mi-form-builder .mi-builder-area .mi-elements {
    padding: 15px;
    background: var(--lightest-color);
    height: 100%;
    border-bottom-left-radius: .65rem;
}

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview {
        background: var(--white-color);
        border-radius: .45rem;
        box-shadow: 0 0.46875rem 2.1875rem rgb(90 97 105 / 10%), 0 0.9375rem 1.40625rem rgb(90 97 105 / 10%), 0 0.25rem 0.53125rem rgb(90 97 105 / 12%), 0 0.125rem 0.1875rem rgb(90 97 105 / 10%);
        padding: 10px;
        margin-bottom: 15px;
    }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview:last-child {
            margin-bottom: 0;
        }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header {
            background: var(--lightest-color);
            margin-top: -10px;
            border-radius: 0.45rem;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            align-items: center;
            margin-bottom: 10px;
            border-bottom: 2px solid var(--light3-color);
            padding: 10px;
        }

            .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles.mi-hide-title .description {
                display: none;
                transition: .3s;
            }

            .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles.mi-hide-title {
                margin-bottom: 10px;
                transition: .3s;
            }

            .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles {
                margin-bottom: 25px;
                padding-top: 10px;
                padding-left: 0;
            }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li .step .description {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 70%;
                    text-align: center;
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li .step,
                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li .step .line,
                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li .step .description,
                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li .step .indicator {
                    cursor: pointer;
                    transition: .2s;
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li.finished > .step .indicator {
                    background-color: var(--dark-color);
                    border-color: var(--dark-color);
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li.finished > .step .line {
                    background-color: var(--dark-color);
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li.active > .step .indicator {
                    border-color: var(--dark-color);
                    color: var(--dark-color);
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li.active > .step .description,
                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li.finished > .step .description {
                    color: var(--dark-color);
                    transition: .3s;
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li .step:hover .indicator {
                    transform: scale(1.1);
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li .step:hover .description {
                    letter-spacing: 1px;
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li .step:hover .indicator {
                    border-color: var(--dark-hover-color);
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li .step:hover .description {
                    color: var(--dark-hover-color);
                }

                .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-header .mi-step-circles li.finished .step:hover .indicator {
                    background-color: var(--dark-hover-color);
                }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-body {
            /*padding: 10px 20px 20px;*/
            padding: 10px;
        }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-footer {
            background: var(--lightest-color);
            margin: 10px -10px -10px;
            padding-top: 10px;
            border-bottom-left-radius: .45rem;
            border-bottom-right-radius: .45rem;
            padding: 15px 30px;
            cursor: pointer;
            position: relative;
            transition: .3s;
        }

            .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-footer:hover {
                background: var(--light3-color);
            }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-body .cols:last-child .mi-card {
            margin-bottom: 0 !important;
        }

    .mi-form-builder .mi-builder-area .mi-elements .mi-new-section,
    .mi-form-builder .mi-builder-area .mi-elements .mi-new-element {
        width: 100%;
        text-align: center;
        position: relative;
        margin: 20px 0 !important;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-new-section {
        margin-bottom: 0 !important;
    }

        .mi-form-builder .mi-builder-area .mi-elements .mi-new-section h6,
        .mi-form-builder .mi-builder-area .mi-elements .mi-new-element h6 {
            position: relative;
            padding: 7px 10px;
            margin-bottom: 0;
            background: var(--lightest-color);
            color: var(--light2-color);
            border: 1px solid var(--light-color);
            border-radius: .25rem;
            display: inline-flex;
            align-items: center;
            z-index: 1;
            font-weight: 600;
            font-size: 12px;
            cursor: pointer;
            transition: .3s;
        }

        .mi-form-builder .mi-builder-area .mi-elements .mi-new-section h6,
        .mi-form-builder .mi-builder-area .mi-elements .mi-new-element h6 {
            background: var(--white-color);
            color: var(--dark-color);
        }

            .mi-form-builder .mi-builder-area .mi-elements .mi-new-section h6:hover,
            .mi-form-builder .mi-builder-area .mi-elements .mi-new-element h6:hover {
                background: var(--lightest-color);
            }

        .mi-form-builder .mi-builder-area .mi-elements .mi-new-section::after,
        .mi-form-builder .mi-builder-area .mi-elements .mi-new-element::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 1px;
            background: var(--light-color);
            z-index: 0;
        }

        .mi-form-builder .mi-builder-area .mi-elements .mi-new-section h6 i,
        .mi-form-builder .mi-builder-area .mi-elements .mi-new-element h6 i {
            font-size: 15px;
        }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item {
        padding: 0 !important;
    }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card {
            margin-bottom: 0 !important;
        }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-header input {
            background: var(--transparent-color);
            border: 0;
            font-size: 14px;
            font-weight: 700;
            color: var(--dark2-color);
            width: 80%;
        }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-header .mi-element-section-actions {
            display: flex;
            align-items: center;
            opacity: 1;
        }

            .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-header .mi-element-section-actions .mi-form-control {
                width: 40px;
                height: 20px;
                padding: 0;
                border: 0;
                margin: 0;
                display: inline-flex;
                margin-right: 0;
                font-size: 11px;
                box-shadow: 0 0 0 0.08rem var(--light-color) !important;
                font-weight: 700;
                text-align: center;
                border-radius: 0;
                border-top-left-radius: .15rem;
                border-bottom-left-radius: .15rem;
            }

            .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-header .mi-element-section-actions a {
                background: var(--lightest-color);
                margin-right: -3px;
                display: inline-flex;
                padding: 4px;
                font-size: 12px;
                border-radius: 0;
                box-shadow: 0 0 0 0.08rem var(--light-color) !important;
                width: 24px;
                height: 20px;
                justify-content: center;
            }

            .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-header .mi-element-section-actions .mi-remove-section-column {
                margin-right: 2px;
                border-radius: 0;
                width: 28px;
                cursor: pointer;
            }

            .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-header .mi-element-section-actions .mi-add-section-column {
                border-top-right-radius: .15rem;
                border-bottom-right-radius: .15rem;
                margin-right: 10px;
                width: 26px;
                cursor: pointer;
            }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-form-group {
            transition: .3s;
        }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-editable-mode,
        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-invalid-mode {
            border: 1px solid var(--info-color);
            border-radius: .25rem;
            padding: 5px;
            opacity: 0.7;
            pointer-events: none;
            transition: .3s;
        }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-invalid-mode {
            opacity: 1;
            pointer-events: initial;
        }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-footer.mi-editable-mode {
        border: 1px solid var(--info-color);
        border-radius: .45rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        opacity: 0.7;
        pointer-events: none;
        transition: .3s;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-preview .mi-element-footer .mi-editable-text,
    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-editable-text,
    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-invalid-text {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        background: var(--info-color);
        color: var(--white-color);
        font-size: 9px;
        align-items: center;
        padding: 2px 8px;
        border-bottom-left-radius: .25rem;
        z-index: 9;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-invalid-mode {
        border: 1px solid var(--danger-color);
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-invalid-text {
        background: var(--danger-color);
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-body > div {
        margin-bottom: 10px;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-body .mi-form-group {
        position: relative;
        margin-bottom: 10px;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-body .row {
        margin-left: -8px;
        margin-right: -8px;
    }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-body .row > div {
            padding-left: .5rem;
            padding-right: .5rem;
        }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .cols {
        padding: .5rem;
        cursor: move;
        transition: .2s;
    }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .cols .mi-form-group {
            margin-bottom: 0 !important;
        }

        .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .cols:hover {
            border-radius: .25rem;
            box-shadow: 1px 0px 13px var(--light-color);
        }

            .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .cols:hover .mi-form-group > .mi-element-actions {
                /*display: block;*/
                display: flex;
                opacity: 1;
                z-index: 9;
                transition: .3s;
            }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-actions {
        display: none;
        opacity: 0;
        position: absolute;
        top: -1px;
        right: 0;
    }

    .mi-form-builder .mi-builder-area .mi-elements .row-elements.row-section .mi-element-actions {
        display: none !important;
        opacity: 0 !important;
    }

    .mi-form-builder .mi-builder-area .mi-elements .row-elements.row-section .cols:hover .mi-form-group > .mi-element-actions {
        /*display: block;*/
        display: flex !important;
        opacity: 1 !important;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .cols .mi-form-group {
        position: relative;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-actions .mi-form-control,
    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-section-actions .mi-form-control {
        width: 40px;
        height: 20px;
        padding: 0;
        border: 0;
        margin: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: -2px;
        font-size: 11px;
        box-shadow: 0 0 0 0.08rem var(--light-color) !important;
        font-weight: 700;
        text-align: center;
        border-radius: 0;
        border-top-left-radius: .15rem;
        border-bottom-left-radius: .15rem;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-section-actions .mi-form-control {
        margin-right: 0;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-actions a {
        background: var(--lightest-color);
        /* margin-right: -3px; */
        display: inline-flex;
        padding: 4px;
        font-size: 12px;
        border-radius: 0;
        box-shadow: 0 0 0 0.08rem var(--light-color) !important;
        width: 30px;
        height: 20px;
        justify-content: center;
        cursor: pointer;
    }


    /* .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-body .mi-element-actions a:first-child {
    background: var(--lightest-color);
    margin-right: 5px;
    display: inline-flex;
    padding: 4px;
    font-size: 12px;
    border-radius: .15rem;
    box-shadow: 0 0 0 0.08rem var(--light-color) !important;
    width: 20px;
    height: 20px;
    justify-content: center;
    }*/

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-actions .mi-remove-column {
        /* margin-right: -3px; */
        border-radius: 0;
        /*width: 23px;*/
        width: 34px;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-actions .mi-add-column {
        border-top-right-radius: .15rem;
        border-bottom-right-radius: .15rem;
        margin-right: 10px;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-actions .mi-edit-element,
    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-actions .mi-edit-table {
        border-top-left-radius: .15rem;
        border-bottom-left-radius: .15rem;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-actions .mi-delete-element {
        border-top-right-radius: .15rem;
        border-bottom-right-radius: .15rem;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item.row-elements .mi-element-actions a:last-child {
        background: var(--danger-color);
        color: var(--white-color);
        box-shadow: 0 0 0 0.08rem var(--danger-hover-color) !important;
        margin-right: 2px;
        width: 23px;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-card-body > div:not(:first-child) {
        margin-bottom: 0 !important;
    }

    .mi-form-builder .mi-builder-area .mi-elements .mi-element-item .mi-element-drop {
        border: 2px dashed var(--light2-color);
        background: var(--lightest-color);
        color: var(--light2-color);
        padding: 20px;
        border-radius: .25rem;
        text-align: center;
        font-weight: 700;
    }


/*.row [class*='col-'] {
    transition: all 0.3s ease-in-out;
    }*/

.mi-form-builder .mi-builder-area .mi-builder,
.mi-form-builder .mi-builder-area .mi-form-settings,
.mi-form-builder .mi-builder-area .mi-page-settings,
.mi-form-builder .mi-builder-area .mi-builder-settings {
    border-left: 1px solid var(--light3-color);
    height: 100%;
}

.mi-form-builder .mi-builder-area .mi-builder {
    padding: 15px;
}

    .mi-form-builder .mi-builder-area .mi-builder > .mi-btn-group {
        margin: 0;
        width: 70%;
        margin-right: 5px;
    }

    .mi-form-builder .mi-builder-area .mi-builder > .mi-btn {
        width: 27%;
        margin: 0;
        color: var(--white-color) !important;
        font-weight: 600;
        font-size: 13px;
        box-shadow: none;
    }

    .mi-form-builder .mi-builder-area .mi-builder > .mi-btn-group .mi-btn {
        font-size: 13px;
        font-weight: 600;
        box-shadow: none;
        flex: 1;
        color: var(--dark-color);
    }

        .mi-form-builder .mi-builder-area .mi-builder > .mi-btn-group .mi-btn.active {
            background-color: var(--lightest-color);
            border: 1px solid var(--light2-color);
        }

    .mi-form-builder .mi-builder-area .mi-builder > .mi-btn-group .mi-btn {
        background-color: var(--white-color);
        border: 1px solid var(--light-color) !important;
    }

        .mi-form-builder .mi-builder-area .mi-builder > .mi-btn-group .mi-btn:not(:first-child) {
            border-left: 0 !important;
        }

        .mi-form-builder .mi-builder-area .mi-builder > .mi-btn-group .mi-btn:hover {
            background-color: var(--light3-color) !important;
        }

    .mi-form-builder .mi-builder-area .mi-builder .nav-tabs .nav-item {
        flex: 1;
        text-align: center;
        font-weight: 700;
    }

.mi-builder-area .mi-builder .mi-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .mi-builder-area .mi-builder .mi-items ul li {
        display: flex;
        align-items: center;
        padding: 10px;
        cursor: grab;
        transition: .3s;
    }

        .mi-builder-area .mi-builder .mi-items ul li:hover {
            /*background: var(--lightest-color);*/
            border-radius: .25rem;
            box-shadow: 0 0 0 0.12rem var(--focus-color) !important;
        }

        .mi-builder-area .mi-builder .mi-items ul li > i:first-child {
            font-size: 18px;
            color: var(--dark-color);
            margin-right: 10px;
        }

        .mi-builder-area .mi-builder .mi-items ul li > i:not(:first-child) {
            padding: 7px;
            background: var(--lightest-color);
            border-radius: .25rem;
            border: 1px solid var(--light3-color);
            font-size: 21px;
        }

        .mi-builder-area .mi-builder .mi-items ul li .desc {
            display: block;
            margin-left: 15px;
        }

            .mi-builder-area .mi-builder .mi-items ul li .desc h6 {
                margin-bottom: 5px;
                font-size: 15px;
                color: var(--dark2-color);
            }

            .mi-builder-area .mi-builder .mi-items ul li .desc p {
                margin-bottom: 0;
                line-height: 1.5;
                font-size: 13px;
                color: var(--dark-color);
            }

.mi-panel-area .mi-btn-back i {
    cursor: pointer;
    margin-right: 5px;
}

.mi-panel-area .mi-btn-back {
    background: var(--lightest-color);
    padding: 15px;
    /*margin: -15px;
margin-bottom: 15px;*/
    border-bottom: 1px solid var(--light3-color);
}

    .mi-panel-area .mi-btn-back h6 {
        margin: 0;
    }

.mi-form-builder .mi-builder-area .mi-builder-settings .mi-form-group {
    width: 100%;
}

.mi-form-builder .mi-builder-area .mi-builder-settings .nav-tabs .nav-item {
    flex: 1;
    text-align: center;
    font-weight: 700;
}

.mi-form-saved {
    background: var(--success-focus2-color);
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
    padding: 2px 10px;
    border-radius: .65rem;
    font-weight: 400;
    color: var(--success-color);
    margin-right: 10px;
}

.mi-form-saving {
    display: none;
    background: var(--lightest-color);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: .65rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-right: 10px;
}

.mi-form-builder .mi-builder-settings .mi-cols ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.mi-form-builder .mi-builder-settings .mi-cols li {
    border: 1px solid var(--light3-color);
    font-size: 10px;
    font-weight: 600;
    flex: 1;
    text-align: center;
    height: 28px;
    width: 28px;
}

    .mi-form-builder .mi-builder-settings .mi-cols li:not(:last-child) {
        border-right: 0;
    }

.mi-form-builder .mi-builder .mi-builder-headings {
    font-size: 14px;
    background: var(--success-focus2-color);
    color: var(--success-hover-color);
    padding: 10px;
    margin: 0 -15px 10px;
}

.mi-form-builder .mi-builder-area .mi-table {
    /*width: auto;
max-width: calc(100% - 20px);*/
    margin-bottom: 0;
}

    .mi-form-builder .mi-builder-area .mi-table thead th input {
        background: var(--dark2-color) !important;
        color: var(--white-color) !important;
        font-weight: 700;
        font-size: 13px;
        border: 0;
        width: 80%;
    }

.mi-form-builder .mi-builder-area .btn-add-row {
    border-radius: 50%;
    margin-top: 30px;
    font-size: 13px;
    cursor: pointer;
    transition: .3s;
    background: var(--lightest-color);
    color: var(--dark2-color);
    padding: 10px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

    .mi-form-builder .mi-builder-area .btn-add-row:hover {
        background: var(--light-color);
    }

    .mi-form-builder .mi-builder-area .btn-add-row i {
        font-size: 10px;
    }

.mi-form-builder .mi-builder-area .col-th {
    position: relative;
}

    .mi-form-builder .mi-builder-area .col-th .dropdown {
        position: absolute;
        top: 7px;
        right: 10px;
    }

.mi-form-builder .mi-builder-area .mi-accordion-header {
    padding: 0;
    display: flex;
    align-items: center;
}

.mi-form-builder .mi-builder-area .mi-accordion .mi-accordion-header[aria-expanded="true"] {
    background-color: var(--lightest-color);
    box-shadow: none !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid var(--light3-color);
    border-bottom: 0;
}

.mi-form-builder .mi-builder-area .mi-accordion-header:hover {
    background: var(--lightest-color);
}

.mi-form-builder .mi-builder-area .mi-accordion-header h6 {
    width: 60%;
    font-weight: 700;
    font-size: 13px;
    border: 0 !important;
    color: var(--dark-color) !important;
    background-color: var(--lightest-color) !important;
    border-color: var(--lightest-color) !important;
    margin: 0;
    padding: 8px 10px;
}

/* .mi-form-builder .mi-builder-area .mi-accordion-header input:hover {
} */

.mi-form-builder .mi-builder-area .mi-accordion-header input:focus {
    box-shadow: none !important;
    background: var(--lightest-color) !important;
}

.mi-form-builder .mi-builder-area .mi-accordion-toolbar {
    position: initial;
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    height: 31px;
}

    .mi-form-builder .mi-builder-area .mi-accordion-toolbar .mi-toggle {
        margin-top: -5px;
    }

    .mi-form-builder .mi-builder-area .mi-accordion-toolbar a:not(.dropdown-item) {
        font-size: 12px;
        margin: 0;
    }

.mi-form-builder .mi-builder-area .mi-accordion-body {
    border: 1px solid var(--light3-color);
    border-radius: .25rem;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.mi-form-builder .mi-builder-area .mi-accordion-parent > .mi-accordion-body {
    padding: 10px 10px 0;
}

.mi-form-builder .mi-builder-area .mi-accordion-header .col-count {
    padding: 0 10px;
    height: 30px;
    align-items: center;
    display: flex;
    background: var(--light3-color);
    color: var(--dark-color);
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    font-weight: 800;
}

.mi-form-builder .mi-builder-area .row-elements .mi-table th {
    /*max-width: 200px !important;*/
    min-width: 60px !important;
    white-space: pre;
}

.mi-form-builder .mi-builder-area .row-elements .mi-table-multi-header tr:not(:first-child) th {
    border-radius: 0;
}

.mi-form-builder .mi-builder-area .row-elements .mi-table-multi-header tr:not(:last-child) th {
    border-bottom: 2px solid var(--dark-color);
}

.mi-form-builder .mi-builder-area .row-elements .mi-table-multi-header th:not(:last-child) {
    border-right: 2px solid var(--dark-color);
}

.mi-form-builder .mi-builder-area .row-elements .mi-table-fixed-cols thead th:first-child,
.mi-form-builder .mi-builder-area .row-elements .mi-table-fixed-cols tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 11;
    border-radius: 0;
}

.mi-form-builder .mi-builder-area .row-elements .mi-table-fixed-cols thead th:first-child {
    background-color: #3d4652 !important;
}

.mi-form-builder .mi-builder-area .row-elements .mi-table-fixed-cols tbody td:first-child {
    background-color: var(--light3-color) !important;
}

    .mi-form-builder .mi-builder-area .row-elements .mi-table-fixed-cols tbody td:first-child input {
        background-color: var(--light3-color) !important;
    }


/*Checkbox Settings*/

.mi-form-builder .mi-builder-area .mi-checkbox-element .mi-cbrb,
.mi-form-builder .mi-builder-area .mi-radio-element .mi-cbrb {
    display: block;
    margin: 5px 10px 10px 0;
}

.mi-form-builder .mi-builder-settings .mi-select2 {
    margin-top: 2px;
}

.mi-form-builder .mi-builder-settings .mi-checkbox-edit .mi-form-group {
    margin-bottom: 5px;
}


/*Form Setting*/

.mi-form-builder .mi-form-settings .mi-header-style {
    background: var(--lightest-color);
    border-radius: .25rem;
}

.mi-form-builder .mi-form-settings .mi-header-style {
    background: var(--lightest-color);
    border: 1px solid var(--light3-color);
    border-radius: .25rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

    .mi-form-builder .mi-form-settings .mi-header-style > .mi-cbrb {
        margin-left: 15px;
        padding-right: 10px;
        margin-right: 0;
    }

    .mi-form-builder .mi-form-settings .mi-header-style > .mi-header-item {
        width: 100%;
        padding: 6px 10px;
        border-left: 1px solid var(--light3-color);
        display: flex;
        align-items: center;
    }

        .mi-form-builder .mi-form-settings .mi-header-style > .mi-header-item label {
            margin: 0;
            font-weight: 600;
        }

        .mi-form-builder .mi-form-settings .mi-header-style > .mi-header-item i {
            font-size: 22px;
            display: flex;
        }

.mi-form-builder .mi-form-settings .mi-footer-settings .mi-talent-cards {
    padding: 0 !important;
    margin: 0 -8px;
    margin-top: 10px;
}

    .mi-form-builder .mi-form-settings .mi-footer-settings .mi-talent-cards .mi-card {
        margin-bottom: 0 !important;
    }

    .mi-form-builder .mi-form-settings .mi-footer-settings .mi-talent-cards .mi-card-header input {
        border: 0;
        font-size: 13px;
        font-weight: 700;
        padding: 5px 0;
    }

        .mi-form-builder .mi-form-settings .mi-footer-settings .mi-talent-cards .mi-card-header input:focus {
            box-shadow: none !important;
            background: var(--lightest-color) !important;
        }

.mi-form-builder .mi-footer-settings .mi-talent-cards,
.mi-form-builder .mi-button-settings .mi-talent-cards {
    padding: 0 !important;
    margin-top: 10px;
}

    .mi-form-builder .mi-footer-settings .mi-talent-cards .mi-card-header,
    .mi-form-builder .mi-button-settings .mi-talent-cards .mi-card-header {
        padding-left: 0;
    }

        .mi-form-builder .mi-footer-settings .mi-talent-cards .mi-card-header input,
        .mi-form-builder .mi-button-settings .mi-talent-cards .mi-card-header input {
            border: 0;
            border-radius: 0;
            margin-right: 10px;
            border-top-left-radius: .25rem;
        }

    .mi-form-builder .mi-footer-settings .mi-talent-cards .mi-card-body,
    .mi-form-builder .mi-button-settings .mi-talent-cards .mi-card-body {
        padding: 10px !important;
    }

        .mi-form-builder .mi-footer-settings .mi-talent-cards .mi-card-body .mi-slct-btn-icon i > span,
        .mi-form-builder .mi-button-settings .mi-talent-cards .mi-card-body .mi-slct-btn-icon i > span {
            display: none !important;
        }

        .mi-form-builder .mi-footer-settings .mi-talent-cards .mi-card-body .mi-slct-btn-icon i,
        .mi-form-builder .mi-button-settings .mi-talent-cards .mi-card-body .mi-slct-btn-icon i {
            font-size: 15px;
            margin: 4px;
            cursor: pointer;
            transition: .2s;
        }

            .mi-form-builder .mi-footer-settings .mi-talent-cards .mi-card-body .mi-slct-btn-icon i:hover,
            .mi-form-builder .mi-footer-settings .mi-talent-cards .mi-card-body .mi-slct-btn-icon i.active,
            .mi-form-builder .mi-button-settings .mi-talent-cards .mi-card-body .mi-slct-btn-icon i:hover,
            .mi-form-builder .mi-button-settings .mi-talent-cards .mi-card-body .mi-slct-btn-icon i.active {
                color: var(--success-color);
                transform: scale(1.1);
            }


/*Rules*/

.mi-form-rules {
    border: 1px solid var(--lightest-color);
    border-radius: .25rem;
    margin-bottom: 15px;
}

    .mi-form-rules:last-child {
        margin-bottom: 0;
    }

    .mi-form-rules .mi-form-header {
        background: var(--dark-color);
        border: 1px solid var(--dark-color);
        padding: 10px 15px;
        border-radius: .25rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        position: relative;
        margin: -1px;
    }

        .mi-form-rules .mi-form-header .mi-form-toolbar {
            margin-left: auto;
            display: flex;
            align-items: center;
            position: absolute;
            top: 19px;
            right: 20px;
        }

        .mi-form-rules .mi-form-header h5,
        .mi-form-rules .mi-form-header p {
            margin: 0;
            color: var(--white-color);
        }

    .mi-form-rules .mi-form-body {
        background: var(--lightest-color);
    }

        .mi-form-rules .mi-form-body .mi-form-list {
            border-top: 5px solid var(--white-color);
        }

            .mi-form-rules .mi-form-body .mi-form-list .mi-form-list-header {
                display: flex;
                align-items: center;
                border-bottom: 3px solid var(--light-color);
                padding-top: 8px;
                padding-bottom: 8px;
                padding-left: 5px;
                padding-right: 5px;
                cursor: pointer;
                transition: .3s;
            }

                .mi-form-rules .mi-form-body .mi-form-list .mi-form-list-header:hover {
                    background: var(--light3-color);
                }

                .mi-form-rules .mi-form-body .mi-form-list .mi-form-list-header > .mi-badge {
                    height: 30px;
                    width: 30px;
                    font-size: 12px;
                    font-weight: 400 !important;
                    border: 5px solid var(--light3-color);
                    border-radius: 50% !important;
                    margin: 0 10px 0 0;
                    color: var(--white-color) !important;
                }

                .mi-form-rules .mi-form-body .mi-form-list .mi-form-list-header > i {
                    color: var(--dark-color) !important;
                    position: absolute;
                    right: 30px;
                    font-size: 15px;
                }

                .mi-form-rules .mi-form-body .mi-form-list .mi-form-list-header > h6 {
                    width: auto;
                    font-weight: 700;
                    font-size: 14px;
                    padding: 0;
                    background-color: transparent !important;
                    border: 0;
                    color: var(--dark-color) !important;
                    margin: 0;
                }

            .mi-form-rules .mi-form-body .mi-form-list .item:first-child {
                padding-top: 10px;
            }

            .mi-form-rules .mi-form-body .mi-form-list .item {
                padding: 10px 0;
                border-bottom: 1px solid var(--light3-color);
            }

                .mi-form-rules .mi-form-body .mi-form-list .item:last-child {
                    border-bottom: 0;
                    padding-bottom: 10px;
                }

    .mi-form-rules .first-label {
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 14px 0 0;
        width: 50px;
        font-size: 12px;
    }

    .mi-form-rules .dropdown-menu {
        top: 0px;
        bottom: auto;
        border: 1px solid var(--dark-color);
        border-radius: 0.25rem;
        background: var(--white-color);
        font-size: 13px;
        font-weight: 500;
        min-width: 150px;
    }

    .mi-form-rules span.dropdown-item {
        font-weight: 600;
        background: var(--white-color);
        line-height: 1;
        padding: 10px;
        cursor: pointer;
        font-size: 12px;
        border-radius: .25rem;
    }

        .mi-form-rules span.dropdown-item i {
            font-size: 12px;
        }

        .mi-form-rules span.dropdown-item:hover,
        .mi-form-rules span.dropdown-item:focus {
            background: var(--light3-color);
            color: var(--dark2-color);
        }

        .mi-form-rules span.dropdown-item > span:last-child {
            display: block;
            font-size: 10px;
        }

        .mi-form-rules span.dropdown-item:last-child {
            border-bottom: 0;
        }

    .mi-form-rules .add-btn {
        display: flex;
        align-content: center;
        justify-content: flex-end;
    }

.mi-form-items > .add-btn {
    padding-bottom: 15px;
}

.mi-form-rules .add-btn .dropdown {
    background: var(--white-color) !important;
    background-color: var(--white-color) !important;
    border-radius: .25rem;
    border: 1px solid var(--dark-color) !important;
    padding: 0;
    font-size: 12px;
}

    .mi-form-rules .add-btn .dropdown .dropdown-toggle {
        cursor: pointer;
        display: flex;
        align-items: center;
        height: 26px;
        padding-left: 10px;
        color: var(--dark2-color) !important;
    }

        .mi-form-rules .add-btn .dropdown .dropdown-toggle i {
            font-size: 10px;
        }

        .mi-form-rules .add-btn .dropdown .dropdown-toggle.arrow-right::after {
            top: 1px;
        }

.mi-form-rules .add-btn > i {
    display: flex;
    align-items: center;
}

.mi-form-rules .item .mi-form-control {
    padding: 0 10px;
    font-size: 12px;
}

.mi-dragAndDrop {
    border: 2px dashed var(--light2-color);
    background: var(--lightest-color);
    color: var(--light2-color);
    border-radius: .25rem;
    padding: 20px;
    margin: 10px;
    text-align: center;
    font-weight: 700;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

/*Version History*/

.mi-version-td {
    position: relative;
}

    .mi-version-td .mi-version-history i {
        padding: 2px 3px;
        font-size: 11px;
        border: 3px solid var(--white-color);
    }

    .mi-version-td span.mi-badge {
        float: right;
        padding: 4px 7px;
        border-radius: 30px;
        font-size: 10px;
        font-weight: 500;
    }

    .mi-version-td div:first-child {
        padding: 12px 0px 8px 0px;
        /*line-height: 1;*/
    }

    .mi-version-td ul.tr-child {
        list-style: none;
        background: var(--light3-color);
        margin: 0px -10px;
        padding: 0px 10px;
    }

        .mi-version-td ul.tr-child li {
            border-top: 1px solid var(--white-color);
            line-height: 1;
            padding: 9px;
            font-size: 12px;
            margin: 0 -10px;
            display: flex;
            align-items: center;
        }

            .mi-version-td a:not(:last-child),
            .mi-version-td ul.tr-child li a:not(:last-child) {
                font-weight: 600;
                width: 84%;
                display: inline-block;
                margin-right: 0;
                line-height: 1;
            }

            .mi-version-td span.mi-badge,
            .mi-version-td ul.tr-child li span.mi-badge {
                padding: 4px 7px;
                border-radius: 30px;
                font-size: 9px;
                font-weight: 600;
                margin: 0;
                width: 60px;
                position: absolute;
                right: 10px;
            }

.mi-version-history {
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 9;
}

    .mi-version-history span {
        background: var(--lightest-color);
        border-radius: .25rem;
        font-size: 11px;
        font-weight: 700;
        color: var(--dark-color);
        cursor: pointer;
        transition: .2s;
        padding: 2px 6px;
        border: 3px solid var(--white-color);
    }


/*Select2 Dropdown*/

.mi-form-rules td {
    padding: 10px !important;
}

    .mi-form-rules td > div {
        margin-bottom: 10px;
    }

        .mi-form-rules td > div:last-child {
            margin-bottom: 0;
        }

.mi-form-rules .mi-form-items {
    padding: 20px 10px 0 10px;
}

    .mi-form-rules .mi-form-items .item {
        display: flex;
        align-items: center;
        margin-bottom: 15px !important;
    }

        .mi-form-rules .mi-form-items .item .control {
            margin-right: 15px;
            flex: 1;
        }

            .mi-form-rules .mi-form-items .item .control:first-of-type {
                flex: 1.5;
            }

            .mi-form-rules .mi-form-items .item .control:last-child {
                flex: 2;
            }


/*  .mi-form-rules .item-then {
width: calc(100% - 668px);
}

.mi-form-rules .item-then .first-label {
margin: 0px 6px 0px 4px;
}*/

.mi-form-rules .add-btn .mi-btn {
    width: 65px;
    height: 33px;
    font-weight: 600;
    padding: .35rem .45rem;
    box-shadow: none;
    border: 1px solid var(--light-color);
    margin-right: 10px !important;
}

    .mi-form-rules .add-btn .mi-btn:last-child {
        margin-right: 5px !important;
    }

.mi-form-rules .select2 > .selection > .select2-selection,
.mi-form-rules .mi-form-control {
    display: inline-flex !important;
    text-align: left;
    background: var(--white-color) !important;
    background-color: var(--white-color) !important;
    height: 33px !important;
    align-items: center;
    border-radius: .25rem !important;
    border-color: var(--light-color) !important;
    cursor: pointer;
    overflow: hidden;
}

.mi-form-rules .select2 > .selection > .select2-selection {
    display: inline-flex !important;
    text-align: left;
    background: var(--white-color) !important;
    background-color: var(--white-color) !important;
    height: 33px !important;
    align-items: center;
    border-radius: .25rem !important;
    border-color: var(--light-color) !important;
    cursor: pointer;
    overflow: hidden;
}

    .mi-form-rules .select2 > .selection > .select2-selection .select2-selection__rendered {
        font-size: 12px !important;
    }

.mi-form-rules .mi-select2 .select2-selection > .select2-selection__arrow {
    height: 28px !important;
}

.mi-form-rules .mi-select2 .select2-container.select2-container--open.select2-container--above > .selection > .select2-selection {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.mi-form-rules .mi-select2 .select2-container.select2-container--open.select2-container--below > .selection > .select2-selection {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.mi-maximize-rules {
    position: fixed;
    bottom: 30%;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    width: 550px;
    height: max-content;
    z-index: 999999;
}

.mi-rules-overlay.show {
    opacity: .5;
    z-index: 9999;
}

.mi-rules-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
    opacity: 0;
    display: none;
}

    .mi-rules-overlay.show ~ .select2-container {
        z-index: 999999 !important;
    }

    .mi-rules-overlay.show ~ .tooltip {
        z-index: 999999 !important;
    }

.mi-compact-rules.mi-form-rules {
    border-width: 0 !important;
}

    .mi-compact-rules.mi-form-rules .mi-form-group {
        margin: 0 !important;
    }

    .mi-compact-rules.mi-form-rules .mi-form-group {
        flex: auto !important;
    }

        .mi-compact-rules.mi-form-rules .mi-form-group .select2 {
            width: 88px !important;
        }

        .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(3) .mi-form-control {
            width: 110px !important;
        }

        .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(1) .select2 > .selection > .select2-selection {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            border-right: 0 !important;
        }

        .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(2) .select2 > .selection > .select2-selection {
            border-radius: 0 !important;
            border-right: 0 !important;
        }

        .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(3) .mi-form-control {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            box-shadow: none !important;
        }

            .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(3) .mi-form-control:hover {
                border-color: var(--theme-color) !important;
            }

.mi-side-panel .mi-side-panel-body .mi-compact-rules.mi-form-rules .mi-form-group .select2 {
    width: 100px !important;
}

.mi-side-panel .mi-side-panel-body .mi-compact-rules.mi-form-rules .mi-select2 .select2-selection > .select2-selection__arrow {
    height: 32px !important;
    border-radius: 0 !important;
}

.mi-maximize-rules .mi-compact-rules.mi-form-rules .mi-form-group {
    flex: auto !important;
}

    .mi-side-panel .mi-side-panel-body .mi-maximize-rules .mi-compact-rules.mi-form-rules .mi-form-group .select2,
    .mi-maximize-rules .mi-compact-rules.mi-form-rules .mi-form-group .select2 {
        width: 153px !important;
    }

.mi-side-panel .mi-side-panel-body .mi-select2.sub-child .select2 > .selection > .select2-selection {
    height: 38px !important;
}

    .mi-side-panel .mi-side-panel-body .mi-select2.sub-child .select2 > .selection > .select2-selection > .select2-selection__arrow {
        height: 36px !important;
    }

.mi-side-panel .mi-side-panel-body .mi-select2.sub-child .select2 {
    width: 100% !important;
}

.mi-maximize-rules .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(3) .mi-form-control {
    width: 192px !important;
}


/*.mi-maximize-rules .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(1) {
flex: 1.5 !important;
}

.mi-maximize-rules .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(2) {
flex: 1 !important;
}

.mi-maximize-rules .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(3) {
flex: 2 !important;
}
.mi-maximize-rules .mi-compact-rules.mi-form-rules .mi-form-group .select2,
.mi-maximize-rules .mi-compact-rules.mi-form-rules .mi-form-group .mi-form-control {
width: inherit !important;
}*/

.mi-maximize-rules .actions .dropdown-menu.show {
    left: -150px !important;
}

.mi-fields-group .mi-form-group > label {
    flex: 0 0 33%;
    max-width: 33%;
}

.mi-fields-group .mi-form-group > .mi-form-control {
    flex: 0 0 54%;
    max-width: 54%;
}

.mi-fields-group .mi-form-group > .mi-clickable-icon {
    flex: 0 0 10%;
    max-width: 10%;
}

.mi-create-data-source .mi-compact-rules.mi-form-rules .mi-form-group .select2 {
    width: auto !important;
}

.mi-create-data-source .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(3) .mi-form-control {
    width: 100% !important;
}

.mi-create-data-source .mi-compact-rules.mi-form-rules .mi-form-group {
    flex: 2 !important;
}

    .mi-create-data-source .mi-compact-rules.mi-form-rules .mi-form-group:nth-child(3) {
        flex: 3 !important;
    }
/*Conditins Grouping*/
.mi-form-items .mi-items-group {
    --level-left-margin: 64px;
    position: relative;
    margin-left: var(--level-left-margin);
}

    .mi-form-items .mi-items-group .mi-group {
        position: relative;
    }

        .mi-form-items .mi-items-group .mi-group.has-siblings .mi-group:not(:last-child):before {
            content: '';
            width: 1px;
            height: calc(100% + 32px);
            position: absolute;
            bottom: 0;
            top: 29px;
            left: -18px;
            margin: auto;
            background: var(--light2-color);
        }

        .mi-form-items .mi-items-group .mi-group > .mi-group {
            margin-left: calc(var(--level-left-margin) - 30px);
        }

        .mi-form-items .mi-items-group .mi-group .mi-group-header {
            margin-top: 15px;
            margin-bottom: 15px;
        }

            .mi-form-items .mi-items-group .mi-group .mi-group-header .add-btn {
                justify-content: flex-start;
            }

                .mi-form-items .mi-items-group .mi-group .mi-group-header .add-btn .btn-or-rule:after {
                    content: '';
                    width: 1px;
                    height: 15px;
                    background: var(--light2-color);
                    position: absolute;
                    bottom: -16px;
                    left: 0;
                    right: 0;
                    margin: auto;
                }

        .mi-form-items .mi-items-group .mi-group:not(:first-of-type) .mi-group-header .add-btn .btn-or-rule:before {
            content: '';
            width: 19px;
            height: 1px;
            background: var(--light2-color);
            position: absolute;
            left: -19px;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .mi-form-items .mi-items-group .mi-group .mi-group-header .action {
            position: absolute;
            top: 33px;
            right: -3px;
            z-index: 9;
            border: 1px solid var(--light2-color);
            border-radius: .25rem;
        }

            .mi-form-items .mi-items-group .mi-group .mi-group-header .action .dropdown-toggle.no-arrow::before {
                display: none;
            }

        .mi-form-items .mi-items-group .mi-group .mi-group-body {
            border: 1px solid var(--light2-color);
            padding: 17px 10px 17px 15px;
            border-radius: .25rem;
            position: relative;
            margin-right: 10px;
        }

            .mi-form-items .mi-items-group .mi-group .mi-group-body:after {
                content: '';
                width: 1px;
                height: 33px;
                background: var(--light2-color);
                position: absolute;
                bottom: -33px;
                left: 15px;
            }

        .mi-form-items .mi-items-group .mi-group.no-child-level .mi-group-body:after {
            display: none;
        }

        .mi-form-items .mi-items-group .mi-group .mi-group-header .action,
        .mi-form-items .mi-items-group .mi-group .mi-group-body {
            background: var(--white-color);
        }

        .mi-form-items .mi-items-group .mi-group > .mi-group .mi-group-header .action,
        .mi-form-items .mi-items-group .mi-group > .mi-group .mi-group-body {
            background: var(--light4-color);
        }

        .mi-form-items .mi-items-group .mi-group > .mi-group > .mi-group .mi-group-header .action,
        .mi-form-items .mi-items-group .mi-group > .mi-group > .mi-group .mi-group-body {
            background: var(--light3-color);
        }

        .mi-form-items .mi-items-group .mi-group .mi-group-body .item:last-child {
            margin-bottom: 0;
        }


/*Workflow Builder*/

.mi-fixed-buttons .mi-btn {
    position: absolute;
    z-index: 9;
    top: -18px;
    transition: .3s;
}

    .mi-fixed-buttons .mi-btn:hover {
        top: -29px;
    }

    .mi-fixed-buttons .mi-btn:first-child {
        left: 37px;
    }

    .mi-fixed-buttons .mi-btn:nth-child(2) {
        left: 120px;
    }

    .mi-fixed-buttons .mi-btn:nth-child(3) {
        left: 253px;
    }

.mi-workflow-actions {
    position: sticky;
    top: 10px;
    left: 10px;
    display: flex;
    z-index: 9;
    width: fit-content;
}

    .mi-workflow-actions .mi-btn,
    .mi-workflow-actions .mi-btn-group .mi-btn {
        width: 25px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 1px 1px 5px var(--light-focus-color);
        border: 1px solid var(--light3-color);
        color: var(--light2-color) !important;
        transition: .2s;
    }

        .mi-workflow-actions .mi-btn:hover {
            background: var(--lightest-color) !important;
            color: var(--dark-color) !important;
        }

        .mi-workflow-actions .mi-btn i,
        .mi-workflow-actions .mi-btn-group .mi-btn i {
            margin-right: 0;
            font-size: 10px;
        }

.mi-workflow {
    /*overflow: scroll !important;*/
    height: 100%;
    background: var(--lightest2-color);
    background-image: linear-gradient(rgb(245 245 245) .1em, transparent .1em), linear-gradient( 90deg, rgb(245 245 245) .1em, transparent .1em);
    background-size: 1em 1em;
    margin-bottom: 50px;
    border-bottom-left-radius: 0.65rem;
}

.mi-workflow-desinger {
    transition: all .3s !important;
}

    .mi-workflow-desinger.fullscreen {
        z-index: 999;
        width: 100%;
        /*width: calc(100% - 330px);*/
        height: 100% !important;
        position: fixed;
        top: 0;
        left: 0;
    }

        .mi-workflow-desinger.fullscreen .mi-workflow {
            height: 100% !important;
        }

.mi-workflow-area .mi-config-panel.opened.fullscreen,
.mi-workflow-area .mi-workflow-variables.opened.fullscreen,
.mi-workflow-area .mi-workflow-toolbox.opened.fullscreen {
    z-index: 9999 !important;
    bottom: 0 !important;
    top: 0 !important;
    height: 100% !important;
    position: fixed !important;
    right: 0 !important;
    left: initial !important;
    width: 300px !important;
    border-left: 1px solid var(--light-focus-color) !important;
    transition: .3s;
}

.mi-workflow-area .mi-workflow-variables.opened.fullscreen {
    right: 331px !important;
}

    .mi-workflow-area .mi-workflow-variables.opened.fullscreen .mi-body-panel {
        height: 100% !important;
    }

    .mi-workflow-area .mi-workflow-variables.opened.fullscreen .mi-variables {
        height: calc(100vh - 155px) !important;
    }

.mi-workflow-area .mi-workflow-toolbox.fullscreen {
    right: -300px !important;
}

.mi-workflow-area,
.mi-workflow-area .mi-workflow-desinger,
.mi-workflow-area .mi-workflow-toolbox,
.mi-workflow-area .mi-config-panel {
    height: calc(100vh - 210px);
}

.mi-workflow * {
    margin: 0;
    padding: 0;
}

.mi-workflow .mi-flow {
    width: max-content;
    margin: auto;
    scroll-snap-align: center !important;
    transition: all .3s;
}

.mi-flow ul {
    padding-top: 50px;
    position: relative;
    /*  transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;*/
}

.mi-flow li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 50px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}


    /*We will use ::before and ::after to draw the connectors*/

    .mi-flow li::before,
    .mi-flow li::after {
        content: '';
        position: absolute;
        top: 0;
        right: 50%;
        border-top: 2px solid var(--light2-color);
        width: 50%;
        height: 50px;
    }

    .mi-flow li::after {
        right: auto;
        left: 50%;
        border-left: 2px solid var(--light2-color);
    }


    /*We need to remove left-right connectors from elements without
any siblings*/

    .mi-flow li:only-child::after,
    .mi-flow li:only-child::before {
        display: none;
    }


    /*Remove space from the top of single children*/

    .mi-flow li:only-child {
        padding-top: 0;
    }


    /*Remove left connector from first child and
right connector from last child*/

    .mi-flow li:first-child::before,
    .mi-flow li:last-child::after {
        border: 0 none;
    }


    /*Adding back the vertical connector to the last nodes*/

    .mi-flow li:last-child::before {
        border-right: 2px solid var(--light2-color);
        border-radius: 0 5px 0 0;
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
    }

    .mi-flow li:first-child::after {
        border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
    }


/*Time to add downward connectors from parents*/

.mi-flow ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid var(--light2-color);
    width: 0;
    height: 50px;
}

.mi-flow li > a {
    padding: 0;
    border: 0;
    font-size: 12px;
    display: inline-block;
    border-radius: .25rem;
    cursor: pointer;
}

.mi-flow.mi-cards-group li > a .mi-card {
    min-width: 300px;
    max-width: 350px;
    margin-bottom: 0 !important;
    border-width: 2px !important;
    border-color: var(--light2-color);
    border-radius: .25rem !important;
}

.mi-flow li > a .mi-card .mi-card-header {
    color: var(--dark-color);
    font-size: 12px;
    border-bottom-width: 2px !important;
    padding: 0 5px;
}

.mi-flow.mi-cards-group li > a .mi-card .mi-card-header {
    border-bottom-color: var(--light2-color) !important;
    padding-right: 0;
}

.mi-flow li > a .mi-card .mi-card-header > i {
    margin-right: 10px;
    font-size: 15px;
    text-shadow: 3px 3px 3px var(--light-color);
}

    .mi-flow li > a .mi-card .mi-card-header > i.fas {
        margin-left: 3px;
    }

    .mi-flow li > a .mi-card .mi-card-header > i.material-icons {
        font-size: 21px;
    }

.mi-flow li > a .mi-card .mi-card-header > input {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    border: 0;
    line-height: 1;
    background: transparent;
    font-weight: 600;
    color: var(--dark-color);
    width: 100%;
}

.mi-flow li > a .mi-card .mi-card-body {
    padding: 10px !important;
    line-height: 1.5;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--light2-color);
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
}

.mi-flow .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1px;
    right: 0px;
    margin: auto !important;
    font-size: 11px;
    padding: 0;
    border-width: 2px;
    border-style: solid;
    border-color: var(--light2-color);
    background: var(--lightest2-color);
    border-radius: 50%;
    height: 23px;
    width: 23px;
    color: var(--light2-color) !important;
    transition: .1s;
}

    .mi-flow .add-btn:hover {
        border-color: var(--dark-color);
        color: var(--dark-color) !important;
    }

        .mi-flow .add-btn:hover i {
            transform: rotate(90deg);
        }

    .mi-flow .add-btn.top {
        /*top: 11px;*/
        top: -35px;
    }

    .mi-flow .add-btn.bottom {
        /*bottom: -10px;*/
        bottom: -35px;
    }

    .mi-flow .add-btn i {
        margin: 0;
        transition: .2s;
    }

.mi-flow .dropright .dropdown-menu.show {
    left: 5px !important;
    top: -2px !important;
    border: 2px solid var(--dark-color);
    box-shadow: none;
    padding: 0;
    border-radius: .25rem;
    font-size: 12px;
    font-weight: 600 !important;
}

    .mi-flow .dropright .dropdown-menu.show span.dropdown-item {
        font-weight: 700;
        border-bottom: 1px solid var(--lightest-color);
        padding: 0 10px;
        transition: .3s;
    }

        .mi-flow .dropright .dropdown-menu.show span.dropdown-item:hover,
        .mi-flow .dropright .dropdown-menu.show span.dropdown-item:focus {
            background: var(--lightest-color);
            color: var(--dark-color);
        }

.mi-flow .mi-flow-conditions {
    position: absolute;
    top: -59px;
    background: rgb(172 220 173);
    color: var(--success-color);
    font-weight: 700;
    padding: 0 20px;
    border-radius: .85rem;
    z-index: 9;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content;
    line-height: 1.5;
}

    .mi-flow .mi-flow-conditions.primary {
        background: #c3cfe0;
        color: var(--primary-color);
    }

    .mi-flow .mi-flow-conditions.success {
        background: #acdcad;
        color: var(--success-color);
    }

    .mi-flow .mi-flow-conditions.info {
        background: #a0c6e4;
        color: var(--info-color);
    }

    .mi-flow .mi-flow-conditions.danger {
        background: #f5aaaa;
        color: var(--danger-color);
    }

    .mi-flow .mi-flow-conditions.warning {
        background: #f5d6aa;
        color: var(--warning-color);
    }

.mi-flow .mi-flow-startpoint {
    position: absolute;
    top: 2px;
    left: -85px;
    background: var(--dark-color);
    color: var(--white-color);
    padding: 0px 25px;
    border-radius: .85rem;
}

.mi-flow .mi-flow-endpoint {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

    .mi-flow .mi-flow-endpoint:before {
        content: "";
        border-right-width: 2px;
        border-right-style: solid;
        border-right-color: var(--light2-color);
        position: absolute;
        top: 0;
        padding-top: 50px;
        transition: .3s;
    }

    .mi-flow .mi-flow-endpoint span {
        margin-top: 50px;
        color: var(--white-color);
        background: var(--light2-color);
        padding: 0px 25px;
        border-radius: 0.85rem;
        transition: .3s;
    }


/*Editable Mode*/

.mi-flow.mi-cards-group li > a .mi-card.mi-editable-mode {
    border-color: var(--info-color) !important;
    border-top-right-radius: 0 !important;
}

    .mi-flow.mi-cards-group li > a .mi-card.mi-editable-mode .mi-card-header,
    .mi-flow.mi-cards-group li > a .mi-card.mi-editable-mode .mi-card-body {
        border-bottom-color: var(--info-color) !important;
    }

.mi-flow.mi-cards-group li > a .mi-card:after {
    content: "";
    top: 0;
}

.mi-flow.mi-cards-group li > a .mi-card.mi-editable-mode:after {
    content: "in editable mode";
    position: absolute;
    top: -20px;
    right: -2px;
    background: var(--info-color);
    color: var(--white-color);
    font-size: 9px;
    align-items: center;
    padding: 0px 8px;
    border-radius: .25rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    line-height: 2;
    transition: all .3s;
}


/*Connector styles on hover*/

.mi-flow.mi-cards-group li > a .mi-card,
.mi-flow.mi-cards-group li > a .mi-card-header,
.mi-flow li > a .mi-card-body,
.mi-flow li > a + ul li .mi-card-body,
.mi-flow li > a + ul li::after,
.mi-flow li > a + ul li::before,
.mi-flow li > a + ul::before,
.mi-flow li > a + ul ul::before {
    transition: .3s !important;
}

.mi-flow.mi-cards-group li > a:hover .mi-flow-endpoint:before,
.mi-flow.mi-cards-group li > a:hover + ul li .mi-flow-endpoint:before {
    border-right-color: var(--dark-color);
}

.mi-flow.mi-cards-group li > a:hover .mi-flow-endpoint span,
.mi-flow.mi-cards-group li > a:hover + ul li .mi-flow-endpoint span {
    background: var(--dark-color);
}

.mi-flow.mi-cards-group li > a:hover .mi-card-header,
.mi-flow.mi-cards-group li > a:hover + ul li .mi-card-header,
.mi-flow li > a:hover .mi-card-body,
.mi-flow li > a:hover + ul li .mi-card-body {
    border-bottom-color: var(--dark-color) !important;
}

.mi-flow.mi-cards-group li > a:hover + ul li .add-btn,
.mi-flow.mi-cards-group li > a:hover .add-btn,
.mi-flow.mi-cards-group li > a:hover .mi-card,
.mi-flow.mi-cards-group li > a:hover + ul li .mi-card,
.mi-flow li > a:hover + ul li::after,
.mi-flow li > a:hover + ul li::before,
.mi-flow li > a:hover + ul::before,
.mi-flow li > a:hover + ul ul::before {
    border-color: var(--dark-color);
}

    .mi-flow.mi-cards-group li > a:hover .add-btn i,
    .mi-flow.mi-cards-group li > a:hover + ul li .add-btn i {
        color: var(--dark-color);
    }

.mi-flow-more {
    position: absolute;
    bottom: -33px;
    left: 0;
    right: 0;
    font-size: 6px;
    letter-spacing: 1px;
    font-weight: 800;
    cursor: pointer;
    display: grid;
    transition: .3s;
}

    .mi-flow-more i {
        margin-bottom: 2px;
        color: var(--dark-color);
    }

        .mi-flow-more i:last-child {
            margin-bottom: 0;
        }

    .mi-flow-more:hover i {
        color: var(--light2-color);
    }

.mi-workflow-area .mi-workflow-toolbox {
    border-left: 1px solid var(--light3-color);
    padding: 15px;
    background: var(--white-color);
}

    .mi-workflow-area .mi-workflow-toolbox .mi-toolbox-search,
    .mi-scorecard-area #enterParameterSetting .mi-toolbox-search,
    .mi-fixed-search {
        position: sticky;
        margin: -15px;
        border-bottom: 1px solid var(--light-focus-color);
        padding: 15px;
        top: -15px;
        z-index: 9;
        background: var(--white-color);
    }

.mi-scorecard-area .mi-avatar.mi-avatar-lg {
    width: 80%;
    height: 100%;
}

.mi-scorecard-area .mi-config-panel .mi-config-items .mi-multilevel-items .item {
    padding: 10px 10px 10px 30px !important;
    margin-bottom: initial;
}

.mi-scorecard-area .mi-multilevel-selection .mi-selectAll-wrap {
    background-color: inherit;
    margin: 10px 0;
}

.mi-scorecard-area .mi-create-data-source .mi-select2 .select2 > .selection > .select2-selection > .select2-selection__arrow {
    height: 33px !important;
}

.mi-workflow-area .mi-workflow-toolbox .mi-toolbox-search .mi-toolbox-btn {
    display: none;
}

.mi-workflow-area .mi-workflow-toolbox.fullscreen .mi-toolbox-search .mi-toolbox-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mi-workflow-area .mi-workflow-desinger > .mi-toolbox-btn {
    display: none;
}

    .mi-workflow-area .mi-workflow-desinger > .mi-toolbox-btn.fullscreen {
        position: absolute;
        top: 15px;
        right: 15px;
        background: var(--white-color);
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

.mi-workflow-area .mi-workflow-toolbox.fullscreen .mi-toolbox-search .mi-form-group {
    margin-left: 40px;
}

.mi-workflow-area .mi-workflow-toolbox .mi-accordion .mi-accordion-body {
    padding: 10px;
}

.mi-workflow-toolbox .mi-toolbox-items .item {
    display: flex;
    align-items: center;
    background: var(--lightest-color);
    padding: 5px 30px 5px 10px;
    border-radius: .25rem;
    cursor: grab;
    margin-bottom: 10px;
    background-image: linear-gradient( 45deg, var(--light3-color), var(--light3-color));
    background-repeat: no-repeat;
    background-position: left;
    background-size: 35px 100%;
}

    .mi-workflow-toolbox .mi-toolbox-items .item:last-child {
        margin-bottom: 0;
    }

    .mi-workflow-toolbox .mi-toolbox-items .item i {
        background: var(--light3-color);
        margin: -5px -10px;
        padding: 5px;
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        text-shadow: 3px 3px 3px var(--light-color);
    }

    .mi-workflow-toolbox .mi-toolbox-items .item h6 {
        margin: 0 0 0 20px;
        font-size: 14px;
    }

    .mi-workflow-toolbox .mi-toolbox-items .item span {
        display: none;
        font-size: 18px;
        position: absolute;
        right: 20px;
    }

    .mi-workflow-toolbox .mi-toolbox-items .item:hover span {
        display: block;
    }

.mi-workflow-area .mi-config-panel {
    border-left: 1px solid var(--light3-color);
    width: 100%;
    height: 100%;
    padding: 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -400px;
    background: var(--white-color);
    opacity: 0;
    z-index: -9;
    transition: all .3s;
}

    .mi-workflow-area .mi-config-panel.opened {
        left: 0;
        opacity: 1;
        z-index: 99;
        overflow: hidden;
    }

    .mi-workflow-area .mi-config-panel .mi-config-items {
        padding-top: 30px;
    }

        .mi-workflow-area .mi-config-panel .mi-config-items .item {
            margin-bottom: 30px;
            padding: 0 !important;
        }

            .mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group {
                position: relative;
                transition: .3s;
            }

.mi-has-sub-panel .mi-config-items .item .mi-form-group {
    position: relative;
    transition: .3s;
}

    .mi-has-sub-panel .mi-config-items .item .mi-form-group.variable-open {
        border: 1px solid var(--dark-color);
        background: var(--light-color);
        padding: 10px;
        border-radius: .25rem;
    }

.mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group.variable-open {
    border: 1px solid var(--dark-color);
    background: var(--light-color);
    padding: 10px;
    border-radius: .25rem;
}

    .mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group.variable-open .mi-btn-add-variable {
        top: 7px;
        right: 11px;
    }

.mi-has-sub-panel .mi-config-items .item .mi-form-group.variable-open .mi-btn-add-variable {
    top: 7px;
    right: 11px;
}

/*   .mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group.mi-select2 .mi-btn-add-variable {
top: 25px;
}
.mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group.has-variable-btn .select2 > .selection > .select2-selection > .select2-selection__arrow {
right: 50px;
}*/

.mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group.has-variable-btn .mi-btn-add-variable {
    top: -4px;
}

.mi-form-group.has-insert-btn {
    position: relative;
}

    .mi-form-builder .has-insert-btn .mi-btn-add-variable,
    .mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group .mi-btn-add-variable,
    .mi-form-group.has-insert-btn .mi-btn-add-variable {
        position: absolute;
        top: -2px;
        right: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border: 0 !important;
        border-left: 2px solid var(--light-2-color);
        color: var(--dark-color);
        border-radius: 0.25rem;
        padding: 12px 15px;
        cursor: pointer;
        z-index: 99;
        outline: none;
        transition: .3s;
    }

        .mi-form-builder .has-insert-btn .mi-btn-add-variable > span,
        .mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group .mi-btn-add-variable > span,
        .mi-form-group.has-insert-btn .mi-btn-add-variable > span {
            position: absolute;
            right: -30px;
            top: 3px;
            opacity: 0;
            transition: .3s;
        }

.mi-has-sub-panel .mi-panel-variables .mi-variables {
    height: calc(100vh - 238px);
    overflow-x: hidden;
}

.mi-form-builder .tab-pane .has-insert-btn .mi-btn-add-variable > span {
    top: 1px;
}

.mi-form-builder .has-insert-btn .mi-btn-add-variable > span {
    top: 4px;
}

.mi-form-builder .has-insert-btn .mi-btn-add-variable:hover > span,
.mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group .mi-btn-add-variable:hover > span,
.mi-form-group.has-insert-btn .mi-btn-add-variable:hover > span {
    font-size: 13px;
    font-weight: 700;
    right: 10px;
    opacity: 1;
    color: var(--dark2-color) !important;
}

.mi-form-builder .has-insert-btn .mi-btn-add-variable:hover i,
.mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group .mi-btn-add-variable:hover i {
    color: var(--dark2-color) !important;
}

.mi-form-builder .has-insert-btn .mi-btn-add-variable:hover,
.mi-workflow-area .mi-config-panel .mi-config-items .item .mi-form-group .mi-btn-add-variable:hover,
.mi-form-group.has-insert-btn .mi-btn-add-variable:hover {
    padding: 12px 60px 12px 15px;
    border-left-color: var(--dark2-color) !important;
    color: var(--dark2-color) !important;
    border-left-width: 1px !important;
    background: var(--light3-color) !important;
}

.mi-workflow-area .mi-workflow-variables,
.mi-has-sub-panel .mi-panel-variables {
    border-left: 1px solid var(--light3-color);
    width: 350px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -300px;
    background: var(--white-color);
    opacity: 0;
    z-index: -9;
    transition: all .3s;
}

.mi-has-sub-panel .mi-element-insert-view {
    position: absolute;
    left: 0;
    background: var(--white-color);
    top: 0;
    padding: 10px;
    padding-bottom: 0 !important;
    border-bottom-left-radius: 0.25rem;
    border: 1px solid var(--light3-color);
    border-top: 0;
    opacity: 0;
    z-index: -9;
    transition: all .3s;
}

    .mi-has-sub-panel .mi-element-insert-view.opened {
        left: -370px;
        opacity: 1;
    }

.mi-has-sub-panel .mi-side-panel-body {
    position: relative;
    overflow: initial;
    padding: initial;
    border: none;
}

    .mi-has-sub-panel .mi-side-panel-body .mi-config-items {
        height: calc(100vh - 156px);
        overflow-x: hidden;
        padding: 15px;
    }

.mi-workflow-area .mi-workflow-variables.opened {
    right: 0;
    opacity: 1;
    z-index: 99;
}

.mi-has-sub-panel .mi-panel-variables.opened {
    right: 450px;
    opacity: 1;
    z-index: 99;
    border-radius: 0.45rem 0 0 0.45rem;
    border: 1px solid var(--light3-color);
}

.mi-has-sub-panel .mi-panel-variables .mi-header-panel {
    height: 40px;
    padding: 0 5px 0 10px;
}

.mi-workflow-area .mi-workflow-variables .mi-header-panel {
    height: 50px;
}

.mi-workflow-area .mi-workflow-variables .mi-header-panel,
.mi-has-sub-area .mi-panel-variables .mi-header-panel {
    border-bottom-color: var(--light3-color) !important;
}

    .mi-workflow-area .mi-workflow-variables .mi-header-panel h5,
    .mi-has-sub-area .mi-panel-variables .mi-header-panel h5 {
        font-size: 1rem;
    }

.mi-workflow-area .mi-workflow-variables .mi-body-panel,
.mi-has-sub-area .mi-panel-variables .mi-body-panel {
    border-bottom: 0;
    height: calc(100vh - 230px);
}

.mi-overlay-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -9;
    opacity: 0;
}

    .mi-overlay-container.show {
        opacity: .5;
        z-index: 9;
    }

.mi-workflow-area .mi-variables {
    padding: 5px 0;
    height: calc(100vh - 365px);
    overflow-x: hidden;
    padding-top: 0px;
    margin-top: -1px;
}

    .mi-workflow-area .mi-variables .items .mi-bg-heading-style,
    .mi-has-sub-panel .mi-panel-variables .items .mi-bg-heading-style {
        top: 0;
        margin: 10px 0 0 0;
    }

    .mi-workflow-area .mi-variables .item,
    .mi-has-sub-panel .mi-panel-variables .item {
        position: relative;
        padding: 5px 10px;
        display: flex;
    }

.mi-workflow-area .mi-config-items .mi-variables {
    height: auto;
}

    .mi-workflow-area .mi-config-items .mi-variables .item {
        padding: 5px 0 !important;
        margin-bottom: 0 !important;
    }

.mi-workflow-area .mi-variables .item.child-item.row {
    margin: 0;
}

    .mi-workflow-area .mi-variables .item.child-item.row > div {
        padding: 0;
    }


/*    .mi-workflow-area .mi-variables .item:hover {
background: var(--lightest-color);
}*/

.mi-has-email-tags .variables,
.mi-workflow-area .variables {
    width: 100%;
    float: left;
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left;
    background-image: linear-gradient( 45deg, var(--light3-color), var(--light3-color));
    border-radius: .25rem;
    border: 1px solid var(--light3-color);
    color: var(--dark2-color);
    display: flex;
    align-items: center;
    line-height: 1.0rem;
    padding: 6px 15px 6px 0;
    cursor: pointer;
    transition: .3s;
}

    .mi-has-email-tags .variables:hover,
    .mi-has-email-tags .variables.selected,
    .mi-workflow-area .variables:hover,
    .mi-workflow-area .variables.selected {
        border: 1px solid var(--light-color);
    }

    .parameter-variable .variables.selected.has-check {
        position: relative;
        border: 1px solid var(--success-focus-color);
    }
    .parameter-variable .variables.selected.has-check:before {
        content: "\f058";
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 13px;
        font-weight: 600;
        color: var(--success-color);
    }
    .mi-dual-list .mi-list .item .mi-checkbox-left {
        position: absolute;
        top: 5px;
        padding: 10px 0;
    }
    .mi-dual-list .mi-list.parameter-variable .variables > p {
        margin-left: 26px;
    }
    .mi-has-email-tags .variables.selected,
    .mi-workflow-area .variables.selected {
        background-image: linear-gradient( 45deg, var(--light-color), var(--light-color));
    }

    .mi-has-email-tags .variables > i:not(.fa-times),
    .mi-workflow-area .variables > i:not(.fa-times),
    .mi-has-sub-panel .mi-panel-variables .item .variables > i:not(.fa-times) {
        color: var(--dark-color);
        padding-left: 8px;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 24px;
        padding-right: 9px;
        text-shadow: 3px 3px 3px var(--light-color);
    }

    .mi-has-email-tags .variables > p,
    .mi-workflow-area .variables > p,
    .mi-has-sub-panel .mi-panel-variables .item .variables > p {
        line-height: 1;
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--dark-color);
        padding: 0 7px;
    }

        .mi-has-email-tags .variables > p span:last-child,
        .mi-workflow-area .variables > p span:last-child,
        .mi-has-sub-panel .mi-panel-variables .item .variables > p span:last-child {
            display: block;
            font-size: 10px;
            padding-left: 2px;
            margin-top: 5px;
            color: var(--dark-color);
            font-weight: 600;
        }

.mi-form-builder .has-insert-btn input.mi-form-control,
.mi-form-builder .has-insert-btn textarea.mi-form-control,
.mi-workflow-area .mi-config-items input.mi-form-control,
.mi-workflow-area .mi-config-items textarea.mi-form-control,
.mi-config-items input.mi-form-control,
.mi-config-items textarea.mi-form-control {
    display: none;
}

.mi-has-email-tags input.mi-form-control,
.mi-has-email-tags textarea.mi-form-control {
    display: none;
}

.mi-has-email-tags div.mi-form-control,
.mi-workflow-area .mi-config-items div.mi-form-control {
    /*padding-right: 40px;*/
    line-height: 1.6;
    padding: .375rem;
    height: auto;
}

    .mi-has-email-tags div.mi-form-control.big,
    .mi-workflow-area .mi-config-items div.mi-form-control.big {
        min-height: 100px;
        max-height: 100px;
        overflow-x: hidden;
    }

    .mi-has-email-tags div.mi-form-control .variables,
    .mi-workflow-area .mi-config-items div.mi-form-control .variables {
        float: none;
        display: inline-flex;
        width: max-content !important;
        border-width: 1px;
        border-style: solid;
        border-color: var(--dark-color);
        padding: 4px 0px;
        background-size: 23px 100%;
        background-position: right;
        background-image: linear-gradient( 45deg, var(--dark-color), var(--dark-color));
        transition: .3s;
    }

        .mi-workflow-area .mi-config-items div.mi-form-control .variables.calculate,
        .mi-workflow-area .mi-config-items div.mi-form-control .variables.calculate:hover {
            background-position: left;
            border: none;
            background-image: none;
        }

.mi-workflow-area .variables.calculate > p {
    padding: 0;
}

.mi-has-email-tags div.mi-form-control .variables:not(:last-child),
.mi-workflow-area .mi-config-items div.mi-form-control .variables:not(:last-child) {
    margin-bottom: 4px;
}

.mi-has-email-tags div.mi-form-control .variables > p > span,
.mi-workflow-area .mi-config-items div.mi-form-control .variables > p > span,
.mi-form-control.calulation-field .variables.calculate > p > span {
    font-size: 12px;
    margin-top: 0px;
    padding-left: 0;
    color: var(--dark-color);
    font-weight: 700;
}

.mi-has-email-tags div.mi-form-control .variables .fa-times,
.mi-workflow-area .mi-config-items div.mi-form-control .variables .fa-times {
    font-size: 10px;
    color: var(--white-color);
    padding: 0 8px 0 9px;
}

    .mi-has-email-tags div.mi-form-control .variables .fa-times:hover,
    .mi-workflow-area .mi-config-items div.mi-form-control .variables .fa-times:hover {
        transform: rotate(90deg);
    }

.mi-has-email-tags div.mi-form-control .variables:hover,
.mi-workflow-area .mi-config-items div.mi-form-control .variables:hover {
    border-color: var(--dark2-color);
    background-image: linear-gradient( 45deg, var(--dark2-color), var(--dark2-color));
}

    .mi-has-email-tags div.mi-form-control .variables:hover > p > span,
    .mi-workflow-area .mi-config-items div.mi-form-control .variables:hover > p > span {
        color: var(--dark2-color);
    }

.mi-workflow-area .variables svg {
    fill: var(--white-color);
    padding-right: 5px;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-bottom: 5px;
    margin-top: -5px;
}

.mi-workflow-area .variables label {
    margin: 0;
    font-size: 13px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-left: 14px;
}

.mi-workflow-area .mi-variables .item .type {
    margin-top: 2px;
    text-align: right;
}

.mi-workflow-area .mi-variables .item .actions {
    position: absolute;
    right: 20px;
    background: var(--white);
}

.mi-workflow-area .mi-variables .item .actions {
    display: flex;
    align-items: center;
    position: absolute;
    right: -100px;
    top: 13px;
    background: var(--transparent);
    /*border-radius: .25rem;*/
    opacity: 0;
    transition: all .3s;
}

.mi-workflow-area .mi-variables .item:hover .actions {
    right: 18px;
    opacity: 1;
}

.mi-workflow-area .mi-config-items .mi-variables .item:hover .actions {
    right: 23px;
}

.mi-workflow-area .mi-variables .item.child-item:hover .actions {
    right: 10px;
    opacity: 1;
}

.mi-workflow-area .mi-variables .item:hover .actions hr {
    width: 1px;
    height: 29px;
    margin: auto;
    background: var(--light-color);
}

.mi-workflow-area .mi-variables .item .actions .mi-btn-insert,
.mi-has-sub-panel .mi-panel-variables .item .actions .mi-btn-insert {
    background: var(--dark-color);
    color: var(--white-color);
    /*border: 1px solid var(--transparent-color);*/
    border-right: 0 !important;
    border-radius: 50%;
    margin: 0;
    padding: 0 30px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: .5px;
}

    .mi-workflow-area .mi-variables .item .actions .mi-btn-insert:first-child {
        border-top-left-radius: 0.25rem !important;
        border-bottom-left-radius: 0.25rem !important;
    }

    .mi-workflow-area .mi-variables .item .actions .mi-btn-insert:last-child {
        border-top-right-radius: 0.25rem !important;
        border-bottom-right-radius: 0.25rem !important;
    }

.mi-workflow-area .mi-variables .item .actions .mi-btn-sub-variable {
    padding: 0 10px;
    border: 1px solid var(--transparent-color);
    border-radius: 50%;
    margin: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mi-workflow-area .mi-variables .item .actions .mi-btn-insert:hover,
    .mi-workflow-area .mi-variables .item .actions .mi-btn-sub-variable:hover {
        background: var(--dark2-color);
        /*  border: 1px solid var(--light-color);
border-radius: 0;
background: var(--light3-color);*/
    }

    .mi-workflow-area .mi-variables .item .actions .mi-btn-insert:focus,
    .mi-workflow-area .mi-variables .item .actions .mi-btn-sub-variable:focus {
        /*background: var(--light3-color);*/
        background: var(--dark-hover-color);
    }

.mi-workflow-area .mi-variables .item .actions .dropdown > a {
    border: 1px solid var(--transparent-color);
}

    .mi-workflow-area .mi-variables .item.has-child .actions .mi-btn-sub-variable:hover,
    .mi-workflow-area .mi-variables .item .actions .dropdown > a:hover {
        border: 1px solid var(--light-color);
        border-radius: 0;
        border-left: 0;
    }

.mi-workflow-area .mi-variables .item.has-child .actions .dropdown > a:hover {
    border-right: 0;
    border-left: 1px solid var(--light-color);
}

.mi-workflow-area .mi-variables .mi-cards-group .mi-card .mi-card-toolbar .mi-badge {
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.mi-workflow-area .mi-create-variable,
.mi-workflow-area .mi-create-data-source {
    position: absolute;
    left: 0;
    width: 300px;
    background: var(--white-color);
    top: 0;
    padding: 10px;
    padding-bottom: 0 !important;
    border-bottom-left-radius: .25rem;
    border: 1px solid var(--light3-color);
    border-top: 0;
    opacity: 0;
    z-index: -9;
    transition: all .3s;
}

.mi-workflow-area .mi-create-data-source {
    width: 400px;
}

    .mi-workflow-area .mi-create-data-source > .mi-card > .mi-card-body {
        max-height: calc(100vh - 311px);
        overflow-x: hidden;
    }

    .mi-workflow-area .mi-create-data-source.opened,
    .mi-workflow-area .mi-create-variable.opened {
        left: -300px;
        opacity: 1;
        z-index: 9;
    }

    .mi-workflow-area .mi-create-data-source.opened {
        left: -400px;
    }


.mi-workflow-area .mi-element-insert-view {
    position: absolute;
    left: 0;
    background: var(--white-color);
    top: 0;
    padding: 10px;
    padding-bottom: 0 !important;
    border-bottom-left-radius: .25rem;
    border: 1px solid var(--light3-color);
    border-top: 0;
    opacity: 0;
    z-index: -9;
    transition: all .3s;
}

.mi-workflow-area .mi-element-insert-view {
    width: 400px;
}

.mi-has-sub-panel .mi-element-insert-view {
    width: 370px;
    border-radius: 0.45rem 0 0 0.45rem;
}

.mi-workflow-area .mi-element-insert-view > .mi-card > .mi-card-body {
    max-height: calc(100vh - 311px);
    overflow-x: hidden;
}

.mi-workflow-area .mi-element-insert-view.opened {
    left: -400px;
    opacity: 1;
}

.mi-workflow-area .mi-element-insert-view .mi-formula-description,
.mi-has-sub-panel .mi-element-insert-view .mi-formula-description {
    background-color: var(--light4-color);
    padding: 5px 15px;
    border-radius: 0.25rem;
}

    .mi-workflow-area .mi-element-insert-view .mi-formula-description p,
    .mi-has-sub-panel .mi-element-insert-view .mi-formula-description p {
        margin-bottom: 0;
        color: var(--dark2-color);
        line-height: 1.8;
    }

.mi-workflow-area .mi-element-insert-view .mi-formula-description h6,
.mi-workflow-area .mi-element-insert-view .mi-formula-description h4,
.mi-has-sub-panel .mi-element-insert-view .mi-formula-description h4,
.mi-has-sub-panel .mi-element-insert-view .mi-formula-description h6 {
    color: var(--dark2-color);
}

.mi-workflow-area .mi-element-insert-view h6 {
    font-size: 14px;
    margin-bottom: 5px;
}

.mi-workflow-area .mi-element-insert-view .mi-data {
    margin: 5px 0px 20px 0;
}

.calculation-error-msg {
    position: absolute;
    bottom: 0;
    right: 6px;
    color: var(--dark-color);
    height: 22px;
    overflow: hidden;
}

.mi-form-control.calulation-field {
    overflow-x: hidden;
    resize: vertical;
    position: relative;
    max-height: 250px;
}
.mi-form-control.calulation-field:before {
    content: attr(data-placeholder);
    color: var(--light2-color);
    padding: 0.375rem 0.35rem;
    font-weight: 600;
}
.mi-form-control.add-parameter {
    overflow-x: hidden;
    max-height: 100px;
}

    .mi-form-control.calulation-field .variables.calculate {
        display: inline-block;
    }

        .mi-form-control.calulation-field .variables.calculate p {
            margin-bottom: 0;
        }

.mi-scorecard-area .calculation-error-msg i {
    font-size: 15px;
}

.mi-scorecard-area .calculation-error-msg label {
    margin-bottom: 0;
    line-height: 1;
    margin-left: 3px;
}
/*scorecard Builder Mode*/

.mi-scorecard-area .tab-content.scrollbar-sm {
    height: calc(100vh - 323px);
    overflow-x: hidden;
}

.mi-scorecard-area .tab-content.factor.scrollbar-sm {
    height: calc(100vh - 361px);
    overflow-x: hidden;
}

.mi-scorecard-area .mi-workflow-toolbox .mi-accordion .mi-accordion-body {
    padding: 10px 0 0 0;
}

.mi-scorecard-area .variables.selected {
    background-image: inherit;
}

.mi-scorecard-area .variables,
.mi-has-sub-panel .mi-panel-variables .item .variables {
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid var(--light3-color);
    color: var(--dark2-color);
    display: flex;
    align-items: center;
    line-height: 1.0rem;
    padding: 6px 15px 6px 0;
    cursor: pointer;
    transition: .3s;
    background-image: inherit;
}

.mi-has-sub-panel .mi-panel-variables .item .variables {
    float: left;
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left;
    background-image: linear-gradient( 45deg, var(--light3-color), var(--light3-color));
}

.mi-scorecard-area .mi-workflow-variables .mi-body-panel {
    height: calc(100vh - 260px);
}

.mi-scorecard-area .mi-config-panel .mi-config-items .item .mi-form-group .mi-btn-add-parameter {
    position: absolute;
    top: -2px;
    right: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 0 !important;
    border-left: 2px solid var(--light-2-color);
    color: var(--dark-color);
    border-radius: 0.25rem;
    padding: 12px 15px;
    cursor: pointer;
    z-index: 99;
    outline: none;
    transition: .3s;
}

    .mi-scorecard-area .mi-config-panel .mi-config-items .item .mi-form-group .mi-btn-add-parameter:hover {
        padding: 12px 114px 12px 15px;
        border-left-color: var(--dark2-color) !important;
        color: var(--dark2-color) !important;
        border-left-width: 1px !important;
        background: var(--light3-color) !important;
    }

    .mi-scorecard-area .mi-config-panel .mi-config-items .item .mi-form-group .mi-btn-add-parameter > span {
        position: absolute;
        right: -30px;
        top: 3px;
        opacity: 0;
        transition: .3s;
    }

    .mi-scorecard-area .mi-config-panel .mi-config-items .item .mi-form-group .mi-btn-add-parameter:hover > span {
        font-size: 13px;
        font-weight: 700;
        right: 10px;
        opacity: 1;
        color: var(--dark2-color) !important;
    }

.mi-scorecard-area .mi-card-footer {
    padding: 10px;
}

.mi-scorecard-area .mi-selectAll-wrap {
    padding: 10px;
    margin: 0 -12px;
    background-color: var(--white-color);
}

.mi-scorecard-area .mi-form-group.mi-select2 {
    z-index: 0;
}

.mi-scorecard-area .mi-config-panel .mi-config-panel-body {
    height: calc(100vh - 313px);
}

.mi-scorecard-area .mi-config-panel .mi-config-panel-body {
    overflow-x: hidden;
    padding: 0;
    padding: 15px;
    padding-top: 0;
}

    .mi-scorecard-area .mi-config-panel .mi-config-panel-body .mi-config-items {
        padding: 0;
    }

.mi-scorecard-area .mi-create-variable, .mi-workflow-area .mi-edit-data-source {
    position: absolute;
    left: 0;
    width: 400px;
    background: var(--white-color);
    top: 0;
    padding: 10px;
    padding-bottom: 0 !important;
    border-bottom-left-radius: .25rem;
    border: 1px solid var(--light3-color);
    border-top: 0;
    opacity: 0;
    z-index: -9;
    transition: all .3s;
}

.mi-scorecard-area .mi-edit-data-source.opened {
    left: -400px;
    opacity: 1;
    z-index: 9;
}

.mi-scorecard-area .mi-edit-factor.opened {
    left: -400px;
    opacity: 1;
    z-index: 9;
}

.mi-scorecard-area .mi-create-variable, .mi-workflow-area .mi-edit-factor {
    position: absolute;
    left: 0;
    width: 400px;
    background: var(--white-color);
    top: 0;
    padding: 10px;
    padding-bottom: 0 !important;
    border-bottom-left-radius: .25rem;
    border: 1px solid var(--light3-color);
    border-top: 0;
    opacity: 0;
    z-index: -9;
    transition: all .3s;
}

.mi-scorecard-area .mi-card.mi-dash-grid {
    overflow-x: hidden;
    height: calc(100vh - 211px);
}

.mi-dual-list .mi-list {
    height: 250px;
    overflow-x: hidden;
}

.mi-dual-list .mi-toolbox-search {
    padding: 0 10px 10px 10px;
}

.mi-dual-list .mi-action {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .mi-dual-list .mi-action .mi-operator button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25px;
        height: 25px;
        padding: 0;
        margin: 10px 0;
    }

.mi-dual-list .mi-card {
    margin-bottom: 0 !important;
}

.mi-dual-list .mi-list .item {
    position: relative;
    padding: 5px 0px;
    display: flex;
}

.mi-dual-list .mi-list .variables {
    background-image: linear-gradient( 45deg, var(--light3-color), var(--light3-color));
}

.mi-dual-list .mi-list .variables {
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid var(--light3-color);
    color: var(--dark2-color);
    display: flex;
    align-items: center;
    line-height: 1.0rem;
    padding: 6px 15px 6px 0;
    cursor: pointer;
    transition: .3s;
    background-image: inherit;
    float: left;
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left;
}

.mi-dual-list .mi-list .item .actions {
    display: flex;
    align-items: center;
    position: absolute;
    right: -100px;
    top: 13px;
    background: var(--transparent);
    /* border-radius: 0.25rem; */
    opacity: 0;
    transition: all .3s;
}

.mi-dual-list .mi-list .item .variables:hover .actions {
    right: 8px;
    opacity: 1;
}

.mi-dual-list .mi-list .variables > i:not(.fa-times) {
    font-size: 20px;
    padding-right: 12px;
    margin-left: 2px;
}

.mi-dual-list .mi-list .variables > i:not(.fa-times) {
    color: var(--dark-color);
    padding-left: 8px;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 24px;
    padding-right: 9px;
    text-shadow: 3px 3px 3px var(--light-color);
}

.mi-dual-list .mi-list .variables > p {
    line-height: 1;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-color);
    padding: 0 7px;
}

    .mi-dual-list .mi-list .variables > p span:last-child {
        display: block;
        font-size: 10px;
        padding-left: 2px;
        margin-top: 5px;
        color: var(--dark-color);
        font-weight: 600;
    }

.mi-dual-list .mi-list .item .actions .mi-btn-insert {
    background: var(--dark-color);
    color: var(--white-color);
    /* border: 1px solid var(--transparent-color); */
    border-right: 0 !important;
    border-radius: 50%;
    margin: 0;
    padding: 0 30px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: .5px;
}

    .mi-dual-list .mi-list .item .actions .mi-btn-insert:first-child {
        border-top-left-radius: 0.25rem !important;
        border-bottom-left-radius: 0.25rem !important;
    }

    .mi-dual-list .mi-list .item .actions .mi-btn-insert:last-child {
        border-top-right-radius: 0.25rem !important;
        border-bottom-right-radius: 0.25rem !important;
    }

.mi-workflow-area .mi-variables {
    height: 100%;
}

.mi-scorecard-area .mi-variables {
    height: initial;
}

    .mi-scorecard-area .mi-variables.mi-widget-chart .variables,
    .mi-scorecard-area .mi-variables.widget-image .variables {
        background-image: linear-gradient( 45deg, var(--light3-color), var(--light3-color));
    }

        .mi-scorecard-area .mi-variables.mi-widget-chart .variables > i:not(.fa-times),
        .mi-has-sub-panel .mi-panel-variables .item .variables > i:not(.fa-times) {
            font-size: 20px;
            padding-right: 12px;
            margin-left: 2px;
        }

.mi-scorecard-area .nav-tabs .nav-item {
    flex: 1;
    text-align: center;
    font-weight: 700;
}

.mi-scorecard-area .mi-operator .mi-btn,
.mi-has-sub-panel .mi-operator .mi-btn {
    margin: 7px 3px 0 0;
    font-size: 17px;
    font-weight: 700;
    height: 25px;
    width: 25px;
    border: none;
}

.mi-scorecard-area .mi-select2 .select2 > .selection > .select2-selection {
    overflow: hidden;
}

.mi-scorecard-area .widgets-wrap {
    height: calc(100vh - 310px);
    overflow-x: hidden;
}

.mi-scorecard-area .mi-variables .item .actions.mi-insert-overlay,
.mi-has-sub-panel .mi-panel-variables .item .variables .actions.mi-insert-overlay {
    display: flex;
    align-items: center;
    position: absolute;
    right: -100px;
    top: 14px;
    background: var(--transparent-color);
    /* border-radius: 0.25rem; */
    opacity: 0;
    transition: all .3s;
}

.mi-scorecard-area .mi-variables .item .mi-factors:hover .actions.mi-insert-overlay,
.mi-has-sub-panel .mi-panel-variables .item .mi-factors:hover .actions.mi-insert-overlay {
    right: 0;
    opacity: 1;
    left: 0;
    margin: auto;
}

.mi-scorecard-area .mi-variables .item .mi-factors .actions .mi-btn-insert,
.mi-has-sub-panel .mi-panel-variables .item .mi-factors .actions .mi-btn-insert {
    background-color: initial;
    color: var(--white-color);
    font-weight: bold;
    font-size: 0.8rem;
    margin: inherit;
    width: 100%;
}

.mi-scorecard-area .variables.mi-factors:hover,
.mi-has-sub-panel .mi-panel-variables .item .variables.mi-factors:hover {
    background-color: var(--dark-color);
    background-image: inherit;
}

.mi-scorecard-area .mi-variables .item .dropdown.mi-factors,
.mi-has-sub-panel .mi-panel-variables .item .dropdown.mi-factors {
    position: absolute;
    right: 15px;
    top: 10px;
}

.mi-scorecard-area .variables.mi-factors:hover i:not(.fa-times),
.mi-has-sub-panel .mi-panel-variables .item .variables:hover > i:not(.fa-times) {
    text-shadow: none;
}

.mi-config-panel .mi-alert-remainder {
    margin: -30px -15px 0 -15px;
}

    .mi-config-panel .mi-alert-remainder .mi-alert {
        border: 0;
        border-radius: 0;
        padding: 5px;
    }

        .mi-config-panel .mi-alert-remainder .mi-alert .mi-alert-container {
            padding: 5px;
        }

            .mi-config-panel .mi-alert-remainder .mi-alert .mi-alert-container .mi-alert-icon {
                margin-right: 0;
            }

            .mi-config-panel .mi-alert-remainder .mi-alert .mi-alert-container .mi-alert-desc {
                padding: 0;
                margin-left: 25px;
            }

.mi-config-panel .mi-alert {
    box-shadow: none;
    padding: 0;
    border: 1px solid var(--theme-color);
}

.mi-config-panel .mi-alert-heading {
    margin: 0;
    background: var(--theme-color);
    color: var(--white-color);
    padding: 10px;
    font-size: 14px;
}

.mi-config-panel .mi-alert-desc {
    padding: 10px;
    font-size: 13px;
}

.mi-card-btn-group .mi-btn-group .mi-btn:first-child {
    border-bottom-left-radius: 0;
}

.mi-card-btn-group .mi-btn-group .mi-btn:last-child {
    border-bottom-right-radius: 0;
}

.mi-card-btn-group .mi-card-btn-group-body {
    border: 1px solid var(--theme-color);
    border-top: 0;
    border-radius: .25rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 15px 10px;
}

/*Pay Items and Grade*/

.mi-pay-items .mi-thead-sticky {
    max-height: calc(100vh - 305px);
    transition: all .3s;
}

.mi-pay-items .mi-disabled-tr td:not(:first-child):not(:last-child) {
    opacity: 0.5;
    pointer-events: none;
}

.mi-pay-items .mi-group-select.mi-select2 .select2 > .selection > .select2-selection {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--dark2-color) !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}

    .mi-pay-items .mi-group-select.mi-select2 .select2 > .selection > .select2-selection > .select2-selection__rendered {
        font-size: 12px !important;
        color: var(--dark2-color) !important;
        letter-spacing: 0.4px;
        font-weight: 600;
    }

.mi-pay-items .mi-group-select.mi-select2 .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--dark2-color) transparent transparent transparent;
}

.mi-pay-items .mi-table tbody > tr > td > input,
.mi-pay-items .mi-table tbody > tr > td > .btn-nature {
    height: 35px;
}

.mi-pay-items .mi-table tbody > tr > td > input {
    font-size: 14px;
}

.btn-entity .mi-btn:not(:last-child) {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-right: 1px solid var(--dark2-color) !important;
}

.mi-select2 > .mi-optgroup-select2.select2-container--default {
    z-index: 0;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder p {
    line-height: 1.5 !important;
    font-size: inherit !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder small {
    display: none;
}
.mi-optgroup-select2.select2-container--default .select2-results__option {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
}

    .mi-optgroup-select2.select2-container--default .select2-results__option strong {
        padding: 0 5px !important;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: 700;
        background: var(--light-hover-color);
        color: var(--dark-color);
        letter-spacing: .4px;
    }

    .mi-optgroup-select2.select2-container--default .select2-results__option.select2-results__message {
        font-size: 11px;
        letter-spacing: 0;
    }

.tbodyPayItem .collections .mi-badge {
    height: 40px;
    width: 40px;
    font-size: 15px;
    font-weight: 400 !important;
    border: 5px solid var(--light3-color);
    border-radius: .65rem !important;
    margin-left: -10px !important;
    margin-right: 10px !important;
}

.tbodyPayItem .collections > i {
    color: var(--dark2-color) !important;
}

.tbodyPayItem .collections .inpt-collection {
    font-weight: 700;
    font-size: 14px;
    background-color: transparent !important;
    border: 0;
    color: var(--dark2-color) !important;
    height: 35px;
    padding: 0 10px;
    margin-right: 80px;
}

.tbodyPayItem .inpt-date {
    width: 95%;
    margin-left: 5px;
    font-weight: 600;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.tbodyPayItem .inpt-name {
    font-weight: 600;
    padding: 0;
}

.mi-ss-table .mi-table {
    table-layout: fixed;
}

.mi-ss-table input {
    font-size: 12px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    padding-left: 0;
    padding-right: 0;
}

    .mi-ss-table input:focus {
        box-shadow: 0;
    }

.mi-ss-table .tr-child input,
.mi-ss-table .tr-child select {
    background-color: var(--white-color);
}

.mi-ss-table .mi-table > tbody:not(:last-child) tr td:first-child {
    border-radius: 0 !important;
}

.mi-ss-table .mi-table > tbody:not(:last-child) tr td:last-child {
    border-radius: 0 !important;
}

.tbodyPayItem tr td .mi-select2 ng-select2 .select2 > .selection > .select2-selection {
    width: 147px;
    margin: 0 -26px 0 0;
}

.mi-ss-table .mi-table tbody tr td.text-left .mi-select2 ng-select2 .select2 > .selection > .select2-selection {
    width: 129px;
}

    .tbodyPayItem tr td .mi-select2 ng-select2 .select2 > .selection > .select2-selection .select2-selection__rendered,
    .mi-ss-table .mi-table tbody tr td.text-left .mi-select2 ng-select2 .select2 > .selection > .select2-selection .select2-selection__rendered {
        padding-right: 23px;
    }

.mi-salary-structures > div:not(:last-child) {
    margin-bottom: 10px;
}

.mi-conditions .first-label {
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px 0 -4px;
    width: 55px;
    /* width: 50px; */
    font-size: 12px;
}

.style-2 .dropdown-menu,
.mi-conditions .dropdown-menu {
    top: 0px;
    bottom: auto;
    border: 1px solid var(--dark-color);
    border-radius: 0.25rem;
    background: var(--white-color);
    font-size: 13px;
    font-weight: 500;
    min-width: 150px;
    z-index: 99999;
}

.style-2 .dropdown-toggle.no-arrow::before {
    display: none;
}

.style-2 span.dropdown-item,
.mi-conditions span.dropdown-item {
    /*border-bottom: 1px solid var(--dark-color);*/
    font-weight: 600;
    background: var(--white-color);
    line-height: 1;
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    border-radius: .25rem;
}

    .style-2 span.dropdown-item i,
    .mi-conditions span.dropdown-item i {
        font-size: 12px;
    }

    .style-2 span.dropdown-item:hover,
    .style-2 span.dropdown-item:focus,
    .mi-conditions span.dropdown-item:hover,
    .mi-conditions span.dropdown-item:focus {
        background: var(--light3-color);
        color: var(--dark2-color);
    }

    .style-2 span.dropdown-item > span:last-child,
    .mi-conditions span.dropdown-item > span:last-child {
        display: block;
        font-size: 10px;
    }

    .style-2 span.dropdown-item:last-child,
    .mi-conditions span.dropdown-item:last-child {
        border-bottom: 0;
    }

.mi-conditions .add-btn {
    display: flex;
    align-content: center;
}

    .mi-conditions .add-btn .mi-btn {
        margin-right: 5px;
    }

    .mi-conditions .add-btn .dropdown {
        background: var(--white-color) !important;
        background-color: var(--white-color) !important;
        border-radius: .25rem;
        border: 1px solid var(--dark-color) !important;
        padding: 0;
        font-size: 12px;
    }

        .mi-conditions .add-btn .dropdown .dropdown-toggle {
            cursor: pointer;
            display: flex;
            align-items: center;
            height: 26px;
            padding-left: 10px;
            color: var(--dark2-color) !important;
        }

            .mi-conditions .add-btn .dropdown .dropdown-toggle i {
                font-size: 10px;
            }

            .mi-conditions .add-btn .dropdown .dropdown-toggle.arrow-right::after {
                top: 1px;
            }

    .mi-conditions .add-btn > i {
        display: flex;
        align-items: center;
    }


/*.mi-conditions .value {
display: flex;
align-items: center;
}*/

.mi-conditions .item .mi-form-control {
    padding: 0 10px;
}

.mi-conditions .item.item-then .mi-form-control {
    width: calc(150px + 150px + 5px) !important;
    margin-right: 5px;
}

.mi-conditions .item.item-then > .mi-btn {
    width: 150px !important;
}
/*Calendar*/
.mi-rulesets ul,
.mi-holidays ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .mi-rulesets ul > .item,
    .mi-holidays ul > .item {
        padding: 5px 10px;
        margin-bottom: 10px;
        border: 1px solid var(--light3-color);
        border-radius: .25rem;
        transition: .3s;
    }

        .mi-rulesets ul > .item:last-child,
        .mi-holidays ul > .item:last-child {
            margin-bottom: 0;
        }

        .mi-rulesets ul > .item .mi-data,
        .mi-holidays ul > .item .mi-data {
            position: relative;
            display: flex;
            align-items: center;
            transition: .3s;
        }

        .mi-rulesets ul > .item .mi-data {
            margin: -5px -10px 5px -10px;
            background: var(--lightest-color);
            border-bottom: 1px solid var(--light3-color);
            color: var(--white-color);
            padding: 5px;
        }

        .mi-rulesets ul > .item > .mi-data .type,
        .mi-holidays ul > .item > .mi-data .type {
            margin-bottom: 0;
            line-height: 1.5;
            font-size: 13px;
            color: var(--light2-color);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: -100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /*     .mi-holidays ul > .item > .mi-data i {
font-size: 20px;
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
color: var(--dark-color);
margin-right: 10px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}*/

        .mi-rulesets ul > .item > .mi-data .desc h6,
        .mi-holidays ul > .item > .mi-data .desc h6 {
            margin-bottom: 0;
            line-height: 1.5;
            font-size: 13px;
            color: var(--dark-color);
        }

        .mi-rulesets ul > .item > .mi-data .desc h6 {
            color: var(--dark2-color);
            font-weight: 700;
            font-size: 14px;
        }

        .mi-rulesets ul > .item > .mi-data .desc p,
        .mi-holidays ul > .item > .mi-data .desc p {
            margin-bottom: 0;
            line-height: 1.5;
            font-size: 13px;
            color: var(--light2-color);
        }

        .mi-rulesets ul > .item > .mi-data .mi-toggle,
        .mi-holidays ul > .item > .mi-data .mi-toggle {
            position: absolute;
            top: 0;
            right: 5px;
            bottom: 0;
            display: flex;
            align-items: center;
        }

        .mi-rulesets ul > .item > .mi-data .action,
        .mi-holidays ul > .item > .mi-data .action {
            margin-left: -5px;
            margin-right: 5px;
            z-index: 9;
        }

        .mi-rulesets ul > .item > .mi-conditions,
        .mi-holidays ul > .item > .mi-conditions {
            background: var(--lightest-color);
            margin: 5px -10px -5px -10px;
            padding: 13px 10px 10px 10px;
        }

        .mi-rulesets ul > .item > .mi-conditions {
            margin: -5px -10px;
        }

            .mi-rulesets ul > .item > .mi-conditions .item,
            .mi-holidays ul > .item > .mi-conditions .item {
                margin-bottom: 10px;
            }

        .mi-holidays ul > .item > .mi-conditions .select2-container,
        .mi-holidays ul > .item > .mi-conditions .select2 > .selection > .select2-selection {
            width: 172px !important;
        }

        .mi-rulesets ul > .item > .mi-conditions .select2-container,
        .mi-rulesets ul > .item > .mi-conditions .select2 > .selection > .select2-selection {
            width: 100% !important;
        }

        .mi-rulesets ul > .item > .mi-conditions .mi-select2 .sub-child-select-2 + .select2-container,
        .mi-holidays ul > .item > .mi-conditions .mi-select2 .sub-child-select-2 + .select2-container {
            margin-top: -3px;
        }

        .mi-rulesets ul > .item > .mi-conditions .item.item-then .mi-form-control,
        .mi-holidays ul > .item > .mi-conditions .item.item-then .mi-form-control {
            width: calc(172px + 172px + 5px) !important;
        }
/*Shifts*/
.mi-shifts > .mi-talent-cards.mi-icon-toggle-card > .mi-card {
    border-width: 0px !important;
}

    .mi-shifts > .mi-talent-cards.mi-icon-toggle-card > .mi-card > .mi-card-body {
        border-top: 2px solid var(--dark-color);
    }

.mi-shifts > .mi-talent-cards > .mi-card > .mi-card-body .mi-selectgroup {
    display: flex;
}

.mi-shifts > .mi-talent-cards > .mi-card > .mi-card-body .mi-selectgroup {
    flex: 1;
}

    .mi-shifts > .mi-talent-cards > .mi-card > .mi-card-body .mi-selectgroup > .mi-selectgroup-item:not(:last-child) {
        margin-right: 10px;
    }

.mi-shifts .owl-carousel .owl-nav button {
    position: absolute;
    top: 0;
    bottom: 0;
}

    .mi-shifts .owl-carousel .owl-nav button.owl-prev {
        left: -18px;
    }

    .mi-shifts .owl-carousel .owl-nav button.owl-next {
        right: -18px;
    }

.mi-empty-item {
    height: 320px;
    border-width: 2px;
    border-style: dashed;
    border-color: var(--light3-color);
    border-radius: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    transition: .3s;
}

    .mi-empty-item:hover {
        border-color: var(--dark-color);
    }

        .mi-empty-item:hover > .icon {
            background: var(--dark-color);
        }

            .mi-empty-item:hover > .icon i {
                color: var(--white-color);
            }

    .mi-empty-item > .icon {
        width: 50px;
        height: 50px;
        background: var(--light3-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .3s;
    }

        .mi-empty-item > .icon > i {
            color: var(--light-color);
            /*font-size: 35px;*/
        }

    .mi-empty-item .desc {
        text-align: center;
        padding: 10px 20px;
    }

        .mi-empty-item .desc h6 {
            margin-bottom: 0;
            line-height: 1.5;
            font-size: 13px;
            color: var(--dark-color);
        }

        .mi-empty-item .desc p {
            margin-bottom: 0;
            line-height: 1.5;
            font-size: 13px;
            color: var(--light2-color);
        }
/*Select2 Dropdown*/
.mi-conditions td {
    padding: 10px !important;
}

    .mi-conditions td > div {
        margin-bottom: 10px;
    }

        .mi-conditions td > div:last-child {
            margin-bottom: 0;
        }

.mi-conditions .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.mi-rulesets .mi-conditions {
    padding: 10px 0;
}

    .mi-rulesets .mi-conditions .select2 > .selection > .select2-selection {
        width: 100%;
    }

.mi-conditions .mi-btn {
    width: 45px;
    height: 33px;
    font-weight: 600;
    padding: .35rem .45rem;
    box-shadow: none;
    border: 1px solid var(--dark2-color);
}

.mi-conditions .mi-select2 {
    margin-top: -2px;
}

.mi-conditions .select2 > .selection > .select2-selection,
.mi-conditions .mi-form-control {
    width: 150px;
    display: inline-flex !important;
    text-align: left;
    background: var(--white-color) !important;
    background-color: var(--white-color) !important;
    height: 33px !important;
    align-items: center;
    border-radius: .25rem !important;
    border-color: var(--dark-color) !important;
    cursor: pointer;
    overflow: hidden;
    font-size: 12px;
}

.mi-conditions .select2 > .selection > .select2-selection {
    width: 150px;
    display: inline-flex !important;
    text-align: left;
    background: var(--white-color) !important;
    background-color: var(--white-color) !important;
    height: 33px !important;
    align-items: center;
    border-radius: .25rem !important;
    border-color: var(--dark-color) !important;
    cursor: pointer;
    overflow: hidden;
}

    .mi-conditions .select2 > .selection > .select2-selection .select2-selection__rendered {
        font-size: 12px !important;
    }

.mi-conditions .mi-select2 .select2-selection > .select2-selection__arrow {
    height: 31px !important;
}

.mi-conditions .mi-select2 .sub-child-select-2 + .select2-container,
.mi-conditions .mi-select2 .sub-child-select-2 + .select2-container .select2-selection {
    width: 150px !important;
}

.mi-conditions .mi-select2 .select2-container.select2-container--open.select2-container--above > .selection > .select2-selection {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.mi-conditions .mi-select2 .select2-container.select2-container--open.select2-container--below > .selection > .select2-selection {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.select2-container--default .select2-results__option {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
}

.mi-multi-value .select2-container,
.mi-multi-value .select2 > .selection > .select2-selection,
.mi-multi-value .select2 > .selection > .select2-selection {
    width: 100% !important;
    height: auto;
}


/*Position Hierarchy*/

.mi-chart-area {
    background: var(--lightest2-color);
    /*    background-image: linear-gradient(rgb(245 245 245) .1em, transparent .1em), linear-gradient( 90deg, rgb(245 245 245) .1em, transparent .1em);
background-size: 1em 1em;*/
    background-image: -webkit-linear-gradient( -90deg, transparent 0%, transparent 50%, var(--white-color) 50%, var(--white-color) 100%), -webkit-linear-gradient( 0deg, var(--lightest-color) 0%, var(--white-color) 50%, var(--white-color) 50%, var(--white-color) 100%);
    background-size: .45em .45em;
    border-bottom-left-radius: 0.65rem;
    border-bottom-right-radius: 0.65rem;
}

    .mi-chart-area .mi-flow-actions + .mi-btn-group {
        position: absolute;
        /* top: 10px;
left: 45px; */
        top: -19px;
        left: 25px;
    }

    .mi-chart-area.fullscreen .mi-flow-actions + .mi-btn-group {
        top: 10px;
        left: 45px;
    }

    .mi-chart-area .mi-flow-actions + .mi-btn-group .mi-btn {
        box-shadow: none;
        font-size: 10px;
        height: 25px;
        line-height: 17px;
        background: var(--white-color);
        padding: 0.15rem 0.85rem;
    }

.mi-flow-actions {
    position: absolute;
    /* top: 10px;
left: 10px; */
    top: -20px;
    left: -10px;
    z-index: 9;
    width: fit-content;
}

.mi-chart-area.fullscreen .mi-flow-actions {
    top: 10px;
    left: 10px;
}

.mi-flow-actions .mi-btn-group {
    display: block;
}

    .mi-flow-actions .mi-btn,
    .mi-flow-actions .mi-btn-group .mi-btn {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 1px 1px 5px var(--light-focus-color);
        border: 1px solid var(--light3-color) !important;
        margin-bottom: 0;
        color: var(--dark-color) !important;
        transition: .2s;
    }

        .mi-flow-actions .mi-btn span,
        .mi-flow-actions .mi-btn-group .mi-btn span {
            font-size: 9px;
        }

        /* .mi-flow-actions > .mi-btn {
margin-top: 5px;
} */

        .mi-flow-actions .mi-btn:last-child {
            border-bottom-right-radius: .25rem !important;
            border-bottom: 1px solid var(--light3-color) !important;
        }

    .mi-flow-actions .mi-btn-group .mi-btn,
    .mi-flow-actions .mi-btn {
        border-bottom: 0 !important;
    }

        .mi-flow-actions .mi-btn-group .mi-btn:first-child {
            border-top-left-radius: .25rem !important;
            border-top-right-radius: .25rem !important;
        }


        /*  .mi-flow-actions .mi-btn-group .mi-btn:first-child {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.mi-flow-actions .mi-btn-group .mi-btn:last-child {
border-bottom-left-radius: .25rem;
border-bottom-right-radius: .25rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
}*/

        .mi-flow-actions .mi-btn:hover {
            background: var(--lightest-color) !important;
            color: var(--dark-color) !important;
        }

        .mi-flow-actions .mi-btn i,
        .mi-flow-actions .mi-btn-group .mi-btn i {
            margin-right: 0;
            font-size: 10px;
        }

.mi-card-legends {
    position: absolute;
    /* bottom: 0;
right: 0; */
    bottom: -30px;
    right: -20px;
    width: 350px !important;
    z-index: 99;
}

.mi-chart-area.fullscreen .mi-card-legends {
    bottom: 0;
    right: 0;
}

.mi-card-legends.mi-cards-group.mi-card-bordered .mi-card {
    border-color: var(--light-color);
}

    .mi-card-legends.mi-cards-group.mi-card-bordered .mi-card .mi-card-header {
        border-bottom-color: var(--light-color) !important;
    }

.mi-card-legends.mi-cards-group.mi-card-bordered .mi-card {
    margin-bottom: 0 !important;
}

.mi-card-legends .mi-legend-body {
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
}

    .mi-card-legends .mi-legend-body .col-6 {
        padding: 5px 2px;
        border-right: 1px dashed var(--light-color);
        border-bottom: 1px dashed var(--light-color);
        font-size: 12px;
    }

        .mi-card-legends .mi-legend-body .col-6:nth-child(2n) {
            border-right: 0;
        }

        .mi-card-legends .mi-legend-body .col-6:nth-last-child(-n+2) {
            border-bottom: 0;
        }

    .mi-card-legends .mi-legend-body i {
        width: 25px !important;
        display: inline-flex;
        justify-content: center;
    }

        .mi-card-legends .mi-legend-body i .status {
            width: 8px;
            height: 8px;
            display: inline-flex;
            border-radius: 50%;
        }

            .mi-card-legends .mi-legend-body i .status.danger {
                background: var(--danger-color);
            }

            .mi-card-legends .mi-legend-body i .status.warning {
                background: var(--warning-color);
            }

            .mi-card-legends .mi-legend-body i .status.success {
                background: var(--success-color);
            }

            .mi-card-legends .mi-legend-body i .status.info {
                background: var(--info-color);
            }

.mi-card-legends.collapsed {
    width: 150px !important;
    height: 0 !important;
    bottom: 0;
}

.mi-chart-area.fullscreen .mi-card-legends.collapsed {
    bottom: 30px;
}

.mi-card-legends.collapsed .mi-card {
    border-bottom: 0 !important;
}

    .mi-card-legends.collapsed .mi-card .mi-card-header {
        font-size: 12px;
        height: 28px;
    }

        .mi-card-legends.collapsed .mi-card .mi-card-header > i {
            display: none;
        }

        .mi-card-legends.collapsed .mi-card .mi-card-header .mi-card-toolbar i {
            font-size: 10px;
        }

.mi-rules {
    position: absolute;
    bottom: -30px;
    z-index: 99;
}

.mi-chart-area.fullscreen .mi-rules {
    bottom: 0;
}

.mi-rules .mi-card {
    margin-bottom: 0 !important;
    border-color: var(--light-color) !important;
}

.mi-rules.mi-cards-group.mi-card-bordered .mi-card .mi-card-header {
    border-bottom-color: var(--light-color) !important;
}

.mi-rules .mi-card-body {
    padding: 11px !important;
}

.mi-rules .mi-cbrb {
    display: block;
    margin-bottom: 15px;
}

    .mi-rules .mi-cbrb:last-child {
        margin-bottom: 0;
    }


/*Selection Listing*/

/* .mi-selection-list {
} */

.mi-selection-list .item {
    border-radius: .45rem;
    border-width: 2px;
    border-style: solid;
    border-color: var(--transparent-color);
    position: relative;
    display: flex;
    padding: 10px;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    transition: .3s;
}

    .mi-selection-list .item:last-child {
        margin-bottom: 0;
    }

    .mi-selection-list .item.selected,
    .mi-selection-list .item:hover {
        border-color: var(--success-color);
    }

    .mi-selection-list .item img {
        width: 35px;
        height: 35px;
    }

    .mi-selection-list .item .desc {
        width: 90%;
        padding-left: 10px;
    }

        .mi-selection-list .item .desc h6 {
            margin: 0;
            color: var(--dark2-color);
        }

        .mi-selection-list .item .desc p {
            line-height: 1.5;
            margin: 0;
        }

    .mi-selection-list .item > i {
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        display: flex;
        align-items: center;
        color: var(--success-color);
        font-size: 16px;
    }

    .mi-selection-list .item.selected > i {
        opacity: 1;
    }

/* full-modal-start */
.mi-modal-full {
    width: 100%;
    margin: 0;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    min-height: 100%;
    border-radius: 0;
}
.mi-modal-full .modal-header {
    padding: 15px 0 !important;
    justify-content: center;
}
.mi-modal-full .modal-content {
    height: 100%;
    border-radius: 0;
}

/* full-modal-end */

/*Calendar View*/

.mi-calendar .modal-body .mi-close {
    position: absolute;
    top: 10px;
    left: 10px;
    color: var(--white-color);
    cursor: pointer;
    opacity: 0.5;
    z-index: 99;
}

    .mi-calendar .modal-body .mi-close:hover {
        opacity: 1;
    }

    .mi-calendar .modal-body .mi-close i {
        transition: .3s;
    }

    .mi-calendar .modal-body .mi-close:hover i {
        transform: rotate(90deg);
    }

.mi-calendar .modal-body {
    padding: 0;
    height: 480px;
}

.mi-calendar .mi-calendar-base,
.mi-calendar .mi-calendar-sidebar {
    height: 480px;
    z-index: 9;
}

.mi-calendar-base {
    border-radius: .55rem;
    background-color: white;
    position: relative;
    z-index: -1;
    color: black;
}

.mi-calendar .mi-calendar-base .year {
    color: var(--light2-color);
    font-size: 30px;
    float: right;
    position: relative;
    right: 38px;
    top: 20px;
    font-weight: bold;
    user-select: none;
}

.mi-calendar .mi-calendar-base .triangle {
    width: 20px;
    height: 20px;
    color: var(--light2-color);
    float: right;
    text-align: center;
    position: relative;
    top: 32px;
    cursor: pointer;
    transition: .3s;
}

    .mi-calendar .mi-calendar-base .triangle.left {
        right: 145px;
    }

    .mi-calendar .mi-calendar-base .triangle.right {
        left: 70px;
    }

    .mi-calendar .mi-calendar-base .triangle :hover {
        color: var(--theme-color);
    }

    .mi-calendar .mi-calendar-base .triangle :hover {
        color: var(--theme-color);
    }

.mi-calendar .mi-calendar-base .months,
.mi-calendar .mi-calendar-base .month-line,
.mi-calendar .mi-calendar-base .days,
.mi-calendar .mi-calendar-base .num-dates {
    left: 250px;
    width: 550px;
    display: inline-block;
    text-align: center;
}

.mi-calendar .mi-calendar-base .months {
    color: var(--light-color);
    position: relative;
    top: 90px;
    /* word-spacing: 15px; */
    cursor: pointer;
    text-align: center;
}

    .mi-calendar .mi-calendar-base .months span {
        margin: 0 7.5px;
        user-select: none;
        transition: .3s;
    }

        .mi-calendar .mi-calendar-base .months span:hover,
        .mi-calendar .mi-calendar-base .months span.selected {
            color: var(--theme-color);
        }

        .mi-calendar .mi-calendar-base .months span.selected {
            font-weight: 800;
        }

.mi-calendar .mi-calendar-base .month-line {
    border-color: var(--light3-color);
    position: relative;
    top: 90px;
    text-align: center;
    margin: 1rem 0;
}

.mi-calendar .mi-calendar-base .days span,
.mi-calendar .mi-calendar-base .num-dates .week > div {
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*margin: 0 14.5px;*/
    margin: 0 0;
    user-select: none;
}

.mi-calendar .mi-calendar-base .days span {
    margin: 0 11.5px;
}

.mi-calendar .mi-calendar-base .days {
    color: var(--light-color);
    position: relative;
    font-size: 18px;
    top: 70px;
    /* word-spacing: 25px; */
    font-weight: 600;
    padding: 0 1rem;
}

.mi-calendar .mi-calendar-base .num-dates {
    position: relative;
    top: 75px;
    padding: 0 1rem;
    z-index: 1;
}

    .mi-calendar .mi-calendar-base .num-dates .week > div {
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        transition: .2s;
    }

        .mi-calendar .mi-calendar-base .num-dates .week > div:not(.disabled) {
            font-weight: 600;
        }

    .mi-calendar .mi-calendar-base .num-dates .week {
        word-spacing: 25px;
        margin-bottom: 1px;
    }

        .mi-calendar .mi-calendar-base .num-dates .week > div:hover,
        .mi-calendar .mi-calendar-base .num-dates .week > div.selected {
            border-radius: 50%;
            background-color: var(--theme-color);
            color: var(--white-color);
        }

        .mi-calendar .mi-calendar-base .num-dates .week > div.disabled {
            color: var(--light-color);
        }

        .mi-calendar .mi-calendar-base .num-dates .week > div > span {
            line-height: 3.3;
            user-select: none;
        }

        .mi-calendar .mi-calendar-base .num-dates .week > div > .day-event {
            list-style: none;
            margin-top: -14px;
            text-align: center;
            line-height: 6px;
            overflow: hidden;
        }

            .mi-calendar .mi-calendar-base .num-dates .week > div > .day-event span {
                display: inline-block;
                vertical-align: top;
                width: 5px;
                height: 5px;
                margin: 0 1px;
                border-radius: 50%;
                user-select: none;
            }

                .mi-calendar .mi-calendar-base .num-dates .week > div > .day-event span.info {
                    background: var(--info-color);
                }

                .mi-calendar .mi-calendar-base .num-dates .week > div > .day-event span.success {
                    background: var(--success-color);
                }

                .mi-calendar .mi-calendar-base .num-dates .week > div > .day-event span.warning {
                    background: var(--warning-color);
                }

                .mi-calendar .mi-calendar-base .num-dates .week > div > .day-event span.danger {
                    background: var(--danger-color);
                }

.mi-calendar .mi-calendar-sidebar {
    width: 250px;
    border-radius: .55rem 0 0 .55rem;
    background-color: var(--theme-color);
    position: relative;
    bottom: 480px;
    color: var(--white-color);
}

    .mi-calendar .mi-calendar-sidebar .num-date {
        font-size: 107px;
        width: 50%;
        margin: 0 auto;
        font-weight: 700;
        top: 10px;
        position: relative;
    }

    .mi-calendar .mi-calendar-sidebar .day {
        width: 100%;
        margin: auto;
        font-size: 23px;
        position: relative;
        bottom: 10px;
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    .mi-calendar .mi-calendar-sidebar .events {
        font-size: 15px;
        position: relative;
        margin-left: 20px;
        top: 10px;
    }

        .mi-calendar .mi-calendar-sidebar .events > h6 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

    .mi-calendar .mi-calendar-sidebar .event-line {
        width: 90%;
        border-top-color: var(--white-color);
    }

.mi-event-legend .item span {
    padding-left: 20px;
    padding-right: 10px;
    position: relative;
    font-weight: 600;
    font-size: 13px;
}

    .mi-event-legend .item span:before {
        content: "";
        width: 7px;
        height: 7px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
    }

    .mi-event-legend .item span.info:before {
        background: var(--info-color);
    }

    .mi-event-legend .item span.success:before {
        background: var(--success-color);
    }

    .mi-event-legend .item span.warning:before {
        background: var(--warning-color);
    }

    .mi-event-legend .item span.danger:before {
        background: var(--danger-color);
    }

/*Year Calendar*/
.mi-year-calendar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    padding: 0;
    border-top-right-radius: 0;
    border-right: 1px solid var(--light3-color);
    /*width: calc(100% + 10px);*/
}

    .mi-year-calendar .calendar-header {
        background: var(--theme-color);
        color: var(--white-color);
        border: 0;
        border-top-left-radius: .45rem;
        /*border-top-right-radius: .45rem;*/
        margin-bottom: 10px;
    }

        .mi-year-calendar .calendar-header .year-title {
            font-weight: 400;
        }

        .mi-year-calendar .calendar-header table th {
            transition: .3s;
        }

            .mi-year-calendar .calendar-header table th:hover {
                background: var(--hover-color);
            }

            .mi-year-calendar .calendar-header table th.prev:hover {
                border-top-left-radius: .65rem;
            }

            .mi-year-calendar .calendar-header table th.next:hover {
                border-top-right-radius: 0;
            }

            .mi-year-calendar .calendar-header table th.next {
                border-top-right-radius: 0;
            }

    .mi-year-calendar table.month thead tr:last-child {
        margin-bottom: 10px;
    }

    .mi-year-calendar table.month th.month-title {
        font-weight: 600;
        font-size: 17px;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: left;
        /*background: var(--light4-color);*/
        padding: 5px 10px;
        border-bottom: 1px solid var(--light3-color);
    }

    .mi-year-calendar table.month th.day-header {
        font-size: 14px;
        font-weight: 400;
        text-transform: uppercase;
        color: var(--light-color);
        padding: 10px;
    }

    .mi-year-calendar .months-container {
        padding: 5px;
    }

        .mi-year-calendar .months-container .month-container {
            height: 275px;
        }

    .mi-year-calendar table.month td.day .day-content {
        padding: 7px 10px;
        font-weight: 600;
        color: var(--dark-color);
        transition: .3s;
    }

        .mi-year-calendar table.month td.day .day-content:hover {
            background: var(--light3-color);
            cursor: pointer;
            color: var(--dark2-color);
            border-radius: 50%;
        }

.mi-multiple-days .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .mi-multiple-days .item > .mi-clickable-icon:first-child {
        margin: 0 10px 0 0;
    }

    .mi-multiple-days .item > .mi-clickable-icon:last-child {
        margin: 0 0 0 10px;
    }

    .mi-multiple-days .item > .mi-selectgroup > .mi-selectgroup-item {
        margin-bottom: 0;
    }

.mi-create-event {
    position: sticky;
    top: 0;
}

    .mi-create-event .selected-day {
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI";
        border-bottom: 1px solid var(--light3-color);
        text-align: center;
    }

        .mi-create-event .selected-day .num-date {
            font-size: 67px;
            width: 100%;
            margin: 0 auto;
            font-weight: 400;
            position: relative;
            color: var(--dark-color);
        }

        .mi-create-event .selected-day .day {
            font-size: 23px;
            position: relative;
            bottom: 5px;
            letter-spacing: 2px;
            padding-bottom: 20px;
            text-transform: uppercase;
            color: var(--dark-color);
        }

    .mi-create-event .mi-close {
        position: absolute;
        top: 10px;
        right: 10px;
        color: var(--dark2-color);
        cursor: pointer;
        opacity: 0.5;
        z-index: 9;
    }

        .mi-create-event .mi-close:hover {
            opacity: 1;
        }

        .mi-create-event .mi-close i {
            transition: .3s;
        }

        .mi-create-event .mi-close:hover i {
            transform: rotate(90deg);
        }

    .mi-create-event .mi-create-event-body .toggle {
        border-bottom: 1px solid var(--light3-color);
        padding: 10px 0;
        margin-bottom: 0;
    }
/* Collapsible Modal Side Panel */
.mi-collapsible-panel {
    height: calc(100% + 63.19px);
    padding: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1200px;
    width: 300px;
    background: var(--white-color);
    border-left: 1px solid var(--light3-color);
    border-radius: 0 0.65rem 0.65rem 0;
    transition: .3s;
}

    .mi-collapsible-panel.opened {
        right: -300px;
    }
    /* .mi-collapsible-panel .items{
max-height: 208px;
overflow-x: hidden;
margin: -10px;
padding: 10px;
} */
    .mi-collapsible-panel .mi-collapsible-body {
        height: 96.5%;
        overflow-x: hidden;
        margin: -10px;
        padding: 10px;
    }

    .mi-collapsible-panel .items:first-child > h6 {
        margin-bottom: 20px !important;
    }

    .mi-collapsible-panel .items > .item:last-child > h6 {
        margin-bottom: 20px;
    }

    .mi-collapsible-panel .items > .item > h6 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .mi-collapsible-panel .items > .item > h6 > span {
            margin-left: 10px;
        }

    .mi-collapsible-panel .items > .item:not(:last-child) {
        border-bottom: 1px dashed var(--light3-color);
        margin-bottom: 10px;
    }

.mi-btn-collapsible-panel {
    position: absolute;
    bottom: 12px;
    right: -119px;
    border-radius: 0.45rem 0.45rem 0 0;
    transform: rotate(90deg);
    box-shadow: none;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 500;
}
/* Interview Start */
.mi-interview .mi-interview-header {
    background: var(--lightest-color);
    padding: 20px;
}

.mi-interview .mi-interview-body {
    padding: 20px;
}

    .mi-interview .mi-interview-body > .row > .col-lg-12:not(:last-child) .mi-qa {
        border-bottom: 1px dashed var(--light-color);
        margin-bottom: 20px;
    }
/* Interview End */
/* Transfer Box Start */
/* .mi-transfer-box{
border: 1px solid var(--light3-color);
margin: auto;
margin-top: 10px;
padding: 15px 10px;
border-radius: 0.25rem;
} */
.mi-transfer-box {
    background: var(--white-color);
    border-radius: .45rem;
    padding: 10px;
    box-shadow: 0 0 10px var(--light3-color);
}
/* Transfer Box End */
/*Performance Section Start*/
.mi-performance {
    margin: -9px -10px;
    /* padding: 20px; */
    background: var(--lightest-color);
    border-radius: 0 0 0.45rem 0.45rem;
}

    .mi-performance .mi-avatar.mi-avatar-lg {
        height: 100%;
        width: 100%;
    }

    .mi-performance .mi-card {
        height: 100%;
    }

    .mi-performance .mi-card {
        /*box-shadow: rgb(45 62 80 / 12%) 0px 1px 5px 0px;*/
        border-radius: .15rem;
        margin-bottom: 10px;
    }

    .mi-performance .mi-card-body .dropdown-status > .dropdown-toggle.arrow-left::after {
        top: 0;
        right: 30px;
    }

    .mi-performance .mi-position-header {
        border-top-left-radius: 0.65rem;
        border-top-right-radius: 0.65rem;
    }

    .mi-performance .mi-card {
        margin: 0 !important;
    }

        .mi-performance .mi-card .mi-card-header > h6 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 30px;
            margin: 0;
            width: calc(100% - 45px);
            font-size: 14px;
        }

        .mi-performance .mi-card .mi-card-header h6 {
            width: calc(100% - 85px);
        }

    /* .mi-grid-stack .grid-stack > .grid-stack-item > .grid-stack-item-content::-webkit-scrollbar {
    width: 3px;
    height: 5px;
}

.mi-grid-stack .grid-stack > .grid-stack-item > .grid-stack-item-content::-webkit-scrollbar-thumb {
    border-radius: .45rem;
    background-color: var(--light-color) !important;
}

.mi-grid-stack .grid-stack > .grid-stack-item > .grid-stack-item-content::-webkit-scrollbar-track {
    background: var(--lightest-color) !important;
}
.mi-performance .mi-performance-header {
    margin: -20px -20px;
    background: var(--white-color);
    padding: 20px;
} */

    .mi-content > p,
    .mi-performance .mi-performance-header .content > p {
        font-size: 11px;
        margin: 0;
        margin-bottom: 5px;
        letter-spacing: .5px;
        color: var(--dark-focus-color);
        font-weight: 700;
        text-transform: uppercase;
    }

    .mi-content > h6,
    .mi-performance .mi-performance-header .content > h6 {
        font-size: 18px;
        font-weight: 300;
        color: var(--dark-color);
    }

    .mi-performance .mi-stats {
        margin-bottom: 30px;
    }

        .mi-performance .mi-stats .mi-stats-content {
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
            font-size: 11px;
            margin: 0;
            margin-bottom: 5px;
            letter-spacing: .5px;
            color: var(--dark-focus-color);
            text-transform: uppercase;
        }

            .mi-performance .mi-stats .mi-stats-content p {
                font-weight: 700;
            }

            .mi-performance .mi-stats .mi-stats-content > p {
                border-bottom: 2px solid var(--light3-color);
                margin-bottom: 5px;
            }

            .mi-performance .mi-stats .mi-stats-content > .content {
                display: flex;
            }

                .mi-performance .mi-stats .mi-stats-content > .content > div {
                    flex: 1;
                }

                .mi-performance .mi-stats .mi-stats-content > .content p {
                    margin: 0;
                }

                .mi-performance .mi-stats .mi-stats-content > .content h6 {
                    font-size: 21px;
                    font-weight: 400;
                    color: var(--dark-color);
                }

    .mi-performance .item {
        /*width: 200px;*/
        margin-bottom: 15px;
    }

    .mi-performance .owl-carousel .owl-nav button i {
        font-size: 25px;
        height: 47px;
        position: absolute;
        width: 26px;
        cursor: pointer;
        top: 25px;
        transition: .3s;
    }

    .mi-performance .owl-carousel .owl-nav {
        position: absolute;
        right: 0;
        top: -57px;
    }

        .mi-performance .owl-carousel .owl-nav button:hover {
            color: var(--dark2-color);
        }

        .mi-performance .owl-carousel .owl-nav button .next-slide {
            right: -8px;
        }

        .mi-performance .owl-carousel .owl-nav button .prev-slide {
            left: -52px;
        }

        .mi-performance .owl-carousel .owl-nav button.disabled {
            pointer-events: none;
            opacity: 0.2;
        }

    .mi-performance .mi-info-card {
        background-image: none !important;
        background: var(--white-color);
        color: var(--dark2-color);
        border: 1px solid var(--light-color);
    }

        .mi-performance .mi-info-card p:first-of-type {
            font-weight: 300 !important;
        }

        .mi-performance .mi-info-card > i {
            top: 15px;
            right: 15px;
        }

.mi-info-card .mi-extra-info {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0.45rem;
    background: var(--white-color);
    /*border: 1px solid var(--light-color);*/
    color: var(--dark-color);
    display: flex;
    flex-flow: row wrap;
    align-content: space-between;
    justify-content: space-between;
    transition: .3s;
}

.mi-info-card:hover .mi-extra-info {
    visibility: visible;
    opacity: 1;
}

.mi-info-card .mi-extra-info h6 {
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 11px;
    margin-bottom: 0;
    padding: 4px 8px;
    width: 50%;
    color: var(--light2-color);
}

    /* .mi-info-card .mi-extra-info h6:not(:last-child) {
  border-bottom: 1px solid var(--light3-color);
}*/

    .mi-info-card .mi-extra-info h6 > span {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
        font-weight: 500;
        font-size: 12px;
        color: var(--dark-color);
        display: block;
    }

.mi-performance .mi-performance-body {
    background: var(--white-color);
    border-radius: 0 0 0.45rem 0.45rem;
    margin: 20px -20px -20px;
    padding: 10px 20px 20px;
}

    .mi-performance .mi-performance-body .mi-card .mi-card-header {
        border-bottom: 0;
        padding-left: 0;
    }

        .mi-performance .mi-performance-body .mi-card .mi-card-header > h4 {
            color: var(--dark-color) !important;
            font-weight: 500;
            font-size: 18px;
        }

    .mi-performance .mi-performance-body .mi-leaderboard {
        margin-top: -45px;
        padding-bottom: 10px;
    }

        .mi-performance .mi-performance-body .mi-leaderboard > table > thead > tr > th {
            background: var(--transparent-color) !important;
            transition: .3s;
            cursor: pointer;
        }

            .mi-performance .mi-performance-body .mi-leaderboard > table > thead > tr > th:nth-child(n + 3) {
                border-bottom: 2px solid var(--light3-color);
            }

            .mi-performance .mi-performance-body .mi-leaderboard > table > thead > tr > th > div {
                font-size: 13px;
                color: var(--light2-color);
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: -6px;
                transition: .3s;
            }

                .mi-performance .mi-performance-body .mi-leaderboard > table > thead > tr > th > div > i {
                    margin-bottom: 4px;
                }

        .mi-performance .mi-performance-body .mi-leaderboard > table > tbody {
            position: relative;
            top: 10px;
        }

        .mi-performance .mi-performance-body .mi-leaderboard > table > thead > tr > th:nth-child(n + 3).active:after {
            content: '';
            background: var(--dark-color);
            width: 100%;
            height: 12px;
            position: absolute;
            left: 0;
            bottom: -12px;
        }

        .mi-performance .mi-performance-body .mi-leaderboard > table > thead > tr > th:nth-child(n + 3).active,
        .mi-performance .mi-performance-body .mi-leaderboard > table > thead > tr > th:nth-child(n + 3):hover {
            position: relative;
            border-radius: 0.45rem 0.45rem 0 0;
            background: var(--dark2-color) !important;
        }

            .mi-performance .mi-performance-body .mi-leaderboard > table > thead > tr > th:nth-child(n + 3).active > div,
            .mi-performance .mi-performance-body .mi-leaderboard > table > thead > tr > th:nth-child(n + 3):hover > div {
                color: var(--white-color);
                margin-top: 0;
            }

        .mi-performance .mi-performance-body .mi-leaderboard > table > tbody > tr > td:nth-child(n + 3).active {
            background: var(--dark2-color) !important;
            color: var(--white-color) !important;
        }

        .mi-performance .mi-performance-body .mi-leaderboard > table > tbody > tr:last-child > td.active {
            border-radius: 0 0 0.65rem 0.65rem;
        }

        .mi-performance .mi-performance-body .mi-leaderboard > table > tbody > tr > td:not(:nth-child(2)) {
            font-size: 16px;
            font-weight: 500;
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI" !important;
        }

        .mi-performance .mi-performance-body .mi-leaderboard > table > tbody > tr:first-child > td:first-child {
            font-style: italic;
        }

        .mi-performance .mi-performance-body .mi-leaderboard > table > tbody > tr.tr-my-place {
            background-color: var(--transparent-color);
        }

            .mi-performance .mi-performance-body .mi-leaderboard > table > tbody > tr.tr-my-place > td:nth-child(-n+2) {
                border-top: 1px solid var(--transparent-color) !important;
            }

            .mi-performance .mi-performance-body .mi-leaderboard > table > tbody > tr.tr-my-place > td {
                background-color: var(--sticky-hover-2);
                color: var(--dark2-color);
            }

                .mi-performance .mi-performance-body .mi-leaderboard > table > tbody > tr.tr-my-place > td:first-child {
                    border-radius: 0.65rem 0 0 0.65rem;
                }

                .mi-performance .mi-performance-body .mi-leaderboard > table > tbody > tr.tr-my-place > td:last-child {
                    border-radius: 0 0.65rem 0.65rem 0;
                }

.mi-performance .mi-performance-score {
    margin: 10px -20px -20px;
    padding: 20px;
    background: var(--white-color);
    border-radius: 0 0 0.45rem 0.45rem;
}
/*Performance Section End*/
/*Mobile Portrait Screens*/
@media only screen and (max-width: 480px) {
    .mi-toggle-icon-btns > .mi-btn-item > img {
        width: 60px;
        height: 60px;
    }

    .mi-toggle-icon-btns > .mi-btn-item {
        width: 100px;
        display: block;
        background-size: 5px 100%;
    }

        .mi-toggle-icon-btns > .mi-btn-item > .desc h6 {
            margin-bottom: 0;
        }

        .mi-toggle-icon-btns > .mi-btn-item > .desc p {
            display: none;
        }

    .mi-toggle-icon-btns.mi-fixed-width .mi-btn-item {
        width: 80px;
    }

        .mi-toggle-icon-btns.mi-fixed-width .mi-btn-item > .desc h6 {
            font-size: 14px;
        }

    .mi-toggle-icon-btns.mi-fixed-width > .mi-btn-item > .mi-check-icon, .mi-toggle-icon-btns.mi-fixed-width > .mi-btn-item > .mi-cbrb {
        right: 3px;
        top: -6px;
        transform: scale(0.8);
    }
    /*Filters*/
    .mi-filters {
        margin-bottom: 40px !important;
    }

    .mi-position-header .mi-btn .fas,
    .mi-position-header .dropdown .fas {
        display: none;
    }

    .hidden-item,
    .hidden-item + br {
        display: none !important;
    }
    /*Datatable*/
    .dataTables_length {
        margin-top: 10px;
        text-align: left !important;
    }

    .dataTables_filter {
        text-align: right !important;
    }
    /*Kanban Board*/
    .mi-recruitment .mi-recruitment-nav .mi-form-group {
        width: 100%;
    }
    /*Create Position*/
    .mi-btn-arrow {
        top: 5vh;
        left: -131px;
        transform: rotate(90deg);
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        box-shadow: -1px 3px 6px var(--light-focus-color);
    }

    .mi-fixed-card {
        position: fixed;
        left: initial;
        right: 0;
        padding-left: 0 !important;
        bottom: 0;
        width: 170px;
    }

        .mi-fixed-card.opened {
            right: -170px;
        }

        .mi-fixed-card .mi-btns {
            display: block;
        }

            .mi-fixed-card .mi-btns a {
                margin-bottom: 15px;
            }

                .mi-fixed-card .mi-btns a:last-child {
                    margin-bottom: 0;
                }

    .mi-cards-group .mi-card,
    .mi-cards-group.mi-card-bordered .mi-card:last-child {
        margin-bottom: 20px !important;
    }

    .mi-cards-group.mi-card-bordered .mi-card {
        margin-bottom: 0 !important;
    }

    .mi-count-cards {
        flex-wrap: wrap;
    }

        .mi-count-cards > .mi-card-item {
            flex: 100% 0 0;
        }

    .mp-l-10 {
        padding-left: 10px !important;
    }

    .mp-l-25 {
        padding-left: 25px !important;
    }

    .mp-r-10 {
        padding-right: 10px !important;
    }

    .mm-b-10 {
        margin-bottom: 10px !important;
    }

    .mm-b-20 {
        margin-bottom: 20px !important;
    }

    .mm-b-30 {
        margin-bottom: 30px !important;
    }

    .mm-b-60 {
        margin-bottom: 60px;
    }

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

    .mm-t-20 {
        margin-top: 20px !important;
    }

    .mm-t-30 {
        margin-top: 30px !important;
    }

    .mm-t-60 {
        margin-top: 60px;
    }

    .mw-500px {
        width: 500px !important;
    }

    .mw-600px {
        width: 600px !important;
    }

    .mmw-600px {
        min-width: 600px !important;
    }

    .mw-700px {
        width: 700px !important;
    }

    .mmw-700px {
        min-width: 700px !important;
    }

    .mw-800px {
        width: 800px !important;
    }

    .mmw-800px {
        min-width: 800px !important;
    }

    .mw-900px {
        width: 900px !important;
    }

    .mmw-900px {
        min-width: 900px !important;
    }

    .mw-1000px {
        width: 1000px !important;
    }

    .mmw-1000px {
        min-width: 1000px !important;
    }

    .mw-1200px {
        width: 1200px !important;
    }

    .mmw-1200px {
        min-width: 1200px !important;
    }

    .mw-1500px {
        min-width: 1500px !important;
    }
    /*Profile*/
    .mi-profile-values {
        margin-top: 20px;
    }

    /* .mi-talent-cards .mi-card .mi-card-header {
padding: 10px 10px;
line-height: 1;
} */

    .mi-profile-cards {
        padding: 0;
    }

        .mi-profile-cards .card-items {
            margin-bottom: 10px;
        }

        .mi-profile-cards div:last-child .card-items {
            margin-bottom: 0;
        }

    .mi-profile-header .col-lg-8.d-flex {
        display: block !important;
    }

    .mi-profile-header .mi-avatar {
        margin-right: 0 !important;
        margin-bottom: 30px !important;
    }

    .mi-profile-header .mi-profile-values ul:first-of-type {
        display: block;
    }

        .mi-profile-header .mi-profile-values ul:first-of-type li {
            margin-bottom: 0 !important;
        }

            .mi-profile-header .mi-profile-values ul:first-of-type li:before {
                content: "" !important;
                padding-right: 0 !important;
            }

    .mi-profile-sub-values {
        margin-bottom: 20px;
    }

    .mi-cards-group > .row > div {
        margin-bottom: 20px;
    }

    .mi-performance .mi-card {
        height: 100%;
    }

    .mi-performance .mi-avatar.mi-avatar-lg {
        height: 100%;
        width: 100%;
    }

    .mi-info-card {
        margin-bottom: 10px;
    }

    .nav-team-btns {
        position: fixed;
        bottom: -1px;
        z-index: 99;
        left: 0;
        right: 0;
    }

        .nav-team-btns .mi-btn-group {
            position: initial !important;
            width: 100%;
            /* border-top: 1px solid var(--light-color); */
        }

            .nav-team-btns .mi-btn-group .mi-btn {
                width: 50%;
                background-color: var(--dark2-color) !important;
                color: var(--white-color) !important;
                padding: 0;
                line-height: 1;
            }

    .table-week .mi-table {
        width: 1200px;
    }

    .mi-dashboard-recruitment .mi-amounts {
        margin-bottom: 20px;
    }

    .mi-dashboard-recruitment .mi-table {
        margin: 0;
        width: 1400px;
    }

    .mi-month-table .mi-table {
        width: 100%;
    }

    .mi-timeline {
        padding-top: 80px;
    }

    .mi-legend-timesheet {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .mi-back-team {
        position: absolute;
        cursor: pointer;
        z-index: 9;
        margin-top: -5px;
        background: var(--white-color);
        padding: 0 10px 0 0;
    }

    .mi-side-panel.right {
        right: -100%;
    }

    .mi-side-panel {
        width: 100%;
    }
    /*Dashboard Start*/
    .mi-dash-header .mi-dash-left {
        margin-bottom: 20px;
        display: block;
        text-align: center;
        border-right-width: 0px;
    }

        .mi-dash-header .mi-dash-left > div:not(.mi-projections) {
            margin-top: 20px;
            margin-left: 0px;
        }

        .mi-dash-header .mi-dash-left .mi-text-status {
            justify-content: center;
        }

    .mi-dash-header .mi-dash-right div.row {
        width: auto !important;
    }

    .mi-dash-header .mi-dash-right {
        padding-left: 15px !important;
    }

        .mi-dash-header .mi-dash-right .mi-amounts:nth-child(-n+2) {
            margin-bottom: 20px;
        }

    .mi-dash-cards {
        margin-right: 15px;
        margin-left: 15px;
        border-right-width: 0px;
    }

    .mi-dash-shortcuts:nth-child(n+5) {
        border-bottom: 1px solid var(--lightest-color);
    }

    .mi-dash-shortcuts:nth-child(n+7) {
        border-bottom: 0;
    }

    .mi-dash-filters {
        bottom: -680px;
        width: 100%;
        padding: 0 !important;
    }

        .mi-dash-filters:hover {
            bottom: -670px;
        }

        .mi-dash-filters .owl-carousel {
            padding: 30px;
        }

        .mi-dash-filters.opened > .mi-card > .mi-card-body > .row > div:last-child {
            margin-bottom: 70px;
        }

        .mi-dash-filters.opened > .mi-btn.mi-btn-flat {
            position: absolute;
            bottom: 60px;
            top: initial;
            left: 20px;
            border-radius: .25rem !important;
            width: 43%;
            justify-content: center;
        }

            .mi-dash-filters.opened > .mi-btn.mi-btn-flat.mi-clear-filters {
                right: 20px !important;
                left: auto;
            }

        .mi-dash-filters .br-r-1-lightest {
            border-right-width: 0 !important;
        }
    /*Dashboard End*/
    .mi-setup-content .mi-card .mi-card-footer {
        padding: 20px 40px !important;
    }

    .mi-dash-welcome-header {
        padding: 20px 45px 90px 45px;
    }

        .mi-dash-welcome-header .actions {
            flex-direction: row;
            width: 90%;
            right: 0;
            top: initial;
            bottom: 10px;
            justify-content: initial;
        }

            .mi-dash-welcome-header .actions > .mi-btn:first-child {
                margin-right: 15px;
            }

            .mi-dash-welcome-header .actions > .mi-btn:last-child {
                margin-right: 0;
            }

    .mi-back-to-page {
        top: -14px;
    }

        .mi-back-to-page ~ .mi-card {
            margin-top: 10px;
        }
}
/*Mobile Landscape Screens*/
@media screen and (orientation:landscape) and (max-width: 823px) and (max-height: 480px) {
    .navbar-brand > a img {
        height: 54px;
    }
    /*Create Position*/
    .mi-btn-arrow {
        top: 25vh;
        left: -130px;
        transform: rotate(90deg);
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        box-shadow: -1px 3px 6px var(--light-focus-color);
    }

    .mi-fixed-card {
        position: fixed;
        left: initial;
        right: 0;
        padding-left: 0 !important;
        bottom: 0;
        width: 170px;
    }

        .mi-fixed-card.opened {
            right: -170px;
        }

        .mi-fixed-card .mi-btns {
            display: block;
        }

            .mi-fixed-card .mi-btns a {
                margin-bottom: 15px;
            }

                .mi-fixed-card .mi-btns a:last-child {
                    margin-bottom: 0;
                }

    .mi-cards-group .mi-card {
        margin-bottom: 20px !important;
    }
    /*Profile*/
    .mi-profile-cards {
        padding: 40px 0 20px;
    }

        .mi-profile-cards .card-items,
        .mi-profile-cards .mi-info-card {
            margin-bottom: 20px;
        }

        .mi-profile-cards div:last-child .card-items {
            margin-bottom: 0;
        }

    .mi-profile-sub-values {
        margin-bottom: 20px;
    }

    .mi-cards-group > .row > div {
        margin-bottom: 20px;
    }

    .mi-info-card {
        margin-bottom: 10px;
    }

    .nav-team-btns {
        position: fixed;
        bottom: -1px;
        z-index: 99;
        left: 0;
        right: 0;
    }

        .nav-team-btns .mi-btn-group {
            position: initial !important;
            width: 100%;
            /* border-top: 1px solid var(--light-color); */
        }

            .nav-team-btns .mi-btn-group .mi-btn {
                width: 50%;
                background-color: var(--dark2-color) !important;
                color: var(--white-color) !important;
                padding: 0;
                line-height: 1;
            }
    /*Dashboard Start*/
    .mi-dash-header .mi-dash-left {
        margin-bottom: 20px;
        display: block;
        text-align: center;
        border-right-width: 0px;
    }

        .mi-dash-header .mi-dash-left > div:not(.mi-projections) {
            margin-top: 20px;
            margin-left: 0px;
        }

        .mi-dash-header .mi-dash-left .mi-text-status {
            justify-content: center;
        }

    .mi-dash-header .mi-dash-right div.row {
        width: auto !important;
    }

    .mi-dash-header .mi-dash-right {
        padding-left: 15px !important;
    }

        .mi-dash-header .mi-dash-right .mi-amounts:nth-child(-n+2) {
            margin-bottom: 20px;
        }

    .mi-dash-cards {
        margin-right: 15px;
        margin-left: 15px;
        border-right-width: 0px;
    }

    .mi-dash-shortcuts:nth-child(n+5) {
        border-bottom: 1px solid var(--lightest-color);
    }

    .mi-dash-shortcuts:nth-child(n+7) {
        border-bottom: 0;
    }

    .mi-dash-filters {
        bottom: -375px;
        width: 100%;
        padding: 0 !important;
        height: 100%;
        overflow-x: hidden;
    }

        .mi-dash-filters:hover {
            bottom: -365px;
        }

        .mi-dash-filters .owl-carousel {
            padding: 30px;
        }

        .mi-dash-filters.opened > .mi-card > .mi-card-body > .row > div:last-child {
            margin-bottom: 70px;
        }

        .mi-dash-filters.opened > .mi-btn.mi-btn-flat {
            position: fixed;
            bottom: 20px;
            top: initial;
            left: 20px;
            border-radius: .25rem !important;
            width: 45%;
            justify-content: center;
            z-index: 99;
        }

            .mi-dash-filters.opened > .mi-btn.mi-btn-flat.mi-clear-filters {
                right: 20px !important;
                left: auto;
            }

        .mi-dash-filters .br-r-1-lightest {
            border-right-width: 0 !important;
        }
    /*Dashboard End*/
}
/*Mobile Small*/
@media only screen and (max-width: 360px) {
    /*Dashboard Start*/
    .mi-dash-filters {
        bottom: -535px;
        height: 100%;
        overflow-x: hidden;
    }

        .mi-dash-filters:hover {
            bottom: -525px;
        }

        .mi-dash-filters .owl-carousel {
            padding: 30px;
        }

        .mi-dash-filters.opened > .mi-card > .mi-card-body > .row > div:last-child {
            margin-bottom: 50px;
        }

        .mi-dash-filters.opened > .mi-btn.mi-btn-flat {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 41%;
        }

            .mi-dash-filters.opened > .mi-btn.mi-btn-flat.mi-clear-filters {
                right: 20px !important;
                left: auto;
            }
    /*Dashboard End*/
}
/*Tablet Pro*/
@media (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) {
    .mi-profile-cards {
        padding: 40px 0px 20px;
    }
}
/*Tablet Portrait*/
@media (min-width: 768px) and (max-height: 1024px) and (orientation: portrait) {
    /*Profile*/
    .mi-info-card {
        margin-bottom: 15px;
    }

    .col-md-4:nth-child(n+3) .mi-info-card {
        margin-bottom: 0;
    }

    .mi-profile-sub-values {
        margin-bottom: 20px;
    }

    .mi-profile-cards {
        padding: 40px 0px 20px;
    }

        .mi-profile-cards .col-md-6 {
            margin-bottom: 20px;
        }

            .mi-profile-cards .col-md-6:nth-child(n+2) {
                margin-bottom: 0;
            }

    .mi-back-team {
        margin-top: 7px;
    }
    /*Dashboard Start*/
    .mi-dash-header .mi-dash-left {
        margin-bottom: 20px;
        border-right-width: 0px;
    }

    .mi-dash-cards {
        border-right-width: 0px;
    }

    .mi-dash-filters {
        padding: 15px !important;
        bottom: -430px;
    }

        .mi-dash-filters:hover {
            bottom: -420px;
        }

        .mi-dash-filters > .mi-clear-filters {
            top: 15px;
        }

    .mi-price-filter {
        margin-top: 20px;
    }
    /*Dashboard End*/
}
/*Tablet Landscape*/
@media (min-width: 1024px) and (max-height: 768px) and (orientation: landscape) {
}
/*For Large Screens*/
@media (min-width: 1500px) {
    .tbodyPayItem tr td .mi-select2 ng-select2 .select2 > .selection > .select2-selection {
        width: 184px;
        margin: 0 -50px 0 0;
    }

    .mi-ss-table .mi-table tbody tr td.text-left .mi-select2 ng-select2 .select2 > .selection > .select2-selection {
        width: 159px;
    }

    .mi-team-timesheet .owl-carousel {
        padding: 0 0 0 0 !important;
    }

        .mi-team-timesheet .owl-carousel .owl-nav div .prev-slide {
            left: -3px !important;
        }

        .mi-team-timesheet .owl-carousel .owl-nav button .prev-slide {
            left: -25px !important;
        }

    .mi-dash-cards .mi-data {
        padding-left: 30px !important;
    }

    .mi-dash-cards .mi-projections {
        margin-left: 25px !important;
    }
}

@media screen and (max-width: 1439px) and (min-width: 992px) {
}

@media (min-width: 1200px) {
    .mi-builder-popup {
        width: 95%;
    }

    .mi-form-builder .mi-upload-js input + label span {
        width: 100px;
    }

    .mi-team-timesheet .owl-carousel {
        padding: 0 0 0 0;
    }

        .mi-team-timesheet .owl-carousel .owl-nav div .prev-slide {
            left: -23px;
        }

        .mi-team-timesheet .owl-carousel .owl-nav button .prev-slide {
            left: -4px;
        }

    .mi-dash-cards .mi-data {
        padding-left: 10px;
    }

    .mi-dash-cards .mi-projections {
        margin-left: 15px;
    }
}

.scrollbar-sm::-webkit-scrollbar, .note-editor .note-editable::-webkit-scrollbar, angular2-multiselect.mi-form-control .dropdown-list .list-area > div:last-child::-webkit-scrollbar, .mi-skillsets .mi-card-body .skills::-webkit-scrollbar, .mi-element-settings::-webkit-scrollbar, .mi-builder-area::-webkit-scrollbar, .mi-builder .mi-items::-webkit-scrollbar, .mi-elements::-webkit-scrollbar, .mi-form-settings::-webkit-scrollbar, .mi-settings-body::-webkit-scrollbar, .mi-builder-settings::-webkit-scrollbar, .mi-form-control::-webkit-scrollbar, .mi-workflow-area .mi-variables::-webkit-scrollbar, .note-editable::-webkit-scrollbar, .dropdown-list-content::-webkit-scrollbar, .mi-side-wrapper .mi-side-content .mi-side-body::-webkit-scrollbar, .mi-thead-sticky::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .mi-card-body::-webkit-scrollbar, .mi-select2 .select2 > .selection > .select2-selection::-webkit-scrollbar, .select2-results__options::-webkit-scrollbar, .mi-kanban-board::-webkit-scrollbar {
    width: 4px;
    height: 6px;
}

.scrollbar-sm::-webkit-scrollbar-thumb,
.note-editor .note-editable::-webkit-scrollbar-thumb,
.mi-skillsets .mi-card-body .skills::-webkit-scrollbar-thumb,
.mi-builder-area::-webkit-scrollbar-thumb,
.mi-builder .mi-items::-webkit-scrollbar-thumb,
.mi-element-settings::-webkit-scrollbar-thumb,
.mi-elements::-webkit-scrollbar-thumb,
.mi-form-settings::-webkit-scrollbar-thumb,
.mi-settings-body::-webkit-scrollbar-thumb,
.mi-builder-settings::-webkit-scrollbar-thumb,
.mi-form-control::-webkit-scrollbar-thumb,
.mi-workflow-area .mi-variables::-webkit-scrollbar-thumb,
.note-editable::-webkit-scrollbar-thumb,
.dropdown-list-content::-webkit-scrollbar-thumb,
.mi-side-wrapper .mi-side-content .mi-side-body::-webkit-scrollbar-thumb,
.mi-thead-sticky::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.mi-card-body::-webkit-scrollbar-thumb,
.mi-select2 .select2 > .selection > .select2-selection::-webkit-scrollbar-thumb,
.select2-results__options::-webkit-scrollbar-thumb,
.mi-kanban-board::-webkit-scrollbar-thumb {
    border-radius: .25rem;
}

.scrollbar-sm.style-theme::-webkit-scrollbar-thumb,
angular2-multiselect.mi-form-control .dropdown-list .list-area > div:last-child::-webkit-scrollbar-thumb {
    border-radius: 0;
}

.mi-workflow::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    display: none;
}

.mi-workflow::-webkit-scrollbar-thumb {
    border-radius: .45rem;
    display: none;
}

.scrollbar-sm.style-theme::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
    box-shadow: none;
}

.scrollbar-sm.style-theme::-webkit-scrollbar-track,
.scrollbar-sm.style-theme::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
}


.scrollbar-sm.style-theme::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background-color: var(--light-color);
}

.scrollbar-sm.style-theme::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: var(--light-color);
}

    .scrollbar-sm.style-theme::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover {
        border: 1px solid var(--light3-color);
    }

    section.login-page {
        height: 100vh;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .LoginFormWrap {
        position: relative;
        background-color: var(--white-color);
        padding: 40px 50px;
        box-shadow: 0 0 8px #cccccc;
        border-radius: 10px;
    }
    .LoginFormWrap:before {
        content: '';
        border-left: 5px solid;
        left: 0;
        top: 0;
        border-radius: 10px 0 0 10px;
        position: absolute;
        z-index: 8;
        border-color: var(--theme-color);
        height: 100%;
    }
    .login-page .background-img {
        display: block;
        border-radius: 20px;
        padding: 10px;
        height: 614px;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .login-page .background-img img {
        width: 150px;
        display: flex;
        margin: 10px auto;
    }
    .header-bg {
        background-color: var(--theme-color);
        height: 170px;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: -1;
    }
    .header{
        height: 65px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--light-focus2-color);
        padding: 0.6rem 0.8rem 0.6rem 0.8rem;
        position: fixed;
        width: 100%;
        z-index: 9;
        background-color: var(--theme-color);
        transition: 0.3s;
    }
    .header.sticky {
        transform: scale(1.005);
        box-shadow: 0 0 3px #cccccc;
       
    }
    .header .menu-icon-open {
        display: none;
        height: 25px;
        width: 25px;
        z-index: 2;
    }
    .header .menu-icon-close {
        display: none;
        height: 25px;
        width: 25px;
        z-index: 2;
    }
    .header-wrap .left-wrap{
        display: flex;
        align-items: center;
    }
    .header .logo{
        width: 130px;
    }
    .header .header-icon{
        display: none;
        width: 20px;
        height: auto;
        margin-right: 5px;
    }
    .header .navigation-wrap {
        display: flex;
        justify-content: space-between;
        width: 93%;
    }
    .header-wrap .navigation {
        display: flex;
        align-items: center;
        list-style: none;
        margin-bottom: 0;
    }
    .header-wrap .navigation li {
        display: flex;
        align-items: center;
        height: 65px;
        padding: 0 10px;
        margin: 0 10px;
        color: var(--white-color);
        cursor: pointer;
        transition: 0.3s;
    }
    .header-wrap .navigation li a {
        color: var(--white-color);
    }
    .header-wrap .navigation li a:hover {
        color: var(--light-color);
    }
    .header-wrap .navigation li.active {
        border-bottom: 3px solid var(--secondary-color);
        color: var(--secondary-color);
        font-weight: 600;
    }
.header a.user-wrap, .header button.user-wrap {
    display: flex;
    align-items: center;
    color: var(--white-color);
    background-color:transparent;
    border:none;
}

 .header button.user-wrap {
    height:65px;   
}
    .mi-card .card-right .icon-wrap{
        height: 50px;
        width: 50px;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
    }
    .mi-card .card-right .total-invoice {
        background-color: rgb(75 181 67 / 0.2);
    }
    .mi-card .card-right .total-amount {
        background-color: rgb(0 125 247 / 0.2);
        padding: 10px;
    }
    .mi-card .card-right .due-amount {
        background-color: rgb(247 186 1 / 0.2);
        padding: 13px;
    }
    .mi-card .card-right .pending-contracts {
        background-color: rgb(0 181 201 / 0.2);
        padding: 13px;
    }
    .breadcrumb a,
    .breadcrumb li.breadcrumb-item.active {
        color: var(--white-color);
        font-weight: 500;
    }
    .breadcrumb-item + .breadcrumb-item::before{
        color: var(--white-color);
    }
    
    .quick-filter-wrap {
        background-color: var(--light3-color);
        border-radius: 5px;
        width: max-content;
    }
    .quick-filter-wrap li {
        font-size: 0.8rem;
        padding: 3px 10px;
        border-radius: 5px;
        color: var(--dark-color);
    }
    .quick-filter-wrap li.active {
        color: var(--secondary-color);
        background-color: var(--secondary-focus-color);

    }
    .header-title-wrap{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .activity-log-wrap .no-data-img {
        width: 20%;
        margin: 20px auto;
    }
    .mi-filter {
        background: var(--secondary-focus-color);
        padding: 7px 13px;
        margin-right: 10px;
        border-radius: 0.3rem;
        margin-right: 10px;
        color: var(--secondary-color);
        transition: 0.3s;
        cursor: pointer;
    }
    .mi-filter:hover {
        background: var(--secondary-color);
        color: var(--white-color);
    }
    .mi-filter.active {
        background: var(--secondary-color);
        color: var(--white-color);
    }
    .mi-table-advance-border{
        border-collapse: separate;
        border-spacing: 0 0px;
        border: 1px solid var(--light3-color);
        border-radius: 0.45rem;
    }
    .card-added-img {
        width: 50%;
        margin: 30px auto 0 auto;
    }

    .contract-wrap {
        display: flex;
        height: 80vh;
        overflow-x: hidden;
    }
    .contract-wrap .contract-list-wrap {
        width: 30%;
        border-right: 1px solid var(--light3-color);

    }
    .contract-wrap .invoice-view-wrap {
        width: 70%;
    }
    .contract-wrap .contract-list-header {
        padding: 15px 15px;
        border-bottom: 1px solid var(--light3-color);
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .contract-wrap .contract-list-header p {
        margin-bottom: 0;
        font-size: 19px;
        color: var(--dark2-color);
        font-weight: 600;
    }
    .contract-wrap .contract-list-wrap ul.contract-list-body {
        padding: 0;
        list-style: none;
        overflow-x: hidden;
        height: calc(100vh - 29vh);
        margin-bottom: 0;
        border-radius: 0 0 0 0.45rem;
    }
    .contract-wrap .contract-list-wrap li {
        padding: 10px 15px;
        border-bottom: 1px solid var(--light3-color);
    }
    .contract-wrap .contract-list-wrap li:last-child {
        border-bottom: none;
    }
    .contract-wrap .contract-list-wrap li.selected {
        background-color: var(--light4-color);
    }
    .contract-wrap .contract-list-wrap li .invoice-name {
        display: flex;
        justify-content: space-between;
    }
    .contract-wrap .contract-list-wrap li .invoice-name p {
        margin-bottom: 0;
    }
    .contract-wrap .contract-list-wrap li .invoice-name p:first-child {
        font-weight: 600;
        font-size: 16px;
        color: var(--dark2-color);
    }
    .contract-wrap .contract-list-wrap li .invoice-name p:last-child {
        font-weight: 500;
        font-size: 16px;
        color: var(--secondary-color);
    }
    .contract-wrap .contract-list-wrap li .status {
        display: flex;
        justify-content: space-between;
    }
    .contract-wrap .contract-list-wrap li .status p {
        margin-bottom: 0;
        color: var(--secondary-color);
    }
    .contract-wrap .contract-list-wrap li .status p span {
        color: var(--dark2-color);
        margin-left: 15px;
        position: relative;
    }
        .contract-wrap .contract-list-wrap li .status span.mi-badge {
            height: max-content;
        }
    .contract-wrap .contract-list-wrap li .status p span:before {
        content: "|";
        position: absolute;
        left: -9px;
    }
    .contract-wrap .invoice-view-wrap .invoice-view-header {
        padding: 15px 15px;
        border-bottom: 1px solid var(--light3-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 65px;
    }
    .invoice-view-wrap .invoice-view-header p {
        margin-bottom: 0;
        font-size: 20px;
        font-weight: 600;
        color: var(--dark2-color);
    }
    .contract-wrap .invoice-view-wrap .invoice-view-body {
        overflow-x: hidden;
        height: calc(100vh - 29vh);
        position: relative;
    }
    .contract-wrap .invoice-view-wrap .contract-view-bottom {
        position: sticky;
        top: 0;
        right: 0;
        left: 0;
        text-align: center;
        background-color: var(--white-color);
        padding: 15px 20px;
        box-shadow: 0px -4px 15px #cccccc;
        display: flex;
        justify-content: space-evenly;
    }
    .contract-wrap .invoice-view-wrap .contract-view-bottom a {
        margin: 0 10px;
    }
    .contract-wrap .invoice-view-wrap .contract-view-bottom a i {
        margin-left: 5px;
    }
    .contract-logo {
        width: 200px;
        margin: 0 auto 20px auto;
    }
#contract-popup .owl-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--light3-color);
    margin-top: 20px;
    padding: 10px 0;
}
            #contract-popup .owl-nav button.owl-prev span {
                margin-right: 5px;
                font-size: 23px;
            }
            #contract-popup .owl-nav button.owl-prev:after {
                content: "Previous";
            }
            #contract-popup .owl-nav button.owl-next span {
                margin-left: 5px;
                font-size: 23px;
            }
            #contract-popup .owl-nav button.owl-next:before {
                content: "Next";
            }
            #contract-popup .owl-nav button.owl-prev,
            #contract-popup .owl-nav button.owl-next {
                color: var(--dark2-color);
                font-weight: 600;
            }
    .invoice-ribbon {
        background-color: #4caf50;
        width: max-content;
        font-size: 21px;
        line-height: 1.5;
        text-align: center;
        position: relative;
        color: #fff;
        padding: 0 20px;
      }
    
      .invoice-ribbon:before {
        background-color: #3e9742;
        width: 17px;
        height: 28px;
        content: '';
        display: block;
        transform: skewY(35deg);
        position: absolute;
        z-index: -1;
    }
    
    .invoice-ribbon:before {top:10px; left:0; }

.table-responsive .dataTables_wrapper > .row:first-child .col-sm-6:first-child {
    position: absolute;
    bottom: 35px;
}
.table-responsive .dataTables_wrapper > .row:first-child .col-sm-6:last-child {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
    .table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child ul.pagination {
        background-color: var(--light4-color);
        /*padding: 0px 10px;*/
        border-radius: 5px;
    }
        .table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child ul.pagination .paginate_button.previous:before {
            content: "\F284";
            font-family: 'bootstrap-icons';
            color: #000000;
            padding: 0 10px;
        }
        .table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child ul.pagination .paginate_button.previous a,
        .table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child ul.pagination .paginate_button.next a {
            display: none;
        }
        .table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child ul.pagination .paginate_button.next,
        .table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child ul.pagination .paginate_button.previous {
            margin: 0;
            padding: 0 !important;
        }
        .table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child ul.pagination .paginate_button {
            padding: 0 13px !important;
        }
            .table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child ul.pagination .paginate_button.next:before {
                content: "\F285";
                font-family: 'bootstrap-icons';
                color: #000000;
                padding: 0 10px;
            }
            .table-responsive .dataTables_wrapper > .row:last-child .col-sm-6:last-child ul.pagination .paginate_button.active {
                padding: 0px 13px !important;
                background-color: var(--secondary-focus-color);
            }
.table-responsive .dataTables_wrapper > .row:first-child .col-sm-6:first-child label {
    display: flex;
    width: auto;
    align-items: center;
}
    .table-responsive .dataTables_wrapper > .row:first-child .col-sm-6:first-child label select {
        margin-right: 10px;
        width: 100px;
    }
    /*Loader Css Start*/
#loader-overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fdfdfd6b;
    z-index: 3000;
    padding-top: 10px;
    text-align: center;
    display: none;
}
.loader {
    width: 48px;
    height: 48px;
    position: fixed;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    animation: rotation 3s linear infinite;
    margin: auto;
}


    .loader::after,
    .loader::before {
        content: '';
        width: 48px;
        height: 48px;
        border: 2px solid #cccccc;
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        animation: rotation 2s ease-in-out infinite;
    }

    .loader::after {
        border-color: var(--theme-color);
        animation-delay: 1s;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

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