/* History Result Details */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

/* Speed Score */
.score_container {
	display: block;
	position: relative;
	width: 100%;
	/*height: 300px;*/
	height: auto;
}

.score_content {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 20px;
	width: 100%;
}

.score_item {
	position: relative;
	display: block;
	width: 100%;
	height: 220px;
	/*min-width: 50%;*/
	background: transparent;
	padding: 20px 20px;
	text-decoration: none;
}

.score_item.blue {
	background: rgba(23, 146, 223, 0.06) !important;
	color: #000;
	border-radius: 24px;
}

.score_item.green {
	background: rgba(81, 163, 81, 0.06) !important;
	color: #000;
	border-radius: 24px;
}

.score_item_icon {
	position: absolute;
	display: block;
	left: 0px;
	top: 0;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	text-align: center;
	-webkit-box-shadow: 0px 30px 15px -10px rgb(51 51 51 / 25%);
	-moz-box-shadow: 0px 30px 15px -10px rgba(51,51,51,0.25);
    box-shadow: 0px 15px 30px -10px rgb(51 51 51 / 25%);
	z-index: 100;
}

.score_item_icon img {
	width: 80%;
	height: auto;
	margin-top: 10%;
}

.material-icons.score_icon {
	font-size: 28px !important;
	color: inherit;
	margin: 8px 0 0 8px;
}

.score_item_icon.blue {
	/*background: rgba(23, 146, 223, 0.15);*/
	background: #e1eefa;
	color: rgba(23, 146, 223, 1);
}

.score_item_icon.green {
	/*background: rgba(81, 163, 81, 0.15);*/
	background: #e5f1e5;
	color: rgba(81, 163, 81, 1);
}

.score_item_title {
	display: block;
	position: absolute;
	/*width: 100%;*/
	/*left: 15px;*/
	left: 0px;
	bottom: 95px;
	font-family: 'Roboto', 'Helvetica', 'Avenir', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	/*color: #96979d;*/
	color: #31313e;
	z-index: 100;
}

.score_item_value {
	display: block;
	position: absolute;
	/*width: 100%;*/
	/*left: 14px;*/
	left: 0px;
	bottom: 10px;
	font-family: 'Roboto', 'Helvetica', 'Avenir', sans-serif;
	color: #141414;
	font-size: 80px;
	font-weight: 900;
	line-height: 80px;
	letter-spacing: -0.02em;
	z-index: 100;
}

.score_chart_wrapper {
	position: absolute;
	display: block;
	width: calc(100% + 40px);
	height: auto;
	/*max-height: 300px;*/
	max-height: 220px;
	top: 0;
	/*bottom: 0;*/
	left: -20px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	/*border-radius: 24px;*/
	background: transparent;
	opacity: 0.55;
}

canvas{
	background: transparent;
	/*height: 250px !important;*/
	height: 200px !important;	
}

.share_header {
	position: relative;
}

.share_box {
	position: absolute;
	display: flex;
	width: 300px;
	height: 38px;
	top: -51px;
	right: 0px;
	align-items: center;
	justify-content: flex-end;
}

.share_item {
	flex: 0 0 38px;
	height: 38px;
	/*margin-right: 4px;*/
	text-align: center;
	border-radius: 22px;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center;
	transition: all 150ms;
}

.share_item:hover {
	cursor: pointer;
	background-color: #dce2e8;
	background-position: center;
}

.share_item.email {
	background-image: url(/images/2.0/history_result_email.png);
}

.share_item.email:hover {
	background-image: url(/images/2.0/history_result_email_black.png);
}

.share_item.twitter {
	background-image: url(/images/2.0/history_result_twitter.png);
}

.share_item.twitter:hover {
	background-image: url(/images/2.0/history_result_twitter_black.png);
}

.share_item.facebook {
	background-image: url(/images/2.0/history_result_facebook.png);
}

.share_item.facebook:hover {
	background-image: url(/images/2.0/history_result_facebook_black.png);
}

.share_item.link {
	background-image: url(/images/2.0/history_result_link.png);
}

.share_item.link:hover {
	background-image: url(/images/2.0/history_result_link_black.png);
}

.share_item.more {
	background-image: url(/images/2.0/history_result_more.png);
}

.share_item.more:hover {
	background-image: url(/images/2.0/history_result_more_black.png);
}

.share_item.share {
	display: none;
	background-image: url(/images/2.0/history_result_share.png);
	margin-right: -7px;
}

.share_item.share:hover {
	background-image: url(/images/2.0/history_result_share_black.png);
}


/*Result Details*/
.details_container {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	margin: 45px 0 0 0;
}

.details_box {
	position: relative;
	display: inline-block;
	width: 55%;
	color: rgb(21, 23, 24);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: 0.05em;
	margin: 0 0 14px 0;
}

.details_box.right {
	float: right;
	width: 45%;
}

.details_icon {
	position: absolute;
	/*top: 11px;*/
	top: 8px;
/*	left: 8px;*/
	left: 0px;
	/*width: 16px;*/
	/*height: 16px;*/
	/*border-radius: 8px;*/
	width: 28px;
	height: 28px;
	border-radius: 14px;
	background: #dde2e7;
	color: #8a98a4;
	margin: auto auto;
	text-align: center;
	line-height: 28px;
	transition: all 150ms;
}

/*.details_box:hover .details_icon {
	background: #000;
	color: #fff;
}*/


.details_icon.gray {
	background: #dde2e7;
	/*color: #8a98a4;*/
	color: #333;
}

.details_icon.blue {
	background: rgba(23, 146, 223, 0.25);
	color: #1792df;
}

.details_icon.green {
	background: rgba(81, 163, 81, 0.25);
	color: #65a15a;
}

.details_icon.orange {
	background: rgba(228, 136, 33, 0.25);
    color: rgba(228, 136, 33, 1);
}

.details_icon.red {
	background: rgba(252, 64, 53, 0.25);
	color: #fc4035;
}

.details_icon img {
	width: 20px;
	height: 20px;
	margin: 4px 0 0 0;
}

.material-icons.details_result_icon {
	font-size: 20px !important;
	color: inherit;
	/*margin: 8px 0 0 8px;*/
	margin: -5px 0 0 1px;
}

.details_title {
	display: block;
/*	margin: 0 0 0px 46px;*/
	margin: 0 0 0px 38px;
	padding: 5px 0 0 0;
	font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.details_content {
	overflow: hidden;
/*	margin: 0 0 0 46px;*/
	margin: 0 0 0px 38px;
	font-weight: 600;
	/*word-break: break-all;*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 20px;
}

.details_message {
	display: block;
	font-size: 16px;
	margin: 40px 0 0 0;
	text-align: center;
	font-weight: 300;
	letter-spacing: 0.03em;
}

.details_message a {
	font-weight: 400;
	text-decoration: underline;
}

/* Modal */
.action_modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.50);
	text-align: left;
	opacity: 0;
	z-index: 3000;
}

.action_modal_close {
	display: block;
	position: absolute;
	width: 44px;
	height: 44px;
	top: 6px;
	right: 6px;
	text-align: center;
	font-size: 36px;
	font-weight: 600;
	line-height: 44px;
	transition: all 200ms ease-out;
}

.action_modal_close:hover {
	cursor: pointer;
	color: #fc4035;
	transform: rotate(180deg);
}

.action_modal_content {
	position: absolute;
	width: 90%;
	max-width: 600px;
	height: auto;
	top: 60%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: #fff;
	padding: 54px 24px 24px 24px;
	border-radius: 12px;
	opacity: 0;
	box-shadow: 0px 15px 15px -10px rgb(51 51 51 / 50%);
	-webkit-box-shadow: 0px 15px 15px -10px rgb(51 51 51 / 50%);
	-moz-box-shadow: 0px 15px 15px -10px rgba(51,51,51,0.50);
	box-shadow: 0px 15px 15px -10px rgb(51 51 51 / 50%);
	z-index: 100;
}

.action_modal_touch_close {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0);
    z-index: 100;
}

.action_modal_content img {
    width: 100%;
    height: auto;
    max-height: 157px;
    margin: 0 0 14px 0;
    border-radius: 12px;
}

.action_modal_label {
	font-size: 16px;
	letter-spacing: 0.02em;
}

/* Share Menu */
.share_menu_container {
	position: absolute !important;
	width: 200px;
	height: 200px;
	top: 0 !important;
	right: -4px !important;
	left: auto !important;
}

.share_menu_arrow {
    top: -12px;
    right: 1px;
}

.share_menu {
    top: 0;
    right: -10px;
}


/* Responsive Stuff */
@media (max-height: 760px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 1024px) {

}

@media (max-width: 900px) {

}

@media (max-width: 750px) {

}

@media (max-width: 640px) {

	.share_item.share {
		display: block;
	}

	.share_item.email {
		display: none;
	}


	.share_item.twitter {
		display: none;
	}


	.share_item.facebook {
		display: none;
	}

	.share_item.link {
		display: none;
	}


	.share_item.more {
		display: none;
	}

	.details_box {
		width: 100%;
		margin: 0 0 14px 0;
	}

	.details_box.right {
		float: left;
		width: 100%;
	}

	.action_modal_content {
		width: 94%;
		padding: 54px 15px 10px 15px;
	}

	.action_modal_close {
		top: 6px;
		right: 2px;
	}


	.score_item {
		height: 180px;
	}

	.score_item_title {
		left: 0px;
		bottom: 75px;
		font-size: 18px;
		line-height: 18px;
	}

	.score_item_value {
		left: -1px;
		bottom: 10px;
		font-size: 60px;
		line-height: 60px;
		letter-spacing: -0.02em;
	}


	.score_chart_wrapper{
		max-height: 180px;
	}

	canvas{
		height: 160px !important;	
	}

	.material-icons.details_result_icon {
		font-size: 20px !important;
		margin: -4px 0 0 0px;
	}

	.details_icon {
		left: 0px;
	}

	.details_title {
		margin: 0 0 0px 38px;
	}

	.details_content {
		margin: 0 0 0 38px;
	}


}

@media (max-width: 400px) {

}

@media (max-width: 360px) {

}



/* Dark Mode */
@media (prefers-color-scheme: dark) {
	.score_item_title {
		color: #a0a2a4;
	}

	.score_item_value {
		color: #ebecf1;
	}

	.details_title {
		color: #a0a2a4;
	}

	.details_content {
		color: #ebecf1;
	}

	.score_item_icon.blue {
		background: rgba(225, 238, 250, 0.15);
	}

	.score_item_icon.green {
		background: rgba(229, 241, 229, 0.15);
	}

	.details_icon.gray {
		background: rgba(225, 238, 250, 0.15);
	}	
}