@CHARSET "UTF-8";

@font-face {
    font-family: 'PT Sans Regular';
    src: url('../fonts/PT_Sans/PT_Sans-Web-Regular.ttf');
}

@font-face {
    font-family: 'PT Sans Bold';
    src: url('../fonts/PT_Sans/PT_Sans-Web-Bold.ttf');
}

@font-face {
    font-family: 'PT Sans Italic';
    src: url('../fonts/PT_Sans/PT_Sans-Web-Italic.ttf');
}

@font-face {
    font-family: 'PT Sans BoldItalic';
    src: url('../fonts/PT_Sans/PT_Sans-Web-BoldItalic.ttf');
}

@font-face {
    font-family: 'RobotoMono-Light';
    src: url('../fonts/Roboto_Mono/RobotoMono-Light.ttf');
}

@font-face {
    font-family: 'RobotoMono-Thin';
    src: url('../fonts/Roboto_Mono/RobotoMono-Thin.ttf');
}

@font-face {
    font-family: 'RobotoMono-Bold';
    src: url('../fonts/Roboto_Mono/RobotoMono-Bold.ttf');
}

html {
  font-family: 'PT Sans Regular', sans-serif;
}

body {
  font-family: 'PT Sans Regular', sans-serif;
}

.dropzone {
	  border-style: dotted;
}

.bg-none {
	background-color: transparent;
}

.border-none {
	border-color: transparent;
}

.bg-cyan {
	background-color: rgba(0,158,224,0.5);
}

.bg-magenta {
	background-color: rgba(226,0,122,0.5);
}

.bg-yellow {
	background-color: rgba(255,237,0,0.5);
}

.bg-black {
	background-color: rgba(0,0,0,0.5);
}

.bg-red {
	background-color: rgba(255,0,0,0.5);
}

.bg-green {
	background-color: rgba(0,255,0,0.5);
}

.bg-blue {
	background-color: rgba(0,0,255,0.5);
}

.bg-cmy {
	background-color: rgba(29,45,40,0.5);
}

.bg-paper {
	background-color: rgba(255,255,255,0.5);
}

.bg-grey {
	background-color: rgba(232,232,232,0.5);
}

.bg-cyan-100 {
	background-color: rgba(0,158,224,1.0);
}

.bg-magenta-100 {
	background-color: rgba(226,0,122,1.0);
}

.bg-yellow-100 {
	background-color: rgba(255,237,0,1.0);
}

.bg-black-100 {
	background-color: rgba(0,0,0,1.0);
	color: white;
}

.bg-red-100 {
	background-color: rgba(255,0,0,1.0);
}

.bg-green-100 {
	background-color: rgba(0,255,0,1.0);
}

.bg-blue-100 {
	background-color: rgba(0,0,255,1.0);
}

.bg-cmy-100 {
	background-color: rgba(29,45,40,1.0);
}

.bg-paper-100 {
	background-color: rgba(255,255,255,1.0);
}


.cyan-100 {
	color: rgba(0,158,224,1.0);
	background-color: rgba(0,0,0,1.0);
	padding-right: 3px;
}

.magenta-100 {
	color: rgba(226,0,122,1.0);
	background-color: rgba(0,0,0,1.0);
	padding-right: 3px;
}

.yellow-100 {
	color: rgba(255,237,0,1.0);
	background-color: rgba(0,0,0,1.0);
	padding-right: 3px;
}

.black-100 {
	color: white;
	background-color: rgba(0,0,0,1.0);
	padding-right: 3px;
}

.black-50 {
	color: rgba(255,255,255,0.5);
	background-color: rgba(0,0,0,1.0);
	padding-right: 3px;
}

.lh-1 {
	line-height: 1;
}

.mh-24 {
	max-height: 24px;
}

.text-black {
	color: rgba(0,0,0,1.0) !important;
}

.text-blue {
	color: rgba(0,0,255,1.0);
}

canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    right: 0;
    background-color: rgb(225,225,225);
    overflow-x: hidden;
    transition: 0.1s;
    transition-timing-function: ease-in-out;
    padding-top: 40px;
    opacity: 0.95;
}

.sidenav a {
    padding: 5px 5px 5px 5px;
    text-decoration: none;
    /*color: #818181;*/
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    left: 0px;
    margin-left: 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
}
.hilite {
	background-color: rgba(255,255,0,1.0);
	color: black;
	border-radius: 5px;
	display: inline-block;
}

.login-field {
	width: 225px;
	background-color: rgba(146,146,146,1.0);
	border-radius: 0px;
	border-color: rgba(146,146,146,1.0);
	color: rgba(255,255,255,1.0);
}

.login-field::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    font-style: italic;
    opacity: 1; /* Firefox */
}
.login-field:focus { 
    background-color: rgba(146,146,146,0.6);
	color: rgba(255,255,255,0.6);
}

.no-border {
	border-style: none;
}

.login-button {
	background-color: rgba(146,146,146,1.0);
	color: rgba(255,255,255,1.0);
	border-radius: 0px;
	font-size: 24pt;
	padding: 0px;
}

.bg-dark {
  background-color: #393939 !important;
}

.bg-lighter-dark {
  background-color: #424242 !important;
}

.bg-lighter-dark-50 {
  background-color: rgba(66,66,66,0.5) !important;
}

.bg-lighter-dark-10 {
  background-color: transparent !important; /*rgba(66,66,66,0.1) !important;*/
}

.bg-light {
  background-color: white !important;
}


.mpc-thumbnail {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
    background-color:#424242;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
}
.mpc-thumbnail img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}
.mpc-thumbnail p {  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    max-width: 100%; 
    width: auto;
    margin: auto;
    text-align: center;
    padding-bottom:2px;
}

.mpc-thumbnail:hover {  
    background-color:rgba(0,0,0,0.8);
}

.no-border {
	border-style: none !important;
}

.font-weight-regular {
	font-weight: 400 !important;
}

.left-border-black {
	border-left-style: solid !important;
	border-color: black;
	border-width: 1px;
}

.left-border-black-dotted {
	border-left-style: solid !important;
	border-color: black;
	border-width: 3px;
}

.bw-1 {
	border-width: 1px;
}

.bw-2 {
	border-width: 2px;
}

.bw-3 {
	border-width: 3px;
}

.right-border-black {
	border-right-style: solid !important;
	border-color: black;
	border-width: 1px;
}

.mpc-navigation {
	position: fixed;
	top: 80px;
	right: 0;
	width: 256px;
	padding-right: 20px;
	z-index: 1000;
}

.mpc-navigation-active-tab {
	position: fixed;
	top: 40px;
	left: 13px;
	width: 256px;
	z-index: 2000;
}

.mpc-navigation-li {
	text-align: right;
	height: 30px;
	cursor: pointer;
}

.mpc-navigation-text {
	vertical-align: middle;
}

.mpc-navigation-plus {
	vertical-align: middle;
	font-size: 36pt;
	font-family: 'RobotoMono-Thin';
}

.mpc-navigation-plus.active{
	font-family: 'RobotoMono-Bold';
}

.mpc-navigation-text.active {
	font-family: 'PT Sans Bold';
}

.mpc-navigation-li-placeholder {
	text-align: right;
	height: 30px;
	margin-top: -8px;
}

.mpc-navigation-piple {
	vertical-align: middle;
	font-size: 36pt;
	padding-right:0px;
	font-family: 'RobotoMono-Thin';
}

.w-30 {
	width: 80px;
	min-width: 80px;
	max-width: 80px;
}

.w-80 {
	width: 80px;
	min-width: 80px;
	max-width: 80px;
}

.w-90 {
	width: 90px;
	min-width: 90px;
	max-width: 90px;
}

.w-100px {
	width: 100px;
	min-width: 100px;
	max-width: 100px;
}

.w-60 {
	width: 60px;
	min-width: 60px;
	max-width: 60px;
}

.w-20 {
	width: 20px;
	min-width: 20px;
	max-width: 20px;
}

.w-40 {
	width: 40px;
	min-width: 40px;
	max-width: 40px;
}

.w-10 {
	width: 10px;
	min-width: 10px;
	max-width: 10px;
}

.w-5 {
	width: 5px;
	min-width: 5px;
	max-width: 5px;
}

.h-30 {
	height: 30px;
	min-height: 30px;
	max-height: 30px;
}

.h-35 {
	height: 35px;
	min-height: 35px;
	max-height: 35px;
}

.h-20 {
	height: 20px;
	min-height: 20px;
	max-height: 20px;
}

.h-10 {
	height: 10px;
	min-height: 10px;
	max-height: 10px;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto !important;
  /*line-height: 30px;*/
}

body {
  margin-bottom: 30px; /* Margin bottom by footer height */
}

.footer span.value {
	background-color: black;
	border-radius: 5px;
	padding-left: 2px !important;
	padding-right: 2px !important;
	margin-left: 1px;
}
.form-control.bg-lighter-dark{
	border-color:#5e6164;
}


.btn-dark {
  color: #fff;
  background-color: #424242;
  border-color: #5e6164;
}

.btn-lighter-dark-50 {
  color: #fff;
  background-color: rgba(66,66,66,0.5) !important;
  border-color: #5e6164;
}

.btn-dark:hover {
  color: #fff;
  background-color: #333333;
  border-color: #5e6164;
}

.btn-dark:focus, .btn-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-dark.disabled, .btn-dark:disabled {
  color: #fff;
  background-color: #262626;
  border-color: #5e6164;
}

.table th, .table td {
	border-top: 0.5px solid #d5d7da;
}

.pointer {
	cursor: pointer;
}

.text-red {
	color: rgba(255,0,0,1.0);
}

.text-yellow {
	color: rgba(255,255,0,1.0);
}

.text-green {
	color: rgba(0,255,0,1.0);
}

.text-magenta {
	color: rgba(226,0,122,1.0);
}

.text-cyan {
	color: rgba(0,158,224,1.0);
}

.text-lighter-dark {
	color: #424242;
}
.text-grey {
	color: rgba(146,146,146,1.0);
}
.bg-grey-146 {
	background-color: rgba(146,146,146,1.0);
}
.text-18pt {
	font-size: 18pt;
}
tr.active {
	background-color: rgba(0,0,0,0.5);
}

tbody.small {
	font-size: 10pt;
	line-height: 10px;
}

.nav-link.active {
	background-color: rgba(0,0,0,0.5) !important;
}

.table-hover tbody tr:hover {
	background-color: rgba(0,0,0,0.5);
}

.nav-grey {
	background-color: rgba(129,129,129,1.0);
}

.mpc-tab {
	border-radius: 0px !important;
	color: #393939 !important;
	background-color: rgba(255,255,255,1.0);
	border-color: rgba(255,255,255,1.0);
}

.mpc-tab.active {
	color: white !important;
	background-color: #393939 !important;
	border-color: #393939 !important;
}

.mpc-nav-item {
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 0px;
}

.mpc-nav-tabs {
	margin-left: 10px;
	margin-top: 7px;
	border-style: none;
}

.mpc-nav-link.active {
	background-color: rgba(0,0,0,0) !important;
	text-decoration: underline;
	color: white;
} 

.mpc-nav-link {
	background-color: rgba(0,0,0,0) !important;
	color: white;
} 

.mpc-nav-link:hover {
	background-color: rgba(0,0,0,0) !important;
	color: white;
} 

.input-grey {
	background-color: rgba(213,213,213,1.0);
}

.glyphicons.mpc-p-0:before {
	padding: 0px !important;
	line-height: 4px !important;
	margin-bottom:5px !important;
}

.mpc-body {
	padding-bottom: 30px;
}

td.warning {
	background-image: url('../../images/glyphicons-805-caution-XS.png');
	background-repeat: no-repeat;
	background-position: 98% center;
}

td.stop {
	background-image: url('../../images/glyphicons-208-remove-XS.png');
	background-repeat: no-repeat;
	background-position: 98% center;
}

td.ok {
	background-image: url('../../images/glyphicons-207-ok-XS.png');
	background-repeat: no-repeat;
	background-position: 98% center;
}

td.value {
	padding-right: 30px;
}

td.bg-center {
	background-position: center center;
}

span.sample {
	background-image: url('../../images/glyphicons-sample-XS.png');
	background-repeat: no-repeat;
	background-position: left center;
	padding-right:8px;
}

span.reference {
	background-image: url('../../images/glyphicons-reference-XS.png');
	background-repeat: no-repeat;
	background-position: left center;
	padding-right:8px;
}

span.sample.light {
	background-image: url('../../images/glyphicons-sample-light-XS.png');
}

span.reference.light {
	background-image: url('../../images/glyphicons-reference-light-XS.png');
}

td.top-side {
	background-image: url('../../images/glyphicons-802-W-S-top-side.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px auto;
}

td.bottom-side {
	background-image: url('../../images/glyphicons-801-W-S-bottom-side.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px auto;
}

td.each-side {
	background-image: url('../../images/glyphicons-803-W-S-each-side.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px auto;
}

.font-14 {
	font-size: 14px;
}

iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

smaller {
  font-size: smaller;
}

.rotate-90 {
	transform: rotate(90deg);
}

.align-10 {
	vertical-align: 10%;
}

.colour-plate {
	width: 32px;
	padding: 0px;
	max-height: 32px;
}

.glyphicons span {
	font-family: 'PT Sans Regular', sans-serif;
}