/*
author : Muhammas Iqbal Ramadhan
phone : +6289621882292;
email : iqbalzt.ramadhan@gmail.com;
*/
/*input,textarea {
    text-transform: uppercase !important;
}*/

.p-relative {
    position: relative;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-start {
    justify-content: start;
}

.align-items-center {
    align-items: center;
}

/* ----------- */

.my-title {
    font-size: 2em;
}

.table .checkbox input[type=checkbox],
.table .radio input[type=radio] {
    position: fixed !important;
}

.table .th-checkbox {
    /*display: none;*/
}

i.icon-green {
    color: #009688 !important;
}

.list-group li.item {
    border: 1px solid #ccc;
    border-bottom: transparent;
}

.list-group li.item:last-child {
    border-bottom: 1px solid #ccc;
}

.list-group.radius li.item:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.list-group.radius li.item:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.box-color {
    height: 50px;
    width: 50px !important;
    padding-right: 15px;
    margin-right: 10px;
    background: #000;
    border-radius: 2px;
}

.box-color.green {
    background: #009688;
}

.box-color.yellow {
    background: #ffeb3b;
}

.box-color.red {
    background: #ee3840;
}

table td span.text-right,
table th span.text-right {
    text-align: right !important;
    display: block;
}

table td.text-right,
table th.text-right,
table td.text-right input {
    text-align: right !important;
}

table.dataTable thead th.text-right {
    padding-right: 20px !important;
}

table td.text-right input {
    padding-right: 5px;
}

.table .dropdown span i {
    width: 12px;
}

.span-block span,
.input-block input {
    display: block;
}

.select-td {
    border-radius: 3px;
    border: 1px solid #cccc;
    height: 30px;
}

.border-bottom-1ddd {
    border-bottom: 1px solid #e4eaec !important;
}

.approval-status-msg {
    min-height: 40px;
    background: #213e7a;
    margin-bottom: 10px;
    border-radius: 3px;
    color: #fff;
    padding: 10px;
}

.approval-status-msg.primary {
    background: #5d9cec;
}

.approval-status-msg.success {
    background: #81c868;
}

.approval-status-msg.warning {
    background: #ffbd4a;
}

.approval-status-msg.danger {
    background: #f05050;
}

.approval-status-msg.inverse {
    background: #4c5667;
}

.icon-c-logo img {
    width: 50px;
    height: 50px;
    object-fit: scale-down;
}

#BtnNext,
#BtnPrev {
    background: transparent;
    border: 2px solid #fff !important;
    color: #fff;
}

#BtnNext:hover,
#BtnPrev:hover {
    color: #fff !important;
    background: rgba(0, 0, 0, 0.2);
}

.div-btn-prev {
    margin-right: 20px;
}

.form-design-1 .form-control,
.form-design-1 .form-control:disabled {
    border: 1px solid #ccc;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    height: 40px;
    background: #fff;
    /* background: #eee !important; */
    /*padding-left: 0px;*/
}

.form-design-1 .date.form-control[readonly] {
    background: #fff !important;
}

.form-design-1 .has-error .form-control {
    border: 1.5px solid red !important;
    border-top: transparent !important;
    border-left: transparent !important;
    border-right: transparent !important;
}

.form-design-1 .has-error .help-block,
.form-design-1 .has-error .control-label {
    color: red !important;
}

.help-block.red {
    color: red !important;
}

.form-design-1 .radio input[type="radio"]:disabled+label,
.form-design-1 .checkbox input[type="checkbox"]:disabled+label {
    opacity: 1;
}

.form-design-1 .form-control.text:disabled,
.input-group-addon.text {
    /* background: #fff; */
    background: #eee !important;
    border-bottom: 2px dotted #ccc !important;
    /*padding-left: 0px;*/
}

.form-design-1 .table-data-detailx .text:disabled {
    border: transparent !important;
    background: transparent !important;
    height: 20px;
    text-align: left;
}

.form-design-1 .form-control:focus {
    box-shadow: none !important;
    border-bottom: 3px solid #2978b5 !important;
}

.form-design-1 .input-group-addon {
    background: #fff;
    border: 1px solid #ccc;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
}

.form-design-1 .input-group-addon.disabled {
    cursor: not-allowed !important;
}

.form-design-1 .has-error .input-group-addon {
    border: 2px solid red;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
}

/* .form-design-1 .btn{
  margin-top:10px;
  color:#fff;
  border-radius:25px;
  height:40px;
  background:#133597 !important;
}
.form-design-1 .btn:focus {
  box-shadow:none;
}
.form-design-1 .btn:hover {
  background:rgba(19, 53, 151, 0.80) !important;
} */
.form-design-1 .price {
    font-size: 30px;
    color: #2978b5;
    font-weight: bold;
}

.ul-project li,
.ul-project a {
    height: 40px;
    margin: 0px !important;
}

.ul-project .item {
    border-top: 1px solid #ccc !important;
}

.side-menu .menu-icon {
    -webkit-transition: -webkit-transform 0.15s;
    -o-transition: -o-transform 0.15s;
    transition: transform .15s;
    position: absolute;
    right: 20px;
    display: inline-block;
    text-rendering: auto;
    line-height: 18px;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: 5px !important;
}

.table-project>thead>tr>th,
.table-project>tbody>tr>th,
.table-project>tfoot>tr>th,
.table-project>thead>tr>td,
.table-project>tbody>tr>td,
.table-project>tfoot>tr>td {
    padding: 8px;
}

.dataTables_filter,
.dataTables_length {
    margin-bottom: 10px;
}

.table-radius {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 350px;
    width: 100%;
}

.table-radius tr th,
.table-radius tr td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 5px;
}

.table-radius thead tr th {
    border-top: 1px solid #ccc;
}

.table-radius tfoot tr th {
    border-top: none !important;
}

.table-radius tr th:first-child,
.table-radius tr th:last-child {
    border-top: solid 1px #ccc;
}

.table-radius tr th:first-child,
.table-radius tr td:first-child {
    border-left: 1px solid #ccc;
}

.table-radius tr th:first-child,
.table-radius tr td:first-child {
    border-left: 1px solid #ccc;
}

.table-radius tr th {
    background: #eee;
    text-align: left;
}

/* top-left border-radius */
.table-radius thead tr:first-child th:first-child,
.table-radius.Info tr:first-child td:first-child {
    border-top-left-radius: 6px;
}

/* top-right border-radius */
.table-radius thead tr:first-child th:last-child,
.table-radius.Info tr:first-child td:last-child {
    border-top-right-radius: 6px;
}

/* bottom-left border-radius */
.table-radius tfoot tr:last-child th:first-child {
    border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
.table-radius tfoot tr:last-child th:last-child {
    border-bottom-right-radius: 6px;
}

.table-radius tbody tr td,
.table-radius thead tr th {
    border-left: none !important;
    border-right: none !important;
}

.table-radius tbody tr td:first-child,
.table-radius thead tr th:first-child {
    border-left: 1px solid #ccc !important;
}

.table-radius tbody tr td:last-child,
.table-radius thead tr th:last-child {
    border-right: 1px solid #ccc !important;
}

.table-radius.table-nonfooter tbody tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

.table-radius.table-nonfooter tbody tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

.table-radius tr .empty {
    padding: 20px;
    text-align: center;
}

.table-data-detail input,
.table-data-detailx input,
.table-data-detail select {
    width: fit-content;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #eaeaea;
    text-align: left;
    padding-left: 5px;
}

.table-data-detail .input-group-addon {
    border: 1px solid #eaeaea;
    background: #f4f8fb;
}

.table-data-detail .has-error .input-group-addon {
    border: 1px solid red;
    border-right: transparent;
}

.table-data-detail .input-group input {
    border-left: transparent;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.table-data-detail .tr-green td {
    background: #81c868;
    color: #3e3e3e;
}

.table-data-detail .tr-red td {
    background: red;
    color: #3e3e3e;
}

.table-data-detail {
    font-size: 10pt;
}

.table-data-detailx .select2.select2-container,
.table-data-detailx .select2-container--default .select2-container--default,
.table-data-detailx .select2-container--default .select2-selection--single {
    border: 1px solid #eaeaea;
    height: 32px !important;
}

.table-normal thead tr {
    background: #fff;
}

.table-normal thead tr td {
    color: #666666 !important;
    font-weight: bold;
    border-top: 1px solid #ccc !important;
}

table th.text-center,
table td.text-center,
table td input.text-center {
    text-align: center;
}

.modal .tableFixHead {
    overflow-y: auto;
    max-height: 445px;
}

.tableFixHead {
    overflow-y: auto;
    max-height: 200px;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
}

.tableFixHead table {
    border-collapse: collapse;
    width: 100%;
}

.tableFixHead th,
.tableFixHead td {
    padding: 3px 5px;
    vertical-align: top;
}

.tableFixHead th {
    background: #eee;
}

.tableFixHead .tr-red td {
    background: red;
    color: #fff;
}

.tableFixHead .tr-red td a,
.table-data-detail .tr-red a {
    color: #fff;
}

.tableFixHead .tr-red td a:hover,
.table-data-detail .tr-red a:hover {
    color: #000 !important;
}

.td-dark-red {
    background: #d30700;
    color: #000;
}

.td-red {
    background: red;
    color: #000;
}

.td-dark-blue {
    background: #006cc2;
    color: #000;
}

.td-blue,
.tr-blue {
    background: #03A9F4;
    color: #000;
}

.tr-blue a {
    color: #000;
}

.txt-main {
    padding: 20px 0px;
    overflow: hidden;
}

.card-box h4 {
    color: #797979 !important;
}

#sidebar-menu {
    background: #fff;
}

@media print {
    @page {
        margin: 0;
    }

    body {
        margin: 1cm;
        font-size: 8pt !important;
    }
}

@media only screen and (min-width: 600px) {
    .slideshow-div {
        margin-top: 85px;
    }

    .banner-bg {
        margin-top: 85px;
    }

    .logo-menu {
        height: 30px;
    }

    .logo-menu img {
        position: absolute;
        top: -20px;
        height: 150px;
    }

    .box-number {
        padding: 0px 30px 0px 30px;
    }

    .modal-request .modal-dialog {
        max-width: 100%;
        width: 55%;
    }

    .modal-50 .modal-dialog {
        max-width: 100%;
        width: 50%;
    }

    .modal-55 .modal-dialog {
        max-width: 100%;
        width: 55%;
    }

    .modal-60 .modal-dialog {
        max-width: 100%;
        width: 60%;
    }

    .modal-65 .modal-dialog {
        max-width: 100%;
        width: 65%;
    }

    .modal-70 .modal-dialog {
        max-width: 100%;
        width: 70%;
    }

    .modal-75 .modal-dialog {
        max-width: 100%;
        width: 75%;
    }

    .modal-80 .modal-dialog {
        max-width: 100%;
        width: 80%;
    }

    .modal-fullwidth .modal-dialog {
        max-width: 100%;
        width: 100%;
    }

    .modal .div-loader {
        position: absolute;
        padding: 15% 38%;
    }

    .modal-70 .div-loader {
        position: absolute;
        padding: 15% 45%;
    }
}

/*ini untuk tampilan android */
@media only screen and (max-width: 600px) {
    .filter-report .form-group {
        width: 100% !important;
    }

    td .div-status {
        display: inline-grid;
    }

    td .div-status .label {
        margin-bottom: 5px;
    }

    .table-responsive {
        border: none;
    }

    .percentage {
        font-weight: bold;
        color: #000;
        position: absolute;
        right: 0px;
    }

    .div-realisasi .percentage {
        font-weight: bold;
        color: #000;
        position: absolute;
        right: 5px;
    }

    .div-item .btnx-edit,
    .item .btn-view-real {
        width: 100%;
        margin-top: 5px;
    }

    .width-50 {
        width: 100% !important;
    }

    .slideshow-div {
        margin-top: 60px;
    }

    .banner-bg {
        margin-top: 60px;
    }

    .div-static .box-number h5 {
        font-size: 30px;
    }

    .div-static .box-number p {
        font-size: 15px;
    }

    .div-static .box-white-link h5 {
        font-size: 12px;
    }

    .div-static .box-white {
        height: 100px !important;
        width: 100%;
        padding: 20px 5px;
        margin: 0px;
    }

    .div-static .ikon-big {
        height: 30px;
        width: 30px;
    }

    .overlay-info-banner h5 {
        color: #fff;
    }

    .overlay-mini {
        margin-top: 10% !important;
    }

    .overlay-big {
        margin-top: 10px !important;
    }

    .testimonial-text {
        text-align: justify;
    }

    .banner-static {
        min-height: 200px !important;
    }

    .testimonial-img {
        max-height: 100px !important;
    }

    #footer-bottom {
        height: 100px !important;
    }

    .box-white {
        border-radius: 0px !important;
    }

    .modal .div-loader {
        position: absolute;
        padding: 20% 25%;
    }

    .form {
        width: 90% !important;
    }

    .products-image {
        width: 50px !important;
        height: 50px !important;
    }

    .my-title {
        font-size: 2em;
    }

}

@media (min-width: 1200px) {
    .banner-bg .container {
        max-width: 1350px !important;
        width: 100%;
    }
}

.pointer {
    cursor: pointer;
}

.pointer-no {
    cursor: not-allowed;
}

.cursor-move {
    cursor: move;
}

#header {
    background: #ed008c !important;
    padding: 0px 0px 10px 0px !important;
}

#footer-bottom {
    padding: 10px 30px;
    background: url('../../aset/img/grey-bar.png') !important;
    background-position: bottom;
    background-size: 100% 10% !important;
    height: 44px;
}

.main-menu {
    padding-top: 10px !important;
}

.nav-menu a {
    color: #fff;
}

.header-top {
    background: url('../../aset/img/orange-bar.png') !important;
    background-size: 100% 100% !important;
}

.nav-menu ul {
    padding: 0px;
    background: #5d5d5ddb !important;
}

.nav-menu ul a {
    color: #fff !important;
}

.nav-menu ul li:hover {
    background: #ed008c !important;
}

.nav-menu ul {
    margin: 12px 0 0 0;
}

.ikon {
    background-size: cover !important;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-right: 5px;
}

.ikon-medium {
    background-size: cover !important;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-right: 5px;
}

.ikon-big {
    background-size: cover !important;
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-right: 5px;
}

.ikon-facebook-white {
    background: url(../../aset/icon/facebook-logo.svg);
}

.ikon-whatsapp-white {
    background: url(../../aset/icon/whatsapp-logo.svg);
}

.ikon-message-white {
    background: url(../../aset/icon/message-logo.svg);
}

.ikon-home-white {
    background: url(../../aset/icon/home-white.png);
}

.ikon-aboutus-white {
    background: url(../../aset/icon/aboutus-white.png);
}

.ikon-service-white {
    background: url(../../aset/icon/service-white.png);
}

.ikon-news-event-white {
    background: url(../../aset/icon/news-event-white.png);
}

.ikon-contactus-white {
    background: url(../../aset/icon/contactus-white.png);
}

.ikon-vlog-white {
    background: url(../../aset/icon/vlog-white.png);
}

.ikon-medical-white {
    background: url(../../aset/icon/medical-white.png);
}

.ikon-accomodation-white {
    background: url(../../aset/icon/accomodation-white.png);
}

.ikon-business-white {
    background: url(../../aset/icon/business-white.png);
}

.ikon-permanent-residency-white {
    background: url(../../aset/icon/permanent-residency-white.png);
}

.ikon-insurance-white {
    background: url(../../aset/icon/insurance-white.png);
}

.ikon-request-appo-white {
    background: url(../../aset/icon/request-appo-white.png);
}

.ikon-concierge-white {
    background: url(../../aset/icon/concierge-white.png);
}

.ikon-evacuation-white {
    background: url(../../aset/icon/evacuation-white.png);
}

.ikon-helpline-white {
    background: url(../../aset/icon/helpline-white.png);
}

.ikon-request-appo-grey {
    background: url(../../aset/icon/request-appo-grey.png);
}

.ikon-concierge-grey {
    background: url(../../aset/icon/concierge-grey.png);
}

.ikon-evacuation-grey {
    background: url(../../aset/icon/evacuation-grey.png);
}

.ikon-hover-white:hover .ikon-request-appo-grey {
    background: url(../../aset/icon/request-appo-white.png);
}

.ikon-hover-white:hover .ikon-concierge-grey {
    background: url(../../aset/icon/concierge-white.png);
}

.ikon-hover-white:hover .ikon-evacuation-grey {
    background: url(../../aset/icon/evacuation-white.png);
}

.bg-orange-city {
    background: url(../../aset/img/bg-orange-city.png) center;
    background-size: cover;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

.site-footer-legal {
    float: left;
}

.site-footer-right {
    float: right;
}

#footer-bottom {
    color: #fff;
}

#footer-bottom a {
    color: #fff;
}

#footer-bottom a:hover {
    color: #f9ae15;
}

.sample-text-area {
    padding: 50px 0 50px 0 !important;
}

.div-testimonial {
    min-height: 500px;
    margin-bottom: 10px;
}

.testimonial-text {
    color: #fff;
    /*padding: 30px;*/
}

.testimonial-img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    margin-bottom: 20px;
    /*padding: 30px;*/
}

.banner-testimonial h3 {
    color: #fff;
    padding-top: 50px;
}

.div-news {
    margin: 20px 0px;
}

.title-div {
    margin: 20px 0px;
    font-size: 40px;
}

.swiper-slide:hover .news-text {
    background: #ed008c;
}

.news-box {
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 40px;
}

.news-box img {
    width: 100%;
    height: 150px;
}

.news-text {
    padding: 15px;
    height: 80px;
    background: #000;
    color: #fff;
    width: 100%;
}

.video-list-thumbs .news-text {
    padding: 10px;
    height: 40px;
    background: #464646;
    color: #fff;
    width: 100%;
}

.news-text .title {
    display: block;
    font-size: 20px;
}

.news-banner-grey {
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    background: #b8b8b8;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000;
}

.modal label,
form label {
    font-weight: 400 !important;
}

.banner-text-bottom {
    position: absolute;
    bottom: 0px;
}

.slideshow-div .carousel-inner .item img {
    height: 600px;
    object-fit: cover;
}

.full-width {
    width: 100%;
}

.width-30 {
    width: 30%;
}

.width-50 {
    width: 50%;
}

.width-content {
    width: fit-content !important;
}

.form-control {
    border-radius: 2px;
    display: block;
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
}

.modal-content {
    border-radius: 2px;
}

.btn-default {}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background: #2978b5;
}

.btn.btn-primary,
.panel-primary>.panel-heading,
.btn-blue {
    /* background:#ee441a !important; */
    /* border:1px solid #ee441a !important; */
    color: #fff;
}

.paginate_button.active a:hover,
.btn-blue:hover {
    background: rgba(226, 114, 62, 0.8) !important;
    border-color: rgba(226, 114, 62, 0.8) !important;
    color: #fff !important;
}

.btn-default {
    background: #2978b5 !important;
    border: 1px solid #2978b5 !important;
}

.btn-default:hover,
.btn-default:focus {
    opacity: 0.7;
    background: #2978b5 !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
    opacity: 0.7;
    background: #81c868 !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus {
    opacity: 0.7;
    background: #f05050 !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    opacity: 0.7;
    background: #5d9cec !important;
    color: #fff !important;
}

.btn-baru {
    color: #fff;
    background-color: #f9ae15;
    border-color: #f9ae15;
}

.btn-baru:hover {
    color: #fff;
    background-color: #ffd403;
    border-color: #f9ae15;
}

.btn-pink {
    color: #fff;
    background-color: #ed008c;
    border-color: #ed008c;
}

.btn-pink:hover {
    color: #fff;
    background-color: #ef6ab8;
    border-color: #ef6ab8;
}

.btn-grey {
    color: #fff;
    background-color: #565656;
    border-color: #565656;
}

.btn-grey:hover {
    color: #fff;
    background-color: #656464;
    border-color: #656464;
}

.btn-red {
    border: 1px #2978b5 solid !important;
}

.btn {
    border-radius: 4px;
}

.overlay-info-banner {
    background: #000000a8;
    color: #fff;
    text-align: left;
    padding: 20px;
    border-radius: 5px;
    /*max-height: 300px;*/
}

.overlay-info-banner.bg-white {
    background: #f2f2f273 !important;
    color: #36404a;
}

.overlay-info-banner h5 {
    color: #fff;
}

.overlay-mini {
    margin-top: 250px;
}

.overlay-mini-2 {
    margin-top: 350px;
}

.overlay-big {
    margin-top: 50px;
}

.title-banner {
    margin-bottom: 15px
}

.container2 {
    margin-right: 10px;
    margin-left: 10px;
    width: 100%;
}

.form-group .help-block {
    text-transform: lowercase;
}

.form-group .has-error {
    color: #a94442;
}

.panel-heading {
    /* border-bottom:1px solid # !important; */
}

.div-btn {
    margin-bottom: 20px;
}

.page-title {
    margin-bottom: 15px;
}

.info-green {
    background: #203d79;
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: lowercase;
}

.item-testimoni .title {
    text-align: center;
    margin-bottom: 15px;
}

.video-list-thumbs {}

.video-list-thumbs>li {
    margin-bottom: 12px;
}

.video-list-thumbs>li:last-child {}

.video-list-thumbs>li>a,
.video-list-thumbs>li>div {
    display: block;
    position: relative;
    background-color: #464646;
    color: #fff;
    border-radius: 3px transition:all 500ms ease-in-out;
    border-radius: 4px;
}

.video-list-thumbs>li>a:hover,
.video-list-thumbs>li>div:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    text-decoration: none
}

.video-list-thumbs h2 {
    bottom: 0;
    font-size: 14px;
    height: 33px;
    margin: 8px 0 0;
    color: #fff;
}

.video-list-thumbs .glyphicon-play-circle {
    font-size: 60px;
    opacity: 0.6;
    position: absolute;
    right: 39%;
    top: 31%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    transition: all 500ms ease-in-out;
}

.video-list-thumbs>li>a:hover .glyphicon-play-circle,
.video-list-thumbs>li>div:hover .glyphicon-play-circle {
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

@media (min-width: 320px) and (max-width: 480px) {
    .video-list-thumbs .glyphicon-play-circle {
        font-size: 35px;
        right: 36%;
        top: 27%;
    }

    .video-list-thumbs h2 {
        bottom: 0;
        font-size: 12px;
        height: 22px;
        margin: 8px 0 0;
    }
}

.modal-full {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0px !important;
}

.modal-full .modal-dialog {
    margin: 0px !important;
    padding: 0px !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0px !important;
}

.modal-full .modal-content {
    height: 100% !important;
}

.modal-full .panel {
    margin-bottom: 0px !important;
}

.modal-full .row,
.row-full {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.modal .form-group {
    margin-bottom: 0px;
}

#sidebar-menu .subdrop {
    background: #f4f8fb;
    border-left: 3px solid #2978b5;
    color: #2978b5 !important;
}

a:hover,
#sidebar-menu ul ul li.active a {
    color: #2978b5 !important;
}


.open>.dropdown-toggle.btn-default {
    background: rgba(226, 114, 62, 0.8) !important;
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        text-align: left !important;
    }
}

.control-label.label-title {
    margin-bottom: 10px;
}

/*color*/
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #2978b5 !important;
    border-color: #2978b5 !important;
}

.panel-custom>.panel-heading {
    background-color: #2978b5 !important;
    min-height: 37px;
}

.navbar-default {
    /*     background-color: #36404a; */
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.navbar-default i {
    color: #36404a;
}

#wrapper.enlarged .left.side-menu #sidebar-menu a.subdrop {
    color: #2978b5 !important;
}

#sidebar-menu>ul>li>a.active {
    /*background: #ee441a !important;*/
    border-left: 3px solid #2978b5;
    color: #2978b5 !important;
}

/*.tabs li.tab a.active {
    color: #ee441a !important;
}*/
.ui-helper-hidden-accessible {
    position: absolute;
    left: -999em;
}

.modal .close {
    color: #fff;
}

.div-form {
    display: none;
}

.div-form .form-group {
    margin-bottom: 0px;
}

.div-form .form-horizontal .form-group {
    margin-left: -10px;
    margin-right: -10px;
}

.div-form form .row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.div-form #table-transaksi tbody td {
    padding: 5px;
}

.div-form #table-transaksi tbody td [readonly] {
    background: #eee;
    cursor: not-allowed;
}

input {
    border: 1px solid #ccc;
}

.div-form #table-transaksi input,
.div-form #table-transaksi textarea {
    width: 100%;
}

.panel-title {
    text-transform: capitalize !important;
}

.page-title {
    /*text-transform: uppercase;*/
}

.breadcrumb {
    /*text-transform: uppercase;*/
}

.label.label-abu {
    background-color: #9E9E9E;
}

.label.label-merah {
    background-color: #2978b5;
}

.dataTables_processing {
    position: absolute !important;
    top: 50%;
    left: unset !important;
    right: 50% !important;
    width: 100px !important;
    height: 100px !important;
    text-align: center !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: -25px;
    margin-left: -50%;
    font-size: 1.2em;
}

.loader,
.dataTables_processing {
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid #2978b5;
    /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 1.5s linear infinite;
    background: transparent;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.radio-custom.radio-inline {
    margin-top: 0;
    display: inline-block;
    margin-bottom: 8px;
}

.radio-inline label {
    font-weight: normal !important;
}

.has-error .select2-container--default .select2-selection--single,
.has-error input {
    border: 1px solid #F44336 !important;
}

.form-design-1 .has-error .select2-container--default .select2-selection--single {
    border: 2px solid #F44336 !important;
    border-top: transparent !important;
    border-left: transparent !important;
    border-right: transparent !important;
}

#modal2 .panel-heading {
    border-bottom: none !important;
}

.line-status {
    text-align: center;
    background: #ebeff2;
    line-height: 30px;
    color: #36404a;
    font-weight: bold;
    text-transform: uppercase;
}

.line-status.success {
    color: #fff !important;
    background: #81c868 !important;
    height: 30px
}

.line-status.danger {
    color: #fff;
    background: #f05050;
    height: 30px
}

.line-status.warning {
    color: #fff;
    background: #FFC107;
    height: 30px
}

.line-status.primary {
    color: #fff;
    background: #5d9cec;
    height: 30px
}

.line-remark {
    padding: 5px 10px;
    text-align: left;
    background: #ebeff2;
    min-height: 30px;
    color: #36404a;
}

.radio-custom label,
.radio-custom [type=radio] {
    cursor: pointer !important;
}

.pointer {
    cursor: pointer !important;
}

li.has-error {
    color: #a94442;
}

tr.has-error td {
    border: 1px solid red !important;
}

#table-transaksi td input {
    padding: 5px
}

.dataTable {
    width: 100% !important;
}

.padding-10 {
    padding: 10px !important;
}

.padding-25 {
    padding: 25px !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.tabs-vertical>li.active>a,
.tabs-vertical>li.active>a:focus,
.tabs-vertical>li.active>a:hover {
    color: #2978b5 !important;
}

.loader-center .loader {
    position: absolute;
    right: 50%;
    left: 50%;
}

.loader-center {
    height: 100px;
}

.padding-bottom-10 td {
    padding-bottom: 10px !important;
}

.img-gallery-list {
    width: 100%;
    height: 180px;
    margin-bottom: 5px;
    border-radius: 3px;
    object-fit: cover;
}

.img-remove {
    position: absolute;
    background: #e4eaec;
    padding: 10px 13px;
    right: 15px;
    height: 40px;
    color: #484848;
    width: 40px;
}

.img-primary {
    position: absolute;
    background: #e4eaec;
    right: 55px;
    padding: 10px 13px;
    z-index: 2;
    height: 40px;
    color: #484848;
    width: 40px;
    cursor: pointer;
}

.img-view {
    position: absolute;
    background: #e4eaec;
    right: 95px;
    padding: 10px 13px;
    z-index: 2;
    height: 40px;
    color: #484848;
    width: 40px;
}

#gallery-list input[type=radio]:checked+.img-primary {
    background: #1367af;
    color: #fff;
}

#gallery-list input[type=radio]+.img-primary {
    object-fit: cover;
    transition: 500ms all;
}

.input-hidden {
    position: absolute;
    left: -9999px;
}

.div-image {
    border: 1px solid #;
    margin-bottom: 20px;
}

.div-image img {
    padding: 10px;
    object-fit: contain;
}

.wajib {
    color: #F44336;
}

.tab-gallery .tab-content {
    margin-bottom: 0px !important;
}

.tab-gallery .nav li {
    border-bottom: 1px solid #;
}

.tab-gallery .nav li a:hover {
    color: #960505 !important;
    background: #f6f6f6;
}

.tab-gallery .nav-tabs>li.active>a {
    background: #f6f6f6 !important;
    ;
}

.div-page-header .title {
    font-size: 12pt;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    color: #777777 !important;
    border: 1px solid #;
    border-bottom: transparent;
}

.div-page-header>.col-sm-3 {
    margin-bottom: 20px;
}

#modal2 .panel-body {
    /*padding:0px;*/
    /*padding-bottom:20px;*/
}

.modal .panel {
    /*border: 1px solid #;*/
    margin-bottom: 0px !important;
}

.modal-content {
    background: transparent !important;
}

/* #div-report tbody tr:hover, .table-hovered tbody tr:hover{
    background:#fff;
    border:1px solid #e5e5e5;
    cursor:pointer;
    -webkit-box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
    box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
} */
.dataTable.table-hovered.table-pointer tr:hover,
.dataTable.table-hovered.table-pointer tr:hover {
    background: rgba(0, 0, 0, 0.1);
}

.table.dataTable {
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    /* border-top: 1px solid #ccc; */
}

.table.dataTable {
    margin-top: 10px;
    margin-bottom: 20px;
}

.table .dataTables_empty {
    text-align: center;
    padding: 60px 10px !important;
}

.table.dataTable>thead>tr>th {
    vertical-align: middle;
    border-bottom: 1px solid #eaeaea !important;
}

.table.dataTable>tbody>tr>td {
    border-top: 1px solid #eaeaea;
}

.thead-border thead th {
    border: 1px solid #e5e5e5 !important;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    /* border-bottom-left-radius: 50px; */
    /* border-top-left-radius: 50px; */
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    /* border-bottom-right-radius: 50px; */
    /* border-top-right-radius: 50px; */
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    /* border-top-left-radius: 50px; */
    /* border-bottom-left-radius: 50px; */
}

.btn-group>.btn:last-child:not(:first-child),
.btn-group>.dropdown-toggle:not(:first-child) {
    /* border-top-right-radius: 50px; */
    /* border-bottom-right-radius: 50px; */
}

.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child {
    /* border-top-right-radius: 50px; */
    /* border-bottom-right-radius: 50px; */
}

.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,
.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
    /* border-top-left-radius: 50px; */
    /* border-bottom-left-radius: 50px; */
}

.btn-group>.btn:first-child {
    /* border-radius:50px; */
}

.input-group-addon {
    border-radius: 2px;
    border: 1px solid #ccc;
    background: #ebeff2;
}

.btn-kotak .btn,
.btn-kotak {
    border-radius: 0px !important;
}

.table {
    background: #fff;
    border-radius: 1px;
}

.v_btn_add_panel {
    margin-bottom: 10px;
}

.table-add td {
    vertical-align: middle !important;
}

.modal .panel-body {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.modal-footer {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.modal {
    overflow-y: auto;
}

.radio label::before {
    margin-top: 2px;
}

.radio input[type="radio"]:checked+label::after {
    margin-top: 2px;
}

.kotak-warna {
    border-radius: 3px;
    height: 30px;
    width: 30px;
    border: 1px solid #eaeaea;
}

.item-td {
    float: left;
    color: #fff;
    padding: 5px;
    text-align: center;
    /* margin-bottom: 2px; */
    /* margin-top: 2px; */
    font-size: 9pt;
}

.th-mobil {
    background: #ebeff2;
    color: #666666;
}

.data-mobil td,
.data-mobil th,
.data-mobil tr {
    border-color: #ddd !important;
}

.div-data-mobil h5 {
    color: #666666 !important;
}

.td-date {
    font-size: 13pt;
    font-weight: bold;
}

.pointer {
    cursor: pointer;
}

.td-kalender:hover {
    cursor: pointer;
    background: #eaeaea;
}

.td-kalender .item-register,
.td-kalender .item-checkout {
    background: #fff;
}

.td-kalender {
    padding: 0px !important;
}

.div-kalender {
    padding: 8px !important;
}

.td-libur {
    background: #f05050;
}

.td-today {
    background: #4CAF50;
    border-bottom: 1px solid #4CAF50 !important;
    border-left: 2px solid #4CAF50 !important;
    border-right: 2px solid #4CAF50 !important;
}

.td-today.td-tgl {
    background: #4CAF50 !important;
}

.table-project {
    /* border-top: transparent; */
    /* border-bottom: transparent; */
    margin-bottom: 0px;
    margin-top: 0px !important;
    border-left: none !important;
}

.table-project .td-libur {
    border-top: none !important;
    color: #36404a;
    background: #f5a1a1;
    border: 1px solid #f5a1a1;
}

.table-project td {
    color: #36404a;
}

.table-project td .img-user {
    height: 39px;
    width: 40px;
    border-radius: 50%;
    border: 2px solid #eee;
    padding: 2px;
}

.table-project td .item:hover .img-user {
    border: 2px solid #337ab7;
}

.table-project td.td-libur .img-user {}

.td-item span.item,
.td-item a.item {
    display: table-cell;
    padding: 2.5px;
}

.td-item .ul-item-img li.item {
    display: table-cell;
}

.td-item .ul-item-img li.item.item-tambah {
    width: 100%;
    display: block;
    /* border:1px solid #000; */
}

.td-item .ul-item-img {
    display: inline-block;
}

.td-item .ul-item-img {
    float: left;
    width: 100%;
}

.td-item .dropdown-menu>li>a {
    padding-left: 10px;
    padding-right: 10px;
}

.td-libur .td-date {
    color: #fff;
}

.td-libur .label-danger {
    border: 1px solid #fff;
}

.list-detail .list-detail-ul .item {
    margin-top: -1px;
    background: #fff;
}

.list-detail .list-detail-ul li .Name {
    font-size: 10pt;
    font-weight: bold !important;
    cursor: pointer;
    margin-bottom: 0px;
}

.list-detail .list-detail-ul li .Name:hover {
    color: #2978b5;
}

.div-tambah-rencana {
    /* background: #eaeaea; */
    padding: 10px 10px 0px 10px;
}

.div-tambah-rencana .btnx:hover {
    /*color:#fff !important;*/
}

.div-btnx {
    /* border-bottom: 1px solid #ddd; */
    padding-bottom: 10px;
}

.div-tambah-rencana .row {
    padding
}

.div-item {
    padding: 5px;
    border: 1px solid #ccc;
    margin-top: -1px;
    cursor: pointer;
}

.div-tambah {
    margin-top: 10px;
}

.div-item {
    line-height: 15px;
    display: flex;
}

.div-item-footer {
    padding: 0px !important;
}

.div-item .div-item-content div,
.div-item .div-item-content span {
    float: left;
    padding: 5px;
    display: table-row-group;
}

.div-tambah-rencana .remark {
    border-radius: 5px;
    margin-right: 5px;
}

.workername {
    border-radius: 3px;
    /* width: 140px !important; */
    overflow: hidden;
    color: #000;
    /* font-weight: 600; */
}

.workname {
    color: #36404a;
}

.percentage {
    font-weight: bold;
    color: #36404a;
}

.form-tambah-rencana {
    border: 1px solid #eaeaea;
    margin-top: -1px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.form-tambah-rencana {
    border: 1px solid #eaeaea;
    margin-top: -1px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.div-tambah-rencana .div-item:hover {
    background: #f7f7f7;
}

.div-item .btnx-edit {
    /*     visibility: hidden; */
    float: left;
    margin-right: 5px;
}

.div-tambah-rencana .div-item:hover .btnx-edit {
    visibility: visible;
}

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default>.panel-heading {
    border-radius: 0;
    color: #212121;
    background-color: #f7f7f7;
    border: 1px solid #ddd !important;
    margin-bottom: -1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-title {
    font-size: 14px;
}

.panel-title>a {
    display: block;
    padding: 12px;
    text-decoration: none;
}

.more-less {
    float: right;
    color: #212121;
}

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

.list-detail-ul .panel-title {
    color: #36404a;
}

.list-detail-ul .panel-body {
    padding: 10px;
    border: 1px solid #ddd;
}

.popover .popover-title {
    color: #36404a !important;
}

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';
    /* essential for enabling glyphicon */
    content: "\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    /* adjust as needed */
    color: #36404a;
    /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";
    /* adjust as needed, taken from bootstrap.css */
}

.div-item-footer {
    width: 100%;
}

.radius-4 {
    border-radius: 4px;
}

.list-notification .title {
    color: #222222;
}

.list-notification .keterangan {
    color: #828282;
}

.list-notification .item .title {
    font-size: 12pt;
}

.list-notification .item .tgl {
    font-size: 9pt;
    color: #9E9E9E;
}

.list-notification .unread {
    background: #f4f8fb;
}

.list-notification .unread a {
    font-weight: normal !important;
}

.list-notification .item:hover {
    background: #ededed;
    cursor: pointer;
}

.notif-count {
    display: none;
}

.notif-body {
    padding: 5px;
    background: #ddd;
    overflow: auto;
    max-height: 300px;
}

.notification-list .list-group-item {
    margin-bottom: 5px;
    border-radius: 5px;
}

.notification-list .list-group-item.unread {
    background: #f4f8fb;
}

.ul-notification.dropdown-menu-lg {
    width: 370px;
}

.div-notification select {
    width: 150px;
    height: 30px;
    line-height: 30px;
    border-radius: 0px;
    font-size: 9pt
}

.div-notification .btn {
    /*border-radius:0px;*/
}

.div-realisasi {
    margin-top: -1px;
    min-height: 50px;
    border: 1px solid #ddd;
    background: #fff;
}

.form-rencana .div-realisasi {
    max-height: 360px;
    overflow: auto;
    overflow-x: hidden;
}

.div-realisasi .div-realisasi-notif {
    text-align: center;
    padding: 50px;
}

.div-realisasi .ul-data {
    margin: 5px 0px;
}

.div-realisasi .ul-data .item {
    border: 1px solid #ccc;
    padding: 10px;
}

.div-realisasi .item {
    display: flex;
}

.div-realisasi .ul-data .item:not(:last-child) {
    border-bottom: none;
}

.div-realisasi .tgl {
    font-size: 9pt;
}

.div-realisasi .ul-data .item span {
    margin-right: 10px;
}

.div-realisasi .item .image,
.div-item .image {
    margin-right: 10px;
}

.div-item img,
.div-realisasi .item img {
    height: 50px;
    width: 50px;
    border: 1px solid #eaeaea;
    object-fit: cover;
}

.div-item .input {
    padding-left: 10px;
    height: 50px;
    width: 30px;
    /* line-height:50px; */
    margin-right: 15px;
}

.p-5 {
    padding: 5px;
}

.project-name {
    font-size: 15pt;
}

.width-30 {
    width: 30%;
}

.width-40 {
    width: 40%;
}

.width-60 {
    width: 60%;
}

.width-70 {
    width: 70%;
}

.width-80 {
    width: 80%;
}

.width-90 {
    width: 90%;
}

.width-100 {
    width: 100%;
}

.div-status-project td {
    vertical-align: middle;
    padding: 5px;
}

.div-status-project .progress,
.div-status-pegawai .progress {
    margin-bottom: 0px !important;
}

.div-status-project a {
    color: #36404a;
}

.div-status-project .data-project {
    padding-bottom: 100px;
    /* border-top: 1px solid #ccc; */
    /* border-bottom: 1px solid #ccc; */
}

.div-status-pegawai .progress {
    background: #fff;
}

.div-status-project .div-item .div-item-content div,
.div-status-pegawai .div-item .div-item-content div {
    padding: 0px !important;
}

.div-status-project .div-item .div-item-content .workername {
    padding: 5px !important;
    width: 100% !important;
}

.div-status-pegawai .div-item .div-item-content .workername {
    padding: 5px !important;
}

.div-status-project .div-item {
    border: none;
}

.div-status-pegawai .div-item {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    /*     border-bottom:1px solid #eaeaea; */
}

.btn-widgets {
    margin-left: 10px;
}

.select-widgets {
    display: inline-block;
    color: #36404a;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 10pt;
    margin-left: 10px;
    background: #fff;
}

.select-widgets-2 {
    height: 34px;
    color: #36404a;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.portlet-widgets .btn,
.select2-container .select2-selection--single {
    height: 40px !important;
}

.form-design-1 .select2-container .select2-selection--single {
    height: 40px !important;
}

.form-design-1 .select2-selection {
    border-radius: 0px !important;
    border: transparent !important;
    border-bottom: 1px solid #ccc !important;
}

.portlet-widgets a {
    color: #333 !important;
}

.li-option {
    padding: 5px !important;
}

.li-option select {
    width: 100%;
    border: 1px solid #eaeaea;
    padding: 5px;
    border-radius: 0px;
}

.sidebar-project ul a {
    padding: 8px 10px !important;
}

.sidebar-project ul ul a,
.sidebar-project ul ul span.item {
    padding: 8px 15px !important;
    color: #58666e !important;
}

.div-status-project {
    /* min-height: 550px; */
}

.div-status-project .loading {
    margin-top: 10%;
    position: absolute;
    right: 50%;
    left: 50%;
}

.li-hover:hover {
    background: #dbedfb !important;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

.li-hover-gb {
    background: #dbedfb;
}

.li-hover-gb td {
    border-top: 1px solid #dbedfb !important;
    border-bottom: 1px solid #dbedfb !important;
}

.li-hover-gb .td-libur {
    border-top: 1px solid #f5a1a1 !important;
    border-bottom: 1px solid #f5a1a1 !important;
}

.li-hover-gb .td-today {
    border-top: 1px solid #4caf50 !important;
    border-bottom: 1px solid #4caf50 !important;
}

.ul-project {
    margin-top: 24px !important;
}

.ul-project label {
    padding-left: 2px;
    padding-top: 5px;
}

.ul-module ul li {
    background: #fff;
}

.ul-module {}

.ul-module>li>a {
    margin: 0px !important;
    border-top: 1px solid #ccc !important;
    line-height: 1.8 !important;
    height: 40px;
    overflow: hidden;
}

.data-project .table-project td {
    line-height: 1.6 !important;
    border-top: 1px solid #fff;
    border-left: 1px solid #ccc;
    width: 100%;
    min-width: 40px;
    height: 40px;
    padding: 0px;
    text-align: center;
}

.data-project .table-project td:first-child {
    border-left: transparent;
}

.show {
    transition: opacity 1s ease-out;
    opacity: 1;
    height: auto;
}

.sidebar-project ul ul span.item {
    border: 0;
    font-weight: normal;
    line-height: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
    display: block;
}

.sidebar-project ul ul a,
.sidebar-project ul ul span.item {
    line-height: 1.8 !important;
    border-top: 1px solid #ccc !important;
    height: 40px;
}

.sidebar-project .ul-module .lihover>.subdrop {
    background: #fff !important;
    /* border-bottom:1px solid #eaeaea !important; */
}

.data-project .table-project th {
    text-align: center;
    line-height: 1.7;
    border-right: 1px solid #ccc;
}

.data-project {
    overflow-x: auto;
}

.bg-td {
    background: #337ab7;
    border: 1px solid #337ab7;
}

.bg-td.td-today {
    border-bottom: 1px solid #337ab7 !important;
}

.td-tgl {
    background: #eaeaea;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: #ccc;
}

/* Track */
::-webkit-scrollbar-track {
    /* background: #f1f1f1; */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.form-control-feedback {
    text-align: left;
}

.has-error .select2-selection {
    border: 1px solid #a94442 !important;
}

.select2-selection {
    border: 1px solid #ccc !important;
}

.form-control[disabled] {
    /* background:#efd8d8; */
    cursor: not-allowed !important;
}

.date[readonly] {
    cursor: pointer;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    /* background-color:#efd8d8 !important; */
    cursor: not-allowed !important;
}

.sweet-alert .sa-icon.sa-warning .sa-body {
    height: 25px;
}

.sweet-alert .sa-icon {
    height: 55px;
    width: 55px;
}

.sweet-alert button {
    border: 1px solid #ccc !important;
    background-color: #ffffff !important;
    color: #4c5667 !important;
    box-shadow: none !important
}

.sweet-alert button.confirm {
    border: 1px solid #2978b5 !important;
    background-color: #2978b5 !important;
    color: #fff !important;
    box-shadow: none !important
}

.sweet-alert button.confirm:hover {
    background-color: rgba(226, 114, 62, 0.8) !important;
}

.dataTable td .btn-group.btn-group-xs {
    float: right;
}

.dataTable th:last-child {
    /* text-align:right; */
}

.li-btn-right {
    position: absolute;
    right: 5px;
    top: 10px;
}

.li-label-right {
    position: absolute;
    top: 10px;
    right: 25px;
}

.table-project .active>.dropdown-menu {
    display: block;
}

.table-project .open>.dropdown-menu {
    display: block;
    border: 1px solid #eaeaea;
    box-shadow: none !important;
}

.list-approve {
    /* border-top:1px solid #ddd; */
    /* border-bottom:1px solid #ddd; */
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.list-approve .panel-default>.panel-heading {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.list-approve .panel-body {
    min-height: 50px;
}

.list-approve .panel {
    box-shadow: none;
}

.ul-module-detail .item.header {
    padding: 10px;
    border-top: 1px solid #ddd;
}

.ul-module-detail .item {
    padding: 10px;
    border-top: 1px solid #ddd;
}

.ul-module-detail .item.div-item {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.ul-module-detail .item.div-item img {
    height: 40px;
    width: 40px;
}

.ul-module-detail .div-item .input {
    padding-left: 0px;
    margin-right: 0px;
}

.div-table-list {
    max-width: 700px;
    margin: auto;
}

.div-table-list #table_wrapper {
    margin-top: 3rem;
}

.table-list {
    margin-top: 1rem;
}

.table-list .item {
    background: #fff;
}

.table-list .header img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid #ccc;
}

.table-list .body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 16px;
    background: #fff;
    margin-bottom: 10px;
}

.table-list .item .content {
    position: relative;
    width: calc(100% - 50px);
    margin-right: auto;
    word-break: break-word;
    word-wrap: break-word;
    padding: 16px 0;
}

.table-list .item .action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.table-list .item .title {
    color: #3d4145;
    color: var(--color-neutral-700);
    display: block;
    padding-bottom: 2px;
    padding-right: 8px;
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
}

.table-list .item .status .label {
    margin-right: 5px;
}

.div-form {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: auto;
    z-index: 1000;
}

.div-form-body {
    overflow: auto;
    overflow-x: hidden;
    overflow-width: 0px;
}

.div-form-control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    margin-bottom: 0;
    -webkit-transition: -webkit-box-shadow .3s;
    transition: -webkit-box-shadow .3s;
    transition: box-shadow .3s;
    transition: box-shadow .3s, -webkit-box-shadow .3s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 22;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

.editor-ground-control__back.button.is-borderless {
    border-right: 1px solid #d9dbdd;
    padding: 6px 16px;
    min-width: 80px;
    height: 46px;
    border-radius: 0;
    color: var(--color-primary);
}

.title-input {
    min-height: 0;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    font-size: 28px;
    color: var(--color-neutral-700);
    font-weight: 600;
    resize: none;
    -ms-overflow-y: hidden !important;
    width: 100%;
}

.button.is-borderless {
    border: none;
    background: none;
    color: #3d4145;
    color: var(--color-neutral-700);
    padding-left: 0;
    padding-right: 0;
}

.div-btn-action {
    margin-left: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 12px;
    line-height: 32px;
}

.div-form-content {
    margin: auto;
    margin-top: 100px;
    left: -136px;
    min-height: 500px;
    max-width: 720px;
}

.div-form-content-2 {
    max-width: 80%;
}

.div-form-sidebar {
    position: fixed;
    top: 46px !important;
    right: -272px;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 2;
    background: #eaeaea;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: auto;
    -webkit-transition: all .15s cubic-bezier(.075, .82, .165, 1);
    transition: all .15s cubic-bezier(.075, .82, .165, 1);
    overflow-x: hidden;
    box-shadow: none;
}

.div-form-sidebar.active {
    right: 0px !important;
}

.div-form-sidebar .header {
    padding: 15px 10px;
    border-bottom: 1px solid #ddd !important;
}

.div-form-sidebar .ul-list .item a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.div-form-sidebar label {
    font-weight: 300 !important;
}

.ul-list .item .accordion-toggle:before {
    font-family: "Font Awesome 5 Free";
    content: "\f107";
    float: left;
    padding-right: 10px;
    font-weight: 600;
}

.ul-list .item .accordion-toggle.collapsed:before {
    content: "\f105";
}

.div-form-sidebar .ul-list .item a.collapsed:hover {
    background: #eaeaea;
    color: #646464;
}

.div-form-sidebar .ul-list .item a:hover {
    color: #229ee6;
}

.div-form-sidebar .ul-list .item .content {
    padding: 10px;
    margin-top: -1px;
    border-bottom: 1px solid #ddd;
}

.note-editor .modal-header {
    padding: 15px !important;
}

.note-editor .modal-footer {
    border: none;
    padding-top: 0px;
}

.note-editor .modal-content {
    padding: 0px !important;
}

.note-editor .form-group {
    margin-left: 15px !important;
    margin-right: 15px !important;
}

.note-editor .modal-dialog {
    background: #fff;
}

.note-editor .btn-default,
.note-btn-group .btn-default {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #ccc !important;
}

td .btn-group.open .i-edit:before {
    content: "\f142";
}

/* File Upload */
.fake-shadow {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fileUpload {
    position: relative;
    overflow: hidden;
}

.fileUpload #logo-id {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 33px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.img-preview {
    max-width: 100%;
    object-fit: scale-down;
}

a.collapsed {
    color: #646464;
}

a:hover {
    text-decoration: none;
}

.data-project .table-project {
    width: -moz-min-content;
    width: min-content;
}

.btn-expand.active i:before {
    content: "\f078";
}

.btn-user-img {
    float: left;
}

.modal-msg {
    display: none;
    padding: 5px;
    background: #4c5667;
    color: #000;
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #fff
}

.modal-msg.active {
    display: inline-block;
}

.modal-msg.success {
    background: #81c868;
    ;
}

.modal-msg.primary {
    background: #5d9cec;
}

.modal-msg.danger {
    background: #f05050;
}

.modal-msg.warning {
    background: #FFC107;
}

.modal-msg.purple {
    background: #7266ba;
}

.ul-item-img .default {
    background: #4c5667;
}

.ul-item-img .primary {
    background: #5d9cec
}

.ul-item-img .success {
    background: #81c868;
}

.ul-item-img .success-2 {
    background: #203d79
}

.ul-item-img .danger {
    background: #f05050;
}

.ul-item-img .warning {
    background: #FFC107;
}

.ul-item-img .purple {
    background: #7266ba;
}

.btn-item-tambah {
    background: transparent;
    /*     border:1px solid #000; */
    min-height: 39px;
    min-width: 39px;
    height: 100%;
    width: 100%;
    display: block;
    cursor: pointer;
}

.list-data-tr>tbody>tr {
    display: none;
}

.list-data-tr>tbody>tr.active {
    display: table-row;
}

.list-data-tr>tbody>tr.active>td {
    background-color: #fff !important;
    display: table-cell;
}

.label-legenda {
    color: transparent;
    margin-right: 5px;
    height: 17px;
}

.label-success-2 {
    background-color: #203d79;
}

.dropdown-option-label .checkbox {
    margin: 0px;
    /*     margin-left:25px; */
}

.info-widgets {
    color: #36404a;
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 3px;
}

.ul-info-mandays-user .img-user {
    height: 25px;
    width: 25px;
    margin-right: 5px;
    border: 1px solid #ccc;
}

.widget-project.btn-group .dropdown-menu a,
.portlet-widgets .btn-group .dropdown-menu a {
    padding-left: 10px;
    padding-right: 10px;
}

.widget-project.btn-group .dropdown-menu a i,
.portlet-widgets .btn-group .dropdown-menu a i {
    margin-right: 5px;
}

.portlet-heading .btn {
    color: #36404a;
    height: 35px;
}

.filter-approve {
    margin-bottom: 20px;
}

.filter-approve-btn {
    /* padding-bottom: 20px; */
}

.filter-approve-content {
    background: #eaeaea;
    border: 1px solid #e5e5e5;
    padding: 10px;
    border-radius: 1px;
    margin-top: 10px;
    overflow: auto;
}

.filter-approve-content .form-group {
    float: left;
    display: inline-block;
    width: 25%;
}

.filter-report .form-group {
    float: left;
    display: inline-block;
    width: 20%;
}

.filter-report.four-column .form-group {
    width: 25%;
}

.filter-report.two-column .form-group {
    width: 50%;
}

.filter-report .form-group.sembunyi {
    display: none;
}

.filter-approve input,
.filter-approve btn,
.filter-approve select,
.filter-report input,
.filter-report btn,
.filter-report select,
.filter-report {
    height: 35px;
    border-color: #ddd !important;
    color: #36404a;
    border-radius: 0px;
}

.filter-report .select2-container--default .select2-selection--single {
    height: 35px !important;
    border-color: #ddd !important;
    color: #36404a;
    border-radius: 0px;
}

.filter-report .input-group-addon {
    border-radius: 0px !important;
    /* border:transparent; */
    /* border-top:1px solid #ddd; */
    /* border-bottom:1px solid #ddd; */
}

.table-project-real td.TotalMandays,
.table-project-real td.TotalPercentageAVG {
    vertical-align: top !important;
    padding-top: 10px;
}

.TotalPercentageAVGModul,
.TotalPercentageAVG,
.TotalMandays,
.td-tgl {
    padding-left: 5px !important;
    /*     font-weight:bold; */
    vertical-align: middle !important;
    color: #36404a;
}

th.TotalPercentageAVGModul,
th.TotalPercentageAVG,
th.TotalMandays,
th.td-tgl {
    background: #eaeaea;
}

.table-hover tbody tr.red,
.table-hover tbody tr.red td {
    background: red !important;
    border-bottom: 1px solid #bd0000 !important;
    color: #fff;
}

.table-hover tbody tr.red:last-child,
.table-hover tbody tr.red td:last-child {
    border-right: 1px solid #bd0000;
}

.table-hover tbody tr.red:first-child,
.table-hover tbody tr.red td:first-child {
    border-left: 1px solid #bd0000;
}

.table-add td {
    background: #fff;
    width: fit-content;
}

.table-add td:last-child {
    border-right: 1px solid #ccc;
}

.p-zero {
    padding: 0px !important;
}

.width-zero {
    width: 0px !important;
}

.margin-bot-10 {
    margin-bottom: 10px;
}

.nav-tabs-default {
    background: #2978b5;
    box-shadow: none !important;
}

.nav-tabs-default li {
    background: #2978b5 !important;
}

.nav-tabs-default a span {
    color: #fff;
}

.nav-tabs-default .active a span {
    color: #2978b5;
}

.nav-tabs-default li:hover {
    background: #eaeaea !important;
}

.nav-tabs-default li:hover span {
    color: #2978b5;
}

.nav.nav-tabs-default>li>a {
    line-height: 36px;
    text-transform: unset;
}

.nav.nav-tabs-default {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.nav.nav-tabs-default li:first-child {
    border-top-left-radius: 3px;
}

.nav-tabs-default.li-bg li {
    border: 1px solid #2978b5;
}

.nav-tabs-default.li-bg li.active:hover {
    border: 1px solid #2978b5;
}

.nav-tabs-default.li-bg li:hover {
    border: 1px solid #2978b5;
}

.lh-1 {
    height: calc(40px * 2) !important;
}

.lh-2 {
    height: calc(40px * 4) !important;
}

.lh-3 {
    height: calc(40px * 6) !important;
}

.lh-4 {
    height: calc(40px * 8) !important;
}

.lh-5 {
    height: calc(40px * 10) !important;
}

.lh-6 {
    height: calc(40px * 12) !important;
}

.lh-7 {
    height: calc(40px * 14) !important;
}

.lh-8 {
    height: calc(40px * 16) !important;
}

/*.table-project.table-project-real .td-item .ul-item-img li.item {
    display:block !important;
}*/
.filter-report .v_filter,
.module-report .v_button {
    display: none;
}

.table-center thead th {
    text-align: center;
}

.table-center th {
    text-align: center, vertical-align:middle;
}

.radius-zero {
    border-radius: 0px !important;
}

.radius-1 {
    border-radius: 1px !important;
}

.radius-2 {
    border-radius: 2px !important;
}

.table-hakakses {
    border: 1px solid #2978b5;
    border-top: transparent;
}

.table-hakakses td:first-child {
    padding-left: 10px;
    border-right: 1px solid #2978b5;
}

.table-hakakses td:last-child {
    padding-right: 10px;
}

.table-hakakses td:not(:first-child) {
    padding-left: 10px;
}

.modal-rencana .note-editable {
    height: 300px;
}

.div-form .note-editable {
    height: 500px;
}

.btn-expand-li-bg {
    border-left: 3px solid #1e4aa7 !important;
}

.btn-expand-li-bg a,
#sidebar-menu>ul>li>a.active {
    /* background: #ee441a !important; */
    /* color: #ffffff!important; */
    border-left: 3px solid #2978b5 !important;
}

.add-attachment,
.add-attachmentSupir {
    cursor: pointer;
    color: #646464;
    width: 100%;
    border: 3px dotted #ccc;
    padding: 20px;
    border-radius: 3px;
    cursor: pointer;
}

.add-attachment:hover,
.add-attachmentSupir:hover {
    border: 3px dotted #203d79;
    color: #203d79;
}

.add-attachment.disabled:hover,
.add-attachmentSupir.disabled:hover {
    border: 3px dotted #ccc;
    color: #646464;
    cursor: not-allowed;
}

.list-attachment .item,
.list-attachmentSupir .item {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    vertical-align: middle;
}

.list-attachment .item:hover .item-body,
.list-attachmentSupir .item:hover .item-body {
    border: #203d79 1px solid !important;
}

.list-attachment .item:hover .item-remove,
.list-attachmentSupir .item:hover .item-remove {
    border-left: 1px solid #203d79 !important;
    border-bottom: 1px solid #203d79 !important;
}

.list-attachment .item:hover .div-img,
.list-attachment .item .div-img:hover .title,
.list-attachmentSupir .item:hover .div-img,
.list-attachmentSupir .item .div-img:hover .title {
    color: #203d79;
}

.list-attachment .item a,
.list-attachmentSupir .item a {
    color: #565656;
    text-align: center;
}

.list-attachment .item .title,
.list-attachmentSupir .item .title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 11px;
    text-align: center;
}

.list-attachment .add .title,
.list-attachmentSupir .add .title {
    text-align: center;
}

.list-attachment .item-body,
.list-attachmentSupir .item-body {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.list-attachment .item .div-img,
.list-attachmentSupir .item .div-img {
    padding: 20px;
    font-size: 40px;
    color: #565656;
    min-height: 90px;
}

.list-debt .list-attachment .item .div-img,
.list-debt .list-attachmentSupir .item .div-img {
    padding: 5px;
    padding: 10px;
}

.list-debt .list-attachment,
.list-debt .list-attachmentSupir {
    border-top: 1px solid #ccc;
    margin-bottom: -1px;
}

.list-debt p {
    padding: 10px;
}

.list-attachment .item .div-img img,
.list-attachmentSupir .item .div-img img {
    width: 100%;
    object-fit: contain;
}

.list-attachment .item .item-body .item-remove,
.list-attachmentSupir .item .item-body .item-remove {
    float: right;
    padding: 5px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.list-attachment .item .item-body .item-remove:hover,
.list-attachmentSupir .item .item-body .item-remove:hover {
    background: #F44336;
    color: #fff;
}

.list-menu-content {
    list-style: none;
    padding: 0px;
}

.list-menu-content .item {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 0px;
    /* margin-top: -1px; */
    float: left;
    width: 100%;
    border-radius: 0px;
    background: #fff;
    cursor: pointer;
}

.list-menu-content .item:not(:first-child) {
    border-top: #fff;
}

.list-menu-content.mini .item {
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
}

.list-menu-content .item:hover {
    color: #203d79;
    border: 1px solid #203d79;
}

.nav-menu {
    background: #fff;
}

.nav-menu>li {
    margin-left: 0px;
}

.nav-menu>li>a {
    color: #36404a !important;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0px !important;
    border-bottom: 3px solid #fff;
}

.nav-menu>li>a:hover,
.nav-menu a.active {
    border-bottom: 3px solid #2978b5;
    /* border-bottom: 3px solid #ee441a; */
    color: #2978b5 !important;
    background: #fff;
}

.img-preview {
    background: #fff;
    max-width: 100%;
    object-fit: scale-down;
}

.div-img-preview #fakeUploadLogo {
    height: 40px;
}

.form-controlx {
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 2px;
    color: #565656;
    padding: 7px 12px;
    height: 38px;
    max-width: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.modal label,
form label {
    font-weight: 600 !important;
    color: #777777;
}

.checkbox label {
    font-weight: 400 !important;
}

.list-data-slideshow {
    list-style: none;
    padding: 0px;
}

.list-data-slideshow .item {
    background: #fff;
    border-radius: 2px;
    margin-bottom: 20px;
    cursor: pointer;
}

.list-data-slideshow .item img {
    width: 100%;
    max-height: 200px;
    border-radius: 2px;
    object-fit: contain;
    object-position: top;
    border-bottom: 1px solid #cccc;
}

.list-data-slideshow .text {
    position: absolute;
    padding: 10px 20px;
    background: rgba(34, 158, 230, 0.78);
}

.list-data-slideshow .text .title {
    color: #fff;
    font-weight: bold;
}

.list-data-slideshow .text .description {
    color: #fff;
}

.list-data-slideshow .row {
    margin-right: 0px;
    margin-left: 0px;
}

.list-data-slideshow .col-sm-12 {
    padding-left: 0px;
    padding-right: 0px;
}

.list-drag .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 0px;
    border-top: none !important;
    border-left: none !important;
    border-bottom: none !important;
}

.list-drag .btn-group>.btn:last-child:not(:first-child),
.btn-group>.dropdown-toggle:not(:first-child) {
    /* border-top-right-radius: 0px; */
    /* border-top: none !important; */
    /* border-right: none !important; */
    /* border-bottom: none !important; */
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border-bottom: 3px solid #2978b5 !important;
}

.nav-tabs>li.active.success>a,
.nav-tabs>li.active.success>a:focus,
.nav-tabs>li.active.success>a:hover,
.nav-tabs>li.active.success>a {
    border-bottom: 3px solid #81c868 !important;
    color: #81c868 !important;
}

.nav-tabs>li.active.primary>a,
.nav-tabs>li.active.primary>a:focus,
.nav-tabs>li.active.primary>a:hover,
.nav-tabs>li.active.primary>a {
    border-bottom: 3px solid #5d9cec !important;
    color: #5d9cec !important;
}

.nav-tabs>li.active.danger>a,
.nav-tabs>li.active.danger>a:focus,
.nav-tabs>li.active.danger>a:hover,
.nav-tabs>li.active.danger>a {
    border-bottom: 3px solid #f05050 !important;
    color: #f05050 !important;
}

.nav-tabs>li.active.inverse>a,
.nav-tabs>li.active.inverse>a:focus,
.nav-tabs>li.active.inverse>a:hover,
.nav-tabs>li.active.inverse>a {
    border-bottom: 3px solid #4c5667 !important;
    color: #4c5667 !important;
}

.demo-icons-list {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 32px;
}

.demo-icons-list li {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 72px;
    height: 72px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: .1s;
    transition: .1s;
}

.demo-icons-list li:hover {
    background: rgba(158, 158, 158, 0.19);
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    border: 0;
    border-radius: 0px;
    margin-bottom: 30px;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
    -webkit-transition: .5s;
    transition: .5s;
}

.paginate_button.active:hover a {
    color: #fff !important;
}

.paginate_button.active:hover a {
    /*     background:red !important;
    border-color:red !important; */
}

.card-profile .header {
    text-align: center;
    background: #2978b5;
    padding: 5%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    min-height: 200px;
    overflow: hidden;
}

.card-profile img.image {
    min-height: 150px;
    min-width: 150px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 5px solid #fff;
    background: #eaeaea;
    margin-bottom: 15px;
}

.card-profile .header {
    color: #fff;
}

.card-profile .header p {
    margin: 0px;
    font-size: 15px;
}

.card-profile .title {
    font-size: 20px !important;
    font-weight: bold;
}

.table.dataTable thead {
    background: #2978b5;
}

.table.dataTable thead td,
.table.dataTable thead th {
    color: #fff !important;
}

.panel-footer {
    display: flow-root;
}

.sembunyi {
    display: none;
}

.dropdown.active .dropdown-menu {
    display: block;
}

.table>tbody>tr.active>td {
    background: #0075b0 !important;
}

.table>tbody>tr>td .dropdown .dropdown-toggle {
    color: #2978b5;
    display: block;
}

.table>tbody>tr.active>td .dropdown .dropdown-toggle {
    color: #fff !important;
}

.table-pointer tr,
.table-pointer td {
    cursor: pointer;
}

.text-custom {
    color: #203d79;
}

.radius-3 {
    border-radius: 3px;
}

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

.f-size-28 {
    font-size: 28px;
}

.f-size-16 {
    font-size: 16px;
}

.div-container.color-1 p {
    color: rgb(92, 155, 190);
}

tr.has-error td {
    border: 1px solid red !important;
}

tbody tr.has-error td:first-child {
    border-left: 1px solid red !important;
}

tbody tr.has-error td:last-child {
    border-right: 1px solid red !important;
}

td .item-alert {
    color: red;
}

.margin-zero {
    margin: 0px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-2r {
    margin-top: 2rem;
}

.mt-3r {
    margin-top: 3rem;
}

.mb-zero {
    margin-bottom: 0px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-1r {
    margin-bottom: 1rem;
}

.mb-2r {
    margin-bottom: 2rem;
}

.mb-3r {
    margin-bottom: 3rem;
}

.mb-4r {
    margin-bottom: 4rem;
}

.w10 {
    width: 10%;
}

.w20 {
    width: 20%;
}

.w30 {
    width: 30%;
}

.w40 {
    width: 40%;
}

.w50 {
    width: 50%;
}

.w60 {
    width: 60%;
}

.w70 {
    width: 70%;
}

.h5 {
    height: 5px;
}

.h6 {
    height: 6px;
}

.h7 {
    height: 7px;
}

.h8 {
    height: 8px;
}

.h9 {
    height: 9px;
}

.h10 {
    height: 10px;
}

.h15 {
    height: 15px;
}

.h20 {
    height: 20px;
}

.h30 {
    height: 30px;
}

.h40 {
    height: 40px;
}

.h45 {
    height: 45px;
}

.h80 {
    height: 80px;
}

.h100 {
    height: 100px;
}

.h120 {
    height: 120px;
}

.h150 {
    height: 150px;
}

.h200 {
    height: 200px;
}

.h250 {
    height: 250px;
}

.h300 {
    height: 300px;
}

.h300i {
    height: 300px !important;
}

.min-h300i {
    min-height: 300px !important;
}

.h400 {
    height: 400px;
}

.h500 {
    height: 500px;
}

.width-100 {
    width: 100%;
}

.width-70 {
    width: 70%;
}

.width-50 {
    width: 50%;
}

.width-30 {
    width: 30%;
}

.width-28 {
    width: 28%;
}

.width-25 {
    width: 25%;
}

.width-20 {
    width: 20%;
}

.width-40 {
    width: 40%;
}

.width-60 {
    width: 60%;
}

.width-50p {
    width: 50px;
}

.width-75p {
    width: 75px;
}

.width-100p {
    width: 100px;
}

.height-100 {
    height: 100%;
}

.height-400p {
    height: 400px;
}

.cover {
    object-fit: cover;
}

.cover.top {
    object-position: top;
}

.cover.center {
    object-position: center;
}

.cover.bottom {
    object-position: bottom;
}

.bg-x {
    background: #1d1c21;
}

.text-white,
.text-white p {
    color: #fff;
}

.products-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    background-position: center
}

/* website */
@media (min-width: 800px) {
    .div-table-list[class*='log-'] {
        width: 100%;
        max-width: 100%;
    }

    .pull-right-web {
        float: right;
    }
}

.div-search-btn {
    display: inline-flex;
}

.div-search-btn .btn,
.div-search-btn input {
    border-radius: 0px;
}

.div-search-btn :first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.div-search-btn :last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.bold {
    font-weight: bold;
}

/* Baru */
.add-attachments,
.add-attachmentsSupir {
    cursor: pointer;
    color: #646464;
    width: 100%;
    border: 3px dotted #ccc;
    padding: 20px;
    border-radius: 3px;
    cursor: pointer;
}

.add-attachments:hover,
.add-attachmentsSupir:hover {
    border: 3px dotted #203d79;
    color: #203d79;
}

.add-attachments.disabled:hover,
.add-attachmentsSupir.disabled:hover {
    border: 3px dotted #ccc;
    color: #646464;
    cursor: not-allowed;
}

.list-attachments .item,
.list-attachmentsSupir .item {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    vertical-align: middle;
}

.list-attachments .item:hover .item-body,
.list-attachmentsSupir .item:hover .item-body {
    border: #203d79 1px solid !important;
}

.list-attachments .item:hover .item-remove,
.list-attachmentsSupir .item:hover .item-remove {
    border-left: 1px solid #203d79 !important;
    border-bottom: 1px solid #203d79 !important;
}

.list-attachments .item:hover .div-img,
.list-attachments .item .div-img:hover .title,
.list-attachmentsSupir .item:hover .div-img,
.list-attachmentsSupir .item .div-img:hover .title {
    color: #203d79;
}

.list-attachments .item a,
.list-attachmentsSupir .item a {
    color: #565656;
    text-align: center;
}

.list-attachments .item .title,
.list-attachmentsSupir .item .title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 11px;
    text-align: center;
}

.list-attachments .add .title,
.list-attachmentsSupir .add .title {
    text-align: center;
}

.list-attachments .item-body,
.list-attachmentsSupir .item-body {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.list-attachments .item .div-img,
.list-attachmentsSupir .item .div-img {
    padding: 20px;
    font-size: 40px;
    color: #565656;
    min-height: 90px;
}

.list-attachments .item .div-img img,
.list-attachmentsSupir .item .div-img img {
    width: 100%;
    object-fit: contain;
}

.list-attachments .item .item-body .item-remove,
.list-attachmentsSupir .item .item-body .item-remove {
    float: right;
    padding: 5px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.list-attachments .item .item-body .item-remove:hover,
.list-attachmentsSupir .item .item-body .item-remove:hover {
    background: #F44336;
    color: #fff;
}

.v_form_data {
    background-color: #b5dfff;
    border-radius: 3px;
    border: 1px solid black;
    margin-top: 5px;
}

.layout-seat {
    min-height: 300px;
    background: #f6f6f6;
    border-radius: 3px;
    padding: 20px;
}

#grid-snap {
    width: 40%;
    border-radius: 4px;
    padding: 2%;
    margin: 1rem 0 0 1rem;
    background-color: #29e;
    color: #fff;
    font-size: 1.2em;
    touch-action: none;
}

/* DRAG DROP */

.drop-active {
    border-color: #aaa;
}

.drop-target {
    background-color: #29e;
    border-color: #fff;
    border-style: solid;
}

.drag-drop {
    display: inline-block;
    min-width: 40px;
    padding: 2em 0.5em;
    margin: 1rem 0 0 1rem;
    color: #fff;
    background-color: #29e;
    border: solid 2px #fff;

    touch-action: none;
    transform: translate(0px, 0px);

    transition: background-color 0.3s;
}

.drag-drop.can-drop {
    color: #000;
    background-color: #4e4;
}

/* END DRAG DROP */

.supir-box {
    background-color: transparent;
    padding: 25px 0px;
    text-align: center;
    background-image: url('../../aset/img/drvr.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: move;
}

.supir-box-legend {
    background-color: transparent;
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-image: url('../../aset/img/drvr.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.penumpang-box {
    /* background-color: palegreen; */
    background-color: transparent;
    padding: 25px 0px;
    text-align: center;
    background-image: url('../../aset/img/seat-car-black-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: move;
}

.penumpang-box-legend {
    background-color: transparent;
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-image: url('../../aset/img/seat-car-black-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.kosong-box {
    /* background-color: rgb(88, 88, 88); */
    background-color: transparent;
    padding: 25px 0px;
    text-align: center;
    background-image: url('../../aset/img/close.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: move;
}

.kosong-box-legend {
    background-color: transparent;
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-image: url('../../aset/img/close.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.layout-seat .js-remove {
    position: absolute;
    right: -4px;
    top: -2px;
    border-radius: 5px;
    height: 10px;
    width: 10px;
    background: red;
    cursor: pointer;
}

.sell-layout {
    cursor: pointer;
}

.booked {
    cursor: no-drop !important;
    /* background-color: #ce0000 !important; */
    background-image: url('../../aset/img/seat-car-red-bg.png');
}

.selected-seat {
    cursor: no-drop !important;
    /* background-color: #ce0000 !important; */
    background-image: url('../../aset/img/seat-car-green-bg.png');
}

.legend-box-seat-available {
    background-color: transparent;
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-image: url('../../aset/img/seat-car-black-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.legend-box-seat-selected {
    background-color: transparent;
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-image: url('../../aset/img/seat-car-green-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.legend-box-seat-notavailable {
    background-color: transparent;
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-image: url('../../aset/img/seat-car-red-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


@media only screen and (max-width: 599px) {
    .dataTables_processing {
        top: 50% !important;
        left: 50% !important;
        margin-top: 0 !important;
        margin-left: -12% !important;
    }

    .loader,
    .dataTables_processing {
        border: 10px solid #f3f3f3 !important;
        border-top: 10px solid #2978b5 !important;
        width: 70px !important;
        height: 70px !important;
    }
}

/* Putra, 10/07/2023 */
/* menghilangkan increment pada input type 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;
}

/* Putra */
#tableReqProDet th {
    padding: 2.5px;
}

#tableReqProDet td {
    padding: 0px;
}

.fontsize-date {
    font-size: 85%;
}

.fontsize-product {
    font-size: 90%;
}

/* aturan untuk modal pop up */
div:where(.swal2-container) button:where(.swal2-styled) {
    padding: 1em 2em !important;
}

div:where(.swal2-container) .swal2-html-container {
    font-size: 1.5em !important;
    margin: 0 !important;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    min-width: 40em !important;
    /* width: 32em !important; */
    height: 27.5em;
    padding: 0 0.85em 1.25em !important;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: 2.9em !important;
    /* padding: 0em 1em 0 !important; */
}

div:where(.swal2-container) button:where(.swal2-styled) {
    font-size: 1.5em !important;
}


div:where(.swal2-icon) {
    width: 6em !important;
    height: 6em !important;
    /* margin-top: auto !important; */
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
    top: 2.6em !important;
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: 1.5em !important;
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: 1.5em !important;
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long] {
    top: 2.7em !important;
    right: 0.5em !important;
    width: 3.2em !important;
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
    top: 3em !important;
    left: 0.9em !important;
    width: 2.3em !important;
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left] {
    display: none !important;
}

/* radio button custom, Putra 03/08/2023 */

/* Default style for the radio button */
input[type="radio"] {
    /* Hide the default radio button */
    display: none;
}

/* Putra 29/08/2023 */
/* Style the custom radio button */
.label-custom {
    /* Set the appearance of the label to resemble a radio button */
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

/* Style the custom radio button when it's checked */
input[type="radio"]:checked+.label-custom {
    /* Change the color of the custom radio button when checked */
    background-color: green;
    border: 3px solid #ccc;
    /* Replace "blue" with your desired color */
}

/* Putra 31/08/2023 */
/* Checkbox */

.check {
    -webkit-appearance: none;
    /*hides the default checkbox*/
    height: 21px;
    width: 18px;
    /* position: relative; */
    /* top: 20px; */
    /* left: 20px; */
    transition: 0.10s;
    background-color: white;
    text-align: center;
    /* font-weight: 600; */
    color: white;
    border-radius: 3px;
    border: 1px solid grey;

    outline: none;
}

.check:checked {
    background-color: green;
}

.check:before {
    content: "✔";
}

.check:checked:before {
    content: "✔";
}

.check:hover {
    cursor: pointer;
    opacity: 0.8;
}

#div-report {
    height: 25em;
}

#loaderz {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1500;
    display: none;
}