/**
 * EGroupware: kdots template
 *
 * Definitions for login page
 *
 * Please do NOT change css-files directly, instead change less-files and compile them!
 *
 * @link https://www.egroupware.org
 * @license https://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Milan Koch <mk[at]egroupware.org>
 * @package kdots
 */

:root {

  --footer_height: 40px;
  --text-color: var(--sl-color-neutral-50);
  --input-text-color: var(--sl-color-neutral-900);
  --input-color: var(--sl-color-neutral-50);
  --button-color: var(--sl-color-primary-700);
  --box-color: var(--loginbox-custom-color, var(--sl-color-neutral-700));
}

.bootstrap-icons {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/***
LOGIN MAIN
 ***/
body {
  overflow: auto;
  @media (max-device-width: 768px) {
	font-size: 2em;
	form {
	  flex: 0 1 auto;

	  input[type="checkbox"] {
		width: 2em !important;
		height: 2em;
	  }
	}
  }
  @media (max-height: 950px){
	.egw_message_wrapper{
	  order: 2;
	}
  }
  margin: 0;

  span, a {
	color: var(--text-color);
  }
  .et2_required:not(.hasValue){
	background-color: var(--sl-color-warning-100, #ffffd0);
	--sl-input-background-color:  var(--sl-color-warning-100, #ffffd0);
  }

  input, select {
	color: var(--input-text-color);
	background-color: var(--input-color);
	width: 59%;
	border: 1px outset var(--sl-color-gray-700);
	border-radius: var(--sl-border-radius-medium);
	padding-block: 0.5em;
	padding-inline: 0.5em;
	font-size: 1em;
  }
  select {
	width: 62%;
  }
}

div#loginScreenMessage {
	font-weight: bold;
	font-size: large;
	color: var(--text-color);
	letter-spacing: 0.2rem;
}

#loginMainDiv {
  height: calc(100vh - var(--footer_height));
  display: flex;
  background-size: cover;
  flex-direction: column;
  align-items: center;

  #login_logo {
	padding: 10% 0 5% 0;
	width: 40rem;
	max-height: 120px;
	max-width: 100%;
  }

  .egw_message_wrapper {
	display: flex;
	max-height: 20%;
	font-size: 2em;
	height: fit-content;
	background: var(--sl-color-neutral-100);
	border-radius: var(--sl-border-radius-medium);
	padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
	margin-inline: 1rem ;
	border-left: .5em solid var(--sl-color-warning-500);
	&:has(.error_message){
	  border-left: .5em solid var(--sl-color-danger-500);
	}

	&:has(div#egw_message:empty) {
		display: none;
	}
	&:not(:hover){
	  .close{
		display: none;
	  }
	}

	#egw_message {
	  display: flex;
	  color: var(--sl-color-neutral-900);
	}

	.close {
	  cursor: pointer;
	  font-size: .5em;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 2em;
	}
  }

  #divAppIconBar {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
  }

  #centerBox {
	display: flex;
	height: 100%;
	max-width: 40em;
	justify-content: center;
	align-items: stretch;
	flex-direction: column;

	form {
	  padding: 1em;

	}

	.divLoginbox {
	  background: var(--box-color);
	  display: flex;
	  flex-direction: column;
	  padding: var(--sl-spacing-medium) var(--sl-spacing-x-large);
	  border-radius: var(--sl-border-radius-large);
	  gap: var(--sl-spacing-medium);

	  & > div:not([class*="hidden"]) {
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		& > span {
		  padding-right: 1em;
		  width: 40%;
		}
	  }

	  div.discovery_block {
		input:last-child {
		  margin-bottom: 1em;
		}
	  }

	  div.centered {
		justify-content: center;
	  }

	  input[type="submit"] {
		font-weight: bold;
		font-size: large;
		width: 100%;
		background-color: var(--button-color);
		color: var(--text-color);
	  }

	  div.remember_me_row {
		justify-content: start;

		label {
		  width: 41%;
		}

		input[type="checkbox"] {
		  width: auto;
		  margin: 0;
		}
	  }

	  div.hiddenCredential {
		display: contents;
	  }

	  div.login_button {
		padding-top: 1em;
	  }

	  div.registration {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 1em;
	  }

	  #socialBox, #socialMedia {
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		a img {
		  height: 2.5em
		}
	  }
	}
  }
}

/***
LOGIN FOOTER
same as in pixelegg for now
***/
div#login_footer {
  position: fixed;
  bottom: 0;
  display: inline-block;
  right: 0;
  width: 100%;
  height: var(--footer_height);
  background: var(--button-color);
  overflow-x: clip;

  .apps {
	display: flex;
	justify-content: center;

	.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;
	  }
	}
  }
}