:root {
  --primary-100: #c21d03;
  --primary-200: #fd5732;
  --primary-300: #ffb787;
  --accent-100: #393939;
  --accent-200: #bebebe;
  --text-100: #232121;
  --text-200: #4b4848;
  --bg-100: #fbfbfb;
  --bg-200: #f1f1f1;
  --bg-300: #c8c8c8;

  /* Bootstrap variables override */
  --bs-primary: var(--primary-100);
  --bs-secondary: var(--primary-200);
  --bs-success: var(--primary-300);
  --bs-info: var(--accent-100);
  --bs-warning: var(--accent-200);
  --bs-danger: var(--text-100);
  --bs-light: var(--bg-100);
  --bs-dark: var(--bg-200);
  --bs-primary-rgb: 194, 29, 3;
  --bs-body-bg: var(--bg-100);
  --bs-body-color: var(--text-100);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-hover-border-color: #8c1402;
  --bs-btn-hover-bg: #8c1402;
}

.fs-7 {
  font-size: 0.8rem;
}

.fs-8 {
  font-size: 0.6rem;
}

.success-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;
}

.success-content {
  text-align: center;
}

.success-icon {
  font-size: 4rem;
  color: #28a745;
  background-color: #e6f7e9;
  border-radius: 50%;
  padding: 1rem;
}

.success-text {
  font-size: 1.5rem;
  margin-top: 1rem;
  color: #000;
}

.image-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-4 .image {
  height: auto;
  width: 100%;
}

.info-circle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0d6efd;
  /* Primary color */
  border-radius: 50%;
  font-size: 20px;
  color: #0d6efd;
  /* Primary color */
}

.box100by100 {
  height: 100px;
  width: 100px;
}

/* CUSTOM COLORS */
.card-header {
  color: var(--primary-100);
  font-size: 2rem;
}

/* END CUSTOM COLORS*/

/* BACKDROP/OVERLAY SPINNERS */

#loading-spinner {
  display: none;
  /* Hidden by default */
}

.overlay {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}


#loading-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#loading-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #999;
  width: 100px;
  height: 30px;
  margin: -7px 0 0 -45px;
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
}

#loading-content {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border: 3px solid #F00;
}

#loading-content:after {
  content: "";
  position: absolute;
  border: 3px solid #0F0;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
}

#loading-content:before {
  content: "";
  position: absolute;
  border: 3px solid #00F;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
}

#loading-content {
  border: 3px solid transparent;
  border-top-color: #4D658D;
  border-bottom-color: #4D658D;
  border-radius: 50%;
  -webkit-animation: loader 2s linear infinite;
  -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;
}

#loading-content:before {
  border: 3px solid transparent;
  border-top-color: #D4CC6A;
  border-bottom-color: #D4CC6A;
  border-radius: 50%;
  -webkit-animation: loader 3s linear infinite;
  -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 3s linear infinite;
}

#loading-content:after {
  border: 3px solid transparent;
  border-top-color: #84417C;
  border-bottom-color: #84417C;
  border-radius: 50%;
  -webkit-animation: loader 1.5s linear infinite;
  animation: loader 1.5s linear infinite;
  -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
}

@-webkit-keyframes loaders {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#content-wrapper {
  color: #FFF;
  position: fixed;
  left: 0;
  top: 20px;
  width: 100%;
  height: 100%;
}

#header {
  width: 800px;
  margin: 0 auto;
  text-align: center;
  height: 100px;
  background-color: #666;
}

#content {
  width: 800px;
  height: 1000px;
  margin: 0 auto;
  text-align: center;
  background-color: #888;
}

/* END OVERLAY */

/* MOBILE MENU */

.nav-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  padding: 12px 16px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0);
}

.nav-item span {
  width: 0;
  overflow: hidden;
}

.nav-item:focus {
  text-decoration: none;
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  transition: .2s;
}

.nav-item:focus span {
  width: 100%;
  margin-left: 8px;
  transition: .2s;
}

*:focus {
  outline: none;
  border: none;
}

/* END MOBILE MENU */

/* PROGRESS STEPS */
.progresses {
  display: flex;
  align-items: center;
}

.line {

  width: 120px;
  height: 6px;
}

.line.pending{
  background: #807f7f;
}

.line.completed{
  background: #63d19e;
}

.steps {
  display: flex;
  color: #fff;
  font-size: 14px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

}

.steps.pending {
  background-color: #807f7f;
}

.steps.completed {
  background-color: #63d19e;
}

/* END PROGRESS STEPS */


.colors {
  --primary-100: #c21d03;
  --primary-200: #fd5732;
  --primary-300: #ffb787;
  --accent-100: #393939;
  --accent-200: #bebebe;
  --text-100: #232121;
  --text-200: #4b4848;
  --bg-100: #fbfbfb;
  --bg-200: #f1f1f1;
  --bg-300: #c8c8c8;
}
/* REMOVE UP-DOWN ARROW (SPINNERS) for input type='number'*/
/* For Chrome, Safari, Edge, and Opera (WebKit browsers) */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
input[type=number] {
    -moz-appearance: textfield;
}