@import "../panel/variables";
.cp-userspace {}
.cp-userspace-topContainer {
	background: #ffc20e;
	display: flex;
	.cp-userspace-vip {
		align-self: center;
		padding: 8px 12px;
		font-weight: bold;
		color: #000;
	}
	.cp-userspace-topInfo {
		flex-grow: 1;
	}
}
.cp-userspace-topInfo {
	background: #ffefc1;
	padding: 8px 16px;
	font-size: 14px;
	list-style: none;
	.cp-userspace-topInfo__list {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		margin: 0 -8px;
		padding: 0;
		list-style: none;
		font-size: 17px;
		color: #000;
		& > li {
			position: relative;
			margin-left: 8px;
			margin-right: 8px;
			&.sep {
				padding-left: 8px;
				&:before {
					content: '';
					background: #9b9b9b;
					position: absolute; top: 0; bottom: 0; left: -4px;
					width: 1px;
				}
			}
		}
	}
}
.cp-userspace-tabs {
	.cp-userspace-tabs__list {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		list-style: none;
		& > li {
			display: flex;
			order: 2;
			flex-direction: column;
			border-top: 2px solid transparent;
			a {
				border: 0;
				display: block;
				min-height: 100%;
				padding: 16px 24px;
				font-size: 14px;
				line-height: 1;
				font-weight: bold;
				color: #333;
				text-decoration: none !important;
				white-space: nowrap;
				.fa:first-child {
					margin-right: 4px;
				}
				&:hover {
					color: #0d61ab;
				}
			}
			&.active {
				background: #fff;
				border-top-color: #0d61ab;
				@media(max-width: 1199px){
					order: 3;
				}
			}
		}
	}
	.cp-userspace-tabs__content {}
}

.cp-userspace-pane {
	background: #fff;
	padding: 8px;
	margin-bottom: 12px;
}

//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: -5px;
		margin-right: -5px;
		.cp-callstats-filter__item {
			padding: 5px;
		}
		.cp-callstats-filter__search {
			.form-group {
				.form-field {
					position: relative;
					width: 200px;
					.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;
		}
	}
}

//BOTH.css
.both-cart-list {
	margin-bottom: 20px;
	a {
		border-bottom: 1px solid transparent;
		text-decoration: none;
		color: $blue;
		&:hover {
			border-bottom-color: $blue;
		}
	}
	.both-cart-list__row {
		border-bottom: 1px solid #e1e1e1;
		display: flex;
		@media(max-width: 767px){
			flex-wrap: wrap;
		}
		.both-cart-list__col {
			padding: 10px;
			&.col-product {
				flex-grow: 1;
				@media(max-width: 767px){
					min-width: 100%;
					padding-bottom: 0;
				}
			}
			&.col-price {
				@media(max-width: 767px){
					display: none;
				}
				@media(min-width: 768px){
					min-width: 100px;
					text-align: right;
				}
			}
			&.col-discount {
				@media(max-width: 767px){
					display: flex;
					align-items: flex-start;
					margin-left: 80px;
					padding-top: 14px;
					font-size: 12px;
					s {
						background: #ccc;
						display: block;
						padding: 0 4px;
						color: $gray_dark;
					}
					i {
						background: $red;
						font-style: normal;
						display: block;
						padding: 0 4px;
						color: $white;
					}
				}
				@media(min-width: 768px){
					min-width: 100px;
					text-align: right;
					s {
						display: none;
					}
					i {
						font-style: normal;
						font-weight: bold;
						color: $green;
					}
				}
			}
			&.col-total {
				color: $blue;
				@media(max-width: 767px){}
				@media(min-width: 768px){
					min-width: 100px;
					text-align: right;
				}
			}
			&.col-type {
				@media(max-width: 767px){
					min-width: 100%;
					padding-left: 90px;
					padding-top: 0;
				}
				@media(min-width: 768px){
					width: 160px;
					min-width: 160px;
				}
				.form-control {
					max-width: 100%;
				}
			}
			&.col-description {
				font-size: 12px;
				@media(max-width: 767px){
					min-width: 100%;
					padding-left: 90px;
					padding-top: 0;
				}
				@media(min-width: 768px){
					width: 400px;
					min-width: 400px;
				}
				table {
					tr {
						td {
							vertical-align: top;
							&:first-child{
								width: 110px;
							}
							&:not(:first-child){
								padding-left: 12px;
							}
						}
						&:not(:first-child){
							td {
								padding-top: 8px;
							}
						}
					}
				}
			}
		}
	}
	.both-cart-list__head {
		background: #e9e9e9;
		@media(max-width: 767px){
			display: none;
		}
		.both-cart-list__row {
			.both-cart-list__col {
				padding: 4px 10px;
				font-size: 12px;
				font-weight: bold;
				color: #909090;
			}
		}
	}
	.both-cart-list__body {}
	.both-cart-list__item {
		display: flex;
		.image {
			width: 90px;
			min-width: 90px;
			padding-right: 10px;
			@media (max-width: 767px) {
				width: 80px;
				min-width: 80px;
			}
			img {
				display: block;
				max-width: 100%;
			}
		}
		.body {
			flex-grow: 1;
		}
		.title {
			line-height: 1.25;
		}
		.description {
			font-size: 12px;
		}
	}
}
.both-cart-total {
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: bold;
	text-align: right;
	span {
		color: $blue;
	}
}
.both-cart-data {
	background: #fff6da;
	border: 1px solid #ffc20e;
	display: flex;
	margin-bottom: 12px;
	@media(max-width: 575px){
		flex-direction: column;
	}
	dl {
		flex-grow: 1;
		margin: 0;
		padding: 16px;
		@media(min-width: 576px){
			&:not(:first-child) {
				padding-left: 0;
			}
		}
		@media(max-width: 575px){
			&:first-child {
				padding-bottom: 0;
			}
		}
	}
}
.both-modal-result {
	text-align: center;
	.both-modal-result__icon {
		margin-bottom: 32px;
		svg, img {
			display: block;
			width: 48px;
			height: 48px;
			margin: 0 auto;
			color: inherit;
		}
		&.success {
			color: $green;
		}
		&.danger {
			color: $red;
		}
		&.warning {
			color: $yellow;
		}
	}
	.both-modal-result__title {
		margin-bottom: 32px;
		font-size: 18px;
		font-weight: bold;
	}
	.both-modal-result__buttons {
		margin: 0;
		padding: 0;
		list-style: none;
		& > li {
			&:not(:first-child){
				margin-top: 24px;
			}
		}
	}
}