@import "variables";
.cp-serviceQuality {
	font-size: 14px;
	.cp-serviceQuality-generator {
		background: #ffefc1;
		border: 1px solid #dde4ec;
		position: relative;
		padding: 12px 12px 12px 32px;
		max-width: 300px;
		margin-bottom: 16px;
		font-size: 12px;
		& > .fa-link {
			position: absolute; top: 14px; left: 12px;
			font-size: 16px;
			color: #333;
		}
		.heading {
			margin-bottom: 8px;
			font-weight: bold;
			font-size: 14px;
			color: #333;
		}
		.list-locale {
			display: flex;
			margin: 0 -4px;
			padding: 0;
			list-style: none;
			li {
				padding-left: 4px;
				padding-right: 4px;
			}
			a {
				border-bottom-style: dashed;
				font-weight: bold;
			}
		}
		.body {}
		.result {
			position: relative;
			display: none;
			.closer {
				top: 0;
				right: 0;
			}
			.result__lang {
				display: flex;
				margin: 0 0 8px;
				padding: 0;
				list-style: none;
				& > li {
					&:not(:first-child){
						margin-left: 8px;
					}
					.lang__link {
						border-bottom: 1px dashed $blue;
					}
					&.active {
						.lang__link {
							border-bottom-color: $gray;
							color: $gray;
						}
					}
				}
			}
		}
		&.in {
			.body {
				display: none;
			}
			.result {
				display: block;
			}
		}
	}
	.cp-serviceQuality-stats {
		font-weight: bold;
		.stats-heading {
			padding-left: 8px;
		}
		table {
			tr {
				td {
					padding: 4px 8px;
					&:not(:first-child){
						text-align: right;
					}
				}
				&:not(:first-child){
					td {
						border-top: 1px solid #e1e1e1;
					}
				}
			}
		}
	}
}