@import "variables";
.cp-banners {}
.cp-banners-header {
	margin-bottom: 16px;
	h1 {
		margin-bottom: 0;
		@media (max-width: 991px){
			margin-bottom: 12px;
			font-size: 28px;
		}
		@media (max-width: 767px){
			font-size: 22px;
		}
	}

	/*.pull-md-right {
		.btn {
			padding: 12px 20px;
			@media (max-width: 991px){
				padding: 8px 16px;
			}
		}
	}*/
}
.cp-banners-filter {
	background: $blue_light;
	/*display: flex;
	align-items: flex-end;*/
	padding: 12px 16px;
	@media (max-width: 767px) {
		padding: 12px;
	}
	.cp-banners-filter__row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		margin-left: -8px;
		margin-right: -8px;
	}
	.cp-banners-filter__col {
		flex: 1 0 0%;
		margin-left: 8px;
		margin-right: 8px;
		padding: 4px 0;
		@media(max-width: 991px){
			min-width: 33.3333%;
		}
	}
	.cp-banners-filter__btn {
		margin-left: 8px;
		margin-right: 8px;
		padding: 4px 0;
		/*@media(max-width: 767px){
			min-width: 100%;
			margin: 8px 0 0 0;
			padding-left: 8px;
			padding-right: 8px;
			text-align: right;
		}*/
	}

	.list-filters {
		position: relative;
		margin: -4px -8px;
		.list-filters-item {
			display: block;
			float: left;
			vertical-align: top;
			padding: 4px 8px;
			@media (max-width: 1280px) {
				width: 25% !important;
			}
			@media (max-width: 991px) {
				width: 50% !important;
			}
			@media (max-width: 575px){
				width: 100% !important;
			}
			&.type_a { width: 300px; }
			&.type_b { width: 180px; }
			&.type_c { width: 250px; }
		}
	}
	.form-check {
		margin-top: 8px;
	}

	.cp-banners-files {
		.uploader {
			background: rgba(255,255,255,0.25);
			&.uploader-b {
				background: rgba(255,255,255,0.75);
			}
		}
	}

	.cp-banners-summtable {
		table {
			background: rgba(255,255,255,0.75);
			width: 100%;
			th {}
		}
	}

	.row {
		margin-top: -12px;
		.form-group {
			margin-top: 12px;
		}
	}

	.filter-row {
		position: relative;
		margin-left: -8px;
		margin-right: -8px;
		.filter-col-1 {
			float: left;
			width: 22%;
			padding-left: 8px;
			padding-right: 8px;
		}
		.filter-col-2 {
			float: left;
			width: 56%;
			padding-left: 8px;
			padding-right: 8px;
		}
		.filter-col-3 {
			float: left;
			width: 78%;
			padding-left: 8px;
			padding-right: 8px;
		}
		@media (max-width: 1599px){
			.filter-col-1 { width: 25%; }
			.filter-col-2 { width: 50%; }
			.filter-col-3 { width: 75%; }
		}
		@media (max-width: 1399px){
			.filter-col-1 { width: 50%; }
			.filter-col-2 { width: 100%; padding-top: 24px; }
			.filter-col-3 { width: 100%; padding-top: 24px; }
		}
		@media (max-width: 767px){
			.filter-col-1 { width: 100%; padding-top: 24px; }
		}
	}

	.cp-banners-summtable {
		table {
			font-size: 11px;
			tr {
				th, td {
					padding: 0 4px;
				}
			}
			thead {
				tr th, tr td {
					padding: 0px 4px;
					vertical-align: bottom;
				}
			}
			tbody {
				font-size: 8px;
				text-align: center;
				td:first-child {
					padding-left: 12px;
					font-size: 11px;
					text-align: left;
				}
			}
		}
		.title-row, .title-col {
			padding-top: 2px !important;
			padding-bottom: 2px !important;
			//padding-left: 4px !important;
			//padding-right: 4px !important;
		}
		.flag {
			margin-bottom: 4px;
			img {
				max-height: 10px;
			}
		}
	}

	.cp-banners-filter__period {
		&:disabled {
			border: 1px solid $color_danger !important;
		}
	}
	&.disabled {
		outline: 4px solid $color_danger;
	}
}
.cp-banners-list {
	position: relative;
	overflow: hidden;
	overflow-x: auto;
	table {
		min-width: 100%;
		thead {
			th, td {
				background: $gray_light;
				padding: 8px;
				font-size: 12px;
			}
		}
		tbody {
			th, td {
				border-bottom: 1px solid $gray_light;
				vertical-align: top;
				padding: 32px 8px;
				font-size: 14px;
				@media (max-width: 767px){
					padding: 16px 8px;
				}
			}
			.js-link:hover th, .js-link:hover td {
				background: $blue_light;
			}
		}
		.td-number {
			width: 36px;
		}
		.td-image {
			width: 340px;
			img {
				max-width: 100%;
			}
			.no-image {
				background: rgba(0,0,0,.1);
				border: 0;
				display: block;
				padding: 4px 16px;
				color: rgba(0,0,0,.5);
				text-align: center;
			}
		}
		.td-name {
			min-width: 120px;
		}
		.td-status {
			white-space: nowrap;
			span {
				margin-right: 2px;
				font-size: 1.15rem;
				line-height: .75;
			}
		}
		.td-position {}
		.td-langs {

		}
		.td-domains {}
		.td-date {
			min-width: 180px;
			text-align: center;
		}
	}
}

.cp-banners-details {
	padding-top: 24px;
	.nav-tabs_b {
		li {
			& > a, & > span, & .dropdown > a {
				min-height: 60px;
				padding: 1rem 1.5rem .5rem !important;
			}
			.flag {
				position: relative;
				display: block; width: 24px; height: 18px;
				margin: 0 auto;
				img {
					position: absolute; top: 50%; left: 50%;
					display: block;
					max-width: 100%;
					max-height: 100%;
					@include box-shadow(0 0 4px $color_gray_30);
					@include transform(translateX(-50%) translateY(-50%));
				}
			}
			.bull {
				background: $color_gray_30;
				display: block; width: 8px; height: 8px;
				margin: 6px auto 0;
				@include border-radius(50%);
				&.active {
					background: $color_success;
				}
			}
			&.pull-right {
				& > a, & > span, & .dropdown > a {
					background: none !important;
					padding-left: .75rem !important;
					padding-right: .75rem !important;
					.fa-ellipsis-v {
						position: relative;
						overflow: hidden;
						max-height: 30px;
						font-size: 24px;
						line-height: 30px;
					}
				}
			}
		}
	}

	.cp-banners-details__banner {
		border: 1px solid $color_gray_20;
		max-width: 1140px;
		margin: 0 auto 32px;
		@include box-shadow(0 0 12px $color_gray_20);
	}

	.cp-banners-details__form {
		//max-width: 600px;
	}

	a[aria-expanded="true"]{
		.fa {
			@include transform(rotate(180deg));
		}
	}
	a[aria-expanded="false"]{}

	.form-group_infostrip-translate {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		//max-width: 600px;
		//padding-right: 28px;
		.form-label {
			display: flex;
			align-items: center;
			@media(min-width: 576px){
				min-width: 250px;
			}
			img {
				display: block;
				width: 20px;
				height: 13px;
				margin: -1px 8px 0 0;
				@include box-shadow(0 0 3px rgba(0,0,0,.4));
			}
			.closer {
				position: relative; top: auto; right: auto;
				display: block;
				margin: 0 0 0 4px !important;
			}
		}
		.form-preview {
			margin-left: auto;
			font-size: 12px;
			@media(min-width: 576px){
				margin-left: 16px;
			}
			a {
				border-color: transparent;
				&:hover {
					border-color: $blue;
				}
			}
		}
		.form-group__flag {
			float: right;
			//min-width: 48px;
			padding: 7px 0 0 16px;
			img {
				display: block;
				width: 24px;
				height: 18px;
				margin-left: auto;
				@include box-shadow(0 0 4px rgba(0,0,0,0.4));
			}
		}
		.form-field {
			min-width: 100%;
			overflow: hidden;
		}
		.closer {
			top: 50%;
			right: 0;
			opacity: 0.75;
			&.size_16 {
				margin-top: -8px;
			}
		}

		&.active {
			background: rgba(#B8E986, .6);
			margin: -6px -24px -8px;
			padding: 6px 24px 8px;
		}
	}

	.cpbd-infostrip {
		.cpbd-infostrip__head {
			background: #F2F2F2;
			display: flex;
			align-items: center;
			.cpbd-infostrip-header__logo {
				svg {
					display: block;
				}
			}
			.cpbd-infostrip-header__options {
				font-size: 14px;
				label {
					margin-left: 16px;
					cursor: pointer;
				}
			}
		}
		.cpbd-infostrip__body {
			/*.cpbd-infostrip {
				background: $color_warning;
				padding: 4px 8px;
				text-align: center;
			}*/
		}
		&.mobile {
			max-width: 360px;
		}
	}
}

.cp-banners-files {
	//max-width: 600px;
	.uploader {
		background: $blue_light;
		padding: 24px;
		.uploader__files {
			min-width: 100%;
			tr {
				td {
					padding: 0 0 8px 8px;
					&:first-child {
						padding-left: 0;
					}
				}
			}
			a {
				border-bottom-color: transparent;
				&:hover {
					border-bottom-color: $blue;
				}
			}
			.closer {
				position: relative; top: auto; left: auto; right: auto;
				opacity: .75;
			}
		}
		.uploader__button {
			padding-top: 16px;
		}
		&.empty {
			.uploader__button {
				padding: 48px;
				text-align: center;
			}
		}

		&.uploader-b {
			background: $color_gray_10;
			&.empty {
				.uploader__button {
					padding: 0;
					text-align: center;
				}
			}
		}
	}
}

.cp-banners-summtable {
	position: relative;
	overflow: hidden;
	overflow-x: auto;
	table {
		border-top: 1px solid #f7f7f7;
		border-right: 1px solid #f7f7f7;
		//min-width: 100%;
		font-size: 12px;
		text-align: center;
		tr {
			th, td {
				background: #d4d4d4;
				//border-bottom: 1px solid #DDE4EC;
				border-bottom: 1px solid #f7f7f7;
				border-left: 1px solid #f7f7f7;
				padding: 8px 12px;
				@media(max-width: 1199px){ padding: 6px 10px; }
				@media(max-width: 991px){ padding: 4px 8px; }
				@media(max-width: 767px){ padding: 4px; }
				text-align: center;
				&:first-child {
					background: #f5f7fa;
					//border-right: 1px solid #DDE4EC;
					border-bottom: 1px solid #e3e8f0;
				}
				&.active {
					background: #2cb92d;
				}
				&.muted {
					background: #bababa;
				}
			}
		}
		thead {
			tr th, tr td {
				background: #e9e9e9;
				padding: 12px;
			}
		}
		tbody {
			tr th {
				background: #e9e9e9;
				vertical-align: middle;
			}
		}
		.flag {
			display: block;
			img {
				margin: 0 auto;
			}
		}
	}
	.td-first {
		padding: 0 !important;
		vertical-align: top;
		//width: 120px;
		.title-row {
			background: #E9E9E9;
			position: relative;
			padding: 6px 12px;
			&:before {
				content: '';
				background: #E9E9E9;
				position: absolute; top: 0; bottom: 0; left: 100%;
				display: block; width: 1px;
			}
		}
		.title-col {
			position: relative;
			padding: 6px 12px;
			&:before {
				content: '';
				background: #E9E9E9;
				position: absolute; top: 0; bottom: 0; left: 100%;
				display: block; width: 1px;
			}
		}
	}
	.td-separate {
		position: relative;
		/*&:before {
			content: '';
			background: $color_black;
			position: absolute; top: 50%; left: 50%;
			width: 120%; height: 1px;
			opacity: 0.25;
			@include transform(translateX(-50%) translateY(-50%) rotate(25deg));
			@media (max-width: 767px){ display: none; }
		}*/
	}
	th {
		.form-check {
			margin-top: 8px;
		}
	}
	.form-check {
		.arr {
			border-color: $color_gray_30;
			//margin-top: 0px;
		}
		/*&.active {
			.arr {
				background: $yellow_light;
				border-color: $yellow;
			}
		}*/

		&.flag {
			display: inline-block;
			label {
				padding: 0 0 16px 0;
			}
			.arr {
				top: auto;
				bottom: 0;
				left: 50%;
				margin-left: -7px;
			}
		}
		&.single {
			display: inline-block !important;
			vertical-align: middle;
			width: 14px;
			height: 14px;
		}
	}
	label {
		input {
			margin-right: 4px;
		}
		&:hover {
			cursor: pointer;
		}
	}
	.flag {
		display: inline-block;
		img {
			display: block;
			max-height: 12px;
			//@include box-shadow(0 0 4px $color_gray_50);
		}
	}

	.modal & table {
		min-width: 100%;
	}
}

.cp-banners-remove {
	margin: 0;
	padding: 32px 0 16px;
	list-style: none;
	li:not(:first-child) {
		margin-top: 4px;
	}
	a {
		border: none;
		color: $color_gray_40;
		&:hover {
			color: $color_danger;
		}
	}
}

.list-inline-flags {
	position: relative;
	max-width: 150px;
	min-width: 100px;
	margin: 0 -2px;
	padding: 0;
	list-style: none;
	li {
		display: inline-block;
		vertical-align: middle;
		padding-left: 2px;
		padding-right: 2px;
		img {
			display: block;
			width: 20px;
			height: 12px;
			@include box-shadow(0 0 4px $color_gray_50);
		}
		a {
			&:hover {
				img {
					@include box-shadow(0 0 6px $color_gray_80);
					@include transform(scale(1.15));
				}
			}
		}
	}
}


.filebox {
	position: relative;
	.button {
		background: #506585;
		@include linear-gradient(180deg, #98A9C1 0%, #506585 100%);
		border-color: #506585;
		position: relative;
		overflow: hidden;
		float: left;
		height: 42px;
		padding: 0 16px;
		line-height: 44px;
		color: $color_white;
		cursor: pointer;
		@include border-radius(3px 0 0 3px);
		&:hover {
			background: #5B7498;
			@include linear-gradient(180deg, #A5B3C9 0%, #5B7498 100%);
			border-color: #5B7498;
		}
		input {
			position: absolute; top: -2px; left: -2px;
			display: block;
			font-size: 100px;
			opacity: 0;
			cursor: pointer;
		}
	}
	.input {
		border: 1px solid $color_gray_30;
		border-left-color: transparent;
		overflow: hidden;
		@include border-radius(0 3px 3px 0);
		input {
			background: $color_white;
			border: none;
			display: block;
			width: 100%;
			height: 40px;
			padding: 0 12px;
		}
	}
}

//modal .cpbc-
.cp-banner-creater {
	.cpbc-title {
		margin-top: -8px;
		margin-bottom: 16px;
		font-size: 22px;
		font-weight: bold;
	}
	.cpbc-tabs {
		position: relative;
		margin: 0 0 16px;
		padding: 0;
		list-style: none;
		font-size: 14px;
		&:before {
			content: '';
			background: $color_gray_05;
			position: absolute; bottom: 0; left: -24px; right: -24px;
			height: 1px;
		}
		li {
			position: relative;
			display: inline-block;
			vertical-align: top;
			padding: 6px 16px;
			&.active {
				background: $color_white;
				border-left: 1px solid $color_gray_05;
				border-right: 1px solid $color_gray_05;
				&:before {
					content: '';
					background: $color_primary;
					position: absolute; bottom: 100%; right: 0; left: 0;
					height: 2px;
				}
			}
		}
	}
	.uploader {
		.uploader__field {
			background: #DFECF9;
			padding: 80px 16px;
		}
		.uploader__button {
			max-width: 240px;
			margin: 0 auto;
			text-align: center;
			.text {
				padding-bottom: 16px;
			}
		}
		.uploader__list {
			margin: 0;
			padding: 0;
			list-style: none;
			li {
				border-bottom: 1px solid $color_water;
				position: relative;
				padding: 6px;
				font-size: 14px;
				.data {
					float: right;
					padding-right: 24px;
					.closer {
						top: 8px;
						right: 0;
						width: 16px;
						height: 16px;
						opacity: .8;
					}
				}
				a {
					@extend .invert-link;
				}
			}
		}
	}
	.form-group {
		.form-label {
			font-size: 12px;
		}
	}
}

//
.cp-banners-matrix {
	.matrix-toggle {
		border-bottom-color: transparent;
		font-size: 12px;
		&:hover {
			border-bottom-color: $blue;
		}
	}
	&.in {
		.matrix-toggle {
			.a {
				display: none;
			}
		}
	}
	&:not(.in){
		.matrix-toggle {
			.b {
				display: none;
			}
		}
		.t-hide {
			display: none;
		}
	}

	.cp-banners-summtable {
		background: #e9e9e9;
		display: flex;
		.table__side {
			width: 76px;
			min-width: 76px;
			table {
				tr {
					th, td {
						background: #f5f7fa;
						border: 0;
						border-bottom: 1px solid #e3e8f0;
						padding-left: 4px;
						padding-right: 4px;
						text-align: center;
					}
				}
			}
		}
		.table__body {
			flex-grow: 1;
			overflow: hidden;
			overflow-x: auto;
			table {
				tr {
					th {
						background: #E9E9E9 !important;
					}
					th, td {
						background: #d4d4d4;
						border: 0;
						border-bottom: 1px solid #f7f7f7;
						&:not(:first-child){
							border-left: 1px solid #f7f7f7;
						}
						&.active {
							background: #2cb92d;
						}
						&.muted {
							background: #bababa;
						}
					}
				}
				thead {
					th {
						height: 50px;
						vertical-align: bottom;
					}
				}
			}
		}
		table {
			width: 100%;
			font-size: 12px;
			line-height: 1;
			tr {
				th, td {
					height: 20px;
					padding: 2px 6px;
					vertical-align: middle;
					&.td-first {
						font-size: 11px !important;
						line-height: 1.25;
						.title-row {
							height: 25px;
							padding: 2px 6px;
							line-height: 20px;
						}
						.title-col {
							height: 25px;
							padding: 2px 6px;
							line-height: 20px;
						}
					}
				}
			}
			thead {
				tr th, tr td {
					padding: 6px;
				}
			}
			tbody {
				tr th {
					vertical-align: middle;
				}
			}
		}
	}
}