#review_create{
        max-width:          600px;
    }
        #review_create.loading{
            opacity:        0.3;
            pointer-events: none;
        }

        #review_create *:not(input[type="text"]){
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        #review_create > div{
            border:             1px solid var(--colorLightGray);
            border-radius:      4px;
            padding:            10px;
            background-color:   var(--colorWhite);
            margin-bottom:      10px;
        }

        #review_create > div.error{
            animation-name:     reviewError;
            animation-duration: 2s;
        }
            @keyframes reviewError {
                from {background-color: var(--colorRed)}
                to {background-color: var(--colorWhite)}
            }
            #review_create > div.error h3{
                color:          var(--colorRed);
            }

        #review_create h2{
            font-size:      16px;
            color:          var(--colorDarkGreen);
            padding-bottom: 5px;
        }

        #review_create > div:not(:first-child) h3 {
            text-align:     left;
        }

        #review_create input[type='text']{
            height:         30px;
            padding-left:   10px;
            border:         1px solid var(--colorMediumGray);
            border-radius:  4px;
            box-sizing:     border-box;
        }
        #review_create textarea{
            padding:        8px;
            border:         1px solid var(--colorMediumGray);
            border-radius:  4px;
            box-sizing:     border-box;
            font-family:    arial, verdana, sans-serif;
        }

        #review_create input[type="checkbox"]{
            scale:          130%;
            margin-right:   3px;
            position:       relative;
            top:            1px;
        }

        #review_create > div h3{
            font-size:      14px;
            font-weight:    600;
            margin-bottom:  5px;
            color:          var(--colorBlue);
        }

        #review_create .review_details{
            font-size:      12px;
            color:          var(--colorGray);
            padding:        0px 0px 5px 0px;
            text-align:     left;
        }
            #review_create .review_details.error{
                color:      var(--colorRed);
            }

            #review_create > div h3 span{
                font-weight:    400;
                color:          var(--colorGray);
                font-size:      12px;
                margin-left:    0px;
                font-style:     italic;
                font-family:    arial, verdana, sans-serif;
                position:       relative;
                top:            -1px;
            }
                #review_create > div h3 span::before{
                    content:        "(";
                    padding-right:  0.5px;
                }
                #review_create > div h3 span::after{
                    content:        ")";
                    padding-left:   1px;
                }
                #review_create > div h3 span.verplicht{
                    color:          var(--colorRed);
                    letter-spacing: 0.3px;
                }
                #review_create > div h3 span.optioneel{
                    color:          var(--colorGray);
                    letter-spacing: 0.3px;
                }

        #review_create .review_score{
            position:               relative;
        }

            #review_create .review_score>div{
                position:   relative;
            }
            #review_create .review_score>div::before {
                content:    "★★★★★";
                font-size:  30px;
                visibility: hidden;
            }

            #review_create .review_score span{
                position:           absolute;
                font-size:          30px;
                left:               0px;
                top:                3px;
                white-space:        nowrap;
                overflow:           hidden;
            }

        #review_create #review_kortetitel input[type="text"]{
            width:              100%;
        }

        #review_create .review_currentPlusmin{
            display:            flex;
            flex-direction:     column;
            width:              100%;
            justify-self:       center;
        }
            #review_create .review_currentPlusmin > div{
                position:       relative;
                text-align:     left;
                padding-top:    6px;
                padding-bottom: 6px;
                border-top:     1px dashed var(--colorMediumGray);
            }
            #review_create .review_currentPlusmin[data-plusmin="plus"] > div:not(:last-child)::before{
                content:        "+ ";
                color:          var(--colorDarkGreen);
                font-weight:    600;
            }
            #review_create .review_currentPlusmin[data-plusmin="min"] > div:not(:last-child)::before{
                content:        "- ";
                color:          var(--colorRed);
                font-weight:    600;
            }
            #review_create .review_currentPlusmin > div:last-of-type{
                padding-top:    8px;
            }
            #review_create .review_currentPlusmin > div > button{
                position:       absolute;
                right:          0px;
                top:            3px;
                padding:        4px 12px;
            }
                #review_create .review_currentPlusmin > div > button:hover{
                    background-color:   var(--colorRed);
                    color:              var(--colorWhite);
                    cursor:             pointer;
                }
                #review_create .review_currentPlusmin input[type='text']{
                    width:          calc(100% - 40px);
                }
                #review_create .review_currentPlusmin > div:last-of-type > button{
                    top:            7px;
                    border:         1px solid var(--colorMediumGray);
                    border-radius:  3px;
                    padding:        3px 0px;
                    font-weight:    600;
                    font-size:      20px;
                    width:          35px;
                    color:          var(--colorWhite);
                }
                    #review_create .review_currentPlusmin[data-plusmin="plus"] > div:last-of-type > button{
                        background-color:   var(--colorBlue);
                    }
                    #review_create .review_currentPlusmin[data-plusmin="min"] > div:last-of-type > button{
                        background-color:   var(--colorBlue);
                    }
                        #review_create .review_currentPlusmin > div:last-of-type > button:hover,
                        #review_create .review_currentPlusmin > div:last-of-type > button:focus{
                            filter:         brightness(110%);
                        }

            #review_create .plusmin{
                display:                grid;
                grid-template-columns:  auto 40px max-content 40px auto;
                column-gap:             5px;
                padding-top:            10px;
            }

                #review_create .review_currentPlusmin > div[data-newvalue] > input[type="text"]{
                    padding: 2px 30px 2px 8px;
                }
                #review_create .review_currentPlusmin > div[data-newvalue] > span{
                    position:           absolute;
                    right:              50px;
                    top:                13px;
                    color:              var(--colorGray);
                    font-size:          12px;
                    pointer-events:     none;
                }

                #review_create .plusmin button{
                    border:             1px solid var(--colorGray);
                    border-radius:      3px;
                    padding:            3px 3px;
                    font-weight:        600;
                    font-size:          20px;
                    color:              var(--colorWhite);
                }
                    #review_create .plusmin button:hover, #review_create .plusmin button:focus{
                        filter:         brightness(110%);
                        cursor:         pointer;
                    }
                    #review_create .plusmin button[data-mode="min"]{
                        background-color: var(--colorRed);
                    }
                    #review_create .plusmin button[data-mode="plus"]{
                        background-color: var(--colorDarkGreen);
                    }
                #review_create .review_score{
                    display:            flex;
                    justify-self:       center;
                    position:           relative;
                }
                    #review_create .review_score::after{
                        display:        inline-block;
                        content:        var(--scoretext) " / 5";
                        position:       absolute;
                        top:            -22px;
                        left:           0px;
                        text-align:     center;
                        font-size:      14px;
                        font-weight:    500;
                        width:          100%;
                    }
                #review_create .review_score span[data-stargray]{
                    z-index:    2;
                    opacity:    0.2;
                    color:      var(--colorGray);
                }
                #review_create .review_score span[data-staryellow]{
                    z-index:    3;
                    color:      var(--colorDarkGreen);
                    width:      calc(var(--scoreval) * 20%);
                }

        #review_create #review_nickname{
            text-align:         left;
        }
            #review_create #review_nickname input{
                margin-bottom:  5px;
                width:          100%;
            }

        #review_create #review_nickname #username_exists{
            display:            none;
            color:              var(--colorRed);
            font-size:          12px;
        }
            #review_create #review_nickname #username_exists.show{
                padding-bottom:     5px;
                display:            block;
            }


        #review_create #review_text{
            display:                grid;
            grid-template-columns:  minmax(100%, 500px);
        }
            #review_create #review_text textarea{
                width:              100%;
                height:             120px;
            }

            #review_create textarea::placeholder, #review_create input[type="text"]::placeholder{
                opacity:            0.5;
                font-style:         italic;
                font-size:          13px;
                font-family:        arial, verdana, sans-serif;
            }

        #review_create #review-avatar-form{
            margin-top:             15px;
            margin-bottom:          10px;
        }

        #review_create #review_avatar{
            text-align:             left;
        }
        #review_create #review_avatar #avatar_upload{
            display:                none;
        }

        #review_create #review_avatar form{
            position:               relative;
        }
            #review_create #review_avatar form #review_avatar_preview{
                position:               absolute;
                width:                  70px;
                height:                 70px;
                border-radius:          10px;
                outline:                1px solid var(--colorMediumGray);
                right:                  0px;
                top:                    -23px;
                background-image:       url('/templates/basic/images/svg/avatar.svg');
                background-position:    center center;
                background-size:        cover;
                background-repeat:      no-repeat;
            }
            #review_create #review_avatar form #review_avatar_preview.loading{
                background-image:       url('/templates/basic/images/zoekload.gif');
                background-size:        auto;
            }

        #review_create #review_avatar label{
            border:                 1px solid var(--colorMediumGray);
            border-radius:          4px;
            padding:                6px 8px 4px 33px;
            margin-bottom:          10px;
            position:               relative;
            font-size:              14px;
        }
            #review_create #review_avatar label::before{
                content:                "";
                display:                inline-block;
                -webkit-mask-image:     url('/templates/basic/images/svg/uploadcloud.svg');
                mask-image:             url('/templates/basic/images/svg/uploadcloud.svg');
                mask-repeat:            no-repeat;
                mask-size:              contain;
                background-color:       var(--colorDarkGray);
                position:               absolute;
                width:                  23px;
                height:                 16px;
                left:                   6px;
                top:                    6px;
            }


        #review_create #review-foto-form{
            margin-top:             15px;
        }
            #review_create #review_foto{
                text-align:             left;
            }
                #review_create #review_foto.loading{
                    opacity:            0.6;
                    filter:             grayscale(0.5);
                }
            #review_create #review_foto #foto_upload{
                display:                none;
            }

            #review_create #review_foto form{
                position:               relative;
            }

            #review_create #review_foto #review_foto_status{
                margin-top: 10px;
            }

        #review_create #review_foto label{
            border:                 1px solid var(--colorMediumGray);
            border-radius:          4px;
            padding:                6px 8px 4px 33px;
            margin-bottom:          10px;
            position:               relative;
            font-size:              14px;
        }
            #review_create #review_foto label::before{
                content:                "";
                display:                inline-block;
                -webkit-mask-image:     url('/templates/basic/images/svg/uploadcloud.svg');
                mask-image:             url('/templates/basic/images/svg/uploadcloud.svg');
                mask-repeat:            no-repeat;
                mask-size:              contain;
                background-color:       var(--colorDarkGray);
                position:               absolute;
                width:                  23px;
                height:                 16px;
                left:                   6px;
                top:                    6px;
            }
            #review_create #review_foto label:hover{
                background-color:       var(--colorBlue);
                color:                  var(--colorWhite);
            }
            #review_create #review_foto label:hover::before{
                background-color:       var(--colorWhite);
            }

        #review_create #review_foto #review_fotolist{
            display:                grid;
            grid-template-columns:  repeat(auto-fill, minmax(100px, 1fr));
            column-gap:             5px;
            row-gap:                10px;
        }
        #review_create #review_foto #review_fotolist .fotoThumb{
            display:                inline-block;
            width:                  100px;
            height:                 100px;
            outline:                1px solid var(--colorMediumGray);
            border-radius:          10px;
            background-image:       var(--fotourl);
            background-size:        cover;
            background-position:    center center;
            background-repeat:      no-repeat;
            background-color:       var(--colorWhite);
            position:               relative;
            margin:                 0px auto 0px auto;
        }
            #review_create #review_foto #review_fotolist .fotoThumb:hover{
                outline:                3px solid var(--colorRed);
                border-radius:          10px;
                cursor:                 pointer;
            }
            #review_create #review_foto #review_fotolist .fotoThumb:hover::before{
                display:                block;
                position:               absolute;
                top:                    0px;
                left:                   0px;
                width:                  100%;
                height:                 100%;
                background-color:       rgba(0,0,0,0.6);
                content:                "";
                z-index:                9;
                border-radius:          10px;
            }
            #review_create #review_foto #review_fotolist .fotoThumb:hover::after{
                display:                block;
                position:               absolute;
                top:                    0px;
                left:                   0px;
                width:                  100%;
                height:                 100%;
                content:                "";
                -webkit-mask-image:     url('/templates/basic/images/svg/trashcanbox.svg');
                mask-image:             url('/templates/basic/images/svg/trashcanbox.svg');
                mask-repeat:            no-repeat;
                mask-size:              40px auto;
                mask-position:          center center;
                background-color:       var(--colorWhite);
                z-index:                10;
                border-radius:          10px;
            }
            


    @media screen and (max-width: 700px) {
        #review_create .plusmin{
            padding-top:            20px;
        }
        #review_create #review_foto #review_fotolist{
            grid-template-columns:  repeat(auto-fill, minmax(80px, 1fr));
        }
        #review_create #review_foto #review_fotolist .fotoThumb{
            width:                  80px;
            height:                 80px;
        }
        #review_create .review_score span{
            font-size: 20px;
        }
        #review_create .review_score>div::before {
            font-size: 20px;
        }
    }