/* orYx blue #00234c / orYx white #fafafa / orYx orange #ffb000*/
body {font-family: Arial, sans-serif; background-color: #fafafa; color: #00234c; margin: 0; padding: 0;}
.main_container {width: 80%; margin: auto; padding: 10px;}
.homecontainer {width: 80%; margin: auto; padding: 10px; text-align: center;}
.columns-container1 {display: flex; justify-content: space-between; text-align: center; border: 4px solid #ffb000; border-radius: 6px;}
.columns-container2 {display: flex; justify-content: space-between; text-align: left; padding: 20px 40px; border: 4px solid #ffb000; border-radius: 6px;}
.column {flex: 1; padding: 0 10px;}
.container {width: 100%; margin: auto; padding: 10px; text-align: center;}
header {padding: 10px 0; display: flex; align-items: center; justify-content: space-between;}
header img#logo {width: 115px; height: auto;}
header h2 {flex-grow: 1; text-align: center;}
img#chart {max-height: 580px; width: auto;}
.footer {position: fixed; left: 0; bottom: 0; width: 100%; background-color: #00234c; color: #ffb000; text-align: center; padding: 10px 0;}		
.text-para {margin: 8px 10px; padding: 8px; width: 70%; font-size: 15px;}
input {margin: 8px 0; padding: 8px; width: 74%; border-radius: 4px; border: none; font-size: 13px;}
select {margin: 8px 0; padding: 8px; width: 70%; border-radius: 4px; border: none; font-size: 13px; background-color: #fafafa}
button {margin: 10px 0; padding: 10px; width: 71%; border-radius: 4px; border: none; background-color: #043a7a; color: #fafafa; cursor: pointer; font-size: 15px}
button:hover {background-color: #002080;}
.button-style {display: inline-block; padding: 10px; background-color: #043a7a; color: #fafafa; text-align: center; text-decoration: none; border: none; border-radius: 4px; cursor: pointer; font-size: 15px;}
.button-style:hover {background-color: #002080;}
.help-link {float: right; color: #00234c; text-decoration: none;}
.help-link:hover {text-decoration: underline;}
.download-link {color: #00234c; text-decoration: underline;}
.white-text-input {color: #fafafa; background-color: #043a7a;}
/* Index Page */
form {background-color: #00234c; color: #fafafa; padding: 10px; border-radius: 8px; margin-top: 20px;}
.p-style {font-size: 16px; line-height: 1.2;}

/* Result Page */
.container .content-wrapper {display: flex; justify-content: space-between;}
@media (max-width: 768px) { .columns-container {flex-direction: column;} .column {padding: 0 10px;} input, select {width: 100%; }}

/* SPEEDOMETER */
.wrapper {display: table; margin-left: 100px; transform: scale(0.9); transform-origin: center; /* Adjust as needed */}
.wrapper-header {font-family: Arial, Helvetica, sans-serif; text-align: center; color: rgba(255, 255, 255, 0.74); margin: 30px 0 15px; font-weight: normal;}
.heart {margin: 0 8px;display: inline-block; animation: simplePulse ease-in-out 1.1s infinite;}
.gauge {font-family: Arial, Helvetica, sans-serif; background: #e7e7e7; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29); width: 200px; height: 100px; border-radius: 100px 100px 0 0; position: relative; overflow: hidden; transform: scale(1.9);}
.gauge.min-scaled {transform: scale(0.5);}
.gauge-center {width: 60%; height: 60%; background: #15222E; border-radius: 100px 100px 0 0; position: absolute; box-shadow: 0 -13px 15px -10px rgba(0, 0, 0, 0.28); right: 21%; bottom: 0; text-align: center;}
.gauge-center .label, .gauge-center .number {display: block; width: 100%; text-align: center;}
.gauge-center .label {font-size: 0.75em; opacity: 0.6; margin: 1.1em 0 0.3em 0;}
.gauge-center .number {font-size: 1.4em;}

.needle {
  width: 78px;
  height: 7px;
  background: #15222E;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 100%;
  border-top-right-radius: 5px;
  position: absolute;
  bottom: 4px;
  left: 20px;
  transform-origin: 100% 4px;
  animation: speed 5s infinite;
  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.38);
  transform: rotate(60deg);
}

.slice-colors .st {
  position: absolute;
  bottom: 0;
  width: 60px;
  height: 0;
  border-bottom: 80px solid #000;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

.slice-colors .st.slice-item:nth-child(1) {
  border-bottom-color: #15C63C; /*red*/
  left: -5px;
}

.slice-colors .st.slice-item:nth-child(2){
  transform-origin: right;
  border-bottom-color: #EB8916; /*orange*/
  transform: rotate(145deg);
  top: 12px;
  left: -30px;
}

.slice-colors .st.slice-item:nth-child(3){
  transform-origin: right;
  border-bottom-color: #EB8916; /*orange*/
  transform: rotate(225deg);
  top: -50px;
  left: 25px;
}

.slice-colors .st.slice-item:nth-child(4){
  transform-origin: right;
  transform: rotate(35deg);
  right: -10px;
  bottom: -28px;
  border-bottom-color: #D74141; /*green*/
}

.slice-colors .st.slice-item:nth-child(5){ 
  transform-origin: right;
  transform: rotate(28deg);
  right: -10px;
  bottom: -50px;
  border-bottom-color: #D74141; /*green*/
}