body .#{$alias} {
	.#{$alias}-sub-panel-content {
		padding: px(15) px(10);
	}

	##{$alias}-pagespeed-detail {
		display: none;
		position: absolute;
		top: 0;
		left: -20px;
		width: 100%;
		background: #fff;
		background: rgba(0,0,0, 0.9);
		z-index: 999;
		padding-left: 20px;
		box-sizing: content-box;

		#psp-pagespeed-ajaxresponse {
			position: absolute;
			top: 5%;
		    left: 50%;
		    margin-left: -35%;
			width: 70%;
		}

		.#{$alias}-pagespeed-header {
			background: #ffffff;
			height: 65px;
			width: 100%;
			border-bottom: px(1) solid #e1e1e1;
			.#{$alias}-close-page-detail {
				position: absolute;
				right: px(16);
				top: px(13);
				font-size: 32px;
				color: #e32a24;
				&:hover{
					color: $orange;
				}
			}
			.#{$alias}-tab-item {
				background: #f2f2f2;
				width: px(271);
				height: px(64);
				display: inline-block;
				padding: px(18) px(25) 0;
				opacity: 0.4;
				cursor: pointer;

				&.on {
					background: #fff;
					opacity: 1;
					cursor: default;
					position: relative;
					&:after,
					&:before {
						bottom: -1px;
						left: 50%;
						border: solid transparent;
						content: " ";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
					}

					&:after {
						border-color: rgba(255, 255, 255, 0);
						border-bottom-color: #fff;
						border-width: 12px;
						margin-left: -52px;
					}
					&:before {
						border-color: rgba(225, 225, 225, 0);
						border-bottom-color: #e1e1e1;
						border-width: 13px;
						margin-left: -53px;
					}
				}
				table {
					width: 100%;
					margin-top: px(5);
					.#{$alias}-tab-title {
						font-size: px(18);
						font-family: Arial, Helvetica, sans-serif;
						padding-left: px(5);
						width: px(24);

						i {
							color: #dadada;
							font-size: 24px;
						}
					}
					.#{$alias}-progress {
						margin: px(4) px(70) px(4) px(4);

						.#{$alias}-progress-score {
							width: px(56);
							right: -#{px(62)};
							top: -8px;
							background: transparent;
						}
					}
				}
			}
		}
		.#{$alias}-pagespeed-page-content {
			background: #fff;
			width: 100%;
			height: 100%;
			.#{$alias}-pagespeed-tab {
				width: 100%;
				height: 100%;
				display: table;
				.left,
				.right {
					display: inline-block;
					vertical-align: top;
					padding: 30px;
				}
				.left {
					width: 65%;
					float: right;
				}
				.right {
					width: 35%;
				}
			}
			.desktop-display {
				width: px(345);
				height: px(324);
				position: relative;
				margin: 20px auto;
				img {
					margin-top: 0;
					margin-left: px(18);
					max-height: 228px;
				}
				.php-the-mask {
					width: inherit;
					height: inherit;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					background: url(assets/desktop.png) no-repeat top left;
					background-size: 100%;
				}
			}
			.mobile-display {
				width: px(172);
				height: px(355);
				position: relative;
				margin: 0 auto px(20) auto;
				img {
					margin-top: px(40);
					margin-left: px(14);
					width: px(143);
					position: relative;
					z-index: 10;
				}
				.php-the-mask {
					width: px(207);
					height: inherit;
					position: absolute;
					top: 0;
					left: -#{px(15)};
					z-index: 10;
					background: url(assets/mobile.png) no-repeat top left;
					background-size: 100%;
				}
			}
			.#{$alias}-panel-title {
				margin-right: px(10);

				h1 {
					font-weight: 500;
					font-size: 18px;
					color: #383838;
					line-height: 18px;
					padding: 0 0 25px;
					border-bottom: 1px solid #e5e5e5;
				}
				.#{$alias}-progress {
					width: px(202);
					background: #fff;
					margin: px(4) px(58) px(4) px(4);
					position: absolute;
					top: px(2);
					right: px(10);
				}
			}
			.#{$alias}-identity-box {
				h1 {
					margin: 0 0 px(10) 0;
					font-size: px(16);
				}
				h2 {
					margin: 0 0 px(10) 0;
					font-size: px(12);
				}
			}
			.#{$alias}-statistics-box .#{$alias}-table {
				border-spacing: 0;
				border-collapse: collapse;
				td:nth-child(2) {
					font-weight: bold;
				}
			}

			##{$alias}-pagespeed-ajaxresponse {
				.#{$alias}-panel-header {
					border-bottom: 1px solid #f2f2f2;
					.#{$alias}-panel-title {
						display: inline-block;
						font-weight: 500;
						font-size: 1.8rem;
						color: #383838;
						line-height: 1.8rem;
						margin: px(14) -#{px(1)};
						margin-bottom: px(30);
						margin-left: px(25);
					}
				}
			}

			.#{$alias}-sub-panel-content {
				padding-left: 0px;
				padding-right: px(3); 
			}

			.#{$alias}-what-to-do {
				.#{$alias}-criteria {
					text-indent: 0 !important;
					&:before {
						content: "\e906";
						font-family: 'seo-checks';
						font-size: px(10);
						margin: 0 px(7);
					}
				}
				i {
					font-style: normal;
					&.psp-status-icon {
						text-align: center;
						vertical-align: middle;
						color: $white;
						&:before {
							padding: 5px 0 0;
							text-align: center;
							vertical-align: middle;
							border-radius: 50%;
							width: 20px;
							height: 20px;
							display: block;
						}
					}

					&.is_success {
						&:before {
							content: "\e902";
							font-family: 'seo-checks';
							font-size: px(10);
							background: $success;
						}
					}
					&.is_error {
						&:before {
							content: "\e908";
							font-family: 'seo-checks';
							font-size: px(11);
							background: $danger;
						}
					}
					&.is_warning {
						&:before {
							content: "\f12a";
							font-family: 'FontAwesome';
							font-size: px(10);
							background: $warning;
						}
					}
				}
				a {
					font-weight: $normal !important;
					font-family: $primary-font !important;
					font-size: px(14);
					margin: 3px 0 0 10px;
				}
			}

			.#{$alias}-pagespeed-tab {
				.right {
					##{$alias}-desktop-graph,
					##{$alias}-mobile-graph {
						.legend {
							table {
								font-size: px(13) !important;
								
								tr {
									padding: px(0);
									td {
										padding: px(5) 0;
									}
									td.legendColorBox {
										padding-right: px(10);
										&>div {
											border: none !important;
											padding: 0 px(5) !important;
											&>div {
												width: px(25) !important;
											}
										}
									}
								}
							}
						}
					}
					.#{$alias}-grid_4  {
						&:nth-child(2) {
							.#{$alias}-panel {
									.#{$alias}-panel-header {
										border-bottom: none !important;
										.#{$alias}-panel-title {
											margin-top: px(22) !important;
										}
										&.psp-score-box {
											background: #fafafa;
											width: 163px;
											height: 98px;
											text-align: center;
											padding: 10px 15px;
											margin: 0 auto 50px;
											.psp-score-text {
												font-size: 24px;
												font-weight: $medium;
												&.size_80_100 {
													color: #2ecc71;
												}
												&.size_60_80 {
													color: #f1c40f;
												}
												&.size_40_60 {
													color: #f1c40f;
												}
												&.size_20_40 {
													color: #e67e22;
												}
												&.size_0_20 {
													color: #e74c3c;
												}
											}
											.psp-progress-score {
												color: #989898;
												font-size: 18px;
												margin-top: 19px;
											}
										}
									}
								}
							}
						}
					.#{$alias}-progress {
						position: relative !important;
						margin-top: px(15) !important;
						margin-bottom: px(6) !important;
						.#{$alias}-progress-score {
							width: 6.8rem;
							right: -9.4rem;
						}
					}
					.#{$alias}-table {
						tr {
							td {
								border: none;
								color: #4d4d4d;
								font-size: 14px;
								font-weight: $medium;
								padding: 15px 14px;
								&:nth-child(2) {
									color: #828282;
									font-weight: $normal;
									padding: 15px 14px;
								}
							}
							&:nth-child(even){
								background: #fafafa;
							}
						}
					}
				}
				.#{$alias}-report-rules {
					.#{$alias}-what-to-do {
						width: 100%;
						margin-bottom: px(14);
						.#{$alias}-desc-summary {
							color: #7f8c8d;
						}
						ul {
							margin-left: 49px;
							color: #9b9b9b;
							ul {
								margin: 0 0 0 19px;
							}
							p {
							font-size: 14px;
							font-weight: $medium;
							}
						}
						a.#{$alias}-criteria {
							background: #ffffff;
							color: #4d4d4d;
							display: block;
							font-size: 14px;
							font-weight: $medium !important;
							padding: px(5) 0;
							text-decoration: none;
							text-indent: px(20);
							width: 100%;
							&:hover {
								color: $orange;
							}
							&.open:before {
								content: '\e90d';
							}
						}
						.can-do li {
							/* line-height: 12px; */
							list-style-type: disc;
							margin-top: 0.4em;
							word-wrap: break-word;
							max-width: 100%;
						}
					}
					.#{$alias}-desc-complete {
						width: 100%;
						display: none;
						margin: 0;
						position: relative;
					}
					td.#{$alias}-icon-status {
						width: px(16);
						padding: 0 px(5);
						vertical-align: top;
					}
					td {
						.can-do {
							a.psp-button  {
								color:#fff;
							}
							a {
								color: red;
								font-size: 13px;
								font-weight: $medium;
								margin: 10px 0 0 0px;
								text-transform: uppercase;
							}
						}
					}
					.#{$alias}-table tr td.#{$alias}-icon-status {
						padding: 0 px(5);
						width: px(16);
					}
					
				}
				.#{$alias}-statistics-box .#{$alias}-sub-panel-content {
					padding: 0;
				}
				i.#{$alias}-status-icon {
					display: block;
					height: px(18);
					margin: px(7) auto 0;
					width: px(18);
					&.is_success {
						background-position: 0 0;
					}
					&.is_error {
						background-position: -#{px(18)} 0;
					}
					&.is_warning {
						background-position: -#{px(36)} 0;
					}
				}
				.#{$alias}-statistics-box {
					table {
						border: none;
						margin-top: px(30);
						td {
							&:nth-child(2) {
								padding-left: px(21);
							}
							&:nth-child(2),
							&:nth-child(3) {
								padding-top: px(7);
							}
							i.#{$alias}-status-icon {
								display: block;
								height: px(18);
								margin: px(7) auto;
								margin-bottom: 0;
								width: px(18);
								padding: 0.4rem;
								text-align: center;
								vertical-align: middle;
								color: $white;
								font-size: px(11);
								border-radius: 0.5rem;
								&.is_success {
									//background-position: 0 0;
									background: $success;
								}
								&.is_error {
									//background-position: -#{px(18)} 0;
									background: $danger;
									&:before {
										margin-top: -#{px(3)};
									}
								}
								&.is_warning {
									background: $warning;
									//background-position: -#{px(36)} 0;
								}
							}
						}
					}
				}
			}
		}
	}

	.#{$alias}-pagespeed {
		.#{$alias}-progress {
			border: 1px solid #f2f2f2;
			margin: px(4);
			margin-right: px(50);
			padding: px(2);
			position: relative;
			width: 70%;
		}
		.#{$alias}-progress-bar {
			position: relative;
			height: px(3);
			-webkit-transition: 0.4s linear;
			-moz-transition: 0.4s linear;
			-o-transition: 0.4s linear;
			transition: 0.4s linear;
			-webkit-transition-property: width, background-color;
			-moz-transition-property: width, background-color;
			-o-transition-property: width, background-color;
			transition-property: width, background-color;
			div {
				display: inline-block;
			}
			&.size_80_100 {
				background-color: #2ecc71;
			}
			&.size_60_80 {
				background-color: #f1c40f;
			}
			&.size_40_60 {
				background-color: #f1c40f;
			}
			&.size_20_40 {
				background-color: #e67e22;
			}
			&.size_0_20 {
				background-color: #e74c3c;
			}
		}
		.#{$alias}-progress-score {
			position: absolute;
			background: #fff;
			text-align: center;
			line-height: 21px;
			color: #2d2d2d;
			font-weight: bold;
			right: -36px;
			top: -7px;
			z-index: 99;
		}
		table {
			display: table;
		}
		
		##{$alias}-list-table-posts {
			background: #ffffff; 
			border-radius: 5px;
			padding: px(1);
			th {
				background: #ffffff;
				color: #ababab;
				font-family: $primary-font;
				font-size: px(14);
				font-weight: $normal;
				line-height: px(26.5);
				padding-bottom: px(18);
				padding-left: px(22);
				padding-top: px(18);
				text-transform: uppercase;
			}
			td {
				color: #838383;

				&:nth-child(3) {
					a {
						color: #838383;
						font-size: px(14);
						font-weight: $normal;
						line-height: px(26);
						&:hover {
							color: $orange;
						}
					}
				}
				&:nth-child(4),
				&:nth-child(5) {
					background: transparent !important;
					i {
						font-style: normal !important;
					}
				}
				&:nth-child(6),
				&:nth-child(7) {
					input[type="button"] {
						cursor: pointer;
						font-size: px(13);
						font-weight: $medium;
						padding: px(8) px(38) px(7) !important;
						text-transform: none;
					}
				}
			}
			##{$alias}-do_speed_test_mass {
				margin-top: px(8);
				margin-left: -#{px(6)};
				padding: px(12) px(20) !important;
				padding-bottom: px(28) !important;
				border-radius: px(3) !important;
				cursor: pointer;
			}
			.#{$alias}-list-table-right-col {
				width: auto !important;
				float: right !important;
				margin-top: -#{px(9)};
			}
		}

		.#{$alias}-list-table-left-col {
			display: block !important;

			.#{$alias}-filter-post_type {
				border: 1px solid #f1f1f1;
				border-radius: px(3);
				color: #979797;
				font-family: $primary-font;
				font-size: px(14);
				font-weight: $normal; 
				height: auto;
				margin-right: px(20) !important;
				padding: px(6) px(0) px(4) px(5);
				width: px(104) !important;
			}
			.#{$alias}-post_status-list {
				font-family: $primary-font;
				font-size: px(14);
				font-weight: $normal;
				margin-top: px(6);
				a {
					color: $black;
					&[href="#post_status=publish"] {
						color: #e41e26;
					}
				}
				span {
					color: $gray;
				}
			}
		}

		.displaying-num {
			line-height: px(31);
			color: $black;
			font-weight: px(14);
		}
		
		.#{$alias}-list-table-right-col {
			.#{$alias}-box-show-per-pages {
				left: px(89);
				select {
					width: px(57) !important;
				}
			}
			.#{$alias}-list-table-search-box {
				float: right;
				clear: left;
				width: auto !important;
				##{$alias}-search-btn {
					font-family: $primary-font;
					font-size: px(11);
					color: $white;
					font-weight: $bold;
					background: #969696;
					border: none;
					padding: px(13) px(20) px(27) px(20);
					line-height: px(20);
					letter-spacing: 0.06em;
					text-transform: uppercase;
					margin-left: 0;
					border-radius: px(3);
					border-bottom-left-radius: 0;
					border-top-left-radius: 0;
					&:hover {
						background: darken(#969696, 25%);
					}
				}
				input {
					margin-top: 0 !important;
				}
				.#{$alias}-search-btn {
					background: none;
					border: none;
					padding-top: px(6);
					vertical-align: top;
					span {
						color: #ffa800;
						font-size: px(22);
					}
					&:hover span {
						color: darken(#ffa800, 25%);
					}
				}
			}
		}
	}

	/*
	.panel .panel-body {
		background: #fafafa;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}
	.panel.psp-section-header .panel-body {
		background: inherit;
	}
	*/
	.checkbox {
		margin-bottom: px(6);
		margin-top: px(3);
	}
}

.#{$alias}-pagespeed .#{$alias}-table tr th .#{$alias}-custom-checkbox {
    margin: 5px 0 0 0px !important;
}