@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Lato:wght@400;700&display=swap');

:root {
    --primary-black: #191919;
    --primary-yellow: #EAAD46;
    --primary-white: #FFF;
    --primary-grey: #444;
    --seconadry-grey: #D9D9D9;
}

.dash_logo {
    padding: 14px 0 10px 30px;
}

.dashboard_left_side {
    background-color: var(--primary-black);
    min-height: 100vh;
    height: 100%;
}

.menu-toggle {
    cursor: pointer;
    display: none;
    flex-direction: column;
}

.dash_logo img {
    float: left;
}

.dash_menu {
    margin: 25px 15px 15px 15px;
}

.dash_menu ul {
    list-style: none;
    padding-left: 5px;
}

.dash_menu ul li {
    margin: 8px 0;
}

.dash_menu ul li a {
    text-decoration: none;
    transition: all ease 0.3s;
    color: var(--primary-white);
}

.dash_menu ul li a:hover {
    color: var(--primary-yellow);
}

.dash_menu ul li a span {
    font-size: 15px;
    font-weight: 500;
    padding: 0 10px;
}

.dash_menu ul li a i {
    font-size: 17px;
}

.masthead {
    background-color: var(--primary-yellow);
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.masthead_timezon_input_holder {
    padding: 0 8px;
}

.admin_button {
    border-radius: 140px;
    background-color: var(--primary-white);
    font-weight: 700;
    padding: 3px 10px;
}

.masthead_icons ul {
    text-align: right;
    padding: 0;
    margin: 10px 15px;
    list-style-type: none;
}

.masthead_icons ul li {
    display: inline-block;
    margin-left: 17px;
}

.masthead_icons h6 {
    color: var(--primary-white);
    font-size: 17px;
    font-weight: 600;
}

.content-holder {
    padding: 15px;
}

.new_enrollment ul {
    list-style-type: none;
    padding: 0;
}

.new_enrollment ul li {
    display: inline-block;
    margin: 0 10px;
    text-align: right;
}

.add-enrollment {
    background-color: #eaac46;
    display: block;
    padding-right: 10px;
    border-radius: 5px;
    color: #fff;
}

.qth h4 {
    margin-top: 10px;
    margin-bottom: 5px
}

.qth h6 {
    font-size: 10px;
}

.qth a {
    display: block;
    color: #000;
}

.coaches {
    background-color: #FFE2E6;
    padding: 10px;
    border-radius: 8px;
}

.students {
    background-color: #F2EFFF;
    padding: 10px;
    border-radius: 8px;
}

.enrollments {
    background-color: #FEEECD;
    padding: 10px;
    border-radius: 8px;
}

.classes {
    background-color: #DCF0FF;
    padding: 10px;
    border-radius: 8px;
}

.leads {
    background-color: #F4E8FE;
    padding: 10px;
    border-radius: 8px;
}

.payments {
    background-color: #EBF1DD;
    padding: 10px;
    border-radius: 8px;
}

.total_amount_thumbs {
    margin-top: 30px;
    margin-bottom: 30px;
}

.total_students {
    background-color: #ffe5cf;
    border: 1px solid #ffdfb6;
    position: relative;
    height: 80px;
    padding: 15px;
    border-radius: 10px;
}

.total_reveneue {
    background-color: #ffe5cf;
    border: 1px solid #ffdfb6;
    position: relative;
    height: 80px;
    padding: 15px;
    border-radius: 10px;
}

.total_profit {
    background-color: #ffe5cf;
    border: 1px solid #ffdfb6;
    position: relative;
    height: 80px;
    padding: 15px;
    border-radius: 10px;
}

.total_students img {
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.total_reveneue img {
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.total_profit img {
    position: absolute;
    bottom: 10px;
    right: 15px;
}

@media only screen and (max-width: 480px) {
    .dash_logo {
        padding: 10px 0 8px 15px;
    }

    .menu-toggle {
        float: right;
        display: inline-block;
        margin-right: 15px;
        margin-top: 10px;
        position: relative;
        width: 49px;
        height: 43px;
        font-size: 49px;
        cursor: pointer;
    }

    .menu-toggle span.line {
        width: 90%;
        height: 6px;
        background-color: #fff;
        position: absolute;
        border-radius: 20px;
        transition: 0.3s cubic-bezier(0.26, 0.1, 0.27, 1.55);
    }    

    .menu-toggle span.line.top {
        top: 19%;
    }

    .menu-toggle span.line.middle {
        top: 49%;
    }

    .menu-toggle span.line.bottom {
        top: 78%;
    }

    .menu-toggle.close .top {
        transform: rotate(45deg);
        top: 35% !important;
    }
    .menu-toggle.close .bottom,
    .menu-toggle.close .middle {
        transform: rotate(-45deg);
        top: 35% !important;
    }

    

    /* .menu-toggle span {
        background-color: #fff;
        border-radius: 4px;
        height: 4px;
        width: 25px;
        margin: 5px 0;
        display: block;
    } */
    .dash_menu {
        margin: 25px 15px 15px 15px;
        display: none;
    }

    .dashboard_left_side {
        min-height: 85px;
    }

    .masthead_icons ul {
        text-align: left;
    }

    .total_students,
    .total_reveneue {
        margin-bottom: 10px;
    }

    .qth {
        margin-bottom: 10px;
    }

    .qth h6 {
        display: none;
    }

    .qth h4 {
        font-size: 14px;
    }

    .new_enrollment ul li {
        margin: 0;
    }

    .new_enrollment ul li:first-child h6 {
        font-size: 12px;
        font-weight: bold;
    }

    a.add-enrollment {
        display: inline-block;
    }

    .total_amount_thumbs {
        margin-top: 10px;
    }

    .new_enrollment ul li:last-child {
        width: 57%;
    }
}