/* ---------------------------------------------------------
 * WKHEOPS : Css pour le fiff
------------------------------------------------------------ */

body        { background-color: white;
            }

#nav-wk     { background-color: #0a53be ;
              margin-bottom: 8px;
            }

.content-base
            { min-height: calc(100vh - 80px);
              max-height: calc(100vh - 80px);
            }

.content-form
            { background-color: transparent;
            }

#content a.active
            { background-color: lightgrey;
              color: black;
              font-weight: bolder;
            }

.card-max   { background-color: transparent;
            }


.modal-wkheader-form
            { background-color: #0a53be ;
            }

.modal-body-big { background-color: lightgrey ;
              padding-left: 10px;
              padding-right: 10px ;
            }

img.wkformlogo
            { filter: invert(100%);
            }

input#id-116
           { font-size: x-small;
           }

#id-171    { min-height: 100px;
           }

.wk-backurl a
           { color: white;
           }

.wk-texte p span
           { background-color: transparent;
           }

.alert-form > .modal-header,
.alert-form > .modal-footer button,
.wk-bt-primary
           { background-color: #0a53be ;
             color: white;
           }

.alert-form > .modal-footer button:hover ,
.wk-bt-primary:hover
           { background-color: rgb(187, 194, 239);
             color: black
           }

.alert-form > .modal-body p
           { color: black;
           }

@media (max-width: 991px)
       { #wkform-footcenter  { text-align: left !important;
                             }
         #wkform-footright   { text-align: left !important;
                             }
       }

/* Choix des tarifs -------------------------------------------------------------- */

 .wkform5c-container
    { background-color: transparent ;
    }

 .wkform5c-container
    { display: grid;
        grid-template-columns: 3% 1fr 1fr 1fr 3% 1fr 1fr 3%;
        grid-template-rows: 10px 230px 1fr 60px;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-template-areas:
          "margg head head head head head head margd"
          "margg info1 info1 info1 margc note1 note1 margd"
          "margg body1 body1 body1 margc note1 note1 margd"
          "margg foot foot foot margc vide vide margd" ;
    }

    .wkform5c-mg    { grid-area: margg ; }
    .wkform5c-mc    { grid-area: margc ; }
    .wkform5c-md    { grid-area: margd ; }
    .wkform5c-vi    { grid-area: vide  ; }
    .wkform5c-body1 { grid-area: body1 ; }
    .wkform5c-info1 { grid-area: info1 ; }
    .wkform5c-note1 { grid-area: note1 ; }

    .wkform5c-body1
    { padding: 5px;
        background-color: #f8f8f8;
        box-shadow: 2px 2px 16px #c6c7c8;
    }
    .wkform5c-info1
    { padding: 10px;
        margin-bottom: 10px;
        background-color: rgb(187, 194, 239) ;
        box-shadow: 2px 2px 16px #c6c7c8;
        color: black;
    }

    .wkform5c-note1
    { padding: 20px;
        background-color: #f8f8f8 ;
        box-shadow: 2px 2px 16px #c6c7c8;
    }

    .wkform5c-note1 button
    { width: auto;
    }

    .wkform5c-header
    { grid-area: head;
        justify-self: start;
        align-self: center;
    }

    .wkform5c-footer
    { grid-area: foot;
        align-self: center;
        background-color: transparent;
    }

.wkform5c-mg,
.wkform5c-mc,
.wkform5c-md,
.wkform5c-vi
    { background-color: transparent;
    }

.wkform5c-texte
      { background-color: rgb(187, 194, 239);
        color: black ;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 10%;
        padding-left: 10%;
    }

    .wkform5c-texte button
    { margin-left: calc(var(--bs-gutter-x) * .5);
    }

    .wkform5c-image
    { background-color: transparent;
        padding-top: 10px;
    }

    .wkform5c-image img
    { max-height: 100%;
      max-width: 250px;
       /* min-width: 100%;*/
        vertical-align: middle;
    }

    .wkform5c-info1,
    .wkform5c-info2
    { background-color: rgb(187, 194, 239);
        color: black
    }

@media (max-width: 1021px) {
        .wkform5c-container {
            grid-template-columns: 1fr 1fr 1fr 3% 1fr 1fr ;
            grid-template-rows: 10px 230px 1fr 60px;
            grid-template-areas:
          "head head head head head head"
          "info1 info1 info1 margc note1 note1"
          "body1 body1 body1 margc note1 note1"
          "foot foot foot margc vide vide" ;
        }

        .wkform5c-mg,
        .wkform5c-mc,
        .wkform5c-md
        {
            display: none;
        }
    }

@media (max-width: 721px) {
        .wkform5c-container {
            grid-template-columns: 100% ;
            grid-template-rows: 10px auto auto 60px auto ;
            grid-template-areas:
       "head"
       "info1"
       "body1"
       "foot"
       "note1";
        }

        .wkform5c-mg,
        .wkform5c-mc,
        .wkform5c-md,
        .wkform5c-vi
        {
            display: none;
        }

    }

/* Page panier -------------------------------------------------------------- */

.wkform5r
      { padding: 0;
        margin: 0;
      }

.wkform5r-container
      { min-height: calc(100vh - 420px);
        display: grid;
        grid-template-columns: 8% 2fr 1fr 8%;
        grid-template-rows: 20px 120px auto 60px;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-template-areas:
          "margeg head head marged"
          "margeg body infos marged"
          "margeg body resume marged"
          "margeg foot vide marged" ;
      }

.wkform5r-mg
{ grid-area: margeg;
}

.wkform5r-md
{ grid-area: marged;
}

.wkform5r-vi
{ grid-area: vide;
}

.wkform5r-header
{ grid-area: head;
}



.wkform5r-infos
      { background-color: #f8f8f8;
        box-shadow: 2px 2px 6px #c6c7c8;
        color: black;
    }

.wkform5r-body
{ background-color: #f8f8f8;
  grid-area: body;
  padding-left: 4px;
  padding-top: 4px;
  padding-right: 4px;
  box-shadow: 2px 2px 16px #c6c7c8;
  margin-right: 10px;
}

.wkform5r-infos
  { grid-area: infos;
    background-color: #fff;
    box-shadow: 2px 2px 16px #c6c7c8;
    color: black;
    padding: 10px;
  }

.wkform5r-infos a
       { font-size: 15px;
         text-decoration: underline;
       }

.wkform5r-resume
       { grid-area: resume ;
         background-color: rgb(187, 194, 239) ;
         box-shadow: 2px 2px 16px #c6c7c8;
         padding: 10px;
         margin-top: 15px;
       }


.wkform5r-footer
       { grid-area: foot;
         align-self: center;
       }

@media (max-width: 1021px) {
    .wkform5r-container {
     grid-template-columns: 2fr 1fr;
     grid-template-rows: 20px 120px auto 60px;
     grid-template-areas:
       "head head"
       "body infos"
       "body resume"
       "foot vide" ;
    }
    .wkform5r-mg,
    .wkform5r-md {
        display: none;
    }
}

@media (max-width: 721px) {
    .wkform5r-container {
     grid-template-columns: 1fr ;
     grid-template-rows: 10px auto auto auto 60px;
     grid-template-areas:
       "head"
       "resume"
       "body"
       "infos"
       "foot";
    }
    .wkform5r-vi {
        display: none;
    }
}