.display-dashboard {
    display: grid;
    grid-template-areas:
        /*"main-header main-header"*/
        "header-1 header-2"
        "sidebar dashboard-content"
        "footer footer";
    grid-template-columns: minmax(350px, 30vw) 1fr;
    grid-template-rows: auto auto minmax(50px, 50px);
    height: 100vh;
    gap: 0.5rem;
    /* padding: 0.5rem; */
    margin: 0;
    padding: 0;
    position: relative;
}

    .display-dashboard .w-board {
        background-color: #cfe7f480;
        /*background-color: var(--atom-palette-primary-40);*/
        height: 100%;
    }

/* Areas */
    .display-dashboard .main-header {
        grid-area: main-header;
    }

    .display-dashboard .header {
        display: flex;
        gap: 1rem;
        justify-content: center
    }

    .display-dashboard .header-1 {
        grid-area: header-1
    }

    .display-dashboard .header-2 {
        grid-area: header-2;
        position: relative;
    }

    .display-dashboard .nspire-logo {
        position: absolute;
        left: 10%;
        transform: translate(-10%, -50%);
        top: 50%;
    }

    .display-dashboard .header-2 .status {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        transform: translate(-18%, 70%);
        align-items: center;
    }

    .display-dashboard .img-container {
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 85px;
        width: 85px;
        border-radius: 100%;
    }

        .display-dashboard .img-container img {
            border-radius: 100%;
            min-width: 85px;
            min-height: 85px;
            max-height: 85px;
            max-width: 85px;
            object-fit: cover;
            background: #fff;
            padding: 2px !important;
        }


    .display-dashboard .header-1-img-container {
        min-width: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
        max-width: 150px !important;
        padding: 2px !important; 
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
    }

        .display-dashboard .header-1-img-container img {
            min-width: 150px !important;
            min-height: 150px !important;
            max-height: 150px !important;
            max-width: 150px !important;
            object-fit: cover;
            border-radius: 100%;
            background: #fff;
            padding: 2px !important;
        }

        .display-dashboard .sidebar {
            grid-area: sidebar;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .display-dashboard .sidebar .name {
            font-size: 20px;
        }

        .display-dashboard .sidebar .position {
            font-size: 14px;
        }

        .display-dashboard .sidebar .log {
            font-size: 18px;
        }

        .display-dashboard .sidebar .station {
            font-size: 18px;
        }

    .display-dashboard .dashboard-content {
        grid-area: dashboard-content;
        display: grid;
        grid-template-areas:
            "arrived ad-container ad-container"
            "not-yet-arrived ad-container ad-container"
            "visitors ad-container ad-container";
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        height: 100%;
        gap: 0.5rem;
    }

        .display-dashboard .dashboard-content h1 {
            font-size: 60px;
        }

/*sub partts of dashboard-content*/
    .display-dashboard .arrived {
        grid-area: arrived;
    }

    .display-dashboard .not-yet-arrived {
        grid-area: not-yet-arrived;
    }

    .display-dashboard .visitors {
        grid-area: visitors;
    }

    .display-dashboard .ad-container {
        grid-area: ad-container;
        width: 100%;
        overflow: hidden;
        position: relative;
        padding: 0 !important;
        /*background: transparent !important;*/
    }

        .display-dashboard .ad-container video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            border-radius: 6px;
        }
/*sub parts of dashboard-content*/
    .display-dashboard .footer {
        grid-area: footer;
        position: relative;
    }

    .display-dashboard .marquee-container {
        display: flex;
        width: 100%;
        background-color: var(--atom-palette-primary);
        overflow: hidden;
        position: relative;
        align-items: center;
        padding: 25px;
        font-size: 25px;
        height: 100%;
        max-height: 50px;
    }

    .display-dashboard .marquee {
        color: #fff;
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        animation: scroll-left 35s linear infinite;
    }

    .display-dashboard .marquee-logo-container {
        position: absolute;
        left: 0;
        z-index: 1;
        background: #fff;
        width: 50px;
        height: 50px;
        padding: 6px;
    }


    .display-dashboard .card-log-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .display-dashboard .card-log {
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        border-radius: 0px 0px 6px 6px;
        background-color: var(--atom-palette-secondary);
        color: var(--atom-palette-white);
    }

    .display-dashboard .card-detail {
        width: 100%;
        padding: 10px 20px;
        border-radius: 6px 6px 0px 0px;
        background-color: var(--atom-palette-primary);
        color: var(--atom-palette-white);
    }

    .display-dashboard .display-dashboard .birthday-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .display-dashboard .birthday-content .cake {
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(15%, -15%);
        }

.display-dashboard .birthday-content h1 {
    color: rgba(255,255,255,0.2);
    position: absolute;
    top: 0;
    left: 30%;
    letter-spacing: 1.5px;
    transform: translate(-30%, 50%) rotate(-15deg);
}

.display-dashboard .birthday-content .confetti {
    position: absolute;
    top: 0;
    left: 0;
}
/*statuses*/
/*card-detail*/
.display-dashboard .card-log-container.late .card-detail {
    background-color: #FFF0ED !important;
    color: var(--atom-palette-danger);
}

.display-dashboard .card-log-container.unregistered .card-detail {
    background-color: #FFF6E5 !important;
    color: #D69000;
}
/*card-log*/
    .display-dashboard .card-log-container.late .card-log {
        background-color: var(--atom-palette-danger);
    }

    .display-dashboard .card-log-container.unregistered .card-log {
        background-color: #D69000;
    }

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    .display-dashboard .display-dashboard {
        grid-template-areas:
            "main-header"
            "header-1"
            "header-2"
            "sidebar"
            "dashboard-content"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

        .display-dashboard .card-log-wrapper {
            flex-direction: row !important;
        }
}

@media(max-width: 992px) {
    .display-dashboard .dashboard-content {
        grid-template-areas:
            "arrived arrived arrived"
            "not-yet-arrived not-yet-arrived not-yet-arrived"
            "visitors visitors visitors"
            " ad-container ad-container ad-container";
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr minmax(250px, 50%);
    }

    .display-dashboard .card-log-wrapper {
        flex-direction: column
    }
}