* {
  font-family: 'Inter', sans-serif;
}

svg,  span{
  color: #72777A;
}
body {
  margin: 0;
  padding: 0;
  background-color: #FAF7F5;
  box-sizing: border-box;
}

#vue {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 1;
  position: relative;
}

input{
  border-color: #E3E5E5;
  border-width: 1px;
  background-color: white;
  border-style: solid;
  font-size: 16px;
}

textarea{
  font-size: 16px;
}

select{
  width: 100%;
  border-color: #E3E5E5;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
}

select:focus {
  outline: none !important;
  border: 1px solid grey;
}

textarea:focus {
  outline: none !important;
  border: 1px solid grey;
}

input:focus {
  outline: none !important;
  border: 1px solid grey;
}

h1 {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: white;
  font-size: 40px;
  width: 90%;
  margin-left: 5%;
}

h3 {
  width: 90%;
  margin-left: 5%;
  font-size: 24px;
  color: #72777A;
  text-align: center;
  font-family: 'Nunito';
  font-weight: 900;
}

p {
  font-size: 16px;
  color: #72777A;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

a {
  color: #72777A;
  text-decoration: underline;
}

.arrowBack {
  position: absolute;
  height: 4svh;
  width: 4svh;
  border-radius: 50%;
  background-color: white;
  border: 1px solid lightgrey;
  top: 3svh;
  left: 3svh;
  padding: 0.5svh;
}

/* Comon use svg is in container/wrapper */
svg {
  height: 100%;
  width: 100%;
}

.logoOfficialBig{
  background-image: url('../img/logo.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40vw;
  height: calc(40vw / 2.16);
  position: relative;
}
.boldGreen{
  font-weight: 600;
  color: #7BAA73;
}

/*SHADOW*/
.shadow{
  display: none;
  width: 100vw;
  height: 100svh;
  z-index: 1100;
  top: 0;
  left: 0;
  margin: 0;
  background-color: #fff;
  position: fixed;
  opacity: 0.8;
}

/*LOADER*/
@keyframes loaderAnimation {
  0% {
    content: "Loading.";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
  100% {
    content: "Loading...";
  }
}
.loader:after{
  animation: loaderAnimation 1.5s linear infinite;
  content: "Loading.";
}
.loader{
  display: none;
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 1101;
  left: 50%;
  top: 0;
  align-items: center;
  margin-left: -30px;
}

.darkColor{
  color: #1F1F1F;
}



/* Date picker rules */
.datepicker{
  width: 100%;
}
.datepicker-view{
  width: 100%;
}
.datepicker-controls .button, .datepicker-cell, .days-of-week .dow{
  height: 5svh;
}

/* custom elem rules */
.pickerPopup{
  height: 60svh;
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2001;
}
.pickerBg{
  position: absolute;
  width: 100%;
  height: 100svh;
  background-color: grey;
  z-index: 2000;
  opacity: 0.6;
}
.pickerTitle{
  text-align: center;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3svh 0 2svh;
  font-family: 'Nunito', sans-serif;
  z-index: 2002;
}
.picker{
  height: 40svh;
  z-index: 2002;
}
.pickerBtn{
  height: 12svh;
  text-align: center;
  color: #C5C5C5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  z-index: 2002;
}


/* Confirmation popup */
#popupShadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#popupContentWrapper{
  z-index: 1001;
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}
#popupContent {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  min-width: 400px;
  margin: 15px 0; 
}
#popupTitle{
  color: #101010;
  font-size: 32px;
  text-align: center;
}
#popupMessage{
  margin-bottom: 20px;
  color: #101010;
  text-align: center;
  font-size: 20px;
}
#popupContent button{
  height: 40px;
  border-radius: 20px;
  width: calc(50% - 10px);
  cursor: pointer;
}
#popupBtnYes{
  background-color: #7BAA73;
  color: #FFFFFF;
  border: none;
}
#popupBtnNo{
  background-color: #FFFFFF;
  margin-left: 20px;
  border: 1px solid #7BAA73;
}

/* BACK BTN*/
.backBtn svg{
  height: 30px;
  width: 30px;
  color: #101010;
}
.backBtn{
  height: 44px;
  width: 44px;
  border-radius: 22px;
  box-shadow: 0px 0px 6px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: fixed;
  top: 3svh;
  left: 5%;
  z-index: 5;
}

/* BOTTOM LINE */

.bottomLine .placeTask{
  margin-top: -10px;
}
.bottomLine .placeTask svg{
  height: 50px;
  width: 50px;
}
.bottomLine svg{
  height: 40px;
  width: 40px;
}
.bottomLine>div, .bottomLine>a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.bottomLine{
  border-top: 1px solid #C5C5C5;
  background-color: #FAF7F5;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 85px;
  z-index: 1002;
}