:root {

   --app-padding: 15px;   

   /* --flasher-height: 600px;
   --flasher-width: 600px; */
/* 
   78.4 =

   75.5 */

   /* --flasher-height: 8cm;
   --flasher-width: 8cm; */

   /* --flasher-height: 688px;
   --flasher-width: 688px; */

   /* --flasher-height: 344px;
   --flasher-width: 344px; */

   /* --flasher-height: 3.15in;
   --flasher-width: 3.15in; */

   /* --flasher-height: 715px;
   --flasher-width: 715px; */

   /* --flasher-height: 420px;
   --flasher-width: 420px; */

}

html {
   /* default font-size is 16px - this is set in the default browser stylesheet */
   font-size: 14px;
   font-weight: 400;
   line-height: 1.4;
   height: 100%;
   margin: 0;
}

body {
   background-color: #fff;
   font-family: sans-serif;
   overflow: hidden;
   height: 100%;
   font-family: 'Open Sans', sans-serif;
   touch-action: manipulation; /* Prevent double-tap zoom in some browsers */
   color: #212529;
}

.modal {
   touch-action: manipulation; /* Additional styling for Bootstrap modals */
}

body.landing {
   background-size: 100%;
}

body.landing .landing-holder {
   background: #ffffff;
   text-align: center;
   padding: 3%;
   max-width: 650px;
}

body.landing .form-check {
    margin-bottom: 15px;
    margin-top: 30px;
}

body.landing .form-check, body.landing .form-check-label {
   cursor: pointer;
}


h1, h2  {
   color: #ff7000;
} /*,h3, h4, h5, h6*/

h3 {
   color: #212527;
   font-size: 1.5rem;
}

h4 {
   color: #212527;
   font-size: 1.25rem;
   margin: 2.5rem 0 1.25rem 0;
}


input[type="text"],
textarea {
   outline: none;
   box-shadow: none !important;
   border: 1px solid #ccc !important;
}

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

#appHolder {
   display: flex;
   flex-direction: column;
   height: 100%; 

   opacity: 0;

}

#appHeader {

   background-color: #ff7000;
   border-color: #ff7000;
   border-bottom-color: #df6200;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.125);
   z-index: 1000;
   position: relative;

   flex: 0 0 auto; /* Prevents the header from growing */

}

#appContent {

   flex: 1; /* Takes up remaining space */
   overflow-y: auto; /* Add scroll if content overflows */

}


.eb-header .oi {
   top: 0px;
   font-size: 0.75rem;
   padding-right: 3px;
}


.eb-header a {
   color: #ffffff;
   text-decoration: none;
}

.eb-menu-main {
   padding-right: 0px;
   padding-left: 0px;
}

.eb-menu-main div.dropdown-menu span.oi {
   display: inline-block;
   float: right;
   top: 7px;
}

.eb-menu-main div.dropdown-menu span.fa {
   display: inline-block;
   float: right;
   top: 7px;
}

.eb-menu-main div.dropdown-menu span.bi {
   display: inline-block;
   float: right;
   top: 7px;
}

.dropdown-menu {
  background-color: #ffffff;
}

.dropdown.show a {
   background-color: #ffffff;
   color: #3C1053;
}

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link {
   border-radius: 0;
   color: #fff;
}

.nav-link:focus, .nav-link:hover {
   text-decoration: none;
   background-color: #ff7000;
}

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link {
   color: #fff;
   background-color: #ff7000;
}


.nav-pills .nav-link {
   border-radius: 0;
}

.eb-menu-title-holder {

}

.eb-menu-title-holder .nav-item {
   width: 100%;
   color: #ffffff;
   text-align: center;
}


.eb-menu-program {
   padding-right: 0px;
   padding-left: 0px;
}

.eb-menu-program .nav-pills {
   float: right;
}


.eb-body {

}


.blocklyToolboxDiv {
   box-sizing: unset !important;
/*   margin: 5px !important; */
}




.eb-footer {
   /* height: 25%; */
   display: none;
}

.eb-footer .row {
   height: 100%;
}

.eb-errors {
   background-color: #eaeaea;
   padding: 0.5em;
   overflow-y: scroll;
}

.eb-errors a#errorsText {

}

.eb-errors a#errorsText .alert {
   padding: .25rem 0.75rem;
   margin-bottom: 0.5rem;
}


.eb-errors a#errorsText .alert .oi {
   padding-right: 0.5rem;
}






.modal-header {
   background-color: #ff7000;
   color: #ffffff;
   padding: 25px;
}

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

.modal-header .close {
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 0 #ccc;
    opacity: .5;
}

.modal-body {
   padding: 25px;
}

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

.modal-body a:hover {
   color: #3C1053;
   text-decoration: none;
   background-color: transparent;
} */

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


.btn-primary {
   color: #fff;
   /* background-color: #500878;
   border-color: #500878; */
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary.disabled:hover,
.btn-primary:disabled:hover {
    color: #fff;
    /* background-color: #d27bd2;
    border-color: #d27bd2; */
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    /* background-color: #BB29BB !important;
    border-color: #BB29BB !important; */
}

.btn-primary:hover {
   color: #fff;
   /* background-color: #BB29BB;
   border-color: #BB29BB; */
}


.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    /* background-color: #BB29BB;
    border-color: #BB29BB; */
}




div#fuButtonsHolder {
   padding-bottom: 1em;
}


div#fuButtonsHolder button {
   width: 33%;
   text-align: left;
}

div#fuButtonsHolder button span.oi {
   float: right;
   top: 4px;
}



#btnFUDownload {
   background-color: #ffffff;
   border-color: #ffffff;
   /* color: #500878; */
}






.rotate {
   animation: rotation 1s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}




#hubStatusHolder,
#fuStatusHolder {
   display: block;
   font-family: monospace;
   overflow-y: scroll;
   display: block;
   font-family: monospace;
   max-height: 200px;
}

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

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

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


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

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

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

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



#hubStatusFirmwareVersionHolder {
   padding-top: 15px;
}

#hubStatusUniqueIDHolder {
   padding-top: 15px;
}

#hubStatusHolder {
   display: block;
   font-family: monospace;
}

#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%;
}



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




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

#apiStatusHolder.card,
#programStatusHolder.card,
#programmingMethodHolder.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;
}

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

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

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

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





/* Block Help */


#modalBlockHelp .modal-dialog {
  max-height: 90vh;
  margin: auto;
}

/* <h5 class="modal-title">Block Help: <span id="modalBlockHelpTitle">...</span></h5> */

#modalBlockHelp h5.modal-title span {
   opacity: 0.7;
}

#modalBlockHelp h5.modal-title span#modalBlockHelpTitle {
   opacity: 1.0 !important;
}


#modalBlockHelp  .modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

#modalBlockHelp .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
}




/* #modalBlockHelp .modal-body .btn-sm {
    margin: 0px 0px 0px 0px;
} */


#modalBlockHelp .modal-body .btn-primary {
   background: #e3e3e3;
   border: #f5f5f5;
   color: #212527;
   text-transform: uppercase;
   font-size: 10px;
   margin-bottom: 15px;
}

/* #modalBlockHelp .modal-body .btn-primary::after {
   content: "\e09e";
   font-family: "Open Iconic" !important;
   margin-left: 5px;
   font-size: 12px;
   vertical-align: middle;
} */


#modalBlockHelp .modal-body div[id^="helpEx"]  {
  margin: 15px 0 15px 0;
}


#modalBlockHelp .modal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 30px;
}

#modalBlockHelp .modal-body th,
#modalBlockHelp .modal-body td {
  padding: 10px;
  text-align: left;
  border: 1px solid #dee2e6;
}

#modalBlockHelp .modal-body th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #343a40;
}

#modalBlockHelp .modal-body tr:nth-child(even) {
  background-color: #f2f2f2;
}

#modalBlockHelp  .modal-body tr:hover {
  background-color: #e9ecef;
}



#modalBlockHelp  .modal-body .block-help-example {
   margin: 15px 0px 20px 0px;
   border: solid 1px #a0a0a030;
   padding: 15px;
   border-radius: 5px;
}


/* .blinking {
   -webkit-animation: 2s blink ease infinite;
   -moz-animation: 2s blink ease infinite;
   -ms-animation: 2s blink ease infinite;
   -o-animation: 2s blink ease infinite;
   animation: 2s blink ease infinite;
}

@keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-ms-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-o-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
} */

/* #modalUSB div.usb-actions button {
   border: 30px red solid;
}

#modalUSB div.usb-actions button {
   border: 30px red solid;
} */


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


div.usb-actions-buttons .btn-primary {


   background: #e3e3e3;
   border: #f5f5f5;
   color: #212527;
   text-transform: uppercase;
   font-size: 10px;



}


#divProgrammingMessage {

}

#divProgrammingMessage div.info {

}

#divProgrammingMessage div.error {
   color: #b3454f;
}

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



#apiStatusOutput {

}

#divServerResult { }

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

.spanServerResultLocationSuccess {
	color: #457640;
}

.spanServerResultLocationError {
	color: #b3454f;
}


#divCompileResult { }

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


#spanErrorWav {
	display: block;
	text-align: center;
	padding: 1.5em;
	background: #f9f9f9;
	border-top: 1px solid #e5e5e5;
}

#spanErrorWav .btn {

}



#modalLoadLocal { }

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

}

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


#modalLoadLocal .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%;
}


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

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

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

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

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


#importExport {
   display: none;
   font-family: monospace;
   width: 100%;
   height: 100%;
}


/* #blocklyDiv {
   height: calc(100vh - 36px); 
   width: 100%;
} */


#blocklyDiv {
   float: right;
   /* height: 80%; */

   height: calc(80% - var(--app-padding));
   padding: var(--app-padding);

   width: 100%;

   background: #f7f7f7;
   box-shadow: 0px 1px 10px #0000002b;
}


/* #collaborators {
   float: right;
   width: 30px;
   margin-left: 10px;
}

#collaborators > img {
   margin-right: 5px;
   height: 30px;
   padding-bottom: 5px;
   width: 30px;
   border-radius: 3px;
} */

input.txtRenameVarsInput {
   /* position: relative;
   left: -5px; */
}


#demo-program-list div.container {
   padding-right: 0px;
   padding-left: 0px;
}

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

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

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

#demo-program-list div.container div.row span.spanDemoProgramName:hover {
   cursor: pointer;
}

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

#demo-program-list div.container div.row span.spanDemoProgramLoad:hover {
   cursor: pointer;
}

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

#demo-program-list div.container div.row .btnDemoProgramLoad {
   float: right;
}


/* Vars / FUNCS */
/* ----------------- */

#modalManageVars .row.program-header,
#modalManageFuncs .row.program-header { 
   font-weight: 500;
   padding-bottom: 10px;
   border-bottom: solid 1px #ebebeb;   
}

#divCreateVarsMessage,
#divCreateFuncsMessage {
   margin-top: 0.5rem;
   font-size: 0.85rem;
   padding: .25rem 0.75rem;
}

.eb-manage-var-feedback,
.eb-manage-func-feedback {
   margin-top: 15px;
   font-size: 85%;
}

.eb-delete-var-confirm,
.eb-delete-func-confirm {
	cursor: pointer;
	color: green;
}

.eb-delete-var-confirm:hover,
.eb-delete-func-confirm:hover {
	text-decoration: underline;
}

.eb-delete-var-cancel,
.eb-delete-func-cancel {
	cursor: pointer;
	color: red;
}

.eb-delete-var-cancel:hover,
.eb-delete-func-cancel:hover {
	text-decoration: underline;
}

.eb-list-item {
   padding-top: 15px;
   padding-bottom: 15px;
   border-bottom: solid 1px #ebebeb;
}

.eb-list-item:last-child {
   border-bottom: none;
}

.eb-name-var-title,
.eb-name-func-title {
   text-align: left;
   padding-left: 0;
   opacity: 0.5;
   margin-bottom: 10px;
}

.eb-name-var-action,
.eb-name-func-action {
   text-align: right;
   padding-right: 0;
   opacity: 0.5;
   margin-bottom: 10px;
}



#errorsTextHolder {
   
   height: calc(20% - var(--app-padding));
   padding: var(--app-padding);

	position: relative;
	display: inline-block;
	width: 100%;
	overflow-y: scroll;
	border-top: 1px solid #0000001a;
	z-index: 200;
}

	
#errorsText {
	height: 100%;
	width: 100%;	
	position: relative;
	display: inline-block;
	font-size: 85%;
}

#errorsText mark {
	display: inline-block;
	padding: 7px;
	padding-right: 15px;
	margin-bottom: 5px;
}

#errorsText mark span {
	padding-right: 10px;
}




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


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



div#flasherHolder {

   /* height: var(--flasher-height);
   width: var(--flasher-width); */
   float: right;
}

div#flasherImageHolder {

   /* height: var(--flasher-height);
   width: var(--flasher-width); */
   position: relative;
   float: right;

}

div#flasherImageHolder img {

   /* height: var(--flasher-height);
   width: var(--flasher-width);
   min-height: var(--flasher-height);
   min-width: var(--flasher-width); */

}


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;
      
      /* border: solid red 1px; */
   }

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

   #flasherCanvasHolder #canvas {
      width: 85%;
   }

}



#flashProgressBarHolder {

   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;

   /* display: inline; */
   /* margin-bottom: 1rem; */
/* 
   float: left;

   margin-right: 10px;
    */
}


#btnFlasherStop {

   display: none;
   /* opacity: 0;    */

}


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%;
}

















body.landing .row.robots {
   /* padding: 0 5em 0 5em; */
}

body.landing  .edison-logo {
   width: 115px;
   height: auto;
   padding-bottom: 2rem;
}

body.landing  a.melink {
   color: #ffffff!important;
   border-width: 0px!important;
   font-size: 15px;
   background-color: #ff7000;
   padding-top: 10px!important;
   padding-right: 25px!important;
   padding-bottom: 10px!important;
   padding-left: 25px!important;
   border-radius: 4px;
   font-style: normal;
   text-transform: none;
   text-decoration: none;
   margin-top: 5px !important;
   display: inline-block;    
}

body.landing  .image-container {
   position: relative;
   overflow: hidden;
   /* width: 300px; */
   height: 200px;
   text-align: center;
   margin: auto;
   cursor: zoom-in; /* Set the cursor to a magnifying glass */
   border-radius: 4px;
}

body.landing  .zoom-image {    
   height: 100%;
   transition: transform 0.3s ease;
   transform-origin: bottom right; /* Set the transform origin to bottom right */
 }


#accordion .btn-link {   
   text-decoration: none;
   text-align: left;
}







#modalProgramming .modal-body {
   /* background-color: var(--colour-orange); */
}

#modalProgramming .modal-body #spanProgramTipTitle {
   font-size: 1.125em;
   display: block;
   /* color: var(--colour-white); */
   text-align: center;
   font-weight: 600;
}


#modalProgramming .modal-body #spanProgramTipBody {
   display: block;
   /* color: var(--colour-white); */
   text-align: center;
   margin-bottom: 30px;
}

#modalProgramming .modal-body  img {
   /* box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.125); */
   border-radius: 0.5rem;
   /* border: solid 1px #212529 ; */
   outline: 1px solid #21252925; /* Border effect */
   outline-offset: -1px; /* Moves it inward */
}


#btnProgrammingClose {
   display: none;
}


.modal-content {
   /* background-color: var(--colour-orange);
   color: var(--colour-white); */
   border-radius: 0.5rem;
   overflow: hidden;
   border: none;
}

.modal-body {
   padding: 25px;
}

#divProgramResultHolder {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: white;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   z-index: 1050;
   display: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 70%;
   padding: 30px;
}

#divProgramResultError {
   width: 100%;
}


#divProgramResultError #programStatusHolder {
   margin-bottom: 0 !important;
}


#spanProgrammingTitleSpinner {
   color: #ffffff;
   width: 1.1rem;
   height: 1.1rem;
   margin-left: 1rem;
   position: relative;
   top: -2px;
}

#modalLanguage .flag {
  width: 100%;
  height: 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border: 3px solid #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

#modalLanguage  .flag:hover {
   transform: scale(1.05);
   box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#modalLanguage .flag.active {

   border-color: #008027;
   box-shadow: 0 0 10px rgba(0,0,0,0.3);

}


div#eb-menu-flag {
   width: 30px;
   height: 20px;
   background-position: center center;
   background-size: cover;
   cursor: pointer;
   background-repeat: no-repeat;
   margin-top: 7px;
   opacity: 0.8;
   border: solid 1px #ffffff40;
   transition: all 0.3s;
}

div#eb-menu-flag:hover {
   opacity: 1;
}