@charset "UTF-8";

/* Termly Logo Font */
@font-face {
	font-family: "termly";
	src:url("../fonts/termly.eot");
	src:url("../fonts/termly.eot?#iefix") format("embedded-opentype"),
		url("../fonts/termly.woff") format("woff"),
		url("../fonts/termly.ttf") format("truetype"),
		url("../fonts/termly.svg#termly") format("svg");
	font-weight: normal;
	font-style: normal;
}

/* Termly menu icon */
#toplevel_page_termly div.wp-menu-image img {
	display: none;
}
#toplevel_page_termly div.wp-menu-image:before {
	content: 'u';
	font-family: 'termly' !important;
}

// Header
.termly-content-header {
	align-items: center;
	border-bottom: 1px solid $color_gray;
	display: flex;
	flex-wrap: wrap;
	padding: 10px 20px;

	> * {
		padding: 10px 0;
	}

	> svg {
		height: 35px;
		width: 35px;
	}

	h1 {
		margin: 0 0 0 14px;
		padding: 0;
	}

	.grower {
		flex-grow: 1;
	}


	.page-title-action {
		@include primary-button;
		align-items: center;
		display: flex;
		font-weight: 400;
		margin: 0 0 0 20px;
		position: static;

		&:active,
		&:focus,
		&:hover {
			@include primary-button;
			align-items: center;
			display: flex;
			font-weight: 400;
			margin: 0 0 0 20px;
			position: static;
		}

		svg {
			margin-right: 8px;
		}

		&.scan-now {

			svg {
				height: 18px;
				width: 18px;
			}
		}

		&.new-cookie {

			svg {
				height: 12px;
				width: 12px;
			}
		}
	}

	.termly-dashboard-link-container {
		text-align: right;

		a {
			color: $color_primary;
			font-size: 1rem;
			text-decoration: none;

			&.customize-banner-link {
				@include primary-button();
				display: flex;
				padding: 10px 22px 10px;

				span {
					color: #fff;
					padding-top: 2px;
				}

				svg {
					height: 24px;
					margin-right: 8px;
					margin-left: 0;
					width: 24px;
				}
			}

			span {
				font-weight: 500;
			}

			svg {
				margin-left: 12px;
				height: 13px;
				width: 10px;
			}
		}
	}
}

// Termly Logo
.termly:not(.wp-list-table) {

	padding-top: 10px;

	.submit {
		margin-top: 0;

		input[type=submit],
		button,
		a {
			@include primary-button;
			border: 1px solid $color_primary;
			line-height: 2.3;

			&:active,
			&:focus,
			&:hover {
				@include primary-button;
				border: 1px solid $color_primary;
				line-height: 2.3;
			}
		}
	}

	.termly-left-column {
		background-color: $color_white;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
		margin-top: 20px;
		width: 100%;

		.content {
			padding: 30px 40px 0;
		}

	}

	.banner,
	.notice {
		margin: 10px 40px;
		padding: 20px;

		&.notice-warning,
		&.notice-success,
		&.notice-error {
			background-color: #f0f4ff;
			border: none;
			border-radius: 3px;
			margin: 10px 20px;
			position: relative;
			width: auto;

			&:before {
				background-image: url('../images/alert.png');
				background-position: left center;
				background-repeat: no-repeat;
				content: '';
				height: 22px;
				left: 20px;
				position: absolute;
				top: 20px;
				width: 22px;
			}

			p {
				margin: 0;
				padding-left: 30px;
			}
		}

		&.notice-success {
			background-color: #f5fff5;

			&:before {
				background-image: none;
				color: #6de398;
				content: "\f12a";
				font-family: "dashicons";
				font-size: 22px;
				height: 22px;
				left: 22px;
				top: 22px;
				width: 22px;
			}

			p {
				padding-left: 30px;
			}
		}

		&.notice-error {
			background-color: #fbeaea;

			&:before {
				background-image: none;
				color: #dc3232;
				content: "\f534";
				font-family: "dashicons";
				font-size: 22px;
				height: 22px;
				left: 22px;
				top: 22px;
				width: 22px;
			}

			p {
				padding-left: 30px;
			}
		}

		.note {
			font-weight: 500;
		}

		p {
			margin-bottom: 20px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		ul,
		ol {
			list-style: none;

			li {
				position: relative;

				&:before {
					background-image: url('../images/check.png');
					background-position: center;
					background-repeat: no-repeat;
					content: '';
					height: 20px;
					left: -26px;
					position: absolute;
					top: 0;
					width: 20px;
				}
			}
		}

		a {

			&.button {
				@include primary-button;
			}
		}

		input {
			border-radius: 3px;

			&.button {
				background-color: $color_white;
				border-color: $color_primary;
				color: $color_primary;
			}
		}

		.required {
			color: $color_primary;
		}
	}

	ol {
		list-style: none;

		li {
			position: relative;

			&:before {
				background-image: url(../images/check.svg);
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				content: '';
				height: 16px;
				left: -2em;
				position: absolute;
				top: 0;
				width: 16px;
			}
		}
	}

	.button.button-primary {
		@include primary-button();
		border: 1px solid $color_primary;
		line-height: 2.3;

		&:active,
		&:focus,
		&:hover {
			border: 1px solid $color_primary;
			line-height: 2.3;
		}
	}

	.termly-existing-user {

		> form {
			display: flex;

			> .form-table {
				margin: 0;
				width: auto;
			}

			table,
			tbody,
			tr,
			td,
			input {
				display: block;
			}

			input {
				line-height: 45px;
				width: 100%;
			}
		}

		td {
			padding: 0 0 24px;
		}

		p {

			&.submit {
				margin-left: 10px;

				input {
					@include primary-button();
					background: transparent;
					border: 1px solid $color_primary;
					color: $color_primary;

					&:active,
					&:focus,
					&:hover {
						background-color: $color_primary;
						border: 1px solid $color_primary;
						color: $color_white;
					}
				}
			}

			&.disconnect {
				clear: both;

				a {
					&.button {
						background-color: $color_white;
						border-color: $color_primary;
						color: $color_primary;
					}
				}
			}

			&.additional-information {
				clear: both;
			}
		}
	}

	.termly-new-user,
	.termly-business-settings {

		.submit {
			margin-top: 0;

			input[type=submit] {
				@include primary-button;
			}
		}

		.termly-form {
			padding: 1em 0;
			width: 85%;
		}

		th {
			display: none;
		}

		td {
			padding: 0;
		}

		fieldset {
			clear: both;
			margin-bottom: 10px;

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
			}
		}

		label {}

		input[type=text],
		input[type=email],
		input[type=password],
		select,
		textarea {
			border-color: #bababa;
			line-height: 1;
			max-width: 65%;
			min-width: 65%;
			padding: 8px 13px;
			width: 65%;
		}

		input[type=text]::placeholder,
		input[type=email]::placeholder,
		input[type=password]::placeholder {
			color: #bababa;
		}
	}

	.notice {
		margin: 10px 0;
	}

	&.termly-logged-out .termly-existing-user {

		th {
			display: none;
		}

		tr:nth-child(1) {
			display: none;
		}

	}

	.termly-notice {
		display: inline-block;
		margin: 20px 0;
		padding: 20px;

		&.termly-notice-warning {
			background-color: #f0f4ff;
			border-radius: 3px;
			position: relative;
			width: auto;

			&:before {
				background-image: url('../images/alert.png');
				background-position: left center;
				background-repeat: no-repeat;
				content: '';
				height: 22px;
				left: 20px;
				position: absolute;
				top: 20px;
				width: 22px;
			}

			p {
				color: #6D7893;
				font-size: 0.75rem;
				font-weight: 400;
				margin: 0;
				padding-left: 30px;
			}
		}

	}

	.tablenav {

		.button {

			@include primary-button;
			font-size: 13px;
			padding: 0 20px;

			&:active,
			&:focus,
			&:hover {
				@include primary-button;
				font-size: 13px;
				margin: 0;
				padding: 0 20px;
			}

		}
	}
}

// Form styles
.termly-new-user,
.termly-business-settings,
.termly-edit-cookie {

	.form-table {

		.termly-form {

			background-color: #fff;
			padding: 1em;
			width: 27em;

			fieldset {
				padding-bottom: 10px;
			}

			label {
				color: #000;
				display: block;
			}

		}
	}

}

// Site Scan
.termly-site-scan {

	.termly-last-scanned {
		color: $color_text_light;
		font-size: 0.8rem;
		margin-left: 0;
	}

	label[for="termly-site-scan-frequency"] {
		display: inline-block;
		margin-top: 12px;
	}
}

// Cookie Management
.termly .termly-left-column .content.cookie-management {
	padding-bottom: 40px;

	input#search-submit,
	.tablenav-pages .button {
		background-color: $color_white;
		border-color: $color_primary;
		color: $color_primary;

		&:active,
		&:focus,
		&:hover {
			background-color: $color_primary;
			color: $color_white;
		}
	}

	.tablenav-pages {
		align-items: center;
		display: flex;
		margin: 24px 0 16px;

		.button {
			padding: 0 10px;

			&:active,
			&:focus,
			&:hover {
				padding: 0 10px;
			}
		}

		.pagination-links {
			align-items: center;
			display: flex;

			#table-paging {
				margin: 0 0 0 6px;
			}

			> span,
			> a {
				margin-left: 6px;
			}

			.button,
			input {
				border-radius: 3px;
			}

			.button {
				font-size: 18px;
				line-height: 24px;
			}
		}
	}

	.actions {
		padding-bottom: 20px;
	}

	.tablenav.bottom {
		margin-top: 12px;

		> div {
			margin-top: 0;
		}
	}
}

// Add/edit cookie
.termly.termly-edit-cookie .termly-left-column {

	.termly-form {
		padding: 1em 0;
		width: 85%;
	}

	th {
		display: none;
	}

	td {
		padding: 0;
	}

	fieldset {
		clear: both;
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0;
			padding-bottom: 0;
		}
	}

	label {}

	input[type=text],
	input[type=email],
	input[type=password],
	select,
	textarea {
		border-color: #bababa;
		line-height: 1;
		max-width: 65%;
		min-width: 65%;
		padding: 8px 13px;
		width: 65%;
	}

	input[type=text]::placeholder,
	input[type=email]::placeholder,
	input[type=password]::placeholder {
		color: #bababa;
	}

	span.required {
		color: $color_primary;
	}

	p.submit {
		margin-top: 20px;

		> * {
			line-height: 2.3;

			&:active,
			&:focus,
			&:hover {
				line-height: 2.3;
			}
		}

		> a,
		> button {
			background: transparent;
			color: $color_primary;
		}

		> a {
			border: none;
			outline-color: $color_primary;
			margin-right: 12px;
		}

		> button {
			border-color: $color_primary;
			color: $color_primary;
			margin-right: 12px;

			&:active,
			&:focus,
			&:hover {
				background-color: $color_primary;
				color: $color_white;
			}
		}
	}
}

// Banner Settings
.termly .termly-left-column .content.banner-settings {

	.consent-banner-heading {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20px;

		h2 {
			font-weight: 500;
			margin-bottom: 0;
			margin-right: 16px;
		}

		p {
			margin-bottom: 0;
		}

		a {
			@include primary-button();
			align-items: center;
			display: flex;
			padding-left: 10px;

			svg {
				height: 24px;
				margin-right: 8px;
				width: 24px;
			}
		}
	}

	#termly-auto-block.active {
		margin-bottom: 20px;
	}

	#termly-custom-blocking-map,
	#termly-custom-blocking-map-fields {
		display: none;

		&.active {
			display: block;
		}
	}

	textarea::placeholder {
		color: #bababa;
	}

	.preference-center-snippet {
		background-color: #f5f8fc;
		border: 1px solid #ced4da;
		border-radius: 3px 3px 0 0;
		margin-bottom: 40px;

		.preference-center-header {
			align-items: flex-start;
			background-color: #fff;
			border-bottom: 1px solid #ced4da;
			display: flex;
			flex-wrap: wrap;
			padding: 5px 5px 5px 10px;
			justify-content: space-between;
			vertical-align: middle;

			h2 {
				color: #8B93A7;
				font-size: 0.875rem;
				line-height: 1rem;
				margin: 0;
				padding-top: 10px;
				text-transform: uppercase;
			}
		}

		.preference-center-button-code {
			font-family:'Courier New', Courier, monospace;
			padding: 20px;
		}

		button {
			@include primary-button();
			background-color: $color_white;
			border-color: $color_primary;
			color: $color_primary;
			cursor: pointer;
		}
	}
}

// Policies
.termly .termly-left-column .content.policies {
	padding-bottom: 26px;

	> p {
		margin-bottom: 24px;
	}

	.policy-block {
		align-items: center;
		border: 1px solid $color_gray;
		border-radius: 3px;
		display: flex;
		margin-bottom: 24px;
		padding: 26px 40px 26px 26px;

		.policy-left {
			flex-grow: 1;
			margin-right: 30px;

			p {
				margin-bottom: 0;
			}
		}

		.policy-header-container {
			align-items: center;
			display: flex;
			margin-bottom: 14px;

			svg {
				margin-right: 16px;
			}

			h2 {
				margin: 0;
			}
		}

		p.policy-right {
			margin-bottom: 0;

			a {
				@include primary-button();
				display: flex;
				padding: 10px 22px 10px;

				span {
					color: #fff;
					padding-top: 2px;
				}

				svg {
					height: 24px;
					margin-right: 8px;
					width: 24px;
				}
			}
		}
	}
}

// The main admin content area
.termly-content-wrapper {
	display: table;
	table-layout: fixed;
	width: 100%;

	h2.title {
		margin: 0 0 20px;
	}

	p {
		margin: 0 0 40px;

		a {
			text-decoration: underline
		}

		&.submit {
			padding: 0;
		}
	}

	p a,
	th a,
	td a {
		color: $color_primary;
	}

	table:not(.wp-list-table) {
		margin: 0;

		th,
		td {
			padding-bottom: 20px;
			padding-top: 0;
		}
	}

	.termly-content-cell {
		display: table-cell;
		margin: 0;
		padding: 0;
		vertical-align: top;
	}

	.termly-left-column {
		width: 100%;
	}

	.termly-right-column {
		width: 300px;
		padding-left: 20px;
	}

	input,
	select,
	textarea {

		&:focus {
			border-color: $color_primary;
		}
	}

	input#submit {
		line-height: 2.3;
	}

	select {

		&:focus,
		&:hover {
			color: $color_black;
		}
	}

	label.checkbox-container {
		align-items: center;
		display: flex;

		input[type="checkbox"] {
			height: 1em;
			opacity: 0;
			position: absolute;
			width: 1em;

			+ svg {
				height: 24px;
				width: 24px;
			}

			+ svg + span {
				display: inline-block;
				padding-left: 12px;
				position: relative;
			}

			&:active,
			&:focus,
			&:hover {

				+ svg .border {
					stroke: $color_primary;
				}
			}

			&:disabled {

				+ svg .border {
					stroke: #CED4DA;
				}

				+ svg + span {
					opacity: 0.5;
				}
			}

			+ svg .checkmark {
				visibility: hidden;
			}

			&:checked + svg .checkmark {
				visibility: visible;
			}
		}
	}

	.termly-account-page-field-wrapper {
		align-items: center;
		display: flex;
		flex-wrap: wrap;

		input {
			margin-right: 12px;
			max-width: 500px;
			min-width: 500px;
		}

		a {
			color: $color_black;
			margin: 12px 0;
		}
	}
}

// Upgrade sidebar
.termly-upgrade-sidebar,
.termly-consent-sidebar,
.termly-review-sidebar,
.termly-wp-rocket-sidebar {
	background-color: #ffffff;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	margin-bottom: 20px;
	max-width: 260px;
	padding: 20px;
	width: 100%;

	#termly-consent-toggle-setting-error {
		background-color: #f5fff5;
		border: none;
		border-radius: 3px;
		display: none;
		padding: 20px;
		margin-bottom: 20px;
		position: relative;
		width: auto;

		&:before {
			background-image: none;
			color: #6de398;
			content: "\f12a";
			font-family: "dashicons";
			font-size: 22px;
			height: 22px;
			left: 22px;
			position: absolute;
			top: 22px;
			width: 22px;
		}

		p {
			margin: 0;
			padding-left: 30px;
		}

		&.notice-error {
			background-color: #fbeaea;

			&:before {
				background-image: none;
				color: #dc3232;
				content: "\f534";
				font-family: "dashicons";
				font-size: 22px;
				height: 22px;
				left: 22px;
				top: 22px;
				width: 22px;
			}

			p {
				padding-left: 30px;
			}
		}

		p {
			margin-bottom: 20px;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	h2 {
		color: #212529;
		margin-top: 0;
	}

	h2 {
		font-size: 1.0625rem;
	}

	ul,
	ol {
		background-color: #f7f9ff;
		list-style: none;
		padding: 20px 20px 20px 40px;

		li {
			position: relative;

			&:before {
				background-image: url('../images/check.png');
				background-position: center;
				background-repeat: no-repeat;
				content: '';
				height: 20px;
				left: -26px;
				position: absolute;
				top: 0;
				width: 20px;
			}
		}
	}

	.termly-stars {
		margin-bottom: 0;

		.dashicons-star-filled {
			padding-right: 5px;

			&:before {
				color: #2dd1a4;
				font-size: 1.475rem;
			}
		}

	}

	.upgrade-plan-links {
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	a {

		&.compare-plans {
			color: $color_black;
			text-decoration: none;
		}

		&.termly-button {
			background-color: #2dd1a4;
			border-radius: 3px;
			color: #ffffff;
			display: inline-block;
			font-size: 15px;
			margin: 10px 0;
			padding: 12px 15px;
			text-decoration: none;
		}

	}

}

// Consent Banner Toggle
.termly-consent-sidebar {
	padding-top: 20px;

	.consent-header {
		margin-bottom: 15px;

		span.title {
			color: #212529;
			font-size: 1.0625rem;
			font-weight: 500;
			vertical-align: middle;
		}

	}

	// Sizing.
	$toggle-indicator-size: 16px;
	$track-height: $toggle-indicator-size + 6;
	$track-width: $toggle-indicator-size * 2.5;
	$highContrastModeSupport: solid 2px transparent;

	// Colors - Off.
	$inactive-color: #363840;
	$inactive-focus-ring: 0px 0px 0px 2px $inactive-color;

	// Colors - On.
	$active-color: #3F6AF8;
	$active-focus-ring: 0px 0px 0px 2px $active-color;

	// Toggle specific styles
	.toggle {
		align-items: center;
		border-radius: 100px;
		display: flex;
		font-weight: 700;
		margin-bottom: 16px;

		&:last-of-type {
			margin: 0;
		}
	}

	// Since we can't style the checkbox directly, we "hide" it so we can draw the toggle.
	.toggle__input {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;

		// This style sets the focus ring. The ":not([disabled])" prevents the focus ring from creating a flash when the element is clicked.
		&:not([disabled]):active + .toggle-track,
		&:not([disabled]):focus + .toggle-track {
			border: 1px solid transparent;
			box-shadow: $inactive-focus-ring;
		}
		&:not([disabled]):active:checked + .toggle-track,
		&:not([disabled]):focus:checked + .toggle-track {
			border: 1px solid transparent;
			box-shadow: $active-focus-ring;
		}

		&:disabled + .toggle-track {
			cursor: not-allowed;
			opacity: 0.7;
		}

		& + .toggle-track .toggle-indicator::before {
			color: $inactive-color;
			content: "x";
			font-family: "termly";
			font-size: .6rem;
		}

		&:checked + .toggle-track .toggle-indicator::before {
			color: $active-color;
			content: "c";
		}
	}

	.toggle-track {
		background: $inactive-color;
		border: 1px solid $inactive-color;
		border-radius: 100px;
		cursor: pointer;
		display: flex;
		height: $track-height;
		margin-right: 12px;
		position: relative;
		width: $track-width;
	}

	.toggle-indicator {
		align-items: center;
		background: #fff;
		border-radius: $toggle-indicator-size;
		bottom: 3px;
		display: flex;
		height: $toggle-indicator-size;
		justify-content: center;
		left: 2px;
		outline: $highContrastModeSupport;
		position: absolute;
		width: $toggle-indicator-size;
		-webkit-transition: .2s;
		transition: .2s;
	}

	.toggle__input:checked + .toggle-track {
		background: $active-color;
		border-color: $active-color;
	}

	.toggle__input:checked + .toggle-track .toggle-indicator {
		transform: translateX($track-width - $track-height);
	}

	@media screen and (-ms-high-contrast: active) {
		.toggle-track {
			border-radius: 0;
		}
	}

	.settings-link {
		color: $color_primary;
		font-weight: 500;
		padding-left: 22px;
		position: relative;
		text-decoration: none;

		&:before {
			content: url('../images/settings.svg');
			left: 0;
			position: absolute;
			top: 1px;
		}
	}

}

.termly .termly-wp-rocket-sidebar {

	h2 {
		color: #6d7782;
	}

	p {
		margin-bottom: 20px;
	}

	.termly-wp-rocket-button-container {
		align-items: center;
		display: flex;
		justify-content: space-between;

		.termly-wp-rocket-button {
			@include primary-button();
			background-color: transparent;
			border: 1px solid #ef663f;
			color: #ef663f;
		}
	}

}

// New user
.termly .termly-new-user {

	span.required {
		color: $color_primary;
	}

	label.checkbox-container {
		display: flex;
		float: none;
		width: 100%;
	}
}

/* UPDATE NOTICES */
#uk-cookie-consent-update {

	.updating-message {
		.wc_plugin_upgrade_notice {
			display: none;
		}
	}

	.dummy {
		display: none;
	}

	.ctcc_plugin_upgrade_notice {
		font-weight: normal;
		background: #fff8e5 !important;
		border-left: 4px solid #ffb900;
		border-top: 1px solid #ffb900;
		padding: 9px 0 9px 12px !important;
		margin: 0 -12px 0 -16px !important;

		&::before {
			content: "\f348";
			display: inline-block;
			font: 400 18px/1 dashicons;
			speak: never;
			margin: 0 8px 0 -2px;
			vertical-align: top;
		}

		&.minor,
		&.major {
			padding: 20px 0 !important;

			&::before {
				display: none;
			}

			p {
				padding: 0 20px;
				margin: 0;
				max-width: 700px;
				line-height: 1.5em;

				&::before {
					content: "";
					display: none;
				}
			}
		}

	}

}