﻿select,	
input, 
textarea					{	appearance:	none; -webkit-appearance: none; -moz-appearance: none; }	
	*:focus 				{	outline: -webkit-focus-ring-color auto 0; outline: none; }
	*:-moz-focusring 		{	outline: 0; }
	::placeholder			{	opacity: 1.00; }
	button	 				{	background-color: transparent; }
input[type=radio], 
input[type=checkbox] 		{	display: none; }		

select option 				{ 	font: -moz-pull-down-menu; }
select option:first-child 	{	display: none; }

.pwm-field-icon 	{	display: none; }

:disabled			{	opacity: 0.75; background-color: transparent; }
:disabled + label	{	opacity: 0.75; }
button:disabled		{	opacity: 0.75; background-color: var(--dark)}
input:disabled + label:before	{opacity: 0.75;background-color: transparent;}
input:disabled + input + label:before	{opacity: 0.75;background-color: transparent;}

/*form		{	margin: 1.00vw 0; }*/

/* --- Layout --- */

	input, select, textarea	{	width: 100.0%; height: 3.00em; margin: 0; padding: 0 1.00em; }
	
		textarea			{	height: 6.00em; padding: 1.00em; resize: vertical; }
		textarea.half		{	height: 3.00em; }

		select.semi,	input.semi			{	width: calc(50.00% - 0.15em); }
		select.large,	input.large			{	width: calc(70.00% - 0.15em); }
		select.small,	input.small			{	width: calc(30.00% - 0.15em); }
/*		input + input,	input + select		{	margin-left: 0.30em; } Muss raus, weil sonst die inputs nicht nebeneinander angezeigt werden
*/		
		input[type=time],
		input[type=date],
		input[type=number]	{	width: 10.00em; }

		select				{	height: 3.00em; padding-right: 1.80em; background-image: url('../img/picts/black/keyboard_arrow_down.svg'); background-repeat: no-repeat; background-position: center right 0.75em; background-size: 1.50em; }
		select.auto			{	width: auto; font-size: 0.85em; }
	
		.opa-50				{	opacity: 0.5	}
							
	/* --- Channelcange small --- */

	.chch			{	position: relative; width: 100.0%; max-height: 3.00em; border-width: 1px; overflow: hidden; }
	.chch > span	{	position: relative; z-index: 2; display: flex; flex-flow: column wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; background-color: var(--light); }	

	.chch > span input[name=chch] + label			{	position: relative; order: 2; width: 100.0%; height: 3.00em; padding-bottom: 0.125em; border-bottom-width: 1px; background-repeat: no-repeat; background-position: left 0.50em center; background-size: 2.25em; }
	.chch > span input[name=chch] + label:before	{	content: none; }
	.chch > span input[name=chch] + label.mail		{	background-image: url('../img/picts/black/mail_outline.svg'); }
	.chch > span input[name=chch] + label.email		{	background-image: url('../img/picts/black/alternate_email.svg'); }
	.chch > span input[name=chch] + label.call		{	background-image: url('../img/picts/black/perm_phone_msg.svg'); }

	.chch:hover										{	max-height: 10.00em; border-bottom-width: 0; }
	.chch > span input[name=chch]:checked + label	{	display: flex; order: 1; background-color: white; }		
	.chch > span input[name=chch] + label:hover		{	background-color: white; }		

	.chch.disabled:hover									{	max-height: 3.00em; border-bottom-width: 1px; }
	.chch.disabled > span input[name=chch]:checked + label	{	background-color: transparent; }		

	/* --- Searchbox --- */

	.searchbox		{	position: relative; display: block; float: right; width: 100.0%; /* max-width: 38.00em; */ }
	
	.searchbox > input[type=search]				{	width: calc(100.0% - 3.00em); margin-right: 2em; }
	.searchbox > input[type=search] + .search	{	position: absolute; top: 0; right: 0; width: 3.00em; height: 3.00em; margin-left: -1px; padding: 0; background-position: center; opacity: 1.00; }
		
/*	=================================
		Formular
	================================= */ 
			
/* Check- + Radio-Boxen */

input + label			{	position: relative; height: 2.50em; padding-left: 3.50em; display: flex; gap: 0.125em 0.50em; flex: 0 0 auto; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; text-align: left; }
input + label:before	{	content:''; position: absolute; top: 0; left: 0; display: block; width: 2.50em; height: 100.0%; background-repeat: no-repeat; background-position: center; background-color: white; background-size: 0.00%; }
		
		input[type=radio] + label:before		{	border-radius: 100.0%; }
		input[type=checkbox] + label:before		{	border-radius: 0; }
		
input[checked=checked] + input[type=hidden]+ label:before, 	
input:checked + label:before		{	background-image:  url('../img/picts/black/check.svg'); background-repeat: no-repeat; background-position: center; background-size: 72.00%; }
input:checked + label.inv:before	{	background-image:  url('../img/picts/white/check.svg'); box-shadow: none; }
		
		input.icon + label			{	padding-left: 2.50em; display: inline-block; }
		input.icon + label:before	{	content: none; }
		input.icon + label			{	opacity: 0.25; }
		input.icon + label:hover	{	opacity: 0.75; }
		input:checked.icon + label	{	opacity: 1.00; }

.filterbar > #SearchString			{	margin-right: 2em; }		

/* in Table */	.intab				{	position: relative; display: inline-block; padding: 0.25em 1.20em 0.25em 0;}
				/*.intab	+ .intab	{	margin-left: 1.20em; }	*/
					 								 
/* ohne Text */		input.blank + label, input.blank + label	{ 	display: inline-block; margin: 0 auto; padding-left: 2.50em; }

/* --- Switches --- */
	
input.switch + label												{	position: relative; height: 2.00em; width: 4.0em; padding: 0; display: inline-block; }		
input.switch + label:before, input.switch + label:after				{	position: absolute; content: ''; box-shadow: none; }		
							 input.switch + label:before			{	opacity: 0.50; content: 'OFF'; top: 0px; left: 0px; width: 100.0%; height: 100.0%; padding: 0 0.75em 0.125em; border-radius: 2.00em; background-image: none; display: flex; flex-flow: row wrap; justify-content: flex-end; align-content: center; align-items: center; }		
							 input.switch + label:after				{	top: 2px; left: 2px; width: calc(2.00em - 4px); height: calc(2.00em - 4px); border-radius: 100.0%; }		
							 input:checked.switch + label:before	{	opacity: 1.00; content: 'ON'; justify-content: flex-start; }		
							 input:checked.switch + label:after		{	left: calc(2.50em - 5px); }		

					input#userfit.switch + label[for=userfit]		{	position: absolute; z-index: 3; top: 0; right: 0; }

/* --- Changes (Standortauswahl + Art der Aktion) --- */

.change 						{	grid-template-columns: repeat(auto-fit, minmax(25.00%, 1fr)); width: 100.0%; display: grid; gap: 0.50em; grid-auto-flow: dense; margin-bottom: 1.50em; }
.change > input + label			{	opacity: 0.25; display: block; height: 7.00em; padding: 4.25em 0 0 0; border-radius: 0.125em; border-width: 1px; text-align: center; line-height: 1.20; background-repeat: no-repeat; background-position: top 0.75em center; background-size: 3.00em; }
.change > input + label:before	{	content: none; }
.change > input + label:hover	{	opacity: 0.75; }
.change > input:checked + label	{	opacity: 1.00; }

	.change > input + label.auto		{	background-image: url('../img/picts/white/notification_add.svg');   }
	.change > input + label.brief		{	background-image: url('../img/picts/white/mail_outline.svg');    	}
	.change > input + label.call		{	background-image: url('../img/picts/white/perm_phone.svg');      	}
	.change > input + label.email		{	background-image: url('../img/picts/white/alternate_email.svg'); 	}
	.change > input + label.epost		{	background-image: url('../img/Logo_ePost.svg'); 					}
	.change > input + label.local		{	background-image: url("../img/picts/white/location_on.svg"); height: 8.00em; background-size: 2.50em; }
	.change > input + label.meet		{	background-image: url('../img/picts/white/groups.svg');    		 	}
	.change > input + label.pdf			{	background-image: url("../img/picts/white/download.svg"); 			}
	.change > input + label.video		{	background-image: url("../img/picts/white/video_camera_front.svg"); }

	.change > input:checked + label						{	background-image: url("../img/picts/white/check_circle.svg"); 	}
	.change > input:checked:checked + label.epost		{	background-image: url('../img/Logo_ePost.svg'); 				}

	.change > input + a				{	opacity: 0.25; display: block; height: 7.00em; padding: 4.25em 0 0 0; border-radius: 0.125em; border-width: 1px; text-align: center; line-height: 1.20; background-repeat: no-repeat; background-position: top 0.75em center; background-size: 3.00em; }
	.change > input + a.local		{	background-image: url("../img/picts/white/location_on.svg"); background-size: 2.50em; }
	.change > input + a:hover	{	opacity: 0.75; }

	/* --- Upload-box --- */

.upload-box		{	position: relative; display: inline-block; width: 100.0%; height: 3.50em; }
.upload-file	{	position: relative; width: 100.0%; height: 3.50em; background-color: white; }
.btn-upload		{	position: absolute; top: 0; right: 0; width: 3.50em; height: 3.50em; overflow: hidden; background-image: url("../img/picts/white/cloud_upload.svg"); background-repeat: no-repeat; background-position: center; background-size: 1.75em; }
input.upload	{	position: absolute; top: 0; right: 0; width: 100.0%; cursor: pointer; opacity: 0; }
	
	.upload-file:disabled	{	opacity: 1.00; }
	
/* --- Rating 1-10 --- */

.rating 				{	width: calc(100.0% -2px); height: 1.75em; border-width: 1px; border-radius: 0.25em; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
.rating > label			{	position: relative; flex: 1 1 1.00%; height: 100.0%; border-left-width: 0; margin: 0; opacity: 0.50; }
.rating > label	+ label	{	border-left-width: 1px; }
.rating > label:before	{	position: absolute; top: 0; left: 0; display: block; width: 100.0%; height: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }

	.rating > label:nth-child(1):before		{	content:'1'; }
	.rating > label:nth-child(2):before		{	content:'2'; }
	.rating > label:nth-child(3):before		{	content:'3'; }
	.rating > label:nth-child(4):before		{	content:'4'; }
	.rating > label:nth-child(5):before		{	content:'5'; }
	.rating > label:nth-child(6):before		{	content:'6'; }
	.rating > label:nth-child(7):before		{	content:'7'; }
	.rating > label:nth-child(8):before		{	content:'8'; }
	.rating > label:nth-child(9):before		{	content:'9'; }
	.rating > label:nth-child(10):before	{	content:'10'; }
	
	input:checked#rating-01 ~ .rating > label[for=rating-01],

	input:checked#rating-02 ~ .rating > label[for=rating-01],	
	input:checked#rating-02 ~ .rating > label[for=rating-02],	

	input:checked#rating-03 ~ .rating > label[for=rating-01],	
	input:checked#rating-03 ~ .rating > label[for=rating-02],	
	input:checked#rating-03 ~ .rating > label[for=rating-03],		

	input:checked#rating-04 ~ .rating > label[for=rating-01],	
	input:checked#rating-04 ~ .rating > label[for=rating-02],	
	input:checked#rating-04 ~ .rating > label[for=rating-03],	
	input:checked#rating-04 ~ .rating > label[for=rating-04],	

	input:checked#rating-05 ~ .rating > label[for=rating-01],	
	input:checked#rating-05 ~ .rating > label[for=rating-02],	
	input:checked#rating-05 ~ .rating > label[for=rating-03],	
	input:checked#rating-05 ~ .rating > label[for=rating-04],	
	input:checked#rating-05 ~ .rating > label[for=rating-05],	

	input:checked#rating-06 ~ .rating > label[for=rating-01],	
	input:checked#rating-06 ~ .rating > label[for=rating-02],	
	input:checked#rating-06 ~ .rating > label[for=rating-03],	
	input:checked#rating-06 ~ .rating > label[for=rating-04],	
	input:checked#rating-06 ~ .rating > label[for=rating-05],	
	input:checked#rating-06 ~ .rating > label[for=rating-06],		

	input:checked#rating-07 ~ .rating > label[for=rating-01],	
	input:checked#rating-07 ~ .rating > label[for=rating-02],	
	input:checked#rating-07 ~ .rating > label[for=rating-03],	
	input:checked#rating-07 ~ .rating > label[for=rating-04],	
	input:checked#rating-07 ~ .rating > label[for=rating-05],	
	input:checked#rating-07 ~ .rating > label[for=rating-06],	
	input:checked#rating-07 ~ .rating > label[for=rating-07],	

	input:checked#rating-08 ~ .rating > label[for=rating-01],	
	input:checked#rating-08 ~ .rating > label[for=rating-02],	
	input:checked#rating-08 ~ .rating > label[for=rating-03],	
	input:checked#rating-08 ~ .rating > label[for=rating-04],	
	input:checked#rating-08 ~ .rating > label[for=rating-05],	
	input:checked#rating-08 ~ .rating > label[for=rating-06],	
	input:checked#rating-08 ~ .rating > label[for=rating-07],	
	input:checked#rating-08 ~ .rating > label[for=rating-08],		

	input:checked#rating-09 ~ .rating > label[for=rating-01],	
	input:checked#rating-09 ~ .rating > label[for=rating-02],	
	input:checked#rating-09 ~ .rating > label[for=rating-03],	
	input:checked#rating-09 ~ .rating > label[for=rating-04],	
	input:checked#rating-09 ~ .rating > label[for=rating-05],	
	input:checked#rating-09 ~ .rating > label[for=rating-06],	
	input:checked#rating-09 ~ .rating > label[for=rating-07],	
	input:checked#rating-09 ~ .rating > label[for=rating-08],	
	input:checked#rating-09 ~ .rating > label[for=rating-09],	

	input:checked#rating-10 ~ .rating > label[for=rating-01],	
	input:checked#rating-10 ~ .rating > label[for=rating-02],	
	input:checked#rating-10 ~ .rating > label[for=rating-03],	
	input:checked#rating-10 ~ .rating > label[for=rating-04],	
	input:checked#rating-10 ~ .rating > label[for=rating-05],	
	input:checked#rating-10 ~ .rating > label[for=rating-06],	
	input:checked#rating-10 ~ .rating > label[for=rating-07],	
	input:checked#rating-10 ~ .rating > label[for=rating-08],	
	input:checked#rating-10 ~ .rating > label[for=rating-09],	
	input:checked#rating-10 ~ .rating > label[for=rating-10]	{	opacity: 1.00; background-color: var(--sofa-1); color: white; }

/*	=================================
		END
	================================= */


