body {
    font-size: 100%;
    line-height: 1.6;
    margin: 0 0.1em;
    width: 100%;
}
h1 { text-align: center; }

div.view {
    width: 1024px;
    margin: auto auto;
    display: flex;
    flex-flow: wrap;
    padding: 0px 0.5em;
}
div.view div.top2 {
    display: flex;
    flex-flow: row-reverse wrap;
}
div.view div.content > div {
    min-width: 400px;
    max-width: 500px;
    margin: 0px 0.5em;
}

div select {
    max-width: 5em;
    text-align: center;
}
div input[type=time],
div input[type=number]{
    text-align: right;
    max-width: 5em;
    width: 5em;
}
div.drives input[type=time],
div.drives input[type=number] {
    max-width: 6em;
}
div.drives input.dist[type=number] {
    width: 5em;
}
div.drives input[name=D_PERIOD_DAYS] {
    max-width: 3.5em;
}
input[type=button].active {
    background-color: rgba(50, 200, 100, 0.8);
}
div.rate {
    display: flex;
}
div.rate div  {
    display: flex;
    flex-flow: column;
    align-items: center;
}
div.rate div.consumption  {
    align-items: start;
}
div.rate div:nth-child(1) {
    margin-right: 0.25em;
    align-items: flex-end;
}
div.rate div:nth-child(5) {
    align-items: flex-start;
}
div.rate div > span:nth-child(1) {
    text-align: left;
    font-size: 100%;
    overflow: visible;
    display: inline-block;
    max-width: 4.5rem;
}
div.rate div span {
    height: 1.6em;
    text-align: left;
    margin-left: 0.2em;
    margin-right: 0.2em;
}
div.rate div span.time {
    align-self: center;
}
div.rate div:nth-child(1) span {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
div.energy div.rate div.header span,
div.energy div.rate div.consumption span {
    padding: 0.2rem 0.1rem;
}
div.energy div.rate div span:nth-child(1) {
    padding: 0.3rem 0.0rem;
}

div.driveheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.driveheader div:nth-child(2) select {
    min-width: 10rem;
}
div.drives div.header {
    line-height: 1.6;
}
div.drives div.header span {
    display: inline-block;
    min-width: 5em;
    max-width: 5em;
    margin: 0 0.5em;
    padding: 0.15rem 0rem;
    text-align: left;
}
div.drives div.header > span:nth-child(1) {
    min-width: 3em;
    max-width: 3em;
}
div.drives div.d {
    padding-bottom: 0.125rem;
}
div.drives div.d > span:nth-child(3),
div.drives div > span:nth-child(3) {
    min-width: 8em;
    max-width: 9em;
}
div.drives div.d > span {
    display: inline-block;
    min-width: 5em;
    max-width: 5em;
    text-align: right;
    margin: 0 0.5em;
    padding: 0.15rem 0rem;
}
div.drives div.d input[type=button] {
    width: 1.5em;
}
div.drives div.d > span:nth-child(1),
div.drives div > span:nth-child(1) {
    min-width: 3em;
    max-width: 3em;
}
div.drives div.d > span:nth-child(1) > span {
    min-width: 3em;
    max-width: 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.drives div.d > span:nth-child(1) > span span.no {
    min-width: 3em;
}
div.drives div.d > span:nth-child(1) > span input ~ span.no {
    min-width: auto;
}

div.result h3, div.result h4 {
    margin-bottom: 0px;
}
div.result {
    display: flex;
    max-width: 100%;
    flex-flow: column;
}
div.result div.header {
    font-weight: bold;
}
div.result div.header span {
    border-top: 0.15rem solid grey;
    background-color: #cccccc;
    text-align: center;
    height: 3.2rem;
}
div.result div.footer span {
    background-color: #eeeeee;
    font-weight: bold;
    line-height: 1.2em;
}
div.result div.footer span span.p {
    display: inline-block;
    font-size: 70%;
    border: 0;
    min-width: 5em;
    max-width: 5em;
}
div.result div span {
    display: inline-block;
    width: calc((100% - 4.5em - 2.4em - 1.05em - 0.2em) / 5); /* 100% - span.header.width - 2*6 * padding.horiz - 7*border.width */
    padding: 0.15rem 0.2em;
    border-bottom: 0.15rem solid grey;
    border-right: 0.15rem solid grey;
    text-overflow: clip;
    overflow: hidden;
}
div.result.consumption {
    width: 500px;
}
div.result.consumption div span,
div.data.consumption span {
    width: calc((100% - 4.5em - 2.0em - 0.9em - 0.2em) / 4); /* 100% - span.header.width - 2*5 * padding.horiz - 6*border.width */
}
div.result div.data span {
    text-align: right;
}

div.h {
    text-align: center;
    font-weight: bold;
    max-width: 400px;
}

div.result div span:nth-child(1) {
    min-width: 4.5em;
    max-width: 4.5em;
    text-align: center;
    border-left: 0.15rem solid grey;
}

div.result div span.unit {
    padding: 0px;
    margin: 0px;
    border: 0;
    display: inline;
}
span.disabled,
div.car.disabled {
    display: none;
}

div.car.readonly input:read-only {
    background-color: #eeeeee;
    pointer-events:none;
}

div.car span select {
    width: 100%;
}
div.logo {
    align-self: center;
}
div.logo img {
    width: calc(100% - 1em);
}
div.logo .nahcar {
    display: flex;
    justify-content: space-around;
}
div.logo .nahcar a {
    display: block;
}
span.hl {
    font-weight: bold;
}

@media screen and (min-width: 520px) {
    div.result div span.max520 { display: none; }
}
@media screen and (max-width: 979px) {
    div.view { width: 500px; flex-flow: wrap; }
    div.view div.top2 { display: block; flex-flow: unset; }
    div.view > div { margin: 0; min-width: calc(100% - 2em); max-width: calc(100% - 2em);}
}
@media screen and (max-width: 519px) {
    div.view { width: 460px; }
    div.view > div { margin: 0; min-width: calc(100% - 1em); max-width: calc(100% - 1em);}
    div.view div.content > div { width: calc(100% - 1em); min-width: calc(100% - 1em); }
    div.result div span.min520 { display: none; }
    div.result div span {
	padding: 0.1rem 0.1em;
	width: calc((100% - 4.5em - 1.0em - 0.9em - 0.2em) / 4); /* 100% - span.header.width - 2*5 * padding.horiz - 6*border.width */
    }
    div.result.consumption div span,
    div.data.consumption span {
	padding: 0.1rem 0.1em;
	width: calc((100% - 4.5em - 1.0em - 0.9em - 0.2em) / 4); /* 100% - span.header.width - 2*5 * padding.horiz - 6*border.width */
    }
}
@media screen and (max-width: calc(461px + 0.2em)){
    body { font-size: 90%;}
    div.view > div { margin: 0; min-width: calc(100% - 0.5em); max-width: calc(100% - 0.5em);}
    div.view { width: calc(100% - 1em); }
    div.rate div.header { max-width: 9em; }
}
.wp { display: none !important; } div.output { min-width: 700px; }