@import './color';
@import './mixins';

.grey-rows {
	background-color: $aeap-color-grey !important;
}

.light-grey-rows {
	background-color: $aeap-color-light-grey-white !important;
}

.ag-theme-alpine .ag-details-row {
	.ag-root-wrapper {
		.ag-root-wrapper-body {
			.ag-root {
				.ag-header {
					height: 0 !important;
					min-height: 0 !important;
				}
			}
		}
	}
}

.ag-cell-override-italic {
	color: $aeap-color-black-thin !important;
	font-family: 'NotosansFont', Fallback, sans-serif !important;
	font-style: italic !important;
	text-align: right;
}

.notosans-overwrite {
	font-family: 'NotosansFont', Fallback, sans-serif !important;
}

.ag-background-gradient {
	background: linear-gradient(90deg, rgba(18, 38, 63, 0.15) 0%, rgba(18, 38, 63, 0) 100%);
}

.ag-row-hover:not(.ag-row-selected) {
	background-color: transparent !important;
}

.ag-current-date {
	border-bottom: 0.3rem solid $aeap-color-blue !important;
}

.ordering-grid {
	.ag-header-group-cell-with-group:not(:last-child) {
		border-right: 0.1rem solid $aeap-color-black-thin !important;
	}
}

.ag-border-week-separator {
	border-right: 0.1rem solid $aeap-color-black-thin !important;
}

.ag-cell-override-normal {
	color: $aeap-color-black !important;
	font-family: 'NotosansFont', Fallback, sans-serif !important;
	font-weight: 400 !important;
	text-align: right;
}

.ag-cell-override-bold {
	color: $aeap-color-black;
	font-family: 'NotosansFont', Fallback, sans-serif !important;
	font-weight: 600 !important;
	text-align: right;
}

.ag-cell-bordered-left-promotional-events {
	border-left: 5px solid $aeap-promotional-events !important;
}

.ag-cell-bordered-left-manual-events {
	border-left: 5px solid $aeap-manual-events !important;
}

.ag-cell-bordered-left-miscelleneous-events {
	border-left: 5px solid $aeap-miscelleneous-events !important;
}

.ag-cell-bordered-left-lifecycle-events {
	border-left: 5px solid $aeap-lifecycle-events !important;
}

.ag-cell-background-editable {
	background: $aeap-cp-editable !important;
}

.ag-cell-background-locked {
	background: $aeap-cp-locked !important;
}

.ag-edited {
	color: $aeap-color-blue-royal !important;
	font-style: italic !important;
	font-weight: 500 !important;
}

ng-sidebar {
	::ng-deep aside {
		background-color: $aeap-side-bar-bg;
	}
}

.regular-side-bar {
	z-index: $zindex-4 !important;
}

.selected-font {
	font-weight: bold !important;
}

.selected-icon {
	color: $aeap-side-bar-icon-color-active !important;
}

.ag-theme-alpine .ag-cell-inline-editing {
	background: $aeap-color-white;
	border: 0;
	border-color: $aeap-border-dark !important;
	box-shadow: 0 0.1rem 0.4rem 0.1rem rgba(186, 191, 199, 0);
	.ag-cell-edit-wrapper {
		.ag-cell-editor {
			.ag-input-wrapper {
				input {
					border: 0.1rem dashed $aeap-color-primary;
					color: $aeap-color-primary;
					text-align: right;
					&:focus {
						box-shadow: none;
					}
				}
			}
		}
	}
}

.ag-root ::-webkit-scrollbar {
	height: 1rem !important;
	width: 1rem !important;
}

.ag-root ::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 0.1rem $aeap-scrollbar-box-shadow !important;
	box-shadow: inset 0 0 0.1rem $aeap-scrollbar-box-shadow !important;
}

.ag-root ::-webkit-scrollbar-thumb {
	background-color: $aeap-color-grey-1 !important;
	border-radius: 1rem !important;
	outline: 0.1rem solid $aeap-border-divider !important;
}

.ag-icon-tree-open {
	color: $aeap-color-light-blue !important;
	font-size: 16px !important;
	font-weight: 900 !important;
}

.ag-icon-tree-closed {
	color: $aeap-color-light-blue !important;
	font-size: 16px !important;
	font-weight: 900 !important;
}

.m-h-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.p-h-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.p-h-32 {
	padding-left: 3.2rem !important;
	padding-right: 3.2rem !important;
}

.p-v-12 {
	padding-bottom: 1.2rem !important;
	padding-top: 1.2rem !important;
}

.modal-table-custom {
	border: 0.1rem solid $aeap-color-black;
	max-width: 60rem !important;
	top: 5% !important;
	width: 60rem !important;
}

.modal-feature-custom {
	border: 0.1rem solid $aeap-color-black;
	max-width: 50rem !important;
	top: 5% !important;
	width: 50rem !important;
}

.modal-anomaly-custom,
.modal-comments-custom,
.modal-confirm-custom {
	border: 0.1rem solid $aeap-color-black;
	max-width: 54.4rem !important;
	top: 5% !important;
	width: 54.4rem !important;
}

.modal {
	& ::-webkit-scrollbar {
		height: 1rem !important;
		width: 1rem !important;
	}

	& ::-webkit-scrollbar-thumb {
		background: $aeap-color-grey-1 !important;
		border-radius: 1rem !important;
	}

	& ::-webkit-scrollbar-track {
		background: $aeap-color-white !important;
	}
}

.comments-modal-container {
	max-height: 70rem !important;
	min-height: 30rem !important;
	overflow-y: auto;
}

.modal-add-promo-custom {
	border: 0.1rem solid $aeap-color-black;
	max-width: 120rem !important;
	top: 2% !important;
	width: 120rem !important;
}

.modal-run-as-scenario-custom {
	border: 0.1rem solid $aeap-color-black;
	max-height: $run-as-scenario-modal-max-height;
	max-width: $run-as-scenario-modal-width;
	width: $run-as-scenario-modal-width;
}

.modal-dialog {
	&.modal-view-only-custom {
		max-width: 80.5%;
		padding: 0 25px;
	}

	&.assignment-modal {
		margin: 5.75rem auto;
		max-width: 52.7rem;
	}
}

.price-range {
	.slider {
		.bar {
			background: none !important;
			box-shadow: none !important;
			height: 3.2rem !important;
			.filler {
				background-color: $aeap-color-white !important;
				border: 0.1rem solid $aeap-border-light !important;
				border-radius: 0 !important;
				height: 1.6rem !important;
			}

			.filler > span {
				background-color: $aeap-border-dark !important;
			}

			.left-handle,
			.right-handle {
				background: transparent !important;
				border: 0 !important;
				border-bottom: 0.8rem solid transparent !important;
				border-radius: 0 !important;
				height: 3.2rem !important;
				top: 0 !important;
				width: 0 !important;

				.handle-tooltip {
					background-color: $aeap-border-dark !important;
					border: 0.1rem solid $aeap-color-blue !important;
					color: $aeap-color-blue !important;

					&::before {
						border-top-color: $aeap-color-blue !important;
					}

					&::after {
						border-top-color: $aeap-border-dark !important;
					}
				}
			}

			.left-handle {
				border-right: 1.6rem solid $aeap-color-blue !important;
			}

			.right-handle {
				border-left: 1.6rem solid $aeap-color-blue !important;
			}
		}

		.values {
			margin-left: -0.4rem !important;
			margin-top: -5.2rem !important;
			width: 104% !important;
		}
	}
}

.load-scenario-modal {
	max-width: 55rem !important;
}

.planner-modal-container {
	border: 0.1rem solid $aeap-color-black;
	max-width: $planner-modal-width;
	min-width: $planner-modal-width;
	width: $planner-modal-width;
}

.share-modal-container {
	border: 0.1rem solid $aeap-color-black;
	max-width: $share-modal-width;
	min-width: $share-modal-width;
	width: $share-modal-width;
}

.link-color {
	color: $aeap-color-primary !important;
}

// buttons styles

.btn {
	border-radius: 0.3rem !important;
	font-family: 'NunitoFont', Fallback, sans-serif;
	font-size: 1.6rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	padding: 1rem 3.2rem !important;
	white-space: nowrap !important;
	&.btn-sm {
		padding: 0.701rem 3.2rem !important;
	}

	&.btn-primary {
		&:active {
			background: $aeap-color-bright-blue !important;
			border-color: $aeap-color-bright-blue !important;
		}
	}

	&.btn-secondary,
	&.btn-primary-bgdark {
		&:active {
			background: $aeap-color-bright-blue !important;
			border-color: $aeap-color-bright-blue !important;
			color: $aeap-color-white !important;
		}

		&:disabled,
		&.disabled {
			background: $aeap-color-white !important;
			border-color: $aeap-color-primary !important;
			color: $aeap-color-primary !important;
			cursor: not-allowed;
			opacity: 0.33;
		}
	}
}

.btn-light {
	background: $aeap-color-white !important;
	border-color: $aeap-color-white !important;
	color: $aeap-color-primary !important;
}

.btn-link-white {
	color: $aeap-color-white !important;
}

.btn-outline-primary {
	border-color: $aeap-color-primary !important;
	color: $aeap-color-primary !important;
	&:hover {
		background-color: $aeap-color-white !important;
	}
}

.btn-cancel {
	@extend %btn-as-link;
	color: $aeap-link !important;
}

.btn-apply {
	@extend %btn-as-link;
	color: $aeap-active-link !important;
}

// button styles end here
body .bs-datepicker-container .bs-datepicker-head {
	background-color: $aeap-color-white;
}

body .bs-datepicker-container .bs-datepicker-head * {
	color: $aeap-color-black;
}

body .bs-datepicker-container {
	padding: 0 !important;
}

body .bs-datepicker-body {
	table {
		td {
			span.selected {
				background-color: $aeap-color-primary !important;
			}
		}
	}
}

.btn-primary.disabled,
.btn-primary:disabled {
	background-color: $aeap-color-primary !important;
	border-color: $aeap-color-primary;
	color: $aeap-color-white;
}

span.link-disabled,
button.link-disabled {
	color: $aeap-color-dark-grey !important;
	cursor: default;
}

.btn.disabled,
.btn:disabled {
	opacity: 0.33 !important;
}

.main-title {
	.compare-tabs {
		border: 0.1rem solid $aeap-color-light-grayish-blue !important;
	}
}

.text-sm {
	font-size: 1.2rem !important;
}

.dropdown-label {
	&.error {
		border: 0.1rem solid $aeap-color-danger-icon !important;
	}
}

label,
.label {
	line-height: 1;
	margin-bottom: 0.8rem !important;
	text-transform: capitalize;
}

.ag-rich-select-list {
	height: 100% !important;
	min-width: 10rem !important;
}

.ag-right-align {
	text-align: right;
}

.ag-bg-success {
	background: $aeap-light-grid-green;
}

.comment-added,
.comment-deleted {
	color: $aeap-color-success !important;
	.separator {
		display: none;
	}

	.close-action {
		color: $aeap-color-white !important;
		position: absolute;
		right: 1%;
	}
}

.hide-element.d-flex {
	display: none !important;
}

.order-error-icon {
	background-color: $aeap-color-danger;
}

.comment-error {
	background-color: $aeap-color-white;
	color: $aeap-color-danger !important;
	.separator {
		display: none;
	}

	.close-action {
		color: $aeap-color-danger !important;
		position: absolute;
		right: 1%;
	}
}

.accuracy-component {
	.card-content {
		padding-top: 1.6rem !important;
	}
}

.ag-theme-alpine .ag-ltr .ag-cell-range-single-cell {
	border-right: 0.1rem solid $aeap-color-cell-selection !important ;
}

.accountplan-modal-container {
	background: $aeap-color-white;
	border: 0.1rem solid $aeap-color-black;
	box-sizing: border-box;
	height: $accountplan-modal-height;
	max-height: $accountplan-modal-height;
	max-width: $accountplan-modal-width;
	min-height: $accountplan-modal-height;
	min-width: $accountplan-modal-width;
	width: $accountplan-modal-width;
}

.promotion-modal-container {
	background: $aeap-color-white;
	border: 0.1rem solid $aeap-color-black;
	box-sizing: border-box;
	max-width: $promotion-modal-width;
	min-height: $promotion-modal-height;
	min-width: $promotion-modal-width;
	width: $promotion-modal-width;
}

.category-modal-container {
	background: $aeap-color-white;
	border: 0.1rem solid $aeap-color-black;
	box-sizing: border-box;
	max-width: $promotion-modal-width;
	min-height: $promotion-modal-height;
	min-width: $promotion-modal-width;
	width: $promotion-modal-width;
}

ul.mobile-center {
	@include screen-mobile {
		margin: 0 auto !important;
	}
}

.ag-current-date-cp {
	border-bottom: 0.6rem solid $aeap-color-blue !important;
}

.planning-workbook-comment-modal {
	background: #fff;
	border: 0.1rem solid $aeap-color-black;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	max-height: 72rem;
	max-width: 60rem !important;
	width: 60rem !important;
}

.delete-comment-modal {
	height: 159px !important;
	max-height: 159px !important;
	max-width: 426px !important;
	top: 100px;
	width: 426px !important;
}

.planning-workbook-transform-modal {
	border: 0;
	max-width: 41rem !important;
}

.ag-current-date-cp {
	border-bottom: 0.6rem solid $aeap-color-blue !important;
}

.planning-workbook-comment-modal {
	background: #fff;
	border: 0.1rem solid $aeap-color-black;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	max-height: 72rem;
	max-width: 60rem !important;
	width: 60rem !important;
}

.delete-comment-modal {
	height: 159px !important;
	max-height: 159px !important;
	max-width: 426px !important;
	top: 100px;
	width: 426px !important;
}

.icon-color-toolbar-blue-primary {
	color: $aeap-color-light-blue !important;
	transition: color 0.5s ease-in-out;
}

.ag-root {
	::-webkit-scrollbar {
		height: 1em;
		width: 1em;
	}

	::-webkit-scrollbar-thumb {
		background: $aeap-color-light-bluish-grey !important;
		border-radius: 1.6rem;
	}

	​ ::-webkit-scrollbar-button {
		background: $aeap-color-light-bluish-grey;
	}

	::-webkit-scrollbar-track-piece {
		background: transparent;
	}
}

.multi-button-toast-container.w-46 {
	width: 46% !important;
}

.add-assignment {
	& .dropdown-label {
		height: 4.8rem !important;
		line-height: 4.8rem !important;
	}

	& .dropdown-options {
		color: $aeap-color-darker-grey !important;
	}

	.dropdown {
		& button {
			&::after {
				right: 1.7rem !important;
			}
		}
	}
}

ngx-dropdown-treeview {
	.dropdown-toggle {
		border: 0.1rem solid $aeap-color-silver;
		color: $aeap-color-darker-grey;
		height: 4.8rem;
		&:hover {
			background-color: $aeap-color-white;
			color: $aeap-color-black;
		}
	}

	.dropdown {
		& .btn {
			padding-left: 1.6rem !important;
			& ::after {
				right: 1.6rem;
			}
		}
	}

	.show {
		& > .btn-outline-secondary {
			&.dropdown-toggle {
				background-color: $aeap-color-white;
				color: $aeap-color-black;
			}
		}
	}

	.dropdown-menu {
		font-size: 1.6rem;
		padding-left: 1.2rem;
		padding-right: 2.4rem;
		width: 100%;
		& .form-check-input {
			margin-right: 1.8rem;
			width: 1.6rem;
		}

		& .form-check-label {
			display: inline-block;
			margin-top: 0.8rem;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 11rem;
			word-break: break-word;
		}

		&.dropdown-divider {
			border-color: $aeap-color-light-greyish-white;
		}

		& svg {
			height: 1.6rem;
			width: 1.6rem;
		}

		& .row-filter {
			& .col-12 {
				display: inline-flex;
				flex-basis: 96%;
				&::after {
					content: '\f002';
					display: inline-block;
					font-family: 'Font Awesome 5 Free';
					left: 2rem;
					position: relative;
					top: 1.8rem;
				}
			}

			& .form-control {
				border: 0;
				font-size: 1.6rem;
				height: 4rem;
				&:focus {
					box-shadow: none;
					outline: none;
				}
			}
		}
	}
}

// height for charts in Cp

.chart-selected .chart-class {
	height: 65vh !important;
}

@media only screen and (max-width: 1440px) {
	.chart-selected .chart-class {
		height: 50vh !important;
	}
}

.promotion-copy-modal-container {
	background: $aeap-color-white;
	border: 0.1rem solid $aeap-color-black;
	box-sizing: border-box;
	height: $promotion-copy-modal-height;
	max-height: $promotion-copy-modal-height;
	max-width: $promotion-copy-modal-width;
	min-width: $promotion-copy-modal-width;
	width: $promotion-copy-modal-width;
}

.dropdown-promotion-container {
	& .multiselect-dropdown {
		width: 25rem;

		& .dropdown-label {
			background-color: $aeap-color-white;
			height: 4.8rem !important;
			line-height: 4.8rem !important;
			padding: 0 1.6rem 0 1.6rem;
		}

		& .dropdown-options {
			color: $aeap-color-black;
		}
	}
}

.multiselect-container {
	.multiselect-block {
		& .multiselect-dropdown {
			& .dropdown-label {
				background-color: $aeap-color-white;
				height: 4.8rem !important;
				line-height: 4.8rem !important;
				padding: 0 1.6rem 0 1.6rem;
			}

			& .dropdown-options {
				color: $aeap-color-black;
			}
		}
	}
}

.ag-scroller-corner {
	max-width: 0 !important;
	min-width: 0 !important;
	width: 0 !important;
}

// Styling for the New Order Planner here
.order-planner-new .ag-theme-alpine .ag-header-cell, .ag-theme-alpine .ag-header-group-cell {
  padding-left: 4px !important;
  padding-right: 4px !important;;
}

.ag-icon-asc {
  display: none !important;
}