html,
    body{
        height:100%;
        padding:0;
        margin:0;
        font-family:Open Sans, sans-serif;
        font-size:1em;
        color : darkslategrey;

    }
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    .page{  
        /*position:relative;*/
        display:table;
        table-layout:fixed;
        width:100%;
        height:100%;
        line-height:normal;
        text-align:center;
        /*color:#194704;*/
        /*background-color:#f0f0f0;*/
        background-size:cover;
        background-position:50% 50%;
        background-repeat:no-repeat;
        background-attachment:fixed
    }
    h1,h2,h3,h4,h5{
        line-height:1.3;
        color : black;
        font-weight:normal
    }
    .bg-position-top{background-position:50% 0}
    .bg-position-middle{background-position:50% 50%}
    .bg-position-bottom{background-position:50% 100%}

    a,a:link{
        color:inherit;
        filter:alpha(opacity=85);
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
        opacity:0.85
    }

    .container{
        position:relative;
        width:100%;
        padding:1em 2em;z-index:1
    }
    .main-container {
      display: grid;
      grid-template :
        "header header" 100px
        "menu menu" 70px
        "left right"
        "footer footer" 50px;
      padding: 0px;
      height: 100%;
      column-gap:1px;
      row-gap:1px;
      grid-template-columns : 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }
    .main-container div {
      background-color: #fff;
      padding:0px;
    }
    .main-container div.header {
      grid-area: header ;
      max-height: 100px;
    }
    .main-container div.menu {
      grid-area: menu ;
      max-height: 70px;
    }
    .main-container div.left {
      grid-area : left;
      overflow: auto;
      min-width: none 100%;
      /*resize: horizontal;*/
      /**border: 3px dotted blue;**/
    }
    .main-container div.right {
      grid-area: right;
      display:grid;
      grid-template : 
        "infos"
        "pdf";
      row-gap: 10px;
    }
   .right div.infos {
      grid-area : infos;
      overflow: auto;
      /*border: 3px dotted orange;*/
      height: min-content;
      width: max-content;
    }
   
    #infos-select, #infos-edit, #infos-create {
      border-color: lightgrey;
      border : solid 0.5px;
      border-radius :20px;
      padding-left: 10px;
      padding-right: 10px;
      margin-right: 10px;
      margin-left: 20px;
      padding-bottom: 20px;
    }

    .right div.pdf {
      grid-area : pdf;
      margin-right: 10px;
      overflow: auto;
      /*border: 3px dotted gray;*/
    }
    .main-container div.footer {
      grid-area : footer;
      max-height: 50px;
    }

    .content{
        max-width:900px;
        margin:0 auto;
        padding-top:100px;
    }
    .social-links:empty{outline:1px solid yellow}
    .social-links{padding:1em 0;vertical-align:middle}
    .social-links a{padding:0 0.3em;line-height:normal}
    .hosting-info{position:absolute;display:block;bottom:0;left:0;right:0;padding:1em;font-size:0.8em}
    .hosting-info p{margin:0;padding:0;font-size:12px}
    .overlay-dark{background-color:#333}
    .overlay-dark:before{background-color:#333}
    .overlay-bright{background-color:white}
    .overlay-bright:before{
        background-color:white;
        filter:alpha(opacity=70);
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        opacity:0.7
    }
    body.debug:after{
        content:"default";
        position:fixed;
        left:0;
        bottom:0;
        background-color:white;
        color:black;
        padding:0.5em;
        font-size:10px;
        text-transform:uppercase
    }
    @media screen and (max-width: 640px){
        body.debug:after{content:"small"}
        h1{font-size:2em}
        ul,ol{max-width:none}
        .page{min-width:300px}
        .page .container{padding:3em}
    }
    @media screen and (min-width: 641px) and (max-width: 1199px),(min-height:500px) and (max-height: 1199px){
        body.debug:after{content:"medium"}
    }
    @media screen and (min-width: 1200px){
        body.debug:after{content:"large"}
    }
    .page .fallback-bg{display:none}
    .ie8 .page .fallback-bg{
        display:block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        max-width:inherit;
        z-index:0
    }
    .page[class]:before{filter:alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0}
    .top {
        /*vertical-align: top;*/
        max-height: 100px;
        color: #194704;
        width:100%;
        overflow: hidden;
    }
    
nav {
	margin-left:50px;
    margin-top:10px;
    width:100%;
    height:auto;
    display:inline-block;
}

nav ul {
	margin:0px;padding:0px;
    list-style-type:none;
    display:inline-block;
    z-index: 10;
    background-color: white;
}

nav .last {
    float:right;
    margin-right:100px;
}

nav ul li {
	position:relative;
	margin:0px 100px 0 0;
    display:inline-block;
    }

li > a:after { content: ' »'; } /* Change this in order to change the Dropdown symbol */

li > a:only-child:after { content: ''; }

nav ul li a {
    padding:5px;
    display:inline-block;
    text-decoration:none;
}

nav ul li a:hover {
  opacity:0.5;
}

nav ul li ul {
    display:none;
    position:absolute;
    left:0;
    float:left;
}

nav ul li ul li {
    width:100%;
    border-bottom:1px solid #23734C;
}

nav ul li:hover ul {
  display:block;
}

.demo {
    height: 50px;
    line-height: 50px;
    vertical-align : middle;
    background-color:#F6F8F6;
    margin-top : 5px;
    padding-left:50px;
    border-top: lightgray 0.5px solid;
    
}
.input,
input,
select {
  font-size: 16px;
  font-size: max(16px, 1em);
  font-family: inherit;
  padding: 0.25em 0.5em;
  background-color: #fff;
  border: 1px solid lightgray;
  border-radius: 4px;
}
.input:not(textarea) {
  line-height: 1;
  height: 2.25rem;
}
input[type="file"] {
  font-size: 0.9em;
  padding-top: 0.35rem;
}
.input[readonly] {
  border-style: dotted;
  cursor: not-allowed;
  color: #777;
}
.input[disabled],
option[disabled] {
  --input-border: #ccc;
  background-color: #eee;
  cursor: not-allowed;
}
textarea.input {
  resize: vertical;
}
.input:focus {
  border-color: darkgreen;
}
button,
.button {
  font-size: 16px;
  font-size: max(16px, 1em);
  font-family: inherit;
  text-decoration: darkgreen;
  background-color: #F6F8F6;
  padding: 0.25em 0.5em;
  border: 1px solid darkgreen;
  border-radius: 10px;
}

button:hover {
      opacity:0.5;
      cursor: pointer;
}

select {
    color:darkslategray;
}

.tooltip-visible {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: rgb(242, 243, 196);
  color: black;
  text-align: center;
  font-size: x-small;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 100;
  left: 105%;
  bottom: 100%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  cursor:auto;
}

/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

/*
 Styling
*/
.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 20px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  color:lightgray;
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
}

input:focus-visible + label {
  outline: 2px solid darkgreen;
  border-radius: 3px;
}

.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
  color: darkgreen;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: darkgreen;
}

.tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid darkgreen;
  margin-bottom: -1px;
}

.tab-panel {
  border-top: 1px solid #ccc;
}

.wtree {
  li {
    list-style-type: none;
    margin:10px 0 10px 10px;
    position: relative;
    &:before {
      content: "";
      counter-increment: item; 
      position: absolute;
      top:-10px;
      left:-30px;
      border-left: 1px solid lightgray;
      border-bottom:1px solid lightgray;
      width:30px;
      height:15px;
    }
    &:after {
      position:absolute;
      content:"";
      top:5px;
      left:-30px;
      border-left: 1px solid lightgray;
      border-top:1px solid lightgray;
      width:30px;
      height:100%;
    }
    &:last-child:after {
      display:none;
    }
    span {
      display:flex;
      padding:5px;
      text-decoration:none;
      color: darkgreen;
      border: 1px solid darkgreen;
      width:20%;

    }
    li span {
      color:lightgrey;
      border: 1px solid lightgrey;
      width:40%;

    }
  }
}

.tree-nav {
  summary {
    display: block;
    cursor: pointer;
    outline: 0; 
    max-width: 50%;
  }
  summary::-webkit-details-marker {
    display: none;
  }

  .tree-nav__item {
    display: block;
    white-space: nowrap;
    position: relative;
  }
  .tree-nav__item.is-expandable::before {
    border-left: 1px solid darkgreen;
    content: "";
    height: 100%;
    left: 0.8rem;
    position: absolute;
    top: 2.5rem;
    height: calc(100% - 3rem);
  }
  .tree-nav__item .tree-nav__item {
    margin-left: 2.4rem;
  }
  .tree-nav__item.is-expandable > .tree-nav__item-title {
    padding-left: 2.4rem;
  }

  .tree-nav__item-title {
    cursor: pointer;
    display: block;
    outline: 0;
    line-height: 2.2rem;
  }
  .tree-nav__item-title .icon {
    display: inline;
    padding-left: 1.6rem;
    margin-right: 0.8rem;
    color: #666;
    font-size: 1.4rem;
    position: relative;
  }
  .tree-nav__item-title .icon::before {
    top: 0;
    position: absolute;
    left: 0;
    display: inline-block;
    width: 1.6rem;
    text-align: center;
  }

  .tree-nav__item-title::-webkit-details-marker {
    display: none;
  }
  .tree-nav__item is-expandable {
    margin-bottom: 0.2rem;
  }
  .tree-nav__item.is-expandable > .tree-nav__item-title::before {
    position: absolute;
    will-change: transform;
    transition: transform 300ms ease;
    font-family: "ionicons";
    font-size: 1rem;
    content: "\f125";
    left: 0;
    display: inline-block;
    width: 1.6rem;
    text-align: center;
  }

  .tree-nav__item.is-expandable[open] > .tree-nav__item-title::before {
    font-family: "ionicons";
    transform: rotate(90deg);
  }

  .tree-nav__item-title::selection + label {
    color: blue;
  }

  input :checked > .displaydetail {
    visibility:visible;
  }
  .tree-nav__radio_label {line-height: 2em;}
}

  input button:hover {
      opacity:0.5;
      cursor: pointer;
  }


.displaydetail {
  border:solid 0.5px;
  width:auto;
  height:auto;
  left:100%;
  top:-20px;
  position: absolute;
  border-radius: 20px;
  border-color: lightgrey;
  margin-top:1rem;
  padding: 1rem 2rem 1rem 2rem; 
  visibility: hidden;
}

.displaydetailreglement {
  border:solid 0.5px;
  width:auto;
  max-width: 50%;
  height:auto;
  left: 50%;
  position: absolute;
  border-radius: 20px;
  border-color: lightgrey;
  margin-top:-4rem;
  padding: 0rem 1rem 1rem 1rem; 
  visibility: hidden;
}
.displaydetailpreavis {
  border:solid 0.5px;
  width:auto;
  max-width: 30%;
  height:auto;
  left: 50%;
  position: absolute;
  border-radius: 20px;
  border-color: lightgrey;
  margin-top:-4rem;
  padding: 0rem 1rem 1rem 1rem; 
  visibility: hidden;
}

input[type="radio"][name="tree-nav__radio"], input[type="radio"][name="reglements-row-select"] {
  display:none;
}

#tableReglements, #tablePreavis, #tableEntente {
  margin-top:30px;
  border-collapse: collapse; /* Collapse borders */
  width: auto;
  max-width: 50%;
  border: 1px solid #ddd; /* Add a grey border */
  display:table;
}

#tableReglements th, #tableReglements td, #tablePreavis th, #tablePreavis td, #tableEntente th, #tableEntente td {
  text-align: left; /* Left-align text */
  padding: 8px; /* Add padding */
}

#tableReglements tr, #tablePreavis tr, #tableEntente tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#tableReglements tr.header, #tableReglements tr:hover, #tableReglements tr:has(input[type="radio"]:checked), 
#tablePreavis tr.header, #tablePreavis tr:hover, #tablePreavis tr:has(input[type="radio"]:checked),
#tableEntente tr.header, #tableEntente tr:hover, #tableEntente tr:has(input[type="radio"]:checked){
  /* Add a grey background color on the selected row and on hover */
  background-color: #f1f1f1;
}

#tableReglements tr:has(input[type="radio"]:checked), #tablePreavis tr:has(input[type="radio"]:checked) {
  background-color: rgb(234, 244, 236);
}

#tablePreavis tr.header, #tablePreavis tr.header, #tableEntente tr.header {
  color:darkgreen;
}

.sujetreglement, .sujetpreavis, .sujetentente {
  width: auto;
  background-color: rgb(234, 244, 236);
  border:solid 0.2px darkgreen;
  color: darkgreen;
  font-size: small;
  border-radius: 6px;
  padding: 5px 5px 5px 5px;
  z-index: 1;
  display:inline;
}

#upload{

    padding:30px;
    border-radius:3px;

    margin:20px auto 100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#drop{
    background-color:lightgrey;
    padding: 40px 50px;
    margin-bottom: 30px;
    border: 1px solid darkgreen;
    border-radius: 3px;
    text-align: center;

    font-size:16px;
    font-weight:bold;
    color:#7f858a;
}

#drop a{
    background-color:darkgreen;
    padding:12px 26px;
    color:#fff;
    font-size:14px;
    border-radius:2px;
    cursor:pointer;
    display:inline-block;
    margin-top:12px;
    line-height:1;
}

#drop a:hover{
    background-color:#0986a3;
}

#drop input{
    display:none;
}

#upload ul{
    list-style:none;
    margin:0 -30px;
}

#upload ul li{

    border-top:1px solid darkgreen;
    border-bottom:1px solid darkgreen;
    height: 52px;
    position: relative;
}

#upload ul li input{
    display: none;
}

#upload ul li p{
    width: 144px;
    white-space: nowrap;
    font-size: small;
    position: absolute;
    top: -5px;
    left: 100px;
}

#upload ul li i{
    font-weight: normal;
    font-style:normal;
    color:#7f7f7f;
    display:block;
}

#upload ul li canvas{
    top: 1px;
    left: 32px;
    position: absolute;
}

#upload ul li span{
    width: 15px;
    height: 12px;
    background: url('img/icons.png') no-repeat;
    position: absolute;
    top: 15px;
    right: 100px;
    cursor:pointer;
}

#upload ul li.working span{
    height: 16px;
    background-position: 0 -12px;
}

#upload ul li.error p{
    color:red;
}