/*!
Theme Name: Ellis Digital Theme
Author: Ellis Digital
Description: Based in Guildford, Surrey, we are an award-winning digital marketing and creative agency with a small team of talented individuals that are creative, analytical and passionate about what we do. Since we started out in 2015, we have continued to grow as a digital marketing agency, yet have maintained our dynamic approach, allowing flexibility to undertake any urgent pieces of work. Call 01483 912900 if you need any assistance and please visit www.ellis.digital.
Version: 1.3.0
Text Domain: ellis digital
*/

:root {
    --white: #fff;
    --black: #000;
}

html {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background: #000;
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background: #000;
}

.wrap {
    max-width: 1440px;
    margin: auto;
    width: 90vw;
}

.dashboard {
    padding-top: 100px;
    background: #000;
    color: #fff;
}

.tab-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.tab-navigation button {
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1;
    opacity: 0.6;
    letter-spacing: 2px;
    background: none;
    border: none;
    font-size: 24px;
    border-bottom: solid;
    padding: 15px 25px;
    transition: ease 0.3s;
    cursor: pointer;
}

.summary-text {
  margin-bottom: 60px;
}

.tab-navigation button:hover, .tab-navigation button.active {
    opacity: 1;
}

.dashboard-header h1 {
    font-size: 45px;
    font-weight: 200;
    text-align: center;
    letter-spacing: 2px;
}

.dashboard h2 {
    text-transform: capitalize;
    color: #fff;
    margin: 0;
    line-height: 1;
    opacity: 1;
    letter-spacing: 2px;
    font-weight: 200;
    margin: 40px 0;
    text-align: center;
}

.chart-container {
    display: grid;
    gap: 40px;
    width: calc(100%);
    padding: 20px 0;
    margin-bottom: 40px;
}

.chart-box {
    height: auto;
    display: flex;
    background: #161A1C;
    border-radius: 20px;
    padding: 10px;
}

.chart-box canvas {
    max-width: 800px;
    width: 100% !important;
    height: auto !important;
    margin: auto;
}

.summary-box {
    padding: 20px;
    background: #30363C;
    border-radius: 20px;
}

.summary-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding: 20px 0;
}

.summary-box h3 {
    font-size: 16px;
    font-weight: 200;
    margin: 0;
    margin-top: 20px;
    text-align: center;
}

.summary-box p {
    font-weight: 600;
    font-size: 40px;
    margin: 0;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-align: center;
}

.table-container {
    padding: 20px 0;
}

.table-container table {
    background: #30363C;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: solid 2px #30363C;
    min-width: 500px;
}

tr {
    text-align: start;
}

tr th {
    padding: 10px;
    text-align: start;
}

thead {
    background: #30363C;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

tr td {
    padding: 10px;
}

tbody tr {
    background: #161A1C;
}

thead tr {
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.heading-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 60px;
}

.heading-box {
    padding: 80px 20px;
    border-radius: 20px;
    background: #161A1C;
}

.heading-box h3 {
    font-size: 20px;
    margin: 0;
}

.heading-box p {
    margin: 0;
    font-size: 30px;
}

.picture-graph {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    position: relative;
    margin-bottom: 40px;
}

.picture-graph img {
    max-width: 100%;
    height: auto;
}

.table-container h3 {
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1;
    opacity: 1;
    letter-spacing: 2px;
    margin: 60px 0;
    text-align: center;
}

@media (max-width: 800px) {
    .tab-navigation {
        flex-direction: column;
    }
    .tab-navigation button {
        font-size: 18px;
    }

    .dashboard-header h1 {
        font-size: 30px;
    }

    .heading-container {
        grid-template-columns: 1fr;
    }

    .heading-box h3 {
        font-size: 18px;
    }

    .heading-box p {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .table-container {
        overflow-x: scroll;
    }
}