.loadingBlur {
     -webkit-filter: blur(10px);
      /* transition: 200ms -webkit-filter ease-in-out; */
}

#loadingCover {
     position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
     background: rgba(0,0,0,0.4);
     /* background: url('https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg') no-repeat; */
     z-index: 99999;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 1;
     transition: all 500ms ease, opacity 700ms ease-out;
}
.fadeLoadingCoverOut {
     background: radial-gradient(#2f353a0f 35%, #2f353ad9) !important;
     opacity: 0.0 !important;
}

#loadingDiv {
     background: #E9E9E9;
     border-radius: 8px;
     color: white;
     font-family: "Arial";
     width: 650px;
     height: 400px;
     display: flex;
     align-items: center;
     overflow: hidden;
}

#loadingDiv > .loading-left {
     width: 50%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     color: #5273F1;
     padding: 10px;
     padding-left: 25px;
}
#loadingDiv > .loading-right {
     width: 50%;
     height: 100%;
     padding: 10px;
     position: relative;
     background: rgba(118, 120, 132, 0.61);
     display: flex;
     justify-content: center;
     align-items: center;
}
#loadingDiv > .loading-right > img {
     max-width: 95%;
}


.loading-logo {
     width: 60px;
     align-self: flex-start;
     margin-bottom: 10px;
     /* display: none; */
}
.loading-subtitle {
     font-size: 14px;
     align-self: flex-start;
     margin: 0px;
     color: #5f688a;
}
.loading-title {
     font-size: 27px;
     align-self: flex-start;
     margin: 0px;
}
.loading-cobra-logo {
     align-self: flex-start;
     width: 100px;
}
#loading_information_span {
     align-self: flex-start;
     font-size: 17px;
     margin-top: 5px;
}


.loading {
  font-size: 30px;
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

#loadingProgressBarOuter {
     width: 100%;
     height: 10px;
     background: #bac7ff;
     border-radius: 4px;
     overflow: hidden;
}
#loadingProgressBar {
     height: 100%;
     width: 0%;
     background: #5273F1;
     border-radius: 0 5px 5px 0;
}

.spinner {
  margin: 10px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  /* background-color: #333; */
  /* background: white; */
  background: #5273F1;
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

#loading_cobra_animation {
     transition: all 200ms ease;
     opacity: 0.0;
     max-width: 282px;
}

#loading_cobra_animation path:nth-child(1) {
     stroke-dasharray: 518;
     stroke-dashoffset: 518;
}
#loading_cobra_animation path:nth-child(2) {
     stroke-dasharray: 491;
     stroke-dashoffset: 491;
}
#loading_cobra_animation path:nth-child(3) {
     stroke-dasharray: 503;
     stroke-dashoffset: 503;
}
#loading_cobra_animation path:nth-child(4) {
     stroke-dasharray: 530;
     stroke-dashoffset: 530;
}
#loading_cobra_animation path:nth-child(5) {
     stroke-dasharray: 491;
     stroke-dashoffset: 491;
}

@keyframes letter-animation {
     to {
          stroke-dashoffset: 0;
     }
}
@keyframes letter-fill-animation {
     from {
          fill: transparent;
     }
     to {
          fill: #fff;
     }
}

.letterAnimation {
     animation: letter-animation 2s ease forwards;
}
.letterFillAnimation {
     animation: letter-fill-animation 2s ease forwards 2s;
}

.animationNoDuration { animation-duration: 0s !important; }

.animationDelay1 { animation-delay: 0.3s; }
.animationDelay2 { animation-delay: 0.6s; }
.animationDelay3 { animation-delay: 0.9s; }
.animationDelay4 { animation-delay: 1.2s; }
.animationDelay5 { animation-delay: 1.5s; }
.animationDelay6 { animation-delay: 1.8s; }
.animationDelay7 { animation-delay: 2.1s; }
.animationDelay8 { animation-delay: 2.4s; }

#gloabl_loading_cobra_animation {
     position: absolute;
     opacity: 0;
     width: 325px;
     height: 230px;
     transform: translateX(47%) translateY(0);
     transition: all 3s ease, opacity 2s ease;
}

.centerLetterAnimation {
     position: fixed !important;
     /* left: 50% !important; */
     /* top: 50% !important; */
     /* transform: translateX(-50%) translateY(-50%) !important; */
     transform: translateX(0) translateY(0) !important;
     opacity: 1.0 !important;
}

#loading_cobra_logo {
     position: absolute;
}

#loading_cobra_logo_background {
     position: absolute;
     opacity: 0;
     width: 100vw;
     height: 100vh;
     background: transparent;
     transition: all 1.5s ease;
}

.addHaloEffect {
     background: radial-gradient(#2f353a0f 35%, #2f353ad9) !important;
     opacity: 1.0 !important;
}