:root {
  /* color-pallete */
  --bs-ui-red: #e13833;
  --bs-ui-blue: #00112b;

  /* backgrounds */
  --bs-ui-background-white: #fff;
  --bs-ui-background-offwhite: #f5f5f5;
  --bs-ui-background-lightgray: #eee;
  --bs-ui-section-background: #f9f9f9;
  /* backgrounds */

  /* fonts */
  --bs-ui-text-red: #e13833;
  --bs-ui-text-blue: #00112b;
  --bs-ui-text-white: #fff;
  --bs-ui-text-offwhite: #f5f5f5;
  --bs-ui-text-lightgray: #eee;
  --bs-ui-text-darkgray: #1f1f1f;
  /* fonts */

  /* icons */
  --bs-ui-icons-white: #f5f5f5;
  --bs-ui-icons-red: #e13833;
  --bs-ui-icons-blue: #00112b;
}

/* Full screen centered container with position fixed */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #f5f5f5;
}

/* Simple spinner */
.spinner {
  margin: 0 auto 20px auto;
  width: 50px;
  height: 50px;
  /* border: 6px solid #ccc; */
  /* border: 6px solid var(--bs-ui-blue); */
  border: 6px solid transparent;
  border-top-color: var(--bs-ui-red);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

/* Spinner animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Loading text styling */
.loading-text {
  font-size: 1.2rem;
  color: #555;
}

/* loader */
 /* Full screen centered container */
    .loader {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #f5f5f5;
    }

    /* Simple spinner */
    .loader .spinner {
        margin: 0 auto 20px auto;
        width: 50px;
        height: 50px;
        border: 6px solid transparent;
        border-top-color: var(--bs-ui-red);
        border-radius: 50%;
        animation: spin 1.2s linear infinite;
    }

    /* Spinner animation */
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Loading text styling */
    .loader .loading-text {
        font-size: 1.2rem;
        color: #555;
    }
/* loader */
/* ------------------------------------------------------------------------------------------------------------------- */