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

/* loader animation */
.loader-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgb(255, 255, 255, 0.7);
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
}

.loader {
   transform: rotateZ(45deg);
   position: fixed;
   color: #11D2FF;
   top: 40%;
   left: 50%;
   width: 100px;
   height: 100px;
}

.loader:before,
.loader:after {
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: inherit;
   height: inherit;
   border-radius: 50%;
   transform: rotateX(70deg);
   animation: .6s spin linear infinite;
}

.loader:after {
   color: #0166FE;
   transform: rotateY(70deg);
   animation-delay: .4s;
}

@keyframes rotate {
   0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
   }

   100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
   }
}

@keyframes rotateccw {
   0% {
      transform: translate(-50%, -50%) rotate(0deg);
   }

   100% {
      transform: translate(-50%, -50%) rotate(-360deg);
   }
}

@keyframes spin {

   0%,
   100% {
      box-shadow: .5em 0px 0 0px currentcolor;
   }

   12% {
      box-shadow: .5em .5em 0 0 currentcolor;
   }

   25% {
      box-shadow: 0 .5em 0 0px currentcolor;
   }

   37% {
      box-shadow: -.5em .5em 0 0 currentcolor;
   }

   50% {
      box-shadow: -.5em 0 0 0 currentcolor;
   }

   62% {
      box-shadow: -.5em -.5em 0 0 currentcolor;
   }

   75% {
      box-shadow: 0px -.5em 0 0 currentcolor;
   }

   87% {
      box-shadow: .5em -.5em 0 0 currentcolor;
   }
}

@media (max-width: 768px) {
   .loader {
      width: 10px;
   }
}

@media (max-width: 576px) {
   .loader {
      width: 30px;
   }
}

/* hilangkan search global datatable */
div.dataTables_wrapper div.dataTables_filter {
   display: none;
}

/* menambahkan border dari semua sisi ketika menggunakan datatables */
.table-bordered {
   border-collapse: collapse;
   border-spacing: 0;
}

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

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

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

.app-brand-logo.demo {
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: center;
   justify-content: center;
   display: -ms-flexbox;
   display: flex;
   width: 34px;
   height: 24px;
}

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

.app-brand-text.demo {
   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: 78px !important;
}

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

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

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

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

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

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

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

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

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

.demo-vertical-spacing-xl.demo-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-demo .btn-group .text-truncate {
      width: 254px;
      position: relative;
   }

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

/*
* Layout demo
******************************************************************************/

.layout-demo-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-demo-placeholder img {
   width: 900px;
}

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