/* ==========================================================================
   Pine Research Instrumentation
   
   Tools CSS
   
   Pipe Velocity Calculator, Collection Efficiency Calculator,
   Reference Electrode Converstion Calculator

   Author: Tim Paschkewitz
   ========================================================================== */

/* PIPE VELOCITY CALCULATOR */
#pipe-velocity-calculator input[type="text"],
#pipe-velocity-calculator select {
    height: 2.5em;
    border: 1px solid var(--mid-blue-1);
    border-radius: 5px;
    padding: 0 0.5em;
    width: 100%;
    box-sizing: border-box;
}

#pipe-velocity-calculator .radio-image {
    width: 200px;
    border: 1px solid var(--mid-blue-1);
    border-radius: 5px;
    padding: 1em;
}

#velocity-relationship-rows .not-allowed {
    background-color: var(--dark-pri-blue);
    color: var(--dark-pri-blue);
}

.loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    text-align: center;
}

.loading-overlay i.loading-icon {
    color: var(--pri-blue);
}

section#rpm-from-velocity .pipe-dimensions {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    row-gap: 0.2em;
}

/* COLLECTION EFFICIENCY CALCULATOR */
#rrde-collection-efficiency .pri-image {
    box-shadow: var(--box-shadow-default);
}

#rrde-collection-efficiency input[type="text"],
#rrde-collection-efficiency select {
    height: 2.5em;
    border: 1px solid var(--mid-blue-1);
    border-radius: 5px;
    padding: 0.5em;
    box-sizing: border-box;
}

#rrde-collection-efficiency input[type="text"] {
    text-align: center;
}

.rrde-radius-input {
    width: 100px;
}

.n-result-display {
    background-color: var(--light-orange);
    color: var(--orange);
    font-weight: 700;
    line-height: 2em;
}

.rrde-dimension-drawing img {
    width: 175px;
    height: auto;
}

section#n-calculator .calculator-inputs .display {
    display: flex;
    flex-flow: column;
    row-gap: 0.4em;
    align-items: center;
}

@media screen and (max-width:576px) {
    section#n-calculator .calculator-inputs .display {
        flex-flow: row nowrap;
        column-gap: 0.4em;
        justify-content: center;
    }

    section#n-calculator .calculator-inputs {
        row-gap: 1em;
    }

    section#n-calculator .calculator-buttons {
        justify-content: space-between;
    }

    section#existing .select-existing-rrde {
        flex-flow: column nowrap;
        row-gap: 1em;
    }

    section#rce-selection .rce-selection-options {
        flex-flow: column nowrap;
        row-gap: 0.5em;
    }

    section#rce-selection .rce-selection-option {
        align-items: center;
    }

    section#rce-selection .radio-image {
        width: 100px;
    }

    section#rce-selection .select-rce-output {
        width: 100%;
    }

    section#rce-selection .pri-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    section#variables .pri-pipe-velocity-tool {
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
        font-size: 0.9em;
    }

    section#variables .pri-pipe-velocity-tool input {
        justify-self: center;
        width: 75%;
    }

    section#rpm-from-velocity .rate-inputs {
        flex-flow: column nowrap;
        row-gap: 0.5em;
    }

    section#rpm-from-velocity .rate-inputs input {
        width: 50%;
    }

    section#rpm-from-velocity .pipe-dimensions {
        flex-flow: row nowrap;
        column-gap: 0.4em;
        justify-self: center;
    }

    section#velocity-from-pipe .pri-grid {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }
}

/* REFERENCE ELECTRODE CONVERSION */

#ref-calculator {
    width: 90%;
    margin: auto auto;
    border: 1px solid var(--lighter-gray);
    border-radius: 5px;
    padding: 1em;
}

.endnotes {
    margin-left: auto;
    margin-right: auto;
}

.endnotes-title {
    font-weight: 700;
    color: var(--dark-pri-blue);
    padding: 20px 0 10px 0;
    font-size: 1.2em;
}

#ref_e_used {
    height: 2.5em;
    width: 450px;
    padding-left: 5px;
    padding-right: 5px;
    border: 2px solid var(--mid-blue-1);
    color: var(--mid-blue-1);
    font-family: "Noto Sans";
    font-size: 1em;
    border-radius: 5px;
}

optgroup[label] {
    color: var(--dark-pri-blue);
    padding: 3px;
    font-weight: 700;
    font-family: "Noto Sans";
    font-size: 1em;
}

#ref_e_used option {
    color: var(--dark-gray);
    font-weight: 400;
    font-family: "Noto Sans";
    font-size: 1em;
}

form#re-calculator-input-form {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 0.8em;
    align-items: center;
    background-color: var(--mid-blue-1);
    border-radius: 5px;
}

form#re-calculator-input-form .group-header.blue,
.output-section .group-header.gray {
    padding-top: 0.5em;
    font-size: 1.3em;
    text-align: center;
    font-weight: 700;
    width: 100%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

form#re-calculator-input-form .group-items {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 10px;
    align-items: center;
    background-color: var(--mid-blue-2);
    padding: 1.6em;
    justify-content: space-between;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 100%;
    border-top: 3px solid var(--dark-pri-blue);
}

form#re-calculator-input-form input {
    text-align: center;
    font-weight: 700;
    color: var(--mid-blue-1);
    height: 2.5em;
    width: 120px;
    padding-left: 5px;
    padding-right: 5px;
    border: 2px solid var(--mid-blue-1);
    font-size: 1em;
    border-radius: 5px;
}

form#re-calculator-output-form input {
    text-align: center;
    font-weight: 700;
    background-color: var(--white);
    color: var(--mid-blue-1);
    height: 2.5em;
    width: 120px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid var(--light-gray);
    border-radius: 5px;
}

#re-calculator-output-form {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 30px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--lightest-gray);
    width: 100%;
    border-top: 3px solid var(--gray);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 1.6em;
}

#re-calculator-output-form .section-header {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 15px;
    align-items: center;
    color: var(--dark-pri-blue);
    padding-bottom: 5px;
    font-weight: 700;
    justify-content: space-between;
}

#re-calculator-output-form .section {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 5px;
    margin-bottom: 15px;
}

#re-calculator-output-form .row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: 10px;
    margin-left: 30px;
}

.calculate-button {
    color: #ffffff;
    font-weight: 700;
    padding: 8px 12px;
    border: 1px solid var(--dark-pri-blue);
    background-color: var(--dark-pri-blue);
    border-radius: 5px;
    font-size: 1em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: 5px;
}

.calculate-button:hover {
    color: var(--dark-pri-blue);
    background-color: var(--white);
    cursor: pointer;
}

.reset-button {
    color: var(--gray);
    font-weight: 400;
    padding: 8px 12px;
    border: 1px solid var(--gray);
    background-color: var(--lighter-gray);
    border-radius: 5px;
    font-size: 1em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: 5px;
}

.reset-button:hover {
    color: var(--dark-pri-blue);
    background-color: #ffffff;
    cursor: pointer;
}

.ref_e_chemistry {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 5px;
    align-items: center;
}

.inline-equation {
    margin-top: 4px;
}

.section-divider {
    height: 20px;
    border-bottom: 2px solid var(--dark-pri-blue);
    margin-bottom: 20px;
    box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.3);
    margin-top: -25px;
}

.add-to-cart {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: 10px;
}

.directions {
    padding: 15px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
    color: var(--pri-blue);
}

.ref-link {
    color: var(--dark-pri-blue);
}

.ref-link:hover {
    color: var(--mid-blue-1);
}

#re-calculator-input-form .group-element {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: 1em;
}

div.button-group {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 2em;
    align-items: center;
}

span.inline-button {
    padding: 4px 6px;
    border: 1px solid;
    border-radius: 5px;
    margin: 0 0.3em;
}

span.inline-button.blue {
    border-color: var(--dark-pri-blue);
    background-color: var(--dark-pri-blue);
    color: var(--white);
}

span.inline-button.gray {
    border-color: var(--gray);
    background-color: var(--lighter-gray);
    color: var(--gray);
}

.output-section {
    display: flex;
    flex-flow: column nowrap;
    row-gap: .8em;
    align-items: center;
    border-radius: 5px;
    background-color: var(--lighter-gray);
}

.group-header.gray {
    background-color: var(--lighter-gray);
    color: var(--gray);
}

.group-header.blue {
    background-color: var(--mid-blue-1);
    color: var(--white);
}

.arrow {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 2em;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    color: var(--dark-pri-blue);
    padding: 0.2em 0;
}

.main-output {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 1em;
}

@media screen and (max-width:576px) {
    form#re-calculator-input-form .group-items {
        flex-flow: column nowrap;
        row-gap: 1em;
    }

    select#ref_e_used {
        width: 98%;
    }

    form#re-calculator-output-form .section-header {
        flex-flow: column nowrap;
        row-gap: 0.5em;
    }

    form#re-calculator-output-form .section-title {
        font-size: 1.2em;
        text-align: center;
    }

    form#re-calculator-output-form .row {
        margin: unset;
    }

    div.et_pb_row.et_pb_row_0 {
        width: 90%;
    }

    div.instructions h2 {
        font-size: 18px;
    }

    #ref-calculator {
        width: unset;
    }

    #re-calculator-output-form .row .text {
        font-size: 0.9em;
    }

    #re-calculator-output-form .row input.calc-result {
        width: 75px;
    }
}