/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/


/* Table of Content
==================================================
	#Reset & Basics
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons
	#Tabs
	#Forms
	#Misc */


/* Color
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --theme-primary: rgba(0, 0, 0, 1);
  --theme-primary-hover:  rgba(4, 29, 45, 0.9);
  --theme-on-primary: rgba(255, 255, 255, 1);
  --login: rgba(178, 222, 249, 1);
  --background: #262626;
  --dark : rgba(4, 18, 36, 1);
  --light : rgba(249, 249, 250, 1);
  --wizard: rgba(0, 0, 0, 0.2);
  --menubg: rgba(245, 245, 245, 1);
  --menudarkbg: rgba(0, 0, 0, 0.14);
  --active-dark: rgba(0, 0, 0, 0.87);
  --regular-dark: rgba(0, 0, 0, 0.6);
  --inactive-dark: rgba(0, 0, 0, 0.36);
  --active-dark-hover: rgba(0, 0, 0, 0.8);
  --active-light: rgba(255, 255, 245, 87);
  --regular-light: rgba(255, 255, 245, 0.6);
  --inactive-light: rgba(255, 255, 245, 0.36);
  --border: rgba(0, 0, 0, 0.12);
  --border-active: rgba(0, 0, 0, 0.87);
  --button-hover: rgba(0, 0, 0, 0.06);
  --IGEMS: rgba(21, 101, 192, 1);
  --primary: rgba(255, 188, 0, 1);

  --part: rgba(35, 128, 93, 1);
  --part-border: rgba(0, 97, 50, 1);
  --toolpath: rgba(255, 0, 0, 1);
  --lead-in: rgba(0, 255, 0, 1);
  --lead-out: rgba(255, 0, 255, 1);
  --rapid: mediumblue;
  --cad-vector: rgba(4, 18, 36, 1);
  --cad-vector-filled-light: rgba(226, 225, 219, 1);
  --cad-vector-filled-dark: rgba(255, 190, 234, 0.16);
}
/* Transition
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	padding: 0;
	margin: 0;
	border-top-width: none;
	border-right-width: none;
	border-bottom-width: none;
	border-left-width: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }

.content {
    background: var(--menudarkbg); }

.command-list {
	padding:0 10px;
	display: inline-block;
    border-left:1px solid var(--border);
	margin:3px 0;
	color:#333;
	font-size:12px;}

.command-list li {
	display: inline-block;
	margin:0 2px 12px 2px;
    transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1); }

.command-list li:first-child {
	margin-left:0; }
.command-list li:last-child {
	margin-right:0; }

.command-list li:hover {
    background:var(--button-hover); }

.quickaccess {
    margin:0 0 0 12px;
    padding-top: 1px;
    display: inline-block;
    overflow: hidden; }

.quickaccess img {
    margin:4px 2px; }

.message {
    width:100%;
    margin:0;
    padding:6px 0;
    background: var(--primary);
    color: var(--dark) !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; }

.message p {
    display: inline-flex;
    align-items: center; }

.msg-btn {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: inherit;
    margin-left: 6px;
    vertical-align: middle; }

.msg-btn-outline {
    border: 1.5px solid var(--dark);
    color: var(--dark) !important;
    background: transparent; }

.msg-btn-filled {
    border: 1.5px solid var(--dark);
    background: var(--dark);
    color: var(--primary) !important; }

.msg-btn:hover {
    text-decoration: none; }

.closemessage {
    color: var(--dark) !important;
    font-size: 1.4em;
    position: absolute;
    right: 10px; }

.closemessage:hover {
    cursor: pointer; }
.crosshair {
    display: none; /* Set to display in our JS */
	pointer-events: none; /* Needed to prevent our cursor from becoming the unintended target of our mouse events */
	position: fixed; /* Required for setting inset values */
	height: 50px;
	width: 50px;
	transform: translate(-50%, -50%); /* Centers circle to cursor location */
	transform-origin: top left;
    mix-blend-mode: difference; }
.vertical-crosshair {
	position: absolute;
    left:50%;
	height: 50px;
	width: 1px;
	background: var(--active-light); }
.horizontal-crosshair {
	position: absolute;
    top:50%;
	height: 1px;
	width: 50px;
	background: var(--active-light); }
.normal-cursor {
    cursor: auto !important;
    display: block !imprtant; }
.light-drawing {
    display: grid;
    justify-content: center;
    align-content: center;
	position:fixed;
	width:100%;
    height:calc(100vh - 107px);
	bottom:0;
	left:0;
	background:var(--light);
	z-index:-10; }
.part {
    fill: var(--part); }
.part-border {
    stroke: var(--part-border); }
.toolpath {
    stroke: var(--toolpath);
    fill: none;
    stroke-miterlimit: 10; }
.lead-in {
    stroke: var(--lead-in);
    stroke-linecap: round;
    fill: none;
    stroke-miterlimit: 10; }
.lead-out {
    stroke: var(--lead-out);
    stroke-linecap: round;
    fill: none;
    stroke-miterlimit: 10; }
.rapid {
    stroke: var(--rapid);
    stroke-linecap: round;
    fill: none;
    stroke-miterlimit: 10; }
.cad-vector {
    stroke: var(--cad-vector);
    stroke-linecap: round;
    fill: var(--light);
    stroke-miterlimit: 10; }
.cad-vector-filled {
    stroke: var(--cad-vector);
    stroke-linecap: round;
    fill: var(--cad-vector-filled-light);
    stroke-miterlimit: 10; }
.dark-drawing .cad-vector {
	stroke: var(--active-light);
    stroke-linecap: round;
    fill: var(--dark);
    stroke-miterlimit: 10; }
.dark-drawing .cad-vector-filled {
	stroke: var(--active-light);
    stroke-linecap: round;
    fill: var(--cad-vector-filled-dark);
    stroke-miterlimit: 10; }
.part, .part-border, .toolpath, .lead-in, .lead-out, .rapid, .cad-vector, .cad-vector-filled {
    transition: var(--transition); }
.part:hover, .toolpath:hover, .lead-in:hover, .lead-out:hover, .rapid:hover, .cad-vector:hover {
    opacity: 0.9;
    stroke-width: 2px; }
.dark-drawing .part:hover, .dark-drawing .toolpath:hover, .dark-drawing .lead-in:hover, .dark-drawing .lead-out:hover, .dark-drawing .rapid:hover, .dark-drawing .cad-vector:hover, .dark-drawing.cad-vector:hover {
    opacity: 0.9;
    stroke-width: 2px; }
.cad-vector-filled:hover, .dark-drawing.cad-vector-filled:hover {
    stroke-width: 2px; }
footer {
	background:var(--menubg);
	width:100%;
	padding:6px 0;
	bottom:0;
	border-top:1px solid var(--border);
	position:fixed;
	color:#f2f2f2; }

.footermenu {
    float:left;
    margin-left:20px;
    margin-top:5px;}

.footermenu li {
    display:inline;
    padding-right:14px;
    padding-left:14px;
    color:var(--regular-dark) !important;
    border-left:1px solid var(--border); }

.footermenu li:first-child {
    border-left:none;
    padding-left:0; }

.footermenu li a {
    color:var(--active-dark) !important; }

li span {
    color:var(--inactive-dark) !important;
    margin-right:6px; }

span {
    color:var(--regular-dark) !important;
    margin-right:6px; }

.coordinates {
    margin-right:60px;
    margin-top:7px;
    float:right;
    color:var(--regular-dark) !important; }

.coordinatey {
    margin-left:6px; }

img {
	cursor:pointer; }

footer h3 {
	color:#fff !important;}

::-moz-selection { 
	background: #5af; color: #fff; text-shadow: none; }

::selection { 
	background: #5af; color: #fff; text-shadow: none; }

.details h2 {
	cursor:pointer; }

/* #Basic Styles
================================================== */
body {
	font-family: "Segoeui", "Segoeui UI", "Arial", sans-serif;
	font-weight:300;
	margin: 0;
	padding: 0;
	color: #333;
	font-size:90%;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	overflow-x:hidden !important; }

/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6{
	color:#333333; }
	
h1 a, h3 a, h4 a, h5 a {
	text-decoration: none; }

h1 {
	font-size: 24px;
	line-height:24px;
	margin-bottom:18px; }

h2 {
	font-size: 20px;
	line-height:26px;
	margin-top:10px;
	padding-bottom:10px; }

h3 {
	font-size: 15px;
	line-height:20px;
	margin-bottom:10px; }

h4 {
	font-weight:300;
	font-size: 18px;
	line-height:24px;
	margin:0; }

h5 { 
	font-size: 17px;
	line-height: 24px;
	margin-top: 8px; }
	
p {
	font-size: 16px;
	line-height:20px;
	font-weight:300; }

/* #Links
================================================== */
a:link {
	color:inherit;
	text-decoration: none; }

a:visited {
	color:inherit;
	text-decoration: none; }

a:hover, a:active, a:focus {
	color:#inherit;
	text-decoration: underline; }

/* #Lists
================================================== */
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none inside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 1.4; margin-bottom: 12px; font-weight: 300; }
	ul.large li { line-height: 1.5;}
	li p { line-height: 1.4;}
	li	{ list-style: none;}

/* #Tabs (activate in tabs.js)
================================================== */
	ul.tabs {
		display: block;
		margin: 0;
        height:33px;
		padding: 0;
		border-bottom: 1px solid var(--border);
		background:var(--menubg);
        border-collapse:collapse; }
	ul.tabs li {
		display: block;
		width: auto;
		padding: 0;
		float: left;
		margin-bottom: 0;
		border-left: 1px solid var(--border);}
	ul.tabs li a {
		display: block;
		text-decoration: none;
		width: auto;
        color:var(--inactive-dark);
        font-weight: bold;
		height: 33px;
		padding: 0px 20px;
		line-height: 33px;
		border-width: 1px 1px 0 0;
        border-color: var(--border);
		margin: 0;
		font-size: 14px;
        transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1); }
	ul.tabs li a.active {
		height: 34px;
		position: relative;
		color: var(--active-dark);
        border-color:var(--border);
		border-bottom:none;
		background:var(--menubg); }
    ul.tabs li a:hover {
		background:var(--menubg);
        color: var(--regular-dark); }
    ul.tabs li:first-child a.active {
		margin-left: 0; }
	ul.tabs li:first-child a {
        border-width: 1px 1px 0 1px; }

	ul.tabs-content { margin: 0; display: block; padding-top:4px; border-bottom:1px solid var(--border); background:var(--menubg);}
	ul.tabs-content p { line-height:0; margin:0; padding:0; font-size:12px; text-align:center; color:var(--regular-dark);}
	ul.tabs-content > li { display:none; }
	ul.tabs-content > li.active { display: block; padding:4px 0;margin:0; }

.right {
    text-align: right;
    float: right; }
.right li {
    display: inline-block; }
.right span {
    display: inline-block;
    margin:8px 20px; }

	/* Clearfixing tabs for beautiful stacking */
	ul.tabs:before,
	ul.tabs:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	ul.tabs:after {
	  clear: both; }
	ul.tabs {
	  zoom: 1; }

/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
  transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  top: 30px;
  left: 0;
  margin:0 0 0 -3px;
  padding: 7px;
  max-width: 300px;
  white-space: nowrap;
  background-color: var(--active-dark);
  color: var(--active-light);
  content: attr(data-tooltip);
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}


/*----------------------------------------
Wizard*/

#wizard-container {
  width: 400px;
  background-color: var(--menubg);
  /* Center vertically and horizontally */
  position: absolute;
  padding:30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: default;
}
#wizard-container a {
    cursor: pointer; }