@import "variables";
//cp-callstats
.cp-callstats-summary {
	max-width: 480px;
	margin-bottom: 54px;
	table {
		width: 100%;
		font-size: 12px;
		tr {
			th {
				background: #d2d2d2;
				min-width: 100px;
				padding: 4px 8px;
				&:not(:first-child){
					border-left: 1px solid #e1e1e1;
					text-align: right;
				}
			}
			td {
				border-bottom: 1px solid #e1e1e1;
				padding: 4px 8px;
				&:not(:first-child){
					border-left: 1px solid #e1e1e1;
					text-align: right;
				}
			}
		}
	}
	.cp-callstats-summary__download {
		margin-top: 8px;
		padding: 0 8px;
		text-align: right;
	}
	a {
		border-bottom-color: transparent;
		&:hover {
			border-bottom-color: $blue;
		}
	}
}
.cp-callstats-table {
	position: relative;
	overflow: hidden;
	overflow-x: auto;
	width: 100%;
	table {
		width: 100%;
		font-size: 12px;
		white-space: nowrap;
		tr {
			th {
				background: #d2d2d2;
				padding: 4px 8px;
				vertical-align: top;
				&:not(:first-child){
					border-left: 1px solid #e1e1e1;
					min-width: 100px;
				}
			}
			td {
				border-bottom: 1px solid #e1e1e1;
				padding: 4px 8px;
				vertical-align: top;
				&:not(:first-child){
					border-left: 1px solid #e1e1e1;
				}
			}
		}
		.td-success {
			background: $green_light;
		}
		.tr-nothing {
			&:not(.in){
				display: none;
			}
		}
		a {
			border-bottom-color: transparent;
			&:hover {
				border-bottom-color: $blue;
			}
		}
	}
	.ellipsis {
		position: relative;
		overflow: hidden;
		display: block;
		width: 100%;
	}
	.text-light {
		color: #9b9b9b;
	}
	.highlight {
		background: $yellow;
		padding: 0;
	}
}
.cp-callstats-filter {
	position: relative;
	overflow: hidden;
	.cp-callstats-filter__row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		margin-bottom: 24px;
		margin-left: -8px;
		margin-right: -8px;
		.cp-callstats-filter__item {
			padding: 8px;
		}
		/*.cp-callstats-filter__search {
			margin-left: auto;
			@media(max-width: 1440px){
				min-width: 100%;
			}
			.form-group {
				display: flex;
				.form-field {
					min-width: 250px;
					@media(max-width: 449px){
						flex-grow: 1;
						min-width: auto;
					}
					.form-control {
						@include border-radius(3px 0 0 3px !important);
					}
				}
				.form-btn {
					.btn {
						@include border-radius(0 3px 3px 0 !important);
					}
				}
			}
		}*/
		.cp-callstats-filter__search {
			.form-group {
				.form-field {
					position: relative;
					min-width: 220px;
					.form-control {
						padding-left: 28px;
					}
					.fa {
						position: absolute; top: 50%; left: 9px;
						margin-top: -1px;
						color: $gray;
						@include transform(translateY(-50%));
					}
				}
			}
		}
	}
	.cp-callstats-filter-range {
		display: flex;
		align-items: flex-end;
		.form-group {
			width: 120px;
		}
		.sep {
			padding: 0 8px 6px;
		}
	}
	a {
		border-bottom-color: transparent;
		&:hover {
			border-bottom-color: $blue;
		}
	}
}

.cp-callstats-modal {
	.modal-header {
		background: #f4f6f9;
		padding-bottom: 8px !important;
		h2, .h2 {
			margin-bottom: 8px;
			font-size: 32px;
			font-weight: bold;
			@media(max-width: 991px){
				font-size: 24px;
			}
		}
	}
	.modal-body {
		position: relative;
		@media(min-width: 991px){
			overflow: hidden;
			overflow-y: auto;
			height: 700px;
			min-height: 700px;
		}
	}
	.cp-callstats-modal-data {
		display: flex;
		flex-wrap: wrap;
		font-size: 14px;
		font-weight: normal;
		.cp-callstats-modal-data__person {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			flex-grow: 1;
			padding-top: 4px;
			padding-bottom: 4px;
			.lang {
				position: relative;
				margin-right: 8px;
				padding-left: 24px;
				white-space: nowrap;
				img {
					position: absolute; top: 50%; left: 0;
					display: block;
					width: 16px;
					@include transform(translateY(-50%));
				}
			}
			.person {
				margin-right: 8px;
				font-weight: bold;
			}
			.phone {
				margin-right: 8px;
				font-weight: bold;
			}
			.date {
				margin-right: 8px;
			}
		}
		.cp-callstats-modal-data__call {
			padding-top: 4px;
			padding-bottom: 4px;
		}
	}
	.cp-callstats-modal-reason {
		.reason-list {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				font-size: 16px;
				&:not(:first-child){
					margin-top: 16px;
				}
			}
		}
		.reason-inner {
			display: none;
			padding-top: 4px;
			padding-left: 20px;
			font-size: 14px;
			.reason-important {
				margin-bottom: 4px;
				color: $red;
			}
			.form-group {
				& + .form-group {
					margin-top: 8px;
				}
			}
			.btn {
				min-width: 100px;
			}
		}
		.reason-inner__list {
			margin: 0 0 8px;
			padding: 0;
			list-style: none;
			& > li {
				&:not(:first-child){
					margin-top: 8px;
				}
			}
		}
		.reason-check {
			position: relative;
			padding-left: 24px;
			label {}
			input {
				position: absolute; top: 50%; left: 0;
				display: block;
				margin: -1px 0 0 0;
				padding: 0;
				@include transform(translateY(-50%));
			}
			&.in + .reason-inner {
				display: block;
			}
		}
		.reason-link {
			position: relative;
			display: inline-block;
			padding-right: 20px;
			svg, img {
				position: absolute; top: 2px; right: 0;
				display: block;
				width: 15px;
				height: 15px;
			}
		}
		/*.form-check.active + .reason-inner {
			display: block;
		}*/
	}
	a {
		border-bottom-color: transparent;
		&:hover {
			border-bottom-color: $blue;
		}
	}
}