.cdf-btn {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    margin: 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    border-radius: 32px;
    color: #000 !important;
    background-color: #ff7438 !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.cdf-btn:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cdf-green {
    background-color: #4dd84b;
}

.cdf-light-green {
    background-color: #BBE3BA;
}

.cdf-orange {
    background-color: #ff7438;
}

.cdf-purple {
    background-color: #7f6bff;
}

.cdf-cream {
    background-color: #fff7ea;
}

h1, .cdf-title {
    font-family: sourGummy, Arial, sans-serif !important;
    font-size: 36px !important;
}

h2, .cdf-subtitle {
    font-family: Inglobal, Arial, sans-serif !important;
    font-size: 30px !important;
}

body, .cdf-text {
    font-family: linuxBiolinum, Arial, sans-serif !important;
    font-size: 15px !important;
}

body {
    background-color: #fff7ea;
}

.cdf-modal-style {
    border-radius: 32px;
    position: absolute!important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center!important;
    padding: 24px!important;
    max-width: 80%;
}

.cdf-main-content {
    padding-bottom: 0;
}

@font-face {
    font-family: sourGummy;
    src: url("src/fonts/SourGummy.woff2") format("woff2");
}

@font-face {
    font-family: Inglobal;
    src: url("src/fonts/inglobal.woff2") format("woff2");
}

@font-face {
    font-family: linuxBiolinum;
    src: url("src/fonts/LinuxBiolinum.woff2") format("woff2");
}

/* Next Task Items Responsive */
.next-task-item p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.next-task-day {
    margin-bottom: 12px;
}

.next-task-day-toggle {
    width: 100%;
    border: none;
    border-radius: 16px;
    background-color: #ff743833;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: 16px;
    margin: 0 0 8px;
}

.next-task-day-toggle-open .next-task-day-chevron {
    transform: rotate(180deg);
}

.next-task-day-chevron {
    transition: transform 0.2s ease;
}

.next-task-day-body {
    margin-left: 6px;
}

@media (max-width: 600px) {
    .cdf-main-content {
        /* Keep content above fixed mobile bottom nav */
        padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px));
    }

    #next-task-panel {
        margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    #next-task-toggle {
        margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .next-task-item {
        padding: 6px 10px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .next-task-item p {
        font-size: 13px !important;
        line-height: 20px !important;
        margin: 0 !important;
        flex: 1;
    }

    .next-task-item .w3-third {
        width: auto !important;
        flex: 1;
    }
}

@media (min-width: 601px) {
    .cdf-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .cdf-layout-modal {
        display: grid;
        gap: 16px;
        align-items: start;
    }

    .cdf-home-top-left {
        grid-column: 1;
        grid-row: 1;
        margin-top: 2em;
    }

    .cdf-home-top-right {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .cdf-home-bottom-left {
        grid-column: 1;
        grid-row: 2;
        margin-top: 1em;
    }

    .cdf-home-bottom-right {
        grid-column: 2;
        grid-row: 2;
        margin-top: -5em;
    }

    .cdf-event-top-left {
        grid-column: 1;
        grid-row: 1;
    }

    .cdf-event-top-right {
        grid-column: 2;
        grid-row: 1;
    }

    .cdf-event-bottom-left {
        grid-column: 1;
        grid-row: 2;
    }

    .cdf-modal-left {
        grid-column: 1;
        grid-row: 1;
    }

    .cdf-modal-right {
        grid-column: 2;
        grid-row: 1;
    }
}