#ntBodyContainer{
    display:            none;
    pointer-events:     none;
    position:           fixed;
    left:               0px;
    top:                0px;
    width:              100vw;
    height:             100vh;
    background-color:   rgba(var(--RGBcolorBlack),0.8);
    z-index:            1000;
    font-family:        'Roboto';
    box-sizing:         border-box;
    border:             1px solid var(--colorBlack);
}
#ntBodyContainer.visible{
    display:            grid;
    align-items:        center;
    justify-content:    center;
    pointer-events:     auto;
}
    #ntBodyContainer .ntContainer{
        display:                grid;
        grid-template-columns:  auto 50px;
        grid-template-rows:     50px auto max-content;
        grid-template-areas: 
        "ntHeaderTitle ntHeaderClose"
        "ntBody ntBody"
        "ntButtons ntButtons";
        min-width:              15vw;
        max-width:              90vw;
        background-color:       var(--colorWhite);
        position:               relative;
    }
        #ntBodyContainer.loading{
            pointer-events:     none;
            filter:             grayscale(1);
        }
        #ntBodyContainer .ntContainer .ntHeader{
            grid-area:          ntHeaderTitle;
            display:            grid;
            align-items:        center;
            justify-content:    start;
            background-color:   var(--colorWhite);
            padding-left:       15px;
            font-weight:        700;
            border-bottom:      1px solid var(--colorMediumGray);
        }
        #ntBodyContainer .ntContainer .ntClose{
            grid-area:          ntHeaderClose;
            display:            grid;
            align-items:        center;
            justify-content:    center;
            font-size:          23px;
            color:              var(--colorGreen);
            cursor:             pointer;
            padding-bottom:     2px;
            border-bottom:      1px solid var(--colorMediumGray);
        }
            #ntBodyContainer .ntContainer .ntClose:hover{
                background-color:   var(--colorGreen);
                color:              var(--colorWhite);
            }

        #ntBodyContainer .ntContainer .ntBody{
            grid-area:          ntBody;
            position:           relative;
            align-items:        center;
            justify-content:    center;
            background-color:   var(--colorLightGray);
            padding:            25px 15px 25px 15px;
            min-height:         7vh;
            text-align:         center;
            line-height:        150%;
            max-height:         60dvh; 
            overflow-y:         auto;
        }
            #ntBodyContainer .ntContainer .ntBody a{
                color:          var(--colorBlue);
                text-decoration:none;
            }
            #ntBodyContainer .ntContainer .ntBody a:hover{
                text-decoration:underline;
            }

            #ntBodyContainer .ntContainer .ntBody hr{
                display:            block;
                height:             1px;
                background-color:   #00000022;
                margin:             15px 2px 15px 2px;
                border:             0;
            }

            #ntBodyContainer .ntContainer .ntBody input[type="text"]{
                padding:        8px;
                border:         1px solid var(--colorMediumGray);
                border-radius:  4px;
            }
            #ntBodyContainer .ntContainer .ntBody input[type="text"]::placeholder{
                opacity:        0.5;
                font-style:     italic;
            }

            #ntBodyContainer .ntContainer .ntScrollindicator{
                opacity:                0;
                transition:             all 1s ease;
                pointer-events:         none;
                position:               absolute;
                width:                  100%;
                height:                 60px;
                bottom:                 70px;
                background-image:       url('/templates/basic/images/svg/scrolldown.svg');
                background-size:        auto 60px;
                background-position:    center center;
                background-repeat:      no-repeat;
            }
            #ntBodyContainer .ntContainer.scroll .ntScrollindicator{
                opacity:                    0;
                animation:                  swipeup 1.5s forwards;
                animation-iteration-count:  2;
            }
            @keyframes swipeup {
                0%   {
                    bottom:           70px;
                    opacity:          0;
                }
                20%  {
                    bottom:           70px;
                    opacity:          0.8;
                }
                80%  {
                    bottom:           100px;
                    opacity:          0.8;
                }
                90%  {
                    bottom:           100px;
                    opacity:          0;
                }
                100%  {
                    bottom:           100px;
                    opacity:          0;
                }
            }

        #ntBodyContainer .ntContainer .ntFooter{
            grid-area:          ntButtons;
            grid-gap:           25px;
            align-items:        center;
            justify-content:    center;
            background-color:   var(--colorWhite);
            padding:            5px 10px 5px 10px;
            text-align:         center;
            border-top:         1px solid var(--colorMediumGray);
        }
            #ntBodyContainer .ntContainer .ntFooter .ntBtn{
                display:            inline-block;
                padding:            10px 30px 10px 30px;
                border-radius:      4px;
                cursor:             pointer;
                text-align:         center;
                min-width:          60px;
                margin:             5px 10px 5px 10px
            }
            #ntBodyContainer .ntContainer .ntFooter .ntBtn:focus, #ntBodyContainer .ntContainer .ntFooter .ntBtn:focus-visible{
                outline:            var(--colorBlack) auto 1px;
            }
                #ntBodyContainer .ntContainer .ntFooter .ntBtn:hover{
                    filter:         brightness(110%);
                }

        #ntBodyContainer .ntContainer .tecco1{
            display:            block;
            width:              132px;
            height:             153px;
            background-image:   url('/templates/basic/images/svg/tecco/Corner_Tecco_1.svg');
            background-size:    contain;
            background-repeat:  no-repeat;
            position:           absolute;
            top:                -74px;
            left:               -23px;
            pointer-events:     none;
        }
        #ntBodyContainer .ntContainer .tecco2{
            display:            block;
            width:              120px;
            height:             80px;
            background-image:   url('/templates/basic/images/svg/tecco/Corner_Tecco_2.svg');
            background-size:    contain;
            background-repeat:  no-repeat;
            position:           absolute;
            top:                0px;
            left:               10px;
            transform:          translateY(-100%) translateY(+10px);
            pointer-events:     none;
        }

        #ntBodyContainer .verlanglijstLoading{
            display:                    block;
            width:                      100%;
            height:                     200px;
            animation-name:             verlanglijstPreloading;
            animation-duration:         3s;
        }
        #ntBodyContainer .verlanglijstLoading::after{
            content:                    "";
            display:                    block;
            width:                      50px;
            height:                     50px;
            transform:                  rotate(0deg);
            -webkit-mask-image:         url('/templates/basic/images/svg/loading.svg');
            mask-image:                 url('/templates/basic/images/svg/loading.svg');
            -webkit-mask-repeat:        no-repeat;
            mask-repeat:                no-repeat;
            -webkit-mask-position:      center;
            mask-position:              center;
            -webkit-mask-size:          50px 50px;
            mask-size:                  50px 50px;
            justify-content:            center;
            align-items:                center;
            background-color:           var(--colorMediumGray);
            animation-name:             verlanglijstLoading;
            animation-duration:         1s;
            animation-iteration-count:  infinite;
        }

        @keyframes verlanglijstPreloading {
            from {opacity:          0;}
            to {opacity:            1;}
        }
        @keyframes verlanglijstLoading {
            from {transform:        rotate(0deg);}
            to {transform:          rotate(359deg);}
        }

        #ntBodyContainer #verlanglijstSelection{
            display:                block;
            max-height:             50dvh;
            overflow-y:             auto;
        }
        #ntBodyContainer #verlanglijstSelection .lijstenLine{
            display:                grid;
            grid-template-columns:  auto 60px;
            border-bottom:          1px solid var(--colorMediumGray);
            padding:                5px 5px 5px 5px;
        }
        #ntBodyContainer #verlanglijstSelection .lijstenLine>div:nth-child(1){
            text-align:             left;
            padding:                5px 0px 5px 0px;
        }
        #ntBodyContainer #verlanglijstSelection .lijstenLine>div:nth-child(2){
            display:                flex;
            align-items:            center;
            justify-content:        center;
            padding:                5px 0px 5px 0px;
            cursor:                 pointer;
            font-size:              25px;
            font-weight:            500;
            color:                  var(--colorGray);
        }
            #ntBodyContainer #verlanglijstSelection .lijstenLine:hover{
                cursor:             pointer;
                background-color:   var(--lighter);
            }
            #ntBodyContainer #verlanglijstSelection .lijstenLine:hover>div:nth-child(2){
                background-color:   var(--colorGreenTrans);
                outline:            1px solid var(--colorGreen);
            }

            #ntBodyContainer #verlanglijstSelection .lijstenLine > div:nth-child(1) > span:hover{
                cursor:             pointer;
                color:              var(--colorBlue);
                border-bottom:      1px solid var(--colorBlue);
            }

    #ntBodyContainer .ntInfo{
        margin:                 0px 5px 10px 5px;
        padding:                10px;
        box-sizing:             border-box;
        background-color:       var(--colorGreenTrans);
        border:                 1px solid var(--colorGreen);
        display:                grid;
        grid-template-columns:  max-content auto;
        column-gap:             5px;
    }
        #ntBodyContainer .ntInfo > div:nth-child(1){
            display:                grid;
            align-content:          center;
            justify-items:          center;
            width:                  30px;
            -webkit-mask-image:     var(--img);
            mask-image:             var(--img);
            -webkit-mask-repeat:    no-repeat;
            mask-repeat:            no-repeat;
            -webkit-mask-position:  center;
            mask-position:          center;
            -webkit-mask-size:      26px 26px;
            mask-size:              26px 26px;

        }

@media only screen and (max-width: 800px) {
    #ntBodyContainer #verlanglijstSelection .lijstenLine > div:nth-child(1) > span{
        border-bottom:      1px dashed var(--colorGray);
    }
    #ntBodyContainer #verlanglijstSelection .lijstenLine>div:nth-child(2){
        outline:            1px solid var(--colorMediumGray);
    }
}