body {
    background-color: rgba(241, 242, 244, 1);
    overflow: hidden;
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI*/
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI";
}

.bg-light {
    background-color: #fff !important;
}


.navbar-top {
    height: 56px;
}

.navbar-top .navbar-brand img, .navbar-brand img {
    height: 36px;
    padding: 4px;
}

.navbar-top .navbar-brand, .navbar-brand {
    margin-right: 8px;
}

.app-nav-user {
    min-width: 200px;
    text-align: right;
    font-size: 14px;
    margin-top: -5px;
}

.app-nav-user::after {
    border: none;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.bg-app-primary {
    background-color: rgba(63, 78, 99, 1);
}

.text-app-title {
    color: rgb(0, 146, 63);
}

.text-bold {
    font-weight: bold;
}

.text-medium {
    font-size: medium;
}

.text-small {
    font-size: small;
}

.bg-app-secondary {
    background-color: rgba(225, 244, 236, 1);
}

.bg-app-tertiary {
    background-color: #f3f3f3;
}

.text-app-primary {
    background-color: #F8C300;
}

a, a:hover, a:visited {
    color: rgb(24, 167, 107);
}

.btn-app-primary {
    background-color: rgb(24, 167, 107);
    color: #fff;
}

.btn-app-primary:hover {
    background-color: rgb(17, 148, 93);
    color: #fff;
}

.sidebar {
    min-width: 250px;
    max-width: 250px;
    height: calc(100vh - 6px);
    margin-top: -56px;
    padding-top: 56px;
    color: #fff;
    transition: all 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar.active {
    margin-left: -250px;
}

.sidebar .sidebar-header {
    padding: 20px;
    background: rgba(63, 78, 99, 1);
}

.sidebar ul.components {
    padding: 10px 0;
    border-bottom: 1px solid rgba(63, 78, 99, 1);
}

.sidebar ul p {
    color: #fff;
    padding: 10px;
}

.sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

.sidebar ul li a:hover,
.sidebar .sidebar-group .sidebar-mi:hover {
    color: rgba(63, 78, 99, 1);
    background: #fff;
}

.sidebar ul li.active > a, .sidebar ul a[aria-expanded="true"] {
    color: #fff;
    background: rgba(63, 78, 99, 1);
}

.sidebar ul li a {
    /* font-size: 0.9em !important; */
    padding-left: 16px !important;
    color: white;
    background: rgba(63, 78, 99, 1);
}

.sidebar ul li a:hover {
    text-decoration: none;
}

.sidebar > ul > li {
    margin-top: 8px;
}

.sidebar ul h5 {
    padding-left: 20px;
}

.sidebar-group > a {
    font-weight: bold;
}

.sidebar-mi > .icon {
    font-size: 24px;
    width: 24px;
    margin-bottom: -4px;
    margin-right: 5px;
}

.sidebar-mi {
    vertical-align: text-top;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}

.sidebar-mi.active,
.sidebar-group-toggle.active {
    color: #F8C300 !important;
}

.sidebar div.toggle {
    background: none;
    border: none;
    width: 90%;
    margin: 0 auto;
    display: block;
    padding: 3px;
    margin-top: 5px;
    cursor: pointer;
}

.sidebar div.toggle div {
    border: 1px solid #999;
    border-radius: 1px;
    margin-bottom: 2px;
}

.sidebar-group > a > .icon {
    display: none;
}

.sidebar .sidebar-group .sidebar-mi {
    background: rgb(92, 105, 124);
}

.minified .sidebar {
    min-width: 64px;
    max-width: 84px;
}

.minified .sidebar .sidebar-mi > .label {
    display: none;
}

.minified .sidebar .sidebar-group .label {
    display: none;
}

.minified .sidebar .sidebar-mi > .icon {
    /* font-size: 26px;
    width: 26px; */
}

.minified .sidebar .sidebar-group > a > .icon {
    /* font-size: 26px;
    width: 26px; */
    display: unset;
}

.minified .sidebar ul li a {
    padding-left: 16px !important;
}

.app-content-container {
    position: relative;
    width: calc(100% - 200px);
    height: calc(100vh - 62px);
    overflow-y: auto;
    overflow-x: hidden;
}

.app-content {
    /*position: relative;*/
    /*overflow-y: auto;*/
    margin: 8px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    /*width: calc(100% - 250px);*/
    min-height: calc(100vh - 76px - 2px);
    /*max-height: calc(100vh - 6px);*/
    /*height: 100%;*/
    transition: width;
    transition-duration: 300ms;
    transition-timing-function: ease;
}

.minified .app-content-container {
    width: calc(100% - 72px);
}

.minified .app-content {
    /*width: calc(100% - 64px);*/
}

.k-grid td {
    /* overwrite kendo bootstrap, to make equal header*/
    padding: .4em .6em;
    text-overflow: clip;
}

#advanced-search-toggle {
    font-size: small;
    display: inline-block;
    margin-top: 8px;
}

.advanced-search {
    border-radius: 8px;
    padding: 12px;
}

.grid-box {
    margin-top: 12px;
    /*height: 100%;*/
}

.input-group.clear .input-group-append .input-group-text {
    background: transparent;
    color: #aaa;
    border-left: none;
}

.input-group.clear input {
    border-right: none;
}

.form-label {
    font-size: small;
    font-weight: bold;
    color: #666;
    display: block;
}

.search-box .form-label {
    color: #999;
}

.search-box .form-control {
    font-size: smaller;
}

.search-box .k-dropdown.form-control .k-input {
    margin-top: -3px;
}

.k-dropdown .k-dropdown-wrap {
    background-color: #fff;
}

.k-state-disabled, .k-widget[disabled] {
    background-color: #e9ecef !important;
    opacity: 0.9;
}

.form-group > div > button {
    margin-left: 4px;
    margin-right: 4px;
}

.modal-header .modal-title {
    font-weight: normal;
}

.btn-default {
    border: 1px solid #ddd;
}

.form-control {
    padding: .3rem .5rem;
}

.form-control:disabled, .form-control[readonly] {
    opacity: 0.9;
}

.k-state-disabled .form-control:disabled, .k-state-disabled .form-control[readonly] {
    opacity: 1;
}

.btn-group-xs > .btn, .btn-xs {
    padding: .29rem .33rem;
    font-size: .700rem;
    line-height: 1;
    border-radius: .1rem;
    min-width: 10px;
}

.modal-body {
    padding: 1.5rem;
}

.modal-responsive {
    max-width: calc(100vw - 56px);
}

.k-datepicker .k-input {
    font-size: unset;
    height: 2rem !important;
}

.k-datepicker.k-widget.form-control .k-input {
    padding-left: 0px;
    padding-right: 24px;
}

.k-datepicker .k-select {
    padding-left: 4px;
    padding-right: 4px;
}

.page-title {
    font-size: larger;
    margin-left: 3px;
    margin-bottom: 15px;
}

.k-list .k-item.k-state-focused.k-state-selected,
.k-list-optionlabel.k-state-selected {
    border: none;
    box-shadow: none;
    background-color: rgb(40, 173, 118);
}

.advanced-search .col-md-1,
.advanced-search .col-md-2,
.advanced-search .col-md-3,
.advanced-search .col-md-4,
.advanced-search .col-md-5,
.advanced-search .col-md-6,
.advanced-search .col-md-7,
.advanced-search .col-md-8,
.advanced-search .col-md-9,
.advanced-search .col-md-10,
.advanced-search .col-md-11,
.advanced-search .col-md-12 {
    padding-left: 3px;
    padding-right: 3px;
}

.advanced-search .form-label {
    font-size: x-small;
}

.advanced-search > .row {
    margin-left: 0px;
    margin-right: 0px;
}

.form-group .row.col-md-12 {
    padding-left: 9px;
    padding-right: 9px;
}

.form-box {
    background-color: rgba(225, 244, 236, 1);
    padding: 8px;
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 10px;
}

.form-box .row {
    margin-top: 4px;
    margin-bottom: 0px;
}

.form-box .btn-form-box {
    float: right;
}

.k-loading-image {
    color: rgb(40, 173, 118);
}

input[type=checkbox].form-control {
    width: 16px;
    height: 16px;
}

.form-control.inline {
    display: inline-block;
}

.index-control {
    text-align: right;
}

.sidebar > ul:first-child > li {
    margin-top: 0px;
}

.modal-fs {
    max-width: calc(100vw - 10px);
    width: calc(100vw - 10px);
    max-height: calc(100vh - 10px);
    height: calc(100vh - 10px);
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.modal-fs .modal-content {
    height: calc(100vh - 10px);
    overflow-y: auto;
    overflow-x: hidden;
}

.img-preview {
    padding: 8px;
    background: #EEE;
    border-radius: 8px;
    margin: 10px;
    text-align: center;
}

.img-preview img {
    max-width: 100%;
    max-height: 400px;
}

.img-preview .btn-delete-image {
    float: left;
}

@media only screen and (max-width: 600px) {
    #advanced-search-box {
        margin-top: 15px;
    }

    .index-control {
        text-align: center;
    }

    .index-advanced {
        text-align: center;
        margin-bottom: 10px;
    }

    .sidebar {
        position: absolute;
        z-index: 999;
        padding-top: 0px;
        margin-top: 0px;
        top: 0px;
        min-height: 0px;
        height: 100%;
        overflow-y: auto;
    }

    .sidebar ul li a:hover, .sidebar .sidebar-group .sidebar-mi:hover {
        color: rgb(255, 255, 255);
        background: rgba(63, 78, 99, 1);
    }

    .minified .sidebar {
        height: 36px;
        left: 0px;
        width: 36px;
        min-width: 0px;
        max-width: unset;
        overflow-y: hidden;
        overflow-x: hidden;
        border-radius: 18px;
        top: 13px;
        left: 16px;
    }

    .minified .sidebar a.sidebar-mi {
        font-size: small;
        padding: 6px;
        padding-left: 6px !important;
    }

    .app-content-container,
    .minified .app-content-container {
        width: calc(100%);
    }

    .app-content,
    .minified .app-content {
        /*width: calc(100% - 16px);*/
    }

    .navbar-brand {
        margin-left: 45px;
    }
}

.modal-grid .k-grid-content {
    max-height: 300px;
}

#mdlLoading {
    background-color: rgba(0, 0, 0, 0.5)
}

#mainGrid {
    /*height: calc(100vh - 225px);*/
    /*margin: 0;*/
    /*padding: 0;*/
    /*border-width: 0;*/
    /*height: 100%; !* DO NOT USE !important for setting the Grid height! *!*/
    min-height: 400px;
}

/*.k-grid .k-grid-content {*/
/*    overflow: hidden;*/
/*}*/

.k-multiselect-wrap .k-button {
    padding-right: 20px;
}

/* fixing modal scroll */
.modal {
    overflow: auto !important;
}

.k-ff { overflow: inherit !important;}

.k-grid-content {
    min-height: 100px;
}