body .#{$alias} {
	.#{$alias}-sub-panel-content {
		padding: px(15) px(10);
	}
	.#{$alias}-pagespeed {
		.#{$alias}-progress {
		    position: relative;
		    padding: px(2);
		    border: 1px solid #d7d9df;
		    margin: px(4);
		    background: #ecf0f1;
		    margin-right: px(50);
		}
		.#{$alias}-progress-bar {
		    position: relative;
		    height: 16px;
		    -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 {
			border: 1px solid #7f8c8d;
		    width: 38px;
		    height: 25px;
		    position: absolute;
		    top: -1px;
		    right: -46px;
		    background: #bdc3c7;
		    text-align: center;
		    line-height: 21px;
		    color: #fff;
		    font-weight: bold;
            width: 5.6rem;
		    right: 11.8rem;
		    top: -3px;

		}
		table {
			display: table;
		}
		##{$alias}-pagespeed-ajaxresponse {
			.#{$alias}-panel-header {
				border-bottom: 1px solid #ddd;
				.#{$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);
		    margin-left: -#{px(14)};
		}

		.#{$alias}-what-to-do {
			.#{$alias}-criteria {
				text-indent: 0 !important;
				border-radius: px(3);
				&:before {
					font-family: 'FontAwesome';
					font-size: px(11);
					content: "\f0da";
					margin: 0 px(7);
				}
			}
			i {
				font-style: normal;
				&.psp-status-icon {
					text-align: center;

						vertical-align: middle;
					color: $white;
					&:before {
						padding: px(4);
						text-align: center;
						vertical-align: middle;
						border-radius: px(5);
					}
				}

				&.is_success {
					&:before {
						font-family: 'FontAwesome';
						font-size: px(11);
						content: "\f00c";
						background: $success;
					}
				}
				&.is_error {
					&:before {
						font-family: 'FontAwesome';
						font-size: px(11);
						content: "\f00d";
						background: $danger;
						padding-left: px(5);
						padding-right: px(5);
					}
				}
				&.is_warning {
					&:before {
						font-family: 'FontAwesome';
						font-size: px(11);
						content: "\f12a";
						background: $warning;
						padding-left: px(7);
						padding-right: px(8);
					}
				}
			}
			a {
				font-weight: $normal !important;
				font-family: $primary-font !important;
				font-size: px(14);
				margin: px(3);
			}
		}
		##{$alias}-list-table-posts {
			margin-top: px(23);
			border: none;
			th {
				background: $light-gray;
				color: $black;
				font-family: $primary-font;
				font-size: px(14);
				font-weight: $bold;
				padding-top: px(18);
				padding-left: px(12);
				padding-bottom: px(18);
				line-height: px(26.5);
			}
			td {
				color: $black;
				
				&:nth-child(3) {
					a {
						color: #e41e26;
						font-weight: $normal;
						font-size: px(14);
						line-height: px(26);
					}
				}
				&:nth-child(4),
				&:nth-child(5) {
					background: $white !important;
					i {
						font-style: normal !important;
					}
				}
				&:nth-child(6),
				&:nth-child(7) {
					input[type="button"] {
						padding: px(7) px(17) !important;
						text-transform: none;
						font-size: px(11);
						font-weight: $bold;
						cursor: pointer;
					}
				}
			}
			##{$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 {
				padding: px(10) px(1) px(10) px(6);
				height: auto;
				width: px(94) !important;
				font-family: $primary-font;
				font-weight: $normal; 
				font-size: px(14);
				color: $black;
				border-radius: px(3);
				border: 1px solid $medium-gray;
				margin-right: px(11) !important;
			}
			.#{$alias}-post_status-list {
				font-family: $primary-font;
				font-weight: $normal; 
				font-size: px(14);
				margin-top: px(11);
				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%);
					}
				}
				##{$alias}-search-text {
					width: px(238);
					height: px(40);
					border: 1px solid $medium-gray;
					border-bottom-left-radius: px(3);
					border-top-left-radius: px(3);
					padding-left: px(10);
				}
				input {
					margin-top: 0 !important;
				}
			}
		}

		##{$alias}-pagespeed-detail {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			background: #fff;
			background: rgba(255,255,255, 0.9);
			z-index: 999;
			.#{$alias}-pagespeed-header {
				background: #ecf0f1;
				width: 100%;
				border-bottom: px(1) solid #cccccc;
				height: px(45);
				.#{$alias}-close-page-detail {
					position: absolute;
					right: px(13);
					top: px(10);
				}
				.#{$alias}-tab-item {
					width: px(260);
					height: px(45);
					position: relative;
					display: inline-block;
					padding: 0 px(10);
					border: px(1) solid #cccccc;
					border-top: px(1) solid #cccccc;
					border-bottom: none;
					z-index: 100;
					opacity: 0.6;
					margin-left: -#{px(4)};
					cursor: pointer;
					&:first-child {
						margin-left: -#{px(1)};
						border-radius: px(3);
					}
					&.on {
						background: #fff;
						border-top: px(1) solid #fff;
						opacity: 1;
						cursor: default;
					}
					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(80);
						}
						.#{$alias}-progress {
							margin: px(4) px(70) px(4) px(4);
							.#{$alias}-progress-score {
								width: px(56);
								right: -#{px(62)};
							}
						}
					}
				}
			}
			.#{$alias}-pagespeed-page-content {
				background: #fff;
				margin-left: -#{px(1)};
				width: 100.1%;
				height: 100%;
				position: relative;
				top: -#{px(1)};
				left: 0;
				z-index: 10;
				border-bottom: 1px solid #dadada;
				border-bottom-left-radius: px(13);
				border-bottom-right-radius: px(13);
				.#{$alias}-pagespeed-tab {
					width: 100%;
					height: 100%;
					display: table;
					.left {
						display: table-cell;
						padding: px(15) 0 0 px(15);
						vertical-align: top;
					}
					.right {
						display: table-cell;
						width: px(380);
						padding: px(15) px(15) 0 px(15);
						vertical-align: top;
					}
				}
				.desktop-display {
					width: px(345);
					height: px(324);
					position: relative;
					margin: 0 auto px(20) auto;
					img {
						margin-top: 0;
						margin-left: px(13);
					}
					.php-the-mask {
						width: inherit;
						height: inherit;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 10;
					}
				}
				.mobile-display {
					width: px(172);
					height: px(355);
					position: relative;
					margin: 0 auto px(20) auto;
					img {
						margin-top: px(54);
						margin-left: px(16);
						width: px(143);
						position: relative;
						z-index: 11;
					}
					.php-the-mask {
						width: px(207);
						height: inherit;
						position: absolute;
						top: 0;
						left: -#{px(15)};
						z-index: 10;
						background: url("../wp-content/plugins/premium-seo-pack/modules/google_pagespeed/assets/mobile.png") no-repeat top left;
					}
				}
				.#{$alias}-panel-title {
					margin-right: px(10);
					.#{$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-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;
									}
								}
							}
						}
					}
				
				.php-the-mask {
					background: url("../wp-content/plugins/premium-seo-pack/modules/google_pagespeed/assets/desktop.png") no-repeat top left;
				}
				.#{$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 {
							&:nth-child(2) {
								padding-top: 0;
							}
						}
					}
				}
			}
			.#{$alias}-report-rules {
				.#{$alias}-what-to-do {
					width: 100%;
					margin-bottom: px(14);
					.#{$alias}-desc-summary {
						color: #7f8c8d;
					}
					ul {
						margin-left: px(15);
						color: #777777;
					}
					a.#{$alias}-criteria {
						display: block;
						width: 100%;
						padding: px(5) 0;
						text-indent: px(20);
						background: #95a5a6;
						color: #fff;
						text-decoration: none;
						font-weight: bold;
						&:hover {
							background-color: #7f8c8d;
						}
						&.open {
							background-image: url(assets/arrow_down.png) !important;
						}
					}
					.can-do li {
						line-height: 1.2em;
						list-style-type: square;
						margin-top: 0.4em;
					}
				}
				.#{$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 {
							text-transform: none;
						}
					}
				}
				.#{$alias}-table tr td.#{$alias}-icon-status {
					width: px(16);
					padding: 0 px(5);
				}
				
			}
			.#{$alias}-statistics-box .#{$alias}-sub-panel-content {
				padding: 0;
			}
			i.#{$alias}-status-icon {
				display: block;
				height: px(18);
				margin: px(7) auto;
				margin-bottom: 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;
							}
						}
					}
				}
			}
		}
	}
}