@import url("/univention/js/dijit/themes/umc/bootstrap.css");
:root {
	/* cursors */
	--cursor-disabled: not-allowed;


	/* border-radius
	// interactible and container are now in theme. we mention them here for backwards compatibility */
	--border-radius-interactable: 0.25rem;
	--border-radius-container:    0.5rem;
	--border-radius-notification: var(--border-radius-container);
	--border-radius-tooltip:      0.25rem;
	--border-radius-circles:      50%;


	/* layout */
	--layout-spacing-unit: 0.5rem;
	--layout-spacing-unit-small: calc(var(--layout-spacing-unit) / 2);
	--layout-height-header: 3rem;
	--layout-height-header-separator: var(--layout-spacing-unit-small);


	/* buttons */
	--button-size: 36px;
	--button-icon-size: 16px;
	--button-font-size: var(--font-size-4);
	--button-border-radius: var(--border-radius-interactable);
	--button-icon-border-radius: var(--border-radius-circles);

	--button-bgc-transition: background 250ms;


	/* input fields */
	--inputfield-size: 2.75rem;
}
/** reset browser defaults that are not covered by bootstrap.css
and overwrite unwanted bootstrap defaults
**/
*,
p,
label,
h1, h2, h3, h4, h5, h6,
input {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
}
input[type="checkbox"],
input[type="radio"] {
	cursor: pointer;
}
button[disabled],
html input[disabled] {
	cursor: var(--cursor-disabled);
}

html {
	font-size: var(--font-size-html);
}
html, body {
	padding: 0;
	margin: 0;
	background-color: var(--bgc-content-body);
	color: var(--font-color-contrast-high);
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	line-height: var(--font-lineheight-normal);
	font-size: var(--font-size-body);
}
a {
	color: var(--font-color-contrast-high);
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	font-size: var(--font-size-body);
	text-decoration: none;
}
header {
	background-color: var(--bgc-content-header);
	height: var(--layout-height-header);
	min-height: 48px;
	position: fixed;
	z-index: 1000;
	width: 100%;

	padding: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
}
header nav {
	display: flex;
	align-items: center;
	margin-left: calc(2 * var(--layout-spacing-unit));
}
header a {
	color: inherit;
	text-decoration: none;
}
header h2 {
	display: inline-block;
}
main {
	margin: 8px;
	padding-top: 2em;
}
body > .container {
	padding-top: 2em;
}
body > .container > nav {
	word-break: break-all;
	overflow-y: auto;
	overflow-x: hidden;
	padding: calc(2 * var(--layout-spacing-unit));
	background-color: var(--bgc-content-container);
	border-radius: var(--border-radius-container);
}
body > .container > nav:last-child {
	margin-bottom: calc(2 * var(--layout-spacing-unit));
}
body > .container > nav, body > main {
	float: left;
	position: relative;
	top: 48px;
}
body > .container > nav > ul > li{
	list-style: none;
}
header > nav > svg {
	height: var(--font-size-2);
	width: var(--font-size-2);
	margin-right: var(--layout-spacing-unit);
	fill: currentColor;
	color: inherit;
}

input[type=image][name=jpegPhoto-preview] {
	max-width: 250px;
	max-height: 250px;
	min-height: 250px;
}

details {
	margin-inline-start: 2px;
	margin-inline-end: 2px;
	padding-block-start: 0.35em;
	padding-inline-start: 0.75em;
	padding-inline-end: 0.75em;
	padding-block-end: 0.625em;
	min-inline-size: min-content;
	border-width: 0;
	border-top-width: 2px;
	border-style: groove;
	border-color: threedface;
	border-image: initial;
	margin-bottom: 0.5em;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
	box-shadow: var(--box-shadow);
	--bgc: var(--button-bgc);
	background: var(--bgc);
	font-size: var(--button-font-size);
	border-radius: var(--button-border-radius);
	transition: opacity 250ms, var(--button-bgc-transition);
	color: var(--font-color-contrast-high);
	height: var(--button-size);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.5rem;
}

input, select {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	--color: var(--font-color-contrast-high);
	--border-color: transparent;
	--local-icon-color: var(--color);
	--bgc: var(--bgc-inputfield-on-container);
	/*position: relative;*/
	height: var(--inputfield-size);
	color: var(--color);
	font-size: var(--font-size-3);
	background-color: var(--bgc);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-interactable);
	transition: background-color, color, border;
	transition-duration: 250ms;
	outline: none;
	margin: 0 0.5em;
}

input:hover,
input:focus,
select:hover,
select:focus {
	border-color: var(--font-color-contrast-low);
}

select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="password"] {
	/* FIXME: otherwise more and less than 100 is used */
	width: 100%;
}

fieldset {
	padding: 1em;
	border: 2px solid var(--bgc-content-body);
	background-color: var(--bgc-content-container);
	border-radius: var(--border-radius-container);
}

div.row {
	margin: 0 -0.5rem 0 -0.5rem;
	width: 100%; /* really? */
}

div.row .label-wrapper {
	display: inline-block;
	padding: 0 0.5rem 1rem 0.5rem;
}
div.row .label-wrapper label {
	display: inline-flex;
	vertical-align: bottom;
	margin-bottom: var(--layout-spacing-unit-small);
}
div.row .label-wrapper input,
div.row .label-wrapper select {
	/*height: 100%;*/
	text-overflow: ellipsis;
	padding: 0 calc(3 * var(--layout-spacing-unit-small)) !important;
}

label {
	--local-color-normal: var(--font-color-contrast-middle);
	--local-color: var(--local-color-normal);
	display: inline-flex;
	align-items: center;
	font-size: var(--font-size-4);
	color: var(--local-color);
	transition: color 250ms;
}
/* FIXME: all sizes are little bit reduced otherwise it doesn't fit into one line */
.udmSize-OneThird {
	width: 15%;
}
.udmSize-Half {
	width: 11%;
}
.udmSize-TwoThirds {
	width: 31%;
}
.udmSize-One {
	width: 48%;
}
.udmSize-FourThirds {
	width: 64%;
}
.udmSize-OneAndAHalf {
	width: 73%;
}
.udmSize-FiveThirds {
	width: 82%;
}
.udmSize-Two {
	width: 100%;
}

.grid {
	background-color: var(--bgc-content-container);
	border-radius: var(--border-radius-container);
	overflow: hidden;
	width: 100%;
}
.grid-header {
	display: flex;
	padding: var(--layout-spacing-unit);
	flex: 0 1 auto;
	overflow: hidden;
	min-height: var(--button-size);
}
.grid-header button {
	margin: 0 0.5rem;
}
.grid-header span {
	flex: 0 1000 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	font-size: var(--font-size-5);
	color: var(--font-color-contrast-middle);
	padding: var(--layout-spacing-unit);
	overflow: hidden;
	min-width: 4rem;
}
.grid table {
	width: 100%;
}
.grid tr {
	font-size: var(--font-size-4);
	line-height: 1;
	transition: background-color 250ms;
	border-top: 1px solid var(--bgc-content-body);
}
.grid tr th.check,
.grid tr td.check {
	width: 2em;
}
img.grid-icon {
	width: 16px;
	height: 16px;
}

details {
	border-radius: 0;
	border-top: 2px solid var(--bgc-content-body);
	margin-bottom: 0;
}
summary {
	font-size: var(--font-size-2);
	line-height: var(--font-lineheight-normal);
	font-weight: 600%;
	user-select: none;

	padding: var(--layout-spacing-unit);
}
legend {
	border-radius: 0;
	border-bottom: 2px solid var(--bgc-content-body);
	color: var(--font-color-contrast-high);
	font-size: var(--font-size-1);
	line-height: var(--font-lineheight-normal);
	font-weight: 600%;
	user-select: none;

	padding: calc(2 * var(--layout-spacing-unit));
}

legend:hover,
summary:hover,
legend:focus,
summary:focus {
	background-color: var(--bgc-titlepane-hover);
	border-radius: var(--border-radius-container);
}

pre {
	background-color: var(--bgc-content-container);
	border-radius: var(--border-radius-container);
	color: var(--font-color-contrast-high);
}

.error {
	background-color: var(--bgc-error);
}
.warning {
	background-color: var(--bgc-warning);
}
.success {
	background-color: var(--bgc-success);
}
.error, .warning, .success {
	border-radius: var(--border-radius-tooltip);
	padding: 0.4em;
}

/* display grid buttons in one row */
div[style*="display: flex"] > form {
	display: flex;
}

form#add section,
form#edit-form section,
form#edit section {
	display: none;
}
form#add section:target,
form#edit-form section:target,
form#edit section:target {
	display: block;
}
a[rel="udm:tab-switch"] {
	cursor: pointer;
	padding: 10px;
	/*background-color: var(--bgc-content-container);*/
	background-color: var(--bgc-content-body);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	margin: 2px;
	display: flex;
}

.tree {
/*	background-color: var(--bgc-tree-row-selected);*/
}
.tree-item {
	line-height: 1;
	font-size: var(--font-size-4);
	box-sizing: content-box;
	/*transition: background-color 0.2s;*/
}
.tree .tree-icon {
	height: 1em;
	width: 1em;
	padding: 0 var(--layout-spacing-unit);
	position: relative;
	box-sizing: content-box;
	float: left;
	display: flex;
	margin-left: calc(var(--level) * 1.2em);
	cursor: pointer;
}

.featherIcon {
	font-size: inherit;
	width: 1em;
	height: 1em;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	transition: color 250ms;
}

.bread-crumb {
	color: var(--font-color-contrast-middle);
}
.bread-crumb-separator {
	margin: 0 var(--layout-spacing-unit-small);
}
