﻿/********************************************/
/*********** GENERAL STYLE *****************/
/******************************************/
body {
    position: relative;
    font-family: 'Gotham', sans-serif;
    font-size: 13px !important;
    overflow-x: hidden;
    padding-bottom: 25px;
    color: #4d4d4d;
}

/* Set padding to keep content from hitting the edges */


/* 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;
}

.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: #76c1b2;
    color: #fff;*/
    margin: 5px 0 !important;
}

/*.btn-add:hover {
        background-color: #76c1b2;
    }*/

.btn-edit, .btn-edit:hover {
    background-color: #ffd800;
    color: #fff;
    margin: 5px 0;
}

    .btn-edit:hover, .btn-delete:hover {
        background-color: #ccc;
    }

.btn-delete, .btn-delete:hover {
    background-color: #888888;
    color: #fff;
    margin: 5px 0;
}

.btn-reject {
    background-color: #ff6a00;
}

.itemContentUpd .k-widget.k-grid.k-display-block td a {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
}

.btn-incomplete {
    background-color: #ffd800;
}

.btn-disabled {
    background-color: #b4b4b4;
    color: #fff;
}

.formSectTitle {
    color: #888;
    font-size: 1.2em;
    text-transform: uppercase;
}

.formSectTitleWrap {
    padding: 8px 0;
    margin-bottom: 20px;
    /*border-bottom: 2px solid #76c1b2;*/
    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: #fff;
        }

    .landing_page .side_menu {
        position: relative;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 25%;
        z-index: 10;
        height: 100vh;
        box-shadow: 1px 1px 8px #ccc;
    }

        .landing_page .side_menu button.hide_menu {
            position: absolute;
            left: 320px;
            color: #77c4b2;
            font-size: 20px;
        }

@media (max-width:767px) {
    .landing_page .side_menu {
        display: none;
        width: 100%;
    }
}

.landing_page .side_menu .menu {
    margin: 50px 30px;
}

.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 {
        padding: 5px 12px;
    }

        .landing_page .side_menu ul.menu li a {
            color: #cfcfcf;
            font-weight: lighter;
        }

.landing_page .upper_bar_1, .landing_page .upper_bar_2 {
    height: 50px;
    z-index: 1;
    background-color: #77c4b2;
    text-align: right;
    padding: 15px 38px;
}

@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: #fff;
}

.landing_page .upper_bar_2 {
    background-color: #fff;
    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: #fff;
    box-shadow: 3px 3px 3px #ccc;
    margin: 5px;
    width: 32%;
    height: 28vh;
    text-align: center;
    transition: .2s;
    display: flex;
    align-items: center;
}



.landing_page .container .card:hover {
    background-color: #fff;
    box-shadow: 4px 4px 7px #9b9b9b;
    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: 48%;
    }
}

@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 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 solid #76c1b2;*/
    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: #76c1b2;*/
    z-index: 999;
}

upperBarMenuContainer .navbar-collapse {
    z-index: 999;
    position: absolute;
}

.upperBarMenuContainer .dropdown-toggle {
    color: #fff !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: #76c1b2 !important;*/
    /*color: #fff;*/
    margin-top: 13px;
    margin-right: 23px;
}

.upperBarMenuContainer img {
    vertical-align: baseline;
}

.upperBarMenuContainer .navbarLogo {
    margin-top: 10px;
    float: left;
}

.upperBarMenuContainer .navbar-toggle {
    float: right;
}

.upperBarMenuContainer .nav > li {
    display: inline-block;
    /*position: absolute;
    padding: 20px;*/
}

.navbarLogo li i {
    color: #fff;
    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: #76c1b2;
}

/*.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: #76C1B2;
    color: #fff !important;
    border: none !important;
    margin: 4px 2px !important;
}

    span#select.k-button:hover, span#deselect.k-button:hover {
        background-color: #669999;
    }

.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: #76c1b2;*/
    font-weight: 600;
    /*border: 2px solid #76c1b2;*/
    padding: 10px 20px;
    margin: 0 auto;
    background-color: transparent;
}

/*.newForm button a {
        color: #76c1b2;
    }*/

.formEditorPartial {
    background-color: #fff;
}

.formEditorPartialContainer section {
    display: table;
    padding: 20px 0;
    margin: 20px 0;
    background-color: #f0f0f0;
}


    .formEditorPartialContainer section .formTitle {
        color: #888;
        font-size: 20px;
        text-transform: uppercase;
    }

    .formEditorPartialContainer section .formNumber {
        color: #888;
        font-size: 20px;
        text-transform: uppercase;
    }


.formEditorPartialContainer section h5 {
    font-weight: 600;
    /*border-left: 3px solid #76c1b2;*/
    padding-left: 10px;
}

.formEditorPartialContainer section .itemContent {
    width: 100%;
    display: table;
    align-items: center;
    padding: 5px 0;
    margin: 10px 0;
    background-color: #fff;
}

@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 solid #76c1b2;
    background-color: #76c1b2;
    color: #fff;
}*/

/*.formEditorPartialContainer section .k-state-focused, .k-state-hover {
    background-color: #76c1b2;
}*/

.formEditorPartialInfo {
    padding: 20px 0;
}



.formEditorPartialClass {
    background-color: #fff;
}

    .formEditorPartialClass .fepLabels, .formEditorPartialClass .fepLabelIndividual {
        font-weight: 400;
        color: #9b9b9b;
        min-width: 150px;
        padding: 8px;
    }

    .formEditorPartialClass .fepFields {
        background-color: #fff;
        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 solid #76c1b2;*/
            border-bottom: 1px solid #ccc;
            min-height: 40px;
            width: 90%;
            box-shadow: none;
            border-radius: 0;
            /*color: #9b9b9b;*/
            /*margin: -2px;*/
            /*background-color: #fff;*/
        }

        .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 solid #76c1b2;*/
            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: #76c1b2;
            color: #fff;*/
            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 solid #76c1b2;*/
            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;
        }

/***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: #76c1b2;
    color: #fff;*/
    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: #fff !important;
}

.Reminders_popup .k-grid-content {
    overflow-y: auto !important;
}

/*****************************************/
/***********LOGIN FORM STYLE*************/
/***************************************/
.login_page {
    box-shadow: 2px 3px 11px #ccc;
    width: 40%;
    margin: 50px auto;
    padding: 15px;
}

    .login_page h4 {
        font-size: 15px;
        text-transform: capitalize;
        font-style: italic;
    }

.loginPartialForm, .loginPartialFormJTI, .loginPartialForm a {
    text-align: center;
    color: #808080;
}

    .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;
}

.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-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: #76c1b2;
        color: #fff !important;*/
        text-transform: uppercase;
    }

    .routingTable.routingContainer .k-header .k-link, .docUpdSection .attachSection .k-header .k-link {
        color: #fff !important;
    }

.k-overflow-container .k-primary, .k-primary {
    /*color: #fff !important;
    background-color: #76c1b2 !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: #fff !important;
}*/

.k-window-titlebar.k-header {
    background-color: #76C1B2;
    color: #fff;
}

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: #fff;
}

    .docUpdSection .itemContentUpd .k-button.k-upload-button {
        /*background-color: #76c1b2;
        color: #fff;*/
        border: none;
    }

    .docUpdSection .itemContentUpd .k-widget.k-upload.k-header.k-upload-empty {
        border: none;
    }

    .docUpdSection .itemContentUpd .k-dropzone {
        background-color: #fff;
        padding: 10px 0;
    }

/**************************************************/
/*********** Summary comments section*************/
/************************************************/
.sumComments, .commentsFooter {
    background-color: #f9f9f9;
    padding: 20px;
}

    .sumComments a, .commentsFooter a {
        /*color: #76c1b2;*/
        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: #fff;
    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: #76c1b2;
    }*/

.k-widget.k-grid.k-display-block td {
    background-color: #fff;
    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: #76c1b2;
    }*/

.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 {
    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: #76c1b2;
    color: #fff;
    border: 1px solid #76c1b2;
}*/

/*.k-pager-wrap.k-grid-pager.k-widget.k-floatwrap .k-link {
    color: #76c1b2;
}*/

.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-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-button, .k-ie8 .k-grid tbody 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: #fff;
        z-index: 1;
    }
}

#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: 0;
}

@media (max-width:767px) {
    .sidebar-nav {
        top: 20px;
    }
}

.sidebar-nav li {
    /*line-height: 40px;*/
    /*text-indent: 20px;*/
    padding: 7px 15px;
}

    .sidebar-nav li a {
        padding: 7px 15px;
    }

    .sidebar-nav li h4 {
        padding: 0 15px;
    }

    .sidebar-nav li a {
        font-weight: 500 !important;
        color: #999999;
        display: block;
        text-decoration: none;
        text-align: left;
        text-transform: uppercase;
    }

        .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: #76c1b2;*/
            background: transparent;
            text-decoration: none;
        }

        .sidebar-nav li a:active,
        .sidebar-nav li a:focus {
            text-decoration: none;
            /*color: #76c1b2 !important;*/
        }

.nav-sidebar li.active a::before {
    content: " - ";
    /*color: #76c1b2;*/
}

.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: #fff;
            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;
    }


    .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;
    }

    .customDisabled {
        pointer-events: none;
        opacity: 0.6;
    }
}
