/* Feuille de style concernant l'ensemble des modification pour rendre le MarketPlace responsive */

/****************** Pour les résolution de moins de 640PX *****************/
@media screen and (max-width: 640px) {
    /* Bandeau de l'entité en mode Isolé */
    #producer-header #producer-header-content {
        margin: 0;
    }

        #producer-header #producer-header-content div h2 {
            left: 20px;
        }

        #producer-header #producer-header-content div .global-info {
            right: 10px;
        }

            #producer-header #producer-header-content div .global-info li {
                margin-left: 10px;
                margin-right: 0;
            }

        #producer-header #producer-header-content div .entity-network {
            display: none;
        }


        #producer-header #producer-header-content .top-right-triangle,
        #producer-header #producer-header-content .top-left-triangle {
            display: none;
        }

    #bloc-error-cell {
        display: table-row;
    }

    .hideInSmall {
        display: none !important;
    }

    /* Panier */
    #panier {
        width: 60px;
    }

    #searchResults #subnetwork-logo {
        width: 150px;
        display: block;
        margin: 0 auto;
        position: relative;
        top: 0;
        right: 0;
    }


    body.isolated #bodyContent {
        border-radius: 0px;
        box-shadow: none;
        margin-bottom: 0px;
    }

    /**************************************************/
    /******************* RECHERCHE ********************/
    /**************************************************/
    body.isolated #recherche {
        padding-right: 0;
    }

    /* Formulaire de recherche */
    .searchView #bloc-gauche {
        position: relative;
        width: 95%;
    }

        .searchView #bloc-gauche #search-form #Sort {
            margin-left: 192px;
            width: 110px;
        }

    /***********************************************************/
    /******************* RESULTAT RECHERCHE ********************/
    /***********************************************************/
    .searchView #bloc-centre {
        margin-left: 0 !important;
        margin-right: 0;
        width: 100%;
        float: left;
        padding-top: 0px;
    }

    body.isolated .searchView #bloc-centre {
        padding-top: 0;
    }

    #SearchResultsContainer {
        border-top-color: #929292;
        border-top-style: solid;
        border-top-width: 1px;
        border-bottom-color: #929292;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

        #SearchResultsContainer #SearchResultsContainerNiv2 {
            border-color: rgb(232, 232, 232);
            border-style: solid;
            border-width: 10px;
            background-color: rgb(232, 232, 232);
        }

    #searchResults .content .product {
        border: 1px solid lightgray;
        border-radius: 0 7px 7px;
        width: auto;
    }

    #searchResults .content .enabled {
        background-color: white;
        box-shadow: 1px 1px 12px #555;
    }

    #searchResults .content .product .product-age {
        bottom: 0px;
    }

    #searchResults .content .product .product-radius,
    #searchResults .content .product .product-distance {
        border-top-left-radius: 0px 0;
    }

    #searchResults .content .product .product-distance {
        font-size: 10px;
    }

    #searchResults .content .product .product-age > span {
        padding: 2px;
        font-size: 10px;
    }

    #searchResults .content .product .product-info > div {
        border: none;
        display: table;
    }


        #searchResults .content .product .product-info > div.product-util {
            border: medium none;
            bottom: 0;
            display: table;
            float: left;
            left: 0;
            padding-bottom: 0;
            width: 100%;
        }


            #searchResults .content .product .product-info > div.product-util > div {
                display: table-cell;
                margin-bottom: 0;
                text-align: center;
                vertical-align: bottom;
                width: 34%;
            }


    #searchResults .content .product .product-info .product-description > div.product-attachement {
        border-radius: 0;
        width: 100px;
    }

        #searchResults .content .product .product-info .product-description > div.product-attachement a img {
            height: auto;
            max-width: 100px;
            border-top-left-radius: 0px;
        }


    #searchResults .content .product .product-price > span {
        border-radius: 0 0 0 5px;
    }


    a.tooltip:hover div {
        left: 0;
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        right: 0;
        text-align: left;
    }

    a.tooltip img.callout {
        display: none;
    }




    #searchResults .content .product .product-description .price {
        margin-left: 10px;
        font-size: 12px;
        margin-top: 2px;
        width: auto;
    }


        #searchResults .content .product .product-description .price .price-label {
            width: auto;
        }

        #searchResults .content .product .product-description .price .price-value {
            border-radius: 4px;
            font-size: 14px;
            padding: 4px;
        }


        /* On casse les colonnes pour avoir plus de largeur */
        #searchResults .content .product .product-description, #searchResults .content .product .product-description .product-attachement, #searchResults .content .product .product-description .textual-description-container
        {
            display:block;
        }
        /* On supprime la marge de droite */
        #searchResults .content .product .product-description .product-description-field
        {
            margin-right:0px;
        }
        

    #searchResults .content .product .product-util .price {
        width: 100px;
        text-align: center;
        display: block;
        margin: 0px 0px 10px 0px;
    }

        #searchResults .content .product .product-util .price .price-value {
            width: 90px;
            text-align: center;
            border-radius: 5px 0px 0px 5px;
        }

        #searchResults .content .product .product-util .price .price-label {
            width: 100px;
            text-align: center;
            font-size: 11px;
            color: <%=dc.SecondColor%>;
        }

    /******************************************************/
    /******************* FICHE PRODUIT ********************/
    /******************************************************/
    .retour > span {
        display: none;
    }

    #detail .header {
        padding-left: 8px;
        padding-right: 8px;
        width: calc( 100% - 16px );
    }

        #detail .header div.bloc-titre {
            border: none;
        }

            #detail .header div.bloc-titre > div:first-child {
                float: none;
                border-bottom: #CC9A04 1px solid;
            }

            #detail .header div.bloc-titre .bloc-droit {
                border: solid 1px #f4f3f3;
                border-radius: 7px;
                padding-left: 10px;
                padding-right: 10px;
            }


            #detail .header div.bloc-titre > div .prix {
                margin-top: 12px;
            }

                #detail .header div.bloc-titre > div .prix > div:first-child {
                    margin-top: 0px;
                }

                #detail .header div.bloc-titre > div .prix strong {
                    font-size: 16pt;
                }

    #product-detail, body.isolated #product-detail,
    #commande, body.isolated #commande,
    #commande, body.isolated #commande,
    #detail.create-testimony, body.isolated #detail.create-testimony {
        border-top-color: #929292;
        border-top-style: solid;
        border-top-width: 1px;
        border-bottom-color: #929292;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding-bottom: 10px;
        border-left-color: rgb(232, 232, 232);
        border-left-style: solid;
        border-left-width: 10px;
        border-right-color: rgb(232, 232, 232);
        border-right-style: solid;
        border-right-width: 10px;
        background-color: rgb(232, 232, 232);
        width: calc( 100% - 20px );
    }

        #product-detail #detail,
        .create-testimony > div {
            background-color: white;
            box-shadow: 1px 1px 12px #555;
        }

    .create-testimony > div {
        margin-top: 20px;
    }

    #product-detail #customerInformations {
        margin: 0 !important;
    }

    #product-detail .book {
        left: 0 !important;
        position: relative !important;
        float: left;
        width: 100%;
    }

        #product-detail .book > .bouton-gris {
            float: left !important;
            margin-left: 0 !important;
        }

    #product-detail #bloc-retour {
        float: left;
    }

    #product-detail #bloc-panier {
        margin-top: 10px;
        width: 100%;
    }

    #detail #displayAttachment {
        height: 200px;
    }

    #product-detail #detail #bloc-gauche,
    #product-detail #detail #bloc-droite {
        width: calc( 100% - 16px );
        margin-left: 0px;
        margin-right: 0px;
    }

        #product-detail #detail #bloc-gauche .cadre-pli {
            padding-left: 0;
        }

            #product-detail #detail #bloc-gauche .cadre-pli .cadre {
                border-bottom: none;
            }

                #product-detail #detail #bloc-gauche .cadre-pli .cadre .cadre-bas {
                    height: 0;
                }

                    #product-detail #detail #bloc-gauche .cadre-pli .cadre .cadre-bas .cadre-bas-01 {
                        background: none repeat scroll 0 0 #e8e8e8;
                        border-left: 1px solid #bababa;
                    }

                    #product-detail #detail #bloc-gauche .cadre-pli .cadre .cadre-bas .cadre-bas-02 {
                        background: none repeat scroll 0 0 #e8e8e8;
                        border-right: 1px solid #bababa;
                    }

        #product-detail #detail #bloc-droite .cadre-pli {
            padding-right: 0;
        }

    #product-detail #detail .modele {
        padding-right: 0;
    }

    #product-detail #detail .scrollable {
        width: 100%;
    }

    #addingToBasketPopup .divContent .subDivForQuantity {
        margin-left: 0;
    }

    #product-detail #detail .content .license-info {
        width: auto;
    }

    #product-detail .dates-stages #customerInformations {
        display: none;
    }

    /*********************************************************/
    /******************* PLANNING - STAGE ********************/
    /*********************************************************/
    .product-year-calendar {
        display: none !important;
    }

    .product-year-calendar-mobile {
        display: block;
    }

    /*******************************************************/
    /******************* PLANNING - LOC ********************/
    /*******************************************************/
    .divSliceSelectionMainCont .bouton-panier {
        margin-left: 0 !important;
    }


    /**********************************************************/
    /******************* PROCESSUS D'ACHAT ********************/
    /**********************************************************/

    #commande .cadre .content .title {
        border-left: none;
        border-right: none;
        border-radius: 0px;
        margin: 0px;
    }

    #commande #bloc-droite {
        float: left;
        margin-left: 0;
        margin-top: 10px;
        margin-right: 0;
    }

        #commande #bloc-droite .cadre {
            border: none;
        }

            #commande #bloc-droite .cadre .content {
                padding: 5px;
                margin: 0;
                box-shadow: 1px 1px 12px #555;
            }

                #commande #bloc-droite .cadre .content .bloc-titre {
                    margin-bottom: 0;
                    margin-top: 0;
                }

                #commande #bloc-droite .cadre .content #customerInformations #leftBlock,
                #commande #bloc-droite .cadre .content #customerInformations #rightBlock {
                    float: left;
                    width: calc(100% - 8px);
                }

                    #commande #bloc-droite .cadre .content #customerInformations #rightBlock.informations,
                    #commande #bloc-droite .cadre .content #customerInformations #leftBlock.informations {
                        width: 100%;
                    }



    .cartline-header > div > div.cartline-header-label {
        font-size: 12px;
    }

    .cartline-header > div > div:nth-child( n + 3) {
        display: none;
    }

    .cartline-content .cartline-content-consumers,
    .cartline-content .cartline-content-image,
    .cartline-content .cartline-content-discount {
        width: 100%;
        text-align: left;
    }

        .cartline-content .cartline-content-consumers table {
            width: 100%;
        }

            .cartline-content .cartline-content-consumers table .radioButtonListFor {
                float: left;
            }

    .summaryStep div.divForeignProductOfCartLine {
        margin-left: 20px;
    }

        .summaryStep div.divForeignProductOfCartLine .foreign-product-content,
        .summaryStep div.divForeignProductOfCartLine .foreign-product-content > div {
            display: inherit;
        }

    /***************************************************/
    /******************* FAQ - SECU ********************/
    /***************************************************/
    #faq, #security {
        margin: 80px 20px 0;
    }

        #security .security-payment,
        #faq .faq-query img {
            width: 100%;
        }

    /***************************************************/
    /******************* TEMOIGNAGE ********************/
    /***************************************************/
    #bloc-unique .description {
        width: calc( 100% );
        margin-right: 0px;
    }

    #bloc-unique #evaluations {
        clear: both;
        float: none;
        background: none;
        border-radius: initial;
        margin-left: auto;
        margin-right: auto;
    }

    /* Création de témoignage */
    #detail.create-testimony #bloc-gauche, #detail.create-testimony #bloc-droite,
    #detail.create-testimony #testimony-description,
    #detail.create-testimony #testimony-pj {
        float: none;
        width: auto;
        margin-left: 0px;
    }

    #detail.create-testimony #testimony-pj {
        margin-top: 10px;
    }

    #detail.create-testimony #bloc-droite {
        padding-top: 75px;
    }

    /****************************************************************/
    /******************** FOOTER INFO COOKIES ***********************/
    /****************************************************************/
    #cookie-authorization {
        line-height: 30px;
    }


    /*******************************************************************************/
    /******************** VISU COMMANDE : IMPRESSION BILLETS ***********************/
    /*******************************************************************************/

    .action-button-container#tickets-button-container {
        width: auto;
    }




    /******************************************************************************/
    /******************** CUSTOMER AREA ACCESS : CONNECTION ***********************/
    /******************************************************************************/

    #logCustomerArea .leftBlock {
        margin: 0 auto;
        float: none;
    }

    #searchResults .content .product .product-description .grid-price-search-model {
        margin-left: 10px;
        margin-top: 10px;
    }

    .grid-price-search-model > span {
        display: block;
        margin-left: 0px;
        float: none;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .grid-price-search-model .grid-price-search-model-base-price {
        display: none;
    }
}