* {
    font-family: 'Play', sans-serif;

}

.login-container {
    background: rgb(20, 186, 73);
    background: linear-gradient(#0d5364 0%, #528490 100%);
    /* background-image: url(../img/background-img.png); */
}

footer {
    text-align: center;
    padding: 30px;
    background-color: rgba(236, 236, 236, 0.815);
    margin-top: 30px;
}

header {
    background: rgb(20, 186, 73);
    background: linear-gradient(356deg, rgba(20, 186, 73, 1) 0%, rgba(20, 205, 125, 1) 51%, rgba(0, 200, 154, 1) 100%);
}

.login {
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: bold;
}

.input-text input {
    padding: 8px;
    padding-left: 15px;
    font-size: 15px;
    border: 1px #0d5364 solid;

}

.input-text {
    position: relative;
}

.input-text input.error {
    padding: 8px;
    padding-left: 14px;
    font-size: 15px;
    border: 2px #fc2e00 solid;
    border-radius: 50px;

}

.input-text input:focus-visible {
    outline: none;

}

.btn-lg {
    padding: 10px 30px;
    background-color: #0d5364;
    color: white;
    font-size: 18px;
    border: none;
    border-radius: 50px;
    font-weight: bold;

}

.btn-sm {
    padding: 10px 30px;
    background-color: #0d5364;
    color: white;
    font-size: 15px;
    border: none;
    border-radius: 50px;
    font-weight: bold;

}

button i {
    padding: 5px;
}

.btn-icon {
    padding: 15px 15px;
    background-color: #0d5364;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 50px;
    font-weight: bold;

}

.btn-icon:hover {
    background-color: #306c7a;
}

.btn-lg:hover,
.btn-sm:hover {
    background-color: #306c7a;
}

.btn-lg:active,
.btn-sm:active {
    background-color: #528490;
}

.error-login {
    color: rgb(245, 65, 65);
    display: none;
}

/* .input-text i {
    height: 10px;
    width: 10px;
    position: absolute;
    top: 10px;
    left: 1000px;
    color:#1a4d7a;
} */

.real-stat {
    background: #f5f5f5;
    border-radius: 10px;
    padding-top: 15px;
    padding-bottom: 15px;

}

.real-stat i {
    font-size: 1.5em;
    color: #1a4d7a;
}

.stat-title {
    font-size: 1em;

}

.stat-value {
    font-weight: bold;

    font-size: 1.5em;
}

#selectMsg {
    position: absolute;
    top: 0;
    z-index: 10000;
    width: 100%;
    background: #1a4d7a;
    color: white;
    text-align: center;
}

#station_id,
#compStation {
    color: #fb6b4b;
    font-weight: bold;
}

.stat-section {
    /* border-top: 1px solid #1a4d7a; */

    font-size: 18px;
    padding: 15px;
}

.input-dp input {
    padding: 10px;
    border-radius: 20px;
    border: 2px solid #1a4d7a;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;

}

label {
    font-weight: bold;
}

#info-pane {
    overflow-y: scroll;
    overflow-x: hidden;
}

.stationCb input {
    height: 20px;
    width: 20px;
}

/* width */
::-webkit-scrollbar {
    width: 10px;

}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #1a4d7a;
    border-radius: 100px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #204261;
}

.stat-section h4 {
    color: #fb6b4b;
}

#info-pane h3 {
    background-color: rgb(26, 77, 122);
    color: white;

}

.red {
    color: rgb(243, 48, 48);
    font-size: 15px;
}

.sect {
    border-bottom: 2px solid #1a4d7a;
    ;
}


.login-form {
    background-color: rgba(243, 243, 243, 0.9);
    border-radius: 20px;
    box-shadow: 1px -1px 12px 1px rgba(163, 163, 163, 0.507);
    -webkit-box-shadow: 1px -1px 12px 1px rgba(163, 163, 163, 0.473);
    -moz-box-shadow: 1px -1px 12px 1px rgba(163, 163, 163, 0.493);
}

.interv {
    background-color: #f9f9f9;
    cursor: pointer;
    /* border-radius: 10px; */
    text-decoration: none;
    color: rgb(75, 75, 75);
}

.interv:hover {
    box-shadow: 5px 5px 0px -4px rgba(186, 186, 186, 0.75);
    -webkit-box-shadow: 5px 5px 0px -4px rgba(186, 186, 186, 0.75);
    -moz-box-shadow: 5px 5px 0px -4px rgba(186, 186, 186, 0.75);
}




.interv p {
    font-size: 20px;
}

.cont-full-w {
    min-height: 100vh;
}

.interv-desc p {
    background-color: #f7f7f7;
    padding: 14px;
    border-radius: 10px;

}

/* .slider {
    width: 100%;
} */


.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 15px;
    background: #d3d3d3;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 50px;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background: #0995cc;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #0995cc;
    cursor: pointer;
}

#solarSliderOutput,
#perSum,
#recSliderOutput {
    font-size: 25px;
}

.error-input {
    color: #fc2e00;
    display: none;
}

.result {
    background-color: #047cdfe3;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    border-radius: 10px;
    color: white;
    box-shadow: 1px -1px 12px 1px rgba(163, 163, 163, 0.507);
    -webkit-box-shadow: 1px -1px 12px 1px rgba(163, 163, 163, 0.527);
    -moz-box-shadow: 1px -1px 12px 1px rgba(163, 163, 163, 0.555);
    position: relative;

}

.result-value {
    color: white;
    font-size: 40px;
}

.monades {
    font-size: 20px;
}

#solarCost {
    font-size: 40px;
}

.slider-output {
    font-size: 40px;

}

.paradoxes {
    font-size: 14px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}



.radio-input>input {
    height: 20px;
    width: 20px;
    align-self: center;

}

.radio-input>label {
    font-size: 18px;
}

.title-blue {
    background-color: #6396ea;
    color: white;
    padding: 30px;
    box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -webkit-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -moz-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
}

.title-teal {
    background-color: #6dbfa1;
    color: white;
    padding: 30px;
    box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -webkit-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -moz-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
}

.title-green {
    background-color: #41cf32;
    color: white;
    padding: 30px;
    box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -webkit-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -moz-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
}

.title-dark-green {
    background-color: #077c45;
    color: white;
    padding: 30px;
    box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -webkit-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -moz-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
}

.title-yellow {
    background-color: #feef00;
    color: rgb(75, 75, 75);
    padding: 30px;
    box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -webkit-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -moz-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
}

.title-brown {
    background-color: #bc8458;
    color: white;
    padding: 30px;
    box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -webkit-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
    -moz-box-shadow: 0px 7px 21px -10px rgba(125, 125, 125, 0.60);
}

.bulb-bg-blue {

    background-image: url(../img/bg-bulbs-blue.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.bulb-bg-green {

    background-image: url(../img/bg-bulb-green.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.euros-bg-blue {

    background-image: url(../img/bg-euros-blue.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.euros-bg-green {

    background-image: url(../img/bg-euros-green.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.euros-bg-dgreen {

    background-image: url(../img/bg-euros-dgreen.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.kwh-bg-blue {

    background-image: url(../img/bg-kwh-blue.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.kwh-bg-green {

    background-image: url(../img/bg-kwh-green.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.co2-bg-blue {

    background-image: url(../img/bg-co2-blue.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.co2-bg-green {

    background-image: url(../img/bg-co2-green.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.co2-bg-dgreen {

    background-image: url(../img/bg-co2-dgreen.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.building-bg-blue {

    background-image: url(../img/bg-building-blue.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.building-bg-green {

    background-image: url(../img/bg-building-green.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.solar-bg-blue {

    background-image: url(../img/bg-solar-blue.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.co2-bg-yellow {

    background-image: url(../img/bg-CO2-yellow.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: rgb(75, 75, 75);



}

.euros-bg-yellow {

    background-image: url(../img/bg-euros-yellow.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: rgb(75, 75, 75);

}


.co2-bg-teal {

    background-image: url(../img/bg-co2-teal.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: rgb(75, 75, 75);

}

.rec-bg-teal {

    background-image: url(../img/bg-rec-teal.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: rgb(75, 75, 75);

}

.euros-bg-teal {
    background-image: url(../img/bg-euros-teal.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: rgb(75, 75, 75);
}

.co2-bg-yellow .result-value {
    color: rgb(75, 75, 75);

}

.euros-bg-yellow .result-value {
    color: rgb(75, 75, 75);

}

.euros-bg-brown {
    background-image: url(../img/bg-euros-brown.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.co2-bg-brown {
    background-image: url(../img/bg-co2-brown.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

select {
    border: none;
    border: 1px solid black;
    border-radius: 100px;
    padding: 10px;
    height: 40px;

}

select[name=fuelType] {
    height: 40px;
    width: 180px;
    border: none;
    border: 1px solid black;
    border-radius: 100px;
    padding: 10px;

}

select[name=vehicleType] {
    height: 40px;
    width: 180px;
    border: none;
    border: 1px solid black;
    border-radius: 100px;
    padding: 10px;
}



input[type=number] {
    height: 40px;
    border: none;
    border: 1px solid black;
    border-radius: 100px;
    padding: 15px;
    font-size: 18px;
}

input[id=treesNum] {
    height: 40px;
    width: 90px;
    border: none;
    border: 1px solid black;
    border-radius: 100px;
    padding: 10px;
}

.dash-cont {
    min-height: 100vh;
}

.scenario-result {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    color: white;
    border-radius: 100px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}



#results {
    visibility: hidden;
    height: 0px;
    width: 0px;

    transition: width 0.6s, height 0.2s linear;

}

.scenario-result h5 {
    font-size: 1.6rem;
}

.scenario-result ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 30px;
    margin-bottom: 0;
    font-size: 1.1em;

}

.scenario-result ul li span {

    font-size: 1.2em;

}

.results-list {
    visibility: hidden;
}

#perSum {
    background-color: #0995cc;
    color: white;
    padding: 10px;
    border-radius: 100px;
}

.error-bg {
    background-color: rgb(236, 33, 33) !important;
}

.input-sect {
    background-color: #f5f5f5;
    padding: 20px;
    margin-top: 10px;
}

.input-sect p {
    font-size: 20px;
}

.sum {
    background-color: rgb(76, 76, 197);
}

.intro p {
    font-size: large;
    line-height: 26px;
    text-align: justify;

}

.intro-list {
    display: flex;
    list-style-type: none;
    padding: 0;
    gap: 15px;

}

.intro-list li {
    display: flex;
    align-items: center;
    padding: 24px;
    text-align: center;
    background-color: #306c7a;
    color: white;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.intro-data li {
    background-color: #538591;
}

.list-contact {
    list-style: none;
    padding: 0;
}

.list-contact li {
    margin-top: 5px;
}

.contact h5 {
    background-color: #0d5364;
    padding: 10px;
    border-radius: 10px;
}

.contact {
    background-color: #538591;
    border-radius: 10px;

    padding: 20px;
    color: white;
}

.disabled {
    background-color: grey;
}

.disabled:hover {
    background-color: grey;
}

.disabled:active {
    background-color: grey;
}

.led {

    /* background-color: #6dbfa1; */

    background-color: #41cf32;



    /* background-color: #bc8458; */


}

.led2 {

    /* background-color: #6dbfa1; */

    background-color: #30b821;



    /* background-color: #bc8458; */


}

.solar {
    background-color: #6396ea;

}

.electromobility2 {
    background-color: #ffcd00;
    color: rgb(68, 68, 68);

}

.electromobility {
    background-color: #feef00;
    color: rgb(68, 68, 68);

}

.trees {
    background-color: #077c45;

}


.bio {
    background-color: #bc8458;

}

.recycling {
    background-color: #6dbfa1;
}