*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Lato", sans-serif;
}

/* for all images */
img{
	width: 100%;
	object-fit: cover;
}

/* main grid container for dashboard */
.grid-container{
	display: grid;
	grid-template-areas:
	"sidebar header"
	"sidebar main";
	grid-template-columns: 200px 1fr;    
	grid-template-rows: 80px 1fr;
	height: 100vh;
	background-color: black;
	color: white;
	transition: all 0.2s ease-in;
	position: relative;
}

/* whole class for small menu(menu with icons only) */
.grid-container.whole{
	grid-template-columns: 55px 1fr;    
}

.grid-container.whole .side-bar{
	width: 55px;
    padding-top: 0;
}

.grid-container.whole .side-bar li{
	padding-left: 10px;
}

.grid-container.whole .side-bar li span{
	display: none;
}

.whole .profile img{
	margin: 0;
	width: 30px;
	height: 30px;
	margin-left: 10px;
}

.whole .profile .name,
.whole .profile .abt{
	display: none;
}

.whole .profile{
	padding-top: 70px;
	align-self: start;
}

.grid-container.whole .header{
	padding-left: 55px;
}

/* side bar */
.side-bar{
	grid-area: sidebar;    
	display: grid;
    padding-top: 50px;
	grid-template-rows: 200px 1fr;
	position: relative;
	background: black;
	overflow: hidden;    
	position: fixed;
	width: 200px;
	bottom: 0;
	top: 0;
	left: 0;
	overflow-y: auto;
	transition: all 0.2s ease-in;
}

/* side bar toggle icon */
.grid-container .fa-bars{
	position: fixed;
	top: 35px;
	left: 185px;
	font-size: 20px;
	cursor: pointer;
	z-index: 10;
	transition: all 0.2s ease-in;
}

.fa-bars.right{
	left: 15px;
}

/* header */
.header{
	background-color: rgb(0, 0, 0);
	grid-area: header;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 20px 45px;
	align-items: center;
}

/* search bar of header */
.header .search-bar{
	height: fit-content;
	padding: 10px;
	background: #2c2c2c;
	border-radius: 20px;
	max-width: 75%;
	width: 265px;
	transition: all 0.2s ease-in;
	display: inline-flex;
}

.search-bar.focus{
	width: 100%;
}

.header input{
	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
	min-width: 200px;
	font-size: 16px;
	color: white;
	padding: 0px 10px;
	width: 100%;
}

/* header right side options */
.header .opts{
	display: flex;
	gap: 20px;
}

/* option icons */
.opts i{
	background: #2c2c2c;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	padding: 13px;
	font-size: 20px;
	cursor: pointer;
    box-shadow: 0px 0px 5px #000000;
}

/* for popup boxes on click */
.notification,
.inbox,
.setting{
	position: relative;
}

.box.show{
	display: block;
}

.setting .box{
	width: 133px;
	padding: 10px;
	padding-top: 0px;
	border-radius: 10px;
}

.box{
    position: absolute; 
    top: 48px;
    right: 0;
    background: black;
    border-radius: 15px;
    padding: 20px;
    width: 300px;
    border: 1px solid #282828;
    display: none;
    z-index: 10;
}

.box::after{
    display: block;
    width: 15px;
    height: 13px;
    content: "";
    background-color: black;
    position: absolute;
    top: -7px;
    right: 18px;
    transform: rotate(45deg);
    border-top: 1px solid #282828;
    border-left: 1px solid #282828;
}

/* count batch (no of message or notification) */
.batch{
    font-size: 12px;
    position: absolute;
    top: -2px;
    right: -4px;
    background: red;
    width: 17px;
    height: 18px;
    text-align: center;
    border-radius: 50%;
}

/* new messages batch */
.box .new{
    font-size: 11px;
    color: white;
    background: red;
    width: 16px;
    display: inline-block;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    margin-left: 10px;
}

/* logout option */
.logout{
    border-top: 1px solid grey;
    padding-top: 5px;
    margin-top: 21px;
}

/* each message or notification list */
.lst{
    padding-top: 20px;
    display: flex;
    gap: 10px;
}

.lst img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #282828;
}

.lst p{
    font-size: 14px;
    color: #dfdfdf;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.lst .time{
    font-size: 12px;
    color: grey;
}

.lst h4{
    font-size: 16px;
}

.lst a{
    color: white;
    text-decoration: none;
    cursor: pointer;
}

a.lst{
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

/* main section of page */
.main-sec{
    background-color: black;
    grid-area: main;
    padding: 20px;
    display: none;
}

/* show selected main section from the menu */
.main-sec.show{
    display: block;
}

.main-sec .content{
    background-color: #2c2c2c;
    min-height: 100%;
    width: 100%;
    border-radius: 20px;
    padding: 20px;
}

/* statistics */
.main-sec .stats{
    margin-top: 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* stat things */
.stat{
    padding-top: 10px;
}

/* amount in stat card */
.stat .amt{
    display: block;
    font-size: 24px;
    font-weight: 600;
    padding-bottom: 6px;
}

/* week in stat card */
.stat .week{
    font-size: 14px;
    color: darkgrey;
}

/* statistics card */
.main-sec .card{
    background: #000000;
    display: inline-block;
    border-radius: 15px;
    padding: 30px 20px 20px;
    box-shadow: 5px 5px 10px #000, 5px 5px 20px #1c1c19;
    width: calc(25% - 20px);
    background-image: linear-gradient(to top right, black , black, #424201);
}

.card .icons{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card .icon{    
    width: 42px;
    height: 42px;
    background: #ffff3b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 24px;
}

/* more icon */
.more{
    position: relative;
}

.more .opt{
    position: absolute;
    background: black;
    border-radius: 4px;
    padding: 10px;
    border: 1px solid #282828;
    top: 100%;
    right: -20px;
    box-shadow: 0px 0px 10px #141212;
    color: white;
    font-size: 13px;
    display: none;
}

.more .opt.show{
    display: block;
}

.more i{
    writing-mode: tb;
    font-size: 20px;
    margin-right: -10px;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
}

/* side bar list type */
.side-bar ul{
    list-style-type: none;
}

.side-bar ul li{
    padding: 15px 5px;
    font-size: 18px;
}

.side-bar ul li a{
    color: white;
}

.side-bar ul li i{
    font-size: 22px;
}

.side-bar ul li.active{
    border-left: 2px solid cyan;
}

.side-bar li a{
    display: flex;
    text-decoration: none;
    cursor: pointer;
}

.side-bar ul li{
    min-width: 135px;
    padding-left: 20px;
    width: fit-content;
    font-size: 18px;
}

.side-bar ul li i{
    padding-right: 10px;
    color: cyan;
}

/* when side bar is small (only with icons) */
.whole ul li i{
    color: white !important;
    padding: 8px 10px;
}

.whole ul li{
    border-left: none !important;
    padding: 10px 0px;
}

.whole ul li.active i{
    color: #1c1c1c !important;
    background-color: cyan;
    border-radius: 10px;
}

/* profile image in side bar */
.profile img{
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50px;
    margin: auto;
    border: 2px solid white;
    padding: 2px;
    transition: all 0.01s ease-in;
}

.profile span{
    display: block;
    text-align: center;
}

/* profile name */
.profile .name{
    font-size: 22px;
    padding: 10px 0px 5px;
    text-transform: capitalize;
}

/* profile about or designation */
.profile .abt{
    font-size: 18px;
    text-transform: capitalize;
    color: #9b9b9b;
    font-size: 16px;
}

.profile{
    align-self: center;
}

/* table */
.table{
    width: 100%;
    background-color: black;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 5px 5px 10px #000, 5px 5px 20px #1c1c19;
    height: fit-content;
    overflow-x: auto;
}

table#salesTable{
    min-width: 300px;
}

table{
    min-width: 350px;
    margin-top: 10px;
    width: 100%;
    border-collapse:collapse 
}

/* table heading */
.table .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table h4{
    font-size: 18px;
    letter-spacing: 1px;
}

/* table head */
thead{
    margin-bottom: 20px;
}

/* table row */
tr{
    transition: transform 0.1s ease-in;
}

/* table cell */
th, td{
    width: 80px;
    text-align: left;
    padding: 5px;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #898989;
}

th{
    padding-bottom: 30px;    
    font-weight: 400;
    color: #cfcfcf;
    cursor: pointer;
    padding-left: 0;
}

/* table body row on hover */
tbody tr:hover{
    background-color: cyan;
    color: white;
    transform: scale(1.1);
}
tbody tr:hover td:nth-child(1){
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
tbody tr:hover td:nth-last-child(1){
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
tbody tr:hover td{
    color: black;
}

th i{
    font-size: 12px !important;
    color: #c1c1c1;
    vertical-align: middle;
}

/* main section of dashboard */
.c2{
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin-top: 30px;
    gap: 30px;
    grid-template-areas:
        "chart sale"
        "act barChart";
}

/* activity table cell*/
#actTable td,
#actTable th{
    color: white;
    font-weight: 400;
    min-width: 80px;
}

#actTable td{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* activity table row on hover*/
#actTable tr:hover{
    background-color: initial;
    transform: scale(1);
}

.table-act{
    margin-top: 30px;
}

/* activity table */
.table-act{
    grid-area: act;
}
/* sale table */
.table.side{
    grid-area: sale;
}

/* charts */
.chart h2,
.point-chart h2{
    margin-bottom: 20px;
}

/* header of charts */
.head{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

/* filter for charts */
#marketFilter, 
#pointFilter{
    width: 100px;
    height: fit-content;
    padding: 5px 10px;
    border-radius: 6px;
    background-color: transparent;
    color: white;
    outline: none;
    box-shadow: none;
    border: 2px solid #404040;
    cursor: pointer;
}

#pointFilter option,
#marketFilter option{
    color: black;
    background-color: white;
}

.point-chart{
	grid-area: barChart;
}

.chart{
    grid-area: chart;
}

/* Game Dashboard */
#game .content{
    background: black;
    display: grid;
    gap: 30px;
    grid-template-areas:
        "head head head"
        "game game game"
        "point fav fav";
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 0;
}

/* for main banner */
.img-area{
    padding: 10px;
    grid-area: head;
    position: relative;
    padding-top: 26px;
}

.img-area .img{
    position: absolute;
    top: 0;
    width: 430px;
    z-index: 10;
    right: 40px;
}

/* game banner */
.game-header{
    background: #2c2c2c;
    border-radius: 40px;
    padding: 80px 20px 40px 40px;
    box-shadow: 5px 5px 10px #000, 5px 5px 20px #1c1c19;
    background-image: linear-gradient(25deg, #2c2c2c, #2c2c2c,#2c2c2c, #420000, #2c2c2c);
}

.dt{
    max-width: 50%;
}

/* new tag */
#game .new{
    background-image: linear-gradient(45deg, #c62828, #eb4545);
    padding: 4px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 14px;
    display: inline-block;
    font-family: "Lato", sans-serif;
}

/* heading */
.game-header h2{
    font-size: 44px;
    font-family: "Lato", sans-serif;
    margin-bottom: 20px;
}

/* points */
.game-header .points{
    background-color: #4a4848;
    display: inline-block;
    border-radius: 20px;
    padding: 10px 10px 10px 25px;
}

.points span{
    display: inline-block;
    font-family: "Lato", sans-serif;
    padding-right: 45px;
}

/* button with points */
.points button{
    background-color: cyan;
    border-radius: 15px;
    padding: 15px 40px;
    font-weight: 600;
    font-family: "Lato", sans-serif;
    outline: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
}

/* most played games */
.game-container > div{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    gap: 20px;
    margin-bottom: 20px;
    transition: all 0.5s ease;
}

.game-container{
    overflow: hidden;
}

.most-played{
    grid-area: game;
}

.most-played .game{
    display: flex;
    width: 32%;
    flex-direction: column;
    min-width: 32%;
}

.most-played .game img{
    width: 100%;
    height: 150px;
    border-radius: 40px;
}

.most-played .game .name{
    color: #bbb7b7;
    font-family: "Lato", sans-serif;
    margin-top: 10px;
    font-size: 16px;
}

/* carousel indicator for most played games */
.indicator span{
    cursor: pointer;
}

.indicator span span{
    width: 40px;
    height: 4px;
    background: grey;
    display: inline-block;
    /* padding: 10px; */
    /* margin-right: 10px; */
    cursor: pointer;
}

.indicator .disable span{
    background-color: #4a4a4a;
}

/* game duration */
.game .dur{
    color: grey;
    font-size: 12px;
    margin-top: 5px;
}

/* points card */
.most-played + .points{
    box-shadow: 5px 5px 10px #000, 5px 5px 20px #1c1c19;
    grid-area: point;
    background-color: #2c2c2c;
    border-radius: 44px;
    padding: 30px;
}

.most-played + .points span{
    font-size: 70px;
    padding-top: 30px;
    transform: skewY(-12deg);
    background-color: #0c0c0c;
    padding: 10px;
    margin-top: 50px;
    border-radius: 20px;
    display: flex;
    box-shadow: 2px 2px 5px #000000;
}

.most-played + .points i{
    color: cyan;
    margin-top: -28px;
    display: block;
}

/* favourite games */
.favs{
    grid-area: fav;
    background-color: #2c2c2c;
    border-radius: 44px;
    padding: 30px;
    box-shadow: 5px 5px 10px #000, 5px 5px 20px #1c1c19;
}

.favs .lst div:nth-child(1){
    display: flex;
    gap: 11px;
    width: 30%;
}

.favs .lst img{
    width: 60px;
    height: 50px;
    border-radius: 20px;
}

.favs .lst .name{
    display: flex;
    flex-direction: column;
}

.lst .name span:nth-child(2){
    font-size: 14px;
    color: #919191;
}

.favs .lst div{
    width: 30%;
}

.favs .date{
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    width: fit-content;
    margin: auto;    
    font-size: 14px;
    color: #919191;
}

.favs .date span:nth-child(1){
    font-weight: bold;
}

.favs .lst div:nth-last-child(1){
    text-align: right;
}

.favs button{
    background: transparent;
    color: #919191;
    border: 1px solid #919191;
    padding: 10px 20px;
    border-radius: 10px;
    margin-left: auto;
    cursor: pointer;
}

.favs button.blueBtn{
    border-color: cyan;
    color: cyan;
}

/* Responsiveness */
@media screen and (max-width: 1190px) {
    .table {
        padding: 20px 10px;
        border-radius: 15px;
    }
    th{
        font-size: 14px;
    }
    .search-bar.focus{
        max-width: 300px;
        width: 300px;
    }
}

@media screen and (max-width: 991px) {
    .table {
        padding: 20px 10px;
        border-radius: 15px;
    }
    th{
        font-size: 14px;
    }
    .c2{
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
        "chart chart"
        "barChart barChart"
        "sale sale"
        "act act";
    }
    .main-sec .card{
        width: calc(50% - 10px);
    }
    #game .content{
        grid-template-areas:"head head head" "game game game" "point point point" "fav fav fav";
        grid-template-columns: 1fr 1fr 1fr;
    }
    .most-played + .points span{
        display: block;
        background: transparent;
        color: cyan;
        box-shadow: none;
        padding-bottom: 20px;
        text-align: center;
        width: fit-content;
        margin: auto;
    }
    .most-played + .points i {
        display: none;
    }
    .img-area .img{
        width: 294px;
        top: 10px;
    }
    .dt{
        max-width: 60%;
    }
    .most-played .game img {
        width: 100%;
        height: 100px;
        border-radius: 20px;
    }
}

@media screen and (max-width: 775px) {
    .main-sec .card{
        width: 100%;
    }
    .opts i {
        width: 25px;
        height: 30px;
        padding: 0px;
        padding-right: 5px;
        font-size: 18px;
        background-color: transparent;
    }
    .batch {
        font-size: 10px;
        top: -2px;
        right: 4px;
        width: 14px;
        height: 13px;
    }
    .header .search-bar{
        width: 200px;
        overflow: hidden;
    }

    .search-bar.focus{
        width: 200px;
    }

    .game-header h2 {
        font-size: 35px;
    }

    .dt{
        max-width: 100%;
        margin-top: 114px;
    }

    .img-area .img{
        margin: auto;
        right: 50px;
        top: 0;
    }
    .most-played + .points span {
        font-size: 83px;
        transform: skewY(-10deg);
    }
    .most-played + .points, .favs{
        border-radius: 20px;
    }
    .favs > div{
        overflow-x: auto;
    }

    .favs .games-list{
        min-width: 350px;
    }
}
@media screen and (max-width: 550px) {
    .header .search-bar{
        width: 100%;
        max-width: 100%;
    }
    .opts{
        width: 100%;
        justify-content: end;
    }
    .grid-container .header{
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        padding: 10px 20px;
    }
    .grid-container{
        grid-template-rows: 100px 1fr;
    }
    h2{
        font-size: 22px;
    }
    .stat .amt {
        font-size: 20px;
        padding-bottom: 2px;
    }
    .stat .week {
        font-size: 12px;
    }
    #marketFilter {
        width: 90px;
        padding: 3px 5px;
        border-radius: 4px;
        font-size: 12px;
    }
    th, td{
        font-size: 14px;
        padding-bottom: 5px;
    }
    .table .head{
        margin-bottom: 10px
    }
    .table-act{
        /* width: 500px; */
        overflow-y: hidden;
        overflow-x: auto;
    }

    #game .name span{
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 50px;
        overflow: hidden;
    }

    .favs button{
        font-size: 12px;
        padding: 5px;
        border-radius: 5px;
    }
    .favs .date {
        font-size: 13px;
    }

    .lst .name span:nth-child(2) {
        font-size: 12px;
    }

    .favs {
        border-radius: 15px;
        padding: 20px;
    }
    .most-played + .points span {
        font-size: 50px;
        transform: skewY(0deg);
    }
    .img-area .img {
        width: 150px;
    }
    .game-header {
        border-radius: 20px;
        padding: 46px 20px 40px 20px;
    }
    .points button {
        border-radius: 10px;
        padding: 10px 20px;
    }
    .main-sec{
        padding-left: 0;
        padding-right: 0;
    }
    .indicator span span {
        width: 20px;
        height: 4px;
    }
    .most-played .head{
        flex-direction: column;
    }
    .indicator{
        text-align: end;
    }
    .grid-container.whole .header {
        padding-left: 20px;
    }
    .dt {
        margin-top: 85px;
    }
    .game-header h2 {
        font-size: 28px;
    }
    .game-header .points {
        border-radius: 12px;
        padding: 10px 10px 10px 13px;
    }
    .most-played .game img {
        width: 100%;
        height: 60px;
    }
    .most-played .game .name {
        font-size: 14px;
    }
    .side-bar ul li i {
        font-size: 14px;
        padding: 5px 8px;
    }
    .whole ul li.active i {
        border-radius: 5px;
    }
    .game-container > div {
        gap: 10px;
    }
    .favs .lst img {
        width: 40px;
        height: 35px;
    }
    .main-sec .card {
        border-radius: 10px;
    }
    .main-sec .content {
        border-radius: 15px;
        box-shadow: 2px 2px 5px #000, 5px 5px 20px #1c1c19;
    }
}