.splashText{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#666666;
	font-weight:normal;
}
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

#content {
    padding:0px;
}

/* Fade styling (Overlay faded background) */
#fade {
    display: none;
    position:fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 700;
    transition: opacity 0.1s ease;
}

#fade.fade-out {
    opacity: 0;
    transition: opacity 0.1s ease;
}

#modal {
    display: none;
    position: relative;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    padding:0px;
    z-index: 701;
    text-align:center;
    overflow: unset;
    border-radius: 4px;
}

#loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    background-color: white;
    transform: translate(-50%, -50%);
    z-index: 1002;
    text-align:center;
    overflow: auto;
    border-radius: 4px;
}

#loader_static {
    display: none;
    width: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    background-color: #003A65;
    transform: translate(-50%, -50%);
    z-index: 1002;
    text-align:center;
    overflow: auto;
    border-radius: 16px;
}
#modal_loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding:0px;
    z-index: 701;
    text-align:center;
    overflow: unset;
    border-radius: 8px;
}
#loader_fade {
    display: none;
    position:fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 700;
    transition: opacity 0.1s ease;
}

#loader_fade.fade-out {
    opacity: 0;
    transition: opacity 0.1s ease;
}

/* HTML: <div class="loader"></div> */
.loader-animation {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: white;
    animation: loader-animation-keyframes 1s infinite linear;
    margin: 0 auto;
  }
  .loader-animation::before,
  .loader-animation::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loader-animation-keyframes 2s infinite;
  }
  .loader-animation::after {
    margin: 8px;
    animation-duration: 3s;
  }
  @keyframes loader-animation-keyframes{ 
    100%{transform: rotate(1turn)}
  }

  .chatbot-loader-animation
  {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
    background: 
        var(--_g) 0%   50%,
        var(--_g) 50%  50%,
        var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: chatbot-loader-keyframes 1s infinite linear;
  }

  @keyframes chatbot-loader-keyframes {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}