/* ///////////// */
/*
@font-face {
  font-family: 'Montserrat';
  src: local('FallbackFont'), url('Fonts/Montserrat_Alternates/MontserratAlternates-Regular.ttf');
  font-weight: 400;
  font-style: normal;
}
*/

@font-face {
  font-family: 'Exo';
  src: local('FallbackFont'), url('Exo/static/Exo-Light.ttf');
}

body{
  height:100vh;
  margin: 0px;
  font-family: 'Exo', sans-serif;
  font-size: 1rem; /* Initial font size */
  background-color: #ffffff;
  overflow: hidden;
}

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  background: #e7eef2;
}
body::-webkit-scrollbar-thumb {
  background: #c6dde7;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb:hover {
  background: #b6d6e4;
  cursor: pointer;
}

#mainBodyHolder {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.mainBodyHolderWhileRotating {
  scale: 0.7;
}

#PLLoginInitButton {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 20px;
  height: 45px;
  width: 150px;
  border-top-left-radius: 25px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 30px;
  cursor: pointer;
  user-select: none;
}
#PLLoginInitButton:hover .signedPhotoLoginButton {
  scale: 1.05;
}

.signedPhotoLoginButton {
  position: relative;
  display: block;
  margin-left: 10px;
  height: 35px;
  width: 35px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.2s ease-in-out;
}

.echoQRKeyLogin {
  position: relative;
  display: flex;
  margin-left: 10px;
  align-items: center;
  height: 100%;
  width: auto;
  font-size: 0.8rem;
}

#LRKFormHolder {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 15%;
  left: calc(50% - (600px / 2));
  height: 0%;
  width: 600px;
  z-index: 1010;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
}
.expandLoginFormFromDEFAULTanim {
  animation: expandLoginFormFromDEFAULTkeys 0.7s ease-in-out forwards;
}
@keyframes expandLoginFormFromDEFAULTkeys {
    0% {
      top: 20%;
      opacity: 0;
      height: 10%;
      scale: 0.5;
    }
    50% {
      top: 4%;
      height: 70%;
      opacity: 1;
    }
    80% {
      top: 6%;
      height: 70%;
      scale: 1.1;
    }
    100% {
      top: 6%;
      height: 70%;
      scale: 1;
    }
}

.setLoginFromRegisterFormAnim {
  animation: setLoginFromRegisterFormKeys 0.5s ease-in-out forwards;
}
@keyframes setLoginFromRegisterFormKeys {
    0% {
      opacity: 1;
      top: 6%;
      height: 85%;
      scale: 1;
    }
    50% {
      opacity: 0.9;
      top: 5%;
      height: 70%;
      scale: 1.05;
    }
    80% {
      opacity: 1;
      top: 6%;
      height: 75%;
      scale: 1;
    }
    100% {
      opacity: 1;
      top: 6%;
      height: 70%;
      scale: 1;
    }
}

.expandRegisterFormFromLOGINanim {
  animation: expandRegisterFormFromLOGINkeys 0.5s ease-in-out forwards;
}
@keyframes expandRegisterFormFromLOGINkeys {
    0% {
      opacity: 1;
      top: 6%;
      height: 70%;
      scale: 1;
    }
    50% {
      opacity: 0.9;
      top: 5%;
      height: 55%;
      scale: 1.05;
    }
    80% {
      opacity: 1;
      top: 6%;
      height: 87%;
      scale: 1;
    }
    100% {
      opacity: 1;
      top: 6%;
      height: 85%;
      scale: 1;
    }
}

#serviceAcquisitionWindow {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 6%;
  left: calc(50% - (600px / 2));
  height: 70%;
  width: 600px;
  z-index: 1010;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
}

.windowBodyContent {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 85%;
  margin-left: 5%;
  width: 90%;
  z-index: 2;
}

.serviceAcquisitionBODY {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  margin-left: 5%;
  width: 90%;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  z-index: 2;
}

.serviceAcquisitionEvalCardHolder {
  position: relative;
  display: block;
  width: 210px;
  height: 106px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  scale: 0.5;
  border-style: solid;
  border-width: 1px;
  animation:appearPurchasingCardKeys 0.5s ease-in-out 0.3s forwards;
}

.acquiringServiceInfoHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: auto;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  font-size: 0.9rem;
  z-index: 2;
}

.evalPurchaseInfoRow {
  position: relative;
  display: flex;
  height: auto;
  width: 100%;
  font-size: 0.9rem;
  letter-spacing: 1px;
  padding-top: 10px;
  padding-bottom: 5px;
}





.LRKformBackgroundHolder {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  transition: all 0.3s ease-in-out;
  opacity: 0.1;
}

.LRKformBackgroundImage {
  position: relative;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 250px;
}

.LRKHeader {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  margin-top: 5px;
  height: 50px;
  width: 100%;
  z-index: 2;
}

.whatButton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 100px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.8rem;
  border-style: solid;
  border-width: 1px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: all 0.2s ease-in-out;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
}
.whatButton:hover {
  letter-spacing: 2px;
}

#LRKFormContent {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  margin-left: 5%;
  width: 90%;
  opacity: 0;
  z-index: 2;
}

.popuUpContentAnim {
  animation: popUpContentKeys 0.5s ease-in-out 0.2s forwards;
}
@keyframes popUpContentKeys {
    0% {
      top: -150px;
      opacity: 0;
    }
    50% {
      top: 20px;
      opacity: 0.5;
    }
    100% {
      top: 0px;
      opacity: 1;
    }
}

.burstContentOutAnimation {
  animation: burstDivOutKeys 0.2s ease-in-out forwards;
}
@keyframes burstDivOutKeys {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
      scale: 1.5;
    }
}

.burstCardOutFromLoginFormAnim {
  animation: burstCardOutFromLoginFormKeys 0.4s ease-in-out forwards;
}
@keyframes burstCardOutFromLoginFormKeys {
    0% {
      opacity: 1;
      top: 6%;
      height: 70%;
      scale: 1;
    }
    100% {
      opacity: 0;
      top: 6%;
      height: 50%;
      scale: 0.5;
    }
}

.QRLoginInfoHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 3%;
  width: 97%;
  user-select: none;
}

.weakStatementText {
  font-size: 0.8rem;
  user-select: none;
}

.strongStatementText {
  font-size: 0.9rem;
  letter-spacing: 2px;
  user-select: none;
}

.LRKkeyButtons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  height: 45px;
  width: 40px;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  user-select: none;
}
.LRKkeyButtons:hover {
  scale: 1.1;
}

.qrWhiteImageInKeyButton {
  position: relative;
  display: flex;
  margin-left: 2%;
  margin-right: 2%;
  height: 80%;
  width: 100%;
  background-image: url("../../images/siteUsage/qr_code_icon_white.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.signedPhotoIcon {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  background-image: url("../../images/siteUsage/signedPhotoIcon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.LVQRKselectKeyROW {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 10%;
  height: 70px;
  width: 80%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
}

#LVQRKselectQRkey {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 64px;
  width: calc(100% - 66px);
  height: calc(100% - 4px);
  border: 2px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  font-size: 1rem;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  user-select: none;
}

.animateLoginInputKeyChangeAnim {
  animation: animateLoginInputKeyChangeKeys 0.4s ease-in-out forwards;
}
@keyframes animateLoginInputKeyChangeKeys {
    0% {
      left: 60px;
    }
    30% {
      left: 80px;
    }
    70% {
      left: 80px;
    }
    100% {
      left: 60px;
    }
}
.LVQRKQRDecodingHolder {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  left: 0px;
  width: auto;
  height: 100%;
  user-select: none;
  z-index: 2;
}

.LockCloseAndInfoDiv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 0px;
  font-size: 0.9rem;
  text-align: center;
}

.expandLockCloseAndInfoDiv {
  animation: expandLockCloseAndInfoDivKeys 1s ease-in-out forwards;
}
@keyframes expandLockCloseAndInfoDivKeys {
    0% {
      width: 0px;
    }
    90% {
      width: calc(100% - 50px);
    }
    100% {
      width: calc(100% - 60px);
    }
}

.foldLockCloseAndInfoDiv {
  animation: foldLockCloseAndInfoDivKeys 0.5s ease-in-out forwards;
}
@keyframes foldLockCloseAndInfoDivKeys {
    0% {
      width: 100%;
    }
    100% {
      width: 0%;
    }
}

.selectedKeyTypeIndicatorHolder {
  position: relative;
  display: flex;
  height: 100%;
  width: 60px;
  transform-style: preserve-3d;
  transition: all 0.5s ease-in-out;
}

.keySelectedIndicator {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  border-radius: 5px;
  font-size: 2rem;
  user-select: none;
}

.blackKeysSelectedIndicator {
  transform: rotateY(0deg) translateZ(14.43px);
}
.silverKeysSelectedIndicator {
   transform: rotateY(120deg) translateZ(14.43px);
}
.goldenKeysSelectedIndicator {
  transform: rotateY(240deg) translateZ(14.43px);
}

#QRkeyScannerAnim {
  position: absolute;
  top: 20%;
  left: 25%;
  width: 50%;
  height: 50%;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#ffffff 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  50%,   
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  animation: QRkeyScannerKeys 1s infinite alternate;
}

@keyframes QRkeyScannerKeys {
 0%,10%   {background-size:10% 100%}
 50%      {background-size:10%  10%}
 90%,100% {background-size:100% 10%}
}

.LVQRKkeyUsageInfo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 7px;
  height: 50px;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 0.9rem;
  border-radius: 10px;
}

.LVQRKechoIfYouDontHaveAccount {
  position: relative;
  display: flex;
  width: 100%;
  font-size: 0.9rem;
  text-align: center;
  user-select: none;
}

.registerFormInputFields {
  position: relative;
  display: flex;
  height: auto;
  width: 94%;
  margin-bottom: 10px;
  padding-left: 5%;
  padding-right: 2%;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  outline: none;
}

.animateRegistrationField {
  animation: animateRegistrationFieldKeys 1s ease-in-out forwards;
}
@keyframes animateRegistrationFieldKeys {
    0% {
      opacity: 0;
      scale: 0.9;
      margin-top: -10px;
    }
    50% {
      opacity: 1;
      scale: 0.9;
      margin-top: -10px;
      transform: rotateX(360deg);
    }
    80% {
      scale: 1;
      margin-top: 10px;
      transform: rotateX(360deg);
    }
    100% {
      scale: 1;
      margin-top: 0px;
      transform: rotateX(360deg);
    }
}


.registerNFormInputFields {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 0px;
  width: 0px;
  overflow: hidden;
  opacity: 0;
}

.errorStyleAddition {
  border-style: solid !important;
  border-color: #ff9393 !important;
  box-shadow: 0px 0px 100px 1px rgb(255 0 0 / 48%) inset !important;
}

.fitKeyIntoBlackMakerNicely {
  height: 95% !important;
  width: 95% !important;
}

#QRKeysHolder {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 98%;
  z-index: 1011;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
}

.openQRKeysHolder {
  animation: expandQRKeysHolderKeys 0.7s ease-in-out forwards;
}
@keyframes expandQRKeysHolderKeys {
    0% {
      opacity: 0;
      scale: 0.7;
    }
    60% {
      opacity: 1;
      scale: 1.02;
    }
    70% {
      opacity: 1;
      scale: 1;
    }
    80% {
      opacity: 1;
      scale: 1.02;
    }
    100% {
      opacity: 1;
      scale: 1;
    }
}

.closeQRKeysHolderAnim {
  animation: closeQRKeysHolderKeys 0.3s ease-in-out forwards;
}
@keyframes closeQRKeysHolderKeys {
  0% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0.7;
  }
}

.QRKeysBody {
  position: relative;
  display: flex;
  flex-direction: row; /* column for mobile versions */
  height: 93%;
  width: 100%;
  perspective: 1600px;
  transform-style: preserve-3d;
}

.keysInfoSwitchButtons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 3px;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

.qrKeysTitle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-size: 1.1rem;
  letter-spacing: 1px;
  user-select: none;
}

.singleQRKeyMENUBody {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 3%;
  height: 94%;
  width: 100%;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}


.keyContentTopPart {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 30%;
  width: 100%;
}

.KeyTopBoxPart {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.KeyBottomBoxPart {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.box_bottom_part {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../../images/siteUsage/box_bottom_part.png");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: top;
  background-position-x: center;
}

.centeredColumnBox {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.cursorGrab {
  cursor: grab;
}

.fadeInSlow {
  opacity: 0;
  animation: fade-in 1.5s ease-in forwards;
}

#regKeyboxBottomPartHolder {
  z-index: 3;
}

.registrationFormClosedBoxImage {
  position: absolute;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  cursor: pointer;
}

.black_key_forged_box_top_part {
  position: relative;
  background-image: url("../../images/siteUsage/black_key_forged_box_top_part.png");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  transition: all 0.5s ease-in-out;
}
.black_key_forged_box_top_part:hover {
  transition: all 0.3s ease-in-out;
  transform: translateY(18%) rotateX(50deg);
}

.forged_black_key_only {
  position: relative;
  background-image: url("../../images/siteUsage/loggin_key_only.png");
  width: 50%;
  height: 70%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  transition: all 0.2s ease-in-out;
  z-index: 3; /* over key maker & downloader */
}
.forged_black_key_only:hover {
  scale: 1.05;
}



/* BLACK key */
.black_key_box_top_part {
  position: relative;
  background-image: url("../../images/siteUsage/black_key_forged_box_top_part.png");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  transition: all 0.5s ease-in-out;
}
.black_key_box_top_part:hover {
  transition: all 0.3s ease-in-out;
  transform: translateY(18%) rotateX(50deg);
}
.black_key_only {
  position: relative;
  background-image: url("../../images/siteUsage/loggin_key_only.png");
  width: 50%;
  height: 70%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  transition: all 0.2s ease-in-out;
  z-index: 3; /* over straps in basket */
}
.black_key_only:hover {
  scale: 1.05;
}

/* SILVER key */
.silver_key_box_top_part {
  background-image: url("../../images/siteUsage/silver_key_box_top_part.png");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  transition: all 0.5s ease-in-out;
}
.silver_key_box_top_part:hover {
  transition: all 0.3s ease-in-out;
  transform: translateY(18%) rotateX(50deg);
}
.silver_key_only {
  position: relative;
  background-image: url("../../images/siteUsage/silver_key_only.png");
  width: 50%;
  height: 70%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: top;
  transition: all 0.2s ease-in-out;
  z-index: 3; /* over straps in basket */
}
.silver_key_only:hover {
  scale: 1.05;
}

/* golden A */
.golden_a_key_box_top_part {
  background-image: url("../../images/siteUsage/gold_key_a_box_top_part.png");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  transition: all 0.6s ease-in-out;
}
.golden_a_key_box_top_part:hover {
  transition: all 0.3s ease-in-out;
  transform: translateY(18%) rotateX(50deg);
}
.golden_a_key_only {
  position: relative;
  background-image: url("../../images/siteUsage/gold_key_a_only.png");
  width: 50%;
  height: 70%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: top;
  transition: all 0.2s ease-in-out;
  z-index: 3; /* over straps in basket */
}
.golden_a_key_only:hover {
  scale: 1.05;
}

/* golden B */
.golden_b_key_box_top_part {
  background-image: url("../../images/siteUsage/gold_key_b_box_top_part.png");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  transition: all 0.9s ease-in-out;
}
.golden_b_key_box_top_part:hover {
  transition: all 0.3s ease-in-out;
  transform: translateY(18%) rotateX(50deg);
}
.golden_b_key_only {
  position: relative;
  background-image: url("../../images/siteUsage/gold_key_b_only.png");
  width: 50%;
  height: 70%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: top;
  transition: all 0.2s ease-in-out;
  z-index: 3; /* over straps in basket */
}
.golden_b_key_only:hover {
  scale: 1.05;
}

.presentKeyBoxesOpenBox {
  transform: translateY(18%) rotateX(50deg);
}

.closedBoxImage {
  position: relative;
  height: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  cursor: pointer;
}


.keyTitles {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 5%;
  width: 95%;
  height: 25%;
  font-size: 1.5rem;
}

.keySubtitles {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10%;
  height: 15%;
  width: 90%;
  font-size: 1rem;
}

.keyContentBottomPart {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin-left: 5%;
  width: 90%;
  height: 67%; /* 3% goes on parent (singleQRKeyMENUBody) padding top */
  font-size: 0.9rem;
}

.keyDescriptionText {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 0.8rem;
}

.physicalKeyMaker {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: 3;
}


.keyBasketKeyStrap {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  perspective: 700px;
  transform-style: preserve-3d;
  z-index: 3;
}

.echoKeyMakerInStraps {
  position: absolute;
  top: 35%;
  left: 0%;
  height: auto;
  width: 100%;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
}

.animateDownloadGoingDown {
  animation: animateDownloadGoingDownKeys 2s ease-in-out forwards;
}
@keyframes animateDownloadGoingDownKeys {
  0% {
    top: 50%;
  }
  90% {
    top: 80vh;
    opacity: 1;
  }
  100% {
    top: 85vh;
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}

.downloadParachute {
  position: relative;
  display: block;
  height: 70px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../../images/siteUsage/padobranBlue.png");
  animation: animateParachuteKeys 2s ease-in-out infinite;
}
@keyframes animateParachuteKeys {
  0% {
    transform: rotateZ(0deg) translateX(0px);
  }
  30% {
    transform: rotateZ(-15deg) translateX(-15px);
  }
  60% {
    transform: rotateZ(15deg) translateX(15px);
  }
  100% {
    transform: rotateZ(0deg) translateX(0px);
  }
}




#QRKeysTestHolder {
  position: absolute;
  top: 10%;
  left: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 70%;
  width: 90%;
  z-index: 5;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  animation: expandLoginFormFromDEFAULTkeys 0.6s ease-in-out forwards;
}

.testKeysBody {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 50%;
  height: 0%;
  width: 600px;
  opacity: 0;
  z-index: 3;
  animation: showTestingKeysContentKeys 0.7s ease-in-out 0.3s forwards;
}
@keyframes showTestingKeysContentKeys {
    0% {
      top: 0%;
      height: 0%;
      opacity: 0;
    }
    50% {
      top: 10%;
      opacity: 0.5;
    }
    90% {
      top: -1%;
      height: 100%;
      opacity: 1;
    }
    100% {
      top: 0%;
      height: 100%;
      opacity: 1;
    }
}

#echoDropTestingPhotoHere {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 64px;
  width: calc(100% - 66px);
  height: calc(100% - 4px);
  border: 2px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  font-size: 1rem;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  user-select: none;
}

.keyTestInfoHolder {
  position: relative;
  display: flex;
  justify-content: center;
  height: auto;
  width: 100%;
  font-size: 0.8rem;
}

.statusMessagesHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

.singleProcessMessageHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  height: auto;
  width: 100%;
  font-size: 0.8rem;
}

.processMessageName {
  position: relative;
  display: flex;
  height: auto;
  width: 80%;
}

.processMessageStatus {
  position: relative;
  display: flex;
  justify-content: right;
  height: auto;
  width: 20%;
}

.newKeyTestButton {
  position: relative;
  display: flex;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
  height: auto;
  width: 50%;
  font-size: 0.8rem;
  text-align: center;
  border-radius: 25px;
  cursor: pointer;
  animation: fade-in 2s forwards;
}

.imageSelectionHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 200px;
  width: 30%;
}

.registrationImageWrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
  width: 100%;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  z-index: 2;
}

.imageLabel {
  position: absolute;
  top: 0;
  left: 0;
  display: inline;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}


.inPhotoSelectInfo {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70%;
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
}

.fullWidthButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 0.8rem;
  border-radius: 5px;
  letter-spacing: 2px;
  user-select: none;
}

.keyTypeButtonsHolder {
  position: relative;
  display: flex;
  height: 0px;
  width: 100%;
  animation: openEyesKeys 1s ease-in-out forwards;
}

@keyframes openEyesKeys {
    0% {
      height: 0px;
    }
    90% {
      height: 80px;
    }
    100% {
     height: 70px;
    }
}

.regKeySelectionButtons {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 1px;
  border-radius: 5px;
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.regKeySelectionButtons:hover {
  cursor: pointer;
  letter-spacing: 2px;
}

.regKeySelectionButtonsSELECTED {
  border-bottom-right-radius: 35px !important;
  border-top-right-radius: 35px !important;
  border-top-left-radius: 35px !important;
}

.registrationKeyTypeSelectionHOLDER {
  position: relative;
  display: block;
  height: 40%;
  width: 100%;
  perspective: 1600px;
  transform-style: preserve-3d;
}

.regTypesOfKeyFormHolder {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

#generateKeyInstruction {
  position: relative;
  display: flex;
  height: auto;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  text-align: center;
  letter-spacing: 1px;
}

.reflectDiv{
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
}

#regForgingKeyMakerDownloaderHolder {
  position: relative;
  height: 100%;
  width: 100%;
  perspective: 1600px;
  transform-style: preserve-3d;
}

#keyMakerDIV {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  bottom: 0;
  right: 0;
  height: 100px;
  width: 80px;
  padding: 10px;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 1px;
  border-radius: 10px;
  overflow: hidden;
}

.keyMakerGlassCover {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 0px;
  left: 0px;
  height: 0%;
  width: 100%;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  z-index: 3;
  transition: all 0.4s ease-in-out;
}

.closeGlassLid {
  animation: fullHeightFromZeroKeys 1s ease-in-out forwards;
}

.openGlassLid {
  animation: minHeightFromFullKeys 1s ease-in-out forwards;
}

@keyframes fullHeightFromZeroKeys {
    0% {
      height: 0%;
    }
    100% {
      height: 100%;
    }
}

@keyframes minHeightFromFullKeys {
    0% {
      height: 100%;
    }
    100% {
      height: 0%;
    }
}

.forgeingKeyStepsInfo {
  position: relative;
  display: flex;
  height: auto;
  width: auto;
  margin-left: 10%;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 0.4rem;
  transition: all 0.2s ease-in-out;
}

.passportCardsHolder {
  position: relative;
  display: flex;
  flex-direction: row; /* column for small screens */
  justify-content: center;
  align-items: start;
  height: 90%;
  width: 100%;
}

.singlePassVisitCardHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  justify-content: space-evenly;
  align-items: start;
}

.presentationPassportCard {
  position: relative;
  display: block;
  height: 161px;
  width: 292px;
  border-radius: 10px;
  overflow: hidden;
}

.presentationVisitCard {
  position: relative;
  display: block;
  height: 143px;
  width: 276px;
  border-radius: 10px;
  overflow: hidden;
}

.visitCardBackgroundImage {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.visitCardBusinessLogoHolder {
  position: absolute;
  top: 7px;
  left: 10px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
  user-select: none;
  background-image: url("../../images/siteUsage/color_splash.png");
  z-index: 2;
}


.visitCardQRcodeIcon {
  position: absolute;
  top: 7px;
  right: 10px;
  height: 35px;
  width: 35px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
  user-select: none;
  z-index: 2;
}

.visitCardBusinessName {
  position: absolute;
  top: 45%;
  left: 5%;
  height: 50px;
  width: 90%;
  font-size: 1rem;
  text-align: center;
  letter-spacing: 2px;
  user-select: none;
}

.visitCardEchoVisitCard {
  position: absolute;
  bottom: 5px;
  left: 15px;
  font-size: 0.8rem;
  font-weight: bold;
}

.visitCardEchoUserName {
  position: absolute;
  bottom: 5px;
  right: 15px;
  font-size: 0.8rem;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
}

.passportCardEchoWebPassport {
  position: absolute;
  top: 15px;
  left: 0px;
  height: auto;
  width: 100%;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
  user-select: none;
}

.userAvatarInPassportHolder {
  position: absolute;
  top: 50px;
  left: 10px;
  height: 59px;
  width: 59px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  overflow: hidden;
  user-select: none;
  z-index: 2;
  background-image: url("../images/siteUsage/cardUser.png");
}

.echoSignInWithPSUID {
  position: absolute;
  display: block;
  bottom: 4px;
  left: 17px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  height: 20px;
  width: 100%;
}

.passportCardEchoUserName {
  position: absolute;
  display: flex;
  align-items: center;
  top: 50px;
  left: 27%;
  height: 30px;
  width: 62%;
  padding-left: 5px;
  padding-right: 2px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border-radius: 5px;
  overflow: hidden;
  z-index: 3;
}

.passportCardEchoUserLastName {
  position: absolute;
  display: flex;
  align-items: center;
  top: 87px;
  left: 27%;
  height: 30px;
  width: 62%;
  padding-left: 5px;
  padding-right: 2px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border-radius: 5px;
  overflow: hidden;
  z-index: 3;
}

.presentationBigTextColumn {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  font-size: 1.1rem;
}

.presentationNormalTextColumn {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  font-size: 0.9rem;
}




/* nikola */

.photoInfoAnimationHolder {
  position: relative;
  margin-top: 20px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.signedPhotoRepHolder {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 0%;
  height: 140px;
  width: 110px;
  border-radius: 10px;
  transition: all 0.7s ease-in-out;
  opacity: 0;
  cursor: pointer;
}

.repSignedPhotoTopPart {
  position: relative;
  display: flex;
  height: 20%;
  width: 100%;
  justify-content: center;
  align-items: end;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.repSignedPhotoMiddlePart {
  position: relative;
  display: flex;
  height: 60%;
  width: 85%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.repSignedPhotoBottomPart {
  position: relative;
  display: flex;
  height: 20%;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
}

.presentationIllustrationIconHolder {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  left: 10%;
  height: 150px;
  width: 150px;
  border-radius: 10px;
  overflow: hidden;
  border-style: solid;
  border-width: 3px;
}

.photoKeyImageAppearAnim {
  opacity: 0;
  animation: photoKeyImageAppearKeys 1.5s ease-in-out 0.7s forwards;
}

@keyframes photoKeyImageAppearKeys {
    0% {
      opacity: 0;
      scale: 2;
      transform: rotateZ(-360deg);
    }
    50% {
      opacity: 0.5;
      transform: rotateZ(20deg);
    }
    60% {
      opacity: 1;
      scale: 1;
      transform: rotateZ(0deg);
    }
    100% {
      opacity: 1;
      scale: 1;
    }
}

.physicalKeyPresentationImageTOPpart {
  position: relative;
  top: 0;
  left: 0;
  height: 40%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  background-image: url("../images/siteUsage/silverKeyManufacturingTOPpart.png");
  z-index: 2;
}
.physicalKeyEngravingAnim {
  animation: physicalKeyEngravingKeys 2s ease-in-out 0.3s forwards;
}
@keyframes physicalKeyEngravingKeys {
    0% {
      margin-top: 0px;
      transform: translateX(0px);
    }
    15% {
      margin-top: 30px;
      transform: translateX(0px);
    }
    30% {
      margin-top: 30px;
      transform: translateX(-10px);
    }
    45% {
      margin-top: 30px;
      transform: translateX(15px);
    }
    65% {
      margin-top: 30px;
      transform: translateX(0px);
    }
    100% {
      margin-top: 0px;
      transform: translateX(0px);
    }
}

.animateLayingDownAndDissapear {
  transition: all 0.4s ease-in-out !important;
  transform: translate(0, 27%) rotateX(60deg) !important;
  scale: 1.2 !important;
  opacity: 0.1 !important;
}

.physicalKeyPresentationImageBOTTOMpart {
  position: absolute;
  bottom: 0;
  height: 50%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  background-image: url("../images/siteUsage/silverKeyManufacturingBOTTOMpart.png");
}

#signedPhotoImage {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

#photoHandSignature {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.presentationSTRONGLetters {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
  letter-spacing: 4px;
  text-align: center;
}

.keyDescriptionHolder {
  position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    width: 100%;
    user-select: none;
}

.presentationKeyDescriptionText {
  position: relative;
  display: block;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.9rem;
  text-align: center;
}

.comeFromLeftAnim {
  animation: comeFromLeftKeys 0.5s ease-in-out forwards;
}
@keyframes comeFromLeftKeys {
    0% {
      opacity: 0;
      margin-left: -50px;
    }
    90% {
     opacity: 1;
      margin-left: 10px;
    }
    100% {
      opacity: 1;
      margin-left: 0px;
    }
}

.comeFromRightAnim {
  animation: comeFromRightKeys 0.5s ease-in-out forwards;
}
@keyframes comeFromRightKeys {
    0% {
      opacity: 0;
      margin-left: 50px;
    }
    90% {
     opacity: 1;
      margin-left: -10px;
    }
    100% {
      opacity: 1;
      margin-left: 0px;
    }
}

.comeFromTopAnim {
  animation: comeFromTopKeys 0.5s ease-in-out forwards;
}
@keyframes comeFromTopKeys {
    0% {
      opacity: 0;
      margin-top: -50px;
    }
    90% {
     opacity: 1;
      margin-top: 10px;
    }
    100% {
      opacity: 1;
      margin-top: 0px;
    }
}

.comeFromBottomAnim {
  animation: comeFromBottomKeys 0.5s ease-in-out forwards;
}
@keyframes comeFromBottomKeys {
    0% {
      opacity: 0;
      margin-top: 50px;
    }
    90% {
     opacity: 1;
      margin-top: -10px;
    }
    100% {
      opacity: 1;
      margin-top: 0px;
    }
}

.letterSpacing2PX {
  letter-spacing: 2px;
}

.registerNowButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 50%;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 0.9rem;
  user-select: none;
  letter-spacing: 2px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.registerNowButtons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 50%;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 0.9rem;
  user-select: none;
  letter-spacing: 2px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}






#mainUserMenu {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  top: -10%;
  right: 0px;
  height: 7%;
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
  border-bottom-left-radius: 25px;
  border-style: solid;
  border-width: 2px;
  transition: all 2s ease-in-out;
  overflow: hidden;
  white-space: nowrap;
  z-index: 103;
}


#userMenuHolder {
  display: block;
  position: absolute;
  top: 0;
  right: 10px;
  height: 580px;
  width: 400px;
  border-radius: 20px;
  border-style: solid;
  border-width: 2px;
  overflow: hidden;
  visibility: hidden;
  transition: all 0.5s ease-out;
  z-index: 105;
}

#userMenuContent {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 98%;
  opacity: 0;
  transform: scale(0.8);
}

.appearUserMenu {
  animation: showUmenu 0.5s forwards ease-in-out;
}
@keyframes showUmenu {
  0% {
    visibility: visible;
    opacity: 0.5;
    transform: scale(1);
  }
  40% {
    visibility: visible;
    opacity: 0.7;
    transform: scale(1.1);
  }
  100% {
    top: 8%;
    right: 40px;
    height: 80%;
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
}

.appearMenuContent {
  animation: showMContent 0.4s forwards ease-in-out;
}

@keyframes showMContent {
  0% {
    visibility: visible;
    opacity: 0.5;
    transform: scale(0.8);
  }
  70% {
    visibility: visible;
    opacity: 0.7;
    transform: scale(1.05);
  }
  100% {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
}

.disappearUserMenu {
  animation: hideUmenu 0.3s forwards ease-in-out;
}

@keyframes hideUmenu {
  0% {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    top: 7%;
    right: 40px;
  }
  60% {
    visibility: visible;
    opacity: 0.8;
    transform: scale(1.05);
    top: 7%;
    right: 0px;
  }
  100% {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.7);
    top: -7%;
    right: 0px;
  }
}


.evalsCardUserMenuHolder {
  position: relative;
  display: flex;
  justify-content: end;
  height: auto;
  width: 98%;
}

.evalCardInMenuHolder {
  position: relative;
  display: flex;
  width: 184px;
  height: 92px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  scale: 0.5;
  animation:appearPurchasingCardKeys 0.4s ease-in-out 0.5s forwards;
}
@keyframes appearPurchasingCardKeys {
  0% {
    opacity: 0;
    scale: 0.5;
  }
  90% {
    opacity: 1;
    scale: 1.05;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

.evalCardQR {
  position: absolute;
  right: 5%;
  top: 7%;
  display: block;
  width: 17%;
  height: 33%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.animateEvalCardAcquiring {
  animation:spinTimeToTimeKeys 1s ease-in-out infinite;
}
@keyframes spinTimeToTimeKeys {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  100% {
    transform: rotateZ(90deg);
  }
}

.echoEvalInCard {
  position: absolute;
  top: 5%;
  left: 7%;
  height: auto;
  width: auto;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 5px;
  z-index: 2;
}

.userNameInEvalCard {
  position: absolute;
  top: 65%;
  left: 7%;
  height: auto;
  width: 87%;
  overflow: hidden;
  z-index: 2;
}

.userLastNameInEvalCard {
  position: absolute;
  top: 80%;
  left: 7%;
  height: auto;
  width: 85%;
  overflow: hidden;
  z-index: 2;
}

.evalCardFontStyle {
  font-size: 0.7rem;
  font-style: oblique;
  letter-spacing: 1px;
}

.evalAmountInEvalCard {
  position: absolute;
  display: block;
  top: 40%;
  left: 20%;
  height: auto;
  width: 60%;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 1px;
}

.evalAcquireItemButton {
  position: relative;
  display: flex;
  padding-top: 14px;
  padding-bottom: 12px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 25px;
  font-size: 0.9rem;
  letter-spacing: 2px;
  border-style: solid;
  border-width: 1px;
  user-select: none;
  transition: all 0.2s ease-in-out;
}

.userMenuInfoArea {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 38%;
  width: 99%;
  padding-top: 10px;
  padding-bottom: 20px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

.userMenuSignOptionButtons {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  width: 99%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.9rem;
  border-radius: 5px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-style: solid;
  border-width: 1px;
}
.userMenuSignOptionButtons:hover {
  letter-spacing: 3px;
}

.appearUserMenuInfoArea {
  animation: marginLeftFrom100ToZeroKeys 0.3s ease-in-out forwards 0.1s;
}
.appearUserMenuSignOptionButtons {
  animation: marginLeftFrom100ToZeroKeys 0.4s ease-in-out forwards 0.2s;
}

@keyframes marginLeftFrom100ToZeroKeys {
  0% {
    transform: translateX(100px);
  }
  
  100% {
    transform: translateX(0);
  }
}

.googleSignInStatusIcon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 50px;
  font-size: 1.7rem;
  transition: all 0.2s ease-in-out;
}

.logginKeyinMenuButton {
  position: relative;
  display: block;
  height: 100%;
  width: 47px;
  margin-left: 5%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../../images/siteUsage/loggin_key_only.png");
}

.userMenuEchoLogin {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: auto;
  margin-left: 20px;
  font-size: 0.8rem;
}

#DLmodeSwitchHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 0.5s ease-in-out;
  height: 100%;
  width: auto;
  white-space: nowrap;
}

.DLmodeSwitch {
  position: relative;
  display: flex;
  align-items: center;
  width: 100px;
  height: 35px;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  transition: all 0.3s;
  cursor: pointer;
}

.DLmodeCircle {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

.DLmodeLightSide {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0px;
  width: 35px;
  z-index: 3; /* ensure above circle */
}

.DLmodeDarkSide {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 2px;
  width: 35px;
  z-index: 3; /* ensure above circle */
}

.DLmodeIcon {
  width: 24px;
  height: 24px;
  transition: opacity 0.3s;
}

#LDmodeTargetingHolder {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  height: 100%;
  margin-right: 15px;
  transition: all 0.3s;
}

.DLmodeTargetingSectionButton {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
  width: 120px;
  cursor: pointer;
  user-select: none;
}

.DLmodeSectionTargetingIconHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  width: 70%;
  height: 100%;
  perspective: 700px;
  transform-style: preserve-3d;
  user-select: none;
}

.DLmodeSectionTargetingMarkHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 100%;
  font-size: 1.2rem;
  transition: all 0.3s ease-in-out;
  user-select: none;
}

.transformYminus90 {
  transform: rotateY(-90deg) !important;
}

.transformYplus90 {
  transform: rotateY(90deg) !important;
}

.DLmodeSectionTargetingText {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 35%;
  font-size: 0.7rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  user-select: none;
}

#DLmodeThisViewSectionIndicator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
  width: 47px;
  font-size: 1.6rem;
  border-radius: 5px;
}

.DLmodeThisViewSectionIndicatorAnim {
  animation: DLmodeThisViewSectionIndicatorKeys 0.7s ease-in-out forwards;
}
@keyframes DLmodeThisViewSectionIndicatorKeys {
  0% {
    font-size: 1.6rem;
  }
  30% {
    font-size: 1.1rem;
  }
  60% {
    font-size: 1.6rem;
  }
  90% {
    font-size: 1.1rem;
  }
  100% {
    font-size: 1.7rem;
  }
}

.DLMAScube {
  position: relative;
  display: block;
  left: 0px;
  width: 45%;
  height: 60%;
  transform-style: preserve-3d;
  transform: rotateX(337deg) rotateY(40deg);
}

.DLMAScube div {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

/* Faces */
.DLMAStopCubeSide {
  transform: rotateX(90deg) translateZ(13px);
}
.DLMAStopCubeSideAnim {
  animation: appearCubeTopSide 0.7s ease-in-out none;
}
@keyframes appearCubeTopSide {
  0% {
    transform: translateZ(-13px);
  }
  100% {
    transform: rotateX(90deg) translateZ(13px);
  }
}

.DLMASleftCubeSide {
  transform: rotateY(-90deg) translateZ(14px);
}
.DLMASleftCubeSideAnim {
  animation: appearCubeLeftSide 0.7s ease-in-out none;
}
@keyframes appearCubeLeftSide {
  0% {
    transform: rotateY(0deg) translateZ(14px);
  }
  100% {
    transform: rotateY(-90deg) translateZ(14px);
  }
}

.DLMASfrontCubeSide {
  transform: rotateY(0deg) translateZ(14px);
}
.DLMASfrontCubeSideAnim {
  animation: appearCubeFrontSide 0.7s ease-in-out none;
}
@keyframes appearCubeFrontSide {
  0% {
    transform: rotateY(-90deg) translateZ(14px);
  }
  100% {
    transform: rotateY(0deg) translateZ(14px);
  }
}

.DLMASrightCubeSide {
  transform: rotateY(-90deg) translateZ(13px);
}
.DLMASrightCubeSideAnim {
  animation: appearCubeRightSide 0.7s ease-in-out none;
}
@keyframes appearCubeRightSide {
  0% {
    transform: rotateY(0deg) translateZ(13px);
  }
  100% {
    transform: rotateY(-90deg) translateZ(13px);
  }
}

.DLMASbottomCubeSide {
  transform: rotateX(-90deg) translateZ(12px);
}

.DLMASbackCubeSide {
  transform: rotateY(180deg) translateZ(13px);
}




#userDataHolder {
  display: none;
  position: relative;
  margin-left: 20px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
}

#holderForAuthUserImg {
  position: relative;
  display: flex;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: hidden;
}

#googleLogInButton {
  display: flex;
  position: relative;
  margin-left: 20px;
  width: fit-content;
  padding: 2px;
  font-size: 0.9rem;
  border-radius: 25px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

.glowingButton {
  position: relative;
  display: flex;
  border-radius: 10px;
  z-index: 0;
  isolation: isolate;
  padding: 2px; /* Just enough space to make room for the glow */
  overflow: hidden;
  cursor: pointer;
}

.glowingButtonContent {
  position: relative;
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.9rem;
  z-index: 1;
  position: relative;
  border-radius: 25px;
}

.glowingButton::before,
.glowingButton::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background-image: conic-gradient(#ff5d5d, #00ff99, #5cceff, #ff4eb5, #ff4545);
  /*animation: spin 5s linear infinite; for now  */
  z-index: -1;
  pointer-events: none;
}

.glowingButton::before {
  filter: blur(1.5rem);
  opacity: 0.8;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#notificationsButtonHolder {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.7rem;
  border-radius: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
}

#notificationsNumber {
  position: relative;
  height: auto;
  width: auto;
  font-size: 0.9rem;
  font-weight: bold;
  z-index: 2;
  color: #e80505;
}

.newNotificationsNumber {
  color: #e80505;
}

#notificationIcon {
  position: relative;
  display: block;
  top: 0px;
  left: 0px;
  font-size: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#notificationIcon:hover {
  scale: 1.1;
}

.notificationActiveAnimation {
animation: animateNewNotifications 2s infinite;
}

@keyframes animateNewNotifications {
  0% {
    transform: rotateZ(0deg);
  }
  5% {
    transform: rotateZ(10deg) scale(1.2);
  }
  10% {
    transform: rotateZ(-10deg) scale(1.2);
  }
  15% {
    transform: rotateZ(0deg) scale(1.2);
  }
  20% {
    transform: rotateZ(10deg) scale(1.2);
  }
  25% {
    transform: rotateZ(-10deg) scale(1.2);
  }
  30% {
    transform: rotateZ(0deg) scale(1);
  }
}


#theCUBE {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  perspective: 1600px; /* Enable 3D depth */
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.mainViewsSections {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  perspective: 1000px; /* Enable 3D depth */ 
  transition: all 1s ease-in-out;
  overflow: hidden;
  transform: translateX(0%) translateY(0%) rotateX(0deg) rotateY(0deg) scale(1);
  opacity: 1;
  z-index: 2;
}

  
.leftPosMainView {
  transform: translateX(-50%) rotateY(-90deg) scale(0.3) !important;
  opacity: 0 !important;
  z-index: 1;
}
  
.rightPosMainView {
  transform: translateX(50%) rotateY(90deg) scale(0.3) !important;
  opacity: 0 !important;
  z-index: 1;
}

.topPosMainView {
  transform: translateY(-50%) rotateX(90deg) scale(0.3) !important;
  opacity: 0 !important;
  z-index: 1;
}

.bottomPosMainView {
  transform: translateY(50%) rotateX(-90deg) scale(0.3) !important;
  opacity: 0 !important;
  z-index: 1;
}

.hiddenElements {
  height: 0px;
  width: 0px;
  visibility: hidden;
  overflow: hidden;
  font-size: 0rem;
}

#backgroundCustomImageHolder {
  position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

#backgroundImage {
  width: 100%;
  height: 100%;
}

.defaultBackgroundImage {
  position: absolute;
  display: flex;
  justify-content: center;
  height: auto;
  width: 100%;
}

.bckGear1Holder {
  position: relative;
  width: 324px;
  height: 323px;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));
}

.bckGear2Holder {
  position: relative;
  margin-top: 2%;
  width: 134px;
  height: 134px;
  -webkit-box-reflect: below 100px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.2));
}

.bckGear3Holder {
  position: relative;
  margin-top: 2%;
  width: 252px;
  height: 251px;
  -webkit-box-reflect: below 5px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));
}

.bckGear4Holder {
  position: relative;
  margin-top: 5%;
  width: 134px;
  height: 134px;
  -webkit-box-reflect: below 50px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
}

.gear1IMG {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
}

.gear2IMG {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
}

.gear3IMG {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
}

.gear4IMG {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
}

.gear13StartingAnimation {
  animation: gear13StartingKeys 2.5s none;
}
@keyframes gear13StartingKeys {
  0% {
    opacity: 0;
    transform: rotateZ(0deg);
  }
  15% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(370deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.gear24StartingAnimation {
  animation: gear24StartingKeys 2.5s none;
}
@keyframes gear24StartingKeys {
  0% {
    opacity: 0;
    transform: rotateZ(0deg);
  }
  15% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(-380deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

.gear13WorkingRotationAnim {
  animation: gear13WorkingRotationKeys 2s none;
}
@keyframes gear13WorkingRotationKeys {
  90% {
    opacity: 0.7;
    transform: rotateZ(370deg);
  }
  100% {
    opacity: 0.7;
    transform: rotateZ(360deg);
  }
}

.gear24WorkingRotationAnim {
  animation: gear24WorkingRotationKeys 2s none;
}
@keyframes gear24WorkingRotationKeys {
  90% {
    opacity: 0.7;
    transform: rotateZ(-380deg);
  }
  100% {
    opacity: 0.7;
    transform: rotateZ(-360deg);
  }
}


.bannerDynamicImage {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#bodyHeader {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 0px;
  left: 0px;
  height: 10vh;
  width: 100%;
  transition: all 0.3s ease-out;
  z-index: 95;
  overflow: hidden;
}

#bodyHeader1 {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 99%;
  padding-left: 1%;
}

#bodyHeader2 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: start;
  height: 100%;
  width: 100%;
}

#bodyHeader3 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 95%;
  margin-left: 5%;
}

.pageMenuButtons {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  max-width: 25%;
  width: 100%;
  height: 70%;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out !important;
  animation: PMBappearence 0.8s forwards;
}
.pageMenuButtons:hover {
  height: 80%;
}

@keyframes PMBappearence {
  0% {
    opacity: 0;
    transform: rotateY(360deg) scale(0);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
  }
}

.activePageMenuButtons {
  /*background: none !important;*/
  width: 100%;
  height: 80%;
  font-size: 0.9rem !important;
  letter-spacing: 1px !important;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  cursor: default !important;
  font-weight: bold;
}
.activePageMenuButtons:hover {
  height: 80% !important;
}

.siteMenuIcons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: end;
  padding-top: 10%;
  height: 40%;
  width: 100%;
}

.siteMenuTitles {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: end;
  height: 40%;
  padding-bottom: 10%;
}

#logoImageHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
}

.logoImageContent {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
}

#mainProjectInfoHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 70%;
}

#projectNameHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: 2%;
  width: 98%;
  justify-content: center;
  align-items: start;
}

#mainProjectName {
  position: relative;
  display: flex;
  margin-top: 15px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.2rem;
}

#linkToPublicProfile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin-top: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 10px;
  border-radius: 15px;
  cursor: pointer;
  visibility: hidden;
  font-size: 0.8rem;
}

.linkPPicon {
  display: block;
  position: relative;
  height: 20px;
  width: 20px;
  object-fit: scale-down;
}

.linkPPtext {
  position: relative;
  display: block;
  margin-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
}

#projectMainSettingsHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: left;
  align-items: center;
}

#pagesShowcaseHolder {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

#timeDetailsButton {
  position: relative;
  display: block;
  float: left;
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  animation: PMBappearence 0.5s forwards;
  background-image: url("../../images/siteUsage/stopwatch.png");
  -webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
}
#timeDetailsButton:hover {
  scale: 1.1;
}

#costDetailsButton {
  position: relative;
  float: left;
  margin-left: 20px;
  display: block;
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  animation: PMBappearence 0.5s forwards;
  background-image: url("../../images/siteUsage/dollarSign.png");
  -webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
}
#costDetailsButton:hover {
  scale: 1.1;
}

#cubeItButton {
  position: relative;
  display: block;
  float: left;
  margin-left: 20px;
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  animation: PMBappearence 0.5s forwards;
  background-image: url("../../images/siteUsage/cube.png");
  -webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
}
#cubeItButton:hover {
  scale: 1.1;
}

#spreaditButton {
  position: relative;
  display: block;
  float: left;
  margin-left: 20px;
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  animation: PMBappearence 1s forwards;
  background-image: url("../../images/siteUsage/pages.png");
  -webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
}
#spreaditButton:hover {
  scale: 1.1;
}

#customizeProjectButton {
  position: relative;
  display: block;
  float: left;
  margin-left: 20px;
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  animation: PMBappearence 1.5s forwards;
  background-image: url("../../images/siteUsage/settings.png");
  -webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
}
#customizeProjectButton:hover {
  scale: 1.1;
}

#bodyBody {
  position: absolute;
  display: block;
  top: 10vh;
  height: 90vh;
  width: 100%;
  /*overflow: hidden;*/
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.3s ease-out;
  z-index: 2;
}

#overAll {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 0px;
  background-image: linear-gradient(to bottom, #24213b, #111225);
}



.appearMenuGracefuly {
  animation: menuOnFromTop 0.4s forwards ease-in-out;
}

@keyframes menuOnFromTop {
  0% {
    visibility: visible;
    opacity: 0;
    margin-top: -20px;
  }
  50% {
    visibility: visible;
    opacity: 1;
    margin-top: 10px;
  }
  80% {
    visibility: visible;
    opacity: 1;
    margin-top: -5px;
  }
  100% {
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
  }
}

.disappearMenuGracefuly {
  animation: menuOffToTop 0.4s forwards ease-in-out;
}

@keyframes menuOffToTop {
  0% {
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
  }
  20% {
    visibility: visible;
    opacity: 1;
    margin-top: 10px;
  }
  80% {
    visibility: visible;
    opacity: 0;
    margin-top: -20px;
  }
  100% {
    visibility: hidden;
    opacity: 0;
    margin-top: -20px;
  }
}

.userImgInMenuContainer {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-left: 15px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.closeMenuButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  margin-top: 5px;
  height: 40px;
  width: 40px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 50%;
  transition: all 0.2s ease-out;
  cursor: pointer;
  user-select: none;
  z-index: 5;
}
.closeMenuButton:hover {
  transform: rotateZ(90deg);
}

.userMenuTitles {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 7%;
  width: 30%;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.userMenuInputs {
  position: relative;
  display: flex;
  height: 30px;
  width: 60%;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 1px;
  outline: none;
  border: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background: none;
}

.selectProfilePhotoHolder {
  position: relative;
  margin-top: 10px;
  margin-left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.saveProfileButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-left: 20px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.8rem;
  border-radius: 20px;
  transition: all 0.3s ease-out;
}
.saveProfileButton:hover {
  letter-spacing: 1px;
}

.koFiButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
  padding-left: 15px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.koFiButton:hover {
  letter-spacing: 1px;
}

.koFiIcon {
  position: relative;
  display: block;
  height: 25px;
  width: auto;
}

.deleteAccountButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  padding-left: 15px;
  padding-right: 20px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 0.7rem;
  border-radius: 20px;
  transition: all 0.2s ease-out;
}
.deleteAccountButton:hover {
  letter-spacing: 1px;
  font-size: 0.8rem;
}

.logOutButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  width: 100px;
  font-size: 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease-out;
}
.logOutButton:hover {
  letter-spacing: 1px;
}

#notificationsHolderDiv {
  display: block;
  position: absolute;
  top: 485px;
  right: 20px;
  height: 0px;
  width: 400px;
  z-index: 99;
  border-radius: 10px;
  overflow: hidden;
  visibility: hidden;
  transition: all 0.3s ease-out;
}

#notificationsHeader {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 0px;
  left: 0px;
  height: auto;
  width: 100%;
}

#deleteAllNotificationsButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  height: 30px;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  z-index: 2;
  opacity: 0.5;
}

#deleteAllNotificationsIcon {
  position: relative;
  display: block;
  height: 24px;
  width: 24px;
  background-image: url("../../images/siteUsage/delete.png");
}

#deleteAllNotificationsText {
  position: relative;
  display: flex;
  margin-left: 5px;
  font-size: 0.8rem;
}

#notificationsTitle {
  position: absolute;
  display: flex;
  left: 0px;
  top: 10px;
  height: auto;
  width: 100%;
  justify-content: center;
  font-size: 0.9rem;
}

#closeNotificationsButton {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 5px;
  right: 5px;
  height: 30px;
  width: 30px;
  font-size: 0.7rem;
  border-radius: 50%;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 3;
  user-select: none;
}
#closeNotificationsButton:hover {
  font-weight: bold;
  transform: rotateZ(180deg);
}

#notificationsBody {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  top: 40px;
  left: 0px;
  height: 100%;
  width: 100%;
  font-size: 0.9rem;
  overflow: auto;
}

.singleNotificationDiv {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 97%;
  margin-top: 2px;
  padding-left: 3%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.9rem;
}

.singleNotificationHeader {
  position: relative;
  display: flex;
  flex-direction: row;
  height: auto;
  width: 100%;
  overflow: hidden;
}

.notificationsImageHolder {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.notificationSenderDateHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
}

.notificationSenderName {
  position: relative;
  display: flex;
  height: auto;
  width: 100%;
  font-size: 0.9rem;
  overflow: hidden;
  white-space: nowrap;
}

.notificationDate {
  position: relative;
  display: flex;
  height: auto;
  width: 100%;
  font-size: 0.7rem;
  overflow: hidden;
  white-space: nowrap;
}

.singleNotificationBody {
  position: relative;
  display: block;
  margin-top: 10px;
  height: auto;
  width: 100%;
  font-size: 0.9rem;
}

.uncheckedMark {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 50%;
  transition: all 0.3s ease-out;
}

#menuExplorePage {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  transition: all 0.5s ease-out;
  border-radius: 15px;
}

#workflowPage {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 100%;
  width: 100%;
  transition: all 0.5s ease-out;
  /*overflow: hidden;*/
}

.mainInfo {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: normal;
  font-size: 1.5rem;
  border-radius: 15px;
  height: 100%;
  overflow: hidden;
}

.typewriter {
  overflow: hidden; 
  border-right: .15em solid rgb(118, 250, 206);
  white-space: nowrap;
  margin: 0 auto; /* Adjust this as needed */
  letter-spacing: .15em; /* Adjust this as needed */
  animation: typing 1.5s steps(40, end) 0s both, blink-caret .75s step-end infinite;
}

/* CSS keyframe animation for typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* CSS keyframe animation for cursor blinking */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.simplestFlexColumn {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: auto;
}


.messageNotificationAnimation {
  border-style: solid;
  border-width: 1px;
  border-color: red !important;
  animation: animateNewMessage 1s infinite;
}

@keyframes animateNewMessage {
  0% {
    transform: rotateZ(0deg) scale(1.1);
  }
  10% {
    transform: rotateZ(10deg) scale(1.2);
  }
  20% {
    transform: rotateZ(-10deg) scale(1.2);
  }
  30% {
    transform: rotateZ(0deg) scale(1);
  }
}

.singleQmemberImageHolder {
  position: relative;
  display: block;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  overflow: hidden;
}

.imageFitCover {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reactionEmojiHolder {
  position: relative;
  display: block;
  margin-left: 10px;
  height: 40px;
  width: 40px;
}

#menuContainer {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 3;
}



.disapearZoomFadeAnim {
  animation: disappearZoomOutFadeOut 1s forwards;
}

@keyframes disappearZoomOutFadeOut {
  0% {
    scale: 1;
    opacity: 1;
  }
  100% {
    scale: 0.7;
    opacity: 0;
  }
}

.projectsSubProjectsHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 400px;
  width: auto;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 25px;
}

.ownerProjectAllContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: auto;
  border-radius: 45px;
}

.ownerProjectActivationHolder {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 150px;
  width: 150px;
  cursor: pointer;
  transition: all 0.2s ease-in !important;
  border-radius: 50%;
  z-index: 5;
  animation: bringingProjectsIn 1s forwards;
}

.reflectionOnProjectIcons {
   -webkit-box-reflect: below -5px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

.ownerSubProjectActivationHolder {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 150px;
  width: 150px;
  transition: all 0.2s ease-in !important;
  scale: 0.6;
  z-index: 3;
}


.cursorPointerOnHoverScale {
  cursor: pointer;
}
.cursorPointerOnHoverScale:hover {
  transform: scale(1.1);
}

.getInHere {
  animation: bringingProjectsIn 1s forwards;
}

@keyframes bringingProjectsIn {
  0% {
    opacity: 0;
    scale: 0;
    transform: rotateY(360deg);
  }
  100% {
    opacity: 1;
    scale: 1;
    transform: rotateY(0deg);
  }
}

.getSubProjectInHere {
  animation: getSubProjectHere 0.8s forwards;
}

@keyframes getSubProjectHere {
  0% {
    opacity: 0;
    transform: rotateY(90deg);
    margin-right: -100px;
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg);
    margin-right: 0px;
  }
}

.spinningYaxis {
  animation: spinYaxis 1.7s infinite;
}

@keyframes spinYaxis {
  from {
    transform: rotateY(360deg);
  }
  to {
    transform: rotateY(0deg);
  }
}

.spinningZaxis {
  animation: spinZaxis 1.7s infinite;
}

@keyframes spinZaxis {
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}

.customProjectsVerticalLine {
  position: absolute;
  right: 0px;
  width: 0px;
  border-left-style: solid;
  border-left-width: 2px;
}

.newProjectActivationHolder {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  width: 250px;
  margin: 10px;
  cursor: pointer;
  transition: all 0.5s;
  z-index: 3;
  opacity: 0;
  scale: 0.7;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.5));
}

.newProjectActivationHolder:hover {
  transform: scale(1.1);
}

.OPABtitleHolder {
  position: absolute;
  display: flex;
  align-items: center;
  top: 37%;
  left: 0px;
  width: 100%;
  height: 45px;
  border-radius: 25px;
  transition: all 0.5s ease-in-out;
  white-space: nowrap;
  border-width: 1px;
  overflow: hidden;
}
.OPABtitleHolder:hover {
  scale: 1.1;
}



.OPABtitleContent {
  position: relative;
  flex: 1; /* important for uploadProjectCoverDiv to remain proportional */
  margin-left: 10px;
  top: 0px;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.OsubPABtitleHolder {
  position: absolute;
  top: 0%;
  width: auto;
  padding: 10px;
  font-size: 1.1rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 25px;
  transition: all 0.5s;
}

.OPABimageHolder {
  position: absolute;
  display: flex;
  justify-content: center;
  height: 150px;
  width: 150px;
  overflow: hidden;
  border-radius: 50%;
}

.OPABimageContent {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.memberProjectActivationHolder {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  width: 150px;
  margin: 7px;
  cursor: pointer;
  transition: all 0.5s;
  z-index: 3;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.1));
}

.memberProjectActivationHolder:hover {
  transform: scale(1.1);
}

.POMimage {
  position: absolute;
  top: 3px;
  left: 65%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  z-index: 3;
}

.POMimageContent {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.titleAndSubtitleContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.titleContainer {
  position: relative;
  display: flex;
  margin-top: 10px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 2.2rem;
  font-weight: bold;
}

.titleWordPart1 {
  position: relative;
  background: linear-gradient(to right, #fcffdf, #dbfff5, #aefbff);
  background-clip: text; /* Standard property */
  -webkit-background-clip: text; /* WebKit-specific property */
  color: transparent;
  transition: all 0.3s ease-in-out;
}

.titleWordPart2 {
  position: relative;
  margin-left: 2%;
 background: linear-gradient(to right, #0b6de5, #d591ff, #ff65c7);
  background-clip: text; /* Standard property */
  -webkit-background-clip: text; /* WebKit-specific property */
  color: transparent;
  transition: all 0.3s ease-in-out;
}

.TItem {
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  font-family: 'Exo', sans-serif;
  transform-origin: center;
  animation-fill-mode: forwards; /* Preserve the final state */
  animation-play-state: paused; /* Pause animation by default */
  background-color: transparent;
  color: transparent;
  transition: all 0.3s ease-in-out;
}

#bannerText {
  position: relative;
  display: flex;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  font-family: 'Exo', sans-serif;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 10px;
  user-select: none;
  white-space: nowrap;
}

.weldedLetter {
  display: block;
  opacity: 0;
  white-space: nowrap;
  z-index: 2;
}

.weldingLetterAnim {
  animation: weldingLetterKeys 1s forwards;
}

/* Key animation */
@keyframes weldingLetterKeys {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
    font-weight: bold;
    scale: 1.2;
  }
  60% {
    opacity: 1;
    font-weight: normal;
    scale: 1;
  }
  100% {
    opacity: 1;
  }
}

.rotateAroundAxis {
  animation: rotationAroundAxis 2s linear infinite !important;
  transform-origin: center; /* Ensures the rotation occurs around the center */
}

#exploreOptionsContainer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
  width: 100%;
  height: 130px;
  transition: all 1s ease-in-out;
  z-index: 2;
}


.mainPageSelectionIcons {
  display: flex;
  height: 40px;
  width: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.mainPageButtonTitles {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-left: 50px;
  height: auto;
  width: 100%;
  font-size: 1rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

.mainPageButtonDescription {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-left: 50px;
  height: auto;
  width: 100%;
  font-size: 0.8rem;
  white-space: nowrap;
}

.mainPageButtonsCornerTopLeftTriangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 100px 100px 0px 0px;
}

.mainPageButtonsCornerTriangle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 0px 50px 50px;
}

.nameLine {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: rgb(0 0 0 /10%);
  margin-left: 20%;
  width: 60%;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 3%;
  border-top-right-radius: 3%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  transition: all 1s ease-in-out;
  opacity: 0;
  transform: rotateX(180deg) scale(1.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: appearGlassyBanner 2s ease-out forwards;
  z-index: 2;
}

@keyframes appearGlassyBanner {
  0% {
    margin-top: 5%;
    transform: rotateX(180deg) scale(1.2);
    opacity: 0;
  }
  50% {
    margin-top: 5%;
    transform: rotateX(180deg) scale(1.2);
    opacity: 0;
  }
  100% {
    margin-top: 0%;
    transform: rotateX(0deg) scale(1);
    opacity: 1;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
}

.buttonP {
  margin-left: 20px;
  background-color: #03c2e9;
  border-radius: 100px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: inline-block;
  font-family: 'Exo', sans-serif;
  font-weight: bold;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  border: 0;
  font-size: medium;
  user-select: none;
  -webkit-user-select: none;
/*  animation: threeDrotate;*/
  animation-delay: 6s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-iteration-count:1;
  animation-direction:alternate;
  animation-timing-function: ease-in-out;
}

.buttonP:hover {
  animation: resetThreeDrotate;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

.breatheEffect {
  animation: zoomInZoomOut;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

.spinEffect {
  animation: spinLeftRight;
  animation-duration: 5s;
  animation-direction:alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.slowBreatheEffect {
  animation: mildZoomInZoomOut;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

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

/* for normal and big screen, other definition exists for small screen: @media (max-width: 768px)*/


.scale07 {
  scale: 0.7 !important;
}
.scale08 {
  scale: 0.8 !important;
}

@keyframes rotationAroundAxis {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* called via javascript inside html file  */
@keyframes spinAndFadeIn {
  0% {
      opacity: 0;
  }
  50% {
      transform: rotateY(190deg);
      opacity: 0.50;
  }
  100% {
      transform: rotateY(360deg);
      opacity: 0.99;
  }
}

.fadeInShort {
  animation: fade-in 1s forwards;
}

#PROTOTYPE {
  position: absolute;
  top: 40%;
  color: #ffffff; /* Text color */
  font-size: 2.5rem;
  text-align: center;
  letter-spacing: 5px;
  opacity: 0;
  animation: fade-in 1s forwards 4s;
  transition: all 0.3s ease-in-out;
}

#bottomPart {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  font-size: 1.2rem;
  font-family: 'Exo', sans-serif;
  font-weight: normal;
  text-align: center;
  animation: fade-in 1s forwards 3s;
  background-image: linear-gradient(to bottom, #63c5a1, #116562);
  transition: all 1s ease-in-out;
  overflow: hidden;
}

.ownerOptionHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin-left: 5px;
  margin-right: 5px;
  height: 30px;
  width: 20%;
  padding-left: 10px;
  padding-right: 10px;
  transition: all 0.2s ease-in-out;
  border-radius: 15px;
  cursor: pointer;
}
.ownerOptionHolder:hover {
  scale: 1.1;
}

.projectOptionsIcon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: auto;
  cursor: pointer;
}

.ownerNotification {
  position: relative;
  display: flex;
  margin-left: 5px;
  font-size: 0.8rem;
}

.XbackToZero {
  transform: rotateX(0deg);
}

.clientProjectImageHolder {
  float: left;
  display: flex;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 1px 1px 10px 1px rgb(0 115 213 / 20%);
}

.clientProjectName {
  position: relative;
  float: left;
  display: block;
  margin-left: 10px;
  height: auto;
  width: auto;
  font-size: 0.8rem;
  overflow: hidden;
}

.POwnerImageHolder {
  float: left;
  display: flex;
  align-items: center;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  animation: PMBappearence 0.8s forwards;
}
.POwnerImageHolder:hover {
  scale: 1.2;
}

.POwnerImage {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.PONameHolder {
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.POtitle {
  display: block;
  width: auto;
  font-size: 0.9rem;
}

.POname {
  width: auto;
  font-size: 0.9rem;
}

.userButton {
  display: inline-block;
  padding-top: 5px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: small;
  line-height: 30px;
  border-radius: 15px;
}

.userButton img {
  opacity: 0.5;
  float: left;
  margin-left: -10px;
  margin-top: -5px;
  margin-right: 5px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}

.exampleArea {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
  padding-top: 15px;
  padding-bottom: 20px;
  height: auto;
  width: 100%;
}

.areaColumn {
  position: relative;
  border: none;
  margin-left: 1px;
  margin-right: 1px;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  transition: all 0.7s ease-in-out;
  background: none;
}

.aboutTheProjectArea {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  width: 100%;
  height: auto;
}

#creteNewTagHolder {
  position: relative;
  display: block;
  height: 25px;
  width: 25px;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.7s ease-in-out;
}

#creteNewTagHolder:hover { 
  width: 200px;
}

#echoCreateTags { /* span element */
  position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 200px;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
  border-radius: 25px;
}

#greenPlusTags { /* span element */
  position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 25px;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  background-color: #05a362;
  border-radius: 50%;
  z-index: 2;
}

.tagsHolder {
  display: block;
  overflow-y: hidden;
  height: 30px;
  width: auto;
  padding-left: 25px;
  padding-right: 20px;
  padding-bottom: 10px;
  font-size: 1rem;

}

#aboutProjectHolder {
  display: flex;
}

#addNewDescriptionHolder {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 25px;
  width: 25px;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  z-index: 3;
}
#addNewDescriptionHolder:hover { 
  width: 200px;
}

#echoAddDescription { /* span element */
  position: absolute;
  display: flex;
  top: 0px;
  left: 25px;
  height: 25px;
  width: 180px;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
  border-radius: 25px;
}

#greenPlusDescription { /* span element */
  position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 25px;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  background-color: #05a362;
  border-radius: 50%;
  z-index: 2;
}



/*
#presentationAboutProjectHolder {
  position: relative;
  display: flex;
}
*/

.visualizationContainer {
  width: 100%;
  height: auto;
  transition: all 0.5s;
}

.imageHolder {
  display: flex;
  justify-content: center;
  padding-top: 15px;
  height: 450px;
  width: 100%;
}

.mediaDescription {
  margin-top: 20px;
  height: 180px;
  width: auto;
  padding-top: 10px;
  padding-left: 25px;
  padding-right: 20px;
  padding-bottom: 10px;
  font-size: 0.9rem;
  overflow-y: auto;
}

.presentationMediaDescription {
  height: 150px;
  width: auto;
  padding-top: 10px;
  padding-left: 25px;
  padding-right: 20px;
  padding-bottom: 10px;
  font-size: 0.9rem;
  overflow-y: auto;
}

.fitIt {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
  transition: all 0.5s;
}

.coverImage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  overflow: hidden;
}

.containImage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  object-fit: contain;
  border-radius: 10px;
  overflow: hidden;
}

#postImageInput {
  position: relative;
  display: flex;
  max-height: 100%;
  max-width: 100%;
}

.echoSelectImageInImage {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
}

.prevNextHolder {
  display: flex;
  margin-top: 15px;
  align-items: center;
}

.privacyIcon {
  display: block;
  position: relative;
  float: left;
  margin-top: 3px;
  margin-left: 10px;
  height: 20px;
  width: 20px;
  object-fit: scale-down;
  transition: all 0.2s ease-in-out;
}

.privacyIcon:hover {
  scale: 1.5;
}

.echoTypeOfAbout {
  display: block;
  position: relative;
  float: left;
  text-align: left;
  margin-left: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 2px;
  width: fit-content;
  font-size: small;
}

.paginationCounter {
  display: flex;
  flex: 40%;
  justify-content: center;
  font-size: 1rem;
}

.previousButton {
  display: flex;
  flex: 30%;
  justify-content: right;
  font-size: 1.5rem;
  cursor: pointer;
}

.previousButton:hover {
  justify-content: right;
  animation: slideAnimationPrevButton 1s ease-in-out infinite; /* Apply the animation on hover */
}

.nextButton {
  display: flex;
  flex: 30%;
  justify-content: left;
  font-size: 1.5rem;
  cursor: pointer;
}

.nextButton:hover {
  justify-content: left;
  animation: slideAnimationRightButton 2s ease-in-out infinite; /* Apply the animation on hover */
}

.chip {
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  margin-right: 10px;
  padding-left: 15px;
  padding-right: 15px;
  height: 30px;
  width: auto;
  font-size: 0.9rem;
  border-radius: 25px;
  transition: all 0.3s;
}

.chip:hover {
  transform: scale(1.1);
}

.lightGrayFont {
  font-size: 1rem;
  color: gray;
}

.leaflet-container {
  width: 100%;
  height: 30%;
}

.splitAreaColumnFlex {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 30px;
}

.chartContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10%;
  width: 60%;
  height: 300px;
}

.purchasedChartContainer {
  position: relative;
  display: flex;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 71%;
  border-radius: 10px;
}

.purchasedItemsGrid {
  position: relative;
  display: grid;
  gap: 1px;
  align-items: end;
  margin-left: 5%;
  height: 100%;
  width: 90%;
  box-sizing: border-box;
  font-size: 0.8rem;
}

.gridItem {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  width: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border-radius: 50%;
  cursor: default;
}
.gridItem:hover {
  scale: 1.5;
}

.tooltip {
  visibility: hidden;
  width: 200px;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 3;
  bottom: 100%;
  left: 50%;
  margin-left: -200px;
  opacity: 0;
  transition: opacity 0.3s;
}

.gridItem:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

#showPurchasesButton {
  position: relative;
  margin-right: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: 'Exo', sans-serif;
  font-size: 0.8rem;
  border: none;
  outline: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

#showPurchasesButton:hover {
  letter-spacing: 2px;
}

#echoSmallNoticeBudget {
  position: absolute;
  top: 50%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 5px;
  margin-top: -37px;
  width: 100%;
  background-color: #f6f9fc;
  font-size: small;
  color: #8da9b7;
}

#echoSmallNoticeSteps {
  position: absolute;
  top: 100%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 5px;
  margin-top: -37px;
  width: 100%;
  background-color: #f6f9fc;
  font-size: small;
  color: #8da9b7;
}

.chartTitle {
  margin-left: 20px;
  font-size: 1.1rem;
  color: #a0bfcf;
}

.chartH {
  margin-top: 20px;
  padding-right: 20px;
  text-align: right;
  font-size: 1.1rem;
  color: #8da9b7;
}

#usedAmountHolder {
  display: block;
  margin-top: 20px;
  font-size: 0.9rem;
}

.totalAmountHolder {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 96%;
  justify-content: center;
  align-items: center;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.9rem;
  border-radius: 15px;
}

.progressIndicatorHolder {
  display: flex;
  flex-direction: row;
  flex: 70%;
  margin-left: 20px;
  justify-content: left;
  border-radius: 20px;
  overflow: hidden;
  transition: width 0.2s ease-in-out;
}

.stepsCompletedIndicator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  width: 0%;
  transition: width 0.7s ease-in-out;
}

.stepsUncompletedIndicator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  width: 100%;
  transition: width 0.7s ease-in-out;
}

.itemsBudgedUsedIndicator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  width: 0%;
  transition: width 0.7s ease-in-out;
}

.itemsBudgedRemainingIndicator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  width: 100%;
  transition: width 0.7s ease-in-out;
}

.showChartDetailButtonHolder {
  display: flex;
  flex-direction: row;
  margin-left: 2%;
  width: 20%;
  justify-content: center;
}

.showStepsDetailButton {
  display: flex;
  height: auto;
  width: 90%;
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: center;
  cursor: pointer;
  border-radius: 20px;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
}
.showStepsDetailButton:hover {
  letter-spacing: 1px;
}

.showBudgetDetailButton {
  display: flex;
  height: auto;
  width: 90%;
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: center;
  cursor: pointer;
  border-radius: 20px;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
}
.showBudgetDetailButton:hover {
  letter-spacing: 1px;
}

.stepsChartTitle {
  margin-left: 20px;
  font-size: 1.1rem;
}

.budgetChartTitle {
  margin-left: 20px;
  font-size: 1.1rem;
}

.chartStepsDetails {
  padding-right: 20px;
  font-size: 1rem;
}

.chartBudgetDetails {
  padding-right: 20px;
  font-size: 1rem;
}

.displayNone {
  display: none !important;
}

.hidden {
  visibility: hidden !important;
}

.chartsDatabox {
  position: absolute;
  top: 0px;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.plannerCardDetailHeader {
  display: flex;
  margin-left: 20px;
  margin-top: 15px;
}

.budgetDetailHeader {
  display: flex;
  margin-left: 20px;
  margin-top: 15px;
}

.stepsDetailTitleContainer {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: medium;
  font-weight: normal;
  flex: 80%;
  padding-top: 10px;
}

.budgetDetailTitleContainer {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: medium;
  font-weight: normal;
  flex: 80%;
  padding-top: 10px;
}

.showHiddenChartItems {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 20px;
  height: 40px;
  width: 180px;
  background-color: #f3f7f9;
  cursor: pointer;
  border-radius: 3px;
}

.smallText {
  position: relative;
  display: block;
  font-size: 0.8rem !important;
}

.backFromDetailsButtonContainer {
  display: flex;
  cursor: pointer;
  flex: 20%;
  justify-content: right;
  padding-right: 10px;
}

.locationInfoHolder {
  width: 100%;
}

#flagHolder {
  display: flex;
  margin-top: 20px;
  width: 100%;
  justify-content: center;
}

.shapeFlag {
  width: 100px;
  border-radius: 5px;
  opacity: 0.3;
}

#countryName {
  display: flex;
  margin-top: 15px;
  justify-content: center;
  font-size: 1.5rem;
  color: #7e8d8d;
}

#map {
  margin-top: 60px;
  min-width: 100%;
  height: 450px;
}

.joinLeaveInvite {
  display: flex;
  flex-direction: row;
}

.joinLeaveButtonHolder {
  display: flex;
  flex: 50%;
  margin-left: 10px;
}

.inviteHolder {
  display: flex;
  flex: 50%;
  justify-content: right;
}

.membersTitle {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 1.2rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.membersHolder {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

#membersPaginationHolder {
  display: flex;
  position: absolute;
  top: 750px;
  left: 0px;
  width: 100%;
  z-index: 9;
}

.singleMemberBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  transition: transform 0.3s;
  border-radius: 15px;
  animation: placeItIn 0.5s forwards;
}

@keyframes placeItIn {
  0% {
    margin-top: -20px;
    opacity: 0;
    scale: 0.7;
  }
  50% {
    margin-top: -20px;
    opacity: 1;
    scale: 0.7;
  }
  100% {
    margin-top: 0px;
    opacity: 1;
    scale: 1;
  }
}

.memberImageHolder {
  position: relative;
  display: flex;
  float: left;
  margin-top: 10px;
  height: 55px;
  width: 55px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s;
}

.memberImageHolder:hover {
  transform: scale(1.3);
}

.memberImage {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.notificationBorder {
  animation: animatedBorder 1s infinite ease-in;
}

.changingBorderColorAnimation {
  animation: changingBorderColor 1s infinite ease-in;
}


#calendarContent {
  display: flex;
  flex-direction: column;
  height: 720px;
  overflow-y: hidden;
  overflow-x: hidden;
}


@media (max-width: 768px) {

  #overAll {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 500%;
    width: 100%;
    background-image: linear-gradient(to bottom, #066c52, #043924);
    z-index: 999;
  }

  #mobileTitle {
    position: relative;
    top: 50px;
    left: 0px;
    height: auto;
    width: 100%;
    font-family: 'Exo', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    text-align: center;
  }

  #mobileNotification {
    position: relative;
    top: 150px;
    left: 0px;
    height: auto;
    width: 100%;
    font-family: 'Exo', sans-serif;
    font-size: 1rem;
    color: #ffffff;
    text-align: center;
  }
}

#dashboardFeedHeader {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 5%;
  width: 100%;
}

#scrollPostTOpButton {
  position: relative;
  display: block;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}
#scrollPostTOpButton:hover {
  scale: 1.2;
}

#newPostButton {
  position: relative;
  display: block;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  visibility: hidden;
}
#newPostButton:hover {
  transform: rotate3d(1, 1, 1, 9deg);
  scale: 1.2;
}

#workflowNewsHolder {
  position: absolute;
  top: 8%;
  left: 0px;
  display: flex;
  flex-direction: column;
  height: 92%;
  width: 100%;
  overflow-x: hidden;
  transition: all 0.7s ease-in-out;
  opacity: 0;
}

#memberPostsHolder {
  position: absolute;
  top: 8%;
  left: 0px;
  display: none;
  flex-direction: column;
  height: 92%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.7s ease-in-out;
  opacity: 0;
  background: none;
}

#postsHolder {
  position: absolute;
  top: 8%;
  left: 0px;
  display: none;
  flex-direction: column;
  height: 92%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.7s ease-in-out;
  opacity: 0;
  background: none;
}

#newPostForm {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 0px;
  width: 100%;
  transition: all 1s ease-in-out;
}

.singleWSNews {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  font-size: 0.9rem;
  text-wrap: nowrap;
  transition: all 0.2s ease-in-out;
}

.singlePostHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  padding-top: 15px;
  margin-bottom: 10px;
  font-size: 1rem;
  text-wrap: nowrap;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
  background: none;
}

.newsUserImageHolder {
  position: relative;
  display: flex;
  margin-left: 5px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  object-fit: contain;
}

.WSstepTypeicon {
  position: relative;
  display: flex;
  margin-left: 5px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  object-fit: contain;
}

.projectImageHolderInPost {
  position: relative;
  display: flex;
  margin-left: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.fitImageIntoDiv {
  position: relative;
  object-fit: cover;
  width: 50px;
  height: 50px;
}

.newsStepMarker {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  object-fit: contain;
}

.userImgInNews {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
}

.postProjectName {
  position: relative;
  padding-left: 15px;
  font-size: 1rem;
}

.postTitle {
  position: relative;
  padding-left: 15px;
  font-size: 0.9rem;
}

.iconImgInNews {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.workflowNewsDate {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 5px;
  margin-bottom: 1px;
  padding-left: 10px;
  padding-right: 10px;
  width: auto;
  font-size: 0.8rem;
  border-radius: 10px;
}

.workflowLineHolder {
  position: relative;
  display: flex;
  justify-content: end;
  width: 23px;
  height: 100%;
}

.workflowUpLine
{
  position: relative;
  display: block;
  width: 4px;
  height: 100%;
}

.newsBodyRightSide {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  padding-top: 15px;
  padding-left: 2%;
  width: 98%;
  height: auto;
  border-radius: 15px;
}

.textContentNews {
  display: flex;
  width: 100%;
  flex-direction: row;
  margin-bottom: 10px;
}
/* step notes */
.currentStepNotesHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 40px;
  transition: all 0.3s ease-in-out;
  border-top-left-radius: 15px;
  overflow: hidden;
}

.currentStepNotesContent {
  display: flex;
  height: auto;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 10px;
  font-size: 0.9rem;
  white-space: break-spaces;
}

/* step items */
.currentStepItemsHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 3px;
  width: 100%;
  height: 40px;
  transition: all 0.3s ease-in-out;
}

.openCSitemsHolder {
  position: relative;
  display: flex;
  width: 100%;
  font-size: 0.8rem;
}

.currentStepPrice {
  position: relative;
  width: 85%;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 10px;
  padding-bottom: 15px;
}

.openOnGoingStepItemsHolder {
  position: relative;
  display: flex;
  width: 12%;
  justify-content: center;
  align-items: center;
}

.workflowStepNameHolder {
  position: relative;
  display: flex;
}

.WFnewsUserHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-right: 10px;
  border-bottom-left-radius: 15px;
  overflow: hidden;
}

.WFnewsOptionsHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.WFnewsImageHolder {
  float: left;
  margin-left: 5px;
  height: 35px;
  width: 35px;
}

.WFimageContent {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

.WFnewsNameHolder {
  float: left;
  margin-left: 15px;
  font-size: 0.9rem;
}

.workflowContentArea {
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.postLeftSide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
}

.postImageHolder {
  position: relative;
  display: flex;
  width: 40%;
}

.postImage {
  display: block;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.postRightSide {
  position: relative;
  display: flex;
  width: 30%;
}

.postLinkButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  padding: 5px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  font-size: 1rem;
  transition: all 0.1s ease-in-out;
}
.postLinkButton:hover {
  scale: 1.2;
}

.postExternalLinkIcon {
  display: block;
  height: 24px;
  width: 24px;
  background-image: url("/images/siteUsage/externalLinkWhite.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.postToolIcon {
  display: block;
  margin-left: 15px;
  height: 30px;
  width: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}

.postItemsIcon {
  display: block;
  margin-top: 15px;
  margin-left: 20px;
  height: 30px;
  width: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}

.postStepCompleteIcon {
  display: block;
  margin-left: 15px;
  height: 30px;
  width: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}

.deletePostInitiator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  height: 25px;
  width: 25px;
  font-size: 0.9rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.confirmDeletePostButton {
  position: relative;
  display: flex;
  align-items: center;
  height: 25px;
  width: 0px;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 15px;
}

.acquiredItemImage {
  height: auto;
  margin-left: 25%;
  width: 50%;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
  overflow: hidden;
}

.workflowDetailContent
{
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  height: auto;
  overflow: auto;
}

.budgetDetailContent {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  height: auto;
  overflow: auto;
}

.budgetSingleArea {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
}

.workflowSingleArea {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
}

.singleBudgetBackground {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.singleToolMainBackground {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.BSAheader {
  position: relative;
  display: flex;
  width: 100%;
  padding-top: 15px;
  z-index: 2;
}

.budgetListTitle {
  position: relative;
  display: flex;
  width: 90%;
  font-size: 1rem;
  margin-left: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 2;
}

.lineTrough {
  text-decoration: line-through;
}

.budgetItemsBucket {
  position: relative;
  display: block;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
}

.BSAcontent {
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 160px; /* in order to fit 3 items horizontaly */
  height: 210px;
  font-size: 1rem;
  z-index: 2;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  overflow: hidden;
}
.BSAcontent:hover {
  scale: 1.05;
}
.BSAcontent.collapsed {
  height: 0px; /* Collapse height to 0 when collapsed class is applied */
}

.BSAItemscontent {
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 160px; /* in order to fit 3 items horizontaly */
  height: 230px;
  font-size: 1rem;
  z-index: 2;
  transition: all 0.5s ease-in-out;
  border-radius: 10px;
  overflow: hidden;
}
.BSAItemscontent:hover {
  scale: 1.05;
}
.BSAItemscontent.collapsed {
  height: 0px; /* Collapse height to 0 when collapsed class is applied */
}

.WSAcontent {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 15px;
  margin-bottom: 1px;
  font-size: medium;
  z-index: 2;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.budgetToolName {
  position: relative;
  display: flex;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 5px;
  width: 100%;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.budgetItemName {
  position: relative;
  display: flex;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 5px;
  width: 100%;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toolImageInItemsListHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1%;
  width: 98%;
  height: 150px;
  border-radius: 7px;
  overflow: hidden;
}

.transformZ10 {
  transform: rotateZ(10deg);
}

.stepToolImageHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15%;
  background-color: #ffffff;
}

.itemIconInCurrentStep {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.budgetItemNameInCurrentStep {
  position: relative;
  display: flex;
  margin-left: 20px;
  margin-right: 10px;
  width: 60%;
  font-size: 0.9rem;
  overflow: hidden;
}

.budgetItemPrice {
  position: relative;
  display: flex;
  font-size: 0.9rem;
}

.totalBudgetItemPrice {
  position: relative;
  display: flex;
  justify-content: right;
  margin-right: 20px;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  color: #333b40;
}

.CSbudgetItemPrice {
  position: relative;
  display: flex;
  font-size: 0.9rem;
}

.BSAtext {
  display: block;
  width: 350px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 20px;
}

.stepAssigneePhotoHolder {
  display: flex;
  position: relative;
  margin-left: 10px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  object-fit: cover;
  border-style: solid;
  border-width: 2px;
}

.stepAssigneeimage {
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.startStopButton {
  display: flex;
  align-items: center;
  width: auto;
  height: 35px;
  margin-left: 10px;
  border-radius: 25px;
  transition: all 0.3s ease-in-out;
}

.echoStartStop {
  position: relative;
  display: block;
  margin-left: 20px;
  font-size: 0.8rem;
  width: 70px;
  white-space: nowrap;
}

.startStopSimbolCircle {
  position: relative;
  display: flex;
  margin-left: 10px;
  margin-right: 5px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  justify-content: center;
  transition: all 1s ease-in-out;
}
.startStopSimbolCircleActive {
  border-color: #2bdb74;
}

.startStopSimbolCircleInactive {
  border-color: #acc2cb;
}

.startStopStateMark {
  position: relative;
  display: block;
  height: 11px;
  width: 4px;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

.startStopStateMarkActive {
  background-color: #2bdb74;
}

.startStopStateMarkInactive {
  background-color: #acc2cb;
}

.SSDateIcon {
  position: absolute;
  top: 0px;
  left: 20px;
  width: 30px;
  height: 27px;
  border: none;
  outline: none;
  background-image: url('/images/siteUsage/calendar.png');
  background-repeat: no-repeat;
  z-index: 1;
}

.WSnewsIcon {
  position: absolute;
  top: 0px;
  width: 30px;
  height: 27px;
  border: none;
  outline: none;
  background-image: url('/images/siteUsage/calendar.png');
  background-repeat: no-repeat;
  z-index: 1;
}

.SSfromToDateInput {
  position: absolute;
  top: 0px;
  left: 20px;
  width: 150px;
  height: 27px;
  border: none !important;
  outline: none !important;
  background: none !important;
  z-index: 2;
  opacity: 0;
}

.SWnewsFromToDateInput {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 27px;
  border: none;
  outline: none;
  background: none;
  z-index: 2;
  opacity: 0;
}

.SSechoFromAndTo {
  position: absolute;
  top: 5px;
  left: 50px;
  width: 60px;
  height: auto;
  font-size: 0.8rem;
  transition: all 0.7s ease-in-out;
}

.SSnewsechoFromAndTo {
  position: absolute;
  top: 5px;
  left: 30px;
  width: 60px;
  height: auto;
  font-size: 0.8rem;
  transition: all 0.7s ease-in-out;
}

.SSuserFriendlyDates {
  position: absolute;
  top: 5px;
  left: 120px;
  font-size: 0.8rem;
  height: auto;
  width: 150px;
}

.SSnewsUserFriendlyDates {
  position: absolute;
  top: 5px;
  left: 90px;
  font-size: 0.8rem;
  height: auto;
  width: 130px;
}

.completeWStepButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1%;
  width: 98%;
  height: 100%;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  letter-spacing: 1px;
}

.completeWStepButton:hover {
  letter-spacing: 2px;
}

.completeWStepActiveButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1%;
  width: 98%;
  height: 100%;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  letter-spacing: 1px;
}

.completeWStepActiveButton:hover {
  letter-spacing: 2px;
}

.ytVideoLink {
  position: relative;
  display: flex;
  padding-top: 5px;
  padding-left: 10px;
  width: 70%;
  font-family: 'Exo', sans-serif;
  font-size: 0.8rem;
  border: none;
  outline: none;
  background: none;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.doItComplete {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1%;
  width: 30%;
  height: 100%;
  font-size: 0.8rem;
  letter-spacing: 2px;
  transition: all 0.3s ease-in-out;
  border-radius: 20px;
}
.doItComplete:hover {
  letter-spacing: 3px;
}

.supplierNameLink {
  position: relative;
  display: flex;
  margin-top: 10px;
  margin-left: 20px;
  width: 70%;
  font-size: 0.8rem;
  color: #313537;
}
.supplierNameLink:link {
  text-decoration: underline;
}
.supplierNameLink:link:hover {
  text-decoration: underline;
  color: #2a63ff;
}
.supplierNameLink :visited {
  text-decoration: none;
  color: #2a63ff;
}

.BSAprice {
  flex: 10%;
}

.WFSbuttonHolder {
  flex: 10%;
}

.echoStepNameOnItem {
  position: relative;
  display: flex;
  margin-left: 7px;
  align-items: center;
  width: 90%;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.markAcquiredButton {
  position: relative;
  display: block;
  margin-top: 5px;
  height: 40px;
  width: 95%;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

.echoMarkAcquired {
  position: relative;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  text-align: right;
  height: 100%;
  width: 70%;
  transition: all 0.3s ease-in-out;
}
.echoMarkAcquired:hover {
  letter-spacing: 1px;
}

.acquireItemPhotoNotice {
  margin-left: 20px;
  font-size: 0.9rem;
  color: #8a9496;
}

.acquiredOkHolder {
  position: relative;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 30%;
}

.okCheckmark {
  position: relative;
  display: block;
  margin-left: 5px;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.4s ease-in-out;
}

.toolItemLinkHolder {
  position: relative;
  display: flex;
  margin-left: 10px;
  margin-top: 5px;
  height: 30px;
}

.okImg {
  position: relative;
  display: block;
  height: 24px;
  width: 24px;
}

.selectBudgetItemImage {
  position: relative;
  margin-top: 20px;
  height: 70px;
  width: 100%;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
}

#budgetItemImageInput{
  position: relative;
  height: 70px;
  max-width: 110px;
}

.renterImageHolder {
  position: relative;
  display: block;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.renterImageContent {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.renterName {
  position: relative;
  display: flex;
  margin-top: 10px;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  overflow: hidden;
}

.listStepMarker {
  margin-left: 14px;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
}

.BSAFooter {
  position: relative;
  display: flex;
  flex-direction: row;
  font-size: 1rem;
}

.crossedText {
  text-decoration: line-through;
}

.mapa {
  position: absolute;
  top: 100px;
  right: 0px;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #030805;
  opacity: 0.5;
  z-index: 998;
}

.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5); /* Initial scale set to 0 */
  background: none;
  animation: zoomIn 0.3s ease-out forwards; /* Add zoom-in animation */
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999;
}

@keyframes zoomIn {
  from {
    transform: translate(-50%, -50%) scale(0.5);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

.inactive {
  animation: zoomOut 0.2s ease-out forwards;
}

@keyframes zoomOut {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
}

@keyframes mildBackUpAndComeBack {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#modalContent {
  position:absolute;
  width: 100%;
  height: 99%;
  background:none;
  z-index: 2;
}

.iframeHolder {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
}

.sectionDiv {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.sectionTitle {
  position: relative;
  display: flex;
  width: 100%;
  font-size: 2rem;
  letter-spacing: 2px;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
}

.iframeTitle {
  position: relative;
  display: flex;
  width: 100%;
  font-size: 2rem;
  letter-spacing: 2px;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
}

.sectionContent {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.closeModalButton {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 5px;
  right: 5px;
  z-index: 99;
  height: 40px;
  width: 40px;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  user-select: none;
}
.closeModalButton:hover {
  transform: rotateZ(180deg);
}

.presentationTagsContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 30%;
  justify-content: center;
  transform: scale(0.7) rotateX(-9deg) rotateY(-20deg);
  transition: all 0.3s ease-in-out;
  opacity: 0;
}

.fullHeightImageHolder {
  position: relative;
  display: block;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.universalImageClass {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  border-radius: 10px;
}

.presentationTitleContainer {
  display: flex;
  flex: 30%;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
  transform: scale(0.8) rotateX(-10deg) rotateY(-20deg);
  transition: all 0.2s ease-in-out;
  opacity: 0;
}

.POContainer {
  display: flex;
  align-items: center;
  justify-content: left;
  flex: 30%;
  transform: scale(0.8) rotateX(-10deg) rotateY(-20deg); 
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.presentationOwnerImageHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  margin-left: 15px;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s; /* Add a smooth transition effect */
}

.presentationOwnerImageHolder:hover {
  transform: scale(1.5); /* Scale the div by 1.2 times when hovering */
}

.presentationOwnerImage {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

.presentationOwnerName {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: auto;
}

.presentOtitle {
  display: block;
  position: relative;
  font-size: 1rem;
}

.presentOname {
  display: block;
  position: relative;
  margin-top: 10px;
  font-size: 1rem;
}

.presentationPhotosHolder {
  display: block;
  width: 33%;
  height: 100%;
  transform: scale(0.7) rotateX(20deg) rotateY(20deg);
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
  opacity: 0;
}

.presentationIdeaHolder {
  display: flex;
  width: 33%;
  margin-left: 0.5%;
  height: 100%;
  flex-direction: column;
  transform: scale(0.7) rotateX(-20deg) rotateY(-20deg);
  transition: all 0.4s ease-in-out;
  opacity: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /*border-radius: 10px;*/
}

.presentationRequestHolder {
  display: flex;
  flex-direction: column;
  width: 33%;
  margin-left: 0.5%;
  height: 100%;
  transform: scale(0.7) rotateX(20deg) rotateY(40deg);
  transition: all 0.2s ease-in-out;
  opacity: 0;
  border-radius: 10px;
}

.presentationPrevNextHolder {
  position: absolute;
  bottom: 10px;
  display: flex;
  width: 100%;
  z-index: 3;
}

.presentationBasicIdeaTitle {
  display: block;
  position: relative;
  margin-top: 10px;
  width: 95%;
  height: auto;
  margin-left: 5%;
  font-size: 1.2rem;
}

.presentationBasicIdeaContent {
  display: block;
  position: relative;
  margin-top: 20px;
  width: 94%;
  height: auto;
  padding-left: 4%;
  padding-right: 2%;
  font-size: 0.9rem;
}

#presentationPostsContent {
  display: block;
  position: relative;
  margin-top: 20px;
  width: 94%;
  height: auto;
  padding-left: 4%;
  padding-right: 2%;
  font-size: 1rem;
}

.presentImageHolder {
  display: flex;
  justify-content: center;
  padding-top: 15px;
  height: 470px;
  width: 100%;
}

.requestHalfHolderPart {
  position: relative;
  display: block;
  margin-left: 2%;
  width: 96%;
  height: 50%;
}

.requestMessageTextArea {
  display: block;
  position: relative;
  margin-top: 2%;
  height: 68%;
  width: 96%;
  padding: 2%;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  border: none;
  outline: none;
  border-radius: 10px;
}

.roleDescriptionText {
  display: block;
  position: absolute;
  top: 0px;
  left: 10px;
  height: 340px;
  width: 540px;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  outline: none;
  overflow-y: auto;
  transform: rotateY(90deg) rotateX(-10deg) scale(0.8);
}

#POSmallImageOnRequests {
  position: absolute;
  top: 20px;
  left: 0px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

#echoMessageFromPO {
  position: absolute;
  top: 25px;
  left: 50px;
  font-size: 0.9rem;
}

#mapMessageFromPO {
  position: absolute;
  top: 60px;
  left: 50px;
  height: auto;
  width: 85%;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* in edit map presence */
#mapMessageTextArea {
  display: block;
  position: relative;
  top: 50px;
  height: 150px;
  width: auto;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  margin-left: 20px;
  padding-left: 10px;
  padding-top: 15px;
  padding-right: 10px;
  padding-bottom: 5px;
  border: none;
  outline: none;
  border-radius: 5px;
}

#saveMapMessageButton {
  position: relative;
  display: flex;
  margin-left: 20px;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 150px;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  border: none;
  outline: none;
  z-index: 2;
}

#saveMapMessageButton:hover {
  scale: 1.1;
}

.AStext {
  display: flex;
  align-items: center;
  position: relative;
  float: left;
  margin-left: 20px;
  margin-right: 20px;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
}

.noBorders {
  border: none;
  outline: none;
  appearance: none;
  background: none;
}

select {
  border: none;
  outline: none; /* Removes focus border */
  appearance: none; /* Removes default dropdown styling */
  background: none;
}

.presentationButtons {
  position: relative;
  display: flex;
  height: auto;
  margin-right: 15px;
  width: fit-content;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.presentationActiveButtons {
  cursor: default !important;
}

#presentationSelectionContent {
  position: relative;
  display: flex;
  margin-top: 10px;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#echoMessageOwner {
  transition: all 0.3s ease-in-out;
}

.cursorDefault {
  cursor: default !important;
}

.cursorPointer {
  cursor: pointer !important;
}

.cursorAlias {
  cursor: alias !important;
}

.cursorGrab {
  cursor: grab !important;
}

.cursorMove {
  cursor: move !important;
}

.activeGreenLetters {
  color: #209f3b !important;
}

.errorRedLetters {
  color: #ed2121 !important;
}

.warningOrangeLetters {
  color: #f7ae4f !important;
}


.blueFont {
  color: #1ac7eb !important;
}

.grassGreenFont {
  color: #74bc00;
}

.mangetaFont {
  color: #eb1a63 !important;
}

.cyanFont {
  color: #2592a5 !important;
}

#presentMessageButton {
  position: relative;
  display: flex;
  margin-top: 3px;
  height: 50px;
  width: 180px;
  cursor: pointer;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #5c6d6d;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: #f1f5f8;
}

.twentyPercentFlex {
  display: flex;
  flex: 20%;
}

.sixtyPercentFlex {
  display: flex;
  flex: 60%;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.editLinkImageHolder {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.editMapImageHolder {
  display: flex;
  margin-left: 20px;
  height: 100%;
  width: 100%;
  justify-content: left;
  align-items: center;
}

.smallMapImage {
  height: 80px;
  width: auto;
}

.editOptionsTitleHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  top: 0px;
  left: 0px;
  display: flex;
  height: 10%;
  width: 100%;
  margin-bottom: 1px;
  overflow: hidden;
  transform: scale(0.7) rotateX(-9deg) rotateY(-30deg); /* Initial scale and rotation values */
  transition: all 0.4s ease-in-out;
}

.workAreaListHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  top: 0px;
  left: 0px;
  display: flex;
  height: 10%;
  width: 100%;
  margin-bottom: 1px;
  overflow: hidden;
  transform: scale(0.7) rotateX(-9deg) rotateY(-30deg); /* Initial scale and rotation values */
  transition: all 0.4s ease-in-out;
  box-shadow: 1px 1px 15px 1px rgb(0 0 0 / 10%);
}

.editBodyHolder {
  position: relative;
  display: flex;
  height: 90%;
  width: 100%;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.editBodyHalfSide {
  display: flex;
  flex-direction: column;
  margin-left: 1px;
  margin-right: 1px;
  width: 100%;
  height: 100%;
  transform: scale(0.7) rotateX(-30deg) rotateY(-90deg); /* Initial scale and rotation values */
  transition: all 0.5s ease-in-out;
  border-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.plannerEditBodyHolder {
  position: relative;
  display: flex;
  margin-top: 1%;
  height: 99%;
  width: 100%;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.editPlannerBodyHalfSide {
  display: flex;
  flex-direction: column;
  margin-left: 2%;
  margin-right: 2%;
  width: 46%;
  height: 100%;
  transform: scale(0.7) rotateX(-30deg) rotateY(-90deg); /* Initial scale and rotation values */
  transition: all 0.5s ease-in-out;
  border-radius: 10px;
}

.plannerListsButton {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 15px;
  padding-left: 10px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.9rem;
  border-radius: 25px;
  cursor: pointer;
}

.activeItemsButton {
  cursor: default !important;
}

.buttonDirectionSign {
  position: relative;
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  transition: all 0.5s ease-in-out;
}

.echoShowProjectContentDiv {
  margin-left: 15px;
}

.publicLinkTextDiv {
  display: block;
  margin-top: 10px;
  margin-left: 20px;
}

.rolesListHolder {
  display: block;
  position: relative;
  margin-top: 20px;
  height: 300px;
  width: 100%;
  background: none;
  overflow-y: auto;
  transition: all 0.5s ease-in-out;
}

.singleRoleHolder {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.singleRoleSpan {
  display: flex;
  flex: 70%;
  position: relative;
  font-size: 1rem;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 10px;
  cursor: pointer;
}

.deleteRoleHolder {
  display: flex;
  flex: 30%;
  justify-content: right;
  align-items: center;
}

.deleteRoleButton {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
  border: none;
  outline: none;
}

.deleteRoleButton:hover {
  letter-spacing: 1px;
}

.roleDescriptionHolder {
  display: flex;
  transition: height 0.3s ease;
  overflow: hidden;
  height: 0px;
}

.roleDescriptionSpan {
  display: flex;
  flex: 100%;
  padding-top: 5px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 10px;
  font-size: 0.9rem;
  margin-bottom: 10px;
  height: fit-content;
}

.heightAuto {
  height: 150px;
}

.heightZero {
  height: 0px;
}

.newRoleInput {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 40px;
  height: auto;
  width: 96%;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  font-family: 'Exo', sans-serif;
  font-size: 1.1rem;
  border: none;
  outline: none;
}

.roleDescriptionInputTextArea {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 120px;
  width: 96%;
  padding-top: 20px;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  border: none;
  outline: none;
}

#addRoleButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
  margin-top: 5px;
  height: 45px;
  width: 150px;
  font-size: 1rem;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

#addRoleButton:hover {
  letter-spacing: 1px;
}

.headerFontSize {
  font-size: 1.2rem;
}

.normalFontSize {
  font-size: 0.9rem;
}

.bigFontSize {
  font-size: 1.1rem;
}

.linkImage {
  position: absolute;
  bottom: 20px;
  margin-left: 20px;
  height: 290px;
  width: 300px;
  opacity: 0.1;
}

.imageImage {
  position: absolute;
  bottom: 20px;
  margin-left: 20px;
  height: 290px;
  opacity: 0.1;
}

.descImageIcon {
  object-fit: cover;
  top: 5%;
  left: 10px;
  display: flex;
  height: 90%;
  width: auto;
}

.qWatermark
{
  position: absolute;
  bottom: 20px;
  margin-left: 20px;
  font-size: 8rem;
}

.invitationLink {
  display: block;
  margin-top: 30px;
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  height: 20px;
  width: 96%;
  font-size: 0.9rem;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  white-space: nowrap;
}

.copyToClipboardHolder {
  display: flex;
  flex-direction: row;
  margin-top: 40px;
  margin-left: 40px;
  width: auto;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.copyTCIcon {
  display: block;
  object-fit: cover;
  max-height: 30px;
  max-width: 30px;
}

.mapSavingGif {
  display: block;
  object-fit: cover;
  height: auto;
  max-width: 160px;
}

.copyToCBText {
  margin-left: 15px;
  margin-top: 3px;
}

.echoSavingMap {
  margin-left: 150px;
  margin-top: 3px;
  font-size: 0.9rem;
  color: #7e8d8d;
}

/* on-off slider button */
.onOffSwitch {
  display: flex;
  height: 25px;
  width: 100px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.blueBackground {
  background-color: #067eef;
}

#tempRequestLoginButton {
  transition: all 0.7s;
}

#tempMessageLoginButton {
  transition: all 0.5s;
}

#savingMapAnimationHolder {
  display: flex;
}

.editMapHolder {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

#flagOnSaveingMapHolder {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 2;
  border-radius: 25px;
  /*transition: all 0.2s ease-in-out;*/
  animation: zoomOutMapCountryFlag 2s ease-out forwards;
}

@keyframes zoomOutMapCountryFlag {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0) ;
    opacity: 0;
  }
}

#countryNameOnPopup {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
  font-size: 2rem;
}

#countryFlagOnPopup {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}



/* end on off button elements */

.spin360 {
  animation: spin 2s linear infinite;
}

.animateShaking {
  animation: animateShakingAnimation 0.5s infinite;
}


.singleQuestionFooter {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.footerLeftSide {
  display: flex;
  flex: 50%;
  justify-content: left;
}

.footerRightSide {
  display: flex;
  flex: 50%;
  justify-content: right;
}


.popDownAnim {
  animation: popDownElement 1s forwards;
}

.popUpAnim {
  animation: popUpElement 0.3s ease-in-out none;
}

.tossAway {
  animation: throwAway 0.5s forwards;
}

.bringIn {
  animation: bringInto 1s forwards;
}

.echoTotal {
  transition: all 0.5s ease-in-out;
}

.charCountDisplay {
  position: relative;
  display: flex;
  margin-top: 5px;
  margin-left: 25px;
  width: auto;
  font-family: 'Exo', sans-serif;
  font-size: 0.8rem;
}

.onHoverLink:hover {
  cursor: pointer;
  scale: 1.1;
  transform: translateX(15px);
}

#editRequestHolder {
  overflow-y: auto;
}

.descriptionTextArea {
  display: block;
  margin-top: 40px;
  height: 570px;
  width: auto;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  margin-left: 20px;
  padding-left: 10px;
  padding-top: 15px;
  padding-right: 10px;
  padding-bottom: 5px;
  border: none;
  outline: none;
}

.singleRequestHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 10px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.singleRequestUserHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  height: auto;
  width: 100%;
  background: none;
}

.requestUserImageHolder {
  display: flex;
  position: relative;
  height: auto;
  width: 45%;
  margin-right: 5%;
  border-radius: 5px;
  overflow: hidden;
}

.joinRequestImage {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.joinRequestUserName {
  display: flex;
  position: relative;
  width: 100%;
  margin-top: 20px;
  font-family: 'Exo', sans-serif;
  font-size: 1.1rem;
  text-align: center;
}

.requestMessage {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-right: 10px;
  font-size: 1rem;
}

.joinRequestFooter {
  display: flex;
  flex-direction: row;
  position: relative;
  margin-left: 3%;
  width: 65%;
  height: 60px;
}

.requestFooterLeftPart {
  display: flex;
  position: relative;
  flex: 50%;
  justify-content: left;
}

.requestFooterRightPart {
  display: flex;
  position: relative;
  flex: 50%;
  justify-content: right;
}

.rejectRequestButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  height: 15px;
  width: 100px;
  margin-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.8rem;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

.rejectRequestButton:hover {
  letter-spacing: 1px;
}

.acceptRequestButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 45px;
  width: 150px;
  font-size: 1rem;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

.acceptRequestButton:hover {
  letter-spacing: 1px;
}

#noRequestsSpan {
  display: block;
  position: relative;
  margin-top: 50px;
  height: auto;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  color: #bac3c5;
}

#noMessagesSpan {
  display: block;
  position: relative;
  margin-top: 10px;
  height: auto;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
}

.membershipHolder {
  position: relative;
  display: flex;
  flex-direction: row;
}

.membershipImageHolder {
  position: relative;
  display: block;
  flex: 50%;
  float: left;
  margin-right: 20px;
  object-fit: cover;
}

.membershipImage {
  max-height: 100%;
  max-width: 100%;
  border-radius: 5px;
  overflow: hidden;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.1));
}

.membershipContent {
  display: flex;
  flex-direction: column;
  flex: 50%;
}

.membershipName {
  display: flex;
  margin-top: 20px;
  justify-content: center;
  font-size: 2rem;
}

.membershipRole {
  display: flex;
  margin-top: 20px;
  justify-content: center;
  font-size: 1.5rem;
  color: #75828d;
}

.membershipJoinment {
  display: flex;
  margin-top: 40px;
  justify-content: center;
  font-size: 1rem;
  color: #75828d;
}

.kickOutArea {
  position: relative;
  display: flex;
  top: 50px;
  width: auto;
  height: 250px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.exitSign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  left: 0px;
  height: 22px;
  width: 100px;
  font-size: 1rem;
  font-weight: bold;
  color: #ffffff;
}

.exitDoor {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 22px;
  left: 0px;
  height: 150px;
  width: 100px;
}

#memberToExit {
  position: absolute;
  top: 50px;
  right: 20px;
  z-index: 2;
  height: 100px;
  width: 70px;
  cursor: move;
  overflow: hidden; /* Ensure the image is clipped to the dimensions of the container */
  transition: opacity 0.8s ease-in-out;
}

#memberImageToExit {
  width: 100%; /* Fill the entire width of the container */
  height: 100%; /* Fill the entire height of the container */
  object-fit: contain;
}

.kickOutButtonHolder {
  position: relative;
  display: flex;
  height: 40px;
  margin-top: 35px;
  justify-content: center;
}

.kickOutButton {
  position: absolute;
  bottom: 10px;
  display: flex;
  height: 40px;
  width: 130px;
  font-size: 0.9rem;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  transition: all 0.7s ease-out;
}

.kickOutButton:hover {
  scale: 1.1;
}

.editMessagesHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 84%;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.9s ease-in-out;
}

.singleMessageHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 10px;
  transition: all 0.5s ease-in-out;
}

.singleMessageUserHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 60px;
}

.messageImageHolder {
  position: relative;
  display: flex;
  height: 40px;
  width: 40px;
  margin-top: 10px;
  margin-right: 20px;
  margin-left: 15px;
  transition: all 0.5s ease-in-out;
  border-radius: 50%;
  overflow: hidden;
}

.messageUsernameData {
  position: relative;
  display: flex;
  flex-direction: column;
}

.messageUserName {
  position: relative;
  display: flex;
  margin-top: 20px;
  font-family: 'Exo', sans-serif;
  font-size: 1.1rem;
}

.messageDate {
  position: relative;
  display: flex;
  font-family: 'Exo', sans-serif;
  font-size: 0.8rem;
}

.messageContent {
  display: block;
  position: relative;
  float: left;
  margin-left: 3%;
  width: 95%;
  height: auto;
  margin-top: 20px;
  padding-right: 10px;
  font-size: 0.9rem;
}

.deleteMemberMessageButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  height: 15px;
  width: auto;
  margin-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.8rem;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

.reactToMessageButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  height: auto;
  width: auto;
  margin-right: 10px;
  padding: 5px;
  font-size: 1.5rem;
  border-radius: 15px;
  opacity: 0.5;
}

.writeMessagesHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-top: 1%;
  height: 15%;
  transition: all 0.9s ease-in-out;
}

.messageMemberTextArea {
  position: relative;
  display: flex;
  height: 90%;
  width: 100%;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  padding-top: 7px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  border: none;
  outline: none;
  overflow-y: auto;
}

.sendMessageToMember {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-left: 25px;
  height: 25px;
  width: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8rem;
  color: #ffffff;
  background-color: #569af9;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

.sendMessageToOwner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.8rem;
  color: #ffffff;
  background-color: #569af9;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

.sendMessageToOwner:hover {
  background-color: #58acff;
}

.editRightSideHalf {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 50%;
  width: 100%;
  border-radius: 10px;
  transition: all 0.5s ease-in-out;
}

.savedTagesHolder {
  position: relative;
  display: block;
  top: 10%;
  left: 10%;
  margin-right: 50px;
  height: 80%;
  width: 80%;
  transition: all 0.7s ease-in-out;
}

.singleTagUnmarked {
  display: block;
  height: auto;
  width: auto;
  margin-left: 15px;
  margin-bottom: 15px;
  float: left;
  font-size: 0.9rem;
  letter-spacing: 1px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  transform: scale(0);
}

.flexRowDiv {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 10px;
}

.flexRowDivJustifyLeft {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: start;
  align-items: center;
}

.flexRowDivJustifyRight {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: end;
}

.flexRowDivJustifyCenter {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}


#imageInput{
  position: relative;
  margin-top: 10px;
  height: 240px;
  width: auto;
}

.grayBackground {
  background-color: #cfdde2;
}

.redBackground {
  background-color: #e62323;
}

.lightGrayBackground {
  background-color: #f1f5f8;
}

.greenBackground {
  background-color: #32bea4;
}



.uploadAnimation {
  animation: uploadAnimationKeyframes 2s ease-out infinite;
}

.breathingEffect {
  animation: breathingKeyframes 1s ease-in-out infinite;
}

.customPartProjectNoticeEffect {
  animation: customPartProjectNoticeAnimation 3s ease-in-out infinite;
}

.slowSpinningClockwise {
  animation: animationSpinningClockwise 4s linear infinite;
}

@keyframes animationSpinningClockwise {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

/* on 50% holds */
.fadingOutEffect {
  animation: fadingKeyframes 2s ease-in-out infinite;
}

.fadingOutInSecond {
  animation: fadingKeyframes 1s ease-in-out forwards;
}

/* linear, no holding */
.fadingEffect {
  animation: fadingLinearKeyframes 2s ease-in-out infinite;
}

.previewPlaying {
  animation: fadingLinearKeyframes 2s ease-in-out infinite;
}

.selectCoverPhoto {
  display: flex;
  margin-left: 20px;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: auto;
  border: none;
  outline: none;
}

.coverPhotoOffSwitch {
  display: flex;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 150px;
  border-radius: 5px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
}

.darkFont {
  color: #2f4451;
}

.whiteFont {
  color:#ffffff
}

#togglePLannerHeaderButton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: auto;
  width: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border-radius: 25px;
  z-index: 3;
}

.echoProjectAreas {
  position: relative;
  display: block;
  font-size: 1rem;
}

#headerDirectionSign {
  position: relative;
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  transform: rotateZ(90deg);
  transition: all 0.5s ease-in-out;
}

.editWFbuttonHolder {
  position: relative;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.editWFbutton {
  display: flex;
  flex-direction: row;
  height: 40px;
  width: 100%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
  z-index: 2;
}

.echoPlanner {
  display: flex;
  height: 34px;
  font-size: 1.2rem;
  color: #009edd;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.EWFVtwentyPercentFlex {
  position: relative;
  display: flex;
  flex: 1; /* This allows each item to grow and take up equal space */
  width: 14.2%; /* Set a maximum width for each item */
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  /*animation: rotateAroundYZaxis 0.20s ease-in-out forwards;*/
}

.plusNewArea {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  width: 100%;
  font-size: 3rem;
  font-weight: bold;
  color: #24a157;
}

.echoNewArea {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 1.5rem;
  color: #ffffff;
}

#goLiveButtonHolder {
  display: flex;
  width: 100%;
  height: auto;
}

.goLivebutton {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 30px;
  width: 50%;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 2;
}

#echoGoLive {
  position: relative;
  margin-left: 15px;
  font-size: 0.9rem;
  transition: all 0.2s ease-in-out;
}

#goLiveLense {
  position: relative;
  margin-left: 30px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #1b2d49;
}

#lenseFlare {
  position: relative;
  margin-top: 5px;
  margin-left: 12px;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background-color: #a3ceef;
  transition: all 0.2s ease-in-out;
}

.areaContent {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.areaHiddenContent {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.delWarningText { /* span */
  position: relative;
  display: flex;
  width: 80%;
  margin-top: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: #030805;
  background-color: #ffffff;
  border-radius: 10px;
}

.delCancelButtonsHolder {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;
}

.deletePAButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 40px;
  width: 25%;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #ffffff;
  font-size: 0.8rem;
  font-weight: bold;
  color: #cb0101;
  border-radius: 25px;
  transition: all 0.5s ease-in-out;
}
.deletePAButton:hover {
  background-color: #b50b0b;
  color: #ffffff;
}

.cancelDeletePAButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 40px;
  width: 25%;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #ffffff;
  font-size: 0.8rem;
  font-weight: bold;
  color: #0177cb;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
}
.cancelDeletePAButton:hover {
  background-color: #0569d3;
  color: #ffffff;
}

.PAnameInput {
  position: relative;
  display: flex;
  padding-left: 5%;
  padding-right: 5%;
  width: 90%;
  height: 30px;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  text-align: center;
  border: none;
  outline: none;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  color: #526373;
  background-color: #f6f8f9;
}
.PAnameInput::placeholder {
  color: #899fb3;
}

.EPAnewRow {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.firstShowPAselectionButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  height: 40px;
  width: 250px;
  font-size: 1rem;
  border-radius: 40px;
  background-color: #3184e5;
  color: #ffffff;
  cursor: pointer;
}

.colorPickerHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  margin-right: 10px;
  height: 50px;
  width: 50px;
  outline: none;
  overflow: hidden;
  background-image: url('/images/siteUsage/color.png');
}

.colorPicker {
  position: relative;
  display: flex;
  height: 50px;
  width: 50px;
  outline: none;
  cursor: pointer;
  opacity: 0;
}

.savePAchangesButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8rem;
  border-radius: 25px;
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
  color: #043b6b;
}
.savePAchangesButton:hover {
  background-color: #475359;
  color: #ffffff;
}

.deletePAbuttonHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  height: 40px;
  width: 40px;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 50%;
}

.deletePAbutton {
  position: relative;
  display: flex;
  height: 24px;
  width: 24px;
}

.WFstepsTittle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35%;
  height: 30px;
  font-size: 1rem;
  border-radius: 15px;
}

.newWFStepButtonsHolder {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  margin-left: 10%;
  height: auto;
  width: 65%;
  padding-top: 8px;
  padding-bottom: 8px;
  align-items: center;
  border-radius: 25px;
}

.newWorkflowStepButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: #ffffff;
  height: 25px;
  width: 25px;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

.newWorkflowStepButton:hover {
  transform: scale(1.05);
}

.workflowStepsHolder {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

#projectManager {
  transition: all 0.5s ease-in-out;
}

.areaProjectAidCircle {
  background-color: #c3cccf;
  color: #ffffff;
  z-index: 6 !important;
}

#areaOneAidCircle {
  background-color: #95bf27;
  color: #ffffff;
}

#areaTwoAidCircle {
  background-color: #1682d9;
  color: #ffffff;
}

#areaThreeAidCircle {
  background-color: #9464f5;
  color: #ffffff;
}

#areaFourAidCircle {
  background-color: #d3940d;
  color: #ffffff;
}

#areaFiveAidCircle {
  background-color: #10b36d;
  color: #ffffff;
}

#workAreasSelection {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

#closeSelectAreas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 25px;
  float: left;
  margin-left: 20px;
  z-index: 99;
  height: 40px;
  width: 40px;
  font-size: 20px;
  border-radius: 50%;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
#closeSelectAreas:hover {
  transform: rotateZ(90deg);
}

#workAreasField {
  position: relative;
  display: block;
  float: left;
  margin-top: 25px;
  padding-top: 2%;
  margin-left: 20%;
  height: 85%;
  width: 60%;
  overflow-y: scroll;
}

.WAcategoryHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  float: left;
  margin-left: 50px;
  margin-bottom: 30px;
  height: 300px;
  width: 200px;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  animation: rotateAroundYZaxis 0.20s ease-in-out forwards;
  cursor: pointer;
  overflow: hidden;
}
.WAcategoryHolder:hover {
  scale: 1.05;
}

.WACnameHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  width: 100%;
  height: fit-content;
  overflow: hidden;
  font-size: 1rem;
  font-weight: bold;
}

.WACiconHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 70px;
  width: 100%;
}

.WACiconImage {
  position: relative;
  display: block;
  height: 70px;
  width: 70px;
}

.WACdescription {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  height: auto;
  margin-left: 5%;
  width: 90%;
  font-size: 0.9rem;
}

.cornerTriangle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 0px 50px 50px; /* Adjust the size of the triangle */
}

#startingNoticeHolder {
  position: relative;
  display: flex;
  height: 100%;
  font-size: 1rem;
  border-radius: 10px;
  letter-spacing: 2px;
  transition: all 0.3s ease-in-out;
}

.WSstartingNotice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  height: auto;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 10px;
  white-space: nowrap;
  font-size: 1rem;
  letter-spacing: 1px;
  animation: expandSpacing 1s ease-in-out forwards;
}

@keyframes expandSpacing {
  from {
    letter-spacing: 1px;
  }
  to {
    letter-spacing: 2px;
  }
}

.simpleBlockFullWHdiv {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}

.projectAreaCircleAid {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 250px;
  left: 0px;
  margin-left: 50%;
  margin-right: 50%;
  transform: translate(-50%, -50%);
  height: 150px;
  width: 150px;
  border-radius: 50%;
  font-size: 1rem;
  transition: all 0.5s ease-in-out;
}

.CAtopTop {
  top: 120px;
}

.CAtopLeft {
  left: -125px;
    top: 212px;
}

.CAbottomLeft {
  top: 357px;
    left: -81px;
}

.CAtopRight {
  left: 125px;
    top: 212px;
}

.CAbottomRight {
  top: 357px;
    left: 77px;
}

.PAstepsHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.singleBulkWFSBackground {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  opacity: 0.1;
  overflow-x: hidden;
}

.singleBulkWFSContent {
  position: relative;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.singleWFSholder {
  position: relative;
  display: block;
  height: auto;
  width: auto;
  margin-bottom: 5px;
  border-radius: 15px;
  border-left-style: solid;
  border-left-width: 5px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.singleWFSContent {
  position: relative;
  display: flex;
  padding-top: 15px;
  height: auto;
  flex-direction: column;
  transition: all 0.2s ease-in-out;
}

.mainWScontent {
  position: relative;
  display: flex;
  flex-direction: row;
}

.singleStepEditContent {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.5s ease-in-out;
  width: 95%;
}

.PAnameOnStep {
  position: relative;
  display: flex;
  height: 19px;
  font-size: 0.8rem;
  width: auto;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 5px;
  letter-spacing: 1px !important;
}

.WSiconStatusHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 20%;
}

.stepNotesInput {
  position: relative;
  display: block;
  margin-top: 20px;
  height: 250px;
  width: 95%;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 5px;
  padding-bottom: 5px;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  border: none;
  border-radius: 5px;
  outline: none;
}

.saveStepNotesButton {
  position: relative;
  display: block;
  width: fit-content;
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 0.8rem;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
}

.WSiconDeleteHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.flexIcons {
  position: relative;
  display: flex;
  flex: 50%;
  justify-content: space-around;
  align-items: center;
}

.singleWFicon {
  position: relative;
  display: flex;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border-style: solid;
  border-width: 1.8px;
  font-size: 1.5rem; /* for checkmark to fit */
  transition: all 0.5s ease-in-out; /* for changing color effect*/
  justify-content: center;
  align-items: center;
  object-fit: cover;
}

.WSstatus {
  display: flex;
  margin-left: 20px;
  margin-top: 15px;
  font-size: 0.8rem;
}

.WFdelConfirmationHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 0%;
  background-color: #ff8f8f;
  padding-bottom: 5px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 25px;
  transition: all 0.8s ease-in-out;
  overflow: hidden;
}

.stepDelWarning {
  position: relative;
  display: flex;
  font-size: 0.8rem;
  color: #ffffff;
  border-radius: 5px;
  width: auto;
  height: 20px;
  padding-left: 15px;
  padding-top: 10px;
  overflow: hidden;
}

.deleteWSButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 30px;
  width: 25%;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #ffffff;
  font-size: 0.8rem;
  font-weight: bold;
  color: #cb0101;
  border-radius: 25px;
  transition: all 0.5s ease-in-out;
}
.deleteWSButton:hover {
  background-color: #b50b0b;
  color: #ffffff;
}

.cancelDeleteWSButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 30px;
  width: 25%;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #ffffff;
  font-size: 0.8rem;
  font-weight: bold;
  color: #22455f;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
}
.cancelDeleteWSButton:hover {
  background-color: #0569d3;
  color: #ffffff;
}

.PAnameDaysHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 60%;
}

.simpleFlexRow {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  user-select: none;
}

.simpleFlexColumn {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  user-select: none;
}

.simpleFlexCenteredRow {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;  /* Enable wrapping */
  width: 100%;
  user-select: none;
}

.simpleFlexAlignedItemsRow {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;  /* Enable wrapping */
  width: 100%;
  height: 100%;
  user-select: none;
}

.simpleFlexCenteredColumn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  height: auto;
  width: 100%;
  user-select: none;
}

.flexHalfLeftAligned {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: left;
}

.flexHalfRightAligned {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: end;
}

.fullPreviewImageHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 50%;
  perspective: 1200px;
}

.fullPreviewImage1 {
  position: relative;
  display: block;
  margin-top: 0%;
  transform: scale(0.4) rotateY(15deg);
  object-fit: cover;
  -webkit-box-reflect: below -100px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));
  transition: all 0.5s ease-in-out;
}
.fullPreviewImage1:hover {
  margin-left: 40%;
  transform: scale(0.5) rotateY(0deg);
}

.fullPreviewImageVertical {
  position: relative;
  display: block;
  margin-top: 0%;
  transform: scale(0.6) rotateY(15deg);
  object-fit: cover;
  -webkit-box-reflect: below -100px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));
  transition: all 0.5s ease-in-out;
}
.fullPreviewImageVertical:hover {
  margin-left: 40%;
  transform: scale(1) rotateY(0deg);
}

.movingAnimation {
  animation: rotateYImageToRight;
  animation-delay: 5s;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
}

@keyframes rotateYImageToRight {
  0% {
    transform: scale(0.6) rotateY(0deg);
  }
  50% {
    transform: scale(0.6) rotateY(7deg);
  }
  75% {
    transform: scale(0.4) rotateY(-7deg);
  }
  100% {
    transform: scale(0.6) rotateY(0deg);
  }
}

@keyframes move-margins {
  0%, 100% { ransform: scale(0.7) rotateY(3deg); margin-top: 0%; }
  50% { ransform: scale(0.7) rotateY(3deg); margin-top: 100%; }
}

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

.fullPreviewTextHolder {
  position: relative;
  display: flex;
  margin-top: 5%;
  display: block;
  width: 50%;
}

.fullPreviewTextBackground {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to bottom, #0f2f39, #151d2f);
  border-radius: 15px;
  opacity: 0.1;
}

.previewTextContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 2%;
  left: 2%;
  height: 96%;
  width: 96%;
  z-index: 2;
  color: #ffffff;
}

.presentationTextHeader {
  position: relative;
  height: auto;
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
}
.presentationTextMessage {
  position: relative;
  margin-top: 50px;
  height: auto;
  width: 100%;
  font-size: 2rem;
  color: #aaffd0;
  text-align: center;
  letter-spacing: 5px;
}
#echoPresentationStart {
  position: absolute;
  top: 190px;
  left: 50px;
  height: auto;
  width: auto;
  font-size: 1.5rem;
  font-weight: bold;
  color: #aaffd0;
  letter-spacing: 4px;
}
#echoPresentWorking {
  position: absolute;
  top: 200px;
  left: 0px;
  height: auto;
  width: 100%;
  font-size: 1.2rem;
  text-align: center;
}
#echoPresentPlanner {
  position: absolute;
  top: 210px;
  right: 5px;
  height: auto;
  width: auto;
  font-size: 1.5rem;
  font-weight: bold;
  /*color: #59baff;*/
  letter-spacing: 4px;
}
#echoPresentLetHelp {
  position: absolute;
  top: 340px;
  left: 40px;
  height: auto;
  width: auto;
  font-size: 1.1rem;
}
#echoPresentBudget {
  position: absolute;
  top: 340px;
  left: 360px;
  height: auto;
  width: auto;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
}
#echoPresentNumbers {
  position: absolute;
  top: 350px;
  left: 470px;
  height: auto;
  width: auto;
  font-size: 1.1rem;
}
#echoPresentKeepFocus {
  position: absolute;
  top: 440px;
  left: 60px;
  height: auto;
  width: auto;
  font-size: 1.1rem;
}
#echoPresentProjectWorkflow {
  position: absolute;
  top: 450px;
  left: 280px;
  height: auto;
  width: auto;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 5px;
}
#echoPresentGet {
  position: absolute;
  top: 580px;
  left: 40px;
  height: auto;
  width: auto;
  font-size: 1.1rem;
}
#echoPresentResources {
  position: absolute;
  top: 570px;
  left: 90px;
  height: auto;
  width: auto;
  font-size: 1.5rem;
  letter-spacing: 2px;
}
#echoPresentByPlacing {
  position: absolute;
  top: 610px;
  left: 240px;
  height: auto;
  width: auto;
  font-size: 1.1rem;
}
#echoPresentMap {
  position: absolute;
  top: 600px;
  left: 480px;
  height: auto;
  width: auto;
  font-size: 1.9rem;
  letter-spacing: 4px;
}
#echoPresentCooperate {
  position: absolute;
  top: 740px;
  left: 140px;
  height: auto;
  width: auto;
  font-size: 1.1rem;
}
#echoPresentMembers {
  position: absolute;
  top: 750px;
  left: 320px;
  height: auto;
  width: auto;
  font-size: 1.5rem;
  letter-spacing: 2px;
}

.orangeFont {
  color: #ffcf7c;
}

.equalDistanceFlexRow {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.mainPageIcons {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: #c0f7d4;
  height: 48px;
  width: 48px;
}

.WSnameInput {
  position: relative;
  display: flex;
  padding-top: 5px;
  padding-left: 3%;
  padding-right: 5%;
  width: 100%;
  height: 30px;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  border: none;
  outline: none;
  background: none;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.halfRowAlignLeft {
  position: relative;
  display: flex;
  flex: 50%;
  flex-direction: row;
  justify-content: left;
}

.halfRowAlignRight {
  position: relative;
  display: flex;
  flex: 50%;
  flex-direction: row;
  justify-content: right;
}

.PAechoFrom {
  position: relative;
  margin-top: 15px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 5px;
  width: auto;
  font-size: 0.9rem;
}

.dateIcon {
  position: absolute;
  top: 0px;
  left: 20px;
  width: 30px;
  height: 27px;
  border: none;
  outline: none;
  background-image: url('/images/siteUsage/calendar.png');
  background-repeat: no-repeat;
  z-index: 1;
}

.fromToDateInput {
  position: absolute;
  top: 15px;
  left: 5px;
  width: 200px;
  height: 27px;
  border: none !important;
  outline: none !important;
  background: none !important;
  z-index: 2;
  opacity: 0;
}

/* Style the custom date input wrapper */
.custom-date-input {
  position: relative;
  display: inline-block;
  
}
/* Add background image to the custom date input */
.custom-date-input:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0px; /* Adjust the position as needed */
  transform: translateY(-50%);
  width: 200px; /* Adjust the size of the icon */
  height: 30px; /* Adjust the size of the icon */
  /*background-image: url('/images/siteUsage/calendar.png'); /* Set the path to your icon image */
  background: none !important;
  background-size: cover; /* Adjust as needed */
  cursor: pointer; /* Show pointer cursor when hovering */
  
}

.userFriendyDate {
  position: relative;
  display: flex;
  margin-top: 15px;
  height: 24px;
  width: auto;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 10px;
  font-size: 0.8rem;
  overflow: hidden;
  white-space: nowrap;
}

.saveWSChangesButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
  width: auto;
  margin-top: 0px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 5px;
  font-size: 0.8rem;
  border-radius: 20px;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  cursor: pointer;
}

#saveNewMilestoneButton {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 7px;
}

.WSshowItemsHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: start;
  height: auto;
  margin-left: 2%;
  width: 18%;
}

.echoShowBudgetItems {
  display: flex;
  height: auto;
  margin-left: 10px;
  font-size: 0.8rem;
  overflow: hidden;
  white-space: nowrap;
  z-index: 2;
}

.expandColapseImgHolder {
  position: relative;
  display: flex;
}

.expandBudgetItemsIMG {
  position: relative;
  display: block;
  transform: rotateZ(90deg);
  transition: all 0.5s ease-in-out;
}

.rotate45 {
  transform: rotateZ(45deg);
}

.rotate90 {
  transform: rotateZ(90deg) !important;
}

.rotate180 {
  transform: rotateZ(180deg) !important;
}

.rotate270 {
  transform: rotateZ(270deg) !important;
}

.newWFSholder {
  position: relative;
  display: block;
  height: auto;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  visibility: hidden;
  border-radius: 10px;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.cancelNewWSButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: auto;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8rem;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
  white-space: nowrap;
}

.fontBold {
  font-weight: bold;
}

.fontSizeNormal {
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
}

.columnHalfOfRow {
  position: relative;
  display: flex;
  width: 50%;
  height: 100%;
  flex-direction: column;
}

#plannerButtonCallContentSection {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  height: 92%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

.fullWHdiv {
  height: 100%;
  width: 100%;
}

.newToolContent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  overflow-y: auto;
  z-index: 2;
}

.toolsHeader {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.toolsTitle {
  position: relative;
  display: flex;
  margin-left: 20px;
  justify-content: left;
  align-items: center;
  font-size: 0.9rem;
  padding-top: 8px;
  padding-bottom: 7px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
}

#toolboxBody {
  position: relative;
  display: block;
  height: 85%;
  margin-left: 10%;
  width: 80%;
  padding-top: 5px;
  padding-bottom: 25px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.itemsHeader {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.itemsTitle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  font-size: 0.9rem;
  padding-top: 8px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
}

.itemsSubTitle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  font-size: 0.9rem;
  padding-top: 8px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
}

#itemboxBody {
  position: relative;
  display: block;
  margin-top: 10px;
  height: auto;
  margin-left: 10%;
  width: 80%;
  padding-top: 5px;
  padding-bottom: 25px;
  overflow-x: hidden;
}


#newToolFormRow {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  margin-left: 10%;
  width: 80%;
  height: 0px;
  border-radius: 10px;
  transition: all 1s ease-in-out;
}

.newToolRows {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-left: 5%;
  height: auto;
  width: 90%;
  align-items: center;
}

.toolNameForm {
  position: relative;
  display: block;
  height: auto;
  width: 80%;
  margin-top: 50px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1rem;
  border: none;
  outline: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background: none;
}

.newToolPriceInput {
  position: relative;
  display: block;
  height: auto;
  width: 40%;
  margin-top: 40px;
  padding-bottom: 2px;
  padding-left: 10px;
  font-size: 1rem;
  text-align: right;
  border: none;
  outline: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background: none;
}

.roundingSpan {
  position: relative;
  display: block;
  margin-top: 45px;
  height: auto;
  width: auto;
  font-size: 0.8rem;
  font-weight: bold;
}

.newToolCurrency {
  position: relative;
  display: block;
  margin-top: 40px;
  margin-left: 10px;
  height: auto;
  width: auto;
  font-size: 1rem;
}

#newToolImgPreview {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.externalLinkIcon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: 30px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 20px;
  transition: all 0.3s ease-in-out;
}
.externalLinkIcon:hover {
  transform: rotate(360deg);
}


.saveNewTollButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  height: 40px;
  width: 20%;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #788997;
  font-size: 0.8rem;
  color: #ffffff;
  border-radius: 25px;
  transition: all 0.3s ease-in-out;
}
.saveNewTollButton:hover {
  background-color: #0a55ec;
  color: #ffffff;
}

.toolboxRows {
  position: relative;
  display: flex;
  flex-direction: row;
  height: auto;
  width: 100%;
  align-items: center;
  margin-bottom: 10px;
}

.toolboxColumns {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  margin-bottom: 5px;
  height: auto;
  width: 100%;
  align-items: center;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.singleToolContent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 15px;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10px;
  padding-bottom: 5px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.singleItemTitle {
  position: relative;
  display: block;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  width: 100%;
  border: none;
  outline: none;
  background: none;
  overflow: hidden;
}

.flexHalfLeft {
  position: relative;
  display: flex;
  width: 50%;
  justify-content: left;
  align-items: center;
}

.flexHalfRight {
  position: relative;
  display: flex;
  width: 50%;
  justify-content: right;
}

.moveToolIcon {
  position: relative;
  display: block;
  height: 35px;
  width: 35px;
  cursor: grab;
  transition: all 0.3s ease-in-out;
}
.moveToolIcon:hover {
  scale: 1.1;
}

.plannerSingleToolImage {
  height: 100%;
  width: 100%;
  cursor: grab;
  object-fit: contain;
  transition: all 0.3s ease-in-out;
}

.singleToolDeleteButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  height: 40px;
  width: 60px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8rem;
  border-radius: 25px;
}

.changeSingleTollButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  height: 40px;
  width: 50%;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8rem;
  border-radius: 25px;
  transition: all 0.3s ease-in-out;
}

.singleStepToolsHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  padding-bottom: 10px;
  background: none;
}

.singleStepToolsHeader {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  height: auto;
  width: 100%;
  padding-top: 7px;
  padding-bottom: 5px;
  border-radius: 25px;
}

.singleStepToolIcon {
  position: relative;
  display: block;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

.singleStepToolsTitle {
  position: relative;
  display: block;
  height: auto;
  width: auto;
  padding-left: 15px;
  font-size: 1rem;
}

.singleStepItemsTitle {
  position: relative;
  display: block;
  height: auto;
  width: auto;
  padding-left: 15px;
  font-size: 1rem;
}

.opacityNone {
  opacity: 0 !important;
}

.opacityToPointFive {
  opacity: 0.5 !important; /* used to style disabled forms */
}

.opacityFull {
  opacity: 1 !important;
}

.toolAddingInfo {
  position: relative;
  display: block;
  height: auto;
  width: 80%;
  padding-top: 25px;
  padding-bottom: 15px;
  font-size: 0.9rem;
}

.itemsAddingInfo {
  position: relative;
  display: block;
  height: auto;
  width: 100%;
  padding-right: 10px;
  padding-top: 25px;
  padding-bottom: 15px;
  font-size: 0.9rem;
}

.singleStepToolsContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  padding-left: 2%;
  width: 98%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.singleStepItemsContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  padding-left: 2%;
  width: 98%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.singleStepToolbox {
  position: relative;
  display: block;
  width: 100%;
  min-height: 200px;
  padding-bottom: 15px;
  border-radius: 15px;
}

.singleToolHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  float: left;
  align-items: center;
  width: 20%;
  margin-right: 2%;
  margin-top: 5px;
  margin-bottom: 10px;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.singleToolImageHolder {
  position: relative;
  display: flex;
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.singleItemImageHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 130px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.singleToolImage {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.singleToolName {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  padding-left: 5%;
  width: 90%;
  font-size: 0.9rem;
  overflow: hidden;
}

.simpleFlexRowAlignItemsEnd {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: 100%;
  height: 100%;
  align-items: end;
}

.removeToolButton {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 20px;
  width: auto;
  padding-top: 1px;
  padding-right: 10px;
  padding-left: 15px;
  padding-bottom: 2px;
  font-size: 0.7rem;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 20px;
  transition: all 0.2s ease-in-out;
}
.removeToolButton:hover {
  transform: rotateZ(360deg);
}

.singleStepItemsHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  padding-bottom: 5px;
}

.singleItemBucket {
  position: relative;
  display: flex;
  flex-direction: column;
  float: left;
  margin-left: 6%;
  height: 215px;
  width: 150px;
  margin-bottom: 20px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.appearItemAnim {
  animation: swirlIn 0.3s forwards;
}

.pullOutBoxItem {
  animation: pullItemOFB 0.2s forwards;
}
@keyframes pullItemOFB {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
    opacity: 1;
    scale: 1;
  }
  50% {
    transform: rotateX(20deg) rotateY(30deg);
    opacity: 0.7;
    scale: 1.2;
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
    opacity: 0.2;
    scale: 1;
  }
}

.setBoxItemToBack {
  animation: setBoxItemToBackKeys 0.5s forwards;
}
@keyframes setBoxItemToBackKeys {
  0% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0.1;
    scale: 0.5;
  }
}

.setBoxItemToFront {
  animation: setBoxItemToFrontKeys 1s forwards;
}
@keyframes setBoxItemToFrontKeys {
  0% {
    opacity: 0.1;
    scale: 0.5;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

.singleItemCopy {
  display: flex;
  flex-direction: column;
  height: 215px;
  width: 150px;
  margin-bottom: 20px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

.animateStandByForDropItem {
  animation: standbyItemDrop 1s infinite;
}
@keyframes standbyItemDrop {
  0% {
    transform: rotateZ(1deg) rotateY(0deg);
  }
  100% {
    transform: rotateZ(1deg) rotateY(360deg);
  }
}

.animateDroppingItem {
  animation: dropItemToBox 0.5s forwards;
}
@keyframes dropItemToBox {
  0% {
    margin-top: 0px;
    scale: 1.3;
    opacity: 1;
  }
  40% {
    margin-top: -50px;
    scale: 1;
    opacity: 1;
  }
  100% {
    margin-top: -10px;
    scale: 0.3;
    opacity: 0;
  }
}

.itemNoticeInput {
  position: relative;
  display: flex;
  height: 110px;
  width: 95%;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 5px;
  padding-bottom: 5px;
  font-family: 'Exo', sans-serif;
  font-size: 0.8rem;
  border: none;
  border-radius: 5px;
  outline: none;
}

.marginRight20 {
  position: relative;
  display: flex;
  height: auto;
  margin-right: 20px;
  justify-content: right;
  align-items: center;
}

.newStepItemButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  transition: all 0.3s ease-in-out;
}

.newStepItemButton:hover {
  transform: rotateZ(90deg);
}

.flexHalfRow {
  position: relative;
  display: flex;
  width: 50%;
  align-items: center;
}

.SSsingleItemName {
  position: relative;
  display: block;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  margin-top: 5px;
  width: 100%;
  padding-left: 15px;
  padding-right: 10px;
  border: none;
  outline: none;
  background: none;
}

.editableItemBorder {
  border-bottom-style: solid !important;
  border-bottom-width: 1px !important;
}

.SSechoZeroPoints {
  position: relative;
  display: block;
  font-size: 0.8rem;
  color: #554c49;
  margin-top: 19px;
}

.removeItemButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8rem;
  border-radius: 15px;
}

.changeItemButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8rem;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
}
.changeItemButton:hover {
  letter-spacing: 1px;
}

.singleItemSettingsIcon {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 25px;
  width: 100%;
  padding-right: 5px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 25px;
  transition: all 0.2s ease-in-out;
}
.singleItemSettingsIcon:hover {
  transform: rotateZ(360deg);
}

.SHCIcon {
  position: relative;
  display: block;
  height: 24px;
  width: 24px;
  transition: all 0.5s ease-in-out;
}

.stopStepFunction {
  position: relative;
  display: block;
  margin-top: -15px;
  height: 15px;
  width: 5px;
  border-radius: 3px;
}

.NPbodyContent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.NPsingleRow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: 100%;
}

#inputProjectName {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 100px;
  height: auto;
  width: 0%;
  padding-top: 10px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.5rem;
  font-weight: lighter;
  text-align: center;
  border: none;
  outline: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  transition: all 0.7s ease-in-out;
}

#NPNameNote {
  position: relative;
  display: block;
  margin-top: 30px;
  text-align: center;
  width: 0%;
  height: auto;
  font-size: 0.8rem;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.9s ease-in-out;
}

#selectCurrency {
  display: block;
  float: left;
  margin-top: -30px;
  padding-left: 10px;
  padding-right: 10px;
  height: 50px;
  width: auto;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  border: none;
  outline: none;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

#NPCurrencyNote {
  position: relative;
  display: block;
  margin-top: 0px;
  text-align: center;
  width: 100%;
  height: auto;
  font-size: 0.8rem;
  color: #4f6179;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}

#saveProjectButton {
  display: flex;
  margin-top: 80px;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 150px;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  border: none;
  outline: none;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
  opacity: 0;
}

#saveProjectButton:hover {
  scale: 1.1;
}

.justfyContentCenter {
  justify-content: center;
}

#inputFundingInfo {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 100px;
  margin-left: 5%;
  height: 30px;
  width: 90%;
  padding-top: 10px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1rem;
  font-weight: lighter;
  text-align: center;
  border: none;
  outline: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  transition: all 0.7s ease-in-out;
}
#inputFundingInfo::placeholder {
  color: #bfd0e2;
}

#saveFundingInfoButton {
  display: flex;
  margin-top: 80px;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 150px;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  border: none;
  outline: none;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

#saveFundingInfoButton:hover {
  letter-spacing: 1px;
}

.TasksCalendarHolder {
  position: relative;
  display: block;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* regarding area in the project, bottom middle page */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-left: 5%;
  width: 90%; /* Make calendar width 100% of TasksCalendarHolder */
  box-sizing: border-box; /* Ensure padding and border are included in the width */
  font-size: 0.8rem;
}

.calendar-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  z-index: 1;
  cursor: default;
  transition: all 0.2s ease-in-out;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}
.calendar-cell:hover {
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  transform: scale(1.1);
  z-index: 2;
}

.calendar-text-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
}
.calendar-text {
  margin: 2px;
}
.calendar-today-text {
  margin: 2px;
  font-size: 1rem;
}
.calendar-event-text {
  height: 15px;
  margin-top: 2px;
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 2px;
  border-radius: 2px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-event-text:hover {
  height: auto;
  overflow: visible;
  transform: scale(1.2);
  border-style: solid;
  border-width: 1px;
  border-color: #ffffff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0.2, 0.2);
}

.centerContent {
  justify-content: center;
  align-items: center;
}

.modalScrollBodyHolder {
  display: flex;
  margin-top: 1%;
  height: auto;
  width: 100%;
  border-radius: 10px;
  overflow: auto;
  background-color: #ffffff;
}

#itemsListIcon {
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
}

.purchasedItemsTitle {
  position: relative;
  display: block;
  margin-left: 20px;
  font-size: 1.5rem;
  font-weight: bold;
}

.purchasedToolsTitle {
  position: relative;
  display: block;
  margin-left: 20px;
  font-size: 1.5rem;
  font-weight: bold;
}

.purchasedItemsContainer {
  position: relative;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-gap: 3%; /* Adjust as needed */
}

.purchasedGridItem {
  position: relative;
  margin-bottom: 20px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  height: 350px;
  width: 250px;
  border-radius: 10px;
}

.purchasedSingleItemName {
  position: relative;
  display: flex;
  height: 25px;
  justify-content: center;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1rem;
  overflow: hidden;
}

.purchasedSingleToolName {
  position: relative;
  display: flex;
  height: 25px;
  justify-content: center;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1rem;
  overflow: hidden;
}

.purchasedItemLinkIcon {
  position: relative;
  height: 30px;
  cursor: pointer;
}

.singlePurchasedItemPhotoHolder {
  position: relative;
  margin-top: 40px; 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 130px;
}

.singlePurchasedItemPhotoImg {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* end calendar regarding body contained page, area, bottom middle page */


input[type="date"]::-webkit-calendar-picker-indicator {
  width: 200px;
  height: 30px;
  /*background-image: url('/images/siteUsage/calendar.png');*/
 /* background: none !important;*/
  cursor: pointer;
  
}
input[type="color"] {
  border-radius: 50%;
  padding: 0;
  border: none;
  outline: none;
}
input[type="color"]::-moz-color-swatch {
  border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}

input[type="date"] {
  background-color: #000000; /* Change to your desired color */
  border-radius: 5px;
  font-size: 16px;
}

/* Optional: Change the appearance of the input on focus */
input[type="date"]:focus {
  background-color: #000000; /* Change to your desired color */
  border-color: #a0a0a0;
}

/* Remove border from HTML5 date picker popup (for webkit-based browsers) */
::-webkit-calendar-picker-indicator {
  border-style: solid;
  border-width: 0px;
  border-color: #ffffff;
}


@keyframes animatedBorder {
  0% {
    border-style: solid;
    border-width: 2px;
    border-color: #1bb97a;
  }
  20% {
    border-style: solid;
    border-width: 2px;
    border-color: #efe812;
  }
  50% {
    border-style: solid;
    border-width: 2px;
    border-color: #ea1212;
  }
  70% {
    border-style: solid;
    border-width: 2px;
    border-color: #cd1ec7;
  }
  100% {
    border-style: solid;
    border-width: 2px;
    border-color: #1359fc;
  }
}

@keyframes changingBorderColor {
  0% {
    border-color: #1bb97a;
  }
  20% {
    border-color: #efe812;
  }
  50% {
    border-color: #ea1212;
  }
  70% {
    border-color: #cd1ec7;
  }
  100% {
    border-color: #1359fc;
  }
}

@keyframes fadeFifty {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes breathingKeyframes {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes customPartProjectNoticeAnimation {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes fadingKeyframes {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadingLinearKeyframes {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes uploadAnimationKeyframes {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* Define the spinning animation */
@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

@keyframes animateShakingAnimation {
  0%, 100% {
    transform: translateX(0);
  }
  25%, 75% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
}

@keyframes popUpElement {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}

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

@keyframes swirlIn {
  0% {
    transform: rotateY(60deg) rotateX(30deg) scale(0.5);
  }
  100% {
    transform: rotateY(0deg) rotateX(0deg) scale(1);
  }
}

@keyframes throwAway {
  0% {
    transform: rotateY(0deg) rotateX(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotateY(60deg) rotateX(30deg) scale(0.5);
    opacity: 0;
  }
}

@keyframes bringInto {
  100% {
    transform: rotateY(60deg) rotateX(30deg) scale(1.5);
    opacity: 0;
  }
}

@-webkit-keyframes zoom {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes zoom {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
/* end for pusling circle */


@keyframes fade-in {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@keyframes spinLeftRight {
  0% {
    transform: rotate(0deg);
    
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateAroundYaxis {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes screwInKeyframes {
  0% {
    transform: rotateZ(360deg);
    opacity: 0;
    scale: 0.9;
  }
  100% {
    transform: rotateZ(0deg);
    opacity: 1;
    scale: 1;
  }
}

@keyframes rotateAroundZaxis {
  0% {
    transform: rotateZ(5deg);
    opacity: 0;
  }
  100% {
    transform: rotateZ(0deg);
    opacity: 1;
  }
}

@keyframes rotateAroundYZaxis {
  0% {
    transform: rotateY(90deg) rotateZ(20deg);
  }
  100% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
}

@keyframes rotateAroundBottomZaxis {
  0% {
    transform: rotateZ(-5deg);
    opacity: 0;
  }
  100% {
    transform: rotateZ(0deg);
    opacity: 1;
  }
}

@keyframes animateGrabData {
  0% {
    /**/
  }
  20% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: rotateY(90deg) rotateX(-10deg) scale(0.8);
    opacity: 0.8;
  }
}

@keyframes animateBringData {
  0% {
    transform: rotateY(90deg) rotateX(0deg) scale(0.8);
    opacity: 0.8;
  }
  20% {
    transform: rotateY(40deg) rotateX(-10deg) scale(0.8);
    opacity: 0.9;
  }
  100% {
    transform: rotateY(0deg) rotateX(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes animateLeftGrabData {
  0% {
    /**/
  }
  30% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: rotateY(90deg) rotateX(10deg) scale(0.8);
    opacity: 0.8;
  }
}

@keyframes animateLeftBringData {
  0% {
    transform: rotateY(90deg) rotateX(0deg) scale(0.8);
    opacity: 0.8;
  }
  30% {
    transform: rotateY(40deg) rotateX(10deg) scale(0.8);
    opacity: 0.9;
  }
  100% {
    transform: rotateY(0deg) rotateX(0deg) scale(1);
    opacity: 1;
  }
}

.displayInlineBlock {
  display: inline-block;
}

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

@keyframes slideAnimationRightButton {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes slideAnimationPrevButton {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

.loaderHolder {
  display: flex;
  position: absolute;
  top: 350px;
  left: 0px;
  height: auto;
  width: 100%;
  justify-content: center;
}

.loader {
  width: 70px;
  aspect-ratio: 1;
  background:
    radial-gradient(farthest-side,#ffd353  90%,#0000) center/16px 16px,
    radial-gradient(farthest-side,#71c3ff   90%,#0000) bottom/12px 12px;
  background-repeat: no-repeat;
  animation: l17 1s infinite linear;
  position: relative;
}
.loader::before {    
  content:"";
  position: absolute;
  width: 8px;
  aspect-ratio: 1;
  inset: auto 0 16px;
  margin: auto;
  background: #f7f7f7;
  border-radius: 50%;
  transform-origin: 50% calc(100% + 10px);
  animation: inherit;
  animation-duration: 0.5s;
}
@keyframes l17 { 
  100%{transform: rotate(1turn)}
}

#footer {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0px;
  width: 100%;
  height: auto;
  z-index: 99;
}

.footerLinkHolder {
  position: relative;
  display: flex;
  height: 30px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.footerLinks {
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  letter-spacing: 1px;
}

#copyright {
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
  letter-spacing: 5px;
  -webkit-box-reflect: below -40px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
}

.themesButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 3px;
  height: 50%;
  width: 100%;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
  cursor: pointer;
}


.projectThemesButton {
  position: relative;
  display: flex;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 17%;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 7px;
  padding-bottom: 5px;
  font-size: 0.7rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}


.newStepItemToolContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  transition: all 0.3s ease-in-out;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 20px;
  border-radius: 15px;
}

.flexHalfLeftColumn {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 50%;
  justify-content: left;
  align-items: center;
}

.flexHalfRightColumn {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 50%;
  justify-content: right;
}

.newFormItemName {
  position: relative;
  display: block;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  width: 100%;
  padding-left: 15px;
  padding-right: 10px;
  border: none;
  outline: none;
  background: none;
}

.newFormItemSubName {
  position: relative;
  display: block;
  padding-left: 10px;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  margin-top: 5px;
  width: 85%;
  border: none;
  outline: none;
  background: none;
}

.newItemEditText {
  position: relative;
  display: block;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
  border: none;
  outline: none;
  background: none;
}

.newItemPrice {
  position: relative;
  display: block;
  font-size: 1rem;
  text-align: right;
  margin-left: 5px;
  width: 80px;
  border: none;
  outline: none;
  background: none;
}

.newItemUnits {
  position: relative;
  display: block;
  font-size: 1rem;
  text-align: right;
  margin-left: 5px;
  width: 60px;
  border: none;
  outline: none;
  background: none;
}

.newItemDescHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-left: 10px;
  width: 100%;
  height: 100%;
}

.newItemNoticeInput {
  position: relative;
  display: block;
  height: 100%;
  font-family: 'Exo', sans-serif;
  font-size: 0.8rem;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 5px;
  padding-bottom: 5px;
  border: none;
  outline: none;
}

.newItemCharCounter {
  position: relative;
  display: flex;
  font-size: 0.8rem;
}

.saveNewItemButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8rem;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
}

.transformZ0 {
  transform: rotateZ(0deg) !important;
}
.transformZ90 {
  transform: rotateZ(90deg) !important;
}

.transition03 {
  transition: all 0.3s ease-in-out !important;
}
.transition02 {
  transition: all 0.2s ease-in-out !important;
}
.transition05 {
  transition: all 0.5s ease-in-out !important;
}


.blur10px {
  filter: blur(10px);
}

#callCreateNewToolFormButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-right: 10px;
  cursor: pointer;
}

#echoCreateNewTool {
  position: relative;
  display: flex;
  font-size: 0.8rem;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 25px;
  border-radius: 15px;
  transition: all 1s ease-in-out;
}

#plusSignCreateNewTool {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  height: 33px;
  width: 33px;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

@keyframes signalWave {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

#toolTypeSelectButton {
  position: relative;
  display: flex;
  justify-content: left;
  align-items: center;
  height: auto;
  width: auto;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

#echoTypeOfNewTool {
  position: relative;
  display: block;
  margin-left: 10px;
  font-size: 0.91rem;
}

.absoluteFlexRow {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 0px;
  left: 0px;
  height: 40px;
  width: 100%;
}

.echoTypeOfPost {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  font-size: 0.8rem;
  padding-top: 10px;
  padding-bottom: 10px;
}

.publishingButtonsLeftSide {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.publishingButtonsRightSide {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  transition: all 0.3s ease-in-out;
}

.width0Important {
  width: 0% !important;
}

/* ------- POSTS ------- */

.newPostHeader {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  margin-top: 10px;
  font-size: 1.3rem;
}

.postTagsHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  width: 100px;
  border-radius: 10px;
  overflow: hidden;
}

.projectPostTag {
  position: relative;
  display: flex;
  align-items: center;
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 5px;
  font-size: 0.9rem;
  border-radius: 25px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 7px;
  padding-bottom: 7px;
  cursor: pointer;
}

.postPostTag {
  position: relative;
  display: block;
  float: left;
  width: fit-content;
  margin-top: 20px;
  margin-left: 10px;
  font-size: 0.9rem;
  border-radius: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  transition: all 0.2s ease-in-out;
}
.postPostTag:hover {
  letter-spacing: 1px;
}

.selectedPostTag {
  cursor: not-allowed;
}

.feedFilterPostTag {
  position: relative;
  display: flex;
  align-items: center;
  float: left;
  margin-left: 20px;
  margin-bottom: 5px;
  font-size: 0.9rem;
  border-radius: 25px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 7px;
  padding-bottom: 7px;
  cursor: pointer;
}

#detailsAboutPostTag {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  min-height: 70px;
  width: 95%;
  padding-left: 3%;
  font-size: 0.9rem;
}

.tagsSoundButton {
  position: relative;
  display: block;
  height: 40px;
  width: 40px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
}

#newPostToolListRow {
  position: relative;
  display: block;
  height: auto;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 20px;
}

#newPostItemsListRow {
  position: relative;
  display: block;
  height: auto;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.selectedToolForPostTagging {
  scale: 1.1;
}

.holderForPostMarkingTools {
  position: relative;
  display: flex;
  height: auto;
  margin-top: 10px;
  margin-left: 3%;
  width: 97%;
  font-size: 0.9rem;
}

.titleBeforeListingForAttachments {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  margin-top: 10px;
  margin-left: 3%;
  width: 97%;
  font-size: 0.9rem;
}

.projectPostToolsHolder {
  position: relative;
  display: block;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
}

.toolOrItemForPostTaggingHolder {
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 160px; /* in order to fit 3 items horizontaly */
  height: 200px;
  font-size: 1rem;
  z-index: 2;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.toolOrItemForPostTaggingHolder:hover {
  scale: 1.05;
}

.toolNitemNameForMarking {
  position: relative;
  display: flex;
  margin-top: 10px;
  margin-left: 5%;
  width: 90%;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#NPtitleInputHolder {
  position: relative;
  display: block;
  margin-top: 30px;
  height: 35px;
  width: 100%;
}

.projectPostEchoMedia {
  position: relative;
  display: flex;
  margin-top: 25px;
  width: 100%;
  font-size: 1rem;
}

#NPmediaInputHolder {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-left: 20px;
  height: 35px;
  width: 100%;
}

#NPmediaPreviewHolder {
  position: relative;
  display: block;
  margin-top: 10px;
  height: 130px;
  width: 350px;
  border-radius: 5px;
}

.newPostImgPreview {
  position: relative;
  display: block;
  max-height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  overflow: hidden;
}

#NPtextInputHolder {
  position: relative;
  display: block;
  margin-top: 10px;
  height: 400px;
  width: 100%;
  border-radius: 5px;
}

#projectPostTextInput {
  position: relative;
  display: block;
  margin-top: 10px;
  padding: 10px;
  height: 350px;
  width: 97%;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  border: none;
  outline: none;
  border-radius: 7px;
}

.newPostMediaInput {
  position: relative;
  display: block;
  margin-top: 7px;
  margin-left: 2%;
  height: 20px;
  width: 95%;
  font-family: 'Exo', sans-serif;
  font-size: 0.8rem;
  background: none;
  border: none;
  outline: none;
}

#newPostImageFile {
  position: relative;
  left: 0px;
  width: 100%;
  height: 100%;
  background: none !important;
  border: none !important;
  outline: none !important;
  opacity: 0;
  cursor: pointer;
}

.postMarkingAttTitle {
  position: relative;
  display: flex;
  height: auto;
  width: 100%;
  font-size: 0.8rem;
}

.postMedia {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
}

.singleAttachmentHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  float: left;
  margin-top: 10px;
  margin-right: 5px;
  height: 160px;
  width: 150px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.singleAttachmentHolder:hover {
  scale: 1.05;
}

.postAttachmentName {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  height: 20%;
  text-overflow: ellipsis;
}

.toolImageInAttachmentHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-left: 2%;
  width: 96%;
  height: 100px;
  overflow: hidden;
}

.publishPostButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.8rem;
  border-radius: 15px;
  transition: all 0.2s ease-in-out;
  border: none;
}
.publishPostButton:hover {
  letter-spacing: 1px;
}

.postTextDiv {
  position: relative;
  display: block;
  height: auto;
  padding-top: 10px;
  padding-bottom: 15px;
  padding-left: 80px;
  padding-right: 2%;
  width: fit-content;
  font-size: 0.9rem;
  text-wrap: auto;
}

.toolOrItemForPostMarkHolder {
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 150px;
  height: 180px;
  font-size: 1rem;
  z-index: 2;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  overflow: hidden;
}
.toolOrItemForPostMarkHolder:hover {
  scale: 1.05;
}

.postAttachmentsHolder {
  position: relative;
  display: block;
  margin-bottom: 10px;
  height: auto;
  width: 100%;
}

.postAttachmentsTitle {
  position: relative;
  display: flex;
  height: auto;
  margin-top: 20px;
  margin-left: 2%;
  width: 98%;
  font-size: 0.9rem;
  letter-spacing: 2px;
}

.singlePOSTAttachmentHolder {
  position: relative;
  display: block;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  height: 160px;
  width: 150px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.singlePOSTAttachmentHolder:hover {
  scale: 1.05;
}

.mapProjectIcon {
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%; /* Makes the icon circular */
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
  box-shadow: 0px 0px 20px 2px rgb(92 94 255);
}

/* Custom Tooltip Container */
.customMapTooltipContainer {
  background-color: none !important;
  opacity: 1 !important;
  height: 250px !important;
  width: 450px !important;
  color: #333 !important;
  border-radius: 10px !important;
}

/* Tooltip Content */
.customMapTooltipContent  {
  position: relative;
  display: block;
  left: -10px;
  padding: 5px;
  height: 230px;
  width: 420px;
  border-radius: 5px;
}

.mapToolTipTitle {
  position: relative !important;
  display: flex !important;
  height: 30px;
  margin-left: 2%;
  width: 96%;
  font-family: 'Exo', sans-serif !important;
  font-size: 1.2rem !important;
  letter-spacing: 1px !important;
  color: #7a92a3 !important;
  overflow: hidden;
}

.mapTooltipHolderImage {
  position: relative;
  display: block;
  align-items: center;
  margin-top: 10px;
  width: 100%;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
}

.mapTooltipImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mapTooltipHolderText {
  margin-top: 10px;
  width: 100%;
  height: 80px;
  font-size: 0.8rem !important;
  overflow: hidden;
  background: none;
  font-family: 'Exo', sans-serif !important;
  font-size: 0.8rem;
}

.projectFeedMenuButtons {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 1%;
  padding-bottom: 1%;
  margin-left: 1px;
  width: 25%;
  height: 70%;
  font-size: 0.9rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
}

.projectFeedMenuButtons:hover {
  height: 90%;
}

.activeProjectFeedMenuButtons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none !important;
  width: 25%;
  height: 100%;
  font-size: 1rem;
  cursor: default !important;
}
.activeProjectFeedMenuButtons:hover {
  width: 25%;
  height: 100%;
  cursor: default !important;
}

.projectFeedMenuIcons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.projectFeedMenuTitles {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.MPostImageHolder {
  float: left;
  height: 40px;
  width: 40px;
}

.MPostimageContent {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

.memberPostUserHolder {
  position: relative;
  display: flex;
  flex-direction: column;
}

.memberPostUserName {
  position: relative;
  display: block;
  margin-left: 10px;
  font-size: 0.9rem;
}

.memberPostUserRole {
  position: relative;
  display: block;
  margin-left: 10px;
  font-size: 0.8rem;
}

.universalCard {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  font-size: 0.9rem;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
}

.uniButtonCenteredContent {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 20px;
  border-radius: 5px;
  cursor: pointer;
}

.universalBigButton {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.universalBigButton:hover {
  letter-spacing: 1px;
}

.singleFollowedProject {
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  width: 25%;
  margin-top: 20px;
  margin-left: 5%;
  border-radius: 10px;
}

.followedProjectName {
  position: relative;
  display: flex;
  height: auto;
  width: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
}

.feedProjectPhotoHolder {
  position: relative;
  display: block;
  margin-top: 5px;
  height: 100px;
  width: 100%;
  overflow: hidden;
}

.feedProjectImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#customizationDiv {
  position: absolute;
  top: 80px;
  left: 206px;
  height: auto;
  width: 400px;
  border-radius: 10px;
  visibility: hidden;
   z-index: 110;
}

.customizationHeader {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  padding-top: 15px;
  height: 35px;
  width: 100%;
  text-align: center;
  cursor: move;
  color: #fff;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  z-index: 2;
}

.hideCustomizationBody {
  position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 5px;
    left: 5px;
    height: 30px;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.7rem;
    border-radius: 15px;
    cursor: pointer;
    background-color: rgb(255 255 255 / 7%);
    color: #ffffff;
    z-index: 2;
    letter-spacing: 1px;
}

.closeEditOptionsButton {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 5px;
  right: 5px;
  z-index: 101;
  height: 30px;
  width: 30px;
  font-size: 1rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  user-select: none;
}
.closeEditOptionsButton:hover {
  transform: rotateZ(180deg) !important;
}

.echoMovediv {
  position: absolute;
  top: 15px;
  height: auto;
  width: 100%;
  text-align: center;
}

.customizationBody {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  top: 350px;
  padding-left: 4%;
  height: 0px;
  width: 95%;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-style: solid;
  border-width: 1px;
}

.customizeMediaPreviewHolder {
  position: relative;
  margin-left: 15px;
  height: 90px;
  width: 140px;
  border-radius: 10px;
  overflow: hidden;
}

.customBCKImageURLInput {
  position: relative;
  display: block;
  padding-left: 4%;
  padding-right: 4%;
  height: 100%;
  width: 92%;
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: 'Exo', sans-serif;
  font-size: 0.8rem;
  background: none;
  border: none;
  outline: none;
  border-radius: 20px;
}

.bckColorPickers {
  cursor: pointer;
}

.saveCustomizationButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 150px;
  font-size: 0.8rem;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}
.saveCustomizationButton:hover {
  letter-spacing: 1px;
}

.positionHeaderButtons {
  position: relative;
  display: flex;
  margin-right: 10px;
  height: 30px;
  width: 40px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}

.headerLeftIndication {
  position: relative;
  display: block;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 20%;
}
.headerTopIndication {
  position: relative;
  display: block;
  top: 0px;
  left: 0px;
  height: 20%;
  width: 100%;
}
.headerBottomIndication {
  position: relative;
  display: block;
  top: 80%;
  left: 0px;
  height: 20%;
  width: 100%;
}
.headerRightIndication {
  position: relative;
  display: block;
  top: 0px;
  left: 80%;
  height: 100%;
  width: 20%;
}

#stepsFrontPage {
  display: block;
  height: 100%;
}

#itemsFrontPage {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  height: 98%;
  width: 100%;
}

.postTitleSuggestionNotofication {
  position: relative;
  display: flex;
  height: auto;
  width: auto;
  margin-right: 20px;
  font-size: 0.8rem;
}

.postTitleSuggestionButton {
  position: relative;
  display: flex;
  margin-left: 20px;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 2px;
  font-size: 0.8rem;
  border-radius: 10px;
  cursor: pointer;
}

input, textarea {
  color: inherit; /* Inherit the text color from the parent, such as <body> */
}

input[type="range" i] {
  border: none !important; /* Removes the border */
  outline: none !important; /* Removes any focus outline */
  -webkit-appearance: none; /* Removes default styles in WebKit-based browsers */
  appearance: none; /* Removes default styles for other browsers */
  height: 2px;
  border-radius: 10px;
}

.purchasesHeader {
  position: relative;
  display: flex;
  flex-direction: column;
  top: 0px;
  left: 0px;
  display: flex;
  height: 10%;
  width: 100%;
  overflow: hidden;
  transform: scale(0.7) rotateX(-9deg) rotateY(-30deg);
  transition: all 0.4s ease-in-out;
}

.purchasesTitle {
  display: flex;
  position: relative;
  top: 0px;
  left: 0px;
  padding-top: 10px;
  height: 50%;
  width: 100%;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
}

.itemFilterButtons {
  position: relative;
  display: flex;
  height: auto;
  margin-right: 10px;
  margin-bottom: 20px;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 3px;
  font-size: 0.9rem;
  border-radius: 15px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.itemFilterButtons:hover {
  letter-spacing: 2px;
}

.blockBodyContent {
  position: relative;
  display: block;
  margin-left: 15%;
  height: 100%;
  width: 70%;
}

#ratingItemsContent {
  display: block;
  margin-top: 50px;
  height: 100%;
  width: 100%;
}

.acquiredItemHolder {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; /* Allows wrapping */
  height: 255px;
  width: 180px;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.appeareItem {
  position: static;
  top: 200px;
  left: 45%;
  scale: 0.5;
  opacity: 0;
  transform: rotateY(90deg);
}

.settleItem {
  position: relative;
  float: left;
  margin-bottom: 10px;
  margin-right: 2%;
  scale: 1;
  opacity: 1;
  transform: rotateY(0deg);
  transition: all 0.25s ease-in-out;
}

.echoItemCategory {
  position: relative;
  display: flex;
  margin-left: 5%;
  width: 90%;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
}

.echoNameOnItem {
  position: relative;
  display: flex;
  margin-left: 5%;
  width: 90%;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
}

.acquiredItemEchoRating {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: auto;
  width: 100%;
  font-size: 0.8rem;
}

.acquiredItemRatingHolder {
  position: absolute;
  display: flex;
  bottom: 1px;
  height: 20px;
  width: 100%;
}

.ratingIndicatorsNbuttonsHolder {
  position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
  height: 20px;
  width: 100%;
}

.positiveRatingIndicator {
  position: relative;
  display: flex;
  height: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: all 0.4s ease-in-out;
}

.ratingButtons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 20%;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.ratingButtons:hover {
  font-size: 1.2rem;
}

.ratedButton {
  background: none !important;
  color: #ffffff !important;
  scale: 1.5;
}

.selectedButton {
  margin-left: 2% !important;
  margin-right: 2% !important;
  scale: 1.2 !important;
}

.areaCategorySelection {
  display: block;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 5px;
  padding-bottom: 5px;
  height: auto;
  width: 100%;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  text-align: center;
  border: none !important;
  outline: none !important;
  color: #526373;
  background-color: #f6f8f9;
}
.areaCategorySelection:focus {
  outline: none !important;
  border: none !important;
}

.itemCategorySelection {
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  height: auto;
  width: auto;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  border: none !important;
  outline: none !important;
  border-radius: 20px;
}
.itemCategorySelection:focus {
  outline: none !important;
  border: none !important;
}

.noWrap {
  overflow: hidden;
  white-space: nowrap;
}

.filterUnsortedItemsButton {
  position: relative;
  display: flex;
  height: auto;
  margin-right: 10px;
  margin-bottom: 10px;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.8rem;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.filterUnsortedItemsButton:hover {
  letter-spacing: 1px;
}

.universalInfo {
  position: relative;
  display: flex;
  font-size: 0.9rem;
}

.universalSmallInfo {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  font-size: 0.8rem;
}

.universalBigInfo {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  font-size: 1.2rem;
}

.smallNoticeButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 3px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
}

.goFindNeedButton {
  position: relative;
  display: flex;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
.goFindNeedButton:hover {
  letter-spacing: 1px;
}

.magnifyingGlass {
  position: relative;
  left: 5px;
  width: 13px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.magnifyingGlass::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 3px;
  left: 7px;
  top: 12px;
  transform: translateY(0%) rotate(40deg);
}

.verticalEchoStepNameArea {
  position: relative;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  align-items: center;
  width: 5%;
  height: 0;
  white-space: nowrap;
  overflow: hidden;
}

.verticalText {
  writing-mode: vertical-rl;
  text-align: center;
  transform: rotate(180deg); /* Rotates text to read top to bottom */
  font-size: 1rem;
  opacity: 0.5;
}

.plannerSingleMilestoneHolder {
  position: relative;
  display: block;
  height: auto;
  width: 100%;
  animation: mildPlaceIn 0.8s forwards;
  transition: all 0.3s ease-in-out;
}

@keyframes mildPlaceIn {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

@keyframes swirlIn360 {
  0% {
    transform: rotateY(360deg) scale(0);
  }
  100% {
    transform: rotateY(0deg) scale(1);
  }
}

.goAway {
  animation: disappear 1.5s forwards;
}

@keyframes disappear {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  100% {
    transform: rotateY(360deg) scale(0);
  }
}

.startToGoAway {
  animation: startGoing 0.5s forwards;
}

@keyframes startGoing {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  100% {
    transform: rotateY(20deg) scale(0.9);
  }
}

@keyframes fromLetterSpacing5px {
  0% {
    opacity: 0;
    letter-spacing: 5px;
  }
  100% {
    opacity: 1;
    letter-spacing: inherit;
  }
}

.PmilestoneTopLeftPart {
  position: relative;
  display: flex;
  height: auto;
  width: 10%;
}

.completedMindicator {
  position: relative;
  display: flex;
  height: auto;
  width: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
}

.mFlagHolder {
  position: relative;
  display: flex;
  height: auto;
  width: 50%;
  justify-content: center;
  align-items: center;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

.PmilestoneTopRightPart {
  position: relative;
  display: flex;
  height: auto;
  width: 90%;
  border-left-style: solid;
  border-left-width: 2px;
}

.changeMilestoneButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  transition: all 0.2s ease-in-out;
}

.hoverLetterSpacingOne:hover {
  letter-spacing: 1px;
}

.singleMilestoneBody {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 60%;
  border-left-style: solid;
  border-left-width: 2px;
}

.singleMilestoneDateHolder {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 30% !important;
  font-size: 0.8rem !important;
}

/* The main circle */
.fillingClockwiseCircle {
  width: 0px;
  aspect-ratio: 1;
 /* border: 0px solid;*/
  border-radius: 50%;
  position: relative;
  transform: rotate(45deg);
}

/* The filling circle with animation */
.fillingClockwiseCircle::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 13px solid #7d9cf8;
  animation: fillingCircle4parts 3s forwards;
}

/* Keyframes to animate the filling */
@keyframes fillingCircle4parts {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}


.stepOutContainer {
  position: relative;
  display: flex;
  height: auto;
  width: 10%;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}


.grabStepButton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  padding: 7px;
  border-radius: 50%;
}

.singleStepInMilestone {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  height: auto;
  width: fit-content;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 15px;
  font-size: 0.8rem;
  animation: swirlIn360 0.5s forwards;
  transition: all 0.2s ease-in-out;
  border-radius: 15px;
}

.MstepMarkHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: 25px;
  font-size: 1rem;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
}



.popOutNHideAnim {
  animation: popOutandHide 0.2s forwards ease-in-out;
}

@keyframes popOutandHide {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.dragCopy {
  position: absolute !important;
  pointer-events: none !important; /* // So it doesn't interfere with other elements*/
  transition: all 0.3s ease-in-out;
  z-index: 99;
}

.backUpAndComeBack {
  animation: mildBackUpAndComeBack 0.5s forwards;
}

.milestoneDateInput {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  z-index: 2;
  opacity: 0;
}

.milestoneUserFriendlyDate {
  position: relative;
  display: flex;
  margin-top: 15px;
  font-size: 0.8rem;
}

.milestoneCompletionHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  margin-bottom: 100px;
}

.milestoneMediaPreviewHolder {
  position: relative;
  display: flex;
  height: 100px;
  width: 200px;
  margin-left: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.saveMilestoneButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 15px;
  font-size: 0.8rem;
  transition: all 0.2s ease-in-out;
  letter-spacing: 1px;
}

.saveMilestoneButton:hover {
  letter-spacing: 2px;
}



.PPSingleSponsorHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 10px;
  animation: swirlIn360 1s forwards;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
}


.PPmilestoneUserFriendlyDate {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  margin-left: 17%;
  width: auto;
  overflow: hidden;
  font-size: 0.8rem;
}

.PPmFlagHolder {
  position: relative;
  display: flex;
  height: auto;
  width: 50%;
  justify-content: center;
  align-items: center;
}

.PPmilestoneTopRightPart {
  position: relative;
  display: flex;
  align-items: center;
  height: auto;
  width: 90%;
}

.PsponsorTopLeftPart {
  position: relative;
  display: flex;
  align-items: center;
  height: auto;
  width: 10%;
}

.sponsorLogoHolder {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  max-height: 70px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
}

.sponsorLogoImg {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
}

.externalLink {
  text-decoration: none;
  margin: 0 4px;
  word-break: break-all;
  cursor: pointer;
  transition: color 0.2s ease;
}

.link-preview-container {
  display: flex;
  flex-direction: column;
  padding: 8px;
  margin-top: 8px;
  border-radius: 8px;
  max-width: 100%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.linkPreviewAnchor {
  text-decoration: none;
}

.linkPreviewImageHolder {
  width: 100%;
  max-height: 250px;
  border-radius: 10px;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-title {
  margin-top: 5px;
  text-decoration: none;
}

.preview-description {
  font-size: 14px;
  margin-top: 5px;
  text-decoration: none;
}

.singleEmojiHolder {
  position: relative;
  display: flex;
  margin-left: 10px;
  height: 20px;
  width: 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.singleEmojiHolder:hover {
  scale: 2.5;
}

.messagesMediaHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  height: auto;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

#projectDescriptionTextInput {
  position: relative;
  display: block;
  height: 80%;
  width: 95%;
  padding-top: 5px;
  padding-left: 2%;
  padding-right: 5%;
  font-family: 'Exo', sans-serif;
  font-size: 0.9rem;
  border: none;
  outline: none;
}

.SMimageContainer {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.messageMediaPreviewImageHolder {
  position: relative;
  display: block;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  height: 70px;
  width: 100px;
  border-radius: 10px;
  overflow: hidden;
}

.appearMediaAnimation {
  animation: appearMedia 0.5s forwards;
}

@keyframes appearMedia {
  0% {
    opacity: 0;
    scale: 0.5;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

.disappearMediaAnimation {
  animation: disappearMedia 0.5s ease-in-out forwards;
}

@keyframes disappearMedia {
  0% {
    opacity: 1;
    transform: rotateY(0deg) rotateZ(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotateY(-60deg) rotateZ(-5deg) scale(0.8);
  }
}

.messageAttachmentHolder {
  position: absolute;
  top:0px;
  left: 0px;
  height: 100%;
  width: 100%;
  animation: appearMedia 0.5s forwards;
}

.messageAttachmentUserHolder {
  position: absolute;
  top:0px;
  right: 0px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  overflow: hidden;
}

#workflowPageContent {
  position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  flex-direction: row;
  transition: all 0.5s ease-in-out;
  transform-style: preserve-3d;
}

#workflowStatsHolder {
  position: absolute;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  scale: 0;
  opacity: 0;
  transition: all 0.7s ease-in-out;
}

.stepStatsHolder {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  overflow-x: auto;
}

.guagesHolder {
  position: relative;
  display: flex;
  justify-content: center;
  height: 10%;
  width: max-content;
}

.projectGuagesHolder {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 2%;
  margin-bottom: 1%;
  height: auto;
  width: 100%;
}

#PstepsGuageChartContainer {
  position: relative;
  display: flex;
  height: auto;
  width: 100%;
  flex-direction: row;
  justify-content: space-evenly;
  z-index: 3;
}

#stepsProgressBarHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 90%;
  width: max-content;
}

#ProjectStepsProgressBarHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 90%;
  width: 100%;
}

/* for steps guages */
#stepsGuageChartContainer {
  position: relative;
  display: block;
  height: 50px;
  width: max-content;
  padding-top: 10px;
}

.singleGaugeContainer {
  position: relative;
  display: block;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  width: 50px;
  height: 50px;
  font-size: 0.8rem;
  color: #ffffff;
  transition: all 0.5s ease-in-out;
}
.singleGaugeContainer:hover {
  scale: 1.5;
}

.stepProgressContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 0.9rem;
  color: white;
  transition: all 0.3s ease-in-out;
  z-index: 3;
}

.stepProgressContainer:hover .stepDetailsTooltip {
  visibility: visible;
  opacity: 1;
  scale: 1;
  z-index: 3;
}

/* for steps BAR CHARTS in client subProject access */
.stepsBarChartContainer {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: max-content;
  height: 98%;
}

#PstepsBarChartContainer {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  width: 100%;
  height: 98%;
}

.y-axis-labels {
  position: absolute;
  left: 10px;
  width: auto;
  font-size: 0.7rem;
}

.bar {
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 45px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 0.8rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  height: 0;
  transition: all 1s ease-in-out;
  white-space: nowrap;
  overflow: visible;
  z-index: 3;
}
.bar:hover {
  scale: 1.05;
}
.bar:hover .stepDetailsBarToolTip {
  visibility: visible;
  opacity: 1;
  scale: 1.3;
}

.barDataContainer {
 position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: fit-content;
  padding-left: 7px;
  padding-right: 10px;
  padding-bottom: 5px;
  border-radius: 10px;
  font-size: 0.8rem;
  z-index: 2;
}

.todayBarChartline {
  position: absolute;
  font-size: 0.9rem;
  padding-left: 10px;
  bottom: 0px;
  width: 100%;
  left: 0px;
  z-index: 0;
}

.timerIcon {
  font-size: 2rem;
}

.subProjectConnectorElement {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  transform: rotateY(-90deg);
  transition: all 0.5s ease-in-out;
}

.elementsConnectorLine {
  position: relative;
  display: flex;
  margin-top: -1px;
  height: 0px;
  width: 0px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  transition: all 0.2s ease-in-out;
}

.subProjectConnectorButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-weight: bold;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}
.subProjectConnectorButton:hover {
  transform: rotateZ(-60deg) !important;
}

.subProjectActiveConnectorButton {
  animation: blinkingAnimation 1s infinite;
  transform: rotateZ(-60deg) !important;
}
@keyframes blinkingAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fastBlinkingAnimation {
  animation: blinkingAnimationKeys 0.07s infinite none;
}
@keyframes blinkingAnimationKeys {
  0%, 49%  { opacity: 0; }
  50%,100% { opacity: 1; }
}

.normalBlinkingAnimation {
  animation: blinkingAnimation 1.3s infinite none;
}





.absoluteCenteredDiv {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%); /* Moves the div back by half its size */
  height: 0px;
  width: 70%;
  border-radius: 15px;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}


.circularProgressHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

.progressInfo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
  font-size: 0.8rem;
}

.detectedLink {
  cursor:alias;
  font-size: 0.8rem;
  letter-spacing: 1px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}




.simpleBlockDiv {
  position: relative;
  display: block;
  height: auto;
  width: auto;
}


.rotateClockwiseOnce {
  animation: rotateClockwise 1s forwards;
}

@keyframes rotateClockwise {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.customizeDeleteCurrentBCKbutton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.dragover {
    outline: dashed 2px #7a8994 !important;
}

.blurTextAndBack {
  animation: blurTextAndBackKeys 0.4s forwards ease-in-out;
}
@keyframes blurTextAndBackKeys {
  0% {
    filter: blur(0px);
  }
  50% {
    filter: blur(2px);
  }
  100% {
    filter: blur(0px);
  }
}

/* ------ MAP TARGETING --------- */
.mapPointerCover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  z-index: 0;
}

.targetingCircleCountryFlagHolder {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 13%;
  left: 0%;
  height: auto;
  width: 100%;
}

.targetingCircleCountryName {
  position: absolute;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  top: 34%;
  left: 5%;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 90%;
  white-space: nowrap;
  border-radius: 10px;
}

.targetingCountryFlag {
  position: relative;
  display: block;
  height: 30px;
  width: auto;
  animation: waveFlagKeys 2s ease-in-out infinite;
}
@keyframes waveFlagKeys {
  0% {
    transform: rotateX(0deg) skewY(0deg);
  }
  30% {
    transform: rotateX(15deg) skewY(-5deg);
  }
  70% {
    transform: rotateX(20deg) skewY(5deg);
  }
  100% {
    transform: rotateX(0deg) skewY(0deg);
  }
}
.targetingCountryFlag img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mapPointerCenterCircle {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centers inside parent */
  transition: all 0.2s ease-in-out;
}

.mapXYpointerCoordinates {
  font-size: 0.72rem;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}

.mapXpointerCoordPosition {
  position: absolute;
  top: 7%;
  left: 0;
  height: auto;
  width: 100%;
  text-align: center;
}

.mapYpointerCoordPosition {
  position: absolute;
  top: 45%;
  left: 5%;
  height: auto;
  width: auto;
}

.mapPointerZoomLevel {
  position: absolute;
  top: 87%;
  left: 0;
  height: auto;
  width: 100%;
  font-size: 0.75rem !important;
  text-align: center;
  opacity: 1 !important;
  z-index: 2;
}



.ring-progress {
  z-index: 3;
}

.mapTargetRingZoomProgress
 {
  z-index: 3;
 }



/* ------ end map targeting ----- */

.coverImageContentBorder10 {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.alreadyFocusedAnimation {
  animation: alreadyFocusedKeys 0.5s forwards;
}
@keyframes alreadyFocusedKeys {
  0% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 0.7;
    scale: 0.95;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

/* Active states */
.rotatingButton.rotatingButtonState-front  { transform: rotateX(0deg); }
.rotatingButton.rotatingButtonState-top    { transform: rotateX(-90deg); }
.rotatingButton.rotatingButtonState-bottom { transform: rotateX(90deg); }
.rotatingButton.rotatingButtonState-back   { transform: rotateX(180deg); }

.cubeTopSide {
  opacity: 0 !important;
  transform: rotateX(90deg);
  margin-top: -15%;
  scale: 0.3;
  visibility: hidden;
}

.cubeBottomSide {
  opacity: 0 !important;
  transform: rotateX(-90deg);
  margin-top: 15%;
  scale: 0.5;
  visibility: hidden;
}

.cubeLeftSide {
  transform: rotateY(-90deg);
  margin-left: -50%;
  scale: 0.5;
  opacity: 0 !important;
  visibility: hidden;
}

.cubeRightSide {
  transform: rotateY(90deg);
  margin-left: 50%;
  scale: 0.5;
  opacity: 0 !important;
  visibility: hidden;
}

.formCharCounter {
  position: relative;
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
}

.animatedWord {
    display: inline-flex;
}

.animatedLetter {
    display: inline-block;
    opacity: 0;
    transform: scale(2.5);
    filter: blur(5px);

    animation: letterIn 0.2s ease-out forwards;
    animation-delay: calc(var(--i) * 0.08s);
}

@keyframes letterIn {
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

.QRcodeHOLDER {
  height: 250px;
  width: 250px;
}