/* CSS for ProductCalendar.ascx
-----------------------------------------*/

:root {
  --cal-back-color: rgb(233,238,238);
  --cal-text-color: rgb(21,65,112);
  --cal-graytext-color: rgb(169,179,182);
  --cal-grayborder-color: rgb(169,179,182);
  --cal-hoverback-color: #8d9db7; /*rgba(26,59,110,.4);*/
  --cal-selectback-color: rgb(21,65,112);
  --cal-selecttext-color: #fff;
  --cal-unselectback-color: #fff;
  --cal-unselecttext-color: rgb(21,65,112);

  --cal-pricetext-color: rgb(128,0,0);
  --cal-reductext-color: rgb(0,128,0);
  --cal-darkback-color: rgb(212,216,219);
}

.optionContainer  
{
  margin: 0;
  padding: 0 20px 20px 20px;
}

.calContainer
{
  margin: 0;
  padding: 20px;
  background-color: var(--cal-back-color);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) inset;
}

@media (max-width: 449px) {
  .calInner 
  {
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 450px) {
  .calInner 
  {
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Month radiobutton list */
.monthContainer {
  border-top: 1px solid var(--cal-selectback-color);
  border-bottom: 1px solid var(--cal-selectback-color);
  border-left: 0;
  border-right: 0;
  margin: 10px 0 10px 0;
  white-space: nowrap;
  vertical-align: middle;
}

.monthList {
  display:inline-block;
  width: calc(100% - 53px);
  padding: 10px 0 10px 0;
  overflow-x: hidden; /*scroll;*/
  /*scrollbar-width: thin;*/
}

.monthList input[type=radio] {
  display:none; 
}

.monthList label {
  text-align: center;
  vertical-align: middle;
  font-size: 0.8em;
  line-height: 1.6em;
  text-transform: uppercase;
}


.monthList input[type=radio] + label {
  display:inline-block;
  border: 1px solid var(--cal-grayborder-color);
  margin: 5px 5px 5px 5px; 
  padding: 10px;
  background-color: var(--cal-unselectback-color);
  color: var(--cal-unselecttext-color);
  cursor: pointer;
}

@media (max-width: 449px) {
  .monthList input[type=radio] + label { width: 100px; }
}

@media (min-width: 450px) {
  .monthList input[type=radio] + label { width: 120px; }
}

.monthList input[type=radio]:checked + label {
  position: relative;
  border: 1px solid var(--cal-selectback-color);
  background-color: var(--cal-selectback-color);
  color: var(--cal-selecttext-color);
  /* pointe vers le bas */
}

.monthList input[type=radio]:checked + label:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--cal-selectback-color);
  width: 100%;
  height: 15px;
  
  /* The points are: (left top: x y, right top: x y, center bottom: x y) */
  clip-path: polygon(1px 1px, 100% 1px, 50% 100%);
}

.monthList input[type=radio]:hover + label {
  border: 1px solid var(--cal-hoverback-color);
  color: var(--cal-unselecttext-color);
  background-color: var(--cal-hoverback-color);
}

.monthList input[type=radio]:checked:hover + label:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--cal-hoverback-color);
  width: 100%;
  height: 15px;
  
  /* The points are: (left top: x y, right top: x y, center bottom: x y) */
  clip-path: polygon(1px 1px, 100% 1px, 50% 100%);
}

.btnScrollLeft, .btnScrollRight
{
  display: inline-block;
  font-weight: bold;
  font-size: 28px;
  cursor: pointer;
  vertical-align: top;
  padding: 0;
  color: var(--cal-text-color);
  border: 0 !important;
  outline:none !important;
}

.btnScrollLeft
{
  margin: 15px 5px 0 0;
}

.btnScrollRight
{
  margin: 15px 0 0 5px;
}

.btnScrollLeft:focus, .btnScrollRight:focus
{
  border: 0 !important;
  outline:none !important;
}

.btnScrollLeft::-moz-focus-inner, .btnScrollRight::-moz-focus-inner, .btnOption::-moz-focus-inner
{
  border: 0 !important;
  outline:none !important;
}


/* Reservation
---------------------------------*/

.btnOption:active
{
  border: 2px solid var(--cal-text-color);
  border-radius: 50%;
  background-color: var(--cal-text-color);
  color: #fff;
}

.btnOption
{
  border: 1px solid var(--cal-text-color);
  border-radius: 50%;
  background-color: #fff;
  color: var(--cal-text-color);
  cursor: pointer;
  height: 20px;
  width: 20px;
  line-height: 1em;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  margin: -4px 0 0 0;
  font-size: 14px;
  font-weight: bold;
}

.nbOption  
{
  width: 30px; 
  /*border: 1px solid #ccc; */
  border: none;
  color: var(--cal-text-color);
  background-color: var(--cal-back-color); 
  text-align: center;
  padding: 0;
  margin: 0 4px 0 4px;
  font-family: var(--main-font);
  font-size: 12pt;
}

.optPrix, .total { display: inline-block; text-align:right; font-size: 1em; color: var(--cal-pricetext-color); }
.reducCode, .totalCode { display: inline-block; text-align:right; font-size: 1em; color: var(--cal-reductext-color); }

.confirmAvantage { 
  margin-left: 20px;
  padding: 5px;
  width: 100%;
  color: var(--cal-pricetext-color);
  background-color: var(--cal-back-color);
  /*border: 1px solid var(--cal-pricetext-color);*/
}

.nowrap { white-space: nowrap; }
.smallPadding { padding: 0 20px 10px 0!important; }

@media (max-width: 449px) {
  .respBreak { display: table-cell; padding: 0 20px 10px 0; }
  .respBreak:nth-child(2) { display: table-row; }
  .optPrix { font-size: 1em; }
  .espace50:before { content: ' '; display: block; }
}

@media (min-width: 450px) {
  .respBreak { display: table-cell; padding: 0 20px 10px 0; }
  .respBreak:first-child { width: 80%; }
  .respBreak:last-child { min-width: 65px; }
  .total, .nbOption, .totalCode { font-size: 12pt; font-weight: bold; }
  .espace50 { padding-left: 50px; }
}


.blocInfoResa, .blocInfoResaError, .blocInfoResaSuccess { 
  padding: 10px 20px 10px 20px; 
  /*box-sizing: border-box;*/ 
  background-clip: padding-box;
  margin-bottom: 20px;
}

.blocInfoResa { 
  background-color: var(--cal-back-color); 
  border-top: 5px solid var(--cal-text-color);
  color: var(--cal-text-color);
}

.blocInfoResaError { 
  background-color: #F7DED9; 
  border: 1px dotted #ccc;
  border-top: 5px solid #800000;
  color: #800000;
}

.blocInfoResaSuccess { 
  background-color: #DFEADE; 
  border-top: 5px solid #008000;
  color: #008000;
}

.darkbkg { background-color: var(--cal-darkback-color); }

.infoTitle { color: var(--cal-text-color); font-size: 14pt; font-weight: bold; margin-bottom: 10px; }

.topSeparator { border-top: 1px solid var(--cal-text-color); padding: 10px 20px 0 0; }
.bottomSeparator { border-bottom: 1px solid var(--cal-grayborder-color); }

.optionSeparator .respBreak { border-top: 1px solid var(--cal-graytext-color); padding: 10px 20px 0 0; }

/* Calendar grid
---------------------------------*/

.calGrid {
  background-color: var(--cal-back-color);
  margin: 10px 0 10px 0;
  border-bottom: solid 1px var(--cal-selectback-color);
  /*border-collapse: collapse;*/
}

.calGrid td, .calGrid td.pasDispo, .calGrid td.AutreMois {
  padding: 4px;
  width: calc(70vw / 7); /*100px;*/
  height: 40px;
  vertical-align: middle;
  text-align: center;
  position: relative;
  background-clip: padding-box; /* important sinon pas de border */
}
.calGrid td {
  border: 1px solid var(--cal-grayborder-color);
  color: var(--cal-text-color);
}
.calGrid td:hover {
  background-color: var(--cal-hoverback-color);
  cursor: pointer;
}
.calGrid td.pasDispo, .calGrid td.AutreMois {
  border: 1px solid var(--cal-grayborder-color);
  color: var(--cal-grayborder-color); 
  background-color: var(--cal-back-color); 
  cursor: default;
}

.calGrid td.pasDispo:hover, .calGrid td.AutreMois:hover,
.calGrid td.pasDispo .euro, .calGrid td.AutreMois .euro {
  cursor: default;
}

.calGrid tr:first-child td {
  border-top: 0;
}
.calGrid tr td:first-child {
  border-left: 0;
}
.calGrid tr:last-child td {
  border-bottom: 0;
}
.calGrid tr td:last-child {
  border-right: 0;
}

.calGrid th {
  padding: 4px;
  border-bottom: solid 1px var(--cal-selectback-color);
  font-size: 0.8em;
  font-weight: normal;
  background: var(--cal-back-color);
  color: var(--cal-selectback-color);
  height:3em;
}
.calGrid .alt, .calGrid .row 
{
  background: White; 
  border-right: solid 1px var(--cal-selectback-color);
  border-left: solid 1px var(--cal-selectback-color);
}
.calGrid .empty { background: White; }

.calGrid .ftr td {
  padding: 4px;
  color: White;
  border-left: solid 1px var(--main-back-color);
  border-right: solid 1px var(--main-back-color);
  font-size: 1rem;
  font-weight: bold;
  background: var(--main-back-color);
  text-align: center;
}
.calGrid .pgr { background: var(--main-back-color); border: solid 1px var(--main-back-color); }
.calGrid .pgr table { margin: 0; padding: 0; }
.calGrid .pgr td { padding: 2px; border-width: 0; font-weight: bold; color: Gray; }
.calGrid .pgr a { color: White; text-decoration: none; }
.calGrid .pgr a:hover { color: Black; text-decoration: none; }
.calGrid th a { color: White; text-decoration: underline; }
.calGrid th a:hover { color: Black; text-decoration: underline; }

@media (max-width: 449px) {
  .indisponible { font-size:0.6em; color: var(--cal-grayborder-color); cursor: default; }
  .aPartirDe { display: none; }

  .euro { font-weight: normal; cursor: pointer; }
  .euro:after { content:'€'; vertical-align:top; font-size:0.8em; cursor: pointer; }
}

@media (min-width: 450px) {
  .indisponible { font-size:0.7em; color: var(--cal-grayborder-color); cursor: default; }
  .aPartirDe { font-size:0.7em; cursor: pointer; }
  .aPartirDe:after { content: "\A"; white-space: pre; } /* <br> */

  .euro { font-weight: bold; cursor: pointer; }
  .euro:after { content:'€'; vertical-align:top; font-size:0.8em; cursor: pointer; }
}

.numJour, .numJourAutreMois { position:absolute; top:3px; left:3px; font-size:0.7em; }
.numJour { color: var(--cal-text-color); }
.numJourAutreMois { color: var(--cal-grayborder-color); cursor: default; }

/* Prix
-----------------------------------------------*/

.mGridListbox {
  background-color: White;
  margin: 5px 0 5px 0;
  border: solid 1px var(--main-back-color);
  /*height: 100%;*/
  border-collapse: collapse;
}
.mGridListbox td {
  padding: 4px;
  border-top: solid 1px var(--cal-grayborder-color);
  border-right: dotted 1px #ddd;
  color: Black;
  font-size: 1rem;
}
.mGridListbox th {
  padding: 4px;
  color: var(--cal-unselecttext-color);
  border-right: dotted 1px #ddd;
  font-size: 1rem;
  font-weight: bold;
  background: var(--cal-unselectback-color);
}
.mGridListbox .alt { background: #EFF3FB; padding: 4px; color: var(--main-back-color); }
.mGridListbox .row { background: White; color: var(--main-back-color); }
.mGridListbox .empty { background: White; }
.mGridListbox .pgr { background: var(--main-back-color); border: solid 1px var(--main-back-color); }
.mGridListbox .pgr table { margin: 0; padding: 0; }
.mGridListbox .pgr td { padding: 2px; border-width: 0; font-weight: bold; color: Gray; }
.mGridListbox .pgr a { color: White; text-decoration: none; }
.mGridListbox .pgr a:hover { color: Black; text-decoration: none; }
.mGridListbox th a { color: White; text-decoration: underline; }
.mGridListbox th a:hover { color: Black; text-decoration: underline; }

/* Repeater du prix
-----------------------------------------------*/

@media (max-width: 899px) {
  .rptPrixTable { }
  .rptPrixRow { padding-top: 10px; }
  .rptPrixBloc { }
  .tblPrixBloc { width: 100%; }
}

@media (min-width: 900px) {
  .rptPrixTable { display: table; }
  .rptPrixRow { display: table-row; }
  .rptPrixBloc { display: table-cell; background-color: var(--cal-back-color); }
  .tblPrixBloc { margin-top: 10px; width: 100%; }
}

.rptPrixBloc {
  background-color: #fff; 
  height: 70px; 
  vertical-align: top; 
}

.tblPrixBloc {
  padding: 5px; 
  background-color: var(--cal-back-color); 
  box-sizing: border-box; 
  height: 70px; 
  border-spacing: 5px 0;
  border-collapse: separate; 
  background-clip: padding-box;
}

.rptPrix_dvDate { color: var(--main-back-color); text-align: center; }
.rptPrix_Fleche { padding: 0; color: var(--cal-grayborder-color); text-align: center; }
.rptPrix_jourDate, .rptPrix_moisDate, span.rptPrix_jourDate, span.rptPrix_moisDate { font-size: 0.8rem; }
.rptPrix_parPers, span.rptPrix_parPers { font-size: 0.7rem; font-weight: normal; }

.rptPrix_NomProduit {
  vertical-align: middle; 
  color: var(--main-back-color); 
  border-left: 1px solid var(--cal-grayborder-color); 
  white-space: normal;
}

.rptPrix_BorderPasDispo { border: 1px solid var(--cal-grayborder-color); }
.rptPrix_BorderDispo { border: solid 1px var(--main-back-color); }
.rptPrix_BkgPasDispo { background-color: var(--cal-grayborder-color); }
.rptPrix_BkgDispo { background-color: var(--main-back-color); }
.rptPrix_TxtPasDispo { color: var(--cal-grayborder-color); }

.rptPrix_tdPrix { background-color: #fff; padding: 0; position: relative; }
.rptPrix_NbPAX { text-align: center; color: #fff; font-size: 0.8rem; padding: 1px 2px 2px 2px; position: absolute; top: 0; width: 100%; box-sizing: border-box; }
.rptPrix_numPAX, span.rptPrix_numPAX { font-size: 0.9rem; font-weight: bold; }
.rptPrix_Prix1 { background-color: #fff; text-align:center; font-weight: bold; color: var(--main-back-color); padding: 4px; }
.rptPrix_Prix2 { background-color: var(--cal-back-color); text-align:center; color: var(--main-back-color); padding: 2px; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; }

@media (max-width: 449px) {
  .rptPrix_dvDate { width: 80px; }
  
  .rptPrix_NomProduit { font-size: 0.9rem; }
  .rptPrix_Fleche { font-size: 1em; }
  .rptPrix_numJourDate, span.rptPrix_numJourDate { font-size: 1rem; font-weight: bold; }

  .rptPrix_dvDate { padding: 0 5px 0 5px; }
  .rptPrix_NomProduit { padding: 0 5px 0 5px; }
  .rptPrix_TxtPasDispo { font-size: 0.7rem; font-weight: normal; }
  
  .rptPrix_tdPrix { width: 90px; }
  .rptPrix_Prix1 { font-size: 0.8rem; }
  .rptPrix_Prix2 { font-size: 0.8rem; }
  
  .rptPrix_BorderPasDispo { display: none; }
}

@media (min-width: 450px) and (max-width: 539px) {
  .rptPrix_dvDate { width: 90px; }

  .rptPrix_NomProduit { font-size: 0.9rem; min-width: 150px; }
  .rptPrix_numJourDate, span.rptPrix_numJourDate { font-size: 1.1rem; font-weight: bold; }
  .rptPrix_Fleche { font-size: 2em; }

  .rptPrix_dvDate { padding: 0 5px 0 5px; }
  .rptPrix_NomProduit { padding: 0 5px 0 5px; }
  .rptPrix_TxtPasDispo { font-size: 0.7rem; font-weight: normal; }

  .rptPrix_tdPrix { width: 90px; }
  .rptPrix_Prix1 { font-size: 0.9rem; }
  .rptPrix_Prix2 { font-size: 0.8rem; }
  
  .rptPrix_BorderPasDispo { display: none; }
}

@media (min-width: 540px) {
  .rptPrix_dvDate { width: 90px; }

  .rptPrix_numJourDate, span.rptPrix_numJourDate { font-size: 1.1rem; font-weight: bold; }
  .rptPrix_Fleche { font-size: 2em; }

  .rptPrix_dvDate { padding: 0 15px 0 15px; }
  .rptPrix_NomProduit { padding: 0 15px 0 15px; }
  .rptPrix_TxtPasDispo { font-size: 0.8rem; font-weight: normal; }

  .rptPrix_tdPrix { width: 100px; }
  .rptPrix_Prix1 { font-size: 1rem; }
  .rptPrix_Prix2 { font-size: 0.8rem; }
}

td.rptPrix_BorderDispo:hover, td.rptPrix_BorderDispo:hover div {
  background-color: var(--cal-hoverback-color);
  color: #fff;
  border: 1px solid var(--cal-hoverback-color);
  cursor: pointer;
}

.closePopup
{
  font-weight: normal;
  font-family: var(--main-font);
  font-size: 1rem;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid var(--main-back-color);
  border-radius: 4px 4px 4px 4px;
  padding: 3px 5px;
  background-color: var(--main-back-color); 
  color: white;
  float: right;
}

/* Combo filtre
--------------------------------------------*/

.comboFiltre 
{
  border: 1px solid var(--cal-grayborder-color);
  width: 200px;
  -webkit-appearance: none; 
  padding-left:30px;
  height: 36px;
  background-color: #fff;
  /*font-family: 'Comic Sans MS';*/
  margin-right: 15px;
}

.cboDuree
{
  /*background-image: url('../Images/clock-5-16.png'), url('../Images/ComboBox.Arrow-Down.gif');*/
  background-image: url('../Images/clock.svg'), url('../Images/ComboBox.Arrow-Down.gif');
  background-position: 5px center, right 5px center;
  background-size: 20px 20px, 7px 4px;
  background-repeat: no-repeat;
}

.cboGPS
{
  /*background-image: url('../Images/pin-8-16.png'), url('../Images/ComboBox.Arrow-Down.gif');*/
  background-image: url('../Images/map.svg'), url('../Images/ComboBox.Arrow-Down.gif');
  background-position: 5px center, right 5px center;
  background-size: 24px 24px, 7px 4px;
  background-repeat: no-repeat;
}

.cboCar
{
  /*background-image: url('../Images/car-28-16.png'), url('../Images/ComboBox.Arrow-Down.gif');*/
  background-image: url('../Images/car.svg'), url('../Images/ComboBox.Arrow-Down.gif');
  background-position: 5px center, right 5px center;
  background-size: 24px 24px, 7px 4px;
  background-repeat: no-repeat;
}

.cboAutre
{
  background-image: url('../Images/ComboBox.Arrow-Down.gif');
  background-position: right 5px center;
  background-repeat: no-repeat;
}