@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;

0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#chat {
  overflow-x: hidden;
}

#chat .chat-input {
  border: 1px solid #35799c;
  width: 100%;
  padding: .5rem;
}

#chat .hidden {
  display: none;
}

#chat .disabled {
  background-color: #595959;
  pointer-events: none;
  background-image: none;
}

#chat .message-container {
  position: relative;
  height: 60vh;
  overflow-y: scroll;
  word-break: break-all;
}

#chat .chat-dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1rem;
  width: 100%;
  margin-bottom: 1rem;
  position: relative;
  box-shadow: 0 0 2rem 1.7rem white;
}

#chat .chat-dropdown.rtl {
  margin-left: auto;
  margin-right: 1rem;
}

#chat .chat-dropdown.rtl .dropdown-wrapper {
  margin-left: 0;
  margin-right: 0.5rem;
}

#chat .chat-dropdown.rtl .dropdown-wrapper:before {
  left: 0.5rem;
  right: auto;
}

#chat .chat-dropdown.rtl .dropdown-wrapper .dropdown {
  padding-right: 0.25rem;
}

#chat .dropdown-wrapper {
  margin-left: 0.25rem;
  margin-bottom: 0;
  width: 13rem;
  padding: 0;
}

#chat .dropdown {
  padding: 0;
  font-weight: normal;
  font-family: "Quattrocento Sans", sans-serif;
}

#chat .dropdown:hover {
  background-color: inherit;
}

#chat form {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  padding: 1rem;
}

#chat form button {
  width: 40%;
  min-width: 5rem;
  box-shadow: none;
  padding: 0.5rem;
}

#chat form button.fr {
  font-size: 1rem;
  margin: 0.4rem;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #chat .dropdown-wrapper {
    border-bottom: 1px solid #35799c;
  }

  #chat .dropdown-wrapper:before {
    display: flex;
  }

  #chat .chat-dropdown {
    margin-top: 1rem;
    margin-bottom: 3rem;
    justify-content: flex-start;
    box-shadow: 0 0 5rem 3.5rem white;
  }

  #chat .message-container {
    height: 61vh;
  }

  #chat form {
    display: flex;
  }

  #chat form .text-input {
    padding: 1rem;
    height: 16vh;
    background-color: #fff;
  }

  #chat form button {
    position: absolute;
    width: 8rem;
    right: 4rem;
    bottom: 3rem;
    padding: .5rem;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#dashboard {
  /* Defaults & Mobile */
  overflow-y: auto;
  overflow-x: hidden;
  background-color: white;
}

#dashboard #role-bar {
  margin-top: 0.5rem;
  padding: 0.625rem 1rem;
  position: relative;
  color: #0b4c8c;
  background: #dbe3e7;
  font-size: 1.5rem;
  min-height: 3.8rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
}

#dashboard #role-bar svg,
#dashboard #role-bar span {
  display: inline-block;
}

#dashboard #role-bar .role-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#dashboard #role-bar .team-num {
  font-size: 1rem;
  margin-top: 0.25rem;
}

#dashboard #four-square {
  color: #35799c;
  margin: 0 auto;
  margin-bottom: 1.5rem;
  width: calc(10rem * 2);
  height: 16rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#dashboard #four-square .role-icon {
  width: 4rem;
  height: 4rem;
}

#dashboard #four-square.rtl {
  direction: rtl;
}

#dashboard #info-bars {
  position: relative;
}

#dashboard #info-bars .bar {
  border-top: 2px solid currentColor;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1rem 0;
  width: 100%;
}

#dashboard #info-bars .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.75rem;
}

#dashboard #info-bars .info-bars-label,
#dashboard #info-bars .info-bars-content {
  display: flex;
  align-items: center;
  color: #35799c;
}

#dashboard #info-bars .info-bars-label a {
  color: currentColor;
}

#dashboard #info-bars .info-bars-content {
  font-size: 1.25rem;
  margin-right: 1rem;
  text-align: right;
}

#dashboard #info-bars .info-bars-content.rtl {
  margin-left: 2rem;
  margin-right: 0;
}

#dashboard #info-bars .subtitle {
  position: absolute;
  right: 1rem;
  bottom: 0;
  font-size: 1rem;
}

#dashboard #info-bars .subtitle.rtl {
  right: initial;
  left: 2rem;
}

#dashboard #info-bars dd a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #dashboard {
    width: 22rem;
    min-width: 22rem;
    max-width: 22rem;
    height: calc(100vh - 2rem);
    padding-bottom: 0.5rem;
  }

  #dashboard #four-square {
    height: calc(22rem - 4rem);
    min-height: calc(22rem - 4rem);
    width: 100%;
    margin-bottom: 0;
  }

  #dashboard #info-bars {
    padding-top: 1rem;
  }

  #dashboard #info-bars .bar {
    margin-right: 1rem;
  }

  #dashboard #info-bars .bar.active {
    background: #35799c;
  }

  #dashboard #info-bars .bar.active * {
    color: #fff;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#decisions {
  position: relative;
  padding-top: 2rem;
  min-height: calc(100% - 7rem);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  /* If there's enough space to hold the full mountain, don't transform. */
}

#decisions p > em {
  font-size: 0.8rem;
}

#decisions h3 {
  font-size: 0.8rem;
  padding-bottom: 0.2rem;
}

#decisions form {
  width: 100%;
}

#decisions .submit-button-wrapper {
  align-content: center;
  display: flex;
  justify-content: center;
  margin: 1rem 1.5rem;
}

#decisions .submit-button-wrapper button {
  z-index: 2;
  /* So that button box shadow works with dropdowns */
}

#decisions .warning {
  color: #c40808;
  font-weight: 700;
}

#decisions #role-decisions {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  line-height: 1.5rem;
  position: relative;
  z-index: 5;
}

#decisions #role-decisions.hidden {
  display: none;
}

#decisions #role-decisions .decision {
  margin: 3.5rem 1.5rem 1rem;
  display: flex;
}

#decisions #role-decisions .tutorial-highlight {
  padding: 1rem;
}

#decisions #decisions-pending {
  display: flex;
  flex-flow: column nowrap;
  margin: 2rem 0;
  padding: 0 2rem;
  width: 100%;
}

#decisions #decisions-pending h2 {
  border-bottom: 1px solid #35799c;
  font-size: 1.25rem;
  padding-bottom: 0.2rem;
}

#decisions #decisions-pending .icon-list {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  margin-bottom: 2rem;
}

#decisions #decisions-pending .icon {
  margin: 0.7rem 0.8rem;
}

#decisions #decisions-pending .icon:first-child {
  margin-left: 0;
}

#decisions .camp-select-label-wrapper {
  width: 100%;
}

#decisions .camp-select-label-wrapper span {
  display: flex;
  justify-content: flex-start;
}

@media screen and (max-width: 1200px) {
  #decisions .camp-select-label-wrapper {
    width: 80%;
  }
}

@media screen and (max-width: 920px) {
  #decisions .camp-select-label-wrapper {
    width: 60%;
  }
}

#decisions #camp-select-label {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 920px) {
  #decisions #camp-select-label {
    font-size: 1rem;
  }
}

#decisions #accessible-camp-select:focus-within + #camp-select,
#decisions #accessible-camp-select:hover + #camp-select {
  animation: camp-select-highlight 0.3s cubic-bezier(0.17, 0.67, 0.2, 1) forwards;
}

@keyframes camp-select-highlight {
  0% {
    box-shadow: 0 0 0 3px #35799c, 0 0 0 4px #fff, 0 0px 8px #333333;
  }

  100% {
    box-shadow: 0 0 0 3px #35799c, 0 0 0 4px #fff, 0 2px 16px #333333;
  }
}

#decisions #camp-select {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 21.125rem;
  overflow: hidden;
  position: relative;
  margin-top: -4rem;
}

#decisions #camp-select.fr,
#decisions #camp-select.pt,
#decisions #camp-select.rtl,
#decisions #camp-select.es {
  margin-top: 0;
}

#decisions #camp-select svg {
  position: absolute;
  right: 0;
  bottom: -3px;
}

#decisions #camp-select svg.hide-markers *[id^="marker_wrapper"] {
  display: none !important;
}

#decisions #camp-select text[class^="label--"],
#decisions #camp-select span[class^="label--"],
#decisions #camp-select g[id^="marker_wrapper--"],
#decisions #camp-select g[id^="progress_indicator--"] {
  display: none;
}

#decisions #camp-select text.test {
  stroke: red;
}

#decisions #camp-select.camp-hover-0 #marker_wrapper--camp_0 {
  outline: auto;
  outline-offset: 1rem;
  outline-color: #35799c;
}

#decisions #camp-select.camp-hover-1 #marker_wrapper--camp_1 {
  outline: auto;
  outline-offset: 1rem;
  outline-color: #35799c;
}

#decisions #camp-select.camp-hover-2 #marker_wrapper--camp_2 {
  outline: auto;
  outline-offset: 1rem;
  outline-color: #35799c;
}

#decisions #camp-select.camp-hover-3 #marker_wrapper--camp_3 {
  outline: auto;
  outline-offset: 1rem;
  outline-color: #35799c;
}

#decisions #camp-select.camp-hover-4 #marker_wrapper--camp_4 {
  outline: auto;
  outline-offset: 1rem;
  outline-color: #35799c;
}

#decisions #camp-select.camp-hover-5 #marker_wrapper--camp_5 {
  outline: auto;
  outline-offset: 1rem;
  outline-color: #35799c;
}

#decisions[data-camp='0'] #camp-select svg {
  transform: translate(calc((972px - 100vw) / 2));
}

#decisions[data-camp='0'] #camp-select svg #marker_wrapper--camp_0,
#decisions[data-camp='0'] #camp-select svg #marker_wrapper--camp_0 .label--stay,
#decisions[data-camp='0'] #camp-select svg #marker_wrapper--camp_1,
#decisions[data-camp='0'] #camp-select svg #marker_wrapper--camp_1 .label--ascend,
#decisions[data-camp='0'] #camp-select svg #progress_indicator--camp_1 {
  display: unset;
  opacity: 1;
  transition: opacity 1s;
}

#decisions[data-camp='0'] #camp-select svg #marker_wrapper--camp_0.default,
#decisions[data-camp='0'] #camp-select svg #marker_wrapper--camp_0 .label--stay.default,
#decisions[data-camp='0'] #camp-select svg #marker_wrapper--camp_1.default,
#decisions[data-camp='0'] #camp-select svg #marker_wrapper--camp_1 .label--ascend.default,
#decisions[data-camp='0'] #camp-select svg #progress_indicator--camp_1.default {
  opacity: 1 !important;
}

#decisions[data-camp='0'] #camp-select svg #progress_indicator--camp_1 {
  opacity: 0;
  transition: opacity 1s;
}

#decisions[data-camp='0'] #camp-select svg #progress_indicator--camp_1.default {
  opacity: 0 !important;
}

#decisions[data-camp='1'] #camp-select svg {
  transform: translate(calc((868px - 100vw) / 2));
}

#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_0,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_0 .label--descend,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_1,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_1 .label--stay,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_2,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_2 .label--ascend,
#decisions[data-camp='1'] #camp-select svg #progress_indicator--camp_1,
#decisions[data-camp='1'] #camp-select svg #progress_indicator--camp_2 {
  display: unset;
  opacity: 1;
  transition: opacity 1s;
}

#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_0.default,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_0 .label--descend.default,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_1.default,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_1 .label--stay.default,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_2.default,
#decisions[data-camp='1'] #camp-select svg #marker_wrapper--camp_2 .label--ascend.default,
#decisions[data-camp='1'] #camp-select svg #progress_indicator--camp_1.default,
#decisions[data-camp='1'] #camp-select svg #progress_indicator--camp_2.default {
  opacity: 1 !important;
}

#decisions[data-camp='1'] #camp-select svg #progress_indicator--camp_2 {
  opacity: 0;
  transition: opacity 1s;
}

#decisions[data-camp='1'] #camp-select svg #progress_indicator--camp_2.default {
  opacity: 0 !important;
}

#decisions[data-camp='2'] #camp-select-label {
  top: 5rem;
}

#decisions[data-camp='2'] #camp-select svg {
  transform: translate(calc((630px - 100vw) / 2));
}

#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_1,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_1 .label--descend,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_2,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_2 .label--stay,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_3,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_3 .label--ascend,
#decisions[data-camp='2'] #camp-select svg #progress_indicator--camp_1,
#decisions[data-camp='2'] #camp-select svg #progress_indicator--camp_2,
#decisions[data-camp='2'] #camp-select svg #progress_indicator--camp_3 {
  display: unset;
  opacity: 1;
  transition: opacity 1s;
}

#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_1.default,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_1 .label--descend.default,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_2.default,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_2 .label--stay.default,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_3.default,
#decisions[data-camp='2'] #camp-select svg #marker_wrapper--camp_3 .label--ascend.default,
#decisions[data-camp='2'] #camp-select svg #progress_indicator--camp_1.default,
#decisions[data-camp='2'] #camp-select svg #progress_indicator--camp_2.default,
#decisions[data-camp='2'] #camp-select svg #progress_indicator--camp_3.default {
  opacity: 1 !important;
}

#decisions[data-camp='2'] #camp-select svg #progress_indicator--camp_3 {
  opacity: 0;
  transition: opacity 1s;
}

#decisions[data-camp='2'] #camp-select svg #progress_indicator--camp_3.default {
  opacity: 0 !important;
}

#decisions[data-camp='3'] #camp-select-label {
  top: 2.5rem;
}

@media (max-width: 445px) {
  #decisions[data-camp='3'] #camp-select svg {
    transform: translate(calc((445px - 100vw) / 2));
  }
}

#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_2,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_2 .label--descend,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_3,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_3 .label--stay,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_4,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_4 .label--ascend,
#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_1,
#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_2,
#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_3,
#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_4 {
  display: unset;
  opacity: 1;
  transition: opacity 1s;
}

#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_2.default,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_2 .label--descend.default,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_3.default,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_3 .label--stay.default,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_4.default,
#decisions[data-camp='3'] #camp-select svg #marker_wrapper--camp_4 .label--ascend.default,
#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_1.default,
#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_2.default,
#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_3.default,
#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_4.default {
  opacity: 1 !important;
}

#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_4 {
  opacity: 0;
  transition: opacity 1s;
}

#decisions[data-camp='3'] #camp-select svg #progress_indicator--camp_4.default {
  opacity: 0 !important;
}

#decisions[data-camp='4'] #camp-select-label {
  top: 0;
}

#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_3,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_3 .label--descend,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_4,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_4 .label--stay,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_5,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_5 .label--ascend,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_1,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_2,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_3,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_4,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_5 {
  display: unset;
  opacity: 1;
  transition: opacity 1s;
}

#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_3.default,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_3 .label--descend.default,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_4.default,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_4 .label--stay.default,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_5.default,
#decisions[data-camp='4'] #camp-select svg #marker_wrapper--camp_5 .label--ascend.default,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_1.default,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_2.default,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_3.default,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_4.default,
#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_5.default {
  opacity: 1 !important;
}

#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_5 {
  opacity: 0;
  transition: opacity 1s;
}

#decisions[data-camp='4'] #camp-select svg #progress_indicator--camp_5.default {
  opacity: 0 !important;
}

#decisions[data-camp='5'] #camp-select-label {
  top: 0rem;
}

#decisions[data-camp='5'] #camp-select svg #marker_wrapper--camp_4,
#decisions[data-camp='5'] #camp-select svg #marker_wrapper--camp_4 .label--descend,
#decisions[data-camp='5'] #camp-select svg #marker_wrapper--camp_5,
#decisions[data-camp='5'] #camp-select svg #marker_wrapper--camp_5 .label--stay,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_1,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_2,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_3,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_4,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_5 {
  display: unset;
  opacity: 1;
  transition: opacity 1s;
}

#decisions[data-camp='5'] #camp-select svg #marker_wrapper--camp_4.default,
#decisions[data-camp='5'] #camp-select svg #marker_wrapper--camp_4 .label--descend.default,
#decisions[data-camp='5'] #camp-select svg #marker_wrapper--camp_5.default,
#decisions[data-camp='5'] #camp-select svg #marker_wrapper--camp_5 .label--stay.default,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_1.default,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_2.default,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_3.default,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_4.default,
#decisions[data-camp='5'] #camp-select svg #progress_indicator--camp_5.default {
  opacity: 1 !important;
}

#decisions .modal-button-wrapper {
  width: 100%;
}

#decisions .label,
#decisions .label--stay,
#decisions .label--ascend,
#decisions .label--descend,
#decisions .marker {
  cursor: pointer;
}

#decisions .disable-camp-select .label,
#decisions .disable-camp-select .label--stay,
#decisions .disable-camp-select .label--ascend,
#decisions .disable-camp-select .label--descend,
#decisions .disable-camp-select .marker {
  cursor: not-allowed;
}

@media (min-width: 600px) {
  #decisions[data-camp] #camp-select svg {
    transform: none;
  }
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #decisions {
    min-height: calc(100% - 14rem);
  }
}

.gray {
  fill: #dbe3e7;
}

.gray text {
  fill: #dbe3e7;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#health {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

#health dl {
  width: 100%;
}

#health .overall-health-container {
  padding-top: 3rem;
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}

#health .overall-health-container .overall-health-label {
  position: absolute;
  color: #595959;
  top: 4rem;
  left: 1rem;
  font-size: 0.8rem;
}

#health .overall-health-container .overall-health-label.rtl {
  left: auto;
  right: 1rem;
}

#health .overall-health-container .overall-health-label button.tooltip {
  bottom: 0.25rem;
}

#health .overall-health-container .overall-health-status {
  font-size: 1.8rem;
  color: #35799c;
  width: 100%;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
}

#health .overall-health-container .bars-container {
  width: 100%;
  margin-top: 1rem;
}

#health .overall-health-container .bars {
  display: flex;
  flex-flow: row nowrap;
  width: 85%;
  margin: 0 auto;
}

#health .overall-health-container .bars .bar {
  height: 2.4rem;
  background-color: #dbe3e7;
  margin-left: 1px;
}

#health .overall-health-container .bars .bar.fill-critical {
  background-color: #ff4d4d;
}

@media (forced-colors: active) {
  #health .overall-health-container .bars .bar.fill-critical {
    background-color: HighlightText;
  }
}

#health .overall-health-container .bars .bar.fill-at-risk {
  background-color: #ffb31e;
}

@media (forced-colors: active) {
  #health .overall-health-container .bars .bar.fill-at-risk {
    background-color: CanvasText;
  }
}

#health .overall-health-container .bars .bar.fill-weak {
  background-color: #fe0;
}

@media (forced-colors: active) {
  #health .overall-health-container .bars .bar.fill-weak {
    background-color: CanvasText;
  }
}

#health .overall-health-container .bars .bar.fill-strong {
  background-color: #6EA424;
}

@media (forced-colors: active) {
  #health .overall-health-container .bars .bar.fill-strong {
    background-color: CanvasText;
  }
}

#health .indicators-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

#health .indicator {
  position: relative;
  margin: 1rem;
  width: 70%;
  display: flex;
}

#health .indicator * {
  flex: 1 0 0;
}

#health .indicator .icon-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

#health .indicator .icon-container .indicator-label {
  color: #595959;
  font-size: 0.8rem;
  flex: 0 1 0;
}

#health .indicator .icon-container .icon {
  height: 2rem;
}

#health .indicator div {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#health .indicator dd {
  display: contents;
}

#health .indicator dd .active {
  font-size: 1.8rem;
  color: #35799c;
  position: relative;
  flex: 1 0 8rem;
}

#health .indicator div.inactive {
  font-size: 1.2rem;
  color: #dbe3e7;
}

#health .indicator .status {
  justify-content: flex-end;
}

#health .indicator .status .icon {
  height: 2.5rem;
  width: 2.5rem;
  max-width: 2.5rem;
}

#health .indicator .status .icon.green {
  background: #6EA424;
  border-radius: 50%;
}

@media (forced-colors: active) {
  #health .indicator .status .icon.green {
    background-color: CanvasText;
  }
}

#health .indicator.rtl .indicator-label {
  left: auto;
  right: 1rem;
}

#health .indicator.rtl .icon {
  left: auto;
  right: 1rem;
}

#health .indicator.rtl dd:after {
  right: auto;
  left: 3rem;
}

#health .history-table-prop {
  height: 1.2rem;
  width: 100%;
}

#health .health-history-container {
  position: fixed;
  top: calc(100% - 1.5rem + 1px);
  width: 100%;
  color: #35799c;
  transition: transform 0.2s ease-in;
}

#health .health-history-container table.health-history {
  visibility: hidden;
}

#health .health-history-container button {
  all: unset;
  margin-left: 50%;
  transform: translate(-50%, 0.5px);
  display: inline-block;
  cursor: pointer;
  border: solid 1px #35799c;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  padding: 0.2rem 0.5rem;
  background: white;
  white-space: nowrap;
}

#health .health-history-container button.rtl {
  margin-left: auto;
  margin-right: 50%;
  transform: translate(50%, 0.5px);
}

#health .health-history-container button:hover {
  background: #35799c;
  color: white;
}

#health .health-history-container button:focus-visible {
  outline-width: medium;
  outline-style: groove;
  outline-color: Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

#health .health-history-container.fr {
  font-size: 0.8rem;
}

#health .health-history-container.fr th:last-child {
  padding: 1.5rem 1.5rem;
}

#health .open.health-history-container {
  transform: translateY(-100%);
  transition: transform 0.2s ease-in;
}

#health .open.health-history-container table.health-history {
  visibility: visible;
}

#health table.health-history {
  margin: 0 auto;
  min-width: 375px;
  width: 80%;
  border-collapse: collapse;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  border: none;
}

#health table.health-history th,
#health table.health-history thead tr td:first-child {
  background: #35799c;
  color: white;
  padding: 1.5rem 0.75rem;
}

#health table.health-history td {
  background: white;
  color: #595959;
  padding: 0.75rem;
}

#health table.health-history th,
#health table.health-history td {
  text-align: center;
  font-size: 0.8rem;
}

#health table.health-history thead tr th:first-child {
  border-radius: 5px 0 0 0;
}

#health table.health-history thead tr th:last-child {
  border-radius: 0 5px 0 0;
}

#health table.health-history tbody tr th:first-child {
  white-space: nowrap;
}

#health table.health-history tbody tr:last-child th {
  border-radius: 0 0 0 5px;
}

#health table.health-history tbody tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #health .indicator .indicator-label {
    max-width: unset;
    word-wrap: unset;
  }

  #health .health-history-container {
    max-width: 65rem;
    width: calc( (100% - 22rem - 4.5rem));
  }

  #health table.health-history th,
  #health table.health-history td {
    font-size: 1rem;
  }
}

@media (max-width: 445px) {
  #health dd.fr {
    display: flex;
    text-align: center;
    max-width: 65vw;
    align-self: center;
  }

  #health dd.fr.active:after {
    right: -1rem;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#hiking {
  padding: 1rem;
}

#hiking .role-speed-row {
  margin-top: 3rem;
}

#hiking .role-header-wrapper {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.2rem;
}

#hiking .role-header-wrapper dt {
  flex-grow: 100;
  font-size: 1.1rem;
}

#hiking .role-header-wrapper dd {
  color: #35799c;
  font-size: 2rem;
  margin: 0;
}

#hiking .role-header-wrapper dd .unit {
  font-size: 1rem;
  color: black;
}

#hiking .speed-bars {
  display: flex;
  flex-direction: column-reverse;
  white-space: nowrap;
}

#hiking .speed-bar-wrapper {
  width: 95%;
  position: relative;
}

#hiking .speed-bar-wrapper dt {
  position: relative;
  margin-left: 0.5rem;
  white-space: nowrap;
  z-index: 2;
}

#hiking .speed-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: #ba710c;
  background: linear-gradient(315deg, #ba710c 0%, #ffb31e 40%, rgba(255, 255, 255, 0.8) 95%);
}

@media (forced-colors: active) {
  #hiking .speed-bar {
    border: 2px solid Mark;
  }
}

#hiking .speed-bar.rtl {
  background: linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, #ffb31e 60%, #ba710c 95%);
  right: 0;
}

#hiking .speed-bar:not(.rtl) {
  left: 0;
}

#hiking .metrics-label {
  color: #595959;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #hiking .role-header-wrapper {
    justify-content: center;
  }

  #hiking .role-header-wrapper .flexible {
    flex-grow: 2;
    flex-shrink: 2;
    flex-basis: 10%;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#home-page {
  /* Default to mobile settings */
}

#home-page .home-intro-wrapper {
  max-width: 37.5rem;
  margin: 0 auto;
}

#home-page .background-wrapper {
  background: linear-gradient(314.27deg, rgba(255, 255, 255, 0.8) 0%, rgba(0, 180, 247, 0.8) 100%);
  height: 25rem;
  overflow: hidden;
}

#home-page .background-wrapper .background-img {
  top: 0;
  left: -16rem;
  z-index: 0;
  position: relative;
  width: 96rem;
  transform: translate(calc((80rem - 100vw) / -2));
}

@media (min-width: 80rem) {
  #home-page .background-wrapper .background-img {
    transform: unset;
  }
}

#home-page .background-wrapper .background-img.rtl {
  left: 0;
}

#home-page .content-wrapper {
  z-index: 10;
  padding: 1rem;
  line-height: 1.3rem;
  top: -7.625rem;
  position: relative;
}

#home-page h1,
#home-page h2 {
  text-align: center;
  margin: 1rem 0;
  color: #35799c;
  font-size: 1.5rem;
}

#home-page h2 {
  margin-top: 2rem;
  text-align: left;
}

#home-page h2.rtl {
  text-align: right;
}

#home-page .team-num {
  font-size: 1rem;
  text-align: center;
  margin: 0 0 1rem 0;
}

#home-page p {
  width: 100%;
  margin: 0 0 1rem;
}

#home-page .horizontal-wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  gap: 4rem;
  align-items: center;
}

#home-page .home-button-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}

#home-page .home-button-wrapper .home-tutorial-button {
  justify-content: center;
}

#home-page .home-page-error {
  text-align: center;
  margin: 1.5rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #35799c;
}

#home-page .video-wrapper-wrapper {
  max-width: 43.75rem;
}

#home-page .transcript-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

#home-page .transcript-wrapper a {
  color: #35799c;
  text-decoration: underline;
}

#home-page .harvard-logo {
  position: relative;
  margin: 1rem 0.75rem 0;
}

#home-page .link-button {
  background-color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  color: #35799c;
  box-shadow: none;
  width: auto;
  height: auto;
  text-decoration: underline;
  padding: 0;
  margin: 0;
  width: fit-content;
  min-width: fit-content;
  align-self: flex-start;
  font-size: inherit;
}

#home-page .link-button:focus {
  background: none;
}

#home-page .link-button:hover {
  outline: none;
  background: none;
}

#home-page .home-logout-button {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  text-decoration: underline;
  color: #000;
}

#home-page .home-logout-button:hover {
  cursor: pointer;
}

#home-page .home-logout-button.rtl {
  left: 1rem;
  right: auto;
}

#home-page .team-wrapper {
  margin-top: 2rem;
  border: 1px solid #35799c;
  padding: 1.5rem 1rem 1rem;
  height: fit-content;
  min-width: 16rem;
  max-width: 24rem;
  position: relative;
}

#home-page .team-wrapper .team-num {
  font-size: 1rem;
  color: #35799c;
  background-color: #fff;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  padding: 0 0.5rem;
}

#home-page .wait-for-team {
  text-align: center;
  font-size: 1.5rem;
  color: #35799c;
  margin-top: 1.5rem;
}

#home-page .gray {
  color: #5a7781;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/

#login {
  align-items: stretch;
  background: linear-gradient(314.27deg, rgba(255, 255, 255, 0.8) 0%, rgba(0, 180, 247, 0.8) 100%);
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  height: 100%;
  min-height: 100vh;
  min-width: 100vw;
  overflow: hidden;
  padding: 1rem 0.75rem 3rem;
  position: relative;
  /* Desktop */
}

#login a {
  text-decoration: underline;
}

#login a:hover {
  cursor: pointer;
}

#login .background-img {
  bottom: 0;
  left: -35%;
  position: absolute;
  width: 150%;
}

#login .everest-wrapper {
  text-align: center;
}

#login .everest-logo {
  max-width: 80%;
}

#login .login-error {
  color: #c40808;
  padding: 2rem 0;
}

#login > div,
#login .login-content {
  z-index: 5;
}

#login .login-content {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  min-height: 25vh;
  max-width: 25rem;
  justify-content: space-between;
}

#login .login-content button {
  width: 75%;
}

#login input:disabled {
  opacity: 0.5;
}

#login input::placeholder {
  color: #5e666a;
  opacity: 1;
}

#login .groups-dropdown-wrapper {
  display: flex;
  width: 75%;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
}

#login .groups-dropdown-wrapper .link-button {
  width: unset;
  min-width: unset;
  padding: 0;
}

#login .link-button {
  background-color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  color: #35799c;
  box-shadow: none;
  width: auto;
  height: auto;
  text-decoration: underline;
}

#login .link-button:active,
#login .link-button.active {
  background: none;
  border: none;
  box-shadow: none;
  color: #35799c;
}

#login .reset-modal button {
  margin: 0 1rem 0 1rem;
}

#login .reset-modal h2 {
  text-align: center;
  font-size: 1.3125rem;
  margin-bottom: 1.5rem;
}

#login .reset-modal input {
  margin: 0;
}

#login .reset-modal.default-spacing input {
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  #login {
    flex-flow: row nowrap;
    padding: 0;
    min-height: unset;
  }

  #login .background-img {
    left: 0;
    width: 100%;
  }

  #login .everest-wrapper {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    flex-grow: 2;
  }

  #login .everest-wrapper .logo {
    margin-bottom: 7rem;
  }

  #login .logo-wrapper {
    height: 100%;
    display: flex;
    align-items: flex-start;
  }

  #login .logo-wrapper svg {
    margin: 1rem 3rem 0 1rem;
    height: 3rem;
  }

  #login button {
    margin-top: 1.5rem;
  }

  #login .login-content {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 30px 0 rgba(38, 50, 56, 0.5);
    justify-content: flex-start;
    min-width: 22rem;
    padding: 4rem 0.75rem;
  }

  #login .login-content > p {
    width: 100%;
  }

  #login input {
    margin: 2.5rem 0 0;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/
/* Common */
/* Supplies */
/* Decisions */
/* Round Info - Windchill Table */
/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
@keyframes camp-0-emergency {
  40% {
    bottom: 0;
    right: 50%; }
  60% {
    bottom: 0;
    right: 50%; } }

@keyframes camp-1-emergency {
  40% {
    bottom: 34%;
    right: 3%; }
  60% {
    bottom: 34%;
    right: 3%; } }

@keyframes camp-2-emergency {
  40% {
    bottom: 48%;
    right: 5%; }
  60% {
    bottom: 48%;
    right: 5%; } }

@keyframes camp-3-emergency {
  40% {
    bottom: 67%;
    right: 7%; }
  60% {
    bottom: 67%;
    right: 7%; } }

@keyframes camp-4-emergency {
  40% {
    bottom: 77%;
    right: 18%; }
  60% {
    bottom: 77%;
    right: 18%; } }

@keyframes camp-5-emergency {
  40% {
    bottom: 82%;
    right: 42%; }
  60% {
    bottom: 82%;
    right: 42%; } }

@keyframes hide-tooltips {
  50% {
    left: -100rem; }
  100% {
    left: -100rem; } }

@keyframes hide-tooltip-bars {
  50% {
    left: -100rem; }
  100% {
    left: -100rem; } }

#mountain-page {
  height: calc(100vh - 7rem);
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden; }
  #mountain-page .orange {
    stroke: #ffb31e; }
  #mountain-page .blue {
    stroke: #35799c; }
  #mountain-page .helicopter-wrapper {
    position: absolute;
    width: 30%;
    height: 100%; }
  #mountain-page .helicopter {
    width: 25%;
    bottom: 9%;
    right: 33%;
    position: absolute;
    z-index: 10; }
  #mountain-page .mountain-img-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
    width: max-content; }
    #mountain-page .mountain-img-wrapper:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0.18;
      background: #052B48;
      background-blend-mode: multiply;
      background-attachment: local;
      background-size: 100%;
      background-repeat: no-repeat; }
  #mountain-page .everest-img {
    height: 100%;
    object-fit: contain; }
  #mountain-page .path-to-victory {
    position: absolute;
    z-index: 5;
    height: 80%;
    width: auto;
    top: 13%;
    left: 49%;
    background-color: rgba(255, 255, 255, 0);
    overflow: visible; }
    #mountain-page .path-to-victory text {
      font-weight: 600;
      text-shadow: 2px 2px 2px black, 0 0 1em black, 0 0 0.5em black; }
      #mountain-page .path-to-victory text.altitude {
        font-weight: 500; }
    #mountain-page .path-to-victory.tutorial-highlight text {
      display: unset; }
  #mountain-page .tooltip-bar {
    position: absolute;
    border-bottom: 2px solid #fff;
    box-shadow: 0 0 30px 0 rgba(38, 50, 56, 0.5);
    left: 0;
    z-index: 5; }
  #mountain-page .bar-to-0 {
    top: 87.5%;
    width: 52.2%; }
  #mountain-page .bar-to-1 {
    top: 62.7%;
    width: 61.5%; }
  #mountain-page .bar-to-2 {
    top: 47.5%;
    width: 60.3%; }
  #mountain-page .bar-to-3 {
    top: 28.6%;
    width: 59.9%; }
  #mountain-page .bar-to-4 {
    top: 19.7%;
    width: 56.5%; }
  #mountain-page .bar-to-5 {
    top: 15%;
    width: 49.7%; }
  #mountain-page .camp {
    position: absolute;
    left: 0;
    z-index: 10; }
    #mountain-page .camp .tooltip-triangle-wrapper {
      background: none;
      padding: 0.5rem;
      box-shadow: none;
      min-width: unset;
      position: absolute;
      top: 0;
      right: 0; }
      #mountain-page .camp .tooltip-triangle-wrapper .tooltip-triangle {
        transform: rotate(180deg); }
      #mountain-page .camp .tooltip-triangle-wrapper:focus-visible {
        outline-width: medium;
        outline-style: groove;
        outline-color: Highlight;
        outline: 5px auto -webkit-focus-ring-color; }
      #mountain-page .camp .tooltip-triangle-wrapper.expanded {
        z-index: 20; }
        #mountain-page .camp .tooltip-triangle-wrapper.expanded .tooltip-triangle {
          transform: rotate(0deg); }
        #mountain-page .camp .tooltip-triangle-wrapper.expanded ~ .tooltip-names-wrapper {
          height: auto;
          display: flex;
          flex-direction: column;
          background-color: #fff;
          overflow: visible; }
  #mountain-page .camp-0 {
    bottom: 12.3%; }
  #mountain-page .camp-1 {
    top: 62.7%; }
  #mountain-page .camp-2 {
    top: 47.5%; }
  #mountain-page .camp-3 {
    top: 28.6%; }
  #mountain-page .camp-4 {
    top: 19.7%; }
  #mountain-page .camp-5 {
    top: 15%; }
  #mountain-page .google-attribute {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: .65rem;
    position: absolute;
    bottom: .1rem; }
  @media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    #mountain-page {
      height: 100%; } }
/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/
/* Common */
/* Supplies */
/* Decisions */
/* Round Info - Windchill Table */
/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
@keyframes fade-from-mountain {
  0% {
    opacity: 1; }
  60% {
    opacity: 1; }
  70% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes appear-in-basecamp {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  100% {
    opacity: 1; } }

.mountain-tooltip {
  background-color: #fff;
  width: 8rem;
  box-shadow: 0 0 30px 0 rgba(38, 50, 56, 0.5);
  padding: .5rem;
  position: relative; }
  .mountain-tooltip .tooltip-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: .3rem;
    font-size: 1rem; }
  .mountain-tooltip .tooltip-triangle {
    border-left: .3rem solid transparent;
    border-right: .3rem solid transparent;
    border-bottom: 0.5rem solid #595959; }
  .mountain-tooltip .tooltip-names-wrapper {
    height: 0;
    overflow: hidden; }
  .mountain-tooltip .tooltip-icon {
    display: inline-block;
    opacity: 1; }
  .mountain-tooltip .tooltip-icon-rescued {
    display: inline-block;
    opacity: 0; }
  .mountain-tooltip svg {
    width: 2rem;
    margin-right: .2rem; }
  @media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .mountain-tooltip {
      width: 20rem; }
      .mountain-tooltip svg {
        width: 3rem;
        margin: 0.5rem 0; } }
/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#role {
  padding: 0.25rem 0;
  /* Defaults & Mobile */
}

#role .leader-video-wrapper {
  width: 100%;
}

#role .transcript-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

#role .transcript-wrapper a {
  color: #35799c;
  text-decoration: underline;
}

#role .transcript-wrapper a:hover {
  cursor: pointer;
}

#role .role-icon-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}

#role h2 {
  font-size: 1rem;
  color: black;
  margin: 1.5rem;
}

#role .table-wrapper {
  margin: 0 1.5rem;
  margin-bottom: 1rem;
}

#role .table-wrapper table {
  width: 100%;
  max-width: 32rem;
}

#role .table-wrapper th {
  text-align: left;
  white-space: nowrap;
}

#role .table-wrapper th,
#role .table-wrapper td {
  padding-bottom: 0.75rem;
}

#role .table-wrapper table tr td:nth-child(2) {
  text-align: center;
}

#role .table-wrapper strong {
  color: #35799c;
}

#role .table-wrapper tr:not(.strong-row) td:first-child {
  padding-left: 1rem;
}

#role .table-wrapper tr.top-padding td {
  padding-top: 1.5rem;
}

#role .table-wrapper.rtl th {
  text-align: right;
}

#role #your-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, auto));
  margin: 1rem 1.5rem 2rem 1.5rem;
  row-gap: 1rem;
  column-gap: 1%;
}

#role #your-team .team-member {
  min-width: 32%;
}

#role #your-team .name-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  padding-bottom: 1.25rem;
  white-space: nowrap;
}

#role #your-team .online-status {
  color: #35799c;
  margin: 0 0.25rem;
}

#role #your-team .offline {
  filter: grayscale(0.95) brightness(1);
}

#role .your-team-header {
  margin: 1rem;
  font-size: 1.25rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#round {
  /* Defaults & Mobile */
}

#round .round-instance h2 {
  margin: 0;
}

#round .forecasts {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin: 1rem 0;
}

#round .forecasts .day {
  height: 2rem;
}

#round .forecasts .forecast-icon {
  height: auto;
}

#round .forecasts .temperature {
  height: 3rem;
  font-size: 1.5rem;
}

#round .forecasts .wind-speed span {
  font-size: 1.2rem;
}

#round #three-square {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-bottom: 1rem;
}

#round #three-square .nav-square:first-child {
  width: 100%;
  margin-bottom: 1rem;
}

#round h3 {
  color: #35799c;
  margin: 1rem;
}

#round svg {
  display: block;
  margin: auto;
  height: 100%;
  max-width: 32rem;
}

#round img {
  display: block;
  margin: auto;
  height: 100%;
  max-width: 32rem;
}

#round .extra-goal-image-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#round .extra-goal-image-wrapper div {
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: auto;
  width: 95%;
}

#round .extra-goal-image-wrapper div img {
  height: 100%;
}

#round ul:not(.forecast),
#round ol {
  margin: 1.5rem auto;
  width: calc(100% - 3rem);
  line-height: 1.5;
}

#round ul:not(.forecast) li,
#round ol li {
  margin-left: 3rem;
}

#round ul {
  list-style: disc;
}

#round ol {
  list-style: decimal;
}

#round .table-title {
  text-align: center;
  color: #35799c;
  font-size: 1.2rem;
}

#round #wind-chill {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Temperature F */
}

#round #wind-chill caption {
  position: relative;
  z-index: 1;
  top: -1rem;
}

#round #wind-chill td,
#round #wind-chill th {
  vertical-align: top;
  height: 1rem;
}

#round #wind-chill th {
  color: white;
  background: black;
}

#round #wind-chill thead:first-child td {
  background: white;
  color: black;
}

#round #wind-chill table {
  table-layout: fixed;
}

#round #wind-chill .fix-col1,
#round #wind-chill .fix-col2 {
  background: black;
}

#round #wind-chill .fix-col1 {
  width: 1.25rem;
  max-width: 1.25rem;
  min-width: 1.25rem;
  background: white;
  color: black;
}

#round #wind-chill .fix-col2 {
  color: white;
}

#round #wind-chill .fix-cell {
  background: white;
  color: black;
}

#round #wind-chill .fix-cell span {
  margin-right: calc(1.25rem + 2.5rem);
}

#round #wind-chill .table-wrapper.outer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#round #wind-chill .table-wrapper.inner {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 50rem;
}

@media (max-width: 50rem) {
  #round #wind-chill .table-wrapper.inner {
    overflow-x: scroll;
  }
}

#round #wind-chill td {
  text-align: center;
  min-width: 2.5rem;
  width: 2.5rem;
  max-width: 2.5rem;
  background: #dbe3e7;
  color: black;
}

#round #wind-chill td.thirty-minute {
  color: white;
  background-color: #289ce7;
  opacity: 1;
  background-image: radial-gradient(#441266 0.5px, #289ce7 1px);
  background-size: 5px 5px;
  background-position: 0 0;
  text-shadow: 1px 1px 2px #441266;
}

@media (forced-colors: active) {
  #round #wind-chill td.thirty-minute {
    border: 2px solid LinkText;
  }
}

#round #wind-chill td.ten-minute {
  color: white;
  background-color: #114d73;
  opacity: 0.9;
  background: radial-gradient(circle, transparent 20%, #114d73 20%, #114d73 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #114d73 20%, #114d73 80%, transparent 80%, transparent) 10px 10px, linear-gradient(#769EB6 0.8px, transparent 0.8px) 0 -0.4px, linear-gradient(90deg, #769EB6 0.8px, #114d73 0.8px) -0.4px 0;
  background-size: 10px 10px, 10px 10px, 5px 5px, 5px 5px;
}

@media (forced-colors: active) {
  #round #wind-chill td.ten-minute {
    border: 2px solid Mark;
  }
}

#round #wind-chill td.five-minute {
  color: white;
  background-color: #9e81fc;
  opacity: 1;
  background-image: linear-gradient(45deg, #262666 50%, #9e81fc 50%);
  background-size: 4px 4px;
}

@media (forced-colors: active) {
  #round #wind-chill td.five-minute {
    border: 2px solid ButtonBorder;
  }
}

#round #wind-chill .vertical {
  background-color: transparent;
  vertical-align: middle;
  text-align: center;
}

#round #wind-chill .vertical span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

#round.rtl #wind-chill .table-wrapper.inner {
  margin-left: 0;
}

#round.rtl #wind-chill .vertical span {
  writing-mode: vertical-lr;
  transform: none;
}

#round.rtl #wind-chill .fix-cell {
  background: white;
  color: black;
}

#round.rtl #wind-chill .fix-cell span {
  margin-left: calc(1.25rem + 2.5rem);
  margin-right: 0;
}

#round #wind-chill-legend {
  font-size: 0.8rem;
  display: flex;
  flex-direction: row nowrap;
  align-items: center;
  justify-content: center;
  width: calc(100% - 2rem - 1rem);
  margin-left: 2rem;
}

#round #wind-chill-legend div {
  display: flex;
  align-items: center;
  margin: 0.5rem;
}

#round #wind-chill-legend .legend-box {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  margin-right: 0.5rem;
}

#round #wind-chill-legend .legend-box.thirty-minute {
  background-color: #289ce7;
  opacity: 1;
  background-image: radial-gradient(#441266 0.5px, #289ce7 1px);
  background-size: 5px 5px;
  background-position: 0 0;
}

@media (forced-colors: active) {
  #round #wind-chill-legend .legend-box.thirty-minute {
    border: 2px solid LinkText;
  }
}

#round #wind-chill-legend .legend-box.ten-minute {
  background-color: #114d73;
  opacity: 0.9;
  background: radial-gradient(circle, transparent 20%, #114d73 20%, #114d73 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #114d73 20%, #114d73 80%, transparent 80%, transparent) 10px 10px, linear-gradient(#769EB6 0.8px, transparent 0.8px) 0 -0.4px, linear-gradient(90deg, #769EB6 0.8px, #114d73 0.8px) -0.4px 0;
  background-size: 10px 10px, 10px 10px, 5px 5px, 5px 5px;
}

@media (forced-colors: active) {
  #round #wind-chill-legend .legend-box.ten-minute {
    border: 2px solid Mark;
  }
}

#round #wind-chill-legend .legend-box.five-minute {
  background-color: #9e81fc;
  opacity: 1;
  background-image: linear-gradient(45deg, #262666 50%, #9e81fc 50%);
  background-size: 4px 4px;
}

@media (forced-colors: active) {
  #round #wind-chill-legend .legend-box.five-minute {
    border: 2px solid ButtonBorder;
  }
}

#round #wind-chill-eq {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

#round #wind-chill-eq div {
  font-size: 0.9rem;
  line-height: 1.1rem;
}

#round #wind-chill-eq div:last-child {
  font-size: 0.8rem;
  color: #35799c;
}

#round #wind-chill-eq .nws-credit {
  display: block;
  color: #595959;
  font-size: 0.8rem;
  margin: 1rem 1.5rem;
  text-align: center;
}

#round #hillary-step-svg.rtl {
  transform: scale(-1, 1);
}

#round #hillary-step-svg.rtl g:nth-child(n+10):nth-child(-n+11) a.bar {
  transform: scale(-1, 1) translate(-55px, -50px);
}

#round #hillary-step-svg.rtl g:nth-child(n+12):nth-child(-n+15) a.bar {
  transform: scale(-1, 1) translate(-55px, -45px);
}

#round #hillary-step-svg.rtl a {
  transform: scale(-1, 1);
}

#round #hillary-step-svg.rtl a.svg-title {
  transform: scale(-1, 1) translate(-530px, 0);
}

#round #hillary-step-svg.rtl a.bar {
  transform: scale(-1, 1) translate(-45px, -40px);
}

#round #hillary-step-svg.rtl a.bar * {
  text-anchor: start;
}

#round #hillary-step-svg.rtl a.y-axis {
  transform: scale(-1, 1) translate(-30px);
}

#round #hillary-step-svg.rtl a.y-data:nth-child(17) {
  transform: scale(-1, 1) translate(-80px);
}

#round #hillary-step-svg.rtl a.y-data:nth-child(18) {
  transform: scale(-1, 1) translate(-89px);
}

#round #hillary-step-svg.rtl a.y-data:nth-child(19) {
  transform: scale(-1, 1) translate(-83px);
}

#round #hillary-step-svg.rtl a.y-data:nth-child(20) {
  transform: scale(-1, 1) translate(-93px);
}

#round #hillary-step-svg.rtl a.y-data:nth-child(21) {
  transform: scale(-1, 1) translate(-79px);
}

#round #yellow-band-svg.rtl {
  transform: scale(-1, 1);
}

#round #yellow-band-svg.rtl a {
  transform: scale(-1, 1);
}

#round #yellow-band-svg.rtl a.yellow-top-bottom {
  transform: scale(-1, 1) translate(-98px);
}

#round #yellow-band-svg.rtl a.v-dist {
  transform: scale(-1, 1) translate(-920px, 10px);
}

#round #yellow-band-svg.rtl a.h-dist {
  transform: scale(-1, 1) translate(-470px);
}

#round #yellow-band-svg.rtl a.a {
  transform: scale(-1, 1) translate(-380px);
}

#round #yellow-band-svg.rtl a.b {
  transform: scale(-1, 1) translate(-55px);
}

#round #yellow-band-svg.rtl a.c {
  transform: scale(-1, 1) translate(-20px);
}

#round #yellow-band-svg.rtl a.labelled.a {
  transform: scale(-1, 1) translate(-500px);
}

#round #yellow-band-svg.rtl a.labelled.b {
  transform: scale(-1, 1) translate(-175px);
}

#round #yellow-band-svg.rtl a.labelled.c {
  transform: scale(-1, 1) translate(-140px);
}

#round #yellow-band-svg.rtl a.x {
  transform: scale(-1, 1) translate(0px, 5px);
}

#round #yellow-band-svg.rtl a.yellow-slope {
  transform: scale(-1, 1) translate(-250px, -150px) rotate(62deg);
}

#round #yellow-band-equation-svg.rtl a.a {
  transform: translate(-145px);
}

#round #yellow-band-equation-svg.rtl a.x {
  transform: translate(-125px);
}

#round #yellow-band-equation-svg.rtl a.b {
  transform: translate(200px);
}

#round #yellow-band-equation-svg.rtl path.divisor {
  transform: translate(-160px);
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #round #three-square .nav-square:first-child {
    width: 10rem;
    margin-bottom: 0;
  }

  #round .extra-goal-image-wrapper {
    height: 20rem;
    flex-direction: row;
  }

  #round .extra-goal-image-wrapper div {
    height: 100%;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#supplies {
  padding-top: 1rem;
}

#supplies .speedometer {
  width: 100%;
  background-color: #289ce7;
  height: 8rem;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  color: #233036;
}

#supplies .speedometer dt,
#supplies .speedometer dd {
  margin-left: 1rem;
}

#supplies .speedometer.rtl dt,
#supplies .speedometer.rtl dd {
  margin-left: 0;
  margin-right: 1rem;
}

#supplies .speedometer dt {
  font-size: 0.8rem;
}

#supplies .speedometer dd {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

#supplies .speedometer svg {
  position: absolute;
  fill: currentColor;
  bottom: calc(8rem * -0.03);
  right: calc((0.28 * 100vw) - 87px);
}

#supplies .speedometer svg line {
  stroke: currentColor;
}

#supplies .food-supply-label,
#supplies .team-supply {
  margin: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#supplies .food-supply-label dt,
#supplies .team-supply dt {
  display: flex;
  flex-flow: row nowrap;
}

#supplies .food-supply-label dt .tooltip-container,
#supplies .team-supply dt .tooltip-container {
  display: flex;
  align-items: flex-start;
}

#supplies .food-supply-label dd,
#supplies .team-supply dd {
  color: #35799c;
}

#supplies .team-supply {
  font-size: 1.5rem;
}

#supplies .graph-bar {
  width: calc((100% / 7) - 12px);
  margin-right: 2px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
}

#supplies .graph-bar dt {
  order: 2;
  display: flex;
  justify-content: flex-end;
  height: 2.5rem;
  padding-top: 1rem;
}

#supplies .graph-bar dd {
  height: 4rem;
  order: 1;
  display: flex;
}

#supplies .graph-bar dd div {
  margin-top: auto;
  width: 100%;
  bottom: 0;
  background-color: #289ce7;
  height: 0;
  transition: height 1s ease-in;
}

@media (forced-colors: active) {
  #supplies .graph-bar dd div {
    background-color: CanvasText;
  }
}

#supplies .supplies-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem;
  margin-bottom: 0;
  color: #35799c;
  position: relative;
  line-height: 1.1rem;
}

#supplies .physician-text {
  font-size: 0.83rem;
  color: #595959;
  text-align: center;
}

@media (min-width: 380px) {
  #supplies .speedometer dt {
    font-size: 1rem;
  }

  #supplies .speedometer dd {
    font-size: 2.2rem;
  }
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #supplies {
    padding: 0;
  }

  #supplies h2 {
    text-align: center;
    font-size: 1.25rem;
  }

  #supplies .speedometer svg {
    right: auto;
    left: 50%;
    transform: translate(-50%);
  }

  #supplies .food-supply-label,
  #supplies .team-supply {
    width: 85%;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#survey {
  position: relative;
  z-index: 0;
  /* To give it a a stacking context so radiobars work */
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

#survey .survey-question-wrapper {
  margin-bottom: 4rem;
}

#survey .survey-question {
  display: inline-block;
  margin-bottom: 1rem;
  line-height: 1.5rem;
}

#survey .question-remaining-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem;
  color: #EE0000;
}

#survey button {
  max-width: 17.1875rem;
  margin: 0 auto;
  box-shadow: none;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #survey {
    width: 100%;
    background-color: #fff;
    padding: 0 25% 2rem;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.gray {
  fill: #dbe3e7;
}

#test {
  position: relative;
  z-index: 0;
}

#test h2 {
  border-bottom: solid 2px #35799c;
}

#test section {
  margin: 15px;
  border: none;
}

#test h3,
#test p {
  width: 100%;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

#test h3 {
  font-size: 1.2em;
  color: #01b1f4;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#weather {
  position: relative;
  padding: 1rem 0 0 0;
  min-height: 40rem;
  height: calc(100% - 7rem);
  text-align: center;
  display: flex;
  flex-flow: column nowrap;
}

#weather .forecasts {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin: 2rem 0;
}

#weather .oxygen-level-label {
  position: absolute;
  left: 50%;
  text-align: center;
  transform: translate(-50%);
  bottom: 12rem;
  color: #595959;
  display: flex;
  width: 7.2rem;
  justify-content: space-between;
  margin: 1rem 1.5rem;
  line-height: 1.5;
}

#weather .oxygen-level-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6rem;
}

#weather .oxygen-level-container .oxygen-level {
  position: absolute;
  z-index: -1;
  height: 10rem;
  bottom: 0;
  left: 0;
  border-right: solid 1px #35799c;
}

#weather .oxygen-level-container .oxygen-level-text {
  position: absolute;
  font-size: 2rem;
  line-height: 2.2rem;
  bottom: 100%;
  left: 100%;
  transform: translate(-50%);
  border-bottom: solid 1px #35799c;
}

#weather .oxygen-level-container svg {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #weather {
    height: calc(100% - 14rem);
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#credits {
  display: flex;
  justify-content: space-around;
  flex-flow: column nowrap;
}

#credits img {
  display: block;
  margin: 1rem 1.5rem;
}

#credits .logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#credits .privacy {
  display: flex;
}

#credits .privacy a {
  color: #35799c;
  font-weight: bold;
  text-decoration: underline;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#results .table-wrapper {
  margin: 0 1.5rem;
  margin-bottom: 1rem;
}

#results .table-wrapper table {
  width: 100%;
  max-width: 32rem;
}

#results .table-wrapper thead th {
  min-width: 4.06rem;
}

#results .table-wrapper th {
  text-align: left;
}

#results .table-wrapper th,
#results .table-wrapper td {
  padding-bottom: 0.75rem;
}

#results .table-wrapper table tr td:nth-child(2) {
  text-align: center;
}

#results .table-wrapper strong {
  color: #35799c;
}

#results .table-wrapper tr:not(.strong-row) td:first-child {
  padding-left: 1rem;
}

#results .table-wrapper tr.top-padding td {
  padding-top: 1.5rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#your-team .gray {
  color: #5a7781;
}

#your-team .team-member {
  display: flex;
}

#your-team .unassigned {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.header {
  /* Default to mobile settings */
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  background-image: none;
  position: relative;
  height: 7rem;
  /* Stores primary header text (Everest | Day | Page) */
  /* Leadership and Teamwork Simulation: Everest */
  /* Desktop Header */
}

.header .tutorial-highlight {
  border-radius: 0 !important;
  background-color: #fff !important;
  color: #35799c !important;
}

.header .survey-header-title {
  display: none;
}

.header .flexible {
  flex-shrink: 2;
  flex-grow: 2;
  flex-basis: 10%;
  text-align: center;
  padding: 0.2rem;
}

.header .desktop {
  display: none;
}

.header[data-color] {
  border-top: solid 1px;
  border-image: linear-gradient(to right, currentColor 0%, transparent 100%);
  border-image-slice: 1;
}

.header h1.header-text,
.header .page-heading {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 1rem;
}

.header h1.header-text span,
.header .page-heading span {
  display: none;
  color: #35799c;
}

.header h1.header-text span.mobileText,
.header .page-heading span.mobileText {
  display: inline;
}

.header h2.header-text-2 {
  text-indent: -10000px;
  text-align: left;
  font-size: 1rem;
}

.header h2.header-text-2.rtl {
  text-align: right;
}

.header div.header-visual {
  display: flex;
  position: relative;
  flex-flow: column nowrap;
  align-items: center;
  color: initial;
}

.header .header-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.header .header-overlay .sunny,
.header .header-overlay .mood,
.header .header-overlay .shade {
  position: inherit;
  left: inherit;
  top: inherit;
  width: inherit;
  height: inherit;
}

.header .header-overlay .sunny {
  opacity: 0.5;
  background-image: linear-gradient(90deg, #FFFFFF 0%, #FFED00 100%);
  background-blend-mode: darken;
  background-attachment: local;
  background-size: 100%;
  background-repeat: no-repeat;
}

.header .header-overlay .mood {
  opacity: 0.3;
  background-image: linear-gradient(-130deg, #FFFFFF 0%, #00B4F7 100%);
  background-blend-mode: darken;
  background-attachment: local;
  background-size: 100%;
  background-repeat: no-repeat;
}

.header .header-overlay .shade {
  opacity: 0.4;
  background: #052B48;
  background-blend-mode: multiply;
  background-attachment: local;
  background-size: 100%;
  background-repeat: no-repeat;
}

.header:not(.with-background) .header-overlay {
  display: none;
}

.header.with-background {
  justify-content: center;
  align-items: flex-end;
  background: unset;
}

.header.with-background div.header-visual,
.header.with-background .flexible {
  display: none;
}

.header.with-background h1.header-text,
.header.with-background .page-heading {
  display: block;
  font-size: 2em;
  text-shadow: none;
  background: #fff;
  margin-bottom: 0;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  height: 4rem;
}

.header.with-background h1.header-text span,
.header.with-background .page-heading span {
  padding: 0 1.25rem;
  color: #263238;
  display: inline;
  border-right: solid 2px currentColor;
}

.header.with-background h1.header-text span:last-of-type,
.header.with-background .page-heading span:last-of-type {
  border-right: none;
}

.header.with-background h1.header-text.rtl span:not(:last-of-type),
.header.with-background .page-heading.rtl span:not(:last-of-type) {
  border-right: none;
  border-left: solid 2px currentColor;
}

.header.with-background.std-header {
  background-image: url(f1ae3b37e14a88d1ad567f464277171a.jpg);
  opacity: 0.75;
  background-blend-mode: overlay;
  background-attachment: local;
  background-size: 100%;
  background-position: 0 95%;
  background-repeat: no-repeat;
}

.header.with-background.role-header {
  background-image: url(0acbce9f805eab96403cb210856b16ad.jpg);
  background-blend-mode: overlay;
  background-attachment: local;
  background-size: 100%;
  background-position: 0 55%;
  background-repeat: no-repeat;
}

.header.with-background.role-header .team-num {
  font-size: 1.25rem;
  color: #35799c !important;
  margin: 0.25rem 0 0 0;
}

.header.with-background[class^="camp"] {
  /* Using ::after to display background image here in particular
             * b/c opacity on parent element changes z-index context */
}

.header.with-background[class^="camp"] .header-overlay {
  display: none;
}

.header.with-background[class^="camp"]::after {
  opacity: 0.75;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background-blend-mode: overlay;
  background-attachment: local;
  background-size: 100%;
  background-position: 0 95%;
  background-repeat: no-repeat;
}

.header.with-background.camp0-header::after {
  background-image: linear-gradient(-135deg, rgba(126, 87, 194, 0.75) 0%, rgba(255, 152, 0, 0.75) 100%), url(10d5c4b3744960b67ba3ad2951fb9a2c.jpg);
}

.header.with-background.camp1-header::after {
  background-image: linear-gradient(-135deg, rgba(126, 87, 194, 0.75) 0%, rgba(255, 152, 0, 0.75) 100%), url(ada6949fc21b5bfe764616d851731367.jpg);
}

.header.with-background.camp2-header::after {
  background-image: linear-gradient(-135deg, rgba(126, 87, 194, 0.75) 0%, rgba(255, 152, 0, 0.75) 100%), url(4c7aa978be97a8d423c5c7d0a701f0a5.jpg);
}

.header.with-background.camp3-header::after {
  background-image: linear-gradient(-135deg, rgba(126, 87, 194, 0.75) 0%, rgba(255, 152, 0, 0.75) 100%), url(ab358c8187ea30c7ea9ce30b30c47dde.jpg);
}

.header.with-background.camp4-header::after {
  background-image: linear-gradient(-135deg, rgba(126, 87, 194, 0.75) 0%, rgba(255, 152, 0, 0.75) 100%), url(91207f8732ef425178200a1022ccbb9d.jpg);
}

.header.with-background.camp5-header::after {
  background-image: linear-gradient(-135deg, rgba(126, 87, 194, 0.75) 0%, rgba(255, 152, 0, 0.75) 100%), url(96c0769e9e86c58134cc9d99763a8fda.jpg);
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .header {
    justify-content: center;
    align-items: flex-end;
    height: 14rem;
  }

  .header[data-color] {
    border-top: none;
  }

  .header div.header-visual,
  .header .flexible {
    display: none;
  }

  .header h1.header-text,
  .header .page-heading {
    margin-bottom: 0.5rem;
    font-size: 2em;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.9);
    display: block;
    text-shadow: none;
    background: #fff;
    margin-bottom: 0;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    height: 4rem;
  }

  .header h1.header-text span,
  .header .page-heading span {
    padding: 0 1.25rem;
    color: #263238;
    display: inline;
    border-right: solid 2px currentColor;
  }

  .header h1.header-text span:last-of-type,
  .header .page-heading span:last-of-type {
    border-right: none;
  }

  .header h1.header-text.rtl span:not(:last-of-type),
  .header .page-heading.rtl span:not(:last-of-type) {
    border-right: none;
    border-left: solid 2px currentColor;
  }

  .header:not(.with-background) .header-overlay,
  .header.survey-header .header-overlay {
    display: unset;
  }

  .header.std-header {
    background-image: url(f1ae3b37e14a88d1ad567f464277171a.jpg);
    opacity: 1;
    background-blend-mode: overlay;
    background-attachment: local;
    background-size: 100%;
    background-position: 0 95%;
    background-repeat: no-repeat;
  }

  .header.survey-header {
    min-height: 5rem;
    max-height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header.survey-header h1.header-text {
    display: none;
  }

  .header.survey-header .survey-header-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-indent: 0;
    color: #35799c;
    flex-direction: column;
  }

  .header.survey-header .survey-header-title span {
    position: relative;
  }

  .header.survey-header .survey-header-title .survey-header-text {
    font-size: 1rem;
    margin: 0.3rem;
    margin-left: 0;
  }

  .header.survey-header .survey-header-title .survey-icon {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-120%, calc(-25% + 0.5rem));
  }

  .header.survey-header div.header-overlay {
    display: none;
  }
}

/* Desktop Dashboard Header */

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .mobile.team-num {
    font-size: 1.25rem;
    color: white;
    margin: 0.25rem 0 0 0;
  }

  .header.sidebar {
    display: flex;
    align-items: center;
    background-image: none;
    background: none;
    min-height: 5rem;
    max-height: 5rem;
    border-color: transparent;
  }

  .header.sidebar.with-background {
    background: none;
  }

  .header.sidebar div.header-overlay,
  .header.sidebar h1.header-text {
    display: none;
  }

  .header.sidebar h2.header-text-2 {
    text-indent: 0;
    display: block;
    color: #35799c;
  }

  .header.sidebar div.header-visual {
    display: block;
    margin: 0 1rem;
  }

  .header.sidebar div.header-visual .nav-blips {
    display: none;
  }
}

#nav-button {
  position: absolute;
  z-index: 15;
  right: 0;
  top: 0;
  padding: 0;
  width: 4rem;
  min-width: 4rem;
  height: 3rem;
  background: transparent;
  box-shadow: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0;
  -webkit-appearance: none;
          appearance: none;
  transition: background .2s;
  color: #35799c;
}

#nav-button:focus {
  outline: none;
}

#nav-button:focus-visible {
  outline-width: medium;
  outline-style: groove;
  outline-color: Highlight;
  outline: 5px auto;
}

#nav-button.white {
  color: white;
}

#nav-button span {
  height: 1px;
  background: currentColor;
  display: block;
  position: absolute;
  width: 2rem;
  left: 1rem;
}

#nav-button span:before,
#nav-button span:after {
  display: block;
  content: '';
  height: 1px;
  position: absolute;
  width: 1.4rem;
  background: currentColor;
  transition-duration: .3s, .1s;
  transition-delay: .1s, 0;
}

#nav-button span:before {
  top: -0.6rem;
  left: 0.6rem;
  transition-property: top, left, width, transform;
}

#nav-button span:after {
  top: 0.6rem;
  transition-property: top, left, width, transform;
}

#nav-button .chat-notif {
  background-color: #ff4d4d;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  position: absolute;
  top: 0.5rem;
  left: 2rem;
  z-index: 10;
}

#nav-button .chat-notif:before,
#nav-button .chat-notif:after {
  display: none;
}

#nav-button.active {
  color: white;
}

#nav-button.active span {
  background: none;
}

#nav-button.active span:before,
#nav-button.active span:after {
  top: 0;
  width: 2rem;
  left: unset;
}

#nav-button.active span:before {
  transform: rotate(45deg);
}

#nav-button.active span:after {
  transform: rotate(-45deg);
}

/* Dots */

.nav-blips {
  position: absolute;
  bottom: -1rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.nav-blips li {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.375rem;
  background-color: #595959;
  border-radius: 50%;
}

.nav-blips li.active-blip {
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
  background-color: #35799c;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#nav {
  /* Defaults & Mobile */
  display: flex;
  flex-flow: column;
  color: white;
  text-align: center;
}

#nav.hidden {
  display: none;
}

#nav .nav-tutorial-modal {
  position: absolute;
  right: 0;
  width: calc(4.5rem + 1px);
  height: 100%;
  background-color: #000;
  opacity: 0.2;
  z-index: 15;
}

#nav .chat-notif {
  border-radius: 50%;
  border: 0.5rem solid #ff4d4d;
  display: block;
  height: 1rem;
  position: absolute;
  right: 0.5rem;
  width: 1rem;
  z-index: 10;
}

#nav .nav-list {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

#nav #nav-list-element {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

#nav a {
  color: inherit;
  text-decoration: none;
}

#nav li {
  display: inline-block;
  width: 60%;
  padding: 0.5rem;
  position: relative;
}

#nav li:nth-child(4) {
  border-bottom: solid 2px white;
}

#nav .nav-list-container {
  z-index: 10;
  position: fixed;
  opacity: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #35799c;
  display: flex;
  align-items: center;
  transition-property: bottom, opacity;
  transition-duration: .1s;
  transition-timing-function: ease-in;
  overflow-y: auto;
  pointer-events: none;
}

@media (max-width: 1280px) {
  #nav .nav-list-container {
    right: 0 !important;
  }
}

#nav .nav-list-container.rtl {
  left: 0;
  right: auto;
}

@media (max-width: 1280px) {
  #nav .nav-list-container.rtl {
    left: 0 !important;
    right: auto !important;
  }
}

#nav .nav-list-container.open {
  z-index: 10;
  opacity: 1;
  bottom: 0;
  overflow-y: scroll;
  pointer-events: all;
}

#nav .open-close-nav-button-wrapper {
  display: none;
}

#nav li:not(.tutorial-highlight) a[disabled] {
  opacity: 0.3;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #nav {
    color: #35799c;
    height: calc(100vh - 2rem);
  }

  #nav #nav-list-element {
    height: 100%;
    width: 100%;
    display: grid;
    justify-content: flex-end;
    align-items: flex-start;
    grid-auto-rows: min-content;
    grid-template-columns: 1fr auto;
  }

  #nav .chat-notif {
    right: 0rem;
    top: 1rem;
  }

  #nav a {
    color: inherit;
    text-decoration: none;
  }

  #nav li {
    display: grid;
    width: 60%;
    padding: 0.5rem;
    position: relative;
    grid-row: span 3;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
  }

  #nav li:nth-child(4) {
    border-bottom: solid 2px white;
  }

  #nav li.child-11 {
    display: inline-block;
    margin-top: 2.5rem;
    grid-column: 1;
    grid-row: 33;
  }

  #nav li.child-12 {
    display: inline-block;
    grid-column: 1;
    grid-row: 34;
  }

  #nav li.child-13 {
    display: inline-block;
    grid-column: 1;
    grid-row: 35;
  }

  #nav .dots {
    grid-column: 2;
    grid-row: 33 / 36;
    margin-top: 2rem;
  }

  #nav .nav-list {
    margin: 0;
    margin-top: 3rem;
    height: auto;
    width: 100%;
    justify-content: flex-start;
  }

  #nav .nav-prop-box {
    width: 4.5rem;
    height: 100%;
  }

  #nav .icon {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    margin: calc((4.5rem - 1.5rem) / 2);
    font-size: 0.7em;
    position: relative;
    left: 10px;
    /* To offset the border on the left: -1px on the li */
  }

  #nav .nav-text {
    white-space: nowrap;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #nav .open-close-nav-button-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 3.5rem;
    min-height: 3.5rem;
    align-items: center;
    position: relative;
    background-color: #35799c;
  }

  #nav .open-close-nav-button-wrapper span {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #fff;
    margin-right: 1rem;
  }

  #nav .open-close-nav-button-wrapper button {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    min-width: 2rem;
    margin: 0 0.75rem 0 1.25rem;
    padding: 0;
    background: unset;
    box-shadow: unset;
  }

  #nav .open-close-nav-button-wrapper img {
    width: 2rem;
  }

  #nav .nav-list-container {
    width: 4.5rem;
    height: calc(100vh - 2rem);
    opacity: 1;
    right: calc((100vw - 1280px) / 2);
    bottom: 0;
    align-items: normal;
    background-color: #fcf9f9;
    border-left: solid 1px #35799c;
    pointer-events: all;
    overflow-x: hidden;
  }

  #nav .nav-list-container.rtl {
    right: auto;
    left: calc((100vw - 1280px) / 2);
    border-left: none;
    border-right: solid 1px #35799c;
  }

  #nav .nav-list-container.rtl .icon {
    left: 0;
  }

  #nav .nav-list-container .gray {
    fill: #333333;
  }

  #nav .nav-list-container li {
    position: relative;
    left: -1px;
    width: 100%;
    padding: 0;
    border: solid 1px transparent;
    border-left: solid 1px #35799c;
    background-color: inherit;
    z-index: 1;
  }

  #nav .nav-list-container li:nth-child(4) {
    border-bottom: none;
  }

  #nav .nav-list-container li.highlight a {
    color: initial;
    background-color: white;
    border: solid 1px #35799c;
    border-left: none;
    border-right: none;
  }

  #nav .nav-list-container li.tutorial-highlight a {
    background-color: white;
    z-index: 15;
  }

  #nav .nav-list-container li .nav-item {
    justify-content: flex-end;
    align-items: center;
    right: 0;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: subgrid;
  }

  #nav .nav-list-container.rtl li {
    border-left: none;
  }

  #nav .nav-list-container.keep-open {
    width: 18rem;
    box-shadow: -0.2rem 0px 2rem 0.2px rgba(0, 0, 0, 0.5);
    transition-property: width;
    transition-duration: .1s;
    transition-timing-function: ease-in;
    overflow-y: scroll;
  }
}

@media (min-width: 1024px) and (min-height: 690px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) and (min-height: 690px) {
  #nav .nav-list-container li:nth-child(10) {
    margin-bottom: 2rem;
  }
}

.dots-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.dots-icon .dots-center {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #333333;
}

.dots-icon .dots-center:before,
.dots-icon .dots-center:after {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #333333;
  content: '';
  display: block;
}

.dots-icon .dots-center:before {
  top: -0.8rem;
}

.dots-icon .dots-center:after {
  top: 0.8rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.chart {
  height: 100%;
  margin: 0 2rem;
  flex-grow: 2;
}

.chart-wrapper {
  display: flex;
  flex-flow: row nowrap;
  height: 20rem;
}

.stacked {
  align-items: flex-end;
  display: flex;
  flex-flow: column nowrap;
}

.bar-wrapper {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  flex-basis: 1px;
}

.bar {
  position: relative;
}

.bar.fixed {
  width: 3.5rem;
}

.bar.dynamic {
  min-width: 0.3rem;
  max-width: 5.5rem;
}

.bar.bar-stacked {
  margin-right: 1rem;
  align-self: stretch;
}

.bar .tooltip {
  display: none;
  position: absolute;
  height: 100%;
}

.bar .percent-label {
  position: absolute;
  top: -1rem;
  background: rgba(255, 255, 255, 0.8);
  z-index: 5;
}

.bar .user-label {
  position: absolute;
  bottom: -1.5rem;
}

.col-wrapper:hover .tooltip {
  display: block;
}

.pointer {
  background-color: #595959;
  height: 2px;
  width: 2.5rem;
  margin-right: -0.75rem;
  z-index: 10;
  margin-left: 0.25rem;
}

.title {
  border-top: 2px solid #595959;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  width: 7.5rem;
}

.labels {
  border-top: 1px solid #595959;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin: 0 1rem;
  padding: 0.25rem 0 0.75rem;
}

.labels > div {
  display: flex;
  justify-content: center;
  width: 100%;
}

.column {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 2;
  align-items: stretch;
  justify-content: space-around;
  margin: 0 1rem;
}

.column-wrapper {
  display: flex;
  flex-flow: column nowrap;
  margin: 0 2rem;
  width: 100%;
}

.col-wrapper {
  display: flex;
  flex-flow: column nowrap;
}

.column-title {
  padding: 1.5rem 0 0.5rem 0;
  width: 100%;
}

.value {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  font-size: 1.25rem;
}

.bar-0 {
  background-color: #ff4d4d;
}

.bar-1 {
  background-color: #01b1f4;
}

.bar-2 {
  background-color: #ffb31e;
}

.bar-3 {
  background-color: #fe0;
}

.bar-4 {
  background-color: #35799c;
}

.bar-5 {
  background-color: #6EA424;
}

.bar-6 {
  background-color: #8254ff;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.dropdown-wrapper {
  display: inline-block;
  position: relative;
  border-bottom: 1px solid #35799c;
  height: 2rem;
}

.dropdown-wrapper:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: calc((2rem / 2) - (0.4rem / 2));
  right: 0.5rem;
  pointer-events: none;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.4rem solid #35799c;
}

.dropdown-wrapper.disabled {
  color: #dbe3e7;
}

.dropdown-wrapper.disabled:before {
  border-top-color: currentColor;
}

.dropdown-wrapper.disabled .dropdown {
  border-bottom-color: currentColor;
  color: currentColor;
}

.dropdown-wrapper.disabled .dropdown:hover {
  background-color: inherit;
}

.dropdown-wrapper .dropdown {
  -webkit-appearance: none;
          appearance: none;
  outline: none;
  border-radius: 0;
  border: none;
  height: 100%;
  width: 100%;
  background-color: white;
  font-weight: bold;
  padding: 0 4rem 0 0.5rem;
}

.dropdown-wrapper .dropdown:focus-visible {
  outline-width: medium;
  outline-style: groove;
  outline-color: Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

.dropdown-wrapper .dropdown:focus {
  background-color: white;
}

.label-reverse {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.75rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.forecast {
  margin: 0 1rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  min-width: 6rem;
}

.forecast li {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 2.5rem;
  width: 100%;
  list-style: none;
}

.forecast .day {
  color: #595959;
}

.forecast .forecast-icon {
  height: 6rem;
  align-items: center;
}

.forecast .temperature,
.forecast .wind-speed,
.forecast .direction-icon {
  padding-bottom: 0.2rem;
}

.forecast .wind-speed span {
  font-size: 1.6rem;
}

.forecast .temperature {
  font-size: 2rem;
}

.forecast .direction-icon[data-dir="0"] {
  transform: rotate(45deg);
}

.forecast .direction-icon[data-dir="1"] {
  transform: rotate(90deg);
}

.forecast .direction-icon[data-dir="2"] {
  transform: rotate(135deg);
}

.forecast .direction-icon[data-dir="3"] {
  transform: rotate(180deg);
}

.forecast .direction-icon[data-dir="4"] {
  transform: rotate(225deg);
}

.forecast .direction-icon[data-dir="5"] {
  transform: rotate(270deg);
}

.forecast .direction-icon[data-dir="6"] {
  transform: rotate(315deg);
}

.forecast .direction-icon[data-dir="7"] {
  transform: rotate(360deg);
}

.forecast .temperature {
  border-bottom: solid 2px #35799c;
  padding-bottom: 0.6rem;
  height: 4rem;
}

.forecast.enlarge .forecast-icon .icon {
  width: 3.5rem;
  height: 3.5rem;
}

.forecast.enlarge .temperature {
  font-size: 1.8rem;
  font-weight: bold;
}.observer-icon {
  height: 40px;
  width: 42px;
  display: inline-block;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.message {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  height: auto;
  width: auto;
}

.message div {
  width: 100%;
}

.message p {
  display: inline-block;
  word-wrap: break-word;
  word-break: normal;
  padding: 1rem;
  background-color: #dbe3e7;
  margin: 0 0 0 1rem;
  max-width: 75%;
}

.message .message-bot {
  display: flex;
  width: 2rem;
  height: 1rem;
  background-color: #dbe3e7;
  justify-content: flex-end;
}

.message .triangle {
  display: flex;
  width: 1rem;
  border-top: 1rem solid #595959;
  border-left: 1rem solid transparent;
}

.message .from-me {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.message .from-me div {
  display: flex;
  justify-content: flex-end;
}

.message .from-me p {
  background-color: #01b1f4;
  margin-right: 1rem;
}

.message .from-me .message-bot {
  background-color: #01b1f4;
  justify-content: flex-start;
}

.message .from-me .triangle {
  border-left: none;
  border-top: 1rem solid #35799c;
  border-right: 1rem solid transparent;
}

.message .message-info {
  color: #595959;
  font-size: 0.8rem;
  font-style: italic;
  padding: 0.25rem 0.5rem;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .message p {
    margin-left: 2rem;
  }

  .message .message-bot {
    background: linear-gradient(315deg, #dbe3e7 0%, rgba(255, 255, 255, 0.8) 100%);
    width: 3rem;
  }

  .message .from-me span {
    margin-right: 2rem;
  }

  .message .from-me .message-bot {
    background: linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, #01b1f4 70%);
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.nav-square {
  height: 8rem;
  display: flex;
  gap: 0.75rem;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  color: currentColor;
}

.nav-square.active {
  background: #35799c;
  color: #fff;
}

.nav-square .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.nav-square .dashboard-role-icon {
  width: 3rem;
  height: 3rem;
}

.nav-square div {
  text-align: center;
  width: 100%;
  color: currentColor;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.radio-bar {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 2em;
  padding: 0;
}

.radio-bar .input-container {
  position: relative;
  height: 1.1rem;
}

.radio-bar .input-container label {
  text-align: center;
  position: absolute;
  top: 1.1rem;
  padding-top: 0.5rem;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -10000px;
}

.radio-bar .input-container label.primary {
  color: #35799c;
  text-indent: 0;
}

.radio-bar .input-container input {
  -webkit-appearance: none;
          appearance: none;
  border-radius: 0;
  height: 1.1rem;
  width: 100%;
  border-left: solid 1px #35799c;
  border-top: solid 1px #35799c;
  border-bottom: solid 1px #35799c;
  background-color: white;
}

.radio-bar .input-container:last-child input {
  border-right: solid 1px #35799c;
}

.radio-bar:hover .input-container input {
  background-color: #35799c;
}

@media (forced-colors: active) {
  .radio-bar:hover .input-container input {
    background-color: CanvasText;
  }
}

.radio-bar:hover .input-container label {
  text-indent: -10000px;
}

.radio-bar:hover .input-container:hover ~ .input-container input {
  background-color: white;
}

.radio-bar:hover .input-container:hover label {
  text-indent: 0;
  color: #35799c;
}

.radio-bar.selected .input-container input {
  background-color: #35799c;
}

@media (forced-colors: active) {
  .radio-bar.selected .input-container input {
    background-color: CanvasText;
  }
}

.radio-bar.selected .input-container input:after {
  content: "";
  border: inherit;
  display: block;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.radio-bar.selected .input-container label {
  text-indent: -10000px;
}

.radio-bar.selected .input-container.active label {
  text-indent: 0;
  color: #35799c;
}

.radio-bar.selected .input-container.active ~ .input-container input {
  background-color: white;
  position: relative;
}

.radio-bar.selected .input-container.active ~ .input-container input:after {
  opacity: 0;
}

.radio-bar.selected:hover .input-container.active label {
  text-indent: -10000px;
}

.radio-bar.selected:hover .input-container input {
  background-color: #35799c !important;
}

@media (forced-colors: active) {
  .radio-bar.selected:hover .input-container input {
    background-color: CanvasText !important;
  }
}

.radio-bar.selected:hover .input-container input:after {
  opacity: 0;
}

.radio-bar.selected:hover .input-container label {
  text-indent: -10000px;
}

.radio-bar.selected:hover .input-container:hover ~ .input-container input {
  background-color: white !important;
}

.radio-bar.selected:hover .input-container:hover label {
  text-indent: 0;
  color: #35799c;
}

.disabled {
  pointer-events: none;
}

.disabled .input-container input {
  background-color: #595959;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.radio-group div {
  display: flex;
  padding: 0.15rem 0;
  align-items: center;
}

.radio-group label {
  cursor: pointer;
}

.radio-group input[type='radio'] {
  visibility: hidden;
  width: 0;
}

.radio-group input:focus + label .radio {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

.radio-group input:disabled + label {
  color: rgba(38, 50, 56, 0.45);
  cursor: not-allowed !important;
}

.radio-group input:disabled + label .radio {
  border: 1px solid rgba(38, 50, 56, 0.45) !important;
  background-color: white;
}

.radio-group input:disabled + label .radio.active {
  background-color: #dbe3e7 !important;
}

.radio-group .radio {
  border: 1px solid #000;
  border-radius: 50%;
  display: inline-block;
  height: 1rem;
  margin-right: 0.5rem;
  width: 1rem;
  position: relative;
}

.radio-group .radio:hover {
  background-color: #dbe3e7;
}

.radio-group .radio.active {
  background-color: #0b4c8c;
}

.radio-group .radio.active::after {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  background-color: #fff;
  display: block;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  border-radius: 0.5rem;
}

.radio-group .radio.rtl {
  margin-right: 0;
  margin-left: 0.5rem;
}

.radio-group .option label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
}

.radio-group .option label .sub-text {
  grid-column: 1 / 3;
}

.radio-group.horizontal {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.radio-group.horizontal .option {
  min-width: fit-content;
  margin-right: 1rem;
}

.radio-group.horizontal div {
  flex-basis: 1rem;
  flex-grow: 2;
}

.radio-group .sub-text {
  display: inline-block;
  font-size: 0.75rem;
  color: #526b74;
  padding: 0.5rem 1.25rem;
}

.radio-group .content {
  display: flex;
  align-items: center;
}

.radio-group .content .tooltip {
  margin-left: 0.75rem;
}

.radio-group .content .tooltip-text {
  min-width: 15rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.input-wrapper {
  margin: 0.4rem 0;
  position: relative;
  width: 100%;
}

.input-wrapper label {
  bottom: 3px;
  left: 1px;
  opacity: 0.55;
  position: absolute;
}

.text-input {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #052b48;
  color: #263238;
  font-family: "Quattrocento Sans", sans-serif;
  width: 100%;
}

.text-input.box {
  border: 1px solid #35799c;
  resize: none;
}

.text-input:disabled {
  color: #595959;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.slider {
  display: flex;
  flex-flow: column nowrap;
  margin: 0.5rem;
  /* Base Styles */
  /* Thumb */
  /* Track */
  /*hide the outline behind the border*/
}

.slider div.slide-value {
  display: flex;
  flex-flow: row nowrap;
  font-size: 2rem;
  line-height: 2rem;
  text-align: left;
}

.slider div.slide-value .filler {
  flex-shrink: 2;
}

.slider div.slide-value .the-value {
  height: 2rem;
  width: fit-content;
  text-align: center;
  flex-shrink: 0;
}

.slider div.min-max-wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.slider input[type=range] {
  width: 100%;
  background: transparent;
  border: 1px solid white;
  margin: 0.5rem 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.slider input[type=range]:focus {
  outline: none;
  /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.slider input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.slider input[type=range]::-webkit-slider-thumb {
  border: none;
  height: 19px;
  width: 19px;
  border-radius: 50%;
  background: #35799c;
  cursor: pointer;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.2s;
  margin-top: -6px;
}

.slider input[type=range]::-moz-range-thumb {
  border: none;
  height: 19px;
  width: 19px;
  border-radius: 50%;
  background: #35799c;
  cursor: pointer;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.2s;
}

.slider input[type=range]::-ms-thumb {
  border: none;
  height: 19px;
  width: 19px;
  border-radius: 50%;
  background: #35799c;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.slider input[type=range]:focus {
  outline: none;
}

.slider input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 15px rgba(53, 121, 156, 0.25);
}

.slider input[type=range]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 15px rgba(53, 121, 156, 0.25);
}

.slider input[type=range]:focus::-ms-thumb {
  box-shadow: 0 0 0 15px rgba(53, 121, 156, 0.25);
}

.slider input[type=range]:active {
  outline: none;
}

.slider input[type=range]:active::-webkit-slider-thumb {
  width: 23px;
  height: 23px;
  margin-top: -8px;
}

.slider input[type=range]:active::-moz-range-thumb {
  width: 23px;
  height: 23px;
}

.slider input[type=range]:active::-ms-thumb {
  width: 23px;
  height: 23px;
}

.slider input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: #dbe3e7;
  border: none;
  border-radius: 3px;
}

.slider input[type=range]:focus::-webkit-slider-runnable-track {
  background: #595959;
}

.slider input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  background: #dbe3e7;
  border: none;
  border-radius: 3px;
}

.slider input[type=range]:focus::-moz-range-track {
  background: #595959;
}

.slider input[type=range]::-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

.slider input[type=range]::-ms-track {
  width: 100%;
  height: 8px;
  border: none;
  border-radius: 3px;
}

.slider input[type=range]::-ms-fill-lower {
  background: #35799c;
}

.slider input[type=range]::-ms-fill-upper {
  background: #dbe3e7;
}

.slider input[type=range]:focus::-ms-fill-upper {
  background: #595959;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .slider {
    margin: 0.5rem auto;
    width: 60%;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.video-wrapper-wrapper {
  max-width: 865px;
  margin: auto;
}

.video-wrapper-wrapper .video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video-wrapper-wrapper .video-wrapper .kaltura-player-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.video-wrapper-wrapper .video-wrapper.rtl .playkit-player:not(.playkit-touch) .playkit-smart-container.playkit-left {
  left: 0px;
  right: unset;
}

.video-wrapper-wrapper button {
  all: unset;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/
/* Common */
/* Supplies */
/* Decisions */
/* Round Info - Windchill Table */
/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
@keyframes pulse {
  50% {
    background: #fff; } }

.loading .pulse-loading {
  animation: pulse 750ms infinite;
  animation-delay: 250ms;
  background: rgba(38, 50, 56, 0.45);
  border-radius: 0.25rem;
  height: 4rem;
  left: 0;
  margin: 6.5rem auto;
  position: fixed;
  right: 0;
  top: 25vh;
  width: 1rem;
  z-index: 100; }
  .loading .pulse-loading:before, .loading .pulse-loading:after {
    animation: pulse 750ms infinite;
    background: rgba(38, 50, 56, 0.45);
    border-radius: 0.25rem;
    content: '';
    display: block;
    height: 2.66667rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem; }
  .loading .pulse-loading:before {
    left: -2rem; }
  .loading .pulse-loading:after {
    animation-delay: 500ms;
    left: 2rem; }

.loading-background-cover {
  background: #000;
  bottom: 0;
  left: 0;
  opacity: 0.72;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99; }
/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
dialog {
  padding: 0 !important;
  overflow: visible;
  border: none;
}

dialog::backdrop {
  background: none;
}

.dialog-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 90;
  pointer-events: none;
}

.modal {
  pointer-events: all;
  padding: 1.5rem;
  min-width: 21.875rem;
  border-radius: 5px;
  color: black;
  background: white;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  font-size: 1rem;
  box-shadow: 0 0 30px 0 rgba(38, 50, 56, 0.5);
  max-height: 90vh;
  height: fit-content;
  overflow: auto;
  border: none;
}

.modal h2 {
  color: #35799c;
  font-size: 1.2rem;
}

.modal p {
  margin: 0 auto;
  margin-bottom: 1rem;
  width: 100%;
  line-height: 1.5rem;
  color: black;
}

.modal ul {
  margin: 1rem;
  margin-top: 0;
  align-self: left;
}

.modal button {
  -webkit-user-select: none;
          user-select: none;
}

.modal.warning {
  border-radius: 0;
  border-top: 20px solid #ff4d4d;
}

.modal.warning h3 {
  width: 100%;
}

.modal.warning .modal-button-wrapper {
  margin-top: 2rem;
  width: 100%;
}

.modal-button-wrapper {
  width: 85%;
  display: flex;
  justify-content: space-around;
}

.modal-button-wrapper button {
  display: flex;
  justify-content: center;
  min-width: 7rem;
  min-height: 3.125rem;
  padding: 1rem 2rem;
}

.your-team .modal-button-wrapper {
  margin-top: 1rem;
}

button.button-type-anchor {
  background: none;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: 1rem;
  color: #35799c;
  text-decoration: underline;
  cursor: pointer;
  display: inline;
}

button.button-type-anchor:hover {
  background: none;
  color: #01b1f4;
}

button.button-type-anchor:active {
  background: none;
  color: #35799c;
}

dialog[class^="tutorial-"] {
  transform: unset;
  min-width: unset;
  position: absolute;
}

dialog[class^="tutorial-"] .modal-button-wrapper {
  margin-top: 1rem;
  position: relative;
  margin-bottom: 1.1rem;
  width: 16.875rem;
}

dialog[class^="tutorial-"] .modal-button-wrapper button {
  box-shadow: unset;
}

dialog[class^="tutorial-"] .skip-btn {
  position: absolute;
  top: calc(100% + 0.8rem);
}

dialog[class^="tutorial-"] .skip-btn > a[disabled] {
  color: #595959;
}

.tutorial-team-list span,
.tutorial-health-list span {
  width: 90%;
  margin-left: 1rem;
}

.tutorial-team-list li,
.tutorial-health-list li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.rtl .tutorial-health-list span {
  margin-left: initial;
  margin-right: 1rem;
}

.tutorial-1 li.your-role {
  border: 1px solid #35799c;
  padding: 1.5rem 1rem 1rem;
  height: fit-content;
  min-width: 16rem;
  position: relative;
}

.tutorial-1 li.your-role .role-text {
  width: fit-content;
  font-size: 1rem;
  color: #35799c;
  background-color: #fff;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  padding: 0 0.5rem;
}

.tutorial-1-1 {
  margin: 0 auto;
  max-width: max-content;
  left: 0;
  top: 10%;
}

.tutorial-1-1 img {
  margin-right: 1rem;
}

.tutorial-1-2 {
  margin: 0 auto;
  max-width: max-content;
  top: 50%;
  left: 0;
}

.tutorial-2 {
  margin: 0 auto;
  max-width: max-content;
  left: 0;
  top: 5%;
}

.tutorial-3-1 {
  margin: 0 auto;
  max-width: max-content;
  left: 0;
  top: unset;
  bottom: 5%;
}

.tutorial-3-2 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: unset;
  bottom: 5%;
}

.tutorial-3-3 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: unset;
  bottom: 5%;
}

.tutorial-3-4 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 5rem;
}

.tutorial-4 {
  top: 30%;
  margin: 0 auto;
  max-width: unset;
  left: 0;
}

.tutorial-5-1 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 35%;
}

.tutorial-5-2 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 38%;
}

.tutorial-6 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 20%;
}

.tutorial-7-1 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 35%;
}

.tutorial-7-2 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 15%;
}

.tutorial-7-3 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 30%;
}

.tutorial-8-1 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 35%;
}

.tutorial-8-2 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 5%;
}

.tutorial-9 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 20%;
}

.tutorial-10 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 20%;
}

.tutorial-11-1 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 48%;
}

.tutorial-11-2 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 15%;
}

.tutorial-12-1 {
  top: unset;
  margin: 0 auto;
  max-width: unset;
  left: 0;
  bottom: 10%;
}

.tutorial-13-1 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: unset;
  bottom: 2%;
}

.tutorial-13-2 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 15%;
}

.tutorial-14-1 {
  margin: 0 auto;
  max-width: unset;
  left: 0;
  top: 15%;
}

.tutorial-14-1 .button-type-anchor:not(.skip-btn) {
  margin-right: 0.5rem;
}

.tutorial-14-1 div.skip-btn {
  display: none;
}

.tutorial-14 .modal-button-wrapper .button-type-anchor:not(.skip-btn),
.tutorial-14-1 .modal-button-wrapper .button-type-anchor:not(.skip-btn) {
  margin-right: 1rem;
}

.tutorial-14-1 .team-wrapper,
.tutorial-14 .team-wrapper {
  margin-top: 2rem;
  border: 1px solid #35799c;
  padding: 1.5rem 1rem 1rem;
  height: fit-content;
  min-width: 16rem;
  max-width: 24rem;
  position: relative;
}

.tutorial-14-1 .team-wrapper .gray,
.tutorial-14 .team-wrapper .gray {
  color: #5a7781;
}

.tutorial-14-1 .team-wrapper .team-num,
.tutorial-14 .team-wrapper .team-num {
  font-size: 1rem;
  color: #35799c;
  background-color: #fff;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  padding: 0 0.5rem;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  dialog[class^="tutorial-"] {
    margin: 0 auto;
  }

  .modal h2 {
    font-size: 1.5rem;
  }

  .tutorial-1 {
    top: 5%;
    left: 18%;
    width: 48rem;
  }

  .tutorial-1 li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }

  .tutorial-1 img {
    margin-right: 1rem;
  }

  .tutorial-2 {
    left: 15%;
    top: 30%;
    width: 40rem;
  }

  .tutorial-2.rtl {
    left: auto;
    right: 15%;
  }

  .tutorial-3 {
    left: 40%;
    top: 25%;
    width: 35rem;
  }

  .tutorial-3.rtl {
    left: auto;
    right: 40%;
  }

  .tutorial-4 {
    left: 34%;
    top: 14%;
    width: 35rem;
  }

  .tutorial-4.rtl {
    left: auto;
    right: 34%;
  }

  .tutorial-5 {
    top: unset;
    bottom: 1rem;
    left: 1rem;
    width: 20rem;
  }

  .tutorial-5.rtl {
    left: auto;
    right: 1rem;
  }
}

@media (min-width: 1024px) and (max-height: 50rem), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) and (max-height: 50rem) {
  .tutorial-5 {
    top: 1rem;
    bottom: unset;
    left: 14rem;
    width: 33rem;
  }

  .tutorial-5.rtl {
    left: auto;
    right: 14rem;
  }
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .tutorial-6 {
    left: 15rem;
    top: 23%;
    width: 25rem;
  }

  .tutorial-6.rtl {
    left: auto;
    right: 15rem;
  }

  .tutorial-7 {
    top: unset;
    left: 23rem;
    bottom: 10%;
    width: 37rem;
  }

  .tutorial-7.rtl {
    left: auto;
    right: 23rem;
  }

  .tutorial-8 {
    left: 26.4rem;
    top: 1.5rem;
    width: 32rem;
  }

  .tutorial-8.rtl {
    left: auto;
    right: 26.4rem;
  }

  .tutorial-9 {
    left: 10rem;
    top: 7rem;
    width: 25rem;
  }

  .tutorial-9.rtl {
    left: auto;
    right: 10rem;
  }

  .tutorial-10 {
    left: 10rem;
    top: 10rem;
    width: 25rem;
  }

  .tutorial-10.rtl {
    left: auto;
    right: 10rem;
  }

  .tutorial-11 {
    left: 5rem;
    top: 1rem;
    width: 50rem;
  }

  .tutorial-11.rtl {
    left: auto;
    right: 5rem;
  }

  .tutorial-12 {
    left: 1rem;
    top: 15%;
    width: 20rem;
  }

  .tutorial-12.rtl {
    left: auto;
    right: 1rem;
  }

  .tutorial-13 {
    left: 35%;
    top: 28%;
    width: 40rem;
  }

  .tutorial-13.rtl {
    left: auto;
    right: 35%;
  }

  .tutorial-13 span {
    display: flex;
    justify-content: center;
    font-size: 1.4rem;
    padding: .5rem 0;
  }

  .tutorial-13 h3 {
    font-weight: 700;
    font-size: 1.4rem;
  }

  .tutorial-14.modal-wrapper {
    margin: auto;
    width: 40rem;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
button.tooltip {
  position: relative;
  display: inline-block;
  width: 1.1rem;
  min-width: 1.1rem;
  max-width: 1.1rem;
  height: 1.1rem;
  min-height: 1.1rem;
  max-height: 1.1rem;
  text-align: center;
  border-radius: 50%;
  background: #5e666a;
  color: white;
  padding: 0;
}

span.tooltip-text {
  display: none;
  position: absolute;
  text-align: left;
  background: #5e666a;
  color: white;
  opacity: 0;
  font-size: 0.8rem;
  transition: opacity 0.6s;
  border-radius: 5px;
  padding: 0.4rem 0.6rem;
  min-width: 9rem;
  line-height: 1.5;
}

span.tooltip-text.rtl {
  text-align: right;
}

.tooltip-container {
  position: relative;
}

span.tooltip-letter:after {
  content: 'i';
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 0.75rem;
  color: white;
  line-height: 1.2rem;
  position: absolute;
  top: 0;
  left: 0;
}

/* Tooltip orientation */

.left {
  transform: translate(calc(-100% - 2rem), calc(-50% - 0.2rem));
}

.left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #5e666a;
}

.left.rtl {
  transform: translate(calc(100% + 1rem), calc(-50% - 0.2rem));
}

.left.rtl:after {
  left: auto;
  right: 100%;
  border-color: transparent #5e666a transparent transparent;
}

.right {
  transform: translate(1rem, calc(-50% - 0.2rem));
}

.right:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #5e666a transparent transparent;
}

.right.rtl {
  transform: translate(-1rem, calc(-50% - 0.2rem));
}

.right.rtl:after {
  left: 100%;
  right: auto;
  border-color: transparent transparent transparent #5e666a;
}

.tooltip-text.open {
  display: inline-block;
  z-index: 1;
  opacity: 1;
}

button.tooltip:focus-visible {
  outline-width: medium;
  outline-style: groove;
  outline-color: Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  span.tooltip-text {
    font-size: 1rem;
    min-width: 11rem;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#footer footer {
  display: flex;
  font-size: 0.875rem;
  color: #5a7781;
  line-height: 1;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.5rem;
  min-height: 0.8rem;
  border-top: 1px solid #ececec;
  font-family: "Open Sans", sans-serif;
  background-color: white;
}

#footer footer a {
  color: #5a7781;
  text-decoration: underline;
}

#footer footer .forio-logo {
  text-align: end;
}

#footer.footer-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 12;
}

@media screen and (max-width: 724px) {
  #footer footer {
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 724px) {
  #footer footer {
    padding: 0.25rem 0.25rem;
    font-size: 0.75rem;
  }
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.number-input {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 4.375rem;
  height: 2.8125rem;
  border: 1px solid #c9d7dc;
  border-radius: 0.25rem;
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
}

.number-input input[type="number"] {
  width: 100%;
  height: 100%;
  text-align: left;
  padding-left: 0.75rem;
}

.number-input input::-webkit-outer-spin-button,
.number-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input input[type="number"] {
  -moz-appearance: textfield;
}

.number-input label {
  font-size: 1rem;
}

.number-input button.solid {
  border-radius: 0.2rem;
  position: absolute;
  padding: 0;
  min-width: 0;
  min-height: 0;
  height: 1rem;
  width: 1rem;
}

.number-input .down-arrow {
  left: 2.5rem;
  bottom: 0.3rem;
}

.number-input .up-arrow {
  left: 2.5rem;
  top: 0.3rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.switch-wrapper {
  display: flex;
  flex-flow: column nowrap;
}

.switch-wrapper .switch-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.switch-wrapper .switch-details {
  display: flex;
  flex-flow: row-reverse nowrap;
  align-items: center;
  gap: 0.5rem;
}

.switch-wrapper .switch-details .switch {
  background-color: #5a7781;
  width: 2.5rem;
  height: 1.25rem;
  border-radius: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  position: relative;
}

.switch-wrapper .switch-details .switch:before {
  content: '';
  background: #fff;
  width: 1rem;
  height: 1rem;
  position: absolute;
  border-radius: 50%;
  top: 0.125rem;
  left: 0.125rem;
  transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
  transform-origin: right center;
}

.switch-wrapper .switch-details input:checked + .switch {
  background: #0b4c8c;
}

.switch-wrapper .switch-details input:checked + .switch:before {
  transform: translateX(1.25rem);
}

.switch-wrapper .switch-details input:disabled + .switch {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch-wrapper .switch-details .off-on {
  font-size: 0.875rem;
}

.switch-wrapper p {
  margin: 0;
  font-size: 0.75rem;
  color: #526b74;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.become-editor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
}

.become-editor-container .you-are-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a7781;
}

.become-editor-container .you-are-editor p {
  margin-left: 0.5rem;
}

.become-editor-container .become-editor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #35799c;
  color: #35799c;
  background: none;
  border-radius: 0.6125rem;
  padding: 0.5rem;
  box-shadow: none;
}

.become-editor-container .become-editor-button img {
  margin-right: 0.5rem;
}

.become-editor-container h1 {
  color: #35799c;
  font-size: 1.5rem;
  font-weight: 700;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#challenge-details .above-table {
  display: flex;
  align-items: center;
}

#challenge-details .above-table .dropdown-wrapper {
  margin-left: 0.5rem;
}

#challenge-details .above-table a {
  margin-left: auto;
  text-decoration: underline;
}

#challenge-details .above-table a.rtl {
  margin-right: auto;
  margin-left: 0;
}

#challenge-details .green {
  color: #6EA424;
}

#challenge-details .red {
  color: #ff4d4d;
}

#challenge-details table {
  margin-top: 1rem;
}

#challenge-details td {
  padding: 0;
}

#challenge-details ul p {
  margin: 0;
}

#challenge-details .status {
  display: flex;
  flex-flow: row nowrap;
}

#challenge-details .status [class$="marker"] {
  min-width: 0.8rem;
  margin-right: 1rem;
}

#challenge-details p {
  text-align: start;
}

#challenge-details .team-action {
  margin-top: 3.625rem;
}

#challenge-details .stasser-name {
  font-size: 1.1rem;
  font-weight: bold;
}

#challenge-details .stasser-name.rtl {
  text-align: right;
}

#challenge-details .stasser-solution.rtl * {
  text-align: right;
}

#challenge-details [class^="oxy-list"],
#challenge-details [class^="hilry-list"] {
  margin: 1rem 1.5rem 1.5rem 1.5rem;
  text-align: left;
}

#challenge-details [class^="oxy-list"] li,
#challenge-details [class^="hilry-list"] li {
  display: flex;
  text-align: left;
  justify-content: space-between;
  flex-flow: row nowrap;
  width: 60%;
  margin: 0.8rem 0;
}

#challenge-details .oxy-list-2 {
  padding-top: 2.5rem;
}

#challenge-details .hilry-list {
  padding-top: 1rem;
}

.ja-formatted #challenge-details-table th {
  white-space: nowrap;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#class-constructs #copy-to-clipboard {
  margin-bottom: 1rem;
  text-decoration: underline;
  float: right;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#decision-history .red {
  color: #ff0101;
}

#decision-history .green {
  color: #446516;
}

#decision-history table {
  margin-top: 1rem;
}

#decision-history div {
  display: flex;
}

#decision-history div a {
  margin-left: auto;
  text-decoration: underline;
}

#decision-history div.run-select {
  display: block;
}

#decision-history .team-select {
  display: block;
}

#decision-history .team-select a {
  float: right;
}

#decision-history .team-select a.rtl {
  float: left;
}

#decision-history .team-select:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.ja-formatted #decision-history-table th {
  white-space: nowrap;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#compare-constructs #copy-to-clipboard {
  margin-bottom: 1rem;
  text-decoration: underline;
  float: right;
}

#compare-constructs > div {
  margin-top: 1rem;
}

#compare-constructs table {
  margin-top: 1rem;
}

#compare-constructs .scatter-plot {
  padding: 1rem 1rem 0 1rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 1182px;
  /* NOOP
         * y axis first and last ticks are drawn with a path */
}

#compare-constructs .scatter-plot svg {
  width: 100%;
  height: auto;
}

#compare-constructs .scatter-plot .x.axis .tick:first-of-type,
#compare-constructs .scatter-plot .x.axis .tick:last-of-type {
  display: none;
}

#compare-constructs .scatter-plot .y.axis .tick:first-of-type,
#compare-constructs .scatter-plot .y.axis .tick:last-of-type {
  display: none;
}

#compare-constructs .scatter-plot .trend-line {
  opacity: 0;
  transition: opacity .2s;
}

#compare-constructs .scatter-plot.show-regression .trend-line {
  opacity: 1;
}

#compare-constructs .scatter-plot.rtl .tick text {
  transform: translateX(-0.5rem);
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#facilitator {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}

#facilitator h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

#facilitator h3 {
  margin-bottom: 1rem;
  font-weight: 600;
}

#facilitator h4 {
  font-size: 1.1875rem;
  font-weight: 600;
}

#facilitator .edit-link {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: #0b4c8c;
  font-weight: 600;
}

#facilitator .edit-link:hover {
  text-decoration: underline;
}

#facilitator fieldset {
  padding: 0;
}

#facilitator .edit-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#facilitator .edit-warning h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 1rem;
}

#facilitator .edit-warning p {
  margin: 0.75rem 0;
  color: #000;
}

#facilitator .edit-warning button {
  border-radius: 0.25rem;
}

#facilitator .edit-warning input {
  border: 1px solid #789ca8;
  padding: 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

#facilitator dialog:not([open]) {
  display: none;
}

.fac-container {
  flex-grow: 2;
  font-family: "Open Sans", sans-serif;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  padding: 2rem;
  padding-bottom: 0;
  overflow-x: hidden;
}

.fac-container > section {
  flex-grow: 2;
}

.fac-container table {
  border: 1px solid #595959;
  text-align: center;
  width: 100%;
}

.fac-container tbody tr:nth-of-type(2n + 1) {
  background: #dbe3e7;
}

.fac-container tr {
  height: 2.5rem;
}

.fac-container th {
  border: 1px solid #595959;
  font-weight: 700;
}

.fac-container th {
  padding: 0.25rem 0.5rem;
  vertical-align: middle;
}

.fac-container td {
  font-size: 0.8rem;
  padding: 0.5rem 0.5rem;
  text-align: center;
  vertical-align: middle;
}

.fac-container .link-button {
  background-color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  color: #35799c;
  box-shadow: none;
  width: auto;
  height: auto;
  text-decoration: underline;
  padding: 0;
  margin: 0 2rem;
  width: fit-content;
  min-width: fit-content;
  align-self: flex-start;
}

.fac-container .link-button:active,
.fac-container .link-button.active {
  background: none;
  border: none;
  box-shadow: none;
  color: #35799c;
}

.fac-container .link-button:focus {
  outline: none;
  background: none;
}

.fac-container .link-button:hover {
  outline: none;
  background: none;
}

.fac-container .setting {
  padding: 1.5rem 0;
  display: flex;
  flex-flow: column nowrap;
}

.fac-container .setting h4 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.fac-container .setting label {
  font-size: 0.875rem;
}.fac-header {
  display: flex;
  flex-flow: row nowrap;
  height: 4rem;
  flex-basis: 4rem;
  flex-shrink: 0;
  flex-grow: 0;
  max-width: 100vw;
  padding: 0 1rem;
}

.ja-formatted .fac-header {
  justify-content: space-between;
  white-space: pre;
}

.ja-formatted .fac-header .status {
  white-space: normal;
}

.ja-formatted .fac-header .status > div {
  padding: 0 1rem;
}

.fac-header .logo-wrapper {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
}

.fac-header .logo-wrapper span {
  font-size: 1.2rem;
  padding-left: 2rem;
}

.fac-header .status {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.fac-header .status > div:not(:first-of-type) {
  max-width: 10rem;
}

.fac-header .status.rtl {
  margin-left: 1rem;
}

.container:not(.ja-formatted) .fac-header > div {
  width: 50%;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.fac-nav {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 2rem;
  position: relative;
  max-width: 100vw;
}

.fac-nav .sub-route {
  position: absolute;
  left: 0;
  right: 0;
  top: 3rem;
  display: flex;
  flex-flow: row nowrap;
  background-color: #eaf2f5;
  cursor: default;
}

.fac-nav .sub-route li {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.fac-nav .sub-route li:hover,
.fac-nav .sub-route li.selected {
  background-color: #dbe3e7;
  border-bottom: 2px solid #dbe3e7;
}

.fac-nav .sub-route li.selected {
  border-bottom: 2.5px solid #0b4c8c;
}

.fac-nav li > a {
  display: inline-block;
  padding: 1rem 2rem;
  width: 100%;
  height: 100%;
}

.fac-nav li > a:hover {
  background: #eaf2f5;
}

.fac-nav li.selected {
  background: #eaf2f5;
  font-weight: 700;
}

.fac-nav .fac-logout {
  margin: auto 1rem auto auto;
  cursor: pointer;
}

.fac-nav .fac-logout.rtl {
  margin-left: 0;
  margin-right: auto;
}

.fac-nav .run-select {
  margin-left: auto;
  padding-top: 0.5rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/
/* Common */
/* Supplies */
/* Decisions */
/* Round Info - Windchill Table */
/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.user-card:not(:last-child):not(.active):after {
  position: absolute;
  right: -0.875rem;
  height: 100%;
  background: #dbe3e7;
  content: '';
  width: 1px;
  display: block;
}

.user-card {
  align-items: center;
  background: #fff;
  border: 1px solid #dbe3e7;
  border-radius: 0.25rem;
  cursor: grab;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  height: 3.25rem;
  padding: 0.625rem 0.5rem;
  font-family: Courier, sans-serif;
  font-size: 0.75rem;
  position: relative;
}

.user-card .drag-active {
  font-size: 40rem !important;
}

.user-card span,
.user-card .empty-label {
  word-break: break-word;
}

.user-card .status-bubble {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  background: #dbe3e7;
  border-radius: 1rem;
  margin-left: -0.25rem;
}

.user-card .status-bubble.online {
  background: #14937f;
}

.user-card .status-bubble.rtl {
  margin-right: 0;
  margin-left: 0.25rem;
}

.user-card .name-text {
  display: flex;
  align-items: center;
}

.user-card .name-text .drag-icon {
  width: 0.5rem;
  height: 1rem;
  margin-right: 0.5rem;
}

.user-card.list-card {
  border: none;
  box-shadow: none;
  height: 2.75rem;
}

.user-card.list-card.assigned {
  color: rgba(0, 0, 0, 0.25);
}

.user-card.empty-card {
  cursor: default;
  color: #526b74;
  text-align: center;
  background-color: #dbe5ea;
  border: 1px dashed #526b74;
  text-transform: uppercase;
}

.user-card.empty-card .empty-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  align-items: center;
  height: 100%;
}

.user-card.over {
  background: #01b1f4;
  color: #fff;
}

.user-card.no-drag {
  cursor: inherit;
}

.user-card.drag-active {
  opacity: 0.25;
  z-index: 100000;
}

.user-card.disabled:not(.list-card) {
  opacity: 0.5;
}

.user-card.mirror {
  padding: 0.3rem 0.5rem;
}

.user-card .green {
  color: #6EA424;
}

.user-card .switch {
  cursor: pointer;
  display: inline-block;
  height: 9px;
  margin-left: auto;
  pointer-events: all !important;
  width: 16px;
}

.user-card .switch.switch-right {
  background: #fff;
  border: 1px solid #026515;
  border-left: 8px solid #026515;
}

.user-card .switch.switch-left {
  background: #fff;
  border: 1px solid #ff4d4d;
  border-right: 8px solid #ff4d4d;
}

.user-card .switch.disabled {
  cursor: not-allowed;
}

.user-card .draggable {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  height: 20px;
  margin-right: 0.5rem;
  width: 14px;
}

.user-card .draggable .drag-column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  height: 100%;
}

.user-card .draggable .drag-column.smaller {
  height: 75%;
}

.user-card .draggable .drag-column span {
  background: #dbe3e7;
  border-radius: 50%;
  box-shadow: -1px -1px 0 0 rgba(255, 255, 255, 0.4), 1px 1px 0 0 rgba(0, 0, 0, 0.4);
  display: inline-block;
  height: 5px;
  width: 5px;
}

.user-card .draggable .drag-column span.invisible {
  opacity: 0;
}

.user-card i {
  margin-right: 0.5rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.user-suggestions {
  padding: 1rem 0.75rem;
}

.user-suggestions .online-options span {
  display: inline-block;
}

.user-suggestions .assign-users {
  margin-top: 2rem;
  text-align: center;
}

.user-suggestions span {
  display: block;
}

.user-suggestions p {
  font-size: 1rem;
  margin: 1rem 0;
}

.user-suggestions .text-content {
  background-color: #eaf2f5;
  padding: 1rem;
  margin-bottom: 2rem;
}

.suggestions-wrapper {
  margin: 0 1.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-height: 25rem;
  overflow: auto;
}

.suggestions-wrapper div {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 2rem;
}

.suggestions-wrapper div img {
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

.suggestions-wrapper div.mirror {
  grid-template-columns: repeat(5, 1fr);
}

.suggestions-wrapper div.no-preassign {
  grid-template-columns: repeat(10, 1fr);
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.no-role-container .title {
  color: #526b74;
  text-transform: uppercase;
  display: flex;
  text-align: flex-start;
  width: 100%;
  border-top: 1px solid #dbe3e7;
  font-size: 0.75rem;
  padding: 1rem 0;
}

.no-role {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  position: relative;
  font-family: Courier, sans-serif;
  font-size: 0.75rem;
}

.no-role .no-role-wrapper {
  color: #526b74;
  text-align: center;
  background-color: #dbe5ea;
  text-transform: uppercase;
  border-radius: 0.25rem;
  border: 1px dashed #526b74;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-flow: row nowrap;
  font-size: 0.875rem;
  height: 3.25rem;
  padding: 0.625rem 0.5rem;
  flex-grow: 1;
}

.no-role .no-role-wrapper.disabled {
  opacity: 0.5;
}

.no-role .overlay {
  visibility: hidden;
  z-index: 1;
  background: rgba(89, 89, 89, 0.75);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 700;
  text-align: center;
  transition: visibility 0s linear 0.1s;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.no-role .overlay.active {
  visibility: visible;
}

.no-role .overlay.over {
  background: rgba(53, 121, 156, 0.75);
}

.no-role .overlay.full,
.no-role .overlay.disabled {
  visibility: hidden;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.world {
  margin-top: 1rem;
}

.world-user-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.horizontal-user-list {
  display: grid;
  column-gap: 1.5rem;
  grid-template-columns: repeat(5, 1fr);
  align-content: space-around;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.horizontal-user-list.observer {
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1rem;
}

.world-title {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.world-title input {
  margin-right: 0.5rem;
}

.world-title .world-status {
  font-size: 0.9rem;
}

.world-title .world-status.online {
  color: #6EA424;
}

.edit-lock-btn {
  font-size: 0.875rem;
  margin-right: 0.4rem;
  min-width: 0;
  padding: 0;
  background-image: none;
  background: none;
  box-shadow: none;
  color: #0b4c8c;
  font-weight: 600;
}

.edit-lock-btn:hover {
  background: none;
}

.edit-lock-icon {
  height: 1rem;
  margin-left: 0.5rem;
  vertical-align: top;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#world-list {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  padding-left: 0.25rem;
}

#world-list .assignment-option {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

#world-list .assignment-option .assignment-label,
#world-list .assignment-option .number-input {
  margin-right: 1rem;
}

#world-list .extra-options {
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 2rem 0;
}

#world-list .extra-options .header-wrapper {
  display: flex;
  align-items: center;
}

#world-list .extra-options .header-wrapper h2 {
  margin-right: 1.5rem;
  font-size: 1.1875rem;
}

#world-list .random-assignment {
  margin-right: 2rem;
}

#world-list .random-assignment .radio-group.horizontal {
  flex-wrap: wrap;
}

#world-list .right-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#world-list .obs-text {
  display: none;
}

#world-list .clipboard2 {
  clear: right;
  float: right;
  text-decoration: underline;
  margin-top: 1rem;
}

#world-list .auto-assign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

#world-list .auto-assign p {
  font-size: 1.25rem;
  margin: 2rem auto 1rem;
  width: 60%;
}

#world-list .auto-assign .buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#world-list .auto-assign .buttons button {
  flex: 1 1 fit-content;
}

#world-list .roles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: space-between;
  padding: 1rem 0;
}

#world-list .roles.observer {
  grid-template-columns: repeat(6, 1fr);
}

#world-list .roles .icon {
  height: 2.5rem;
  width: 2.5rem;
}

#world-list .roles .role-label {
  display: block;
  margin-top: -0.75rem;
}

#world-list .roles .mirror-label {
  font-style: italic;
  padding-top: 0.5rem;
}

#world-list .roles div {
  text-align: center;
  border-right: 1px solid #dbe3e7;
}

#world-list .roles div:last-child {
  border-right: none;
}

#world-list .world-title {
  display: flex;
  flex-flow: row nowrap;
  padding-bottom: 0.5rem;
}

#world-list .world-title span {
  padding-right: 0.5rem;
}

#world-list .world-title hr {
  flex-grow: 2;
}

#world-list .unassign-anchor {
  color: #01b1f4;
  cursor: pointer;
  float: right;
  margin-top: 2rem;
  text-decoration: underline;
}

#world-list .mode-select .radio-group > div:first-of-type {
  margin-bottom: 1rem;
}

#world-list .mode-select label span:last-child span:last-child {
  font-size: 0.9rem;
}

.top-options {
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr auto;
}

.top-options .team-mode {
  align-items: center;
  background: #fff;
  display: flex;
  flex-flow: row nowrap;
  height: 2.5rem;
  margin: 0 1rem 0 auto;
  padding: 0.5rem 1rem;
  position: relative;
}

.top-options .team-mode .mode-select {
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  display: none;
  left: -9rem;
  padding: 1rem 0.75rem;
  position: absolute;
  right: 0;
  top: 2rem;
  z-index: 10;
}

.top-options .team-mode:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.top-options .team-mode:hover .mode-select {
  display: block;
}

.top-options .team-mode i {
  height: 1.25rem;
  font-size: 1.25rem;
  margin-left: 0.5rem;
}

.top-options .team-mode > span {
  text-decoration: underline;
}

.top-options .team-mode.rtl {
  margin: 0 auto 0 1rem;
}

.top-options .team-mode.rtl .mode-select {
  left: 0;
  right: -9rem;
}

.list-wrapper {
  flex-grow: 2;
  overflow-y: auto;
}

.suggestions {
  position: relative;
}

.suggestions .user-suggestions {
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  display: none;
  position: absolute;
  left: -8rem;
  top: -1rem;
  width: 28rem;
  z-index: 10;
}

.suggestions .user-suggestions.pt,
.suggestions .user-suggestions.fr {
  width: 32rem;
}

.suggestions:hover .user-suggestions {
  display: block;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.user-list {
  position: relative;
  width: 100%;
}

.user-list .overlay {
  visibility: hidden;
  background: rgba(89, 89, 89, 0.75);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 2rem 1rem;
  font-size: 1.75rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
  transition: visibility 0s linear 0.1s;
}

.user-list .overlay.active {
  visibility: visible;
}

.user-list .overlay.over {
  background: rgba(53, 121, 156, 0.75);
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.import-flow {
  display: flex;
  flex-direction: column;
}

.import-flow .error-container {
  max-height: 12rem;
  min-height: 8rem;
  margin-bottom: 1rem;
  color: #c40808;
  display: grid;
  grid-template-rows: auto 1fr;
}

.import-flow .error-counter {
  color: #c40808;
  text-align: start;
  display: flex;
  justify-items: flex-start;
}

.import-flow .error-wrapper {
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  overflow-y: auto;
  text-align: start;
}

.import-flow .error-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.import-flow .error-item img {
  margin-right: 0.5rem;
}

.import-flow .file-handler {
  background: #0b4c8c;
  border: none;
  color: #fff;
  font-size: 1rem;
  box-shadow: none;
  min-height: 2.375rem;
  min-width: none;
  width: fit-content;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.import-flow .file-handler input[type="file"] {
  display: none;
}

.import-flow .file-handler.disabled {
  background: #dbe3e7;
  cursor: not-allowed;
}

.import-flow .box-title {
  font-weight: 600;
  font-size: 1.1875rem;
  margin-bottom: 1rem;
}

.import-flow .step-title {
  font-weight: 600;
  font-size: 1rem;
}

.import-flow .step-title em {
  color: #35799c;
  font-style: normal;
}

.import-flow .faded {
  display: flex;
  align-items: center;
  color: #526b74;
  font-size: 0.875rem;
}

.import-flow .faded img {
  margin-right: 0.5rem;
}

.import-flow p {
  margin: 1rem 0;
}

.import-flow section {
  width: 100%;
  padding: 1rem 0;
}

.import-flow section:not(:last-child) {
  border-bottom: 1px solid #dbe3e7;
}

.import-flow section.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.import-flow .assignment-option {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.import-flow .assignment-option .assignment-label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.import-flow .assignment-option .radio-group {
  font-weight: 600;
  font-size: 0.875rem;
}

.import-flow .button-wrapper {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  align-items: center;
}

.import-flow .button-wrapper button {
  margin-right: 1rem;
  min-width: fit-content;
}

.import-flow .button-wrapper.between {
  justify-content: space-between;
}

.import-flow .button-wrapper.margin {
  margin-top: 1rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#manage-users {
  display: flex;
  flex-direction: column;
}

#manage-users .header-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#manage-users .header-info .wand {
  margin-right: 0.5rem;
}

#manage-users .header-info button.link-button {
  margin-right: auto;
  margin-top: 0.5rem;
}

#manage-users > .content {
  display: grid;
  grid-template-columns: auto 1fr;
  height: calc(100vh - 17.25rem);
}

#manage-users > .content .clipboard1 {
  text-decoration: underline;
  float: right;
  margin: 5px 15px 0 0;
}

#manage-users > .content .sort {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  color: #b10021;
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.8rem;
  margin: 1.25rem 0;
}

#manage-users > .content .sort .sort-by {
  cursor: pointer;
  margin-left: 0.5rem;
}

#manage-users > .content .sort .sort-by:hover {
  color: #780101;
}

#manage-users > .content .sort .sort-by.active {
  border-bottom: 3px solid #780101;
}

#manage-users > .content .user-wrapper {
  margin-top: 1.25rem;
  overflow-y: auto;
}

.ja-formatted #manage-users > .content .user-wrapper h4 {
  font-size: 1rem;
}

#manage-users > .content .input-wrapper {
  width: 75%;
}

#manage-users .pale-box {
  background-color: #f7fbff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 1px solid #c9d7dc;
  padding: 1.5rem;
  border-radius: 0.25rem;
}

#manage-users .pale-box h2 {
  margin-bottom: 1rem;
  font-size: 1.1875rem;
}

#manage-users .bulk-editing {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  justify-content: center;
  justify-items: center;
  min-height: 2rem;
  width: 100%;
  border: 1px solid #c9d7dc;
  border-radius: 0.25rem;
  margin: 1rem 0;
}

#manage-users .bulk-editing > *:not(:last-child) {
  border-right: 1px solid #c9d7dc;
}

#manage-users .bulk-editing button.unbutton {
  width: 100%;
}

#manage-users .bulk-editing button.unbutton strong {
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#manage-users .bulk-editing button {
  min-width: fit-content;
  padding: 0 0.5rem;
}

#manage-users #user-list {
  margin-right: 1rem;
  width: 26rem;
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: calc(100vh - 17.25rem);
}

#manage-users #user-list .user-list li {
  width: 100%;
}

#manage-users #user-list .user-list li:nth-child(even) .user-card {
  background-color: #eaf2f5;
}

#manage-users #user-list .user-list-spacer {
  display: grid;
  width: 100%;
  grid-template-columns: 2rem 7.5rem 5.375rem 4rem 1fr;
  padding: 0;
  font-family: Courier, sans-serif;
  font-size: 0.75rem;
}

#manage-users #user-list .user-list-spacer button.text-btn {
  min-width: fit-content;
}

#manage-users #user-list .user-list-spacer.spacer-header {
  font-weight: 700;
  border-bottom: 2px solid #35799c;
  padding-bottom: 0.5rem;
  margin-top: 1.5rem;
}

#manage-users #user-list .user-list-spacer.spacer-header span:nth-child(2) {
  margin-left: 1rem;
}

#manage-users #user-list .user-list-spacer.spacer-header .sort-by {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

#manage-users #user-list .user-list-spacer.spacer-header .sort-by.active:after {
  content: '';
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  right: 1rem;
  transform: translateY(-25%);
  margin-left: 0.5rem;
  border-width: 0.4rem 0.25rem;
  border-style: solid;
  border-color: transparent transparent #35799c transparent;
}

#manage-users #user-list .user-list-spacer.spacer-header .sort-by.active.desc:after {
  border-color: #35799c transparent transparent transparent;
  transform: translateY(25%);
}

#manage-users #user-list .user-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

#manage-users #user-list .user-header h3 {
  margin: 0;
}

#manage-users #user-list h4 {
  font-size: 1rem;
  font-weight: 600;
}

#manage-users #user-list .input-wrapper {
  position: relative;
  width: 100%;
}

#manage-users #user-list .input-wrapper input {
  border: 1px solid #c9d7dc;
  border-radius: 0.25rem;
  color: #5a7781;
  padding: 0.5rem 0.75rem;
  padding-left: 2rem;
  width: 100%;
  position: relative;
}

#manage-users #user-list .input-wrapper:after {
  position: absolute;
  content: '';
  height: 1rem;
  width: 1rem;
  left: 0.75rem;
  top: calc((100% - 1rem) / 2);
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjUgNi41QzExLjUgNC43MTg3NSAxMC41MzEyIDMuMDkzNzUgOSAyLjE4NzVDNy40Mzc1IDEuMjgxMjUgNS41MzEyNSAxLjI4MTI1IDQgMi4xODc1QzIuNDM3NSAzLjA5Mzc1IDEuNSA0LjcxODc1IDEuNSA2LjVDMS41IDguMzEyNSAyLjQzNzUgOS45Mzc1IDQgMTAuODQzOEM1LjUzMTI1IDExLjc1IDcuNDM3NSAxMS43NSA5IDEwLjg0MzhDMTAuNTMxMiA5LjkzNzUgMTEuNSA4LjMxMjUgMTEuNSA2LjVaTTEwLjUzMTIgMTEuNjI1QzkuNDA2MjUgMTIuNSA4IDEzIDYuNSAxM0MyLjkwNjI1IDEzIDAgMTAuMDkzOCAwIDYuNUMwIDIuOTM3NSAyLjkwNjI1IDAgNi41IDBDMTAuMDYyNSAwIDEzIDIuOTM3NSAxMyA2LjVDMTMgOC4wMzEyNSAxMi40Njg4IDkuNDM3NSAxMS41OTM4IDEwLjU2MjVMMTUuNzgxMiAxNC43MTg4QzE2LjA2MjUgMTUuMDMxMiAxNi4wNjI1IDE1LjUgMTUuNzgxMiAxNS43ODEyQzE1LjQ2ODggMTYuMDkzOCAxNSAxNi4wOTM4IDE0LjcxODggMTUuNzgxMkwxMC41MzEyIDExLjYyNVoiIGZpbGw9IiM1QTc3ODEiLz4KPC9zdmc+Cg==);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.assignments-wrapper {
  overflow-y: auto;
  overflow-x: auto;
  height: calc(100vh - 17.25rem);
}

.assignments-wrapper #assignments {
  min-width: 53rem;
  max-width: 60rem;
  padding-right: 1rem;
  height: fit-content;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#manage-scenario .settings-wrapper .setting {
  border-bottom: 1px solid #dbe5ea;
}

#manage-scenario .radio-group.horizontal .option {
  flex-basis: 33%;
  flex-grow: 0;
  min-width: 30%;
}

#manage-scenario .radio-group.horizontal .option .sub-text {
  color: #526b74;
}

#manage-scenario .scenario-information {
  max-width: 75%;
  margin-top: 3rem;
}

#manage-scenario .scenario-information p {
  margin: 0;
  font-size: 0.75rem;
  color: #526b74;
}

#manage-scenario .scenario-information input,
#manage-scenario .scenario-information textarea {
  border: 1px solid #789ca8;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#manage-experience .settings-block {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#manage-experience .settings-block h3 {
  flex-basis: 100%;
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 1.5rem 0 0;
}

#manage-experience .settings-block > .setting {
  flex-basis: 45%;
}

#manage-experience .settings-block form {
  margin-top: 1.5rem;
}

#manage-experience .settings-block.vertical {
  flex-flow: column nowrap;
}

#manage-experience .settings-block.vertical > .setting {
  flex-basis: unset;
  width: 45%;
}

#manage-experience .edit-warning {
  gap: 1.5rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#manage-run {
  display: flex;
  flex-flow: column nowrap;
}

#manage-run h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 1.5rem 0 0;
}

#manage-run p {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: #526b74;
}

#manage-run fieldset,
#manage-run .setting {
  max-width: 28rem;
}

#manage-run .danger-zone {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid #c9d7dc;
  padding: 1rem 0 3rem;
}

#manage-run .danger-zone h3 {
  flex-basis: 100%;
  font-size: 1.1875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

#manage-run .danger-zone h4 {
  font-size: 1rem;
  font-weight: 600;
}

#manage-run .danger-zone button {
  margin-top: 1.5rem;
  border-color: #c40808;
  color: #c40808;
}

#manage-run .danger-zone .danger-wrapper {
  flex-basis: 45%;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#setup-summary {
  flex-basis: 32rem;
  flex-grow: 0;
  flex-shrink: 0;
  width: 32rem;
  display: flex;
  flex-flow: column nowrap;
  padding: 3rem;
  padding-top: 2rem;
  background-color: #f7fbff;
  line-height: normal;
  margin-right: -2rem;
  margin-top: -2rem;
}

@media screen and (max-width: 1200px) {
  #setup-summary {
    width: 26rem;
  }
}

#setup-summary .setup-card {
  display: flex;
  flex-flow: column nowrap;
  gap: 1.5rem;
  padding: 1.5rem;
  background-color: #eaf2f5;
  margin-bottom: 2rem;
}

#setup-summary .setup-card .header-wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

#setup-summary dl,
#setup-summary ul {
  display: flex;
  flex-flow: column nowrap;
  gap: 1.5rem;
}

#setup-summary dl > .side-by-side,
#setup-summary ul > .side-by-side {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.25rem;
}

#setup-summary dt,
#setup-summary h5 {
  font-weight: 700;
}

#setup-summary dl.dt-normal {
  gap: 0;
}

#setup-summary dl.dt-normal dt {
  font-weight: unset;
}

#setup-summary ol {
  list-style: revert;
  padding-left: 1.25rem;
}

#setup-summary p {
  margin: 0;
}

#setup-summary .truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#summary .green {
  color: #6EA424;
}

#summary .red {
  color: #ff4d4d;
}

#summary th.challenge,
#summary td.challenge {
  width: 8%;
}

#summary #copy-to-clipboard {
  margin-bottom: 1rem;
  text-decoration: underline;
  float: right;
}

#summary .run-select {
  margin-bottom: 1rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#overview {
  min-width: 63rem;
}

#overview .overview-content-wrapper {
  display: flex;
  width: 100%;
  margin-top: 1rem;
  gap: 1rem;
}

#overview .overview-left {
  width: 60%;
}

#overview .overview-right {
  position: relative;
  top: -2rem;
}

#overview .download-data-wrapper {
  display: flex;
  width: 20rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  color: #35799c;
}

#overview .overview-main-controls {
  margin-bottom: 5rem;
  position: relative;
}

#overview .overview-main-controls .simulation-control-instructions {
  display: flex;
  flex-direction: column;
}

#overview .simulation-control {
  border: 1px solid #000;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 10rem;
  width: 35rem;
}

#overview .team-controls.hidden {
  display: none;
}

#overview a {
  cursor: pointer;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#chat-logs {
  height: 100%;
  max-width: 100%;
}

#chat-logs p {
  margin: unset;
  width: auto;
}

#chat-logs .chatlogs-not-active a {
  color: #35799c;
  text-decoration: underline;
}

#chat-logs .has-chat-logs {
  height: 100%;
}

#chat-logs .chat-sections {
  display: flex;
  height: 90%;
  justify-content: space-between;
  padding-top: 1rem;
}

#chat-logs .team-selector-wrapper {
  width: 15rem;
}

#chat-logs .team-selector-wrapper.fr {
  width: 30rem;
}

#chat-logs .team-selector-wrapper.fr .run-select {
  width: 100%;
}

#chat-logs .chat-log-wrapper {
  width: 75%;
  margin-left: 3rem;
  overflow-y: scroll;
}

#chat-logs .chat-log-wrapper div {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

#chat-logs .chat-log-wrapper .msg {
  width: 95%;
}

#chat-logs .chat-log-wrapper svg {
  margin-right: 1rem;
}

#chat-logs .is-mirror {
  display: inline-block;
  font-style: italic;
  margin-left: -0.75rem;
  padding-right: 0.5rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#survey-results .survey-header-wrapper {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-bottom: 1rem;
}

#survey-results .survey-header-wrapper.fr {
  width: 100%;
}

#survey-results .survey-header-wrapper.fr > div {
  width: 40%;
}

#survey-results .survey-header-wrapper.fr #survey-results-team {
  width: 120%;
}

#survey-results .table-wrapper {
  margin: 1rem 0 2rem;
}

#survey-results .link-button {
  margin: 0 0 1rem 0;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#survey-results .survey-response h4 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}

#survey-results .survey-response .survey-response-row {
  display: flex;
  margin-bottom: 1.5rem;
}

#survey-results .survey-response .first-cell {
  width: 25%;
}

#survey-results .survey-response .survey-info {
  display: flex;
  flex-direction: column;
}

#survey-results .survey-response .right-side-wrapper {
  display: flex;
  align-items: center;
  width: 75%;
}

#survey-results .survey-response .average-tick {
  width: 0.2rem;
  height: 1.4rem;
  position: relative;
  background-color: #35799c;
}

#survey-results .survey-response .cell {
  width: 20%;
  height: 1rem;
}

#survey-results .survey-response .highlighted {
  background-color: #01b1f4;
}

#survey-results .survey-response hr {
  margin: 2.5rem 0;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#documents tr,
#documents td {
  text-align: left;
}

#documents td:first-child {
  font-weight: 700;
}

#documents td {
  font-size: 1rem;
}

#documents a {
  color: #35799c;
  text-decoration: underline;
  cursor: pointer;
  display: block;
  line-height: 1.5rem;
}

#documents p {
  margin: 1.325rem auto 0 auto;
}

#documents table {
  margin-top: 1rem;
}

#documents hr {
  margin: 2rem 0;
}

#documents.rtl tr,
#documents.rtl td {
  text-align: right;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#intro-videos h2 {
  margin-bottom: 1rem;
}

#intro-videos .fac-videos {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 3rem;
}

#intro-videos .fac-videos .fac-video-item {
  width: 500px;
  text-align: center;
}

#intro-videos .fac-videos .fac-video-item h4 {
  margin: 2rem 0 0.5rem 0;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}

#intro-videos .fac-videos .fac-video-item a {
  color: #35799c;
  text-decoration: underline;
}

#intro-videos .fac-videos .fac-video-item .video-wrapper-wrapper {
  margin-bottom: 0.5rem;
}

#intro-videos .fac-videos .fac-video-item .video-wrapper {
  padding-bottom: 63%;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.table-wrapper {
  align-content: right;
  display: flex;
  flex-flow: column nowrap;
  padding-bottom: 2rem;
}

.table-wrapper .team-controls {
  align-items: center;
  background-color: #ececec;
  border: 1px solid #595959;
  border-top: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}

.table-wrapper .team-controls span,
.table-wrapper .team-controls button {
  margin: 0.5rem;
}

.online-green-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.75rem;
  background-color: #6EA424;
  display: inline-block;
  position: relative;
  right: 0.25rem;
  top: 1px;
}

.online-green-dot.rtl {
  right: -0.25rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#facilitator-chat {
  border: 1px solid #000;
  margin: 1rem 0;
  padding: 1rem;
}

#facilitator-chat .fac-chat-title {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

#facilitator-chat .fac-chat-history {
  border: 1px solid #000;
  padding: 1rem;
  height: 20rem;
  overflow-y: scroll;
  overflow-wrap: break-word;
  word-break: break-word;
}

#facilitator-chat .fac-chat-history li {
  margin-bottom: 0.5rem;
}

#facilitator-chat form {
  margin-top: 1rem;
  height: 7rem;
  position: relative;
  display: flex;
  justify-content: space-between;
}

#facilitator-chat form textarea {
  height: 100%;
  width: 75%;
  padding: 1rem;
  margin-right: 1rem;
}

#facilitator-chat form .submit-fac-chat-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#facilitator-chat form .submit-fac-chat-wrapper .all-players {
  height: 2rem;
  display: flex;
  align-items: center;
  padding: 0 4rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

#facilitator-chat .disabled {
  background-color: #595959;
  pointer-events: none;
  background-image: none;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#user-upload p {
  margin: 0.5rem 0;
  font-size: 0.75rem;
  color: #526b74;
}

#user-upload .upload-headers-wrapper {
  display: table;
  border-collapse: collapse;
}

#user-upload .upload-headers-wrapper p {
  display: table-cell;
  border: 1px solid #000;
  padding: 0.5rem;
}

#user-upload .user-messages ul {
  list-style: none;
  padding: 0rem;
}

#user-upload .user-messages ul li {
  color: #35799c;
}

#user-upload a {
  color: #b10021;
  font-weight: 700;
}

#user-upload a:hover {
  color: #780101;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
.setup-navigation {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0;
  padding-top: 3rem;
  border-top: 1px solid #c9d7dc;
}

.setup-navigation button {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.5rem;
}/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/
#app {
  overflow: hidden;
}

.tutorial-highlight {
  z-index: 90 !important;
  pointer-events: none;
  background-color: #fff;
  opacity: 1;
}

.container {
  /* Default to mobile settings */
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100vh;
}

.container .tutorial-title {
  margin-bottom: 1rem;
}

.container > #dashboard {
  display: none;
}

.container > #dashboard #nav-dots {
  display: none;
}

.container .desktop {
  display: none !important;
}

.container #content {
  flex-grow: 100;
  box-shadow: -1.1rem 0px 1.8rem 1px rgba(219, 227, 231, 0.8);
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 2rem;
}

.container #content header {
  word-break: normal;
}

.container #content.map {
  box-shadow: initial;
  overflow-y: hidden;
}

.container #content.login {
  overflow-x: hidden;
}

.container #content.rtl:not(.map) {
  box-shadow: 1.1rem 0px 1.8rem 1px rgba(219, 227, 231, 0.8);
}

/* Desktop */

@media (min-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .container {
    display: flex;
    flex-flow: row nowrap;
  }

  .container > #dashboard {
    display: flex;
    flex-flow: column nowrap;
  }

  .container #content {
    height: calc(100vh - 2rem);
    padding-bottom: 0;
  }

  .container .desktop {
    display: flex !important;
  }

  .container .mobile {
    display: none !important;
  }
}

.accessibility-text {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

.ready-to-begin h1 {
  color: #35799c;
  font-size: 1.5rem;
  font-weight: 700;
}

html[dir="rtl"] svg {
  text-anchor: end;
}

html[dir="rtl"] .accessibility-text {
  right: -10000px;
}

.proceed-role-btn {
  height: max-content;
}/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}@charset "UTF-8";
/*********
* PALLETE (use these for direct color)
*********/
/*********
* SEMANTIC COLORS (use for theme based coloring)
*********/
/*********
* VALUES
*********/




/*********
* FONTS
*********/
/*********
* FONT COLORS
*********/
/*********
* GRADIENTS
*********/
/*********
* SHADOWS
*********/
/*********
* MEDIA VALUES
*********/

@font-face {
  font-family: "SSStandard";
  src: url(47a534acd6b8d19ac30f6b4c9bb4e495.eot);
  src: url(47a534acd6b8d19ac30f6b4c9bb4e495.eot?#iefix) format("embedded-opentype"), url(1cb2ef4ea9b8c43d34daa2c8fd076a0b.woff) format("woff"), url(e3275ae4e37a39f8c057c0e991f3f8c3.ttf) format("truetype"), url(c3e5f46e063cba4c1ffae3a623984f50.svg#SSStandard) format("svg");
  font-weight: normal;
  font-style: normal;
}

/* This triggers a redraw in IE to Fix IE8's :before content rendering. */

html:hover [class^="ss-"] {
  -ms-zoom: 1;
}

.ss-icon,
.ss-icon.ss-standard,
[class^="ss-"]:before,
[class*=" ss-"]:before,
[class^="ss-"].ss-standard:before,
[class*=" ss-"].ss-standard:before,
[class^="ss-"].right:after,
[class*=" ss-"].right:after,
[class^="ss-"].ss-standard.right:after,
[class*=" ss-"].ss-standard.right:after {
  font-family: "SSStandard";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  /*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

[class^="ss-"].right:before,
[class*=" ss-"].right:before {
  display: none;
  content: '';
}

.ss-cursor:before,
.ss-cursor.right:after {
  content: '\E001';
}

.ss-crosshair:before,
.ss-crosshair.right:after {
  content: '\2316';
}

.ss-search:before,
.ss-search.right:after {
  content: '\1F50E';
}

.ss-zoomin:before,
.ss-zoomin.right:after {
  content: '\E002';
}

.ss-zoomout:before,
.ss-zoomout.right:after {
  content: '\E003';
}

.ss-view:before,
.ss-view.right:after {
  content: '\1F440';
}

.ss-attach:before,
.ss-attach.right:after {
  content: '\1F4CE';
}

.ss-link:before,
.ss-link.right:after {
  content: '\1F517';
}

.ss-move:before,
.ss-move.right:after {
  content: '\E070';
}

.ss-write:before,
.ss-write.right:after {
  content: '\270E';
}

.ss-writingdisabled:before,
.ss-writingdisabled.right:after {
  content: '\E071';
}

.ss-erase:before,
.ss-erase.right:after {
  content: '\2710';
}

.ss-compose:before,
.ss-compose.right:after {
  content: '\1F4DD';
}

.ss-lock:before,
.ss-lock.right:after {
  content: '\1F512';
}

.ss-unlock:before,
.ss-unlock.right:after {
  content: '\1F513';
}

.ss-key:before,
.ss-key.right:after {
  content: '\1F511';
}

.ss-backspace:before,
.ss-backspace.right:after {
  content: '\232B';
}

.ss-ban:before,
.ss-ban.right:after {
  content: '\1F6AB';
}

.ss-trash:before,
.ss-trash.right:after {
  content: '\E0D0';
}

.ss-target:before,
.ss-target.right:after {
  content: '\25CE';
}

.ss-tag:before,
.ss-tag.right:after {
  content: '\E100';
}

.ss-bookmark:before,
.ss-bookmark.right:after {
  content: '\1F516';
}

.ss-flag:before,
.ss-flag.right:after {
  content: '\2691';
}

.ss-like:before,
.ss-like.right:after {
  content: '\1F44D';
}

.ss-dislike:before,
.ss-dislike.right:after {
  content: '\1F44E';
}

.ss-heart:before,
.ss-heart.right:after {
  content: '\2665';
}

.ss-halfheart:before,
.ss-halfheart.right:after {
  content: '\E1A0';
}

.ss-star:before,
.ss-star.right:after {
  content: '\22C6';
}

.ss-halfstar:before,
.ss-halfstar.right:after {
  content: '\E1A1';
}

.ss-sample:before,
.ss-sample.right:after {
  content: '\E200';
}

.ss-crop:before,
.ss-crop.right:after {
  content: '\E201';
}

.ss-layers:before,
.ss-layers.right:after {
  content: '\E202';
}

.ss-fill:before,
.ss-fill.right:after {
  content: '\E240';
}

.ss-stroke:before,
.ss-stroke.right:after {
  content: '\E241';
}

.ss-phone:before,
.ss-phone.right:after {
  content: '\1F4DE';
}

.ss-phonedisabled:before,
.ss-phonedisabled.right:after {
  content: '\E300';
}

.ss-rss:before,
.ss-rss.right:after {
  content: '\E310';
}

.ss-facetime:before,
.ss-facetime.right:after {
  content: '\E320';
}

.ss-reply:before,
.ss-reply.right:after {
  content: '\21A9';
}

.ss-send:before,
.ss-send.right:after {
  content: '\E350';
}

.ss-mail:before,
.ss-mail.right:after {
  content: '\2709';
}

.ss-inbox:before,
.ss-inbox.right:after {
  content: '\1F4E5';
}

.ss-chat:before,
.ss-chat.right:after {
  content: '\1F4AC';
}

.ss-ellipsischat:before,
.ss-ellipsischat.right:after {
  content: '\E399';
}

.ss-ellipsis:before,
.ss-ellipsis.right:after {
  content: '\2026';
}

.ss-user:before,
.ss-user.right:after {
  content: '\1F464';
}

.ss-femaleuser:before,
.ss-femaleuser.right:after {
  content: '\1F467';
}

.ss-users:before,
.ss-users.right:after {
  content: '\1F465';
}

.ss-cart:before,
.ss-cart.right:after {
  content: '\E500';
}

.ss-creditcard:before,
.ss-creditcard.right:after {
  content: '\1F4B3';
}

.ss-dollarsign:before,
.ss-dollarsign.right:after {
  content: '\1F4B2';
}

.ss-barchart:before,
.ss-barchart.right:after {
  content: '\1F4CA';
}

.ss-piechart:before,
.ss-piechart.right:after {
  content: '\E570';
}

.ss-box:before,
.ss-box.right:after {
  content: '\1F4E6';
}

.ss-home:before,
.ss-home.right:after {
  content: '\2302';
}

.ss-buildings:before,
.ss-buildings.right:after {
  content: '\1F3E2';
}

.ss-warehouse:before,
.ss-warehouse.right:after {
  content: '\E602';
}

.ss-globe:before,
.ss-globe.right:after {
  content: '\1F30E';
}

.ss-navigate:before,
.ss-navigate.right:after {
  content: '\E670';
}

.ss-compass:before,
.ss-compass.right:after {
  content: '\E671';
}

.ss-signpost:before,
.ss-signpost.right:after {
  content: '\E672';
}

.ss-map:before,
.ss-map.right:after {
  content: '\E673';
}

.ss-location:before,
.ss-location.right:after {
  content: '\E6D0';
}

.ss-pin:before,
.ss-pin.right:after {
  content: '\1F4CD';
}

.ss-database:before,
.ss-database.right:after {
  content: '\E7A0';
}

.ss-hdd:before,
.ss-hdd.right:after {
  content: '\E7B0';
}

.ss-music:before,
.ss-music.right:after {
  content: '\266B';
}

.ss-mic:before,
.ss-mic.right:after {
  content: '\1F3A4';
}

.ss-volume:before,
.ss-volume.right:after {
  content: '\1F508';
}

.ss-lowvolume:before,
.ss-lowvolume.right:after {
  content: '\1F509';
}

.ss-highvolume:before,
.ss-highvolume.right:after {
  content: '\1F50A';
}

.ss-airplay:before,
.ss-airplay.right:after {
  content: '\E800';
}

.ss-camera:before,
.ss-camera.right:after {
  content: '\1F4F7';
}

.ss-picture:before,
.ss-picture.right:after {
  content: '\1F304';
}

.ss-video:before,
.ss-video.right:after {
  content: '\1F4F9';
}

.ss-play:before,
.ss-play.right:after {
  content: '\25B6';
}

.ss-pause:before,
.ss-pause.right:after {
  content: '\E8A0';
}

.ss-stop:before,
.ss-stop.right:after {
  content: '\25A0';
}

.ss-record:before,
.ss-record.right:after {
  content: '\25CF';
}

.ss-rewind:before,
.ss-rewind.right:after {
  content: '\23EA';
}

.ss-fastforward:before,
.ss-fastforward.right:after {
  content: '\23E9';
}

.ss-skipback:before,
.ss-skipback.right:after {
  content: '\23EE';
}

.ss-skipforward:before,
.ss-skipforward.right:after {
  content: '\23ED';
}

.ss-eject:before,
.ss-eject.right:after {
  content: '\23CF';
}

.ss-repeat:before,
.ss-repeat.right:after {
  content: '\1F501';
}

.ss-replay:before,
.ss-replay.right:after {
  content: '\21BA';
}

.ss-shuffle:before,
.ss-shuffle.right:after {
  content: '\1F500';
}

.ss-book:before,
.ss-book.right:after {
  content: '\1F4D5';
}

.ss-openbook:before,
.ss-openbook.right:after {
  content: '\1F4D6';
}

.ss-notebook:before,
.ss-notebook.right:after {
  content: '\1F4D3';
}

.ss-newspaper:before,
.ss-newspaper.right:after {
  content: '\1F4F0';
}

.ss-grid:before,
.ss-grid.right:after {
  content: '\E9A0';
}

.ss-rows:before,
.ss-rows.right:after {
  content: '\E9A1';
}

.ss-columns:before,
.ss-columns.right:after {
  content: '\E9A2';
}

.ss-thumbnails:before,
.ss-thumbnails.right:after {
  content: '\E9A3';
}

.ss-filter:before,
.ss-filter.right:after {
  content: '\E9B0';
}

.ss-desktop:before,
.ss-desktop.right:after {
  content: '\1F4BB';
}

.ss-laptop:before,
.ss-laptop.right:after {
  content: '\EA00';
}

.ss-tablet:before,
.ss-tablet.right:after {
  content: '\EA01';
}

.ss-cell:before,
.ss-cell.right:after {
  content: '\1F4F1';
}

.ss-battery:before,
.ss-battery.right:after {
  content: '\1F50B';
}

.ss-highbattery:before,
.ss-highbattery.right:after {
  content: '\EA10';
}

.ss-mediumbattery:before,
.ss-mediumbattery.right:after {
  content: '\EA11';
}

.ss-lowbattery:before,
.ss-lowbattery.right:after {
  content: '\EA12';
}

.ss-emptybattery:before,
.ss-emptybattery.right:after {
  content: '\EA13';
}

.ss-lightbulb:before,
.ss-lightbulb.right:after {
  content: '\1F4A1';
}

.ss-downloadcloud:before,
.ss-downloadcloud.right:after {
  content: '\EB00';
}

.ss-download:before,
.ss-download.right:after {
  content: '\EB01';
}

.ss-uploadcloud:before,
.ss-uploadcloud.right:after {
  content: '\EB40';
}

.ss-upload:before,
.ss-upload.right:after {
  content: '\EB41';
}

.ss-fork:before,
.ss-fork.right:after {
  content: '\EB80';
}

.ss-merge:before,
.ss-merge.right:after {
  content: '\EB81';
}

.ss-transfer:before,
.ss-transfer.right:after {
  content: '\21C6';
}

.ss-refresh:before,
.ss-refresh.right:after {
  content: '\21BB';
}

.ss-sync:before,
.ss-sync.right:after {
  content: '\EB82';
}

.ss-loading:before,
.ss-loading.right:after {
  content: '\EB83';
}

.ss-wifi:before,
.ss-wifi.right:after {
  content: '\EB84';
}

.ss-connection:before,
.ss-connection.right:after {
  content: '\EB85';
}

.ss-file:before,
.ss-file.right:after {
  content: '\1F4C4';
}

.ss-folder:before,
.ss-folder.right:after {
  content: '\1F4C1';
}

.ss-quote:before,
.ss-quote.right:after {
  content: '\201C';
}

.ss-text:before,
.ss-text.right:after {
  content: '\ED00';
}

.ss-font:before,
.ss-font.right:after {
  content: '\ED01';
}

.ss-print:before,
.ss-print.right:after {
  content: '\2399';
}

.ss-fax:before,
.ss-fax.right:after {
  content: '\1F4E0';
}

.ss-list:before,
.ss-list.right:after {
  content: '\ED50';
}

.ss-layout:before,
.ss-layout.right:after {
  content: '\EDA0';
}

.ss-action:before,
.ss-action.right:after {
  content: '\EE00';
}

.ss-redirect:before,
.ss-redirect.right:after {
  content: '\21AA';
}

.ss-expand:before,
.ss-expand.right:after {
  content: '\2922';
}

.ss-contract:before,
.ss-contract.right:after {
  content: '\EE01';
}

.ss-help:before,
.ss-help.right:after {
  content: '\2753';
}

.ss-info:before,
.ss-info.right:after {
  content: '\2139';
}

.ss-alert:before,
.ss-alert.right:after {
  content: '\26A0';
}

.ss-caution:before,
.ss-caution.right:after {
  content: '\26D4';
}

.ss-logout:before,
.ss-logout.right:after {
  content: '\EE02';
}

.ss-plus:before,
.ss-plus.right:after {
  content: '+';
}

.ss-hyphen:before,
.ss-hyphen.right:after {
  content: '-';
}

.ss-check:before,
.ss-check.right:after {
  content: '\2713';
}

.ss-delete:before,
.ss-delete.right:after {
  content: '\2421';
}

.ss-settings:before,
.ss-settings.right:after {
  content: '\2699';
}

.ss-dashboard:before,
.ss-dashboard.right:after {
  content: '\F000';
}

.ss-notifications:before,
.ss-notifications.right:after {
  content: '\1F514';
}

.ss-notificationsdisabled:before,
.ss-notificationsdisabled.right:after {
  content: '\1F515';
}

.ss-clock:before,
.ss-clock.right:after {
  content: '\23F2';
}

.ss-stopwatch:before,
.ss-stopwatch.right:after {
  content: '\23F1';
}

.ss-calendar:before,
.ss-calendar.right:after {
  content: '\1F4C5';
}

.ss-addcalendar:before,
.ss-addcalendar.right:after {
  content: '\F070';
}

.ss-removecalendar:before,
.ss-removecalendar.right:after {
  content: '\F071';
}

.ss-checkcalendar:before,
.ss-checkcalendar.right:after {
  content: '\F072';
}

.ss-deletecalendar:before,
.ss-deletecalendar.right:after {
  content: '\F073';
}

.ss-briefcase:before,
.ss-briefcase.right:after {
  content: '\1F4BC';
}

.ss-cloud:before,
.ss-cloud.right:after {
  content: '\2601';
}

.ss-droplet:before,
.ss-droplet.right:after {
  content: '\1F4A7';
}

.ss-flask:before,
.ss-flask.right:after {
  content: '\F4C0';
}

.ss-up:before,
.ss-up.right:after {
  content: '\2B06';
}

.ss-upright:before,
.ss-upright.right:after {
  content: '\2B08';
}

.ss-right:before,
.ss-right.right:after {
  content: '\27A1';
}

.ss-downright:before,
.ss-downright.right:after {
  content: '\2B0A';
}

.ss-down:before,
.ss-down.right:after {
  content: '\2B07';
}

.ss-downleft:before,
.ss-downleft.right:after {
  content: '\2B0B';
}

.ss-left:before,
.ss-left.right:after {
  content: '\2B05';
}

.ss-upleft:before,
.ss-upleft.right:after {
  content: '\2B09';
}

.ss-navigateup:before,
.ss-navigateup.right:after {
  content: '\F500';
}

.ss-navigateright:before,
.ss-navigateright.right:after {
  content: '\25BB';
}

.ss-navigatedown:before,
.ss-navigatedown.right:after {
  content: '\F501';
}

.ss-navigateleft:before,
.ss-navigateleft.right:after {
  content: '\25C5';
}

.ss-directup:before,
.ss-directup.right:after {
  content: '\25B4';
}

.ss-directright:before,
.ss-directright.right:after {
  content: '\25B9';
}

.ss-dropdown:before,
.ss-dropdown.right:after {
  content: '\25BE';
}

.ss-directleft:before,
.ss-directleft.right:after {
  content: '\25C3';
}

.ss-retweet:before,
.ss-retweet.right:after {
  content: '\F600';
}

/* Legacy classes */

.ss-volumelow:before,
.ss-volumelow.right:after {
  content: '\1F509';
}

.ss-volumehigh:before,
.ss-volumehigh.right:after {
  content: '\1F50A';
}

.ss-batteryhigh:before,
.ss-batteryhigh.right:after {
  content: '\EA10';
}

.ss-batterymedium:before,
.ss-batterymedium.right:after {
  content: '\EA11';
}

.ss-batterylow:before,
.ss-batterylow.right:after {
  content: '\EA12';
}

.ss-batteryempty:before,
.ss-batteryempty.right:after {
  content: '\EA13';
}

.ss-clouddownload:before,
.ss-clouddownload.right:after {
  content: '\EB00';
}

.ss-cloudupload:before,
.ss-cloudupload.right:after {
  content: '\EB40';
}

.ss-calendaradd:before,
.ss-calendaradd.right:after {
  content: '\F070';
}

.ss-calendarremove:before,
.ss-calendarremove.right:after {
  content: '\F071';
}

.ss-calendarcheck:before,
.ss-calendarcheck.right:after {
  content: '\F072';
}

.ss-calendardelete:before,
.ss-calendardelete.right:after {
  content: '\F073';
}

/*
* Symbolset
* www.symbolset.com
* Copyright © 2014 Oak Studios LLC
*
* Upload this file to your web server
* and place this within your <head> tags.
* <link href="webfonts/ss-symbolicons-block.css" rel="stylesheet" />
*/

@font-face {
  font-family: "SSSymbolicons";
  src: url(2db22867642010e87836bbd0e0375023.eot);
  src: url(2db22867642010e87836bbd0e0375023.eot?#iefix) format("embedded-opentype"), url(fcec95fccf9a3eed8b2b094be88271fc.woff) format("woff"), url(a6aaa8c67fa1f6b34a0773495b3f40c9.ttf) format("truetype"), url(05fae5c8a3e3c320b4c42cb5157ea8b5.svg#SSSymboliconsBlock) format("svg");
  font-weight: normal;
  font-style: normal;
}

/* This triggers a redraw in IE to Fix IE8's :before content rendering. */

html:hover [class^="ss-"] {
  -ms-zoom: 1;
}

.ss-icon,
.ss-icon.ss-symbolicons-block,
[class^="ss-"]:before,
[class*=" ss-"]:before,
[class^="ss-"].ss-symbolicons-block:before,
[class*=" ss-"].ss-symbolicons-block:before,
[class^="ss-"].right:after,
[class*=" ss-"].right:after,
[class^="ss-"].ss-symbolicons-block.right:after,
[class*=" ss-"].ss-symbolicons-block.right:after {
  font-family: "SSSymbolicons";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  /*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="ss-"].right:before,
[class*=" ss-"].right:before {
  display: none;
  content: '';
}

.ss-crosshair:before,
.ss-crosshair.right:after {
  content: '\2316';
}

.ss-search:before,
.ss-search.right:after {
  content: '\1F50D';
}

.ss-zoomin:before,
.ss-zoomin.right:after {
  content: '\E002';
}

.ss-zoomout:before,
.ss-zoomout.right:after {
  content: '\E003';
}

.ss-binoculars:before,
.ss-binoculars.right:after {
  content: '\E010';
}

.ss-incognito:before,
.ss-incognito.right:after {
  content: '\E015';
}

.ss-radar:before,
.ss-radar.right:after {
  content: '\E014';
}

.ss-raisedhand:before,
.ss-raisedhand.right:after {
  content: '\270B';
}

.ss-attach:before,
.ss-attach.right:after {
  content: '\1F4CE';
}

.ss-link:before,
.ss-link.right:after {
  content: '\1F517';
}

.ss-write:before,
.ss-write.right:after {
  content: '\270E';
}

.ss-compose:before,
.ss-compose.right:after {
  content: '\1F4DD';
}

.ss-lock:before,
.ss-lock.right:after {
  content: '\1F512';
}

.ss-unlock:before,
.ss-unlock.right:after {
  content: '\1F513';
}

.ss-key:before,
.ss-key.right:after {
  content: '\1F511';
}

.ss-backspace:before,
.ss-backspace.right:after {
  content: '\232B';
}

.ss-ban:before,
.ss-ban.right:after {
  content: '\1F6AB';
}

.ss-nosmoking:before,
.ss-nosmoking.right:after {
  content: '\1F6AD';
}

.ss-trash:before,
.ss-trash.right:after {
  content: '\1F5D1';
}

.ss-target:before,
.ss-target.right:after {
  content: '\25CE';
}

.ss-stopsign:before,
.ss-stopsign.right:after {
  content: '\E0D1';
}

.ss-radioactive:before,
.ss-radioactive.right:after {
  content: '\2622';
}

.ss-skull:before,
.ss-skull.right:after {
  content: '\1F480';
}

.ss-skullandcrossbones:before,
.ss-skullandcrossbones.right:after {
  content: '\2620';
}

.ss-lightning:before,
.ss-lightning.right:after {
  content: '\2607';
}

.ss-tag:before,
.ss-tag.right:after {
  content: '\1F3F7';
}

.ss-newtag:before,
.ss-newtag.right:after {
  content: '\E101';
}

.ss-flag:before,
.ss-flag.right:after {
  content: '\2691';
}

.ss-like:before,
.ss-like.right:after {
  content: '\1F44D';
}

.ss-dislike:before,
.ss-dislike.right:after {
  content: '\1F44E';
}

.ss-heart:before,
.ss-heart.right:after {
  content: '\2665';
}

.ss-addheart:before,
.ss-addheart.right:after {
  content: '\E1A2';
}

.ss-deleteheart:before,
.ss-deleteheart.right:after {
  content: '\1F494';
}

.ss-star:before,
.ss-star.right:after {
  content: '\22C6';
}

.ss-trophy:before,
.ss-trophy.right:after {
  content: '\1F3C6';
}

.ss-award:before,
.ss-award.right:after {
  content: '\E1C0';
}

.ss-ribbon:before,
.ss-ribbon.right:after {
  content: '\1F380';
}

.ss-medal:before,
.ss-medal.right:after {
  content: '\1F396';
}

.ss-badge:before,
.ss-badge.right:after {
  content: '\1F4DB';
}

.ss-crown:before,
.ss-crown.right:after {
  content: '\1F451';
}

.ss-bullseye:before,
.ss-bullseye.right:after {
  content: '\1F3AF';
}

.ss-sample:before,
.ss-sample.right:after {
  content: '\E200';
}

.ss-crop:before,
.ss-crop.right:after {
  content: '\E201';
}

.ss-layers:before,
.ss-layers.right:after {
  content: '\E202';
}

.ss-magicwand:before,
.ss-magicwand.right:after {
  content: '\E203';
}

.ss-cut:before,
.ss-cut.right:after {
  content: '\2702';
}

.ss-cutpaste:before,
.ss-cutpaste.right:after {
  content: '\E204';
}

.ss-clipboard:before,
.ss-clipboard.right:after {
  content: '\1F4CB';
}

.ss-rules:before,
.ss-rules.right:after {
  content: '\1F4CF';
}

.ss-rulerpencil:before,
.ss-rulerpencil.right:after {
  content: '\E205';
}

.ss-gridlines:before,
.ss-gridlines.right:after {
  content: '\E206';
}

.ss-pen:before,
.ss-pen.right:after {
  content: '\2712';
}

.ss-pencilbrush:before,
.ss-pencilbrush.right:after {
  content: '\E222';
}

.ss-pencilbrushpen:before,
.ss-pencilbrushpen.right:after {
  content: '\E223';
}

.ss-brush:before,
.ss-brush.right:after {
  content: '\E224';
}

.ss-paintroller:before,
.ss-paintroller.right:after {
  content: '\E225';
}

.ss-fill:before,
.ss-fill.right:after {
  content: '\E240';
}

.ss-stroke:before,
.ss-stroke.right:after {
  content: '\E241';
}

.ss-ink:before,
.ss-ink.right:after {
  content: '\E228';
}

.ss-crayons:before,
.ss-crayons.right:after {
  content: '\E242';
}

.ss-palette:before,
.ss-palette.right:after {
  content: '\1F3A8';
}

.ss-fliphorizontally:before,
.ss-fliphorizontally.right:after {
  content: '\E260';
}

.ss-flipvertically:before,
.ss-flipvertically.right:after {
  content: '\E261';
}

.ss-effects:before,
.ss-effects.right:after {
  content: '\E280';
}

.ss-bezier:before,
.ss-bezier.right:after {
  content: '\E2A0';
}

.ss-pixels:before,
.ss-pixels.right:after {
  content: '\E2A1';
}

.ss-phone:before,
.ss-phone.right:after {
  content: '\1F4DE';
}

.ss-rotaryphone:before,
.ss-rotaryphone.right:after {
  content: '\260E';
}

.ss-touchtonephone:before,
.ss-touchtonephone.right:after {
  content: '\260F';
}

.ss-phonebook:before,
.ss-phonebook.right:after {
  content: '\E301';
}

.ss-voicemail:before,
.ss-voicemail.right:after {
  content: '\2315';
}

.ss-headset:before,
.ss-headset.right:after {
  content: '\E302';
}

.ss-megaphone:before,
.ss-megaphone.right:after {
  content: '\1F4E2';
}

.ss-rss:before,
.ss-rss.right:after {
  content: '\E310';
}

.ss-satellitedish:before,
.ss-satellitedish.right:after {
  content: '\1F4E1';
}

.ss-podcast:before,
.ss-podcast.right:after {
  content: '\E311';
}

.ss-mailbox:before,
.ss-mailbox.right:after {
  content: '\1F4EB';
}

.ss-send:before,
.ss-send.right:after {
  content: '\1F585';
}

.ss-mail:before,
.ss-mail.right:after {
  content: '\2709';
}

.ss-incomingmail:before,
.ss-incomingmail.right:after {
  content: '\1F4E9';
}

.ss-inbox:before,
.ss-inbox.right:after {
  content: '\1F4E5';
}

.ss-inboxes:before,
.ss-inboxes.right:after {
  content: '\E354';
}

.ss-outbox:before,
.ss-outbox.right:after {
  content: '\1F4E4';
}

.ss-stamp:before,
.ss-stamp.right:after {
  content: '\E351';
}

.ss-chat:before,
.ss-chat.right:after {
  content: '\1F4AC';
}

.ss-chats:before,
.ss-chats.right:after {
  content: '\1F5EA';
}

.ss-textchat:before,
.ss-textchat.right:after {
  content: '\E396';
}

.ss-exclamationchat:before,
.ss-exclamationchat.right:after {
  content: '\E397';
}

.ss-questionchat:before,
.ss-questionchat.right:after {
  content: '\E398';
}

.ss-ellipsischat:before,
.ss-ellipsischat.right:after {
  content: '\E399';
}

.ss-sleep:before,
.ss-sleep.right:after {
  content: '\1F4A4';
}

.ss-ampersand:before,
.ss-ampersand.right:after {
  content: '&';
}

.ss-smile:before,
.ss-smile.right:after {
  content: '\263B';
}

.ss-frown:before,
.ss-frown.right:after {
  content: '\2639';
}

.ss-toothsmile:before,
.ss-toothsmile.right:after {
  content: '\1F603';
}

.ss-toothlesssmile:before,
.ss-toothlesssmile.right:after {
  content: '\1F600';
}

.ss-user:before,
.ss-user.right:after {
  content: '\1F464';
}

.ss-users:before,
.ss-users.right:after {
  content: '\1F465';
}

.ss-usergroup:before,
.ss-usergroup.right:after {
  content: '\E400';
}

.ss-adduser:before,
.ss-adduser.right:after {
  content: '\E401';
}

.ss-removeuser:before,
.ss-removeuser.right:after {
  content: '\E402';
}

.ss-deleteuser:before,
.ss-deleteuser.right:after {
  content: '\E404';
}

.ss-heartuser:before,
.ss-heartuser.right:after {
  content: '\E405';
}

.ss-males:before,
.ss-males.right:after {
  content: '\1F46C';
}

.ss-females:before,
.ss-females.right:after {
  content: '\1F46D';
}

.ss-malefemale:before,
.ss-malefemale.right:after {
  content: '\1F46B';
}

.ss-userportrait:before,
.ss-userportrait.right:after {
  content: '\E420';
}

.ss-userframe:before,
.ss-userframe.right:after {
  content: '\E421';
}

.ss-usersframe:before,
.ss-usersframe.right:after {
  content: '\E422';
}

.ss-baby:before,
.ss-baby.right:after {
  content: '\1F476';
}

.ss-swaddledbaby:before,
.ss-swaddledbaby.right:after {
  content: '\E430';
}

.ss-robot:before,
.ss-robot.right:after {
  content: '\E440';
}

.ss-happyrobot:before,
.ss-happyrobot.right:after {
  content: '\E441';
}

.ss-alien:before,
.ss-alien.right:after {
  content: '\1F47D';
}

.ss-ghost:before,
.ss-ghost.right:after {
  content: '\1F47B';
}

.ss-userprofile:before,
.ss-userprofile.right:after {
  content: '\E406';
}

.ss-contacts:before,
.ss-contacts.right:after {
  content: '\1F4C7';
}

.ss-addressbook:before,
.ss-addressbook.right:after {
  content: '\1F4D1';
}

.ss-footsteps:before,
.ss-footsteps.right:after {
  content: '\1F463';
}

.ss-cart:before,
.ss-cart.right:after {
  content: '\E500';
}

.ss-shoppingbag:before,
.ss-shoppingbag.right:after {
  content: '\1F6CD';
}

.ss-gift:before,
.ss-gift.right:after {
  content: '\1F381';
}

.ss-store:before,
.ss-store.right:after {
  content: '\1F3EA';
}

.ss-cashregister:before,
.ss-cashregister.right:after {
  content: '\E530';
}

.ss-safe:before,
.ss-safe.right:after {
  content: '\E540';
}

.ss-bill:before,
.ss-bill.right:after {
  content: '\E550';
}

.ss-creditcard:before,
.ss-creditcard.right:after {
  content: '\1F4B3';
}

.ss-dollarsign:before,
.ss-dollarsign.right:after {
  content: '$';
}

.ss-eurosign:before,
.ss-eurosign.right:after {
  content: '\20AC';
}

.ss-poundsign:before,
.ss-poundsign.right:after {
  content: '\A3';
}

.ss-yensign:before,
.ss-yensign.right:after {
  content: '\A5';
}

.ss-banknote:before,
.ss-banknote.right:after {
  content: '\1F4B5';
}

.ss-eurobanknote:before,
.ss-eurobanknote.right:after {
  content: '\1F4B6';
}

.ss-poundbanknote:before,
.ss-poundbanknote.right:after {
  content: '\1F4B7';
}

.ss-yenbanknote:before,
.ss-yenbanknote.right:after {
  content: '\1F4B4';
}

.ss-coins:before,
.ss-coins.right:after {
  content: '\E543';
}

.ss-moneybag:before,
.ss-moneybag.right:after {
  content: '\1F4B0';
}

.ss-calculator:before,
.ss-calculator.right:after {
  content: '\1F5A9';
}

.ss-bank:before,
.ss-bank.right:after {
  content: '\1F3E6';
}

.ss-scales:before,
.ss-scales.right:after {
  content: '\2696';
}

.ss-gavel:before,
.ss-gavel.right:after {
  content: '\E583';
}

.ss-meeting:before,
.ss-meeting.right:after {
  content: '\E581';
}

.ss-barchart:before,
.ss-barchart.right:after {
  content: '\1F4CA';
}

.ss-piechart:before,
.ss-piechart.right:after {
  content: '\E570';
}

.ss-activity:before,
.ss-activity.right:after {
  content: '\E57A';
}

.ss-flowchart:before,
.ss-flowchart.right:after {
  content: '\E577';
}

.ss-box:before,
.ss-box.right:after {
  content: '\1F4E6';
}

.ss-crate:before,
.ss-crate.right:after {
  content: '\E5D8';
}

.ss-hook:before,
.ss-hook.right:after {
  content: '\E5E4';
}

.ss-weight:before,
.ss-weight.right:after {
  content: '\E5E5';
}

.ss-home:before,
.ss-home.right:after {
  content: '\2302';
}

.ss-fence:before,
.ss-fence.right:after {
  content: '\E601';
}

.ss-buildings:before,
.ss-buildings.right:after {
  content: '\1F3E2';
}

.ss-bridge:before,
.ss-bridge.right:after {
  content: '\E603';
}

.ss-barn:before,
.ss-barn.right:after {
  content: '\E604';
}

.ss-lodging:before,
.ss-lodging.right:after {
  content: '\1F3E8';
}

.ss-warehouse:before,
.ss-warehouse.right:after {
  content: '\E602';
}

.ss-school:before,
.ss-school.right:after {
  content: '\1F3EB';
}

.ss-castle:before,
.ss-castle.right:after {
  content: '\1F3F0';
}

.ss-earth:before,
.ss-earth.right:after {
  content: '\1F30E';
}

.ss-globe:before,
.ss-globe.right:after {
  content: '\1F310';
}

.ss-compass:before,
.ss-compass.right:after {
  content: '\E671';
}

.ss-signpost:before,
.ss-signpost.right:after {
  content: '\E672';
}

.ss-map:before,
.ss-map.right:after {
  content: '\E673';
}

.ss-location:before,
.ss-location.right:after {
  content: '\E6D0';
}

.ss-pushpin:before,
.ss-pushpin.right:after {
  content: '\1F4CC';
}

.ss-code:before,
.ss-code.right:after {
  content: '\E780';
}

.ss-floppydisk:before,
.ss-floppydisk.right:after {
  content: '\1F4BE';
}

.ss-script:before,
.ss-script.right:after {
  content: '\E700';
}

.ss-playscript:before,
.ss-playscript.right:after {
  content: '\E701';
}

.ss-stopscript:before,
.ss-stopscript.right:after {
  content: '\E702';
}

.ss-recordscript:before,
.ss-recordscript.right:after {
  content: '\E703';
}

.ss-bug:before,
.ss-bug.right:after {
  content: '\1F41B';
}

.ss-puzzle:before,
.ss-puzzle.right:after {
  content: '\E710';
}

.ss-window:before,
.ss-window.right:after {
  content: '\1F5D4';
}

.ss-database:before,
.ss-database.right:after {
  content: '\E7A0';
}

.ss-adddatabase:before,
.ss-adddatabase.right:after {
  content: '\E7A2';
}

.ss-deletedatabase:before,
.ss-deletedatabase.right:after {
  content: '\E7A5';
}

.ss-hdd:before,
.ss-hdd.right:after {
  content: '\E7B0';
}

.ss-networkhdd:before,
.ss-networkhdd.right:after {
  content: '\E7B6';
}

.ss-downloadhdd:before,
.ss-downloadhdd.right:after {
  content: '\E7B7';
}

.ss-airplay:before,
.ss-airplay.right:after {
  content: '\E800';
}

.ss-music:before,
.ss-music.right:after {
  content: '\266B';
}

.ss-guitar:before,
.ss-guitar.right:after {
  content: '\1F3B8';
}

.ss-mic:before,
.ss-mic.right:after {
  content: '\1F3A4';
}

.ss-headphones:before,
.ss-headphones.right:after {
  content: '\1F3A7';
}

.ss-volume:before,
.ss-volume.right:after {
  content: '\1F508';
}

.ss-radio:before,
.ss-radio.right:after {
  content: '\1F4FB';
}

.ss-phonograph:before,
.ss-phonograph.right:after {
  content: '\E802';
}

.ss-disc:before,
.ss-disc.right:after {
  content: '\1F4BF';
}

.ss-discs:before,
.ss-discs.right:after {
  content: '\E811';
}

.ss-playlist:before,
.ss-playlist.right:after {
  content: '\E820';
}

.ss-musichome:before,
.ss-musichome.right:after {
  content: '\E821';
}

.ss-itunes:before,
.ss-itunes.right:after {
  content: '\E822';
}

.ss-camera:before,
.ss-camera.right:after {
  content: '\1F4F7';
}

.ss-picture:before,
.ss-picture.right:after {
  content: '\1F304';
}

.ss-pictures:before,
.ss-pictures.right:after {
  content: '\E851';
}

.ss-searchpicture:before,
.ss-searchpicture.right:after {
  content: '\E856';
}

.ss-video:before,
.ss-video.right:after {
  content: '\1F4F9';
}

.ss-clapboard:before,
.ss-clapboard.right:after {
  content: '\1F3AC';
}

.ss-film:before,
.ss-film.right:after {
  content: '\1F39E';
}

.ss-filmroll:before,
.ss-filmroll.right:after {
  content: '\E8B2';
}

.ss-playfilm:before,
.ss-playfilm.right:after {
  content: '\E8B1';
}

.ss-tv:before,
.ss-tv.right:after {
  content: '\1F4FA';
}

.ss-flatscreen:before,
.ss-flatscreen.right:after {
  content: '\E8C0';
}

.ss-projector:before,
.ss-projector.right:after {
  content: '\E8C1';
}

.ss-videogame:before,
.ss-videogame.right:after {
  content: '\1F3AE';
}

.ss-joystick:before,
.ss-joystick.right:after {
  content: '\1F579';
}

.ss-cartridge:before,
.ss-cartridge.right:after {
  content: '\EA43';
}

.ss-play:before,
.ss-play.right:after {
  content: '\25B6';
}

.ss-pause:before,
.ss-pause.right:after {
  content: '\E8A0';
}

.ss-stop:before,
.ss-stop.right:after {
  content: '\25A0';
}

.ss-record:before,
.ss-record.right:after {
  content: '\25CF';
}

.ss-rewind:before,
.ss-rewind.right:after {
  content: '\23EA';
}

.ss-fastforward:before,
.ss-fastforward.right:after {
  content: '\23E9';
}

.ss-skipback:before,
.ss-skipback.right:after {
  content: '\23EE';
}

.ss-skipforward:before,
.ss-skipforward.right:after {
  content: '\23ED';
}

.ss-eject:before,
.ss-eject.right:after {
  content: '\23CF';
}

.ss-shuffle:before,
.ss-shuffle.right:after {
  content: '\1F500';
}

.ss-filecabinet:before,
.ss-filecabinet.right:after {
  content: '\1F5C4';
}

.ss-storagebox:before,
.ss-storagebox.right:after {
  content: '\E901';
}

.ss-books:before,
.ss-books.right:after {
  content: '\1F4DA';
}

.ss-bookspencil:before,
.ss-bookspencil.right:after {
  content: '\E960';
}

.ss-openbook:before,
.ss-openbook.right:after {
  content: '\1F4D6';
}

.ss-bookinsert:before,
.ss-bookinsert.right:after {
  content: '\E961';
}

.ss-notebook:before,
.ss-notebook.right:after {
  content: '\1F4D3';
}

.ss-ledger:before,
.ss-ledger.right:after {
  content: '\1F4D2';
}

.ss-album:before,
.ss-album.right:after {
  content: '\E970';
}

.ss-newspaper:before,
.ss-newspaper.right:after {
  content: '\1F4F0';
}

.ss-spiralbound:before,
.ss-spiralbound.right:after {
  content: '\1F5D2';
}

.ss-notepad:before,
.ss-notepad.right:after {
  content: '\E972';
}

.ss-notice:before,
.ss-notice.right:after {
  content: '\E973';
}

.ss-grid:before,
.ss-grid.right:after {
  content: '\E9A0';
}

.ss-thumbnails:before,
.ss-thumbnails.right:after {
  content: '\E9A3';
}

.ss-menu:before,
.ss-menu.right:after {
  content: '\EE06';
}

.ss-filter:before,
.ss-filter.right:after {
  content: '\E9B0';
}

.ss-desktop:before,
.ss-desktop.right:after {
  content: '\1F4BB';
}

.ss-laptop:before,
.ss-laptop.right:after {
  content: '\EA00';
}

.ss-tablet:before,
.ss-tablet.right:after {
  content: '\EA01';
}

.ss-cell:before,
.ss-cell.right:after {
  content: '\1F4F1';
}

.ss-cellbars:before,
.ss-cellbars.right:after {
  content: '\1F4F6';
}

.ss-battery:before,
.ss-battery.right:after {
  content: '\1F50B';
}

.ss-mediumbattery:before,
.ss-mediumbattery.right:after {
  content: '\EA11';
}

.ss-emptybattery:before,
.ss-emptybattery.right:after {
  content: '\EA13';
}

.ss-chargingbattery:before,
.ss-chargingbattery.right:after {
  content: '\EA14';
}

.ss-screwdrivermobile:before,
.ss-screwdrivermobile.right:after {
  content: '\EA20';
}

.ss-brushmobile:before,
.ss-brushmobile.right:after {
  content: '\EA21';
}

.ss-pencilmobile:before,
.ss-pencilmobile.right:after {
  content: '\EA22';
}

.ss-door:before,
.ss-door.right:after {
  content: '\1F6AA';
}

.ss-washer:before,
.ss-washer.right:after {
  content: '\EA80';
}

.ss-dryer:before,
.ss-dryer.right:after {
  content: '\EA81';
}

.ss-birdhouse:before,
.ss-birdhouse.right:after {
  content: '\EAB4';
}

.ss-toilet:before,
.ss-toilet.right:after {
  content: '\1F6BD';
}

.ss-toiletpaper:before,
.ss-toiletpaper.right:after {
  content: '\EA84';
}

.ss-spraybottle:before,
.ss-spraybottle.right:after {
  content: '\EA8D';
}

.ss-lightbulb:before,
.ss-lightbulb.right:after {
  content: '\1F4A1';
}

.ss-cfl:before,
.ss-cfl.right:after {
  content: '\EA85';
}

.ss-flashlight:before,
.ss-flashlight.right:after {
  content: '\1F526';
}

.ss-candle:before,
.ss-candle.right:after {
  content: '\EAB0';
}

.ss-flame:before,
.ss-flame.right:after {
  content: '\EAB2';
}

.ss-campfire:before,
.ss-campfire.right:after {
  content: '\1F525';
}

.ss-fireplace:before,
.ss-fireplace.right:after {
  content: '\EA82';
}

.ss-lamp:before,
.ss-lamp.right:after {
  content: '\EA8A';
}

.ss-chair:before,
.ss-chair.right:after {
  content: '\EA8B';
}

.ss-seat:before,
.ss-seat.right:after {
  content: '\1F4BA';
}

.ss-picnictable:before,
.ss-picnictable.right:after {
  content: '\EAB1';
}

.ss-frame:before,
.ss-frame.right:after {
  content: '\1F5BC';
}

.ss-heartframe:before,
.ss-heartframe.right:after {
  content: '\1F49F';
}

.ss-starframe:before,
.ss-starframe.right:after {
  content: '\EA91';
}

.ss-treeframe:before,
.ss-treeframe.right:after {
  content: '\EA92';
}

.ss-flowerframe:before,
.ss-flowerframe.right:after {
  content: '\EA93';
}

.ss-questionframe:before,
.ss-questionframe.right:after {
  content: '\EA94';
}

.ss-utensilsframe:before,
.ss-utensilsframe.right:after {
  content: '\EA95';
}

.ss-rings:before,
.ss-rings.right:after {
  content: '\1F48D';
}

.ss-balloons:before,
.ss-balloons.right:after {
  content: '\1F388';
}

.ss-fireworks:before,
.ss-fireworks.right:after {
  content: '\1F386';
}

.ss-easteregg:before,
.ss-easteregg.right:after {
  content: '\EAE0';
}

.ss-jackolantern:before,
.ss-jackolantern.right:after {
  content: '\1F383';
}

.ss-menorah:before,
.ss-menorah.right:after {
  content: '\EAE1';
}

.ss-christmastree:before,
.ss-christmastree.right:after {
  content: '\1F384';
}

.ss-teddy:before,
.ss-teddy.right:after {
  content: '\EAA0';
}

.ss-blocks:before,
.ss-blocks.right:after {
  content: '\EAA1';
}

.ss-rattle:before,
.ss-rattle.right:after {
  content: '\EAA2';
}

.ss-diaper:before,
.ss-diaper.right:after {
  content: '\EAA3';
}

.ss-pailshovel:before,
.ss-pailshovel.right:after {
  content: '\EAA4';
}

.ss-sweep:before,
.ss-sweep.right:after {
  content: '\EA86';
}

.ss-headstone:before,
.ss-headstone.right:after {
  content: '\26FC';
}

.ss-chess:before,
.ss-chess.right:after {
  content: '\265E';
}

.ss-onedie:before,
.ss-onedie.right:after {
  content: '\2680';
}

.ss-twodie:before,
.ss-twodie.right:after {
  content: '\2681';
}

.ss-threedie:before,
.ss-threedie.right:after {
  content: '\2682';
}

.ss-fourdie:before,
.ss-fourdie.right:after {
  content: '\2683';
}

.ss-fivedie:before,
.ss-fivedie.right:after {
  content: '\2684';
}

.ss-sixdie:before,
.ss-sixdie.right:after {
  content: '\2685';
}

.ss-fuzzydice:before,
.ss-fuzzydice.right:after {
  content: '\EA87';
}

.ss-slingshot:before,
.ss-slingshot.right:after {
  content: '\EAA5';
}

.ss-bomb:before,
.ss-bomb.right:after {
  content: '\1F4A3';
}

.ss-knife:before,
.ss-knife.right:after {
  content: '\1F52A';
}

.ss-swords:before,
.ss-swords.right:after {
  content: '\2694';
}

.ss-download:before,
.ss-download.right:after {
  content: '\EB00';
}

.ss-downloadbox:before,
.ss-downloadbox.right:after {
  content: '\EB02';
}

.ss-downloadcrate:before,
.ss-downloadcrate.right:after {
  content: '\EB03';
}

.ss-upload:before,
.ss-upload.right:after {
  content: '\EB40';
}

.ss-uploadbox:before,
.ss-uploadbox.right:after {
  content: '\EB42';
}

.ss-uploadcrate:before,
.ss-uploadcrate.right:after {
  content: '\EB43';
}

.ss-transfer:before,
.ss-transfer.right:after {
  content: '\21C6';
}

.ss-refresh:before,
.ss-refresh.right:after {
  content: '\21BB';
}

.ss-sync:before,
.ss-sync.right:after {
  content: '\EB82';
}

.ss-wifi:before,
.ss-wifi.right:after {
  content: '\EB84';
}

.ss-connection:before,
.ss-connection.right:after {
  content: '\EB85';
}

.ss-usb:before,
.ss-usb.right:after {
  content: '\EB86';
}

.ss-files:before,
.ss-files.right:after {
  content: '\EC00';
}

.ss-addfile:before,
.ss-addfile.right:after {
  content: '\EC01';
}

.ss-removefile:before,
.ss-removefile.right:after {
  content: '\EC02';
}

.ss-deletefile:before,
.ss-deletefile.right:after {
  content: '\EC04';
}

.ss-searchfile:before,
.ss-searchfile.right:after {
  content: '\EC05';
}

.ss-folder:before,
.ss-folder.right:after {
  content: '\1F4C1';
}

.ss-addfolder:before,
.ss-addfolder.right:after {
  content: '\EC71';
}

.ss-removefolder:before,
.ss-removefolder.right:after {
  content: '\EC72';
}

.ss-deletefolder:before,
.ss-deletefolder.right:after {
  content: '\EC74';
}

.ss-downloadfolder:before,
.ss-downloadfolder.right:after {
  content: '\EC76';
}

.ss-uploadfolder:before,
.ss-uploadfolder.right:after {
  content: '\EC77';
}

.ss-undo:before,
.ss-undo.right:after {
  content: '\238C';
}

.ss-redo:before,
.ss-redo.right:after {
  content: '\F520';
}

.ss-quote:before,
.ss-quote.right:after {
  content: '\201C';
}

.ss-font:before,
.ss-font.right:after {
  content: '\ED01';
}

.ss-anchor:before,
.ss-anchor.right:after {
  content: '\ED10';
}

.ss-print:before,
.ss-print.right:after {
  content: '\2399';
}

.ss-fax:before,
.ss-fax.right:after {
  content: '\1F4E0';
}

.ss-shredder:before,
.ss-shredder.right:after {
  content: '\ED40';
}

.ss-typewriter:before,
.ss-typewriter.right:after {
  content: '\ED41';
}

.ss-list:before,
.ss-list.right:after {
  content: '\ED50';
}

.ss-action:before,
.ss-action.right:after {
  content: '\EE00';
}

.ss-redirect:before,
.ss-redirect.right:after {
  content: '\21AA';
}

.ss-expand:before,
.ss-expand.right:after {
  content: '\2922';
}

.ss-contract:before,
.ss-contract.right:after {
  content: '\EE01';
}

.ss-scaleup:before,
.ss-scaleup.right:after {
  content: '\EE04';
}

.ss-scaledown:before,
.ss-scaledown.right:after {
  content: '\EE05';
}

.ss-power:before,
.ss-power.right:after {
  content: '\EE10';
}

.ss-lifepreserver:before,
.ss-lifepreserver.right:after {
  content: '\EE11';
}

.ss-help:before,
.ss-help.right:after {
  content: '\2753';
}

.ss-info:before,
.ss-info.right:after {
  content: '\2139';
}

.ss-alert:before,
.ss-alert.right:after {
  content: '\26A0';
}

.ss-caution:before,
.ss-caution.right:after {
  content: '\26D4';
}

.ss-plus:before,
.ss-plus.right:after {
  content: '+';
}

.ss-hyphen:before,
.ss-hyphen.right:after {
  content: '-';
}

.ss-check:before,
.ss-check.right:after {
  content: '\2713';
}

.ss-delete:before,
.ss-delete.right:after {
  content: '\2421';
}

.ss-dogface:before,
.ss-dogface.right:after {
  content: '\1F436';
}

.ss-catface:before,
.ss-catface.right:after {
  content: '\1F431';
}

.ss-rabbitface:before,
.ss-rabbitface.right:after {
  content: '\1F430';
}

.ss-bearface:before,
.ss-bearface.right:after {
  content: '\1F43B';
}

.ss-fish:before,
.ss-fish.right:after {
  content: '\1F41F';
}

.ss-bird:before,
.ss-bird.right:after {
  content: '\1F426';
}

.ss-dog:before,
.ss-dog.right:after {
  content: '\1F415';
}

.ss-sheep:before,
.ss-sheep.right:after {
  content: '\1F411';
}

.ss-pig:before,
.ss-pig.right:after {
  content: '\1F416';
}

.ss-turtle:before,
.ss-turtle.right:after {
  content: '\1F422';
}

.ss-snake:before,
.ss-snake.right:after {
  content: '\1F40D';
}

.ss-elephant:before,
.ss-elephant.right:after {
  content: '\1F418';
}

.ss-whale:before,
.ss-whale.right:after {
  content: '\1F40B';
}

.ss-bone:before,
.ss-bone.right:after {
  content: '\EF60';
}

.ss-tooth:before,
.ss-tooth.right:after {
  content: '\EF61';
}

.ss-feather:before,
.ss-feather.right:after {
  content: '\E220';
}

.ss-poo:before,
.ss-poo.right:after {
  content: '\1F4A9';
}

.ss-palmtree:before,
.ss-palmtree.right:after {
  content: '\1F334';
}

.ss-tree:before,
.ss-tree.right:after {
  content: '\1F332';
}

.ss-cactus:before,
.ss-cactus.right:after {
  content: '\1F335';
}

.ss-leaf:before,
.ss-leaf.right:after {
  content: '\1F342';
}

.ss-mapleleaf:before,
.ss-mapleleaf.right:after {
  content: '\1F341';
}

.ss-flower:before,
.ss-flower.right:after {
  content: '\2698';
}

.ss-bouquet:before,
.ss-bouquet.right:after {
  content: '\1F490';
}

.ss-chestnut:before,
.ss-chestnut.right:after {
  content: '\1F330';
}

.ss-mushroom:before,
.ss-mushroom.right:after {
  content: '\1F344';
}

.ss-gem:before,
.ss-gem.right:after {
  content: '\1F48E';
}

.ss-snowman:before,
.ss-snowman.right:after {
  content: '\2603';
}

.ss-settings:before,
.ss-settings.right:after {
  content: '\2699';
}

.ss-dashboard:before,
.ss-dashboard.right:after {
  content: '\F000';
}

.ss-notifications:before,
.ss-notifications.right:after {
  content: '\1F514';
}

.ss-toggles:before,
.ss-toggles.right:after {
  content: '\1F39A';
}

.ss-switch:before,
.ss-switch.right:after {
  content: '\F002';
}

.ss-switchoff:before,
.ss-switchoff.right:after {
  content: '\F003';
}

.ss-brightness:before,
.ss-brightness.right:after {
  content: '\1F506';
}

.ss-flashoff:before,
.ss-flashoff.right:after {
  content: '\F011';
}

.ss-magnet:before,
.ss-magnet.right:after {
  content: '\F012';
}

.ss-toolbox:before,
.ss-toolbox.right:after {
  content: '\F030';
}

.ss-tools:before,
.ss-tools.right:after {
  content: '\F031';
}

.ss-hammer:before,
.ss-hammer.right:after {
  content: '\1F528';
}

.ss-wrench:before,
.ss-wrench.right:after {
  content: '\1F527';
}

.ss-wrenches:before,
.ss-wrenches.right:after {
  content: '\F032';
}

.ss-wrenchpencil:before,
.ss-wrenchpencil.right:after {
  content: '\F033';
}

.ss-screwdriverpencil:before,
.ss-screwdriverpencil.right:after {
  content: '\F034';
}

.ss-hammerscrewdriver:before,
.ss-hammerscrewdriver.right:after {
  content: '\F035';
}

.ss-tapemeasure:before,
.ss-tapemeasure.right:after {
  content: '\F036';
}

.ss-hourglass:before,
.ss-hourglass.right:after {
  content: '\23F3';
}

.ss-clock:before,
.ss-clock.right:after {
  content: '\23F2';
}

.ss-stopwatch:before,
.ss-stopwatch.right:after {
  content: '\23F1';
}

.ss-alarmclock:before,
.ss-alarmclock.right:after {
  content: '\23F0';
}

.ss-mantelpiececlock:before,
.ss-mantelpiececlock.right:after {
  content: '\1F570';
}

.ss-watch:before,
.ss-watch.right:after {
  content: '\231A';
}

.ss-counterclockwise:before,
.ss-counterclockwise.right:after {
  content: '\2940';
}

.ss-calendar:before,
.ss-calendar.right:after {
  content: '\1F4C5';
}

.ss-keyboardup:before,
.ss-keyboardup.right:after {
  content: '\F0D0';
}

.ss-keyboarddown:before,
.ss-keyboarddown.right:after {
  content: '\F0D1';
}

.ss-heavyasterisk:before,
.ss-heavyasterisk.right:after {
  content: '\2731';
}

.ss-egg:before,
.ss-egg.right:after {
  content: '\F100';
}

.ss-cheese:before,
.ss-cheese.right:after {
  content: '\F101';
}

.ss-sausage:before,
.ss-sausage.right:after {
  content: '\F103';
}

.ss-hotdog:before,
.ss-hotdog.right:after {
  content: '\F102';
}

.ss-burger:before,
.ss-burger.right:after {
  content: '\1F354';
}

.ss-chickenleg:before,
.ss-chickenleg.right:after {
  content: '\1F357';
}

.ss-turkey:before,
.ss-turkey.right:after {
  content: '\F105';
}

.ss-steak:before,
.ss-steak.right:after {
  content: '\F106';
}

.ss-birthdaycake:before,
.ss-birthdaycake.right:after {
  content: '\1F382';
}

.ss-cupcake:before,
.ss-cupcake.right:after {
  content: '\F118';
}

.ss-pancakes:before,
.ss-pancakes.right:after {
  content: '\F113';
}

.ss-doughnut:before,
.ss-doughnut.right:after {
  content: '\1F369';
}

.ss-pizzapie:before,
.ss-pizzapie.right:after {
  content: '\EFE0';
}

.ss-pizza:before,
.ss-pizza.right:after {
  content: '\1F355';
}

.ss-frenchfries:before,
.ss-frenchfries.right:after {
  content: '\1F35F';
}

.ss-apple:before,
.ss-apple.right:after {
  content: '\1F34F';
}

.ss-carrot:before,
.ss-carrot.right:after {
  content: '\F111';
}

.ss-grapes:before,
.ss-grapes.right:after {
  content: '\1F347';
}

.ss-bread:before,
.ss-bread.right:after {
  content: '\1F35E';
}

.ss-cookie:before,
.ss-cookie.right:after {
  content: '\1F36A';
}

.ss-chocolatebar:before,
.ss-chocolatebar.right:after {
  content: '\1F36B';
}

.ss-candy:before,
.ss-candy.right:after {
  content: '\1F36C';
}

.ss-mug:before,
.ss-mug.right:after {
  content: '\2615';
}

.ss-coffee:before,
.ss-coffee.right:after {
  content: '\F120';
}

.ss-tea:before,
.ss-tea.right:after {
  content: '\1F375';
}

.ss-growler:before,
.ss-growler.right:after {
  content: '\F121';
}

.ss-beer:before,
.ss-beer.right:after {
  content: '\1F37A';
}

.ss-bottle:before,
.ss-bottle.right:after {
  content: '\F122';
}

.ss-wine:before,
.ss-wine.right:after {
  content: '\F123';
}

.ss-wineglass:before,
.ss-wineglass.right:after {
  content: '\1F377';
}

.ss-cocktail:before,
.ss-cocktail.right:after {
  content: '\1F378';
}

.ss-soda:before,
.ss-soda.right:after {
  content: '\F124';
}

.ss-cup:before,
.ss-cup.right:after {
  content: '\F125';
}

.ss-babybottle:before,
.ss-babybottle.right:after {
  content: '\1F37C';
}

.ss-jug:before,
.ss-jug.right:after {
  content: '\F126';
}

.ss-pitcher:before,
.ss-pitcher.right:after {
  content: '\F19B';
}

.ss-kettle:before,
.ss-kettle.right:after {
  content: '\F19C';
}

.ss-pot:before,
.ss-pot.right:after {
  content: '\F168';
}

.ss-salt:before,
.ss-salt.right:after {
  content: '\F130';
}

.ss-pepper:before,
.ss-pepper.right:after {
  content: '\F131';
}

.ss-toaster:before,
.ss-toaster.right:after {
  content: '\F193';
}

.ss-oven:before,
.ss-oven.right:after {
  content: '\F140';
}

.ss-bbq:before,
.ss-bbq.right:after {
  content: '\F142';
}

.ss-takeout:before,
.ss-takeout.right:after {
  content: '\F160';
}

.ss-paperbag:before,
.ss-paperbag.right:after {
  content: '\F161';
}

.ss-utensils:before,
.ss-utensils.right:after {
  content: '\1F374';
}

.ss-cookingutensils:before,
.ss-cookingutensils.right:after {
  content: '\F151';
}

.ss-apron:before,
.ss-apron.right:after {
  content: '\F170';
}

.ss-chef:before,
.ss-chef.right:after {
  content: '\F172';
}

.ss-helmet:before,
.ss-helmet.right:after {
  content: '\F1B2';
}

.ss-graduationcap:before,
.ss-graduationcap.right:after {
  content: '\1F393';
}

.ss-tophat:before,
.ss-tophat.right:after {
  content: '\1F3A9';
}

.ss-glasses:before,
.ss-glasses.right:after {
  content: '\1F453';
}

.ss-sunglasses:before,
.ss-sunglasses.right:after {
  content: '\1F576';
}

.ss-tie:before,
.ss-tie.right:after {
  content: '\F1A2';
}

.ss-tshirt:before,
.ss-tshirt.right:after {
  content: '\1F455';
}

.ss-dress:before,
.ss-dress.right:after {
  content: '\1F457';
}

.ss-bikini:before,
.ss-bikini.right:after {
  content: '\1F459';
}

.ss-backpack:before,
.ss-backpack.right:after {
  content: '\1F392';
}

.ss-hanger:before,
.ss-hanger.right:after {
  content: '\F1A0';
}

.ss-comb:before,
.ss-comb.right:after {
  content: '\F1A1';
}

.ss-fabric:before,
.ss-fabric.right:after {
  content: '\F1F0';
}

.ss-swatch:before,
.ss-swatch.right:after {
  content: '\F1F1';
}

.ss-weave:before,
.ss-weave.right:after {
  content: '\F1F2';
}

.ss-thread:before,
.ss-thread.right:after {
  content: '\F1F3';
}

.ss-yarn:before,
.ss-yarn.right:after {
  content: '\F1F4';
}

.ss-crochet:before,
.ss-crochet.right:after {
  content: '\F1F5';
}

.ss-needles:before,
.ss-needles.right:after {
  content: '\F1F6';
}

.ss-scissorsneedles:before,
.ss-scissorsneedles.right:after {
  content: '\F1F7';
}

.ss-button:before,
.ss-button.right:after {
  content: '\F1F8';
}

.ss-zipper:before,
.ss-zipper.right:after {
  content: '\F1F9';
}

.ss-sunface:before,
.ss-sunface.right:after {
  content: '\1F31E';
}

.ss-sun:before,
.ss-sun.right:after {
  content: '\2600';
}

.ss-partlycloudy:before,
.ss-partlycloudy.right:after {
  content: '\26C5';
}

.ss-snowflake:before,
.ss-snowflake.right:after {
  content: '\2744';
}

.ss-rainbow:before,
.ss-rainbow.right:after {
  content: '\1F308';
}

.ss-umbrella:before,
.ss-umbrella.right:after {
  content: '\2602';
}

.ss-crescentmoon:before,
.ss-crescentmoon.right:after {
  content: '\1F319';
}

.ss-newmoon:before,
.ss-newmoon.right:after {
  content: '\1F311';
}

.ss-waxingcrescentmoon:before,
.ss-waxingcrescentmoon.right:after {
  content: '\1F312';
}

.ss-firstquartermoon:before,
.ss-firstquartermoon.right:after {
  content: '\1F313';
}

.ss-waxinggibbousmoon:before,
.ss-waxinggibbousmoon.right:after {
  content: '\1F314';
}

.ss-fullmoon:before,
.ss-fullmoon.right:after {
  content: '\1F315';
}

.ss-waninggibbousmoon:before,
.ss-waninggibbousmoon.right:after {
  content: '\1F316';
}

.ss-lastquartermoon:before,
.ss-lastquartermoon.right:after {
  content: '\1F317';
}

.ss-waningcrescentmoon:before,
.ss-waningcrescentmoon.right:after {
  content: '\1F318';
}

.ss-planet:before,
.ss-planet.right:after {
  content: '\F2A0';
}

.ss-fan:before,
.ss-fan.right:after {
  content: '\F280';
}

.ss-plug:before,
.ss-plug.right:after {
  content: '\1F50C';
}

.ss-outlet:before,
.ss-outlet.right:after {
  content: '\F282';
}

.ss-policecar:before,
.ss-policecar.right:after {
  content: '\1F694';
}

.ss-car:before,
.ss-car.right:after {
  content: '\1F698';
}

.ss-carrepair:before,
.ss-carrepair.right:after {
  content: '\F300';
}

.ss-taxi:before,
.ss-taxi.right:after {
  content: '\1F696';
}

.ss-train:before,
.ss-train.right:after {
  content: '\1F686';
}

.ss-bus:before,
.ss-bus.right:after {
  content: '\1F68D';
}

.ss-truck:before,
.ss-truck.right:after {
  content: '\1F69A';
}

.ss-trailer:before,
.ss-trailer.right:after {
  content: '\F301';
}

.ss-trailerdump:before,
.ss-trailerdump.right:after {
  content: '\F302';
}

.ss-plane:before,
.ss-plane.right:after {
  content: '\2708';
}

.ss-bike:before,
.ss-bike.right:after {
  content: '\1F6B2';
}

.ss-motorcycle:before,
.ss-motorcycle.right:after {
  content: '\F303';
}

.ss-boat:before,
.ss-boat.right:after {
  content: '\1F6A2';
}

.ss-sailboat:before,
.ss-sailboat.right:after {
  content: '\26F5';
}

.ss-rocket:before,
.ss-rocket.right:after {
  content: '\1F680';
}

.ss-ufo:before,
.ss-ufo.right:after {
  content: '\F304';
}

.ss-squarekey:before,
.ss-squarekey.right:after {
  content: '\F310';
}

.ss-steeringwheel:before,
.ss-steeringwheel.right:after {
  content: '\F313';
}

.ss-helm:before,
.ss-helm.right:after {
  content: '\2388';
}

.ss-tire:before,
.ss-tire.right:after {
  content: '\F311';
}

.ss-fuel:before,
.ss-fuel.right:after {
  content: '\26FD';
}

.ss-jerrycan:before,
.ss-jerrycan.right:after {
  content: '\F315';
}

.ss-parking:before,
.ss-parking.right:after {
  content: '\F312';
}

.ss-wheelchair:before,
.ss-wheelchair.right:after {
  content: '\267F';
}

.ss-restroom:before,
.ss-restroom.right:after {
  content: '\1F6BB';
}

.ss-elevator:before,
.ss-elevator.right:after {
  content: '\F380';
}

.ss-passport:before,
.ss-passport.right:after {
  content: '\F316';
}

.ss-briefcase:before,
.ss-briefcase.right:after {
  content: '\1F4BC';
}

.ss-theatre:before,
.ss-theatre.right:after {
  content: '\1F3AD';
}

.ss-ticket:before,
.ss-ticket.right:after {
  content: '\1F3AB';
}

.ss-bowling:before,
.ss-bowling.right:after {
  content: '\F406';
}

.ss-golf:before,
.ss-golf.right:after {
  content: '\F400';
}

.ss-billiards:before,
.ss-billiards.right:after {
  content: '\1F3B1';
}

.ss-baseball:before,
.ss-baseball.right:after {
  content: '\26BE';
}

.ss-tennis:before,
.ss-tennis.right:after {
  content: '\1F3BE';
}

.ss-basketball:before,
.ss-basketball.right:after {
  content: '\1F3C0';
}

.ss-football:before,
.ss-football.right:after {
  content: '\1F3C8';
}

.ss-soccer:before,
.ss-soccer.right:after {
  content: '\26BD';
}

.ss-hockeymask:before,
.ss-hockeymask.right:after {
  content: '\F40C';
}

.ss-flaginhole:before,
.ss-flaginhole.right:after {
  content: '\26F3';
}

.ss-paddles:before,
.ss-paddles.right:after {
  content: '\F407';
}

.ss-skiboot:before,
.ss-skiboot.right:after {
  content: '\F408';
}

.ss-skis:before,
.ss-skis.right:after {
  content: '\1F3BF';
}

.ss-dumbbell:before,
.ss-dumbbell.right:after {
  content: '\F416';
}

.ss-hiker:before,
.ss-hiker.right:after {
  content: '\F410';
}

.ss-runner:before,
.ss-runner.right:after {
  content: '\1F3C3';
}

.ss-shower:before,
.ss-shower.right:after {
  content: '\1F6BF';
}

.ss-bathtub:before,
.ss-bathtub.right:after {
  content: '\1F6C1';
}

.ss-hottub:before,
.ss-hottub.right:after {
  content: '\F411';
}

.ss-exercise:before,
.ss-exercise.right:after {
  content: '\F414';
}

.ss-hospital:before,
.ss-hospital.right:after {
  content: '\26E8';
}

.ss-medicalcross:before,
.ss-medicalcross.right:after {
  content: '\F4B0';
}

.ss-medicalbag:before,
.ss-medicalbag.right:after {
  content: '\F4B1';
}

.ss-bandage:before,
.ss-bandage.right:after {
  content: '\F4B2';
}

.ss-stethoscope:before,
.ss-stethoscope.right:after {
  content: '\F4B4';
}

.ss-syringe:before,
.ss-syringe.right:after {
  content: '\1F489';
}

.ss-bathroomscale:before,
.ss-bathroomscale.right:after {
  content: '\F4B7';
}

.ss-flask:before,
.ss-flask.right:after {
  content: '\F4C0';
}

.ss-testtube:before,
.ss-testtube.right:after {
  content: '\F4C1';
}

.ss-microscope:before,
.ss-microscope.right:after {
  content: '\1F52C';
}

.ss-telescope:before,
.ss-telescope.right:after {
  content: '\1F52D';
}

.ss-atom:before,
.ss-atom.right:after {
  content: '\269B';
}

.ss-dna:before,
.ss-dna.right:after {
  content: '\F4C2';
}

.ss-fluxcapacitor:before,
.ss-fluxcapacitor.right:after {
  content: '\EAD0';
}

.ss-up:before,
.ss-up.right:after {
  content: '\2B06';
}

.ss-right:before,
.ss-right.right:after {
  content: '\27A1';
}

.ss-down:before,
.ss-down.right:after {
  content: '\2B07';
}

.ss-left:before,
.ss-left.right:after {
  content: '\2B05';
}

.ss-navigateup:before,
.ss-navigateup.right:after {
  content: '\F500';
}

.ss-navigateright:before,
.ss-navigateright.right:after {
  content: '\25BB';
}

.ss-navigatedown:before,
.ss-navigatedown.right:after {
  content: '\F501';
}

.ss-navigateleft:before,
.ss-navigateleft.right:after {
  content: '\25C5';
}

.ss-share:before,
.ss-share.right:after {
  content: '\F601';
}

@font-face {
  font-family: "Quattrocento Sans";
  src: url(80c5a8d1c5f93a81f9d234152db6b63d.ttf);
}

@font-face {
  font-family: "Quattrocento Sans";
  src: url(911cd9cc3f16643b8e2367faffd52d90.ttf);
  font-style: italic;
}

@font-face {
  font-family: "Quattrocento Sans";
  src: url(7fd45b9b66da92e6198e0732294d5708.ttf);
  font-weight: 700;
}

@font-face {
  font-family: "Quattrocento Sans";
  src: url(c6ac2f5fa754ab35b768bd541bef4e09.ttf);
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Josefin Sans";
  src: url(aff001b45565556d667c11fe85cada0d.ttf);
}

@font-face {
  font-family: "Josefin Sans";
  src: url(40b679ecc2dce41059b86e1d77e5d4f0.ttf);
  font-style: italic;
}

@font-face {
  font-family: "Josefin Sans";
  src: url(9880fc0845d0f3950e490e4f3b05c08c.ttf);
  font-weight: 700;
}

@font-face {
  font-family: "Josefin Sans";
  src: url(fb9e061d9bd0e9899eaba36ccaad9579.ttf);
  font-weight: 700;
  font-style: italic;
}

html {
  box-sizing: border-box;
  color: #263238;
  font-family: "Quattrocento Sans", sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

*[data-color="Heart"] {
  color: #ff4d4d;
}

*[data-color="Weather"] {
  color: #fe0;
}

*[data-color="Hiker"] {
  color: #ffb31e;
}

*[data-color="Backpack"] {
  color: #289ce7;
}

*[data-color="Decisions"] {
  color: #6EA424;
}

#app {
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
  width: 100vw;
}

#app.facilitator {
  max-width: 1440px;
}

#ad-detector-wrapper {
  position: absolute;
}

.ad-banner {
  background-color: transparent;
  height: 1px;
  width: 1px;
}

em {
  font-style: italic;
}

button {
  background: #052b48;
  background-image: linear-gradient(315deg, #35799c 0%, #052b48 100%);
  border: none;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.25rem;
  min-width: 12rem;
  padding: 1rem 2rem;
}

button:hover {
  background: #35799c;
}

button:disabled {
  background: #dbe3e7 !important;
  color: #000;
  cursor: not-allowed;
}

button.small {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  font-size: 0.9rem;
  min-width: 6rem;
  padding: 0.5rem 1rem;
}

button.outline {
  background: none;
  background-image: none;
  border: 1px solid #0b4c8c;
  color: #0b4c8c;
  font-size: 1rem;
  box-shadow: none;
  min-height: 2.375rem;
  min-width: none;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

button.outline:disabled {
  border-color: #dbe3e7;
  color: #fff;
}

button.solid {
  background: #0b4c8c;
  background-image: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  box-shadow: none;
  min-height: 2.375rem;
  min-width: none;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

button.solid.red {
  background: #c40808;
}

button.text-btn {
  background: none;
  background-image: none;
  border: none;
  color: #0b4c8c;
  min-width: none;
  min-height: none;
  width: fit-content;
  height: fit-content;
  text-transform: uppercase;
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0;
}

button.unbutton {
  background: none;
  background-image: none;
  border: none;
  color: #000;
  font-size: 0.875rem;
  padding: 0;
  box-shadow: none;
  width: fit-content;
  height: fit-content;
}

i {
  font-style: italic;
}

b {
  font-weight: bold;
}

h2 {
  font-size: 1.5rem;
  margin: 0.3rem;
  margin-left: 0;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1rem;
  font-weight: 700;
}

p {
  margin: 1rem 1.5rem;
  line-height: 1.5;
}

.hidden {
  display: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

a[disabled] {
  pointer-events: none !important;
}

hr {
  border: none;
  border-bottom: 1px solid #000;
}

.disabled {
  pointer-events: none !important;
}