/* Breakpoint helper classes */
@media (min-width: 880px) {
  .mobile-only {
    display: none !important; } }

@media (max-width: 880px) {
  .desktop-only {
    display: none !important; } }

.button {
  font-family: "Trade";
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  display: inline-block;
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 10px;
  padding: 6px 20px;
  cursor: pointer;
  background-color: #EC1C24; }
  .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    z-index: -1;
    width: 50%;
    opacity: 0.0;
    transition: width 0.25s, opacity 0.25s;
    margin: auto; }
  .button:hover::before, .button:focus::before {
    width: 100%;
    opacity: 1.0; }
  .button.loading {
    cursor: default;
    background: #9f9f9f !important;
    color: transparent !important; }
    .button.loading:focus {
      outline: none; }
    .button.loading::-moz-focus-inner {
      border: 0; }
    .button.loading::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      width: 1.5em;
      height: 1.5em;
      background-image: url(../../images/global/spinner.svg);
      background-size: contain;
      background-repeat: no-repeat;
      animation: spin 0.9s infinite steps(8); }
    .button.loading:hover::before, .button.loading:focus::before {
      width: 0%; }
  .button .fa-external-link {
    font-size: 0.7em;
    position: relative;
    top: -0.1em; }
  .button.grey {
    background-color: #424142; }
  .button.blue {
    background-color: #00AEEF; }
  .button.black {
    background-color: black; }
  .button.white {
    background-color: white;
    color: black; }
  .button.naked {
    background: transparent;
    box-shadow: 0 0 0 3px white inset; }
    .button.naked.onwhite {
      box-shadow: 0 0 0 3px #424142 inset;
      color: #424142; }
      .button.naked.onwhite::before {
        background: rgba(0, 0, 0, 0.05); }
  .button.plain {
    background: none;
    color: #EC1C24; }
    .button.plain::before {
      background: rgba(0, 0, 0, 0.01); }

body {
  font-family: "Freight";
  font-size: 20px;
  line-height: 1.6em;
  color: black; }
  @media (max-width: 480px) {
    body {
      font-size: 14px; } }

h1, h2, h3 {
  font-weight: normal; }

h1 {
  font-family: "SandalsType";
  font-size: 60px;
  line-height: 0.9em;
  margin: 50px 0;
  text-transform: uppercase;
  text-align: center; }
  @media (max-width: 480px) {
    h1 {
      font-size: 30px; } }

h2 {
  font-family: "Trade Bold";
  font-size: 40px;
  line-height: 0.9em;
  margin: 20px 0;
  text-transform: uppercase;
  text-align: center; }
  @media (max-width: 480px) {
    h2 {
      font-size: 40px; } }

h3 {
  font-family: "Trade Bold";
  font-size: 22px;
  line-height: 1.2em;
  margin: 0;
  text-transform: uppercase;
  text-align: center; }

input {
  box-sizing: border-box; }

#header {
  background-color: #000;
  color: #fff;
  padding: 20px 20px;
  display: flex;
  align-items: center; }
  #header h1 {
    margin: 0px;
    flex: 1; }
  #header a {
    text-decoration: none;
    color: #fff; }
    @media (max-width: 480px) {
      #header a {
        font-size: 29px; } }
  #header .add-new {
    font-size: 30px;
    margin-left: 20px; }
  #header .notification {
    font-size: 30px; }
    #header .notification .link.active {
      color: #EC1C24; }
  #header .home {
    font-size: 30px; }

body {
  margin: 0px;
  height: 100vh; }
  body #app {
    height: 100%;
    display: block;
    position: relative;
    margin: 40px 10px; }

#update-message textarea {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: block;
  padding: 10px;
  height: 250px; }

#update-message input[type="submit"] {
  font-family: "Trade";
  text-transform: uppercase;
  font-size: 22px;
  border-radius: 10px;
  background-color: #EC1C24;
  border: 0px;
  color: #fff;
  padding: 5px 20px;
  display: block;
  margin: 20px auto;
  cursor: pointer; }

#screen-notification {
  display: none;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100); }
  #screen-notification #notification-message {
    background-color: #dbdbdb;
    border-radius: 9px;
    max-width: 800px;
    margin: 20px auto;
    display: block;
    padding: 20px; }
    #screen-notification #notification-message h2 {
      font-size: 24px;
      text-align: left;
      margin: 10px 0px; }
    #screen-notification #notification-message #msg {
      word-break: break-all;
      white-space: pre-line;
      font-size: 22px; }
      @media (max-width: 480px) {
        #screen-notification #notification-message #msg {
          font-size: 18px; } }

#screen-unlock {
  display: block;
  opacity: 1; }
  #screen-unlock #unlock {
    max-width: 500px;
    margin: 0 auto; }
    #screen-unlock #unlock .unlock-form {
      display: flex;
      margin: 30px auto;
      height: 50px;
      max-width: 400px; }
      @media (max-width: 880px) {
        #screen-unlock #unlock .unlock-form {
          max-width: 100%; } }
      #screen-unlock #unlock .unlock-form #unlock_code {
        width: calc(70% - 20px);
        margin-right: 20px;
        display: block;
        border: solid 2px #000;
        border-radius: 8px;
        font-family: "Trade";
        padding: 6px 20px;
        font-size: 30px;
        -webkit-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
        -moz-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
        -o-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
        @media (max-width: 880px) {
          #screen-unlock #unlock .unlock-form #unlock_code {
            width: calc(100% - 20px); } }
      #screen-unlock #unlock .unlock-form #unlock-btn {
        width: 30%;
        padding: 6px 20px;
        height: 50px; }
    #screen-unlock #unlock .buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background-color: #fff;
      border-radius: 10px;
      transform: matrix(1, 0, 0, 1, 0, 0); }
      #screen-unlock #unlock .buttons button {
        width: 100px;
        margin: 5px;
        font-size: 30px;
        font-family: "Trade";
        height: 85px;
        width: calc(30% - 25px);
        border-radius: 10px;
        border: 0px;
        background-color: #5b5b5b;
        color: #fff;
        -webkit-transition: all .25s;
        transition: all .25s; }
        @media (max-width: 880px) {
          #screen-unlock #unlock .buttons button {
            width: calc(33.33% - 10px); } }
        #screen-unlock #unlock .buttons button:hover {
          background-color: #000; }
        #screen-unlock #unlock .buttons button.back, #screen-unlock #unlock .buttons button.clear {
          background-color: #000; }
    #screen-unlock #unlock .lookup-list {
      margin: 20px; }
      #screen-unlock #unlock .lookup-list .individual {
        cursor: pointer;
        opacity: 0;
        transform: matrix(1, 0, 0, 1, 0, 100);
        padding: 20px;
        display: block;
        text-decoration: none;
        color: #000;
        font-family: "Trade";
        text-transform: uppercase; }
        #screen-unlock #unlock .lookup-list .individual:nth-child(even) {
          background-color: #eee; }
        #screen-unlock #unlock .lookup-list .individual:nth-child(odd) {
          background-color: #d2d2d2; }

#screen-home #home {
  width: 100%;
  max-width: 500px;
  margin: 0 auto; }
  #screen-home #home .btn-wrapper {
    margin: 0px 20px; }
    #screen-home #home .btn-wrapper button {
      background-color: #EC1C24;
      padding: 30px 20px;
      font-size: 24px;
      border: 0px;
      width: 100%;
      margin: 20px 0px;
      font-family: "Trade";
      text-transform: uppercase;
      text-decoration: none;
      color: white;
      text-align: left;
      display: inline-block;
      position: relative;
      border: none;
      border-radius: 10px;
      cursor: pointer; }
      @media (max-width: 480px) {
        #screen-home #home .btn-wrapper button {
          padding: 20px 10px;
          margin: 10px 0px;
          font-size: 18px; } }
      #screen-home #home .btn-wrapper button .svg-inline--fa {
        margin-right: 10px; }
    #screen-home #home .btn-wrapper a {
      background-color: #EC1C24;
      padding: 30px 20px;
      margin: 20px 0px;
      font-family: "Trade";
      font-size: 24px;
      text-transform: uppercase;
      text-decoration: none;
      color: white;
      text-align: left;
      display: inline-block;
      position: relative;
      border-radius: 10px;
      width: calc(100% - 40px); }
      @media (max-width: 480px) {
        #screen-home #home .btn-wrapper a {
          padding: 20px 10px;
          margin: 10px 0px;
          font-size: 18px;
          width: calc(100% - 20px); } }
      #screen-home #home .btn-wrapper a .svg-inline--fa {
        margin-right: 10px; }
  #screen-home #home .row {
    display: flex;
    flex-wrap: wrap; }
    #screen-home #home .row .btn-wrapper {
      margin: 0px 20px;
      width: calc(50% - 40px); }
      @media (max-width: 480px) {
        #screen-home #home .row .btn-wrapper {
          width: 100%; } }

#screen-individual {
  display: none;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100); }
  #screen-individual .success {
    text-align: center;
    padding: 25px;
    border: solid 2px #07c200;
    background-color: #cff6d8;
    font-family: "Trade";
    margin: 20px 0px;
    display: none; }
  #screen-individual #update {
    margin: 0px auto;
    max-width: 600px; }
    #screen-individual #update #person_update_form .form-row {
      display: flex;
      margin: 15px 0px; }
      #screen-individual #update #person_update_form .form-row input, #screen-individual #update #person_update_form .form-row select {
        font-size: 22px;
        font-family: "Trade";
        width: 50%;
        padding: 10px 15px;
        margin: 0px 10px;
        border: solid 2px #000; }
        @media (max-width: 480px) {
          #screen-individual #update #person_update_form .form-row input, #screen-individual #update #person_update_form .form-row select {
            font-size: 18px; } }
    #screen-individual #update #person_update_form .checkbox-field {
      margin: 15px 20px; }
    #screen-individual #update #person_update_form #campus {
      height: auto;
      font-size: 22px;
      font-family: "Trade";
      padding: 10px 15px;
      margin-top: 15px;
      width: calc(100% - 20px); }
      @media (max-width: 480px) {
        #screen-individual #update #person_update_form #campus {
          font-size: 18px; } }
    #screen-individual #update #submit_updates {
      margin-left: 20px; }
    #screen-individual #update select {
      font-size: 22px;
      font-family: "Trade";
      box-sizing: border-box;
      width: 50%;
      padding: 10px 15px;
      margin: 0px 10px;
      border: solid 2px #000; }

#screen-add {
  display: none;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100); }
  #screen-add .success {
    text-align: center;
    padding: 25px;
    border: solid 2px #07c200;
    background-color: #cff6d8;
    font-family: "Trade";
    margin: 20px 0px;
    display: none; }
  #screen-add #add {
    margin: 0px auto;
    max-width: 600px; }
    #screen-add #add #person_update_form .form-row {
      display: flex;
      margin: 15px 0px; }
      #screen-add #add #person_update_form .form-row .required {
        display: block; }
      #screen-add #add #person_update_form .form-row input, #screen-add #add #person_update_form .form-row select {
        width: 50%;
        font-size: 22px;
        font-family: "Trade";
        padding: 10px 15px;
        margin: 0px 10px;
        border: solid 2px #000; }
        @media (max-width: 480px) {
          #screen-add #add #person_update_form .form-row input, #screen-add #add #person_update_form .form-row select {
            font-size: 18px; } }
    #screen-add #add #person_update_form .checkbox-field {
      margin: 15px 20px; }
    #screen-add #add #person_update_form #campus {
      height: 50px;
      font-size: 22px;
      font-family: "Trade";
      padding: 10px 15px;
      margin-top: 15px;
      width: calc(100% - 20px); }
      @media (max-width: 480px) {
        #screen-add #add #person_update_form #campus {
          font-size: 18px; } }
    #screen-add #add #submit_updates {
      margin: 20px 0px 0px 20px; }
    #screen-add #add select {
      box-sizing: border-box;
      width: 50%;
      padding: 10px 15px;
      margin: 0px 10px;
      border: solid 2px #000; }

#screen-lookup {
  display: none;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100); }
  #screen-lookup #lookup {
    max-width: 500px;
    margin: 0 auto; }
    #screen-lookup #lookup .not-found {
      padding: 20px;
      background-color: #ffb5b5;
      border: solid 2px #ff4646;
      text-align: center;
      display: none;
      opacity: 0;
      transform: matrix(1, 0, 0, 1, 0, 100); }
    #screen-lookup #lookup .lookup-form {
      display: flex;
      margin: 30px auto;
      height: 50px;
      max-width: 400px; }
      @media (max-width: 880px) {
        #screen-lookup #lookup .lookup-form {
          max-width: 100%; } }
      #screen-lookup #lookup .lookup-form #phone_search {
        width: calc(70% - 20px);
        margin-right: 20px;
        display: block;
        border: solid 2px #000;
        border-radius: 8px;
        font-family: "Trade";
        padding: 6px 20px;
        font-size: 30px;
        -webkit-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
        -moz-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
        -o-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
        @media (max-width: 880px) {
          #screen-lookup #lookup .lookup-form #phone_search {
            width: calc(100% - 20px); } }
      #screen-lookup #lookup .lookup-form #search {
        width: 30%;
        padding: 6px 20px;
        height: 50px; }
    #screen-lookup #lookup .buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background-color: #fff;
      border-radius: 10px;
      transform: matrix(1, 0, 0, 1, 0, 0); }
      #screen-lookup #lookup .buttons button {
        width: 100px;
        margin: 5px;
        font-size: 30px;
        font-family: "Trade";
        height: 85px;
        width: calc(30% - 25px);
        border-radius: 10px;
        border: 0px;
        background-color: #00AEEF;
        color: #fff;
        -webkit-transition: all .25s;
        transition: all .25s; }
        @media (max-width: 880px) {
          #screen-lookup #lookup .buttons button {
            width: calc(33.33% - 10px); } }
        #screen-lookup #lookup .buttons button:hover {
          background-color: #008ec3; }
        #screen-lookup #lookup .buttons button.back, #screen-lookup #lookup .buttons button.clear {
          background-color: #000; }
    #screen-lookup #lookup .lookup-list {
      margin: 20px 0px; }
      #screen-lookup #lookup .lookup-list .individual {
        font-size: 24px;
        font-family: "Trade";
        cursor: pointer;
        opacity: 0;
        transform: matrix(1, 0, 0, 1, 0, 100);
        padding: 20px;
        display: block;
        text-decoration: none;
        color: #000;
        font-family: "Trade";
        text-transform: uppercase; }
        #screen-lookup #lookup .lookup-list .individual:nth-child(even) {
          background-color: #eee; }
        #screen-lookup #lookup .lookup-list .individual:nth-child(odd) {
          background-color: #d2d2d2; }

#screen-loading {
  opacity: 0;
  display: none;
  z-index: 2;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px; }
  #screen-loading .loading {
    max-width: 300px;
    position: absolute;
    top: 35%;
    left: 50%;
    margin: 0 auto;
    transform: translate(-50%, -50%); }
    #screen-loading .loading img {
      width: 100%; }