/* ============================================================================== 
   File: scr_input.css
	- Stylesheet for TipTool INPUT, LABELS, BUTTONS e.t.c.
	- Author: Daniel Hugentobler (DH)
	- created: 19.DEC.2018, taken from scr_generic.css
	- amended: 25.MAY.2019, DH: override chrome's input's autofill default colors with an animations.
	- amended: 20.JUN.2019, DH: profile dummy share-buttons
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
	- amended: 11.JUN.2021, DH: added btnToTop & btnToBottom
   ============================================================================== */

/*  ----  */
/*  FORM  */
/*  ----  */
form {
	margin-bottom: 0.8rem;
	margin-top: 0.8rem;
}

.user_input {
	padding-top: 0.8rem;
	padding-right: 0.6rem;
	padding-bottom: 0.8rem;
	padding-left: 0.6rem;
	border-radius: 1.6rem;
	border: 0.12rem solid silver;
	margin-top: 0.3rem;
}
.user_input div {
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.user_input select {
	display: inline-block;
    vertical-align: top;
	cursor: pointer;				/* hand */
}
.user_input .team select {
	margin-top: 0.6rem;				/* v-align center/middle has no effect => margin to align it with the flag */
}
.user_input fieldset {
	padding-top: 0.2rem;
	padding-right: 0.5rem;
	padding-bottom: 0.2rem;
	padding-left: 1rem;				/* corresponds to radius */
	border-radius: 1rem;
	border: 0.1rem solid silver;
	margin-bottom: 0.4rem;
}
.user_input legend {
	font-weight: bold;
}

/* hidden image, for reader purposes (img-alt) */
.mandatory {
	font-weight: bold;
}
.mandatory img {
	margin: 0;
	padding: 0;
	width: 0; 
	height: 0;
}

/*  ---------------------  */
/*  INPUT-FIELDS & LABELS  */
/*  ---------------------  */
input,
textarea,
select {
	cursor: default;				/* no Hand */
	border-radius: 1rem;			/* round corners */
	padding: 0 0.6rem 0;
	background-color: #eee;
	color: black;
	outline: none; 
}

.byNight input,
.byNight textarea,
.byNight select {
	background-color: #202020;		/* extremely dark gray */
	color: lightgray;
}

/* override chrome's autofill default with an animation */
input:-webkit-autofill,
textarea:-webkit-autofill {
	-webkit-animation-name: autofill_day;
	-webkit-animation-fill-mode: both;
	animation-name: autofill_day;
	animation-fill-mode: both;
}
@-webkit-keyframes autofill_day {
	to {
	background-color: #eee;
	color: black;
	}
}
@keyframes autofill_day {
	to {
	background-color: #eee;
	color: black;
	}
}
.byNight input:-webkit-autofill,
.byNight textarea:-webkit-autofill {
	-webkit-animation-name: autofill_night;
	-webkit-animation-fill-mode: both;
	animation-name: autofill_night;
	animation-fill-mode: both;
}
@-webkit-keyframes autofill_night {
	to {
		background-color: #202020;		/* extremely dark gray */
		color: lightgray;
	}
}
@keyframes autofill_night {
	to {
		background-color: #202020;		/* extremely dark gray */
		color: lightgray;
	}
}
input:active,
input:focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
	background-color: #D8EBAD;		/* light olive */
	color: black;
}
.byNight input:active,
.byNight input:focus,
.byNight select:active,
.byNight select:focus,
.byNight textarea:active,
.byNight textarea:focus {
	background-color: #003D00;		/* very dark green */
	color: white;
}

/* override chrome's autofill default with an animation */
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
textarea:-webkit-autofill:active {
	-webkit-animation-name: autofill_day_focus;
	-webkit-animation-fill-mode: both;
	animation-name: autofill_day_focus;
	animation-fill-mode: both;
}
@-webkit-keyframes autofill_day_focus {
	to {
		background-color: #D8EBAD;		/* light olive */
		color: black;
	}
}
@keyframes autofill_day_focus {
	to {
		background-color: #D8EBAD;		/* light olive */
		color: black;
	}
}
.byNight input:-webkit-autofill:active,
.byNight input:-webkit-autofill:focus,
.byNight textarea:-webkit-autofill:active,
.byNight textarea:-webkit-autofill:active {
	-webkit-animation-name: autofill_night_focus;
	-webkit-animation-fill-mode: both;
}
@-webkit-keyframes autofill_night_focus {
	to {
		background-color: #003D00;		/* very dark green */
		color: white;
	}
}

/* specific input-widths */
.txt_s {
	width: 40%;
}
.txt_m {
	min-width: 65%;
	max-width: 65%;
}
.txt_l {
	width: 90%;
}
/* fixed input-field lengths */
.txt_one {
	width: 4rem;
}
.txt_code {
	width: 6rem;
}
.txt_lat_long {
	width: 7rem;
}
.txt_date {
	width: 14rem;
}
/* numeric input fields */
.num {
	text-align: right;
}

label,
.label {
	display: inline-block;			/* to allow width for an inline element */
	width: 20%;
	min-width: 10rem;
	max-width: 20rem;
	cursor: pointer;				/* Hand */
	vertical-align: top;
	font-weight: bold;
	padding-right: 0.2rem;
	padding-bottom: 0.4rem;
}
/* pseudo-label for non-input-controls */
div .label {
	cursor: default;				/* no Hand */
}

/* mark error-input after palusi-msg */
.plausi {
	border: 0.2rem solid red;
	border-radius: 1rem;
	padding: 0.4rem;
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	-webkit-transition: all 0.4s;		
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

/* very small inset-shadow */
textarea,
select,
input[type=url],
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=checkbox],
input[type=datetime-local], 
#tblCalendar input {
	-webkit-box-shadow: 0.15rem 0.15rem 0.3rem grey inset;
	-moz-box-shadow: 0.15rem 0.15rem 0.3rem grey inset;
	box-shadow: 0.15rem 0.15rem 0.3rem grey inset;
	/* em!, not rem */
	height: 1.8em;
	border-radius: 0.9em;
	font-size: 1.1em;
}
.byNight textarea,
.byNight select,
.byNight input[type=url],
.byNight input[type=text],
.byNight input[type=email],
.byNight input[type=number],
.byNight input[type=password],
.byNight input[type=checkbox],
.byNight input[type=datetime-local],
.byNight #tblCalendar input  {
	border: 0.1rem solid forestgreen;	/* for MS IEx; not parsing inset shadows */
	-webkit-box-shadow: 0 0 0.8rem inset forestgreen;
	-moz-box-shadow: 0 0 0.8rem inset forestgreen;
	box-shadow: 0 0 0.8rem inset forestgreen;
}

textarea,
select,
input[type=url],
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=checkbox],
input[type=datetime-local] {
	border: 0.2rem inset gray;
}
.user_input textarea {
	width: 70%;
	height: 6rem;
}
.user_input textarea .txt_m {
	min-width: 65%;
	max-width: 65%;
}

/*  -------------------  */
/*  PUSHBUTTONS          */
/*  incl. navi_alphabet  */
/*  -------------------  */
/* PB section of a form */
/* keep push-buttons aligned with input-fields by help of flexbox-settings in wide viewport */
div .PBs {
	display: -webkit-flex;
	display: flex;
	flex-direction: -webkit-row;
	flex-direction: row;
	justify-content: -webkit-flex-start;
	justify-content: flex-start;
	align-items: -webkit-flex-start;
	align-items: flex-start;
}
.pushButtons {
	display: inline-block;
/*	padding-left: 0.4rem;*/
}
.pushButtons li {
	display: inline;
}

#navi_alphabet li {
	display: inline-block; 		/* horizontal */
	list-style-type: none; 		/* no bullets */
	margin-top: 0.4rem;
	margin-bottom: 0.5rem;
}

.button {
	margin-top: 0.4rem;
	cursor: pointer;
}
/* looks ugly => commented
#frmJoin input[type=submit]{
	font-variant: small-caps;
}
*/
input[type=button],
input[type=submit],
input[type=reset] {
	font-size: 1em;
	padding: 0.3rem;
	padding-right: 0.8rem;
	padding-left: 0.8rem;
	border: 0.2rem outset gray;
	margin-right: 0.8rem;
	cursor: pointer;
}

.btn,
.btnDummy,
input[type=button],
input[type=submit],
input[type=reset],
#navi_alphabet li a,
.btn:disabled:focus,	/* disabled buttons stay unchanged */
.button:disabled:focus,
input[type=button]:disabled:focus,
input[type=submit]:disabled:focus,
input[type=reset]:disabled:focus,
.btn:disabled:hover,
.button:disabled:hover,
input[type=button]:disabled:hover,
input[type=submit]:disabled:hover,
input[type=reset]:disabled:hover {
	font-weight: normal;
	white-space: nowrap;					/* prevent the wrapping of the box */
	border-radius: 1.2rem;
	border: 0.2rem outset gray;				/* same as for input[type=button] etc. */
	-webkit-background-image: linear-gradient(white, #C7C7C7);
	-moz-background-image: linear-gradient(white, #C7C7C7);
	-ms-background-image: linear-gradient(white, #C7C7C7);
	-o-background-image: linear-gradient(white, #C7C7C7);
	background-image: linear-gradient(white, #C7C7C7);
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem gray;
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem gray;
	box-shadow: 0.4rem 0.4rem 0.6rem gray;			/* a bit larger for MS IEx */
	z-index: 5;	/* lets the shadow cross td-boundaries instead of being cut-off */
}
/* gray out DISABLED buttons and input fields */
.btn:disabled,
.button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled, 
.btn:disabled:focus,
.button:disabled:focus,
input[type=button]:disabled:focus,
input[type=submit]:disabled:focus,
input[type=reset]:disabled:focus,
.btn:disabled:hover,
.button:disabled:hover,
input[type=button]:disabled:hover,
input[type=submit]:disabled:hover,
input[type=reset]:disabled:hover,
input[type=text]:disabled,
input[type=textarea]:disabled,
select:disabled {
	color: gray;
}
input[type=submit]:disabled,
input[type=submit]:disabled:focus,
input[type=submit]:disabled:hover {
	font-weight: bold;								/* keep it */
}

.closeX {
	border-radius: 50%;
	position: absolute;
	right: 0;
	top: 0.5rem;
}

.btnToTop,
.btnToBottom {
	height: auto;
	width: auto;
	position: -webkit-sticky;
	position: sticky;
	left: 48%; /* 48% for ca. center */
	z-index: 5;
}
.btnToTop img,
.btnToBottom img {
	display: inline-block;
	max-height: 2rem; 
	max-width: 2rem; 
	min-height: 2rem; 
	min-width: 2rem; 
}
.btnToTop {
	bottom: auto;
	top: 0.4rem;
}
.btnToBottom {
	bottom: 0.4rem;
	top: auto;
}

#navi_alphabet li a {
	display: inline-block;
	padding: 0.2rem;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
/*	line-height: 3.2rem;*/
	min-width: 2.4rem;
	max-width: 2.4rem;
	min-height: 2.4rem;
	max-height: 2.4rem;
	text-align: center;
	vertical-align: central;
}

/* PBs: invert colors */
.byNight .btn,
.byNight .btnDummy,
.byNight input[type=button],
.byNight input[type=reset],
.byNight #navi_alphabet li a {
	color: lightgray;
	-webkit-background-image: linear-gradient(gray, black);
	-moz-background-image: linear-gradient(gray, black);
	-ms-background-image: linear-gradient(gray, black);
	-o-background-image: linear-gradient(gray, black);
	background-image: linear-gradient(gray, black);
	-webkit-box-shadow: 0 0 2rem gray;	/* gray glow */
	-moz-box-shadow: 0 0 2rem gray;
	box-shadow: 0 0 2rem gray;
}
.btn:active,
.btn:focus,
.btn:hover,
.btnDummy:active,
.btnDummy:focus,
.btnDummy:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:active,
input[type=reset]:focus,
input[type=reset]:hover,
#navi_alphabet li a:active,
#navi_alphabet li a:focus,
#navi_alphabet li a:hover {
	-webkit-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-moz-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-ms-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-o-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	background-image: linear-gradient(olivedrab, darkolivegreen, black);
	color: white;
	cursor: pointer;
}

.byNight .btn:active,
.byNight .btn:hover,
.byNight .btn:focus,
.byNight .btnDummy:active,
.byNight .btnDummy:hover,
.byNight .btnDummy:focus,
.byNight input[type=button]:active,
.byNight input[type=button]:hover,
.byNight input[type=button]:focus,
.byNight input[type=reset]:active,
.byNight input[type=reset]:hover,
.byNight input[type=reset]:focus
.byNight #navi_alphabet li a:active,
.byNight #navi_alphabet li a:hover,
.byNight #navi_alphabet li a:focus {
	border: 0.2rem solid forestgreen; /* enhance glow */
	color: lightgray;
	-webkit-background-image: linear-gradient(forestgreen, black);
	-moz-background-image: linear-gradient(forestgreen, black);
	-ms-background-image: linear-gradient(forestgreen, black);
	-o-background-image: linear-gradient(forestgreen, black);
	background-image: linear-gradient(forestgreen, black);
	-webkit-box-shadow: 0 0 2rem lime;		/* lime glow */
	-moz-box-shadow: 0 0 2rem lime;
	box-shadow: 0 0 2rem lime;
}
/* PRESSED BUTTON */
.btn:active,
.btnDummy:active,
input[type=button]:active,
input[type=reset]:active,
#navi_alphabet li a:active {
       border: 0.2rem inset gray;	/* invert the border to make it look as if pressed down */
       color: white;				/* brighter than normal */
       -webkit-box-shadow: none;
       -moz-box-shadow: none;
       box-shadow: none;
}
/*.funcIcon:hover .btn,
.linkIcon:hover .btn,
.funcIcon:focus .btn,
.linkIcon:focus .btn {
	border: 0.2rem solid darkorange;
}*/
.funcIcon:active .btn,
.linkIcon:active .btn {
	border: 0.2rem outset gray;
}

/* separate for day & night */
/* PRESSED BUTTON by night: make it glow */
.byNight .funcIcon:hover .btn,
.byNight .linkIcon:hover .btn,
.byNight .funcIcon:focus .btn,
.byNight .linkIcon:focus .btn {
	border: 0.2rem solid forestgreen; /* enhance glow */
}
.byNight .btn:active,
.byNight .btnDummy:active,
.byNight input[type=button]:active,
.byNight input[type=reset]:active,
.byNight #navi_alphabet li a:active, 
.byNight .funcIcon:active .btn,
.byNight .linkIcon:active .btn {
	   border: 0.2rem solid lime;	/* lime to enhance glow */
       color: white;				/* brighter than normal */
}


/*  --------------------------------------  */
/*  SUBMIT BUTTON => call to action => RED  */
/*  --------------------------------------  */
input[type=submit] {
	color: #8B0000;						/* dark red */
	font-weight: bold;
}
.byNight input[type=submit] {
	color: red;							/* bright red */
	-webkit-background-image: linear-gradient(#8B0000, #5C0000, black); /* dark red to black */
	-moz-background-image: linear-gradient(#8B0000, #5C0000, black);
	-ms-background-image: linear-gradient(#8B0000, #5C0000, black);
	-o-background-image: linear-gradient(#8B0000, #5C0000, black);
	background-image: linear-gradient(#8B0000, #5C0000, black);
	-webkit-box-shadow: 0 0 2rem red;	/* red glow */
	-moz-box-shadow: 0 0 2rem red;
	box-shadow: 0 0 2rem red;
}
input[type=submit]:active,
input[type=submit]:focus,
input[type=submit]:hover {
	-webkit-background-image: linear-gradient(#8B0000, #5C0000, black); /* dark red to black */
	-moz-background-image: linear-gradient(#8B0000, #5C0000, black);
	-ms-background-image: linear-gradient(#8B0000, #5C0000, black);
	-o-background-image: linear-gradient(#8B0000, #5C0000, black);
	background-image: linear-gradient(#8B0000, #5C0000, black);
	color: white;
}
.byNight input[type=submit]:active,
.byNight input[type=submit]:focus,
.byNight input[type=submit]:hover {
	-webkit-background-image: linear-gradient(#e50000, #5C0000, black); /* red to black */
	-moz-background-image: linear-gradient(#e50000, #5C0000, black);
	-ms-background-image: linear-gradient(#e50000, #5C0000, black);
	-o-background-image: linear-gradient(#e50000, #5C0000, black);
	background-image: linear-gradient(#e50000, #5C0000, black);
	-webkit-box-shadow: 0 0 2rem red; /* glow */
	-moz-box-shadow: 0 0 2rem red;
	box-shadow: 0 0 2rem red;
}
.byNight input[type=submit]:focus,
.byNight input[type=submit]:hover {
	border: 0.2rem solid #e50000; /* enhance glow */
	color: lightgray;
}
.byNight input[type=submit]:active {
	border: 0.2rem solid #ff5c4c; /* brighten up */
/*	color: #ff7666;*/ /* nope! */
}

/*  --------  */
/*  PBs: -/+  */
/*  --------  */
.user_input .tblDisplay .addOne,
.user_input .tblDisplay .subtractOne,
.user_input .addFive,
.user_input .subtractFive,
.user_input .addOne,
.user_input .subtractOne {
	text-align: left;
	/* override btn-settings to adjust height & width to input fields */
	min-height: 2.2rem;
	max-height: 2.2rem;
	min-width: 2.2rem;
	max-width: 2.2rem;
	padding: 0;
}
.user_input .tblDisplay .addOne,
.user_input .addOne {
	margin-left: 0.4rem;	/* get some distance */
	padding-left: 0.3rem;
}
.user_input .addFive {
	padding-left: 0.3rem;
}
.user_input .tblDisplay .subtractOne,
.user_input .subtractOne {
	padding-left: 0.4rem;
}
.user_input .subtractFive {
	padding-left: 0.4rem;
}
.inputTip {
	display: inline-block;
	margin-left: 0.4rem;
	margin-top: 0;
}

/* --------------- */
/*   S E A R C H   */
/* --------------- */
#search {
	background-color: transparent;
	border: 0.12rem solid lime;
	box-shadow: none;
	color: lime;
	font-size: 1rem;
	font-weight: bold;
	min-width: 20%;
	max-width: 70%;
	padding-bottom: 0.1rem;
	padding-top: 0.1rem;
}
/* remove the unstylable x */
#search::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
#search::placeholder {
	color: lime;
}
/* non-search input placeholders */
.byNight ::placeholder {
	color: forestgreen;
}
/* override chrome's autofill default with an animation */
#search:-webkit-autofill {
	-webkit-animation-name: autofill_search;
	-webkit-animation-fill-mode: both;
	animation-name: autofill_search;
	animation-fill-mode: both;
}
@-webkit-keyframes autofill_search {
	to {
		color: lime;
		background-color: transparent;
	}
}
@keyframes autofill_search {
	to {
		color: lime;
		background-color: transparent;
	}
}

/* ------------------------ */
/* 		MEDIUM viewport		*/
/* ------------------------ */
@media (max-width: 60rem) {
	/* provide some distance between the input and its line-broken help-button */
	input,
	textarea,
	select {
		margin-bottom: 0.8rem;
	}
}

/* ------------------------ */
/* 		NARROW viewport		*/
/* ------------------------ */
@media (max-width: 40rem) {
	.user_input textarea {
		width: 100%;
	}
	label,
	.label {
        display: block;
        width: 95%;
    }
	#nav_item_profile li label {
		/* profile dummy share-buttons: keep the styling */
		display: inline-block;
		min-width: 10rem;
		max-width: 20rem;
		width: 25%;
	}

	/* set specific %age-lengths all to 90% */
	.txt_s,
	.txt_m,
	.txt_l {
		min-width: 90%;					/* leave space for help-icon! */
		max-width: 90%;
	}

    .label_data input {
        width: 90%;					/* leave space to the right for possible help-icon */
    }

	/* prevent any sbx from flowing off to the right */
	select {
		max-width: 100%;
	}
	/* keep PBs aligned with entry fields */
	.PBs {
		margin-top: 1rem;
	}
	div .PBs label {
		display: none;
	}
	/* move PBs to left... */
	.pushButtons {
		padding: 0;
		margin: 0;
	}
	/* ...and place them one under the other */
	.pushButtons li {
		display: block;
	}
	/* enforce a line break and discard the margin*/
	.inputTip {
		display: block;
		margin-left: 0;
		margin-top: 0.4rem;
	}
} /* end of NARROW */