/* Reset CSS */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

li,
ol,
ul {
  list-style: none; }

:focus {
  outline-style: none;
  box-shadow: none;
  border-color: transparent; }

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; }

@font-face {
  font-family: 'Neue Haas Unica Pro';
  src: url("../fonts/neuehaas/NeueHaasUnicaPro-Bold.woff2") format("woff2"), url("../fonts/neuehaas/NeueHaasUnicaPro-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Neue Haas Unica Pro';
  src: url("../fonts/neuehaas/NeueHaasUnicaPro-Regular.woff2") format("woff2"), url("../fonts/neuehaas/NeueHaasUnicaPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Neue Haas Unica Pro';
  src: url("../fonts/neuehaas/NeueHaasUnicaPro-Medium.woff2") format("woff2"), url("../fonts/neuehaas/NeueHaasUnicaPro-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

body {
  color: #27272a;
  font-family: "Neue Haas Unica Pro", sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  font-weight: 400; }

div.indicator {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border-radius: 0.75em;
  vertical-align: top;
  text-align: right; }
  div.indicator.good {
    background-color: #05e40e; }
  div.indicator.bad {
    background-color: #fc4b0e; }

.btn {
  font-size: 1em;
  vertical-align: middle;
  font-weight: 600;
  line-height: 1.5em;
  padding: 0.2em 0.7em 0.35em 0.7em;
  border: 2px solid #27272a;
  text-transform: uppercase;
  border-radius: 6px;
  color: #27272a;
  background-color: #ffffff;
  cursor: pointer; }
  .btn.active {
    background-color: #27272a;
    color: #f6f6f6; }
  .btn:focus {
    outline: none;
    box-shadow: none; }
  .btn:hover {
    background-color: #d0cece;
    outline: none;
    box-shadow: none; }

.btn.dark {
  background-color: #27272a;
  color: #f6f6f6; }
  .btn.dark.active {
    color: #f6f6f6; }
  .btn.dark:hover {
    background-color: #d0cece;
    outline: none;
    box-shadow: none; }

a {
  color: #27272a;
  text-decoration: none; }
  a span {
    text-decoration: underline; }
  a:hover {
    color: #666; }
  a i {
    text-decoration: none !important; }

a.btn {
  text-decoration: none; }

b,
strong {
  font-weight: 600; }

h1 {
  display: inline-block;
  vertical-align: top;
  padding-left: 11px;
  font-weight: 600; }
  h1 span {
    margin-left: 2em;
    font-weight: 400; }

h2,
h3,
td.label {
  text-transform: uppercase;
  font-weight: 600; }

h2 {
  font-size: 1.1em; }

h2,
h3 {
  margin-bottom: 0.5em; }

h3 {
  font-size: 1em; }

.red {
  color: #fc4b0e; }

.green {
  color: #05e40e; }

input {
  width: 66%;
  background-color: #f6f6f6;
  border: 2px solid #27272a;
  border-radius: 6px;
  padding: 5px;
  font-weight: 600;
  max-width: 300px;
  line-height: 2em; }

label {
  font-size: 1em;
  line-height: 0; }

.form-group label {
  font-weight: 600; }

.form-group .explanation {
  display: block;
  width: 30%;
  margin-top: 1em;
  margin-bottom: 2em;
  padding-left: 2em; }

table {
  border-spacing: 0; }
  table th {
    font-weight: 600; }

[class^="ri-"],
[class*=" ri-"] {
  position: relative;
  top: 0.15em; }

#page_ui {
  padding: 2em; }

body.page header {
  font-size: 1.5em;
  padding-top: 20px;
  padding-left: 20px;
  background-color: #27272a;
  color: #f6f6f6; }

body.page div.content {
  padding: 2em; }

body.page nav {
  margin-bottom: 1.5em; }

body.page table {
  width: 100%; }
  body.page table th,
  body.page table td {
    padding: 0.75em;
    line-height: 2em; }
  body.page table tr:nth-child(even) {
    background-color: #f6f6f6; }
  body.page table thead {
    background-color: #27272a;
    color: #f6f6f6; }
    body.page table thead th {
      text-align: left;
      padding-top: 2em; }

body.page div.alert {
  padding: 0.75em;
  display: inline-block;
  margin-bottom: 3em;
  font-weight: 600; }
  body.page div.alert.danger {
    color: #fc4b0e;
    border: 2px solid #fc4b0e;
    border-radius: 6px; }

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0; }

.wrapper {
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
  display: grid;
  grid-gap: 0;
  padding: 0;
  margin: 0;
  color: #27272a; }

div.panel {
  background-color: #f6f6f6;
  border-radius: 3px;
  padding: 0.5em;
  margin: 0.5em;
  margin-bottom: 0;
  text-align: center; }
  div.panel h2 {
    margin-bottom: 0.25em;
    margin-top: 4em;
    margin-top: -0.25em;
    text-align: left; }
  div.panel p {
    text-align: left; }
  div.panel .btn {
    font-size: 0.9em; }

#panel_unavailable {
  z-index: 9999;
  padding: 1em;
  padding-top: 2em; }
  #panel_unavailable p {
    font-size: 1.75em !important;
    line-height: 1.2em;
    margin-bottom: 1.2em; }

#panel_conference {
  background-color: #d0cece;
  grid-area: conference;
  padding: 0;
  margin: 0;
  border-radius: 0; }

#panel_conference_ended {
  background-color: #d0cece;
  color: #f6f6f6;
  grid-area: conference;
  padding: 0;
  margin: 0;
  border-radius: 0;
  z-index: 9999;
  text-align: center;
  vertical-align: middle;
  padding-top: 10em; }
  #panel_conference_ended p {
    text-align: center;
    vertical-align: middle;
    font-size: 1.75em !important;
    line-height: 1.2em;
    margin-bottom: 1.2em; }

#panel_robo_name {
  grid-area: robo_name;
  padding: 0.6em;
  margin: 0;
  border-radius: 0;
  vertical-align: top;
  color: #f6f6f6;
  font-size: 1.3em;
  font-weight: 700;
  background-color: #27272a;
  text-align: left; }
  #panel_robo_name img.logo {
    display: inline-block;
    height: 2em;
    width: auto;
    margin-top: 0.1em; }
  #panel_robo_name h1 {
    display: inline-block;
    width: 75%;
    text-transform: uppercase;
    line-height: 1.5em;
    margin-top: -0.25em; }
    #panel_robo_name h1 span {
      display: inline-block;
      text-align: left;
      margin-left: 0;
      line-height: 1.3em;
      font-size: 0.7em;
      font-weight: 600; }

#panel_user_info {
  grid-area: user_info;
  background-color: #ffffff; }
  #panel_user_info p.greeting {
    font-weight: 600; }
  #panel_user_info p {
    text-transform: uppercase; }

#panel_robo_ani {
  grid-area: robo_ani;
  position: relative;
  background-color: #ffffff; }
  #panel_robo_ani picture {
    position: absolute;
    display: block;
    overflow: show;
    height: 110%;
    max-height: 15vh;
    width: 100%;
    left: 0;
    bottom: 5%;
    display: inline-block; }
    #panel_robo_ani picture img {
      display: block;
      height: 100%;
      width: auto;
      margin: 0 auto; }

#panel_control {
  grid-area: control;
  position: relative;
  text-align: left; }
  #panel_control h2 {
    display: inline-block; }
  #panel_control .btn {
    display: block;
    float: right; }
  #panel_control div.indicator {
    margin-left: 1em;
    margin-top: 0.3em;
    margin-right: 0.3em;
    float: right; }
  #panel_control.admin div.indicator {
    margin-top: 0.45em;
    margin-right: 0.45em; }

#panel_parking {
  grid-area: navigation;
  position: relative;
  text-align: center; }
  #panel_parking div.assist {
    display: inline-block;
    width: 50%;
    margin-top: -1em; }
    #panel_parking div.assist svg {
      padding: 0.5em;
      height: auto;
      width: 100%; }

#panel_nipple {
  grid-area: nipple;
  position: relative;
  vertical-align: top;
  text-align: left; }
  #panel_nipple h2 {
    vertical-align: top;
    display: inline-block; }

#nipple {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  margin-top: -1.5em; }
  #nipple .ring {
    position: relative;
    display: block;
    border: 2px solid #27272a !important;
    top: 19px;
    left: 19px;
    width: 42px;
    height: 42px;
    border-radius: 25px;
    z-index: 9999; }

#panel_view_zoom {
  grid-area: view_zoom; }
  #panel_view_zoom div.zoom_grid {
    text-align: center;
    width: 75%;
    margin: 0 auto;
    margin-top: 0.75em; }

#panel_view_camera {
  grid-area: view_camera; }
  #panel_view_camera .btn {
    margin-top: 0.5em;
    margin-left: 0.5em;
    margin-right: 0.5em; }

#panel_status {
  grid-area: status;
  position: relative;
  text-align: left; }
  #panel_status h2 {
    margin-bottom: 0.5em; }
  #panel_status table.services tr.bad td.indicator {
    color: #fc4b0e; }
  #panel_status table.services tr.bad td.state_name {
    color: #fc4b0e; }
  #panel_status table.services tr.good td.indicator {
    color: #05e40e; }
  #panel_status table.services tr.good td.state_name {
    color: #05e40e; }
  #panel_status table.services td.label {
    padding-right: 1.5em; }
  #panel_status table.services td.state_name {
    text-transform: capitalize;
    display: none; }
  #panel_status table.services td {
    text-align: left;
    padding-right: 0.5em; }
  #panel_status table.services.full td.state_name {
    display: table-cell; }
  #panel_status table.services.full td.label {
    width: 8em; }
  #panel_status.reduced #status_table_1 {
    width: 45%;
    display: inline-block; }
  #panel_status.reduced #status_table_2 {
    width: 45%;
    display: inline-block; }
  #panel_status.reduced div.supervisorlink {
    display: none; }
  #panel_status div.supervisorlink {
    display: inline-block;
    position: absolute;
    top: 0.9em;
    right: 0.45em; }

div.zoom_grid {
  display: grid;
  grid-template-areas: ". north ." "west center east" ". south .";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 3px 3px;
  padding: 3px;
  background-color: #f6f6f6;
  border: 2px solid #27272a;
  border-radius: 6px;
  cursor: pointer; }
  div.zoom_grid.active {
    border: 2px solid #27272a;
    background-color: #666; }
  div.zoom_grid .btn {
    display: block;
    background-color: #f6f6f6;
    border: 2px solid #27272a;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.1em 0.3em 0.1em 0.3em; }
  div.zoom_grid div.active {
    border: 2px solid #27272a;
    background-color: #27272a;
    color: #ffffff; }
  div.zoom_grid div.north {
    grid-area: north; }
  div.zoom_grid div.east {
    grid-area: east; }
  div.zoom_grid div.south {
    grid-area: south; }
  div.zoom_grid div.west {
    grid-area: west; }
  div.zoom_grid div.center {
    grid-area: center; }
    div.zoom_grid div.center i {
      position: relative;
      top: 0.1em;
      font-size: 1.5em; }

div.intro {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(246, 246, 246, 0.9);
  left: 0;
  top: 0;
  z-index: 10001;
  visibility: hidden;
  opacity: 0.0;
  transition: visibility 0s linear 300ms, opacity 300ms; }
  div.intro.unplayed {
    visibility: visible;
    opacity: 1.0;
    transition: visibility 0s linear 0s, opacity 300ms; }
  div.intro video {
    display: block;
    margin: 0 auto;
    object-fit: cover;
    width: 100%;
    height: 100%; }
  div.intro div.skip {
    display: block;
    position: absolute;
    bottom: 2em;
    left: 0;
    width: 100%; }
    div.intro div.skip p {
      text-align: center; }

@media (orientation: landscape) {
  .wrapper {
    grid-template-columns: 4fr 0.25fr 0.25fr 0.25fr 0.25fr;
    grid-template-rows: 0.1fr 0.1fr 10fr 0.1fr 0.25fr 0.25fr 0.25fr 0.25fr 0.35fr;
    grid-template-areas: "conference robo_name robo_name robo_name robo_name" "conference user_info user_info user_info user_info" "conference robo_ani robo_ani robo_ani robo_ani" "conference control control control control" "conference navigation navigation navigation navigation" "conference nipple nipple nipple nipple" "conference view_camera view_camera view_camera view_camera" "conference view_zoom view_zoom view_zoom view_zoom" "conference status status status status "; }
  #panel_unavailable {
    grid-row-start: 2;
    grid-row-end: 9;
    grid-column-start: 2;
    grid-column-end: 7; } }

@media (orientation: landscape) and (max-width: 1400px) {
  body {
    font-size: 12px; } }

@media (orientation: landscape) and (max-width: 1000px) {
  body {
    font-size: 10px; } }

@media (orientation: portrait) {
  .wrapper {
    grid-template-columns: 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr;
    grid-template-rows: 0.08fr 2fr 0.1fr 0.1fr;
    grid-template-areas: "robo_name robo_name user_info user_info robo_ani" "conference conference conference conference conference" "view_camera view_zoom view_zoom navigation nipple" "control control status status status"; }
  div.panel {
    margin-right: 0.25em;
    margin-left: 0.25em; }
  #panel_unavailable {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 6; }
  #panel_robo_name {
    position: relative; }
    #panel_robo_name img.logo {
      display: inline-block;
      height: 3.2em;
      width: auto; }
    #panel_robo_name h1 {
      width: 60%; }
  #panel_control .btn {
    display: inline-block;
    position: relative; }
  #panel_parking {
    position: relative; }
    #panel_parking div.assist {
      margin-top: 0;
      height: auto;
      width: 55%; }
  #panel_user_info {
    background-color: #27272a;
    color: #f6f6f6;
    margin: 0;
    padding: 1em;
    border-radius: 0; }
  #panel_status {
    text-align: left; }
  #panel_view_camera {
    text-align: left; }
    #panel_view_camera .btn {
      display: block;
      margin: 0;
      margin-top: 0.5em; }
    #panel_view_camera .btn:first-of-type {
      margin-bottom: 2em; }
  #panel_view_zoom div.zoom_grid {
    width: 100%;
    max-width: 20vw; }
  #panel_status #status_table_1 {
    width: 45%;
    display: inline-block; }
  #panel_status #status_table_2 {
    width: 45%;
    display: inline-block; }
  #nipple {
    margin: 1em auto; }
  #panel_robo_ani {
    position: relative;
    background-color: #27272a;
    color: #f6f6f6;
    margin: 0;
    padding: 1em;
    border-radius: 0; }
    #panel_robo_ani picture {
      position: absolute;
      display: block;
      overflow: show;
      height: 100%;
      width: 100%;
      right: 0;
      bottom: 0;
      display: block; }
      #panel_robo_ani picture img {
        position: absolute;
        bottom: 0;
        right: 0;
        display: block;
        height: 100%;
        margin: 0; } }

@media (orientation: portrait) and (max-width: 1000px) {
  body {
    font-size: 12px; } }

.assist .segments .seg * {
  stroke: #d0cece;
  fill: none;
  stroke-width: 6px;
  transition: stroke 0.3s ease-in-out; }

.assist .segments .d5 {
  /* Disabled */
  display: none; }

.assist .segments .seg[data-level="4"] .d4 {
  stroke: #484848; }

.assist .segments .seg[data-level="3"] .d3 {
  stroke: #963f32; }

.assist .segments .seg[data-level="2"] .d2 {
  stroke: #963f32; }

.assist .segments .seg[data-level="1"] .d1 {
  stroke: #c73f1c; }

.assist .segments .seg[data-level="0"] .d0 {
  stroke: #ff4500; }

.assist .beauty {
  stroke: #222;
  stroke-width: 1px; }

.assist .beauty .front {
  fill: #222; }

.assist .beauty .back_side {
  fill: #222; }

.assist .beauty .front_side {
  fill: #111; }

.assist .beauty .column {
  fill: #666; }

.assist .beauty .back {
  fill: #2a2a2a; }

.assist .beauty .name {
  fill: #ffffff;
  stroke: none; }

.assist .dividers {
  fill: none;
  stroke: #f6f6f6;
  stroke-width: 6px; }

.assist .indicator .alarm {
  fill: #ff4500; }

.assist .indicator .front {
  fill: #ffffff; }

.assist.alarm .indicator .alarm {
  display: block; }

.assist.nominal .indicator .front {
  display: block; }

#joystick {
  position: relative;
  display: block;
  width: 250px;
  height: 250px;
  outline: 1px solid #27272a; }

.nipple .front {
  border: 3px solid white;
  background-color: #27272a !important;
  opacity: 1.0 !important; }

.nipple .back {
  border: 2px solid #27272a !important;
  background-image: url(../img/arrows.svg) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 1.0 !important; }

.active .nipple .back {
  opacity: .5 !important; }

.active .nipple .front {
  opacity: .5 !important; }