.widget-view {
    background: white;
    border: 1px solid #CCCCCC;
}

@media (max-width: 991.98px) {
    .widget-view {
        grid-column: auto / span 1 !important;
        grid-row: auto / span 2 !important;
    }
}

.activeWidget {
    border: solid;
    background-color: rgba(255, 255, 255, 1);
}

.nonActiveWidget {
    border: inherit;
    background-color: rgba(255, 255, 255, 0.9);
}

.widget-value {
    font-size: 20px;
    font-family: DINNextStencilHeavy;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .widget-value {
        font-size: 40px;
    }
}

.widget-title {
    font-size: 16px;
    font-weight: bold;
}

.card-body {
    padding-left: 6px;
    padding-right: 6px;
    border: 1px solid #dee2e6;
    background-color: #F8F8F8;
}

.dashboard-tab {
    display: block;
    padding: 0.5rem 1rem;
    font-weight: 700;
    color: black !important;
    margin-top: 3px;
    margin-left: 3px;
    border: 1px solid transparent;
    border-bottom: 0px;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    text-decoration: none;
}

.control-btn {
    width: 155px;
}

.dashboard-tab-grid {
    width: 100%;
    height: 1500px;
    gap: 12px;
    display: grid;
}

@media (max-width: 1399.98px) {
    .dashboard-tab-grid {
        height: 1200px;
        gap: 6px;
    }
}

@media (max-width: 575.98px) {
    .dashboard-tab-grid {
        height: 600px;
    }
}

@media (max-width: 991.98px) {
    .dashboard-tab-grid {
        grid-template-columns: 100% !important;
        grid-template-rows: repeat(auto-fill, 175px) !important;
        grid-auto-rows: 175px !important;
        height: auto !important;
    }
}

.widget-header {
    height: 10%;
}

@media (max-width: 1200px) {
    .widget-header {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: auto;
    }
}

.widget-header-wrapper {
    overflow: hidden;
}

@media (max-width: 1200px) {
    .widget-header-wrapper {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) {
    .widget-singlevalue {
        grid-column: auto / span 1 !important;
        grid-row: auto / span 1 !important;
    }
}

@media (max-width: 991.98px) {
    .edit-control {
        display: none !important;
    }
}

.block-is-invalid {
    border: 1px solid var(--bs-danger) !important;
}