/* Allgemein */

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

/* body ***************************************************************************************************************/
body
{
	margin  : 0;
	padding : 0;
	width   : 100%;
	height  : 100%;
}

/* h1 *****************************************************************************************************************/
h1
{
	font-weight   : bold;
	font-size     : 2em;
	text-align    : center;
	margin-bottom : 30px;
}

/* img ****************************************************************************************************************/
section.login header img
{
	margin  : 0 auto;
	display : block;
	width   : 100%;
}

a.navbar-brand img
{
	/*height  : 40px;*/
	padding : 0 6px 0 6px;
}

/* label **************************************************************************************************************/
label
{
	font-weight : bold;
}

label.form-check-label
{
	font-weight : normal;
	min-height  : 24px;
	min-width   : 24px;
}

.form-check-inline.label-left .form-check-label
{
	width : 100%;
}

/* main ***************************************************************************************************************/
main
{
	margin-top : 66px;
}

main.login
{
	margin     : 0 auto;
	padding    : 15px;
	width      : 100%;
	min-height : 100%;
	height     : auto !important;
}

main.worksheet
{
	margin-top     : 66px;
	margin-bottom  : 70px;
	padding-top    : 15px;
	padding-bottom : 15px;
	min-height     : 100%;
}

/* section ************************************************************************************************************/
section.login
{
	margin        : 25px auto 0 auto;
	padding       : 15px;
	border-radius : 20px;
	border        : 2px solid;
}

/* header *************************************************************************************************************/
section.login header
{
	width         : 100%;
	margin-bottom : 15px;
}

/* div ****************************************************************************************************************/
#lockScreen
{
	position   : fixed;
	top        : 0;
	right      : 0;
	bottom     : 0;
	left       : 0;
	z-index    : 3000;
	background : #000000;
	opacity    : 0.5;
	text-align : left;
	margin     : 0 auto;
}

div.input-group
{
	margin : 5px 0 5px 0;
}

div.card
{
	margin-bottom : 10px;
	border-radius : 0;
}

#accordion div.card
{
	margin-bottom : 0;
}

div.form-group div.form-check
{
	margin-top : 8px;
}

div.form-check-inline
{
	margin-right : 1.25rem;
	min-width    : 20%;
}

div.label-left
{
	padding-right : 1.25rem;
	padding-left  : 0;
	text-align    : right;
}

div.alert
{
	margin-bottom : 0.5rem;
	margin-top    : 0.5rem;
}

.use-summernote .input-group-prepend
{
	margin-right   : 10px;
	padding-bottom : 10px;
}

#accordion .use-summernote .input-group-prepend
{
	padding-bottom : 0;
}

.btn-right > div
{
	width : 100%;
}

#accordion
{
	margin-bottom : 25px;
}

.left-box
{
	float         : left;
	padding-right : 15px;
	width         : 50%;
}

.right-box
{
	float        : right;
	padding-left : 15px;
	width        : 50%;
}

div.cm-toolbar
{
	width        : 100%;
	min-height   : 42px;
	margin       : 0;
	padding      : 5px;
	border-width : 1px 0 1px 0;
	border-style : solid;
	display      : flex;
	flex-wrap    : wrap;
}

main.worksheet div.cm-toolbar
{
	margin : -15px -15px 0 -15px;
	width  : calc(100% + 30px);
}

div.cm-toolbar-divider
{
	width             : 0;
	height            : 32px;
	border-left-width : 1px;
	border-left-style : solid;
	padding           : 0;
	margin            : 0 5px 0 5px;
}

div.flip-card
{
	background-color : transparent;
	perspective      : 10000px;
	transform-style  : preserve-3d;
}

div.flip-card.fc-full
{
	/*width  : 417px;*/
	/*height : 417px;*/
}

div.flip-card.fc-half
{
	/*width  : 417px;*/
	/*height : 202px;*/
}

div.flip-card:hover div.flip-card-back
{
	transform : rotateY(0deg);
}

div.flip-card:hover div.flip-card-front
{
	transform : rotateY(180deg);
}

div.flip-card-inner
{
	position        : relative;
	width           : 100%;
	height          : 100%;
	text-align      : center;
	transition      : transform 0.75s;
	transform-style : preserve-3d;
}

div.flip-card-front, div.flip-card-back
{
	backface-visibility : hidden;
	transition          : 0.75s;
	transform-style     : preserve-3d;
	width               : 100%;
	position            : absolute;
	top                 : 0;
	left                : 0;
}

div.flip-card-front
{
	height    : 100%;
	z-index   : 2;
	transform : rotateY(0deg);
}

div.flip-card-back
{
	height     : 100%;
	padding    : 5.995203837%;
	text-align : left;
	transform  : rotateY(-180deg);
}

div.flip-card-back > div
{
	height          : 100%;
	scrollbar-width : thin;
	overflow        : auto;
}


div.flip-card-back > div::-webkit-scrollbar
{
	width : 8px;
}

div.flip-card-back > div::-webkit-scrollbar-track
{
	border-radius : 4px;
}

div.flip-card-back > div::-webkit-scrollbar-thumb
{
	border-radius : 4px;
}

div.flex-box-row
{
	display         : flex;
	flex-direction  : row;
	flex-wrap       : wrap;
	justify-content : space-between;
}

div.flex-box-column
{
	display         : flex;
	flex-direction  : column;
	flex-wrap       : wrap;
	justify-content : space-between;
}

/* span ***************************************************************************************************************/
span.input-group-text
{
	min-width : 46px;
	width     : 100%;
}

span.icon
{
	display   : inline-block;
	min-width : 28px;
	padding   : 0 6px 0 6px;
}

div.cm-toolbar span.icon
{
	min-width : 24px;
	padding   : 0;
}

.use-summernote .input-group-prepend .input-group-text
{
	border-radius : 0.25rem;
}

#waitIcon
{
	position    : absolute;
	width       : 160px;
	height      : 240px;
	left        : 50%;
	top         : 50%;
	margin-left : -80px;
	margin-top  : -120px;
}

span.marker-optional
{
	margin-left : 5px;
	font-size   : smaller;
	font-weight : lighter;
}

span.desktop
{
	display: inline;
}

/* i ******************************************************************************************************************/
span.icon i
{
	margin : 0 auto;
}

#waitIcon i
{
	display : inline-block;
	width   : 100%;
	margin  : 0 auto;
}

div.cm-toolbar i.fa-fw
{
	width : 24px;
}

/* a ******************************************************************************************************************/
a.navbar-brand
{
	border-radius : 5px;
}

.disabled-link, .disabled-link:link, .disabled-link:visited, .disabled-link:hover,
.disabled-link:focus, .disabled-link:active, .disabled-link:visited:hover,
.disabled-link a, .disabled-link a:link, .disabled-link a:visited, .disabled-link a:hover,
.disabled-link a:focus, .disabled-link a:active, .disabled-link a:visited:hover
{
	cursor          : default;
	text-decoration : none;
}

/* button *************************************************************************************************************/
button::-moz-focus-inner
{
	border: 0;
}

button:focus
{
	outline:none !important;
}


button.btn-link,
button.btn-link:link,
button.btn-link:visited,
button.btn-link:hover,
button.btn-link:focus,
button.btn-link:active,
button.btn-link:visited:hover
{
	text-decoration : none;
	padding-left    : 0;
}

button.float-right + button.float-right,
button.float-right + div.modal + button.float-right
{
	margin-right : 15px;
}

button.float-left + button.float-left,
button.float-left + div.modal + button.float-left
{
	margin-left : 15px;
}

#tripTable button.btn-dark
{
	min-width : 34px;
}

.btn-right button
{
	margin-right : 25px;
}

.card button
{
	margin-bottom : 20px;
}

.cm-toolbar > .btn
{
	width         : 38px;
	height        : 38px;
	padding       : 6px;
	margin        : 0 5px 0 5px;
	border-radius : unset;
}

/* input **************************************************************************************************************/
div.form-check input
{
	/*margin-top : .80rem;*/
}

.form-check-inline.label-left .form-check-input,
div.label-left input
{
	position     : absolute;
	margin-left  : 0.3125rem;
	margin-right : 0;
	right        : 0;
	left         : auto;
}

/* ul *****************************************************************************************************************/
ul.nav-tabs
{
	margin-bottom : 25px;
}

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

/* Lightbox ***********************************************************************************************************/

#imagelightbox
{
	cursor             : pointer;
	position           : fixed;
	z-index            : 10000;

	-ms-touch-action   : none;
	touch-action       : none;

	-webkit-box-shadow : 0 0 3.125rem rgba(0, 0, 0, .75); /* 50 */
	box-shadow         : 0 0 3.125rem rgba(0, 0, 0, .75); /* 50 */
}

#imagelightbox-loading,
#imagelightbox-loading div
{
	border-radius : 50%;
}

#imagelightbox-loading
{
	width              : 2.5rem; /* 40 */
	height             : 2.5rem; /* 40 */
	position           : fixed;
	z-index            : 10003;
	top                : 50%;
	left               : 50%;
	padding            : 0.625rem; /* 10 */
	margin             : -1.25rem 0 0 -1.25rem; /* 20 */
}

#imagelightbox-loading div
{
	width             : 1.25rem; /* 20 */
	height            : 1.25rem; /* 20 */
	-webkit-animation : imagelightbox-loading .5s ease infinite;
	animation         : imagelightbox-loading .5s ease infinite;
}

@-webkit-keyframes imagelightbox-loading
{
	from
	{ opacity : 1; -webkit-transform : scale(.75); }
	50%
	{ opacity : 1; -webkit-transform : scale(1); }
	to
	{ opacity : 1; -webkit-transform : scale(.75); }
}

@keyframes imagelightbox-loading
{
	from
	{ opacity : 1; transform : scale(.75); }
	50%
	{ opacity : 1; transform : scale(1); }
	to
	{ opacity : 1; transform : scale(.75); }
}

#imagelightbox-overlay
{
	position         : fixed;
	z-index          : 9998;
	top              : 0;
	right            : 0;
	bottom           : 0;
	left             : 0;
}

#imagelightbox-close
{
	width              : 2.5rem; /* 40 */
	height             : 2.5rem; /* 40 */
	text-align         : left;
	border: none;
	border-radius      : 50%;
	position           : fixed;
	z-index            : 10002;
	top                : 2.5rem; /* 40 */
	right              : 2.5rem; /* 40 */

	-webkit-transition : color .3s ease;
	transition         : color .3s ease;
}

#imagelightbox-close:before,
#imagelightbox-close:after
{
	width            : 2px;
	content          : '';
	position         : absolute;
	top              : 20%;
	bottom           : 20%;
	left             : 50%;
	margin-left      : -1px;
}

#imagelightbox-close:before
{
	-webkit-transform : rotate(45deg);
	-ms-transform     : rotate(45deg);
	transform         : rotate(45deg);
}

#imagelightbox-close:after
{
	-webkit-transform : rotate(-45deg);
	-ms-transform     : rotate(-45deg);
	transform         : rotate(-45deg);
}

#imagelightbox-caption
{
	text-align       : center;
	position         : fixed;
	z-index          : 10001;
	left             : 0;
	right            : 0;
	bottom           : 0;
	padding          : 0.3125rem; /* 5 */
}

.imagelightbox-arrow
{
	width            : 3.75rem; /* 60 */
	height           : 3.75rem; /* 120 */
	vertical-align   : middle;
	display          : none;
	position         : fixed;
	z-index          : 10001;
	top              : 50%;
	margin-top       : -3.75rem; /* 60 */
	border: none;
	border-radius: 50%;
}

.imagelightbox-arrow-left
{ left : 2.5rem; /* 40 */ }

.imagelightbox-arrow-right
{ right : 2.5rem; /* 40 */ }

.imagelightbox-arrow:before
{
	width         : 0;
	height        : 0;
	border        : 1rem solid transparent;
	content       : '';
	display       : inline-block;
	margin-bottom : -0.125rem; /* 2 */
}

.imagelightbox-arrow-left:before
{
	border-left        : none;
	margin-left        : -0.313rem; /* 5 */
}

.imagelightbox-arrow-right:before
{
	border-right      : none;
	margin-right      : -0.313rem; /* 5 */
}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow
{
	-webkit-animation : fade-in .25s linear;
	animation         : fade-in .25s linear;
}

@-webkit-keyframes fade-in
{
	from
	{ opacity : 0; }
	to
	{ opacity : 1; }
}

@keyframes fade-in
{
	from
	{ opacity : 0; }
	to
	{ opacity : 1; }
}

@media only screen and (max-width : 41.250rem) /* 660 */
{
	#container
	{
		width : 100%;
	}

	#imagelightbox-close
	{
		top   : 1.25rem; /* 20 */
		right : 1.25rem; /* 20 */
	}

	.imagelightbox-arrow
	{
		width      : 2.5rem; /* 40 */
		height     : 2.5rem; /* 60 */
		margin-top : -2.5rem; /* 30 */
	}

	.imagelightbox-arrow-left
	{ left : 0.75rem; /* 20 */ }

	.imagelightbox-arrow-right
	{ right : 0.75rem; /* 20 */ }

	.imagelightbox-arrow:before
	{
		border        : 0.5rem solid transparent;
	}

	.imagelightbox-arrow-left:before
	{
		border-left        : none;
		margin-left        : -0.125rem; /* 5 */
	}

	.imagelightbox-arrow-right:before
	{
		border-right      : none;
		margin-right      : -0.125rem; /* 5 */
	}
}

@media only screen and (max-width : 20rem) /* 320 */
{
	.imagelightbox-arrow-left
	{ left : 0; }

	.imagelightbox-arrow-right
	{ right : 0; }
}


/* Allgemeine Klassen *************************************************************************************************/
.dropdown-submenu
{
	position : relative;
}

.dropdown-submenu a::after
{
	transform : rotate(-90deg);
	position  : absolute;
	right     : 6px;
	top       : .8em;
}

.dropdown-submenu .dropdown-menu
{
	top          : 0;
	left         : 100%;
	margin-left  : .1rem;
	margin-right : .1rem;
}

.dropdown-submenu:hover > .dropdown-menu
{
	display : block;
}

.dropdown-submenu:hover > a:after
{
	border-left-color : #FFFFFF;
}

.w5
{width : 5%;}

.w10
{width : 10%;}

.w15
{width : 15%;}

.w20
{width : 20%;}

.w25
{width : 25%;}

.w30
{width : 30%;}

.w35
{width : 35%;}

.w40
{width : 40%;}

.w45
{width : 45%;}

.w50
{width : 50%;}

.w55
{width : 55%;}

.w60
{width : 60%;}

.w65
{width : 65%;}

.w70
{width : 70%;}

.w75
{width : 75%;}

.w80
{width : 80%;}

.w85
{width : 85%;}

.w90
{width : 90%;}

.w95
{width : 95%;}

.w100
{width : 100%;}

.wpx100
{width : 100px;}

.side-left
{
	float : right;
}

.side-right
{
	float : left;
}

.clearfix
{
	clear : both;
}

.inline
{
	display : inline-flex;
}

.mobile
{
	display: none;
}

.note-editor
{
	width : 93%;
}

.rotate
{
	-moz-transition    : all 2s linear;
	-webkit-transition : all 2s linear;
	transition         : all 2s linear;
}

.rotate.full
{
	-webkit-animation : rotate-full 2s infinite; /* Safari 4+ */
	-moz-animation    : rotate-full 2s infinite; /* Fx 5+ */
	-o-animation      : rotate-full 2s infinite; /* Opera 12+ */
	animation         : rotate-full 2s infinite; /* IE 10+, Fx 29+ */
}

.rotate.half
{
	-moz-transform    : rotate(180deg);
	-webkit-transform : rotate(180deg);
	transform         : rotate(180deg);
}

@-webkit-keyframes rotate-full
{
	from
	{transform : rotate(0deg);}
	to
	{transform : rotate(360deg);}
}

@-moz-keyframes rotate-full
{
	from
	{transform : rotate(0deg);}
	to
	{transform : rotate(360deg);}
}

@-o-keyframes rotate-full
{
	from
	{transform : rotate(0deg);}
	to
	{transform : rotate(359deg);}
}

@keyframes rotate-full
{
	from
	{transform : rotate(0deg);}
	to
	{transform : rotate(360deg);}
}

/* Sehr kleine Displays ***********************************************************************************************/
@media (max-width : 575.98px)
{
	main.login
	{
		padding : 10px;
	}

	section.login
	{
		width : 300px;
	}

	.text-field-default
	{
		max-width : 100%;
	}

	.left-box, .right-box
	{
		width   : 100%;
		padding : 0;
	}

	.dropdown-submenu a::after
	{
		transform : rotate(0deg);
	}

	a.dropdown-item
	{
		text-align : center;
	}

	.mobile
	{
		display: inline;
	}

	hr.mobile
	{
		display: block;
	}

	span.desktop
	{
		display: none;
	}
}

/* Kleine Displays ****************************************************************************************************/
@media (min-width : 576px) and (max-width : 767.98px)
{
	main.login
	{
		padding : 10px;
	}

	section.login
	{
		width : 250px;
	}

	.text-field-default
	{
		max-width : 100%;
	}

	.left-box, .right-box
	{
		width   : 100%;
		padding : 0;
	}

	.dropdown-submenu a::after
	{
		transform : rotate(0deg);
	}

	a.dropdown-item
	{
		text-align : center;
	}

	.mobile
	{
		display: inline;
	}

	hr.mobile
	{
		display: block;
	}

	span.desktop
	{
		display: none;
	}
}

/* Mittelgroße Displays ***********************************************************************************************/
@media (min-width : 768px) and (max-width : 991.98px)
{
	main.login
	{
		padding : 20px;
	}

	section.login
	{
		width : 300px;
	}

	.text-field-default
	{
		max-width : 75%;
	}

	.left-box, .right-box
	{
		width   : 100%;
		padding : 0;
	}
}

/* Große Displays *****************************************************************************************************/
@media (min-width : 992px) and (max-width : 1199.98px)
{
	main.login
	{
		padding : 20px 100px 20px 100px;
	}

	section.login
	{
		width : 400px;
	}

	.text-field-default
	{
		max-width : 50%;
	}
}

/* Sehr große Displays ************************************************************************************************/
@media (min-width : 1200px)
{
	main.login
	{
		padding : 20px 200px 20px 200px;
	}

	section.login
	{
		width : 400px;
	}

	.text-field-default
	{
		max-width : 50%;
	}
}