@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Aldrich'); /*   font-family: 'Aldrich', sans-serif;   */


@font-face {
    font-family: 'Gill Sans';
    src: url('../../../fonts/GillSans.woff2') format('woff2'), url('../../../fonts/GillSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Gill Sans';
    src: url('../../../fonts/GillSans-Light.woff2') format('woff2'), url('../../../fonts/GillSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../../../fonts/GillSans-Medium.woff2') format('woff2'), url('../../../fonts/GillSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../../../fonts/GillSans-Bold.woff2') format('woff2'), url('../../../fonts/GillSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../../../fonts/GillSans-Heavy.woff2') format('woff2'), url('../../../fonts/GillSans-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



:root {
    --primary-color:#009640;
    --secondary-color:#231f20;
    --alternate-color:#007236;
    --gray-color:#939598;
    --yellow-color:#fed700;
}

body {
    font-family: Helvetica Neue, Roboto, Sans-serif;
    font-size: 14px;
    overflow-x: hidden;
    color: #1e1e1e;
    /*font-weight: 300;*/
    letter-spacing: 0.5px;
    background: #F1F1F1;
}

    body.no-scroll {
        overflow: hidden;
    }

a {
    text-decoration: none;
    color: var(--primary-color);
}

    a:hover {
        text-decoration: none;
        color: var(--primary-color);
    }

.color-success {
    color: #00ae2d;
}

.uppercase {
    text-transform: uppercase;
}

.info-text {
    font-size: 12px;
    padding-top: 2px;
}

.no-shadow {
    box-shadow: none !important;
}

.space-bar, .space-bar-1, .space-bar-2, .space-bar-3, .space-bar-4 {
    width: 100%;
    height: 10px;
    clear: both;
}

.space-bar-1 {
    height: 20px;
}

.space-bar-2 {
    height: 30px;
}

.space-bar-3 {
    height: 40px;
}

.space-bar-4 {
    height: 50px;
}

.page-title-1 {
    font-size: 18px;
    font-weight: 300;
}

.margin-right-10-px {
    margin-right: 10px;
}

.left-bar {
    float: left;
    position: fixed;
    width: 50px;
    top: 90px;
    height: calc(100vh - 90px);
    background: var(--primary-color);
    transition: all 0.6s ease;
    z-index: 60;
}

.main-frame {
    float: right;
    min-height: 100vh;
    background: #F1F1F1;
    width: calc(100% - 50px);
    transition: all 0.6s ease;
    padding-top: 90px;
}

/* Left menu width (widened from 200px on 2026-10-17 so menu titles fit on one line; see --left-bar-width below) */
.left-bar.open {
    width: 280px;
}

.left-bar:hover {
    width: 280px;
}

.main-frame.left-bar-open {
    width: calc(100% - 280px);
}

.toggle-menu {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0px;
    color: #F1F1F1;
    font-size: 24px;
    /*padding: 4px 13px;*/
    cursor: pointer;
    transition: all 0.6s ease;
    background: var(--alternate-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

/*.left-bar.open .toggle-menu {
    right: -51px;
}*/

.app-title {
    float: left;
    width: 100%;
    color: #FFF;
    /*visibility: hidden;
    opacity: 0;*/
    transition: all 0.6s ease;
    height: 50px;
    border-bottom: 0px solid var(--alternate-color);
    padding: 5px 15px;
    overflow: hidden;
    background: var(--alternate-color);
}

.left-bar.open .app-title {
    visibility: visible;
    opacity: 1;
}

.header {
    position: fixed;
    width: 100%;
    background: #fff;
    border-bottom: 2px solid var(--yellow-color);
    height: 90px;
    top: 0;
    right: 0;
    z-index: 50;
    transition: all 0.6s ease;
    display: flex;
    align-items: center;
}

.branding {
    width: 316px;
    float: left;
    padding: 0 20px;
    border-right: 1px solid var(--primary-color);
}

    .branding img {
        width: 276px;
    }

.main-frame.left-bar-open .header {
    width: calc(100% - 280px);
}

.page-title-bar {
    position: relative;
    background: var(--secondary-color);
    float: left;
    width: 100%;
    height: 50px;
    padding: 0px 20px 0px 20px;
    color: #ffffff;
    font-size: 18px;
    /*border-bottom: 2px solid #757575;*/
    /*box-shadow: 0 2px 2px #757575;*/
    z-index: 14;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

/*.page-title-bar a {
        margin-top: 5px;
    }*/

.page-title-bar-2 {
    position: relative;
    width: 100%;
    background: var(--secondary-color);
    color: #ffffff;
    /*box-shadow: 2px 3px 5px #999;*/
    margin-bottom: 20px;
    padding: 0 15px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    height: 50px;
}

.page-title-text {
    padding: 6px 0 0 0;
}

/* Left Navigation  */

.left-nav {
    float: left;
    width: 100%;
    position: relative;
    z-index: 5;
    /*background: #1e1e1e;*/
    overflow-x: hidden;
    overflow-y: hidden;
    height: calc(100vh - 140px);
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

    .left-nav:hover {
        overflow-y: auto;
    }

    .left-nav ul {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0 4px;
        list-style: none;
    }

        .left-nav ul li {
            position: relative;
            float: left;
            width: 100%;
            margin: 0;
            padding: 0px 0;
            /*background: #1e1e1e;*/
        }

            .left-nav ul li.parent::after {
                position: absolute;
                right: 10px;
                top: 8px;
                height: 100%;
                vertical-align: middle;
                content: "\f107";
                font-family: "Font Awesome 5 Free";
                font-size: 14px;
                font-weight: 900;
                color: #DDDDDD;
                transition: all 0.6s ease;
                opacity: 0;
                z-index: 2;
            }

            .left-nav ul li:first-child.parent::after {
                content: "";
            }

.left-bar.open .left-nav ul li.parent::after {
    opacity: 1;
}

.left-bar:hover .left-nav ul li.parent::after {
    opacity: 1;
}

.left-nav ul li a {
    position: relative;
    display: block;
    white-space: nowrap;
    color: #FFF;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: 100%;
    margin: 0 0;
    padding: 7px;
    font-size: 12px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis; /* a title that does not fit is cut with an ellipsis; the full name is in the link's title (hover) */
    border-left: 4px solid rgba(255,255,255,0);
    z-index: 3;
}

    .left-nav ul li a:hover {
        border-left: 4px solid var(--primary-color);
        background: rgba(255,255,255,0.14); /* lighter hover band (was none) so the pointed-at item stands out; 2026-10-17 */
    }

    .left-nav ul li a.active {
        border-left: 4px solid var(--primary-color);
        /*background: var(--primary-color);*/
    }

.left-nav ul > li.active > a {
    color: var(--yellow-color);
}

.left-nav ul li a i {
    /*width: 32px;*/
    font-size: 18px;
    text-align: center;
    margin-left: 1px;
    margin-right: 10px;
}

.left-nav ul li a img {
    width: 20px;
    font-size: 22px;
    text-align: center;
    margin-right: 10px;
}

.left-nav ul li a span {
    margin-top: -5px;
    font-size: 14px;
    /*visibility: hidden;
        opacity: 0;*/
}

.left-bar.open .left-nav ul li a span {
    visibility: visible;
    opacity: 1;
}

/*.left-nav ul ul {
    width: 285px;
    position: absolute;
    top: 0;
    left: 0px;
    background: #1e1e1e;
    transition: all 0.6s ease;
    z-index: -1;
    opacity: 0;
}*/

/*.left-bar.open*/ .left-nav ul ul {
    position: relative;
    left: 10px; /* indent per level (halved from 20px on 2026-10-17); fixed, so items do not slide when a parent opens or closes */
    z-index: 2;
    width: calc(100% - 10px);
    max-height: 0px;
    overflow: hidden;
    display: none;
    transition: max-height 0.4s ease; /* slides down and up only; the position is fixed so items never shift sideways */
}

.left-bar.open .left-nav ul ul {
    display: block;
}

.left-bar:hover .left-nav ul ul {
    display: block;
}

/*.left-bar.open*/ .left-nav ul li.parent.active ul {
    /*max-height: 1100px;*/
    max-height: 3000px;
    opacity: 1;
}

.left-nav ul ul li {
    padding: 0px 0;
    z-index: -1;
}

.left-nav ul li.active ul {
    opacity: 1;
}

.left-nav ul ul li a {
    padding: 5px 10px;
    z-index: -1;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border-left: 4px solid rgba(255,255,255,0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.left-nav ul ul li.active a {
    border-left: 4px solid var(--primary-color);
    /*background: var(--primary-color);
    color: #FFF;*/
}

.left-nav ul ul li.active:hover a {
    border-left: 4px solid var(--primary-color);
    /*background: var(--primary-color);
    color: #FFF;*/
}

.left-nav ul ul li a:hover {
    background: rgba(255,255,255,0.14); /* was 0.03, too subtle to see; 2026-10-17 */
}

.left-nav ul ul li a i {
    font-size: 14px;
    text-align: left;
    margin-right: 2px;
    width: auto;
}
/*  Left bottom Navigation  */

.left-bot-nav {
    background: #1e1e1e;
    position: absolute;
    float: left;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 15;
}

    .left-bot-nav ul {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .left-bot-nav ul li {
            float: left;
            width: 100%;
            margin: 0;
            padding: 10px 5px;
        }

            .left-bot-nav ul li a {
                display: block;
                white-space: nowrap;
                color: #F6AA26;
                width: 100%;
                margin: 0 0;
                padding: 10px;
                font-size: 12px;
                text-decoration: none;
                overflow: hidden;
                transition: all 0.6s ease;
            }

                .left-bot-nav ul li a.invert {
                    background: #F6AA26;
                    color: #FFF;
                    padding: 5px;
                    white-space: pre-wrap;
                    border-radius: 4px;
                    text-align: center;
                }

                .left-bot-nav ul li a i {
                    font-size: 22px;
                    text-align: center;
                    margin-right: 8px;
                }

                .left-bot-nav ul li a.invert i {
                    margin-right: 0px;
                }

                .left-bot-nav ul li a span {
                    font-size: 18px;
                    margin-top: -5px;
                    visibility: hidden;
                    opacity: 0;
                    transition: all 0.6s ease;
                }

                .left-bot-nav ul li a.invert span {
                    font-size: 14px;
                    text-align: center;
                    visibility: visible;
                    opacity: 1;
                }

.left-bar.open .left-bot-nav ul li a.invert {
    text-align: left;
}

    .left-bar.open .left-bot-nav ul li a.invert i {
        margin-right: 8px;
    }

    .left-bar.open .left-bot-nav ul li a.invert span {
        font-size: 18px;
    }

.left-bar.open .left-bot-nav ul li a span {
    visibility: visible;
    opacity: 1;
}


/*    Main Menu    */
.gp-menu {
    float: left;
    margin: 0 0 0 20px;
    padding: 0;
    transition: all 0.6s ease;
}

.main-frame.left-bar-open .gp-menu {
    margin: 0 0 0 70px;
}

.gp-menu ul {
    float: right;
    margin: 0;
    padding: 0;
}

    .gp-menu ul li {
        margin: 0;
        padding: 0;
        position: relative;
        display: inline-block;
        float: left;
    }

        .gp-menu ul li a {
            display: block;
            margin: 0;
            padding: 14px 15px 11px 15px;
            text-transform: uppercase;
            color: var(--alternate-color);
            letter-spacing: 0.5px;
            text-decoration: none;
            position: relative;
            transition: all 0.6s ease;
            font-weight: 500;
            font-size: 15px;
            z-index: 10;
        }

        .gp-menu ul li:hover a {
            color: var(--primary-color);
        }

        .gp-menu ul li.active a {
            color: var(--primary-color);
        }

    .gp-menu ul ul {
        background: #222;
        position: absolute;
        top: -500px;
        width: 250px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.6s ease;
        z-index: 4;
    }

.gp-menu > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    top: 49px;
}

.gp-menu ul ul ul {
    background: #222;
    position: absolute;
    top: 0px;
    left: 250px;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease;
    z-index: 4;
}

.gp-menu ul ul li:hover ul {
    opacity: 1;
    visibility: visible;
    top: 0px;
}

.gp-menu ul ul li {
    display: block;
    width: 100%;
    position: relative;
}

    .gp-menu ul ul li a {
        display: block;
        width: 100%;
        padding: 6px 10px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        text-transform: inherit;
    }

    .gp-menu ul ul li.active > a {
        background: var(--primary-color);
        color: #FFF;
    }

    .gp-menu ul ul li:hover > a {
        background: var(--primary-color);
        color: #FFF;
    }

.header-right {
    margin-left: auto;
}

.header-profile {
    float: right;
    padding: 5px 0;
    margin: 0 20px 0 0;
}

.profile-name {
    float: left;
    width: 120px;
    /*white-space: nowrap;*/
    padding: 4px 0 0 15px;
    text-overflow: ellipsis;
    overflow: hidden;
}


/*   Header Notifications */
.header-noti {
    float: right;
    padding: 12px 20px 10px 20px;
    position: relative;
}

.noti-trigger {
    /*color: #FFF;*/
    font-size: 20px;
    cursor: pointer;
}

.count-animate {
    -webkit-animation: 1s ease 0s normal none infinite running wobble;
    -ms-animation: 1s ease 0s normal none infinite running wobble;
    -o-animation: 1s ease 0s normal none infinite running wobble;
    animation: 1s ease 0s normal none infinite running wobble;
    color: #ffffff;
    font-size: 9px;
    line-height: 14px;
    position: absolute;
    right: 7px;
    top: 7px;
    width: 19px;
    text-align: center;
    border-radius: 4px;
}

.orange-bg {
    background: #ff8500;
}

.green-bg {
    background: var(--alternate-color);
}


/* Container Card */
.noti-dropdown-menu {
    border: 0 !important;
}

.noticontainer {
    width: 320px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.noti-title {
    font-weight: 700;
    padding: 16px 20px;
    font-size: 15px;
    color: #1e8644;
    background: #E9F3ED;
    border-bottom: 1px solid #ddd;
}

.noti-list {
    max-height: 280px;
    overflow-y: auto;
}

    .noti-list::-webkit-scrollbar {
        width: 5px;
    }

    .noti-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .noti-list::-webkit-scrollbar-thumb {
        background: #e5e7eb;
        border-radius: 10px;
    }

        .noti-list::-webkit-scrollbar-thumb:hover {
            background: #d1d5db;
        }

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


        .noti-list ul li {
            border-bottom: 1px solid #f3f4f6;
            transition: background 0.2s ease;
        }

            .noti-list ul li:last-child {
                border-bottom: none;
            }

            .noti-list ul li .noti-item-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 14px 20px;
                cursor: pointer;
                color: #888;
                font-size: 14px;
                user-select: none;
                transition: all 0.2s ease;
            }

                .noti-list ul li .noti-item-header:hover {
                    background: #f8fafc;
                    color: #1e8644;
                    padding-left: 22px;
                }

            .noti-list ul li .noti-arrow {
                width: 6px;
                height: 6px;
                border-right: 2px solid #888;
                border-bottom: 2px solid #888;
                transform: rotate(45deg);
                transition: transform 0.2s ease, border-color 0.2s ease;
            }

            .noti-list ul li .noti-item-header:hover .noti-arrow {
                border-color: #1e8644;
            }

            .noti-list ul li .noti-item-content {
                max-height: 0;
                overflow: hidden;
                background: #fafbfc;
                transition: max-height 0.25s ease-out, padding 0.25s ease-out;
                padding: 0 20px; /* Kept clean padding horizontally */
            }

                .noti-list ul li .noti-item-content p {
                    margin: 0;
                    padding-bottom: 14px;
                    font-size: 13px;
                    color: #555;
                    line-height: 1.5;
                }



            .noti-list ul li.expanded {
                background: #fafbfc;
            }

                .noti-list ul li.expanded .noti-item-header {
                    color: #1e8644;
                    font-weight: 600;
                }

                .noti-list ul li.expanded .noti-arrow {
                    transform: rotate(-135deg);
                    border-color: #1e8644;
                }

                .noti-list ul li.expanded .noti-item-content {
                    max-height: 200px;
                }

.noti-footer {
    border-top: 1px solid #f3f4f6;
    background: #ffffff;
}

    .noti-footer a {
        display: block;
        padding: 14px;
        color: #1e8644;
        font-weight: 600;
        font-size: 13px;
        text-align: center;
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .noti-footer a:hover {
            background: #E9F3ED;
            color: #1e8644;
        }

.btn-circle {
    border-radius: 100%;
    width: 40px;
    height: 40px;
    padding: 0px;
}

    .btn-circle img {
        border-radius: 100%;
        width: 40px;
        height: 40px;
    }

.reload-btn {
    position: absolute;
    right: 10px;
    top: 5px;
}

.reload {
    color: var(--alternate-color);
    background: none;
    border: none;
}

.noti-contnet {
    display: inline-block;
    width: 75%;
    padding-left: 10px;
    vertical-align: middle;
}

    .noti-contnet h5 {
        margin: 5px 0px 0;
        font-size: 16px;
    }


.header-chat {
    float: right;
    padding: 12px 30px 10px 0px;
    position: relative;
}

    .header-chat .count-animate {
        right: 13px;
    }

.chat-trigger {
    color: #FFF;
    font-size: 20px;
    cursor: pointer;
}

    .chat-trigger i {
        font-size: 18px;
    }

.header-quickview {
    float: right;
    padding: 12px 30px 10px 0px;
}




.header-alt-logo {
    float: right;
    width: 120px;
    padding: 5px;
}

    .header-alt-logo img {
        width: 100%;
    }







.pop-menu .dropdown-toggle::after {
    display: none;
}

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: 0 solid;
    border-right: 0 solid transparent;
    border-bottom: 0;
    border-left: 0 solid transparent;
}

.profile-thumb {
    float: right;
}

    .profile-thumb img {
        width: 40px;
        height: 40px;
        border: 2px dashed var(--primary-color);
        padding: 2px;
        float: left;
    }

.profile-disply {
    margin: -10px 0 0 0;
    background: var(--primary-color);
    text-align: center;
    padding: 20px;
}

.profile-thumb a {
    display: block;
}

.header-profile .dropdown-menu {
    border-radius: 0;
    /*background: #333;
    box-shadow: 0 2px 2px var(--primary-color);*/
    padding: 0;
}

.profile-block {
    float: left;
    width: 250px;
    background: #333;
    /*box-shadow: 0 0 0px #666;*/
}

.profile-avatar {
    float: left;
    width: 100px;
    margin: 20px 75px;
    border-radius: 100%;
    overflow: hidden;
}

    .profile-avatar img {
        width: 100px;
        height: 100px;
        background: #FFF;
        border: none;
    }

.profile-name {
    float: left;
    width: 100%;
    color: #F1F1F1;
    font-size: 18px;
    text-align: center;
}

.profile-deg {
    float: left;
    width: 100%;
    color: #aaa;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}




.header-profile ul {
    float: left;
    padding: 0 0px;
    margin: 0;
    list-style: none;
    width: 100%;
}

    .header-profile ul li {
        float: left;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .header-profile ul li a {
            margin: 0;
            padding: 10px 10px;
            display: block;
            float: left;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            text-decoration: none;
            background: #000;
            color: #FFF;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .header-profile ul li p {
            margin: 0;
            padding: 10px 0;
        }

.profile-actions {
    float: left;
    width: 100%;
    padding: 0 10px;
    margin-bottom: 20px;
    text-align: center;
}

    .profile-actions a {
        padding: 5px 10px;
        /*border: 1px solid #F1F1F1;*/
        color: #666;
        background: #FFF;
        border-radius: 8px;
        font-size: 12px;
    }

        .profile-actions a:hover {
            text-decoration: none;
        }


.logout-link {
    float: left;
    width: 100%;
    padding: 10px;
    background: #C9302C;
    text-align: center;
    color: #FFF !important;
    font-size: 16px;
    cursor: pointer;
}

    .logout-link:hover {
        color: #FFF;
    }

    .logout-link i {
        margin-right: 5px;
    }




/* main form   */
.form-block {
    float: left;
    width: calc(100% - 40px);
    padding: 15px;
    height: calc(100vh - 141px);
    overflow-y: auto;
}

.form-block-2 {
    float: left;
    width: calc(100% - 40px);
    padding: 15px 40px;
    max-height: calc(100vh - 145px);
    overflow-y: auto;
}

.form-block-3 {
    float: left;
    width: 100%;
    padding: 15px 15px;
    height: calc(100vh - 150px);
    overflow-y: auto;
    position: relative;
}

.page-inner {
    float: left;
    width: 100%;
    padding: 15px;
    background: #FFF;
    /*border-radius: 6px;*/
    box-shadow: 0 0 5px #aaa;
    min-height: 100%;
}


.inner-boxed {
    padding: 20px 60px;
}

.form-top-bar {
    float: left;
    width: 100%;
    padding: 10px 0 10px 10px;
}

.form-type-selection {
    float: right;
    width: 150px;
}

    .form-type-selection .custom-select {
        border: 1px solid #757575;
    }

.action-btns {
    float: right;
    margin-right: 20px;
}

.form-section {
    float: left;
    width: 100%;
    padding: 10px;
}

.form-section-item {
    float: left;
    width: 100%;
    margin-bottom: 15px;
}

.form-item-top-bar {
    float: left;
    width: 100%;
    padding: 10px 0;
}

.form-item-title {
    float: left;
    padding: 6px 0;
    font-size: 16px;
}

.no-bot-padding {
    padding-bottom: 0;
}

.org-logo {
    position: absolute;
    right: 0;
    top: 0px;
    width: 25px;
    height: 25px;
    transition: all 0.6s ease;
    cursor: pointer;
    z-index: 20;
    background: #FFF;
}

    .org-logo:hover {
        width: 90px;
        height: 90px;
        right: -0px;
        top: -60px;
    }

    .org-logo img {
        width: 100%;
    }

.data-display-mode {
    float: right;
    width: 112px;
}

    .data-display-mode .custom-select {
        border: 0;
        background-color: #EEEEEE;
    }

.tab-view .data-display-mode .custom-select {
    border: 0;
    background-color: #ffffff;
}

.data-display {
    float: left;
    width: 100%;
    background: #FFF;
    border: 1px solid #757575;
    padding: 4px;
}

    .data-display.table-color-1 {
        background: #d6c9c1;
    }

.data-table-group {
    float: left;
    width: 100%;
    border-bottom: 0px solid #757575;
}

.data-display-table {
    border: 1px solid #757575;
}

.card-view .data-display-table {
    border-radius: 4px;
    overflow: hidden;
}

.custom-table-header {
    width: 100%;
    max-height: 100px;
    visibility: visible;
    opacity: 1;
    transition: max-height 0.6s ease;
    overflow: hidden;
}

    .custom-table-header table {
        width: 100%;
        background: #757575;
        color: #FFF;
        table-layout: fixed;
    }

        .custom-table-header table td {
            padding: 6px;
        }

.card-view .custom-table-header {
    max-height: 0px;
}

.custom-table {
    width: 100%;
    background: #FFF;
    color: #333;
    table-layout: fixed;
}

.table-color-2 .custom-table {
    background: #e8eaf6;
}

.bottom-space {
    margin-bottom: 0px;
}

.card-view .bottom-space {
    margin-bottom: 4px;
    transition: all 0.6s ease;
}

.table-color-3 .custom-table {
    background: #e8f6e9;
}

.custom-table td {
    padding: 4px;
    border-bottom: 0px solid #757575;
}

.card-view .custom-table td {
    border-bottom: 0px solid #757575;
}

.td-custom-label {
    float: left;
    width: 100%;
    padding: 0px 0 0px 0;
    color: #626365;
    max-height: 0px;
    transition: all 0.6s ease;
    overflow: hidden;
}

.card-view .td-custom-label {
    max-height: 100px;
}

.left-cust-label {
    float: left;
    width: 100%;
    height: 100%;
    display: block;
    border-right: 1px solid #757575;
    text-align: center;
    font-weight: 500;
    margin-right: 10px;
}

.table-color-1 .left-cust-label {
    color: #019ed3;
}

.table-color-2 .left-cust-label {
    color: #3f51b5;
}

.table-color-3 .left-cust-label {
    color: #4cb050;
}

.right-cust-label {
    float: left;
    width: 100%;
    height: 100%;
    display: block;
    border-left: 1px solid #ddd;
    text-align: center;
    text-transform: uppercase;
    color: #6b7da5;
    font-weight: 400;
}
/*  Right Bar  */
.right-bar-trigger {
    float: right;
    padding: 12px 0px 12px 10px;
    font-size: 20px;
    color: var(--secondary-color);
    cursor: pointer;
}
/*.right-bar-trigger{
    right: 0;
    position: absolute;
    width: 40px;
    height: calc(100vh - 102px);
    background: #FFF6EE;
    transition: all 0.6s ease;
    z-index: 10;
    bottom: 0;
    border-left: 2px solid #757575;
}*/

.right-bar ul {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .right-bar ul li {
        float: left;
        width: 100%;
        margin: 0;
        padding: 5px 5px;
    }

        .right-bar ul li a {
            display: block;
            white-space: nowrap;
            color: #F6AA26;
            width: 100%;
            margin: 0 0;
            padding: 5px;
            font-size: 12px;
            text-decoration: none;
            overflow: hidden;
        }

            .right-bar ul li a.prop {
                color: #1e1e1e;
                white-space: pre-wrap;
                border-radius: 4px;
            }

            .right-bar ul li a i {
                font-size: 20px;
                text-align: center;
                margin-right: 8px;
            }

.right-bar-info {
    right: -350px;
    position: fixed;
    width: 350px;
    height: calc(100vh - 50px);
    background: #FFF;
    transition: all 0.6s ease;
    z-index: 999;
    bottom: 0;
    border-left: 1px solid #757575;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

    .right-bar-info.open {
        right: 0px;
    }

.title-color-1 {
    color: #4cb050;
}

.title-color-2 {
    color: var(--primary-color);
}

.title-color-3 {
    color: #da2983;
}

.title-color-4 {
    color: #3e52b5;
}

.right-bar-info-box {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.right-bar-info .right-bar-info-box:last-child {
    border-bottom: 0px solid #afafaf;
    margin: 0 0 0px 0;
}

.right-bar-title {
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

.right-bar-sub-title {
    text-align: center;
    font-size: 14px;
}

.right-info-value {
    background: #edeef3;
    padding: 10px 10px;
    border: 1px solid #c6c6ce;
    text-align: center;
    font: 14px;
    color: #666;
    border-radius: 4px;
    margin-top: 15px;
}

    .right-info-value h5 {
        margin: 0;
        padding: 0;
        font-size: 16px;
    }

.new-budget, .virement-budget {
    float: left;
    width: 100%;
    height: 200px;
    overflow: hidden;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.new-budget {
    border-left: 4px solid #1e8644;
    background: #E9F3ED;
}

.virement-budget {
    border-left: 4px solid var(--primary-color);
    background: #fff6e1;
}


.session-time {
    position: fixed;
    left: 50%;
    text-align: center;
    top: 7px;
    width: 330px;
    transform: translateX(-40%);
}

    .session-time h4 {
        font-size: 14px !important;
        background: #ffa500;
        display: inline-block;
        padding: 6px 10px;
        border-radius: 4px;
    }



/*  Tabs   */
.tab-menu {
    float: left;
    width: 100%;
    max-height: 0px;
    transition: all 0.9s ease;
    overflow: hidden;
}

    .tab-menu ul {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .tab-menu ul li {
            margin: 0;
            padding: 6px 25px;
            display: inline-block;
            font-size: 18px;
            cursor: pointer;
        }

            .tab-menu ul li.active {
                color: var(--primary-color);
                border-bottom: 3px solid var(--primary-color);
            }

.tab-view .tab-menu {
    max-height: 100px;
}

.tab-container {
    float: left;
    width: 100%;
}

.tab-view .tab-container {
    display: block;
    padding: 10px;
    background: #FFF;
    border: 1px solid #c6c6ce;
    overflow: hidden;
    position: relative;
    /*min-height: 400px;*/
}

    .tab-view .tab-container .form-section-item {
        position: relative;
        left: 0%;
        top: 0;
        opacity: 0;
        transition: all 0.6s ease;
        background: #FFF;
        padding: 0px;
        /*display: none;*/
        max-height: 0;
    }

.tab-view .form-section-item.current {
    /*display: block;*/
    max-height: 1000px;
    left: 0px;
    opacity: 1;
    transition: all 0.6s ease;
    padding: 15px;
}

.data-more-info {
    float: left;
    width: 100%;
    margin-top: 0px;
    background: #eeeeee;
    border: 0px solid #757575;
    padding: 0px;
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease;
    max-height: 0;
    overflow: hidden;
}

    .data-more-info.current {
        visibility: visible;
        opacity: 1;
        margin-top: 10px;
        padding: 10px;
        max-height: 1000px;
        border: 1px solid #757575;
    }




/*  Inner second level Tabs   */
.inner-tab-container {
    float: left;
    width: 100%;
}

.inner-tab-links {
    float: left;
    width: 100%;
}

    .inner-tab-links ul {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .inner-tab-links ul li {
            margin: 0;
            padding: 6px 25px;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            color: #666;
        }

            .inner-tab-links ul li.active {
                color: #019ed3;
                border-bottom: 3px solid #019ed3;
            }

.inner-tab-item-group {
    float: left;
    width: 100%;
    padding: 10px 7px;
    background: #FFF;
    border: 1px solid #757575;
}

.inner-tab-item {
    display: none;
}

    .inner-tab-item.current {
        display: block;
    }

.inner-tab-title-bar {
    float: left;
    width: 100%;
    padding: 0 0 10px 0;
}

.inner-tab-title-bar-title {
    float: left;
    color: #3f51b5;
}

.inner-tab-title-bar-action {
    float: left;
    color: #019ed3;
    border-radius: 4px;
    border: 1px solid #019ed3;
    padding: 6px 15px;
    margin-left: -5px;
}

    .inner-tab-title-bar-action.disabled {
        background: #aaa;
        color: #F1F1F1;
        border: 1px solid #999;
    }


/* -------------------------------------- Form Tabs -------------------------------------------  */
.form-tab-container {
    float: left;
    width: 100%;
}

.form-tab-links {
    float: left;
    width: 100%;
    background: #e1dbd4;
    /*border: 1px solid #757575;*/
    box-shadow: 0 0 5px #777;
    position: relative;
    z-index: 5;
}

    .form-tab-links ul {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .form-tab-links ul li {
            float: left;
            margin: 0;
            padding: 10px 15px 6px 15px;
            border-bottom: 2px solid #e1dbd4;
            display: inline-block;
            font-size: 14px;
            color: #3d3d3d;
            text-transform: uppercase;
            text-align: center;
            transition: all 0.6s ease;
        }

    .form-tab-links.tab-clickble ul li {
        cursor: pointer;
    }

    .form-tab-links.top-links ul li {
        cursor: pointer;
    }

        .form-tab-links.top-links ul li:hover {
            background: rgba(255,255,255,0.4);
        }

        .form-tab-links.top-links ul li.active:hover {
            background: #009bf7;
            cursor: default;
        }

    .form-tab-links ul li span {
        float: left;
        width: 100%;
    }

    .form-tab-links ul li i {
        font-size: 18px;
    }

    .form-tab-links ul li.active {
        color: #FFF;
        background: var(--primary-color);
        border-bottom: 2px solid var(--primary-color);
    }

    .form-tab-links ul li.done {
        color: #62b770;
        font-weight: 600;
        border-bottom: 2px solid #62b770;
        cursor: pointer;
    }

    .form-tab-links ul li.active.done {
        font-weight: 400;
        color: #FFF;
        border-bottom: 2px solid var(--primary-color);
    }


.form-tab-item-group {
    position: relative;
    float: left;
    width: 100%;
    height: calc(100vh - 238px);
    overflow-y: auto;
    padding: 15px 15px 30px 15px;
    background: #F1F1F1;
    /*border: 1px solid #757575;*/
    z-index: 4;
    /*display:flex;*/
    overflow-y: auto;
}

    .form-tab-item-group.full-tab-view {
        height: calc(100vh - 140px);
        padding: 15px 15px 15px 15px;
    }

        .form-tab-item-group.full-tab-view .tab-form {
            padding-bottom: 0;
        }

.form-tab-item {
    float: left;
    width: 100%;
    /*max-height: calc(100vh - 167px);*/
    min-height: calc(100vh - 214px);
    background: #FFF;
    padding: 15px;
    display: none;
    opacity: 0;
    transition: opacity .15s linear;
    box-shadow: 0 0 5px #ccc;
}

.form-tab-item-full {
    min-height: calc(100vh - 167px);
}

.form-tab-item.current {
    display: block;
    opacity: 1;
}

.form-tab-title-bar {
    float: left;
    width: 100%;
    padding: 0 0 10px 0;
}

.form-tab-title-bar-title {
    float: left;
    color: #3f51b5;
}

.form-tab-title-bar-action {
    float: right;
    color: #019ed3;
}

.tab-form {
    float: left;
    width: 100%;
    padding: 0 0 30px 0;
}

.gis-icon {
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
}

.data-item-out {
    float: left;
    width: 100%;
    padding: 4px 4px 0 4px;
    background: #FFF;
    border: 1px solid #757575;
}

.data-item-nodes {
    float: left;
    width: 100%;
    padding: 4px 4px 0 4px;
    background: #FFF;
    border: 1px solid #757575;
    margin-top: 20px;
}

.data-node-item {
    float: left;
    width: 100%;
    padding: 4px;
    margin-bottom: 4px;
    background: #e8eaf6;
    border: 1px solid #757575;
    position: relative;
}

.data-node-item-label {
    float: left;
}

.data-node-item-more {
    float: right;
    padding: 0px 20px 0 20px;
    border-left: 1px solid #DDD;
}

    .data-node-item-more i {
        color: #757575;
    }

.data-node-item-child {
    float: right;
    padding: 0px 10px 0 20px;
    border-left: 1px solid #DDD;
    cursor: pointer;
    position: relative;
    z-index: 11;
}

.level-2 {
    background: #E0F2F2;
}

.level-3 {
    background: #E8F6E9;
}

.level-4 {
    background: #FFF2DF;
}

.level-5 {
    background: #F1F1F1;
}

/* sub data Nodes */

.sub-data-node {
    float: left;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    transition: all 0.9s ease;
}

    .sub-data-node.active {
        visibility: visible;
        opacity: 1;
        max-height: 1000px;
        margin-bottom: 10px;
    }

.sub-data-node-item {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 0px;
    background: #E0F2F2;
    border: 1px solid #757575;
    border-top: 0px solid #757575;
    position: relative;
}

/*.data-item-nodes ul {
	float: left;
	padding: 0;
	margin: 0;
	width: 100%;
	list-style: none;
}
.data-item-nodes ul ul {
	visibility: hidden;
	opacity: 0;
	max-height: 0;
	transition: all 0.6s ease;
}
.data-item-nodes ul ul.active {
	visibility: visible;
	opacity: 1;
	max-height: 2000px;
}
.data-item-nodes .data-list-item {
	border-top: 0px solid #757575;
}
.data-item-nodes ul li .data-list-item {
	background: #e8eaf6;
}
.data-item-nodes ul ul li .data-list-item {
	background: #e0f2f2;
	color: #008ea3;
}
.data-item-nodes ul ul ul li .data-list-item {
	background: #e8f6e9;
	color: #4cb050;
}
.data-item-nodes ul ul ul ul li .sub-data-list-item {
	background: #fff2df;
	color: #ff9700;
	padding: 5px 10px;
}
*/





.data-list-item {
    float: left;
    width: 100%;
    padding: 6px;
    margin-bottom: 4px;
    background: #e8eaf6;
    border: 1px solid #757575;
    position: relative;
}

    .data-list-item::after {
        content: "";
        position: absolute;
        width: 50px;
        height: calc(100% - 10px);
        border-left: 1px solid #d8d8d8;
        right: 0;
        top: 5px;
    }


    .data-list-item::before {
        content: "\f078";
        font-family: "Font Awesome 5 Free";
        position: absolute;
        width: 50px;
        text-align: center;
        border-left: 1px solid #d8d8d8;
        right: 0;
        top: 6px;
        font-weight: 800;
    }

    .data-list-item.tree-collaps::before {
        content: "";
    }

.data-item-collaps-panel .data-list-item {
    background: #eeeeee;
    margin-bottom: 0;
}

.data-list-item span {
    margin-left: 40px;
}

.data-item-collaps-panel {
    float: left;
    width: 100%;
    margin-bottom: 4px;
}

.parent-data-item {
    cursor: pointer;
}

.data-litem-item-child {
    float: right;
    padding: 0px 10px 0 20px;
    border-left: 1px solid #DDD;
    cursor: pointer;
    position: relative;
    z-index: 11;
}

.data-item-more {
    position: absolute;
    color: #757575;
    font-size: 28px;
    right: 60px;
    top: -4px;
}

.data-item-more {
    position: absolute;
    color: #757575;
    background: #E8EAF6;
    font-size: 20px;
    right: 60px;
    top: 2px;
    padding: 0 0 0 10px;
    border-left: 1px solid #afafaf;
}

.data-item-val-counter {
    position: absolute;
    color: #757575;
    font-size: 16px;
    right: 104px;
    top: 5px;
}


/* sub data list */

.sub-data-list {
    float: left;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    transition: all 0.9s ease;
    overflow: hidden;
}

    .sub-data-list.active {
        visibility: visible;
        opacity: 1;
        max-height: 1000px;
    }

.sub-data-list-item {
    float: left;
    width: 100%;
    padding: 7px 10px;
    margin-bottom: 0px;
    background: #e8eaf6;
    border: 1px solid #757575;
    border-top: 0px solid #757575;
    position: relative;
}

.data-item-collaps-panel {
    border-top: 1px solid #757575;
}

    .data-item-collaps-panel ul {
        float: left;
        padding: 0;
        margin: 0;
        width: 100%;
        list-style: none;
    }

        .data-item-collaps-panel ul ul {
            visibility: hidden;
            opacity: 0;
            max-height: 0;
            transition: all 0.6s ease;
        }

            .data-item-collaps-panel ul ul.active {
                visibility: visible;
                opacity: 1;
                max-height: 2000px;
            }

    .data-item-collaps-panel .data-list-item {
        border-top: 0px solid #757575;
    }

    .data-item-collaps-panel.custom-1 .data-list-item {
        border-top: 1px solid #757575;
    }

    .data-item-collaps-panel ul li .data-list-item {
        background: #e8eaf6;
    }

    .data-item-collaps-panel ul ul li .data-list-item {
        background: #e0f2f2;
        color: #008ea3;
    }

    .data-item-collaps-panel ul ul ul li .data-list-item {
        background: #e8f6e9;
        color: #4cb050;
    }

    .data-item-collaps-panel ul ul ul ul li .sub-data-list-item {
        background: #fff2df;
        color: #ff9700;
        padding: 5px 10px;
    }

.sub-data-list-item .text-lable {
    float: left;
    padding: 2px 0px;
}

.sub-data-list-item .form-control-item {
    float: right;
    font-size: 12px;
}

    .sub-data-list-item .form-control-item .form-control {
        height: auto;
        padding: 0 6px;
    }

.dynamic-number {
    font-size: 12px;
    padding-left: 30px;
}

.top-back-btn {
    float: left;
    padding: 0px;
    border-right: 1px solid #eee;
}

.top-left-label {
    margin-right: 30px;
    float: left;
    white-space: nowrap;
    font-weight: 400;
}

.top-title-text {
    min-width: 50%;
    max-width: calc(100% - 50px);
    float: left;
    padding: 13px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.span-color-1 {
    color: #4cb050;
}

.span-color-2 {
    color: #e23f20;
}

.span-color-3 {
    font-size: 70%;
    color: #019ED3;
}

.top-right-label {
    float: right;
    white-space: nowrap;
}

.form-sub-title-1 {
    float: left;
    width: 100%;
    padding: 20px 0 10px 0;
    color: var(--primary-color);
    font-size: 18px;
    text-transform: uppercase;
}


    .form-sub-title-1.custom {
        text-transform: capitalize;
        color: #000;
        font-weight: 500;
    }

.spl-sub-title {
    float: left;
    width: 100%;
    padding: 20px 0 5px 0;
    color: #444;
    font-size: 16px;
}

.left-align {
    float: left;
    text-align: left;
}

.right-align {
    margin-left: auto;
}

.title-alert {
    float: right;
    padding: 5px 20px;
    margin-right: 50px;
    font-size: 14px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    animation-duration: 3s;
}

.right-btn-holder {
    min-width: 500px;
    float: right;
    white-space: nowrap;
}

.left-btn-holder-100 {
    width: 200px;
}

.right-btn-holder-250 {
    width: 250px;
}

.center-align-progress-bar {
    float: left;
    width: calc(100% - 450px);
}

.form-btn-bar-1 {
    /*background: #bdbdbd;*/
    float: left;
    width: 100%;
    padding: 5px 15px;
    margin-top: 10px;
    /*border: 2px solid #757575;*/
    text-align: right;
}

.form-btn-bar-2 {
    background: #15323b;
    float: left;
    width: 100%;
    padding: 10px 20px;
    text-align: right;
    height: 59px;
    overflow: hidden;
}

.tab-nav-status {
    float: left;
    padding: 16px 21px;
    text-align: right;
    color: #000;
    font-size: 14px;
}

button {
    cursor: pointer;
    outline: 1px solid transparent;
}

.btn-group-right {
    float: left;
    width: 100%;
    text-align: right;
    padding: 10px 0 0 0;
    /*border-top: 1px solid #ccc;*/
}

.btn.disabled, .btn:disabled {
    cursor: default;
}

.btn-2 {
    background: var(--yellow-color);
    padding: 6px 10px;
    color: var(--secondary-color);
    border: 1px solid var(--yellow-color);
    transition: all 0.6s ease;
    font-size: 14px;
    box-shadow: 0 0 3px #999;
    border-radius: 1px;
    position: relative;
}

table td .btn-2, .popup-form-button .btn-2 {
    background: var(--primary-color);
    padding: 6px 10px;
    color: #FFF;
    border: 1px solid var(--primary-color);
    transition: all 0.6s ease;
    font-size: 14px;
    box-shadow: 0 0 3px #999;
    border-radius: 1px;
    position: relative;
}
/*.btn-2::before{
    position:absolute;
    content:"";
    height:100%;
    width:1px;
    background: var(--secondary-color);
    left:30px;
    top:0px;
}*/
.btn-2 i {
    margin-right: 5px;
}

.page-title-bar .btn-2::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    background: var(--secondary-color);
    left: 30px;
    top: 0px;
}

.page-title-bar .btn-2 i {
    margin-right: 10px;
}

.btn-2:hover {
    /*color: #F1F1F1;*/
    border: 1px solid var(--primary-color);
}

.btn-2.disabled {
    background: #888;
    cursor: default;
}

a.btn-2 {
    color: var(--secondary-color) !important;
}

.btn-3 {
    background: #e23f20;
    color: #FFF;
    border: 1px solid #961b04;
    transition: all 0.6s ease;
}

    .btn-3:hover {
        background: #e23f20;
        color: #FFF;
        border: 1px solid #961b04;
    }

.btn-4 {
    background: #cfd8dd;
    color: #37474f;
    border: 1px solid #37474f;
    transition: all 0.6s ease;
    padding: 7px 30px;
    border-radius: 20px;
}

    .btn-4:hover {
        background: #cfd8dd;
        color: #37474f;
        border: 1px solid #37474f;
    }

.btn-5 {
    background: #1f608a;
    color: #FFF;
    border: 1px solid #1f608a;
    transition: all 0.6s ease;
    padding: 10px 15px;
}

    .btn-5:hover {
        background: #1f608a;
        color: #FFF;
        border: 1px solid #1f608a;
    }

    .btn-5:disabled {
        background: #294d65;
        color: #000;
        border: 1px solid #294d65;
    }

.btn-6 {
    background: var(--alternate-color);
    color: #FFF;
    border: 1px solid var(--alternate-color);
    transition: all 0.6s ease;
    padding: 4px 16px;
    margin: 0px 0 0 8px;
    position: relative;
    border-radius: 20px;
}

    .btn-6:hover {
        background: var(--alternate-color);
        color: #FFF;
        border: 1px solid var(--alternate-color);
    }

    .btn-6 i {
        margin-right: 5px;
    }

.btn-7 {
    background: var(--alternate-color);
    color: #FFF;
    border: 1px solid #333;
    transition: all 0.6s ease;
    border-right: 0px solid #333;
}

    .btn-7:hover {
        background: var(--alternate-color);
        color: #FFF;
    }

.btn-7-ext {
    background: #409c4f;
    border-right: 1px solid #333;
    border-left: 0px solid #333;
}


.btn-9 {
    background: #20c0b2;
    color: #FFF;
    border: 1px solid #20c0b2;
    transition: all 0.6s ease;
    padding: 6px 12px;
    margin: 0px 0 0 8px;
    position: relative;
    border-radius: 20px;
}

    .btn-9:hover {
        background: #20c0b2;
        color: #FFF;
        border: 1px solid #20c0b2;
    }

.btn-8-bordered {
    background: none;
    color: #20c0b2;
    border: 2px solid #20c0b2;
    transition: all 0.6s ease;
    padding: 7px 11px;
    margin: 0px 0 0 8px;
    position: relative;
    border-radius: 20px;
    cursor: pointer;
}

    .btn-8-bordered:hover {
        background: #20c0b2;
        color: #FFF;
        border: 2px solid #20c0b2;
    }

    .btn-8-bordered:disabled {
        cursor: default;
        border: 2px solid #999;
        color: #999;
        pointer-events: none;
    }

.btn-one {
    background: #BF4B30;
    color: #FFF;
    border: 1px solid #BF4B30;
    transition: all 0.6s ease;
}

    .btn-one:hover {
        background: none;
        color: #BF4B30;
        border: 1px solid #BF4B30;
    }

.btn-one-success {
    background: none;
    color: #019ed3;
    border: 1px solid #019ed3;
    transition: all 0.6s ease;
}

    .btn-one-success:hover {
        background: #019ed3;
        color: #FFF;
        border: 1px solid #019ed3;
    }

.btn-back {
    background: none;
    color: #fff;
    border: 0px solid var(--primary-color);
    transition: all 0.6s ease;
    padding: 13px 15px;
}

    .btn-back:hover {
        background: none;
        color: #999;
        border: 0px solid var(--primary-color);
    }

.btn-box-left {
    float: left;
    width: 100%;
    padding: 10px 0;
    text-align: left;
}

.btn-box-center {
    float: left;
    width: 100%;
    padding: 10px 0;
    text-align: center;
}

.btn-box-right {
    float: left;
    width: 100%;
    padding: 10px 0;
    text-align: right;
}

.round-btn-orange {
    background: var(--primary-color);
    color: #FFF;
    border: 1px solid var(--primary-color);
    transition: all 0.6s ease;
    width: 36px;
    height: 36px;
    margin: 0px 0 0 8px;
    position: relative;
    border-radius: 50%;
}

    .round-btn-orange:hover {
        background: var(--primary-color);
        color: #FFF;
        border: 1px solid var(--primary-color);
    }

.pop-grid-btns {
    float: right;
    margin: -35px 4px 0 0;
    position: relative;
    z-index: 10;
}

.plain-btn-orange {
    background: none;
    color: var(--primary-color);
    border: 0px solid var(--primary-color);
    transition: all 0.6s ease;
    width: 28px;
    height: 28px;
    margin: 0px 0 0 8px;
    position: relative;
    border-radius: 50%;
    font-size: 20px;
    outline: none !important;
}

    .plain-btn-orange:hover {
        background: none;
        color: var(--primary-color);
        border: 0px solid var(--primary-color);
    }

.btn-node, .btn-node-2 {
    background: none;
    color: var(--primary-color);
    border: 0px solid var(--primary-color);
    transition: all 0.6s ease;
    padding: 0;
    margin: 0px 0 0 8px;
    position: relative;
    border-radius: 0px;
}

    .btn-node:hover, .btn-node-2:hover {
        background: none;
        color: var(--primary-color);
        border: 0px solid var(--primary-color);
    }


/* Button 8g */
.perspective {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    display: inline-block;
    margin: 0;
}

.btn-8 {
    display: block;
    background: #5cbcf6;
    outline: 1px solid transparent; /* FF jagged edges fix */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: all 0.9s ease;
}

    .btn-8:active {
        background: #55b7f3;
    }

.btn-8g {
    background: #20c0b2;
    color: #F1F1F1;
}

    .btn-8g:active {
        background: #fff;
    }

    .btn-8g:after,
    .btn-8g:before {
        text-transform: uppercase;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        line-height: 40px;
    }

    .btn-8g:after {
        top: -98%; /* should be -100% but there's a gap in Chrome Version 34.0.1847.131 */
        background: #7aca7c;
        color: #358337;
        content: 'Saved';
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: rotateX(90deg);
        -moz-transform-origin: 0% 100%;
        -moz-transform: rotateX(90deg);
        -ms-transform-origin: 0% 100%;
        -ms-transform: rotateX(90deg);
        transform-origin: 0% 100%;
        transform: rotateX(90deg);
    }

    .btn-8g:before {
        top: 100%;
        background: #e96a6a;
        color: #a33a3a;
        content: 'Error!';
        font-weight: 700;
        font-family: 'Lato', Calibri, Arial, sans-serif;
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(-90deg);
        -moz-transform-origin: 0% 0%;
        -moz-transform: rotateX(-90deg);
        -ms-transform-origin: 0% 0%;
        -ms-transform: rotateX(-90deg);
        transform-origin: 0% 0%;
        transform: rotateX(-90deg);
    }

    .btn-8g.btn-success3d {
        background: #aaa;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: rotateX(-90deg) translateY(100%);
        -moz-transform-origin: 50% 100%;
        -moz-transform: rotateX(-90deg) translateY(100%);
        -ms-transform-origin: 50% 100%;
        -ms-transform: rotateX(-90deg) translateY(100%);
        transform-origin: 50% 100%;
        transform: rotateX(-90deg) translateY(100%);
    }

    .btn-8g.btn-error3d {
        background: #aaa;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: rotateX(90deg) translateY(-100%);
        -moz-transform-origin: 50% 0%;
        -moz-transform: rotateX(90deg) translateY(-100%);
        -ms-transform-origin: 50% 0%;
        -ms-transform: rotateX(90deg) translateY(-100%);
        transform-origin: 50% 0%;
        transform: rotateX(90deg) translateY(-100%);
    }








.search-field {
    border-radius: 0;
    box-shadow: 0px 2px 4px 0px #aaa;
    padding: 9px;
    height: auto;
}

.action-btns-left {
    float: left;
    width: 100%;
    margin: 30px 0 20px 0;
}

.no-records {
    float: left;
    width: 100%;
    text-align: center;
    color: #757575;
}

    .no-records:empty {
        padding: 0px;
    }

    .no-records span {
        text-transform: uppercase;
        color: #4cb050;
        animation: blinkingText 2s infinite;
        font-size: 18px;
        padding: 0 0 15px 0;
    }

        .no-records span.disabled {
            cursor: default;
            color: #666;
            animation: none;
        }

@keyframes blinkingText {
    0% {
        color: #4cb050;
    }

    49% {
        color: var(--primary-color);
    }

    50% {
        color: transparent;
    }

    99% {
        color: var(--primary-color);
    }

    100% {
        color: #4cb050;
    }
}

/*  Empty dashboard  */

.empty-dashboard {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #FFF;
    top: 0;
    left: 0;
    z-index: 100;
}

    .empty-dashboard .header {
        width: 100%;
    }

        .empty-dashboard .header .header-alt-logo {
            float: left;
        }

.empty-dashboard-left {
    float: left;
    width: 50%;
    height: 100vh;
    vertical-align: middle;
}

.empty-dashboard-content {
    position: absolute;
    top: calc(50% - 200px);
    width: 100%;
    height: 400px;
}

.empty-dashboard-left {
    float: left;
    width: 50%;
    vertical-align: middle;
    padding: 100px;
}

    .empty-dashboard-left h2 {
        line-height: 42px;
        color: #000;
        margin-bottom: 40px;
    }

    .empty-dashboard-left h4 {
        line-height: 42px;
        color: #666;
    }

.empty-dashboard-right {
    float: right;
    width: 50%;
    vertical-align: middle;
    text-align: center;
}

.dash-bottom-bar {
    position: fixed;
    bottom: 30px;
    width: 100%;
    min-height: 100px;
    background: #FFF url(../../images/background-building.png);
    background-size: contain;
}

    .dash-bottom-bar::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 30px;
        bottom: -30px;
        left: 0;
        background: #262a37;
    }

    .dash-bottom-bar::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 20px;
        bottom: -33px;
        left: 0;
        background: url(../../images/dash.png);
        background-repeat: repeat-x;
    }








.project-top-bar {
    float: left;
    width: 100%;
    min-height: 60px;
    position: relative;
    background: #FFF url(../../images/background-building.png);
    background-size: contain;
    margin-bottom: 30px;
    display: none;
}

    .project-top-bar::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 30px;
        bottom: -30px;
        left: 0;
        background: #262a37;
    }

    .project-top-bar::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 20px;
        bottom: -33px;
        left: 0;
        background: url(../../images/dash.png);
        background-repeat: repeat-x;
    }

.project-form-box-block {
    float: left;
    width: 100%;
    padding: 15px 15px 18px 15px;
    position: relative;
}


/*.project-form-box-block.box-1::after{
    background:#62b770;
}

.project-form-box-block.box-2::after{
    background:var(--primary-color);
}

.project-form-box-block.box-3::after{
    background:#008676;
}

.project-form-box-block.box-4::after{
    background:#0099ff;
}*/


.project-form-box {
    float: left;
    width: 100%;
    position: relative;
}

    .project-form-box::after {
        content: "\f0d7";
        font-family: "Font Awesome 5 Free";
        font-size: 48px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        text-align: center;
        position: absolute;
        font-weight: 900;
        transform: rotate(0deg);
        transition: all 0.6s ease;
        z-index: 0;
    }

.form-box-color-1.active::after {
    bottom: -38px;
}

.form-box-color-2.active::after {
    bottom: -38px;
}

.form-box-color-3.active::after {
    bottom: -38px;
}

.form-box-color-4.active::after {
    bottom: -38px;
}

.project-form-box-icon {
    float: left;
    width: 100%;
    padding: 5px;
    text-align: center;
    font-size: 28px;
    color: #FFF;
    background: rgba(0,0,0,0.3);
    cursor: pointer;
}

.project-form-box-title {
    position: relative;
    float: left;
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    color: #FFF;
    padding: 20px 10px;
    z-index: 2;
    cursor: pointer;
}

.form-box-color-1 {
    background: #62b770;
}

    .form-box-color-1::after {
        color: #62b770;
    }

.form-box-color-2 {
    background: var(--primary-color);
}

    .form-box-color-2::after {
        color: var(--primary-color);
    }

.form-box-color-3 {
    background: #008676;
}

    .form-box-color-3::after {
        color: #008676;
    }

.form-box-color-4 {
    background: #0099ff;
}

    .form-box-color-4::after {
        color: #0099ff;
    }

.project-form-container {
    float: left;
    width: 100%;
    padding: 0px 15px 10px 15px;
    position: relative;
}

.project-title-bar {
    float: left;
    width: 100%;
    /*padding: 5px 0px 7px 0;*/
    display: flex;
}

.project-title-bar-label {
    float: left;
    /*border-bottom:3px solid;*/
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    padding: 6px 0px;
}

/*.project-form-container::before {
    position: absolute;
    content: "";
    width: calc(100% - 30px);
    height: 4px;
    top: -6px;
    left: 15px;
}*/

.project-form-1::before {
    background: #62b770;
}

.project-form-2::before {
    background: var(--primary-color);
}

.project-form-3::before {
    background: #008676;
}

.project-form-4::before {
    background: #0099ff;
}





.project-form-1 .project-title-bar-label {
    color: #ffffff;
    border-color: #62b770;
}

.project-form-2 .project-title-bar-label {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.project-form-3 .project-title-bar-label {
    color: #008676;
    border-color: #008676;
}

.project-form-4 .project-title-bar-label {
    color: #0099ff;
    border-color: #0099ff;
}

.project-form-container .item-data-filters {
    padding: 5px 10px;
    background: #dad9d7;
    position: relative;
    z-index: 7;
}

.project-data-table {
    padding: 10px;
    background: #FFF;
    border: 1px solid #bdbfc1;
}

    .project-data-table .k-grid-footer, .project-data-table .k-grid-footer td, .project-data-table .k-pager-wrap, .custom-grid .k-grid-pager {
        background: #15323B !important;
        color: #FFF !important;
        padding: 3px;
    }

        .project-data-table .k-grid-footer td, .project-data-table .k-group-footer td {
            background-color: #333a42 !important;
        }


.btn-green {
    background: #62b770;
    color: #FFF;
}

.btn-red {
    background: #bf4b30;
    color: #FFF;
}

a.btn-red {
    color: #FFF !important;
}

.project-list-container {
    float: left;
    width: 100%;
    background: #e8eaf6;
    padding: 10px;
    border: 1px solid #757575;
}

.project-item {
    float: left;
    width: 100%;
    background: #FFF;
    padding: 5px 10px;
    border: 1px solid #757575;
    margin-bottom: 10px;
}

.project-list-container .project-item:last-child {
    margin-bottom: 0px;
}

.project-table {
    table-layout: fixed;
    width: 100%;
}

    .project-table td {
        padding: 5px;
    }

.dots {
    float: left;
    padding: 4px 0;
    margin: 5px 0 0 0;
    list-style: none;
}

    .dots li {
        display: inline-block;
        padding: 0 5px;
    }

        .dots li a {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #CCC;
            display: block;
        }

        .dots li.done a {
            background: #4cb050;
        }

.status-text {
    color: #4cb050;
    text-align: center;
}

.spl-text-1 {
    float: right;
    margin-top: -1px;
    color: #333;
}

.spl-text-2 {
    color: #009bf7;
}

.gis-link-red {
    color: #ee534f;
    font-size: 16px;
}

.gis-link-btn {
    float: left;
    padding: 4px 25px 6px 25px;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    margin-bottom: 10px;
    color: var(--primary-color);
    cursor: pointer;
    display: block;
}

    .gis-link-btn label {
        margin: 0;
        cursor: pointer;
    }

.active-label {
    color: #019ed3;
}

.done-label {
    color: #4cb050;
}

.form-control.bottom-border {
    border-radius: 0;
    border: 0px solid #757575;
    border-bottom: 1px solid #aaa;
    width: 90%;
}

.digits-section {
    float: left;
    width: 90%;
    padding: 4px 0;
    margin: 5px 10% 0 0;
    list-style: none;
    font-family: 'Aldrich', sans-serif;
}

    .digits-section ul {
        float: right;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .digits-section li {
        display: inline-block;
        padding: 0px;
    }

        .digits-section li a {
            width: 22px;
            text-align: center;
            border: 1px solid #999;
            display: block;
            font-size: 16px;
        }

        .digits-section li.done a {
            background: #4cb050;
        }



/* popup form   */
.pop-add-form {
    float: left;
    width: 100%;
    padding: 20px;
    max-height: calc(100vh - 145px);
    min-height: 400px;
    /*height: calc(100vh - 100px);*/
    overflow-y: auto;
}

    .pop-add-form.full-height {
        height: calc(100vh - 145px);
    }

    .pop-add-form.tabs {
        padding: 0;
    }

.popup-form-button {
    background: #F1F1F1;
    float: left;
    text-align: right;
    width: 100%;
    padding: 6px 10px;
    border-top: 1px solid #ccc;
}

.pop-btn-center {
    text-align: center;
}

#winDocuments {
    z-index: 1100;
}

.modal-backdrop + .modal-backdrop {
    z-index: 998;
}

.model-content {
    box-shadow: 0 0 5px #555;
}

.modal-header {
    background: #1e1e1e;
    padding: 5px 15px;
    color: #F1F1F1;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

    .modal-header .close {
        color: #FFF;
        text-shadow: 0 0px 0 #fff;
        opacity: 1;
        outline: none !important;
    }

.modal-title {
    font-size: 18px;
    text-transform: uppercase;
}

.form-popup .modal-header {
    background: #1e1e1e;
    color: #fff;
    padding: 5px 15px;
}

    .form-popup .modal-header .close, .change-pwn-close {
        padding: 17px 15px 15px 15px;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        color: #FFF;
        text-shadow: 0 0px 0 #fff;
        opacity: 1;
        outline: none !important;
    }

        .form-popup .modal-header .close:not(:disabled):not(.disabled):hover,
        .form-popup .modal-header .close:not(:disabled):not(.disabled):focus,
        .change-pwn-close:hover, .change-pwn-close:focus,
        .modal-header .close {
            color: #FFF !important;
        }

.form-popup .modal-content {
    border-radius: 4px;
    background: #FFF;
}

    .form-popup .modal-content .form-tab-item-group {
        height: auto;
        max-height: calc(100vh - 234px);
        padding: 10px;
        box-shadow: 0 0 0px #ccc;
    }

    .form-popup .modal-content .form-tab-item {
    }

.map-popup {
    padding: 0 !important;
}

    .map-popup .modal-header {
        background: #1e1e1e;
        padding: 10px 15px;
        color: #F1F1F1;
        border-radius: 0;
    }

    .map-popup .modal-title {
        font-size: 18px;
    }

    .map-popup .modal-header .close {
        padding: 20px 20px 20px 20px;
        color: #FFF;
    }

    .map-popup .modal-content {
        border-radius: 0;
        padding: 0;
    }

    .map-popup .modal-body {
        padding: 0;
    }

.gis-form-controls {
    float: left;
    height: 100%;
    padding: 0px 25px 0 10px;
    box-shadow: -4px 0px 5px -3px #cccccc;
}


.change-pwd-block {
    padding: 15px;
}




.collapse-panel {
    clear: both;
    float: left;
    width: 100%;
}

.collapse-item {
    float: left;
    width: 100%;
    border: 1px solid #ddd;
    margin: 0 0 10px 0;
    border-radius: 4px;
}

.collapse-header {
    padding: 4px 15px 4px 25px;
    background: #F1F1F1 linear-gradient(to right, #333333, #666666);
    font-size: 16px;
    float: left;
    width: 100%;
    cursor: pointer;
    clear: both;
    transition: all 0.6s ease;
    position: relative;
    color: #F1F1F1;
    border-radius: 4px;
}

.collapse-item.active .collapse-header {
    border-bottom: 1px solid #ddd;
    background: #333;
    color: #FFF;
    cursor: default;
}

.collapse-header:after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-size: 18px;
    top: 3px;
    left: 10px;
    position: absolute;
    font-weight: 900;
    color: #f1f1f1;
    transform: rotate(0deg);
    transition: all 0.6s ease;
}

.collapse-item.active .collapse-header:after {
    transform: rotate(90deg);
    color: #FFF;
}

.collapse-content {
    padding: 15px;
    background: #FFF;
    float: left;
    width: 100%;
    display: none;
}

.collapse-contentpanel {
    padding: 5px;
    background: #FFF;
    float: left;
    width: 100%;
}

.collapse-item.active .collapse-content {
    display: block;
}

.form-page-out {
    position: relative;
}
/* popup form end*/


.data-display-mode-icon {
    float: left;
    font-size: 16px;
}

    .data-display-mode-icon.active {
        color: #019ed3;
    }

.left-align .data-display-mode-icon {
    padding: 10px 20px 10px 0;
    cursor: pointer;
}

.right-align .data-display-mode-icon {
    padding: 10px 0px 10px 0;
    text-transform: uppercase;
    cursor: pointer;
}

.data-filters {
    visibility: hidden;
    opacity: 0;
    padding: 0px 0;
    max-height: 0;
    transition: all 0.6s ease;
    overflow: hidden;
}

    .data-filters.active {
        visibility: visible;
        padding: 20px 0;
        opacity: 1;
        max-height: 1000px;
    }

.filter-left-align {
    width: calc(100% - 215px);
    float: left;
}

.filter-right-align {
    width: 100px;
    float: right;
}

.data-filters .form-control, .data-filters .custom-select {
    border-radius: 20px;
}

.data-table {
    float: left;
    width: 100%;
    background: #FFF;
    padding: 5px 0px;
    overflow-x: auto;
}

    .data-table table {
        border: 1px solid #ccc;
        margin-bottom: 0;
    }

        .data-table table th {
            background: #ccc;
            color: #333;
            /*border-bottom: 1px solid #ccc;*/
            padding: 4px 6px;
            font-weight: 400;
            vertical-align: middle;
            text-transform: uppercase;
        }

        .data-table table td {
            border-bottom: 1px solid #ccc;
            padding: 4px 6px;
            vertical-align: middle;
        }

        .data-table table tr:nth-child(odd) td {
            background: #f1f1f1;
        }

        .data-table table tr.waiting td {
            background-color: #fcacac !important;
        }

        .data-table table tr.waiting:nth-child(odd) td {
            background-color: #fcacac !important;
        }

        .data-table table tr.td-warn, .data-table table tr.td-warn:nth-child(odd) td {
            background-color: #fcacac !important;
        }

.data-table-search {
    float: left;
    width: 100%;
    padding-top: 5px;
}

    .data-table-search .form-control {
        height: auto;
        line-height: none;
        padding: 6px 6px;
    }

.no-wrap {
    white-space: nowrap;
}

.data-records {
    float: right;
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 10px;
}

.no-of-records {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #999;
}

.tbl-rows-count {
    float: left;
    padding: 5px 0;
}

.tbl-paging {
    float: right;
}

    .tbl-paging ul li a {
        padding: 4px 8px;
        display: block;
        padding: 4px 8px;
        display: block;
        border: 1px solid var(--primary-color);
        margin-left: 2px;
        color: var(--primary-color);
        text-decoration: none;
    }

    .tbl-paging ul li.active a {
        background: var(--primary-color);
        color: #FFF;
    }

    .tbl-paging ul li.disabled a {
        padding: 4px 8px;
        display: block;
        padding: 4px 8px;
        display: block;
        border: 1px solid #999;
        margin-left: 2px;
        color: #999;
        text-decoration: none;
        cursor: default;
    }

.data-table-footer {
    float: left;
    width: 100%;
    background: #F9F9F9;
    padding: 5px;
    border: 1px solid #ddd;
}

    .data-table-footer .pagination {
        margin-bottom: 0;
    }

.td-header-title {
    display: none;
}
/* data div grid   */

.data-div-grid {
    float: left;
    width: 100%;
    transition: all 0.6s ease;
}

    .data-div-grid.list-view {
        display: table;
        border: 1px solid #757575;
        border-bottom: 0px solid #757575;
        table-layout: fixed;
    }

.data-div-row {
    float: left;
    width: 100%;
    border-bottom: 1px solid #757575;
    transition: all 0.6s ease;
}

.data-header {
    background: #757575;
    color: #FFF;
    text-transform: uppercase;
}

.data-div-grid.list-view .data-div-row {
    padding: 6px;
    display: flex;
}

    .data-div-grid.list-view .data-div-row:nth-child(even) {
        background: #eee8f6;
    }

.data-div-grid.list-view .data-div-cell {
    float: left;
}

.data-div-grid.list-view .more, .data-div-grid.list-view .img, .data-div-grid.list-view .status, .data-div-grid.list-view .chat, .data-div-grid.list-view .online {
    width: 150px;
}

.data-div-grid.list-view .user-name, .data-div-grid.list-view .designation {
    width: calc(50% - 375px);
}

.data-div-grid.list-view .data-div-row .data-div-cell {
    display: flex;
}

    .data-div-grid.list-view .data-div-row .data-div-cell .icon {
        display: none;
    }

    .data-div-grid.list-view .data-div-row .data-div-cell.more .icon {
        display: block;
    }

    .data-div-grid.list-view .data-div-row .data-div-cell .user-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #757575;
    }

.data-div-grid.tile-view {
    float: left;
    width: 100%;
}

    .data-div-grid.tile-view .data-div-row {
        float: left;
        width: 12.5%;
        padding: 10px 10px 45px 10px;
        border: 1px solid #CCC;
        border-radius: 6px;
        margin-right: 15px;
        margin-left: 15px;
        margin-bottom: 30px;
        background: #FFF;
        box-shadow: 0 0 5px #999;
        position: relative;
    }

        .data-div-grid.tile-view .data-div-row::after {
            position: absolute;
            content: "";
            bottom: 0;
            width: 100%;
            height: 30px;
            background: #673bb7;
            left: 0;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }

    .data-div-grid.tile-view .data-header {
        display: none;
    }

    .data-div-grid.tile-view .data-div-cell {
        float: left;
        width: 100%;
        text-align: center;
    }

    .data-div-grid.tile-view .img, .data-div-grid.tile-view .user-name, .data-div-grid.tile-view .designation {
        width: 100%;
    }

    .data-div-grid.tile-view .img {
        padding: 5px 0;
    }

    .data-div-grid.tile-view .designation {
        font-size: 12px;
        color: #aaa;
    }

    .data-div-grid.tile-view .more, .data-div-grid.tile-view .status, .data-div-grid.tile-view .chat, .data-div-grid.tile-view .online {
        position: absolute;
    }

    .data-div-grid.tile-view .status {
        top: 5px;
        right: 4px;
        width: 20px;
        color: #b8b8b8;
    }

        .data-div-grid.tile-view .status.active {
            color: #4cb050;
        }

    .data-div-grid.tile-view .more {
        bottom: 4px;
        right: 8px;
        width: 20px;
        z-index: 10;
    }

        .data-div-grid.tile-view .more a {
            color: #fff;
        }

    .data-div-grid.tile-view .chat {
        bottom: 4px;
        left: 8px;
        width: 20px;
        color: #fff;
        z-index: 10;
    }

    .data-div-grid.tile-view .online {
        bottom: 11px;
        left: 8px;
        width: 20px;
        color: #4cb050;
        z-index: 10;
        font-size: 7px;
    }

    .data-div-grid.tile-view .text {
        display: none;
    }

    .data-div-grid.tile-view .data-div-row .data-div-cell .user-img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 1px solid #757575;
    }

    .data-div-grid.tile-view .more .dropdown-menu a {
        font-size: 12px;
        color: #666;
    }

.form-hide-section {
    visibility: hidden;
    background: #F1F1F1;
    opacity: 0;
    position: fixed;
    top: 100px;
    min-height: 0;
    max-height: 0;
    transition: all 0.6s ease;
    width: calc(100% - 50px);
    overflow: hidden;
}

.main-frame.left-bar-open .form-hide-section {
    width: calc(100% - 280px);
}

.form-hide-section.current {
    visibility: visible;
    opacity: 1;
    top: 90px;
    min-height: calc(100vh - 49px);
    z-index: 15;
}

.form-hide-section .page-title-bar {
    padding: 0px 0;
}


.content-section-1 {
    float: left;
    width: calc(100% - 250px);
    padding: 10px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

.content-section-2 {
    float: left;
    width: 100%;
    padding: 0px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.info-section-1 {
    position: sticky;
    background: #FFF;
    float: right;
    width: 250px;
    padding: 10px;
    height: calc(100vh - 140px);
    overflow-y: auto;
    border-left: 2px solid #bdbfc1;
}

.info-section-title {
    font-size: 18px;
    float: left;
    width: 100%;
    text-transform: uppercase;
    padding: 5px 0;
    color: #F1F1F1;
    text-align: center;
    background: var(--primary-color);
    margin-bottom: 20px;
    border-radius: 8px;
}

.info-item {
    float: left;
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;
    border: 2px solid #DDD;
    border-radius: 8px;
    background: #FFF;
    /*box-shadow:0 0 2px var(--primary-color);*/
}

    .info-item.active {
        background: #4cb050;
        border: 2px solid #4cb050;
        color: #333;
    }

.info-sub-title {
    font-size: 14px;
    font-weight: 600;
    float: left;
    width: 100%;
    text-transform: uppercase;
    padding: 10px 0;
    text-align: center;
}

.info-item-value {
    float: left;
    width: 100%;
    text-align: center;
}

.info-item.active .span-color-1 {
    color: #FFF !important;
}

.info-item-2 {
    float: left;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #F1F1F1;
    background: #FFF;
}

    .info-item-2 .info-sub-title {
        font-size: 14px;
        font-weight: 400;
        float: left;
        width: 100%;
        padding: 10px 0;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .info-item-2 .info-item-value {
        float: left;
        width: 100%;
        text-align: left;
    }


.info-item-color-1 {
    border-color: #bf4c31;
}

.info-item-color-2 {
    border-color: #38d4bf;
}

.info-item-color-3 {
    border-color: #009c49;
}

.info-item-color-4 {
    border-color: #019ed3;
}

.info-item-color-1 .info-sub-title {
    color: #bf4c31;
}

.info-item-color-2 .info-sub-title {
    color: #38d4bf;
}

.info-item-color-3 .info-sub-title {
    color: #009c49;
}

.info-item-color-4 .info-sub-title {
    color: #019ed3;
}




/*   Gates Form  */
.gates-group {
    float: left;
    width: 100%;
}

.gate-item {
    float: left;
    width: 100%;
    background: #FFF;
    padding: 2px 10px;
    border: 1px solid #aaa;
    margin-bottom: 20px;
}

    .gate-item.in-active-gate {
        background: #ccc;
    }

.gate-item-icon {
    float: left;
    padding: 5px 10px 3px 4px;
    position: relative;
}

    .gate-item-icon.color-6 {
        padding: 5px 0px 3px 7px;
    }

    .gate-item-icon i {
        font-size: 20px;
    }

    .gate-item-icon.color-1 i {
        color: #bf4c31;
    }

    .gate-item-icon.color-2 i {
        color: #38d4bf;
    }

    .gate-item-icon.color-3 i {
        color: #009c49;
    }

    .gate-item-icon.color-4 i {
        color: #019ed3;
    }

    .gate-item-icon.color-5 i {
        color: #efbd68;
    }

    .gate-item-icon.color-6 i {
        color: #d82a83;
    }

    .gate-item-icon.color-7 i {
        color: var(--alternate-color);
    }

    .gate-item-icon.color-8 i {
        color: #f7aa26;
    }

    .gate-item-icon.color-9 i {
        color: #596d92;
    }

    .gate-item-icon .text {
        font-size: 9px;
        position: absolute;
        text-align: center;
        color: #FFF;
        top: 7px;
        left: 6px;
        font-weight: 700;
        width: 12px;
        text-align: center;
    }

.gate-item-title {
    float: left;
    padding: 6px 10px 4px 20px;
    text-transform: uppercase;
}

.gate-item-action {
    float: right;
    padding: 5px 10px 5px 20px;
    border-left: 1px solid #eee;
}

    .gate-item-action a i {
        color: #999;
    }

    .gate-item-action .dropdown .dropdown-menu {
        padding: 0;
        /*top:30px !important;
        left: -107px !important;*/
        border-top: 4px solid var(--primary-color);
        border-radius: 6px;
    }

    .gate-item-action .dropdown a {
        cursor: pointer;
        padding: 8px;
        /*border-bottom: 1px dashed rgba(0,0,0,0.05);*/
        transition: all 0.6s ease;
    }

        .gate-item-action .dropdown a:last-child {
            border-bottom: 0px dashed rgba(0,0,0,0.05);
        }

.desc-block {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.desc-label {
    float: left;
    width: 100%;
    color: #4cb050;
    padding: 5px 0px;
}

.desc-content {
    float: left;
    width: 100%;
    background: #FFF;
    border: 1px solid #757575;
    padding: 10px 5px;
    color: #666;
}
/*  data info block  */

.data-info-block {
    float: left;
    width: 100%;
    background: #d6c9c1;
    padding: 10px;
    border: 1px solid #757575;
}

.data-info-block-in {
    float: left;
    width: 100%;
    background: #FFF;
    padding: 15px;
    border: 1px solid #757575;
}

.static-label {
    width: 100%;
    font-weight: 500;
}

.dynamic-label {
    width: 100%;
    color: #666;
}

.form-control {
    padding: 8px;
    border-radius: 0;
    font-weight: 300;
    font-size: 14px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    transition: all 0.6s ease;
    height: calc(2rem + 2px);
    box-shadow: none !important;
}

select.form-control {
    padding: 8px 8px 8px 5px;
}

.form-control:hover {
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
}

.form-control:focus {
    border-color: var(--primary-color);
    background-color: rgb(0 128 0 / 3%);
}

.k-numerictextbox.form-control {
    border: none;
}

.form-control:disabled,
.form-select:disabled {
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/*------------------------------------  Dashboard   --------------------------------------*/

.dashbord-page {
    float: left;
    width: 100%;
    padding: 30px;
    background: #F3F6F9;
}

.dashboard-section-1 {
    float: left;
    width: 100%;
    /*border: 1px solid #c3c3c3;*/
    border: 1px solid #ddd;
    box-shadow: 0 0 5px #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #FFF;
}

.height-100 {
    height: 100% !important;
}

.dashboard-section-bar {
    float: left;
    width: 100%;
    /*background: #f7f9fa;*/
    background: #E9F3ED;
    border-bottom: 1px solid #ddd;
}

.dashboard-section-title {
    float: left;
    color: #1e8644;
    padding: 11px 20px 10px 20px;
    text-transform: uppercase;
    border-right: 1px solid #ddd;
}

.title-count {
    font-weight: 700;
    color: var(--primary-color) !important;
    text-decoration: underline;
    cursor: pointer !important;
}

.dashboard-section-filter-left {
    float: left;
    padding: 5px 5px;
}

    .dashboard-section-filter-left .select .dash-filter-dropdown {
        border: 1px solid #CCC;
        padding: 5px;
    }

.dashboard-section-filter-right {
    float: right;
    padding: 9px 5px;
}

.dashboard-section-actions {
    float: right;
    padding: 4px 10px;
    cursor: pointer;
    border: 1px solid var(--primary-color);
    margin: 6px;
    border-radius: 4px;
    color: var(--primary-color);
}

.dashboard-section-data {
    float: left;
    width: 100%;
    display: flex;
}

.dashboard-box {
    float: left;
    border-right: 1px solid #ddd;
    background: #FFF;
}

.dashboard-box-filters {
    float: left;
    width: 100%;
}

.dashboard-section-data .dashboard-box:nth-last-child(1) {
    border-right: 0px solid #ddd;
}

.dashboard-section-data-box-1 {
    width: 10%;
}

.dashboard-section-data-box-2 {
    width: 20%;
}

.dashboard-section-data-box-3 {
    width: 30%;
}

.dashboard-section-data-box-4 {
    width: 40%;
}

.dashboard-section-data-box-5 {
    width: 50%;
}

.dashboard-section-data-box-6 {
    width: 60%;
}

.dashboard-section-data-box-7 {
    width: 70%;
}

.dashboard-section-data-box-8 {
    width: 80%;
}

.dashboard-section-data-box-9 {
    width: 90%;
}

.dashboard-section-data-box-10 {
    width: 100%;
}

.dashboard-box-data-block {
    float: left;
    width: 100%;
    padding: 30px 5px 25px 5px;
    background: #FFF;
}

.dashboard-box-data-block-flex {
    height: calc(100% - 15px);
    display: flex;
    justify-content:center;
}

    .dashboard-box-data-block-flex .col-md-12 {
        display: flex;
        align-items: center;
        border-bottom: 1px dotted #ddd;
    }

        .dashboard-box-data-block-flex .col-md-12:nth-child(even) {
            background: #f5f5f5;
        }

            .dashboard-box-data-block-flex .col-md-12:nth-child(even) .dashboard-box-data {
                background: #f5f5f5;
            }

.dashboard-box-data {
    float: left;
    width: 100%;
    text-align: center;
    padding: 0;
    background: #FFF;
}

.dashboard-left-border {
    border-left: 1px solid #ddd;
}

.dashboard-box-data-title {
    float: left;
    width: 100%;
    color: #838894;
    padding: 0px 5px 5px 5px;
}

.dashboard-box-data-value {
    float: left;
    width: 100%;
    font-size: 20px;
    color: var(--primary-color);
    padding: 0px 5px 0px 5px;
}

.dashboard-box-data-title-2 {
    float: left;
    width: 100%;
    color: #838894;
    padding: 0px 5px 5px 5px;
    font-size: 16px;
}

.dashboard-box-data-value-2 {
    float: left;
    width: 100%;
    font-size: 20px;
    color: var(--primary-color);
    padding: 0px 5px 0px 5px;
}
.dashboard-box-data-value-2.small-text{
    font-size:14px !important;
}
.dashboard-box-data-spl {
    float: left;
    width: 100%;
    background: linear-gradient(to bottom, #E9F3ED 0%, #cafcdd 100%);
    font-size: 14px;
    color: #838894;
    padding: 10px 5px 10px 5px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

    .dashboard-box-data-spl span {
        color: #333;
        font-weight: 600;
        font-size: 18px;
    }

.dashboard-box-info {
    float: left;
    width: 100%;
    font-size: 18px;
    padding: 15px 5px;
}

    .dashboard-box-info span {
        float: left;
        width: 100%;
        font-size: 12px;
    }

.box-info-color-1 {
    color: var(--primary-color);
}

.box-info-color-2 {
    color: #767ffb;
}

.box-info-color-3 {
    color: #1e8644;
}

/* Reset Dashboard Filter Dropdown */
.dash-filter-dropdown {
    border: none;
    background: none;
}

.dash-filter-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    border: 0 !important;
    background-image: none;
}
/* Custom Select */
.select {
    position: relative;
    display: block;
    width: 140px;
    overflow: hidden;
}

    .select.small-select {
        width: 90px;
    }

.dash-filter-dropdown {
    width: 100%;
    height: 100%;
    margin: 0;
    color: #333;
    cursor: pointer;
}

    .dash-filter-dropdown::-ms-expand {
        display: none;
    }

.selectsearch {
    min-width: 250px !important;
}

    .selectsearch input {
        background: none !important;
        border: none;
        outline: none !important;
        padding: 0;
        height: 22px;
        min-width: 250px !important;
    }
/* Arrow */
.select::after {
    content: '\f078';
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 5px;
    right: 3px;
    bottom: 0;
    padding: 0 2px;
    pointer-events: none;
    font-weight: 800;
    color: #666;
    font-size: 12px;
    background: #E9F3ED;
}
/* Transition */
.select:hover::after {
    color: #333;
}

.select::after {
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
}



.dash-tile-box {
    float: left;
    width: 100%;
    box-shadow: 0 0 5px #ccc;
    background: #FFF;
    padding: 0 15px 15px 15px;
    border-radius: 6px;
    position: relative;
    height: 100%;
}

.dash-block-title {
    float: left;
    width: 100%;
    font-size: 20px;
    text-transform: uppercase;
    padding: 10px 0px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

/*  Dashboard section 1  */
.dash-num-info-box {
    float: left;
    width: 100%;
    padding: 5px 10px;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
    transition: all 0.9s ease;
    cursor: pointer;
    position: relative;
    color: #FFF;
}


.info-box-color-1 {
    background: linear-gradient(135deg,#e36cd9 0%,#fe60ae 100%);
}

.info-box-color-2 {
    background: linear-gradient(135deg,#f48665 0%,#fda23f 100%);
}

.info-box-color-3 {
    background: linear-gradient(135deg,#9a56ff 0%,#e36cd9 100%);
}

.info-box-color-4 {
    background: linear-gradient(135deg,#23bdb8 0%,#43e794 100%);
}

.dash-info-box-left {
    float: left;
    width: 30%;
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

    .dash-info-box-left i {
        font-size: 36px;
    }

.dash-info-box-right {
    float: left;
    width: 70%;
    text-align: left;
    padding-top: 10px;
    position: relative;
    z-index: 2;
}

.dash-num-info-box .num-label {
    float: left;
    width: 100%;
    text-transform: uppercase;
    padding: 0;
    margin: 0px;
    font-size: 12px;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.dash-num-info-box .num-value {
    font-size: 26px;
    font-weight: 700;
    margin: 0px;
}


/*  Dashboard section Project Progress Start */
.dash-progress {
    float: left;
    width: 100%;
    position: relative;
    padding: 10px 0 20px 0;
    z-index: 18;
}

.dash-progress-title {
    float: left;
    width: 100%;
    padding: 10px 0;
}

.dash-progress-title-text {
    float: left;
    width: 70%;
}

.dash-progress-title-value {
    float: left;
    width: 30%;
    text-align: right;
}

.dash-progress-bar {
    float: left;
    width: 100%;
    height: 8px;
    border-radius: 8px;
    background: #dfdfdf;
}

.dash-progress-bar-fill {
    float: left;
    height: 8px;
    border-radius: 8px;
    position: relative;
    transition: all 0.6s ease;
}

    .dash-progress-bar-fill::after {
        position: absolute;
        right: -20px;
        top: 10px;
        content: attr(data-fill);
    }

    .dash-progress-bar-fill::before {
        content: '';
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        animation: progress-fill 4s ease infinite;
    }

@keyframes progress-fill {
    0% {
        opacity: .4;
        width: 0;
    }

    100% {
        opacity: 0;
        width: 100%;
    }
}

.bg-color-1 {
    background: #e36cd9;
    color: #e36cd9;
}

.bg-color-2 {
    background: #38d4bf;
    color: #38d4bf;
}

.bg-color-3 {
    background: #f48665;
    color: #f48665;
}

.bg-color-4 {
    background: #019ed3;
    color: #019ed3;
}

.bg-color-5 {
    background: #9a56ff;
    color: #9a56ff;
}

.bg-color-6 {
    background: #d82a83;
    color: #d82a83;
}

.bg-color-7 {
    background: var(--alternate-color);
    color: var(--alternate-color);
}

.bg-color-8 {
    background: #f7aa26;
    color: #f7aa26;
}

.bg-color-9 {
    background: #596d92;
    color: #596d92;
}

/*  Icon and text color  */
.icon-color-1 {
    color: #e36cd9;
}

.icon-color-2 {
    color: #38d4bf;
}

.icon-color-3 {
    color: #f48665;
}

.icon-color-4 {
    color: #019ed3;
}

.icon-color-5 {
    color: #9a56ff;
}

.icon-color-6 {
    color: #d82a83;
}

.icon-color-7 {
    color: var(--alternate-color);
}

.icon-color-8 {
    color: #f7aa26;
}

.icon-color-9 {
    color: #596d92;
}

.dash-input {
    height: calc(1.5rem + 2px) !important;
    padding: 0 4px !important;
}





.dash-progress-value {
    float: left;
    width: 50px;
    font-size: 20px;
    color: #673bb7;
    margin-top: -10px;
    padding: 0 0 0 10px;
}
/*  Dashboard section Project Progress end */
/* Dashboard Gates Info start */
.dash-gates-info {
    float: left;
    width: 100%;
    padding: 25px 0 10px 0;
    min-height: 90px;
}

    .dash-gates-info.gate-movement-info {
        padding: 0;
        border-radius: 6px;
        background: #f9f9f9;
        border: 1px solid #ddd;
        /*box-shadow:0 0 4px #aaa;*/
    }

    .dash-gates-info ul {
        width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        display: flex;
    }

        /*.dash-gates-info ul::after {
            content: "";
            height: 5px;
            width: 90%;
            background: linear-gradient(135deg,#e36cd9 0%, #38d4bf 11.1111%, #f48665 22.2222%, #019ed3 33.3333%,#9a56ff 44.4444%,#d82a83 55.5555%,#d82a83 65%,var(--alternate-color) 75%,#f7aa26 85%,#596d92 95%, #596d92 100%);
            top: 0px;
            left: 5%;
            position: absolute;
        }*/

        .dash-gates-info ul li {
            float: left;
            width: 200px;
            margin: 0;
            padding: 0;
            /*display: inline-block;*/
            text-align: center;
            position: relative;
            list-style: none;
        }

.gate-movement-info .dash-gates-item {
    display: block;
    width: 100%;
    height: 90px;
    position: relative;
}

.gate-active .dash-gates-item {
    background: #ddd;
}

    .gate-active .dash-gates-item::after {
        position: absolute;
        left: calc(50% - 5px);
        bottom: -13px;
        content: "\f041";
        font-family: "Font Awesome 5 Free";
        font-size: 16px;
        font-weight: 900;
        color: #ddd;
    }

.gate-save-draft .dash-gates-item {
    background: #fff1c5;
}

.gate-save-draft.gate-active .dash-gates-item {
    background: #ddd;
}

.dash-gates-item a.disabled {
    cursor: default;
    pointer-events: none;
}

    .dash-gates-item a.disabled .dash-gate-item-icon {
        color: #999 !important;
    }

.dash-gate-item-icon {
    width: 26px;
    height: 26px;
    line-height: 30px;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 13px);
    top: -12px;
    z-index: 14;
    cursor: pointer;
}

    .dash-gate-item-icon span {
        color: #FFF;
        position: relative;
        z-index: 15;
        font-size: 10px;
    }

    .dash-gate-item-icon::after {
        position: absolute;
        left: 0px;
        top: 3px;
        content: "\f041";
        font-family: "Font Awesome 5 Free";
        font-size: 32px;
        font-weight: 900;
    }

.gate-movement-info .dash-gate-item-icon {
    top: 28px;
}

.dash-gate-item-value {
    float: left;
    width: 100%;
    margin-top: 30px;
    text-align: center;
    font-weight: 400;
    color: #666;
    font-size: 14px;
}
/* Dashboard Gates Info end */


/* Budget Status Info Start */
.budget-status {
    float: left;
    width: 100%;
    position: relative;
    min-height: 300px;
    padding: 30px 0;
    background: url(../images/dash-status-bg.jpg);
}

.budget-status-bar {
    float: left;
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
}

    .budget-status-bar li::after {
        position: absolute;
        height: 10px;
        width: 100%;
        left: 0;
        top: 35px;
        content: "";
        background: #ddd;
        /*border-top:3px solid #f1f1f1;
            border-bottom:3px solid #f1f1f1;*/
        z-index: 14;
    }

    .budget-status-bar li.done::after {
        background: #0dcf9a;
    }

    .budget-status-bar li.active::after {
        background: var(--primary-color);
    }

    .budget-status-bar li {
        width: 400px;
        position: relative;
    }

        .budget-status-bar li .dot-bg {
            position: absolute;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            left: calc(50% - 15px);
            top: 25px;
            background: #f1f1f1;
            z-index: 13;
        }

        .budget-status-bar li.done .dot-bg {
            background: #77e7c8;
        }

        .budget-status-bar li.active .dot-bg {
            background: var(--primary-color);
        }

        .budget-status-bar li .dot {
            position: absolute;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            left: calc(50% - 10px);
            top: 30px;
            background: #ddd;
            z-index: 15;
        }

        .budget-status-bar li.done .dot {
            background: #0dcf9a;
        }

        .budget-status-bar li.active .dot {
            background: var(--primary-color);
        }

.budget-status-info-box {
    margin-top: 100px;
    text-align: center;
    padding: 0 30px;
}

.budget-status-info {
    background: #f1f1f1;
    padding: 10px;
}

.budget-status-bar li.done .budget-status-info {
    background: #0dcf9a;
}

.budget-status-bar li.active .budget-status-info {
    background: var(--primary-color);
}

.budget-status-info-box h4 {
    font-size: 16px;
    color: #FFF;
    background: #666;
    padding: 3px;
    margin: 0;
}

.budget-status-bar li.done .budget-status-info-box h4 {
    background: #0dcf9a;
}

.budget-status-bar li.active .budget-status-info-box h4 {
    background: var(--primary-color);
}
/*  Budget Status Info end */















.dashbord-top-bar {
    float: left;
    width: 100%;
    background: url(../../images/gatesbg.png);
    background-size: cover;
    background-color: #fff7ed;
    border-bottom: 4px solid var(--primary-color);
    padding: 0px 15px 5px 15px;
}

.dashbord-top-cell {
    float: left;
    width: 9.09%;
    padding: 5px 5px;
    position: relative;
}

.dashbord-top-number {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #FFF;
    left: 0px;
    top: 15px;
    font-size: 14px;
    font-weight: 500;
}

.dashbord-top-icon {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 32px;
}

    .dashbord-top-icon.color-0 i {
        color: #6a327b;
    }

    .dashbord-top-icon.color-1 i {
        color: #bf4c31;
    }

    .dashbord-top-icon.color-2 i {
        color: #38d4bf;
    }

    .dashbord-top-icon.color-3 i {
        color: #009c49;
    }

    .dashbord-top-icon.color-4 i {
        color: #019ed3;
    }

    .dashbord-top-icon.color-5 i {
        color: #efbd68;
    }

    .dashbord-top-icon.color-6 i {
        color: #d82a83;
    }

    .dashbord-top-icon.color-7 i {
        color: var(--alternate-color);
    }

    .dashbord-top-icon.color-8 i {
        color: #f7aa26;
    }

    .dashbord-top-icon.color-9 i {
        color: #596d92;
    }

.dashbord-top-value {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: -10px;
}

.dashbord-content-block {
    float: left;
    width: 100%;
    min-height: 800px;
    background: linear-gradient(to bottom, #2d303f 0px, #2d303f 350px, #eeeeee 350px, #eeeeee 3000px);
}

.dashbord-content-top-bg {
    float: left;
    width: calc(100% - 60px);
    background: url(../../images/buildings.png) no-repeat bottom right;
    background-size: contain;
    margin: 15px 10px 0 10px;
    padding: 0 10px;
}

.dashbord-content-top {
    color: #aaa;
    font-size: 14px;
    font-weight: 300;
}

    .dashbord-content-top span {
        color: #FFF;
    }

.dashbord-content-values {
    float: left;
    width: 100%;
    padding: 10px 0px 0 0;
}

.content-values-box {
    float: left;
    width: 20%;
    padding: 5px 20px;
    color: #aaa;
    white-space: nowrap;
}

    .content-values-box span {
        color: var(--primary-color);
        font-size: 18px;
        font-family: 'Aldrich', sans-serif;
    }

.dashbord-content {
    float: left;
    width: calc(100% - 40px);
    margin: 0px 0 30px 20px;
    padding: 10px;
    background: #FFF;
    border: 1px solid #757575;
    min-height: 600px;
    position: relative;
}

.dashbord-content-shadow {
    float: left;
    width: calc(100% - 40px);
    margin: 0px 0 0px 20px;
    height: 30px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(88,97,94,0) 0%, rgba(88,97,94,1) 100%);
}

    .dashbord-content-shadow::before {
        position: absolute;
        content: "";
        height: 74px;
        width: 20px;
        top: 0px;
        left: -22px;
        background: #2D303F;
        transform: rotate(15deg);
    }

    .dashbord-content-shadow::after {
        position: absolute;
        content: "";
        height: 74px;
        width: 20px;
        top: 0px;
        right: -22px;
        background: #2D303F;
        transform: rotate(-16deg);
    }

.dashbord-content::after {
    position: absolute;
    content: "";
    height: 5px;
    width: 99.5%;
    top: -15px;
    left: 0;
    background: url(../../images/dash.png);
    background-repeat: repeat-x;
}

.dashbord-content-in {
    float: left;
    width: 100%;
    margin: 0;
    padding: 10px;
    background: #eeeeee;
    border: 1px solid #757575;
    min-height: 600px;
    border-radius: 6px;
}

.dashbord-users {
    float: right;
    width: 64px;
    margin: 0;
    padding: 20px 10px 0 10px;
    background: #FFF;
    border: 1px solid #757575;
    min-height: 600px;
    border-radius: 6px;
    box-shadow: 0 0 5px #999;
}

.user-avatrar {
    width: 100%;
    float: left;
    margin-bottom: 30px;
    border-radius: 50%;
    overflow: hidden;
}

    .user-avatrar img {
        width: 40px;
        height: 40px;
        border: 2px solid #757575;
        float: left;
    }


.input-group-btn {
    /*float: right;
    margin: -38px 0 0 0;
    position: relative;
    z-index: 4;
    border-radius: 0;*/
    float: right;
    margin: -33px 1px 0 0;
    position: relative;
    z-index: 0;
    border-radius: 0;
    width: 25px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

    .input-group-btn > button {
        padding: 4px;
        font-size: 12px;
        box-shadow: none !important;
        outline: none !important;
        color: var(--primary-color);
    }

    .input-group-btn:hover {
        background: var(--primary-color);
    }

        .input-group-btn:hover button {
            color: #fff;
        }

.active {
    /*color: #1BA400;*/
}

i.active {
    color: #1BA400;
}

.text-error {
    color: #CB0003;
}

.left-btn-align {
    padding: 4px 0;
}


/*  tab progress bar  */
.tab-progress-block {
    float: left;
    width: 100%;
    position: relative;
    padding: 20px 0 0 0;
    z-index: 18;
}

.tab-progress-bar {
    float: left;
    width: 100%;
    height: 5px;
    border-radius: 2px;
    background: #0a181d;
}

.tab-progress-bar-fill {
    float: left;
    height: 5px;
    border-radius: 2px;
    background: #62b770;
    position: relative;
    transition: all 0.6s ease;
}

    .tab-progress-bar-fill::after {
        position: absolute;
        right: -17px;
        top: -23px;
        content: attr(data-fill);
        color: #62b770;
    }

.tab-progress-value {
    float: left;
    width: 50px;
    font-size: 20px;
    color: #673bb7;
    margin-top: -10px;
    padding: 0 0 0 10px;
}

/*  tab progress bar  */
.tree-status-progress-bar {
    float: left;
    width: 100%;
    margin-top: 10px;
}

.tree-progress-block {
    float: left;
    width: 100%;
    position: relative;
    padding: 20px 0 0 0;
    z-index: 18;
}

.tree-progress-bar {
    float: left;
    width: 100%;
    height: 10px;
    border-radius: 10px;
    background: #DDDDDD;
}

.tree-progress-bar-fill {
    float: left;
    height: 10px;
    border-radius: 10px;
    background: #62b770;
    position: relative;
    transition: all 0.6s ease;
}

    .tree-progress-bar-fill::after {
        position: absolute;
        right: -17px;
        top: -23px;
        content: attr(data-fill);
        color: #62b770;
    }

.tree-progress-value {
    float: left;
    width: 50px;
    font-size: 20px;
    color: #673bb7;
    margin-top: -10px;
    padding: 0 0 0 10px;
}







.title-bar-1 {
    background: #FFF;
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: 0 0 4px #999;
}

.data-table-section {
    /*background: #FFF;*/
    float: left;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
}

.item-title {
    float: left;
    width: 100%;
    background: #FFF;
    color: #3D3D3D;
    padding: 10px 50px 10px 15px;
    cursor: pointer;
    position: relative;
    border: 1px solid #bdbfc1;
}

.deleted .item-title {
    float: right;
    width: 300px;
    background: #FFF;
    color: #3D3D3D;
    padding: 5px 50px 5px 15px;
    cursor: pointer;
    position: relative;
    border: 1px solid #bdbfc1;
    border-radius: 20px;
    margin-bottom: 0px;
    transition: all 0.6s ease;
}

    .deleted .item-title.active-title {
        margin-bottom: 20px;
    }

.color-black {
    color: #000;
}

.item-title.custom {
    cursor: default;
}

.item-title::before {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    vertical-align: middle;
    content: "";
    border-left: 1px solid #bdbfc1;
    padding: 8px 25px;
}

.item-title::after {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    vertical-align: middle;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-size: 18px;
    font-weight: 900;
    color: #222;
    transition: all 0.6s ease;
    padding: 8px 20px;
    transform: rotate(0deg);
}

.item-title.active-title::after {
    transform: rotate(180deg);
}

.deleted .item-title.active-title::after {
    top: 3px;
    right: -4px;
}

.deleted .item-title::after {
    padding: 4px 25px;
}

.item-title.custom::after {
    content: "";
}

.right-one-filter {
    white-space: nowrap;
}

    .right-one-filter span {
        float: left;
        padding-top: 5px;
        width: 100px;
    }

    .right-one-filter .form-control {
        padding: 4px;
        width: 80px;
        height: auto;
        float: right;
    }

.item-data {
    float: left;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: all 0.6s ease;
}

    .item-data.active-data {
        max-height: 2000px;
    }

    .item-data .data-table {
        padding: 15px;
    }

.item-data-filters {
    float: left;
    width: 100%;
    background: #faf6f5;
    border: 1px solid #bdbfc1;
    padding: 5px 10px;
}

.item-data-sort-label {
    float: left;
    white-space: nowrap;
    padding: 7px 15px;
    color: #3d3d3d;
}

.item-data-sort-item {
    float: left;
    padding: 2px 15px;
}

.item-data-sort-btn {
    float: right;
    background: #FFF;
    border: 1px solid #999;
    padding: 4px 28px;
    border-radius: 20px;
}

    .item-data-sort-btn.active {
        background: #0093ff;
        border: 1px solid #0093ff;
        color: #FFF;
    }

.item-data-search {
    float: left;
    width: calc(100% - 39px);
    padding: 7px 6px 6px 10px;
    border: 1px solid #bdbfc1;
    border-right: 0px solid #bdbfc1;
    box-shadow: 0 0 2px #ccc;
}

.item-data-search-btn {
    float: right;
    background: var(--primary-color);
    border: 0px solid #0093ff;
    padding: 7px 12px;
    color: #FFF;
    transition: all 0.6s ease;
    outline: none !important;
}

    .item-data-search-btn:hover {
        opacity: 0.8;
    }

.item-data-table {
    margin-top: 3px;
    float: left;
    width: 100%;
    background: #FFF;
    border: 1px solid #bdbfc1;
    border-top: 0px solid #bdbfc1;
    border-bottom: 0px solid #bdbfc1;
}

.item-data.active-data {
    border-top: 1px solid #bdbfc1;
    border-bottom: 1px solid #bdbfc1;
    max-height: 3000px;
}

.budget-progress {
    float: left;
    width: 100%;
}

    .budget-progress ul {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
    }

        .budget-progress ul li {
            float: left;
            margin: 0;
            padding: 0;
            position: relative;
            font-size: 18px;
            text-align: center;
            padding: 2px;
            width: 1000px;
        }

            .budget-progress ul li span {
                float: left;
                width: 100%;
                padding: 5px;
                background: #bdbfc1;
            }

            .budget-progress ul li.done span {
                background: #4cb050;
                color: #FFF;
            }

            .budget-progress ul li.active span {
                background: var(--primary-color);
                color: #FFF;
            }

.bdget-item-table {
    margin-bottom: 0;
}

    .bdget-item-table tr:nth-child(2n+1) td {
        background: #f8f8f8;
    }

    .bdget-item-table th, .bdget-item-table td {
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding: 6px 8px;
        vertical-align: middle;
    }

    .bdget-item-table th {
        padding: 10px 8px;
        background: #bdbfc1;
        font-weight: 400;
        white-space: nowrap;
        text-transform: uppercase;
    }

    .bdget-item-table .add-link {
        padding: 0px 15px;
        color: var(--primary-color);
        float: left;
        cursor: pointer;
        font-size: 20px;
        transition: all 0.6s ease;
    }

        .bdget-item-table .add-link:hover {
            color: #00ae2d;
        }

.add-link {
    cursor: pointer;
}

.new-info-link {
    padding: 2px 10px;
    color: #00ae2d;
    border: 2px solid #00ae2d;
    float: left;
    cursor: pointer;
    font-size: 14px;
    background: #e2fbeb;
    border-radius: 4px;
}

.bdget-item-table tbody {
    max-height: 400px;
    overflow-y: auto;
}

.bdget-item-table .form-control {
    padding: 2px 4px;
    height: auto;
}

.item-data-deleted-btn {
    border: 1px solid #979797;
    width: 100%;
    display: block;
    padding: 3px 5px;
    border-radius: 20px;
}

.tree-pop-link {
    color: var(--primary-color);
    cursor: pointer;
}

.more-link {
    width: 100%;
    text-align: center;
    display: block;
    color: var(--primary-color);
}

.holder-bar {
    float: left;
    width: 100%;
    padding: 5px 0px 10px 0px;
    overflow-x: hidden;
}

.total-budget-title {
    float: left;
    width: 100%;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

    .total-budget-title::after {
        position: absolute;
        right: 10px;
        top: 7px;
        content: "\f105";
        font-family: "Font Awesome 5 Free";
        font-size: 18px;
        font-weight: 900;
        color: #ccc;
        transform: rotate(90deg);
        transition: all 0.6s ease;
    }

    .total-budget-title.active-title::after {
        content: "\f105";
        transform: rotate(-90deg);
    }

.total-budget-info {
    float: left;
    width: 100%;
    background: #FFF;
    max-height: 0;
    overflow: hidden;
    transition: all 0.6s ease;
    padding-top: 0px;
    border-radius: 4px;
    margin-bottom: 0;
    box-shadow: 0 0 4px #999;
}

    .total-budget-info.active-data {
        max-height: 1000px;
        padding-top: 10px;
        margin-bottom: 10px;
        margin-top: -10px;
    }

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: -16px;
    z-index: 5;
    width: 100%;
}

.list-group {
    position: absolute;
    z-index: 15;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 0 5px #999;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    top: 63px;
}

    .list-group.auto-list {
        width: auto;
        max-width: 100%;
        top: inherit;
    }

.list-group-item {
    padding: 5px 20px;
    background: #F1F1F1;
}

    .list-group-item:nth-child(odd) {
        background: #F5F5F5;
    }

    .list-group-item:hover {
        color: #337ab7;
        text-shadow: 0 0 1em #337ab7;
        cursor: pointer;
    }




/* bootstrap update   */
.modal-lg {
    max-width: 1200px;
}

.modal-full {
    max-width: 95%;
}

.modal-medium {
    max-width: 80%;
}

.fade.in {
    opacity: 1;
}

.modal-backdrop {
    z-index: 999;
}

.modal {
    z-index: 1010;
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-info:not(:disabled):not(.disabled):active .text-info, .btn-info:not(:disabled):not(.disabled).active .text-info, .show > .btn-info.dropdown-toggle .text-info {
        color: #FFF !important;
    }

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

.dropdown-menu-right {
    left: auto !important;
    right: 0 !important;
    padding: 0 !important;
}

.dropdown-menu {
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    /*box-shadow:0 0 4px #666;*/
}

.dropdown-menu-right.dropdown-menu-profile.show {
    top: 42px !important;
}

.dropdown-menu-right.show {
    top: 36px !important;
}







/* kendo  */
.tree-content {
    float: left;
    width: 100%;
    padding: 15px;
}

.k-grouping-header .k-group-indicator, .k-pivot-toolbar .k-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.k-pager-wrap {
    line-height: 1.286em;
    padding: .429em 0 0em .25em;
}

    .k-pager-wrap .k-pager-numbers .k-state-selected {
        padding-top: 0.0em;
    }

.k-pdf-export .k-filterable .k-grid-filter {
    display: none;
}

.k-content {
    background-color: transparent;
}

.k-grid-content table {
    border: 0px;
}

.kendo-data-table {
    float: left;
    width: 100%;
    padding: 5px;
    background: #333a42;
    border-radius: 4PX;
}

.k-grid-content tr td {
    word-wrap: break-word;
}

.k-grid-footer, .k-grid-footer td, .k-pager-wrap {
    background: #333a42;
    color: #F1F1F1;
}

    .k-grid-footer td, .k-group-footer td {
        background-color: #333a42 !important;
    }

.k-grid-header .k-header .k-link {
    color: #222;
}

.k-grid-pager .k-link, .k-grid-pager .k-link:link {
    color: #F1F1F1;
}


.k-upload-sync .k-upload-button {
    margin: 0 0 1px 0;
}

.k-grid tr:nth-child(odd) td {
    background: #F1F1F1;
}

.k-grid td {
    padding-top: 4px;
    padding-bottom: 4px;
}

.k-grid-footer, .k-grid-footer td, .k-grid-header, .k-grid-header .k-header, .k-pager-numbers .k-state-selected, .k-pager-wrap, .km-pane-wrapper .k-grid-header .k-header {
    background: #bdbfc1;
    text-transform: uppercase;
}

    .k-grid-header .k-header .k-i-filter, .k-header {
        color: #222 !important;
    }

.project-data-table .k-grid-footer, .project-data-table .k-grid-footer td, .project-data-table .k-pager-wrap {
    color: #FFF !important;
}

.k-pager-wrap .k-link.k-state-disabled .k-icon {
    opacity: 1;
}

.k-grid-pager .k-link, .k-grid-pager .k-link:link {
    color: #FFF !important;
}

.k-pager-numbers .k-link, .k-pager-wrap > .k-link {
    height: 25px;
    line-height: 25px;
}

.k-pager-wrap input.k-textbox {
    height: 25px;
    line-height: 25px;
}

.k-pager-info {
    padding: 5px;
}

.k-grid .k-grouping-header {
    color: #999;
}

.k-pager-refresh {
    display: none;
}

.RootTreeclass {
    float: left;
    width: 100%;
}

#MinPercentage,
#MaxPercentage,
#MinAmount,
#MaxAmount,
#ThresholdAmount,
#BaselinePercentage,
#RePriorRootTreeView,
#RootTreeView .k-numerictextbox .k-input {
    /*text-align: right;*/
    padding-right: 5px;
}

#RootTreeView .k-numerictextbox .k-input {
    text-align: right;
    padding-right: 5px;
}

.amounts-input {
    text-align: right;
    padding-right: 5px !important;
}

.k-state-focused .k-numerictextbox .k-input {
    /*display:initial !important;*/
}

.k-autocomplete .k-input, .k-dropdown-wrap .k-input, .k-multiselect-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input, .k-selectbox .k-input, .k-textbox > input {
    line-height: 1.61em;
}

.k-dropdown-wrap .k-select, .k-numeric-wrap .k-select, .k-picker-wrap .k-select {
    line-height: 1.61em;
}

.app-custom-tree {
}

    .app-custom-tree .k-item {
        position: relative;
        padding-bottom: 1px;
        padding-top: 1px;
    }

        .app-custom-tree .k-item:before {
            position: absolute;
            border-left: 1px solid #ccc;
            top: 0;
            left: 4px;
            content: '';
            height: 100%;
        }

        .app-custom-tree .k-item:after {
            position: absolute;
            border-top: 1px solid #ccc;
            top: 50%;
            left: 4px;
            content: '';
            width: 13px;
        }

    .app-custom-tree > ul > .k-item:before {
        position: absolute;
        border-left: 0px solid #ccc;
        top: 0;
        left: 4px;
        content: '';
        height: 100%;
    }

    .app-custom-tree > ul > .k-item:after {
        position: absolute;
        border-top: 0px solid #ccc;
        top: 50%;
        left: 4px;
        content: '';
        width: 13px;
    }

    .app-custom-tree .tree-buttns {
        float: right;
        padding: 5px;
    }

.k-icon::before {
    z-index: 9;
}

.app-custom-tree .k-group {
    padding: 2px 0 !important;
}

.app-amount-tree .k-checkbox-wrapper {
    width: 100%;
}

.app-custom-tree .lblBudget {
    float: right;
    padding: 8px;
    margin: 0;
}

.app-custom-tree .k-item .k-top, .app-custom-tree .k-item .k-mid, .app-custom-tree .k-item .k-bot {
    border: 1px solid #ccc;
    margin-bottom: 0px;
}

.app-custom-tree .k-state-selected {
    color: #444444 !important;
}

.app-custom-tree span.k-in {
    width: calc(100% - 30px);
    background: none;
    padding: .129em .6667em .129em .5833em;
}

.app-custom-tree.with-check-box span.k-in {
    width: calc(100% - 40px);
}

.app-custom-tree.with-check-box .k-checkbox-wrapper input {
    margin-left: 4px;
}

.app-custom-tree.budget-alloc-tree span.k-in .k-in {
    width: calc(100% - 176px);
    padding: .129em .6667em .129em 0;
    margin: 1px 0 1px 0;
}

.app-custom-tree span.k-in:hover {
    background: none;
}

.tree_buttons {
    float: right;
    margin-top: 4px;
}

span.k-in > span.highlight {
    background: yellow;
}
/*    */
.gis-form-controls .input-box {
    padding: 15px 0;
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
}

.input-custom-design {
    position: relative;
    background: none;
    border: 2px solid rgba(55,55,55,0);
    border-bottom: 2px solid #e28542;
    transition: all 0.6s ease;
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
    z-index: 3;
}

.input-focus .input-login {
    border: 2px solid #e28542;
    padding: 6px 6px 6px 36px;
}

.gis-form-controls .input-label {
    position: absolute;
    top: 0px;
    left: 0px;
    transition: all 0.6s ease;
    z-index: 1;
    color: #e28542;
}

.input-focus .input-label {
    position: absolute;
    top: 10px;
    left: 0px;
}

.input-icon {
    position: absolute;
    top: 33px;
    left: -20px;
    transition: all 0.6s ease;
    opacity: 0;
    z-index: 4;
    color: #707070;
    font-size: 20px;
}

.input-focus .input-icon {
    position: absolute;
    left: 10px;
    opacity: 1;
}

.form-container-1 {
    float: left;
    width: 100%;
    padding: 10px;
}

.form-section-1 {
    float: left;
    width: 100%;
    height: calc(100vh - 221px);
    overflow-y: auto;
    padding: 15px;
    background: #FFF;
    box-shadow: 0 0 5px #ccc;
}

.fa-edit.active {
    cursor: pointer;
    color: var(--primary-color);
}


.input-group-btn .btn-default {
    background: none;
}




/*  MTEF NEW Design   */

.mtef-budget-screen {
    width: 100%;
    float: left;
    padding: 5px;
}

.section-title {
    width: 100%;
    float: left;
    padding: 10px 0;
    margin-bottom: 0px;
    font-size: 24px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-items-bar {
    float: left;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 0 5px #bdbfc1;
    background: #FFF;
    color: #666;
    font-size: 16px;
    position: relative;
}

.filter-items-bar-label {
    float: left;
    /*width: 150px;*/
    padding: 10px;
    text-transform: uppercase;
    border-right: 1px solid #F1F1F1;
    padding: 10px;
    font-weight: 400;
}

.filter-items-bar-list {
    float: left;
    width: calc(100% - 200px);
    padding: 10px;
    color: #1b6fcd;
}

.filter-items-bar-trigger {
    padding: 10px 14px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    border-left: 1px solid #f1f1f1;
}

.filter-items-content {
    width: calc(100% - 30px);
    position: absolute;
    box-shadow: 0 0 5px #bdbfc1;
    background: #FFF;
    top: 46px;
    max-height: 0px;
    border-radius: 4px;
    padding: 0;
    opacity: 0;
    transition: all 0.6s ease;
    z-index: 20;
    visibility: hidden;
}

    .filter-items-content.active {
        max-height: 400px;
        padding: 15px;
        opacity: 1;
        visibility: visible;
    }

.filter-items-tree {
    float: left;
    width: 100%;
    overflow: auto;
    max-height: 315px;
}

.filter-items-btn {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    background: #FFF;
    padding: 5px 20px;
    border-radius: 4px;
    text-align: right;
    box-shadow: 0px 4px 5px #aaa;
}

.mtef-chart-block {
    background: #FFF;
    width: 100%;
    float: left;
    border-radius: 6px;
    box-shadow: 0 0 5px #CCC;
    padding: 20px;
}

.mtef-tile {
    /*background:#FFF;*/
    width: 100%;
    float: left;
    border-radius: 6px;
    box-shadow: 0 0 5px #CCC;
    padding: 10px 5px;
    text-align: center;
    margin-bottom: 30px;
    color: #FFF;
}

.tile-color-1 {
    background: #019ed3;
}

.tile-color-2 {
    background: var(--primary-color);
    ;
}

.tile-color-3 {
    background: #da2983;
}

.tile-color-4 {
    background: #3e52b5;
}

.tile-color-5 {
    background: #4cb050;
}

.tile-color-6 {
    background: #e93154;
}

.tile-color-7 {
    background: #24a39c;
}

.tile-color-8 {
    background: #d89300;
}

.tile-color-9 {
    background: #6e4ca6;
}

.mtef-tile-value {
    width: 100%;
    float: left;
    font-size: 16px;
    white-space: nowrap;
    padding: 0px;
    font-weight: 400;
}

.mtef-tile-title {
    width: 100%;
    float: left;
    font-size: 18px;
    padding: 0px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.mtef-flex-container {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -15px;
}

    .mtef-flex-container > div {
        width: 1000px;
        margin: 0 15px 15px 15px;
    }

    .mtef-flex-container .mtef-tile-value {
        font-size: 18px;
    }

    .mtef-flex-container .mtef-tile-title {
        font-size: 16px;
    }


.mtef-tile-more {
    background: #FFF;
    width: 100%;
    float: left;
    border-radius: 6px;
    box-shadow: 0 0 5px #CCC;
    font-size: 16px;
    text-align: center;
    padding: 10px 0px;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    border: 1px solid var(--primary-color);
}

.tile-color-more {
    color: var(--primary-color);
    transition: all 0.6s ease;
}

    .tile-color-more:hover {
        background-color: var(--primary-color);
        color: #FFF;
    }

    .tile-color-more.active {
        background-color: var(--primary-color);
        color: #FFF;
    }

.mtef-tile-more::after {
    content: "\f0d7";
    font-family: "Font Awesome 5 Free";
    font-size: 60px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    color: #FFF;
    text-align: center;
    position: absolute;
    font-weight: 900;
    transform: rotate(0deg);
    transition: all 0.6s ease;
    z-index: 0;
    opacity: 0;
}

.mtef-tile-more.active::after {
    bottom: -49px;
    color: var(--primary-color);
    opacity: 1;
}
/*.tile-color-1 .mtef-tile-value{
    color:#019ed3;    
}
.tile-color-2 .mtef-tile-value {
    color: var(--primary-color);
}
.tile-color-3 .mtef-tile-value {
    color: #da2983;
}
.tile-color-4 .mtef-tile-value {
    color: #3e52b5;
}
.tile-color-5 .mtef-tile-value {
    color: #4cb050;
}
.tile-color-6 .mtef-tile-value {
    color: #e93154;
}*/
.mtef-chart {
    height: 253px;
}

.mtef-box-mid-section {
    width: 100%;
    float: left;
    margin-bottom: 20px;
    position: relative;
}

.mtef-box {
    background: #FFF;
    width: 100%;
    float: left;
    border-radius: 6px;
    box-shadow: 0 0 5px #CCC;
    padding: 5px;
    position: relative;
    /*overflow: hidden;*/
}

.mtef-box-title {
    width: 100%;
    float: left;
    padding: 6px;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    font-weight: 400;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.mtef-box-title-color-1 {
    background: #019ed3;
}

.mtef-box-title-color-2 {
    background: var(--primary-color);
}

.mtef-box-title-color-3 {
    background: #da2983;
}

.mtef-box-title-color-4 {
    background: #3e52b5;
}

.mtef-box-title-color-5 {
    background: #4cb050;
}

.mtef-box-title-color-6 {
    background: #e93154;
}

.mtef-box-data {
    width: 100%;
    float: left;
}

.mtef-box-data-table {
    width: 100%;
}

    .mtef-box-data-table td {
        padding: 10px 6px;
        border-bottom: 1px solid #F1F1F1;
        font-weight: 400;
        vertical-align: middle;
    }

.mtef-box-data-label {
    text-align: left;
    text-transform: uppercase;
    font-size: 16px;
}

.mtef-box-data-value {
    text-align: right;
    font-size: 18px;
}

.data-value-color-1 {
    color: #019ed3;
}

.data-value-color-2 {
    color: var(--primary-color);
}

.data-value-color-3 {
    color: #da2983;
}

.data-value-color-4 {
    color: #3e52b5;
}

.mtef-box-more-info {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    padding: 10px;
    transition: all 0.6s ease;
    color: #FFF;
    text-align: center;
    font-weight: 400;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    cursor: pointer;
    opacity: 0;
}

.mtef-box:hover .mtef-box-more-info {
    opacity: 1;
}

.mtef-box-more-info.active {
    opacity: 1;
}

.mtef-box-more-info::after {
    content: "\f0d7";
    font-family: "Font Awesome 5 Free";
    font-size: 60px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    position: absolute;
    font-weight: 900;
    transform: rotate(0deg);
    transition: all 0.6s ease;
    z-index: 0;
    opacity: 0;
}

.mtef-box-more-info.active::after {
    bottom: -49px;
    opacity: 1;
}

.mtef-full-data {
    float: left;
    width: 100%;
    padding: 0px;
    background: #FFF;
    margin-top: 0px;
    max-height: 0px;
    transition: all 0.6s ease;
    overflow: hidden;
    border-top: 0px solid var(--primary-color);
}

.mtef-box-title-color-1.active::after {
    color: #019ed3;
}

.mtef-box-title-color-2.active::after {
    color: var(--primary-color);
}

.mtef-box-title-color-3.active::after {
    color: #da2983;
}

.mtef-box-title-color-4.active::after {
    color: #3e52b5;
}

.mtef-box-title-color-5.active::after {
    color: #4cb050;
}

.mtef-box-title-color-6.active::after {
    color: #e93154;
}

.mtef-full-data.open-info {
    margin-top: 21px;
    padding: 15px;
    max-height: 1000px;
    border: 1px solid #ddd;
    border-top: 5px solid var(--primary-color);
    box-shadow: 0 0 5px #aaa;
}

    .mtef-full-data.open-info.border-color-0 {
        border-top: 5px solid var(--primary-color);
    }

    .mtef-full-data.open-info.border-color-1 {
        border-top: 5px solid #019ED3;
    }

    .mtef-full-data.open-info.border-color-2 {
        border-top: 5px solid var(--primary-color);
    }

    .mtef-full-data.open-info.border-color-3 {
        border-top: 5px solid #DA2983;
    }

    .mtef-full-data.open-info.border-color-4 {
        border-top: 5px solid #3E52B5;
    }

    .mtef-full-data.open-info.border-color-5 {
        border-top: 5px solid #4CB050;
    }

    .mtef-full-data.open-info.border-color-6 {
        border-top: 5px solid #e93154;
    }


.mtef-data-table {
    float: left;
    width: 100%;
    padding: 10px 0;
}

.mtef-info-table {
    float: left;
    width: 100%;
    padding: 5px;
    background: #FFF;
    border-radius: 4px;
    box-shadow: 0 0 5px #CCC;
    font-size: 16px;
    text-align: right;
}

    .mtef-info-table table {
        background: #FFF;
        margin-bottom: 0;
    }

        .mtef-info-table table th, .mtef-info-table table td {
            padding: 8px;
            vertical-align: middle;
        }

        .mtef-info-table table th {
            color: #FFF;
            background: var(--primary-color);
            white-space: nowrap;
        }

            .mtef-info-table table th:first-child {
                text-align: left;
            }

        .mtef-info-table table tr td:nth-child(1) {
            text-align: left;
            background: #F9F9F9 !important;
        }

    .mtef-info-table .table-totle td {
        background: #F9F9F9;
        font-weight: 600;
    }

.mtef-info-item-title {
    background: #F9F9F9 !important;
    text-align: left;
    text-transform: uppercase;
}

.mtef-info-table table td.mtef-info-empty {
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}

.mtef-tbl-more-info {
    float: left;
    width: 100%;
    text-align: center;
    color: #FFF;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

    .mtef-tbl-more-info::after {
        content: "\f0d7";
        font-family: "Font Awesome 5 Free";
        font-size: 60px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        color: #FFF;
        text-align: center;
        position: absolute;
        font-weight: 900;
        transform: rotate(0deg);
        transition: all 0.6s ease;
        z-index: 0;
        opacity: 0;
    }

    .mtef-tbl-more-info.active::after {
        bottom: -49px;
        opacity: 1;
    }



.req {
    position: relative;
}

    .req::after {
        color: #d50b0b;
        content: "*";
        position: absolute;
        right: -10px;
        top: 0;
    }

input:required, select:required {
    box-shadow: none;
}

/*   progress bar  */
.form-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.2);
    z-index: 9999;
}

.progress-loader {
    position: absolute;
    background: #FFF;
    top: calc(50% - 100px);
    left: calc(50% - 50px);
    height: 100px;
    width: 100px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 5px #999;
}

.color-pic-btns {
    float: right;
    margin: -36px 2px 0 0;
    position: relative;
    z-index: 5;
}

    .color-pic-btns .color-btn {
        border-radius: 0;
        padding: 0.30rem 0.75rem;
        background: #ced4da;
    }

/* The switch - the box around the slider */
.switch {
    float: left;
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    margin: 0;
    margin-right: 5px;
}

td .switch {
    float: left;
    position: relative;
    display: inline-block;
    width: 56px !important;
    height: 22px;
    margin: 0;
    margin-right: 5px;
}

.switch-small {
    width: 30px !important;
    height: 18px !important;
}

td.role-check .switch-small {
    width: 30px !important;
    height: 18px !important;
}
/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #aaa;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 3px;
        bottom: 3.5px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

.switch-small .slider:before {
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 3px;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

.switch-small input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 15px;
}

    .slider.round:before {
        border-radius: 50%;
    }



/*    fancy checkbox    */
.fancy-checkbox {
    margin-right: 10px;
}

.cust-fancy-checkbox {
    margin-right: 0px;
    margin-bottom: 0px;
}

.fancy-checkbox,
.fancy-checkbox label {
    font-weight: normal;
}

    .fancy-checkbox input[type="checkbox"] {
        display: none;
    }

        .fancy-checkbox input[type="checkbox"] + span {
            display: inline-block;
            vertical-align: middle;
            *vertical-align: auto;
            *zoom: 1;
            *display: inline;
            cursor: pointer;
            position: relative;
        }

            .fancy-checkbox input[type="checkbox"] + span:before {
                display: inline-block;
                vertical-align: middle;
                *vertical-align: auto;
                *zoom: 1;
                *display: inline;
                position: relative;
                bottom: 1px;
                width: 24px;
                height: 24px;
                margin-right: 10px;
                content: "";
                border: 1px solid #ccc;
                border-radius: 3px;
            }

.cust-fancy-checkbox input[type="checkbox"] + span:before {
    width: 16px;
    height: 16px;
    margin-right: 3px;
    border: 2px solid #666;
}

.fancy-checkbox input[type="checkbox"]:checked + span:before {
    font-family: "Font Awesome 5 Free";
    content: '\f00c';
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 19px;
    font-weight: 900;
}

.cust-fancy-checkbox input[type="checkbox"]:checked + span:before {
    font-size: 10px;
    line-height: 12px;
}

.fancy-checkbox.custom-color-green input[type="checkbox"]:checked + span:before {
    color: #FFF;
    background-color: var(--alternate-color);
    border-color: var(--alternate-color);
}

.fancy-checkbox.cust-fancy-checkbox input[type="checkbox"]:checked + span:before {
    color: #FFF;
    background-color: var(--alternate-color);
    border-color: var(--alternate-color);
}

/*   fancy radio   */

.fancy-radio {
    margin-right: 10px;
}

    .fancy-radio,
    .fancy-radio label {
        font-weight: normal;
    }

        .fancy-radio input[type="radio"] {
            display: none;
        }

            .fancy-radio input[type="radio"] + span {
                display: block;
                cursor: pointer;
                position: relative;
            }

                .fancy-radio input[type="radio"] + span i {
                    display: inline-block;
                    vertical-align: middle;
                    *vertical-align: auto;
                    *zoom: 1;
                    *display: inline;
                    -webkit-border-radius: 8px;
                    -moz-border-radius: 8px;
                    border-radius: 8px;
                    position: relative;
                    bottom: 1px;
                    content: "";
                    border: 1px solid #ccc;
                    width: 18px;
                    height: 18px;
                    margin-right: 5px;
                }

            .fancy-radio input[type="radio"]:checked + span i:after {
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                display: block;
                position: relative;
                top: 3px;
                left: 3px;
                content: '';
                width: 10px;
                height: 10px;
                background-color: #7b848c;
            }

        .fancy-radio.custom-color-green input[type="radio"]:checked + span i:after {
            background-color: #53D76A;
        }

        .fancy-radio.custom-bgcolor-green input[type="radio"]:checked + span i {
            background-color: #53D76A;
        }

            .fancy-radio.custom-bgcolor-green input[type="radio"]:checked + span i:after {
                background-color: #fff;
            }

.input-group-addon .fancy-radio,
.input-group-addon .fancy-checkbox {
    margin: 0;
    position: relative;
    top: 1px;
}

    .input-group-addon .fancy-radio input[type="radio"] + span i,
    .input-group-addon .fancy-checkbox input[type="checkbox"] + span {
        margin: 0;
    }

        .input-group-addon .fancy-radio input[type="radio"] + span i:before,
        .input-group-addon .fancy-checkbox input[type="checkbox"] + span:before {
            margin: 0;
        }






/*  File Upload   */

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 6px 10px 10px 0;
    padding: 4px 5px;
    border-radius: 0px !important;
    float: right;
    margin: -34px 0px 0 0 !important;
    background: var(--alternate-color);
    border-color: var(--alternate-color);
    transition: all 0.6s ease;
}

    .fileUpload:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .fileUpload input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }



/*   custom-grid   */
.custom-grid {
}

    .custom-grid .k-grid-toolbar {
        text-align: right;
    }

.pop-add-form .custom-grid, .data-table-1.custom-data-table table {
    width: calc(100% - 2px) !important;
    border-collapse: separate;
    border-spacing: 0;
    border-left: 0.5px #000 solid;
    border-right: 0.5px #000 solid;
}

.custom-search-alignment {
    margin-bottom: -56px;
    /*padding: 0 15px;*/
    position: relative;
    z-index: 10;
    padding: 5px 20px;
    width: 60%;
}

.pop-add-form .custom-search-alignment {
    margin-bottom: -47px;
    padding: 5px 10px;
}

.wrap-th .k-filter-row th, .k-grid-header th.k-header {
    white-space: unset;
    /*background: #caedfb !important;*/
}

.wrap-th .k-grid-header th.k-header {
    vertical-align: middle;
}


.k-state-focused {
    color: #333;
    background: #248ACB;
}

.switch-block {
    padding-top: 8px;
    line-height: 22px;
    font-size: 18px;
}


.tree-box {
    max-height: 350px;
    overflow: auto;
}

.in-active {
    color: #666;
}



/* Confirmation message   */
.idms-msg-container {
    position: fixed;
    background: rgba(0,0,0,0.0);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -99;
}

    .idms-msg-container.show-msg {
        background: rgba(0,0,0,0.2);
        z-index: 99;
    }

.idms-msg-box {
    position: absolute;
    background: #FFF;
    width: 600px;
    min-height: 100px;
    top: 85px;
    left: calc(50% - 300px);
    transition: all 0.6s ease;
    border: 1px solid #999;
}

.idms-msg-container.show-msg .idms-msg-box {
    top: 80px;
}

.idms-msg-header {
    padding: 6px;
    background: #222;
    font-size: 14px;
    color: #F1F1F1;
}

.idms-msg-content {
    padding: 10px;
}

.idms-msg-footer {
    padding: 5px 10px;
    text-align: right;
    border-top: 1px solid #DDD;
}

.alert-btn {
    padding: 3px 15px;
    background: #4cb050;
    border: 1px solid #4cb050;
    border-radius: 20px;
    color: #FFF;
    margin-left: 5px;
}


.k-gantt-toolbar .k-button, .k-gantt > .k-header .k-link, .k-gantt > .k-header li, .k-grid .k-header .k-button, .k-scheduler .k-header .k-button, .k-scheduler .k-header .k-link, .k-scheduler .k-header li, .km-pane-wrapper .k-header .k-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

    .k-gantt .k-gantt-toolbar .k-button:hover, .k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover, .k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover .k-link, .k-grid .k-header .k-button:hover, .k-scheduler .k-header .k-button:hover, .k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-hover, .k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-hover .k-link, .km-pane-wrapper .k-header .k-button:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

.pop-radio-group .form-check {
    padding-left: 0;
}

.k-header.k-grid-toolbar {
    border-color: var(--primary-color);
    /*border-color: #acccd9;*/
}

.box-link-out {
    margin-bottom: 15px;
    position: relative;
}

.parent-items .box-link {
    position: relative;
    background: var(--primary-color);
    padding: 12px 5px;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    font-size: 14px;
    text-align: center;
    border: 2px solid #e77d00;
    box-shadow: 0 0 5px #999;
    color: #FFF;
    word-wrap: break-word;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.6s ease;
}

    .parent-items .box-link:hover {
        color: #FFF;
        text-decoration: none;
    }

    .parent-items .box-link.active {
        background: var(--alternate-color);
        border: 2px solid #2d983f;
        box-shadow: 0 0 5px #eee;
    }

        .parent-items .box-link.active::after {
            position: absolute;
            right: 2px;
            top: -2px;
            content: "\f058";
            font-family: "Font Awesome 5 Free";
            font-size: 14px;
            font-weight: 900;
            color: #F1F1F1;
            transition: all 0.6s ease;
        }

.child-items .box-link {
    position: relative;
    background: #757575;
    padding: 12px 5px;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    font-size: 12px;
    text-align: center;
    border: 2px solid #666;
    box-shadow: 0 0 5px #999;
    color: #FFF;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all 0.6s ease;
}

    .child-items .box-link:hover {
        color: #FFF;
        text-decoration: none;
    }

    .child-items .box-link.active {
        background: var(--alternate-color);
        border: 2px solid #2d983f;
        box-shadow: 0 0 5px #eee;
    }

        .child-items .box-link.active::after {
            position: absolute;
            right: 2px;
            top: -2px;
            content: "\f058";
            font-family: "Font Awesome 5 Free";
            font-size: 14px;
            font-weight: 900;
            color: #F1F1F1;
            transition: all 0.6s ease;
        }

.grid-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    margin: 0 auto;
}

.customer-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: contain;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    /*box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);*/
}

.data-tree {
    float: left;
    width: 100%;
    background: #FFF;
    padding: 15px;
}



/* data table edit*/
table.dataTable {
    border-collapse: collapse !important;
    width: 100% !important;
}

    table.dataTable thead .sorting_asc::after,
    table.dataTable thead .sorting::after,
    table.dataTable thead .sorting_desc::after {
        content: "";
    }

.table th, .table td {
    padding: 5px;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 5px;
}

.data-filters {
    margin: 0 0 -75px 15px;
    padding: 15px 0;
    clear: both;
    position: relative;
}

.dataTables_length {
    float: right;
    position: relative;
    z-index: 2;
}

    .dataTables_length select {
        /*display: block;
        width: 100%;*/
        padding: 0.4rem 0.75rem;
        line-height: 1.25;
        color: #495057;
        border-radius: 0.25rem;
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
        background: rgba(255,255,255,0.7);
        border: 1px solid #ddd;
        height: 32px;
    }

.dataTables_filter {
    float: right;
    margin-right: 20px;
    position: relative;
    z-index: 2;
}

.nested-child-tbl {
    padding: 10px;
}

    .nested-child-tbl table {
        width: 100% !important;
    }

.table th {
    background: #333333;
    color: #EEE;
    /*font-weight: 100;*/
}

.dataTables_filter input {
    width: 212px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #FFF;
    padding: 5px 3px;
    margin-left: 7px;
}

div.dataTables_wrapper div.dataTables_length select {
    width: 45px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #FFF;
    padding: 1px 3px;
}

.dataTables_info {
    float: left;
    padding: 5px 0;
}

.dataTables_paginate {
    float: right;
    padding-top: 10px;
}

    .dataTables_paginate a {
        background: #FFF;
        border: 1px solid var(--primary-color);
        padding: 4px 8px;
        margin-left: 2px;
        color: var(--primary-color);
        transition: all 0.6s ease;
        cursor: pointer;
    }

        .dataTables_paginate a:hover {
            background: #FFF;
            text-decoration: none;
            color: var(--primary-color);
        }

        .dataTables_paginate a.current {
            cursor: default;
            background: var(--primary-color);
            color: #FFF;
        }

        .dataTables_paginate a.disabled {
            cursor: default;
            background: #FFF;
            color: #666;
            border: 1px solid #aaaaaa;
        }



.tree-grid-row.level-2 {
}

.tree-grid-row.row-level-2 td:nth-child(1) {
    padding-left: 30px;
}

.tree-grid-row.row-level-3 td:nth-child(1) {
    padding-left: 60px;
}

.tree-grid-row.row-level-4 td:nth-child(1) {
    padding-left: 90px;
}

.tree-grid-row.row-level-5 td:nth-child(1) {
    padding-left: 120px;
}

.role-check label {
    margin-bottom: 0;
}

.role-check a i {
    width: 18px;
    font-size: 16px;
}

.btn.disabled {
    background: #757575;
    border-color: #757575;
    pointer-events: none;
    cursor: default;
}

    .btn.disabled.custom-disabled {
        pointer-events: unset;
    }


/*   Reports    */
.report-block {
    float: left;
    width: 100%;
}

.report-data-info {
    margin: 20px 0 0 0;
    background: #F9f9f9;
    padding: 15px;
    border-radius: 4px;
    float: left;
    width: 100%;
    border: 2px solid var(--alternate-color);
    border-top: 5px solid var(--alternate-color);
    box-shadow: 0 0 4px #ccc;
}

.reports-table-data, .reports-chart-data {
    margin: 20px 0 0 0;
    background: #F9f9f9;
    padding: 0px 15px 15px 15px;
    border-radius: 4px;
    float: left;
    width: 100%;
    border: 1px solid #eee;
    border-top: 5px solid var(--alternate-color);
    /*box-shadow:0 0 4px #ccc;*/
}

.report-table-title, .report-chart-title {
    float: left;
    width: 100%;
    text-transform: uppercase;
    font-size: 24px;
    color: var(--alternate-color);
    padding: 5px 0;
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
    /*background: #DDDDDD;*/
    border-bottom: 1px solid var(--alternate-color);
}

.report-table-grid {
    float: left;
    width: 100%;
    overflow-x: auto;
}

.reports-chart-data .k-content {
    float: left;
    width: 100%;
}

.print-btn-block {
    float: left;
    width: 100%;
    text-align: right;
}

    .print-btn-block .btn-2 {
        margin-left: 5px;
    }

.reports-table {
    width: 100%;
    border-collapse: collapse;
}

.table-text-center {
    text-align: center;
}

.reports-table td {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    padding: 4px;
}

.reports-table tr td:last-child {
    border-right: 1px solid #ddd;
}

.reports-table tr:nth-last-child(1) td {
    border-bottom: 1px solid #ddd;
}

.reports-table td.td-header {
    background: #ddd;
    font-weight: 500;
}

.reports-table td.td-no-border {
    border-top: 1px solid rgba(255,255,255,0);
    border-left: 1px solid rgba(255,255,255,0);
}

.reports-table tr td.td-no-border:last-child {
    border-right: 1px solid rgba(255,255,255,0);
}

.reports-table tr:nth-last-child(1) td.td-no-border {
    border-bottom: 1px solid rgba(255,255,255,0);
}

.td-top-border {
    border-top: 1px solid #ddd !important;
}

.td-left-border {
    border-left: 1px solid #ddd !important;
}




/*  Chat Page   */
.chat-page {
    position: relative;
    float: left;
    width: 100%;
    background: #FFF;
    min-height: calc(100vh - 51px);
}

.chat-left-window {
    float: left;
    width: 250px;
    box-shadow: 0 0 4px #aaa;
    position: relative;
    transition: all 0.6s ease;
}

    .chat-left-window.dpet-hide {
        width: 0px;
        /*overflow:hidden;*/
    }

.chat-middle-window {
    float: left;
    position: relative;
    width: calc(100% - 500px);
    padding: 15px;
    height: calc(100vh - 50px);
    transition: all 0.6s ease;
    background: #F1F1F1;
    overflow-y: auto;
}

    .chat-middle-window.middle-full {
        width: calc(100% - 250px);
    }

.chat-right-window {
    float: right;
    width: 250px;
    border-left: 1px solid #DDD;
}

.dept-trigger {
    position: absolute;
    font-size: 18px;
    padding: 9px 0px;
    color: #FFF;
    right: 0px;
    top: 0;
    cursor: pointer;
    background: #4a994a;
    z-index: 13;
    height: 47px;
    width: 45px;
    text-align: center;
    transition: all 0.6s ease;
}

.chat-left-window.dpet-hide .dept-trigger {
    right: -45px;
}

.chat-left-window .dept-trigger .fa-users {
    display: none;
}

.chat-left-window.dpet-hide .dept-trigger .fa-users {
    display: block;
}

.chat-left-window.dpet-hide .dept-trigger .fa-chevron-left {
    display: none;
}

.chat-users-list, .chat-depatments-list {
    width: 100%;
    position: relative;
    float: left;
    /*padding: 10px;*/
    height: calc(100vh - 98px);
    overflow-y: auto;
}

.chat-users-list {
    height: calc(100vh - 169px);
}

.chat-department-header {
    padding: 10px 10px;
    background: linear-gradient(to bottom, #4a994a 0%, #65df65 100%);
    color: #FFF;
    font-weight: 600;
    font-size: 18px;
}

.chat-user-header {
    float: left;
    width: 100%;
    background: linear-gradient(to bottom, var(--primary-color) 0%, #F3AD2E 100%);
    border-bottom: 1px solid #DDD;
    /*border-top-left-radius: 4px;
    border-top-right-radius: 4px;*/
    padding: 5px;
    box-shadow: 2px 2px 3px #ddd;
    color: #FFF;
}

.flter-label {
    padding: 5px;
    float: left;
    width: 100%;
    background: #ffe4b7;
    position: relative;
}

.chat-filter-clear {
    position: absolute;
    top: 0px;
    right: 1px;
    color: #ff0000;
    cursor: pointer;
    z-index: 11;
    height: 100%;
    background: #CCC;
    line-height: 31px;
    padding: 0 5px;
}



.chat-count, .dept-count {
    background: #4cb050;
    padding: 2px 5px;
    color: #FFF;
    border-radius: 4px;
    font-size: 12px;
}

.user-offline {
    /*background: var(--primary-color);#ffbd2f*/
    background: #ffbd2f;
}

.chat-count:empty, .dept-count:empty {
    display: none;
}


.chat-user, .dept-user {
    float: left;
    width: 100%;
    padding: 6px 40px 6px 6px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative;
    cursor: pointer;
    background: rgba(0,0,0,0);
    transition: all 0.6s ease;
    white-space: nowrap;
}

    .chat-user:hover, .dept-user:hover {
        background: rgba(0,0,0,0.1);
    }

    .chat-user i {
        position: absolute;
        top: 14px;
        right: 10px;
    }

.user-label, .dept-label {
    font-size: 14px;
    margin-right: 10px;
    color: #777;
}

.in-active {
    color: #999;
}



.chat-msg-box {
    background: #FFF;
    width: 300px;
    border-radius: 10px;
    /*overflow: hidden;*/
    position: absolute;
    right: 20px;
    bottom: 10px;
    box-shadow: 0 8px 26px 0 rgba(0,18,46,0.16);
}

    .chat-msg-box.chat-msg-box-left {
        left: 10px;
        right: auto;
    }

.chat-msg-box-header {
    float: left;
    width: 100%;
    background: linear-gradient(to bottom, #4a994a 0%, #65df65 60%, #b9ffa4 100%);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px 5px;
    position: relative;
}

    .chat-msg-box-header::after {
        content: '';
        position: absolute;
        width: 100%;
        bottom: -8px;
        left: 0px;
        border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==);
        border-image-slice: 0 0 100%;
        border-image-width: 0 0 15px;
        border-image-repeat: stretch stretch;
        border-bottom: solid 15px;
        border-top: 0;
        border-left: 0;
        border-right: 0;
    }

.chat-msg-box.minimize-chat .chat-msg-box-header::after {
    display: none;
}

.chat-msg-box-icon {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

    .chat-msg-box-icon img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
    }

.chat-msg-box-name {
    float: left;
    width: calc(100% - 105px);
}

.chat-msg-box .user-name {
    color: #FFF;
}

.chat-msg-box .user-status {
    color: #FFF;
}

.user-name {
    font-weight: 600;
    color: #FFF;
}

.user-status {
    color: #ccc;
    font-size: 12px;
}

.chat-msg-box-minimize {
    float: left;
    width: 25px;
    height: 25px;
    padding: 4px 0 0 0;
    color: #FFF;
    font-size: 18px;
    cursor: pointer;
}

.chat-msg-box-close {
    float: right;
    width: 25px;
    height: 25px;
    padding: 0;
    font-size: 18px;
    cursor: pointer;
}

.chat-messages {
    width: 100%;
    float: left;
    height: 300px;
    padding: 10px 0 20px 0;
    overflow-x: auto;
}

.minimize-chat .chat-messages {
    height: 0px;
    overflow: hidden;
    padding: 0;
}

.chat-msg-left-text {
    width: 80%;
    float: left;
    clear: both;
    padding: 5px;
}

.chat-user-left-icon, .chat-dept-left-icon {
    width: 40px;
    height: 40px;
    margin-right: 5px;
}

    .chat-user-left-icon img, .chat-dept-left-icon img {
        width: 28px;
        height: 28px;
        border-radius: 100%;
    }

.chat-text-left {
    float: left;
    min-width: 50px;
    text-align: left;
    padding: 5px 10px;
    border-radius: 10px;
    color: #000;
    background: linear-gradient(to right, #ffcd70 0%, #feebc7 100%);
    word-wrap: break-word;
    max-width: 100%;
}

.chat-user-left {
    width: 100%;
    float: left;
    margin: 0 0 10px 0;
    white-space: nowrap;
    line-height: 38px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-msg-right-text {
    width: 80%;
    float: right;
    clear: both;
    padding: 5px;
}

.chat-user-right {
    width: 100%;
    float: right;
    margin: 0 0 10px 0;
    white-space: nowrap;
    line-height: 38px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.chat-user-right-icon {
    margin-right: 5px;
    width: 40px;
    height: 40px;
}

    .chat-user-right-icon img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
    }

.chat-text-right {
    float: right;
    min-width: 50px;
    text-align: right;
    padding: 5px;
    border-radius: 10px;
    color: #FFF;
    background: linear-gradient(to right, #65df65 0%, #4a994a 100%);
    max-width: 100%;
    word-wrap: break-word;
}


.chat-msg-box-controls {
    float: left;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,0.1);
    position: relative;
    transition: all 0.6s ease;
}

.minimize-chat .chat-msg-box-controls {
    height: 0;
    overflow: hidden;
    border-top: 0px solid rgba(0,0,0,0.1);
}

.chat-msg-box .fa-chevron-up {
    display: none;
}

.chat-msg-box.minimize-chat .fa-chevron-down {
    display: none;
}

.chat-msg-box.minimize-chat .fa-chevron-up {
    display: block;
}

.chat-text-area {
    float: left;
    width: 100%;
    height: 70px;
    border: none;
    padding: 5px 40px 5px 5px;
    resize: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.chat-send-btn {
    position: absolute;
    float: left;
    border: none;
    color: #FFF;
    right: -20px;
    top: 5px;
    background: none;
}

    .chat-send-btn span {
        float: left;
        padding: 13px 0px 0 2px;
        width: 50px;
        height: 50px;
        margin: 5px;
        border-radius: 100%;
        background: linear-gradient(to left, #65df65 0%, #4a994a 100%);
        text-align: center;
        box-shadow: 0 0 20px rgba(124, 208, 111, 0.8);
    }

        .chat-send-btn span.zoomimg {
            position: absolute;
            right: 11px;
            padding: 0;
            width: 2px;
            height: 2px;
            margin: 25px;
            overflow: hidden;
            border-radius: 100%;
            background: rgba(255,255,255,1);
            text-align: center;
            box-shadow: 0 0 20px rgba(124, 208, 111, 0.8);
            transition: all 0.2s ease;
            top: 2px;
        }

    .chat-send-btn:hover span.zoomimg {
        padding: 16px 0px 0 2px;
        width: 55px;
        height: 55px;
        margin: 0px;
        background: rgba(255,255,255,1);
    }

    .chat-send-btn img {
        width: 24px;
    }


.chat-alert {
    position: absolute;
    width: 300px;
    bottom: 20px;
    right: 20px;
    /*display:none;*/
}

    .chat-alert.open {
        display: block;
    }

.chat-alert-inner {
    width: 100%;
    position: relative;
    text-overflow: ellipsis;
    background: rgba(255, 253, 178, 0.9);
    color: #8a6d3b;
    margin-bottom: 10px;
    border: 1px solid #f8eb06;
    box-shadow: 0 0 10px #aaa;
    padding: 10px 30px 10px 10px;
    border-radius: 6px;
    z-index: 99;
}

    .chat-alert-inner img {
        border-radius: 50%;
        box-shadow: 0 0 2px #666;
    }

.chat-alert-user {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-alert-msg {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    white-space: nowrap;
}

.chat-alert-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ff0000;
    cursor: pointer;
    z-index: 11;
}

/* emoji Edit*/
.emojionearea .emojionearea-editor {
    min-height: 55px;
    height: 55px;
    padding: 6px 27px 6px 30px;
    overflow: hidden;
    word-wrap: break-word;
}

.emojionearea .emojionearea-button {
    left: 3px;
    top: 25px;
    width: 24px;
    height: 24px;
}


/*   chat wall   */
.chat-wall-header {
    float: left;
    width: 100%;
    padding: 10px 50px;
}

.chat-wall-msg-title {
    float: left;
    width: 100%;
    padding: 0px;
    font-size: 20px;
    text-transform: uppercase;
    color: #555;
}

.chat-wall-controls {
    float: left;
    width: 100%;
    padding: 10px 0px;
    position: relative;
}

.chat-wall-text-area {
    float: left;
    width: calc(100% - 50px);
}

.wall-send-btn {
    float: right;
    width: 50px;
    height: 56px;
    border-radius: 4px;
    border: none;
    background: #4cb050;
}

    .wall-send-btn img {
        width: 24px;
    }

.chat-wall-msg-content {
    float: left;
    width: 100%;
    height: calc(100vh - 200px);
    overflow-y: auto;
    margin-top: 0px;
    padding: 15px 40px;
    background: #FFF;
    border-radius: 6px;
    box-shadow: 0 0 5px #ccc;
}

.chat-wall-left-msg, .chat-wall-right-msg {
    width: 100%;
    margin: 0 0 10px 0;
    white-space: nowrap;
    line-height: 38px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-wall-left-msg {
    float: left;
}

.chat-wall-right-msg {
    float: right;
    text-align: right;
}

.chat-wall-left-msg-text, .chat-wall-right-msg-text {
    width: 80%;
    clear: both;
    padding: 5px;
}

.chat-wall-left-msg-text {
    float: left;
}

.chat-wall-right-msg-text {
    float: right;
}

.chat-wall-user-left, .chat-wall-user-right {
    width: 100%;
    margin: 0 0 10px 0;
    white-space: nowrap;
    line-height: 38px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-wall-user-left {
    float: left;
}

.chat-wall-user-right {
    float: right;
    text-align: right;
}

.chat-wall-user-left-icon, .chat-wall-user-right-icon {
    margin-right: 5px;
    width: 40px;
    height: 40px;
}

.chat-wall-user-right-icon {
    text-align: right;
}

    .chat-wall-user-left-icon img, .chat-wall-user-right-icon img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
    }

.chat-wall-text-left, .chat-wall-text-right {
    float: left;
    min-width: 50px;
    padding: 5px;
    border-radius: 10px;
    color: #444;
    background: #FFF;
    max-width: 100%;
    word-wrap: break-word;
    box-shadow: 0 0 5px #bbb;
}

.chat-wall-text-right {
    float: right;
}

.wall-chat-attachment {
    position: absolute;
    top: 14px;
    left: 10px;
    z-index: 2;
    color: #999;
    cursor: pointer;
}

.uesr-chat-attachment, .dept-chat-attachment {
    position: absolute;
    top: 7px;
    left: 10px;
    z-index: 25;
    color: #999;
    cursor: pointer;
}





/*   gates movements  */

.gates-custom-container {
    float: left;
    width: 100%;
}

.gates-item-block {
    float: left;
    width: 100%;
}

.gates-preview-item {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 15px;
}

.category-preview-item {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.gares-category-title {
    float: left;
    width: 100%;
    padding: 10px 15px;
    border-bottom: 1px solid #CCC;
    font-size: 16px;
    text-transform: uppercase;
}

.gates-item-controls {
    float: left;
    width: 100%;
    padding: 10px 0;
}


.gates-date-btn {
    float: right;
    margin: -0px 0 0 0;
    position: relative;
    z-index: 4;
    border-radius: 0;
}

    .gates-date-btn .btn {
        font-size: 14px;
    }

.gates-btn {
    width: 100%;
    text-align: center;
    padding: 4px 15px;
    color: #000;
    border: 1px solid #ddd;
    text-overflow: ellipsis;
    overflow: hidden;
}

.smartfield {
    display: none;
}



/*   Range Slider   */
.range-slide-container {
    width: 100%;
}

.range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 12px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .range-slider:hover {
        opacity: 1;
    }

    .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: var(--primary-color);
        cursor: pointer;
        border: 1px solid var(--primary-color);
        box-shadow: 0 0 5px #999;
    }

    .range-slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: var(--primary-color);
        cursor: pointer;
        border: 1px solid var(--primary-color);
        box-shadow: 0 0 5px #999;
    }

.left-bar ~ * select:focus .left-bar ~ select:focus {
    display: none;
}



/*     drag and move   */
.drag-item-group {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.drag-item {
    cursor: move;
    padding: 0px 15px;
    border-radius: 6px;
    background: #F1F1F1;
    margin-bottom: 5px;
    border: 1px solid #DDD;
    height: 34px;
    line-height: 34px;
}

.dndPlaceholder {
    height: 30px;
    background: #e3f2e3;
    width: 100%;
    margin-bottom: 5px;
    border-radius: 6px;
}

.project-id-hide {
    display: none;
}

.project-index {
    width: 30px;
}

.project-label {
    float: right;
    width: calc(100% - 25px);
    border-left: 1px dashed #aaa;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
    margin-top: 2px;
}


.kpi-notification {
    text-align: center;
    float: left;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    color: var(--primary-color);
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 8px;
}

    .kpi-notification p {
        margin: 0;
        width: 100%;
        text-align: center;
        animation-duration: 5s;
        animation-delay: 1s;
    }

.table-row-drag .drag-item {
    /*height:47px;*/
    height: auto;
    line-height: initial;
}

.drag-table-header {
    float: left;
    width: 100%;
    background: #333333;
    padding: 5px 15px;
    border-radius: 6px;
    margin-bottom: 5px;
}

    .drag-table-header th {
        border: none !important;
    }

.table-layout-fixed, .table-row-drag .drag-item table {
    table-layout: fixed;
    margin-bottom: 0;
}

.drag-item table td {
    vertical-align: middle;
}

.drag-s-no {
    width: 40px;
}

.drag-value {
    width: 120px;
}

.measuring-unit {
    width: 120px;
}
/* IDMS Custom collaps Panel */
.idms-collaps-panel {
    float: left;
    width: 100%;
    padding: 15px;
}

.idms-collaps-item {
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

.idms-collaps-item-title {
    float: left;
    position: relative;
    width: 100%;
    padding: 8px 10px;
    background: #f1f1f1;
    color: #333;
    cursor: pointer;
    border: 1px solid #d1d1d1;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.6s ease;
}

    .idms-collaps-item-title.active {
        background: #666;
        color: #FFF;
    }

    .idms-collaps-item-title::after {
        position: absolute;
        right: 0px;
        top: 0px;
        height: 100%;
        vertical-align: middle;
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        font-size: 16px;
        font-weight: 900;
        color: #222;
        transition: all 0.6s ease;
        padding: 8px 20px;
        transform: rotate(0deg);
    }

    .idms-collaps-item-title.active::after {
        transform: rotate(180deg);
        color: #FFF;
        top: 2px;
    }

.idms-collaps-item-content {
    float: left;
    width: 100%;
    padding: 0px 10px;
    max-height: 0;
    transition: all 0.6s ease;
    border: 0px solid #ddd;
    overflow: hidden;
}

.idms-collaps-item.collaps-active .idms-collaps-item-content {
    padding: 10px 10px;
    max-height: 2000px;
    border: 1px solid #ddd;
    overflow: inherit;
}


/*  tooltip  */
.tooltip {
    max-width: 1000px;
}

    .tooltip .tooltip-inner {
        width: 100% !important;
        max-width: 100% !important;
    }

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.top-left .tooltip-arrow {
    right: 5px;
    bottom: 0;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}

.tooltip.bottom .tooltip-arrow {
    top: -5px;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    line-break: auto;
}

    .popover.top {
        margin-top: -10px;
    }

    .popover.right {
        margin-left: 10px;
    }

    .popover.bottom {
        margin-top: 10px;
    }

    .popover.left {
        margin-left: -10px;
    }

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    padding: 9px 14px;
}

.popover > .arrow,
.popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover > .arrow {
    border-width: 11px;
}

    .popover > .arrow:after {
        content: "";
        border-width: 10px;
    }

.popover.top > .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #999;
    border-top-color: rgba(0, 0, 0, .25);
    border-bottom-width: 0;
}

    .popover.top > .arrow:after {
        bottom: 1px;
        margin-left: -10px;
        content: " ";
        border-top-color: #fff;
        border-bottom-width: 0;
    }

.popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: #999;
    border-right-color: rgba(0, 0, 0, .25);
    border-left-width: 0;
}

    .popover.right > .arrow:after {
        bottom: -10px;
        left: 1px;
        content: " ";
        border-right-color: #fff;
        border-left-width: 0;
    }

.popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0, 0, 0, .25);
}

    .popover.bottom > .arrow:after {
        top: 1px;
        margin-left: -10px;
        content: " ";
        border-top-width: 0;
        border-bottom-color: #fff;
    }

.popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: rgba(0, 0, 0, .25);
}

    .popover.left > .arrow:after {
        right: 1px;
        bottom: -10px;
        content: " ";
        border-right-width: 0;
        border-left-color: #fff;
    }



/*  Gates Info Start  */
.gates-info-group {
    float: left;
    width: 100%;
    padding: 25px 0 50px 0;
    border: 1px solid #ddd;
    background: #E9F3ED;
}

    .gates-info-group ul {
        width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        display: flex;
    }


        .gates-info-group ul li {
            float: left;
            width: 200px;
            margin: 0;
            padding: 0;
            /*display: inline-block;*/
            text-align: center;
            position: relative;
            list-style: none;
        }

.gates-info-item {
}

.gate-item-icon {
    width: 37px;
    height: 26px;
    line-height: 30px;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 13px);
    top: -12px;
    z-index: 14;
    cursor: pointer;
}

    .gate-item-icon span {
        color: #FFF;
        position: relative;
        z-index: 15;
        font-size: 10px;
        text-align: center;
    }

    .gate-item-icon::after {
        position: absolute;
        left: 3px;
        top: 8px;
        content: "\f041";
        font-family: "Font Awesome 5 Free";
        font-size: 32px;
        font-weight: 900;
    }

.gate-item-value {
    float: left;
    width: 100%;
    margin-top: 30px;
    text-align: center;
    font-weight: 400;
    color: #666;
    font-size: 14px;
}

.no-data {
    width: 100%;
    text-align: center;
    color: #999;
    font-weight: 600;
    padding: 0px 0 0px 0;
}
/*  Gates Info end   */

/* gate tabs */
.gate-tabs {
    float: left;
    width: 100%;
}

.gate-tab-group {
    float: left;
    width: 100%;
    display: flex;
    flex-flow: wrap;
    background: #E9F3ED;
    padding: 5px;
}

.gate-tab-item {
    padding: 3px;
    margin-right: 5px;
    position: relative;
    box-shadow: 0 0 3px #999;
}

    .gate-tab-item.active::after {
        position: absolute;
        left: calc(50% - 11px);
        bottom: -26px;
        content: "\f0d7";
        font-family: "Font Awesome 5 Free";
        font-size: 32px;
        font-weight: 900;
    }

.gate-tab-btn {
    border-radius: 0;
    background: #FFF;
    padding: 2px 10px;
}

.gate-tab-content {
    float: left;
    width: 100%;
    margin-top: 20px;
}

.idms-data-table table {
    border: 1px solid #ddd;
}

.idms-data-table th, .idms-data-tabl .table thead th {
    background: #E9F3ED;
    padding: 8px 4px;
    vertical-align: middle;
    color: #1e8644;
}

.idms-data-table td {
    vertical-align: middle;
}

.custom-amount-padding {
    padding-right: 30px;
}

.top-notify-seen {
    background: #FFFFFF;
}

.top-notify-unseen {
    background: #fff3cd;
}

.tree-search {
    float: left;
    width: 100%;
}

.tree-search-input {
    float: left;
    width: calc(100% - 39px);
    padding: 7px 6px 6px 10px;
    border: 1px solid #bdbfc1;
    border-right: 0px solid #bdbfc1;
    box-shadow: 0 0 2px #ccc;
}

.tree-search-btn {
    float: right;
    background: var(--alternate-color);
    border: 0px solid var(--alternate-color);
    padding: 7px 12px;
    outline: none !important;
    color: #FFF;
    transition: all 0.6s ease;
}

    .tree-search-btn:hover {
        background: var(--primary-color);
        border: 0px solid var(--primary-color);
    }



/*  Notification Popup  */
.pop-notification-list {
    float: left;
    width: 100%;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: 10px;
}

.pop-notification-item {
    float: left;
    width: 100%;
    border-left: 5px var(--alternate-color) solid;
    box-shadow: 0 0 5px #aaa;
    margin-bottom: 20px;
    border-radius: 6px;
    padding: 10px;
}

    .pop-notification-item.pop-noti-unseen {
        border-left: 5px var(--primary-color) solid;
        background: #feffe0;
    }

.pop-noti-img {
    float: left;
    width: 44px;
}

    .pop-noti-img img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        box-shadow: 0 0 2px #aaa;
    }

.pop-noti-msg {
    float: right;
    width: calc(100% - 54px);
    padding: 0 5px 5px 5px;
    font-size: 14px;
}

.pop-noti-user {
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: var(--alternate-color);
    margin-bottom: 5px;
}

.pop-notification-item.pop-noti-unseen .pop-noti-user {
    color: var(--primary-color);
}

.margin-left-0 {
    margin-left: 0;
}

.hideHeaderNslideBar {
    display: none;
}

.showHeaderNslideBar {
    display: inline;
}

label.kTxtin {
    margin-bottom: 0;
}

.info-btn {
    cursor: pointer;
    margin-top: 10px;
    cursor: pointer;
    font-size: 18px;
    color: var(--primary-color);
}

/* Custom tooltip  */
.project-link {
    position: relative;
    width: 200px;
}

.custom-tooltip {
    float: right;
    margin-top: 0px;
    display: none;
    position: absolute;
    width: calc(100vw - 400px);
    top: -5px;
    left: 200px;
}

    .custom-tooltip::before {
        position: absolute;
        left: -4px;
        top: 5px;
        height: 100%;
        vertical-align: middle;
        content: "\f0d9";
        font-family: "Font Awesome 5 Free";
        font-size: 32px;
        font-weight: 900;
        color: #FFF;
        transition: all 0.6s ease;
        z-index: 2;
    }

.project-link:hover .custom-tooltip {
    display: block;
}

.custom-tooltip .tooltip-trigger {
    float: right;
    cursor: pointer;
}

.custom-tooltip .tooltip-container {
    float: left;
    background: #FFF;
    box-shadow: 0 0 5px #aaa;
    padding: 4px 10px;
    border: 1px #ccc solid;
    display: block;
}

.k-grid td {
    overflow: inherit;
}

.serch-form {
    position: relative;
}

    .serch-form input {
        width: 100%;
        padding: 10px 115px 10px 15px;
        border-radius: 0px;
        border: 1px solid #ced4da;
        font-size: 17px;
        outline: none !important;
        box-shadow: none !important;
    }

    .serch-form button {
        position: absolute;
        right: 4px;
        top: 5px;
        border: 0;
        padding: 8px 20px;
        background: #ffb700;
        border-radius: 30px;
        font-size: 15px;
        font-weight: 600;
        outline: none !important;
        transition: all 0.6s ease;
        letter-spacing: 1px;
    }

        .serch-form button:hover {
            background: #e3b540;
        }

.search-section .serch-form .search-result {
    background: #fff;
    border-radius: 0px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.serch-form .search-result {
    bottom: 0 !important;
}

.search-section .serch-form .search-result ul.list-group {
    max-height: calc(100vh - 350px);
    overflow: auto;
}


/*---------- Multiselectdropdown start Here ----------*/

.wrapper {
    width: 100%;
    position: relative;
}

    .wrapper .selected-items-box {
        float: left;
        cursor: pointer;
        border: solid 1px #b1b1b1;
        padding: 0px 0px;
        width: 100%;
        background-color: #FFF;
        color: #333;
        /*border-radius: 4px;*/
        position: relative;
        z-index: 2;
    }

        .wrapper .selected-items-box[disabled="disabled"] {
            background-color: #e9ecef;
            color: #333;
            pointer-events: none;
        }

        .wrapper .selected-items-box.disabled {
            pointer-events: none;
            background-color: #e9ecef;
        }

        .wrapper .selected-items-box .items-list {
            list-style-type: none;
            width: 100%;
            padding: 0;
            margin: 0;
        }

            .wrapper .selected-items-box .items-list li {
                display: inline;
            }

.check-all {
    padding: 5px 5px;
    color: #fff;
    background: #535353;
    border-bottom: solid 1px #C7C6C7;
    background-image: linear-gradient(to right bottom, #535353, #5b5b5b, #636363, #6c6c6c, #747474, #747474, #747474, #747474, #6c6c6c, #636363, #5b5b5b, #535353);
}

.wrapper .list {
    min-width: 260px;
    width: 100%;
    border: 1px solid #C7C6C7;
    z-index: 11;
    position: absolute;
    top: 32px;
    background: #FFF;
    border-radius: 0 0 4px 4px;
    animation-name: bounceIn;
    animation-duration: 0.6s;
    animation-delay: 0s;
    display: none;
}

    .wrapper .list.active {
        display: block !important;
    }

    .wrapper .list::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 20px;
        bottom: -20px;
        left: 0;
        background: none;
    }

    .wrapper .list.right-0 {
        right: 0;
    }

.list .items-list {
    list-style-type: none;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 0 0 0 !important;
    margin: 0;
}

    .list .items-list::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }

    .list .items-list li {
        margin: 0;
        width: 100%;
        padding: 0;
        border-bottom: solid 1px #C7C6C7;
        padding: 5px;
        background-color: #fff;
        animation-name: animate-slide;
    }

        .list .items-list li:hover {
            background: #f8f8f8;
        }

        .list .items-list li:last-child {
            border-bottom: 0;
        }

.check-all > .multi-select-check {
    color: #fff !important;
}

.multi-select-check {
    display: block;
    position: relative;
    padding-left: 25px;
    padding-top: 1px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .multi-select-check input {
        position: absolute;
        opacity: 0;
        width: 15px;
        height: 15px;
        top: -1px;
        cursor: pointer;
        display: none;
    }

        .multi-select-check input:disabled ~ .multicheckmark {
            background: #a1a1a1 !important;
            border-color: #a1a1a1 !important;
            cursor: not-allowed;
        }

            .multi-select-check input:disabled ~ .multicheckmark:after {
                border-color: #d3d3d3 !important;
            }

        .multi-select-check input:disabled ~ .multicheck-text {
            color: #bfbfbf;
            cursor: not-allowed;
        }

            .multi-select-check input:disabled ~ .multicheck-text:before {
                display: inline-block;
                content: "its Disabled";
                position: absolute;
                background: #000;
                color: #fff;
                padding: 0 4px;
                right: 0;
                top: 0;
                font-size: 10px;
                border-radius: 3px;
                display: none;
            }

            .multi-select-check input:disabled ~ .multicheck-text:hover:before {
                display: block;
            }

.multicheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid var(--alternate-color);
}

.check-all .multicheckmark {
    background-color: #FFF;
    border: 1px solid #fff;
}

.multi-select-check:hover input ~ .multicheckmark {
    background-color: #e8ffec;
}

.multi-select-check input:checked ~ .multicheckmark {
    /*border-color: red;*/
    background: var(--alternate-color);
}

.check-all .multi-select-check input:checked ~ .multicheckmark {
    border-color: #ccc !important;
}

.wrapper label.selected-items[disabled="disabled"] {
    pointer-events: none;
    background-color: #e9ecef;
    cursor: not-allowed;
}

.multicheckmark:after {
    content: "";
    position: absolute;
    display: none;
}

.multi-select-check input:checked ~ .multicheckmark:after {
    display: block;
}

.multi-select-check .multicheckmark::after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.50s;
    -moz-transition: all 0.50s;
    -o-transition: all 0.50s;
    transition: all 0.50s;
}

.selected-items {
    float: left;
    width: 100%;
    font-weight: 300;
    padding: 8px 20px 6px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    height: 31px;
    font-size: 14px;
    line-height: 16px;
    margin: 0 !important;
}

.dropdown-icon {
    position: absolute;
    top: 5px;
    right: 9px;
}

.custom-width-select {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-item-list {
    font-size: 10px;
    float: left;
}

.list-controlls {
    background: #F5F5F5;
    padding: 5px;
    text-align: center;
}

    .list-controlls .btn {
        padding: 3px 15px;
        width: 100%;
    }

.multi-search {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 4px 5px;
    background: #f7f5f5;
    border-bottom: 1px solid #bababa;
}

    .multi-search .form-control {
        width: calc(100% - 32px);
        margin-right: 5px;
        height: 27px !important;
        border-radius: 0;
        padding: 2px 5px !important;
        border: 1px solid #bababa;
    }

.multi-search-close {
    font-size: 15px;
    width: 25px;
    height: 25px;
    color: #fff;
    border: 1px solid #e87f00;
    border-radius: 4px;
    outline: none !important;
    cursor: pointer;
    background: #e87f00;
    background: linear-gradient(to bottom right, #d77806 0%, #f5a23e 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .multi-search-close:hover {
        background: #d67500;
    }

.multi-select-1 {
    width: 100%;
}

    .multi-select-1 select {
        width: 100%;
    }

    .multi-select-1 span {
        width: 100% !important;
    }

    .multi-select-1 .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #0a8350 !important;
        padding-bottom: 3px;
        min-height: 34px;
    }

.text-right {
    text-align: right !important;
}

.animate {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
    animation-delay: .3s;
    animation-fill-mode: backwards;
}

.slide {
    animation-name: animate-slide;
}

.list .items-list li:nth-child(1) {
    animation-delay: 0.1s;
}

.list .items-list li:nth-child(2) {
    animation-delay: 0.2s;
}

.list .items-list li:nth-child(3) {
    animation-delay: 0.3s;
}

.list .items-list li:nth-child(4) {
    animation-delay: 0.4s;
}

.list .items-list li:nth-child(5) {
    animation-delay: 0.5s;
}

.list .items-list li:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes animate-slide {
    0% {
        opacity: 0;
        transform: translate(0, 40px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
/*---------- Multiselectdropdown End Here ----------*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 50px;
}

::-webkit-scrollbar-track {
    background: #ccc;
}


.fixed-header-table {
    width: 100%;
    max-height: calc(100vh - 250px);
    overflow: auto;
    position: relative;
    word-wrap: break-word;
}

    .fixed-header-table::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .fixed-header-table table {
        width: 100%;
        border-collapse: collapse;
    }

        .fixed-header-table table th {
            position: sticky;
            top: -1px;
            left: 0;
            z-index: 1;
            color: #000;
            background: #ddd;
            padding: 10px 5px;
            white-space: nowrap;
        }

        .fixed-header-table table td {
            padding: 5px;
        }
/*//---------------------------------------------------------------------------------*/
.table-form {
    color: #393939;
    max-width: 100%;
    background-color: #fff;
}

.table-overflow-auto {
    overflow: auto;
    position: relative;
    max-height: calc(100vh - 250px);
    box-shadow: 0 0 3px #8e8e8e;
}

    .table-overflow-auto table th {
        position: sticky !important;
        top: -1px;
        left: 0;
        z-index: 11;
    }

.table-form .table-form-wrapper {
    width: 100%;
}

    .table-form .table-form-wrapper table {
        width: 100%;
        border-collapse: collapse;
    }

        .table-form .table-form-wrapper table thead th {
            background-color: #ddd;
            border: 1px solid #ebebeb;
            font-weight: 600;
            color: #000;
        }

        .table-form .table-form-wrapper table tr th {
            text-align: left;
            white-space: nowrap;
            padding: 10px 5px;
            line-height: 20px;
            border: 1px solid #ebebeb;
            position: relative;
        }

            .table-form .table-form-wrapper table tr th::before {
                content: "";
                position: absolute;
                left: 0;
                bottom: -1px;
                width: 100%;
                height: 1px;
                background: #ddd;
            }

        .table-form .table-form-wrapper table tr:hover {
            background: #f9f9f9;
        }

        .table-form .table-form-wrapper table tr td {
            text-align: left;
            white-space: nowrap;
            padding: 5px 5px;
            line-height: 20px;
            border: 1px solid #ddd;
            vertical-align: middle;
        }

        .table-form .table-form-wrapper table tr .table-action-cell {
            width: 80px;
        }

        .table-form .table-form-wrapper table .row-level-two .level-one-input {
            padding-left: 30px;
        }

        .table-form .table-form-wrapper table .row-level-three .level-one-input {
            padding-left: 60px;
        }

        .table-form .table-form-wrapper table .row-level-four .level-one-input {
            padding-left: 80px;
        }

        .table-form .table-form-wrapper table .row-level-five .level-one-input {
            padding-left: 100px;
        }

        .table-form .table-form-wrapper table .row-level-six .level-one-input {
            padding-left: 120px;
        }

        .table-form .table-form-wrapper table .row-level-seven .level-one-input {
            padding-left: 140px;
        }

        .table-form .table-form-wrapper table .td-input-group {
            max-width: 600px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

            .table-form .table-form-wrapper table .td-input-group .level-one-input {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-right: 10px;
            }

                .table-form .table-form-wrapper table .td-input-group .level-one-input .table-input {
                    color: #393939;
                    height: 30px;
                    background: none;
                    border: 1px transparent solid;
                    width: 100%;
                    padding: 5px;
                    line-height: 25px;
                }

                    .table-form .table-form-wrapper table .td-input-group .level-one-input .table-input:hover, .table-form .table-form-wrapper table .td-input-group .level-one-input .table-input:focus {
                        background-color: #fcfcfc;
                        outline: 0;
                        border: 1px #ebebeb solid;
                    }

                    .table-form .table-form-wrapper table .td-input-group .level-one-input .table-input .add-child-item {
                        width: 50px;
                        flex-shrink: 0;
                    }

        .table-form .table-form-wrapper table .table-cell-btns {
            width: 100%;
            padding: 0px;
            line-height: normal;
            display: flex;
            align-items: center;
        }

            .table-form .table-form-wrapper table .table-cell-btns .table-icon-btn {
                width: 30px;
                height: 30px;
                border: 0;
                padding: 0;
                color: var(--alternate-color);
                background: transparent;
                display: flex;
                align-items: center;
                justify-content: center;
                outline: none !important;
                border-radius: 4px;
                transition: all 0.2s ease;
            }

                .table-form .table-form-wrapper table .table-cell-btns .table-icon-btn:hover {
                    color: #fff;
                    background: var(--alternate-color);
                }

                .table-form .table-form-wrapper table .table-cell-btns .table-icon-btn:active {
                    transform: scale(0.9);
                }

                .table-form .table-form-wrapper table .table-cell-btns .table-icon-btn.save {
                    /*color: ;*/
                }

                .table-form .table-form-wrapper table .table-cell-btns .table-icon-btn.delete {
                    color: #af0000;
                }

                .table-form .table-form-wrapper table .table-cell-btns .table-icon-btn.disabled {
                    color: #999;
                    cursor: not-allowed;
                }

                .table-form .table-form-wrapper table .table-cell-btns .table-icon-btn:disabled {
                    color: #999 !important;
                    cursor: not-allowed !important;
                }

        .table-form .table-form-wrapper table tr td {
            cursor: pointer;
        }

            .table-form .table-form-wrapper table tr td:hover .table-cell-btns {
                visibility: visible;
                opacity: 1;
            }

.table-form-toggle .dropdown-toggle {
    width: 25px;
    height: 30px;
    text-align: center;
    border-radius: 5px;
    border: 0;
    color: #fff;
    background: var(--alternate-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none !important;
    margin: 0 auto;
}

    .table-form-toggle .dropdown-toggle:hover {
        opacity: 0.8;
    }

.table-form-toggle .dropdown-menu .dropdown-item {
    padding: 5px 10px;
}

    .table-form-toggle .dropdown-menu .dropdown-item:hover {
        background: #bef6c8;
    }

    .table-form-toggle .dropdown-menu .dropdown-item:active {
        background: var(--alternate-color);
    }

.form-btn-group-md {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    padding-top: 21px;
    margin-bottom: 15px;
}



.t-radio {
    width: 100%;
    margin-bottom: 10px;
}

    .t-radio label {
        display: inline-block;
        width: 200px;
        padding: 5px 5px 5px 30px;
        border: solid 1px #ccc;
        border-left: 4px solid #19b975;
        background: #fff;
        transition: all 0.3s;
        position: relative;
        border-radius: 5px;
    }

        .t-radio label::before {
            content: "\f111";
            position: absolute;
            top: 3px;
            left: 5px;
            color: #00542a;
            font-family: 'Font Awesome 5 Free';
            font-size: 18px;
        }

    .t-radio input[type="radio"] {
        display: none;
    }

        .t-radio input[type="radio"]:checked + label {
            color: #19b975;
            border-color: #88dab2;
            border-left-color: #19b975;
            background: #c7edda;
        }

            .t-radio input[type="radio"]:checked + label::before {
                content: "\f058";
                font-weight: 900;
            }

.t-radio-colors > div:nth-child(1) .t-radio label {
    border-left-color: #5353de;
}

.t-radio-colors > div:nth-child(1) .t-radio input[type="radio"]:checked + label {
    color: #5353de;
    border-color: #c4c4fd;
    border-left-color: #5353de;
    background: #e0e0ff;
}

.t-radio-colors > div:nth-child(2) .t-radio label {
    border-left-color: #ec9a02;
}

.t-radio-colors > div:nth-child(2) .t-radio input[type="radio"]:checked + label {
    color: #ec9a02;
    border-color: #e3cca1;
    border-left-color: #ec9a02;
    background: #fff3dd;
}

.t-radio-colors > div:nth-child(3) .t-radio label {
    border-left-color: #e74646;
}

.t-radio-colors > div:nth-child(3) .t-radio input[type="radio"]:checked + label {
    color: #e74646;
    border-color: #edc7c7;
    border-left-color: #e74646;
    background: #ffeded;
}

.t-radio-colors > div:nth-child(5) .t-radio label {
    border-left-color: #b41bb4;
}

.t-radio-colors > div:nth-child(5) .t-radio input[type="radio"]:checked + label {
    color: #b41bb4;
    border-color: #b41bb4;
    border-left-color: #b41bb4;
    background: #f5e0f5;
}


.slidecontainer-1 {
    width: 100%;
}

    .slidecontainer-1 .slider-header {
        width: 100%;
        margin-bottom: -5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .slidecontainer-1 .slider-value {
        letter-spacing: 0.5px;
        text-align: right;
    }

    .slidecontainer-1 .input-slider {
        -webkit-appearance: none;
        width: 100%;
        height: 5px;
        border-radius: 0px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: 0.2s;
        transition: opacity 0.2s;
    }

        .slidecontainer-1 .input-slider:hover {
            opacity: 1;
        }
/*.slidecontainer-1 .input-slider::-webkit-slider-thumb {
	 -webkit-appearance: none;
	 appearance: none;
	 width: 15px;
	 height: 15px;
	 border-radius: 50%;
	 background: #04aa6d;
	 cursor: pointer;
}
 .slidecontainer-1 .input-slider::-moz-range-thumb {
	 width: 15px;
	 height: 15px;
	 border-radius: 50%;
	 background: #04aa6d;
	 cursor: pointer;
}*/

.last-value-none tr:last-child td .last-value {
    display: none;
}

.upload-loader {
    width: 250px;
    height: 10px;
    border: 1px solid var(--primary-color);
    border-radius: 0px;
    background: linear-gradient(-60deg, transparent 0%, transparent 50%, var(--primary-color) 50%, var(--primary-color) 75%, transparent 75%, transparent);
    background-size: 16px 32px;
    background-position: 0 0;
    animation: upload-loader 0.8s infinite linear;
}

@keyframes upload-loader {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -32px 0;
    }
}

.text-wrap {
    word-wrap: break-word !important;
}

.form-group label {
    margin-bottom: 0;
}




.delete-active {
    color: #e30b0b !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .delete-active:hover {
        color: #d01010 !important;
    }

.status-active, .edit-active, .view-active, .download-active, .file-upload-active {
    color: #0BAB47;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .status-active:hover, .edit-active:hover, .view-active:hover, .download-active:hover, .file-upload-active:hover {
        color: #0dcf56;
    }

.edit-inactive, view-inactive, .download-inactive, .delete-inactive, .file-upload-inactive, .completed-inactive {
    color: #bfbfbf;
    cursor: not-allowed;
}

.status-inactive {
    color: #666;
    cursor: pointer;
}

.status-pending {
    color: #e79806;
    cursor: pointer;
}

.color-green {
    color: #08c308;
}

.color-orange {
    color: #df9308;
}

.color-red {
    color: #f53636;
}

.color-blue {
    color: #5353ef;
}

.color-gray {
    color: #ccc;
}

.color-custom-green {
    color: #00b050 !important;
}

.color-custom-orange {
    color: #e97132 !important;
}

.color-custom-red {
    color: #ee0000 !important;
}

.color-custom-blue {
    color: #0070c0 !important;
}

.custom-btn-green {
    background-color: #00b050 !important;
    color: #FFFFFF !important;
}

.custom-btn-blue {
    background-color: #0070c0 !important;
    color: #FFFFFF !important;
}

.icon-btn {
    padding: 0;
    border: 0;
    outline: none !important;
    font-size: 25px;
    font-weight: 600;
    background: none;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .icon-btn:hover {
        opacity: 0.6;
    }

}

.data-table table .level-one td:first-child,
.data-table table .level-two td:first-child,
.data-table table .level-three td:first-child {
    min-width: 300px;
    min-height: 40px;
}

.data-table table .level-one td,
.data-table table .level-two td,
.data-table table .level-three td {
    padding: 10px 5px;
}

.data-table table .level-one td {
    background: #7ae2a6 !important;
    font-weight: 600;
}

.data-table table .level-two td {
    background: #b5f1cf !important;
}

.data-table table .level-three td {
    background: #d8fae6 !important;
}

.value-label {
    text-align: right;
    margin-bottom: 0 !important;
}

.file-upload-list {
    width: 100%;
}

    .file-upload-list .dropdown-toggle {
        width: 100%;
        height: 34px;
        border: 1px solid #ccc;
        border-radius: 0;
        background: #fff;
        color: #000;
        text-align: left;
        outline: none !important;
    }

        .file-upload-list .dropdown-toggle::before {
            content: '';
            position: absolute;
            top: 12px;
            right: 9px;
            width: 7px;
            height: 7px;
            border: 0;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            z-index: 1;
            transform: rotate(45deg);
        }

    .file-upload-list .dropdown_item {
        width: 100%;
        font-size: 13px;
        line-height: 16px;
        padding: 5px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        transition: all 0.3s ease;
    }

        .file-upload-list .dropdown_item label {
            margin: 0;
            max-width: 100%;
            padding-right: 10px;
            display: block;
        }

            .file-upload-list .dropdown_item label:hover {
                color: #6767f9;
                text-decoration: underline;
            }

    .file-upload-list .dropdown_item_download {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #37c97c;
        cursor: pointer;
    }

    .file-upload-list .dropdown_item_close {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #f13535;
        cursor: pointer;
    }

    .file-upload-list .dropdown_item:hover {
        background: #f9f9f9;
    }

.file-upload-list-group {
    width: 100%;
    display: flex;
}

    .file-upload-list-group .dropdown-menu {
        width: calc(100% + 34px) !important;
    }

.file-upload-list-icon {
    min-width: 34px;
    height: 34px;
    padding: 5px;
    align-content: center;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background: var(--alternate-color);
}

    .file-upload-list-icon.disabled {
        color: #a7a7a7;
        background: #757575;
        border-color: #757575;
        cursor: not-allowed;
    }


.data-table-1 {
    width: 100%;
    background: #fff;
    position: relative;
    clear: both;
    overflow: auto;
    max-height: 400px;
    /*border-top: 1px solid #000;*/
}

    .data-table-1 table {
        width: 100%;
        font-size: 14px;
        line-height: 18px;
        border-collapse: collapse;
    }

    .data-table-1.data-table-custom-scroll table {
        border-collapse: separate;
        border-spacing: 0;
    }

    
    .data-table-1 > table > thead {
        position: sticky;
        top: 0px;
        left: 0;
        z-index: 11;
        background: #000000;
    }


.data-table-top-10 thead {
    top: -10px !important;
}

.no-sticky-header > table > thead {
    position: inherit !important;
}

.data-table-1 table thead tr th {
    color: #fff;
    /*background: #caedfb;*/
    background: #009640;
    padding: 6px 4px;
    font-weight: 500;
    border: 1px solid #000000;
    letter-spacing: 0.5px;
    vertical-align: middle;
    position: relative;
    /*border-top: none;*/
    min-width: 120px;
}

.data-table-1 > table > thead > tr > th::before {
    position: absolute;
    content: '';
    top: -1px;
    left: -1px;
    width: calc( 100% + 1px);
    height: 1px;
    background-color: #000;
}

.data-table-1 > table > thead > tr > th::after {
    position: absolute;
    content: '';
    bottom: -1px;
    left: -1px;
    width: calc( 100% + 1px);
    height: 1px;
    background-color: #000;
}

.data-table-1 table tbody tr td {
    padding: 6px 4px;
    border: 1px solid #000;
    /*position: relative;*/
}

    .data-table-1 table thead tr th input,
    /*.data-table-1 table thead tr th select,*/
    .data-table-1 table thead tr th textarea,
    .data-table-1 table tbody tr td input,
    .data-table-1 table tbody tr td textarea {
        padding: 6px 4px;
        border-radius: 0;
        /*border: 1px solid rgba(255,255,255,0);*/
        background: rgba(255,255,255,0);
        width: 100%;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .data-table-1 table tbody tr td select {
        padding: 6px 15px 6px 0px;
        border-radius: 0;
        background: rgba(255,255,255,0);
        width: 100%;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }

        /*.data-table-1 table thead tr th > input,
        .data-table-1 table thead tr th > select,
        .data-table-1 table thead tr th > textarea,
        .data-table-1 table tbody tr td > input,
        .data-table-1 table tbody tr td > select {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            outline: none !important;
            box-shadow: none !important;
        }*/

        .data-table-1 table thead tr th input:focus,
        .data-table-1 table thead tr th select:focus,
        .data-table-1 table thead tr th textarea:focus,
        .data-table-1 table tbody tr td input:focus,
        .data-table-1 table tbody tr td select:focus,
        .data-table-1 table tbody tr td textarea:focus {
            border-color: #000;
        }

.data-table-1 {
    max-height: unset;
    overflow: unset;
}

.data-table-custom-scroll {
    max-height: unset;
    overflow: auto !important;
    height: calc(100vh - 490px);
}

.data-table-1.custom-data-table tr td {
    border: 0;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
}

.data-table-1.custom-data-table tr:nth-child(even) td {
    background: #eeeeee !important;
}

.data-table-1.custom-data-table tr:nth-child(odd) td {
    background: #f1f1f1 !important;
}

.data-table-1.custom-data-table table thead tr th input,
.data-table-1.custom-data-table table thead tr th select,
.data-table-1.custom-data-table table thead tr th textarea,
.data-table-1.custom-data-table table tbody tr td input,
.data-table-1.custom-data-table table tbody tr td select,
.data-table-1.custom-data-table table tbody tr td textarea {
    border: 1px solid #ccc !important;
}

table td.disabled {
    background: #eee;
    pointer-events: none;
}

    table td.disabled > * {
        opacity: 0.5;
    }


.step-table .region {
    font-weight: 600;
    background: #eee;
}

.step-table .cost-center {
    background: #e9e9e9;
    padding-left: 30px;
}

.step-table .area-office {
    background: #ffffff;
    padding-left: 30px;
}

.overflow-auto {
    width: 100%;
    overflow: auto !important;
}

.height-fixed {
    overflow: auto;
    max-height: 350px;
    box-shadow: 0 1px 2px #000000;
}

    .height-fixed .data-table-1 table thead {
        top: 0 !important;
    }

.custom_width > table > thead > tr > th {
    white-space: wrap;
    min-width: 150px;
}

.full-white .status-green {
    background: #e0ffe0 !important;
}

.full-white .status-red {
    background: #ffe8e8 !important;
}

.upload_icon {
    width: 20px;
    height: 20px;
    color: #13a10e;
    background: none !important;
    border: 0;
    outline: none !important;
    transition: all 0.3s ease;
    font-size: 20px;
    transform: rotate(-45deg);
    margin: 0 auto;
    cursor: pointer;
}

    .upload_icon.in-active {
        color: #c1c1c1 !important;
    }

    .upload_icon:hover {
        transform: rotate(45deg);
    }

.full-white td {
    background: #ffffff !important;
}

.dark-gray td {
    background: #bfbfbf !important;
}

.lite-gray td {
    background: #f2f2f2 !important;
}

.level-one td {
    /*background: #7ae2a6 !important;
    font-weight: 500;*/
    font-weight: 500;
    /*background: #cff4fc !important;
    border-color: #b8b8dd !important;*/
}

.level-two td {
    /*background: #fff3cd !important;*/
    font-weight: 500;
}

.level-three td {
    /*background: #f7f1f7 !important;*/
}

.cell-bg-darkpink {
    background: #f2ceed !important;
}




/*.progress-icon-block{
    position: relative;
    z-index: 0;
    min-width: 110px;
}
.progress-icon-block .selected-icon{
    width: 30px;
    height:30px;
    margin: 0 auto;
    transition: all 0.3s ease;
}
.progress-icon-block img{
    width: 30px;
    height:30px;
}
.progress-icon-block:hover .selected-icon{
    opacity:0;
}
.progress-icons {
    display: flex;
    gap: 8px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin: 0 auto;
    z-index:1;
    opacity:0;
    min-width: 110px;
    transition: all 0.3s ease;
}
.progress-icon-block:hover .progress-icons{
    opacity: 1;
}*/

/*.progress-icons span {
        visibility: hidden;
        opacity: 0;
    }

    .progress-icons:hover span {
        visibility: visible;
        opacity: 0.7;
    }

    .progress-icons span.active {
        visibility: visible;
        opacity: 1;
    }*/

.progress-icons img {
    width: 30px;
    cursor: pointer;
}

.uib-datepicker-popup {
    padding: 2px;
    font-size: 12px;
    line-height: 14px;
    min-width: inherit !important;
    /*position: fixed;
    z-index:999;*/
}

    .uib-datepicker-popup table thead tr th {
        padding: 1px !important;
        border: 0 !important;
    }

    .uib-datepicker-popup table thead .uib-datepicker-popup table thead th {
        position: inherit !important;
    }

    .uib-datepicker-popup table thead tr th button {
        font-size: 12px;
        line-height: 14px;
        height: 25px;
        padding: 5px 4px !important;
        outline: none !important;
        box-shadow: none !important;
        color: #fff;
        background: var(--primary-color);
    }

    .uib-datepicker-popup table tbody tr td {
        padding: 1px !important;
        border: 0 !important;
    }

        .uib-datepicker-popup table tbody tr td button {
            font-size: 12px;
            line-height: 14px;
            height: 25px;
            padding: 5px 4px !important;
            outline: none !important;
            box-shadow: none !important;
            border-radius: 0;
        }

    .uib-datepicker-popup .uib-button-bar {
        padding: 2px 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .uib-datepicker-popup .uib-button-bar button {
            font-size: 12px;
            line-height: 14px;
            height: 25px;
            border-radius: 0;
            padding: 4px;
            box-shadow: none !important;
            outline: none !important;
        }

        .uib-datepicker-popup .uib-button-bar .btn-success {
            width: 33.334%;
        }

        .uib-datepicker-popup .uib-button-bar .pull-left {
            width: 64%;
        }

            .uib-datepicker-popup .uib-button-bar .pull-left button {
                width: 50%;
            }
/*.position-relative .uib-datepicker-popup{
    position: fixed;
    top: 30px;
    z-index:99;
}*/
/*.data-table-1 .uib-datepicker-popup{
    z-index: 1;
}*/
.data-table-1 tr td .form-control {
    padding: 4px 2px;
    font-size: 12px;
}

.data-table-1 tr td .form-select {
    padding: 4px 10px 4px 2px !important;
    font-size: 12px;
}

.data-table-1 tr td .input-group-btn {
    width: 20px;
}

.date-picker {
    width: 100%;
    position: relative;
    background: #fff;
}

    .date-picker input {
        padding-right: 40px !important;
    }

    .date-picker .date-picker-btn {
        width: 32px;
        height: 32px;
        border: 0;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        position: absolute;
        top: 1px;
        right: 1px;
        z-index: 1;
        box-shadow: none !important;
        outline: none !important;
        transition: all 0.3s ease;
    }

    .date-picker input:focus + .date-picker-btn,
    .date-picker input:focus + div + .date-picker-btn {
        color: #fff;
        background: var(--primary-color);
    }

table .date-picker input {
    font-size: 11px;
    font-weight: 500;
    padding-right: 20px !important;
}

table .date-picker .date-picker-btn {
    width: 15px;
    font-size: 10px;
    padding-bottom: 8px;
}

/*.rating-dropdown .rating-dropdown-toggle{
    border: 0;
    padding:0;
    width: 100%;
    min-height: 30px;
    text-align: center;
    border-radius: 0 !important;
    outline: none !important;
    background: none !important;
}
.rating-dropdown .dropdown-menu .rating-dropdown-container{
    display: flex;
    align-items: center;
}
.rating-dropdown .dropdown-menu .rating-dropdown-container .dropdown-item{
    padding: 5px !important;
    text-align: center;
}*/

.rating {
    width: 100%;
    height: 28px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-img {
    width: 25px;
    height: 25px;
    margin-right: 4px;
    cursor: pointer;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
    flex-shrink: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rating-img:last-child {
        margin: 0;
    }

    .rating-img img {
        width: 22px;
        transition: all 0.3s ease;
    }

    .rating-img:hover {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
        opacity: 1;
    }

    .rating-img.active {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
        opacity: 1;
    }

        .rating-img.active img {
            width: 25px;
        }

/*.table-header-blue thead tr th{
    background: #caedfb !important;
}*/
/*.table-header-blue .k-grid-header .k-header .k-i-filter, .k-header,
.table-header-blue thead tr th a{
    color: #fff !important;
}*/
/*.table-header-blue .k-header.k-grid-toolbar{
    border: #caedfb !important;
}*/

/*.btn-blue a{
    color: #fff !important;
    background:#caedfb !important;
    border-color: #caedfb !important;
    box-shadow: none !important;
}
.btn-blue a::before{
    background: #000 !important;
}
.btn-blue a:hover{
    opacity: 0.8;
}*/

.w-150 {
    display: block;
    width: 150px;
}


body > .modal:first-child {
    z-index: 1111 !important;
}

.icon-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    word-break: break-all;
}

.tooltip-container {
    display: inline-block;
    position: relative;
}

    .tooltip-container .tooltip-text {
        width: 0px;
        height: 0;
        padding: 0px;
        border-radius: 4px;
        background: #fff;
        color: #333;
        font-size: 12px;
        line-height: 14px;
        overflow: hidden;
        transition: all 0.1s ease;
        position: absolute;
        top: -100px;
        right: -200px;
        opacity: 0;
        box-shadow: 0 0 5px #666;
    }

        .tooltip-container .tooltip-text td, .tooltip-container .tooltip-text table {
            background: #fff !important;
            border: 0;
        }

        .tooltip-container .tooltip-text::before {
            content: "";
            position: absolute;
            top: 15px;
            left: -10px;
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-right: 10px solid #474747;
            border-bottom: 5px solid transparent;
        }

        .tooltip-container .tooltip-text table {
            font-size: 12px;
            line-height: 14px;
        }

.tooltip-item {
    cursor: pointer;
    display: inline-block;
    /*border: 1px solid #474747;*/
}

.tooltip-container .tooltip-item:hover + .tooltip-text {
    width: auto;
    height: auto;
    padding: 5px;
    max-width: 250px;
    /*max-height: 250px;*/
    overflow: hidden;
    opacity: 1;
    z-index: 11;
}

.idmsinactive {
    color: #5e645d !important;
}


/*-------------------------  Validation Message box start------------------------------*/
.validate-form-block {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease;
}

    .validate-form-block.validate-show {
        visibility: visible;
        opacity: 1;
    }

.validate-form-container {
    position: absolute;
    top: 50px;
    left: calc(50% - 300px);
    background: #FFF;
    width: 600px;
    box-shadow: 0 0 5px #000;
    border-radius: 6px;
}

.validate-form-title {
    padding: 10px;
    background: #f1f1f1;
    color: #218838;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 0 2px #000;
    border-radius: 6px 6px 0px 0px;
}

.validate-form {
    float: left;
    width: 100%;
    padding: 15px 15px 15px 30px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

    .validate-form ol {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .validate-form ol ul {
            padding: 0 0 0 20px;
            margin: 0;
            list-style: none;
        }

        .validate-form ol > li:first-child {
            margin-bottom: 20px;
        }

        .validate-form ol > li:last-child {
            margin-top: 20px;
        }

.validation-table {
    min-width: 200px;
}

    .validation-table td, .validation-table th {
        padding: 4px;
    }

.validate-form-btns {
    float: left;
    width: 100%;
    padding: 5px 10px;
    background: #f1f1f1;
    color: #218838;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 0 2px #000;
}

.validate-btn {
    border: none;
    background: #218838;
    padding: 4px 10px;
    color: #FFF;
    border-radius: 4px;
    color: #FFF !important;
    cursor: pointer;
    font-size: 12px;
}
/*-------------------------  Validation Message box start------------------------------*/

/* ---Level Grid Styles start --- */
.level-grid {
    width: 100%;
    /*overflow: hidden;
      overflow-y: auto;*/
    overflow: auto;
    box-shadow: 0 0 2px #a5a5a5;
}


    .level-grid table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        table-layout: fixed;
        word-wrap: break-word;
        text-align: left;
    }

.level-grid-header {
    width: 100%;
    /*position: sticky;
      top: 0;
      left: 0;
      z-index: 99;*/
}

    .level-grid-header table tr th {
        color: #fff;
        padding: 8px 4px;
        background: #009640;
        border: 0px solid #017834;
        text-align: center;
        vertical-align: middle;
    }

.level-grid-body {
    width: 100%;
}

    .level-grid-body table tr td {
        padding: 6px 4px;
        text-align: center;
    }

    .level-grid-body .level-1 {
        background: #d9d9d9;
        font-weight: bold;
    }

        .level-grid-body .level-1 td {
            border: 1px solid #ccc;
            background: #d9d9d9;
        }

.level-grid .level-2 {
    background: #f2f2f2;
    font-weight: bold;
}

.level-grid-body .level-2 td {
    background: #f2f2f2;
    border: 1px solid #ccc;
}

.level-grid .level-3 {
    background: #ffffff;
}

    .level-grid .level-3 table tr td {
        border: 1px solid #ededed;
    }

.level-grid .indent-2 {
    padding-left: 20px !important;
}

.level-grid .indent-3 {
    padding-left: 40px !important;
}

.level-grid .thrightborder2 {
    border-right-width: 2px;
}

.level-grid .thtopborder {
    border-top-width: 2px;
}

/* ---Level Grid Styles end ---*/
.child-grid td {
    background: #ededed;
    border-color: #ccc !important;
    padding: 2px 5px !important;
}

.grid-toggle {
    background: #18ab5e;
    border: 1px solid #007236;
    color: #fff;
    width: 28px;
    height: 25px;
    /*border-radius: 4px;*/
    padding: 2px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none !important;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .grid-toggle:hover {
        opacity: 0.8;
    }

    .grid-toggle i {
        font-size: 14px;
    }

.form-control-group {
    width: 100%;
    padding: 15px;
    border-radius: 6px;
    background: #f9f9f9;
    border: 2px solid #ccc;
}


.customized-table table thead tr th {
    color: #fff;
    background: #007236;
    font-weight: 600;
    border-right: 1px solid #018b42;
}

.table-w-100 {
    min-width: 100px;
}

.table-w-125 {
    min-width: 125px;
}

.table-w-150 {
    min-width: 150px;
}

.table-w-175 {
    min-width: 175px;
}

.table-w-200 {
    min-width: 200px;
}

.note-table {
    border: 0px;
    margin-top: 30px;
}

    .note-table td {
        border: 0px !important;
        vertical-align: middle;
    }


.input-block {
    display: flex;
    align-items: center;
    justify-content: end;
}

    .input-block input {
        padding: 0px !important;
        text-align: center;
        border: 1px solid #000;
        display: inline-block;
        width: auto !important;
        max-width:100%;
    }

.easy_nav {
    width: 100%;
    display: flex;
    overflow: hidden;
    overflow-y: auto;
}

.easy-nav-left {
    width: 95px;
    flex-shrink: 0;
    padding: 15px 15px 15px 15px;
    overflow: hidden;
    overflow-y: auto;
}

.easy-nav-right {
    padding: 15px 0px 0px 0px;
    overflow: hidden;
    overflow-y: auto;
}

.easy-nav-body {
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: 15px;
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 200px);
}

.module-block {
    width: 65px;
    height: calc(100vh - 170px);
    color: #000;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    background: #ffc000;
    border: 1px solid #000;
    flex-shrink: 0;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.module-block-1 {
    width: calc(100% - 15px);
    height: 65px;
    color: #000;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    background: #ffc000;
    border: 1px solid #000;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.dashboard-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

    .dashboard-grid .tile {
        width: 230px;
        min-height: 110px;
        background: #009640;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 15px;
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0.5px;
        cursor: pointer;
        border: 2px solid #007236;
        /* Darker green border */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
        text-transform: uppercase;
        margin: 15px;
        border-radius: 10px;
        word-wrap: break-word;
    }

        .dashboard-grid .tile:hover {
            background-color: #007236;
            transform: translateY(-3px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        .dashboard-grid .tile .pop-btn {
            color: #fff;
            font-size: 10px;
            line-height: 12px !important;
            display: inline-block;
            margin-top: 10px;
            text-decoration: underline;
            font-weight: 400;
        }

            .dashboard-grid .tile .pop-btn:hover {
                text-decoration: none;
            }

/* Modal / Popup Styles */
.custom-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

    .custom-modal.active {
        display: flex;
        animation: fadeIn 0.3s ease;
    }

    .custom-modal .custom-modal-content {
        background: white;
        width: 660px;
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(0, 114, 54, 0.1);
        padding-bottom: 35px;
    }

#modalTitle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #e6f2eb;
    margin: 0;
    height: 75px;
    line-height: 75px;
    text-align: center;
    padding: 0 75px;
    box-sizing: border-box;
    font-size: 1.2rem;
    font-weight: 700;
    color: #007236;
    border-bottom: 1px solid rgba(0, 114, 54, 0.15);
    letter-spacing: 0.5px;
    z-index: 99;
}

    #modalTitle span {
        width: 100%;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.custom-modal .close-modal {
    position: absolute;
    top: 0;
    right: 0;
    height: 75px;
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    cursor: pointer;
    color: #64748b;
    z-index: 10;
    transition: all 0.2s;
    z-index: 100;
}

    .custom-modal .close-modal:hover {
        color: #ef4444;
        transform: scale(1.1);
    }

.custom-modal .button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 105px 35px 0 35px;
    max-height: calc(100vh - 60px);
    overflow: auto;
}

.custom-modal .pop-btn {
    position: relative;
    overflow: hidden;
    background: #f8fafc;
    padding: 24px 20px;
    text-decoration: none;
    color: #334155;
    border: 1px solid #e2e8f0;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
}

    .custom-modal .pop-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent );
        animation: shine-loop 3s infinite;
    }

@keyframes shine-loop {
    0% {
        left: -150%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.custom-modal .pop-btn:hover {
    background: #ffffff;
    border-color: #007236;
    color: #007236;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 114, 54, 0.15);
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

/* Responsive Fix */
@media (max-width: 700px) {
    .custom-modal .custom-modal-content {
        width: 90%;
    }

    .custom-modal .button-group {
        grid-template-columns: 1fr;
    }

    #modalTitle {
        padding: 0 50px;
    }
}


.uib-datepicker-popup {
    z-index: 1100 !important;
}


.color-table-overflow-auto {
    overflow: auto !important;
    box-shadow: 0 0 3px #747474;
    height: calc(100vh - 200px);
}

    .color-table-overflow-auto thead {
        position: sticky;
        top: -1px;
        left: 0;
        z-index: 11;
    }

#riskmanagement thead tr th {
    min-width: 150px !important;
}

.color-table {
    width: 100%;
    /*overflow: auto;*/
}

    .color-table table {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
        text-align: center;
    }

        .color-table table tr th {
            background: #009640;
            color: #fff;
            text-align: center;
            vertical-align: middle;
            border: 1px solid #000;
            padding: 4px 4px;
        }

        .color-table table tr td {
            border: 1px solid #000;
            padding: 4px 4px;
        }

    .color-table sub {
        line-height: 14px;
        display: inline-block;
    }

.hidden-control {
    position: relative;
}

    .hidden-control input,
    .hidden-control select {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 0;
        outline: none !important;
        z-index: 1;
    }

.color-table-child {
    display: none;
    visibility: hidden;
}

    .color-table-child.active {
        display: table-row;
        visibility: visible;
    }







.rainbow-block {
    width: 100%;
    display: flex;
}

.rainbow-block-left {
    width: 300px;
    flex-shrink: 0;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

    .rainbow-block-left img {
        width: auto;
        height: 470px;
        display: block;
        margin-top: -3px;
    }

.rainbow-block-right {
    width: calc(100% - 300px);
}

.rainbow-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .rainbow-table tr td {
        padding: 2px 5px;
        border: 2px solid #e97131;
        border-left: 0;
        border-right: 0;
    }

        .rainbow-table tr td:first-child {
            border-left: 0px solid #e97131;
        }

        .rainbow-table tr td:last-child {
            border-right: 2px solid #e97131;
        }

    .rainbow-table h2,
    .rainbow-table ul,
    .rainbow-table ul li {
        padding: 0;
        margin: 0;
        width: 100%;
    }

        .rainbow-table ul li {
            font-size: 14px;
            line-height: 16px;
        }

.rainbow-color-1 td {
    border-color: #90d795 !important;
}

.rainbow-color-2 td {
    border-color: #6dc56e !important;
}

.rainbow-color-3 td {
    border-color: #39a939 !important;
}

.rainbow-color-4 td {
    border-color: #068420 !important;
}

.rainbow-color-5 td {
    border-color: #00672f !important;
}

.center-title {
    font-size: 24px;
    line-height: 25px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.data-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.questions_block {
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.questions_block_left {
    width: 100%;
    padding-right: 8px;
}

.questions_block_right {
    flex-shrink: 0;
    width: 250px;
    padding-left: 8px;
}

table.rainbow-table ul {
    list-style: disc;
}

.custom-select-box {
    background: none;
    color: #000000;
}

    .custom-select-box:focus, .custom-select-box:active {
        background: none;
        color: #000000;
    }


/*--------------- Yes & NO Switch CSS Start ---------------------*/
.switch-toggle {
    position: relative;
    width: 150px;
    height: 34px;
    padding: 2px;
    background: #fff;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    font-style: normal;
    border: 1px solid #000;
}

    .switch-toggle input[type=checkbox] {
        cursor: pointer;
        position: absolute;
        inset: 0;
        appearance: none;
        z-index: 2;
    }

        .switch-toggle input[type=checkbox] + label.switch-toggle-label {
            position: absolute;
            inset: 2px;
            padding: 4px 0;
            display: block;
            user-select: none;
            pointer-events: none;
            display: grid;
            gap: 2px;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            place-items: center;
            letter-spacing: 0.5px;
            margin: 0;
        }

            .switch-toggle input[type=checkbox] + label.switch-toggle-label:before {
                content: "";
                position: absolute;
                width: 50%;
                inset: 0;
                background: #009640;
                box-shadow: 0px 10px 20px 0px rgba(16, 39, 68, 0.1);
                translate: 0 0;
                transition: translate 250ms cubic-bezier(0.93, 0.26, 0.07, 0.69);
            }

            .switch-toggle input[type=checkbox] + label.switch-toggle-label span {
                position: relative;
                transition: 200ms linear;
            }

                .switch-toggle input[type=checkbox] + label.switch-toggle-label span:nth-child(1) {
                    color: #fff;
                }

                .switch-toggle input[type=checkbox] + label.switch-toggle-label span:nth-child(2) {
                    color: #009640;
                }

        .switch-toggle input[type=checkbox]:checked + label.switch-toggle-label::before {
            translate: 100% 0;
            background: #009640;
        }

        .switch-toggle input[type=checkbox]:checked + label.switch-toggle-label span:nth-child(1) {
            color: #009640;
        }

        .switch-toggle input[type=checkbox]:checked + label.switch-toggle-label span:nth-child(2) {
            color: #fff;
        }

        .switch-toggle input[type=checkbox]:disabled + .switch-toggle-label {
            cursor: not-allowed !important;
            background: #ccc !important;
        }

            .switch-toggle input[type=checkbox]:disabled + .switch-toggle-label span {
                color: #009640 !important;
                cursor: not-allowed !important;
            }

            .switch-toggle input[type=checkbox]:disabled + .switch-toggle-label::before {
                background: #ccc !important;
                cursor: not-allowed !important;
            }

/*--------------- Yes & NO Switch CSS End ---------------------*/


.data-table-1 .wrapper .list {
    z-index: 1111;
}


.custom-table-header-green table thead tr th {
    color: #fff !important;
    background: #009640 !important;
}

.text-click {
    color: #0070c0;
    /*text-decoration: underline;*/
    cursor: pointer;
}

.green-btn {
    background: #009640;
    color: #FFF;
}

.under_development {
    width: 100%;
    background: #fff;
    overflow: hidden;
    overflow-y: auto;
    text-align: center;
    padding: 15px;
}

    .under_development img {
        width: 400px;
        margin: 0 auto 20px auto;
    }

.under_development_title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0;
}

.iconic {
    /*width: 100%;*/
    position: relative;
}

.iconic-view {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 11;
    color: #07bd54;
    font-size: 14px;
}

    .iconic-view:hover {
        color: #007632;
    }

.iconic .tooltip {
    font-size: 10px;
    line-height: 12px;
}

.mw-auto {
    min-width: inherit !important;
}

.td-border table {
    border-collapse: collapse !important;
}

.td-border tr td {
    vertical-align: top;
    border: 1px solid #ccc !important;
}

.data-table-1.custom-data-table.td-border tr td {
    border: 1px solid #ccc !important;
}

.uib-datepicker-popup.dropdown-menu,
.uib-datepicker-popup.dropdown-menu table {
    max-width: 240px;
}

    .uib-datepicker-popup.dropdown-menu table th, .uib-datepicker-popup.dropdown-menu table td {
        min-width: inherit !important;
    }


.uib-datepicker-popup {
    z-index: 1111 !important;
}

.custom-pop-bg {
    background: rgba(0, 0, 0, 0.5);
}

.date-table {
    border-collapse: collapse;
    table-layout: fixed;
}

    .date-table tr:first-child td {
        border-top: 0;
    }

    .date-table tr:last-child td {
        border-bottom: 0;
    }

    .date-table tr td:first-child {
        border-left: 0;
    }

    .date-table tr td:last-child {
        border-right: 0;
    }

.form-sub-title-inline {
    display: flex;
    align-content: center;
    justify-content: space-between !important;
}
/* ------------------------------------------------------------------------------------------------
   Irregular Expenditure (IE) module. Classes prefixed ie- from the Screen Designs document;
   they reuse the theme colours (--primary-color, --secondary-color, #fed700, #231f20). New names only:
   no existing rule is changed. Status badge colours: st-new, st-alleged, st-reported, st-recorded,
   st-confirmed, st-noncomp, st-notirr.
   ------------------------------------------------------------------------------------------------ */
/* While an IE partial is shown (ie-page, set by ie.routes.js) the page scrolls as a whole: the content block and the
   form area lose their own fixed-height scroll regions. Dialogs keep theirs. */
.ie-page .form-block-3 { height: auto; overflow-y: visible; }
.ie-page .pop-add-form { max-height: none; min-height: 0; overflow-y: visible; }
.ie-page .modal-content .pop-add-form { max-height: calc(100vh - 145px); overflow-y: auto; }
/* Linked-group notices on the workspace tabs: blue, so they read differently from the amber lock and information notices */
.ie-linked { background: #e3f2fd; border: 1px solid #64b5f6; color: #0d47a1; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
.ie-linked .ie-link { color: #0d47a1; font-weight: 500; text-decoration: underline; }
/* The members of a linked group on the Details tab: a box of fixed height that scrolls, with the heading row kept in view */
.ie-group-scroll { max-height: 320px; overflow-y: auto; margin-bottom: 10px; }
.ie-group-scroll .ie-note-table { margin-bottom: 0; }
.ie-group-scroll .ie-note-table thead th { position: sticky; top: 0; z-index: 1; }

.ie-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.ie-badge.st-new { background: #eceff1; color: #455a64; border-color: #cfd8dc; }
.ie-badge.st-alleged { background: #fff8e1; color: #8d6e00; border-color: #fed700; }
.ie-badge.st-reported { background: #e3f2fd; color: #0d47a1; border-color: #90caf9; }
.ie-badge.st-recorded { background: #fff3e0; color: #e65100; border-color: #ffb74d; }
.ie-badge.st-confirmed { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }
.ie-badge.st-noncomp { background: #f3e5f5; color: #6a1b9a; border-color: #ce93d8; }
.ie-badge.st-notirr { background: #e8f5e9; color: #007236; border-color: #a5d6a7; }
/* Financial Years (S-23): open and closed years */
.ie-badge.st-open { background: #e8f5e9; color: #007236; border-color: #a5d6a7; }
.ie-badge.st-closed { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }

.ie-summary-bar { display: flex; gap: 12px; margin: 0 0 15px 0; }
.ie-summary-tile { flex: 1; background: #fff; border-left: 4px solid var(--primary-color); padding: 10px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.ie-summary-tile .v { font-size: 20px; font-weight: 500; color: #231f20; }
.ie-summary-tile .l { font-size: 12px; text-transform: uppercase; color: #6d6e71; }
.ie-summary-tile.amber { border-left-color: #fed700; }
.ie-summary-tile.red { border-left-color: #c62828; }
.ie-summary-tile.grey { border-left-color: #939598; }
.ie-summary-tile.blue { border-left-color: #1565c0; }

.ie-light { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.ie-light.g { background: #009640; }
.ie-light.a { background: #fed700; }
.ie-light.r { background: #c62828; }

.ie-note-table th.amount, .ie-note-table td.amount { text-align: right; width: 190px; }
.ie-note-table tr.head th { background: var(--secondary-color); color: #fff; }
.ie-note-table tr.sub th { background: #e6e7e8; }
.ie-note-table tr.total th { background: #f1f1f1; border-top: 2px solid #231f20; }

.ie-check-table tr.cat td { background: #e6e7e8; font-weight: 500; }
.ie-check-table tr.cat.suggested td { background: #ffebee; color: #b71c1c; }
.ie-check-table tr.item.suggested td { color: #b71c1c; }
.ie-check-table td.c { text-align: center; width: 90px; }

.ie-q { background: #fff; border: 1px solid #d1d3d4; border-left: 4px solid var(--primary-color); padding: 12px 15px; margin-bottom: 10px; }
.ie-q.done { border-left-color: #939598; background: #fafafa; }
.ie-q.current { border-left-color: #fed700; box-shadow: 0 0 0 2px rgba(254, 215, 0, .45); background: #fffef5; }
.ie-q .n { font-size: 12px; color: #6d6e71; text-transform: uppercase; }
.ie-q .t { font-weight: 500; margin: 2px 0 8px 0; }
.ie-q .kind { float: right; font-size: 11px; text-transform: uppercase; color: #6d6e71; border: 1px solid #d1d3d4; border-radius: 10px; padding: 0 8px; margin-left: 10px; background: #fff; }
.ie-evidence { float: right; font-size: 12px; color: var(--primary-color); }
.ie-locked { background: #fff8e1; border: 1px solid #fed700; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }

.ie-msg { border-bottom: 1px solid #e6e7e8; padding: 8px 0; }
.ie-msg .who { font-weight: 500; }
.ie-msg .when { float: right; font-size: 12px; color: #6d6e71; }

.ie-progress { background: #e6e7e8; height: 16px; border-radius: 8px; overflow: hidden; min-width: 90px; }
.ie-progress > div { height: 100%; background: var(--primary-color); color: #fff; font-size: 11px; text-align: center; line-height: 16px; }

.ie-yn { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.ie-yn label { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 18px 5px 12px; border: 1px solid #bcbec0; border-radius: 3px; background: #fff; font-weight: 500; min-width: 92px; cursor: pointer; }
.ie-yn label.on { border-color: var(--primary-color); background: #e8f5e9; color: #007236; }
.ie-yn label.on.no { border-color: #c62828; background: #ffebee; color: #b71c1c; }
.ie-yn input { margin: 0; width: 16px; height: 16px; }
.ie-yn .hint { font-size: 12px; color: #6d6e71; margin-left: 8px; }
.ie-saved { font-size: 12px; color: #007236; margin-left: 10px; }

.ie-remaining td, .ie-remaining th { padding: 5px 10px !important; font-size: 13px; }
.ie-remaining td { color: #6d6e71; }
.ie-outcome { border: 1px solid #a5d6a7; background: #f3f8f4; padding: 12px 15px; margin: 4px 0 10px 0; }
.ie-outcome .h { font-weight: 500; color: #007236; margin-bottom: 4px; }
.ie-collapsed { background: #fafafa; border: 1px solid #d1d3d4; border-left: 4px solid #939598; padding: 9px 15px; margin-bottom: 10px; color: #3d3d3d; }

/* Determination tab (S-04): the head row (title, status, progress), the fold bar of answered questions, the action bar and the determination status badges */
.ie-det-head { display: flex; align-items: flex-end; gap: 24px; margin: 0 0 12px 0; }
.ie-det-title { font-size: 17px; font-weight: 500; color: var(--primary-color); text-transform: uppercase; flex: 1; }
.ie-det-status .l { font-size: 12px; font-weight: 500; color: #231f20; margin-bottom: 3px; }
.ie-det-progress { width: 320px; }
.ie-fold { display: flex; align-items: center; gap: 14px; background: #fafafa; border: 1px solid #d1d3d4; border-left: 4px solid #939598; padding: 9px 15px; margin-bottom: 10px; color: #3d3d3d; }
.ie-fold .ie-link { white-space: nowrap; }
.ie-det-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; background: #f1f1f1; border: 1px solid #d1d3d4; padding: 12px; margin: 12px 0 8px 0; }
.ie-det-actions .btn { margin: 0; }
.ie-det-actions .btn.ie-det-pdf, .ie-det-actions .btn.ie-det-pdf:hover, .ie-det-actions .btn.ie-det-pdf:focus, .popup-form-button .btn.ie-det-pdf, .popup-form-button .btn.ie-det-pdf:hover, .popup-form-button .btn.ie-det-pdf:focus { background: #231f20; border-color: #231f20; color: #fff; }
.ie-badge.det-underdet { background: #e3f2fd; color: #0d47a1; border-color: #90caf9; }
.ie-badge.det-detconf { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }
.ie-badge.det-incorrect { background: #e8f5e9; color: #007236; border-color: #a5d6a7; }
.ie-badge.inv-underinv { background: #f3e5f5; color: #6a1b9a; border-color: #ce93d8; }
.ie-badge.inv-invcomp { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }

/* Conduct Assessment (S-21, S-22): reference rows, the checklist question tools (information, notes, evidence) and their panels, undesired answers */
.ie-ref-row { margin-bottom: 8px; align-items: center; }
.ie-q.undesired { border-left-color: #c62828; }
.ie-q-tools { display: flex; gap: 18px; margin-top: 8px; font-size: 12px; }
.ie-q-panel { background: #fafafa; border: 1px solid #e6e7e8; padding: 10px 12px; margin-top: 8px; }
.ie-q-panel.ie-info { display: grid; grid-template-columns: 180px 1fr; gap: 4px 12px; margin-bottom: 0; }
.ie-q-panel.ie-info dt, .ie-q-panel.ie-info dd { margin: 0; }
.ie-check-cat { margin-bottom: 14px; }

/* Ledger tab: the year table (FR-G-09) and the journal */
.ie-ledger-year { margin-bottom: 18px; }
.ie-ledger-table th.amount, .ie-ledger-table td.amount { width: 12.5%; }
.ie-ledger-table th.bal, .ie-ledger-table td.bal { border-left: 2px solid #231f20; font-weight: 500; }
.ie-ledger-table tr.sub td { font-style: italic; color: #6d6e71; }
.ie-ledger-table tr.total td { font-weight: 600; background: #f1f1f1; border-top: 2px solid #231f20; text-transform: uppercase; }
.ie-ledger-table tr.total td.amount { text-transform: none; }
.ie-class-row { font-size: 13px; color: #3d3d3d; margin: -8px 0 12px 0; }
.ie-entries-table th.amount, .ie-entries-table td.amount { width: 120px; }

/* IE set-up screens: tabs, read-only values, the two-list picker of the Divisions screen, hints */
.ie-tabs { margin-bottom: 15px; }
.ie-tabs .nav-link { color: #3d3d3d; cursor: pointer; }
.ie-tabs .nav-link.active { color: var(--primary-color); font-weight: 500; }
.ie-readonly { padding: 7px 0; min-height: 34px; color: #231f20; }
.ie-list-head { background: #e6e7e8; padding: 7px 12px; font-weight: 500; text-transform: uppercase; font-size: 12px; }
.ie-list { height: auto !important; min-height: 260px; border-radius: 0; }
.ie-list option { padding: 5px 8px; }
.ie-list-buttons { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ie-list-buttons .btn { min-width: 48px; margin: 0; }
.ie-link { color: var(--primary-color); }
.ie-hint { margin: 10px 0 0 0; font-size: 12px; color: #6d6e71; }
/* Centred icon columns: Kendo pads header cells unevenly (room for the filter icon on the right), so the header text would sit right of the icon */
.k-grid-header th.ie-centre, .k-grid-header th.ie-centre > .k-link { padding-left: 8px; padding-right: 8px; text-align: center; }
/* Row-filter clear button: the theme makes it a fixed 36px square (.k-button-icon), which overhangs the platform's 30px inputs; size it to the input beside it (it is positioned absolutely inside the cell's span) */
.custom-grid .k-filtercell > span > .k-button { height: 100%; width: auto; min-width: 0; padding: 0 7px; }
/* Row-filter text box: the platform's input override leaves no room for the autocomplete's clear icon (absolute, 10px from the right edge), so typed text ran underneath it; border-box keeps the 100% width inside the box once padding is added */
.custom-grid .k-filtercell .k-autocomplete .k-input { box-sizing: border-box; padding-right: 28px; }
/* Title-bar button of the IE screens: the icon box spans from the button's edge to the separator line the platform draws 30px in (icon centred in it), and the text starts 10px after the line, the same as the padding at the end of the button */
.page-title-bar .btn-2.ie-title-btn i { display: inline-block; width: 30px; margin: 0 10px 0 -10px; text-align: center; }
/* Role Rights (S-26): the catalogue as area cards flowing over three columns; a card never splits across columns */
.ie-pill { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; border: 1px solid #d1d3d4; background: #f1f1f1; color: #3d3d3d; margin-left: 6px; white-space: nowrap; }
.ie-pill.ok { background: #e8f5e9; border-color: #a5d6a7; color: #007236; }
/* Financial Years (S-23): the small Current marker beside the year name, and date inputs whose picker button matches the platform's 34px input */
.ie-pill.sm { padding: 0 8px; font-size: 11px; line-height: 18px; }
.ie-nowrap { white-space: nowrap; }
/* Icon cells (ie-icons) in a grid's PDF export: Kendo's PDF writer reads only "bold" or 700 as bold, so Font Awesome's solid icons (weight 900) were drawn from the regular face, which lacks them, and came out blank; at 700 the browser still shows the solid face and the PDF embeds it */
.k-pdf-export .ie-icons .fas { font-weight: 700; }
.ie-date .input-group-append .btn { height: 34px; padding: 0 10px; font-size: 14px; line-height: 32px; }
/* Legislative Universe (S-24): the information view's label/value rows, text with its line breaks, and the wide import-preview dialog (this Bootstrap has no modal-xl) */
.ie-info dt { color: #6d6e71; font-weight: 500; }
.ie-info dd { color: #231f20; }
.ie-prewrap { white-space: pre-wrap; }
@media (min-width: 1200px) { .modal-dialog.ie-modal-xl { max-width: 1140px; } }
.ie-rights-columns { column-count: 3; column-gap: 24px; margin-top: 4px; }
@media (max-width: 1200px) { .ie-rights-columns { column-count: 2; } }
@media (max-width: 768px) { .ie-rights-columns { column-count: 1; } }
.ie-rights-group { display: inline-block; width: 100%; break-inside: avoid; page-break-inside: avoid; border: 1px solid #d1d3d4; background: #fff; margin: 0 0 16px 0; }
.ie-rights-group .head { display: flex; align-items: center; background: #e6e7e8; padding: 8px 12px; font-weight: 500; text-transform: uppercase; font-size: 12px; color: #231f20; }
.ie-rights-group .head .n { margin-left: auto; font-weight: 400; text-transform: none; color: #6d6e71; }
.ie-rights-group .head input, .ie-rights-row input { margin: 0 10px 0 0; width: 15px; height: 15px; cursor: pointer; flex: none; }
.ie-rights-row { display: flex; align-items: center; padding: 7px 12px; border-top: 1px solid #e6e7e8; font-size: 13px; }
.ie-rights-row.on { background: #f3f8f4; }
.ie-rights-row label { margin: 0; font-weight: 400; cursor: pointer; }
.ie-rights-row .code { margin-left: auto; padding-left: 10px; font-size: 11px; color: #6d6e71; white-space: nowrap; }
/* Documents panel (ieDocuments component): caption bar with the upload button and the list */
.ie-docs-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ie-docs-bar .ie-list-head { flex: 1; }
.ie-docs-bar input[type=file] { display: none; }
.ie-docs-size { text-align: right; width: 90px; white-space: nowrap; }
.ie-docs-actions { width: 70px; text-align: center; white-space: nowrap; }
.ie-docs-actions a { margin: 0 5px; }
.ie-docs-actions a.dl { color: var(--primary-color); }
.ie-docs-actions a.rm { color: #c62828; }
/* Document viewer dialog (ieDocumentViewer.html): wide dialog, the PDF frame or the scaled image fills it */
.modal.ie-doc-viewer .modal-dialog { max-width: 90vw; margin: 20px auto; }
.modal.ie-doc-viewer .modal-title .ie-hint { margin-left: 8px; font-weight: 400; }
.ie-doc-viewer-body { padding: 0; background: #525659; }
.ie-doc-viewer-body iframe { display: block; width: 100%; height: calc(100vh - 190px); border: 0; }
.ie-doc-viewer-image { display: flex; justify-content: center; align-items: center; min-height: 300px; max-height: calc(100vh - 190px); overflow: auto; padding: 12px; }
.ie-doc-viewer-image img { max-width: 100%; max-height: calc(100vh - 214px); }
/* Covered payments (ieCoveredPayments.html): the pager under the table */
.ie-pager { display: flex; justify-content: space-between; align-items: center; margin: -6px 0 12px; font-size: 12px; color: #3d3d3d; }
.ie-pager .ie-link { margin: 0 6px; }
.ie-pager .ie-link.disabled { color: #a7a9ac; pointer-events: none; }
.ie-pager-page { margin: 0 6px; }
/* Checklist summary of results (ConductAssessment.html): label column and value column like the reference declaration form */
.ie-summary-form { margin-top: 18px; border-top: 2px solid #231f20; padding-top: 12px; }
.ie-summary-form .row { margin-bottom: 8px; align-items: center; }
.ie-summary-form .form-control[readonly] { background: #f1f1f1; }
.ie-summary-form .form-control.danger { color: #c62828; font-weight: 600; }
.ie-summary-form .form-control.warn { color: #8d6e00; font-weight: 600; }
.ie-summary-form .form-control.good { color: #007236; font-weight: 600; }
.ie-summary-form label { margin: 0; font-weight: 500; }

/* Disclosure Note (S-15, S-16): the part headings with their letter, the discussion box under each part, the year pills and the drill-down strip */
.ie-dn-filters .ie-dn-pills { padding-top: 32px; }
.ie-dn-part { margin-bottom: 14px; }
.ie-dn-title { font-weight: 500; font-size: 14px; margin: 6px 0 8px 0; }
.ie-dn-letter { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; background: #231f20; color: #fff; border-radius: 3px; font-weight: 600; margin-right: 6px; }
.ie-dn-part .ie-note-table { margin-bottom: 6px; }
.ie-dn-part .ie-note-table td, .ie-dn-part .ie-note-table th { padding: 5px 8px; }
.ie-dn-part .ie-note-table th.amount, .ie-dn-part .ie-note-table td.amount { width: 150px; }
.ie-dn-part .ie-note-table td.amount .ie-link { color: #007236; }
.ie-dn-discussion { border: 1px dashed #d1d3d4; padding: 7px 12px; font-size: 13px; background: #fafafa; }
.ie-dn-discussion .l { font-size: 11px; text-transform: uppercase; color: #6d6e71; margin-right: 8px; }
.ie-dn-discussion .t.none { color: #939598; font-style: italic; }
.ie-dn-discussion .e { float: right; }
.ie-dn-crumb { color: #6d6e71; font-size: 13px; margin-bottom: 10px; }
.ie-dn-crumb strong { color: #231f20; }
.ie-dn-strip { display: flex; gap: 24px; align-items: center; padding: 8px 14px; margin-bottom: 10px; border-left: 4px solid #009640; background: #e8f5e9; font-size: 13px; }
.ie-dn-strip.bad { border-left-color: #c62828; background: #ffebee; }
.ie-dn-strip .s { font-weight: 600; color: #007236; }
.ie-dn-strip.bad .s { color: #b71c1c; }
.ie-dn-strip .l { font-size: 11px; text-transform: uppercase; color: #6d6e71; margin-right: 6px; }
.ie-dn-strip .r { margin-left: auto; }
.ie-dn-part .ie-note-table tr.sub td { background: #e6e7e8; font-weight: 500; text-transform: uppercase; font-size: 12px; }
.ie-dn-part .ie-note-table tr.total td { background: #f1f1f1; border-top: 2px solid #231f20; font-weight: 600; }
/* IE Dashboard (S-18): white panels, the pipeline table, the work-list counters, the tile links and the chart boxes */
.ie-dash-panel { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); padding: 0 15px 14px 15px; margin-bottom: 15px; }
.ie-dash-title { font-size: 16px; text-transform: uppercase; color: #231f20; padding: 10px 0 8px 0; border-bottom: 1px solid #e6e7e8; margin-bottom: 10px; }
.ie-dash-title .act { float: right; font-size: 13px; text-transform: none; padding-top: 2px; }
.ie-dash-note { margin: -8px 0 12px 0; }
.ie-summary-tile .s { font-size: 12px; color: #6d6e71; margin-top: 2px; }
.ie-summary-tile.green { border-left-color: #009640; }
/* A tile that picks what the grid below shows (Checklist Report) is outlined while its selection is on. */
.ie-summary-tile.on { box-shadow: 0 0 0 2px var(--primary-color); }
.ie-summary-tile .ie-dash-tile-link { color: #231f20; }
.ie-summary-tile .ie-dash-tile-link:hover { color: var(--primary-color); text-decoration: none; }
.ie-pipe { width: 100%; margin: 0; }
.ie-pipe th { background: #e6e7e8; color: #231f20; font-weight: 400; text-transform: uppercase; font-size: 12px; padding: 6px 10px; border: 1px solid #d1d3d4; text-align: left; }
.ie-pipe td { padding: 6px 10px; border: 1px solid #d1d3d4; }
.ie-pipe td.r, .ie-pipe th.r { text-align: right; white-space: nowrap; }
.ie-pipe td.sub { padding-left: 28px; }
.ie-pipe tr.tot td { background: #f1f1f1; font-weight: 500; border-top: 2px solid #231f20; }
.ie-count { display: flex; gap: 12px; }
.ie-count a, .ie-count .c { flex: 1; display: block; border: 1px solid #d1d3d4; border-left: 4px solid var(--primary-color); padding: 8px 12px; color: #231f20; }
.ie-count a:hover { background: #f8f8f8; text-decoration: none; color: #231f20; }
.ie-count .n { display: block; font-size: 20px; font-weight: 500; color: var(--primary-color); }
.ie-count .l { display: block; font-size: 12px; text-transform: uppercase; color: #6d6e71; }
.ie-dash-chart-panel { padding-top: 12px; }
.ie-dash-chart { min-height: 10px; }
.ie-dash-empty { color: #6d6e71; padding: 24px 0; text-align: center; }
.ie-dash-empty i { font-size: 28px; margin-bottom: 8px; }
.ie-dash-msg .ie-dash-empty { padding: 60px 0; }
.ie-msg-list { max-height: 420px; overflow-y: auto; }
.ie-msg .text { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.ie-msg.own .who { color: var(--primary-color); }
.ie-msg-compose { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.ie-msg-compose textarea { flex: 1; resize: vertical; }
.ie-msg-record { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ie-msg-record .input-group { width: 170px; }

.ie-check-list { list-style: none; padding: 0; margin: 4px 0 12px; border: 1px solid #d1d3d4; }
.ie-check-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #e6e7e8; font-size: 13px; }
.ie-check-list li:last-child { border-bottom: 0; }
.ie-check-list li.ok i { color: #2e7d32; }
.ie-check-list li.warn { background: #fff8e1; }
.ie-check-list li.warn i { color: #f9a825; }
.ie-check-list li.fail { background: #ffebee; }
.ie-check-list li.fail i { color: #b71c1c; }
.ie-check-list .ie-check-detail { flex-basis: 100%; padding-left: 22px; color: #6d6e71; }

/* IE Division Summary (S-17): the traffic-light legend, the grouped column headings and the consolidated footer line */
.ie-legend { display: inline-flex; align-items: center; background: #fff; border: 1px solid #d1d3d4; padding: 6px 14px; font-size: 13px; height: 29.5px; box-sizing: content-box; }
.ie-legend .t { color: #6d6e71; margin-right: 14px; }
.ie-legend .i { margin-right: 18px; white-space: nowrap; }
.ie-legend .i:last-child { margin-right: 0; }
.ie-division-summary .k-grid-header th.ie-grp { text-align: center; border-bottom: 1px solid #a7a9ac; }
.ie-division-summary .k-grid-header th.ie-grp > .k-link { text-align: center; }
.ie-division-summary .k-footer-template td { font-weight: 500; background: #f1f1f1; border-top: 2px solid #231f20; white-space: nowrap; }
.ie-division-summary .k-footer-template td.text-right, .ie-division-summary .k-footer-template td:not(:first-child) { text-align: right; }
.ie-division-summary td .ie-light { margin-right: 6px; }