:root {
	--main-color:  DarkSlateGray;
	--main-color-bg:  var(--main-color);
	--main-color-text: var(--main-color);
}
@font-face {
	font-family: 'Kalam';
    src: url('../font/Marcellus-Regular.ttf')format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
::-webkit-scrollbar {
    display:none;
    }
html, body {
   	font-family: "Kalam";
   	letter-spacing:  1px;
}
a {
  cursor:  pointer;
}
img {
      border-radius: 50%;
      aspect-ratio:  1/1;
    }
.main-color-bg {
	background:  var(--main-color);
	color:  white;
}	
.main-color-border {
  border: 2px solid var(--main-color);
}
.main-color-text {
	color:  var(--main-color);
}
.cursor-pointer {
    cursor: pointer;
  }
.invertColor {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
.centerAdjust {
      transform: translate(-50%,-50%);
}
.borderShadowLittle {
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.3);
}
.loadingSpinner {
  background-color:rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 10000000;
}
.autocomplete {position: relative;display: inline-block}
.autocomplete-items {position: absolute;border: 1px solid #d4d4d4;border-bottom: none;border-top: none;z-index: 99;/*position the autocomplete items to be the same width as the container:*/top: 100%;left: 0;right: 0;border-radius: 4px;max-height: 400px;overflow-y:scroll;}

.autocomplete-items div {padding: 20px;cursor: pointer;border-bottom: 1px solid #d4d4d4;height: 75px} 
.autocomplete-active, .autocomplete-items div:hover {background-color: var(--main-color-bg) !important;color: #ffffff;}

.fadeInUp {
  animation: fadeInUp 0.4s linear;
}
@keyframes fadeInUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
}
@keyframes pulse {
    33% { opacity: 1; transform: scale(1); }
    66% { opacity: 1; transform: scale(0.9); }
    100% { opacity: 1;transform: scale(1); }
}

.pulsating {
    animation: pulse 2s infinite;
}
.animate-display-none {
  transition: opacity .3s ease,
    display .3s ease allow-discrete;
}

.fadeIn {
  animation: fadeIn 1s linear;
} 
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
.w3-animate-left{
  position:relative;
  animation:animateleft 0.4s}

@keyframes animateleft{
  from{left:-300px;opacity:0} to{left:0;opacity:1}
}

.checkmark__check {
  transform-origin: 50% 50% 0;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

.checkmark {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke: white;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px green;
  }
}

.centeredWithin2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.selected-nav {
    text-underline-offset: 5px;
    text-decoration: underline;
}
.disabled {
  opacity: 0.5;
}