/* /////// */
/* Content */
/* /////// */

/*//////////////////////////////////////////////*/
/* Main Wrappers (Home, Login, Register, Reset) */
/*//////////////////////////////////////////////*/

#outer-wrapper{
	width: 100%;
}

#outer-wrapper.fixed{
	height: 100vh;
	position: fixed;
    overflow: hidden;
}

#wrapper{
	width: calc(100% - 20px);
	margin: 1rem auto 1rem auto;
	overflow: hidden;
}

#utility #wrapper{
	max-width: 600px;
}

#content{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: var(--color-bg-1);
}

@media only screen and (min-width: 1100px){
	#content{
		padding: 20px;
	}
}

#utility #content{
	padding: 10% 5% 10% 5%;
}

@media only screen and (min-width: 600px){
	#utility #content{
		padding: 10%;
	}
	
	#utility .knob-label{
		width: 200px;
	}
}


#footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 0.8em;
}


@media only screen and (min-width: 1100px){
	#footer{
		flex-direction: column;
		align-items: flex-end;
		gap: 0.2em;
	}
}

#utility #footer{
	align-items: center;
}

#footer-official{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
}

@media only screen and (min-width: 700px){
	#footer-official{
		flex-direction: row;
		gap: 1em;
	}
}

#footer-copyright,
#footer-links,
#footer-poweredby{
	display: flex;
	align-items: center;
	gap: 0.4em;
}

#footer-logo{
	height: 1.6em;
}

#footer-poweredby,
#footer-poweredby a{
	color: var(--color-text);
}

#footer-poweredby a:hover{
	color: var(--color-text-dimmed); 
}




/*////////*/
/* HEADER */
/*////////*/

#header,
#header-break{
	width:100%;
	margin:0px auto 0px auto;
	padding:0px;
}

#header-break{
	margin:15px auto 15px auto;
}


/* Logo */

#logo{
	float:left;
}

#logo img{
	height:50px;
	max-width:300px;
}

#utility #logo{
	display:flex;
	justify-content: center;
	width: auto;
	max-width: 80%;
	margin: 0px 0px 50px 0px;
}

#utility #logo img{
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 150px;
}

#utility-links{
	margin-top: 50px;
}


/* Menü */

#menu{
	float:left;
	margin:10px 10px 0px 30px;
	font-size:1.2em;
}

#menu > ul > li{
	color:#fff;
	text-align:center;
	display: inline-block;
	padding:0px 15px 0px 15px;
}


/* Login and Logout Links */

#logout-link,
#login-link{
	float:right;
	font-size:15px;
	margin-top:13px;
}


/* Utility Pages (Login/Register/Reset) */

#utility #utility-form{
	display: flex;
	flex-direction: column;
	width: 100%;
}

#utility-button{
	margin: 20px 12px 12px 12px;
}

.utility-text{
	margin: 25px 12px 20px 12px;
}

@media only screen and (min-width: 600px){
	#utility .knob-value{
		padding-right: 6px;
	}
	
	#utility-button{
		margin: 20px 6px 6px 6px;
	}
	
	.utility-text{
		margin: 25px 6px 20px 6px;
	}
}

#contact-text,
#imprint-text,
#privacy-text{
	width: 100%;
}

/* ////////////////// */
/* Fullscreen Viewers */
/* ////////////////// */

#fullscreen-viewer{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-height: 100vh;
	position: absolute;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.8);
}

@media only screen and (min-width: 600px){
	#fullscreen-viewer{
		align-items: flex-end;
	}
}

@media only screen and (min-width: 1000px){
	#fullscreen-viewer{
		flex-direction: row;
		justify-content: center;
		align-items: unset;
	}
}

#fullscreen-viewer-close{
	color: var(--color-text);
}


/* Modals */

#modal-viewer{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
}

.modal-box{
	display: flex;
	flex-direction: column;
	max-width: min(90%, 600px);
	min-width: min(90%, 400px);
	padding: 20px;
	border-radius: var(--border-radius-panel);
	border-width: var(--border-width-panel);
	border-color: var(--color-border-2);
	background-color: var(--color-bg-1);
}

.modal-buttons{
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 20px;
}

.modal-button.button{
	margin-left: 5px;
	margin-right: 5px;
	border-color: var(--color-border-2);
	background-color: var(--color-bg-2);
}


/* Viewers */

#fullscreen-viewer-buttons{
	display: flex;
	flex-direction: row-reverse;
    justify-content: flex-start;
	position: fixed;
	z-index: 101;
}

@media only screen and (min-width: 1000px){
	#fullscreen-viewer-buttons{
		flex-direction: column;
		top: 0px;
		right: 0px;
	}
}

#fullscreen-viewer .fullscreen-viewer-button.button{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	margin: 20px 10px 20px 10px;
	padding: 8px;
	color: var(--color-text);
	box-sizing: border-box;
	border-radius: 50%;
	background-color: var(--color-bg-1);
	-webkit-box-shadow: 0px 0px 30px -5px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 30px -5px rgba(0,0,0,1);
	box-shadow: 0px 0px 30px -5px rgba(0,0,0,1);
	cursor: pointer;
}

@media only screen and (min-width: 600px){
	#fullscreen-viewer .fullscreen-viewer-button.button{
		margin: 20px 20px 0px 0px;
	}
}


#fullscreen-viewer .fullscreen-viewer-button.button:hover{
	background-color: var(--color-bg-2);
}



/* Fullscreen Image Viewer */

#image-viewer{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    align-items: center;
	align-content: center;
	width: 100%;
	height: 100vh;
	max-width: 1600px;
	
}

#image-viewer-slider{
	display: flex;
	justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
    flex-grow: 2;
}

#image-viewer-dots{
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top: 1%;
}

#image-viewer-slider .slick-arrow:before{
    font-size: 30px;
}

#image-viewer-dots .slick-dots li.slick-active button:before{
    opacity: .75;
    color: white;
	font-size: 10px;
}

#image-viewer-dots .slick-dots li button:before{
    opacity: .25;
    color: white;
	font-size: 10px;
}


/* Fullscreen Document Viewer */

#document-viewer{
	justify-content: center;
    display: flex;
    width: 100%;
	margin-top: 80px;
	padding: 0% 4% 4% 4%;
}

@media only screen and (min-width: 1000px){
	#document-viewer{
		margin: 0px;
		padding: 4%;
	}
}
	
/*////////////////////////////////*/
/*              HOME              */
/*////////////////////////////////*/

/* Container */

#home-wrapper{
	flex-wrap:wrap;
}

#home-info{
	display:flex;
	flex-direction:row-reverse;
	flex-wrap:wrap;
	width:100%;
}


/* Welcome Text */

#welcome-text{
	width:100%;
	box-sizing:border-box;
	margin-bottom:40px;
}


/* Opening Hours */

#opening-hours{
	width:100%;
	box-sizing:border-box;
}

/* Rental Hours + Room Hours */

#rental-hours-header,
#room-hours-header{
	display:flex;
	align-items:center;
	gap:1em;
	margin-bottom:10px;
}

#rental-hours-header > div,
#room-hours-header > div{
	display:flex;
}

#rental-hours-header-text,
#room-hours-header-text{
	flex-direction:column;
	gap:0.5em 1em;
}

#rental-hours-edit,
#room-hours-edit{
	flex-grow:2;
	justify-content:right;
	gap:0.2em;
}


/* Rental Hours */

#rental-hours-edit .edit_save, #rental-hours-edit .edit_cancel{
	margin-top:5px;
}

#rental-hours-table{
	table-layout:fixed;
	width:100%;
	border-spacing:1px;
	border-collapse:separate;
	font-size:0.8em;
}

#rental-hours-table td{
	padding:7px;
}

#rental-hours-table td:nth-child(2){
	text-align:center;
}

#rental-hours-table td.rental-hours-day{
	width:70px;
	white-space:nowrap;
}

#rental-hours-table td.rental-hours-timeframe{
	width:75px;
	white-space:nowrap;
}

.editing-on-rental-hours #rental-hours-table td.rental-hours-day,
.editing-on-rental-hours #rental-hours-table td.rental-hours-timeframe{
	width:105px;
}

#rental-hours-table td.rental-hours-remove{
	width:auto;
}
.editing-on-rental-hours #rental-hours-table td.rental-hours-remove{
	width:25px;
}

#rental-hours-table .rental-hours-day-select .ui-selectmenu-button{
	width:90px;
}

#rental-hours-table .rental-hours-mod-select .ui-selectmenu-button{
	width:100%;
	box-sizing:border-box;
}

#rental-hours-table .rental-hours-from-input input, 
#rental-hours-table .rental-hours-to-input input{
	width:46px;
	text-align:center;
	font-size:1em;
}

#rental-hours-table .rental-hours-remove-button{
	display:flex;
	width:100%;
	justify-content:center;
}

#rental-hours-add-shift{
	cursor:pointer;
	text-align:center;
}

#rental-hours-edit button.edit_save{
	margin-right:10px;
}


/* Room Hours */

#room-hours-table{
	width:100%;
	border-spacing:1px;
	border-collapse:separate;
	font-size:0.8em;
}

#room-hours-table td{
	width:50%;
	padding:7px;
	vertical-align: middle;
}

#room-hours-table span{
	vertical-align: middle;
}

#room-hours-table td:nth-child(2){
	text-align:center;
}

#room-hours-table .room-hours-day-select .ui-selectmenu-button{
	width:90px;
}

#room-hours-table .room-hours-from-input input, 
#room-hours-table .room-hours-to-input input{
	width:50px;
	text-align:center;
	font-size:1em;
}

#room-hours-add-shift{
	cursor:pointer;
	text-align:center;
}


#room-hours-edit button.edit_save{
	margin-right:10px;
}


/* Mod Contact */

#mod-contact-table{
	width:100%;
	border-spacing:1px;
	border-collapse:separate;
	font-size:0.8em;
}

#mod-contact-table th{
	padding:10px;
}

#mod-contact-table td{
	padding:10px;
}


/* Contact Text */

#contact-text-textarea textarea{
	width: 96%;
    height: 200px;
    padding: 2%;
    resize: vertical;
}


/* Blog */

#blog{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	box-sizing:border-box;
	margin-top:20px;
}

#blog h1{
	width:100%;
}

#blog-entries{
	width:100%;
}

#blog .blogentry{
	text-align:left;	
}

#blog .blogentry{
	position:relative;
	width:100%;
}


#blog .blog_title,
#blog .blog_title_edit{
	border:0px;
}

#blog .blog_title_input{
	width: 350px;
	border: 0px;
	margin-left: 10px;
	padding: 8px;
	background: rgba(0,0,0,0.2);
	color: var(--color-text);
	font-size: 1em;
}

#blog .blog_header{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	width: 100%;
	background: rgb(255,255,255,0.1);
	border: 0px;
	margin: 20px 0px 0px 0px;
	font-size: 1em;
}

#blog .blog_header:not(.active){
	border-radius: 5px;
}

#blog .blog_header.active{
	border-radius: 5px 5px 0px 0px;
}

#blog .blog_header.blog_create{
	cursor: pointer;
}

#blog .blog_create.blog_content{
	text-align: center;
}

#blog .blog_header_left,
#blog .blog_header_right{
	display: flex;
	align-items: baseline;
	padding: 10px 15px;
	box-sizing: border-box;
}

#blog .blog_header_left{
	flex-grow: 2;
}

#blog .blog_date,
#blog .blog_edit{
	display: flex;
	align-items: center;
}

#blog .blog_textarea{
	width: 100%;
	height: 250px;
	border: 0px;
	background: rgba(0,0,0,0.2);
	color: #ffffff;
	text-align: left;
	padding: 10px;
	resize: vertical;
}

#blog .blog_content{
	display: flex;
	border-radius: 0px 0px 5px 5px;
	background: rgb(255,255,255,0.05);
	width: 100%;
	padding: 15px;
	font-size: 1em;
	box-sizing: border-box;
}

#blog .blog_content.blog_create{
	padding: 30px 15px 30px 15px;
}

#blog .blogentry:not(.editing-on-blog-entry) .blog_header.blog_create.active,
#blog .blogentry:not(.editing-on-blog-entry) .blog_header.blog_create:hover{
	background: var(--color-primary);
}



/*////////////////////////////////*/
/*            CALENDAR            */
/*////////////////////////////////*/

/*///////////*/
/* Item List */
/*///////////*/


/* Sort entries */


#item-list-data-sorting .ui-sortable-helper{
	opacity: 0.9;
}

.item-list-sortable-placeholder{
	border-width: 5px;
	border-color: var(--color-bg-2-alt);
	border-style: dashed;
}


/* Filters */

#item-list-filter-noresult{
	font-style: italic;
}


/*///////////*/
/* Item List */
/*///////////*/

/*
#item-list .page-nav-mcat > .page-nav-cat-header:not([class*=" editing-on-mcat-"]):not([class^="editing-on-mcat-"]),
#item-list .page-nav-cat > .page-nav-cat-header:not([class*=" editing-on-cat-"]):not([class^="editing-on-cat-"]){
	cursor: pointer;
}
*/

#item-list .page-nav-cat-header[class*=" editing-on-mcat-"],
#item-list .page-nav-cat-header[class^="editing-on-mcat-"],
#item-list .page-nav-cat-header[class*=" editing-on-cat-"],
#item-list .page-nav-cat-header[class^="editing-on-cat-"]{
	cursor: revert;
}

#item-list .item-list-cat-header-name-input{
	width: 100%;
	box-sizing: border-box;
}

#item-list .item-list-cat-header-active,
#item-list .item-list-cat-header-internal{
	font-style: italic;
	margin-left: 10px;
}

#item-list .page-nav-cat-header-edit{
	display: flex;
	align-items: center;
	gap: var(--button-gap);
}

@media (-moz-touch-enabled: 0), (pointer:fine){	
	#item-list .item-list-cat-header-edit-start{
		display: none;
	}
}

#item-list .page-nav-mcat > .page-nav-cat-header:not([class*=" editing-on-mcat-"]):not([class^="editing-on-mcat-"]):hover .item-list-cat-header-edit-start,
#item-list .page-nav-cat > .page-nav-cat-header:not([class*=" editing-on-cat-"]):not([class^="editing-on-cat-"]):hover .item-list-cat-header-edit-start{
	display: flex;
}

#item-list .page-nav-cat-header[class*=" editing-on-mcat-"],
#item-list .page-nav-cat-header[class^="editing-on-mcat-"],
#item-list .page-nav-cat-header[class*=" editing-on-cat-"],
#item-list .page-nav-cat-header[class^="editing-on-cat-"]{
	padding: 10px;
	background-color: var(--color-bg-2);
}

#item-list .page-nav-cat-header[class*=" editing-on-mcat-"] .page-nav-cat-header-icon,
#item-list .page-nav-cat-header[class^="editing-on-mcat-"] .page-nav-cat-header-icon,
#item-list .page-nav-cat-header[class*=" editing-on-cat-"] .page-nav-cat-header-icon,
#item-list .page-nav-cat-header[class^="editing-on-cat-"] .page-nav-cat-header-icon{
	opacity: 1;
}


/*///////*/
/* Item  */
/*///////*/

.item-panel{
	width:100%;
	box-sizing: border-box;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: var(--color-bg-2-alt-1);
	border-bottom-color: var(--color-bg-1);
	background-color: var(--color-bg-2);
}

.item-panel-element:not(.scroll-wrapper){
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: center;
	align-items:center;
	align-content:center;
}


/* Item Name, Item Semester, Item inaktiv, Item Preis */

#item-header{
	flex-wrap: nowrap;
	align-items: baseline;
	text-align: left;
	font-size: 1.3em;
	border-width: 1px;
	border-bottom-color: var(--color-bg-1);
	border-radius: 5px 5px 0px 0px;
}

#item-header-data{
	display:flex;
	flex-wrap:wrap;
	flex-grow:10;
}

#item-header-edit{
	display:flex;
}

#item-edit{
	align-items:start;
}

#item-header-misc{
	flex-wrap:wrap;
}

#item-name{
	flex-grow:2;
}

#item-name-display{
	flex-grow:2;
}

#item-name-edit{
	flex-grow:2;
	width:calc(100% - 20px);
	color:#fff;
}

#item-name-edit input{
	width: 100%;
	font-size: 1em;
}

#item-inactive{
	color: var(--color-error);
}

/* Item Image & Description */

#item-image-description{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#item:not(.editing-on-item) #item-image-description{
	border-bottom-width: 1px;
	border-bottom-color: var(--color-bg-2-alt-1);
	border-radius: 0px 0px 5px 5px;
}

/* Item Image */

#item-image{
	display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
	flex-grow: 1;
    justify-content: center;
    align-items: center;
    align-content: center;
	width: 100%;
	height: 250px;
	padding: 10px 0px 0px 0px;
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: var(--color-bg-1);
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

.editing-on-item #item-image{
	padding: 7px;
}

#item-image-slider{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 90%;
	flex-grow:2;
}

#item-image-slider:not(.slick-dotted){
	margin-bottom: 10px;
}

#item-image-slider-dots{
	display:flex;
	justify-content:center;
	align-items:center;
}

#item-image-slider-dots .slick-dots li{
	width: 10px;
}


/* Item image editing */

#item-image-edit{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
	padding: initial;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}

#item-image-edit-add,
.item-image-edit-element{
	list-style-type: none;
	width:100px;
	height:100px;
	border-radius:3px;
    margin:5px;
	overflow: hidden;
}

#item-image-edit-template{
	display:none;
}

.item-image-edit-element-live{
	display:inline-block;
	position:relative;
	cursor:move;
}

.item-image-edit-element-remove{
	position:absolute;
	right:0px;
	top:0px;
	margin: 0px;
	padding: 4px;
	text-align:center;
	background:rgba(0,0,0,0.6);
	border-radius:0px 3px 0px 3px;
	display:none;
	z-index:2;
}

.item-image-edit-filler{
	display:inline-block;
	width:100px;
	height:0px;
	margin:0px 4px 0px 4px;
	opacity:0;
	cursor:default;
}

.item-image-edit-element-remove:hover{
	background:rgba(50,50,50,0.85);
}

.item-image-edit-element-remove-icon{
	width:20px;
	height:20px;
	margin:5px;
}

.item-image-edit-element:hover .item-image-edit-element-remove{
	display:revert;
}

.item-image-edit-element-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 100%;
    max-height: 100%;
	z-index:1;
}

#item-image-edit-add{
	display:inline-block;
	position:relative;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border:3px #fff dashed;
	font-size:15px;
	cursor:pointer;
	text-align:center;
	padding:0px;
}

#item-image-edit-add:hover{
	border:3px #75B5FF dashed;
}

#item-image-edit-add label{
	position: relative;
    display: block;
	width:100%;
	height:100%;
	line-height:100px;
	cursor:pointer;
}

#item-image-edit-add label span{
	position:relative;
	display: inline-block;
	line-height: 15px;
}

#item-image-edit-upload{
	display:none;
}


/* Item Description */

#item-description{
	flex-shrink: 1;
	flex-grow: 1;
	width: 100%;
	height: 250px;
	padding: 15px;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

#item-description-display{
	font-size:0.8em;
	text-align:left;
}

#item-description-container{
	width:100%;
	height:100%;
	overflow-y:auto;
	mask-image:  -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 95%); /* FF3.6-15 */
	-webkit-mask-image:  -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	mask-image:  linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 83%, rgba(0,0,0,0) 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#item-description-edit{
	height:200px;
	width:300px;
	font-size:12px;
	color:#fff;
	padding:5px;
}

#item-description-parent-set, #item-description-set{
	font-size:14px;
}

#item-description-set-list{
	width:100%;
	border-radius:2px;
	border:0px;
	border-spacing:2px;
	border-collapse:separate;
}

#item-description-set-list td{
	background:rgba(0,0,0,0.1);
	padding:4px;
}

#item-description-set-list td:nth-child(2){
	min-width: 3em;
	text-align:center;
}


/* Item flag list */

#item-flag-list{
	width: 100%;
    border-spacing: 1px;
    border-collapse: separate;
}

#item-flag-list td{
    vertical-align: middle;
    text-align: left;
    background: rgb(0,0,0,0.2);
    padding: 10px;
}

#item-flag-list td:last-child{
	width: 15%;
    text-align: center;
}

#item-flag-list-add td:hover{
	background: rgba(0,0,0,0.1);
    cursor: pointer;
}

.item-flag-list-check{
	margin-right: 15px;
	cursor: default !important;
}

/* Item Settings 2 */

#item-settings-2 input{
	width:100px;
	text-align:right;
}


/* Item cat */

#item-cat-select{
	width:200px;
}

/* Item Settings 3 */


/* Item bahave (Setting) */

#item-behave{
	flex-wrap:wrap;
}


/* Item Set */

#item-set{
	padding: 15px;
}

#item-set-info{
	font-size: 0.8em;
}

@media only screen and (min-width: 1100px){
	#item-set-info{
		display: none;
	}
}

#item-set-list{
	width: 100%;
	border-radius: 5px;
	border: 2px white dashed;
	border-spacing: 1px;
	border-collapse: separate;
}

#item-set-list tr{
	height:40px;
	cursor:move;
}

#item-set-list td{
	background:rgba(0,0,0,0.2);
	padding:5px 10px;
}

#item-set-list td.item-set-list-item-name{
	width:68%;
	text-align:left;
}

#item-set-list td.item-set-list-item-amount{
	width:21%;
	text-align:right;
}

#item-set-list td.item-set-list-item-remove{
	width:7%;
	text-align:center;
}

#item-set-list #item-set-list-add, #item-set-list #item-set-list-add span{
	width:100%;
	text-align:center;
	color:rgba(255,255,255,0.5);
	cursor:default;
}

#item-set-list tr:not(.ui-sortable-helper):not(.ui-draggable-dragging):last-child td:first-child {
    border-bottom-left-radius: 5px;
}

#item-set-list tr:not(.ui-sortable-helper):not(.ui-draggable-dragging):last-child td:last-child {
    border-bottom-right-radius: 5px;
}

#item-set-list tr.ui-sortable-helper, #item-set-list tr.ui-draggable-dragging{
	height:40px;
}

#item-set-list tr.ui-sortable-helper td, #item-set-list tr.ui-draggable-dragging td{
	padding:10px;
}

#item-set-list tr.ui-sortable-helper td:first-child, #item-set-list tr.ui-draggable-dragging td:first-child{
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

#item-set-list tr.ui-sortable-helper td:last-child, #item-set-list tr.ui-draggable-dragging td:last-child{
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

#item-set-list td.item-set-list-item-amount .count{
	margin-left:5px;
}

#item-set-list td.item-set-list-item-amount .count-display{
	margin-right:10px;
}



/* Calendar */

#calendar-html{
	width: auto;
	margin-top: 15px;
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: var(--color-bg-1);
}

#calendar-navigation{
	display: flex;
	align-items: stretch;
	width: 100%;
	border-top-width: 1px;
	border-top-color: var(--color-bg-2-alt-1);
	border-radius: 5px 5px 0px 0px;
	overflow: hidden;
}

#calendar-navigation .calendar-timeframe{
	width: auto;
	flex-basis: 0;
	text-align: center;
}

#calendar-navigation .calendar-link{
	padding: 10px;
	cursor: pointer;
}

#calendar-navigation .calendar-navigation-browse{
	flex-grow: 1;
}

#calendar-navigation .calendar-navigation-browse .calendar-link{
	color: var(--color-text);
}

@media (hover:hover){
	#calendar-navigation .calendar-link:hover{
		color: var(--color-text);
		background-color: var(--color-primary);
	}
}

#calendar-navigation .calendar-navigation-browse .calendar-link{
	width:100%;
	height:100%;
	box-sizing: border-box;
}

#calendar-this{
	flex-grow: 2;
	border-left-color: var(--color-bg-1);
	border-right-color: var(--color-bg-1);
}

#calendar-prev{
	border-right-width: 0px;
}

#calendar-next{
	border-left-width: 0px;
}

#calendar-this-month-navigate{
	color: var(--color-primary);
}

#calendar-this-day{
	padding:10px 5px;
}

#calendar-wrapper .calendar-grid tr > td + td {
  border-left-width: 1px;
}

#calendar-wrapper .calendar-grid tr + tr > td {
  border-top-width: 1px;
}


/* Month View */

.calendar-grid{
	width: 100%;
	table-layout: fixed;
	border-width: 0px 1px 0px 1px;
	border-style: solid;
	border-color: var(--color-bg-2-alt-1);
	font-size: 12px;
}

tr.calendar-row:last-child td.calendar-day{
	border-bottom:0px;
}

#calendar-grid .calendar-day-head-long{
	display:none;
}

td.calendar-day{
	width: 14.28%; 
	height: 80px;
	font-size: 11px;
	overflow: hidden;
	vertical-align: top;
	border-width: 0px;
	border-style: solid;
	background-clip: padding-box;
}

td.calendar-day.booked-grey,
td.calendar-quarter.booked-grey{
	background-color: var(--color-bg-3);
}

td.calendar-day.booked-grey.booked-blocked,
td.calendar-quarter.booked-grey.booked-blocked,
td.calendar-day.booked-grey.booked-blocked-light,
td.calendar-quarter.booked-grey.booked-blocked-light{
	background-color: var(--color-bg-1-alt);
}

td.calendar-day.booked-green,
td.calendar-cell.booked-green{
	background-color: var(--color-booked-green) !important;
}

td.calendar-day.booked-light-green,
td.calendar-cell.booked-light-green{
	background-color: var(--color-booked-green-darker) !important;
}

td.calendar-day.booked-orange,
td.calendar-cell.booked-orange{
	background-color: var(--color-booked-orange);
}

td.calendar-day.booked-orange.booked-blocked,
td.calendar-cell.booked-orange.booked-blocked,
td.calendar-day.booked-orange.booked-blocked-light,
td.calendar-cell.booked-orange.booked-blocked-light{
	background-color: var(--color-booked-orange-darker);
}

td.calendar-day.booked-red,
td.calendar-cell.booked-red{
	background-color: var(--color-booked-red);
}

td.calendar-day.booked-light-red,
td.calendar-cell.booked-light-red{
	background-color: var(--color-booked-red-darker);
}

td.calendar-day.booked-red.booked-blocked,
td.calendar-cell.booked-red.booked-blocked,
td.calendar-day.booked-red.booked-blocked-light,
td.calendar-cell.booked-red.booked-blocked-light{
	background-color: var(--color-booked-red-minimal-darker);
}

td.calendar-day.booked-light-red.booked-blocked,
td.calendar-cell.booked-light-red.booked-blocked,
td.calendar-day.booked-light-red.booked-blocked-light,
td.calendar-cell.booked-light-red.booked-blocked-light{
	background-color: var(--color-booked-red-much-darker);
}

#item:not([data-booking-mode='hourly']) #calendar-html[data-mode='daily'] td.calendar-cell:not(.booked-blocked):not(.booked-red):not(.booked-light-red):hover{
	background-color: var(--color-booked-green);
	cursor: pointer;
}

#calendar-html[data-mode='hourly'] td:not(.booked-blocked):not(.booked-red):not(.calendar-hour):hover{
	background-color: var(--color-booked-green);
	cursor: pointer;
}

#item[data-booking-mode='hourly'] #calendar-html[data-mode='daily'] td.calendar-cell:hover{
	cursor: not-allowed;
}

td.calendar-day-np{
	border: 0px;
	background: none;
	height: 60px;
}

td.calendar-day-head {
	width: 14.28%; 
	text-align: center; 
	border-width: 0px;
	border-style: solid;
	background-clip: padding-box;
	background-color: var(--color-primary);
	padding: 5px;
}

.day-link{
	display: flex;
	width:100%;
	justify-content: center;
	padding: 5px;
	color: var(--color-text);
	background-color: rgba(0, 0, 0, 0.1);
}

.day-current{
	background-color: var(--color-primary);
}

#item[data-booking-mode="daily"] .day-link:focus,
#item[data-booking-mode="daily"] .day-link:active{
	color: var(--color-text);
	pointer-events: none;
}
	
@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	#item[data-booking-mode="daily"] .day-link:hover{
		color: var(--color-text);
		pointer-events: none;
	}
	
	#item:not([data-booking-mode="daily"]) .day-link:hover{
		color: var(--color-text);
		background-color: var(--color-primary);
		cursor: pointer;
	}
	
	#item:not([data-booking-mode="daily"]) .day-link.day-current:hover{
		background-color: var(--color-secondary);
	}
}

.calendar-day-wrapper{
	box-sizing: border-box;
	width: 100%;
	padding: 5%;
}

.calendar-quarter-wrapper{
	padding:5%;
}

#calendar-wrapper .calendar-return-day{
	font-size:0.7em;
}

#calendar-wrapper .calendar-quarter-projects,
#calendar-wrapper .calendar-day-projects{
	list-style-type: none;
	margin-bottom: 20px;
	font-size: 0.7em;
}

#calendar-wrapper .calendar-quarter-project,
#calendar-wrapper .calendar-day-project{
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
	overflow-wrap: break-word;
	margin-bottom: 10px;
}

#calendar-wrapper .calendar-quarter-project a,
#calendar-wrapper .calendar-day-project a{
	color: var(--color-text);
}

@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	#calendar-wrapper .calendar-quarter-project a:hover,
	#calendar-wrapper .calendar-day-project a:hover{
		color: var(--color-secondary);
	}
}

#calendar-wrapper .project_select{
	width: 170px;	
}


/* Day View */

#calendar-wrapper .calendar-grid-day{
	width: 100%;
	font-size: 12px;
	float: left;
	table-layout: fixed;
	border-spacing: 0px;
	border-top-width: 1px;
    border-top-style: solid;
	border-left-width: 1px;
    border-left-style: solid;
    border-right-width: 1px;
    border-right-style: solid;
}

#calendar-wrapper .calendar-grid-day td{
	height: 25px;
	border-width: 0px;
	border-style: solid;
	overflow: hidden;
	vertical-align: middle;
	background-clip: padding-box;
}

#calendar-wrapper .calendar-hour{
	width:8%;
	text-align:center;
	font-weight:bold;
}

#calendar-wrapper .calendar-quarter{
	width: 23%;
	font-size: 11px;
	text-align: center;
	padding: 3px;
}

#calendar-wrapper .calendar-quarter-from{
	display:none;
}

#calendar-wrapper .calendar-quarter-to{
	display:none;
}

#calendar-wrapper .calendar-quarter-break{
	display:none;
}

#calendar-wrapper .calendar-quarter.calendar-disp-from .calendar-quarter-from{
	display:inline;
}

#calendar-wrapper .calendar-quarter.calendar-disp-to .calendar-quarter-to{
	display:inline;
}

#calendar-wrapper .calendar-quarter-projects{
	list-style-type: none;
}

#calendar-wrapper .calendar-quarter-project{
	margin-bottom: 8px;
}


/* Rent duration */

#rent-duration{
	margin-bottom:1px;
}

#rent-duration .rent-option-label{
	margin-right:5px;
}

#rent-duration .count-display{
	margin-right:2px;
}


/* Maximum rent duration */

#rent-max-duration{
	margin-bottom:1px;
}

#rent-max-duration-global button{
    position: relative;
}

#rent-max-duration-counters .rent-option-label{
	margin-right: 5px;
}

#item-actions{
	padding: 10px;
	border-radius: 0px 0px 5px 5px;
}


/* Instances */

#item-instances{
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#item-instances-list{
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--color-bg-3);
	border: 1px var(--color-border-2) solid;
}

.item-instances-list-element{
	display: flex;
	width: 100%;
}

#item-instances-list-header{
	border-bottom: 1px var(--color-border-2) solid;
}

.item-instances-list-entry{
	border-bottom: 1px var(--color-border-2) solid;
}

.item-instances-list-name{
	display: flex;
	align-items: center;
	justify-content: left;
	flex-grow: 1;
	border-right: 1px var(--color-border-2) solid;
	padding: 12px;
}

.item-instances-list-entry .item-instances-list-name{
	padding: 6px;
}

.item-instances-list-name-input{
    width: 2em;
	flex-grow: 2;
    flex-shrink: 2;
}

.item-instances-list-active{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4em;
	border-right: 1px var(--color-border-2) solid;
	padding: 12px;
}

.item-instances-list-entry .item-instances-list-active{
	padding: 6px;
}

.item-instances-list-remove{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4em;
	padding: 12px;
}

#item-instances-list-add{
	justify-content: center;
	padding: 12px;
}

#item-instances-list-add:hover,
#item-instances-list-add:active,
#item-instances-list-add:focus{
	cursor: pointer;
	background-color: var(--color-bg-2-alt);
}


/* Finish the rent */

#rent-finish{
	justify-content:center;
	gap: 10px;
    padding: 10px;
	border-bottom-color: var(--color-bg-2-alt-1);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-radius: 0px 0px 5px 5px;
}

#rent-finish .rent-option-label{
	margin-right:5px;
}

#rent-values,
#rent-duration-repeat,
#rent-amount-instance-project{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	max-width: 100%;
}

#rent-duration-amount{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;
}

#item .count-display{
	margin-right:5px;
}

#item-amount-display,
#item-max-amount-display{
	font-weight:bold;
}

#rent-instance{
	flex-wrap: nowrap;
	max-width: 100%;
	font-variant-numeric: tabular-nums;
}

#rent-instance-select-button{
	min-width: 5em;
}

#rent-project .rent-project-blocking{
	font-weight:bold;
}

#rent-project{
    flex-grow: 2;
	width: 10%;
    min-width: 250px;
	max-width: 400px;
}

body.mod #rent-project{
	min-width: 310px;
	max-width: 450px;
}

#rent-project-select,
#rent-project-select-button{
	flex-grow: 2;
    width: 10%;
}

#rent-repeat{
	gap: 10px;
}

#rent-repeat-select-button{
	width: 8em;
}

/*//////////*/
/* Projects */
/*//////////*/

/*//////////////*/
/* Project List */
/*//////////////*/

.project-list-element{
	margin:0px 0px 20px 0px;
}

.project-list-element button{
	margin:2px;
}

.project-list-modify{
	display:flex;
	flex-flow:column;
	justify-content:center;
	width:100%;
	margin-bottom:5px;
	padding:5px;
	box-sizing:border-box;
	border-radius:5px;
}

.project-list-modify button{
	margin:2px;
}

.project-list-add-project-edit{
	display: flex;
	gap: var(--button-gap);
}

#project-list-add-project{
	width: 100%;
}

#project-list-add-project-name{
	width: 100%;
}

#project-list-add-project-name-input{
	width: 100%;
}

.project-list-item{
	display: flex;
	flex-direction: row;
	align-items: center;
}

#project-list .project-list-item-check.project-list-item-checked{
	color: var(--color-success);
}

#project-list .project-list-item-check.project-list-item-unchecked{
	color: var(--color-text);
	opacity: 0.4;
}


/*/////////*/
/* Project */
/*/////////*/

#project-data{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	margin-bottom: 30px;
}

#project-name{
	justify-content: center;
	flex-wrap: nowrap;
	font-size: 1.4em;
}

#project-name .knob-value-text{
	flex-grow: 2;
	flex-shrink: 2;
	justify-content: center;
	text-align: center;
}

#project-name .knob-input{
	font-size: 1.2em;
}

#project-name .knob-buffer{
	width: 45px;
}
	
@media only screen and (min-width: 600px){
	/* Projects */
	
	#project-data .knob-label{
		width: 200px;
	}
}

/*////////////////*/
/* Project Blocks */
/*////////////////*/

#project-blocks{
	margin-bottom: 30px;
}

.project-block{
	margin-bottom: 15px;
	border-radius: 5px;
	overflow: hidden;
	border-width: 1px;
	border-style: solid;
}


/* Header */

.project-block-header{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	min-height: 4em;
	padding: 0.5em;
	background-color: var(--color-bg-2-alt-1);
}

@media only screen and (min-width: 600px){
	.project-block-header{
		flex-wrap: nowrap;
	}
}

.project-block-header-element{
	align-items: center;
}

/* Header / Status */

.project-block-header-status{
	display: none;
	width: 9em;
	order: 1;
	gap: var(--button-gap);
}

@media (-moz-touch-enabled: 0), (pointer:fine){	
	.project-block-header-status{
		width: 8em;
	}
}

body.mod .project-block-header-status{
	display: flex;
}


/* Header / Text */

.project-block-header-text,
.project-block-header-text-buffer{
	display: flex;
	width: 7em;
	order: 1;
}

.project-block-header-text-buffer{
	display: none;
}

body.mod .project-block-header-text,
body.mod .project-block-header-text-buffer{
	display: none;
	width: 8em;
}

@media only screen and (min-width: 600px){
	.project-block-header-text{
		display: none;
	}
	.project-block-header-text-buffer{
		display: flex;
	}
}


/* Header / Edit */

.project-block-header-edit{
	display: flex;
	width: 7em;
	order: 2;
}

body.mod .project-block-header-edit{
	width: 9em;
}

@media (-moz-touch-enabled: 0), (pointer:fine){
	body.mod .project-block-header-edit{
		width: 8em;
	}
}

@media (-moz-touch-enabled: 0), (pointer:fine){
	.project-block-header-edit,
	.project-block-header-text,
	.project-block-header-text-buffer{
		width: 6em;
	}
}

@media only screen and (min-width: 600px){
	.project-block-header-edit{
		order: 3;
	}
}

.project-block-header-edit-buttons{
	display: flex;
	justify-content: flex-end;
	flex-basis: 0;
	flex-grow: 1;
	gap: var(--button-gap);
}


/* Header / Time */

.project-block-header-time{
	display: flex;
	order: 3;
	width: 100%;
	padding: 0em 0.2em;
}

@media only screen and (min-width: 600px){
	.project-block-header-time{
		order: 2;
		width: auto;
	}
}

.project-block-header-time-range{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-grow: 2;
	gap: 1em;
	margin: 0.3em 0em;
	font-variant-numeric: tabular-nums;
}

.project-block-header-time-from,
.project-block-header-time-to{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.editing-on-project-header .project-block-header-time-from,
.editing-on-project-header .project-block-header-time-to{
	flex-direction: row;
	gap: 0.5em;
}

.project-block-header-time-label{
	font-size: 0.75em;
	color: var(--color-text-dimmed);
}

.project-block-header-time-from-dates,
.project-block-header-time-to-dates{
	display: inline;
}

.project-block-header-time-from-input,
.project-block-header-time-to-input{
	margin: 0.2em 0.5em;
}

@media only screen and (min-width: 701px){
	/* Content now as big as it would be immediatly after the breakpoint at 1100px */
	  
	  .project-block-header,
	  .project-block-booking{
		  border-bottom: 1px var(--color-border-1) solid;
	  }
	  
	  .project-block-header-time-range-from,
	  .project-block-header-time-range-to{
		  align-items: center;
	  }
	  
	  .project-block-header-time-range-until{
		  font-size: 1em;
	  }
	  
	  .project-block-booking:hover .project-block-booking-edit-button.svg,
	  .editing-on-project-booking .project-block-booking-edit-button.svg{
		  display: flex;
	  }
  }


/* Bookings */

.project-block-booking-edit{
	display: flex;
}

.project-block-bookings{
	display:flex;
	flex-direction: column;
	width:100%;
}

.project-block-booking-element{
	display: flex;
}

.project-block-booking{
	display:flex;
	align-items: stretch;
	width:100%;
	box-sizing: border-box;
	border-bottom: 1px transparent solid;
}

.project-block-booking:last-child{
	border-bottom: 0px;
}

.project-block-header-elements,
.project-block-booking-elements{
	width: 100%;
	padding: 0.5em;
	box-sizing: border-box;
}

.project-block-booking-elements{
	background-color: var(--color-bg-2);
}

.project-block-booking-elements:hover{
	background-color: var(--color-bg-2-alt);
}

.project-block-booking-item{
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex-grow: 2;
	flex-shrink: 2;
	width: 3em;
}

.project-block-booking-image-substitute{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.project-block-booking-name-wrapper{
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow: hidden;
    overflow-wrap: break-word;
}

.mobile .project-block-booking-amount-instance-price{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.editing-off-project-booking .mobile .project-block-booking-amount-instance-price{
	gap: 0.5em;
	font-size: 0.7em;
	opacity: 0.5;
}

.project-block-booking-instance{
	color: var(--color-text);
}	

.project-block-booking-interpretation{
	font-size: 0.7em;
}

.project-block-booking-amount,
.project-block-booking-instance{
	display: flex;
	align-items: center;
	font-variant-numeric: tabular-nums;
	gap: 0.25em;
}

.desktop .project-block-booking-amount,
.desktop .project-block-booking-instance{
	padding: 0em 0.5em;
}

.desktop .project-block-booking-amount,
.desktop .project-block-booking-instance,
.editing-on-project-booking .project-block-booking-amount,
.editing-on-project-booking .project-block-booking-instance{
	gap: 0.75em;
}

.project-block-booking-amount-value{
	display: flex;
	align-items: center;
}

.project-block-booking-instance-value-input.ui-selectmenu-button{
	min-width: 6em;
	max-width: 10em;
}

.project-block-booking-price{
	font-variant-numeric: tabular-nums;
}

.project-block-booking-image-display{
	max-width: 100%;
    max-height: 100%;
	border-radius: 2px;
}

@media (min-width: 700px) and ((hover: hover) or (-moz-touch-enabled: 0) or (pointer: fine)){
	.editing-start-project-booking{
		display: none;
	}
	
	.project-block-booking:hover .editing-start-project-booking{
		display: flex;
	}
}


/* Project Blocks Mobile Variant */

.mobile .project-block-booking-left{
	justify-content: space-between;
	margin: 0.2em 1em 0em 0.5em;
	position: relative;
}

.mobile .project-block-booking-image{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.5rem;
	height: 3.5rem;
	box-sizing: border-box;
	position: relative;
}

.mobile .project-block-booking-image-button,
.mobile .project-block-booking-image-button .svg{
	cursor: pointer;
}

.mobile .project-block-booking-status-button[data-name="check"]{
	width: var(--button-size-fine);
    height: var(--button-size-fine);
	position: absolute;
	bottom: -6px;
	right: -6px;
	padding: 4px;
	border-radius: 50%;
	background-color: var(--color-bg-3);
}

.mobile .project-block-booking-status-button[data-name="check"].transparent{
	opacity: 0.7;
}

.mobile .project-block-booking-right{
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}

.mobile .project-block-booking-row{
	display: flex;
    justify-content: space-between;
    align-items: center;
}


.mobile .project-block-booking-name-wrapper{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5em;
}

.mobile .project-block-booking-name{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	text-overflow: ellipsis;
    overflow: hidden;
	overflow-wrap: break-word;
    line-height: 1em;
    max-height: 2em;
    margin: 5px 0px;
}

.mobile .project-block-booking-edit{
	justify-content: flex-end;
	gap: var(--button-gap);
	margin: 0px 0px 0px 5px;
}

.mobile .project-block-booking-edit .svg{
	margin-bottom: 0px;
}

.mobile .project-block-booking-data{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1em;
}



/* Project Blocks Desktop Variant */

.project-block-booking-elements.desktop{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5em;
}

.desktop .project-block-booking-element{
	align-items: center;
}

.desktop .project-block-booking-status{
	gap: var(--button-gap);
}

.desktop .project-block-booking-item{
	align-items: flex-start;
}

.desktop .project-block-booking-item a{
	text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
}

.desktop .project-block-booking-image{
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0.1rem 0.5rem;
}

.desktop .project-block-booking-amount{
	justify-content: flex-end;
}

.desktop .project-block-booking-price{
	justify-content: flex-end;
	width: 6rem;
}

.desktop .project-block-booking-edit{
	justify-content: flex-end;
	gap: var(--button-gap);
	min-width: 2.5em;
}

/* Rest of project UI */

#project[data-archived="true"] .svg[data-name="edit"]{
	display: none;
}

#project-none,
#project-blocks-none{
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	border-radius: 5px;
	margin-bottom: 30px;
	background-color: var(--color-bg-2);
}

#project-sums{
	display: flex;
	border-radius: 5px;
	padding: 1em 0.5em;
	margin-bottom: 30px;
	box-sizing: border-box;
	background-color: var(--color-bg-2);
}

.project-sum{
	display: flex;
	gap: 0.5em;
	width: 100%;
}

.project-sums-buffer-1{
	flex-grow: 2;
	flex-shrink: 2;
	width: 1rem;
	max-width: 1rem;
}

@media (min-width: 700px){
	.project-sums-buffer-1{
		max-width: 11rem;
	}
}

.project-sums-item{
	flex-grow: 2;
    flex-shrink: 2;
    width: 3em;
}

.project-sums-price{
	width: 7rem;
	text-align: right;
}

.project-sums-buffer-2{
	flex-grow: 2;
    flex-shrink: 2;
    width: 1rem;
	max-width: 1rem;
}

@media (min-width: 700px){
	.project-sums-buffer-2{
		max-width: 2.5rem;
	}
}

#project-actions{
	display: flex;
	margin: 10px 0px 10px;
}

#project-delete{
	background-color: var(--color-error);
	border-radius: 5px;
}

#project-delete:hover,
#project-delete:active,
#project-delete:focus{
	background-color: var(--color-error-brighter);
}

#project-archive,
#project-reactivate{
	background-color: var(--color-primary);
	border-radius: 5px;
}

#project-archive:hover,
#project-archive:active,
#project-archive:focus,
#project-reactivate:hover,
#project-reactivate:active,
#project-reactivate:focus{
	background-color: var(--color-secondary);
}


/*/////////*/
/* Account */
/*/////////*/

#user-list-me{
	margin-bottom:  15px;
}

#user{
	flex-grow: 2;
}

/* Userdaten */

body[data-privilege="support"] #user, body[data-privilege="admin"] #user, body[data-privilege="mod"] #user{
	width:780px;
	float:right;
}
			
@media only screen and (min-width: 600px){
	#user .knob-label{
		width: 250px;
	}
	#user-notifications .knob-label{
		width: 450px;
	}
}


/* Legacy Start*/

#user table td{
	text-align:left;
	background: var(--color-bg-2);
	padding:10px;
}

#user table{
	width:100%;
	border-spacing:1px;
	border-collapse:separate;
}

#user table td{
	width:50%;
	vertical-align:middle;
}

#user table td.edit{
	width:15%;
	text-align:center;
}

#user #user-data td:first-child{
	width:30%;
}

/* Legacy End */


#user #user-verify{
	background: var(--color-success);
	cursor:pointer;
}

#user #user-verify:hover, #user #user-verify:focus{
	background: var(--color-success-brighter);
}

#user #user-delete,
#user #user-delete-final{
	background: var(--color-error);
	cursor:pointer;
}

#user #user-reanimate{
	cursor:pointer;	
}

#user #user-delete:hover,
#user #user-delete:focus,
#user #user-delete-final:hover,
#user #user-delete-final:focus{
	background: var(--color-error-brighter);
}

#user #user-reanimate:hover,
#user #user-reanimate:focus{
	background: var(--color-bg-2-alt-1);
}

.user-flags-row .icon{
	margin-right: 10px;
}

.user-flags-check.svg{
	color: var(--color-success);
	margin-right:15px;
}

#user .user-admin-flags-row-name .svg[data-name="info"]{
	position:relative;
	top:2px;
}

#user td.user-flags-remove-cell{
	width:10%;
	text-align:center;
}

.user-global-flags-save-button,
.user-item-flags-save-button,
.user-admin-flags-save-button{
	margin-right:5px;
}

#user #user-global-flags-add td,
#user #user-global-flags-none td,
#user #user-item-flags-add td,
#user #user-item-flags-none td,
#user #user-admin-flags-add td{
	text-align:center;
}

#user tr.user-flags-add td:hover{
	background:rgba(255,255,255,0.2);
	cursor:pointer;
}

#user .user-item-flags-class{
	font-style: italic;
}


/*//////////*/
/* Settings */
/*//////////*/

#settings-list .page-nav-cat:hover a,
#settings-list .page-nav-cat.active a{
	color: var(--color-primary);
}

#setting-category .settings-group{
	width: 100%;
}


@media only screen and (min-width: 600px) {
    #setting-category .settings-group[data-name="functions"] .knob-label {
        width: 300px;
    }
}

#setting-category .knob-value-text-wrapper{
	max-height: 300px;
	overflow: hidden;
}

@media only screen and (min-width: 600px){
	#setting-category .knob-label{
		width: 250px;
	}
}

.setting .setting-document-buttons{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--button-gap);
	width: 100%;
	margin-bottom: 10px;
}

.setting-document-buttons .button-small{
	flex-grow: 2;
	flex-basis: 0;
	width: 100%;
	background-color: var(--color-bg-3);
	border-color: var(--color-border-2);
}

.setting iframe{
	-ms-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

.setting textarea{
	resize:vertical;
	height:200px;
}


/* Global flags */

#settings-flags-info{
	display: inline;
	position:relative;
	top:2px;
}

#settings-flags,
#settings-functions{
	width: 100%;
    table-layout: fixed;
    border-spacing: 1px;
    border-collapse: separate;
}

#settings-flags td,
#settings-functions td{
	background: rgb(255,255,255,0.1);
    padding: 10px;
    overflow: hidden;
    overflow-wrap: break-word;
}

#settings-flags-row-add td{
	text-align: center;
}

#settings-flags #settings-flags-save{
	margin-right:10px;
}

#settings-flags .settings-flags-name-input input{
	width:90%;
	font-size:16px;
}

#settings-flags td:first-child,
#settings-flags th:first-child{
	width:50%;
}

#settings-flags td:last-child,
#settings-flags th:last-child{
	width:10%;
}

#settings-flags-row-add td{
	cursor:pointer;
}

#settings-flags-row-add td:hover{
	background:rgba(255,255,255,0.2);
}


/* Functions / Change semester globally */

#global-semester{
	margin:0px 10px;
	font-weight:bold;
}


/*/////////*/
/* Drucken */
/*/////////*/

@media print {
	body {
		color:#000;
		background:#fff;
		padding:20px;
	}
}


/*Print Inventory Container*/

#print_inventory{
	display:none;
	color:#000;
	background:#fff;
	width:800px;
	padding:0px;
	font-family:Arial,Verdana,sans-serif;
	position:relative;
}

#print_inventory div{
	width:100%;
	position:relative;
}

#print_inventory_data table{
	width:100%;
	position:relative;
	color:#000;
}

#print_inventory_data table tr:nth-child(even){
	box-shadow: inset 0 0 0 1000px #eee;
}

#print_inventory_data table tr:nth-child(odd){
	box-shadow: inset 0 0 0 1000px #ccc;
}

#print_inventory_data table tr.inventory-print-cat{
	height:50px;
	text-align:center;
	font-weight:bold;
}

#print_inventory_data table tr.inventory-print-spacer{
	height:50px;
	text-align:center;
	box-shadow: none !important;
}

#print_inventory_data table td{
	padding:5px;
}

#print_inventory td.inventory-print-image{
	width:20%;
}

#print_inventory td.inventory-print-description{
	width:40%;
}

#print_inventory td.inventory-print-amount{
	width:10%;
	text-align:right;
}

#print_inventory td.inventory-print-pricerent{
	width:15%;
	text-align:right;
}

#print_inventory td.inventory-print-pricebuy{
	width:15%;
	text-align:right;
}

#print_inventory_data img{
	width:100px;
}

/*Print Inventory Header*/

#print_inventory_logo{
	float:right;
	height:50px;
}

#print_inventory_time{
	float:left;
	font-size:20px;
}

#print_inventory_date{
	font-weight:bold;
}


/*/////////////////*/
/* Kontaktformular */
/*/////////////////*/

#contact-form{
	width:100%;
	text-align:center;
}

#contact-table{
	border-spacing:20px;
	background:none;
	font-size:15px;
	font-family: 'Ubuntu',Arial,Verdana,sans-serif;
}

#contact-table td:nth-child(1){
	width:200px;
	text-align:right;
	vertical-align:top;
	padding:5px;
}

#contact-table td:nth-child(2){
	width:600px;
	text-align:left;
}

#contact-table #contact-reason, #contact-table #contact-project{
	width:50%;
}

#contact-table #contact-text{
	width:100%;
	height:300px;
	padding:5px;
	resize: vertical;
}

#contact-table .error{
	font-weight:bold;
	color:var(--color-error);
}


/* ///////////// */
/* Media Queries */
/* ///////////// */

@media only screen and (min-width: 600px){
	#rental-hours-table, 
	#room-hours-table,
	#mod-contact-table{
		font-size:1em;
	}
	
	.editing-on-rental-hours #rental-hours-table, 
	.editing-on-rental-hours #mod-contact-table, 
	.editing-on-room-hours #room-hours-table{
		font-size:0.9em;
	}
	
	#rental-hours-header-text,
	#room-hours-header-text{
		flex-direction:row;
		align-items:center;
	}
	
	#rental-hours-table td.rental-hours-day,
	#rental-hours-table td.rental-hours-timeframe{
		width:75px;
		white-space:nowrap;
	}
	
	#rental-hours-table td.rental-hours-day{
		width:90px;
	}
	
	#rental-hours-table td.rental-hours-timeframe{
		width:100px;
	}
	
	.editing-on-rental-hours #rental-hours-table td.rental-hours-day{
		width:125px;
	}
	
	.editing-on-rental-hours #rental-hours-table td.rental-hours-timeframe{
		width:130px;
	}
	
	#rental-hours-table td.rental-hours-remove{
		width:auto;
	}
	.editing-on-rental-hours #rental-hours-table td.rental-hours-remove{
		width:25px;
	}

	#rental-hours-table .rental-hours-day-select .ui-selectmenu-button{
		width:90px;
	}

	#rental-hours-table td,
	#room-hours-table td{
		padding:10px;
	}
	#rental-hours-table .rental-hours-day-select .ui-selectmenu-button, 
	#room-hours-table .room-hours-day-select .ui-selectmenu-button{
		width:110px;
	}
	
	#rental-hours-table .rental-hours-from-input input, 
	#rental-hours-table .rental-hours-to-input input,
	#room-hours-table .room-hours-from-input input,
	#room-hours-table .room-hours-to-input input{
		width:60px;
	}

	#rental-hours-table .rental-hours-mod-select .ui-selectmenu-button{
		width:100%;
	}
	
	#item-image .item-image-slide-image{
		cursor: zoom-in;
	}
	
	#calendar-grid .calendar-day-head-short{
		display:none;
	}
	
	#calendar-grid .calendar-day-head-long{
		display:revert;
	}
	
	#calendar-wrapper .calendar-quarter-projects,
	#calendar-wrapper .calendar-day-projects,
	#calendar-wrapper .calendar-return-day{
		font-size:1em;
	}
}


@media only screen and (min-width: 800px){
  /* Small screen, non-retina */

	#item-image{
		width: 50%;
		border-width: 0px 1px 0px 0px;
	}

	#item-description{
		width: 50%;
	}

	#item-header-misc{
		white-space: nowrap;
	}
}
	

@media only screen and (min-width: 1100px){
	/* Medium screen, non-retina */
	
	#menu{
		font-size:1.5em;
	}
	
	#opening-hours{
		width:48%;
		margin-right:2%;
	}
	
	#rental-hours-table, 
	#room-hours-table{
		font-size:0.95em;
	}
	
	#welcome-text{
		width:48%;
		margin-left:2%;
	}
	
	#item-name{
		min-width:revert;
	}
	
	#item-image{
		width: 100%;
		border-width: 0px 0px 1px 0px;
	}

	#item-description{
		width: 100%;
	}
}


@media only screen and (min-width: 1200px){
	/* Large screen, non-retina */
	
	#item-header-misc{
		white-space: nowrap;
	}
}


@media only screen and (min-width: 1300px){
	/* Large screen, non-retina */
	
	#wrapper, #footer{
		max-width:1300px;
	}
	
	#item-image{
		width: 50%;
		border-width: 0px 1px 0px 0px;
	}

	#item-description{
		width: 50%;
	}
}