@import url('../../../includes/css/modal.css');

/*
  theme.css, V2.0 2014/05/30 20:03:50
  Copyright (c) 2013 FC Partner
  Released under the GNU General Public License
  
  Couleur principale => var(--main-color)
  Couleur secondaire => var(--second-color)
  
  Variation de la couleurs principale du theme :
  Fond entête table => var(--bkgd-head-table)
  Fond ligne choisie => var(--bkgd-selected-line)
  Fond ligne paire => var(--lightgrey-color)
  Fond ligne impaire => var(--bkgd-odd-line)
  
  Variation de la couleur secondaire du theme :
  Fond bouton Over => var(--bkgd-button-over)
  Fond ligne Over => var(--bkgd-line-over)
  
  Blanc => var(--white-color)
  gris => var(--grey-color)
  Noir => var(--black-color)
  -ms-zoom: 0.9; -webkit-zoom: 0.9; zoom: 0.9; 
  
  https://htmlcolorcodes.com/fr/selecteur-de-couleur/
*/
:root {
    --main-color: #46729F;
	--second-color : #ED5E2F;
	--bkgd-head-table : #B3BAC5;
	--bkgd-button-over : #ED5E2F;
	--bkgd-line-over : #FFE1B9;
	--bkgd-selected-line : #DEE4E8;
	--bkgd-even-line : #F2F2F2;
	--bkgd-odd-line : #FDFDFD;
	--white-color : #FFFFFF;
	--verylightgrey-color : #F8F8F8;
	--lightgrey-color : #F2F2F2;
	--grey-color : #727272;
	--red-color : #FF0000;
	--black-color : #000000;
	--menu-selected-color : var(--bkgd-subhead-table);
	--bkgd-collect : var(--bkgd-subhead-table);
	
	--std-text-color : var(--grey-color);
	--size-standard  : 11px;
	--size-enlarged1 : 13px;
	--size-enlarged2 : 14px;
	--size-title : 	16px;
	
	--datatable-height : 32px;
	--standard-font : Arial;
}
body
 { background-color: var(--white-color); color: var(--black-color); margin: 0px; -ms-zoom: 0.9; -webkit-zoom: 0.9; zoom: 0.9}

 /* liens en général*/
a:link, a:visited, a:active { font-family: var(--standard-font); font-size: 11px; color: var(--black-color); font-weight: normal; text-decoration: none; }
a:hover { cursor: pointer;}

.roundBoxTable { border:1px solid #AAA; -webkit-border-radius:8px; border-radius:8px; background-color: var(--lightgrey-color); }

/* fin nouveaux éléments */

.scroll {
  scroll-behavior: smooth;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 7;
  opacity: 1;

}
.scrolling-container {
  height: 500px; /* Hauteur fixe du conteneur */
  overflow-y: auto;
  border-bottom: 1px solid var(--lightgrey-color);
}

 /*style page index */
.index_title { border: 1px solid var(--main-color); background-color: var(--lightgrey-color); font-family: var(--standard-font); font-size: 50px; color:var(--main-color); font-weight: bold;  }

/* style entête */
.headerBackground { background-color: var(--lightgrey-color); font-family: var(--standard-font); font-size: 12px; color:var(--white-color); font-weight: normal; }
.headerBar { background-color: var(--main-color); }
.headerBarContent { font-family: var(--standard-font); font-size: 10px; color: var(--white-color); font-weight: bold; padding: 2px; }

/*style fond de page popup modification rapport */
.popup { background: var(--lightgrey-color); }

/*style pour questionnaire utilisé par autre utilisateur */
.wfbusy_alert { font-family: var(--standard-font); font-size: 10px; background-color: #ffb3b5; }

/*style textes standards */
.fieldRequired { font-family: var(--standard-font); font-size: 10px; color: var(--red-color); }
.smallText { font-family: var(--standard-font); font-size: 10px; }
.main { font-family: var(--standard-font); font-size: 11px; font-weight: normal;}
.medium { font-family: var(--standard-font); font-size: 14px; }
.large { font-family: var(--standard-font); font-size: 16px; }
.big { font-family: var(--standard-font); font-size: 19px; }
.verybig { font-family: var(--standard-font); font-size: 26px; }

/* Tooltip est le style pour la boite d'info de l'utilisateur connecté */
.tooltip { border-bottom: 0px dotted var(--black-color); color: var(--black-color); outline: none; cursor: help; position: relative; font-size: 10px; color: var(--grey-color); font-weight: bold; text-decoration: none; }
.tooltip span { margin-left: -999em; position: absolute; }
.tooltip:hover span { border-radius: 5px 5px; -webkit-border-radius: 5px; font-family: var(--standard-font); font-size: 12px; position: absolute; left: -15em; top: 2em; z-index: 99; margin-left: 0; width: 250px; }
.tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; }
.tooltip:hover em { font-family: var(--standard-font); font-size: 10px; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; }
.classic { padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33;}
.custom { padding: 0.5em 0.8em 0.8em 2em; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	text-align: left;}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	text-align: left; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
.trip { display: none;}

/* info box , boite de dialogue laterale */
.infoBoxTable { border:1px solid #AAA; -webkit-border-radius:4px; border-radius:4px; }
.infoBoxHeading  { font-family: var(--standard-font); font-size: 13px; font-weight: bold; background-color: var(--bkgd-selected-line); color: var(--main-color); border-bottom: solid 1px var(--bkgd-head-table);  text-align: center;}
.infoBoxContent { font-family: var(--standard-font); font-size: 11px; color: var(--main-color); background-color: var(--lightgrey-color); }
.infoBoxContentOdd { font-family: var(--standard-font); font-size: 11px; color: var(--black-color); background-color: var(--bkgd-odd-line);}

/* rounded boxtable */
.roundBoxTable { border:1px solid #AAA; -webkit-border-radius:4px; border-radius:4px; }
.roundBoxHeadingRow { background-color: var(--lightgrey-color); color: var(--main-color);}
.roundBoxHeading { font-family: var(--standard-font); font-size: 13px; color: var(--main-color); font-weight: bold;}
.roundBoxContent { font-family: var(--standard-font); font-size: 11px; color: var(--main-color); background-color: var(--lightgrey-color); }
.roundBoxContentOdd { font-family: var(--standard-font); font-size: 11px; color: var(--main-color); background-color: var(--bkgd-odd-line);}

/* data table lignes et tableau central*/
.dataHeadingReport { color: var(--white-color); background-color: var(--main-color);}
.dataTableHeadingReportContent { font-family: var(--standard-font); font-size: 12px; font-weight: bold; color: var(--white-color); background-color: var(--main-color); border-top: solid 1px var(--bkgd-head-table);}
.dataTableHeadingRow { background-color: var(--white-color); height: 23px;}
.dataTableSubHeadingRow { background-color: var(--white-color); height: 23px;}
.dataTableSectionHeadingRow { background-color: var(--lightgrey-color); height: 23px; border-bottom: solid 2px var(--white-color);}
.dataTableTotHeadingRow { background-color: var(--bkgd-odd-line); height: 23px; border-top: solid 2px #EDEDED;}
.dataTableRowSuccess { background-color: #00FF4D; }
.dataTableRowError { background-color: #FFB3B5; }
.dataTableHeadingContent { font-family: var(--standard-font); font-size: 12px; font-weight: bold; color: var(--main-color); border-bottom: solid 1px var(--bkgd-head-table); border-top: solid 1px var(--bkgd-head-table);}
.dataTableSubHeadingContent { font-family: var(--standard-font); font-size: 12px; font-weight: bold; color: var(--main-color); border-bottom: solid 1px var(--bkgd-head-table); border-top: solid 1px var(--bkgd-head-table);}
.dataTableTotHeadingContent { font-family: var(--standard-font); font-size: 12px; font-weight: bold; color: var(--main-color); border-bottom: solid 1px var(--bkgd-head-table); border-top: solid 1px var(--bkgd-head-table);}
.dataTableHeadingContentColumn { background-color: #D9EBF2; font-family: var(--standard-font); font-size: 12px; font-weight: bold; color: var(--main-color); border-bottom: solid 1px var(--bkgd-head-table); border-top: solid 1px var(--bkgd-head-table);}
.dataTableHeadingContent60 { 
        -webkit-transform: rotate(-60deg); 
		background-color: #D9EBF2; font-family: var(--standard-font); font-size: 12px; font-weight: bold; color: var(--main-color); border-bottom: solid 1px var(--bkgd-head-table); border-top: solid 1px var(--bkgd-head-table);}
.dataTableHeadingContent90
{
	writing-mode: sideways-lr;
    height: 25px;
    /*    -webkit-transform: rotate(-60deg); 
    transform: rotate(-80deg);*/
    transform-origin: left;
    white-space: nowrap;
    margin: 0 0 10px 10px;
	background-color: #D9EBF2; font-family: var(--standard-font); font-size: 12px; font-weight: bold; color: var(--main-color); 
	}
.dataTableHeadingContentRight { font-family: var(--standard-font); font-size: 13px; font-weight: bold; color: var(--white-color); text-align: right; }
.dataTableHeadingContentCenter { font-family: var(--standard-font); font-size: 13px; font-weight: bold; color: var(--white-color); text-align: center; }
.dataTableHeadingContentLeft { font-family: var(--standard-font); font-size: 13px; font-weight: bold; color: var(--white-color); text-align: left;}
.dataTableFooterRow  { background-color: var(--bkgd-head-table);}
.dataTableRowTransparent  { background-color: #FBF8EF; font-style: italic;}
.dataTableRow { background-color: var(--bkgd-even-line); color: #000; height: var(--datatable-height);}
.dataTableRowOdd { background-color: var(--bkgd-odd-line); color: #000; height: var(--datatable-height);}
.dataTableRowSelected { background-color: var(--bkgd-selected-line); font-weight: bold; height: var(--datatable-height);}
.dataTableRowHighlighted { background-color: #D9EBF2; height: var(--datatable-height);}
.dataTableRowOver { background-color: var(--bkgd-line-over); cursor: pointer; height: var(--datatable-height);}
.dataTableRowOddOver { background-color: var(--bkgd-line-over); cursor: pointer; height: var(--datatable-height);}
.dataTableRowSelectedOver { background-color: var(--bkgd-line-over); cursor: pointer; font-weight: bold; height: var(--datatable-height);}
.dataContent { font-family: var(--standard-font); font-size: 11px; color: var(--black-color); height: var(--datatable-height);}
.dataTableContent { font-family: var(--standard-font); font-size: 11px; white-space: nowrap; color: var(--black-color); height: var(--datatable-height); }
.dataTableContentOver { font-family: var(--standard-font); font-size: 11px; white-space: nowrap; color: var(--grey-color); height: var(--datatable-height); 
  border-bottom: 1px solid #FF9933;
  border-top: 1px solid #FF9933;
  border-left: 1px solid #FF9933;
  border-right: 1px solid #FF9933;
}
.dataTableContentLeftCol {  font-family: var(--standard-font); font-size: var(--size-enlarged1);  background-color: var(--white-color); color: var(--grey-color); height: var(--datatable-height); }
.dataTableContentLined { font-family: var(--standard-font); font-size: 11px; color: var(--black-color); border-bottom: solid 1px var(--bkgd-head-table); }
.dataTableContentRight { font-family: var(--standard-font); font-size: 11px; color: var(--black-color); text-align: right;}
.dataTableContentRightLined { font-family: var(--standard-font); font-size: 11px; color: var(--black-color); text-align: right; border-bottom: solid 1px var(--bkgd-head-table);}
.dataTableContentCenter { font-family: var(--standard-font); font-size: 11px; color: var(--black-color); text-align: center;}
.dataTableContentLeft { font-family: var(--standard-font); font-size: 11px; color: var(--black-color); text-align: left;}
.dataTableContentColumn { background-color: #D9EBF2; font-family: var(--standard-font); font-size: 11px; color: var(--black-color); }

/* ligne d'entete des pages */
.pageHeading { font-family: var(--standard-font); font-size: 14px; color: var(--grey-color); font-weight: bold; }
.pageSubHeading { font-family: var(--standard-font); font-size: 11px; font-weight: bold; background-color: var(--bkgd-selected-line); color: var(--main-color); border-bottom: solid 1px var(--bkgd-head-table);  text-align: center;}
.pageMenuHeading { font-family: var(--standard-font); font-size: 11px; color: var(--grey-color); font-weight: bold; }

/* ligne texte menu entête */
.menuHeadContent { font-family: var(--standard-font); font-size: 10px; color: var(--grey-color); }
.menuSubContent { font-family: var(--standard-font); font-size: 19px; color: var(--grey-color); }

.green-dot {
	font-size: 19px;
	color: #00C2AB;
}

.red-dot {
	font-size: 19px;
	color: #eb3939; 
}

.yellow-dot {
	font-size: 19px;
	color: #f4bd42; 
}

.blue-dot {
	font-size: 19px;
	color: #3950eb; 
}

.empty {
	background-color: var(--white-color);
}
.current-box {
	padding: 3px 8px;
    white-space: nowrap;
    width: auto;
    text-align: center;
    box-sizing: border-box;
    height: auto;
	color: var(--white-color);
    float: none;
    border-radius: 2px;
    background-color: #25D31C;
    transform: translateY(-1px);
}

.blue-box {
	padding: 3px 8px;
    white-space: nowrap;
    width: auto;
    text-align: center;
    box-sizing: border-box;
    height: auto;
	color: var(--white-color);
    float: none;
    border-radius: 2px;
    background-color: var(--main-color);
    transform: translateY(-1px);
}

.open-box {
	padding: 3px 8px;
    white-space: nowrap;
    width: auto;
    text-align: center;
    box-sizing: border-box;
    height: auto;
	color: #757575;
    float: none;
    border-radius: 2px;
    background-color: #8BFE01;
    transform: translateY(-1px);
}

.closed-off {
	padding: 3px 8px;
    white-space: nowrap;
    width: auto;
    text-align: center;
    box-sizing: border-box;
    height: auto;
	color: var(--lightgrey-color);
    float: none;
    border-radius: 2px;
    background-color: #848484;
    transform: translateY(-1px);
}

.closed-cert {
	padding: 3px 8px;
    white-space: nowrap;
    width: auto;
    text-align: center;
    box-sizing: border-box;
    height: auto;
	color: var(--white-color);
    float: none;
    border-radius: 2px;
    background-color: #77323a;
    transform: translateY(-1px);
}

.closed-box {
	padding: 3px 8px;
    white-space: nowrap;
    width: auto;
    text-align: center;
    box-sizing: border-box;
    height: auto;
	color: var(--white-color);
    float: none;
    border-radius: 2px;
    background-color: #ffae00;
    transform: translateY(-1px);
}

.not-open-box {
	padding: 3px 8px;
    white-space: nowrap;
    width: auto;
    text-align: center;
    box-sizing: border-box;
    height: auto;
	color: var(--white-color);
    float: none;
    border-radius: 2px;
    background-color: var(--main-color);
    transform: translateY(-1px);
}
/* Pastille user */
.topMenuUserBox {
	position: relative;
	float: right;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}
.topMenuUserBox:hover + .hide {
	position: relative;
	float: right;
	display: inline-block;
	top: 45px;
	font-family: var(--standard-font); font-size: 10px; color:var(--black-color); font-weight: normal; 
	color: var(--black-color); outline: none; cursor: help; text-decoration: none;
	background: var(--bkgd-head-table); border: 1px solid var(--bkgd-head-table);	text-align: justify;
}


.userInitialsText {
	padding-top: 3px;
	padding-left: 0px;
	font-weight: bold;
	text-align: justify;
}
/* */

/*--- PORTAL --*/
.portal_area_logo {
	/* width:70%; */
	height:150vh;
	background-image: url('../portal_bg.png');
	background-repeat: no-repeat;
	background-size: 100%;
}
.portal_area_login {
    position: fixed;
    top: 100px;
	left: 30%;
	width:40%;
	height:auto;
	background-color: var(--black-color)00;
}

/*--- LOGIN --*/
.login_area_logo {
/*	width:80%;*/
	height:150vh;
	background-image: url('../login_bg.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
}
.login_area {
    position: fixed;
    top: 50px;
	right: 0px;
	width:40%;
	height:auto;
/*	background-color: #d3d8db;*/
	background-color: var(--black-color)00;
}

input[type="text"], input[type="password"] {
height:25px;
font-family: var(--standard-font); 
font-size: 12px;
color:var(--black-color);
padding: 3px;
-webkit-border-radius:4px;
border-radius:4px;
}

[required] {
   border: 2px dotted red;
}

input[type="text-calc"] {
height:25px;
font-family: var(--standard-font); 
font-size: 12px;
color:var(--black-color);
padding: 3px;
-webkit-border-radius:4px;
border-radius:4px;
background-color: lightgray;
}

input:read-only {border: 0px;}

textarea {
font-family: var(--standard-font); 
font-size: 12px;
color:var(--black-color);
resize:both;
-webkit-border-radius:4px;
border-radius:4px;
}

select, yadcf-filter {
height:25px;
max-width: 450px;
font-family: var(--standard-font); 
font-size: 12px;
color:var(--black-color);
-webkit-border-radius:4px;
border-radius:4px;
}
select.closed {
	background: #FE6C01;
}

option {
	height:  normal;
}

#wait {
  display: block;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 10;
}

/********************************************************************/
/*                                                                  */
/* Toute la boutonnerie, standards, dataware, questionaires, ...    */
/*                                                                  */
/********************************************************************/
/* boutons standards */
button.connect, a.connect {
/* Sliding right image */
background-color:#00755C; 
display: block;
float: left;
height: 35px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
width: 320px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
padding-right: 90px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
padding-left: 90px;
padding-top: 0px;
/* FONT PROPERTIES */
text-decoration: none;
color: var(--white-color);
font-family: var(--standard-font);
text-transform: capitalize;
font-size:11px;
font-weight:bold;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
}

button.button, a.button {
/* Sliding right image */
background-color:var(--main-color); 
display: block;
float: left;
height: 28px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
margin-left: 5px;
margin-top: 0px;
padding-right: 19px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
padding-left: 19px;
padding-top: 0px;
/* FONT PROPERTIES */
text-decoration: none;
color: var(--white-color);
font-family: var(--standard-font);
text-transform: capitalize;
font-size:11px;
font-weight:bold;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
}

button.button_off, a.button_off {
/* Sliding right image */
background-color:var(--bkgd-selected-line); 
display: block;
float: left;
height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
margin-left: 0px;
margin-top: 0px;
padding-right: 19px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
padding-left: 0px;
padding-top: 0px;
/* FONT PROPERTIES */
text-decoration: none;
color: var(--black-color);
font-family: var(--standard-font);
text-transform: capitalize;
font-size:10px;
font-weight:bold;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
}

button.button_link, a.button_link {
/* Sliding right image */
background-color:var(--main-color); 
height: 19px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
/* display: block; */
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 15px;
/* FONT PROPERTIES */
text-decoration: none;
color: var(--white-color);
font-family: var(--standard-font);
text-transform: capitalize;
font-size:10px;
font-weight:bold;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
}

button.button_link_light, a.button_link_light {
/* Sliding right image */
background-color:#C8CCCF; 
height: 19px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
/* display: block; */
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 15px;
/* FONT PROPERTIES */
text-decoration: none;
color: var(--black-color);
font-family: var(--standard-font);
text-transform: capitalize;
font-size:10px;
font-weight:bold;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
}

button.button span, a.button span, button.button_off span, a.button_off span {
/* Background left image */ 
display: block;
line-height: 25px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
margin-left: 0px;
margin-top: 0px;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
} 

button.button:hover, a.button:hover, button.button_off:hover, a.button_off:hover, button.button_link:hover, button.button_link_light:hover, a.button_link:hover, a.button_link_light:hover {
background-color:#ED5E2F; 
color: var(--white-color);
}
/*======================================================*/
button.button_tiny, a.button_tiny {
/* Sliding right image */
background-color:#C8CCCF; 
height: 19px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
/* display: block; */
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 15px;
/* FONT PROPERTIES */
text-decoration: none;
color: var(--black-color);
font-family: var(--standard-font);
text-transform: capitalize;
font-size:10px;
font-weight:bold;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
}

button.button_tiny_off, a.button_tiny_off {
/* Sliding right image */
background-color:var(--main-color); 
height: 19px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
/* display: block; */
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 15px;
/* FONT PROPERTIES */
text-decoration: none;
color: var(--black-color);
font-family: var(--standard-font);
text-transform: capitalize;
font-size:10px;
font-weight:bold;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
}

button.button_tiny span, a.button_tiny span, button.button_tiny_off span, a.button_tiny_off span {
/* Background left image */ 
display: block;
line-height: 8px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
margin-left: 0px;
margin-top: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 4px;
padding-left: 2px;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
} 

button.button_tiny:hover, a.button_tiny, button.button_tiny_off:hover, a.button_tiny_off:hover 
{
background-color:#ED5E2F; 
color: var(--white-color);
}
/*======================================================*/
button.button_tiny, a.button_tiny {
/* Sliding right image */
background-color:var(--main-color); 
height: 19px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
/* display: block; */
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 15px;
/* FONT PROPERTIES */
text-decoration: none;
color: var(--white-color)FF;
font-family: var(--standard-font);
text-transform: capitalize;
font-size:10px;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
}
button.button_tiny_off, a.button_tiny_off {
/* Sliding right image */
background-color:#C8CCCF; 
height: 19px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
/* display: block; */
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 15px;
/* FONT PROPERTIES */
text-decoration: none;
color: var(--black-color);
font-family: var(--standard-font);
text-transform: capitalize;
font-size:10px;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
}

button.button_tiny span, a.button_tiny span, button.button_tiny_off span, a.button_tiny_off span {
/* Background left image */ 
display: block;
line-height: 8px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
margin-left: 0px;
margin-top: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 4px;
padding-left: 2px;
border: none;
-webkit-border-radius:4px;
border-radius:4px;
} 

button.button_tiny:hover, a.button_tiny, button.button_tiny_off:hover, a.button_tiny_off:hover 
{
background-color:var(--bkgd-button-over); 
color: var(--white-color);
}

button.onglet_link, a.onglet_link
{
	/* Sliding right image */
	background-color:var(--bkgd-selected-line); 
	height: 19px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	/* display: block; */
	margin-right: 1px;
	margin-left: 1px;
	margin-top: 1px;
	margin-bottom: 1px;
	padding-left: 15px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 15px;
	/* FONT PROPERTIES */
	text-decoration: none;
	color: var(--black-color);
	font-family: var(--standard-font);
	text-transform: capitalize;
	font-size:10px;
	border: 1px solid var(--black-color);
		-webkit-border-radius:4px;
	border-radius:4px;
}
button.onglet_link_off, a.onglet_link_off 
{
	/* Sliding right image */
	background-color:#DE8488; 
	height: 19px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	/* display: block; */
	margin-right: 1px;
	margin-left: 1px;
	margin-top: 1px;
	margin-bottom: 1px;
	padding-left: 15px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 15px;
	/* FONT PROPERTIES */
	text-decoration: none;
	color: var(--black-color);
	font-family: var(--standard-font);
	text-transform: capitalize;
	font-size:10px;
	border: 1px solid var(--black-color);
		-webkit-border-radius:4px;
	border-radius:4px;
}

button.onglet_link:hover, a.onglet_link, button.onglet_link_off:hover, a.onglet_link_off:hover 
{
background-color:#1D5E2F; 
color: var(--white-color);
}
button.onglet_link span, a.onglet_link span, button.onglet_link_off span, a.onglet_link_off span 
{
	/* Background left image */ 
	display: block;
	line-height: 8px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 4px;
	padding-left: 2px;
	border: none;
		-webkit-border-radius:4px;
	border-radius:4px;
} 

/* boutons du menu */
a.button_menu {
/* Sliding right image */
background-color:var(--main-color); 
display: block;
float: left;
height: 28px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
width: 195px;
margin-right: 6px;
padding-right: 5px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: var(--white-color);
font-family: var(--standard-font);
font-size:11px;
font-weight:bold;
-webkit-border-radius:3px;
border-radius:3px;
}

a.button_menu_selected {
/* Sliding right image */
background-color:#bfdefd;  /*DEE4E8*/
display: block;
float: left;
height: 28px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
width: 195px;
margin-right: 3px;
padding-right: 3px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: var(--black-color);
font-family: var(--standard-font);
font-size:11px;
font-weight:bold;
-webkit-border-radius:3px;
border-radius:3px;
}

a.button_menu span, a.button_menu_selected span  {
/* Background left image */ 
display: block;
line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 0px 0 5px 5px;
-webkit-border-radius:4px;
border-radius:4px;
} 

a.button_menu:hover, a.button_menu_selected:hover {
background-color:var(--bkgd-button-over); 
color: var(--white-color);
text-decoration:none;
-webkit-border-radius:3px;
border-radius:3px;
}


/* boutons du dataware */
a.button_dataware {
/* Sliding right image */
background-color:var(--lightgrey-color); 
display: block;
float: left;
height: 50px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
width: 195px;
margin-right: 6px;
padding-right: 5px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: var(--main-color);
font-family: var(--standard-font);
font-size:12px;
font-weight:bold;
-webkit-border-radius:6px;
border-radius:6px;
}

a.button_dataware_selected {
/* Sliding right image */
background-color:#FAAB90; 
display: block;
float: left;
height: 30px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
width: 195px;
margin-right: 6px;
padding-right: 5px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: var(--black-color);
font-family: var(--standard-font);
font-size:11px;
-webkit-border-radius:6px;
border-radius:6px;
}

a.button_dataware span, a.button_dataware_selected span  {
/* Background left image */ 
display: block;
text-align: center;
line-height: 47px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 0px 0 5px 5px;
-webkit-border-radius:6px;
border-radius:6px;
} 

a.button_dataware:hover, a.button_dataware_selected:hover {
background-color:var(--bkgd-button-over); 
color: var(--white-color);
text-decoration:none;
-webkit-border-radius:6px;
border-radius:6px;
}

/*boutons des questionaires */
button.button_quest, a.button_quest {
    font-family: var(--standard-font);
    display: block;
    text-decoration: none;
    text-align: center;
	width: 105px;
    padding: 5px;
    margin: 8px 0px 0px 8px;
    font-size: 15px;
    text-transform: uppercase;
    background: var(--main-color);
    color: var(--white-color);
	/* round corners */
	border-radius: 4px; /* Opera, Chrome */
    border: 0px none;
    outline: 0px none;
}

button.button_quest:hover, a.button_quest:hover {
    background: var(--bkgd-button-over);
	color: var(--black-color);
}

/* style pour le dataware */
#dataware_table {
	float: left;
	width: 1100px;
	height: 550px;
	white-space:nowrap;
	overflow: auto;
	padding: 5px;
}	

#dataware_menu {
	float: left;
	width: 230px;
	height: 600px;
	white-space:nowrap;
	overflow: auto;
	padding: 5px;
}	

.dw_section { border:1px solid #AAA; border-bottom:none; border-radius:5px 5px 0 0; -webkit-border-radius:4px 4px 0 0; color:#555;}
.dw_ligne { border:1px solid #AAA; border-radius:4px; -webkit-border-radius:4px; }

/* drag & drop css */
/*

Darko Bunic
http://www.redips.net/
Apr, 2011.

*/
/* make drag container visible */
#drag, #drag1 , #drag2 {
}

/* drag object (DIV inside table cell) */
.drag {
	margin: auto;
	margin-bottom: 1px;
	margin-top: 1px;
	text-align: center;
	font-size: 10pt;
	width: 50px;
	height: 10px;
	line-height: 10px;
	border-width: 0px;
	border-style: solid;
	background-color: white;
	/* round corners */
	border-radius: 4px; /* Opera, Chrome */
}

/* blue DIV elements */
.blue {
	border-color: var(--main-color);
}
/* marked cells (forbidden access for header and message line) */
.mark {
	color: white;
	background-color: var(--main-color);
	text-align: center;
}

/* DIV row handlers (blue left column) */
.row{
	width: 5px;
	margin: 2px;
	border-color: var(--main-color);
	background-color: var(--main-color);
	/* round corners */
	border-radius: 8px; /* Opera, Chrome */
}

/* row handler TD background color */
.rowhandler {
	background-color: var(--bkgd-head-table);
}

#dragdiv {
	margin: 0px;
	width: 790px;
	background: var(--lightgrey-color);
	border: 2px dashed LightBlue;
}

.clear { clear: both; }
	
 table.sorting-table {cursor: move;}
 table td.sorter {background-color: var(--bkgd-head-table); width: 10px; cursor: move;}

#slideout {
  position: fixed;
  top: 155px;
  width: content;
  left: 0;
  z-index: 10;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout_inner {
  position: fixed;
  top: 150px;
  left: -210px;
  height: content;
  background: rgb(242, 242, 242);
  border-style: solid;
  border-color: var(--main-color);
  border-width: 1px;
  border-radius: 4px; /* Opera, Chrome */
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout:hover {
  left: 220px;
}
#slideout:hover #slideout_inner {
  left: 0;
}

/* style onglets */

.onglet{
float: left;
margin:5px 2px 1px 3px;
padding:5px 10px ;
border:1px solid var(--bkgd-head-table);
border-bottom:none;
border-radius:5px 5px 0 0;
-webkit-border-radius:4px 4px 0 0;
background: var(--bkgd-selected-line);
color:var(--black-color);
cursor: pointer;
list-style: none;
font-family: var(--standard-font); 
font-size: 11px;
}
.onglet_red{
color:var(--second-color);
font-weight:bold;
}
.onglet:hover{
background: var(--bkgd-button-over);
color: var(--white-color);
}         
.onglet_selectionner{
float: left;
margin: 6px 2px -2px 3px;
padding:5px 10px ;
border:1px solid var(--bkgd-head-table);
border-bottom:3px solid white;
border-radius:5px 5px 0 0;
-webkit-border-radius:4px 4px 0 0;
background:white;
color:var(--black-color);
cursor: pointer;
font-weight:bold;
list-style: none;
font-family: var(--standard-font); 
font-size: 11px;
}           
.contenu-onglet{
clear: both;
background-color:white;
margin-top:-1px;
padding:5px;
border:1px solid var(--bkgd-head-table);
border-radius:4px;
-webkit-border-radius:4px;
color:#000001;
cursor: text;
}
#conteneur-onglet{
width: auto;
margin: auto;
}
/*
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating 
.modal {
    display:    block;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('waiting.gif') 
                50% 50% 
                no-repeat;
}
*/

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

.scroll tbody {
    display: block;
	height: 100px;
	overflow-y: auto;
    overflow-x: hidden;
}

td.details-audit {
    background: url('images/details_open.png') no-repeat center center;
    cursor: pointer;
}
td.details-shown {
    background: url('images/details_close.png') no-repeat center center;
	cursor: pointer;
}

/* Nouvelle mise en page des entetes */
.fixed-header {
	position: fixed;
	overflow: auto;
	top: 0;
	z-index: 10;
	width: 100%;
	height: auto;
}

.logobar {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 15px;
	background-color: var(--lightgrey-color);
}

.FCPLogo {
	 background: url('images/logos/logoFC.png') no-repeat center center;
}

.topMenuBar {
	position: fixed;
	top: 15px;
	height: 65px;
	width: 100%;
	background-color: var(--lightgrey-color);
}

.topMenuBarItem {
	float: left;
	width: 85%;
	height: 65px;
	overflow-y:auto;
}

.topMenuItem {
	float: left;
	display: inline-block;
	height: 65px;
	width: 80px;
	padding-left: 4px;
	background-color: var(--lightgrey-color);
	text-align: center; font-family: var(--standard-font); font-size: 12px; color:var(--white-color); font-weight: normal; 
}
.topMenuItem_selected {
	float: left;
	display: inline-block;
	height: 55px;
	width: 80px;
	padding-left: 4px;
	background-color: var(--lightgrey-color); text-align: center; font-family: var(--standard-font); font-size: 12px; color:var(--white-color); font-weight: normal;
	border-color: var(--main-color);
	border-style:solid; 
	border-width:4px;  
	border-top: none;
	border-right: none;
	border-left: none;
}

.topMenuBarRight {
	float: right;
	display: inline-block;
	height: 65px;
	padding-left: 4px;
	background-color: var(--lightgrey-color); text-align: center; font-family: var(--standard-font); font-size: 12px; color:var(--white-color); font-weight: normal; 
}

.topMenuItemRight {
	float: right;
	display: inline-block;
	height: 65px;
	width: 80px;
	padding-left: 4px;
	background-color: var(--lightgrey-color); text-align: center; font-family: var(--standard-font); font-size: 12px; color:var(--white-color); font-weight: normal; 
}
.topMenuMailRight {
	float: right;
	display: inline-block;
	height: 65px;
	width: 30px;
	padding-top: 12px;
	padding-left: 0px;
	background-color: var(--lightgrey-color); text-align: center; font-family: var(--standard-font); font-size: 12px; color:var(--white-color); font-weight: normal; 
}

.columnLeft {
	position: fixed;
	overflow: hidden;
	width: 190px;
	top: 85px;
	left: 3px;
	z-index: 100;
	-ms-zoom: 0.9;
}

.leftMenuItem {
	position: relative;
	width: 100%;
	height: 30px;
}

.body-div {
	position: relative;
	top: 100px;
	left: 200px;
	max-width: 87%;
}

.tool-div {
	position: relative;
	top: 85px;
	height: 34px;
	left: 200px;
	max-width: 87%;
}

#shadowLine {
	bottom: 2px;
	z-index: 10;
    box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 75px;
    left: 0;
    right: 0;
    height: 5px;
    width: 100%;
	overflow-x: hidden;
    pointer-events: none;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    opacity: 1;
}

/* DatePicker Container */
.ui-datepicker {
	background: var(--bkgd-odd-line);
	width: 226px;
	height: auto;
	margin: 5px auto 0;
	font: 9pt var(--standard-font), sans-serif;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);

	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker a {
	text-decoration: none;
}
/* DatePicker Table */
.ui-datepicker table {
	width: 100%;
}
.ui-datepicker-header {
	background: var(--main-color);
	color: #e0e0e0;
	font-weight: bold;
	-webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
	box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
	text-shadow: 1px -1px 0px #000;
	filter: dropshadow(color=#000, offx=1, offy=-1);
	line-height: 30px;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #111;
}
.ui-datepicker-title {
	text-align: center;
}
.ui-datepicker-prev, .ui-datepicker-next {
	display: inline-block;
	width: 30px;
	height: 28px;
	text-align: center;
	cursor: pointer;
	background-image: url('images/arrow.png');
	background-repeat: no-repeat;
	line-height: 600%;
	overflow: hidden;
}
.ui-datepicker-prev {
	float: left;
	background-position: center -30px;
}
.ui-datepicker-next {
	float: right;
	background-position: center 0px;
}
.ui-datepicker thead {
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top,  #f7f7f7 0%, #f1f1f1 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f1f1f1));
	background-image: -webkit-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
	background-image: -o-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
	background-image: -ms-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
	background-image: linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1',GradientType=0 );
	border-bottom: 1px solid #bbb;
}
.ui-datepicker th {
	text-transform: uppercase;
	font-size: 8pt;
	padding: 5px 0;
	color: #666666;
	text-shadow: 1px 0px 0px #fff;
	filter: dropshadow(color=#fff, offx=1, offy=0);
}
.ui-datepicker tbody td {
	padding: 0;
	border-right: 1px solid #bbb;
}
.ui-datepicker tbody td:last-child {
	border-right: 0px;
}
.ui-datepicker tbody tr {
	border-bottom: 1px solid #bbb;
}
.ui-datepicker tbody tr:last-child {
	border-bottom: 0px;
}
.ui-datepicker td span, .ui-datepicker td a {
	display: inline-block;
	font-weight: bold;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #666666;
	text-shadow: 1px 1px 0px #fff;
	filter: dropshadow(color=#fff, offx=1, offy=1);
}
.ui-datepicker-calendar .ui-state-default {
	background: #ededed;
	background: -moz-linear-gradient(top,  #ededed 0%, #dedede 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dedede));
	background: -webkit-linear-gradient(top,  #ededed 0%,#dedede 100%);
	background: -o-linear-gradient(top,  #ededed 0%,#dedede 100%);
	background: -ms-linear-gradient(top,  #ededed 0%,#dedede 100%);
	background: linear-gradient(top,  #ededed 0%,#dedede 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );
	-webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
	box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}
.ui-datepicker-calendar .ui-state-hover {
	background: var(--bkgd-line-over);
}
.ui-datepicker-calendar .ui-state-VL {
	background: #8BFE01;
}
.ui-datepicker-calendar .ui-state-VL-closed {
	background: var(--red-color);
}
.ui-datepicker-calendar-VL .ui-state-default {
	background: #8BFE01;
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);

	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
	text-shadow: 0px 1px 0px #4d7a85;
	filter: dropshadow(color=#4d7a85, offx=0, offy=1);
	border: 1px solid #8BFE01;
	position: relative;
	margin: -1px;
}

.ui-datepicker-calendar-VL-current .ui-state-default {
	background: #25D31C;
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);

	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
	color: #e0e0e0;
	text-shadow: 0px 1px 0px #4d7a85;
	filter: dropshadow(color=#4d7a85, offx=0, offy=1);
	border: 1px solid #25D31C;
	position: relative;
	margin: -1px;
}

.ui-datepicker-calendar-VL-closed .ui-state-default {
	background: var(--red-color);
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);

	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
	color: #e0e0e0;
	text-shadow: 0px 1px 0px #4d7a85;
	filter: dropshadow(color=#4d7a85, offx=0, offy=1);
	border: 1px solid var(--red-color);
	position: relative;
	margin: -1px;
}

.ui-datepicker-calendar .ui-state-active {
	background: var(--second-color);
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);

	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
	color: #e0e0e0;
	text-shadow: 0px 1px 0px #4d7a85;
	filter: dropshadow(color=#4d7a85, offx=0, offy=1);
	border: 1px solid #55838f;
	position: relative;
	margin: -1px;
}
.ui-datepicker-unselectable .ui-state-default {
	background: var(--lightgrey-color);
	color: #55838f;
}
.ui-datepicker-calendar td:first-child .ui-state-active {
	width: 29px;
	margin-left: 0;
}
.ui-datepicker-calendar td:last-child .ui-state-active {
	width: 29px;
	margin-right: 0;
}
.ui-datepicker-calendar tr:last-child .ui-state-active {
	height: 29px;
	margin-bottom: 0;
}
.ui-datepicked-highlight{
       background-color: #8BFE01;
   }
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}
  .column {
    float: left;
    padding-bottom: 100px;
  }
  .portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
  }
  .portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
	background-color: var(--main-color);
	font-family: var(--standard-font); font-size: 14px; color: var(--black-color); font-weight: normal; text-decoration: none; color: var(--white-color);
  }

  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  .portlet-content {
    padding: 0.4em;
  }
  .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  }
/* Pure CSS Post Tags */	
* {  -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
  
   -webkit-transition: all .1s linear 0;
 transition: all .1s linear 0;

}

.post{
	position:relative;
  text-align:center;
	}

.calendar{
	top:0em;
	padding-top:10px;
	width:48px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 20px/35px "Lucida Sans Unicode", var(--standard-font) Black, var(--standard-font);
	text-align:center;
	color:#000;
  
	text-shadow:#fff 0 1px 0;	
		-webkit-border-radius:3px;
	border-radius:3px;	
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
	}

.calendar em{
	top: 2px;
	display:block;
	font:11px/19px "Lucida Sans Unicode", var(--standard-font);
	color:#fff;
	width: 49px;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
	background:-moz-linear-gradient(top,  #04599a,  #00365a); 
	-webkit-border-bottom-right-radius:3px;	
	border-bottom-right-radius:3px;
	-webkit-border-bottom-left-radius:3px;	
	border-bottom-left-radius:3px;	
	border-top:1px solid #00365a;
	}

.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:5px;	
	width:8px;
	height:8px;
	background:#111;
	z-index:1;
	-webkit-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow:0 1px 1px #fff;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:08px;}	
.calendar:after{right:14px;}

.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-5px;	
	width:4px;
	height:14px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	-webkit-border-radius:2px;
	border-radius:2px;
	}
.calendar em:before{left:10px;}	
.calendar em:after{right:15px;}