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

body{
    background:#f5f7fb;
    font-family:Arial,Helvetica,sans-serif;
}

.card{
    border:none;
    border-radius:12px;
}

.card-body{
    padding:25px;
}

/* ===============================
   Navbar
================================= */

.navbar{
    box-shadow:0 5px 15px rgba(0,0,0,.12);
}

.navbar-brand{
    font-size:24px;
    font-weight:700;
}

/* ===============================
   Layout Wrapper
================================= */

#layoutWrapper{

    position:relative;

    width:100%;

    height:75vh;

    overflow:auto;

    background:#ffffff;

    border:1px solid #ddd;

    border-radius:10px;

    text-align:center;

}

/* ===============================
   Layout Image
================================= */

#layoutImage{

    display:none;

    max-width:none;

    transform-origin:top left;

    transition:transform .25s ease;

    cursor:grab;

    user-select:none;

}

/* ===============================
   SVG Overlay
================================= */

#svgLayer{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    pointer-events:none;

}

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

.btn{

    border-radius:8px;

}

#zoomIn,
#zoomOut,
#resetZoom{

    min-width:120px;

    margin-right:8px;

}

/* ===============================
   Search
================================= */

#plotSearch{

    font-weight:600;

    text-transform:uppercase;

}

/* ===============================
   Legend
================================= */

.badge{

    padding:10px 18px;

    font-size:14px;

    margin-right:8px;

    margin-bottom:8px;

}

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

#loadingBox{

    padding:80px 20px;

    color:#666;

}

/* ===============================
   Modal
================================= */

.modal-content{

    border:none;

    border-radius:12px;

}

.modal-header{

    border-radius:12px 12px 0 0;

}

.table th{

    width:35%;

    background:#f8f9fa;

}

/* ===============================
   WhatsApp Button
================================= */

#whatsappBtn{

    margin-top:15px;

    font-size:18px;

    font-weight:bold;

}

/* ===============================
   Responsive
================================= */

@media(max-width:768px){

    #layoutWrapper{

        height:60vh;

    }

    .navbar-brand{

        font-size:20px;

    }

    .btn{

        margin-bottom:8px;

        width:100%;

    }

    .badge{

        display:inline-block;

        margin-bottom:8px;

    }

    .card-body{

        padding:15px;

    }

}