#tableList tbody tr:hover,
tr.row-data {
    cursor: pointer
}

@font-face {
    font-family: Roboto;
    src: url(../../font/Roboto-Regular.ttf) format('truetype')
}

@font-face {
    font-family: Montserrat;
    src: url(../../font/Montserrat-Regular.ttf) format('truetype')
}

@font-face {
    font-family: 'Leckerli One';
    src: url(../../font/LeckerliOne-Regular.ttf) format('truetype')
}

@media only screen and (max-width:600px) {
    #loading,
    #textku {
        position: absolute
    }
    #loading {
        width: 82%;
        top: 22%;
        left: 10%
    }
    #textku {
        color: #94b8b8;
        top: 55%;
        left: 36%;
        font-size: 12px;
        text-align: center
    }
}

.login-box {
    margin: 100px auto
}

@media only screen and (min-width:768px) {
    .login-box {
        width: 35%
    }
}

@media only screen and (max-width:768px) {
    .login-box {
        width: 80%
    }
}

.fa-spin-custom,
.glyphicon-spin {
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

input[type=checkbox],
input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px\9;
    line-height: normal;
    -webkit-appearance: checkbox
}

.checkbox label:after,
.radio label:after {
    content: '';
    display: table;
    clear: both
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em
}

.radio .cr {
    border-radius: 50%
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%
}

.radio .cr .cr-icon {
    margin-left: .04em
}

.checkbox label input[type=checkbox],
.radio label input[type=radio] {
    display: none
}

.checkbox label input[type=checkbox]+.cr>.cr-icon,
.radio label input[type=radio]+.cr>.cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in
}

.checkbox label input[type=checkbox]:checked+.cr>.cr-icon,
.radio label input[type=radio]:checked+.cr>.cr-icon {
    transform: scale(1) rotateZ(0);
    opacity: 1
}

.checkbox label input[type=checkbox]:disabled+.cr,
.radio label input[type=radio]:disabled+.cr {
    opacity: .5
}

ul.my-legend {
    list-style: none;
    margin-left: -20px
}

.my-legend>li {
    margin-top: 5px;
    display: inline-block;
    width: 100%;
    height: auto;
    line-height: 20px
}

.my-legend>li>.my-legend-icon {
    width: 20px;
    height: 20px;
    float: left
}

.my-legend>li>.my-legend-text {
    float: left;
    margin-left: 5px;
    word-wrap: break-word
}

a#btnCetak,
a#btnExport,
a#btnFilter {
    float: right;
    margin-bottom: 5px
}

@media only screen and (max-width:600px) {
    .my-legend>li {
        margin-top: 5px;
        display: inline-block;
        width: 50%
    }
}

.full-width {
    width: 100%
}

.inputNull {
    border: 1px solid #f90c0c!important;
    background-color: #ffe9e9!important
}

.inputNull::placeholder {
    color: #fb4141!important
}

.inputNull::-webkit-input-placeholder {
    color: #fb4141!important
}

.inputNull:-moz-placeholder {
    color: #fb4141!important;
    opacity: 1!important
}

.inputNull::-moz-placeholder {
    color: #fb4141!important;
    opacity: 1!important
}

.inputNull:-ms-input-placeholder {
    color: #fb4141!important
}

.col-sm-4 {
    z-index: 0
}

.box-body::-webkit-scrollbar-track {
    background-color: #F5F5F5
}

.box-body::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5
}

.box-body::-webkit-scrollbar-thumb {
    background-color: #dcdcdc;
    border: 2px solid #fff
}

a#btnFilter {
    color: #fff;
    padding: 6px;
    background-color: #2c80ff;
}

a#btnExport {
    height: 36px;
    color: #fff;
    padding: 5px 10px;
    background-color: #2c80ff;
    /* border: 1px solid #3c8dbc; */
    border-radius: 3px
}

a#btnCetak {
    height: 34px;
    width: 40px;
    color: #fff;
    padding: 5px 10px;
    background-color: #2c80ff;
    /* border: 1px solid #3c8dbc; */
    border-radius: 3px
}

a#hapusTgl {
    color: #000
}

h3#filter-title {
    font-size: 16px
}

#edtTglAkhir,
input#edtTglAwal {
    width: 125px
}

form.form-inline {
    margin-top: 16px
}

ul.ui-autocomplete {
    z-index: 5000;
    max-height: 300px;
    overflow-y: auto
}

.label-form {
    margin-top: 7px
}

#edtCust,
input[disabled]#edtTglFJ {
    background-color: #fff;
    border: 0;
    outline-width: 0;
    box-shadow: 0 0 0 #EBEBEB
}

.dropdown {
    position: relative;
    display: inline-block
}

.dropdown-content {
    margin-top: 36px;
    display: none;
    position: absolute;
    background-color: #5ba8d4;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 1
}

.dropdown-content a {
    color: #000;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    background-color: #dcdcdc;
    border-bottom-style: inset;
    border-bottom-width: 2px;
}

.dropdown-content a:hover {
    background-color: #5ca0c5;
    color: #fff;
    cursor: pointer
}

.dropdown:hover .dropdown-content {
    display: block
}

.dropdown.on-process:hover .dropdown-content {
    display: none !important;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41
}

.right {
    right: 0
}

tr.acts-table:hover td {
    background-color: #dedede
}

tr.acts-table .view-det-dok:hover {
    cursor: pointer;
}

td.acts-table.right {
    text-align: right;
}

.table>thead>tr>th {
    text-align: center;
    vertical-align: middle;
}

table>tbody>tr.active {
    background: #3e8e41!important
}

.dataTables_scrollHeadInner {
    /*width: 100% !important;*/
}

.dataTables_scrollHeadInner > .table {
    width: 100% !important;
}

.input-group .chosen-container {
    width: 100% !important;
}

.hide {
    display: none;
}

.msg-genpass {
  float: left;
  line-height: 40px;
  color: red;
}


table.dataTable tbody th, table.dataTable tbody td {
    padding: 3px !important; 
}
table.dataTable thead th, table.dataTable thead td {
    padding: 3px !important; 
}
.dataTables_scrollBody > table#dbgM > thead > .primary, table#tblM > thead > .primary {
    visibility: collapse;
}
span.DataTables_sort_icon.css_right.ui-icon.ui-icon-carat-2-n-s {
    display: none;
}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td {
    vertical-align: top !important; 
}
.chosen-container-multi .chosen-choices {
   height: auto !important;
}

/* table {
  table-layout:fixed !important;
} */

/* sortable */
ul#shortcutOrder {
    margin: 0;
    padding: 0;
}
li.listOrder.my-handle {
    list-style: none;
    /*margin: 0;
    padding: 4px;*/
    background-color: white;
}
.listOrder.my-handle>i.fa.fa-sort {
    margin-right: 10px;
}
li.listOrder.my-handle:hover {
    cursor: grab;
    cursor: -webkit-grab; /* Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser */
    cursor: -moz-grab; /* mozilla */
    cursor: -o-grab; /* mozilla */
    cursor: -ms-grab; /* mozilla */
    background-color: #ddd;
}

/* menu sorting list */
.menu-sort {
        /* min-width: 25%; */
    /* overflow: hidden; */
    /* position: relative; */
    width: 100%;
    float: left;
    margin-right: 10px;
    -webkit-box-shadow: 3px 6px 11px -4px rgba(0,0,0,0.32);
    -moz-box-shadow: 3px 6px 11px -4px rgba(0,0,0,0.32);
    box-shadow: 1px 2px 11px -4px rgba(0,0,0,0.32);
}
div#multi {
    position: relative;
    overflow: hidden;
    padding: 5px;
    font-size: 16px;
}
.menu-parent__name {
    font-weight: bold;
    text-align: center;
    /* border-bottom: 1px solid #7d7d7d; */
}
ul.menu-sorting {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-parent__name:hover, .submenu-sort:hover {
    cursor: all-scroll;
}
/* ::-webkit-scrollbar{width:2px;height:2px;}
::-webkit-scrollbar-button{width:2px;height:2px;} */

ul#multi {
    list-style: none;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
}
ul#multi > li {
    display: inline-flex;
    min-width: 200px;
    max-width: 220px;
    margin-right: 10px;
}
li.submenu-sort {
    white-space: normal;
}
.animation-load { 
    right: 0; 
    margin-top: 3px;
    font-size: 7px;
}

.filter-caption {
    width: 100%;
    float: left;
    /*margin: 10px 0;*/
    padding: 5px;
    background-color: #e9e9e9;
    border: 1px solid #d2d2d2;
    border-radius: 3px 3px 0 0;
    max-height: 90px;
}
.form-group.col-md-6.caption,.form-group.col-md-12.caption {
    margin-bottom: 0;
}

.filter-sorting {
    width: 100%;
    float: left;
    margin: 0 0 5px 0;
    padding: 5px;
    background-color: #e9e9e9;
    border: 1px solid #d2d2d2;
    border-top: 0;
    border-radius: 0 0 3px 3px;
    max-height: 90px;
}
/* profile style */
.cl-shortcut{
    width: 20%;
    text-align: center;
}
td.acts-table.columns-aksi {
    text-align: center;
    width: 100px !important;
}
td.acts-table div {
	max-height: 60px;
	overflow-y: scroll;
}

/* button control */
.control-hide {
    background-color: grey !important;
    border: 0 !important;
}
div#btn-add {
    width: 100px;
    float: left;
}
/* tooltips */
.tooltips {
    position: relative;
    overflow: hidden;
}
.tooltips:hover {
    overflow: visible;
}
.tooltips:hover .tooltips-content {
    opacity: 1; 
}
.tooltips .tooltips-content {
    /* background: #05a8ff; */
    box-shadow: 0 5px 25px 5px rgba(205, 210, 214, .8);
    box-sizing: border-box;
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 1px;
    max-width: 200px;
    min-width: 145px;
    padding: 1em;
    position: absolute;
    opacity: 0;
    transition: all 0.3s ease;
}
.tooltips .tooltips-content::after {
    /* background: #05a8ff; */
    content: "";
    height: 10px;
    position: absolute;
    transform: rotate(45deg);
    width: 10px;
}
.tooltips.top .tooltips-content {
    bottom: calc(100% + 1.5em);
    left: 50%;
    transform: translateX(-50%);
}
.tooltips.top .tooltips-content::after {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
}

.tooltips.right .tooltips-content {
    left: calc(100% + 1.5em);
    top: 50%;
    transform: translateY(-50%);
}
.tooltips.right .tooltips-content::after {
    left: -5px;
    margin-top: -5px;
    top: 50%;
}
.btn__baru {
    background: #05a8ff !important;
}
.btn__koreksi {
    background: #f39c12 !important;
}
.btn__hapus {
    background: #dd4b39 !important;
}
.btn__baru::after {
    background: #05a8ff !important;
}
.btn__koreksi::after {
    background: #f39c12 !important;
}
.btn__hapus::after {
    background: #dd4b39 !important;
}

/* video player modal */
div#modal-video_player {
    width: 70% !important;
    overflow: auto;
    padding: 0 !important;
    display: table;
    position: relative;
}
#modal-video_player>.modal-content {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}
#modal-video_player>.modal-content>.modal-header {
    display: none;
}
#modal-video_player>.modal-content>.modal-footer {
    display: none;
}
#modal-video_player>.modal-content>.modal-body {
    padding: 0;
    background: transparent !important;
    display: table-cell;
    vertical-align: middle;
    height: auto;
    max-width: 80% !important;
}
video {
    width: 100%;
    height: auto;
}
button#btnTutupPlayer {
    position: absolute;
    color: white;
    right: -40px;
    top: -15px;
    font-size: 50px;
    background: none;
    box-shadow: none;
}
.video_list {
    display: inline-block;
    top: 4px;
    position: relative; 
    width: 120px !important;
    height: 90px !important;
}
.video_list:hover {
    cursor: zoom-in !important;
}

/* no sort */
.no-sort::after { display: none!important; }
.no-sort::before { display: none!important; }
.no-sort { pointer-events: none!important; cursor: default!important; }
.table { 
    max-width: unset; 
}

/* btn reset  filter */
.input-group-btn.btn-reset {
    position: unset;
}
button#btnResetFilter {
    right: -8px; 
    background: white !important;
    padding: 5px !important;
    min-width: 20px !important;
}
.hasDatepicker {
    min-width: 150px;
}
td.dataTables_empty {
    color: #6f6f6f;
}

label#lblDeskIssue {
    text-align: left;
    font-weight: normal;
}
.stat-lbl {
    font-size: 9px !important;
    float: right !important;
}
.issue_list {
    overflow: hidden !important; 
    width: 100% !important;
    position: absolute !important;
    overflow-y: unset !important;
    padding-right: 20px !important;
}
a.download-btn {
    background: #b6e29c;
    border-radius: 5px;
    padding: 5px 12px;
    color: black;
    margin-top: 10px;
}
.swal2-popup {
    font-size: 1.6rem !important;
}
span.badge.badge-warning.ucap.status_sc {
    color: black !important;
    font-weight: bold;
}

/* custom box */
.box-custom {
    border-radius: 12px !important;
    max-height: 132px !important;
    height: 132px;
}
.bg-white.box-custom {
    background: white;
}
.small-box>.small-box-footer {
    background: none !important;
}
.small-box:hover { 
    color: unset !important;
}
.box-custom p {
    color: #8898aa;
    text-transform: uppercase; 
}
.small-box>.inner {
    padding: 10px 20px !important;
}
.box-custom h3.h3-chart {
    font-size: 20px;
    color: #32325d;
}
.small-box .icon {
    top: -1px !important;
}
.box-custom .inner {
    width: 52% !important;
}
.box-icon--left {
    left: 10px;
}
.box-icon--right {
    right: 10px;
}
.box-title--right {
    float: right;
}
.box-title--left {
    float: left;
}
.box-custom>.inner p {
    margin-bottom: 0;
}
.box-custom>.inner.full-width {
    width: 100% !important;
}
.full-width > .box-content {
    overflow: hidden;
}
.box-custom>.inner.full-width>.box-content>p {
    width: 40%;
    float: left;
}
.box-custom>.inner.full-width>.box-content>h3.h3-chart {
    float: right;
    width: 60%;
}
.card-wrapper {
    overflow: hidden;
    width: 100%;
    float: right;
    margin: 0;
    padding: 0;
}
.box-custom .icon>img {
    max-height: 130px;
    max-width: calc(243px/2);
}

/* zooom cursor */
.zoom-in {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }