/** Spinner V2 **/
.loader__container {
  width: 100%;
  height: 100%;
    display: block;
    & .graphCenter{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        @media only screen and (max-width: 500px){
          top: 70%;
        }
        
      
        & .loader {
          width: 8px;
          height: 40px;
          border-radius: 4px;
          display: block;
          margin: 20px auto;
          position: relative;
          background: currentColor;
          color: var(--suite-primary-S360);
          box-sizing: border-box;
          animation: animloader 0.3s 0.3s linear infinite alternate;
          opacity: 0; 
          transform: scale(0); 
        }

        .show_loader {
          opacity: 1; 
          transform: scale(1);
          transition: opacity 0.15s ease, transform 0.15s ease; 
        }
      
        & .loader::after, .loader::before {
          content: '';
          width: 8px;
          height: 40px;
          border-radius: 4px;
          background: currentColor;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 20px;
          box-sizing: border-box;
          animation: animloader 0.3s  0.45s  linear infinite alternate;
        }
        & .loader::before {
          left: -20px;
          animation-delay: 0s;
        }
      
      }
}
  
.loaded {
  display: none;
}

.show_items {
  opacity: 1 !important; 
  transform: scale(1) !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hidden_items {
  opacity: 0; 
  transform: scale(0); 
  transition: opacity 0.2s ease, transform 0.2s ease;
}


  /***? Global KeyFrames ***/
  
  @keyframes animloader {
  0%   { height: 48px}
  100% { height: 4px}
  }
  
  @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
  }