*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  
}

html{
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

:root {
  --dl-color-gray-500: #595959;
  --dl-color-gray-700: #999999;
  --dl-color-gray-900: #D9D9D9;
  --dl-size-size-large: 144px;
  --dl-size-size-small: 48px;
  --dl-color-danger-300: #A22020;
  --dl-color-danger-500: #BF2626;
  --dl-color-danger-700: #E14747;
  --dl-color-gray-black: #000000;
  --dl-color-gray-white: #FFFFFF;
  --dl-size-size-medium: 96px;
  --dl-size-size-xlarge: 192px;
  --dl-size-size-xsmall: 16px;
  --dl-space-space-unit: 16px;
  --dl-color-primary-100: #003EB3;
  --dl-color-primary-300: #0074F0;
  --dl-color-primary-500: #14A9FF;
  --dl-color-primary-700: #85DCFF;
  --dl-color-success-300: #199033;
  --dl-color-success-500: #32A94C;
  --dl-color-success-700: #4CC366;
  --dl-size-size-xxlarge: 288px;
  --dl-size-size-maxwidth: 1400px;
  --dl-radius-radius-round: 50%;
  --dl-space-space-halfunit: 8px;
  --dl-space-space-sixunits: 96px;
  --dl-space-space-twounits: 32px;
  --dl-radius-radius-radius2: 2px;
  --dl-radius-radius-radius4: 4px;
  --dl-radius-radius-radius8: 8px;
  --dl-space-space-fiveunits: 80px;
  --dl-space-space-fourunits: 64px;
  --dl-space-space-threeunits: 48px;
  --dl-space-space-oneandhalfunits: 24px;
  --foot-offset: 0;

  /* --theme-fore: rba(0,0,0, 1);
   --theme-fore-light: rgba(100,100,100,1);
  --theme-mid: rgba(0,0,0,0.1);
  --theme-mid-deep: rgba(0,0,0, 0.5);
  --theme-back: rgba(255,255,255, 1);
  --theme-fill: rgba(0,0,0,0.7); 

   --theme-fore: rgba(255,255,255, 1);
  --theme-fore-light: rgba(150,150,150,1);
  --theme-mid: rgba(255,255,255,0.2);
  --theme-mid-deep: rgba(50,50,50, 0.9);
  --theme-back: rgba(0,0,0, 1);
  --theme-fill: rgba(255,255,255,0.7); */
}

@media (prefers-color-scheme: dark) { 
  :root{
  --theme-fore: rgba(255,255,255, 1);
  --theme-fore-light: rgba(150,150,150,1);
  --theme-mid: rgba(255,255,255,0.2);
  --theme-shine: rgba(150,150,150,0.4);
  --theme-mid-deep: rgba(70,70,70,0.5);
  --theme-mid-deep-light: rgba(70,70,70,0.6); 
  --theme-back: rgba(0,0,0, 1);
  --theme-back-light: rgba(35,35,35, 1);
  --theme-fill: rgba(255,255,255,0.7);
  --error-color: rgba(255,100,0);
  --color-debit: rgba(255,70,70);
  --color-credit: rgb(100,255,100);

  --swiper-button-active: rgba(100,100,100,1); /*theme-fore-light*/
  }
}

@media (prefers-color-scheme: light){
  :root{
    --theme-fore: rgba(0,0,0, 1);
    --theme-fore-light: rgba(100,100,100,1);
   --theme-mid: rgba(0,0,0,0.1);
   --theme-shine: rgba(150,150,150,0.1);
   --theme-mid-deep: rgba(180,180,180, 0.5);
   --theme-mid-deep-light: rgba(180,180,180, 0.4);
   --theme-back: rgba(255,255,255, 1);
   --theme-back-light: rgba(220,220,230, 1);
   --theme-fill: rgba(0,0,0,0.7);
  --error-color: rgba(255,0,0);
  --color-debit: rgba(255,70,70);
  --color-credit: rgb(0, 150,0);

  --swiper-button-active: rgba(255,255,255, 1);
  }
}


@media all and (display-mode: standalone) {
    :root{
        --foot-offset: 20px;
    }
}

@font-face {
  font-family: nunito;
  src: url(fonts/Nunito-VariableFont_wght.ttf);
}

/* PRELOADER */

@keyframes shine {
    0% {
        opacity: 0.4;
    }
    5% {
        opacity: 0.3;
    }
    20% {
        opacity: 0.8;
    }
    40% {
        opacity: 0.4;
    }
    550% {
        opacity: 0.2;
    }
    70% {
        opacity: 0.4;
    }
    80% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.4;
        background-position: 0 150vh;
    }
  }
  
  .shine, .shine2 {
    /* background: linear-gradient(110deg, var(--theme-mid-deep) 20%, var(--theme-mid-deep-light) 34%, var(--theme-mid-deep-light) 40%, var(--theme-mid-deep) 55%);
    border-radius: 5px;
    background-size: 200% 100%;
    background-position-x: 120%;
    animation: shine 2s infinite;
    opacity: 0.4; */

    background-image: linear-gradient(to bottom, var(--theme-mid-deep) 0%, var(--theme-shine) 15%, var(--theme-mid-deep) 20%);
    border-radius: 5px;
    background-size: 100vw 300vh;
    background-attachment: fixed;
    background-position: 100% -60vh;
    animation: shine 3s infinite;
    opacity: 0.4;
  }

  .shine-deep, .shine-deep2 {
    background: linear-gradient(110deg, var(--theme-mid-deep) 20%, var(--theme-mid) 38%, var(--theme-mid) 40%,var(--theme-mid-deep) 55%);
    border-radius: 5px;
    background-size: 200% 100%;
    background-position-x: 120%;
    opacity: 0.4;
    animation: shine 2s infinite;
  }

  .shine2, .shine-deep2{
    /* animation-delay: 0.5s; */

  }

  .animation-delay-1{
    animation-delay: 0.5s;
  }
  .animation-delay-2{
    animation-delay: 1s;
  }
  .animation-delay-3{
    animation-delay: 1.5s;
  }
  .animation-delay-4{
    animation-delay: 2s;
  }
  .animation-delay-5{
    animation-delay: 2.5s;
  }
  .animation-delay-6{
    animation-delay: 3s;
  }
  .animation-delay-7{
    animation-delay: 3.5s;
  }
  .animation-delay-8{
    animation-delay: 4s;
  }
  .animation-delay-9{
    animation-delay: 4.5s;
  }
  .animation-delay-10{
    animation-delay: 5s;
  }
  .animation-delay-11{
    animation-delay: 5.5s;
  }
  .animation-delay-12{
    animation-delay: 6s;
  }

  /* PRELOADER END */

  /* LOADING 2 START */
  .lds-ellipsis {
    /* display: inline-block; */
    position: relative;
    width: 100%;
    aspect-ratio: 2;
  }
  .lds-ellipsis div {
    position: absolute;
    width: 16%;
    height: 100%;
    border-radius: 50%;
    background: white;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
.theme-fore-icon > .lds-ellipsis div{
    background: var(--theme-fore);
}
  .lds-ellipsis div:nth-child(1) {
    left: 10%;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 10%;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 40%;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 70%;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(184%, 0);
    }
  }
  
  /* LOADING 2 END */
  
.button {
  color: var(--dl-color-gray-black);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}

.input {
  color: var(--dl-color-gray-black);
  border: none;
  cursor: auto;
  outline: none;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.input:focus {
  border: none;
  outline: none;
}
.textarea {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
  resize: none
}

.textarea:focus{
  border: none;
  outline: none;
}

.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}
.list-item {
  display: list-item;
}
.teleport-show {
  display: flex !important;
  transform: none !important;
}
.image-shadow1 {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.43);
  border-radius: 6px;
  z-index: 0 !important;
}

.blur{
  filter: blur(5px);
}

.flex-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}


/* .image {
  width: 100px;
  object-fit: cover;
}
.theme-back {
  background: black;
}
.theme-mid {
  background: rgba(255, 255, 255, 0.1);
}
.theme-fore {
  color: var(--dl-color-gray-white);
}
.theme-fore-icon {
  fill: var(--dl-color-gray-white);
} */


.theme-back {
  background: var(--theme-back);
}
.theme-back-light {
  background: var(--theme-back-light);
}
.theme-mid {
  background: var(--theme-mid);
}
.theme-mid-deep {
  background: var(--theme-mid-deep);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.theme-fore {
  color: var(--theme-fore);
}
.theme-fore-icon {
  fill: var(--theme-fill);
}


.my-button {
  color: white;
  background: green;
  align-items: center;
  justify-content: center;
}
.time-box {
  flex: 0 0 auto;
  color: white;
  width: 30px;
  height: 40px;
  display: flex;
  font-size: 20px;
  background: var(--theme-fore-light);
  align-items: center;
  font-weight: bold;
  border-radius: 5px;
  flex-direction: column;
  justify-content: center;
}
.profile-pic-small {
  flex: 0 0 auto;
  width: 40px;
  border: 0.5px var(--theme-fore-light) solid;
  height: 40px;
  display: flex;
  overflow: hidden;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  background-size: cover;
  background-position: center center;
}

.profile-pic-profile {
  flex: 0 0 auto;
  width: 100%;
  border: 0.5px var(--theme-fore-light) solid;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
}

.profile-pic-profile-back {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute !important;
  filter: blur(1px);
}

.cover-background{
  background-size: cover;
  background-position: center center;
}

.cover{
  background-position: center center;
  background-size: cover;
}

.border-0\.1 {
  border-color: var(--theme-mid);
}
.Content {
  font-size: 16px;
  /* font-family: serif; */
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}
.Heading {
  font-size: 32px;
  font-family: serif;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}


/* CUSTOM STYLES */

.input-container{
  width: 100%;
  position: relative;
  /* padding-bottom: 16px; */
  border: 1px red soli;
}

.input-container select{
    height: calc(1.2em + 20px);
}

.active-nav svg{
    fill: rgb(0,100,255);
}

.navigate-back{
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 5px;
  padding: 5px;
}

.toast{
  display: none;
  position: absolute;
  width: 90%;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  top: -10px;
  left: 5%;
  background: blue;
  transition: 0.2s all ease-in-out;
  z-index: +10;
}

.validation-message, .error-text{
  display: block;
  font-size: 12px;
  color: var(--error-color);
  /* position: absolute; */
  min-height: 14px;
  padding-top: 4px;
  left: 5px
}

.register-container .validation-message{
    display: none;
}

.register-container .field-validation-valid{
    display: none !important;
}

.register-container .field-validation-error{
    display: block !important;
}

.error-message{
  width: 100% ;
  text-align: center;
  font-size: 14px;
  align-self: center;
  padding: 5px 10px;
  margin: 5px;
  /*background-color: rgba(255,0,0,0.2);
   border: 1px var(--error-color) solid; */
  border-radius: 5px;
  transition: 0.3s all linear;
  display: none;
  color: var(--error-color);
}

.input-validation-error{
  box-shadow: 0 0 2px 0 rgba(255, 0, 0, 0.2)
}

.has-loading img{
  height: 30px;
}

.hidden-input{
  width: 1;
  height: 1;
  overflow: hidden;
  border: 1px red soild;
  opacity: 0.0000001;
  position: absolute;
  left: 1px;
  top: 1px;
}

/* LOADING ANIMATION STARTS */
.center {
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wave {
  width: 1px;
  height: 20px;
  background: linear-gradient(45deg, rgb(255, 255, 255), #fff);
  margin: 2px;
  animation: wave 1s linear infinite;
  border-radius: 20px;
}
.wave:nth-child(2), .wave:nth-child(19) {
  animation-delay: 0.1s;
}
.wave:nth-child(3), .wave:nth-child(18) {
  animation-delay: 0.2s;
}
.wave:nth-child(4), .wave:nth-child(17) {
  animation-delay: 0.3s;
}
.wave:nth-child(5), .wave:nth-child(16) {
  animation-delay: 0.4s;
}
.wave:nth-child(6), .wave:nth-child(15) {
  animation-delay: 0.5s;
}
.wave:nth-child(7), .wave:nth-child(14) {
  animation-delay: 0.6s;
}
.wave:nth-child(8), .wave:nth-child(13) {
  animation-delay: 0.7s;
}
.wave:nth-child(9), .wave:nth-child(12) {
  animation-delay: 0.8s;
}
.wave:nth-child(10), .wave:nth-child(11){
  animation-delay: 0.9s;
}

@keyframes wave {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* LOADING ANIMATION ENDS */

.div-center{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.hor-center{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

svg{
    display: block;
}

.update-browser {
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 1px red solid;
  position: fixed;
  top: 0;
  z-index: +2;
  font-size: 20px;
  text-align: center;
  display: none;
}

.splash-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: +3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-image {
    max-width: 40%;
    max-height: 40%;
    margin: auto;
    display: block;
}

0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* LOADING ANIMATION ENDS */

.div-center{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.hor-center{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

svg{
    display: block;
}

.update-browser {
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 1px red solid;
  position: fixed;
  top: 0;
  z-index: +2;
  font-size: 20px;
  text-align: center;
  display: none;
}

.splash-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: +3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-image {
    max-width: 40%;
    max-height: 40%;
    margin: auto;
    display: block;
    animation: pulsate 1s linear infinite;
}

@keyframes pulsate {
    0%{
        transform: scale(1);
    }
    12%{
        transform: scale(1);
    }
    15%{
        transform: scale(1.2);
    }
    18%{
        transform: scale(1);
    }
    30%{
        transform: scale(1);
    }
    33%{
        transform: scale(1.2);
    }
    36%{
        transform: scale(1);
    }


    /* 0%{
        transform: scale(1);
    }
    15%{
        transform: scale(1);
    }
    20%{
        transform: scale(1.2);
    }
    25%{
        transform: scale(1);
    }
    40%{
        transform: scale(1);
    }
    45%{
        transform: scale(1.2);
    }
    50%{
        transform: scale(1);
    }
    65%{
        transform: scale(1);
    }
    70%{
        transform: scale(1.2);
    }
    75%{
        transform: scale(1);
    }
    90%{
        transform: scale(1);
    }
    95%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    } */

}