main a,
.ui-dialog a,
#colorbox a {
	color: var( --newday-color-primary );
	text-decoration: none;
}

main a:is( :hover, :focus-visible ),
.ui-dialog a:is( :hover, :focus-visible ),
#colorbox a:is( :hover, :focus-visible ) {
	color: var( --newday-color-primary-hover );
	text-decoration: none;
}

main button,
main .button,
.ui-dialog button,
.ui-dialog .button,
#colorbox button,
#colorbox .button {
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-family: "Mulish", sans-serif;
	font-weight: 800;
	text-align: left;
}

button img,
.button img {
	display: inline-block;
	width: 22px;
	margin-right: 22px;
}

button img:nth-of-type( 2 ),
.button img:nth-of-type( 2 ) {
	margin-right: 0;
	margin-left: 22px;
}

main a.button:is( .adjacent, .under ) {
	display: inline-block;
	border: 2px solid var( --newday-color-white );
	padding: 0.5rem 2rem;
}

main a.button.adjacent {
	margin: 5px 0 1em 10px;
}

main a.button.under {
	margin: 20px 0 1em;
}

main a.button:is( .adjacent, .under ):is( :hover, :focus-visible ) {
	border-color: var( --newday-color-primary );
	color: var( --newday-color-primary );
}

main :is( .btn, .outlined, .filled ),
.ui-dialog :is( .btn, .outlined, .filled ),
#colorbox :is( .btn, .outlined, .filled ) {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.25rem 1rem;
	border: 0;
	background: var( --newday-color-white );
	color: var( --newday-color-ink );
	font-family: "Mulish", sans-serif;
	font-size: 14pt;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

main input:is( .btn, .outlined, .filled ),
.ui-dialog input:is( .btn, .outlined, .filled ),
#colorbox input:is( .btn, .outlined, .filled ) {
	display: inline-block;
}

main :is( .btn.large, .large.outlined, .large.filled ),
.ui-dialog :is( .btn.large, .large.outlined, .large.filled ),
#colorbox :is( .btn.large, .large.outlined, .large.filled ) {
	min-height: 57px;
	padding-right: 2rem;
	padding-left: 2rem;
}

main :is( .btn, .outlined, .filled ):hover,
.ui-dialog :is( .btn, .outlined, .filled ):hover,
#colorbox :is( .btn, .outlined, .filled ):hover {
	color: #373734;
	text-decoration: none;
}

main :is( .btn, .outlined, .filled ):active,
.ui-dialog :is( .btn, .outlined, .filled ):active,
#colorbox :is( .btn, .outlined, .filled ):active {
	transform: translateY( 3px );
}

main .outlined,
.ui-dialog .outlined,
#colorbox .outlined {
	border: 2px solid currentColor;
	background: transparent;
	color: var( --newday-color-white );
}

main .outlined:hover,
.ui-dialog .outlined:hover,
#colorbox .outlined:hover {
	background: #333333;
	color: var( --newday-color-white );
}

main .filled:is( .blue, .orange, .yellow, .magenta, .purple ),
.ui-dialog .filled:is( .blue, .orange, .yellow, .magenta, .purple ),
#colorbox .filled:is( .blue, .orange, .yellow, .magenta, .purple ) {
	border-color: var( --newday-color-primary );
	background: var( --newday-color-primary );
}

main .filled.blue,
.ui-dialog .filled.blue,
#colorbox .filled.blue {
	color: var( --newday-color-white );
}

main .filled:is( .blue, .orange, .yellow, .magenta, .purple ):hover,
.ui-dialog .filled:is( .blue, .orange, .yellow, .magenta, .purple ):hover,
#colorbox .filled:is( .blue, .orange, .yellow, .magenta, .purple ):hover {
	background: var( --newday-color-muted );
	color: var( --newday-color-white );
}

main .filled.gray,
.ui-dialog .filled.gray,
#colorbox .filled.gray {
	background: #333333;
	color: var( --newday-color-white );
}

main .filled.gray:hover,
.ui-dialog .filled.gray:hover,
#colorbox .filled.gray:hover {
	background: var( --newday-color-muted );
}

main .outlined:is( .blue, .yellow, .orange, .magenta, .purple ),
.ui-dialog .outlined:is( .blue, .yellow, .orange, .magenta, .purple ),
#colorbox .outlined:is( .blue, .yellow, .orange, .magenta, .purple ) {
	border-color: var( --newday-color-primary );
	color: var( --newday-color-primary );
}

main .outlined:is( .blue, .yellow, .orange, .magenta, .purple ):hover,
.ui-dialog .outlined:is( .blue, .yellow, .orange, .magenta, .purple ):hover,
#colorbox .outlined:is( .blue, .yellow, .orange, .magenta, .purple ):hover {
	border-color: var( --newday-color-light );
	color: var( --newday-color-light );
}

main .outlined.gray,
.ui-dialog .outlined.gray,
#colorbox .outlined.gray {
	border-color: #333333;
}

main .tag,
.ui-dialog .tag,
#colorbox .tag {
	display: flex;
	align-items: center;
	height: 32px;
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: 5em;
	padding: 0 16px;
	background: #333333;
	color: var( --newday-color-white );
	cursor: pointer;
	font-family: "Mulish", sans-serif;
	font-size: 0.914rem;
	font-weight: 800;
	line-height: 27px;
	text-align: center;
}

main .tag img,
.ui-dialog .tag img,
#colorbox .tag img {
	width: 16px;
	margin-left: 1rem;
}

main .tag:is( .yellow, .orange, .blue ),
.ui-dialog .tag:is( .yellow, .orange, .blue ),
#colorbox .tag:is( .yellow, .orange, .blue ) {
	background: var( --newday-color-primary );
	color: var( --newday-color-ink );
}

main .tag:hover,
.ui-dialog .tag:hover,
#colorbox .tag:hover {
	color: var( --newday-color-primary-hover );
}

main .tag a,
.ui-dialog .tag a,
#colorbox .tag a {
	color: inherit;
}

main form .form-element,
.ui-dialog form .form-element,
#colorbox form .form-element {
	position: relative;
}

@media ( max-width: 1000px ) {
	main form .form-element,
	.ui-dialog form .form-element,
	#colorbox form .form-element {
		flex: 1 0 100%;
	}
}

main form .form-element.w100,
.ui-dialog form .form-element.w100,
#colorbox form .form-element.w100 {
	flex: 1 0 100%;
}

main form .form-element.error :is( input, select ),
.ui-dialog form .form-element.error :is( input, select ),
#colorbox form .form-element.error :is( input, select ) {
	border-color: var( --newday-color-danger ) !important;
}

main form .form-element.error :is( input, select ) + p,
.ui-dialog form .form-element.error :is( input, select ) + p,
#colorbox form .form-element.error :is( input, select ) + p {
	position: absolute;
	bottom: 1.8rem;
	left: 0;
	margin: 0;
	color: var( --newday-color-danger );
}

main form :is( label, select, input ),
.ui-dialog form :is( label, select, input ),
#colorbox form :is( label, select, input ) {
	display: block;
}

main form label,
.ui-dialog form label,
#colorbox form label {
	font-family: "Mulish", sans-serif;
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
}

main :is(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="number"]
),
main input[type="submit"]:not( .btn ):not( .filled ):not( .outlined ):not( .ui-button ),
main select,
.ui-dialog :is(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="number"]
),
.ui-dialog input[type="submit"]:not( .btn ):not( .filled ):not( .outlined ):not( .ui-button ),
.ui-dialog select,
#colorbox :is(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="number"]
),
#colorbox input[type="submit"]:not( .btn ):not( .filled ):not( .outlined ):not( .ui-button ),
#colorbox select {
	height: 57px;
	border: 0;
	border-bottom: 2px solid currentColor;
	padding: 0 12px;
	background: transparent;
	color: var( --newday-color-white );
	font-family: "Mulish", sans-serif;
	font-size: 2rem;
	font-style: normal;
	font-weight: 700;
	line-height: 0.9;
}

main :is(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="number"]
):is( :active, :focus ),
main input[type="submit"]:not( .btn ):not( .filled ):not( .outlined ):not( .ui-button ):is( :active, :focus ),
main select:is( :active, :focus ),
.ui-dialog :is(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="number"]
):is( :active, :focus ),
.ui-dialog input[type="submit"]:not( .btn ):not( .filled ):not( .outlined ):not( .ui-button ):is( :active, :focus ),
.ui-dialog select:is( :active, :focus ),
#colorbox :is(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="number"]
):is( :active, :focus ),
#colorbox input[type="submit"]:not( .btn ):not( .filled ):not( .outlined ):not( .ui-button ):is( :active, :focus ),
#colorbox select:is( :active, :focus ) {
	border-color: var( --newday-color-primary );
	outline: 0;
}

main select {
	border: 0.1em solid var( --newday-color-grey-50 );
	border-radius: 0.25em;
	padding: 0.5em 1.7em 0.5em 0.6em;
	appearance: none;
	background-color: rgb( 51 55 61 );
	background-image: linear-gradient( 45deg, transparent 50%, var( --newday-color-white ) 50% ), linear-gradient( 135deg, var( --newday-color-white ) 50%, transparent 50% );
	background-position: calc( 100% - 1.25rem ) calc( 50% - 0.1875rem ), calc( 100% - 0.875rem ) calc( 50% - 0.1875rem );
	background-repeat: no-repeat;
	background-size: 0.375rem 0.375rem;
	font-weight: 600;
	line-height: 1.15;
}

main select:is( .orange, .yellow, .magenta, .purple ) {
	border-color: var( --newday-color-grey-50 );
	color: var( --newday-color-white );
}

main select:focus-visible {
	border-color: var( --newday-color-white );
}

main select option {
	background: rgb( 51 55 61 );
	color: var( --newday-color-white );
	font-weight: 400;
}

main textarea,
.ui-dialog textarea,
#colorbox textarea {
	width: 100%;
	min-height: 120px;
	margin-bottom: 4rem;
	border: 0;
	border-bottom: 2px solid currentColor;
	padding: 0;
	background: transparent;
	color: var( --newday-color-white );
	font-family: "Mulish", sans-serif;
}

main textarea:is( :active, :focus ),
.ui-dialog textarea:is( :active, :focus ),
#colorbox textarea:is( :active, :focus ) {
	border-color: var( --newday-color-primary );
	outline: 0;
}

main input::placeholder,
.ui-dialog input::placeholder,
#colorbox input::placeholder {
	text-transform: capitalize;
}

main input[type="button"],
.ui-dialog input[type="button"],
#colorbox input[type="button"] {
	justify-content: center;
	font-family: "Mulish", sans-serif;
	text-transform: uppercase;
}

main .checkbox-group {
	margin-bottom: 4rem;
}

main .checkbox-group .form-control {
	position: relative;
	margin-bottom: 1.5rem;
	padding-left: 50px;
	cursor: pointer;
	font-family: "Mulish", sans-serif;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 0.9;
}

main .checkbox-group .form-control:has( input:checked ) {
	color: var( --newday-color-primary );
}

main .checkbox-group .form-control:has( input:checked )::before {
	position: absolute;
	top: -5%;
	left: -2%;
	z-index: -1;
	display: block;
	width: 104%;
	height: 140%;
	background: #333333;
	content: "";
}

main .checkbox-group .form-control:has( input:checked )::after {
	border-color: var( --newday-color-primary );
	background: var( --newday-color-primary );
}

main .checkbox-group .form-control:has( input:checked ) span {
	border-color: var( --newday-color-ink ) !important;
	z-index: 1;
}

main .checkbox-group .form-control::after {
	position: absolute;
	top: 4px;
	left: 0;
	display: block;
	width: 29px;
	height: 29px;
	border: 3px solid var( --newday-color-white );
	background: transparent;
	content: "";
}

main .checkbox-group .form-control input {
	position: absolute;
	margin: 0;
	opacity: 0;
}

main .checkbox-group .form-control input:checked + span {
	position: absolute;
	top: 8px;
	left: 10px;
	width: 9px;
	height: 16px;
	border-right: 3px solid var( --newday-color-white );
	border-bottom: 3px solid var( --newday-color-white );
	transform: rotate( 45deg );
}

main .normal_input {
	margin: 0;
	border-bottom: 0;
	font-size: inherit;
}

main input[type="text"].input_date {
	width: 110px !important;
	height: auto;
	margin-left: 1rem;
	font-size: 1.5em;
}

.ui-datepicker-trigger img {
	width: 18px;
	height: 18px;
	filter: hue-rotate( 135deg ) saturate( 3 );
}

main .helptext_bigger {
	font-style: italic;
	font-weight: 400;
}

main .helptext_bigger a,
main .helptext_small a {
	text-decoration: underline;
}

main .helptext {
	font-size: 12pt;
	font-style: italic;
	font-weight: 400;
}

main .helptext_small {
	font-size: 9pt;
	font-weight: 400;
}

.new_to_ds {
	margin: 0 0 15px;
	border: 1px solid var( --newday-color-white );
	padding: 10px;
}

@media ( max-width: 950px ) {
	main form label,
	.ui-dialog form label,
	#colorbox form label {
		font-size: 1.03125rem;
	}

	main input[type="text"],
	main input[type="email"],
	main input[type="password"],
	main input[type="search"],
	main input[type="tel"],
	main input[type="url"],
	main input[type="number"],
	main input[type="submit"]:not( .btn ):not( .filled ):not( .outlined ):not( .ui-button ),
	main select,
	.ui-dialog input[type="text"],
	.ui-dialog input[type="email"],
	.ui-dialog input[type="password"],
	.ui-dialog input[type="search"],
	.ui-dialog input[type="tel"],
	.ui-dialog input[type="url"],
	.ui-dialog input[type="number"],
	.ui-dialog input[type="submit"]:not( .btn ):not( .filled ):not( .outlined ):not( .ui-button ),
	.ui-dialog select,
	#colorbox input[type="text"],
	#colorbox input[type="email"],
	#colorbox input[type="password"],
	#colorbox input[type="search"],
	#colorbox input[type="tel"],
	#colorbox input[type="url"],
	#colorbox input[type="number"],
	#colorbox input[type="submit"]:not( .btn ):not( .filled ):not( .outlined ):not( .ui-button ),
	#colorbox select {
		font-size: 1.71875rem;
	}

	main .tag,
	.ui-dialog .tag,
	#colorbox .tag {
		font-size: 0.7734375rem;
	}

	main .checkbox-group .form-control {
		font-size: 1.375rem;
	}

	main input[type="text"].input_date {
		font-size: 1.03125em;
	}
}