:root {

  --col-orange: rgb(255, 112, 0);
  --col-orange-dark: #df6200;

  --col-green-light: #1bbb89;

  --col-white: rgb(255, 255, 255);
  --col-grey-light: #f0f0f0;
  --col-grey: #e4e4e4;
  --col-grey-dark: #d4d4d4;
  --col-grey-darker: #b6b6b6;

  --col-link: #337ab7;
  --col-link-over: #23527c;

  --padding-items: 0.5rem 1rem;

}

html {
  font-size: 14px;
}

input:focus, textarea:focus, select:focus{
  outline: none !important;
}

body {
  
  height: 100vh;
  overflow: hidden;

}


.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none;
}


.nav-link {
  display: block;
  padding: var(--padding-items);
  color: var(--col-white);
}

.nav-link:focus, .nav-link:hover {
  color: var(--col-white);
  background-color: var(--col-orange-dark);
}


.aCheckCode.disabled {
  pointer-events: none;
  cursor: default;
}


.working {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}




#epContainer {

  height: 100vh;

  min-width: 1280px;

  /* min-height: 720px; */

  overflow: hidden;

}




#epHeader {

  background-color: var(--col-orange);
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  position: relative;

  z-index: 100;

}

#epHeader .container-fluid {
  padding: 0;
}



.dropdown-toggle::after {
  content: none;
}


#epHeader #epHeaderLeft {
  padding-left: 0;
  padding-right: 0;
}

#epHeader #epHeaderLeft .nav-item {
  border-right: 1px solid var(--col-orange-dark);
}

#epHeader #epHeaderMiddle {
  text-align: center;
}

#epHeader #epHeaderMiddle span {
  color: var(--col-white);
}


#epHeader #epHeaderMiddle span#epFilenameStatus {
  display: none;
  margin-left: 8px;
}

#epHeader #epHeaderRight {
  padding-left: 0;
  padding-right: 0;
}

#epHeader #epHeaderRight .nav {
  flex-direction: row-reverse;
}

#epHeader #epHeaderRight .nav-item {
  border-left: 1px solid var(--col-orange-dark);
}


#epBody div.row {
  height: 100%;  
}

#epBodyLeft {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;

  /* cursor: grab;
  resize: horizontal; */

  background-color: var(--col-grey-light);

}



#epBodyLeft #epPrograms #epProgramsLoader {

  background-color: var(--col-orange);
  color: var(--col-white);
  padding: var(--padding-items);

}



#epBodyLeft #epPrograms #epProgramsTitle {

  background-color: var(--col-orange);
  color: var(--col-white);
  padding: var(--padding-items);

}

#epBodyLeft #epPrograms #epProgramsTitleList {

  padding: var(--padding-items);

}

#epBodyLeft #epPrograms #epFileDrop {
  margin: var(--padding-items);
  border: 2px dashed;
  border-color: var(--col-link);
  padding: 35px 20px 35px 20px;
  text-align: center;
  font-size: 15px;
  user-select: none;
  cursor: cell;
  color: var(--col-link);
  margin-top: 1em;
}


#epDocs {
  overflow: hidden;
}

#epDocsDisplay {

  display: block;
  position: relative;
  /* z-index: -1; */
  width: 100%;
  height: 100%;
  display: none;
  
}

#epDocsDisplay #epDocsDisplayTitle {
  background-color: var(--col-orange);
  color: var(--col-white);
  padding: var(--padding-items);
}

#epDocsDisplay #epDocsDisplayTitle button {
  float: right;
}


#epDocsDisplay #epDocsDisplayText {

  background-color: var(--col-grey-light);
  padding: var(--padding-items);
  overflow: scroll;

}


#epDocsDisplay #epDocsDisplayText p.ep-doc-indent {
  margin-left: 25px;
}




#epDocsDisplay #epDocsDisplayText span.pre-inline {
  font-family: var(--bs-font-monospace);
  padding: 2px 5px 2px 5px;
  font-size: 13px;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 2px;
}

#epDocsDisplay #epDocsDisplayText span.compat {
  text-transform: uppercase;
  font-size: 11px;
}

#epDocsDisplay #epDocsDisplayText span.compat span.compat-version {
  font-family: var(--bs-font-monospace);
  padding: 2px 4px 2px 4px;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-right: 2px;
}



#epDocsDisplay #epDocsDisplayText h2 {

  margin-top: 1.5rem;
  word-wrap: break-word;

}

#epDocsDisplay #epDocsDisplayText h3 {
  
  margin-top: 1.5rem;

}

#epDocsDisplay #epDocsDisplayText h4 {
  
  margin-top: 1.125rem;
  font-size: 1.125rem;

}

#epDocsDisplay #epDocsDisplayText pre {

  overflow-x: scroll;

}





#epDocsDisplay #epDocsDisplayText .btn-primary {
  background: #e3e3e3;
  border: #f5f5f5;
  color: #212527;
  text-transform: uppercase;
  font-size: 10px;
  margin: 20px 0 20px 0;
}



#epDocsTitle {
  background-color: var(--col-orange);
  color: var(--col-white);
  padding: var(--padding-items);
}

#epDocsSearch {
  border-radius: 0;
}

#epDocsResults {
  overflow: scroll;
}

ul#epDocsResultsList { 
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

ul#epDocsResultsList li span.epDocSection {
  display: block;
  /* color: var(--col-link); */
  background-color: var(--col-grey);
  border-bottom: solid 1px var(--col-light-grey);
  line-height: 40px;
  padding-left: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  font-weight: 500;
}


ul#epDocsResultsList li a {
  display: block;
  color: var(--col-link);
  background-color: var(--col-grey-light);
  border-bottom: solid 1px var(--col-grey);
  line-height: 40px;
  padding-left: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  cursor: pointer;
}

ul#epDocsResultsList li a:hover {
  background-color: var(--col-grey);
  color: var(--col-link-over);
}





#epLineHelp {
  /* overflow: hidden; */
}

#epLineHelpTitle {
  background-color: var(--col-orange);
  color: var(--col-white);
  padding: var(--padding-items);
}


#epLineHelpHelp {
  background-color: var(--col-grey-light);
  padding: var(--padding-items);
  height: 100%;
}


#epBodyMiddle {
  padding-left: 0;
  padding-right: 0;
  border-left: solid 1px var(--col-grey-darker);
  border-right: solid 1px var(--col-grey-darker);
}


#epBodyRight {
  padding-left: 0;
  padding-right: 0;
}


#epEditor { 
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}



#epCompiler { 

}

#epCompilerTitle { 
  background-color: var(--col-orange);
  color: var(--col-white);
  padding: var(--padding-items);
}


#epCompilerOutput {
  background-color: var(--col-grey-light);
  height: 100%;  
}

div.epCompilerOutputLine {

}




/* Modals */

.modal-header {
  background-color: var(--col-orange);
  color: var(--col-white);
}

.modal-header h5.modal-title {
  font-size: 1.125em;
}

.modal-body {
  padding: 25px;
}

#modLoadDemos .modal-body ul {
  padding: 0;
  list-style: none;
}

#modLoadDemos .modal-body ul li {
  border-bottom: solid 1px #ebebeb;
  padding-bottom: 10px;
  margin-bottom: 10px;  
}



#modProgram div.modal-footer {
  padding: 0;
}

#modProgram div.modal-footer button {
  color: var(--col-orange-dark);
  background: var(--col-white);
  width: 100%;
  border: none;
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  height: 75px;
}

#modProgram div.modal-footer button:hover {
  background-color: var(--col-grey-light);
}

.modal-body a {
  color: #ff7000;
  text-decoration: none;
  background-color: transparent;
}

.modal-body a:hover {
  color: #ff7000;
  text-decoration: none;
  background-color: transparent;
}


div.usb-actions-buttons {
  padding: 0;
}

div.usb-actions-buttons .btn-primary {
  background: #e3e3e3;
  border: #f5f5f5;
  color: #212527;
  text-transform: uppercase;
  font-size: 10px;
}


/* 

#fromUSBdata {
  font-family: monospace;
  background-color: #f5f5f5;
  border: none !important;
  width: 100%;
  height: 100px;
}


#fromUSBdataHolder.card {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  padding: 10px;
}


#fromUSBdataHolder.card div.card-body {
  padding: 0;
}



#runUSB {
  margin-right: 20px;
}



#SendUSBData {
  font-family: monospace;
  height: 47px;
  padding: 0px 10px 0px 10px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  margin-right: 20px;
} */


#apiStatusHolder, #programStatusHolder, #pulseStatusHolder {
  display: block;
  font-family: monospace;
  /* margin-bottom: 25px; */
}


#fromUSBdataHolder {
  display: block;
  margin-bottom: 0;
}

#apiStatusHolder.card, #programStatusHolder.card, #pulseStatusHolder.card {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
}

#fromUSBdataHolder.card {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  padding: 10px;
}

#fromUSBdataHolder.card div.card-body {
  padding: 0;
}

#usbStatus mark {
  font-size: 85%;
}

#usbStatus mark {
  display: inline-block;
  padding: 7px;
  /* padding-right: 15px; */
  margin-bottom: 5px;
  opacity: 0.75;
}

#usbStatus mark span {
  padding-right: 5px;
}

#SendUSBData {
  font-family: monospace;
  height: 47px;
  padding: 0px 10px 0px 10px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  margin-right: 10px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

#fromUSBdata {
  font-family: monospace;
  background-color: #f5f5f5;
  border: none !important;
  width: 100%;
  height: 100px;
}

#modUSB div.usb-connect, #modUSB div.usb-send {
  padding: 0;
  margin-bottom: 25px;
}

#modUSB div.usb-response {
  padding: 0;
  margin-bottom: 0;
}

#modUSB div.usb-connect span.label, #modUSB div.usb-send span.label, #modUSB div.usb-response span.label {
  padding: 0;
  margin-bottom: 5px;
  display: block;
  font-weight: 500;
}

#modUSB div.usb-connect span.usb-status {
  margin-left: 10px;
  opacity: 0.75;
}







.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* remove the gap so it doesn't close */
}








#divDemoProgramList div.container {
  padding-right: 0px;
  padding-left: 0px;
}

#divDemoProgramList div.container div.row {
  border-bottom: solid 1px #ebebeb;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

#divDemoProgramList div.container div.row:last-child {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#divDemoProgramList div.container div.row span.spanDemoProgramName {
  display: block;
  font-weight: 600;
}

#divDemoProgramList div.container div.row span.spanDemoProgramName:hover {
  cursor: pointer;
}

#divDemoProgramList div.container div.row span.spanDemoProgramLoad {
  font-size: 85%;
  display: block;
}

#divDemoProgramList div.container div.row span.spanDemoProgramLoad:hover {
  cursor: pointer;
}

#divDemoProgramList div.container div.row span.spanDemoProgramDesc {
  font-size: 85%;
  display: block;
}

#divDemoProgramList div.container div.row .btnDemoProgramLoad {
  float: right;
}






.landing-holder {
  text-align: center;
  max-width: 700px;
}

.landing-holder h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}


.landing-holder img.logo {
  max-width: 20vw;
}

.ep-selector {
  margin-bottom: 25px;
  margin-top: 40px;
} 

.ep-selector input{
  margin:0;
  padding:0;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

.v1 { 
  background-image:url(../images/edison_v1.jpg);
}

.v2 {
  background-image:url(../images/edison_v2.jpg);
}

.v3 {
  background-image:url(../images/edison_v3.jpg);
}


.ep-selector input:active +.ep-version { 
  opacity: .9;
}

.ep-selector input:checked +.ep-version {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
}

.ep-version{


  color: #fff;
  font-size: 50px;

  text-shadow: 0px 0px 10px rgba(0,0,0,0.95);

  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

  text-align: center;    
  padding-top: 40px;

  cursor:pointer;
  background-size:contain;
  background-repeat:no-repeat;
  display:inline-block;
  width: 200px;
  height: 200px;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  -webkit-filter: brightness(1.8) grayscale(0.25) opacity(.8);
  -moz-filter: brightness(1.8) grayscale(0.25) opacity(.8);
  filter: brightness(1.8) grayscale(0.25) opacity(.8);
}

.ep-version:hover {
  -webkit-filter: brightness(1.2) grayscale(0) opacity(.9);
  -moz-filter: brightness(1.2) grayscale(0) opacity(.9);
  filter: brightness(1.2) grayscale(0) opacity(.9);
}


.ep-launch {
  margin-top: 25px;
}

.ep-launch #ep-auto {
  float: none;
}

/* Extras */
/* a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;} */


#pulseStatusOutput {
  display: block;
}

#apiStatusHolder {
  font-family: monospace;
  background-color: var(--col-grey-light);
  margin-bottom: 15px;
}

#hubStatusHolder {
  font-family: monospace;
  background-color: var(--col-grey-light);
  margin-bottom: 15px;
}

#btnStatusHubConnect {
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}

#spanServerResultLocation span {
	top: -2px !important;
	left: 8px !important;
}

.spanServerResultLocationSuccess {
	color: #457640;
}

.spanServerResultLocationError {
	color: #b3454f;
}


/* #divCompileResult { 
  display: block;
}

#spanCompileResultDetails span {
	top: -2px !important;
	left: 8px !important;
} */






#tabFilesHolder {
  background-color: var(--col-grey-dark);
  border-bottom: solid 1px var(--col-grey-darker);

  width:100%;
  max-width:none;
  padding:0;
  
}

.row#tabFiles {
  margin-left:0;
  margin-right:0
}


.row#tabFiles .col.tabFile {
  background-color: var(--col-grey-dark);
  width: 20%;
  max-width: 20%;
  border-right: solid 1px var(--col-grey-darker);
  cursor: pointer;
  padding: var(--padding-items);
}

.row#tabFiles .col.tabFile.tabActive {
  background-color: var(--col-grey-light);
}

.row#tabFiles .col.tabFile button {
  float: right;
}

span.tabFileTitle {
 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  display: inline-flex;
  width: 75%;

}




#divProgramNameMessageLocal {
  padding: 5px 10px 5px 10px;
  margin: 9px 0px 0px 0;
  font-size: 85%;
}


pre {
  display: block;
  padding: 9.5px;
  font-size: 13px;
  line-height: 1.42857143;
  word-break: break-all;
  word-wrap: break-word;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 2px;
}




#fuStatusHolder {
  display: block;
  font-family: monospace;
  overflow-y: scroll;
  display: block;
  font-family: monospace;
  max-height: 200px;
  margin-top: 25px;
}

#fuStatusHolder.card {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
}

#fuStatusHolder.card span#fuStatusConnectionStatus.isConnected {
  color: #457640;
}

#fuStatusHolder.card span#fuStatusConnectionStatus.notConnected {
  color: #b3454f;
}



#fuStatusHolder.card div.card-body-line-error {
  color: #853737;
}

#fuStatusHolder.card div.card-body-line-success {
  color: green;
}

#fuStatusHolder.card div.card-body-line-info {
  color: #212529;
}

#fuStatusHolder.card div.card-body-line-prompt {
  color: #212529;
}


#btnStatusHubConnect {
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}

#divProgrammingMessage div.success {
  color: #457640;
}


#hubStatusHolder {
  display: block;
  font-family: monospace;
  margin-bottom: 1rem;
}

#hubStatusHolder.card {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
}

#hubStatusHolder.card span#hubStatusConnectionStatus.isConnected {
  color: #457640;
}

#hubStatusHolder.card span#hubStatusConnectionStatus.notConnected {
  color: #b3454f;
}

#btnStatusHubConnect {
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}






#modLoad { }

#modLoad .load-file-element  {
  /* padding: 0;
  margin: 0; */
  text-align: right;
}

#modLoad .load-file-element  [type="file"] {
  height: 0;
  overflow: hidden;
  width: 0;
}


#modLoad .load-file-element [type="file"] + label {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  border-radius: 5px;
  font-weight: 400;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0.5em;
  outline: none;
  padding: 0.5em 1em 0.5em 1em;
  position: relative;
  transition: all 0.3s;
  text-align: center;
  width: 90%;
}


#modLoad .load-file-element [type="file"] + label:hover {
  background-color: #286090;
  border-color: #204d74;
}

#modLoad #modLoadWarning {
  margin-top: 0.5rem;
  font-size: 85%;
  /* padding: .25rem 0.75rem; */
}

#modLoad #modLoadDetails {
  margin-top: 0.5rem;
  font-size: 85%;
  padding: .25rem 0.75rem;
}

#modLoad .load-file-feedback {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  margin-top: 20px;
}

#modLoad .load-file-feedback mark.alert {
  width: 100%;
  display: block;
  margin-bottom: 0;
}




#modProgramWav div.modal-footer { 
	padding: 0;
	margin: 0;	
}

#modProgramWav div.modal-footer button  { 
	font-family: "handelgothicef-mediumregular", sans-serif !important;
	color: #ff7000;
	background: #fff;
	width: 100%;
	border: none !important;
	padding-top: 15px;
	padding-bottom: 15px;
	font-weight: 600;
	font-size: 16px;
  height: 80px;
}

#modProgramWav div.modal-footer button:hover  { 
	background: #f2f2f2;
	width: 100%;
}






  /* Neutral accordion buttons */
  .accordion-button {
    background-color: #fff;
    color: #000;
    box-shadow: none;
  }
  .accordion-button:not(.collapsed) {
    background-color: #f8f9fa; /* light grey when open */
    color: #000;
  }
  .accordion-button:focus {
    box-shadow: none; /* remove blue outline */
  }




  input[type="range"] {
   width: 100%;
   
}


div#divFlasherSpeedDesc {
   font-size: 85%;
   margin-top: 0;
   margin-bottom: 1rem;
   margin-top: 5px;
   text-align: justify;
}



div#flasherHolder {
  float: right;
}

div#flasherImageHolder {
  position: relative;
  float: right;
}

div#flasherCanvasHolder {
  position: absolute;
  /* height: calc(var(--flasher-height) - 50px);
  width: calc(var(--flasher-height) - 50px); */
  right: 0;
  overflow: hidden;   
}


div#flasherHolder, div#flasherImageHolder, div#flasherImageHolder img, div#flasherCanvasHolder {
  width: 330px;
  height: 330px;
}


/* Media query for devices with high pixel density (e.g., Retina displays) */
@media only screen and (min-resolution: 192dpi) {

   div#flasherHolder, div#flasherImageHolder, div#flasherImageHolder img, div#flasherCanvasHolder {
      width: 420px;
      height: 420px;
   }

 }


 @media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

  div#flasherHolder, div#flasherImageHolder, div#flasherImageHolder img, div#flasherCanvasHolder {
    width: 530px;
    height: 530px;
  }

  #modalFlasher div.modal-dialog {
    max-width: 90% !important;
  }

  #flasherCanvasHolder #canvas {
    width: 85%;
  }

}



#flashProgressBarHolder {

  position: relative;

  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.025);
  border-radius: 3px;
  border-radius: 0.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;

}


#flashProgressBar {

  position: absolute;

  display: inline-block;
  height: 30px;
  width: 0px;
  background-color: #26ad68;

  border-radius: 0.25rem;

}

#output {

  z-index: 100;
  position: relative;
  color:  rgba(255, 255, 255, 0.5);
  padding: 4px 10px 4px 10px;

}


#modalFlasher ol {
  padding-left: 15px;
}

#modalFlasher ol li {
  font-weight: 900;
  padding-bottom: 5px;
}

#btnFlasherRun {

  float: left;
  margin-right: 5px;

}


#btnFlasherStop {
  display: none;
}


div#labelFlasherSpeed::after {
  content: "";
  display: table;
  clear: both;
}


div#labelFlasherSpeed span.reliable {
  float: left;
}

div#labelFlasherSpeed span.fast {
  float: right;
}

#flashTips {
  margin-top: 15px;
  font-size: 85%;
}




#modProgrammingMethod #programmingMethodHolder {

  position: relative;
  background-clip: border-box;
  border-radius: .25rem;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;

}

#modProgrammingMethod #programmingMethodHolder #spanProgrammingMethod {

  font-family: monospace;
  background-color: #f5f5f5;

}