/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* xs: phone - portrait */
/* default. no media */
:root {
    --bs-primary: var(--themecolor);
    --bs-primary-rgb: var(--themecolor-rgb);
}
html {
    font-size: 14px;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

html,
body {
    scroll-behavior: smooth;
}

body {
    position: relative;
    width: 100%;
    height: 100vh;
    /* background: rgb(197,202,226) !important;
    background: linear-gradient(180deg, rgba(197,202,226,1) -50%, rgba(239,240,250,1) 55%, rgba(251,252,255,1) 100%) !important; */
}

body #wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* background: rgb(197,202,226) !important;
    background: linear-gradient(180deg, rgba(197,202,226,1) -50%, rgba(239,240,250,1) 55%, rgba(251,252,255,1) 100%) !important; */
}

.text-primary {
    color: var(--themecolor-dark) !important;
}
.nav-link {
    background-color: unset !important;
    color: rgba(55, 55, 55, 0.5);
}

.nav-link:hover {
    color: var(--themecolor);
}

.nav-link.active {
    color: white !important;
    background-color: var(--themecolor) !important;
}

.fs-9px {
    font-size: 9px !important;
}
.fs-10px {
    font-size: 10px !important;
}
.fs-11px {
    font-size: 11px !important;
}
.fs-12px {
    font-size: 12px !important;
}
.fs-14px {
    font-size: 14px !important;
}
.fs-16px {
    font-size: 16px !important;
}
.fs-18px {
    font-size: 18px !important;
}
.fs-20px {
    font-size: 20px !important;
}
.fs-24px {
    font-size: 24px !important;
}
.fs-32px {
    font-size: 32px !important;
}
.fs-48px {
    font-size: 48px !important;
}

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

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

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

.pb-4rem {
    padding-bottom: 4rem !important;
}


/* BUTTON */
.btn {
    /* font-family: 'Qanelas Soft Bold', sans-serif; */
    font-size: 0.875rem;
    border-radius: 0.375rem;
    border-width: 2px;
    padding: 0.5rem 1rem;
    /* box-shadow: 0px 4px 1.5rem rgba(0, 0, 0, 0.12); */
}

.btn.btn-link {
    box-shadow: unset;
}

.btn.btn-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 25%);
}

.btn-primary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--themecolor);
    --bs-btn-border-color: var(--themecolor);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--themecolor-darker);
    --bs-btn-hover-border-color: var(--themecolor-darker);
    --bs-btn-focus-shadow-rgb: var(--themecolor-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--themecolor-dark);
    --bs-btn-active-border-color: var(--themecolor-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--themecolor);
    --bs-btn-disabled-border-color: var(--themecolor);
}

.btn-outline-primary {
    --bs-btn-color: var(--themecolor);
    --bs-btn-border-color: var(--themecolor);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--themecolor);
    --bs-btn-hover-border-color: var(--themecolor);
    --bs-btn-focus-shadow-rgb: var(--themecolor-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--themecolor-dark);
    --bs-btn-active-border-color: var(--themecolor-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--themecolor);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--themecolor);
    --bs-gradient: none;
}

.btn-primary-gradient {
    background: linear-gradient(90deg, #08B4A9 0%, #0086A3 100%);
    color: var(--bs-white);
    border-color: #08B4A9 !important;
    transition: all .2s;
}
.btn-primary-gradient:hover,
.btn-primary-gradient:focus {
    color: var(--bs-gray-100) !important;
    opacity: .65;
}
.btn-primary-gradient:focus {
    transform: scale(.99);
}

.btn-outline-primary i {
    color: var(--themecolor);
}

.btn-outline-primary:hover i,
.btn-outline-primary:first-child:active i,
.btn-outline-primary.active i,
.btn-outline-primary.show i,
.btn-outline-primary:focus-visible i {
    color: var(--bs-btn-active-color);
}

.btn-link {
    --bs-btn-color: var(--themecolor);
    --bs-btn-hover-color: var(--themecolor-dark);
    --bs-btn-active-color: var(--themecolor-darker);
    --bs-btn-focus-shadow-rgb: var(--themecolor-rgb);
}

/* FORMS */
.form-control {
    --cnvs-input-focus-box-shadow: unset;
    color: var(--themecolor-text-bold);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 14px;
}

.form-select {
    color: var(--themecolor-text-bold);
    border-radius: 0.375rem;
    padding: 0.5rem 2.125rem 0.5rem 1rem;
    font-size: 14px;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--bs-secondary-bg) !important;
}

.form-check-input {
    min-width: 1em;
}

.form-check-input:checked {
    background-color: var(--themecolor);
    border-color: var(--themecolor);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--themecolor-rgb), 25%);
}

.form-label {
    color: var(--themecolor-text-bold);
    font-weight: 400;
    font-size: 0.85rem;
}

.form-label.required::after {
    content: " *";
    color: var(--bs-danger);
}

.form-label.optional::after {
    content: "(Opsional)";
    color: var(--themecolor-text);
    padding-left: 0.25rem;
    font-weight: 400;
}

.form-password,
.form-confirmation {
    position: relative;
}

.form-password input,
.form-confirmation input {
    padding-right: calc(1.125rem + 2.5rem);
}

.form-password .btn-view-password,
.form-confirmation .btn-view-password {
    --bs-btn-active-border-color: transparent;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.input-group .btn,
.input-group .input-group-text,
.input-group .form-control {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-white);
    font-size: 0.875rem;
}

.input-group .btn,
.input-group .input-group-text {
    padding: 0.5rem 0.4rem 0.5rem 1rem;
    border-right: 0;
}

.input-group .form-control {
    padding: 0.5rem 1rem 0.5rem 0.4rem;
    border-left: 0;
}

.input-group.search-form .btn,
.input-group.search-form .form-control {
    border-color: var(--themecolor);
    color: var(--themecolor);
    background-color: var(--bs-white);
}

.input-group.search-form input::placeholder {
    color: #7dafbc;
    font-weight: lighter;
}

/* TABLE */
table th {
    background-color: #0C195A !important;
}

.table thead tr:first-child th:first-child {
    border-top-left-radius: 9px;
}

.table thead tr:first-child th:last-child {
    border-top-right-radius: 9px;
}

.table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 9px;
}

.table tbody tr:last-child td:last-child {
    border-radius: 0 0 9px 0;
}


/* DATATABLE */

table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: unset;
}

table.dataTable.table-striped>tbody>tr.even>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    box-shadow: inset 0 0 0 9999px var(--color2);
}

table.dataTable td.dt-control:before {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--themecolor);
}

table.dataTable tr.dt-hasChild td.dt-control:before {
    content: "\f077";
}

table.dataTable tr.dt-hasChild + tr > td {
    padding-left: 1.4rem;
}

.datatable-custom {
    margin-top: unset !important;
}

.datatable-custom tr th,
.datatable-custom tr td {
    text-align: center;
    vertical-align: middle;
    /* padding: 0.25rem 0.75rem; */
    font-size: 0.8rem;
}

.datatable-custom tfoot tr th {
    color: var(--themecolor-text);
}

.datatable-custom tfoot tr th.text-total {
    color: var(--themecolor);
}

.datatable-custom thead {
    color: white;
    /* background-color: var(--themecolor); */
}

.datatable-custom thead > tr > th {
    border-bottom-width: 0;
}

/* .datatable-custom thead>tr>th:first-child {
    border-radius: 6px 0 0 6px;
}

.datatable-custom thead>tr>th:last-child {
    border-radius: 0 6px 6px 0;
} */

/* .datatable-custom thead>tr>th.sorting:before, */
.datatable-custom thead > tr > th.sorting:after {
    /* opacity: 0.4; */
    opacity: 1;
    content: "\F3CA";
    font-family: "bootstrap-icons";
    font-size: 0.8rem;
    top: 35%;
    right: 5px;
    /* content: '\f160';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--bs-white);
    position: relative;
    right: -0.5rem; */
}

.datatable-custom thead > tr > th.sorting:before {
    content: "";
}

/* .datatable-custom thead>tr>td.sorting_asc:before,
.datatable-custom thead>tr>td.sorting_desc:after, */
.datatable-custom thead > tr > th.sorting_asc:after {
    opacity: 0.95;
    transform: rotate(180deg);
}
.datatable-custom thead > tr > th.sorting_desc:after {
    opacity: 0.95;
    transform: rotate(0deg);
}

/* .datatable-custom thead>tr>th.sorting_desc:after {
    content: '\f160';
} */

/* .datatable-custom thead>tr>th.sorting_asc:after {
    content: '\f885';
} */

.datatable-custom tbody > tr > td {
    border-bottom-width: 0;
}

.datatable-custom tbody > tr.even > td {
    background-color: var(--bs-white);
}

.datatable-custom tbody > tr > td .btn-link {
    color: var(--themecolor);
    border-bottom: 1px dashed var(--themecolor);
    text-decoration: none;
}

.datatable-custom tbody > tr > td .btn-link:has(i) {
    border-bottom: 0;
}

.datatable-custom tbody > tr > td .btn-link-danger {
    color: #d61745;
}

.datatable-custom tbody > tr > td .btn-link.disabled,
.datatable-custom tbody > tr > td .btn-link:disabled {
    color: #818181;
}

.custom-footer {
    /* color: #606060; */
    /* background-color: white; */
    border-radius: 6px;
}

.custom-footer .pagination {
    margin-bottom: 0;
}

.custom-footer .paging_input {
    margin-bottom: 1rem;
}

.custom-footer .paginate_button {
    cursor: pointer;
    border-radius: 50%;
    font-weight: 600;
    color: var(--themecolor);
}

.custom-footer .paginate_input {
    text-align: center;
    width: 2rem;
    border: unset;
    border-radius: 6px;
    color: var(--themecolor);
}

.custom-footer .paginate_button .page-link {
    color: var(--themecolor);
    background-color: unset;
    border: unset;
    border-radius: 15px;
    opacity: 0.65;
    transition: all .1s;
}
.custom-footer .paginate_button .page-link:focus,
.custom-footer .paginate_button:not(.active) .page-link:hover {
    background-color:rgba(204, 204, 204, 0.5);
    outline: 0;
    box-shadow: unset !important;
    opacity: 1;
}

.custom-footer .paginate_button.previous .page-link,
.custom-footer .paginate_button.next .page-link {
    color: var(--themecolor);
    background-color: unset;
    border: unset;
    opacity: 1;
}

.custom-footer .paginate_button.disabled,
.custom-footer .paginate_button.disabled:hover,
.custom-footer .paginate_button.disabled:active {
    cursor: unset;
    opacity: 0.65;
}

.custom-footer .paginate_button.active .page-link {
    opacity: 1;
}

.custom-footer .dataTables_length {
    height: 100%;
    margin-bottom: 1rem;
}

.custom-footer .dataTables_length label {
    color: #606060;
    font-size: 1rem;
    letter-spacing: unset;
    text-transform: unset;
    margin-bottom: unset;
    width: 73px;
}

.custom-footer .dataTables_length label select {
    padding: 0.25rem 2.25rem 0.25rem 0.5rem;
    /* margin-right: 0.5rem;
    border-radius: 0.25rem;
    color: white; */
    /* background: var(--themecolor); */
}

.custom-footer .dataTables_info {
    line-height: 1;
    padding-top: unset;
}

.custom-footer * {
    font-size: 12px;
}

::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 100vh;
    height: 10px;
    background: var(--themecolor);
}

::-webkit-scrollbar:horizontal {
    height: 6px;
    background: transparent;
}

/* Track untuk scroll-x */
::-webkit-scrollbar-track:horizontal {
    border-radius: 100vh;
    background: transparent;
}

/* Handle untuk scroll-x */
::-webkit-scrollbar-thumb:horizontal {
    border-radius: 100vh;
    height: 2px;
    background: var(--themecolor);
}

/* SELECT 2 */
.select2.select2-container {
    width: 100% !important;
}

.select2.select2-container .select2-selection {
    height: unset;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.select2.select2-container.select2-container--focus .select2-selection {
    border-color: #999;
}

.select2.select2-container .select2-selection .select2-selection__rendered {
    line-height: 1.5;
    padding: 0.5rem 1.75rem 0.5rem 1.125rem;
    font-size: 0.9rem;
}

.select2.select2-container .select2-selection .select2-selection__arrow {
    width: 40px;
    height: 100%;
}

.select2.select2-container .select2-selection .select2-selection__arrow b {
    border-color: var(--themecolor) transparent transparent transparent;
}

.select2-container.select2-container--default.select2-container--open {
    z-index: 1099;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--themecolor) transparent;
}

.select2-container.select2-container--default .select2-dropdown {
    background-color: var(--bs-white);
    border-color: #999;
    color: var(--themecolor-text-bold);
}

.select2-container.select2-container--default .select2-search--dropdown {
    padding: 0.375rem;
}

.select2-container.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #999;
    padding: 0.5rem 1.125rem;
}

.select2-container.select2-container--default .select2-results__option {
    padding: 0.5rem 1.125rem;
    font-size: 0.9rem;
}

.select2-container.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--bs-gray-200);
}

.select2-container.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--themecolor);
    color: var(--bs-white);
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* LOADER */

.lds-grid {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
}

.lds-grid div {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--themecolor);
    animation: lds-grid 1.2s linear infinite;
}

.lds-grid div:nth-child(1) {
    top: 4px;
    left: 4px;
    animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
    top: 4px;
    left: 16px;
    animation-delay: -0.4s;
}

.lds-grid div:nth-child(3) {
    top: 4px;
    left: 28px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
    top: 16px;
    left: 4px;
    animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
    top: 16px;
    left: 16px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
    top: 16px;
    left: 28px;
    animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
    top: 28px;
    left: 4px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
    top: 28px;
    left: 16px;
    animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
    top: 28px;
    left: 28px;
    animation-delay: -1.6s;
}

@keyframes lds-grid {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* DATEPICKER */
.bootstrap-datetimepicker-widget table {
    width: 100% !important;
}
.bootstrap-datetimepicker-widget table thead tr th {
    background-color: var(--bs-white) !important;
    color: var(--bs-black) !important;
    font-weight: bold !important;
}

.bootstrap-datetimepicker-widget table thead tr th:hover {
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.075) !important;
}

.bootstrap-datetimepicker-widget table td {
    position: relative;
}

.datepicker .table-condensed {
    width: 100% !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 20rem;
}

/* CARD */
.card {
    box-shadow: 0px 0px 24.86px 0px #3737371F;
}

/* DARK MODE */
[data-bs-theme=dark] #wrapper {
    background-color: #2F3649 !important;
}

[data-bs-theme=dark] .card,
[data-bs-theme=dark] .bg-white,
[data-bs-theme=dark] .bg-light,
[data-bs-theme=dark] .card-question {
    background-color: #272E41 !important;
}

[data-bs-theme=dark] .detail-card .card-header,
[data-bs-theme=dark] .detail-card .card-body {
    background-color: #FFFFFF3D !important;
}

[data-bs-theme=dark] .text-primary,
[data-bs-theme=dark] .text-dark,
[data-bs-theme=dark] h1,
[data-bs-theme=dark] h2,
[data-bs-theme=dark] h3,
[data-bs-theme=dark] h4,
[data-bs-theme=dark] h5,
[data-bs-theme=dark] h6,
[data-bs-theme=dark] p,
[data-bs-theme=dark] li,
[data-bs-theme=dark] label,
[data-bs-theme=dark] span,
[data-bs-theme=dark] .dataTables_info,
[data-bs-theme=dark] .detail-card *,
[data-bs-theme=dark] .page-link,
[data-bs-theme=dark] .dropdown-item {
    color: var(--bs-white) !important;
}

[data-bs-theme=dark] div.col-6 {
    color: var(--bs-white);
}

[data-bs-theme=dark] .text-normal {
    color: #76BB01 !important;
}

[data-bs-theme=dark] .text-shutdown,
[data-bs-theme=dark] .text-anomaly {
    color: #B53030 !important;
}

[data-bs-theme=dark] .text-undefined {
    color: #FDAF40 !important;
}

[data-bs-theme=dark] .nav-link {
    color: rgba(255, 255, 255, 0.5);
}

[data-bs-theme=dark] .nav-link:hover {
    color: var(--themecolor);
}

[data-bs-theme=dark] .select2-selection__rendered {
    color: var(--bs-white) !important;
}

[data-bs-theme=dark] table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: inset 0 0 0 9999px #FFFFFF1F;
}

[data-bs-theme=dark] table.dataTable.table-striped>tbody>tr.even>* {
    box-shadow: inset 0 0 0 9999px #272E41;
}

[data-bs-theme=dark] .select2-container--default .select2-selection--single,
[data-bs-theme=dark] .select2-container.select2-container--default .select2-search--dropdown,
[data-bs-theme=dark] .select2-container.select2-container--default .select2-search--dropdown .select2-search__field,
[data-bs-theme=dark] .select2.select2-container .select2-selection,
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .input-group .btn, 
[data-bs-theme=dark] .input-group .input-group-text, 
[data-bs-theme=dark] .input-group .form-control {
    background-color: #FFFFFF1F !important;
    color: var(--bs-white) !important;
}

[data-bs-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: unset;
}

[data-bs-theme=dark] .select2-container.select2-container--default .select2-dropdown {
    background-color: #616675 !important;
}

[data-bs-theme=dark] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #484E5F !important;
}

[data-bs-theme=dark] .bootstrap-datetimepicker-widget.dropdown-menu,
[data-bs-theme=dark] .bootstrap-datetimepicker-widget table thead tr th,
[data-bs-theme=dark] .daterangepicker.show-calendar .drp-calendar,
[data-bs-theme=dark] .daterangepicker .drp-calendar.single .calendar-table,
[data-bs-theme=dark] .daterangepicker .calendar-table th, 
[data-bs-theme=dark] .daterangepicker .calendar-table td,
[data-bs-theme=dark] .daterangepicker .drp-buttons {
    background-color: #272E41 !important;
    color: var(--bs-white) !important;
}

[data-bs-theme=dark] .daterangepicker td.in-range {
    background-color: #616675 !important;
}

[data-bs-theme=dark] .daterangepicker td.available:hover, 
[data-bs-theme=dark] .daterangepicker th.available:hover {
    background-color: #4E5C82 !important;
}

[data-bs-theme=dark] .daterangepicker td.active,
[data-bs-theme=dark] .daterangepicker td.active:hover {
    background-color: #66CCDF !important;
}

/* DIAGRAM SCADA */
[data-bs-theme=dark] g[fill="#000000"],
[data-bs-theme=dark] g[fill="#000"] {
    fill: #ffffff;
}

[data-bs-theme=dark] g[fill="#b53030"],
[data-bs-theme=dark] g[fill="#B53030"] {
    fill: #DA5A5A;
}

[data-bs-theme=dark] rect[stroke="#000000"] {
    stroke: #ffffff;
}

[data-bs-theme=dark] rect[stroke="#b53030"],
[data-bs-theme=dark] rect[stroke="#B53030"] {
    stroke: #DA5A5A;
}

[data-bs-theme=dark] path[stroke="#000000"] {
    stroke: #ffffff;
}

[data-bs-theme=dark] path[stroke="#b53030"],
[data-bs-theme=dark] path[stroke="#B53030"] {
    stroke: #DA5A5A;
}
/*  */

/* TABLE */
[data-bs-theme=dark] table tr th,
[data-bs-theme=dark] table tr td {
    background-color: #FFFFFF1F !important;
    color: var(--bs-white) !important;
}
/*  */

/* END OF DARK MODE */