/* ==========================================
   Dashboard Background
========================================== */

.cf-back-card{

    min-height:100vh;

    padding:60px 20px 80px;

    border-radius:14px;

    overflow:hidden;

    background:
        radial-gradient(circle at top right,#DDF7F6 0%,transparent 30%),
        radial-gradient(circle at bottom left,#E3F4FF 0%,transparent 35%),
        #F7FAFC;

}


/* ==========================================
   Wrapper
========================================== */

.dashboard-wrapper{

    width:min(95%,1450px);

    margin:0 auto;

}


/* ==========================================
   Dashboard Main Card
========================================== */

.dashboard-card{

    display:flex;

    flex-direction:column;

    gap:35px;

}


/* ==========================================
   Dashboard Content Card
========================================== */

.dashboard-content-card{

    background:#FFFFFF;

    border:1px solid var(--dashboard-border);

    border-radius:28px;

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(15,23,42,.08),
        0 6px 18px rgba(15,23,42,.05);

}


/* ==========================================
   Content Spacing
========================================== */

.dashboard-content-card>*{

    padding-left:35px;

    padding-right:35px;

}


/* ==========================================
   Remove Padding
========================================== */

.dashboard-table{

    padding-left:0;

    padding-right:0;

    padding-bottom:0;

}


/* ==========================================
   Smooth Animation
========================================== */

.dashboard-card,

.dashboard-content-card{

    animation:dashboardFade .45s ease;

}

@keyframes dashboardFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================
   Section Gap
========================================== */

.dashboard-header{

    margin-top:30px;

}

.dashboard-toolbar{

    margin-top:25px;

    margin-bottom:30px;

}

.dashboard-table{

    margin-top:10px;

}


/* ==========================================
   Shadow Hover
========================================== */

.dashboard-content-card:hover{

    box-shadow:
        0 30px 70px rgba(15,23,42,.10),
        0 8px 22px rgba(15,23,42,.05);

}


/* ==========================================
   Large Desktop
========================================== */

@media (min-width:1600px){

    .dashboard-wrapper{

        width:min(92%,1550px);

    }

}


/* ==========================================
   Tablet & Mobile
========================================== */

@media (max-width:1199.98px){

    .cf-back-card{

        padding:35px 15px 60px;

    }

    .dashboard-wrapper{

        width:100%;

    }

    .dashboard-content-card{

        border-radius:22px;

    }

    .dashboard-content-card>*{

        padding-left:20px;

        padding-right:20px;

    }

}