.header-banner.dcp.default {
    .dcp-widget {
        margin: 0 auto;
    }

    .dcp-widget.reminder_disabled {
        .dcp-body-wrapper {
            display: block !important;
        }
    }
}

.dcp-widget.default {
    background-color: var(--dcp-background-color);
    width: fit-content;
    max-width: fit-content;
    padding: 5px;

    .dcp-title {
        font-weight: bold;
        text-align: center;
        color: var(--dcp-title-color);
    }

    .dcp-body-wrapper {
        display: grid;
        grid-template-columns: auto 50px;
        gap: 5px;
    }

    .dcp-digits-wrapper {
        display: grid;
        grid-auto-flow: column; /* Align items in a row */
        grid-auto-columns: 1fr; /* Equal width for all columns */
        gap: 5px; /* Adjust as needed */
        width: max-content; /* Ensures container only takes the necessary width */

        .digit-wrapper {
            flex: 1;
            min-width: 45px;
            background-color: var(--dcp-digit-wrapper-background-color);

            .digit {
                height: 45px;
                white-space: nowrap;
                display: grid;
                place-items: center;
                padding: 4px;
                background-color: var(--dcp-digit-background-color);
                color: var(--dcp-digit-text-color);
                text-align: center;
                border-radius: 4px;
                font-weight: bold;
                font-size: 20px;
            }

            .text {
                color: var(--dcp-digit-label-color);
                display: block;
                text-align: center;
                font-size: 11px;
            }
        }
    }

    .dcp-reminder-show {
        display: grid;
        place-items: center;
        font-size: 11px;
        text-align: center;
        line-height: 11px !important;
        color: var(--dcp-notify-text-color) !important;
        background-color: var(--dcp-notify-background-color);
        border-radius: 4px;

        i {
            font-size: 20px !important;
        }
    }

}

.dcp-widget.default {
    --dcp-background-color: #ffffff;
    --dcp-title-color: #429eff;
    --dcp-digit-wrapper-background-color: #ffffff;
    --dcp-digit-background-color: #429eff;
    --dcp-digit-label-color: #429eff;
    --dcp-digit-text-color: #ffffff;
    --dcp-notify-text-color: #000000;
    --dcp-notify-background-color: #333333;
}