/******************************************************************************/
/*                                  compPack                                  */
/******************************************************************************/

.compPack {}

.compPack .headerComposants {}

.compPack .headerComposants .footerComposants {}

.compPack .headerComposants .footerComposants .contentComposants {}

.compPack .headerComposants .footerComposants .contentComposants .topContentComposants {}

.compPack .headerComposants .footerComposants .contentComposants .topContentComposants .titleComposants {}

.compPack .headerComposants .footerComposants .contentComposants .topContentComposants .titleComposants span {}

.compPack .headerComposants .footerComposants .contentComposants .dataContentComposants {}

.compPack .headerComposants .footerComposants .contentComposants .bottomContentComposants {}


/*------------------------------------*\
# position calendrier
\*------------------------------------*/

.compPack .dp-popup {
    top: 0px !important;
}

/*------------------------------------*\
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

*/


#currentDiv.packContent h2 {
    margin: 20px 0 5px;
    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: 100%;
    margin: auto;
    margin-top: 0;
    margin-bottom: 40px;
    text-align: center;
    border: none;
}

#currentDiv.packContent table#listePackLine {
    margin-bottom: 0px;
}

#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 {
    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: 700;
    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-child(1) {
    border-bottom: 1px solid #f2f2f2;
}

#currentDiv.packContent #listeTypeClient tr td:nth-last-child(1) {
    text-align: right;
    padding-right: 10px;
    border-bottom: 1px solid #f2f2f2;
}

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

#currentDiv.packContent #listePackLine select {
    width: 85%;
    padding-left: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
}

#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: 700;
    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: 700;
}

#currentDiv.packContent #listePackLine tbody tr td.categorieContainer div.tarifs .categoryName {
    padding: 2px 4px;
    margin: 3px 0px 2px 0px;
    font-weight: 700;
    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: 700;
}

#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: 700;
}

#currentDiv.packContent #calendarBlock {
    clear: both;
    padding: 20px;
}

#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: 700;
    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: 700;
}

.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;
}

#currentDiv.packContent #contenuPlanSalle .currentSelection {
    clear: both;
    background-color: #595959;
    color: #FFF;
    padding: 5px 10px;
    font-weight: 700;
    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 {
    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: 700;
    margin-bottom: 5px;
}

#popupChoixBlocCategorie .libelleBloc .resumeSelection {
    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: 700;
    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: 700;
    text-align: left;
}

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

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

@media screen and (max-width: 670px) {
    .compPack #chooseDateOnCalendar {
        margin: 5px auto 15px auto;
        width: 270px;
    }

    .compPack h2 {
        margin: 0 0;
        padding: 10px;
        color: #000;
        font-weight: bold;
        font-family: "graphik";
        font-size: 13px;
    }


    #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: "Evènement";
    }

    #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-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: 700;
        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;
    }
}