/* index */    
    .retouren_page {
        margin: 15px 0;
    }

    .retouren_page .hidden {
        display: none;
    }

    .retouren_page h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--colorGreen);
        padding: 0px;
        margin: 0px;
    }

    .retouren_page hr {
        margin-bottom: 20px;
    }

    .retouren_line {
        display: grid;
        margin-bottom: 20px;
    }

    .retour_info {
        display: grid;
        gap: 5px;
        padding: 5px;
    }

    .retour_info .rt_label {
        display: block;
    }

    

    @media screen and (max-width: 1000px) {
        .retour_info {
            grid-template-columns: 150px 1fr 150px 1fr;
        }
        .retouren_line .retouren_headings {
            display: none;
        }
    }

    @media screen and (min-width: 1001px) {
        .retour_info {
            display: grid;
            grid-template-rows: 20px;
            grid-template-columns: 120px 120px 100px 400px 1fr 60px;
            align-items: center;
            padding: 5px;
        }

        .retour_info .rt_label {
            display: none;
        }
    }

    @media screen and (max-width: 700px) {
        .retour_info {
            grid-template-columns: 150px auto;
        }
    }

    .retouren_title {
        align-items: center;
        background-color: var(--colorGreen);
        color: var(--colorWhite);
        font-weight: 700;
        padding: 5px;

    }

    .retouren_headings {
        display: grid;
        grid-template-rows: 20px;
        grid-template-columns: 120px 120px 100px 400px 1fr 60px;
        gap: 5px;
        align-items: center;
        background-color: var(--colorGray);
        color: var(--colorWhite);
        font-weight: 700;
        padding: 5px;
    }

    .retour_info:nth-child(even) {
        background-color: var(--colorLightGray);
    }

    .pdf_icon {
        height: auto;
        width: 20px;
        justify-self: center;
        cursor: pointer;
    }

    .pdf_icon:hover {
        filter: brightness(110%);
    }

/* Retour aanmaken */
    .retouren_page {
        margin: 15px 0;
    }

    .retouren_page .hidden {
        display: none;
    }

    .retouren_page h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--colorGreen);
        padding: 0px;
        margin: 0px;
    }

    .retouren_page hr {
        margin-bottom: 20px;
    }



/* Ontbindingsformulier */
    #quickretour_form.loading{
        opacity:                0.5;
        filter:                 grayscale(1);
        pointer-events:         none;
    }
    #quickretour_form.loading input[type="text"]{
        background-color:   var(--colorLightGray);
    }
        #quickretour_form > div *, 
        #quickretour_art_container > div *{
            font-family:            "Roboto", sans-serif;
        }
    .quickretour_header{
        max-width:              650px;
    }
    #quickretour_art_container{
        display:                none;
        margin:                 10px 0px 15px 0px;
    }
    #quickretour_art_container.show{
        display:                block;
    }
        #quickretour_art_container.loading{
            opacity:                0.5;
            filter:                 grayscale(1);
            pointer-events:         none;
        }
        #quickretour_art_container .quickretour_productgrid{
            display:                grid;
            grid-template-columns:  repeat(auto-fill, minmax(min(400px, 100%), 1fr));
            grid-auto-rows:         auto;
            grid-template-rows:     20px auto auto auto 40px;
            column-gap:             20px;
            padding-left:           5px;
        }

        #quickretour_art_container .quickretour_product[data-allowretour="0"], 
        #quickretour_art_container .quickretour_product[data-retourneerbaar="0"]{
            cursor:                 not-allowed !important;
        }
        #quickretour_art_container .quickretour_product[data-allowretour="0"] > *,
        #quickretour_art_container .quickretour_product[data-retourneerbaar="0"] > *{
            pointer-events:         none;
        }
            #quickretour_art_container .quickretour_product[data-allowretour="0"] .img,
            #quickretour_art_container .quickretour_product[data-retourneerbaar="0"] .img{
                filter:             grayscale(1);
                opacity:            0.5;
            }
            #quickretour_art_container .quickretour_product[data-allowretour="0"] .status{
                color:              var(--colorRed);
            }

        #quickretour_art_container .quickretour_product *{
            text-align:             left;
        }

        #quickretour_art_container .quickretour_product{
            position:               relative;
            display:                grid;
            grid-template-columns:  120px auto auto;
            grid-template-rows:     subgrid;
            grid-row:               span 6;
            column-gap:             10px;
            margin-bottom:          20px;

            grid-template-areas:
                "quickretour_img . ."
                "quickretour_img quickretour_header quickretour_header"
                "quickretour_img quickretour_merk quickretour_merk"
                "quickretour_img quickretour_naam quickretour_naam"
                "quickretour_img quickretour_status quickretour_status"
                "quickretour_img . .";

            outline:                1px solid var(--colorGray);
            border-radius:          5px;
            padding:                5px;
            row-gap:                5px;

            .img{
                grid-area:          quickretour_img;
                display:            flex;
                justify-content:    center;
                align-items:        center;
                padding:            5px;
                border:             1px solid var(--colorMediumGray);
                border-radius:      4px;
                background-color:   var(--colorWhite);
            }
            .naam{
                grid-area:          quickretour_naam;
            }
            .artikelnr{
                grid-area:          quickretour_header;
                font-size:          11px;
                color:              var(--colorGray);
                line-height:        150%;
            }
            .merk{
                grid-area:          quickretour_merk;
                font-weight:        600;
            }
            .aantal{
                display:            none;
                grid-area:          quickretour_aantal;
            }
            .status{
                grid-area:          quickretour_status;
                font-size:          12px;
            }
        }

            #quickretour_art_container .quickretour_product.selected{
                outline:                2px solid var(--colorBlue);
                grid-template-columns:  120px auto 120px;
            }
                #quickretour_art_container .quickretour_product.selected:hover{
                    outline:                2px solid var(--colorBlueTrans) !important;
                }

            #quickretour_art_container .quickretour_product.selected:not([data-aantal="1"]) {
                grid-template-areas:    "quickretour_img . ."
                                        "quickretour_img quickretour_header quickretour_header"
                                        "quickretour_img quickretour_merk quickretour_merk"
                                        "quickretour_img quickretour_naam quickretour_naam"
                                        "quickretour_img quickretour_status quickretour_aantal"
                                        "quickretour_img quickretour_status quickretour_aantal";
            }
                #quickretour_art_container .quickretour_product.selected:not([data-aantal="1"]) .aantal{
                    display:            flex;
                    align-items:        center;
                    justify-content:    center;
                }

            #quickretour_art_container .quickretour_product:hover, 
            #quickretour_art_container .quickretour_product:focus-visible{
                cursor:             pointer;
                outline:            2px solid var(--colorBlue) !important;
            }
                #quickretour_art_container .quickretour_product.selected:hover, 
                #quickretour_art_container .quickretour_product.selected:focus-visible{
                    cursor:             pointer;
                    outline:            4px solid var(--colorDarkBlue) !important;
                }

            #quickretour_art_container .quickretour_product.selected::before{
                content:            "";
                position:           absolute;
                top:                0;
                right:              0;
                border-top:         45px solid var(--colorBlue);
                border-left:        45px solid transparent;
            }
            #quickretour_art_container .quickretour_product.selected::after{
                content:            '\2713';
                position:           absolute;
                top:                2px;
                right:              5px;
                color:              white;
                font-size:          18px;
                font-weight:        bold;
            }


    /* AMOUNT SELECT */
    .globalAmountSelect{
        display:                grid;
        grid-template-columns:  30px 50px 30px;
        grid-template-rows:     30px;
        box-sizing:             border-box;
    }
    .globalAmountSelect > button{
        border-color:           var(--colorLightGray);
        border-style:           solid;
        background-color:       var(--colorDarkGreen);
        color:                  var(--colorWhite);
        display:                flex;
        justify-content:        center;
        align-items:            center;
        font-size:              16px;
        font-weight:            bolder;
    }
        .globalAmountSelect > button:hover{
            cursor:             pointer;
            filter:             brightness(110%);
        }
        .globalAmountSelect > button.disabled{
            cursor:             not-allowed;
            filter:             grayscale(1);
            opacity:            0.6;
        }

    .globalAmountSelect > button:nth-of-type(1) {
        border-width:           1px 0px 1px 1px;
        border-radius:          4px 0px 0px 4px;
        touch-action:           manipulation;
    }

    .globalAmountSelect > button:nth-of-type(2) {
        border-width:           1px 1px 1px 0px;
        border-radius:          0px 4px 4px 0px;
        touch-action:           manipulation;
    }

    .globalAmountSelect > div{
        border-width:           1px 1px 1px 1px;
        border-color:           var(--colorLightGray);
        border-style:           solid;
    }
    .globalAmountSelect > div input{
        margin:                 0px;
        box-sizing:             border-box;
        width:                  100%;
        height:                 100%;
        border:                 unset;
        background-color:       white;
        text-align:             center;
    }

    #quickretour_art_confirm.loading{
        opacity:                0.5;
        filter:                 grayscale(1);
        pointer-events:         none;
    }
    #quickretour_art_confirm #quickretour_toelichting{
        height:                     100px;
    }

    #quickretour_art_confirm .quickretour_confirm{
        text-underline-offset:      3px;
        & ul{
            padding-left:           5px;
            line-height:            150%;

            list-style-position:    inside;
        }
            & ul ul{
                padding-left:       20px;
            }

        > ul{
            list-style-type:        none;
            border:                 1px solid var(--colorLightGray);
            border-radius:          4px;
            padding:                10px;
            margin-bottom:          10px;
        }
        > ul > li:not(:last-child){
            margin-bottom:          15px;
        }
    }

    #retour_confirmcontainer{
        line-height:            150%;
    }
    #retour_confirmcontainer .retour_confirm{
        display:                inline-grid;
        grid-template-columns:  60px auto;
        max-width:              600px;
        margin-right:           10px;
        margin-bottom:          10px;
        column-gap:             5px;
        border:                 1px solid var(--colorMediumGray);
        border-radius:          4px;
        padding:                10px;
    }
    #retour_confirmcontainer .retour_confirm img{
        max-width:          50px;
        max-height:         50px;
    }
    #retour_confirmcontainer .retour_confirm > div{
        display:            grid;
        align-content:      center;
        line-height:        125%;
    }
        #retour_confirmcontainer .retour_confirm .retournr{
            font-size:      12px;
            color:          var(--colorDarkBlue);
        }