.error_section {
  min-height: 4rem;
  width: 90%;
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;

  & .error_content {
    display: grid;
    grid-template-columns: 1fr 4fr;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;

    & .error_icon {
      text-align: center;
      height: 100%;
      width: 100%;

      & i {
        color: red;
        font-size: 2.4rem;
      }
    }

    & .error_text {
      height: 100%;
      width: 100%;

      & p {
        Color: white;
        font-size: 1rem;
      }
    }
  }

  & .true {
    background-color: var(--success);
    box-shadow: var(--shadow);
    color: var(--white);
  }

  & .false {
    background-color: var(--failure);
    box-shadow: var(--shadow);
    color: var(--white);
  }
}