/* 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;
  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; }

p {
  font-size: 1.5vh;
  line-height: 1.75vh;
  font-weight: 600;
  color: white; }

.default-size-bold {
  font-size: 1.5vh;
  line-height: 1.75vh;
  font-weight: 600; }

.blue {
  color: #4497f7; }

.grey {
  color: #666666; }

#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; }

.text-content {
  font-size: 1.75vh;
  font-weight: 600;
  line-height: 2.0vh; }
  .text-content p {
    font-size: 1.75vh;
    font-weight: 600;
    line-height: 2.0vh;
    padding-bottom: 0.5vh; }

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

.scrollable {
  box-sizing: border-box;
  height: 82vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 1vw;
  width: 100%; }
  .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: #666666;
    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);
  box-sizing: border-box;
  color: white;
  display: flex;
  font-size: 2.25vh;
  font-weight: 600;
  justify-content: space-between;
  left: 0vw;
  line-height: 2.5vh;
  padding: 1vh 1vw;
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 7.25vh; }
  .top-info-banner .info-title {
    display: flex;
    flex-direction: column;
    justify-content: center; }
  .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);
  padding: 1vh 1vw;
  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: 7.25vh; }

.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 {
  color: #4497f7 !important;
  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 !important;
  height: 5.25vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30vw !important;
  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; }

#bylaws-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block; }

.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; }

#back-arrow {
  width: 2vw;
  height: 2vw;
  filter: brightness(100) grayscale(1);
  cursor: pointer; }

/*
#next-arrow {
    width: 2vw;
    height: 2vw;
    cursor: pointer;
    transform: rotate(180deg);
}
*/
.footer-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 10vh;
  /*
    #next-arrow {
        position: absolute;
        right: 10vw;
    }
    */ }
  .footer-bottom #back-arrow-red {
    position: absolute;
    left: 10vw; }

#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: 45vw;
  height: 32vw;
  margin-inline: auto;
  box-sizing: border-box;
  border: 0.2vw solid #9b9b9b;
  border-radius: 50%;
  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 .icon-with-word, #right-media-frame .icon-with-word, #second-modal-content .icon-with-word {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; }
    #right-frame .icon-with-word img, #right-media-frame .icon-with-word img, #second-modal-content .icon-with-word img {
      height: 3vh;
      max-width: none; }
    #right-frame .icon-with-word div, #right-media-frame .icon-with-word div, #second-modal-content .icon-with-word div {
      height: 1.5vh;
      white-space: nowrap; }
  #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%); }

@media screen and (max-width: 991px) {
  #back-arrow {
    width: 2.6vw;
    height: 2.6vw; }
  #back-arrow-red {
    width: 2.6vw;
    height: 2.6vw; }
  .pill {
    font-size: 1.2vw;
    height: 4.75vh; } }

/*
@media screen and (max-width: 767px) {

    #content {
        width: 100%;
        height: auto;
    }

    #page-wrapper {
       height: 100vh;
    }

    .top-banner {
        border-color: rgba(255,255,255,1);
        font-size: 3vw;
    }

    .pill {
        height: 4vh;
        width: 65vw;
        border-radius: 1.5vw;
        font-size: 2.5vw;
    }

    .mobile_pill-request-code {
        height: 6vh;
        width: 57vw;
        border-radius: 2.5vw;
        font-size: 3.5vw;
    }

    #back-arrow {
        width: 6vw;
        height: 6vw;
    }

    .back_bottom-left {
        bottom: 4vh;
        left: 6vw;
    }

    .red-btn {
        width: 9vw;
        height: 9vw;
        font-size: 3vw;
    }

    #back-arrow-red {
        width: 6vw;
        height: 6vw;
    }

    .page-white_container {
        width: 100%;
        left: 0;
        transform: translateX(0);
    }

    .page-white_black-heading {
        font-size: 3.5vw;
    }

    #bylaws-link {
        font-size: 3vw;
    }

    .default-size-bold {
        font-size: 3vw;
    }

    .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;

        #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;
    }
}
*/
@media screen and (orientation: portrait) {
  .icon-with-word {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    font-family: SourceSansPro;
    font-weight: 600; }
    .icon-with-word img {
      height: 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; }
  .footer-buttons {
    position: fixed;
    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; }
  .error-message {
    font-size: 3.75vw;
    line-height: 4.375vw; }
  .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: 125%;
    padding: 3vw;
    position: fixed;
    top: 0;
    width: 100vw; }
    .top-info-banner .info-title {
      display: flex;
      flex-direction: column;
      height: 10vw;
      justify-content: center; }
    .skinny-iphone .top-info-banner {
      padding-top: 6.5vh; }
  .info-blurb {
    font-size: 3vw !important;
    font-weight: 600;
    line-height: 3.5vw !important;
    padding: 0 2vw;
    box-sizing: border-box; }
  .blurb-text {
    font-size: 3.75vw;
    line-height: 4.375vw; }
  .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; } }

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

    #page-wrapper {
        height: auto;
        min-height: 100vh;
    }

    #branding-section {
        padding-top: 20vh;
        margin-bottom: 25vh;
    }

    #branding-section-shorter {
        padding-top: 20vh;
        margin-bottom: 25vh;
    }

    #app-logo {
        width: 35vw;
    }

    .mobile_pill-request-code {
        height: 17vh;
    }

    .default-size-bold {
        font-size: 2vw;
        line-height: 2vw;
    }

    .page-white_black-heading {
        font-size: 2.75vw;
    }

    #bylaws-link {
        font-size: 2vw;
    }

    .pill {
        height: 10vh;
        width: 50vw;
        border-radius: 1.5vw;
        font-size: 2vw;
        margin: 4.5vh 0;
    }

    .top-banner {
        position: relative;
        left: 0;
        transform: translateX(0);
        font-size: 2.25vw;
        width: 100%;
        background-color: black;
    }

    #back-arrow {
        width: 4vw;
        height: 4vw;
    }

    .back_bottom-left {
        left: 4vw;
    }

    #back-arrow-red {
        width: 4vw;
        height: 4vw;
    }

    .red-btn {
        width: 7vw;
        height: 7vw;
        font-size: 2.4vw;
    }
}
*/
.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), black, black);
      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; } }

#left-frame {
  left: 0;
  max-width: 35vw;
  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.349333333333333vw;
  height: 25.349333333333333vw;
  left: 4.82533333335vw;
  top: calc(50vh - 12.6746666666665vw); }

#left-frame #left-content #wheel_wrapper div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#left-frame #left-content #wheel_background {
  width: 25.349333333333333vw;
  height: 25.349333333333333vw; }

#left-frame #left-content #wheel_outer {
  border-radius: 50%;
  width: 25.349333333333333vw;
  height: 25.349333333333333vw;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  /*border: 0.065333333333333vw solid #f1f1f1;*/
  border: 0.2vw solid #8b8b8b; }

#left-frame #left-content #user_portrait {
  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: pointer;
  width: 11.041333333333333vw;
  height: 11.041333333333333vw;
  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.349333333333333vw;
  width: 25.349333333333333vw;
  position: relative;
  top: -25.349333333333333vw;
  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.613333333333333vw;
        max-width: 3.658666666666667vw;
        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.110666666666667vw;
    height: 1.110666666666667vw;
    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;
    text-transform: lowercase;
    width: 5.749333333333333vw;
    font-size: 1.5vh;
    line-height: 1.75vh;
    margin-left: -0.52266666666665vw; }
    #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-frame #left-content .personaBorder {
    border: .144vw solid #aeaeae;
  }
*/
#left-frame #left-content #persona0 {
  top: 1.225vw;
  left: 10.322666666666667vw; }

#left-frame #left-content #persona1 {
  top: 3.889606933vw;
  left: 3.889606933vw; }

#left-frame #left-content #persona2 {
  top: 10.322666666666667vw;
  left: 1.225vw; }

#left-frame #left-content #persona3 {
  top: 16.77394133vw;
  left: 3.889606933vw; }

#left-frame #left-content #persona4 {
  top: 19.420333333333333vw;
  left: 10.322666666666667vw; }

#left-frame #left-content #persona5 {
  top: 16.77394133vw;
  left: 16.77394133vw; }

#left-frame #left-content #persona6 {
  top: 10.322666666666667vw;
  left: 19.420333333333333vw; }

#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 .answer_text {
    font-family: 'sourceSansPro-regular';
    vertical-align: middle;
    letter-spacing: -0.5px;
    padding: 0;
    display: table-cell;
    width: 100%;
    height: 100%;
    font-size: 0.85vw;
    text-align: center;
    word-break: break-word;
    line-height: 1.2;
    color: #fff;
    //transition: color 0.4s;
    transition: opacity ease-in-out 1s;
    display: 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(50vh - 12.25vw);
    justify-content: center;
    flex-flow: column; }
    #left-frame #left-content #app_name_wrapper.main #header-image {
      cursor: pointer;
      max-height: calc(50vh - 12.25vw - 7vh);
      max-width: 18.78333vw;
      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 .4s ease-in-out;
  transition: opacity .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 .4s ease-in-out;
  transition: opacity .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: .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.571428571428571vw);
  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.555555555555556vw;
  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.555555555555556vw;
  vertical-align: top;
  width: .538116591928251vw; }

#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .right {
  display: inline-block;
  height: 35.555555555555556vw;
  vertical-align: top;
  width: .426008968609865vw; }

#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.888571428571429vw;
  height: 14.888571428571429vw;
  position: absolute;
  left: 2.205714285714286vw;
  top: calc(50% - 7.444285714285714vw);
  -webkit-transition: background-color .8s ease-in-out;
  transition: background-color .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.888571428571429vw;
  height: 14.888571428571429vw;
  -webkit-transition: background-color .8s ease-in-out;
  transition: background-color .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 .8s ease-in-out;
  transition: all .8s ease-in-out; }

#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_inner {
  border-radius: 50%;
  width: 9.925714285714286vw;
  height: 9.925714285714286vw;
  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.940571428571429vw;
  height: 7.940571428571429vw;
  background: 0 0;
  border: .569074285714286vw solid #f1f1f1;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out; }

#left-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait {
  border-radius: 50%;
  width: 6.868594285714286vw;
  height: 6.868594285714286vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: .148885714285714vw solid transparent;
  position: absolute;
  left: 3.6vw;
  top: 3.5vw;
  z-index: 99;
  margin: .496285714285714vw;
  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.888571428571429vw;
  width: 14.888571428571429vw;
  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 .8s ease-in-out;
  transition: all .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.955428571428571vw; }

#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.410857142857143vw;
  left: 5.955428571428571vw; }

#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.310857142857143vw; }

#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; }

.control_footer-2023 {
  bottom: 0;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 35vw;
  left: 0; }
  .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.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); }
    .control_footer-2023 #action-footer-wrapper #action-footer {
      box-sizing: border-box;
      display: flex;
      width: 35vw;
      align-items: center;
      justify-content: center;
      padding: 16.25vh 0 1vh 0; }
      .control_footer-2023 #action-footer-wrapper #action-footer .notes-count, .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; }
        .control_footer-2023 #action-footer-wrapper #action-footer .notes-count span.tiny, .control_footer-2023 #action-footer-wrapper #action-footer .message-count span.tiny {
          font-size: 0.75vh; }
      .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; }
        .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button img {
          height: 3vh;
          max-width: none; }
        .control_footer-2023 #action-footer-wrapper #action-footer .action-footer-button div {
          height: 1.5vh;
          white-space: nowrap; }

/******** mobile version of left frame ********/
@media (orientation: portrait) {
  #left-frame, #right-frame {
    display: none; }
  #mobile-frame #web-preview-wrapper {
    width: 100%; }
  #left-content {
    width: 100%; }
  #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 #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);
    height: 17.5vw;
    margin-top: 20vh;
    margin-inline: auto;
    padding: 0;
    width: 43.75vw; }
  #mobile-frame #wheel_wrapper div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  #mobile-frame #wheel_background {
    position: relative;
    width: 80vw;
    height: 80vw; }
  #mobile-frame #wheel_outer {
    border-radius: 50%;
    width: 66.65vw;
    height: 66.65vw;
    margin: 6.65vw;
    background: 0 0;
    border: 3.413vw solid #717171; }
  #mobile-frame #wheel_inner {
    border-radius: 50%;
    width: 53.35vw;
    height: 53.35vw;
    background: 0 0;
    border: 8.586vw solid transparent; }
  #mobile-frame #wheel_core {
    border-radius: 50%;
    width: 42.65vw;
    height: 42.65vw;
    background: 0 0;
    border: 3.057vw solid #717171; }
  #mobile-frame #user_portrait #middle_text_wrapper {
    display: table;
    height: 100%;
    position: absolute;
    width: 100%; }
  #mobile-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 {
    border-radius: 50%;
    height: auto;
    width: 80vw;
    position: relative;
    top: -86.66vw;
    left: 0;
    z-index: 999; }
  #mobile-frame .persona {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 16vw;
    width: 16vw;
    position: absolute;
    background-position: center;
    border: 0.4vw solid #fff;
    border-radius: 50%;
    text-decoration: none;
    display: table; }
  #mobile-frame .persona-border_white {
    border: 0.55vw solid #fff !important; }
  #mobile-frame .persona-app-border_white {
    border: 0.25vw solid #fff !important; }
  #mobile-frame .persona:hover {
    border-color: #e9222d; }
  #mobile-frame .personaBorder {
    border: .144vw solid #aeaeae; }
  #mobile-frame #persona0 {
    top: 7vw;
    left: 32vw; }
  #mobile-frame #persona1 {
    top: 15.75vw;
    left: 9.5vw; }
  #mobile-frame #persona2 {
    top: 38vw;
    left: 0; }
  #mobile-frame #persona3 {
    top: 61.25vw;
    left: 9.5vw; }
  #mobile-frame #persona4 {
    top: 70.5vw;
    left: 32vw; }
  #mobile-frame #persona5 {
    top: 60vw;
    left: 56vw; }
  #mobile-frame #persona6 {
    top: 38vw;
    left: 64vw; }
  #mobile-frame #persona7 {
    top: 15.75vw;
    left: 54.66vw; }
  #mobile-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 {
    width: 10vw;
    height: 10vw;
    border-width: 0.55vw;
    font-size: 2vw;
    font-family: 'sourceSansPro-bold'; }
  #mobile-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 {
    color: #e9222d;
    border-color: #e9222d; } }

@media screen and (max-width: 767px) and (orientation: landscape) {
  #mobile-content {
    padding-bottom: 30vh; }
  #mobile-frame #app-preview-wrapper #app-preview .bottom,
  #mobile-frame #left-content #app-preview-wrapper #app-preview .top {
    display: block;
    margin: 0 auto;
    width: 20vw; } }

#mobile-frame {
  display: none; }

#mobile-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 {
  height: 100%;
  position: relative;
  z-index: 2; }

#mobile-frame #left-content #wheel_wrapper {
  width: 97vw;
  height: 97vw;
  position: fixed;
  left: 1.5vw;
  top: calc(50vh - 45vw); }

#mobile-frame #left-content #wheel_wrapper div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#mobile-frame #left-content #wheel_background {
  height: 97vw;
  width: 97vw; }

#mobile-frame #left-content #wheel_outer {
  border-radius: 50%;
  width: 97vw;
  height: 97vw;
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #f1f1f1; }

#mobile-frame #left-content #user_portrait {
  border-radius: 50%;
  width: 42.25vw;
  height: 42.25vw;
  background-size: contain;
  background-position: center;
  border: none;
  position: absolute;
  left: 27.375vw;
  top: 27.375vw;
  z-index: 99; }

#mobile-frame #left-content #user_portrait #middle_text_wrapper {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%; }

#mobile-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; }

#mobile-frame #left-content #user_portrait #middle_text .inkfree {
  font-weight: 400;
  font-family: Inkfree;
  font-style: normal;
  font-weight: 700;
  pointer-events: none; }

#mobile-frame #left-content #personas_wrapper {
  height: 97vw;
  width: 97vw;
  position: relative;
  top: -97vw;
  left: 0;
  z-index: 999; }
  #mobile-frame #left-content #personas_wrapper .persona {
    cursor: pointer;
    box-sizing: border-box;
    height: 18vw;
    width: 18vw;
    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 #left-content #personas_wrapper .persona .icon-with-word {
      width: 18vw;
      pointer-events: none; }
      #mobile-frame #left-content #personas_wrapper .persona .icon-with-word img {
        height: auto;
        max-height: 10vw;
        max-width: 14vw;
        pointer-events: none; }
      #mobile-frame #left-content #personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
        width: 13vw;
        height: fit-content;
        position: relative;
        pointer-events: none;
        margin-top: 0; }
    #mobile-frame #left-content #personas_wrapper .persona.dragging {
      cursor: grabbing; }
  #mobile-frame #left-content #personas_wrapper .now {
    color: #4497f7;
    border: 0.1176vw solid #4497f7; }
  #mobile-frame #left-content #personas_wrapper .urgent {
    color: #4497f7;
    border: 0.1176vw solid #4497f7; }
  #mobile-frame #left-content #personas_wrapper .recent {
    color: #4497f7;
    border: 0.1176vw solid #4497f7; }
  #mobile-frame #left-content #personas_wrapper .normal {
    color: #4497f7;
    border: 0.1176vw solid #4497f7; }
  #mobile-frame #left-content #personas_wrapper .past {
    color: #4497f7;
    border: 0.1176vw solid #4497f7; }
  #mobile-frame #left-content #personas_wrapper .distant {
    color: #4497f7;
    border: 0.1176vw solid #4497f7; }
  #mobile-frame #left-content #personas_wrapper .archaic {
    color: #4497f7;
    border: 0.1176vw solid #4497f7; }
  #mobile-frame #left-content #personas_wrapper .updates {
    width: 1.110666666666667vw;
    height: 1.110666666666667vw;
    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; }
    #mobile-frame #left-content #personas_wrapper .updates.hide {
      display: none; }
    #mobile-frame #left-content #personas_wrapper .updates span {
      display: inline-block;
      vertical-align: top; }
      #mobile-frame #left-content #personas_wrapper .updates span.tiny {
        font-size: 0.522928vw; }
  #mobile-frame #left-content #personas_wrapper .answer_text {
    font-family: SourceSansPro;
    font-weight: 600;
    color: #fff;
    text-align: center;
    pointer-events: none;
    word-break: break-word;
    text-transform: lowercase;
    margin-left: -2vw;
    width: 22vw;
    font-size: 3.5vw;
    line-height: 3.75vw; }
    #mobile-frame #left-content #personas_wrapper .answer_text.uppercase {
      text-transform: uppercase; }
    #mobile-frame #left-content #personas_wrapper .answer_text .SourceSansPro {
      font-family: SourceSansPro; }
    #mobile-frame #left-content #personas_wrapper .answer_text .no-transform {
      text-transform: none; }

/*
#mobile-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;
}

#mobile-frame #left-content .personaBorder {
  border: .144vw solid #aeaeae;
}
*/
#mobile-frame #persona0 {
  top: 4.6875vw;
  left: 39.5vw; }

#mobile-frame #persona1 {
  top: 14.8837vw;
  left: 14.8837vw; }

#mobile-frame #persona2 {
  top: 39.5vw;
  left: 4.6875vw; }

#mobile-frame #persona3 {
  top: 64.1860vw;
  left: 14.8837vw; }

#mobile-frame #persona4 {
  top: 74.3125vw;
  left: 39.5vw; }

#mobile-frame #persona5 {
  top: 64.1860vw;
  left: 64.1860vw; }

#mobile-frame #persona6 {
  top: 39.5vw;
  left: 74.3125vw; }

#mobile-frame #persona7 {
  top: 14.8837vw;
  left: 64.1860vw; }

/*
#mobile-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 .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 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vh; }

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

/*
#mobile-frame #left-content .answer_text {
  font-family: 'sourceSansPro-regular';
  vertical-align: middle;
  letter-spacing: -0.5px;
  padding: 0;
  display: table-cell;
  width: 100%;
  height: 100%;
  font-size: 0.85vw;
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
  color: #fff;
  //transition: color 0.4s;
  transition: opacity ease-in-out 1s;
  display: none;
}
*/
#mobile-frame #left-content #app_name_wrapper {
  width: 100%; }
  #mobile-frame #left-content #app_name_wrapper.main {
    align-items: center;
    display: flex;
    height: calc(50vh - 35vw);
    justify-content: center;
    flex-flow: column; }
    #mobile-frame #left-content #app_name_wrapper.main #header-image {
      height: auto;
      max-height: 15vh;
      max-width: 71.875vw;
      width: auto; }
  #mobile-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; }

#mobile-frame #left-content #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 #left-content #app_name_wrapper #app_name.pink {
  color: #f240a1; }

#mobile-frame #left-content #app_name_wrapper #app_name.hot-pink {
  color: #906; }

#mobile-frame #left-content #app_name_wrapper #app_name.red {
  color: #e4001e; }

#mobile-frame #left-content #app_name_wrapper #app_name.orange {
  color: #bc4012; }

#mobile-frame #left-content #app_name_wrapper #app_name.red-orange {
  color: #c30; }

#mobile-frame #left-content #app_name_wrapper #app_name.purple {
  color: #7000a4; }

#mobile-frame #left-content #app_name_wrapper #app_name.green {
  color: #269a5e; }

#mobile-frame #left-content #app_name_wrapper #app_name.cyan {
  color: #269ca3; }

#mobile-frame #left-content #app_name_wrapper #app_name.blue {
  color: #0c2a8c; }

#mobile-frame #left-content #app_name_wrapper #app_name.grey {
  color: #303030; }

#mobile-frame #left-content #app_name_wrapper #app_name.dark {
  color: #151515; }

#mobile-frame #left-content #app_name_wrapper #app_name.white {
  color: #f1f1f1; }

#mobile-frame #left-content #app_name_wrapper #app_name.charcoal {
  color: #2f2f2f; }

#mobile-frame #left-content #app_name_wrapper #app_name.kombu-green {
  color: #364133; }

#mobile-frame #left-content #app_name_wrapper #app_name.orange-salmon {
  color: #ce482d; }

#mobile-frame #left-content #app_name_wrapper #app_name.persian-blue {
  color: #2833b1; }

#mobile-frame #left-content #app_name_wrapper #app_name.white-chocolate {
  color: #ece4d1; }

#mobile-frame #left-content #app_name_wrapper #app_name.blank-white {
  color: #ffffff; }

#mobile-frame #left-content #app_name_wrapper #app_name.dark-blue {
  color: #01425e; }

#mobile-frame #left-content #app_name_wrapper #app_name.sonic-silver {
  color: #7a7a7a; }

#mobile-frame #left-content #app_name_wrapper #app_name.lilac {
  color: #c8a2b9; }

#mobile-frame #left-content #app_name_wrapper #app_name.blue-jeans {
  color: #5db6de; }

#mobile-frame #left-content #app_name_wrapper #app_name.bluish-grey {
  color: #495f6c; }

#mobile-frame #left-content #app_name_wrapper #app_name.raisin {
  color: #2a1621; }

#mobile-frame #left-content #app_name_wrapper #app_name.black {
  color: #000000; }

#mobile-frame #left-content #app_name_wrapper #app_name.custom {
  color: var(--custom-btn-color); }

#mobile-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 {
  display: none;
  height: 100%;
  position: fixed;
  width: 35vw;
  z-index: 2; }

#mobile-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 {
  bottom: 1.75vh;
  left: calc((35vw - 18vh)/ 2);
  position: fixed; }

#mobile-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 {
  display: block;
  margin: 0 auto;
  width: 20vw; }

#mobile-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 {
  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 {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: #151515;
  -webkit-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out; }

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

#mobile-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: .1;
  position: absolute; }

#mobile-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 {
  background: 0 0;
  border: 0;
  bottom: calc(50% + 8vw);
  color: inherit;
  display: none;
  font-size: 2.285714285714286vh;
  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 {
  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 {
  color: #906; }

#mobile-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 {
  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 {
  color: #c30; }

#mobile-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 {
  color: #269a5e; }

#mobile-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 {
  color: #0c2a8c; }

#mobile-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 {
  color: #151515; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel-preview #app_name_wrapper-app #app_name-app#mobile-frame #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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  color: #7a7a7a; }

#mobile-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 {
  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 {
  color: #495f6c; }

#mobile-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 {
  color: #000000; }

#mobile-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 {
  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.571428571428571vw);
  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 {
  display: inline-block;
  height: 35.555555555555556vw;
  position: relative;
  vertical-align: top;
  width: 19.3vw;
  z-index: 2; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .left {
  display: inline-block;
  height: 35.555555555555556vw;
  vertical-align: top;
  width: .538116591928251vw; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper .right {
  display: inline-block;
  height: 35.555555555555556vw;
  vertical-align: top;
  width: .426008968609865vw; }

#mobile-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 {
  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 {
  -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 {
  width: 14.888571428571429vw;
  height: 14.888571428571429vw;
  position: relative;
  left: 2.205714285714286vw;
  top: calc(50% - 7.444285714285714vw);
  -webkit-transition: background-color .8s ease-in-out;
  transition: background-color .8s ease-in-out; }

#mobile-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 {
  width: 14.888571428571429vw;
  height: 14.888571428571429vw;
  -webkit-transition: background-color .8s ease-in-out;
  transition: background-color .8s ease-in-out; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_outer-app {
  border-radius: 50%;
  width: 12.407142857142857vw;
  height: 12.407142857142857vw;
  margin: 1.240714285714286vw;
  background: 0 0;
  border: .635245714285714vw solid #f1f1f1;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out; }

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

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #wheel_core-app {
  border-radius: 50%;
  width: 7.940571428571429vw;
  height: 7.940571428571429vw;
  background: 0 0;
  border: .569074285714286vw solid #f1f1f1;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #user_portrait-app {
  border-radius: 50%;
  width: 6.868594285714286vw;
  height: 6.868594285714286vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: .148885714285714vw solid transparent;
  position: absolute;
  left: 3.513702857142857vw;
  top: 2.25vw;
  z-index: 99;
  margin: .496285714285714vw;
  opacity: 1; }

#mobile-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 {
  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 {
  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 {
  border-radius: 50%;
  height: 14.888571428571429vw;
  width: 14.888571428571429vw;
  position: relative;
  top: -16.129285714285714vw;
  left: 0;
  z-index: 999; }

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

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona0-app {
  top: 0;
  left: 5.955428571428571vw; }

#mobile-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 {
  top: 5.955428571428571vw;
  left: 0; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona3-app {
  top: 10.173857142857143vw;
  left: 1.737vw; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona4-app {
  top: 11.910857142857143vw;
  left: 5.955428571428571vw; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona5-app {
  top: 10.173857142857143vw;
  left: 10.173857142857143vw; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona6-app {
  top: 5.955428571428571vw;
  left: 11.910857142857143vw; }

#mobile-frame #left-content #app-preview-wrapper #app-preview #wheel-preview-wrapper #persona7-app {
  top: 1.737vw;
  left: 10.173857142857143vw; }

#mobile-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 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 0.45vw; }

/******** mobile version of left frame ********/
@media (orientation: portrait) {
  #mobile-frame {
    width: 100vw;
    min-height: 100%;
    display: block !important;
    position: fixed; }
  #mobile-frame, #right-frame {
    display: none; }
  #mobile-frame #web-preview-wrapper {
    width: 100%; }
  #action-footer-wrapper {
    width: 100vw; }
    #action-footer-wrapper #action-footer {
      justify-content: center !important; }
    #action-footer-wrapper .icon-with-word {
      width: auto !important;
      margin-inline: 3.5vw; }
    #action-footer-wrapper div {
      width: auto !important; }
  #left-content {
    width: 100%; }
  #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 {
    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 div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  #mobile-frame #wheel_background {
    position: relative;
    width: 80vw;
    height: 80vw; }
  #mobile-frame #wheel_outer {
    border-radius: 50%;
    width: 66.65vw;
    height: 66.65vw;
    margin: 6.65vw;
    background: 0 0;
    border: 3.413vw solid #717171; }
  #mobile-frame #wheel_inner {
    border-radius: 50%;
    width: 53.35vw;
    height: 53.35vw;
    background: 0 0;
    border: 8.586vw solid transparent; }
  #mobile-frame #wheel_core {
    border-radius: 50%;
    width: 42.65vw;
    height: 42.65vw;
    background: 0 0;
    border: 3.057vw solid #717171; }
  #mobile-frame #user_portrait #middle_text_wrapper {
    display: table;
    height: 100%;
    position: absolute;
    width: 100%; }
  #mobile-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 #user_portrait #middle_text .inkfree {
    font-weight: 400;
    font-family: Inkfree;
    font-style: normal;
    font-weight: 700;
    pointer-events: none; }
  #mobile-frame #personas_wrapper {
    height: 97vw;
    width: 97vw;
    position: relative;
    top: -97vw;
    left: 0;
    z-index: 999; }
  #mobile-frame .persona {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 16vw;
    width: 16vw;
    position: absolute;
    background-position: center;
    border: 0.4vw solid #fff;
    border-radius: 50%;
    text-decoration: none;
    display: table; }
  #mobile-frame .persona-border_white {
    border: 0.55vw solid #fff !important; }
  #mobile-frame .persona-app-border_white {
    border: 0.25vw solid #fff !important; }
  #mobile-frame .persona:hover {
    border-color: #e9222d; }
  #mobile-frame .personaBorder {
    border: .144vw solid #aeaeae; }
  #mobile-frame #persona0 {
    top: 4.6875vw;
    left: 39.5vw; }
  #mobile-frame #persona1 {
    top: 14.8837vw;
    left: 14.8837vw; }
  #mobile-frame #persona2 {
    top: 39.5vw;
    left: 4.6875vw; }
  #mobile-frame #persona3 {
    top: 64.1860vw;
    left: 14.8837vw; }
  #mobile-frame #persona4 {
    top: 74.3125vw;
    left: 39.5vw; }
  #mobile-frame #persona5 {
    top: 64.1860vw;
    left: 64.1860vw; }
  #mobile-frame #persona6 {
    top: 39.5vw;
    left: 74.3125vw; }
  #mobile-frame #persona7 {
    top: 14.8837vw;
    left: 64.1860vw; }
  #mobile-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 {
    width: 10vw;
    height: 10vw;
    border-width: 0.55vw;
    font-size: 2vw;
    font-family: 'sourceSansPro-bold'; }
  #mobile-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 {
    color: #e9222d;
    border-color: #e9222d; }
  .control_footer-2023 {
    width: 100vw; } }

@media screen and (max-width: 767px) and (orientation: landscape) {
  #mobile-frame #left-content {
    overflow-y: scroll; }
  #mobile-frame #left-content #personas_wrapper {
    height: 75vw;
    width: 75vw;
    position: absolute;
    top: 0vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999; }
    #mobile-frame #left-content #personas_wrapper .persona {
      cursor: pointer;
      box-sizing: border-box;
      height: 13.91vw;
      width: 13.91vw;
      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 #left-content #personas_wrapper .persona .icon-with-word {
        width: 13.91vw;
        pointer-events: none; }
        #mobile-frame #left-content #personas_wrapper .persona .icon-with-word img {
          height: auto;
          max-height: 7.73vw;
          max-width: 10.82vw;
          pointer-events: none; }
        #mobile-frame #left-content #personas_wrapper .persona .icon-with-word .persona-icon-wrapper {
          width: 10.05vw;
          height: fit-content;
          position: relative;
          pointer-events: none;
          margin-top: 0; }
      #mobile-frame #left-content #personas_wrapper .persona.dragging {
        cursor: grabbing; }
    #mobile-frame #left-content #personas_wrapper .now {
      color: #4497f7;
      border: 0.1176vw solid #4497f7; }
    #mobile-frame #left-content #personas_wrapper .urgent {
      color: #4497f7;
      border: 0.1176vw solid #4497f7; }
    #mobile-frame #left-content #personas_wrapper .recent {
      color: #4497f7;
      border: 0.1176vw solid #4497f7; }
    #mobile-frame #left-content #personas_wrapper .normal {
      color: #4497f7;
      border: 0.1176vw solid #4497f7; }
    #mobile-frame #left-content #personas_wrapper .past {
      color: #4497f7;
      border: 0.1176vw solid #4497f7; }
    #mobile-frame #left-content #personas_wrapper .distant {
      color: #4497f7;
      border: 0.1176vw solid #4497f7; }
    #mobile-frame #left-content #personas_wrapper .archaic {
      color: #4497f7;
      border: 0.1176vw solid #4497f7; }
    #mobile-frame #left-content #personas_wrapper .updates {
      width: 1.110666666666667vw;
      height: 1.110666666666667vw;
      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; }
      #mobile-frame #left-content #personas_wrapper .updates.hide {
        display: none; }
      #mobile-frame #left-content #personas_wrapper .updates span {
        display: inline-block;
        vertical-align: top; }
        #mobile-frame #left-content #personas_wrapper .updates span.tiny {
          font-size: 0.522928vw; }
    #mobile-frame #left-content #personas_wrapper .answer_text {
      font-family: SourceSansPro;
      font-weight: 600;
      color: #fff;
      text-align: center;
      pointer-events: none;
      word-break: break-word;
      text-transform: lowercase;
      margin-left: -2vw;
      width: 17.01vw;
      font-size: 2.70vw;
      line-height: 2.9vw; }
      #mobile-frame #left-content #personas_wrapper .answer_text.uppercase {
        text-transform: uppercase; }
      #mobile-frame #left-content #personas_wrapper .answer_text .SourceSansPro {
        font-family: SourceSansPro; }
      #mobile-frame #left-content #personas_wrapper .answer_text .no-transform {
        text-transform: none; }
  #mobile-frame #left-content #app_name_wrapper {
    width: 100%; }
    #mobile-frame #left-content #app_name_wrapper.main {
      align-items: center;
      display: flex;
      height: calc(50vh + 4vw);
      justify-content: center;
      flex-flow: column; }
      #mobile-frame #left-content #app_name_wrapper.main #header-image {
        height: auto;
        max-height: 30vh;
        max-width: 55.57vw;
        width: auto; }
    #mobile-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; }
  #mobile-frame #left-content #wheel_wrapper {
    width: 75vw;
    height: 75vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 0; }
  #mobile-frame #left-content #wheel_wrapper div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  #mobile-frame #left-content #wheel_background {
    height: 75vw;
    width: 75vw; }
  #mobile-frame #left-content #wheel_outer {
    border-radius: 50%;
    width: 75vw;
    height: 75vw;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #f1f1f1; }
  #mobile-frame #left-content #user_portrait {
    border-radius: 50%;
    width: 32.66vw;
    height: 32.66vw;
    background-size: contain;
    background-position: center;
    border: none;
    position: absolute;
    left: 21.16vw;
    top: 21.16vw;
    z-index: 99; }
  #mobile-frame #left-content #user_portrait #middle_text_wrapper {
    display: table;
    height: 100%;
    position: absolute;
    width: 100%; }
  #mobile-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; }
  #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.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); }
    #action-footer-wrapper #action-footer {
      box-sizing: border-box;
      display: flex;
      width: 27.06vw;
      align-items: center;
      justify-content: space-between;
      padding: 15vh 3.86vw 1vh 3.86vw; }
      #action-footer-wrapper #action-footer .notes-count, #action-footer-wrapper #action-footer .message-count {
        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; }
        #action-footer-wrapper #action-footer .notes-count span, #action-footer-wrapper #action-footer .message-count span {
          display: inline-block;
          vertical-align: top; }
          #action-footer-wrapper #action-footer .notes-count span.tiny, #action-footer-wrapper #action-footer .message-count span.tiny {
            font-size: 0.75vh; }
  #mobile-frame #persona0 {
    top: 3.6316649211vw;
    left: 30.552826219vw; }
  #mobile-frame #persona1 {
    top: 11.503552581vw;
    left: 11.503552581vw; }
  #mobile-frame #persona2 {
    top: 30.552826219vw;
    left: 3.6316649211vw; }
  #mobile-frame #persona3 {
    top: 49.651915629vw;
    left: 11.503552581vw; }
  #mobile-frame #persona4 {
    top: 57.446892437vw;
    left: 30.552826219vw; }
  #mobile-frame #persona5 {
    top: 49.651915629vw;
    left: 49.651915629vw; }
  #mobile-frame #persona6 {
    top: 30.552826219vw;
    left: 57.446892437vw; }
  #mobile-frame #persona7 {
    top: 11.503552581vw;
    left: 49.651915629vw; }
  .control_footer-2023 {
    position: relative; }
    .control_footer-2023 #action-footer-wrapper #action-footer {
      padding: 20vh 5vw 10vh 5vw; }
  #mobile-content {
    padding-bottom: 30vh; }
  #mobile-frame #app-preview-wrapper #app-preview .bottom,
  #mobile-frame #left-content #app-preview-wrapper #app-preview .top {
    display: block;
    margin: 0 auto;
    width: 20vw; } }

.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; }
  #docs-content .file-link {
    font-size: 2.5vw; }
  #docs-content .file-edit-name {
    font-size: 1vw; }
  #docs-content #doc-list-items {
    padding-left: 4vw; }
  #docs-content .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; }
  #docs-content .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; }
  .page-wrapper_docs #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 #767676;
  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%, black 95%, transparent);
  mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 2%, black 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: 6vh; }

#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; }
  #posting-btns .message-box:empty::before {
    content: "enter message here...";
    color: gray; }
  #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; }

#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%; }

#posting > textarea, #update-text, #search-filter, .new-search-input {
  border: 1px solid #000;
  padding: 1vh 1vw;
  width: 25vw;
  font-weight: 600;
  font-size: 2vh;
  border-radius: 2vh;
  resize: none;
  background-color: #fff;
  color: #101010;
  outline: none;
  font-family: SourceSansPro; }

#update-text:empty::before {
  content: "enter message here...";
  color: gray; }

#search-filter:empty::before, .new-search-input:empty::before {
  content: "enter search here...";
  color: gray; }

.convo {
  color: white;
  width: 100%;
  height: 65vh;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end; }

@media screen and (orientation: portrait) {
  #posting > textarea, #update-text, #search-filter, .new-search-input {
    width: 60vw; }
  .convo {
    height: 70vh;
    width: 100vw; }
  #posting-btns .message-box {
    width: 60vw; } }

.message-media-section {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 8vh 0;
  background: black; }
  .message-media-section #message-media-dash {
    box-sizing: border-box;
    height: 84vh;
    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)); }
  .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; }

/* global variables for colors, etc*/
/*deals*/
/*typography*/
/* 2022 */
#modal-layer-dynamic.alphapointe-style {
  /*.pill {
    font-size: 1vw;
    color: #fff;
    background-color: #fff;
    text-align: center;
    font-weight: 600;
    border: 0.15vw solid #06415b;
    border-radius: 0.6vw !important;
    height: 5.25vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30vw !important;
    margin: 2.25vh 0;
    cursor: pointer;

    &.disabled {
      color: $ap-white;
      background: $light-grey;
      border-color: $light-grey;
    }

    span{
      text-align:center;
      font-weight:600;
      max-width:80%;
    }
  }*/ }
  #modal-layer-dynamic.alphapointe-style .page-flex-container {
    justify-content: center; }
  #modal-layer-dynamic.alphapointe-style .bottom-overlay {
    background: black;
    color: white; }
  #modal-layer-dynamic.alphapointe-style .link-input {
    background: #06415b;
    color: white;
    font-weight: 400;
    border-radius: 1vw;
    padding: 2vw;
    width: 65vw; }
    #modal-layer-dynamic.alphapointe-style .link-input::placeholder, #modal-layer-dynamic.alphapointe-style .link-input::-webkit-input-placeholder {
      font-style: italic !important;
      color: white !important;
      font-weight: 400; }
  #modal-layer-dynamic.alphapointe-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.alphapointe-style .soccer-input.invalid {
      color: #de002b; }
    #modal-layer-dynamic.alphapointe-style .soccer-input.invalid::placeholder {
      color: #de002b; }
    #modal-layer-dynamic.alphapointe-style .soccer-input.grey {
      color: #666666; }
    #modal-layer-dynamic.alphapointe-style .soccer-input.disabled {
      pointer-events: none; }
  #modal-layer-dynamic.alphapointe-style .soccer-input::placeholder {
    color: #4497f7; }
  #modal-layer-dynamic.alphapointe-style .soccer-input.disabled::placeholder {
    color: #666666;
    pointer-events: none; }
  #modal-layer-dynamic.alphapointe-style #bylaws-step-1, #modal-layer-dynamic.alphapointe-style #bylaws-step-2, #modal-layer-dynamic.alphapointe-style #bylaws-step-3 {
    text-align: center; }
  #modal-layer-dynamic.alphapointe-style .flex-buttons {
    display: flex;
    align-items: center;
    justify-content: center; }
    #modal-layer-dynamic.alphapointe-style .flex-buttons > * {
      margin-top: 0; }
  #modal-layer-dynamic.alphapointe-style .reorder-input {
    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; }
    #modal-layer-dynamic.alphapointe-style .reorder-input.editable {
      background-color: #4497f7; }
    #modal-layer-dynamic.alphapointe-style .reorder-input.black-version {
      background-color: #000 !important;
      border: 1px solid #4497f7; }
  #modal-layer-dynamic.alphapointe-style .default-checkbox-input {
    display: none; }
  #modal-layer-dynamic.alphapointe-style .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; }
  #modal-layer-dynamic.alphapointe-style .default-checkbox-input:checked + span {
    background-image: url(../images/icons/2022/save-green@3x.png); }
  #modal-layer-dynamic.alphapointe-style .green-button {
    background: #23e823;
    color: #101010;
    border-radius: 50%;
    width: 8vw;
    height: 8vw;
    margin-right: 2vw;
    display: flex;
    align-items: center;
    justify-content: center; }
  #modal-layer-dynamic.alphapointe-style .red-button {
    background: #e9222d;
    color: white;
    margin-left: 2vw;
    border-radius: 50%;
    width: 8vw;
    height: 8vw;
    display: flex;
    align-items: center;
    justify-content: center; }
  #modal-layer-dynamic.alphapointe-style .list-link {
    font-weight: 600; }
    #modal-layer-dynamic.alphapointe-style .list-link.person {
      display: flex;
      align-items: flex-start;
      width: 80vw;
      margin-bottom: 0.2vh;
      font-weight: 500; }
      #modal-layer-dynamic.alphapointe-style .list-link.person .message-icon {
        height: 7.5vw;
        width: 7.5vw;
        margin-right: 10px;
        opacity: 0; }
      #modal-layer-dynamic.alphapointe-style .list-link.person .position {
        margin-left: 15px;
        text-align: left;
        line-height: 1;
        width: calc(80vw - 140px); }
      #modal-layer-dynamic.alphapointe-style .list-link.person .name {
        width: 200px;
        line-height: 1; }
  #modal-layer-dynamic.alphapointe-style ::-webkit-datetime-edit-month-field,
  #modal-layer-dynamic.alphapointe-style ::-webkit-datetime-edit-day-field,
  #modal-layer-dynamic.alphapointe-style ::-webkit-datetime-edit-year-field {
    color: #4497f7; }
  #modal-layer-dynamic.alphapointe-style .link-list-ul {
    list-style-type: none;
    padding-left: 0;
    text-align: center;
    line-height: 2; }
  #modal-layer-dynamic.alphapointe-style .manager-header {
    align-items: center;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    padding: 0.5vh 1vw;
    color: white;
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 7.25vh; }
    #modal-layer-dynamic.alphapointe-style .manager-header .green {
      color: #23e823; }
  #modal-layer-dynamic.alphapointe-style .manager-contents {
    word-break: break-word;
    height: 70vh;
    width: 95%;
    background: white;
    color: #101010;
    text-align: center;
    overflow-y: scroll;
    font-weight: 600; }
    #modal-layer-dynamic.alphapointe-style .manager-contents h3 {
      font-size: 150%; }
    #modal-layer-dynamic.alphapointe-style .manager-contents .grey {
      color: #666666;
      font-size: 1vw;
      padding-inline: 5vw; }
    #modal-layer-dynamic.alphapointe-style .manager-contents li {
      text-align: left; }
    #modal-layer-dynamic.alphapointe-style .manager-contents .list-item {
      margin: 2vh 0 0 0; }
      #modal-layer-dynamic.alphapointe-style .manager-contents .list-item.compact {
        margin: 0.75vh 0 0 0; }
    #modal-layer-dynamic.alphapointe-style .manager-contents #doc-list-items .list-item {
      margin: 1vh 0 0 0; }
      #modal-layer-dynamic.alphapointe-style .manager-contents #doc-list-items .list-item.compact {
        margin: 3vh 0 0 0; }
    #modal-layer-dynamic.alphapointe-style .manager-contents ol {
      text-align: left;
      list-style: none;
      counter-reset: list; }
      #modal-layer-dynamic.alphapointe-style .manager-contents ol li {
        position: relative; }
      #modal-layer-dynamic.alphapointe-style .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; }
    #modal-layer-dynamic.alphapointe-style .manager-contents div[contenteditable=true] {
      white-space: pre-wrap;
      cursor: text;
      /*
      * {
        font-size: 1.5vh !important;
      }
      */ }
    #modal-layer-dynamic.alphapointe-style .manager-contents div[contenteditable=true]:empty:before,
    #modal-layer-dynamic.alphapointe-style .manager-contents div[contenteditable=true]:empty:focus:before,
    #modal-layer-dynamic.alphapointe-style .manager-contents div[contenteditable=true]:not(:focus):empty::before {
      content: attr(placeholder); }
  #modal-layer-dynamic.alphapointe-style .blue-btn {
    background: #4497f7;
    color: white;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center; }
  #modal-layer-dynamic.alphapointe-style .manager-footer {
    background: #101010;
    height: 15vh;
    width: 100%; }
  #modal-layer-dynamic.alphapointe-style .agenda-input, #modal-layer-dynamic.alphapointe-style .vote-input, #modal-layer-dynamic.alphapointe-style .doc-input, #modal-layer-dynamic.alphapointe-style .notes-input, #modal-layer-dynamic.alphapointe-style .action-input, #modal-layer-dynamic.alphapointe-style .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%; }
    #modal-layer-dynamic.alphapointe-style .agenda-input:disabled, #modal-layer-dynamic.alphapointe-style .vote-input:disabled, #modal-layer-dynamic.alphapointe-style .doc-input:disabled, #modal-layer-dynamic.alphapointe-style .notes-input:disabled, #modal-layer-dynamic.alphapointe-style .action-input:disabled, #modal-layer-dynamic.alphapointe-style .agenda-template-input:disabled {
      color: #101010;
      opacity: 1;
      background: transparent;
      border: none; }
      #modal-layer-dynamic.alphapointe-style .agenda-input:disabled::placeholder, #modal-layer-dynamic.alphapointe-style .agenda-input:disabled::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .vote-input:disabled::placeholder, #modal-layer-dynamic.alphapointe-style .vote-input:disabled::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .doc-input:disabled::placeholder, #modal-layer-dynamic.alphapointe-style .doc-input:disabled::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .notes-input:disabled::placeholder, #modal-layer-dynamic.alphapointe-style .notes-input:disabled::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .action-input:disabled::placeholder, #modal-layer-dynamic.alphapointe-style .action-input:disabled::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .agenda-template-input:disabled::placeholder, #modal-layer-dynamic.alphapointe-style .agenda-template-input:disabled::-webkit-input-placeholder {
        color: #101010;
        opacity: 1; }
    #modal-layer-dynamic.alphapointe-style .agenda-input::placeholder, #modal-layer-dynamic.alphapointe-style .agenda-input::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .vote-input::placeholder, #modal-layer-dynamic.alphapointe-style .vote-input::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .doc-input::placeholder, #modal-layer-dynamic.alphapointe-style .doc-input::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .notes-input::placeholder, #modal-layer-dynamic.alphapointe-style .notes-input::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .action-input::placeholder, #modal-layer-dynamic.alphapointe-style .action-input::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style .agenda-template-input::placeholder, #modal-layer-dynamic.alphapointe-style .agenda-template-input::-webkit-input-placeholder {
      color: #4497f7; }
    #modal-layer-dynamic.alphapointe-style .agenda-input.black, #modal-layer-dynamic.alphapointe-style .vote-input.black, #modal-layer-dynamic.alphapointe-style .doc-input.black, #modal-layer-dynamic.alphapointe-style .notes-input.black, #modal-layer-dynamic.alphapointe-style .action-input.black, #modal-layer-dynamic.alphapointe-style .agenda-template-input.black {
      color: #101010; }
  #modal-layer-dynamic.alphapointe-style .shadow-input, #modal-layer-dynamic.alphapointe-style .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; }
    #modal-layer-dynamic.alphapointe-style .shadow-input *, #modal-layer-dynamic.alphapointe-style .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; }
  #modal-layer-dynamic.alphapointe-style .agenda-input, #modal-layer-dynamic.alphapointe-style .vote-input, #modal-layer-dynamic.alphapointe-style .notes-input, #modal-layer-dynamic.alphapointe-style .action-input {
    color: #4497f7; }
  #modal-layer-dynamic.alphapointe-style .doc-input {
    color: #4497f7; }
  #modal-layer-dynamic.alphapointe-style .doc-link {
    padding-left: 0;
    width: 100%; }
  #modal-layer-dynamic.alphapointe-style .message-icon {
    opacity: 1; }
  #modal-layer-dynamic.alphapointe-style #phone_wrapper input, #modal-layer-dynamic.alphapointe-style #email_wrapper input, #modal-layer-dynamic.alphapointe-style #display_name_wrapper input {
    outline: none; }
    #modal-layer-dynamic.alphapointe-style #phone_wrapper input::placeholder, #modal-layer-dynamic.alphapointe-style #phone_wrapper input::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style #email_wrapper input::placeholder, #modal-layer-dynamic.alphapointe-style #email_wrapper input::-webkit-input-placeholder, #modal-layer-dynamic.alphapointe-style #display_name_wrapper input::placeholder, #modal-layer-dynamic.alphapointe-style #display_name_wrapper input::-webkit-input-placeholder {
      color: #4497f7; }
  #modal-layer-dynamic.alphapointe-style .remove-agenda-item, #modal-layer-dynamic.alphapointe-style .remove-notes-item,
  #modal-layer-dynamic.alphapointe-style #posting > textarea {
    border-radius: 3vw;
    line-height: 0.8 !important; }
  #modal-layer-dynamic.alphapointe-style #agenda-item-readonly, #modal-layer-dynamic.alphapointe-style #agenda-item-editable, #modal-layer-dynamic.alphapointe-style .notes-item-readonly, #modal-layer-dynamic.alphapointe-style .notes-item-editable {
    min-height: 2.5vh;
    max-width: 100%;
    font-family: SourceSansPro !important;
    font-size: 2vh !important;
    line-height: 2.5vh !important;
    font-weight: 600 !important; }
    #modal-layer-dynamic.alphapointe-style #agenda-item-readonly div, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly p, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly strong, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly span, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly li, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly b, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly i, #modal-layer-dynamic.alphapointe-style #agenda-item-editable div, #modal-layer-dynamic.alphapointe-style #agenda-item-editable p, #modal-layer-dynamic.alphapointe-style #agenda-item-editable strong, #modal-layer-dynamic.alphapointe-style #agenda-item-editable span, #modal-layer-dynamic.alphapointe-style #agenda-item-editable li, #modal-layer-dynamic.alphapointe-style #agenda-item-editable b, #modal-layer-dynamic.alphapointe-style #agenda-item-editable i, #modal-layer-dynamic.alphapointe-style .notes-item-readonly div, #modal-layer-dynamic.alphapointe-style .notes-item-readonly p, #modal-layer-dynamic.alphapointe-style .notes-item-readonly strong, #modal-layer-dynamic.alphapointe-style .notes-item-readonly span, #modal-layer-dynamic.alphapointe-style .notes-item-readonly li, #modal-layer-dynamic.alphapointe-style .notes-item-readonly b, #modal-layer-dynamic.alphapointe-style .notes-item-readonly i, #modal-layer-dynamic.alphapointe-style .notes-item-editable div, #modal-layer-dynamic.alphapointe-style .notes-item-editable p, #modal-layer-dynamic.alphapointe-style .notes-item-editable strong, #modal-layer-dynamic.alphapointe-style .notes-item-editable span, #modal-layer-dynamic.alphapointe-style .notes-item-editable li, #modal-layer-dynamic.alphapointe-style .notes-item-editable b, #modal-layer-dynamic.alphapointe-style .notes-item-editable i {
      font-family: SourceSansPro !important;
      font-size: 2vh !important;
      line-height: 2.5vh !important;
      font-weight: 600 !important; }
  #modal-layer-dynamic.alphapointe-style #agenda-item-readonly, #modal-layer-dynamic.alphapointe-style .notes-item-readonly {
    color: black !important;
    white-space: pre-wrap;
    cursor: text; }
    #modal-layer-dynamic.alphapointe-style #agenda-item-readonly div, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly p, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly strong, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly span, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly li, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly b, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly i, #modal-layer-dynamic.alphapointe-style .notes-item-readonly div, #modal-layer-dynamic.alphapointe-style .notes-item-readonly p, #modal-layer-dynamic.alphapointe-style .notes-item-readonly strong, #modal-layer-dynamic.alphapointe-style .notes-item-readonly span, #modal-layer-dynamic.alphapointe-style .notes-item-readonly li, #modal-layer-dynamic.alphapointe-style .notes-item-readonly b, #modal-layer-dynamic.alphapointe-style .notes-item-readonly i {
      color: black !important; }
  #modal-layer-dynamic.alphapointe-style #agenda-item-editable, #modal-layer-dynamic.alphapointe-style .notes-item-editable {
    white-space: pre-wrap;
    cursor: text;
    color: #4497f7 !important; }
    #modal-layer-dynamic.alphapointe-style #agenda-item-editable div, #modal-layer-dynamic.alphapointe-style #agenda-item-editable p, #modal-layer-dynamic.alphapointe-style #agenda-item-editable strong, #modal-layer-dynamic.alphapointe-style #agenda-item-editable span, #modal-layer-dynamic.alphapointe-style #agenda-item-editable li, #modal-layer-dynamic.alphapointe-style #agenda-item-editable b, #modal-layer-dynamic.alphapointe-style #agenda-item-editable i, #modal-layer-dynamic.alphapointe-style .notes-item-editable div, #modal-layer-dynamic.alphapointe-style .notes-item-editable p, #modal-layer-dynamic.alphapointe-style .notes-item-editable strong, #modal-layer-dynamic.alphapointe-style .notes-item-editable span, #modal-layer-dynamic.alphapointe-style .notes-item-editable li, #modal-layer-dynamic.alphapointe-style .notes-item-editable b, #modal-layer-dynamic.alphapointe-style .notes-item-editable i {
      color: #4497f7 !important; }
  @media screen and (orientation: portrait) {
    #modal-layer-dynamic.alphapointe-style {
      /*
    .footer-buttons {
        bottom: 3vh;
        transform: translateX(-37%);
    }
    */ }
      #modal-layer-dynamic.alphapointe-style .shadow-input, #modal-layer-dynamic.alphapointe-style .agenda-name {
        font-size: 3vw !important;
        line-height: 4vw !important;
        white-space: pre-wrap;
        word-wrap: break-word;
        color: #101010;
        font-weight: 700; }
        #modal-layer-dynamic.alphapointe-style .shadow-input *, #modal-layer-dynamic.alphapointe-style .agenda-name * {
          font-size: 3vw !important;
          line-height: 4vw !important; }
      #modal-layer-dynamic.alphapointe-style #agenda-item-readonly, #modal-layer-dynamic.alphapointe-style #agenda-item-editable, #modal-layer-dynamic.alphapointe-style .notes-item-readonly, #modal-layer-dynamic.alphapointe-style .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; }
        #modal-layer-dynamic.alphapointe-style #agenda-item-readonly div, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly p, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly strong, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly span, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly li, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly b, #modal-layer-dynamic.alphapointe-style #agenda-item-readonly i, #modal-layer-dynamic.alphapointe-style #agenda-item-editable div, #modal-layer-dynamic.alphapointe-style #agenda-item-editable p, #modal-layer-dynamic.alphapointe-style #agenda-item-editable strong, #modal-layer-dynamic.alphapointe-style #agenda-item-editable span, #modal-layer-dynamic.alphapointe-style #agenda-item-editable li, #modal-layer-dynamic.alphapointe-style #agenda-item-editable b, #modal-layer-dynamic.alphapointe-style #agenda-item-editable i, #modal-layer-dynamic.alphapointe-style .notes-item-readonly div, #modal-layer-dynamic.alphapointe-style .notes-item-readonly p, #modal-layer-dynamic.alphapointe-style .notes-item-readonly strong, #modal-layer-dynamic.alphapointe-style .notes-item-readonly span, #modal-layer-dynamic.alphapointe-style .notes-item-readonly li, #modal-layer-dynamic.alphapointe-style .notes-item-readonly b, #modal-layer-dynamic.alphapointe-style .notes-item-readonly i, #modal-layer-dynamic.alphapointe-style .notes-item-editable div, #modal-layer-dynamic.alphapointe-style .notes-item-editable p, #modal-layer-dynamic.alphapointe-style .notes-item-editable strong, #modal-layer-dynamic.alphapointe-style .notes-item-editable span, #modal-layer-dynamic.alphapointe-style .notes-item-editable li, #modal-layer-dynamic.alphapointe-style .notes-item-editable b, #modal-layer-dynamic.alphapointe-style .notes-item-editable i {
          font-size: 3vw !important;
          line-height: 4vw !important;
          font-weight: 600 !important; }
      #modal-layer-dynamic.alphapointe-style #posting > textarea {
        padding: 0 1vw;
        line-height: 0.8 !important;
        padding-top: 2vw;
        width: 50vw;
        border-radius: 10vw;
        margin-right: 7vw;
        padding-left: 2vw; }
      #modal-layer-dynamic.alphapointe-style #modal-layer-dynamic.alphapointe-style .soccer-input {
        font-size: 3vw;
        line-height: 3.5vw; }
      #modal-layer-dynamic.alphapointe-style .manager-contents {
        height: 70vh;
        width: 96vw;
        background: white;
        color: #101010;
        text-align: center;
        padding: 2vw;
        overflow-x: hidden;
        overflow-y: scroll;
        font-weight: 600; }
        #modal-layer-dynamic.alphapointe-style .manager-contents div[contenteditable=true] {
          white-space: pre-wrap;
          cursor: text; }
          #modal-layer-dynamic.alphapointe-style .manager-contents div[contenteditable=true] * {
            font-size: 3vw !important; }
        #modal-layer-dynamic.alphapointe-style .manager-contents div[contenteditable=true]:empty:before,
        #modal-layer-dynamic.alphapointe-style .manager-contents div[contenteditable=true]:empty:focus:before,
        #modal-layer-dynamic.alphapointe-style .manager-contents div[contenteditable=true]:not(:focus):empty::before {
          content: attr(placeholder); }
        #modal-layer-dynamic.alphapointe-style .manager-contents h3 {
          font-size: 150%; }
        #modal-layer-dynamic.alphapointe-style .manager-contents .grey {
          color: #666666; }
        #modal-layer-dynamic.alphapointe-style .manager-contents li {
          text-align: left; }
        #modal-layer-dynamic.alphapointe-style .manager-contents .list-item {
          margin: 2vh 0 0 0; }
          #modal-layer-dynamic.alphapointe-style .manager-contents .list-item.compact {
            margin: 0.75vh 0 0 0; }
        #modal-layer-dynamic.alphapointe-style .manager-contents #doc-list-items .list-item {
          margin: 4vh 0 0 0; }
          #modal-layer-dynamic.alphapointe-style .manager-contents #doc-list-items .list-item.compact {
            margin: 3vh 0 0 0; }
        #modal-layer-dynamic.alphapointe-style .manager-contents ol {
          text-align: left;
          list-style: none;
          counter-reset: list; }
          #modal-layer-dynamic.alphapointe-style .manager-contents ol li {
            position: relative; }
          #modal-layer-dynamic.alphapointe-style .manager-contents ol li:before {
            counter-increment: list;
            content: counter(list) ".";
            position: absolute;
            right: 100%;
            margin-right: 2vw;
            top: 0.15vh; }
        #modal-layer-dynamic.alphapointe-style .manager-contents #doc-list-items li:before {
          counter-increment: list;
          content: counter(list) ".";
          position: absolute;
          left: 0 !important;
          top: 0 !important;
          margin-right: 2vw; } }
  @media screen and (max-width: 767px) and (orientation: landscape) {
    #modal-layer-dynamic.alphapointe-style .top-banner-img {
      width: 9.5vw;
      height: 9.5vw; }
    #modal-layer-dynamic.alphapointe-style .ap-board-back {
      bottom: 10vh; }
    #modal-layer-dynamic.alphapointe-style .ap-board-footer-buttons {
      bottom: 8vh; } }
  #modal-layer-dynamic.alphapointe-style .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; }
  #modal-layer-dynamic.alphapointe-style .board-confirm-dialog.fade {
    opacity: 0;
    transition: opacity linear 2s; }
  #modal-layer-dynamic.alphapointe-style .board-confirm-dialog .question {
    box-sizing: border-box;
    font-size: 125%;
    font-weight: 500;
    line-height: 125%;
    padding: 2vh 5vw;
    text-align: center; }
  #modal-layer-dynamic.alphapointe-style .board-confirm-dialog .buttons-wrapper {
    bottom: 0;
    box-sizing: border-box;
    font-weight: 600;
    position: absolute;
    text-align: center;
    width: 100%; }
  #modal-layer-dynamic.alphapointe-style .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; }
  #modal-layer-dynamic.alphapointe-style .board-confirm-dialog .check {
    box-sizing: border-box;
    display: inline-block;
    margin: 2vh 2vw;
    width: 4vw;
    vertical-align: middle; }
  #modal-layer-dynamic.alphapointe-style .board-confirm-dialog .message {
    box-sizing: border-box;
    display: inline-block;
    margin: 2vh 2vw;
    vertical-align: middle;
    font-size: 110%;
    line-height: 110%; }
  #modal-layer-dynamic.alphapointe-style #additional-text * {
    color: white;
    font-size: 1.1vw;
    padding: 0;
    margin: 0; }
  @media screen and (orientation: portrait) {
    #modal-layer-dynamic.alphapointe-style .reorder-input {
      width: 8vw;
      height: 8vw;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
      border: 1px solid #4497f7;
      border-radius: 4px;
      text-align-last: center;
      font-weight: 600;
      color: #fff;
      outline: none; }
      #modal-layer-dynamic.alphapointe-style .reorder-input.editable {
        background-color: #4497f7; }
      #modal-layer-dynamic.alphapointe-style .reorder-input.black-version {
        background-color: #000 !important;
        border: 1px solid #4497f7; }
    #modal-layer-dynamic.alphapointe-style body {
      font-size: 3vw !important;
      line-height: 3.5vw !important; } }

/* 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: 1.25vw;
  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-size: 1.2vw;
  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: .4s;
  transition: .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: .4s;
  transition: .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: ''; }

#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-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; }

.persona-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-inline: 1vw;
  cursor: pointer; }
  .persona-wrapper img {
    border-radius: 50%;
    width: 9vw;
    height: 9vw;
    object-fit: contain; }
  .persona-wrapper span {
    font-weight: 600; }

.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: calc(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 */
#modal-layer-dynamic.calendar {
  background: transparent;
  flex-direction: row;
  align-items: flex-end;
  overflow: visible; }
  #modal-layer-dynamic.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; }
  #modal-layer-dynamic.calendar #last-month {
    margin-right: 20px;
    cursor: pointer; }
  #modal-layer-dynamic.calendar #next-month {
    margin-left: 20px;
    cursor: pointer; }
  #modal-layer-dynamic.calendar .calendar-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 3vh;
    font-weight: 600;
    color: white;
    font-size: 2vh; }
  #modal-layer-dynamic.calendar .calendar-wrapper {
    height: 82vh;
    margin-top: 9vh;
    width: 100%; }
  #modal-layer-dynamic.calendar #calendar-filters-wrapper {
    display: flex;
    flex-direction: row; }
  #modal-layer-dynamic.calendar #single-day {
    width: 100%;
    height: 100%;
    display: none;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
    flex-direction: column; }
    #modal-layer-dynamic.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; }
    #modal-layer-dynamic.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; }
      #modal-layer-dynamic.calendar #single-day .day-expanded .date {
        font-size: 30px; }
    #modal-layer-dynamic.calendar #single-day #back_button {
      position: absolute;
      float: left;
      left: 20px; }
    #modal-layer-dynamic.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); }
      #modal-layer-dynamic.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; }
        #modal-layer-dynamic.calendar #single-day .event-row .event-time.red {
          background: #e9222d; }
        #modal-layer-dynamic.calendar #single-day .event-row .event-time.green {
          background: #14ab1c; }
      #modal-layer-dynamic.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; }
        #modal-layer-dynamic.calendar #single-day .event-row .event-detail.red {
          background: #e9222d; }
        #modal-layer-dynamic.calendar #single-day .event-row .event-detail.green {
          background: #14ab1c; }
        #modal-layer-dynamic.calendar #single-day .event-row .event-detail .event-title {
          font-weight: bold;
          font-size: 20px; }
        #modal-layer-dynamic.calendar #single-day .event-row .event-detail .event-location {
          font-weight: normal;
          font-size: 15px; }
    #modal-layer-dynamic.calendar #single-day #add-button {
      font-size: 60px;
      position: absolute;
      bottom: 0;
      right: 20px;
      font-weight: 900;
      color: #e9222d; }
  #modal-layer-dynamic.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; }
    #modal-layer-dynamic.calendar .calendar-months div {
      color: white;
      font-weight: bold;
      overflow: visible;
      width: 100%;
      font-size: 15px; }
      #modal-layer-dynamic.calendar .calendar-months div.active {
        border-radius: 50%;
        background: #4497f7; }
  #modal-layer-dynamic.calendar #filter-fluid2 {
    overflow-x: scroll;
    display: flex;
    margin-top: 5px;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    bottom: 90px; }
    #modal-layer-dynamic.calendar #filter-fluid2 label {
      font-size: 75%;
      width: auto;
      margin-left: 10px;
      white-space: nowrap; }
  #modal-layer-dynamic.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%; }
    #modal-layer-dynamic.calendar #list-view #list-contents {
      display: flex;
      margin-top: 10vh;
      flex-direction: column;
      align-items: center; }
  #modal-layer-dynamic.calendar table {
    width: 28vw;
    border: 0;
    height: 70vh; }
    #modal-layer-dynamic.calendar table thead {
      padding-bottom: 2vh; }
    #modal-layer-dynamic.calendar table .month {
      background: #e9222d;
      color: white;
      font-weight: bold;
      text-transform: lowercase;
      font-size: 30px;
      height: 50px; }
    #modal-layer-dynamic.calendar table th {
      height: 8vw;
      border: none;
      border-bottom: 0; }
    #modal-layer-dynamic.calendar table tr {
      border-top: 0;
      font-size: 4vw;
      font-weight: bold; }
    #modal-layer-dynamic.calendar table td {
      padding: 0;
      vertical-align: top;
      text-align: center;
      border: 0;
      font-size: 100%;
      color: #fff;
      border: 0;
      position: relative; }
      #modal-layer-dynamic.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%; }
        #modal-layer-dynamic.calendar table td span.disabled {
          background: rgba(0, 0, 0, 0.5);
          border: 0;
          opacity: 0; }
        #modal-layer-dynamic.calendar table td span.future {
          background: rgba(255, 255, 255, 0.5);
          border-color: transparent; }
        #modal-layer-dynamic.calendar table td span.complete {
          background: #23e823; }
        #modal-layer-dynamic.calendar table td span.active {
          background: transparent;
          cursor: pointer; }
          #modal-layer-dynamic.calendar table td span.active.current-plan-day {
            border: 3px solid #fff; }
          #modal-layer-dynamic.calendar table td span.active .dot {
            background-color: #4497f7; }
          #modal-layer-dynamic.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; }
            #modal-layer-dynamic.calendar table td span.active .status-check.green {
              background-image: url("../core/images/icons/2022/save-green@3x.png"); }
            #modal-layer-dynamic.calendar table td span.active .status-check.red {
              background-image: url("../core/images/icons/2022/save-red@3x.png"); }
            #modal-layer-dynamic.calendar table td span.active .status-check.yellow {
              background-image: url("../core/images/icons/2022/save-yellow@3x.png"); }
            #modal-layer-dynamic.calendar table td span.active .status-check.white {
              background-image: url("../core/images/icons/2022/save@3x.png"); }
          #modal-layer-dynamic.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; }
        #modal-layer-dynamic.calendar table td span.today {
          border: 3px solid white;
          margin-left: 0;
          margin-top: 0; }
        #modal-layer-dynamic.calendar table td span.current {
          border-color: #4497f7;
          background: #4497f7; }
          #modal-layer-dynamic.calendar table td span.current .day-num {
            color: black; }
          #modal-layer-dynamic.calendar table td span.current .dot {
            background-color: white; }
        #modal-layer-dynamic.calendar table td span .day-num {
          position: absolute;
          left: 0;
          top: 0.5vw;
          font-weight: 600;
          font-size: 20%;
          color: white;
          width: 100%;
          text-align: center; }
        #modal-layer-dynamic.calendar table td span .day-title {
          text-overflow: ellipsis;
          font-size: 30%;
          font-weight: 500;
          line-height: 80%;
          position: absolute;
          left: 0.25vw;
          bottom: 1vw;
          color: white;
          max-width: 90%;
          white-space: nowrap;
          overflow: hidden;
          letter-spacing: -0.5px; }
        #modal-layer-dynamic.calendar table td span .day-multiple {
          border-top: 1px white solid;
          box-sizing: border-box;
          margin-top: 80%;
          transform: translateY(-50%); }
          #modal-layer-dynamic.calendar table td span .day-multiple div {
            text-overflow: ellipsis;
            font-size: 60%;
            font-weight: 500;
            line-height: 80%;
            color: white;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            letter-spacing: -0.5px;
            border-bottom: 1px white solid;
            padding: 1px;
            box-sizing: border-box; }
        #modal-layer-dynamic.calendar table td span .dot {
          border-radius: 50%;
          height: 10px;
          position: absolute;
          bottom: 1vw;
          left: 1vw;
          width: 10px;
          background-color: #4497f7; }
          .active #modal-layer-dynamic.calendar table td span .dot {
            background-color: #f1f1f1; }
        #modal-layer-dynamic.calendar table td span .check {
          height: 15px;
          position: absolute;
          bottom: 1vw;
          left: 1vw;
          width: 15px;
          content: '\2713';
          color: #ffdc01;
          background-size: contain;
          background-repeat: no-repeat; }
      #modal-layer-dynamic.calendar table td > div {
        text-align: center; }
      #modal-layer-dynamic.calendar table td.disabled {
        color: #cccccc;
        opacity: 0; }
      #modal-layer-dynamic.calendar table td.event {
        color: #00d02d; }
      #modal-layer-dynamic.calendar table td.home {
        color: #e9222d; }
      #modal-layer-dynamic.calendar table td.away {
        color: #4497f7; }
  #modal-layer-dynamic.calendar .day-title {
    display: flex;
    flex-direction: row;
    align-items: center; }
    #modal-layer-dynamic.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) {
    #modal-layer-dynamic.calendar table {
      width: 95vw; }
      #modal-layer-dynamic.calendar table td span {
        border-radius: 2vw; }
        #modal-layer-dynamic.calendar table td span .day-num {
          top: 1vw;
          font-size: 75%; }
    #modal-layer-dynamic.calendar .calendar-wrapper {
      height: auto; } }

.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: .4s;
  transition: .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: .4s;
  transition: .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 .pop-up-footer {
  box-sizing: border-box;
  position: fixed;
  display: none;
  z-index: 999999;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh; }
  #modal-layer-dynamic.ksysa-style .pop-up-footer .modal {
    box-sizing: border-box;
    width: 100%;
    color: white;
    padding: 1vh 6vw 5.5vw 6vw;
    background: black;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 65vw;
    left: 35vw; }
    #modal-layer-dynamic.ksysa-style .pop-up-footer .modal .comment-row {
      margin: 1vh 0;
      text-align: left;
      width: auto;
      align-items: center; }
      #modal-layer-dynamic.ksysa-style .pop-up-footer .modal .comment-row .img {
        line-height: 1; }

#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; }

.sport-entity-item {
  margin: 0.5vh 0;
  width: 100%;
  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; }

@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 .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: "sa_triumphregular";
  font-size: 1vw;
  line-height: 1.25vw;
  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: 2vh;
    line-height: 2.5vh;
    border: none; }
  #modal-layer-dynamic.slcket-style .button.disabled {
    color: #aeaeae;
    cursor: text;
    pointer-events: none; }

#modal-layer-dynamic.slcket-style .button:hover {
  color: #e9222d;
  border-color: #e9222d; }

#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; }
  #modal-layer-dynamic.slcket-style .grey-slcket-text-input.empty, #modal-layer-dynamic.slcket-style .grey-slcket-text-input::placeholder {
    color: #9b9b9b; }

#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; }

#modal-layer-dynamic.slcket-style .grey-slcket-input-label {
  margin-bottom: 1.5vh;
  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 #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 .pop-up-footer {
  box-sizing: border-box;
  position: fixed;
  display: none;
  z-index: 999999;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh; }
  #modal-layer-dynamic.slcket-style .pop-up-footer .modal {
    box-sizing: border-box;
    width: 100%;
    border-radius: 6px;
    color: white;
    padding: 1vh 6vw 5.5vw 6vw;
    backdrop-filter: brightness(25%);
    -webkit-backdrop-filter: brightness(25%);
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 65vw;
    left: 35vw; }
    #modal-layer-dynamic.slcket-style .pop-up-footer .modal .comment-row {
      margin: 1vh 0;
      text-align: left;
      width: auto;
      align-items: center; }
      #modal-layer-dynamic.slcket-style .pop-up-footer .modal .comment-row .img {
        line-height: 1; }

@media screen and (orientation: portrait) {
  #modal-layer-dynamic.slcket-style .pop-up-footer .modal {
    width: 100%;
    left: 0; }
  #modal-layer-dynamic.slcket-style .grey-slcket-text-input {
    font-size: 4vw; }
  #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: 4.5vw;
    line-height: 5vw;
    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 #animated-text-buttons-wrapper {
    align-items: center !important;
    flex-direction: column; } }

@media screen and (max-width: 767px) and (orientation: landscape) {
  #modal-layer-dynamic.slcket-style .grey-slcket-text-input {
    padding-bottom: 1vw;
    font-size: 2vw;
    margin-top: 4vw; }
  #modal-layer-dynamic.slcket-style .grey-slcket-select-input {
    padding-bottom: 1vw;
    font-size: 2vw;
    margin-top: 4vw; }
  #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; } }

#modal-layer-dynamic.slcket-style #animated-text-buttons-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 2vh;
  text-align: center; }
  #modal-layer-dynamic.slcket-style #animated-text-buttons-wrapper span {
    white-space: nowrap; }

#mini-right-frame {
  position: relative;
  right: 0;
  top: 0;
  transform: none;
  width: 40.3vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); }

#mini-left-frame {
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  width: 21.7vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); }

#mini-left-frame .mini-action-footer-button {
  cursor: auto; }

#mini-left-frame #mini-persona0 {
  top: 0.75805vw;
  left: 6.396346666666666vw; }

#mini-left-frame #mini-persona1 {
  top: 2.41032433346vw;
  left: 2.41128999946vw; }

#mini-left-frame #mini-persona2 {
  top: 6.393215333333333vw;
  left: 0.75805vw; }

#mini-left-frame #mini-persona3 {
  top: 10.4051090054vw;
  left: 2.41032433346vw; }

#mini-left-frame #mini-persona4 {
  top: 12.02007vw;
  left: 6.396346666666666vw; }

#mini-left-frame #mini-persona5 {
  top: 10.4051090054vw;
  left: 10.4051090054vw; }

#mini-left-frame #mini-persona6 {
  top: 6.393215333333333vw;
  left: 12.02007vw; }

#mini-left-frame #mini-persona7 {
  top: 2.41032433346vw;
  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.99170666668vw;
  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.04050666666vw 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.84562666667vw;
  height: 6.84562666667vw;
  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.62026666667vw;
        max-width: 2.26837333333vw;
        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.56458666667vw;
    font-size: 0.53165vw;
    line-height: 0.569625vw;
    margin-left: -0.32405333333vw; }

#right-frame #right-content #editor_wheel_wrapper {
  z-index: 9;
  position: relative;
  width: 17.744533333333333vw;
  height: 17.744533333333333vw;
  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.744533333333333vw;
  height: 17.744533333333333vw; }

#right-frame #right-content #editor_wheel_outer {
  border-radius: 50%;
  width: 17.744533333333333vw;
  height: 17.744533333333333vw;
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 0.065333333333333vw 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.744533333333333vw;
  width: 17.744533333333333vw;
  position: relative;
  top: -17.744533333333333vw;
  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.79274666667vw;
        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.024533333333333vw;
    font-size: 0.60025vw;
    line-height: 0.643125vw;
    margin-left: -0.365866666666655vw; }
  #right-frame #right-content #editor_personas_wrapper .SourceSansPro {
    font-family: SourceSansPro; }

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

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

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

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

#right-frame #right-content #editor_persona4 {
  top: 13.594233333333333vw;
  left: 7.225866666666666vw; }

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

#right-frame #right-content #editor_persona6 {
  top: 7.225866666666666vw;
  left: 13.594233333333333vw; }

#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; }

.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.tiny {
      border-radius: 1vh;
      height: 7vh;
      width: 3.9375vh; }
    .profile-pic.user.small {
      border-radius: 1vh;
      height: 4.4vw;
      width: 2.5vw; }
    .profile-pic.user.right {
      height: 33.78vw;
      width: 19vw;
      border-radius: 3vh;
      border: 2px solid white; }
    .profile-pic.user.omni-media {
      height: 60vh;
      width: 33.75vh;
      border-radius: 2vh;
      border: 2px solid white; }
    .profile-pic.user.branded-background {
      box-sizing: content-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 .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%); }
    .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; }

.fixed-bottom-left {
  position: absolute;
  left: 1vw;
  bottom: 1vh; }

.fixed-bottom-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1vh; }

.fixed-bottom-right {
  position: absolute;
  right: 1vw;
  bottom: 1vh; }

.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-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; }

@media screen and (max-width: 767px) and (orientation: landscape) {
  #omni-content {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 8.5vh 1vw 12vh 1vw;
    background: rgba(0, 0, 0, 0.4); }
    #omni-content #omni-center {
      position: relative;
      height: 100%;
      width: 100%;
      box-sizing: border-box; }
      #omni-content #omni-center #omni-media {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        height: 85%;
        width: 100%;
        max-width: 40vw;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box; }
        #omni-content #omni-center #omni-media img.omni-media {
          max-width: 100%;
          max-height: 60vh;
          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 {
          max-width: 100%;
          max-height: 85%;
          box-sizing: border-box;
          border-radius: 2vh;
          border: 2px solid white;
          z-index: 3;
          object-fit: contain; }
      #omni-content #omni-center #omni-data {
        position: relative;
        height: 100%;
        width: 100%;
        box-sizing: border-box; }
    #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; } }

@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;
    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-center {
      bottom: 23vw;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 23vw);
      justify-content: space-between;
      left: 0;
      position: fixed;
      width: 100vw; }
      #omni-content #omni-center #omni-media {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding-top: 6vh;
        flex-grow: 9;
        height: 60%; }
  #posting-btns {
    width: 100vw;
    right: auto;
    left: -1vw;
    bottom: 7vh; }
  .dark-checkbox-span {
    width: 4vw;
    height: 4vw;
    margin-right: 0.75vw; }
  .dark-checkbox-input:checked + span {
    width: 4.75vw; }
  .profile-pic {
    height: 16vw; }
    .profile-pic.user {
      border-radius: 2vw;
      width: 9vw; } }

#multi-frame-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 65vw;
  height: 8.5vh;
  box-sizing: border-box; }

#multi-frame-body {
  position: absolute;
  top: 8.5vh;
  right: 0;
  width: 65vw;
  height: 83vh;
  box-sizing: border-box;
  padding: 1vh 1vw; }

#multi-frame-right {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 83vh;
  position: absolute;
  right: 1vw;
  top: 50%;
  transform: translateY(-50%); }
  #multi-frame-right #multi-frame-media {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    border-radius: 2vh;
    border: 2px solid white;
    cursor: pointer;
    height: 66vh;
    overflow: hidden;
    width: 37.125vh; }
    #multi-frame-right #multi-frame-media video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      visibility: hidden; }
    #multi-frame-right #multi-frame-media .full-size {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    #multi-frame-right #multi-frame-media .video-preview {
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0; }
      #multi-frame-right #multi-frame-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; }

#multi-frame-center {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 81vh;
  position: absolute;
  left: 1vw;
  top: 50%;
  transform: translateY(-50%);
  width: 43vw; }

body {
  color: #fff;
  font-weight: 600;
  font-family: SourceSansPro;
  margin: 0;
  padding: 0;
  font-size: 1.75vh; }

.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: .5em;
  margin: 0;
  position: absolute;
  right: 4vw;
  width: .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; }

@-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; }

.fade:before {
  opacity: 1;
  -webkit-transition: opacity .4s ease-in-out;
  transition: opacity .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; }

.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 .4s ease-in-out;
  transition: opacity .4s ease-in-out;
  width: 100%; }

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

#right-media-frame {
  position: fixed;
  height: 100vh;
  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;
  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); }

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

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

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

#left-overlay.user-image {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: .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.714285714285714vw;
  width: 1.714285714285714vw;
  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 .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 .5s linear infinite;
  animation: spin .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; }

.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; }

.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;
  width: 100%; }
  .dashified-dash .dashified-content {
    width: 65vw;
    color: white;
    font-weight: 600;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 3.5vh 0 8vh 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.flex-box {
      display: flex;
      flex-wrap: wrap;
      padding: 2vh 1vw;
      justify-content: space-between; }
      .dashified-dash .dashified-content.flex-box .item {
        cursor: pointer;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 5vh; }
        .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;
    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: fixed;
  display: none;
  z-index: 999999;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh; }
  .pop-up-footer .modal {
    box-sizing: border-box;
    color: white;
    padding: 1vh 6vw 14vh 6vw;
    background: black;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 65vw;
    right: 0; }
    .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; }

@media screen and (orientation: portrait) {
  body {
    font-size: 3vw;
    line-height: 3.5vw; }
  #right-media-frame {
    width: 100vw; }
  .modal-overlay {
    z-index: 1009;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; }
  .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 6vw 23vw 6vw;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0; }
  .new-search-input {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8.75vw;
    display: inline-block;
    margin: 0;
    z-index: 9999;
    border-radius: 2vw;
    padding: 1vw; }
    .skinny-iphone .new-search-input {
      bottom: 7vw; }
  .icon-with-word {
    width: auto; }
  .dashified-dash {
    position: fixed;
    bottom: 23vw;
    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: 78vh; }
    .dashified-dash.android-search-active {
      height: 62vh; }
    .skinny-iphone .dashified-dash {
      height: 75vh; }
    .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 {
    position: fixed;
    right: 2vw;
    bottom: 2.1vw; }
    .skinny-iphone .fixed-bottom-right {
      bottom: 5vw; }
  #slcket-year-input-area, #slcket-month-input-area, #slcket-day-input-area {
    font-size: 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 .footer-buttons {
    position: fixed;
    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: 15vw;
    padding: 0 2vw 2.9vw 2vw;
    width: 100vw;
    min-height: auto; }
  #modal-layer-dynamic.slcket-style .icon-with-word {
    width: 15vw;
    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: 5.5vw; }
    #modal-layer-dynamic.slcket-style .icon-with-word div {
      color: #fff;
      font-size: 2.25vw;
      line-height: 2.6vw;
      margin: 0.5vw auto 0 auto;
      text-align: center; }
  #modal-layer-dynamic.slcket-style .top-info-banner {
    font-size: 125%;
    left: 0vw;
    line-height: 125%;
    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 .fixed-bottom-right {
    position: fixed;
    right: 2vw; }
    .skinny-iphone #modal-layer-dynamic.slcket-style .fixed-bottom-right {
      bottom: 3.5vw; }
  #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;
      max-width: 100vw;
      padding-top: 0;
      width: 100vw; }
      .fat-iphone .overlay-login-layer.full-screen {
        padding-top: 0; }
      .skinny-iphone .overlay-login-layer.full-screen {
        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), black, black);
      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; } }

@media screen and (max-width: 767px) and (orientation: landscape) {
  body {
    font-size: 1.5vw;
    line-height: 2vw; }
  .top-banner, .top-info-banner {
    min-height: 13vh;
    font-size: 2.25vw; }
  .footer-buttons {
    min-height: 13vh; }
  .icon-with-word {
    width: 13vw; }
    .icon-with-word img {
      height: 3.5vw; }
    .icon-with-word div {
      color: white;
      font-size: 1.25vw;
      line-height: 1.75vw;
      margin: 0.5vw auto 0 auto;
      text-align: center; }
  #content .checkmark,
  #content #all-checkmark {
    width: 2.5vw;
    height: 2.5vw; }
  .overlay-login-layer {
    padding-bottom: 0;
    background: rgba(0, 0, 0, 0.4); }
    .fat-iphone .overlay-login-layer {
      height: 75vh; } }

.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; }

.red-strikethrough {
  position: relative; }

.red-strikethrough::after {
  content: "";
  position: absolute;
  top: 5vw;
  left: 1vw;
  width: 100%;
  height: 1.25px;
  background-color: red;
  transform: rotate(-45deg);
  transform-origin: left top; }