.solar-energy-simulator table.form-table th {
    width: 20%;
    padding: 20px 10px 15px 10px;
    vertical-align: top;
}
.solar-energy-simulator td > select {
    width: 100%;
    max-width: 100%;
    border: solid 1px #ddd;
    padding:10px;
    font-size:1.1em;
}
.solar-energy-simulator td > input {
    width: 100%;
    padding:10px;
    border: solid 1px #ddd;
    font-size:1.1em;
}
.solar-energy-simulator td > input[type="number"]{
    text-align:right;
}
.solar-energy-simulator td > ul{
    margin-top:0px;
}
ul.panels li,
ul.texts li{
    background:#fff;
    padding:10px 5px;
}
ul.panels > li,
ul.texts > li{
    border-radius:5px;
    border:solid 1px #ddd;
    position: relative;
    margin-bottom: 18px;
}
ul.panels li > span > input,
ul.texts li > span > input{
    width: 100%;
    border:solid 1px #ddd;
    padding:5px;
}
ul.panels > li > span > input{
    width:calc(100% - 10px);
}
ul.spec{
    background:#fff;
    padding:5px 5px;
}
ul.spec li,
ul.texts li{
    display:flex;
    
}
ul.spec li > span,
ul.texts li > span{
    width: 100%;
    display: flex;
    align-items: center;
}
ul.spec li > span.efficiency {
    display: flex !important;
    justify-content: space-between;
}
ul.spec li > span.efficiency input{
    width: calc(50% - 10px) !important;
}
span.close-button {
    position: absolute;
    top: -9px;
    right: -9px;
    margin: 0;
    background: #fff;
    cursor: pointer;
    border: solid 1px #ddd;
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 50%;
}
span.close-button:hover{
    color:#fff;
    background:#d63638;
}
td.area,
td.rooftop,
td.price{
    align-items: center;
    display: flex;
    flex-direction: row;
    width: 80% !important;
}
td.area    input,
td.rooftop input,
td.price input{
    width: 100%;
    padding:10px;
    text-align: center !important;
}
td.area input::placeholder,
td.rooftop input::placeholder,
td.price input::placeholder {
  text-align: left;
}
td.area:after {
    content: 'm²';
    padding-left:10px;
    text-align: right;
    display: inline-block;
    width: 30px;
    height: 100%;
}
td.rooftop:after {
    content: '%';
    padding-left:10px;
    text-align: right;
    display: inline-block;
    width: 30px;
    height: 100%;
}
td.price:after {
    content: '/kWh';
    padding-left:10px;
    text-align: right;
    display: inline-block;
    width: 30px;
}
#map { 
    width: 100%; 
    height: 350px; 
    border: solid 1px #ddd;
    border-radius: 4px;
}
select[name="mapPosition"] {
    margin-top: 10px;
}

span.button.button-info.add-panel {
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 1.1em;
}

.solar-energy-simulator input#submit {
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 1.3em;
}
.layer-styles > li{
    display:flex;
    margin: 0px;
    border-radius: 5px;
    border: solid 1px #ddd;
    position: relative;
    width: 100%;
    background: #fff;
    justify-content: start;
    align-items: center;
    padding: 10px 0px;
    margin-bottom: 18px;
}
.layer-styles > li > span{
    width: 50%;
    padding: 0px 10px;
}
.layer-styles ul.paint{
    padding: 5px 10px;
}
.layer-styles ul.paint li{
    display:flex;
    justify-content: start;
    align-items: center;
}
.layer-styles ul.paint li span{
    width: 50%;
}
.layer-styles ul.paint li span.key{}
.layer-styles ul.paint li span.val{}
.layer-styles ul.paint li span.val input{
    width:100%;
    border:solid 1px #ddd;
    padding:5px 5px;
}

span.color.val{
    position:relative;
}
input.color-picker-hex:has(+.IroColorPicker){
    width: 100%;
    transition-duration: 0.1s;
    top:100px;
}
.IroColorPicker{
    position:absolute;
    top:100%;
    z-index:1;
    left: 0%;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 5px;
    padding: 10px;
}


.tab-nav {
    list-style: none;
    padding: 0;
    display: flex;
    border-bottom:solid 1px #ddd;
}
.tab-nav li {
    padding: 10px 20px 10px 20px;
    margin: 0px 0px 0px 0px;
    cursor: pointer;
    background: #e8e8e8;
}
.tab-nav li.active {
    background: #fff;
    border-bottom: 2px solid #0073aa;
}
.tab-content {
    width:100%;
}
.tab-content.inactive{
    display:none;
}
.solar-energy-simulator .agreement{
    width: 100%;
    text-align: center;
}
.submit-button{
    display:none;
}