/* ==========================================================
   IMPORT BASE CSS
========================================================== */
@import url('/css/site.css?ver=1512');

/* ==========================================================
   DESKTOP SIZER
   Target: Standard Desktops and Laptops
========================================================== */

@media (min-width: 1224px) {

    /* ======================================================
       LAYOUT
    ====================================================== */

    .container-padding {
        padding: 1.5rem;
    }

    .main-content {
        min-height: 60vh;
        padding: 1rem;
    }

    .body-panel {
        margin: 1.5rem;
    }

    .grid-container {
        grid-template-columns: 1fr 4fr;
        gap: 1rem;
    }

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

    .navbar-brand img {
        max-height: 60px;
    }

    .navbar-nav .nav-link {
        font-size: .9rem;
        padding: .15rem .5rem !important;
        line-height: 1.1;
    }

    .navbar .dropdown-menu .dropdown-item {
        padding: 0.15rem 0.5rem !important;
        font-size: 0.85rem;
        line-height: 1.1;
    }

    /* ======================================================
       DROPDOWN
    ====================================================== */

    .dropdown-menu {
        min-width: 12rem;
    }

    .dropdown-item {
        font-size: .875rem;
        padding: .15rem 0.5rem;
    }

    /* ======================================================
       TOP BAR
    ====================================================== */

    .top-bar {
        min-height: 40px;
        padding-inline: 1rem;
        font-size: .9rem;
    }

    .social-bar img {
        height: 24px;
        margin-inline: .25rem;
    }

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

    .footer-main,
    .footer-bottom {
        padding: 1rem;
        font-size: .85rem;
    }

        .footer-bottom img {
            max-height: 50px;
        }

    /* ======================================================
       TABLES
    ====================================================== */

    .th-text {
        padding: .5rem;
        font-size: .875rem;
    }

    .td-text {
        padding: .3rem;
        font-size: .8rem;
    }

    /* ======================================================
       WATERMARK
    ====================================================== */

    .my-watermark {
        width: 50vh;
        height: 50vh;
        top: 50%;
        left: 55%;
        transform: translate(-50%, -55%);
    }

    /* ======================================================
       SLIDESHOW
    ====================================================== */

    .text {
        width: 100%;
        bottom: .5rem;
        padding: .5rem .75rem;
        font-size: 1rem;
    }

    .numbertext {
        padding: .5rem .75rem;
        font-size: .8rem;
    }

    .dot {
        width: 15px;
        height: 15px;
        margin: 0 2px;
        border-radius: 50%;
    }

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

    .input,
    .btn {
        min-height: 42px;
        font-size: .95rem;
        padding: .5rem .85rem;
    }

    .style-btn {
        min-width: 8rem;
    }

    /* ======================================================
       TREE VIEW
    ====================================================== */

    .tree-container ul {
        padding-left: 1.25rem;
        font-size: .8rem;
    }

    .tree-node {
        gap: .4rem;
        padding: .4rem;
    }

    .tree-badge {
        font-size: .7rem;
        padding: .15rem .5rem;
    }

    .tree-thumb {
        width: 28px;
        height: 28px;
    }

    /* ======================================================
       PANELS
    ====================================================== */

    .panel {
        min-height: 60vh;
    }

    .pane {
        padding: .5rem;
    }

    .tree-section {
        height: 45%;
    }

    .content-section {
        height: 55%;
    }

    /* ======================================================
       LIST / PREVIEW
    ====================================================== */

    .list-item {
        padding: .4rem;
        font-size: .8rem;
    }

    .preview-img {
        max-height: 300px;
    }

    /* ======================================================
       IMSSBN
    ====================================================== */

    .imssbn-small {
        width: 70px;
    }

    .imssbn-tiny {
        width: 40px;
    }

    .imssbn-indicator {
        width: 20px;
    }

        .imssbn-indicator i {
            font-size: 1rem;
        }

    /* ======================================================
       CONFIRM DIALOG
    ====================================================== */

    .confirm-box {
        width: 320px;
        padding: 1.25rem;
    }

    .confirm-image img {
        max-height: 220px;
    }

    .confirm-text {
        margin-bottom: 1rem;
        font-size: .9rem;
    }

    /* ======================================================
       UTILITIES
    ====================================================== */

    .scroll {
        max-height: 60vh;
    }
}