/*------------------------------------*\
    1.GENERAL
\*------------------------------------*/

.compPack {
	display: inline-block;
	width: 100%;
	margin-bottom: 10px;
}


.compPack select {
	height: 30px;
	font-size: 14px;
}

.compPack  #listeTypeClient thead td,
.compPack #listePackLine thead td {
	color: #333;
}

#totalPack td {
	color: #333;
}

.compPack .categorieContainer .tarifs {
	padding-right: 15px;
}











/*

* 1.GENERAL
* 2.MEDIA_QUERIES

*/


/*------------------------------------*\
    1.GENERAL
\*------------------------------------*/


#currentDiv.packContent h2 {
    margin: 20px 5px 5px 2px;
    padding: 2px 15px;
    clear:both;
    font-weight: 100;
    font-size: 1.5em;
    text-transform: uppercase;;
}
#currentDiv.packContent table#listePackLine,
#currentDiv.packContent table#listeTypeClient {
    background-color: #FFF;
    border-collapse: collapse;
    width: 97%;
    margin: auto;
    margin-top: 0;
    margin-bottom: 40px;
    text-align: center;;
    border: none;
}
#currentDiv.packContent table#listePackLine tr.mandatory,
#currentDiv.packContent table#listeTypeClient tr {
    height: 50px;
    border: none;
}

#currentDiv.packContent table#listePackLine tr, #currentDiv.packContent table#listeTypeClient tr {
	border: none;
}

#currentDiv.packContent table#listePackLine td,
#currentDiv.packContent table#listeTypeClient td {
    padding: 15px 0px 15px 20px;
}

#currentDiv.packContent table#listePackLine td {
  font-size: 14px;
}
#listeTypeClient .colonneCodePromo .codePromo {
  margin-left: 10px;
}
#listeTypeClient .colonneCodePromo .submitCodePromoTarif {
    margin-left: 5px;
    background: #333;
    color: #fff;
    border: 1px solid #333;
    border-radius: 3px;
}
#currentDiv.packContent #listePackLine caption span,
#currentDiv.packContent #listePackLine tbody tr.line td.position span {
    border-radius: 50% 50% 50% 50%;
    color: #777777!important;
    cursor: default;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 30px;
    border: 1px solid #C5C5C5;
}

#currentDiv.packContent #listePackLine caption ul {
    margin: auto;
    padding: 0;
    margin: 0 0 5px 0;
    list-style-type: none;
}

#currentDiv.packContent #listePackLine caption ul li {
    display: inline-block;
    width: 40%;
}

#currentDiv.packContent #listePackLine caption span {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
}

#currentDiv.packContent #listePackLine thead tr td:nth-child(1),
#currentDiv.packContent #listePackLine tfoot tr td:nth-child(1),
#currentDiv.packContent #listeTypeClient tr td:nth-child(1) {
    text-align: left;
    padding-left: 10px;
    font-size: 13px;;
}
#currentDiv.packContent #listeTypeClient tr td:nth-last-child(1) {
    text-align: right;
    padding-right: 10px;
}

#currentDiv.packContent #listeTypeClient thead,
#currentDiv.packContent #listePackLine thead,
#currentDiv.packContent #listePackLine tfoot {
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  background-color: #F3F3F3;
  border: 2px solid #F3F3F3;
}

#currentDiv.packContent #listePackLine select {
    width: 85%;
    padding: 0;;
}

#currentDiv.packContent #listePackLine .evenementContainer img.moreInfo {
    opacity: 0;
    position: relative;
    top: 22px;
    left: 9px;
    z-index: 2;
    width: 25px;
    height: 25px;
}

#currentDiv.packContent #listePackLine .evenementContainer:after {
  content: "\f05a";
  font-family: "FontAwesome";
  color: #777777;
  font-size: 22px;
  position: relative;
  top: -12px;
  left: 11px;
}

#currentDiv.packContent #listePackLine tbody tr.mandatory td.position {
    width: 35px;
}

#currentDiv.packContent #listePackLine tbody tr.mandatory,
#currentDiv.packContent #listePackLine tbody tr.line {
  background-color: #FBFBFB;
}

#currentDiv.packContent #listePackLine caption span.mandatory,
#currentDiv.packContent #listePackLine tbody tr.mandatory td.position span {
    background-color: #FFFFFF;
}

#currentDiv.packContent #listePackLine caption span,
#currentDiv.packContent #listePackLine tbody tr td.position span {
    background-color: #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    cursor: default;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 30px;
    border: 1px solid #C5C5C5;
    color: #777;
}
#currentDiv.packContent #listePackLine tbody tr td.categorieContainer,
#currentDiv.packContent #listePackLine tbody tr td.evenementContainer {
   text-align: left;
   width: 45%;
}
#currentDiv.packContent #listePackLine tbody tr td.categorieContainer {
   vertical-align: top;
}
#currentDiv.packContent #listePackLine tbody tr td.categorieContainer {
   text-align: left;
   padding-right: 15px!important;;
}
#currentDiv.packContent #listePackLine tbody tr td.placementContainer {
   width: 20%;
   padding-left:3px;
}
#currentDiv.packContent #listePackLine tbody tr td.evenementContainer div.information img {
   margin: 0 10px 5px 0;
   float: left;
}

#currentDiv.packContent #listePackLine tbody tr td.evenementContainer div.information div.evtInfos {
   float: left;
}

#currentDiv.packContent #listePackLine tbody tr td.evenementContainer div.information div.addrSalle div {
}

#currentDiv.packContent #listePackLine tbody tr td.evenementContainer div.information img {
   padding: 0 5px 5px 0;
   float: left;
}
#currentDiv.packContent #listePackLine tfoot tr td.totalTitle {
   text-align: right;
}
#currentDiv.packContent #listePackLine tfoot tr td.total {
   text-align: right;
   padding-right: 15px;
   width: 100px;
}
#currentDiv.packContent #listePackLine tbody tr td div.choosePackLine span.selectSeat {
    text-transform: uppercase;
    font-size: 10px;
    display: block;
    width: calc(100% - 40px);
    margin: auto;
    max-width: none;
}
#currentDiv.packContent #listePackLine tbody tr td div.choosePackLine .txtPlacement {
   cursor:help;
}
#currentDiv.packContent #listePackLine tbody tr td div.choosePackLine .deletePlacement,
#currentDiv.packContent #listePackLine tbody tr td div.choosePackLine .deleteBloc {
    float: right;
    background-color: #555;
    border-radius: 50% 50% 50% 50%;
    color: white;
    cursor: pointer;
    display: block;
    font-size: 11px;
    height: 18px;
    line-height: 19px;
    text-align: center;
    width: 18px;
    margin-right: 10px;
}

#currentDiv.packContent #listePackLine tbody tr td.placementContainer .infoPlacement {
   text-align: left;
}
#currentDiv.packContent #listePackLine tbody tr td.placementContainer .infoPlacement .priceName {
   font-weight: bold;
}
#currentDiv.packContent #listePackLine tbody tr td.categorieContainer div.tarifs .categoryName {
   padding: 2px 4px;
   margin: 3px 0px 2px 0px;
   font-weight: bold;
   background-color: #CCC;
   border-radius: 4px;
   color: #444;
}
#currentDiv.packContent #listePackLine tbody tr td.categorieContainer div.tarifs li {
  margin-top: 3px;
}
#currentDiv.packContent #listePackLine tbody tr td.categorieContainer div.tarifs .categoryName.hide {
  display: none;
}
#currentDiv.packContent #listePackLine tbody tr td.categorieContainer div.tarifs .priceName {
   padding-left: 5px;
}
#currentDiv.packContent #listePackLine tbody tr td.categorieContainer div.tarifs .priceAmount {
   float: right;
   padding-left: 5px;
   font-weight: bold;
}
#currentDiv.packContent #listePackLine tbody tr td.categorieContainer div.tarifs .priceAmount .total {
   display: none;
}

#currentDiv.packContent #listePackLine span.selectSeat {
   padding: 5px 8px;
   background-color: #555;
   color: #fff;
   border-radius: 3px;
   cursor: pointer;
   margin: 5px;
}

#currentDiv.packContent #listePackLine span.selectSeat.lock {
   opacity: 0.5;
   cursor: not-allowed;
}

#currentDiv.packContent #listePackLine tbody tr .warning,
#currentDiv.packContent #listeTypeClient tbody tr.warning,
#currentDiv.packContent #listePackLine tbody tr.warning {
    background: url(../../../../commun/images/warning.png) no-repeat 5px 50%;
    background-color: rgba(255, 174, 0, 0.2);
}

#currentDiv.packContent #listePackLine tbody tr td.warning
#currentDiv.packContent #listePackLine tbody tr.warning td,
#currentDiv.packContent #listeTypeClient tbody tr.warning td {
    text-align: left;
    padding-left: 31px;
    font-weight: bold;
}

#currentDiv.packContent #calendarBlock { clear:both; }
#currentDiv.packContent #calendarBlock #errorDate.warning {
    background: url(../../../../commun/images/warning.png) no-repeat 5px 50%;
    background-color: rgba(255, 174, 0, 0.2);
    text-align: left;
    padding: 5px 0px 5px 31px;
    font-weight: bold;
    clear:both;
}

#currentDiv.packContent #listePackLine tbody tr.noQuota {
    background-color: rgba(255, 0, 0, 0.2);
}

#currentDiv.packContent #listePackLine tbody tr.representationTooNear {
    background-color: rgba(255, 0, 0, 0.2);
}

#currentDiv.packContent #listePackLine tbody tr.error {
    background-color: rgba(255, 0, 0, 0.2);
}

#currentDiv.packContent #listePackLine tbody tr td div.tarifs ul {
    list-style-type: none;
}

#currentDiv.packContent #listePackLine .moreInfo + div.information,
#currentDiv.packContent #listePackLine .txtPlacement + div {
    position: absolute;
    z-index: 99!important;
    display: none;
    margin-left: 10px;;
  }

#currentDiv.packContent #listePackLine .moreInfo:hover + div,
#currentDiv.packContent #listePackLine .txtPlacement:hover + div {
    border: 1px solid #DEDDDD;
    border-radius: 5px;
    padding: 10px;
    background-color: #FFF;
    display: inline-block;
}

#currentDiv.packContent #listePackLine .pricesContainer ul.hide {
    display: none;
}

.information ul {
    margin-left: 20px;
    list-style-type: square;
    font-size: 11px;
}
.information p {
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 11px;
}
.information h3 {
    margin-bottom: 5px;
    padding-left: 10px;
}

#currentDiv.packContent input.error {
    border-color: red;
}

.packInformation {
    background-color: #127FBE;
    color: #FFFFFF;
    font-size: 14px;
    margin-top: 20px;
    padding: 20px;
}

#representationChoose {
    display: none;
}

#representationChoose .error {
    padding: 5px;
    background-color: #6D1611;
    text-align: center;
    color: #FFF;
    font-weight: bold;
}

.chooseDateOnCalendar {
    float : left;
}
#chooseHour {
    float: none;
}
#contenuCalendarHeures {
    display: none;
}

#currentDiv.packContent #listePackLine caption { 
  display:none; 
}

#currentDiv.packContent #contenuPlanSalle .compChoixSurPlan {
  margin-bottom: 10px;
}

#currentDiv.packContent #contenuPlanSalle .btnCloseMap {
    float: right;
    font-size: 10px;
    cursor: pointer;
    font-weight: normal;
}

#currentDiv.packContent #contenuPlanSalle .currentSelection {
    clear: both;
    background-color: #595959;
    color: #FFF;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 11px;
    border-radius: 3px 3px 0px 0px;
    margin-bottom: 1px;
}

#currentDiv.packContent .compChoixSurPlan table:not(.choixPlanMobile table) {
    background-color: inherit;
    border: 0;
    border-collapse: collapse;
    margin: 0px;
    width: auto;
}

#currentDiv.packContent .compChoixSurPlan .choixPlanMobile .boxTarifBlocPack {
    width: 90%;
    margin: 10px auto;
}

/* assurance */
.assuranceTable .body .column2.warning,
.assuranceTable .body .column3.warning {
    background-color: rgba(255, 0, 0, 0.2);
}

#pageEtape1 .buttonsContainer {
    margin: 30px 0 50px 0;
    text-align: right;
    padding-right: 15px;
}

#pageEtape1 .buttonsContainer.pack .validContent:nth-child(1) {
    margin-left: 40px;
}

#popupChoixBlocCategorie {
    margin-bottom: 10px;
}

#popupChoixBlocCategorie .categorieList {
    clear: both;
    margin: 5px;
}

#popupChoixBlocCategorie .libelleBloc {
    font-weight: bold;
    margin-bottom: 5px;
}

#popupChoixBlocCategorie .libelleBloc .resumeSelection {
    font-weight: normal;
    padding: 5px;
    color: #333;
    background-color: #DCDCDC;
    font-size: 11px;
    margin-bottom: 5px;
}

#popupChoixBlocCategorie .categorieList .categorieLibelle {
    float:left;
    text-align: left;
    width: 80%;
    line-height: 40px;
    height: 40px;
}

#popupChoixBlocCategorie .categorieList .categorieNbTypeClient {
}
#popupChoixBlocCategorie .categorieList .categorieNbTypeClient select.nbTypeClient {
    width: 50px;
}

#popupChoixBlocCategorie .error {
    padding: 5px;
    background-color: #6D1611;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    margin: 15px 0px;
}

.boxTarifBlocPack #popupCustomButtons {
    text-align: center;
}

#popup_container.loading #popup_panel {
    display: none;
}

#popup_content.confirm {
  text-align: center;
  padding: 10px 20px;
}

#popup_content #popup_message {
    padding-left: 0px;
}

#popup_content #popup_panel {
    display: inline-block;
    margin: 5px;
}

#popup_content #popup_panel input#popup_cancel {
    margin-left: 10px;
}

#popup_overlay {
    background: #555;
    opacity: 0.8;
}

.typeClientLibelle {
  font-size: 12px;
  font-weight: bold;
  text-align: left;
}

.categorieTarif, .montantTarif {
  font-size: 12px;
  display: none;
  text-align: left;
}

/*------------------------------------*\
    2.MEDIA_QUERIES
\*------------------------------------*/

@media screen and (max-width: 670px) {

  #listePackLine thead {
    display: none;
  }

  #listePackLine .line {
    width: 100%;
    border-bottom: 15px solid white!important;
    border-top: none!important;
    border-left: none!important;
    border-right: none!important;;
  }

  #listePackLine .line .position {
    width: 8%!important;
    display: inline-block;;;
  }

  #listePackLine .line .evenementContainer {
    width: 80%!important;
    display: inline-block;
    padding-left: 6%!important;;
  }

  #listePackLine .line .placementContainer {
    width: 100%!important;
    display: inline-block;
  }

  #listePackLine .line .categorieContainer {
    width: 80%!important;
    display: inline-block;
    padding-left: 19%!important;
  }

  #listePackLine .line .evenementContainer:before,
  #listePackLine .line .categorieContainer:before {
    font-size: 13px;
    background-color: #E4E4E4;
    color: #777;
    padding: 10px;
    margin: 5px 0;
    display: block;
    width: 80%;
    text-transform: uppercase;
  }

    #listePackLine .line .placementContainer:before,
    #listePackLine .line .placementContainer:before {
      font-size: 13px;
      background-color: #E4E4E4;
      color: #777;
      padding: 10px;
      margin: 5px 0;
      display: block;
      width: 63%;
      text-transform: uppercase;
      margin-left: 18.5%;
      text-align: left;
    }

  #listePackLine .line .evenementContainer:before,
  #listePackLine .line .evenementContainer:before {
    content: "Evenement";
  }

  #listePackLine .line .placementContainer:before,
  #listePackLine .line .placementContainer:before {
    content: "Placement";
  }

  #listePackLine .line .categorieContainer:before,
  #listePackLine .line .categorieContainer:before {
    content: "Montant";
  }

  #currentDiv.packContent table#listePackLine {
    text-align: left;
  }

  #listePackLine .line .placementContainer .choosePackLine {
    padding-top: 5px;
    width: calc(63% + 30px);
    margin: auto;
    margin-left: 17.5%;

  }

  #listePackLine .line .categorieContainer .tarifs {
    width: 84%;
  }

  #listePackLine tr.line:after {
    height: 10px;
    width: 100%;
    background-color: #fff;
  }

  #totalPack {
    width: 100%;
    display: block;
    border: none!important;
  }

  #grandTotal {
    width: 30%;
    display: inline-block;
  }

  #totalPack .total {
    width: 48%!important;
    display: inline-block;
  }

  #pageEtape1 .buttonsContainer {
    padding-right: 0;
  }

  img.moreInfo,
  #currentDiv.packContent #listePackLine .evenementContainer:after {
    display: none;
  }

  .compPack select {
    height: 40px!important;;
  }

  #currentDiv.packContent #listePackLine select {
    width: 87%;

  }


}



@media screen and (max-width: 320px) {

  #listePackLine thead {
    display: none;
  }

  #listePackLine .mandatory,
  #listePackLine .line {
    width: 100%;
    border-bottom: 30px solid white!important;
    border-top: none!important;
    border-left: none!important;
    border-right: none!important;;
  }

  #listePackLine .mandatory .position,
  #listePackLine .line .position {
    display: none;
  }

  #listePackLine .line .evenementContainer {
    width: 100%!important;
    display: inline-block;
    padding-left: 6%!important;;
  }

  #listePackLine .line .placementContainer {
    width: 100%!important;
    display: inline-block;
  }

  #listePackLine .line .categorieContainer {
    width: 100%!important;
    display: inline-block;
    padding-left: 20px!important;
  }

  #listePackLine .line .evenementContainer:before,
  #listePackLine .line .categorieContainer:before {
    font-size: 13px;
    background-color: #E4E4E4;
    color: #777;
    padding: 10px;
    margin: 5px 0;
    display: block;
    width: 80%;
    text-transform: uppercase;
  }

    #listePackLine .line .placementContainer:before {
      font-size: 13px;
      background-color: #E4E4E4;
      color: #777;
      padding: 10px;
      margin: 5px 0;
      display: block;
      width: 80%;
      text-transform: uppercase;
      text-align: left;
      margin-left: 17px;;
    }


  #listePackLine .line .placementContainer .choosePackLine {
    margin-left: auto;
    padding-top: 5px;

  }

  #listePackLine .line .categorieContainer .tarifs {
    width: 84%;
  }

  #listePackLine tr.line:after {
    height: 10px;
    width: 100%;
    background-color: #fff;
  }

  #totalPack {
    width: 100%;
    display: block;
    border: none!important;
  }

  #grandTotal {
    width: 40%;
    display: inline-block;
  }

  #totalPack .total {
    width: 40%!important;
    display: inline-block;
  }

  #pageEtape1 .buttonsContainer {
    padding-right: 0;
  }


}

/*------------------------------------------*\
            Packs placés mobiles
\*------------------------------------------*/

@media screen and (max-width: 670px) {

  #popupCustomButtons .btSubmit {
    width: 100%;
  }


  #popup_container:not(.popup_container_ajax) {
      font-family: Arial, sans-serif;
      font-size: 12px;
      min-width: 300px;
      width: 100%;
      background: rgba(0,0,0,0.50);
      color: #000;
      top: 0;
      left: 0;
      height: 100%;
      border:none;
  }


  #popup_title {
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      line-height: 3.75em;
      color: #fff;
      background: #ea0e18 none top repeat-x;
      cursor: default;
      padding: 0em;
      margin: 0em;
      border:none;
  }
  #popup_content.confirm {
    height: calc(100% - 66px);
    overflow: scroll;
    display: block;
  }
  #popup_message {
    color:#fff;
  }
  #popup_panel {
    padding: 10px;
  }
  #popup_content #popup_message {
    padding-left: 0px;
    margin-bottom: 90px;
    overflow: auto;
    height: auto;
    display: block;
  }
  #popup_content #popup_panel {
    display: flex;
    margin: 0 0 0px !important;
    padding: 10px 20px;
    position: fixed;
    bottom: 0;
    width: calc(100% - 40px) !important;
    left: 0;
    background: #fff;
  }
  #popup_content #popup_panel button {
display: flex;
    margin: 0 0 0px !important;
    padding: 10px 20px;
    position: fixed;
    bottom: 0;
    width: calc(100% - 40px) !important;
    left: 0;
    background: #fff;
  }
    .categorieList {
      padding: 5px 0;
    }
  .categorieList:nth-child(odd) {
    border-top: 1px solid #E4E1E1;
  }

  .typePlacement {
      padding-left: 13px;
  }
  #currentDiv.packContent #listePackLine span.selectSeat {
    margin: 0;
    width: calc(100% - 55px);
    max-width: 251px;
    padding: 20px 15px;
    font-size: 14px !important;
    text-align: center;
  }
}