:root {
	--light-blue: #6895B3;
	--dark-blue: #3E7295;
	--light-gray: #E9EAED;
	--dark-gray: #373A48;
	--bg-selected: #189CD5;
	--bg-selected-error: #E66C6E;
	--bg-table-row-even: #FFFFFF;
	--bg-table-row-odd: #F8F8F8;
	--bg-container: rgba(255, 255, 255, 0.4);
	--border-color: #DEE2E6;
	--gradient-background: linear-gradient(to top, #6895b3, #5e8cab, #5383a4, #497b9c, #3e7295);
	--box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.15);
}

body {
	background-image: url(../img/background.png);
	background-repeat: repeat;
}

/*********************************************************************/
/* Definition for Navbar                                             */
/*********************************************************************/

nav.navbar {
	background-image: var(--gradient-background);
}

nav.navbar a {
	color: var(--light-gray);
}

nav.navbar a:hover {
	color: var(--dark-gray);
}

nav.navbar div.dropdown-menu {
	background-image: var(--gradient-background);
}

nav.navbar div.dropdown-menu a:hover {
	color: var(--dark-blue);
}

nav.navbar span.navbar-toggler-icon {
	color: var(--light-gray);
}

/*********************************************************************/
/* Definition for table                                              */
/*********************************************************************/

table[selectable="true"] tbody tr {
	cursor: pointer;
}

table thead tr {
	background-image: var(--gradient-background);
	color: var(--light-gray);
}

table tbody tr, table tbody tr a {
	color: var(--dark-gray);
}

table tbody tr:nth-child(even) {
	background-color: var(--bg-table-row-even);
}

table tbody tr:nth-child(odd) {
	background-color: var(--bg-table-row-odd);
}

table tbody tr:hover {
	background-color: var(--light-gray);
}

table tbody tr.inactive-entity {
	color: gray;
}

table tbody tr.selected {
	background-color: var(--bg-selected);
	color: white;
}

table tbody tr.selected a {
	color: white;
}

table tbody tr.selected-red, table tbody tr.selected-error {
	background-color: var(--bg-selected-error);
	color: white;
}

table thead th.icon-title {
	width: 3%;
}

table tbody img.icon {
	cursor: pointer;
}

img.icon {
	width: 25px;
}

ul.pagination li.page-item span.page-link {
	color: var(--dark-blue);
}

ul.pagination li.page-item.active span.page-link {
	background-image: var(--gradient-background);
	background-color: unset;
	border-color: var(--border-color);
	color: white;
}

ul.pagination li.page-item.disabled span.page-link {
	color: #888;
}

/****************************************************************/
/* Containers definition                                        */
/****************************************************************/

div.container {
	border: 1px solid var(--border-color);
	border-radius: 5px;
	margin: 15px auto;
}

@media (max-width: 575.98px) {
	div.container {
		border: 0;
	}
}

div.container-title, div.container-form, div.container-buttons, div.container-summary, div.container-content {
	background-color: var(--bg-container);
	border-radius: 4px ;
	border: 1px solid var(--border-color);
	padding: 15px;
	margin-bottom: 15px;
}

div.container-title {
	text-align: center;
	padding: 10px;
	margin: 15px 0;
}

div.container-form {
	padding-bottom: 0;
}

div.container-summary {
	display: grid;
}

div.container-summary > div.summary {
	text-align: right;
}

div.container-summary > div.summary > div.summary-col {
	display: inline-block;
}

div.container-summary > div.summary > div.summary-col > * {
	margin-bottom: 0;
}

div.container-summary > div.summary > div.summary-col > span.badge {
	min-width: 90px;
	font-size: 11pt;
}

/******************************************************************************/
/* Definitions for grid columns with break for screen size                    */
/******************************************************************************/
@media (max-width: 575.98px) {
	div.grid-1 { grid-template-columns: 1fr; }
	div.grid-2 { grid-template-columns: repeat(2, 1fr); }
	div.grid-3 { grid-template-columns: repeat(3, 1fr); }
	div.grid-4 { grid-template-columns: repeat(4, 1fr); }
	div.grid-7 { grid-template-columns: repeat(7, 1fr); }
}

@media (min-width: 576px) and (max-width: 767.98px) {
	div.grid-1, div.grid-sm-1 { grid-template-columns: 1fr; }
	div.grid-2, div.grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
	div.grid-3, div.grid-sm-3 { grid-template-columns: repeat(3, 1fr); }
	div.grid-4, div.grid-sm-4 { grid-template-columns: repeat(4, 1fr); }
	div.grid-7, div.grid-sm-7 { grid-template-columns: repeat(7, 1fr); }
}

@media (min-width: 768px) and (max-width: 991.98px) {
	div.grid-1, div.grid-sm-1, div.grid-md-1 { grid-template-columns: 1fr; }
	div.grid-2, div.grid-sm-2, div.grid-md-2 { grid-template-columns: repeat(2, 1fr); }
	div.grid-3, div.grid-sm-3, div.grid-md-3 { grid-template-columns: repeat(3, 1fr); }
	div.grid-4, div.grid-sm-4, div.grid-md-4 { grid-template-columns: repeat(4, 1fr); }
	div.grid-7, div.grid-sm-7, div.grid-md-7 { grid-template-columns: repeat(7, 1fr); }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	div.grid-1, div.grid-sm-1, div.grid-md-1, div.grid-lg-1 { grid-template-columns: 1fr; }
	div.grid-2, div.grid-sm-2, div.grid-md-2, div.grid-lg-2 { grid-template-columns: repeat(2, 1fr); }
	div.grid-3, div.grid-sm-3, div.grid-md-3, div.grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
	div.grid-4, div.grid-sm-4, div.grid-md-4, div.grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
	div.grid-7, div.grid-sm-7, div.grid-md-7, div.grid-lg-7 { grid-template-columns: repeat(7, 1fr); }
}

@media (min-width: 1200px) {
	div.grid-1, div.grid-sm-1, div.grid-md-1, div.grid-lg-1, div.grid-xl-1 { grid-template-columns: 1fr; }
	div.grid-2, div.grid-sm-2, div.grid-md-2, div.grid-lg-2, div.grid-xl-2 { grid-template-columns: repeat(2, 1fr); }
	div.grid-3, div.grid-sm-3, div.grid-md-3, div.grid-lg-3, div.grid-xl-3 { grid-template-columns: repeat(3, 1fr); }
	div.grid-4, div.grid-sm-4, div.grid-md-4, div.grid-lg-4, div.grid-xl-4 { grid-template-columns: repeat(4, 1fr); }
	div.grid-7, div.grid-sm-7, div.grid-md-7, div.grid-lg-7, div.grid-xl-7 { grid-template-columns: repeat(7, 1fr); }
}

/**************************************************************/
/* Definitions for radio group                                */
/**************************************************************/
div.radio-group, div.check-group {
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	line-height: 1.5rem;
	padding: 0.375rem 0.75rem;
	display: grid;
}

div.radio-group > label, div.check-group > label {
	margin-bottom: 0;
	cursor: pointer;
}

/************************************************************************/
/* Buttons with margin inside the form                                  */
/************************************************************************/
@media (max-width: 575.98px) {
	.form-btn-margin {
		margin-top: 32px;
	}
}
@media (min-width: 576px) and (max-width: 767.98px) {
	.form-btn-margin, .form-btn-margin-sm {
		margin-top: 32px;
	}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.form-btn-margin, .form-btn-margin-sm, .form-btn-margin-md {
		margin-top: 32px;
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.form-btn-margin, .form-btn-margin-sm, .form-btn-margin-md, .form-btn-margin-lg {
		margin-top: 32px;
	}
}
@media (min-width: 1200px) {
	.form-btn-margin, .form-btn-margin-sm, .form-btn-margin-md, .form-btn-margin-lg, .form-btn-margin-xl {
		margin-top: 32px;
	}
}

/*********************************************************************/
/* Buttons inside the container                                      */
/*********************************************************************/
div.container div.container-buttons {
	display: grid;	
	grid-gap: 4px;
}
@media (max-width: 575.98px) {
	div.container div.container-buttons {
		grid-template-columns: 1fr;
	}
	div.container .container-buttons button,
	div.container .container-buttons a.btn { 
		font-size: 14pt;
	}
}
@media (min-width: 576px) and (max-width: 767.98px) {
	div.container div.container-buttons {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	div.container div.container-buttons {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	div.container div.container-buttons {
		grid-template-columns: repeat(6, 1fr);
	}
}
@media (min-width: 1200px) {
	div.container div.container-buttons {
		grid-template-columns: repeat(7, 1fr);
	}
}

/*********************************************************************/
/* Buttons inside container-fluid                                    */
/*********************************************************************/
@media (max-width: 575.98px) {
	div.container-fluid .container-buttons { 
		grid-template-columns: 1fr;
	}
	div.container-fluid .container-buttons button,
	div.container-fluid .container-buttons a.btn { 
		font-size: 14pt;
	}
}
@media (min-width: 576px) and (max-width: 599.99px) {
	div.container-fluid .container-buttons { 
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 600px) and (max-width: 799.99px) {
	div.container-fluid .container-buttons { 
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 800px) and (max-width: 899.99px) {
	div.container-fluid .container-buttons { 
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 900px) and (max-width: 999.99px) {
	div.container-fluid .container-buttons { 
		grid-template-columns: repeat(5, 1fr);
	}
}
@media (min-width: 1000px) and (max-width: 1099.99px) {
	div.container-fluid .container-buttons { 
		grid-template-columns: repeat(6, 1fr);
	}
}
@media (max-width: 1099.99px) {
	div.container-fluid .container-buttons { 
		display: grid;	
		grid-gap: 4px;
	}
}
@media (min-width: 1100px) {
	div.container-fluid .container-buttons { 
		display: flex;
		flex-wrap: wrap;
		padding: 13px;
	}

	div.container-fluid .container-buttons button, 
	div.container-fluid .container-buttons a.btn { 
		min-width: 160px;
		margin: 2px;
	}
}

/********************************************************************/
/* Definition for form-group div with flex buttons                  */
/********************************************************************/
div.form-group-btn {
	display: flex;
}

div.form-group-btn button {
	flex: 1;
	margin-right: 4px;
}

div.form-group-btn button:last-child {
	margin-right: 0;
}

/********************************************************************/
/* Definition for group of buttons                                  */
/********************************************************************/
div.btn-group-flex {
	display: flex;
}

div.btn-group-flex button {
	flex: 1;
	border-right-width: 0;
	border-radius: 0;
}

div.btn-group-flex button:first-child {
	border-radius: 0.25rem 0 0 0.25rem;
}

div.btn-group-flex button:last-child {
	border-right-width: 1px;
	border-radius: 0 0.25rem 0.25rem 0;
}

/*******************************************************************/
/* Buttons colors                                                  */
/*******************************************************************/
.btn {
	color: var(--dark-blue);
	background-color: #ffffff;
	border: var(--dark-blue) solid 1px;
}

.btn:hover:not(:disabled), .btn.selected {
	background-color: #3e8bbf;
	color: #ffffff;
}

.btn-blue, .btn-save, .btn-return { 
	background-color: #1296E8; 
	border: #0F8AD6 solid 1px;
	color: #fff;
}

.btn-blue:hover:not(:disabled), .btn-save:hover:not(:disabled), .btn-return:hover:not(:disabled) { 
	background-color: #0F8AD6; 
	color: #fff;
}

.btn-red, .btn-cancel { 
	background-color: #E66C6E; 
	border: #ED575A solid 1px;
	color: #fff;
}

.btn-red:hover:not(:disabled), .btn-cancel:hover:not(:disabled) { 
	background-color: #ED575A; 
	color: #fff;
}

.btn-green { 
	background-color: #429E61; 
	border: #158F3E solid 1px;
	color: #fff;
}

.btn-green:hover:not(:disabled) { 
	background-color: #158F3E; 
	color: #fff;
}

/****************************************************************/
/* Color definition for labels, titles and inputs               */
/****************************************************************/

h1, h2, h3, h4, h5, h6, p, span, label, select, input {
	color: var(--dark-gray);
}

/* Accordion definitions */
div.accordion {
	margin-bottom: 15px;
}

div.tab-content {
	padding-top: 15px;
}

/* Checkbox using a whole row */
div.form-checkbox input {
	display: inline;
	width: auto;
/* 	margin-bottom: 16px; */
}

div.form-checkbox label {
	cursor: pointer;
}

@media (max-width: 575.98px) {
	.cbm { margin-top: 45px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
	.cbm-sm { margin-top: 45px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.cbm-md { margin-top: 45px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.cbm-lg { margin-top: 45px; }
}
@media (min-width: 1200px) {
	.cbm-xl { margin-top: 45px; }
}

/**************************************************************/
/* These setting are here to fix IOS problems on input        */
/**************************************************************/
input[type="file"] {
	height: 38px;
	padding: 3px;
}

input[type="date"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em; 
    height: 38px;
    min-width: 95%; 
}

select {
	cursor: pointer;
}

/* Settings for the sign in view */
.login-container {
    margin: 10% auto;
    max-width: 500px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.15);
}

.login-container .login-head {
    text-align: center;
    background: var(--gradient-background);
    padding: 10px 0;
    border-radius: 4px 4px 0 0;
}

.login-container .login-head > h3 {
    margin: 0;
    color: white;
}

.login-container .login-body {
    background-color: white;
    padding: 15px 15px 1px 15px;
    border-radius: 0 0 4px 4px;
}

.login-container input {
	font-size: larger;
}

.login-container .btn-container input.btn {
	min-width: 200px;
}

/**************************************************************/
/* Versions page definitions                                  */
/**************************************************************/
div.version-container {
	background-color: var(--bg-container);
	border-radius: 4px ;
	border: 1px solid var(--border-color);
	padding: 15px;
	margin-bottom: 15px;
}

div.version-container span.title {
	color: var(--dark-blue);
	font-size: 13pt;
	font-weight: bold;
}

div.version-container ul {
	padding-left: 20px;
	margin-bottom: 0;
}

div.version-container li {
	border-bottom: solid 1px var(--border-color);
	list-style: decimal;
	font-style: italic;
	padding: 0.5em 0;
}

div.version-container li:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

div.version-container li a {
	font-weight: bold;
	color: var(--dark-blue);
}

div.version-container li a:hover {
	color: var(--light-blue);
}

/*************************************************************/
/* Definitions for the                                  */
/*************************************************************/
div.modal-content {
	border-radius: 5px;
}

div.modal-header {
	background-color: #3E7295;
	border-radius: 3px 3px 0 0;
	padding: 5px 10px;
	text-align: center;
}

div.modal-header > h3, div.modal-header > h4, div.modal-header > h5 {
	width: 100%;
	color: #fff;
}

div.modal-header button.close span {
	color: white;
}

div.modal-footer {
	padding: 10px;
}

div.modal-footer button {
	min-width: 120px;
}

@media (min-width: 576px) { 
	div.modal-footer button {
		min-width: 146.33px;
	}
}


/* Definitions for the message-dialog modal*/
div.message-dialog {
	z-index: 5000;
	background: rgba(0, 0, 0, 0.3);
}

div.message-dialog .modal-header {}

div.message-dialog .modal-body {
	text-align: center;
	font-weight: 500;
}

div.message-dialog .modal-footer {
	justify-content: center;
}

/* Seetings for vertical scroll table */
div.vertical-scroll-table {
	max-height: 600px;
	overflow-y: auto;
	margin-bottom: 15px;
}

div.vertical-scroll-table > .table {
	margin-bottom: 0;
}

/************************************************************************************/
/* Tag colors definition                                                            */
/************************************************************************************/

.tag-white {
	background-color: #ffffff; 
	border: #DDDDDD solid 1px;
	color: var(--dark-gray);
}

.tag-white:hover {
	background-color: #eeeeee; 
}

.tag-yellow {
	background-color: #f9f1ad; 
	border: #e0c982 solid 1px;
	color: var(--dark-gray);
}

.tag-yellow:hover {
	background-color: #f1e587; 
}

.tag-blue { 
	background-color: #92cef3; 
	border: #7d9db1 solid 1px;
	color: var(--dark-gray);
}

.tag-blue:hover { 
	background-color: #5ebef9; 
}

.tag-green { 
	background-color: #caffdc; 
	border: #89a091 solid 1px;
	color: var(--dark-gray);
}

.tag-green:hover { 
	/*background-color: #9cecb7; */
	background-color: #90f790; 
}

.tag-red { 
	background-color: #f3c4c5; 
	border: #d09697 solid 1px;
	color: var(--dark-gray);
}

.tag-red:hover { 
	background-color: #efb0b2; 
}

.tag-purple { 
	background-color: #cdd5ff;
	border: #757ead solid 1px;
	color: var(--dark-gray);
}

.tag-purple:hover { 
	background-color: #a8b2e6; 
}

.tag-orange { 
	background-color: #ffd383;
	border: #a2721b solid 1px;
	color: var(--dark-gray);
}

.tag-orange:hover { 
	background-color: #f7c468; 
}

/*********************************************************/
/* Definitions for the calendar                          */
/*********************************************************/

.calendar {
	margin-top: 10px;
}

.calendar .calendar-content {
	padding: 2px;
}

.calendar .calendar-col {
	border: solid gray 1px;
	border-radius: 3px 3px 0 0;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	transition: 200ms;
}

.calendar .calendar-col:hover {
	box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3);
	
}

.calendar .calendar-col-title {
	border-bottom: solid var(--border-color) 1px;
	text-align: center;
	font-size: 12pt;
	font-weight: 600;
	padding: 3px;
	background: var(--light-gray);
}

.calendar .calendar-col-content {
	flex: 1;
	cursor: pointer;
}

.calendar .today {
	background: #5CB9F7B3;
}

.calendar .schedule {
	border-radius: 3px;
	padding: 10px;
	margin: 10px;
	box-shadow: -3px 3px 8px 1px rgba(16, 16, 16, 0.3);
	transition: 0.4s;
}

.calendar .schedule * {
	color: #555;
}

.calendar .schedule[draggable="true"] {
	cursor: move;
}

.calendar .schedule[draggable="false"] {
	cursor: auto;
}

.calendar .schedule .schedule-title {
	font-weight: 600;
}

.calendar .schedule span {
	display: block;
	/*color: white;*/
}

/* Mobile view */
@media (max-width: 899.99px) {

	.calendar .calendar-days-of-week {
		display: none;
	}

	.calendar .calendar-row {
		display: flex;
		flex-direction: column;
		border: 1px solid gray;
		margin-bottom: 5px;
	}

	.calendar .calendar-row .week-title {
		background: var(--gradient-background);
		line-height: 50px;
		padding: 0 1em;
		color: white;
		font-weight: 600;
		cursor: pointer;
	}
	
	.calendar .calendar-row .week-days {
		padding: 1em;
	}

    .calendar .calendar-col {
		min-height: 130px;
		margin-bottom: 0;
		border-style: solid;
		border-color: gray;
		border-width: 1px 1px 0 1px;
		border-radius: 0;
	}
	
	.calendar .calendar-col:last-child {
        border-bottom-width: 1px;
			
	}
}

@media (min-width: 900px) {

	.calendar .calendar-days-of-week {
		display: flex;
		justify-content: space-between; 
		margin-bottom: 10px;
		padding: 2px;
	}

	.calendar .day-of-week {
		background: var(--gradient-background);
		flex-basis: 13.9%;
		height: 30px;
		display: flex;
	}

	.calendar .day-of-week span {
		margin: auto;
		font-size: 14pt;
		font-weight: 600;
		color: white;
	}

	.calendar .calendar-content {
		max-height: 800px;
	}

	.calendar .calendar-row .week-title {
        display: none;
	}
	
	.calendar .calendar-row .week-days {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.calendar .calendar-col {
		min-height: 200px;
		flex-basis: 13.9%;
	}
}

.calendar .hide-schedule {
	display: none;
}

.calendar .dragging-column-hover {
	border: dashed 2px gray;
}

/***************************************************************/
/* Definition for UL dropdown                                  */
/***************************************************************/
ul.dropdown {
	background-color: var(--dark-blue);
	position: absolute;
	float: left;
	top: 200px;
	left: 500px;
	padding: 7px 0;
	margin: 0;
	min-width: 150px;
	border-radius: 4px;
	visibility: hidden;
}

ul.dropdown.visible {
	visibility: visible;
}

/* https://www.w3schools.com/css/css_tooltip.asp */

ul.dropdown.top::after {
	content: "";
	position: absolute;
	top: 100%; 
	left: 50%;
	margin-left: -60px;
	border-width: 10px;
	border-style: solid;
	border-color: var(--dark-blue) transparent transparent transparent;
}

ul.dropdown.bottom::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent var(--dark-blue) transparent;
}

ul.dropdown li {
	list-style: none;
	line-height: 40px;
	color: white;
	padding: 0 10px;
	transition: background 400ms ease;
}

ul.dropdown li a { 
	color: white;
	text-decoration: none;
	display: block;
}

ul.dropdown li:hover {
	background-color: white;
	color: var(--dark-blue);
}

ul.dropdown li:hover a {
	color: var(--dark-blue);	
}

/*************************************************************************/
/* Definition for progress bar and loading bar                           */
/*************************************************************************/

.progress-bar-container, .loading-bar-container {
	margin: auto;
	background: var(--gradient-background);
	padding: 2em;
	border-radius: 6px;
	box-shadow: var(--box-shadow);
}

.progress-bar-container {
		width: 600px;
}

.loading-bar-container {
	min-width: 300px;
}

@media (max-width: 575.98px) {
	.progress-bar-container {
		width: 350px;
	}
}

.progress-bar-container span, .loading-bar-container span {
	color: var(--light-gray);
	font-size: 16pt;
  font-weight: 500;
  text-transform: none;
}

.loading-bar-container span {
	display: block;
	text-align: center;
}

.progress-bar-container .progress-bar {
	width: 100%;
	padding: 3px;
	border: solid var(--light-gray) 1px;
	margin-top: 2em;
	border-radius: 20px;
	background: none;
}

.progress-bar-container .progress-bar-bar {
	height: 15px;
	background: var(--light-gray);
	border-radius: 20px;
	transition: 50ms;
	text-align: right;
	width: 0%;
}

.progress-bar-container .progress-bar-bar::before {
	content: attr(percent);
	color: var(--light-gray);
	font-size: 12pt;
	font-weight: 600;
 	position: relative;
	top: -2em;
	padding: 0 5px;
}

.spinner {
  margin: 30px auto 10px auto;
  height: 50px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: white;
  height: 100%;
  width: 8px;
  display: inline-block;
	margin: 0 3px;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.spinner .rect6 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.spinner .rect7 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.spinner .rect8 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.spinner .rect9 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.spinner .rect10 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.spinner .rect11 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.spinner .rect12 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/****************************************************************/
/* Settings definitions                                         */
/****************************************************************/

div.setting-container:last-child div.form-group:last-child {
	margin-bottom: 0;
}

div.setting-container span.setting-title {
	font-size: 12pt;
	font-weight: 600;
	margin-bottom: 5px;
	display: block;
	color: white;
	background: var(--gradient-background);
	padding: 5px 10px;
}

/****************************************************************/
/* Gallery of pictures                                          */
/****************************************************************/

#gallery {
	display: flex;
	flex-direction: column;
	padding: 1em;
}

#gallery div.group-job {
	background-color: rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
	border-radius: 5px;
	border-color: var(--border-color);
	border-width: 1px;
	border-style: solid;
}

#gallery div.group-job-title {
	background-image: var(--gradient-background);
	font-size: 13pt;
	font-weight: bold;
	color: var(--dark-gray);
	border-radius: 5px 5px 0 0;
	padding: 0.5em 1em;
	border-color: var(--border-color);
	border-width: 0 0 1px 0;
	border-style: solid;
}

#gallery div.group-job-content {
	display: grid;
	grid-gap: 0.5em;
	padding: 1em;
}

#gallery div.group-job-content div.picture {
	background: var(--light-gray);
	padding: 0.4em;
	box-sizing: border-box;
	border-radius: 3px;
	transition: 150ms;
}

#gallery div.group-job-content div.picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
	cursor: pointer;
}

#gallery div.group-job-content div.picture:hover {
	box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.4)
}

@media (min-width: 1400px) {
	#gallery div.group-job-content {
		grid-template-columns: repeat(8, 1fr);
	}
    #gallery div.group-job-content div.picture {
	   height: 150px;
	}
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
	#gallery div.group-job-content {
		grid-template-columns: repeat(7, 1fr);
	}
    #gallery div.group-job-content div.picture {
	   height: 150px;
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	#gallery div.group-job-content {
		grid-template-columns: repeat(6, 1fr);
	}
    #gallery div.group-job-content div.picture {
	   height: 150px;
	}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	#gallery div.group-job-content {
		grid-template-columns: repeat(5, 1fr);
	}
    #gallery div.group-job-content div.picture {
	   height: 150px;
	}
}
@media (min-width: 576px) and (max-width: 767.98px) {
	#gallery div.group-job-content {
		grid-template-columns: repeat(4, 1fr);
	}
    #gallery div.group-job-content div.picture {
	   height: 150px;
	}
}
@media (max-width: 575.98px) {
	#gallery div.group-job-content {
		grid-template-columns: repeat(3, 1fr);
	}
    #gallery div.group-job-content div.picture {
	   height: 100px;
	}
}

/****************************************************************/
/* Pictures Viewer Modal                                        */
/****************************************************************/

div.picture-viewer {
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
}

div.picture-viewer div.picture-viewer-container {
	display: flex;
	aspect-ratio: 5/3;
	max-width: 95%;
	max-height: 95%;
	position: relative;
}

div.picture-viewer i#close-picture-viewer {
	color: white;
	position: absolute;
	top: 26px;
	right: 15px;
	cursor: pointer;
}

div.picture-viewer div.side-button {
	color: white;
	height: 100%;
	padding: 0 1.5em;
	align-items: center;
	cursor: pointer;
	position: absolute;
	z-index: 5000;
}

div.picture-viewer div.side-button.left {
	border-radius: 5px 0 0 5px;
}

div.picture-viewer div.side-button.right {
	border-radius: 0 5px 5px 0;
	right: 0;
}

div.picture-viewer div.side-button i {
	font-size: 26pt;
	transition: all 0.3s;
	opacity: 0;
}

div.picture-viewer div.side-button:hover i {
	transform: scale(2);
}

div.picture-viewer div.img {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: black;
	box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.2);
}

div.picture-viewer img {
	border-radius: 4px;
	max-width: 96%;
	max-height: 96%;
	opacity: 0;
}

.picture-fade-in {
	animation: picturefadeIn 500ms forwards;
}

.picture-fade-out {
	animation: picturefadeOut 500ms forwards;
}

@keyframes picturefadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes picturefadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* Error container */
div.error-container {
	border: none;
}

div.error-status {
	text-align: center;
	font-size: 22pt;
	font-weight: bold;
	color: var(--dark-blue);
}

div.error-message {
	text-align: center;
	font-size: 18pt;
	color: var(--dark-blue);
}