.hydraulic-calculator {
max-width: 100%;
} article.bg-grey .hydraulic-calculator input {
border: 1px solid #fff !important;
} .hydraulic-calculator .uk-input.invalid {
border-color: var(--warning) !important;
box-shadow: 0 0 1px var(--warning);
} .hydraulic-calculator .invalid + .error-message {
color: var(--warning);
font-size: .75rem;
margin-top: 4px;
}
.hydraulic-calculator .uk-input.valid {
border-color: var(--success) !important;
box-shadow: 0 0 1px var(--success);
}
.hydraulic-calculator .result-container,
.hydraulic-calculator .result-container > * {
font-size: 1.25rem;
}
.hydraulic-calculator .result-output,
.hydraulic-calculator .result-output > .result-value {
transition: all .2s ease-in;
.result-unit {
font-size: 1rem;
font-weight: normal!important;
margin-left: 0.5rem;
}
}
.hydraulic-calculator .result-output.has-result .result-value code {
background-color: rgba(0,0,0, 0.05);
cursor: pointer;
transition: all .3s ease;
font-weight: normal;
font-size: 1.25rem;
font-family: var(--base-heading-font-family);
word-wrap: break-word;
word-break: break-all;
white-space: normal;
overflow-wrap: break-word;
line-height: 1.25;
}
.hydraulic-calculator .result-output > .result-empty {
display: inline-block;
code{
color: inherit!important;
background-color: transparent!important;
font-size: 1.25rem;
font-family: var(--base-heading-font-family);
font-weight: 600;
display: inline-block;
}
}
.hydraulic-calculator .result-output.has-result .result-value code:hover {
background-color: var(--tertiary);
color: var(--light);
cursor: pointer;
}
.hydraulic-calculator .result-output.has-result,
.hydraulic-calculator .result-output.has-result > .result-value code { font-weight: 600;
font-size: 1.5rem;
color: inherit;
} .hydraulic-calculator .result-output .error-message  { color: var(--warning);
font-size: .875em!important;
font-weight: normal;
} .hydraulic-calculator .uk-form-controls {
position: relative;
}
.hydraulic-calculator .uk-form-controls:has(span.unit-label:not(:empty)) .uk-input {
padding-right: 7.5rem; }
@media (max-width: 768px) {
.hydraulic-calculator .uk-form-controls:has(span.unit-label:not(:empty)) .uk-input {
padding-right: 5rem;
}
}
.hydraulic-calculator .uk-form-controls span.unit-label:not(:empty) {
position: absolute;
top: 0;
left: auto;
right: 0;
width: 6.5rem; 
height: 4rem;
font-size: 1.125rem;
color: #666;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
padding-left: 1rem;
background-color: rgba(0,0,0, 0.05); 
line-height: 1.125;
gap: 3px;
.small {
font-size: 11px;
}
}
@media (max-width: 768px) {
.hydraulic-calculator .uk-form-controls span.unit-label:not(:empty) {
width: 4.5rem; 
height: 4rem;
font-size: .9rem;
padding-left: .5rem;
.small {
font-size: 8px;
}
}
}
.hydraulic-calculator .uk-input::placeholder {
color: #888; opacity: 1; }
.hydraulic-calculator-legend {
font-size: 0.875rem;
max-width: none;
width: auto!important;
min-width: 100%;
}
@media (min-width: 768px) {
.hydraulic-calculator-legend {
min-width: 600px;
font-size: 1rem;
}
}
.hydraulic-calculator-legend.uk-table-small th, .uk-table-small td {
padding: 5px;
}
.hydraulic-calculator-legend.uk-table td {
padding: 5px;
vertical-align: top;
}
@media (min-width: 768px) {
.hydraulic-calculator-legend.uk-table td {
padding: 10px 15px;
}
}
#result {
margin-top: 10px;
font-size: 18px;
color: #333;
}