:root {
  --theme: #8458c3;
  font-family: 'Roboto Mono', monospace;
}
.row {
  display: flex;
}

.f-table tr td:first-child {
  text-align: right;
}

eye-see-app {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

eye-tracker-window {
  display: block;
  width: 100%;
  height: 100%;
}
.pdf-controls {
  display: contents;
}
pdf-viewer {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;
}
pdf-viewer > canvas {
  max-width: 100%;
  max-height: 100%;
}

eye-see-app > *:not([shown]) {
  display: none;
}

eye-see-app:not([creator]) *[is-clinician] {
  display: none;
}

eye-see-app[request-pending] *[no-request-pending] {
  display: none;
}
eye-see-app:not([request-pending]) *[is-request-pending] {
  display: none;
}

eye-see-app:not([patient-calibrating]) *[is-patient-calibrating] {
  display: none;
}

eye-see-app:not([in-session], [in-session-owner]) *[is-in-session] {display: none;}
eye-see-app:not([hosting-session]) *[is-hosting-session] {display: none;}
eye-see-app:not([session-host]) *[is-host-session] {display: none;}
eye-see-app[session-host] *[is-entrant-session] {display: none;}
eye-see-app:not([session-host]) .pdf-controls {
  display: none;
}

eye-see-app[hosting-session] *[is-not-hosting-session] {display: none;}
eye-see-app:not([calibrated]) *[is-calibrated] {display: none;}
eye-see-app:not([user="creator"]) *[is-user-creator] {display: none;}
eye-see-app:not([user="new-user"]) *[is-new-user] {display: none;}
eye-see-app:not([user="requesting"]) *[is-requesting] {display: none;}
eye-see-app[user] *[is-no-user] {display: none;}
eye-see-app:not([user]) *[is-user] {display: none;}


eye-see-app:not([in-session-owner]) *[is-in-session-owner] {
  display: none;
}
/* eye-see-app:not([patient-session]) *[is-patient-session] {
  display: none;
}
eye-see-app:not([clinician-session]) *[is-clinician-session] {
  display: none;
} */

eye-see-app[creator] *[is-patient] {
  display: none;
}

[name = 'eye-tracking'] {display: contents;}
[name = 'eye-tracking'][hidden] {display: none;}
[name = 'loader'] {background: white;}
input.plain {
  font: inherit;
  outline: none;
  border: none;
  border-radius: 0.5em;
  border: 2px solid var(--theme);
  margin: calc(0.5em + 2px) 0;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.app-window {
  width: 100%;
  height: 100%;
  position: relative;
}
.column {
  display: flex;
  flex-direction: column;
}

.rel {position: relative; width: 100%; height: 100%;}

.row {
  display: flex;
}

.btn {
  display: inline-block;
  font-size: 1.25em;
  background: var(--theme);
  color: white;
  border-radius: 0.5em;
  padding: 0.25em 0.45em;
  margin: 0.5em;
  cursor: pointer;
}
.top-left, .top-right, .bottom-left, .bottom-right, .bottom-middle, .top-middle {
  position: absolute;
}
.top-left, .bottom-left {
  left: 0;
}
.top-right, .bottom-right{
  text-align: right;
  right: 0;
}
.top-right, .top-left, .top-middle {
  top: 0;
}
.bottom-left, .bottom-right, .bottom-middle{
  bottom: 0;
}
.bottom-middle, .top-middle {
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}

.center-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.center-card .row {
  justify-content: center;
}

.session-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.content-frame {
  position: relative;
  display: contents;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content-frame img{
  max-width: 100%;
  max-height: 100%;
}
.content-frame canvas{
  max-width: 100%;
  max-height: 100%;
}

svg.cursor {
  position: fixed;
  width: 300px;
  height: 300px;
  user-select: none;
  pointer-events: none;
}

cursor-group *[name='mouse'] {
  width: 5px;
  height: 5px;
  border: 2px solid white;
  border-radius: 10px;
  background: black;
}