@import url(https://fonts.googleapis.com/css?family=Exo+2:400,200,300,700);
.home-page-component .card .card-content i.fonixicons {
  font-size: 2rem; }
  @media only screen and (min-width: 601px) {
    .home-page-component .card .card-content i.fonixicons {
      font-size: 2.5rem; } }



.sessions-list-component .collection {
  max-height: 368px;
  overflow-y: auto; }
  .sessions-list-component .collection.current-session-collection {
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #eeeeee; }

.sessions-list-component .img-wrapper {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  line-height: 40px;
  text-align: center; }
  .sessions-list-component .img-wrapper span {
    vertical-align: middle;
    font-size: 1.5rem;
    color: #465A64; }


.mobile-app-component {
  min-height: 100%;
  position: relative; }
  .mobile-app-component .col.absolute-center {
    left: 50%;
    padding: 1.5rem; }
  .mobile-app-component .card .card-action a {
    display: inline-block;
    margin: 0 !important; }
  .mobile-app-component img {
    text-align: center;
    vertical-align: middle;
    max-width: 100%;
    height: 60px; }
    @media only screen and (min-width: 601px) {
      .mobile-app-component img {
        height: 70px; } }
  .mobile-app-component .apple-imaage-wrapper {
    height: 60px; }
    @media only screen and (min-width: 601px) {
      .mobile-app-component .apple-imaage-wrapper {
        height: 70px; } }
    .mobile-app-component .apple-imaage-wrapper a {
      padding: 11px 0; }
      .mobile-app-component .apple-imaage-wrapper a img {
        height: 38px; }
        @media only screen and (min-width: 601px) {
          .mobile-app-component .apple-imaage-wrapper a img {
            height: 48px; } }


.app-loading-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

#SigninEmail text-input > div {
  margin-bottom: .75rem; }

#SigninEmail toggle-switch .switch label {
  font-size: 0.8rem; }
  #SigninEmail toggle-switch .switch label .lever {
    margin-top: 2px;
    margin-bottom: 2px; }

#SigninPassword h6 .email {
  line-height: 1.7rem; }

#SigninPassword text-input > div {
  margin-bottom: .75rem; }

#SigninPassword button.switch-account {
  font-size: .8rem; }

#SigninPassword a.password-reset-link,
#SigninPassword a.another-account-link {
  cursor: pointer;
  font-size: .8rem;
  color: #4976bc; }

#SigninPassword #captchaInputField aup-google-recaptcha {
  width: 100%;
  display: block; }
  #SigninPassword #captchaInputField aup-google-recaptcha > div {
    margin: 0 auto; }

#SigninValidateEmail .loader {
  margin: 0 auto; }
  #SigninValidateEmail .loader i {
    font-size: 18px; }

#SigninValidateMobileApp .loader {
  margin: 0 auto; }
  #SigninValidateMobileApp .loader i {
    font-size: 18px; }

#SigninValidateMobileApp a.another-method-link {
  cursor: pointer;
  font-size: .8rem;
  color: #4976bc; }

#signin .fonixicons.fi-user {
  font-size: 1rem; }

#messageWrapper {
  font-size: 0.8rem; }
  #messageWrapper .message {
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem; }
    #messageWrapper .message.warning {
      background-color: rgba(229, 57, 53, 0.8);
      color: #FFFFFF; }

#ResetEmail .loader {
  margin: 0 auto; }
  #ResetEmail .loader i {
    font-size: 18px; }

#ResetPassword .password-strength {
  margin-left: -.25rem;
  margin-right: -.25rem;
  line-height: 1;
  position: relative; }
  #ResetPassword .password-strength .part {
    padding: 0.5rem 0.25rem 0 0.25rem; }
    #ResetPassword .password-strength .part::before {
      display: block;
      content: '';
      border-radius: 3px;
      height: 2px;
      background: rgba(158, 158, 158, 0.2); }
  #ResetPassword .password-strength.strength-terrible .status {
    color: #e53935; }
  #ResetPassword .password-strength.strength-terrible .part-1::before {
    background: #e53935; }
  #ResetPassword .password-strength.strength-bad .status {
    color: #fb8c00; }
  #ResetPassword .password-strength.strength-bad .part-1::before,
  #ResetPassword .password-strength.strength-bad .part-2::before {
    background: #fb8c00; }
  #ResetPassword .password-strength.strength-good .status {
    color: #fbc02d; }
  #ResetPassword .password-strength.strength-good .part-1::before,
  #ResetPassword .password-strength.strength-good .part-2::before,
  #ResetPassword .password-strength.strength-good .part-3::before {
    background: #fbc02d; }
  #ResetPassword .password-strength.strength-great .status {
    color: #8bc34a; }
  #ResetPassword .password-strength.strength-great .part-1::before,
  #ResetPassword .password-strength.strength-great .part-2::before,
  #ResetPassword .password-strength.strength-great .part-3::before,
  #ResetPassword .password-strength.strength-great .part-4::before {
    background: #8bc34a; }

#ResetSuccess .loader {
  margin: 0 auto; }

#reset .fonixicons.fi-user {
  font-size: 1rem; }

#messageWrapper {
  font-size: 0.8rem; }
  #messageWrapper .message {
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem; }
    #messageWrapper .message.warning {
      background-color: rgba(229, 57, 53, 0.8);
      color: #FFFFFF; }

#verify {
  min-width: 320px; }
  #verify .fonix-logo img {
    max-width: 240px; }
    @media only screen and (min-width: 601px) {
      #verify .fonix-logo img {
        max-width: 300px; } }

.app-loading-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.app-component {
  width: 100%;
  height: 100%;
  min-width: 320px; }
  .app-component .app-wrapper {
    width: 100%;
    height: 100%; }
  .app-component .app-body {
    position: relative;
    background: #fafafa;
    height: calc(100% - 55px);
    width: 100%; }
    .app-component .app-body side-bar.col {
      background-color: #FFFFFF;
      position: absolute;
      top: 0;
      left: 0; }
      @media only screen and (max-width: 600px) {
        .app-component .app-body side-bar.col {
          z-index: 1;
          height: auto;
          overflow-x: auto;
          box-shadow: 0 0px 0px 0 transparent, 0 5px 5px -5px rgba(0, 0, 0, 0.12), 0 2px 2px -3px rgba(0, 0, 0, 0.2); } }
      @media only screen and (min-width: 601px) {
        .app-component .app-body side-bar.col {
          z-index: 10;
          height: 100%;
          overflow-y: auto;
          border-right: 1px solid #eeeeee; } }
    .app-component .app-body .main-route-page {
      overflow-y: auto;
      height: 100%; }
      @media only screen and (max-width: 600px) {
        .app-component .app-body .main-route-page {
          margin-top: 3rem;
          height: calc(100% - 3rem);
          padding: 0; } }
  .app-component .navbar {
    height: 55px; }