/*===========================================
	INFO

	AUTHOR
	----------------------
	BPS Bildungsportal Sachsen GmbH
	Dresdner Straße 76, D-09130 Chemnitz

=============================================*/

@import "abstracts/variables.css";
@import "abstracts/icon.css";

/****************************
	TYPO
****************************/
.text-info {color: var(--color-info-dark) !important;}
.text-warning {color: var(--color-warning-dark) !important;}
.text-success {color: var(--main-theme-color-60)!important;}

/****************************
	FONTS
****************************/
@font-face {
	font-family: 'icomoon';
	src:url('../../fonts/icomoon.eot');
	src:url('../../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/icomoon.woff') format('woff'),
		url('../../fonts/icomoon.ttf') format('truetype'),
		url('../../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/****************************
	GENERAL
****************************/
html, body {height: 100%;}

.page {
	display: flex;
	flex-direction: column;
	max-width: 1320px;
	min-height: 100%;
	margin: 0 auto;

	&.simple,
	&.admin,
	&.registration {
		max-width: 100%;
	}
}
body {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: .9rem; color: var(--main-theme-gray-80);}

h1 {margin: 1rem 0 .5rem 0; font-size: 1.4rem;}
h2 {margin: 1rem 0; color: var(--main-theme-color-50); font-size: 1.2rem;}
h3 {font-size: 1rem; font-weight: bold;}
a {
	color: var(--main-theme-color-50);
	&:hover {
		color: var(--main-theme-color-80);
	}
	&:focus-visible {outline-offset: .2em; outline-color: currentColor;}
}
hr {border-color: var(--main-theme-gray-5);}

.veil {
	position:absolute;
	top:0;
	left:0;
	z-index:9999999;
	width:100%;
	height:100%;
}

/* Waiting JS */
.waitjs {
	display:    none;
	position:   fixed;
	z-index:    1000001;
	top:        0;
	left:       0;
	height:     100%;
	width:      100%;
	background: rgba(255,255,255, .3 ) url(img/loading.svg) 50% 50% no-repeat;
}

.loading {
    overflow: hidden;
    .waitjs {
    	display: block;
	}
}

/****************************
	FORMS
****************************/
fieldset {margin: 1.2rem 0;}
legend {margin-bottom: 1rem; font-size: .75rem; text-transform: uppercase; border-bottom: 1px solid var(--main-theme-color-50); color: var(--main-theme-color-60);}
.dropdown-menu .form-group {margin-bottom: .5rem;}

.form-control, .form-select {
	border-color: var(--main-theme-gray-40);
	font-size: .9em;

	&:focus {
		border-color: currentColor;
		outline: 2px solid currentColor;
		box-shadow: none;
	}
}

.form-required label {
	position: relative;
	margin-right: 1em;

	&.visually-hidden {position: absolute;}
}

.form-check-input[aria-required="true"]+.form-check-label {position: relative; margin-right: 1em;}
.form-required label:after,
.form-check-input[aria-required="true"]+.form-check-label:after {
	position: absolute;
	top: -6px;
	right: -10px;
	content: '*';
	color: var(--main-theme-color-50);
	font-size: 1.5rem;
}

.form-check-input {border-color: var(--main-theme-gray-40);}

select.form-control:not([size]):not([multiple]) {height: auto;} /* fix for selects on iOS */
.k-autocomplete.k-input.form-control {padding: 0; border: 0;}

/* input group */
.input-group-text {border-color: var(--main-theme-gray-40);}

/* custom checkbox */
.custom-control-input:checked~.custom-control-label::before {background-color: var(--main-theme-color-50);}
.custom-control-input:focus~.custom-control-label::before {-webkit-box-shadow: 0 0 0 1px var(--color-white),0 0 0 3px var(--main-theme-color-50); box-shadow: 0 0 0 1px var(--color-white),0 0 0 3px var(--main-theme-color-50);}
.custom-control-input:active~.custom-control-label::before {background-color: var(--main-theme-color-10);}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {background-color: var(--main-theme-color-50);}

/* Autocomplete
	https://github.com/devbridge/jQuery-Autocomplete#styling */
.autocomplete-suggestions {border: 1px solid var(--main-theme-gray-20); background: var(--color-white); overflow: auto;}
.autocomplete-suggestion {padding: .3rem;}
.autocomplete-selected {background: var(--main-theme-gray-5);}
.autocomplete-suggestions strong {color: var(--main-theme-color-70);}
.autocomplete-group {padding: .3rem;}
.autocomplete-group strong {display: block; border-bottom: 1px solid var(--main-theme-color-50);}

/* Honeypot */
.honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

/****************************
	BUTTONS
****************************/
.btn {
	cursor: pointer;
	font-size: .9rem;

	&:focus-visible {outline: 2px solid currentColor; outline-offset: -.35em; box-shadow: none;}
	&:active:focus-visible,
	.active:focus-visible,
	.show:focus-visible,
	&:first-child:active:focus-visible,
	&:not(.btn-check)+.btn:active:focus-visible {box-shadow: none;}
}

.btn-icon {
	width: 40px;
	height: 40px;
	padding: 1px 0 0 1px;
	background: var(--color-white);
	border: none;
	border-radius: 20px;

	&:hover,
	&:focus,
	&:active {background-color: var(--main-theme-color-20); border: 2px solid var(--main-theme-color-50);}

	&.btn-sm {width: 1.5rem; height: 1.5rem;}
	&.only {background-color: transparent;}
}

.btn-primary {
	background-color: var(--main-theme-color-50);
	border-color: var(--main-theme-color-50);

	&:hover,
	&:active,
	&.active,
	&:not(:disabled):not(.disabled).active,
	&:not(:disabled):not(.disabled):active {background-color: var(--main-theme-color-80); border-color: var(--main-theme-color-80); color: var(--color-white);}

	&:focus {background-color: var(--main-theme-color-50); border-color: var(--main-theme-color-50);}

	&.disabled,
	&:disabled {color: var(--main-theme-gray-80); background-color: var(--main-theme-gray-5); border-color: var(--main-theme-gray-30);}
}

.btn-outline-primary {
	color: var(--main-theme-color-50);
	border-color: var(--main-theme-color-50);

	&:hover,
	&:focus,
	&:active,
	&.active,
	&:not(:disabled):not(.disabled).active,
	&:not(:disabled):not(.disabled):active {background-color: var(--main-theme-color-50); border-color: var(--main-theme-color-50); color: var(--color-white);}

	&.disabled,
	&:disabled {color: var(--main-theme-gray-80); background-color: var(--main-theme-gray-5); border-color: var(--main-theme-gray-30);}
}

.btn-secondary {
	background-color: var(--main-theme-gray-5);
	border-color: var(--main-theme-gray-40);
	color: var(--main-theme-gray-80);

	&:hover,
	&:focus,
	&:active,
	&.active,
	&:not(:disabled):not(.disabled).active,
	&:not(:disabled):not(.disabled):active {background-color: var(--main-theme-gray-20); border-color: var(--main-theme-gray-40); color: var(--main-theme-gray-80);}

	&.disabled,
	&:disabled {background-color: var(--color-white); border-color: var(--main-theme-gray-20); cursor: not-allowed;}
}
.btn-light {
	background-color: var(--color-white);
	border-color: var(--main-theme-gray-40);
	color: var(--main-theme-gray-80);

	&:hover,
	&:focus,
	&:active,
	&.active,
	&:not(:disabled):not(.disabled).active,
	&:not(:disabled):not(.disabled):active {background-color: var(--main-theme-gray-5); border-color: var(--main-theme-gray-80); color: var(--main-theme-gray-80);}
}

.btn-outline-light {
	color: var(--color-white);

	&:focus {background: var(--color-white);}
}

.btn-submenu .btn {border: 2px solid var(--main-theme-color-50);}
.show>.btn-primary.dropdown-toggle {background-color: var(--main-theme-color-60); border-color: var(--main-theme-color-60);}

/****************************
	DROPDOWN
****************************/
.dropdown-menu .btn-close {position: absolute; top: .3rem; right: .3rem;}

/****************************
	TABLES
****************************/
caption {caption-side: top;}
.table-heading {color: var(--main-theme-color-50);}
.table-header {display: flex; justify-content: space-between; padding: .3em; background: var(--color-secondary-light);}
.table-checkbox, .table-icon {width: 50px;}
.table-checkbox .custom-checkbox {min-height: 1.3rem; margin: 0; padding-left: 1rem;}
.table thead th {border-bottom-color: var(--color-secondary-light);}

.table-sort {white-space: nowrap;}
.table-sort .fonticon:before {content: "\e900";}
.table-sort.asc .fonticon:before {content: "\e901";}
.table-sort.desc .fonticon:before {content: "\e902";}

.table-sort button {padding: 0; border: 0; background-color: transparent;}

/* NEW TABLE PANEL */
.table-panel {width: 100%; margin-top: 1rem;}
.table-panel thead {border: none;}
.table-panel .table-header {padding: .5em; display: table-row;}
.table-panel .table-header td {background: var(--color-secondary-light);}

.table-header-content {display: flex; justify-content: space-between;}
.table-header-right .dropdown-menu {min-width: 250px;}
.admin-search-form {
	display: flex;
	& button {
		margin-left:  .25rem;
	}
}

.headers th[data-header="actions"] {width: 100px;}

.table-panel tbody>tr:hover {background-color: #eee;}
.table-panel tbody>tr:nth-child(odd) {background-color: #f5f5f5;}
.table-panel tbody td {
	border-top: 1px solid #ddd;
}

.table-footer {
	padding-block: .3rem;
	border-top: 4px solid var(--main-theme-gray-5);
	border-bottom: 1px solid var(--main-theme-gray-20);
}

.table-footer > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.pager {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.pagination {
	margin: 0;
}

.page-link {
	padding: 0 .5em;
	color: var(--main-theme-color-50);

	&:hover {
		color: var(--main-theme-color-80);
	}

	&:focus {
		color: var(--main-theme-color-50);
		box-shadow: none;
	}

	&:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -.3rem;
	}

	&[aria-disabled="true"] {
		color: var(--main-theme-gray-60);
		background-color: var(--main-theme-gray-10);
		cursor: not-allowed;
	}
}

.active > .page-link, .page-link.active {
	background-color: var(--main-theme-color-50);
	border-color: var(--main-theme-color-50);
	color: var(--color-white);
}

.pager-showall {
	font-size: .8em
}

.items-per-page {
	display: flex;
	align-items: center;
	gap: .5rem;

	.form-control {
		width: 3rem;
	}
}



/****************************
	BOXES / ALERTS
****************************/
.box {padding: .5em;}

.alert {
	padding: .3rem .7rem;

	& h2 {
		margin-top: .5em;
	}

	& a:not(.btn) {
		text-decoration: underline;
	}

	& a.btn-primary {
		color: var(--color-white);
		text-decoration: none;
	}
}

.alert-info {
	background-color: var(--color-info-light);
	border-color: var(--color-info-light);
	color: var(--color-info-dark);

	& a:not(.btn) {color: var(--color-info-dark);}
}

.alert-warning {
	background-color: var(--color-warning-light);
	color: var(--main-theme-gray-80);

	& a:not(.btn) {color: var(--main-theme-gray-80);}
}

.alert-success {
	background-color: var(--main-theme-color-10);
	border-color: var(--main-theme-color-10);
	color: var(--main-theme-color-60);

	& h2,
	& a:not(.btn) {color: var(--main-theme-color-60);}
}

.alert-danger {
	background-color: var(--color-danger);
	color: var(--color-white);

	& a:not(.btn) {color: var(--color-white);}

}

.alert-light {background-color: transparent; border: 2px dashed var(--color-secondary-light);}

.alert-top {
		margin: 0;
		line-height: 1.2em;

		.btn {position: absolute; right: 0; top: 0;}
	}

.global-feedback {
	position: fixed;
	left: 50%;
	top: 2vh;
	display: flex;
	gap: .5rem;
	align-items: center;
	padding: 1rem;
	box-shadow: 2px 2px 8px #c8c8c8;
	z-index: 99;
	line-height: 1.2em;
	width: MIN(80ch, 90%);
	transform: translate(-50%, 0);

    &.alert-info .btn {color: var(--main-theme-gray-80);}
    .global-feedback-msg {flex-grow: 1;}
}

/****************************
	BACKGROUND COLORS
****************************/
.bg-primary {background-color: var(--main-theme-color-50);}
.bg-secondary {background-color: var(--color-secondary);}

/****************************
	LIST-GROUPS
****************************/
.list-group-item {
	display: flex;
	padding: .8rem 1rem;

	&.active {
		background-color: var(--main-theme-color-50);
		border-color: var(--main-theme-color-50);

		&:hover,
		&:focus {background-color: var(--main-theme-color-80); color: var(--color-white);}
		}

	&:first-child,
	&:last-child {border-radius: 0;}

	&>.fonticon {margin-right: .5em;}
}

.list-group-item-action {
	color: var(--main-theme-gray-80);
	-webkit-transition: background .2s ease-in-out;
	-o-transition: background .2s ease-in-out;
	transition: background .2s ease-in-out;

	&:hover,
	&:focus {background-color: var(--main-theme-gray-5); color: var(--main-theme-color-50);}
}

.list-group-item-success {background-color: var(--main-theme-color-10); color: var(--main-theme-color-60);}
.list-group-item-danger {color: var(--color-danger);}

.list-group-text-cont {
	flex-grow: 2;

	.list-group-item-heading {display: block;}
}

/****************************
	DIALOG
****************************/
.ui-dialog-titlebar {background-color: var(--color-secondary-light); border-color: var(--color-secondary-light);}

/****************************
	HEADER
****************************/
.skip-link {
	position: absolute;
	top: -1000em;
	left: -1000em;
	height: 1px;
	width: 1px;

	&:focus, &:active {
		top: 0;
		left: 0;
		height: auto;
		width: auto;
		background-color: #fff;
	}
}
.page-header {
	display: flex;
	margin: 0;
	padding: 5px;
	background-color: var(--main-theme-color-50);

	& h1 {
		flex-grow: 2;
		margin: 0 1em;
		font-size: 1.3rem;
		color: var(--color-white);
		line-height: 2em;
	}
	.btn {flex-shrink: 0;}
	.btn-logout {margin-left: .5em;}
}

.page-header-desktop {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 75px;
	padding-right: 1.25rem;

	.logo-container {display: flex; align-items: center; flex-grow: 1;}
	.profile-name {margin-right: 1rem;}
	.page-heading {
		margin: 0 10px;
		font-size: 1.2rem;
	}
}
.header-logo {display: inline-block; height: 2rem; width: 5.5rem; margin-left: 1.25rem; background: url("img/blok-logo.svg") no-repeat 0 0; background-size: 5rem auto;}

.btn-menu {align-self: flex-start;}

/****************************
	FOOTER
****************************/
.page-info {
	width: 100%;
	margin-top: auto;
	padding: .3em 0;
	background-color: var(--main-theme-gray-80);
	font-size: .9em;
	text-align: center;
	z-index: 9;

	& ul {margin-bottom: 0;}
	& a {line-height: 2em;}

	.list-inline-item {
		color: var(--main-theme-gray-20);
		line-height: 2em;

		& a {color: var(--color-white);}
	}
}


/****************************
	NAVIGATION
****************************/
.page-nav {
	background: var(--main-theme-color-50);
	background: -moz-linear-gradient(top, var(--main-theme-color-50) 0%, var(--main-theme-color-60) 89%);
	background: -webkit-linear-gradient(top, var(--main-theme-color-50) 0%,var(--main-theme-color-60) 89%);
	background: linear-gradient(to bottom, var(--main-theme-color-50) 0%,var(--main-theme-color-60) 89%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--main-theme-color-50)', endColorstr='var(--main-theme-color-60)',GradientType=0 );

	.list-group-item {
		background-color: transparent;
		color: var(--color-white);
		border-color: rgba(255,255,255,.3);

		&:not(.active):focus {background-color: transparent; color: var(--color-white);}

		&:hover,
		&.active,
		&:not(.active):active,
		&.active:focus-visible {background: var(--main-theme-color-80); color: var(--color-white);}

		&:focus {outline: 0; box-shadow: none;}
		&:focus-visible {outline: 2px solid #fff; outline-offset: -.5em; background-color: transparent; color: var(--color-white);}
	}

	.fonticon {font-size: 16px;}
}

.page-nav-additional {
	padding: .3rem 0;
	background-color: var(--main-theme-gray-80);
	text-align: center;

	.list-inline-item {
		color: var(--main-theme-gray-30);

		& a {display: inline-block; line-height: 1.8em; color: var(--color-white);}
	}
}

/* sub nav */
.nav-pills {

	.nav-link {
		padding: .2rem .9rem;
		border-radius: 20px;
		background-color: var(--main-theme-color-10);
		color: var(--main-theme-color-60);

		&.active,
		&:hover {background-color: var(--main-theme-color-50); color: var(--color-white)}

		&:focus-visible {outline: 2px solid var(--main-theme-color-50); outline-offset: .2em; box-shadow: none;}
	}
}


/* profile */
.page-nav-container .nav-profile {
	padding: 1em 0;
	text-align: center;
	background: var(--main-theme-color-50);
	background: -moz-linear-gradient(top, var(--main-theme-color-50) -10%, var(--main-theme-color-60) 89%);
	background: -webkit-linear-gradient(top, var(--main-theme-color-50) -10%,var(--main-theme-color-60) 89%);
	background: linear-gradient(to bottom, var(--main-theme-color-50) -10%,var(--main-theme-color-60) 89%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--main-theme-color-50)', endColorstr='var(--main-theme-color-60)',GradientType=0 );
	border-color: rgba(255,255,255, .4);
	border-width: 1px 0 1px 0;
	border-style: solid;
}

.profile-pic {
	width: 75px;
	height: 75px;
	margin: 0 auto .5em auto;

	.fonticon,
	& img {width: 100%; height: 100%; border-radius: 50px; background-color: var(--color-white);}

	.fonticon {font-size: 2.5rem; line-height: 70px; color: var(--color-secondary);}
}

.profile-name {color: var(--color-white);}

/****************************
	CONTENT
****************************/
.content {flex-shrink: 0; margin-bottom: 2rem;}

/******************* HOME PAGE *******************/
.home-welcome {
	margin-top: 1.5em;

	.btn {margin-bottom: .5em;}
}

.home-mails {

	.list-group-item {
		flex-wrap: nowrap;

		.fonticon {
			align-self: flex-start;
			flex-shrink: 0;
		}
	}
	.list-group-item-warning {background-color: var(--color-secondary-light);}
	.list-group-item-btn {flex-shrink: 0;}
}

.home-weeks {
	.btn-primary {display: block; margin: .5em 0;}
	.btn-icon {
		width: 70px;
		height: 70px;
		margin: 5px;
		background-color: var(--main-theme-gray-20);
		font-size: .85em;
		border-radius: 50px;
	}
}

/******************* REPORT *******************/

/* week header */
.report-header {
	margin-bottom: 1em;
	padding: 5px;
	background: var(--color-secondary-light);

	.report-free & {border-bottom: 5px solid var(--main-theme-color-20);}
	.report-signed & {border-bottom: 5px solid var(--main-theme-color-50);}
	.report-revoked & {border-bottom: 5px solid var(--color-warning);}
}

.report-header-week {
	display: flex;
	justify-content: space-between;
	align-items: center;

	& h2 {
		margin: 0;
		font-size: 1.3em;
		font-weight: bold;
		color: var(--main-theme-gray-80);
		text-align: center;

		& a {color: var(--main-theme-gray-80);}
	}
}
.report-header-info {
	margin: .5em 40px;

	& small {display: block; margin-bottom: 1.5rem; text-align: center;}
}

.report-header-functions {
	position: absolute;
	right: 0;
	z-index: 1;

	.btn {display: block; box-shadow: 0 2px 6px var(--main-theme-gray-80);}
}

/* day header */
.report-header-entry {
	display: flex;
	align-items: center;
	background-color: var(--main-theme-gray-5);
	border-bottom: 1px solid var(--main-theme-gray-30);
	border-left: 5px solid transparent;

	& h3 {display: inline-block; margin: 0; font-size: 1em;}
	& a {color: var(--main-theme-gray-80); font-weight: bold;}
	.form-select {width: auto;}

	&.open {background-color: var(--color-secondary-light); border-bottom: none;}

	.report-day.today & {background-color: var(--main-theme-color-20);}
}

.report-header-entry-additional {position: relative; white-space: nowrap; flex: 1 1 auto; text-align: right;}
.report-header-entry-info {
	/*white-space: nowrap;
	overflow: hidden;*/
	margin-right: 1em;

	.day-location:before {margin-right: 5px; content: "|"}
	.day-summary {display: block; margin-left: 18px;}
}

.report-week-hours h3 {display: inline-block; margin: 0; font-size: 1em;}

/* state of the day */
.report-day.report-betrieb .report-header-entry {border-left-color: var(--color-info);}
.report-day.report-schule .report-header-entry {border-left-color: var(--color-warning);}
.report-day.report-extern .report-header-entry {border-left-color: var(--color-secondary);}
.report-day.report-absent .report-header-entry,
.report-day.report-free .report-header-entry,
.report-day.report-holiday .report-header-entry,
.report-day.report-unable .report-header-entry,
.report-day.report-vacation .report-header-entry,
.report-day.report-weekend .report-header-entry {border-left-color: var(--main-theme-gray-30);}
.report-day.report-absent .report-header-entry,
.report-day.report-absent .report-header-entry a,
.report-day.report-free .report-header-entry,
.report-day.report-free .report-header-entry a,
.report-day.report-holiday .report-header-entry,
.report-day.report-holiday .report-header-entry a,
.report-day.report-unable .report-header-entry,
.report-day.report-unable .report-header-entry a,
.report-day.report-vacation .report-header-entry,
.report-day.report-vacation .report-header-entry a,
.report-day.report-weekend .report-header-entry,
.report-day.report-weekend .report-header-entry a {color: var(--main-theme-gray-80);}

/* entry content */
.report-entry-container {
    margin-block: .5rem;
	.btn-block {margin-top: 1em;}
}

.report-entry-container:has(.report-entry) .report-properties {margin-bottom: .3rem; padding-bottom: .3rem; border-bottom: 1px solid var(--main-theme-gray-30);}
.report-entry-container:not(:has(.report-properties)) div:first-child .report-entry {border-top: 0;}

.report-entry p,
.report-entry p.box {margin-bottom: 0;}

/* entry footer */
.report-entry-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
	position: relative;
    padding: .3rem;
	background-color: var(--main-theme-gray-5);

	.btn {
		position: relative;
		margin-right: .2em;

		.badge {position: absolute; top: 1px; z-index: 2;}
	}
}
.report-entry-footer-additional {}
.report-entry-functions {position: absolute; top: 0; left: 55px; z-index: 1;}

/* entry edit */
.report-entry-edit-content {margin-block: 1rem; padding: .5rem; border-block: 1px solid var(--main-theme-gray-30); background-color: var(--main-theme-gray-5);}
.report-entry-edit:has(.report-entry-edit-content) .report-entry-edit-content {border-bottom: none; margin-block: 0;}

/* week format */
.report-week {margin-bottom: 1rem;}
.report-week-hours {margin-top: 2rem; background-color: var(--main-theme-gray-5);}

/******************* SIMPLE PAGE *******************/
.simple .content {margin-bottom: 4em;}
.simple-page-header {
	padding: 2vh 0;
	text-align: center;
	background-color: var(--main-theme-color-50);
	.logo {
		display: inline-block;
		max-height: 8rem;
		max-width: 8rem;
		min-width: 5rem;
		min-height: 5rem;
		width: 25vh;
		height: 25vh;
		background: url(img/blok-logo-circle.svg) no-repeat center center;
		background-size: cover;
	}
	.logo-demo .logo {background-image: url(img/blok-logo-demo-circle.svg);}
	.page-heading {display: block; margin-top: 1em; font-size: 1em; color: var(--color-white);}
}

.page.registration .content,
.page.disclaimer .content {
	max-width: 900px;
}

/******************* LOGIN *******************/
.page.login {background-color: var(--main-theme-color-50);}
.login-content form {margin-bottom: 2em;}
.login-content .alert-light {color: var(--color-white); border: 2px solid var(--color-white);}
.login-content .alert-light h2 {font-size: 1.2em;}
.login-content .alert-light h2,
.login-content .alert-light a {color: var(--color-white);}
.login-forgot-link {margin-bottom: 2em; font-size: .9em;}
.login-forgot-link a {display: block; margin-bottom: .5em; color: var(--color-white); text-align: center;}
.login-forgot-link a:hover, .login-forgot-link a:focus {color: var(--color-white);}
.login-additional-form {margin-bottom: 1em; background: rgba(255,255,255,.7);}
.login-additional-form+.alert-warning {margin-bottom: 4rem;}
.login-additional-form fieldset:first-child {margin-top: .5em;}

.login {
	.form-control:focus {outline-offset: -.5em;}

	.btn-primary {
		background-color: var(--main-theme-color-60);
		border: .13rem solid var(--main-theme-gray-80);

		&:hover,
		&:focus {background-color: var(--main-theme-gray-80);}
	}

	.btn-secondary:hover,
	.btn-secondary:focus {background: rgba(255,255,255, .3);}

	.invalid-feedback {
        margin-bottom: 0;
		padding: .2em .5em;
		background: var(--color-danger);
		color: var(--color-white);
		border-radius: 4px;
	}
}

/****************************
	MEDIA QUERIES
****************************/
@media (min-width: 576px) {
	.simple-page-header {padding: 5vh 0;}
}

@media (min-width: 768px) {
	.login-content {width: 500px; margin: 0 auto;}

	.portlet {margin-top: 1em; padding: .1em 1em 1em 1em; border: 1px solid var(--main-theme-gray-20); border-radius: 4px;}

	.report-header {margin: 1rem 0; background: var(--color-white);}
	.report-header-week {justify-content: flex-start;}
	.report-header-week .btn-icon {margin: 0 0.5em; border: 1px solid var(--main-theme-color-50);}
	.report-header-week .report-header-next {margin-left: 1rem;}
	.report-header-info {margin: 0 5rem 1em 5rem;}
	.report-header-info small {text-align: left;}

	.report-free .report-header {border-bottom: 0;}
	.report-signed .report-header {border-bottom: 0;}
	.report-revoked .report-header {border-bottom: 0;}

    .report-entry-container:has(.report-entry) .report-properties {border-bottom: 0; padding-bottom: 0;}

	.report-entry {display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--main-theme-gray-30);}
    .report-entry:not(:first-child) {border-top: 0;}
	.report-entry-footer {display: flex; justify-content: space-between; align-items: center; gap: .2rem;}
	.report-entry-edit {border-top: 0;}
	.report-entry-functions {position: absolute; left: initial; top: initial; right: 130px; z-index: 1;}
}

@media (min-width: 992px) {
	.page-nav-container {display: block !important;}
	.page-nav .list-group {flex-direction: row;}

	.page-nav .list-group-item {
		border: none;
	}
	.page-nav-container .nav-profile, .menu-item.logout {display: none;}
	.nav-profile {display: flex; align-items: center; position: absolute; top: 20px; right: 70px; padding: .3rem 0; background: transparent; border: none;}
	.profile-pic {width: 25px; height: 25px; margin: 0;}
	.profile-pic .fonticon {font-size: .8rem; line-height: 1.5rem;}
	.profile-name {color: var(--main-theme-gray-80);}
}

@media (min-width: 1200px) {
	.simple-page-header {padding: 7vh 0;}
}

/****************************
	RETINA
****************************/
@media  (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

}