/*--------------------------------------------------------------
# Loading
--------------------------------------------------------------*/

#loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.379);
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}

.loader {
  color: #7367f0;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 3.5em;
}

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/* Custom CSS for custom floating label */
.custom-floating {
  position: relative;
}

.custom-floating .form-control {
  box-shadow: none;
}

.custom-floating .form-control.is-invalid {
  box-shadow: none;
  color: #dc3545;
}

.custom-floating .form-control.is-invalid ~ label {
  color: #dc3545;
}

.custom-floating input:focus ~ label,
.custom-floating input:not(:placeholder-shown) ~ label {
  top: -0.6rem;
  left: 1.4rem;
  font-size: 0.7rem;
  height: fit-content;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.custom-floating input:focus {
  border-width: 2px;
}

.custom-floating input:focus ~ label {
  color: #7367f0;
}

.custom-floating input:focus ~ #togglePassword {
  border-width: 2px !important;
  border-color: #7367f0 !important;
}

.custom-floating textarea:focus ~ label,
.custom-floating textarea:not(:placeholder-shown) ~ label {
  top: -0.6rem;
  left: 1.4rem;
  font-size: 0.7rem;
  height: fit-content;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.custom-floating textarea:focus {
  border-width: 2px;
}

.custom-floating textarea:focus ~ label {
  color: #7367f0;
}

.custom-floating .form-select {
  box-shadow: none;
}

.custom-floating .form-select.is-invalid {
  box-shadow: none;
  color: #dc3545;
}

.custom-floating .form-select.is-invalid ~ label {
  color: #dc3545;
}

.custom-floating select:focus ~ label,
.custom-floating select:not(:placeholder-shown) ~ label {
  top: -0.6rem !important;
  left: 1.4rem !important;
  font-size: 0.7rem !important;
  height: fit-content !important;
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
}

.custom-floating select:focus {
  border-width: 2px !important;
}

.custom-floating select:focus ~ label {
  color: #7367f0 !important;
}

#contact_label {
  top: -0.6rem !important;
  left: 1.4rem !important;
  font-size: 0.7rem !important;
  height: fit-content !important;
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
}

.custom-floating .form-control.is-invalid ~ #togglePassword {
  border-color: #dc3545 !important;
  color: #dc3545;
}

.custom-floating label {
  position: absolute;
  left: 1.5rem;
  top: 0.4rem;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  /* z-index: 5; */
  color: #8a8a8a;
  background-color: white;
  box-shadow: none !important;
  border-radius: 0.375rem !important;
}

.custom-floating label.has-group {
  left: 0.95rem !important;
}

/* custom floating RTL */
.custom-floating-rtl input:focus ~ label,
.custom-floating-rtl input:not(:placeholder-shown) ~ label {
  right: 1.4rem !important;
  left: auto !important;
}

.custom-floating-rtl select:focus ~ label,
.custom-floating-rtl select:not(:placeholder-shown) ~ label {
  right: 1.4rem !important;
  left: auto !important;
}

.custom-floating-rtl label {
  right: 1.5rem !important;
  left: auto !important;
}

.custom-floating-rtl label.has-group {
  right: 0.95rem !important;
  left: auto !important;
}

.amountGroup label {
  left: 4.2rem !important;
}

.amountGroup.custom-floating-rtl label {
  right: 4.2rem !important;
  left: auto !important;
}

/* Datatables align hebrew correctly */
.hebrew-cell {
  text-align: right !important;
  direction: rtl;
}

#smsButton:focus,
#smsButton.clicked,
#smsButton:hover,
#emailButton:focus,
#emailButton.clicked,
#emailButton:hover,
#smsButton.clicked,
#emailButton.clicked {
  border-width: 2px !important;
  border-color: #7367f0 !important;
  color: black;
  box-shadow: none !important;
}

#smsButton.clicked,
#emailButton.clicked {
  background-color: rgba(169, 163, 234, 0.54);
}

#smsButton:hover::after,
#smsButton:focus::after {
  content: ' Send SMS Confirmation';
  font-weight: bold;
}

#emailButton:hover::after,
#emailButton:focus::after {
  content: ' Send Email Confirmation';
  font-weight: bold;
}

#smsButton.clicked:hover::after,
#smsButton.clicked:focus::after {
  content: ' Send SMS Confirmation To';
  font-weight: bold;
}

#emailButton.clicked:hover::after,
#emailButton.clicked:focus::after {
  content: ' Send Email Confirmation To';
  font-weight: bold;
}

#notificationPhone:focus ~ #smsButton::after,
#notificationEmail:focus ~ #emailButton::after {
  content: '' !important;
  font-weight: bold;
}

@media (min-width: 768px) {
  #smsButton.clicked::after {
    content: ' Send SMS Confirmation To';
    font-weight: bold;
  }

  #emailButton.clicked::after {
    content: ' Send Email Confirmation To';
    font-weight: bold;
    /* display: none; */
    /* Hide on small screens */
  }
}

button:disabled {
  pointer-events: auto !important;
  cursor: not-allowed !important;
}

input:disabled {
  pointer-events: auto !important;
  cursor: not-allowed !important;
}

.btn-check.is-invalid + .btn {
  border-color: #dc3545 !important;
  color: #dc3545;
}