/* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */
/* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */
/* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */ /* Ominous Loader CSS */



.ominousLoader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 6rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .ominousLoader:before,
  .ominousLoader:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    animation: pulsOut 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
  }
  .ominousLoader:before {
    width: 100%;
    padding-bottom: 100%;
    box-shadow: inset 0 0 0 1rem #fff;
    animation-name: pulsIn;
  }
  .ominousLoader:after {
    width: calc(100% - 2rem);
    padding-bottom: calc(100% - 2rem);
    box-shadow: 0 0 0 0 #fff;
  }

  @keyframes pulsIn {
    0% {
      box-shadow: inset 0 0 0 1rem #fff;
      opacity: 1;
    }
    50%, 100% {
      box-shadow: inset 0 0 0 0 #fff;
      opacity: 0;
    }
  }

  @keyframes pulsOut {
    0%, 50% {
      box-shadow: 0 0 0 0 #fff;
      opacity: 0;
    }
    100% {
      box-shadow: 0 0 0 1rem #fff;
      opacity: 1;
    }
  }
      


/* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */
/* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */
/* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */ /* Analysis Spinner CSS */



.spinnerAnalysing {
    transform     : rotateZ(45deg)                ;
    perspective   : 1000px                        ;
    border-radius : 50%                           ;
    width         : 25px                          ;
    height        : 25px                          ;
    color         : var(--APPLICATION__text-color);
    margin-right  : 14px                          ;
}
.spinnerAnalysing:before,
.spinnerAnalysing:after {
    content       : ''                     ;
    display       : block                  ;
    position      : absolute               ;
    top           : 0                      ;
    left          : 0                      ;
    width         : inherit                ;
    height        : inherit                ;
    border-radius : 50%                    ;
    transform     : rotateX(70deg)         ;
    animation     : 1s spin linear infinite;
}
.spinnerAnalysing:after {
    color           : var(--APPLICATION__tertiary-color);
    transform       : rotateY(70deg)                    ;
    animation-delay : .4s                               ;
}

@keyframes rotate {
    0%   { transform : translate(-50%, -50%) rotateZ(0deg)   }
    100% { transform : translate(-50%, -50%) rotateZ(360deg) }
}
@keyframes rotateccw {
    0%   { transform : translate(-50%, -50%) rotate(0deg)    }
    100% { transform : translate(-50%, -50%) rotate(-360deg) }
}
@keyframes spin {
    0%, 100% {box-shadow :  .2em    0px  0  0px  currentcolor }
    12%      {box-shadow :  .2em   .2em  0  0    currentcolor }
    25%      {box-shadow :   0     .2em  0  0px  currentcolor }
    37%      {box-shadow : -.2em   .2em  0  0    currentcolor }
    50%      {box-shadow : -.2em    0    0  0    currentcolor }
    62%      {box-shadow : -.2em  -.2em  0  0    currentcolor }
    75%      {box-shadow :   0px  -.2em  0  0    currentcolor }
    87%      {box-shadow :  .2em  -.2em  0  0    currentcolor }
}



/* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */
/* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */
/* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */ /* Searching Spinner */



[data-application-theme="dark"] {
  --SPINNER__searching-background-after : rgba(255, 255, 255, 0.7) ;
  --SPINNER__searching-color            : #ffffff                  ;
}
[data-application-theme="light"] {
  --SPINNER__searching-background-after : rgba(0, 0, 0, 0.7)       ;
  --SPINNER__searching-color            : #000000                  ;
}


.spinnerSearching {
    position     : relative                            ;
    width        : 25px                                ;
    height       : 25px                                ;
    background   : var(--APPLICATION__tertiary-color)  ;
    transform    : rotateX(65deg) rotate(45deg)        ;
    /* remove bellows command for perspective change */
    /* transform : perspective(200px) rotateX(65deg) rotate(45deg); */
    color        : var(--SPINNER__searching-color)     ;
    animation    : layers1 1s linear infinite alternate;
    margin-right : 14px                                ;
}
.spinnerSearching:after {
    content    : ''                                         ;
    position   : absolute                                   ;
    inset      : 0                                          ;
    background : var(--SPINNER__searching-background-after) ; 
    animation  : layerTr 1s linear infinite alternate       ;
    color      : var(--SPINNER__searching-color)            ;
}

@keyframes layers1 {
    0%         { box-shadow : 0px 0px 0 0px    }
    90% , 100% { box-shadow : 20px 20px 0 -4px }
}
@keyframes layerTr {
    0%   { transform : translate(0, 0) scale(1)         }
    100% { transform : translate(-25px, -25px) scale(1) }
}



/* Thinking Spinner */ /* Thinking Spinner */ /* Thinking Spinner */ /* Thinking Spinner */ /* Thinking Spinner */ 
/* Thinking Spinner */ /* Thinking Spinner */ /* Thinking Spinner */ /* Thinking Spinner */ /* Thinking Spinner */ 
/* Thinking Spinner */ /* Thinking Spinner */ /* Thinking Spinner */ /* Thinking Spinner */ /* Thinking Spinner */ 



.spinnerThinking {
    position     : relative;
    width        : 25px    ;
    height       : 25px    ;
    margin-right : 14px    ;
}

.spinnerThinking:before , 
.spinnerThinking:after{
    content       : ''                                     ;
    border-radius : 50%                                    ;
    position      : absolute                               ;
    inset         : 0                                      ;
    box-shadow    : 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
}
.spinnerThinking:after {
    box-shadow : 0 2px 0 var(--APPLICATION__tertiary-color) inset  ;
    animation  : rotate 2s linear infinite;
}

@keyframes rotate {
    0%   { transform : rotate(0)      }
    100% { transform : rotate(360deg) }
}



/* Connecting Spinner */ /* Connecting Spinner */ /* Connecting Spinner */ /* Connecting Spinner */
/* Connecting Spinner */ /* Connecting Spinner */ /* Connecting Spinner */ /* Connecting Spinner */
/* Connecting Spinner */ /* Connecting Spinner */ /* Connecting Spinner */ /* Connecting Spinner */



.spinnerConnecting {
    width        : 10px    ; /* 50% of the original width */
    height       : 10px    ; /* 50% of the original height */
    margin-right : 28px    ; /* Adjust margin as needed */
    margin-left  : 17px    ;
    margin-top   : 10px    ;
    margin-bottom: 20px    ;
    position     : relative;
}
.spinnerConnecting::before, .spinnerConnecting::after {
    content         : ''                   ;
    position        : absolute             ;
    left            : 50%                  ;
    top             : 50%                  ;
    transform       : translate(-50%, -50%);
    width           : 24em                 ; /* 50% of the original width */
    height          : 24em                 ; /* 50% of the original height */
    background-image:
        radial-gradient(circle 5px, #FFF 100%, transparent 0), /* 50% of the original circle size */
        radial-gradient(circle 5px, #FFF 100%, transparent 0),
        radial-gradient(circle 5px, #FFF 100%, transparent 0),
        radial-gradient(circle 5px, #FFF 100%, transparent 0),
        radial-gradient(circle 5px, #FFF 100%, transparent 0),
        radial-gradient(circle 5px, #FFF 100%, transparent 0),
        radial-gradient(circle 5px, #FFF 100%, transparent 0),
        radial-gradient(circle 5px, #FFF 100%, transparent 0);
    background-position: 0em -9em, 0em 9em, 9em 0em, -9em 0em, /* 50% of the original positions */
                         6.5em -6.5em, -6.5em -6.5em, 6.5em 6.5em, -6.5em 6.5em;
    background-repeat: no-repeat;
    font-size: 0.25px; /* 50% of the original font size */
    border-radius: 50%;
    animation: blast 1s ease-in infinite;
}
.spinnerConnecting::after {
    font-size: 0.5px; /* 50% of the original font size */
    background: #fff;
    animation: bounce 1s ease-in infinite;
}

@keyframes bounce {
    0%, 100% { font-size: 0.375px; } /* 50% of the original font size */
    50%      { font-size: 0.75px; } /* 50% of the original font size */
}
@keyframes blast {
    0%, 40% {
        font-size: 0.25px; /* 50% of the original font size */
    }
    70% {
        opacity: 1;
        font-size: 2px; /* 50% of the original font size */
    }
    100% {
        font-size: 3px; /* 50% of the original font size */
        opacity: 0;
    }
}


/* Using Functions Spinner */ /* Using Functions Spinner */ /* Using Functions Spinner */ /* Using Functions Spinner */
/* Using Functions Spinner */ /* Using Functions Spinner */ /* Using Functions Spinner */ /* Using Functions Spinner */
/* Using Functions Spinner */ /* Using Functions Spinner */ /* Using Functions Spinner */ /* Using Functions Spinner */


.spinnerCalling {
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 14px;
    border: 12px solid;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: animloader 1.5s linear infinite;
}

@keyframes animloader {
    0%, 100% {
        border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75);
    }
    25% {
        border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25);
    }
    75% {
        border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15);
    }
}


/* Detecting Spinner */ /* Detecting Spinner */ /* Detecting Spinner */ /* Detecting Spinner */
/* Detecting Spinner */ /* Detecting Spinner */ /* Detecting Spinner */ /* Detecting Spinner */
/* Detecting Spinner */ /* Detecting Spinner */ /* Detecting Spinner */ /* Detecting Spinner */

.spinnerDetecting {
    width: 72px;
    height: 72px;
    display: block;
    margin: 30px auto;
    position: relative;
    border: 4.5px solid #FFF;
    border-radius: 50%;
    box-sizing: border-box;
    animation: animloader 2s linear infinite;
  }
  .spinnerDetecting::after {
    content: '';  
    box-sizing: border-box;
    width: 9px;
    height: 36px;
    background: #FFF;
    transform: rotate(-45deg);
    position: absolute;
    bottom: -30px;
    left: 69px;
  }
  
  @keyframes animloader {
    0% {
      transform: translate(-15px, -15px);
    }
    25% {
      transform: translate(-15px, 15px);
    }
    50% {
      transform: translate(15px, 15px);
    }
    75% {
      transform: translate(15px, -15px);
    }
    100% {
      transform: translate(-15px, -15px);
    }
  }
      


  /* Marking Responses Spinner */ /* Marking Responses Spinner */ /* Marking Responses Spinner */ /* Marking Responses Spinner */
  /* Marking Responses Spinner */ /* Marking Responses Spinner */ /* Marking Responses Spinner */ /* Marking Responses Spinner */
  /* Marking Responses Spinner */ /* Marking Responses Spinner */ /* Marking Responses Spinner */ /* Marking Responses Spinner */

  .spinnerMarkingResponses {
    width: 200px;
    height: 140px;
    background: #979794;
    box-sizing: border-box;
    position: relative;
    border-radius:8px;
    perspective: 1000px;
  }

  .spinnerMarkingResponses:before{
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    border-radius:8px;
    background: #f5f5f5  no-repeat;
    background-size: 60px 10px;
    background-image: 	linear-gradient(#ddd 100px, transparent 0) ,
              linear-gradient(#ddd 100px, transparent 0), 
              linear-gradient(#ddd 100px, transparent 0), 
              linear-gradient(#ddd 100px, transparent 0), 
              linear-gradient(#ddd 100px, transparent 0), 
              linear-gradient(#ddd 100px, transparent 0);
    
    background-position: 15px 30px , 15px 60px , 15px 90px, 
              105px 30px , 105px 60px , 105px 90px;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
  }
  .spinnerMarkingResponses:after {
    content: '';
      position: absolute;
      width: calc(50% - 10px);
      right: 10px;
      top: 10px;
      bottom: 10px;
      border-radius: 8px;
      background: #fff no-repeat;
      background-size: 60px 10px;
      background-image: linear-gradient(#ddd 100px, transparent 0), 
              linear-gradient(#ddd 100px, transparent 0), 
              linear-gradient(#ddd 100px, transparent 0);
      background-position: 50% 30px ,50% 60px , 50%  90px;
      transform: rotateY(0deg );
      transform-origin: left center;
    animation: paging 4s linear infinite;
  }


  @keyframes paging {
    to {
      transform: rotateY( -180deg );
    }
  }


  /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */
  /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */
  /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */ /* ORB SPINNER */


  .spinnerOrb {
    width           : 150px                                   ;
    height          : 150px                                   ;
    background-color: #ff3d00                               ;
    border-radius   : 50%                                     ;
    position        : relative                                ;
    box-shadow      : 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
                      0 5px 12px rgba(0, 0, 0, 0.15)        ;
    overflow        : hidden                                  ;
  }
  .spinnerOrb:before,
  .spinnerOrb:after {
    content         : ""                     ;
    position        : absolute               ;
    width           : 100%                   ;
    height          : 100%                   ;
    border-radius   : 45%                    ;
    top             : -40%                   ;
    background-color: #fff                 ;
    animation       : wave 5s linear infinite;
  }
  .spinnerOrb:before {
    border-radius: 30%                       ;
    background   : rgba(255, 255, 255, 0.4);
    animation    : wave 5s linear infinite   ;
  }
  @keyframes wave {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }