.explorerThemeCardStyle {
  border-style: solid;
  border-top-width: 2px;
  border-left-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 1px;
}

.explorerThemeActiveCardStyle {
  border-style: solid;
  border-width: 2px;
}

#explorerMapPointerCircle {
    position: fixed;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 10001;
}

#explorerWorldMapHolder {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transition: all 1s ease-in-out;
  animation: explorerMapAppearAnim 1s ease-in-out forwards;
}
@keyframes explorerMapAppearAnim {
    0% {
      opacity: 0;
      scale: 0.9;
    }
    100% {
      opacity: 1;
      scale: 1;
    }
}

#explorerWorldMapContent {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transition: all 1s ease-in-out;
}

#explorerHeaderDiv {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: -100px;
  width: 20%;
  height: 200px;
  transition: all 0.5s ease-in-out;
  transform-style: preserve-3d;
  perspective: 1600px;
  border-style: solid;
  border-width: 2px;
  border-bottom-right-radius: 15px;
  opacity: 0;
  overflow: hidden;
  z-index: 9999;
  animation: explorerHeaderHolderAnim 1.2s ease-in-out 1s forwards;
}
@keyframes explorerHeaderHolderAnim {
    0% {
      opacity: 0;
      margin-top: -100px;
    }
    100% {
      opacity: 1;
      margin-top: 0px;
    }
}

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

.explorerBCKGear1Holder {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 110px;
  height: 110px;
  -webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));
}

.explorerBCKGear2Holder {
  position: absolute;
  top: 100px;
  left: 120px;
  width: 55px;
  height: 55px;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
}

.explorerBCKGear3Holder {
  position: absolute;
  top: 50px;
  left: 170px;
  width: 90px;
  height: 90px;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));
}

.explorerBCKGear4Holder {
  position: absolute;
  top: 40px;
  left: 255px;
  width: 50px;
  height: 50px;
}

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

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

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

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

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

#explorerExitButtonHolder {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  z-index: 3;
}

#explorerProductServiceSelectorHolder {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  top: 110px;
  height: 40px;
  border-radius: 25px;
  border-style: solid;
  border-width: 1px;
  --explorer-filter-menu-buttons-selector-shadow: none;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  z-index: 3;
  animation: bringInFilterButtonsMenuAnim 1.2s ease-in-out 1.8s forwards;
}
@keyframes bringInFilterButtonsMenuAnim {
    0% {
      top: 110px;
      opacity: 0;
      transform: rotateX(-270deg);
      left: 15%;
      width: 70%;
    }
    1% {
      opacity: 1;
      transform: rotateX(-270deg);
      left: 15%;
      width: 70%;
    }
    50% {
      opacity: 1;
      top: 60px;
      left: 15%;
      width: 70%;
      scale: 1;
      transform: rotateX(10deg);
    }
    70% {
      opacity: 1;
      top: 70px;
      left: 15%;
      width: 70%;
      transform: rotateX(0deg);
    }
    85% {
      opacity: 1;
      top: 70px;
      left: 15%;
      width: 70%;
      transform: rotateX(0deg);
    }
    100% {
      opacity: 1;
      top: 70px;
      left: 10%;
      width: 80%;
      box-shadow: var(--explorer-filter-menu-buttons-selector-shadow);
    }
}

/* buttons */
.explorerSearchIcon {
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  scale: 0.7;
}

#explorerProductFilterButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  width: 100%;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

#explorerServiceFilterButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  width: 100%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.explorerFilterButtonsNeutral {
  font-size: 0.8rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  -webkit-box-reflect: var(--explorer-filter-menu-webkit-box-reflect);
  border-style: solid;
  border-width: 1px;
}
.explorerFilterButtonsNeutral:hover {
  scale: 1.1;
}

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

#explorerFilterCategoriesHolder {
  position: absolute;
  top: 180px;
  left: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 3;
}

#openCloseCategoriesButton {
  display: none;
  cursor: pointer;
}

#explorerQueryLeveHolder {
  position: absolute;
  display: block;
  flex-direction: column;
  top: -5px; /* to hide border */
  left: 20%;
  margin-left: 6px; /* to make up for the border width 2px */
  height: 0%;
  width: 0%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: all 0.7s ease-in-out;
  overflow: hidden;
  z-index: 10000;
  opacity: 0;
}


.explorerQueryLeveHolderFullAnim {
  animation: explorerQueryLeveHolderFullKeys 1.5s ease-in-out 3s forwards;
}
@keyframes explorerQueryLeveHolderFullKeys {
  0% {
    opacity: 1;
    top: -5px;
    width: 0%;
    height: 0%;
  }
  10% {
    opacity: 1;
    top: 0px;
    width: 0%;
    height: 12%;
  }
  60% {
    opacity: 1;
    top: 0px;
    width: 20%;
    height: 12%;
  }
  100% {
    opacity: 1;
    top: 0px;
    width: 20%;
    height: 200px;
  }
}

.minimizeExplorerQueryLeveHolder {
  animation: minimizeExplorerQueryLeveHolderKeys 0.5s ease-in-out forwards;
}
@keyframes minimizeExplorerQueryLeveHolderKeys {
    0% {
      opacity: 1;
      top: 0px;
      width: 20%;
      height: 12%;
    }
    90% {
      margin-top: -80px;
      opacity: 1;
      top: 0px;
      width: 20%;
      height: 12%;
    }
    100% {
      margin-top: -75px;
      opacity: 1;
      top: 0px;
      width: 20%;
      height: 12%;
    }
}

.explorerQueryLeveHolderFromMinimizedToDefaultAnim {
  animation: explorerQueryLeveHolderFromMinimizedToDefaultKeys 0.5s ease-in-out forwards;
}
@keyframes explorerQueryLeveHolderFromMinimizedToDefaultKeys {
    0% {
      margin-top: -75px;
      opacity: 1;
      top: 0px;
      width: 20%;
      height: 12%;
    }
    90% {
      margin-top: 5px;
      opacity: 1;
      top: 0px;
      width: 20%;
      height: 12%;
    }
    100% {
      margin-top: 0px;
      opacity: 1;
      top: 0px;
      width: 20%;
      height: 12%;
    }
}

.logoCardExpandedForMiniMenu {
  animation: logoCardExpandForMiniMenuKeys 0.5s ease-in-out forwards;
}
@keyframes logoCardExpandForMiniMenuKeys {
    0% {
      opacity: 1;
      top: 0;
      width: 20%;
      height: 12%;
    }
    90% {
      opacity: 1;
      top: 0;
      width: 20%;
      height: 210px;
    }
    100% {
      opacity: 1;
      top: 0;
      width: 20%;
      height: 200px;
    }
}

.logoCardHideMiniMenu {
  animation: logoCardHideMiniMenuKeys 0.5s ease-in-out forwards;
}
@keyframes logoCardHideMiniMenuKeys {
    0% {
      opacity: 1;
      top: 0;
      width: 20%;
      height: 200px;
    }
    90% {
      opacity: 1;
      top: 0;
      width: 20%;
      height: 11%;
    }
    100% {
      opacity: 1;
      top: 0;
      width: 20%;
      height: 12%;
    }
}

.explorerGearImageHolderForLogo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  height: 60px;
  width: 60px;
}

.echoPLasLogo {
  font-size: 1.4rem;
  font-weight: bold;
  background-image: url("../../images/siteUsage/color_explosion.png");
  background-size: 0%;
  background-position: center;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: repeat-x;
  text-shadow: 0 1px 1px rgb(6 48 93 / 10%);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  animation: explorerLogoAnim 3s ease-in-out 3.5s forwards;
  letter-spacing: 5px;
}
@keyframes explorerLogoAnim {
    0% {
      opacity: 0;
      background-size: 50%;
    }
    10% {
      opacity: 1;
      background-size: 50%;
    }
    100% {
      opacity: 1;
      background-size: 150%;
    }
}

#explorerLogoEchoCustomManufacturing {
  position: relative;
  display: flex;
  top: 7px;
  margin-left: 10%;
  height: auto;
  width: 90%;
  font-size: 0.8rem;
  letter-spacing: 5px;
  white-space: nowrap;
}

/* add bussines to map */

#explorerPlaceBusinessToMapCard {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin-top: 0px; /* to get back after animation. So that animation can not lock state */
  top: 0;
  left: 40%;
  margin-left: 12px; /* to make up for the border width 2px for each div */
  height: 12%;
  width: 20%;
  opacity: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: all 0.3s ease-in-out;
  user-select: none;
  overflow: hidden;
  z-index: 10000;
}

.explorerPlaceBusinessStartCardAnim {
  animation: explorerPlaceAddBusinessCardKeys 0.5s ease-in-out 3.5s forwards;
}
@keyframes explorerPlaceAddBusinessCardKeys {
    0% {
      margin-top: -100px;
      opacity: 0;
    }
    100% {
      margin-top: 0px;
      opacity: 1;
    }
}

.explorerNewPostCardFromDefaultToMinimalAnim {
  animation: explorerNewPostCardFromDefaultToMinimalKeys 0.5s ease-in-out forwards;
}
@keyframes explorerNewPostCardFromDefaultToMinimalKeys {
    0% {
      opacity: 1;
      height: 12%;
      width: 20%;
    }
    80% {
      opacity: 1;
      height: 30px;
      width: 30px;
    }
    90% {
      opacity: 1;
      height: 40px;
      width: 40px;
      margin-left: 20px;
      border-radius: 20px;
    }
    100% {
      opacity: 1;
      height: 40px;
      width: 40px;
      margin-left: 20px;
      border-radius: 50%;
    }
}

.explorerNewPostCardFromDefaultToExpandedAnim {
  animation: explorerNewPostCardFromDefaultToExpandedKeys 0.7s ease-in-out forwards;
}
@keyframes explorerNewPostCardFromDefaultToExpandedKeys {
    0% {
      opacity: 1;
      height: 12%;
      width: 20%;
    }
    80% {
      opacity: 1;
      height: 98%;
      width: 460px;
    }
    100% {
      opacity: 1;
      height: 97%;
      width: 450px;
    }
}

.explorerNewPostCardFromExpandedToDefaultAnim {
  animation: explorerNewPostCardFromExpandedToDefaultKeys 0.5s ease-in-out forwards;
}
@keyframes explorerNewPostCardFromExpandedToDefaultKeys {
    0% {
      opacity: 1;
      height: 97%;
      width: 450px;
    }
    80% {
      opacity: 1;
      height: 11%;
      width: 19%;
    }
    100% {
      opacity: 1;
      height: 12%;
      width: 20%;
    }
}

.explorerNewPostCardFromExpandedToMinimalAnim {
  animation: explorerNewPostCardFromExpandedToMinimalKeys 1s ease-in-out forwards;
}
@keyframes explorerNewPostCardFromExpandedToMinimalKeys {
    0% {
      opacity: 1;
      height: 97%;
      width: 450px;
    }
    50% {
      opacity: 1;
      height: 12%;
      width: 450px;
    }
    80% {
      opacity: 1;
      height: 30px;
      width: 30px;
      border-radius: 20px;
    }
    100% {
      opacity: 1;
      height: 40px;
      width: 40px;
      margin-left: 20px;
      border-radius: 50%;
    }
}

.explorerNewPostCardFromMinimalToDefaultAnim {
  animation: explorerNewPostCardFromMinimalToDefaultKeys 0.5s ease-in-out forwards;
}
@keyframes explorerNewPostCardFromMinimalToDefaultKeys {
    0% {
      opacity: 1;
      height: 40px;
      width: 40px;
      margin-left: 20px;
      border-radius: 50%;
    }
    80% {
      opacity: 1;
      height: 13%;
      width: 21%;
    }
    100% {
      opacity: 1;
      height: 12%;
      width: 20%;
    }
}

.explorerNewPostCardFromMinimalToExpandedAnim {
   animation: explorerNewPostCardFromMinimalToExpandedKeys 1s ease-in-out forwards;
}
@keyframes explorerNewPostCardFromMinimalToExpandedKeys {
    0% {
      opacity: 1;
      height: 40px;
      width: 40px;
      margin-left: 20px;
      border-radius: 50%;
    }
    40% {
      opacity: 1;
      height: 12%;
      width: 20%;
      margin-left: 20px;
      border-radius: 10%;
    }
    80% {
      opacity: 1;
      height: 98%;
      width: 460px;
    }
    100% {
      opacity: 1;
      height: 97%;
      width: 450px;
    }
}

.explorerBCARDfromDEFAULTtoMIN {
  animation: explorerNewPostCardFromDefaultToMinimalKeys 0.5s ease-in-out forwards;
}

.explorerBCARDfromSTAGE2toMIN {
  animation: explorerBCARDfromSTAGE2toMINkeys 0.7s ease-in-out forwards;
}
@keyframes explorerBCARDfromSTAGE2toMINkeys {
    0% {
      height: 17%;
      width: 20%;
      opacity: 1;
      border-radius: 10px;
    }
    55% {
      height: 40px;
      width: 20%;
      opacity: 1;
      border-radius: 20px;
    }
    100% {
      height: 40px;
      width: 40px;
      margin-left: 20px;
      border-radius: 50%;
      opacity: 1;
    }
}

.explorerBCARDfromSTAGE3toMIN {
  animation: explorerBCARDfromSTAGE3toMINkeys 0.4s ease-in-out forwards;
}
@keyframes explorerBCARDfromSTAGE3toMINkeys {
    0% {
      height: 60%;
      width: 30%;
      opacity: 1;
      border-radius: 10px;
    }
    90% {
      border-radius: 20px;
    }
    100% {
      height: 40px;
      width: 40px;
      opacity: 1;
      margin-left: 20px;
      border-radius: 50%;
    }
}

.explorerBCARDfromMINtoDEFAULT {
  animation: explorerNewPostCardFromMinimalToDefaultKeys 0.5s ease-in-out forwards;
}

.explorerBCARDfromMINtoSTAGE2 {
  animation: explorerBCARDfromMINtoSTAGE2keys 0.7s ease-in-out forwards;
}
@keyframes explorerBCARDfromMINtoSTAGE2keys {
  0% {
    height: 40px;
    width: 40px;
    opacity: 1;
  }
  30% {
    height: 40px;
    width: 20%;
    opacity: 1;
  }
  90% {
    height: 210px;
    width: 20%;
    opacity: 1;
  }
  100% {
    height: 200px;
    width: 20%;
    opacity: 1;
  }
}

.explorerBCARDfromMINtoSTAGE3 {
  animation: explorerBCARDfromMINtoSTAGE3keys 0.6s ease-in-out forwards;
}
@keyframes explorerBCARDfromMINtoSTAGE3keys {
  0% {
    height: 40px;
    width: 40px;
    opacity: 1;
  }
  100% {
    height: 60%;
    width: 30%;
    opacity: 1;
  }
}


.explorerPlaceBusinessExpandToSecondStage {
  animation: ADDBcardToSecondStageKeys 0.5s ease-in-out forwards;
}
@keyframes ADDBcardToSecondStageKeys {
  0% {
    height: 12%;
    width: 20%;
    opacity: 1;
  }
  90% {
    height: 205px;
    width: 20%;
    opacity: 1;
  }
  100% {
    height: 200px;
    width: 20%;
    opacity: 1;
  }
}

.explorerPlaceBusinessSecondStageToDefault {
  animation: ADDBcardFromSecondStageToDefaultKEYS 0.5s ease-in-out forwards;
}
@keyframes ADDBcardFromSecondStageToDefaultKEYS {
    0% {
      height: 200px;
      width: 20%;
      opacity: 1;
    }
    80% {
      height: 11%;
      width: 20%;
      opacity: 1;
    }
    100% {
      height: 12%;
      width: 20%;
      opacity: 1;
    }
}

.explorerPlaceBusinessExpandToThirdStage {
  animation: ADDBcardToThirdStageKeys 0.6s ease-in-out forwards;
}
@keyframes ADDBcardToThirdStageKeys {
  0% {
    height: 17%;
    width: 20%;
    opacity: 1;
  }
  90% {
    height: 62%;
    width: 30%;
    opacity: 1;
  }
  100% {
    height: 60%;
    width: 30%;
    opacity: 1;
  }
}

.explorerPlaceBusinessThirdStageToDefault {
  animation: ADDBcardFromThirdStageToDefaultKEYS 0.5s ease-in-out forwards;
}
@keyframes ADDBcardFromThirdStageToDefaultKEYS {
    0% {
      height: 60%;
      width: 30%;
      opacity: 1;
    }
    80% {
      height: 11%;
      width: 20%;
      opacity: 1;
    }
    100% {
      height: 12%;
      width: 20%;
      opacity: 1;
    }
}


.hideElement {
  transition: all 0.5s ease-in-out;
  border-radius: 50%;
  height: 0px !important;
  width: 0px !important;
  display: none !important;
}


#explorerAddToMapMapIconHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1%;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transition: all 0.7s ease-in-out;
  cursor: pointer;
}

.explorerAddBusinessToMapTitle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
  height: auto;
  width: auto;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  letter-spacing: 1px;
}

#explorerAddBusinessBody {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

#explorerAddBusinessButton {
  transition: all 0.2s ease-in-out;
}

.explorerAddBusinessButtonFirstState {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-left: 60px;
  height: 40px;
  width: 120px;
  opacity: 1;
  font-size: 0.9rem;
  letter-spacing: 3px;
  border-radius: 25px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
  user-select: none;
  cursor: pointer;
}

.explorerBringInAddBussinesButtonAnim {
  animation: explorerBringInAddBussinesButtonKeys 1s ease-in-out forwards;
}
@keyframes explorerBringInAddBussinesButtonKeys {
    0% {
      margin-top: 10px;
      margin-left: 25px;
      opacity: 0;
      width: 100px;
    }
    /* keep opacity 0 until here */
    49% {
      margin-top: 10px;
      margin-left: 25px;
      opacity: 0;
      width: 100px;
    }
    50% {
      margin-top: 10px;
      margin-left: 25px;
      opacity: 1;
      width: 100px;
    }
    70% {
      margin-top: 10px;
      margin-left: 60px;
      opacity: 1;
      width: 120px;
    }
    100% {
      margin-top: 15px;
      margin-left: 60px;
      opacity: 1;
      width: 120px;
    }
}

.explorerButtonSecondState {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-left: 60px;
  height: 40px;
  width: 100px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border-radius: 25px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
  user-select: none;
  cursor: pointer;
}

#explorerEchoPinpointLocation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-top: 20px;
  width: 90%;
  margin-left: 5%;
  font-size: 0.9rem;
  animation: blinkingAnimation 1.5s ease-in-out infinite;
}

.explorerSetupLatLngInfo {
  position: relative;
  display: flex;
  font-size: 0.8rem;
}

#explorerSetupCountryImageHolder {
  position: relative;
  display: block;
  height: auto;
  width: 40px;
  border-radius: 5px;
  overflow: hidden;
}

#explorerSetupCountryName {
  position: relative;
  display: flex;
  margin-left: 15px;
  height: auto;
  width: auto;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.explorerSetupBusinessMarkDiv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 60px;
  border-radius: 10px;
}

.explorerSetupBusinessMarkTitle {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 20px;
  height: 50px;
  width: auto;
  font-size: 1rem;
}

#explorerSetupBusinessNameInput {
  position: relative;
  display: block;
  margin-left: 80px;
  height: auto;
  width: 70%;
  padding-top: 15px;
  font-family: 'Exo', sans-serif;
  font-size: 1rem;
  border-style: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  outline: none;
}

.explorerSetupSubmitBusinessButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  height: auto;
  width: auto;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 1rem;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}



/* contributors */

#explorerContributorsCard {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 10%;
  right: -10px;
  height: 50px;
  width: 0px;
  border-radius: 25px;
  overflow: hidden;
  z-index: 10000;
  user-select: none;
}
.explorerContributorsStartCardAnim {
  animation: startRightPositionedCardKeys 0.7s ease-in-out 3.5s forwards;
}
@keyframes startRightPositionedCardKeys {
    0% {
      width: 0;
    }
    100% {
      right: 20px;
      width: 250px;
    }
}

.minimizeRightPositionedCardFromDEFAULTanim {
  animation: minimizeRightPositionedCardFromDEFAULTkeys 0.3s ease-in-out forwards;
}
@keyframes minimizeRightPositionedCardFromDEFAULTkeys {
    0% {
      right: 20px;
      width: 250px;
      height: 50px;
    }
    100% {
      right: 20px;
      width: 40px;
      height: 40px;
    }
}

.minimizeContributorsFromEXPANDEDanim {
  animation: minimizeContributorsFromEXPANDEDkeys 2.5s ease-in-out forwards;
}
@keyframes minimizeContributorsFromEXPANDEDkeys {
    0% {
      top: 6%;
      right: 20%;
      width: 500px;
      transform: rotateY(360deg);
      height: 93%;
    }
    25% {
      /* reduce height to 40px */
      top: 7%;
      right: 20%;
      width: 500px;
      transform: rotateY(360deg);
      height: 40px;
    }
    40% {
      /* reduce width to 40px */
      top: 7%;
      right: 20%;
      width: 40px;
      transform: rotateY(0deg);
      height: 40px;
      scale: 0.5;
    }
    60% {
      top: 10%;
      right: 20%;
      width: 40px;
      height: 40px;
      scale: 1;
    }
    80% {
      right: 20px;
      width: 40px;
      height: 40px;
      scale: 1.7;
    }
    100% {
      right: 20px;
      width: 40px;
      height: 40px;
      scale: 1;
    }
}

.expandContributorsFromDEFAULTanim {
  animation: expandContributorsFromDEFAULTkeys 2s ease-in-out forwards;
}
@keyframes expandContributorsFromDEFAULTkeys {
    0% {
      top: 10%;
      right: 20px;
      width: 250px;
      height: 50px;
    }
    30% {
      top: 6%;
      right: 20%;
      width: 250px;
      scale: 0.2;
      transform: rotateY(360deg);
      height: 50px;
    }
    40% {
      top: 6%;
      right: 20%;
      width: 250px;
      scale: 1.1;
      transform: rotateY(360deg);
      height: 50px;
    }
    50% {
      top: 6%;
      right: 20%;
      width: 250px;
      scale: 1;
      transform: rotateY(360deg);
      height: 50px;
    }
    96% {
      top: 6%;
      right: 20%;
      width: 500px;
      transform: rotateY(360deg);
      height: 94%;
    }
    100% {
      top: 6%;
      right: 20%;
      width: 500px;
      transform: rotateY(360deg);
      height: 93%;
    }
}

.expandContributorsFromMINIMIZEDanim {
  animation: expandContributorsFromMINIMIZEDkeys 2s ease-in-out forwards;
}
@keyframes expandContributorsFromMINIMIZEDkeys {
    0% {
      right: 20px;
      width: 40px;
      height: 40px;
      scale: 1;
    }
    30% {
      top: 6%;
      right: 20%;
      width: 250px;
      scale: 0.2;
      transform: rotateY(360deg);
      height: 50px;
    }
    40% {
      top: 6%;
      right: 20%;
      width: 250px;
      scale: 1.1;
      transform: rotateY(360deg);
      height: 50px;
    }
    50% {
      top: 6%;
      right: 20%;
      width: 250px;
      scale: 1;
      transform: rotateY(360deg);
      height: 50px;
    }
    96% {
      top: 6%;
      right: 20%;
      width: 500px;
      transform: rotateY(360deg);
      height: 94%;
    }
    100% {
      top: 6%;
      right: 20%;
      width: 500px;
      transform: rotateY(360deg);
      height: 93%;
    }
}

#explorerContributorsIconHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 2%;
  height: 40px;
  width: 40px;
  overflow: hidden;
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  user-select: none;
}
#explorerContributorsIconHolder:hover {
  transform: rotateZ(360deg);
}

.explorerContributorsTitle {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 10px;
  height: 50px;
  width: auto;
  font-size: 0.8rem;
  transition: all 0.1s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 2px;
  cursor: pointer;
  user-select: none;
}

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

.explorerMiniMenuCloseButton {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 60px;
  height: 35px;
  width: 35px;
  font-size: 0.9rem;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  z-index: 2;
  transform: rotateZ(90deg);
  user-select: none;
}


#explorerContributorsBody {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  user-select: none;
}

.singleContributorHolder {
  position: relative;
  display: flex;
  height: auto;
  width: 98%;
  margin-top: 2px;
  margin-bottom: 2px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  user-select: none;
}
.singleContributorAppearingAnim {
  animation: singleContributorAppearingKeys 0.3s ease-in-out forwards;
}
@keyframes singleContributorAppearingKeys {
    0% {
      opacity: 0;
      width: 80%;
    }
    90% {
      opacity: 1;
      width: 100%;
    }
    100% {
      opacity: 1;
      width: 98%;
    }
}
.myContributorAppearingAnim {
  animation: singleContributorAppearingKeys 1s ease-in-out forwards;
}

.singleContributorContent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 85%;
  margin-left: 10%;
  padding-top: 10px;
  padding-bottom: 10px;
  user-select: none;
}
.singleContributorContentAppearingAnim {
  animation: singleContributorContentAppearingKeys 0.7s ease-in-out forwards;
}
@keyframes singleContributorContentAppearingKeys {
    0% {
      margin-left: 15%;
      width: 80%;
    }
    100% {
      margin-left: 10%;
      width: 85%;
    }
}

.contributorsUserImageHolder {
  position: relative;
  display: flex;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  user-select: none;
}
.contributorsUserImageHolder:hover {
  scale: 1.5;
}

.contributorName {
  position: relative;
  display: flex;
  margin-left: 15px;
  align-items: center;
  height: 100%;
  width: auto;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all 0.2s ease-in-out;
  user-select: text;
}

.contributorsText {
  display: flex;
  height: auto;
  width: 100%;
  font-size: 0.8rem;
}

.contributorsMessage {
  display: flex;
  height: auto;
  width: 100%;
  font-size: 0.8rem;
}

.contributorsMessageTitle {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  font-size: 0.8rem;
}

#myContributionMessageForm {
  position: relative;
  display: block;
  height: 110px;
  width: 96%;
  padding: 2%;
  font-size: 0.8rem;
  outline: none;
  transition: all 0.3s ease-in-out;
}
#myContributionMessageForm:focus {
  margin-left: -4%;
  height: 420px;
  width: 100%;
  font-size: 0.9rem;
}

#saveMyContributionMessageButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 130px !important;
  margin-top: 10px;
  font-size: 0.8rem;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

.explorerCardHeader {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  cursor: move;
  z-index: 2;
}

#contributorsFooter {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 130px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

.echoPeopleWhoHelped {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: end;
  margin-top: 10px;
  height: 20%;
  width: 100%;
  font-size: 0.8rem;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  transition: all 0.3s ease-in-out;
  animation: echoPeopleWhoHelpedKeys 1.5s ease-in-out forwards;
}
@keyframes echoPeopleWhoHelpedKeys {
    0% {
      opacity: 0;
      width: 80%;
    }
    70% {
      opacity: 1;
      width: 100%;
      scale: 1;
    }
    80% {
      scale: 1.1;
    }
    100% {
      scale: 1;
    }
}

.echoBecomeContributor {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: 95%;
  padding-left: 2%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  animation: echoBecomeContributorKeys 0.5s ease-in-out forwards;
}
@keyframes echoBecomeContributorKeys {
  0% {
    opacity: 0;
    scale: 1;
  }
  50% {
    opacity: 1;
    scale: 1.1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

.explorerKoFiButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  width: 150px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease-out;
  opacity: 0;
  animation: echoBecomeContributorKeys 0.5s ease-in-out 0.2s forwards;
}

#myContributionOnOffButton {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 45px;
  width: auto;
  padding-right: 10px;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  opacity: 0;
  animation: echoBecomeContributorKeys 0.5s ease-in-out 0.3s forwards;
}

#contributionSemaphor {
  position: relative;
  display: block;
  margin-left: 5px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

.contributionSemaphorYellowLight {
  animation: blinkingAnimation 0.9s ease-in-out infinite;
}

#echoMyContribution {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 7px;
  margin-left: 10px;
  height: auto;
  width: auto;
  font-size: 0.7rem;
  letter-spacing: 1px;
}

#explorerEchoContributedState {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  height: auto;
  width: 100%;
  font-family: sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1px;
}

/* liked businesses */

#likedBusinessCard {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 17%;
  right: -10px;
  height: 50px;
  width: 0;
  border-radius: 25px;
  overflow: hidden;
  z-index: 10000;
  user-select: none;
}
.explorerLikedBusinessesStartCardAnim {
  animation: startRightPositionedCardKeys 0.5s ease-in-out 3.9s forwards;
}

/* minimize from default is shared class name: 'minimizeRightPositionedCardFromDEFAULTanim' */

.expandLikedBusinessesFromDEFAULTanim {
  animation: expandLikedBusinessesFromDEFAULTkeys 2s ease-in-out forwards;
}
@keyframes expandLikedBusinessesFromDEFAULTkeys {
    0% {
      top: 17%;
      right: 20px;
      width: 250px;
      height: 50px;
    }
    30% {
      top: 6%;
      right: 50%;
      width: 250px;
      scale: 0.2;
      transform: rotateY(360deg);
      height: 50px;
    }
    40% {
      top: 6%;
      right: 50%;
      width: 250px;
      scale: 1.1;
      transform: rotateY(360deg);
      height: 50px;
    }
    50% {
      top: 6%;
      right: 50%;
      width: 250px;
      scale: 1;
      transform: rotateY(360deg);
      height: 50px;
    }
    90% {
      top: 6%;
      right: 53%;
      width: 500px;
      transform: rotateY(360deg);
      height: 94%;
    }
    100% {
      top: 6%;
      right: 52%;
      width: 500px;
      transform: rotateY(360deg);
      height: 93%;
    }
}

.expandLikedBusinessesFromMINIMIZEDanim {
  animation: expandLikedBusinessesFromMINIMIZEDkeys 1.7s ease-in-out forwards;
}
@keyframes expandLikedBusinessesFromMINIMIZEDkeys {
    0% {
      right: 20px;
      width: 40px;
      height: 40px;
      scale: 1;
    }
    30% {
      top: 6%;
      right: 53%;
      width: 250px;
      scale: 0.2;
      transform: rotateY(360deg);
      height: 50px;
    }
    40% {
      top: 6%;
      right: 53%;
      width: 250px;
      scale: 1.1;
      transform: rotateY(360deg);
      height: 50px;
    }
    50% {
      top: 6%;
      right: 53%;
      width: 250px;
      scale: 1;
      transform: rotateY(360deg);
      height: 50px;
    }
    90% {
      top: 6%;
      right: 53%;
      width: 500px;
      transform: rotateY(360deg);
      height: 94%;
    }
    100% {
      top: 6%;
      right: 52%;
      width: 500px;
      transform: rotateY(360deg);
      height: 93%;
    }
}

.minimizeLikedBusinessesFromEXPANDEDanim {
  animation: minimizeLikedBusinessesFromEXPANDEDkeys 2s ease-in-out forwards;
}
@keyframes minimizeLikedBusinessesFromEXPANDEDkeys {
    0% {
      top: 6%;
      right: 50%;
      width: 500px;
      transform: rotateY(360deg);
      height: 93%;
    }
    25% {
      /* reduce height to 40px */
      top: 6%;
      right: 50%;
      width: 500px;
      transform: rotateY(360deg);
      height: 40px;
    }
    40% {
      /* reduce width to 40px */
      top: 6%;
      right: 50%;
      width: 40px;
      transform: rotateY(0deg);
      height: 40px;
      scale: 0.5;
    }
    60% {
      top: 10%;
      right: 50%;
      width: 40px;
      height: 40px;
      scale: 1;
    }
    80% {
      right: 20px;
      width: 40px;
      height: 40px;
      scale: 1.7;
    }
    100% {
      right: 20px;
      width: 40px;
      height: 40px;
      scale: 1;
    }
}

#explorerLikedBusinessTitle {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 10px;
  height: 50px;
  width: auto;
  font-size: 0.9rem;
  transition: all 0.1s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 2px;
  cursor: pointer;
  user-select: none;
}

#explorerLBIconHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 2%;
  height: 40px;
  width: 40px;
  overflow: hidden;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  user-select: none;
}
#explorerLBIconHolder:hover {
  scale: 1.1;
}

#explorerLikedBusinessesBody {
  position: relative;
  display: block;
  height: calc(100% - 60px);
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  user-select: none;
}

.explorerBusinessOwnerLogoHolder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  margin-left: 3px;
  height: 50px;
  width: 90px;
  border-radius: 7px;
  overflow: hidden;
  user-select: none;
}
.explorerBusinessOwnerLogoHolderFoldAnim {
  animation: explorerBusinessOwnerLogoHolderFoldKeys 0.5s ease-in-out forwards;
}
@keyframes explorerBusinessOwnerLogoHolderFoldKeys {
    0% {
      margin-top: 2px;
      margin-left: 3px;
      height: 50px;
      width: 90px;
      border-radius: 7px;
    }
    100% {
      margin-top: 0px;
      margin-left: 0px;
      height: 40px;
      width: 40px;
      border-radius: 50%;
    }
}

.explorerMyBusinessName {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-left: 15px;
  height: auto;
  flex: 1;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  letter-spacing: 1px;
}

#postBusinessNewsBody {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  transition: all 0.2s ease-in-out;
}

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

#explorerMakeNewsButton {
  transition: all 0.2s ease-in-out;
}

.explorerMakeNewsButtonFirstState {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  height: 40px;
  width: 120px;
  opacity: 1;
  font-size: 0.8rem;
  letter-spacing: 2px;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
  user-select: none;
  cursor: pointer;
}

.PLexplorerEchoStatus {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 7px;
  height: auto;
  width: 100%;
  font-size: 0.7rem;
  letter-spacing: 1px;
}

.explorerPLGraphicStateHolder {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-top: 5px;
  margin-left: 1%;
  height: 5px;
  width: 98%;
}

.explorerSearchStatus {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-right: 1%;
  height: 100%;
  width: 98%;
  border-radius: 10px;
}

#explorerMiniMenuHolder {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 35px;
  height: 40px;
  width: 100%;
}

.explorerMiniButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  margin-right: 5px;
  height: 77%;
  width: 55px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.explorerMiniButton:hover {
  scale: 1;
}
.explorerMiniButton:hover + *{
  scale: 0.9;
  opacity: 0.9;
}
.explorerMiniButton:hover + * + *{
  scale: 0.8;
  opacity: 0.5;
}
.explorerMiniButton:hover + * + * + *{
  scale: 0.7;
  opacity: 0.3;
}
.explorerMiniButton:has(+ *:hover) {
  scale: 0.9;
  opacity: 0.9;
}
.explorerMiniButton:has(+ * + *:hover) {
  scale: 0.8;
  opacity: 0.5;
}
.explorerMiniButton:has(+ * + * + *:hover) {
  scale: 0.7;
  opacity: 0.3;
}

.explorerCardBodyContent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 93%;
  padding-left: 5%;
}

#explorerBusinessCardBodyContent {
  justify-content: space-evenly;
}


.explorerNewsPostInfo {
  position: relative;
  display: flex;
  margin-top: 30px;
  height: auto;
  width: 100%;
  font-size: 0.8rem;
  opacity: 0;
  animation: introduceBusinessNewsInfoKeys 0.5s ease-in-out 0.5s forwards;
}
@keyframes introduceBusinessNewsInfoKeys {
  0% {
    opacity: 0;
    letter-spacing: 1px;
  }
  70% {
    opacity: 1;
    filter: blur(5px);
    letter-spacing: 2px;
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    letter-spacing: 1px;
  }
}

#myBusinessNewsTextInput {
  position: relative;
  display: block;
  margin-top: 30px;
  height: 350px;
  width: 96%;
  padding: 2%;
  font-size: 0.8rem;
  outline: none;
  transition: all 0.3s ease-in-out;
}
#myBusinessNewsTextInput:focus {
  margin-left: -4%;
  height: 370px;
  width: 100%;
  font-size: 0.9rem;
}

.explorerLikeSignInNewsFormHolder {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 570px;
  left: 0%;
  height: 70px;
  width: 100%;
  opacity: 0.2;
}
.explorerLikeSignInNewsForm {
  height: 70px;
  width: 72px;
  background-image: url("../../images/siteUsage/likeBlue.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#explorerBusinessNewsSelectorHolder {
  position: absolute;
  display: block;
  top: 500px;
  left: 0%;
  height: 200px;
  width: 100%;
  border-radius: 10px;
  z-index: 2;
}

.explorerNewsImageWrapper {
  position: relative;
  display: block;
  float: left;
  margin-left: 10px;
  margin-top: 15px;
  height: 75px;
  width: 75px;
  border-radius: 7px;
  overflow: hidden;
  z-index: 4;
}
.explorerNewsImageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer; /* this is key */
}

.thumb-loader {
  height: 75px;
  width: 75px;
  animation: loadingSelectedPhotoThumbKeys 1.5s infinite;
  border-radius: 7px;
}

@keyframes loadingSelectedPhotoThumbKeys {
    0% {
      opacity: 0;
      scale: 0;
    }
    20% {
      opacity: 1;
    }
    50% {
      scale: 1;
      transform: rotateZ(180deg);
    }
    100% {
      opacity: 1;
    }
}

#explorerPostNewsButtonHolder {
  position: absolute;
  display: flex;
  bottom: 10px;
  left: 0;
  height: auto;
  width: 100%;
  justify-content: end;
}

#explorerPostNewsButton {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 20px;
  height: 30px;
  width: 120px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

#explorerEchoPostNews {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: auto;
  margin-left: 10px;
  font-size: 0.8rem;
  transition: all 0.2s ease-in-out;
  letter-spacing: 1px;
}

.singleNewsListingHolder {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  height: auto;
  width: 100%;
  padding-bottom: 10px;
  border-style: solid;
  border-width: 1px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.likedBusinessNewsContent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.likedBusinessNewsText {
  position: relative;
  display: block;
  height: auto;
  margin-left: 2%;
  width: 96%;
  font-size: 0.9rem;
  padding-top: 20px;
  padding-bottom: 10px;
}

.explorerNewsMediaHolder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  height: 300px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: all 0.2s ease-in-out;
}

.explorerDeleteNewsButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 40px;
  width: 100px;
  margin-left: 5px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

.singleBusinessNewsAppearingAnim {
  animation: singleBusinessNewsAppearingKeys 0.3s ease-in-out forwards;
}
@keyframes singleBusinessNewsAppearingKeys {
    0% {
      opacity: 0;
      width: 80%;
    }
    100% {
      opacity: 1;
      width: 100%;
    }
}

.explorerLikedBusinessName {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-left: 15px;
  height: auto;
  flex: 1;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  letter-spacing: 1px;
}

.explorerNumberOfBusinessNewsLikes {
  position: relative;
  display: flex;
  height: 100%;
  width: auto;
  align-items: end;
  font-size: 0.8rem;
}

.explorerLikeNewsButtonHolder {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 30px;
  width: 50px;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.explorerLikeBusinessNewsButton {
  position: relative;
  display: block;
  /* to fit container */
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.2s ease-in-out;
}
.explorerLikeBusinessNewsButton:hover {
  transform: rotateZ(-7deg) translateY(-3px);
  scale: 1.1;
}

.explorerDislikeBusinessNewsButton {
  position: relative;
  display: block;
  /* to fit container */
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: likedButtonAppearingKeys 0.5s ease-in-out forwards;
}
@keyframes likedButtonAppearingKeys {
    0% {
      transform: rotateZ(-9deg) translateY(-5px);
      scale: 1.1;
    }
    80% {
      transform: rotateZ(5deg) translateY(5px);
      scale: 1.1;
    }
    90% {
      transform: rotateZ(-9deg) translateY(-5px);
      scale: 1.1;
    }
    100% {
      transform: rotateZ(0deg) translateY(0px);
      scale: 1;
    }
}