/*==================================
CONSTRUCTION ESTIMATE CALCULATOR
style.css
==================================*/

:root{

    --primary:#0d6efd;

    --success:#198754;

    --danger:#dc3545;

    --warning:#ffc107;

    --dark:#212529;

    --light:#f8f9fa;

    --shadow:0 8px 20px rgba(0,0,0,.08);

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:#eef2f7;

    font-family:Segoe UI,Tahoma,sans-serif;

    color:#333;

    line-height:1.6;

}

/*=========================
NAVBAR
=========================*/

.navbar{

    box-shadow:var(--shadow);

}

.navbar-brand{

    font-size:24px;

    font-weight:700;

}

/*=========================
CARDS
=========================*/

.card{

    border:none;

    border-radius:15px;

    overflow:hidden;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

.card-header{

    font-size:20px;

    font-weight:600;

    padding:15px 20px;

}

.card-body{

    padding:25px;

}

/*=========================
FORM
=========================*/

.form-label{

    font-weight:600;

    margin-bottom:8px;

}

.form-control,

.form-select{

    height:48px;

    border-radius:10px;

    border:1px solid #ced4da;

}

.form-control:focus,

.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 10px rgba(13,110,253,.2);

}

/*=========================
BUTTONS
=========================*/

.btn{

    border-radius:10px;

    padding:10px 20px;

    font-weight:600;

    transition:.3s;

}

.btn:hover{

    transform:translateY(-2px);

}

/*=========================
LOGO
=========================*/

#logoPreview{

    max-height:120px;

    margin-top:10px;

    border-radius:10px;

    display:none;

}
/*=========================
TABLE
=========================*/

.table{

    margin-bottom:0;

}

.table thead{

    background:var(--dark);

    color:#fff;

}

.table th{

    text-align:center;

    vertical-align:middle;

    font-weight:600;

    padding:15px;

}

.table td{

    vertical-align:middle;

    padding:12px;

}

.table-hover tbody tr:hover{

    background:#f8f9fa;

}

/*=========================
PROGRESS BAR
=========================*/

.progress{

    height:24px;

    border-radius:30px;

    background:#dee2e6;

}

.progress-bar{

    font-weight:600;

    transition:.5s;

}

/*=========================
SUMMARY CARDS
=========================*/

.card h2{

    font-size:28px;

    font-weight:bold;

}

.card h6{

    text-transform:uppercase;

    letter-spacing:1px;

}

/*=========================
RUNNING BILL
=========================*/

#summaryWork,

#netDemand,

#receivedTotal,

#dueAmount{

    font-size:30px;

    font-weight:bold;

}

/*=========================
AMOUNT IN WORDS
=========================*/

#amountWords{

    resize:none;

    font-size:18px;

    font-weight:600;

    color:#198754;

}

/*=========================
REMARKS
=========================*/

#remarks{

    resize:vertical;

    min-height:120px;

}

/*=========================
SIGNATURE
=========================*/

.signature{

    margin-top:70px;

    text-align:center;

}

.signature hr{

    border:1px solid #000;

}

/*=========================
WORK TABLE
=========================*/

#workTable input{

    border:none;

    box-shadow:none;

}

#workTable select{

    border:none;

}

/*=========================
FOOTER
=========================*/

footer{

    margin-top:50px;

    background:#212529;

    color:#fff;

    padding:30px 0;

}

footer h5{

    margin-bottom:10px;

}

/*=========================
ALERT BOX
=========================*/

.alert{

    border:none;

    border-radius:12px;

    box-shadow:var(--shadow);

}

/*=========================
NUMBER BOX
=========================*/

h2{

    word-break:break-word;

}
/*==================================
PREMIUM CARD EFFECT
==================================*/

.card{

    transition:.35s ease;

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

/*==================================
HEADER GRADIENTS
==================================*/

.bg-primary{

    background:linear-gradient(135deg,#0d6efd,#0b5ed7)!important;

}

.bg-success{

    background:linear-gradient(135deg,#198754,#157347)!important;

}

.bg-danger{

    background:linear-gradient(135deg,#dc3545,#bb2d3b)!important;

}

.bg-warning{

    background:linear-gradient(135deg,#ffc107,#ffca2c)!important;

    color:#000!important;

}

.bg-info{

    background:linear-gradient(135deg,#0dcaf0,#31d2f2)!important;

}

.bg-dark{

    background:linear-gradient(135deg,#212529,#343a40)!important;

}

/*==================================
BUTTON EFFECT
==================================*/

.btn{

    transition:.3s;

    font-weight:600;

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(0,0,0,.20);

}

/*==================================
INPUT EFFECT
==================================*/

.form-control,
.form-select{

    transition:.3s;

}

.form-control:hover,
.form-select:hover{

    border-color:#0d6efd;

}

.form-control:focus,
.form-select:focus{

    transform:scale(1.01);

}

/*==================================
TABLE EFFECT
==================================*/

.table tbody tr{

    transition:.25s;

}

.table tbody tr:hover{

    background:#eef7ff;

}

/*==================================
TOTAL VALUE BOX
==================================*/

#contractAmount,
#showRate,
#netAreaText,
#summaryWork,
#netDemand,
#receivedTotal,
#dueAmount,
#workValue,
#currentBill{

    font-weight:700;

    font-size:30px;

}

/*==================================
LOGO
==================================*/

#logoPreview{

    border-radius:10px;

    border:2px solid #ddd;

    padding:5px;

    background:#fff;

}

/*==================================
SIGNATURE
==================================*/

.signature-box{

    height:120px;

    border-bottom:2px solid #000;

    margin-top:50px;

}

/*==================================
PRINT
==================================*/

@media print{

body{

background:#fff;

}

.navbar,

.btn,

footer{

display:none!important;

}

.card{

box-shadow:none;

border:1px solid #000;

margin-bottom:15px;

}

.card-header{

color:#000!important;

background:#fff!important;

border-bottom:2px solid #000;

}

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:992px){

.card h2{

font-size:24px;

}

.navbar-brand{

font-size:20px;

}

}

@media(max-width:768px){

.table{

font-size:14px;

}

.card-body{

padding:15px;

}

.btn{

width:100%;

margin-bottom:10px;

}

.card h2{

font-size:20px;

}

}

@media(max-width:576px){

body{

font-size:14px;

}

.navbar-brand{

font-size:18px;

}

.card-header h3{

font-size:18px;

}

.form-control,

.form-select{

height:42px;

}

}

/*==================================
SCROLLBAR
==================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#0d6efd;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

/*==================================
ANIMATION
==================================*/

.fade-up{

animation:fadeUp .6s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(25px);

}

100%{

opacity:1;

transform:translateY(0);

}

}