.calculator-title {
    text-align: center;
    font-size: 24px;
    height: 60px;
    padding: 20px 0px 20px 0px;
}

#calculator-content {
    background-image: url(../img/graph-paper.png);
    background-size: contain;
    width: 100%;
    height: 725px;
}

#calculators {
    height: 380px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    margin-top: 40px;
}

#calculators .calculator {
    height: 100%;
    width: 350px;
    background-color: white;
    padding: 25px;
    box-shadow: 3px 3px 7px -2px;
}

.calculator-header {
    display: flex;
    height: 20px;
    align-items: center;
    font-size: 25px;
    font-weight: 1000;
    justify-content: center;
}

.calculator-info {
    display: block;
    margin-bottom: 5px;
}

.calculator-algorithm {
    display: block;
    font-family: 'Courier New', monospace;
    word-spacing: -4px;
    letter-spacing: -1px;
    margin-bottom: 5px;
}

.calculator-note {
    display: block;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 20px;
}

#calculators form {
    display: flex;
    flex-direction: column;
}

#calculators .variables {
    display: flex;
}

#calculators .variable-column {
    display: flex;
    flex-direction: column;
}

#calculators .variable-row {
    display: block;
    width: 125px;
}

#calculators .variable-row label{
    display: block;
    width: 30px;
    float: left;
    margin: 5px 0px;
}

#calculators .variable-row input {
    display: block;
    width: 60px;
    float: left;
    margin: 5px 0px;
}

.variable-radio {
    display: block;
    height: 25px;
    width: 80px;
    float: left;
}

.variable-radio input {
    width: 20px !important;
}

#calculateWithdraw {
    margin: 30px 0px 10px;
}

#calculateInjection {
    margin: 7px 0px 10px;
}


#legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 160px;
}

#legend-title {
    font-weight: bolder;
}

.variable {
    width: 400px;
    text-align: left;
}

.spec-title {
    text-align: center;
    margin-top: 20px;
    font-size: 25px;
    font-weight: 600;
}

.box {
    display: flex;
    justify-content: center;
    height: 500px;
    width: 400px;
    margin: 20px;
}

.img-title {
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
}

.img-box {
    width: 400px;
    height: 400px;
    float: left;
}

.img-fit {
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin-top: 15px;
}

.img-fit:hover {
    box-shadow: 0px 0px 9px -2px #e9b200;
}

.img-buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.img-buttons button {
    width: 45px;
    height: 25px;
}

.img-buttons button img {
    /* width: 100%; */
    height: 100%;
}

#print-top {
    margin-right: 15px;;
}

.box-row {
    display: flex;
    justify-content: center;
    width: 900px;
}

.img-buttons button img {
    
    pointer-events: none;
      
}

@media (max-width: 950px) {

    #calculator-content {
        height: auto;
        width: 375px;
    }

    .calculator-title {
        height: auto;
    }

    #legend {
        height: auto;
    }

    #legend-title {
        width: 330px;
        text-align: center;
    }

    .variable {
        width: 300px;
    }

    #calculators {
        flex-direction: column;
        height: auto;
        padding: 0px;
        padding-bottom: 20px;
    }

    #calculators .calculator{
        width: 340px;
        padding: 10px;
    }


    .box {
        width: auto;
    }
    .box-row {
        flex-direction: column;
        width: auto;
    }

    .img-box {
        width: 350px;
    }
}