/* global css */
body {
    /* font-weight: 600; */
}

p {
    /* font-size: 1.25rem; */
}

/* 1. Styling LOGO */
.fixed-background-dik {
    background: #cb2d3e;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ef473a, #cb2d3e);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ef473a, #cb2d3e);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    /* background-image: linear-gradient( 312deg, rgba(249,151,119,1) -2.1%, rgb(25 5 75) 90% ); */

    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.logo-single-dik {
    width: 110px;
    height: 35px;
    background: url(../img/logo.png) no-repeat;
    background-size: contain;
    background-position: left center;
    display: inline-block;
    margin-bottom: 60px;
}

/* 2. Datatable */
tfoot {
    display: table-header-group;
}

.dataTables_filter {
    display: none;
}

/* .row .view-filter {
    display: none;
} */

* {
    scrollbar-width: 1px;
    scrollbar-color: var(--theme-color-2);
    /* scrollbar-color: var(--theme-color-2) #343a40; */
}

/* 3. Scroll */
*::-webkit-scrollbar {
    width: 5px;
    height: 7px;
}

*::-webkit-scrollbar-track {
    background: #7b859043;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--theme-color-2);
    border-radius: 10px;
}

.scrollXMenu {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    min-height: 50px;
}

.scrollYMenu {
    overflow-x: hidden;
    overflow-y: auto;
    /* white-space: nowrap; */
    /* width: fit-content; */
    height: 30vh;
}

.thead-sticky {
    position: sticky;
    top: 0;
    z-index: 1 !important;
    background-color: var(--foreground-color);
}

/* 4. sweet alert 2 */
body.swal2-shown>[aria-hidden="true"] {
    transition: 0.1s filter;
    filter: blur(10px);
}

/* 5. styling icon material google*/
i.material-icons-outlined.md-64 {
    font-size: 4em;
}

i.material-symbols-outlined.md-64 {
    font-size: 4em;
}

.navbar .navbar-left {
    flex-basis: 20%;
}

.navbar .navbar-right {
    flex-basis: 25%;
    text-align: right;
}

.form-only-border-bootom {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.form-only-border-bottom {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* select2 */
span.select2-selection__clear {
    padding-right: 5px !important;
}

/* image card */
.img-left {
    aspect-ratio: 1/1;
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    border-top-right-radius: initial !important;
    border-bottom-right-radius: initial !important;
}

:root {
    --sw-border-color: var(--separator-color);
    --sw-toolbar-btn-color: var(--foreground-color);
    --sw-toolbar-btn-background-color: var(--theme-color-1);
    --sw-anchor-default-primary-color: var(--theme-color-3);
    --sw-anchor-default-secondary-color: var(--theme-color-6);
    --sw-anchor-active-primary-color: var(--theme-color-1);
    --sw-anchor-active-secondary-color: var(--theme-color-2);
    --sw-anchor-done-primary-color: var(--separator-color);
    --sw-anchor-done-secondary-color: var(--theme-color-1);
    --sw-anchor-disabled-primary-color: var(--separator-color);
    --sw-anchor-disabled-secondary-color: var(--separator-color);
    --sw-anchor-error-primary-color: #dc3545;
    --sw-anchor-error-secondary-color: var(--foreground-color);
    --sw-anchor-warning-primary-color: #ffc107;
    --sw-anchor-warning-secondary-color: var(--foreground-color);
    --sw-progress-color: var(--theme-color-1);
    --sw-progress-background-color: var(--separator-color);
    --sw-loader-color: var(--theme-color-1);
    --sw-loader-background-color: var(--separator-color);
    --sw-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
}

.sw-theme-dots>.nav::before {
    content: " ";
    position: absolute;
    top: 18px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--sw-border-color);
    border-radius: 10px;
    z-index: 1;
}

.sw-theme-dots>.nav .nav-link::after {
    content: " ";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    top: -32px;
    width: 25px;
    height: 25px;
    z-index: 99;
    border: 5px solid var(--sw-border-color);
    transition: all 0.5s ease-in-out;
}

.sw-theme-dots>.nav .nav-link.default.done>.num {
    display: block;
    margin-top: -6px;
    font-size: 19px;
    font-weight: bolder;
}

.sw-theme-dots>.nav .nav-link.done>.num {
    color: #111;
}

.sw-theme-dots>.nav .nav-link.done>.num {
    color: rgba(255, 255, 255, 0);
}

.sw-theme-dots>.nav .nav-link.default.active>.num {
    color: #00000000;
    display: none;
}

.sw-theme-dots>.nav .nav-link>.num {
    display: none;
    font-size: 1.5em;
    position: absolute;
    /* display: block; */
    left: 0;
    right: 0;
    top: -31px;
    margin-left: auto;
    margin-right: auto;
    z-index: 100;
    transition: all 0.5s ease-in-out;
}

.tab-scrollable {
    max-height: 400px !important;
    overflow-y: scroll;
}

.tab-scrollable-pagination {
    max-height: 400px !important;
    overflow-y: scroll;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: transparent;
    /* opacity: 1; */
}

.form-currency {
    text-align: end;
}

.form-number {
    text-align: end;
}

td.mini-spacer {
    padding: 3px;
}

.table-fixed {
    /* width: 100%; */
}

/* .table-fixed tbody {
    height: 200px;
    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 {
    /* float: left; */
}

.table-fixed thead tr th {
    /* float: left; */
}

.modal-xxl {
    min-width: 95% !important;
}

.modal-xxl.modal-content.momodal-body {
    min-height: 50vh !important;
}

.form-control.is-invalid {
    border-color: var(--sw-anchor-error-primary-color) !important;
}

.is-invalid .select2-selection,
.needs-validation~span>.select2-dropdown {
    border-color: var(--sw-anchor-error-primary-color) !important;
}

.select2-selection .select2-selection--single .form-control .is-invalid {
    border: 1px solid var(--sw-anchor-error-primary-color) !important;
    max-width: 95% !important;
}

.select2-container--bootstrap .select2-selection--multiple {
    /* height: 60px !important; */
    padding: 0.4rem 0.25rem !important;
    overflow-y: scroll !important;
}

.select2-search__field {
    width: 100%;
}

.dropdown-toggle::after {
    content: none !important;
}

/* common */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}

.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    border: 5px solid #3131314a;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    font: 700 18px/1 "Lato", sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    text-align: center;
    z-index: 9;
    letter-spacing: 3px;
}

/* top left*/
.ribbon-top-left {
    top: -10px;
    left: -10px;
}

.ribbon-top-left::before,
.ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}

.ribbon-top-left::before {
    top: 0;
    right: 0;
}

.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}

.ribbon-top-left span {
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
}

.ribbon-sm {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}

.ribbon-sm span {
    position: absolute;
    display: block;
    width: 226px;
    padding: 5px 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    font: 700 12px/1 "Lato", sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
}

.ribbon-sm::before,
.ribbon-sm::after {
    position: absolute;
    z-index: 9;
    content: "";
    display: block;
    border: 5px solid #3131314a;
}

.ribbon-top-left-sm {
    top: -10px;
    left: -10px;
}

.ribbon-top-left-sm span {
    right: 6px;
    top: 18px;
    transform: rotate(-45deg);
}

.ribbon-top-left-sm::before,
.ribbon-top-left-sm::after {
    border-top-color: transparent;
    border-left-color: transparent;
}

.ribbon-top-left-sm::before {
    top: 0;
    right: 0;
}

.ribbon-top-left-sm::after {
    bottom: 0;
    left: 0;
}

/* ribon sdp */
.ribbon-box {
    position: relative;
    right: 17px;
}

.ribbon-horizontal {
    --f: 20px;
    /* control the folded part*/
    --r: 15px;
    /* control the ribbon shape */
    --t: 10px;
    /* the top offset */
    position: absolute;
    padding: 20px 50px calc(15px + var(--f)) calc(16px + var(--r));
    clip-path: polygon(-41% 5%,
            100% 8%,
            calc(100% - var(--r)) 41%,
            100% calc(101% - var(--f)),
            calc(100% - var(--f)) 62%,
            100% 74%,
            17px 73%,
            17px 96%,
            17px 96%,
            -20px 45%);
    box-shadow: 0 calc(-1 * var(--f)) 0 inset #0005;
    font: 700 20px/1 "Lato", sans-serif;
    color: var(--foreground-color);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    text-align: center;
    z-index: 9;
}

.bg-orange {
    background-color: var(--orange);
    color: var(--foreground-color);
}

.bg-gray {
    background-color: var(--secondary);
    color: var(--light);
}

.bg-teal {
    background-color: var(--teal);
    color: var(--foreground-color);
}

.bg-cyan {
    background-color: var(--cyan);
    color: var(--foreground-color);
}

.bg-indigio {
    background-color: var(--indigio);
    color: var(--light);
}

.bg-purple {
    background-color: var(--purple);
    color: var(--foreground-color);
}

.bg-pink {
    background-color: var(--pink);
    color: var(--light);
}

.bg-light {
    color: var(--white);
}

/* .sticky-column {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    z-index: 1;
} */
.table-freeze th {
    border-left: none;
    padding: 5px;
    width: 80px;
    min-width: 80px;
}

.table-freeze td {
    border-left: none;
    padding: 5px;
    width: 80px;
    min-width: 80px;
}

.table-freeze th:nth-child(1),
.table-freeze td:nth-child(1) {
    position: sticky;
    left: 0;
    width: 150px;
    min-width: 150px;
}

.table-freeze th:nth-child(2),
.table-freeze td:nth-child(2) {
    position: sticky;
    /* 1st cell left/right padding + 1st cell width + 1st cell left/right border width */
    /* 0 + 5 + 150 + 5 + 1 */
    left: 161px;
    width: 50px;
    min-width: 50px;
}

.table-freeze th:nth-child(1),
.table-freeze th:nth-child(2) {
    background: var(--foreground-color);
}

.table-freeze td:nth-child(1),
.table-freeze td:nth-child(2) {
    background: var(--foreground-color);
}

.table-freeze th:nth-child(1),
.table-freeze th:nth-child(2) {
    z-index: 2;
}

/* toast refactor */
div .col-11 .col-sm-3 .alert .alert-info .animated .fadeInDown {
    z-index: 1040;
}

.border-danger {
    border-color: #dc3545 !important;
}

/* DATE PICKER */
div .datepicker {
    z-index: 1030;
}

/* Modal Multiple */
/* .modal:nth-of-type(even) {
    z-index: 1052 !important;
}

.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
} */


.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000000;
    opacity: 1;
    transition: all 0.1s;
}