/* Google font */
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allison&family=Barlow+Condensed:wght@400;600;700&display=swap');

@font-face {
  font-family: SignPainter;
  src: url("../Font/SignPainterHouseScriptRg.otf") format("opentype");
}

@font-face {
  font-family: Allison;
  src: url("../Font/Allison-Regular.ttf") format("truetype");
}
 
/* DEFAULTS
----------------------------------------------------------*/
:root {
  --main-back-color: rgb(26,59,110);
  --main-active-color: #66cccc;
  --main-font: 'Quicksand', 'Lato', sans-serif;

  --color-bkg-dark: rgb(26,59,110);
  --color-border-dark: rgb(26,59,110);
  
  --color-footer-text: #fff;
  --color-footer-back: rgb(26,59,110);

  --radius-small-all: 4px;
  --radius-big-all: 8px;
  --radius-small-left: 4px 0 0 4px;
  
  --link-normal: #7fd6d7;
  --link-hover: #3da5a5;
}


*:focus { outline: none; }

html {
  min-height: 100vh;
  font-family: var(--main-font);
  font-size: 10pt;
  font-weight: normal;
  scrollbar-width: thin;
}

body   
{
  /*background: #b6b7bc;*/
  background: #fff;
  font-size: 10pt;
  font-weight: 500;
  font-family: var(--main-font);
  color: #000;
  margin:0;
  width: 100%;
  scrollbar-width: thin;
  height: 100%;
}

.mainForm  
{
  min-height: 100vh;
}

a:link, a:visited
{
  color: var(--link-normal);
  font-weight: 500;
  text-decoration: none;
}

a:hover
{
  color: var(--link-hover);
}

a:active
{
  color: var(--link-hover);
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

div 
{ 
  /*border: 1px solid red;*/
  /*border-collapse: collapse;*/
}

/* Boite Note */
.Note {
  color: #808080;
  /*background: none repeat scroll 0 0 #FFF9D9;*/

  /*border: 1px solid #FFD700;*/
  border-radius: 4px 4px 4px 4px;

  /*margin: 5px;*/
  padding: 3px 5px 3px 5px;
  margin-right: 10px;
  /*position: relative;*/
  text-align: justify;
  white-space: normal;
  font-size: 0.8em;
}

.Note2, span.Note2 {
  color: #808080;
  font-size: 0.8em;
  text-align: left;
}

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

/* HEADINGS   
----------------------------------------------------------*/

ul { margin: 10px 0; }

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    text-transform: none;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

h1
{
    font-size: 1.6em;
    font-weight: 600;
    font-variant: normal;
}

h2
{
    font-size: 1.5em;
    font-weight: 500;
    font-variant: normal;
}

h3
{
    font-size: 1.2em;
    font-variant: normal;
}

h4
{
    font-weight: 600;
    font-size: 1.1em;
    display: inline-block;
}

h5, h6
{
    font-size: 1em;
}


/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}

.hCenter { text-align: center !important; }
.hRight { text-align: right; }
.floatRight { float: right; }
.floatLeft { float: left; }

.vMiddle { vertical-align: middle !important; }
.vMiddleM { vertical-align: middle!important; }
.vTop { vertical-align: top !important; }
.vBottom { vertical-align: bottom !important; }

.margin10 { margin: 10px; }
.padding10 { padding: 10px; }

.lightBlue { background: #EFF3FB !important; }
.lightRed { background: #F7DED9 !important; }
.lightRed .aspNetDisabled { background: #F7DED9 !important; }
.lightGreen { background: #DFEADE !important; }

.bkgGreen { background: green; }
.bkgRed { background: red; }

.red { color: Red!important; }
.green { color: Green!important; }
.modeTest { color: rgb(200,191,231)!important; }  /* Violet */
.modeDevis { color: rgb(63,72,204)!important; }   /* Bleue */
.modeFacture { color: Green!important; }
.modeOption { color: rgb(168,67,0)!important; }

.bold { font-weight: bold; }

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/*@media voir kaliteo*/

.page
{
  width: 100%;
  background-color: #fff; /*var(--cal-back-color);*/
  /*overflow:auto;*/
  margin:0;
  padding:0;
  min-height: 100vh;
}

.pageContent { padding-left: 5px; padding-right: 5px; }

.header
{
  /*position: relative;*/
  margin: 0;
  padding: 5px 0 5px 0;
  background: #fff;
  width: 100%;
  text-align: center;
}

.title
{
}

.imgLogo
{
  vertical-align: middle;
  text-align: center;
  max-height:60px;
}

.main
{
  margin: 0;
  padding: 0;
  height: 100%;
}

.leftCol
{
  padding: 6px 0px;
  margin: 12px 8px 8px 8px;
  width: 200px;
  min-height: 200px;
}

.footer
{
  color: var(--color-footer-text);
  background-color: var(--color-footer-back);
  border-top: 3px solid var(--main-back-color);
  padding: 8px 0px 8px 0px;
  margin: 0px auto;
  text-align: center;
  line-height: normal;
}

.footer h3 {
  color: var(--color-footer-text);
  font-size: 1.5em;
  font-weight: bold;
  font-variant: small-caps;
}

.footer a {
  display: inline-block;
  color: var(--color-footer-text);
  margin-bottom: 10px;
}

.footer a:hover {
  color: var(--link-hover);
}

.footer a:active {
  color: var(--link-hover);
}

/* MENU  ASP.NET
----------------------------------------------------------*/

div.menuContainer
{
  display: grid;
  grid-template-columns: repeat(6, auto);
  /*grid-template-rows: repeat(4, auto);*/
  /*grid-gap: 20px;*/
  grid-template-areas: "t t t t" "a b c d";
  background-color: white;
  justify-content: center;
  align-content: center;
  padding: 0 0 10px 0;
  width:100%;
}

.menuOnTop { position: fixed; top: 0; left: 0; z-index: 99; background-color: rgba(244,244,244,0.7)!important; }

div.menu
{
  grid-area: a;
  padding: 0;
  margin: 0 10px 0 10px;
  background-color: var(--main-back-color);
  border-radius: var(--radius-small-all);
  border: 1px solid var(--main-back-color);
  border-collapse: collapse;
}

div.menu:hover 
{
  border-radius: var(--radius-small-left);
  border: 1px solid var(--main-back-color);
}

div.menu .level1:first-child
{
  background-color: var(--main-back-color);
  color: white;
}

div.menu ul
{
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: auto;
  z-index: 10;
}

div.menu ul li a, div.menu ul li a:visited
{
  background-color: white;
  color: #000; 
  font-weight: normal;
  display: block;
  line-height: 1.35em;
  padding: 6px 8px;
  text-decoration: none;
  white-space: nowrap;
}

div.menu ul li ul
{
  border: 1px solid var(--main-back-color);
  box-shadow: -1px 1px 3px 0px rgba(0,0,0,0.5);
}

div.menu ul li ul li
{
  border-bottom: 1px solid #eee;
}

div.menu ul li ul li:last-child
{
  border-bottom: 0;
}

div.menu ul li a:hover
{
  background-color: var(--main-back-color);
  color: white;
  text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* Flèche si sous-menu présent */
div.menu a.popout.dynamic { background-image: url('../Images/submenu.gif'); background-position: center right 4px; background-repeat: no-repeat; background-origin: border-box; padding-right: 12px; }
div.menu a.popout.dynamic:hover { background-image: none; }


/* Masque le menu suivant si touch (hover:none) ou pas */
@media screen and (hover: hover) {
  /*div.menu { display: block; }*/
  #respMenu { display: none; }
}

@media screen and (hover: none)
{
  div.menu { display: none; }
  /*#respMenu { display: block; }*/
}


/* MENU RESPONSIVE
----------------------------------------------------------*/

.respMenuContainer {
  grid-area: a;
  background-color: var(--main-back-color);
  border-radius: var(--radius-small-all);
  border: 1px solid var(--main-back-color);
  border-collapse: collapse;
  margin: 0 10px;
}

#respMenu ul {
  margin: 0;
  padding: 0;
}

#respMenu .main-menu {
  display: none;
  max-height: calc(95vh - 200px); /* pour la bottom bar safari */
  overflow-y: scroll;
}

#tm:checked + .main-menu {
  display: block;
}

#respMenu input[type="checkbox"], 
#respMenu ul span.drop-icon {
  display: none;
}

#respMenu li, 
#toggle-menu, 
#respMenu .sub-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
}

#respMenu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#respMenu .sub-menu {
  background-color: var(--main-back-color);
  border-width: 1px 1px 0;
  margin: 0 1em;
}

#respMenu .sub-menu li:last-child {
  border-width: 0;
}

#respMenu li, 
#toggle-menu, 
#respMenu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#respMenu, 
#toggle-menu {
  background-color: var(--main-back-color);
}

#toggle-menu {
  box-sizing: border-box;
  padding: 5px 0 0 0;
  width: 90px; /*30px;*/
  height: 24px;
  text-align: center;
  vertical-align: middle;
}

.small-menu {
  width: 30px!important;
}

#respMenu a {
  padding: 0.6em 1em;
}

#respMenu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
}

#respMenu a:hover {
  background-color: white;
  color: #09c;
}

#respMenu .sub-menu {
  display: none;
}

#respMenu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#respMenu .sub-menu a:hover {
  color: var(--main-back-color);
}

#toggle-menu .drop-icon, 
#respMenu li label.drop-icon {
  position: absolute;
  right: 1.5em;
  top: 1.25em;
}

#respMenu label.drop-icon, #toggle-menu span.drop-icon {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, .125);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

#respMenu .drop-icon {
  line-height: 1;
}


/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}


.loginContainer, .footerContainer   /*, .boxContainer*/
{
  box-sizing: border-box;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: start;
  /*flex-flow: row wrap;*/
  flex-wrap: wrap;
  /*width: 100vw;*/
}

.boxContainer {
  display: grid;
  grid-gap: 2em; /* [1] Add some gap between rows and columns */
  grid-template-columns: repeat( auto-fill, 350px ); /* [2] Make columns adjust according to the available viewport */
  grid-auto-rows: minmax(350px, auto); /* [3] Set the height for implicitly-created row track */
  justify-content: center;
  align-items: start;
  
  background-color: #fff; 
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
}

.containerFullHeight, .loginContainer { min-height: calc(100vh - 60px - 50px); /* 100% - header - menu */ }
.loginContainer { background-color: var(--cal-back-color); align-items: center; }
.footerContainer { background-color: var(--color-footer-back); align-items: start; width: 100%; }

.loginInner, .boxInner, 
.boxInner25, .boxInner50, .boxInner75, .boxInner100,
.boxInner33, .boxInner67, .boxInner66
{
  display: block;
  color: var(--cal-text-color);
  padding: 20px;
  border-top: 5px solid var(--cal-text-color);
}

.boxInner, .boxInner25, .boxInner50, .boxInner75, .boxInner100,
.boxInner33, .boxInner67, .boxInner66
{ 
  box-sizing: border-box;
  background-color: var(--cal-back-color); 
  margin: 10px; 
}

.footerInner
{
  display: block;
  padding: 20px;
  max-width: 300px;
  text-align: left;
}

.boxInner { max-width: 600px; width: 340px; }
.boxInner.error { border-top: 5px solid #800; }
.boxInner.futur { border-top: 5px solid #080; }
span.errorSymbol { color: #800; float: right; font-weight: bold; }

.rowspan2 { grid-row-end: span 2; /*flex: 1 0 auto;*/ }
.rowspan3 { grid-row-end: span 3; /*flex: 1 0 auto;*/ }

.loginInner { background-color: #fff; width: 300px; }

.boxInner25 { width: calc(25% - 25px); }
.boxInner50 { width: calc(50% - 25px); }
.boxInner75 { width: calc(75% - 25px); }
.boxInner100 { width: calc(100% - 25px); }
.boxInner33 { width: calc(33% - 25px); }
.boxInner67, .boxInner66 { width: calc(67% - 25px); }


.btnNouveauClient, .btnTouch
{
  background-color: var(--main-back-color); 
  color: white; 
  line-height: 2em; 
  min-width: 130px; 
  border: 0;
  padding: 2px 5px 2px 5px;
  margin: 1px;
  font-weight: normal;
  font-family: var(--main-font);
  font-size: 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
}

.btnTouch { padding: 2px 10px 2px 10px; }
.btnNouveauClient { width: 100%; }

.btnTouch[disabled] { color: #C0C0C0 !important; background: #F2F2F2 !important; border-color: #C0C0C0 !important; }

.btnTouch:hover { text-decoration: none; color: #fff; border-color: #fff; background-color: var(--main-active-color); }
.btnTouch:link, .btnTouch:visited { text-decoration: none; color: #fff }

input.touchEntry, input.touchEntry50, input.touchEntry100, input.touchEntry100C, input.touchEntry150, input.touchEntry200, input.touchEntry300, input.touchEntry400,
select.touchEntry, select.touchEntry50, select.touchEntry100, select.touchEntry100C, select.touchEntry150, select.touchEntry200, select.touchEntry300, select.touchEntry400
{
  border: 1px solid #ccc; 
  padding: 5px 10px 5px 10px; 
  line-height: 1.5em; 
  margin: 1px 1px 3px 0;
  box-sizing: border-box;
}
input.touchEntry, select.touchEntry { width: calc(100% - 5px); }
input.touchEntry50, select.touchEntry50 { width: 50px; text-align: center; }
input.touchEntry100, select.touchEntry100 { width: 100px; }
input.touchEntry100C, select.touchEntry100C { width: 100px; text-align: center; }
input.touchEntry150, select.touchEntry150 { width: 150px; }
input.touchEntry200, select.touchEntry200 { width: 200px; }
input.touchEntry300, select.touchEntry300 { width: 300px; }
input.touchEntry400, select.touchEntry400 { width: 400px; }

span.touch { display:inline-block; margin: 3px 0 3px 0; }

textarea.touchEntry, textarea.touchEntry300 {
  padding: 1px 3px 1px 3px;
  border: 1px solid #ccc;
  font-family: var(--main-font);
  font-size: 1em;
  font-weight: normal;
  margin: 1px 1px 3px 0;
}

textarea.touchEntry, textarea.touchEntry300 {
  width: 300px;
}


/* MISC  
----------------------------------------------------------*/

.hidden { display: none; }

.clear { clear: both; }

.home {
  box-sizing: border-box;
  grid-area: b;
  font-size: 1em;
  padding: 4px;
  color: black;
  background-color: var(--main-back-color);
  border-radius: var(--radius-small-all);
  margin: 0 10px 0 10px;
  width: 32px;
  height: 32px;
  text-align: center;
}

.titre-menu {
  box-sizing: border-box;
  grid-area: t;
  font-size: 1em;
  padding-bottom: 4px;
  color: black;
  text-align: center;
  display: none;
  background-color: white;
  font-weight: bold;  
}

.loginDisplay, .btnMenu {
  box-sizing: border-box;
  font-size: 1em;
  color: black;
  border-radius: var(--radius-small-all);
  margin: 0 10px 0 10px;
  min-width: 32px;
  height: 32px;
  text-align: center;
}

.loginDisplay  
{
  grid-area: c;
  padding: 4px; 
  background-color: Green;
}

.btnMenu {
  grid-area: d;
  padding: 8px 8px 4px 8px;
  background-color: var(--main-back-color);
}

.loginDisplay a:link, .btnMenu a:link { color: white; }
.loginDisplay a:visited, .btnMenu a:visited { color: white; }
.loginDisplay a:hover, .btnMenu a:hover { color: white; }

.failureNotification
{
    font-size: 1em;
    color: Red;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

/* Position du texte sur les images
--------------------------------------------------*/

 /* Container holding the image and the text */
.ImageContainer {
  position: relative;
  text-align: left;
  color: white;
  display: inline-block;
}

.ImageTexte { display: inline-block; z-index: 10; margin: 0 30px 0 30px; padding: 10px; text-decoration: none; color: White; background-color: rgba(0,0,0,0.0); /*border-radius: var(--radius-small-all);*/ }

.TopLeft, .MiddleLeft, .BottomLeft, 
.TopRight, .MiddleRight, .BottomRight,
.TopCenter, .MiddleCenter, .BottomCenter 
{
  position: absolute;
}

.TopLeft {
  top: 50px;
  left: 50px;
}

.MiddleLeft {
  top: 50%;
  left: 50px;
  transform: translate(0, -50%);
} 

.BottomLeft {
  bottom: 50px;
  left: 50px;
}

.TopRight {
  top: 50px;
  right: 50px;
}

.MiddleRight {
  top: 50%;
  right: 50px;
  transform: translate(0, -50%);
} 

.BottomRight {
  bottom: 50px;
  right: 50px;
}

.TopCenter {
  top: 50px;
  left: 50%;
  transform: translate(-50%, 0);
} 

.MiddleCenter {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

.BottomCenter {
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
} 

.MgTop1 { margin-top: 1px; }
.MgTop2 { margin-top: 2px; }
.MgTop3 { margin-top: 3px; }
.MgTop5 { margin-top: 5px; }
.MgTop8 { margin-top: 8px; }
.MgTop10 { margin-top: 10px; }

.MgBottom5 { margin-bottom: 5px; }
.MgBottom8 { margin-bottom: 8px; }

.MgLeft20 { margin-left: 20px; }

.pdTop5 { padding-top: 5px; }

/* SLIDESHOW
---------------------------------------------------*/

div.slideShow
{
  position: relative;
  text-align: center;
  color: black;
  display: inline-block;
  width: 100%;
  margin: 0;
  max-height: 450px;
  overflow:hidden;
}

img.slideShowOLD
{
  display: block;
  width: auto;/* height will follow within image ratio */
  max-height: 340px;/* to overrride attribute height set in tag */
  vertical-align: middle;/* finalise vertical centering on baseline*/
  text-align: center;
}


/* Centre l'image sur overflow */
.imgContainer
{
  max-height: inherit;
  transform: translateY(50%);
}

img.slideShow  
{
  display: block;
  width:100%;
  transform: translateY(-50%);
}
/* Centre l'image sur overflow */


.arrow 
{
  display: inline-block;
  border: solid #bbb;
  border: ridge rgba(0,0,0,0.5);
  border-width: 0 3px 3px 0;
  padding: 3px;
  width:20px;
  height:20px;
  text-decoration: none;
  z-index:99;
}

.arrow:focus
{
  outline: none;
}

.arrow:hover
{
  border: solid #fff;
  /*border: ridge #fff;*/
  border-width: 0 4px 4px 0;
}

.rightArrow 
{
  position: absolute;
  float: right;
  top: 50%;
  right: 5px;
  transform: translate(0, -50%) rotate(-45deg);
  margin: 0 20px 0 0;
}

.leftArrow 
{
  position: absolute;
  float: left;
  top: 50%;
  left: 5px;
  transform: translate(0, -50%) rotate(135deg);
  margin: 0 0 0 20px;
}

/* Input
----------------------------------------------------------*/

input, select, textarea {
  margin: 1px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

input.passwordEntry { width: 300px; border: 1px solid #ccc; padding: 1px 3px 1px 3px; }

input.popEntry { width: 300px; border: 1px solid #ccc; padding: 1px 3px 1px 3px; }
input.popEntry50 { width: 50px; border: 1px solid #ccc; text-align: center; }
input.popEntry150 { width: 150px; border: 1px solid #ccc; text-align: center; }
input.popEntry100 { width: 100px; border: 1px solid #ccc; text-align: center; }
input.popEntry200 { width: 200px; border: 1px solid #ccc; text-align: left; }
input.popEntry300 { width: 300px; border: 1px solid #ccc; text-align: left; }
input.popEntry400 { width: 400px; border: 1px solid #ccc; text-align: left; }

select.popEntry200, .modalPopup_Content select.popEntry200  { width: 200px; border: 1px solid #ccc; text-align: left; }
select.popEntry300, .modalPopup_Content select.popEntry300  { width: 300px; border: 1px solid #ccc; text-align: left; }
select.popEntry400, .modalPopup_Content select.popEntry400  { width: 400px; border: 1px solid #ccc; text-align: left; }

textarea.popEntry, textarea.popEntry100, textarea.popEntry200, textarea.popEntry300, textarea.popEntry400, textarea.popEntry500 {
  padding: 1px 3px 1px 3px;
  border: 1px solid #ccc;
  font-family: var(--main-font);
  font-size: 1em;
  font-weight: normal;
}

textarea.popEntry, textarea.popEntry300 {
  width: 300px;
}

textarea.popEntry100 {
  width: 100px;
}

textarea.popEntry200 {
  width: 200px;
}

textarea.popEntry400 {
  width: 400px;
}

textarea.popEntry500 {
  width: 500px;
}

input.popEntryC { width: 90px; border: 1px solid #ccc; text-align: center; }
select.popEntryC, .modalPopup_Content select.popEntryC { width: 90px; border: 1px solid #ccc; text-align: center; }
select.cboNormal, .modalPopup_Content select.cboNormal { width: 150px; border: 1px solid #ccc; text-align: left; }
.modalPopup_Content select { width: 300px; border: 1px solid #ccc; }

label.popLabel { min-width: 75px; display:inline-block; }
label.popLabel90 { min-width: 90px; display:inline-block; }
label.popLabel100 { min-width: 120px; display:inline-block; }
label.popLabel150 { min-width: 150px; display:inline-block; }
label.popLabel200 { min-width: 200px; display:inline-block; }
label.popLabel300 { min-width: 300px; display:inline-block; }

/* Popup
---------------------------------------------*/

.modalPopup p { vertical-align: middle; }
.modalPopup img { vertical-align: middle; }

.modalPopup500 p { vertical-align: middle; }

.modalBackground {
	background-color: Black;
	filter: alpha(opacity=50);
	opacity: 0.5;
	z-index: 11 !important;
}

.modalBackgroundOver {
	background-color: Black;
	filter: alpha(opacity=50);
	opacity: 0.5;
	z-index: 9500 !important;
}

.modalPopup {
	background-color:#fff;
	border: 2px solid var(--main-back-color);
  border-radius: 4px 4px 4px 4px;
	width: auto !important;
	min-width:350px;
	min-height:140px;
	/*max-height:620px;*/
	max-height:95vh;
	z-index: 9001 !important;
}

.modalPopupShadow {
	background-color:#fff;
	/*border: 2px solid var(--main-back-color);*/
  /*border-radius: 4px 4px 4px 4px;*/
  box-shadow: 3px;
	width: auto !important;
	min-width:350px;
	max-width:95vw;
	min-height:140px;
	max-height:95vh;
	z-index: 9001 !important;
}

.modalPopupFixed 
{
	background-color:#fff;
	border: 2px solid var(--main-back-color);
  border-radius: 4px 4px 4px 4px;
	width: auto !important;
	z-index: 9001 !important;
}

.modalPopupOver {
	background-color:#fff;
	border: 2px solid var(--main-back-color);
  border-radius: 4px 4px 4px 4px;
	width: auto !important;
	min-width:350px;
	min-height:140px;
	/*max-height:620px;*/
	max-height:95vh;
	z-index: 9501 !important;
}

.modalPopup500 {
	background-color:#fff;
	border: 1px solid var(--main-back-color);
	
  border-radius: 4px 4px 4px 4px;
	width: 500px !important;
	min-width:350px;
	min-height:140px;
	/*max-height:620px;*/
	z-index: 9001 !important;
}

.modalPopupAuto {
	background-color:#fff;
	border: 1px solid var(--main-back-color);

  border-radius: 4px 4px 4px 4px;
	min-width:500px;
	min-height:140px;
	/*max-height:620px;*/
	z-index: 9001 !important;
}

.modalPopupAuto750 
{
	background-color:#fff;
	border: 1px solid var(--main-back-color);

  border-radius: 4px 4px 4px 4px;
	min-width:500px;
	max-width:95vw;
	/*width: 50%;*/
	min-height:140px;
	max-height:95vh;
	z-index: 9001 !important;
	overflow: auto;
}

.modalPopup750 
{
	background-color:#fff;
	border: 1px solid var(--main-back-color);

  border-radius: 4px 4px 4px 4px;
	min-width:500px;
	max-width:95vw;
	min-height:140px;
	max-height:95vh;
	z-index: 9001 !important;
	overflow: auto;
}

.modalPopup_Content {
	padding: 10px 10px 10px 10px;
  white-space: nowrap;
  vertical-align: middle;
	/*max-height:550px;*/
	overflow: auto;
}

.modalPopup_ContentScroll {
	padding: 10px 15px 10px 10px;
  white-space: nowrap;
  vertical-align: middle;
	max-height:85vh;
	overflow: scroll;
	/*overscroll-behavior: contain;*/
	
	/*** Firefox scrollbar ***/
	/*scrollbar-color: #888 #eee;*/
  scrollbar-width: thin;
	/*** Webkit scrollbar ***/
}

.wrap { white-space: normal; }

.border1px { border: 1px solid var(--main-back-color); }
.borderLeft { border-left: 1px solid #ddd; }

.modalPopup_Title {
  color: #FFF;
  font-weight: bold;
  background: var(--main-back-color);
  border: 1px solid var(--main-back-color);
  padding: 3px 5px 3px 5px;
  Cursor: move;
}

.modalPopup_WhiteTitle {
  color: var(--main-back-color);
  font-weight: bold;
  padding: 3px 5px 3px 5px;
  Cursor: move;
}

.modalPopup_FixedTitle {
  color: #FFF;
  font-weight: bold;
  background: var(--main-back-color);
  border: 1px solid var(--main-back-color);
  padding: 3px 5px 3px 5px;
}

.modalPopup_FixedTitle img { vertical-align: middle; }

.modalPopup500_Title {
  color: #FFF;
  font-weight: bold;
  background: var(--main-back-color);
  border: 1px solid var(--main-back-color);
  padding: 2px 5px 2px 5px;
  Cursor: move;
}

.modalPopup500_FixedTitle {
  color: #FFF;
  font-weight: bold;
  background: var(--main-back-color);
  border: 1px solid var(--main-back-color);
  padding: 2px 5px 2px 5px;
}

.bkgFiltre { background-color: var(--main-back-color); color: white; }
a.bkgFiltre:link, a.bkgFiltre:visited { color: #fff; text-decoration: none; }

/* BOUTON
----------------------------------------------------------*/

.aspNetDisabled { color: #C0C0C0 !important; background: #F2F2F2 !important; border-color: #C0C0C0 !important; }
aspNetDisabled:hover { text-decoration: none !important; color: #C0C0C0 !important; border-color: #C0C0C0 !important; }

.BtnAction200 { min-width: 200px !important; }
.BtnAction150 { min-width: 150px !important; }
.BtnAction, .BtnActionNP  { min-width: 90px; }
.BtnActionSmall { min-width: 30px; }

.BtnAction, .BtnAction200, .BtnAction150, .BtnActionNP, .BtnActionSmall
{
  font-weight: normal;
  font-family: var(--main-font);
  font-size: 1rem;
  display: inline-block;
  /*height: 25px;*/
  /*line-height:50px;*/
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
}

.BtnAction, .BtnAction200, .BtnAction150
{
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 0;
  border-right: 0;
  padding: 2px 3px 2px 3px;
  margin: 2px 2px 2px 0;
}

.BtnActionNP, .BtnActionSmall
{
  border: 1px solid var(--main-back-color);
  padding: 1px 3px 1px 3px;
  margin: 0 0 0 3px;
}

.BtnAction[disabled], .BtnActionNP[disabled] { color: #C0C0C0 !important; background: #F2F2F2 !important; border-color: #C0C0C0 !important; }

.BtnAction:hover, .BtnActionNP:hover, .BtnActionSmall:hover { text-decoration: none; color: #fff; border-color: #fff; background-color: var(--main-active-color); }
.BtnAction:link, .BtnAction:visited, .BtnActionNP:link, .BtnActionNP:visited{ text-decoration: none; color: #fff }

.imgAction { padding: 2px 3px 2px 3px; text-align: center; vertical-align: middle; cursor: pointer; }
.imgAction[disabled] { cursor: default; background: #C0C0C0 !important; } 


#btnGoToTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  left: 50%; /* Place the button 30px from the right */
  transform: translate(-50%, 0%);
  z-index: 99; /* Make sure it does not overlap */
  outline: none; /* Remove outline */
  background-color: rgba(67,87,90, 0.5); /* Set a background color */
  /*opacity: 0.5;*/
  color: #fff; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  box-sizing: border-box;
  border: 0; 
  box-shadow: -1px 1px 5px 3px rgba(0,0,0,0.4);
  padding: 0 0 0 0;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; /* Rounded corners */
  font-weight:bolder;
  font-size: 20px; /* Increase font size */
  /*transform: rotate(90deg);*/
}

#btnGoToTop:hover {
  /*opacity: 1;*/ /* Add a dark-grey background on hover */
  background-color: rgba(67,87,90, 1); /* Set a background color */
  border: 1px solid #fff;
  box-shadow: none;
}


/* Progress popup
------------------------------------------*/

.popProgress
{
  position: fixed;
  z-index: 9002;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  background-color: Black;
  filter: opacity(20);
  opacity: 0.2;
  -moz-opacity: 0.2;
}

.popCenter {
  position: fixed;
  top: 50vh;
  left: 50vw;
  z-index: 9010;
  margin-top: -50px;
  margin-left: -50px;
  padding: 20px;
  width: 80px;
  background-color: #fff;
  border-radius: 10px;
}

/* HR
----------------------------------------------*/

.BlocGestion hr, hr.BlocGestion {
  background-color: var(--main-back-color);
  color: var(--main-back-color);
  height: 1px;
  margin: 10px 0 10px 0px;
  border: 0;
}

.Separator hr, hr.Separator {
  background-color: #808080;
  color: #808080;
  height: 1px;
  margin: 10px 0 10px 0px;
  border: 0;
}

.Separator80 hr, hr.Separator80 {
  background-color: #808080;
  color: #808080;
  height: 1px;
  border: 0;
}

.SeparatorC0 hr, hr.SeparatorC0 {
  background-color: #C0C0C0;
  color: #C0C0C0;
  height: 1px;
  margin: 10px 0 10px 0px;
  border: 0;
}

.MenuSeparator hr, hr.MenuSeparator {
  background-color: #C0C0C0;
  color: #C0C0C0;
  height: 1px;
  margin: 0;
  border: 0;
}

.OptionSeparator hr, hr.OptionSeparator {
  background-color: #E6E6E6;
  color: #E6E6E6;
  height: 1px;
  margin: 5px 20px 0 15px;
  border: 0;
}

.OptionSeparator10 hr, hr.OptionSeparator10 {
  background-color: #E6E6E6;
  color: #E6E6E6;
  height: 1px;
  margin: 10px 20px 0 15px;
  border: 0;
}

.OptionSeparator1010 hr, hr.OptionSeparator1010 {
  background-color: #E6E6E6;
  color: #E6E6E6;
  height: 1px;
  margin: 10px 20px 10px 15px;
  border: 0;
}

/* Affichage des blocs de zone
----------------------------------------------*/

.blocSection  
{
  width:100%; 
  box-sizing: border-box; 
  /*display:block;*/ 
  display: flex;
  justify-content: start;
  align-items: start;
  /*flex-flow: row wrap;*/
  flex-wrap: wrap;
}

.bloc25, .bloc33, .bloc50, .bloc67, .bloc75, .bloc100 { display:block; /*border-left:1px dotted #ddd;*/ /*padding-left:10px; padding-right:10px;*/ box-sizing:border-box; vertical-align: top; /*min-width:200px;*/ }
.bloc25:first-child, .bloc33:first-child, .bloc50:first-child, .bloc67:first-child, .bloc75:first-child, .bloc100:first-child { border-left:0; }

.blocInDesign { padding:1px 3px; }

@media (max-width: 440px) {
  .bloc25 { width:100%; }
  .bloc33 { width:100%; }
  .bloc50 { width:100%; }
  .bloc67 { width:100%; }
  .bloc75 { width:100%; }
  .bloc100 { width:100%; }
}
@media (min-width: 441px) {
  .bloc25 { width:25%; }
  .bloc33 { width:33.33%; }
  .bloc50 { width:50%; }
  .bloc67 { width:66.66%; }
  .bloc75 { width:75%; }
  .bloc100 { width:100%; }
}

/* Zones de blocs d'une page */
table.tblZones  { border-collapse: collapse; border-spacing: 0;  border: 1px solid var(--main-back-color); margin: 3px 0 3px 0; }
table.tblZones tr.trZones { border-bottom: 1px dashed #bbb; padding:4px; }
table.tblZones td.tdZones { padding: 0 3px 0 3px; vertical-align: top; }

.bkBlocVide  { background: #EFF3FB!important; }
.bkBlocPlein { background: #EBFFEC!important; }

.grdBlocs { background-color: White; margin: 0; border: 0; border-collapse: collapse; width:100%; }
.grdBlocs td { padding: 2px 2px 0 2px; color: Black; white-space: nowrap; }
.grdBlocs td:nth-child(2) { width: 95%; }

.grdBlocs .alt, .grdBlocs .row { padding: 2px; border: 1px dotted var(--main-back-color); display: block; margin:2px;  border-radius: 4px; vertical-align: top; }
.grdBlocs .alt { background: #EFF3FB; }
.grdBlocs .row { }
.grdBlocs .empty { }

@media (max-width: 449px) {
  .imageLeft { float:left; margin-right: 5px; max-width:100%; }
  .imageRight { float:right; margin-left: 5px; max-width:100%; }
}

@media (min-width: 450px) {
  .imageLeft { float:left; margin-right: 10px; max-width:100%; }
  .imageRight { float:right; margin-left: 10px; max-width:100%; }
}

/* radio buttons
----------------------------------------------*/

.rdoGreen input[type='radio'], .rdoRed input[type='radio'], .rdoBlue input[type='radio'] {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  outline: none;
  box-shadow: 0 0 0 2px gray;
  vertical-align: middle;
}

.rdoGreen label, .rdoRed label, .rdoBlue label {
  vertical-align: middle;
  margin-left: 5px;
}

.rdoGreen input[type='radio']:checked {
  box-shadow: 0 0 0 2px green;
}

.rdoRed input[type='radio']:checked {
  box-shadow: 0 0 0 2px red;
}

.rdoBlue input[type='radio']:checked {
  box-shadow: 0 0 0 2px var(--color-bkg-dark);
}

.rdoGreen input[type='radio']:before, .rdoRed input[type='radio']:before, .rdoBlue input[type='radio']:before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border-radius: 50%;
}

.rdoGreen input[type='radio']:checked:before {
  background: green;
}

.rdoRed input[type='radio']:checked:before {
  background: red;
}

.rdoBlue input[type='radio']:checked:before {
  background: var(--color-bkg-dark);
}

.chkGreen input[type="checkbox"]:checked { outline:4px solid #00FF00; outline-offset: -1px; margin-right: 4px; }
.chkRed input[type="checkbox"]:checked { outline:4px solid #FF0000; outline-offset: -1px; margin-right: 4px; }
.chkGreen input[type="checkbox"]:not(checked), .chkRed input[type="checkbox"]:not(checked) { margin-right: 4px; }

.green { color: green; }


/*----------------------------------------------------------
* Radio Button List                                       */

.radioList input[type=radio] {
  display:none; 
  margin:10px; 
}

.darkbkg .aspNetDisabled  { background-color: transparent!important; filter: grayscale(100%); }

/* Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label */
.radioList input[type=radio] + label {
  display:inline-block;
  margin:-2px;
  padding: 4px 12px;
  /*background-color: #E6E6E6;*/
  border: 1px solid #bbb; /* pour eviter décalage durant le hover */
  text-align: center;
  vertical-align: middle;
  /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);*/
  font-size: 9pt;
}

.radioList input[type=radio] + label {
    width: 100px;
    height: 40px;
}

/* Change background color for label next to checked radio button
 to make it look like highlighted button */
.radioList input[type=radio]:checked + label {
  background-image: none; 
  /*background-color: #9ebef5;*/
  border: 1px solid var(--color-border-dark);
  box-shadow: none;
}

.radioList input[type=radio]:hover + label {
  background-image: none; 
  border: 1px solid var(--color-border-dark);
}

@media (max-width: 749px) {
  table.radioList td { display: table; }
}

@media (min-width: 750px) {
  table.radioList td { padding: 5px; }
}


/* Boites Partenaire
------------------------------------*/

.flexPartenaire { display:flex; flex-flow:row wrap; align-items:center; justify-content:center; }

.divPartenaire { width:180px; height:180px; margin:5px; padding:5px; text-align:center; border-radius: 8px; }
.divPartenaire a { text-decoration: none; color: #fff; }
.divPartenaire a:link, .divPartenaire a:visited { color: #fff; text-decoration: none; }

.logoPartenaire { height:60%; vertical-align: middle; text-align: center; }
.logoPartenaire img { max-height:100%; width:auto; max-width:100%; }

.textePartenaire { color:#fff; height:40%; padding:5px; }


/* Gestion du média : Ecran/Impression
----------------------------------------------------------*/

@media print {
    .pageBreak { page-break-after: always; }
    .hideOnPrint { display: none; }
    .hideHeaderOnPrint { display: none; }
}

@media screen {
    .pageBreak { border-top: 1px solid red; }
    .hideOnPrint { border-bottom: 1px solid var(--main-back-color); padding: 0 0 10px 20px; margin-bottom: 20px; background-color: #F5F5F5; }
    .hideHeaderOnPrint { }
}

 
/* Video
--------------------------*/

.videoContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Image gallery
------------------------------------*/

.gallery-container {
  margin: 0 auto 0 auto;
  padding: 0;
  box-sizing: border-box;
  max-width: 1080px;
}

.gallery-container .heading-text {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.gallery-container .heading-text span {
  font-weight: 100;
}

.gallery-container ul {
  list-style: none;
  margin: 0;
  padding: 10px;
}

/* Responsive image gallery rules begin*/

.gallery-container .image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /*align-items: center;*/
  gap: 10px;
}

.gallery-container .image-gallery > li {
  /*flex-basis: 330px;*/
  position: relative;
  /*cursor: pointer;*/
  cursor: default;
}

/* ::after = Permet d'aligner à gauche la dernière ligne incomplète */
.gallery-container .image-gallery::after { 
  content: "";
  flex-basis: 330px;
}

.gallery-container .image-gallery li img {
  object-fit: cover;
  width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: 5px;
}


@media only screen and (min-width: 750px) {
  .gallery-container .image-gallery > li {
    width: 330px;
  }

  .gallery-container ul {
    padding: 20px;
  }

  .gallery-container .image-gallery li img {
    max-height: 440px;
  }
}


/* Polaroid
------------------------------------*/

.polaroid-container { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; margin: 6px; width: 100%; }

.polaroid-container .polaroid { margin:8px; position:relative; width:310px; }
.polaroid-container .dvImg { background-color:#f8f6f5; border:1px solid #f8f6f5; box-shadow:rgba(99, 99, 99, 0.4) 0px 2px 8px 0px; box-sizing:border-box; height:375px; padding:18px; position:absolute; left:0; top:40px; width:305px; z-index:2 }
.polaroid-container .mainImg { height:270px; width:270px; }
.polaroid-container .cursive { color:#424431; display:table-cell; font-family:Allison; font-size:30pt; line-height: 0.65em; height:75px; text-align:center; transform:rotate(-4deg); vertical-align:middle; width:300px }
.polaroid-container .dvText {
    background-color:#f4f4f4; 
    height:150px; 
    margin: 0 33px; 
    padding-left:10px; 
    padding-right:10px; 
    padding-top:440px; 
    text-align:center; 
    width:220px; 
    z-index:1; 
    color:#424431; 
    font-family:Quicksand; 
    font-size:16px 
  }

 

/* Liste descriptive
------------------------------------*/

div.descriptif-container { align-items:center; box-sizing:border-box; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; padding:10px; width:100%; }
div.descriptif { width: 360px; }
.descriptif dl { font-family: 'Quicksand', 'Lato', sans-serif; margin-left: 10px; margin-bottom: 10px; }
.descriptif dt { font-weight: bold; font-size: 16px; line-height: 170%; }     /* Couleur texte site voir SiteColorsTemplate.css */
.descriptif dd { margin-left: 20px; color: #6d6d6a; font-size: 14px; }

.descriptif ul { font-family: 'Quicksand', 'Lato', sans-serif; line-height: 170%; margin-left: 10px; margin-bottom: 10px; }
.descriptif li { list-style-type: none; font-weight: bold; font-size: 16px; line-height: 170%; }     /* Couleur texte site voir SiteColorsTemplate.css */
.descriptif li ul { margin-left: 20px; color: #6d6d6a; font-size: 14px; line-height: 170%; }


/* Image scroll horizontale 
<div style="background-color:#e4e4e4; width:calc(100% + 10px);box-sizing:border-box; overflow-x:auto; overflow-y:hidden; white-space:nowrap;text-align:center; margin-left: -5px;margin-right: -5px;">
<img alt="Tuiles" src="https://cdn.hurry-on.net/Trajectoria/Medias/GSD/Tuile-VT.png" style="display:inline-block;height:200px"/>
<img alt="Tuiles" src="https://cdn.hurry-on.net/Trajectoria/Medias/GSD/Tuile-SD.png" style="display:inline-block;height:200px"/>
<img alt="Tuiles" src="https://cdn.hurry-on.net/Trajectoria/Medias/GSD/Tuile-KE.png" style="display:inline-block;height:200px"/>
<img alt="Tuiles" src="https://cdn.hurry-on.net/Trajectoria/Medias/GSD/Tuile-PV.png" style="display:inline-block;height:200px"/>
</div>
*/