/** Spinner V2 **/
.loader__container {
    width: 100%;
    height: 100%;
      display: block;
      & .graphCenter{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          
        
          & .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);}
    }