/* index Administration */

@font-face
{
	font-family: 'Open Sans';
	src: url('font/OpenSans/OpenSans-Regular.ttf') format('truetype');
}

@font-face
{
	font-family: 'Open Sans Bold';
	src: url('font/OpenSans/OpenSans-Bold.ttf') format('truetype');
}

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

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

body 
{	
	text-align: center;
	height: 100%;
	width: 100%;
	margin-left: 0;
	background-color : var(--bg-color) !important;
	background-repeat : no-repeat;
	font-family: 'Open Sans' !important;
	background-size: contain;
	/*Compressed with https://imagecompressor.com */
	background-image: var(--bg-image);
	color : var(--text-color) !important;
}

#logocenter
{
	padding-top : 5% !important;
	display: flex;
	justify-content: center;
}
	
#newlogo 
{
	cursor: pointer;
	height : 70px;
	width : 500px;
	background-image: var(--url-logo-img);
	background-repeat: no-repeat;
	position: relative;
	background-position : center;
	background-size : contain;
	z-index: 100;
	filter : var(--image-white-to-black);
}

#oldLogo
{
	cursor: pointer;
	height : 70px;
	width : 500px;
	background-image: var(--url-old-logo);
	background-repeat: no-repeat;
	position: relative;
	background-position : center;
	background-size : contain;
	z-index: 100;
	filter : var(--image-white-to-black);
}

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

#WelcomeMsgIndex
{
	/* padding-top: 10%; */
}

.ddsection 
{
	margin-top: 20px;
}

.rowcontainer
{
	justify-content: center;
	margin : 9px 0 9px 0;
}

@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 
{	
	text-align : center;
	font-size: 12px;
	font-weight: bold;
	color: var(--text-color);
}

#selectDomaine 
{	
    font-size: 12px;
	border: none;
	color: var(--text-color);
	text-align: center;	 
	cursor : pointer;
	margin-top : 30px;
	background-color: var(--bg-color);
	border: solid 1px;
}

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

a:hover
{		
	color : white !important;
	text-decoration: none !important;
}

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

#menuindex 
{	
	margin-left: auto;
	margin-right: auto;
	font-family: 'Open Sans';
	margin-top: 7%;
	position: relative;
	z-index: 1000;	
}

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

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

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

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

#btnwebstudio:hover, #btnconfig:hover,
#btneditor:hover, #btndashboard:hover
{
	opacity: 0.8;
}

#btnconfig 
{	
	background-image : url("images/config-white.svg");
	background-repeat: no-repeat;
	background-size: 75px;
	background-position-x: 12%;
	background-position-y: center;
	background-color: #ed7225;
	height: 110px;
	border-radius: 8px;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans Bold';
	padding: inherit;
	margin-left : 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#btnwebstudio 
{
	background-image : url("images/studio-white.svg");
	background-repeat: no-repeat;
	background-size: 75px;
	background-position-x: 12%;
	background-position-y: center;
	height: 110px;
	background-color: #069572;
	border-radius : 8px;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans Bold';
	padding: inherit;
	margin-right : 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#btneditor 
{
	background-image : url("images/edit-white.svg");	
	background-repeat: no-repeat;
	background-size: 75px;
	background-position-x: 12%;
	background-position-y: center;
	background-color: #13b8ea;
	height: 110px;
	border-radius : 8px;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans Bold';
	padding: inherit;
	margin-left : 5px;
}

#btndashboard 
{	
	background-image : url("images/dashboard-white.svg");
	background-repeat: no-repeat;
	background-size: 75px;
	background-position-x: 12%;
	background-position-y: center;
	height: 110px;
	border-radius : 8px;
	background-color: #11a0d9;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans Bold';
	margin-right : 5px;
	padding: inherit;
}

#settings 
{
	background-image : url("images/server-white.svg");
	background-repeat: no-repeat;
	background-size: 20%;
	background-position : center;
	background-position-x : 15%;
	height: 110px;
	background-color: #484f6a;
	cursor: pointer;
	font-family: 'Open Sans';
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 30%;
} 

#users 
{	
	background-image : url("images/users-white.svg");
	background-repeat: no-repeat;
	background-size: 20%;
	background-position : center;
	background-position-x : 15%;
	height: 110px;
	background-color: #484f6a;
	cursor: pointer;
	font-family: 'Open Sans';
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 30%;
} 

#docs 
{	
	background-image : url("images/doc-white.svg");
	background-repeat: no-repeat;
	background-size: 20%;
	background-position : center;
	background-position-x : 15%;
	height: 110px;
	background-color: #484f6a;
	cursor: pointer;
	font-family: 'Open Sans';
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 30%;
}
 
 #backups 
 {	
	background-image : url("images/save-white.svg");
	background-repeat: no-repeat;
	background-size: 20%;
	background-position : center;
	background-position-x : 15%;
	height: 110px;
	background-color: #484f6a;
	cursor: pointer;
	font-family: 'Open Sans';
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 30%;
} 

 #backup 
 {	
	background-image : url("images/save-white.svg");
	background-repeat: no-repeat;
	background-size: 20%;
	background-position : center;
	background-position-x : 15%;
	height: 110px;
	background-color: #484f6a;
	cursor: pointer;
	font-family: 'Open Sans';
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 100%;
} 

 #restore 
 {	
	background-image : url("images/restore24.svg");
	background-repeat: no-repeat;
	height: 110px;
	background-size: 36%;
	background-position-y: center;
	background-position-x : 6%;
	background-color: #484f6a;
	cursor: pointer;
	font-family: 'Open Sans';
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 100%;
} 

 #license 
 {	
	background-image : url("images/license-white.svg");
	background-repeat: no-repeat;
	background-size: 20%;
	background-position : center;
	background-position-x : 15%;
	height: 110px;
	background-color: #484f6a;
	cursor: pointer;
	font-family: 'Open Sans';
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 30%;
} 

 #status 
 {
	background-image : url("images/state-white.svg");
	background-repeat: no-repeat;
	background-size: 20%;
	background-position : center;
	background-position-x : 15%;
	height: 110px;
	background-color: #484f6a;
	cursor: pointer;
	font-family: 'Open Sans';
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius : 16px;
	margin : 10px;
	width: 30%;
}

.tileButton:hover 
{	
	opacity: 0.8;
}

.namecenterdiv 
{
	border: none;
	background-color: transparent;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans Bold';
	padding-left: 10%;
	font-size : 25px;
	height: 100%;
	display : flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.namecenterdiv2 
{
	border: none;
	background-color: transparent;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans Bold';
	font-size : 25px;
	padding-left : 10%;
	height: 100%;
	display : flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

#namecenterdiv2
{
	padding-left: 0;
}

.nameCenterConfig 
{
	border: none;
	background-color: transparent;
	cursor: pointer;
	color: white;
	font-family: 'Open Sans';
	display: inline-block;
	vertical-align: top;
	padding-top : 10%;
	padding-left: 25%;
	font-size : 25px;
}

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 
{	
	color : var(--text-color) !important;
}

a:link 
{	
	text-decoration : none;
	display : block;
	width: 100%;
	height : 100%;
}

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

a 
{	
	text-decoration : none;	
}

#footer 
{
	text-align : center;
	font-size: 15px;
	display: inline-block;
	width: 100%;
	position: fixed;
	bottom: 0;
	color : var(--text-color);
}

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

#footerTable
{
	bottom : 40px;
	position: fixed;
	display: inline-flex !important;
	width: 100%;
	justify-content: center;
	text-align: center;
	z-index: 1000;
}
.helpMenuLinkContainer
{
	border: none;
	background-color: transparent;
	padding-right: 20px;
	text-align: center;
}

.helpMenuLink
{
	color : var(--text-color);
	display: inline-block !important;
	font-size : 15px;
	width: 100%;
	padding-top: 0 !important;
	line-height: 40px;
}

#footerCopyright
{
	margin-top: 2%;
}

.welcomepage 
{	
	font-size : 15px;
}

#foot a:link 
{	
	color : white;
	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 Bold';
	display: inline-block;
	vertical-align: top;
	padding-top : 30px;
	font-size : 15px;
	padding-left: 20px;
}

.title2 
{	
	height: 100%;
	width: 100%;
	border: none;
	background-color: transparent;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Open Sans Bold';
	display: inline-block;
	vertical-align: top;
	padding-top : 40px;
	font-size : 15px;
	padding-left: 20px;
}

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

#mainTableConfig 
{	
	max-width : 1140px;
	margin-top : 7%;
	justify-content: center;
}

@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 : 999px)
{
	#btneditor,#btnconfig,#btndashboard,#btnwebstudio
	{
		margin : 6px 0;;
		padding-left: 0;
	}
	
	.rowcontainer
	{
		margin :0;
	}
	
	.namecenterdiv2, .namecenterdiv 
	{ 
		padding-left: 0;
	}
}
@media screen and (min-width : 999px) and (max-width : 1600px) 
{ 

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

	.namecenterdiv 
	{	
		height: 100%;
		font-size: 20px;
	}
	
	.namecenterdiv2 
	{	
		height: 100%;
		font-size: 20px;
	}

	#namecenterdiv2 
	{	
		height: 100%;
		font-size: 20px;
	}
	
	#btndashboard, #btneditor, #btnwebstudio, #btnconfig
	{
		background-size: 40px;
		margin-right: 0;
		margin-left: 0;
	}
	
	#btndashboard, #btnwebstudio
	{
		margin-right: 9px;
	}
	
	#welcomemsgBackup 
	{ 
		width : 512px;
	}
	
	#newlogo
	{
		width: 50%;
	}	

} /*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;
	}

	#footerTable
	{
		display: none !important;
	}
} /* 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-top : 5% !important;
    }

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

	#domaine 
	{
	    font-size: 12px;	
		color : white;
		margin-left: auto;
	    margin-right: auto;
		right: inherit;
		padding-top : 50px;
	}
	
	#logocenter
	{
		padding-top : 5% !important;
		display: flex;
		justify-content: center;
	}
	
	#welcomemsg 
	{
		color : #515151;
		font-size : 12px;
		font-weight : bold;
		display: none;
	}

	#menuindex 
	{
		margin-top: 10%;
		width : 90%;
		height: 25em;
	 	font-family: 'Open Sans';	
	}
	
	.rowcontainer
	{
		margin: 0;
	}
	#settings, #users, #docs, #backups, #license, #status
	{
		width: 100%;
		height : 80px;
	}
	
	.title
	{
		padding-top: 20px;
	}

	#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';
	}

	#btneditor, #btnconfig 
	{
		height: 6.5em;
		margin-left: inherit;
		margin-bottom: inherit;
		background-size: 60px;
		margin : 6px;
	}

	#btndashboard 
	{
		height: 6.5em;
		background-size: 60px;
		margin : 6px;
	}

	#btnwebstudio 
	{
		height: 6.5em;
		background-size: 60px;
		margin : 6px;
	}
	
	.aLinkSizing
	{
		margin: 0;
	}

	.namecenterdiv 
	{
		font-size: 20px;
	}

	#namecenterdiv2
	{
		font-size: 20px;
		padding-left: 10%;
	}

	.namecenterdiv2 
	{
		font-size: 20px;
	}

	.nameCenterConfig 
	{
		padding-top: 45px;
		font-size: 15px;
		width: inherit;
		padding-left: 20%;
	}
	
	#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 : white;
	}

	#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';	
	}

	#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) */