/*  Header de l'application */
header {
	margin-bottom: 10px;
	margin-top: 10px;
}

.headerImage {
	margin-left: 15px;
}

.applicationTitle {
	font-size: 36px;
	margin-bottom: -7px;
	margin-left: 10px;
}

.applicationTitleDescription {
	font-size: 12px;
}

.headerRole {
	margin-top: 0.5em;
	padding-right: 1em;
}

.headerButtons {
	margin-right: 15px;
}

.o-header-fixed {
	margin-bottom: 0;
}

/* Menu vertical */
.menuVertical {
	background-color: #f5f5f5;
    border-radius: 5px;
    padding: 5px;
}
.disabledMenu {
    display: block;
    padding: 10px 15px;
    position: relative;
}

/*  Bandeau Bleu */
.container-fluid .row.roseauRowFieldset, .container-fluid .row.smallRoseauRowFieldset {
	margin-left: -15px;
	margin-right: -15px;
}

.row.smallRoseauRowFieldset {
    margin-left: 0;
    margin-right: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

.row.roseauRowFieldset {
	margin-left: 0;
	margin-right: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

.smallRoseauRowFieldset {
	background-color: #2d699e;
    color: white;
    margin-bottom: 1em;
}

.roseauRowFieldset {
	background-color: #2d699e;
	color: white;
	margin-bottom: 1em;
	min-height: 3em;
}

.roseauRowFieldset .codeSandre {
    font-size: 18px;
}

.roseauRowFieldset .anneeCol {
	margin-bottom: 0;
}

.roseauDetailRowFieldset {
	border-bottom: 1px solid black;
	margin-bottom: 0.5em;
	min-height: 1.5em;
}

.roseauRowFieldset h3 {
	margin-bottom: 0;
	margin-top: 0;
}

.roseauRowFieldset .anneeValidite {
	margin-left: -15px;
	width: 27%;
}

.roseauRowFieldset .niveauStructure .anneeValidite {
	width: auto;
}

.activeLink:before {
	border-color: transparent transparent white;
	border-style: solid;
	border-width: 0 10px 10px;
	bottom: -19px;
	content: "";
	height: 0;
	left: calc(50% - 5px);
	position: absolute;
	width: 0;
}

.roseauRowFieldset .nav {
	margin-top: 6px;
	margin-right: -5px;
}

.roseauRowFieldset .navbar .nav>li>a {
	color: white;
	padding: 0 10px;
}

.roseauRowFieldset .divider-vertical {
	border-left: 1px solid white;
	border-right: 1px solid white;
	height: 15px;
	margin-left: 0.1em;
	margin-right: 0.1em;
	margin-top: 8px;
}

.roseauRowFieldset .navbar .nav>li>span {
	padding: 0 10px;
}

.roseauRowFieldset a {
	color: white;
}

.anneeCBC select {
	font-size: 18px;
}

/* Bandeau bleu Aggglo */
.nomAgglo {
	margin-right: 15px;
	max-width: 40%;
}

.nomAgglo i {
    margin-left: 0;
}

.conformites {
	margin-left: 15px;
}

.incoherences {
	margin-left: 40px;
}

.rightAlignFlexDiv {
	flex: 1 1 0;
	text-align: right;
}

.validationDiv {
	display: inline-block;
}

.conformiteIndicateur {
	background-color: white;
	color: #337ab7;
	margin: 2px 5px;
	padding: 0 5px;
	border-radius: 4px;
}

.conformiteIndicateur i {
	min-width: 15px;
}

/** CSS pour la conformite de l'agglo */
.subConfAga {
	margin-left: 30px;
}

/* CSS menu vertical */
.submenuWithSubmenu {
	position: relative;
}

.submenuSelected::before {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #337ab7;
	bottom: calc(50% - 5px);
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	width: 0;
}

.submenuNotSelected::before {
	border-bottom: 5px solid transparent;
	border-left: 10px solid #337ab7;
	border-top: 5px solid transparent;
	bottom: calc(50% - 5px);
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	width: 0;
}

.menuDisabled  {
    border-left: 10px solid #337ab7;
}

/* CSS page index */
.indexMarginBottom {
	margin-bottom: 2em;
}

.indexTitleRow {
	margin-bottom: 10px;
	margin-right: 0px;
}

.indexTitleIcon {
	color: #2d699e;
	font-size: 40px;
	margin: 0;
}

.indexRow {
	border-top: 1px solid rgb(220, 220, 220);
	padding-bottom: 10px;
	padding-top: 10px;
}

i.indexTitleIcon[class^="fa fa-"] {
	margin: 0;
}

.roseauIcon {
	font-size: 22px;
}

.indexColTitle {
	font-size: 23px;
}

.indexColSubtitle {
	font-size: 14px;
	margin-bottom: 10px;
	margin-right: 0;
}

div.col-md-12[data-o-role*="control"],div.col-xs-12[data-o-role*="control"] {
	padding-right: 0;
}

.noDataDiv::after {
	color: black;
	content: "";
	font-family: FontAwesome;
	font-size: 180px;
	left: 20%;
	opacity: 0.1;
	position: absolute;
	top: -10%;
}

.gridDatas::after {
	content: "";
	top: 0;
}

.noDataDiv {
	align-items: center;
	color: #2d699e;
	display: flex;
	font-size: 23px;
	font-weight: bold;
	height: 180px;
	justify-content: center;
}

/*  CSS générales */
.link {
	text-decoration: underline;
}

input[type="checkbox"], input[type="radio"] {
    height: auto;
}

[data-o-role="help-tooltip"] {
	display: inline-block;
}

.btn-toolbar {
	margin-bottom: 10px;
}

.ptshowhide {
	display: none;
}

.updateArrow {
	font-size: 20px;
	margin-top: 4px;
}

div[data-o-role*="control"] input,div[data-o-role*="control"] select,div[data-o-role*="control"] textarea,div[data-o-role*="control"] ul.o-many-checkbox-list
	{
	margin-bottom: 0;
	width: calc(100% - 1.6em);
}

.flexRow {
	display: flex;
	flex-wrap: wrap;
}

.flexRow:before,.flexRow:after {
	display: flex;
}

.flexEndRow {
	align-items: flex-end;
	display: flex;
}

.flexCenterRow {
	align-items: center;
	display: flex;
}

.flexTopRow {
    align-items: flex-top;
    display: flex;
}

.vertical-align {
	align-items: center;
	display: flex;
	flex-direction: row;
}

.minWidth90px {
    min-width: 90px;
}

.minWidth150px {
    min-width: 150px;
}

.paddingTop10px {
    padding-top: 10px;
}

.paddingRight0px {
    padding-right: 0px;
}

.marginTop5px {
	margin-top: 5px;
}

.marginTop10px {
	margin-top: 10px;
}

.marginTop20px {
	margin-top: 20px;
}

.marginTop25px {
    margin-top: 25px;
}

.marginTop30px {
    margin-top: 30px;
}

.marginleftrightauto {
    margin-left: auto;
    margin-right: auto;
}

.marginleftauto {
    margin-left: auto;
}

.marginleft1em {
    margin-left: 1em;
}

.marginleft2em {
    margin-left: 2em;
}

.marginleft3em {
    margin-left: 3em;
}

.marginleft4em {
    margin-left: 4em;
}

.marginleft0px {
    margin-left: 0;
}

.marginleft-30px {
    margin-left: -30px;
}

.marginleft5px {
    margin-left: 5px;
}

.lightBordered {
    border: 1px solid #AAA;
}

.bordered {
	border: 1px solid black;
}

.paddingLeft0 {
	padding-left: 0;
}

.boldText {
	font-weight: bold;
}

.normalText {
    font-weight: normal;
}

label.control-label.normalText {
    font-weight: normal;
}

.commentaire {
	max-height: 200px;
	overflow: auto;
}

.commentaireScl {
    max-height: 300px;
    overflow: auto;
}

.alignSearchButton {
	margin-top: 18px;
	margin-right: 15px;
}

.textBeforeTable {
	margin-bottom: 0.2em;
}

.textAfterTable {
	margin-bottom: 1em;
	margin-top: -1em;
}

.greenIcon {
	color: #579d1c;
}

.lightgreenIcon {
	color: #a3ff81;
}

.lightgreenBackground {
	background-color: #a3ff81;
}

.lightYellowBackground {
    background-color: yellow;
}

.orangeIcon {
	color: #ED7F10;
}

.orangeBackground {
	background-color: #f4a460;
}

.redIcon {
	color: #c5000b;
}

.lightRedIcon {
    color: #c5000b;
}

.redBackground {
	background-color: #FF524A;
}

.lightRedBackground {
    background-color: #ff968e;
}

.grayIcon {
	color: #aaaaaa;
}

.grayBackground {
    background-color: #aaaaaa;
}

.lightgrayBackground {
    background-color: #cccccc;
}

.blueIcon {
	color: #2d699e;
}

.yellowIcon {
	color: #ffd320;
}

.nav-pills > li > a.yellowIcon:hover {
    color: #ffd320;
}

.nav-pills > li.active > a.yellowIcon {
    color: #ffd320;
}

.blueText {
	color: #23527c;
}

.grayText {
    color: #aaaaaa;;
}

.italicText {
	font-style: italic;
}

.noWhiteSpaceWrap {
	white-space: nowrap;
	min-height: 24px;
}

.calculatedCol {
    width: 20px;	
}

.roseauDetailTitle {
	font-size: 30px;
	margin-bottom: 10px;
}

.detailFicheButton button {
	margin-left: 1em;
}

.detailFicheButton a {
	margin-left: 1em;
}

.valeurNonRensignee {
	color: rgb(120, 120, 120);
	font-style: italic;
}

.left-btn-toolbar>.btn {
	margin-right: 5px;
}

.marginBottom20px {
	margin-bottom: 20px;
}

.o-table-hover tbody .unhoverTable tr[data-o-row='true']:hover th {
	background-color: #555;
}

/* CSS Tableau entête et colonne fixes */
.fixed {
	top: 0;
	left: 0;
	position: fixed;
	width: auto;
	display: none;
	border: none;
	z-index: 100;
}

.table.fixed thead td {
	background-color: #fff;
}

.table.fixed tbody {
	border: medium none;
	height: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}

.table.fixed tfoot {
	border: medium none;
	height: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}

.table.fixed>tbody>tr>td,.table.fixed>tfoot>tr>td {
	border: medium none;
	height: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}

.fixedFirstCol {
	left: 0;
	position: fixed;
	width: auto;
	display: none;
	border: none;
	z-index: 50;
}

.fixedTop {
	position: fixed;
	top: 0;
	z-index: 50;
}

.stickyTop {
    position: sticky;
    top: 0;
    z-index: 50;
}

.table.fixedFirstCol>thead>tr>th:NOT(:FIRST-CHILD),.table.fixedFirstCol>thead>tr:not
     (:first-child ) >th {
	display: none;
}

.table.fixedFirstCol>tbody>tr>td,.table.fixedFirstCol>tfoot>tr>td,.table.fixedFirstCol>thead>tr>td,.table.fixedFirstColAndHeader>thead>tr>td
	{
	background: white;
}

.table.fixedFirstCol>tbody>tr.lightgreenBackground>td,.table.fixedFirstCol>tfoot>tr.lightgreenBackground>td,.table.fixedFirstCol>thead>tr.lightgreenBackground>td,.table.fixedFirstColAndHeader>thead>tr.lightgreenBackground>td
    {
    background-color: #a3ff81;
}

.table.fixedFirstCol>tbody>tr.redBackground>td,.table.fixedFirstCol>tfoot>tr.redBackground>td,.table.fixedFirstCol>thead>tr.redBackground>td,.table.fixedFirstColAndHeader>thead>tr.redBackground>td
    {
    background-color: #FF524A;
}

.table.fixedFirstCol>tbody>tr.lightYellowBackground>td,.table.fixedFirstCol>tfoot>tr.lightYellowBackground>td,.table.fixedFirstCol>thead>tr.lightYellowBackground>td,.table.fixedFirstColAndHeader>thead>tr.lightYellowBackground>td
    {
    background-color: yellow;
}

.table.fixedFirstCol>tbody>tr.orangeBackground>td,.table.fixedFirstCol>tfoot>tr.orangeBackground>td,.table.fixedFirstCol>thead>tr.orangeBackground>td,.table.fixedFirstColAndHeader>thead>tr.orangeBackground>td
    {
    background-color: #f4a460;
}

.table.fixedFirstCol>tbody>tr.active>td {
	background: #f5f5f5;
}

.table-hover.fixedFirstCol>tbody>tr:hover {
	background: none;
}

.fixedFirstColAndHeader {
	top: 0;
	left: 0;
	position: fixed;
	width: auto;
	display: none;
	border: none;
	z-index: 100;
}

.table.fixedFirstColAndHeader>thead>tr>th:NOT(:FIRST-CHILD),.table.fixedFirstColAndHeader>thead>tr:not
     (:first-child ) >th {
	display: none;
}

.table.fixedFirstColAndHeader tbody {
	visibility: hidden;
	height: 0;
}

.table.fixedFirstColAndHeader tfoot {
	visibility: hidden;
	height: 0;
}

.table.fixedFirstColAndHeader>tbody>tr>td,.table.fixed>tfoot>tr>td {
	border: medium none;
	height: 0;
	visibility: hidden;
}

/* TODO : A mettre pour les listes à plat */
.roseau-o-many-checkbox-list ul.o-many-checkbox-list {
    width: 100%;
    border: none;
}

div.roseau-o-many-checkbox-list[data-o-role*="control"] ul.o-many-checkbox-list {
    width: 100%;
}

.roseau-o-many-checkbox-list ul.o-many-checkbox-list>li>label.checkbox {
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.flatroseau-o-many-checkbox-list>ul.nav>li {
	float: left;
}

.flatroseau-o-many-checkbox-list ul.o-many-checkbox-list {
	width: 100%;
	border: none;
}

div.flatroseau-o-many-checkbox-list[data-o-role*="control"] ul.o-many-checkbox-list {
	width: 100%;
}

.flatroseau-o-many-checkbox-list>ul.o-many-checkbox-list>li>label.checkbox {
	padding-bottom: 0;
	padding-top: 0;
	margin-bottom: 0;
	margin-top: 0;
}

.flatroseau-o-many-checkbox-list label {
	font-weight: normal;
}

.flatroseau-o-many-checkbox-list>ul.o-many-checkbox-list>li {
	padding-left: 20px;
}

.rechercheAvancee.roseau-o-many-checkbox-list>ul.o-many-checkbox-list>li>label {
    font-weight: normal;
}

.flatroseau-o-many-checkbox-list>ul.o-many-checkbox-list>li>label {
	padding-right: 20px;
}

/* CSS pour la liste des incohérences */
.againcohJustifTextArea {
	min-width: 400px;
}

.againcohLegenColorSpan {
	padding-right: 30px;
	margin-right: 10px;
}

/** CSS pour le suivi régulier */
DIV.exposantTitleDiv {
	border: 1px solid black;
	margin: 10px 0;
	padding: 10px 5px 10px 10px;
	position: relative;
}

DIV.exposantTitleDiv SPAN.title {
	background: white none repeat scroll 0 0;
	left: 5px;
	padding-left: 5px;
	padding-right: 5px;
	position: absolute;
	top: -12px;
}

.bilansInfo {
	margin-left: 5px;
}

/** CSS pour le retard de transmission */
.retardJoursText {
	float: left;
	margin-left: -15px;
	margin-top: 10px
}

/** CSS pour les intervenants */
.ficheIntervenant {
	min-width: 250px;
	padding: 10px 20px 10px 0
}

.ficheIntervenant .panel-default {
	border: 1px solid #ddd;
	border-radius: 0.3em;
	height: 100%;
	padding: 15px;
}

.ficheIntervenant .panel-default.intervenantInvalide {
	background-color: #EEE;
}

.ficheIntervenant .bottomRow {
	bottom: 15px;
	left: 20px;
	padding: 0 15px;
	position: absolute;
	right: 20px;
}

/** CSS pour la conformite de la zgc */
.commentaireConfZgc {
	max-height: 250px;
	overflow: auto;
}

/** CSS pour le détail bilan quinquennal volume ZGC */
.zgcBilanQuinquennalVolumeLegend span {
	margin-right: 5px;
}

.zgcBilanQuinquennalVolumeLegend span:last-child {
    margin-right: 0px;
}

.zgcBilanQuinquennalVolumeLegend span.infoCol {
	padding-right: 30px;
}

/** CSS pour les filières et traitements du STEU */
.debitTsExplication {
	font-weight: normal;
	font-style: italic;
	color: #337ab7;
	margin-left: 10px;
}

.fileNature {
	background-color: #337ab7;
	border: 1px solid gray;
	color: white;
	padding: 5px;
}

/** CSS pour les ouvrages rattachés */
.activeShowLink,.inactiveShowLink {
	padding-left: 15px;
	position: relative;
}

.activeShowLink::before {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #337ab7;
	bottom: calc(50% - 5px);
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	width: 0;
}

.inactiveShowLink::before {
	border-bottom: 5px solid transparent;
	border-left: 10px solid #337ab7;
	border-top: 5px solid transparent;
	bottom: calc(50% - 5px);
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	width: 0;
}

/** CSS pour fichiers de mesures */
.yearsAction {
	margin-top: 5px;
}

.yearsAction i {
	float: left;
}

.yearsAction div {
	float: left;
	margin-right: 10px;
	text-decoration: underline;
}

/** CSS pour les intervenants scl */
.addItv {
	margin-top: -5px;
}
	
/* css suivi synchro */
.synchroSubTitle {
    font-size: 12px;
}

.synchroIcon2 {
    font-size: 14px;
    margin-top: 0px;
    margin-left: 0px;
}

.synchroHeader0 {
    background-color: #dad9d9;
    min-height: 2.5em;
}

.synchroHeader {
    background-color: #F5F5F5;
    min-height: 2em;
}

.synchroHeaderPointMesure {
    border-bottom: 1px solid;
    min-height: 1.5em;
}

.synchroLine1 {
    background-color: #FFFFFF;
    min-height: 2em;
}

.synchroLine2 {
    background-color: #F5F5F5;
    min-height: 2em;
}

.rowWithCheckbox {
	margin-left: -35px;
    margin-right: 35px;
}

.roseauSynchroRow {
    border-top: 1px solid lightgrey;
    min-height: 2.5em;
}

.roseauSynchroMultiRow {
    border-top: 1px solid lightgrey;
    min-height: 2em;
}

.minHeightSynchroRow {
	min-height: 1.5em;
}

.roseauSynchroSubRow {
    margin-left: 50px;
    margin-right: -50px;
}

.exponentIcon {
	font-size: 0.75em;
}

.indexIcon {
    font-size: 0.75em;
}

.overlay-lower-right {
        font-size: 60% !important;
        position: relative;
        bottom:-10px;
        right:-20px;
}

.wrapTopRight {

  display: inline-block;
  position: relative;
}

.wrapTopRight > .fa-link {
  position: absolute;
  top: -3px;
  left: +20px;
}

.wrapTopRight > .fa-chain-broken {
  position: absolute;
  top: -3px;
  left: +20px;
}

.wrapTopLeft {

  display: inline-block;
  position: relative;
}

.wrapTopLeft > .fa-link {
  position: absolute;
  top: -3px;
  left: -10px;
}

.wrapDownRight {

  display: inline-block;
  position: relative;
}

.wrapDownRight > .fa-link {
  position: absolute;
  bottom: -3px;
  left: +20px;
}

.wrapDownRight > .fa-chain-broken {
  position: absolute;
  bottom: -3px;
  left: +20px;
}

.wrapDownLeft {

  display: inline-block;
  position: relative;
}

.wrapDownLeft > .fa-link {
  position: absolute;
  bottom: -3px;
  left: -10px;
}

.linkIcon {
    font-size: 18px;
}

.grise {
	color: #7D9799;
}

.listeSansPuce {
	list-style-type: none;
}

/** CSS carto */
.positionRelative {
    position: relative;	
}

.imageLegende {
	border: 1px solid black;
	bottom: 6px;
	position: absolute;
	right: 10px;
	z-index: 999;
}

.imageLegende.popup {
	bottom: 55px;
	right: 10px;
}

.texteLegende {
	background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1))
		repeat scroll 0 0;
	bottom: 6px;
	height: 56px;
	position: absolute;
	right: 10px;
	width: 56px;
	z-index: 1000;
}

.texteLegende.popup {
	bottom: 55px;
	right: 10px;
}

.texteLegende span {
	bottom: 2px;
	color: white;
	font-size: 10px;
	left: 10px;
	position: absolute;
}

.arrowCarto {
	top: 5px;
	right: 0;
	position: absolute;
	z-index: 999;
}

.legendeCarto {
    top: 25px;
    right: 0;
    position: absolute;
    z-index: 999;
}

.og-map-large.mappoppup {
    height: 700px;
    width: 1200px;
}
.leaflet-container {
    background: none;
    outline: 0 none;
}

.arrowCartoLeaflet, .arrowCartoLeaflet:hover {
    background: white none repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: 1px 1px 12px #888;
    color: black;
    height: 42px;
    padding: 11px;
    position: absolute;
    right: 28px;
    top: 60px;
    width: 42px;
    z-index: 999;
}

.roseauLink {
	color: #337ab7;
    text-decoration: none;
}

.roseauLink:hover {
    cursor: pointer;
    text-decoration: underline;
}

.exportButton > .btn.btn-default.dropdown-toggle {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #fff;
}

.exportButton a {
    margin-left: 0;
}

.dropdown-menu > li > a.redIcon {
    color: #c5000b;
}

.detailFicheButton .exportButton {
    margin-left: 15px;
}

.tempsSec::before {
    border-bottom: 5px solid orange;
    border-left: 5px solid orange;
    border-top: 5px solid orange;
    bottom: 0;
    content: " ";
    height: 100%;
    left: 5px;
    position: absolute;
}

.tempsSecBottom15px::before {
    border-bottom: 5px solid orange;
    border-left: 5px solid orange;
    border-top: 15px solid orange;
    bottom: 15px;
    content: " ";
    height: calc(100% - 15px);
    left: 5px;
    position: absolute;
    width: 0;
}

.infoText {
	font-size: 14px;
}