/*
|--------------------------------------------------------------------------
| GCC Dashboard
|--------------------------------------------------------------------------
*/

.gcc-dashboard{

    max-width:1200px;

    margin:40px auto;

    padding:0 20px;

    font-family:Poppins,Arial,sans-serif;

    color:#222;

}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.gcc-dashboard-header{

    margin-bottom:35px;

}

.gcc-dashboard-title{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#159447;

}

.gcc-dashboard-subtitle{

    margin-top:8px;

    color:#777;

    font-size:15px;

}

/*
|--------------------------------------------------------------------------
| Cards Grid
|--------------------------------------------------------------------------
*/

.gcc-dashboard-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}

/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/

.gcc-card{

    background:#ffffff;

    border-radius:16px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.30s;

    border:1px solid #edf0f2;

}

.gcc-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,0,0,.12);

}

/*
|--------------------------------------------------------------------------
| Colored Top Border
|--------------------------------------------------------------------------
*/

.gcc-balance-card{

    border-top:5px solid #159447;

}

.gcc-investment-card{

    border-top:5px solid #1ba95a;

}

.gcc-stage-card{

    border-top:5px solid #d82626;

}

.gcc-price-card{

    border-top:5px solid #ff9800;

}

/*
|--------------------------------------------------------------------------
| Card Heading
|--------------------------------------------------------------------------
*/

.gcc-card h3{

    margin:0 0 15px;

    font-size:15px;

    font-weight:600;

    color:#666;

}

/*
|--------------------------------------------------------------------------
| Card Value
|--------------------------------------------------------------------------
*/

.gcc-value{

    font-size:30px;

    font-weight:700;

    color:#111;

    line-height:1.3;

    word-break:break-word;

}

.gcc-value span{

    display:block;

    margin-top:5px;

    font-size:14px;

    color:#888;

    font-weight:500;

}

/*
|--------------------------------------------------------------------------
| Wallet Card
|--------------------------------------------------------------------------
*/

.gcc-wallet-card{

    margin-bottom:30px;

}

.gcc-wallet-address{

    margin:20px 0;

    padding:15px;

    background:#f6f8fa;

    border-radius:10px;

    border:1px dashed #159447;

    word-break:break-all;

    font-size:14px;

}

/*
|--------------------------------------------------------------------------
| Claim Card
|--------------------------------------------------------------------------
*/

.gcc-claim-card{

    margin-bottom:30px;

}

.gcc-coming-soon{

    color:#ff9800;

    font-weight:600;

    margin:15px 0;

}

/*
|--------------------------------------------------------------------------
| Section Header
|--------------------------------------------------------------------------
*/

.gcc-section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.gcc-section-title h3{

    margin:0;

    font-size:22px;

    color:#222;

}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.gcc-btn-primary{

    background:#159447 !important;

    border-color:#159447 !important;

    color:#fff !important;

}

.gcc-btn-primary:hover{

    background:#0f7a39 !important;

}

.gcc-btn-danger{

    background:#d82626 !important;

    border-color:#d82626 !important;

    color:#fff !important;

}

.gcc-btn-danger:hover{

    background:#b51d1d !important;

}

.gcc-btn-disabled{

    background:#d7d7d7 !important;

    color:#777 !important;

    cursor:not-allowed;

}

/*
|--------------------------------------------------------------------------
| Badges
|--------------------------------------------------------------------------
*/

.gcc-badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    color:#fff;

}

.gcc-success{

    background:#159447;

}

.gcc-danger{

    background:#d82626;

}

.gcc-warning{

    background:#ff9800;

}

/*
|--------------------------------------------------------------------------
| Purchase History
|--------------------------------------------------------------------------
*/

.gcc-history-card{

    overflow:hidden;

}

.gcc-table-wrapper{

    width:100%;

    overflow-x:auto;

    margin-top:20px;

}

.gcc-history-table{

    width:100%;

    border-collapse:collapse;

    min-width:800px;

    background:#fff;

}

.gcc-history-table thead{

    background:#159447;

}

.gcc-history-table thead th{

    color:#fff;

    padding:16px;

    text-align:left;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}

.gcc-history-table tbody tr{

    border-bottom:1px solid #ececec;

    transition:.25s;

}

.gcc-history-table tbody tr:hover{

    background:#f8fffb;

}

.gcc-history-table tbody td{

    padding:16px;

    color:#444;

    font-size:14px;

    vertical-align:middle;

    white-space:nowrap;

}

/*
|--------------------------------------------------------------------------
| Wallet Button
|--------------------------------------------------------------------------
*/

.gcc-wallet-card .button{

    margin-top:10px;

}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

.gcc-table-wrapper::-webkit-scrollbar{

    height:8px;

}

.gcc-table-wrapper::-webkit-scrollbar-thumb{

    background:#159447;

    border-radius:30px;

}

.gcc-table-wrapper::-webkit-scrollbar-track{

    background:#ececec;

}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media(max-width:992px){

    .gcc-dashboard-grid{

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

    }

    .gcc-dashboard-title{

        font-size:28px;

    }

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .gcc-dashboard{

        padding:0 15px;

    }

    .gcc-dashboard-grid{

        grid-template-columns:1fr;

    }

    .gcc-card{

        padding:20px;

    }

    .gcc-dashboard-title{

        font-size:24px;

    }

    .gcc-dashboard-subtitle{

        font-size:14px;

    }

    .gcc-value{

        font-size:24px;

    }

    .gcc-section-title{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .gcc-wallet-address{

        font-size:13px;

    }

    .gcc-history-table{

        min-width:700px;

    }

}

/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:480px){

    .gcc-dashboard{

        margin:20px auto;

    }

    .gcc-card{

        border-radius:12px;

        padding:16px;

    }

    .gcc-value{

        font-size:22px;

    }

    .gcc-history-table thead th,

    .gcc-history-table tbody td{

        padding:12px;

        font-size:13px;

    }

    .gcc-badge{

        font-size:12px;

        padding:5px 10px;

    }

}