#splash-screen {
  display: block;
  background: #f0f0f0;
  text-align: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 500ms;
  z-index: 9999999;
}

/* ****************** HEADER ****************** */
.splash-screen-header {
  display: grid;
  grid-template-columns: auto;
  height: 4.375rem;
  background-color: white;
}

.splash-screen-header-block-container {
  height: 4.375rem;
  width: 4.375rem;
}

.image-background {
  background-color: #00803e;
  text-align: left;
  position: relative;
}

.splash-screen-header-icon-placeholder {
  position: absolute;
  z-index: 1;
  height: 86%;
  width: 86%;
  top: 7%;
  left: 7%;
  border-radius: 50%;
  background-color: #ffe500;
}

.fk-logo {
  position: absolute;
  z-index: 2;
}

/* Small padding-right 1920px - 2020px width*/
@media only screen and (min-width: 1920px) and (max-width: 2020px) {
  .splash-screen-header {
    grid-template-columns: 1920px auto;
  }
}

/* Large padding-right >2020px */
@media only screen and (min-width: 2020px) {
  .splash-screen-header {
    grid-template-columns: 1920px 0 auto;
  }
}

/* ****************** MOBILE HEADER ****************** */
.splash-screen-header-mobile {
  display: none;
  width: auto;
  height: 3rem;
  background: #00803e;
}

.splash-screen-header-fklogo-container-mobile {
  height: 3rem;
  display: flex;
  align-items: center;
}

.splash-screen-header-fklogo-mobile {
  width: 1.875rem;
  height: 1.875rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.splash-screen-header-title-container-mobile {
  display: flex;
  align-items: center;
}

/* Mobile <740px*/
@media only screen and (max-width: 739px) {
  .splash-screen-header {
    display: grid;
    grid-template-columns: fit-content 1fr;
    height: 3rem;
  }

  .image-background {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
  }

  .fk-logo {
    height: 3rem;
    width: 3rem;
  }

  .splash-screen-header-button-group {
    grid-auto-columns: 3rem;
  }

  .phone-block {
    display: none;
  }

  .bell-block {
    height: 3rem;
    width: 3rem;
  }

  .splash-screen-header-title {
    margin-top: 0.125rem;
    margin-left: 0.5rem;
    font-size: 1.125rem;
    letter-spacing: 0.01rem;
  }
}

/* ****************** TRACTOR LOADER ****************** */
.loader-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.loader-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 18.75rem;
  height: 18.75rem;
  border-radius: 50%;
  background-color: white;
  margin-top: 9.375rem;
  z-index: 1;
}

#tractor-gif {
  width: 8.125rem;
  height: 8.125rem;
}

/* Mobile <740px*/
@media only screen and (max-width: 739px) {
  .loader-circle {
    margin-top: 6.25rem;
  }
}

#loading-label {
  color: #004820;
  height: 3em;
  width: 9.375rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.7rem;
  margin-bottom: 0.75rem;
  margin-top: 0.375rem;
}

/* ****************** RELOAD LINK ****************** */
.reload-link-container {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.link {
  display: block;
  width: fit-content;
  padding: 0.25rem 0;
  color: #00803e;
  text-decoration: underline;
  opacity: 0;
  visibility: hidden;
  animation: fadeInOpacity 300ms ease-in-out 13s forwards;
}

.link:hover {
  cursor: pointer;
  color: #004820;
}

/* ****************** ANIMATIONS ****************** */
#loading-animation-wrapper.animateOut {
  opacity: 0;
  transform: translateX(-10px);
  transition:
    transform 300ms ease-in-out,
    opacity 300ms ease-in-out;
}

#loading-animation-wrapper.animateInStart {
  opacity: 0;
  transform: translateX(10px);
}

#loading-animation-wrapper.animateInEnd {
  opacity: 1;
  transform: translateX(0px);
  transition:
    transform 300ms ease-in-out,
    opacity 300ms ease-in-out;
}

.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 300ms;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}