body {
    margin: 0;
    padding: 0;
    background-image: url(img/bg.jpg);
    background-color: aliceblue;
    background-repeat: repeat;
}
.dx-link {
    margin: 0 5px 0 5px;
    font-size: 1em;
}
.pop_up {
    z-index: 9999;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    top: 0;
    left: 0;
    display: none;
}
.pop_up > .deep {
    width: 50%;
    left: 25%;
    height: 90%;
    top: 5%;
    background-color: #fff;
    box-shadow: 0 1px 2px #888;
    position: relative;
    border-radius: 10px;
    padding: 10px;
    min-height: 50%;
    max-height: 90%;
}
.pop_up > .deep.full {
    width: 90%;
    left: 5%;
}
.pop_up > .deep > .deeper {
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.pop_up > .deep > .cl_pop {
    position: absolute;
    width: 32px;
    height: 32px;
    text-align: center;
    border-radius: 16px;
    left: auto;
    right: 4.5px;
    top: 5px;
    cursor: pointer;
    display: table;
}
.hide_me {
    display: none !important;
}
.pop_up > .deep > .cl_pop > .fa {
    display: table-cell;
    vertical-align: middle;
    font-size: 1.5em;
    color: #f5861f;
}
.pop_up.loading > .deep {
    top: 25%;
    height: 50%;
}
.pop_up.loading > .deep {
    background-color: transparent;
    box-shadow: none;
}
.my_date[-moz-read-only],
.my_date[readonly] {
    background-color: transparent !important;
}
.loader {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #3498db;
    width: 75px;
    height: 75px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -37.5px 0 0 -37.5px;
    -webkit-animation: spin 0.5s linear infinite;
    animation: spin 0.5s linear infinite;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.dx-toast-icon,
.dx-toast-message {
    display: inline-block;
}
.dx-toast-message {
    font-size: 1.2em;
    top: 50%;
    margin-top: -8px;
    position: absolute;
    margin-left: 0;
    left: 40px;
}
.dx-toast-content {
    min-width: 300px;
    max-width: 400px;
    padding: 5px;
}
#main {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
.relative {
    position: relative;
    width: 100%;
    height: 100%;
}
.fa.fa-image-logout {
    background-repeat: no-repeat;
    background-image: url(img/exit.png);
}
#login_form {
    padding: 15px;
    width: 350px;
    max-width: 90%;
    background-color: rgba(0, 0, 0, 0.7);
    position: relative;
    top: 75px;
    max-width: 90%;
    border-radius: 2rem;
}
.logo {
    width: 90%;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 70%;
    background-image: url(img/logo-djs.png);
    background-position: center;
}
.input-group-text > i {
    font-size: 1.25rem !important;
}
.dx-tabs-nav-button {
    height: 100% !important;
}
.no-border {
    border: none;
}
.tabbody-main {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.putih {
    color: #fff;
}
.my-tabs-content > .dx-tab-content {
    width: 100% !important;
    padding: 0;
    display: block;
}
.dx-tabpanel .dx-multiview-wrapper {
    border: none !important;
}
.dx-datagrid {
    padding: 1rem;
}
.dx-tab a {
    background-color: transparent !important;
    position: relative !important;
    opacity: 1 !important;
}
.input-group-text {
    width: 50px;
}
.shadow-my {
    box-shadow: -2px 2px 5px #888;
}
.my-refresh {
    cursor: pointer;
}
.red {
    color: #b73235 !important;
}
.red_bg {
    background-color: #b73235 !important;
    border-color: #b73235 !important;
}
.orange_tua {
    color: #f5861f !important;
}
.orange_tua_bg {
    background-color: #f5861f !important;
    border-color: #f5861f !important;
}
.orange_muda {
    color: #fcb513 !important;
}
.orange_muda_bg {
    background-color: #fcb513 !important;
    border-color: #fcb513 !important;
}
.hijau_tua {
    color: #00ad4d !important;
}
.hijau_tua_bg {
    background-color: #00ad4d !important;
    border-color: #00ad4d !important;
}
.hijau_muda {
    color: #8fc63e !important;
}
.hijau_muda_bg {
    background-color: #8fc63e !important;
    border-color: #8fc63e !important;
}
.green_light {
    color: #ccffcc !important;
}
.green_light_bg {
    background-color: #ccffcc !important;
    border-color: #ccffcc !important;
}
.my-tarik,
.my-tarik-2 {
    cursor: pointer;
}
.no-padding .dx-popup-content{
    padding: 0px;
}
@media (max-width: 991px) {
    .pop_up > .deep {
        width: 95%;
        left: 2.5%;
    }
}