/**
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@font-face {
  font-family: "UCIViewer-FoundationIcons";
  src:  url("../fonts/foundation-icons/foundation-icons.woff"); /* IE9 Compat Modes */
  src:  url("../fonts/foundation-icons/foundation-icons.otf") format("opentype"), /* Open Type Font */
        url("../fonts/foundation-icons/foundation-icons.svg") format("svg"), /* Legacy iOS */
        url("../fonts/foundation-icons/foundation-icons.ttf") format("truetype"), /* Safari, Android, iOS */
        url("../fonts/foundation-icons/foundation-icons.woff") format("woff"), /* Modern Browsers */
}

@font-face {
  font-family: "UCIViewer-MaterialIcons";
  src: url("../fonts/material-icons/MaterialIcons-Regular.woff"); 
}

th, td {
  padding: 0px;
}

/* HTML and body..............................................................*/

html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif; 
  overflow: hidden;
  background-color: rgb(149, 149, 149);
  width: 100%;
  height: 100%;
  touch-action: none;
}

#mouse-tracker {
  color: blue;
}

/* The standalone Canvas and its enclosing DIV................................*/

#canvas-only-div {
  position: relative;
  left: 0px;
  top: 0px;
  color: black;
  background-color: rgb(149, 149, 149);
  width: 100%;
  height: 100%;
}

#uci-canvas-standalone {
  position: fixed;
  left: 0px;
  top: 0px;
  color: white;
  background-color: rgb(149, 149, 149);
  transition: opacity 1.0s;
  opacity: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* The drawer on the left side of the app.....................................*/

#uci-drawer {
  background-color: rgb(77, 82, 85);
  position: absolute;
  top: 110px;
  width: 100%;
  overflow-x: hidden;
}

/* The container contains splash, spinner, canvas, and footer................*/

.container {
  position: relative;
  padding: 15px;
  color: black;
}

.copyright {
  color: rgb(57,62,65);
}

.auth-button {
  color: rgb(50, 50, 50);
  cursor: pointer;
  background-color: rgb(249, 230, 255);
  padding: 10px;
  margin-left: 70px;
  font-size: 18px;
}

#auth-user {
  font-size: 18px;
  color: rgb(50, 50, 50);
  cursor: pointer;
  background-color: rgb(249, 230, 255);
}

#auth-pwd {
  font-size: 18px;
  color: rgb(50, 50, 50);
  cursor: pointer;
  background-color: rgb(249, 230, 255);
}

#auth-table {
  padding-top: 10px;
  padding-left: 55px;
  text-align: center;
}

#authentication {
  background-color: white;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  color: rgb(50, 50, 50);
  display: flex;
  font-family: 'Roboto', 'Helvetica', sans-serif; 
  font-size: 18px;
  justify-content: center;
  opacity: 0;
  position: fixed;
  text-align: center;
  top: 10px !important;
  transition: opacity 1.0s;
  visibility: hidden;
  z-index: 1000000;
  padding: 10px !important;
  border-radius: 2px;
}

#pin-table {
  border-collapse: collapse;
  width: 95%;
  height: 95%;
}

#auth-minus-button {
  font-size: 95%;
}

.pin-cell {
  padding: 5px;
}

#container #instructions-content {
  padding-left: 20px;
  padding-right: 20px;
}

#container #instructions-content-standalone {
  padding-left: 20px;
  padding-right: 20px;
}



/* The in-app Canvas for drawing UCIs.........................................*/

#uci-canvas {
  position: absolute;
  transition: opacity .5s;
  opacity: 0;
  z-index: 0;
  left: 0px;
  top: 0px;
  touch-action: none;
}

.video-preview {
  position: relative;
  visibility: hidden;
}

.html-media {
  position: absolute;
  z-index: 999;
  left: 0px;
  top: 0px;
}

/* The toolbar content........................................................*/

#uci-toolbar-content {
  color: teal;
  transition: opacity .5s;
  opacity: 1;
}

.tall {
  height: 3em;
}

/* The in-app spinner.........................................................*/

.spinner {
  margin-top: 35px;
  opacity: 0;
  transition: opacity .5s;
  font-size: 1.5em;
  color: white;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: default;
}

/* Previous designs menu......................................................*/

.previous-designs-title {
  color: teal;
  padding-left: 10px;
}

/* Stroked text of different colors..........................................*/

.stroketext-navy {
  text-shadow:
  -1px -1px 0 rgba(0,0,128,0.5),
  1px -1px 0 rgba(0,0,128,0.5),
  -1px 1px 0 rgba(0,0,128,0.5),
  1px 1px 0 rgba(0,0,128,0.5);
}

.stroketext-blue {
  text-shadow:
  -1px -1px 0 rgba(0,0,255,0.5),
  1px -1px 0 rgba(0,0,255,0.5),
  -1px 1px 0 rgba(0,0,255,0.5),
  1px 1px 0 rgba(0,0,255,0.5);
}

.stroketext-teal {
  text-shadow:
  -1px -1px 0 rgba(0,128,128,0.5),
  1px -1px 0 rgba(0,128,128,0.5),
  -1px 1px 0 rgba(0,128,128,0.5),
  1px 1px 0 rgba(0,128,128,0.5);
}

.stroketext-white {
  text-shadow:
  -1px -1px 0 rgba(255,255,255,0.5),
  1px -1px 0 rgba(255,255,255,0.5),
  -1px 1px 0 rgba(255,255,255,0.5),
  1px 1px 0 rgba(255,255,255,0.5);
}

/**
 * The QSys button!
 */

.qsys-button {
  margin-left: 15px;

  width: 46px;
  height: 46px;
  border-radius: 23px;
  border: 1px solid rgb(77,82,85);
}

.glow {
  box-shadow: 0 0 2px white,
              0 0 5px white,
              0 0 6px rgb(150,150,150),
              0 0 7px rgb(75,75,75),
              0 0 8px rgb(25,25,25),
              0 0 15px rgba(0,0,148,0.5),
              0 0 18px rgba(155,155,255,0.4),
              0 0 20px rgba(255,255,255,0.3);
}

/* Material Design Lite.......................................................*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
}

/* Modal Content */
#modal-content {
  background-color: #fefefe;
}

.demo-drawer {
  border: none;
}

.mdl-layout__header {
  color: rgba(0, 0, 0, 0.54);
  text-shadow:
  -1px -1px 0 rgb(245,245,245),
  1px -1px 0 rgb(245,245,245),
  -1px 1px 0 rgb(245,245,245),
  1px 1px 0 rgb(245,245,245);
  
  background-color: rgba(0,0,0,0.65);
}

.mdl-layout__drawer {
  border-right: rgb(77,82,85) !important;
  background-color: rgb(77,82,85) !important;
}

.mdl-layout__header .mdl-layout__drawer-button {
  color: rgba(0, 0, 0, 0.54);
}

.mdl-navigation__link.selected {
  color: white !important;

  background-color: #2E95E4;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 100%;
}

.mdl-textfield {
  padding: 0;
  margin-top: 41px;
}

.mdl-textfield .mdl-textfield__expandable-holder {
  bottom: 19px;
}

/* iOS Safari specific workaround ............................................*/
.demo-drawer .mdl-menu__container {
  z-index: -1;
}

.demo-drawer .demo-navigation {
  padding-left: 20px;
  z-index: -2;
}
/* END iOS Safari specific workaround ........................................*/

/* Footer.....................................................................*/

#footer {
  border-top: 1px solid rgba(0,0,0,0.65);
  background-color: white;
  z-index: 5;
  bottom: 0px;
  width: 100%;
  padding: 5px 5px;
  position: relative;
}

.footer-content {
  color: black;
  font-size: 11px;
}

#qsys-span {
  color: #FFFFE0;
  margin-left: 15px;
  font-size: 15px;
}

/* Splash.....................................................................*/

.splash {
  opacity: 0;
  transition: opacity 0.5s;

  font-size: 1.5em;
  text-align: center;
  margin-top: 10px;
}

.splash:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mdl-menu .mdl-menu__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.demo-drawer-header {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  height: 131px;
  background-color: rgb(77, 82, 85);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 236px;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: hidden;
  user-select: none;
}

.demo-drawer-header hr {
  margin-top: 30px;
  margin-left: 4px;
  box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}

.demo-avatar-dropdown {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.demo-navigation {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.mdl-navigation__link {
  color: rgba(255,255,255,0.7) !important;
  height: 20px;
  width: 200px;
  user-select: none;
  cursor: pointer;
}

.demo-navigation .mdl-navigation__link:hover {
  cursor: pointer;
  color: white !important;
}

.demo-navigation .material-icons {
  width: 30px;
  height: 20px;
  margin-right: 15px;
  border-radius: 10px;
  border: thin solid teal;
  display: none;
}

.pin-button-light-wide {
  width: 180px;
  height: 70px;
  cursor: pointer;
  font-size: 24px;
  border: none;
}

.pin-button-light {
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-size: 150%;
  border: none;
}

.pin-button-dark-tall {
  height: 70px;
  width: 140px;
  cursor: pointer;
  font-size: 24px;
}

.pin-button-dark {
  width: 85px;
  height: 70px;
  cursor: pointer;
  font-size: 24px;
}

.pin-header {
  font-size: 100%;
  padding-bottom: 5%;
}

/* Flash......................................................................*/

.flash-border {
  -webkit-animation-name: flash-animation;
  -webkit-animation-duration: 1.0s;

  animation-name: flash-animation;
  animation-duration: 1.0s;
}

@-webkit-keyframes flash-animation {  
  from { border: 1px solid yellow; }
  to   { border: 1px solid rgba(0,0,128,0.4); }
}

@keyframes flash-animation {  
  from { border: 1px solid gold; }
  to   { border: 1px solid rgba(0,0,128,0.4); }
}