/* ==========================================
   Dashboard Responsive
   max-width:1199.98px
========================================== */

@media (max-width:1199.98px){

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

.cf-back-card{

    padding:30px 15px 60px;

}

.dashboard-wrapper{

    width:100%;

}


/* ==========================================
   Hero
========================================== */

.hero-top{

    display:flex;

    flex-direction:column;

    gap:35px;

}

.hero-left{

    width:100%;

}

.hero-right{

    width:100%;

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}

.hero-left h1{

    font-size:2rem;

}

.hero-left p{

    font-size:15px;

}


/* ==========================================
   Hero Buttons
========================================== */

.hero-buttons{

    flex-direction:column;

    align-items:stretch;

    gap:15px;

}

.hero-primary-btn,

.hero-secondary-btn{

    width:100%;

    justify-content:center;

}


/* ==========================================
   Hero Stats
========================================== */


.hero-stat{

    width:100%;

}


/* ==========================================
   Dashboard Header
========================================== */

.dashboard-header{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}


/* ==========================================
   Toolbar
========================================== */

.dashboard-toolbar{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.dashboard-left{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.dashboard-buttons{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:15px;

}


/* ==========================================
   Buttons
========================================== */

.create-profile-btn,

.delete-account-btn,

.dashboard-signout-btn{

    width:100%;

    justify-content:center;

}


/* ==========================================
   Category
========================================== */

.dashboard-category{

    width:100%;

}

.dashboard-dropdown{

    width:100%;

}

.dashboard-input{

    width:100%;

}


/* ==========================================
   Table
========================================== */

.dashboard-table{

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

.cf-table{

    min-width:900px;

}


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

.dashboard-content-card{

    border-radius:22px;

}

.dashboard-content-card>*{

    padding-left:18px;

    padding-right:18px;

}

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width:575.98px){

.hero-left h1{

    font-size:1.65rem;

}

.hero-left p{

    font-size:14px;

}

.hero-badge{

    font-size:13px;

}

.hero-stat{

    padding:16px;

}

.hero-stat h2{

    font-size:22px;

}

.hero-stat span{

    font-size:13px;

}

.hero-info{

    padding:14px;

}

.hero-info strong{

    font-size:14px;

}

.dashboard-title h3{

    font-size:22px;

}

.profile-limit-badge{

    font-size:12px;

}

.dashboard-input{

    height:52px;

    font-size:14px;

}

.create-profile-btn,

.delete-account-btn,

.dashboard-signout-btn{

    height:52px;

    font-size:15px;

}

.table-profile-photo{

    width:48px;

    height:48px;

}

.category-badge{

    font-size:12px;

}

}

/* ==========================================
   Hero Stats
========================================== */

.hero-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}


.hero-stat{

    width:100%;

}


/* ==========================================
   Tablet
========================================== */

@media (max-width:991.98px){

    .hero-stats{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width:575.98px){

    .hero-stats{

        grid-template-columns:1fr;

        gap:14px;

    }

}