@media (max-device-width: 992px) {

    body{
        background: white;
    }

    div#flowCalculator{
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    form {
        width: 100%;
        /*display: grid;*/
        place-items: left;
        padding-top: 1em;
        grid-template-columns: 45% 45%;
        grid-template-rows: auto auto auto auto auto auto;
        column-gap: 20px;
    }

    div[id="form"] {
        background-color: #f3f3f3;
        padding-right: 20px;
        padding-left: 20px;
        border: 10px solid #f3f3f3;
        border-radius: 2%;
    }
/*
    #width-rows{
        position: relative;
        top: 1.15em;
        grid-column: 1;
        grid-row: 1;
    }*/

    /*#selector{
        position: relative;
        top: -4.4em;
        font-weight: bold;
        color: #000000;
    }
    */
    #width_unit{
        top: -4.4em;
    }
    /*
    label.input_label {
        position: relative;
        left: 10px;
        top: -10px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }*/
    /*
    select[name="spacing"]{
        position: relative;
        width: max-content;
        top: -4.4em;
        left: 7em;
    }*/

    .min-max{
        display: grid;
        grid-template-columns: 48% 48%;
        grid-template-rows: auto;
        column-gap: 20px;
    }

    #VA-inputs{
        grid-column: 1 / 3;
        grid-row: 2;
    }
    /*
    select[name="VA"]{
        position: relative;
        top: -4.4em;
        left: 20em;
    }*/

    #Speed-inputs{
        grid-column: 1 / 3;
        grid-row: 3;
    }
    /*
    select[name="Speed"]{
        position: relative;
        top: -4.4em;
        left: 20em;
    }*/

    #Viscosity-input{
        margin-top: 2em;
        grid-column: 1 / 3;
        grid-row: 5;
    }
    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border: 10px solid #001376;
        border-radius: 10px;
        font-size: large;
        font-family: Arial, Helvetica, sans-serif;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

    div#table{
        width: 100%;
        padding-top: 20px;
    }

    #table2{
        margin-bottom: 20px;
    }

    div[id="border"]{
        border-bottom: 1px solid #7c7c7c;
        width: 100%;
        padding-top: 20px;
        margin-bottom: 10px;
    }
    select[id="Viscosity"]{
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 10px;
        border: 1px solid #c4bebe;
        color: #7c7c7c;
        width: 100%;
        height: 2em;
        padding-left: 10px;
        font-family: Arial, Helvetica, sans-serif;
    }

    th, td {
        padding: 5px;
        height: 30px;
        text-align: left;
    }

    .row1, .row4, .row6, .row8, .row10, .row12, .row14{
        background-color: #dbd8d8;
    }

    .row2, .row5, .row5, .row7, .row11, .row13{
        background-color: white;
    }

    .row0 th, .row3 th, .row9 th{
        background-color: #001376;
        color: white;
        text-align: center;
    }

    input[type="number"] {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 10px;
        border: 1px solid #c4bebe;
        color: #7c7c7c;
        width: 100%;
        height: 2em;
        padding-left: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: large;
    }
    input[type="number"]:focus {
        outline: none;
        border: 2px solid #7c7c7c;
        color: #000000;
    }
    select{
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 10px;
        border: 1px solid #c4bebe;
        color: #7c7c7c;
        width: fit-content;
        height: 35px;
        padding-left: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: large;
    }
    button[type="submit"]{
        place-self: center;
        grid-column: 1 / 3;
        position: relative;
        height: 2em;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 10px;
        border: 1px solid black;
        color: black;
        background-color: #f37b44;
        margin-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: large;
        font-weight: bold;
    }
    button[type="submit"]:hover {
        outline: none;
        border: 2px solid black;
        color: #000000;
        background-color: #F26522;
    }
    p[id="error"] {
        color:red
    }
    p[id="instruct"] {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        background-color: #001376;
        padding: 10px;
        color: white;
        border-radius: 10px;
        font-size: large;
    }

    div.pump p{
        text-align: center;
        font-size: x-large;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
    }

    div.pump{
        height: auto;
        background-color: #001376;
        border-radius: 10px;
        border: 10px solid #001376;
        flex-grow: 0;
        width:100%;
    }

    .img {
        object-fit: cover;
        width: 100%;
        height: 260px;
    }

   /* .pump1, .pump2, .pump3, .pump4, .pump5{
        width: 42%;
        padding-top: 10px;
        padding-bottom: 20px;
    }*/
    /*.pump2, .pump3, .pump4, .pump5{
        width: 84%;
        padding-top: 10px;
        padding-bottom: 20px;
    }*/
    .pump1{
        grid-column: 1 / 3;
        grid-row: 2;
    }

/*div[id="whole_pump"]{
    display: grid;
    min-width: 100vw;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto auto;
    place-items: center;

}*/
    .pump1 div.pump{
        border: 10px solid #F26522;
        background-color: #F26522;
    }

    #recommended{
        text-wrap: nowrap;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 60;
        grid-column: 1/3;
        grid-row: 1;
    }

    #other-pump{
        text-wrap: nowrap;
        text-align: center;
        font-size: 60;
        font-family: Arial, Helvetica, sans-serif;
        grid-column: 1/3;
        grid-row: 3;
    }

    #LiquiShift{
    min-width: 90vw;
    font-size: normal;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    place-items: center;
    }

    #LiquiShift-header{
        position: relative;
        /*width: 60vw;*/
        /*min-width: 40em;*/
        font-family: Arial, Helvetica, sans-serif;
        border: 10px solid #f3f3f3;
        border-radius: 10px;
        background-color: #f3f3f3;
        margin-bottom: 20px;
        padding:20px;
    }

    #PR17_upgrade{
        margin-top: 20px;
        margin-bottom: 20px;
        display: block;
        margin: 0 auto;
    }

    #your-values{
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        text-align: center;
    }

    #LiquiShift-container{
        width: 90vw;
        display: flex;
        flex-direction: column;
        place-items: center;
    }

    h1[name="LiquiShift-h1"]{
        font-size:large;
        margin-bottom: 20px;
        text-align: center;
        border-bottom:1px solid #f26522;
    }

    h2[name="LiquiShift-h2"]{
        font-size: large;
        margin-bottom: 20px;
        text-align: center;
        border-bottom:1px solid #f26522;
    }

    #flow-tube-selector{
        position: relative;
        margin-top: 20px;
        width: fit-content;
        min-width: 90vw;
        border: 10px solid #f3f3f3;
        border-radius: 10px;
        background-color: #f3f3f3;
        margin-bottom: 20px;
    }

    #flow-tube-selector-manual{
        position: relative;
        margin-top: 20px;
        width: fit-content;
        min-width: 90vw;
        border: 10px solid #f3f3f3;
        border-radius: 10px;
        background-color: #f3f3f3;
        margin-bottom: 20px;
    }

    #flow-tube-selector-upgrade{
        position: relative;
        margin-top: 20px;
        width: fit-content;
        min-width: 90vw;
        border: 10px solid #f3f3f3;
        border-radius: 10px;
        background-color: #f3f3f3;
        margin-bottom: 20px;
    }

    .tube{
        margin: 10px;
    }
    #LiquiShift_table{
        margin-top: 20px;
        width: 90vw;
    }
    #LiquiShift_funny_hilarious{

        height: 100%;
    }

    #LiquiShift-header_upgrade{
        position: relative;
        width: 60vw;
        font-family: Arial, Helvetica, sans-serif;
        border: 10px solid #f3f3f3;
        border-radius: 10px;
        background-color: #f3f3f3;
    }

    #manual_table_tower{
        height: 100%;
    }

    #manual_table_not{
        height: 100%;
    }

    #manual_table_not tr:nth-child(odd) td {
        background-color: white;
    }

    #manual_table_not tr:nth-child(even) td {
        background-color: #dbd8d8;
    }

    #manual_table_tower tr:nth-child(odd) td {
        background-color: white;
    }

    #manual_table_tower tr:nth-child(even) td {
        background-color: #dbd8d8;
    }

    #LiquiShift_funny_hilarious tr:nth-child(odd) td {
        background-color: white;
    }

    #LiquiShift_funny_hilarious tr:nth-child(even) td {
        background-color: #dbd8d8;
    }

    div[id="flow_inputs"]{
        min-width: 95vw;
        font-size: x-large;
        font-family: Arial, Helvetica, sans-serif;
    }

    #tube-img-container{
        display: flex;
    }

    #tube-imgs{
        position: absolute;
        left: 195px;
        width: 100%;
    }

    #tube-names{
        width: 175px;
        background-color: #001376;
        border:10px solid #001376;
        border-bottom: none;
        border-radius: 10px;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        margin-top: 10px;
        margin-left: 10px;
    }

    #tube-names #name{
        height: 30px;
        margin-bottom: 10px;
    }

    #pump_calculator_header{
        width: 95vw;
        min-width: 40em;
        font-family: Arial, Helvetica, sans-serif;
        border: 10px solid #f3f3f3;
        border-radius: 10px;
        background-color: #f3f3f3;
        margin-bottom: 20px;
    }

    #pump-h2{
        text-align: center;
        border-bottom:1px solid #f26522;
    }
    h2[name='LiquiShift-h2']{
        margin-top: 60px;
    }

    .PSI {
        font-size: x-large;
    }

    #border{
        min-width: 95vw;
    }
}



@media (min-device-width: 992px) {

body{
    background: white;
}

div#flowCalculator{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*min-width: 790px;*/
    position: relative;
    width: fit-content;
    max-width: 100%;

}

div#form-table{
    display: flex;
}



div[id="form"] {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    border: 10px solid #f3f3f3;
    border-radius: 2%;
    background-color: #f3f3f3;
}
/*
#width-rows{
    position: relative;
    top: 18px;
    grid-column: 1;
    grid-row: 1;
}*/
/*
#selector{
    position: relative;
    top: -65px;
    font-weight: bold;
    color: #000000;
}*/

/*
label.input_label {
    position: relative;
    left: 10px;
    top: -10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}*/
/*
select[name="spacing"]{
    position: relative;
    width: max-content;
    top: -65px;
    left: 9em;
}*/

.min-max{
    display: grid;
    grid-template-columns: 48% 48%;
    grid-template-rows: auto;
    column-gap: 20px;
}

#VA-inputs{
    grid-column: 1 / 3;
    grid-row: 2;
}
/*
select[name="VA"]{
    position: relative;
    top: -65px;
    left: 23em;
}
*/
#Speed-inputs{
    grid-column: 1 / 3;
    grid-row: 3;
}
/*
select[name="Speed"]{
    position: relative;
    top: -65px;
    left: 23em;
}*/

#Viscosity-input{
    margin-top: 17px;
    grid-column: 1 / 3;
    grid-row: 5;
}

table {
    height: 100%;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 10px solid #001376;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

div#table{
    width: 100%;
    padding-left: 20px;
}

div[id="border"]{
    border-bottom: 1px solid #7c7c7c;
    width: 100%;
    padding-top: 20px;
    margin-bottom: 10px;
}
select[id="Viscosity"]{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 10px;
    border: 1px solid #c4bebe;
    color: #7c7c7c;
    width: 100%;
    height: 30px;
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

th, td {
    padding: 5px;
    height: 30px;
    text-align: left;
}

.row1, .row4, .row6, .row8, .row10, .row12, .row14{
    background-color: #dbd8d8;
}

.row2, .row5, .row5, .row7, .row11, .row13{
    background-color: white;
}

.row0 th, .row3 th, .row9 th{
    background-color: #001376;
    color: white;
    text-align: center;
}

input[type="number"] {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 10px;
    border: 1px solid #c4bebe;
    color: #7c7c7c;
    width: 100%;
    height: 30px;
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
input[type="number"]:focus {
    outline: none;
    border: 2px solid #7c7c7c;
    color: #000000;
}
select{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 10px;
    border: 1px solid #c4bebe;
    color: #7c7c7c;
    width: fit-content;
    height: 30px;
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
button[type="submit"]{
    place-self: center;
    grid-column: 1 / 3;
    position: relative;
    height: 30px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 10px;
    border: 1px solid black;
    color: black;
    background-color: #f37b44;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

button[type="submit"]:hover {
    outline: none;
    border: 2px solid black;
    color: #000000;
    background-color: #F26522;
}
p[id="error"] {
    color:red
}
p[id="instruct"] {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color: #001376;
    padding: 10px;
    color: white;
    border-radius: 10px;
}

div.pump p{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

div.pump{
    height: auto;
    background-color: #001376;
    border-radius: 10px;
    border: 10px solid #001376;

}

.img {
    object-fit: cover;
    width: 100%;
    height: 230px;
}

.pumps{
    padding-top: 10px;
    padding-bottom: 20px;
}
/*div[id="whole_pump"]{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    place-items: center;
    width: fit-content;
    column-gap: 20px;
    row-gap: 20px;
}*/
#recommended{
    padding-right: 20px;
    grid-row: 1;
    grid-column: 1;
    font-weight: bold;
    font-size: large;
}
#other-pump{
    grid-row: 1;
    grid-column: 2/4;
    font-weight: bold;
    font-size: large;
}
.pump1{
    grid-row: 2;
    grid-column: 1;
}

#pump_none{
    grid-row: 3;
    grid-column: 1;
}

.pump1, .pump2, .pump3, .pump4, .pump5{
    width: 280px;

}

/*.pump1{
    padding-right: 20px;
    border-right:1px solid #7c7c7c;
}*/

.pump1 div.pump{
    border: 10px solid #F26522;
    background-color: #F26522;
}

#recommended{
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 20px;
}

#other-pump{
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 20px;
}

#LiquiShift{
    display: flex;
    place-items: center;
    flex-direction: column;
}

#LiquiShift-header{
    position: relative;
    /*width: 40vw;*/
    min-width: 40em;
    font-family: Arial, Helvetica, sans-serif;
    border: 10px solid #f3f3f3;
    border-radius: 10px;
    background-color: #f3f3f3;
    padding:20px;
}

#PR17_upgrade{
    display: block;
    margin: 0 auto;
}

#your-values{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    text-align: center;
}

#LiquiShift-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

h1[name="LiquiShift-h1"]{
    text-align: center;
    border-bottom:1px solid #f26522;
}

h2[name="LiquiShift-h2"]{
    text-align: center;
    border-bottom:1px solid #f26522;
}

#flow-tube-selector{
    position: relative;
    margin-top: 20px;
    width: fit-content;
    min-width: 90%;
    border: 10px solid #f3f3f3;
    border-radius: 10px;
    background-color: #f3f3f3;
}

#flow-tube-selector-manual{
    position: relative;
    margin-top: 20px;
    width: fit-content;
    min-width: 90%;
    border: 10px solid #f3f3f3;
    border-radius: 10px;
    background-color: #f3f3f3;
}

#flow-tube-selector-upgrade{
    position: relative;
    margin-top: 20px;
    width: fit-content;
    min-width: 90%;
    border: 10px solid #f3f3f3;
    border-radius: 10px;
    background-color: #f3f3f3;
}

.tube{
    margin: 10px;
}

#LiquiShift_funny_hilarious{
    margin-left: 20px;
    height: 100%;
    width:50vw;
}

#manual_table_tower{
    margin-left: 20px;
    height: 100%;
}

#manual_table_not{
    margin-left: 20px;
    height: 100%;
}

#manual_table_not tr:nth-child(odd) td {
    background-color: white;
}

#manual_table_not tr:nth-child(even) td {
    background-color: #dbd8d8;
}

#manual_table_tower tr:nth-child(odd) td {
    background-color: white;
}

#manual_table_tower tr:nth-child(even) td {
    background-color: #dbd8d8;
}

#LiquiShift_funny_hilarious tr:nth-child(odd) td {
    background-color: white;
}

#LiquiShift_funny_hilarious tr:nth-child(even) td {
    background-color: #dbd8d8;
}

#LiquiShift-header_upgrade{
    position: relative;
    width: 40vw;
    min-width: 40em;
    font-family: Arial, Helvetica, sans-serif;
    border: 10px solid #f3f3f3;
    border-radius: 10px;
    background-color: #f3f3f3;
}

#tube-img-container{
    display: flex;
}

#tube-imgs{
    position: absolute;
    left: 170px;
    width: 100%;
}

#tube-names{
    width: 150px;
    background-color: #001376;
    border:10px solid #001376;
    border-bottom: none;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: white;
    margin-top: 10px;
    margin-left: 10px;
}

#tube-names #name{
    height: 30px;
    margin-bottom: 10px;
}

#pump_calculator_header{
    width: 40vw;
    min-width: 40em;
    font-family: Arial, Helvetica, sans-serif;
    border: 10px solid #f3f3f3;
    border-radius: 10px;
    background-color: #f3f3f3;
    margin-bottom: 20px;
}

#pump-h2{
    text-align: center;
    border-bottom:1px solid #f26522;
}
}

div[id="flow_inputs"]{
    text-align: center;
    width: 30vw;
    height: fit-content;
    content: center;
    border: 10px solid #001376;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
div[id="pump_input_total"]{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.tabs{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 90vw;
    font-family: Arial, Helvetica, sans-serif;
}

.tabs__label {
    cursor: pointer;
    padding: 10px 16px;
    margin-bottom: 20px;
    color: #FFD700;
}

.tabs__radio {
    display: none;
}

.tabs__content {
    width: 100%;
    order: 1;
    display: none;
}

.tabs__radio:checked+.tabs__label {
    font-weight: bold;
    color: white;
    border-bottom: 2px solid #F26522;
    background-color: #F26522;
}

.tabs__radio:checked+.tabs__label+.tabs__content {
    display: initial;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.PSI {
    margin-block-end: 0px;
    font-weight: bold;
    font-size: large;
}

#border{
    min-width: 95vw;

}
#LiquiShiftInfo{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid black;
    border-radius: 10px;
    z-index: 100;
}
#info{
    width: 2em;
    height: 2em;
    border-radius: 2em;
    z-index: 99;
}
#info_image{
width: fit-content;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0px;
    border-radius: 2em;
    border: 0px;
    z-index: 99;
}

#info_image:hover{
    padding: 0px;
    border-radius: 2em;
    border: 4px solid #F26522;
}

#man_info{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid black;
    border-radius: 10px;
    z-index: 100;
}

#flowCalculator{
    overflow-x: hidden;
}

#upgrade_info{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid black;
    border-radius: 10px;
    z-index: 100;
}

/* General button styles */
.tabs__label1, .tabs__label {
    padding: 20px 30px;          /* Padding around the text */
    border: none;                /* No border */
    cursor: pointer;             /* Pointer cursor on hover */
    background-color: gray;      /* Default background color for inactive state */
    color: white;                /* Text color */
    margin-right: 20px;          /* Space between buttons */
    transition: background-color 0.3s; /* Smooth transition for background color */
    font-size: 16px;             /* Font size */
    border-radius: 5px;          /* Rounded corners */
}

#box{
    min-width: 95vw;
    text-align: center;
}

/*23/01/2025*/
.tabs-shift h3{
    font-size: 24px;
    font-weight: 600;
    color: #0c0c0c;
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
}

.tabs-shift .tabs__content {
    margin: 40px 0px;
}

.tabs-shift .PSI1{
    margin-top: 20px;
    width: calc(100% - 195px);
    border: 1px solid #f26522;
    padding: 10px;
    border-radius: 8px;
}

.tabs-shift .tabs__content #LiquiShift #flow-tube-selector #info_image{
    left: 10px;
    top: -8px;
    right: unset;
}

.tabs-shift .tabs__content #LiquiShift #flow-tube-selector #tube-names{
    margin-left: 40px;
}

.tabs-shift .tabs__content #LiquiShift #flow-tube-selector #tube-imgs{
    left: 190px;
}

.tabs-shift .tabs__content #LiquiShift #flow-tube-selector #info_image #LiquiShiftInfo{
    padding: 10px;
    background-color: #fff;
}

.liquishift-img{
    position: relative;
}

.liquishift-img i{
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
}

/*01/02/2025*/
.cstm-manualtable{
    margin-top: 20px
}

.manual-tube button {
    right: unset;
    left: -8px;
}

.manual-tube #tube-names{
    margin-left: 20px;
}

.tabscontent-outer{
    border-top: 1px solid #7c7c7c;
    padding-top: 45px;
    margin-top: 30px;
}

.tabs-shift{
    justify-content: center;
}

.tabs-shift .tabs__label {
    width: 220px;
    text-align: center;
}


/*10/02/2025*/
.cstmRow{
    display:flex;
    flex-wrap:wrap;
}
.cstmCol-xxl-6{
    width:50%;
    padding:15px;
}
.cstmCol-lg-6{
    width:50%;
    padding:5px 15px;
}
.cstmCol-12{
width:100%;
    padding:5px 15px;
}
.flowCalculatorCstm input{
margin-top:10px;
}
.cstmCenter{
    display:flex;
    justify-content:center;
    align-items:center;
}
.pump1, .pump2, .pump3, .pump4, .pump5{
       display:flex;
       justify-content:center;
       align-items:center;
       flex-direction:column;


    }

    #pump_calculator_header{
    min-width:unset;
    max-width:33em;
    width:90vw;
    }

   /*15/02/2025*/
   .cstmPrumpFlex{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    /*gap:10px;*/
   }

   .WholePumpHeading{
   font-size: 22px;
margin-block: 10px;
font-weight:600;
}
.cstmM-auto{
margin:auto;
}
#pump_calculator_header{
margin-top:40px;
}
/*responsive*/
@media(max-width:1440px){
    .cstmCol-xxl-6{
    width:100%;
}
.cstmCol-lg-6{
    width:100%;
}
}

@media(min-width:1440px){
   .borderRightPump{
    border-right: 1px solid #666;
   }
   .borderRightPumpAbsolute{
    position:relative;
   }
   .borderRightPumpAbsolute:after{
    content:"";
    bottom:0px;
    right:0px;
    position:absolute;
    height:80%;
    border-right: 1px solid #666;
   }
}

@media(max-width:576px){
    div[id="form"]{
        padding:8px;
    }
    .flowCalculatorCstm{
        padding-top:60px;
    }
    .flowCalculatorCstm .white-box{
    padding:25px 4px;
    }
    .flowCalculatorCstm #pump_calculator_header{
        min-width:unset;
    }
    .flowCalculatorCstm #LiquiShift-header{
        min-width:unset;
    }
    .flowCalculatorCstm #LiquiShift_table{
        max-width:95vw;
        overflow:auto;
    }

    .pump1, .pump2, .pump3, .pump4, .pump5{
        width:92%;
        max-width:90vw;
    }
    /*
    #whole_pump span{
    font-weight:bold;
    font-size:18px;
    margin-top:10px;
    }*/

    .logout {
    padding: 30px 35px;
    float: right;
    padding: 10px;
    display: flow-root;

    width: 100%;
}
.logout p {
    font-size: 16px;
    color: #252d36;
    margin: 10px;
    width: 38%;
    float: left;
    height: 25px;
}
.flowCalculatorCstm{padding-top:100px;}


}



@media(min-width:576px) and (max-width:992px){
   /* div[id="pump_input_total"]{
        max-width:40vw;
    }*/
    div[id="flow_inputs"]{
    min-width:unset;
    width:58vw;
    }
    #LiquiShift_table {

	 width: unset;
}
#LiquiShift_table.cstmCol-xxl-6{
width:50%;
}
::after, ::before {

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
element {

    width: 58vw;

}
#flow-tube-selector{
min-width:unset;
width:58vw;
}
.tabs-shift .PSI1 {

    width: calc(100% - 255px);

}
#LiquiShift-container .cstmCol-xxl-6{
width:50%
}

}
.LiquiShift-containerMaxWidth{
    max-width:90em;
}
#whole_pump{
margin-block:10px;
}
.pump1 div.pump{
width:100%;
}