.main {
    max-width: 960px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
}

.tool-main-layout {
    display: flex;
    flex-flow: row wrap;
    background-color:var(--light-marker);
    border-radius: 0.5rem;
    margin-bottom:1rem;
}

.tool-main-layout h3 {
    border-bottom: 1px solid black;
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;
}

.tool-main-layout input, .tool-main-layout select, .tool-main-layout select option {
    height:1.75rem;
    border:1px solid var(--dark-marker);
    padding:0.25rem 0.5rem;
    flex-basis:100%;
    font-size:1em;
    border-radius:3px;
    background-color:white;
}

.tool-main-layout input.invalid_value, .tool-main-layout select.invalid_value {
    border: 1px solid var(--orange-dark);
}

.tool-main-layout .air-data,
.tool-main-layout .water-data,
.tool-main-layout .other-data {
    flex-basis: calc(50% - 1rem);
    flex-grow: 0;
    flex-shrink: 0;
    margin:0.5rem;
    padding:0.5rem;
}

.tool-main-layout .tool-input {
    width: 100%;
    display: grid;
    grid-template-columns: 45% 40% 15%;
    margin-bottom:0.25rem;
}

.tool-main-layout .tool-input .unit {
    padding-left:0.5rem;
}

.tool-main-layout .results-tool {
    flex-basis: calc(100% - 1rem);
    flex-grow: 0;
    flex-shrink: 0;

    margin:0.5rem;
    padding:0.5rem;
}


.tool-main-layout table.tool-output {
    width: 100%;
}

.tool-main-layout table.tool-output th {
    text-align: center;
    font-weight:bold;
}

.tool-main-layout table.tool-output td {
    text-align: center;
}

.tool-main-layout .controls {
    padding: 0.5rem;
    width: 100%;
}

.tool-main-layout .button {
    float:right;
    background-image: -webkit-linear-gradient(top, #EB7921 0, #E54E21 100%);
    background-image: -o-linear-gradient(top, #EB7921 0, #E54E21 100%);
    background-image: linear-gradient(to bottom, #EB7921 0, #E54E21 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeb7921', endColorstr='#ffe54e21', GradientType=0);
    color:white;
    font-weight:bold;
    border-width: 0px;
    padding:0.5rem;
    cursor:pointer;
    border-radius:0.25rem;
    margin-left:0.5rem;
}

.tool-main-layout .button:hover {
    background-image:-webkit-linear-gradient(top, #E54E21 0, #E54E21 100%);
    background-image:-o-linear-gradient(top, #E54E21 0, #E54E21 100%);
    background-image:linear-gradient(to bottom, #E54E21 0, #E54E21 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe54e21', endColorstr='#ffe54e21', GradientType=0);
    -webkit-transition:.4s;
    -o-transition:.4s;
    transition:.4s
}