@charset "UTF-8";
/* mixins */
/* variables */
/* global variables for colors, etc*/
/*deals*/
/*typography*/
/* 2022 */
@font-face {
  font-family: "Bebas-Neue";
  src: url("../assets/_Fonts/BebasNeue/BebasNeue-Regular.otf");
}
/* the font below is the webfont version of triumph font*/
@font-face {
  font-family: "sa_triumphregular";
  src: url("../assets/_Fonts/triumph-webfont/triumph-webfontkit/satriumph-webfont.woff2") format("woff2"), url("../assets/_Fonts/triumph-webfont/triumph-webfontkit/satriumph-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "triumphOutline";
  src: url("../assets/_Fonts/triumph-sans-serif-wide-font-2021-08-31-07-08-57-utc/OTF/SATriumph-Outline.otf");
}
@font-face {
  font-family: "sourceSansPro-black";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Black.otf");
}
@font-face {
  font-family: "sourceSansPro-blackIt";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-BlackIt.otf");
}
@font-face {
  font-family: "sourceSansPro-bold";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Bold.otf");
}
@font-face {
  font-family: "sourceSansPro-boldIt";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-BoldIt.otf");
}
@font-face {
  font-family: "sourceSansPro-extraLight";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-ExtraLight.otf");
}
@font-face {
  font-family: "sourceSansPro-extraLightIt";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-ExtraLightIt.otf");
}
@font-face {
  font-family: "sourceSansPro-it";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-It.otf");
}
@font-face {
  font-family: "sourceSansPro-light";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Light.otf");
}
@font-face {
  font-family: "sourceSansPro-lightIt";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-LightIt.otf");
}
@font-face {
  font-family: "sourceSansPro-regular";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Regular.otf");
}
@font-face {
  font-family: "sourceSansPro-semibold";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Semibold.otf");
}
@font-face {
  font-family: "sourceSansPro-semiboldIt";
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-SemiboldIt.otf");
}
@font-face {
  font-family: Inkfree;
  src: url("../assets/_Fonts/inkfree/Inkfree-Regular.ttf") format("truetype");
}
@font-face {
  font-family: Kreon;
  src: url("../assets/_Fonts/kreon/Kreon-Regular.ttf") format("truetype");
}
@font-face {
  font-family: Library3amSoft;
  src: url("../assets/_Fonts/library-3-am/Library3amsoft.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: BywayC;
  src: url("../assets/_Fonts/BywayC/BywayC.ttf") format("truetype");
}
@font-face {
  font-family: JdLcdRounded;
  font-weight: 400;
  src: url("../assets/_Fonts/jd_lcd_rounded/") format("truetype");
}
@font-face {
  font-family: Telegraphic;
  src: url("../assets/_Fonts/Lavigne/Lavigne.otf") format("truetype");
}
@font-face {
  font-family: FreeSerifBold;
  font-weight: 700;
  src: url("../assets/_Fonts/FreeSerif/FreeSerifBold-eD53.ttf") format("truetype");
}
@font-face {
  font-family: coolvetica;
  font-weight: 700;
  src: url("../assets/_Fonts/Coolvetica/coolvetica rg.ttf") format("truetype");
}
@font-face {
  font-family: SFButtacupLettering;
  font-weight: 700;
  src: url("../assets/_Fonts/SFButtacup/SFButtacupLettering.ttf") format("truetype");
}
@font-face {
  font-family: Lavigne;
  font-weight: 700;
  src: url("../assets/_Fonts/Lavigne/Lavigne.otf") format("opentype");
}
@font-face {
  font-family: Allura-Regular;
  font-weight: 700;
  src: url("../assets/_Fonts/Allura/Allura-Regular.otf") format("opentype");
}
@font-face {
  font-family: Radicalis;
  font-weight: 700;
  src: url("../assets/_Fonts/Radicalis/") format("truetype");
}
@font-face {
  font-family: Fake-Serif;
  font-weight: 700;
  src: url("../assets/_Fonts/FakeSerif/FakeSerif-K4dp.ttf") format("truetype");
}
@font-face {
  font-family: ImpactLabel;
  font-weight: 700;
  src: url("../assets/_Fonts/Impact_Label/Impact_Label.ttf") format("truetype");
}
@font-face {
  font-family: KongQuest-Regular;
  font-weight: 700;
  src: url("../assets/_Fonts/KongQuest/KongQuest-Regular.otf") format("opentype");
}
@font-face {
  font-family: trueCrimes;
  font-weight: 700;
  src: url("../assets/_Fonts/TrueCrimes/true-crimes.ttf") format("truetype");
}
@font-face {
  font-family: DonGraffitiRegular;
  font-weight: 700;
  src: url("../assets/_Fonts/DonGraffiti/DonGraffiti.otf") format("opentype");
}
@font-face {
  font-family: LemonTuesday;
  font-weight: 700;
  src: url("../assets/_Fonts/LemonTuesday/") format("opentype");
}
@font-face {
  font-family: Digital-7-Mono;
  src: url("../assets/_Fonts/digital-7-mono/") format("truetype");
}
@font-face {
  font-family: Izza;
  src: url("../assets/_Fonts/Izza/Izza-yy1V.ttf") format("truetype");
}
@font-face {
  font-family: Bahnschrift;
  src: url("../assets/_Fonts/Bahnschrift/Bahnschrift.ttf") format("truetype");
}
@font-face {
  font-family: AgustusMerdeka;
  src: url("../assets/_Fonts/AgustusMerdeka/AgustusMerdeka-4BgP4.otf") format("opentype");
}
.sourcesanspro {
  font-family: SourceSansPro;
}

#content {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.container--text-page {
  text-align: center;
  width: 80%;
}

#all-button {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  background-image: url("../assets/_Buttons/message-bubble-white.png");
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 3.1vw;
  height: 3.3vw;
  font-weight: 600;
  font-size: 1vw;
  cursor: pointer;
  letter-spacing: 0.5px;
}

#app-logo-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 17.5vh;
}

#error-text {
  color: #e9222d;
}

textarea {
  resize: none;
  overflow: visible;
}

.app-logo-wrapper_enter {
  margin-bottom: -8vh;
}

#app-logo {
  width: 35%;
}

#page-wrapper {
  position: relative;
  height: 100%;
}

.flex-buttons {
  display: flex;
}

.trash {
  position: absolute;
  right: 2vw;
  bottom: 1.5vw;
  width: 1.75vw;
  height: 2.48vw;
  cursor: pointer;
}

#logout {
  color: white;
  position: absolute;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3vw;
  font-weight: 600;
  cursor: pointer;
}

.blue {
  color: #4497f7;
}

.grey {
  color: rgb(102, 102, 102);
}

#community-connect {
  align-items: center;
  border: 1px solid #fff;
  border-radius: 5vw;
  color: #fff;
  font-size: 0.85vw;
  font-weight: 600;
  justify-content: center;
  padding: 0.85vw 3vw;
  width: auto;
  min-width: 8vw;
  min-height: 1.1vw;
}

::-webkit-file-upload-button {
  display: none;
}

.page-flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  z-index: 1;
}

#resizeMe a {
  margin-top: 1vh;
}

.scrollable {
  box-sizing: border-box;
  height: 80vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 1vw;
  width: 100%;
}
.scrollable h3 {
  font-size: 2vh;
  line-height: 2.25vh;
  padding: 0.5vh 0;
}

.non-scrollable {
  box-sizing: border-box;
  height: 80vh;
  overflow-y: hidden;
  overflow-x: hidden;
  padding: 0 1vw;
  width: 100%;
}
.non-scrollable h3 {
  font-size: 2vh;
  line-height: 2.25vh;
  padding: 0.5vh 0;
}

.independent-teams_table th, .independent-teams_table td {
  padding-inline: 1vw;
  text-align: center;
}

.ksysa-roster-table {
  border-spacing: 0.5vh;
  margin: 0 auto;
  width: 80%;
}
.ksysa-roster-table th, .ksysa-roster-table td {
  color: white;
  font-size: 2.5vh;
  line-height: 4vh;
}
.ksysa-roster-table td {
  background-color: #36312f;
  font-weight: 600;
  text-align: center;
}

.dropdown-content u {
  font-size: 1.2vw;
}

.dropdown-element > .dropdown {
  margin: 0 auto;
  text-align: center !important;
  display: flex;
  justify-content: center;
  width: 2vw;
  margin-top: 0.5vw;
  cursor: pointer;
}

.remove-scrollbar::-webkit-scrollbar {
  display: none;
}

#dynamic-modal-close {
  cursor: pointer;
  position: absolute;
  bottom: 3vh;
  right: 1.6vw;
  width: 2vw;
}

#header-message {
  font-size: 1.4vw;
}

#dynamic-modal-close-red {
  cursor: pointer;
  position: absolute;
  bottom: 5vh;
  right: 1.6vw;
  width: 2vw;
}

.top-banner {
  padding: 1vh 0;
  text-align: center;
  width: 100%;
  margin-inline: auto;
  font-size: 2.25vh;
  line-height: 2.5vh;
  font-weight: 600;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  box-sizing: border-box;
  min-height: 5vh;
}

.top-info-banner {
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px rgba(99, 99, 99, 0.4) solid;
  box-sizing: border-box;
  color: white;
  display: flex;
  font-size: 2.25vh;
  font-weight: 600;
  flex-wrap: wrap;
  justify-content: space-between;
  left: 0vw;
  line-height: 2.5vh;
  padding: 1vh 1vw;
  padding-top: calc(1vh + env(safe-area-inset-top));
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 7.25vh;
}
.top-info-banner .info-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.top-info-banner.black {
  background: black;
}

.info-blurb {
  box-sizing: border-box;
  color: #fff;
  font-size: 1.75vh;
  font-weight: 600;
  line-height: 2vh;
  text-align: center;
  padding: 0.5vh 1vw 1vh 1vw;
}

.slcks-icon {
  width: 4vh;
  height: 4vh;
  background-image: url(../images/icons/2022/slcks@3x.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.footer-buttons {
  background-color: rgba(0, 0, 0, 0.4);
  border-top: 1px rgba(99, 99, 99, 0.4) solid;
  padding: 1vh 1vw;
  padding-bottom: calc(1vh + env(safe-area-inset-bottom));
  font-size: 1.5vh;
  line-height: 1.75vh;
  font-family: SourceSansPro;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 6.9vh;
  min-height: calc(6.9vh + env(safe-area-inset-bottom));
}
.footer-buttons div.icon-with-word:only-child:last-child {
  margin-left: auto;
}

.red-btn {
  min-width: 3vw;
  height: 2.75vw;
  text-align: center;
  font-size: 1.5vw;
  background-color: #e9222d;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2vw;
  line-height: 1;
  padding: 0 2vw;
  margin-inline: 1vw;
  cursor: pointer;
}
.red-btn span {
  margin-top: -0.5vh;
  font-size: 1.1vw;
}

.red-btns_bottom {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4vh;
}

.red-btns_bottom--manager {
  bottom: 2.5vh;
}

.link {
  font-weight: 600;
  cursor: pointer;
}

.override-inner-html-styles {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 1.75vh !important;
  background-color: transparent !important;
  cursor: pointer;
}
.override-inner-html-styles * {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 1.75vh !important;
  background-color: transparent !important;
  cursor: pointer;
  margin: 0;
}

.list-item-input {
  background-color: white;
  resize: none;
  cursor: default !important;
  border: none;
  width: 100%;
  font-size: 1vw;
  font-weight: 600;
  color: #000;
  font-family: sourceSansPro;
  position: relative;
}

.current-input {
  color: #4497f7;
  font-family: sourceSansPro;
}

.current-input::-webkit-input-placeholder {
  color: #4497f7;
}

.current-input::-moz-placeholder {
  color: #4497f7;
}

.current-input:-ms-input-placeholder {
  color: #4497f7;
}

.current-input::-ms-input-placeholder {
  color: #4497f7;
}

.current-input::placeholder {
  color: #4497f7;
}

.list-item_vertical-margin {
  margin: 2.5vh 0;
}

.list-item-input_top-align {
  background-color: white;
  resize: none;
  cursor: default !important;
  border: none;
  width: 90%;
  align-self: flex-start;
  color: #4497f7;
  padding-left: 0;
  font-family: "SourceSansPro";
  font-weight: 600;
  font-size: 1vw;
  overflow: hidden;
  line-height: 1;
}

.list-item-input_top-align::-webkit-input-placeholder {
  color: #4497f7;
}

.list-item-input_top-align::-moz-placeholder {
  color: #4497f7;
}

.list-item-input_top-align:-ms-input-placeholder {
  color: #4497f7;
}

.list-item-input_top-align::-ms-input-placeholder {
  color: #4497f7;
}

.list-item-input_top-align::placeholder {
  color: #4497f7;
}

.list-item-input_top-align:disabled {
  color: black !important;
}

.gold {
  color: #ffdc01 !important;
}

.white {
  color: #fff !important;
}

.pill {
  font-size: 1vw;
  color: white;
  text-align: center;
  font-weight: 600;
  border-radius: 0.6vw;
  height: 5.25vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30vw;
  margin: 2.25vh 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid white;
}
.pill::-webkit-input-placeholder {
  color: white;
}
.pill::-moz-placeholder {
  color: white;
}
.pill:-ms-input-placeholder {
  color: white;
}
.pill::placeholder {
  color: white;
}

.error-message {
  font-size: 1.5vh;
  color: #e91d23;
  text-align: center;
  z-index: 100;
}

.list-number {
  position: absolute;
  top: 0.2vw;
  left: 1.75vw;
  z-index: 100;
  color: #000 !important;
}

.list-number_non-admin {
  left: -0.25vw;
}

.blue-btn {
  color: white;
  background-color: #06415b;
  cursor: auto;
}

.checked {
  border-color: #fff !important;
  border-width: 2px !important;
}

.blue {
  color: #4497f7;
}

.blue-input {
  color: white;
  background-color: #4497f7;
  cursor: auto;
}

.blue-input::-webkit-input-placeholder {
  color: white;
}

.blue-input::-moz-placeholder {
  color: white;
}

.blue-input:-ms-input-placeholder {
  color: white;
}

.blue-input::placeholder {
  color: white;
}

#welcome-text {
  color: #fff;
  font-size: 4vh;
  margin: 0;
}

.contain-for-scroll {
  padding: 0.75vw 2.5vw;
  overflow-y: scroll;
  max-height: 70vh;
}

.page-flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-white_container {
  text-align: center;
  width: 50%;
  position: absolute;
  top: 13vh;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  height: 70vh;
  background-color: #fff;
  overflow-y: scroll;
}

.page-white_black-heading {
  font-size: 1.4vw;
  color: #000;
}

.footer-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 10vh;
}

#bottom-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45%;
  background-color: rgba(0, 0, 0, 0.4);
}

.shadow-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

#the-image {
  display: flex;
  width: 20vw;
  margin-inline: auto;
  box-sizing: border-box;
  cursor: pointer;
}

.back_bottom-left {
  position: absolute;
  bottom: 1.5vw;
  left: 2vw;
}

.committee-name {
  font-size: 1.2vw;
}

.icon-with-word {
  box-sizing: border-box;
  text-align: center;
  vertical-align: top;
  font-weight: 600;
  cursor: pointer;
}
.icon-with-word div {
  font-size: 1.25vh;
  font-weight: 600;
  line-height: 1.5vh;
  text-align: center;
  margin: 0.4vh auto 0 auto;
}
.icon-with-word.dimmed {
  opacity: 0.4;
}
#right-frame .tool .icon-with-word, #right-frame .tools-item-buttons .icon-with-word, #right-frame .sport-entity-item .icon-with-word, #right-frame .icon-with-word.small {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#right-frame .tool .icon-with-word img, #right-frame .tools-item-buttons .icon-with-word img, #right-frame .sport-entity-item .icon-with-word img, #right-frame .icon-with-word.small img {
  height: 3vh;
  max-width: none;
}
#right-frame .tool .icon-with-word div, #right-frame .tools-item-buttons .icon-with-word div, #right-frame .sport-entity-item .icon-with-word div, #right-frame .icon-with-word.small div {
  margin-top: 0.4vh;
  height: 1.5vh;
  white-space: nowrap;
  font-size: 1.25vh;
  font-weight: 600;
  line-height: 1.5vh;
}
.icon-with-word.hidden {
  visibility: hidden;
}
.icon-with-word.disabled {
  filter: brightness(50%);
  pointer-events: none;
}
#action-footer .icon-with-word.disabled {
  filter: brightness(70%);
}

button, img, a, div, span {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media screen and (orientation: landscape) {
  audio {
    height: 4vh;
    height: 4dvh;
    width: 18vw;
    width: 18dvw;
  }
  .android audio {
    height: 6vh;
    height: 6dvh;
  }
  .android audio::-webkit-media-controls-timeline {
    display: none;
  }
  .icon-with-word {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .icon-with-word img {
    height: 3vh;
    max-width: none;
  }
  .icon-with-word.object-fit-contain img {
    width: 3vh;
    object-fit: contain;
  }
  .icon-with-word div {
    height: 1.5vh;
    white-space: nowrap;
  }
  .icon-with-word.app-icon img {
    box-sizing: border-box;
    border: 1px white solid;
    border-radius: 0.5vh;
  }
  .icon-with-word.app-icon.selected img {
    border: 1px #23e823 solid;
  }
  .top-search-area {
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 1vh;
    padding-top: calc(1vh + env(safe-area-inset-top));
    padding-left: 13vw;
    padding-right: calc(1vw + env(safe-area-inset-right));
    top: 0;
    width: 65vw;
  }
  .top-search-area .top-search-input {
    margin: 0;
    border: 0;
    border-radius: 1.5vh;
    padding: 1vh 1vw;
    text-align: left;
    font-size: 1.5vh;
    line-height: 2vh;
    width: 39vw;
    box-sizing: border-box;
  }
  .ios .top-search-area .top-search-input {
    font-size: 16px;
    padding: 0.5vh 0.5vw;
  }
  .top-search-area .icon-with-word {
    width: 3vw;
  }
}
@media screen and (orientation: landscape) and (max-width: 956px) {
  audio {
    height: 11vh;
    height: 11dvh;
    width: 40vw;
    width: 40dvw;
  }
}
@media screen and (orientation: landscape) and (min-aspect-ratio: 2.3) {
  .scrollable, .non-scrollable {
    max-height: 55vh;
  }
}
/******** mobile version ********/
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #content {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }
  .android #content {
    height: 100svh;
  }
  #page-wrapper {
    height: 100vh;
    height: 100dvh;
  }
  .top-banner {
    border-color: rgb(255, 255, 255);
    font-size: 3vw;
  }
  .pill {
    width: 50vw;
    border-radius: 3vw;
    font-size: 16px;
  }
  .mobile_pill-request-code {
    height: 6vh;
    width: 57vw;
    border-radius: 2.5vw;
    font-size: 3.5vw;
  }
  .page-white_container {
    width: 100%;
    left: 0;
    transform: translateX(0);
  }
  .page-white_black-heading {
    font-size: 3.5vw;
  }
  .footer-bottom .empowered-by-slcket {
    left: 50%;
    transform: translate(-50%);
    width: 46vw;
  }
  #branding-section {
    height: 50vh;
    width: 100vw;
  }
  #branding-section-shorter {
    height: 35vh;
    width: 100vw;
  }
  #branding-section-shorter #app-logo {
    margin-top: 0;
  }
  #app-logo-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #app-logo {
    margin-top: -15vh;
    width: 45vw;
  }
  .icon-with-word {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    font-family: SourceSansPro;
    font-weight: 600;
    align-items: center;
  }
  .icon-with-word img {
    height: 6.5vw;
    object-fit: contain;
  }
  .icon-with-word.object-fit-contain img {
    width: 6.5vw;
    object-fit: contain;
  }
  .icon-with-word div {
    font-size: 2.5vw;
    line-height: 2.6vw;
    margin: 1vw auto 0 auto;
    text-align: center;
  }
  .icon-with-word.app-icon img {
    box-sizing: border-box;
    border: 1px white solid;
    border-radius: 0.5vh;
  }
  .icon-with-word.app-icon.selected img {
    border: 1px #23e823 solid;
  }
  .footer-buttons {
    align-items: flex-end;
    bottom: 0vw;
    z-index: 99;
    left: 0;
    height: 20vw;
    padding: 0 2vw 2.1vw 2vw;
    width: 100vw;
  }
  .skinny-iphone .footer-buttons {
    padding-bottom: 5vw;
  }
  .skinny-iphone .footer-buttons #footer-action-buttons, .skinny-iphone .footer-buttons #footer-action-buttons-popup {
    padding: 0 2vw 5vw 2vw;
  }
  .footer-buttons .icon-with-word {
    width: 15vw;
  }
  .footer-buttons .icon-with-word div {
    min-height: 5.2vw;
    width: 15vw;
    margin-top: 1vw;
  }
  .footer-buttons.seven .icon-with-word {
    width: 12vw;
  }
  .footer-buttons.seven .icon-with-word div {
    width: 12vw;
  }
  .top-info-banner {
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    color: #fff;
    display: flex;
    font-size: 125%;
    font-weight: 600;
    justify-content: space-between;
    left: 0vw;
    line-height: 135%;
    padding: 1vh 3vw;
    padding: 1dvh 3vw;
    top: 0;
    width: 100vw;
  }
  .top-info-banner .info-title {
    display: flex;
    flex-direction: column;
    min-height: 10vw;
    justify-content: center;
  }
  .skinny-iphone .top-info-banner {
    padding-top: 6.5vh;
  }
  .top-info-banner .info-toggle {
    height: 10vw;
  }
  .top-search-area {
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 1vh;
    padding-top: calc(1vh + env(safe-area-inset-top));
    padding-left: 20vw;
    padding-right: 2vw;
    top: 0;
    width: 100vw;
  }
  .top-search-area .top-search-input {
    margin: 0;
    border: 0;
    border-radius: 2vw;
    padding: 0.5vw 1vw;
    min-height: 6.5vw;
    text-align: left;
    font-size: 4.25vw;
    line-height: 5vw;
    width: 60vw;
    box-sizing: border-box;
  }
  .top-search-area .icon-with-word {
    width: 15vw;
  }
  .info-blurb {
    font-size: 3vw !important;
    font-weight: 600;
    line-height: 3.5vw !important;
    padding: 0 2vw 0.5vh 2vw;
    box-sizing: border-box;
  }
  .override-inner-html-styles {
    font-size: 3vw !important;
    line-height: 3.5vw !important;
  }
  .override-inner-html-styles * {
    font-size: 3vw !important;
    line-height: 3.5vw !important;
  }
  .manager-header {
    padding-top: calc(0.5vh + env(safe-area-inset-top));
  }
  .android audio {
    height: 6vw;
    width: 70vw;
  }
  #the-image {
    width: 60vw;
  }
}
/******* fat phones and tablets *****/
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  #content {
    width: 100%;
    height: 100vh;
    height: 100dvh;
  }
  #page-wrapper {
    height: 100vh;
    height: 100dvh;
  }
  .top-banner {
    border-color: rgb(255, 255, 255);
    font-size: 3vw;
  }
  .pill {
    width: 35vw;
    border-radius: 1.5vw;
    font-size: 3vw;
  }
  .mobile_pill-request-code {
    height: 6vh;
    width: 57vw;
    border-radius: 2.5vw;
    font-size: 3.5vw;
  }
  .back_bottom-left {
    bottom: 4vh;
    left: 6vw;
  }
  .red-btn {
    width: 9vw;
    height: 9vw;
    font-size: 3vw;
  }
  .page-white_container {
    width: 100%;
    left: 0;
    transform: translateX(0);
  }
  .page-white_black-heading {
    font-size: 3.5vw;
  }
  #the-image {
    width: 50vw;
  }
  .footer-bottom .empowered-by-slcket {
    left: 50%;
    transform: translate(-50%);
    width: 46vw;
  }
  #branding-section {
    height: 50vh;
    width: 100vw;
  }
  #branding-section-shorter {
    height: 35vh;
    width: 100vw;
  }
  #branding-section-shorter #app-logo {
    margin-top: 0;
  }
  #app-logo-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #app-logo {
    margin-top: -15vh;
    width: 45vw;
  }
  .icon-with-word {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    font-family: SourceSansPro;
    font-weight: 600;
    align-items: center;
  }
  .icon-with-word img {
    height: 2.5vh;
    height: 2.5dvh;
    object-fit: contain;
  }
  .icon-with-word.object-fit-contain img {
    width: 2.5vh;
    width: 2.5dvh;
    object-fit: contain;
  }
  .icon-with-word div {
    font-size: 1.075vh;
    line-height: 1.25vh;
    font-size: 1.075dvh;
    line-height: 1.25dvh;
    margin: 0.4vh auto 0 auto;
    margin: 0.4dvh auto 0 auto;
    text-align: center;
  }
  .footer-buttons {
    align-items: flex-end;
    bottom: 0;
    z-index: 99;
    left: 0;
    height: 7.4vh;
    height: 7.4dvh;
    padding: 1vh 3vw 1vh 3vw;
    padding: 1dvh 3vw 1dvh 3vw;
    width: 100vw;
  }
  .footer-buttons .icon-with-word div {
    height: 2.5vh;
    height: 2.5dvh;
  }
  .top-info-banner {
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    color: #fff;
    display: flex;
    font-size: 1.5vh;
    font-size: 1.5dvh;
    font-weight: 600;
    justify-content: space-between;
    left: 0vw;
    line-height: 1.75vh;
    line-height: 1.75dvh;
    padding: 1vh 3vw;
    padding: 1dvh 3vw;
    top: 0;
    width: 100vw;
    min-height: 6.15dvh;
    padding-top: calc(1vh + env(safe-area-inset-top));
    padding-top: calc(1dvh + env(safe-area-inset-top));
  }
  .top-info-banner .info-title {
    display: flex;
    flex-direction: column;
    height: 4.15vh;
    height: 4.15dvh;
    justify-content: center;
  }
  .top-info-banner .info-toggle {
    height: 4.15vh;
    height: 4.15dvh;
  }
  .top-search-area {
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.95vh;
    padding-bottom: 0.95dvh;
    padding-top: calc(0.95vh + env(safe-area-inset-top));
    padding-top: calc(0.95dvh + env(safe-area-inset-top));
    padding-left: 20vw;
    padding-right: 12vw;
    top: 0;
    width: 100vw;
  }
  .top-search-area .top-search-input {
    margin: 0;
    border: 0;
    border-radius: 2vw;
    padding: 0.25dvh 1vw;
    min-height: 2.25vh;
    min-height: 2.25dvh;
    text-align: left;
    font-size: 1.5vh;
    font-size: 1.5dvh;
    line-height: 1.75vh;
    line-height: 1.75dvh;
    width: 60vw;
    box-sizing: border-box;
  }
  .top-search-area .icon-with-word {
    width: 6vw;
  }
  .info-blurb {
    font-size: 1.8vw !important;
    font-weight: 600;
    line-height: 2.1vw !important;
    padding: 0 2vw 0.5vh 2vw;
    box-sizing: border-box;
  }
  .override-inner-html-styles {
    font-size: 1.8vw !important;
    line-height: 2.1vw !important;
  }
  .override-inner-html-styles * {
    font-size: 1.8vw !important;
    line-height: 2.1vw !important;
  }
  .manager-header {
    padding-top: calc(0.5vh + env(safe-area-inset-top));
  }
  .android audio {
    height: 6vh;
    width: 64vw;
  }
}
.clickable {
  cursor: pointer;
}

.empowered-by-slcket {
  height: 5.75vh;
}

@media screen and (max-width: 767px) {
  #verify-phone-text {
    font-size: 3.75vw;
  }
  #verify-button-text {
    font-size: 3vw;
  }
  #verify-phone-number {
    margin: 5vh 0 0 0;
  }
  #verify-phone-number img {
    width: 16vw;
  }
  #error_text {
    font-size: 3.75vw;
  }
  #spinner {
    margin: 5vh 0 0 0;
    display: none;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: center;
  }
  #spinner #progress-bar {
    border-radius: 2vw;
    border: 1px #aeaeae solid;
    height: 2vh;
    width: 8vw;
    overflow: hidden;
  }
  #spinner #progress-bar #green-bar {
    background-color: #23e823;
    height: 2vh;
    width: 0;
  }
  #branding-section {
    box-sizing: border-box;
    display: table;
    height: 65vh;
    position: absolute;
    top: 0vh;
    width: 100vw;
  }
  .fat-iphone #branding-section {
    height: 62.5vh;
    top: 2.5vh;
  }
  .skinny-iphone #branding-section {
    height: 61vh;
    top: 4vh;
  }
  #branding-section #app-logo-wrapper {
    display: table-cell;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    width: 100%;
  }
  #branding-section #app-logo-wrapper #app-logo {
    display: inline;
    height: auto;
    max-width: 71.875vw;
    max-height: 15vh;
    width: auto;
    object-fit: contain;
  }
  #create-account #app-logo-wrapper {
    margin-bottom: 70vh;
  }
  #create-account #app-logo-wrapper #app-logo {
    max-width: 71.875vw;
    max-height: 15vh;
    margin: 0;
    object-fit: contain;
  }
  .create-account-section #create-account-text {
    margin: 2vh 0;
  }
  .create-account-section input[type=number],
  .create-account-section input[type=text],
  .create-account-section input[type=tel] {
    box-sizing: border-box;
    width: 100%;
    outline: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    margin-top: 2vh;
    font-weight: 600;
    border: 1px solid white;
    border-radius: 3vw !important;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70vw !important;
  }
  .create-account-section div, .create-account-section span {
    font-size: 3vw;
  }
  .create-account-section .footer-bottom {
    bottom: 2vh;
  }
  .login-section {
    position: absolute;
    border-radius: 0;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 25vw;
    padding-top: 5vw;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.4);
    width: 100vw;
  }
  .alphapointe .login-section {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9), rgb(0, 0, 0), rgb(0, 0, 0));
    height: 100vw;
    padding-top: 25vw;
  }
  .alphapointe .login-section p {
    font-weight: 600;
  }
  .fat-iphone .login-section {
    height: 70vw;
  }
  .login-section p {
    text-align: center;
    margin-top: 1.5vh;
    color: white;
    width: 65vw;
    line-height: 1.4;
  }
  .login-section .blue-input {
    font-family: SourceSansPro;
    font-size: 200%;
    line-height: 100%;
    height: auto;
    margin-bottom: 0;
    margin-top: 2vh;
  }
  .login-section .blue-input::placeholder {
    color: white;
  }
  .login-section img {
    margin: 0 auto;
    margin-top: 2vh;
  }
  .login-section div {
    margin-top: 1vh;
    color: white;
    font-weight: bold;
    text-align: center;
  }
  .login-section .button-group {
    position: fixed;
  }
  .login-section #create-account,
  .login-section #login {
    color: #4497f7;
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
    z-index: 999;
  }
  .login-section input[type=text],
  .login-section input[type=tel] {
    box-sizing: border-box;
    width: 100%;
    outline: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    margin-top: 2vh;
    font-weight: 600;
    border: 1px solid white;
    border-radius: 3vw !important;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70vw !important;
  }
  .login-section #error-text {
    font-size: 2.5vw;
    line-height: 3.5vw;
  }
  #slcket-link-wrapper {
    bottom: 8.5vw;
    height: 10vw;
    position: absolute;
    text-align: center;
    width: 100vw;
  }
  #slcket-link-wrapper img {
    height: 10vw;
  }
  #controls_wrapper {
    box-sizing: border-box;
    display: table;
    height: 35vh;
    position: absolute;
    top: 0vh;
    width: 100vw;
  }
  .fat-iphone #controls_wrapper {
    height: 32.5vh;
    top: 2.5vh;
  }
  .skinny-iphone #controls_wrapper {
    height: 31vh;
    top: 4vh;
  }
  #controls_wrapper #group_names {
    display: table-cell;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    width: 100%;
  }
  #controls_wrapper #group_names #skinned_group_image {
    display: inline;
    height: auto;
    max-width: 71.875vw;
    max-height: 15vh;
    width: auto;
  }
  #inside {
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
  #branding-section {
    height: 50vh;
    top: 0vh;
  }
  .fat-iphone #branding-section {
    height: 25vh;
    top: 0vh;
    padding-top: 0;
    margin-bottom: 0;
  }
  .skinny-iphone #branding-section {
    height: 61vh;
    top: 4vh;
  }
  #branding-section #app-logo-wrapper #app-logo {
    max-width: 71.875vw;
    max-height: 15vh;
    margin: 0;
    object-fit: contain;
  }
  #create-account #app-logo-wrapper {
    height: 25vh;
    margin-bottom: 0;
  }
  #create-account #app-logo-wrapper #app-logo {
    max-width: 71.875vw;
    max-height: 15vh;
    margin: 0;
    object-fit: contain;
  }
  #slcket-link-wrapper {
    bottom: 2vh;
    height: 7vw;
    position: absolute;
    text-align: center;
    width: 100vw;
  }
  #slcket-link-wrapper img {
    height: 7vw;
    margin-top: 0;
  }
  .login-section {
    padding: 0;
    padding-top: 1vh;
  }
  .login-section p {
    margin: 1vh 0;
  }
  .login-section #error-text {
    font-size: 2vw;
  }
  .fat-iphone .login-section {
    height: 40vw;
  }
  .login-section input[type=text],
  .login-section input[type=tel] {
    margin-top: 2vh;
    border-radius: 2vw !important;
    height: 6vw;
    width: 60vw !important;
  }
  #controls_wrapper {
    height: 25vh;
    position: relative;
  }
  .fat-iphone #controls_wrapper {
    height: 25vh;
    top: 0vh;
  }
  .skinny-iphone #controls_wrapper {
    height: 25vh;
    top: 0vh;
  }
  #verify-phone-number {
    margin: 5vh 0 0 0;
  }
  #verify-phone-number img {
    width: 12vw;
  }
  #verify-button-text {
    font-size: 2vw;
  }
  #spinner #progress-bar {
    height: 3vh;
  }
  #spinner #progress-bar #green-bar {
    height: 3vh;
  }
  #error_text {
    font-size: 2vw;
  }
  .create-account-section {
    position: relative !important;
    height: 75vh;
  }
  .create-account-section #create-account-text {
    margin: 4vh 0;
  }
  .create-account-section .container {
    margin-top: 0 !important;
    margin-inline: 2vw !important;
    display: inline-flex !important;
  }
  .create-account-section div, .create-account-section span {
    font-size: 2vw;
  }
  .create-account-section input[type=number],
  .create-account-section input[type=text],
  .create-account-section input[type=tel] {
    margin-top: 2vh;
    border-radius: 2vw !important;
    height: 6vw;
    width: 60vw !important;
  }
  .create-account-section .footer-bottom {
    margin-top: 0;
    padding-bottom: 0;
  }
}
@media screen and (orientation: landscape) {
  #landing-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    width: 100%;
    padding-top: env(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(7vh + env(safe-area-inset-bottom));
    padding-bottom: calc(7dvh + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    margin: 0 auto;
  }
  #landing-page .image-wrapper {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 3.5vh 5vw;
    padding: 3.5dvh 5dvw;
    z-index: 2;
  }
  #landing-page .image-wrapper .header-image {
    height: 16vh;
    height: 16dvh;
    width: 40vh;
    width: 40dvh;
    object-fit: contain;
  }
  #landing-page .image-wrapper .image-wrapper-flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #landing-page .image-wrapper .image-wrapper-flex .red-action {
    margin: 0 5vw;
  }
  #landing-page .welcome {
    align-items: center;
    flex-shrink: 99;
    flex-grow: 99;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1vw;
    padding: 0 1dvw;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }
  #landing-page .welcome img {
    filter: brightness(0.5);
    width: 100%;
    max-height: 60vh;
    max-height: 60dvh;
  }
  .ios.landscape-phone #landing-page .welcome img, .ios.standalone-landscape #landing-page .welcome img {
    max-height: 50vh;
    max-height: 50dvh;
  }
  .android.landscape-phone #landing-page .welcome img, .android.standalone-landscape #landing-page .welcome img {
    max-height: 55vh;
    max-height: 55dvh;
  }
  #landing-page .text-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 15%;
    box-sizing: border-box;
  }
  #landing-page .text-wrapper.create-account {
    padding-top: 30vh;
    padding-top: 30dvh;
    z-index: 2;
    justify-content: flex-start;
  }
  #landing-page .text-wrapper #root {
    font-size: 5vh;
    line-height: 6vh;
    text-align: center;
  }
  #landing-page input[type=text], #landing-page input[type=tel], #landing-page div.phone-input, #landing-page div.create-input {
    margin: 0 1vw;
    width: 25vw;
    width: 25dvw;
    max-width: 40vh;
    max-width: 40dvh;
    font-size: 2vh;
    line-height: 5.25vh;
    color: white;
    text-align: center;
    font-weight: 600;
    border-radius: 1vh;
    height: 5.25vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid white;
    outline: none;
  }
  .ios #landing-page input[type=text], .ios #landing-page input[type=tel], .ios #landing-page div.phone-input, .ios #landing-page div.create-input {
    font-size: 16px;
    /*line-height: 18px;*/
    max-width: 60vh;
    max-width: 60dvh;
  }
  .ipad #landing-page input[type=text], .ipad #landing-page input[type=tel], .ipad #landing-page div.phone-input, .ipad #landing-page div.create-input {
    font-size: 2vh;
  }
  #landing-page input[type=text]::-webkit-input-placeholder, #landing-page input[type=tel]::-webkit-input-placeholder, #landing-page div.phone-input::-webkit-input-placeholder, #landing-page div.create-input::-webkit-input-placeholder {
    color: white;
  }
  #landing-page input[type=text]::-moz-placeholder, #landing-page input[type=tel]::-moz-placeholder, #landing-page div.phone-input::-moz-placeholder, #landing-page div.create-input::-moz-placeholder {
    color: white;
  }
  #landing-page input[type=text]:-ms-input-placeholder, #landing-page input[type=tel]:-ms-input-placeholder, #landing-page div.phone-input:-ms-input-placeholder, #landing-page div.create-input:-ms-input-placeholder {
    color: white;
  }
  #landing-page input[type=text]::placeholder, #landing-page input[type=tel]::placeholder, #landing-page div.phone-input::placeholder, #landing-page div.create-input::placeholder {
    color: white;
  }
  #landing-page input[type=text].invalid, #landing-page input[type=tel].invalid, #landing-page div.phone-input.invalid, #landing-page div.create-input.invalid {
    border: 1px solid red;
  }
  #landing-page .dark-checkbox-label .translatable.invalid {
    color: red;
  }
  .footer-buttons {
    padding-left: calc(1vw + env(safe-area-inset-left));
  }
}
/********* super-wide *********/
@media screen and (orientation: landscape) and (min-aspect-ratio: 16/8) {
  .ios.landscape-phone #right-frame #landing-page .footer-buttons, .ios.landscape-phone #right-media-frame #landing-page .footer-buttons, .ios.landscape-phone #text-input-fullscreen-modal #landing-page .footer-buttons, .ios.landscape-phone #modal-layer-select-input #landing-page .footer-buttons, .ios.landscape-phone #date-input-fullscreen-modal #landing-page .footer-buttons, .ios.landscape-phone #time-input-fullscreen-modal #landing-page .footer-buttons, .ios.landscape-phone #dynamic-popup-layer #landing-page .footer-buttons {
    padding-left: calc(1vw + env(safe-area-inset-left));
  }
  .ios.standalone-landscape #right-frame #landing-page .footer-buttons, .ios.standalone-landscape #right-media-frame #landing-page .footer-buttons, .ios.standalone-landscape #text-input-fullscreen-modal #landing-page .footer-buttons, .ios.standalone-landscape #modal-layer-select-input #landing-page .footer-buttons, .ios.standalone-landscape #date-input-fullscreen-modal #landing-page .footer-buttons, .ios.standalone-landscape #time-input-fullscreen-modal #landing-page .footer-buttons, .ios.standalone-landscape #dynamic-popup-layer #landing-page .footer-buttons {
    padding-left: calc(1vw + env(safe-area-inset-left));
  }
  .android.landscape-phone #right-frame #landing-page .footer-buttons, .android.landscape-phone #right-media-frame #landing-page .footer-buttons, .android.landscape-phone #text-input-fullscreen-modal #landing-page .footer-buttons, .android.landscape-phone #modal-layer-select-input #landing-page .footer-buttons, .android.landscape-phone #date-input-fullscreen-modal #landing-page .footer-buttons, .android.landscape-phone #time-input-fullscreen-modal #landing-page .footer-buttons, .android.landscape-phone #dynamic-popup-layer #landing-page .footer-buttons {
    padding-left: calc(3vw + env(safe-area-inset-left));
  }
  .android.standalone-landscape #right-frame #landing-page .footer-buttons, .android.standalone-landscape #right-media-frame #landing-page .footer-buttons, .android.standalone-landscape #text-input-fullscreen-modal #landing-page .footer-buttons, .android.standalone-landscape #modal-layer-select-input #landing-page .footer-buttons, .android.standalone-landscape #date-input-fullscreen-modal #landing-page .footer-buttons, .android.standalone-landscape #time-input-fullscreen-modal #landing-page .footer-buttons, .android.standalone-landscape #dynamic-popup-layer #landing-page .footer-buttons {
    padding-left: calc(3vw + env(safe-area-inset-left));
  }
}
/**** Tablets ****/
@media screen and (orientation: landscape) and (max-aspect-ratio: 16/8) {
  #landing-page .text-wrapper {
    padding: 0 10%;
  }
  #landing-page .text-wrapper.create-account {
    padding-top: 35vh;
    padding-top: 35dvh;
  }
  #landing-page .text-wrapper #root {
    font-size: 4vh;
    line-height: 5vh;
  }
}
@media screen and (orientation: portrait) {
  #landing-page {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
  }
  #landing-page .landing-page-inner {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-top: calc(4vh + env(safe-area-inset-top));
    padding-top: calc(4dvh + env(safe-area-inset-top));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  }
  #landing-page .landing-page-inner .bottom-section {
    padding-top: 12vh;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    padding-bottom: calc(12vh + env(safe-area-inset-bottom));
    padding-bottom: calc(12dvh + env(safe-area-inset-bottom));
  }
  #landing-page .landing-page-inner .bottom-section .text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-grow: 0;
    color: white;
    padding: 0 3vw;
    padding: 0 3dvw;
    text-align: center;
    font-size: 2vh;
    line-height: 2.5vh;
    font-weight: 600;
    /*.keyboard-open & {
      margin-bottom: 4vh;
    }*/
  }
  #landing-page .landing-page-inner .bottom-section .text-wrapper #root {
    font-size: 2.5vh;
    line-height: 3vh;
    text-align: center;
    margin-top: 2vh;
  }
  #landing-page .landing-page-inner .bottom-section .text-wrapper .text-wrapper-flex {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4vh;
    margin-top: 4dvh;
    padding: 0 9vw;
    width: 100%;
  }
  #landing-page .landing-page-inner .bottom-section .text-wrapper .text-wrapper-flex .red-action {
    min-width: 12vw;
  }
  #landing-page .landing-page-inner .image-wrapper {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 99;
    flex-grow: 99;
    justify-content: center;
    max-height: 22vh;
    max-height: 22dvh;
    max-width: 80vw;
    max-width: 80dvw;
    margin: 0 auto;
  }
  .keyboard-open #landing-page .landing-page-inner .image-wrapper {
    visibility: hidden;
  }
  #landing-page .landing-page-inner .image-wrapper .header-image {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  #landing-page .landing-page-inner .welcome {
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
    margin: 2vh 0;
    margin: 2dvh 0;
    padding: 0 1vw;
    padding: 0 1dvw;
  }
  .keyboard-open #landing-page .landing-page-inner .welcome {
    visibility: hidden;
  }
  #landing-page .landing-page-inner .welcome img {
    width: 98vw;
    width: 98dvw;
  }
  #landing-page input[type=text], #landing-page input[type=tel], #landing-page div.phone-input, #landing-page div.create-input {
    margin: 0 1vw;
    width: 60vw;
    width: 60dvw;
    font-size: 2vh;
    line-height: 5.25vh;
    color: white;
    text-align: center;
    font-weight: 600;
    border-radius: 1vh;
    height: 5.25vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid white;
    outline: none;
  }
  .ios #landing-page input[type=text], .ios #landing-page input[type=tel], .ios #landing-page div.phone-input, .ios #landing-page div.create-input {
    font-size: 16px;
    /*line-height: 18px;*/
  }
  .ipad #landing-page input[type=text], .ipad #landing-page input[type=tel], .ipad #landing-page div.phone-input, .ipad #landing-page div.create-input {
    font-size: 2vh;
  }
  #landing-page input[type=text]::-webkit-input-placeholder, #landing-page input[type=tel]::-webkit-input-placeholder, #landing-page div.phone-input::-webkit-input-placeholder, #landing-page div.create-input::-webkit-input-placeholder {
    color: white;
  }
  #landing-page input[type=text]::-moz-placeholder, #landing-page input[type=tel]::-moz-placeholder, #landing-page div.phone-input::-moz-placeholder, #landing-page div.create-input::-moz-placeholder {
    color: white;
  }
  #landing-page input[type=text]:-ms-input-placeholder, #landing-page input[type=tel]:-ms-input-placeholder, #landing-page div.phone-input:-ms-input-placeholder, #landing-page div.create-input:-ms-input-placeholder {
    color: white;
  }
  #landing-page input[type=text]::placeholder, #landing-page input[type=tel]::placeholder, #landing-page div.phone-input::placeholder, #landing-page div.create-input::placeholder {
    color: white;
  }
  #landing-page input[type=text].invalid, #landing-page input[type=tel].invalid, #landing-page div.phone-input.invalid, #landing-page div.create-input.invalid {
    border: 1px solid red;
  }
  #landing-page .dark-checkbox-label .translatable.invalid {
    color: red;
  }
  #auth-screen {
    height: 100%;
  }
  #auth-screen #keyboard-spacer {
    background-color: #d1d0d5;
    box-sizing: border-box;
    height: 4vh;
    width: 100%;
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #auth-screen.keyboard-open {
    /*#keyboard-spacer {
      display: block;
    }*/
  }
  #auth-screen.keyboard-open #accept-terms-label {
    visibility: hidden;
  }
  #auth-screen.keyboard-open #old-enough-label {
    visibility: hidden;
  }
  #auth-screen.keyboard-open {
    /*
    #footer-buttons {
      visibility: hidden;
    }
    */
  }
}
@media (orientation: portrait) {
  #left-frame {
    display: none;
  }
}
@media (orientation: landscape) {
  #left-frame {
    display: block;
  }
}
#left-frame .fullscreen-active {
  display: block !important;
}
#left-frame {
  left: 0;
  top: 0;
  transform: none;
  width: 35vw;
  height: 100%;
}
#left-frame #left-content .badge {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1vw;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5vw;
  height: 1.5vw;
  background-color: #ed2027;
  color: #fff;
  border-radius: 50%;
}
#left-frame #left-content {
  height: 100%;
  position: relative;
  z-index: 2;
}
#left-frame #left-content #wheel_wrapper {
  z-index: 9;
  position: fixed;
  width: 25.3493333333vw;
  height: 25.3493333333vw;
  left: 4.8253333334vw;
  top: calc(50% - 12.6746666667vw);
}
#left-frame #left-content #wheel_wrapper div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#left-frame #left-content #wheel_background, #left-frame #left-content #plus_wheel_background {
  width: 25.3493333333vw;
  height: 25.3493333333vw;
}
#left-frame #left-content #wheel_outer {
  border-radius: 50%;
  width: 25.3493333333vw;
  height: 25.3493333333vw;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 0.2vw solid #8b8b8b;
}
#left-frame #left-content #plus_wheel_background #wheel_outer {
  border: none;
  background: none;
}
#left-frame #left-content #user_portrait {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%;
  position: absolute;
  z-index: 1000;
  opacity: 1;
  transition: opacity ease-in-out 1s;
  cursor: pointer;
  width: 11.0413333333vw;
  height: 11.0413333333vw;
  left: 7.154vw;
  top: 7.154vw;
}
#left-frame #left-content #user_portrait #middle_text_wrapper {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
}
#left-frame #left-content #user_portrait #middle_text {
  color: #f1f1f1;
  display: table-cell;
  font-size: 200%;
  text-align: center;
  word-break: break-word;
  vertical-align: middle;
  font-style: italic;
  font-family: SourceSansPro;
  font-weight: 700;
  pointer-events: none;
}
#left-frame #left-content #user_portrait #middle_text .inkfree {
  font-weight: 400;
  font-family: Inkfree;
  font-style: normal;
  font-weight: 700;
  pointer-events: none;
}
#left-frame #left-content #personas_wrapper {
  height: 25.3493333333vw;
  width: 25.3493333333vw;
  position: relative;
  top: -25.3493333333vw;
  left: 0;
  z-index: 999;
}
#left-frame #left-content #personas_wrapper .persona {
  cursor: pointer;
  box-sizing: border-box;
  height: 4.704vw;
  width: 4.704vw;
  position: absolute;
  text-decoration: none;
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
}
#left-frame #left-content #personas_wrapper .persona .icon-with-word {
  pointer-events: none;
  width: 100%;
}
#left-frame #left-content #personas_wrapper .persona .icon-with-word img {
  height: auto;
  max-height: 2.6133333333vw;
  max-width: 3.6586666667vw;
  pointer-events: none;
}
#left-frame #left-content #personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
  margin-top: 0;
  width: fit-content;
  height: fit-content;
  position: relative;
  pointer-events: none;
}
#left-frame #left-content #personas_wrapper .persona.dragging {
  cursor: grabbing;
}
#left-frame #left-content #personas_wrapper .now {
  color: #4497f7;
  border: 0.1176vw solid #4497f7;
}
#left-frame #left-content #personas_wrapper .urgent {
  color: #4497f7;
  border: 0.1176vw solid #4497f7;
}
#left-frame #left-content #personas_wrapper .recent {
  color: #4497f7;
  border: 0.1176vw solid #4497f7;
}
#left-frame #left-content #personas_wrapper .normal {
  color: #4497f7;
  border: 0.1176vw solid #4497f7;
}
#left-frame #left-content #personas_wrapper .past {
  color: #4497f7;
  border: 0.1176vw solid #4497f7;
}
#left-frame #left-content #personas_wrapper .distant {
  color: #4497f7;
  border: 0.1176vw solid #4497f7;
}
#left-frame #left-content #personas_wrapper .archaic {
  color: #4497f7;
  border: 0.1176vw solid #4497f7;
}
#left-frame #left-content #personas_wrapper .updates {
  width: 1.1106666667vw;
  height: 1.1106666667vw;
  position: absolute;
  border-radius: 50%;
  right: -0.392vw;
  top: -0.392vw;
  text-align: center;
  font-size: 0.784vw;
  line-height: 0.98vw;
  background: #424649;
  margin: 0;
}
#left-frame #left-content #personas_wrapper .updates.hide {
  display: none;
}
#left-frame #left-content #personas_wrapper .updates span {
  display: inline-block;
  vertical-align: top;
}
#left-frame #left-content #personas_wrapper .updates span.tiny {
  font-size: 0.522928vw;
}
#left-frame #left-content #personas_wrapper .answer_text {
  font-family: SourceSansPro;
  font-weight: 600;
  color: white;
  text-align: center;
  pointer-events: none;
  word-break: break-word;
  width: 5.7493333333vw;
  font-size: 1.5vh;
  line-height: 1.75vh;
  margin-left: -0.5226666667vw;
}
#left-frame #left-content #personas_wrapper .answer_text.uppercase {
  text-transform: uppercase;
}
#left-frame #left-content #personas_wrapper .answer_text .SourceSansPro {
  font-family: SourceSansPro;
}
#left-frame #left-content #personas_wrapper .answer_text .no-transform {
  text-transform: none;
}
#left-frame {
  /*
    #left-content .persona {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      height: 4.9vw;
      width: 4.9vw;
      position: absolute;
      background-position: center;
      border: 0.130667vw solid #fff;
      border-radius: 50%;
      text-decoration: none;
      display: table;
      background-color: #317C61;
    }

    #left-content .personaBorder {
      border: .144vw solid #aeaeae;
    }
  */
}
#left-frame #left-content #persona0 {
  top: 1.225vw;
  left: 10.3226666667vw;
}
#left-frame #left-content #persona1 {
  top: 3.889606933vw;
  left: 3.889606933vw;
}
#left-frame #left-content #persona2 {
  top: 10.3226666667vw;
  left: 1.225vw;
}
#left-frame #left-content #persona3 {
  top: 16.77394133vw;
  left: 3.889606933vw;
}
#left-frame #left-content #persona4 {
  top: 19.4203333333vw;
  left: 10.3226666667vw;
}
#left-frame #left-content #persona5 {
  top: 16.77394133vw;
  left: 16.77394133vw;
}
#left-frame #left-content #persona6 {
  top: 10.3226666667vw;
  left: 19.4203333333vw;
}
#left-frame #left-content #persona7 {
  top: 3.889606933vw;
  left: 16.77394133vw;
}
#left-frame {
  /*
    #left-content .badge {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 1vw;
      line-height: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.5vw;
      height: 1.5vw;
      background-color: #ed2027;
      color: #fff;
      border-radius: 50%;
    }
  */
}
#left-frame #left-content .control_footer {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  bottom: 5.5vh;
  left: 50%;
  transform: translateX(-50%);
}
#left-frame #left-content .control-footer_top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vh;
}
#left-frame #left-content .control_footer img {
  border: none;
}
#left-frame #left-content #app_name_wrapper {
  width: 100%;
}
#left-frame #left-content #app_name_wrapper.main {
  align-items: center;
  display: flex;
  height: calc(50% - 12.25vw);
  justify-content: center;
}
#left-frame #left-content #app_name_wrapper.main #header-image {
  cursor: pointer;
  height: calc(50vh - 12.25vw - 7vh);
  width: 23.22962963vw;
  margin: 0;
  object-fit: contain;
}
#left-frame #left-content #app_name_wrapper #welcome_name_text {
  color: white;
  font-family: "sourceSansPro-regular";
  font-size: 1vw;
  line-height: 1;
  margin-top: 1vh;
  text-align: center;
  text-transform: uppercase;
}
#left-frame #left-content #app_name_wrapper #app_name {
  background: 0 0;
  border: 0;
  bottom: calc(50% + 13vw);
  left: 0;
  color: inherit;
  display: none;
  font-size: 3vw;
  font-weight: 700;
  line-height: 7vw;
  margin: 0;
  padding: 0;
  position: fixed;
  text-align: center;
  width: 35vw;
  z-index: 2;
}
#left-frame #left-content #app_name_wrapper #app_name.pink {
  color: #f240a1;
}
#left-frame #left-content #app_name_wrapper #app_name.hot-pink {
  color: #906;
}
#left-frame #left-content #app_name_wrapper #app_name.red {
  color: #e4001e;
}
#left-frame #left-content #app_name_wrapper #app_name.orange {
  color: #bc4012;
}
#left-frame #left-content #app_name_wrapper #app_name.red-orange {
  color: #c30;
}
#left-frame #left-content #app_name_wrapper #app_name.purple {
  color: #7000a4;
}
#left-frame #left-content #app_name_wrapper #app_name.green {
  color: #269a5e;
}
#left-frame #left-content #app_name_wrapper #app_name.cyan {
  color: #269ca3;
}
#left-frame #left-content #app_name_wrapper #app_name.blue {
  color: #0c2a8c;
}
#left-frame #left-content #app_name_wrapper #app_name.grey {
  color: #303030;
}
#left-frame #left-content #app_name_wrapper #app_name.dark {
  color: #151515;
}
#left-frame #left-content #app_name_wrapper #app_name.white {
  color: #f1f1f1;
}
#left-frame #left-content #app_name_wrapper #app_name.charcoal {
  color: #2f2f2f;
}
#left-frame #left-content #app_name_wrapper #app_name.kombu-green {
  color: #364133;
}
#left-frame #left-content #app_name_wrapper #app_name.orange-salmon {
  color: #ce482d;
}
#left-frame #left-content #app_name_wrapper #app_name.persian-blue {
  color: #2833b1;
}
#left-frame #left-content #app_name_wrapper #app_name.white-chocolate {
  color: #ece4d1;
}
#left-frame #left-content #app_name_wrapper #app_name.blank-white {
  color: #ffffff;
}
#left-frame #left-content #app_name_wrapper #app_name.dark-blue {
  color: #01425e;
}
#left-frame #left-content #app_name_wrapper #app_name.sonic-silver {
  color: #7a7a7a;
}
#left-frame #left-content #app_name_wrapper #app_name.lilac {
  color: #c8a2b9;
}
#left-frame #left-content #app_name_wrapper #app_name.blue-jeans {
  color: #5db6de;
}
#left-frame #left-content #app_name_wrapper #app_name.bluish-grey {
  color: #495f6c;
}
#left-frame #left-content #app_name_wrapper #app_name.raisin {
  color: #2a1621;
}
#left-frame #left-content #app_name_wrapper #app_name.black {
  color: #000000;
}
#left-frame #left-content #app_name_wrapper #app_name.custom {
  color: var(--custom-btn-color);
}
#left-frame {
  /*
    #left-content #app_name_wrapper #header-image {
      //background-image: url(https://static.slcket.com/web/2020/editor/default-logo.png);
      background-color: transparent;
      background-size: contain;
      background-position: center bottom;
      background-repeat: no-repeat;
      bottom: calc(50% + 15vw);
      display: inline-block;
      height: 7vw;
      left: 8.75vw;
      margin: 0;
      padding: 0;
      position: fixed;
      width: 17.5vw;
    }
  */
}
#left-frame #left-content #app-preview-wrapper {
  height: 100%;
  position: fixed;
  width: 35vw;
  z-index: 2;
}
#left-frame #left-content #app-preview-wrapper .cr-viewport {
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
#left-frame #left-content #app-preview-wrapper .blue-button {
  bottom: 1.75vh;
  left: calc((35vw - 18vh) / 2);
  position: fixed;
}
#left-frame #left-content #app-preview-wrapper #app-preview {
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  text-align: center;
}
#left-frame #left-content #app-preview-wrapper #app-preview .bottom, #left-frame #left-content #app-preview-wrapper #app-preview .top {
  display: block;
  margin: 0 auto;
  width: 20vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper {
  font-size: 0;
  text-align: center;
  width: 35vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: #151515;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview.fade:before {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview.white-ring #app-preview-overlay:before {
  background-color: #151515;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.1;
  position: absolute;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper {
  width: 100%;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper #app_name {
  background: 0 0;
  border: 0;
  bottom: calc(50% + 10vw);
  color: inherit;
  display: none;
  font-size: 1.5vw;
  font-weight: 700;
  left: 0;
  line-height: 3vw;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 20vw;
  z-index: 99;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper #header-image {
  background-color: transparent;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  bottom: calc(50% + 8.5714285714vw);
  display: inline-block;
  height: 4vw;
  left: 5vw;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 10vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .middle {
  display: inline-block;
  height: 35.5555555556vw;
  position: relative;
  vertical-align: top;
  width: 19.3vw;
  z-index: 2;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .left {
  display: inline-block;
  height: 35.5555555556vw;
  vertical-align: top;
  width: 0.5381165919vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .right {
  display: inline-block;
  height: 35.5555555556vw;
  vertical-align: top;
  width: 0.4260089686vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #app-preview-overlay {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -100;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #app-preview-overlay:before {
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #croppie-preview {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_wrapper {
  width: 14.8885714286vw;
  height: 14.8885714286vw;
  position: absolute;
  left: 2.2057142857vw;
  top: calc(50% - 7.4442857143vw);
  -webkit-transition: background-color 0.8s ease-in-out;
  transition: background-color 0.8s ease-in-out;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_wrapper div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_background {
  width: 14.8885714286vw;
  height: 14.8885714286vw;
  -webkit-transition: background-color 0.8s ease-in-out;
  transition: background-color 0.8s ease-in-out;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_outer {
  border-radius: 50%;
  width: 14.8885714286vw;
  height: 14.8885714286vw;
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 0.0653333333vw solid #f1f1f1;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_inner {
  border-radius: 50%;
  width: 9.9257142857vw;
  height: 9.9257142857vw;
  background: 0 0;
  border: 1.59804vw solid transparent;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_core {
  border-radius: 50%;
  width: 7.9405714286vw;
  height: 7.9405714286vw;
  background: 0 0;
  border: 0.5690742857vw solid #f1f1f1;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait {
  border-radius: 50%;
  width: 6.8685942857vw;
  height: 6.8685942857vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0.1488857143vw solid transparent;
  position: absolute;
  left: 3.6vw;
  top: 3.5vw;
  z-index: 99;
  margin: 0.4962857143vw;
  opacity: 1;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait #middle_text_wrapper {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait #middle_text {
  color: #f1f1f1;
  display: table-cell;
  font-size: 200%;
  text-align: center;
  word-break: break-word;
  vertical-align: middle;
  font-style: italic;
  font-family: SourceSansPro;
  font-weight: 700;
  pointer-events: none;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait #middle_text .inkfree {
  font-weight: 400;
  font-family: Inkfree;
  font-style: normal;
  font-weight: 700;
  pointer-events: none;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper {
  border-radius: 50%;
  height: 14.8885714286vw;
  width: 14.8885714286vw;
  position: relative;
  top: -14.8885714286vw;
  left: 0;
  z-index: 999;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper .answer_text {
  width: 3vw;
  margin: 0;
  line-height: 0.5vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .persona {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 1.8vw;
  width: 1.8vw;
  position: absolute;
  background-position: center;
  border: 0;
  border-radius: 50%;
  text-decoration: none;
  display: table;
  background-color: #ed2027;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
#left-frame #left-content #app-preview-wrapper .persona .icon-with-word img {
  max-height: 1.6675vw;
  max-width: 2.3345vw;
}
#left-frame #left-content #app-preview-wrapper .persona .icon-with-word div {
  font-size: 0.4vw;
  margin-top: 0;
  line-height: 1vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona0 {
  top: 0.5vw;
  left: 5.9554285714vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona1 {
  top: 2.2vw;
  left: 2.2vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona2 {
  top: 6.3vw;
  left: 0.75vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona3 {
  top: 9.8vw;
  left: 2.2vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona4 {
  top: 11.4108571429vw;
  left: 5.9554285714vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona5 {
  top: 9.8vw;
  left: 9.8vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona6 {
  top: 6.3vw;
  left: 11.3108571429vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona7 {
  top: 2.2vw;
  left: 9.9vw;
}
#left-frame #left-content #app-preview-wrapper #app-preview .control_footer-app {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-wrap: wrap;
  bottom: 0.5vw;
  left: 0;
  width: 100%;
}
#left-frame #left-content #app-preview-wrapper #app-preview .control_footer-app .icon-with-word {
  margin-inline: 0.75vw;
  pointer-events: none;
}
#left-frame #left-content #app-preview-wrapper #app-preview .control_footer-app .icon-with-word img {
  height: auto;
  height: 1.3vw;
  pointer-events: none;
  object-fit: contain;
}
#left-frame #left-content #app-preview-wrapper #app-preview .control_footer-app .icon-with-word div {
  font-size: 0.5vw;
}
#left-frame .control_footer-2023 {
  bottom: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 35vw;
  left: 0;
}
#left-frame .control_footer-2023 #action-footer-wrapper {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  height: 25vh;
  width: 100%;
}
#left-frame .control_footer-2023 #action-footer-wrapper #action-footer {
  box-sizing: border-box;
  display: flex;
  width: 35vw;
  align-items: center;
  justify-content: center;
  padding: 0 0 1vh 0;
  padding-bottom: calc(1vh + env(safe-area-inset-bottom));
  position: absolute;
  left: 0;
  bottom: 0;
}
#left-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count, #left-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: white;
  border: 1px solid white;
  width: 2vh !important;
  height: 2vh !important;
  position: absolute;
  border-radius: 50%;
  right: -0.25vh;
  top: -0.5vh;
  text-align: center;
  font-size: 1vh;
  font-weight: 700;
  line-height: 2vh;
  background: #424649;
  margin: 0;
}
#left-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count span.tiny, #left-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count span.tiny {
  font-size: 0.75vh;
}
#left-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button {
  margin: 0 0.75vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#left-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button img {
  height: 3vh;
  max-width: none;
}
#left-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button div {
  height: 1.5vh;
  white-space: nowrap;
}

#mobile-frame, #mobile-wheel-frame {
  display: none;
}
@media screen and (orientation: landscape) {
  #mobile-frame, #mobile-wheel-frame {
    display: none;
  }
  #mobile-frame .footer-buttons, #mobile-frame #omni-data, #mobile-wheel-frame .footer-buttons, #mobile-wheel-frame #omni-data {
    display: none !important;
  }
}
@media (orientation: portrait) {
  #mobile-frame, #mobile-wheel-frame {
    display: block;
  }
}
#mobile-frame .fullscreen-active, #mobile-wheel-frame .fullscreen-active {
  display: block !important;
}
#mobile-frame #left-content .badge, #mobile-wheel-frame #left-content .badge {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1vw;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5vw;
  height: 1.5vw;
  background-color: #ed2027;
  color: #fff;
  border-radius: 50%;
}
#mobile-frame #left-content, #mobile-wheel-frame #left-content {
  height: 100%;
  position: relative;
  z-index: 2;
}
#mobile-frame #left-content .control_footer, #mobile-wheel-frame #left-content .control_footer {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  bottom: 5.5vh;
  left: 50%;
  transform: translateX(-50%);
}
#mobile-frame #left-content .control-footer_top, #mobile-wheel-frame #left-content .control-footer_top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vh;
}
#mobile-frame #left-content .control_footer img, #mobile-wheel-frame #left-content .control_footer img {
  border: none;
}
#mobile-frame #left-content #app_name_wrapper #app_name.pink, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.pink {
  color: #f240a1;
}
#mobile-frame #left-content #app_name_wrapper #app_name.hot-pink, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.hot-pink {
  color: #906;
}
#mobile-frame #left-content #app_name_wrapper #app_name.red, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.red {
  color: #e4001e;
}
#mobile-frame #left-content #app_name_wrapper #app_name.orange, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.orange {
  color: #bc4012;
}
#mobile-frame #left-content #app_name_wrapper #app_name.red-orange, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.red-orange {
  color: #c30;
}
#mobile-frame #left-content #app_name_wrapper #app_name.purple, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.purple {
  color: #7000a4;
}
#mobile-frame #left-content #app_name_wrapper #app_name.green, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.green {
  color: #269a5e;
}
#mobile-frame #left-content #app_name_wrapper #app_name.cyan, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.cyan {
  color: #269ca3;
}
#mobile-frame #left-content #app_name_wrapper #app_name.blue, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.blue {
  color: #0c2a8c;
}
#mobile-frame #left-content #app_name_wrapper #app_name.grey, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.grey {
  color: #303030;
}
#mobile-frame #left-content #app_name_wrapper #app_name.dark, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.dark {
  color: #151515;
}
#mobile-frame #left-content #app_name_wrapper #app_name.white, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.white {
  color: #f1f1f1;
}
#mobile-frame #left-content #app_name_wrapper #app_name.charcoal, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.charcoal {
  color: #2f2f2f;
}
#mobile-frame #left-content #app_name_wrapper #app_name.kombu-green, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.kombu-green {
  color: #364133;
}
#mobile-frame #left-content #app_name_wrapper #app_name.orange-salmon, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.orange-salmon {
  color: #ce482d;
}
#mobile-frame #left-content #app_name_wrapper #app_name.persian-blue, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.persian-blue {
  color: #2833b1;
}
#mobile-frame #left-content #app_name_wrapper #app_name.white-chocolate, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.white-chocolate {
  color: #ece4d1;
}
#mobile-frame #left-content #app_name_wrapper #app_name.blank-white, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.blank-white {
  color: #ffffff;
}
#mobile-frame #left-content #app_name_wrapper #app_name.dark-blue, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.dark-blue {
  color: #01425e;
}
#mobile-frame #left-content #app_name_wrapper #app_name.sonic-silver, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.sonic-silver {
  color: #7a7a7a;
}
#mobile-frame #left-content #app_name_wrapper #app_name.lilac, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.lilac {
  color: #c8a2b9;
}
#mobile-frame #left-content #app_name_wrapper #app_name.blue-jeans, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.blue-jeans {
  color: #5db6de;
}
#mobile-frame #left-content #app_name_wrapper #app_name.bluish-grey, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.bluish-grey {
  color: #495f6c;
}
#mobile-frame #left-content #app_name_wrapper #app_name.raisin, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.raisin {
  color: #2a1621;
}
#mobile-frame #left-content #app_name_wrapper #app_name.black, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.black {
  color: #000000;
}
#mobile-frame #left-content #app_name_wrapper #app_name.custom, #mobile-wheel-frame #left-content #app_name_wrapper #app_name.custom {
  color: var(--custom-btn-color);
}
#mobile-frame #left-content #app_name_wrapper #logo-default, #mobile-wheel-frame #left-content #app_name_wrapper #logo-default {
  background-image: url(https://static.slcket.com/web/2020/editor/default-logo.png);
  background-color: transparent;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  bottom: calc(50% + 15vw);
  display: inline-block;
  height: 7vw;
  left: 8.75vw;
  margin: 0;
  padding: 0;
  position: fixed;
  width: 17.5vw;
}
#mobile-frame #left-content #app-preview-wrapper, #mobile-wheel-frame #left-content #app-preview-wrapper {
  display: none;
  height: 100%;
  position: fixed;
  width: 35vw;
  z-index: 2;
}
#mobile-frame #left-content #app-preview-wrapper .cr-viewport, #mobile-wheel-frame #left-content #app-preview-wrapper .cr-viewport {
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
#mobile-frame #left-content #app-preview-wrapper .blue-button, #mobile-wheel-frame #left-content #app-preview-wrapper .blue-button {
  bottom: 1.75vh;
  left: calc((35vw - 18vh) / 2);
  position: fixed;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview {
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  text-align: center;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview .bottom, #mobile-frame #left-content #app-preview-wrapper #app-preview .top, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview .bottom, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview .top {
  display: block;
  margin: 0 auto;
  width: 20vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper {
  font-size: 0;
  text-align: center;
  width: 35vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview {
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 0 0;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview:before, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: #151515;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview.fade:before, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview.fade:before {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview.white-ring #app-preview-overlay:before, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview.white-ring #app-preview-overlay:before {
  background-color: #151515;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.1;
  position: absolute;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app {
  width: 100%;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app {
  background: 0 0;
  border: 0;
  bottom: calc(50% + 8vw);
  color: inherit;
  display: none;
  font-size: 2.2857142857vh;
  font-weight: 700;
  left: 0;
  line-height: 3vw;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 20vw;
  z-index: 99;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.pink, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.pink {
  color: #f240a1;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.hot-pink, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.hot-pink {
  color: #906;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.red, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.red {
  color: #e4001e;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.orange, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.orange {
  color: #bc4012;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.red-orange, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.red-orange {
  color: #c30;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.purple, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.purple {
  color: #7000a4;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.green, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.green {
  color: #269a5e;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.cyan, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.cyan {
  color: #269ca3;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.blue, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.blue {
  color: #0c2a8c;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.grey, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.grey {
  color: #303030;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.dark, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.dark {
  color: #151515;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app#left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.white, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app#left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.white {
  color: #f1f1f1;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.charcoal, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.charcoal {
  color: #2f2f2f;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.kombu-green, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.kombu-green {
  color: #364133;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.orange-salmon, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.orange-salmon {
  color: #ce482d;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.persian-blue, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.persian-blue {
  color: #2833b1;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.white-chocolate, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.white-chocolate {
  color: #ece4d1;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.blank-white, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.blank-white {
  color: #ffffff;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.dark-blue, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.dark-blue {
  color: #01425e;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.sonic-silver, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.sonic-silver {
  color: #7a7a7a;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.lilac, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.lilac {
  color: #c8a2b9;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.blue-jeans, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.blue-jeans {
  color: #5db6de;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.bluish-grey, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.bluish-grey {
  color: #495f6c;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.raisin, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.raisin {
  color: #2a1621;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.black, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.black {
  color: #000000;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.custom, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app.custom {
  color: var(--custom-btn-color);
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #logo-default-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #logo-default-app {
  background-image: url(https://static.slcket.com/web/2020/editor/default-logo.png);
  background-color: transparent;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  bottom: calc(50% + 8.5714285714vw);
  display: inline-block;
  height: 4vw;
  left: 5vw;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 10vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .middle, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .middle {
  display: inline-block;
  height: 35.5555555556vw;
  position: relative;
  vertical-align: top;
  width: 19.3vw;
  z-index: 2;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .left, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .left {
  display: inline-block;
  height: 35.5555555556vw;
  vertical-align: top;
  width: 0.5381165919vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .right, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .right {
  display: inline-block;
  height: 35.5555555556vw;
  vertical-align: top;
  width: 0.4260089686vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #app-preview-overlay, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #app-preview-overlay {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -100;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #app-preview-overlay:before, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #app-preview-overlay:before {
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #croppie-preview, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #croppie-preview {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_wrapper-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_wrapper-app {
  width: 14.8885714286vw;
  height: 14.8885714286vw;
  position: relative;
  left: 2.2057142857vw;
  top: calc(50% - 7.4442857143vw);
  -webkit-transition: background-color 0.8s ease-in-out;
  transition: background-color 0.8s ease-in-out;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_wrapper-app div, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_wrapper-app div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_background-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_background-app {
  width: 14.8885714286vw;
  height: 14.8885714286vw;
  -webkit-transition: background-color 0.8s ease-in-out;
  transition: background-color 0.8s ease-in-out;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_outer-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_outer-app {
  border-radius: 50%;
  width: 12.4071428571vw;
  height: 12.4071428571vw;
  margin: 1.2407142857vw;
  background: 0 0;
  border: 0.6352457143vw solid #f1f1f1;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_inner-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_inner-app {
  border-radius: 50%;
  width: 9.9257142857vw;
  height: 9.9257142857vw;
  background: 0 0;
  border: 1.59804vw solid transparent;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_core-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_core-app {
  border-radius: 50%;
  width: 7.9405714286vw;
  height: 7.9405714286vw;
  background: 0 0;
  border: 0.5690742857vw solid #f1f1f1;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait-app {
  border-radius: 50%;
  width: 6.8685942857vw;
  height: 6.8685942857vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0.1488857143vw solid transparent;
  position: absolute;
  left: 3.5137028571vw;
  top: 2.25vw;
  z-index: 99;
  margin: 0.4962857143vw;
  opacity: 1;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait-app #middle_text_wrapper-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait-app #middle_text_wrapper-app {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait-app #middle_text-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait-app #middle_text-app {
  color: #f1f1f1;
  display: table-cell;
  font-size: 200%;
  text-align: center;
  word-break: break-word;
  vertical-align: middle;
  font-style: italic;
  font-family: SourceSansPro;
  font-weight: 700;
  pointer-events: none;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait-app #middle_text-app .inkfree, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait-app #middle_text-app .inkfree {
  font-weight: 400;
  font-family: Inkfree;
  font-style: normal;
  font-weight: 700;
  pointer-events: none;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper-app {
  border-radius: 50%;
  height: 14.8885714286vw;
  width: 14.8885714286vw;
  position: relative;
  top: -16.1292857143vw;
  left: 0;
  z-index: 999;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .persona-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .persona-app {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 2.9777142857vw;
  width: 2.9777142857vw;
  position: absolute;
  background-position: center;
  border: 0;
  border-radius: 50%;
  text-decoration: none;
  display: table;
  background-color: #ed2027;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona0-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona0-app {
  top: 0;
  left: 5.9554285714vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona1-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona1-app {
  top: 1.737vw;
  left: 1.737vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona2-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona2-app {
  top: 5.9554285714vw;
  left: 0;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona3-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona3-app {
  top: 10.1738571429vw;
  left: 1.737vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona4-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona4-app {
  top: 11.9108571429vw;
  left: 5.9554285714vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona5-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona5-app {
  top: 10.1738571429vw;
  left: 10.1738571429vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona6-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona6-app {
  top: 5.9554285714vw;
  left: 11.9108571429vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona7-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona7-app {
  top: 1.737vw;
  left: 10.1738571429vw;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview .control_footer-app, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview .control_footer-app {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-wrap: wrap;
  bottom: 6.5vh;
  left: 0;
  width: 100%;
}
#mobile-frame #left-content #app-preview-wrapper #app-preview .control_footer-app div, #mobile-wheel-frame #left-content #app-preview-wrapper #app-preview .control_footer-app div {
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 0.45vw;
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  #mobile-frame, #mobile-wheel-frame {
    width: 100vw;
    height: 100%;
    position: fixed;
  }
  #mobile-frame #web-preview-wrapper, #mobile-wheel-frame #web-preview-wrapper {
    width: 100%;
  }
  #mobile-frame #action-footer-wrapper, #mobile-wheel-frame #action-footer-wrapper {
    width: 100vw;
  }
  #mobile-frame #action-footer-wrapper #action-footer, #mobile-wheel-frame #action-footer-wrapper #action-footer {
    justify-content: center !important;
  }
  #mobile-frame #action-footer-wrapper .icon-with-word, #mobile-wheel-frame #action-footer-wrapper .icon-with-word {
    width: auto !important;
    margin-inline: 3.5vw;
  }
  #mobile-frame #action-footer-wrapper div, #mobile-wheel-frame #action-footer-wrapper div {
    width: auto !important;
  }
  #mobile-frame #left-content, #mobile-wheel-frame #left-content {
    width: 100%;
  }
  #mobile-frame #mobile-content, #mobile-wheel-frame #mobile-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 15vh;
  }
  #mobile-frame #mobile-content #app_name_wrapper #logo-default, #mobile-wheel-frame #mobile-content #app_name_wrapper #logo-default {
    background-image: url("https://static.slcket.com/web/2020/editor/default-logo.png");
    background-color: transparent;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    bottom: calc(50% + 15vw);
    height: 17.5vw;
    margin-top: 20vh;
    margin-inline: auto;
    padding: 0;
    width: 43.75vw;
  }
  #mobile-frame #wheel_wrapper, #mobile-wheel-frame #wheel_wrapper {
    width: 48.5vw;
    height: 48.5vw;
    position: absolute;
    left: 25.75vw;
    top: 50%;
    transform: translateY(-50%);
  }
  #mobile-frame #wheel_wrapper div, #mobile-wheel-frame #wheel_wrapper div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #mobile-frame #wheel_background, #mobile-frame #plus_wheel_background, #mobile-wheel-frame #wheel_background, #mobile-wheel-frame #plus_wheel_background {
    height: 48.5vw;
    width: 48.5vw;
  }
  #mobile-frame #wheel_outer, #mobile-wheel-frame #wheel_outer {
    border-radius: 50%;
    width: 48.5vw;
    height: 48.5vw;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #f1f1f1;
  }
  #mobile-frame #user_portrait, #mobile-wheel-frame #user_portrait {
    border-radius: 50%;
    width: 21.125vw;
    height: 21.125vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    position: absolute;
    left: 13.6875vw;
    top: 13.6875vw;
    z-index: 99;
  }
  #mobile-frame #user_portrait #middle_text_wrapper, #mobile-wheel-frame #user_portrait #middle_text_wrapper {
    display: table;
    height: 100%;
    position: absolute;
    width: 100%;
  }
  #mobile-frame #user_portrait #middle_text, #mobile-wheel-frame #user_portrait #middle_text {
    color: #f1f1f1;
    display: table-cell;
    font-size: 200%;
    text-align: center;
    word-break: break-word;
    vertical-align: middle;
    font-style: italic;
    font-family: SourceSansPro;
    font-weight: 700;
    pointer-events: none;
  }
  #mobile-frame #personas_wrapper, #mobile-wheel-frame #personas_wrapper {
    height: 48.5vw;
    width: 48.5vw;
    position: relative;
    top: -48.5vw;
    left: 0;
    z-index: 999;
  }
  #mobile-frame #personas_wrapper .persona, #mobile-wheel-frame #personas_wrapper .persona {
    cursor: pointer;
    box-sizing: border-box;
    height: 9vw;
    width: 9vw;
    position: absolute;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: 0 0 !important;
  }
  #mobile-frame #personas_wrapper .persona .icon-with-word, #mobile-wheel-frame #personas_wrapper .persona .icon-with-word {
    width: 9vw;
    pointer-events: none;
  }
  #mobile-frame #personas_wrapper .persona .icon-with-word img, #mobile-wheel-frame #personas_wrapper .persona .icon-with-word img {
    height: auto;
    max-height: 5vw;
    max-width: 7vw;
    pointer-events: none;
  }
  #mobile-frame #personas_wrapper .persona .icon-with-word .persona-icon-wrapper, #mobile-wheel-frame #personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
    width: 6.5vw;
    height: fit-content;
    position: relative;
    pointer-events: none;
    margin-top: 0;
  }
  #mobile-frame #personas_wrapper .persona.dragging, #mobile-wheel-frame #personas_wrapper .persona.dragging {
    cursor: grabbing;
  }
  #mobile-frame #personas_wrapper .now, #mobile-wheel-frame #personas_wrapper .now {
    color: #4497f7;
    border: 1px solid #4497f7;
  }
  #mobile-frame #personas_wrapper .urgent, #mobile-wheel-frame #personas_wrapper .urgent {
    color: #4497f7;
    border: 1px solid #4497f7;
  }
  #mobile-frame #personas_wrapper .recent, #mobile-wheel-frame #personas_wrapper .recent {
    color: #4497f7;
    border: 1px solid #4497f7;
  }
  #mobile-frame #personas_wrapper .normal, #mobile-wheel-frame #personas_wrapper .normal {
    color: #4497f7;
    border: 1px solid #4497f7;
  }
  #mobile-frame #personas_wrapper .past, #mobile-wheel-frame #personas_wrapper .past {
    color: #4497f7;
    border: 1px solid #4497f7;
  }
  #mobile-frame #personas_wrapper .distant, #mobile-wheel-frame #personas_wrapper .distant {
    color: #4497f7;
    border: 1px solid #4497f7;
  }
  #mobile-frame #personas_wrapper .archaic, #mobile-wheel-frame #personas_wrapper .archaic {
    color: #4497f7;
    border: 1px solid #4497f7;
  }
  #mobile-frame #personas_wrapper .updates, #mobile-wheel-frame #personas_wrapper .updates {
    width: 0.5553333333vw;
    height: 0.5553333333vw;
    position: absolute;
    border-radius: 50%;
    right: -0.196vw;
    top: -0.196vw;
    text-align: center;
    font-size: 0.392vw;
    line-height: 0.49vw;
    background: #424649;
    margin: 0;
  }
  #mobile-frame #personas_wrapper .updates.hide, #mobile-wheel-frame #personas_wrapper .updates.hide {
    display: none;
  }
  #mobile-frame #personas_wrapper .updates span, #mobile-wheel-frame #personas_wrapper .updates span {
    display: inline-block;
    vertical-align: top;
  }
  #mobile-frame #personas_wrapper .updates span.tiny, #mobile-wheel-frame #personas_wrapper .updates span.tiny {
    font-size: 0.261464vw;
  }
  #mobile-frame #personas_wrapper .answer_text, #mobile-wheel-frame #personas_wrapper .answer_text {
    font-family: SourceSansPro;
    font-weight: 600;
    color: #fff;
    text-align: center;
    pointer-events: none;
    word-break: break-word;
    margin-left: -1vw;
    width: 11vw;
    font-size: 1.75vw;
    line-height: 1.875vw;
  }
  #mobile-frame #personas_wrapper .answer_text.uppercase, #mobile-wheel-frame #personas_wrapper .answer_text.uppercase {
    text-transform: uppercase;
  }
  #mobile-frame #personas_wrapper .answer_text .SourceSansPro, #mobile-wheel-frame #personas_wrapper .answer_text .SourceSansPro {
    font-family: SourceSansPro;
  }
  #mobile-frame #personas_wrapper .answer_text .no-transform, #mobile-wheel-frame #personas_wrapper .answer_text .no-transform {
    text-transform: none;
  }
  #mobile-frame #persona0, #mobile-wheel-frame #persona0 {
    top: 2.34375vw;
    left: 19.75vw;
  }
  #mobile-frame #persona1, #mobile-wheel-frame #persona1 {
    top: 7.44185vw;
    left: 7.44185vw;
  }
  #mobile-frame #persona2, #mobile-wheel-frame #persona2 {
    top: 19.75vw;
    left: 2.34375vw;
  }
  #mobile-frame #persona3, #mobile-wheel-frame #persona3 {
    top: 32.093vw;
    left: 7.44185vw;
  }
  #mobile-frame #persona4, #mobile-wheel-frame #persona4 {
    top: 37.15625vw;
    left: 19.75vw;
  }
  #mobile-frame #persona5, #mobile-wheel-frame #persona5 {
    top: 32.093vw;
    left: 32.093vw;
  }
  #mobile-frame #persona6, #mobile-wheel-frame #persona6 {
    top: 19.75vw;
    left: 37.15625vw;
  }
  #mobile-frame #persona7, #mobile-wheel-frame #persona7 {
    top: 7.44185vw;
    left: 32.093vw;
  }
  #mobile-frame .control_footer, #mobile-wheel-frame .control_footer {
    position: static;
    margin-top: 7.5vh;
    min-width: 80vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  #mobile-frame .control_footer div, #mobile-wheel-frame .control_footer div {
    width: 10vw;
    height: 10vw;
    border-width: 0.55vw;
    font-size: 2vw;
    font-family: "sourceSansPro-bold";
  }
  #mobile-frame .core-page-btn__bottom, #mobile-wheel-frame .core-page-btn__bottom {
    width: 20%;
    position: static;
    margin-inline: auto;
    border-width: 0.55vw;
    padding: 3.1vw 10vw;
    font-size: 2vw;
    color: white;
    border-color: white;
    font-family: "sourceSansPro-bold";
    margin-left: 50vw;
    transition: color 0.3s, border-color 0.3s;
  }
  #mobile-frame .core-page-btn__bottom:hover, #mobile-wheel-frame .core-page-btn__bottom:hover {
    color: #e9222d;
    border-color: #e9222d;
  }
  #mobile-frame .control_footer-2023, #mobile-wheel-frame .control_footer-2023 {
    bottom: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100vw;
    left: 0;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.133), rgba(0, 0, 0, 0.266), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    padding-top: 15%;
  }
  .color-background #mobile-frame .control_footer-2023 #action-footer-wrapper, .color-background #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper {
    background: none;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer {
    box-sizing: border-box;
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: center;
    padding: 2vw 4vw 3vw 4vw;
    padding-bottom: calc(3vw + env(safe-area-inset-bottom));
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count, #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: white;
    border: 1px solid white;
    width: 2vh !important;
    height: 2vh !important;
    position: absolute;
    border-radius: 50%;
    right: -0.25vh;
    top: -0.5vh;
    text-align: center;
    font-size: 1vh;
    font-weight: 700;
    line-height: 2vh;
    background: #424649;
    margin: 0;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count span.tiny, #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count span.tiny, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count span.tiny, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count span.tiny {
    font-size: 0.75vh;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button {
    margin: 0 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button img, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button img {
    height: 5vw;
    max-width: none;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button div, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button div {
    font-size: 1.75vw;
    line-height: 1.85vw;
    white-space: nowrap;
  }
  #mobile-frame #mobile-wheel-wrapper, #mobile-wheel-frame #mobile-wheel-wrapper {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7));
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100vw 45%;
    height: 100%;
    width: 100vw;
  }
  #mobile-frame #app_name_wrapper, #mobile-wheel-frame #app_name_wrapper {
    width: 100%;
  }
  #mobile-frame #app_name_wrapper.main, #mobile-wheel-frame #app_name_wrapper.main {
    align-items: center;
    display: flex;
    height: calc((100% - 48.5vw) / 2);
    justify-content: center;
    flex-flow: column;
  }
  #mobile-frame #app_name_wrapper.main #header-image, #mobile-wheel-frame #app_name_wrapper.main #header-image {
    object-fit: contain;
    height: 22vh;
    height: 22dvh;
    width: 45vw;
  }
  #mobile-frame #app_name_wrapper #app_name, #mobile-wheel-frame #app_name_wrapper #app_name {
    background: 0 0;
    border: 0;
    bottom: calc(50% + 13vw);
    color: inherit;
    display: none;
    font-size: 3vw;
    font-weight: 700;
    line-height: 7vw;
    margin: 0;
    padding: 0;
    position: fixed;
    text-align: center;
    width: 35vw;
    z-index: 2;
  }
  #mobile-frame #welcome_name_text, #mobile-wheel-frame #welcome_name_text {
    color: white;
    font-size: 2.5vh;
    line-height: 2.75vh;
    text-align: center;
  }
  .color-background #mobile-frame #welcome_name_text, .color-background #mobile-wheel-frame #welcome_name_text {
    color: rgba(0, 0, 0, 0.5);
  }
}
#mobile-frame, #mobile-wheel-frame {
  /******** mobile version of left frame ********/
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #mobile-frame, #mobile-wheel-frame {
    width: 100vw;
    height: 100%;
    position: fixed;
  }
  #mobile-frame #web-preview-wrapper, #mobile-wheel-frame #web-preview-wrapper {
    width: 100%;
  }
  #mobile-frame #action-footer-wrapper, #mobile-wheel-frame #action-footer-wrapper {
    width: 100vw;
  }
  #mobile-frame #action-footer-wrapper #action-footer, #mobile-wheel-frame #action-footer-wrapper #action-footer {
    justify-content: center !important;
  }
  #mobile-frame #action-footer-wrapper .icon-with-word, #mobile-wheel-frame #action-footer-wrapper .icon-with-word {
    width: auto !important;
    margin-inline: 3.5vw;
  }
  #mobile-frame #action-footer-wrapper div, #mobile-wheel-frame #action-footer-wrapper div {
    width: auto !important;
  }
  #mobile-frame #left-content, #mobile-wheel-frame #left-content {
    width: 100%;
  }
  #mobile-frame #mobile-content, #mobile-wheel-frame #mobile-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 15vh;
  }
  #mobile-frame #mobile-content #app_name_wrapper #logo-default, #mobile-wheel-frame #mobile-content #app_name_wrapper #logo-default {
    background-image: url("https://static.slcket.com/web/2020/editor/default-logo.png");
    background-color: transparent;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    bottom: calc(50% + 15vw);
    height: 17.5vw;
    margin-top: 20vh;
    margin-inline: auto;
    padding: 0;
    width: 43.75vw;
  }
  #mobile-frame #wheel_wrapper, #mobile-wheel-frame #wheel_wrapper {
    top: 50%;
    transform: translateY(-50%);
    position: fixed;
    width: 87.3vw;
    height: 87.3vw;
    left: 6.35vw;
  }
  #mobile-frame #wheel_wrapper div, #mobile-wheel-frame #wheel_wrapper div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #mobile-frame #wheel_background, #mobile-frame #plus_wheel_background, #mobile-wheel-frame #wheel_background, #mobile-wheel-frame #plus_wheel_background {
    width: 87.3vw;
    height: 87.3vw;
  }
  #mobile-frame #wheel_outer, #mobile-wheel-frame #wheel_outer {
    border-radius: 50%;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #f1f1f1;
    width: 87.3vw;
    height: 87.3vw;
  }
  #mobile-frame #user_portrait, #mobile-wheel-frame #user_portrait {
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    position: absolute;
    z-index: 99;
    width: 38.025vw;
    height: 38.025vw;
    left: 24.6375vw;
    top: 24.6375vw;
  }
  #mobile-frame #user_portrait #middle_text_wrapper, #mobile-wheel-frame #user_portrait #middle_text_wrapper {
    display: table;
    height: 100%;
    position: absolute;
    width: 100%;
  }
  #mobile-frame #user_portrait #middle_text, #mobile-wheel-frame #user_portrait #middle_text {
    color: #f1f1f1;
    display: table-cell;
    font-size: 200%;
    text-align: center;
    word-break: break-word;
    vertical-align: middle;
    font-style: italic;
    font-family: SourceSansPro;
    font-weight: 700;
    pointer-events: none;
  }
  #mobile-frame #personas_wrapper, #mobile-wheel-frame #personas_wrapper {
    position: relative;
    left: 0;
    z-index: 999;
    width: 87.3vw;
    height: 87.3vw;
    top: -87.3vw;
  }
  #mobile-frame #personas_wrapper .persona, #mobile-wheel-frame #personas_wrapper .persona {
    cursor: pointer;
    box-sizing: border-box;
    position: absolute;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: 0 0 !important;
  }
  #mobile-frame #personas_wrapper .persona .icon-with-word, #mobile-wheel-frame #personas_wrapper .persona .icon-with-word {
    pointer-events: none;
  }
  #mobile-frame #personas_wrapper .persona .icon-with-word img, #mobile-wheel-frame #personas_wrapper .persona .icon-with-word img {
    height: auto;
    pointer-events: none;
  }
  #mobile-frame #personas_wrapper .persona .icon-with-word .persona-icon-wrapper, #mobile-wheel-frame #personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
    height: fit-content;
    position: relative;
    pointer-events: none;
    margin-top: 0;
  }
  #mobile-frame #personas_wrapper .persona.dragging, #mobile-wheel-frame #personas_wrapper .persona.dragging {
    cursor: grabbing;
  }
  #mobile-frame #personas_wrapper .persona, #mobile-wheel-frame #personas_wrapper .persona {
    height: 16.2vw;
    width: 16.2vw;
  }
  #mobile-frame #personas_wrapper .persona .icon-with-word, #mobile-wheel-frame #personas_wrapper .persona .icon-with-word {
    width: 16.2vw;
  }
  #mobile-frame #personas_wrapper .persona .icon-with-word img, #mobile-wheel-frame #personas_wrapper .persona .icon-with-word img {
    max-height: 9vw;
    max-width: 12.6vw;
  }
  #mobile-frame #personas_wrapper .persona .icon-with-word .persona-icon-wrapper, #mobile-wheel-frame #personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
    width: 11.7vw;
  }
  #mobile-frame #personas_wrapper .now, #mobile-wheel-frame #personas_wrapper .now {
    color: #4497f7;
    border: 0.1176vw solid #4497f7;
  }
  #mobile-frame #personas_wrapper .urgent, #mobile-wheel-frame #personas_wrapper .urgent {
    color: #4497f7;
    border: 0.1176vw solid #4497f7;
  }
  #mobile-frame #personas_wrapper .recent, #mobile-wheel-frame #personas_wrapper .recent {
    color: #4497f7;
    border: 0.1176vw solid #4497f7;
  }
  #mobile-frame #personas_wrapper .normal, #mobile-wheel-frame #personas_wrapper .normal {
    color: #4497f7;
    border: 0.1176vw solid #4497f7;
  }
  #mobile-frame #personas_wrapper .past, #mobile-wheel-frame #personas_wrapper .past {
    color: #4497f7;
    border: 0.1176vw solid #4497f7;
  }
  #mobile-frame #personas_wrapper .distant, #mobile-wheel-frame #personas_wrapper .distant {
    color: #4497f7;
    border: 0.1176vw solid #4497f7;
  }
  #mobile-frame #personas_wrapper .archaic, #mobile-wheel-frame #personas_wrapper .archaic {
    color: #4497f7;
    border: 0.1176vw solid #4497f7;
  }
  #mobile-frame #personas_wrapper .updates, #mobile-wheel-frame #personas_wrapper .updates {
    width: 4.25vw;
    height: 4.25vw;
    position: absolute;
    border-radius: 50%;
    right: -1.5vw;
    top: -1.5vw;
    text-align: center;
    font-size: 3vw;
    line-height: 3.75vw;
    background: #424649;
    margin: 0;
  }
  #mobile-frame #personas_wrapper .updates.hide, #mobile-wheel-frame #personas_wrapper .updates.hide {
    display: none;
  }
  #mobile-frame #personas_wrapper .updates span, #mobile-wheel-frame #personas_wrapper .updates span {
    display: inline-block;
    vertical-align: top;
  }
  #mobile-frame #personas_wrapper .updates span.tiny, #mobile-wheel-frame #personas_wrapper .updates span.tiny {
    font-size: 2vw;
  }
  #mobile-frame #personas_wrapper .answer_text, #mobile-wheel-frame #personas_wrapper .answer_text {
    font-family: SourceSansPro;
    font-weight: 600;
    color: #fff;
    text-align: center;
    pointer-events: none;
    word-break: break-word;
  }
  #mobile-frame #personas_wrapper .answer_text.uppercase, #mobile-wheel-frame #personas_wrapper .answer_text.uppercase {
    text-transform: uppercase;
  }
  #mobile-frame #personas_wrapper .answer_text .no-transform, #mobile-wheel-frame #personas_wrapper .answer_text .no-transform {
    text-transform: none;
  }
  #mobile-frame #personas_wrapper .answer_text, #mobile-wheel-frame #personas_wrapper .answer_text {
    margin-left: -1.8vw;
    width: 19.8vw;
    font-size: 3.15vw;
    line-height: 3.375vw;
  }
  #mobile-frame .control_footer, #mobile-wheel-frame .control_footer {
    position: static;
    margin-top: 7.5vh;
    min-width: 80vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  #mobile-frame .control_footer div, #mobile-wheel-frame .control_footer div {
    width: 10vw;
    height: 10vw;
    border-width: 0.55vw;
    font-size: 2vw;
    font-family: "sourceSansPro-bold";
  }
  #mobile-frame .core-page-btn__bottom, #mobile-wheel-frame .core-page-btn__bottom {
    width: 20%;
    position: static;
    margin-inline: auto;
    border-width: 0.55vw;
    padding: 3.1vw 10vw;
    font-size: 2vw;
    color: white;
    border-color: white;
    font-family: "sourceSansPro-bold";
    margin-left: 50vw;
    transition: color 0.3s, border-color 0.3s;
  }
  #mobile-frame .core-page-btn__bottom:hover, #mobile-wheel-frame .core-page-btn__bottom:hover {
    color: #e9222d;
    border-color: #e9222d;
  }
  #mobile-frame .control_footer-2023, #mobile-wheel-frame .control_footer-2023 {
    bottom: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100vw;
    left: 0;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.133), rgba(0, 0, 0, 0.266), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    padding-top: 15%;
  }
  .color-background #mobile-frame .control_footer-2023 #action-footer-wrapper, .color-background #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper {
    background: none;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer {
    box-sizing: border-box;
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: center;
    padding: 2vw 4vw 3vw 4vw;
    padding-bottom: calc(3vw + env(safe-area-inset-bottom));
  }
  .skinny-iphone #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer, .skinny-iphone #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer {
    padding: 2vw 4vw 5.5vw 4vw;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count, #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: white;
    border: 1px solid white;
    width: 2vh !important;
    height: 2vh !important;
    position: absolute;
    border-radius: 50%;
    right: -0.25vh;
    top: -0.5vh;
    text-align: center;
    font-size: 1vh;
    font-weight: 700;
    line-height: 2vh;
    background: #424649;
    margin: 0;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count span.tiny, #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count span.tiny, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .notes-count span.tiny, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .message-count span.tiny {
    font-size: 0.75vh;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button img, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button img {
    max-width: none;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button div, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button div {
    white-space: nowrap;
  }
  #mobile-frame #persona0, #mobile-wheel-frame #persona0 {
    top: 4.21875vw;
    left: 35.55vw;
  }
  #mobile-frame #persona1, #mobile-wheel-frame #persona1 {
    top: 13.39533vw;
    left: 13.39533vw;
  }
  #mobile-frame #persona2, #mobile-wheel-frame #persona2 {
    top: 35.55vw;
    left: 4.21875vw;
  }
  #mobile-frame #persona3, #mobile-wheel-frame #persona3 {
    top: 57.7674vw;
    left: 13.39533vw;
  }
  #mobile-frame #persona4, #mobile-wheel-frame #persona4 {
    top: 66.88125vw;
    left: 35.55vw;
  }
  #mobile-frame #persona5, #mobile-wheel-frame #persona5 {
    top: 57.7674vw;
    left: 57.7674vw;
  }
  #mobile-frame #persona6, #mobile-wheel-frame #persona6 {
    top: 35.55vw;
    left: 66.88125vw;
  }
  #mobile-frame #persona7, #mobile-wheel-frame #persona7 {
    top: 13.39533vw;
    left: 57.7674vw;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.133), rgba(0, 0, 0, 0.266), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    padding-top: 15%;
  }
  .color-background #mobile-frame .control_footer-2023 #action-footer-wrapper, .color-background #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper {
    background: none;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button {
    margin: 0 1.575vw;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button img, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button img {
    height: 9vw;
  }
  #mobile-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button div, #mobile-wheel-frame .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button div {
    font-size: 3.15vw;
    line-height: 3.375vw;
  }
  #mobile-frame #mobile-wheel-wrapper, #mobile-wheel-frame #mobile-wheel-wrapper {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7));
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100vw 45%;
    height: 100%;
    width: 100vw;
  }
  #mobile-frame #app_name_wrapper, #mobile-wheel-frame #app_name_wrapper {
    width: 100%;
  }
  #mobile-frame #app_name_wrapper.main, #mobile-wheel-frame #app_name_wrapper.main {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-flow: column;
    height: calc((100% - 87.3vw) / 2);
  }
  #mobile-frame #app_name_wrapper.main #header-image, #mobile-wheel-frame #app_name_wrapper.main #header-image {
    width: 80vw;
    height: 22vh;
    height: 22dvh;
    object-fit: contain;
  }
  #mobile-frame #app_name_wrapper #app_name, #mobile-wheel-frame #app_name_wrapper #app_name {
    background: 0 0;
    border: 0;
    bottom: calc(50% + 13vw);
    color: inherit;
    display: none;
    font-size: 3vw;
    font-weight: 700;
    line-height: 7vw;
    margin: 0;
    padding: 0;
    position: fixed;
    text-align: center;
    width: 35vw;
    z-index: 2;
  }
  #mobile-frame #welcome_name_text, #mobile-wheel-frame #welcome_name_text {
    color: white;
    text-align: center;
  }
  .color-background #mobile-frame #welcome_name_text, .color-background #mobile-wheel-frame #welcome_name_text {
    color: rgba(0, 0, 0, 0.5);
  }
  #mobile-frame #welcome_name_text, #mobile-wheel-frame #welcome_name_text {
    font-size: 2.5vh;
    line-height: 2.75vh;
    width: 100vw;
  }
}

.upcoming-meetings-menu {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.live-text {
  position: absolute;
  top: -1.5vw;
  left: 50%;
  transform: translateX(-50%);
  color: #23e823;
  font-size: 1.12vw;
}

.meetings-dash-item {
  position: relative;
  font-weight: 600;
  margin: 2.5vh 0;
}

.meetings-dash-item-header {
  font-size: 1.18vw;
}

#upcoming-meetings-root .meetings-dash-item-header, #minutes-live-root .meetings-dash-item-header, #minutes-ready-root .meetings-dash-item-header, #minutes-finish-root .meetings-dash-item-header, #committee-meetings-root .meetings-dash-item-header {
  display: flex;
  flex-direction: column;
}
#upcoming-meetings-root p, #minutes-live-root p, #minutes-ready-root p, #minutes-finish-root p, #committee-meetings-root p {
  font-size: 1.15vw;
}

.committee-meeting_upcoming {
  display: flex;
  flex-direction: column;
}

#add-meeting {
  position: absolute;
  bottom: 7vh;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 991px) {
  .meetings-dash-item-header {
    font-size: 1.4vw;
  }
}
@media screen and (max-width: 767px) {
  .meetings-dash-item-header {
    font-size: 2.5vw;
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
  .upcoming-meetings-menu {
    padding: 10vh 0;
  }
  .meetings-dash-item-header {
    font-size: 2.25vw;
  }
}
#all-buttons_wrapper {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  display: flex;
}

.all-button {
  background-image: url("../assets/_Buttons/message-bubble-white.png");
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-inline: 0.25vw;
  width: 3.1vw;
  height: 3.3vw;
  font-weight: 600;
  font-size: 1vw;
  line-height: 1;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.all-button span {
  margin-right: 0.4vw;
  margin-bottom: 0.3vw;
}

#board-members-root {
  width: 29vw;
}

.board-member-item {
  display: flex;
  justify-content: space-between;
}

.board-member-name {
  width: 20vw;
}

.board-member-job {
  width: 15vw;
  font-size: 1vw;
}

@media screen and (max-width: 991px) {
  .all-button {
    width: 4.1vw;
    height: 4.3vw;
  }
}
@media screen and (max-width: 767px) {
  .all-button {
    width: 10vw;
    height: 10vw;
    font-size: 2.6vw;
    bottom: 4vh;
  }
  .all-button span {
    margin-right: 0.8vw;
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
  .all-button {
    width: 7vw;
    height: 7vw;
    font-size: 2.2vw;
  }
}
#docs-content .file-link, #docs-content .file-edit-name {
  color: #4497f7;
}
#docs-content .file-link {
  margin-right: 2vw;
  max-width: 100%;
}
#docs-content .doc-input {
  width: 75%;
}
#docs-content .file-edit-name {
  text-decoration: underline;
}
#docs-content .file-edit-wrapper {
  color: grey;
  letter-spacing: 0.5px;
}
#docs-content .file-save-name {
  display: none;
  color: #4497f7;
  text-decoration: underline;
  width: 70%;
  cursor: pointer;
}
#docs-content .grey {
  display: block;
  font-weight: 600;
  margin-top: 3.25vh;
  font-size: 1vw;
}
#docs-content #doc-list-items {
  margin-top: 3.5vh;
  list-style-type: none;
  counter-reset: list;
  padding: 0;
}
#docs-content #doc-list-items li {
  position: relative;
  display: list-item;
  justify-content: center;
  align-items: center;
}
#docs-content #doc-list-items .doc-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.4vh 0 1.4vh 0;
  font-weight: 600;
}
#docs-content #doc-list-items .doc-item-wrapper .blue-input {
  max-width: 5vw;
  border-radius: 2vw;
  border: none;
  margin-right: 2vw;
  font-size: 0.8vw;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.remove-doc-item {
  color: #e9222d;
  font-size: 2vw;
  margin-right: 2vw;
  font-weight: 600;
  cursor: pointer;
}

#docs-top-header {
  color: #fff;
  font-size: 1vw;
  position: absolute;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
}

.save-docs {
  width: 4vw;
  height: 4vw;
  background-color: #e9222d;
  border-radius: 50%;
  position: absolute;
  bottom: 4.5vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}

/*
@media screen and (max-width: 767px) {
    #docs-top-header {
        top: 6vh;
        font-size: 3vw;
    }

    .save-docs {
        width: 11vw;
        height: 11vw;
        font-size: 3.5vw;
    }

    #docs-content {
        .grey {
            font-size: 2.5vw;
        }

        .file-link {
            font-size: 2.5vw;
        }

        .file-edit-name {
            font-size: 1vw;
        }

        #doc-list-items {
            padding-left: 4vw;
        }

        .file-edit-wrapper {
            font-size: 1.8vw;
        }
    }

    .remove-doc-item {
        font-size: 6vw;
    }

    #add-doc {
        margin-top: 3vh;
        font-size: 2.7vw;
    }
}

@media screen and (max-width: 767px) and (orientation: landscape) {

    #docs-content {

        .grey {
            font-size: 2vw;
        }

        .file-link {
            font-size: 2.1vw;
        }
    }

    .save-docs {
        width: 8vw;
        height: 8vw;
        font-size: 2.9vw;
    }

    #docs-top-header {
        top: 0;
        font-size: 2.4vw;
    }

    .remove-doc-item {
        font-size: 4vw;
    }

    .docs_page-white-container {
        height: auto;
        position: relative;
        padding: 5vh 0;
    }

    .full-view-docs {
        position: absolute;
        padding-bottom: 12.5vh;
    }

    .page-wrapper_docs {
        .red-btn {
            bottom: -7vh;
        }

        #dynamic-modal-close {
            bottom: -7vh;
        }
    }

    #add-doc {
        font-size: 2.3vw;
    }
}
*/
#manager-header_tabs {
  margin-top: 3vh;
  display: flex;
  justify-content: space-around;
}

.finish-minutes-save {
  position: absolute;
  bottom: 2.5vh;
  left: 41%;
  transform: translateX(-50%);
  font-size: 1.1vw;
}

.submit {
  position: absolute;
  bottom: 2.5vh;
  left: 60.5%;
  transform: translateX(-50%);
  font-size: 1.1vw;
}

.submit-for-approval {
  position: absolute;
  bottom: 2.5vh;
  left: 62%;
  transform: translateX(-50%);
  font-size: 1.1vw;
}

.page-white_container--manager {
  top: 19vh;
}

.dynamic-modal-close--manager {
  bottom: 1.5vh;
}

.home-icon--manager {
  bottom: 3.25vh !important;
}

.back_bottom-left--manager {
  bottom: 3.25vh !important;
}

.back-button--manager {
  bottom: 3.25vh !important;
}

#agenda-content_manager {
  display: block;
}

#docs-content_manager, #docs-minutes_manager {
  display: none;
}
#docs-content_manager .doc-input, #docs-minutes_manager .doc-input {
  width: 75%;
}

#vote-content_manager {
  display: none;
}

#minutes-content_manager {
  display: none;
}

.manager-list-items {
  padding-inline: 5vw;
  list-style: none;
  counter-reset: list;
}
.manager-list-items li {
  position: relative;
  display: list-item;
  justify-content: center;
  align-items: center;
}

#attendance-minutes_manager {
  display: block;
}

#attendance-list-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 17vw;
  margin-inline: auto;
}

.attendance-item-container {
  margin-top: 1vh;
  margin-bottom: 1vh;
  position: relative;
}

.attendance-name {
  font-size: 1vw;
}

#agenda-minutes_manager, #action-items-minutes_manager, #notes-minutes_manager,
#docs-minutes_manager, #vote-minutes_manager {
  display: none;
}

.remove-manager-item {
  color: #e9222d;
  font-size: 2vw;
  margin-right: 2vw;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: auto;
  line-height: 0.6;
}

.add-manager-item {
  font-size: 1.06vw;
  margin-top: 4vh;
  padding-bottom: 5vh;
}

.attendance-boxes {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

#mark-all-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

#agenda-list-items .list-item-input:focus {
  color: #4497f7 !important;
}

#agenda-list-items li::before, #agenda-past-content li::before, #vote-list-items li::before, #action-list-items li::before,
#notes-list-items li::before, #doc-list-items li::before, #note-list-items li::before {
  color: #000;
  counter-increment: list;
  content: counter(list) ".";
  position: absolute;
  left: 2.3vw;
  top: 0;
  font-weight: 600;
  z-index: 10;
}
#agenda-list-items .remove-list-counter::before, #agenda-past-content .remove-list-counter::before, #vote-list-items .remove-list-counter::before, #action-list-items .remove-list-counter::before,
#notes-list-items .remove-list-counter::before, #doc-list-items .remove-list-counter::before, #note-list-items .remove-list-counter::before {
  content: "" !important;
}
#agenda-list-items .minutes-agenda-list-item::before, #agenda-past-content .minutes-agenda-list-item::before, #vote-list-items .minutes-agenda-list-item::before, #action-list-items .minutes-agenda-list-item::before,
#notes-list-items .minutes-agenda-list-item::before, #doc-list-items .minutes-agenda-list-item::before, #note-list-items .minutes-agenda-list-item::before {
  color: #000;
  counter-increment: list;
  content: counter(list) ".";
  position: absolute;
  left: -1.7vw;
  top: 0%;
  font-size: 1vw;
  font-weight: 600;
  z-index: 10;
}

#vote-list-items .minutes-vote-item::before {
  color: #000;
  counter-increment: list;
  content: counter(list) ".";
  position: absolute;
  left: -1.7vw;
  top: 0%;
  font-size: 1vw;
  z-index: 900;
  font-weight: 600;
  z-index: 10;
}

.archived-list-item::before {
  color: #000;
  left: 0 !important;
}

#agenda-content_manager .file-link, #agenda-content_manager .file-edit-name, #docs-content_manager .file-link, #docs-content_manager .file-edit-name, #vote-content_manager .file-link, #vote-content_manager .file-edit-name, #minutes-content_manager .file-link, #minutes-content_manager .file-edit-name,
#attendance-minutes_manager .file-link,
#attendance-minutes_manager .file-edit-name, #agenda-minutes_manager .file-link, #agenda-minutes_manager .file-edit-name, #action-items-minutes_manager .file-link, #action-items-minutes_manager .file-edit-name, #notes-minutes_manager .file-link, #notes-minutes_manager .file-edit-name,
#docs-minutes_manager .file-link,
#docs-minutes_manager .file-edit-name, #vote-minutes_manager .file-link, #vote-minutes_manager .file-edit-name {
  font-size: 1vw;
  color: #4497f7;
}
#agenda-content_manager .file-link, #docs-content_manager .file-link, #vote-content_manager .file-link, #minutes-content_manager .file-link,
#attendance-minutes_manager .file-link, #agenda-minutes_manager .file-link, #action-items-minutes_manager .file-link, #notes-minutes_manager .file-link,
#docs-minutes_manager .file-link, #vote-minutes_manager .file-link {
  font-size: 1vw;
  margin-right: 2vw;
}
#agenda-content_manager .file-edit-name, #docs-content_manager .file-edit-name, #vote-content_manager .file-edit-name, #minutes-content_manager .file-edit-name,
#attendance-minutes_manager .file-edit-name, #agenda-minutes_manager .file-edit-name, #action-items-minutes_manager .file-edit-name, #notes-minutes_manager .file-edit-name,
#docs-minutes_manager .file-edit-name, #vote-minutes_manager .file-edit-name {
  font-size: 1vw;
  text-decoration: underline;
}
#agenda-content_manager .file-edit-wrapper, #docs-content_manager .file-edit-wrapper, #vote-content_manager .file-edit-wrapper, #minutes-content_manager .file-edit-wrapper,
#attendance-minutes_manager .file-edit-wrapper, #agenda-minutes_manager .file-edit-wrapper, #action-items-minutes_manager .file-edit-wrapper, #notes-minutes_manager .file-edit-wrapper,
#docs-minutes_manager .file-edit-wrapper, #vote-minutes_manager .file-edit-wrapper {
  color: grey;
  font-size: 1vw;
  letter-spacing: 0.5px;
}
#agenda-content_manager .file-save-name, #docs-content_manager .file-save-name, #vote-content_manager .file-save-name, #minutes-content_manager .file-save-name,
#attendance-minutes_manager .file-save-name, #agenda-minutes_manager .file-save-name, #action-items-minutes_manager .file-save-name, #notes-minutes_manager .file-save-name,
#docs-minutes_manager .file-save-name, #vote-minutes_manager .file-save-name {
  display: none;
  color: #4497f7;
  text-decoration: underline;
  width: 70%;
  font-size: 1vw;
  cursor: pointer;
}
#agenda-content_manager .grey, #docs-content_manager .grey, #vote-content_manager .grey, #minutes-content_manager .grey,
#attendance-minutes_manager .grey, #agenda-minutes_manager .grey, #action-items-minutes_manager .grey, #notes-minutes_manager .grey,
#docs-minutes_manager .grey, #vote-minutes_manager .grey {
  display: block;
  font-weight: 600;
  margin-top: 3.25vh;
  font-size: 1vw;
  padding: 0 10vw;
}
#agenda-content_manager #doc-list-items, #docs-content_manager #doc-list-items, #vote-content_manager #doc-list-items, #minutes-content_manager #doc-list-items,
#attendance-minutes_manager #doc-list-items, #agenda-minutes_manager #doc-list-items, #action-items-minutes_manager #doc-list-items, #notes-minutes_manager #doc-list-items,
#docs-minutes_manager #doc-list-items, #vote-minutes_manager #doc-list-items {
  margin-top: 3.5vh;
  list-style-type: none;
  padding: 0;
}
#agenda-content_manager .doc-item-wrapper, #docs-content_manager .doc-item-wrapper, #vote-content_manager .doc-item-wrapper, #minutes-content_manager .doc-item-wrapper,
#attendance-minutes_manager .doc-item-wrapper, #agenda-minutes_manager .doc-item-wrapper, #action-items-minutes_manager .doc-item-wrapper, #notes-minutes_manager .doc-item-wrapper,
#docs-minutes_manager .doc-item-wrapper, #vote-minutes_manager .doc-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.4vh 0 1.4vh 0;
  font-weight: 600;
}
#agenda-content_manager .doc-item-wrapper .blue-input, #docs-content_manager .doc-item-wrapper .blue-input, #vote-content_manager .doc-item-wrapper .blue-input, #minutes-content_manager .doc-item-wrapper .blue-input,
#attendance-minutes_manager .doc-item-wrapper .blue-input, #agenda-minutes_manager .doc-item-wrapper .blue-input, #action-items-minutes_manager .doc-item-wrapper .blue-input, #notes-minutes_manager .doc-item-wrapper .blue-input,
#docs-minutes_manager .doc-item-wrapper .blue-input, #vote-minutes_manager .doc-item-wrapper .blue-input {
  max-width: 5vw;
  border-radius: 2vw;
  border: none;
  margin-right: 2vw;
  font-size: 0.8vw;
  font-weight: 600;
  outline: none;
}

.item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.4vh 0 1.4vh 0;
  font-weight: 600;
  width: 100%;
}

#vote-list-items li {
  margin-top: 6.5vh;
  margin-inline: auto;
}

.manager-vote-items_margin li {
  margin-top: 0 !important;
}

.minutes-vote-item {
  flex-wrap: wrap;
  justify-content: center !important;
  margin-top: 4vh;
  max-width: 55%;
}

#vote-list-items li:first-child {
  margin-top: 0.5vh;
}

.minutes-text {
  font-weight: 600;
  font-size: 1vw;
}

.vote-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  border: 2px white solid;
  border-radius: 2vh;
  height: 2.5vh;
  font-size: 1.5vh;
  line-height: 2.25vh;
  width: 9vw;
  text-align: center;
  margin-right: 4vw;
  margin-top: 1.5vh;
  text-transform: uppercase;
  background-color: white;
  color: black;
}
.vote-button.red {
  color: #fff;
  border: 2px #e9222d solid;
  background-color: #e9222d;
}
.vote-button.green {
  color: #fff;
  border: 2px #23e823 solid;
  background-color: #23e823;
}
.vote-button.yellow {
  color: #fff;
  border: 2px #ffdc01 solid;
  background-color: #ffdc01;
}

#minutes-list-items li {
  margin-top: 2vh;
}

#popup-leave, #popup-save {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 27.5%;
  border: solid #fff 0.16vw;
  text-align: center;
  background-color: #000;
  font-size: 1.35vw;
  padding-inline: 3vw;
  margin-top: 5vh;
  border-radius: 1.3vw;
  z-index: 10;
}
#popup-leave span, #popup-save span {
  font-size: 1.3vw;
}
#popup-leave div, #popup-save div {
  font-size: 1vw;
}
#popup-leave p, #popup-save p {
  margin: 1.5vh 0 0 0;
  font-weight: 600;
  color: #fff;
}

#popup-delete {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -8vh);
  width: 30%;
  height: 27.5%;
  text-align: center;
  background-color: #000;
  font-size: 1.35vw;
  margin-top: 5vh;
  border-radius: 1.3vw;
  z-index: 10;
}
#popup-delete #yes, #popup-delete #no {
  cursor: pointer;
}
#popup-delete span {
  font-size: 1.3vw;
}
#popup-delete div {
  font-size: 1vw;
}
#popup-delete p {
  margin: 1.5vh 0 0 0;
  font-weight: 600;
  color: #fff;
}

.popup-btns-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 3.5vh;
}
.popup-btns-wrapper div {
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.4vw;
  height: 3.4vw;
  border-radius: 50%;
  margin-inline: 1.5vw;
  cursor: pointer;
}

#popup-yes, #popup-delete-yes {
  background-color: #23e823;
}

#popup-no, #popup-delete-no {
  background-color: #e9222d;
}

@media screen and (min-width: 1800px) {
  .attendance-name {
    margin-left: 1vw;
  }
}
@media screen and (orientation: portrait) {
  .vote-button {
    display: inline-block;
    font-weight: 700;
    border: 2px white solid;
    border-radius: 2vh;
    height: 2vh;
    line-height: 2vh;
    width: 18vw;
    text-align: center;
    margin-right: 4vw;
    margin-top: 1.5vh;
    text-transform: uppercase;
    color: black;
    background-color: white;
  }
  .vote-button.red {
    color: #e9222d;
    border: 2px #e9222d solid;
  }
  .vote-button.green {
    color: #23e823;
    border: 2px #23e823 solid;
  }
  .vote-button.red {
    color: #fff;
    border: 2px #e9222d solid;
    background-color: #e9222d;
  }
  .vote-button.green {
    color: #fff;
    border: 2px #23e823 solid;
    background-color: #23e823;
  }
  .remove-manager-item {
    font-size: 6vw;
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
  .remove-manager-item {
    font-size: 4vw;
  }
}
#settings-header {
  position: absolute;
  top: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.settings-circle {
  position: relative;
  width: 4.25vw;
  height: 4.25vw;
  border-radius: 50%;
  background-color: #fff;
  border: 0.6vw solid #e9222d;
  margin-right: 1vw;
}

.settings-circle_img {
  background-color: #e9222d;
  border-radius: 50%;
  padding: 7.5%;
  position: absolute;
  width: 77%;
  height: 77%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#settings-header-text {
  color: #e9222d;
  font-size: 3.5vw;
  line-height: 1;
  font-weight: 400;
  font-family: Rockwell;
}

.settings-item {
  color: #4497f7;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.25vw;
}

#meeting-panel-wrapper {
  font-weight: 600;
}
#meeting-panel-wrapper .label {
  font-size: 1.2vw;
}
#meeting-panel-wrapper .blue-btn {
  display: flex;
  padding: 0.6vw;
  align-items: center;
  justify-content: center;
  border-radius: 0.2vw;
  height: auto;
  width: 1vw;
  height: 1vw;
  font-size: 1vw;
  cursor: pointer;
  border: 2px solid #4497f7;
  background-color: #4497f7;
  border-radius: 2vw;
  outline: none;
}
#meeting-panel-wrapper .blue-input {
  font-weight: 600;
  font-size: 1vw;
  border-radius: 2vw;
  border: 2px solid #4497f7;
  outline: none;
}
#meeting-panel-wrapper .white-input {
  font-weight: 600;
  font-size: 1vw;
  border-radius: 0.5vw;
  border: 2px solid #fff;
  background-color: #fff;
  color: #000;
  outline: none;
}
#meeting-panel-wrapper .flex-buttons {
  margin-top: 6vh;
  align-items: center;
}

.meeting-header-detail {
  font-size: 1vw;
  text-align: center;
  margin-top: 1vh;
}

#title {
  padding: 0.45vw !important;
  border: 1px solid rgb(118, 118, 118);
  border-radius: 0.2vw;
  width: 17vw;
}

.red-btn--back-to-manager {
  position: absolute;
  bottom: 2.5vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1vw;
}

.red-btn--create-agenda-now {
  position: absolute;
  bottom: 2.5vh;
  left: 39%;
  transform: translateX(-50%);
  font-size: 1.1vw;
}

.red-btn--create-agenda-later {
  position: absolute;
  bottom: 2.5vh;
  left: 63%;
  transform: translateX(-50%);
  font-size: 1.1vw;
}

#conversation-root {
  display: flex;
  flex-direction: column-reverse;
  padding: 2% 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 2%, rgb(0, 0, 0) 95%, transparent);
  mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 2%, rgb(0, 0, 0) 95%, transparent);
}
#conversation-root .note {
  font-size: 1vw;
  float: left;
  width: 100%;
}
#conversation-root .note-text {
  display: inline-block;
  font-size: 1.15vw;
  line-height: initial;
  border-radius: 2vw;
  max-width: 50%;
  min-width: 1vw;
  padding: 0.8vw 1vw;
  word-wrap: break-word;
  font-weight: 600;
}
#conversation-root .note-text_first {
  display: inline-block;
  font-size: 1.15vw;
  line-height: initial;
  border-radius: 2vw;
  max-width: 50%;
  min-width: 1vw;
  padding: 0.8vw 1vw;
  word-wrap: break-word;
  font-weight: 600;
}
#conversation-root .image-note {
  font-size: 1.15vw;
  margin-top: 1vw;
}
#conversation-root .userimage {
  float: left;
  width: 2.75vw;
  height: 2.75vw;
  border-radius: 50%;
  margin-right: 1vw;
}
#conversation-root .time-right {
  text-align: right;
  padding-right: 0.75vw;
  margin: 0.35vw 0;
}
#conversation-root .note-text.right {
  margin-left: auto;
}
#conversation-root .note-text_first {
  background-color: #fff;
  color: #e9222d;
  margin-top: 1vw;
}
#conversation-root .right {
  float: right;
  background-color: #e9222d;
  color: #fff;
  text-align: left;
}
#conversation-root .left {
  float: left;
  background-color: #fff;
  color: #e9222d;
  text-align: left;
}
#conversation-root .postimage {
  position: relative;
  padding: 1vw;
  max-width: 50%;
  max-width: 25vw;
  border-radius: 5%;
  margin-top: 1vw;
}
#conversation-root .postimage audio {
  max-width: 25vw;
}
#conversation-root .talk_image {
  max-width: 100%;
}
#conversation-root .talk_video {
  max-width: 100%;
}
#conversation-root .message {
  font-size: 1.5vh;
  line-height: 1.75vh;
  margin-bottom: 4vh;
}

#posting-btns {
  background: rgba(0, 0, 0, 0.4);
  bottom: 0;
  position: absolute;
  right: 0;
  width: 100%;
}
#posting-btns #upload-preview-area {
  margin: auto;
  position: relative;
  display: none;
  max-width: 19vw;
  max-height: 9vw;
  margin-top: 0.5vw;
}
#posting-btns #upload-preview-area #upload-preview-close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: -3.5vh;
  width: 3vh;
  display: none;
}
#posting-btns #upload-preview-area #image-preview {
  display: none;
  box-sizing: border-box;
  border: 1px solid white;
  border-radius: 0.75vw;
  max-width: 19vw;
  max-height: 9vw;
  cursor: pointer;
}
#posting-btns #upload-preview-area #video-preview {
  display: none;
  max-width: 19vw;
  max-height: 9vw;
  box-sizing: border-box;
  border: 1px solid white;
  border-radius: 0.75vw;
  cursor: pointer;
}
#posting-btns #upload-preview-area #audio-preview {
  display: none;
}
#posting-btns #filename-preview-area {
  margin: auto;
  text-align: center;
  display: none;
  position: relative;
  margin-top: 1vw;
}
#posting-btns #filename-preview-area #filename-preview-close {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: -1.5vw;
  width: 1.25vw;
  display: none;
}
#posting-btns #filename-preview-area #file-preview {
  display: none;
  font-weight: 600;
  font-family: SourceSansPro;
  max-width: 40vw;
  word-break: break-all;
  font-size: 1vw;
}
#posting-btns .message-box {
  border: 1px solid #000;
  padding: 1vh 1vw;
  width: 18vw;
  font-weight: 600;
  font-size: 1.5vh;
  line-height: 2vh;
  border-radius: 1.75vh;
  resize: none;
  background-color: #fff;
  color: #101010;
  outline: none;
  font-family: SourceSansPro;
}
.landscape-phone.ios #posting-btns .message-box {
  font-size: 16px;
  line-height: 17px;
  padding: 0.5vh 0.5vw;
  width: 20vw;
}
#posting-btns #posting {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 1vh 1vw;
}
#posting-btns #media-buttons {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 1vh 1vw;
}

.message-box:empty::before {
  content: "enter message here...";
  color: gray;
}

.conversation-buttons {
  display: flex;
  width: 100vw;
  text-align: center;
  padding: 2vw 3vw 2vw 3vw;
  justify-content: center;
  box-sizing: border-box;
}

.conversation-footer-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 3vw 2.1vw 3vw;
}

#entirescreen {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: #000;
}

#exitimage {
  color: #fff;
  cursor: pointer;
}

#exitvideo {
  color: #fff;
  z-index: 999;
  cursor: pointer;
}

#imageExpandedFull {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 90%;
  width: 90%;
  object-fit: contain;
}

#videoExpandedFull {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 90%;
  width: 90%;
}

.convo {
  color: white;
  width: 100%;
  height: 65vh;
  height: 65dvh;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
.convo.contracted {
  height: 50vh;
  height: 50dvh;
}
.landscape-phone .convo {
  /********* super-wide *********/
}
@media screen and (orientation: landscape) and (min-aspect-ratio: 16/8) {
  .landscape-phone .convo {
    height: 52vh;
    height: 60dvh;
  }
  .landscape-phone .convo.contracted {
    height: 37vh;
    height: 42dvh;
  }
}
.landscape-phone .convo {
  /********* tablets *********/
}
@media screen and (orientation: landscape) and (max-aspect-ratio: 16/8) {
  .landscape-phone .convo.contracted {
    height: 58vh;
    height: 58dvh;
  }
}
.standalone-landscape .convo {
  height: 65vh;
  height: 65dvh;
}
.standalone-landscape .convo.contracted {
  height: 50vh;
  height: 50dvh;
}

.message-media-section {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding: 8vh 0;
  background: black;
}
.message-media-section #message-media-dash {
  box-sizing: border-box;
  height: 84vh;
  height: 84dvh;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  padding: 5% 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 5%, #000 95%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 5%, #000 95%, rgba(0, 0, 0, 0));
}
.landscape-phone .message-media-section #message-media-dash {
  height: 64vh;
  height: 84dvh;
}
.message-media-section .media-section-item {
  height: 11vw;
  width: 11vw;
  box-sizing: border-box;
  padding: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5vw;
}
.message-media-section .media-section-item .media-preview {
  max-height: 9vw;
  max-width: 9vw;
  box-sizing: border-box;
  border: 1px white solid;
  border-radius: 1vh;
  cursor: pointer;
}
.message-media-section .media-section-item .media-preview.no-border {
  border: none;
}
@media (orientation: portrait) {
  .message-media-section {
    height: auto;
    width: 100vw;
    margin-top: 2vw;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .message-media-section .media-section-item {
    height: 18vw;
    width: 18vw;
    box-sizing: border-box;
    padding: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1vw;
    visibility: hidden;
  }
  .message-media-section .media-section-item .media-preview {
    max-height: 14vw;
    max-width: 14vw;
    box-sizing: border-box;
    border: 1px white solid;
    border-radius: 2vw;
  }
}

/******** mobile version of left frame ********/
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  .message-box {
    display: inline-block;
    font-family: SourceSansPro;
    padding: 1vw;
    font-weight: 600;
    font-size: 4.25vw;
    line-height: 5vw;
    width: 70vw;
    box-sizing: border-box;
    color: #666666;
    background-color: white;
    border-radius: 2vw;
    text-align: left;
    white-space: pre-wrap;
    margin-bottom: 5.5vw;
    min-height: 6.5vw;
  }
  .skinny-iphone .message-box {
    margin-bottom: 5.5vw;
  }
  .conversation-dash {
    position: fixed;
    left: 0;
    top: calc(18vw + env(safe-area-inset-top));
    height: calc(100% - 48vw);
    height: calc(100% - 48vw);
  }
  .skinny-iphone .conversation-dash {
    top: calc(8.5vh + env(safe-area-inset-top));
    top: calc(8.75dvh + env(safe-area-inset-top));
    height: calc(100% - 8.5vh - env(safe-area-inset-top) - 36vw);
    height: calc(100% - 8.75dvh - env(safe-area-inset-top) - 36vw);
  }
  .conversation-dash .convo-message {
    margin-bottom: 4vw;
  }
  .conversation-dash .convo-message .preview-image {
    max-width: 35vw;
    max-height: 25vw;
    border-radius: 2vw;
  }
  .conversation-dash.android-keyboard-opened {
    margin-top: 15vh;
    height: 48vh;
  }
  .conversation-buttons {
    padding: 1vh 3vw;
    padding: 1dvh 3vw;
  }
  .conversation-footer-buttons {
    padding: 0 2vw 2.1vw 2vw;
  }
  .skinny-iphone .conversation-footer-buttons {
    padding-bottom: 5vw;
  }
  .conversation-footer-buttons .icon-with-word {
    width: 15vw;
  }
  .conversation-footer-buttons .icon-with-word div {
    min-height: 5.2vw;
    width: 15vw;
    margin-top: 1vw;
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  .message-box {
    display: inline-block;
    font-family: SourceSansPro;
    padding: 1vw;
    font-weight: 600;
    width: 74vw;
    box-sizing: border-box;
    color: #666666;
    background-color: white;
    border-radius: 1.5vw;
    text-align: left;
    white-space: pre-wrap;
    margin-bottom: 3vh;
    margin-bottom: 3.25dvh;
  }
  .conversation-dash {
    position: fixed;
    left: 0;
    top: calc(8.5vh + env(safe-area-inset-top));
    top: calc(8.75dvh + env(safe-area-inset-top));
    height: calc(100% - 8.5vh - env(safe-area-inset-top) - 16.25vh);
    height: calc(100% - 8.75dvh - env(safe-area-inset-top) - 16.5dvh);
  }
  .conversation-dash .convo-message {
    margin-bottom: 0.5vw;
  }
  .conversation-dash .convo-message .preview-image {
    max-width: 35vw;
    max-height: 15vw;
    border-radius: 1.25vw;
  }
  .conversation-dash.android-keyboard-opened {
    margin-top: 15vh;
    height: 48vh;
  }
  .conversation-buttons {
    padding: 1vh 3vw;
    padding: 1dvh 3vw;
  }
  .conversation-footer-buttons {
    padding: 0.5vh 3vw 1.5vh 3vw;
    padding: 0.5dvh 3vw 1.5dvh 3vw;
  }
  .conversation-footer-buttons .icon-with-word div {
    height: 3vh;
    height: 3dvh;
  }
}
/* global variables for colors, etc*/
/*deals*/
/*typography*/
/* 2022 */
/*#modal-layer-dynamic.alphapointe-style {*/
.page-flex-container {
  justify-content: center;
}

.bottom-overlay {
  background: black;
  color: white;
}

.link-input {
  background: #06415b;
  color: white;
  font-weight: 400;
  border-radius: 1vw;
  padding: 2vw;
  width: 65vw;
}
.link-input::placeholder, .link-input::-webkit-input-placeholder {
  font-style: italic !important;
  color: white !important;
  font-weight: 400;
}

.soccer-input {
  background: transparent;
  outline: none;
  border: none;
  color: #4497f7;
  font-weight: 600;
  font-size: 1.5vh;
  font-family: SourceSansPro;
  line-height: 1.75vh;
  min-height: 1.85vh;
}
.soccer-input.invalid {
  color: #de002b;
}
.soccer-input.invalid::placeholder {
  color: #de002b;
}
.soccer-input.grey {
  color: rgb(102, 102, 102);
}
.soccer-input.disabled {
  pointer-events: none;
}

.soccer-input::placeholder {
  color: #4497f7;
}

.soccer-input.disabled::placeholder {
  color: rgb(102, 102, 102);
  pointer-events: none;
}

#bylaws-step-1, #bylaws-step-2, #bylaws-step-3 {
  text-align: center;
}

.flex-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-buttons > * {
  margin-top: 0;
}

.reorder-input {
  min-width: 2vw;
  height: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border: 1px solid #4497f7;
  border-radius: 5px;
  text-align-last: center;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  outline: none;
  font-size: 1.5vh;
  line-height: 1.75vh;
}
.reorder-input.editable {
  background-color: #4497f7;
}
.reorder-input.black-version {
  background-color: #000 !important;
  border: 1px solid #4497f7;
}
.landscape-phone .reorder-input {
  font-size: 1.5vh;
  line-height: 1.75vh;
}

.default-checkbox-input {
  display: none;
}

.default-checkbox-span {
  display: inline-block;
  background-image: url(../images/icons/2022/save@3x.png);
  border-radius: 50%;
  width: 2vw;
  height: 2vw;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 1vw;
  cursor: pointer;
}

.default-checkbox-input:checked + span {
  background-image: url(../images/icons/2022/save-green@3x.png);
}

.green-button {
  background: #23e823;
  color: #101010;
  border-radius: 50%;
  width: 8vw;
  height: 8vw;
  margin-right: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.red-button {
  background: #e9222d;
  color: white;
  margin-left: 2vw;
  border-radius: 50%;
  width: 8vw;
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-link {
  font-weight: 600;
}
.list-link.person {
  display: flex;
  align-items: flex-start;
  width: 80vw;
  margin-bottom: 0.2vh;
  font-weight: 500;
}
.list-link.person .message-icon {
  height: 7.5vw;
  width: 7.5vw;
  margin-right: 10px;
  opacity: 0;
}
.list-link.person .position {
  margin-left: 15px;
  text-align: left;
  line-height: 1;
  width: calc(80vw - 140px);
}
.list-link.person .name {
  width: 200px;
  line-height: 1;
}

::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field {
  color: #4497f7;
}

.link-list-ul {
  list-style-type: none;
  padding-left: 0;
  text-align: center;
  line-height: 2;
}

.manager-header {
  align-items: center;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.5vh 1vw;
  padding-top: calc(0.5vh + env(safe-area-inset-top));
  color: white;
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 7.25vh;
}
.manager-header .green {
  color: #23e823;
}

.manager-contents {
  word-break: break-word;
  height: 78vh;
  height: 78dvh;
  width: 95%;
  background: white;
  color: #101010;
  text-align: center;
  overflow-y: scroll;
  font-weight: 600;
}
.landscape-phone .manager-contents {
  height: 63vh;
  margin-bottom: 3vh;
  height: 74dvh;
  margin-bottom: 3.5dvh;
}
.manager-contents h3 {
  font-size: 150%;
}
.manager-contents .grey {
  color: #666666;
  font-size: 1vw;
  padding-inline: 5vw;
}
.manager-contents li {
  text-align: left;
}
.manager-contents .list-item {
  margin: 2vh 0 0 0;
}
.manager-contents .list-item.compact {
  margin: 0.75vh 0 0 0;
}
.manager-contents #doc-list-items .list-item {
  margin: 1vh 0 0 0;
}
.manager-contents #doc-list-items .list-item.compact {
  margin: 3vh 0 0 0;
}
.manager-contents ol {
  text-align: left;
  list-style: none;
  counter-reset: list;
}
.manager-contents ol li {
  position: relative;
}
.manager-contents ol li:before {
  counter-increment: list;
  content: counter(list) ".";
  position: absolute;
  left: -2vw;
  margin-right: 2vw;
  top: 0.15vh;
  font-size: 1.5vh;
}
.manager-contents div[contenteditable=true] {
  white-space: pre-wrap;
  cursor: text;
  /*
  * {
    font-size: 1.5vh !important;
  }
  */
}
.manager-contents div[contenteditable=true]:empty:before,
.manager-contents div[contenteditable=true]:empty:focus:before,
.manager-contents div[contenteditable=true]:not(:focus):empty::before {
  content: attr(placeholder);
}

.blue-btn {
  background: #4497f7;
  color: white;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manager-footer {
  background: #101010;
  height: 15vh;
  width: 100%;
}

.agenda-input, .vote-input, .doc-input, .notes-input, .action-input, .agenda-template-input {
  border: none;
  -webkit-appearance: none;
  outline: none;
  border: none;
  font-family: SourceSansPro;
  line-height: 1.75vh;
  padding-left: 0;
  vertical-align: top;
  background: transparent;
  width: 100%;
}
.agenda-input:disabled, .vote-input:disabled, .doc-input:disabled, .notes-input:disabled, .action-input:disabled, .agenda-template-input:disabled {
  color: #101010;
  opacity: 1;
  background: transparent;
  border: none;
}
.agenda-input:disabled::placeholder, .agenda-input:disabled::-webkit-input-placeholder, .vote-input:disabled::placeholder, .vote-input:disabled::-webkit-input-placeholder, .doc-input:disabled::placeholder, .doc-input:disabled::-webkit-input-placeholder, .notes-input:disabled::placeholder, .notes-input:disabled::-webkit-input-placeholder, .action-input:disabled::placeholder, .action-input:disabled::-webkit-input-placeholder, .agenda-template-input:disabled::placeholder, .agenda-template-input:disabled::-webkit-input-placeholder {
  color: #101010;
  opacity: 1;
}
.agenda-input::placeholder, .agenda-input::-webkit-input-placeholder, .vote-input::placeholder, .vote-input::-webkit-input-placeholder, .doc-input::placeholder, .doc-input::-webkit-input-placeholder, .notes-input::placeholder, .notes-input::-webkit-input-placeholder, .action-input::placeholder, .action-input::-webkit-input-placeholder, .agenda-template-input::placeholder, .agenda-template-input::-webkit-input-placeholder {
  color: #4497f7;
}
.agenda-input.black, .vote-input.black, .doc-input.black, .notes-input.black, .action-input.black, .agenda-template-input.black {
  color: #101010;
}

.shadow-input, .agenda-name {
  max-width: 42vw;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #101010;
  vertical-align: top;
  display: inline-block;
  font-size: 2vh !important;
  line-height: 2.5vh !important;
}
.shadow-input *, .agenda-name * {
  color: #101010 !important;
  font-size: 2vh !important;
  line-height: 2.5vh !important;
  background-color: transparent !important;
  font-family: sourceSansPro !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

.agenda-input, .vote-input, .notes-input, .action-input {
  color: #4497f7;
}

.doc-input {
  color: #4497f7;
}

.doc-link {
  padding-left: 0;
  width: 100%;
}

.message-icon {
  opacity: 1;
}

#phone_wrapper input, #email_wrapper input, #display_name_wrapper input {
  outline: none;
}
#phone_wrapper input::placeholder, #phone_wrapper input::-webkit-input-placeholder, #email_wrapper input::placeholder, #email_wrapper input::-webkit-input-placeholder, #display_name_wrapper input::placeholder, #display_name_wrapper input::-webkit-input-placeholder {
  color: #4497f7;
}

#posting > textarea {
  border-radius: 3vw;
  line-height: 0.8 !important;
}

#agenda-item-readonly, #agenda-item-editable, .notes-item-readonly, .notes-item-editable {
  min-height: 2.25vh;
  max-width: 100%;
  font-family: SourceSansPro !important;
  font-size: 1.75vh !important;
  line-height: 2.25vh !important;
  font-weight: 600 !important;
}
.ios #agenda-item-readonly, .ios #agenda-item-editable, .ios .notes-item-readonly, .ios .notes-item-editable {
  font-size: 16px !important;
  line-height: 18px !important;
}
#agenda-item-readonly div, #agenda-item-readonly p, #agenda-item-readonly strong, #agenda-item-readonly span, #agenda-item-readonly li, #agenda-item-readonly b, #agenda-item-readonly i, #agenda-item-editable div, #agenda-item-editable p, #agenda-item-editable strong, #agenda-item-editable span, #agenda-item-editable li, #agenda-item-editable b, #agenda-item-editable i, .notes-item-readonly div, .notes-item-readonly p, .notes-item-readonly strong, .notes-item-readonly span, .notes-item-readonly li, .notes-item-readonly b, .notes-item-readonly i, .notes-item-editable div, .notes-item-editable p, .notes-item-editable strong, .notes-item-editable span, .notes-item-editable li, .notes-item-editable b, .notes-item-editable i {
  font-family: SourceSansPro !important;
  font-size: 1.75vh !important;
  line-height: 2.25vh !important;
  font-weight: 600 !important;
}
.ios #agenda-item-readonly div, .ios #agenda-item-readonly p, .ios #agenda-item-readonly strong, .ios #agenda-item-readonly span, .ios #agenda-item-readonly li, .ios #agenda-item-readonly b, .ios #agenda-item-readonly i, .ios #agenda-item-editable div, .ios #agenda-item-editable p, .ios #agenda-item-editable strong, .ios #agenda-item-editable span, .ios #agenda-item-editable li, .ios #agenda-item-editable b, .ios #agenda-item-editable i, .ios .notes-item-readonly div, .ios .notes-item-readonly p, .ios .notes-item-readonly strong, .ios .notes-item-readonly span, .ios .notes-item-readonly li, .ios .notes-item-readonly b, .ios .notes-item-readonly i, .ios .notes-item-editable div, .ios .notes-item-editable p, .ios .notes-item-editable strong, .ios .notes-item-editable span, .ios .notes-item-editable li, .ios .notes-item-editable b, .ios .notes-item-editable i {
  font-size: 16px !important;
  line-height: 18px !important;
}

#agenda-item-readonly, .notes-item-readonly {
  color: black !important;
  white-space: pre-wrap;
  cursor: text;
}
#agenda-item-readonly div, #agenda-item-readonly p, #agenda-item-readonly strong, #agenda-item-readonly span, #agenda-item-readonly li, #agenda-item-readonly b, #agenda-item-readonly i, .notes-item-readonly div, .notes-item-readonly p, .notes-item-readonly strong, .notes-item-readonly span, .notes-item-readonly li, .notes-item-readonly b, .notes-item-readonly i {
  color: black !important;
}

#agenda-item-editable, .notes-item-editable {
  white-space: pre-wrap;
  cursor: text;
  color: #4497f7 !important;
}
.ios #agenda-item-editable, .ios .notes-item-editable {
  font-size: 16px !important;
  line-height: 18px !important;
}
#agenda-item-editable div, #agenda-item-editable p, #agenda-item-editable strong, #agenda-item-editable span, #agenda-item-editable li, #agenda-item-editable b, #agenda-item-editable i, .notes-item-editable div, .notes-item-editable p, .notes-item-editable strong, .notes-item-editable span, .notes-item-editable li, .notes-item-editable b, .notes-item-editable i {
  color: #4497f7 !important;
}
.ios #agenda-item-editable div, .ios #agenda-item-editable p, .ios #agenda-item-editable strong, .ios #agenda-item-editable span, .ios #agenda-item-editable li, .ios #agenda-item-editable b, .ios #agenda-item-editable i, .ios .notes-item-editable div, .ios .notes-item-editable p, .ios .notes-item-editable strong, .ios .notes-item-editable span, .ios .notes-item-editable li, .ios .notes-item-editable b, .ios .notes-item-editable i {
  font-size: 16px !important;
  line-height: 18px !important;
}
.ios #agenda-item-editable, .ios .notes-item-editable {
  font-size: 16px !important;
  line-height: 18px !important;
}

/******** mobile version ********/
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  .shadow-input, .agenda-name {
    font-size: 3vw !important;
    line-height: 4vw !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #101010;
    font-weight: 700;
  }
  .shadow-input *, .agenda-name * {
    font-size: 3vw !important;
    line-height: 4vw !important;
  }
  .fat-iphone .agenda-outline-text, .skinny-iphone .agenda-outline-text {
    font-size: 16px !important;
    line-height: 17px !important;
  }
  #agenda-item-readonly, #agenda-item-editable, .notes-item-readonly, .notes-item-editable {
    min-height: 2.5vh;
    max-width: 100%;
    font-family: SourceSansPro !important;
    font-size: 3vw !important;
    line-height: 4vw !important;
    font-weight: 600 !important;
  }
  .fat-iphone #agenda-item-readonly, .skinny-iphone #agenda-item-readonly, .fat-iphone #agenda-item-editable, .skinny-iphone #agenda-item-editable, .fat-iphone .notes-item-readonly, .skinny-iphone .notes-item-readonly, .fat-iphone .notes-item-editable, .skinny-iphone .notes-item-editable {
    font-size: 16px !important;
    line-height: 17px !important;
  }
  #agenda-item-readonly div, #agenda-item-readonly p, #agenda-item-readonly strong, #agenda-item-readonly span, #agenda-item-readonly li, #agenda-item-readonly b, #agenda-item-readonly i, #agenda-item-editable div, #agenda-item-editable p, #agenda-item-editable strong, #agenda-item-editable span, #agenda-item-editable li, #agenda-item-editable b, #agenda-item-editable i, .notes-item-readonly div, .notes-item-readonly p, .notes-item-readonly strong, .notes-item-readonly span, .notes-item-readonly li, .notes-item-readonly b, .notes-item-readonly i, .notes-item-editable div, .notes-item-editable p, .notes-item-editable strong, .notes-item-editable span, .notes-item-editable li, .notes-item-editable b, .notes-item-editable i {
    font-size: 3vw !important;
    line-height: 4vw !important;
    font-weight: 600 !important;
  }
  #posting > textarea {
    padding: 0 1vw;
    line-height: 0.8 !important;
    padding-top: 2vw;
    width: 50vw;
    border-radius: 10vw;
    margin-right: 7vw;
    padding-left: 2vw;
  }
  .soccer-input {
    font-size: 3vw;
    line-height: 3.5vw;
    min-height: 3.6vw !important;
  }
  .manager-contents {
    height: 73vh;
    height: 73dvh;
    width: 96vw;
    background: white;
    color: #101010;
    text-align: center;
    padding: 2vw;
    overflow-x: hidden;
    overflow-y: scroll;
    font-weight: 600;
    position: fixed;
    left: 0;
    bottom: 11vh;
    bottom: 11dvh;
  }
  .fat-iphone .manager-contents, .fat-android .manager-contents {
    height: 72vh;
    height: 72dvh;
    bottom: 14vh;
    bottom: 14dvh;
  }
  .skinny-android .manager-contents {
    height: 76vh;
    height: 76dvh;
    bottom: 12vh;
    bottom: 12dvh;
  }
  .fat-iphone .manager-contents .agenda-outline-text, .skinny-iphone .manager-contents .agenda-outline-text {
    font-size: 16px !important;
    line-height: 17px !important;
  }
  .manager-contents div[contenteditable=true] {
    white-space: pre-wrap;
    cursor: text;
  }
  .fat-iphone .manager-contents div[contenteditable=true], .skinny-iphone .manager-contents div[contenteditable=true] {
    font-size: 16px !important;
    line-height: 17px !important;
  }
  .manager-contents div[contenteditable=true] * {
    font-size: 3vw !important;
  }
  .fat-iphone .manager-contents div[contenteditable=true] *, .skinny-iphone .manager-contents div[contenteditable=true] * {
    font-size: 16px !important;
    line-height: 17px !important;
  }
  .manager-contents div[contenteditable=true]:empty:before,
  .manager-contents div[contenteditable=true]:empty:focus:before,
  .manager-contents div[contenteditable=true]:not(:focus):empty::before {
    content: attr(placeholder);
  }
  .manager-contents h3 {
    font-size: 150%;
  }
  .manager-contents .grey {
    color: #666666;
  }
  .manager-contents li {
    text-align: left;
  }
  .manager-contents .list-item {
    margin: 2vh 0 0 0;
  }
  .manager-contents .list-item.compact {
    margin: 0.75vh 0 0 0;
  }
  .manager-contents #doc-list-items .list-item {
    margin: 4vh 0 0 0;
  }
  .manager-contents #doc-list-items .list-item.compact {
    margin: 3vh 0 0 0;
  }
  .manager-contents ol {
    text-align: left;
    list-style: none;
    counter-reset: list;
  }
  .manager-contents ol li {
    position: relative;
  }
  .manager-contents ol li:before {
    counter-increment: list;
    content: counter(list) ".";
    position: absolute;
    right: 100%;
    margin-right: 2vw;
    top: 0.15vh;
  }
  .manager-contents #doc-list-items li:before {
    counter-increment: list;
    content: counter(list) ".";
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    margin-right: 2vw;
  }
}
/******** tablet / fatphone version ********/
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  .shadow-input, .agenda-name {
    font-size: 3vw !important;
    line-height: 4vw !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #101010;
    font-weight: 700;
  }
  .shadow-input *, .agenda-name * {
    font-size: 3vw !important;
    line-height: 4vw !important;
  }
  #agenda-item-readonly, #agenda-item-editable, .notes-item-readonly, .notes-item-editable {
    min-height: 2.5vh;
    max-width: 100%;
    font-family: SourceSansPro !important;
    font-size: 3vw !important;
    line-height: 4vw !important;
    font-weight: 600 !important;
  }
  #agenda-item-readonly div, #agenda-item-readonly p, #agenda-item-readonly strong, #agenda-item-readonly span, #agenda-item-readonly li, #agenda-item-readonly b, #agenda-item-readonly i, #agenda-item-editable div, #agenda-item-editable p, #agenda-item-editable strong, #agenda-item-editable span, #agenda-item-editable li, #agenda-item-editable b, #agenda-item-editable i, .notes-item-readonly div, .notes-item-readonly p, .notes-item-readonly strong, .notes-item-readonly span, .notes-item-readonly li, .notes-item-readonly b, .notes-item-readonly i, .notes-item-editable div, .notes-item-editable p, .notes-item-editable strong, .notes-item-editable span, .notes-item-editable li, .notes-item-editable b, .notes-item-editable i {
    font-size: 3vw !important;
    line-height: 4vw !important;
    font-weight: 600 !important;
  }
  #posting > textarea {
    padding: 0 1vw;
    line-height: 0.8 !important;
    padding-top: 2vw;
    width: 50vw;
    border-radius: 10vw;
    margin-right: 7vw;
    padding-left: 2vw;
  }
  .soccer-input {
    font-size: 1.8vw;
    line-height: 2.1vw;
    min-height: 2.2vw !important;
  }
  .manager-contents {
    height: 75vh;
    height: 75dvh;
    width: 96vw;
    background: white;
    color: #101010;
    text-align: center;
    padding: 2vw;
    overflow-x: hidden;
    overflow-y: scroll;
    font-weight: 600;
    position: fixed;
    left: 0;
    bottom: 10vh;
    bottom: 10dvh;
  }
  .manager-contents div[contenteditable=true] {
    white-space: pre-wrap;
    cursor: text;
  }
  .manager-contents div[contenteditable=true] * {
    font-size: 3vw !important;
  }
  .manager-contents div[contenteditable=true]:empty:before,
  .manager-contents div[contenteditable=true]:empty:focus:before,
  .manager-contents div[contenteditable=true]:not(:focus):empty::before {
    content: attr(placeholder);
  }
  .manager-contents h3 {
    font-size: 150%;
  }
  .manager-contents .grey {
    color: #666666;
  }
  .manager-contents li {
    text-align: left;
  }
  .manager-contents .list-item {
    margin: 2vh 0 0 0;
  }
  .manager-contents .list-item.compact {
    margin: 0.75vh 0 0 0;
  }
  .manager-contents #doc-list-items .list-item {
    margin: 4vh 0 0 0;
  }
  .manager-contents #doc-list-items .list-item.compact {
    margin: 3vh 0 0 0;
  }
  .manager-contents ol {
    text-align: left;
    list-style: none;
    counter-reset: list;
  }
  .manager-contents ol li {
    position: relative;
  }
  .manager-contents ol li:before {
    counter-increment: list;
    content: counter(list) ".";
    position: absolute;
    right: 100%;
    margin-right: 2vw;
    top: 0.15vh;
  }
  .manager-contents #doc-list-items li:before {
    counter-increment: list;
    content: counter(list) ".";
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    margin-right: 2vw;
  }
}
.board-confirm-dialog {
  background-color: #101010;
  border: 2px solid white;
  border-radius: 2vw;
  box-sizing: border-box;
  color: white;
  height: 22vh;
  left: 30vw;
  position: fixed;
  top: 39vh;
  width: 40vw;
  opacity: 1;
}

.board-confirm-dialog.fade {
  opacity: 0;
  transition: opacity linear 2s;
}

.board-confirm-dialog .question {
  box-sizing: border-box;
  font-size: 125%;
  font-weight: 500;
  line-height: 125%;
  padding: 2vh 5vw;
  text-align: center;
}

.board-confirm-dialog .buttons-wrapper {
  bottom: 0;
  box-sizing: border-box;
  font-weight: 600;
  position: absolute;
  text-align: center;
  width: 100%;
}

.board-confirm-dialog .confirm-button {
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  font-size: 125%;
  height: 10vw;
  line-height: 10vw;
  margin: 2vh 5vw;
  text-align: center;
  width: 10vw;
}

.board-confirm-dialog .check {
  box-sizing: border-box;
  display: inline-block;
  margin: 2vh 2vw;
  width: 4vw;
  vertical-align: middle;
}

.board-confirm-dialog .message {
  box-sizing: border-box;
  display: inline-block;
  margin: 2vh 2vw;
  vertical-align: middle;
  font-size: 110%;
  line-height: 110%;
}

/**** phones *********/
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  .reorder-input {
    width: 8vw;
    height: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border: 1px solid #4497f7;
    border-radius: 1.5vw;
    text-align-last: center;
    font-weight: 600;
    color: #fff;
    outline: none;
  }
  .reorder-input.editable {
    background-color: #4497f7;
  }
  .reorder-input.black-version {
    background-color: #000 !important;
    border: 1px solid #4497f7;
  }
  .fat-android .reorder-input, .fat-iphone .reorder-input {
    width: 6vw;
    height: 6vw;
    font-size: 2.1vw;
    line-height: 2.1vw;
    border-radius: 1vw;
  }
}
/******* fat phones and tablets *****/
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  .reorder-input {
    width: 6vw;
    height: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border: 1px solid #4497f7;
    border-radius: 1.5vw;
    text-align-last: center;
    font-weight: 600;
    color: #fff;
    outline: none;
  }
  .reorder-input.editable {
    background-color: #4497f7;
  }
  .reorder-input.black-version {
    background-color: #000 !important;
    border: 1px solid #4497f7;
  }
}
/* global variables for colors, etc*/
/*deals*/
/*typography*/
/* 2022 */
#common-card {
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
}

#soccer .bg-img, .bg-video {
  position: absolute;
  right: 0;
  width: 100%;
  height: 105%;
  object-position: center 20%;
}

#soccer .small-circle-tag {
  background-color: #fff;
  width: 0.5vw;
  height: 0.5vw;
  border-radius: 50%;
  margin-right: 0.5vw;
}

#common-card .data-layer {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  overflow-y: auto;
  max-height: 88%;
  margin-bottom: 8vh;
  padding: 0vh 1vw 8vh 2vw;
}

#common-card .data-layer-wrapper {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}

#common-card .data-content .data-row {
  color: white;
  font-size: 2vh;
  font-weight: 600;
  margin: 2vh 0;
  min-height: 3.5vh;
}

#common-card #footer-action-buttons,
#soccer #footer-action-buttons,
#people-content #footer-action-buttons,
#content-dash #footer-action-buttons,
#bod #footer-action-buttons {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  padding: 1vh 1vw;
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
}

#common-card .landscape-img {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  width: 100%;
}

.shadow-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(transparent, #171717);
}

#mini-container .slider-arrow {
  width: 8vw;
  height: 8vw;
  position: absolute;
  top: 50%;
  filter: invert(1);
  z-index: 999999;
}

#content-dash .content-item {
  width: 45vw;
  height: 24vh;
  margin-top: 5vh;
}

#content-dash .footer-buttons {
  width: 100vw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.4);
  padding-top: 3vw;
  padding-bottom: 2vw;
  z-index: 1;
}

#content-dash .footer-button {
  width: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  color: white;
  margin: 0 !important;
}

#content-dash #content-top {
  width: 95%;
  padding-top: 16.5%;
  display: flex;
  color: white;
  font-size: 110%;
  font-weight: 500;
}

#content-dash #content-list {
  color: white;
  font-size: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-inline: 1.5vw;
  max-height: 76%;
  width: 100%;
  overflow-y: scroll;
}

#content-list .new {
  width: 6vw;
  height: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  border-radius: 50%;
  color: white;
  background: #4497f7;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 80%;
  position: absolute;
  top: -2.5%;
  right: -3%;
}

#content-list .premium-logo {
  position: absolute;
  width: 6vw;
  height: 6vw;
  bottom: 7%;
  left: 3%;
}

#content-list .play-icon {
  position: absolute;
  width: 6vw;
  height: 6vw;
  bottom: 7%;
  right: 3%;
  filter: invert(1);
}

#people-content #people-list-wrapper,
#bod #people-list-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
  height: 80%;
}

#people-content #people-list,
#bod #people-list {
  position: relative;
  padding-top: 3vh;
  width: 100%;
  max-height: auto;
  margin-top: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.icon-with-word.dimmed {
  filter: brightness(0.4) !important;
  pointer-events: none !important;
}
.icon-with-word.undimmed {
  filter: brightness(1) !important;
  pointer-events: auto !important;
}

#people-content #alphabet {
  position: absolute;
  right: 0.5%;
  top: 12vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#people-content #alphabet span {
  font-size: 1vw;
  font-weight: 600;
  color: white;
  margin-top: 0.15vh;
  margin-bottom: 0.15vh;
  cursor: pointer;
}

#people-list .person-item {
  width: 50vw;
  border: 2px solid #000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  position: relative;
  color: #fff;
  font-weight: 600;
  font-size: 1vw;
  padding: 1vh 0;
  cursor: pointer;
}

#people-list .person-item .profile-img {
  width: 3vw;
  height: 5vw;
  border: 1px solid #fff;
  border-radius: 5px;
  margin-right: 2.5vw;
  object-fit: cover;
  object-position: center 20%;
}

#people-list .person-item .profile-pic {
  height: 7.111vh;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  border: 1px solid white;
  border-radius: 1vh;
  margin: auto;
  width: 4vh;
}

.top-banner .profile-img,
.data-layer .profile-img {
  width: 3vw;
  height: 5vw;
  border: 1px solid #fff;
  border-radius: 3px;
  object-fit: cover;
  object-position: center 20%;
}

.person-item .icon-wrapper {
  width: 2vw;
  height: 2vw;
  margin-inline: 3vw;
}

.person-item .unread {
  display: block;
  width: 1.75vw;
  height: 1.75vw;
  background-color: #fff;
  border-radius: 50%;
}

.person-item .person-name {
  color: white;
  font-weight: 600;
  font-size: 1.1vw;
  margin-right: 7vw;
  margin-top: 2%;
  width: 25%;
}

.person-item .person-text {
  color: white;
  font-weight: 600;
  font-size: 1vw;
  width: 25%;
  margin-top: 2%;
}

#content-dash .section-header {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-weight: 600;
  padding: 1vh 0;
  text-align: center;
  position: relative;
  z-index: 10;
}

#content-dash .section-header .carrot {
  transition: transform 0.5s ease-out;
}

#content-dash .section {
  width: 100%;
  text-align: center;
}

#content-dash .section-thumbnails {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.85vh;
}
#content-dash .section-thumbnails.show {
  opacity: 1;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
}
#content-dash .section-thumbnails.hide {
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
}

#content-dash .section-thumbnails .preview-wrapper {
  position: relative;
  width: 20%;
  min-height: 30vw;
  border-radius: 4px;
  margin-inline: 2%;
}

#content-dash .section-thumbnails .preview-wrapper .tag {
  position: absolute;
  top: -3%;
  right: -10%;
  width: 5vw;
  height: 5vw;
  border-radius: 4px;
  color: #000;
  background-color: #4497f7;
  font-size: 110%;
  font-weight: 600;
  letter-spacing: -0.5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content-dash .section-thumbnails .preview {
  width: 100%;
  height: 30vw;
  border: 1px solid #fff;
  border-radius: 4px;
}

#common-card .switch {
  position: relative;
  display: inline-block;
  width: 19vw;
  height: 7.25vw;
  margin-left: 2vw;
}

#common-card .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#common-card .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  border-radius: 6px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

#common-card .slider-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: #000;
}

#common-card .slider:before {
  position: absolute;
  content: "";
  height: 6vw;
  width: 9.5vw;
  right: 4px;
  bottom: 2.5px;
  background-color: #7a7a7a;
  border-radius: 6px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

#common-card input:checked + .slider {
  background-color: #5cfc5c;
}

#common-card input:checked + .slider:before {
  -webkit-transform: translateX(-26px);
  -ms-transform: translateX(-26px);
  transform: translateX(-26px);
}

#modal-layer-dynamic.alphapointe-style .remove-doc-item {
  color: #e9222d;
  display: inline-block;
  font-size: 2vw;
  margin-right: 5vw;
}
#modal-layer-dynamic.alphapointe-style .remove-doc-item.doc-normal {
  margin-top: 0;
}
#modal-layer-dynamic.alphapointe-style .remove-doc-item.doc-offset {
  margin-top: 0.6vh;
}
#modal-layer-dynamic.alphapointe-style .file-edit-wrapper {
  display: inline-block;
  margin-left: 4vw;
  vertical-align: top;
}
#modal-layer-dynamic.alphapointe-style .file-edit-wrapper .file-edit-name {
  cursor: pointer;
  color: #4497f7;
  text-decoration: underline;
}
#modal-layer-dynamic.alphapointe-style .file-save-name {
  color: #4497f7;
  display: block;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  width: 100%;
}
#modal-layer-dynamic.alphapointe-style .file-link {
  display: inline-block;
  vertical-align: top;
}

/* SOME ALPHAPOINTE STUFF */
#docs-past-content #doc-list-items .item-input, #docs-past-content #agenda-list-items .item-input, #docs-past-content #vote-list-items .item-input, #docs-past-content #note-list-items .item-input, #docs-past-content #action-list-items .item-input, #docs-content #doc-list-items .item-input, #docs-content #agenda-list-items .item-input, #docs-content #vote-list-items .item-input, #docs-content #note-list-items .item-input, #docs-content #action-list-items .item-input, #agenda-content #doc-list-items .item-input, #agenda-content #agenda-list-items .item-input, #agenda-content #vote-list-items .item-input, #agenda-content #note-list-items .item-input, #agenda-content #action-list-items .item-input, #vote-content #doc-list-items .item-input, #vote-content #agenda-list-items .item-input, #vote-content #vote-list-items .item-input, #vote-content #note-list-items .item-input, #vote-content #action-list-items .item-input, #notes-past-content #doc-list-items .item-input, #notes-past-content #agenda-list-items .item-input, #notes-past-content #vote-list-items .item-input, #notes-past-content #note-list-items .item-input, #notes-past-content #action-list-items .item-input, #action-past-content #doc-list-items .item-input, #action-past-content #agenda-list-items .item-input, #action-past-content #vote-list-items .item-input, #action-past-content #note-list-items .item-input, #action-past-content #action-list-items .item-input {
  font-size: 1vw;
  font-weight: 600;
  outline: none;
  padding-left: 2.25vw;
  width: 6.5vw;
  height: 3.25vh;
  background: transparent;
  border: 2px solid #000;
  border-radius: 0;
  color: #000;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}

#people-list .item-input {
  font-size: 1vw;
  font-weight: 600;
  outline: none;
  padding-left: 2.25vw;
  width: 6.5vw;
  height: 3.25vh;
  background: transparent;
  border: 2px solid #000;
  border-radius: 0;
  color: #000;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}

/*** content-dash stuff. Are we actually using this??? **/
#content-dash .section-header {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 125%;
  font-weight: 600;
  padding: 1vh 0;
  text-align: center;
  position: relative;
  z-index: 10;
}
#content-dash .section-header.solid {
  background: #333333;
}

#content-dash .section-header .carrot {
  transition: transform 0.5s ease-out;
}

#content-dash .section {
  width: 100%;
  text-align: center;
}

#content-dash .section-thumbnails {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: flex-start;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
  max-height: 39vw;
  overflow: hidden;
}
#content-dash .section-thumbnails.show {
  opacity: 1;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
}
#content-dash .section-thumbnails.hide {
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
  visibility: hidden;
}
#content-dash .section-thumbnails.expanded {
  max-height: 1500px;
  overflow: visible;
}

#content-dash .section-thumbnails .preview-wrapper {
  position: relative;
  min-height: 29.156vw;
  width: 16.4vw;
  margin: 0 1.5vw;
}

#content-dash .section-thumbnails .preview-wrapper .tag {
  position: absolute;
  top: -3%;
  right: -10%;
  width: 5vw;
  height: 5vw;
  border-radius: 2vw;
  color: #000;
  background-color: #4497f7;
  font-size: 110%;
  font-weight: 600;
  letter-spacing: -0.5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content-dash .section-thumbnails .preview {
  width: 100%;
  min-height: 29.156vw;
  border: 1px solid #fff;
  border-radius: 3vw;
  overflow: hidden;
}
#content-dash .section-thumbnails .preview .shadow-wrapper {
  background: rgba(0, 0, 0, 0.3);
  min-height: 29.156vw;
  width: 100%;
}

/*** end content-dash stuff **/
.platform-icon-wrapper {
  box-sizing: border-box;
  height: 3vh;
  width: 3vh;
}
.platform-icon-wrapper img {
  height: 3vh;
  width: 3vh;
  border-radius: 0.5vh;
  border: 1px white solid;
  box-sizing: border-box;
  object-fit: cover;
}

@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #connects-dash .section-header {
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 125%;
    font-weight: 600;
    padding: 1vh 0;
    text-align: center;
    position: relative;
    z-index: 10;
  }
  #connects-dash .section-header.solid {
    background: #333333;
  }
  #connects-dash .section-header .carrot {
    transition: transform 0.5s ease-out;
  }
  #connects-dash .section {
    width: 100%;
    text-align: center;
  }
  #connects-dash .section .section-thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: flex-start;
    padding-left: 3vw;
    max-height: 20vh;
    overflow: hidden;
  }
  #connects-dash .section .section-thumbnails.show {
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
  }
  #connects-dash .section .section-thumbnails.hide {
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
    visibility: hidden;
  }
  #connects-dash .section .section-thumbnails.expanded {
    max-height: none;
    overflow: visible;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper {
    box-sizing: border-box;
    margin-bottom: 1vh;
    margin-right: 3vw;
    width: 21.25vw;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .platform-name {
    margin-top: 0.5vh;
    text-align: center;
    font-size: 1.5vh;
    line-height: 1.75vh;
    height: 3.5vh;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper {
    position: relative;
    height: 38vw;
    width: 100%;
    border: 1px solid #fff;
    border-radius: 2vh;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper {
    background: rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    min-height: 38vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2vw 0 13vw 0;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper .header-image {
    display: block;
    width: 18vw;
    height: 10vw;
    object-fit: contain;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper .center-image {
    display: block;
    width: 12vw;
    height: 12vw;
    object-fit: cover;
    border-radius: 50%;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper .center-image.no-round {
    border-radius: 0;
    object-fit: contain;
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  #connects-dash .section-header {
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 125%;
    font-weight: 600;
    padding: 1vh 0;
    text-align: center;
    position: relative;
    z-index: 10;
  }
  #connects-dash .section-header.solid {
    background: #333333;
  }
  #connects-dash .section-header .carrot {
    transition: transform 0.5s ease-out;
  }
  #connects-dash .section {
    width: 100%;
    text-align: center;
  }
  #connects-dash .section .section-thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: flex-start;
    padding-left: 3vw;
    max-height: 29.156vw;
    overflow: hidden;
  }
  #connects-dash .section .section-thumbnails.show {
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
  }
  #connects-dash .section .section-thumbnails.hide {
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
    visibility: hidden;
  }
  #connects-dash .section .section-thumbnails.expanded {
    max-height: none;
    overflow: visible;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper {
    box-sizing: border-box;
    margin-bottom: 1vh;
    margin-right: 3vw;
    width: 16.4vw;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .platform-name {
    margin-top: 0.5vh;
    text-align: center;
    font-size: 1.5vh;
    line-height: 1.75vh;
    height: 3.5vh;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper {
    position: relative;
    height: 29.156vw;
    width: 100%;
    border: 1px solid #fff;
    border-radius: 2vh;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper {
    background: rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    min-height: 29.156vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1.44vw 0 9.36vw 0;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper .header-image {
    display: block;
    width: 12.96vw;
    height: 7.2vw;
    object-fit: contain;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper .center-image {
    display: block;
    width: 8.64vw;
    height: 8.64vw;
    object-fit: cover;
    border-radius: 50%;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper .center-image.no-round {
    border-radius: 0;
    object-fit: contain;
  }
}
@media screen and (orientation: landscape) {
  #connects-dash .section {
    width: 100%;
    text-align: center;
  }
  #connects-dash .section .section-thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: flex-start;
    padding-left: 1vw;
    overflow: hidden;
  }
  #connects-dash .section .section-thumbnails.show {
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
  }
  #connects-dash .section .section-thumbnails.hide {
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
    visibility: hidden;
  }
  #connects-dash .section .section-thumbnails.expanded {
    max-height: none;
    overflow: visible;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper {
    box-sizing: border-box;
    margin-bottom: 1vh;
    margin-right: 1vw;
    width: 13.5vh;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .platform-name {
    margin-top: 0.5vh;
    text-align: center;
    font-size: 1.5vh;
    line-height: 1.75vh;
    height: 3.5vh;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper {
    position: relative;
    height: 24vh;
    width: 100%;
    border: 1px solid #fff;
    border-radius: 1vh;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper {
    background: rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    min-height: 24vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1.5vh 0 8vh 0;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper .header-image {
    display: block;
    width: 11.5vh;
    height: 6vh;
    object-fit: contain;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper .center-image {
    display: block;
    width: 8vh;
    height: 8vh;
    object-fit: cover;
    border-radius: 50%;
  }
  #connects-dash .section .section-thumbnails .platform-wrapper .preview-wrapper .shadow-wrapper .center-image.no-round {
    border-radius: 0;
    object-fit: contain;
  }
  #content-dash .section-thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: flex-start;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    max-height: 39vw;
    overflow: hidden;
  }
  #content-dash .section-thumbnails.show {
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
  }
  #content-dash .section-thumbnails.hide {
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in;
    visibility: hidden;
  }
  #content-dash .section-thumbnails.expanded {
    max-height: 1500px;
    overflow: visible;
  }
  #content-dash .section-thumbnails .preview-wrapper {
    position: relative;
    min-height: 29.156vw;
    width: 16.4vw;
    margin: 0 1.5vw;
  }
  #content-dash .section-thumbnails .preview-wrapper .tag {
    position: absolute;
    top: -3%;
    right: -10%;
    width: 5vw;
    height: 5vw;
    border-radius: 2vw;
    color: #000;
    background-color: #4497f7;
    font-size: 110%;
    font-weight: 600;
    letter-spacing: -0.5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #content-dash .section-thumbnails .preview {
    width: 100%;
    min-height: 29.156vw;
    border: 1px solid #fff;
    border-radius: 3vw;
    overflow: hidden;
  }
  #content-dash .section-thumbnails .preview .shadow-wrapper {
    background: rgba(0, 0, 0, 0.3);
    min-height: 29.156vw;
    width: 100%;
  }
}
#soccer #content-list {
  color: white;
  font-size: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-inline: 1.5vw;
  max-height: 76%;
  width: 100%;
  overflow-y: scroll;
}

#soccer #content-list .item-2col {
  color: #fff;
  width: 40%;
}

#soccer .small-circle-tag {
  background-color: #fff;
  width: 0.5vw;
  height: 0.5vw;
  border-radius: 50%;
  margin-right: 1vw;
}

#soccer .footer-button {
  width: auto !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  margin: 0 !important;
}

#soccer #content-top,
#people-content #content-top {
  width: 95%;
  display: flex;
  color: white;
  font-size: 1.1vw;
  font-weight: 500;
  position: absolute;
  top: 10vh;
}

#soccer .bottom-popup,
#common-card .bottom-popup,
#bod .bottom-popup,
#people-content .bottom-popup {
  width: 100%;
  height: 36vh;
  position: absolute;
  bottom: 0;
  color: #fff;
  font-size: 1.1vw;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.85);
  flex-direction: column;
  display: none;
  text-align: center;
}

#soccer .bottom-popup input[type=radio],
#common-card .bottom-popup input[type=radio] {
  display: none;
}

#soccer .bottom-popup input[type=radio] + label,
#common-card .bottom-popup input[type=radio] + label {
  background: url(../assets/_Icons/check-gray.png);
  border-radius: 50%;
  width: 1.5vw;
  height: 1.5vw;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 1vw;
}

#soccer .bottom-popup input[type=radio]:checked + label,
#common-card .bottom-popup input[type=radio]:checked + label {
  background-image: url(../assets/_Icons/check-blue.png);
}

#soccer .soccer-input,
#common-card .soccer-input,
#bod .soccer-input {
  font-family: sourceSansPro;
  background: transparent;
  outline: none;
  border: none;
  color: #4497f7;
  font-weight: 600;
  font-size: 100%;
  padding-bottom: 0;
}

#soccer .soccer-input::placeholder,
#common-card .soccer-input::placeholder,
#bod .soccer-input::placeholder {
  color: #4497f7;
  font-size: 100%;
  font-weight: 600;
}

.player-dropdown {
  background: transparent;
  border-radius: 3px;
  border: 1px solid #4497f7;
  color: white;
  font-weight: 600;
  display: flex;
  height: 3.25vh;
  text-indent: 5%;
  font-size: 110%;
}

.player-dropdown-carrot {
  position: absolute;
  right: 1.5vw;
  top: 50%;
  transform: translateY(-50%);
  width: 5vw;
  height: 6vw;
}

#soccer .step {
  margin: 7vh 0;
}

#soccer .step p,
#soccer .step h4 {
  margin: 0;
}

#soccer .step p {
  margin-top: 1vh;
  line-height: 1.3;
}

#soccer .step h4 {
  text-decoration: underline;
}

.player-position-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px white solid;
  border-radius: 1vh;
  font-size: 90%;
  height: 10vh;
  line-height: 90%;
  padding-top: 1vh;
  text-align: center;
  cursor: pointer;
  width: 10vh;
  z-index: 2;
}
.player-position-box img {
  display: block;
  height: 2.5vh;
  margin: 1vh auto;
  object-fit: contain;
}

.player-triangle {
  cursor: pointer;
}

.player-card_container {
  z-index: 100;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.player-card_main {
  position: relative;
  width: 43vw;
  height: 22.5vw;
  margin-inline: auto;
  border: 1px solid #f1f1f1;
  border-radius: 2.2vw;
  overflow: hidden;
  font-weight: 600;
}

#player-card_background {
  width: 100%;
  height: 100%;
  background: url("https://static.slcket.com/Alphapointe/ap-no-portrait.png");
  z-index: -1;
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(50%) blur(4px);
  border-radius: 2.2vw;
}

.player-card_name {
  text-transform: uppercase;
  margin-left: auto;
  font-size: 2vw;
  text-align: right;
  padding: 0.5vw 1vw;
}

.player-card_split {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#player-card_image {
  margin: 2.3vw 1.1vw 0 0vw;
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

.player-card_details {
  width: 31vw;
  height: 25vw;
  background-color: #181818 !important;
  margin-right: -4.5vw;
  border-top-left-radius: 2.25vw;
}

.player-card_location-details {
  font-size: 1.15vw !important;
}

.player-card_details_content {
  font-family: SourceSansPro;
  margin-right: 3vw;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-top: -2vh;
  margin-right: 5vw;
  height: 100%;
  padding-left: 1vw;
}
.player-card_details_content * {
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
}
.player-card_details_content div:nth-child(1) {
  margin-bottom: 2.5vh;
}
.player-card_details_content div:nth-child(2) {
  margin-bottom: 2.5vh;
}
.player-card_details_content div:nth-child(2) {
  color: #fff !important;
}

.player-card_email {
  text-transform: uppercase;
}

.player-card_link {
  font-size: 1.5vw;
  margin: 1.5vh 0;
}

.player-card_employer {
  font-size: 1.25vw;
}

.player-card_job {
  font-size: 1.25vw;
}

.about-disclaimer {
  position: absolute;
  margin-top: 5vh;
  font-size: 1.2vw;
  padding-inline: 12vw;
}

@media screen and (max-width: 767px) {
  .player-card_details_content * {
    margin: 0.4vh 0;
  }
  .player-card_link {
    font-size: 2vw;
  }
  .player-card_main {
    width: 85vw;
    height: 45vw;
    border-radius: 5vw;
  }
  .player-card_details {
    width: 52vw;
    height: 40vw;
  }
  .player-card_name {
    font-size: 4.4vw;
    padding-right: 3.25vw;
  }
  #player-card_image {
    margin: 3.6vw 3.6vw 0 0vw;
    width: 26vw;
    height: 26vw;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
  }
  .player-card_title {
    font-size: 2.9vw;
  }
  .player-card_employer {
    font-size: 2.25vw;
  }
  .player-card_job {
    font-size: 2.25vw;
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
  .player-card_main {
    width: 70vw;
    height: 38vw;
  }
  .player-card_name {
    font-size: 3.75vw;
  }
  #player-card_image {
    margin: 3vw 2vw 0 2vw;
    width: 20vw;
    height: 20vw;
  }
  .player-card_details_content {
    margin-top: -9vh;
    margin-right: 8vw;
  }
}
/* mixins */
/* variables */
/* global variables for colors, etc*/
/*deals*/
/*typography*/
/* 2022 */
.core-page-text-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wheel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

.wheel-outer {
  position: relative;
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  border: 1.7vw solid #717171;
}

.wheel-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1.05vw solid #717171;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-link {
  position: absolute;
  background-color: black;
  width: 7.5vw;
  height: 7.5vw;
  border-radius: 50%;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 1.2vw;
  font-family: "sourceSansPro-bold";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: color 350ms, border-color 350ms;
}

.circle-link:hover {
  color: #e9222d;
  border-color: #e9222d;
}

#circle-link-1 {
  top: -4.5vw;
  left: 50%;
  transform: translateX(-50%);
}

#circle-link-2 {
  right: -0.3vw;
  top: 0;
}

#circle-link-3 {
  right: -4.5vw;
  top: 50%;
  transform: translateY(-50%);
}

#circle-link-4 {
  right: -0.3vw;
  bottom: 0;
}

#circle-link-5 {
  bottom: -4.5vw;
  left: 50%;
  transform: translateX(-50%);
}

#circle-link-6 {
  left: -4, 5vw;
  bottom: 0vw;
}

#circle-link-7 {
  left: -4.5vw;
  top: 50%;
  transform: translateY(-50%);
}

#circle-link-8 {
  left: -0.3vw;
  top: 0vw;
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .wheel-outer {
    width: 40vh;
    height: 40vh;
    border-width: 2.4vh;
  }
  .wheel-inner {
    width: 25vh;
    height: 25vh;
    border-width: 1.2vh;
  }
  .circle-link {
    width: 9.5vh;
    height: 9.5vh;
    font-size: 1.25vh;
    border-width: 0.21vw;
  }
  #circle-link-1 {
    top: -5.85vh;
  }
  #circle-link-2 {
    right: -0.6vh;
    top: -0.6vh;
  }
  #circle-link-3 {
    right: -5.85vh;
  }
  #circle-link-4 {
    right: -0.6vh;
    bottom: -0.6vh;
  }
  #circle-link-5 {
    bottom: -5.85vh;
  }
  #circle-link-6 {
    left: -0.6vh;
    bottom: -0.6vh;
  }
  #circle-link-7 {
    left: -5.85vh;
  }
  #circle-link-8 {
    left: -0.6vh;
    top: -0.6vh;
  }
}
@media screen and (max-width: 991px) {
  .wheel-outer {
    width: 23vw;
    height: 23vw;
    border: 1.5vw solid #717171;
  }
  .wheel-inner {
    border: 0.8vw solid #717171;
    width: 14.5vw;
    height: 14.5vw;
  }
  .circle-link {
    width: 5.25vw;
    height: 5.25vw;
    border-width: 0.3vw;
    font-size: 0.75vw;
  }
  #circle-link-1 {
    top: -3.25vw;
    left: 50%;
  }
  #circle-link-2 {
    right: -0.75vw;
    top: -0.75vw;
  }
  #circle-link-3 {
    right: -3.25vw;
    top: 50%;
  }
  #circle-link-4 {
    right: -0.75vw;
    bottom: -0.75vw;
  }
  #circle-link-5 {
    bottom: -3.25vw;
    left: 50%;
  }
  #circle-link-6 {
    left: -0.75vw;
    bottom: -0.75vw;
  }
  #circle-link-7 {
    left: -3.25vw;
    top: 50%;
  }
  #circle-link-8 {
    left: -0.75vw;
    top: -0.75vw;
  }
}
/*
@media screen and (max-width: 767px) {

    .wheel {
        margin-top: 10vw;
        margin-bottom: 0;
    }

    .wheel-outer {
        width: 65vw;
        height: 65vw;
        border-width: 3.8vw;
    }

    .wheel-inner {
        width: 41vw;
        height: 41vw;
        border-width: 2.2vw;
    }

    .circle-link {
        border-width: 0.5vw;
        font-size: 2.2vw;
        width: 17vw;
        height: 17vw;
    }

    #circle-link-1 {
        top: -11.5vw;
    }

    #circle-link-2 {
        right: -3vw;
        top: -2vw;
    }

    #circle-link-3 {
        right: -11.5vw;
    }

    #circle-link-4 {
        right: -3vw;
        bottom: -2vw;
    }

    #circle-link-5 {
        bottom: -11.5vw;
    }

    #circle-link-6 {
        left: -3vw;
        bottom: -2vw;
    }

    #circle-link-7 {
        left: -11.5vw;
    }

    #circle-link-8 {
        left: -3vw;
        top: -2vw;
    }
}

@media screen and (max-width: 479px) {

    .circle-link {
        border-width: 0.65vw;
    }
}
*/
#settings-header {
  position: absolute;
  top: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.settings-circle {
  position: relative;
  width: 4.25vw;
  height: 4.25vw;
  border-radius: 50%;
  background-color: #fff;
  border: 0.6vw solid #e9222d;
  margin-right: 1vw;
}

.settings-circle_img {
  background-color: #e9222d;
  border-radius: 50%;
  padding: 7.5%;
  position: absolute;
  width: 77%;
  height: 77%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#settings-header-text {
  color: #e9222d;
  font-size: 3.5vw;
  line-height: 1;
  font-weight: 400;
  font-family: Rockwell;
}

.settings-item {
  color: #4497f7;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.25vw;
}

#partners-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-left: 5vw;
}

.contact-card-container {
  width: 80%;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-weight: bold;
  font-size: 100%;
  justify-content: center;
  font-size: 3vw !important;
  margin: 1vw auto;
}
.contact-card-container .player-card__main {
  border: 1px solid #f1f1f1;
  border-radius: 1.5vw;
  overflow: hidden;
  font-size: 2vw;
  font-family: "BebasNeue";
  position: relative;
}
.contact-card-container #overlay {
  z-index: 0;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.contact-card-container #overlay::before {
  z-index: -1;
}
.contact-card-container .image-background {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  filter: brightness(50%) blur(4px);
}
.contact-card-container .player-card__detail {
  text-align: right;
  font-size: 1.5vw;
  position: relative;
  font-family: sourceSansPro-regular;
}
.contact-card-container .player-card__detail .player-card__title {
  text-align: right;
  line-height: unset;
  font-size: unset;
  height: unset;
  text-transform: uppercase;
}
.contact-card-container .player-card__detail .player-card__title div {
  font-size: 2vw !important;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  padding: 0.5vw 2vw;
}
.contact-card-container .player-card__detail .player-card__title input {
  font: inherit;
}
.contact-card-container .player-card__split {
  border: none !important;
  font-size: 100%;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: flex-start;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.contact-card-container .player-card__split #logo-image {
  border-radius: 50%;
  height: 100%;
}
.contact-card-container .player-card__split .player-card__image {
  border-radius: 0;
  height: 100%;
  margin-left: 0;
  object-fit: cover;
  height: 11vw;
  width: 11vw;
  margin-left: 0;
  object-fit: cover;
  margin: 1vw 1vw 0 1vw;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.6);
  background-size: cover;
  background-position: center;
}
.contact-card-container .player-card__split .player-card__detail-text {
  padding-bottom: 10px;
  text-align: right;
  border-radius: 0;
  width: 18vw;
  height: 9vw;
  padding: 4vw 2vw 4vw 4vw;
  background: #181818 !important;
  overflow: unset;
  border-radius: 1.5vw 0vw 0vw 0vw;
  font-size: 100%;
  font-weight: 400;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.contact-card-container .player-card__split .player-card__detail-text p {
  margin: 0;
}
.contact-card-container .player-card__split .player-card__detail-text p.lg {
  font-size: 1.5vw;
  font-weight: 600;
  line-height: 1;
}
.contact-card-container .player-card__split .player-card__detail-text .space {
  width: 100%;
  height: 2vw;
}
.contact-card-container .player-card__split .player-card__detail-text p.sm {
  font-size: 125%;
  margin: 0px;
}
.contact-card-container .player-card__split .player-card__detail-text p.blurb {
  text-transform: lowercase;
  font-family: SourceSansPro;
}
.contact-card-container .player-card__split .player-card__detail-text a {
  font-size: 1.1vw;
  display: block;
  font-weight: 600;
}
.contact-card-container .player-card__split .player-card__detail-text #heirarchy {
  font-weight: 600;
}

/* mixins */
/* variables */
/* global variables for colors, etc*/
/*deals*/
/*typography*/
/* 2022 */
.calendar .month-title {
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.5);
  width: 65vw;
  height: 50vh;
  margin-top: -55vh;
  margin-left: -35vw;
  padding-bottom: 2.5vh;
  border-radius: 50%;
  position: absolute;
  font-weight: 600;
}
.calendar #last-month {
  margin-right: 1vw;
  cursor: pointer;
}
.calendar #next-month {
  margin-left: 1vw;
  cursor: pointer;
}
.calendar .calendar-title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 3vh;
  font-weight: 600;
  color: white;
  font-size: 2vh;
}
.calendar .calendar-wrapper {
  height: 82vh;
  margin-top: 9vh;
  width: 100%;
  height: calc(82dvh - env(safe-area-inset-top));
  margin-top: calc(9dvh + env(safe-area-inset-top));
}
.calendar #calendar-filters-wrapper {
  display: flex;
  flex-direction: row;
}
.calendar #single-day {
  width: 100%;
  height: 100%;
  display: none;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  flex-direction: column;
}
.calendar #single-day .month {
  background: transparent;
  color: white;
  font-weight: bold;
  text-transform: lowercase;
  font-size: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.calendar #single-day .day-expanded {
  width: 12vw;
  height: 12vw;
  background: #e9222d;
  display: flex;
  flex-direction: column;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  line-height: 0.8;
  margin-left: 20px;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
}
.calendar #single-day .day-expanded .date {
  font-size: 30px;
}
.calendar #single-day #back_button {
  position: absolute;
  float: left;
  left: 20px;
}
.calendar #single-day .event-row {
  display: flex;
  flex-direction: row;
  color: white;
  font-weight: bold;
  align-items: flex-start;
  padding: 20px 20px 0;
  justify-content: space-between;
  width: calc(90vw - 40px);
}
.calendar #single-day .event-row .event-time {
  padding: 15px;
  background: #4497f7;
  color: white;
  font-weight: bold;
  font-size: 25px;
  border-radius: 7px;
  max-width: 20vw;
}
.calendar #single-day .event-row .event-time.red {
  background: #e9222d;
}
.calendar #single-day .event-row .event-time.green {
  background: rgb(20, 171, 28);
}
.calendar #single-day .event-row .event-detail {
  width: calc(100% - 32vw);
  display: flex;
  padding: 5px;
  flex-direction: column;
  align-items: flex-start;
  background: #4497f7;
  border-radius: 20px;
  width: calc(100% - 28vw);
  display: flex;
  padding: 5px;
  flex-direction: column;
  align-items: center;
  background: #09f;
  min-height: 55px;
  border-radius: 20px;
  justify-content: center;
}
.calendar #single-day .event-row .event-detail.red {
  background: #e9222d;
}
.calendar #single-day .event-row .event-detail.green {
  background: rgb(20, 171, 28);
}
.calendar #single-day .event-row .event-detail .event-title {
  font-weight: bold;
  font-size: 20px;
}
.calendar #single-day .event-row .event-detail .event-location {
  font-weight: normal;
  font-size: 15px;
}
.calendar #single-day #add-button {
  font-size: 60px;
  position: absolute;
  bottom: 0;
  right: 20px;
  font-weight: 900;
  color: #e9222d;
}
.calendar .calendar-months {
  width: 5%;
  background: grey;
  height: 60%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  justify-content: space-evenly;
  border-radius: 20px;
  align-items: center;
}
.calendar .calendar-months div {
  color: white;
  font-weight: bold;
  overflow: visible;
  width: 100%;
  font-size: 15px;
}
.calendar .calendar-months div.active {
  border-radius: 50%;
  background: #4497f7;
}
.calendar #filter-fluid2 {
  overflow-x: scroll;
  display: flex;
  margin-top: 5px;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  align-items: center;
}
.calendar #filter-fluid2 label {
  font-size: 75%;
  width: auto;
  margin-left: 10px;
  white-space: nowrap;
}
.calendar #filter-fluid2 {
  bottom: 90px;
}
.calendar #list-view {
  width: 100vw;
  border: 0;
  top: 0;
  flex-direction: column;
  margin-top: 0%;
  height: 70%;
  background: black;
  right: -100vw;
  display: flex;
  align-items: center;
  position: absolute;
  height: 72%;
  z-index: 0;
  padding-top: 20%;
}
.calendar #list-view #list-contents {
  display: flex;
  margin-top: 10vh;
  flex-direction: column;
  align-items: center;
}
.calendar table {
  width: 28vw;
  border: 0;
  height: 70vh;
}
.calendar table thead {
  padding-bottom: 2vh;
}
.calendar table .month {
  background: #e9222d;
  color: white;
  font-weight: bold;
  text-transform: lowercase;
  font-size: 30px;
  height: 50px;
}
.calendar table th {
  height: 8vw;
  border: none;
  border-bottom: 0;
}
.calendar table tr {
  border-top: 0;
  font-size: 4vw;
  font-weight: bold;
}
.calendar table td {
  padding: 0;
  vertical-align: top;
  text-align: center;
  border: 0;
  font-size: 100%;
  color: #fff;
  border: 0;
  position: relative;
}
.calendar table td span {
  border: 1px solid white;
  border-radius: 0.5vw;
  width: 85%;
  height: 90%;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 3%;
  margin-left: 3%;
}
.calendar table td span.disabled {
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  opacity: 0;
}
.calendar table td span.future {
  background: rgba(255, 255, 255, 0.5);
  border-color: transparent;
}
.calendar table td span.complete {
  background: #23e823;
}
.calendar table td span.active {
  background: transparent;
  cursor: pointer;
}
.calendar table td span.active.current-plan-day {
  border: 3px solid #fff;
}
.calendar table td span.active .dot {
  background-color: #4497f7;
}
.calendar table td span.active .status-check {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 25%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.calendar table td span.active .status-check.green {
  background-image: url("images/icons/2022/save-green@3x.png");
}
.calendar table td span.active .status-check.red {
  background-image: url("images/icons/2022/save-red@3x.png");
}
.calendar table td span.active .status-check.yellow {
  background-image: url("images/icons/2022/save-yellow@3x.png");
}
.calendar table td span.active .status-check.white {
  background-image: url("images/icons/2022/save@3x.png");
}
.calendar table td span.active .plan-day-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 85%;
  color: #fff;
  font-weight: 600;
  width: 100%;
  z-index: 100;
}
.calendar table td span.today {
  border: 3px solid white;
  margin-left: 0;
  margin-top: 0;
}
.calendar table td span {
  /*
  &.current{
    border-color:$slcket-blue;
    background:$slcket-blue;

    .day-num{
      color:black;

    }

    .dot{
      background-color:white;
    }
  }
  */
}
.calendar table td span .day-num {
  padding-left: 0.75vh;
  font-weight: 600;
  font-size: 1.75vh;
  line-height: 2vh;
  color: white;
  width: 100%;
  text-align: left;
}
.calendar table td span .day-title {
  text-overflow: ellipsis;
  font-size: 1.75vh;
  font-weight: 500;
  line-height: 2vh;
  position: absolute;
  left: 0.25vw;
  bottom: 1vh;
  color: white;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: -0.5px;
}
.calendar table td span .day-multiple {
  border-top: 1px white solid;
  box-sizing: border-box;
  margin-top: 0.5vh;
}
.calendar table td span .day-multiple div {
  text-overflow: ellipsis;
  font-size: 1.75vh;
  font-weight: 500;
  line-height: 2vh;
  color: white;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: -0.5px;
  border-bottom: 1px white solid;
  padding-left: 0.25vw;
  box-sizing: border-box;
  text-align: left;
  background: rgba(0, 0, 0, 0.4);
}
.calendar table td span .dot {
  border-radius: 50%;
  height: 10px;
  position: absolute;
  bottom: 1vw;
  left: 1vw;
  width: 10px;
  background-color: #4497f7;
}
.active .calendar table td span .dot {
  background-color: #f1f1f1;
}
.calendar table td span .check {
  height: 15px;
  position: absolute;
  bottom: 1vw;
  left: 1vw;
  width: 15px;
  content: "✓";
  color: #ffdc01;
  background-size: contain;
  background-repeat: no-repeat;
}
.calendar table td > div {
  text-align: center;
}
.calendar table td.disabled {
  color: #cccccc;
  opacity: 0;
}
.calendar table td.event {
  color: rgb(0, 208, 45);
}
.calendar table td.home {
  color: #e9222d;
}
.calendar table td.away {
  color: #4497f7;
}
.calendar .day-title {
  flex-direction: row;
  align-items: center;
}
.calendar .day-title .day-name {
  border-radius: 20px;
  padding: 10px;
  background-color: #09f;
  color: #fff;
  display: flex;
  text-align: center;
  font-weight: bold;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-left: 20px;
  width: calc(100% - 30vw);
}
@media screen and (orientation: portrait) {
  .calendar #month-title {
    margin-top: 1vh;
  }
  .calendar #last-month {
    margin-right: 3vw;
  }
  .calendar #next-month {
    margin-left: 3vw;
  }
  .calendar #calendar-view {
    height: 62.5dvh;
  }
  .calendar table {
    width: calc(100% - 4vw);
    border: 0;
    margin-left: 2vw;
    margin-top: 0;
    height: 62.5dvh;
  }
  .calendar table thead {
    padding-bottom: 2vh;
  }
  .calendar table .month {
    background: #e9222d;
    color: white;
    font-weight: bold;
    text-transform: lowercase;
    font-size: 30px;
    height: 50px;
  }
  .calendar table tr {
    border-top: 0;
  }
  .calendar table td {
    padding: 0;
    vertical-align: top;
    text-align: center;
    border: 0;
    font-size: 100%;
    border: 0;
    position: relative;
  }
  .calendar table td span {
    border: 1px solid white;
    border-radius: 1vh;
    width: 85%;
    height: 90%;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 3%;
    margin-left: 3%;
  }
  .calendar table td span.yellow-border {
    border-color: #ffdd00 !important;
  }
  .calendar table td span.green-border {
    border-color: #23e823 !important;
  }
  .calendar table td span.disabled {
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    opacity: 0;
  }
  .calendar table td span.future {
    background: rgba(255, 255, 255, 0.5);
    border-color: transparent;
  }
  .calendar table td span.complete {
    background: #23e823;
  }
  .calendar table td span.active {
    background: transparent;
  }
  .calendar table td span.active.current-plan-day {
    border: 3px solid #fff;
  }
  .calendar table td span.active .dot {
    background-color: #4497f7;
  }
  .calendar table td span.active .status-check {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 25%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .calendar table td span.active .status-check.green {
    background-image: url("images/icons/2022/save-green@3x.png");
  }
  .calendar table td span.active .status-check.red {
    background-image: url("images/icons/2022/save-red@3x.png");
  }
  .calendar table td span.active .status-check.yellow {
    background-image: url("images/icons/2022/save-yellow@3x.png");
  }
  .calendar table td span.active .status-check.white {
    background-image: url("images/icons/2022/save@3x.png");
  }
  .calendar table td span.active .plan-day-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 85%;
    color: #fff;
    font-weight: 600;
    width: 100%;
    z-index: 100;
  }
  .calendar table td span.today {
    border: 3px solid white;
    margin-left: 0;
    margin-top: 0;
  }
  .calendar table td span {
    /*
    &.current{
      border-color:$slcket-blue;
      background:$slcket-blue;

      .day-num{
        color:black;

      }

      .dot{
        background-color:white;
      }
    }*/
  }
  .calendar table td span .day-num {
    text-align: left;
    padding-left: 1vw;
    font-weight: 600;
    font-size: 1.75vh;
    line-height: 2vh;
    color: white;
    width: auto;
  }
  .calendar table td span .day-title {
    text-overflow: ellipsis;
    font-size: 1.25vh;
    font-weight: 500;
    line-height: 1.35vh;
    position: absolute;
    left: 0.25vw;
    bottom: 1vw;
    color: white;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: -0.5px;
  }
  .calendar table td span .day-multiple {
    border-top: 1px white solid;
    box-sizing: border-box;
    margin-top: 1vh;
  }
  .calendar table td span .day-multiple div {
    text-overflow: ellipsis;
    font-size: 1.25vh;
    font-weight: 500;
    line-height: 1.35vh;
    color: white;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: -0.5px;
    border-bottom: 1px white solid;
    padding: 1px;
    box-sizing: border-box;
    text-align: left;
    background: rgba(0, 0, 0, 0.4);
    padding-left: 0.25vw;
  }
  .calendar table td span .dot {
    border-radius: 50%;
    height: 10px;
    position: absolute;
    bottom: 1vw;
    left: 1vw;
    width: 10px;
    background-color: #4497f7;
  }
  .active .calendar table td span .dot {
    background-color: #f1f1f1;
  }
  .calendar table td span .check {
    height: 15px;
    position: absolute;
    bottom: 1vw;
    left: 1vw;
    width: 15px;
    content: "✓";
    color: #ffdc01;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .calendar table td > div {
    text-align: center;
  }
  .calendar table td.disabled {
    color: #cccccc;
    opacity: 0;
  }
  .calendar table td.event {
    color: rgb(0, 208, 45);
  }
  .calendar table td.home {
    color: #e9222d;
  }
  .calendar table td.away {
    color: #4497f7;
  }
  .calendar table .weekday-label {
    color: white;
    padding: 1px;
    width: 6vw;
    height: 6vw;
    font-size: 100%;
    line-height: 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: lowercase;
  }
  .calendar .weekday-label {
    color: white;
    padding: 1px;
    width: 6vw;
    height: 6vw;
    font-size: 100%;
    line-height: 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: lowercase;
  }
  .calendar .calendar-wrapper {
    height: calc(100% - (40vw + env(safe-area-inset-top)));
    width: 100vw;
    position: absolute;
    bottom: 23vw;
    margin-top: 0;
  }
  .calendar .calendar-wrapper .calendar-header {
    display: flex;
    font-size: 1.75vh;
    line-height: 2vh;
    justify-content: space-evenly;
    margin-bottom: 2vh;
  }
  .calendar .calendar-wrapper .calendar-table {
    margin-top: 0;
    border-collapse: collapse;
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  .calendar #last-month {
    margin-right: 2vw;
  }
  .calendar #next-month {
    margin-left: 2vw;
  }
  .calendar #calendar-view {
    /*height: 65.5dvh;*/
    height: 72dvh;
  }
  .calendar .calendar-wrapper {
    height: calc(84dvh - env(safe-area-inset-top));
    bottom: 8.5dvh;
  }
  .calendar .calendar-wrapper .calendar-header {
    padding-left: 13vw;
    padding-right: 13vw;
  }
  .calendar .calendar-wrapper .calendar-table {
    margin-left: auto;
    margin-right: auto;
    /*width: 66vw;*/
    width: 72vw;
  }
}

.weekday-label {
  color: white;
  padding: 1px;
  width: 3.4vw;
  height: 4vw;
  font-size: 100%;
  line-height: 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: lowercase;
}

#calendar-view, #list-view {
  transition: all 0.2s ease-in-out;
}

.calendar-footer {
  background: #101010;
  height: 25%;
}
.calendar-footer .calendar-options {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.calendar-footer .calendar-option {
  width: auto;
  padding: 1.5vw 3vw;
  border-radius: 2vw;
  color: #666666;
  margin-top: 2vh;
}
.calendar-footer .calendar-option.active {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.event-card {
  width: 95vw;
  height: 75vw;
  border-radius: 3vw;
  position: relative;
  margin-top: -20vh;
  margin-left: 2.5vw;
  font-family: BebasNeue;
  text-align: center;
  overflow: hidden;
  text-transform: uppercase;
  color: white;
  border: 1px solid #101010;
}
.event-card .event-title {
  font-size: 300%;
  color: white;
  line-height: 1.3;
  padding-top: 1vh;
}
.event-card .event-split {
  width: 100%;
  display: flex;
  align-items: center;
  height: calc(100% - 14.5vw);
}
.event-card .event-split div {
  width: 50%;
}
.event-card .event-split .event-image {
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 50%;
  background-position: center;
}
.event-card .event-split .event-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  height: 100%;
}
.event-card .event-split .event-details h3 {
  line-height: 120%;
  font-size: 175%;
}
.event-card .event-split .event-details p {
  margin: 0;
  font-size: 125%;
}
.event-card .background-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  backgrond-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.3);
  background-position: center;
  left: 0;
  top: 0;
  z-index: -1;
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  filter: brightness(50%) blur(4px);
}

.description {
  font-size: 115%;
  line-heigt: 115%;
  margin-top: 2vh;
}

.attendance-options {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 18vw;
}
.attendance-options .rsvp-radio {
  display: none;
}
.attendance-options .rsvp-radio + label {
  border-radius: 3vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 10px;
  padding: 1.5vw;
}
.attendance-options .rsvp-radio + label.mod {
  border-radius: 15px;
  padding: 10px;
  border: 2px solid white;
}
.attendance-options .rsvp-radio:checked + label {
  background-color: #4497f7;
}
.attendance-options .rsvp-radio:disabled + label {
  filter: invert(50%);
}
.attendance-options .radio-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.attendance-options #rsvp-yes-label {
  background-color: #23e823;
  color: black;
  border-radius: 50%;
  padding: 1.5vw;
}
.attendance-options #rsvp-no-label {
  background-color: #e9222d;
  color: black;
  border-radius: 50%;
  padding: 1.5vw;
}
.attendance-options #rsvp-maybe-label {
  background-color: white;
  color: black;
  padding: 1.5vw 2vw;
}

#user_portrait_tutorial {
  display: block;
}

#wheel_wrapper.tutorial {
  /*
  #user_portrait{
    z-index:99!important;
  }

  #middle-text-wrapper{
    z-index:99 !important;
  }
  */
}
#wheel_wrapper.tutorial #user_portrait_tutorial {
  background-color: #fff;
  border-radius: 50%;
  width: 10vw;
  height: 10vw;
  border: none;
  position: absolute;
  left: 6.4vw;
  top: 6.4vw;
  z-index: 1000;
  margin: 0.9vw;
  opacity: 1;
  cursor: pointer;
}
#wheel_wrapper.tutorial #user_portrait_tutorial.fade {
  opacity: 0;
  transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -webkit-transition: opacity 1s ease-out;
}
#wheel_wrapper.tutorial #user_portrait_tutorial.hidden {
  opacity: 0;
  transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -webkit-transition: opacity 1s ease-out;
}
#wheel_wrapper.tutorial #user_portrait_tutorial #middle_text_wrapper_tutorial {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
  bottom: 5%;
}
#wheel_wrapper.tutorial #user_portrait_tutorial #middle_text_tutorial_1, #wheel_wrapper.tutorial #user_portrait_tutorial #middle_text_tutorial_2 {
  color: #06415b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  word-break: break-word;
  vertical-align: middle;
  font-family: SourceSansPro;
  font-weight: 600;
  line-height: 150%;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#wheel_wrapper.tutorial #user_portrait_tutorial #middle_text_tutorial_1.small, #wheel_wrapper.tutorial #user_portrait_tutorial #middle_text_tutorial_2.small {
  font-size: 145%;
  line-height: 125%;
}
#wheel_wrapper.tutorial #user_portrait_tutorial #middle_text_tutorial_1 .inkfree, #wheel_wrapper.tutorial #user_portrait_tutorial #middle_text_tutorial_2 .inkfree {
  font-weight: normal;
  font-family: Inkfree;
  font-style: normal;
  font-weight: 600;
  pointer-events: none;
}
#wheel_wrapper.tutorial #middle_text_tutorial_1, #wheel_wrapper.tutorial #middle_text_tutorial_2, #wheel_wrapper.tutorial #user_portrait {
  transition: opacity ease-in-out 1s;
}
#wheel_wrapper.tutorial #middle_text_tutorial_1, #wheel_wrapper.tutorial #middle_text_tutorial_2, #wheel_wrapper.tutorial .answer_text {
  opacity: 1;
}
#wheel_wrapper.tutorial #middle_text_tutorial_1.hidden, #wheel_wrapper.tutorial #middle_text_tutorial_2.hidden, #wheel_wrapper.tutorial .answer_text.hidden {
  opacity: 0;
}
#wheel_wrapper.tutorial #middle_text_tutorial_2 {
  font-size: 1.4vw !important;
}
#wheel_wrapper.tutorial .answer-text {
  transition: opacity 0s;
}
#wheel_wrapper.tutorial .answer-text.hidden {
  transition: opacity ease-in-out 2s;
}

/* mixins */
/* variables */
/* global variables for colors, etc*/
/*deals*/
/*typography*/
/* 2022 */
#modal-layer-dynamic.ksysa-style .soccer-input {
  background: transparent;
  outline: none;
  border: none;
  color: #4497f7;
  font-weight: 600;
  font-size: 1.5vh;
  font-family: SourceSansPro;
  line-height: 1.75vh;
}
#modal-layer-dynamic.ksysa-style .soccer-input.invalid {
  color: #de002b;
}
#modal-layer-dynamic.ksysa-style .soccer-input.invalid::placeholder {
  color: #de002b;
}
#modal-layer-dynamic.ksysa-style .soccer-input::placeholder {
  color: #4497f7;
}
#modal-layer-dynamic.ksysa-style .slcket-select-input {
  font-weight: 600;
  font-size: 1.5vh;
  cursor: pointer;
}
#modal-layer-dynamic.ksysa-style .switch {
  position: relative;
  display: inline-block;
  width: 7vw;
  height: 1.575vw;
  margin-left: 1.5vw;
}
#modal-layer-dynamic.ksysa-style .switch.small {
  width: 6vh;
  height: 2.5vh;
  margin-left: 0.5vw;
}
#modal-layer-dynamic.ksysa-style .switch.small .slider {
  border-radius: 0.75vh;
}
#modal-layer-dynamic.ksysa-style .switch.small .slider-text {
  font-size: 1.25vh;
}
#modal-layer-dynamic.ksysa-style .switch.small .slider:before {
  position: absolute;
  content: "";
  height: 2vh;
  width: 2.75vh;
  right: -0.75vw;
  bottom: 0.25vh;
  border-radius: 0.75vh;
}
#modal-layer-dynamic.ksysa-style .switch.small input:checked + .slider {
  background-color: #5cfc5c;
}
#modal-layer-dynamic.ksysa-style .switch.small input + .slider:before {
  -webkit-transform: translateX(-2vh);
  -ms-transform: translateX(-2vh);
  transform: translateX(-2vh);
}
#modal-layer-dynamic.ksysa-style .switch.small input:checked + .slider:before {
  -webkit-transform: translateX(-4.5vh);
  -ms-transform: translateX(-4.5vh);
  transform: translateX(-4.5vh);
}
#modal-layer-dynamic.ksysa-style .switch .input {
  opacity: 0;
  width: 0;
  height: 0;
}
#modal-layer-dynamic.ksysa-style .slider-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: #000;
  font-size: 1.5vh;
}
#modal-layer-dynamic.ksysa-style .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff3d3d;
  border-radius: 10px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#modal-layer-dynamic.ksysa-style .slider:before {
  position: absolute;
  content: "";
  height: 1.75vw;
  width: 3vw;
  right: 0.1vw;
  bottom: 0.5vh;
  background-color: #7a7a7a;
  border-radius: 6px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#modal-layer-dynamic.ksysa-style input:checked + .slider {
  background-color: #5cfc5c;
}
#modal-layer-dynamic.ksysa-style input:checked + .slider:before {
  -webkit-transform: translateX(-3.5vw);
  -ms-transform: translateX(-3.5vw);
  transform: translateX(-3.5vw);
}
#modal-layer-dynamic.ksysa-style #coach-details-crud-popup-layer,
#modal-layer-dynamic.ksysa-style #player-details-crud-popup-layer {
  transition: a 0.5s ease;
}
#modal-layer-dynamic.ksysa-style #coach-details-crud-popup-layer.expand-width,
#modal-layer-dynamic.ksysa-style #player-details-crud-popup-layer.expand-width {
  animation: expandWidth 0.5s ease forwards;
}
@keyframes expandWidth {
  0% {
    width: 0vw;
  }
  100% {
    width: 28vw;
  }
}
#modal-layer-dynamic.ksysa-style #coach-details-crud-popup-layer.remove-width,
#modal-layer-dynamic.ksysa-style #player-details-crud-popup-layer.remove-width {
  animation: removeWidth 0.5s ease forwards;
}
@keyframes removeWidth {
  0% {
    width: 28vw;
  }
  100% {
    width: 0vw;
  }
}
#modal-layer-dynamic.ksysa-style .soccer-checkbox-input {
  display: none;
}
#modal-layer-dynamic.ksysa-style .soccer-checkbox-span {
  display: inline-block;
  background-image: url(../images/icons/2022/save@3x.png);
  border-radius: 50%;
  width: 2vw;
  height: 2vw;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 1vw;
  cursor: pointer;
}
#modal-layer-dynamic.ksysa-style .soccer-checkbox-input:checked + span {
  background-image: url(../images/icons/2022/save-green@3x.png);
}
#modal-layer-dynamic.ksysa-style .player-dropdown {
  background: transparent;
  border-radius: 3px;
  color: white;
  font-weight: 600;
  display: flex;
  font-size: 1.5vh;
  padding: 0 !important;
  outline: none;
  cursor: pointer;
}
#modal-layer-dynamic.ksysa-style .player-dropdown-carrot {
  position: absolute;
  right: 0.5vw;
  top: 50%;
  transform: translateY(-50%);
  width: 2vw;
  height: 2vw;
}
#modal-layer-dynamic.ksysa-style .scrollable-text-subheader {
  padding: 0.5vh 1vw;
  background-color: rgba(0, 0, 0, 0.4);
  width: 64vw;
  margin-left: -1vw;
  margin-bottom: 2vh;
  box-sizing: border-box;
}
#modal-layer-dynamic.ksysa-style .nonscrollable-text-subheader {
  padding: 0.5vh 1vw;
  background-color: rgba(0, 0, 0, 0.4);
  width: 65vw;
  margin-bottom: 2vh;
  box-sizing: border-box;
}
@media screen and (orientation: portrait) {
  #modal-layer-dynamic.ksysa-style .scrollable-text-subheader, #modal-layer-dynamic.ksysa-style .nonscrollable-text-subheader {
    width: 100vw;
  }
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #modal-layer-dynamic.ksysa-style .pp-live-team-item {
    height: 14vh;
  }
  #modal-layer-dynamic.ksysa-style .pp-live-team-item #row-buttons {
    height: 10vh;
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  #modal-layer-dynamic.ksysa-style .pp-live-team-item {
    height: 12vh;
  }
  #modal-layer-dynamic.ksysa-style .pp-live-team-item #row-buttons {
    height: 8vh;
  }
}

.sport-entity-item {
  margin: 0.5vh 0;
  width: 100%;
  border-top: 1px rgba(99, 99, 99, 0.4) solid;
  border-bottom: 1px rgba(99, 99, 99, 0.4) solid;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 1.5vh;
  line-height: 1.75vh;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5vh 1vw;
  position: relative;
}
.sport-entity-item.disabled {
  filter: brightness(50%);
  pointer-events: none;
}

.bordered-entity-item {
  position: relative;
  color: #fff;
  font-weight: 600;
  border-top: 1px rgba(99, 99, 99, 0.4) solid;
  border-bottom: 1px rgba(99, 99, 99, 0.4) solid;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
}

.dash-entity-heading {
  display: flex;
  width: 100%;
  border-top: 1px rgba(99, 99, 99, 0.4) solid;
  border-bottom: 1px rgba(99, 99, 99, 0.4) solid;
  box-sizing: border-box;
  font-weight: 600;
  justify-content: space-between;
  color: white;
  padding: 0.5vh 3vw;
  margin-bottom: 1vh;
  margin-top: 2vh;
  background: rgba(0, 0, 0, 0.4);
}

@media screen and (orientation: portrait) {
  .sport-entity-item {
    padding: 0.5vh 3vw;
    font-size: 3vw;
    line-height: 3.5vw;
  }
  .pop-up-footer .modal {
    width: 100vw;
  }
}
#modal-layer-dynamic.slcket-style .text-md {
  font-size: 2vh;
  line-height: 2.5vh;
}
#modal-layer-dynamic.slcket-style .slcket-button {
  cursor: pointer;
  padding: 1vh 2vh;
  border: 1px solid white;
  font-size: 2.5vh;
  line-height: 2.5vh;
  border-radius: 0.5vh;
  opacity: 1;
  font-family: "Bebas-Neue";
}
#modal-layer-dynamic.slcket-style .slcket-button.no-border {
  border: none;
}
#modal-layer-dynamic.slcket-style .slcket-button:hover {
  color: #e9222d;
  border-color: #e9222d;
}
#modal-layer-dynamic.slcket-style .slcket-text-styles {
  height: 80vh;
  text-align: center;
}
#modal-layer-dynamic.slcket-style .slcket-text-styles h3 {
  font-size: 2.75vh;
  text-transform: uppercase;
}
#modal-layer-dynamic.slcket-style .slcket-text-styles ul {
  list-style-type: none;
  padding-left: 0;
}
#modal-layer-dynamic.slcket-style .slcket-text-styles ul li {
  padding-left: 0.5vw;
}
#modal-layer-dynamic.slcket-style .slcket-text-styles ul li:before {
  content: "- ";
  padding-right: 0.25vw;
}
#modal-layer-dynamic.slcket-style .button {
  font-family: "Bebas-Neue";
  font-size: 2.25vh;
  padding: 0.5vh 1.75vh;
  border: 1px solid #fff;
  border-radius: 3px;
  display: inline-block;
  background-color: transparent;
  transition: color 0.3s, border-color 0.3s;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
#modal-layer-dynamic.slcket-style .button.red {
  color: #e9222d;
  border-color: #e9222d;
}
#modal-layer-dynamic.slcket-style .button.no-border {
  font-size: 3vh;
  line-height: 3vh;
  border: none;
}
#modal-layer-dynamic.slcket-style .button:hover {
  color: #e9222d;
  border-color: #e9222d;
}
#modal-layer-dynamic.slcket-style .slcket-pin-horizontal {
  width: 3.5vh;
  margin-right: 7.5vh;
  filter: invert(1) !important;
  transform: rotate(90deg);
}
#modal-layer-dynamic.slcket-style .slcket-pin-horizontal.no-rotate {
  transform: none;
  margin-right: 1.5vh;
  width: 8vh;
}
#modal-layer-dynamic.slcket-style #volunteer-events-label {
  border: 2px solid #8d8d8d;
}
#modal-layer-dynamic.slcket-style .about-contact-btn {
  width: 20.3vw;
  height: 3.8vw;
  font-family: Bebas-Neue;
  font-size: 2.32vw;
  line-height: 2.42vw;
  border-radius: 1.74vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  border: 2px solid #8d8d8d;
  cursor: pointer;
}
#modal-layer-dynamic.slcket-style .about-contact-btn.selected {
  border-color: #e9222d;
}
#modal-layer-dynamic.slcket-style #about-contact-community .community-img {
  max-height: 8.12vw;
  width: auto;
  height: auto;
  margin-inline: 0.25vw;
  border: 1px solid white;
  border-radius: 1.5vh;
}
#modal-layer-dynamic.slcket-style .patent-btn {
  width: 9.86vw;
  height: 10.6vw;
  font-family: Bebas-Neue;
  border-radius: 3vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  border: 2px solid #8d8d8d;
}
#modal-layer-dynamic.slcket-style .patent-btn div {
  font-size: 5.8vw;
  line-height: 5.8vw;
}
#modal-layer-dynamic.slcket-style .patent-btn span {
  text-align: center;
  font-size: 1.45vw;
  line-height: 1.45vw;
  font-weight: 500;
}
#modal-layer-dynamic.slcket-style .issued-patent {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1vh 2vw;
  margin-bottom: 1.5vh;
  margin-inline: 0.5vw;
}
#modal-layer-dynamic.slcket-style .slcket-pin-vertical {
  width: 3.5vh;
  filter: invert(1) !important;
}
#modal-layer-dynamic.slcket-style .slcket-pin-text {
  font-size: 2.75vh;
  line-height: 3.5vh;
  font-family: Bebas-Neue;
}
#modal-layer-dynamic.slcket-style .grey-slcket-text-input {
  color: #fff;
  border: none;
  border-bottom: 1px solid #9b9b9b;
  background-color: transparent;
  outline: none;
  padding-bottom: 0.3vh;
  padding-top: 0;
  padding-left: 0;
  font-size: 2vh;
  font-weight: 600;
  line-height: 2.25vh;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  background-clip: padding-box;
}
#modal-layer-dynamic.slcket-style .grey-slcket-text-input.empty, #modal-layer-dynamic.slcket-style .grey-slcket-text-input::placeholder {
  color: #9b9b9b;
}
.ios #modal-layer-dynamic.slcket-style .grey-slcket-text-input:not([disabled]) {
  font-size: 16px;
  line-height: 18px;
}
#modal-layer-dynamic.slcket-style .grey-slcket-text-input[disabled] {
  -webkit-text-fill-color: #fff;
  color: #fff;
  opacity: 1;
}
#modal-layer-dynamic.slcket-style .dialogue-panel-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
}
#modal-layer-dynamic.slcket-style .dialogue-pane-landscape {
  height: 75dvh;
}
#modal-layer-dynamic.slcket-style .white-slcket-text-input {
  color: white;
  border: none;
  border-bottom: 1px solid white;
  background-color: transparent;
  outline: none;
  padding-bottom: 0.3vh;
  padding-top: 0;
  padding-left: 0;
  font-size: 2vh;
  font-weight: 600;
  line-height: 2.25vh;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  background-clip: padding-box;
}
#modal-layer-dynamic.slcket-style .white-slcket-text-input.empty, #modal-layer-dynamic.slcket-style .white-slcket-text-input::placeholder {
  color: white;
}
.ios #modal-layer-dynamic.slcket-style .white-slcket-text-input {
  font-size: 16px;
  line-height: 18px;
}
#modal-layer-dynamic.slcket-style .grey-slcket-select-input {
  color: #fff;
  border: none;
  border-bottom: 1px solid #9b9b9b;
  border-radius: 0;
  background-color: transparent;
  outline: none;
  padding-bottom: 0.3vh;
  padding-top: 0;
  padding-left: 0;
  font-size: 2vh;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  background-clip: padding-box;
}
#modal-layer-dynamic.slcket-style .grey-slcket-input-label {
  margin-bottom: 0.25vh;
  color: #9b9b9b;
}
#modal-layer-dynamic.slcket-style .default-checkbox-input {
  display: none;
}
#modal-layer-dynamic.slcket-style .default-checkbox-span {
  width: 2.7vh;
  height: 2.7vh;
  background-image: url(../images/icons/2022/save@3x.png);
  border: 1px solid transparent;
  background-color: transparent;
  background-position: 1% center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
#modal-layer-dynamic.slcket-style .default-checkbox-input:checked + span {
  background-image: url(../images/icons/2022/save-green@3x.png);
  border: 1px solid transparent;
  background-color: transparent;
  background-position: 1% center;
  background-size: contain;
  background-repeat: no-repeat;
}
#modal-layer-dynamic.slcket-style #best-time-wrapper div {
  font-size: 1.5vh;
  color: #9b9b9b;
}
#modal-layer-dynamic.slcket-style .how-we-compare-table {
  border-spacing: 0.5vh;
  margin: 0 auto;
  width: 80%;
}
#modal-layer-dynamic.slcket-style .how-we-compare-table th, #modal-layer-dynamic.slcket-style .how-we-compare-table td {
  background-color: #000;
  color: white;
  font-size: 2vh;
  line-height: 4vh;
}
#modal-layer-dynamic.slcket-style .how-we-compare-table td {
  background-color: #000;
  font-weight: 600;
  text-align: center;
}
#modal-layer-dynamic.slcket-style .soccer-input {
  background: transparent;
  outline: none;
  border: none;
  color: #4497f7;
  font-weight: 600;
  font-size: 1.75vh;
  font-family: SourceSansPro;
  line-height: 1.75vh;
}
#modal-layer-dynamic.slcket-style .soccer-input::placeholder {
  color: #4497f7;
}
#modal-layer-dynamic.slcket-style .soccer-input.white {
  color: white;
}
#modal-layer-dynamic.slcket-style .soccer-input.white::placeholder {
  color: white;
}
#modal-layer-dynamic.slcket-style #billboard-inquiry .soccer-input {
  min-width: 20vw;
}
#modal-layer-dynamic.slcket-style #select-platform-wrapper .button, #modal-layer-dynamic.slcket-style .platform-features-wrapper .button {
  margin: 1vh 1vw;
}
#modal-layer-dynamic.slcket-style .red-amount-strikethrough {
  position: relative;
}
#modal-layer-dynamic.slcket-style .red-amount-strikethrough::after {
  content: "";
  position: absolute;
  top: 3vh;
  left: 1vh;
  width: 100%;
  height: 1.25px;
  background-color: red;
  transform: rotate(-45deg);
  transform-origin: left top;
}
#modal-layer-dynamic.slcket-style .quiz-answer {
  border: 1px solid transparent;
}
#modal-layer-dynamic.slcket-style .quiz-answer.selected {
  border-color: #23e823;
}
#modal-layer-dynamic.slcket-style .slcket-plus-quiz-box-answer {
  width: 13vh;
  min-height: 17vh;
  border-radius: 1vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1vh;
  cursor: pointer;
  border: 1px solid transparent;
}
#modal-layer-dynamic.slcket-style .slcket-plus-quiz-box-answer img {
  width: 11vh;
  height: 14vh;
  border-radius: 1vh;
  object-fit: cover;
  object-position: center;
  border: 1px solid white;
}
#modal-layer-dynamic.slcket-style .slcket-plus-quiz-box-answer .answer {
  margin-top: 1vh;
}
#modal-layer-dynamic.slcket-style .slcket-plus-quiz-box-answer.selected {
  border-color: #23e823;
}
#modal-layer-dynamic.slcket-style .question-footer-item {
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  background-color: black;
  border: 1px solid white;
  font-size: 2.25vh;
  line-height: 2.25vh;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#modal-layer-dynamic.slcket-style .question-footer-item.selected {
  border-color: #23e823;
}
#modal-layer-dynamic.slcket-style .question-footer-item.disabled {
  opacity: 0.3;
  cursor: default;
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #modal-layer-dynamic.slcket-style .pop-up-footer .modal {
    width: 100%;
    left: 0;
  }
  #modal-layer-dynamic.slcket-style .grey-slcket-text-input {
    font-size: 2vh;
  }
  #modal-layer-dynamic.slcket-style .grey-slcket-select-input {
    padding-bottom: 1vw;
    font-size: 3vw;
  }
  #modal-layer-dynamic.slcket-style .default-checkbox-span {
    width: 3.5vw;
    height: 3.5vw;
  }
  #modal-layer-dynamic.slcket-style #best-time-wrapper div {
    font-size: 3vw;
  }
  #modal-layer-dynamic.slcket-style #best-time-wrapper span {
    font-size: 3vw;
  }
  #modal-layer-dynamic.slcket-style .button {
    font-size: 3.5vw;
    line-height: 3vw;
    padding: 1vw 3.5vw;
  }
  #modal-layer-dynamic.slcket-style .button.no-border {
    font-size: 4vw;
    line-height: 5vw;
  }
  #modal-layer-dynamic.slcket-style .button.small {
    font-size: 2.5vw;
  }
  #modal-layer-dynamic.slcket-style .how-we-compare-table {
    border-spacing: 0.5vw;
    width: 80%;
  }
  #modal-layer-dynamic.slcket-style .how-we-compare-table th, #modal-layer-dynamic.slcket-style .how-we-compare-table td {
    font-size: 2.5vw;
    line-height: 4vw;
  }
  #modal-layer-dynamic.slcket-style #form-blurb {
    margin-top: 12vh;
    font-size: 3vw;
    padding-inline: 15vw;
  }
  #modal-layer-dynamic.slcket-style .red-amount-strikethrough::after {
    content: "";
    position: absolute;
    top: 4vw;
    left: 1vw;
    width: 100%;
    height: 1.25px;
    background-color: red;
    transform: rotate(-45deg);
    transform-origin: left top;
  }
  #modal-layer-dynamic.slcket-style .about-contact-btn {
    width: 20.3vw;
    height: 3.8vw;
    font-family: Bebas-Neue;
    font-size: 2.32vw;
    line-height: 2.42vw;
    border-radius: 1.74vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid #8d8d8d;
    cursor: pointer;
  }
  #modal-layer-dynamic.slcket-style .about-contact-btn.selected {
    border-color: #e9222d;
  }
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) and (orientation: portrait) {
  #modal-layer-dynamic.slcket-style .about-contact-btn {
    height: 13vw;
    font-size: 8vw;
    line-height: 8vw;
    border-radius: 4vw;
  }
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #modal-layer-dynamic.slcket-style #about-contact-community .community-img {
    max-height: 15vw;
    margin-inline: 0.5vw;
    border-radius: 2vw;
  }
  #modal-layer-dynamic.slcket-style .patent-btn {
    width: 9.86vw;
    height: 10.6vw;
    font-family: Bebas-Neue;
    border-radius: 3vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid #8d8d8d;
  }
  #modal-layer-dynamic.slcket-style .patent-btn div {
    font-size: 8vw;
    line-height: 8vw;
  }
  #modal-layer-dynamic.slcket-style .patent-btn span {
    font-size: 3.5vw;
    line-height: 4vw;
    text-align: center;
  }
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #modal-layer-dynamic.slcket-style .patent-btn {
    width: 13vw;
    height: 18vw;
    font-family: Bebas-Neue;
    border-radius: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid #8d8d8d;
  }
  #modal-layer-dynamic.slcket-style .issued-patent {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 1vh 2vw;
    margin-bottom: 1.5vh;
    margin-inline: 0.5vw;
  }
  #modal-layer-dynamic.slcket-style .slcket-pin-horizontal {
    width: 3.5vw;
    margin-right: 7.5vw;
    filter: invert(1);
    transform: rotate(90deg);
  }
  #modal-layer-dynamic.slcket-style .slcket-pin-vertical {
    width: 3.5vw;
    filter: invert(1);
  }
  #modal-layer-dynamic.slcket-style .slcket-pin-text {
    font-size: 4vw;
    line-height: 4vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move img, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move img {
    width: 3vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move #desktop-move-up, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move #mobile-move-up, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move #desktop-move-up, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move #mobile-move-up {
    top: -5vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move #desktop-move-down, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move #mobile-move-down, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move #desktop-move-down, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move #mobile-move-down {
    bottom: -5vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-reset img, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-reset img {
    height: 7vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-zoom #desktop-zoom-in, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-zoom #mobile-zoom-in, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-zoom #desktop-zoom-in, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-zoom #mobile-zoom-in {
    display: flex;
    justify-content: center;
    font-size: 6vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-zoom #desktop-zoom-out, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-zoom #mobile-zoom-out, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-zoom #desktop-zoom-out, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-zoom #mobile-zoom-out {
    display: flex;
    justify-content: center;
    font-size: 10vw;
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  #modal-layer-dynamic.slcket-style #about-contact-community .community-img {
    max-height: 13.25vw;
  }
  #modal-layer-dynamic.slcket-style #about-contact-wrapper .red-text {
    font-size: 3.5vw;
    line-height: 3.5vw;
  }
  #modal-layer-dynamic.slcket-style .about-contact-btn {
    width: 20.3vw;
    height: 9.8vw;
    font-size: 6vw;
    line-height: 6vw;
    border-radius: 3.5vw;
  }
  #modal-layer-dynamic.slcket-style .patent-btn {
    width: 11vw;
    height: 12vw;
    font-family: Bebas-Neue;
    border-radius: 2vh;
  }
  #modal-layer-dynamic.slcket-style .patent-btn div {
    font-size: 7vw;
    line-height: 7vw;
  }
  #modal-layer-dynamic.slcket-style .patent-btn span {
    font-size: 2.5vw;
    line-height: 2.5vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons {
    margin-top: -5vw;
    font-size: 2.25vw;
    line-height: 2.5vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move img, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move img {
    width: 2vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move #desktop-move-up, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move #mobile-move-up, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move #desktop-move-up, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move #mobile-move-up {
    top: -4vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move #desktop-move-down, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-move #mobile-move-down, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move #desktop-move-down, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-move #mobile-move-down {
    bottom: -4vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-reset img, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-reset img {
    height: 6vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-zoom #desktop-zoom-in, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-zoom #mobile-zoom-in, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-zoom #desktop-zoom-in, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-zoom #mobile-zoom-in {
    display: flex;
    justify-content: center;
    font-size: 6vw;
    margin-bottom: 1vw;
  }
  #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-zoom #desktop-zoom-out, #modal-layer-dynamic.slcket-style #editor-control-buttons #desktop-zoom #mobile-zoom-out, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-zoom #desktop-zoom-out, #modal-layer-dynamic.slcket-style #editor-control-buttons #mobile-zoom #mobile-zoom-out {
    display: flex;
    justify-content: center;
    font-size: 10vw;
  }
}
.landscape-phone #modal-layer-dynamic.slcket-style .dialogue-pane-landscape {
  height: 55dvh;
}
.landscape-phone #modal-layer-dynamic.slcket-style .dialogue-panel-wrapper {
  top: 45%;
}
.landscape-phone #modal-layer-dynamic.slcket-style .grey-slcket-text-input:not([disabled]), .landscape-phone #modal-layer-dynamic.slcket-style .grey-slcket-select-input:not([disabled]) {
  padding-bottom: 0.5vh;
  font-size: 16px;
  line-height: 18px;
}
.landscape-phone #modal-layer-dynamic.slcket-style .about-contact-btn {
  width: 12.18vw;
  height: 2.28vw;
  font-size: 1.39vw;
  line-height: 1.45vw;
  border-radius: 1.04vw;
  border: 1px solid #8d8d8d;
}
.landscape-phone #modal-layer-dynamic.slcket-style .about-contact-btn.selected {
  border-color: #e9222d !important;
}
.landscape-phone #modal-layer-dynamic.slcket-style #about-contact-community .community-img {
  max-height: 6vw;
  margin-inline: 0.3vw;
  border-radius: 1vw;
}
.landscape-phone #modal-layer-dynamic.slcket-style #ac-submit, .landscape-phone #modal-layer-dynamic.slcket-style #ac-slcket-plus {
  bottom: 2vh;
}
.landscape-phone #modal-layer-dynamic.slcket-style #volunteer-events-label {
  border: 1px solid #8d8d8d;
}
.landscape-phone #modal-layer-dynamic.slcket-style #community-images-wrapper {
  height: 54dvh;
  overflow: hidden;
}
.landscape-phone #modal-layer-dynamic.slcket-style #issued-patent-wrapper {
  height: 42dvh;
  overflow-y: scroll;
}
.landscape-phone #modal-layer-dynamic.slcket-style .patent-btn {
  width: 5.92vw;
  height: 6.36vw;
  font-family: Bebas-Neue;
  border-radius: 1.8vh;
  border: 1px solid #8d8d8d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
}
.landscape-phone #modal-layer-dynamic.slcket-style .patent-btn div {
  font-size: 3.5vw;
  line-height: 3.5vw;
}
.landscape-phone #modal-layer-dynamic.slcket-style .patent-btn span {
  font-size: 0.9vw;
  line-height: 0.9vw;
  text-align: center;
}
@media screen and (orientation: landscape) {
  #modal-layer-dynamic.slcket-style .dialogue-pane-landscape.android {
    height: 60dvh;
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
  #modal-layer-dynamic.slcket-style .patent-btn {
    width: 5.92vw;
    height: 6.36vw;
    font-family: Bebas-Neue;
    border-radius: 1.8vh;
    border: 1px solid #8d8d8d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
  }
  #modal-layer-dynamic.slcket-style .patent-btn div {
    font-size: 3.5vw;
    line-height: 3.5vw;
  }
  #modal-layer-dynamic.slcket-style .patent-btn span {
    font-size: 0.9vw;
    line-height: 0.9vw;
    text-align: center;
  }
  #modal-layer-dynamic.slcket-style #about-contact-community .community-img {
    max-height: 6vw;
    margin-inline: 0.3vw;
    border-radius: 1vw;
  }
  #modal-layer-dynamic.slcket-style #ac-submit, #modal-layer-dynamic.slcket-style #ac-slcket-plus {
    bottom: 2vh;
  }
  #modal-layer-dynamic.slcket-style #volunteer-events-label {
    border: 1px solid #8d8d8d;
  }
  #modal-layer-dynamic.slcket-style #community-images-wrapper {
    height: 54dvh;
    overflow: hidden;
  }
  #modal-layer-dynamic.slcket-style #issued-patent-wrapper {
    height: 42dvh;
    overflow-y: scroll;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles {
    height: 70vh;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles h3 {
    font-size: 3vw;
    line-height: 4vw;
  }
  #modal-layer-dynamic.slcket-style .text-content {
    width: 100vw;
    font-size: 2vw;
    line-height: 2.5vw;
  }
  #modal-layer-dynamic.slcket-style .text-content p {
    font-size: 2vw;
    line-height: 2.5vw;
  }
  #modal-layer-dynamic.slcket-style .button {
    font-size: 2.25vw;
    line-height: 2vw;
    padding: 0.75vw 1.75vw;
  }
  #modal-layer-dynamic.slcket-style #custom-platforms-form {
    height: 53vh;
    overflow-y: scroll;
    padding-bottom: 4vw;
    box-sizing: border-box;
  }
  #modal-layer-dynamic.slcket-style #form-blurb {
    margin-top: 16vh;
    height: 16vh;
    font-size: 2vw;
    padding-inline: 7.5vw;
  }
  #modal-layer-dynamic.slcket-style #best-time-wrapper {
    margin-top: 4vw;
  }
  #modal-layer-dynamic.slcket-style #best-time-wrapper div {
    font-size: 2vw;
  }
  #modal-layer-dynamic.slcket-style #best-time-wrapper span {
    font-size: 2vw;
  }
  #modal-layer-dynamic.slcket-style #best-time-wrapper .default-checkbox-span {
    width: 2.7vw;
    height: 2.7vw;
  }
  #modal-layer-dynamic.slcket-style .how-we-compare-table {
    border-spacing: 0.5vw;
    width: 80%;
  }
  #modal-layer-dynamic.slcket-style .how-we-compare-table th, #modal-layer-dynamic.slcket-style .how-we-compare-table td {
    font-size: 2.25vw;
    line-height: 4.5vw;
  }
}

#mini-right-frame {
  position: relative;
  right: 0;
  top: 0;
  transform: none;
  width: 40.3vw;
  height: 100%;
}

#mini-left-frame {
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  width: 21.7vw;
  height: 100%;
}

#mini-left-frame .mini-action-footer-button {
  cursor: auto;
}
#mini-left-frame #mini-persona0 {
  top: 0.75805vw;
  left: 6.3963466667vw;
}
#mini-left-frame #mini-persona1 {
  top: 2.4103243335vw;
  left: 2.4112899995vw;
}
#mini-left-frame #mini-persona2 {
  top: 6.3932153333vw;
  left: 0.75805vw;
}
#mini-left-frame #mini-persona3 {
  top: 10.4051090054vw;
  left: 2.4103243335vw;
}
#mini-left-frame #mini-persona4 {
  top: 12.02007vw;
  left: 6.3963466667vw;
}
#mini-left-frame #mini-persona5 {
  top: 10.4051090054vw;
  left: 10.4051090054vw;
}
#mini-left-frame #mini-persona6 {
  top: 6.3932153333vw;
  left: 12.02007vw;
}
#mini-left-frame #mini-persona7 {
  top: 2.4103243335vw;
  left: 10.4051090054vw;
}
#mini-left-frame #mini-app_name_wrapper {
  width: 100%;
}
#mini-left-frame #mini-app_name_wrapper.main {
  align-items: center;
  display: flex;
  height: 11vw;
  justify-content: center;
  flex-flow: column;
}
#mini-left-frame #mini-app_name_wrapper.main #mini-header-image {
  max-height: 13vw;
  max-width: 13vw;
  width: auto;
  margin: 0;
  cursor: auto;
}
#mini-left-frame #mini-app_name_wrapper #mini-welcome_name_text {
  color: white;
  font-family: "sourceSansPro-regular";
  font-size: 1vw;
  line-height: 1;
  margin-top: 1vh;
  text-align: center;
  text-transform: uppercase;
}
#mini-left-frame #mini-app_name_wrapper #mini-welcome_name_text.black {
  color: black;
}
#mini-left-frame .icon-with-word img {
  height: 1.5vw;
}
#mini-left-frame .icon-with-word div {
  font-size: 0.5vw;
}
#mini-left-frame #mini-app_name {
  background: 0 0;
  border: 0;
  bottom: calc(50% + 13vw);
  color: inherit;
  display: none;
  font-size: 3vw;
  font-weight: 700;
  line-height: 7vw;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 21.7vw;
  z-index: 2;
}
#mini-left-frame #mini-wheel_wrapper {
  z-index: 9;
  position: absolute;
  width: 15.7165866666vw;
  height: 15.7165866666vw;
  left: 2.9917066667vw;
  top: 10vw;
}
#mini-left-frame #mini-wheel_wrapper div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#mini-left-frame #mini-wheel_background {
  width: 15.7165866667vw;
  height: 15.7165866667vw;
}
#mini-left-frame #mini-wheel_outer {
  border-radius: 50%;
  width: 15.7165866667vw;
  height: 15.7165866667vw;
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 0.0405066667vw solid #f1f1f1;
}
#mini-left-frame #mini-user_portrait {
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  position: absolute;
  z-index: 1000;
  opacity: 1;
  transition: opacity ease-in-out 1s;
  cursor: pointer;
  width: 6.8456266667vw;
  height: 6.8456266667vw;
  left: 4.43548vw;
  top: 4.43548vw;
}
#mini-left-frame #mini-user_portrait #mini-middle_text_wrapper {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
  cursor: auto;
}
#mini-left-frame #mini-user_portrait #mini-middle_text {
  color: #f1f1f1;
  display: table-cell;
  font-size: 200%;
  text-align: center;
  word-break: break-word;
  vertical-align: middle;
  font-style: italic;
  font-family: SourceSansPro;
  font-weight: 700;
  pointer-events: none;
}
#mini-left-frame #mini-personas_wrapper {
  height: 15.7165866666vw;
  width: 15.7165866666vw;
  position: relative;
  top: -15.7165866666vw;
  left: 0;
  z-index: 999;
}
#mini-left-frame #mini-personas_wrapper .persona {
  cursor: pointer;
  box-sizing: border-box;
  height: 2.91648vw;
  width: 2.91648vw;
  position: absolute;
  text-decoration: none;
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
}
#mini-left-frame #mini-personas_wrapper .persona .icon-with-word {
  pointer-events: none;
  width: 100%;
}
#mini-left-frame #mini-personas_wrapper .persona .icon-with-word img {
  height: auto;
  max-height: 1.6202666667vw;
  max-width: 2.2683733333vw;
  pointer-events: none;
}
#mini-left-frame #mini-personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
  width: fit-content;
  height: fit-content;
  position: relative;
  pointer-events: none;
}
#mini-left-frame #mini-personas_wrapper .answer_text {
  font-family: SourceSansPro;
  font-weight: 600;
  color: white;
  text-align: center;
  pointer-events: none;
  word-break: break-word;
  text-transform: lowercase;
  width: 3.5645866667vw;
  font-size: 0.53165vw;
  line-height: 0.569625vw;
  margin-left: -0.3240533333vw;
}

@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #mini-right-frame {
    position: relative;
    right: 0;
    top: 0;
    transform: none;
    width: 60.225vw;
    height: 100%;
  }
  #mini-left-frame {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 32.445vw;
    height: 100%;
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  #mini-right-frame {
    position: relative;
    right: 0;
    top: 0;
    transform: none;
    width: 60.225vw;
    height: 100%;
  }
  #mini-left-frame {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 32.445vw;
    height: 100%;
  }
}
#right-frame #right-content #editor_wheel_wrapper {
  z-index: 9;
  position: relative;
  width: 17.7445333333vw;
  height: 17.7445333333vw;
  margin-inline: auto;
  margin-top: 5vh;
}

#right-frame #right-content #editor_wheel_wrapper div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#right-frame #right-content #editor_wheel_background {
  width: 17.7445333333vw;
  height: 17.7445333333vw;
}

#right-frame #right-content #editor_wheel_outer {
  border-radius: 50%;
  width: 17.7445333333vw;
  height: 17.7445333333vw;
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 0.0653333333vw solid #f1f1f1;
}

#right-frame #right-content #editor_user_portrait {
  border-radius: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  position: absolute;
  z-index: 1000;
  opacity: 1;
  transition: opacity ease-in-out 1s;
  cursor: auto;
  width: 4.5vw;
  height: 4.5vw;
  left: 7vw;
  top: 7vw;
}

#right-frame #right-content #editor_user_portrait #editor_middle_text_wrapper {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
}

#right-frame #right-content #editor_user_portrait #editor_middle_text {
  color: #f1f1f1;
  display: table-cell;
  font-size: 200%;
  text-align: center;
  word-break: break-word;
  vertical-align: middle;
  font-style: italic;
  font-family: SourceSansPro;
  font-weight: 700;
  pointer-events: none;
}

#right-frame #right-content #editor_personas_wrapper {
  height: 17.7445333333vw;
  width: 17.7445333333vw;
  position: relative;
  top: -17.7445333333vw;
  left: 0;
  z-index: 999;
}
#right-frame #right-content #editor_personas_wrapper .persona {
  cursor: auto;
  box-sizing: border-box;
  height: 3.2928vw;
  width: 3.2928vw;
  position: absolute;
  text-decoration: none;
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
}
#right-frame #right-content #editor_personas_wrapper .persona .icon-with-word {
  pointer-events: none;
  width: 100%;
}
#right-frame #right-content #editor_personas_wrapper .persona .icon-with-word img {
  height: auto;
  max-height: 2.30496vw;
  max-width: 1.7927466667vw;
  pointer-events: none;
}
#right-frame #right-content #editor_personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
  width: fit-content;
  height: fit-content;
  position: relative;
  pointer-events: none;
  filter: brightness(0) invert(1);
}
#right-frame #right-content #editor_personas_wrapper .answer_text {
  font-family: SourceSansPro;
  font-weight: 600;
  color: white;
  text-align: center;
  pointer-events: none;
  word-break: break-word;
  text-transform: lowercase;
  width: 4.0245333333vw;
  font-size: 0.60025vw;
  line-height: 0.643125vw;
  margin-left: -0.3658666667vw;
}
#right-frame #right-content #editor_personas_wrapper .SourceSansPro {
  font-family: SourceSansPro;
}

#right-frame #right-content #editor_persona0 {
  top: 0.8575vw;
  left: 7.2258666667vw;
}

#right-frame #right-content #editor_persona1 {
  top: 2.7227248531vw;
  left: 2.7227248531vw;
}

#right-frame #right-content #editor_persona2 {
  top: 7.2258666667vw;
  left: 0.8575vw;
}

#right-frame #right-content #editor_persona3 {
  top: 11.7417589311vw;
  left: 2.7227248531vw;
}

#right-frame #right-content #editor_persona4 {
  top: 13.5942333333vw;
  left: 7.2258666667vw;
}

#right-frame #right-content #editor_persona5 {
  top: 11.7417589311vw;
  left: 11.7417589311vw;
}

#right-frame #right-content #editor_persona6 {
  top: 7.2258666667vw;
  left: 13.5942333333vw;
}

#right-frame #right-content #editor_persona7 {
  top: 2.7227248531vw;
  left: 11.7417589311vw;
}

#right-frame #right-content .control_footer {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  bottom: 5.5vh;
  left: 50%;
  transform: translateX(-50%);
}

#right-frame #right-content .control-footer_top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vh;
}

#right-frame #right-content .control_footer img {
  border: none;
}

#right-frame #right-content #editor_app_name_wrapper {
  position: relative;
  z-index: 99;
  width: 100%;
}
#right-frame #right-content #editor_app_name_wrapper.main {
  align-items: center;
  display: flex;
  height: 10vh;
  padding-top: 5vh;
  justify-content: center;
  flex-flow: column;
}
#right-frame #right-content #editor_app_name_wrapper.main #editor_header-image {
  max-height: 10vh;
  width: auto;
  margin: 0;
}
#right-frame #right-content #editor_app_name_wrapper #editor_welcome_name_text {
  color: white;
  font-family: "sourceSansPro-regular";
  font-size: 1vw;
  line-height: 1;
  margin-top: 1vh;
  text-align: center;
  text-transform: uppercase;
}

#right-frame #right-content #editor_app_name_wrapper #editor_app_name {
  background: 0 0;
  border: 0;
  bottom: calc(50% + 13vw);
  color: inherit;
  display: none;
  font-size: 3vw;
  font-weight: 700;
  line-height: 7vw;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 35vw;
  z-index: 2;
}

#right-frame #right-content #editor_app_name_wrapper #editor_logo-default {
  background-image: url(https://static.slcket.com/web/2020/editor/default-logo.png);
  background-color: transparent;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  bottom: calc(50% + 15vw);
  display: inline-block;
  height: 7vw;
  left: 8.75vw;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 17.5vw;
}

#right-frame #right-content #editor_app-preview-wrapper {
  display: none;
  height: 100%;
  position: absolute;
  width: 35vw;
  z-index: 2;
}

#right-frame #top-footer-buttons {
  background-color: #494949;
  padding-inline: 10vw;
  bottom: 8.5vh;
}

#right-frame .control_footer-2023 {
  bottom: 0;
  position: relative;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin-inline: auto;
  margin-top: 7.5vh;
  width: 22vw;
}
#right-frame .control_footer-2023 #editor_action-footer-wrapper {
  background-image: none;
}
#right-frame .control_footer-2023 #editor_action-footer-wrapper #editor_action-footer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15vh 5vw 1vh 5vw;
  width: 22vw;
}
#right-frame .control_footer-2023 #editor_action-footer-wrapper #editor_action-footer .icon-with-word {
  cursor: auto;
}
#right-frame .control_footer-2023 #editor_action-footer-wrapper #editor_action-footer img {
  height: 2vw;
}
#right-frame .control_footer-2023 #editor_action-footer-wrapper #editor_action-footer div {
  font-size: 0.65vw;
}

#editor_footer-buttons .icon-with-word {
  width: 7vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#editor_footer-buttons .icon-with-word.selected {
  background: #494949;
  padding: 0.5vh 0;
  border-radius: 0.5vw;
}
#editor_footer-buttons .icon-with-word div {
  margin-inline: 0;
}

.editor {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12vh;
  box-sizing: border-box;
  height: 100vh;
  min-height: unset !important;
}
.editor.android {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#mobile-preview #app-preview-wrapper .cr-viewport {
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

#mobile-preview #app-preview-wrapper #app-preview {
  position: absolute;
  text-align: center;
}

#mobile-preview #app-preview-wrapper #app-preview .bottom, #mobile-preview #app-preview-wrapper #app-preview .top {
  display: block;
  margin: 0 auto;
  width: 16vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper {
  font-size: 0;
  text-align: center;
  border-radius: 4vh;
  border: 1px solid white;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: #151515;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview.fade:before {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview.white-ring #app-preview-overlay:before {
  background-color: #151515;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.1;
  position: absolute;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper {
  width: 100%;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper #app_name {
  background: 0 0;
  border: 0;
  bottom: calc(50% + 10vw);
  color: white;
  display: inline-block;
  font-size: 1.5vw;
  font-weight: 700;
  left: 50%;
  transform: translateX(-50%);
  line-height: 2.5vw;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 14vw;
  z-index: 99;
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper #mobile-header-image {
  background-color: transparent;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  bottom: calc(50% + 8.5714285714vw);
  display: inline-block;
  height: 6vw;
  left: 0.75vw;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 13.63008vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper .middle {
  display: inline-block;
  height: 31.5vw;
  position: relative;
  vertical-align: top;
  width: 15.0968vw;
  z-index: 2;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper .left {
  display: inline-block;
  height: 28.4444444444vw;
  vertical-align: top;
  width: 0.4304932735vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper .right {
  display: inline-block;
  height: 28.4444444444vw;
  vertical-align: top;
  width: 0.3408071749vw;
}

#app-name, #desktop-app-name {
  color: white;
  display: inline-block;
  overflow: visible;
  max-width: 14vw;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  height: auto;
  font-size: 1.5vw;
  line-height: 2.5vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #app-preview-overlay {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -100;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #app-preview-overlay:before {
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #croppie-preview {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_wrapper {
  width: 14.8885714286vw;
  height: 14.8885714286vw;
  position: absolute;
  left: 0.05vw;
  top: calc(50% - 7.4442857143vw);
  -webkit-transition: background-color 0.8s ease-in-out;
  transition: background-color 0.8s ease-in-out;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_wrapper div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_background {
  width: 14.8885714286vw;
  height: 14.8885714286vw;
  -webkit-transition: background-color 0.8s ease-in-out;
  transition: background-color 0.8s ease-in-out;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_outer {
  border-radius: 50%;
  width: 14.8885714286vw;
  height: 14.8885714286vw;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 0.0653333333vw solid #f1f1f1;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_inner {
  border-radius: 50%;
  width: 9.9257142857vw;
  height: 9.9257142857vw;
  background: 0 0;
  border: 1.59804vw solid transparent;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_core {
  border-radius: 50%;
  width: 7.9405714286vw;
  height: 7.9405714286vw;
  background: 0 0;
  border: 0.5690742857vw solid #f1f1f1;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #phone-user_portrait {
  border-radius: 50%;
  width: 6.8685942857vw;
  height: 6.8685942857vw;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  border: 0.1488857143vw solid transparent;
  position: absolute;
  left: 3.6vw;
  top: 3.5vw;
  z-index: 99;
  margin: 0.4962857143vw;
  opacity: 1;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #phone-user_portrait #middle_text_wrapper {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #phone-user_portrait #middle_text {
  color: #f1f1f1;
  display: table-cell;
  font-size: 200%;
  text-align: center;
  word-break: break-word;
  vertical-align: middle;
  font-style: italic;
  font-family: SourceSansPro;
  font-weight: 700;
  pointer-events: none;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait #middle_text .inkfree {
  font-weight: 400;
  font-family: Inkfree;
  font-style: normal;
  font-weight: 700;
  pointer-events: none;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper {
  border-radius: 50%;
  height: 14.8885714286vw;
  width: 14.8885714286vw;
  position: relative;
  top: -14.8885714286vw;
  left: 0;
  z-index: 999;
}
#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper .answer_text {
  width: 3vw;
  margin-top: 1vw;
  line-height: 0.5vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper .persona {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 1.8vw;
  width: 1.8vw;
  position: absolute;
  background-position: center;
  border: 0;
  border-radius: 50%;
  text-decoration: none;
  display: table;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

#mobile-preview #app-preview-wrapper .persona .icon-with-word img {
  max-height: 1.6675vw;
  max-width: 2.3345vw;
  object-fit: contain;
}
#mobile-preview #app-preview-wrapper .persona .icon-with-word div {
  font-size: 0.4vw;
  margin-top: 0;
  line-height: 1vw;
}

#app-preview #wheel-preview-wrapper #persona0 {
  top: 0.5vw;
  left: 5.9554285714vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona1 {
  top: 2.2vw;
  left: 2.2vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona2 {
  top: 6.3vw;
  left: 0.75vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona3 {
  top: 9.8vw;
  left: 2.2vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona4 {
  top: 11.4108571429vw;
  left: 5.9554285714vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona5 {
  top: 9.8vw;
  left: 9.8vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona6 {
  top: 6.3vw;
  left: 11.3108571429vw;
}

#mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona7 {
  top: 2.2vw;
  left: 9.9vw;
}

#mobile-preview #app-preview-wrapper #app-preview .control_footer-app {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-wrap: wrap;
  bottom: 0.5vw;
  left: 0;
  width: 100%;
}
#mobile-preview #app-preview-wrapper #app-preview .control_footer-app .icon-with-word {
  margin-inline: 0.75vw;
  pointer-events: none;
}
#mobile-preview #app-preview-wrapper #app-preview .control_footer-app .icon-with-word img {
  height: auto;
  height: 1.3vw;
  pointer-events: none;
  object-fit: contain;
}
#mobile-preview #app-preview-wrapper #app-preview .control_footer-app .icon-with-word div {
  font-size: 0.5vw;
}

#platform-background-footer #slider-wrapper {
  max-width: 78vw;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: center;
  gap: 1vw;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#platform-background-footer #slider-wrapper::-webkit-scrollbar {
  display: none;
}
#platform-background-footer .bg-image {
  flex: 0 0 auto;
  width: 5vw;
  height: 2.75vw;
  border-radius: 0.75vw;
  border: 1px solid white;
  object-fit: cover;
  cursor: pointer;
  user-select: none;
}
#platform-background-footer .left-button,
#platform-background-footer .right-button {
  height: 2vw;
  cursor: pointer;
  flex: 0 0 auto;
}

#platform-background-popup .platform-category {
  cursor: pointer;
}
#platform-background-popup .platform-category.disabled {
  cursor: default;
  color: white;
  opacity: 0.5;
}

#color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 1.25vw;
  width: 1.25vw;
  margin-top: -0.5vw;
  border-radius: 50%;
  border: 2px solid black;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

#color-slider {
  -webkit-appearance: none;
  width: 30vw;
  height: 0.5vw;
  background: transparent;
  cursor: pointer;
}

#color-slider::-webkit-slider-runnable-track {
  width: 30vw;
  height: 0.5vw;
  background: linear-gradient(to right, red, orange, yellow, lime, green, turquoise, cyan, blue, violet, magenta, crimson, red);
  border: solid 2px;
  border-radius: 15px;
}

#editor-control-buttons .welcome-placement-button {
  padding: 0.25vw 0.5vw;
  border-radius: 0.5vw;
  border: 1px solid #fff;
  cursor: pointer;
  color: #fff;
}
#editor-control-buttons .welcome-placement-button.green {
  border-color: #23e823;
  color: #fff !important;
}
#editor-control-buttons .reset-button {
  height: 4vh;
}

#center-image-reset .reset-button {
  height: 4vh;
}

#wheel-design-buttons {
  font-size: 0.8vw;
}
#wheel-design-buttons .wheel-design-circle {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid grey;
  background-color: black;
  position: relative;
}
#wheel-design-buttons .wheel-design-circle-wrapper {
  cursor: pointer;
  padding: 1vh;
  border: 1px solid transparent;
  border-radius: 1vh;
}
#wheel-design-buttons .wheel-design-circle-wrapper.selected {
  border-color: #23e823;
}

#desktop-preview-wrapper #mini-right-frame {
  position: relative;
  right: 0;
  top: 0;
  transform: none;
  height: 100%;
  /*background-color: rgba(0,0,0,0.4);*/
  width: 42.25vw;
}
#desktop-preview-wrapper #mini-left-frame {
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  height: 100%;
  /*background-color: rgba(0,0,0,0.4);*/
  width: 22.75vw;
}
#desktop-preview-wrapper #mini-left-frame .mini-action-footer-button {
  cursor: auto;
}
#desktop-preview-wrapper #mini-left-frame #mini-persona0 {
  top: 0.492733vw;
  left: 4.157632vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-persona1 {
  top: 1.565711vw;
  left: 1.565386vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-persona2 {
  top: 4.154594vw;
  left: 0.492733vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-persona3 {
  top: 6.768315vw;
  left: 1.565711vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-persona4 {
  top: 7.813045vw;
  left: 4.157632vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-persona5 {
  top: 6.768315vw;
  left: 6.768315vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-persona6 {
  top: 4.154594vw;
  left: 7.813045vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-persona7 {
  top: 1.565711vw;
  left: 6.768315vw;
}
#desktop-preview-wrapper #mini-left-frame #control-footer-skin-editor {
  bottom: 0;
  position: relative;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin-inline: auto;
  margin-top: 7.5vh;
  width: 22vw;
}
#desktop-preview-wrapper #mini-left-frame #control-footer-skin-editor #editor_action-footer-wrapper {
  background-image: none;
}
#desktop-preview-wrapper #mini-left-frame #control-footer-skin-editor #editor_action-footer-wrapper #editor_action-footer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15vh 5vw 1vh 5vw;
  width: 22vw;
}
#desktop-preview-wrapper #mini-left-frame #control-footer-skin-editor #editor_action-footer-wrapper #editor_action-footer .icon-with-word {
  cursor: auto;
}
#desktop-preview-wrapper #mini-left-frame #control-footer-skin-editor #editor_action-footer-wrapper #editor_action-footer img {
  height: 2vw;
}
#desktop-preview-wrapper #mini-left-frame #control-footer-skin-editor #editor_action-footer-wrapper #editor_action-footer div {
  font-size: 0.65vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper {
  width: 100%;
  margin-top: 2vh;
}
#desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper.main {
  font-size: 1.5vw;
  line-height: 1.75vw;
  margin-top: 2vw;
  height: 4.15vw;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-flow: column;
}
#desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper.main #desktop-header-image {
  width: 15.08vw;
  height: 5vw;
  object-fit: contain;
  margin: 0;
  cursor: auto;
  display: inline-block;
}
#desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper #mini-welcome_name_text {
  color: white;
  font-family: "sourceSansPro-regular";
  font-size: 0.65vw;
  line-height: 1;
  margin-top: 0.65vh;
  text-align: center;
  text-transform: uppercase;
}
#desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper #mini-welcome_name_text.black {
  color: black;
}
#desktop-preview-wrapper #mini-left-frame .icon-with-word img {
  height: 1.572vw;
}
#desktop-preview-wrapper #mini-left-frame .icon-with-word div {
  font-size: 0.524vw;
}
#desktop-preview-wrapper #mini-left-frame #desktop-app_name {
  background: 0 0;
  border: 0;
  bottom: calc(50% + 8.45vw);
  color: inherit;
  display: none;
  font-size: 1.95vw;
  font-weight: 700;
  line-height: 4.55vw;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 14.105vw;
  z-index: 2;
}
#desktop-preview-wrapper #mini-left-frame #mini-wheel_wrapper {
  z-index: 9;
  position: absolute;
  width: 10.2078vw;
  height: 10.2078vw;
  left: 5.9446vw;
  top: 10.5vw;
  transform: scale(1.6129);
}
#desktop-preview-wrapper #mini-left-frame #mini-wheel_wrapper div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#desktop-preview-wrapper #mini-left-frame #mini-wheel_background {
  width: 10.2078vw;
  height: 10.2078vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-wheel_outer {
  border-radius: 50%;
  width: 10.2078vw;
  height: 10.2078vw;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 0.026327vw solid #f1f1f1;
}
#desktop-preview-wrapper #mini-left-frame #mini-user_portrait {
  border-radius: 50%;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  border: none;
  position: absolute;
  z-index: 1000;
  opacity: 1;
  transition: opacity ease-in-out 1s;
  cursor: pointer;
  width: 3.8vw;
  height: 3.8vw;
  left: 3.3vw;
  top: 3.3vw;
}
#desktop-preview-wrapper #mini-left-frame #mini-user_portrait #mini-middle_text_wrapper {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
  cursor: auto;
}
#desktop-preview-wrapper #mini-left-frame #mini-user_portrait #mini-middle_text {
  color: #f1f1f1;
  display: table-cell;
  font-size: 130%;
  text-align: center;
  word-break: break-word;
  vertical-align: middle;
  font-style: italic;
  font-family: SourceSansPro;
  font-weight: 700;
  pointer-events: none;
}
#desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper {
  height: 10.2078vw;
  width: 10.2078vw;
  position: relative;
  top: -10.2078vw;
  left: 0;
  z-index: 999;
}
#desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .persona {
  cursor: pointer;
  box-sizing: border-box;
  height: 1.89772vw;
  width: 1.89772vw;
  position: absolute;
  text-decoration: none;
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
}
#desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .persona .icon-with-word {
  pointer-events: none;
  width: 100%;
}
#desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .persona .icon-with-word img {
  height: auto;
  max-height: 1.05317vw;
  max-width: 1.47444vw;
  pointer-events: none;
}
#desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
  width: fit-content;
  height: fit-content;
  position: relative;
  pointer-events: none;
}
#desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .answer_text {
  font-family: SourceSansPro;
  font-weight: 600;
  color: white;
  text-align: center;
  pointer-events: none;
  word-break: break-word;
  text-transform: lowercase;
  width: 2.31797vw;
  font-size: 0.3455vw;
  line-height: 0.37025vw;
  margin-left: -0.210634vw;
}

.landscape-phone #modal-layer-dynamic.slcket-style .editor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12vh;
  box-sizing: border-box;
  min-height: 100vh;
}
.landscape-phone #modal-layer-dynamic.slcket-style #desktop-preview-wrapper, .landscape-phone #modal-layer-dynamic.slcket-style #mobile-preview #app-preview-wrapper #app-preview {
  transform: scale(0.75);
  transform-origin: left top;
}
.landscape-phone #modal-layer-dynamic.slcket-style #desktop-preview {
  padding-top: 1vh;
}
.landscape-phone #modal-layer-dynamic.slcket-style #desktop-preview > div:first-child {
  padding: 1vh 0;
}
.landscape-phone #modal-layer-dynamic.slcket-style #mobile-preview > div:first-child {
  padding: 1vh 0;
}
.landscape-phone #modal-layer-dynamic.slcket-style #editor-control-buttons {
  margin-top: -11vh;
  padding-top: 1vh;
  margin-bottom: 25vh;
  position: relative;
}
.landscape-phone #modal-layer-dynamic.slcket-style #control-footer-skin-editor .action-footer-text {
  font-size: 1vh;
}
.landscape-phone #modal-layer-dynamic.slcket-style #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper .answer_text {
  font-size: 1vh;
  line-height: 1vh;
}

@media screen and (orientation: portrait) {
  #color-slider {
    width: 85vw;
    height: 1.5vw;
  }
  #color-slider::-webkit-slider-runnable-track {
    width: 85vw;
    height: 1.5vw;
    border: solid 1px;
    border-radius: 5px;
  }
  #color-slider::-webkit-slider-thumb {
    height: 3vw;
    width: 3vw;
    margin-top: -1vw;
    border: 1px solid black;
  }
  #wheel-design-buttons {
    font-size: 3vw;
  }
  #wheel-design-buttons .wheel-design-circle {
    width: 14vw;
    height: 14vw;
  }
  #wheel-design-buttons .wheel-design-circle-wrapper {
    padding: 1vw;
    border-radius: 1vw;
  }
  #wheel-design-buttons .wheel-design-circle-wrapper.selected {
    border-color: #23e823;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper {
    border-radius: 8vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview {
    position: relative;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper #mobile-header-image {
    bottom: calc(50% + 32.5714285714vw);
    height: 15vw;
    width: 45vw;
    left: 3.75vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper #app_name {
    background: 0 0;
    border: 0;
    top: 13vw;
    bottom: unset;
    color: inherit;
    display: inline-block;
    font-size: 5vw;
    font-weight: 700;
    left: 50%;
    transform: translateX(-50%);
    line-height: 6.5vw;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 99;
    max-width: 50vw;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview {
    border: 2vw solid black;
    border-radius: 8vw;
    width: 54.05555554vw;
    height: 112.78vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_wrapper {
    width: 54.8885714286vw;
    height: 54.8885714286vw;
    left: -0.5vw;
    top: calc(50% - 2.4442857143vw);
    transform: translateY(-50%) scale(0.94);
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_background {
    width: 54.8885714286vw;
    height: 54.8885714286vw;
    -webkit-transition: background-color 0.8s ease-in-out;
    transition: background-color 0.8s ease-in-out;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_outer {
    width: 54.8885714286vw;
    height: 54.8885714286vw;
    border: 0.0653333333vw solid #f1f1f1;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper {
    height: 54.8885714286vw;
    width: 54.8885714286vw;
    top: -54.8885714286vw;
    left: 0;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper .answer_text {
    font-size: 1.5vw;
    width: 20vw;
    margin-top: 1vw;
    line-height: 2vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #phone-user_portrait {
    border-radius: 50%;
    width: 18.8685942857vw;
    height: 18.8685942857vw;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    border: 0.1488857143vw solid transparent;
    position: absolute;
    left: 16.5vw;
    top: 17.5vw;
    z-index: 99;
    margin: 0.4962857143vw;
    opacity: 1;
  }
  #mobile-preview #app-preview-wrapper .persona .icon-with-word img {
    max-height: 6.66vw;
    max-width: 9.4vw;
  }
  #mobile-preview #app-preview-wrapper .persona .icon-with-word div {
    font-size: 1.5vw;
    margin-top: 0;
    line-height: 1.5vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper.main {
    font-size: 3vw;
    line-height: 3.5vw;
  }
  #app-preview #wheel-preview-wrapper #persona0 {
    top: 1.819vw;
    left: 18.6658491429vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona1 {
    top: 7.9986vw;
    left: 4.9986vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona2 {
    top: 21.9194vw;
    left: -1.2715vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona3 {
    top: 35.6524vw;
    left: 4.9986vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona4 {
    top: 41.5137582857vw;
    left: 18.6658491429vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona5 {
    top: 35.6524vw;
    left: 32.6524vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona6 {
    top: 21.9194vw;
    left: 39.1498982857vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona7 {
    top: 7.9986vw;
    left: 32.0162vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview .control_footer-app {
    bottom: 0.5vw;
    left: 0;
    width: 100%;
  }
  #mobile-preview #app-preview-wrapper #app-preview .control_footer-app .icon-with-word {
    margin-inline: 0.75vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview .control_footer-app .icon-with-word img {
    height: 5vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview .control_footer-app .icon-with-word div {
    font-size: 2vw;
  }
  #editor-control-buttons {
    font-size: 3.5vw;
    line-height: 4vw;
  }
  #editor-control-buttons .welcome-placement-button {
    padding: 1vw 2vw;
    border-radius: 1vw;
    border: 1px solid #fff;
    cursor: pointer;
    color: #fff;
  }
  #editor-control-buttons .welcome-placement-button.green {
    border-color: #23e823;
    color: #fff !important;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #welcome-placement-button {
    padding: 1vw 2vw;
    border-radius: 1vw;
    border: 1px solid #fff;
    cursor: pointer;
    color: #fff;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #welcome-placement-button.green {
    border-color: #23e823;
    color: #fff !important;
  }
  #platform-background-footer #slider-wrapper {
    max-width: 70vw;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    gap: 1vw;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #platform-background-footer #slider-wrapper::-webkit-scrollbar {
    display: none;
  }
  #platform-background-footer .left-button,
  #platform-background-footer .right-button {
    height: 6.5vw;
  }
  #desktop-preview-wrapper #mini-right-frame {
    position: relative;
    right: 0;
    top: 0;
    transform: none;
    height: 100%;
    /*background-color: rgba(0,0,0,0.4);*/
    width: 60.255vw;
  }
  #desktop-preview-wrapper #mini-left-frame {
    /*background-color: rgba(0,0,0,0.4);*/
    width: 32.445vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-persona0 {
    top: 1.133286vw;
    left: 9.562554vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-persona1 {
    top: 3.601135vw;
    left: 3.600389vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-persona2 {
    top: 9.555566vw;
    left: 1.133286vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-persona3 {
    top: 15.567124vw;
    left: 3.601135vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-persona4 {
    top: 17.969004vw;
    left: 9.562554vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-persona5 {
    top: 15.567124vw;
    left: 15.567124vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-persona6 {
    top: 9.555566vw;
    left: 17.969004vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-persona7 {
    top: 3.601135vw;
    left: 15.567124vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper {
    width: 100%;
    margin-top: 2vh;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper.main {
    margin-top: 3vw;
    align-items: center;
    display: flex;
    height: 9.545vw;
    justify-content: center;
    flex-flow: column;
    z-index: 99;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    max-width: 27vw;
    margin-left: 2.5vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper.main #desktop-header-image {
    max-height: 10.235vw;
    width: 21.505vw;
    margin: 0;
    margin-top: 2vw;
    cursor: auto;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper #mini-welcome_name_text {
    color: white;
    font-family: "sourceSansPro-regular";
    font-size: 1.5vw;
    line-height: 1;
    margin-top: 1.5vw;
    text-align: center;
    text-transform: uppercase;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-app_name_wrapper #mini-welcome_name_text.black {
    color: black;
  }
  #desktop-preview-wrapper #mini-left-frame .icon-with-word img {
    height: 3.5vw;
  }
  #desktop-preview-wrapper #mini-left-frame .icon-with-word div {
    font-size: 1.5vw;
  }
  #desktop-preview-wrapper #mini-left-frame #app-name, #desktop-preview-wrapper #mini-left-frame #desktop-app-name {
    color: white;
    display: inline-block;
    overflow: visible;
    max-width: 26.5vw;
    white-space: normal;
    word-wrap: break-word;
    font-size: 2vw;
    line-height: 3.25vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-wheel_wrapper {
    z-index: 9;
    position: absolute;
    width: 23.477vw;
    height: 23.477vw;
    left: 4vw;
    top: 15.5vw;
    transform: scale(1.1);
  }
  #desktop-preview-wrapper #mini-left-frame #mini-wheel_wrapper div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-wheel_background {
    width: 23.477vw;
    height: 23.477vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-wheel_outer {
    border-radius: 50%;
    width: 23.477vw;
    height: 23.477vw;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 0.06vw solid #f1f1f1;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-user_portrait {
    border-radius: 50%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    border: none;
    position: absolute;
    z-index: 1000;
    opacity: 1;
    transition: opacity ease-in-out 1s;
    cursor: pointer;
    width: 8.74vw;
    height: 8.74vw;
    left: 7.6vw;
    top: 7.6vw;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-user_portrait #mini-middle_text_wrapper {
    display: table;
    height: 100%;
    position: absolute;
    width: 100%;
    cursor: auto;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-user_portrait #mini-middle_text {
    color: #f1f1f1;
    display: table-cell;
    font-size: 130%;
    text-align: center;
    word-break: break-word;
    vertical-align: middle;
    font-style: italic;
    font-family: SourceSansPro;
    font-weight: 700;
    pointer-events: none;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper {
    height: 23.477vw;
    width: 23.477vw;
    position: relative;
    top: -23.477vw;
    left: 0;
    z-index: 999;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .persona {
    cursor: pointer;
    box-sizing: border-box;
    height: 4.364vw;
    width: 4.364vw;
    position: absolute;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .persona .icon-with-word {
    pointer-events: none;
    width: 100%;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .persona .icon-with-word img {
    height: auto;
    max-height: 2.422vw;
    max-width: 3.39vw;
    pointer-events: none;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
    width: fit-content;
    height: fit-content;
    position: relative;
    pointer-events: none;
  }
  #desktop-preview-wrapper #mini-left-frame #mini-personas_wrapper .answer_text {
    font-family: SourceSansPro;
    font-weight: 600;
    color: white;
    text-align: center;
    pointer-events: none;
    word-break: break-word;
    text-transform: lowercase;
    width: 5.313vw;
    font-size: 0.795vw;
    line-height: 0.8vw;
    margin-left: -0.5vw;
  }
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #platform-background-footer #slider-wrapper {
    max-width: 70vw;
    gap: 1vw;
  }
  #platform-background-footer #slider-wrapper::-webkit-scrollbar {
    display: none;
  }
  #platform-background-footer .bg-image {
    width: 12.75vw;
    height: 7.0125vw;
  }
  #platform-background-footer .left-button,
  #platform-background-footer .right-button {
    height: 7vw;
    cursor: pointer;
    flex: 0 0 auto;
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  .editor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12vh;
    box-sizing: border-box;
  }
  #mobile-preview #app-preview-wrapper {
    transform: scale(0.8);
    margin-top: -5vw;
  }
  #app-preview #wheel-preview-wrapper #persona0 {
    top: 1.819vw;
    left: 21.6658491429vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona1 {
    top: 7.9986vw;
    left: 7.9986vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona2 {
    top: 21.9194vw;
    left: 1.7285vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona3 {
    top: 35.6524vw;
    left: 7.9986vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona4 {
    top: 41.5137582857vw;
    left: 21.6658491429vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona5 {
    top: 35.6524vw;
    left: 35.6524vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona6 {
    top: 21.9194vw;
    left: 42.1498982857vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona7 {
    top: 7.9986vw;
    left: 35.0162vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview #wheel-preview-wrapper #personas_wrapper .answer_text {
    width: 11vw;
  }
  #mobile-preview #app-preview-wrapper #app-preview .control_footer-app {
    bottom: 2.5vw;
  }
  #platform-background-footer #slider-wrapper {
    max-width: 75vw;
    gap: 1vw;
  }
  #platform-background-footer #slider-wrapper::-webkit-scrollbar {
    display: none;
  }
  #platform-background-footer .bg-image {
    width: 9.09vw;
    height: 5vw;
  }
  #platform-background-footer .left-button,
  #platform-background-footer .right-button {
    height: 5vw;
    cursor: pointer;
    flex: 0 0 auto;
  }
}
.profile-pic {
  height: 7vh;
  box-sizing: border-box;
  background-repeat: no-repeat;
}
.profile-pic.user {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid white;
  border-radius: 1vh;
  margin: auto;
  width: 3.9375vh;
}
.profile-pic.user.mini {
  border-radius: 0.5vh;
  width: 2.5vh;
  height: 4vh;
}
.profile-pic.user.tiny {
  border-radius: 1vh;
  height: 7vh;
  width: 3.9375vh;
}
.profile-pic.user.header {
  height: 5.25vh;
  width: 2.953125vh;
  border-radius: 0.75vh;
}
.profile-pic.user.header .profile-center {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 2vh;
  height: 2vh;
  transform: translate(-50%, -50%);
}
.profile-pic.user.small {
  border-radius: 1vw;
  height: 10vw;
  width: 5.625vw;
  min-height: 10vw;
  min-width: 5.625vw;
}
.profile-pic.user.right {
  height: 33.78vw;
  width: 19vw;
  border-radius: 3vh;
  border: 2px solid white;
}
.profile-pic.user.omni-media {
  height: 60vh;
  height: 60dvh;
  width: 33.75vh;
  width: 33.75dvh;
  border-radius: 2vh;
  border: 2px solid white;
}
.profile-pic.user.branded-background {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.profile-pic .cover-image {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.profile-pic img {
  height: 100%;
  position: relative;
  width: 100%;
  object-fit: cover;
  backdrop-filter: brightness(0.9);
  -webkit-backdrop-filter: brightness(0.9);
  z-index: 8;
}
.profile-pic img.dynamic-video-play-button {
  height: 4vw;
  width: 4vw;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}
.profile-pic .logo {
  max-width: 85%;
  max-height: 30%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.5vh;
  position: absolute;
  z-index: 10;
  object-fit: contain;
}
.profile-pic .profile-overlay {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.profile-pic .profile-overlay.bg-img {
  background: rgba(0, 0, 0, 0.3);
}
.profile-pic .profile-background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -20%;
  filter: opacity(0.1);
  height: 75%;
  left: -20%;
  position: absolute;
  width: 100%;
}
.profile-pic .profile-center {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 3vh;
  height: 3vh;
  transform: translate(-50%, -50%);
}
.header .profile-pic .profile-center {
  width: 2vh;
  height: 2vh;
}
.tiny .profile-pic .profile-center {
  width: 3vh;
  height: 3vh;
}
.small .profile-pic .profile-center {
  width: 2vw;
  height: 2vw;
}
.right .profile-pic .profile-center {
  width: 12vw;
  height: 12vw;
}
.profile-pic.mini .profile-center {
  border-radius: 50%;
  height: 1.5vh;
  width: 1.5vh;
}

.fixed-bottom-left {
  position: absolute;
  left: 1vw;
  bottom: 1vh;
  bottom: calc(1vh + env(safe-area-inset-bottom));
}

.fixed-bottom-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1vh;
  bottom: calc(1vh + env(safe-area-inset-bottom));
}

.fixed-bottom-right {
  position: absolute;
  right: 1vw;
  bottom: 1vh;
  right: calc(1vw + env(safe-area-inset-right));
  bottom: calc(1vh + env(safe-area-inset-bottom));
}

.card-data-area {
  color: white;
  font-size: 2vh;
  font-weight: 600;
  line-height: 2.25vh;
  margin-left: 1vw;
  z-index: 101;
}
.card-data-area h2 {
  font-size: 3vh;
  font-weight: 600;
  line-height: 3.5vh;
  margin: 0;
  text-align: left;
}
.card-data-area p {
  font-size: 2vh;
  line-height: 2.25vh;
}
.card-data-area a {
  color: white;
  display: flex;
}

.card-media {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border-radius: 4vh;
  border: 2px solid white;
  cursor: pointer;
  flex-shrink: 0;
  height: 80vh;
  margin-right: 1vw;
  overflow: hidden;
  width: 45vh;
}
.card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}
.card-media .full-size {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-media .video-preview {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
}
.card-media .video-preview .play-button-wrapper {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  padding: 1vw;
  position: absolute;
  width: 100%;
  z-index: 90;
}

.dark-checkbox-wrapper.disabled {
  pointer-events: none;
  filter: brightness(0.5);
}

.dark-checkbox-input {
  display: none;
}

.dark-checkbox-span {
  display: inline-block;
  background-color: #666666;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 3vh;
  height: 3vh;
  cursor: pointer;
  box-sizing: border-box;
  margin-right: 0.56vh;
}

.dark-checkbox-input:checked + span {
  background-image: url(../images/icons/2022/save-green@3x.png);
  border: none;
  background-color: transparent;
  background-size: 100%;
  border-radius: unset;
  background-repeat: no-repeat;
  margin-right: 0;
  width: 3.56vh;
}

.visibility-hidden {
  visibility: hidden;
}

input.invalid {
  border-color: #de002b;
  color: #de002b;
}

input.invalid::placeholder {
  color: #de002b;
}

.green {
  color: #23e823;
}

.yellow {
  color: #ffdc01;
}

.red {
  color: #e9222d;
}

.orange {
  color: #f9a504;
}

.full-image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 8.5vh 0;
  background: black;
}
.full-image-wrapper .full-width-content {
  width: 100%;
  height: 100%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-image-wrapper .full-width-content #content-video, .full-image-wrapper .full-width-content #full-width-image, .full-image-wrapper .full-width-content #content-image {
  max-width: 59vw;
  max-width: 59dvw;
  max-height: 80vh;
  max-height: 80dvh;
  box-sizing: border-box;
  border-radius: 4vh;
  border-radius: 4dvh;
  border: 2px solid white;
  z-index: 3;
}
.full-image-wrapper .full-width-content #content-video.fullscreen, .full-image-wrapper .full-width-content #full-width-image.fullscreen, .full-image-wrapper .full-width-content #content-image.fullscreen {
  border: none;
}
.landscape-phone .full-image-wrapper {
  padding: 3vh 0 14vh 0;
  padding: 4dvh 0 15dvh 0;
}
.landscape-phone .full-image-wrapper .full-width-content #content-video, .landscape-phone .full-image-wrapper .full-width-content #full-width-image, .landscape-phone .full-image-wrapper .full-width-content #content-image {
  max-width: 59vw;
  max-width: 59dvw;
  max-height: 60vh;
  max-height: 75dvh;
}

.invisible {
  visibility: hidden !important;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-icon {
  align-self: center;
  flex-shrink: 0;
  flex-grow: 0;
  width: 1.5vh;
  width: 1.5dvh;
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  .dash-icon {
    /*width: 3.75vw;*/
    width: 1.5vh;
    width: 1.5dvh;
  }
}

.card-icon {
  align-self: center;
  flex-shrink: 0;
  flex-grow: 0;
  width: 2vh;
  width: 2dvh;
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  .card-icon {
    /*width: 5vw;*/
    width: 2vh;
    width: 2dvh;
  }
}

.accordion {
  min-height: 5.9vh;
  margin-top: 1.5vh;
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  .accordion {
    /* Phones */
    min-height: calc(10.1vw + 1vh);
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  .accordion {
    /* Tablets */
    min-height: 5.15vh;
    min-height: 5.15dvh;
  }
}

.date-input-empty::before {
  color: #4497f7;
  content: attr(placeholder);
}

/* currently used in right-frame/ss/profile-card.html and nowhere else */
.phone-preview-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  border-radius: 2.5vh;
  left: 0;
  top: 0;
  position: absolute;
}

/******** tablet portrait / very fatphone version ********/
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  .full-image-wrapper {
    padding-top: env(safe-area-inset-top);
    padding-bottom: 9.75vh;
    padding-bottom: 10.25dvh;
  }
  .fat-iphone .full-image-wrapper .full-width-content #content-video, .fat-iphone .full-image-wrapper .full-width-content #full-width-image, .fat-iphone .full-image-wrapper .full-width-content #content-image, .fat-android .full-image-wrapper .full-width-content #content-video, .fat-android .full-image-wrapper .full-width-content #full-width-image, .fat-android .full-image-wrapper .full-width-content #content-image {
    max-height: calc(100% - 2.1vw - 2vh);
    max-height: calc(100% - 2.1vw - 2dvh);
    max-width: 98vw;
    max-width: 98dvw;
  }
}
/******** mobile version ********/
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  .skinny-iphone .full-image-wrapper, .skinny-android .full-image-wrapper {
    padding-top: env(safe-area-inset-top);
    padding-bottom: 21vw;
  }
  .skinny-iphone .full-image-wrapper .full-width-content #content-video, .skinny-iphone .full-image-wrapper .full-width-content #full-width-image, .skinny-iphone .full-image-wrapper .full-width-content #content-image, .skinny-android .full-image-wrapper .full-width-content #content-video, .skinny-android .full-image-wrapper .full-width-content #full-width-image, .skinny-android .full-image-wrapper .full-width-content #content-image {
    max-height: calc(100% - 7vw - 4vh);
    max-height: calc(100% - 7vw - 4dvh);
    max-width: 98vw;
    max-width: 98dvw;
  }
  .fat-iphone .full-image-wrapper, .fat-android .full-image-wrapper {
    padding-top: 0;
    padding-bottom: 21vw;
  }
  .fat-iphone .full-image-wrapper .full-width-content #content-video, .fat-iphone .full-image-wrapper .full-width-content #full-width-image, .fat-iphone .full-image-wrapper .full-width-content #content-image, .fat-android .full-image-wrapper .full-width-content #content-video, .fat-android .full-image-wrapper .full-width-content #full-width-image, .fat-android .full-image-wrapper .full-width-content #content-image {
    max-height: calc(100% - 7vw - 4vh);
    max-height: calc(100% - 7vw - 4dvh);
    max-width: 98vw;
    max-width: 98dvw;
  }
}
@media screen and (orientation: landscape) {
  #omni-content {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 8.5vh 1vw 8vh 1vw;
    background: rgba(0, 0, 0, 0.4);
  }
  #omni-content #omni-center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  #omni-content #omni-center .left-button {
    height: 6vh;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: calc((80% - env(safe-area-inset-top)) / 2 + 3vh);
    z-index: 667;
  }
  #omni-content #omni-center .right-button {
    height: 6vh;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: calc((80% - env(safe-area-inset-top)) / 2 + 3vh);
    z-index: 667;
  }
  #omni-content #omni-center #omni-media {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 55%;
    width: 100%;
    max-width: 57vw;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  #omni-content #omni-center #omni-media #content-image-wrapper {
    height: 100%;
    width: 100%;
  }
  #omni-content #omni-center #omni-media img.omni-media {
    display: block;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    border-radius: 2vh;
    border: 2px solid white;
    z-index: 3;
  }
  #omni-content #omni-center #omni-media img.omni-media.icon {
    border: unset;
    border-radius: unset;
    max-width: 50%;
    max-height: 50%;
  }
  #omni-content #omni-center #omni-media img.omni-media.no-border {
    border: none;
  }
  #omni-content #omni-center #omni-media video.omni-video, #omni-content #omni-center #omni-media iframe.omni-video {
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    border-radius: 2vh;
    border: 2px solid white;
    z-index: 3;
    object-fit: contain;
  }
  #omni-content #omni-center #omni-media video.omni-video.fullscreen, #omni-content #omni-center #omni-media iframe.omni-video.fullscreen {
    border: none;
  }
  #omni-content #omni-center #omni-data {
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: content;
    margin-top: 1vh;
    position: relative;
    width: 100%;
  }
  #omni-content #omni-right {
    width: 30vw;
    position: relative;
    height: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  #omni-popup-title {
    box-sizing: border-box;
    border-bottom: 1px solid white;
    padding: 0.5vh;
    margin-bottom: 2vh;
    text-align: center;
  }
  #omni-popup-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 4vh;
    position: relative;
    text-align: left;
    min-height: 15vh;
  }
  .omni-popup-inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #omni-data .omni-popup-inner {
    padding-bottom: 1.5vh;
  }
  .omni-popup-inner.popup {
    position: static;
  }
  .yes-no-button {
    height: 4.5vh;
    margin-bottom: 0.6vh;
  }
  .expander {
    width: 2vh;
    object-fit: contain;
  }
  .venue-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 5vh;
    margin-left: 2vw;
    margin-right: 2vw;
    max-width: 23vh;
  }
  .venue-item .venue-name {
    font-weight: 600;
    margin-top: 1vh;
    text-align: center;
    font-size: 1.75vh;
    line-height: 2vh;
    height: 4vh;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
  }
}
/********* super-wide *********/
@media screen and (orientation: landscape) and (min-aspect-ratio: 16/8) {
  .landscape-phone #omni-content {
    padding-left: 1vw;
    padding-left: 1dvw;
    padding-right: 1vw;
    padding-right: 1dvw;
    padding-top: calc(9.5vh + env(safe-area-inset-top));
    padding-top: calc(9.5dvh + env(safe-area-inset-top));
    padding-bottom: calc(8.5vh + env(safe-area-inset-bottom));
    padding-bottom: calc(8.5dvh + env(safe-area-inset-bottom));
  }
  .standalone-landscape #omni-content {
    padding-left: 1vw;
    padding-left: 1dvw;
    padding-right: 1vw;
    padding-right: 1dvw;
    padding-top: calc(9.5vh + env(safe-area-inset-top));
    padding-top: calc(9.5dvh + env(safe-area-inset-top));
    padding-bottom: calc(8.5vh + env(safe-area-inset-bottom));
    padding-bottom: calc(8.5dvh + env(safe-area-inset-bottom));
  }
}
/********* tablets or fat phones *********/
@media screen and (orientation: landscape) and (max-aspect-ratio: 16/8) {
  .landscape-phone #omni-content {
    padding: 8.5vh 1vw 10vh 1vw;
    padding: 8.5dvh 1dvw 10dvh 1dvw;
    padding-top: calc(8.5vh + env(safe-area-inset-top));
    padding-top: calc(8.5dvh + env(safe-area-inset-top));
  }
}
@media screen and (orientation: portrait) {
  #omni-header {
    position: relative;
    z-index: 4;
  }
  #omni-content {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
  }
  #omni-content.full-screen #data-content-wrapper {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    padding-top: 6vh;
  }
  #omni-content.full-screen #data-content-wrapper #data-content {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    z-index: 1;
  }
  #omni-content.dark-background {
    background: black;
  }
  #omni-content #omni-media {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 55%;
  }
  #omni-content #omni-media .omni-video {
    max-width: 96%;
    max-height: 100%;
    box-sizing: border-box;
    border-radius: 6vw;
    border: 1px solid white;
  }
  #omni-content #omni-media .omni-video.fullscreen {
    border: none;
  }
  #omni-content #omni-media .omni-image {
    max-width: 96%;
    max-height: 100%;
    box-sizing: border-box;
    border-radius: 6vw;
    border: 1px solid white;
  }
  #omni-content #omni-media .omni-image.icon {
    border: unset;
    border-radius: unset;
    max-width: 60%;
    max-height: 60%;
  }
  #omni-content #omni-media .omni-image.no-border {
    border: none;
  }
  #omni-content #omni-data {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: content;
    margin-top: 1vh;
  }
  #posting-btns {
    width: 100vw;
    right: auto;
    left: -1vw;
    bottom: 7vh;
  }
}
/******** mobile version ********/
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  #omni-center {
    bottom: 23vw;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 23vw - 8.5vh);
    height: calc(100dvh - 23vw - 8.5dvh);
    justify-content: space-between;
    left: 0;
    position: fixed;
    width: 100vw;
  }
  .skinny-iphone #omni-center {
    height: calc(100vh - 23vw - 14vh);
    height: calc(100dvh - 23vw - 14dvh);
  }
  .mobile-tool-item {
    padding: 0.5vh 3vw;
    margin: 0.75vh 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px rgba(99, 99, 99, 0.4) solid;
    border-bottom: 1px rgba(99, 99, 99, 0.4) solid;
    background: rgba(0, 0, 0, 0.4);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 110%;
    line-height: 110%;
  }
  .mobile-tool-item img {
    margin-right: 3vw;
    width: 9vw;
    height: 9vw;
    object-fit: contain;
  }
  .venue-item {
    display: inline-block;
    margin: 1vh 0 1vh 3vw;
    vertical-align: top;
    width: 45.5vw;
    cursor: pointer;
  }
  .venue-item .venue-item-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 23.333vw;
    overflow: hidden;
  }
  .venue-item .venue-name {
    font-weight: 600;
    margin-top: 1vh;
    text-align: center;
    font-size: 1.75vh;
    line-height: 2vh;
    height: 4vh;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
  }
  .venue-item .image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    width: 29vw;
    height: 51.55555556vw;
    border: 1px solid rgb(169, 169, 169);
    border-radius: 2vh;
    overflow: hidden;
  }
  .venue-item .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .venue-item .image-wrapper img.text-only {
    height: 50%;
    width: 50%;
    object-fit: contain;
  }
  .venue-item .name-wrapper {
    font-weight: 600;
    margin-top: 0.5vh;
    text-align: center;
    max-width: 29vw;
  }
  .expander {
    width: 2vh;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
  }
  .yes-no-button {
    height: 4vh;
    height: 4dvh;
    margin-bottom: 0.6vh;
  }
}
/******** fat phone and tablets ********/
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  #omni-center {
    bottom: 10.5vh;
    bottom: 10.75dvh;
    display: flex;
    flex-direction: column;
    height: 81vh;
    height: 80.5dvh;
    justify-content: space-between;
    left: 0;
    position: fixed;
    width: 100vw;
  }
  .mobile-tool-item {
    padding: 0.5vh 3vw;
    margin: 0.75vh 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px rgba(99, 99, 99, 0.4) solid;
    border-bottom: 1px rgba(99, 99, 99, 0.4) solid;
    background: rgba(0, 0, 0, 0.4);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 110%;
    line-height: 110%;
  }
  .mobile-tool-item img {
    margin-right: 3vw;
    width: 3.9vw;
    height: 3.9vw;
    object-fit: contain;
  }
  .venue-item {
    display: inline-block;
    margin: 2vh 0 2vh 3vw;
    cursor: pointer;
    width: 29vw;
  }
  .venue-item .venue-item-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 15vw;
    overflow: hidden;
  }
  .venue-item .venue-name {
    font-weight: 600;
    margin-top: 1vh;
    text-align: center;
    font-size: 1.75vh;
    line-height: 2vh;
    height: 4vh;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
  }
  .venue-item .image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    width: 22vw;
    height: 39.11111111vw;
    border: 1px solid rgb(169, 169, 169);
    border-radius: 2vh;
    overflow: hidden;
  }
  .venue-item .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .venue-item .image-wrapper img.text-only {
    height: 50%;
    width: 50%;
    object-fit: contain;
  }
  .venue-item .name-wrapper {
    font-weight: 600;
    margin-top: 0.5vh;
    text-align: center;
    max-width: 22vw;
  }
  .expander {
    width: 2vh;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
  }
  .yes-no-button {
    height: 3.25vh;
    height: 3.25dvh;
    margin-bottom: 0.6vh;
  }
}
.dash-message-count {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: white;
  border: 1px solid white;
  width: 2vh;
  height: 2vh;
  position: absolute;
  border-radius: 50%;
  right: -0.25vh;
  top: -0.5vh;
  text-align: center;
  font-size: 1vh;
  font-weight: 700;
  line-height: 2vh;
  background: #424649;
  margin: 0;
}
.dash-message-count span.tiny {
  font-size: 0.75vh;
}
.dash-message-count.blue {
  background: #4A90E2;
}

.video_meeting_tile_wrapper {
  /*padding:10px;*/
}

.video_meeting_tile_break {
  flex-basis: 100%;
  height: 0;
}

.video_meeting_active_speaker_highlight > .video_meeting_tile_inner {
  border: 1.5px solid green;
}

.video_meeting_tile_inner {
  width: 100%;
  height: 100%;
  border: 1.5px solid white;
  border-radius: 1dvh;
  background: black;
  overflow: hidden;
}

.video_tile_video_elem {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.video_meeting_tile_inner_force_portrait video {
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
  z-index: 11;
  position: relative;
}

.video_meeting_hidden_tile {
  visibility: hidden;
  position: absolute;
}

.video_meeting_hidden_tile .chime_status_text_wrapper {
  display: none; /* Effectively override the explicit visibility styling.*/
}

#video-meeting-layer {
  position: fixed;
  z-index: 10001;
  height: 100dvh;
  overflow: hidden;
  background: black;
  box-sizing: border-box;
}

.ad-hoc-group-chat .message-count {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: white;
  border: 1px solid white;
  width: 2vh !important;
  height: 2vh !important;
  position: absolute;
  border-radius: 50%;
  right: -0.25vh;
  top: -0.5vh;
  text-align: center;
  font-size: 1vh;
  font-weight: 700;
  line-height: 2vh;
  background: #424649;
  margin: 0;
}

.video_meeting_frame_wrapper_with_gradients {
  mask-image: linear-gradient(to bottom, transparent, black 5%, black 90%, transparent), linear-gradient(to top, transparent, black 5%, black 90%, transparent);
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#video-meeting-frame-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex: 1;
}

.video_meeting_name_for_sharing {
  font-size: 2vh;
  padding-left: 1dvh;
  height: 2.5vh;
}

.video_tile_person_name {
  font-size: 2vh;
  position: relative;
  bottom: -2px;
  vertical-align: bottom;
  text-align: left;
  height: 100%;
  z-index: 12;
  display: flex;
  justify-content: left;
  align-items: flex-end;
  box-sizing: border-box;
  width: 100%;
  transform: translateY(-200%);
}
.video_tile_person_name .video_tile_person_name_text {
  padding: 20% 5% 5% 5%;
  width: 100%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.133), rgba(0, 0, 0, 0.266), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.video_tile_person_name .video_tile_person_name_text .ellipsis {
  max-width: 75%;
}

.video_tile_person_name_text.sharing > div {
  display: none;
}

#video-meeting-layer[minimized=true] .video_tile_person_name, .video_meeting_tile_wrapper[minimized-for-speaker-mode=true] .video_tile_person_name {
  font-size: 1vh;
  line-height: 1.25vh;
}

#video-meeting-layer[minimized=true] #video-meeting-text-when-minimized {
  display: block;
}

#video-meeting-layer[minimized=false] #video-meeting-text-when-minimized {
  display: none;
}

#video-meeting-layer[minimized=true] {
  overflow: visible;
}

#video-meeting-text-when-minimized {
  position: absolute;
  top: -5dvh;
  padding: 1dvh 1dvw;
  text-align: center;
  width: 80%;
}

.chime_status_text_wrapper {
  font-size: 150%;
  position: relative;
  top: -100%;
  width: 100%;
  text-align: center;
  height: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 1dvh;
}

.snackbar_wrapper {
  width: 100%;
  position: fixed;
  bottom: 10vh;
  display: flex;
  align-items: center;
  z-index: 10010;
}

.snackbar {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 1dvh;
  padding: 1dvh;
  max-width: 40vw;
  box-sizing: border-box;
  font-size: 150%;
  margin-left: auto;
  margin-right: auto;
  z-index: 10010;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
.snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
  z-index: 10010;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 10vh;
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 10vh;
    opacity: 1;
  }
}
@-webkit-keyframes fadeout {
  from {
    bottom: 10vh;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
@keyframes fadeout {
  from {
    bottom: 10vh;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
.dynamic-popup-body-spinner-img {
  transition: opacity 1s ease-in-out;
}

.video_tile_mute_status {
  position: relative;
  top: -300%;
  vertical-align: bottom;
  text-align: left;
  height: 100%;
  z-index: 12;
  display: flex;
  justify-content: right;
  align-items: flex-end;
  box-sizing: border-box;
  width: 100%;
}
.video_tile_mute_status .video_tile_mute_status_button {
  width: 6vh;
  height: 6vh;
  margin: 2vh;
  text-align: center;
  padding: 1vh;
  box-sizing: border-box;
  border-radius: 3vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.video_tile_mute_status .video_tile_mute_status_button .video_tile_mute_status_img {
  height: 100%;
}

body {
  color: #fff;
  font-weight: 600;
  font-family: SourceSansPro;
  margin: 0;
  padding: 0;
  font-size: 1.75vh;
  line-height: 2vh;
  -webkit-text-size-adjust: none;
}
body.slcket-site {
  background: black;
}

.loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.loader#upload-loader {
  bottom: 13vh;
  font-size: 12px;
  height: 0.5em;
  margin: 0;
  position: absolute;
  right: 4vw;
  width: 0.5em;
}

.scale-in-ver-bottom {
  -webkit-animation: scale-in-ver-bottom 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-in-ver-bottom 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

#modal-layer-dynamic {
  width: 100vw;
  border: 0;
  border-radius: 0;
  top: 50%;
  height: 100vh;
  max-width: unset;
  transition: opacity 2s ease-in-out;
  background: black;
}
#modal-layer-dynamic.full-height {
  height: 100%;
}
#modal-layer-dynamic.all-black {
  background: black !important;
}

@-webkit-keyframes scale-in-ver-bottom {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes scale-in-ver-bottom {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
}
@-webkit-keyframes load5 {
  0%, 100% {
    -webkit-box-shadow: 0 -2.6em 0 0 #fff, 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
    box-shadow: 0 -2.6em 0 0 #fff, 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
  }
  12.5% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0 #fff, 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0 #fff, 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5);
  }
  25% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7), 2.5em 0 0 0 #fff, 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7), 2.5em 0 0 0 #fff, 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  37.5% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5), 2.5em 0 0 0 rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0 #fff, 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5), 2.5em 0 0 0 rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0 #fff, 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.7), 0 2.5em 0 0 #fff, -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.7), 0 2.5em 0 0 #fff, -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  62.5% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.5), 0 2.5em 0 0 rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0 #fff, -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.5), 0 2.5em 0 0 rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0 #fff, -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  75% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.7), -2.6em 0 0 0 #fff, -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.7), -2.6em 0 0 0 #fff, -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  87.5% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.5), -2.6em 0 0 0 rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0 #fff;
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.5), -2.6em 0 0 0 rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0 #fff;
  }
}
@keyframes load5 {
  0%, 100% {
    -webkit-box-shadow: 0 -2.6em 0 0 #fff, 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
    box-shadow: 0 -2.6em 0 0 #fff, 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
  }
  12.5% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0 #fff, 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0 #fff, 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5);
  }
  25% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7), 2.5em 0 0 0 #fff, 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7), 2.5em 0 0 0 #fff, 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  37.5% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5), 2.5em 0 0 0 rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0 #fff, 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5), 2.5em 0 0 0 rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0 #fff, 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.7), 0 2.5em 0 0 #fff, -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.7), 0 2.5em 0 0 #fff, -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  62.5% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.5), 0 2.5em 0 0 rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0 #fff, -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.5), 0 2.5em 0 0 rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0 #fff, -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  75% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.7), -2.6em 0 0 0 #fff, -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.7), -2.6em 0 0 0 #fff, -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
  }
  87.5% {
    -webkit-box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.5), -2.6em 0 0 0 rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0 #fff;
    box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.5), -2.6em 0 0 0 rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0 #fff;
  }
}
input:focus, textarea:focus {
  outline: 0;
}

input:hover {
  cursor: text;
}

.fade:before {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

.arrow-right {
  position: absolute;
  bottom: 9vh;
  right: 2vw;
  height: 2.5vw;
  margin-left: 2vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 2.5vw;
  cursor: pointer;
  z-index: 99;
}

.arrow-right.disabled {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: not-allowed;
  pointer-events: none;
}

.arrow-left {
  position: absolute;
  bottom: 9vh;
  height: 2.5vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 2vw;
  width: 2.5vw;
  cursor: pointer;
  z-index: 99;
}

.expand {
  background-image: url("../images/icons/2022/expand.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 2vh;
  cursor: pointer;
}

.collapse {
  background-image: url("../images/icons/2022/collapse.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 2vh;
  cursor: pointer;
}

.moving-select-input {
  padding: 1vh 0vw;
  color: #4497f7;
  border: 1px solid #7f7f7f;
  border-radius: 0.75vh;
  text-align-last: center;
  background: #212121;
  font-weight: 600;
  cursor: pointer;
}
.moving-select-input option {
  padding: 0.25vw;
  text-align: center;
}

.yellow-border {
  border-color: #ffdd00 !important;
}

.green-border {
  border-color: #23e823 !important;
}

.light-grey-text {
  color: #9b9b9b;
}

#content.excel {
  background-image: url(https://static.slcket.com/excel-sports-camp/excel-bg.jpg);
}

#content:before {
  content: "";
  background-color: #151515;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  width: 100%;
}

#content.fade:before {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

#selector-frame {
  position: fixed;
  height: 100vh;
  height: 100dvh;
  top: 0;
  right: 0;
  width: 65vw;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9000;
}
#selector-frame.no-bg-image {
  background: rgba(0, 0, 0, 0.75);
}

#right-media-frame {
  position: fixed;
  height: 100vh;
  height: 100dvh;
  top: 0;
  right: 0;
  width: 65vw;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
#right-media-frame.no-bg-image {
  background: rgba(0, 0, 0, 0.75);
}

#right-frame {
  position: absolute;
  height: 100vh;
  height: 100dvh;
  top: 0;
  right: 0;
  width: 65vw;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#right-frame.no-background {
  background: none !important;
}
#right-frame.no-bg-image {
  background: rgba(0, 0, 0, 0.75);
}
@media (orientation: portrait) {
  #right-frame {
    display: none;
  }
}
@media (orientation: landscape) {
  #right-frame {
    display: block;
  }
}
#right-frame .fullscreen-active {
  display: block !important;
}

#right-frame #right-overlay {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0.4;
  background-color: #000;
}

#right-frame #right-overlay.user-image {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0.8;
}

#left-overlay {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.slcks-earned {
  padding: 0.5vh;
  border-radius: 0.6vh;
  border: 1px solid #23e823;
  display: inline-flex;
  font-size: 1.5vh;
  line-height: 1.75vh;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.slcks-earned img {
  width: 1.5vh;
  height: 1.5vh;
}

#left-overlay.user-image {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0.4;
  background-color: #000;
}

.nav-button {
  box-sizing: unset;
  height: 3vw;
  width: 3vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.85vw;
}

.nav-button#slckets-button.dark {
  background-image: url(https://static.slcket.com/web/2020/icons/connects-dark.png);
}

.nav-button#slckets-button.white {
  background-image: url(https://static.slcket.com/web/2020/icons/connects-white.png);
}

.nav-button#post-button {
  border: none;
}

.nav-button#post-button.dark {
  background-image: url(https://static.slcket.com/web/2020/icons/post-dark-wl.png);
}

.nav-button#post-button.white {
  background-image: url(https://static.slcket.com/web/2020/icons/post-white-wl.png);
}

.nav-button#search-button {
  border: none;
}

.nav-button#search-button.dark {
  background-image: url(https://static.slcket.com/web/2020/icons/search-dark.png);
}

.nav-button#search-button.white {
  background-image: url(https://static.slcket.com/web/2020/icons/search-white.png);
}

.nav-button#my-info-button {
  border: none;
}

.nav-button#my-info-button.dark {
  background-image: url(https://static.slcket.com/web/2020/icons/my-info-dark.png);
}

.nav-button#my-info-button.white {
  background-image: url(https://static.slcket.com/web/2020/icons/my-info-white.png);
}

.nav-button#invite-button {
  border: none;
}

.nav-button#invite-button.dark {
  background-image: url(https://static.slcket.com/web/2020/icons/invite-dark.png);
}

.nav-button#invite-button.white {
  background-image: url(https://static.slcket.com/web/2020/icons/invite-white.png);
}

.nav-button-app {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 1.7142857143vw;
  width: 1.7142857143vw;
  margin: 0 0.28571vw !important;
  position: relative;
  z-index: 2;
}

.sm {
  font-size: 1.5vw;
}

.md {
  font-size: 3vw;
}

.lg {
  font-size: 4vw;
}

.light {
  font-weight: 500;
}

a {
  color: white;
  text-decoration: none;
}

.cursor-pointer {
  cursor: pointer;
}

#content .home-pane .hamburger {
  position: absolute;
  top: 2vh;
  left: 2vh;
  width: 2vw;
}

#content .home-pane #app_name_wrapper {
  margin-top: 0 !important;
}

#content .home-pane .nav-button#message-button {
  background: url(../assets/images/message-icon.png);
  background-size: contain;
  background-position: center;
  display: block;
  border-radius: 0;
  height: 48px;
  -ms-flex-item-align: start;
  align-self: flex-start;
  margin-top: 4px !important;
  width: 48px;
  background-repeat: no-repeat;
  border: none !important;
}

#content .home-pane .nav-button#post-button {
  background-image: url(https://static.slcket.com/web/2020/icons/post-white-wl.png);
}

#content .home-pane .nav-button#slckets-button {
  background-image: url(https://static.slcket.com/web/2020/icons/connects-white.png);
}

#content .home-pane .nav-button#search-button {
  background-image: url(https://static.slcket.com/web/2020/icons/search-white.png);
}

#content .home-pane .nav-button#usay-button {
  background-image: url(https://static.slcket.com/web/2020/icons/usay-white.png);
}

#content .home-pane .nav-button#my-info-button {
  background-image: url(https://static.slcket.com/web/2020/icons/my-info-white.png);
}

#content .home-pane .nav-button#invite-button {
  background-image: url(https://static.slcket.com/web/2020/icons/invite-white.png);
}

#content .home-pane .login_details {
  display: none;
}

#content .home-pane .home-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: absolute;
  bottom: 4vh;
  font-size: 1.6vh;
  font-weight: 500;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#content .home-pane .home-links a:after {
  content: "|";
  line-height: 1;
  margin: 0 0.5vw;
}

#content .home-pane .home-links a:last-child:after {
  content: "";
  display: none;
}

#content .container .checkbox,
#content .container #all-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

#content .checkmark,
#content #all-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 2vh;
  height: 2vh;
  border-radius: 50%;
  background-color: #eee;
  cursor: pointer;
}

#content .container:hover input ~ .checkmark,
#content .container:hover input ~ #all-checkmark {
  background-color: #ccc;
}

#content .container input:checked ~ .checkmark,
#content .container input:checked ~ #all-checkmark {
  background-color: #4497f7;
}

#content .checkmark:after,
#content #all-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

#content .container input:checked ~ .checkmark:after,
#content .container input:checked ~ #all-checkmark:after {
  display: block;
}

#content .container .checkmark:after,
#content .container #all-checkmark:after {
  top: 45%;
  left: 50%;
  width: 20%;
  transform: translate(-50%, -50%);
  height: 40%;
  border: solid #fff;
  border-width: 0 0.25vw 0.25vw 0;
  transform: rotate(45deg) translate(-77%, -22%);
}

#right-frame .agreement-body {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #f1f1f1;
  height: 90vh;
  margin-top: 10vh;
  overflow-y: scroll;
  padding: 0 6vw;
  position: relative;
}

select {
  -webkit-appearance: none;
  width: auto;
  border-radius: 5px;
  text-align-last: left;
}
select option {
  font-weight: 600;
  text-align: left;
}

select#grade {
  width: 22.5vw;
}

#email_wrapper, #phone_wrapper {
  font-size: 4.5vw;
  font-weight: 700;
  position: relative;
  text-align: center;
  width: 100%;
  color: #f1f1f1;
}

#email_wrapper input, #phone_wrapper input {
  background: 0 0;
  border: 0;
  color: inherit;
  display: inline-block;
  font-size: 13px;
  font-weight: inherit;
  text-align: center;
  margin: 0 0 0 2vw;
  width: 40vw;
  padding: 0;
}

#display_name_wrapper {
  font-size: 6vw;
  font-weight: 700;
  position: relative;
  text-align: center;
  width: 100%;
  color: #f1f1f1;
  text-transform: uppercase;
  text-align: center;
}

#display_name_wrapper input {
  background: 0 0;
  border: 0;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  text-align: center;
  margin: 0 0 0 2vw;
  width: 80vw;
  padding: 0;
}

@-webkit-keyframes moveThreeSlideshow {
  0% {
    -webkit-transform: translateY(-600%);
    transform: translateY(-600%);
  }
  10% {
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%);
  }
  25% {
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%);
  }
  40% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }
  55% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }
  70% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  85% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes moveFourSlideshow {
  0% {
    -webkit-transform: translateY(-800%);
    transform: translateY(-800%);
  }
  10% {
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%);
  }
  15% {
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%);
  }
  25% {
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%);
  }
  45% {
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%);
  }
  60% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }
  70% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }
  85% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  95% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes moveFourSlideshow {
  0% {
    -webkit-transform: translateY(-800%);
    transform: translateY(-800%);
  }
  10% {
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%);
  }
  15% {
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%);
  }
  25% {
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%);
  }
  45% {
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%);
  }
  60% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }
  70% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }
  85% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  95% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.card-pane #card .loader-small {
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid grey;
  width: 12px;
  height: 12px;
  -webkit-animation: spin 0.5s linear infinite;
  animation: spin 0.5s linear infinite;
  display: inline-block;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#mobile-frame .agreement-body {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #f1f1f1;
  height: 90vh;
  margin-top: 10vh;
  overflow-y: scroll;
  padding: 0 8vw 0 12vw;
  position: relative;
}

@font-face {
  font-family: SourceSansPro;
  src: url(../fonts/source-sans-pro/SourceSansPro-Regular.otf) format("opentype");
}
@font-face {
  font-family: SourceSansPro;
  font-weight: 700;
  src: url(../fonts/source-sans-pro/SourceSansPro-Bold.otf) format("opentype");
}
@font-face {
  font-family: SourceSansPro;
  font-weight: 600;
  src: url(../fonts/source-sans-pro/SourceSansPro-Semibold.otf) format("opentype");
}
@font-face {
  font-family: SourceSansPro;
  font-weight: light;
  src: url(../fonts/source-sans-pro/SourceSansPro-Light.otf) format("opentype");
}
@font-face {
  font-family: Inkfree;
  src: url(../fonts/inkfree/Inkfree-Regular.ttf) format("truetype");
}
@font-face {
  font-family: Kreon;
  src: url(../fonts/kreon/Kreon-Regular.ttf) format("truetype");
}
@font-face {
  font-family: Library3amSoft;
  src: url(../fonts/library-3-am/Library3amsoft.otf) format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: BywayC;
  src: url(../fonts/BywayC/BywayC.ttf) format("truetype");
}
@font-face {
  font-family: JdLcdRounded;
  font-weight: 400;
  src: url(../fonts/jd_lcd_rounded/jd_lcd_rounded.ttf) format("truetype");
}
@font-face {
  font-family: Telegraphic;
  src: url(../fonts/telegraphic/telegraphic.regular.ttf) format("truetype");
}
@font-face {
  font-family: FreeSerifBold;
  font-weight: 700;
  src: url(../fonts/FreeSerif/FreeSerifBold-eD53.ttf) format("truetype");
}
@font-face {
  font-family: coolvetica;
  font-weight: 700;
  src: url("../fonts/Coolvetica/coolvetica rg.ttf") format("truetype");
}
@font-face {
  font-family: SFButtacupLettering;
  font-weight: 700;
  src: url(../fonts/SFButtacup/SFButtacupLettering.ttf) format("truetype");
}
@font-face {
  font-family: Lavigne;
  font-weight: 700;
  src: url(../fonts/Lavigne/Lavigne.otf) format("opentype");
}
@font-face {
  font-family: Allura-Regular;
  font-weight: 700;
  src: url(../fonts/Allura/Allura-Regular.otf) format("opentype");
}
@font-face {
  font-family: Radicalis;
  font-weight: 700;
  src: url(../fonts/Radicalis/Radicalis.ttf) format("truetype");
}
@font-face {
  font-family: Fake-Serif;
  font-weight: 700;
  src: url(../fonts/FakeSerif/FakeSerif-K4dp.ttf) format("truetype");
}
@font-face {
  font-family: ImpactLabel;
  font-weight: 700;
  src: url(../fonts/Impact_Label/Impact_Label.ttf) format("truetype");
}
@font-face {
  font-family: KongQuest-Regular;
  font-weight: 700;
  src: url(../fonts/KongQuest/KongQuest-Regular.otf) format("opentype");
}
@font-face {
  font-family: trueCrimes;
  font-weight: 700;
  src: url(../fonts/TrueCrimes/true-crimes.ttf) format("truetype");
}
@font-face {
  font-family: DonGraffitiRegular;
  font-weight: 700;
  src: url(../fonts/DonGraffiti/DonGraffiti.otf) format("opentype");
}
@font-face {
  font-family: LemonTuesday;
  font-weight: 700;
  src: url(../fonts/LemonTuesday/LemonTuesday.otf) format("opentype");
}
@font-face {
  font-family: Digital-7-Mono;
  src: url(../fonts/digital-7-mono/digital-7-mono.ttf) format("truetype");
}
@font-face {
  font-family: Izza;
  src: url(../fonts/Izza/Izza-yy1V.ttf) format("truetype");
}
@font-face {
  font-family: Bahnschrift;
  src: url(../fonts/Bahnschrift/Bahnschrift.ttf) format("truetype");
}
@font-face {
  font-family: AgustusMerdeka;
  src: url(../fonts/AgustusMerdeka/AgustusMerdeka-4BgP4.otf) format("opentype");
}
#content .bottom-overlay {
  position: fixed;
  bottom: -108vh;
  left: -45vw;
  width: 190vw;
  border-radius: 50%;
  height: 120vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding-top: 5vw;
  background: #000;
}

#content .bottom-overlay p {
  color: #fff;
}

#content #button-left, #content #button-right {
  font-size: 28px;
  cursor: pointer;
}

#content .self-row {
  background: #e6162c;
  position: absolute;
  width: 100%;
  bottom: 10vh;
}

#content #add-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 150px;
  width: 150px;
  background-image: url(../assets/images/2021-gallery-icon.png);
  background-size: cover;
  border-radius: 50%;
  background-repeat: no-repeat;
  color: #fff;
  font-weight: 600;
}

#content #save-item {
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  bottom: 3vh;
  font-weight: 600;
  border-radius: 50%;
  background-color: #e6162c;
}

.mobile-arrows img {
  width: 6vw !important;
  height: 6vw !important;
}

.cursor-pointer {
  cursor: pointer;
}

input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

.display-none {
  display: none !important;
}

.pointer-none {
  pointer-events: none;
}

.item-disabled {
  filter: brightness(0.5);
  pointer-events: none;
}

.info-toggle .info-green {
  display: none;
}
.info-toggle.on div {
  color: #23e823;
}
.info-toggle.on .info-green {
  display: inline;
}
.info-toggle.on .info-white {
  display: none;
}

.fullscreen-two-column-dash {
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to bottom, #000 95%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, #000 95%, rgba(0, 0, 0, 0));
  overflow: hidden;
  width: 100%;
}
.fullscreen-two-column-dash .fullscreen-two-column-content {
  box-sizing: border-box;
  display: flex;
  padding: 1vh 15vw;
  flex-wrap: wrap;
  justify-content: space-between;
  color: white;
  font-weight: 600;
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 5%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 5%);
  padding-bottom: calc(8vh + env(safe-area-inset-bottom));
}

.bordered-full-width-item {
  box-sizing: border-box;
  padding: 1vh 1vw;
  margin: 1vh 0;
  width: 34.5vw;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px rgba(99, 99, 99, 0.4) solid;
}

.dashified-dash {
  position: absolute;
  bottom: 8.25vh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 95%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, #000 95%, rgba(0, 0, 0, 0));
  height: 83.5vh;
  height: calc(83.5vh - env(safe-area-inset-bottom));
  width: 100%;
}
.dashified-dash .dashified-content {
  width: 100%;
  color: white;
  font-weight: 600;
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 3.5vh 0 8vh 0;
  padding-bottom: calc(8vh + env(safe-area-inset-bottom));
  box-sizing: border-box;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 5%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 5%);
}
.dashified-dash .dashified-content.flex-box {
  display: flex;
  flex-wrap: wrap;
  padding: 4vh 1vw 2vh 1vw;
}
.dashified-dash .dashified-content.flex-box .item {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 5vh;
  margin-left: 2vw;
  margin-right: 2vw;
  max-width: 18vh;
}
.dashified-dash .dashified-content.flex-box .item.four-columns {
  width: 15vw;
}
.dashified-dash .dashified-content.flex-box .item.five-columns {
  width: 11vw;
}

.centered-content-dash {
  color: #fff;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  height: 82vh;
  justify-content: center;
  margin-top: 9vh;
  width: 100%;
}

.top-aligned-content-dash {
  color: #fff;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  height: 82vh;
  justify-content: flex-start;
  margin-top: 9vh;
  width: 100%;
}

#modal-overlay-buttons {
  bottom: 0;
  box-sizing: border-box;
  display: block;
  left: 0;
  position: fixed;
  width: 100vw;
  z-index: 999999;
}
#modal-overlay-buttons .icon-with-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#modal-overlay-buttons .icon-with-word img {
  height: 3vh;
}
#modal-overlay-buttons.no-background {
  background: none;
}
#modal-overlay-buttons > * {
  pointer-events: all;
}

#dots-wrapper {
  text-align: center;
  padding-bottom: 0.5vh;
}
#dots-wrapper .dot {
  background-color: white;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  margin: 0 1vw;
  vertical-align: middle;
}
#dots-wrapper .dot.premium {
  background-color: #ffdc01;
}
#dots-wrapper .dot.small {
  height: 0.75vh;
  width: 0.75vh;
}
#dots-wrapper .dot.medium {
  height: 1vh;
  width: 1vh;
}
#dots-wrapper .dot.large {
  height: 1.25vh;
  width: 1.25vh;
}
#dots-wrapper .dot.hidden {
  visibility: hidden;
}

#video-play-button {
  z-index: 9999;
  cursor: pointer;
  position: relative;
}
#video-play-button img {
  height: 4vh;
  display: block;
}
#video-play-button.fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#video-play-button.fullscreen img {
  height: 5vh;
  display: block;
}

#phone-preview-wrapper {
  position: relative;
  width: 34.5vh;
  height: 72vh;
  border-radius: 4vh;
  border: 1.5vh solid #000;
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-bottom: 10vh;
}
#phone-preview-wrapper .background-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  border-radius: 2.5vh;
  position: absolute;
  left: 0;
  top: 0;
}
#phone-preview-wrapper #phone-contact-wrapper {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  padding-top: 4vh;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 6;
}
#phone-preview-wrapper #phone-contact-wrapper #phone-content-layer {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  z-index: 1;
  font-size: 1.5vh;
  padding: 0 1.5vh 6vh 1.5vh;
  line-height: 1.75vh;
}
#phone-preview-wrapper #logo-wrapper {
  padding-bottom: 4vh;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 9;
}
#phone-preview-wrapper #logo-wrapper #phone-preview-logo-image {
  display: block;
  max-width: 30vh;
  max-height: 15vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  margin: 6vh auto 0 auto;
}

.vertical-video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: 9999;
  border-radius: 2.5vh;
}

.horizontal-video, .square-video {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  object-fit: cover;
  z-index: 9999;
  box-sizing: border-box;
  border: 1px white solid;
  border-radius: 2vh;
}

#phone-preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5vh;
  z-index: 6;
  background: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}
#phone-preview-footer .icon-with-word {
  pointer-events: none;
  width: auto;
}
#phone-preview-footer .icon-with-word img {
  height: auto;
  max-height: 2vh;
  max-width: 2vh;
  pointer-events: none;
}
#phone-preview-footer .icon-with-word div {
  font-size: 0.7vh;
  width: auto;
  line-height: 0.8vh;
  margin: 0;
}

#phone-preview-logo-text {
  width: 30vh;
  height: 15vh;
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2vh;
  text-align: center;
  z-index: 6;
}

input[type=time]::-webkit-calendar-picker-indicator {
  display: none;
}

.item-2col.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pop-up-footer {
  box-sizing: border-box;
  position: absolute;
  display: none;
  z-index: 99999;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}
.pop-up-footer .modal {
  box-sizing: border-box;
  color: white;
  padding: 1vh 2vw 7vh 2vw;
  background: black;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 65vw;
  right: 0;
}
.pop-up-footer .modal.wide {
  width: 100%;
}
.pop-up-footer .modal .comment-row {
  margin: 1vh 0;
  text-align: left;
  width: auto;
  align-items: center;
}
.pop-up-footer .modal .comment-row .img {
  line-height: 1;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  border-radius: 50%;
  width: 20px;
  background-color: #eee;
  color: white;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #4497f7;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 7px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.fakeserif {
  font-family: Fake-Serif;
  font-weight: 700;
}

.kongquest {
  font-family: KongQuest-Regular;
}

.lemontuesday {
  font-family: LemonTuesday;
}

.coolvetica {
  font-family: coolvetica;
}

.impactlabel {
  font-family: ImpactLabel;
  font-weight: 700;
}

.truecrimes {
  font-family: trueCrimes;
  font-weight: 700;
}

.bahnschrift {
  font-family: Bahnschrift;
}

.kreon {
  font-family: Kreon;
}

.sourcesanspro {
  font-family: SourceSansPro;
}

#home-welcome-header {
  height: 100%;
  position: fixed;
  top: 0;
  left: 27.95vw;
  display: flex;
  align-items: center;
  justify-content: left;
  box-sizing: border-box;
}
#home-welcome-header img {
  height: 25.3493333333vw;
}

#home-sub-header {
  height: 100%;
  width: 70vw;
  background-size: contain;
  position: fixed;
  top: 0;
  right: 0vw;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#home-sub-header div {
  color: white;
  font-weight: 700;
  font-size: 4vw;
  margin-bottom: 2.5vh;
  letter-spacing: -0.1vw;
  text-shadow: 0 0 0.25vw #fff, 0 0 0.25vw #000;
}

#home-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25vh;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

.new-search-input {
  border: 1px solid #000;
  padding: 1vh 1vw;
  width: 30vw;
  font-weight: 600;
  font-size: 1.5vh;
  line-height: 2vh;
  border-radius: 1.5vh;
  resize: none;
  background-color: #fff;
  color: #666666;
  outline: none;
  font-family: SourceSansPro;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.625vh;
}

/******** mobile version ********/
@media screen and (orientation: portrait) and (max-aspect-ratio: 8/13) {
  body {
    font-size: 3vw;
    line-height: 3.5vw;
  }
  #selector-frame {
    width: 100vw;
  }
  #right-media-frame {
    width: 100vw;
  }
  .modal-overlay {
    z-index: 1009;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    width: 100vw;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    box-sizing: border-box;
  }
  .pop-up-footer .modal {
    background: #000;
    box-sizing: border-box;
    width: 100vw;
    min-height: 80vw;
    max-height: 80vh;
    border-top-left-radius: 6vw;
    border-top-right-radius: 6vw;
    color: #fff;
    padding: 1vh 3vw 23vw 3vw;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .new-search-input {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7.1vw;
    display: inline-block;
    margin: 0;
    z-index: 9999;
    border-radius: 2vw;
    padding: 1vw;
    min-height: 6.5vw;
    text-align: left;
    font-size: 4.25vw;
    line-height: 5vw;
    width: 60vw;
    box-sizing: border-box;
  }
  .skinny-iphone .new-search-input {
    bottom: 9vw;
  }
  .icon-with-word {
    width: auto;
  }
  .dashified-dash {
    bottom: 23vw;
    bottom: calc(23vw + env(safe-area-inset-bottom));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 95%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, #000 95%, rgba(0, 0, 0, 0));
    height: calc(100% - 42vw);
    height: calc(100% - 42vw - env(safe-area-inset-bottom));
    /*&.search-active {
      height: calc(100% - 56vw);
    }*/
  }
  .dashified-dash.android-search-active {
    height: 60vw;
  }
  .dashified-dash.iphone-search-active {
    height: 35vh;
    height: 45dvh;
  }
  .skinny-android .dashified-dash.android-search-active {
    height: 75vw;
  }
  .skinny-iphone .dashified-dash {
    height: calc(100% - 41vw - 6.5vh);
  }
  .skinny-iphone .dashified-dash.iphone-search-active {
    height: 41vh;
    height: 45dvh;
  }
  .skinny-iphone .dashified-dash {
    bottom: calc(18vw + env(safe-area-inset-bottom));
    /*&.search-active {
      height: calc(100% - 63vw - 2vh);
    }*/
  }
  .dashified-dash .dashified-content {
    width: 100vw;
    color: #fff;
    font-weight: 600;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 3vh 0 20vh 0;
    box-sizing: border-box;
    max-height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 5%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 5%);
  }
  .fixed-bottom-right {
    right: 2vw;
    bottom: 2.1vw;
    bottom: calc(2.1vw + env(safe-area-inset-bottom));
  }
  .skinny-iphone .fixed-bottom-right {
    bottom: 5vw;
  }
  .fixed-bottom-left {
    left: 2vw;
    bottom: 2.1vw;
    bottom: calc(2.1vw + env(safe-area-inset-bottom));
  }
  .skinny-iphone .fixed-bottom-left {
    bottom: 5vw;
  }
  #slcket-year-input-area, #slcket-month-input-area, #slcket-day-input-area, #slcket-hour-input-area, #slcket-minute-input-area {
    font-size: 125% !important;
    line-height: 125% !important;
  }
  #modal-layer-dynamic.slcket-style body {
    font-size: 2.5vw;
    line-height: 3.5vw;
  }
  #modal-layer-dynamic.slcket-style .dashified-content .dashified-dash {
    width: 100vw;
  }
  #modal-layer-dynamic.slcket-style {
    /* skinny phones portraiti */
  }
  #modal-layer-dynamic.slcket-style .top-info-banner {
    font-size: 125%;
    left: 0vw;
    line-height: 135%;
    padding: 3vw;
    min-height: 13vw;
  }
  #modal-layer-dynamic.slcket-style .top-banner {
    font-size: 3vw;
  }
  #modal-layer-dynamic.slcket-style .scrollable {
    height: 76vh;
  }
  #modal-layer-dynamic.slcket-style .skinny-iphone {
    padding-bottom: 3.5vw;
  }
  #modal-layer-dynamic.slcket-style .text-content {
    font-size: 2.5vw;
  }
  #modal-layer-dynamic.slcket-style .text-content p {
    font-size: 2.5vw;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles {
    height: 75vh;
    text-align: center;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles h3 {
    font-size: 4vw;
    text-transform: uppercase;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles ul {
    list-style-type: none;
    padding-left: 0;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles ul li {
    padding-left: 0.5vw;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles ul li:before {
    content: "- ";
    padding-right: 0.25vw;
  }
  .dashified-dash .dashified-content {
    width: 100%;
  }
  #overlay_modal_layer {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }
  #overlay_modal_layer.active {
    display: block;
  }
  #overlay_modal_layer .profile-background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -20%;
    filter: opacity(0.2);
    height: 75%;
    left: -20%;
    position: absolute;
    width: 100%;
  }
  .overlay-login-layer {
    bottom: 0;
    position: fixed;
    left: 0;
    width: 100vw;
    border-radius: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 25vw;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
  }
  .fat-iphone .overlay-login-layer {
    height: 60vw;
  }
  .overlay-login-layer.android-expanded {
    height: 100vw;
  }
  .overlay-login-layer.full-screen {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    padding-top: 0;
    width: 100vw;
  }
  .fat-iphone .overlay-login-layer.full-screen {
    padding-top: 0;
  }
  .overlay-login-layer.full-screen {
    /*
    .skinny-iphone & {
      padding-top: 5vh;
    }
    */
  }
  .alphapointe .overlay-login-layer {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9), rgb(0, 0, 0), rgb(0, 0, 0));
    padding-top: 10vw;
  }
  .alphapointe .overlay-login-layer p, .alphapointe .overlay-login-layer #text-agreement, .alphapointe .overlay-login-layer #text-13-over, .alphapointe .overlay-login-layer #text-send-sms {
    font-weight: 600;
  }
  .overlay-login-layer #inside {
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .overlay-login-layer .blue-input {
    font-size: 3vw;
    height: auto;
    margin-bottom: 0;
  }
  .overlay-login-layer .blue-input::placeholder {
    color: white;
  }
  .overlay-login-layer .link {
    color: #4497f7;
    text-decoration: none;
    font-weight: 600;
  }
  .slcks-earned {
    padding: 0.25vh 1vw;
    border-radius: 1.5vw;
    position: static;
    transform: none;
  }
  .slcks-earned img {
    width: 1.5vh;
    height: 1.5vh;
  }
}
/******** tablet / fatphone version ********/
@media screen and (orientation: portrait) and (min-aspect-ratio: 8/13) {
  body, .sport-entity-item {
    font-size: 1.8vw;
    line-height: 2.1vw;
  }
  #right-media-frame {
    width: 100vw;
  }
  .modal-overlay {
    z-index: 1009;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    width: 100vw;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    box-sizing: border-box;
  }
  .pop-up-footer .modal {
    background: #000;
    box-sizing: border-box;
    width: 100vw;
    min-height: 24vh;
    min-height: 24dvh;
    max-height: 80vh;
    max-height: 80dvh;
    border-top-left-radius: 3.5vw;
    border-top-right-radius: 3.5vw;
    color: #fff;
    padding: 1vh 2vw 14vw 2vw;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .new-search-input {
    color: #666666;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4.5vh;
    bottom: 4.75dvh;
    display: inline-block;
    margin: 0;
    z-index: 9999;
    border-radius: 1.5vw;
    padding: 1vw;
    width: 74vw;
  }
  .icon-with-word {
    width: auto;
  }
  .dashified-dash {
    bottom: 8.5vh;
    bottom: 8.5dvh;
    bottom: calc(8.5dvh + env(safe-area-inset-bottom));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 95%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, #000 95%, rgba(0, 0, 0, 0));
    height: 84vh;
    height: calc(84vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: 84dvh;
    height: calc(84dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    /*
    &.android-search-active {
      // Any idea what values to use here?
      height: 45vh;
      height: 45dvh;
    }

    &.iphone-search-active {
      height: 55vh;
      height: 55dvh;
    }*/
  }
  .dashified-dash .dashified-content {
    width: 100vw;
    color: #fff;
    font-weight: 600;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 3vh 0 20vh 0;
    box-sizing: border-box;
    max-height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 5%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 5%);
  }
  .dashified-dash .dashified-content #footer-agenda img, .dashified-dash .dashified-content #footer-docs img, .dashified-dash .dashified-content #footer-vote img, .dashified-dash .dashified-content #footer-minutes img, .dashified-dash .dashified-content #footer-action-items img {
    width: 3.9vw !important;
    height: 3.9vw !important;
  }
  .fixed-bottom-right {
    right: 3vw;
    bottom: 1vh;
    bottom: 1dvh;
    bottom: calc(1dvh + env(safe-area-inset-bottom));
  }
  .fixed-bottom-left {
    left: 3vw;
    bottom: 1vh;
    bottom: 1dvh;
    bottom: calc(1dvh + env(safe-area-inset-bottom));
  }
  #slcket-year-input-area, #slcket-month-input-area, #slcket-day-input-area, #slcket-hour-input-area, #slcket-minute-input-area {
    font-size: 125% !important;
    line-height: 125% !important;
  }
  #modal-layer-dynamic.slcket-style body {
    font-size: 1.5vw;
    line-height: 2.1vw;
  }
  #modal-layer-dynamic.slcket-style .dashified-content .dashified-dash {
    width: 100vw;
  }
  #modal-layer-dynamic.slcket-style {
    /* portrait tablet / fat phone */
  }
  #modal-layer-dynamic.slcket-style .footer-buttons {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    bottom: 0vw;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    left: 0;
    box-sizing: border-box;
    height: 9vw;
    padding: 0 2vw 2.9vw 2vw;
    padding-bottom: calc(2.9vw + env(safe-area-inset-bottom));
    width: 100vw;
    min-height: auto;
  }
  #modal-layer-dynamic.slcket-style .icon-with-word {
    width: 9vw;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    font-family: SourceSansPro;
    font-weight: 600;
  }
  #modal-layer-dynamic.slcket-style .icon-with-word img {
    display: inline-block;
    height: 3.3vw;
  }
  #modal-layer-dynamic.slcket-style .icon-with-word div {
    color: #fff;
    font-size: 1.35vw;
    line-height: 1.56vw;
    margin: 0.5vw auto 0 auto;
    text-align: center;
  }
  #modal-layer-dynamic.slcket-style .top-info-banner {
    font-size: 1.8vw;
    left: 0vw;
    line-height: 2.6vw;
    padding: 1.8vw;
    min-height: 7.8vw;
  }
  #modal-layer-dynamic.slcket-style .top-banner {
    font-size: 1.8vw;
  }
  #modal-layer-dynamic.slcket-style .scrollable {
    height: 76vh;
  }
  #modal-layer-dynamic.slcket-style .text-content {
    font-size: 1.5vw;
  }
  #modal-layer-dynamic.slcket-style .text-content p {
    font-size: 1.5vw;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles {
    height: 75vh;
    text-align: center;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles h3 {
    font-size: 2.4vw;
    text-transform: uppercase;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles ul {
    list-style-type: none;
    padding-left: 0;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles ul li {
    padding-left: 0.5vw;
  }
  #modal-layer-dynamic.slcket-style .slcket-text-styles ul li:before {
    content: "- ";
    padding-right: 0.25vw;
  }
  .dashified-dash .dashified-content {
    width: 100%;
  }
  #overlay_modal_layer {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }
  #overlay_modal_layer.active {
    display: block;
  }
  #overlay_modal_layer .profile-background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -20%;
    filter: opacity(0.2);
    height: 75%;
    left: -20%;
    position: absolute;
    width: 100%;
  }
  .overlay-login-layer {
    bottom: 0;
    position: fixed;
    left: 0;
    width: 100vw;
    border-radius: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 15vw;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
  }
  .fat-iphone .overlay-login-layer {
    height: 60vw;
  }
  .overlay-login-layer.android-expanded {
    height: 100vw;
  }
  .overlay-login-layer.full-screen {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    padding-top: 0;
    width: 100vw;
  }
  .fat-iphone .overlay-login-layer.full-screen {
    padding-top: 0;
  }
  .alphapointe .overlay-login-layer {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9), rgb(0, 0, 0), rgb(0, 0, 0));
    padding-top: 6vw;
  }
  .alphapointe .overlay-login-layer p, .alphapointe .overlay-login-layer #text-agreement, .alphapointe .overlay-login-layer #text-13-over, .alphapointe .overlay-login-layer #text-send-sms {
    font-weight: 600;
  }
  .overlay-login-layer #inside {
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .overlay-login-layer .blue-input {
    font-size: 2vw;
    height: auto;
    margin-bottom: 0;
  }
  .overlay-login-layer .blue-input::placeholder {
    color: white;
  }
  .overlay-login-layer .link {
    text-decoration: none;
    font-weight: 600;
  }
  .slcks-earned {
    padding: 0.25vh 0.5vh;
    padding: 0.25dvh 0.5dvh;
    border-radius: 0.75vh;
    border-radius: 0.75dvh;
    position: static;
    transform: none;
    font-size: 1.15vh;
    font-size: 1.15dvh;
    line-height: 1.25vh;
    line-height: 1.25dvh;
  }
  .slcks-earned img {
    width: 1.25vh;
    height: 1.25vh;
  }
}
/********* super-wide *********/
@media screen and (orientation: landscape) and (min-aspect-ratio: 16/8) {
  .ios #content #left-frame #left-content .control_footer-2023 #action-footer-wrapper #action-footer {
    padding: 16.25vh 0 4.5vh 0;
  }
  .ios #right-frame .footer-buttons, .ios #right-media-frame .footer-buttons {
    padding: 1vh 1vw 4.5vh 1vw;
    min-height: 10.6vh;
  }
  .ios #right-frame .fixed-bottom-left, .ios #right-frame .fixed-bottom-right, .ios #right-frame .fixed-bottom-center, .ios #right-media-frame .fixed-bottom-left, .ios #right-media-frame .fixed-bottom-right, .ios #right-media-frame .fixed-bottom-center {
    bottom: 4.5vh;
  }
  .ios.landscape-phone #slcket-text-input-area {
    font-size: 16px;
    line-height: 17px;
  }
  .ios.landscape-phone #right-frame .footer-buttons, .ios.landscape-phone #right-media-frame .footer-buttons, .ios.landscape-phone #text-input-fullscreen-modal .footer-buttons, .ios.landscape-phone #modal-layer-select-input .footer-buttons, .ios.landscape-phone #date-input-fullscreen-modal .footer-buttons, .ios.landscape-phone #time-input-fullscreen-modal .footer-buttons, .ios.landscape-phone #dynamic-popup-layer .footer-buttons {
    padding: 1vh 5vw 4.5vh 1vw;
  }
  .ios.landscape-phone #right-frame .fixed-bottom-right, .ios.landscape-phone #right-media-frame .fixed-bottom-right, .ios.landscape-phone #text-input-fullscreen-modal .fixed-bottom-right, .ios.landscape-phone #modal-layer-select-input .fixed-bottom-right, .ios.landscape-phone #date-input-fullscreen-modal .fixed-bottom-right, .ios.landscape-phone #time-input-fullscreen-modal .fixed-bottom-right, .ios.landscape-phone #dynamic-popup-layer .fixed-bottom-right {
    right: 5vw;
    bottom: 4.5vh;
  }
  .ios.landscape-phone #right-frame .fixed-bottom-left, .ios.landscape-phone #right-media-frame .fixed-bottom-left, .ios.landscape-phone #text-input-fullscreen-modal .fixed-bottom-left, .ios.landscape-phone #modal-layer-select-input .fixed-bottom-left, .ios.landscape-phone #date-input-fullscreen-modal .fixed-bottom-left, .ios.landscape-phone #time-input-fullscreen-modal .fixed-bottom-left, .ios.landscape-phone #dynamic-popup-layer .fixed-bottom-left {
    bottom: 4.5vh;
  }
  .ios.landscape-phone #right-frame .top-info-banner, .ios.landscape-phone #right-frame .manager-header, .ios.landscape-phone #right-media-frame .top-info-banner, .ios.landscape-phone #right-media-frame .manager-header, .ios.landscape-phone #text-input-fullscreen-modal .top-info-banner, .ios.landscape-phone #text-input-fullscreen-modal .manager-header, .ios.landscape-phone #modal-layer-select-input .top-info-banner, .ios.landscape-phone #modal-layer-select-input .manager-header, .ios.landscape-phone #date-input-fullscreen-modal .top-info-banner, .ios.landscape-phone #date-input-fullscreen-modal .manager-header, .ios.landscape-phone #time-input-fullscreen-modal .top-info-banner, .ios.landscape-phone #time-input-fullscreen-modal .manager-header, .ios.landscape-phone #dynamic-popup-layer .top-info-banner, .ios.landscape-phone #dynamic-popup-layer .manager-header {
    padding-right: calc(1vw + env(safe-area-inset-right));
  }
  .ios.standalone-landscape #slcket-text-input-area {
    font-size: 16px;
    line-height: 17px;
  }
  .ios.standalone-landscape #right-frame .footer-buttons, .ios.standalone-landscape #right-media-frame .footer-buttons, .ios.standalone-landscape #text-input-fullscreen-modal .footer-buttons, .ios.standalone-landscape #modal-layer-select-input .footer-buttons, .ios.standalone-landscape #date-input-fullscreen-modal .footer-buttons, .ios.standalone-landscape #time-input-fullscreen-modal .footer-buttons, .ios.standalone-landscape #dynamic-popup-layer .footer-buttons {
    padding: 1vh 5vw 4.5vh 1vw;
    padding-right: calc(1vw + env(safe-area-inset-right));
  }
  .ios.standalone-landscape #right-frame .fixed-bottom-right, .ios.standalone-landscape #right-media-frame .fixed-bottom-right, .ios.standalone-landscape #text-input-fullscreen-modal .fixed-bottom-right, .ios.standalone-landscape #modal-layer-select-input .fixed-bottom-right, .ios.standalone-landscape #date-input-fullscreen-modal .fixed-bottom-right, .ios.standalone-landscape #time-input-fullscreen-modal .fixed-bottom-right, .ios.standalone-landscape #dynamic-popup-layer .fixed-bottom-right {
    right: 5vw;
    right: calc(1vw + env(safe-area-inset-right));
    bottom: 4.5vh;
  }
  .ios.standalone-landscape #right-frame .fixed-bottom-left, .ios.standalone-landscape #right-media-frame .fixed-bottom-left, .ios.standalone-landscape #text-input-fullscreen-modal .fixed-bottom-left, .ios.standalone-landscape #modal-layer-select-input .fixed-bottom-left, .ios.standalone-landscape #date-input-fullscreen-modal .fixed-bottom-left, .ios.standalone-landscape #time-input-fullscreen-modal .fixed-bottom-left, .ios.standalone-landscape #dynamic-popup-layer .fixed-bottom-left {
    bottom: 4.5vh;
  }
  .ios.standalone-landscape #right-frame .top-info-banner, .ios.standalone-landscape #right-media-frame .top-info-banner, .ios.standalone-landscape #text-input-fullscreen-modal .top-info-banner, .ios.standalone-landscape #modal-layer-select-input .top-info-banner, .ios.standalone-landscape #date-input-fullscreen-modal .top-info-banner, .ios.standalone-landscape #time-input-fullscreen-modal .top-info-banner, .ios.standalone-landscape #dynamic-popup-layer .top-info-banner {
    padding-right: calc(1vw + env(safe-area-inset-right));
  }
  .landscape-phone #content {
    width: 100vw;
    width: 100dvw;
  }
  .landscape-phone #content #right-frame, .landscape-phone #content #right-media-frame {
    height: 100%;
    width: 65%;
  }
  .landscape-phone #content #right-frame .top-info-banner, .landscape-phone #content #right-media-frame .top-info-banner {
    top: 0;
  }
  .landscape-phone #content #right-frame .dashified-dash, .landscape-phone #content #right-media-frame .dashified-dash {
    height: 66vh;
    bottom: 12vh;
    height: 76dvh;
    bottom: 14dvh;
    height: calc(76dvh - env(safe-area-inset-bottom));
    bottom: calc(14dvh + env(safe-area-inset-bottom));
  }
  .landscape-phone #content #right-frame #home-welcome-header, .landscape-phone #content #right-media-frame #home-welcome-header {
    left: 27.95vw;
  }
  .landscape-phone #content #right-frame #home-welcome-header img, .landscape-phone #content #right-media-frame #home-welcome-header img {
    height: 25.3493333333vw;
  }
  .landscape-phone #content #right-frame .icon-with-word div, .landscape-phone #content #right-media-frame .icon-with-word div {
    height: 1.75vh;
    font-size: 1.5vh;
    line-height: 1.75vh;
  }
  .landscape-phone #content #left-frame {
    width: 35%;
  }
  .landscape-phone #content #left-frame #left-content #app_name_wrapper {
    width: 100%;
  }
  .landscape-phone #content #left-frame #left-content #app_name_wrapper.main {
    height: calc(50% - 12.25vw);
  }
  .landscape-phone #content #left-frame #left-content #app_name_wrapper.main #header-image {
    height: 80%;
    width: 50%;
    object-fit: contain;
  }
  .landscape-phone #content #left-frame #left-content #wheel_wrapper {
    top: calc(50% - 12.6746666667vw);
    left: calc(17.5% - 12.6746666667vw);
  }
  .landscape-phone #content #left-frame #left-content .control_footer-2023 {
    width: 35vw;
  }
  .landscape-phone #content #left-frame #left-content .control_footer-2023 #action-footer-wrapper #action-footer {
    width: 35vw;
  }
  .landscape-phone #content #left-frame #left-content .control_footer-2023 #action-footer-wrapper #action-footer .notes-count, .landscape-phone #content #left-frame #left-content .control_footer-2023 #action-footer-wrapper #action-footer .message-count {
    width: 2.5vh !important;
    height: 2.5vh !important;
    right: 0;
    top: -1.25vh;
    font-size: 1.25vh;
    line-height: 2.5vh;
  }
  .landscape-phone #content #left-frame #left-content .control_footer-2023 #action-footer-wrapper #action-footer .notes-count span.tiny, .landscape-phone #content #left-frame #left-content .control_footer-2023 #action-footer-wrapper #action-footer .message-count span.tiny {
    font-size: 1.1vh;
  }
  .landscape-phone #content #left-frame #left-content .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button {
    margin: 0 0.75vw;
  }
  .landscape-phone #content #left-frame #left-content .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button div {
    height: 1.75vh;
    font-size: 1.5vh;
    line-height: 1.75vh;
  }
  .ios .new-search-input {
    font-size: 16px;
    padding: 0.5vh 0.5vw;
    bottom: 2.7vh;
    bottom: 3.4dvh;
  }
}
/********* tablets in landscape mode *********/
@media screen and (orientation: landscape) and (max-aspect-ratio: 16/8) {
  .ios #content #left-frame #left-content .control_footer-2023 #action-footer-wrapper #action-footer {
    padding: 16.25vh 0 2.5vh 0;
  }
  .ios #right-frame .footer-buttons, .ios #right-media-frame .footer-buttons {
    padding: 1vh 1vw 2.5vh 1vw;
    min-height: 8.4vh;
  }
  .ios #right-frame .fixed-bottom-left, .ios #right-frame .fixed-bottom-right, .ios #right-frame .fixed-bottom-center, .ios #right-media-frame .fixed-bottom-left, .ios #right-media-frame .fixed-bottom-right, .ios #right-media-frame .fixed-bottom-center {
    bottom: 2.5vh;
  }
  .web #left-frame #left-content #personas_wrapper .answer_text {
    font-size: 1.25vh;
    line-height: 1.5vh;
  }
  .web #left-frame #left-content #personas_wrapper {
    /* Need Rule here to make slightly smaller for tablets? */
  }
  .landscape-phone #content {
    width: 100vw;
    width: 100dvw;
  }
  .landscape-phone #content #right-frame {
    height: 100%;
    top: 0;
  }
  .landscape-phone #content #right-frame .dashified-dash {
    height: calc(100% - 8.5vh - 8.25vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: calc(100% - 9dvh - 8.25vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    bottom: 8.5vh;
    bottom: 9dvh;
    bottom: calc(9dvh + env(safe-area-inset-bottom));
  }
  .landscape-phone #content #left-frame #left-content #app_name_wrapper {
    width: 100%;
  }
  .landscape-phone #content #left-frame #left-content #app_name_wrapper.main {
    height: calc(50% - 12.25vw);
  }
  .landscape-phone #content #left-frame #left-content #app_name_wrapper.main #header-image {
    object-fit: contain;
    max-height: 80%;
    max-width: 50%;
  }
  .landscape-phone #content #left-frame #left-content #wheel_wrapper {
    top: calc(50% - 12.6746666667vw);
  }
  .landscape-phone #content #left-frame #left-content #personas_wrapper .answer_text {
    font-size: 1.15vh;
    line-height: 1.25vh;
  }
  .landscape-phone.ios .new-search-input {
    bottom: 3.75vh;
    bottom: 3.75dvh;
    font-size: 16px;
    padding: 0.5vh 0.5vw;
  }
}
.fullscreen-text-popup {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 2.5vh;
  text-align: center;
}
.fullscreen-text-popup .button {
  font-size: 2.5vh !important;
}

.platform-notes-count {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: white;
  border: 1px solid white;
  width: 2vh !important;
  height: 2vh !important;
  position: absolute;
  border-radius: 50%;
  margin-left: 2vh;
  top: -0.5vh;
  text-align: center;
  font-size: 1vh;
  font-weight: 700;
  line-height: 2vh;
  background: #424649;
}