/* CSS Document */

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

@import url('https://fonts.googleapis.com/css2?family=Krub:wght@200;300;400;500;600;700&display=swap'); /*  font-family: 'Krub', sans-serif;   */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800'); /*  font-family: 'Montserrat', sans-serif;  */
@import url('https://fonts.googleapis.com/css2?family=Krub:wght@200;300;400;500;600;700&display=swap'); /* font-family: 'Krub', sans-serif;  */

/* For Navigation*/
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap'); /* font-family: 'Philosopher', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Amaranth:wght@400;700&display=swap'); /*  font-family: 'Amaranth', sans-serif;  */
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap'); /*   font-family: 'Viga', sans-serif;   */

@font-face {
    font-family: MuseoSans;
    src: url('../fonts/MuseoSans_500.woff');
}


:root {
    --primary-color: #1e90ff;
    --pure-white: #ffffff;
}


html {
    scroll-behavior: smooth;
    background: #FFFFFF;
}

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    background: var(--pure-white);
    font-family: MuseoSans;
}

a {
    color: #333;
    font-weight: 400;
}

    a:hover {
        text-decoration: none;
        color: #333;
    }

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

header {
    position: fixed;
    width: 100%;
    padding: 0 15px;
    box-shadow: 0 0 5px #aaaaaa;
    z-index: 99;
    height: 70px;
    background: url(../images/header-bg.png);
    background-size: 100%;
}

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

.head-mask {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: transparent;
}

.heaer-logo {
    height: 60px;
    float: left;
    overflow: hidden;
    padding: 3px 5px 5px 0px;
    font-weight: 600;
    margin-right: 30px;
}

    .heaer-logo img {
        max-width: 100%;
    }

/*****************  Fav menu  *********************/

.fav-menu {
    float: left;
    position: relative;
}

    .fav-menu .fav-root-item {
        float: left;
        color: #000000;
        cursor: pointer;
        font-weight: 600;
        position: relative;
        padding: 8px 0px;
    }

        .fav-menu .fav-root-item.has-parent {
        }

        .fav-menu .fav-root-item > span {
            float: left;
            width: 100%;
            text-transform: uppercase;
            padding: 3px 20px 3px 0;
            border-right: 2px solid rgba(255,255,255,0.2);
            position: relative;
        }

        .fav-menu .fav-root-item span i.fa-star {
            background: #F62A00;
            padding: 8px;
            color: #fff;
            border-radius: 4px;
        }

            .fav-menu .fav-root-item span i.fa-star:hover {
                background: #dc8831;
            }

        .fav-menu .fav-root-item:last-child > span {
            border-right: 2px solid rgba(255,255,255,0);
        }

        .fav-menu .fav-root-item.has-parent > span::after, .fav-menu .fav-root-item ul li.has-child span::after {
            position: absolute;
            content: "\f107";
            font-family: "Font Awesome 5 Free";
            right: 15px;
            top: 20px;
            opacity: 0.5;
            font-weight: 600;
        }



        .fav-menu .fav-root-item ul li.has-child span::after {
            content: "\f105";
            top: 8px;
        }

        .fav-menu .fav-root-item ul {
            position: absolute;
            display: none;
            padding: 0;
            margin: 0;
            list-style: none;
            background: #FFF;
            top: 53px;
            right: 0;
            min-width: 200px;
            box-shadow: 0 2px 2px #CCC;
            border-top: 5px solid #1E656D;
        }

        .fav-menu .fav-root-item.active ul {
            display: block;
        }

            .fav-menu .fav-root-item.active ul li a {
                padding: 6px 15px;
                display: block;
                border-bottom: 1px solid #eee;
                transition: all 0.6s ease;
            }

                .fav-menu .fav-root-item.active ul li a:hover {
                    background: #dddddd;
                }

.fav-menu-items {
    position: absolute;
    top: 61px;
    left: 0;
    display: none;
    min-width: 250px;
    background: #FFF;
    box-shadow: 0 0 5px rgba(29,62,222,0.3);
    /*overflow: hidden;*/
}

.fav-menu .fav-root-item.active .fav-menu-items {
    display: block;
}

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

    .fav-menu-items ul li {
        margin: 0;
        padding: 0;
        width: 100%;
        float: left;
        position: relative;
    }

        .fav-menu-items ul li a {
            margin: 0;
            padding: 6px 15px;
            width: 100%;
            display: block;
            color: #F62A00;
            border-bottom: 1px solid rgba(29,62,222,0.05);
            font-weight: 400;
            font-size: 14px;
            transition: all 0.6s ease;
            position: relative;
        }

            .fav-menu-items ul li:hover a, .fav-menu-items ul li a:hover {
                background: #F1F1F1;
                color: #F62A00;
            }


        .fav-menu-items ul li ul {
            position: absolute;
            width: 250px;
            top: 0;
            right: -250px;
            display: none;
            list-style: none;
            padding: 0;
            margin: 0;
            background: #F1F1F1;
            box-shadow: 2px 2px 2px rgba(29,62,222,0.3);
        }

    .fav-menu-items ul > li:hover > ul {
        display: block;
    }

    .fav-menu-items ul ul li a:hover {
        background: #FFF;
    }

    .fav-menu-items ul ul ul {
        display: none;
    }

    .fav-menu-items ul > ul > li:hover > ul {
        display: block;
    }

.mega-menu {
    float: left;
    min-width: 800px;
}

    .mega-menu .nav-tabs {
        float: left;
        width: 250px;
    }


.tooltip-action {
    float: left;
    width: 100%;
    padding: 5px 10px;
    font-size: 14px !important;
}





/******   Header search   ******/
.header-search {
    float: left;
    padding: 6px 0px 10px 10px;
}

.header-icon {
    float: left;
    font-size: 20px;
    padding: 5px 10px;
    margin-right: 20px;
    cursor: pointer;
    color: #1E656D;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    outline: none;
    border: none;
}

    .header-icon:active, .header-icon:focus {
        outline: none;
        border: none;
    }

.header-search-dropdown {
    padding: 10px;
    width: 250px;
}

    .header-search-dropdown .form-control {
        float: left;
        width: calc(100% - 34px);
        border-right: 0;
    }

        .header-search-dropdown .form-control:focus {
            box-shadow: none;
        }

.header-search-btn {
    float: left;
    width: 34px;
    border: 1px solid #CCC;
    padding: 6px 2px;
    cursor: pointer;
    outline: none !important;
}






/*   Header Notifications   */
.header-noti {
    float: left;
    /*padding: 17px 10px 10px 10px;*/
    position: relative;
}

.noti-trigger {
    float: left;
    font-size: 20px;
    padding: 5px 10px;
    margin-right: 20px;
    cursor: pointer;
    color: #1E656D;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-top: 5px;
}

.notification i {
    font-size: 14px;
    color: #FFF;
}

.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: #F62A00;
}

.green-bg {
    background: #62B871;
}

.noti-list {
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.noti-title {
    position: fixed;
    float: left;
    width: 100%;
    font-weight: 400;
    padding: 6px 10px 6px 10px;
    font-size: 16px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(to bottom, #1E656D 40%, #2b8690);
    color: #FFF;
}

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

    .noti-list ul li:first-child {
        height: 40px;
    }

    .noti-list ul li {
        padding: 0;
    }

        .noti-list ul li a {
            float: left;
            width: 100%;
            border-bottom: 1px solid #e9ecef;
            display: block;
            text-decoration: none;
            padding: 9px 0px;
            color: #444;
        }

            .noti-list ul li a:hover {
                background: #F9F9F9;
            }

            .noti-list ul li a span {
                font-size: 12px;
            }

.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: #62b871;
    background: none;
    border: none;
}

.top-notify-seen {
    float: left;
    width: 100%;
}

    .top-notify-seen .btn.btn-circle {
        float: left;
        width: 40px;
    }

.noti-contnet {
    float: right;
    display: inline-block;
    width: calc(100% - 55px);
    padding-left: 10px;
    vertical-align: middle;
}

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

.noti-footer {
    float: left;
    width: 100%;
    font-weight: 600;
    padding: 15px 10px 10px 10px;
    font-size: 14px;
    border-bottom: 0px solid #e9ecef !important;
    text-align: center;
}



/*   Header Logout  */
.header-logout {
    float: left;
    font-size: 20px;
    padding: 5px 10px;
    margin-right: 20px;
    cursor: pointer;
    color: #1E656D;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-top: 5px;
    z-index: 99;
    position: relative;
}

.header-link {
    float: left;
    font-size: 20px;
    padding: 5px 10px;
    margin-right: 20px;
    cursor: pointer;
    color: #1E656D;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-top: 5px;
    z-index: 99;
    position: relative;
}
/*   Header Chat  */
.header-chat {
    float: left;
    font-size: 20px;
    padding: 5px 10px;
    margin-right: 20px;
    cursor: pointer;
    color: #1E656D;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-top: 5px;
    z-index: 99;
    position: relative;
}

    .header-chat a {
        color: #1E656D;
    }

/*   Header zoom   */

.header-zoom {
    float: left;
    font-size: 20px;
    padding: 5px 10px;
    margin-right: 20px;
    cursor: pointer;
    color: #1E656D;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-top: 5px;
    z-index: 99;
    position: relative;
}

.system-title {
    float: left;
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;
    padding: 3px 0 5px 16px;
}

/*   Header TODO   */
.header-todo {
    float: left;
    padding: 17px 10px 10px 10px;
    position: relative;
    color: #1E656D;
    cursor: pointer;
}

.todo-section {
    position: fixed;
    top: 0;
    right: -440px;
    width: 400px;
    height: 100vh;
    box-shadow: 0 0 3px #aaa;
    z-index: 99;
    transition: all 0.6s ease;
}

    .todo-section.active {
        right: 0px;
    }

.todo-mask {
    position: fixed;
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease;
}

.todo-section.active .todo-mask {
    visibility: visible;
    opacity: 1;
}

.todo-section-inner {
    width: 100%;
    float: left;
    padding: 10px;
    position: relative;
    background: #FFF;
    z-index: 12;
}

.todo-section-todo {
    width: 100%;
    float: left;
    min-height: 400px;
    margin-bottom: 20px;
    padding: 15px 0;
    height: calc(100vh - 47px);
    overflow-y: auto;
}

.todo-section-announsments {
    background: #FFF;
}

.todo-section-title {
    float: left;
    width: 100%;
    background: #1E656D;
    padding: 6px 10px;
    font-size: 16px;
    color: #FFF;
    font-weight: 400;
    text-transform: uppercase;
}

    .todo-section-title .title-text {
        float: left;
    }

    .todo-section-title .todo-add {
        float: right;
    }

        .todo-section-title .todo-add span {
            cursor: pointer;
        }

.todo-form {
    position: absolute;
    width: 250px;
    top: 50px;
    right: 15px;
    padding: 15px;
    background: #FFF;
    box-shadow: 0 0 3px #aaa;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease;
    z-index: 20;
}

    .todo-form.active {
        visibility: visible;
        opacity: 1;
    }

.todo-close {
    position: absolute;
    left: -29px;
    top: 10px;
    background: #FFF;
    padding: 5px 10px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 4px 0 0 4px;
    color: #F00;
    cursor: pointer;
}

.todo-item {
    float: left;
    width: 100%;
    background: #f9f9f9;
    padding: 10px;
    margin: 5px 0;
    position: relative;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.todo-delete {
    position: absolute;
    right: 3px;
    top: 0px;
    padding: 5px 5px;
    font-size: 14px;
    font-weight: 400;
    color: #F00;
    cursor: pointer;
}

.todo-item-title {
    float: left;
    width: calc(100% - 30px);
    font-weight: 400;
    color: #1E656D;
    margin-bottom: 10px;
}

.todo-item-date, .todo-item-priority, .todo-item-status {
    float: left;
    width: 33.3336%;
}

.todo-item-date {
    float: left;
    width: 33.3336%;
}

.todo-item-priority {
}

.todo-item-status {
}

    .todo-item-status .pending {
        color: #ff0000;
    }

    .todo-item-status .progress {
        color: #c89900;
    }

    .todo-item-status .completed {
        color: #01aa1e;
    }

.todo-item span {
    width: 100%;
    display: block;
    padding: 5px 0;
}




.tab-content {
    float: left;
    width: calc(100% - 250px);
}






.header-right {
    float: right;
    padding-top: 9px;
}

.header-btns {
    float: right;
    position: relative;
    margin-right: 10px;
    /*border-left: 1px solid rgba(255,255,255,0.1);*/
}

/*.mail-trigger, .zoom-trigger, .zoom-trigger {
    float: right;
    padding: 17px 15px;
    cursor: pointer;
    position: relative;
    z-index: 30;
}

    .mail-trigger i, .zoom-trigger i {
        font-size: 16px;
        color: #FFFFFF;
    }*/


/*------------------------------- Header Profile ----------------------------------*/
.profile-thumb {
    float: left;
}

    .profile-thumb img {
        width: 34px;
        height: 34px;
        float: left;
        background: #FFF;
        /*border: 2px solid #FFF;*/
        overflow: hidden;
    }

.profile-disply {
    margin: -10px 0 0 0;
    background: #F62A00;
    text-align: center;
    padding: 20px;
}

.profile-thumb a {
    display: block;
}

.header-profile .dropdown-menu {
    border-radius: 0;
    padding: 0;
}

.profile-block {
    float: left;
    width: 250px;
    background: #FFF;
    position: relative;
}

    .profile-block::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 80px;
        top: 0;
        left: 0;
        background: #1E656D;
        z-index: 1;
    }

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

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

.profile-name {
    width: 100%;
    color: #F62A00;
    font-size: 18px;
    text-align: center;
    float: left;
    white-space: nowrap;
    padding: 4px 0 0 15px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    overflow: hidden;
}

    .profile-name h4 {
        font-size: 18px;
    }

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

.header-profile {
    float: right;
    padding: 9px 0;
    margin: 0 10px 0 0;
}

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

    .profile-actions a {
        padding: 5px 10px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        color: #666;
        background: #eee;
        font-size: 12px;
        transition: all 0.6s ease;
    }

        .profile-actions a:hover {
            text-decoration: none;
            background: #F62A00;
            color: #FFF;
        }


.logout-link {
    float: left;
    width: 100%;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: #666;
    background: #eee;
    font-size: 12px;
    text-align: center;
    transition: all 0.6s ease;
}

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

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







/*---------------------------------    Form Design    ---------------------------------*/

.form-section {
    float: left;
    width: 100%;
    margin-top: 72px;
    padding: 10px 15px;
    background: #DDDDDD;
    min-height: calc(100vh - 73px);
}


.page-title {
    float: left;
    width: 100%;
    background: #1E656D;
    font-weight: 400;
    font-size: 18px;
    /*color: #0b294c;*/
    color: #fff;
    position: relative;
    z-index: 10;
    /*height: 45px;*/
    padding: 6px 10px;
    box-shadow: 0 0 5px #aaa;
    /*border-bottom: 1px solid #b8bcbe;*/
}

.fav-icon {
    float: left;
    padding: 14px 20px;
    color: #F62A00;
    cursor: pointer;
    /*border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;*/
    position: relative;
    margin-left: -10px;
}

    .fav-icon::after {
        position: absolute;
        content: "\f005";
        font-family: "Font Awesome 5 Free";
        width: 100%;
        text-align: center;
        top: 5px;
        left: 0px;
        font-size: 16px;
    }

    .fav-icon.active::after {
        color: #F62A00;
        font-weight: 800;
    }

.page-title button {
    border: 0;
    padding-top: 2px;
}

.page-title-label {
    float: left;
    padding: 5px 15px 2px 0;
    cursor: default;
}

.title-back-btn {
    font-size: 16px;
    cursor: pointer;
    outline: none !important;
}
/*.page-title > .page-title-label {
    padding: 0px;
}*/
.title-filter {
    float: left;
}

    .title-filter .form-control {
        height: 28px !important;
    }

.page-title-controlls {
    float: right;
    white-space: nowrap;
    padding: 7px 5px 7px 15px;
}

    .page-title-controlls a.add-form {
        float: right;
        margin: 0 10px;
        background: #F62A00;
        padding: 4px 10px;
        border: 1px solid #F62A00;
        color: #FFF !important;
        text-align: center;
        font-size: 12px;
        justify-content: center;
        cursor: pointer;
        white-space: nowrap;
    }

        .page-title-controlls a.add-form.active {
            background: #F62A00;
        }

        .page-title-controlls a.add-form:hover {
            background: #F62A00;
        }

        .page-title-controlls a.add-form i {
            margin-right: 4px;
        }

.add-enquery-form {
    float: right;
    margin: 0 10px;
    background: #fff;
    padding: 4px 10px;
    border: 1px solid #116644;
    /*color: #116644 !important;*/
    text-align: center;
    font-size: 14px;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
}

    .add-enquery-form.active {
        background: #F62A00;
    }

    .add-enquery-form:hover {
        background: #116644;
        color: #fff !important;
        border: 1px solid #fff;
    }

/*.add-enquery-form i {
        margin-right: 4px;
    }*/
.refresh-btn {
    float: right;
    font-size: 14px;
    color: #116644;
    background: #fff;
    margin: 0px 0 0px 10px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #116644 !important;
    outline: none !important;
    transition: all 0.6s ease;
    height: 27px;
    width: 27px;
    padding: 1px 0 0 0;
}

    .refresh-btn:hover {
        color: #fff;
        background: #116644;
        border: 1px solid #fff !important;
    }

.status-section {
    float: left;
    width: 100%;
    /*padding: 15px 15px 0 15px;*/
    /*margin-bottom: 10px;*/
    background: #fff;
}

.status-box {
    width: 100%;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: all 0.6s ease;
    align-items: center;
    display: flex;
    margin-bottom: 10px;
    cursor: default;
}

    .status-box:hover {
        background: #f8f8f8;
    }

.status-icon-box {
    float: left;
    font-size: 16px;
    width: 40px;
    background: #1E656D;
    color: #fff;
    padding: 6px 10px;
    text-align: center;
    border-radius: 7px;
}

.status-content {
    float: right;
    width: calc(100% - 40px);
    padding: 0 10px 0px 10px;
    /*display: flex;
    align-items: center;*/
}

    .status-content .vlue-text {
        float: left;
        width: 100%;
        text-align: left;
        line-height: 15px;
        font-size: 15px;
        margin-bottom: 8px;
    }

    .status-content .value {
        float: left;
        width: 100%;
        text-align: left;
        line-height: 15px;
        font-size: 17px;
        font-weight: 600;
    }

        .status-content .value span {
            font-size: 12px;
            color: #999;
            padding-left: 10px;
        }

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

.custom-search-box {
    width: 200px;
    position: relative;
}

    .custom-search-box input {
        width: 100%;
        border: 1px solid #9DACB7;
        border-radius: 30px;
        color: #000;
        padding: 4px 10px 4px 35px;
        outline: none !important;
        letter-spacing: 0.5px;
    }

        .custom-search-box input::placeholder {
            color: #9DACB7;
        }

    .custom-search-box::after {
        content: "\f002";
        position: absolute;
        left: 8px;
        top: 4px;
        font-weight: 600;
        font-family: "Font Awesome 5 Free";
        font-size: 16px;
        color: #9DACB7;
    }

.filter-bar-left {
    float: left;
    margin-bottom: 10px;
}

.filter-bar-right {
    float: right;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .filter-bar-right button {
        margin-left: 10px;
        transition: all 0.6s ease;
    }

.filter-control {
    width: 200px;
    padding: 4px 10px;
    border-radius: 30px;
    border: 1px solid #999;
    outline: none;
    margin-left: 10px;
}

.filter-btn {
    font-size: 14px;
    padding: 4px 10px;
    color: #F62A00;
    background: #fff;
    border: 1px solid #F62A00;
    border-radius: 4px;
    cursor: pointer;
    outline: none !important;
}

    .filter-btn:hover {
        color: #fff;
        background: #F62A00;
    }

.filter-btn-1 {
    font-size: 13px;
    padding: 4px 15px;
    border: 1px solid #1E656D;
    color: #1E656D;
    background: #fff;
    border-radius: 30px;
    cursor: pointer;
    outline: none !important;
    transition: all 0.6s ease;
    white-space: nowrap;
    margin: 2px;
}

    .filter-btn-1.active {
        background: #1E656D;
        color: #fff;
    }


.day-btn {
    font-size: 13px;
    padding: 3px 10px;
    color: #000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 30px;
    cursor: pointer;
    outline: none !important;
}

    .day-btn:hover {
        background: #f8f8f8;
    }















.page-title-controlls a.search-trigger {
    float: right;
    margin: 0 10px;
    background: none;
    border: 1px solid #b8bcbe;
    padding: 4px 10px;
    color: #142127 !important;
    text-align: center;
    font-size: 12px;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
}

    .page-title-controlls a.search-trigger.active, .page-title-controlls a.search-trigger:hover {
        background: #ddd;
    }

    .page-title-controlls a.search-trigger i {
        margin-right: 4px;
    }

.page-title-links {
    float: right;
    white-space: nowrap;
    padding: 2px 0px 2px 10px;
}

    .page-title-links a {
        /*float: right;*/
        margin: 0 0px 0 5px;
        padding: 3px 10px 3px 2px;
        background: #fff;
        color: #1E656D;
        border: 1px solid #1E656D;
        text-align: center;
        font-size: 13px;
        min-width: 100px;
        border-radius: 30px;
        position: relative;
        font-weight: 500;
        letter-spacing: 0.5px;
        transition: all 0.6s ease;
        display: inline-block;
        outline: none !important;
    }

        .page-title-links a i {
            color: #fff;
            background: #1E656D;
            padding: 4px 4.5px 4px 4.8px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .page-title-links a:hover {
            background: #1E656D;
            color: #fff !important;
            border: 1px solid #fff;
        }

            .page-title-links a:hover i {
                color: #1E656D;
                background: #fff;
            }

        .page-title-links a:focus {
            box-shadow: none;
        }

    .page-title-links .btn-2 i {
        margin-right: 0;
    }

/*.page-title-links a i {
            margin-right: 5px;
            font-size: 16px;
        }*/


.selected-roles-list {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}

.selected-roles-title {
    float: left;
    width: 100%;
    padding: 5px 0 10px 0px;
    font-weight: 400;
}

.role-selected {
    float: left;
    background: #ECEFF1;
    border-radius: 20px;
    padding: 5px 15px;
    /*margin: 5px 10px;*/
    margin-right: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.roles-container {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.roles-title {
    float: left;
    width: 100%;
    padding: 5px 0 10px 0px;
    font-weight: 400;
}


.data-box-container {
    float: left;
    width: 100%;
    background: #FFF;
    padding: 15px;
    color: #000;
    border: 1px solid #ccc;
}



/* Main menu  */
.nav-menu {
    float: left;
    position: relative;
}

.menu-trigger {
    float: left;
    padding: 15px;
    font-size: 24px;
    cursor: pointer;
    margin-top: 5px;
    color: #1E656D;
}

.left-menu-trigger {
    background: rgba(255,255,255,0.5);
    padding: 5px 8px;
    border-radius: 6px;
    box-shadow: 0 0 3px #999;
}

.main-nav-menu {
    position: absolute;
    max-height: calc(100vh - 80px);
    background: #FFF;
    left: -700px;
    top: 70px;
    transition: left 0.6s;
    transition-timing-function: cubic-bezier(0.3, 0.1, 0.3);
    z-index: 100;
}

    .main-nav-menu.active {
        left: 0px;
    }

    .main-nav-menu ul {
        float: left;
        width: 250px;
        max-height: calc(100vh - 75px);
        z-index: 10;
        background: #F1F1F1;
        padding: 5px;
        margin: 0;
        list-style: none;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .main-nav-menu ul li {
            position: static;
            margin-bottom: 5px;
        }

    .main-nav-menu > ul {
        background: #F9F9F9;
        width: 200px;
        border-right: 1px solid #ccc;
    }

        .main-nav-menu > ul::after {
            z-index: 100;
            content: "";
            background: #FFF;
            position: absolute;
            height: 100%;
            width: calc(100% - 1px);
        }

    .main-nav-menu ul li a {
        z-index: 10;
        background: #FFF;
        color: #000;
        padding: 8px 10px;
        position: relative;
        width: 100%;
        display: block;
        text-align: left;
        border-radius: 6px;
        transition: all 0.6s ease;
    }

        .main-nav-menu ul li a:hover {
            background: #1E656D;
            color: #FFFFFF;
        }

    .main-nav-menu > ul > li > a {
        text-align: left;
        width: calc(100% - 1px);
    }

    .main-nav-menu ul li.active > a {
        background: #1E656D;
        color: #FFF;
    }

    .main-nav-menu > ul > li > a i {
        font-size: 14px;
        width: 25px;
        padding: 5px;
        background-color: #1E656D;
        color: #FFF;
        text-align: center;
        border-radius: 2px;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(1) > a i {
        color: #26c6da;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(2) > a i {
        color: #66bb6a;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(3) > a i {
        color: #ef5350;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(4) > a i {
        color: #ffa726;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(5) > a i {
        color: #5d36ae;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(6) > a i {
        color: #1ba90b;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(7) > a i {
        color: #7805c7;
    }


    .main-nav-menu > .level-one > ul > li:nth-child(8) > a i {
        color: #00acc1;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(9) > a i {
        color: #43a047;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(10) > a i {
        color: #e53935;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(11) > a i {
        color: #fb8c00;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(12) > a i {
        color: #7648d4;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(13) > a i {
        color: rgb(255,0,102);
    }

    .main-nav-menu > .level-one > ul > li:nth-child(14) > a i {
        color: #0caa2c;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(15) > a i {
        color: #0db0c4;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(16) > a i {
        color: #66bb6a;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(17) > a i {
        color: #ef5350;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(18) > a i {
        color: #ffa726;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(19) > a i {
        color: #5d36ae;
    }

    .main-nav-menu > .level-one > ul > li:nth-child(20) > a i {
        color: #1ba90b;
    }

    .main-nav-menu ul li a i {
        width: 20px;
        transition: all 0.6s ease;
    }

    .main-nav-menu ul li a:hover i {
        color: #FFFFFF !important;
    }

    .main-nav-menu ul li.active a i {
        color: #FFFFFF !important;
    }


    .main-nav-menu > ul > li > a span {
        width: 100%;
        margin-left: 5px;
    }

.level-one {
    background: #FFFFFF;
    padding: 5px 5px 5px 5px;
    box-shadow: 1px 0 5px #aaaaaa;
    height: 100%;
    position: relative;
    float: left;
}

.level-two,
.level-three {
    position: absolute;
    z-index: 10;
    display: none;
    top: 0;
    left: 260px;
    min-height: 100%;
    background: #FFFFFF;
    padding: 5px 5px 5px 0;
    box-shadow: 3px 0 5px #aaaaaa;
}

.level-three {
    left: 255px;
}

.main-nav-menu.active ul > li.active > .level-two,
.main-nav-menu.active ul > li.active > .level-three {
    display: block;
}

.main-nav-menu ul ul {
    width: 250px;
    max-height: calc(100vh - 75px);
    z-index: 9;
    background: #F1F1F1;
}

    .main-nav-menu ul ul:empty {
        display: none;
    }

    .main-nav-menu ul ul ul {
        left: 0;
        background: #F1F1F1;
        max-height: calc(100vh - 75px);
    }

.main-nav-menu.active ul li.active > ul {
    left: 250px;
}

.main-nav-menu.active > ul > li.active > ul {
    left: 200px;
}

.main-nav-menu ul li ul li a {
    padding: 6px 10px;
    font-size: 14px;
}

.main-nav-menu ul ul li a.has-child {
    position: relative;
}

    .main-nav-menu ul ul li a.has-child::after {
        position: absolute;
        content: "\f105";
        font-family: "Font Awesome 5 Free";
        right: 5px;
        top: 6px;
        font-weight: 600;
    }

/*.main-nav-menu ul ul::after {
    z-index: 100;
    content: "";
    background: #FFF;
    position: absolute;
    height: 100%;
    width: calc(100% - 1px);
}*/

ul.end-child.empty {
    display: none;
}
/*----------------- Scroolbar Start here ------------------------*/

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    visibility: hidden;
}

::-webkit-scrollbar-thumb {
    background: #636363;
    border-radius: 50px;
}

::-webkit-scrollbar-track {
    background: #F1F1F1;
}

/*select::-webkit-scrollbar {
    width: auto;
}

select {
    scrollbar-width: unset;
}*/
/*----------------- Scroolbar End here ------------------------*/




.form-container-full {
    float: left;
    width: 100%;
    padding: 10px;
    height: calc(100vh - 133px);
    overflow-y: auto;
    position: relative;
    z-index: 0;
}

.form-container-full-2 {
    float: left;
    width: 100%;
    height: calc(100vh - 138px);
    overflow-y: auto;
    position: relative;
    z-index: 0;
    background: #fff;
    padding: 15px;
    box-shadow: 0 0 3px #999;
    border-left: 1px solid #e1e1e1;
}

.form-container-full-3 {
    float: left;
    width: 100%;
    /*height: calc(100vh - 103px);
    overflow-y: auto;
    overflow-x: hidden;*/
    position: relative;
    z-index: 0;
}

.form-container-full-4 {
    float: left;
    width: 100%;
    padding: 30px;
    z-index: 0;
}

.form-body {
    float: left;
    width: 100%;
}

.form-container {
    float: left;
    width: calc(100% - 0px);
    height: calc(100vh - 110px);
    padding: 15px;
    transition: all 0.6s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

    .form-container.active {
        width: calc(100% - 300px);
    }

.form-filters {
    float: right;
    width: 0px;
    padding: 15px 0px;
    background: #ddd;
    height: calc(100vh - 111px);
    position: relative;
    box-shadow: 0 0 5px #999;
    overflow: hidden;
    transition: all 0.6s ease;
}

    .form-filters.active {
        width: 300px;
        padding: 15px 15px;
    }

.form-filter-title {
    font-size: 18px;
    font-weight: 600;
    padding: 0px 10px 5px 10px;
    border-bottom: 1px solid rgba(0, 52, 113, 0.19);
    margin-bottom: 15px;
    color: #003471;
}

.form-filter-body {
    float: left;
    width: 100%;
    height: calc(100vh - 220px);
    overflow-x: hidden;
    overflow-y: auto;
}

.form-filter-buttons {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 5px 15px;
    border-top: 1px solid rgba(0, 52, 113, 0.19);
    text-align: center;
}

    .form-filter-buttons .btn-primary {
        width: 100%;
        background: none;
        border: 0;
        font-weight: 600;
        border-radius: 0;
        color: #003471;
    }

        .form-filter-buttons .btn-primary:hover {
            width: 100%;
            background: none;
            border: 0;
            font-weight: 600;
            border-radius: 0;
            color: #003471;
        }

    .form-filter-buttons .right-border {
        border-right: 1px solid rgba(0, 52, 113, 0.19);
    }


/* ----------------------------- form filters dropdown -------------------*/
.form-filter-section {
    float: left;
    width: 100%;
    padding: 0px;
    position: relative;
    margin-bottom: 15px;
}

.form-filter-trigger {
    float: right;
    padding: 0px;
}

    .form-filter-trigger .filter-link-btn {
        border: 1px solid #F62A00;
        padding: 6px 15px;
        display: block;
        cursor: pointer;
        border-radius: 4px;
        color: #F62A00;
        font-weight: 600;
    }

.form-filters-dropdown {
    float: left;
    width: 100%;
    max-height: 0;
    background: #F1F1F1;
    padding: 0px 15px;
    position: relative;
    box-shadow: 0 0 0px #aaa;
    border-radius: 0px;
    border: 0px solid #FFFFFF;
    transition: all 0.6s ease;
    overflow: hidden;
    margin-top: 0px;
}

    .form-filters-dropdown.show-filter {
        max-height: 1000px;
        background: #F1F1F1;
        padding: 25px 15px;
        position: relative;
        box-shadow: 0 0 5px #aaa;
        border-radius: 0px;
        border: 2px solid #FFFFFF;
        margin-top: 10px;
        overflow: visible;
    }

.filter-btn-group {
    float: left;
    width: 100%;
    margin: 29px 0 0 0;
}





/* ----------------------------------   Data Table   ------------------------------------ */
.fixed-header-table.height-300 {
    max-height: 300px !important;
}

.fixed-header-table {
    float: left;
    width: 100%;
    max-height: 390px;
    overflow: auto;
    position: relative;
    /*white-space: nowrap;*/
}

    .fixed-header-table th {
        position: sticky;
        /*top: -2px;*/
        top: 0;
        /*z-index: 10;*/
        z-index: 11;
        transition: all 0.6s ease;
        white-space: nowrap;
    }

    .fixed-header-table thead tr:nth-child(2) th {
        position: sticky;
        top: 29px;
    }

    .fixed-header-table .wrapper .selected-items-box {
        z-index: 0;
    }

.vertical-align-top td {
    vertical-align: top !important;
}

.fixed-header-table-1 {
    float: left;
    width: 100%;
    max-height: 390px;
    overflow: auto;
    position: relative;
}

    .fixed-header-table-1 table {
        border-collapse: collapse;
        width: 100%;
    }

    .fixed-header-table-1 thead {
        position: sticky;
        top: 0px;
        z-index: 11;
        white-space: nowrap;
    }

        .fixed-header-table-1 thead th {
            border: 1px solid #ccc !important;
            word-break: inherit !important;
            box-shadow: 0 0 1px #ccc !important;
        }

    .fixed-header-table-1 td {
        word-break: inherit !important;
    }


.fixed-header-table-2 {
    float: left;
    width: 100%;
    max-height: 390px;
    overflow: auto;
    position: relative;
    box-shadow: 0 0 3px #ccc;
}

    .fixed-header-table-2 table {
        border-collapse: collapse;
        width: 100%;
    }

    .fixed-header-table-2 thead {
        position: sticky;
        top: 0px;
        z-index: 11;
        white-space: nowrap;
    }

        .fixed-header-table-2 thead th {
            color: #fff;
            background: #474747;
            padding: 5px;
            border: 1px solid #ccc;
            box-shadow: 0 0 1px #ccc;
            text-align: center;
        }

    .fixed-header-table-2 td {
        padding: 5px;
        border: 1px solid #ccc;
    }


.text-center {
    text-align: center !important;
}



.data-list-section {
    float: left;
    width: 100%;
    padding: 15px;
    background: #FFFFFF;
    position: relative;
}

.form-container-full-2 .data-list-section {
    padding: 0px;
}

.tile-step-form .data-list-section, .tile-step-item .data-list-section {
    padding: 0px;
}



.table {
    margin-bottom: 0;
}

.cutom-in-table {
}

.v-align-top {
    vertical-align: top !important;
}

.cutom-in-table td {
    background: none !important;
    border: none !important;
    padding-right: 0px !important;
}

.data-table-section table thead tr.DocumentwithPeriod td {
    font-weight: 600;
    text-align: center;
    border-right: 1px solid #ccc;
    line-height: 14px;
    padding-top: 10px;
    cursor: default;
}

.right-align {
    text-align: right !important;
}

.center-align {
    text-align: center !important;
}

.left-align {
    text-align: left !important;
}

.data-table-section {
    float: left;
    width: 100%;
    /*border: 1px solid #ddd;
    background: #FFF;*/
    margin-bottom: 10px;
    position: relative;
}

/*.data-table-header {
    float: left;
    width: 100%;
    padding: 5px 0 15px 0;
}*/

.data-table-header {
    float: left;
    width: 100%;
    padding: 10px 10px 10px 10px;
    background: #FFF;
    /*box-shadow: 0 -1px 3px 0px #666;
    box-shadow:         0 -3px 3px -3px #666, 3px 0px 3px -3px #666, -3px 0px 3px -3px #666;*/
    position: relative;
    z-index: 9;
    border: 1px solid #dddddd;
}

.data-table-title {
    float: left;
    color: #666;
    padding: 2px 0 0 10px;
    font-size: 18px;
    position: relative;
    font-weight: 600;
}

.data-table-header-left {
    float: left;
}

    .data-table-header-left input {
        float: left;
        margin-right: 10px;
    }

.data-table-header-right {
    float: right;
}

.data-table-header input.form-control {
    height: 28px;
    width: 200px;
}

.max-h-1000 {
    max-height: 10000px !important;
}

.v-text {
    writing-mode: vertical-lr;
}

    .v-text label {
        text-orientation: sideways-right;
    }

.td-borders table td {
    border: 1px solid #dddddd;
}

.kendo-data-table-title {
    float: left;
    color: #666;
    padding: 2px 0 0 10px;
    font-size: 18px;
    position: absolute;
    font-weight: 400;
    /*top: 23px;*/
    top: 10px;
    z-index: 10;
}
/*k-grid-header .k-grid-filter, .k-grid-header .k-header-column-menu {
    
    margin: .4em -.6em -.786em 0;
}*/
.k-pager-refresh {
    display: none;
}

.data-table-left-controlls {
    float: left;
    white-space: nowrap;
    padding-left: 10px;
}

.data-table-controlls {
    float: right;
    white-space: nowrap;
    margin-left: 15px;
    margin-top: 5px;
}

.data-table-filters {
    float: left;
    white-space: nowrap;
}

.data-table-actions {
    float: right;
}

.left-trigger-cust-btns {
    margin-top: 20px;
    margin-bottom: -15px;
    float: right;
    position: relative;
    z-index: 9;
}

.left-trigger-cust-btns-2 {
    top: 5px;
    float: right;
    position: absolute;
    z-index: 10;
    right: 10px;
}
/*.add-form-trigger {
    cursor: pointer;
    font-weight: 400;
    padding: 5px 10px 5px 2px !important;
    border: 1px solid #fff;
}

    .add-form-trigger.disabled {
        opacity: 0.65;
        pointer-events: none;
    }*/

.btn.btn-primary.disabled {
    opacity: 0.65;
    pointer-events: none;
    color: #989595;
}
/*------ <a></a> disabled ---------*/
.active-link {
    color: #1E656D;
    font-weight: 600;
}

    .active-link:hover {
        color: #1E656D;
        text-decoration: underline;
    }

.disabled-link {
    font-weight: 600;
    pointer-events: none;
    color: #666;
}


.print-btn, .excel-btn, .copy-btn {
    margin: 0 10px 0 0;
    padding: 4px 10px;
    background: #F62A00;
    border-radius: 20px;
    color: #FFF;
    border: none;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    outline: none !important;
}

.data-list-inner-grid-btn {
    background: #F62A00;
    color: #fff;
    border-radius: 4px;
    padding: 2px 7px;
    border: 0;
    cursor: pointer;
    outline: none;
}

    .data-list-inner-grid-btn:hover {
        background: #aa2c3e;
    }



/*.copy-btn{
    margin-top:4px;
}*/
.print-btn {
    background: #09b2b4;
    transition: all 0.6s ease;
}

    .print-btn:hover {
        background: #077c7d;
    }

.Print {
    cursor: pointer;
}

.excel-btn {
    background: #24CFFF;
    transition: all 0.6s ease;
}

    .excel-btn:hover {
        background: #159dc3;
    }


.copy-btn {
    background: #F62A00;
    margin-top: 4px;
}

.title-bar {
    float: left;
    width: 100%;
    padding: 5px 10px;
    background: #eeeeee;
    margin-bottom: 5px;
}

    .title-bar h6 {
        margin-bottom: 0px;
    }

.data-table-controlls button:last-child {
    margin: 0;
}

.grid-link {
    color: #F62A00;
    cursor: pointer;
    font-weight: 400;
}


.actions .btn-primary {
    background: none;
    color: #F62A00;
    border: 0;
}

    .actions .btn-primary:hover, .actions .btn-primary:focus, .actions .btn-primary::selection {
        background: none;
        color: #F62A00;
        border: 0;
    }
/*.data-table-filter-btn {
    float: left;
    margin: 0 10px;
    background: #666;
    box-shadow: 0 0 2px #666;
    padding: 5px 10px;
    border-radius: 20px;
    color: #FFF !important;
    text-align: center;
    font-size: 12px;
    justify-content: center;
    cursor: pointer;
}

    .data-table-filter-btn.active {
        background: #F62A00;
        box-shadow: 0 0 2px #F62A00;
    }*/
.data-table-filter-btn {
    float: left;
    margin: 0 0 0 10px;
    border: 1px solid #b8bcbe;
    padding: 4px 10px;
    color: #142127;
    border-radius: 20px;
    text-align: center;
    font-size: 12px;
    justify-content: center;
    cursor: pointer;
}

    .data-table-filter-btn i {
        margin-right: 5px;
    }

    .data-table-filter-btn.active {
        background: none;
        color: #142127;
    }

.data-pages-list {
    float: left;
    white-space: nowrap;
    padding-left: 15px;
    /*display: none;*/
}

.data-select {
    padding: 6px 4px;
    border: 1px solid #ddd;
}

.data-pages-info {
    float: right;
    white-space: nowrap;
    line-height: 28px;
}

.data-table-search-box {
    width: 100%;
    float: right;
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 3px #666;
}

    .data-table-search-box .form-control {
        height: 28px;
        width: 200px;
    }

.data-table-search {
    float: right;
    white-space: nowrap;
    line-height: 28px;
    /*width: 400px;*/
    margin-top: 4px;
}

    .data-table-search .form-control {
        height: 28px;
        width: 200px;
    }

.item-data-search-btn {
    background: #fff;
    border-radius: 0;
    transition: all 0.6s ease;
    border: 1px solid #1E656D;
    color: #1E656D;
    transition: all 0.6s ease;
}

    .item-data-search-btn:hover {
        background: #1E656D;
        color: #FFF;
    }

.data-table-search-left {
    float: left;
    white-space: nowrap;
    line-height: 28px;
    width: 250px;
    padding-left: 10px;
}

    .data-table-search-left .form-control {
        height: 28px;
    }

.data-table {
    background: #FFF;
    /*border: 1px solid #B8BCBE;*/
    margin-bottom: 0;
    float: left;
    width: 100%;
    overflow-x: auto;
    box-shadow: 0 0 2px #bbb;
}

    .data-table.min-height-500 {
        min-height: 500px;
    }

    .data-table.min-height-250 {
        min-height: 250px;
    }

.min-height-200 {
    min-height: 200px !important;
}

.table td.nested-table {
    padding: 20px;
    background: #F1F1F1;
}

.plain-tab-data-table {
    background: #FFF;
    margin-bottom: 0;
    float: left;
    width: 100%;
    overflow-x: auto;
}

    .plain-tab-data-table table thead tr th {
        background: #e9ecef !important;
    }

.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(0, 0, 0, 0.02);
}

.data-table th {
    /*border-top: 1px solid #B8BCBE;
    border-bottom: 1px solid #B8BCBE;*/
    padding: 5px;
    text-transform: uppercase;
    font-weight: 400;
    background: #142127;
    color: rgba(255,255,255,1);
}

.data-table td {
    padding: 6px 10px 6px 5px;
    border-top: 1px solid #D8D8D8;
    vertical-align: middle;
    color: #000000;
}

.data-table .row-validate, .data-table .row-validate td {
    background: #ffb9b9 !important;
}

.data-table .row-validate-green, .data-table .row-validate-green td {
    background: #43a47b !important;
}

.IsCaptureMarks {
    background: #ffb9b9 !important;
}

.data-table.k-grid td {
    padding: 6px 10px 6px 5px;
    border-top: 0px solid #D8D8D8 !important;
    vertical-align: middle;
    color: #000000;
}

.k-grid .k-alt {
    background-color: rgba(30, 101, 109, 0.11);
}

.td-span {
    white-space: nowrap;
}

.td-btn {
    cursor: pointer;
    color: #F62A00;
    font-weight: 400;
}

.table-action-cell {
    width: 140px;
}

td.table-footer {
    background: #ECEFF1;
    border-top: 2px solid #ccc;
}

.table-footer .row {
    margin: 0 !important;
}

.table-footer .col-md-6 {
    padding: 0 !important;
}

td.example {
    background: #f1f1f1;
}

    td.example p {
        margin: 0 !important;
    }

.k-grid .dropdown-menu.action-dropdown {
    max-height: 275px;
    overflow-y: auto;
    overflow-x: hidden;
}

.dropdown-menu.action-dropdown {
    padding: 6px 6px 0 6px;
    box-shadow: 0 0 5px #aaa;
}

    .dropdown-menu.action-dropdown a:hover {
        color: #000;
        background: #eee;
        border-radius: 4px;
    }

        .dropdown-menu.action-dropdown a:hover i {
            color: #1E656D;
        }

    .dropdown-menu.action-dropdown a:active {
        color: #fff;
        background: #1E656D;
        box-shadow: 0 0 5px #1E656D;
    }

        .dropdown-menu.action-dropdown a:active i {
            color: #fff;
        }

.dropdown-item.active, .dropdown-item:active {
    background: #1E656D;
    color: #fff !important;
}

.table-status, .table-edit, .table-delete {
    /*background: #FFF;*/
    color: #666 !important;
    float: left;
    padding: 4px 10px;
    margin: 0;
    cursor: pointer;
    margin-bottom: 4px;
}

.horizontal-scroll {
    overflow-x: auto !important;
    width: 100%;
}

.table-delete.discount-btn {
    /*width: 100%;*/
    float: right;
    background: #F62A00;
    color: #fff !important;
    padding: 6px 15px;
    text-align: center;
    font-size: 15px;
}

    .table-delete.discount-btn:hover {
        background: #b03344;
    }

    .table-delete.discount-btn i.fas {
        padding-right: 10px;
    }

    .table-delete.discount-btn.small {
        width: 70%;
        padding: 6px 20px;
    }

.link-disable {
    color: #aaa !important;
}

.data-view-links {
    white-space: nowrap;
}

    .data-view-links a {
        color: #003471;
        padding: 0 2px;
    }



.table-btn {
    background: #F62A00;
    color: #FFF;
    border: 0;
    border-radius: 0;
    transition: all 0.6s ease;
}

    .table-btn:hover {
        background: #F62A00;
        border: 0;
        border-radius: 0;
    }

.data-table.no-scroll {
    overflow-x: inherit !important;
}



.table-status.inactive, .table-edit.inactive, .table-delete.inactive {
    background: #ddd;
    color: #666;
    border: 2px solid #aaa;
}

.data-details {
    float: left;
    width: 100%;
    text-align: left;
    padding: 0px 0;
    color: #000;
    font-size: 12px;
}

.data-table tr.disabled td input, .data-table tr.disabled td select {
    pointer-events: none;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

.dropdown.actions {
    position: absolute;
}

.grid-custom-div {
    float: left;
    width: 100%;
}

.dropdown.actions {
    position: inherit;
}

.grid-toggle-btn {
    color: #F62A00;
    width: 100%;
    text-align: center;
    float: left;
}

.dropdown-item {
    width: calc(100% - 20px);
}

    .dropdown-item.active-item {
        color: #000;
    }

    .dropdown-item.in-active-item {
        cursor: default;
        color: #999;
    }
/*Grid dropdown disabled css*/

.dropdown-item-disabled {
    cursor: not-allowed !important;
    color: #ccc !important;
}

    .dropdown-item-disabled i {
        color: #ccc !important;
        cursor: not-allowed !important;
    }

    .dropdown-item-disabled:active {
        color: #ccc !important;
        background: #eee !important;
        box-shadow: none !important;
        border: none !important;
    }

.table-status.active-item-status {
    cursor: pointer;
    color: #000;
}

.table-status.in-active-item-status {
    color: #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 #E48444;
        margin-left: 2px;
        color: #E48444;
        text-decoration: none;
    }

    .tbl-paging ul li.active a {
        background: #E48444;
        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: 10px;
    border: 1px solid #ddd;
}

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

    .data-table-footer ul li.active a {
        color: #fff !important;
        background: #535353 !important;
        border-color: #535353 !important;
    }

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


/*---------------- Finalise and Release marks css Start Here ------------------*/

.data-progress-bar {
    width: 100px;
    border-radius: 20px;
    height: 30px;
    position: relative;
    background: linear-gradient(to right, #ff0000 0%, #ffd800 50%, #00ff21 100%);
    box-shadow: 0 0 5px #666;
    overflow: hidden;
}

.data-progress-bar-status-bg {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #F1F1F1;
    right: 0;
}

.data-progress-bar:after {
    content: attr(tot-count);
    width: 100%;
    height: 100%;
    padding: 5px 0;
    position: absolute;
    text-align: center;
}



/*---------------- Finalise and Release marks css End Here ------------------*/



.state-active {
    color: #0bab47;
}

.state-inactive {
    color: #999;
}

.fa-circle {
    font-size: 10px;
}

.state-active .fa-circle {
    color: #00b652;
}

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


/*Pagination Start*/

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 0px 0;
    /*border-radius: 4px;*/
    float: right;
    font-size: 12px;
}

    .pagination > li {
        display: inline;
    }

        .pagination > li > a,
        .pagination > li > span {
            position: relative;
            float: left;
            padding: 0em 0.5em;
            margin-left: 3px;
            line-height: 1.42857143;
            color: #808080;
            text-decoration: none;
            background: none;
            border: 1px solid #808080;
            padding-top: 2px;
        }

        .pagination > li:first-child > a,
        .pagination > li:first-child > span,
        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            color: #333;
            border: 1px solid rgba(0,0,0,0);
        }

        .pagination > li:first-child > a,
        .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

            .pagination > li:first-child > a:hover,
            .pagination > li:first-child > span:hover,
            .pagination > li:first-child > a:focus,
            .pagination > li:first-child > span:focus,
            .pagination > li:last-child > a:hover,
            .pagination > li:last-child > span:hover,
            .pagination > li:last-child > a:focus,
            .pagination > li:last-child > span:focus {
                color: #000;
                background: none;
                border: 1px solid rgba(0,0,0,0);
            }

        .pagination > li > a:hover,
        .pagination > li > span:hover,
        .pagination > li > a:focus,
        .pagination > li > span:focus {
            color: #808080;
            background: none;
            border-color: #808080;
        }

    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 2;
        color: #808080;
        cursor: default;
        background: none;
        border-color: #808080;
    }

    .pagination > .disabled > span,
    .pagination > .disabled > span:hover,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.tbl-paging .pagination {
    margin: 0;
}


.no-results {
    float: left;
    width: 100%;
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.form-sub-title {
    float: left;
    width: 100%;
    color: #666;
    padding: 15px 0px;
    background: rgba(11,171,71,0);
    font-size: 18px;
    position: relative;
    font-weight: 600;
}

.form-sub-title-1 {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    color: #666;
    font-weight: 600;
    margin: 10px 0 20px 0;
    padding: 5px 0px;
    text-transform: uppercase;
}

/*   capture form    */

.capture-form {
    position: fixed;
    width: 100%;
    height: calc(100vh - 70px);
    background: #f8f8f8;
    box-shadow: 0 0 5px #666;
    padding: 10px 15px 0 15px;
    top: 70px;
    right: 0px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease;
    z-index: 20;
}

    .capture-form.open {
        visibility: visible;
        opacity: 1;
    }

.capture-form-title {
    float: left;
    width: 100%;
    background: #1E656D;
    font-weight: 400;
    font-size: 18px;
    color: #FFF;
    position: relative;
    z-index: 10;
    height: 45px;
    padding: 9px 15px;
    /*box-shadow: 0 0 5px #aaa;*/
}

    .capture-form-title h4 {
        float: left;
        font-size: 16px;
        padding: 3px 0 0 0;
        font-weight: 400;
        /*text-transform: uppercase;*/
        margin: 0;
    }

.with-btns h4 {
    /*padding: 6px 0 0 0;*/
}

.web-form-close {
    float: right;
    padding: 0;
    padding: 2px 5px 0px 5px;
    color: #FF0000;
    font-size: 16px;
    cursor: pointer;
}

.web-form-back {
    float: left;
    padding: 0;
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
    margin: -3px 10px 0 0;
    position: relative;
    min-height: 29px;
    width: 20px;
}

    .web-form-back i {
        display: none;
    }

    .web-form-back::after {
        position: absolute;
        content: "\f060";
        font-family: "Font Awesome 5 Free";
        left: 0px;
        top: 4px;
        font-weight: 600;
    }


/*    User Profile */
.user-view-container {
    float: left;
    width: 100%;
    padding: 15px 0px;
}

.profile-show {
}

.user-profile-section {
    /*float: left;*/
    width: 250px;
    background: #eceff1;
    box-shadow: 0 0 5px #aaa;
    /*height: calc(100vh - 160px);*/
    /*padding: 0 10px;*/
    position: absolute;
    transition: all 0.6s ease;
    left: 15px;
    /*overflow-y: auto;*/
}

.user-profile-inner-section {
    overflow-y: auto;
    padding: 0 10px;
    height: calc(100vh - 150px);
}

.profile-show .user-profile-section {
    left: -250px;
}

.user-view-form {
    float: right;
    width: calc(100% - 260px);
    transition: all 0.6s ease;
}

.profile-show .user-view-form {
    width: 100%;
}

.user-view-form-full {
    float: left;
    width: 100%;
}

.user-profile-trigger {
    position: absolute;
    top: 3px;
    right: 2px;
    font-size: 20px;
    background: #FFF;
    width: 30px;
    height: 30px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s ease;
    padding: 5px;
    text-align: center;
    color: #1E656D;
    border: 1px solid #1E656D;
    z-index: 9;
}

    .user-profile-trigger.active {
        right: -30px;
    }

    .user-profile-trigger .fa-outdent {
        left: 5px;
        top: 4px;
        position: absolute;
        transition: all 0.6s ease;
    }

    .user-profile-trigger .fa-address-card {
        right: -40px;
        top: 4px;
        position: absolute;
    }

    .user-profile-trigger.active .fa-address-card {
        right: 3px;
        transition: all 0.6s ease;
    }

    .user-profile-trigger.active .fa-outdent {
        left: -40px;
    }

.user-profile-pic {
    float: left;
    width: 100%;
    padding: 15px;
    text-align: center;
}

    .user-profile-pic img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        text-align: center;
        border: 1px solid #999;
        overflow: hidden;
    }

.user-profile-info {
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.user-profile-name {
    font-size: 14px;
    font-weight: 600;
    color: #142127;
    text-transform: uppercase;
    word-wrap: break-word;
}

.role-name-info {
    float: left;
    width: 100%;
    font-weight: 400;
}

.user-profile-info p {
    margin-bottom: 0;
    font-size: 12px;
    padding: 2px 0;
}

.user-profile-controllers {
    float: left;
    width: 100%;
}

.user-profile-control-left {
    float: left;
    width: 50%;
    padding: 0 5px 0 0;
}

.user-profile-control-right {
    float: left;
    width: 50%;
    padding: 0 0px 0 5px;
}

.user-profile-btn {
    width: 100%;
    float: left;
    display: block;
    margin-bottom: 10px;
    padding: 3px 0px;
    background: #FFF;
    border-radius: 20px;
    text-align: center;
    /*border: 1px solid #aaa;*/
    border: 1px solid #1E656D;
    cursor: pointer;
    font-size: 12px;
    /*color: #888;*/
    color: #1E656D;
    font-weight: 400;
    transition: all 0.6s ease;
}

    .user-profile-btn:hover {
        background: #1E656D;
        color: #fff;
    }

    .user-profile-btn.popup-btn {
        color: #1E656D;
        border: 1px solid #1E656D;
    }

        .user-profile-btn.popup-btn:hover {
            color: #fff;
            background: #1E656D;
        }

.user-profile-bottom-btn {
    /*position: absolute;*/
    width: 100%;
    bottom: 0px;
    left: 0;
    padding: 15px 0px;
    text-align: center;
}



/*   plain tab container     */
.plain-tab-container {
    float: left;
    width: 100%;
    padding: 0px;
}

.plain-tab-link-group {
    float: left;
    width: calc(100% - 30px);
    margin: 0 15px;
    border-bottom: 1px #bbb solid;
}

.plain-tab-link {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f1f1f1;
    display: flex;
}

    .plain-tab-link li {
        display: inline-block;
        margin: 0;
        padding: 15px;
        font-weight: 600;
        font-size: 14px;
        border-right: 1px rgba(0,0,0,0.1) solid;
        color: #1E656D;
        cursor: pointer;
        float: left;
        position: relative;
    }


        .plain-tab-link li.active {
            background: #1E656D;
            color: #FFF;
        }

        .plain-tab-link li i {
            float: left;
            width: 25px;
            margin: 3px 0 0 0;
        }

        .plain-tab-link li span {
            float: left;
        }

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

.plain-tab-item {
    display: none;
    float: left;
    padding: 10px 15px 15px 15px;
    position: relative;
    /*height: calc(100vh - 192px);*/
    height: calc(100vh - 210px);
    width: 100%;
    /*margin:0 15px;*/
    overflow-y: auto;
}

    .plain-tab-item.active {
        display: block;
    }

    .plain-tab-item .plain-tab-info-box.no-padding .step-tab-item-title {
        margin-bottom: 0;
        padding: 10px;
    }

.plain-tab-btn-sticky {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 100px;
}

.plain-tab-btn {
    float: right;
    padding: 3px 15px;
    font-size: 12px;
    text-align: center;
    border: 1px solid #aaa;
    cursor: pointer;
    background: #FFF;
    border-radius: 20px;
    min-width: 100px;
    white-space: nowrap;
}

.plain-tab-sub-title {
    width: 100%;
    float: left;
    font-weight: 400;
    color: #1c1c1c;
    font-size: 16px;
    margin: 10px 0;
    padding: 0px;
}

.tab-info-box {
    float: left;
    width: 100%;
    padding: 0 10px;
}

.plain-tab-info-box {
    background: #FFF;
    float: left;
    width: 100%;
    box-shadow: 0 0 5px #aaa;
    padding: 22px 15px 7px 15px;
    margin-bottom: 20px;
    word-wrap: break-word;
}

    .plain-tab-info-box .form-group {
        margin-bottom: 15px;
    }

.contact-info-box {
    padding: 0px 15px 15px 15px;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    line-height: 30px;
}

.box-sub-title {
    float: left;
    width: 100%;
    padding: 0 0 15px 0;
    font-weight: 600;
}


/*    GP collaps panel */
.gp-collaps-panel {
    float: left;
    width: 100%;
}

.gp-collaps-item {
    float: left;
    width: 100%;
    padding: 0 0 0px 0;
    transition: all 0.6s ease;
    margin-bottom: 5px;
}

    .gp-collaps-item.active .gp-collaps-item {
        padding: 0 0 15px 0;
    }

.gp-collaps-item-title {
    float: left;
    width: 100%;
    font-size: 14px;
    padding: 10px 15px 7px 15px;
    font-weight: 600;
    color: #dd5a6c;
    background: #000;
    text-transform: uppercase;
    margin-bottom: 0px;
    cursor: pointer;
    transition: all 0.6s ease;
    position: relative;
}

    .gp-collaps-item-title::after {
        position: absolute;
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        top: 9px;
        right: 10px;
        transform: rotate(0deg);
        transition: all 0.6s ease;
    }

.gp-collaps-item.active .gp-collaps-item-title::after {
    transform: rotate(180deg);
}

.gp-collaps-item.active .gp-collaps-item-title {
    margin-bottom: 15px;
}

.gp-collaps-item-title.back.collapse-tab {
    background: #142127;
    color: rgba(255,255,255,1);
}

.gp-collaps-item-content {
    float: left;
    width: 100%;
    padding: 0px 15px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.6s ease;
}

.gp-collaps-item.active .gp-collaps-item-content {
    max-height: 1000px;
    padding: 5px 15px;
}




/*    plain tab collaps panel */
.plain-tab-collaps-panel {
    float: left;
    width: 100%;
}

.plain-tab-collaps-item {
    float: left;
    width: 100%;
    padding: 0 0 0px 0;
    transition: all 0.6s ease;
    margin-bottom: 5px;
}

    .plain-tab-collaps-item.active .plain-tab-collaps-item {
        padding: 0 0 15px 0;
    }

.plain-tab-collaps-item-title {
    float: left;
    width: 100%;
    font-size: 14px;
    padding: 10px 15px 7px 15px;
    font-weight: 600;
    color: #434d52;
    background: #f9f9f9;
    text-transform: uppercase;
    margin-bottom: 0px;
    cursor: pointer;
    transition: all 0.6s ease;
    position: relative;
}

    .plain-tab-collaps-item-title::after {
        position: absolute;
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        top: 9px;
        right: 10px;
        transform: rotate(0deg);
        transition: all 0.6s ease;
    }

.plain-tab-collaps-item.active .plain-tab-collaps-item-title::after {
    transform: rotate(180deg);
}

.plain-tab-collaps-item.active .plain-tab-collaps-item-title {
    margin-bottom: 15px;
}

.plain-tab-collaps-item-title.back.collapse-tab {
    background: #142127;
    color: rgba(255,255,255,1);
}

.plain-tab-collaps-item-content {
    float: left;
    width: 100%;
    padding: 0px 15px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.6s ease;
}

.plain-tab-collaps-item.active .plain-tab-collaps-item-content {
    max-height: 1000px;
    padding: 5px 15px;
    overflow-y: auto;
}





.enquiry-form-profile {
    float: right;
    margin: 2px 5px 0 10px;
    background: #00b39d;
    border: 1px solid #00b39d;
    padding: 4px 10px;
    color: #FFF;
    text-align: center;
    font-size: 12px;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 20px;
}

    .enquiry-form-profile i {
        margin-left: 5px;
        color: #000;
    }

.web-form-2 {
    float: left;
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: auto;
    background: #FFFfff;
    box-shadow: 0 0 5px #dddddd;
}


.web-form {
    float: left;
    width: 100%;
    height: calc(100vh - 175px);
    padding: 15px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #FFFfff;
    box-shadow: 0 0 5px #dddddd;
}

.capture-web-form {
    float: left;
    width: 100%;
    height: calc(100vh - 76px);
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f9f9f9;
}

.capture-web-form-2 {
    float: left;
    width: 100%;
    height: calc(100vh - 97px);
    padding: 15px 30px 30px 30px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f9f9f9;
}

.web-form-btns {
    float: left;
    width: 100%;
    height: 50px;
    background: #FFF;
    padding: 6.5px 15px;
    text-align: right;
    border-top: 1px solid #ddd;
}

.form-btn {
    background: #FFF;
    border: 1px solid #1E656D;
    color: #1E656D;
    margin-left: 10px;
    border-radius: 0;
    transition: 0.6s ease;
    padding: 3px 15px !important;
}

    .form-btn:hover {
        color: #fff;
        background: #1E656D;
    }

    .form-btn.active-div {
        display: inherit !important;
    }
    /*.form-btn:last-child {
        margin-right: 0px;
    }*/

    .form-btn.active {
        background: #1E656D;
        color: #FFF;
        border: 1px solid #176b43;
    }

        .form-btn.active:hover {
            background: #176b43;
        }


.form-block-2 {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin-bottom: 15px;
}

.date-pic {
    float: right;
    color: #F62A00;
    margin: -31px 5px 0 0;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}




/*     dynamic-filters-container   */
.dynamic-filters-container {
    display: none;
    float: left;
    width: 100%;
}

    .dynamic-filters-container.active {
        display: block;
    }

.form-btn-group {
    background: #eeeeee;
    padding: 10px 15px;
    float: left;
    width: 100%;
    text-align: right;
}






/*  -----------------------------------    Bootstrap Edit    ----------------------------------------------------*/
.dropdown-menu-right.show {
    top: 15px !important;
}

.dropdown-menu-profile.dropdown-menu-right.show {
    top: 50px !important;
    transform: inherit !important;
    left: -205px !important;
}

.dropdown-noti-right {
    top: 13px !important;
    right: -50px !important;
    left: auto !important;
    padding: 0;
}

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

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


.form-control {
    width: 100%;
    height: calc(1.5em + 0);
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    padding: 0 5px 0 5px;
    box-shadow: none !important;
}

    .form-control:focus {
        border-color: #8f9192;
    }

    .form-control:disabled {
        cursor: not-allowed;
    }

    .form-control.search-control {
        height: calc(1.5em + 1rem);
    }

.search-control:focus {
    outline: none !important;
}

.input-group-text {
    padding: 0.2rem 0.75rem;
}

.form-group {
    margin-bottom: 22px;
}

    .form-group label {
        font-size: 12px;
        margin: 0;
    }


        .form-group label.note-label-bold {
            font-size: 15px;
            font-weight: bold;
            margin: 0;
        }

.form-tab-item .form-tab-form .form-box-info .form-group span.ng-binding {
    /*color: #F62A00;*/
}

/*.modal.fade:not(.show) {
    opacity: 1 !important;
}*/

.fade.in {
    opacity: 1;
}

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

.modal .modal-content {
    top: 50px !important;
    border-radius: 0;
}

.modal .modal-lg .modal-content, .modal .modal-xxl .modal-content {
    top: 0px !important;
}

.modal-lg {
    max-width: 1100px;
}

.modal-xxl {
    max-width: 90%;
}

.modal .modal-content .tile-step-form {
    /*height: calc(100vh - 147px);*/
    /*padding: 20px 30px;*/
}

.pop-add-form {
    float: left;
    width: 100%;
}

.modal .modal-content .tile-step-link-group {
    float: left;
    /*width: calc(100% - 80px);*/
    width: 100%;
    display: flex;
    /*margin: 0 30px;*/
    padding: 0px;
    border-bottom: 1px solid #b4b4b4;
}

.modal .modal-content .tile-step-item-group {
    /*height: calc(100vh - 205px);*/
    height: calc(100vh - 220px);
}

.expend-btn {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    outline: none !important;
}

.tab-pane .pwd-show {
    float: inherit;
    background: none;
    border: 0;
    outline: none !important;
}

.btn-box {
    width: 100%;
    text-align: right;
    margin: 30px 0 20px 0;
}

.btn-box-left {
    width: 100%;
    text-align: left;
    margin: 20px 0 20px 0;
    padding: 0 15px;
}

.btn-box-right {
    width: 100%;
    text-align: right;
    margin: 20px 0 20px 0;
    padding: 0;
}

.btn-box-center {
    width: 100%;
    text-align: center;
    margin: 20px 0 20px 0;
    clear: both;
}


.header-btn-box {
    width: 100%;
    text-align: right;
    margin: 4px 0;
}

.btn {
    padding: 0.36em 0.75rem;
    font-size: 14px;
    /*text-transform: uppercase;*/
}

.btn-box-right.custom {
    margin: 20px 0 10px 0;
}

    .btn-box-right.custom button {
        margin-bottom: 10px;
    }


.btn-box-right .btn {
    margin-left: 10px;
}

.form-btn-bar-1 {
    text-align: center;
    float: left;
    width: 100%;
}

.btn-6 {
    background: #F62A00;
    border: 0;
    color: #FFF;
    border-radius: 0;
    transition: all 0.6s ease;
}

    .btn-6:hover {
        background: #F62A00;
        border: 0;
        border-radius: 0;
    }

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

.input-group .btn-default {
    border-radius: 0;
    border: 1px solid #ced4da;
    border-left: 0;
    padding: 4.5px 8px;
    background: #FFF;
    color: #09b2b4;
    height: 100%;
    box-shadow: none !important;
}

.btn-add-to-grid {
    background: #FFF;
    border: 0;
    border-radius: 0;
    transition: all 0.6s ease;
    min-width: 100px;
    border: 1px solid #0498c1;
    color: #0498c1;
}

    .btn-add-to-grid.active {
        background: #0498c1;
        border: 0;
        border-radius: 0;
        transition: all 0.6s ease;
        min-width: 100px;
        color: #FFF;
    }

    .btn-add-to-grid:hover {
        background: #0498c1;
        border-radius: 0;
        color: #FFF;
        border: 1px solid #0498c1;
    }

    .btn-add-to-grid:not(:disabled):not(.disabled):active, .btn-add-to-grid:not(:disabled):not(.disabled).active, .show > .btn-add-to-grid.dropdown-toggle {
        background: #0498c1;
        border: 1px solid #0498c1;
    }



.btn:disabled {
    pointer-events: none;
}

.btn-primary {
    background: #fff;
    border-radius: 0;
    transition: all 0.6s ease;
    min-width: 100px;
    border: 1px solid #1E656D;
    color: #1E656D;
    outline: none !important;
    box-shadow: none !important;
}

    .btn-primary.active {
        background: #1E656D;
        border: 0;
        border-radius: 0;
        transition: all 0.6s ease;
        min-width: 100px;
        color: #FFF;
    }

        .btn-primary.active:hover {
            background: #1E656D !important;
            border-color: #1E656D;
        }

    .btn-primary:hover {
        background: #1E656D;
        border-radius: 0;
        color: #FFF;
        border: 1px solid #1E656D;
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        background: #1E656D;
        border: 1px solid #1E656D;
    }


.btn-secondary {
    background: #000;
    border: 0;
    border-radius: 0;
    transition: all 0.6s ease;
}

    .btn-secondary:hover {
        background: #000;
        border: 0;
        border-radius: 0;
    }

.data-completed.btn-primary {
    background: #b3b7b9;
    color: #FFF;
    border: 0;
    border-radius: 0;
    transition: all 0.6s ease;
    position: relative;
    margin-left: 30px;
}

    .data-completed.btn-primary:hover {
        background: #b3b7b9;
        border: 0;
        border-radius: 0;
    }

    .data-completed.btn-primary span {
        position: relative;
        z-index: 2;
    }

.data-completed::after {
    position: absolute;
    background: #000;
    content: attr(completed)"%";
    height: 100%;
    left: -30px;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 30px;
    font-size: 10px;
    line-height: 32px;
}

.data-completed::before {
    position: absolute;
    background: #1E656D;
    height: 100%;
    left: -60px;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 30px;
    line-height: 32px;
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    color: #FFF;
}


.data-completed-count {
    position: absolute;
    background: #ff462b;
    height: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: 1;
}



/*    LEFT TAB CONTAINER START   */
.left-tab-container {
    float: left;
    width: 100%;
    height: calc(100vh - 134px);
    display: flex;
    padding: 15px;
    background: #fff;
}

    .left-tab-container.with-top-info {
        height: calc(100vh - 220px);
    }

.tabs-left {
    float: left;
    width: 250px;
    background-color: rgba(30, 101, 109, 0.11);
    position: relative;
    z-index: 10;
    overflow-y: auto;
    /*border: 1px solid #9DACB7;
    border-right: 0px solid #9DACB7;*/
    padding: 5px;
}

    .tabs-left::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 01px;
        /*background: #9DACB7;*/
        top: 0;
        right: 0px;
        z-index: 5;
    }

    .tabs-left ul {
        margin: 0;
        padding: 0;
        background: #FFF;
        border: 1px solid #9DACB7;
        border-bottom: 0px solid #9DACB7;
        /*border-right: 1px solid #9DACB7;*/
    }

    .tabs-left li {
        margin: 0;
        padding: 0;
        width: 100%;
    }

        .tabs-left li span {
            margin: 0;
            padding: 10px;
            display: block;
            color: #666;
            font-weight: 400;
            border-top: 1px solid #9DACB7;
            /*white-space: nowrap;
            text-overflow: ellipsis;*/
            font-size: 14px;
            cursor: pointer;
            position: relative;
        }

        .tabs-left li:first-child span {
            border-top: 0px solid #9DACB7;
        }

        .tabs-left li:last-child span {
            border-bottom: 1px solid #9DACB7;
        }

        .tabs-left li span.active {
            background: #f5f5f5;
            color: #1E656D;
            /*border-right: 1px solid #F8F8F8;*/
            font-weight: 500;
        }

            .tabs-left li span.active::before {
                position: absolute;
                content: "";
                height: 100%;
                width: 6px;
                background: #1E656D;
                top: 0;
                left: -1px;
            }

/*.tabs-left li span.active::after {
                position: absolute;
                content: "";
                height: 100%;
                width: 4px;
                background: #F8F8F8;
                top: 0;
                right: -1px;
                z-index: 9;
            }*/

.left-tab-container .tab-content {
    width: calc(100% - 248px);
    float: right;
    margin-left: -2px;
    padding: 2px 10px 15px 15px;
    overflow-y: auto;
    overflow-x: hidden;
}

    .left-tab-container .tab-content .tab-pane {
        padding: 0px 0 0 0px;
        float: left;
        width: 100%;
        /* min-height: 400px;*/
        position: relative;
    }

        .left-tab-container .tab-content .tab-pane.custom {
            padding: 0px;
        }

    .left-tab-container .tab-content .data-table {
        padding: 0;
    }

.left-tab-container .data-table-section {
    padding: 25px 10px 10px 10px;
}

.tab-content .tab-pane .data-table-section {
    padding-left: 0;
    padding-right: 0;
}

.tab-btn-box-right {
    clear: both;
    background: #F1F1F1;
    text-align: right;
    padding: 10px;
    margin: 0 -15px -15px;
    box-shadow: 0 0 8px #333;
}
/*    LEFT TAB CONTAINER END   */

.tab-add-section {
    float: left;
    width: 100%;
    background: rgba(255,255,255,0.0);
    box-shadow: 0 0 0px #ccc;
    margin-bottom: 10px;
    transition: all 0.6s ease;
    position: relative;
}

    .tab-add-section.active {
        background: rgba(255,255,255,1);
        box-shadow: 0 0 5px #ccc;
    }

.tab-add-trigger {
    float: right;
    border: 1px solid #F62A00;
    display: block;
    cursor: pointer;
    border-radius: 4px;
    color: #F62A00;
    font-weight: 600;
    position: relative;
    z-index: 5;
    width: 80px;
    text-align: center;
}

.tab-add-section.active .tab-add-trigger {
    border-radius: 0px;
    border: none;
    color: #ff4848;
}

.add-text {
    display: block;
    padding: 6px 15px;
}

.tab-add-section.active .add-text {
    display: none;
}

.close-text {
    text-align: right;
    display: none;
    padding: 6px 15px;
}

.tab-add-section.active .close-text {
    display: block;
}

.tab-section-title {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 6px 15px;
    z-index: 1;
    background: #FFF;
    box-shadow: 0 0 5px #ccc;
    visibility: hidden;
    opacity: 0;
    font-weight: 700;
    transition: all 0.6s ease;
}

.tab-add-section.active .tab-section-title {
    visibility: visible;
    opacity: 1;
}

.tab-add-form {
    float: left;
    width: 100%;
    max-height: 0;
    background: #FFF;
    transition: all 0.6s ease;
    overflow: hidden;
    padding: 0 15px;
}

.tab-add-section.active .tab-add-form {
    max-height: 2000px;
    padding: 15px;
}

.tab-add-form-btns {
    margin: 0 -15px -12px -15px;
    padding: 4px 10px;
    border-top: 1px #ccc solid;
    text-align: right;
}

.padding-bottom-15 {
    padding-bottom: 25px !important;
}

.padding-bottom-10 {
    padding-bottom: 10px !important;
}

.padding-bottom-0 {
    padding-bottom: 0 !important;
}

.padding-top-30 {
    padding-top: 30px !important;
}

.padding-top-3 {
    padding-top: 3px !important;
}

.padding-top-4 {
    padding-top: 4px !important;
}

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

.padding-top-15 {
    padding-top: 15px !important;
}

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

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

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

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

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

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







.left-tab-data-table-header {
    float: left;
    width: 100%;
    padding: 5px 0 15px 0;
}

.add-form-page-link {
    float: right;
    margin: 0px 0 0 20px !important;
    background: #fff;
    padding: 4px 10px 4px 30px;
    /*border-radius: 20px;*/
    border: 1px solid #1E656D;
    color: #1E656D !important;
    text-align: center;
    font-size: 12px;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    border-radius: 30px;
    outline: none !important;
}

    /*.add-form-page-link::before {
        position: absolute;
        content: "";
        width: 1px;
        left: -15px;
        top: 0;
        height: 100%;
        background: #aaa;
    }*/

    .add-form-page-link::after {
        position: absolute;
        content: "\f067";
        font-family: "Font Awesome 5 Free";
        left: 2px;
        top: 2px;
        font-weight: 600;
        color: #FFF;
        background: #1E656D;
        width: 22px;
        height: 22px;
        padding: 2px 2px;
        border-radius: 50%;
    }

    .add-form-page-link.edit::after {
        content: "\f303";
    }

    .add-form-page-link.active {
        background: #F62A00;
    }

    .add-form-page-link:hover {
        background: #1E656D;
        color: #fff !important;
    }

        .add-form-page-link:hover::after {
            background: #fff !important;
            color: #1E656D !important;
        }

    .add-form-page-link i {
        margin-right: 4px;
    }







/*   tile tabs   */
.tile-step-container {
    float: left;
    width: 100%;
    padding: 15px 15px 0 15px;
    background: #fff;
}

.form-container-full-2 .tile-step-container {
    padding: 0;
}

.tile-step-link-group {
    float: left;
    display: flex;
    padding: 0;
    margin: 0;
    background: #f1f1f1;
    border-bottom: 1px solid #b4b4b4;
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
}

.tile-step-link {
    text-align: center;
    border-right: 1px rgba(0,0,0,0.1) solid;
}

.tile-step-link {
    text-align: center;
    padding: 10px 10px;
    color: #1E656D;
    display: block;
    cursor: pointer;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
}

    .tile-step-link i {
        font-size: 16px;
        margin-right: 5px;
        /*width: 17px;*/
        text-align: left;
    }


.inline-tabs .tile-step-link i {
    font-size: 16px;
    margin-bottom: 0px;
    float: left;
}

.tile-step-link.disabled {
    color: #c5c5c5 !important;
    background: #878787 !important;
    pointer-events: none !important;
}

    .tile-step-link.disabled i {
        color: #c5c5c5 !important;
    }

    .tile-step-link.disabled span {
        color: #c5c5c5 !important;
    }

.tile-step-link span {
    display: block;
}

.inline-tabs .tile-step-link span {
    float: left;
    display: inline-block;
}
/*.tile-step-link:first-child span {
        border-top-left-radius: 6px;
    }

    .tile-step-link:last-child span {
        border-top-right-radius: 6px;
    }

    .tile-step-link.done span {
    }*/

.tile-step-link.active {
    background: #1E656D;
    color: #fff;
}

/*.tile-step-link.active span::after {
            position: absolute;
            content: "";
            bottom: -4px;
            width: 7px;
            left: calc(50% - 5px);
            border-bottom: 10px solid #3a7087;
            border-right: 10px solid #3a7087;
            transform: rotate(45deg);
        }*/

.tile-step-item-group {
    float: left;
    width: 100%;
    margin: 0px 0 0 0;
    border-radius: 6px;
    /*height: calc(100vh - 172px);*/
    height: calc(100vh - 205px);
    overflow-y: auto;
    padding-right: 15px;
    padding-left: 2px;
}

.pop-form .static-label-bold .static-label {
    font-weight: 600 !important;
}

.left-tab-container .tile-step-item-group {
    height: calc(100vh - 220px);
}

.tile-step-item {
    float: left;
    width: 100%;
    padding: 0px;
    display: none;
    position: relative;
}

    .tile-step-item.active {
        display: block;
    }

.step-tab-item-title {
    float: left;
    width: 100%;
    font-size: 14px;
    padding: 0 0 0px 0;
    font-weight: 600;
    color: #434d52;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.info-box-btn {
    float: right;
    margin: -44px 0 0 0;
}

    .info-box-btn a {
        float: right;
        margin: 0 0px;
        padding: 4.2px 10px;
        background: #F62A00;
        color: #FFFFFF !important;
        text-align: center;
        font-size: 12px;
        min-width: 100px;
        border-radius: 0;
        cursor: pointer;
    }

.tile-step-form {
    float: left;
    width: 100%;
    /*height: calc(100vh - 172px);
    overflow-x: hidden;
    overflow-y: auto;*/
    padding: 10px 0;
}

.tile-step-filters {
    float: left;
    width: 100%;
    background: #FFF;
    border: 1px solid #DDD;
    padding: 15px 15px 5px 15px;
    margin-bottom: 20px;
    margin-top: 10px;
    /*box-shadow: 0 0 5px #ccc;*/
}

.custom-filters-container {
    float: left;
    width: 100%;
    /*padding: 15px;*/
}

.custom-filters {
    float: left;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #DDD;
    padding: 15px 15px 5px 15px;
    margin-bottom: 15px;
    /*box-shadow: 0 0 5px #ccc;*/
}

.custom-filters-box {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

    .custom-filters-box .form-control {
        border-radius: 4px;
    }

        .custom-filters-box .form-control:focus {
            border: 1px solid #1E656D;
            box-shadow: none;
        }

.form-box-info {
    float: left;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #DDD;
    padding: 15px 15px 5px 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    word-break: break-word;
}

    .form-box-info label.control-label {
        /*margin-top: 10px;*/
    }

.tile-step-form > .form-box-info {
    margin-top: 10px;
}

.web-form-2 .tile-step-form {
    height: calc(100vh - 269px);
}

.tile-step-item-btns {
    clear: both;
    background: #142127;
    padding: 5px 10px;
    margin: 0 -15px;
    text-align: right;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
/*     Tile Tabs End      */




/*   arrow tabs   */
.arrow-step-container {
    float: left;
    width: 100%;
    /*padding: 0 15px;*/
}

.arrow-step-link-group {
    float: left;
    width: 100%;
    display: flex;
    padding: 10px 15px;
    /*background: #FFF;*/
}

.arrow-step-link {
    text-align: center;
    padding: 0 0px;
    cursor: pointer;
    /*background: #8f9598;*/
}

    .arrow-step-link > span {
        text-align: center;
        padding: 10px 10px 10px 40px;
        color: #FFF;
        margin-right: 5px;
        display: block;
        font-weight: 400;
        position: relative;
        outline: none;
        background: #8f9598;
        /*overflow: hidden;*/
        line-height: 16px;
        height: 50px;
        display: flex;
        vertical-align: middle;
        align-items: center;
    }

    .arrow-step-link span span {
        position: relative;
        z-index: 12;
    }


    /*.arrow-step-link.done span {
        background: #F62A00;
        color: #FFF;
    }*/

    .arrow-step-link.active span {
        background: #09b2b4;
        color: #FFF;
        font-weight: 600;
    }

    .arrow-step-link > span::before {
        position: absolute;
        content: "";
        top: 0px;
        width: 0px;
        height: 100%;
        left: 0px;
        border-top: 25px inset transparent;
        border-bottom: 25px inset transparent;
        border-left: 30px solid #fff;
        z-index: 1;
    }

    .arrow-step-link > span::after {
        width: 0;
        height: 100%;
        border-top: 25px inset transparent;
        border-bottom: 25px inset transparent;
        border-left: 30px solid #8f9598;
        position: absolute;
        content: "";
        top: 0px;
        right: -29px;
        z-index: 2;
    }

    .arrow-step-link.active > span::after {
        border-left: 30px solid #09b2b4;
    }

    .arrow-step-link:first-child > span:before,
    .arrow-step-link:last-child > span:after {
        border: none;
    }





/*.arrow-step-link.active > span::after, .arrow-step-link.done > span::after {
        background:none;
    }*/
/*.arrow-step-link span::after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid red;
        border-bottom: 50px solid transparent;
    }*/

/*.arrow-step-link span::before {
        position: absolute;
        content: "";
        bottom: -4px;
        width: 40px;
        height: 40px;
        left: -8px;
        transform: rotate(0deg);
        background: #8f9598;
        z-index: 10;
    }*/

/*.arrow-step-link:last-child span::before,
    .arrow-step-link:last-child span::after {
        display: none;
    }*/

.arrow-step-item-group {
    float: left;
    width: 100%;
    /*padding: 0px 15px;*/
    border-radius: 6px;
    height: calc(100vh - 236px);
}

.arrow-step-item {
    float: left;
    width: 100%;
    padding: 0px;
    display: none;
    position: relative;
}

    .arrow-step-item.active {
        display: block;
    }

.arrow-tab-item-title {
    float: left;
    width: 100%;
    font-size: 14px;
    padding: 0 0 0px 0;
    font-weight: 600;
    color: #434d52;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.arrow-step-form {
    float: left;
    width: 100%;
    height: calc(100vh - 137px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 15px;
}


.arrow-step-filters {
    float: left;
    width: 100%;
    border: 2px solid #DDD;
    height: calc(100vh - 156px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
}

.web-form-2 .arrow-step-form {
    height: calc(100vh - 236px);
}

.arrow-step-form.with-btns {
    height: calc(100vh - 175px);
}

.arrow-step-item-btns {
    clear: both;
    background: #142127;
    padding: 5px 10px;
    margin: 0 -15px;
    text-align: right;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
/*     Arrow Tabs End      */




/*   Search Tabs Start    */
.search-tab-container {
    float: left;
    width: 100%;
    padding: 10px 0px;
    background: #333 url(../Images/the-background.png);
}

.search-tab-link-group {
    float: left;
    width: 100%;
    /*display: flex;*/
    text-align: center;
    padding: 0px 10px 0 10px;
    margin: 0;
}

.search-tab-link {
    text-align: center;
    display: inline-block;
    padding: 0 0px;
}

    .search-tab-link span {
        text-align: center;
        padding: 6px 20px 5px 20px;
        color: #003471;
        display: block;
        background: #FFF;
        cursor: pointer;
        font-weight: 400;
        position: relative;
        border: 1px solid rgba(20, 33, 39, 0.46);
        border-radius: 4px;
    }


    .search-tab-link.done span {
        background: #0B294C;
        color: #FFF;
    }

    .search-tab-link.active span {
        background: #F62A00;
        color: #FFF;
    }

        .search-tab-link.active span::after {
            position: absolute;
            content: "";
            bottom: -4px;
            width: 7px;
            left: calc(50% - 5px);
            border-bottom: 10px solid #F62A00;
            border-right: 10px solid #F62A00;
            transform: rotate(45deg);
        }

.search-tab-item-group {
    float: left;
    width: 100%;
    margin: 0px 0 0 0;
    border-radius: 6px;
    height: calc(100vh - 220px);
}

.search-tab-item {
    float: left;
    width: 100%;
    /*padding: 15px 15px 0px 15px;*/
    display: none;
    position: relative;
}

    .search-tab-item.active {
        display: block;
    }

    .search-tab-item .search-section {
        background: none;
    }

.search-tab-item-inner {
    float: left;
    width: 100%;
    padding: 15px;
    background: #FFF;
    min-height: calc(100vh - 290px);
}

.search-tab-item-title {
    float: left;
    width: 100%;
    font-size: 14px;
    padding: 0 0 0px 0;
    font-weight: 600;
    color: #434d52;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.search-tab-form {
    float: left;
    width: 100%;
    height: calc(100vh - 235px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
}

.web-form-2 .search-tab-form {
    height: calc(100vh - 269px);
}

.search-tab-item-btns {
    clear: both;
    background: #142127;
    padding: 5px 10px;
    margin: 0 -15px;
    text-align: right;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/*   Search Tabs End    */










.space-bar, .space-bar-22 {
    float: left;
    width: 100%;
    clear: both;
    height: 15px;
}


.space-bar-22 {
    height: 22px;
}


.static-label {
    width: 100%;
    font-weight: 400;
    margin-bottom: 2px !important;
}

.dynamic-label {
    width: 100%;
    font-size: 14px;
    font-weight: normal !important;
}

.dynamic-prifile {
    width: 100px;
}

    .dynamic-prifile img {
        width: 100%;
    }

.form-group .dynamic-label {
    width: 100%;
    font-size: 14px;
}


/*  Enquiry Form Custom  */
.enquiry-form {
    float: left;
    width: 100%;
    height: calc(100vh - 97px);
    /*padding: 15px;*/
    background: #F1F1F1;
    display: flex;
}

.enquiry-profile {
    background: #F5F5F5;
    border: 2px solid #FFF;
    float: left;
    width: 200px;
    box-shadow: 0px 0 5px #aaa;
}

.enquiry-profile-img {
    float: left;
    width: 100%;
    text-align: center;
    background: #FFF;
    padding: 20px 0;
}

    .enquiry-profile-img img {
        width: 120px;
        border-radius: 50%;
        text-align: center;
    }

.enquiry-profile-info {
    float: left;
    width: 100%;
    padding: 15px;
    /*text-align:center;*/
}

    .enquiry-profile-info h4 {
        float: left;
        width: 100%;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #F62A00;
        margin-bottom: 15px;
    }




.enquiry-form-tabs {
    /*background: #FFF;*/
    float: right;
    width: 100%;
    overflow: hidden;
}

.enquiry-tab-item-btns {
    clear: both;
    padding: 4px 30px 4px 60px;
    margin: 0;
    text-align: left;
}

.enquiry-inner-btn-group {
    float: left;
    width: 100%;
    text-align: right;
    margin-bottom: 10px;
}

.enquiry-inner-btn {
    background: none;
    border: none;
    color: #ff462b;
    padding: 5px 10px;
    cursor: pointer;
    outline: none !important;
    border: 1px solid #ff462b;
    transition: all 1s ease;
}

    .enquiry-inner-btn:hover {
        background: #ff462b;
        color: #fff;
    }

/*   Form tabs   */
.form-tab-container {
    float: left;
    width: 100%;
    padding: 0px;
    display: flex;
    height: 100%;
}

.form-tab-link-container {
    float: left;
    width: 50px;
    position: relative;
    background: #000000;
    z-index: 20;
}

.form-tab-link-group {
    /*float: left;*/
    display: flex;
    position: relative;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    height: calc(100% - 80px);
}

    .form-tab-link-group::after {
        position: absolute;
        top: 0px;
        left: 24px;
        content: "";
        width: 2px;
        height: calc(100% - 0px);
        background: #1E656D;
    }

.form-tab-link {
    position: relative;
    text-align: center;
    padding: 0px;
    display: block;
    text-align: center;
}

    .form-tab-link span.label {
        position: absolute;
        background: #0d161a;
        top: -10px;
        left: 50px;
        z-index: 25;
        white-space: nowrap;
        visibility: hidden;
        text-align: center;
        padding: 8px 0px 8px 0px;
        color: #FFF;
        cursor: pointer;
        /*box-shadow: 0 0 5px #666;*/
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        max-width: 0px;
        transition: all 1s ease;
        overflow: hidden;
    }

    .form-tab-link:hover span.label {
        opacity: 1;
        visibility: visible;
        padding: 8px 20px 8px 20px;
        max-width: 1000px;
    }

.dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1E656D;
    display: block;
    position: absolute;
    left: 16.5px;
    cursor: pointer;
    z-index: 30;
}

.form-tab-link.active .dot::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    top: -4px;
    left: -4px;
    border: #1E656D 2px solid;
}

/*.form-tab-link.done span.label {
    background: #003471;
    box-shadow: 0 0 5px #003471;
}*/

/*.form-tab-link.active span.label {
    background: #F62A00;
    box-shadow: 0 0 5px #F62A00;
}*/

.form-tab-link span.label::after {
    position: absolute;
    content: "";
    top: calc(50% - 8px);
    width: 0px;
    left: -5px;
    border-bottom: 1px solid #0d161a;
    border-right: 1px solid #0d161a;
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.form-tab-link:hover span.label::after {
    width: 10px;
    opacity: 1;
    border-bottom: 15px solid #0d161a;
    border-right: 15px solid #0d161a;
}

/*.form-tab-link:hover span.label {
    display: block;
}*/

.form-tab-item-group {
    float: right;
    width: calc(100% - 50px);
    margin: 0;
}

.form-tab-item {
    float: left;
    width: 100%;
    height: calc(100vh - 125px);
    padding: 10px 15px 0px 10px;
    /*padding:15px;*/
    /*padding: 20px 30px 0px 30px;*/
    /*border-radius: 6px;*/
    display: none;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 0.6s ease-in-out;
}

.form-tab-item-group.pop-active .form-tab-item {
    width: calc(100% - 250px);
}

.form-tab-item.active {
    display: block;
}

.form-tab-item-title {
    float: left;
    width: 100%;
    font-size: 16px;
    padding: 0 0 5px 0;
    font-weight: 600;
    color: #003471;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

.form-tab-form {
    float: left;
    width: 100%;
    /*height: calc(100vh - 250px);
    overflow-x: hidden;
    overflow-y: auto;*/
}

.form-tab-item-btns {
    clear: both;
    background: #666;
    padding: 5px 10px;
    margin: 0;
    text-align: right;
}
/*------------------------ tab-tougle-menu ------------------------*/
.tab-tougle-menu {
    float: right;
    width: 250px;
    background: #f1f1f1;
    /*border-left:2px solid #1E656D;*/
    text-align: center;
    position: absolute;
    right: 15px;
    z-index: 99;
    right: -250px;
    transition: all 0.6s ease-in-out;
}

.form-tab-item-group.pop-active .tab-tougle-menu {
    right: 15px;
}

.tab-tougle-menu-inner {
    border-left: 2px solid #9DACB7;
    padding: 8px;
    height: calc(100vh - 105px);
    overflow-y: auto;
}

.tab-profile-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid #999;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 8px;
}

    .tab-profile-image img {
        width: 70px;
        height: 70px;
    }

.tab-profile .name {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 5px;
}

.tab-profile .id-number {
    font-size: 16px;
    color: #1E656D;
    font-weight: 500;
    line-height: 19px;
    margin-bottom: 5px;
}

.tab-profile .contacts {
    display: flex;
    align-items: center;
    vertical-align: middle;
    padding: 15px 0px;
}

.contacts span {
    width: 33.333%;
    padding: 10px 0;
}

    .contacts span a {
        background: #dadcdf;
        padding: 10px 12px;
        border-radius: 50%;
        height: 30px;
        width: 30px;
        font-size: 16px;
        transition: all 0.6s ease;
        cursor: pointer;
    }

        .contacts span a:hover {
            background: #ccc;
        }

.contacts.btns {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

    .contacts.btns .tab-profile-btn {
        font-size: 13px;
        width: 45%;
        color: #fff;
        background: #22a79b;
        border: 1px solid #22a79b;
        margin: 0 4px;
        font-weight: normal;
        padding: 6px 0;
        cursor: pointer;
        outline: none !important;
    }

        .contacts.btns .tab-profile-btn:hover {
            background: #0e7168;
        }

.tab-profile-details {
    padding: 10px;
}

    .tab-profile-details .form-group {
        margin-bottom: 5px;
    }

    .tab-profile-details label {
        width: 100%;
    }

    .tab-profile-details .value-1 {
        font-size: 14px;
        margin: 0;
        letter-spacing: 0.5px;
    }

    .tab-profile-details .value-2 {
        font-size: 14px;
        font-weight: 600;
    }

.collapse-btn {
    position: absolute;
    left: -20px;
    top: 45%;
    color: #fff;
    background: #1E656D;
    font-size: 12px;
    border: 1px solid #1E656D;
    padding: 10px 4px 10px 6px;
    border-radius: 18px 0 0 18px;
    cursor: pointer;
    outline: none !important;
    box-shadow: 0 0 3px #fff;
}







/* search section */
.search-section {
    /*background: #3d4747 url(../Images/SearchBG.png);*/
    background: #fff;
    color: #FFF;
    float: left;
    width: 100%;
    padding: 20px 15px;
    /*border-bottom: 1px solid #eee;*/
}

.tile-step-item .search-section {
    /*margin-top:15px;*/
}

.form-container-full-2 .search-section {
    padding: 0 0 20px 0px;
}

.search-section.left-tab-serach {
    background: none;
    padding: 0;
}

.search-section.tile-tab-serach {
    background: none;
    padding: 10px 0px;
    margin-bottom: 20px;
}

.search-containder {
    background: #FFF;
    float: left;
    width: 100%;
    box-shadow: 0 0 5px #aaa;
    border-radius: 2px;
}



.form-group.no-margin .input-group span .btn.btn-default {
    height: 100%;
}

.search-section .search-containder {
    /*box-shadow: 0 0 0px #666;
    border: 1px solid #ccc;*/
}

.search-control-div {
    padding: 0px 2px 0px 0px;
}

    .search-control-div:first-child {
        padding: 0px 2px 0 15px;
    }

.search-section .search-containder .search-control-div:first-child {
    padding: 0px 0px 0 15px;
}

.search-control-div:last-child {
    padding: 0px 15px 0 0px;
}

.search-control-div input.form-control {
    background: #fff !important;
}

.search-control-div > .form-check {
    padding: 9px 8px 4px 10px;
}

.search-control {
    padding: 8px 15px;
    width: 99.9%;
    border: 0px solid #ddd;
    border-right: 1px solid #9DACB7 !important;
    color: rgba(0,0,0,0.8);
    font-weight: 300;
    background: #fff;
}

    .search-control label {
        white-space: nowrap;
    }
/*.search-control:hover{
    border-right: 1px solid #9DACB7 !important;
}*/

select.search-control {
    padding: 9px 15px 9px 15px;
}


.search-control-div {
    outline: none !important;
}

.search-control-select {
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

    .search-control-select,
    .search-control-select select {
        width: 600px;
    }

.search-control select:focus {
    outline: none;
}

.search-control-select select {
    height: 34px;
    padding: 5px 0 5px 5px;
    background: transparent;
    border: none;
    /*hide default down arrow in webkit */
    -webkit-appearance: none;
}

@-moz-document url-prefix() {
    .search-control-select select {
        width: 110%;
    }
}

.search-control-select .fa-sort-down {
    position: absolute;
    top: 0;
    right: 12px;
    font-size: 24px;
}

.search-control-select select::-ms-expand {
    display: none;
}
/* hide default down arrow in IE10*/

.search-containder .wrapper .selected-items-box {
    padding: 2.3px;
    border: 0;
    border-radius: 0;
    border-right: 1px solid #9DACB7;
}

.search-drop-container .wrapper .selected-items-box {
    border: 1px solid #ced4da !important;
}

.search-containder .form-check {
    color: #000;
}

.search-containder.custom .search-control-div .text-error {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -15px;
    text-align: center;
}


.left-radius-2 {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.search-btn {
    float: left;
    width: 50%;
    padding: 5px;
    background: #1E656D;
    color: #FFF;
    border: none;
    display: block;
    position: relative;
    height: 100%;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
    outline: none !important;
}

.search-clear-btn {
    float: left;
    width: 50%;
    padding: 5px;
    background: #FFF;
    color: #000000;
    border: none;
    display: block;
    position: relative;
    height: 100%;
    cursor: pointer;
    outline: none !important;
}

.search-clear-btn-2 {
    float: left;
    width: 100%;
    padding: 5px;
    background: #FFF;
    color: #F62A00;
    border: none;
    display: block;
    position: relative;
    height: 100%;
    cursor: pointer;
}

.search-drop-holder {
    float: left;
    width: 100%;
    position: relative;
    height: 37px;
    line-height: 37px;
    border-right: 1px solid #9DACB7;
    display: block;
    cursor: pointer;
    color: rgba(0,0,0,0.6);
    padding: 0 10px;
    outline: none;
}

    .search-drop-holder::after {
        position: absolute;
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        right: 15px;
        top: 0px;
        opacity: 0.5;
        font-weight: 600;
        color: #999;
    }

.search-section .search-containder .search-drop-container.width-400.active select {
    border: 1px solid #ced4da;
}

.search-section .search-containder .search-drop-container.width-400.active input {
    border: 1px solid #ced4da;
}

.search-drop-container {
    position: absolute;
    display: none;
    right: 3px;
    top: 40px;
    width: 100%;
    min-height: 200px;
    /*max-height: 300px;*/
    background: #F9F9F9;
    border: 1px solid #aaa;
    color: #666;
    padding: 15px;
    z-index: 99;
}

    .search-drop-container.active {
        display: block;
    }

.search-data-container {
    float: left;
    width: 100%;
    padding: 15px;
    /*background: #FFF url(../Images/character.jpg) no-repeat;*/
    background-size: contain;
    background-position: center;
    height: calc(100vh - 170px);
    overflow-x: hidden;
    overflow-y: auto;
}

.search-containder .search-drop-holder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* imp custmizations */
.form-check {
    padding-left: 0;
}

    .form-check input[type=checkbox], .form-check input[type=radio] {
        opacity: 0;
        position: absolute !important;
    }

/*.data-table input[type="checkbox"]:disabled {
    display: none;
}*/
.icon-color .fa-plus {
    color: #1E656D;
}

.icon-color .fa-minus {
    color: #1E656D;
}



.no-padding {
    padding: 0 !important;
}

.padding-10-15 {
    padding: 10px 15px !important;
}

.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.padding-left-10 {
    padding-left: 10px !important;
}

.padding-right-10 {
    padding-right: 10px !important;
}

.padding-L-R-1 {
    padding: 0 1px !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.top-padding-8 {
    padding-top: 8px !important;
}


.custom-top-bot-pading {
    padding: 7px 15px;
}

.no-margin {
    margin: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}

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

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

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

.bottom-margin-15 {
    margin-bottom: 15px !important;
}

.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.width-70 {
    width: 70px !important;
}

.width-100 {
    width: 100px !important;
}

.width-120 {
    width: 120px !important;
}

.width-175 {
    width: 175px !important;
}

.width-200 {
    width: 200px !important;
}

.width-300 {
    width: 300px !important;
}

.width-400 {
    width: 400px !important;
}

.width-500 {
    width: 500px !important;
}

.width-600 {
    width: 600px !important;
}

.btn-100 {
    width: 100% !important;
}

.chart-200 {
    width: 100%;
    height: 200px;
}

.chart-300 {
    width: 100%;
    height: 300px;
}

.chart-title {
    text-align: right;
    font-weight: 600;
    padding-right: 12px;
}

    .chart-title span {
        font-weight: normal;
    }

.width-max {
    width: 80vw;
    height: calc(100vh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    /*max-width:80%;*/
}
/*   Popup   */
.modal-header {
    background: #142127;
    color: #FFF;
    padding: 4px 15px;
    font-size: 20px;
    border-radius: 0;
}


    .modal-header h3 {
        font-size: 20px;
    }

.modal-title {
}

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

/* pop form   */
.info-popup {
    background: #F9F9F9;
}

.min-height-350 {
    min-height: calc(100vh - 350px) !important;
}

.min-height-240 {
    min-height: calc(100vh - 240px) !important;
}

.pop-form {
    padding: 20px;
    /*max-height: calc(100vh - 90px);*/
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

    .pop-form label {
        font-size: 14px !important;
        font-weight: 500;
    }

.pop-form-info-box {
    float: left;
    width: 100%;
    padding: 15px;
    background: #FFF;
    box-shadow: 0 0 5px #aaa;
    margin-bottom: 10px;
}

.pop-form-title {
    padding: 5px 10px;
    background: #F1F1F1;
    margin: 0 0 20px 0;
    font-weight: 700;
    text-transform: uppercase;
}

.pop-form table .form-control {
    padding: 4px;
}

select.form-control:not([size]):not([multiple]) {
    /*height: calc(2rem + 4.5px);*/
}

.pop-form table td {
    vertical-align: middle;
}

.form-btn-bar-1.popup-footer {
    background: #f5f5f5;
    padding-right: 20px;
    border-top: 1px solid #ccc;
}

.modal-content .form-btn-bar-1.popup-footer .btn-box-right {
    margin: 10px;
}

.modal-content .form-btn-bar-1.popup-footer .btn-box-center {
    margin: 10px;
}

.modal-content .pop-form.scrool-height {
}

.pop-form-footer {
    float: left;
    width: 100%;
    background: #f5f5f5;
    height: 60px;
    padding: 16px 20px;
    text-align: right;
}

.pop-form .tile-step-link-group {
    width: 100% !important;
    margin: 0 !important;
}

.pop-form .data-list-section {
    padding: 0 !important;
}

.pop-form .kendo-grid-search {
    top: 10px !important;
}

.pop-form .static-label {
    font-weight: normal !important;
}

.pop-form label {
    font-weight: normal !important;
}

.k-pager-numbers .k-state-selected {
    border-color: #F62A00 transparent transparent;
    border-radius: 0;
    box-shadow: none;
    color: #3f51b5;
}
/*  Custom Radio Buttons    */
.step-tab-check-btn {
    width: 100%;
    float: left;
}

.two-step-tab-check-btn {
    position: absolute;
    /*top: 24px;
    left: 41px;*/
    top: 8px;
    left: 10px;
    z-index: 1;
}

.data-list-section .two-step-tab-check-btn .custom-btn-checkbox {
    min-width: 100px;
}

    .data-list-section .two-step-tab-check-btn .custom-btn-checkbox .inputGroup {
        margin: 0;
    }

        .data-list-section .two-step-tab-check-btn .custom-btn-checkbox .inputGroup label {
            padding: 3px 8px;
            border-radius: 20px;
        }






.custom-btn-checkbox {
    float: left;
    min-width: 100px;
    margin-right: 10px;
}

.inputGroup {
    background-color: #fff;
    display: block;
    margin: 4px 0;
    position: relative;
}

    .inputGroup label {
        padding: 4px 5px;
        width: 100%;
        display: block;
        text-align: left;
        color: #3c454c;
        cursor: pointer;
        position: relative;
        z-index: 2;
        transition: color 200ms ease-in;
        overflow: hidden;
        border: 1px solid #CCC;
        box-shadow: 0 0 3px #aaa;
        border: 1px solid #CCC;
        box-shadow: 0 0 3px #aaa;
        text-align: center;
        font-weight: 400;
        font-size: 15px;
    }

        .inputGroup label:hover {
            background: #eee;
        }

        .inputGroup label:before {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            content: "";
            background-color: #1E656D;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
            transform: translate(-50%, -50%) scale3d(1, 1, 1);
            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            z-index: -1;
        }
    /*.inputGroup label:after {
  width: 32px;
  height: 32px;
  content: "";
  border: 2px solid #d1d7dc;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}*/
    .inputGroup input:checked ~ label {
        color: #fff;
    }

        .inputGroup input:checked ~ label:before {
            -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
            transform: translate(-50%, -50%) scale3d(56, 56, 1);
            opacity: 1;
        }

        .inputGroup input:checked ~ label:after {
            background-color: #54e0c7;
            border-color: #54e0c7;
        }

    .inputGroup input {
        width: 32px;
        height: 32px;
        order: 1;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        cursor: pointer;
        visibility: hidden;
    }


.form-group ul.form-chkbox {
    margin: 0;
    padding: 0;
}

    .form-group ul.form-chkbox li {
        list-style-type: none;
    }

.rating-radio-btn .custom-btn-checkbox {
    min-width: 40px;
}

/* Custom Popup  */
.custom-smis-popup {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.0);
    transition: all 0.6s ease;
    z-index: 999;
    overflow: hidden;
}

    .custom-smis-popup.active {
        display: block;
        background: rgba(0,0,0,0.5);
        visibility: visible;
        opacity: 1;
    }

.smis-popup-container {
    position: absolute;
    top: 80px;
    background: #FFF;
    display: none;
}

.custom-smis-popup form .smis-popup-container .smis-popup-body .form-group .input-group input {
    max-width: calc(100% - 0px);
}

.custom-smis-popup.active .smis-popup-container {
    display: block;
}

.smis-popup-s {
    min-width: 400px;
    left: calc(50% - 200px);
}

.smis-popup-m {
    width: 600px;
    left: calc(50% - 300px);
}

.smis-popup-l {
    width: 800px;
    left: calc(50% - 400px);
}

.smis-popup-xl {
    width: 1000px;
    left: calc(50% - 500px);
}

.smis-popup-header {
    float: left;
    width: 100%;
    background: #000000;
    padding: 5px;
}

.popup-title-label {
    float: left;
    width: calc(100% - 30px);
    color: #FFF;
}

.smis-popup-close {
    float: right;
    width: 20px;
    /*color: #F62A00;*/
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: all 0.6s ease;
}

    .smis-popup-close:hover {
        font-weight: 700;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 2px;
        color: #000;
    }

.smis-popup-body {
    float: left;
    width: 100%;
    padding: 20px;
    overflow: auto;
    max-height: calc(100vh - 160px);
}

.smis-popup-footer {
    float: left;
    width: 100%;
}

.pop-full-btn {
    float: left;
    width: 100%;
    background: #F62A00;
    padding: 5px;
    text-align: center;
    border: 0px;
    color: #fff;
    cursor: pointer;
    outline: none !important;
}

    .pop-full-btn:hover {
        background: #ad2e3f;
    }

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

.modal-header .close {
    color: #FFF;
    text-shadow: 0 0 0 #fff;
    /*font-size: 24px;*/
    padding: 0;
    margin: 0px 0 0 0;
    box-shadow: none !important;
    outline: none !important;
}

    .modal-header .close i {
        font-size: 16px !important;
    }

.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
    color: #fff;
}

.change-pwd-block {
    width: 100%;
    padding: 20px 0 0 0;
    float: left;
}

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


/*Check box*/
input[type="checkbox"] + .label-text::before {
    content: "\f0c8";
    font-family: "Font Awesome 5 Free";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    width: 1em;
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    color: #209b60;
}

.form-check {
    margin-bottom: 0;
    display: inherit;
}

    .form-check label {
        margin-bottom: 0;
    }

    .form-check.bottom-space {
        margin-bottom: 15px;
    }

.label-text {
    font-size: 12px;
}

input[type="checkbox"]:checked + .label-text:before {
    content: "\f14a";
    color: #1E656D;
    animation: effect 250ms ease-in;
}

input[type="checkbox"]:disabled + .label-text {
    color: #aaa;
}

    input[type="checkbox"]:disabled + .label-text:before {
        /*content: "\f14a";*/
        color: #aaa;
    }

input[type="checkbox"]:checked[disabled] + .label-text:before {
    content: "\f14a";
}

.check-box-disabled {
    pointer-events: none;
}

.check-box-group input {
    float: left;
    width: 20px;
    margin-top: 3px;
}

.check-box-group label {
    float: left;
    padding-left: 2px;
    width: calc(100% - 20px);
}

.tool-tip-input input[type="checkbox"]:disabled {
    display: none;
}
/*Radio box*/

input[type="radio"] + .label-text:before {
    content: "";
    /*content: "\f192";
    font-family: "Font Awesome 5 Free";
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;*/
    width: 16px;
    height: 16px;
    border: 3px solid #888;
    background: #FFF;
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
    /*font-weight: 900;
    color: #aaa;
    font-size:14px;*/
    position: relative;
    top: 4px;
}

input[type="radio"]:checked + .label-text:before {
    content: "";
    border: 3px solid #209b60;
    background: rgb(32,155,96);
    background: radial-gradient(circle, rgba(32,155,96,1) 0%, rgba(32,155,96,1) 50%, rgba(255,255,255,1) 50.1%, rgba(255,255,255,1) 74%, rgba(32,155,96,1) 74.1%, rgba(32,155,96,1) 100%);
    color: #F62A00;
    animation: effect 250ms ease-in;
    font-weight: 100;
}

input[type="radio"]:disabled + .label-text {
    color: #aaa;
}

    input[type="radio"]:disabled + .label-text:before {
        content: "\f111";
        color: #ccc;
    }
/*Radio Toggle*/

.toggle input[type="radio"] + .label-text:before {
    content: "\f204";
    font-family: "Font Awesome 5 Free";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    width: 1em;
    display: inline-block;
    margin-right: 10px;
}

.toggle input[type="radio"]:checked + .label-text:before {
    content: "\f205";
    color: #F62A00;
    animation: effect 250ms ease-in;
}

.toggle input[type="radio"]:disabled + .label-text {
    color: #aaa;
}

    .toggle input[type="radio"]:disabled + .label-text:before {
        content: "\f204";
        color: #ccc;
    }

@keyframes effect {
    0% {
        transform: scale(0);
    }

    25% {
        transform: scale(1.3);
    }

    75% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}
/*   checkbox   big  */
.check-box-box, .radio-box-box {
    background: #FFF url(../images/type-checked-icon.svg) 10px 14px no-repeat;
    background-size: auto 15px;
    padding: 10px 40px;
    text-align: left;
    width: calc(100% - 10px) !important;
    margin: 0 0px 15px 0;
    cursor: pointer;
    /*box-shadow: 0 0 5px #666;*/
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    position: relative;
    transition: all 0.9s ease;
    box-shadow: 0 0 5px #AAA;
}

.radio-box-box {
    background: url(../images/radio-button-off.svg) 10px 9px no-repeat;
    background-size: auto 15px;
    transition: all 0.9s ease;
}

.check-box-box.active {
    background: #036D41 url(../images/type-checked-icon.svg) 10px 14px no-repeat;
    background-size: auto 15px;
    color: #fff;
    border: 1px solid #036D41;
}

.radio-box-box.active {
    background: #F62A00 url(../images/radio-button-on.svg) 10px 9px no-repeat;
    background-size: auto 15px;
    color: #fff;
}

.check-box-box input[type="checkbox"], .check-box-box input[type="radio"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}




/*      Loader Start     */
#loader-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
}

.loader {
    height: 20px;
    width: 250px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.loader--dot {
    animation-name: loader;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: black;
    position: absolute;
    /*border: 2px solid white;*/
}

    .loader--dot:first-child {
        background-color: #8cc759;
        animation-delay: 0.5s;
    }

    .loader--dot:nth-child(2) {
        background-color: #8c6daf;
        animation-delay: 0.4s;
    }

    .loader--dot:nth-child(3) {
        background-color: #ef5d74;
        animation-delay: 0.3s;
    }

    .loader--dot:nth-child(4) {
        background-color: #f9a74b;
        animation-delay: 0.2s;
    }

    .loader--dot:nth-child(5) {
        background-color: #60beeb;
        animation-delay: 0.1s;
    }

    .loader--dot:nth-child(6) {
        background-color: #F62A00;
        animation-delay: 0s;
    }

.loader--text {
    position: absolute;
    top: 200%;
    left: 0;
    right: 0;
    width: 4rem;
    margin: auto;
    color: #FFF;
}

    .loader--text:after {
        content: "Loading";
        font-weight: bold;
        animation-name: loading-text;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

@keyframes loader {
    15% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(230px);
    }

    65% {
        transform: translateX(230px);
    }

    95% {
        transform: translateX(0);
    }
}

@keyframes loading-text {
    0% {
        content: "Loading";
    }

    25% {
        content: "Loading.";
    }

    50% {
        content: "Loading..";
    }

    75% {
        content: "Loading...";
    }
}
/*    Loader End     */





/*   Slide Form  */
.slide-form {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 52, 113, 0.50);
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease;
}

    .slide-form.active {
        visibility: visible;
        opacity: 1;
    }

.slide-form-container,
.slide-form-container-s,
.slide-form-container-m,
.slide-form-container-l,
.slide-form-container-xl,
.slide-form-container-xxl {
    position: absolute;
    width: 500px;
    height: 100vh;
    padding: 0px 0px 0 0px;
    top: 0;
    background: #FFF;
    right: -1500px;
    transition: all 1s ease;
    max-width: 90%;
}

.slide-form-container-s {
    width: 300px;
}

.slide-form-container-m {
    width: 600px;
}

.slide-form-container-l {
    width: 800px;
}

.slide-form-container-xl {
    width: 900px;
}

.slide-form-container-xxl {
    width: 85%;
}

.slide-form.active .slide-form-container,
.slide-form.active .slide-form-container-s,
.slide-form.active .slide-form-container-m,
.slide-form.active .slide-form-container-l,
.slide-form.active .slide-form-container-xl,
.slide-form.active .slide-form-container-xxl {
    right: 0;
}



.slide-form-title {
    float: left;
    width: 100%;
    padding: 6px 20px;
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
    color: #142127;
    background: #CAD2D8;
    /*margin-bottom:20px;*/
}

.slide-form-close {
    position: absolute;
    width: 39px;
    height: 39px;
    line-height: 30px;
    text-align: center;
    background: #F62A00;
    color: #FFF;
    top: 0px;
    left: 0px;
    transition: all 1s ease;
    cursor: pointer;
    padding: 5px 0;
    font-size: 17px;
    border-radius: 0 0 0 10px;
    outline: none !important;
    z-index: 99;
}

.slide-form.active .slide-form-close {
    left: -39px;
}

.slide-form-back {
    position: absolute;
    width: 39px;
    height: 39px;
    line-height: 30px;
    text-align: center;
    background: #F62A00;
    color: #FFF;
    top: 0px;
    left: 0px;
    transition: all 1s ease;
    cursor: pointer;
    padding: 5px 0;
    font-size: 17px;
}

.slide-form.active .slide-form-back {
    left: -39px;
}

.slide-form-controls {
    float: left;
    width: 100%;
    padding: 10px 20px;
    height: calc(100vh - 90px);
    overflow-y: auto;
    word-wrap: break-word;
}

    .slide-form-controls .data-table {
        overflow-x: unset;
    }

    .slide-form-controls .demo-section.k-content.wide label {
        padding: 5px 5px 0px 10px;
    }

.slide-form-sub-title {
    width: 100%;
    float: left;
    font-weight: 400;
    color: #666;
    margin: 10px 0;
    padding: 0px;
}

.slide-form-btns {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 20px 10px;
    text-align: right;
    background: #ECEFF1;
    border-top: 2px solid #ccc;
    clear: both;
}

.slide-form-left {
    float: left;
    padding: 10px 0 0 0;
}

.slide-form-right {
    float: right;
}

.slide-form-btns button {
    margin-right: 10px;
}

    .slide-form-btns button:last-child {
        margin-right: 0px;
    }


.data-table-btn {
    background: #FFF;
    color: #F62A00;
    border: 1px #F62A00 solid;
    border-radius: 4px;
    transition: all 0.6s ease;
    padding: 2px 15px;
}

    .data-table-btn:hover {
        box-shadow: 0 0 10px #F62A00;
    }

    .data-table-btn.active {
        background: #F62A00;
        border: 1px #F62A00 solid;
        color: #FFF;
    }

.slide-form-btn {
    background: #FFF;
    color: #1E656D;
    border: 1px #1E656D solid;
    border-radius: 0;
    transition: all 0.6s ease;
    /*min-width: 100px;*/
    outline: none !important;
    box-shadow: none !important;
}

    .slide-form-btn:hover {
        color: #fff;
        background: #1E656D;
    }

    .slide-form-btn.active {
        background: #1E656D;
        border: 1px #176b43 solid;
        border-radius: 0;
        color: #FFF;
    }

        .slide-form-btn.active:hover {
            background: #00293C;
            border-color: #00293C;
        }

.slide-form-table {
    float: left;
    width: 100%;
    padding: 0 15px;
    margin-bottom: 15px;
}

.slide-form .user-profile-section {
    width: 100%;
    height: 100%;
}

.btn-red {
    color: #fff !important;
    background: #d31717 !important;
    padding: 5px 12px;
    border-color: #d31717 !important;
    border: 1px #1E656D solid;
    transition: all 0.3s ease;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

.btn-red {
    background: #b71719 !important;
}

.custom-link {
    color: #1E656D;
}

    .custom-link:hover {
        /*color: #1E656D;*/
        text-decoration: underline;
    }

.new-add-link {
    float: left;
    width: 100%;
    padding: 5px 0 5px 0;
}

    .new-add-link a {
        color: #F62A00;
    }

.new-add-block {
    float: left;
    width: 100%;
    padding: 0;
    background: #f4f4f4;
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease;
    margin-bottom: 0;
}

    .new-add-block.active {
        /*padding: 8px 15px;*/
        padding: 8px 15px 15px 15px;
        overflow: auto;
        max-height: 500px;
        visibility: visible;
        opacity: 1;
        /*margin-bottom: 15px;*/
        border: 1px solid #aaa;
    }

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

.new-add-block .form-group {
    /*margin-bottom: 0;*/
}

.new-add-block .slide-form-btn {
    min-width: inherit;
}

.custom-btn-box {
    padding: 30px 0px 10px 0px;
}

    .custom-btn-box .slide-form-btn {
        border-radius: 30px;
        padding: 2px 10px 2px 2px;
        color: #e97f00;
        background: #fff;
        border: 1px solid #e97f00;
        margin: 2px;
        text-transform: capitalize;
        outline: none !important;
        box-shadow: none;
    }

        .custom-btn-box .slide-form-btn i {
            color: #fff !important;
            background: #e97f00;
            width: 21px;
            height: 21px;
            padding: 5px 4.5px 4px 4px;
            border-radius: 50%;
            margin-right: 2px;
            font-size: 12px;
        }

        .custom-btn-box .slide-form-btn:hover i {
            color: #e97f00 !important;
            background: #fff !important;
        }

        .custom-btn-box .slide-form-btn.active, .custom-btn-box .slide-form-btn:hover {
            color: #fff;
            background: #e97f00;
            border: 1px solid #e97f00;
        }

            .custom-btn-box .slide-form-btn.active i {
                color: #e97f00;
                background: #fff !important;
            }

/*    Jquery Data Filters    */
.data-filters {
    margin-bottom: -71px;
}

.dataTables_length {
    float: right;
}

    .dataTables_length select {
        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;
}

    .dataTables_filter input {
        padding: 0.4rem 0.75rem;
        line-height: 1.25;
        color: #495057;
        border-radius: 0.25rem;
        border: 1px solid #ddd;
        height: 32px;
    }


table.dataTable thead {
    background: #F5F3F2;
    text-transform: uppercase;
}

    table.dataTable thead th, table.dataTable thead td {
        border-bottom: 1px solid #ddd;
    }

.table.dataTable thead th, table.dataTable tfoot th {
    font-weight: 400;
}

/*------------------------ Finance Dashboard Css Start Here ------------------------*/

.finance-bashboard {
    padding: 30px;
    /*background: #f5f5f5;*/
}
/*.form-group{
	margin-bottom: 10px;
}*/
.dashboard-form-control {
    width: 100%;
}

.finance-bashboard .form-group select.dashboard-form-control {
    padding: 5px 10px 3px;
    color: #000;
    border-radius: 30px;
    border: 1px solid #999;
    outline: none;
}

.finance-bashboard input.dashboard-form-control {
    border-radius: 30px;
    height: unset !important;
    background: #fff;
    color: #1E656D;
    padding: 0 10px;
    border: 1px solid #999;
    border-right: 0;
}

.finance-bashboard .input-group .form-control {
    height: 28px !important;
}

.finance-bashboard .input-group span button.btn-default {
    height: 28px !important;
}

.finance-bashboard .input-group span button {
    border-radius: 0 30px 30px 0;
    border: 1px solid #999;
    padding: 3px 10px 2px;
}

.finance-db-btn {
    background: #000;
    color: #FFF;
    letter-spacing: 1px;
    font-size: 14px;
    outline: none !important;
    border: 0;
    padding: 4px 15px 2px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.6s ease;
}

    .finance-db-btn.active {
        background: #1E656D;
        color: #FFF;
    }

    .finance-db-btn:hover {
        box-shadow: 0 0 8px #999;
    }

.finance-bd-block {
    margin-bottom: 10px;
}

.finance-db-left {
    float: left;
    width: calc(100% - 300px);
}

.finance-db-right {
    float: left;
    width: 300px;
    padding: 0 10px;
}

.finance-db-section-left {
    float: left;
}

    .finance-db-section-left .sub-title {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 7px;
    }

.finance-db-section-right {
    float: right;
    max-width: 70%;
}

.finance-db-section {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.finance-db-box-left {
    float: left;
    width: calc(100% - 250px);
    padding-right: 15px;
    border-right: 1px solid #ccc;
}

.finance-db-box-right {
    float: right;
    width: 250px;
    padding-left: 15px;
}

.finance-box {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 5px;
    height: 70px;
    overflow: hidden;
    text-align: center;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    cursor: default;
}

    .finance-box:hover {
        box-shadow: 0 0 3px #333;
    }

    .finance-box.custom {
        background: #f1f1f1;
    }

    .finance-box label {
        font-size: 15px;
        line-height: 17px;
        font-weight: 600;
        text-align: center;
        /*margin: 0;*/
    }

    .finance-box span {
        font-size: 10px;
        line-height: 12px;
        text-align: center;
        display: block;
    }

.document-filters {
    padding: 0;
    margin: 0;
    float: right;
    text-align: right;
}

    .document-filters li {
        list-style-type: none;
        display: inline-block;
        width: 25%;
        float: right;
        padding-left: 10px;
    }

        .document-filters li.btn-li {
            width: 110px;
        }

.finance-box.custom-2 {
    color: #000;
    font-size: 14px;
    line-height: 15px;
    height: 52px;
    display: flex;
    align-items: center;
}

    .finance-box.custom-2 .finance-box-1 {
        float: left;
        width: 40px;
        padding: 10px 5px;
        border-radius: 4px;
        font-size: 20px;
    }

    .finance-box.custom-2 .finance-box-2 {
        float: left;
        width: calc(100% - 58px);
        text-align: left;
        vertical-align: middle;
        overflow: hidden;
        padding: 0px 5px;
    }

    .finance-box.custom-2 .finance-box-3 {
        float: right;
        width: 18px;
        padding: 5px 0px;
        font-size: 18px;
    }

.finance-box.custom-3 {
    padding: 5px;
}

    .finance-box.custom-3 .finance-box-1 {
        float: left;
        text-align: left;
        width: calc(100% - 20px);
        overflow: hidden;
    }

        .finance-box.custom-3 .finance-box-1 label {
            text-align: left;
            margin-bottom: 5px;
        }

        .finance-box.custom-3 .finance-box-1 span {
            text-align: left;
        }

    .finance-box.custom-3 .finance-box-2 {
        float: right;
        width: 20px;
        padding: 11px 0px;
        font-size: 20px;
    }

.finance-box.custom-padding {
    padding: 19px 5px;
}

.selected-items-box.dashboard-select-box {
    border-radius: 30px !important;
    height: 28px;
    border: 1px solid #999 !important;
}

    .selected-items-box.dashboard-select-box .selected-items {
        padding: 4px 10px;
        min-height: 25px;
    }

    .selected-items-box.dashboard-select-box .dropdown-icon {
        top: 4px;
    }

.list.db-custom {
    top: 28px !important;
}


.color-purple {
    color: #1E656D !important;
}

.color-green {
    color: #7cc43c !important;
}

.color-green-1 {
    color: #139f6d !important;
}

.color-pink {
    color: #bc11db !important;
}

.color-orange {
    color: orange !important;
}

.color-red {
    color: #df0d0d !important;
}

.color-blue {
    color: #2c2cdd !important;
}

.color-blue-1 {
    color: #0596ec !important;
}

.background-purple {
    background: #d8dbfa !important;
}

.background-green {
    background: #bbeedf !important;
}

.background-pink {
    background: #f4c3fd !important;
}

.background-orange {
    background: #fee2cd !important;
}

.custom-color-1 {
    background: #0075ff !important;
}

.custom-color-2 {
    background: #ffbf00 !important;
}



.finance-db-chart-box {
    background: #f1f1f1;
    border: 1px solid #999;
    height: 270px;
    margin-bottom: 10px;
}

    .finance-db-chart-box .highcharts-axis-labels.highcharts-xaxis-labels text {
        fill: #666666 !important;
    }

.finance-db-box-left > ul {
    padding: 0;
    margin: 0;
}

    .finance-db-box-left > ul > li {
        list-style-type: none;
        display: inline-block;
        width: 33.333%;
        float: left;
    }

.finance-box.custom-1 {
    border-radius: 0;
    border: none;
    margin-bottom: 0;
}

.finance-db-box-right .finance-db-chart-box {
    height: 178px;
    margin-bottom: 0;
}

.finance-db-notes .boxed {
    float: left;
    width: 50%;
    border-right: 1px solid #ccc;
    background: #f1f1f1;
    height: 131px;
}

    .finance-db-notes .boxed:last-child {
        border: none;
    }

.custom-responsive-1 {
    padding: 0;
    margin: 0;
}

    .custom-responsive-1 li {
        list-style-type: none;
        width: 100%;
        float: left;
    }

.custom-responsive-2 {
    padding: 0;
    margin: 0;
}

    .custom-responsive-2 li {
        list-style-type: none;
        width: 100% !important;
        float: left;
    }

.custom-responsive-3 {
    padding: 0;
    margin: 0;
}

    .custom-responsive-3 li {
        width: 100% !important;
        list-style: none;
    }

.custom-responsive-4 {
    padding: 0;
    margin: 0;
}

    .custom-responsive-4 li {
        width: 100% !important;
        list-style: none;
    }

/*----------------*/
.chart-select-box {
    width: 100%;
}

    .chart-select-box > ul {
        text-align: left;
        margin: 0;
        padding: 0;
        padding-bottom: 10px;
    }

        .chart-select-box > ul > li {
            list-style-type: none;
            display: inline-block;
            text-align: center;
            width: inherit !important;
        }

.chart-select-btn {
    text-align: center;
    background: #F1F1F1;
    border: 1px solid #ccc;
    padding: 2px 10px;
    transition: all 0.6s ease;
    cursor: pointer;
}

    .chart-select-btn:hover {
        background: #f5f5f5;
    }

    .chart-select-btn.active {
        background: #1E656D;
        color: #fff;
    }


/*FinanceHeadDashboardV2*/
/*finance-tab-item-1*/
.finance-tab-item-1 .finance-db-section .finance-db-box-left {
    width: calc(100% - 400px);
}

.finance-tab-item-1 .finance-db-section .finance-db-box-right {
    width: 400px;
}

.finance-db-notes.custom .boxed {
    border: 0;
    background: #fff !important;
    height: 250px;
}

    .finance-db-notes.custom .boxed.left {
        padding: 55px 10px 0 0;
        margin: 0 auto;
        text-align: center;
    }

        .finance-db-notes.custom .boxed.left button {
        }

.btn-style-1 {
    font-size: 15px;
    padding: 2px 10px;
    width: 170px;
    background: none;
    border: 1px solid #ccc;
    border-radius: 30px;
    text-align: center;
    cursor: pointer;
    color: #1E656D;
    outline: none !important;
}

    .btn-style-1.active {
        background: #1E656D;
        color: #fff;
    }

.finance-db-notes.custom .boxed.left button:hover {
    background: #1E656D;
    color: #fff;
    transition: all 0.6s ease;
}

.finance-db-notes.custom .boxed.right {
    background: #f1f1f1 !important;
}
/*finance-tab-item-2*/
.finance-tab-item-2 .finance-db-section .finance-db-box-left {
    width: calc(100% - 500px);
}
/*finance-tab-item-3*/
.finance-tab-item-3 .finance-db-section .finance-db-box-left {
    width: calc(100% - 400px);
}

.finance-tab-item-3 .finance-db-section .finance-db-box-right {
    width: 400px;
}

.finance-tab-item-3 .finance-db-section .finance-db-box-left .finance-db-box-inner-left {
    float: left;
    width: 200px;
}

.finance-tab-item-3 .finance-db-section .finance-db-box-left .finance-db-box-inner-right {
    float: left;
    width: calc(100% - 200px);
    padding-left: 15px;
}

    .finance-tab-item-3 .finance-db-section .finance-db-box-left .finance-db-box-inner-right .finance-db-chart-box {
        height: 285px;
    }

.finance-tab-item-3 .finance-db-section .finance-db-box-right .finance-db-chart-box {
    height: 145px;
}
/*finance-tab-item-4*/
.finance-tab-item-3.tab-4 .finance-db-section .finance-db-box-right .finance-db-chart-box {
    height: 285px;
}



/*------------------------ Finance Dashboard Css End Here ------------------------*/


/*   dashboard     */
.dashboard-form {
    float: left;
    width: 100%;
    margin-top: 0px;
    background: #F8F8F8;
    /*min-height: calc(100vh - 65px);*/
    min-height: calc(100vh - 92px);
}

/*.dashboard-form .page-title {
        background: #FFF;
    }*/

.dashboard-section-1,
.dashboard-section-2,
.dashboard-section-3,
.dashboard-section-4,
.dashboard-section-5 {
    float: left;
    width: 100%;
    padding: 0 0 15px 0;
    overflow: hidden;
    position: relative;
}

.dashboard-section-1 {
    padding: 0px;
}

.dashboard-section-2 {
    height: 370px;
    padding: 0 15px 15px 0px;
}

.dashboard-section-3 {
    padding: 5px 0 15px 0;
}

.dashboard-section-4 {
    padding: 5px 15px 15px 15px;
}

.dashboard-section-5 {
    padding: 5px 15px 15px 15px;
}

.dashboard-section-inner {
    float: left;
    width: 100%;
    padding: 0;
    display: block;
    height: 340px;
    position: relative;
    overflow: hidden;
}

.dashboard-container {
    width: 100%;
    padding: 0 15px;
    float: left;
    /*height: calc(100vh - 111px);*/
    height: calc(100vh - 133px);
    overflow-y: auto;
}




/*   dashboard left info start     */
.dash-num-info {
    float: left;
    width: 100%;
    height: 140px;
    padding: 0;
    margin-bottom: 15px;
    /*text-align: center;*/
    /*display: flex;*/
}


.dash-num-box {
    position: relative;
    /*width: 24%;*/
    width: 19%;
    float: left;
    min-height: 120px;
    margin: 0 auto;
    padding: 0 10px;
    transition: all 0.6s ease;
    cursor: pointer;
}

.dash-num-info.dash-num-info-5 .dash-num-box {
    width: 19%;
}



.dash-num-box.active {
    /*width: 28%;*/
    width: 24%;
}

.dash-num-info.dash-num-info-5 .dash-num-box.active {
    width: 24%;
}

.dash-num-box-inner {
    float: left;
    width: 100%;
    height: 100%;
    background: linear-gradient(60deg,#fff,#fff);
    box-shadow: 0 0 3px #eee;
    padding: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all 0.6s ease;
    position: relative;
    overflow: hidden;
}

    .dash-num-box-inner::after {
        position: absolute;
        font-size: 32px;
        content: "";
        font-family: "Font Awesome 5 Free";
        right: 15px;
        top: 10px;
        opacity: 0.5;
        font-weight: 600;
        transition: all 0.6s ease;
    }

    .dash-num-box-inner.total-enq::after {
        color: #00acc1;
        content: "\f0ea";
    }

     .dash-num-box-inner.moderation::after {
        color: #e364d0;
        content: "\f51c";
    }

     .dash-num-box-inner.admin::after {
        color: #e8e676;
        content: "\f164";
    }

    .dash-num-box-inner.copture-enq::after {
        color: #43a047;
        content: "\f044";
    }

    .dash-num-box-inner.sent-comme::after {
        color: #e53935;
        content: "\f560";
    }

    .dash-num-box-inner.waiting::after {
        color: #fb8c00;
        content: "\f252";
    }

    .dash-num-box-inner.registration::after {
        color: #fb0000;
        content: "\f2bb";
    }
    .dash-num-box-inner.registration::after {
        color: #fb0000;
        content: "\f2bb";
    }
    .dash-num-box-inner.registration::after {
        color: #fb0000;
        content: "\f2bb";
    }

.dash-num-box.active .dash-num-box-inner::after {
    color: #FFF;
    font-size: 40px;
}

.dash-num-box:hover .dash-num-box-inner::after {
    color: #FFF;
}

.dash-num-box-mask {
    position: absolute;
    width: 100%;
    height: 0%;
    left: 0;
    top: 0;
    transition: all .6s cubic-bezier(.1, .5, .5, 1);
    z-index: 0;
}

.dash-num-box:hover .dash-num-box-mask {
    height: 100%;
}

.dash-num-box.active .dash-num-box-mask {
    height: 100%;
}

.dash-num-box-1 .dash-num-box-mask {
    background: linear-gradient(60deg,#26c6da,#00acc1);
}

.dash-num-box-2 .dash-num-box-mask {
    background: linear-gradient(60deg,#66bb6a,#43a047);
}

.dash-num-box-3 .dash-num-box-mask {
    background: linear-gradient(60deg,#ef5350,#e53935);
}

.dash-num-box-4 .dash-num-box-mask {
    background: linear-gradient(60deg,#ffa726,#fb8c00);
}

.dash-num-box-5 .dash-num-box-mask {
    background: linear-gradient(60deg,#5d36ae,#7648d4);
}

.dash-num-box-1.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4);
}

.dash-num-box-2.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(76,175,80,.4);
}

.dash-num-box-3.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(244,67,54,.4);
}

.dash-num-box-4.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(255,152,0,.4);
}

.dash-num-box-5.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(118,72,212,.4);
}

.dash-num-info .num-label {
    position: relative;
    z-index: 1;
    font-size: 12px;
    width: 100%;
    color: #9297b6;
    font-weight: 400;
    text-transform: uppercase;
    transition: all 0.6s ease;
    cursor: pointer;
}

.dash-num-info .dash-num-box.active .num-label,
.dash-num-info .dash-num-box:hover .num-label {
    color: #FFF;
}

.dash-num-info .num-value {
    font-size: 28px;
    font-weight: 600;
    color: #393c51;
    clear: both;
    width: 100%;
    margin-bottom: 0;
    position: relative;
    transition: all 0.6s ease;
    cursor: pointer;
    z-index: 1;
}

.dash-num-info .dash-num-box.active .num-value,
.dash-num-info .dash-num-box:hover .num-value {
    color: #FFF;
}

.dash-num-info-box i {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}



.chart-data-info {
    float: left;
    width: 100%;
    position: absolute;
    height: 340px;
}

.dash-chart-1, .dash-chart-2, .dash-chart-3, .dash-chart-4, .dash-chart-5 {
    left: 200%;
    transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
    -webkit-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
    -moz-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
    -o-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
}

    .dash-chart-1.active, .dash-chart-2.active, .dash-chart-3.active, .dash-chart-4.active, .dash-chart-5.active {
        transform: translateX(-200%);
    }


.chart-filters {
    width: 100%;
    display: block;
    padding: 5px 0px 0 0;
}

    .chart-filters input[type=radio] {
        position: absolute;
        visibility: hidden;
    }

.button-group-pills .btn {
    border-radius: 20px;
    line-height: 1.2;
    margin-bottom: 0px;
    margin-left: 10px;
    border: 1px solid #ddd;
    background-color: #FFF;
    color: #888;
    font-size: 12px;
    /*box-shadow: 0 0 3px 3px #ddd;*/
    position: relative;
    overflow: hidden;
}

    .button-group-pills .btn.active {
        background-color: #1E656D;
        border-color: #1E656D;
        color: #FFF;
    }

    .button-group-pills .btn:hover {
        background: none;
        color: #FFF;
    }

    .button-group-pills .btn::before,
    .button-group-pills .btn::after {
        content: '';
        position: absolute;
        height: 105%;
        width: 105%;
        bottom: 100%;
        left: -2.5%;
        z-index: -1;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }

    .button-group-pills .btn::before {
        background: #1E656D;
    }

    .button-group-pills .btn::after {
        background: #1E656D;
    }

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

        .button-group-pills .btn:hover::before,
        .button-group-pills .btn:hover::after {
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }

        .button-group-pills .btn:hover::after {
            -webkit-transition-delay: 0.175s;
            transition-delay: 0.175s;
        }



.dashboard-data-title {
    float: left;
    width: 100%;
    font-size: 14px;
    padding: 0 0 15px 0;
    font-weight: 400;
}

.dashboard-data-table {
    font-size: 12px;
    background: #FFF;
    padding: 15px;
    box-shadow: 0 0 5px #EEE;
}

    .dashboard-data-table table {
        border: 1px solid #f1f1f1;
        border-top: 0px solid #f1f1f1;
    }

    .dashboard-data-table th, .dashboard-data-table td {
        background: #FFF;
        border-color: #f1f1f1;
        transition: all 0.6s ease;
    }

    .dashboard-data-table th {
        font-weight: 400;
    }

    .dashboard-data-table tr:hover td {
        background: #F1F1F1;
    }


/*   dashboard left info end     */


/*    dash data card info    */

.dash-data-info {
    width: 100%;
    float: left;
    padding: 0 15px 15px 15px;
}

.dash-data-card {
    width: 100%;
    float: left;
    min-height: 146px;
    margin: 0 auto;
    padding: 0 15px;
    transition: all 0.6s ease;
    background: #FFF;
    /*border-radius: 10px;*/
    color: #666;
    box-shadow: 0 0 4px 3px #eee;
}

.data-card-color-1 {
    background: #3F51B5;
}

.data-card-color-2 {
    background: #3F51B5;
}

.data-card-color-3 {
    background: #3F51B5;
}

.data-card-color-4 {
    background: #3F51B5;
}

.dash-data-card:hover {
    background: #3F51B5;
    color: #FFF;
    box-shadow: 0 0 9px 3px #ccc;
}

.dash-data-card-inner {
    float: left;
    width: 100%;
    padding: 10px 0px;
    transition: all 0.6s ease;
}

.dash-data-card-title {
    float: left;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.dash-data-card:hover .dash-data-card-title {
    color: #FFF;
}

.dash-data-card-info {
    float: left;
    width: 50%;
    padding: 10px;
    font-size: 12px;
}

    .dash-data-card-info span {
        float: left;
        width: 100%;
        color: #393c51;
        font-size: 20px;
        font-weight: 600;
    }

.dash-data-card:hover .dash-data-card-info span {
    color: #FFF;
}

.dash-data-card-full-info {
    float: left;
    width: 100%;
    padding: 10px;
    font-size: 28px;
    text-align: center;
    color: #1E656D;
    font-weight: 600;
}



/*   dashboard right info start     */

.dash-right-info {
    float: left;
    position: relative;
    width: calc(100% - 15px);
    /*min-height: 100%;*/
    background: #FFF;
    padding: 0 0 14px 0px;
    box-shadow: 0 0 9px 3px #eee;
}

    .dash-right-info .col-lg-4 {
        border-right: 2px solid rgba(255,255,255,0.2);
    }

.dash-right-info-box {
    float: left;
    width: 100%;
}

.dash-right-title {
    float: left;
    width: 100%;
    padding: 15px 25px;
    font-size: 14px;
    font-weight: 400;
    color: #1E656D;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dash-right-title-custom {
    width: calc(100% - 30px);
    margin: 0 15px;
    background: #1E656D;
    color: #FFF;
    padding: 5px 15px;
    text-align: left;
    border-bottom: 1px solid #CCC;
    line-height: 20px;
}

.todo-add-btn {
    float: right;
    margin: -30px 16px 0 0;
    color: #FFF;
    font-weight: 600;
    border-left: 1px solid rgba(255,255,255,0.5);
    padding: 0 6px 0 6px;
    cursor: pointer;
    font-size: 20px;
    background: rgba(0,0,0,0.3);
}

.dash-right-todo-list {
    margin: 0;
    padding: 0 25px;
    position: relative;
    float: left;
    width: 100%;
}

    /*.dash-right-todo-list::before {
        width: 1px;
        background: #f57067;
        content: "";
        height: 100%;
        top: 0;
        left: 15px;
        position: absolute;
    }*/

    .dash-right-todo-list li {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0px 0;
        list-style: none;
    }

.todo-list-item {
    float: left;
    width: 100%;
    background: #FFF;
    /*box-shadow: 0 0 5px 2px #EEE;
    border: 1px solid #ddd;*/
    padding: 10px;
    border-radius: 10px;
    position: relative;
    z-index: 9;
}

    .todo-list-item::before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #F62A00;
        background: #FFF;
        left: -14px;
        top: calc(50% - 7.5px);
        box-shadow: 0 0 2px #F62A00;
        z-index: 8;
    }

    .todo-list-item::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        background: #F62A00;
        left: -9.8px;
        top: 0;
        box-shadow: #aaa;
    }

.dash-right-todo-list li:first-child .todo-list-item::after {
    height: 50%;
    top: 50%;
}

.dash-right-todo-list li:last-child .todo-list-item::after {
    height: 50%;
}

.todo-list-pic {
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F62A00;
    display: block;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-size: 20px;
    text-shadow: 0 0 2px #999;
    margin-top: 1px;
}

.todo-list-color-1 {
    background: #F62A00;
}

.todo-list-color-2 {
    background: #86ffc0;
}

.todo-list-color-3 {
    background: #5bb4ff;
}

.todo-list-info {
    float: left;
    width: 100%;
    /*border-left:1px solid #ddd;*/
    padding-left: 5px;
}

.todo-list-item h4 {
    font-size: 12px;
    float: left;
    font-weight: 400;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    color: #666;
}

.todo-list-item p {
    font-size: 11px;
    float: left;
    width: 100%;
    /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
    margin: 0;
    padding: 0;
    color: #999;
}


.dashboard-container.dark-color-theme {
    background: linear-gradient(to top right, #1E656D 40%, #dd5a6c);
}

.dashboard-container.mix-color-theme {
    background: url(../Images/aura-background-blur-1755.jpg);
}

.dashboard-container.dark-color-theme .dash-num-box-inner {
    background: rgba(0,0,0,0.1);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

    .dashboard-container.dark-color-theme .dash-num-box-inner.total-enq::after {
        color: #00acc1;
    }

    .dashboard-container.dark-color-theme .dash-num-box-inner.copture-enq::after {
        color: #43a047;
    }

    .dashboard-container.dark-color-theme .dash-num-box-inner.sent-comme::after {
        color: #e53935;
    }

    .dashboard-container.dark-color-theme .dash-num-box-inner.waiting::after {
        color: #fb8c00;
    }

    .dashboard-container.dark-color-theme .dash-num-box-inner.moderation::after {
        color: #e364d0;
    }

    .dashboard-container.dark-color-theme .dash-num-box-inner.admin::after {
        color: #e8e676;
    }

.dashboard-container.dark-color-theme .dash-num-box.active .dash-num-box-inner::after {
    color: #FFF;
}

.dashboard-container.dark-color-theme .dash-num-box:hover .dash-num-box-inner::after {
    color: #FFF;
}

.dashboard-container.dark-color-theme .dash-num-box-1 .dash-num-box-mask {
    background: linear-gradient(60deg,#26c6da,#00acc1);
}

.dashboard-container.dark-color-theme .dash-num-box-2 .dash-num-box-mask {
    background: linear-gradient(60deg,#66bb6a,#43a047);
}

.dashboard-container.dark-color-theme .dash-num-box-3 .dash-num-box-mask {
    background: linear-gradient(60deg,#ef5350,#e53935);
}

.dashboard-container.dark-color-theme .dash-num-box-4 .dash-num-box-mask {
    background: linear-gradient(60deg,#ffa726,#fb8c00);
}

.dashboard-container.dark-color-theme .dash-num-box-5 .dash-num-box-mask {
    background: linear-gradient(60deg,#5d36ae,#7648d4);
}

.dashboard-container.dark-color-theme .dash-num-box-1.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4);
}

.dashboard-container.dark-color-theme .dash-num-box-2.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(76,175,80,.4);
}

.dashboard-container.dark-color-theme .dash-num-box-3.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(244,67,54,.4);
}

.dashboard-container.dark-color-theme .dash-num-box-4.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(255,152,0,.4);
}

.dashboard-container.dark-color-theme .dash-num-box-5.active .dash-num-box-inner {
    padding: 30px 15px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(255,152,0,.4);
}

.dashboard-container.dark-color-theme .dash-num-info .num-label {
    color: rgba(255,255,255,0.7);
}

.dashboard-container.dark-color-theme .dash-num-info .dash-num-box.active .num-label,
.dashboard-container.dark-color-theme .dash-num-info .dash-num-box:hover .num-label {
    color: rgba(255,255,255,0.7);
}

.dashboard-container.dark-color-theme .dash-num-info .num-value {
    color: rgba(255,255,255,0.7);
}

.dashboard-container.dark-color-theme .dash-num-info .dash-num-box.active .num-value,
.dashboard-container.dark-color-theme .dash-num-info .dash-num-box:hover .num-value {
    color: #FFF;
}

.dashboard-container.dark-color-theme .dash-num-info-box i {
    color: rgba(255,255,255,0.6);
}


.dashboard-container.dark-color-theme .dash-right-info {
    background: rgba(0,0,0,0.1);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.dashboard-container.dark-color-theme .dash-right-title-custom {
    background: none;
    color: #FFF;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 100%;
    margin: 0;
    text-align: center;
    padding: 15px 0;
}

.dashboard-container.dark-color-theme .dash-right-title {
    color: #FFF;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.dashboard-container.dark-color-theme .dash-data-card-title {
    color: rgba(255,255,255,0.7);
}

.dashboard-container.dark-color-theme .dash-data-card {
    background: rgba(0,0,0,0.09);
    color: rgba(255,255,255,0.7);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.dashboard-container.dark-color-theme .dash-data-card-info span {
    color: rgba(255,255,255,0.9);
}

.dashboard-container.dark-color-theme .data-list-section {
    background: rgba(0,0,0,0.0);
}

    .dashboard-container.dark-color-theme .data-list-section .data-table-header {
        background: rgba(0,0,0,0.1);
        background-color: rgba(0,0,0,0.1);
        box-shadow: 0 -1px 3px 0px rgba(0,0,0,0.3);
    }

.dashboard-container.dark-color-theme .k-filter-row th, .dashboard-container.dark-color-theme .k-grid-header th.k-header {
    background: rgba(0,0,0,0.4) !important;
    color: rgba(255,255,255,0.7) !important;
    background-color: rgba(0,0,0,0.1) !important;
}

.dashboard-container.dark-color-theme .data-table,
.dashboard-container.dark-color-theme .k-grid .k-alt {
    background: rgba(0,0,0,0.0) !important;
}

    .dashboard-container.dark-color-theme .data-table.k-grid td {
        border-top: 0px solid rgba(255,255,255,0.1) !important;
        color: rgba(255,255,255,0.7) !important;
    }

    .dashboard-container.dark-color-theme .data-table.k-grid tr:hover,
    .dashboard-container.dark-color-theme .data-table.k-grid tr td:hover,
    .dashboard-container.dark-color-theme .data-table.k-grid tr:hover td {
        background: rgba(255,255,255,0) !important;
    }

.dashboard-container.dark-color-theme .k-autocomplete,
.dashboard-container.dark-color-theme .k-draghandle,
.dashboard-container.dark-color-theme .k-dropdown-wrap,
.dashboard-container.dark-color-theme .k-grid-header,
.dashboard-container.dark-color-theme .k-grouping-header,
.dashboard-container.dark-color-theme .k-header,
.dashboard-container.dark-color-theme .k-numeric-wrap,
.dashboard-container.dark-color-theme .k-pager-wrap,
.dashboard-container.dark-color-theme .k-panelbar .k-tabstrip-items .k-item,
.dashboard-container.dark-color-theme .k-picker-wrap, .k-progressbar,
.dashboard-container.dark-color-theme .k-state-highlight,
.dashboard-container.dark-color-theme .k-tabstrip-items .k-item,
.dashboard-container.dark-color-theme .k-textbox,
.dashboard-container.dark-color-theme .k-toolbar,
.dashboard-container.dark-color-theme .km-pane-wrapper > .km-pane > .km-view > .km-content {
    background-image: none;
    background-color: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.7) !important;
}

.dashboard-container.dark-color-theme .k-pager-info.k-label,
.dashboard-container.dark-color-theme .k-link {
    color: rgba(255,255,255,0.7) !important;
}

.dashboard-container.dark-color-theme .k-grid tr td,
.dashboard-container.dark-color-theme .k-pivot-layout .k-grid tr td {
    border-bottom-color: rgba(255,255,255,0.2) !important;
}


/* chart colors*/
.dashboard-container.dark-color-theme text.highcharts-drilldown-axis-label,
.dashboard-container.dark-color-theme .highcharts-yaxis-labels text,
.dashboard-container.dark-color-theme .highcharts-axis-labels text tspan {
    color: rgba(255,255,255,0.7) !important;
    fill: rgba(255,255,255,0.7) !important;
}

.dashboard-container.dark-color-theme .highcharts-axis-labels.highcharts-xaxis-labels text {
    color: rgba(255,255,255,0.7) !important;
    fill: rgba(255,255,255,0.7) !important;
}

.dashboard-container.dark-color-theme .highcharts-axis-title {
    color: rgba(255,255,255,0.7) !important;
    fill: rgba(255,255,255,0.7) !important;
}

.dashboard-container.dark-color-theme .highcharts-legend-item text tspan {
    color: rgba(255,255,255,0.7) !important;
    fill: rgba(255,255,255,0.7) !important;
}

.dashboard-container.dark-color-theme .highcharts-grid-line {
    display: none;
}


















.refres-btn {
    float: right;
    margin: -32px 5px 0 0;
}

    .refres-btn .btn-primary {
        padding: 3px 2px 3px 7px;
        border-radius: 4px;
    }

.btn-primary.active i {
    /*-webkit-animation: refres 1.5s linear infinite;*/ /* Chrome, Opera 15+, Safari 5+ */
    /*animation: refres 1.5s linear infinite;*/ /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes refres {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes refres {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}

/*   dashboard right info end     */


/*   dashboard boxed info start   */
.row-2 {
    margin-top: 15px;
}

.dash-box-title {
    background: #FFF;
    padding: 8px;
    width: 100%;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.dash-box-title-fileter {
    float: right;
    width: 60px;
    margin-top: -35px;
}

    .dash-box-title-fileter select.form-control {
        border: none;
        background: none;
    }

.dash-box {
    width: 100%;
    background: #dfe3e2;
    padding: 10px;
    min-height: 150px;
    position: relative;
    height: calc(100% - 36px);
}

.dash-regi-list-box {
    max-height: 524px;
    overflow-y: auto;
    text-align: left;
    padding: 0;
}

.dash-regi-list {
    width: 100%;
}

.chart-link-lite {
    color: #FFFFFF !important;
    border: 1px solid #FFF;
    padding: 5px;
    border-radius: 4px;
}

    .chart-link-lite i {
        margin: 2px 5px 0 0;
    }

.td-image {
    padding: 10px 10px;
    width: 70px;
}

.td-name {
    padding: 10px 4px;
}

.td-status {
    padding: 10px 10px;
    text-align: right;
    color: #142127;
}

.in-active td {
    text-align: left;
    color: #333;
    background: #ffeeee;
}

    .in-active td.td-status {
        text-align: right;
    }

.grid-avtar {
    width: 50px;
    height: 50px;
    border: 2px #aaa solid;
}

/*   dashboard boxed info end   */















/*  Custom Controls   */
/* The switch - the box around the slider */
.switch {
    float: left;
    position: relative;
    display: inline-block;
    width: 30px;
    height: 18px;
    margin: 0;
    margin-right: 5px !important;
}

.switch-small {
    width: 25px;
    height: 18px;
}
/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

    .switch input:disabled + .slider {
        cursor: not-allowed;
    }

        .switch input:disabled + .slider:before {
            background-color: #d9d7d7;
        }

/* 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: 14px;
        width: 14px;
        left: 3px;
        bottom: 2px;
        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: #F62A00;
}

input:focus + .slider {
    box-shadow: 0 0 1px #F62A00;
}

input:checked + .slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

.switch-small input:checked + .slider:before {
    -webkit-transform: translateX(8px);
    -ms-transform: translateX(8px);
    transform: translateX(8px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 15px;
}

    .slider.round:before {
        border-radius: 50%;
    }


/*     Radio Button      */
.radio-btn {
    position: relative;
}

    .radio-btn input[type=radio] {
        position: absolute;
        visibility: hidden;
    }

    .radio-btn label {
        display: block;
        position: relative;
        font-weight: 300;
        font-size: 14px;
        padding: 1px 0 0 20px;
        margin: 8px auto 0;
        height: 30px;
        z-index: 9;
        cursor: pointer;
        -webkit-transition: all 0.25s linear;
    }

    .radio-btn .check {
        display: block;
        position: absolute;
        border: 2px solid #AAA;
        border-radius: 100%;
        height: 14px;
        width: 14px;
        top: 4px;
        left: 0px;
        z-index: 5;
        transition: border .25s linear;
        -webkit-transition: border .25s linear;
    }

        .radio-btn .check::before {
            display: block;
            position: absolute;
            content: '';
            border-radius: 100%;
            height: 7px;
            width: 7px;
            top: 1.9px;
            left: 1.8px;
            margin: auto;
            transition: background 0.25s linear;
            -webkit-transition: background 0.25s linear;
        }

    .radio-btn input[type=radio]:checked ~ .check {
        border: 2px solid #F62A00;
    }

        .radio-btn input[type=radio]:checked ~ .check::before {
            background: #F62A00;
        }

    .radio-btn input[type=radio]:checked ~ label {
        color: #F62A00;
    }



/*  Profile pic Upload   */
.avatar-upload {
    position: relative;
    max-width: 105px;
    margin: 10px 0;
}

    .avatar-upload .avatar-edit {
        position: absolute;
        right: 3px;
        z-index: 1;
        top: 3px;
    }

        .avatar-upload .avatar-edit input {
            display: none;
        }

            .avatar-upload .avatar-edit input + label {
                display: inline-block;
                width: 34px;
                height: 34px;
                margin-bottom: 0;
                border-radius: 100%;
                background: rgba(255,255,255,0.7);
                border: 1px solid transparent;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                cursor: pointer;
                font-weight: normal;
                transition: all 0.2s ease-in-out;
            }

                .avatar-upload .avatar-edit input + label:hover {
                    background: #f1f1f1;
                    border-color: #d6d6d6;
                }

                .avatar-upload .avatar-edit input + label:after {
                    content: "\f304";
                    font-family: "Font Awesome 5 Free";
                    color: #000;
                    position: absolute;
                    top: 5px;
                    left: 0;
                    right: 0;
                    text-align: center;
                    margin: auto;
                    font-weight: 800;
                }

    .avatar-upload .avatar-preview {
        width: 80px;
        height: 80px;
        position: relative;
        border-radius: 100%;
        /*border: 6px solid #F8F8F8;*/
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }

        .avatar-upload .avatar-preview > div {
            width: 100%;
            height: 100%;
            border-radius: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

.maskig {
    position: fixed;
    background: #142127;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}




.status-inactive, .edit-inactive {
    color: #999999;
    /*cursor: pointer;*/
}

.edit-inactive {
    pointer-events: none;
}

.edit-inactive {
    cursor: default;
}

.status-active, .edit-active {
    color: #00B39D;
    cursor: pointer;
}

    .status-active.fa-check-circle {
        color: #00b652;
    }

.fa-eye.status-active {
}

.fa-eye.status-inactive {
    cursor: default;
}

.edit-active {
    color: #0498c1;
}

.download-active {
    color: #0ec50e;
    cursor: pointer;
}

    .download-active:hover,
    .download-active:focus {
        color: #0db30d;
    }

.download-inactive {
    color: #ccc;
    cursor: not-allowed;
}

.access-denied {
    color: #961919;
    font-size: 12px;
    margin-left: -5px;
}


.active-div {
    display: block;
}

.inactive-div {
    display: none;
}

.active-btn {
    visibility: visible;
    opacity: 1;
    position: relative;
}

.inactive-btn {
    visibility: hidden;
    opacity: 0;
    position: absolute;
}

input:required, select:required, textarea:required {
    box-shadow: none;
}

.text-error {
    color: #ec1b23;
    font-size: 10px;
    line-height: 12px;
}

.error-messages {
    padding: 0 10px 10px 10px;
    text-align: center;
    color: #ec1b23;
}

.success-messages {
    padding: 0 10px 10px 10px;
    text-align: center;
    color: #036D41;
}

.text-hide {
    border: 0;
    display: none;
}

.text-align-right {
    text-align: right !important;
}

.hideHeaderNslideBar {
    display: none;
}

.showHeaderNslideBar {
    display: inline;
}



.mandatory {
    position: relative;
}

    .mandatory:after {
        position: absolute;
        content: "*";
        top: -1px;
        right: -9px;
        color: red;
        font-size: 16px;
    }

    .mandatory.help:after {
        position: absolute;
        content: "*";
        top: -1px;
        right: 18px;
        color: red;
        font-size: 16px;
    }

    .mandatory.help span {
        margin-left: 10px;
    }


label.mandatory i.fa-info-circle {
    position: absolute;
    right: -25px;
    top: 3px;
    color: #eaa500;
}


/*   quick-filters */

.quick-filters {
    float: left;
    position: relative;
}

.quick-filters-trigger {
    float: left;
    background: #1E656D;
    padding: 5px 10px;
    cursor: pointer;
    color: #FFF;
    font-weight: 400;
    border-radius: 2px;
}

.quick-filters-container {
    /*display:none;*/
    background: #FFF;
    padding: 0 10px;
    max-height: 0px;
    overflow: hidden;
    width: 300px;
    position: absolute;
    z-index: 90;
    top: 50px;
    box-shadow: 0 0 3px #aaa;
}

    .quick-filters-container.active {
        padding: 0 10px;
        max-height: calc(100vh - 300px);
        overflow-y: auto;
    }

    .quick-filters-container .custom-btn-checkbox {
        width: 100%;
    }

/*   File Upload   */
.file-upload {
}

.file-upload-wrapper {
    position: relative;
    width: 100%;
    height: 34px;
    cursor: pointer;
    border: 1px solid #ced4da;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 0;
}

    .file-upload-wrapper::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        padding: 8px 4px;
        display: block;
        width: calc(100% - 40px);
        pointer-events: none;
        z-index: 20;
        height: 32px;
        font-size: 13px;
        line-height: 15px;
        color: #999;
        font-weight: 300;
    }

    .file-upload-wrapper::before {
        content: 'Upload';
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        height: 33px;
        background: #999;
        color: #fff;
        font-weight: 400;
        z-index: 25;
        line-height: 33px;
        padding: 0 8px;
        pointer-events: none;
        cursor: pointer;
    }

    .file-upload-wrapper.file-upload-wrapper-icon::before {
        content: '\f382';
        font-weight: 800;
        font-family: 'Font Awesome 5 Free';
    }

    .file-upload-wrapper:hover::before {
        background: #888;
    }

    .file-upload-wrapper input {
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        height: 33px;
        margin: 0;
        padding: 0;
        display: block;
        cursor: pointer;
        width: 100%;
    }





/*   contact Info */
.contact-table-row {
    margin-bottom: 20px;
}

    .contact-table-row > div {
        margin-bottom: 30px;
    }

.contact-table-box {
    float: left;
    width: 100%;
    background: #FFFFFF;
    border: 2px solid #FFF;
    /*padding: 15px 15px 5px 15px;*/
    padding: 15px 15px 15px 15px;
    /*margin-bottom: 30px;*/
    box-shadow: 0 0 5px #ccc;
    position: relative;
    min-height: 250px;
}

    .contact-table-box.add-address {
        background: #F5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.add-address-btn {
    background: #F5f5f5;
    border: 2px solid #fff;
    padding: 10px;
    color: #1E656D;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.6s ease;
}

    .add-address-btn:hover {
        background: #1E656D;
        border: 2px solid #fff;
        padding: 10px;
        font-size: 18px;
        cursor: pointer;
        color: #FFF;
    }

.contact-info-table {
    float: left;
    width: 100%;
    padding: 0 0 10px 0;
    overflow-x: auto;
}

    .contact-info-table .form-control:focus {
        box-shadow: none !important;
        outline: none !important;
    }

    .contact-info-table input {
        box-shadow: none !important;
        outline: none !important;
    }

    .contact-info-table .text-error {
        float: left;
        width: 100%;
        line-height: 12px;
        padding-top: 4px;
    }

.contact-info-box-header {
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 12px;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 15px;
}

.contact-info-box-title {
    float: left;
    /*width: calc(100% - 80px);*/
}

    .contact-info-box-title.country {
        float: right;
        width: 45%;
    }

.width-adjustment {
    max-width: 150px;
}

.contact-info-add {
    float: right;
    width: 80px;
    color: #F62A00;
    text-align: right;
    cursor: pointer;
}

    .contact-info-add i {
        margin-left: 5px;
    }

.contact-info-table table {
    float: left;
    width: 100%;
}

.contact-email-email {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-info-table table td {
    padding: 8px 4px;
    vertical-align: top;
}
    /*.contact-info-table table tr td select{
    min-width: 60px;
}*/

    .contact-info-table table td:last-child {
        padding-right: 0;
    }

    .contact-info-table table td:first-child {
        padding-left: 0;
    }

    .contact-info-table table td .edit {
        width: 100%;
        text-align: center;
        display: block;
        color: #00B39D;
    }

    .contact-info-table table td .done {
        background: #00B39D;
        border-radius: 20px;
        font-size: 11px;
        line-height: 14px;
        padding: 5px 10px 2px 10px;
        text-transform: uppercase;
        color: #FFF;
        border: none;
        /*width: 100%;*/
        cursor: pointer;
        outline: none;
        transition: all 0.6s ease;
    }

        .contact-info-table table td .done:hover {
            background: #07907f;
        }

.contact-info-table select, .contact-info-table input {
    width: 100%;
    float: left;
    border: 0px solid #ccc;
    border-bottom: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
}

.place-holder {
    color: #999;
}

.contact-info-table .contact-info-form select, .contact-info-table .contact-info-form input {
    margin-bottom: 10px;
}

.fa-circle {
    cursor: pointer;
    font-size: 16px;
    color: #999;
    cursor: pointer;
}

    .fa-circle.active {
        color: #00b652;
    }

.remove, .delete-item {
    color: #F62A00;
    cursor: pointer;
}

    .delete-item.del-inactive {
        color: #666;
        pointer-events: none;
    }



.text-link {
    color: #F62A00;
    font-weight: 300;
    cursor: pointer;
}







/* Multiselectdropdown*/

.wrapper {
    width: 100%;
    position: relative;
}

    .wrapper .selected-items-box {
        float: left;
        cursor: pointer;
        border: solid 1px #ddd;
        padding: 0px 0px;
        width: 100%;
        background-color: #FFF;
        color: #333;
        border-radius: 4px;
        position: relative;
        z-index: 9;
    }

        .wrapper .selected-items-box[disabled="disabled"] {
            background-color: #e9ecef;
            color: #333;
            pointer-events: none;
        }

.selected-items-box.disabled {
    pointer-events: none;
    background-color: #e9ecef;
}

.selected-items-box .items-list {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

    .selected-items-box .items-list li {
        display: inline;
    }

.check-all {
    padding: 5px 5px;
    background: #535353;
}

    .check-all .multi-select-check {
        color: #fff;
    }

.right-0 {
    right: 0 !important;
}

.wrapper .list {
    display: none;
    /*width: 250px;*/
    width: 100%;
    border-left: solid 1px #C7C6C7;
    border-right: solid 1px #C7C6C7;
    border-top: solid 1px #C7C6C7;
    border-bottom: solid 1px #C7C6C7;
    z-index: 10;
    position: absolute;
    /*width: 100%;*/
    top: 35px;
    background: #FFF;
    z-index: 111;
}

.fixed-header-table .wrapper .list {
    z-index: 1;
}

.wrapper .list:after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background: transparent;
}

.wrapper .list .dropdown-search {
    width: 100%;
    outline: none !important;
    border: 1px solid #ccc;
}

.multi-search {
    width: 100%;
    display: flex;
    padding: 4px 5px;
    align-items: center;
    background: #f0f0f0;
    border-bottom: 1px solid #8f9192;
}

    .multi-search .form-control {
        height: 28px;
        width: calc(100% - 40px);
    }

    .multi-search .form-control {
        border-color: #8f9192;
        border-radius: 4px;
    }

    .multi-search .multi-search-close, .multi-search button {
        width: 28px;
        height: 28px;
        width: 30px;
        border: 1px solid #c46b00;
        background: #e87f00;
        border-radius: 4px;
        outline: none !important;
        color: #fff;
        margin-left: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .multi-search .multi-search-close:hover, .multi-search button {
            background: #d67500;
        }

.list .items-list {
    list-style-type: none;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 0 0 0 !important;
    margin: 0;
}

    .list .items-list li {
        margin: 0;
        width: 100%;
        padding: 0;
        border-bottom: solid 1px #C7C6C7;
        padding: 5px;
        background-color: #fff;
    }

        .list .items-list li:last-child {
            border: none;
        }

        .list .items-list li label {
            font-weight: normal;
        }

.wrapper .selected-items-box label.selected-items {
    font-weight: normal;
    outline: none !important;
}

.multi-select-check {
    color: #000;
    display: block;
    position: relative;
    padding-left: 30px;
    padding-top: 3px;
    margin-bottom: 3px;
    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;
    }

.multicheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 2px;
}

.check-all .multicheckmark {
    background-color: #FFF;
}

.multi-select-check:hover input ~ .multicheckmark {
    background-color: #ccc;
}

.multi-select-check input:checked ~ .multicheckmark {
    background-color: #1e656d;
}

.multicheckmark:after {
    content: "";
    position: absolute;
    display: none;
}

.multi-select-check input:checked ~ .multicheckmark:after {
    display: block;
}

.multi-select-check .multicheckmark::after {
    left: 7px;
    top: 1.5px;
    width: 7px;
    height: 14px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.multi-select-check.disabled {
    pointer-events: none !important;
    opacity: 0.6 !important;
}

    .multi-select-check.disabled input:checked ~ .multicheckmark {
        background: #8e9390;
    }

.selected-items {
    float: left;
    width: 94%;
    padding: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    min-height: 32px;
}

.dropdown-icon {
    position: absolute;
    top: 7px;
    right: 9px;
}

.list-controlls {
    background: #F5F5F5;
    padding: 5px;
    text-align: center;
}

    .list-controlls .btn {
        padding: 3px 15px;
        width: 100%;
    }




/*  Error Page Design   */
.error-page {
    float: left;
    width: 100%;
    /*background: #fff;
    height: calc(100vh - 92px);
    overflow: hidden;
    overflow-y: auto;*/
}

.error-404 {
    float: left;
    width: 100%;
    text-align: center;
}

    .error-404 img {
        width: 450px;
        /*display: block;
        margin: 0 auto;*/
    }

.error-404-msg {
    float: left;
    width: 100%;
}

    .error-404-msg h2 {
        font-size: 30px;
        cursor: default;
    }

    .error-404-msg h4 {
        font-size: 16px;
        color: #666;
        font-weight: 400;
        padding: 10px 0 20px;
        cursor: default;
    }

.error-back-btn {
    background: #1E656D;
    color: #FFF;
    transition: all 0.6s ease;
    font-size: 14px;
    padding: 8px 25px 8px 25px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.4s ease;
    border: 1px solid #15474c;
}

    .error-back-btn:hover {
        color: #FFF;
        background: #15474c;
    }

.error-text {
    width: 100%;
    padding: 20px 10px 50px 10px;
    float: left;
    word-wrap: break-word;
}

/*  Order Control  */
.order-control-search {
    width: calc(100% - 28px);
}

.order-control .k-listbox {
    width: calc(50% - 2px);
    /*height: 310px;*/
    height: 333px;
}

    .order-control .k-listbox:first-of-type {
        padding-right: 1px;
    }

.k-listbox .k-item.k-state-selected {
    background: #CCC;
    color: #1E656D;
}

.kendo-grid-search {
    position: absolute;
    left: 10px;
    z-index: 1;
    top: 25px;
}

.search-right-align {
    left: inherit;
    right: 320px;
}

.dashboard-container .kendo-grid-search {
    left: 25px;
}

.form-container-full-2 .kendo-grid-search {
    top: 10px;
}

.kendo-grid-search .form-control {
    height: 28px;
    width: 200px;
}

.k-header.k-grid-toolbar {
    min-height: 26px;
}

.k-grouping-header .k-group-indicator, .k-pivot-toolbar .k-button {
    color: #fff !important;
    background-color: #1E656D;
    border-color: #1E656D;
    box-shadow: none;
}

.k-group-indicator a {
    color: rgba(255,255,255,0.5) !important;
}

.grid-dropdown {
    position: absolute;
    left: 50px;
    top: 30px;
    white-space: nowrap;
    z-index: 10;
}

.form-container-full-2 .grid-dropdown {
    top: 13px !important;
}

.grid-dropdown select {
    padding: 5px 10px;
    padding: 5px 10px;
    margin-top: -5px;
    width: 120px;
    border: 1px solid #ced4da;
}

.data-table-section .kendo-grid-search {
    top: 35px;
}

.tile-step-form .data-table-section .kendo-grid-search {
    top: 10px;
}

.k-animation-container ul li span input {
    margin-right: 5px;
}

.k-list > .k-state-selected.k-state-focused {
    box-shadow: none;
    color: #fff;
}

.arrow-step-form .data-table-section .table.table-striped.data-table.font-size-11 tbody tr th, tr td input, tr td select.form-control {
    font-size: 11px !important;
}

.k-header.k-grid-toolbar {
    text-align: right;
    background: none;
    z-index: 10;
    padding: 10px 0;
}

.k-grid-content.k-auto-scrollable table tbody tr td a.k-grid-cell-custom {
    font-weight: 700;
    color: #F62A00;
}

.k-grid-content {
    /*min-height: 60px;*/
    min-height: 250px;
}

.k-grid-cell-custom.disabled {
    pointer-events: none !important;
    color: #ccc !important;
}

.k-button.k-grid-excel, .k-button.k-grid-pdf {
    border-radius: 20px;
    margin: 0 10px 0 0;
    padding: 5px 15px;
    color: #FFF;
    border: none;
    text-align: center;
    font-size: 12px;
    text-transform: capitalize;
}

.k-button.k-grid-excel {
    background-color: #1E656D !important;
}

.k-button.k-grid-pdf {
    background-color: #F62A00 !important;
}



.break-word {
    word-wrap: break-word;
}

.input-valid {
    border-color: #FF0000 !important;
}
/*input {
     background-color: #FFF !important;
}
input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0px 9999px white;
}
input:-moz-autofill {
  -moz-box-shadow: inset 0 0 0px 9999px white;
}*/



#ieBlock {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background: #333;
    align-content: center;
    color: #FFF;
    text-align: center;
    padding: 120px 0 0 0;
}

.k-ie #ieBlock {
    display: block;
}







/*  HTML Letter   */
.popup-letter {
    position: relative;
    max-height: calc(100vh - 145px);
    padding: 20px;
    overflow-y: auto;
    color: #000;
}

.popup-letter-btns {
    position: relative;
    height: 52px;
    padding: 10px 20px;
    overflow: hidden;
    text-align: center;
    background: #f1f1f1;
    border-top: 1px solid #ccc;
}

.popup-letter table {
    width: 100%;
}

.leater-header {
    font-size: 18px;
    text-align: center;
    width: 100%;
    color: #000;
    font-weight: bold;
}

.popup-letter table table td, .popup-letter table table th, .cell-padding {
    padding: 4px;
    border-color: #666;
}

.popup-letter table table th {
    background: #333;
    color: #ddd;
    border-color: #666;
}

.popup-letter .letter-table tr:nth-child(odd) {
    background: #eee;
}

.popup-letter .letter-table.background-color-none tr:nth-child(odd) {
    background: none;
}

.popup-registration-footer {
    color: #116644;
}

.popup-letter table {
    padding: 0;
    font-weight: 400;
    color: #000;
}

.letter-title {
    font-weight: 600;
    background: #000;
    color: #FFF;
    font-size: 18px;
    text-transform: uppercase;
    padding: 6px;
}

    .letter-title h4 {
        font-size: 18px;
        margin: 0;
    }

.letter-sub-title {
    font-weight: 600;
    color: #000;
    font-size: 16px;
}

.letter-bold {
    font-weight: 600;
}

.tr-border {
    border-top: 1px solid #000;
}

.custom-bottom-margin .data-table-section {
    margin-bottom: 20px !important;
}


/*             dashboard-style-2               */


.dash-theme-tool {
    position: fixed;
    top: 150px;
    left: 0;
    padding: 0 5px;
    background: rgba(0,0,0,0.5);
    z-index: 1;
    border-radius: 0 10px 10px 0;
    border: 1px solid rgba(255,255,255,0.3);
    border-left-width: 1px;
    border-left: 0px;
    display: none;
}

.dash-theme-item {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    clear: both;
    box-shadow: 0 0 5px #000;
    margin: 10px 0 10px 0;
    cursor: pointer;
}

.lite-theme {
    background: #FFF;
}

.dark-theme {
    background: #1E656D;
}

.mix-theme {
    background: linear-gradient(to left top,#FFF 0%, #FFF 49.9%, #1E656D 50%, #1E656D 100%);
}


.dash-theme-tool.inline-dots {
    top: 80px;
    right: 42px !important;
    left: auto;
    border-radius: 0;
    border: 0px;
    background: none;
    /*width: 200px;*/
    z-index: 12;
}

    .dash-theme-tool.inline-dots ul {
        float: right;
        margin: 0;
        padding: 0;
    }

    .dash-theme-tool.inline-dots li {
        display: inline-block;
    }

.inline-dots .dash-theme-item {
    float: left;
}






.dashboard-style-2 {
    /*background: linear-gradient(to left top,#050211,#1E656D);*/
    background: #1E656D;
    background: linear-gradient(to top right, #1E656D 40%, #dd5a6c);
    position: fixed;
    height: calc(100vh - 65px);
    width: 100%;
    top: 65px;
    left: 0;
    border-top: 1px solid rgba(255,255,255,0.5);
    padding: 20px;
    overflow-y: auto;
    transition: all 0.6s ease;
}

.dashboard-box {
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.19);
    /*box-shadow: 0 0 5px rgba(0,0,0,0.4);*/
}

.campus-list {
    float: left;
    width: 100%;
    color: rgba(255,255,255,0.7);
    text-align: center;
    clear: both;
}

    /*.dashboard-style-2 .campus-list .row .col-md-2 {
    margin-bottom: 20px;
}*/

    .campus-list .dashboard-box {
        padding: 15px 15px;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
    }

        .campus-list .dashboard-box span {
            font-size: 28px;
        }


    .campus-list .Active .dashboard-box {
        background: #1E656D;
    }

.dashboard-box-title {
    padding: 10px 15px;
    float: left;
}

.dashboard-box-table-div {
    width: 100%;
    overflow: auto;
    float: left;
}

.dashboard-box-title h4 {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    font-weight: 400;
    text-transform: uppercase;
}

.dashboard-box-title h6 {
    font-size: 12px;
    line-height: 15px;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-box-actions {
    float: right;
    margin: 5px 5px 0 0;
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    font-weight: 400;
    display: block;
    position: relative;
}

.dash-type-filter {
    float: right;
    margin: 0px 20px 0 0;
    padding: 8px 0 0 0;
    color: rgba(255,255,255,0.75);
    font-weight: 400;
    font-size: 14px;
}

.dash-table-search {
    float: right;
    margin: 0px 20px 0 0;
    color: rgba(255,255,255,0.75);
    font-weight: 400;
}

    .dash-table-search input {
        background: rgba(0,0,0,0.2);
        border: 1px solid rgba(255,255,255,0.2);
        color: #FFF;
    }

        .dash-table-search input:focus {
            background: rgba(255,255,255,0.2);
            color: #FFF;
            border: 1px solid rgba(255,255,255,0.2);
        }

.dash-actions-trig {
    cursor: pointer;
}


.chart {
    float: left;
}


.dash-actions-container {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease;
    top: 35px;
    right: -12px;
    width: 200px;
    z-index: 99;
}

    .dash-actions-container::after {
        position: absolute;
        content: "";
        top: -7px;
        right: 8px;
        color: #1E656D;
        font-size: 24px;
        border: 1px solid #FFF;
        width: 15px;
        height: 15px;
        transform: rotate(45deg);
        background: #1E656D;
        border-right: 0px;
        border-bottom: 0px;
    }

.dashboard-box-actions.active .dash-actions-container {
    visibility: visible;
    opacity: 1;
}

.dash-actions-container-inner {
    float: left;
    width: 100%;
    padding: 10px;
    background: #1E656D;
    border-radius: 0px;
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.75);
}

.dash-action-item {
    padding: 5px 0;
}

    .dash-action-item select {
        background: rgba(255,255,255,0.4);
        border-color: rgba(255,255,255,0.7);
    }

.dashboard-box-info {
    float: left;
    width: 100%;
    padding: 25px 15px;
}

.dash-box-value {
    float: left;
    width: 100%;
    font-size: 32px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
}

.dash-box-text {
    float: left;
    padding: 0 20px 0 0;
}

.dash-box-stats {
    float: left;
    font-size: 12px;
    padding: 2px 10px;
    color: #00a312;
    border-radius: 20px;
    margin-top: 13px;
    font-weight: 400;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.15);
}

    .dash-box-stats.down {
        color: #F62A00;
    }

.dash-box-label {
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
}

.dash-box-label-2 {
    float: left;
    width: 100%;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
}

.dashboard-box-info-small {
    border-top: 1px solid rgba(255,255,255,0.1);
}

    .dashboard-box-info-small .dash-box-label {
        font-size: 12px;
    }

    .dashboard-box-info-small .dash-box-value {
        font-size: 22px;
    }

    .dashboard-box-info-small .dash-box-stats {
        margin-top: 7px;
    }

.dash-6 {
    float: left;
    width: 50%;
}

.dash-4 {
    float: left;
    width: 33.3336%;
}

.dash-3 {
    float: left;
    width: 25%;
}



.dash-circle-group {
    display: flex;
    padding: 30px 0;
    clear: both;
}

.dash-circle {
    width: 300px;
    text-align: center;
    color: rgba(255,255,255,0.7);
}

.dash-circle-inner {
    width: 75px;
    height: 75px;
    border: 4px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    margin: 0 auto;
}

.dash-circle-value {
    font-size: 24px;
    padding: 14px 0;
}

.dash-circle-label {
    float: left;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    word-break: break-word;
}

.dash-circle-color-1 {
    border: 6px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.7);
}

.dash-circle-color-2 {
    border: 6px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.7);
}

.dash-circle-color-3 {
    border: 6px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.7);
}

.dash-circle-color-4 {
    border: 6px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.7);
}

.dash-table {
    color: rgba(255,255,255,0.7);
    width: 100%;
}

    .dash-table th, .dash-table td {
        padding: 6px 8px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .dash-table th {
        background: rgba(0,0,0,0.3);
    }

.dash-link-view {
    cursor: pointer;
}

/* chart colors*/
.dashboard-box text.highcharts-drilldown-axis-label,
.dashboard-box .highcharts-yaxis-labels text,
.dashboard-box .highcharts-axis-labels text tspan {
    color: rgba(255,255,255,0.7) !important;
    fill: rgba(255,255,255,0.7) !important;
}

.highcharts-axis-labels.highcharts-xaxis-labels text {
    color: rgba(255,255,255,0.7) !important;
    fill: rgba(255,255,255,0.7) !important;
}

.text-black .highcharts-axis-labels.highcharts-xaxis-labels text {
    color: rgba(0 0 0 / 90%) !important;
    fill: rgba(0 0 0 / 90%) !important;
}

.text-black text.highcharts-drilldown-axis-label, .dashboard-box .highcharts-yaxis-labels text, .dashboard-box .highcharts-axis-labels text tspan {
    color: rgba(0 0 0 / 90%) !important;
    fill: rgba(0 0 0 / 90%) !important;
}

.finance-cleark .highcharts-axis-labels.highcharts-xaxis-labels text {
    color: rgba(255,255,255,0.7) !important;
    fill: #000 !important;
}



.dashboard-box .highcharts-axis-title {
    color: rgba(255,255,255,0.7) !important;
    fill: rgba(255,255,255,0.7) !important;
}

.dashboard-box .highcharts-legend-item text tspan {
    color: rgba(255,255,255,0.7) !important;
    fill: rgba(255,255,255,0.7) !important;
}

.dashboard-box .highcharts-grid-line {
    display: none;
}

g[opacity="0.4"], g[opacity="0.3"], rect [width="66"] {
    display: none;
}

g[fill="#FFF"] {
    color: #FFF !important;
}

.dash-grid-link {
    cursor: pointer;
    font-weight: 700;
}

.k-filter-row th, .k-grid-header th.k-header {
    font-size: 12px;
    white-space: unset !important;
    text-overflow: unset !important;
    text-align: left;
    vertical-align: top !important;
}
/*  ----------------------------------------------------- New Dashboard dark Theme Start here-------------------------------------------------------- */

/* --------- Dashboard Dark Start -------------*/
.dashboard-style-2 .data-list-section {
    background: rgba(0,0,0,0.0);
}

    .dashboard-style-2 .data-list-section .data-table-header {
        background: rgba(0,0,0,0.1);
        background-color: rgba(0,0,0,0.1);
        box-shadow: 0 -1px 3px 0px rgba(0,0,0,0.3);
    }



.dashboard-style-2 .k-filter-row th, .dashboard-style-2 .k-grid-header th.k-header {
    background: rgba(0,0,0,0.4) !important;
    color: rgba(255,255,255,0.7) !important;
    background-color: rgba(0,0,0,0.1) !important;
}

.dashboard-style-2 .data-table,
.dashboard-style-2 .k-grid .k-alt {
    background: rgba(0,0,0,0.0) !important;
}

    .dashboard-style-2 .data-table.k-grid td {
        border-top: 0px solid rgba(255,255,255,0.1) !important;
        color: rgba(255,255,255,0.7) !important;
    }

    .dashboard-style-2 .data-table.k-grid tr:hover,
    .dashboard-style-2 .data-table.k-grid tr td:hover,
    .dashboard-style-2 .data-table.k-grid tr:hover td {
        background: rgba(255,255,255,0) !important;
    }

.dashboard-style-2 .k-draghandle,
.dashboard-style-2 .k-dropdown-wrap,
.dashboard-style-2 .k-grid-header,
.dashboard-style-2 .k-grouping-header,
.dashboard-style-2 .k-header,
.dashboard-style-2 .k-numeric-wrap,
.dashboard-style-2 .k-pager-wrap,
.dashboard-style-2 .k-panelbar .k-tabstrip-items .k-item,
.dashboard-style-2 .k-picker-wrap, .k-progressbar,
.dashboard-style-2 .k-state-highlight,
.dashboard-style-2 .k-tabstrip-items .k-item,
.dashboard-style-2 .k-textbox,
.dashboard-style-2 .k-toolbar,
.dashboard-style-2 .k-autocomplete,
.dashboard-style-2 .km-pane-wrapper > .km-pane > .km-view > .km-content {
    background-image: none;
    background-color: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.7) !important;
}

.dashboard-style-2 .k-pager-info.k-label,
.dashboard-style-2 .k-link {
    color: rgba(255,255,255,0.7) !important;
}

.dashboard-style-2 .k-grid tr td,
.dashboard-style-2 .k-pivot-layout .k-grid tr td {
    border-bottom-color: rgba(255,255,255,0.2) !important;
}

.dashboard-style-2 .dashboard-box .data-list-section .kendo-grid-search input.form-control {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7) !important;
}

    .dashboard-style-2 .dashboard-box .data-list-section .kendo-grid-search input.form-control::placeholder {
        color: rgba(255,255,255,0.7) !important;
    }

.dashboard-style-2 .k-grid-norecords {
    color: rgba(255,255,255,0.7) !important;
}

.dashboard-style-2 .dashboard-box .select.form-control:not([size]):not([multiple]) {
    color: rgba(255,255,255,0.7) !important;
}

.dashboard-container.dark-color-theme .k-grid-norecords {
    color: rgba(255,255,255,0.7) !important;
}

.dashboard-container.dark-color-theme .kendo-grid-search input.form-control {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7) !important;
}

    .dashboard-container.dark-color-theme .kendo-grid-search input.form-control::placeholder {
        color: rgba(255,255,255,0.7) !important;
    }

.dashboard-container.dark-color-theme .k-active-filter, .k-state-active, .k-state-active:hover {
    background: transparent;
}

.dashboard-container.dark-color-theme .k-dropdown .k-input, .k-dropdown .k-state-focused .k-input, .k-menu .k-popup, .k-multiselect .k-button, .k-multiselect .k-button:hover {
    color: rgba(255,255,255,0.7) !important;
}

    .dashboard-style-2 .dashboard-box .k-dropdown .k-input, .k-dropdown .k-state-focused .k-input, .k-menu .k-popup, .k-multiselect .k-button, .k-multiselect .k-button:hover {
        color: rgba(255,255,255,0.7) !important;
    }

.dashboard-style-2 .dash-table-search input.form-control::placeholder {
    color: rgba(255,255,255,0.75) !important;
}

.dashboard-style-2 .dashboard-box .data-list-section .data-table-header .data-table-search input {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.75);
}

    .dashboard-style-2 .dashboard-box .data-list-section .data-table-header .data-table-search input::placeholder {
        color: rgba(255,255,255,0.75);
    }

.k-list > .k-state-selected.k-state-focused {
    color: #fff;
    background: linear-gradient(to top right, #1E656D 40%, #3ba1ad);
}

.k-listbox .k-item:hover:not(.k-state-disabled) {
    background: linear-gradient(to top right, #1E656D 40%, #3ba1ad);
    color: #fff;
}


.dashboard-container.dark-color-theme .dashboard-section-2 .dashboard-section-inner .highcharts-axis-labels.highcharts-xaxis-labels text {
    color: rgba(255,255,255,0.7) !important;
    fill: rgba(255,255,255,0.7) !important;
}

.nav-menu .menu-root-item ul li:hover {
    background: linear-gradient(to top right, #1E656D 15%, #1cdc80);
}

    .nav-menu .menu-root-item ul li:hover a {
        color: #fff;
    }

.dashboard-style-2 .dashboard-box .data-list-section .data-table.k-grid.k-widget.k-display-block .k-grid-content.k-auto-scrollable .k-grid-norecords .k-grid-norecords-template {
    background: transparent;
}

/*  ----------------------------------------------------- New Dashboard dark Theme End here-------------------------------------------------------- */


/*   light-color-theme */
.light-color-theme {
    background: linear-gradient(to left top,#FFF,#F1F1F1);
    background: #FFF;
}

    .light-color-theme .dashboard-box {
        background: #FFF;
        /*background: linear-gradient(to right bottom, #FFF, #F1f1f1);*/
        border: 2px solid rgba(255,255,255,0.5);
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }


    .light-color-theme .campus-list .dashboard-box {
        background: #1E656D;
    }

    .light-color-theme .campus-list .dashboard-box {
        color: #FFF !important;
    }

        .light-color-theme .campus-list .dashboard-box span {
            color: #FFF;
        }



    .light-color-theme .dashboard-box-title h4 {
        color: rgba(0,0,0,0.75);
    }

    .light-color-theme .dashboard-box-title h6 {
        color: rgba(0,0,0,0.75);
    }

    .light-color-theme .dashboard-box-actions {
        color: rgba(0,0,0,0.75);
    }

    .light-color-theme .dash-actions-trig {
        cursor: pointer;
    }

    .light-color-theme .dash-actions-container::after {
        color: #1E656D;
    }

    .light-color-theme .dash-actions-container-inner {
        background: #1E656D;
        color: rgba(255,255,255,0.5);
    }

    .light-color-theme .campus-list .Active .dashboard-box {
        background: #1E656D;
    }

.dash-action-item {
    padding: 5px 0;
}

    .dash-action-item select {
        background: rgba(255,255,255,0.4);
        border-color: rgba(255,255,255,0.7);
        color: #fff;
    }

.light-color-theme .dash-box-value {
    color: #1E656D;
}

/*.light-color-theme .dash-box-stats {
    color: #F62A00;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.15);
}*/

.light-color-theme .dash-box-label {
    color: rgba(0,0,0,0.5);
}

.light-color-theme .dashboard-box-info-small {
    border-top: 1px solid rgba(0,0,0,0.1);
}

.light-color-theme .dash-color-1 {
    background: #00acc1;
    color: #FFF;
}

.light-color-theme .dash-color-2 {
    background: #43a047;
    color: #FFF;
}

.light-color-theme .dash-color-3 {
    background: #e53935;
    color: #FFF;
}

    .light-color-theme .dash-color-1 .dash-box-value,
    .light-color-theme .dash-color-2 .dash-box-value,
    .light-color-theme .dash-color-3 .dash-box-value {
        color: rgba(255,255,255,0.8);
    }

    .light-color-theme .dash-color-1 .dash-box-label,
    .light-color-theme .dash-color-2 .dash-box-label,
    .light-color-theme .dash-color-3 .dash-box-label {
        color: rgba(255,255,255,0.6);
        font-size: 14px;
    }


.light-color-theme .dash-circle {
    color: rgba(255,255,255,0.7);
}

.light-color-theme .dash-circle-label {
    color: #1E656D;
}

.light-color-theme .dash-circle-inner {
    border: 8px solid #F62A00;
}

.light-color-theme .dash-circle-color-1 {
    border: 8px solid #00acc1;
    color: #00acc1;
}

.light-color-theme .dash-circle-color-2 {
    border: 8px solid #43a047;
    color: #43a047;
}

.light-color-theme .dash-circle-color-3 {
    border: 8px solid #e53935;
    color: #e53935;
}

.light-color-theme .dash-circle-color-4 {
    border: 8px solid #fb8c00;
    color: #fb8c00;
}

.light-color-theme .dash-table {
    color: rgba(0,0,0,0.7);
}

    .light-color-theme .dash-table th, .dash-table td {
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    .light-color-theme .dash-table th {
        background: rgba(63, 81, 181, 0.08);
    }
/* chart colors*/
.light-color-theme text.highcharts-drilldown-axis-label,
.light-color-theme .highcharts-yaxis-labels text,
.light-color-theme .highcharts-axis-labels text tspan {
    color: rgba(0,0,0,0.7) !important;
    fill: rgba(0,0,0,0.7) !important;
}

.light-color-theme .highcharts-axis-labels.highcharts-xaxis-labels text {
    color: rgba(0,0,0,0.7) !important;
    fill: rgba(0,0,0,0.7) !important;
}

.light-color-theme .highcharts-axis-title {
    color: rgba(0,0,0,0.7) !important;
    fill: rgba(0,0,0,0.7) !important;
}

.light-color-theme .highcharts-legend-item text tspan {
    color: rgba(0,0,0,0.7) !important;
    fill: rgba(0,0,0,0.7) !important;
}


/*------------ Dashboard-style--2 LIGHT ------------------*/


.dashboard-style-2.light-color-theme {
    background: #f8f8f8;
}

    .dashboard-style-2.light-color-theme .data-list-section {
        background: rgba(0,0,0,0.0);
    }

        .dashboard-style-2.light-color-theme .data-list-section .data-table-header {
            /*background: rgba(0,0,0,0.1);*/
            background: #fff !important;
            background-color: rgba(0,0,0,0.1);
            box-shadow: 0 -1px 3px 0px rgba(0,0,0,0.3);
        }



    .dashboard-style-2.light-color-theme .k-filter-row th, .dashboard-style-2.light-color-theme .k-grid-header th.k-header {
        background: #142127 !important;
        color: rgba(255,255,255,1) !important;
    }

    .dashboard-style-2.light-color-theme .data-table,
    .dashboard-style-2.light-color-theme .k-grid .k-alt {
        background: rgba(0,0,0,0.0) !important;
    }

        .dashboard-style-2.light-color-theme .data-table.k-grid td {
            border-top: 0px solid rgba(0,0,0,0.1) !important;
            color: rgba(0,0,0,0.7) !important;
        }



    .dashboard-style-2.light-color-theme .k-grid-header th.k-header > .k-link {
        color: #fff !important;
    }

    .dashboard-style-2.light-color-theme .data-table.k-grid tr:hover,
    .dashboard-style-2.light-color-theme .data-table.k-grid tr td:hover,
    .dashboard-style-2.light-color-theme .data-table.k-grid tr:hover td {
        background: rgba(0,0,0,0) !important;
    }

    .dashboard-style-2.light-color-theme .k-draghandle,
    .dashboard-style-2.light-color-theme .k-dropdown-wrap,
    .dashboard-style-2.light-color-theme .k-grid-header,
    .dashboard-style-2.light-color-theme .k-grouping-header,
    .dashboard-style-2.light-color-theme .k-header,
    .dashboard-style-2.light-color-theme .k-numeric-wrap,
    .dashboard-style-2.light-color-theme .k-pager-wrap,
    .dashboard-style-2.light-color-theme .k-panelbar .k-tabstrip-items .k-item,
    .dashboard-style-2.light-color-theme .k-picker-wrap, .k-progressbar,
    .dashboard-style-2.light-color-theme .k-state-highlight,
    .dashboard-style-2.light-color-theme .k-tabstrip-items .k-item,
    .dashboard-style-2.light-color-theme .k-textbox,
    .dashboard-style-2.light-color-theme .k-toolbar,
    .dashboard-style-2.light-color-theme .k-autocomplete,
    .dashboard-style-2.light-color-theme .km-pane-wrapper > .km-pane > .km-view > .km-content {
        background-image: none;
        background-color: #fff;
        color: rgba(0,0,0,0.7) !important;
    }

    .dashboard-style-2.light-color-theme .k-pager-info.k-label,
    .dashboard-style-2.light-color-theme .k-link {
        color: rgba(0,0,0,0.7) !important;
    }

    .dashboard-style-2.light-color-theme .k-grid tr td,
    .dashboard-style-2.light-color-theme .k-pivot-layout .k-grid tr td {
        border-bottom-color: rgba(0,0,0,0.2) !important;
    }

    .dashboard-style-2.light-color-theme .dashboard-box .data-list-section .kendo-grid-search input {
        background: #fff;
        border: 1px solid #ced4da;
        color: rgba(0,0,0,0.7) !important;
    }

    .dashboard-style-2.light-color-theme .dashboard-box .dash-type-filter {
        color: #444;
    }

    .dashboard-style-2.light-color-theme .dash-table-search input {
        background: #fff;
        border: 1px solid #ced4da;
        color: #495057;
    }

    .dashboard-style-2.light-color-theme .k-grid-norecords {
        color: rgba(0,0,0,0.7) !important;
    }

.dashboard-container.light-color-theme .k-dropdown .k-input, .k-dropdown .k-state-focused .k-input, .k-menu .k-popup, .k-multiselect .k-button, .k-multiselect .k-button:hover {
    color: #000 !important;
}

.dashboard-container.light-color-theme .k-list > .k-state-selected.k-state-focused {
    color: #000;
    /*background: linear-gradient(to top right, #1E656D 40%, #dd5a6c);*/
}

.dashboard-style-2.light-color-theme .dash-table-search input::placeholder {
    color: #495057 !important;
}

.dashboard-style-2.light-color-theme .dashboard-box .dashboard-box-actions .dash-actions-container .dash-actions-container-inner {
    background: #f0f1f9;
    border: 1px solid #ced4da;
}

    .dashboard-style-2.light-color-theme .dashboard-box .dashboard-box-actions .dash-actions-container .dash-actions-container-inner .dash-action-item .form-control {
        border: 1px solid rgb(204, 214, 235);
        !important;
        color: #495057 !important;
    }
/*.dashboard-style-2.light-color-theme .dash-actions-container::after {
    color:  #f0f1f9 !important;
}*/
.dashboard-style-2.light-color-theme .dashboard-box .dashboard-box-actions .dash-actions-container::after {
    background: #f0f1f9 !important;
    border: 1px solid #ced4da;
    border-right: 0px;
    border-bottom: 0px;
}

.dashboard-style-2.light-color-theme .dashboard-box .data-list-section .data-table-header .data-table-search input {
    background: #fff;
    border: 1px solid #ced4da;
    color: #495057;
}

    .dashboard-style-2.light-color-theme .dashboard-box .data-list-section .data-table-header .data-table-search input::placeholder {
        color: #495057;
    }

.dashboard-container .dashboard-section-2 .dashboard-section-inner .highcharts-axis-labels.highcharts-xaxis-labels text {
    color: rgba(0,0,0,0.7) !important;
    fill: rgba(0,0,0,0.7) !important;
}







/*------------ Dashboard-style--2 MIXED ------------------*/

.dashboard-style-2.mix-color-theme .data-list-section {
    background: rgba(0,0,0,0.0);
}

    .dashboard-style-2.mix-color-theme .data-list-section .data-table-header {
        background: rgba(0,0,0,0.1);
        background-color: rgba(0,0,0,0.1);
        box-shadow: 0 -1px 3px 0px rgba(0,0,0,0.3);
    }

.dashboard-style-2.mix-color-theme .k-filter-row th, .dashboard-style-2.mix-color-theme .k-grid-header th.k-header {
    color: rgba(255,255,255,0.7) !important;
    background: #000 !important;
}

.dashboard-style-2.mix-color-theme .k-filter-row th, .dashboard-style-2.light-color-theme .k-grid-header th.k-header {
    background: #142127 !important;
    color: rgba(255,255,255,1) !important;
}

.dashboard-style-2.mix-color-theme .data-table,
.dashboard-style-2.mix-color-theme .k-grid .k-alt {
    background: rgba(0,0,0,0.0) !important;
}

    .dashboard-style-2.mix-color-theme .data-table.k-grid td {
        border-top: 0px solid rgba(0,0,0,0.1) !important;
        color: rgba(0,0,0,0.7) !important;
    }

.dashboard-style-2.mix-color-theme .k-grid-header th.k-header > .k-link {
    color: #fff !important;
}

.dashboard-style-2.mix-color-theme .data-table.k-grid tr:hover,
.dashboard-style-2.mix-color-theme .data-table.k-grid tr td:hover,
.dashboard-style-2.mix-color-theme .data-table.k-grid tr:hover td {
    background: rgba(0,0,0,0) !important;
}

.dashboard-style-2.mix-color-theme .k-draghandle,
.dashboard-style-2.mix-color-theme .k-dropdown-wrap,
.dashboard-style-2.mix-color-theme .k-grid-header,
.dashboard-style-2.mix-color-theme .k-grouping-header,
.dashboard-style-2.mix-color-theme .k-header,
.dashboard-style-2.mix-color-theme .k-numeric-wrap,
.dashboard-style-2.mix-color-theme .k-pager-wrap,
.dashboard-style-2.mix-color-theme .k-panelbar .k-tabstrip-items .k-item,
.dashboard-style-2.mix-color-theme .k-picker-wrap, .k-progressbar,
.dashboard-style-2.mix-color-theme .k-state-highlight,
.dashboard-style-2.mix-color-theme .k-tabstrip-items .k-item,
.dashboard-style-2.mix-color-theme .k-textbox,
.dashboard-style-2.mix-color-theme .k-toolbar,
.dashboard-style-2.mix-color-theme .k-autocomplete,
.dashboard-style-2.mix-color-theme .km-pane-wrapper > .km-pane > .km-view > .km-content {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.6);
    color: rgba(0,0,0,0.7) !important;
}

.dashboard-style-2.mix-color-theme .k-pager-info.k-label,
.dashboard-style-2.mix-color-theme .k-link {
    color: rgba(0,0,0,0.7) !important;
}

.dashboard-style-2.mix-color-theme .k-grid tr td,
.dashboard-style-2.mix-color-theme .k-pivot-layout .k-grid tr td {
    border-bottom-color: rgba(0,0,0,0.2) !important;
}

.dashboard-style-2.mix-color-theme .dashboard-box .data-list-section .kendo-grid-search input {
    /*background: #F8F8F8;*/
    border-color: rgba(255,255,255,0.1);
}

.dashboard-style-2.mix-color-theme .dashboard-box .data-list-section .kendo-grid-search input {
    background: #fff;
    border: 1px solid #ced4da;
    color: rgba(0,0,0,0.7) !important;
}

.dashboard-style-2.mix-color-theme .dashboard-box .dash-type-filter {
    color: #444;
}

.dashboard-style-2.mix-color-theme .dash-table-search input {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #ced4da;
    color: #495057;
}

.dashboard-style-2.mix-color-theme .k-grid-norecords {
    color: rgba(0,0,0,0.7) !important;
}

.dashboard-style-2.mix-color-theme .dashboard-box .dashboard-box-actions .dash-actions-container::after {
    background: #f0f1f9 !important;
    border: 1px solid #ced4da;
    border-right: 0px;
    border-bottom: 0px;
}

.dashboard-style-2.mix-color-theme .dash-table-search input.form-control::placeholder {
    color: #495057 !important;
}

.dashboard-style-2.mix-color-theme .dashboard-box .dashboard-box-actions .dash-actions-container::after {
    background: #201614 !important;
    border: 1px solid rgba(255,255,255,0.75);
    border-right: 0px;
    border-bottom: 0px;
}

.dashboard-style-2.mix-color-theme .dashboard-box .dashboard-box-actions .dash-actions-container .dash-actions-container-inner {
    background-image: url(../Images/aura-background-blur-1755.jpg);
}

    .dashboard-style-2.mix-color-theme .dashboard-box .dashboard-box-actions .dash-actions-container .dash-actions-container-inner .dash-action-item .form-control {
        color: #fff !important;
        background: #7e7673;
    }

.dashboard-style-2.mix-color-theme .dashboard-box .data-list-section .data-table-header .data-table-search input {
    background: #fff;
    border: 1px solid #ced4da;
    color: #495057;
}

    .dashboard-style-2.mix-color-theme .dashboard-box .data-list-section .data-table-header .data-table-search input::placeholder {
        color: #495057;
    }

/*input[type="radio"], input[type="checkbox"] {
    float: right !important;
    margin-top: 7px;
}*/

.table thead th {
    vertical-align: middle !important;
    cursor: default;
}

.k-multiselect-wrap.k-floatwrap {
    padding: 0;
    max-width: 500px;
}

.k-multiselect-wrap li span {
    font-size: 12px;
}


















/*   mix-color-theme */
.mix-color-theme {
    /*background: linear-gradient(to left top,#FFF,#F1F1F1); */
    background: url(../Images/light-grey.jpg);
    background: url(../Images/aura-background-blur-1755.jpg);
    background-size: cover;
}

    .mix-color-theme .dashboard-box {
        background: #FFF;
        background: url(../Images/light-grey.jpg);
        background-position: center;
        border: 2px solid rgba(255,255,255,0.5);
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }

    .mix-color-theme .campus-list {
        color: #333;
    }

        .mix-color-theme .campus-list .Active .dashboard-box {
            background: rgba(75, 47, 227, 0.48);
            color: #FFF;
        }

        .mix-color-theme .campus-list .dashboard-box span {
            color: #1E656D;
        }

        .mix-color-theme .campus-list .Active .dashboard-box span {
            color: #FFF;
        }

    .mix-color-theme .dashboard-box-alt {
        background: #1E656D;
    }

    .mix-color-theme .dashboard-box-title h4 {
        color: rgba(0,0,0,0.75);
    }

    .mix-color-theme .dashboard-box-title h6 {
        color: rgba(0,0,0,0.75);
    }

    .mix-color-theme .dashboard-box-actions {
        color: rgba(0,0,0,0.75);
    }

    .mix-color-theme .dashboard-box-alt .dashboard-box-title h4 {
        color: rgba(255,255,255,0.75);
    }

    .mix-color-theme .dashboard-box-alt .dashboard-box-title h6 {
        color: rgba(255,255,255,0.75);
    }

    .mix-color-theme .dashboard-box-alt .dashboard-box-actions {
        color: rgba(255,255,255,0.75);
    }

.dash-actions-container::after {
    color: #aaa;
}

.mix-color-theme .dash-actions-container-inner {
    background: #aaa;
    color: rgba(255,255,255,0.5);
}


.mix-color-theme .dash-action-item select {
    background: rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.7);
    color: #000;
}

.mix-color-theme .dash-box-value {
    color: #1E656D;
}

.mix-color-theme .dash-box-label-2 {
    color: #333;
}

.mix-color-theme .dashboard-box-alt .dash-box-value {
    color: #FFF;
}

/*.mix-color-theme .dash-box-stats {
    color: #00a312;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.15);
}
.mix-color-theme .dash-box-stats.down{
    color: #F62A00;
}*/
.mix-color-theme .dash-box-label {
    color: rgba(0,0,0,0.5);
}

.mix-color-theme .dashboard-box-info-small {
    border-top: 1px solid rgba(0,0,0,0.1);
}

.mix-color-theme .dash-circle {
    color: rgba(255,255,255,0.7);
}

.mix-color-theme .dash-circle-label {
    color: #1E656D;
}

.mix-color-theme .dash-circle-inner {
    border: 8px solid #F62A00;
    color: #F62A00;
}

.mix-color-theme .dash-circle-color-1 {
    border: 8px solid #00acc1;
    color: #00acc1;
}

.mix-color-theme .dash-circle-color-2 {
    border: 8px solid #43a047;
    color: #43a047;
}

.light-color-theme .dash-circle-color-3 {
    border: 8px solid #e53935;
    color: #e53935;
}

.mix-color-theme .dash-circle-color-4 {
    border: 8px solid #fb8c00;
    color: #fb8c00;
}

.mix-color-theme .dash-table {
    color: rgba(0,0,0,0.7);
}

    .mix-color-theme .dash-table th, .dash-table td {
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    .mix-color-theme .dash-table th {
        background: rgba(63, 81, 181, 0.08);
    }

/* chart colors*/
.mix-color-theme text.highcharts-drilldown-axis-label,
.mix-color-theme .highcharts-yaxis-labels text,
.mix-color-theme .highcharts-axis-labels text tspan {
    color: rgba(0,0,0,0.7) !important;
    fill: rgba(0,0,0,0.7) !important;
}

.mix-color-theme .highcharts-axis-labels.highcharts-xaxis-labels text {
    color: rgba(0,0,0,0.7) !important;
    fill: rgba(0,0,0,0.7) !important;
}

.mix-color-theme .highcharts-axis-title {
    color: rgba(0,0,0,0.7) !important;
    fill: rgba(0,0,0,0.7) !important;
}

.mix-color-theme .highcharts-legend-item text tspan {
    color: rgba(0,0,0,0.7) !important;
    fill: rgba(0,0,0,0.7) !important;
}

.search-users {
    position: relative;
}

    .search-users::after {
        content: "\f002";
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        left: 4px;
        top: 91px;
        font-weight: bold;
        color: rgba(0,0,0,0.4);
    }


.modal-backdrop[uib-modal-backdrop="modal-backdrop"] {
    z-index: 1042 !important;
}


/*  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 #F62A00 solid;
    box-shadow: 0 0 5px #aaa;
    margin-bottom: 20px;
    border-radius: 6px;
    padding: 10px;
}

    .pop-notification-item.pop-noti-unseen {
        border-left: 5px #1E656D 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-msg span {
        float: left;
        width: 100%;
    }

.pop-noti-user {
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #1E656D;
    margin-bottom: 5px;
}

.pop-notification-item.pop-noti-unseen .pop-noti-user {
    color: #e48444;
}

.margin-left-0 {
    margin-left: 0;
}

.hideHeaderNslideBar {
    display: none;
}

.showHeaderNslideBar {
    display: inline;
}

label.kTxtin {
    margin-bottom: 0;
}

.list-group {
    position: absolute;
    z-index: 15;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 0 5px #999;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    top: 61px;
}

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

.list-group.custom li {
    color: #000;
    font-weight: 500;
    letter-spacing: 0.7px;
}

.k-grid.k-widget.k-display-block.k-reorderable .k-grid-content.k-auto-scrollable tr td span.edit {
    color: #F62A00;
    cursor: pointer;
}

.k-grid.k-widget.k-display-block.k-reorderable .k-grid-content.k-auto-scrollable tr td span {
    cursor: pointer;
    color: #F62A00;
    font-weight: 500;
}

    .k-grid.k-widget.k-display-block.k-reorderable .k-grid-content.k-auto-scrollable tr td span.status {
        cursor: pointer;
        font-weight: 600;
        color: #F62A00;
    }

    .k-grid.k-widget.k-display-block.k-reorderable .k-grid-content.k-auto-scrollable tr td span.edit.disabled {
        color: #666666;
        cursor: default;
    }

span.disabled {
    color: #666666 !important;
    cursor: default !important;
}

.k-block, .k-content, .k-dropdown .k-input, .k-popup, .k-toolbar, .k-widget {
    /* box-shadow: 0 0 2px #ccc;*/
}

.k-grid-content.k-auto-scrollable table tbody tr td span.rcl, .Academic {
    cursor: pointer;
}

.k-grid .k-grouping-header {
    color: #000;
}

.k-listbox-toolbar ul {
    padding: 10px 4px 10px 0;
}




.add-border {
    border: 5px solid #fff !important;
    box-shadow: 0 0 3px #666;
}

.applicant-details-form {
    width: 100%;
    background: #f5f5f5;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #e2e0e0;
}

.applicant-details-group {
    margin: 10px 0;
}

    .applicant-details-group span {
        font-weight: 700;
        /*margin-right: 10px;*/
    }

    .applicant-details-group label {
        margin: 0;
        font-weight: 400;
        width: 255px;
        float: right;
        overflow: hidden;
        text-overflow: ellipsis;
    }


.custom-pop-section {
    background: #f5f5f5;
    float: left;
    width: 100%;
    padding: 15px 15px 0 15px;
    margin-bottom: 20px;
    border: 1px solid #e2e0e0;
    border-radius: 4px;
    word-wrap: break-word;
}










/* Range slider */
.slidecontainer {
    width: 100%;
}

.range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    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: 24px;
        height: 24px;
        border: 0;
        background: #1E656D;
        cursor: pointer;
        border-radius: 50%;
    }

    .range-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border: 0;
        background: #1E656D;
        cursor: pointer;
        border-radius: 50%;
    }
/* ------------------ email-verfied-success-containt Start Here--------------------- */

.email-verfied-success-containt {
    padding: 65px 10px 50px 10px;
    width: 600px;
    margin: 0 auto;
    background: #fff;
    text-align: center;
    margin-top: 50px;
    box-shadow: 0px 0px 3px #ccc;
    border-radius: 5px;
    font-size: 24px;
}

    .email-verfied-success-containt i {
        font-size: 60px;
        color: #7cbe42;
        margin-bottom: 17px;
    }

    .email-verfied-success-containt p.success-text {
        color: #7cbe42;
        font-weight: 400;
    }

    .email-verfied-success-containt p a {
        color: #1E656D;
    }

        .email-verfied-success-containt p a:hover {
            text-decoration: underline;
        }

/* ------------------ email-verfied-success-containt End Here--------------------- */

/*---------------------------- Graduation Seats css Start here --------------------------------------*/
.seat-container {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.seat-row {
    display: flex;
    width: 100%;
}

.seat-item {
    width: 40px;
    padding: 10px;
    text-align: center;
    font-weight: 700;
}

    .seat-item:first-child {
        min-width: 100px;
        text-align: left;
        word-wrap: break-word;
    }
/* Graduation Seat check box */
.graduation-seats {
    display: block;
    position: relative;
    padding-left: 21px;
    margin-bottom: 10px;
    padding-bottom: 21px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .graduation-seats input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        left: 0;
        top: 0;
        z-index: 100;
        width: 20px;
        height: 20px;
    }

    /* Create a Graduation Seat custom checkbox */
    .graduation-seats .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        padding: 10px;
        background: none;
        border: 0;
    }

    /* On mouse-over, add a grey background color */
    .graduation-seats:hover input ~ .checkmark {
        /*background-color: #ccc;*/
    }

    /* When the checkbox is checked, add a blue background */
    .graduation-seats input:checked ~ .checkmark {
        padding: 10px;
    }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.graduation-seats input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.graduation-seats .checkmark:after {
    content: "\f6c0";
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    top: 0;
    left: 2px;
    font-size: 18px;
    color: #e96557;
}

.graduation-seats .checkmark::before {
    content: "\f6c0";
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    top: 0;
    left: 2px;
    font-size: 18px;
    color: #c5c5c5;
}

.graduation-seats input:disabled ~ .checkmark::before {
    color: #010101;
}


.graduation-seats label {
    margin: 3px 0 0 0;
}

.popup-body {
    height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 0 15px 15px 15px;
}

.modal-body .popup-body .date-list .title {
    padding-bottom: 15px;
    font-weight: 600;
    font-size: 16px;
}


/*---------------------------- Graduation Seats css End here --------------------------------------*/







/* ------------------Flagged Student--------------------- */
.k-grid.k-widget.k-display-block.k-reorderable .k-grid-content.k-auto-scrollable tr td span.status.Flagged-Student {
    /*color: orangered !important;*/
    color: #ffa500 !important;
}

.Flagged-Student {
    color: #ec9900 !important;
    font-weight: 500;
    cursor: pointer;
}

.data-table tr.Flagged-Student td {
    /*color: orangered !important;*/
    color: #ffa500 !important;
}

.k-grid.k-widget.k-display-block.k-reorderable .k-grid-content.k-auto-scrollable tr td span.status a.grid-link.Flagged-Student {
    /*color: orangered !important;*/
    color: #ffa500 !important;
}

.k-grid.k-widget.k-display-block.k-reorderable .k-grid-content.k-auto-scrollable tr td span.Cancel.Flagged-Student {
    /*color: orangered !important;*/
    color: #ffa500 !important;
}

.data-table.k-grid tr.Flagged-Student td {
    /*color: orangered !important;*/
    color: #ffa500 !important;
}

table#MailToStudent tr td a.status.Flagged-Student,
table#MoveRequestsToCouncilor tr td a.status.Flagged-Student {
    /*color: orangered !important;*/
    color: #ffa500 !important;
}

table#MailToStudent tr td a.status,
table#MoveRequestsToCouncilor tr td a.status {
    cursor: pointer;
    color: blue;
}

/* ------------------Flagged Student--------------------- */
/* ------------------ OnlineStudentRequests--------------------- */
.RaiseEditRequest {
    /*background-color: deepskyblue !important;*/
    color: #00E5FF !important;
    font-weight: 500;
    cursor: pointer;
}

.ResponseEditRequest {
    /*background-color: lightgreen !important;*/
    color: #A0FF7A !important;
    font-weight: 500;
    cursor: pointer;
}
/* ------------------ OnlineStudentRequests--------------------- */
/* ------------------ Queues Module--------------------- */
.SLAdays-Expired {
    /*background-color: orangered !important;*/
    /*background-color: #ff8e79 !important;*/
    color: #FF9C38 !important;
    font-weight: 500;
    cursor: pointer;
}

.SLAdays-Border-Expired {
    /*background: #faadad;*/
    color: #faadad !important;
    font-weight: 500;
    cursor: pointer;
    /*border: 1px solid red !important;
    border-bottom: 2px solid red !important;*/
}
/* ------------------ Queues Module--------------------- */
.HRTag-Bold {
    border: 1px solid;
}

/*------------------------ Multi Pop-up   ---------------------------*/
.modal.fade.in[role="dialog"] {
    z-index: 1060 !important;
}

    .modal.fade.in[role="dialog"] + .modal-backdrop {
        z-index: 1058 !important;
    }

body .modal.fade.in[role="dialog"]:first-child {
    z-index: 1062 !important;
}

body .modal.fade.in[role="dialog"] + .modal-backdrop:nth-child(3) {
    z-index: 1061 !important;
}



.calender-view {
    float: left;
    padding: 20px;
}

.fc-center h2 {
    color: #333333;
}

.table th, .table td {
    word-break: break-word;
}

.word-break-none th, .word-break-none .table td {
    word-break: unset !important;
}

/* ------------------ Research Module--------------------- */
.Research-IsNewRequest td {
    color: #22d810;
}

.Research-Border-IsNewRequest {
    border: 1px solid red !important;
    border-bottom: 2px solid red !important;
}
/* ------------------ Research Module--------------------- */
/* ------------------OTP Timer--------------------- */
.time-cal-otp {
    font-weight: 600;
    font-size: 18px;
    color: #1E656D;
}

.Re-SendOTP-inactive {
    opacity: 0.5;
}
/* ------------------OTP Timer--------------------- */

.otp-form .modal-body .form-group label {
    font-weight: 600;
}

.otp-form .modal-footer {
    background: #f1f1f1;
}

.otp-form-box {
    width: 300px;
    margin: 0 auto;
    text-align: center;
}

.tree-pop-link {
    cursor: pointer;
}

#icon_collaps {
    cursor: pointer;
}

.fa-minus:before {
    content: "\f068" !important;
}

.info-color {
    color: #F62A00;
}
/*Facilitator Confirmation*/

.facilitator-confirmation-body {
    float: left;
    width: 100%;
    padding: 150px 20px 20px 20px;
    background: #f1f1f1;
    height: 100vh;
    position: relative;
}

.email-veri-container {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.success-icon-big {
    font-size: 35px;
    color: #1E656D;
}

.email-veri-container h2 {
    font-size: 24px;
}

.email-veri-container p {
    font-size: 16px;
}

    .email-veri-container p a {
        color: #1E656D;
    }

        .email-veri-container p a:hover {
            text-decoration: underline;
        }

.settings-form {
    float: left;
    padding: 20px;
    width: 100%;
}

.restriction-access-box {
    min-width: 250px;
    float: left;
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px;
    position: relative;
}

.access-btn {
    width: 100%;
    border: 1px solid #ccc;
    outline: none !important;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    background: #e9ecef;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .access-btn:hover {
        background: #e1e4e6;
    }

.Restriction-status {
    font-size: 16px;
    line-height: 16px;
    padding: 10px 4px;
}

.select-question-form {
    padding: 10px;
    background: #f1f1f1;
    overflow-y: auto;
    height: calc(100vh - 217px);
}

.question-group {
    display: flex;
    align-items: center;
    vertical-align: middle;
    font-size: 16px;
    line-height: 20px;
}

    .question-group .items {
        padding: 10px;
    }

        .question-group .items.image-box {
            width: 30px;
            height: 30px;
            padding: 4px;
        }

            .question-group .items.image-box img {
                width: 100%;
                height: auto;
            }

.question-section {
    padding: 0;
    margin: 0;
}

    .question-section li {
        list-style-type: none;
        transition: all 0.6s ease;
        cursor: default;
    }

        .question-section li:hover {
            background: #fff;
        }

.select-question-form p {
    font-size: 17px;
}

.no-bg {
    background: none !important;
}

.restriction-access-box-1 {
    /*width: 100%;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;*/
}

.display-flex-outer-box {
    padding-left: 25px;
    float: left;
}

.display-flex-box {
    display: flex;
    vertical-align: middle;
    align-items: center;
}

.flex-box {
    padding: 0 25px 0 0;
}

.inner-flex-box {
    border: 1px solid #ccc;
    padding: 10px;
    min-width: 300px;
}

.access-btn-1 {
    border: 1px solid #ccc;
    outline: none !important;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    background: #e9ecef;
    padding: 8px;
}

.activty-btn {
    border: 1px solid #1E656D;
    padding: 5px 10px 3px;
    cursor: pointer;
    border-radius: 6px;
    background: #f1f1f1;
}

.question-bank .cke_contents {
    height: 50px !important;
}

.question-bank-1 .cke_contents {
    height: 100px !important;
}

/*----------- Restriction Grade -----------*/

.custom-editor-height .cke_contents.cke_reset {
    height: 100px !important;
}

.restriction-grade {
    /*padding: 10px;
    border: 1px solid #ccc;*/
    margin-bottom: 10px;
}

.restriction-grade-box {
    padding: 10px 15px;
    border: 1px solid #ccc;
    width: 450px;
    float: left;
}

.restric-btn {
    font-size: 14px;
    padding: 2px 4px;
    color: #fff;
    background: #ff7518;
    border: 0;
    cursor: pointer;
    outline: none !important;
    transition: all 0.6s ease;
}

    .restric-btn:hover {
        background: #c1540a;
    }

.grade-section-1 .flex-box {
    margin: 0 auto;
}

.click-popup {
    width: 300px;
    border: 1px solid #ccc;
    background: #fff;
    height: 0;
    overflow: hidden;
    position: absolute;
    left: 10px;
    bottom: 10px;
    transition: all 0.6s ease-in-out;
    box-shadow: 0 0 8px #999;
}

.click-popup-header {
    background: #1E656D;
    color: #fff;
    padding: 4px 10px;
}

    .click-popup-header .title {
        font-size: 16px;
        font-weight: 600;
        float: left;
    }

    .click-popup-header button {
        float: right;
        color: #fff;
        font-size: 16px;
        background: none;
        border: 0;
        outline: none !important;
    }

.click-popup-inner {
    padding: 10px;
}

.click-popup.active {
    height: 300px;
}

/*-------------  Drag and Drop File Upload   ------------- */

.file-drag {
    width: 120px;
    height: 120px;
    border: 1px dashed #aaa;
    position: relative;
    border-radius: 10px;
}

    .file-drag p {
        width: 100%;
        height: 100%;
        text-align: center;
        margin: 0;
        background: #fff;
        border-radius: 15px;
    }

    .file-drag input {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        outline: none;
        opacity: 0;
    }

    .file-drag button {
        margin: 0;
        color: #fff;
        background: #16a085;
        border: none;
        width: 508px;
        height: 35px;
        margin-top: -20px;
        margin-left: -4px;
        border-radius: 4px;
        border-bottom: 4px solid #117A60;
        transition: all .2s ease;
        outline: none;
    }

        .file-drag button:hover {
            background: #149174;
            color: #0C5645;
        }

        .file-drag button:active {
            border: 0;
        }













/*----------------------- Click Msg Start Here --------------------------*/

.click-msg {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 4px;
    font-size: 20px;
    line-height: 34px;
    color: #fff;
    background: #1E656D;
    text-align: center;
    cursor: pointer;
    border: 1px solid #1E656D;
    transition: all 0.6s ease;
    box-shadow: 0 0 6px #fff;
}

    .click-msg:hover {
        color: #1E656D;
        background: #fff;
        box-shadow: 0 0 10px #000;
    }






/*@media screen and (max-width: 1200px) {
    .finance-db-left {
        width: 100%;
    }

    .finance-db-right {
        width: 100%;
        padding: 0;
    }

    .custom-responsive-1 li {
        width: 33.333%;
        display: inline-block;
        padding: 0 10px;
    }

    .custom-responsive-2 li {
        width: 50% !important;
        display: inline-block;
        padding-right: 10px;
    }

        .custom-responsive-2 li:nth-child(3n) {
            padding-right: 0;
        }

    .finance-db-notes .boxed {
        height: 250px;
    }

    .finance-tab-item-1 .finance-db-section .finance-db-box-left {
        width: 100%;
        border-right: 0;
        padding-right: 0;
    }

    .finance-tab-item-1 .finance-db-section .finance-db-box-right {
        width: 100%;
        padding-left: 0;
    }

    .finance-tab-item-2 .finance-db-section .finance-db-box-left {
        width: 100%;
        padding-right: 0;
        border-right: 0;
    }

    .finance-tab-item-2 .finance-db-section .finance-db-box-right {
        width: 50%;
        margin-top: 10px;
    }

    .finance-tab-item-3 .finance-db-section .finance-db-box-left {
        width: 100%;
        padding-right: 0;
        border-right: 0;
        margin-bottom: 10px;
    }

    .finance-tab-item-3 .finance-db-section .finance-db-box-right {
        width: 100%;
        padding-left: 0;
    }

        .finance-tab-item-3 .finance-db-section .finance-db-box-right .finance-db-chart-box {
            height: 300px;
        }

    .finance-db-section-right {
        max-width: 100%;
    }

    .finance-db-section-left {
        width: 100%;
    }

    .slide-form-container-xl {
        width: calc(100% - 40px);
    }

    .contact-info-table table tr td select {
        width: 120px;
    }

    .custom-btn-box {
        text-align: right;
    }
}

@media screen and (max-width: 992px) {
    .slide-form-container-l {
        width: calc(100% - 40px);
    }

    .left-tab-container {
        display: grid;
    }

    .tabs-left {
        margin-bottom: 10px;
    }

    .left-tab-container .tab-content {
        width: 100%;
        margin-left: 0;
        padding-left: 0px;
    }

    .tab-content .tab-pane .search-section.left-tab-serach {
        padding-left: 2px;
    }

    .tab-content .tab-pane .data-table-section {
        padding-left: 2px;
    }
}

@media screen and (max-width: 768px) {
    .finance-db-box-left {
        width: 100%;
        border-right: 0;
        padding-right: 0;
    }

    .finance-db-box-right {
        width: 100%;
        padding-left: 0;
    }

    .finance-db-box-left ul {
        margin-bottom: 10px;
    }

    .finance-tab-item-3 .finance-db-section .finance-db-box-left .finance-db-box-inner-left {
        width: 100%;
        padding-right: 0;
    }

    .custom-responsive-1 li {
        width: 50% !important;
    }

    .custom-responsive-3 {
        margin-bottom: 10px;
    }

        .custom-responsive-3 li {
            width: 50% !important;
            padding: 0 15px;
        }

            .custom-responsive-3 li:nth-child(even) {
                padding-right: 0;
            }

            .custom-responsive-3 li:nth-child(odd) {
                padding-left: 0;
            }

    .finance-tab-item-3 .finance-db-section .finance-db-box-left .finance-db-box-inner-right {
        width: 100%;
        padding-left: 0;
    }

    .custom-responsive-4 li {
        width: 50% !important;
        float: left;
        padding: 0 15px;
    }

        .custom-responsive-4 li:nth-child(even) {
            padding-right: 0;
        }

        .custom-responsive-4 li:nth-child(odd) {
            padding-left: 0;
        }

    .slide-form-container-xxl {
        width: calc(100% - 40px);
    }

    .slide-form-container-m {
        width: calc(100% - 40px);
    }

    .document-filters li {
        width: 50%;
    }

    .smis-popup-m {
        width: calc(100% - 40px);
        left: calc(40px - 20px);
    }

    .filter-bar-right {
        display: block;
        text-align: right;
        width: 100%;
    }

    .filter-bar-left {
        width: 100%;
    }

    .filter-group-btn {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 579px) {
    .finance-db-notes .boxed {
        width: 100% !important;
        border-right: 0;
        margin-bottom: 10px;
    }

    .custom-responsive-1 li {
        width: 100% !important;
        padding-right: 0;
    }

    .custom-responsive-2 li {
        width: 100% !important;
    }

    .finance-box custom-2 li {
        width: 100%;
    }

    .finance-db-box-left ul li {
        width: 100%;
    }

    .finance-db-notes.custom .boxed {
        width: 100%;
        margin-bottom: 0;
    }

    .custom-responsive-3 li {
        width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }

    .custom-responsive-4 li {
        width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }

    .slide-form-container-s {
        width: calc(100% - 40px);
    }

    .document-filters li {
        height: 100% !important;
    }

    .custom-search-box {
        width: 100% !important;
    }

        .custom-search-box input {
            padding: 4px 10px 4px 28px;
        }

    .filter-btn-1 {
        width: 100%;
    }

    .filter-control {
        width: 100%;
    }

    .filter-bar-right button {
        margin-left: 0;
    }

    .filter-bar-right .filter-control {
        margin-left: 0;
    }

    .custom-btn-box {
        padding: 10px 0;
    }
}*/
/*--------------- Web Pdf css Start here ------------------------*/

.pdf-editor-section {
}

.pdf-editor-header {
    padding: 6px 10px;
    background: #f5f5f5;
}

.header-box-1 {
    width: 33.33%;
}

.main-title {
    font-size: 16px;
    color: #006c3e;
    font-weight: 600;
}

.pdf-tools {
    width: 65px;
    height: calc(100vh - 173px);
    background: #f5f5f5;
    padding: 0px 8px;
    float: left;
    text-align: center;
}

.pdf-body {
    width: 100%;
}

.pdf-emb-code {
    height: calc(100vh - 122px);
}

.pdf-editor-box {
    float: left;
    width: 100%;
}

.pdf-editor-content-box {
    width: calc(100% - 65px);
    height: calc(100vh - 173px);
    overflow-y: auto;
    /*overflow-x: auto;*/
    /*padding: 10px*/;
    /*background: #ccc;*/
    float: left;
    position: relative;
    z-index: 1;
}

.pdf-doc-editor {
    width: 1000px;
    height: calc(100vh - 140px) !important;
    overflow-y: auto;
    margin-left: 200px;
    margin: 10px auto;
    overflow-x: hidden;
    /*position:relative;
    z-index: 9;*/
}

.delete-tool {
    position: absolute;
    top: 50px;
    left: 50px;
    padding: 10px;
    color: #FF0000;
    max-width: 60px;
    /*margin-top: -60px;*/
    border: 1px solid #ff0000;
    /* height: 200px; */
    background: rgba(255, 0, 0, 0.03);
    font-size: 32px;
    text-align: center;
    z-index: 99;
}

.page-each {
    position: relative;
    margin-bottom: 40px;
    float: left;
    display: none;
}

    .page-each.current-page {
        display: inline;
    }

.canvas-edit {
    border: 1px solid black;
    position: absolute;
    /*background: rgba(0,0,0,0.1);*/
    width: 100%;
    height: 100% !important;
    left: 0;
    top: 0;
}

.pdf-tool-bar {
    padding: 10px 15px;
    background: #f5f5f5;
}

.display-flex {
    display: flex;
    vertical-align: middle;
    align-items: center;
}

.pages-counter .flex-box {
    padding: 2px 10px;
    color: #999;
}

    .pages-counter .flex-box i {
        font-size: 20px;
        line-height: 23px;
        display: flex;
    }
/*.pages-counter .flex-box:hover{
	background: #f1f1f1;
}*/
.flex-box-1 {
    padding: 4px;
    color: #999;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 35px;
    height: 30px;
    text-align: center;
    font-size: 15px;
    line-height: 20px;
    transition: all 0.6s ease;
    background: #fff;
}

    .flex-box-1:hover {
        background: #f1f1f1;
    }

.flex-box-2 {
    padding: 4px;
    color: #999;
    width: 34px;
    height: 34px;
    text-align: center;
    font-size: 12px;
    line-height: 30px;
    float: right;
    transition: all 0.6s ease;
    cursor: pointer;
    position: relative;
}

    .flex-box-2:hover {
        background: #f1f1f1;
    }

.flex-box-dropdown {
    position: absolute;
    left: 40px;
    background: #FFFFFF;
    width: 110px;
    padding: 10px 10px 0 10px;
    z-index: 99;
    top: 0px;
    box-shadow: 2px 0 3px #aaaaaa;
}

.oval {
    transform: scale(1,0.7);
}

.flex-box p {
    margin: 0;
}

.flex-box-2 select {
    padding: 4px 2px !important;
    height: 25px !important;
}

.pages-counter {
    width: 170px;
    margin: 0 auto !important;
    font-size: 16px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ccc;
    margin: 0 10px;
    background: #fff;
}

    .pages-counter .flex-box {
        border-right: 1px solid #ccc;
    }

        .pages-counter .flex-box:last-child {
            border-right: 0;
        }

.pdf-tool-bar-left {
    float: left;
}

.pdf-tool-bar-right {
    float: right;
}

.pdf-tool-bar-left .flex-box-1 {
    margin-right: 10px;
}

.tool-boxes {
    float: right;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #fff;
    width: 36px;
}

    .tool-boxes .flex-box-2 {
        border-bottom: 1px solid #ccc;
        position: relative;
    }


        .tool-boxes .flex-box-2:last-child {
            border-bottom: 0;
        }

.tool-boxes-dropdown {
    position: absolute;
    background: #f5f5f5;
    top: 0;
    left: 34px;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 22;
}

    .tool-boxes-dropdown ul {
        padding: 0;
        margin: 0;
    }

        .tool-boxes-dropdown ul li {
            list-style-type: none;
            border-bottom: 1px solid #ccc;
        }

            .tool-boxes-dropdown ul li:last-child {
                border-bottom: 0;
            }

.tool-items {
    display: flex;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
}

.tool-item-1 {
    font-size: 12px;
    line-height: 15px;
    color: #000;
    width: 30px;
    padding: 6px 4px;
    transition: all 0.3s ease;
}

    .tool-item-1:hover {
        background: #ccc;
    }


.pdf-editor-right {
    float: right;
    width: 400px;
    position: fixed;
    top: 65px;
    right: -400px;
    padding: 15px;
    overflow-y: auto;
    height: calc(100vh - 55px);
    background: #f5f5f5;
    border-left: 1px solid #ccc;
    transition: ease-in-out 0.6s all;
}

.submit-box {
    padding: 10px;
    width: 100%;
    background: #c6f6ce;
}

    .submit-box p {
        margin: 0;
        font-size: 16px;
    }

.upload-doc-section {
    padding: 15px 0;
}

    .upload-doc-section h6 {
        color: #006c3e;
    }

.doc-time {
    text-align: right;
    font-size: 14px;
}

.grade-view {
    padding: 0 0 20px 0;
}

    .grade-view a {
        color: #006c3e;
        font-weight: 600;
        text-decoration: none;
    }


.grade-section {
    border: 1px solid #999;
    padding: 15px;
}

.grade-header {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

    .grade-header p {
        float: left;
        margin: 0;
    }

    .grade-header span {
        float: right;
    }

.grade-box {
    padding: 8px 0px;
    border-bottom: 1px solid #ccc;
}

.grade-box-left {
    float: left;
    width: 50%;
}

    .grade-box-left h6 {
        margin: 0;
    }

    .grade-box-left p {
        margin: 0;
        font-size: 14px;
    }

.grade-box-right p {
    margin: 0;
    text-align: right;
    font-size: 14px;
    line-height: 16px;
}



.pdf-editor-footer {
    padding: 10px;
    text-align: center;
    border-top: 1px solid #ccc;
}

.footer-check-box {
}

.primary-btn {
    font-size: 15px;
    color: #333;
    background: #ccc;
    border: 1px solid #ccc;
    padding: 2px 10px;
    transition: all 0.6s ease;
    cursor: pointer;
    outline: none !important;
}

    .primary-btn:hover {
        background: #abaaaa;
    }

    .primary-btn.active {
        color: #fff;
        background: #1E656D;
        border: 1px solid #1E656D;
    }

        .primary-btn.active:hover {
            box-shadow: 0 0 8px #1E656D;
        }

.mask {
    position: absolute;
    top: 120px;
    left: 1px;
    width: calc(100% - 67px);
    margin-left: 49px;
    height: calc(100vh - 119px);
    border: 3px solid #73AD21;
}

#myCanvas {
    position: relative;
    display: block;
    background-color: rgba(58, 154, 221, 0.3);
    height: calc(100vh - 125px) !important;
}

.WrongBtn {
    position: absolute;
    left: 43%;
    top: 247px;
    margin: 0 auto;
}

.RightBtn {
    position: absolute;
    left: 58%;
    top: 247px;
    margin: 0 auto;
}

.EraseBtn {
    position: absolute;
    right: 50%;
    top: 247px;
    margin: 0 auto;
}

.EraseBtn1 {
    position: absolute;
    left: 50%;
    top: 247px;
    margin: 0 auto;
}

#ImageTickmarkid {
    position: absolute;
    left: 50%;
    top: 247px;
    margin: 0 auto;
}

.Imgclass {
    position: absolute;
    top: 247px;
    margin: 0 auto;
    color: #218838;
}

.ImgWrongclass {
    position: absolute;
    top: 247px;
    margin: 0 auto;
    color: #218838;
}

.CircleBtn {
    position: absolute;
    left: 80%;
    top: 247px;
    margin: 0 auto;
}

.RectBtn {
    position: absolute;
    left: 70%;
    top: 247px;
    margin: 0 auto;
}
/*--------------- hanburge menu css start here --------------*/
.hamburge-menu {
    width: 36px;
    height: 35px;
    padding: 4px;
    position: absolute;
    left: -20px;
    top: 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    background: #f5f5f5;
}


.bar1, .bar2, .bar3 {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 4px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-3px, 6px);
    transform: rotate(-45deg) translate(-3px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-4px, -7px);
    transform: rotate(45deg) translate(-4px, -7px);
}
/*--------------- hanburge menu End css --------------*/

.commet-input {
    position: absolute !important;
    padding: 8px;
    background: #5a5a5a;
    z-index: 1000 !important;
    border-radius: 8px;
    margin-top: -40px;
    transition: all 0.6s ease;
    width: 30px;
    height: 30px;
}

    .commet-input:hover {
        margin-top: -110px !important;
        width: 250px;
        height: 100px !important;
    }

    .commet-input::after {
        content: "";
        position: absolute;
        left: 9px;
        bottom: -9px;
        width: 0;
        height: 0;
        border-top: 10px solid #5a5a5a;
        border-right: 13px solid transparent;
    }

    .commet-input::before {
        content: "";
        position: absolute;
        left: 9px;
        bottom: -12px;
        width: 0;
        height: 0;
        border-top: 13px solid #5a5a5a;
        border-right: 15px solid transparent;
    }

    .commet-input textarea {
        position: relative;
        border: 0 !important;
        display: block;
        border-radius: 8px;
        padding: 6px;
        background: #5a5a5a;
        color: #fff;
        width: 100% !important;
        height: 100% !important;
        opacity: 0;
        transition: all 0.6s ease;
    }

    .commet-input:hover textarea {
        opacity: 1;
    }

    .commet-input textarea:focus {
        outline: none !important;
    }
/*--------------- Web Pdf css End here ------------------------*/

.custom-excel-btn {
    font-size: 14px;
    color: #fff;
    background: #1E656D;
    border-radius: 30px;
    outline: none !important;
    padding: 2px 10px;
    border: 1px solid #1E656D;
    transition: all 0.6s ease;
}

.custom-pdf-btn {
    font-size: 14px;
    color: #fff;
    background: #F62A00;
    border-radius: 30px;
    outline: none !important;
    padding: 2px 10px;
    border: 1px solid #F62A00;
    transition: all 0.6s ease;
}

.custom-print-btn {
    font-size: 14px;
    color: #fff;
    background: #09b2b4;
    border-radius: 30px;
    outline: none !important;
    padding: 2px 10px;
    border: 1px solid #09b2b4;
    transition: all 0.6s ease;
}



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

.section-box {
    padding: 10px 0;
    margin-bottom: 10px;
}

.section-box-left {
    float: left;
    /*padding: 5px 0 0 0;*/
    /*padding-bottom: 10px;*/
}

    .section-box-left > .input-group {
        float: left;
        width: 200px;
        margin: 0 10px 10px 0;
    }

    .section-box-left .filter-btn {
        margin: 0 0px 10px 10px;
    }

.section-box-right {
    float: right;
    text-align: right;
    padding-bottom: 10px;
}

    .section-box-right > .style-1 {
        float: left;
        padding-top: 2px;
        width: 150px;
        margin: 0 0 10px 10px;
    }

        .section-box-right > .style-1 > .filter-btn {
            float: left;
        }

.check-boxed {
    padding: 10px;
}

.shedule-box {
    border: 1px solid #00663b;
    display: flex;
    position: relative;
}

.shedule-box-1 {
    float: left;
    width: 140px;
}

.shedule-profile {
    width: 100px;
    height: 100px;
    display: block;
    overflow: hidden;
    background: #f1f1f1;
    /*border-right: 1px solid #00663b;*/
    /*padding: 10px;*/
}

    .shedule-profile img {
        width: 100%;
        max-height: 100%;
    }

.shedule-box-2 {
    float: left;
    width: calc(100% - 178px);
}

.shedule-inner-box {
    float: left;
    width: 100%;
}

.info-box {
    width: 18%;
    float: left;
    padding: 4px;
    position: relative;
}

.info-grid-btn {
    display: block;
    color: #fca041 !important;
    font-weight: 900 !important;
    cursor: pointer;
}


.info-box.L {
    width: 28%;
}

.info-box label {
    font-size: 13px;
    line-height: 13px;
    font-weight: 500;
    color: #00984f;
    margin: 0;
}

.info-box p {
    font-size: 14px;
    line-height: 16px;
    color: #000;
    font-weight: 500;
    margin: 0;
}

/*------------ Info box-1 ---------------*/

.info-box-1 {
    float: left;
    padding: 4px;
}

    .info-box-1 label {
        font-size: 13px;
        font-weight: 500;
        color: #00984f;
        margin: 0;
    }

    .info-box-1 p {
        font-size: 14px;
        color: #000;
        font-weight: 500;
        margin: 0;
    }

        .info-box-1 p span {
            font-size: 16px;
            font-weight: 700;
        }

.font-weight-normal {
    font-size: 13px !important;
    font-weight: normal !important;
}



.shedule-box-3 {
    float: right;
    width: 38px;
    color: #fff;
    background: #008000;
    /*height:100px;*/
    padding: 0px 6px;
    display: flex;
    align-items: center;
    vertical-align: middle;
}

    .shedule-box-3 ul {
        padding: 0;
        margin: 0;
        width: 100%;
    }

        .shedule-box-3 ul li {
            font-size: 12px;
            width: 100%;
            list-style: none;
            text-align: center;
            padding: 3.5px 0;
            border-bottom: 1px solid #ccc;
            transition: all 0.6s ease;
        }

            .shedule-box-3 ul li:last-child {
                border-bottom: 0;
            }

            .shedule-box-3 ul li:hover {
                background: #00663b;
            }

.shedule-btn-box {
    text-align: right;
    margin-bottom: 10px;
    padding-right: 34px;
}

    .shedule-btn-box button {
        margin: 0 5px 5px 10px;
    }

    .shedule-btn-box span {
        font-size: 14px;
        color: #000;
        padding: 2px;
        font-weight: 500;
    }

.info-status {
    font-size: 12px;
    color: #00984f;
    font-weight: 500;
    position: absolute;
    right: 10px;
    bottom: 5px;
}


.bg-1 {
    background: #006fff !important;
}

.bg-2 {
    background: #fca041 !important;
}

.bg-3 {
    background: #099d90 !important;
}

.bg-4 {
    background: #a20051 !important;
}




/*========================================================== Responsive start here ==========================================================*/

@media screen and (max-width: 1560px) {
    .dash-num-box-inner {
        min-height: 120px;
    }

    .dash-num-box.active .dash-num-box-inner {
        min-height: 150px;
    }
}

@media screen and (max-width: 1200px) {
    .finance-db-left {
        width: 100%;
    }

    .finance-db-right {
        width: 100%;
        padding: 0;
    }

    .custom-responsive-1 li {
        width: 33.333%;
        display: inline-block;
        padding: 0 10px;
    }

    .custom-responsive-2 li {
        width: 50% !important;
        display: inline-block;
        padding-right: 10px;
    }

        .custom-responsive-2 li:nth-child(3n) {
            padding-right: 0;
        }

    .finance-db-notes .boxed {
        height: 250px;
    }

    .finance-tab-item-1 .finance-db-section .finance-db-box-left {
        width: 100%;
        border-right: 0;
        padding-right: 0;
    }

    .finance-tab-item-1 .finance-db-section .finance-db-box-right {
        width: 100%;
        padding-left: 0;
    }

    .finance-tab-item-2 .finance-db-section .finance-db-box-left {
        width: 100%;
        padding-right: 0;
        border-right: 0;
    }

    .finance-tab-item-2 .finance-db-section .finance-db-box-right {
        width: 50%;
        margin-top: 10px;
    }

    .finance-tab-item-3 .finance-db-section .finance-db-box-left {
        width: 100%;
        padding-right: 0;
        border-right: 0;
        margin-bottom: 10px;
    }

    .finance-tab-item-3 .finance-db-section .finance-db-box-right {
        width: 100%;
        padding-left: 0;
    }

        .finance-tab-item-3 .finance-db-section .finance-db-box-right .finance-db-chart-box {
            height: 300px;
        }

    /*/*.finance-db-section-right {
        max-width: 100%;
    }*/ */ .finance-db-section-left {
        width: 100%;
    }

    .slide-form-container-xl {
        width: calc(100% - 40px);
    }

    .contact-info-table table tr td select {
        width: 120px;
    }

    .custom-btn-box {
        text-align: right;
    }
}

@media screen and (max-width: 992px) {
    .slide-form-container-l {
        width: calc(100% - 40px);
    }

    .left-tab-container {
        /*display: grid;*/
        display: inherit;
    }



        .left-tab-container .tab-content {
            width: 100%;
            margin-left: 0;
            padding-left: 0;
        }

    .tab-content .tab-pane .search-section.left-tab-serach {
        padding-left: 2px;
    }

    .tab-content .tab-pane .data-table-section {
        padding-left: 2px;
    }
}

@media screen and (max-width: 768px) {
    .finance-db-box-left {
        width: 100%;
        border-right: 0;
        padding-right: 0;
    }

    .finance-db-box-right {
        width: 100%;
        padding-left: 0;
    }

    .finance-db-box-left ul {
        margin-bottom: 10px;
    }

    .finance-tab-item-3 .finance-db-section .finance-db-box-left .finance-db-box-inner-left {
        width: 100%;
        padding-right: 0;
    }

    .custom-responsive-1 li {
        width: 50% !important;
    }

    .custom-responsive-3 {
        margin-bottom: 10px;
    }

        .custom-responsive-3 li {
            width: 50% !important;
            padding: 0 15px;
        }

            .custom-responsive-3 li:nth-child(even) {
                padding-right: 0;
            }

            .custom-responsive-3 li:nth-child(odd) {
                padding-left: 0;
            }

    .finance-tab-item-3 .finance-db-section .finance-db-box-left .finance-db-box-inner-right {
        width: 100%;
        padding-left: 0;
    }

    .custom-responsive-4 li {
        width: 50% !important;
        float: left;
        padding: 0 15px;
    }

        .custom-responsive-4 li:nth-child(even) {
            padding-right: 0;
        }

        .custom-responsive-4 li:nth-child(odd) {
            padding-left: 0;
        }

    .slide-form-container-xxl {
        width: calc(100% - 40px);
    }

    .slide-form-container-m {
        width: calc(100% - 40px);
    }

    /*.document-filters li {
        width: 50%;
    }*/

    .smis-popup-m {
        width: calc(100% - 40px);
        left: calc(40px - 20px);
    }

    .filter-bar-right {
        display: block;
        text-align: right;
        width: 100%;
    }

    .filter-bar-left {
        width: 100%;
    }

    .filter-group-btn {
        margin-bottom: 10px;
    }

    .db-status-box.custom {
        float: left;
        display: block;
    }

        .db-status-box.custom .db-status-content {
            float: left;
            width: 25%;
            min-height: 70px;
        }
}

@media screen and (max-width: 579px) {
    .finance-db-notes .boxed {
        width: 100% !important;
        border-right: 0;
        margin-bottom: 10px;
    }

    .custom-responsive-1 li {
        width: 100% !important;
        padding-right: 0;
    }

    .custom-responsive-2 li {
        width: 100% !important;
    }

    .finance-box custom-2 li {
        width: 100%;
    }

    .finance-db-box-left ul li {
        width: 100%;
    }

    .finance-db-notes.custom .boxed {
        width: 100%;
        margin-bottom: 0;
    }

    .custom-responsive-3 li {
        width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }

    .custom-responsive-4 li {
        width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }

    .slide-form-container-s {
        width: calc(100% - 40px);
    }

    .document-filters li {
        height: 100% !important;
    }

    .custom-search-box {
        width: 100% !important;
    }

        .custom-search-box input {
            padding: 4px 10px 4px 28px;
        }

    .filter-btn-1 {
        width: 100%;
    }

    .filter-control {
        width: 100%;
    }

    .filter-bar-right button {
        margin-left: 0;
    }

    .filter-bar-right .filter-control {
        margin-left: 0;
    }

    .custom-btn-box {
        padding: 10px 0;
    }

    .db-status-box.custom .db-status-content {
        width: 50% !important;
    }
}




.table-control {
    width: 100%;
    font-size: 14px !important;
    font-weight: 300;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0;
    outline: none !important;
}

/*-------------------------  Marks Preview box start------------------------------*/
.validate-form-block {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    z-index: 1001;
    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;
}
/*-------------------------  Marks Preview box end------------------------------*/

.alert-box {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    display: none;
}









.custom-popup-form {
    position: fixed;
    width: 0;
    border-left: 1px solid #ccc;
    background: #fff;
    top: 70px;
    overflow: hidden;
    transition: all 0.6s ease;
    z-index: 222;
}

    .custom-popup-form.active {
        width: 100%;
        overflow-y: auto;
        right: 0;
        z-index: 222;
    }

.form-title-bar {
    width: 100%;
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    background: #1E656D;
    color: #fff;
}

.form-title-bar-left {
    float: left;
    width: 50px;
}

.form-title-bar-right {
    float: right;
    width: calc(100% - 50px);
}

.custom-popup-form-close-btn {
    font-size: 20px;
    color: #fff;
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: all 0.6s ease;
    cursor: pointer;
    outline: none !important;
    padding: 2px 10px 1px 10px;
}

    .custom-popup-form-close-btn:hover {
        background: #ccc;
    }

.form-title-bar-right .form-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 2px;
}

.custom-popup-form-body {
    padding: 15px;
    width: 100%;
    height: calc(100vh - 119px);
    overflow-y: auto;
}

.grid-header-table-btn {
    position: absolute;
    left: 10px;
    top: 7px;
    z-index: 9;
}

.cell-width-150 .form-control {
    min-width: 50px !important;
}

.controls-width-150 .form-control {
    min-width: 150px !important;
}

.controls-width-150 > tr > th,
.controls-width-150 > tbody > tr > th {
    min-width: 150px !important;
}

    .controls-width-150 > tr > th.width-100,
    .controls-width-150 > tbody > tr > th.width-100 {
        min-width: inherit !important;
    }

.controls-width-150 .input-group input {
    min-width: inherit !important;
}

/*--------------- The emojis radio btns ----------------*/
.emojis-box {
    display: block;
    position: relative;
    margin-right: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left;
}

    /* Hide the browser's default checkbox */
    .emojis-box input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: #eee;
    padding: 2px 0 0 0.8px;
    text-align: center;
}

/* On mouse-over, add a grey background color */
.emojis-box:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.emojis-box input:checked ~ .checkmark {
    background-color: #FFF;
    border: 1px solid #126440;
    box-shadow: 0 0 8px #126440;
    padding: 0.7px 0 0 0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.emojis-box input:checked ~ .checkmark:after {
    display: block;
}

.emojis-box input:checked ~ .checkmark {
    background-color: red;
}

.checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 25px;
    background-color: #eee;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    padding: 2px 9px;
    border: 1px solid #ccc;
    transition: all 0.6s ease;
}


/*----------- Theme Css Start Here ------------*/

/*----------- LAYOUT 1 ------------*/

/*.layout-1 .form-section {
    min-height: calc(100vh - 70px);
}

.layout-1 .user-view-container {
    position: relative;
}

.layout-1 .form-body .capture-form {
    padding: 10px 10px 0 0px;
    width: calc(100% - 260px);
}

.layout-1 .capture-form {
    padding: 10px 10px 0 0px;
    width: calc(100% - 260px);
}

.layout-1 .arrow-step-link-group {
    padding: 10px;
}

.layout-1 .arrow-step-link > span {
    padding: 10px 25px 10px;
}

.layout-1 .width-max {
    width: 60vw;
}

.layout-1 .search-drop-container.width-600 {
    width: 500px;
}

.layout-1 .slide-form {
    transition: inherit !important;
}

.layout-1 .child-two li a {
    transition: inherit !important;
}*/


/*----------- LAYOUT 2 ------------*/

.layout-2 .capture-form {
    width: calc(100% - 80px);
}

.layout-2 .user-view-container {
    position: relative;
}

.layout-2 .quick-noti-list ul {
    max-height: calc(100vh - 200px);
    box-shadow: 0 0 3px #000;
    padding-top: 50px;
}

    .layout-2 .quick-noti-list ul li:first-child {
        position: fixed;
        top: 0;
    }

    .layout-2 .quick-noti-list ul li .quick-noti-title {
        text-align: center;
    }

    .layout-2 .quick-noti-list ul li:last-child {
        padding: 0;
    }

    .layout-2 .quick-noti-list ul li .quick-noti-footer {
        font-size: 12px;
        padding: 10px 4px;
        background: #e4e2e2;
        border-top: 1px solid #999;
        color: #000 !important;
        font-weight: 600;
        text-align: center;
    }

.layout-2 .noti-desc {
    color: #000;
}

.layout-2 .fav-menu .fav-root-item:last-child > span:hover {
    background: #dc8831;
}

.layout-2 .width-max {
    width: 60vw;
}


.theme-thumb, .theme-button {
    float: left;
    width: 100%;
}

.theme-thumb {
    transition: all 0.4s ease;
    border: 1px solid #ccc;
}

    .theme-thumb:hover {
        box-shadow: 0 0 3px #000;
    }

    .theme-thumb img {
        width: 100%;
    }

.theme-button {
    padding: 20px 8px;
    text-align: center;
}

    .theme-button button {
        transition: inherit !important;
        margin-bottom: 10px;
    }

.nav-tooltip {
    position: relative;
    overflow: unset !important;
}

    .nav-tooltip:hover {
        position: relative;
        z-index: 11;
    }

/*.nav-tooltip::before {
        position: absolute;
        content: attr(nav-tooltip);
        width: 200px;
        right: -200px;
        top: 0;
        min-height: 27px;
        background: url(../Images/tooltip-bg.png);
        background-position: top left;
        opacity: 0;
        visibility: hidden;
        transition: all 0.6s ease;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        padding: 5px 5px 5px 30px;
        color: #000;
        pointer-events: none;
    }

    .nav-tooltip:hover::before {
        opacity: 1;
        visibility: visible;
    }*/

/*Theme Boxes styles*/

.theme-group-container {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    transition: all 0.6s ease;
}

    .theme-group-container:hover {
        box-shadow: 0 0 2px #000;
    }

.theme-box {
    width: 100%;
    padding: 5px;
    background: #f1f1f1;
    min-height: 100px;
    margin-bottom: 10px;
}

    .theme-box h6 {
        text-align: center;
    }

    .theme-box ul {
        padding: 0;
        margin: 20px 0 0 0;
        width: 100%;
        text-align: center;
    }

        .theme-box ul li {
            width: 48%;
            display: inline-block;
            list-style-type: none;
        }

.color-list {
    width: 100%;
    height: 18px;
    color: #fff;
    background: #000;
    text-align: center;
    overflow: hidden;
}

.theme-box-btn {
    width: 100%;
    text-align: center;
}

    .theme-box-btn .btn-success {
        font-size: 10px;
        padding: 2px 4px;
        outline: none !important;
    }

        .theme-box-btn .btn-success:focus {
            box-shadow: none !important;
        }

.add-theme-btn {
    color: #777;
    border: 1px solid #ccc;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    transition: all 0.4s ease;
}

    .add-theme-btn:hover {
        border-color: #777;
        color: #525252;
    }

        .add-theme-btn:hover .add-theme-btn-inner {
            background: #eaeaea;
        }

.add-theme-btn-inner {
    width: 100%;
    background: #f1f1f1;
    height: 145px;
    padding: 38px 15px;
}

    .add-theme-btn-inner label {
        font-size: 35px;
        margin: 0;
        cursor: pointer;
    }

    .add-theme-btn-inner span {
        display: block;
        font-size: 14px;
        font-weight: 500;
    }

/*Theme Preview Popup Css Start Here*/
.theme-Preview-popup {
    width: 100%;
    background: #fff;
    border: 1px solid #000;
}

.theme-Preview-header {
    width: 100%;
    position: relative;
}

.theme-Preview-close-btn {
    float: right;
    font-size: 16px;
    position: absolute;
    right: -30px;
    top: -1px;
    border: 1px solid #000;
    color: #fff;
    outline: none !important;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #db213b;
    transition: all 1s ease;
    cursor: pointer;
}

    .theme-Preview-close-btn:hover {
        background: #bb1a31;
    }

.theme-Preview-body {
    height: calc(100vh - 60px);
    overflow: hidden;
}

    .theme-Preview-body .form-section {
        padding: 0;
    }

    .theme-Preview-body .form-container-full-2 {
        height: calc(100vh - 132px);
        background: none;
    }

.theme-preview-box {
    width: 100%;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 15px;
    overflow-y: auto;
    max-height: 800px;
    margin-bottom: 15px;
    word-break: break-word;
}

.theme-Preview-body .tile-step-item-group {
    height: 100px !important;
}

.theme-Preview-body .left-tab-container {
    height: 150px !important;
}

.theme-Preview-body .slide-form-controls {
    min-height: unset !important;
}

.theme-Preview-body .plain-tab-item {
    height: 100px;
}

.theme-Preview-body .heaer-logo {
    width: unset;
}

.theme-Preview-body .page-wrap {
    position: relative;
    overflow: hidden;
}

.theme-Preview-body .default-layout {
    position: relative;
}

    .theme-Preview-body .default-layout header {
        top: 0px;
        right: 0px;
        width: 100%;
        position: absolute;
    }

.theme-Preview-body .layout-1 .page-right {
    width: calc(100% - 255px);
    position: relative;
}

.theme-Preview-body .layout-1 header {
    top: 0px;
    right: 0px;
    width: 100%;
    position: absolute;
}

.theme-Preview-body .layout-1 .form-section {
    margin-left: 2px;
}

.theme-Preview-body .layout-3 .page-left {
    width: calc(100% - 256px);
    position: relative;
}

.theme-Preview-body .layout-3 header {
    top: 0px;
    right: 0px;
    width: 100%;
    position: absolute;
}

.theme-Preview-body .layout-2 .page-right {
    width: calc(100% - 76px);
    position: relative;
}

.theme-Preview-popup .layout-2 header {
    top: 0px;
    right: 0px;
    width: 100%;
    position: absolute;
}

.theme-Preview-body .layout-2 .profile-thumb .dropdown-toggle img {
    width: 45px !important;
    height: 45px;
}

.theme-Preview-body .layout-2 .quick-profile-avatar img {
    width: 90px;
    height: 90px;
    margin-left: 85px;
}

.theme-Preview-body .layout-1 .side-nav-menu {
    max-height: calc(100vh - 130px);
}










/*Rubric Section*/

.rubric-section {
    width: 100%;
}

.rubric-header {
    padding: 10px 15px;
    text-align: left;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
}

.rubic-status {
    float: left;
    padding-right: 20px;
}

    .rubic-status label {
        margin: 0;
    }

    .rubic-status span {
        font-weight: 600;
    }

.rubric-body {
    padding: 10px 15px;
    height: calc(100vh - 134px);
    overflow-y: auto;
}

/*Radio Text Boxed*/
.radio-text-boxed label {
    display: inline-block;
    /*width: 200px*/;
    border: solid 2px #ccc;
    transition: all 0.3s;
}

.radio-text-boxed input[type="radio"] {
    display: none;
}

    .radio-text-boxed input[type="radio"]:checked + label {
        border: solid 2px #0665a7;
        background: #1194ee;
        color: #fff;
    }

.radio-text-boxed-header {
    width: 100%;
    float: left;
    padding: 5px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.radio-text-boxed-body {
    width: 100%;
    float: left;
    padding: 5px;
}

.radio-bold-text {
    display: block;
    font-size: 15px;
    padding-top: 5px;
}

.k-multiselect {
    min-width: 200px;
}

.k-list-scroller .k-list .k-item {
    position: relative;
    padding-left: 25px;
    line-height: 18px;
    padding-top: 10px;
}

    .k-list-scroller .k-list .k-item input {
        position: absolute;
        left: 5px;
        top: 12px;
    }

.green-custom-bg td {
    background-color: #A8DA67;
}



/*----------------- user chatting box Start Here -------------------*/
/*
    chat-window hide_header chat-list-hide chat-zoom
    .chat-window.chat-list-hide
    .chat-window.chat-zoom
*/
.smis-chat-window-close {
    position: absolute;
    left: 10px;
    top: 15px;
    font-size: 20px;
    padding: 0px 8px;
    color: #e02020;
    background: #fff;
    cursor: pointer;
    border: 1px solid #e02020;
    border-radius: 4px;
    outline: none !important;
    transition: all 0.4s ease;
}

    .smis-chat-window-close:hover {
        color: #e02020;
        background: #f5f5f5;
    }

.smis-chat-window {
    position: fixed;
    /*width: 100%;*/
    height: calc(100vh - 69px);
    top: 70px;
    background: #FFF;
    padding: 10px 0 10px 50px;
    right: 0;
    box-shadow: 0 0 5px #aaaaaa;
    z-index: 99;
}

.chat-window.chat-list-hide {
    /*width:calc(100% - 353px);*/
}

.smis-chat-window.chat-zoom {
    height: 100vh;
    top: 0;
}

.smis-chat-window > .db-chat-form {
    height: calc(100vh - 90px);
}

.smis-chat-window .db-chat-form .chat-body {
    height: calc(100vh - 228px);
}

.chat-client {
    float: left;
    position: relative;
    /*right: 15px;
    top: 15px;*/
    width: 320px;
    height: calc(100% - 0px);
    background: #fff;
    border: 1px solid #ccc;
    margin-right: 15px;
}

    .chat-client .chat-client-header {
        padding: 4px;
        background: #006936;
        color: #fff;
        display: flex;
        align-items: center;
        height: 48px;
        overflow: hidden;
    }

        .chat-client .chat-client-header .header-left {
            float: left;
            text-align: left;
            display: flex;
            align-items: center;
            vertical-align: middle;
            width: calc(100% - 91px);
        }

.chat-hide-show {
    font-size: 22px;
    padding: 6.5px 6px 6.5px 8px;
    border-radius: 10px 0 0 10px;
    position: absolute;
    left: -24px;
    top: 0;
    color: #fff;
    background: #000;
    border: 1px solid #000;
    outline: none !important;
}

.client-chat-profile {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f1f1;
    overflow: hidden;
    margin-right: 4px;
    display: inline-table;
}

    .client-chat-profile img {
        max-width: 100%;
        height: 40px;
        width: auto;
    }

.client-chats-close {
    background: none;
    color: #fff;
    border: 0;
    margin-right: 8px;
    outline: none !important;
}

.client-chat-name {
    font-size: 13px;
    line-height: 16px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 0.2px;
    width: calc(100% - 40px);
    max-height: 40px;
    overflow: hidden;
}

    .client-chat-name span {
        display: block;
        font-size: 12px;
        font-weight: normal;
    }

.chat-date-select {
    background: #F1F1F1;
    font-weight: 600;
    padding: 5px;
    text-align: center;
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.invidual-count {
    position: absolute;
    color: #FFF;
    top: -5px;
    left: -12px;
    border: 1px solid #ff0000;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    font-size: 12px;
    background: #e97f00;
}

.chat-client-header .header-right {
    padding: 0px 0px 0 2px;
    float: right;
    display: flex;
}

.client-info-btn {
    width: 30px;
    height: 30px;
    margin-left: 4px;
    font-size: 15px;
    color: #fff;
    border: 0;
    outline: none !important;
    background: #009c4c;
    border-radius: 50%;
    padding: 2px 0 0 0;
    transition: all 0.6s ease;
}

    .client-info-btn:hover {
        color: #009c4c;
        background: #fff;
        box-shadow: 0 0 8px #000;
    }

    .client-info-btn.close-btn {
        background: #fca041 !important;
    }

        .client-info-btn.close-btn:hover {
            color: #fca041;
            background: #fff !important;
            box-shadow: 0 0 2px #fca041 !important;
        }

.chat-client-body {
    padding: 10px;
    height: calc(100vh - 215px);
    overflow-y: auto;
    position: relative;
}

.smis-chat-window.chat-zoom .chat-client-body {
    height: calc(100vh - 156px);
}

.client-chat-text-box {
    text-align: left;
    display: flex;
    align-items: flex-start;
    vertical-align: middle;
}

.client-chat-text-box-left {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ccc;
    margin-right: 8px;
}

    .client-chat-text-box-left img {
        width: auto;
        max-width: 100%;
        height: 30px;
    }

.client-chat-text-box-right {
    width: calc(100% - 30px);
}

    .client-chat-text-box-right p {
        font-size: 12px;
        width: 100%;
        margin-bottom: 4px;
        color: #9e9e9e;
    }

        .client-chat-text-box-right p img {
            width: 100%;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .client-chat-text-box-right p span {
            font-size: 14px;
            line-height: 16px;
            color: #000;
            padding: 7px 15px 5px 8px;
            border-radius: 4px 30px 30px 4px;
            background: #f1f1f1;
            display: inline-block;
        }

.user-chat-text-box {
    text-align: right;
    display: flex;
    align-items: flex-start;
    vertical-align: middle;
}

.user-chat-text {
    width: 100%;
}

    .user-chat-text p {
        font-size: 10px;
        width: 100%;
        margin-bottom: 4px;
        color: #9e9e9e;
    }

        .user-chat-text p a {
            display: block;
        }

        .user-chat-text p img {
            width: 100%;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .user-chat-text p span {
            font-size: 12px;
            line-height: 14px;
            color: #fff;
            padding: 7px 8px 5px 15px;
            border-radius: 30px 4px 4px 30px;
            background: #000;
            display: inline-block;
        }

.chat-added-image {
    width: 100px;
    /*max-height: 50px;*/
    border: 1px solid #000;
    margin: 0 10px 4px 0;
    position: absolute;
    bottom: 0px;
    left: 10px;
}

    .chat-added-image:hover {
        box-shadow: 0 0 3px #00663b;
    }

    .chat-added-image img {
        width: 100%;
        height: auto;
    }

.chat-added-image-close {
    font-size: 15px;
    color: #000;
    position: absolute;
    top: -16px;
    right: -16px;
    background: none;
    border: 0;
    outline: none !important;
}

.chat-client-footer {
    padding: 4px 10px;
    display: flex;
    align-items: center;
    vertical-align: middle;
    border-top: 1px solid #ccc;
}

.add-chat-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 10px;
    outline: none !important;
}

.chat-field-box {
    width: calc(100% - 40px);
    position: relative;
}

    .chat-field-box textarea {
        border-radius: 30px;
        background: #f4f4f4;
        border: 1px solid #ccc;
        padding: 8px 35px 8px 10px;
        height: 67px;
    }

    .chat-field-box input {
        border-radius: 30px;
        background: #f4f4f4;
        border: 1px solid #ccc;
        padding: 8px 35px 8px 10px;
    }

    .chat-field-box textarea:focus {
        box-shadow: none !important;
        border: 1px solid #008d66;
    }

    .chat-field-box input:focus {
        box-shadow: none !important;
        border: 1px solid #008d66;
    }

    .chat-field-box .send-btn {
        font-size: 18px;
        background: none;
        border: 0;
        color: #e97f00;
        position: absolute;
        right: 8px;
        top: 20px;
        outline: none !important;
    }

.video-audio-frame {
    float: left;
    position: relative;
    /*left: 380px;*/
    height: calc(100% - 30px);
    width: calc(100vw - 795px);
    margin-right: 15px;
}

    .video-audio-frame.full-width {
        padding: 30px;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: 2;
        background: #fff;
    }

        .video-audio-frame.full-width > .video-audio-display {
            height: calc(100vh - 165px);
        }

            .video-audio-frame.full-width > .video-audio-display > video {
                width: 100%;
                height: inherit;
                margin: 0;
            }

.chat-list-hide .video-audio-frame {
    /*width: calc(100vw - 850px);*/
}

.video-audio-display {
    float: left;
    position: relative;
    width: 100%;
    border: 1px solid #aaa;
    border-radius: 20px;
    overflow: hidden;
    /*height: calc(100vh - 250px);*/
    height: calc(100vh - 230px);
    position: relative;
}

    .video-audio-display img {
        max-width: 100%;
        width: 100%;
        height: 100%;
    }

.call-connect-text {
    color: #FFF;
    position: absolute;
    width: 100%;
    padding: 8px 10px;
    transition: all 0.6s ease;
    background: #f7b500;
}

.call-time {
    position: absolute;
    bottom: 30px;
    z-index: 10;
    left: calc(50% - 35px);
    width: 60px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #f7b500;
    background: #f7b500;
    text-align: center;
    font-weight: 500;
}

.self-video {
    position: absolute;
    top: calc(50% - 40px);
    z-index: 10;
    right: 15px;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #FFFFFF;
}

    .self-video > video {
        margin: 0;
        width: 100%;
        height: auto;
    }

.video-audio-title {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #000000;
}

.video-audio-controls {
    float: left;
    width: 100%;
    border: 1px solid #444444;
    background: #444444;
    border-radius: 15px;
    text-align: center;
    padding: 10px;
    position: relative;
}

.video-audio-controls-group {
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-audio-controls .icon-btn {
    width: 40px;
    height: 40px;
    /*float:left;*/
    background: #FFF;
    padding: 10px;
    color: #000000;
    margin: 0 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s ease;
}

    .video-audio-controls .icon-btn:hover {
        background: #cacaca;
    }

    .video-audio-controls .icon-btn.call-btn {
        border-radius: 10px !important;
        background: #e02020;
        color: #FFF;
        width: 45px;
        height: 45px;
        padding: 9px 5px;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.4s ease;
    }

        .video-audio-controls .icon-btn.call-btn:hover {
            background: #b31a1a;
        }

.video-audio-controls .chat-collaps-trigger {
    position: absolute;
    left: 5px;
    width: 40px;
    height: 40px;
    background: #00663b;
    padding: 10px;
    color: #FFFFFF;
    margin: 0 10px;
    border-radius: 10px;
    top: 13px;
    box-shadow: 0 0 5px #000000;
    border: 1px solid #00663b;
    transition: all 0.4s ease;
    cursor: pointer;
}

    .video-audio-controls .chat-collaps-trigger:hover {
        background: #024e2e;
    }

.video-audio-controls .user-chat-collaps-trigger {
    position: absolute;
    right: 5px;
    width: 40px;
    height: 40px;
    background: #00663b;
    padding: 10px;
    color: #FFFFFF;
    margin: 0 10px;
    border-radius: 10px;
    top: 13px;
    box-shadow: 0 0 5px #000000;
    border: 1px solid #00663b;
    transition: all 0.4s ease;
    cursor: pointer;
}

    .video-audio-controls .user-chat-collaps-trigger:hover {
        background: #024e2e;
    }

.user-video {
    width: 100%;
    margin: 0;
    height: 100%;
    display: block;
}

/*----------bd chat --------------*/
.db-chat-form {
    float: left;
    position: relative;
    /*left: 15px;
    top: 15px;*/
    height: calc(100% - 30px);
    width: 320px;
    background: #fff;
    border: 1px solid #ccc;
    margin-right: 15px;
    /*transition: all 0.6s ease;*/
    overflow: hidden;
    opacity: 1;
}

.smis-chat-window.chat-zoom .db-chat-form {
    height: calc(100% - 0px);
}

.smis-chat-window.chat-list-hide .db-chat-form {
    width: 0px;
    opacity: 0;
}

.db-chat-form .chat-header {
    background: #00663b;
    padding: 4px 8px;
}

    .db-chat-form .chat-header .title {
        float: left;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .db-chat-form .chat-header .chat-close {
        float: right;
        color: #fff;
        font-size: 15px;
        background: none;
        border: 0;
        padding-top: 4px;
        outline: none !important;
    }

.db-chat-form .chat-bottom-header {
    border-bottom: 1px solid #999;
}

.chat-bottom-header.custom {
    display: flex;
    padding: 0 4px 5px 4px;
}

    .chat-bottom-header.custom input {
        /*margin: 0px 5px 0px 0px;*/
    }

.chat-bottom-header .filter-btn {
    margin-left: 4px;
}

.db-chat-form .custom-btn-checkbox .inputGroup label {
    font-size: 13px;
    margin: 0;
    padding: 2px 3px;
}

.db-chat-form .form-control {
    /*background: #d8d8d8;*/
    height: 31px;
    box-shadow: none !important;
    border-radius: 4px;
    outline: none !important;
    border-color: #999;
}

.chat-nav {
    width: 100%;
    padding: 4px;
    border-bottom: 1px solid #ccc;
}

    .chat-nav ul {
        padding: 0;
        margin: 0;
        float: left;
        width: calc(100% - 30px);
    }

    .chat-nav .chat-nav-right {
        float: right;
        width: 30px;
        text-align: right;
        position: relative;
    }

        .chat-nav .chat-nav-right .filter-pop {
            padding: 10px;
            right: 0;
            top: 27px;
            text-align: left;
            background: #f1f1f1;
            box-shadow: none;
            border-color: #999;
        }

    .chat-nav ul li {
        list-style-type: none;
        display: inline-block;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
        margin-right: 20px;
        cursor: pointer;
        padding: 5px 15px;
        text-align: center;
        transition: all 0.6s ease;
    }

        .chat-nav ul li:last-child {
            margin-right: 0;
        }

        .chat-nav ul li.active {
            color: #fff;
            background: #00663b;
        }

    .chat-nav .filter-pop-btn-group {
        width: 100%;
        text-align: center;
    }

.db-chat-form .chat-body {
    height: calc(100vh - 187px);
    overflow-y: auto;
    position: relative;
}

.more-loader-1 {
    position: absolute;
    top: 135px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    text-align: center;
    padding-top: 35%;
    background: rgb(0 0 0 / 30%);
}

    .more-loader-1 img {
        border-radius: 50%;
    }

.more-loader {
    width: 100%;
    padding: 2px 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #097340;
}

.smis-chat-window.chat-zoom .db-chat-form .chat-body {
    height: calc(100vh - 102px);
}

.chat-users {
    display: flex;
    padding: 4px 4px;
    vertical-align: middle;
    align-items: center;
    border-bottom: 1px solid #ccc;
}

    .chat-users .chat-users1 {
        /*width: 35px;
        height: 35px;
        background: #f1f1f1;
        border-radius: 50%;*/
        position: relative;
    }

        .chat-users .chat-users1 .chat-img-box {
            width: 35px;
            height: 35px;
            background: #f1f1f1;
            border-radius: 50%;
            overflow: hidden;
        }

        .chat-users .chat-users1 img {
            width: auto;
            max-width: 100%;
            height: 35px;
        }

    .chat-users .chat-users2 {
        width: calc(100% - 35px);
        padding: 0 0px 0 6px;
        position: relative;
    }

.chat-users2 .uder-name {
    font-size: 12px;
    font-weight: 600;
}

    .chat-users2 .uder-name label {
        float: left;
        width: calc(100% - 55px);
        margin: 0;
    }

    .chat-users2 .uder-name span {
        float: left;
        text-align: right;
        width: 55px;
        font-weight: normal;
        line-height: 11px;
        font-size: 10px;
    }

.chat-users2 .uder-about {
    font-size: 13px;
}

.new-msg {
    font-size: 13px;
    line-height: 13px;
    font-weight: 600;
    color: forestgreen;
}

.chat-filter-section {
    padding: 4px;
    display: flex;
}

    .chat-filter-section .inputGroup {
        margin: 0;
    }

    .chat-filter-section .custom-btn-checkbox {
        width: 100%;
    }

        .chat-filter-section .custom-btn-checkbox:last-child {
            margin-right: 0px !important;
        }
/*----------------- user chatting box End Here -------------------*/


/*----------------- DB Status Section ---------------*/
.db-status-section {
    float: left;
    width: 100%;
    padding: 15px 30px;
    background: #f6f6f6;
}

.db-status-box {
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: all 0.6s ease;
    align-items: flex-start;
    display: flex;
    margin-bottom: 15px;
}

    .db-status-box:hover {
        background: #f8f8f8;
    }

.db-status-content {
    color: #597169;
    width: 100%;
    padding: 6px 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .db-status-content .custom-profile .user-details {
        width: 172px;
    }

.W-MD {
    width: 120px;
}

.W-XL {
    width: 250px;
}

.W-XXL {
    width: 350px;
}

.cursor {
    cursor: pointer !important;
}

.db-status-content::after {
    content: "";
    position: absolute;
    background: #00663b;
    width: 100%;
    height: 4px;
    left: 0;
    bottom: 2px;
}

.db-status-content::before {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    background: #ccc;
    width: 1px;
    height: 50px;
}

.db-status-content.status-graph::after {
    content: none;
}

.db-status-content.status-graph {
    width: 100px;
    display: table;
}

    .db-status-content.status-graph img {
        width: 65px;
        height: auto;
    }

.db-status-content .vlue-text {
    width: 100%;
    padding: 10px 0;
    line-height: 15px;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.db-status-content .value {
    width: 100%;
    padding: 10px 0;
    line-height: 15px;
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 4px;
    min-height: 30px;
}

    .db-status-content .value span {
        font-size: 12px;
        color: #999;
        padding-left: 10px;
    }

.db-status-box .status-content:last-child {
    border-right: 0;
}

.db-status-box.custom .db-status-content::before {
    height: 50px !important;
}

.db-status-box.custom .db-status-content::after {
    content: none;
}

.no-border::before {
    content: none;
}

.padding-right-20 {
    padding-right: 20px !important;
}

.db-color-1 {
    color: #409741 !important;
}

.db-color-2 {
    color: #fca041 !important;
}

.db-color-3 {
    color: #006fff !important;
}

.db-color-4 {
    color: #a20051 !important;
}

.grid-btn1 {
    width: 27px;
    height: 27px;
    text-align: center;
    font-size: 12px;
    line-height: 29px;
    border-radius: 50%;
    margin-right: 10px;
    border: 0;
    color: #fff;
    background: #009c4c;
    outline: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .grid-btn1:hover {
        box-shadow: 0 0 3px #333;
    }

.grid-btn2 {
    font-size: 12px;
    color: #fff;
    padding: 3px 10px 1px 10px;
    border-radius: 4px;
    border: 0;
    background: #009c4c;
    outline: none !important;
    transition: all 0.3s ease;
    margin-right: 4px;
    cursor: pointer;
}

    .grid-btn2:hover {
        box-shadow: 0 0 3px #333;
    }

    .grid-btn2 i {
        /*margin-right: 4px;*/
    }


/*--------------- student-profile ------------------*/
.student-profile {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f1f1f1;
    z-index: 11;
}

.popup-btn-section {
    padding: 10px;
    background: #f87900;
    min-height: 43px;
}

.popup-btn-section-left {
    float: left;
}

.popup-btn-section-right {
    float: right;
    text-align: right;
}

.primay-btn {
    font-size: 14px;
    color: #fff;
    background: none;
    border: 0;
    outline: none !important;
    transition: all 0.6s ease;
}

.primay-btn-1 {
    font-size: 14px;
    color: #00663b;
    padding: 2px 10px;
    background: #FFF;
    border: 1px solid #00663b;
    transition: all 0.6s ease;
    outline: none !important;
}

    .primay-btn-1:hover, .primay-btn-1.active {
        color: #fff;
        background: #00663b;
    }

.primay-btn-2 {
    font-size: 14px;
    color: #fff;
    padding: 2px 15px;
    background: #f87900;
    border: 1px solid #f87900;
    transition: all 0.6s ease;
    outline: none !important;
}

    .primay-btn-2:hover, .primay-btn-2.active {
        color: #fff;
        background: #00663b;
        border: 1px solid #00663b;
    }

.primay-btn-3 {
    font-size: 14px;
    color: #fff;
    padding: 2px 15px;
    border: 0;
    border-radius: 0 0 6px 6px;
    outline: none !important;
    cursor: pointer;
    transition: all 0.6s ease;
}

    .primay-btn-3:hover {
        box-shadow: 0 2px 8px #999;
    }

.bashboard-container {
}

    .bashboard-container .student-profile-left {
        width: 100%;
        transition: all 0.6s ease-in-out;
    }

    .bashboard-container .student-profile-right {
        position: absolute;
        top: 0;
        right: -350px;
        transition: all 0.6s ease-in-out;
    }

    .bashboard-container.active .student-profile-left {
        float: left;
        width: calc(100% - 350px);
    }

    .bashboard-container.active .student-profile-right {
        float: right;
        width: 350px;
        right: 0;
    }


.student-profile-left-body {
    padding: 15px;
    /*height: calc(100vh - 173px);*/
    height: calc(100vh - 113px);
    overflow-y: auto;
}

.student-profile-header {
    margin-bottom: 15px;
}

.student-profile-header-left {
    float: left;
}

    .student-profile-header-left span {
        font-size: 20px;
        font-weight: 500;
        color: #00663b;
        margin-left: 15px;
    }

.student-profile-header-right {
    float: right;
}

.form-block {
    float: left;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 260px;
}

.student-profile-right .chat-client {
    top: 43px;
}

.student-profile-right .chat-client-body {
    height: calc(100vh - 223px);
}

.db-status-box.custom .db-status-content::before {
    height: 50px !important;
}

.db-status-box.custom .db-status-content::after {
    content: none;
}

.custom-profile {
    display: flex;
    align-items: center;
    vertical-align: middle;
    text-align: left;
    padding: 1px 0;
}

.user-details {
    text-align: left;
}

    .user-details label {
        font-size: 14px;
        font-weight: 500;
        color: #006936;
        margin-bottom: 0px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-details p {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        margin-bottom: 0;
        height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.popup-form-btn {
    width: 100%;
    text-align: right;
    background: #d8d8d8;
    padding: 10px 15px;
}

.title-1 {
    color: #00663b;
    text-align: left;
}

.title-2 {
    font-size: 20px;
    color: #00663b;
    font-weight: 500;
    text-align: left;
    margin: 0 15px 0 15px;
}

.user-details {
    text-align: left;
}

    .user-details label {
        font-size: 14px;
        font-weight: 500;
        color: #006936;
        margin-bottom: 0px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-details p {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.id-section {
}

    .id-section > label {
        text-align: left;
        font-size: 15px;
        font-weight: 500;
        color: #00663b;
        width: 100%;
    }

.ids {
    float: left;
    text-align: center;
    width: 80px;
    margin: 0 10px 5px 0;
}

.ids-1 {
    float: left;
    text-align: center;
    /*max-width: 80px;*/
    margin: 0 10px 4px 0;
}

.id-box {
    width: 80px;
    height: 80px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
}

    .id-box img {
        width: auto;
        max-width: 100%;
        max-height: 80px;
    }

.id-section h6 {
    font-size: 12px;
}

.id-box-image {
    width: 80px;
    height: 80px;
    border: 1px solid #999;
    background: #fff;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
}

    .id-box-image img {
        width: auto;
        max-width: 100%;
        max-height: 80px;
    }

.id-box-image-popup {
    width: 300px !important;
    height: 300px !important;
}

    .id-box-image-popup img {
        max-height: 100% !important;
    }

.show-image {
    z-index: 99999;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

    .show-image .overlay {
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.66);
        position: absolute;
        top: 0;
        left: 0;
    }

    .show-image .img-show {
        max-width: 600px;
        max-height: 100vh;
        background: #FFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        overflow: hidden;
    }

.img-show span {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 99;
    cursor: pointer;
    background: #FFF;
    padding: 4px 10px;
    color: #ff0000;
    font-weight: 700;
}

.img-show img {
    max-width: 100%;
    max-height: 100vh;
    /* position: absolute; */
    top: 0;
    left: 0;
}

.k-grid td.k-state-selected:hover, .k-grid tr.k-state-selected {
    background: #b7e4f8 !important;
}

    .k-grid td.k-state-selected:hover, .k-grid tr.k-state-selected:hover td {
        background: #a9d3e5 !important;
    }

.alert-warning {
    padding: 4px 8px;
    margin-bottom: 10px;
}

.seats-section {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

    .seats-section table {
        width: 100%;
        border-collapse: collapse;
    }

        .seats-section table th {
            text-align: center;
            padding: 10px;
        }

            .seats-section table th:first-child {
                font-weight: 600;
                text-align: left;
            }

        .seats-section table td {
            text-align: center;
            padding: 10px;
        }

            .seats-section table td:first-child {
                font-weight: 600;
                text-align: left;
            }

    .seats-section .graduation-seats {
        width: 15px;
        margin: 0 auto;
    }



/*CSAT DashBoard*/
.db-controls-group {
    width: 100%;
    padding: 10px 0px;
}

    .db-controls-group ul {
        padding: 0;
        margin: 0;
        float: left;
    }

    .db-controls-group > ul > li {
        float: left;
        width: 12%;
        display: inline-block;
        list-style-type: none;
        padding-right: 10px;
    }

        .db-controls-group > ul > li:last-child {
            padding-right: 0;
            width: 20%;
            white-space: nowrap;
        }

    .db-controls-group .form-control {
        height: 30px;
        border: 1px solid #979797;
        border-radius: 30px;
    }

    .db-controls-group .input-group input {
        height: inherit !important;
    }

    .db-controls-group .input-group .form-control {
        border-right: 0;
        background: #fff;
    }

    .db-controls-group .input-group span button.btn.btn-default {
        height: 30px;
        border: 1px solid #979797;
        border-left: 0;
        border-radius: 0 30px 30px 0;
    }

.db-filter-btn {
    font-size: 13px;
    padding: 4px 15px;
    border: 1px solid #097340;
    color: #fff;
    background: #0a854a;
    border-radius: 30px;
    cursor: pointer;
    outline: none !important;
    transition: all 0.6s ease;
    margin: 2px;
}

    .db-filter-btn:hover {
        background: #076136;
    }

.db-reset-btn {
    font-size: 13px;
    padding: 4px 15px;
    border: 1px solid #000;
    color: #fff;
    background: #000;
    border-radius: 30px;
    cursor: pointer;
    outline: none !important;
    transition: all 0.6s ease;
    margin: 2px;
}

    .db-reset-btn:hover {
        background: #076136;
    }

.db-list-group {
    width: 100%;
}

    .db-list-group ul {
        padding: 0;
        margin: 0;
        float: left;
    }

        .db-list-group ul li {
            float: left;
            display: inline-block;
            list-style-type: none;
            width: 20%;
            padding-right: 15px;
        }

            .db-list-group ul li:last-child {
                padding-right: 0;
            }

.dash-status-box {
    width: 100%;
    padding: 8px 4px;
    text-align: center;
    font-size: 14px;
    line-height: 17px;
    color: #000;
    border-radius: 5px;
    min-height: 78px;
}

.dash-staus-value {
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    margin-bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-staus-text {
    font-size: 13px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dash-status-box.one {
    background: #fee2cd;
}

.dash-status-box.two {
    background: #cfe0fe;
}

.dash-status-box.three {
    background: #d1d7fb;
}

.dash-status-box.four {
    background: #fad8d9;
}

.dash-status-box.five {
    background: #bbeedf;
}

.dashboard-box.auto-height {
    height: auto;
}

.custom-internal-bashboard .dashboard-box {
    color: #000;
    background: #fff;
    border: 1px solid #ccc;
}

.input-group > .form-control {
    height: 38px;
}

.input-group > span > .btn-default {
    height: 38px;
}
/*---id card ----*/

.id-card-block {
    width: 350px;
    margin: 0 auto;
}

.id-card {
    float: left;
    width: 340px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 16px;
    word-wrap: break-word;
    box-sizing: border-box;
    border: 1px solid #ccc;
    overflow: hidden;
    box-shadow: 0 0 2px #ccc;
}

.id-card-header {
    padding: 10px;
    background: #fff;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
}

.id-clear-fix {
    clear: both;
    display: block;
}

.title {
    float: left;
    text-align: left;
    color: #d9171e;
    width: calc(100% - 80px);
}

.logo {
    float: right;
    width: 80px;
    text-align: right;
    font-size: 12px;
}

    .logo img {
        height: 50px;
        width: auto;
        max-width: 100%;
    }

.id-card-body {
    padding: 10px;
    background: #f2f2f2;
}

.id-content {
    width: 100%;
}

.id-content-left {
    float: left;
    width: 55%;
    box-sizing: border-box;
}

.id-contect-left-inner {
    width: 100%;
    height: 158px;
    box-sizing: border-box;
}

.id-content-right {
    float: right;
    width: 45%;
    padding-left: 10px;
    text-align: center;
    box-sizing: border-box;
}

.id-label {
    font-weight: 600;
    margin-bottom: 2px;
}

.id-label-dynamic {
    margin-bottom: 5px;
}

.id-profile {
    width: 100px;
    height: 120px;
    margin: 0 auto;
    margin-bottom: 8px;
    overflow: hidden;
}

    .id-profile img {
        width: 100px;
        height: 120px;
    }

.role {
    width: 100%;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #000;
    background: #fff;
    padding: 3px 3px;
    overflow: hidden;
    margin-bottom: 8px;
    text-transform: uppercase;
    box-sizing: border-box;
    font-size: 14px;
}

.id-signature {
    width: 100%;
    overflow: hidden;
    background: #fff;
    height: 50px;
    box-sizing: border-box;
}

    .id-signature img {
        width: auto;
        max-width: 100%;
        height: 50px;
        margin: 0 auto;
    }

.duration {
    width: 100%;
    height: 50px;
    background: #fff;
    padding: 6px 3px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

    .duration .title {
        width: 100%;
        color: #d9171e;
        text-align: center;
        margin-bottom: 5px;
        text-transform: uppercase;
    }

.duration-time {
    font-size: 11px;
    line-height: 14px;
    font-weight: 400;
}

.id-card-footer {
    width: 100%;
    padding: 0 10px;
    color: #d9171e;
    font-weight: 400;
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.date {
    padding: 3px;
    float: left;
    transform: rotate(-90deg);
}

.bar-code {
    width: 120px;
    height: 118px;
    float: left;
}

    .bar-code img {
        width: 100%;
    }

.bar-code-time {
    width: 100px;
    height: 118px;
    position: relative;
    padding: 3px;
}

.time {
    padding: 3px;
    float: left;
    transform: rotate(-90deg);
    width: 118px;
    height: 25px;
    position: absolute;
    left: -60px;
    bottom: 40%;
    text-align: center;
}

.bar-code-date {
    width: 100px;
    height: 118px;
    position: relative;
    text-align: right;
}

.date {
    width: 100px;
    height: 25px;
    position: absolute;
    left: 52px;
    bottom: 40%;
    text-align: center;
}

.pbi-reports-iframe {
    width: 100%;
    height: 100%;
}

.logoBar, pbi-status-bar {
    display: none;
}

.page-title-controls-box {
    float: right;
    font-size: 16px;
    line-height: 18px;
    padding: 3px 0 0 0;
    background: none;
    position: relative;
}

.page-title-controls-icon {
    font-size: 20px;
    line-height: 26px;
    float: right;
    width: 20px;
    height: 20px;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.6s ease;
    display: none;
}

    .page-title-controls-icon:hover {
        opacity: 0.7;
    }

.page-title-controls {
    float: right;
    display: flex;
    padding-right: 15px;
}

    .page-title-controls .form-control {
        float: left;
        font-size: 12px;
        max-width: 170px;
        height: 24px;
        margin-left: 10px;
        border-radius: 20px;
        border-color: #000000;
    }

        .page-title-controls .form-control:focus {
            box-shadow: none;
        }

.page-title-label .dash-type-filter {
    padding: 0 0 0 0;
    margin: 0 10px 0 0;
}

.page-title .dash-type-filter {
    padding-top: 5px;
}

    .page-title .dash-type-filter label {
        margin-bottom: 0 !important;
    }


.dashboard-container.db-custom-1 {
    padding: 0;
    overflow-y: inherit;
}

    .dashboard-container.db-custom-1 .dashboard-style-2 {
        width: 100%;
        position: inherit;
        height: calc(100vh - 111px);
    }



.uib-button-bar .uib-datepicker-current:hover {
    opacity: 0.7;
    border: inherit;
}





.pdf-data-table {
    width: 100%;
}

    .pdf-data-table table {
        width: 100%;
        font-size: 14px;
        line-height: 16px;
        text-align: left;
        border-collapse: collapse;
        word-wrap: break-word;
    }

    .pdf-data-table th {
        color: #fff;
        background: #535353;
        padding: 10px 5px;
        border: 1px solid #898989;
    }

    .pdf-data-table td {
        padding: 10px 5px;
        border: 1px solid #ccc;
        vertical-align: top !important;
    }

.table-no-border {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    page-break-inside: avoid;
    text-align: left;
    margin-bottom: 20px;
    word-wrap: break-word;
}

    .table-no-border th {
        vertical-align: top;
        border: 0;
        padding: 10px 5px;
    }

    .table-no-border td {
        vertical-align: top;
        border: 0;
        padding: 10px 5px;
    }

    .table-no-border p {
        margin: 0;
    }

    .table-no-border lable {
        margin: 0;
        display: block;
    }

.pdf-profile {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 22px;
    line-height: 28px;
    font-weight: bold;
}

.pdf-profile-logo {
    width: 100px;
    overflow: hidden;
    margin-right: 100px;
}

    .pdf-profile-logo img {
        width: 100%;
    }

.pdf-profile-title {
    color: #da2128;
}

.bold {
    font-weight: bold !important;
}

.width-25-percent tr td {
    width: 25% !important;
}

.width-33-percent tr th, .width-33-percent tr td {
    width: 33.334% !important;
}

.table-layout-fixed {
    table-layout: fixed !important;
}

.table-overflow {
    max-width: 100%;
    overflow: auto;
}

.colon {
    position: relative;
}

    .colon::after {
        content: ":";
        position: absolute;
        right: -18px;
        top: 0px;
        font-size: 25px;
        color: #000;
        font-weight: 600;
    }

.modal.fade.form-popup.show + .modal.fade.form-popup.show {
    z-index: 1042 !important;
    background: rgb(0 0 0 / 50%);
}

.modal.fade.form-popup.show + div + .modal.fade.form-popup.show {
    z-index: 1042 !important;
    background: rgb(0 0 0 / 50%);
}


.modal.fade.form-popup.show + .modal.fade.form-popup.show + .modal.fade.bd-example-modal-lg {
    z-index: 99999 !important;
}



.custom-table-1 tr th,
.custom-table-1 tr td {
    padding: 8px 10px !important;
}

.custom-table-1 .dataTables_length label {
    margin: 5px 5px 5px 10px !important;
}

.custom-table-1 .dataTables_length select {
    outline: none !important;
    height: 30px;
    width: 50px;
    padding: 2px;
    margin: 0 5px 0 5px;
}

.custom-table-1 .dataTables_filter label {
    margin: 5px 10px 5px 5px !important;
}

    .custom-table-1 .dataTables_filter label input {
        outline: none !important;
        height: 30px;
        width: 150px;
        padding: 2px 6px;
    }

        .custom-table-1 .dataTables_filter label input:focus {
            border-color: #ccc;
        }

.custom-table-1 .dataTables_info {
    float: right;
    padding: 10px 10px 10px 5px;
    cursor: default;
}

.custom-table-1 .paging_full_numbers {
    float: left;
    padding: 7px 5px 0 0;
}

.custom-table-1 .paginate_button {
    padding: 2px 10px !important;
}

.custom-table-1 .btn.btn-2 {
    padding: 0px 10px 1px 10px;
    border-radius: 4px;
    color: #0ec50e;
    outline: none !important;
    background: #fff;
    font-weight: 600;
    border: 1px solid #0ec50e;
    box-shadow: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .custom-table-1 .btn.btn-2:hover {
        color: #fff;
        background: #0ec50e;
    }
/*-------------- Popup Form ----------------*/
.popup-form {
    width: 60%;
    background: #fff;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    box-shadow: 0 0 8px #333;
    z-index: 999;
}

    .popup-form.full-width {
        width: 100% !important;
    }

.popup-header {
    float: left;
    width: 100%;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
}

.popup-header-left {
    float: left;
    width: calc(100% - 20px);
}

.popup-header-right {
    float: right;
    width: 20px;
    text-align: right;
}

.popup-header .title {
    width: 100%;
    font-size: 20px;
    color: #00663b;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 auto;
    padding: 3px 0 0 0;
}

.pop-close-btn {
    font-size: 20px;
    color: #00663b;
    padding: 0;
    outline: none !important;
    background: none;
    border: none;
}

.popup-body {
    width: 100%;
    padding: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 215px);
}

.static-label {
    font-weight: 600;
}

.dynamic-label {
    display: block;
}

.title-1 {
    color: #00663b;
    text-align: left;
}

.title-2 {
    font-size: 20px;
    color: #00663b;
    font-weight: 500;
    text-align: left;
    margin: 0 15px 0 15px;
}

.popup-footer {
    padding: 10px 20px;
    background: #00663b;
    text-align: right;
}

    .popup-footer button {
        margin-left: 10px;
    }

    .popup-footer .popup-btn {
        font-size: 17px;
        color: #fff;
        border: 1px solid #00663b;
        background: 0;
        outline: none !important;
        text-transform: uppercase;
        transition: all 0.6s ease;
        letter-spacing: 0.5px;
    }

        .popup-footer .popup-btn:hover {
            border: 1px solid #fff;
        }

.modal-content.popup-form {
    border: none;
}

/*  Academic Calendar filters style*/
.pop-filter-form {
    float: right;
    width: 100%;
    position: relative;
    z-index: 11;
}

.filters-toggle-btn {
    float: right;
    white-space: nowrap;
    background: #209b60;
    padding: 7px 20px;
    white-space: nowrap;
    color: #FFF;
    cursor: pointer;
}

.filter-reset {
    background: #ff0000;
    margin-right: 15px;
}

.pop-filters {
    width: 70%;
    min-width: 800px;
    position: absolute;
    top: 35px;
    right: 0px;
    background: #f1f1f1;
    -webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.75);
    padding: 15px;
    display: none;
    border: 4px solid #209b60;
}

    .pop-filters.active {
        display: block;
    }

.process-flow {
    float: left;
    width: 100%;
}

    .process-flow ul {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
    }

        .process-flow ul li {
            margin: 0;
            padding: 0 30px;
            display: inline-block;
            position: relative;
            z-index: 1;
        }

            .process-flow ul li:nth-child(1) {
                z-index: 10;
            }

            .process-flow ul li:nth-child(2) {
                z-index: 9;
            }

            .process-flow ul li:nth-child(3) {
                z-index: 8;
            }

            .process-flow ul li:nth-child(4) {
                z-index: 7;
            }

            .process-flow ul li:nth-child(5) {
                z-index: 6;
            }

            .process-flow ul li:nth-child(6) {
                z-index: 5;
            }

            .process-flow ul li:nth-child(7) {
                z-index: 4;
            }

.proc-step-box {
    float: left;
    width: 100%;
    border: 5px solid #5d8098;
    padding: 20px 30px;
    border-radius: 20px;
    position: relative;
    z-index: 3;
    min-height: 200px;
}

.process-flow ul li:nth-child(1) .proc-step-box {
    border: 5px solid #ff8c3a;
}

.process-flow ul li:nth-child(2) .proc-step-box {
    border: 5px solid #efe93a;
}

.process-flow ul li:nth-child(3) .proc-step-box {
    border: 5px solid #2fc2bb;
}

.process-flow ul li:nth-child(4) .proc-step-box {
    border: 5px solid #179df6;
}

.process-flow ul li:nth-child(5) .proc-step-box {
    border: 5px solid #0069af;
}

.process-flow ul li:nth-child(6) .proc-step-box {
    border: 5px solid #316080;
}

.process-flow ul li:nth-child(7) .proc-step-box {
    border: 5px solid #5d8098;
}

.proc-step-count {
    position: absolute;
    font-size: 80px;
    background-color: #FFF;
    left: -35px;
    width: 60px;
    top: calc(50% - 70px);
    height: 140px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .proc-step-count::before,
    .proc-step-count::after {
        position: absolute;
        content: "";
        left: 40%;
        color: #5d8098;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        border: 5px solid #5d8098;
    }

    .proc-step-count::before {
        top: 0;
    }

    .proc-step-count::after {
        bottom: 0;
    }

.process-flow ul li:nth-child(1) .proc-step-box {
    color: #ff8c3a;
}

.process-flow ul li:nth-child(2) .proc-step-box {
    color: #efe93a;
}

.process-flow ul li:nth-child(3) .proc-step-box {
    color: #2fc2bb;
}

.process-flow ul li:nth-child(4) .proc-step-box {
    color: #179df6;
}

.process-flow ul li:nth-child(5) .proc-step-box {
    color: #0069af;
}

.process-flow ul li:nth-child(6) .proc-step-box {
    color: #316080;
}

.process-flow ul li:nth-child(7) .proc-step-box {
    color: #5d8098;
}


.process-flow ul li:nth-child(1) .proc-step-box .proc-step-count::before,
.process-flow ul li:nth-child(1) .proc-step-box .proc-step-count::after {
    border: 5px solid #ff8c3a;
}

.process-flow ul li:nth-child(2) .proc-step-box .proc-step-count::before,
.process-flow ul li:nth-child(2) .proc-step-box .proc-step-count::after {
    border: 5px solid #efe93a;
}

.process-flow ul li:nth-child(3) .proc-step-box .proc-step-count::before,
.process-flow ul li:nth-child(3) .proc-step-box .proc-step-count::after {
    border: 5px solid #2fc2bb;
}

.process-flow ul li:nth-child(4) .proc-step-box .proc-step-count::before,
.process-flow ul li:nth-child(4) .proc-step-box .proc-step-count::after {
    border: 5px solid #179df6;
}

.process-flow ul li:nth-child(5) .proc-step-box .proc-step-count::before,
.process-flow ul li:nth-child(5) .proc-step-box .proc-step-count::after {
    border: 5px solid #0069af;
}

.process-flow ul li:nth-child(6) .proc-step-box .proc-step-count::before,
.process-flow ul li:nth-child(6) .proc-step-box .proc-step-count::after {
    border: 5px solid #316080;
}

.process-flow ul li:nth-child(7) .proc-step-box .proc-step-count::before,
.process-flow ul li:nth-child(7) .proc-step-box .proc-step-count::after {
    border: 5px solid #5d8098;
}

.proc-step-info {
    text-align: center;
}

.proc-step-icon {
    font-size: 40px;
}

.proc-step-text {
}

    .proc-step-text h4,
    .proc-step-text p {
        margin: 0;
    }

.proc-step-arrow {
    position: absolute;
    right: -65px;
    width: 50px;
    top: calc(50% - 25px);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.process-flow ul li:last-child .proc-step-box .proc-step-arrow {
    display: none;
}

.proc-step-arrow::before {
    position: absolute;
    content: "";
    left: -15px;
    width: 16px;
    height: 29px;
    border: 5px solid #5d8098;
    border-left-color: #FFF;
    border-right: 0px;
    top: 9px;
}

.process-flow ul li:nth-child(1) .proc-step-arrow::before {
    border-top: 5px solid #ff8c3a;
    border-bottom: 5px solid #ff8c3a;
}

.process-flow ul li:nth-child(2) .proc-step-arrow::before {
    border-top: 5px solid #efe93a;
    border-bottom: 5px solid #efe93a;
}

.process-flow ul li:nth-child(3) .proc-step-arrow::before {
    border-top: 5px solid #2fc2bb;
    border-bottom: 5px solid #2fc2bb;
}

.process-flow ul li:nth-child(4) .proc-step-arrow::before {
    border-top: 5px solid #179df6;
    border-bottom: 5px solid #179df6;
}

.process-flow ul li:nth-child(5) .proc-step-arrow::before {
    border-top: 5px solid #0069af;
    border-bottom: 5px solid #0069af;
}

.process-flow ul li:nth-child(6) .proc-step-arrow::before {
    border-top: 5px solid #316080;
    border-bottom: 5px solid #316080;
}

.process-flow ul li:nth-child(7) .proc-step-arrow::before {
    border-top: 5px solid #5d8098;
    border-bottom: 5px solid #5d8098;
}

.proc-step-count::before {
    top: 0;
}

.proc-step-count::after {
    bottom: 0;
}

.proc-step-arrow .st0 {
    fill: #5d8098;
}

.process-flow ul li:nth-child(1) .proc-step-arrow .st0 {
    fill: #ff8c3a;
}

.process-flow ul li:nth-child(2) .proc-step-arrow .st0 {
    fill: #efe93a;
}

.process-flow ul li:nth-child(3) .proc-step-arrow .st0 {
    fill: #2fc2bb;
}

.process-flow ul li:nth-child(4) .proc-step-arrow .st0 {
    fill: #179df6;
}

.process-flow ul li:nth-child(5) .proc-step-arrow .st0 {
    fill: #0069af;
}

.process-flow ul li:nth-child(6) .proc-step-arrow .st0 {
    fill: #316080;
}

.process-flow ul li:nth-child(7) .proc-step-arrow .st0 {
    color: #5d8098;
}

.calculating-loader {
    width: 100px;
    height: 50px;
}

    .calculating-loader img {
        width: 100%;
        height: 100%;
    }


.custom-loader {
    width: 150px;
    height: 20px;
    background-color: #ccc;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.custom-loader-text {
    position: absolute;
    width: 100%;
    height: 20px;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.5px;
}

.bar {
    height: 100%;
    background-color: #07c907;
    width: 0;
    animation: fillBar 2s infinite ease-in-out;
}

@keyframes fillBar {
    0% {
        width: 0;
        border-radius: 15px;
    }

    50% {
        width: 60%;
        border-radius: 10px;
    }

    100% {
        width: 100%;
    }
}


/*.attribute{
    position: absolute;
    bottom: 10px;
}*/
.activity-block-container {
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.activity-block {
    width: 100%;
}

    .activity-block ul {
        width: 100%;
    }

        .activity-block ul li {
            list-style-type: none;
            background: #fff;
        }

.activity-info {
    display: inline-block;
    padding: 0 0 0 10px;
    border: 1px solid #bbb6b6;
    background: #fff;
    border-radius: 4px;
    /*margin-bottom: 20px;*/
    background: #f9f9f9;
}
/*.activity-block ul li:last-child .activity-info{
   border-bottom: 1px solid #e9e9e9;
}*/
.activity-info-left {
    /*width: 100%;*/
    min-width: 230px;
    padding: 5px 0px;
    display: inline-block;
}

.activity-info-right {
    /*width: 450px;*/
    flex-shrink: 0;
    padding: 5px 10px;
    /*background: #cce3cc;*/
    display: inline-block;
}
/*.activity-block-parent{
    padding: 0;
    margin: 0;
}*/
.activity-block ul {
    padding: 25px 0 25px 77px;
    margin: 0 0 0 50px;
    /*position:relative;*/
}
    /*.activity-block ul li:last-child::after{
    border-color: red;
}*/
    /*.activity-block ul::before{
       content: '';
    position: absolute;
    left: -80px;
    top: 20px;
    width: 80px;
    height: 100%;
    border-left: 3px solid red;
}*/
    .activity-block ul li {
        position: relative;
    }

.activity-block-parent li::before {
    content: '';
    position: absolute;
    left: -80px;
    top: 20px;
    width: 80px;
    height: 2px;
    border-bottom: 2px solid #2b6143;
}

.activity-block-parent li::after {
    content: '';
    position: absolute;
    left: -80px;
    top: -100%;
    width: 2px;
    height: 100%;
    border-left: 2px solid #2a6042;
}

.activity-block-child-1 {
    padding: 0 0 0 50px;
    margin: 10px 0;
}

.activity-block-parent > li:last-child::after {
    content: none;
}

.activity-block-parent > li::after {
    /*height: calc(100% + 115%);
    top: inherit;
    bottom: -42%;*/
    height: calc(100% + 99%);
    top: inherit;
    bottom: -34%;
}


.activity-block-child-2 {
    /*padding: 0 0 0 50px;
    margin: 10px 0;*/
}

.activity-block-child-1 li::after {
    top: -90% !important;
}

.activity-block-child-2 li::after {
    top: -66% !important;
}

/*.activity-block-parent > li:nth-child(even) > .activity-info{
    background: #f9f9f9;
}
.activity-block-child-1 > li:nth-child(even) > .activity-info{
    background: #f9f9f9;
}
.activity-block-child-2 > li:nth-child(even) > .activity-info{
    background: #f9f9f9;
}*/
.activity-block-title {
    color: #fff;
    padding: 8px 30px;
    /*margin-bottom: 15px;*/
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.5px;
    display: inline-block;
    border-radius: 5px;
    background: linear-gradient(to bottom, #209b60, #2b6344);
    position: relative;
    z-index: 11;
}

.radio-group {
    display: flex;
    align-items: center;
}

.radio-btn-1 {
    margin: 0 10px 0 0;
}

.radio-btn-1-input {
    display: none;
}

.radio-btn-1-label {
    display: inline-block;
    padding: 5px 15px;
    cursor: pointer;
    color: #292929;
    border-radius: 5px;
    background: #f9f9f9;
    letter-spacing: 0.5px;
    border: 1px solid #dfdfdf;
    margin: 0;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
    transition: 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .radio-btn-1-label:hover {
        background: #d6d6d6;
        color: #101010;
    }

    .radio-btn-1-label:active {
        transform: translateY(2px);
    }

#yes-button:checked + .radio-btn-1-label {
    background: #2ecc71;
    color: #efefef;
    border-color: #2ecc71;
}

    #yes-button:checked + .radio-btn-1-label:hover {
        background: #29b765;
        color: #e2e2e2;
        border-color: #29b765;
    }

#no-button:checked + .radio-btn-1-label {
    background: #d91e18;
    color: #efefef;
    border-color: #d91e18;
}

    #no-button:checked + .radio-btn-1-label:hover {
        background: #c21b15;
        color: #e2e2e2;
        border-color: #c21b15;
    }

#maybe-button:checked + .radio-btn-1-label {
    background: #4183d7;
    color: #efefef;
    border-color: #4183d7;
}

    #maybe-button:checked + .radio-btn-1-label:hover {
        background: #2c75d2;
        color: #e2e2e2;
        border-color: #4183d7;
    }

/*------------------ Vertica Tree ------------------*/

.vertical-tree {
    padding-top: 40px;
    padding-bottom: 40px;
}

    .vertical-tree ul {
        padding-left: 30px;
    }

    .vertical-tree li {
        margin: 0px 0;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0px 5px;
    }

        .vertical-tree li:empty {
            display: none !important;
        }

            .vertical-tree li:empty::before,
            .vertical-tree li:empty::after {
                content: none !important;
            }

        .vertical-tree li::before {
            content: '';
            position: absolute;
            top: 0;
            width: 1px;
            height: 100%;
            right: auto;
            left: -20px;
            border-left: 2px solid #ccc;
            bottom: 50px;
        }

        .vertical-tree li::after {
            content: '';
            position: absolute;
            top: 42px;
            width: 25px;
            height: 20px;
            right: auto;
            left: -20px;
            border-top: 2px solid #ccc;
        }

        .vertical-tree li a {
            display: inline-block;
            padding: 8px 30px;
            text-decoration: none;
            background-color: #e1eafc;
            color: #5a8dee;
            border: 1px solid #e1eafc;
            font-size: 13px;
            border-radius: 4px;
        }

    .vertical-tree > ul > li::before,
    .vertical-tree > ul > li::after {
        border: 0;
    }

    .vertical-tree li:last-child::before {
        height: 43px;
    }

    .vertical-tree li a:hover,
    .vertical-tree li a:hover + ul li a {
        background-color: #5a8dee;
        color: #fff;
        border: 1px solid #5a8dee;
    }

        .vertical-tree li a:hover + ul li::after,
        .vertical-tree li a:hover + ul li::before,
        .vertical-tree li a:hover + ul::before,
        .vertical-tree li a:hover + ul ul::before {
            border-color: #fbba00;
        }

.multi-colum-list {
    display: list-item;
    column-count: 3;
    list-style: none;
}


@media only screen and (max-width: 576px) {
    .mis-calendar td {
        padding: 5px !important;
        overflow: hidden !important;
        font-size: 12px !important;
    }

    .mis-calendar .day {
        min-height: 20px !important;
        border-radius: 2px !important;
        padding: 3px !important;
    }

    .day-num {
        text-align: center !important;
    }

    .header-today {
        position: relative !important;
        width: 100%;
        display: block;
    }

    .mis-calendar .calendar-header .month {
        font-size: 14px !important;
    }

        .mis-calendar .calendar-header .month .year {
            font-size: 14px !important;
        }

    .kendo-grid-search .form-control {
        height: 28px;
        width: 80%;
    }

    .k-button.k-grid-excel, .k-button.k-grid-pdf {
        border-radius: 2px;
        padding: 5px 5px;
        text-align: left !important;
        font-size: 12px;
        width: 22px;
        overflow: hidden;
        display: inline-block;
    }

    .dash-tab-nav ul li span {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
}



/*    Custom Display Page    */
/*    Custom Status Boxes    */
.status-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.status-card {
    border-radius: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .status-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .status-card h2 {
        font-size: 1.1rem;
        color: #fff;
        margin-bottom: 10px;
    }

    .status-card p {
        font-size: 2rem;
        color: #fff;
        font-weight: 600;
        margin: 0;
    }

    /* Soft pastel gradients */
    .status-card:nth-child(1) {
        background: linear-gradient(135deg, #2582fc, #71c6ff);
    }

    .status-card:nth-child(2) {
        background: linear-gradient(135deg, #31cb51, #4cea6d);
    }

    .status-card:nth-child(3) {
        background: linear-gradient(135deg, #c74eff, #ff76c4);
    }

    .status-card:nth-child(4) {
        background: linear-gradient(135deg, #ffe875, #a28a2c);
    }

    .status-card:nth-child(5) {
        background: linear-gradient(135deg, #8728f8, #a75dff);
    }

    .status-card:nth-child(6) {
        background: linear-gradient(135deg, #ff2a73, #ff508c);
    }
/*    Custom Status Boxes  End  */


.custom-data-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    background: #FFF;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

    .custom-data-filters input,
    .custom-data-filters select {
        padding: 10px 14px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #fff;
        font-size: 0.95rem;
        width: 200px;
        transition: border-color 0.2s;
    }

        .custom-data-filters input:focus,
        .custom-data-filters select:focus {
            outline: none;
            border-color: #60a5fa;
            box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
        }

    .custom-data-filters button {
        border-radius: 4px !important;
        cursor:pointer;
    }

        .custom-data-filters button:hover {
            background: #1e40af;
        }

@media (max-width: 600px) {
    .custom-data-filters input,
    .custom-data-filters select,
    .custom-data-filters button {
        width: 100%;
    }
}



/*    Custom Table Design   */

.table-data-container {
    overflow-x: auto;
    background: #FFF;
    /*padding: 20px;*/
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.05);
}

    .table-data-container table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        min-width: 600px;
    }

    .table-data-container thead {
        background-color: #e9f0f8;
    }

    .table-data-container th, .table-data-container td {
        padding: 16px 20px;
        text-align: left;
    }

    .table-data-container th {
        color: #3b4a59;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .table-data-container tbody tr {
        background-color: #fff;
        border-bottom: 1px solid #eee;
        transition: background 0.2s;
    }

        .table-data-container tbody tr:nth-child(even) {
            background-color: #f9fafb;
        }

        .table-data-container tbody tr:hover {
            background-color: #eef5ff;
        }

    .table-data-container td {
        color: #333;
    }

        /* Rounded corners on first and last column cells */
        .table-data-container td:first-child, .table-data-container th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        .table-data-container td:last-child, .table-data-container th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

/*    Custom Table Design  End */

/*    Custom Page Design  End */

.preview-document{
    width:100%;
    padding:20px;
}

.confirm-section {
  height: 25px;
  padding: 10px;
  display: flex;
  align-items: center;
}

        body {
            font-family: Arial, sans-serif;
            /*background-color: #f0f0f0;*/
            margin: 0;
            padding: 20px;
            color: #000;
        }

        .letters-page {
            background: #fff;
            width: 210mm;
            min-height: 297mm;
            margin: 0 auto;
            padding: 5mm 20mm;
            box-sizing: border-box;
            position: relative;
            border: 6px solid #800020;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            /*background-image: url('file:///C:/Users/sp149.GPINFOTECH/Downloads/fichs-letter-bg/fichs-letter-bg.png');*/
            background-image: url({{backgroundimage}});
            background-repeat: no-repeat;
            background-position: center 55%;
            background-size: 75% auto;
            display: flex;
            flex-direction: column;
        }

        .letters-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 40px;
            margin-top: 15px;
        }

        .letters-address {
            font-size: 18px;
            line-height: 1.4;
        }

        .letters-logo-container {
            text-align: right;
            max-width: 250px;
        }

        .letters-doc-title {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #002060;
            letter-spacing: 0.5px;
            margin-top: 10px;
            margin-bottom: 5px;
        }

        .letters-doc-date {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #002060;
            margin-bottom: 30px;
        }

        .letters-salutation {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 25px;
        }

        .letters-confirmation-text {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 25px;
            text-align: justify;
        }

        .letters-student-details {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 30px;
        }

            .letters-student-details p {
                margin: 4px 0;
            }

        .letters-bold-text {
            font-weight: bold;
        }

        .letters-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 18px;
            margin-bottom: 120px;
        }

            .letters-table th, .letters-table td {
                border: 1px solid #000;
                padding: 8px 10px;
                text-align: left;
                vertical-align: middle;
            }

            .letters-table th {
                font-weight: bold;
            }

        .letters-center-align {
            text-align: center;
        }

        .letters-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 18px;
            padding-top: 15px;
            background-color: #fff;
        }

        .letters-contact-info {
            line-height: 1.6;
        }

        .letters-contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
        }

        .letters-contact-icon {
            margin-right: 10px;
            width: 16px;
            text-align: center;
        }

        .letters-footer-logo {
            text-align: right;
            max-width: 250px;
        }

        @media print {
            body {
                background-color: #fff;
                padding: 0;
            }

            .letters-page {
                margin: 0;
                box-shadow: none;
                page-break-after: always;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .letters-footer {
                position: fixed;
                bottom: 0mm;
                left: 20mm;
                right: 20mm;
            }
        }