body{
    background-color: #dadae4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    color: #ffffff;
}
p{
    margin:0 0;
}
body.purple{
    background-color: #342b60;
}
.bold{
    font-weight: bold;
}
.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.text{
    width: 80%;
    font-size: 40px;
    text-align: center;
    color: #342b60;
}
.image img{
    /* max-height: 704px; */
    max-width: 26em;
}

.nextbutton a{
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    right: 0;
    text-decoration: none;
    color:#ffffff;
    padding: 1.5em 3em;
    border-radius: 70px 0 0 0;
    background-color: #342b60;
}
.nextbutton a img{
    width: 4px;
    margin: 0 10px 0 10px;
}
.nextbutton a.location{
    background-color: #a2c02f;
}
.nextbutton a.usage{
    background-color:#4dbed2
}
.prevbutton a{
    z-index: 3;
    position: fixed;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    text-decoration: none;
    color:#ffffff;
    padding: 30px 50px;
    border-radius: 0 0 70px 0;
    background-color: #483b86;
}
.prevbutton .backtext{
    display: flex;
    flex-direction: column;
}
.prevbutton a img{
    width: 4px;
    margin: 0 10px 0 10px;
}
.menu{
    width: 12%;
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
    padding: 30px;
}
.menu img{
    width: 100%;
}
.location.selection{
    -webkit-appearance:none;
    left: -4px;
    position: relative;
    margin-top: 197px;
    width: 12.5em;
    height: 4em;
    border-radius: 70px;
    color: #ffffff;
    font-size:1em;
    border: none;
    padding:20px;
    background-color: #483b86;
}
.locationselection img{
    position: absolute;

}
.locationselection{
    transform: translate(10%) scale(1.5);
    height: 504px;
}
.locationtext{
    width:80%;
    font-size: 40px;
    text-align: center;
}
.Title p{
    margin:5px 0;
    text-align: center;
}
.Title{
    transform: scale(1.5);
}
.locationspage .Title{
    margin-bottom: 6em;
}
.usagepage .Title{
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.usagepage{
    /* overflow-y: auto; */
    margin: 100px 0px 200px 0px;
}
.usagepage .usageselection{
    margin-left: 30px;
}

.usageselection{
    transform: scale(1.5);
    margin-top:2em;
    display: flex;
    flex-direction: row;
}
.usagepage .usageselection{
    margin-bottom:3em;
}
.content{
    transform: scale(1.5);
    margin-top: 1em;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.Usage{
    cursor: pointer;
    padding:10px;
    height: 1.2em;
    background-color: #483b86;
    display: flex;
    flex-direction: row;
}
.Usage img{
    width:1.1em;
    margin-left: 10px;
    margin-right: 10px;
}
.Usage.selected{
    background-color: #a2c02f;
}
.left{
    border-radius: 20px 0 0 20px;
}
.right{
    border-radius: 0 20px 20px 0;
}
.subtext{
    padding: 20px 0 10px 0;
    font-size: 100%;
    color:#8b79e2;
    text-align: center;
    text-transform: uppercase;
}

.outCome{
    transform: scale(1.5);
    margin-top:3em;
    margin-left: 10em;
    display: flex;
    flex-direction: row;
    padding-top: 50px;
}
.outContainer{
    flex-direction: column;
}
.outCome .oc{
    text-align: right;
    padding-right: 20px;
    width: 28%;
    color:#e4067e;
}
.menuModal{
    position: absolute;
    width: 0;
    top: 0;
    right: 0;
    height: 0;
    background-color: #342b60;
    display: none;
    z-index: 200;
}
.modalContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100%;
    text-align: center;
}
.closeModal img {
    width: 75px;
    top: 0;
    position: absolute;
    right: 0;
    padding: 30px;
    cursor: pointer;
}
.modalContainer a{
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    font-size: 2em;
    padding: 0 0 35px 0;
}
.modalContainer a span{
    color:#4dbed2;
    font-size: 42px;
}
.modal-links{
    display: flex;
    flex-direction: column;
    padding: 50px;

}
.modal-links a{
    color:#4dbed2;
    text-decoration: none;
    padding: 0 0 10px 0;
}
.aastaneTarb,.area{
    border: none;
    width: 90%;
    height: 50px;
    font-size: 30px;
    color:#4dbed2;
    text-align: right;
    padding: 20px;
    border-radius: 40px;
    background-color: #483b86;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}
.water,.house{
    display: flex;
    align-items: center;
    justify-content: center;
}
.resultArea div{
    width: 14em;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #483b86;
    border-radius: 40px;
    padding: 10px;
    margin-bottom: 10px;
}
.resultArea div:last-of-type{
    background-color: #e4067e;
}
.resultArea div p{
    font-size:0.9em;
    width: 25%;
    padding:5px
}
.resultArea div p:first-of-type{
    width: 25%;
    color:#8b79e2;
    font-size: 13px;
}
.resultArea div:last-of-type p:first-of-type{
    color:#ffffff
}
.resultArea div:first-of-type{
    background-color: #342b60;
}
.resultArea div:first-of-type p{
    font-size: 13px;
    color:#8b79e2;
}
.resultArea div:first-of-type p:nth-child(even){
    width: 18%;
}
.resultArea tr{
    background-color: #483b86;
    /* border: 0px; */
    /* border-spacing: 0px; */
    border-radius: 20px;
    color:#8b79e2;
}
.resultArea td,.resultArea tr:first-of-type td{
    padding: 10px;
    color:#8b79e2;
    margin-bottom: 30px;
    /* border-radius: 20px; */
    background-color: #483b86;
    text-align: center;
     border-bottom: 3px solid #342b60;
    border-radius:30px;
}
.resultArea .co2 td{
    color: #ffffff;
    background-color: #e4067e;
}
td:not(:first-of-type){
    color: #ffffff;
}
tr{
    border-radius: 20px;
}
table{
    border-collapse: collapse;
}
input[type="radio"]{
    display: none;
}
.water label{
    display: flex;
    text-align: right;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    background-color: #483b86;
    padding: 10px;
    min-height: 70px;
    min-width: 100px;
    border-radius: 50px;
    margin-right: 20px;
}
.water label img{
    position: relative;
    margin-right: 1em;
}
.house label{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #483b86;
    padding: 10px;
    min-height: 70px;
    min-width: 7em;
    border-radius: 50px;
    margin-right: 20px;
}
.house label img{
    margin-bottom: 10px;
}
.efficiency{
    display: flex;
    flex-direction: row;
}
.efficiency label{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #483b86;
    padding: 10px;
    min-height: 70px;
    min-width: 1.5em;
    border-radius: 50px;
    margin-right: 20px;
}
.efficiency label img{
    width: 1.5em;
    margin-bottom: 10px;
}
label.selected{
    background-color: #e4067e;;
}
.types.selection{
    -webkit-appearance:none;
    margin:10px 0 10px 0;
    width: 21em;
    height: 5em;
    border-radius: 25px;
    color: #ffffff;
    border: none;
    padding:20px;
    background-color: #483b86;
}
.resultArea{
    transform: scale(1.5);
    margin-top:7em;
    display: flex;
    flex-direction: column;
}
.content.dontKnowUsage{
    margin-top: 5em;
    margin-bottom: 3em;
    margin-left: 71px;
}
.weatherarea{
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    width: 17em;
    padding: 0 26px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 5.4em;
    border-radius: 0 0 70px 0;
    background-color: #3a306b;
}
.weatherarea .temperature{
    margin-right: 20px;
}
.bottomLogo{
    position: fixed;
    bottom: 0;
    left:0;
    padding:20px;
}
.container.info{
    color:#342b60;
}
.container.info p,.container.info h2{
    width: 60%;
    text-align: center;
    padding-bottom: 20px;
}
.prevbutton.info a img{
    cursor: pointer;
    width: inherit;
    margin: 0 10px 0 10px;
}

.water .description {
    width: 200px;
}

.content .selection {
    background-color: #483b86;
    border-radius: 40px;
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: center;

}

.content .selection .aastaneTarb {
    margin-right: 30px;
    margin-left: 30px;
    width: 240px;
    font-size: 40px;
    text-align: center;
}

.content .selection .area {
    margin-right: 30px;
    margin-left: 30px;
    width: 300px;
    font-size: 40px;
    text-align: center;
}

.content .selection .units {
    color: #e4067e;
}