@import url('css/theme.css');
@import url('css/menu.css');
@import url('css/right-slideout.css');
@import url('css/fonts.css');

/* MOVING TO THEME - NEED TO CONVERT HEX COLORS TO VAR
Define primary colors 
:root {
   --secondary-blue: #416db0;
   --secondary-blue: #4D6A92;
   --alternate-blue: #8c99a6;
   --light-blue:  #d4d9de;
   --primary-green: #708090;
   --secondary-green: #557D5A;
   --accent-1: #FF7F50;
   --accent-2: #FFD700;
   --text-color: #2c333a;
   --background-color: #F5F5F5;
   --border-color: #D4D4D4;
   --shadow-color: #A9A9A9;
}   
*/
html, body {
   margin: 0px;             /* not inherited */
   border: 0px none black;  /* not inherited */
   padding: 0px;            /* not inherited */
  

   /* ensure that the document uses the whole width and height of the browser */
   min-height: 100%;
   height: 100%;
   min-width: 100%;
   width: 100%;

   /* viewer/canvas is full screen so when window
      is resized all remains intact, but we make sure no scrollbar appears */
   overflow: hidden;
}

.verticalToolbar {
   position: absolute;
   top: 48px;
   left: 0;
   width: 50px;
   height: 100%;
   background: #f8f8f8;
   border-right: 1px solid #ccc;
   z-index: 10;
}
.form-container {
   position: absolute;
   top: 100px;
   left: 200px;
   width: 200px;
   height: 200px;
   background: #f8f8f8;
   z-index: 5;
   padding: 1%;
}

.verticalToolbar button {
   width: 50px;
   height: 50px;
   background: #f8f8f8;
   border: 0;
   border-bottom: 1px solid #ccc;
   color: #666;
   font-size: 1.5em;
   cursor: pointer;
   margin: 0;
   padding: 0;
}

.verticalToolbar button:hover {
   background: #e2e2e2;
}

.verticalToolbar button img {
   position: relative;
   width: 45px;
   height: 45px;
   margin: 0;
   top: 2px;
}

.form-container {
   border: 1px solid #000;
   border-radius: 5px;
   padding: 10px;
}
.form-container button {
   margin-top: 10px;
}

.hidden {
   display: none;
}


noscript{
   text-align: center;
}

#jscad {
   width: 100vw;
   height: 100vh;
   position: relative;
   top: 0;
   left: 0;
   margin: 0;
}

/* UNUSED? */
canvas {
   margin: 0px;            /* not inherited */
   border: 0px none black; /* not inherited */
   padding: 0px;           /* not inherited */

   /* ensure that the canvas uses the whole width and height of the document */
   height: 100%;
   width: 100%;

   cursor: move;        /* show that we can change orientation of view */
}
 
/* UNUSED */
#busy {
   vertical-align: middle;
}

/* UNUSED */
#options {
   width: auto;
   z-index: 12;
   position: absolute;
   display: none;
   background: #f8e8ff;
   border: solid 1px #888;
   padding: 0.5em;
   border-radius: 5px;
   box-shadow: 0px 0px 10px #849;
   font-size: 0.8em;
}

/* UNUSED arrows */
.arrow {
   width: 0px;
   height: 0px;
   border: 50px solid transparent;
   position: absolute;
   z-index: 100;
   margin-left: 30px;
   margin-top: 30px;
}
.arrow-left {
   border-right-color: #666;
   margin-left: -90px;
}
.arrow-right {
   border-left-color: #666;
   margin-left: 150px;
}
.arrow-top {
   border-bottom-color: #666;
   margin-top: -90px;
}
.arrow-bottom {
   border-top-color: #666;
   margin-top: 150px;
}
.shift-vertical .arrow-left,
.shift-vertical .arrow-right,
.shift-horizontal .arrow-top,
.shift-horizontal .arrow-bottom {
   display: none;
}