html {height: 100%; }
body#isocel {
  font-family: calibri, rubik, arial;
  font-size: 12pt;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-right: 0px;
  border-right: 0px hidden white;
}
.h0
{
  font-size: 150%;
  font-weight: bold;
}
h1 {
  font-size: 110%;
  padding-left: 5px;
  padding-bottom: 5px;
  padding-top: 1px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-color: red;
  border-width: thin;
  border-style: none none solid solid;
  font-variant: small-caps;
  clear: both;
}
h2 {
  font-weight: bold;
  font-size: 105%;
  margin: 7px 0px 3px 0px;
  border: 0px solid red;
}
h2:nth-child(1n+2) {
  margin-top: 12px;
}
h3 { font-weight: normal; font-size: 100%; text-decoration: underline; margin: 7px 0px 0px 0px;}
h4 { font-weight: normal; font-size: 100%; font-style: italic;}

h2 + ul {margin-top: 0px;}
ul {padding-left: 20px; margin-left: 0px;}
ul > li {margin-top: 6px;}
ul + li {margin-top: 10px;}
li + li {margin-top: 4px;}

a {color: black;}
a:visited {color: black;}
a:hover {color: red;}
#ndc-t a:hover > i {color:gray;}
li > a {text-decoration: none;}

i.fa-link
{
  font-size: smaller;
}

.mrl-1 {margin-left: auto !important; margin-right: auto !important; }
.ml-1 {margin-left: auto !important;}
.ml0 {margin-left: 0px !important;}
.ml1 {margin-left: 10px !important;}
.ml2 {margin-left: 20px !important;}
.ml3 {margin-left: 30px !important;}
.ml4 {margin-left: 40px !important;}
.mr-1 {margin-right: auto !important;}
.mr0 {margin-right: 0px !important;}
.mr1 {margin-right: 10px !important;}
.mr2 {margin-right: 20px !important;}
.mr3 {margin-right: 30px !important;}
.mr4 {margin-right: 40px !important;}
.mb-1 {margin-bottom: auto !important;}
.mb0 {margin-bottom: 0px !important;}
.mb1 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb2 {margin-bottom: 20px !important;}
.mb3 {margin-bottom: 30px !important;}
.mb4 {margin-bottom: 40px !important;}
.mt-1 {margin-top: auto !important;}
.mt0 {margin-top: 0px !important;}
.mt1 {margin-top: 10px !important;}
.mt2 {margin-top: 20px !important;}
.mt3 {margin-top: 30px !important;}
.mt4 {margin-top: 40px !important;}
.pl-1 {padding-left: auto !important;}
.pl0 {padding-left: 0px !important;}
.pl1 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl2 {padding-left: 20px !important;}
.pl3 {padding-left: 30px !important;}
.pl4 {padding-left: 40px !important;}
.pr-1 {padding-right: auto !important;}
.pr0 {padding-right: 0px !important;}
.pr05 {padding-right: 5px !important;}
.pr1 {padding-right: 10px !important;}
.pr2 {padding-right: 20px !important;}
.pr3 {padding-right: 30px !important;}
.pr4 {padding-right: 40px !important;}
.pb-1 {padding-bottom: auto !important;}
.pb0 {padding-bottom: 0px !important;}
.pb1 {padding-bottom: 10px !important;}
.pb2 {padding-bottom: 20px !important;}
.pb3 {padding-bottom: 30px !important;}
.pb4 {padding-bottom: 40px !important;}
.pt-1 {padding-top: auto !important;}
.pt0 {padding-top: 0px !important;}
.pt05 {padding-top: 5px !important;}
.pt1 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt2 {padding-top: 20px !important;}
.pt3 {padding-top: 30px !important;}
.pt4 {padding-top: 40px !important;}
.br {border-right: 1px solid black; }
.bl {border-left: 1px solid black; }
.center {text-align: center; margin:auto; }
/********************/
/* main page header */
/********************/
#main-header
{
  display: flex;
  flex-direction: row;
}
#main-header div {margin: auto; }
#main-header .header-logo img {height: 55px; v}
#main-header .header-title {flex: 1; text-align: center;}
#main-header .header-nav {text-align: right; margin-right: 8px;}
.headco {font-size: 150%; font-family: rubik; font-weight:bold;}
.headdesc {font-size: 120%; font-family: rubik;}
/* end main page header */


footer /* main page footer */
{flex-shrink: 0; margin: auto auto 15px auto; padding-top: 20px;}
section, .mp-container {display: flex; wrap: wrap; clear: both;}
section .main-article
{
  flex: 0.5 3 auto;
  padding: 0px 20px;
  max-width: 900px;
  margin: 0px;
  padding-bottom: 15px;
}

section .ndc /* box shadow juste aux notes de calculs */
{
  box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.2), 0px 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.left-article { width: 23%; padding-right: 20px;  flex: 2 1 auto;}
.right-article { width: 21%; padding-left: 20px;  flex: 2 1 auto;}
.left-article, .right-article > h1 {font-size: 93%}
section .unique {margin:auto;}


@media screen and (max-width: 800px) {
  #main-content {display: flex; flex-direction: column-reverse}
  #isocel section .main-article {width: 98%; padding: 0px}
  #ndc-history {width: 98%; padding: 0px}
  #ndc-ads {width:98%; padding: 0px;};
}
@media screen and (max-width: 800px) {
  section .ndc-main {box-shadow: none !important}
  article.main-article {box-shadow: none !important}
}

@media print {
  article.main-article {width: 100%; padding: 0px; margin:0px; box-shadow: none;}
  #main-header {display: none;}
  .noPrint {display: none !important; }
  .right-article {display: none;}
  .left-article {display: none;}
  .tooltip {display: none;}
  i.fa {display: none;}
}


.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted red;*/
  font-size: 80%;
}

.tooltip .tooltiptext {
  visibility: hidden;
  font-size: 120%;
  width: 270px;
  bottom: 100%;
  left: 50%;
  margin-left: -135px;
  /* letter-spacing: 1px; */
  background-color: gray;
  color: white;
  text-align: left;
  border-radius: 6px;
  /* border: 1px solid red;*/
  padding: 5px;
  position: absolute;
  box-shadow: 0 0 5px rgba(255,255,255,1);
  overflow: visible !important;
  white-space: normal !important;
  z-index:1;
}
.tooltip .tooltiptext::after{
  content: " ";
  position: absolute;
  top:100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  overflow: visible !important;
  white-space: normal !important;
  border-color: gray transparent transparent transparent;
}

.refnum {
  font-size: 80% !important;
}

.ttart-content
{
  padding: 5px;
  border: solid 1px white !important
}
.ttarticle {
  font-size: 105% !important;
}

.tt15 {
  width: 150px !important;
  margin-left: -75px !important;
  text-align: center !important;
}

.tt500
{
  width: 500px !important;
  margin-left: -250px !important;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  overflow: visible !important;
  white-space: normal !important;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 3px rgba(255, 0, 0, 1);
  outline: none;
  border: 1px solid rgba(125, 125, 125, 1);
}

.hide {display:none; visibility: hidden;}

/************/
/* CONTACT  */
/************/
.contact-form { flex: 1;}
.form-group {  width:100%;  padding-top: 15px;}
.form-group > label { width: 75px; }
.form-group > textarea {  height: 200px;  resize: none; }
.form-group > textarea, .form-group > input {  flex: 1;  width: 100%;  max-width: 400px; }
.contact-touch {flex: 1; max-width: 400px; padding-left: 20px;}
@media screen and (max-width: 800px) {
  #contact-main-container {display: flex; flex-direction: column-reverse;}
  #contact-main-container > div {width: 100%; flex: 1}
}
*.has-error {color: red !important; text-align: center; padding: 0px; margin: 0px;}
.hidden {display: none !important;}
.contact-form button {width: 100%; height: 30px; max-width: 400px; margin: auto auto auto 75px;}
/* FIN CONTACT */

/* liste de référence */
ol.ref {list-style: none; counter-reset: li}
ol.ref > li::before{
  content: "[" counter(li) "]";
  display: inline-block;
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em;
}
ol.ref > li {
  counter-increment: li;
  padding-bottom: 5px;
  margin-left: -1em;
}