:root{
	--my-orange:         #ff8c00;
	--my-blue:           #2779AA;
	--normal-background: #6E91B9;
	--title-background:  #E6F2FD;
	}

@font-face{
	font-family: ms3_logo_font;
	src:         url(/lib/fonts/ms3_logo_r.ttf);
	}

.ms3_b, .ms3_o{
	font-size:   clamp(16px, 3vw, 20pt);
	font-family: ms3_logo_font, Arial, Helvetica, sans-serif;
	text-shadow: -2px 0 0px rgba(238, 243, 250, 1), 2px 0 0px rgba(238, 243, 250, 1), 0 -2px 0px rgba(238, 243, 250, 1), 0 2px 0px rgba(238, 243, 250, 1), 2px 3px 8px rgba(0, 0, 0, 0.7);
	display:     inline;
	}

.ms3_o{
	color: var(--my-orange);
	}

.ms3_b{
	color: #0096FF;
	}

body{
	font-family:      Arial, Helvetica, sans-serif;
	background-color: #EEF3FA;

	}

.work_layer, .div_class{
	background-color: whitesmoke;
	border:           1px;
	border-radius:    5px;
	text-align:       left;
	padding:          3px;
	border-color:     silver;
	border-style:     ridge;
	border-width:     1px;
	}

pre{
	margin:    auto;
	font-size: 1.2em;
	}

button{
	-moz-border-radius:    6px;
	-webkit-border-radius: 6px;
	border-radius:         6px;
	font-family:           arial;
	font-size:             12px;
	padding:               4px 16px;
	margin:                3px 3px;
	text-decoration:       none;
	text-shadow:           1px 1px 0px #ffffff;
	cursor:                pointer;
	border:                1px solid #AED0EA;
	background:            #D7EBF9 url(images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x;
	font-weight:           bold;
	color:                 #2779AA;
	}

button:hover{
	background: #D7EBF9 url(images/ui-bg_glass_100_e4f1fb_1x400.png) 50% 50% repeat-x;
	}

button:active{
	position: relative;
	top:      1px;
	/*http://www.cssbuttongenerator.com/*/
	}

.error, .warning, .notice{
	border:              2px solid;
	background-repeat:   no-repeat;
	background-position: 10px center;
	font-size:           13px;
	font-weight:         bold;
	position:            absolute;
	padding:             12px 15px 5px 35px;
	margin:              -15px 60px 0px 0px;
	top:                 7px;
	left:                270px;
	max-width:           350px;
	background-position: 10px 10px;
	border-radius:       0px 0px 10px 10px;
	z-index:             3;
	}

.error{
	color:            #D8000C;
	background-color: var(--my-orange);
	background-image: url('../images/icons/error.png');
	border-color:     #D8000C;
	}

.warning{
	color:            var(--my-orange);
	background-color: whitesmoke;
	background-image: url('../images/icons/warning.png');
	border-color:     var(--my-orange);
	}

.notice{
	color:            var(--normal-background);
	background-color: whitesmoke;
	background-image: url('../images/icons/info.png');
	border-color:     var(--normal-background);
	}

.google_chart_tooltip{
	border:           1px solid;
	position:         absolute;
	padding:          5px 5px 5px 5px;
	font-size:        13px;
	color:            var(--normal-background);
	background-color: whitesmoke;
	border-color:     var(--normal-background);
	border-radius:    10px;
	z-index:          3;
	width:            150px;
	}

table{
	font-size:       9pt;
	border-style:    none;
	margin:          2px 2px 2px 2px;
	border-collapse: collapse;
	border:          0px solid transparent;
	}

thead tr th{
	top: 0;
	}

th{
	position:                sticky;
	white-space:             nowrap;
	/*	font-variant:            small-caps;*/
	font-size:               12px;
	text-align:              center;
	vertical-align:          middle;
	direction:               inherit;
	padding:                 6px 15px;
	border:                  1px solid #AED0EA;
	background-color:        var(--title-background);
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	/*	background-size:         cover;*/
	font-weight:             bold;
	color:                   #2779AA;
	}

td{
	border:  1px solid #d3d3d3;
	padding: 3px 5px 3px 5px;
	}

td .dl{
	text-decoration: line-through;
	color:           darkgrey;
	display:         inline;
	}

td .nw{
	font-style: italic;
	color:      blue;
	display:    inline;
	}

td .attr{
	font-weight:     bold;
	text-decoration: underline;
	display:         block;
	}

/* used for <tr> / <td> in table that is for displaying data (not structure) */
.grid{
	border:                  1px solid #CCCCCC;
	background:              #F6F6F6 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% 40% repeat-x;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
	}

.grid_highlight{
	border:                  1px solid #FBCB09;
	background:              #FDF5CE url(images/ui-bg_highlight-soft_25_ffef8f_1x100.png) 50% 50% repeat-x;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
	}

H1, H2, H3, H4{
	color:   var(--my-orange);
	padding: 5px;
	margin:  5px;
	}

H1{
	font-size: 16px;
	}

H2{
	font-size: 15px;
	}

H3{
	font-size: 14px;
	}

H4{
	font-size: 13px;
	}

hr{
	background-color: #d3d3d3;
	border:           0;
	height:           1px;
	margin:           10px -10px;
	}

fieldset{
	border: 1px solid #d3d3d3;
	color:  DarkGray;
	}

img{
	border: none;
	}

.Fail{
	background-color: orange;
	}

.Pass{
	background-color: #BFE4FF;
	}

.Fixed{
	background-color: white;
	color:            var(--my-orange);
	}

.not_in_route{
	background-color: #ffffff;
	color:            #d3d3d3;
	}

.scrap{
	background-color: red;
	color:            #ffffff;
	font-weight:      bold;
	}

.Skip{
	color:       darkblue;
	font-weight: bold;
	}

.Err{
	background-color: #d3d3d3;
	}

/****************************************************************************************************/
/******************************************** WIP REPORT STYLE **************************************/
/****************************************************************************************************/
.wip_pass{
	background-color: #EBF4F5;
	}

.wip_fail{
	color: red;
	}

.wip_total_pass{
	background-color: #E1F3F5;
	}

.wip_total_fail{
	background-color: #EDEDED;
	color:            red;
	}

/****************************************************************************************************/
/*************************************** END OF WIP REPORT STYLE ************************************/
/****************************************************************************************************/

/****************************************************************************************************/
/************************************************* LINKS ********************************************/
/****************************************************************************************************/

/*all links without underline or different color*/
a{
	text-decoration: none;
	color:           inherit;
	font-weight:     inherit;
	}

/*displays an SN with a link to SSV page*/
#ssv_link{
	text-decoration: none;
	color:           inherit;
	font-weight:     inherit;
	}

.v4_css_link{
	text-decoration: underline;
	color:           midnightblue;
	font-weight:     bold;
	cursor:          pointer;
	}

/* for links that are toggling divs (like show/hide history) */
#toggle, #toggle_layer1, #toggle_layer2{
	text-decoration: none;
	color:           gray;
	font-size:       11px;
	}

/****************************************************************************************************/
/********************************************** END OF LINKS ****************************************/
/****************************************************************************************************/

/*adding a magnifier icon inside the search box*/
.search_input{
	background:       url('../images/icons/magnifier-small.png') no-repeat 2px 2px;
	background-color: white;
	padding-left:     20px;
	border:           1px solid #BFBFBF;
	}

input:read-only{
	/*background-color: lightyellow;*/
	color: darkolivegreen;
	}

/****************************************************************************************************/
/************************************************** DIVS ********************************************/
/****************************************************************************************************/

/* the div at the top of the page that shows who is logged in, current station and current sn*/
.login{

	font-size:     9pt;
	font-weight:   bold;
	text-align:    left;
	float:         right;
	padding:       12px 15px 5px 15px;
	margin:        -15px 60px 0px 0px;
	right:         0vw;
	border:        1px solid #5A7797;
	top:           0px;
	background:    var(--normal-background);
	color:         white;
	border-radius: 0px 0px 10px 10px;
	position:      absolute;
	z-index:       6;
	}

.stations, .pls{
	position:      absolute;
	font-size:     9pt;
	font-weight:   bold;
	text-align:    left;
	float:         right;
	padding:       12px 15px 5px 15px;
	margin:        45px 0px 0px 0px;
	right:         0px;
	border:        1px solid #5A7797;
	top:           18px;
	background:    var(--normal-background);
	color:         white;
	border-radius: 10px 0px 0px 10px;
	z-index:       99;
	}

#main_layer{
	background:    url('../images/v4bg.png') no-repeat center;
	position:      absolute;
	margin-left:   0px;
	margin-right:  0px;
	margin-bottom: 40px;
	padding:       10px 0px;
	width:         800px;
	height:        300px;
	overflow:      auto;
	}

.v4_layer{
	left:                    350px;
	top:                     122px;
	background:              white;
	box-shadow:              0px 0px 10px 1px black;
	-webkit-box-shadow:      0px 0px 10px 1px black;
	-moz-box-shadow:         0px 0px 10px 1px black;
	border-radius:           5px;
	-webkit-border-radius:   5px;
	-moz-border-radius:      5px;
	border:                  7px solid rgba(255, 255, 255, 0.7);
	border-top-width:        13px;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
	overflow:                auto;
	display:                 none;
	position:                absolute;
	width:                   fit-content;
	max-width:               95vw;
	height:                  fit-content;
	max-height:              80vh;
	}

.highest_layer{
	border-color: #CCE8FF;
	}

#ok_cancel{
	display:                 none;
	position:                fixed;
	left:                    350px;
	top:                     122px;
	background:              white;
	box-shadow:              0px 0px 10px 1px black;
	-webkit-box-shadow:      0px 0px 10px 1px black;
	-moz-box-shadow:         0px 0px 10px 1px black;
	border-radius:           5px;
	-webkit-border-radius:   5px;
	-moz-border-radius:      5px;
	border:                  10px solid rgb(127, 0, 0); /*change for IE*/
	border:                  7px solid rgba(255, 255, 255, 0.7);
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
	z-index:                 11;
	}

.wrapper{
	background:    white;
	border:        1px solid #acabab;
	padding:       10px;
	display:       inline-block;
	border-radius: 5px;
	width:         auto;
	height:        auto;
	}

.layer_data{
	overflow:      auto;
	padding-right: 26px;
	}

.High{
	color: blue;
	}

.Highest{
	color: red;
	}

.marked{
	color: #F35E5E;
	}

.Resolved, .resolved{
	color:       green;
	font-weight: bold;
	}

.layer_title{
	color:              var(--my-blue);
	font-size:          15px;
	text-shadow:        1px 1px 0px white;
	font-family:        Lucida Sans Unicode, Arial;
	white-space:        nowrap;
	margin:             -10px -10px 10px -10px;
	font-weight:        bold;
	background-color:   var(--title-background);
	vertical-align:     middle;
	direction:          inherit;
	border-bottom:      solid #d3d3d3 1px;
	padding:            5px 15px;
	-moz-box-shadow:    inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
	box-shadow:         inset 0px 1px 0px 0px #ffffff;
	min-height:         20px;
	border-radius:      5px 5px 0px 0px;
	}

#user_layer{
	display:          none;
	position:         relative;
	z-index:          99;
	border:           solid #9D9C9C 1px;
	background-color: white;
	padding:          5px 10px;
	border-radius:    5px;
	color:            black;
	font-size:        12px;
	float:            right;
	margin-top:       -65px;
	margin-right:     140px;
	}

/*div that displays the latest actions in the system*/
#latest_actions{
	display:            none;
	position:           absolute;
	left:               360px;
	top:                50px;
	border:             solid #9D9C9C 1px;
	background-color:   white;
	-moz-box-shadow:    0px 0px 10px 1px #B1B1B1;
	-webkit-box-shadow: 0px 0px 10px 1px #B1B1B1;
	box-shadow:         0px 0px 10px 1px #B1B1B1;
	padding:            10px;
	border-radius:      5px;
	}

/*div that displays tips & tricks of the system*/
#help_tips{
	display:            none;
	position:           absolute;
	left:               360px;
	top:                50px;
	border:             solid #9D9C9C 1px;
	background-color:   white;
	-moz-box-shadow:    0px 0px 10px 1px #B1B1B1;
	-webkit-box-shadow: 0px 0px 10px 1px #B1B1B1;
	box-shadow:         0px 0px 10px 1px #B1B1B1;
	padding:            10px;
	border-radius:      5px;
	}

#menu0{
	padding:          4px;
	background-color: var(--title-background);
	/*
	background:    -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #E2F2FF), color-stop(1, #C0E3FF));
	background:    -moz-linear-gradient(left top, #E2F2FF 5%, #C0E3FF 100%);
	*/
	left:             0px;
	top:              0px;
	z-index:          9;
	outline:          1px solid #E2E2E2;
	border-bottom:    3px solid #B6B6B6;
	white-space:      nowrap;
	}

#top_div{
	position: absolute;
	margin:   0px;
	left:     20px;
	/*top:      50px;*/
	}

#processing{
	display:     none;
	position:    absolute;
	z-index:     99;
	left:        47%;
	top:         47%;
	font-size:   25pt;
	color:       navy;
	font-family: serif;
	}

#overlay{
	z-index: 10;
	}

.PHS{
	color:  gray;
	border: 1px solid gray;
	}

.PNR{
	color:  blue;
	border: 1px solid darkblue;
	}

.SNM{
	color:  darkblue;
	border: 1px solid darkblue;
	/*font-weight: bold;*/
	}

.SNP{
	color:  #227abe;
	border: 1px solid #074d8b;
	/*font-weight: bold;*/
	}

.LOT{
	color:  dimgrey;
	border: 1px solid dimgrey;
	/*font-weight: bold;*/
	}

.LOT{
	color:  dimgrey;
	border: 1px solid dimgrey;
	/*font-weight: bold;*/
	}

.LOT{
	color:  dimgrey;
	border: 1px solid dimgrey;
	/*font-weight: bold;*/
	}

.LBL{
	color:  var(--my-orange);
	border: 1px solid var(--my-orange);
	}

.PHS_label{
	background-color: gray;
	color:            #ffffff;
	display:          inline;
	}

.PNR_label{
	background-color: blue;
	color:            #ffffff;
	display:          inline;
	}

.SNM_label{
	background-color: darkblue;
	color:            #ffffff;
	display:          inline;
	}

.SNP_label{
	background-color: #074d8b;
	color:            #ffffff;
	display:          inline;
	}

.LBL_label{
	background-color: var(--my-orange);
	color:            #ffffff;
	}

.LOT_label{
	color:            white;
	background-color: dimgrey;
	border:           1px solid dimgrey;
	font-weight:      bold;
	display:          inline;
	}

.not_specified{
	color:  lightblue;
	border: 1px solid lightblue;
	}

.assembly_tree_member{
	padding: 0 0 0 0px;
	/*border-radius: 5px;*/
	cursor:  pointer;
	/*width:      170px;*/
	/*height:     30px;*/
	/*overflow-y: hidden;*/
	}

.assembly_tree_member_size{
	width:  300px;
	height: 30px;
	}

.pn_tree_title{
	text-align:       center;
	font-weight:      bold;
	background-color: lightblue;
	color:            #000000;
	border:           2px solid #000000;
	}

.pn_tree_station{
	font-size:  8pt;
	font-style: italic;
	opacity:    0.6;
	/*border: 1px solid black;*/
	text-align: center;
	padding:    0 0 0 0px;
	margin:     auto;
	/*border-radius: 5px;*/
	width:      170px;
	/*height:     15px;*/
	overflow-y: hidden;
	}

.pn_tree_label{
	color:      var(--my-orange);
	text-align: center;
	}

.pn_tree_phn{
	opacity:          0.6;
	background-color: lightblue;
	text-align:       center;
	font-weight:      bold;
	border:           2px solid #000000;
	color:            gray;
	}

/****************************************************************************************************/
/******************************************** END OF DIVS *******************************************/
/****************************************************************************************************/
.center{
	vertical-align: middle;
	text-align:     center;
	padding:        0px 0px 0px 0px;
	margin:         0px 0px 0px 0px;
	}

.no_border{
	border: none;
	}

/* Let's get this party started */
::-webkit-scrollbar{
	width:  12px;
	height: 12px;
	}

/* Track */
::-webkit-scrollbar-track{
	-webkit-box-shadow:    inset 0 0 6px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 10px;
	border-radius:         10px;
	}

/* Handle */
::-webkit-scrollbar-thumb{
	-webkit-border-radius: 10px;
	border-radius:         10px;
	background:            rgba(110, 145, 185, 0.80);
	-webkit-box-shadow:    inset 0 0 6px rgba(0, 0, 0, 0.5);
	}

::-webkit-scrollbar-thumb:window-inactive{
	background: rgba(110, 145, 185, 0.3);
	}

/*
the following is intended to be used in the high_light_me value in html_report class
*/
tr.red{
	color: red;
	}

tr.blue{
	color: blue;
	}

tr.green{
	color: green;
	}

tr.orange{
	color: orange;
	}

tr.brown{
	color: brown;
	}

tr.black{
	color: black;
	}

tr.darkpink{
	color: deeppink;
	}

tr.yellow_bg{
	background-color: yellow;
	}

.fda{
	/*	background: #ffeecc;
		border:4px solid #ffeecc;*/
	color:       #ff8211;
	font-weight: bold;
	}

.google_th{
	font-size:    18px;
	font-variant: all-small-caps;
	}