/**
 * EGroupware: Stylite Pixelegg template
 *
 * Definitions for login page
 *
 * Please do NOT change css-files directly, instead change less-files and compile them!
 *
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
 * @package pixelegg
 * @version $Id$
 */

@import (reference) "definitions.less";

@import "def_colors.less";


@keyframes login-apps {
	0% {transform: translateY(30px)}
	60%{transform:translateY(45px)}
	100% {transform: none}
}
/**
 * 23.1 Login page with stock background image
 */
div#loginMainDiv.stockLoginBackground {
	background-position-y: 100%;
	div#divAppIconBar
	{
		postion: relative;
		top: 5%;
	}
	div#divAppIconBar {
		div#divLogo {
			position: relative;
			left: -50px;
			div.login_logo_container {
				height: 120px;
				div.login_logo {
					width: 350px;
					max-width: 350px;
					background-size: 100%;
				}
			}
		}
		div#loginScreenMessage {
			font-weight: bold;
			color: white;
			font-family: egroupware, arial, helvetica, sans-serif;
		}
	}
	div#centerBox form {
	   border: 1px solid gray;
	   border-radius: 0 !important;
	}
}

//##############################################################################################################

#socialBox {
	display: inline-block;
	width: 100%;
	margin-top: 8px;
	#socialMedia {
		margin: 0 auto;
		a {
			&:first-child img {
				filter:none;
			}
			&:last-child {margin-right:0}

			margin: 5px;
			img {
				width: 24px;
				filter:contrast(0.3);
			}
		}
	}
}


/* ##################################################################################
 *       login page
 */

#loginMainDiv {
	padding: 0;
	height: 100%;
	width: 100%;
	border: none;
	margin: 0 auto 0px;
	background-color: white;
	background-image: url(../../api/templates/default/images/login_background.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	.egw_message_wrapper {
		box-shadow: 2px 1px 6px #bbbbbb;
		-moz-box-shadow: 2px 1px 6px #bbbbbb;
		-webkit-box-shadow: 2px 1px 6px #bbbbbb;
		-khtml-box-shadow: 2px 1px 6px #bbbbbb;
		min-width: 280px;
		width: max-content;
		margin: auto;
		padding-top: 2px;
		background-color:transparent;
		#egw_message{
			white-space: normal;
			background-image: none;
			border-left-width: 12px !important;
			&:not(.error_message):not(.warning_message) {
				display: none;
			}
			font-size: 9pt;
		}
    }
	// Logo Leiste
	#divAppIconBar {
		background: transparent;
		width: 100%;
		text-align: center;
		height: 30%;
		display: block;
		max-height: 40%;
		#divLogo {
			position: relative;
		    padding-top: 20px;
			.login_logo_container {
				width:250px;
				height:150px;
				max-height: 150px;
				max-width:250px;
				margin: 0 auto;
				.login_logo {
					width: auto;
					height: 100%;
					background-size:contain;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}
	}

	#loginScreenMessage [class $= "error"] {

	}
	// Meldung
	#loginScreenMessage:not([class $= "error"]) {
		margin: 1em;
		font-size: 12pt;
		img {max-width: 100%;}
		color: #0a5ca5;
	}
	div#login_footer {
		position: fixed;
		bottom: 0;
		display: inline-block;
		right: 0;
		width: 100%;
		height: 40px;
		background: #4177A2;
		overflow-x: clip;
		.apps {
			width: 812px;
			margin: 0 auto;
			display: flex;
			overflow: hidden;
			.app {
				width: 30px;
				height: 30px;
				margin: 5px 1% auto 2%;;
				display: flex;
				&:hover img.icon {transform:scale(1.1)}
				img.icon {
					width: 30px;
					filter: brightness(0) invert(1);
					height: 30px;
				}
				span {display:none;}
			}
			.app[data-id="guacamole"] {
				.content img.icon2-bg {right:15px;}
			}
			.tooltip {
				display: inline-flex;
				position: absolute;
				text-align: left;
				height: 34px;
				width: 30px;
				cursor: pointer;
			}
			.tooltip .content {
				min-width: 350px;
				top: -10px;
				left: 50%;
				height: 190px;
				max-height: 190px;
				transform: translate(-50%, -100%);
				padding: 10px 20px;
				color: #444444;
				background-color: #fafafa;
				font-weight: normal;
				font-size: 13px;
				border-radius: 3px;
				position: absolute;
				z-index: 99999999;
				box-sizing: border-box;
				visibility: hidden;
				opacity: 0;
				transition: opacity 0.8s;
				border: 1px solid #0d789f;
				border-bottom: 6px solid #4177A2;
				cursor: default;
				img.icon-bg {
					width: 35px;
					position: absolute;
					margin: 0 auto;
					right: 15px;
					top: 15px;
				}
				img.icon2-bg {right: 55px;}
				img.icon3-bg {right: 90px;}
				h3 {
					height: 30px;
					border-bottom: 1px solid #d9e4ed;
				}
			}

			.tooltip:hover .content {
				visibility:visible;
				opacity:1;
				&:hover {
					visibility:visible;
					opacity:1;
				}
			}
			.tooltip .content .arrow{
				width: 100%;
				position: absolute;
				left: 0;
				bottom: -21px;
				height: 15px;
				&::after {
					content: '';
					position: absolute;
					width: 9px;
					height: 9px;
					left: 50%;
					transform: translate(-50%, -50%) rotate(45deg);
					background-color: #4177A2;
				}
			}
		}
	}

	// Anmeldefenster / Box mit Mesaage + Form
	div#centerBox {
		margin: 0 auto -20px;
		background: transparent;
		border: none;
		z-index: 100;
		padding: 0;
		width: 280px;
		border-radius: 5px;
		.egw_logo {
			width: 24px;
			height: 24px;
			float: right;
			a.logo_footer {
				margin: auto;
				width: 24px;
				display: block;
				img {
					height: 24px;
					width: 24px;
				}
			}
		}


		// Formular
		form {
			opacity:0.94;
			background-color: white;
			padding:1em;
			border: 1px solid #cdcdce;
			border-radius: 5px;
			.hiddenCredential {display: none;}
			// Table
			table.divLoginbox {
				background-color: transparent;
				.border_radius_button_lefttop;
				tr.divLoginboxHeader {}

				// Passwort Image
				div.LoginPasswordImage {
					.gradient_vertical (@egw_color_1_a, @egw_color_2_d);
					img.passwordImage {
						margin: 0 auto;
						max-width: 400px;
						.bordered(5px);
					}
					img.passwordImage[src$="svg"] {
						.bordered(5px);
						.dimension_width_height_xl;
					}
				}
				td {
					font-size: 12pt;
					position: relative;
				}
				select {
					padding-left: 25px;
					width:100%;
					height: 42px;
					border: none;
					border-bottom: 1px solid silver;
					border-radius: 0px;
					background-color: transparent;
				}
				select[name="remember_me"] {
					/*background-image: url(../../node_modules/bootstrap-icons/icons/task.png);*/
					background-repeat: no-repeat;
					background-position-x: 0;
				}
				td.remember_me_row {
					border-bottom: 1px solid silver;
					span.remember_me {color:@color_placeholder;opacity:1;}
				}
				select:focus, select:hover {box-shadow:none;}
				input {
					width: ~"calc(250px - 22px)";
					height: 40px;
					padding: 0;
					margin: 0;
					border: none;
					border-bottom: 1px solid silver;
					padding-left: 25px;
					background-color: transparent;
					font-size: 100%;
				}
				input:hover {}
				input:focus {
					outline: none;
				}
				span.field_icons {
					position: absolute;
					left: 0px;
					width: 20px;
					height: 20px;
					background-size: 16px;
					background-position: left center;
					background-repeat: no-repeat;
					top: 12px;
					z-index: 100;
					opacity:0.5;
				}
				span.field_icons.username {background-image: url(../../node_modules/bootstrap-icons/icons/person.svg);}
				span.field_icons.password {background-image: url(../../node_modules/bootstrap-icons/icons/key.svg);}
				span.field_icons.remember_me {background-image: none;z-index:0;width: 230px;padding-left: 31px;}
				span.field_icons.domain {background-image: url(../../node_modules/bootstrap-icons/icons/globe2.svg);}
				span.field_icons.language {background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg);}
				input[type="checkbox"] {
					height: 25px !important;
					margin-top: 7px;
					width: auto;
				}
				input[type="submit"], select.onChangeSubmit {
					background-color: #4177A2;
					.color_0_gray;
					.fontsize_xxl;
					padding-left:0;
					width: 250px;
					&:hover{}
					&:focus {}
					margin-top: 15px;
				}
				select.onChangeSubmit {
					padding-left: 25px;
				}
				.registration {
					font-size: 12px;
					a:not(:first-child) {
						&:before {
							padding-left:5px;
							padding-right:5px;
							content: '|';
						}
					}
				}
				a.signup {
					margin-top: 8px;
					display: block;
				}
			}
		} // Formular
    } //center box
} //  #loginMainDiv
// Ende Login / Start #################################################

#wrap {
	div.animation_login {
		margin: 0.3em;
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	img[src$="svg"],
	background-image[url$="svg"] {
		.gradient_vertical (@egw_color_2_e, @egw_color_2_e);
	}
}

#img1, #img2, #img3, #img4 , #img5 , #img6 , #img7 , #img8 {
	width:12%;
	z-index:-1;
	animation-name: test;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	-webkit-animation-name: test;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	opacity:0;
}
#img1 {
	animation-delay:0s;
	-webkit-animation-delay:0s
}
#img2 {
	animation-delay:3s;
	-webkit-animation-delay:3s
}
#img3 {
	animation-delay:6s;
	-webkit-animation-delay:6s
}
#img4 {
	animation-delay:9s;
	-webkit-animation-delay:9s
}
#img5 {
	animation-delay:12s;
	-webkit-animation-delay:12s
}
#img6 {
	animation-delay:15s;
	-webkit-animation-delay:15s
}
#img7 {
	animation-delay:18s;
	-webkit-animation-delay:18s
}
#img8 {
	animation-delay:21s;
	-webkit-animation-delay:21s
}
@-webkit-keyframes test {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes test {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@media only screen and (max-width : 1024px) and (min-width: 736px)
{
	#loginMainDiv {
		#divAppIconBar {
			#divLogo {
				.login_logo_container {
					height: 90px;
				}
			}
		}
	}
}