﻿.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 {
    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: 50%; 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: 180px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1002; 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;
}
.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%}
}
.loading-text::after {
    content: ""; display: inline-block; width: 1em; text-align: left; animation: loadingDots 1.5s steps(4, end) infinite;
}
@keyframes loadingDots {
    0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } 100% { content: ""; }
}
.loader-wifi {
    display: flex; align-items: center; gap: 3px; transform: rotate(-40deg);
}
.wifi-bar {
    width: 6px; height: 6px; background-color: #ffffff; border-radius: 50%; opacity: 0.3; animation: wifiAnimation 1s infinite;
}
.bar1 {
    animation-delay: 0.2s;
}
.bar2 {
    height: 12px; animation-delay: 0.4s;
}
.bar3 {
    height: 18px; animation-delay: 0.6s;
}
@keyframes wifiAnimation {
    0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); }
}