/********************************************/
/*********** GENERAL STYLE *****************/
/******************************************/

@font-face {
    font-family: "Seitu";
    src: url("./font/Seitu_Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    background: white;
}

body {
    position: relative;
    font-family: 'Seitu', sans-serif;
    font-size: 13px !important;
    overflow-x: hidden;
    padding-bottom: 25px;
    color: #4d4d4d;
    /* VARIABLES */
    --color-primary: #00bb31;
    --br-radius: 10px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    /*padding-left: 15px;
    padding-right: 15px;*/
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */

select,
textarea {
    min-width: 100% !important;
}

input {
}

.padding-0 {
    padding: 0;
}

.margin-b {
    margin-bottom: 80px;
}

.overflow-x {
    overflow-x: auto;
}

.btn-add, .btn-add:hover, .btn-accept, .btn-reject, .btn-incomplete, .btn-acceptComment, .btn-preview {
    /*background-color:var(--main-background-color);
    color: var(--main-text-color);*/
    margin: 5px 0 !important;

}

.k-grid-add, .k-grid-excel, .k-grid-save-changes {
    background: var(--color-primary) !important;
    color: white !important;
    font-weight: bold;
}

.k-tabstrip-items-wrapper .k-item {
    color: var(--color-primary) !important;
}

.formBodyContainer
.k-pager .k-pager-numbers-wrap .k-button.k-selected {
    background-color: var(--color-primary) !important;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    background-color: var(--color-primary, #0d6efd) !important;
}
/*.btn-add:hover {
        background-color:var(--main-background-color);
    }*/
.btn-edit, .btn-edit:hover {
    background-color: #ffd800;
    color: var(--main-text-color);
    margin: 5px 0;
}

    .btn-edit:hover, .btn-delete:hover {
        background-color: #ccc;
    }

.btn-delete, .btn-delete:hover {
    background-color: #888888;
    color: var(--main-text-color);
    margin: 5px 0;
}

.btn-reject {
    background-color: #ff6a00;
}

.itemContentUpd .k-widget.k-grid.k-display-block td a {
    background-color: var(--main-text-color) !important;
    border: 1px solid #ccc !important;
}

.btn-incomplete {
    background-color: #ffd800;
}

.btn-disabled {
    background-color: #b4b4b4;
    color: var(--main-text-color);
}

.formSectTitle {
    color: #888;
    font-size: 1.2em;
    text-transform: uppercase;
}

.formSectTitleWrap {
    padding: 8px 0;
    margin-bottom: 20px;
    /*border-bottom: 2px solidvar(--main-background-color);*/
    width: 100%;
}

/********************************************/
/************** landing page ***************/
/******************************************/
.landing_page {
    position: relative;
}

    .landing_page .buttonLogOut a {
        display: inline;
        padding: 10px;
    }

    .landing_page button {
        z-index: 10;
        position: absolute;
        top: 0;
        left: 20px;
    }

        .landing_page button .icon-bar {
            background-color: var(--main-text-color);
        }

    .landing_page .side_menu {
        position: relative;
        background-color: var(--main-text-color);
        position: absolute;
        top: 50px;
        left: 0;
        width: 25%;
        z-index: 10;
        height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 50px 30px;
        padding-top: 20px;
    }


        .landing_page .side_menu h2 {
            font-size: 20px;
            color: black;
            font-weight: bold;
        }

        .landing_page .side_menu button.hide_menu {
            position: absolute;
            left: 320px;
            color: #0D2A5B;
            font-size: 20px;
        }

@media (max-width:767px) {
    .landing_page .side_menu {
        display: none;
        width: 100%;
    }
}

.landing_page .side_menu .menu {
    color: black;
    padding-left: 2.5rem;
}

.landing_page .side_menu .menu a{
    color: black !important;
    font-size: 11px;
}



.landing_page .side_menu ul {
    list-style-image: url('images/dot.png');
}

.landing_page .side_menu ul.menu img {
    display: inline-block;
}

.landing_page .side_menu ul.menu h4 {
    color: #a7a7a7;
    text-transform: initial;
}

.landing_page .side_menu ul.menu li {
    text-transform: uppercase;
    padding: 5px 12px;
}

.landing_page .side_menu ul.menu li a {
    display: block;
    text-decoration: none;
    text-align: left;
    color: black !important;
    font-size: 11px;
}

.landing_page .side_menu ul.menu li a span:before {
    position: absolute;
    left: 0;
    color: #41484c;
    text-align: center;
    width: 20px;
    line-height: 18px;
}

.landing_page .side_menu ul.menu li a:hover, .sidebar-nav li.active {
    background: transparent;
    text-decoration: none;
}

.landing_page .side_menu ul.menu li a:active, .sidebar-nav li a:focus {
    text-decoration: none;
}

.landing_page .upper_bar_1, .landing_page .upper_bar_2 {
    height: 50px;
    z-index: 1;
    text-align: right;
    padding: 15px 38px;
    width: 100%;
    margin-left: 0;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .landing_page .upper_bar_1 h1, .landing_page .upper_bar_2 h1 {
        margin: 0;
        width: fit-content;
        color: white;
        padding-top: 5px;
        font-size: 22px;
        font-weight: bold;
    }


    @media (max-width:767px) {
        .landing_page .upper_bar_1, .landing_page .upper_bar_2 {
        padding: 15px 30px;
    }
}

.landing_page .upper_bar_1 .buttonLogOut a {
    color: var(--main-text-color);
}

.landing_page .upper_bar_2 {
    background-color: var(--main-text-color);
    box-shadow: 3px 3px 3px #ccc;
    text-align: left;
    color: #717171;
    font-size: 16px;
}

.landing_page .container {
    margin: 30px 0;
    text-align: center;
}

@media (max-width:767px) {
    .landing_page .container {
        margin: 10px 0;
        text-align: center;
    }
}

.landing_page .container .card {
    position: relative;
    background-color: var(--main-text-color);
    box-shadow: 3px 3px 10px hwb(0deg 80% 20% / 60%);
    margin: 5px;
    width: 23%;
    height: 28vh;
    text-align: center;
    transition: .2s;
    display: flex;
    align-items: center;
    background: #fbfbfc;
    border: 1px solid #cccccc0f;
}


@media (max-width:767px) {
    .landing_page .container .card {
        /*width: 32%;
        height: 25vh;*/
    }
}

.landing_page .container .card:hover {
    background-color: var(--main-text-color);
    box-shadow: 3px 3px 10px hwb(0deg 80% 20% / 80%);
    transition: .2s;
}

    .landing_page .container .card:hover p {
        color: #9f9f9f;
        transition: .2s;
    }

@media (max-width:1080px) {
    .landing_page .container .card {
        /*margin: 10px 0 0 0;*/
        width: 23%;
    }
}

@media (max-width:767px) {
    .landing_page .container .card {
        margin: 10px 0 0 0;
        width: 100%;
    }
}


.landing_page .container .card p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #ccc;
    font-size: 15px;
    transition: .2s;
    font-weight: lighter;
}

@media only screen and (max-width: 376px) {
    .landing_page .container .card p {
        display: none;
    }
}
@media only screen and (max-height: 650px) {
    .landing_page .container .card p {
        display: none;
    }
    .landing_page .container .card img {
        max-width: auto;
        width: auto;
        height: 60px;
    }
}
.landing_page .container .card img {
    margin: 0 auto;
}

@media (max-width:767px) {
    .landing_page .container .card img {
        /*margin-top: 10%;*/
    }
}

/********************************************/
/************ media queries ***************/
/******************************************/
@media (max-width: 1366px) {
    .itemContent {
        max-width: 650px;
    }
}

@media (max-width: 375px) {
    .k-widget .k-window {
        max-width: 369px !important;
    }
}

/********************************************/
/************ Typeface style ***************/
/******************************************/
h4 {
    color: #b4b4b4;
    text-transform: uppercase;
    font-weight: 500;
}

.fepSubInfo h4 {
    color: #9b9b9b;
    text-transform: uppercase;
    font-weight: 500;
    /*border-bottom: 3px solidvar(--main-background-color);*/
    padding: 0 0 10px 0;
}

.fepSubInfo {
    padding: 0 0 20px 0;
}

.formEditorPartialContainer h5 {
    color: #888888;
    text-transform: uppercase;
    font-weight: 500;
}

.formEditorPartialInfo p {
    padding: 20px;
    font-weight: lighter;
    color: #b4b4b4;
}

/********************************************/
/*************** UPPER MENU ****************/
/******************************************/
header {
    height: 65px;
    z-index: 999;
}

k-overlay::after {
    z-index: 9999 !important;
}

.upperBarMenuContainer {
    background-color:var(--color-primary) !important;
    z-index: 999;
}

    .upperBarMenuContainer
    .navbarLogo {
        display: flex;
        align-items: center;
    }

        .upperBarMenuContainer
        .navbarLogo h1 {
            font-size: 22px;
            color: white;
            font-weight: bold;
            margin: 0;
            padding-top: 7.5px;
            padding-left: 15px
        }

        upperBarMenuContainer .navbar-collapse {
            z-index: 999;
            position: absolute;
        }

.upperBarMenuContainer .dropdown-toggle {
    color: var(--main-text-color) !important;
    padding-top: 20px;
}

    .upperBarMenuContainer .dropdown-toggle .flaticon-down-arrow {
        margin: 0 10px;
        font-size: 10px;
    }

    .upperBarMenuContainer .dropdown-toggle .flaticon-vertical-line {
        margin: 0 10px;
    }

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent !important;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: transparent !important;
}

.navbar-default .navbar-toggle {
    border: none !important;
    /*border-color:var(--main-background-color) !important;*/
    /*color: var(--main-text-color);*/
    margin-top: 13px;
    margin-right: 23px;
}

.upperBarMenuContainer img {
    vertical-align: baseline;
}

.upperBarMenuContainer .navbarLogo {
    float: left;
}

    .upperBarMenuContainer .navbarLogo .back-btn, .upperBarMenuContainer .navbarLogo .menu-btn {
        background: #008731;
        padding: 8px 0;
        height: stretch;
    }

        .upperBarMenuContainer .navbarLogo .back-btn i, .upperBarMenuContainer .navbarLogo .menu-btn i {
            padding: 0 20px;
        }

        .upperBarMenuContainer .navbar-toggle {
            float: right;
        }

.upperBarMenuContainer .nav > li {
    display: inline-block;
    /*position: absolute;
    padding: 20px;*/
}

.navbarLogo li i {
    color: var(--main-text-color);
    font-size: 30px;
    padding: 0 20px 0 35px;
    cursor: pointer;
}

.upperBarMenuContainer .navbar-right {
    margin-right: 20px !important;
}
/********************************************/
/**************** LEFT MENU ****************/
/******************************************/
.leftMenu {
    position: fixed;
    top: 125px;
    left: 15px;
}

@media (max-width: 1024px) {
    .leftMenu {
        width: 100%;
    }
}

.leftMenu h4 {
    text-transform: uppercase;
}

.leftMenu ul {
    max-width: 245px;
    list-style-type: none;
}

    .leftMenu ul li {
        padding: 15px 0;
    }

        .leftMenu ul li a {
            color: #b4b4b4;
            white-space: normal;
        }

.leftMenuItems a {
    text-transform: uppercase;
}

.sidebar-nav li a {
    color: #ccc;
}

.sidebar-nav li .active {
    color:var(--main-background-color);
}

/*.sidebar-nav .active::before {
    content: "  ";
    color: red!important;
}*/

.leftMenuContainer .leftMenu .reportHover {
    cursor: pointer;
}

    .leftMenuContainer .leftMenu .reportHover:hover ul li {
        display: block;
        -webkit-transition: 5s ease;
        -moz-transition: 5s ease;
        -o-transition: 5s ease;
        transition: 5s ease;
    }

    .leftMenuContainer .leftMenu .reportHover ul li {
        display: none;
    }


/******************************************************/
/**************** FORM EDITOR PARTIAL ****************/
/****************************************************/
.bodyContainer {
    width: calc(100% - 260px);
    margin: 0 auto;
    position: absolute;
    right: 0;
    margin-top: -10px;
    margin-bottom: 50px;
}

.routingContainer .k-grid .k-grid-header {
    padding-right: 0 !important;
}

.routingContainer .k-grid .k-grid-content {
    border-bottom: 0;
    border-top: 0;
}

span#select.k-button, span#deselect.k-button {
    background-color:var(--main-background-color);
    color: var(--main-text-color) !important;
    border: none !important;
    margin: 4px 2px !important;
}

    span#select.k-button:hover, span#deselect.k-button:hover {
        background-color: var(--main-hover-color);
    }

.formBodyContainer {
    width: calc(100% - 15px);
    /*position: absolute;
    top: 120px;
    left: 2%;
    width: 100%;*/
}

.sectionData .k-widget.k-combobox.k-header.k-combobox-clearable.k-dropdown {
    width: 100%;
}

.newForm {
    height: 60px;
    padding: 10px 0;
    /*width: 100%;
    position: fixed;
    top: 75px;
    left: 0;
    height: 50px;*/
}

@media (max-width:767px) {
    .newForm {
        margin-bottom: 30px;
        height: 22px;
        padding: 0;
    }

        .newForm button {
            max-width: 230px;
        }
}

.newForm span {
    line-height: 50px;
    color: #888;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.newForm button {
    height: auto;
    /*color:var(--main-background-color);*/
    font-weight: 600;
    /*border: 2px solidvar(--main-background-color);*/
    padding: 10px 20px;
    margin: 0 auto;
    background-color: transparent;
}

/*.newForm button a {
        color:var(--main-background-color);
    }*/

.formEditorPartial {
    background-color: var(--main-text-color);
}

.formEditorPartialContainer section {
    display: table;
    padding: 20px 0;
    margin: 20px 0;
    background-color: #f0f0f0;
}

    .formEditorPartialContainer section .formTitleWrap {
        /*width: 100%;*/
        /*padding-left: 50px;*/
    }

    .formEditorPartialContainer section .formTitle {
        color: #888;
        font-size: 20px;
        text-transform: uppercase;
    }

    .formEditorPartialContainer section .formNumber {
        color: #888;
        font-size: 20px;
        text-transform: uppercase;
        /*float:right;*/
    }

@media (max-width:967px) {
    .formEditorPartialContainer section .formNumber {
        /*padding-left: 50px;*/
    }
}

.formEditorPartialContainer section h5 {
    font-weight: 600;
    /*border-left: 3px solidvar(--main-background-color);*/
    padding-left: 10px;
}

.formEditorPartialContainer section .itemContent {
    width: 100%;
    /*display: flex;*/
    display: table;
    align-items: center;
    padding: 5px 0;
    margin: 10px 0;
    background-color: var(--main-text-color);
}

@media (max-width:767px) {
    .formEditorPartialContainer section .itemContent {
        height: 75px !important;
    }
}

.formEditorPartialContainer section .sectionLabel {
    border-right: 1px solid #ccc;
}

.formEditorPartialContainer section .sectionData .k-textbox {
    /*width: 100% !important;*/
    border: 0;
}

.formEditorPartialContainer section .sectionData label {
    margin-right: 10px;
}

/*.formEditorPartialContainer section .sectionData .k-multiselect .k-button {
    border: 1px solidvar(--main-background-color);
    background-color:var(--main-background-color);
    color: var(--main-text-color);
}*/

/*.formEditorPartialContainer section .k-state-focused, .k-state-hover {
    background-color:var(--main-background-color);
}*/

.formEditorPartialInfo {
    padding: 20px 0;
}

.itemContent .sectionData {
    /*width: 400px;*/
}

.formEditorPartialClass {
    background-color: var(--main-text-color);
}

    .formEditorPartialClass .fepLabels, .formEditorPartialClass .fepLabelIndividual {
        font-weight: 400;
        color: #9b9b9b;
        min-width: 150px;
        padding: 8px;
    }

    .formEditorPartialClass .fepFields {
        background-color: var(--main-text-color);
        width: 100%;
        padding: 8px;
    }

        .formEditorPartialClass .fepFields input.k-textbox, .formEditorPartialClass .fepFields textarea, .formEditorPartialClass .fepFields input.k-textbox,
        .formEditorPartialClass .fepFields textarea.k-textbox, .formEditorPartialClass .fepFields .k-widget, .formEditorPartialClass .fepFields .k-numerictextbox,
        .formEditorPartialClass .fepFields .k-datetimepicker .k-picker-wrap, .formEditorPartialClass .fepFields .k-datepicker .k-picker-wrap {
            border: none;
            /*border-left: 3px solidvar(--main-background-color);*/
            border-bottom: 1px solid #ccc;
            min-height: 40px;
            width: 90%;
            box-shadow: none;
            border-radius: 0;
            /*color: #9b9b9b;*/
            /*margin: -2px;*/
            /*background-color: var(--main-text-color);*/
        }

        .formEditorPartialClass .fepFields input.k-input, .formEditorPartialClass .fepFields .k-numeric-wrap, .formEditorPartialClass .fepFields .k-datetimepicker .k-picker-wrap, .formEditorPartialClass .fepFields .k-datepicker .k-picker-wrap {
            /*border-left: 3px solidvar(--main-background-color);*/
            border: none !important;
            box-shadow: none;
        }

        .formEditorPartialClass .fepFields .k-textbox.TextArea {
            min-height: 60px;
        }


        /***********Date picker style************/
        .formEditorPartialClass .fepFields .Date .k-picker-wrap {
            border: none;
            border-radius: 0;
            box-shadow: none;
        }

        .formEditorPartialClass .fepFields .Date .k-select {
            width: 50px;
            /*background-color:var(--main-background-color);
            color: var(--main-text-color);*/
            border: none;
            border-radius: 0;
            box-shadow: none;
            height: 40px;
        }

        .formEditorPartialClass .fepFields .k-numeric-wrap .k-select {
            height: 40px;
        }

        .formEditorPartialClass .fepFields .Date {
            border-radius: 0;
            /*border-left: 3px solidvar(--main-background-color);*/
            border-bottom: 1px solid #ccc;
        }

            .formEditorPartialClass .fepFields .Date .k-picker-wrap .k-icon {
                margin-top: 5px;
            }
        /***********Date picker style end************/

        /***checkboxes and their labels style**/

        .formEditorPartialClass .fepFields label {
            color: #333;
            font-weight: lighter;
            padding: 0 10px;
            margin-top: 3px;
        }

        .formEditorPartialClass .fepFields .k-checkbox {
            /*width: 100%;*/
        }
/***checkboxes and their labels style end**/
.k-edit-form-container .editor-field .text-box.single-line {
    border-radius: 3px;
    height: 25px;
    width: 200px;
    border: 1px solid #ccc;
    color: #454343;
    font-weight: lighter;
}

.k-edit-form-container label {
    margin-bottom: 0;
    color: #888;
}

.k-edit-form-container .editor-label, .k-edit-label {
    padding-top: 6px !important;
}

.k-window-titlebar.k-header {
    background-color:var(--color-primary) !important;
    color: var(--main-text-color) !important;
    text-transform: uppercase;
}

.k-edit-form-container .k-edit-buttons {
    width: 105%;
}

.k-widget.k-window {
    min-width: 368px !important;
}

.k-edit-form-container {
    max-width: 336px !important;
}

    .k-edit-form-container .k-textbox {
        width: 100%;
    }

.k-widget.k-window .k-widget.k-datepicker.k-header {
    width: 100%;
}

/*****************************************/
/******* REMINDER POP-UP STYLE **********/
/***************************************/
.Reminders_popup a.k-button.k-grid-update {
    color: var(--main-text-color) !important;
}

.Reminders_popup .k-grid-content {
    overflow-y: auto !important;
}

/*****************************************/
/***********LOGIN FORM STYLE*************/
/***************************************/

.login-navbar {
    background: var(--color-primary);
    color: #fff;
    padding: 2rem 4rem;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 30%);
}
    .login-navbar h1 {
        margin: 0;
        font-size: 22px;
        font-weight: bold;
    }

.login_page {
    box-shadow: 2px 3px 11px #ccc;
    width: 40%;
    margin: 50px auto;
    padding: 15px;
    padding-bottom: 30px;
    border-radius: var(--br-radius);
    background: linear-gradient(181deg, #f4f4f4, #ffffff);
}

.login-page h2.loginTitle {
    font-size: 20px;
    color: black;

}

    .login_page h4 {
        font-size: 15px;
        text-transform: capitalize;
        font-style: italic;
    }

#socialLoginForm hr {
    border: none;
}

.loginPartialForm, .loginPartialFormJTI, .loginPartialForm a {
    text-align: center;
    color: var(--color-primary);
    font-weight: bold;
    border-radius: var(--br-radius);
}



    .loginPartialForm .form-group .col-md-12:not(.btn-text){
        text-align: left;
    }

    .loginPartialForm .form-group a.btn-outline{
        padding: 1rem 2rem;
        border: 1px solid var(--color-primary);
        border-radius: 5px;
    }

    .loginPartialForm .form-control {
        text-align: center;
    } .loginPartialForm .btn-login, #socialLoginList .btn-loginJTI {
        border: none;
        border-radius: 0;
    } .login_main .loginPartialForm .btn-login, .login_main #socialLoginList .btn-loginJTI {
    min-width: 150px;
} .loginTitle {
    text-align: center;
    text-transform: capitalize;
    font-size: 20px;
    color: black;
} .forgotPass {
    background-color: #eeeeee;
    text-align: center;
} @media (max-width:450px) {
    .login_page {
        width: 97% !important;
    }
} @media (max-width:768px) {
    .login_page {
        width: 95% !important;
    }
} @media (max-width:1024px) {
    .login_page {
        width: 75%;
    }
}
    /*****************************************/
    /***********LANDING PAGE STYLE***********/
    /***************************************/
    .butonLogOut {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 100;
} .butonLogOut a span {
        font-size: 14px;
        font-weight: 600;
        color: #868990;
        padding-right: 10px;
    } .butonLogOut a img {
        width: 30px;
        height: 30px;
    } .butonLogOut a:hover {
        text-decoration: none;
    } .landingPage {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
} .landingPage .item {
        width: 100%;
        height: 33.3vh;
        text-align: center;
        display: flex;
        vertical-align: middle;
        justify-content: center;
        align-items: center;
        position: absolute;
        background: #f9f9f9; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(#f9f9f9, #dfdfdf); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#f9f9f9, #dfdfdf); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#f9f9f9, #dfdfdf); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#f9f9f9, #dfdfdf); /* Standard syntax */
    } .landingPage .item img {
        } .landingPage .item-1 {
        top: 0;
        left: 0;
    } .landingPage .item-2 {
        top: 33.3%;
        left: 0;
    } .landingPage .item-3 {
        bottom: 0;
        left: 0;
    } .k-editable {
    height: 10px;
}
    /****************************************/
    /*********** routing table *************/
    /**************************************/
    .routingTable {
    height: 300px;
    display: inline-block;
} .routingTable .k-grid-content {
        height: 200px !important;
    } .routingTable.routingContainer .k-grid-content .k-filter-row th, .routingTable.routingContainer .k-grid-header th.k-header, .docUpdSection .k-grid-content .k-filter-row th, .docUpdSection .k-grid-header th.k-header {
        text-align: center !important;
        /*background-color:var(--main-background-color);
        color: var(--main-text-color) !important;*/
        text-transform: uppercase;
    } .routingTable.routingContainer .k-header .k-link, .docUpdSection .attachSection .k-header .k-link {
        color: var(--main-text-color) !important;
    } .k-overflow-container .k-primary, .k-primary {
    /*color: var(--main-text-color) !important;
    background-color:var(--main-background-color) !important;*/
    border: none !important;
}
    /*.routingTable .div.k-grid-footer, div.k-grid-header {
    padding-right: 0 !important;
}*/
    /*.k-filter-row th, .k-grid-header th.k-header {
    border-color: var(--main-text-color) !important;
}*/
    .k-window-titlebar.k-header {
    background-color:var(--main-background-color);
    color: var(--main-text-color);
} div.k-grid-footer, div.k-grid-header {
    padding-right: 0 !important;
}
    /***************************************************/
    /*********** upload attachments table *************/
    /*************************************************/
    .attachSection .k-grid .k-grid-header {
    padding-right: 0 !important;
} .attachSection .k-grid-content {
    min-height: 250px !important;
    /*border-left: 1px solid #eee;*/
    border-bottom: 0;
    border-top: 0;
    overflow-x: hidden;
} .attachSection {
    min-height: 400px;
    min-width: 620px;
}
    /*.attachSection .k-icon {
        display: none;
    }*/
    .docUpdSection .itemContentUpd {
    width: 100% !important;
    height: 360px;
    align-items: center;
    display: table;
    padding: 10px 0;
    /*margin: 10px 0;*/
    background-color: var(--main-text-color);
} .docUpdSection .itemContentUpd .k-button.k-upload-button {
        /*background-color:var(--main-background-color);
        color: var(--main-text-color);*/
        border: none;
    } .docUpdSection .itemContentUpd .k-widget.k-upload.k-header.k-upload-empty {
        border: none;
    } .docUpdSection .itemContentUpd .k-dropzone {
        background-color: var(--main-text-color);
        padding: 10px 0;
    }
    /**************************************************/
    /*********** Summary comments section*************/
    /************************************************/
    .sumComments, .commentsFooter {
    background-color: #f9f9f9;
    padding: 20px;
} .sumComments a, .commentsFooter a {
        /*color:var(--main-background-color);*/
        font-weight: 500;
        text-decoration: none;
    } .sumComments .dateCreated {
        color: #888;
        font-weight: lighter;
    } .sumComments .userComment {
        font-weight: lighter;
        padding: 10px 0 20px 0;
    }
    /**************************************/
    /*********** footer style ************/
    /************************************/
    footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #f9f9f9;
    color: var(--main-text-color);
    font-weight: lighter;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-top: 1px solid #ccc;
    text-align: center;
    z-index: 999;
} footer span {
        font-size: 12px;
    }
    /**************************************/
    /*********** tables style ************/
    /************************************/
    .k-grid-header .k-header.k-filterable.k-with-icon {
    background-color: #f9f9f9;
    color: #b4b4b4 !important;
    text-align: center;
    border: none;
    border-bottom: 1px solid #ccc;
    text-transform: uppercase;
    height: 30px;
}
    /*.k-grid-header .k-header.k-filterable.k-with-icon .k-icon.k-i-filter {
        color:var(--main-background-color);
    }*/
    .k-widget.k-grid.k-display-block td {
    background-color: var(--main-text-color);
    color: #888;
    text-align: center;
    padding: 10px 3px;
    border: none;
    border-bottom: 1px solid #eee;
}
    /*.k-widget.k-grid.k-display-block td a {
         color:var(--main-background-color);
    }*/
    .k-widget.k-grid.k-display-block {
    border: none !important;
    box-shadow: 1px 1px 3px 3px #efeded !important;
} .formEditorPartial .k-widget.k-grid.k-display-block .k-link, .formEditorPartial #mainGrid .k-link {
    margin-bottom: 1px;
    text-transform: uppercase;
    text-align: center;
    color: #666666;
}
    /*.k-pager-wrap.k-grid-pager.k-widget.k-floatwrap .k-state-selected {
    background-color:var(--main-background-color);
    color: var(--main-text-color);
    border: 1px solidvar(--main-background-color);
}*/
    /*.k-pager-wrap.k-grid-pager.k-widget.k-floatwrap .k-link {
    color:var(--main-background-color);
}*/
    .formEditorPartial .addUser {
    text-align: right;
    margin-bottom: 10px;
} .formEditorPartial .addUser a {
        margin: 0 auto;
    } div.k-grid-footer, div.k-grid-header {
    border-color: #eee !important;
}
    /*.k-autocomplete, .k-block, .k-button-group .k-tool, .k-calendar th, .k-content, .k-editable-area, .k-filter-row > th, .k-footer-template td, .k-grid td, .k-grid td.k-state-selected, .k-grid-content-locked, .k-grid-footer, .k-grid-footer-locked, .k-grid-footer-wrap, .k-grid-header, .k-grid-header-locked, .k-grid-header-wrap, .k-group, .k-group-footer td, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-header, .k-input, .k-pager-refresh, .k-pager-wrap, .k-pager-wrap .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-content, .k-panelbar .k-panel, .k-panelbar > .k-item > .k-link, .k-popup.k-align .k-list :last-child.k-item, .k-separator, .k-slider-track, .k-splitbar, .k-state-default, .k-state-default .k-select, .k-state-disabled {
        border-color: #e6e6e6 !important;
    }*/
    /*.k-filtercell > span {
        padding: 0 !important;
    }*/
    .k-list-scroller {
    overflow-x: hidden !important;
} .k-icon.k-clear-value.k-i-close {
    display: none !important;
} .controlNameEditPopup .k-widget.k-dropdown.k-header {
    width: 286px !important;
} .k-ie input.k-textbox, div.k-window .k-widget.k-dropdown.k-header, .k-input {
    width: 100%;
}
    /*************table columns width and filters height**************/
    .landingTable th, .landingTable th, .adminTable th, .adminTable th {
    min-width: 160px !important;
} .landingTable .k-pager-wrap {
    width: 1624px;
} .landingTable .k-widget.k-grid.k-display-block {
    min-width: 1624px;
    width: 100%;
}
    /*.adminTable .k-widget.k-window .btn.btn-add.k-button {
    margin: 5px 0 !important;
}*/
    /*************reports grid style**************/
    .reportsGrid {
    width: 100%;
} .reportsGrid .k-grid-content {
        /*height: auto !important;*/
        /*overflow-x: auto;
        overflow-y: hidden;*/
    } .reportsGrid .k-grid-header, .reportsGrid .k-grid-content, .reportsGrid .k-pager-wrap.k-grid-pager.k-widget.k-floatwrap {
        width: 1900px !important;
    }
    /*******reports search fields********/
    .reportFields .k-widget.k-multiselect.k-header {
    margin: 3px 20px 8px 2px;
} .reportFields #filtersMs_BrandIds_label {
    margin-left: 50px !important;
} @media (max-width:768px) {
    .reportFields .k-widget.k-multiselect.k-header {
        width: 300px !important;
    }

    .reportFields #filtersMs_BrandIds_label {
        margin-left: 0px !important;
    }

    .reportFields .repFilters {
        display: block;
    }
} @media (max-width:1024px) {
    .reportFields .repFilters {
        display: block;
    }

    .reportFields #filtersMs_BrandIds_label {
        margin-left: 0px !important;
    }

    #ReportGrid {
        height: auto !important;
    }

    .reportsGrid .k-grid-content {
        height: 280px !important;
        overflow-y: auto;
        overflow-x: hidden;
    }
}
    /***********grid buttons style**********/
    .k-grid tbody .k-command-cell .k-button, .k-ie8 .k-grid tbody .k-command-cell button.k-button {
    max-width: 40px !important;
    min-width: 40px !important;
    margin: 1px;
}
    /********************************************/
    /************* MANDATORY STYLE *************/
    /******************************************/
    #wrapper {
    padding-left: 250px;
    transition: all 0.4s ease 0s;
    margin-top: -25px;
} #sidebar-wrapper {
    width: 250px;
    height: 100%;
    position: fixed;
    left: 250px;
    overflow-y: auto;
    transition: all 0.4s ease 0s;
    margin-left: -250px;
    z-index: 1000;
    background: transparent;
} @media (max-width:767px) {
    #sidebar-wrapper {
        position: absolute;
        left: 0;
        top: -30px;
        background-color: var(--main-text-color);
        z-index: 1;
    }
}

#sidebar-wrapper #spy h2 {
    font-size: 20px;
    color: black;
    font-weight: bold;
}

#sidebar-wrapper #spy {
    display: flex;
    flex-direction: column;
    padding: 7px 15px;
}

    #wrapper.active {
        padding-left: 0;
    } #wrapper.active #sidebar-wrapper {
        left: 0;
    } #page-content-wrapper {
    width: 100%;
    position: relative;
}
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    list-style: none;
    margin: 0;
    padding: 50px 20px;
    padding-top: 0px;
} @media (max-width:767px) {
    .sidebar-nav {
        top: 20px;
    }
}

.sidebar-nav ul {
    color: black;
    padding-left: 2.5rem;
    list-style-image: url('images/dot.png');
}

.sidebar-nav li {
    /*line-height: 40px;*/
    /*text-indent: 20px;*/
    padding: 5px 12px;
}
    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        text-align: left;
        color: black !important;
        font-size: 11px;
    } .sidebar-nav li a span:before {
            position: absolute;
            left: 0;
            color: #41484c;
            text-align: center;
            width: 20px;
            line-height: 18px;
        } .sidebar-nav li a:hover, .sidebar-nav li.active {
            /*color:var(--main-background-color);*/
            background: transparent;
            text-decoration: none;
        } .sidebar-nav li a:active, .sidebar-nav li a:focus {
            text-decoration: none;
            /*color:var(--main-background-color) !important;*/
        } .nav-sidebar li.active a::before {
    content: " - ";
    /*color:var(--main-background-color);*/
} .sidebar-nav > .sidebar-brand {
    height: 65px;
    line-height: 60px;
    font-size: 18px;
} .sidebar-nav > .sidebar-brand a {
        color: #999999;
    } .sidebar-nav > .sidebar-brand a:hover {
            color: var(--main-text-color);
            background: none;
        } .content-header {
    position: absolute;
    top: -20px;
    /*z-index: 999;*/
    left: -15px;
}
    /*#wrapper.active .content-header {
    left: 0;
}*/
    /*hamburger menu on big resolutions*/
    #menu-toggle {
    display: none;
} @media (max-width:767px) {
    .content-header {
        display: block;
    }
} .content-header h1 {
    font-size: 34px;
    margin: 0;
    margin-left: 16px;
    /*line-height: 65px;*/
    display: inline-block;
} .content-header h1 a {
        color: #b4b4b4;
    } .content-header h1 a i {
            font-size: 18px;
        } #menu-toggle {
    text-decoration: none;
} .btn-menu {
    color: #000;
} .inset {
    padding: 10px 0;
    /*position: absolute;
    top: -40px;
    right: 0;*/
} @media (max-width: 375px) {
    .adminTable .k-grid-content.km-widget.km-native-scroller {
        height: 378px !important;
    }

    .adminTable .k-widget.k-grid.k-display-block.k-editable {
        height: 502px !important;
    }

    .delegateTable .k-widget.k-grid.k-display-block.k-editable {
        height: 500px !important;
    }
} @media (max-width:767px) {
    #wrapper {
        padding-left: 0;
    }

    #sidebar-wrapper {
        left: 0;
        position: absolute;
    }

    #wrapper.active {
        position: relative;
        left: 250px;
    }

        #wrapper.active #sidebar-wrapper {
            position: absolute;
            /*left: 250px;*/
            width: 110%;
            height: 100vh;
            transition: all 0.4s ease 0s;
        }

        #wrapper.active .content-header {
            position: absolute;
            top: -30px;
            left: 50px;
            z-index: 9999999;
        }

    #menu-toggle {
        display: inline-block;
    }

    .inset {
        padding: 30px 0 10px 0;
    }

    .formEditorPartial .addUser {
        margin-bottom: 10px;
        position: absolute;
        top: -45px;
        right: 0px;
    }

    .formSectTitle {
        font-size: 0.8em;
    }

    .formEditorPartialContainer section .formTitle {
        font-size: 15px;
    }

    .formEditorPartialContainer section .formNumber {
        font-size: 14px;
    }

    .formEditorPartialContainer section {
        display: block;
    }

    .docUpdSection .itemContentUpd {
        display: block;
        min-height: 430px;
    }

    .reportsGrid .k-grid-content {
        /*height: 280px !important;*/
        width: 1000px;
    }

    .reportsGrid .k-grid-header, .reportsGrid .k-grid-pager {
        width: 1000px;
    }

    .inset .reportsGrid {
        /*overflow-x: scroll;*/
    }

    .adminTable .k-widget.k-grid.k-display-block.k-editable {
        height: 560px;
    }

    .k-window {
        min-width: 335px !important;
    }

    .newFormView {
        height: 0 !important;
        margin-bottom: 0 !important;
    }

    .docUpdSection .itemContentUpd .routingContainer {
        width: 650px !important;
    }

    .docUpdSection .itemContentUpd {
        overflow-x: auto;
    }
}
    /* Kendo Fixes*/
    :root {
    --kendo-font-size: 13px !important;
} .login_page .container{
    width: auto !important;
} body .k-grid, .k-table-md, input, select, body .k-input-inner, .k-input-values, .k-chip {
    font-family: 'Gotham', sans-serif;
    font-size: 13px !important;
} .k-table-thead th.k-header .k-column-title {
    display: block;
    min-height: 18px;
    line-height: 18px;
    margin: -.5em -.6em -.4em 0;
    padding: .5em .6em .4em 0;
    overflow: hidden;
    text-overflow: ellipsis;
} .formEditorPartial #mainGrid .k-link {
    justify-content: center;
} .k-header {
    border-color: #ccc !important;
} .k-table-thead th.k-header {
    overflow: hidden;
    border-style: solid;
    border-width: 0 0 1px 1px;
    padding: .5em .6em .4em .6em;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
} .k-filter-row.k-table-row, .gridRowGrey.k-table-row td {
    background-color: white !important;
} .k-table .k-picker-solid, .k-filtercell .k-filtercell-wrapper .k-button {
    background: white;
    border-color: #ccc;
} .k-filtercell .k-filtercell-wrapper {
    align-items: stretch !important;
} .k-filtercell .k-filtercell-wrapper .k-picker, .k-filtercell .k-filtercell-wrapper .k-button {
        height: 100%;
    } .k-grid .k-table-alt-row{
    background: white !important;
}
.k-grid .k-table-row td {
    background-color: var(--main-text-color);
    color: #888;
    text-align: center;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 1px !important;
} .k-grid .k-table-row td a{
    color:var(--main-background-color);
} .k-grid .k-table-row td a:hover {
        text-decoration: underline;
    }
    /*.k-grid#mainGrid{*/
    /*    border-color: transparent;*/
    /*}*/
    .k-grid td{
    line-height: 1.6em;
} .k-pager {
    background-color: #f5f5f5 !important;
    border-top: 1px solid #ccc !important;
} .k-pager .k-pager-numbers-wrap .k-button, .k-pager .k-pager-numbers-wrap select {
        color:var(--main-background-color);
        background: white !IMPORTANT;
        border: 1px solid #ccc !important;
        font-size: 13px;
    } .k-pager .k-pager-numbers-wrap .k-button.k-selected {
            background-color:var(--main-background-color) !important;
            color: var(--main-text-color) !important;
            border: 1px solidvar(--main-background-color) !important;
        } .k-pager .k-pager-sizes .k-picker {
        background: white !IMPORTANT;
        border: 1px solid #ccc !important;
        font-size: 13px;
    } .k-pager-info, .k-pager-sizes {
    color: #a6a6a6;
    font-weight: 600;
} .landingTable #mainGrid {
        min-width: 1624px;
        width: 100%;
    } .k-button {
    padding: 6px 14px;
    border-radius: 4px;
} .k-state-disabled{
    opacity: .7;
} .k-chip, .k-picker-solid {
    background: transparent !important;
}
    /*.k-chip-solid {
    background: #428bca !important;
    color: white !important;
}*/
    .field-validation-error {
    border-color: #fbeed5;
    background-color: #fbeed5;
    color: #90640e;
    width: max-content;
    padding: 3px;
    font-size: 13px !important;
    margin-left: 30px;
} .k-dialog-wrapper:has( > [role="alertdialog"]) {
    top: 0 !important
} .k-window-titlebar {
    background-color:var(--color-primary) !important;
    color: var(--main-text-color) !important;
} .k-button-solid-primary {
    --kendo-color-primary:var(--color-primary) !important;
} .k-datetimepicker button, .k-datepicker button {
    background: transparent;
    padding: 7px;
    border: none;
    border-radius: 0;
} .k-datetimepicker input, .k-datepicker input {
    border-right: solid 1px #ccc;
} .k-checkbox-wrap {
    margin-bottom: 5px;
} .k-checkbox {
    height: 15px !important;
    width: 15px !important;
    border-color: #666666 !important;
} .formEditorPartialContainer {
    padding-bottom: 50px;
    margin-top: -35px;
} .attachSection .k-upload, .attachSection .k-grid{
    border: none !important;
} #approvalRoutingGrid .k-header, .attachSection .k-header {
    justify-content: center;
} #approvalRoutingGrid .k-header .k-column-title, .attachSection .k-header .k-column-title {
        text-transform: uppercase !important;
    } @media (max-width: 767px) {
    .formEditorPartialContainer .docUpdSection {
        display: unset;
        width: 100%;
        float: left;
    }

    .formBodyContainer b .col-md-12 {
        position: unset !important;
    }
} .commentsFooter {
    float: left;
    width: 100%;
} .k-svg-i-sort-desc-small, .k-svg-i-sort-asc-small {
    width: 15px !important;
} .k-filter-row .k-table-td:not(:first-child) {
    border-left: 1px solid #ccc !important;
} .k-command-cell .k-grid-remove-command, .k-command-cell .k-grid-edit-command, .flaticon-multiple-users-silhouette, .k-command-cell .k-grid-save-command, .k-command-cell .k-grid-cancel-command {
    width: 40px;
    height: 34px;
    background: transparent !important;
    border: 1px solid #ccc;
} .k-command-cell .k-grid-remove-command .k-button-text, .k-command-cell .k-grid-edit-command .k-button-text {
        display: none;
    }
    .k-command-cell .k-grid-remove-command .k-icon, .k-command-cell .k-grid-edit-command .k-icon, .k-command-cell .k-grid-save-command .k-icon, .k-command-cell .k-grid-cancel-command .k-icon {
        color: var(--color-primary);
        width: 15px;
    } button.flaticon-multiple-users-silhouette::before {
    font-family: "Flaticon";
    display: block;
    content: "\f103";
    background: transparent;
    font-size: 14px;
    opacity: 1;
    color:var(--color-primary);
} button.flaticon-multiple-users-silhouette:hover::before {
    opacity: .8;
} #comments-section {
    display: inline-block;
    width: 100%;
} #dialog-approve-conditions {
    padding: 1rem 3rem;
} .k-grid-save-command svg {
    width: 15px;
} .k-grid-save-command .k-button-text, .k-grid-cancel-command .k-button-text{
    display: none;
}
.landing_page .container .item .card .img-responsive {
    max-width: 70%;
    max-height: 100%;
} .navbar-module-img {
    height: 30px;
    margin-top: 5px;
    filter: brightness(0) invert(1);
}

.k-grid .k-command-cell .k-button-md {
    height: 20px;
    min-height: 20px;
}