* {
    font-family: Helvetica, Arial, sans-serif;
}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}


#game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: url(images/lab.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    overflow: hidden;
}

html, body, #game-container {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.evidence-image {
    max-width: 10rem;
}

.body,
.wrapper {
  /* Break the flow */
  position: absolute;
  top: 0px;

  /* Give them all the available space */
  width: 100%;
  height: 100%;

  /* Remove the margins if any */
  margin: 0;

  /* Allow them to scroll down the document */
  overflow: hidden;
}

.body {
  /* Sending body at the bottom of the stack */
  z-index: 1;
}

.wrapper {
  /* Making the wrapper stack above the body */
  z-index: 2;
}

.suspect {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20vw;
    min-width: 7rem;
    max-width: 15rem;
    max-height: 12rem;
    height: 20vw;
    min-height: 10rem;
    margin: 0 0.5rem;
    overflow: hidden;
}
.mugshot-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    min-height: 0;
    border: 1px black solid;
    border-top: none;
}
.suspect-image {
    max-width: 100%;
    max-height: 100%;
    transform: translateX(0px);
    transition: opacity 0.25s linear, transform 0.5s linear;
    opacity: 1;
}
.suspect-image-released {
    transform: translateX(-100%);
    opacity: 0;
}
.cell-bars {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(0px);
    transition: transform 0.25s linear;
    background: repeating-linear-gradient( 
        90deg,
        transparent,
        transparent 4px,
        #000 4px,
        #000 5px);
}
.discovered-footprint {
    width: 100%;
    max-width: 150px;
}
.cell-bars-released {
    transform: translateY(-100%);
}
.suspect-buttons {
    flex: none;
    height: 1.5rem;
    margin: 0.2rem 0;
}
.suspect-buttons button {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    flex: none;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 600;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin: 0 0.1rem;
}
.suspect-buttons button:after {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: white;
    border-radius: inherit;
    content: '';
    display: block;
    position: absolute;
    opacity: 0;
    transition: opacity 0.1s linear;
}
.suspect-buttons button:disabled {
    pointer-events: none;
}
.suspect-buttons button:disabled:after {
    background-color: gray;
    opacity: 0.4;
}
.suspect-buttons button:not(:disabled):hover:after {
    opacity: 0.4;
}
.suspect-buttons button:not(:disabled):active:after {
    opacity: 0.6;
}
.suspect-release-button {
    background-color: rgb(255, 0, 0);
}
.suspect-info-button {
    background-color: rgb(0, 0, 255);
}
.suspect-buttons button:active, .suspect-buttons button:focus {
    outline: none;
}

.suspect-list {
    display: flex;
    background: lightgray;
    border: gray 4px solid;
    border-top: none;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    padding: 0 2rem;
    overflow: auto;
    max-width: 100%;
    flex: none;
}

.ReactModal__Overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ReactModal__Content {
    position: static !important;
    width: 60rem;
    max-width: 90vw;
    height: auto;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
}

.ReactModal__Overlay {
    z-index: 9995;
    background: rgba(32, 32, 32, 0.8) !important;
}

.ReactModal__Content {
    background: white;
    z-index: 9999;
    max-height: 90vh;
    overflow: auto;
    padding: 0;
}

.evidence-list {
    background-color: white;
    border: 4px black solid;
    border-radius: 2rem;
    padding: 1rem;
    flex-shrink: 1;
    margin-top: 1rem;
    overflow: auto;
}
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: black;
}
table, tr, td, th {
    border-width: 1px;
    border-style: solid;
}

.game-top-align {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    flex: none;
}

.evidence-list p:last-child, .evidence-list u:last-child {
    margin-bottom: 0;
}
.suspect-footprint-image {
    position: absolute;
    max-width: 50%;
    max-height: 50%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.6);
    border: 2px rgba(32, 32, 32, 0.8) solid;
}
.floated-suspect-image {
    float: right;
    width: 20vw;
    max-width: 10rem;
    max-height: 12rem;
}
ul {
    display: inline-block;
    text-align: left;
}
.fake-button {
    display: inline-block;
    background-color: black;
    color: white;
    padding: 0 0.2rem;
    border-radius: 0.5em;
}