/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

@font-face {
    font-family: "SF-UI-Display";
    src: url("fonts/SF-UI-Display-Black.otf");
}

@font-face {
    font-family: "SF-UI-Display";
    src: url("fonts/SF-UI-Display-Bold.otf");
    font-weight: bold;
}
@font-face {
    font-family: "SF-UI-Display";
    src: url("fonts/SF-UI-Display-Heavy.otf");
}
@font-face {
    font-family: "SF-UI-Display";
    src: url("fonts/SF-UI-Display-Light.otf");
    font-weight: 300;
}
@font-face {
    font-family: "SF-UI-Display";
    src: url("fonts/SF-UI-Display-Medium.otf");
}
@font-face {
    font-family: "SF-UI-Display";
    src: url("fonts/SF-UI-Display-Regular.otf");
    font-weight: normal;
}

@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-Bold 2.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-Bold.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-BoldItalic 2.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-BoldItalic 3.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-BoldItalic.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-Heavy.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-HeavyItalic.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-Light.otf");
    font-weight: 300;
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-LightItalic.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-Medium.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-MediumItalic.otf");
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-Regular.otf");
    font-weight: normal;
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-RegularItalic.otf");
    font-style:italic;
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-Semibold.otf");
    font-weight: bold;
}
@font-face {
    font-family: "SF-UI-Text";
    src: url("fonts/SF-UI-Text-SemiboldItalic.otf");
    font-style: italic;
    font-weight: bold;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

main {
    padding-top:0px;
    /*border: 1px solid rgba(0, 0, 0, 0.125);*/
}
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.k-button {
    color: #1E4D8C !important;
    background-color: #B8D4F8;
    /* border-color: #2EA2DB !important; */
    /* margin: 2px; */
    border-radius: 10px;
    border: none;
    padding: 10px 10px;
    font-weight: bold;
    font-size: 12px;
}
button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 40px;
    line-height: normal;
    font-size: 10pt;
    /*background-image: url("../img/backweb_login.png");
    background-repeat: no-repeat;
    background-size: 100% 80px;
    */
    font-family: "SF-UI-Display";
    background-color: #c6c6c63d;
    height: 100%;
}
.body-header {
    /*background-image: url("../img/backweb_login.png");
    background-repeat: no-repeat;
    background-size: 100% 80px;*/
    background-color: #fff;
}
.background-footer {
    background-image: url("../img/backweb_footer.png");
    background-repeat: no-repeat;
    background-size: 100% 50px;
    bottom: 0px;
    /*background-color: #FFCD00;*/
    width: 100%;
    height: 50px;
    /*border-top-left-radius: 40%;
    border-top-right-radius: 40%;*/
    position: absolute;
    z-index: -1
}
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* Set the fixed height of the footer here */
    height: 25px;
    line-height: 25px; /* Vertically center the text there */
    background-color: #000000;
    color: #fff !important;
}

/*===========================*/
/*.navbar {
    background-color: #FFCD00;
    height:40px;
}*/
.navbar {
    background-color: #FFCD00;
    height: 40px;
    margin-top: 12px;
}

.navbar-light .navbar-nav .nav-link {
    color: rgb(0, 0, 0);
    font-weight:bold;
    /*font-size:larger;*/
}
.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
    color: #fff;
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus .nav-link:active {
    color: #fff;
    background-color: #2EA2DB;
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
    background-color: #FFCD00;
}

.navbar-nav .dropdown-menu {
    background-color: #FFCD00;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    /*background-color: #2EA2DB;*/
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
li > a {
    font-size:12pt;
}
/*================================*/
/*GRID */
.k-button.k-button-icontext.v-approve {
    min-width: 20px;
}
.k-button.k-button-icontext.v-reject {
    min-width: 20px;
}
.k-button.k-button-icontext.v-plus {
    min-width: 20px;
}
.k-button.k-button-icontext.v-list {
    min-width: 20px;
}
.k-button.k-button-icontext.v-view {
    min-width: 20px;
}
.k-button.k-button-icontext.v-viewQl {
    min-width: 20px;
}

.k-button.k-button-icontext.v-pencil {
    min-width: 20px;
}

.k-button.k-button-icontext.v-copy {
    min-width: 20px;
}

.k-button.k-button-icontext.v-update {
    min-width: 20px;
}

.k-button.k-button-icontext.btn-upload {
    min-width: 20px;
}
.k-button.k-button-icontext.v-attch {
    min-width: 20px;
}
.k-button.k-button-icontext.v-location {
    min-width: 20px;
}
.k-button.k-button-icontext.v-link {
    min-width: 20px;
}
.k-button.k-button-icontext.v-close {
    min-width: 20px;
}

.k-button.k-button-icontext.v-reset {
    min-width: 20px;
}

.k-button.k-button-icontext.view_map {
    min-width: 20px;
}

.k-button.k-button-icontext.v-docx {
    min-width: 20px;
}

.k-button.k-button-icontext.v-xlsx {
    min-width: 20px;
}

.k-button.k-button-icontext.v-setuju {
    min-width: 20px;
}

.k-button.k-button-icontext.v-select {
    min-width: 20px;
}

.k-button.k-button-icontext.v-take-over-user {
    min-width: 20px;
}

.k-button.k-button-icontext.v-terima {
    min-width: 20px;
}

.k-button.k-button-icontext.v-kirim {
    min-width: 20px;
}
.k-button.k-button-icontext.v-common {
    min-width: 20px;
}
.k-button.k-button-icontext.v-cancel {
    min-width: 20px;
}
.k-button.k-button-icontext.v-plan {
    min-width: 20px;
}

.k-button.k-button-icontext.v-pic {
    min-width: 20px;
}
.k-button.k-button-icontext.v-participant {
    min-width: 20px;
}
.k-button.k-button-icontext.v-validation {
    min-width: 20px;
}
.k-button.k-button-icontext.v-transfer {
    min-width: 20px;
}
.k-button.k-button-icontext.v-mutasi_internal {
    min-width: 20px;
}
.k-button.k-button-icontext.v-mutasi_eksternal {
    min-width: 20px;
}
.k-button.k-button-icontext.v-merger {
    min-width: 20px;
}
.k-button.k-button-icontext.v-utility {
    min-width: 20px;
}
.k-button.k-button-icontext.v-laporan {
    min-width: 20px;
}
/**/
.v-approve {
    background: url("../img/v-approve.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-approve:hover {
    background: url("../img/v-approve.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-approve:focus {
    background: url("../img/v-approve.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-reject {
    background: url("../img/v-reject.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-reject:hover {
    background: url("../img/v-reject.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-reject:focus {
    background: url("../img/v-reject.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-plus {
    background: url("../img/v-plus.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}
a.v-plus:hover {
    background: url("../img/v-plus.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
a.v-plus:focus {
    background: url("../img/v-plus.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-list {
    background: url("../img/v-list.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-list:hover {
    background: url("../img/v-list.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-list:focus {
    background: url("../img/v-list.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-view {
    background: url("../img/v-view.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-view:hover {
    background: url("../img/v-view.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-view:focus {
    background: url("../img/v-view.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}


.v-viewQl {
    background: url("../img/v-viewQl.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-viewQl:hover {
    background: url("../img/v-viewQl.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-viewQl:focus {
    background: url("../img/v-viewQl.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-pencil {
    background: url("../img/v-pencil.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-pencil:hover {
    background: url("../img/v-pencil.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-pencil:focus {
    background: url("../img/v-pencil.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

/*Dios implement*/

.btn-upload {
    background: url("../img/btn-upload.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.btn-upload:hover {
    background: url("../img/btn-upload.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.btn-upload:focus {
    background: url("../img/btn-upload.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-attch {
    background: url("../img/v_attch.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-attch:hover {
    background: url("../img/v_attch.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-attch:focus {
    background: url("../img/v_attch.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-trash {
    background: url("../img/v-trash.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-trash:hover {
    background: url("../img/v-trash.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-trash:focus {
    background: url("../img/v-trash.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-download {
    background: url("../img/v-download.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-download:hover {
    background: url("../img/v-download.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-download:focus {
    background: url("../img/v-download.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}


/* End dios implement*/

.v-copy {
    background: url("../img/v-copy.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-copy:hover {
    background: url("../img/v-copy.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-copy:focus {
    background: url("../img/v-copy.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}


.v-update {
    background: url("../img/v-update.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-update:hover {
    background: url("../img/v-update.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-update:focus {
    background: url("../img/v-update.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-location {
    background: url("../img/v-location.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-location:hover {
    background: url("../img/v-location.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-location:focus {
    background: url("../img/v-location.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-link {
    background: url("../img/v-link.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-link:hover {
    background: url("../img/v-link.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-link:focus {
    background: url("../img/v-link.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-close {
    background: url("../img/v-close.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-close:hover {
    background: url("../img/v-close.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-close:focus {
    background: url("../img/v-close.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-reset {
    background: url("../img/change_password.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-reset:hover {
    background: url("../img/change_password.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-reset:focus {
    background: url("../img/change_password.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.view_map {
    background: url("../img/view_map.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.view_map:hover {
    background: url("../img/view_map.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.view_map:focus {
    background: url("../img/view_map.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-docx {
    background: url("../img/v-docx.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-docx:hover {
    background: url("../img/v-docx.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-docx:focus {
    background: url("../img/v-docx.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-xlsx {
    background: url("../img/v-xlsx.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-xlsx:hover {
    background: url("../img/v-xlsx.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-xlsx:focus {
    background: url("../img/v-xlsx.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-setuju {
    background: url("../img/v-valid.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-setuju:hover {
    background: url("../img/v-valid.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-setuju:focus {
    background: url("../img/v-valid.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-select {
    background: url("../img/v-select.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-select:hover {
    background: url("../img/v-select.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-select:focus {
    background: url("../img/v-select.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-take-over-user {
    background: url("../img/take_over_user.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}

a.v-take-over-user:hover {
    background: url("../img/take_over_user.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-take-over-user:focus {
    background: url("../img/take_over_user.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-terima {
    background: url("../img/v-terima.png") no-repeat;
    background-position: 2px 2px;
    /*background-color: #daecf4;
    padding-left: 1rem;*/
    padding-right: 1rem;
    height: 20px;
}

a.v-terima:hover {
    background: url("../img/v-terima.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-terima:focus {
    background: url("../img/v-terima.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}


.v-kirim {
    background: url("../img/v-kirim.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    height: 20px;
}
a.v-kirim:hover {
    background: url("../img/v-kirim.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
a.v-kirim:focus {
    background: url("../img/v-kirim.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-cancel {
    background: url("../img/v-cancel.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}
a.v-cancel:hover {
    background: url("../img/v-cancel.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
a.v-cancel:focus {
    background: url("../img/v-cancel.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-plan {
    background: url("../img/v-plan.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-plan:hover {
    background: url("../img/v-plan.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-plan:focus {
    background: url("../img/v-plan.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-participant {
    background: url("../img/v-participant.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-participant:hover {
    background: url("../img/v-participant.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-participant:focus {
    background: url("../img/v-participant.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-validation {
    background: url("../img/v-validation.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-validation:hover {
    background: url("../img/v-validation.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-validation:focus {
    background: url("../img/v-validation.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-transfer {
    background: url("../img/v-transfer.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-transfer:hover {
    background: url("../img/v-transfer.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-transfer:focus {
    background: url("../img/v-transfer.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-mutasi_internal {
    background: url("../img/v-mutasi_internal.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-mutasi_internal:hover {
    background: url("../img/v-mutasi_internal.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-mutasi_internal:focus {
    background: url("../img/v-mutasi_internal.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-mutasi_eksternal {
    background: url("../img/v-mutasi_eksternal.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-mutasi_eksternal:hover {
    background: url("../img/v-mutasi_eksternal.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-mutasi_eksternal:focus {
    background: url("../img/v-mutasi_eksternal.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

.v-merger {
    background: url("../img/v-merger.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-merger:hover {
    background: url("../img/v-merger.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-merger:focus {
    background: url("../img/v-merger.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-utility {
    background: url("../img/v-utility.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-utility:hover {
    background: url("../img/v-utility.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-utility:focus {
    background: url("../img/v-utility.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-laporan {
    background: url("../img/v-laporan.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-laporan:hover {
    background: url("../img/v-laporan.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-laporan:focus {
    background: url("../img/v-laporan.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-pic {
    background: url("../img/v-pic.png") no-repeat;
    background-position: 2px 2px;
    background-color: #daecf4;
    height: 20px;
}

a.v-pic:hover {
    background: url("../img/v-pic.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}

a.v-pic:focus {
    background: url("../img/v-pic.png") no-repeat;
    background-position: 2px 2px;
    background-color: #97DCF8;
    height: 20px;
}
.v-common {
    background-color: #daecf4;
    height: 20px;
    color: #000000 !important;
}
a.v-common:hover {
    background-color: #97DCF8;
    height: 20px;
}
a.v-common:focus {
    background-color: #97DCF8;
    height: 20px;
}

/*.card-header {
    background-color: #ff9f00;
    color: #000000;
    font-weight: bold;
    padding: 2px 5px;
}
.card-body {
    padding: 2px 2px;
}*/
.bg-primary {
    background-color: #3c89d5 !important;
}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #ffffff00;
    background-clip: border-box;
    border:none;
    /*border-radius: 12px;*/
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    margin-bottom:20px;
}

.card-header {
    /*background-color: #7D7D7D;
    color: #fff;*/
    background-color: #ffffff00;
    color: #000000;
    font-weight: bold;
    font-size: 12pt;
    border-radius: 12px 12px 0 0 !important;
    border: none;
    padding: 20px;
}

.card-body {
    padding: 0px;
}
.k-grid-content {
    min-height:240px;
}
.k-grid-header th.k-header {
    white-space: normal;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}
.k-grid tr td {
    border-width: 0 0 1px 1px;
    vertical-align: top;
    padding: 1px 2px;
}
.k-grid-header .k-header {
    overflow: visible;
    white-space: normal;
}

.k-header, .k-grid-header, .k-toolbar, .k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap, .k-grouping-header, .k-pager-wrap, .k-textbox, .k-progressbar, .k-draghandle, .k-autocomplete, .k-state-highlight, .k-tabstrip-items .k-item, .k-panelbar .k-tabstrip-items .k-item {
    background-color: #FFCD00;
    /*background-color: #444242;*/
}
/*.k-header, .k-treemap-title, .k-grid-header .k-header > .k-link {
    color: #fff;
}*/
.k-alt, .k-separator, .k-resource.k-alt, .k-pivot-layout > tbody > tr:first-child > td:first-child {
    background-color: #F2F2F2;
}
.k-block, .k-widget, .k-input, .k-textbox, .k-group, .k-content, .k-header, .k-filter-row > th, .k-editable-area, .k-separator, .k-textbox > input, .k-autocomplete, .k-dropdown-wrap, .k-toolbar, .k-group-footer td, .k-grid-footer, .k-footer-template td, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-grid-header, .k-grid-header-wrap, .k-grid-header-locked, .k-grid-footer-locked, .k-grid-content-locked, .k-grid td, .k-grid td.k-state-selected, .k-grid-footer-wrap, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-refresh, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-panelbar > .k-item > .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-panel, .k-panelbar .k-content, .k-treemap-tile, .k-slider-track, .k-splitbar, .k-dropzone-active, .k-tiles, .k-tooltip, .k-button-group .k-tool, .k-upload-files, .k-popup.k-align .k-list .k-item:last-child, .k-editor-dialog .k-tabstrip-items {
    /*border-color: #dee2e6;*/
}
.k-grid tr th {
    border-color: #dee2e6;
}
.k-grid tr td {
    border-color: #dee2e6;
}

.table th {
    text-align: center;
    vertical-align: middle;
    background-color: #FFD527;
    padding: 4px;
}
/*FORM*/
.title-header {
    font-size:large;
    font-weight:bold;
    text-align:left;
}

.form-item-header {
    clear: both;
    padding: 2px 2px;
    /*display: table-row;*/
    width: 100%;
    min-height: 20px;
    /*border-top: 1px solid #ccc;*/
}

.form-item {
    clear: both;
    padding: 2px 2px;
    /*display: table-row;*/
    width: 100%;
    min-height: 20px;
    border-top: 1px dotted #ccc;
    text-align: left;
}

.form-item-none {
    clear: both;
    padding: 2px 2px;
    display: none !important;
}

.form-item-label {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 120px;
    text-align: left;
    font-weight: bold;
}

.form-item-label80 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 80px;
    text-align: left;
    font-weight: bold;
}

.form-item-label90 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 90px;
    text-align: left;
    font-weight: bold;
}

.form-item-label100 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 100px;
    text-align: left;
    font-weight: bold;
}

.form-item-label105 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 105px;
    text-align: left;
    font-weight: bold;
}

.form-item-label110 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 110px;
    text-align: left;
    font-weight: bold;
}

.form-item-label120 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 120px;
    text-align: left;
    font-weight: bold;
}

.form-item-label140 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 140px;
    text-align: left;
    font-weight: bold;
}
.form-item-label150 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 150px;
    text-align: left;
    font-weight: bold;
}
.form-item-label160 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 160px;
    text-align: left;
    font-weight: bold;
}

.form-item-label180 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 180px;
    text-align: left;
    font-weight: bold;
}
.form-item-label190 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 190px;
    text-align: left;
    font-weight: bold;
}

.form-item-label200 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 200px;
    text-align: left;
    font-weight: bold;
}

.form-item-label220 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 220px;
    text-align: left;
    font-weight: bold;
}

.form-item-label300 {
    clear: both;
    float: left;
    display: table-cell;
    vertical-align: top;
    padding: 2px;
    width: 220px;
    text-align: left;
    font-weight: bold;
}
.form-item-separator {
    display: table-cell;
    width: 1px;
    vertical-align: top;
    padding: 2px;
}

.form-item-field {
    clear: right;
    display: table-cell;
    vertical-align: top;
    padding: 1px;
    text-align: left;
}

.form-item-view {
    clear: right;
    display: table-cell;
    vertical-align: top;
    padding: 1px;
    text-align: left;
}

.form-item-button {
    clear: both;
    padding: 2px 132px;
    display: table;
    width: 100%;
}
.k-window-titlebar {
    padding: 6px 12px;
}
.k-window-title {
    font-size: inherit;
}
.required {
    font-weight: bold;
    color: red;
}


/*NOTIFIKASI */
/* Notifications */
.k-notification h3 {
    padding: 30px 10px 5px;
    font-size: 1em;
    line-height: normal;
}

.k-notification img {
    margin: 20px;
    float: left;
}


/* Info template */
.new-mail {
    width: 300px;
    height: 100px;
}

/* Error template */
.wrong-pass {
    min-width: 300px;
    height: 100px;
}

/* Success template */
.upload-success {
    min-width: 300px;
    height: 100px;
}


/* For Bootstrap v4 theme */
.k-bootstrap-v4 .k-notification h3 {
    padding: 10px 10px 5px;
}

.k-bootstrap-v4 .k-notification img {
    margin: 10px 20px 0 0;
}

.k-bootstrap-v4 .new-mail,
.k-bootstrap-v4 .wrong-pass,
.k-bootstrap-v4 .upload-success {
    width: calc( 300px - 2.5rem );
    height: calc( 100px - 1.5rem );
}


/* For Material v2 theme */
.k-material-v2 .k-notification h3 {
    padding: 10px 10px 5px;
}

.k-material-v2 .k-notification img {
    margin: 10px 20px 0 0;
}

.k-material-v2 .new-mail,
.k-material-v2 .wrong-pass,
.k-material-v2 .upload-success {
    width: 270px;
    height: 70px;
}

.k-widget.k-tooltip-validation {
    display: table-cell;
}
.notif-image {
    display:inline;
}
.notif-text {
    display: inline;
    background-color: #ffffff;
}

.item_grid_filter {
    display: inline-block;
    padding: 2px;
}

input.k-textbox {
    line-height: normal;
    text-indent: 2px;
}

/* COMBOBOX */
/*.k-input[type="text"], .k-input[type="number"], .k-multiselect .k-input, .k-picker-wrap .k-input, .k-textbox, .k-textbox > input {
    font-size: 10pt;
}*/

logo {
    font-size: 35px;
    /*color: #0570f4;*/
    color: #ffffff;
    font-weight: bold;
    /*text-shadow: 2px 2px 2px #000;*/
    /*line-height: 1.5em;*/
    /*padding-left: 1.7em;*/
}

logo:before {
    content: '\2006';
    position: absolute;
    /*height: 0.095em;*/
    left: 0;
    /*box-shadow: 0.35em 0.35em 0 0.25em #f8510c, 1.05em 0.35em 0 0.25em #7eba00, 0.35em 0.97em 0 0.25em #00a3f4, 1.05em 0.97em 0 0.25em #ffba00;*/
}

.table td, .table th {
    padding: 2px;
}
.table th {
    vertical-align: middle;
}
.table thead th {
    vertical-align: middle;
}
html .k-upload {
    min-width: 400px;
}
.k-file .k-upload-action {
    background: #000;
}
.k-file .k-upload-action:hover {
    background: #000;
}
.k-dropdown-wrap, .k-numeric-wrap, .k-picker-wrap {
    text-align: left;
}

/*==============================*/
.IdpItemListTitle {
    font-weight: bold;
    display: inline-block;
}
.profil_area {
    background-color: #ffffff;
    padding: 10px 10px 5px;
    border-radius: 5px;
}
.box-menu {
    font-weight: bold;
    height: 50px;
    width: 100px;
    background-color: #00afff;
    vertical-align: middle;
}

.box-menu:hover {
    background-color: #FFCD00;
}

.filter_content {
    display: grid;
    /*column-count: 4;
    grid-template-columns: 25% 25% 25% 25%;*/
    grid-template-columns: repeat(4, 1fr);
    /*grid-template-rows: auto auto auto auto;*/
    /*grid-gap: 20px;
    padding: 2px;
    break-inside: avoid;*/
}

.filter_cols {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 5px 0;
}
.filter_col {
    flex: 1;
    /*border: 1px solid #e4e4e4;*/
    margin: 2px;
    padding: 2px;
    &:first-child{margin-left: 0;}
    &:last-child {margin-right: 0;}
}
@media screen and (max-width: 980px) {
    .filter_cols .filter_col {
        margin-bottom: 5px;
        flex-basis: 40%;
        &:nth-last-child(2){margin-right: 0;}
        &:last-child {flex-basis: 100%;margin: 0;}
    }
}

@media screen and (max-width: 680px) {
    .filter_cols .filter_col {
        flex-basis: 100%;
        margin: 0 0 5px 0;
    }
}
.k-state-selected, .k-draghandle.k-state-selected:hover {
    background-image: none;
    background-image: none, linear-gradient(to bottom, rgb(218, 0, 0) 0px, rgba(255, 255, 255, 0) 100%);
}
.back-to-top {
    z-index: 1000;
    cursor: pointer;
    position: fixed;
    bottom: 60px;
    right: 30px;
    display: none;
    text-align: center;
    width: 50px;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    background-color: #FFCD00;
    border-radius: 10px;
    color: #ffffff;
    box-shadow: 0 8px 5px 0 rgba(0, 0, 0, 0.2);
}
.back-to-top span {
    margin: 8px auto;
}

.k-detail-row .k-header, .k-grid-header, .k-grouping-header {
    background-color: #f5e9ac;
}
.panel {
    margin-bottom: 20px;
    border-radius: 15px;
    background-color: white;
    border: solid 1px #DEE2E6;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.panel-heading {
    padding: 20px;
    
}
.panel-title a {
    color: #000;
}
.panel-body {
    padding:20px !important;
    /*border: solid 1px #cccccc;*/
}

.panel-footer {
    padding: 20px;
    text-align: left;
}
.panel-toolbar {
    padding: 15px;
}
.k-radio-label {
    padding-right:5px;
}
.k-widget.k-tooltip-validation {
    border-color: #ff0;
    background-color: #f00;
    color: #fff;
}

.k-calendar-range .k-calendar-header .k-button {
    background: #58B5E2 !important;
}
.k-calendar table {
    margin: 10px;
}

.k-autocomplete, .k-picker-wrap.k-state-default, .k-numeric-wrap.k-state-default, .k-dropdown-wrap.k-state-default {
    background-color: #fdfdfd;
    border-color: #a48509;
}
.k-list-container {
    border-color: #1a1917;
    background-color: #ececeb;
}
.k-state-selected, .k-draghandle.k-state-selected:hover {
    background-image: none;
    background-image: none, linear-gradient(to bottom, rgb(240, 172, 9) 0px, rgba(255, 255, 255, 0) 100%);
}
.k-state-focused.k-state-selected, .k-list > .k-state-focused.k-state-selected, .k-listview > .k-state-focused.k-state-selected, td.k-state-focused.k-state-selected {
    box-shadow: inset 0 0 3px 1px #f9de07;
}

/*.row {
    margin:0px;
}*/

.card-white {
    border: 0px;
    box-shadow: none;
    background-color: white !important;
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card-white .card-header{
    background-color:white !important;
    border-bottom:0px;
    font-size:14px;
    
}

.card-white .card-header, .card-white .card-body, .card-white .card-footer {
    padding: 20px !important;
    
}

.table tr td, .table tr t {
    padding: 5px;
    vertical-align: middle;
}

#toolbar_panel {
    margin-bottom:20px;
}

#calendar-container {
    margin-bottom: 20px;
    border: none !important;
    width:100%;
}

#calendar-container table {
    margin: 0px !important;
    padding: 0;
    border-spacing: 0;
    border-width: 0;
    outline: 0;
    table-layout: fixed;
    float: left;
    width: 100% !important;
}

#calendar-container .k-calendar-view {
    width: 100% !important;
    /*height: 100% !important;*/
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#calendar-container  > .k-header {
    border-color: white;
    color: #313131;
    background-color: white !important;
    background-image: url(textures/highlight.png);
    background-image: none;
    margin-bottom: 20px;
    border: none;
    font-weight: bold;
    font-size: 16px;
}

#calendar-container th {
    border-color: #d5d5d5;
    color: #2e2e2e;
    background-color: white !important;
    border: none !important;
    font-weight: bold;
}