.report{
	display: block;
	width: 100%;
}
.report-col{
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	padding: 0;
}

.report_content{
	width: 100%;
	border-radius: 12px;
    box-shadow: 2px 2px 2px rgba(0.15, 0.15, 0.15, 0.01);
    padding: 5%;
    box-sizing: border-box;
    margin: 20px auto;
    color: black;
    background-color: white;
    position: relative;
} 
.refresh{
	width: 16px;
	object-fit: contain;
	float: right;
	cursor: pointer;
}
.report-txt-icn{
	display: block;
	width: 100%;
}
.rti-left{
	width: 25%;
}
.rti-right{
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}
.report_icon{
	width: 100%;
	object-fit: contain;
	display: block;
	border-radius: 14px;
}
.rep_icon{
	width: 22px;
	object-fit: contain;
}

.report_content h1, .report_content h2{
	font-size: 16px;
	text-align: left;
	font-weight: 500;
	margin: 5px 0;
}
.report_content p{
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	margin: 5px 0;
	color: rgb(80,80,80);
}
.mood-g{
	width: 90%;
	aspect-ratio: 1 / 0.8; 
}
.thay-g{
	width: 90%;
	aspect-ratio: 1 / 1;
}
.sqr-g{
	width: 90%;
	aspect-ratio: 1 / 1;
}

.repbtns{
	display: flex;
	gap: 10px;
}
.rec-btn{
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 50px;
    border: 2px solid black;
    background: transparent;
    box-shadow: 0 2px 5px rgba(0.5, 0.5, 0.5, 0.1);
    transition: transform 0.1s ease-in-out;
    margin: 10px 0 4px 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    color: black;
}
.rec-btn:hover{
	background: #24824D;
}
.rec-btn img{
    margin: 0;
    padding: 0;
    margin-right: 8px;
    height: 12px;
    width: 12px;
    object-fit: contain;
}
.hide-rep-bth{
	display: none;
}
.rec-btn-grn{
	background-color: #95E3B7;
}


/*desktop */
@media screen and (min-width: 768px) {
	.report{
		width: 90%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	.report-txt-icn{
		display: flex;
		width: 100%;
	}
	.rti-left{
		width: 35%;
	}
	.rti-right{
		width: 65%;
		padding: 20px;
		box-sizing: border-box;
	}
	.report_icon{
		width: 100%;
		object-fit: contain;
		display: block;
	}	
	.report_content h1, .report_content h2{
	 font-size: 20px;
	}
	.report_content p{
		font-size: 14px;
	}
	.mood-g{
		width: 75%;
		height: 30vh;
	}
	.thay-g{
		width: 60vh;
		height: 40vh;
	}
	.sqr-g{
		width: 30vw;
		height: 30vw;
	}
	.report-graphC{
		display: none;
	}

}