body
{
    background-color: #ddd;
}

body > #topmenu
{
    background-color: #28C2FB;
}

body > #page
{
    margin : 5px;
    margin-top : 10px;
	height: calc(100% - 55px);
}

.flex
{
    display:flex;
}

.flex-column
{
    flex-direction:column;
}

.flex.center
{
    height:100%;
    justify-content: center;
    align-items: center;
}
.flex > .growable
{
    flex-grow:1;
	flex-basis: 100px;
	overflow-x: hidden;
}
.fullwidth
{
    width:100%;
}

table
{	border-spacing : 0;
    border-collapse : collapse;
}
table td, table th{
    border: 1px solid black;
    padding:2px;
}

#calendar
{
    padding : 20px;
}

#calendar > table
{
    width : 100%;
}

#calendar > table ~ table
{
    margin-top:10px;
}

#calendar > table > tbody > tr > th
{
    background-color: #a1e6ff;
}

#calendar > table > tbody > tr > td,#calendar > table > tbody > tr > thj
{
    vertical-align: middle;
}

#calendar > table > tbody > tr > td.noday, #calendar > table > tbody > tr > td.noborder, td.noborder
{
    border : 0;
}

#calendar > table  .numSem{
    font-size : 0.7em;
}

#semaine
{
    padding : 2px;
	overflow: auto;
	flex-grow: 1;
	
	position: relative;
	overflow: auto;
	white-space: nowrap;
}

#semaine > table > thead > tr > th
{
    background-color: navajowhite;
}


#semaineold > table
{
    border-collapse: separate;
	border-spacing: 0;
}


#semaine > table > tbody > tr > th, #semaine > table > tbody > tr > td
{
    vertical-align: middle;
}

#semaine > table > tbody > tr
 {
     height:30px;
 }

#semaine > table > tbody > tr > td.noday, #calendar > table > tbody > tr > td.noborder
{
    border : 0;
}

#semaine > table > tbody > tr > td
{
	text-align:center;
}

#semaine > table > tbody > tr > th.stickycol
{
    position:sticky!important;
	border: 0;
	left:0px;
	box-shadow: inset 1px 0px 0 black, inset -1px -1px 0 black;
}

#semaine > table > tbody > tr > th.stickycol::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  height: 100%;
  width:2px;
  border-right: 1px solid black;
  background-color:#eeeeee;
}
#semainea > table > tbody > tr > th.stickycol::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-right: 1px solid black;
}


#menuSemaine
{
    padding : 20px 20px 0 20px;
}

#menuSemaine> #menuMilieu
{
    margin : 0px 20px;
    border : 1px solid black;
    text-align: center;
}

.button
{
    background-color: #a1e6ff;
    text-align:center;
}

h1
{
    width:100%;
    font-size : 1.4em;
    text-align: center;
    background-color : bisque;
    padding : 10px;
}

table
{
    margin:auto;
    margin-top : 10px;
}

table.show
{
    min-width:50%;
}
table.show  tr > .tabActions
{
    width:10px;
    white-space: nowrap;
}
table.show  tr > .tabActions > a ~ a
{
    margin-left:10px;
}

table > thead > tr > th
{
    background-color: navajowhite;
    padding : 5px;
}

table > tbody > tr > th
{
    text-align: center;
    background-color: navajowhite;
    padding : 2px;
}

table > tbody > tr > td.tabActions i
{
    font-size: 1.5rem;
    margin : 2px 5px;
}

.blocPanneau
{

    padding : 5px;
    border:1px solid black;
    border-radius : 5px;
    box-shadow:2px 2px 2px grey;
    background-color : #eeeeee;
}

.blocPanneau:not([style*="display: none"]) + .blocPanneau
{
    margin-left : 10px;
	margin-bottom : 0px;
}



.blocPanneau > .explications
{
	margin : 10px;
	padding : 10px;
	border:1px solid black;
	border-radius : 5px;
    box-shadow:2px 2px 2px grey;
}

.blocPanneau > .explications > p
{
	
}

#printPdf
{
    cursor:pointer;
}

.notice
{
    margin-top : 20px;
    border : 1px solid grey;
    border-radius : 10px;
    padding : 10px;
    background-color: ivory;
}

.notice > legend
{
    font-size : 1.4em;
    background-color:#28C2FB;
    width: calc(100% + 20px);
    left: -10px;
    position: relative;
    margin: 0px;
    top: -10px;
    padding:10px;

    border-radius: 8px 8px 0 0;
}

.notice > legend.warning
{
    background-color:#ff455a;
}

.menu
{
    margin : 5px 0 ;
    text-align : right;
    height:40px;

}

.bouton, input[type=submit],input[type=button], a.menuelem
{
    border:1px solid black;
    border-radius: 5px;
    box-shadow:2px 2px 2px grey;
    background-color : #dddddd;

    height: 100%;
    display: inline-block;
    padding : 5px 10px;
}

.bouton:hover, input[type=submit]:hover,input[type=button]:hover ,a.menuelem:hover
{
    background-color : #cccccc;
}

a.menuelem > * {
    vertical-align:middle;
    height: 100%;
    margin : 0 5px;
}

.widthreduce
{
    max-width : max-content;
    margin : auto;
}

span.bold
{
    font-weight: bold;
}

.checkboxforshow
{
	display:none;
}

#showcalendar
{
	display:none;
	border : 1px solid black;
	text-align:center;
	
}

#checkboxshowcalendar:checked ~ #calendar
{
	display:block;
}
	
#tablerecapmensuel > tbody > tr > td 
{
	text-align:right;
	padding : 2px 5px;
}


@media screen and (max-width: 860px) {
  #content > div.flex {
    flex-direction: column;
	min-height: 100%;
  }
  
  .blocPanneau:not([style*="display: none"]) + .blocPanneau
{
    margin-left : 0px;
    margin-top : 10px;
}

  .flex > .growable {
		flex-basis: inherit;
	}
	
	#calendar
	{
		display:none;
	}
	
	#showcalendar
	{
		display:block;
	}
}

.colname, .coltotal
{
    width:1px;
    padding : 0 10px;
}

.rowimport > .colname
{
    background-color:lightblue;
}

tr.rowimport + tr:not(.rowimport)
{
    border-top:3px solid orange;
}

div.message
{
    padding : 5px;
}

#page > #content > div.message
{
    text-align:center;
    margin-bottom:5px;
}

div.warning
{
    background-color:#ff455a;
    color:white;
}
div.attention
{
    background-color:#ff955a;
    color:white;
}


table#docemargement > tbody > tr > td.docemarg > div > a.deletedoc
{
    float:right;
    margin-left:5px;
    cursor:pointer;
}


.licence-alert
{
    text-align:center;
    background-color:red;
    
    color:white;
    margin:5px;
    border-radius:5px;
    border-color:#ff8888;
}