body {
    font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
}

html {
    height: 100%;
}

/*responsive*/
@media (min-width: 992px) {
    .flex-row {
        display: flex;
    }
}

.k-widget.k-window {
    max-width: 1200px !important;
    max-height: 900px !important;
    left: 0 !important;
    /*top: 0 !important;*/
    right: 0 !important;
    /*bottom: 0px !important;*/
    margin: auto !important;
}

/*LOGIN*/
body.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-image: linear-gradient(#2899d5, #174972);
}

    body.login-body h3 {
        text-align: center;
    }

.k-grid-filter.k-state-active {
    background: #D48816 !important;
    border: 1px solid #D48816 !important;
}

body.login-body .login-box-wrapper {
    width: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

body.login-body .left-side,
body.login-body .right-side {
    width: 25px;
    height: 360px;
    background-color: #d5f0fb;
}

body.login-body .left-side {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

body.login-body .right-side {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

body.login-body .login-box {
    background-color: white;
    padding: 60px 40px;
    width: 350px;
    box-sizing: border-box;
    border-radius: 7px;
    text-align: center;
}

    body.login-body .login-box input,
    body.login-body .login-box select {
        border-radius: 20px !important;
        border-color: lightgray;
        padding-left: 20px;
        font-style: italic;
        width: 100% !important;
        height: 35px;
        padding: 10px 20px;
    }

body.login-body .btn-login {
    width: 100%;
    background-color: #2899d5;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 20px !important;
    box-shadow: 5px 5px 10px -6px #2899d5;
    border: solid 1px #2899d5;
    margin: 10px 0;
    letter-spacing: 2px;
    font-weight: bold;
}

    body.login-body .btn-login:hover {
        background-color: white;
        color: #2899d5;
        transition: all 0.2s;
    }

body.login-body .login-footer {
    background-color: white;
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
}

body.login-body .form-group {
    margin: 10px 0;
}

/*SIDEBAR & NAVBAR*/
.navbar {
    border: none;
    padding-right: 0;
    height: 52px;
}

.navbar-blue {
    background-color: #2899d5;
}

/*.navbar-header {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); }*/
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
    background-color: #0065a2 !important;
}

.navbar-brand {
    background-color: #0065a2 !important;
    padding: 10px 20px;
    height: 60px;
    width: 100%;
}

    .navbar-brand img.logo-on-mobile,
    .navbar-brand .logo-on-mobile {
        margin: 5px auto;
        height: 32px;
    }

    .navbar-brand > img.logo-on-desktop {
        height: auto;
        position: absolute;
        top: -2px;
        z-index: 100;
    }


.sidebar {
    /*box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);*/
    /*background: linear-gradient(180deg, #174972 0%, #0971b7 35%, #2899d5 100%);*/
    background: #0065a2;
    background-attachment: fixed;
}

.sidebar-category {
    margin-top: 5px;
}

.sidebar-fixed .sidebar-content::-webkit-scrollbar {
    display: none;
}

.navigation > li > a {
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: auto;
    font-weight: normal;
}

.navigation li a > i {
    width: 20px;
    font-size: 11px;
    margin-right: 5px;
}

.navigation > li ul li a {
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 50px;
    min-height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navigation > li.active > a, .navigation > li.active > a:hover, .navigation > li.active > a:focus {
    background-color: #2899d5 !important;
    color: #fff;
}

.sidebar-xs .sidebar-main .navigation > li > a > i {
    margin-left: 15px;
}

.navbar-nav {
    margin-left: 0;
}

.navbar-nav > li > a {
    padding: 18px 20px;
}

.navbar-nav > li.dropdown > a {
    padding: 18px 15px;
}

.navbar-nav > li > a > .label,
.navbar-nav > li > a > .badge {
    top: 5px;
}

.nav > li.select-wrapper {
    display: flex;
    align-items: center;
    height: 52px;
    margin-left: 20px;
}

    .nav > li.select-wrapper select {
        height: 30px;
        width: 140px;
        -webkit-appearance: none;
        background-image: url("../../../images/icon_arrow_down.png");
        background-repeat: no-repeat;
        background-size: 12px;
        background-position: 120px center;
    }

.text-dark {
    color: #6d6e71;
}

select {
    -webkit-appearance: none;
    background-image: url("../../../images/icon_arrow_down.png") !important;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 97% center;
}

.navigation li > .has-ul:after {
    transform: rotate(90deg);
}

.navigation li.active > .has-ul:after {
    transform: rotate(270deg);
}


.nav > li.dropdown-user > a {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-user > a > span > span.name {
    font-size: 12px;
    line-height: normal
}

.dropdown-user > a > span > span.welcome {
    font-size: 11px;
    color: #f1f1f1;
    font-style: italic;
    display: block;
    line-height: normal
}

.dropdown:last-child {
    background-color: #fbb040;
}

.dropdown-heading > span {
    font-weight: 600;
}

.navbar-nav > li > a > .badge {
    border: solid 1px white;
}

.form-control {
    border-radius: 5px;
}

.rotate180 {
    transform: rotate(180deg);
}

.navbar-right {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    /*margin-right: 10px;
    margin-bottom: 0;*/
    align-items: center;
    justify-content: flex-end;
}

    .navbar-right .dropdown-menu {
        /*top: 50px;*/
        border-radius: 0;
        width: 300px;
        left: auto;
        right: 0;
    }

    .navbar-right .dropdown-heading {
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navbar-right .dropdown-body {
        padding: 15px;
        max-height: 300px;
        overflow-y: auto;
    }

        .navbar-right .dropdown-body .media {
            padding: 0;
            display: flex;
            justify-content: space-between;
        }

        .navbar-right .dropdown-body .media-right {
            display: flex;
        }

            .navbar-right .dropdown-body .media-right .badge {
                position: static;
                background-color: lightgray;
            }

    .navbar-right .dropdown-footer {
        margin-top: 10px;
    }

    .navbar-right > li {
        display: inline-block;
        float: left;
        height: 52px;
    }

        .navbar-right > li > a {
            color: white;
            display: inline-block;
            padding: 18px 15px;
        }

            .navbar-right > li > a:hover {
                background-color: rgba(0, 0, 0, 0.1);
                transition: all 0.3s;
            }

        .navbar-right > li.show {
            display: inline-block !important;
        }

        .navbar-right > li.dropdown-user {
            line-height: normal;
        }

            .navbar-right > li.dropdown-user > a {
                display: flex;
                align-items: center;
                height: 100%;
                padding: 15px;
            }

            .navbar-right > li.dropdown-user .dropdown-menu {
                top: 50px;
                width: 200px;
            }

    .navbar-right .dropdown-toggle img {
        max-height: 30px;
        /*margin-top: -2.5px;
    margin-right: 5px;*/
        border-radius: 50%;
    }

    .navbar-right .badge {
        position: absolute;
        top: 5px;
        right: 5px;
        border: solid 1px white;
    }

/*CONTENT*/
.k-loading-mask .k-loading-image {
    background-image: url("../../images/roll.gif");
}

.k-loading-image {
    background-image: url("../../images/roll.gif");
}

.page-header-default {
    box-shadow: none;
    border-bottom: none;
}

.content > .panel > .panel-body > form > select {
    display: none;
}

.dropdown.dropdown-user .dropdown-toggle {
    height: 52px;
}

.page-header .breadcrumb-line {
    border: none;
    margin-top: 3px;
    z-index: 0 !important;
    background-color: white !important;
}

    .page-header .breadcrumb-line ul.breadcrumb {
        padding: 10px 0 0 0;
        font-size: 12px;
    }

div.page-title {
    padding: 0 0 5px 0;
}

    div.page-title h4 {
        color: #2899d5;
        font-weight: 600;
        font-size: 16px;
    }

.form-group::before,
.form-group::after {
    clear: both;
    content: " ";
    display: table;
}

/*GRID style*/

.k-grid.k-widget {
    border: none;
}
/*settingan grid by hidayat */
.k-grid tbody .k-button.k-grid-delete {
    background-color: #F44336 !important;
}
.count-draft {
    margin-bottom: 0px !important;
    font-weight: normal;
    font-size: 13px;
}
}
.k-item {
    width: 100% !important;
    white-space: pre !important;
    text-overflow: ellipsis !important;
}

k-resize-handle {
    width: 0px;
}


.k-grid tr td,
.k-pivot-layout
.k-grid tr td {
    padding: 12px 20px;
    font-size: 13px;
    border-left: 0px;
    border-right: 1px solid #eee;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 220px;
}

.k-grid-header th.k-header > .k-link {
    color: #ffffff;
    font-weight: normal;
    font-size: 14px;
    white-space: nowrap;
    overflow: visible !important;
}

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

.k-grid-content {
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
    height: auto !important;
    min-height: 50px;
    max-height: 900px;
}

.k-grid tr th.action-header,
.k-grid tr td.action-col, .k-grid tr td.k-hierarchy-cell, .k-grid tr th.k-hierarchy-cell { /*settingan td content action*/
    border-right: none !important;
    text-align: center;
    min-width: 70px !important;
    width: 70px !important;
}

.k-grid-header th.action-header.padding-left-10 {
    padding-left: 10px !important;
}

.k-grid-header th.k-header {
    background-color: #FBB040;
    border: none;
    color: #ffffff;
    border-right: 1px solid #e4a530;
    min-width: 100px;
    padding-left: 11px !important;
    font-size: 14px;
    width: 220px;
}
/*settingan grid by hidayat */
.k-grid-header th.action-header.k-header,
.k-grid-header th.k-hierarchy-cell {
    min-width: 70px !important;
    width: 70px !important;
}

.k-grid-header th.action-header.k-header {
    padding: .786em .0em !important;
    min-width: 70px !important;
    width: 70px !important;
}

.panel-collapse .panel-body .k-grid-header th.k-header {
    background-color: #53ADDD;
    border: none;
    border-left-width: medium;
    color: #58595B;
}

.k-grid-filter .k-icon {
    color: #fff;
}



.k-grid tr td .act-btn i {
    font-size: 12px;
}

.k-grid tr td a.btn.btn-xs {
    padding: 3px 15px;
}

.k-grid-pager > .k-link.k-pager-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.k-pager-wrap {
    background-color: #ffffff;
}

.k-pager-numbers .k-state-selected {
    border: none;
    background-color: #fbb040 !important;
    margin-top: 0px !important;
    padding-top: 0px !important;
    border-radius: 5px;
}

tr.k-alt.k-state-selected, tr.k-state-selected {
    background: #FBB040 !important;
    border-color: #fff !important;
    color : #000 !important;
}

.k-grid td.k-state-selected, .k-grid tr.k-state-selected > td {
    border-color: #eee !important;
}

.k-pager-wrap {
    border: none;
}

    .k-pager-wrap .k-link {
        border: none;
    }

        .k-pager-wrap .k-link:hover {
            border: none;
            background-color: #f1f2f2;
            margin-top: 0px;
            padding-top: 0;
            border-radius: 5px;
        }

.k-textbox {
    width: 100% !important;
}

.k-pager-info {
    float: right;
    color: #000;
    padding: 7px 12px;
    font-size: 13px;
}

.k-pager-refresh,
.k-pager-refresh
.k-link {
    color: #000;
    padding-top: 10px;
    font-size: 13px;
}

    .k-pager-refresh
    .k-link:hover {
        border: none;
        background-color: unset;
        margin-top: 0;
        padding-top: 10px;
        border-radius: 0;
    }

.k-filter-menu {
    font-size: 14px !important;
}

.k-dropdown .k-state-default, .k-dropdown .k-state-disabled {
    height: 36px;
    background-color: #fff !important;
    border-radius: 5px;
    border: 1px solid #f5f5f5 !important;
    padding: 1px 0px;
}

.k-i-arrow-60-down::before {
    content: "\e015" !important;
}

.k-i-arrow-60-up::before {
    content: "\e013" !important;
}

.k-dropdown-wrap .k-select {
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: white;
}

.k-action-buttons {
    font-size: 12px;
}

.k-grid-header .k-filter-row,
.k-grid-header .k-filter-row th,
.k-grid-header .k-filter-row:hover,
.k-grid-header .k-filter-row th:hover {
    background: #FBB040;
}

    .k-grid-header .k-filter-row th {
        border: none;
    }

th span.k-filtercell {
    font-size: 12px;
}

    th span.k-filtercell .k-autocomplete {
        border-radius: 5px;
    }

        th span.k-filtercell .k-autocomplete,
        th span.k-filtercell .k-autocomplete:hover,
        th span.k-filtercell .k-autocomplete:focus {
            box-shadow: none;
            outline: none;
            border-radius: 5px;
        }

    th span.k-filtercell button {
        width: auto;
        height: auto;
    }

    th span.k-filtercell button {
        border-radius: 0px 5px 5px 0px;
        background: #53ADDD;
        color: #fff;
        border-color: #53ADDD;
    }

        th span.k-filtercell button:hover {
            border-radius: 0px 5px 5px 0px !important;
            background: #53ADDD;
            color: #fff;
            border-color: #53ADDD;
            box-shadow: none;
            outline: none;
            border-radius: 5px;
        }

        th span.k-filtercell button span.k-icon {
            font-size: 13px;
        }

a.btn.btn-link i.icon-plus-circle2 {
    color: #2899D5;
}

.form-group {
    margin-bottom: 10px !important;
    ;
    position: relative;
}

.panel-warning > .panel-heading {
    color: #fff;
    background-color: #FBB040;
    border-color: #FBB040;
}

    .panel-warning > .panel-heading + .panel-collapse > .panel-body {
        border-top-color: #FBB040;
    }

.btn-warning {
    color: #fff;
    background-color: #FBB040;
    border-color: #FBB040;
}

    .btn-warning:focus, .btn-warning.focus, .btn-warning:hover {
        background-color: #FBB040;
        border-color: #FBB040;
    }

.flex-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.k-invalid-msg {
    color: #e74c3c;
    display: inline;
    font-size: 13px;
}

.input-group {
    width: 100%;
}

    .input-group .k-dropdown,
    .k-dropdown {
        width: 100% !important;
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
        ;
    }

.k-datepicker, .k-dropdown {
    background: none !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
}

    .k-datepicker .k-input {
        background: none !important;
        border-radius: 5px !important;
    }

    .k-datepicker .k-select {
        border: 0 !important;
    }

        .k-datepicker .k-select span.k-icon {
            padding: 8px 12px 8px 12px;
        }

    .k-datepicker .k-state-hover,
    .k-datepicker .k-state-focused,
    .k-datepicker .k-state-default,
    .k-datepicker .k-state-border-down,
    .k-dropdown .k-state-hover,
    .k-dropdown .k-state-focused,
    .k-dropdown .k-state-default,
    .k-dropdown .k-state-border-down {
        background: none !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 5px !important;
    }

.k-autocomplete, .k-dropdown-wrap.k-state-default, .k-numeric-wrap.k-state-default, .k-picker-wrap.k-state-default {
    background-position: 50% 50%;
    color: #444;
    background-color: none !important;
    ;
    border-color: #ddd !important;
    border-radius: 5px !important;
}


/* Eka */
body .w500 {
    max-width: 600px !important;
    left: 0 !important;
    /*top: 0 !important;*/
    right: 0 !important;
    /*bottom: 0px !important;*/
    margin: auto !important;
}

body .k-widget * {
    box-sizing: border-box;
}

.select-wrapper .form-control {
    border: none !important;
}

.k-filter-menu-container label input[type="radio"] {
    margin: 4px 10px 0px 5px;
    top: 3px;
    position: relative;
}

.k-grid .k-alt {
    background-color: #f7f7f7 !important;
}

.k-filter-help-text {
    font-size: 13px;
    padding: 10px 0px;
}

.k-widget span span {
    font-size: 13px;
}

.k-pager-wrap {
    padding-top: 15px;
}

.k-widget {
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
}

.k-pager-numbers .k-state-selected {
    color: #fff;
}

.general-table-form a.btn-link,
.form-group a.btn-link {
    padding: 7px 0px 5px 0px;
    font-weight: 600;
}

    .general-table-form a.btn-link i.icon-plus-circle2,
    .form-group a.btn-link i.icon-plus-circle2 {
        font-size: 24px !important;
    }

form .general-table-form.btn-link > a.icon-plus2:before {
    top: 4px;
    position: relative;
    font-size: 15px;
}

.content-wrapper .panel {
    border-radius: 7px;
    box-shadow: none;
    border: none;
}

.label-wrapper label {
    font-weight: normal;
    font-size: 13px;
}

.k-checkbox:checked + .k-checkbox-label:before, .k-checkbox:checked + .k-checkbox-label:hover:before, .k-checkbox:checked:hover + .k-checkbox-label:before {
    border-color: #2899d5;
    height: 20px !important;
    width: 20px;
    border-radius: 2px;
    padding-top: 2px;
}

label.k-checkbox-label {
    margin-bottom: 24px;
}

.k-grid tr td .act-btn i.icon-trash {
    color: red;
}

span.required-field {
    color: red;
    font-size: 12px
}

.k-grid tr td .act-btn i {
    font-size: 13px;
}

.k-window .k-window-titlebar.k-header {
    background-color: #fff !important;
    border-radius: 10px !important;
    text-align: center;
    padding: 20px 0px;
}

.window-body.form-group.control-wrapper, .control-wrapper {
    box-sizing: none !important;
}

.k-window-title {
    color: #2899d5;
    font-weight: normal;
    font-size: 15px;
}

.k-window {
    border-radius: 10px;
}

.k-window-actions a span.k-i-close:before {
    color: red;
    font-size: 20px;
}

.k-window-actions a:hover {
    background: none !important;
}

.k-window-action {
    margin-top: 8px;
}

.window-body .form-group .label-wrapper {
    float: left;
}

.window-body .form-group .control-wrapper {
    float: right;
    width: 75%;
}

    .window-body .form-group .control-wrapper input {
        border-color: #ddd;
    }

        .window-body .form-group .control-wrapper input.k-textbox {
            padding: 5px 10px !important;
            text-indent: unset !important;
        }

    .window-body .form-group .control-wrapper textarea {
        width: 100% !important;
    }

input.k-textbox, input.k-textbox:hover {
    box-shadow: none !important;
}

.btn-wrapper {
    text-align: center;
    margin-top: 20px;
}

    .btn-wrapper .btn, .form-group > button.btn {
        min-width: 100px;
        border-radius: 20px;
        padding: 7px 18px;
        margin: 0 5px;
        height: 36px;
    }

#btnSave {
    background-color: #2899d5 !important;
}

.k-window-content {
    border-radius: 10px !important
}

.content-wrapper .content {
    padding: 0 20px 20px 20px;
}

    .content-wrapper .content section {
        background-color: white;
        padding: 15px;
        border-radius: 7px;
    }

.window-body .label-wrapper {
    min-width: 200px;
    font-size: 12px;
}

    .window-body .label-wrapper label {
        font-weight: 600;
        margin-bottom: 0;
    }

.window-body .colon {
    float: left;
}

#MainContentSPA .content section .window-body .form-group .control-wrapper {
    padding-left: 10px;
    width: auto;
    float: left;
}

.action-col a.grid-link, .k-grid tr td a.btn.btn-xs {
    padding: 7px 15px;
    border-radius: 50px;
    background-color: #2899d5 !important;
    border-color: #2899d5 !important;
    color: #fff;
}

.action-col a:hover.grid-link, .action-col a:focus.grid-link, .k-grid tr td a:hover.btn.btn-xs, .k-grid tr td a:focus.btn.btn-xs {
    background-color: #2899d5 !important;
    border-color: #2899d5 !important;
    color: #fff !important;
}

.k-grid tr td .act-btn i {
    color: #2899d5;
}

.k-popup {
    border-radius: 5px !important;
}

.grid-add-btn > a {
    display: inline-block;
    color: white;
    background-color: #2899d5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    margin-right: 7px;
}

.action-wrapper .grid-action-btn {
    margin-left: 0px !important;
}

.icon-plus2:before {
    content: "\e9b8";
    top: 8px;
    position: relative;
}

.grid-add-btn > span {
    font-weight: bold;
    top: 6px;
    position: relative;
}

.grid-add-btn, .grid-action-btn {
    padding: 5px 0 15px 0;
    margin-right: 15px;
}

    .grid-action-btn .btn {
        margin-right: 15px;
    }

        .grid-action-btn .btn i,
        .grid-action-btn .btn i:before {
            color: #fff;
        }

.k-checkbox-label:before {
    border-color: #ddd !important;
    border-radius: 5px !important;
}

.k-menu .k-item > .k-link {
    font-size: 13px;
    border-bottom: 1px solid #ddd;
    font-weight: normal;
}

.k-link.k-menu-link input[type="checkbox"] {
    margin-right: 8px;
}

.k-column-menu .k-item {
    border: none !important;
}

.k-grid-header .k-i-sort-asc-sm, .k-grid-header .k-i-sort-desc-sm, .k-grid-header .k-sort-order {
    color: #fff !important;
}

.k-link.k-menu-link {
    vertical-align: middle;
    display: inline-flex;
}

.k-grid tr td.k-hierarchy-cell {
    text-align: center;
}

.k-grid table {
    border-left: 1px solid #eee;
}

#grid {
}

.k-i-expand:before {
    color: green;
}

.window-body .form-group {
    display: flex;
}

/*accordion*/
.collapsible-header {
    background-color: #ffffff;
    padding: 7px 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 9px;
    position: relative;
}

    .collapsible-header .collapsible-title {
        margin: 0;
        color: #000;
        font-weight: 600;
        font-size: 15px;
        position: relative;
    }

        .collapsible-header .collapsible-title:after {
            content: "\e9c5";
            font-family: "icomoon";
            display: inline-block;
            font-size: 25px;
            width: 16px;
            color: #ddd;
            line-height: 1;
            position: absolute;
            right: 5px;
            top: 0;
            transition: all 0.3s;
        }

        .collapsible-header .collapsible-title.rot180:after {
            transform: rotate(180deg);
        }

        .collapsible-header .collapsible-title a {
            color: #333;
            font-weight: 500;
        }

.collapsible-body {
    padding: 20px 15px 15px 15px;
    display: none;
}

    .collapsible-body .swap-btn .btn-warning,
    .split-grid-container .swap-btn .btn-warning {
        padding: 5px 10px;
        border-radius: 20px;
    }

{
    /*background-color: #2899d5 !important;
    border-color: #2899d5 !important;*/
    padding: 5px 10px;
    border-radius: 20px;
}

.collapsible-body.in {
    display: block;
    /*Comment gara-gara bug Payroll No Payroll Process	290*/
    background: #f9f9f9;
    margin: -14px 0px 15px 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.collapsible-body .k-datepicker {
    background: white !important;
}

.collapsible-body .k-grid .k-header.k-grid-toolbar {
    background-color: #f9f9f9 !important;
}

/*Accordion with Panel*/
.panel.panel-warning {
    margin-bottom: 9px
}

    .panel.panel-warning .panel-heading {
        padding: 0px !important;
        background: transparent;
    }

        .panel.panel-warning .panel-heading .panel-title a {
            width: 100%;
            background-color: #ffffff;
            padding: 7px 15px;
            cursor: pointer;
            border: 1px solid #ddd;
            border-radius: 8px;
            color: #333;
            font-weight: 500;
            font-size: 15px;
            position: relative;
        }

.panel-group-control .panel-title > a:before {
    content: "\e9c6" !important;
    font-family: "icomoon" !important;
    display: inline-block !important;
    font-size: 25px !important;
    width: 16px !important;
    color: #ddd;
    line-height: 1;
    position: absolute;
    right: 15px !important;
    top: 40% !important;
    transition: all 0.3s;
}

.panel-group-control .panel-title > a.collapsed:before {
    content: '\e9c5' !important;
}

.panel-collapse.collapse.in {
    display: block;
    background: #f9f9f9;
    margin: -10px 0px 15px 0px;
    border-radius: 0px 0px 8px 8px;
    padding-top: 10px;
}

.panel-warning > .panel-heading + .panel-collapse > .panel-body {
    border-top: 0;
}


.window-body input.form-control {
    height: 35px;
    width: 100%;
}

.window-body .control-wrapper {
    width: calc(100% - 150px) !important;
    padding-left: 10px;
    /* height: 32px; */
    font-size: 12px;
}

.k-widget.k-dropdown {
    width: 100% !important;
    height: 36px !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 5px;
    margin-bottom: 5px !important;
}

span.k-datepicker {
    width: 100%;
    height: 35px;
    border-radius: 5px;
}

.width-500 {
    width: 500px;
}

label {
    margin-bottom: 7px;
    font-weight: normal;
    font-size: 13px;
}

span.k-datepicker input.form-control {
    border-right: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: white;
}

.k-picker-wrap.k-state-default > .k-select {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: solid 1px lightgray; */
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.k-picker-wrap.k-state-default {
    border: none !important;
}

.k-i-calendar:before {
    font-size: 16px;
}

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

.text-left {
    text-align: left !important;
    word-wrap: break-word;
}

.col-8 .control-btn .group-item {
}

.k-numerictextbox .k-select {
    border-radius: 10px;
    border-color: none;
}

.k-dropdown-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input {
    border-radius: 10px;
}

.k-autocomplete.k-state-focused, .k-dropdown-wrap.k-state-focused, .k-multiselect.k-header.k-state-focused, .k-numeric-wrap.k-state-focused, .k-picker-wrap.k-state-focused, .k-textbox:focus {
    box-shadow: none;
}

.k-multiselect.k-multiselect-clearable .k-multiselect-wrap {
    height: auto;
    border-radius: 5px;
    padding: 2px 30px 2px 2px;
    border-color: #ddd;
}

    .k-multiselect.k-multiselect-clearable .k-multiselect-wrap ul li {
        background: #2899d5;
        border-color: #2899d5;
        color: #fff;
        text-transform: capitalize;
    }

        .k-multiselect.k-multiselect-clearable .k-multiselect-wrap ul li.k-button.k-state-hover,
        .k-multiselect.k-multiselect-clearable .k-multiselect-wrap ul li:hover {
            background: #2899d5 !important;
            color: #fff !important;
            border-color: #2899d5 !important;
        }

        .k-multiselect.k-multiselect-clearable .k-multiselect-wrap ul li span.k-icon {
            top: 4px;
        }

.k-state-hover:hover {
    box-shadow: none;
}

.k-numeric-wrap.k-state-default {
    background-color: transparent;
}

.k-state-selected {
    background-color: #fff !important;
    border-color: #fff !important;
}

.k-numeric-wrap.k-state-focused > .k-select {
    background-color: #fff !important;
}

.k-dropdown-wrap.k-state-default {
    height: 36px;
}

.btn-secondary {
    background-color: #f0f0f0;
}

.btn-primary, .btn-primary:focus, .btn-primary.focus, .btn-primary {
    background-color: #2899d5 !important;
    border-color: #2899d5 !important;
    padding: 7px 20px;
    height: 36px;
    border-radius: 50px !important;
}

.btn-danger, .btn-danger:focus, .btn-danger.focus, .btn-danger:hover {
    border-radius: 50px !important;
}

.split-grid-container {
    display: flex;
    justify-content: space-between;
}

    .split-grid-container .grid-swap {
        display: flex;
        align-items: center;
    }

.k-grid td.k-state-selected:hover, .k-grid tr.k-state-selected:hover td {
    background-color: transparent !important;
}

.split-grid-container .swap-btn {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
}

.split-grid-container .grid-left,
.split-grid-container .grid-right {
    width: 45%;
}

    .split-grid-container .grid-left .k-grid-header th.k-header,
    .split-grid-container .grid-right .k-grid-header th.k-header {
        background-color: #53ADDD;
        border-right: 1px solid #31A1DD;
    }

.k-detail-row {
    background-color: #efefef;
}

.icon-eye:before {
    color: #1db51d;
}

.col-lg-6 button {
    margin: auto 7px auto 7px;
}

.col-lg-6 a.btn-primary i.icon-eye:before {
    color: #fff !important;
}

span.k-in a {
    font-size: 13px !important;
    color: #2899d5 !important;
    font-weight: 500 !important;
}

#divTreeView {
    border: none;
}

ul.k-treeview-lines li {
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    padding: 5px 30px 5px 30px !important;
}

    ul.k-treeview-lines li ul li {
        border-top: 1px solid #ddd !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-radius: 0px !important;
    }

    ul.k-treeview-lines li .k-bot span.k-i-expand:before {
        color: #2899d5 !important;
    }

    ul.k-treeview-lines li ul li span.k-i-expand:before {
        color: #2899d5 !important;
    }

.k-state-hover {
    background-color: #fff !important;
}

.nav-tabs.nav-tabs-bottom > li.active > a:after {
    background-color: #2899d5 !important;
    color: #2899d5;
    font-weight: 600;
}

.nav-tabs.nav-tabs-highlight > li.active > a {
    border-bottom: 2px solid #2899d5 !important;
    /* border: 2px solid; */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: #2899d5;
    font-weight: 600;
}

.nav-tabs.nav-tabs-bottom > li.active a {
    color: #2899d5 !important;
    font-weight: 600;
}

.padding-delete {
    padding: 0px 44px;
    background-color: #fff;
    color: red;
}

button:hover.padding-delete, button:focus.padding-delete, button:active.padding-delete {
    background-color: #fff;
    box-shadow: none;
}

button.padding-delete i.icon-trash:before {
    color: red;
}

.delete-width {
    padding: 0px 66px;
}

.k-grid tr td .form-group {
    margin-bottom: 0px !important
}

    .k-grid tr td.form-group.control-wrapper span .k-widget * {
        margin-bottom: 0px !important;
    }

.k-numerictextbox {
    margin-bottom: 0px !important;
    width: 100%;
    background-color: #fff !important;
    border-radius: 5px;
    padding: 0px;
}

.padding-left-100 {
    padding-left: 70px !important;
}

.padding-left-70 {
    padding-left: 70px !important;
}

.ai-start {
    align-items: flex-start;
}

.information-user-image img {
    width: 120px;
    border-radius: 20px;
}

.content > section {
    background-color: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 7px;
    /* box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); */
}

.d-flex {
    display: flex;
}

.information-tab-content.tab-content-bordered .tab-content:not([class*=bg-]) {
    border-color: #fff !important;
    padding: 20px;
}

.information-user-label {
    font-weight: 500
}

.information-user-wrapper, .myInformation-border {
    margin-bottom: 30px;
}

.k-calendar .k-month .k-link {
    font-size: 13px !important;
}

.k-calendar .k-month th {
    font-size: 13px !important;
    font-weight: 500;
}

.k-calendar > .k-header .k-link.k-state-hover {
    background-color: transparent !important;
}

.k-calendar .k-calendar-view {
    width: auto !important;
    height: auto !important;
    max-width: 20em !important;
    max-height: 22em !important;
}

.information-user-image {
    text-align: center;
}

.information-user-data h4 {
    font-weight: 500;
    font-size: 15px;
    text-align: center;
}

.information-user-data p.information-user-enumber {
    font-weight: 500;
    font-size: 14px;
    color: #2899d5;
    text-align: center
}

.information-user-joindate {
    font-style: italic;
}

.k-numerictextbox .k-select {
    background-color: transparent;
    border-color: transparent;
}

.k-checkbox:checked + .k-checkbox-label:before, .k-checkbox:checked + .k-checkbox-label:hover:before, .k-checkbox:checked:hover + .k-checkbox-label:before, .k-checkbox + .k-checkbox-label:before {
    height: 22px;
    width: 22px;
}

.checkbox-item {
    margin-bottom: 18px;
}

.act-btn {
    border-radius: 50px;
}



table tbody tr td a.btn {
    height: auto !important;
    padding: 7px 15px !important;
}

.text-dark {
    background-color: #fbfbfb;
}

.grid-action-btn {
    margin-left: 20px;
}

    .grid-action-btn button {
        border-radius: 50px;
    }

#BtnDownloadTemplate, #BtnImportTemplate {
    width: auto !important;
    border-radius: 50px !important;
    height: 36px !important;
    /*margin: 7px 0px 0px 8px;*/
}

.uploader {
    margin: 0px 0px 13px 13px !important;
}

.content > section > form > select {
    display: none;
}

section > form > .window-body {
    max-width: 500px;
}

.k-widget.k-window {
    max-height: 400px !important;
}

.clearDateTimePickerPopUp {
    position: absolute;
    margin-left: 8px;
}


.cb-group-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.cb-group {
    width: 25%;
    margin-bottom: 15px;
}

.k-item.k-state-default.k-tab-on-top.k-state-active {
    border-bottom: solid 2px #fbb040;
}

.k-tabstrip-items .k-item.k-state-hover {
    background: #fbb040 !important;
    border-color: #fbb040 !important;
}

.k-tabstrip-wrapper .k-dropdown-wrap .k-input {
    width: 140px;
}

.k-grid tr td.border-right-custom {
    border-right: 1px solid #eee !important;
}

.k-grid-header th.k-header.border-right-custom {
    border-right: 1px solid #e4a530 !important;
}

.k-dropdown .k-dropdown-wrap .k-input {
    display: inline-block;
    width: 90%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.width-500 .k-dropdown .k-dropdown-wrap .k-input {
    display: inline-block;
    width: 250px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.search-btn {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0px 5px 5px 0px !important;
    border: 1px solid #fbb040;
}

.off-btn {
    position: absolute;
    top: 0;
    right: 40;
    border-radius: 0px 5px 5px 0px !important;
    border: 1px solid #fbb040;
}

.search-icon-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 8.5px;
    padding-bottom: 8.5px;
    border-radius: 0px 5px 5px 0px !important;
    border: 1px solid #fbb040;
}

.clear-icon-btn {
    position: absolute;
    top: 0;
    right: 40;
    padding-top: 8.5px;
    padding-bottom: 8.5px;
    border-radius: 0px 0px 0px 0px !important;
    background-color: red;
    border: 1px solid #fbb040;
}

.flex-between-center,
.split-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.color-mark-wrapper {
    display: flex;
}

    .color-mark-wrapper .color-mark-item {
        margin-left: 10px;
        display: flex;
    }

        .color-mark-wrapper .color-mark-item:first-child {
            margin-left: 0;
        }

    .color-mark-wrapper .color-mark {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 5px;
        margin-left: 10px
    }

.row-reverse {
    flex-direction: row-reverse;
}

#formTimeline .link {
    margin-bottom: 15px;
}

#formTimeline ul {
    padding-left: 0;
    width: 100%;
    background-color: transparent !important;
}

    #formTimeline ul li {
        list-style: none;
    }

#formTimeline .submenu-activity-tracking {
    background-color: #f1f2f2 !important;
    padding: 15px;
}

#formTimeline ul.timeline::before, #formTimeline ul.timeline::after {
    display: none;
}

#formTimeline ul.timeline > li {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    width: 51%;
    position: relative;
    border-right: dashed 5px #bdc3c7;
}

    #formTimeline ul.timeline > li > i {
        font-size: 28px;
        background-color: #fbb040;
        position: absolute;
        right: -28px;
        top: 10px;
        display: inline-block;
        width: 50px;
        height: 50px;
        text-align: center;
        border-radius: 50%;
        line-height: 48px;
        color: white;
    }

    #formTimeline ul.timeline > li .timeline-panel {
        background-color: transparent;
        width: 99%;
        overflow-wrap: break-word;
    }

        #formTimeline ul.timeline > li .timeline-panel .timeline-heading {
            background-color: white;
            width: 90%;
            box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2);
            position: relative;
        }

            #formTimeline ul.timeline > li .timeline-panel .timeline-heading .timeline-title {
                background-color: #2899d5;
                color: white;
                margin: 0;
                padding: 10px;
            }

            #formTimeline ul.timeline > li .timeline-panel .timeline-heading p {
                padding: 10px;
                margin: 0;
            }

            #formTimeline ul.timeline > li .timeline-panel .timeline-heading::after {
                content: "";
                display: inline-block;
                position: absolute;
                right: -20px;
                top: 15px;
                border-top: solid 10px transparent;
                border-right: solid 10px transparent;
                border-bottom: solid 10px transparent;
                border-left: solid 10px #2899d5;
            }

#formTimeline ul.timeline .timeline-inverted {
    justify-content: flex-end;
    flex-direction: row;
    margin-left: 50.5%;
    width: 50%;
    border-right: none;
    border-left: dashed 5px #bdc3c7;
}

    #formTimeline ul.timeline .timeline-inverted .timeline-heading {
        width: 100%;
        margin-left: 10%;
    }

        #formTimeline ul.timeline .timeline-inverted .timeline-heading::after {
            display: none !important;
        }

        #formTimeline ul.timeline .timeline-inverted .timeline-heading::before {
            content: "";
            display: inline-block;
            position: absolute;
            left: -20px;
            top: 15px;
            border-top: solid 10px transparent;
            border-right: solid 10px #2899d5;
            border-bottom: solid 10px transparent;
            border-left: solid 10px transparent;
        }

    #formTimeline ul.timeline .timeline-inverted > i {
        left: -28px;
    }

#formTimeline .text-muted > i {
    margin-right: 5px;
}


.clearDateTimePickerPopUp {
    background-color: #fbb040;
    display: inline-block;
    padding: 11px 12px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 0px 5px 5px 0px;
    position: absolute;
    right: 0;
}

.clearTimePickerPopUp {
    background-color: #fbb040;
    display: inline-block;
    padding: 11px 12px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 0px 5px 5px 0px;
    position: absolute;
    right: 50;
}

    .clearDateTimePickerPopUp:hover {
        background-color: rgba(251, 176, 64, 0.6);
    }

.d-flex > .k-datepicker > .k-picker-wrap > .k-select {
    position: absolute;
    right: 40px;
}

.k-radio:checked + .k-radio-label:after {
    top: 2px !important;
    left: 2px !important;
}

.width-600 {
    width: 500px;
}


.check-box-group {
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    padding: 5px 0;
}

    .check-box-group .checkbox-item {
        width: 225px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


.information-user-image {
    text-align: center;
}

    .information-user-image img {
        width: 120px;
        border-radius: 20px;
    }

.information-user-enumber {
    background-color: #fbb040;
    padding: 10px;
    color: #fff !important;
    border-radius: 10px;
    text-align: center;
    margin: 10px auto;
    width: 200px;
}

.information-user-name {
    text-align: center;
    font-size: 17px;
    color: #2899d5;
}

.information-user-joindate {
    text-align: center;
    width: 100%;
    font-style: italic;
    color: gray;
    border-bottom: solid 2px lightgray;
    padding-bottom: 5px;
}

.information-user-label,
.information-user-label {
    color: #2899d5;
    font-weight: 600;
}



.k-widget.k-upload {
    border-radius: 5px;
    background-color: white;
    border: 1px solid lightgray;
}

.k-dropzone {
    padding: 5px;
}

.k-upload .k-upload-button {
    border-radius: 20px;
    padding: 4.5px 14px;
}

.k-upload-files {
    border: none !important;
}

.k-upload .k-clear-selected {
    padding: 8px !important;
    margin-top: 5px !important;
    border: none !important;
}

.k-upload .k-upload-selected {
    padding: 8px !important;
    margin-top: 5px !important;
    border: none !important;
    color: #fff !important;
    background: #fbb040 !important;
}

.k-upload-files.k-reset .k-file {
    border: none;
    background: none !important;
}

.k-file {
    border: none;
}

.k-button {
    background-color: #0971b7 !important;
    color: white;
}

    .k-button:hover {
        background-color: #2899d5 !important;
        border-color: #2899d5 !important;
        color: white;
    }


.k-header.k-grid-toolbar {
    background-color: transparent !important;
    border: none !important;
    padding-left: 0;
    padding: 5px 0 15px 0;
    margin-right: 15px;
}

    .k-header.k-grid-toolbar .k-grid-add {
        background-color: transparent !important;
        text-transform: capitalize;
    }

        .k-header.k-grid-toolbar .k-grid-add span.k-icon.k-i-plus {
            display: inline-block;
            color: white;
            background-color: #2899d5;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            margin-right: 7px;
        }

.k-grid-toolbar .k-button.k-grid-excel, .k-grid-toolbar .k-button.k-grid-pdf {
    background-color: #2899d5 !important;
    border-color: #2899d5 !important;
    padding: 7px 20px;
    height: 36px;
    border-radius: 50px !important;
    margin-right: 15px;
}

.k-display-column {
    flex-direction: column;
    align-items: stretch;
}

    .k-display-column button#btnBrowseVariable,
    .k-display-column button#btnSearch,
    .k-display-column button#btnOff,
    .w-100 textarea,
    button#btnBrowseVariable,
    textarea#FormulaPercentile {
        height: 73px;
        border-radius: 5px !important;
    }

.w-100 {
    width: 100%;
}

.control-btn .btn.btn-sm {
    border-radius: 20px;
}

.k-grid-edit-row td input, .k-grid-edit-row td input:focus,
.k-grid-edit-row td input:hover, tbody td input,
tbody td input:focus, tbody td input:hover {
    border-radius: 5px !important;
    height: 36px !important;
    border: 1px solid lightgray;
    padding: 4px 12px;
}

.k-grid tbody .k-button {
    border-radius: 20px;
    background-color: #2899d5 !important;
    color: #fff !important;
    text-transform: capitalize;
}

    .k-grid tbody .k-button.k-grid-edit,
    .k-grid tbody .k-button.k-grid-delete,
    .k-grid tbody .k-button.k-grid-update,
    .k-grid tbody .k-button.k-grid-cancel,
    .k-grid tbody .k-button.k-grid-deleteInline,
    .k-grid tbody .k-grid-close,
    .k-grid tbody .k-grid-showEmployee {
        margin: 0 0 0 5px !important;
        border: 0;
        padding: 4px 7px;
        font-size: 12px;
        box-shadow: none !important;
    }

input[type="file"] {
    width: 100%;
    height: 36px;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.5384616;
    color: #333333;
    border-radius: 5px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
}

input, textarea {
    border-radius: 5px !important;
}

    input[type="file"].file-input {
        cursor: pointer;
        display: block;
        filter: alpha(opacity=0);
        /*min-height: 100%;*/
        min-width: 100%;
        opacity: 0;
        position: absolute;
        right: 0;
        text-align: right;
        top: 0;
    }

.file-label {
    display: inline-block;
    width: 100%;
    padding: 7px 10px;
    border: solid 1px lightgray;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0;
}

    .file-label i {
        font-size: 14px;
        margin-right: 5px;
    }

.k-checkbox + .k-checkbox-label:after {
    content: "";
    position: absolute;
    border-radius: 5px !important;
    width: 20px;
    height: 20px;
    box-shadow: none !important;
    background: transparent !important;
}

.navbar-fixed-top .navbar-collapse {
    max-height: 52px !important;
}

.k-grid tr td.action-col {
    padding: 7px 0px !important;
}



.k-grid-header th.action-header.k-header input.k-checkbox {
    margin: 0px 2px !important;
}



tbody td input[type="checkbox"], tbody td input[type="checkbox"]:focus, tbody td input[type="checkbox"]:hover,
tbody td input.k-textbox, tbody td input.k-textbox:focus, tbody td input.k-textbox:hover {
    padding: 4px 0px !important;
}

.k-checkbox + .k-checkbox-label:active:after, .k-checkbox:active + .k-checkbox-label:after {
    background: transparent !important;
}

tbody td label {
    padding-top: 4px !important;
}

.k-filter-menu .k-filter-menu-container .k-action-buttons .k-button {
    background: #fff !important;
}

    .k-filter-menu .k-filter-menu-container .k-action-buttons .k-button:hover {
        background-color: #2899d5 !important;
        border-radius: 3px;
    }

.k-button.k-button-icontext.k-grid-add {
    border: none;
    color: #000 !important;
    width: 145px;
    margin: 0;
    padding: 0;
}

.k-display-block.k-editable {
    background: none;
}

table {
    background: #fff;
}

/*Calendar*/
.fc button {
    -moz-box-sizing: unset;
    -webkit-box-sizing: unset;
    box-sizing: border-box;
    border: none;
    position: relative !important;
    padding: 8px 16px !important;
    ;
    height: 34px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    background: #fbb040;
    color: #fff;
}

.fc-state-default {
    border: none !important;
    background-color: #fbb040 !important;
    color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

    .fc-state-default.fc-corner-left {
        border-top-left-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
    }

    .fc-state-default.fc-corner-right {
        border-top-right-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

.fc-right .fc-button-group .fc-state-default.fc-corner-left {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.fc-right .fc-button-group .fc-state-default.fc-corner-right {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    margin-right: 10px;
}

.fc-state-disabled {
    color: #333 !important;
    background-color: #E4E4E4 !important;
}

.fc-state-hover {
    color: #fff !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.fc-state-active,
.fc-state-down {
    background-color: #ccc !important;
    background-image: none !important;
    box-shadow: none !important;
}

.fc-icon {
    display: inline-block !important;
    height: auto !important;
    font-size: 20px !important;
    line-height: 18px !important;
    top: -0.3em !important;
    vertical-align: middle !important;
}

.fc-icon-left-single-arrow:after {
    content: "\2039";
    font-weight: 700 !important;
    font-size: 100% !important;
    top: -7% !important;
}

.fc-icon-right-single-arrow:after {
    content: "\203A";
    font-weight: 700 !important;
    font-size: 100% !important;
    top: -7% !important;
}

.fc .fc-toolbar .fc-right button {
    float: right;
}

.fc-right .fc-month-button {
    margin-right: 10px !important;
}

.fc th {
    padding: 12px 20px !important;
}

.fc-basic-view .fc-week-number, .fc-basic-view .fc-day-number {
    padding: 10px !important;
}

.fc-day-grid-event {
    margin: 0 5px 5px 5px !important;
    padding: 4px 8px !important;
}

.fc-event, .fc-event-dot {
    background-color: #2899d5 !important;
}

.fc-event {
    border: 1px solid #2899d5 !important;
    font-weight: normal !important;
    border-radius: 2px !important;
}

/* HIDE ARROW on INPUT NUMBER */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* SCROLLBAR CHART*/
.dragscroll {
    float: left;
    width: 1019px;
    overflow: scroll;
    height: 436px;
    margin-bottom: 50px;
    border-radius: 5px;
    background: #ffffff;
}

/*selectable pension period*/
.s-table .form-group.check {
    display: flex;
}

    .s-table .form-group.check .label-wrapper {
        min-width: 200px;
        font-size: 12px;
    }

.window-body .col-md-6 .control-wrapper .k-dropdown .k-dropdown-wrap .k-input {
    display: inline-block !important;
    width: 220px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.window-body .control-wrapper .k-dropdown .k-dropdown-wrap .k-input {
    display: inline-block !important;
    width: 250px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.window-body .col-md-6 .control-wrapper .w70 .k-dropdown .k-dropdown-wrap .k-input {
    width: 100% !important;
}

.w70 {
    width: 70% !important;
}

.w30 {
    width: 30% !important;
}

.w40 {
    width: 44% !important;
}

.w30 input::-webkit-outer-spin-button,
.w30 input::-webkit-inner-spin-button {
    -webkit-appearance: button;
    margin: 0;
}

.w30 input[type=number] {
    -moz-appearance: button;
}


/*STYLE NEW CHART*/
g.Directors rect,
g.MFJ rect,
g.HRs rect {
    fill: #fbb040;
    stroke-width: 1;
    stroke: #fbb040;
}

g.Directors text,
g.MFJ text,
g.HRs text {
    fill: #ffffff;
}

g.Devs rect,
g.Sales rect,
g rect {
    fill: #fff200;
    stroke-width: 1;
    stroke: #fff200;
}

g.link path {
    stroke-width: 2;
    stroke: #fbb040;
}


.notice {
    padding: 15px;
    background-color: #fafafa;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #2899d5;
}

.chart-dashboard .panel-heading {
    padding: 7px 15px;
    border: 1px solid #2899d5;
    background: #2899d5;
    color: #ffffff;
    border-radius: 5px 5px 0px 0px;
}

.chart-dashboard .panel-body {
    padding: 15px;
    border: 1px solid #2899d5;
    background: #ffffff;
    border-radius: 0px 0px 5px 5px;
    margin-bottom: 15px;
}

.chart-dashboard g.Devs rect, .chart-dashboard g.Sales rect, .chart-dashboard g rect {
    fill: none;
    stroke-width: none;
    stroke: none;
}

.chart-dashboard .atrition-rate .c3-axis.c3-axis-x .tick,
.chart-dashboard .employee-age .c3-axis.c3-axis-x .tick {
    visibility: hidden !important;
}

.chart-dashboard .reason-decline .c3-axis.c3-axis-y,
.chart-dashboard .reason-decline .c3-axis-x {
    visibility: hidden !important;
}

.chart-dashboard .reason-decline .c3-axis.c3-axis-x {
    visibility: visible !important;
}