@import url('setting.css');
@import url('admin.charts.css');
@import url('admin.compare.css');
@import url('admin.filter.css');
@import url('widget.bar-chart.css');
@import url('editor.css');

body {
	margin: 0;
}

.app-wrapper {
	display: flex;
	height: 100vh;
	position: relative;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	box-shadow: none;
	align-items: center;
	background-color: #f5f7fc;
	flex-direction: row;
	gap: 10px;
	padding: 0 16px;
	height: 52px;
}

body.scrolled .header {
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
}

body.menu-opened .header,
body.customer-list-shown .header {
	/*z-index: calc(2147483647 - 10);*/
}

body.customer-list-shown {
	overflow: hidden;
}

.header .section-name {
	font-size: 18px;
	padding-right: 25px;
}

.menu-toggle {
	width: 47px;
	height: 34px;
	flex-shrink: 0;
	cursor: pointer;
	transition: 0.2s;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

body.menu-opened .menu-toggle {
	background-color: light-dark(#e7ebf8, rgba(255, 255, 255, 0.12));
	color: light-dark(#1a1c1e, #e2e2e5);
	border-radius: 18px !important;
}

.menu-toggle > i {
	display: flex;
	align-items: center;
	justify-content: center;
	color: light-dark(#44474e, #a8abb4);
}

.logo-wrapper {
	margin: 12px 0;
}

.view-selector {
	position: sticky;
	overflow: hidden;
	overflow-y: auto;
	top: 52px;
	left: 0;
	bottom: 0;
	z-index: 10;
	opacity: 1;
	display: flex;
	max-width: 80px;
	flex-direction: column;
	background-color: #f5f7fc;
	height: calc(100vh - 52px);
	justify-content: space-between;
}

body.menu-opened .view-selector {
	opacity: 1;
	max-width: 175px;
	pointer-events: initial;
}

.view-selector .view-selector-item-group {
	display: flex;
	flex-direction: column;
	border-collapse: collapse;
	gap: 10px;
	padding: 16px;
}

.view-selector .view-selector-item-group .view-selector-item {
	gap: 5px;
	display: flex;
	cursor: pointer;
	transition: 0.2s;
	padding: 6px 12px;
	border-radius: 25px;
	color: light-dark(#44474e, #a8abb4);
	text-decoration: none !important;
}

.view-selector .view-selector-item-group [data-view-selector-item="transaction"] + .view-selector-item {
	padding-top: 10px;
	border-top: 1px solid #ddd;
}

.view-selector .view-selector-item-group .view-selector-item:hover {
	background-color: light-dark(#e7ebf8, rgba(255, 255, 255, 0.12));
	color: light-dark(#1a1c1e, #e2e2e5);
}

.view-selector .view-selector-item-group .view-selector-item.active,
.view-selector .view-selector-item-group .view-selector-item.active:hover {
	background-color: light-dark(#e7ebf8, rgba(255, 255, 255, 0.12));
	color: light-dark(#1a1c1e, #e2e2e5);
}

.view-selector .view-selector-item-group .view-selector-item .view-selector-item-inner {
	flex: 1;
	gap: 5px;
	display: flex;
}

.view-selector .view-selector-item-group .view-selector-item .view-selector-item-icon {
	width: 24px;
	height: 24px;
	display: flex;
	min-width: 24px;
	max-width: 24px;
	align-items: center;
	justify-content: center;
}

.view-selector .view-selector-item-group .view-selector-item .view-selector-item-icon > i {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.view-selector .view-selector-item-group .view-selector-item .view-selector-item-name {
	flex: 1;
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	align-items: center;
}

body:not(.menu-opened) .view-selector .view-selector-item-group .view-selector-item .view-selector-item-name {
	opacity: 0;
	color: var(--app-main);
	text-decoration: none;
}

.view-selector::-webkit-scrollbar {
	width: 1px;
}

.view-selector::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.view-selector::-webkit-scrollbar-thumb {
	background: var(--app-red);
}

.view-selector::-webkit-scrollbar-thumb:hover {
	background: var(--app-red);
}

.view:not(.active),
.header .filters-wrapper .filters:not(.active) {
	display: none;
}

.header .logo-wrapper .logo {
	height: 29px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header .view-selector {
	gap: 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.header .filters-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
}

.header .filters-wrapper .filters {
	gap: 10px;
	display: flex;
	justify-content: end;
}

.header .filters-wrapper .date-filters {
	flex: 1;
	gap: 10px;
	display: flex;
}

body.no-date-filters .header .filters-wrapper .date-filters > div {
	display: none !important;
}

.header .filters-wrapper .cluster-filters {
	flex: 1;
	gap: 10px;
	display: flex;
	justify-content: end;
}

.customer-wrapper {
	display: none;
	/*width: 228px;*/
}

.customer-wrapper .customer-toggle {
	display: flex;
	gap: 6px;
	user-select: none;
	cursor: pointer;
	height: 53px;
	justify-content: end;
	align-items: center;
	padding-left: 12px;
	transition: 0.2s;
}

.customer-wrapper .customer-toggle .customer-name {
	flex: 1;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
}

body .customer-wrapper .customer-toggle > i {
	transition: 0.2s;
}

body.customer-list-shown .customer-wrapper .customer-toggle,
.customer-toggle:hover {
	color: #f79400;
}

body.customer-list-shown .customer-wrapper .customer-toggle > i {
	transform: rotateZ(180deg);
}

.customer-list-wrapper {
	position: fixed !important;
	top: 53px;
	right: 0;
	bottom: 0;
	z-index: 2147483647;
	opacity: 0;
	display: flex;
	min-width: 240px;
	transition: 0.2s;
	pointer-events: none;
	flex-direction: column;
	background-color: #fff;
	transform: translateX(100%);
	border-left: 1px solid #ddd;
	box-shadow: -7px 0 7px -7px rgba(0, 0, 0, 0.1) !important;
}

body.customer-list-shown .customer-list-wrapper {
	opacity: 1;
	pointer-events: initial;
	transform: translateX(0);
}

ul.widgetlist.ul-list-customers {
	width: 270px;
}

ul.widgetlist.ul-list-customers li {
	cursor: pointer;
}

ul.widgetlist.ul-list-customers li:hover,
ul.widgetlist.ul-list-customers li.checked {
	color: #f79400;
	font-weight: bold;
	border-color: #ddd;
	background-color: #fff;
}

ul.widgetlist.ul-list-customers li > span {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.views {
	flex: 1;
	margin-top: 52px;
	overflow: hidden;
	overflow-y: auto;
}

.views .view {
	height: 100%;
	width: 100%;
	padding: 15px;
	overflow: hidden;
	overflow-y: auto;
}

.tiles {
	gap: 40px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.tiles-title {
	font-weight: 700;
	font-size: 42px;
	color: #180f00 !important;
	line-height: 1.2em;
	width: 100%;
	padding-bottom: 23px;
	position: relative;
	margin-bottom: 20px;
}

.tiles-title:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 5px;
	background-color: var(--app-highlight);
}

.tiles + .tiles,
.tiles + .tiles-wrapper {

}

.tiles .tile {
	flex: 0 0 calc((100% - 40px) / 2);
	width: calc((100% - 40px) / 2);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tiles .tile .chart {
	width: 100%;
	padding: 15px;
	background-color: #fff;
}

.tiles .tile .chart-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--app-black);
	font-family: EONBrixSans, Arial, Geneva, Helvetica, sans-serif;
}

.tile.tile-wide {
	flex: 1 0 calc((100% - 15px) / 2);
	width: calc((100% - 15px) / 2) !important;
}

@media (max-width: 990px) {
	.tiles .tile {
		flex: 1 0 calc((100% - 15px) / 2);
		width: calc((100% - 15px) / 2);
	}
}

.tiles .tile .tile-title {
	display: flex;
	margin: 15px 0;
	font-size: 24px;
	text-align: center;
	justify-content: center;
	color: #000;
}

.tiles .tile .tile-body {
	min-height: 300px;
	flex: 1 0 auto;
}

.tiles .tile.tile-high .tile-body {
	height: 500px;
}

.revenue-compare {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*align-items: center;*/
	gap: 30px;
	height: 100%;
}

.revenue-compare > div {
	height: 50%;
}

.revenue-compare-upper {
	display: flex;
	align-items: center;
}

.revenue-compare-revenues-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
}

.revenue-compare-revenues-wrapper:first-child {
	justify-content: flex-end;
}

.revenue-compare-revenues-wrapper:last-child {
	justify-content: flex-start;
}

.revenue-compare .revenue-compare-percent,
.revenue-compare .revenue-compare-average-percent {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 50px;
	font-weight: bold;
	font-style: italic;
}

.revenue-compare .revenue-compare-percent.top,
.revenue-compare .revenue-compare-average-percent.top {
	color: #7AA874
}

.revenue-compare .revenue-compare-percent.flop,
.revenue-compare .revenue-compare-average-percent.flop {
	color: #f97d82;
}

.revenue-compare .revenue-compare-sales,
.revenue-compare .revenue-compare-revenues,
.revenue-compare .revenue-compare-average-revenues {
	display: flex;
	gap: 10px;
}

.daterangepicker.dropdown-menu {
	padding: 0;
	position: fixed;
	top: 46px !important;
}

.daterangepicker .ranges {
	gap: 4px;
	display: flex;
	flex-direction: column;
}

.daterangepicker .ranges ul {
	flex: 1;
}

.daterangepicker .ranges li {
	margin: 0;
	color: #000;
	border-radius: 0;
	line-height: 26px;
	text-align: center;
	background-color: #fff;
	border: none !important;
	padding: 0 6px !important;
}

.daterangepicker .ranges li.active {
	background-color: var(--app-highlight) !important;
	color: #fff !important;
}

.daterangepicker .ranges li:hover {
	color: var(--app-highlight) !important;
	background-color: var(--app-highlight-rgba) !important;
}

.daterangepicker .range_inputs {
	display: flex;
}

.daterangepicker .range_inputs > button {
	flex: 1;
}

input.form-control.date-range {
	width: 226px;
	padding-left: 36px;
}

[data-control="date-range"],
[data-control="date-range-compare"] {
	position: relative;
}

[data-control="date-range"]::before,
[data-control="date-range-compare"]::before {
	position: absolute;
	color: var(--fa-primary-color, inherit);
	opacity: var(--fa-primary-opacity, 1);
	content: "\f073";
	font-family: 'Font Awesome 7 Duotone';
	top: 10px;
	left: 12px;
	pointer-events: none;
}

[data-control="date-range"]::after,
[data-control="date-range-compare"]::after {
	content: "\f073\f073";
	font-family: 'Font Awesome 7 Duotone';
	color: var(--fa-secondary-color, inherit);
	opacity: var(--fa-secondary-opacity, 0.4);
	position: absolute;
	top: 10px;
	left: 12px;
	pointer-events: none;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
td.active.end-date.in-range.available {
	background-color: var(--app-highlight) !important;
	color: #fff !important;
}

.daterangepicker td.in-range {
	background: var(--app-highlight-rgba) !important
}

.daterangepicker td.active.start-date.in-range {
	background: var(--app-highlight) !important;
}

div.data-filter-popover {
	max-width: unset;
}

div.data-filter-popover .filter-column.data-filter-text {
	min-width: 700px;
}

.dropdown-menu {
	z-index: 1050;
}

.popover.bs-popover-top {
	max-width: unset;
}

.value-group .value-container {
	width: unset !important;
}

.value-group:not(.in-mode) .value-container.in-value,
.value-group:not(.input-mode) .value-container.input-value {
	display: none;
}

.filter-groups:not(.value-count-1) .value-groups > .one-value-group,
.filter-groups:not(.value-count-2) .value-groups > .two-value-group {
	display: none;
}

.tables-view-header {
	gap: 15px;
	border: none;
	margin-bottom: 15px;
	padding: 0 !important;
}

.table-cpo-wrapper {
	display: flex;
	flex-direction: column;
}

.th-date-range-kw-labels {
	gap: 15px;
	display: flex;
}

.table-responsive {
}

table.data-table tbody > tr:hover {
	background-color: rgb(30 162 177 / 9%);
}

table.table.data-table.table-bordered.body.horizontal-left.fixation {
	box-shadow: rgba(0, 0, 0, 0.5) 8px 0 8px -8px !important;
}

table.table.data-table.table-bordered.body.horizontal-right.fixation {
	box-shadow: rgba(0, 0, 0, 0.5) -8px 0 8px -8px !important;
}

.week-info {
	gap: 15px;
	display: flex;
}

.week-info .week-dates {
	gap: 6px;
	display: flex;
}

.table-controls {
	flex: 1;
	gap: 15px;
	display: flex;
	justify-content: right;
}

button.border-radius-0 {
	border-radius: 0 !important;
}

th.th-duplicate {
	width: 1px;
}

body.filter-menu-opened {
	padding-right: 350px;
}

.filter-toggle {
	width: 34px;
	height: 34px;
	display: flex;
	flex-shrink: 0;
	cursor: pointer;
	transition: 0.2s;
	align-items: center;
	justify-content: center;
}

body .filter-toggle.filtered {
	color: tomato;
}

body.filter-menu-opened .filter-toggle {
	color: #fff;
	border-radius: 50% !important;
	background-color: var(--app-black);
}

body.filter-menu-opened .filter-toggle.filtered {
	color: tomato;
}

body.filter-menu-opened .cluster-filters {
	opacity: 1;
	pointer-events: unset;
	transform: translateX(0);
}

body .cluster-filters {
	position: fixed;
	overflow: hidden;
	overflow-y: auto;
	top: 53px;
	right: 0;
	bottom: 0;
	z-index: 10;
	opacity: 0;
	display: flex;
	width: 350px;
	transition: 0.2s;
	flex-direction: column;
	background-color: #fff;
	border-left: 1px solid #eee;
	padding: 16px;
	box-shadow: -7px 0 7px -7px rgba(0, 0, 0, 0.1) !important;
	transform: translateX(100%);
	pointer-events: none;
}

body .cluster-filter > div {
	margin-bottom: 10px !important;
}

.card {
	padding: 30px;
	border-radius: 15px !important;
}

.pagination-wrapper {
	padding: 0 !important;
	margin-top: 10px;
	background-color: #fff !important;
}

.card-header.d-flex.compare-table-view-header {
	padding: 0;
	margin-bottom: 15px;
	border: none;
}

.border.bg-white.d-flex.input-group-prepend.justify-content-center.pl-3 {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

ul.widgetlist ~ div.addable-controls:not(.adding) {
	opacity: 0;
}

ul.widgetlist {
	border: 1px solid #ddd;
}

.card-header.d-flex.justify-content-between.p-2 {
}

.card.card-cluster-items > .card-header {
	padding: 0 !important;
	margin-bottom: 15px;
	border: none;
}

.input-group-prepend {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.widgetlist.pageable-controls {
	padding: 0 !important;
	margin-top: 10px;
	border: none !important;
}

.card-header {
	padding: 0 !important;
	margin-bottom: 15px;
	border: 0 !important;
}

.card-group {
	gap: 5px;
	height: 100%;
}

.card-group > .card {
	border: none;
	height: 100%;
	overflow: hidden;
	padding: 0 25px 25px;
	border-radius: 15px !important;
}

.card-group > .card > .card-header
{
	position: relative;
	border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.12), #393939) !important;
	padding: 16px 0 8px 0 !important;
	line-height: 32px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 4;
}

.card-group > .card > .card-header > .card-header-title
{
	line-height: 32px;
	font-weight: bold;
	padding: 0 8px;
}

.card-group > .card > .card-header > .card-header-tool-bar
{
	display: flex;
	gap: 9px;
}

.card-group > .card > .card-header > .card-header-tool-bar button.card-header-tool-bar-item:hover,
.card-group > .card > .card-header > .card-header-tool-bar button.card-header-tool-bar-item:active
	/*.card-group > .card > .card-header > .card-header-tool-bar button.card-header-tool-bar-item:focus*/
{
	background-color: light-dark(#eeeeec, #323232);
}

.card-group > .card > .card-header > .card-header-tool-bar button.card-header-tool-bar-item[disabled]
{
	cursor: not-allowed;
	background-color: transparent !important;
}

.card-group > .card > .card-header > .card-header-tool-bar button.card-header-tool-bar-item
{
	width: 26px;
	height: 26px;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	transition: 0.2s;
	border-radius: 50%;
	outline: none;
}

button.card-header-tool-bar-item.adding
{
	background-color: light-dark(#eeeeec, #323232) !important;
}


button.card-header-tool-bar-item.unassigning
{
	background-color: light-dark(#eeeeec, #323232) !important;
}

div.widgetlist-wrapper {
	background-color: #fff;
}

div.widgetlist-wrapper > ul.widgetlist {
	border: none;
}

div.widgetlist-wrapper > ul.widgetlist > li.list-group-item {
	border: none;
	transition: background-color 0.2s;
}

div.widgetlist-wrapper > ul.widgetlist > li.list-group-item + li.list-group-item:not(.editing) {
	border-top: 1px solid #000;
}

ul.widgetlist.detailable > li > .detail {
	background-color: transparent;
}

ul.widgetlist.detailable > li.list-group-item.detailed,
div.widgetlist-wrapper > ul.widgetlist > li.list-group-item:hover {
	background-color: #d1ecff8a;
}

ul.widgetlist.detailable > li.detailed > .detail {
	color: #004e7e;
	background-color: transparent;
}

ul.widgetlist.has-detailed ~ div.pageable-controls,
ul.widgetlist.has-editing ~ div.pageable-controls,
ul.widgetlist.has-detailed ~ div.addable-controls:not(.adding) { /*display: flex !important;*/
}

div.widgetlist-wrapper.ul-has-detailed {
	height: 100%;
	min-height: 1px;
}

ul.widgetlist.detailable > li.list-group-item.detailed {
	color: #004e7e;
}

ul.widgetlist.ul-advertiser-network-program-list > li.list-group-item {
	gap: 15px;
	line-height: 21px;
}

li.page-item.first-spacer + li.disabled:not(.last-spacer),
li.page-item:not(.first-spacer) + li.disabled:not(.last-spacer) {
	display: none;
}

ul.pagination * {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50% !important;
}

ul.pagination, ul.pagination * {
	border: none;
}

.page-item.active .page-link {
	color: #000;
	outline: none;
	box-shadow: none;
	border-color: #6c757d;
	background-color: light-dark(#e7ebf8, rgba(255, 255, 255, 0.12));
}

.advertiser-description {
	font-weight: normal;
	font-size: small;
	color: var(--app-brown-medium);
}

ul.widgetlist > li > i.edit {
	background-color: transparent;
}

.widgetlist-wrapper.ul-has-editing > .widgetlist.pageable-controls {
	display: none !important;
}

ul.widgetlist.editable.has-editing > li.editing {
	border-bottom: 1px solid #000;
	background-color: #f2f5f78a;
}

ul.widgetlist.editable.has-editing > li.editing > i.edit-close {
	background-color: transparent;
	border: none;
	color: var(--app-color-12);
}

.hiding {
	display: none !important;
}

.card-group.editing .card-network-program, .card-group.editing .card-voucher {
	display: none;
}

.card-category-advertiser .category-advertiser-list-wrapper .advertiser-wrapper {
	margin-left: 10px;
}

.category-advertiser-list-wrapper li.list-group-item:not(.checked) > [data-control="dragger"] {
	display: none !important;
}

.card-group > .card > .card-header > .card-header-tool-bar button.card-header-tool-bar-item.toggled {
	background-color: light-dark(#eeeeec, #323232) !important;
	color: var(--app-color-21);
}

.category-advertiser-list-wrapper.dragging > [data-control="checkbox"] {
	pointer-events: none !important;
}

.card-group > .card-client {
	max-width: 33%;
}

.card-group > .card-types {
	max-width: 33%;
}

.card-group.access-type-domain .card-types[data-control="access-type-domain"],
.card-group.access-type-code .card-types[data-control="access-type-code"],
.card-group.access-type-token .card-types[data-control="access-type-token"] {
	display: flex !important;
}

.voucher-star {
	margin-right: 8px;
	color: #6c757d;
	cursor: pointer;
}

.voucher-star.favourite {
	color: #ffd700;
	cursor: pointer;
}

.ul-category-advertiser-list.reorder-mode li.list-group-item [data-control="checkbox"] {
	display: none !important;
}

.ul-category-advertiser-list.add-mode li.list-group-item [data-control="dragger"] {
	display: none !important;
}

.ul-category-advertiser-list.add-mode li.list-group-item {
	cursor: default !important;
}

.ul-category-advertiser-list.reorder-mode li.list-group-item [data-control="dragger"] {
	display: inline-block !important;
}

.category-category-advertiser-list-wrapper:not(.adding):not(.unassigning) [data-control="check"],
.category-category-advertiser-list-wrapper.adding .ui-sortable-handle,
.category-category-advertiser-list-wrapper.adding .detail,
.category-category-advertiser-list-wrapper.unassigning .ui-sortable-handle,
.category-category-advertiser-list-wrapper.unassigning [data-control="detail"] {
	display: none !important;
}

.category-category-advertiser-list-wrapper [data-control="check"] {
	margin-right: 8px !important;
}