/*=======================================================================
 Default Styles
=========================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Poly&family=Poppins:wght@400;500;600;700;800&display=swap");
/*-------------------------
    Variables
-------------------------*/
:root {
  --accent-1: #182432;
  --accent-2: #EABD9A;
  --accent-3: #8B0000;
  --color-white: #ffffff;
  --color-black: #212627;
  --color-black-light: #3B3B3B;
  --color-semi-grey: #F4F4F4;
  --color-grey: #7A7F85;
  --font-primary: "Poppins", sans-serif;
  --transition: all 0.3s ease-in-out;
  --dark-shadow: 1px 1px 4px 0px rgba(0, 33, 33, 0.06), 5px 4px 7px 0px rgba(0, 33, 33, 0.05), 11px 10px 9px 0px rgba(0, 33, 33, 0.03), 20px 18px 11px 0px rgba(0, 33, 33, 0.01), 31px 28px 12px 0px rgba(0, 33, 33, 0.00);
}

                                                                                      
/*-------------------------
    Typography
-------------------------*/
body{
    padding: 0;
    margin: 0;
}
*{
    box-sizing: border-box;
}
.ratio-calculator{
    padding: 30px 20px;
    background: var(--accent-1);

}
.sec-title{
    text-align: center;
    padding: 10px 10px 20px;
    box-sizing: border-box;
}
.sec-title h2{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    padding: 0 10px 5px;
    margin: 0;
    line-height: 1.2;
    color: var(--accent-2);
}
.flex-block{
    display: flex;
    align-items: center;
    padding-bottom: 24px;
}
.table-block{
    width: 65%;
    /* padding: 10px; */
    box-shadow: var(--dark-shadow);
}
table {
    border-collapse: collapse;
    margin: 0;
}
table, td, th {
    padding: 8px 12px;
    border: 1px solid var(--accent-2);
    vertical-align: middle;
}     
.table-block table td.light{
    width: 130px;
    text-align: center;
    font-size: 19px;
    font-weight: 500;
    color: var(--accent-2);
    font-family: var(--font-primary);
    line-height: 1.4;
}
.table-block table th{
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: var(--accent-2);
    font-family: var(--font-primary);
    line-height: 1.4;

}
.table-block table td .input-block{
    display: flex;
    align-items: center;
    
}
.table-block table td .input-block input.jw-input{
    width: 100%;
    margin: 0;
    min-height: auto!important;
    line-height: 1.8;
    padding: 4px 8px;
    color: var(--color-white)!important;
    border: 1px solid var(--color-semi-grey);
    background: transparent;
    font-size: 16px;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-weight: 500;
    box-sizing: border-box;
}
.table-block table td .input-block.prepend-input span,
.table-block table td .input-block.append-input span{
    line-height: 1.8;
    padding: 4px 8px;
    color: var(--accent-2)!important;
    border: 1px solid var(--color-semi-grey);
    border-radius: 4px 0 0 4px;
    border-right: none;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-primary);
}
.table-block table td .input-block.prepend-input span{
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--color-semi-grey);
    border-left: none;
}

.table-block table td .input-block.append-input input.jw-input{
    border-left: none;
    border-radius: 0 4px 4px 0;
}
.table-block table td .input-block.prepend-input input.jw-input{
    border: 1px solid var(--color-semi-grey);
    border-right: none;
    border-radius: 4px 0 0 4px;
}
.result-block{
    width: 35%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:  20px 15px;
}
.sm-text{
    text-align: center;
    font-size: 28px;
    font-weight: 400;
    color: var(--accent-2);
    font-family: var(--font-primary);
    line-height: 1.4;
    margin-bottom: 16px;
}
output{
    /* display: flex;
    align-items: end; */

}
output{
    text-align: center;
    font-size: 26px;
    font-weight: 400;
    color: var(--accent-2);
    font-family: var(--font-primary);
    line-height: 1;
    margin-bottom: 0px;
}
output span{
    font-size: 38px;
    font-weight: 600;
    color: var(--color-semi-grey);
    padding: 0 4px;
    line-height: 1;

}
.btn-group{
    padding: 0 20px;
}
.btn-group .calc-btn{
    /* margin-top: 24px; */
    background: #8B0000;
    color: #fff;
    padding: 5px 20px;
    border: 1px solid #8B0000;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    min-width: 150px;
    box-sizing: border-box;
}
.btn-group .calc-btn:hover{
    background: #fff;
    transition: 0.2s;
    border: 1px solid #8B0000;
    color: #8B0000;
}
#ratio-calcualtion-print{
    background: #182432;
    -webkit-print-color-adjust: exact; 
    padding: 0 20px;
}
@media only screen and (max-width: 1199px) {
    .table-block table th{
        font-size: 18px;
    }
    .table-block table td.light{
        font-size: 18px;
    }
}
@media only screen and (max-width: 768px){
    .flex-block{
        flex-direction: column;
    }
    .result-block,
    .table-block{
        width: 100%;
    }
}
@media only screen and (max-width: 575px){
    .sec-title h2{
        font-size: 24px;
    }
    .container{
        width: 100%;
        max-width: 100%;
    }
    .ratio-calculator{
        padding: 20px 10px;
    }
    .table-block table th{
        font-size: 14px;
    }
    .table-block table td.light{
        font-size: 14px;
    }
    #ratio-calcualtion-print{
        padding: 0 10px;
    }
    .result-block{
        padding: 15px 10px;
    }
    .sm-text{
        font-size: 24px;
    }
    output{
        font-size: 22px;
    }
    output span{
        font-size: 32px;
    }
}
@media only screen and (max-width: 490px){
    .table-block table td.light{
        width: 90px;
    }
    .sec-title h2{
        font-size: 19px;
    }
    .btn-group{
        display: flex;
        gap: 10px;
        padding: 0 10px;
        justify-content: center;
    }
    .btn-group .calc-btn{
        min-width: 130px;
    }
}