:root {
  --font-main: 'Source Sans Pro', sans-serif;
  --vh-minus-navbar: calc(100vh - 53px);
  --my-green: #3bdb53;
  --my-info: #050836;
  --my-info-alt: #430986;
  --my-purp: #1c0536;
  --my-secondary: #757575;
  --my-orange-dark: #ff6701;
  --primary: #03109b !important;
  --primary-alt: #213a52;
  --primary-alt2: #0b105a;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  font-family: 'Source Sans Pro', sans-serif;
  min-height: 100vh;
  padding-top: 53px !important;
  background-color: var(--primary-alt) !important;
  /* modal was changing padding-right and making hero text move */
  padding-right: 0px !important;
}

.spinner-zone {
  position: fixed;
  display: none;
  top: 0;
  width: 50px;
  left: calc(50vw - 25px);
  height: 53px;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.76);
}

.spinner-zone > div {
  height: 100%;
  width: 100%;
}

.navbar {
  font-family: 'MuseoModerno', cursive;
  font-size: 0.8rem;
  /* modal was changing padding-right and making search form move */
  padding-right: 16px !important;
}

.navbar-logout:hover {
  color: white !important;
}

.navbar-signup:hover {
  color: var(--my-green) !important;
}

.navbar-yelp-logo {
  height: 26px;
  transform: translateY(-4px);
}

.feedback {
  position: absolute;
  left: 20px;
}

#preferences-boolean .help-text {
  font-size: 10px;
  font-style: italic;
}

.flx-std {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flx-row-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.flx-row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.display-1-k {
  font-size: 11vh;
}

.display-2-k {
  font-size: 4vh;
}

.ssp {
  font-family: var(--font-main);
}

.museo {
  font-family: 'MuseoModerno', cursive;
}

.txt-xs {
  font-size: x-small;
}

.txt-smlr {
  font-size: smaller;
}

.txt-sm {
  font-size: small;
}

.txt-medium {
  font-size: medium;
}
.txt-lg {
  font-size: large;
}
.txt-xl {
  font-size: x-large;
}

.txt-xxl {
  font-size: xx-large;
}

.fw-200 {
  font-weight: 200;
}
.fw-300 {
  font-weight: 300;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600 !important;
}
.fw-900 {
  font-weight: 900;
}

.txt-white {
  color: white !important;
}

.txt-whitesmoke {
  color: whitesmoke !important;
}

.txt-white-k {
  color: rgb(207, 207, 207) !important;
}

.txt-black {
  color: black !important;
}

.txt-green {
  color: var(--my-green) !important;
}

.txt-warning {
  color: var(--warning);
}

.txt-green-alt {
  color: #34c557 !important;
}

.txt-info {
  color: var(--my-info) !important;
}

.txt-orange-dark {
  color: var(--my-orange-dark);
}

.txt-purp {
  color: var(--my-purp) !important;
}

.txt-333 {
  color: #333;
}

.txt-yellow {
  color: yellow;
}

.txt-yelp-red {
  color: hsla(0, 72%, 48%, 0.9) !important;
}

.bg-green {
  background-color: var(--my-green) !important;
}

.bg-purp {
  background-color: var(--my-info);
}

.bg-black {
  background-color: black;
}

.bg-white {
  background-color: white;
}

.bg-map-red {
  background-color: #844848;
}

.bg-disabled {
  background-color: #888888 !important;
}

.bg-trans-p {
  background-color: #03109bd0;
}

.bg-trans-b0 {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-trans-b {
  background-color: rgba(0, 0, 0, 0.589);
}

.bg-trans-b2 {
  background-color: rgba(0, 0, 0, 0.717);
}

.bg-trans-b3 {
  background-color: rgba(0, 0, 0, 0.944);
}
.bg-trans-light {
  background-color: #555555df;
}

.btn-primary {
  background-color: var(--primary) !important;
  border: none !important;
}

.btn-primary-alt2 {
  background-color: var(--primary-alt2) !important;
  border: none !important;
}

.btn-info {
  background-color: var(--my-info) !important;
  border: none !important;
}

.btn-primary-alt {
  background-color: var(--primary-alt) !important;
  border: none !important;
}

.btn-purp {
  background-color: var(--my-purp) !important;
  border: none !important;
}

.brand-outline {
  text-shadow: 1px 1px 1px cyan, -1px -1px 1px cyan, -1px 1px 1px cyan,
    1px -1px 1px cyan;
}

.white-outline {
  text-shadow: white 1px 1px 1px, white -1px -1px 1px, white 1px -1px 1px,
    white -1px 1px 1px;
}

.white-outline-yelp {
  text-shadow: white 1px 1px 0px, white -1px -1px 0px, white 1px -1px 0px,
    white -1px 1px 0px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.dark-outline-1 {
  text-shadow: #333333 1px 1px 1px, #333333 -1px -1px 1px, #333333 1px -1px 1px,
    #333333 -1px 1px 1px;
}

.black-outline-1 {
  text-shadow: black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px,
    black -1px 1px 1px;
}

.black-outline-1-2 {
  text-shadow: black 1px 1px 2px, black -1px -1px 2px, black 1px -1px 2px,
    black -1px 1px 2px;
}

.black-outline {
  text-shadow: black 2px 2px 2px, black -2px -2px 2px, black 2px -2px 2px,
    black -2px 2px 2px;
}

.orange-outline {
  text-shadow: var(--warning) 1px 1px 1px, var(--warning) -1px -1px 1px,
    var(--warning) 1px -1px 1px, var(--warning) -1px 1px 1px;
}

.yellow-outline {
  text-shadow: yellow 1px 1px 1px, yellow -1px -1px 1px, yellow 1px -1px 1px,
    yellow -1px 1px 1px;
}

.dark-green-outline {
  text-shadow: darkgreen 1px 1px 2px, darkgreen -1px -1px 2px,
    darkgreen 1px -1px 2px, darkgreen -1px 1px 2px;
}

.delete-user {
  margin-top: 13px;
}

.hidden {
  visibility: hidden;
}

.p-fixed {
  position: fixed;
}

.p-absolute {
  position: absolute;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity-9 {
  opacity: 0.9;
}

.opaque {
  opacity: 0;
}

.underline {
  text-decoration: underline;
}

h-100 {
  height: 100%;
}

.no-wrap {
  white-space: nowrap;
}

.no-select {
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

body::-webkit-scrollbar {
  width: 6px;
  background-color: #6c757d;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--warning);
  border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: var(--my-orange-dark);
}

.navbar-traverse {
  height: 56px;
  width: 56px;
  top: 0px;
  right: -56px;
  position: fixed;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.horiz-rocket {
  transform: rotate(225deg);
}

.modal-body hr {
  border-top-color: #333;
}
@media (orientation: portrait) {
  .display-1-k {
    font-size: 11vw;
  }
  .display-2-k {
    font-size: 3vh;
  }
}

@media screen and (min-width: 991px) and (max-width: 1199px) {
  .navbar-signup,
  .navbar-logout {
    font-size: small !important;
  }
}

@media screen and (min-width: 2000px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1500px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .modal button:hover:not(.like-button) {
    background: var(--my-green) !important;
    color: var(--my-info) !important;
  }
  .modal label:hover:not(.no-hover) {
    color: var(--blue) !important;
  }
  .grow-1_2-hover:hover {
    transform: scale(1.2);
    transition: 0.4s;
  }
  .card-text-noHover:hover {
    color: unset !important;
  }
  .hover-primary:hover {
    color: #2a9fd6 !important;
  }
}

/* preloader */
/* preloader */
/* preloader */
/* preloader */
/* preloader */
/* preloader */
/* https://cfoucht.com/loadlab/ */

.preloader-div {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0vw;
  background-color: var(--primary-alt);
  z-index: 100000;
}

.reverse-spinner {
  position: relative;
  height: 100px;
  width: 100px;
  border: 4px solid transparent;
  border-top-color: var(--warning);
  border-left-color: var(--warning);
  border-radius: 50%;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

.reverse-spinner::before {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  content: '';
  border: 4px solid transparent;
  border-top-color: #ff6701;
  border-left-color: #ff6701;
  border-radius: 50%;
  -webkit-animation: spinBack 1s linear infinite;
  animation: spinBack 1s linear infinite;
}

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

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

@-webkit-keyframes spinBack {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }
}

@keyframes spinBack {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }
}