/************** Définition des variables  ****************/
:root
{
	/********** Couleurs **********/
	--body-text-color: navy;
	--body-border-color:#0B3D92;
	--main-page-background-color: white;
	--castelServer-color: navy;
	--castelAccess-color: #87A93F;
	--castelMonitor-color: #812D6F;
	--castelSuite-background-color: white;
	--castelSuite-page-background-color: white;
	--dialog-background-color: #fcf8e3;
	--dialog-color:  #8a6d3b;
	--list-hover-background-color: #dfdfdf;
	--outline-input-focus-color: #47afed;
	--castelSuite-user-menu-color: white;
	
	/********** Dimensions **********/
	--header-and-footer-height: 75px; /* header : 60px  footer : 14px + 1px pour IE...*/
	--height-main-content-with-menu: calc(100vh - var(--header-and-footer-height));
	--height-main-content-without-menu : calc(100vh - 63px);
	
	/********** CastelServeur var **********/
	--title-color: #1175ce;
	--group-title-color: var(--title-color);
	--group-title-background-color: #bbdbf7;
	--group-text-color: #212529;
	--table-header-background-color: #0275d8;
	--table-header-color: white;
	--table-header-color-hover: #dfeff9;
	--table-light-header-background-color: white;
	--table-light-header-color: #0275d8;
	--table-light-text-color: var(--group-text-color);
	--table-light-border-color: #dee2e6;
	--table-light-selected-background-color: #0272d3;
	--table-light-selected-background-color-hover: #0186e1;
	--table-stripped-background-color-odd: white;
	--table-stripped-background-color-even: #DDD;
	--table-header-border-color: #0275d8;
	--table-border-color: #c1c7d1;
	--config-link-color: #0275d8;
	--config-link-hover-color: #4bb87e;
	--fieldset-border-color: #0066d0;
	--fieldset-legend-color: #0066d0;
	--custom-switch-color: #1175ce;
	--btn-background-color: #007bff;
	--btn-background-color-hover: #0069d9;
	--btn-border-color: #007bff;
	--btn-border-color-hover: #0062cc;
	--btn-text-color: white;
	--btn-text-color-hover: white;
	--btn-outline-color: #007bff;
	--btn-outline-background-color: white;
	--btn-outline-border: var(--btn-outline-color);
	--font-awesome-color:var(--title-color);
	--font-awesome-color-hover:#278fea;
	--gip2-light-text-color: #212529;
	--CS-dialog-title-color: var(--title-color);
	--CS-dialog-background-color: white;
	--CS-dialog-color: var(--table-light-text-color);
	--CS-dialog-input-border-color: var(--btn-border-color);
	--label-checkbox-border-color: #3e98de;
	--label-checkbox-selected-background: #dbeef1;
	
		/********** CastelAcces var **********/
	--CA-dialog-background-color: #9EB76C;
	--CA-dialog-color: #333;
	--CA-outline-input-focus-color: #9fd236;
	--CA-table-light-header-color: #659b1b;
	--CA-btn-background: #87A93F;
	--CA-btn-border: #314b21;
	
	/********** CastelSupervision var **********/
	--CM-outline-input-focus-color: #be2aa7;
	
}

/* Directive pour les gros logo de la page d'accueil */

/* Directive pour le div qui contiendra les 1 ou 2 ou 3 gros Logo de chaque application sans gestion de licence*/
#CASTELSuiteBigLogoContainer {
    display: flex;
	flex-direction: row;    
	justify-content: space-around;  
	padding-top:200px;
    }
    
/* Directive pour le div qui contiendra le Logo CASTELServeur et le bloc de gestion de license */
#CASTELSuiteBigLogoContainerColumn {
    display: flex;
	flex-direction: column;    
    justify-content: center;  
    }
    
    
/* Directive pour le div des 3 gros logo en mode horizontal */
.CASTELServeurButton, .CASTELAccesButton, .CASTELSuperviseurButton, .CASTELConfigSuperviseurButton, .XtVisionButton  {
    	margin: auto;
    }
    
    
       
/* Directive pour le div du logo CASTELServeur en mode vertical */
.CASTELServeurButtonColumn {
	padding-top:100px;
	align-self: center;
    }

/* Directive pour le div qui contiendra le Logo CASTELServeur et le bloc de gestion de license */
#CASTELSuiteLicenseContainerXXX {
    display: flex;
	flex-direction: row;    
    justify-content: center;  
    }


/* Directive pour le div "gestion de license CASTELAcces"*/
.CASTELAccesLicenseBlock {
	background-image:linear-gradient(to top,white, #8EAF4C);
	height: 150px;
  	width: 400px;
	padding-top:10px;
	font-size: 10pt;
	font-family:Arial;
	color:White;	
	align-self: center;	
    margin-top: 80px;
    margin-left: 20px;
    margin-right: 20px;
    }
    
    
.CASTELAccesLicenseBlock  input {
  width: 250px; 
  padding: 1px 1px;
  margin-bottom: 5px;
  border: 1px solid #e5e5e5;
  border-bottom: 2px solid #ddd;
  background: #f2f2f2;
  color: #555;
  font-size: 10pt;
}

/* Directive pour le div "gestion de license CASTELSuperviseur"*/
.CASTELSuperviseurLicenseBlock {
	background-image:linear-gradient(to top,white, #802D6E);
	height: 150px;
  	width: 400px;
	padding-top:10px;
	font-size: 10pt;
	font-family:Arial;
	color:White;	
	align-self: center;	
    margin-top: 80px;
    margin-left: 20px;
    margin-right: 20px;
    }
    
.CASTELSuperviseurLicenseBlock  input {
  width: 250px;
  padding: 1px 1px;
  margin-bottom: 5px;
  border: 1px solid #e5e5e5;
  border-bottom: 2px solid #ddd;
  background: #f2f2f2;
  color: #555;
  font-size: 10pt;
}



    
/* Directive pour le  bouton qui prepare � la saisie de licence*/
.keyActivation div {
    width: 320px;
    cursor: pointer;
    color: #676C70;
    font-size: 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: #F0F4F7;
    margin: 0 auto;
    padding: 5px;
 	font-size: 10pt;
}    

.keyActivation {
    display: block;
    width: 350px;
    margin: 0 auto;
    padding: 0 7px 0 7px;
    text-align:center;
    margin-top: 20px;
 	font-size: 10pt;
}

/* Directive pour masquer le formulaire et le bouton sur presence souris*/
#access_site_create_form, .keyActivation:hover>div {
    display: none;
}

/* Directive pour afficher le formulaire sur presence souris*/
.keyActivation:hover>#access_site_create_form {
    display: block;
 	font-size: 10pt;
}

/* Directive pour masquer le formulaire et le bouton sur presence souris*/
#monitor_site_create_form, .keyActivation:hover>div {
    display: none;
}

/* Directive pour afficher le formulaire sur presence souris*/
.keyActivation:hover>#monitor_site_create_form {
    display: block;
 	font-size: 10pt;
}
        
.CASTELServeurButton img , .CASTELServeurButtonColumn img , .CASTELAccesButton img, .CASTELSuperviseurButton img, .CASTELConfigSuperviseurButton img, .XtVisionButton img  {
  height: 250px;
  width: 250px;
}
 

.CASTELServeurButton .textOnBigLogo, .CASTELServeurButtonColumn  .textOnBigLogo, .CASTELAccesButton .textOnBigLogo, .CASTELSuperviseurButton .textOnBigLogo, .CASTELConfigSuperviseurButton .textOnBigLogo, .XtVisionButton .textOnBigLogo {
	width: 200px;
	height : 200px ;
    display: block;
    margin: 20px;
    position: relative;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    overflow: hidden;
	visibility:hidden;
	transform: translate3d(0px, 0px, 0px);
    transition: transform .2s ease-in-out;
}

.CASTELServeurButton:hover .textOnBigLogo,.CASTELServeurButtonColumn:hover .textOnBigLogo, .CASTELAccesButton:hover .textOnBigLogo, .CASTELSuperviseurButton:hover .textOnBigLogo, .CASTELConfigSuperviseurButton:hover .textOnBigLogo, .XtVisionButton:hover .textOnBigLogo  {
	visibility:visible;
	transform: translate3d(0px, -150px, 0px);
	font-size: 15px;
	text-transform: uppercase;
	font-weight:lighter;
	color: #124296;	
	text-align: center;	
	background: transparent;
	}

.CASTELServeurButton:hover img, .CASTELServeurButtonColumn:hover img, .CASTELAccesButton:hover img , .CASTELSuperviseurButton:hover img , .CASTELConfigSuperviseurButton:hover img, .XtVisionButton:hover img  {
	opacity: .4;
   }


   

/* Directive pour cacher les formulaires de redirection vers chaque application */

#gotoCASTELSuiteForm, #gotoCASTELServeurForm, #gotoCASTELAccesForm, #gotoCASTELSuperviseurForm {
    display: none;
}



    
#CASTELSuiteMiniLogoContainer {
    display: flex;
	flex-direction: row;    
	justify-content: center;  
	align-items: center;
    }
    
.minilogo:nth-child(1),.minilogoActive:nth-child(1)
{
    margin-left: 5px;
    margin-right: 5px;
    padding-left : 5px;
    padding-right : 5px;
    width: 200px;
}
.minilogo:nth-child(2),.minilogoActive:nth-child(2)
{
	margin-left: 5px;
    margin-right: 5px;
    padding-left : 5px;
    padding-right : 5px;
    width: 200px;
}
.minilogo:nth-child(3),.minilogoActive:nth-child(3)
{
	margin-left: 5px;
    margin-right: 5px;
    padding-left : 5px;
    padding-right : 5px;
    width: 200px;
}
    
.minilogo:nth-child(4),.minilogoActive:nth-child(4)
{
	margin-left: 5px;
    margin-right: 5px;
    padding-left : 5px;
    padding-right : 5px;
    width: 200px;
}
    
    
.minilogo img
{
    margin-right: 10px;
    vertical-align: text-top;
}    

.minilogo a
{
	font-size: 11pt;
	font-family:Arial;
	color:White;	
	text-decoration: none;	
	
}

.minilogo:hover {
    background: #616161;
}


.minilogoActive img
{
    margin-right: 10px;
    vertical-align: text-top;
}    

.minilogoActive a
{
	font-size: 11pt;
	font-family:Arial;
	color:White;		
	text-decoration: underline;
	text-decoration-color: White;
}


@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 



#CASTELSuiteLoginPage {
    background-image: url("/CASTELSuite/img/fond-login.jpg");
	background-repeat: no-repeat;  
	background-color: white;
	background-size: cover;
	background-position:center;  
	width: 100%;
	height: calc(100vh - 49px);
	top: 34px;
	position: relative;
}

.CASTELSuiteLoginBlock {
	background-image:linear-gradient(to top,white, #9EAEC8);
	padding-top:5px;
	font-size: 15pt;
	font-family:Arial;
	color: #616161;	
	position: absolute;
   	top: 40%;
   	left: 50%;
   	width: 450px;
   	height: auto;
   	margin-top: -4px; /* Half the height */
   	margin-left: -220px; /* Half the width */  
   	border-color: grey;
   	border-style: double;           
}


.CASTELSuiteLoginPage:-webkit-full-screen,
.CASTELSuiteLoginPage:-moz-full-screen,
.CASTELSuiteLoginPage:-ms-fullscreen,
.container:fullscreen {
    width: 100vw;
    height: 100vh;
    }
    

.CASTELSuiteLoginBlockLogo {
	height: 80px;
  	width: 130px;
  	display: block;
 	margin:auto auto; 
 	
}

.CASTELSuiteLoginValidBanner {
    color: #fff;
    background-color: #9C9899;
    background-image:linear-gradient(to top,#F3F4F4, #BEBFC3);

    width: 100%;
    height: 20%;
    position: relative;   
    bottom:10px;  
}
.CASTELSuiteLoginValidButton {
 	margin-top: 8px; 
 	margin-right: 20px; 
	box-shadow: rgb(35, 57, 94) 0px -7px 15px 3px inset;
	background: linear-gradient(rgb(46, 70, 110) 5%, rgb(65, 89, 137) 100%) rgb(46, 70, 110);
	border-radius: 17px; 
	border: 1px solid rgb(31, 47, 71); 
	display: block; 
	cursor: pointer; 
	color: rgb(255, 255, 255); 
	font-family: Arial; 
	font-size: 15px; 
	padding: 7px 13px; 
	text-decoration: none; 
	text-shadow: rgb(38, 54, 102) 0px 1px 0px;
	float: right;	
}

.CASTELSuiteLoginBlock label {
 	margin-top: 10px; 
 	margin-left: 10px; 
 	padding: 10px; 
  	width: 120px;
  	font-size:18px;
}

.CASTELSuiteLoginBlock input {
    color: black;
	left:  1px;  
	background-color : white;	
}

.CASTELSuiteLoginBlock button {
    background-color: #BCBDBF;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    width: 100%;
  	display: block;
	right:    0;
	bottom:   0;  	    
}

.CASTELSuperviseurIdentityCheck label {
 	margin-top: 10px; 
 	margin-left: 10px; 
 	padding: 10px; 
  	width: 120px;
  	font-size:18px;
}

.CASTELSuperviseurIdentityCheck input {
    color: black;
	left:  1px;  
	background-color : white;	
	background-color: #BCBDBF;
    color: white;
    padding: 10px 15px;
    border: none;
    width: 100%;
  	display: block;
	right:    0;
	bottom:   0;  	    
}


#rotator {
    position: absolute ;
    right: 50%;
    bottom: 50%;
    z-index:3;
}

*, ::after, ::before {
    box-sizing: content-box !important;
}




.bottom-sticker, #bottom-sticker {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 35px);
    text-align: center;
}
.bottom-sticker-inner {
    background: white;
    padding: 1px 0 ;
    height: 30px;
}
.bottom-sticker-edge {
    height:16px;
    background-image:url("/CASTELSuite/img/bottom-sticker-top-edge.png");
    background-repeat: repeat-x;
}

.dropdown-toggle.collapsed::after {
    border-left: 0.3em solid;
    border-top: 0.3em solid transparent;
    border-bottom: 0.3em solid transparent;
    vertical-align: 0.1em;
}

.groupTitle
{
	color: var(--group-title-color);	
	padding-left: 5px;
}

.groupTitle:hover
{
	text-decoration: none;
	color: #1175ce;
}

.groupDetail
{
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid rgba(0,0,0,.125);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.btn
{
	padding: .2rem .5rem !important;
	margin: 0.2rem;
	font-size: 0.9rem;
}

.mainPage
{
	background: var(--main-page-background-color);
	width: auto;
	min-height: calc(100vh - var(--header-and-footer-height) - 20px); 
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	top: 61px;
}

.mainPageWithoutMenu
{
	background: var(--main-page-background-color);
	width: 100%;
	min-height: var(--height-main-content-without-menu) - 1px;
}

.footerWithoutMenu
{
	top: 31px;
}

.navbar-fixed
{
	position: fixed; /* Handle Internet explorer */
	top: 0px;
	z-index: 1020;
	width: calc(100%);
}

footer
{
	position: relative;
	top: 57px;
	border-bottom: solid grey 1px;
}

a:not([href]):not([tabindex])
{
	color: white;
}

a:not([href]):not([tabindex]):hover
{
	color: white;
}

/* To fix google chrome new ugly feature... */
input:focus
{
	box-shadow: 0 0 5px var(--outline-input-focus-color);
	border-color: var(--outline-input-focus-color);
	outline: none;	
}
/*
.form-control:focus
{
	border: inherit;
}
*/

header
{
	border-bottom: solid grey 1px;
}

.user-menu-div
{
	display: flex;
	right: 0;
	top: -8px;
	min-width: 10rem;
	max-width: 300px;
	height: 17px;
	background-color: grey;
	border-radius: 1px;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 14px;
	text-align: right;
	align-items: baseline;
	justify-content: flex-end;
}

.user-menu-div:hover
{
	background-color: grey;
}

.user-menu-div:hover ~ .user-menu
{
	display: block;
}

.user-menu-div i
{
	color: white;
	margin-right: 5px;
}

.user-menu-div i:hover
{
	color: white;
}

.user-menu
{
	top: 17px;
	margin-top: 0;
	font-size: 14px;
	background-color: grey !important;
	border-radius: 0px 0px 5px 5px;
	border: solid 1px gray !important;
	right: -5px;
	left: auto;
}

.user-menu:hover
{
	display: block;
}

.user-menu-entry
{
	color: white;
}

.user-menu-entry:active,
.user-menu-entry:hover
{
	background-color: #a7a7a7 !important;
	color: black;
	cursor: pointer;
}

.user-menu .dropdown-menu
{
	background-color : grey;
	border: solid 1px gray;
}

.user-menu .dropdown-item
{
	background-color : transparent;
}

#UserIdentity
{
	max-width: 200px;
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	color: var(--castelSuite-user-menu-color);
}

.gip2-link,
a:not([href]):not([tabindex]).gip2-link,
a:not([href]):not([tabindex]).gip2-link:hover {
	color : #007bff;
	text-decoration: none;
}

.gip2-popup-row {
	display: contents;
}

#table_services_ports_wrapper col {
	padding: 0;
}

.textarea-iptables {
	width : 95%;
	padding: 0.5rem;
	font-size: 1.2em;
	min-height: 150px;
}

.datatable-column-error {
	color: red;
	font-weight: bold;
}

table.dataTable tbody tr.selected span.datatable-column-error 
{
	color: red;
	background-color: white;
	border-radius: 5px;
	padding: 0.3em;
}