.page-bg::after {
   content:'';
   position: absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background-color: #003205;
   opacity: 0.75;
   z-index: 1;
}
.page-bg svg {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 2;
   opacity: 0.1;
}
.dark .page-bg svg {
   opacity: 0.02;
}
.page-bg .card {
   border: 4px solid var(--tw-fluo-alt);
   position: relative;
   z-index: 3;
}
.bs {
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.new-alert button {
   width: 18px;
   height: 18px;
}
.new-alert button svg {
   opacity: 0.8;
}

.page-bg {
   background-image: url('../metronic-assets/9.1.2/media/new/background-setup.jpeg');
   background-size: cover;
}

.dark .page-bg::after {
   background-color: #071612;
   opacity: 0.95;
}

.setting-up {
   transition: width 0.8s ease-in-out;
   width: 135px;
}

.loader {
  width: 28px;
  height: 28px;
  display: block;
  margin: 7.5px auto;
  position: relative;
  color: white;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.not-loading .loader {
   display: none;
}

.loading {
   width: 55px;
}

.loading .not-loader {
   display: none;
}

.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: scale(0.5) translate(0, 0);
  background-color: #FFF;
  border-radius: 50%;
  animation: animloader 1s infinite ease-in-out;
}
.loader::before {
  background-color: var(--tw-fluo);
  transform: scale(0.5) translate(-28px, -28px);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes animloader {
    50% {
      transform: scale(1) translate(-50%, -50%);
}
}