.settingsNavBtnsAsTxt{
	color: white;
    background-color: #48437b;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    padding-bottom: 4px;
}


.eptc_api_lbl{
	color:black;
	font-weight:bold;
	font-size:14px;
}
.eptc_apiBenefits_Txt{
	font-size:20px;
	color:black;
	
}

.arrowD182378_API_allPageDiv{
	border-radius: 20px;
    display: flex;
    background-color: #e7e9ef;
    padding-top: 4%;
    padding-bottom: 4%;
    padding-right: 4%;
	padding-top: 2%;
}

.api_Credentials_div{
	margin-left: 2%;
	width: 100%;
	background-color: #f0f5ef;
	padding-left: 2%;
	padding-bottom: 2%;
	border-radius: 20px;
}

.api_Benefits_div{
	margin-left: 2%;
	width: 30%;
	background-color: #f0f5ef;
	padding-left: 2%;
	padding-bottom: 2%;
	border-radius: 20px;
}
.apiBeneSpanCorrect{
	font-size:22px;
	font-weight:bold;
	color:green;
	margin-right:10%;
	float:right;
}

.eptc_api_txtbox{
	margin-left: auto;
	margin-right:10%;
	width:50%;
}

.intro_text_class{
	background-color:white;
	padding: 8px;
    border-radius: 8px;
	    margin-top: 2%;
    width: 92%;
    padding: 2%;
}
.apiValiTickSpanCorrect{
	margin-right:8%;
	font-size:30px;
	font-weight:bold;
	color:green;
}

.apiValiTickSpanInCorrect{
	margin-right:8%;
	font-size:30px;
	font-weight:bold;
	color:red;
}


/* CSS for the container div */

.arrowD182378_container_dark{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    background-color: black;
    width: 100%;
	justify-content: left;	
	
}
/*each select box */
.arrowD182378_container_dark select {
    /* Ensure box sizing includes padding and border */
    box-sizing: border-box;
    width: 10%; /* Each select box takes 50% of the parent's width */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
	background-color:black !important;
	color:white !important;
		width:14%;
}

/* CSS for the container div */

.arrowD182378_container_light {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    background-color: white;
    width: 100%;
	justify-content: left;
}
.arrowD182378_container_dark{
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    background-color: black;
    width: 100%;
	justify-content: left;	
	flex-wrap: wrap;
	
}	
/* .arrowD182378_container_vertical {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 10px;
    background-color: white;
	flex-direction: column;
	justify-content: flex-start;
} */
/* .arrowD182378_container_vertical select {
    width: 100%; /* Full width for each select element in vertical mode */
} */


/*each select box */
.arrowD182378_container_light select {
    box-sizing: border-box;
    width: 10%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
	background-color:white !important;
	color:black !important;
	width:14%;
}



/* get results btn */
.getResultsBtn{
	color:white;
	font-weight:bold;
    background-color: #4d69eb;
    border-radius: 9px;
    box-shadow: cadetblue;
    box-shadow: 2px 2px #888888;
	font-size: 18px;
}

/* speedometer start */

.meterParent_div{
	background-color:white;
	width:30%;
	float:left;
}

.power{
  position:absolute; 
  margin-top:-10px;
  margin-left:120px;
  color:white;
  font-weight:bold;
}

.powerAmount{
  position:absolute; 
  margin-top:20px;
  margin-left:120px;
  font-size:30px;
  color:white;
  font-weight:bold;
}
.stageTxt_p{
  position:absolute; 
  margin-top:50px;
  margin-left:126px;
  color:#33f9cd;
  font-weight:bold;
}

.stageTxt_t{
  position:absolute; 
  margin-top:50px;
  margin-left:126px;
  color:#33f9cd;
  font-weight:bold;
}

.speed__wheel {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #000;
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 90%);
}

.speed__tick {
  display: flex;
  gap: 1px;
}

.tick {
  transform-origin: bottom;
  position: absolute;
  background: linear-gradient(to top, transparent 90%, red 90%);
  height: 140px;
  width: 2px;
  top: 10px;
  left: 50%;
  transform: rotate(var(--angle)) rotateZ(-127deg);
}
.tick:nth-child(odd)::before {
  position: absolute;
  content: attr(value) '';
  color: #fff;
  left: -8px;
  top: 20px;
  z-index: 11;
  transform: rotate(var(--position-number));
}

/* Define individual styles for each tick based on their value attribute */
.tick[value="0"] {
    transform: rotate(216deg);
}

.tick[value="10"] {
    transform: rotate(234deg);
}

.tick[value="20"] {
    transform: rotate(252deg);
}

.tick[value="30"] {
    transform: rotate(270deg);
}

.tick[value="40"] {
    transform: rotate(288deg);
}

.tick[value="50"] {
    transform: rotate(306deg);
}

.tick[value="60"] {
    transform: rotate(324deg);
}

.tick[value="70"] {
    transform: rotate(342deg);
}

.tick[value="80"] {
    transform: rotate(0deg);
}

.tick[value="90"] {
    transform: rotate(18deg);
}

.tick[value="100"] {
    transform: rotate(36deg);
}

.tick[value="110"] {
    transform: rotate(54deg);
}

.tick[value="120"] {
    transform: rotate(72deg);
}

.tick[value="130"] {
    transform: rotate(90deg);
}

.tick[value="140"] {
    transform: rotate(108deg);
}

.tick[value="160"] {
    transform: rotate(126deg);
}
	

.pointer {
  position: relative;
  background: yellow;
  height: 190px;
  width: 20px;
  left: 140px;
  top: 3px;
  clip-path: polygon(9px 10px, 11px 10px, 20px 150px, 10px 190px, 0 150px);
  transform-origin: 10px 145px;
  animation: animate-pointer 10s ease-in-out infinite;
}

.pointer::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: gray;
  top: 140px;
  left: 5px;
  border-radius: 50%;
}

.endpoint {
  position: absolute;
  width: 7px;
  height: 7px;
  background: grey;
  top: 225px;
  left: 235px;
  border-radius: 50%;
}

@keyframes animate-pointer {
  0% {
    transform: rotate(-130deg);
  }
  80% {
    transform: rotate(120deg);
  }
  100% {
    transform: rotate(-130deg);
  }
}

/* Media query to change layout on smaller screens START*/
@media screen and (max-width: 768px) {
	
    .rslts_div_parent {
        flex-direction: column; /* Stack children vertically on smaller screens */
    }
	
    .arrowD182378_API_allPageDiv {
        flex-direction: column; /* Stack children vertically on smaller screens */
    }
	.api_Credentials_div{
		width:96%!important;
	}
	.api_Benefits_div{
		width:96%!important;
		margin-top:2%;
	}

    /* Reset child width to 100% for single column layout */
    .rslts_txt {
        width: 100%;
    }

	.meterParent_div {
        width: 100%;
    }
	
	.arrowD182378_select_dark{
		width:100%;
	}
	.arrowD182378_select{
		width:100%;
	}
	
	
	.power{
  position:absolute; 
  margin-top:-10px;
  margin-left:40px;
  color:#7DF9FF;
  font-weight:bold;
  font-size:14px;
  text-shadow: 1px 1px 1px #000;
}

.powerAmount{
  position:absolute; 
  margin-top:4px;
  margin-left:60px;
  font-size:14px;
  color:#7DF9FF;
  font-weight:bold;
  text-shadow: 1px 1px 1px #000;
}
.stageTxt_p{
  position:absolute; 
  margin-top:50px;
  margin-left:126px;
  color:#33f9cd;
  font-weight:bold;
}

.stageTxt_t{
  position:absolute; 
  margin-top:50px;
  margin-left:126px;
  color:#33f9cd;
  font-weight:bold;
}

.speed__wheel {
  position: relative;
  width: 150px; /* Half the size of the original width */
  height: 150px; /* Half the size of the original height */
  border-radius: 50%;
  background-color: #000;
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 90%);
}

.speed__tick {
  display: flex;
  gap: 1px;
}

.tick {
  transform-origin: bottom;
  position: absolute;
  background: linear-gradient(to top, transparent 90%, red 90%);
  height: 70px;
  width: 2px;
  top: 5px;
  left: 50%;
  transform: rotate(var(--angle)) rotateZ(-127deg);
  font-size:12px;
}
.tick:nth-child(odd)::before {
  position: absolute;
  content: attr(value) '';
  color: #fff;
  left: -8px;
  top: 10px;
  z-index: 11;
  transform: rotate(var(--position-number));
  
}

/* Define individual styles for each tick based on their value attribute */
.tick[value="0"] {
    transform: rotate(216deg);
}

.tick[value="10"] {
    transform: rotate(234deg);
}

.tick[value="20"] {
    transform: rotate(252deg);
}

.tick[value="30"] {
    transform: rotate(270deg);
}

.tick[value="40"] {
    transform: rotate(288deg);
}

.tick[value="50"] {
    transform: rotate(306deg);
}

.tick[value="60"] {
    transform: rotate(324deg);
}

.tick[value="70"] {
    transform: rotate(342deg);
}

.tick[value="80"] {
    transform: rotate(0deg);
}

.tick[value="90"] {
    transform: rotate(18deg);
}

.tick[value="100"] {
    transform: rotate(36deg);
}

.tick[value="110"] {
    transform: rotate(54deg);
}

.tick[value="120"] {
    transform: rotate(72deg);
}

.tick[value="130"] {
    transform: rotate(90deg);
}

.tick[value="140"] {
    transform: rotate(108deg);
}

.tick[value="160"] {
    transform: rotate(130deg);
}
	

.pointer {
  position: relative;
  background: yellow;
  height: 95px; /* Half the size of the original height */
  width: 10px; /* Maintain the original width */
  left: 75px; /* Half the size of the original left position */
  top: 2px; /* Half the size of the original top position */
  clip-path: polygon(9px 10px, 11px 10px, 20px 75px, 10px 95px, 0 75px);
  transform-origin: 10px 72.5px; /* Half the size of the original transform-origin */
  animation: animate-pointer 10s ease-in-out infinite;
}

.pointer::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: gray;
  top: 70px;
  left: 2px;
  border-radius: 50%;
}

.endpoint {
  position: absolute;
  width: 3.5px; /* Half the size of the original width */
  height: 3.5px; /* Half the size of the original height */
  background: grey;
  top: 112.5px; /* Half the size of the original top position */
  left: 117.5px; /* Half the size of the original left position */
  border-radius: 50%;
}
}
/* Media query to change layout on smaller screens END*/



/* speedometer end */

/* rsults tbl */
.erpc_rslts_tbl th {
    padding: 10px;
}
.erpc_rslts_tbl td {
    border: 1px solid #ccc;
    padding: 10px;
	width: 4%;
	box-sizing: border-box; 
}
/* .erpc_rslts_tbl{
	background-color: #ffffff;
}
.erpc_rslts_tbl th {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
}

.erpc_rslts_tbl td {
    border: 1px solid #ccc;
    padding: 10px;
	width: 10%;
	box-sizing: border-box; 
}

.erpc_rslts_tbl tr {
   background-color: #ffffff;
} */

/* Power Gain Bars...start */
.arrow_greenx,.arrow_hover-green:hover{color:#fff!important;background-color:red!important}
.arrow_containerx,.arrow_panel{padding:0.01em 16px}.arrow_panel{margin-top:16px;margin-bottom:16px}
.arrow_btnx,.arrow_button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.arrow_light-greyx,.arrow_hover-light-grey:hover,.arrow_light-gray,.arrow_hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
/* Power Gain Bars...end */



/* Admin Styling...start */

.arrowD182378_adminOptionPanel_holder{
	margin-left: 20px;
    background-color: #f0f5ef;
    border-radius: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 14px;
	width:94%;
	
}

.arrowd182378_adminOptionPanel{
	margin-bottom:2%;
}

.arrowD182378_adminOptionPanel_large{
	margin-left: 20px;
    background-color: #f0f5f0;
    border-radius: 20px;
    height: 160px;
    margin-right: 85px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 14px;	
}

.arrow_adminSelDiv{
	float:right;
	margin-right:20%;
}
.arrow_adminSelDiv select{
	width:200px;
}

.arrowD182378_adminOptionH3{
	margin-left:2%;
}

.arrowD182378_adminOptionLbl{
	margin-left:4%;
}
.arrowd182378_adminSettingsSetup{
	width:96%;
	margin-top: 14px;
}
.arrowd182378_adminSettingsSetup_colOne{
	width:30%;
	background-color:white;
	padding-left:1%;
}
.arrowd182378_adminSettingsSetup_readout_h3{
    color: red;
    padding-left: 10px;
    font-weight: unset;
    font-size: 16px;
}
.arrowd182378_adminSettingsSetup_rowOne{
	height:4%;
}
.arrowd182378_adminSettingsSetup_rowSpacer{
	height:1%;
	background-color: #ffffff;
}
.arrowd182378_adminSettingsSetup_ExampleHeader{
    height: 34px;
    background-color: #f5f5f5;
    padding-left: 10px;
    padding-top: 16px;
    font-weight: bold;
    padding-bottom: 1%;
    font-size: 20px;
}
/* Admin Styling...end */
/* power bars start*/
.power_gain_bars_div{
    margin: 4%;
    background-color: #e1dede;
    padding-left: 2%;
    padding-right: 2%;
    border-radius: 10px;
    padding-top: 2%;
    padding-bottom: 2%;
}
/* power bars end*/

.arrowd182378_savingProgressDiv {
 	display:none;
    padding-top: 1px;
    padding-bottom: 10px;
    background-color: #ddd;
    padding-left: 2%;
    width: 94%;
    border-radius: 10px;
    margin-top: 10px;
}

.arrowd182378_savingProgressBarDiv {
  width: 1%;
  height: 30px;
  background-color: #04AA6D;
}
.arrowd182378_savingResultsDiv{
	display:none;
	background-color: #d2e3f1;
    width: 94%;
    padding: .1%;
    padding-left: 2%;
    margin-top: 10px;
    margin-bottom: 1%;
	border-radius: 10px;
}
.arrowd182378_shortCodeDisplay{
	color: #ffffff;
    font-weight: bold;
    font-size: 28px;
    background-color: black;
    width: 70%;
    height: 40px;
    padding-top: 20px;
    padding-left: 20px;
}