/*** OP Variables Darkmode

Table of Contents
1. Colors
2. Functional variable definitions
3. extra darkmode styling
*/

:root {

/* 1. colors */
	--op--cyan-very-light: #28373a;
	--op--cyan-light-grayish: #344f55;
	--op--cyan-light: #497f8b;
	--op--cyan-moderate: #64c3d6;
	--op--cyan-strong: #29b0cc; /* primary color */
	--op--cyan-dark: #7ddcef;
	--op--cyan-very-dark: #adebfa;

	--op--gray-very-very-light: #303030;
	--op--gray-very-light: #383838; /* primary color */
	--op--gray-light: #454545; /* primary color */
	--op--gray-simple-light: #292929;
	--op--gray: #717171;
	--op--gray-medium: #8F8F8F;
	--op--gray-dark: #A1A1A1;
	--op--gray-very-dark: #f0f0f0; /* primary color */

	--op--red-light-grayish: #451A1D;
	--op--red-bright: #df2e48;
	--op--red-strong: #ae0313;	/* color used for diffs (<ins>) */
	--op--red-dark: #a61b31;

	--op--white: #202020;
	--op--black: #ffffff;

	/* Colors for the parliament statistics */
	--op--yellow-soft: #96773b;

	/* Secondary Colors */
	--op--orange-light: #bd7a0b;
	--op--orange-bright: #f4b03f;
	--op--orange-dark: #f6c065;

	/* Colors for "Abstimmung 21" */
	--op--a21-green-light: #226868;
	--op--a21-green-dark: #aadfdf;
	--op--a21-orange-light: #bd7a0b;
	--op--a21-blue-very-dark-grayish: #f0f0f0;

	/* Colors for social Icons */
	--op--social-twitter: #fff;

	/* Colors for some special pages, that are not part of our color scheme */
	--op--trollturm: #b7d63f;

/* 2. Functional variable definitions */
	--op__color-brand: var(--op--cyan-strong);
	--op__color-font: var(--op--gray-very-dark);
}

/* 3. In some cases, darkmode requires some extra styling to work. These styles are defined here. */

/* Basics */
body {
	background-color: var(--op--white);
}

.op__button-toggle-menu::after {
	filter: invert(100%);
}

/* Decrease image brightness */
img {
	filter: brightness(0.8);
}

/* Adjust border color of form elements for better visibility */
.op__form__textarea,
.op__form__input,
.op__form__select,
.module-selectbox-select-selected,
.module-selectbox-item+.module-selectbox-item,
.ql-container,
.ql-toolbar,
.multibox-dummy {
	border-color: var(--op--gray);
}

select,
.op__form__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7.282' width='12' height='7' version='1.1'%3E%3Cpath fill='%23f2f2f2' d='M11.19,130.584l-5.34-5.341a.659.659,0,0,1,0-.933l.623-.623a.66.66,0,0,1,.932,0l4.252,4.232,4.252-4.232a.66.66,0,0,1,.932,0l.623.623a.659.659,0,0,1,0,.933l-5.34,5.341a.66.66,0,0,1-.933,0Z' transform='translate(-5.656 -123.494)'/%3E%3C/svg%3E");
}

input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
}

input:-webkit-autofill+#show_password .icon-eye-close,
input:-webkit-autofill+#show_password .icon-eye-open {
	filter: invert(0.8);
}

/* Make tables more appropriate for darkmode */
.theme-table tbody .theme-table-row:nth-child(odd) {
	background-color: #4f4d4d;
	color: var(--op--gray-very-dark);
}

.theme-table tbody .theme-table-row:nth-child(even) {
	background-color: #3b3939;
	color: var(--op--gray-very-dark);
}

.cut-text {
	color: var(--op--gray-very-dark);
}

.highlightable-tr:target td,
.highlightable-tr:target th,
.highlightable-tr:target .cut-text {
	background-color: var(--op--orange-bright) !important;
	color: var(--op--white);
}

/* Adjusted font color for nicer messages */
.op__form__message--error:not(.-display--none) {
	color: var(--op--gray-very-dark);
}

/* Some more adjustments */
.translation .translation-form {
	background-color: var(--op--gray-very-light);
}

/* Fix newsletter preview for darkmode */
.-background--darkmode--light {
	background-color: var(--op--black);
}

.op__link--uppercase:hover,
.op__link--uppercase-dark:hover,
.op__tab-navigation__link:hover,
.op__link--inherited-style:hover
{
	color: var(--op--cyan-dark);
}

.op__button--add:hover,
.op__button--add:focus
{
	color: var(--op--gray-dark);
}

.op__button--inverse--dark:hover {
	background-color: #075463;
	border-color: #075463;
}

.op__button:disabled {
	color: var(--op--gray);
}

.op__button--light:hover,
.op__button--width_53:hover,
.op__button--red-bright:hover,
.op__button--dark:hover,
.op__button--inverse--dark:hover {
	color: var(--op--fixed-white);
}

/* Lighter background for HomeParliament icons in darkmode */
.-background--gray-darkmode-only {
	background-color: var(--op--gray-light);
}

.op__link--arrow-right:hover:after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23adebfa' width='15' height='7.373' viewBox='0 0 15 7.373'%3E%3Cpath class='a' d='M10.511,148.241H.4a.4.4,0,0,0-.4.4v1.875a.4.4,0,0,0,.4.4h10.11v1.542a.8.8,0,0,0,1.372.568l2.881-2.881a.8.8,0,0,0,0-1.136l-2.881-2.881a.8.8,0,0,0-1.372.568Z' transform='translate(0 -145.894)'/%3E%3C/svg%3E");
}

.op__link--arrow-right.-color--white:after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23202020' width='15' height='7.373' viewBox='0 0 15 7.373'%3E%3Cpath class='a' d='M10.511,148.241H.4a.4.4,0,0,0-.4.4v1.875a.4.4,0,0,0,.4.4h10.11v1.542a.8.8,0,0,0,1.372.568l2.881-2.881a.8.8,0,0,0,0-1.136l-2.881-2.881a.8.8,0,0,0-1.372.568Z' transform='translate(0 -145.894)'/%3E%3C/svg%3E");
}

.op__link--arrow-left:hover:before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23adebfa' width='15' height='10' viewBox='0 0 15 7.373'%3E%3Cpath class='a' d='M4.489,148.241H14.6a.4.4,0,0,1,.4.4v1.875a.4.4,0,0,1-.4.4H4.489v1.542a.8.8,0,0,1-1.372.568L.235,150.148a.8.8,0,0,1,0-1.136l2.881-2.881a.8.8,0,0,1,1.372.568Z' transform='translate(0 -145.894)'/%3E%3C/svg%3E");
}

.op__link[download]:hover:before {
	content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no' %3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1'  width='15px' height='15px' viewBox='0 0 21 18.78'%3E%3Cpath fill='%23adebfa' d='M19.212,12.721l-0.718,3.805H2.506l-0.718-3.805H0v6.045h21v-6.045H19.212z M18.758,5.97h-5.262V3.773 H7.503V5.97H2.292l8.182,8.549L18.758,5.97z M13.496,0H7.503v0.799h5.993V0z M13.496,1.492H7.503V3.02h5.993V1.492z'/%3E%3C/svg%3E");
}

.module-step:not(.module-step-completed)::before {
	color: var(--op--gray-dark);
}

.module-step-completed::before {
	color: var(--op--fixed-white)
}

.op__switch--slider .op__text-small {
	color: var(--op--white);
}

.theme-input-info .theme-input-message {
	background-color: #0d6c7f;
}

.module-petition-signature-status-bar .status-box .status-circle,
.module-petition-signature-status-bar .status-description {
	color: var(--op--fixed-white);
}

.module-petition-signature-status-bar .status-box .status-circle.active {
	background-color: #0d6c7f;
}