/* index Administration */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.no-outline:focus
{
  outline: none;
}

html 
{
  	height: 100%;
  	overflow : hidden;
}

body 
{	
    text-align: center;
    height: 100%;
    width: 100%;
    margin-left: 0;
	background-color : #eaeaea !important;
    font-family: 'Open Sans', sans-serif !important;
    background-size: auto 100%;
}

body.transition
{
    opacity: 0;
/*    transform: translateX(-200px);*/
}

body.transition.is-ready
{
    opacity: 1;
/*    transform: translateX(0);*/
    transition-duration: 0.3s;
}

#newlogo 
{
	cursor: pointer;
	height : 6em;
	width : 25em;
	background-image: url("images/logo-dd-dark.svg");
	background-repeat: no-repeat;
	position: relative;
	z-index: 100;
}

#newLogoLink
{
	display : inline-block;
	width : 100%;
	height : 100%;
}

#WelcomeMsgIndex
{
	padding-top: 110px;
}

.background2022 
{	
	height: 725px;
	margin-top: calc((80vh - 725px) / 2 );
	margin-left: auto;
	margin-right: auto;
	background-image: url(images/dd-background-light.svg);
	background-repeat: no-repeat;
	background-position: center center;
}

.ddsection 
{
    margin-top: 20px;
}

body.transition
{
    opacity: 0;
/*    transform: translateX(-200px);*/
}

body.transition.is-ready
{
    opacity: 1;
/*    transform: translateX(0);*/
    transition-duration: 0.3s;
    text-align: center;
}

@media (min-aspect-ratio: 41/23) 
{
	body 
	{
		background-size: 100% auto;
	}
} /*end min aspect ration 41/23*/

.col-4, .col-8
{
	padding : 0 5px 0 5px !important;
}

.rowConfig
{
	padding : 0 5px 0 5px !important;
}

#domaine 
{	
	color: #515151;
	font-size: 12px;
	font-weight: bold;
}

#selectDomaine 
{	
    font-size: 12px;
	border: none;
	background-color: transparent;
	color: #515151;
	text-align: center;	 
	cursor : pointer;
	margin-top : 30px;
}

#selectDomaine option 
{		
    font-size: 12px;
	color: #515151;	
}

a.welcomepage:hover   
{		
	cursor : help;
}

#welcomemsg 
{	
	color : #515151;
	font-size : 14px;
	font-weight : bold;
	text-align: center;
}

#menuindex 
{	
	margin-left: auto;
	margin-right: auto;
	width : 450px;
	font-family: 'Open Sans', sans-serif;		
}

.tileShadow 
{
	/*box-shadow: 0 0 15px #dadada;*/
	border: 6px solid #11a0d9;
}

.aLinkSizing
{
	display: block;
	width: 100%;
	height: 100%;
	margin : inherit;
}

.aLinkSizing2
{
	display: block;
	width: 150px;
	height: 100%;
	margin : 0;
	padding: 0;
}

.spanCenter 
{
	display: block;
	width: 100px;
}

#btnconfig 
{	
	background-image : url("images/config24.svg");
	background-repeat: no-repeat;
	background-color : #ED7225;
	border-radius : 8px;
	background-size : 40%;
	background-position : left;
	cursor: pointer;
	color: white;
	font-weight : bold;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	padding: inherit;
}

#btnconfig:hover
{
	background-color : #DD631F;
}

#btnwebstudio 
{
	background-image : url("images/studio24.svg");
	background-repeat: no-repeat;
	background-size: 100%;
	height: 10.2em;
	width: 100%;
	background-color : #029293;
	border-radius : 8px;
	cursor: pointer;
	color: white;
	font-weight : bold;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	margin-bottom : 4px;
	padding: inherit;
}

#btnwebstudio:hover
{
	background-color : #02827E;
}

#btneditor 
{
	background-image : url("images/editor24.svg");	
	background-repeat: no-repeat;
	background-size: 100%;
	background-position : top;
	background-color : #13B8EA;
	height: 10.2em;
	width: 100%;
	border-radius : 8px;
	cursor: pointer;
	color: white;
	font-weight : bold;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	margin-top : 4%;
	margin-bottom : 5px;
	padding: inherit;
}

#btneditor:hover
{
	background-color : #0FAED3;
}

#btndashboard 
{	
	background-image : url("images/dashboard24.svg");
	background-repeat: no-repeat;
	background-size: 70%;
	height: 21em;
	width: 100%;
	border-radius : 8px;
	background-color: #11A0D9;
	background-position : center;
	cursor: pointer;
	color: white;
	font-weight : bold;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	margin-bottom : 10px;
	padding: inherit;
}

#btndashboard:hover
{
	background-color : #0E9FC1;
}

#settings 
{
	background-image : url("images/serveur24.svg");
	background-repeat: no-repeat;
	background-size: 80%;
	height: 190px;
	background-color: #11a0d9;
	background-position : top;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 150px;
} 

#users 
{	
	background-image : url("images/utilisateur24.svg");
	background-repeat: no-repeat;
	background-size: 80%;
	height: 190px;
	background-color: #11a0d9;
	background-position : top;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 150px;
} 

#docs 
{	
	background-image : url("images/documents24.svg");
	background-repeat: no-repeat;
	background-size: 80%;
	height: 190px;
	background-color: #11a0d9;
	background-position : top;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 150px;
}
 
 #backups 
 {	
	background-image : url("images/sauvegarde24.svg");
	background-repeat: no-repeat;
	background-size: 80%;
	height: 190px;
	background-color: #11a0d9;
	background-position : top;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 150px;
} 

 #backup 
 {	
	background-image : url("images/sauvegarde24.svg");
	background-repeat: no-repeat;
	background-size: 80%;
	height: 190px;
	background-color: #11a0d9;
	background-position : top;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 150px;
} 

 #restore 
 {	
	background-image : url("images/restore24.svg");
	background-repeat: no-repeat;
	background-size: 80%;
	height: 190px;
	background-color: #11a0d9;
	background-position : top;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 150px;
} 

 #license 
 {	
	background-image : url("images/licences24.svg");
	background-repeat: no-repeat;
	background-size: 80%;
	height: 190px;
	background-color: #11a0d9;
	background-position : top;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 150px;
} 

 #status 
 {
	background-image : url("images/etat24.svg");
	background-repeat: no-repeat;
	background-size: 80%;
	height: 190px;
	background-color: #11a0d9;
	background-position : top;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 150px;
}

.tileButton:hover 
{	
	opacity: 0.8;
}

.namecenterdiv 
{
	border: none;
	background-color: transparent;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	padding-top : 95%;
	font-size : 15px;
}

.namecenterdiv2 
{
	border: none;
	background-color: transparent;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	padding-top : 107%;
	font-size : 15px;
}

.nameCenterConfig 
{
	height: 60px;
	width: 100%;
	border: none;
	background-color: transparent;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	vertical-align: top;
	padding-top : 20px;
	font-size : 15px
}

div#SpanClassLittle 
{	
    padding-bottom: 3px;
    width: 30%;
    text-align: center;
    margin-left: 35%;
    background-color: white;
    color: black;
    border-radius: 16px;
    height: 20px;
    position: absolute;
    bottom: 0;
    line-height: 1;
}
 
a:hover 
{	
	text-decoration : none;
	color : #65868d;
}

a:link 
{	
	text-decoration : none;
	color : #515151;	
}

a:visited 
{
	text-decoration : none;
	color : #65868d;	
}

a 
{	
	text-decoration : none;	
}

#footer 
{
	padding-top: 60px;
	position: fixed;
	padding-bottom: 57px;
	width: 415px;
	height: 400px;
	text-align: left;
	margin-left: -90px;
	color: #515151;
	background-image: url("images/cube.svg");
	background-repeat: no-repeat;
	background-size: 450px 300px;
	top: 100%;
	margin-top: -240px;
	left: 0;
	margin-left: 0;
	padding-left: 20px;
	background-position: 0px -30px;
	font-size : 15px;
}

#footer2 
{	
	bottom: 0;
	position: absolute;
	background-color: white;
	width: 100%;
	font-size: 10px;
	color: #515151;
	text-align: center;  
}

.welcomepage 
{	
	font-size : 15px;
}

#foot a:link 
{	
	color : #515151;
	text-decoration : none;
}

#foot a:visited 
{	
	color : #65868d;
}

#foot a:hover 
{	
	color : orange;
}

#version 
{	
	font-size : 10px;
}

.title 
{	
	height: 100%;
	width: 100%;
	border: none;
	background-color: transparent;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-weight : bold;
	display: inline-block;
	vertical-align: top;
	padding-top : 125px;
	font-size : 15px;
}

#welcomemsgBackup 
{	
	color : #515151;
	font-weight : bold;
	font-size : 15px;
	display : inline-block;
	margin-top: 1%;
	width : 512px;
}

#mainTableConfig 
{	
	width : 520px;
	margin-top : 20px;
}

@media(max-width: 500px) 
{
	
	#mainTableConfig 
	{	
		width : 340px;
	}

	#WelcomeMsgConfig 
	{	
		padding-top : 30px !important;
	}
	
} /* end media max-width 500px*/


@media screen and (min-width : 640px) and (max-width : 1600px) 
{ 

	.background2022 
	{	
		margin-top: calc((74vh - 725px) / 2 );
	}

	.namecenterdiv 
	{	
		height: 50px;
		padding-top : 130px;
	}

	#namecenterdiv2 
	{	
		height: 50px;
		padding-top : 120px;
	}

	#welcomemsgBackup 
	{ 
		width : 512px;
	}	

} /*end medi min 640 width max width 1600*/ 

@media screen and (orientation: portrait) and (max-width: 640px) 
{
	#footer 
	{
		display: none;
	}

} /*end media portrait max width 640px*/ 

@media screen and (orientation: portrait) and (min-width: 640px)
{
	#footer 
	{
    	display: block;
    }
} /*end media portrait min width 640*/
 
@media screen and (orientation: portrait) and (min-height: 650px)
{
	#footer 
	{
    	display: block;
    }
} /* end media portrait min height 650) */

@media screen and (orientation: landscape) and (max-width: 1200px) 
{
	#footer 
	{
    	display: none;
    }
} /* end media landscapte max width 1200*/

@media screen and (orientation: landscape) and (min-height: 700px) 
{
	#footer 
	{
    	display: block;
  	}
} /*end media landscape min height 700*/

@media screen and (orientation: landscape) and (min-width: 1200px) 
{
	#footer 
	{
    	display: block;
	}
} /*and landscape min width 1200*/

@media screen and (max-height: 560px) 
{
	#WelcomeMsgIndex 
	{
        display: none;
    }
} /* and media max height 560*/

/* Media  (mobile */
@media screen and (max-width: 640px) 
{

	#WelcomeMsgIndex 
	{
        display: block;
        padding : 40px 0 40px 0;
    }

	.background2022 
	{
		height: 620px;
		margin-top: calc((90vh - 725px) / 2);
	}

	#newlogo 
	{
    	width: 100%;	
		margin : auto;
		height : 4em;
    	background-position: center;
	}

	#domaine 
	{
	    font-size: 12px;	
		color : #515151;
		margin-left: auto;
	    margin-right: auto;
		right: inherit;
	}
	
	#welcomemsg 
	{
		color : #515151;
		font-size : 12px;
		font-weight : bold;
	}

	#menuindex 
	{
		margin-top: 10%;
		width : 90%;
		height: 25em;
	 	font-family: 'Open Sans', sans-serif;	
	}

	#btnstudio 
	{
		background-image : url("images/studio24.svg");
		background-repeat : no-repeat;
		background-size : 110%;
		height : 125px;
		width : 110px ;
		border : none;
		background-color : transparent;
		cursor : pointer;
		color : #65868d;
		font-family: 'Open Sans', sans-serif;
	}

	#btneditor 
	{
		height: 7em;
		background-size: 80%;
		background-position: top;
	}

	#btndashboard 
	{
		height: 14.5em;
		background-size: 50%;
	}

	#btnwebstudio 
	{
		height: 7em;
		background-size: 80%;
		background-position: top;
	}

	.namecenterdiv 
	{
		padding-top: 80px;
		font-size: 13px;
	}

	#namecenterdiv2 
	{
		padding-top: 80px;
		font-size: 13px;
	}

	.namecenterdiv2 
	{
		padding-top: 200px;
		font-size: 13px;
	}

	.nameCenterConfig 
	{
		font-size: 13px;
	}
	
	#foot 
	{
		
		position: fixed;
	    padding-top: 2em;
	    width: 55em;
	    text-align: left;
	    margin-left: -25px;
	    padding-right: 0px;
	    color: #65868d;
	    background-size: 435px 300px;
	    top: 100%;
	    margin-top: -220px;
	    padding-left: 0px;
	    background-position: 0px -30px;
		font-size : 15px;
		line-height : 20px;
	}

	.welcomepage 
	{
		font-size: 10px;
	    margin-top : revert;
	    margin-left: inherit;
	}
	
	#SpanClassLittle 
	{
		
		display : none;
	}
} /* end @media screen and (max-width: 640px) */


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{

	#domaine 
	{
		color : #515151;
	}

	#selectDomaine 
	{
		border-radius : 40px;
		border-color : grey;	 
		height : 35px;
	}

	#newlogo 
	{
	    width: 100%;
		margin : auto;
		height : 9em;
	    background-position: center;
	}

	#welcomemsg 
	{	
		color : #515151;
		font-size : 14px;
		font-weight : bold;
	}

	#menuindex 
	{          
		margin-left: auto;
		margin-right: auto;
		width : 50%;
		font-family: 'Open Sans', sans-serif;	
	}

	#SpanClassLittle 
	{	
		display : none;
	}

} /*end media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{

	#SpanClassLittle 
	{	
		display : none;
	}
} /*end media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)*/ 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
{	
	.title 
	{	
		margin-top: -20px;
	}

	.namecenterdiv 
	{	
		margin-top: -20px;
	}
} /*end media all and (-ms-high-contrast: none), (-ms-high-contrast: active) */