/*
.subTitle {font-size:75%;}
.examplePicWide {width: 150px; height: 100px;}
.examplePicTall {width: 150px; height: 200px;}
*/

/* include the padding and border in an element's total width and height for all the elements, regardless of the browser. */
* {
  box-sizing: border-box;
}

body {
	max-width: 1358px;
	margin:auto;
}

#mainDiv {
	text-align:left;
	border-left: 1px solid #F4F4F4;
	border-right: 2px solid #F4F4F4;
	margin: 0px;
}


h2 {
	padding: 0px;
	margin: 0px;
}

/* For buttons that are redefined in CSS */
input.hidden {
  display: none;
}

div.columnTitle {
	background-color: #DCEFE4;
	font-weight: bold;
	text-align: center;
	height: 20px;
	margin-bottom: 5px;
	padding: 2px;
}

div.navigBtn {
	width: 20px;
	height: 20px;
	margin-left: 3px;
}

#stageNoTxtWrap {
	position: relative;
	margin-right: 20px;
}

#stageNoTxt {
	position: absolute;
	top: 1px;
	display: inline-block;
	margin-left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	/*-moz-border-radius: 6px;*/
	-webkit-border-radius: 9px;
	background-color:#698E80;
	font-size: 18px;
	color:white;
	font-weight: bold;
	line-height: 18px;
	text-align: center;

}

img.smalIcon {
	width: 20px;
	height: 20px;
	border: 0px;
	position: relative;
	top: 0px;  
}

img.smallIcon {
	width: 32px;
	height: 32px;
	border:1px solid gray;
}

img.disabIcon {
	opacity: 0.3;
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

hr.horizLine {
	display: inline-block;
	margin: 5px;
	border-style: inset;
	border-width: 1px;
	position:relative;
	top: 3px;
	width:120px;
	background-color:#698E80;
}

#navigTextRow {
	margin-left: 5px;
	margin-top: 5px;
	width:1300px;
	white-space: nowrap;
	overflow: hidden;
}

div.NavigText {
	display: inline-block;
	overflow: hidden;
	height: 20px;
	line-height: 20px;
	text-overflow: ellipsis;
	white-space:nowrap;
}

div.NavigArrow {
	display: none;
	overflow: hidden;
	height: 20px;
	line-height: 20px;
}

div.NavigUpDnArrow {
	display: inline-block;
	height: 20px;
	line-height: 20px;
}


span.NavigIdle {
	color:#A9CEC0;
}

span.NavigIndentifying {
	color:#698E80;
}

span.NavigFound {
	color:black;
}

/* List buttons */
div.listBtn {
	border: 1px outset #698E80;
	border-radius: 3px;
	margin-bottom: 1px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
}

div.listBtnDone {
	background-color:#F0FFF0;
}

div.listBtn:hover {
	color: #698E80;
}

img.imgSelectList {
	border-style: solid;
	border-width: 1px;
	border-color: gray;
	width:100px;
	height:100px;
	cursor: pointer;
}

div.selectorDisabled { /* select by menu item */
	color:lightgray;
}

img.selectorDisabled { /* select by pictures */
	opacity: 0.4;
	filter: alpha(opacity=40); /* msie */
}

div.browseImgList {
	border:1px solid;
	font-size: 0; /* removes the white space between rows of images which is placed there for the descender of text */
}

div.browseByPictGallery {
	font-size: 0; /* removes the white space between rows of images which is placed there for the descender of text */
}


/* CSS tabs */
/* hide radio buttons */
input.topTabs {
	display: none;
}

/* show labels in line */
input + label {
	display: inline-block
}

/* hide contents */
input.topTabs ~ .tab {
	display: none
}

div.innerTabCard {
	min-height:100px; /* 535px */
	width:308px;
}

div.borderbox {
	border: 1px solid #999;
}

div.selectorBox {
	height: 534px;
}

div.vScrollBox {
	overflow-y: auto;
	overflow-x: hidden;
	white-space: nowrap;
}

div.vScrollTextWrapBox {
	overflow-y: auto;
}


#descriptionTxtBox {
	width: 195px;
	height: 600px;
	margin-right:5px;
}

#wideDescriptionTxtBox {
	width: 600px;
	height: 300px;
	margin-right:5px;
}


#bookPagesBox {
	width: 195px;
	height: 90px;
	margin-top:5px;
	margin-right:5px;
	overflow: hidden;
}

img.bookPages {
	height: 90px;
	border-width:1px; 
	border-style:inset;
	object-fit: cover;
}

#descriptionPictBox {
	width: 200px;
	height: 192px;
	margin-top: 5px;
}

#selectaconnList {
	height: 600px;
	width:200px;
}

#applSelectBox {
	width:258px;
}

#attrSelectBox {
	width:325px;
}

#filterSetBox {
	width:255px;
}

#componentSeriesBox {
	width:200px;
}

#nodeList {
	width:210px;
}

#searchResultsBox {
	width:260px; 
	height: 503px;
	margin-top: 5px;
}

#keywordListBox {
	width: 513px;
}

#connectionTopoTbl th {
	background-color:#F8F8F8;
	font-weight: normal;
}

#browseByPictBox {
	overflow-y: scroll;
	background-color: white;
	width: 789px;
	height: 566px;
	font-size: 0; /* removes the white space between rows of images which is placed there for the descender of text */
}

div.descrScroll {
}

div.componentSeriesScroll {
	overflow-y: scroll;
	height: 265px;
	width:222px;
	border: 1px solid #999;
	font-family: "Lucida Console", Courier, monospace;
	font-size: 12px;
}


div.filterBox {
	margin-top: 5px;
	background-color: #F8F8F8;
	display: none;
}

div.filterSection {
	margin-top: 5px;
	background-color: white;
}

tr.filterRow {
	display:none;
}

tr.dbEditOnlyRow {
	display:none;
}

td.dbEntryCell {
	display:none;
}

td.filterNameCell {
	white-space:nowrap;
	float: right;
}

img.seeAll {
	display:none;
}

#seriesEditIndStdTbl {
	width:230px;
	height:63px;
	overflow-y: auto;
}

input.manufListCell {
	width:106px;
}

div.selectionBlock {
	width:849px;
}


/* show contents only for selected tab */
#mainTab_N:checked ~ .tab.navigateBox,
#mainTab_B:checked ~ .tab.browseBox,
#mainTab_S:checked ~ .tab.selectBox,
#mainTab_F:checked ~ .tab.findBox
{
	display: block;
}

#navigTab_N:checked ~ .tab.navigateNamesBox,
#navigTab_T:checked ~ .tab.navigateTraitsBox,
#navigTab_P:checked ~ .tab.navigatePicturesBox,
#navigTab_F:checked ~ .tab.navigatFlowchartBox
{
	display: block;
}

#browseTab_K:checked ~ .tab.browseKeywordsBox,
#browseTab_C:checked ~ .tab.browseCompPictsBox,
#browseTab_A:checked ~ .tab.browseApplPictsBox
{
	display: block;
}

#filterAttrTab:checked ~ .tab.filterAttrBox,
#filterApplTab:checked ~ .tab.filterApplBox
{
	display: block;
}


/* box with rounded corner */
input.topTabs + label {
	border: 1px solid #999;
	background: #EEE;
	padding: 4px 4px;
	border-radius: 4px 4px 0 0;
	position: relative;
	top: 1px;
	cursor:pointer;
	/* Not selectable */
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
}

 /* white background for selected tab */
input.topTabs:checked + label {
	background: #FFF;
	border-bottom: 1px solid transparent;
	cursor:pointer;
}

/* grey line between tab and contents */
input.topTabs ~ .tab {
	border: 1px solid #999;
	padding: 2px;
}

span.jumpToLink {
	color:blue;
	/* text-decoration: underline; */
	cursor:pointer;
}

/* box to select a family */
div.filterSubBox {
	background-color: white;
	margin:2px;
	padding:2px;
}


div.filterSubTitle {
	background-color: #DCEFE4;
}

div.selectSubTitle {
	background-color: #DCEFE4;
	padding:2px;
}

div.selectEntry {
	margin: 5px;
}

#componentSeriesSelect {
	height: 595px;
}

/* Slider switch - hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* Slider switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
}

.slider.round {
	border-radius: 18px;
}

.slider.round:before {
	border-radius: 50%;
}

/* Slider switch - the actuator */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}


/* Triangle button for open/close filter boxes */
input.trianglebtn {
  height: 0;
  width: 0;
  visibility: hidden;
}

input.trianglebtn:not(:checked) + label,
input.trianglebtn:checked + label {
	width: 0;
	height: 0;
	position: relative;
	display: inline-block;
}

input.trianglebtn:not(:checked) + label {
	left: -4px;
	top: 2px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #2196F3;
	margin-bottom: 0px;
	margin-left: 8px;
}

input.trianglebtn:checked + label {
	left: 0px;
	top: 6px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #2196F3;
	margin-bottom: 8px;
	margin-left: 0px;
}

label.trianglelable { /* Misspelled */
  cursor: pointer;
}
label.trianglelabel {
  cursor: pointer;
}

/* Open/close application selector boxes */
#applFltrBox1 {display: none;}
#applFltrChkBox1:checked ~ #applFltrBox1 {display: block;}
#applFltrBox2 {display: none;}
#applFltrChkBox2:checked ~ #applFltrBox2 {display: block;}
#applFltrBox3 {display: none;}
#applFltrChkBox3:checked ~ #applFltrBox3 {display: block;}
#applFltrBox4 {display: none;}
#applFltrChkBox4:checked ~ #applFltrBox4 {display: block;}
#applFltrBox5 {display: none;}
#applFltrChkBox5:checked ~ #applFltrBox5 {display: block;}
#applFltrBox6 {display: none;}
#applFltrChkBox6:checked ~ #applFltrBox6 {display: block;}

/* Open/close attribute selector boxes */
#attrFltrBox1 {display: none;}
#attrFltrChkBox1:checked ~ #attrFltrBox1 {display: block;}
#attrFltrBox2 {display: none;}
#attrFltrChkBox2:checked ~ #attrFltrBox2 {display: block;}
#attrFltrBox3 {display: none;}
#attrFltrChkBox3:checked ~ #attrFltrBox3 {display: block;}
#attrFltrBox4 {display: none;}
#attrFltrChkBox4:checked ~ #attrFltrBox4 {display: block;}
#attrFltrBox5 {display: none;}
#attrFltrChkBox5:checked ~ #attrFltrBox5 {display: block;}
#attrFltrBox6 {display: none;}
#attrFltrChkBox6:checked ~ #attrFltrBox6 {display: block;}
#attrFltrBox7 {display: none;}
#attrFltrChkBox7:checked ~ #attrFltrBox7 {display: block;}
#attrFltrBox8 {display: none;}
#attrFltrChkBox8:checked ~ #attrFltrBox8 {display: block;}
#attrFltrBox9 {display: none;}
#attrFltrChkBox9:checked ~ #attrFltrBox9 {display: block;}
#attrFltrBox10 {display: none;}
#attrFltrChkBox10:checked ~ #attrFltrBox10 {display: block;}
#attrFltrBox11 {display: none;}
#attrFltrChkBox11:checked ~ #attrFltrBox11 {display: block;}
#attrFltrBox12 {display: none;}
#attrFltrChkBox12:checked ~ #attrFltrBox12 {display: block;}

/* Open/close tree file based topFltr boxes */
#topFltrBox1 {display: none;}
#topFltrChkBox1:checked ~ #topFltrBox1 {display: block;}
#topFltrBox2 {display: none;}
#topFltrChkBox2:checked ~ #topFltrBox2 {display: block;}
#topFltrBox3 {display: none;}
#topFltrChkBox3:checked ~ #topFltrBox3 {display: block;}
#topFltrBox4 {display: none;}
#topFltrChkBox4:checked ~ #topFltrBox4 {display: block;}

/* Open/close db based filter boxes */
#filterBox1 {display: none;}
#filterChkBox1:checked ~ #filterBox1 {display: block;}
#filterBox2 {display: none;}
#filterChkBox2:checked ~ #filterBox2 {display: block;}
#filterBox3 {display: none;}
#filterChkBox3:checked ~ #filterBox3 {display: block;}
#filterBox4 {display: none;}
#filterChkBox4:checked ~ #filterBox4 {display: block;}
#filterBox5 {display: none;}
#filterChkBox5:checked ~ #filterBox5 {display: block;}
#filterBox6 {display: none;}
#filterChkBox6:checked ~ #filterBox6 {display: block;}
#filterBox7 {display: none;}
#filterChkBox7:checked ~ #filterBox7 {display: block;}
#filterBox8 {display: none;}
#filterChkBox8:checked ~ #filterBox8 {display: block;}
#filterBox9 {display: none;}
#filterChkBox9:checked ~ #filterBox9 {display: block;}
#filterBox10 {display: none;}
#filterChkBox10:checked ~ #filterBox10 {display: block;}
#filterBox11 {display: none;}
#filterChkBox11:checked ~ #filterBox11 {display: block;}
#filterBox12 {display: none;}
#filterChkBox12:checked ~ #filterBox12 {display: block;}
#filterBox13 {display: none;}
#filterChkBox13:checked ~ #filterBox13 {display: block;}
#filterBox14 {display: none;}
#filterChkBox14:checked ~ #filterBox14 {display: block;}
#filterBox15 {display: none;}
#filterChkBox15:checked ~ #filterBox15 {display: block;}
#filterBox16 {display: none;}
#filterChkBox16:checked ~ #filterBox16 {display: block;}
#filterBox17 {display: none;}
#filterChkBox17:checked ~ #filterBox17 {display: block;}
#filterBox18 {display: none;}
#filterChkBox18:checked ~ #filterBox18 {display: block;}
#filterBox19 {display: none;}
#filterChkBox19:checked ~ #filterBox19 {display: block;}
#filterBox20 {display: none;}
#filterChkBox20:checked ~ #filterBox20 {display: block;}


/* Component series list */
#seriesListBox {
	display: none;
	height:600px;
	overflow: auto;
}

div.compSeriesListManuf {
	background-color: #DCEFE4;
	text-align: center;
	font-weight: bold;
}

div.compListHeader {
	background-color: #DCEFE4;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
}

div.compListItem {
	margin-bottom: 1px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	border-bottom: 1px solid #DCEFE4;
}

div.compListItem:hover {
	color: #698E80;
}

div.compListItem:active {
	color: black;
	background-color: #698E80;
}


option.compSeriesListManuf {
	background-color: #DCEFE4;
	text-align: center;
	font-weight: bold;
}
option.compSeriesListItem {
	background-color: white;
	cursor: pointer;
}
option.compSeriesListItem:hover {
	color: #698E80;
}
option.compSeriesListItem:active {
	color: black;
	background-color: #698E80;
}
div.compSeriesListItemSelected {
	color: black;
	background-color: #698E80;
}

input.showManufBtn {
	display: none;
}

input.showManufBtn + label {
	background-image: url("../img/manufacturer_off.png");
	height: 20px;
	width: 20px;
	display:inline-block;
	padding: 0 0 0 0px;
}

input.showManufBtn:checked + label {
	background-image: url("../img/manufacturer.png");
	height: 20px;
	width: 20px;
	display:inline-block;
	padding: 0 0 0 0px;
}

div.sitenavigationtree {
	font-size: 12px;
}


/* Filter settings pop-up */

#settingsIconWrapDiv {
	position: relative;
}

#settingsDialogWrap { /* background */
	position: relative;
}

#settingsDialog { /* content */
	position: absolute;
	right: 0px;
  background-color: #EEE;
  padding: 3px;
	z-index: 99;
  width: 200px;
  display: none;
}

#filterSettingsCloseX { /* Close button */
  float: right;
  font-size: 28px;
  font-weight: bold;
  background-color: #CCC;
}

#filterSettingsDialog { /* background */
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 40%;
  top: 140px;
  width: 200px;
}

#filterSettingsDialogContent { /* content */
  background-color: #FFF;
  margin: auto;
  padding: 3px;
  width: 80%;
}

/* Data Edit cotrols */

#dataEditCtrlsPnl {
	background-color: #DCEFE4;
}


/* Case sensitive search button*/

#caseSensitiveChkBx {
	display:none;
}
 
#caseSensitiveChkBx + label
{
	background-image: url("../img/caseInsensitive.png");
	height: 20px;
	width: 20px;
	display:inline-block;
	padding: 0 0 0 0px;
}

#caseSensitiveChkBx:checked + label
{
	background-image: url("../img/caseSensitive.png");
	height: 20px;
	width: 20px;
	display:inline-block;
	padding: 0 0 0 0px;
}

/* Misc */

span.noOfResults {
	font-size: 8px;
	width:25px;
	float: left;
}

#noOfSeriesSpan {
	font-size: 8px;
	float: left;
}

#filterSettingsBase {
	position: relative;
	display: inline-block;
}

#filterSettings {
	display:none; 
	position:absolute; 
	top:0px; 
	left:150px;
	width:160px; 
	background-color: white; 
	border-width:5px; 
	border-style:ridge;
}

div.largeImage {
  position: relative;
	width: 300px;
	height: 300px;
	border-width:1px; 
	border-style:inset;
	overflow: hidden;
}

img.largeImage {
	width: auto;
	height: 300px;
	border: 0px;
}

#manufNameSel {
	width: 170px;
}

#applicationSel {
	width: 150px;
}

button.imageBtn {
	cursor:pointer;
	border:none;
	background:transparent;
}

#CopyNotice {
	font-size: 8px;
}

/* Select radio buttons */

/* Non-selected button, cursor elsewere */
label.selectBtnLbl {
  display: inline-block;
  padding: 2px 4px;
  margin: 2px;
  cursor: pointer;
  color: #496E60;
  border-radius: 0.25em;
  background: #efefef;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
   /* Prevent text selection */
   -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Non-selected button, cursor over it */
label.selectBtnLbl:hover {
  background: #d6d6d6;
  color: #101010;
}

/* Mouse button is pressed */
label.selectBtnLbl:active {
  transform: translateY(2px); /* drops the button down while the mouse button is pressed over it */
}

/* Selected button, cursor over it */
input.selectBtn:checked + .selectBtnLbl:hover {
  background: #698E80;
  color: #e2e2e2;
}

/* Selected button, cursor elsewere */
input.selectBtn:checked + .selectBtnLbl {
  background: #DCEFE4;
  color: black;
}

/* Book pages */
#bookPagesDiv {
	position:fixed;
	top: 10px;
	left: 10px;
	z-index:100;
	border: 3px outset #698E80;
	display: none;	
}

#buyBookDiv {
	position:absolute;
	top: 0px;
	left: 0px;
	z-index:101;
}

/* Series edit */
#seriesEditDialog {
	position:absolute;
	top: 20px;
	left: 20px;
	z-index:100;
	border: 3px outset #698E80;
	background-color:white;
	display: none;	
}

td.editSeriesTitle {
	border-bottom: 1px solid black;
	text-align: right;
}

td.editSeriesTxtField {
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}

#seriesEditTable {
	border: 1px solid;
}

div.editSeriesPictsBtns {
  position: absolute;
  left: 8px;
  bottom: 8px;
}

/* Multi-selections */
div.multiSeCntrl {
	position: relative;
	display: inline-block;
	pointer-events: none;
}

div.multiSelListDiv {
	border: 1px solid #d4d4d4;
	background-color: #fff; 
	position: absolute;
	z-index: 99;
	width: 180px;
	white-space: nowrap;
}

/* Invert checkboxes */

/* Hide the browser's default invert selection checkbox */
.invSelChkBxContainer input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

/* The invert selection checkbox container */
.invSelChkBxContainer {
  display: inline;
  position: relative;
  padding-left: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Unchecked invert selection checkbox image */
.invSelChkBxImg {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-image: url("../img/noninvert.png")
}

/* Checked invert selection checkbox image */
.invSelChkBxContainer input:checked ~ .invSelChkBxImg {
  background-image: url("../img/invert.png")
}

/* Auto-complete */

/*the container must be positioned relative:*/
div.autocomplete {
	position: relative;
	display: inline-block;
}

.autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 0;
}

.autocomplete-items div {
	padding: 1px;
	cursor: pointer;
	background-color: #fff; 
	border-bottom: 1px solid #d4d4d4; 
}

/* When hovering over an item */
.autocomplete-items div:hover {
	background-color: #e9e9e9; 
}

/* When navigating through the items using the arrow keys */
.autocomplete-active {
	background-color: DodgerBlue !important; 
	color: #ffffff; 
}


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
	.popUpContent {
		width: 100%;
	}
}