.error {
  color: red !important;
  /* margin-bottom: 20px; */
}

input.valid,
select.valid {
  border: 1px solid green !important;
}

input.error,
select.error {
  border: 1px solid red !important;
}

/* Fancybox Modal Issue CSS */

#cms_modal.fade:not(.show) {
  opacity: 1;
}

#cms_modal li, #cms_modal ul {
  list-style-type: disc !important;
  margin-left: 20px !important;
  padding: 3px 0 0 5px !important;
}

.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn {
  padding-top: 4px;
}

.fancybox__content > .f-button.is-close-btn {
  --f-button-border-radius: 4px;
  --f-button-color: #fff;
  --f-button-hover-color: #fff;
  --f-button-outline-color: #000;
  --f-button-bg: rgba(0, 0, 0, 0.6);
  --f-button-active-bg: rgba(0, 0, 0, 0.6);
  --f-button-hover-bg: rgba(0, 0, 0, 0.6);
  --f-button-svg-width: 18px;
  --f-button-svg-height: 18px;
  --f-button-svg-filter: none;
  top: 5px;
  right: 5px;
}

.is-compact .fancybox__content > .f-button.is-close-btn {
  --f-button-border-radius: 4px !important;
}

.fancybox__content {
  width: 90%;
  height: 90vh;
  overflow-y: scroll;
}

.fancybox__container {
  --fancybox-bg: rgba(24, 24, 27, 0.75);
}

#cms_modal h1 {
  font-size: 32px;
}

#cms_modal h2 {
  font-size: 20px;
}

@media (max-width: 600px) {
  /* .fancybox__content{
    width: 9%;
    
  } */
  #cms_modal h1 {
    font-size: 24px;
  }
}

/* End of Fancybox Modal Issue CSS */

/* Loading indicator CSS */
.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #00000075;
  color: #fff;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 1000;
}

.loading::after {
  position: absolute;
  width: 296px;
  height: 193px;
  background-color: #fff;
  content: "Processing...";
  color: #000;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  padding-top: 52px;
}

.loading::before {
  position: absolute;
  width: 45px;
  height: 45px;
  /* background-color: #000; */
  content: "";
  z-index: 1;
  margin-bottom: 50px;
  background-image: url("../images/spinner-solid.svg");
  background-size: contain;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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

/* End of Loading indicator CSS */