/*---------------------------------------------
Template Name: Area Calculator
Author: Hafiz Shehroz``11
Version: 1.0.0


--------------------------------------------*/
/*=======================================================================
 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: 20px 10px;
    background: var(--accent-1);
}
.logo-title{
    margin-bottom: 24px;
}
.logo-title .image{
    margin-bottom: 16px;
}
.logo-title .image img{
    width: 150px;
}

.sec-title{
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 0;
}
.sec-title h2{
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    line-height: 1.2;
    color: var(--color-white);
}
.flex-block{
    display: flex;
    align-items: center;
    padding-bottom: 24px;
}
.table-block{
    width: 100%;
    /* padding: 10px; */
    box-shadow: var(--dark-shadow);
}
table {
    border-collapse: collapse;
    margin: 0;
}
table th, table td,
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
    vertical-align: middle!important;
}
table, td, th {
    padding: 8px 12px!important;
    border: 1px solid var(--accent-2)!important;
}     
.table-block table td.light{
    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;
    
}
.jw-input,
.table-block table td .sel-block .jw-input,
.table-block table td .input-block .jw-input{
    width: 100%;
    margin: 0;
    /* height: 40px; */
    background: var(--accent-1);
    line-height: 1.8;
    padding: 4px 8px!important;
    color: var(--color-white)!important;
    border: 1px solid var(--color-semi-grey)!important;
    font-size: 16px!important;
    border-radius: 4px!important;
    font-family: var(--font-primary);
    font-weight: 500;
    box-sizing: border-box;
}
.table-block table td .sel-block .jw-input:focus{
    outline: 0;
}
.table-block table td .input-block.prepend-input span,
.table-block table td .input-block.append-input span{
    /* height: 40px; */
    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;
}
.table-block table td.row-2{
    width: 60%;
}
.table-block table td.row-1 .block{
    display: flex;
    align-items: center;
}
.table-block table td.row-1 .sel-block{
    width: 65%;
}
.table-block table td.row-1 span{
    /* width: 35%; */
    margin: 0 auto;
    margin-top: 6px;
}
a.light-text{
    text-decoration: underline!important;
    color: #83bbf7;
}
.light-text{
    display: block;
    text-align: center;
    font-size: 19px;
    font-weight: 400;
    color: var(--accent-2);
    font-family: var(--font-primary);
    line-height: 1.4;
    margin-bottom: 0px;
    padding: 0 10px;
}
.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: 20px;
}
textarea{
    height: 38.8px!important;
    min-height: 38.8px!important;
}
.horizontal-line{
    width: 50%;
    height: 1px;
    margin: 32px auto;
    border-bottom: 1px dashed var(--accent-2);
}
.form{
    margin-bottom: 24px;
}
.form .form-group{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 55%;
    gap: 16px;
    margin-bottom: 16px;
}
.form .form-group .input-group{
    width: 50%;
}
.form .form-group .input-group label{
    font-size: 16px;
    font-weight: 500;
    color: var(--accent-2);
    line-height: 1.6;
    margin: 0;
    margin-bottom: 5px;
}
.form .form-group .input-group label span{
    font-weight: 400;
    font-size: 14px;
    color: var(--accent-3);
}
.form .form-group .input-group input{
    color: var(--accent-2);
}
.form .form-group .input-group input::placeholder{
    color: var(--color-grey);
}
.icon{
    font-size: 13px;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    color: var(--color-white);
    padding: 2px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.icon.check-icon{
    background: #65C386;
}
.icon.not-icon{
    background: #F3B71A;
    font-size: 16px;
    font-weight: 600;
}
.icon.close-icon{
    background: #CC222A;
    font-size: 13px;
    font-weight: 600;
}