.display-none {
  display: none !important;
}

#loader-screen-tmv {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

#loader-screen-tmv .container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1800px;
  flex-direction: column;
}

#loader-screen-tmv .animation-container{
  width: 720px
}

#loader-screen-tmv .logo-container {
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* styles.css */

/* Container occupying the full screen */
#loader-screen-1e .container {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: 12.5vh;
    grid-template-columns: repeat(auto-fill, 12.5vw);
    overflow: hidden;
  }
  
  /* Item styles with responsive grid spans */
  #loader-screen-1e .item {
    position: relative;
  }

  #loader-screen-1e .item.md {
    grid-column: span 2;
    grid-row: span 2;
  }

  #loader-screen-1e .item.lg {
    grid-column: span 3;
    grid-row: span 3;
  }

  #loader-screen-1e .item.lg .square,
  #loader-screen-1e .item.lg .rectangle {
    transform: scale(0.8);
  }
  
  /* Icon styles with CSS variables for dynamic properties */
  #loader-screen-1e .icon {
    background-color: var(--icon-color);
    height: 60%;
    left: var(--icon-position-left, 0);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    opacity: var(--opacity, 0);
    position: absolute;
    top: var(--icon-position-top, 0);
    transition: opacity 3s;
    width: 60%;
  }

  #loader-screen-1e .icon.circle {
    mask-image: url('assets/wonder-circle.svg');
  }

  #loader-screen-1e .icon.quadrant {
    mask-image: url('assets/wonder-quadrant.svg');
  }

  #loader-screen-1e .icon.rectangle {
    mask-image: url('assets/wonder-rectangle.svg');
  }

  #loader-screen-1e .icon.rectangle-rounded {
    mask-image: url('assets/wonder-rectangle-rounded.svg');
  }

  #loader-screen-1e .icon.square {
    mask-image: url('assets/wonder-square.svg');
  }

  #loader-screen-1e .icon.square-rotated {
    mask-image: url('assets/wonder-square-rotated.svg');
  }

  #loader-screen-1e .icon.triangle {
    mask-image: url('assets/wonder-triangle-iso.svg');
  }

  #loader-screen-1e .icon.triangle-right-angle {
    mask-image: url('assets/wonder-triangle-right-angle.svg');
  }
  
  /* Logo container in the center of the screen */
  #loader-screen-1e .logo-container {
    align-items: center;
    display: flex;
    justify-content: center;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
  }

  #loader-screen-1e .logo {
    height: 20vmin;
  }

  /* Initial page loader */

    :root {
    --mui-primary: #3377e4;   /* MUI blue */
    --mui-track:   #e0e0e0;   /* Track color */
    --size:        48px;      /* Loader size */
    --thickness:   4px;       /* Ring thickness */
    --speed:       1.4s;      /* Rotation speed */
  }

  #loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Optional background color */
  }

  .mui-circular {
    width: var(--size);
    height: var(--size);
    display: inline-block;
    position: relative;
  }

  /* Static track ring */
  .mui-circular::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 var(--thickness) var(--mui-track) inset;
  }

  /* Animated arc */
  .mui-circular::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      conic-gradient(from 0deg, var(--mui-primary) 0 90deg, transparent 90deg 360deg);
    -webkit-mask:
      radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0);
            mask:
      radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0);
    animation: mui-rotate var(--speed) linear infinite,
               mui-sweep 1.8s ease-in-out infinite;
  }

  @keyframes mui-rotate {
    to { transform: rotate(360deg); }
  }

  /* Arc length animation like MUI’s dash keyframes */
  @keyframes mui-sweep {
    0%   { background: conic-gradient(from 0deg,   var(--mui-primary) 0 60deg, transparent 60deg 360deg); }
    50%  { background: conic-gradient(from 180deg, var(--mui-primary) 0 300deg, transparent 300deg 360deg); }
    100% { background: conic-gradient(from 360deg, var(--mui-primary) 0 60deg, transparent 60deg 360deg); }
  }