/* tuc_styles.css */

#tuc_container {
  border: 1px solid #ccc;
  padding: 1rem;
}

#tuc_peukert_page {
  border: 1px solid #ccc;
  padding: 1rem;
}

.tuc-close {
  position: fixed;
  right: 6px;
  top: 6px;
  cursor: pointer;
}

#tuc_set_advanced {
  cursor: pointer;
  font-size: 1rem;
  text-align: right;
  margin-bottom: 1rem;
  text-decoration: underline;
}
#tuc_advanced_settings {
  font-size: 1rem;
}
#tuc_advanced_settings label {
  display: inline-block;
  width: 25%;
  color: #0f4f63;
}
#tuc_advanced_settings input {
  width: 55%;
}
.tuc_advanced_descriptor {
  font-size: .8rem;
  display: block;
}

.tuc-button-group {
  display: flex;
  justify-content: space-evenly;
  
}

.tuc-button-group button {
  background-color: #0f4f63;
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
  cursor:pointer;
  
}
#tuc_advanced_update_button {
	transition: background-color: 0.3s, color 0.3s;
}
#tuc_advanced_update_button.updated {
  background-color: #0f634f;  
  color: yellowgreen;
}
	

#tuc_step2 {
  margin-top: 1rem;
  border-top: 1px solid #ccc;
}

.tuc_slider {
  margin: 0;
  padding: 1%;
}
.tuc_slider input {
  width: 98%;

-webkit-appearance: none; /* Override default CSS styles */
appearance: none;

height: 25px; /* Specified height */
background: #0d4166; /*  background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
transition: opacity .2s;
}

.tuc_slider input:hover {
opacity: 1; /* Fully shown on mouse-over */
}

.tuc_slider input::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 35px; /* Slider handle height */
background: #fff; /*  background */
cursor: pointer; /* Cursor on hover */
	outline: 1px solid #234
}

.tuc_slider input::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 35px; /* Slider handle height */
background: #fff; /*  background */
cursor: pointer; /* Cursor on hover */
}


#tuc_hours_label, #tuc_mins_label {
  display: flex;
  justify-content: space-evenly;
  
}
#tuc_power_holder input, .batt-input input, .batt-input select, .tuc-input-holder input{
  margin-top: 1rem;
  font-size: 1.5rem;
  text-align: center;
  width: 70%;
}

.tuc_runtime_result, .tuc_battery_result, .tuc_pk_result  {
  border: 1px solid #000;
  font-weight: bold;
  text-align: center;
  padding: 1rem;
  background-color: #0f4f63;
  color: #fff;/* tuc_styles.css */
}

#tuc_container {
  border: 1px solid #ccc;
  padding: 1rem;
}


#tuc_set_advanced {
  cursor: pointer;
  font-size: 1rem;
  text-align: right;
  margin-bottom: 1rem;
  text-decoration: underline;
}
#tuc_advanced_settings {
  font-size: 1rem;
}
#tuc_advanced_settings label {
  display: inline-block;
  width: 25%;
  color: #0f4f63;
}
#tuc_advanced_settings input {
  width: 55%;
}
.tuc_advanced_descriptor {
  font-size: .8rem;
  display: block;
}

.tucp-input-group {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  
}
.tucp-options {
  display: inline-block;
  font-size: 0.8rem;
  
}

.tuc-button-group {
  display: flex;
  justify-content: space-evenly;
  
}

.tuc-button-group button {
  background-color: #0f4f63;
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
  
}

.tuc_slider {
  margin: 0;
  padding: 1%;
}
.tuc_slider input {
  width: 98%;

-webkit-appearance: none; /* Override default CSS styles */
appearance: none;

height: 25px; /* Specified height */
background: #0d4166; /*  background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
transition: opacity .2s;
}

.tuc_slider input:hover {
opacity: 1; /* Fully shown on mouse-over */
}

.tuc_slider input::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 35px; /* Slider handle height */
background: #fff; /*  background */
cursor: pointer; /* Cursor on hover */
	outline: 1px solid #234
}

.tuc_slider input::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 35px; /* Slider handle height */
background: #fff; /*  background */
cursor: pointer; /* Cursor on hover */
}


#tuc_hours_label, #tuc_mins_label {
  display: flex;
  justify-content: space-evenly;
  
}
#tuc_power_holder input, .batt-input input, .batt-input select, .tuc-input-holder input{
  margin-top: 1rem;
  font-size: 1.5rem;
  text-align: center;
  width: 70%;
}

.tuc_runtime_result, .tuc_battery_result  {
  border: 1px solid #000;
  font-weight: bold;
  text-align: center;
  padding: 1rem;
  background-color: #0f4f63;
  color: #fff;
}

.tuc-button-holder {
  display: flex;
  justify-content: space-evenly;
}
.tuc-choice-button {
  background-image: radial-gradient(#0f4f63,#0d4166);
  background-color: #0f4f63;
  padding: 2rem;
  border-radius:  1rem;
  cursor: pointer;
  
 color: #fff;
 display: flex;
 justify-content: center; /* centers horizontally */
 align-items: center;     /* centers vertically */

  
}



.tuc-button-holder {
  display: flex;
  justify-content: space-evenly;
}
.tuc-choice-button {
  background-image: radial-gradient(#0f4f63,#0d4166);
  background-color: #0f4f63;
  padding: 2rem;
  border-radius:  1rem;
  cursor: pointer;
  
 color: #fff;
 display: flex;
 justify-content: center; /* centers horizontally */
 align-items: center;     /* centers vertically */

  
}



/* Darkened background */
#tuc_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px); /* adds blur effect */
  z-index: 999;
}

/* Popup Window */
#tuc_modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 540px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  z-index: 1000;
  max-height: 80vh;
  overflow-y: auto;
}