body, html, ul {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: baseline;
}


td, th, img {	
	vertical-align: middle;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 3px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Firefox */
* {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #888 #f1f1f1;   /* thumb track */
}

:root {
	--color: #444;
	--brandprimary: #156e7e; /* #387685 */
	--brand2nd: #87ECCA;
	--brandprimaryhover: var(--brand2nd);/* po najechaniu, aktywne menu */
	--brandprimaryhovercolor: #000;/* po najechaniu, aktywne menu */
	--brandprimarydarker: #105561; /* #387685 */
	--brand3rd: #E2F8F1;
	--fontsize: 16px;
	--headersize: 80px;
	--padding: 16px;
	--sidebarwidth: 280px;
	--sidebarcollapsedwidth: 100px;
	--labelcolor: #666;
	--labelsize: --fontsize;
	--borderradius: 6px;
	--mainmenushadow: 0 0 12px rgba(0,0,0,0.1);
	--mainmenuborder: 2px solid var(--brandprimary);
	--inline-fields-spacing: calc(var(--padding) * 2);
	--trblockborder: 2px solid #ddd;
	
	--tableverticalpadding: 3px;
	--tablehorizontapadding: 10px;

	--calendar-overlapped-bg-color: #F2ABAB;
	--calendar-overlapped-bg-selected-color: #CF9696;
	--calendar-overlapped-text-color: black;
	
	@media (max-width: 768px) {
		--tableverticalpadding: 5px;
		--tablehorizontapadding: 5px;
	}
	
	
	--infoboxbg: var(--brand2nd);
	--errorboxbg: #F2ABAB;
	--maincontentbg: #F1F3F4;
}

body, button, input, textarea, select {	
    font-family: "Open Sans", arial, verdana, sans-serif;
    font-size: var(--fontsize);
    line-height: 1.4;
    color: #000000;
}

input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", arial, verdana, sans-serif;
    font-size: var(--fontsize);
}

h1, h2, h3, h4, h5, h6 {

	float: left;
	width: 100%;
}

h1 {
	text-align: center;
	font-size: 26px;
	color: var(--brandprimary);
	margin-top: 0;
			
	&.desktop-title {
		@media (max-width: 1024px) {
			display: none;
		}
	}
	
	@media (max-width: 768px) {
		font-size: 20px;
	}
	
	&.mobile-title {
		text-align: left;
		/*
		@media (min-width: 1025px) {
			display: none;
		}
		*/
	}
}

input[type="radio"] {
    top: 1px;
    position: relative;
}

hr {
	height: 2px;
	width: 100%;
	float: left;
	margin: calc(var(--padding) * 2) 0;
	border-width: 0;
	border-top: 2px solid #fff;
	border-bottom: 1px solid #ddd;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}

a {
    color: #000000;
    text-decoration: none;
}

input[type="submit"]::-moz-focus-inner {
    border:0;
}

input[type="submit"],
input[type="button"],
.ui-button-text-only,
.button {
    cursor: pointer;
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--brandprimary);
    border: 0;
    text-align: center;
    color: #FFF;
    min-width: 180px;
    line-height: 1.4;
    box-sizing: border-box;
	font-size: var(--fontsize);
	font-weight: 600;
	/* text-transform: uppercase; */
	margin-bottom: 10px;
    margin-left: 1ch;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	border-radius: 6px;
	

	/* Inline button */
	&.small {
		padding: 6px 12px;
	}
	
	&.tiny {
		padding: 2px 0.4em;
		width: initial;
		min-width: initial;
		border-radius: 0.25em;
		font-size: 0.85em;
	}

	&.inverted {
		color: var(--brandprimary);
		border: 1px solid var(--brandprimary);
		background-color: #FFF;
	}

	&.button--bordered {
		border: 1px solid currentColor;
	}
	
	&.error {
		background: #AB1212;
		border-color: #AB1212;

	}
	
	&.error:focus {
		background: #8B0F0F;
		border-color: #8B0F0F;
	}
}

.hidden {
    display: none;
}

.container {
	margin: 0 auto;
	padding: 0 var(--padding);
	width: 100%;
	/* max-width: 1600px; */
}

.content-bg {
  padding: var(--padding);
  background: #fff;
  float: left;
  width: 100%;
  border-radius: var(--borderradius);
  
  .table:first-child {
	  margin-top: 0;
  }

  .table:last-child {
	  margin-bottom: 0;
  }
}

.notification-form-split {
	.left-side,
	.right-side {
		width: 50%;
		padding: var(--padding);
		float: left;
		
		@media (max-width: 1024px) {
			width: 100%;
		}
		
		@media (max-width: 768px) {
			padding-left: 0;
			padding-right: 0;
		}
		
		.form_field {
			width: 100%;
			
			.form_data {
				select, textarea {
					width: 100%;
					height: 180px;
				}
			}
		}
	}
}

.force-stacking-context {
    position: relative;
    z-index: 0;
}

.sidemenu-layout {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	
	header, nav, main {
		float: left;
	}	

	header {
		width: 100%;
		height: var(--headersize);
		padding: var(--padding);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		box-shadow: 0 0 24px rgba(0,0,0,0.05);
		z-index: 222222;
		border-bottom: 1px solid #ddd;
		background: #fff;
		
		@media (max-width: 1023px) {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			max-width: 100%;
			
		}
		
		.title-centering-fix {
			width: var(--sidebarwidth);
			
			@media (max-width: 1024px) {
				width: initial;
				flex-grow: 1;
			}
		}
		
		.logo-url {
			vertical-align: middle;
			margin-right: 10px;
			float: left;

			.logo {
				border-width: 0;
			}
		}
		
		.lang-form {
			display: inline-block;
			margin-right: var(--padding);
			float: left;
		}
		
		.language-select-flags {
			cursor: pointer;
			position: relative;
			
			* {
				line-height: 1;
			}
			
			.lang-img {
				width: 32px;
				height: 32px;
				display: block;
				float: left;
				background-size: cover;
				background-position: center center;
			}
			
			.default-placeholder {				
				background-image: url('../images/lang/unknown.png');
				background-size: cover;
				background-position: center center;
				float: left;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
				margin-right: 8px;
			}
			
			.selected-label {
				.default-placeholder {
					margin-top: -10px;
				}
			}
			
			.lang-wrapper {
				
				ul {
					list-style: none;
					margin: 0;
					width: 68px;
					display: block;
					float: left;
					
					background: #fff;
					/* display: block;*/
					display: none;
					position: absolute;
					left: 0;
					top: 100%;
					white-space: nowrap;
					padding: 8px;
					border-radius: var(--borderradius);
					box-shadow: var(--mainmenushadow);
					
					.default-placeholder {
						width: 20px;
						height: 20px;
						margin-top: -3px;
						
						.lang-img {
							width: 20px;
							height: 20px;
						}
					}
					
					.item {
						float: left;
						width: 100%;
						padding: 12px 0;
					}
				}
			}
			
			&.visible {
				.lang-wrapper ul {
					display: block;
				}
			}
		}
		
		.notification-bar {
			position: relative;
			float: left;
			z-index: 211111;
			text-align: left;
			
			.notification-icon {
				position: relative;
				cursor: pointer;
				margin: 0 var(--padding) 0 0;
				
				.counter {
					width: 12px;
					border-radius: 50%;
					height: 12px;
					position: absolute;
					right: 6px;
					top: 0px;
					border: 1px solid var(--color);
					background: var(--brand2nd);
					z-index: 2;
				}
				
				svg {
					transform: rotate(15deg);
					z-index: 1;
				}
			}
			
			&.visible .notifications{
				display: block;
			}
			
			.notifications {
				position: absolute;
				right: 0;
				top: 100%;
				z-index: 2222222;
				
				background: #FBFBFB;
				width: 460px;
				padding: 60px var(--padding) var(--padding);
				border-radius: var(--borderradius);
				box-shadow: var(--mainmenushadow);
				margin-top: 12px;
				border: var(--mainmenuborder);
				display: none;
				
				max-width: calc(100vw - 70px);
					
				.title {
					color: var(--brandprimary);
					float: left;
					width: 100%;
					font-weight: bold;
					margin-bottom: 24px;
					margin-top: 24px;
					position: absolute;
					top: 0;
					
					.close {
						position: absolute;
						right: 32px;
						top: -6px;
						background: #A6A6A6;
						font-weight: initial;
						width: 32px;
						height: 32px;
						border-radius: 50px;
						cursor: pointer;
					}
					
					.close:before,
					.close:after {
						content: " ";
						display: block;
						position: absolute;
						left: 50%;
						top: 50%;
						width: 60%;
						height: 6px;
						border-radius: 10px;
						background: #fff;
						transform-origin: center center;
						transform: translate(-50%, -50%) rotate(45deg);
					}
					
					.close:after {
						transform: translate(-50%, -50%)  rotate(-45deg);
					}
				}
				
				> a {
					text-decoration: underline;
					margin-left: 50%;
					transform: translateX(-50%);
					float: left;
				}
				
				.notifications-wrapp {
					border-radius: var(--borderradius);
					max-height: calc(100vh - 200px);
					overflow-y: auto;
					
					.item {
						position: relative;
						float: left;
						width: 100%;
						margin-bottom: 8px;
						border: 2px solid #ccc;
						padding: calc(var(--padding) * 1.5) var(--padding);
						background: #fff;
						
						border-left: 10px solid var(--brand2nd);
						border-radius: 3px;
						
						display: table;
						float: left;
						vertical-align: top;
						cursor: pointer;
						
						.icon, .desc {
							display: table-cell;
							vertical-align: top;
						}
						.icon {
							width: 60px;
						}
						.desc {
							font-size: calc(var(--fontsize) - 1px);
							line-height: 1.35;
						}
						
						
					}
					
					.item:last-child {
						margin-bottom: 0;
					}
					
					.item:before {
						/*content: " ";*/
						position: absolute;
						display: block;
						left: -10px;
						top: 0;
						bottom: 0;
						width: 8px;
					}
				}
			}
		}
		
		.notification-bar.visible:before {
		  content: " ";
		  position: fixed;
		  background: rgba(255,255,255,0.6);
		  left: 0;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 122222;
		}
		
		h1, .space-holder {
			flex-grow: 1;
			margin: 0;
		}
		
		.logo {
			max-height: calc(var(--headersize) - var(--padding) * 2);	
			
			@media (max-width: 768px) {
				max-height: 30px;
                max-width: 150px;
			}
		}
		
		.user-menu {
			float: left;
			vertical-align: middle;
			position: relative;
			z-index: 222222;
			margin-right: var(--padding);
            margin-top: -10px;
			
			@media (max-width: 1024px) {
				display: none !important;
			}
			
			.icon {
				display: block;
				float: left;
				position: relative;
				width: 37px;
				height: 37px;
				border-radius: 50px;
				background: var(--brandprimary);
				cursor: pointer;
				
				.fa {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					color: #fff;
				}
			}
			
			.user-content {
				position: absolute;
				top: 100%;
				right: 0;
				min-width: 220px;
				background: #FBFBFB;
				display: none;
				padding: var(--padding);
				box-shadow: var(--mainmenushadow);
				border: var(--mainmenuborder);
				text-align: left;
				text-align: center;
				margin-top: var(--padding);
				border-radius: var(--borderradius);
				
				&.visible {
					display: block;
				}
				
				a.button {
					color: #fff;
					margin: var(--padding) 0 0 0;
					float: left;
					margin-left: 50%;
					transform: translateX(-50%);
				}
			}
		}
		
		.user-login-data {
			width: auto;
			text-align: right;
			float: right;
			right: var(--padding);
			display: flex;
			
			form {
				display: flex;
				flex-grow: 0;
				align-self: center;
				
			}
			
			a:link,
			a:visited,
			a:hover {
				color:var(--brandprimary);
				margin-top: var(--padding);
			}

		}
				
		.header_buttons {
			display: inline-block;
			width: auto;
			float: right;
			
			@media (max-width: 1023px) {
				width: 40px;
			}
		}
		
		.menu-mobile {
			color: var(--brandprimary);
			font-size: 30px;
			padding: 10px;
			border-radius: 3px;
			width: 50px;
			height: 50px;
			line-height: 1;
			cursor: pointer;
			vertical-align: middle;
			margin-left: 20px;
			display: none;
			right: 20px;
			top: 10px;
			margin-bottom: 10px;
			position: absolute;
			
			@media (max-width: 1023px) {
				display: inline-block;
			}
		}


	}
	
	.content-wrapper {
		display: flex;
		max-width: 100%;
		
		nav, main {
			min-height: calc(100vh - var(--headersize));
		}
	
	
		> nav {
			width: var(--sidebarwidth);
			background: var(--brandprimary);
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			
			.mobile-user-data {
				display: none;
			}

			
			@media (max-width: 768px) {
				position: fixed;
				right: 0;
				z-index: 222222;
				top: 80px;
				bottom: 0;
				overflow-y: auto;
			}
			
			#expandCollapseMenu {
				background: var(--brandprimarydarker);
				color: var(--brandprimaryhover);
				border-width: 0;
				padding: 10px 0;
				width: 100%;
				transition: 0.15s;
				cursor: pointer;
				
				.fa {
				}
				
				&:hover {
					color: #fff;
				}
			}

				
			> ul {
				float: left;
				width: 100%;
				list-style: none;
				margin: 0;
				margin-top: calc(var(--padding) / 2);
				flex-grow: 0;

				@media (min-height: 900px) {
					position: sticky;
					top: 0;
				}
				
				li {
					float: left;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
					position: relative;
					
					a {								
						float: left;
						padding: 12px 48px;
						color: #fff;
						position: relative;
						min-width: 32px;
						min-height: 40px;
						flex-grow: 1;
						
						.fa, .far, .fas {
							position: absolute;
							left: 16px;
							top: 14px;
						}
					}
					
					.hide-show-indicator {						
						padding: 12px;
						cursor: pointer;
						color: #fff;
						position: absolute;
						right: 0;
						top: 0;
					}
					
					&.active {
						background: var(--brandprimaryhover);
						> a, 
						> .hide-show-indicator {
							color: var(--brandprimaryhovercolor);
						}
					}
					
					ul {
						padding: 8px 0;
						list-style: none;
						margin: 0;
						background: var(--brandprimarydarker);
						display: none;
							
						&.expanded {
							display: block;
						}
						
						li {
							> a {
								
							}
						}
					}
				}
				
				li:hover:not(.active) {
					> a {
						color: var(--brandprimaryhover);
					}
				}
			}
			
			#footer {
				margin-top: 20px;
				padding: 20px;
				float: left;
				width: 100%;
				text-align: center;
				color: #fff;
				
				> img {
					vertical-align: middle;
					margin: 0 5px;
				}
			}
		}
		
		/* style menu tylko pod mobile */
		@media (max-width: 1024px) {
			> nav {
				background: #fff;
				display: none;
				
				position: fixed;
				right: 0;
				z-index: 22222;
				top: 80px;
				bottom: 0;
				overflow-y: auto;
				box-shadow: 0 0 12px rgba(0,0,0,0.2);
				
				.mobile-user-data {
					display: block;
					float: left;
					width: 100%;
					text-align: center;
					margin-top: var(--padding);
					
					.icon {
						font-size: 40px;
						width: 80px;
						height: 80px;
						display: inline-block;
						color: #fff;
						background: var(--brandprimary);
						border-radius: 100px;
						position: relative;
						
						.fa {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}
					}
					
					.button {
						margin: 0;
					}
				}
				
				@media (max-width: 1024px) {				
					&.visible {
						display: block;
					}
				}

				
				#expandCollapseMenu {
					background: var(--brandprimarydarker);
					color: var(--brandprimaryhover);
					
					.fa {
					}
					
					&:hover {
						color: #fff;
					}
				}

					
				> ul {
					li {					
						a {								
							color: var(--color);
							position: relative;
						}
						
						.hide-show-indicator {						
							color: var(--color);
						}
						
						&.active {
							> a, 
							> .hide-show-indicator {
								color: var(--brandprimaryhovercolor);
							}
						}
						
						ul {
							background: #f6f6f6;
						}
					}
					
					li:hover:not(.active) {
						> a {
							color: var(--brandprimary);
						}
					}
				}
			}
		}
		
		
		/* alternatywny wygląd menu */
		> nav.white-menu {
			background: #fff;
			
			box-shadow: 0 0 12px rgba(0,0,0,0.1);
			z-index: 1;
			
			.mobile-user-data {
				display: block;
				float: left;
				width: 100%;
				text-align: center;
				margin-top: var(--padding);
				
				.icon {
					font-size: 40px;
					width: 80px;
					height: 80px;
					display: inline-block;
					color: #fff;
					background: var(--brandprimary);
					border-radius: 100px;
					position: relative;
					
					.fa {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
				
				.button {
					margin: 0;
				}
			}
			
			@media (max-width: 1024px) {				
				&.visible {
					display: block;
				}
			}

			
			#expandCollapseMenu {
				background: var(--brandprimarydarker);
				color: var(--brandprimaryhover);
				
				.fa {
				}
				
				&:hover {
					color: #fff;
				}
			}

				
			> ul {
				li {					
					a {								
						color: var(--color);
						position: relative;
					}
					
					.hide-show-indicator {						
						color: var(--color);
					}
					
					&.active {
						> a, 
						> .hide-show-indicator {
							color: var(--brandprimaryhovercolor);
						}
					}
					
					ul {
						background: #f6f6f6;
					}
				}
				
				li:hover:not(.active) {
					> a {
						color: var(--brandprimary);
					}
				}
			}
		}

		
		
		
		
		
		
		main {
			flex: 1 1 auto;
			min-width: 0;
			background: var(--maincontentbg);
			padding: var(--padding);
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			
			@media (max-width: 1023px) {
				padding: 90px 0 0;
			}
			
			.page-content {
				flex: 1;
				max-width: 100%;
				
				&.login-form-content {
					align-content: center;
					align-items: center;
				}
			}
			
			> footer  {
				text-align: center;
				float: left;
				width: 100%;
				padding-top: var(--padding);
				padding-left: var(--padding);
				padding-right: var(--padding);
			}
		}
	}
}

.copy {
	text-align: center;
}


body {
	.dataTables_wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 0 2.5ch;

		.dataTable {
			width: 100%;
		}

		&::after {
			/* Nadpisanie wbudowanego clearfixa - dodaje nam element flex */
			display: none;
		}

		.dataTables_extrabuttons {
			margin-left: auto;
		}

		.dataTables_paginate {
			margin-left: auto;

			.paginate_button {
				border-width: 0;
				border-radius: var(--borderradius);
				&.current {
					background: var(--brandprimary) !important;
					color: #FFF !important;
					border-width: 0 !important;
				}
                &:hover {
                    border-width: 0;
                }
			}
		}
	}
}

.select2 {
	max-width: 100%;
	width: 100% !important;
}

.additional.button {
    background-color: #4d4d4d;
}

/*
input[type="submit"]:hover:enabled,
input[type="button"]:hover:enabled,
.ui-button-text-only:hover:enabled,
.button:hover:enabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover:enabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover:enabled,
input[type="submit"]:focus,
input[type="button"]:focus,
.ui-button-text-only:focus,
.button:focus,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
body .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  background: #0e4852 !important;
  color: #fff !important;
	border-width: 0;
}
*/

input[type="submit"]:disabled,
input[type="button"]:hover:enabled,
.ui-button-text-only:disabled,
.button:disabled,
.button-none:disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button:disabled {
    cursor: inherit;
    opacity: 0.5;
}

.button.small,
.ui-button-text-only {
	min-width: 1px;
	width: auto;
	padding: 5px 8px;
	font-size: inherit;
	font-size: 12px;
}

#top {
    width: 100%;
    padding: 10px 0 0;
    background: #f6f6f6;
    display: block;
    float: left;
}

#header {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
	width: 100%;
    margin: 0 auto;
	padding: 0 20px;
	
	.right {
		float: right;
		padding-right: 0;
	}
}
/*
#content {
    text-align: center;
}
*/


.right {
    float: right;
}

.left {
    float: left;
}

.clear {
    clear: both;
}

#workers_list {
	tr {
		td:first-child a {
			color: var(--brandprimary);
		}
	}
	
	.button.small {
		margin-bottom: 0;
	}
}

.header-right {
    float: right;
}







.header_button:nth-child(2) {
	clear: both;
}



@media screen and (max-width: 980px) {
	.header-right,
	.main-menu	{
		width: 100%;
	}
	
	.main-menu {
		display: none;
	}
		
	.main-menu.active {
		display: block;
	}
	
	.main-menu li {
		width: 100%;
	}
	
	.main-menu li.header_button a,
	.main-menu li:not(.header_button) {
		width: 100%;
		text-align: left;
		padding-left: 0;
	}
	
	.main-menu li a:before {
		display: none;
	}
	

	

}

@media screen and (max-width: 480px) {
	.report_buttons .report_button {
		width: 100%;
	}
}
.report_buttons .report_button

.tree_preview > li > .tree_preview {
    margin-left: 15px;
}

:root {
    --form-field-max-width: 280px;
}

.wide_form {
    --form-field-max-width: clamp(280px, 40%, 420px);
}

.form_field {
    font-size: var(--fontsize);
    margin: 3px 3px 10px;
    float: left;
    width: 100%;
	
	&.date_field {
		width: auto;
		float: none;
		white-space: nowrap;
		
		label {
			display: inline-block;
		}

	}
		
	> .form_data {
		display: inline-block;
		vertical-align: middle;
		/* max-width: var(--form-field-max-width); */
		width: 100%;
		float: left;		 
		text-align: left;
	}
	
	> .form_label {
		text-align: left;
		color: var(--labelcolor);
		font-size: var(--labelsize);

		width: 100%;
		float: left;
		padding-bottom: 6px;
		
		display: inline-block;
		vertical-align: middle;
	}
	
	.help_text {
		display: inline-block;
		margin-top: 0.25em;
		opacity: 0.75;
		background-color: #fbe8ae;
		border-radius: var(--borderradius);
		padding: 6px 9px;
		font-size: 80%;
	}
		
	textarea {
		height: 100px;
		resize: vertical;
	}
	
	&.checkbox {
		label {
			vertical-align: top;
			float: left;
			clear: both;
			width: 100%;
		}
		
		.help_text {
			float: left;
			clear: both;
		}
	}
}

.column-split {
	float: left;
	width: 100%;

	.form_field {
		width: 50%;
		padding: 0 var(--padding);
		float: left;
		margin-left: 0;
		margin-right: 0;
		
		select, select[multiple] {
			width: 100%;
		}
		
		@media (max-width: 768px) {
			width: 100%;
		}
	}
	
	&.columns-3 {
		.form_field {
			width: 33.333%;
			
			@media (max-width: 1550px) {
				width: 100%;
			}
		}		
	}
}

.report_form_field.date_field label {
    text-align: right;
    margin-right: 5px;
}

.form_data_text > a {
    color: var(--brandprimary);
}



.form_container {
    margin-bottom: 15px;
}

:root {
	--fieldpadding: 8px;
}

textarea,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
.calendar-search input,
.ui-datepicker-year,
.ui-datepicker-month,
.checkbox-multiselect-container .label,
body .select2-container--default .select2-selection--single {
	
	border-width: 0;
    border-bottom: 2px solid #ccc;
    padding: var(--fieldpadding) 0;
	width: 100%;
    background-color: transparent;
	border-radius: 0;
	
	/*
	border-width: 0;
	padding: var(--fieldpadding);
	width: 100%;
	background-color: transparent;
	border-radius: var(--borderradius);
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
	*/
	
	
	&:focus {
        outline: none;
		border-color: var(--brandprimary);
	}
}

.calendar-search {
	float: left;
	width: auto;
	margin: 0;
	
}

body {
	.select2-container .select2-selection--single {
		height: auto;
	}
	
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		top: 10px;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		padding: 0;
		line-height: initial;
	}
	
	.ui-tooltip {
		box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
		border-width: 0;
		border-radius: var(--borderradius);
		z-index: 100000;
	}
}

.no-focus-visible *:focus,
*:focus:not(:focus-visible) {
	outline: none;
}

.select2-selection {
    font-size: var(--fontsize);
    min-height: 36px;
}

.select2-selection__rendered,
.select2-selection__arrow {
     /* margin: 4px; */
}

@media screen and (max-width: 768px) {
	.form_field > .form_label {
		width: 100%;
		text-align: left;
	}
	
	.form_field > .form_data {
		max-width: 100%;
		width: 100%;
	}
	
	
	textarea, select, 
	input[type="text"], 
	input[type="password"], 
	input[type="email"], input[type="number"], 
	input[type="search"] {
		max-width: 100%;
	}	
}

.dataTables_length,
.dataTables_filter {
	margin-bottom: 10px;
	
	select,
	input[type="search"]{
		width: auto;
	}
}

.form_field {
	input[type="checkbox"],
	input[type="radio"] {
		width: auto;
		vertical-align: middle;
	}
	
	textarea[disabled],
	select[disabled],
	input[disabled] {
		background-color: #f9f9f9;
		border-color: #ececec;
	}

	&.form_field_admins,
	&.form_field_users,
	&.form_field_recipients {
		margin-left: 0;
		margin-right: 0;
	}
}

.form_field select[multiple],
select[multiple] {
    width: 600px;
    height: 200px;
}



/* Notifications styles */

#notifications, 
#logged_out {
    display: none;
}

/* News styles */

.news {
    width: 100%;
	
	td {
		width: 20%;
		
		&.newsmessage {
			width: 40%;
		}
	}

}

.news_box_container.hidden > .news_header {
    background: url('../images/show_news.png') no-repeat 0 0 transparent;
}

.news_header {
    background: url('../images/hide_news.png') no-repeat 0 0 transparent;
    width: 27px;
    height: 115px;
    position: absolute;
    left: -27px;
    cursor: pointer;

}

.calendar-search--cancel {
    display: none;
}

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

.calendar_cell {
	input {
		text-align: center;
		margin: 0;
		padding: 15px 0;
		width: 100%;
		border: 0;
		border-radius: 0 !important;
	}

	.report_time_comment {
		position: absolute;
		top: 2px;
		right: 2px;
		display: none;
		
		&.active {
			display:block;
		}
	}
}

.calendar_cell:hover .report_time_comment {
    display: block;
}

.nav-icons {
    width: auto;
    display: inline-block;
    float: right;
    margin-left: 20px;
    white-space: nowrap;
}

.empty_form {
    display: none;
}

.errorlist,
.calendar_cell .errorlist {
    list-style: none;
    color: red;
    font-size: 12px;
    line-height: 14px;
    text-align: left;
	float: left;
}

.tree-navigation {
	float: left;
	width: 100%;
	
	.button {
		float: left;
		margin-right: var(--padding);
		margin-left: 0;
	}
}


.tree_header {
	float: left;
	font-weight: bold;
	border-radius: var(--borderradius);
	cursor: initial;
	text-align: left;
	padding-bottom: 20px;
	color: var(--brandprimarydarker);
}


ul.tree,
ul.tree ul {
    list-style-type: none;
    /* background: url(../images/vline.png) repeat-y; */
    margin: 0;
    padding: 0;
    text-align: left;
	position: relative;
}

.multiselect select {
	max-width: 540px;
}

:root {
	--treeleafwidth: 24px;
	--projectsmargin: 12px;
	--treebtnsspacing: 14px;
}

ul.tree {	
	li {
		margin: 0;
		padding: 6px 0 0 24px;
		line-height: 25px;
		position: relative;
		float: left;
		clear: both;
		width: 100%;
		
		padding-bottom: var(--projectsmargin);
		
		.project-name {
			display: inline-block;
			border: 2px solid var(--brandprimary);
			background: #fff;
			text-align: center;
			min-width: 180px;
			border-radius: var(--borderradius);
			margin-right: var(--treebtnsspacing);
			padding-left: var(--padding);
			padding-right: var(--padding);
			font-size: var(--fontsize);
			z-index: 1;
			position: relative;
			float: left;
		}
				
		.icon-button {
			margin-right: var(--treebtnsspacing);;
			color: var(--brandprimary);
			vertical-align: top;
			font-size: 90%;
			display: inline-block;
			margin-bottom: 4px;
			
			.fa, .fas, .far {
				vertical-align: baseline;
				font-size: initial;
			}
		}
		
		.button {
			margin-left: 0.5em;
		}
				
		&.archived-project {
			> a:first-child {
				display: inline-block;
				font-size: 16px;
			}
		}
		
		ul {
			margin-left: 10px;
			margin-bottom: 0px;
		}
	}
	
	li:before {
		content: " ";
		left: 0;
		top: calc(0px - var(--projectsmargin));
		width: var(--treeleafwidth);
		display: block;
		position: absolute;
		border-left: 1px solid var(--brandprimary);
		bottom: 0px;
	}
	
	li li:before {
		top: calc(9px - var(--projectsmargin));	
	}
		
	li:last-child:before {
		display: none;
	}
	
	li:after {
		content: " ";
		border-bottom: 1px solid var(--brandprimary);
		left: 0;
		top: calc(0px - var(--projectsmargin));
		width: var(--treeleafwidth);
		display: block;
		position: absolute;
		border-left: 1px solid var(--brandprimary);
		height: 31px;
		border-radius: 0 0 0 2px;
	}

	li:before,
	li:after {
		border-width: 2px;
	}

	.tree_icon {
		margin-right: 10px;
		vertical-align: middle;
	}
	
	&.projects-tree-with-archived {
		li:not(.archived-project) {
			line-height: 20px;			

			 > a {
				opacity: 0.35;
								
				> .tree_icon {
					height: 10px;
					margin-right: 5px;
				}
			}
		}
		
		li:after {
			height: 28px;
		}
	}	
	
	&.projects-tree, &.departments-tree {
		padding-left: 16px;
		
		> li {
			> .project-name {
				float: left;
				background: var(--brandprimaryhover);
				font-weight: 600;
				padding-top: 5px;
				padding-bottom: 5px;
			}
			
			li:after {
				height: 33px;
			}
			
			.tree-buttons {
				margin-top: 9px;
				display: block;
				float: left;

				.icon-button {
				}
			}
			
			> ul {
				margin-top: var(--projectsmargin);
				clear: both;
				float: left;
				
				> li {
					.tree-buttons {
						margin-top: 2px;
						
						.icon-button {
						}
					}
					
					> .project-name {
						float: left;
						background: var(--brand3rd);
					}
				}
			}
		}
		
		> li:after {
			top: calc(0px - 4px);
		}
							
		li li li:after {
			height: 24px;
			top: calc(9px - var(--projectsmargin));
		}
	}
}

.report_form_container {
    margin-bottom: 10px;
	
	.form_field {
		&.report_form_field {
			margin: 5px var(--inline-fields-spacing);
			width: auto;
			display: inline-block;
			
			input {
				margin-left: 0;
			}
			
			select,
			input {
				width: 150px;
			}
		}
		
		&.group_by_field, 
		&.display_type_field,
		&.sublist_field {
			width: 200px;
		}
		
		&.projects_field {
			width: 240px;
		}
		
	
		&.date_field {
			width: 150px;
		}

		> input, .form_data {
			width: 100%;
			
			> input, select, textarea {
				width: 100%;
			}
		}
	}
	
	.reports-nav {
		align-self: center;
		margin: 12px 0;
		flex-grow: 1;
		text-align: center;

		.button {
			margin: 5px;
		}
		
		@media (max-width:1023px) {
			text-align: center;
			width: 100%;
			min-width: 100%;
			max-width: 100%;
		}
	}
}

.report_form_grid {
	display: grid;
	width: fit-content;

	/* dwie daty / przyciski i coś dodatkowego */
	grid-template-columns: 1fr 1fr repeat(10, auto);

	gap: 20px 0;

	/* .date_field wyświetlany w .report_form_container (np. raport organizacji) wystaje poza swój box.
     * Chcemy żeby przełączanie między raportami nie powodowało skakania pól,
     * stąd takie obejście.
     */
	--form-field-or-button-margin-right: calc(var(--inline-fields-spacing) - 10px);

	.form_field {
		width: fit-content;
		margin: 5px var(--inline-fields-spacing);

		margin-right: var(--form-field-or-button-margin-right);
	}

	.date_field {
		display: flex;
		flex-direction: column;

		.hasDatepicker {
			width: 10rem;
		}

		input[type=month] {
			/* domyślny input był trochę za szeroki i rozciągał przycisk pod formularzem */
			width: 14ch;
		}
	}

	.dropdown-sorter {
		margin-bottom: 0;
	}

	.reports-nav {
		display: grid;
		grid-column: 1 / span 2;
		grid-template-columns: subgrid;

		.button {
			/*width: 150px;*/
			margin-inline: var(--inline-fields-spacing) var(--form-field-or-button-margin-right);
			min-width: fit-content;

		}
	}
}

.list_group_sublist > .form_field {
    /* Wszystkie pola w grupie wyrównane do góry, pod nimi pojawiają się błędy. */
    vertical-align: top;
}

.report_buttons {
    margin: 10px 0;
    text-align: left;
    border-bottom: 2px solid #EDEDED;
	
	.report_button {
		display: inline-block;
		padding: 7px 15px;
		border-radius: 6px 6px 0 0;
		background: #157683;
		color: #fff;
		vertical-align: bottom;
		margin-top: 8px;
		-webkit-transition: 0.15s;
		-moz-transition: 0.15s;
		transition: 0.15s;
	}
}

.report_button:hover,
.report_button.active {
    background: var(--brandprimary);
	color: #fff;
	padding: 10px 15px;
    margin-top: 2px;
}

h2 + form > .table {
	margin-top: 0;
}

.table {
	width: 100%;	
	max-width: 100%;
	margin: 20px 0;
	text-align: left;
	display: table;

	td,
	tr.work-day-start-row th.summary:first-child,
	tr.work-day-end-row th.summary:first-child,
	tr.undertimes-row th.summary:first-child,
	tr.overtimes-row th.summary:first-child,
	tr.summary-row th.summary:first-child {
		border: 1px solid #BFBFBF;
		padding: 3px 10px;
		min-width: 70px;
		max-width: 300px;
	}

	tr.work-day-start-row,
	tr.work-day-end-row,
	tr.undertimes-row,
	tr.overtimes-row,
	tr.summary-row {
		th.summary:first-child {
			text-align: left;
		}
	}

	td,
	th {
		border-radius: 3px;
	}
	
	.overtimes-row {
		td:after,
		td:not(:first-child):before {
			content: " ";
			display: inline-block;
			margin-bottom: 3px;
			margin-left: 4px;
			border-bottom: 5px solid #ff9c9c;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
		}
		
		td:not(:first-child):before {
			margin-right: 0;
			margin-left: 0;
			border-bottom-color: transparent;
		}
	}

	.undertimes-row {
		td:after,
		td:not(:first-child):before {
			content: " ";
			display: inline-block;
			margin-bottom: 3px;
			margin-left: 4px;
			vertical-align: middle;
			border-top: 5px solid #ff9c9c;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
		}
		
		td:not(:first-child):before {
			margin-right: 0;
			margin-left: 0;
			border-top-color: transparent;
		}
	}
		
	.work-day-start-row {
		th,
		td {
			background: #caeeff;
			color: #000;
		}
	}

	.work-day-end-row {
		th,
		td {
			background: #98deff;
			color: #000;
		}
	}

	tr {
		background-color: #f5f5f5;
		
		&.odd {
			background-color: #e8e8e8;
		}
	}
		
	th {
		a {
			color: white;
		}
	}
	
	img {
		vertical-align: middle;
	}
	
	.percent-td,	
	.time-td,
	.cost-td,
	.eta-td,
	.estimated-cost-td	{
		text-align: center;
		width: 160px;
	}
}

.summary-row,
.undertimes-row,
.overtimes-row,
.work-day-start-row,
.work-day-end-row {
	td:not(:first-child) {
		text-align: center;
	}
}

.table th,
.report_table tr:not(.work-day-start-row):not(.work-day-end-row):not(.undertimes-row):not(.overtimes-row):not(.summary-row) th {
    background: none repeat scroll 0 0 var(--brandprimary);
    padding: 8px 10px;
    color: white;
    font-weight: normal;
}

.report_table {
	td {
		padding: 10px 5px;
	}

	tr td:first-child {
		text-align: left;
		width: auto;
	}
	
	.sublist {
		&.level0 td:first-child {
			padding-left: 30px;
			background: url("../images/sublist.png") 10px 7px no-repeat transparent;
		}
		&.level1 td:first-child {
			padding-left: 45px;
			background: url("../images/sublist.png") 25px 7px no-repeat transparent;
		}
		&.level2 td:first-child {
			padding-left: 60px;
			background: url("../images/sublist.png") 40px 7px no-repeat transparent;
		}
		&.level3 td:first-child {
			padding-left: 75px;
			background: url("../images/sublist.png") 55px 7px no-repeat transparent;
		}
		&.level4 td:first-child {
			padding-left: 90px;
			background: url("../images/sublist.png") 70px 7px no-repeat transparent;
		}
		&.level5 td:first-child {
			padding-left: 105px;
			background: url("../images/sublist.png") 8px 7px no-repeat transparent;
		}
	}

	.summary {
		font-weight: bold;
	}

	tr {
		&.odd {
			background-color: #fff;
		}
		
		&.even {
			background-color: #fff;
		}
		
		&.sublist:nth-child(odd) {
			background-color: #DAE4E7;
		}

		&.sublist:nth-child(even) {
			background-color: #DAE4E7;
		}
	}
}


.report_content {
	.report_table {
		tr {
			td {
				&.red {
					background-color: #F56E6E;
				}

				&.green {
					background-color: #70BF56;
				}
			}
			
			&.level0 {
				font-weight: bold;
			}
		}
	}
}

.report_control_buttons {
	span {
		cursor: pointer;
	}

	span:hover {
		color: #C4C4C4;
	}
}

.news_box_container {
    float: right;
    width: 150px;
    padding: 0 5px;
    min-height: 400px;
    background-color: #EEEEEE;
    position: relative;
		
	&.hidden {
		width: 0;
		padding: 0;
		
		> .news {
			display: none;
		}
	}
}


.news_content,
.news_author {
    font-size: 12px;
    line-height: 18px;
    margin: 6px 0 0;
}

.news {
    margin-bottom: 10px;
	
	h3 {
		margin-top: 0;
		margin-bottom: 5px;
	}
}

.unset_times {
	list-style: none;
	display: block;	
	float: left;
	width: 100%;

	li {
		padding-left: 12px;
		position: relative;
		width: 100%;
		display: block;
		float: left;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	li:before {
		display: block;
		float: left;
		width: 5px;
		height: 5px;
		border-radius: 2px;
		border: 1px solid #888;
		position: absolute;
		left: 0;
		content: " ";
		top: 12px;
	}

	li:last-child {
		border-bottom-width: 0;
	}

	.project_name {
		font-weight: bold;
	}

	ul {
		list-style: none;
		padding-left: 20px;
	}
}

.calendar_table {
	width: 100%;
	/* border-collapse: collapse; */
	
	.cell-edit {
		position: relative;
		
		@media (max-width: 1024px) {
			z-index: 222;
		}
	}
	
	&.selected,
	td:focus-within {
		.cell-edit {
			z-index: 223;
		}
	}
	
	.date {		
		font-size: initial;
		
		@media (max-width: 768px) {
			font-size: 13px;
			
			* {
				font-size: 13px;
			}
		}
	}
	
	.short-day,
	.full-day {
		font-size: initial;
		display: block;
		font-size: 18px;
		font-weight: bold;
		
		@media (max-width: 768px) {
			font-size: 13px;
		}
	}
	
	@media (min-width: 1401px) {
		.short-day {
			display: none;
		}
	}
	
	
	@media (max-width: 1400px) {
		.full-day {
			display: none;
		}
	}
	

	
	* {
		/* box-sizing: content-box; */
	}
	
	td, th {
		/* overflow: hidden; */
	}
	
	tr.calendar_buttons {
		> td {
			background-color: var(--maincontentbg);
			border: 1px solid #bfbfbf;
			text-align: right;
		}
	}
	
	.summary {
		z-index: 29999 !important;
	}

	th,
	tr:not(.work-day-start-row):not(.work-day-end-row) th.summary:first-child,
	td {
		border: 1px solid #BFBFBF;
		background-color: white;
		color: #000;
		box-sizing: content-box;
	}

	th,
	td,
	tr:not(.work-day-start-row):not(.work-day-end-row):not(.undertimes-row):not(.overtimes-row):not(.summary-row) th.summary:first-child {
		padding: var(--tableverticalpadding) var(--tablehorizontapadding);
	}

	tfoot {
		tr > * {
			/* border-bottom-width: 0; */
			text-align: center;
		}
	}
		
	td:last-child,
	th:last-child  {
		/* border-right-width: 0; */
	}

	td.calendar_cell {
		padding: 0;
	}

	th:not(.summary) {
		background-color: var(--brandprimary);
		border: None;
		color: #FFFFFF;
		font-weight: normal;
		/*
		font-size: 12px;
		line-height: 14px;
		*/
		
		@media (max-width: 768px) {
			font-size: 12px;
		}
	}

	tr {
		/*
		td:nth-child(2),
		td:nth-child(2) input{
			background-image: url("../images/calendar_shadow.png");
			background-repeat: repeat-y;
		}
		*/
		
		&.odd td input,
		&.odd td {
			background-color: #fafafa;
		}

		&.even td input,
		&.even td {
			background-color: #f0f0f0;
		}
		
		td, th {
			&.project_name {
				border-bottom-color: #4b87a1;
				background-color: var(--brandprimary);
				color: #FFFFFF;
				font-weight: normal;
				min-width: 290px;
				text-align: left;
				border-left-width: 0;
				position: relative; /* IE11 FIX */
				position: -webkit-sticky;
				position: sticky;
				left: 0;
				z-index: 22;
				padding-right: 30px;
				
				@media(max-width: 768px) {
					min-width: initial;
				}
				
			
				.project-parent-path {
					padding: 0;
					font-weight: bold;
				}
				
				small {
					font-size: inherit;
				}
				
				.project_details {
					position: absolute;
					right: 8px;
					top: 30px;
				}
				
				.start_project  {
					display: none;
				}
				
				@media(max-width: 768px) {
					font-size: 14px;
				}
			}
			
			&.project_name:before {
				content: " ";
				display: block;
				position: absolute;
				left: 0;
				right: 0;
				top: 0px;
				height: 1px;
				background: #4b87a1;
			}
		}
		
		th:first-child,
		td:first-child {
			position: relative; /* IE11 FIX */
			position: -webkit-sticky;
			position: sticky;
			left: 0;
			z-index: 22;
		}
		
		td.overall_times_by_project,
		&.even .today input,
		&.even .today,
		&.odd .today input,
		&.odd .today {
			background-color: var(--brand3rd); /* #c0dbe7; */
		}

		&.active_start_stop {
			td.today {
				div.cell-edit:before,
				div.cell-edit:after {
					width: 2px;
					height: 10px;
					display: block;
					position: absolute;
					content: " ";
					background: var(--brandprimary);
					transform: rotate(15deg);
					transform-origin: 50% 100%;
					left: 18px;
					margin-left: -1px;
					bottom: 17px;
					outline: 1px solid transparent; /* workaround for aliasing */
					animation-name: clockframes;
					animation-duration: 5s;
					animation-iteration-count: infinite;
					animation-timing-function: linear;
				}
				
				div.cell-edit:after {
					transform: rotate(55deg);
					transform-origin: 50% 100%;
					animation-duration: 60s;
					animation-delay: -15s;
					height: 8px;
				}
			}
			
			.today {
				input {
					background-image: url(../images/clock_body.png);
					background-repeat: no-repeat;
					background-position: bottom 5px left 5px;
				}
			}		
		}
	}
	@media (max-width: 768px) {	
		thead:before {
			content: " ";
			position: absolute;
			display: block;
			background: var(--maincontentbg);
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}
	}
	
	thead {
		@media (max-width: 768px) {
			position: sticky;
			top: 26px;
			z-index: 11111;
		}
		
		th {
			font-size: initial;
			line-height: 1.4;
			outline: 2px solid var(--maincontentbg);
			text-align: center;
				
			span {		
				line-height: 1.4;
			}
		}
		
		tr {
			th:first-child,
			td:first-child {
				left: 0;
				position: relative; /* IE11 FIX */
				position: -webkit-sticky;
				position: sticky;
				z-index: 333;
			}
		}
		
		@media (min-width: 1024px) {
			.calendar_buttons {
				td {
					top: 0px !important;
				}
			}
			.days-headers {
				th, td {
					top: calc(var(--tableverticalpadding) * 2 + 56px) !important;
				}
			}

			.summary-headers {
				
				th, td {
					 top: calc(var(--tableverticalpadding) * 2 + 125px) !important; 
				}
			}
		}
		
		@media (max-width: 1023px) {
			.calendar_buttons {
				td {
					top: calc(var(--tableverticalpadding) * 2 + 66px) !important; 
				}
			}
			.days-headers {
				th, td {
					top: calc(var(--tableverticalpadding) * 2 + 127px) !important; 
				}
			}

			.summary-headers {
				
				th, td {
					 top: calc(var(--tableverticalpadding) * 2 + 202px) !important;
				}
			}
		}
		
		@media (max-width: 768px) {
			.calendar_buttons {
				td {
					top: calc(var(--tableverticalpadding) * 2 + 22px) !important; 
				}
			}
			.days-headers {
				th, td {
					top: calc(var(--tableverticalpadding) * 2 + 119px) !important; 
				}
			}

			.summary-headers {
				
				th, td {
					 top: calc(var(--tableverticalpadding) * 2 + 169px) !important; 
				}
			}
		}
				
		th:not(.summary) {
			position: relative; /* IE11 FIX */
			position: -webkit-sticky;
			position: sticky;
			z-index: 22;
		}
		
		tr:nth-child(2) th {
			top: 44px;
			z-index: 2222;
		}

		tr:nth-child(3) td {
			top: 111px;
			position: relative; /* IE11 FIX */
			position: -webkit-sticky;
			position: sticky;
			z-index: 22221;
			text-align: center;
		
			td:before {
				content: " ";
				border-right: 1px solid #BFBFBF;
				position: absolute;
				right: -1px;
				bottom: -1px;
				top: 0;
			}
			
			td:after {
				content: " ";
				border-bottom: 1px solid #BFBFBF;
				position: absolute;
				right: 0;
				bottom: -1px;
				left: 0;
			}
			
			td:last-child:before {
				display: none;
			}
		}
		
		.row-header:before {
			content: " ";
			position: absolute;
			right: 0;
			left: 0;
			bottom: 0;
			border-bottom: 1px solid #BFBFBF;
		}

		.row-header:after {
			content: " ";
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			border-right: 1px solid #BFBFBF;
		}

	}
	
	tr.even,
	tr.odd {
		.free_day input,
		.free_day {
			background-color: #D9D9D9;
		}
		
		.user_vacation input,
		.user_vacation {
			background-color: #9EED88;
		}
		
		&.selected td input,
		&.selected td {
			background-color: #E8E8E8;
		}

		&.selected {
			.today input,
			.today {
				background-color: #ACEBD7;
			}
						
			.free_day input,
			.free_day {
				background-color: #C9C9C9;
			}
			
			.user_vacation input,
			.user_vacation {
				background-color: #9EED88;
			}
			
			.overlapped input,
			.overlapped {
				background-color: var(--calendar-overlapped-bg-selected-color);
				color: var(--calendar-overlapped-text-color);
			}
		}
		
		.overlapped input,
		.overlapped {
			background-color: var(--calendar-overlapped-bg-color);
			color: var(--calendar-overlapped-text-color);
		}
	}
	
	tr.selected {
		border: 2px solid #15a782;
			
		td.project_name {
			background-color: #3e8e9e;
		}
	}
	
	td.readonly,
	td.readonly input {
		background-color: #A7A7A7 !important;
	}
	
	td.readonly input {
		cursor: not-allowed;
	}
	
	td.calendar_cell.calendar_error input,
	td.calendar_cell.calendar_error {
		background-color: #FF9E9E !important;
	}
}

.week-calendar {

	@media (min-width: 1501px) and (max-width: 1600px) {
		td,
		th {
			display: none;
		}

		.mobile-show,
		td:nth-child(2),
		th:nth-child(2),
		td:nth-child(3),
		th:nth-child(3),
		td:nth-child(4),
		th:nth-child(4),	
		td:nth-child(5),
		th:nth-child(5),
		td:nth-child(6),
		th:nth-child(6),	
		td.mobile-show,
		.js-project-summary,
		.js-project-percents,
		th.mobile-show {
			display: table-cell !important;
		}
		
		tfoot {
			display: none;
		}
	}
	
	@media (min-width: 1401px) and (max-width: 1500px) {
		td,
		th {
			display: none;
		}

		.mobile-show,
		td:nth-child(3),
		th:nth-child(3),
		td:nth-child(4),
		th:nth-child(4),	
		td:nth-child(5),
		th:nth-child(5),
		td:nth-child(6),
		th:nth-child(6),	
		td.mobile-show,
		.js-project-summary,
		.js-project-percents,
		th.mobile-show {
			display: table-cell !important;
		}
		
		tfoot {
			display: none;
		}
	}
	
	
	@media (min-width: 1201px) and (max-width: 1400px) {
		td,
		th {
			display: none;
		}

		.mobile-show,
		td:nth-child(4),
		th:nth-child(4),	
		td:nth-child(5),
		th:nth-child(5),
		td:nth-child(6),
		th:nth-child(6),	
		td.mobile-show,
		.js-project-summary,
		.js-project-percents,
		th.mobile-show {
			display: table-cell !important;
		}
		
		tfoot {
			display: none;
		}
	}
	
	@media (min-width: 1101px) and (max-width: 1200px) {
		td,
		th {
			display: none;
		}

		.mobile-show,
		td:nth-child(4),
		th:nth-child(4),	
		td:nth-child(5),
		th:nth-child(5),
		td:nth-child(6),
		th:nth-child(6),	
		td.mobile-show,
		.js-project-summary,
		.js-project-percents,
		th.mobile-show {
			display: table-cell !important;
		}
		
		tfoot {
			display: none;
		}
	}
	
	@media (min-width: 1001px) and (max-width: 1100px) {
		td,
		th {
			display: none;
		}

		.mobile-show,
		td:nth-child(4),
		th:nth-child(4),	
		td:nth-child(5),
		th:nth-child(5),	
		td.mobile-show,
		.js-project-summary,
		.js-project-percents,
		th.mobile-show {
			display: table-cell !important;
		}
		
		tfoot {
			display: none;
		}
	}
	
	@media (min-width: 700px) and (max-width: 1000px) {
		td,
		th {
			display: none;
		}

		.mobile-show,
		td:nth-child(4),
		th:nth-child(4),	
		td:nth-child(5),
		th:nth-child(5),
		.js-project-summary,
		.js-project-percents,		
		td.mobile-show,		
		th.mobile-show {
			display: table-cell !important;
		}
		
		tfoot {
			display: none;
		}
	}
	
	@media (max-width: 699px) {
		td,
		th {
			display: none;
		}

		.mobile-show,
		td:nth-child(5),
		th:nth-child(5),		
		td.mobile-show,		
		th.mobile-show {
			display: table-cell !important;
		}
		
		tfoot {
			display: none;
		}
	}
}

.cell-menu {
	padding: calc(var(--padding) / 2);
	border-radius: var(--borderradius);
	position: absolute;
	left: calc(4px + 100%);
	top: 0;
	z-index: 2;
	background: #fff;
	display: none;
	width: 200px;
	box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
	color: var(--color);
	
	@media (max-width: 1024px) {
		left: auto;
		right: calc(4px + 100%);
	}
	
	ul {
		list-style: none;
		float: left;
		width: 100%;

		li {
			float: left;
			width: 100%;
			text-align: left;
			
			> * {
				float: left;
				width: 100%;
				position: static;
				padding: 6px 0 6px 32px;
				position: relative;
			}

			&:not(.disabled) > * {
				cursor: pointer;
			}

			&:not(.disabled) > *:hover {
				color: var(--brandprimary);
				
				* {					
					color: var(--brandprimary) !important;
				}
			}
			
			.start_project {
				background: red;
			}
			.icon {
				width: 32px;
				left: 0;
				text-align: center;
				top:8px;
				position: absolute;
				font-size: 80%;
				
				.fa, .fas, .far {
					color: #888;
				}
			}
		}
	}
}

td:focus-within:not(:has(.report_time_comment:focus)) .cell-menu,
th:focus-within .cell-menu {
	display: block;
}


.calendar_buttons {

	a.button {
		border-radius: var(--borderradius);
		min-width: 44px;
		margin: 3px;
		padding: 10px 12px;
		text-transform: uppercase;
	}
	
	td {
		position: sticky;
		top: 0;
		z-index: 11111;
		border-width: 0 !important;
		padding-left: 0;
		padding-right: 0;
	}
	
	.calendar-search {
		margin: 6px var(--padding) 0 0;
		
		@media (max-width: 768px) {
			width: 100%;			
			margin-left: 0;
			margin-right: 0;
			
			input {
				width:100%;
			}
		}
	}
		
	.show_favourites {
		float: left;
		margin: 17px 0 0;

		img {
			vertical-align: top;
		}
	}
	@media (max-width: 768px) {
		.show_favourites {
			display: none;
		}
	}
	
	.calendar-navigation {
		margin-top: 12px;

		@media (max-width: 768px) {
			float: left;
			width: 100%;
			text-align: center;
		}
	}
}
		
.summary {
	/* border-left-width: 0 !important; */
	
	&.filtering label {
		opacity: 0.5;
	}
}

.filtering {
	padding: var(--padding);
	background: #fff;
	border: 2px solid #c0c0c0;
	border-radius: var(--borderradius);
}

.inline-form {
	float: left;
	width: 100%;
	text-align: center;
	
	.aligner {
		
		display: inline-block;
		max-width: 100%;
		text-align: left;
		
		
		.flex-fields {
			display: flex;
			max-width: 100%;
			text-align: left;
			flex-wrap: wrap;
		}
	}
	
	.form_field, .date_field {
		display: inline-block;
		float: left;
		width: auto;
		vertical-align: bottom;
		margin: 5px var(--inline-fields-spacing) 5px;
		
		> label {
			display: inline-block;
			width: auto;
			vertical-align: baseline;
		}
		
		.form_data {
			display: inline-block;
			width: 100%;
			min-width: 160px;
		}
	}
}

.checkbox-multiselect.ready {
	display: none !important;
}

.checkbox-multiselect-container {
	position: relative;
	width: 240px;
	
	.label {
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		
		span {
			display: inline-block;
			background: #eee;
			border-radius: 10px;
			margin-right: 5px;
			padding: 0 10px;
			color: #666;
		}
		
		span:after {
			content: ", ";
		}
		
		span:last-child:after {
			content: initial;
		}
	}
	
	&.error .label {
		background: #ffeeee;
		white-space: nowrap;
		text-overflow: 
	}
	
	.list {
		display: none;
		position: absolute;
		top: 100%;
		box-shadow: 0 0 12px rgba(0,0,0,0.2);
		background: #fff;
		padding: 6px;
		z-index: 2;
		width: 100%;
		min-width: 320px;
		max-width: 100%;
		border-radius: var(--borderradius);
		
		label {
			position: relative;
			padding: 5px 0;
			padding-left: 26px;
			display: block;
			cursor: pointer;
			
			input {
				position: absolute;
				left: 0;
			}
			
			&:hover {
				background: #eee;
			}
		}
	}
	
	&.visible .list {
		display: block;
	}
}


.calendar-nav {
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 55555;
    left: 0;
    width: 100%;
}

/* FIREFOX */
@-moz-document url-prefix() {
    .calendar_table tr td.project_name:before,
    .calendar_table tr th.project_name:before {
        top: initial;
        bottom: 0;
    }
}

.project_favourite {
    cursor: pointer;
    width: 17px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
	position: absolute;
	right: 7px;
	top: 7px;
	
	&.favourite-yes {
		background: url("../images/favourite_yes.svg") center center no-repeat transparent;
	}
	
	&.favourite-no {
		background: url("../images/favourite_no.svg") center center no-repeat transparent;
	}
}

.project_name.read-only .project_favourite {
    cursor: inherit;
}

.tooltip-info,
.project_details {
    cursor: help;
    float: right;
    width: 16px;
    height: 16px;
    background: url("../images/project_description.png") 0 0 no-repeat transparent;
}

.tooltip-info,
.tooltip-dark {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.tooltip-dark {
    cursor: help;
    float: right;
    width: 16px;
    height: 16px;
    background: url("../images/tooltip-dark.png") 0 0 no-repeat transparent;
}

.stop_project {
    display: inline;
	
	a {
		cursor: pointer;
		text-decoration: underline;
	}
}

.start_project {
    cursor: pointer;
    padding: 5px;
    width: 7px;
    height: 9px;
    display: inline-block;
    float: right;
    vertical-align: middle;
    background: url("../images/calendar_fwd.png") 0 0 no-repeat transparent;
	
	position: absolute;
	right: 7px;
	top: 40px;
}

#content.full_width {
    width: 100%;
}

#monthly_report {
    width: 100%;
    height: 100%;
}

.autosubmit.form_field  {
	width: auto;
	float: none;
	display: inline-block;
	margin: 5px;
	
	select {
		width: auto;
	}
}



#map {
    width: 700px;
    height: 300px;
    margin: 0 auto !important;
}

h2 {
	color: var(--brandprimary);
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	text-transform: uppercase;
	margin: calc(var(--padding) * 2) 0 8px 0;
	text-align: left;
}

h4 {
    color: var(--brandprimary);
}

h5 {
    color: var(--brandprimary);
    text-align: center;
    border-bottom: 1px solid var(--brandprimary);
    margin: 10px 0;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    padding: 5px 0;
    text-align: left;
	float: left;
	width: 100%;
}
.message {
	display: flex;
	align-items: center;
	margin: var(--padding) 0;
	padding: var(--padding) var(--padding) var(--padding) calc(43px + var(--padding) * 2);
	min-height: calc(43px + var(--padding) * 2);
	text-align: left;	
	font-weight: 500;

	border-radius: var(--borderradius);
	
	.desc {
		float: left;
		width: 100%;
	}
	
	&.info {
		background: url('../images/info_box_icon.svg') no-repeat scroll var(--padding) var(--padding) #f5f5f5;
		background-color: var(--infoboxbg);
		color: var(--brandprimarydarker);
	}
	
	&.error {
		background: url('../images/error_box_icon.svg') no-repeat scroll calc(var(--padding) - 3px) calc(var(--padding) - 3px) #f5f5f5;
		background-color: var(--errorboxbg);
		color: var(--brandprimarydarker);
		
		.errorlist {
			width: 100%;
			color: inherit;
			
			li {
				color: inherit;
			}
		}
		
		.error-item {
			width: 100%;
			float: left;
			margin-bottom: 6px;
		}
		
		.error-item:last-child {
			margin-bottom: 0;
		}
	}
	
	
	a {
		color: inherit;
		text-decoration: underline;
	}
	

}

.errors {
	margin: 10px 0;
	/* border: 1px solid #c38585; */
	background-color: #f1b4b4;
	color: black;
	padding: 7px;
	text-align: center;
	border-radius: 3px;
	display: inline-block;
	
	> a {
		text-decoration: underline;
	}
	
	> .errorlist > li {
		color: #000000;
	}
}



.buttons_container /* Ignore .fixed-nav override */
{
    border-top: 1px solid #bfbfbf;
    text-align: left;
    padding-top: calc(var(--padding) / 2);
	padding-bottom: calc(var(--padding) / 2);
    margin-top:  var(--padding);
	float: left;
	width: 100%;
	text-align: center;
	position: static;
	
	.button {
		margin: calc(var(--padding) / 2)
	}
}

button.button-none {
    appearance: base;
    padding: 0;
    border: none;
    background: none;
    cursor: inherit;
}

.pointer {
    cursor: pointer;
}

.fixed-nav .buttons_container {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 2000;
	margin-top: 0;
}



.center {
    text-align: center;
}

.dialog_content {
    display: inline-block;
    width: 400px;
    vertical-align: top;
	
	> h6 {
		font-weight: normal;
		border-bottom: 1px solid #bfbfbf;
		margin: 0 0 10px;
		padding: 0 0 10px;
		font-size: var(--fontsize);
		line-height: 20px;
	}
	
	> table {
		th {
			text-align: right;
			width: 135px;
			vertical-align: top;
		}

		td {
			padding-left: 5px;
		}
	}
}

.dialog_buttons {
    padding: 10px 0 0;
    margin: 10px 0 0;
    border-top: 1px solid #bfbfbf;
}
.dialog_icon {
    display: inline-block;
    width: 60px;
    vertical-align: top;
}


.vertical {
    vertical-align: middle;
}

.show_favourites {
    color: var(--brandprimary);
    font-weight: 600;
}

.bottom-calendar-nav {
	margin-top: var(--padding);
	margin-bottom: var(--padding);
	width: 100%;
	display: block;
	float: left;
	
	@media (max-width: 768px) {
		> * {
			width: 100%;
			text-align: left;
			float: left !important;
		}
		
		div:nth-child(2) {
			margin-top: 6px;
		}
	}
}

.image_field .image_field--combined-button {
	position: relative;
    display: block;

	.dummy_input {
		position: absolute;
		filter: alpha(opacity=0);
		opacity: 0;
		-moz-opacity: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		margin: 0;
		cursor: pointer;
	}

	button {
		min-width: 0;
		padding: 5px 10px;
		position: absolute;
		right: 0;
		top: 0;
	}
}

.hasDatepicker {
    background-image: url("../images/calendar.png");
    background-position: right center;
    background-repeat: no-repeat;
}

.reset_password_form .form_label {
    min-width: 100px;
}

.new_organization {
	> .form_field .form_data_text {
		display: inline-block;
		vertical-align: middle;
	}

	.form_field_password2 {
		display: none;
	}
}

.new_organization .form_field.required:after,
.reset_password_form .form_field.required:after {
    content: '*';
    color: red;
	position: absolute;
}

.form_field_rules_accept,
.form_field_data_accept,
.form_field_marketing_accept {
	.form_label {
		display: none;
	}
}

.new_organization,
.reset_password_form {
	.form_field > {
		.form_data {
			&.checkbox-field {
				width: 100%;
				max-width: 500px;
			}
		}
	}

    .terms {
		font-size: 0.95em;
	}
}

.row {
	margin: 0 calc(0px - var(--padding));
}

.col {
    box-sizing: border-box;
    float: left;
    padding: 0 var(--padding);
}

.col-md-6,
.col-6 {
    width: 50%;
	
	@media screen and (max-width: 1300px) {
		width: 100%;
	}
}

:root {
	--boxpadding: calc(var(--padding) * 4);
	
	@media (max-width: 1400px) {
		--boxpadding: calc(var(--padding) * 3);		
	}
	
	@media (max-width: 1200px) {
		--boxpadding: calc(var(--padding) * 2);		
	}
	
	@media (max-width: 1024px) {
		--boxpadding: var(--padding);		
	}
}

.info-box {
	padding: var(--padding) var(--boxpadding);
	background: var(--brand3rd);
	border: 2px solid var(--brandprimary);
	color: var(--brandprimaryhovercolor);
	border-radius: var(--borderradius);
	margin-bottom: var(--padding);
	float: left;
	width: 100%;
	
	font-size: initial;
	line-height: initial;
	
	* {
		font-size: inherit;
		line-height: inherit;
	}
}

.col-box {
	border: 1px solid #c0c0c0;
	margin-bottom: 20px;
	border-radius: var(--borderradius);
	overflow: hidden;
	background: #FFFFFF;
	float: left;
	width: 100%;
	
	h3.page-header {
		margin: 0;
		padding: 12px var(--boxpadding);
		background: #157683;
		color: #fff;
		font-weight: bold;
		font-size: 18px;
		text-align: center;
	}
	
	.box-content {
		padding: var(--padding) var(--boxpadding);
		float: left;
		width: 100%;

		&.low-padding {
			padding: var(--padding);
		}
	}
		
	&.login-box {
		width: 100%;
		max-width: 600px;
		margin-left: 50%;
		transform: translateX(-50%);
		
		hr {
			margin-top: var(--padding);
			margin-bottom: var(--padding);
		}
		
		.button {
			margin-left: 0;
		}

		.button_container {
			display: inline-block;
			font-size: var(--fontsize);
			margin: 10px 0;
			text-align: left;
			float: left;
			width: 100%;
			text-align: center;
		}
	}

}


.col-10 {
    width: 83.33%;
}

.col-2 {
    width: 16.67%;
}

.col-2:first-child,
.col-6:first-child,
.col-10:first-child {
    padding-left: 0;
}

.col-2:first-child,
.col-6:first-child,
.col-10:last-child {
    padding-right: 0;
}

div#datepicker.hasDatepicker {
    background-image: none;
}

body {
	.ui-datepicker {
		width: 280px;
		border-radius: var(--borderradius);
		border-width: 0 !important;
		box-shadow: 0 0 12px rgba(0,0,0,0.1);
		padding: 6px;
		
		.ui-datepicker-title {
			padding: 8px 0;
			border-radius: var(--borderradius) var(--borderradius) 0 0;
		}
		
		.ui-datepicker-header {
			margin: -6px -6px 2px;
			background: var(--brand2nd); /* #f6f6f6;	*/
			position: relative;
			border-radius: var(--borderradius);
			
			.ui-datepicker-prev,
			.ui-datepicker-next {
				top: 50%;
				transform: translateY(-50%);
				margin-top: 1px;
				
				span {
					margin-left: -4px;
				}
			}
			
			select,
			.ui-datepicker-month,
			.ui-datepicker-year {
				float: left;
				width: 49%;
				line-height: 1.4;
				font-size: var(--fontsize);
				font-weight: normal;
				border-bottom-width: 0;
				
				width: auto;
				padding-left: 5px;
				padding-right: 5px;
				float: none;
			}
		}
		
		th {
			background: transparent;
			color: var(--brandprimary);
		}
		
		td span, td a {
			border-width: 2px;
			border-color: transparent;
			border-style: solid;
			background: #fff;
			color: var(--color);
			border-radius: var(--borderradius) !important;
		}

		td a {
			margin: 6px 3px 0;
		}
		
		&.ui-widget-content .ui-state-highlight {
			border-width: 2px;
			border-style: solid;
		}
		
		&.ui-widget-content .ui-state-highlight {
			border-color: var(--brand2nd);
			background: var(--brand2nd);
		}

		td  {
			span,
			a {
				border-radius: 2px;
				text-align: center;
			}
		}
	}

	.ui-datepicker-current-day a {
		background-color: var(--brandprimary) !important;
		background-image: none !important;
		color: #fff !important;
	}
}

.chart-split {
	padding-bottom: var(--padding);
	float: left;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	
	> #dashboard-chart-container,
	> .custom-legend {
		float: left;
	}
	#dashboard-chart-container {
		width: 40%;
		
		#dashboard-chart-new {
			width: 100% !important;
			height: auto !important;
		}
	}
	
	.custom-legend {
		width: 60%;
		padding-left: calc(var(--padding) * 2);
		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex-grow: 0;
		
		.project {
			width: 50%;
			float: left;
			margin: var(--padding) 0;
			text-align: left;
			
			.value {
				font-weight: bold;
				font-size: 36px;
			}
			
			.name {
				padding-left: 32px;
				position: relative;
				
				.color {
					display: inline-block;
					width: 18px;
					height: 18px;
					border-radius: 50%;
					background: transparent /* Nadpisywane w JS */;
					position: absolute;
					left: 0;
					top: 2px;
				}
				
				.title {
					display: inline;
					word-wrap: break-word;
				}
			}
		}
	}
	
	@media (max-width: 960px) {
		> #dashboard-chart-container,
		> .custom-legend {
			width: 100%;
			padding-left: 0;
			padding-right: 0;
			text-align: center;
		}
		
		> .custom-legend {
			display: inline-block;
			
			* {
				text-align: center;
			}
			
			.project {
				display: inline-block;
			}
		}
	}
	
	@media (max-width: 768px) {
		> .custom-legend {
			.project {
				width: 100%;
			}
		}
	}
	
	#dashboard-chart-container {
		padding: 12px;
		position: relative;
	}
	
	#dashboard-chart-container:before {
		border-radius: 50%;
		position: absolute;
		content: " ";
		display: block;
		
		
		left: 0;
		top: 0;
		right: 0;
		bottom:  0;
		
		border: 2px solid var(--brandprimary);
	}
}

.day-box {
	display: block;
	float: left;
	width: 100%;	
	text-align: left;
	margin-bottom: 20px;
	
	&.empty {
		opacity: 0.5;
	}
	
	.title{
		display: table;
		float: left;
		width: 100%;
		border-bottom: 2px solid var(--brandprimary);
		line-height: 1.4;
		font-size: 18px;
		padding: 5px 0;
		font-weight: bold;
		color: var(--brandprimary);
	}
	
	.day-time-summary {
		display: table-cell;
		width: 60px;
		vertical-align: middle;
		text-align: right;
		color: #666;
		font-size: var(--fontsize);
	}
		
	.project {
		width: 100%;
		display: table;
		table-layout: fixed;
		padding: 5px 8px;
		background: #f9f9f9;
		margin: 0 0 2px;

		.project-name {
			display: table-cell;
			padding-left: 16px;
			position: relative;
		}
		
		.project-name:before {
			content: " ";
			border: 1px solid #888;
			border-radius: 2px;
			width:  6px;
			height: 6px;
			top: 6px;
			position: absolute;
			left: 0;
		}

		.project-path {
			color: #888;
			width: 100%;
			display: block;
		}
				
		.project-time {
			display: table-cell;
			width: 50px;
			text-align: right;
			font-weight: bold;	
			color: #666;
		}
	}
	
	.project:nth-child(2n) {
		background: #f0f0f0;
	}
	
	.project,
	.project:nth-child(2n) {
		background: transparent;
		padding-left: 0;
		padding-right: 0;
	}
}

.day-title-date {
	display: table-cell;
	vertical-align: middle;
}


.project-title {
	&.with-path {
		width: 100%;
		display: block;
		padding-left: 15px;
		position: relative;
	}

	&.with-path:before {
		content: " ";
		display: block;
		border-left: 2px solid #888;
		border-bottom: 2px solid #888;
		position: absolute;
		left: 5px;
		bottom: 9px;
		top: 0;
		width: 5px;
	}
}

.dashboard-calendar-box .ui-datepicker {
	border-width: 0;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}


.checkbox-sorter {
	display: block;
	float: left;
	width: 100%;
	margin-bottom: 20px;
	text-align: left;
	
	select {
		display: none;
	}
	
	.checkboxes-sortable-list {
		label {
			display: block;
			float: left;
			width: 33.333%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			padding: 5px 10px 5px 30px;
			position: relative;	
			font-size: 18px;
			text-align: left;
			color: #4d4d4d;
			cursor: pointer;
			
			@media screen and (min-width: 1201px) {
				width: 25%;
			}
			
			@media screen and (max-width: 900px) {
				width: 50%;
			}

			@media screen and (max-width: 600px) {
				width: 100%;
			}
			
			span:before {
				content: " ";
				border: 1px solid #666;
				border-radius: 2px;
				width: 14px;
				height: 14px;
				display: block;
				position: absolute;
				left: 0;
				top: 7px;
			}
			

			input[type="checkbox"]:checked + span:after {
				content: " ";
				border: 1px solid #666;
				background: var(--brandprimary);
				border-radius: 2px;
				width: 10px;
				height: 10px;
				display: block;
				position: absolute;
				left: 2px;
				top: 9px;
			}

			input[type="checkbox"] {
				position: absolute;
				left: 0;
				top: 6px;
				opacity: 0;
			}

			input[type="checkbox"]:checked + span {
				color: var(--brandprimary);
			}
		}
	}
		
	.checkbox-sorter-filter {
		background: #f6f6f6;
		padding: 10px;
		border-radius: 3px;
		margin: 0 0 10px;
		border: 1px solid #ddd;
		
		display: block;
		float: left;
		width: 100%;
	}
	
	.checkboxes-sortable {
		border: 2px solid var(--brandprimary);
		border-radius: 2px;
		display: block;
		float: left;
		width: 100%;
		padding: 20px 10px;
		
		 > .summary {
			background: #dbebf2;
			text-align: left;
			padding: 10px;
			margin: -20px -10px 0 -10px;
			float: left;
			box-sizing: content-box;
			min-width: 100%;
			display: block;
		}
	}
	


	&.requiredMultiselect {
		.checkboxes-sortable {
			border-color: #801515;
			background: #f8eded;
				
			> .summary {
				background: #f2dbdb;
			}
		}
	}
	
	.reorder {
		margin: 5px 0 0;
	}
	
	.checkboxes-sortable > .summary {
		label {
			float: right;
			margin-right: 10px;
		}
		
		label:nth-child(2) {
			margin-right: 0;
		}
	}


}

.dropdown-sorter {
	display: block;
	float: left;
	width: 100%;
	text-align: left;
	
	position: relative;

	&:not(:where(.dropdown-sorter--inline)) {
		margin-bottom: 20px;
	}
	&.dropdown-sorter--inline {
		/* Poprawka "na oko" dla kalendarza miesięcznego */
		margin-bottom: -16px;
	}
	
	select {
		display: none;
	}
	
	.checkboxes-sortable-list {
        overflow-y: auto;
        height: 100%;
		max-height: 240px;
		display: block;
		float: left;
	}
		
	.checkbox-sorter-filter {
		display: block;
		float: left;
		width: 100%;
	}
	
	.checkboxes-sortable {
		position: absolute;
		top: 100%;
		box-shadow: 0 0 12px rgba(0,0,0,0.2);
		background: #fff;
		padding: 6px;
		z-index: 2;
		width: 100%;
		min-width: 320px;
		max-width: 100%;
		border-radius: var(--borderradius);		
		

		display: none;
		z-index: 2;
		
		 > .summary {
			text-align: left;
			padding: 10px 0;
			margin: 0;
			float: left;
			box-sizing: content-box;
			min-width: 100%;
			display: block;
			border-bottom: 1px solid #888;
			margin-bottom: var(--padding);
			/* display: none; */
			
			.counter {
				font-size: 90%;
				color: #666;
			}
		}
	}
	&.visible, &.always-visible {
		.checkboxes-sortable {
			display: block;
		}
	}


	&.requiredMultiselect {
		border-color: #801515;
		background: #f8eded;
		
		.checkboxes-sortable {
			border-color: #801515;
			background: #f8eded;
				
			> .summary {
				background: #f2dbdb;
			}
		}
	}
	
	.reorder {
		margin: 5px 0 0;
	}
	
	.checkboxes-sortable > .summary {
		label {
			float: left;
			margin-right: 10px;
		}
		
		label:nth-child(2) {
			margin-right: 0;
		}
	}

	&.always-visible {
		.checkboxes-sortable {
			box-shadow: none;
			border-radius: 0;
			padding: 0;
		}
	}
	
	&.multiselect {
		.summary, .checkbox-sorter-filter {
			display: none !important;
		}
		
		.checkboxes-sortable {
			min-height: 180px;
			height: 180px;
			border-bottom: 2px solid #ccc;
			
			.checkboxes-sortable-list {
				width: 100%;
			}
		}
	}
}

label.styled-checkbox {
	display: block;
	float: left;
	width: 33.333%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 5px 10px 5px 32px;
	position: relative;	
	font-size: var(--fontsize);
	text-align: left;
	color: #4d4d4d;
	cursor: pointer;
	width: 100%;

    &:has(:focus-visible) {
        /* focus-visible pojawi się na checkboksie, stąd :has() */
        outline: auto;
    }

	span.tick {
		border: 2px solid var(--brandprimary);
		border-radius: 4px;
		width: 18px;
		height: 18px;
		display: block;
		position: absolute;
		left: 5px;
		top: 7px;
	}
	
	input:checked + span {
		background: var(--brandprimary);
	}
	
	
	input[type="checkbox"]:checked + span.tick:before,
	input[type="checkbox"]:checked + span.tick:after {
		content: " ";
		background: #fff;
		border-radius: 2px;
		width: 11px;
		height: 3px;
		transform-origin: center center;
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
	}
	
	input:checked + span.tick:before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	
	input:checked + span.tick:after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	input {
		position: absolute;
		left: 0;
		top: 6px;
		opacity: 0;
	}

	input:checked + span.tick {
		color: var(--brandprimary);
	}

	input[type="radio"] + span.tick {
		border-radius: 100%;
	}
}


.ui-widget-content {
	border: 1px solid #999;
	background: #fff;	
}

.popup-content-wrapp {
	max-height: calc(100vh - 170px) !important;
	overflow-y: scroll;
	overflow-x: hidden;
	
	.message:first-child {
		margin-top: 0;
	}
}

.ui-widget-header {
	font-size: 18px;
}

.ui-dialog {	
	border-radius: var(--borderradius);
	
	border-radius: var(--borderradius);
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%);
	max-width: 100%;
	
	.ui-dialog-titlebar-close {
		font-family: "FontAwesome";
		color: #fff;
		background: none !important;
	}
	
	.ui-widget-header {
		background: var(--brandprimary);
		border-radius: calc(var(--borderradius) - 1px) calc(var(--borderradius) - 1px) 0 0;
		font-weight: bold;
	}

	.ui-dialog-titlebar-close:before {
		content: "\f00d";
	}
	
	.ui-dialog-content {
		padding: var(--padding) var(--padding) calc(var(--padding) - 6px);
		
		> .message:first-child {
			margin-top: 0;
		}
	}

	.ui-dialog-buttonpane {
		text-align: center;

		.ui-dialog-buttonset {
			float: none;
		}
		
		.buttons_container {
			text-align: right;
		}
	}

	&.ui-widget-content {
		box-shadow: 0 0 12px rgba(0,0,0,0.4);
		z-index: 3333333;
		position: fixed !important;
		height: auto !important;
	}
	
	.buttons_container {
		position: static !important;
		padding: var(--padding) 0 0 0;
		
		.button, input[type="submit"] {
			margin-top: 0;
			margin-bottom: 6px;
		}
	}
	
	textarea {
		max-width: 100%;
		min-width: 100%;
	}

	#dialog_form_container {
		text-align: center;
		display: none;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		height: auto !important;
		
		textarea {
			width: 260px;
		}
	}
}

.report-ok {
	color: #298015;
}

.cookies-box {
	display: none;
	float: left;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--brandprimary);
	z-index: 10000;  /* walczyło z ganttem */
  
	.cookies-box-content {
		color: #fff;
		padding: 20px;
		font-size: var(--fontsize);
		line-height: 1.4;
		
		a {
			color: #eee;
			text-decoration: underline;
		}
				
		.cookies-nav {
			width: 100%;
			text-align: right;
		}
	}
}

@media screen and (max-width: 480px) {
	.logout-btn {
		margin: 0 !important;
	}
}


body {
	table.dataTable {
		margin-bottom: 10px;
		width: 100% !important;
		border-collapse: separate;
		border-spacing: 2px;
		
		td, th {
			border-radius: var(--borderradius);
			text-align: center;
		}
		
		&.no-footer {
			border-bottom-width: 0;
		}

		
		tfoot {
			th,
			td {
				border-top-color: #e6e6e6;
			}
		}
		
		tbody th.dt-body-right, 
		tbody td.dt-body-right {
		  text-align: center;
		}
		
	}
}

.gantt-outer {
	float: left;
	width: 100%;
	margin-top: var(--padding);	
}

#gantt {
	float: left;
	width: 100%;
}

.gantt-v1 {
    /* Gwarancja że przynajmniej część diagramu będzie widoczna po kliknięciu "Pokaż...".
     * 150px to ~wysokość nagłówka i stopki. */
    min-height: 150px;
}

body .fn-gantt {
	border: 2px solid var(--brandprimary);
	overflow: hidden;
		
	* {
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
}

.fn-gantt .leftPanel .fn-label {
	text-align: left;
}

.checkbox-field {
	padding-left: 20px;
	position: relative;
	
	input {
		position: absolute;
		left: 0;
		top: 3px;
		margin: 0;
	}
}

.ui-dialog-titlebar-close .ui-button-text,
.ui-dialog .ui-dialog-titlebar-close:focus {
	outline: none;
}

.ui-front {
    z-index: 99999;  /* Największy z-index */
}

.project-list-buttons {
    position: relative;
    height: 0;
    z-index: 1;
	
	> * {
		float: right;
		max-width: min-content;
	}
}

.show-gantt-button {
    min-width: 210px;
}

:root {

	--overlaycolor: var(--brandprimary);
	--overlayfontcolor: #fff;
}

.inline-edit-wrapper {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	box-shadow: 0 0 12px rgba(0,0,0,0.2);
	z-index: 222223;
	
	display: none;

	.inline-edit-wrapper__title {
		margin-top: 0;
		width: 100%;

		display: flex;

		background: var(--overlaycolor);

		h2.title {
			margin-bottom: 0;
		}

		.inline-edit-wrapper__title_buttons {
			display: contents;

			button {
				margin: 12px;
				padding: 0 24px;
				min-width: max-content;
			}
		}
	}
	h2.title {
		margin-top: 0; /* 8px; */
		padding: var(--padding);
		
		background: var(--overlaycolor);
	}
	
	&.visible {
		display: block;
		
		.overlay-edit-data {
			background: #fff;
			position: fixed;
			right: 0;
			top: 0;
			bottom: 0;
			width: 800px;
			max-width: 100%;
			overflow-y: auto;
			container: inline-edit-wrapper / inline-size;
			padding: 0;
			box-shadow: 0 0 12px rgba(0,0,0,0.2);
			z-index: 222223;
			
			z-index: 2;
			
		}
		.overlay-bg {
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			background: rgba(255,255,255,0.6);
			z-index: 1;
		}
	}
	
	.content {
		padding: var(--padding);
		> * {
			display: none;
		}
		
		> *.visible {
			display: block;
		}
	}
	
	.flex-data {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		max-height: calc(100vh - 50px);
		height: 70vh;
		
		.content {
			overflow-y: auto;
			overflow-x: clip;
			/* height: calc(100vh - 150px); */
			height: calc(100vh - 70px);
			width: 100%;
			
			.form_field {
				margin-left: 0;
				margin-right: 0;
			}
		}
		/*
		.buttons_container {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
		}
		*/
	}
	
	h2.title {
		text-align: left;
		padding-right: 60px;
		float: left;
		width: 100%;
		
		color: var(--overlayfontcolor);
	}

	.inline-edit-wrapper__title .close,
	h2.title + .close {
		position: absolute;
		right: 32px;
		top: 12px;
		background: var(--overlayfontcolor);;
		font-weight: initial;
		width: 32px;
		height: 32px;
		border-radius: 50px;
		cursor: pointer;
	}

	.inline-edit-wrapper__title h2.title + .close,
	.inline-edit-wrapper__title .close {
		position: relative;
		flex: 0 0 auto;
		margin: 12px 32px 0;
		inset: unset;
	}

	.inline-edit-wrapper__title .close:before,
	.inline-edit-wrapper__title .close:after,
	h2.title + .close:before,
	h2.title + .close:after {
		content: " ";
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 60%;
		height: 6px;
		border-radius: 10px;
		background: var(--overlaycolor);
		transform-origin: center center;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.inline-edit-wrapper__title .close:after,
	h2.title + .close:after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}
@media (min-width: 769px) {
	.workers-list-table {
		.mobile-only {
			display: none;
		}

		td.salary-td {
			text-wrap: nowrap;
			text-align: right;
		}
	}
}
@media (max-width: 768px) {
	.workers-list-table {
		thead {
			display: none;
		}
		
			
		tr:before {
			content: " ";
			order: 5;
			width: 100%;
			min-width: 100%;
			max-width: 100%;
			
		}
		
		tr {
			display: flex;
			float: left;
			flex-direction: row;
			flex-wrap: wrap;
			width: 100%;
			margin-bottom: var(--padding);
			
			background: #fff !important;
			
			border-radius: var(--borderradius);
			padding: var(--padding);
			
			.mobile-only {
				display: inline;
				font-weight: bold;
			}
			
			td {
				background: transparent;
				border-width: 0;
				padding: 0 var(--padding) 0 0 !important;
				float: left;
				text-align: left !important;
				border-radius: 0 !important;
				box-sizing: border-box;
				
				&.worker-name-td {
					width: 100%;
					max-width: 100%;
					min-width: 100%;
					text-align: left;
					padding-bottom: 8px !important;
					padding-right: 0 !important;
					margin-bottom: 8px;
					border-bottom: 1px solid #ccc;
					order: 1;
				}
				
				&.role-td {
					margin-bottom: 8px;
					order: 2;
				}
				
				&.active-td {
					clear: both;
					 
					order: 3;
				}
				
				&.salary-td {
					a {
						margin-top: -4px;
						margin-bottom: 4px;
					}
					
					
					order: 5;
				}
				
				&.free-days-td {
					clear: both;
					
					order: 4;
				}
				
				&.wrong-times-td {
					
					order: 6;
					
				}

				&.mass-report-td {
					
					order: 7;
					
				}
				
				&.mass-report-td,
				&.wrong-times-td,
				&.salary-td {
					padding-top: 6px !important;
					
					/*
					width: 100%;
					
					a {
						float: right;
					}
					*/
					
				}

			}
		}
	}
	.content-bg {
		.workers-list-table {
			tr {
				border: var(--trblockborder);
			}
		}
	}
}

@media (max-width: 768px) {
	.workers-list-table {
		tr {
			td {
				&.mass-report-td,
				&.wrong-times-td,
				&.salary-td {
					padding-top: 6px !important;					
					
					width: 100%;
					min-width: 100%;
					max-width: 100%;
					
					a {
						float: right;
						width: 160px;
					}					
				}
			}
		}
	}
}

@media (max-width: 450px) {
	.workers-list-table {
		tr {
			td {
				&.mass-report-td,
				&.wrong-times-td,
				&.salary-td {
					
					a {
						float: right;
						width: 100%;
						margin-top: 6px;
						margin-bottom: var(--padding) !important;
					}					
				}
			}
		}
	}
}

.overflow-x,
.table-overflow {
	width: calc(100vw - var(--sidebarwidth) - var(--padding) * 4);
	overflow-x: auto;
	float: left;
	
	@media (max-width: 1024px) {
		width: calc(100vw - var(--padding) * 2);
	}
	
	table {
		float: left;
	}
}

/* między innymi gant w kontenerze content-bg */
.overflow-x {
	width: calc(100vw - var(--sidebarwidth) - var(--padding) * 8);
	
	@media (max-width: 1024px) {
		width: calc(100vw - var(--padding) * 4);
	}

	@container inline-edit-wrapper (min-width: 1px) {
		width: calc(100cqw - var(--padding) * 4);
	}
}

.workers-in-project-table {
	td {
		width: 33.333%;
	}
}

.workers-in-project-table {
	@media (min-width: 769px) {
		.mobile-only {
			display: none;
		}
	}
	
	@media (max-width: 768px) {
		display: block;
		width: 100%;
		
		.mobile-only {
			font-weight: bold;
		}
		
		tbody {
			display: block;
			float: left;
			width: 100%;
		}
		
		thead {
				display: none;
		}
		
		tr {
			
			border-radius: var(--borderradius);
			float: left;
			width: 100%;
			padding: var(--padding);
			margin: var(--padding) 0;
			border: var(--trblockborder);
			background: #fff !important;
			
			td {
				padding: 0 !important;
				border-width: 0;
				float: left;
				box-sizing: border-box !important;			
				width: 100%;	
				text-align: left !important;				
			}

			td:nth-child(1) {
				width: 100%;
				min-width: 100%;
				max-width: 100%;
				padding-bottom: var(--padding) !important;
				font-size: 20px;
				
				.mobile-only {
					font-size: initial;
				}
			}

			td:nth-child(2),
			td:nth-child(3) {
				width: 50%;
				min-width: 50%;
				max-width: 50%;
			}
			
			td:nth-child(2) {
				padding-right: var(--padding) !important;
			}
			td:nth-child(3) {
				padding-left: var(--padding) !important;
			}
		}
	}
	
	@media (max-width: 660px) {
		tr {
			td:nth-child(2),
			td:nth-child(3) {
				width: 100%;
				min-width: 100%;
				max-width: 100%;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
			
			td:nth-child(2) {
				padding-bottom: var(--padding) !important;
			}
		}		
	}
}

.additional-fields-table {
	.mobile-only {
		display: none;
	}

	td, th {
		width: 25%;
		text-align: center;
	}
	
	@media (max-width: 1023px) {
		
		display: block;
		width: 100%;
		
		.mobile-only {
			display: inline-block;
			font-weight: bold;
		}

		.checkbox input {
			float: left;
		}

		tbody {
			display: block;
			float: left;
			width: 100%;
		}
		
		thead {
				display: none;
		}
		
		tr {
			
			border-radius: var(--borderradius);
			float: left;
			width: 100%;
			padding: var(--padding);
			margin: 0 0 var(--padding) 0;
			border: var(--trblockborder);
			background: #fff !important;
			
			td {
				padding: 0 !important;
				border-width: 0;
				float: left;
				box-sizing: border-box !important;			
				width: 100%;	
				text-align: left !important;				
			}


			td:nth-child(1),
			td:nth-child(2) {
				width: 50%;
				min-width: 50%;
				max-width: 50%;
				margin-bottom: var(--padding);
			}
			
			
			
			td:nth-child(1) {
				padding-right: var(--padding) !important;
			}
			td:nth-child(2) {
				padding-left: var(--padding) !important;
			}
			
			td:nth-child(3),
			td:nth-child(4) {
				width: auto !important;
				padding-right: var(--padding) !important;
			}
			
			label .mobile-only {
				font-weight: normal;
			}
		}
	}

	@media (max-width: 600px) {
		tr {
			td:nth-child(1),
			td:nth-child(2) {
				width: 100%;
				min-width: 100%;
				max-width: 100%;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
		}		
	}
}

.salaries-editor-table {
	.mobile-only {
		display: none;		
		color: var(--labelcolor);
		font-size: var(--labelsize);
	}

	.form_field input {
		width: auto;
	}
	
	th {
		font-weight: bold;
	}
	
	td, th {
		width: 25%;
		text-align: center;
	}
	
	.action-td {
		.button {
			margin: 0;
		}
	}
	
	@media (max-width: 768px) {
		.mobile-only {
			display: block;
			width: 100%;
			float: left;
		}
	
		thead {
			display: none;
		}
		
		tr {			
			border-radius: var(--borderradius);
			float: left;
			width: 100%;
			padding: var(--padding);
			margin: 0 0 var(--padding) 0;
			border: var(--trblockborder);
			background: #fff !important;
		}
		
		td {
			padding: 0 !important;
			border-width: 0;
			float: left;
			box-sizing: border-box !important;			
			width: 100%;
			min-width: 100%;
			text-align: left !important;
			margin-bottom: var(--padding);
			
			&.action-td {
				margin-bottom: 0;

				.button {
					float: right;
				}
			}
			
			&.since-td,
			&.until-td {
				width: 50%;
				min-width: 50%;
				max-width: 50%;
			}
			
		}
	}
	
	@media (max-width: 480px) {
		td {			
			&.since-td,
			&.until-td {
				width: 100%;
				min-width: 100%;
				max-width: 100%;
			}
		}
	}
}

.add-new-salary-range-table {
	.mobile-only {
		color: var(--labelcolor);
		font-size: var(--labelsize);
		display: none;
	}

	th {
		font-weight: bold;
	}

	td, th {
		width: 33.3333%;
		text-align: center;
	}
	
	.action-td {
		.button {
			margin: 0;
		}
	}
	
	@media (max-width: 768px) {
		.mobile-only {
			display: block;
			width: 100%;
			float: left;
		}
	
		thead {
			display: none;
		}
		
		tr {			
			border-radius: var(--borderradius);
			float: left;
			width: 100%;
			padding: var(--padding);
			margin: 0 0 var(--padding) 0;
			border: var(--trblockborder);
			background: #fff !important;
		}
		
		td {
			padding: 0 !important;
			border-width: 0;
			float: left;
			box-sizing: border-box !important;			
			width: 100%;
			min-width: 100%;
			text-align: left !important;
			margin-bottom: var(--padding);
			
			&.action-td {
				.button {
					float: right;
				}
			}
		}
	}
}

.salaries-editor-table,
.add-new-salary-range-table {
	@media (max-width: 768px) {
		.button {
			padding: 6px 12px;
			font-size: var(--fontsize);
		}
	}
}

.edit-copy-project-tree {
	float: left;
	width: 100%;
	margin-top: var(--padding);
}

.buttons {
	.button {
		margin-left: 0;
		margin-right: var(--padding);
	}
	
	.button:last-child {
		margin-right: 0;
	}
}



.dataTables_filter,
#workers_list_length,
#workers_list_filter {
	select, input {
		float: none;
	}
}

body .select2-container--default .select2-results > .select2-results__options {
  max-height: 191px;
}