/* 
body {
    background-color: #2384d1;
} */

#root {
  display: none;
}
/* 
.bg-logo {
    position: absolute;
    z-index: -999;
    width: 150px;
    left: calc(50% - 75px);
    top: calc(50% - 90px);
}

.update-message-container {
    position: absolute;
    display: none;
    align-items: center;
    gap: 5px;
    width: 300px;
    left: calc(50% - 75px);
    top: calc(50% - 90px + 190px);
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.update-message-container.show {
  display: flex;
  opacity: 1;
} */

.loader {
    width: 30px;
    height: 30px;
    display: inline-block;
    position: relative;
  }
  .loader::after,
  .loader::before {
    content: '';  
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(0);
    animation: animloader 2s linear infinite;
  }
  .loader::after {
    animation-delay: 1s;
  }
  
  @keyframes animloader {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }


@keyframes blink-twice {
    0%, 20% {
      background-color: transparent;
    }
    30%, 40% {
      background-color: rgba(59, 130, 246, 1); /* blue-500 */
    }
    50%, 70% {
      background-color: transparent;
    }
    80%, 90% {
      background-color: rgba(59, 130, 246, 1); /* blue-500 */
    }
    100% {
      background-color: transparent;
    }
}

.animate-blink-twice--blue {
    animation: blink-twice 1.8s ease-in-out 1 0.5s; /* duration 1.8s, delay 0.5s */
}


.main-content {
    opacity: 1;
    overflow-y: auto;
    width: -webkit-fill-available;
    height: 100%;
    scroll-behavior: smooth !important;
}

.not-online__wrapper {
    position: absolute;
    display: none;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(56, 67, 90, 0.7);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

/* .canvas__cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: white;
    opacity: 1;
    animation: fadeIn 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-fill-mode: forwards;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
} */

/* #dynamic-bg {
    width:100%;
    height:100%;
    --gradient-color-1: #f0f4f4; 
    --gradient-color-2: #b3f4f4; 
    --gradient-color-3: #6da2f2;  
    --gradient-color-4: #b8f3f3;
    z-index: -1;
    position: absolute;
    left: 0;
} */

@keyframes fadeIn {  
    from {  
        opacity:1;  
    }  
 
    to {  
        opacity:0;  
    }  
 }