/* ################################## */

.zx hr {
	border: 1px solid rgba(255, 255, 255, 0.2);
	width: 100%;
	margin: 0;
}

.zx-div-hover:hover {
	background-color: rgb(255, 255, 255, 0.2); 
}

.zx-div-hover {
	position: absolute;
	left: 0px;
	top: -1px;
	width: 100%;
	height: 2.25rem;
	cursor: pointer;
}

form.zx-form {
	margin-bottom: 2rem;
}

/************/	
.zx-button {
	font-family: inherit;
	display: block;
	position: relative;
	margin: 0.2em;
	padding: 0 2rem 0 2rem;
	border: none;
	text-align: center;
	line-height: 2rem;
	white-space: nowrap;
	border-radius: 0.2em;
	font-size: 1.1rem;
	height: 2.5rem;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);	
	cursor: pointer;
	font-weight: 900;
	outline: 0;
}

.zx-button:hover {
	filter: brightness(110%);
	outline: 0;
}

.zx-button-oval {
	border-radius: 1.25rem;
}

.zx-action-button {
	font-family: inherit;
	display: block;
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	height: 3.5rem;
	width: 3.5rem;
	border: none;
	text-align: center;
	border-radius: 0.2em;
	font-size: 2rem;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);	
	cursor: pointer;
	font-weight: 900;
	outline: 0;
	border-radius: 1.875rem;
	z-index: 1000;
}

.zx-action-button:hover {
	filter: brightness(110%);
	cursor: pointer;
	outline: 0;
}




.zx-input-group {
	position:relative;
	padding: 0 1rem;
	width: 100%;
}

.zx-input {
	background-color: rgba(0, 0, 0, 0.25); 
	padding: 0 0.5rem 0 2.5rem;
	height: 2.25rem;
	width: 100%;
	min-width: 6rem;
	border: none;
	color: white;
	font-size: 1.20rem;
	text-align: left;
}

.zx-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	opacity: 1; /* Firefox */
	font-size: 0.75rem;
	color: #999;
}

.zx-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-size: 0.75rem;
	color: #999;
}

.zx-input::-ms-input-placeholder { /* Microsoft Edge */
	font-size: 0.75rem;
	color: #999;
}

::-webkit-clear-button  { display: none; }
::-webkit-calendar-picker-indicator { display: none; }

.zx-input-textarea {
	background-color: rgba(0, 0, 0, 0.25); 
	padding: 0.5rem 0.5rem 0.5rem 2.5rem;
	height: 12rem;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	min-height: 2rem;
	border: none;
	color: white;
	font-size: 1.20rem;
	text-align: left;
	resize: none;
}

.zx-input-disable .zx-input {
	background-color: transparent;
}	

.zx-icon-input {
	position:relative;
}

.zx-input-group .zx-icon {
	display: flex;
	position: absolute;
	height: 2.25rem;
	width: 2.25rem;
	font-size: 2rem;
	align-items: center;
	justify-content: center;
	color: #aaa;
	padding: 0.375rem;
}

.zx-input:focus {
	background-color: rgba(255, 255, 255, 0.2);
	border: none;
	outline: 0;
}

.zx-input:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border: none;
	outline: 0;
}

.zx-input-disable .zx-input:hover {
	background-color: transparent;
}

.zx-label-1 {
	color: #AAA;
	text-align: left; 
}

.zx-input-underline {
	position:relative;
	display: block;
	top: -0.5rem;
	left: 0;
	width: 100%;
	height: 0.5rem;
	border-bottom: 2px solid #FFCC00 ;
	border-right: 2px solid #FFCC00 ;
	border-left: 2px solid #FFCC00 ;
}

.zx-input-disable .zx-input-underline {
	border-bottom: 2px solid rgb(255,255,255, 0.2) ;
	border-right: 2px solid rgb(255,255,255, 0.2) ;
	border-left: 2px solid rgb(255,255,255, 0.2) ;
}

.zx-label-2 {
	position: relative;
	top: -0.5rem;
	color: rgb(255,255,255, 0.2);
	text-align: left;
	font-size: 0.85rem;
}

.zx-label-3 {
	position: relative;
	top: -0.5rem;
	color: rgb(255,255,255, 0.8);
	text-align: left;
	font-size: 0.85rem; 
}

.zx-input-error {
	color: #FF5555;
	height: 1rem;
	font-size: 0.8rem;
	position: relative;
	top: -0.5rem;
	font-weight: 700;
}

/* *********************************** */
label.zx-input-check {
	position: relative;
	display: flex;
	flex-direction: row;
	/*max-width: 4.5rem;*/
	cursor: pointer;
}

.zx-input-disable label.zx-input-check {
	cursor: default;
}

label.zx-input-check .zx-check-box {
	position: relative;  
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.375rem;
	border: 2px solid var(--kolor-1) ;
}

.zx-input-disable label.zx-input-check .zx-check-box {
	border: 2px solid rgb(255,255,255, 0.2) ; 
}

.zx-input-check .zx-check-box-old {
	position: absolute; left: 0; top: 0; height: 0;	width: 0; opacity: 0;
}

label.zx-check-input:hover .zx-check-box {
	background-color: rgba(255, 255, 255, 0.1);
}

.zx-check-ptaszek:after {
	content: "";
	position: absolute;
	left: 0.5rem;
	top: -0.2rem;
	width: 0.60rem;
	height: 1.2rem;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: none;
} 

.zx-input-check input:checked ~ .zx-check-ptaszek:after {
  display: block;
}

.zx-check-label-extra {
	position: absolute;
	left: 5rem;
	top: 0.55rem;
}

/* *********************************** */

.zx-input-radio {
	position: relative;
	padding: 0rem 1rem;
	height: 100%;	
}

.zx-input-radio .zx-radio-poziom {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}

.zx-radio-line-poziom {
	position: absolute;
	top: 0.9rem;
	border-top: 4px dotted #FFCC00; width: 66%; height: 0;
}

.zx-input-radio label {
	display: flex;
	position: relative;
	cursor: pointer;
	font-size: 1rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: white;
}

.zx-input-radio label:hover input ~ span {
	background-color: #444;
}

.zx-radio-poziom label {
	flex-direction: column;
	flex-grow: 1;
	align-items: center;
}

.zx-input-radio input{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.zx-input-radio span {
	height: 2rem;
	width: 2rem;
	background-color: #222;
	border-radius: 1rem;
	border: 2px solid #FFCC00;
}

.zx-input-radio span:after {
	content: "";
	position: relative;
	left: 0.45rem;
	top: 0.45rem;
	width: 0.9rem;
	height: 0.9rem;
	border: solid white;
	border-radius: 0.45rem;
	background-color: white;
	display: none;
}

.zx-input-radio input:checked ~ span:after {
	display: block;
}

.zx-input-radio .zx-radio-label {
	padding: 0.25rem;
	text-align: center;
}
/* *********************************** */

.zx-input-multicheck {
	position: relative;
	padding: 0rem 1rem;
	height: 100%;	
}

.zx-input-multicheck .zx-multicheck-poziom {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}

.zx-multicheck-line-poziom {
	position: absolute;
	top: 0.6rem;
	border-top: 4px dotted #FFCC00; width: 66%; height: 0;
}

.zx-input-multicheck label {
	display: flex;
	position: relative;
	cursor: pointer;
	font-size: 1rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: white;
}

.zx-input-multicheck label:hover input ~ span {
	background-color: #444;
}

.zx-input-multicheck label { 
	flex-direction: column;
	flex-grow: 1;
	align-items: center;
}

.zx-input-multicheck input{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.zx-input-multicheck span {
	height: 1.5rem;
	width: 1.5rem;
	background-color: #222;
	border-radius: 0rem;
	border: 2px solid #FFCC00;
}

.zx-input-multicheck span:after {
	content: "";
	position: relative;
	left: 0.45rem;
	top: -0.15rem;
	width: 0.60rem;
	height: 1.2rem;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: none;
}

.zx-input-multicheck input:checked ~ span:after {
	display: block;
}

.zx-input-multicheck .zx-multicheck-label {
	padding: 0.25rem;
	text-align: center;
}

/* *********************************** */
/* *********************************** */
.zx-submit-group {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-bottom: 2rem;
	
}

.zx-input-submit { 
	font-family: inherit;
	background-color: var(--kolor-1); 
	display: block;
	position: relative;
	margin: 0.2em;
	padding: 0 2rem 0 2rem;
	border: none;
	text-align: center;
	line-height: 2rem;
	white-space: nowrap;
	border-radius: 0.2em;
	font-size: 1.1rem;
	height: 2.5rem;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);	
	cursor: pointer;
	font-weight: 900;
	outline: 0;
}

.zx-input-cancel { 
	font-family: inherit;
	background-color: #aaa; 
	color: #333;
	display: block;
	position: relative;
	margin: 0.2em;
	padding: 0 2rem 0 2rem;
	border: none;
	text-align: center;
	line-height: 2rem;
	white-space: nowrap;
	border-radius: 0.2em;
	font-size: 1.1rem;
	height: 2.5rem;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);	
	cursor: pointer;
	font-weight: 900;
	outline: 0;
}