// main:../admin_pro.scss

.social-warfare_page_social-warfare-analytics {
	.sw-admin-tab {
		h2 {
			background: #f3f4f5;
			padding: 15px;
			border-radius:10px;
			font-size:18px;
			color:#555555;
			&:before {
				font-family: 'dashicons';
				margin: 1px 15px -2px 5px;
				line-height: 18px;
				display: block;
				float: left;
				font-size: 20px;
			}
			&.line_chart:before {
				content: "\f239";
			}
			&.bar_chart:before {
				content: "\f185";
			}
		}
		.sw-timeframes {
			text-align:center;
			.sw-chart-timeframe {
				display: inline-block;
			    padding: 3px 10px;
			    border: 1px dashed #ccc;
			    margin: 10px 5px 5px 5px;
			    border-radius: 3px;
			    color: #555;
			    cursor: pointer;
				&:first-of-type {
					margin-left:0;
				}
				&.invalid {
					color:#ddd;
					border-color:#ddd;
					cursor:default;
				}
				&.active {
					border: 1px solid #ccc;
					color:black;
					background: #f3f4f5;
				}
			}
		}
		.swp-flex-row {
			display:flex;
			width:100%;
			flex-direction:row;
			justify-content:space-between;
			.swp-flex-item {
				flex:1;
			}
		}
		.swp-total-share {
			text-align:center;
			margin:20px;
			padding:30px;
			background:yellow;
			color:white;
			border-radius:10px;
			&:first-child {
				margin-left:0;
			}
			&:last-child {
				margin-right:0;
			}
			i.icon {
				font-variant:normal;
				font-style:normal;
				display:block;
			    height: 40px;
			    margin-top: 30px;
				&:before {
					font-family:'sw-icon-font';
					font-size:75px;
					font-weight:60px;

				}
				&.total_shares:before {
					content:'K';
				}
			}
			.title {
				font-size:14px;
			}
			.value {
				font-size:25px;
				line-height:35px;
			}
			$networks: ('total_shares', 'facebook', 'pinterest', 'twitter', 'buffer', 'hacker_news', 'reddit', 'tumblr', 'vk', 'yummly');
			@each $key in $networks {
				&.#{$key} {
					background-color: map-get( $network_colors, $key );
					i.icon:before {
						content: map-get( $network_icons, $key );
					}
				}
			}
		}
	}

	.sw-header-wrapper {
		margin: -20px 0 20px 0;
		padding: 0;
	}

	.sw-top-menu {
		.sw-header-logo-pro {
		    height: 46px;
		    margin-top: 18px;
		    float: left;
		    margin-right: 20px;
		}
	}

	.insufficient_data {
	    background: #efefef;
	    border-radius: 10px;
	    display: table;
	    margin-top: 10px;
	    vertical-align: middle;
		h3 {
			font-size: 35px;
		    color: #777;
		    font-weight: bold;
		    text-align: center;
		    margin-top: 141px;
		}
		p {
			text-align: center;
			font-size: 16px;
			padding: 0 75px;
			color: #777;
		}
	}

	p {
		font-size:15px;
		padding:10px;
		line-height:2;
	}

	.optimization_distribution {
		margin:20px 0 50px 0;
		border-radius:10px;
		overflow:hidden;
		.swp-flex-item {
		    padding: 30px 0;
		    text-align: center;
		    font-size: 20px;
			color:white;
			&.green {
				background: $green;
			}
			&.amber {
				background: $amber;
			}
			&.red {
				background: $red;
			}
		}
	}

	table {
		width:100%;
		border-collapse:collapse;
		tr{
			&:nth-child(even) {
				background-color: #f3f4f5;
			}
			th {
				text-align:left;
				padding:10px;
				&.swp_optimization_score {
					text-align:center;
				}
				&.social_shares {
					text-align:center;
				}
			}
			td {
				font-size:16px;
				line-height:40px;
				padding:5px 10px;
				&.swp_optimization_score {
					font-size: 14px;
					text-align: center;
					div {
						display:inline-block;
					}
				}
				&.social_shares {
					text-align:center;
				}
				a {
					color: #444444;
					text-decoration:none;
					&:hover {
						color:#333333;
						text-decoration:underline;
					}
				}
			}
		}
	}

}

#swp_analytics_widget {
	.inside {
		margin-top:0;
		h2 {
			font-size:18px;
			background: #f3f4f5;
			padding:10px 12px;
			margin:20px -12px;
			border-top: 1px solid #eeeeee;
			border-bottom: 1px solid #eeeeee;
		}
		.sw-grid:first-child {
			h2 {
				margin-top:0;
			}
		}
	}
	.insufficient_data {
		background: #efefef;
		border-radius: 10px;
		display: table;
		margin-top: 10px;
		vertical-align: middle;
		h3 {
			font-size: 25px;
			color: #777;
			font-weight: bold;
			text-align: center;
			margin-top: 25px;
		}
		p {
			text-align: center;
			font-size: 14px;
			padding: 0 15px;
			color: #777;
		}
	}
}
.chartjs-tooltip-key {
	border-radius: 5px;
	border:none;
}