/*
* custom.css
* File include item custom only specific css only
******************************************************************************/

.dashed-line {
    border-top: 1px dashed #000;
    width: 100%;
    margin: 10px 0;
}

/* table borderd */
.table-bordered {
    border: 1px solid #dee2e6 !important;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6 !important;
}

/* css list icon tabler di modal*/
#icon_search {
    margin-bottom: 15px;
    font-size: 1rem;
}

.icon-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.icon-item:hover {
    background-color: #f0f0f0;
}

.icon-item i {
    font-size: 1.5rem;
    vertical-align: middle;
}

.icon-item i {
    font-family: 'tabler-icons';
    font-style: normal;
}

/* menghilangkan search global datatables */
div.dataTables_wrapper div.dataTables_filter {
    display: none;
}

/* menambahkan border dari semua sisi ketika menggunakan datatables */
#myTable th,
#myTable td {
    border: 1px solid #dee2e6;
    /* padding: 12px; */
}

/* Loader css */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    z-index: 999998;
    display: none;
    pointer-events: all;
}

.loader {
    --background: linear-gradient(135deg, #7ab7b8, #356162);
    --shadow: rgba(53, 97, 98, 0.28);
    --text: #6C7486;
    --page: rgba(255, 255, 255, 0.36);
    --page-fold: rgba(255, 255, 255, 0.52);
    --duration: 1.5s;
    width: 200px;
    height: 140px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}

.loader:before,
.loader:after {
    --r: -6deg;
    content: '';
    position: fixed;
    bottom: 8px;
    width: 120px;
    top: 80%;
    box-shadow: 0 16px 12px var(--shadow);
    transform: rotate(var(--r));
}

.loader:before {
    left: 4px;
}

.loader:after {
    --r: 6deg;
    right: 4px;
}

.loader div {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    position: relative;
    z-index: 1;
    perspective: 600px;
    box-shadow: 0 4px 6px var(--shadow);
    background-image: var(--background);
}

.loader div ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.loader div ul li {
    --r: 180deg;
    --o: 0;
    --c: var(--page);
    position: absolute;
    top: 10px;
    left: 10px;
    transform-origin: 100% 50%;
    color: var(--c);
    opacity: var(--o);
    transform: rotateY(var(--r));
    animation: var(--duration) ease infinite;
}

.loader div ul li:nth-child(2) {
    --c: var(--page-fold);
    animation-name: page-2;
}

.loader div ul li:nth-child(3) {
    --c: var(--page-fold);
    animation-name: page-3;
}

.loader div ul li:nth-child(4) {
    --c: var(--page-fold);
    animation-name: page-4;
}

.loader div ul li:nth-child(5) {
    --c: var(--page-fold);
    animation-name: page-5;
}

.loader div ul li svg {
    width: 90px;
    height: 120px;
    display: block;
}

.loader div ul li:first-child {
    --r: 0deg;
    --o: 1;
}

.loader div ul li:last-child {
    --o: 1;
}

.loader span {
    display: block;
    text-align: center;
    color: var(--text);
    margin-top: 20px;
}

.loader span:after {
    content: "";
    animation: Dots 2s cubic-bezier(0, .39, 1, .68) infinite;
}

@keyframes Dots {
    0% {
        content: "";
    }

    33% {
        content: ".";
    }

    66% {
        content: "..";
    }

    100% {
        content: "...";
    }
}

/* Animasi flip page */
@keyframes page-2 {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    35%,
    100% {
        opacity: 0;
    }

    50%,
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-3 {
    15% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }

    65%,
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-4 {
    30% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    65%,
    100% {
        opacity: 0;
    }

    80%,
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-5 {
    45% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    80%,
    100% {
        opacity: 0;
    }

    95%,
    100% {
        transform: rotateY(0deg);
    }
}


@keyframes bblprg {
    100% {
        background-size: 100% 100%
    }
}

.light-style .menu .app-brand.custom {
    height: 64px;
}

.dark-style .menu .app-brand.custom {
    height: 64px;
}

.app-brand-logo.custom {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -ms-flexbox;
    display: flex;
    width: 50px;
    height: 40px;
}

.app-brand-logo.custom svg {
    width: 35px;
    height: 24px;
}

.app-brand-text.custom {
    font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
}

.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 70px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
    z-index: auto;
}

/*
* Content
******************************************************************************/

.custom-blocks>* {
    display: block !important;
}

.custom-inline-spacing>* {
    margin: 1rem 0.375rem 0 0 !important;
}

/* ? .custom-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .custom-only-element class with .custom-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.custom-vertical-spacing>* {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.custom-vertical-spacing.custom-only-element> :first-child {
    margin-top: 0 !important;
}

.custom-vertical-spacing-lg>* {
    margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
}

.custom-vertical-spacing-lg.custom-only-element> :first-child {
    margin-top: 0 !important;
}

.custom-vertical-spacing-xl>* {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
}

.custom-vertical-spacing-xl.custom-only-element> :first-child {
    margin-top: 0 !important;
}

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir='rtl'] .rtl-only {
    display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
    #dropdown-variation-custom .btn-group .text-truncate {
        width: 254px;
        position: relative;
    }

    #dropdown-variation-custom .btn-group .text-truncate::after {
        position: absolute;
        top: 45%;
        right: 0.65rem;
    }
}

/*
* Layout custom
******************************************************************************/

.layout-custom-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1rem;
}

.layout-custom-placeholder img {
    width: 900px;
}

.layout-custom-info {
    text-align: center;
    margin-top: 1rem;
}