/* Color palette: #064acb, #366ed8, #fec771 */

.pollux-blue-primary {
    color: #064acb;
}

.pollux-blue-secondary {
    color: #366ed8;
}

.pollux-blue-progress {
    color: #f6c179;
}

.ml-20px {
    margin-left: 20px;
}

.detailTable td {
    padding-bottom: .5rem !important;
}

.labelData {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.labelDataThin {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.labelDataOnly {
    font: 12px/18px "Open Sans" !important;
}

body {
    background: #ecf0f3;
    color: #000;
    font: 12px/18px "Open Sans";
}

h1 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

h3 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}

fieldset {
    border-top: 1px solid #c4cdd3;
    margin-bottom: .75rem;
    padding-top: .75rem;
}

legend {
    color: #064acb;
    font-size: 11px;
    letter-spacing: 1px;
    padding-right: 5px;
    text-transform: uppercase;
    width: auto;
}

select option {
    font-family: "Segoe UI";
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

#html-login,
#html-login body,
#html-login .container {
    height: 100%;
}

#html-login .container {
    align-items: center;
    display: flex;
}

#html-login .card {
    border: 0;
    float: none;
    margin: auto;
}

#html-login .card-header {
    background: #064acb;
}

#html-login .card-body,
#html-login .card-footer {
    border: 1px solid #c4cdd3;
}

#html-login .card-body {
    border-bottom: 0;
    border-top: 0;
    padding: 30px;
}

#html-login .card-header,
#html-login .card-footer {
    padding: 20px 33px;
}

#html-login label {
    font-size: 14px;
}

.login-val-message {
    font-size: 11px !important;
    float: right;
    line-height: 15px !important;
}

.field-validation-error,
.error {
    color: crimson !important;
    font-size: 12px !important;
    position: relative !important;
    top: 2px !important;
}

input.error {
    border: 1px dotted red;
}

#logo-pollux {
    color: #fec771;
    font-size: 25px;
}

#html-login .form-control {
    border-color: #d4dde3;
    border-width: 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 10px 12px;
}

#html-login .btn {
    font-size: 14px;
    padding: 10px 20px;
}

.bg-pollux {
    background-color: #064acb;
}

.bg-pollux-dev {
    background-color: #9b0101;
}

.bg-selected {
    background-color: #c0fec0 !important;
}

.bg-primary {
    background-color: #064acb !important;
}

.bg-danger-light {
    background-color: #fd00001f !important;
}

.bg-info-light {
    background-color: #eafcff !important;
}

.bg-success-light {
    background-color: #e6f9ea !important;
}

.navbar {
    padding-bottom: .3rem;
    padding-top: .3rem;
}

.navbar-dark .navbar-brand {
    color: #fec771 !important;
    font-size: 18px;
    font-weight: 600;
}

.navbar-dark .navbar-brand:hover {
    color: #fec771;
}

.navbar-dark .navbar-nav .nav-link {
    color: #f2f3f3;
    padding-left: 6px;
    padding-right: 6px;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #f2f3f3;
}

.dropdown-menu {
    border-color: #c4cdd3;
    font-size: 12px;
    padding-left: 6px;
    padding-right: 6px;
}

.dropdown-item {
    padding: .35rem 1rem;
}

.dropdown-item:hover {
    background: #366ed8;
    color: #f2f3f3;
}

.dropdown-divider {
    border-top-color: #d4dde3;
    margin: 5px -6px;
}

.container-fluid {
    margin-bottom: 50px;
    margin-top: 60px;
}

.card {
    border-color: #c4cdd3;
}

.card-header {
    border-bottom-color: #c4cdd3;
    font-size: 14px;
    font-weight: 600;
}

.card-footer {
    border-top-color: #c4cdd3;
}

.alert {
    padding: 8px 10px;
}

.form-group {
    margin-bottom: 0.75rem;
}

.form-group label {
    color: #777;
    line-height: 15px;
    font-weight: 600;
    margin-left: 5px;
}

.form-control {
    border-color: #a4adb3;
    color: #000;
    font-size: 12px;
    height: auto;
    line-height: 16px;
    padding: 6px 8px;
}

.form-control:focus {
    color: #000;
}

.form-control::placeholder {
    color: #aaa;
}

textarea.form-control {
    height: 96px;
}

textarea.form-control-xl {
    height: 150px !important;
}

.input-group-text {
    border-color: #a4adb3;
    font-size: 12px;
    padding-left: 8px;
    padding-right: 6px;
}

.dataTables_filter [type=search] {
    border: 1px solid #a4adb3;
    padding: 4px 5px;
}

.btn {
    border: 0;
    font-size: 12px;
    font-weight: normal;
    padding: 6px 10px;
}

.btn-sm {
    height: 31px !important;
}

.btn-default {
    background: #d4dde3;
}

.btn-primary {
    background: #064acb;
}

.ti {
    margin-right: 2px;
}

.nav-tabs {
    border-bottom-color: #c4cdd3;
}

.nav-tabs .nav-link,
.nav-tabs .nav-link:active,
.nav-tabs .nav-link:visited {
    background: #fff;
    border-bottom-color: #c4cdd3;
    border-right-color: #c4cdd3;
    border-top: 4px solid #c4cdd3;
    color: #555;
    padding: 7px 10px;
}

.nav-tabs .nav-link:hover {
    background: #fcf9f4;
    border-right-color: #c4cdd3;
    border-top-color: #fec771;
    color: #333;
}

.nav-tabs .nav-link.active {
    border-bottom-color: #fff !important;
    border-color: #c4cdd3;
    border-top-color: #366ed8;
    color: #333;
    font-weight: 600;
}

.nav-item.dropdown a:focus {
    outline: none !important;
}

.card.card-tab {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.table tbody tr td,
.table tfoot tr td {
    padding: 7px 8px;
}

.table.table-sm thead tr th {
    background: rgba(0, 0, 0, 0.03);
    border-bottom-width: 1px;
}

.table.table-sm thead tr th,
.table.table-sm tbody tr td,
.table.table-sm tfoot tr td {
    border-color: #c4cdd3;
    padding: 6px 10px;
}

.table.table-font-sm thead tr th,
.table.table-font-sm tbody tr td,
.table.table-font-sm tfoot tr td {
    font-size: 11px;
}

.table.table-xs thead tr th {
    background: rgba(0, 0, 0, 0.03);
    border-bottom-width: 1px;
}

.table.table-xs thead tr th,
.table.table-xs tbody tr td,
.table.table-xs tfoot tr td {
    border-color: #c4cdd3;
    padding: 6px 10px;
}

.table.table-font-xs thead tr th,
.table.table-font-xs tbody tr td,
.table.table-font-xs tfoot tr td {
    font-size: 10px;
}

.footerTable {
    background: #DDF;
}

.dataTable {
    margin-bottom: 5px !important;
    width: 100% !important;
}

.dataTable thead tr th {
    padding: 8px 8px;
}

.dataTables_length select {
    margin: 0 5px;
}

.dataTables_paginate .paginate_button {
    margin: 0 3px;
    padding: 4px 8px !important;
}

.table-hover tbody tr:nth-child(odd):hover td,
.table tbody tr.odd.row-selected td {
    background: #ffc;
}

.table-hover tbody tr:nth-child(even):hover td,
.table tbody tr.even.row-selected td {
    background: #ffa;
}

.table-hover tbody tr:nth-child(odd):hover td.sorting_1,
.table tbody tr.odd.row-selected td.sorting_1 {
    background: #f8f8c8 !important;
}

.table-hover tbody tr:nth-child(even):hover td.sorting_1,
.table tbody tr.even.row-selected td.sorting_1 {
    background: #f8f8a8 !important;
}

.table-ico,
.table-delete {
    border-radius: 3px;
    font-size: 11px;
    margin-right: 4px;
    padding: 4px 6px;
}

.table-ico-xs {
    border-radius: 3px;
    font-size: 9px;
    margin-right: 4px;
    padding: 4px 6px;
}

.table-ico:hover {
    color: #fff;
    text-decoration: none;
}

.table-ico-edit {
    background: peru;
    color: #fff;
}

.table-ico-edit:hover {
    background: chocolate;
}

.table-ico-status {
    background: steelblue;
    color: #fff;
}

.table-ico-xs-status:hover {
    background: midnightblue;
}

.table-ico-xs:hover {
    color: #fff;
    text-decoration: none;
}

.table-ico-xs-edit {
    background: peru;
    color: #fff;
}

.table-ico-xs-edit:hover {
    background: chocolate;
}

.table-ico-xs-status {
    background: steelblue;
    color: #fff;
}

.table-ico-xs-status:hover {
    background: midnightblue;
}

.table-ico-delete,
.table-delete {
    background: indianred;
    color: #fff;
}

.table-ico-delete:hover,
.table-delete:hover {
    background: crimson;
    color: white;
    text-decoration: none;
}

.table-ico-delete-v2,
.table-delete-v2 {
    background: indianred;
    color: #fff;
}

.table-ico-delete-v2:hover,
.table-delete-v2:hover {
    background: crimson;
    color: white;
    text-decoration: none;
}

.table-ico-cancel,
.table-cancel {
    background: indianred;
    color: #fff;
}

.table-ico-cancel:hover,
.table-cancel:hover {
    background: crimson;
    color: white;
    text-decoration: none;
}

.table-ico-bayar,
.table-bayar {
    background: dodgerblue;
    color: #fff;
}

.table-ico-bayar:hover,
.table-bayar:hover {
    background: midnightblue;
    color: white;
    text-decoration: none;
}

.table-ico-pajak,
.table-pajak {
    background: orange;
    color: #fff;
}

.table-ico-pajak:hover,
.table-pajak:hover {
    background: #FFC300;
    color: white;
    text-decoration: none;
}

h5.modal-title {
    font-size: 16px;
    font-weight: 600;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #a4adb3 !important;
    height: 31px !important;
}

.select2-container .select2-selection--single:focus,
.select2-container--open .select2-selection--single {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px;
}

select[readonly].select2-hidden-accessible+.select2-container {
    pointer-events: none;
    touch-action: none;
}

select[readonly].select2-hidden-accessible+.select2-container .select2-selection {
    background: #eee;
    box-shadow: none;
}

select[readonly].select2-hidden-accessible+.select2-container .select2-selection__arrow,
select[readonly].select2-hidden-accessible+.select2-container .select2-selection__clear {
    display: none;
}


.daterangepicker {
    font-family: "Open Sans" !important;
}

.daterangepicker select,
.daterangepicker select option {
    font-family: "Segoe UI" !important;
    font-size: 12px !important;
}

.metadata {
    color: #777;
    padding: 10px 20px;
}

.input-cell {
    background: #ffc;
    border: 1px solid #dda;
    padding: 1px 5px;
    width: 100%;
}

.input-cell:read-only {
    background: #dbdada8c;
    border: 1px solid #959595;
    padding: 1px 5px;
    width: 100%;
}

.input-cell-form {
    background: #ffc;
    border: 1px solid #cc9;
    width: 100%;
}

.br-hidden {
    border-right-style: hidden !important;
}

.bb-hidden {
    border-bottom-style: hidden !important;
}

.bl-hidden {
    border-left-style: hidden !important;
}

table.dataTable tbody tr.selected {
    background-color: #c0fec0 !important;
}

table.dataTable.display tbody tr.odd.selected>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1,
table.dataTable.display tbody tr.even.selected>.sorting_1,
table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1,
table.dataTable tbody tr.odd.selected td,
table.dataTable tbody tr.even.selected td {
    background-color: #c0fec0 !important;
}

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

/*.table-fixed thead {
  width: 100%;
}
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}*/

.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

/* Absolute Center Spinner */
.loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Transparent Overlay */
.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));

    background: -webkit-radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 150ms infinite linear;
    -moz-animation: spinner 150ms infinite linear;
    -ms-animation: spinner 150ms infinite linear;
    -o-animation: spinner 150ms infinite linear;
    animation: spinner 150ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.subTitleAtr {
    font-size: .9rem;
}

.table-scroll {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 450px;
}

.table-scroll table {
    width: 100%;
    /*min-width: 1280px;*/
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrap {
    position: relative;
}

.table-scroll th,
.table-scroll td {
    /*padding: 5px 10px;
  border: 1px solid #000;
  background: #fff;*/
    vertical-align: top;
}

.table-scroll thead,
.table-scroll thead th,
.table-scroll thead td {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
}

/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: #fff;
}

th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
}

thead th:first-child,
tfoot th:first-child {
    z-index: 5;
}

span .text-danger {
    color: #ff0000;
}

.modal-lg-ext {
    max-width: 950px;
}

.modal-lg-extended {
    max-width: 950px;
}

.modal-xl-extended {
    max-width: 1260px;
}

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

.notification .badge {
    position: absolute;
    top: -2px;
    right: 5px;
    background: red;
    color: white;
    padding: 3px 7px;
    font-size: 10px;
}

.rata-text {
    text-align: justify !important;
    text-justify: inter-word !important;
}

.row-compact {
    margin-left: -8px;
    margin-right: -8px;
}

.row-compact>[class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

@media (max-width: 576px) {
    .row-compact {
        margin-left: -6px;
        margin-right: -6px;
    }

    .row-compact>[class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
    }
}