.ContentPageRubTitle {
		font-size: 30px;
		font-family: "century Gothic";
		color: #373737;
		text-shadow: 0.8px 0.8px 0px #CDCDCD;
		letter-spacing: 1px;
		margin-top: 20px;
		width: 100%;
		float: left;
	}

	.ContentPageRubSubTitle {
		font-size: 15px;
		font-family: "century Gothic";
		color: #373737;
		letter-spacing: 1px;
		font-style: italic;
		width: 100%;
		float: left;
	}


	body {
		margin: 0px;
		font-family: "century Gothic"; /*Helvetica,Arial,sans-serif;*/
		font-size: 12px;
		background-color: #f5f3f3;
	}

	.defaultBody {
		background-color: #ffffff !important;
	}




	.contentPageMainFrame {
		/*margin-left: auto;
	margin-right: auto;
	margin-top:15px;
	width:90%;*/
		height: -moz-calc(100% - 38px);
		height: -webkit-calc(100% - 38px);
		height: calc(100% - 38px);
		margin-left: 70px;
		margin-top: 18px;
		overflow: hidden;
		position: absolute;
		width: -moz-calc(100% - 72px);
		width: -webkit-calc(100% - 72px);
		width: calc(100% - 72px);
		margin-right: auto;
	}

		.contentPageMainFrame:hover {
			overflow: auto;
		}

	.contentPageMainFrameWithWorkflow {
		/*margin-left: auto;
	margin-right: auto;
	margin-top:15px;
	width:90%;*/
		height: -moz-calc(100% - 18px);
		height: -webkit-calc(100% - 18px);
		height: calc(100% - 18px);
		margin-left: 70px;
		padding-right: 70px;
		margin-top: 18px;
		overflow: hidden;
		position: relative;
		width: 80%;
	}

	.contentPageWorkflows {
		/*left: -moz-calc(60% );
	left: -webkit-calc(60% );
    left: calc(60%);*/
		padding-left: 00px;
		height: -moz-calc(100% - 18px);
		height: -webkit-calc(100% - 18px);
		height: calc(100% - 18px);
		margin-left: 10px;
		/*margin-top: 18px;*/
		overflow: hidden;
		position: relative;
	}


	#OpenArchives {
		width: 100%;
	}

	.archiveAccessible {
		width: 32px;
		height: 32px;
		z-index: 1000;
		float: left;
		position: relative;
		left: 26px;
		top: 30px;
	}

	.errorOnArchive {
		background-image: url(Images/bullet_error.png);
		background-size: 24px;
		background-repeat: no-repeat;
		background-position: 0px 10px;
		width: 32px;
		height: 64px;
		z-index: 100; /* à 1000 cela passe au dessus de la barre de naviguation lorsqu'elle descend */
		float: left;
		position: relative;
		left: 34px;
		top: 24px;
	}

	.maintenanceOnArchive {
		background-image: url(Images/bullet_maintenance.png);
		background-size: 24px;
		background-repeat: no-repeat;
		background-position: 0px 10px;
		width: 32px;
		height: 64px;
		z-index: 100; /* à 1000 cela passe au dessus de la barre de naviguation lorsqu'elle descend */
		float: left;
		position: relative;
		left: 34px;
		top: 24px;
	}

	.pendingOnArchive {
		background-image: url(Images/bullet_maintenance.png);
		background-size: 24px;
		background-repeat: no-repeat;
		background-position: 0px 10px;
		width: 32px;
		height: 64px;
		z-index: 100; /* à 1000 cela passe au dessus de la barre de naviguation lorsqu'elle descend */
		float: left;
		position: relative;
		left: 34px;
		top: 24px;
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.blink {
		animation: blink 2s;
		-webkit-animation: blink 2s;
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
	}

	.archiveDiv {
		height: 80px;
		width: 250px;
		float: left;
		box-shadow: 0 0.18rem 0 0 #d7d7d7;
		border-left: 1px solid #d7d7d7;
		border-right: 1px solid #d7d7d7;
		border-top: 1px solid #d7d7d7;
		border-radius: 4px 4px 4px 4px;
		-moz-border-radius: 4px 4px 4px 4px;
		-webkit-border-radius: 4px 4px 4px 4px;
		background-color: White;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 10px;
		margin-top: 5px;
	}

		.archiveDiv:hover {
			height: 80px;
			width: 250px;
			float: left;
			box-shadow: 0 0.18rem 0 0 #5897fb;
			border-left: 1px solid #d7d7d7;
			border-right: 1px solid #d7d7d7;
			border-top: 1px solid #d7d7d7;
			border-radius: 12px 4px 4px 4px;
			-moz-border-radius: 12px 4px 4px 4px;
			-webkit-border-radius: 12px 4px 4px 4px;
			background-color: White;
			margin-left: 5px;
			margin-right: 5px;
			margin-bottom: 10px;
			margin-top: 5px;
			cursor: pointer;
		}

	.archiveDivDefault {
		height: 80px;
		width: 250px;
		float: left;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 10px;
		margin-top: 5px;
	}

	.archiveIcon {
		float: left;
		margin-right: 10px;
		position: relative;
		left: -28px;
		top: 9px;
	}

	.archiveLabel {
		margin-top: 10px;
		position: relative;
		left: -32px;
	}

	.archiveName {
		padding-top: 0px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.archiveDescription {
		font-style: italic;
		height: 20px;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.workflowAddLink {
		padding-left: 35px;
		top: -5px;
		position: relative;
	}

	.workflowIcon {
		float: left;
		margin-right: 10px;
		position: relative;
		top: 12px;
		height: 40px;
	}

	.workflowDiv {
		/*height:80px;*/
		width: 100%;
		float: left;
		padding-top: 5px;
		padding-right: 10px;
		padding-bottom: 5px;
	}

	.workflowLabel {
		margin-top: 10px;
		position: relative;
	}

	.workflowName {
		padding-top: 0px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.workflowDescription {
		font-style: italic;
		height: 20px;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}



	.red {
		color: Red;
	}

	#NoArchiveMessage {
		padding-top: 10px;
		padding-left: 10px;
		font-style: italic;
		font-size: 12px;
	}

	.PrivateArchives {
		width: 100%;
	}

	#datepicker {
		display: none;
	}

	@media (max-width: 700px) {
		.contentPageMainFrame {
			margin-top: 45px;
		}
	}

	.orderarchive {
		display: flex;
		flex-direction: column;
	}



@media (prefers-color-scheme: dark) {

	body {
		margin: 0px;
		font-family: "century Gothic"; /*Helvetica,Arial,sans-serif;*/
		font-size: 12px;
		background-color: #000000 !important;
	}

	.defaultBody {
		background-color: #404040 !important;
		color: white !important;
	}

	.ContentPageRubTitle {
		font-size: 30px;
		font-family: "century Gothic";
		color: #373737;
		text-shadow: 0.8px 0.8px 0px #CDCDCD;
		letter-spacing: 1px;
		margin-top: 20px;
		width: 100%;
		float: left;
	}

	.ContentPageRubSubTitle {
		font-size: 15px;
		font-family: "century Gothic";
		color: #373737;
		letter-spacing: 1px;
		font-style: italic;
		width: 100%;
		float: left;
	}





	.contentPageMainFrame {
		/*margin-left: auto;
	margin-right: auto;
	margin-top:15px;
	width:90%;*/
		height: -moz-calc(100% - 38px);
		height: -webkit-calc(100% - 38px);
		height: calc(100% - 38px);
		margin-left: 70px;
		margin-top: 18px;
		overflow: hidden;
		position: absolute;
		width: -moz-calc(100% - 72px);
		width: -webkit-calc(100% - 72px);
		width: calc(100% - 72px);
		margin-right: auto;
	}

		.contentPageMainFrame:hover {
			overflow: auto;
		}

	.contentPageMainFrameWithWorkflow {
		/*margin-left: auto;
	margin-right: auto;
	margin-top:15px;
	width:90%;*/
		height: -moz-calc(100% - 18px);
		height: -webkit-calc(100% - 18px);
		height: calc(100% - 18px);
		margin-left: 70px;
		padding-right: 70px;
		margin-top: 18px;
		overflow: hidden;
		position: relative;
		width: 80%;
	}

	.contentPageWorkflows {
		/*left: -moz-calc(60% );
	left: -webkit-calc(60% );
    left: calc(60%);*/
		padding-left: 00px;
		height: -moz-calc(100% - 18px);
		height: -webkit-calc(100% - 18px);
		height: calc(100% - 18px);
		margin-left: 10px;
		/*margin-top: 18px;*/
		overflow: hidden;
		position: relative;
	}


	#OpenArchives {
		width: 100%;
	}

	.archiveAccessible {
		width: 32px;
		height: 32px;
		z-index: 1000;
		float: left;
		position: relative;
		left: 26px;
		top: 30px;
	}

	.errorOnArchive {
		background-image: url(Images/bullet_error.png);
		background-size: 24px;
		background-repeat: no-repeat;
		background-position: 0px 10px;
		width: 32px;
		height: 64px;
		z-index: 100; /* à 1000 cela passe au dessus de la barre de naviguation lorsqu'elle descend */
		float: left;
		position: relative;
		left: 34px;
		top: 24px;
	}

	.maintenanceOnArchive {
		background-image: url(Images/bullet_maintenance.png);
		background-size: 24px;
		background-repeat: no-repeat;
		background-position: 0px 10px;
		width: 32px;
		height: 64px;
		z-index: 100; /* à 1000 cela passe au dessus de la barre de naviguation lorsqu'elle descend */
		float: left;
		position: relative;
		left: 34px;
		top: 24px;
	}

	.pendingOnArchive {
		background-image: url(Images/bullet_maintenance.png);
		background-size: 24px;
		background-repeat: no-repeat;
		background-position: 0px 10px;
		width: 32px;
		height: 64px;
		z-index: 100; /* à 1000 cela passe au dessus de la barre de naviguation lorsqu'elle descend */
		float: left;
		position: relative;
		left: 34px;
		top: 24px;
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.blink {
		animation: blink 2s;
		-webkit-animation: blink 2s;
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
	}

	.archiveDiv {
		height: 80px;
		width: 250px;
		float: left;
		box-shadow: 0 0.18rem 0 0 #6d6c6c;
		border-left: 1px solid #868181;
		border-right: 1px solid #868181;
		border-top: 1px solid #868181;
		border-radius: 4px 4px 4px 4px;
		-moz-border-radius: 4px 4px 4px 4px;
		-webkit-border-radius: 4px 4px 4px 4px;
		background-color: #585757;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 10px;
		margin-top: 5px;
	}

		.archiveDiv:hover {
			height: 80px;
			width: 250px;
			float: left;
			box-shadow: 0 0.18rem 0 0 #5897fb;
			border-left: 1px solid #d7d7d7;
			border-right: 1px solid #d7d7d7;
			border-top: 1px solid #d7d7d7;
			border-radius: 12px 4px 4px 4px;
			-moz-border-radius: 12px 4px 4px 4px;
			-webkit-border-radius: 12px 4px 4px 4px;
			background-color: #7d7c7c;
			margin-left: 5px;
			margin-right: 5px;
			margin-bottom: 10px;
			margin-top: 5px;
			cursor: pointer;
		}

	.archiveDivDefault {
		height: 80px;
		width: 250px;
		float: left;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 10px;
		margin-top: 5px;
	}

	.archiveIcon {
		float: left;
		margin-right: 10px;
		position: relative;
		left: -28px;
		top: 9px;
	}

	.archiveLabel {
		margin-top: 10px;
		position: relative;
		left: -32px;
	}

	.archiveName {
		padding-top: 0px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #d8d6d6;
	}

	.archiveDescription {
		font-style: italic;
		height: 20px;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		color: #b5b1b1;
	}

	.workflowAddLink {
		padding-left: 35px;
		top: -5px;
		position: relative;
	}

	.workflowIcon {
		float: left;
		margin-right: 10px;
		position: relative;
		top: 12px;
		height: 40px;
	}

	.workflowDiv {
		/*height:80px;*/
		width: 100%;
		float: left;
		padding-top: 5px;
		padding-right: 10px;
		padding-bottom: 5px;
	}

	.workflowLabel {
		margin-top: 10px;
		position: relative;
	}

	.workflowName {
		padding-top: 0px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #d8d6ce;
	}

	.workflowDescription {
		font-style: italic;
		height: 20px;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		color: #aaa;
	}



	.red {
		color: Red;
	}

	#NoArchiveMessage {
		padding-top: 10px;
		padding-left: 10px;
		font-style: italic;
		font-size: 12px;
	}

	.PrivateArchives {
		width: 100%;
	}

	#datepicker {
		display: none;
	}

	@media (max-width: 700px) {
		.contentPageMainFrame {
			margin-top: 45px;
		}
	}

	.orderarchive {
		display: flex;
		flex-direction: column;
	}
}