/* Forms */
[aria-disabled="true"] {
  pointer-events: auto;
  opacity: 0.6;
  cursor: not-allowed;
}

.form-control:focus {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

input:focus, select:focus, button:focus, textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

input { background-color: transparent !important; }


/* Menu */
.menu-link { color: var(--text-color); }

.menu-li-mb { margin-bottom: 11px; }

.menu-li-mb i { margin-right: 13.5px;}


/* Toasts */
.toast-icon-font-19 { font-size: 19px !important; }

.toast-icon-font-24 { font-size: 24px !important; }

.toast-x {
  background-color: transparent; 
  border:none; 
  font-size: 15px;
}


/* Fade In */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--fade-duration) ease, transform var(--fade-duration) ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.fade-delay {
  opacity: 0;
  animation: showUP var(--fade-duration) cubic-bezier(0.1, 0.2, 0.3, 1) forwards;
}

@keyframes showUP {
  0%, 30% { opacity: 0; }     
  80%     { opacity: 0.8; }
  100%    { opacity: 1; }
}

.fade-slower { --fade-duration: 10.5s; }
.fade-slow   { --fade-duration: 8s; }
.fade-medium { --fade-duration: 5.5s; }
.fade-normal { --fade-duration: 3s; }
.fade-fast   { --fade-duration: 0.8s; }


/* Loading */
#loading-animation { opacity: 1; transition: opacity 0.3s ease-out; }
#loading-animation.hidden { opacity: 0; }

.spinner-color { color: var(--text-color); }
.spinner-grow { opacity: 0; animation: fadeInCycle 3s infinite; }
.spinner-grow:nth-child(1) { animation-delay: 0s; }
.spinner-grow:nth-child(2) { animation-delay: 0.2s; }
.spinner-grow:nth-child(3) { animation-delay: 0.4s; }
.spinner-grow:nth-child(4) { animation-delay: 0.6s; }
.spinner-grow:nth-child(5) { animation-delay: 0.8s; }
.spinner-grow:nth-child(6) { animation-delay: 1s; }
.spinner-grow:nth-child(7) { animation-delay: 1.2s; }
.spinner-grow:nth-child(8) { animation-delay: 1.4s; }

@keyframes fadeInCycle {
  0%   { opacity: 0; transform: scale(0.6); }
  30%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.6); }
}


/* Desktops */
@media screen and (min-width: 768px) {
  #logo-loading { width: 17%; }
  .toast-position { right: 0; }
  .toast-padding { padding: 16px; }
  .toast-font { font-size: 17px !important; }
}

/* Phones and Tablets */
@media screen and (max-width: 767px) {
  .toast-position { left: 50%; transform: translateX(-50%); }
  .toast-padding { padding: 8px; }
  .toast-font { font-size: 17px !important; }
  .toast-mobile-icon-font { font-size: 18.9px !important; }
   #logo-loading { width: 37%; }
}

@media screen and (min-width: 375px) and (max-width: 449px) {
  #logo-loading { width: 47%; }
}

/* Small Phones */
@media screen and (max-width: 374px) {
  .spinner-grow:nth-child(7) { display: none; }
  .spinner-grow:nth-child(8) { display: none; } 
}

@media screen and (min-width: 340px) and (max-width: 429px) {
  .toast-font { font-size: 16.5px !important; }
  .toast-mobile-icon-font { font-size: 18.7px !important; }
}

@media screen and (min-width: 330px) and (max-width: 374px) {
  #logo-loading { width: 57%; }
}

@media screen and (max-width: 339px) {
  .toast-font, .toast-mobile-icon-font { font-size: 16px !important; }
}

@media screen and (max-width: 329px) {
  #logo-loading { width: 57%; }
}