html {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
  font-family: sans-serif;
}
.btn{
  cursor:pointer;
  text-align:center;
  border-radius:5px;
  border:1px solid #000000;
  background-color: #cccccc;
  padding:8px;
  font-weight:bold;
}
.rev { /* Revision: d.m.y.h24 */
  font-size: 14px;
  font-style: italic;
  color: #053296;

}
#palette {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#quickBuildLogo {
  position: absolute;
  top: 15px;
  left: 910px;
  width: 250px;
  Height: 55px;
  font-size: 14px;
  font-style: italic;
  text-align: right;
}
#quickBuildLogo a {
  text-decoration: none; 
}
/* Cable Selection Container */
#cableType {
  position: absolute;
  top: 70px;
  left: 25px;
  width: 375px;
  Height: 320px;
  text-align: center;
  font-weight: bold;
  /*padding: 10px 30px 12px 30px;*/
  color: #000;
  border: 2px solid #000;
  border-radius: 5px;
}

/* End Cable Selection Container */

/* Connector A Selection Container */
#connectorAType  {
  position: absolute;
  top: 70px;
  left: 408px;
  width: 375px;
  Height: 320px;
  text-align: center;
  font-weight: bold;
  /*padding: 10px 30px 12px 30px;*/
  color: #000;
  border: 2px solid #000;
  border-radius: 5px; 
}

#ConnATypes {
  display: none;
}


/*End Connector A Selection Container */

/* Connector B Selection Container */
#connectorBType  {
  position: absolute;
  top: 70px;
  left: 790px;
  width: 375px;
  Height: 320px;
  text-align: center;
  font-weight: bold;
  /*padding: 10px 30px 12px 30px;*/
  color: #000;
  border: 2px solid #000;
  border-radius: 5px; 
}


#ConnBTypes {
  display: none;
}

/*End Connector B Selection Container */


/*
From here untill noted otherwise
See: https://moderncss.dev/custom-select-styles-with-pure-css/
*/
/*a modern best practice, we add the following reset first:*/


*,
*::before,
*::after {
  box-sizing: border-box;
}


/*This will allow our select to be flexibly re-colored such as to represent an error state.*/
:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
}


.step {
  padding-top: 65px;
  font-weight: bold;
  /*color: white;*/
  font-size: 150px;
	-webkit-text-stroke: 2px #808080;
}
.stepOptions {
  padding-top: 5px;
  padding-left: 360px; 
  font-weight: bold;
  color: #fff;
  font-size: 40px;
	-webkit-text-stroke: 2px #808080;
}

.select-container {
  background-color: #fff;
}
.select-container h1 {
  font-size: 24px;
  margin: 10px 10px 10px 10px;
  text-transform: uppercase;
  color: #053296;
}

.custom-select {
  position: absolute;
  top: 35px;
  left: 50px;
  margin-top: 10px;
  width: 100%;
  min-width: 15ch;
  max-width: 25ch;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: #e8f0fe;
}
 
.custom-select--disabled {
  cursor: not-allowed;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd, #eee 33%);
}

.float-container {
    padding: 0px;
    margin-top: 50px;
}

.float-container h2 {
  /*margin: 0px 10px 0px 10px;*/
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.float-data {
  width: 360px;
  float: left;
  margin-top: -20px;
	margin-left:0px;
  padding: 0px;
}  
.float-data li {
  margin-left: -30px;
	color: #0c0c0c;
	list-style-type: none; /* Remove bullets */
	text-align: left;
	font-family: monospace;
	font-size: 16px;
}

.float-pic {
  position: absolute;
  top: 120px;
  left: 260px;

  width: 90px;
  float: left;
  margin: 0px 0px 15px 0px;
  margin-left: 10px;
}  
.float-pic img {
  width: 80px;
  border: none;
	background-color: #fff;
}

.speclink {
  position: absolute;
  top: 290px;
  width: 100%;
  text-align: center;
}
.speclink a {
  font-size: 18px;
  font-weight: normal;
  color: #053296;
}
.speclink a:visited {
  color: #053296;
}

#workSheetTitle {
  position: absolute;
  top: 15px;
  left: 25px;
  font-weight: bold;
  font-size: 40px;
  color: #053296;
}
#lengthText {
  position: absolute;
  top: 160px;
  left: 255px;
  width: 630px;
  text-align: center;
  font-weight: normal;
  font-size: 18px;
  color: #053296;
  display: none;
} 

#lengthError {
  position: absolute;
  top: 45px;
  left: 370px;
  text-align: left;
  font-weight: normal;
  font-size: 14px;
  font-style: italic;
  color: #f00;
  display: none;
}
#cartAdd{
  position: absolute;
  width: 220px;
  left: 10px;
  top: 280px;
  border: 1px solid #ed2024;
  background-color: #fff;
  font-weight: bold;
  font-size: 18px;
  padding:2px;
  display: none;
}
.cartHolder{
  border:0px;
  padding:1px;
  border-spacing:0px;
}
.cartCell{
  text-align:left;
  padding:1px;
  font-family: monospace;
  font-weight:bold;
  font-size:16px;
}
#Qty {
  width: 50px;
  text-align: center;
  font-family: monospace;
  background-color: #e8f0fe;
  font-size: 16px;
  font-weight: bold;
}
#CablePartNumber {
  position: absolute;
  top: 330px;
  left: 10px;
  font-weight: normal;
  font-size: 18px;
  /*color: #053296;*/
  color: red;
}
#pdfDrawing {
  display: none;
}

#pdfDrawing a {
  position: absolute;
  top: 350px;
  left: 10px;
  font-weight: normal;
  color: #053296;
}

#pdfDrawing a:visited {
  color: #053296;
}


/* Worksheet and Worksheet Elements*/
/* Main Worksheet */
#worksheet {
  position: absolute;
  top: 395px;
  left: 25px;
	clear: both;
	display: block;
	width: 1140px;
	height: 380px;
  border: 2px solid #000;
  border-radius: 5px; 
  background-image: url("https://buy.customcable.com/QuickBuildRF/Configurator/resources/images/Schematic/schematic_background.gif");
  background-color: #fff;
}
#notToScale {
  position: absolute;
  top: 5px;
  left: 492px;
  text-align: left;font-family: monospace;
  font-size: 12px;
  font-style: italic;
  color: #053296;
  display: none;
}

#cableDimension {
  position: absolute;
  top: 25px;
  left: 360px;
  width: 400px;
  height: 25px;
  padding-left: 10px;
  text-align: left;
  font-family: monospace;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  z-index: 10;
  display: none; 
}
#length {
  float: left;
  display: block;
}
#cableLength {
  width: 70px;
  padding-left:5px;
  text-align: center;
  font-family: monospace;
  background-color: #e8f0fe;
  font-size: 16px;
  font-weight: bold;
}

#unit {
  float: left;
}
#testingText {
  position: absolute;
  top: 60px;
  left: 280px;
  width: 560px;
  text-align: left;font-family: monospace;
  font-size: 16px;
  font-weight: bold;
  color: #053296;
  display: none;
}
#worksheetIntro {
  position: absolute;
  top: 60px;
  left: 180px;
}
/* Cable Container */
#cablebox {
  position: absolute;
  top: 105px;
  left: 170px;
  width: 799px;
  height: 90px;
}
/* Connector A Container */
#conAbox {
  position: absolute;
  top: 26px;
  left: 0px;
  width: 250px;
  height: 247px;
}
/* Mask to cover the dimension line on Connector A */
#conAmask {
  position: absolute;
  top: -26px;
  left: 0px;
  width: 256px;
  height: 99px;
}

/* Connector B Container */
#conBbox {
  position: absolute;
  top: 26px;
  left: 889px;
  width: 250px;
  height: 247px;

}
/* Mask to cover the dimension line on Connector A */
#conBmask {
  position: absolute;
  top: -26px;
  left: -28px;
  width: 258px;
  height: 99px;
}
#dimLineBox {
  position: absolute;
  top: 20px;
  left: 250px;
  width: 639px;
  height: 29px;
  background-image: url("https://buy.customcable.com/QuickBuildRF/Configurator/resources/images/Schematic/cable_length_bar.png");
  display: none;
}

#labelBreakoutLeft1{ 
  position: absolute;
  z-index:131; 
  background-color:#666666;
  display:none; 
}

#labelBreakoutRight1{ 
  position: absolute;
  z-index:151; 
  background-color:#666666;
  display:none; 
}

#hsArrLeft{
  position: absolute;
  z-index:151;
  left:250px;
  width:33px;
  border:0px;
  display:none;
}

#hsLeft{
  position: absolute;
  z-index:151;
  background-color:#666666;
  left:263px;
  top:143px;
  width:20px;
  height:13px;
  display:none;
}

#hsArrRight{
  position: absolute;
  z-index:151;
  right:248px;
  width:33px;
  border:0px;
  display:none;
}

#hsRight{
  position: absolute;
  z-index:151;
  background-color:#666666;
  right:261px;
  top:143px;
  width:20px;
  height:13px;
  display:none;
}

#clockingBox {
  position: absolute;
  top: 168px;
  left: 1013px;
  width: 120px;
  height: 206px;
  display: none;
}
#clockingBox img {
  width: 120px;
  height: 206px;
  border: 1px solid #c0c0c0;
}
#optionBox {
  position: absolute;
  top: 180px;
  left: 260px;
	clear: both;
	display: block;
	width: 620px;
	height: 175px;
  /*border: 1px solid #000;
  border-radius: 5px; 
  background-color: #fff;*/
  display: none;
  
	font-family: monospace;
  font-size: 16px;
  font-weight: bold;
}

#sheathSelect {
  position: absolute;
  top: 50px;
  left: 200px;
}
#sheathSelect input.radio { 
  display: inline; 
}
#sleeveForm {
  margin-left: 20px;
}

#clockWidget {
  position: absolute;
  left: 420px;
  width: 210px;
  height: 175px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.clockSelect {
  position: absolute; 
  top: 35px;
  left: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  border: 3px solid #000;
  color:#053296;
  background-color: #e8f0fe;
}
#clock90Deg {
  position: absolute;  
  left: 50px;
  top: 8px;
  width: 105px;
  text-align: center; 
}
#clock45Deg {
  position: absolute; 
  top: 26px;
  height: 50px;
  right: 18px;
  width: 61px;
  display: flex;
  align-items: center;
}
#clock0Deg {
  position: absolute; 
  top: 62.5px;
  height: 50px;
  right: 5px;
  width: 61px;
  display: flex;
  align-items: center;
}
#clock315Deg {
  position: absolute; 
  bottom: 26px;
  height: 50px;
  right: 20px;
  width: 61px;
  display: flex;
  align-items: center;
}
#clock270Deg {
  position: absolute; 
  left: 50px; 
  bottom: 5px;
  width: 105px;
  text-align: center;
}
#clock225Deg {
  position: absolute; 
  bottom: 26px;
  height: 50px;
  left: 20px;
  width: 61px;
  display: flex;
  align-items: center;
}
#clock180Deg {
  position: absolute;  
  top: 62.5px;
  height: 50px;
  left: 5px;
  width: 65px;
  display: flex;
  align-items: center;
}
#clock135Deg {
  position: absolute; 
  top: 26px;
  height: 50px;
  left: 18px;
  width: 61px;
  display: flex;
  align-items: center;
}

/*

#clockWidget {
  position: absolute;
  left: 420px;
  width: 210px;
  height: 175px;
  border: 1px solid red;
}
#clockSelect {
  position: absolute;
  width: 105px;
  height: 105px;
  top: 35px;
  left: 47px;
  border-radius: 80px;
  border: 3px solid #c0c0c0;
}
#SelectClockingPrompt {
  position: absolute;
  top: 65px;
  left: 65px;
  text-align: center;
  color:#053296;
}
#clock90Deg {
  position: absolute;
  top: -30px;
  left: 37px;
}
#clock45Deg {
  position: absolute;
  top: 5px;
  left: 75px;
  width: 60px;
}
#clock0Deg {
  position: absolute;
  top:40px;
  left: 90px;
  width: 60px;
}
#clock315Deg {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 80px;
}
#clock270Deg {
  position: absolute;
  top: 92px;
  left: 37px;
}
#clock225Deg {
  position: absolute;
  top: 75px;
  left: -35px;
}
#clock180Deg {
  position: absolute;
  top: 40px;
  left: -48px;
}
#clock135Deg {
  position: absolute;
  top: 5px;
  left: -35px;
}

*/

#pricing {
  position: absolute;
  left:0px;
  top:10px;
  padding:2px;
  max-width:180px;
  /*
  top: 230px;
  left: 490px;
  width: 162px;
  */
  font-family: monospace;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  border: 1px solid black;
  background-color: #e8f0fe;
  z-index: 100;
  display: none;
}
.priceData{
  text-align:right;
  padding:2px;
  font-family: monospace;
  font-size:14px;
  font-weight:bold;
  color: #222;
}
/*
#pricing ul{
  list-style:none;
  margin-left: -40px;
  margin-top: -0px;
  margin-right: -40px;
}

#pricing ul li{
  float:left;
  padding:0px;
}

#pricing ul li:nth-child(2n+1){
  text-align: left; 
  padding-left: 5px; 
  width: 80px;
  clear:both;
}

#pricing ul li:nth-child(2n){
  padding-right: 5px;;
  width: 80px;
  text-align: right;
}

#pricing ul li:first-child{
  background-color: #000;
  color: #fff;
}
#pricing ul li:nth-child(2){
  background-color: #000;
  color: #fff;
}
*/
/* ########## form field placeholders ######## */

.placeholder{ 
  color:#aaa;
  font-style:italic; 
}
::-webkit-input-placeholder {
   color: #aaa;
   font-style:italic;
}

:-moz-placeholder { /* Firefox 18- */
   color: #aaa;
   font-style:italic;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #aaa;
   font-style:italic;  
}

:-ms-input-placeholder {  
   color: #aaa;
   font-style:italic;  
}