/*
////////////////////////////////////////////////////////////////////////////////
// Project	    : Ava Web Application
// Filename         : style.css
// Description      : Primary style sheet for the Ava web app.
// History          :
//
// Copyright © 2023-2018 Ava Robotics Inc, 2015 iRobot Corporation. All rights reserved.
////////////////////////////////////////////////////////////////////////////////
*/

body {
  margin-top: 0;
  margin-left: 5px;
  font-family: Verdana, Arial, sans-serif;
  /* color:#cccccc; */
  color: #808080;
  background-color: black;
  font-size: 1em;
  -webkit-touch-callout: none !important; /* disable context menus on touch devices */
}
#session_page {
  background-color: #222222 !important;
}
/* scrollbars (see DE2400) */
body::-webkit-scrollbar,
#roomListDiv::-webkit-scrollbar {
  width: 1em;
}
body::-webkit-scrollbar-arrow-color,
#roomListDiv::-webkit-scrollbar-arrow-color {
  width: 1em;
}
body::-webkit-scrollbar-track,
#roomListDiv::-webkit-scrollbar-track {
  background-color: #383333;
  -webkit-box-shadow: inset 0 0 6px rgba(122, 122, 122, 0.3);
  border: 1px solid rgb(68, 68, 68);
  border-radius: 3px;
}
body::-webkit-scrollbar-thumb,
#roomListDiv::-webkit-scrollbar-thumb {
  background-color: rgb(179, 179, 179);
  border-radius: 2px;
  border: 2px solid rgb(142, 142, 142);
}

a,
.clickable,
.ui-datepicker-trigger,
a.arrowLink {
  color: #81ca00 !important;
  text-decoration: none;
  cursor: pointer;
}

a.arrowLink {
  color: #81ca00 !important;
  display: inline-block;
  background-color: transparent;
  font-size: 22px !important;
  font-weight: bold;
  border: 1px solid #333333;
  margin-left: 2px;
  vertical-align: top;
  padding: 8px;
}

a:hover,
.clickable:hover,
.ui-datepicker-trigger:hover {
  opacity: 0.75;
}

ul li {
  padding: 0.8em;
}

li img {
  vertical-align: baseline;
}

.grayscale {
  filter: grayscale(100%);
  -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  -o-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
}

/************************ PAGE LAYOUT **************************/
#outer-container {
  max-width: 80%;
  max-width: 500px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  /* box-shadow: 0px 0px 80px #353131; */
  margin-bottom: 40px;
  /* border: 1px solid #1F1F1F;	/* need a border for monitors that don't display drop shadows or gray gradients  very well */
}

#page-container {
  /* height:90%; */
  min-height: 500px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 40px;
}

/************************ HEADERS & HEADINGS **************************/

.page-title {
  font-weight: normal;
  font-size: 1.1em;
  cursor: default;
}

h2 {
  text-align: left;
  font-size: 1.2em;
  font-weight: normal;
}

h2.topOfPage {
  margin-top: 0px;
  cursor: default;
}

h2.section-title {
  font-weight: normal;
  color: #dddddd;
  background-color: #222222;
  vertical-align: middle;
  padding: 8px;
  font-size: 1em;
  text-align: -webkit-center;
  cursor: pointer;
  border-bottom: 1px solid #1f1f1f;
  line-height: 2em;
}
.section {
  padding-bottom: 30px !important;
}

#AvaRobotics {
  padding-top: 7%;
  height: 70px;
  border: 0;
  padding-left: 5px;
  float: none;
}

div.titlebar {
  position: relative;
  font-family: sans-serif;
  font-size: large;
  color: #dddddd;
  /* background-color:#222222; */
  min-height: 65px;
  /* background-image: linear-gradient(to top, #111111 0%, #222222 15%, #222222 85%, black 100%); */
  /* background-image: -webkit-linear-gradient(to top, rgb(0,0,0) 0%, rgb(20,92,9) 10%, rgb(20,92,9) 90%, rgb(255,255,255) 100%); */
  margin-bottom: 0px;
  width: 100%;
  text-align: center;
}

span.maintitle {
  top: 28px;
  font-family: sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  color: #81ca00;
}

.maintitle sup {
  font-size: 0.6em;
}

span.subtitle {
  position: absolute;
  top: 40px;
  left: 225px;
  font-family: sans-serif;
  font-size: medium;
  font-weight: normal;
  color: #228822;
  text-align: left;
}

table {
  border-color: #333333;
}

/* Forms, default class */
select,
textarea,
.ui-timepicker-wrapper {
  background-color: #333333;
  color: #eeeeee !important;
  border: 2px solid #000;
  padding: 4px;
  border-radius: 4px;
  font-size: 16px;
}

.ui-timepicker-list li {
  color: #eeeeee;
}

input {
  width: auto;
  background-color: #3c3939;
  color: #eeeeee;
  border: 1px solid #3c3939;
  padding: 8px;
  outline-style: none;
}

input:-webkit-autofill,
input:autofill,
input:-moz-autofill {
  /* remove Chrome's yellow background for autofilled items like username & pswd */
  -webkit-box-shadow: 0 0 0px 1000px #3c3939 inset;
  -webkit-text-fill-color: #eeeeee;
}

input:focus {
  border: 2px solid green;
}

/* Specify text selection colors. Don't normally have to do this since there is a
   browser default but setting it explicitly for dialog windows to fix bugs like DE2415. */
.popupWindowContent input::selection {
  color: #fffaf6 !important;
  background-color: #2e8cff !important;
}
.popupWindowContent input::-moz-selection {
  color: #fffaf6 !important;
  background-color: #2e8cff !important;
}

#infoAlertDiv {
  display: block;
  box-sizing: border-box;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: absolute;

  z-index: 1000 !important;
  background: transparent !important;
  bottom: 0;
  font-size: x-large;
  opacity: 0.9;
  width: 100%;
  /* align-self:end; */
}

#innerInfoAlertDiv {
  width: fit-content;

  margin: 0px;

  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1;
  background-color: #272727 !important;
}

#webAutoTestingLabel {
  display: none;
  color: transparent;
  z-index: -1000 !important;
  background: transparent !important;
  bottom: -1000px;
}

/*********  BUTTONS & FORM CONTROLS **********/
div.bigButton {
  text-align: center;
  /*	margin:40px;
	margin-top:0px; */
  margin-bottom: 5%;
  background-color: #101010;
  vertical-align: middle;
}

div.inlineButton,
input.inlineButton,
div.bigButtonBottom {
  /* for ok/cancel buttons, etc. */
  display: inline-block;
  min-height: 4.5em;
  line-height: 4.5em;
  vertical-align: middle;
  text-align: center;
  margin: 0px;
  background-color: #1b1b1b !important;
  box-sizing: border-box;
  border: 1px solid #232323;
  border-radius: 0px !important;
  font-size: 1em;
  margin-top: 0px !important;
  -webkit-appearance: none !important; /* don't use iOS default button styling */
  cursor: pointer;
  padding: 4px;
}
div.inlineButton:focus,
input.inlineButton:focus,
div.bigButtonBottom:focus {
  border: 1px dashed #2c2c2c !important; /* change ugly blue outline around focused buttons */
  outline: 0;
}

.inlineButton.smaller {
  min-height: 2.5em !important;
  line-height: 2.5em !important;
}

/* Set this explicitly so we don't reduce size of login button on small screens */
#login_form input.inlineButton {
  min-height: 4em;
  line-height: 4em;
}

.ui-datepicker-trigger,
.arrowLink {
  /* adjust jQuery UI's datepicker trigger buttons */
  border: 0px;
  background-color: transparent;
  /*  font-size:.8em !important; */
  font-size: 22px !important;
  font-weight: bold;
  border: 1px solid #333333;
  margin-left: 2px;
  vertical-align: top;
}

div.bigButtonTop {
  background-color: #212121;
  padding: 50px 30px;
  border-bottom: 3px solid rgb(34, 34, 34);
}

div.bigButtonBottom a {
  /* links here should be full width of space */
  width: 100%;
  flex-direction: row !important;
}

div.bigButtonBottom {
  /* also see div.inlineButton above */
  border-top: 1px solid #232323;
  width: 100%;
  flex-direction: row;
}

input[type="button"],
input[type="submit"],
input[type="button"].standard {
  color: #81ca00; /* lime green */
  border-radius: 5px;
  cursor: pointer;
  -webkit-appearance: none !important;
}

input[type="button"]:hover,
input[type="button"]:disabled,
input[type="submit"]:hover,
input[type="submit"]:disabled,
div.bigButtonBottom:hover {
  opacity: 0.6;
}

input:disabled,
:disabled {
  cursor: not-allowed;
}

.btnCancel {
  /* cancel button */
  color: #9f0000 !important;
}

.btnStandard,
.btnAdjustments {
  min-width: 50px;
  background-repeat: no-repeat;
  vertical-align: middle;
  padding-top: 30px !important;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

#btnEndSession {
  background-color: #d30000 !important;
  color: white;
  font-weight: bold;
}

#btnCameraPASwitch {
  background-image: url("../imgs/PA_View.svg");
}

#btnCameraPASwitch:active {
  background-image: url("../imgs/PA_View_Pressed.svg") !important;
}

/* Big green go button used for teleporting */
.goButton {
  height: 118px;
  width: 118px;
  position: relative;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.goButton img {
  position: relative;
  display: block;
  height: 118px;
  width: 118px;
}
.goButton p {
  z-index: 500;
  position: relative;
  color: white;
  font-size: 36px;
  font-weight: bold;
  top: -118px;
}
/* Remove ugly blue outline on elements in the Teleport Status window */
/* .goButton:focus, #teleportIcon:focus, #bigGreenCircle:focus { */
.goButton:focus,
#teleportIcon:focus {
  outline-width: 0;
  outline: none;
}
.goButton img#bigGreenCircle:focus {
  /* not working for some reason! */
  border: 2px dashed red;
  border-radius: 59px;
}
#startVideoLink:focus,
#startVideoLink a:focus {
  outline: 1px dashed #2c2c2c;
}
/* The stop button is now a rectangular overlay showing some text and an icon */
#stopButton {
  display: grid;
  box-sizing: border-box;
  text-align: center;
  margin: auto;
  width: 100%;
  height: 100%;
  padding: 0px;
  z-index: 1000 !important;
  background-color: rgba(51, 51, 51, 0.65);
  opacity: 1;
}
#stopButtonInner {
  height: 100%;
  width: 360px;
  max-height: 110px;
  margin: auto;
  padding: 20px;
  background-color: white;
  border: 1px solid white;
  border-radius: 6px;
  box-sizing: border-box;
  color: black;
  display: block;
  opacity: 1;
}
#stopButtonInner span {
  line-height: 100%;
  color: red;
  text-transform: uppercase;
  display: inline-block;
  font-size: 0.75em;
  font-weight: bold;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 16px;
}
#stopButtonInner img {
  width: 45px;
  height: 45px;
  margin-bottom: 4px;
}
#stopButtonInner span:hover {
  opacity: 0.75;
}

/* Small status message overlay (e.g. "Dialing...", etc.) */
.miniStatus {
  text-align: center;
  position: fixed;
  background-image: url("../imgs/loading.gif");
  background-origin: padding-box;
  background-position: center 8px;
  background-repeat: no-repeat;
  background-color: black;
  background-size: 32px 32px;
  color: #eeeeee;
  border: 4px solid #333333;
  border-radius: 8px;
  min-height: 70px;
  min-width: 90px;
  max-width: 100px;
  vertical-align: middle;
  font-size: 0.9em;
  /*	z-index:550; */
  z-index: 999;
  cursor: none;
  padding: 12px;
  padding-top: 40px;
  opacity: 0.7;
  display: none;
}

#callStatus {
  /* shows dialing status */
  bottom: 30%;
  right: 20%;
}

#robotStatus {
  /* shows robot traveling status */
  top: 20vh;
  right: 40vw;
}

#robotStatus2 {
  /* shows robot traveling status inside Teleport Status window */
  display: block;
  border: 0px solid gray;
  border-radius: 6px;
  padding: 8px 2px;
  opacity: 0.4;
  font-style: italic;
  font-size: 0.8em;
}

.toolbar {
  /* top or bottom toolbar*/
  background-color: #111111;
  min-height: 80px;
  vertical-align: middle;
  line-height: 80px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.toolbarTop {
  min-height: 50px !important;
  line-height: 50px !important;
  vertical-align: middle;
}

.toolbarTopButton {
  /* toolbar that overlays map  - map zoom, help, etc. */
  background-color: #494949;
  height: 20px !important;
  width: 20px;
  display: block !important;
  vertical-align: middle;
  line-height: 20px;
  padding: 6px 8px;
  min-width: 20px;
  text-align: center;
  border: 1px solid #1f1f1f;
  z-index: 1000; /* needs to be on top of region, robot icon, presets, etc. */
}

.toolbarTopButton img,
.toolbarTopButtonArrow img {
  vertical-align: middle;
}

.toolbar input.inlineButton,
.toolbar .inlineButton {
  min-height: 50px;
  line-height: 50px;
  background-color: #1a1a1a;
  margin: 10px 0px;
  color: #999898;
  font-family: verdana;
  font-size: 0.9em;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border-bottom: 2px solid transparent;
  -webkit-appearance: none !important;
}

.toolbarTopButtonArrow {
  padding: 0px;
  background-color: transparent;
  border: 0px;
}

.toolbarBtnDisabled {
  cursor: not-allowed !important;
}

/************************ VIDEO WIDGET ********************/
/* (Video window on session page; only applicable when using integrated video.) */
#videowidgetContainer {
  top: 0px;
  left: auto;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  vertical-align: top;
  /*	border-top: 2px solid #375261 !important;
	background-color: rgb(34, 59, 73); */
  text-align: right;
  height: 100%;
  width: 100%;
}
#videowidgetContainer:hover {
  pointer-events: all !important;
}
#videowidgetContainer input {
  position: relative;
  margin: 0px;
  background-color: transparent;
  border: 0px !important;
}
#videowidgetHeader {
  /* control bar at top of integrated video window */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #18a5dd),
    color-stop(100%, #03333f)
  ); /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(
    top,
    #18a5dd 0%,
    #03333f 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #18a5dd 0%, #03333f 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #18a5dd 0%, #03333f 100%); /* IE10+ */
  background: linear-gradient(to bottom, #18a5dd 0%, #03333f 100%); /* W3C */
  border: 0px;
}
#videoWindowSizer {
  background-color: transparent;
  margin: 2px 0px;
  border: 2px solid black;
  border-radius: 6px;
  padding: 0px;
  vertical-align: baseline;
  /*	line-height:32px; */
  box-sizing: border-box;
}
#videoWindowSizer span {
  padding: 3px;
  vertical-align: baseline;
  display: inline-block;
}
#self-view {
  position: absolute;
  right: 2%;
  bottom: 180px;
  width: 250px;
  padding: 0px;
  cursor: move;
}
/************************ IMAGES *************************/
img.desaturate {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* For IE 6 - 9 */
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease; /* Fade to color for Chrome and Safari */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* FireFox */
}

/************************ TEXT BLOCKS ************************/
.hint-text {
  opacity: 0.8;
  font-size: 0.85em;
}

.faded {
  /* text that is secondary will appear a bit lighter and not so prominent */
  opacity: 0.6;
  font-size: smaller;
}

/* Text that you want to stand out, like upcoming session dates on home screen*/
.prominent {
  font-size: 1.2em;
}

/************************ TESTING FRAMEWORK *******************/
.testing a {
  font-size: smaller;
}
/************************ "LEAN MODAL" DIALOG BOXES **********/
#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  /*  background: #000;  original value */
  background: gray;
  display: none;
}

.popupWindow {
  text-align: left;
  padding: 0px;
  background-color: #1b1b1b;
  border-radius: 4px;
  min-width: 300px;
}

.popupWindow .popupWindowContent {
  padding: 30px;
}

.fieldGroup {
  padding: 10px 0px;
  box-sizing: border-box;
  vertical-align: top;
}

.fieldGroup label {
  margin-bottom: 4px;
  display: block;
  /*	font-weight:bold; */
  color: gray;
}

.fieldGroup input:not([type="checkbox"]) {
  width: 90%;
}

.fieldGroupInner {
  background-color: #151515;
  border: 1px solid black;
  border-radius: 4px;
  padding: 10x !important;
}

.buttonsGroup {
  white-space: nowrap;
  /* overflow:hidden; */
  box-sizing: border-box;
}

/* Rotate icons such as the green "wait indicator" for teleport feature */
.rotating {
  animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    opacity: 0.2;
  }
}
@-webkit-keyframes spin {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    opacity: 0.2;
  }
}
@-moz-keyframes spin {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    opacity: 0.2;
  }
}

/* Use blinking behavior on sit/stand buttons during transition */
.blinking {
  animation: myblink 1.5s infinite;
  animation-timing-function: linear;
  -webkit-animation: myblink 1.5s infinite;
  -webkit-animation-timing-function: linear;
}
@keyframes myblink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
@-webkit-keyframes myblink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
@-moz-keyframes myblink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}

.flashit {
  /* used to "pulse" or "flash" an item (4 times) */
  animation: myblink 0.4s 4;
  animation-timing-function: linear;
  -webkit-animation: myblink 0.4s 4;
  -webkit-animation-timing-function: linear;
}

/************************ VIDEO ADDRESSES *************************/
.vidAddrRow {
  display: block;
  width: 100%;
}

.vidAddrHostName {
  font-size: 16px;
  opacity: 0.6;
}

a.removeLink,
.buttonLink {
  padding: 0px 5px;
  border: 1px solid gray;
  font-family: Tahoma;
  font-weight: bold;
  opacity: 0.6;
  color: gray;
}

a.removeLink:hover,
.buttonLink {
  opacity: 1;
}

/************************ LOCATIONS *************************/
#roomListDiv {
  max-height: 300px !important;
  overflow-y: scroll;
  background-color: #1e1e1e;
  border-radius: 4px;
  position: relative;
}
#vidAddrDiv {
  background-color: #141414;
  padding: 10px;
  border-radius: 4px;
  text-align: left;
}

#locationList .section-title {
  background-image: none;
  padding: 6px;
  margin-bottom: 0px;
  margin-top: 0px;
  cursor: default;
  font-size: 0.9em;
  /*	font-style:italic; */
  /*	font-variant:small-caps; */
  text-transform: uppercase;
  background-color: black;
}

.roomHeadingDiv {
  font-weight: bold;
  font-size: smaller;
  background-color: #312e2e;
  padding: 12px 10px;
  border-top: 0px solid black;
  border-bottom: 1px solid rgb(35, 35, 35);
  cursor: pointer;
}
.roomHeadingDiv .roomHeading {
  width: 87%;
  display: inline-block;
}
.roomName {
  font-size: smaller;
  padding: 10px;
  cursor: pointer;
  color: #cccccc;
  background-color: #1e1e1e;
  border-bottom: 1px solid #030303;
}
.roomName:hover {
  opacity: 0.7;
}
.roomNameSelected {
  background-color: #8e8e8e !important;
  color: black;
}
.roomHeadingSelected {
  background-color: #8e8e8e !important;
  color: black;
}
.roomNameDisabled {
  cursor: not-allowed !important;
}
.roomNameDisabled .roomNameInner,
.roomNameDisabled .presetName {
  background-color: #1e1e1e;
  opacity: 0.3;
}
.roomNameDisabled:hover {
  background-color: #1e1e1e !important;
  opacity: 1 !important;
}
.currentLocation {
  font-style: italic;
}
.presetName {
  font-size: smaller;
}
#relatedPresetsDiv .presetName {
  font-size: 1em;
}

/* Numbered circles in destination list on session/map page */
.numberedCircle {
  border-radius: 50%;
  padding: 2px 4px;
  background: transparent;
  border: 2px solid #676767;
  text-align: center;
  font-size: 0.8em; /* line-height: 1.8em; */
  vertical-align: baseline;
  margin: 0px;
  min-height: 15px;
  min-width: 1.2em;
  display: inline-block;
}

.robotAvailability {
  float: right;
  text-transform: uppercase;
  font-size: smaller;
  opacity: 0.5;
  vertical-align: text-top;
  display: inline-block;
}
.robotAvailability img {
  /* "no availability" icon */
  width: 20px;
  height: 20px;
  opacity: 0.9;
  vertical-align: top;
}

.triangle-up {
  /* arrows for collapsible room headers */
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid #cccccc;
  display: inline-block;
  margin-right: 4px;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-left: 8px solid #cccccc;
  border-bottom: 4px solid transparent;
  display: inline-block;
  margin-right: 4px;
}

.triangle-down {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid #cccccc;
  display: inline-block;
  margin-right: 4px;
}

/* ---- Location search box ---- */
#searchBoxDiv {
  text-align: left;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 4px;
  min-height: 2em;
}
#roomSearch .icon {
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}
input#roomSearch {
  width: 100%;
  height: 3em;
  border: none;
  font-size: 10pt;
  float: left;
  color: #63717f;
  padding-left: 32px !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #2b303b url("../imgs/search@2x.png") no-repeat 10px center;
  background-size: 16px;
  box-sizing: border-box;
  opacity: 0.8;
  pointer-events: all !important;
}
input#roomSearch::-webkit-input-placeholder {
  /* Chrome */
  color: #65737e;
}
input#roomSearch::-moz-placeholder {
  /* Firefox (newer versions) */
  color: #65737e;
}
input#roomSearch:-moz-placeholder {
  /* Firefox (older versions) */
  color: #65737e;
}
input#roomSearch:-ms-input-placeholder {
  /* IE */
  color: #65737e;
}

input#roomSearch:hover,
input#roomSearch:focus,
input#roomSearch:active {
  outline: none;
  /*	background: #333333; */
  color: #b1b6bb;
  opacity: 1;
}

.no-results {
  font-size: 0.9em;
  padding: 8px;
  font-weight: normal !important; /* fixes DE2679 */
  color: #eeeeee; /* DE2679 (take 2) */
  font-style: italic;
}

/* Styles for search terms found within content. Overriding */
/* hidseek plugin's styles for this. */
mark.highlight {
  color: #81ca00 !important;
  background-color: transparent !important;
}

/************************ SESSION CONTROLS / MAP PAGE *************************/
.grid-container {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.25fr 3.5fr minmax(175px, 175px);
  z-index: 1000;
  overflow: hidden;
}

body#session_page {
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
div#sessionTitleBar {
  box-sizing: border-box;
  position: relative;
  font-size: 0.9em;
  color: #dddddd;
  background-color: #222222;
  min-height: 30px;
  background-image: linear-gradient(to top, #111111 0%, #222222 15%, #222222 85%, black 100%);
  background-image: -webkit-linear-gradient(
    to top,
    rgb(0, 0, 0) 0%,
    rgb(20, 92, 9) 10%,
    rgb(20, 92, 9) 90%,
    rgb(255, 255, 255) 100%
  );
  width: 100%;
  text-align: left;
  vertical-align: top !important;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}
#session_page #outer-container {
  max-width: 100%;
  margin-top: 46px;
  margin-bottom: 60px;
  border: 0px solid #333333;
  width: 100%;
}
#session_page #page-container {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 3fr;
  grid-template-rows: 1fr;
  grid-area: 2 / 1 / 3 / 4;
  padding: 0% !important;
  min-height: 0% !important;
}
img#fullMap {
  width: 100%;
  background-color: black;
  -webkit-touch-callout: none !important; /* disable context menu on touch devices */
  /* border:6px solid #434343; */
  /* border-radius:4px; */
}
.shrinkedVideo {
  top: 0;
}
.zoomImg {
  background-color: black;
}
#mapContainer,
#fullMap {
  overflow: visible;
  width: 100%;
}
.shrinkMap {
  grid-area: 1/1/2/2 !important;
  z-index: 1000;
  max-width: 500px;
  overflow-y: auto;
  margin-left: 3% !important;
  align-self: self-start;
  width: 96% !important;
  border: 6px solid rgb(67, 67, 67);
  border-radius: 4px;
  /* height: fit-content !important; */
}
#fullMap:hover,
.waypoint:hover {
  cursor:	/* url('../imgs/green_dot.png'),	/* for modern browsers */
			/* url('imgs/green_dot.cur'),		/* for IE */ pointer; /* fallback */
}
#mapButtonGroupContainer {
  /* hot spot where users can hover to see map controls */
  position: fixed;
  /* left:0px; */
  top: 80px;
  display: inline-block;
  height: 100%;
  min-height: 1000px;
  z-index: 999;
  background-color: transparent;
  width: 60px;
}
#mapButtonGroup {
  /* button overlay in top left edge of map (zoom in/out of map, etc.) */
  position: relative;
  float: left;
  left: 0px;
  display: inline-block;
  line-height: 1em;
  opacity: 0.85;
  z-index: 1000;
  border: 5px solid #333333;
}
#mapCloseButton {
  position: fixed;
  display: inline-block;
  line-height: 1em;
  opacity: 0.85;
  z-index: 1000;
}

#mapCloseButtonContainer {
  position: fixed;
  margin-top: 1%;
  top: 82px;
  display: inline-block;
  min-height: 1000px;
  z-index: 999;
  background-color: transparent;
}
/*
#mapButtonGroupTeaser {
	position: fixed;
	width: 20px;
	height: 100vh;
	float: left;
	left: 0px;
	top: 0px;
	display: inline-block;
	opacity: 0.65;
	background-color: #333333;
	color: gray; 
	font-weight: normal; 
	font-size: 3em; 
	line-height: 0.2em;
	padding: 2px 6px;
	padding-top: 55px;
}
*/
#robotIcon {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 950;
  pointer-events: none; /* ignore mouse events on this layer */
  height: 32px;
  width: 51px;
}
canvas#currentRegion {
  /*	border:2px dashed purple;	/* for testing purposes */
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 900 !important; /* want waypoints to show on top of this */
  pointer-events: none; /* ignore mouse events on the canvas layer */
  /*	width:100%;
	height:100%;
*/
}
.waypoint {
  position: absolute;
  display: inline-block;
  text-align: center;
  background-image: url("../imgs/waypoint_off.png");
  background-size: contain;
  color: white;
  font-weight: bold;
  background-color: transparent;
  width: 45px;
  height: 45px;
  line-height: 48px;
  font-size: 1em;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  z-index: 948; /* needs to be under robot, under green circle, and over region canvas */
}
.waypointSelected {
  background-image: url("../imgs/waypoint_on.png") !important;
}
.waypointSelected.traveling {
  background-image: url("../imgs/green_dot.png") !important;
}
#selectedPositionIcon {
  /* dotted green circle indicates temp waypoint when user dbl-clicks on map */
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 949; /* layer it underneath robot icon and over waypoint circle */
  pointer-events: none; /* ignore mouse events on this layer */
  display: none; /* not displayed until user selects a destination */
}

#ctrlBtnWrapper {
  display: contents !important;
}

#sessionControlsBottom.disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
  /*	cursor: not-allowed !important;	/* this doesn't work if setting pointer-events to none! */
}

.footer input[type="button"] {
  width: 40px;
  font-size: 0.7em;
  height: 30px;
  color: transparent !important;
}
.footer input[type="checkbox"] {
  background-color: red;
  color: pink;
  font-size: smaller;
}
.footer input.controlBarButton {
  width: 38px !important;
  min-width: 38px;
  height: 4em !important;
  line-height: 4em !important;
  max-height: 4em !important;
  /*	background-color: #1B1B1B; */
  background-color: transparent;
  padding: 0px !important;
  text-align: center;
  margin: 0px;
  box-sizing: border-box;
  border: 0px;
  border-radius: 0px !important;
  font-size: 1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;
  vertical-align: middle;
  touch-action: auto;
  -webkit-touch-callout: none; /* prevent default menus, etc. on touch devices */
  -webkit-user-select: none; /* prevent default menus, etc. on touch devices */
}
.footer .statusON {
  /* use bottom border to show an "ON" status for buttons like Push Mode */
  background-color: #66cc33 !important;
  border: 0px !important;
}

#btnToggleMapContainer {
  background-image: url("../imgs/Map_Unselected.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 40px !important;
  height: 100px !important;
  border: 0px !important;
}

#btnToggleMapContainer.statusON {
  background-image: url("../imgs/Map_Selected.svg") !important;
}

#btnCameraReset {
  background-color: white !important;
  color: black !important;
  width: auto !important;
  margin-left: 15px;
  border: 2px solid #424141;
}

/* Atutoframe button style */
#btnAutoFrame {
  background-color: white;
  color: black !important;
  margin-left: 13px;
  border: 2px solid #424141;
}
#btnAutoFrame.statusON {
  background-color: #81ca00;
  color: white !important;
  margin-left: 13px;
  border: 2px solid #424141;
}

#btnSit {
  background-color: transparent;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
}
#btnStand {
  background-color: transparent;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
}
#changeDestination {
  color: #81ca00 !important;
}

/* Avoid obstacles check box */
#chkObstaclesOption {
  display: inline-block;
  white-space: normal;
  line-height: 1.3em;
  text-align: center;
  vertical-align: middle;
}
input#chkObstacles[type="checkbox"] {
  cursor: pointer;
  background: #34495e;
  border-radius: 1px;
  box-sizing: border-box;
  position: relative;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  border-width: 0;
  transition: all 0.3s linear;
  vertical-align: middle;
}
input#chkObstacles[type="checkbox"]:checked {
  background-color: #2ecc71;
}
input#chkObstacles[type="checkbox"]:focus {
  outline: 0 none;
  box-shadow: none;
}

#session_page .btnGroup {
  box-sizing: border-box;
  /*	background-color: rgb(50, 50, 50) !important; */
  background-color: transparent !important;
  /*display: inline-block;*/
  margin: 10px;
  padding: 10px;
  border-radius: 4px;
  border: 0px solid #3e3e3e;
  white-space: nowrap; /* don't wrap buttons within a button group */
  vertical-align: middle;
  min-height: 100px;
  height: 100px;
}

/* Layout of video & map panels on session page */
.panel {
  display: inline-block;
  width: 33%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  /*	top:35px;*/
}
.col65 {
  width: 65% !important;
}
.col100 {
  width: 100% !important;
}

/***** Session Details on session page *****/
#sessionDetailsWidget {
  min-width: 360px;
  grid-area: 1/1/2/2;
  z-index: 1000;
  /* max-width:500px; */
  background-color: #272727;
  border: 6px solid #434343;
  color: white;
  display: none;
  border-radius: 4px;
  text-align: left;
  overflow-y: auto;
  margin-left: 3% !important;
  align-self: center;
}
/* Session info (e.g. session time & room) */
#sessionInfoDetails {
  display: block;
  padding: 8px;
  overflow: visible;
  margin: 10px 0px;
  margin-top: 0px;
  cursor: default;
  color: #8e8e8e;
  font-size: smaller;
}

#sessionDetailsWidget .grpSessionDetails {
  padding: 12px;
  border: 1px solid gray;
  margin-bottom: 8px;
  box-sizing: border-box;
}
#sessionDetailsWidget .grpSessionDetails input[type="button"] {
  background-color: #4e4e4e;
}
#sessionDetailsWidget label {
  opacity: 0.6;
  margin-bottom: 8px;
}

/* Destinations list (in Session Details) */
#sessionDetailsWidget #locationList .section-title {
  background-color: transparent;
}
#sessionDetailsWidget #searchBoxDiv {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
#sessionDetailsWidget .roomName {
  border-bottom: 1px solid #312f2f;
  background-color: transparent;
}
#sessionDetailsWidget .roomNameInner,
#sessionDetailsWidget .roomNameDisabled .roomNameInner,
#sessionDetailsWidget .roomNameDisabled .presetName {
  background-color: transparent;
}
#sessionDetailsWidget .roomName:hover {
  background-color: black;
  opacity: 0.5;
}
#sessionDetailsWidget .roomNameDisabled:hover {
  background-color: transparent !important;
}
#sessionDetailsWidget .roomNameDisabled {
  color: #8d8d8d;
}

/* Joystick Controls on session page (used for driving and camera tilt) */
.joystickContainer {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  box-sizing: content-box;
  vertical-align: middle;
  cursor: pointer;
  pointer-events: auto;
  margin-left: 20px;
  margin-right: 20px;
  background-image: url("../imgs/Joystick_Base.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
#joystickLookContainer {
  margin-right: 15px;
}

.joystickContainer .nipple .front {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: white !important;
  opacity: 1 !important;
  margin-left: -22.75px !important;
  margin-top: -22.75px !important;
  width: 70% !important;
  height: 70% !important;
}
#joystickLookContainer .nipple .front {
  background-image: url("../imgs/Look_Icon.svg") !important;
  background-size: 70% !important;
}

#joystickMoveContainer .nipple .front {
  background-image: url("../imgs/Move_Icon.svg") !important;
  background-size: 35% !important;
}

.joystickContainer .nipple .back {
  background-color: #626262 !important;
  /*	background-image: url('../imgs/Joystick_Base.svg') !important;	
	background-repeat: no-repeat !important;
	background-position: center !important;	
*/
  opacity: 1 !important;
}

/**responsive toolbar session page**/
.dropup {
  position: relative;
  display: none;
}

#toggle {
  background-image: url("../imgs/chevron-arrow-up.svg");
  color: #81ca00;
  margin: 5px !important;
}
.dropup-content {
  display: none;
  text-align: center;
  position: absolute;
  bottom: 40px;
  border-radius: 5px;
  background-color: #626262;
}

.show-dropup {
  display: inline-block !important;
}

.cameraBtnGroup {
  display: inline-block;
  box-sizing: content-box;
}

/************************ CALENDAR *************************/
.calSessionEvent {
  background-color: #466400 !important;
}

.calLocation {
  /* location display in Calendar view */
  font-size: smaller;
  opacity: 0.7;
}

/* Adjust some of the fullcalendar plugin styles */
.fc-day-header {
  /* don't wrap day view headers (unless shrinking window) DE2411 */
  /*	white-space: nowrap; */
  font-weight: normal;
  font-size: 0.8em;
  padding: 8px 4px !important;
}
.fc-time,
.fc-axis {
  /* Day view times and "All Day" label, in left col */
  font-size: 0.8em;
}
.fc-widget-header {
  background-color: #2c2e2a;
}
/***********************************************************/

/* BUSY INDICATOR */
.busyIndicator {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  z-index: 100;
  display: none;
  background-color: #cccccc;
  padding: 10px;
  border: 1px solid black;
  border-radius: 8px;
}

/************** SMALL SCREEN ADJUSTMENTS **************/
@media only screen and (max-height: 750px) {
  body {
    font-size: 0.95em;
  } /* reduce font size slightly */
  h2 {
    font-size: 1.1em;
  } /* reduce heading fonts */
  #roomListDiv {
    max-height: 200px !important;
  } /* reduce height of room lists */
  div.bigButtonTop {
    padding: 25px;
  } /* reduce height of home page button areas */
  div.inlineButton,
  input.inlineButton,
  div.bigButtonBottom {
    min-height: 2.5em;
    line-height: 2.5em;
  } /* reduce height of buttons */
  #page-container {
    padding: 20px;
    min-height: 400px;
  } /* reduce height of pages in general */
  h2.section-title {
    padding: 2px 8px;
    margin-bottom: 2px;
  } /* reduce height of section headers */
  .section {
    padding-bottom: 20px;
  } /* reduce height of sections */
}
@media only screen and (min-height: 1080px) {
  #self-view {
    position: absolute;
    right: 2%;
    bottom: 230px;
    width: 250px;
    cursor: move;
  }
  .grid-container {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.25fr 3.5fr minmax(225px, 225px);
    z-index: 1000;
    overflow: hidden;
  }
}
/* Enlarge session control buttons on iPads in landscape mode */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .controlBar {
    min-height: 4em !important;
    line-height: 4em !important;
  }
  .controlBar input.controlBarButton {
    line-height: 5em !important;
    min-height: 5em !important;
    min-width: 5em !important;
  }
  .toolbarTopButton {
    height: 2em !important;
    width: 2em !important;
  }
}

/*************** MOBILE OPTIMIZATIONS *****************/
@viewport {
  zoom: 1;
  width: extend-to-zoom;
}

/***************** VOLUME SLIDER **********************/

input[type="range"] {
  /*removes default webkit styles*/
  -webkit-appearance: none;

  /*fix for FF unable to apply focus style bug */
  /* border: 1px #CCCCCC; */
  border: 1px red;

  /*required for proper track sizing in FF*/
  width: 100px;
  line-height: 50%;
  vertical-align: middle;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  /* background:#43ea43; */
  background: #626262;
  border: none;
  border-radius: 3px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 17px;
  width: 9px;
  border-radius: 25%;
  background: #ffffff;
  margin-top: -6px;
}
input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
}

input[type="range"]::-moz-range-track {
  /*width: 300px;*/
  height: 5px;
  background: #2bbf1e;
  border: none;
  border-radius: 3px;
}
input[type="range"]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}

/*hide the outline behind the border*/
input[type="range"]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

input[type="range"]::-ms-track {
  width: 300px;
  height: 5px;

  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;

  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;

  /*remove default tick marks*/
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: #e8e40d;
  border-radius: 10px;
}
input[type="range"]::-ms-fill-upper {
  background: red;
  border-radius: 10px;
}
input[type="range"]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #66cc33;
}
input[type="range"]:focus::-ms-fill-lower {
  background: #e8e40d;
}
input[type="range"]:focus::-ms-fill-upper {
  background: red;
}

#volumeIcon {
  content: "";
  display: inline-block;
  background-repeat: no-repeat !important;
  width: 26px !important;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  line-height: 50%;
  vertical-align: middle;
}

#collabCopy {
  cursor: pointer;
  border: none;
  width: 0.85em;
}
#patrolPanel {
  float: left;
  background-color: #3c3939;
  margin: 2%;
  padding: 1%;
  display: none;
  border-radius: 5px;
}

#targetSquareDiv {
  display: none;
  grid-area: 1 / 1 / 4 / 4;
}
#targetSquareImg {
  width: 10%;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#videoSelectedPositionIcon {
  /* indicator to represent user's selected point on video*/
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 949;
  pointer-events: none; /* ignore mouse events on this layer */
  display: none; /* not displayed until user click and hold on video */
}
/*******************************************************/