.calculator {
    /* border: 2px solid #404040; */
    padding: 10px auto 0 auto;
    text-align: justify;
    display: flex;

    margin-top: 30px;
    margin-bottom: 100px;

    appearance: auto;

    width: 100%;
}

@media screen and (max-width: 991px) {
    .calculator{
        margin-top: 50px

    }
}

@media screen and (max-width: 767px) {
    .calculator {
        flex-direction: column !important;
        margin-top: 95px
    }
}

@media screen and (max-width: 575px) {
    .calculator {
        margin-top: 175px
    }
}

@supports (-webkit-touch-callout: none) and (max-width: 575px) {
    /* CSS specific to iOS devices */
    .calculator {
        margin-top: 200px;
        height: 600;
    }
}



/* lvl 1 */

.calc-input, .calc-output {
    display: inline;
    width: 50%;
    padding: 15px;
    height: 250px;
}

@supports (-webkit-touch-callout: none) {
    .calc-input, .calc-output {
        height: 300px;
    }
}

@media screen and (max-width: 767px) {
    .calc-input, .calc-output {
        width: 100%
    }
    .calc-input {
        background-color: #d4d4d4 !important;
    }
    .calc-output {
        background-color: #767676 !important;
        color: #fff !important;
        font-weight: bold !important;
        letter-spacing: 0.5px !important;
    }
}

.calc-input {
    background-color: #e8e8e8;
}

.calc-output {
    background-color: #979797;
}

/* lvl 2 */

.calc-input > div {
    margin-bottom: 15px;
}

.calc-output > div {
    margin-bottom: 5px;
    display: flex;
}

/* lvl 3 */

.calc-input > div > select, .calc-input > div > input {
    border: #404040 solid 2px;
    height: 40px;
    width: 85%;
}

@media screen and (max-width: 767px) {
    .calc-input > div > input, .calc-input > div > select {
        width: 100%
    }
}

.calc-input > div > select {
    background-color: #ffffff00;
}

.calc-output > div > * {
    width: 50%;
    border: none;
    background-color: #ffffff00;
}