@media not all and (max-width: 480px) {
  .styles_errorIcon_3Ypuw {
    font-size: 120px !important;
  }
}
@media (max-width: 480px) {
  .styles_errorIcon_3Ypuw {
    font-size: 100px !important;
  }
}

.styles_request_3gen8 {
  margin-top: 5rem !important;
  margin-bottom: 2rem !important;
}

.styles_errorStack_XFDNH {
  display: inline-block;
  text-align: left;
  font-size: 14px;
  border: none;
  max-height: 400px;
  overflow: scroll;
}

.styles_appContainer_2g8YX {
  vertical-align: top;
  display: inline-block;
}
@media not all and (max-width: 840px) {
  .styles_appContainer_2g8YX:not(.styles_loggedOut_Rm_1S) {
    width: calc(100vw - var(--nav-non-mobile-width));
    margin-left: var(--nav-non-mobile-width);
  }
  .styles_appContainer_2g8YX.styles_loggedOut_Rm_1S {
    width: 100%;
  }
}
@media (max-width: 840px) {
  .styles_appContainer_2g8YX {
    width: 100vw;
  }
  .styles_appContainer_2g8YX:not(.styles_loggedOut_Rm_1S) {
    padding-bottom: var(--nav-mobile-height);
  }
}
@media not all and (max-width: 480px) {
  .styles_appContainer_2g8YX {
    height: 100%;
    min-height: 100vh;
  }
}
*:not(.styles_appContainer_2g8YX) {
  box-sizing: border-box;
}

.styles_loader_acjzU {
  margin-top: calc(50% - 120px);
}

.styles_cah_1G-gE,
.styles_codenames_83KZ0 {
  background-color: var(--light-gray);
}

:root {
  --nav-mobile-height: 3.5rem;
  --nav-non-mobile-width: 8rem;
}

.styles_nav_HqWAR {
  background-color: var(--green);
  position: fixed;
  z-index: 2;
  transition: width var(--fast);
}
@media not all and (max-width: 840px) {
  .styles_nav_HqWAR {
    display: inline-block;
    width: 8rem;
    width: var(--nav-non-mobile-width);
    height: 100vh;
  }
}
@media (max-width: 840px) {
  .styles_nav_HqWAR {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    height: 3.5rem;
    height: var(--nav-mobile-height);
    bottom: 0;
  }
}

.styles_nav_HqWAR a {
  color: white;
  transition: var(--fast);
  border-radius: 0;
}
.styles_nav_HqWAR a:hover {
  background-color: silver;
  transition: var(--fast);
}
.styles_nav_HqWAR a.styles_active_1MFpu {
  color: gray;
  background-color: white;
}
@media not all and (max-width: 840px) {
  .styles_nav_HqWAR a {
    display: block;
    padding: 1rem;
    line-height: 1.75rem;
  }
  .styles_label_1vVTt {
    padding-left: .25rem;
  }
  .styles_logOut_3ovGs {
    position: absolute !important;
    bottom: 0;
    right: 0;
  }
}
@media (max-width: 840px) {
  .styles_nav_HqWAR a {
    height: 100%;
    padding: .5rem 0rem 1.25rem;
    /* Make all links equal width, and equally grow to fill space */
    flex-grow: 1;
    flex-basis: 0;
    /* Center content inside */
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .styles_nav_HqWAR a div {
    text-align: center;
  }
  .styles_label_1vVTt {
    position: absolute;
    bottom: .25rem;
    font-size: .875rem;
    margin-bottom: -.125rem;
  }
  .styles_mobileIcon_2ooQC {
    font-size: 1.5em;
  }
}

.styles_cah_-WXWE {
  background-color: black;
}

.styles_codenames_36TBQ.styles_red_15igB {
  background-color: var(--red);
}
.styles_codenames_36TBQ.styles_blue_2mpjI {
  background-color: var(--blue);
}

.styles_message_3o8s8 {
  height: 70vh;
}

.material-icons.md-small {
  font-size: .75rem;
}



.w3 {
  width: 1rem;
}

.w4 {
  width: 2rem;
}

.w5 {
  width: 4rem;
}

.w7-5 {
  width: 24rem;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.h3 {
  height: 1rem;
}

.h4 {
  height: 2rem;
}

.m0 {
  margin: 0rem !important;
}
.m1 {
  margin: .25rem !important;
}
.m2 {
  margin: .5rem !important;
}
.m3 {
  margin: 1rem !important;
}
.m4 {
  margin: 2rem !important;
}

.mt-2 {
  margin-top: -.5rem !important;
}
.mt-1 {
  margin-top: -.25rem !important;
}
.mt0 {
  margin-top: 0rem !important;
}
.mt1 {
  margin-top: .25rem !important;
}
.mt2 {
  margin-top: .5rem !important;
}
.mt3 {
  margin-top: 1rem !important;
}
.mt4 {
  margin-top: 2rem !important;
}

.mb-2 {
  margin-bottom: -.5rem !important;
}
.mb-1 {
  margin-bottom: -.25rem !important;
}
.mb0 {
  margin-bottom: 0rem !important;
}
.mb1 {
  margin-bottom: .25rem !important;
}
.mb2 {
  margin-bottom: .5rem !important;
}
.mb3 {
  margin-bottom: 1rem !important;
}
.mb4 {
  margin-bottom: 2rem !important;
}

.ml-2 {
  margin-left: -.5rem !important;
}
.ml-1 {
  margin-left: -.25rem !important;
}
.ml0 {
  margin-left: 0px !important;
}
.ml1 {
  margin-left: .25rem !important;
}
.ml2 {
  margin-left: .5rem !important;
}
.ml3 {
  margin-left: 1rem !important;
}
.ml4 {
  margin-left: 2rem !important;
}

.mr-2 {
  margin-right: -.5rem !important;
}
.mr-1 {
  margin-right: -.25rem !important;
}
.mr0 {
  margin-right: 0px !important;
}
.mr1 {
  margin-right: .25rem !important;
}
.mr2 {
  margin-right: .5rem !important;
}
.mr3 {
  margin-right: 1rem !important;
}
.mr4 {
  margin-right: 2rem !important;
}

.mh0 {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
}
.mh1 {
  margin-left: .25rem !important;
  margin-right: .25rem !important;
}
.mh2 {
  margin-left: .5rem !important;
  margin-right: .5rem !important;
}
.mh3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}
.mh4 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.mv0 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}
.mv1 {
  margin-top: .25rem !important;
  margin-bottom: .25rem !important;
}
.mv2 {
  margin-top: .5rem !important;
  margin-bottom: .5rem !important;
}
.mv3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.mv4 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.p0 {
  padding: 0rem !important;
}
.p1 {
  padding: .25rem !important;
}
.p2 {
  padding: .5rem !important;
}
.p3 {
  padding: 1rem !important;
}
.p4 {
  padding: 2rem !important;
}

.pt0 {
  padding-top: 0rem !important;
}
.pt1 {
  padding-top: .25rem !important;
}
.pt2 {
  padding-top: .5rem !important;
}
.pt3 {
  padding-top: 1rem !important;
}
.pt4 {
  padding-top: 2rem !important;
}

.pb0 {
  padding-bottom: 0rem !important;
}
.pb1 {
  padding-bottom: .25rem !important;
}
.pb2 {
  padding-bottom: .5rem !important;
}
.pb3 {
  padding-bottom: 1rem !important;
}
.pb4 {
  padding-bottom: 2rem !important;
}

.pl0 {
  padding-left: 0px !important;
}
.pl1 {
  padding-left: .25rem !important;
}
.pl2 {
  padding-left: .5rem !important;
}
.pl3 {
  padding-left: 1rem !important;
}
.pl4 {
  padding-left: 2rem !important;
}

.pr0 {
  padding-right: 0px !important;
}
.pr1 {
  padding-right: .25rem !important;
}
.pr2 {
  padding-right: .5rem !important;
}
.pr3 {
  padding-right: 1rem !important;
}
.pr4 {
  padding-right: 2rem !important;
}

.ph0 {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}
.ph1 {
  padding-left: .25rem !important;
  padding-right: .25rem !important;
}
.ph2 {
  padding-left: .5rem !important;
  padding-right: .5rem !important;
}
.ph3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.ph4 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.pv0 {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
.pv1 {
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
}
.pv2 {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
.pv3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.pv4 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}



:root {
  --green: #15d8b1;
  --blue: #00b0ff;
  --dark-blue: #0081cb;
  --lightest-gray: #fafafa;
  --light-gray: #f2f2f2;
  --med-gray: rgba(0, 0, 0, 0.42);
  --red: #ff1744;
  --purple: #5c6bc0;
  --orange: #ff9100;
}

.green {
  color: #15d8b1 !important;
  color: var(--green) !important;
}

.blue {
  color: #00b0ff !important;
  color: var(--blue) !important;
}
.bg-blue {
  background-color: #00b0ff !important;
  background-color: var(--blue) !important;
}

.white {
  color: white !important;
}

.black {
  color: black !important;
}

.bg-lightest-gray {
  background-color: #fafafa;
  background-color: var(--lightest-gray);
}

.med-gray {
  color: rgba(0, 0, 0, 0.42);
  color: var(--med-gray);
}

.red {
  color: #ff1744 !important;
  color: var(--red) !important;
}

.bg-red {
  background-color: #ff1744 !important;
  background-color: var(--red) !important;
}

:root {
  --fast: .25s;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

a {
  text-decoration: none;
}

@media not all and (max-width: 480px) {
  .hide-on-desktop {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hide-on-mobile {
    display: none !important;
  }
}


/* Position */
.relative {
  position: relative;
}

.absolute {
  position: absolute !important;
}
.bottom-0 {
  bottom: 0;
}


/* Display */
.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}
div.flex-centered {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.flex-centered--no-wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-vertical-centered {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}


/* Floats */
.right {
  float: right !important;
}

.left {
  float: left !important;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/* Other */
.center {
  text-align: center !important;
}

li.hide-bullets {
  list-style: none;
}

.pointer {
  cursor: pointer;
}

.lightweight {
  font-weight: 300;
}

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

.scroll-y {
  overflow-y: scroll;
}

.no-radius {
  border-radius: 0px !important;
}