.pupil-choice h5 {
	text-align: center;
	position: relative;
}

.pupil-choice h5 .btn-transfer-choices {
	position: absolute;
	left: -.5rem;
	cursor: pointer;
}

/* Ab hier richtig ***************************************************************************************************************/
@font-face {
	font-family: 'Freehand';
	src: url('../font/Freehand-Regular.ttf') format('woff2');
}


/* BASICS */
html {
	height: 100%;
}

body {
	height: 100%;
	display: flex;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	/*background-color: #f5f5f5;*/
	background: linear-gradient(355deg, rgba(89, 133, 213, .1) 0%, rgba(100, 149, 237, .1) 100%);	
}

body > .main {
	display: none;
	width: 100%;
	height: 100%;
	overflow-y: scroll;	
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;	
}

#tabContent {
	flex-grow: 1;
	flex-direction: column;
	justify-content: stretch;
}

.tab-pane {
	flex-grow: 1;
   flex-direction: column;
   justify-content: stretch;
}

.dino {
	font-family: 'Freehand';
	font-size: 1.7em;
	color: #4CA593;
	font-weight: bold;
}



/* Allgemeines */
.max-height {
	height: 100%;
	overflow: hidden;	
}

.max-width {
	min-width: 100%;
}


.flex-grow-1 { flex-grow: 1 !important; }
.flex-grow-2 { flex-grow: 2 !important; }
.flex-grow-3 { flex-grow: 3 !important; }
.flex-grow-4 { flex-grow: 4 !important; }
.flex-grow-5 { flex-grow: 5 !important; }

::placeholder {
	color: #bbb;
	opacity: 1;
 }
 
 ::-ms-input-placeholder {
	color: #bbb;
 }

.form-floating > label {
	opacity: .65;
}

ul.tight > li { padding: .1rem .3rem; }
ul.selectable > li {	cursor: pointer; }

.scroll { overflow: auto; }

.border-grey { border: 0px solid #999 !important; }
.border-lightgrey { border: 0px solid rgba(0, 0, 0, .125) !important; }
.border-red { border: 0px solid red !important; }

.b-0 { border-width: 0 !important; }
.br-0 { border-right-width: 0 !important; }
.bl-0 { border-left-width: 0 !important; }
.bt-0 { border-top-width: 0 !important; }
.bb-0 { border-bottom-width: 0 !important; }

.b-1 { border-width: 1px !important; }
.br-1 { border-right-width: 1px !important; }
.bl-1 { border-left-width: 1px !important; }
.bt-1 { border-top-width: 1px !important; }
.bb-1 { border-bottom-width: 1px !important; }

.b-2 { border-width: 2px !important; }
.br-2 { border-right-width: 2px !important; }
.bl-2 { border-left-width: 2px !important; }
.bt-2 { border-top-width: 2px !important; }
.bb-2 { border-bottom-width: 2px !important; }

.b-3 { border-width: 3px !important; }
.br-3 { border-right-width: 3px !important; }
.bl-3 { border-left-width: 3px !important; }
.bt-3 { border-top-width: 3px !important; }
.bb-3 { border-bottom-width: 3px !important; }

.b-4 { border-width: 4px !important; }
.br-4 { border-right-width: 4px !important; }
.bl-4 { border-left-width: 4px !important; }
.bt-4 { border-top-width: 4px !important; }
.bb-4 { border-bottom-width: 4px !important; }

.b-5 { border-width: 5px !important; }
.br-5 { border-right-width: 5px !important; }
.bl-5 { border-left-width: 5px !important; }
.bt-5 { border-top-width: 5px !important; }
.bb-5 { border-bottom-width: 5px !important; }


.required { background-color: bisque; }

.text-small {
	font-size: .8rem;
	line-height: 1rem;
}

.text-dir-btt {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	padding-top: 0.5rem;
	padding-bottom: .5rem;
	vertical-align: middle;
	text-align: start;
}

.bg-lavender {
	background-color: lavender !important;
}

.bg-grey, .bg-gray {
	background-color: #999 !important;
}

.callout {
	padding: .75rem 1.25rem;
  	margin-top: 1rem;
  	margin-bottom: 1rem;
  	border: 1px solid #e9ecef;
   border-left-width: 1px;
   border-left-color: rgb(233, 236, 239);
  	border-left-width: .25rem;
  	border-radius: .25rem;
}

.callout-info {
	border-left-color: #5bc0de;
}
.callout-warning {
	border-left-color: orange;
}
.callout-danger {
	border-left-color: red;
}

.circle {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: 1px solid #555;
}

.text-background-circle {
	display: inline-block;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	border: 1px solid #555;
	text-align: center;
}

.cursor-pointer {
	cursor: pointer;
}

.width-fit-content {
	width: fit-content;
}




.grid-head-sortable {
	cursor: pointer;
	position: sticky;
	top: 0;
	line-height: 1rem;
	padding-bottom: 1rem !important;	
}

.grid-head-sortable.sort::after {
	content: '';
	position: absolute;
	width: .8rem;
	height: .5rem;
	opacity: .8;
	bottom: -.05rem;
	left: calc(50% - .4rem);
	background-size: cover;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNTFAuIE1hZGUgYnkgSGFzaGlDb3JwOiBodHRwczovL2dpdGh1Yi5jb20vaGFzaGljb3JwL2Rlc2lnbi1zeXN0ZW0vIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik04IDEuMjVhMi4xMDEgMi4xMDEgMCAwMC0xLjc4NS45OTZsLjY0LjM5Mi0uNjQyLS4zODgtNS42NzUgOS4zNzMtLjAwNi4wMWEyLjA2NSAyLjA2NSAwIDAwLjc1MSAyLjgzMmMuMzE0LjE4My42Ny4yODEgMS4wMzQuMjg1aDExLjM2NmEyLjEwMSAyLjEwMSAwIDAwMS43OTEtMS4wNDUgMi4wNjQgMi4wNjQgMCAwMC0uMDA2LTIuMDcyTDkuNzg4IDIuMjVsLS4wMDMtLjAwNEEyLjA4NCAyLjA4NCAwIDAwOCAxLjI1eiIvPjwvc3ZnPg==);
}

.grid-head-sortable.sort.desc::after {
	rotate: 180deg;
}

.list-group {
	/*background-color: white;*/
}

.list-group-item {
	background-color: white;
}


#tab-logout {
	background-color: darkgray;
	color: black;
	border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}

#tab-upload {
	background-color: #5FD3BC;
	color: #555;
}

.login {
	border: .5rem dotted darkblue;
   border-radius: 2rem;
   padding: 1rem;
   background-color: lavender;
}

.login .dino {
	position: relative;
	/*top: -1.5rem;*/	
}

/* Notentabellen */
table.data-table {
	border-color: #999;
	border-style: solid;
	border-width: 0;
	position: relative;
	left: -2px;
	top: -1px;	
	height: 1px /* wird benötigt, damit divs die voll Höhe eines td ausfüllen können */
}

table.data-table thead {
	position: sticky;
	background-color: white;
	z-index: 1000;
	top: -1px;
}

table.data-table th {
	font-size: .7rem;
	font-weight: normal;	
	border-width: 1px;
	text-align: center;
	padding: 0;
	vertical-align: bottom;
	max-width: 2rem;
}

table.data-table th div.maxSize {
	width: 100%;
	height:100%;
	border-bottom: 3px solid #999;
	display: flex;
	align-items: center;
	justify-content: center;	
}

table.data-table th.grade {
	padding: 0;	
	max-width: 2.2rem;
}

table.data-table th.subject-choice div {
	padding: 0;
	font-weight: .7rem;
}

table.data-table td {
	border: 1px solid #999;
	margin: 0;	
	padding: .3rem;
	background-color: #eee;
}

table.data-table td:first-of-type {
	line-height: 1.3rem;
}

table.data-table .report-item-container input.grade {
	width: 2.3rem;
	height: 2.3rem;
	font-size: 1.2rem;
	padding: 0;
	border-radius: 0;
}

table.data-table td.grade {
	background-color: #fff;
	width: 2rem;
	height: 2rem;
	padding: 0;
}

table.data-table td.separator {
	border: 4px solid lightcoral;
	margin: 0;	
	padding: 0
}

table.data-table td.processed {
	padding: .2rem .2rem;
	background-color: white;
}

table.data-table td.hj {
	text-align: center;
	vertical-align: middle;
	padding: 0.3rem;
	border-left: 0;
}

table.data-table td.sticky-left {
	position: sticky;
	left: 0;
	z-index: 999;
	padding: 0;
	border:0;
}

table.data-table div.bordered {
	border-width: 0;
	border-color: #999;
	border-style: solid;
}

table.data-table div.sticky-left {
	width: 100%;
	height: 100%;
	border-width: 0;
	border-color: #999;
	border-style: solid;
	display: flex;
	align-items: center;
	padding: 0 .5rem;
	overflow: auto;
	width: 10rem;
}

table.data-table td.date-of-birth {
	position: sticky;
	left: 0;
	z-index: 999;
	padding: 0;	
}

table.data-table td.subject-name {
	text-align: center;
	padding: 0;
	font-size: .7rem;
}

table.data-table td.pupil-notes-0, table.data-table td.pupil-notes-1  {
	padding: 0;
	min-width: 10rem;
}

table.data-table td.processed.processed-notes {
	/*
	color: red;
	font-weight: bold;
	*/
	line-height: 1.1rem;
}

table.data-table td.processed.processed-notes .warnings {
	color: red;
	white-space: nowrap;
}

table.data-table td.processed.processed-notes .promotion-warning {
	color: red;
	font-weight: bold;
}

table.data-table .label {
	font-size: .8rem;
	font-weight: normal;
}



/* MSS-Eigenheiten */
.report-mss .report-item-container input {
	padding-right: 0.5rem;
	text-align: right;	
}

/* Sek 1-Eigenheiten */

.report-sek1 tr.row1 td[rowspan="2"],
.report-sek1 tr.row2 td {
	border-bottom: 2px solid #999;
}


.report-sek1 tr.row1 td[rowspan="4"],
.report-sek1 tr.row3 td[rowspan="2"],
.report-sek1 tr.row4 td {
	border-bottom: 4px solid lightcoral;
}

.grade-group-hilighter {
	position: absolute;
	top: 130px;
	border: 2px solid red;
	padding: .3rem;
}


/* */

.course-teacher-head-grade {
	display: none;
	font-size: .9rem;
}

.show-course-teacher-head-grades .course-teacher-head-grade {
	display: table-cell;
	min-width: 8rem;
}

.head-grade-alternative {
	font-size: .9rem;
	font-weight: bold;
	color: red;
}

.report-item-container {
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;	
	justify-content: center;
}

.report-item-container.half-height {
	height: 50%;
}

.report-item-container input {
	border: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	/*font-family: monospace;*/
}

.report-item-container input.disabled {
	pointer-events: none;
	background-color: #eee;
}

.report-item-container textarea {
	border: 0;
	margin: 0;
	padding: .3rem;
	width: 100%;
	height: 100%;
	line-height: 1.2rem;
}

.report-item-container input.confirmation {
	height: 1.5rem;
	width: 1.5rem;
}

.report-item-container input.grade {
	font-size: 1.2rem;
	padding: 0;
	border-radius: 0;
}

.report-item-container.half-height input.grade {
	font-size: 1rem;
}

.report-item-container input.blue  { color: blue; }
.report-item-container input.red   { color: red }
.report-item-container input.green { color: green }
.report-item-container input.bold  { font-weight: bold; }
.report-item-container input.epochal-passive  { background-image: repeating-linear-gradient(45deg, white 0%, white 8%, #eee 8%, #eee 16%, white 16%); }

.report-item-container input.grade.roman  { font-family: auto; }

.report-item-container .unsatisfactory {
	pointer-events: none;
	position: absolute;
	/*
	top: 0;
	left: 0;
	height: 94%;
	*/
	height: 2.2rem;
	width: 94%;
	border-radius: 50%;
	border: 2px solid lightcoral;
	margin: 3%;
}

.report-item-container .changed {
	position: absolute;
	width: 1rem;
	height: 1rem;
	top: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}

.report-item-container .changed .triangle {
	position: absolute;
	width: .9rem;
	height: .9rem;
	top: -50%;
	left: -50%;
	background-color: #5FD3BC;
	rotate: 45deg;
}

.report-item-container .grade-alert {
	position: absolute;
	top: -0.2rem;
	right: -0.2rem;
	font-size: .7rem;
	cursor: pointer;
	z-index: 1;
}

.report-item-container .transferred {
	position: absolute;
	top: -.8rem;
	width: 100%;
	text-align: center;
	font-size: 1.2rem;
	z-index: 1;
}

/* UPLOAD */
.changes td {
	vertical-align: middle;
}

tr.has-upload-error > td {
	border-bottom-width: 0;
	padding-bottom: 0;
}

tr.upload-error > td {
	padding-top: 0;
	color: red;
}

.delete-change {
	color: red;
	cursor: pointer;
}



/* Stats */
.mss-stats .errors {
	color: red;
}


.stats-result {
	font-size: .8rem;
	text-align: center;
}

/* Grid Table */
.grid-table {
	gap: 0;
}

.grid-table .separator {
	background-color: #999;
}

.grid-cell {
	border: 0;
	/*height: 100%;*/
	width: 100%;
}

.grid-cell.selected {
	background-color: #FFFFAF !important;
}

.grid-cell.grid-label {
	font-size: .8rem;
	padding: 0 .2rem;
	display: flex;
	align-items: center;
	line-height: 1rem;
	color: #777;
}

.grid-data-cell {
	border: 0;
	display: flex;
	align-items: center;
	padding: 0 .2rem;
}

.grid-cell input {
	width: 100%;
	height: 100%;
	border: 0;
}

.grid-head {
	text-align: center;
	border: 0;
}

/* MSS-Eigenheiten */
.mss-course-title {
	line-height: .8rem;
}

.mss-course-name {
	font-size: .9rem;
	font-weight: bold;
	font-family: monospace;
}

.mss-course-teacher {
	font-size: .7rem;
}


/* MSS Grade Table */
.mss-grade-table {
	margin-right: 2rem;
	margin-bottom: 2rem;
	border: 2px solid #bbb;
	padding: .5rem;
}

.mss-grade-table .head {
	font-size: .8rem;
	text-align: center;
}

.mss-grade-table .grid-cell {
	/*background-color: white;*/
}

.mss-grade-table .grid-cell .grade {
	width: 100%;
	height: 100%;
	text-align: center;
}

.mss-grade-table .grid-cell.center {
	text-align: center;
}

.mss-grade-table .obligate {
	background-color: gold;
}

.mss-grade-table .choice {
	background-color: lightgreen;
}

.mss-grade-table .under {
	color: red;
}

.mss-grade-table .obligate-0 {
	background-color: red;
	color: black;
	font-weight: bold;
}

.mss-grade-table .projected {
	opacity: .5;
	position: relative;
}

.mss-grade-table .projected::before {
	content: '→';
	position: absolute;
	left: -.4rem;
}

.mss-grade-table .swap-arrow-1 {
	border-left: 2px solid red !important;
	border-top: 2px solid red !important;
	border-bottom: 2px solid red !important;
	border-top-left-radius: .4rem;
	border-bottom-left-radius: .4rem;	
	margin-top: .7rem;
	margin-bottom: .7rem;
	margin-left: .4rem;
	width: calc(100% - .5rem);
}

.mss-grade-table .swap-arrow-2 {
	border-left: 2px solid green !important;
	border-top: 2px solid green !important;
	border-bottom: 2px solid green !important;
	border-top-left-radius: .4rem;
	border-bottom-left-radius: .4rem;	
	margin-top: .7rem;
	margin-bottom: .7rem;
	margin-left: .1rem;
	width: calc(100% - .2rem);
}



.mss-grade-table-info {
	font-size: .8rem;
}

#offcanvas-import .nav-tabs .nav-link {
	margin-bottom: -1px;
	margin-right: -1px;
	background: 0 0;
	border: 1px solid transparent;
	border-top-left-radius: 1rem;
	border-top-right-radius: 0.25rem;
	border-color: #dee2e6 #dee2e6 #fff;	
	position: relative;
	transition: top .1s ease-out;
	top: 10px;
	color: #495057;
	min-width: 5rem;
	text-align: center;
}

#offcanvas-import .nav-link.active {
	top: 0;
}

#offcanvas-import .grid select {
	border-color: #999;
}

#offcanvas-import .grid-cell.selected, #offcanvas-import select[data-col-index].selected {
	background-color: #ffffba !important;
}


#modal-wait .content {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(255, 255, 255, .7);
	border-radius: 50%;
	height: 10rem;
	width: 10rem;
	justify-content: center;
}

#modal-wait .spinner-border {
	position: absolute;
}

#modal-wait .message {
	position: relative;
   top: 2rem;
}

/* modal-readaloud */
#modal-readaloud .modal-content {
	background: rgba(0,0,0,.7);
}


.btn-round {
	border: 2px solid darkorange;
	border-radius: 50%;
	width: 3rem;
	min-width: 3rem;
	height: 3rem;
	min-height: 3rem;
	margin: .5rem;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #999;
}

.btn-round.xxl {
	min-width: 6rem;
	min-height: 6rem;
	padding: 2rem;
}

.btn-round.text {
	width: unset;
	border-radius: 1.5rem;
	white-space: nowrap;
	padding: .5rem;
	font-size: .9rem;
	font-weight: bold;
}

.btn-round.selected {
	background-color: orange;
}