@font-face {
  font-family: Roboto;
  src: url(/font/Roboto-Regular.ttf); }

@font-face {
  font-family: Roboto;
  src: url(/font/Roboto-Black.ttf);
  font-weight: bold; }

body {
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  font-family: Roboto;
  margin: 0;
  height: 100vh;
  overscroll-behavior: none;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f3f3 0%, #d6d6d6 35%);
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5); }

#overlay {
  position: fixed;
  display: flex;
  width: 100vw;
  height: 100vh;
  background: #1f1f1f4d;
  z-index: 1000; }
  #overlay #info-dialog {
    display: flex;
    flex-direction: column;
    width: 20em;
    padding: 2em;
    margin: auto;
    border-radius: 4px;
    background: #092d50;
    color: white;
    box-shadow: 0 0 10px 1px #000000a6;
    border-top: 2px solid #4caf50; }
    #overlay #info-dialog .message {
      margin-bottom: 2em;
      padding: 1em;
      background: #0c3863; }
    #overlay #info-dialog .actions .close-button {
      width: 4em;
      background: white;
      color: #092d50;
      text-align: center;
      border-radius: 4px;
      padding: 0.5em;
      cursor: pointer; }
      #overlay #info-dialog .actions .close-button:hover {
        background: #092d50;
        color: white;
        border: 1px solid white; }

#app-container {
  display: flex;
  flex-grow: 1;
  background: linear-gradient(180deg, #f3f3f3 0%, #d6d6d6 35%);
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5); }

.hidden {
  display: none !important; }

html {
  overflow: hidden;
  font-size: 12px !important; }

.flex {
  display: flex; }

.required {
  border: 2px solid red !important; }

#loading-container {
  position: fixed;
  width: 100vw;
  height: 100vh; }
  #loading-container img {
    width: 10em;
    height: 10em;
    margin-left: calc(50vw - 5em);
    margin-top: calc(50vh - 5em); }

.card {
  display: flex;
  background: white;
  border-radius: 4px;
  box-shadow: 0 0 10px 1px #000000a6;
  padding: 2em;
  margin-left: auto;
  margin-right: auto;
  max-height: 40em;
  margin-top: 4em; }
  .card .title {
    text-align: center;
    width: 100%;
    margin-bottom: 2em;
    text-decoration: underline;
    font-weight: bold;
    color: #575757;
    font-size: 16px; }

.data-table {
  margin-top: 2em;
  height: 33.5em;
  box-shadow: 0 0 10px 1px #000000a6;
  width: 80em; }
  .data-table .th-wrapper .name {
    height: 2.5em;
    align-content: center; }
  .data-table .th-wrapper .th-buttons {
    display: flex;
    justify-content: center;
    margin-top: 0.25em; }
    .data-table .th-wrapper .th-buttons .button {
      margin: 0 0.5em;
      width: 1em;
      height: 1em;
      border-radius: 4px;
      cursor: pointer; }
      .data-table .th-wrapper .th-buttons .button.all {
        background: #7a7574; }
        .data-table .th-wrapper .th-buttons .button.all span {
          font-size: 0.7em;
          color: white; }
      .data-table .th-wrapper .th-buttons .button.none {
        background: #ffffff;
        border: 1px solid #919191;
        width: calc(1em - 1px);
        height: calc(1em - 1px); }
      .data-table .th-wrapper .th-buttons .button:hover {
        box-shadow: 0 0 4px 1px #000000a6; }
  .data-table .value.email {
    overflow-x: hidden; }
  .data-table .value.name {
    overflow-x: hidden; }
  .data-table .s-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-family: sans-serif;
    table-layout: fixed; }
    .data-table .s-table.data {
      width: calc(100% + 4px); }
  .data-table th,
  .data-table td {
    border: 1px solid #999;
    padding: 8px; }
  .data-table thead {
    background: #f2f2f2; }
  .data-table th[rowspan] {
    vertical-align: middle; }
  .data-table td:first-child {
    text-align: left;
    font-weight: 500; }
  .data-table tr.new {
    background-color: #dbffb1; }
  .data-table tr.removed {
    background-color: #ffdbdb; }
  .data-table .scroll-wrapper {
    max-height: 28em;
    overflow-y: scroll;
    overflow-x: hidden; }
  .data-table .header,
  .data-table .data {
    table-layout: fixed; }
  .data-table .paginator {
    display: flex;
    background: #f2f2f2;
    border: 1px solid #999; }
    .data-table .paginator .wrapper {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      justify-content: end;
      padding: 1em; }
      .data-table .paginator .wrapper .of {
        align-content: center;
        cursor: default; }
      .data-table .paginator .wrapper .elm {
        margin: 0 1em;
        align-content: center; }
        .data-table .paginator .wrapper .elm.current {
          text-decoration: underline;
          cursor: default; }
        .data-table .paginator .wrapper .elm.button {
          padding: 0 0.5em;
          background: #1a314d;
          color: #f1bf10;
          cursor: pointer;
          border-radius: 4px;
          padding: 0.5em 1em; }
          .data-table .paginator .wrapper .elm.button.disabled {
            background: #9E9E9E;
            color: #1a314d;
            cursor: not-allowed; }
          .data-table .paginator .wrapper .elm.button:not(.disabled):hover {
            background: #f1bf10;
            color: #1a314d; }

.search-first {
  text-align: center;
  margin-top: 7em;
  font-size: 2em;
  opacity: 0.4; }

/* width */
::-webkit-scrollbar {
  width: 4px; }

/* Track */
::-webkit-scrollbar-track {
  background: #cec5ac; }

/* Handle */
::-webkit-scrollbar-thumb {
  background: #607d8b; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; }