@import url("/pages/wishlist/v4/views/webshopmelding/webshopmelding.css");
@import url("/pages/wishlist/v4/views/adresgegevens/adresgegevens.css");
@import url("/pages/wishlist/v4/views/leverdatum/leverdatum.css");
@import url("/pages/wishlist/v4/views/kostenoverzicht/kostenoverzicht.css");
@import url("/pages/wishlist/v4/views/betaalmethode/betaalmethode.css");
@import url("/pages/wishlist/v4/views/verzendmethode/verzendmethode.css");
@import url("/pages/wishlist/v4/views/bezorgopties/bezorgopties.css");
@import url("/pages/wishlist/v4/views/producten/producten.css");
@import url("/pages/wishlist/v4/views/delen/delen.css");
@import url("/pages/wishlist/v4/views/verderwinkelen/verderwinkelen.css");
@import url("/pages/wishlist/v4/views/actiecodes/actiecodes.css");
@import url("/pages/wishlist/v4/views/samenvatting/samenvatting.css");
@import url("/pages/wishlist/v4/views/adrescontrole/adrescontrole.css");
@import url("/pages/wishlist/v4/views/akkoordverklaringen/akkoordverklaringen.css");
@import url("/pages/wishlist/v4/views/betaalbutton/betaalbutton.css");

#wm_container{ 
    display:                    grid;
    grid-template-columns:      1fr 1fr 1fr 330px;
    column-gap:                 20px;
    row-gap:                    10px;
    grid-template-areas:        "webshopmelding webshopmelding webshopmelding webshopmelding"
                                "producten producten producten kostenoverzicht"
                                "delen delen verderwinkelen kostenoverzicht"
                                "adresgegevens adresgegevens adresgegevens adresgegevens"
                                "leverdatum leverdatum leverdatum leverdatum"
                                "verzendmethode verzendmethode verzendmethode verzendmethode"
                                "bezorgopties bezorgopties bezorgopties bezorgopties"
                                "betaalmethode betaalmethode betaalmethode betaalmethode"
                                "samenvatting samenvatting samenvatting samenvatting"
                                "akkoordverklaringen akkoordverklaringen akkoordverklaringen akkoordverklaringen"
                                "adrescontrole adrescontrole adrescontrole adrescontrole"
                                "captcha captcha captcha captcha"
                                "betaalbutton betaalbutton betaalbutton betaalbutton";
    padding:                    0px 10px 0px 10px;
}

#wm_container *{
    border-radius:              0;
}

#wm_container a{
    color:                      inherit;
}

#wm_container input::-webkit-outer-spin-button,
#wm_container input::-webkit-inner-spin-button {
    -webkit-appearance:         none;
    margin:                     0;
}

#wm_container select, #wm_container option{
    color:                      #444444;
}

/* Firefox */
#wm_container input[type=number] {
    -moz-appearance:            textfield;
}

#wm_container>div>h3{
    margin-top: 30px;
}

#wm_container hr{
    margin-top:             5px;
    margin-bottom:          10px;
    border:                 none;
    height:                 1px;
    color:                  var(--colorMediumGray);
    background-color:       var(--colorMediumGray);
}

#wm_container h3{
    font-family:        "Roboto",sans-serif;
    font-size:          15px;
    font-weight:        700;
    text-transform:     uppercase;
    color:              var(--colorGreen);
    padding:            0px;
    margin:             0px;
}
#wm_container h4{
    font-family:        "Roboto",sans-serif;
    font-size:          14px;
    font-weight:        normal;
    color:              #444444;
    padding:            0px;
    margin:             0px;
}
#wm_container h5{
    font-family:        "Roboto",sans-serif;
    font-size:          13px;
    font-style:         italic;
    font-weight:        400;
    color:              #444444;
    padding:            0px;
    margin:             0px;
}

#wm_container #wm_webshopmelding{
    grid-area:                  webshopmelding;
}
#wm_container #wm_producten{
    grid-area:                  producten;
}
#wm_container #wm_delen{
    grid-area:                  delen;
    height:                     max-content;
}
#wm_container #wm_verderwinkelen{
    grid-area:                  verderwinkelen;
    height:                     max-content;
}
#wm_container #wm_kostenoverzicht{
    grid-area:                  kostenoverzicht;
}
#wm_container #wm_adresgegevens{
    grid-area:                  adresgegevens;
}
#wm_container #wm_leverdatum{
    grid-area:                  leverdatum;
}
#wm_container #wm_verzendmethode{
    grid-area:                  verzendmethode;
}
#wm_container #wm_bezorgopties{
    grid-area:                  bezorgopties;
}
#wm_container #wm_betaalmethode{
    grid-area:                  betaalmethode;
}
#wm_container #wm_samenvatting{
    grid-area:                  samenvatting;
}
#wm_container #wm_captcha{
    grid-area:                  captcha;
}
#wm_container #wm_adrescontrole{
    grid-area:                  adrescontrole;
}
#wm_container #wm_akkoordverklaringen{
    grid-area:                  akkoordverklaringen;
}
#wm_container #wm_betaalbutton{
    grid-area:                  betaalbutton;
}

#wm_container form input{
    margin:                     0px;
}
#wm_container form input[type="checkbox"]{
    width:                      17px;
    height:                     17px;
    vertical-align:             top;
}
#wm_container form input[type="radio"]{
    width:                      17px;
    height:                     17px;
    vertical-align:             top;
}
#wm_container form label{
    margin-left:                5px;
    line-height:                20px;
    vertical-align:             top;
    -webkit-user-select:        none;
    user-select:                none;
}

#wm_container form>div>div>div:nth-child(2) input[type="text"],
#wm_container form>div>div>div:nth-child(2) input[type="email"]{
    width:                  100%; 
    height:                 40px;
    padding-left:           10px;
    border:                 1px solid var(--colorMediumGray);
    border-radius:          4px;
    box-sizing:             border-box;
}
    #wm_container form>div>div>div:nth-child(2) input[type="button"]{
        width:                  100%; 
        height:                 40px;
        border:                 1px solid var(--colorMediumGray);
        border-radius:          4px;
        box-sizing:             border-box;
        background-color:       var(--colorBlue);
        color:                  var(--colorWhite);
        cursor:                 pointer;
    }
        #wm_container form>div>div>div:nth-child(2) input[type="button"]:hover{
            filter:             brightness(110%);
        }

#wm_container input::placeholder{
    color:                  var(--colorMediumGray);
    font-style:             italic;
    text-transform:         none !important;
}
    #wm_container input:focus::placeholder{
        opacity:            0;
    }

#wm_container input:disabled{
    background-color: var(--colorLightGray);
}

#wm_container form select{
    width:                  100%; 
    height:                 40px;
    padding:                4px;
    border:                 1px solid var(--colorMediumGray);
    border-radius:          4px;
    background-color:       var(--colorWhite);
}

#wm_container form div.incorrect input,
#wm_container form div.incorrect select{
    background-color:       #EE888830;
    border:                 1px solid var(--colorRed);
}
    #wm_container form div.incorrect input::placeholder{
        color:              var(--colorGray);
    }

#wm_container form [data-error]{
    display:                none;
}
    #wm_container form div.incorrect [data-error]{
        display:                block;
        padding:                3px 0px 3px 0px;
        font-size:              12px;
        color:                  var(--colorRed) !important;
    }
    #wm_container form div.showerror [data-error]{
        display:                block;
        padding:                3px 0px 3px 0px;
        font-size:              12px;
        color:                  var(--colorBlue);
    }

#wm_container form>div{
    display:                grid;
    grid-auto-columns:      1fr;
    grid-auto-flow:         row;
    grid-template-columns:  repeat(12, 1fr);
    column-gap:             15px;
}

#wm_container form div>div{
    grid-column:            span var(--wmL);
}

#wm_container .wmImgButton{
    display:                grid;
    grid-template-areas:    "wmImgButtonimg wmImgButtontext";
    grid-template-columns:  30px max-content;
    grid-template-rows:     30px;
    width:                  max-content;
    padding:                5px 15px 5px 5px;
    background-color:       var(--bgcolor);
    color:                  var(--color);
}
    #wm_container .wmImgButton>div:nth-child(1){
        grid-area:          wmImgButtonimg;
        align-self:         center;
    }
    #wm_container .wmImgButton>div:nth-child(2){
        grid-area:          wmImgButtontext;
        align-self:         center;
    }
    #wm_container .wmImgButton>div img{
        max-width:          20px;
        max-height:         20px;
        margin:             auto;
    }
    #wm_container .wmImgButton:hover{
        cursor:             pointer;
        filter:             brightness(110%);
    }

#wm_container .wmButton{
    display:                grid;
    grid-template-areas:    "wmButtontext";
    grid-template-columns:  max-content;
    grid-template-rows:     30px;
    width:                  max-content;
    padding:                5px 10px 5px 10px;
    background-color:       var(--bgcolor);
    color:                  var(--color);
}
    #wm_container .wmButton>div:nth-child(1){
        grid-area:          wmButtontext;
        align-self:         center;
    }
    #wm_container .wmButton:hover{
        cursor:             pointer;
        filter:             brightness(110%);
    }

@media screen and (max-width: 1049px) {
    #wm_container{
        grid-template-columns:  1fr 1fr 1fr 250px;
    }
    #wm_container form div>div{
        grid-column:        span var(--wmM);
    }
}

@media screen and (max-width: 700px) {
    #wm_container{
        grid-template-columns:  1fr;
        grid-template-areas:    "webshopmelding"
                                "producten"
                                "delen"
                                "kostenoverzicht"
                                "verderwinkelen"
                                "adresgegevens"
                                "leverdatum"
                                "verzendmethode"
                                "bezorgopties"
                                "betaalmethode"
                                "samenvatting"
                                "akkoordverklaringen"
                                "adrescontrole"
                                "captcha"
                                "betaalbutton";
    }

    #wm_container form div>div{
        grid-column:                span var(--wmS);
    }
}