/* ==========================================================
   Digital Power City Ltd.
   Elevator Quotation Generator
   Version 1.0
========================================================== */


/* ===========================
   Global
=========================== */

body {

    background: #f5f7fa;

    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    color: #343a40;

}


/* ===========================
   Container
=========================== */

.container {

    max-width: 1200px;

}


/* ===========================
   Header
=========================== */

h2 {

    font-weight: 700;

    letter-spacing: .5px;

}

h5 {

    font-weight: 600;

}


/* ===========================
   Card
=========================== */

.card {

    border: none;

    border-radius: 10px;

    margin-bottom: 25px;

}


.card-header {

    background: #0d6efd;

    color: white;

    font-weight: 600;

    padding: 12px 18px;

    border-radius: 10px 10px 0 0 !important;

}


.card-body {

    background: white;

    padding: 25px;

}


/* ===========================
   Form Labels
=========================== */

.form-label {

    font-weight: 600;

    margin-bottom: 6px;

}

/* ===========================
   Input
=========================== */

.form-control,
.form-select {

    border-radius: 8px;

    min-height: 44px;

    border: 1px solid #ced4da;

    transition: .20s;

}


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

    border-color: #0d6efd;

    box-shadow: 0 0 0 .15rem rgba(13,110,253,.20);

}


/* Readonly */

input[readonly]{

    background: #f1f3f5;

}

/* ===========================
   Buttons
=========================== */

.btn{

    border-radius:8px;

    min-width:180px;

    font-weight:600;

}


.btn-primary{

    padding:12px 25px;

}


.btn-outline-secondary{

    padding:12px 25px;

}

/* ===========================
   Alert
=========================== */

.alert{

    border-radius:8px;

}

/* ===========================
   Footer
=========================== */

footer{

    margin-top:40px;

    color:#6c757d;

    font-size:.90rem;

}

/* ==========================================================
   Theme Colors
========================================================== */

:root{

    --primary:#0B5ED7;

    --background:#F5F7FA;

    --card:#FFFFFF;

    --border:#DEE2E6;

    --text:#212529;

    --muted:#6C757D;

}


/* ==========================================================
   Card Hover
========================================================== */

.card{

    transition:.20s;

}

.card:hover{

    box-shadow:0 .5rem 1rem rgba(0,0,0,.08);

}


/* ==========================================================
   Input Placeholder
========================================================== */

::placeholder{

    color:#ADB5BD;

}


/* ==========================================================
   Textarea
========================================================== */

textarea{

    resize:vertical;

}


/* ==========================================================
   Readonly Fields
========================================================== */

input[readonly]{

    cursor:not-allowed;

}


/* ==========================================================
   Required Field
========================================================== */

label::after{

    content:"";

}

label.required::after{

    content:" *";

    color:red;

}

/* ==========================================================
   Generate Button
========================================================== */

#generateBtn{

    min-width:240px;

    font-size:16px;

    font-weight:600;

}


#generateBtn:disabled{

    cursor:not-allowed;

    opacity:.70;

}

.card-header i{

    margin-right:8px;

}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width:992px){

    .container{

        max-width:95%;

    }

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    h2{

        font-size:1.6rem;

    }

    h5{

        font-size:1rem;

    }

    .card-body{

        padding:18px;

    }

    .btn{

        width:100%;

        margin-bottom:10px;

    }

}


/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width:576px){

    body{

        font-size:15px;

    }

    .container{

        padding-left:12px;

        padding-right:12px;

    }

}

/* ==========================================================
   Loading
========================================================== */

.loading{

    pointer-events:none;

    opacity:.75;

}