body {
    margin-top: 65px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    .container.body-content {
        margin-left: 100px !important;
        margin-right: 100px !important;
        width: unset !important;
    }
}

@media (max-width: 768px) {
    .modal {
        flex-direction: column;
        height: auto;
        max-height: none;
        height: 74% !important;
    }

    .modal-right{
        display: none;
    }

    .kgTitle {
        font-size: 40px !important;
    }
}    

    /* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
    .dl-horizontal dt {
        white-space: normal;
    }

    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }

    .navbar-inverse {
        background-color: #160434;
        border-color: #080808;
    }

    .navbar-fixed-top {
        background-color: #160434;
    }

    .home_container {
        position: relative;
        text-align: center;
        color: white;
    }

    .centered {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0px;
        margin: 0px;
    }

    .vt {
        font-family: 'TT Norms Pro';
        font-size: 4.5em;
        color: #160434;
        padding: 0px;
        margin: 0px;
    }

    .viridHomeLogo {
        width: 400px;
        height: 200px;
        object-fit: cover;
    }

    .hidden {
        display: none;
    }

    .highlighted {
        background-color: antiquewhite;
    }

    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    }

        /* Tooltip text */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
            /* Position the tooltip text */
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            /* Fade in tooltip */
            opacity: 0;
            transition: opacity 0.3s;
        }

            /* Tooltip arrow */
            .tooltip .tooltiptext::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }

        /* Show the tooltip text when you mouse over the tooltip container */
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

    tr.highlight {
        background-color: lightblue;
    }

    .btn-default {
        color: #333333;
        background-color: #ffffff;
        border-color: #cccccc;
    }

        .btn-default:hover,
        .btn-default:focus,
        .btn-default:active,
        .btn-default.active,
        .open .dropdown-toggle.btn-default {
            color: #333333;
            background-color: #ebebeb;
            border-color: #adadad;
        }

        .btn-default:active,
        .btn-default.active,
        .open .dropdown-toggle.btn-default {
            background-image: none;
        }

        .btn-default.disabled,
        .btn-default[disabled],
        fieldset[disabled] .btn-default,
        .btn-default.disabled:hover,
        .btn-default[disabled]:hover,
        fieldset[disabled] .btn-default:hover,
        .btn-default.disabled:focus,
        .btn-default[disabled]:focus,
        fieldset[disabled] .btn-default:focus,
        .btn-default.disabled:active,
        .btn-default[disabled]:active,
        fieldset[disabled] .btn-default:active,
        .btn-default.disabled.active,
        .btn-default[disabled].active,
        fieldset[disabled] .btn-default.active {
            background-color: #ffffff;
            border-color: #cccccc;
        }

    a {
        color: #428bca;
    }

    map {
        height: 800px;
        width: 100%;
    }

    @media only screen and (max-width: 600px) {
        map {
            height: 550px;
        }
    }

    apex-chart-container {
        min-height: 365px;
    }

    power-bi-frame {
        height: auto;
        width: 100%;
    }
    /* ========================================================================= */
    /* ======================= VIRIDIAN DASHBOARD ============================== */
    /* ========================================================================= */
    .dashboardVirid {
        border: 1px solid black;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 5px;
        width: 100%;
        height: 100%;
    }

    .grid-item {
        border: 1px solid #ff652f;
        padding: 5px;
        grid-row: span 1;
        grid-column: span 1;
    }

    .panels > div {
        border: 1px solid black;
    }

    .panels {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 225px auto auto;
        grid-template-rows: auto auto;
    }

    .panel-info {
        grid-row: span 2;
    }

    .panel-positions {
        grid-column: span 2;
    }

    @media (min-width: 1200px) {
        .container {
            max-width: unset;
        }
    }

    @media (max-width: 1200px) {
        .vt {
            font-size: 3em;
        }

        .viridHomeLogo {
            width: 20px;
            height: 10px;
            object-fit: unset;
        }
    }

    @media (max-width: 750px) {
        .dashboard {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
        }

        .panel-positions {
            grid-column: span 2;
        }

        .vt {
            font-size: 2em;
        }

        .viridHomeLogo {
            width: 20px;
            height: 10px;
            object-fit: unset;
        }
    }

    @media (max-width: 500px) {
        .dashboard {
            grid-template-columns: repeat(1, 1fr);
        }

        .panel-positions {
            grid-column: span 1;
        }

        .vt {
            font-size: 2em;
        }

        .viridHomeLogo {
            width: 20px;
            height: 10px;
            object-fit: unset;
        }
    }