html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}


/********************************************/

html{
    height:100%;
    width:100%;

    font-family: "Open Sans";
    color: #434849;
    line-height:1.2;
    font-size:14px;
    background: url("../img/bg-8.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

}

body{

    width:100%;
    padding:50px 0 0 0;
}

/*****************************************/

.notif{
    background: #ffc400;
    color:white;
    font-weight: bold;
    padding:25px;
    font-size:20px;
}


#dev{
    position:absolute;
    top:0;
    left:0;


}

#button_debug{
    position:fixed;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background: rgba(0, 0, 0, 0);
    cursor:pointer;
    z-index:1001;
}


#RODebugger{
    display:none;
    z-index:1000;
    position:absolute;
    top:0;
    left:0;
    width:400px;
    height:600px;
    padding:10px;
    color:greenyellow;

    background: rgba(0, 0, 0, 0.9);
    font-size:12px;
    overflow:scroll;
}

#debug_indicator{
    position:fixed;
    top:0;
    left:0;
    height:5px;
    width:100%;
    background:red;
    z-index:10000;
    display:none;
}

.hidden{
    opacity:0;
}

.displaynone{
    display: none;
}


.debuginfo{
    background:red;
    font-size:10px;
    padding:5px;
    position:absolute;
    top:0;
    left:0;
    color:white;
}


#setup_indicator{
    background:red;
    z-index:100000;
    position:fixed;
    width:100%;
    top:0;
    left:0;
    color:white;
    font-size:11px;
    padding:2px;
    display:none;
}

/*****************************************/


.slider_wrap{
    position:relative;
}

.slidercontrols{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50%;
}

    .control_parent{

    }



.slidecontent{

    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: baseline;

    background-size: 100% auto ;
    background-position: center center;
    height:280px;
}

.slide_title{
    display:block;
    background:rgba(255,255,255,0.7);
    padding:20px;
    box-sizing: border-box;
    font-weight:bold;
    font-size:15px;

    width:100%;
    color: #3d3d3d;
    text-decoration:none;
    cursor:pointer;
}

    .slide_title:hover{
        background:rgba(255,255,255,0.8);;
    }

.buttonslider{
    display:flex;
    width:40px;
    height:40px;
    border:3px solid #ffc400;
    border-radius:25px;margin:5px;
    font-size:20px;
    font-weight:bold;
    justify-content: center;
    align-items: center;
    color: #ffc400;
    cursor:pointer;
}

.buttonslider:hover{
    border: 3px solid white;
    color:white;
}
    .button_slider_prev{
        position:absolute;
        left:10px;
        bottom:0;

    }

    .button_slider_next{
        position:absolute;
        right:10px;
        bottom:0;


    }

    .autoplaybutton{
        display:none;
    }

.nav_dots_parent{
    display:flex;
    justify-content: center;
    padding:20px 0 10px 0;

}

    .navdot{
        background: #ededed;
        width:10px;
        height:10px;
        margin:5px;
        border-radius:20px;
        cursor:pointer;
    }

    .navdot.selected , .navdot:hover{
        background: #ffc400;
    }



.pricehelper{
    color: silver;
    font-size: 10px;
    position:absolute;
    right:0;
    top:0;
    padding:2px;
    display:block;
    background:white;

}


.highlight_bg{
    background: #ffc400;
}

.highlight_title{
    background: #ffc400;
    color: white !important; 
    padding:10px !important;
    border-radius: 5px;
    display:inline-block;
}

.red{
    !color:red;
}


.title{
    color: #434849;
    position:relative;
}

.title.white{
    color:white;
}



.extralarge{
    font-size:35px;
}

    .title.large{
        font-size:25px;
        font-weight:900;
        margin:5px 0 10px 0;
    }

    .title.medium{
        font-size:18px;
        font-weight:900;
        margin:5px 0 5px 0;
    }
    .title.small{
        font-size:14px;
        font-weight:900;
        margin:3px 0 5px 0;
    }
    .title.line{
        padding: 0 0 5px 0;
        border-bottom:1px solid #d9d9d9;
    }


.text{
    font-weight:300;
    padding:3px 0 3px 0;
    line-height:1.3;
}
    .text.large{
        font-size:20px;
    }

    .text.medium{
        font-size:15px;
    }

    .text.small{
        font-size:11px;
    }

.text.smallbold{
    font-size:11px;
    font-weight:bold;
}


.highlight_text{
    color:#ffc400;
}


.button{
    display:inline-block;
    background: #ffc400;
    padding:5px 20px;
    border-radius:5px;
    margin:5px 0 5px 0;
    font-weight:700;
    color:white;
    text-align:center;
    cursor: pointer;
    border:2px solid #ffc400;
}

.button:hover{
    background:white;
    color: #ffc400;
    border:2px solid #ffc400;
}

.button.small{
    font-size:10px;
    padding:3px 10px;
}

.button.light{
    background: #dcdbdb;
}

.button.darktext{
    color:#3d3d3d;

}


.button_close{
    font-weight:900;
    display:flex;
    flex-direction: column;
    justify-content: center;
    text-align:center;
    width:40px;
    height:30px;
    position:absolute;
    right: 0;
    z-index:10;
    cursor:pointer;
}

.link{
    color: #ffc400;
    font-weight:bold;
}

    .link.small{
        font-size:12px;
    }

    .link.right{
        position:absolute;
        right:0px;
        text-align:right;
    }

    .link.gray{
        color: #868686;
    }

    .right_part_title{
        position:absolute;
        right:0px;
        bottom:5px;
        text-align:right;
        font-size:12px;
        text-decoration:underline;
    }

    .link.b{
        font-weight:bold;
    }

.center{
    text-align: center;
}

.icon_check{
    display:inline-block;
    width:50px;
    height:50px;
    background: url("../img/icon-check.png");
    background-size:100%;
    background-repeat: no-repeat;
}

.iconleft_check{
    display:flex;
    flex-direction: row;
    padding-left: 50px;
    background: url("../img/icon-check.png");
    background-size:45px 45px;
    background-position: left top;
    background-repeat: no-repeat;
    min-height:50px;
    align-items: center;

}


.icon_error{
    display:inline-block;
    width:50px;
    height:50px;
    background: url("../img/icon-error.png");
    background-size:100%;
    background-repeat: no-repeat;
}
.iconleft_error{
    display:flex;
    flex-direction: row;
    padding-left: 50px;
    background: url("../img/icon-error.png");
    background-size:40px 40px;
    background-position: left top;
    background-repeat: no-repeat;
    min-height:50px;
    align-items: center;

}

.res_paylog{
    background: #ededed;
    padding:5px;
    border-radius: 5px;
    margin:5px 0 5px 0 ;
}

.icon_small{
    display:inline-block;
    width:18px;
    height:18px;
    margin: 0 5px 0 0;

}

    .icon_small.error{
        background-image: url("../img/icon-bad.png");
        background-size:15px 15px;
        background-repeat: no-repeat;
        background-position:center;
    }

    .icon_small.ok{
        background-image: url("../img/icon-ok.png");
        background-size:15px 15px;
        background-repeat: no-repeat;
        background-position:center;
    }

    .icon_small.alert{
        background-image: url("../img/icon-alert.png");
        background-size:15px 15px;
        background-repeat: no-repeat;
        background-position:center;

    }


.userinput{
    display:block;
    padding:5px 10px 5px 10px;
    margin: 10px 0 10px 0;
    border-radius:5px;
    border:0px solid white;
    background: #ededed;
    font-size:14px;
}

.fullwidth{
    box-sizing: border-box;
    width:100%;
}


.p20{
    padding:20px;
}

.p10{
    padding:10px;
}

.p5{
    padding:5px;
}

.m10{
    margin: 10px 0 10px 0;
}


.pt10{
    padding-top:10px;
}

.ptb10{
    padding-top:10px;
    padding-bottom:10px;
}


.flexcolparent{
    display:flex;
    flex-direction: row;
    justify-content: space-between ;

}

.flexcol{

}

.right{
  text-align:right;

}



/********************************/

.page{
    position:relative;
    background: white;
    border-radius:5px;
    padding:25px 25px 150px 25px;
    margin:10px 10px 10px 10px ;
    max-width:600px;

}

#page_info ul, #academy_info ul{
    list-style: disc;
    padding-left: 20px;
}
#page_info li, #academy_info li{
    list-style: disc;
    margin: 3px 0 3px 0;
    font-size:13px;
    line-height:1.3;
}


.openingsuren_parent{
    padding:2px 25px 2px 25px;
    margin:10px 10px 10px 10px ;
    max-width:600px;
    background: #ffc400;
    border-radius:3px;
    font-size:13px;
    color:black;
}

.openingsuren_parent .info{
}


.panel{

    margin:25px 0 25px;
    border-radius:3px;

}

.panel.line{
    padding:10px;
    border:1px solid #eaeaea;
}

/*********************************/

#mainnav_parent{
    position:fixed;
    z-index:100;
    bottom:0;
    width:100%;
    height:65px;
    background: #e0dfdf;

    display:flex;
    flex-direction: row;
    justify-content: center;

}

.mainnav{

    width:65px;
    height:55px;
    padding: 0 0 5px 0;
    text-align:center;
    text-decoration: none;
    margin:0 3px;

    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #3d3d3d;

    font-size:12px;
}



#bottom_button_1{
    background-image: url("../img/icon-home.png");
    background-repeat: no-repeat;
    background-size:35px 35px;
    background-position:center 14px;
}

#bottom_button_2{
    background-image: url("../img/icon-account.png");
    background-repeat: no-repeat;
    background-size:35px 35px;
    background-position:center 14px;
}

#bottom_button_3{
    width:75px;
}

#bottom_button_3 img{
    margin: 0 0 0 -7.5px;
    width:90px;
    height:90px;
}


#bottom_button_4{
    background-image: url("../img/icon-wallet.png");
    background-repeat: no-repeat;
    background-size:35px 35px;
    background-position:center 14px;
}

#bottom_button_4b{
    background-image: url("../img/icon-kalender.png");
    background-repeat: no-repeat;
    background-size:35px 35px;
    background-position:center 14px;
}

#bottom_button_5{
    background-image: url("../img/icon-contact.png");
    background-repeat: no-repeat;
    background-size:35px 35px;
    background-position:center 14px;
}



.navspacer{
    width:1px;
    height:55px;
    background:silver;
    margin:10px 0 0 0 ;
}

.spacer{
    height:10px;
}

.feedback{
    opacity: 1;
}

.feedback.good{
    background: #b8ffb8;
    color:green;
    border:1px solid green;
    border-radius:3px;
    padding:5px;
    font-size:12px;
    font-weight:normal;
}

.feedback.wrong{
    background: #ffb8c6;
    color:red;
    border:1px solid red;
    border-radius:3px;
    padding:5px;
    font-size:12px;
    font-weight:normal;
}


/**********************************/

#top{
    position:fixed;
    z-index:100;
    top:0px;
    width:100%;
    height:50px;
    background:white;
    box-shadow: 0px 0px 15px rgba(24, 23, 22, 0.47);


}

.wrap_center{
    max-width: 640px;
    margin: 0 auto;
}

#tagline{
    padding: 10px 0 0 10px;
}

#top_logo_wrap{
    margin: 0 auto;
    position:relative;
    height:100%;
    overflow:hidden;
}

#logo_top{
    display:block;
    width:160px;
    height:150px;

    position:absolute;
    top:-10px;
    z-index:1;
    cursor:pointer;
    background: url("../img/logo-vivapadel-nocircle.png");
    background-repeat: no-repeat;
    background-size:contain;
}



#accountinfo_top{
    position:relative;
    z-index: 4;
    max-width:640px;
    color:white;
    margin: 0 10px;
    text-align:right;
    padding-top:20px;

    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    color:black;

}




#form_logout{
    position:absolute;
    top:0;
    right:10px;
}




/*********************************/
#footer{
    text-align:center;
    font-size:12px;
    background: #d9dbda;
    padding:20px;
}


.transaction_info{
    background: #ededed;
    font-size:12px;
    padding:5px;
    border-radius:5px;
    position:relative;
    margin:8px 0 0 0;
}

    .credits_aantal{
        position:absolute;
        right:10px;
        font-weight:900;
        text-align:right;
    }

    .credits_aantal .extra{
        background:#ffc400;
        color:white;
        border-radius:8px;

        padding:1px 4px;
    }

/********************************/

#overlay_nav{
    background:white;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    display: none;
    flex-direction: column;
    justify-content: center;
}

#overlay_nav .items_parent{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    width:100%;
    height:100%;
    text-align: center;
    padding-top:35px;
}


#overlay_nav a{
    display:block;
    padding:12px;
    color:#3e4755;
    text-decoration: none;
    font-weight:900;
    font-size:25px;
}

#overlay_nav a:hover{
    color:#ffc400;
}


#menulabel{
    position:absolute;
    z-index:1001;
    top:18px;
    right:50px;
    color:black;
    font-size:12px;
}

#menubutton {
    position:absolute;
    z-index:1001;
    top:10px;
    right:20px;
    cursor: pointer;

}

.bar1, .bar2, .bar3 {
    width: 25px;
    height: 1px;
    background-color: #333;
    margin: 7px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-7px, 5px);
    transform: rotate(-45deg) translate(-7px, 5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-5px, -6px);
    transform: rotate(45deg) translate(-5px, -6px);
}

/*********************************/

.spelertag{
    background: #ededed;
    padding:5px;
    font-weight:bold;
    color: #3d3d3d;
    border-radius: 5px;
    margin:5px 0 5px 0 ;
}

.speler_placeholder{
    font-size:12px;
    margin:20px  0 20px 0;
}

.inputplaceholder{
    display:inline-block;
    width:150px;
    border-bottom:1px solid #e8e7e7;
    margin: 0 0 0 5px;
    padding:0 0 5px 5px;
    font-weight:bold;

}

.days_parent{
    display: flex;
    flex-direction: row;
    justify-content: center;
}



.day_wrap{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    margin:2px;
    width:70px;
}

.day_wrap.hidden{
    display:none;
}

    .veld_indicator_parent{
        display:flex;
        flex-direction: column;
        justify-content: flex-start;

    }

    .veld_indicator_title{
        text-align: center;
        font-weight:bold;
        background: #3d3d3d;
        color: white;
        font-size:12px;
        padding:2px;

    }


    .top_veld_indicator{
        width:100%;
        height:55px;
        background: silver;
        padding:5px 0 5px 0;

        border-radius:2px;
        font-weight:900;
        font-size:12px;
        color:white;
        text-align:center;
        cursor:pointer;
        opacity:0.9;
    }

    .top_veld_indicator:hover{
        opacity:1;
    }


    .top_veld_indicator.veld_1{
        background:url("../img/veld-1-vierkant.png?v=1");
        background-size:100% 100%;

    }

    .top_veld_indicator.veld_2{
        background:url("../img/veld-2-vierkant.png?v=2");
        background-size:100% 100%;

    }

    .top_veld_indicator.veld_3{
        background:url("../img/veld-3-vierkant.png?v=3");
        background-size:100% 100%;

    }

    .top_veld_indicator.veld_4{
        background:url("../img/veld-4-vierkant.png?v=2");
        background-size:100% 100%;

    }

    .top_veld_indicator.veld_5{
        background:url("../img/veld-5-vierkant.png?v=1");
        background-size:100% 100%;

    }

.top_veld_indicator.veld_6{
    background:url("../img/veld-6-vierkant.png?v=1");
    background-size:100% 100%;

}

.top_veld_indicator.veld_7{
    background:url("../img/veld-7-vierkant.png?v=1");
    background-size:100% 100%;

}

.top_veld_indicator.veld_8{
    background:url("../img/veld-8-vierkant.png?v=1");
    background-size:100% 100%;

}




    .timeslot{
        width:100%;
        height:40px;
        background: #e8e8e8;
        padding:0px 0 0px 0;
        margin:5px 1px 5px 1px;
        border-radius:2px;
        font-weight:600;
        font-size:12px;
        text-align:center;
        color:gray;

        position:relative;
        cursor: pointer;

        display:flex;
        flex-direction: column;
        justify-content: center;

    }

    .timeslot.piek{
        background: #fff4c7;
    }

    .timeslot.selected{
        background: #0eff00;
    }

    .timeslot.bezet{
        background: rgba(252, 142, 91, 1);
        color: rgb(167, 76, 33);
        cursor: auto;
    }

    .timeslot.bezet.event{
        background: #ffc400;
        color: white;
        cursor: auto;
    }

    .timeslot.bezet.academy{
        background: rgb(194, 86, 35);
        color: white;
        cursor: auto;
    }

    .timeslot.bezet.interclub{
        background: rgb(182, 80, 32);
        color: white;
        cursor: auto;
    }

    .timeslot.bezet.temp{
        background: rgb(252, 215, 199);
        color: rgb(167, 76, 33);
        cursor: auto;
    }



    .timeslot.inactive{
        background: #ededed;
    }

    .timeslot.size_anderhalf{
        height:65px;
    }

    .timeslot_spacer{
        height:40px;
    }

.viewer_controls{
    display: flex;
    flex-direction: row;
}

.viewer_dayselector_parent{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
}

.viewer_dayselector{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:30px;
    height:30px;
    text-align:center;
    background:silver;
    margin:2px;
    cursor:pointer;

}

.viewer_dayselector:hover{
    background: #ffc400;

}


        .parent_indicators{
            position:absolute;
            width:20px;
            margin: 0 auto;
            text-align:center;
            bottom:3px;
            left:50%;
            margin: 0 0 0 -10px;
        }

        .bezet_indicator{
            float:left;
            width:3px;
            height:3px;
            border-radius:5px;
            background: #d0cfcf;
            margin:1px 1px;
        }

        .bezet_indicator.bezet{
            background: #e0b000;
        }



    .weekcontrols{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .daycontrols{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height:50px;
    }

    .day_selected{
        cursor:pointer;
        background:white;
        margin: 5px 20px;
        padding:5px 10px;
        border-radius:5px;
        border:1px solid gray;
    }

.day_selected:hover{
    border:1px solid #ffc400;

}

    #dateselection_overlay{
        display:none;
        max-width:300px;
        padding:20px 0 20px 0;
        margin: 0 auto;
    }

        .parent_dateselection{
            display:flex;
            flex-direction: row;
            justify-content: center;
        }

        .dateselection_title{
            padding:5px;
            width:25px;
            text-align:center;
            background:#333333;
            color:white;
            border-radius:3px;
            margin:2px;
        }

        .dayselectionitem_parent{

        }

        .week_selectionoverlay{
            display:flex;
            flex-direction: row;
            justify-content: center;

            margin:5px;
        }

        .dayselectionitem{
           background: #ededed;
            width:35px;
            height:35px;
            text-align:center;
            border-radius:3px;
            margin:5px 2px;
            border-radius:20px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border:2px solid white;
        }

            .day_notavailable{
                background: #f8f8f8;
                color:silver;
            }


            .zone_creditspeler{
                background: #cecece;
            }

            .zone_vrijezone{
                background: #cecece;
            }

            .zone_groen{
                background:#8de08d;
            }

            .zone_paars{
                background:mediumpurple;
            }

            .zone_blauw{
                background:#7cc1d5;
            }

            .zone_voorbij{
                background: #656565;
            }

            .colorzone_indicator{
                width:10px;
                height:10px;
                border-radius: 10px;
                margin: 0px 10px 0 10px;
            }

            .tag_kleurzone{
                padding:2px 10px;
                border-radius: 5px;
                color:white;
                font-size: 12px;

            }

            .prijsperpersoon{
                background: #ededed;
                display:inline-block;
                padding:10px;
                border-radius: 5px;
                position:relative;
            }
            .abotype{
                position:absolute;
                bottom:0px;
                left:0px;
                font-size:10px;
                padding: 0 2px;
            }

                .abotype.creditspeler{
                    background:#ffc400;
                    color:white;
                }
                .abotype.abo{
                    background:darkblue;
                    color:white;
                }

            .spelerinfo{
                display:flex;
                flex-wrap: wrap;
                margin: 0 0 20px 0px;
                padding: 10px 10px 10px 10px;
                border: 1px solid #ededed;
            }

            .flex_wrap
            {
                display:flex;
                flex-wrap: wrap;
            }

            .reserveerder_info{
                background: #ededed;
                margin:5px 0 5px 0;
                padding:5px 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                width:195px;
                border-radius:5px;
                font-weight:bold;
            }


            .playerpayfeedback{
                display:flex;
            }

                .subtype{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-content: center;

                    background:#ededed;
                    border-radius:5px;
                    padding:10px;
                    margin:5px;
                }
                .reservation_pay_feedback{
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-content: center;

                    background:#ededed;
                    border-radius:5px;
                    padding:10px;
                    margin:5px;

                }






.dayselectionitem:hover, .dayselectionitem.selected{
            cursor:pointer;
            border:2px solid #ffc400;
        }


        .smalldev{
            font-size:10px;
        }


.button_nextday, .button_prevday{
    font-weight:900;
    background: #ededed;
    padding:5px 10px;
    border-radius:10px;
    cursor:pointer;
}

.button_daycontrol:hover{
    background: #ffc400;
    color:white;

}



.button_nextweek, .button_prevweek{
    font-weight:900;
    background: #ededed;
    padding:5px 10px;
    border-radius:10px;

}





.slider{
    width:60px;
    height:40px;
    background-image: url("../img/slider-timeslot-idle.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.slider.active{
    background-image: url("../img/slider-timeslot-active.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.line{
    border-bottom:1px solid #e2e2e2;
}

.filter_parent{
    padding: 0 0 10px 0;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
}

.slider_control{
    text-align:center;
}

.infobutton{
    cursor:pointer;
}

.infobutton.filter{
    text-decoration: underline;
    margin:25px 0 0 10px;
    margin-left: auto;
}

.veld_selectors_parent{
    display:flex;
    flex-direction: row;
    justify-content: center;
    max-width:320px;
    margin: 0 auto;
}

    .veld_selector{
        width:50%;
        padding:10px;
        background: #ededed;
        margin: 5px;
        border-radius:5px;
        text-align:center;
        font-weight:bold;
        cursor:pointer;
    }

.veld_selector:hover, .veld_selector.selected{
        background: #ffc400;
        color:white;
    }


.shop_item.inactive{
    opacity:0.5;
}

.shop_item span{
    color: #ffc400;
    font-weight:bold;
    font-size:13px;

}

.academyselect{
    padding:5px;
    margin: 5px 0 5px 0;

}

.uur{
    display:inline-block;
    background:#ffc400;
    color: #454545;
    padding:2px 5px;
    border-radius:3px;
    font-weight:bold;
}

.timeslotselection .daystring{
    font-size:13px;
    background:white;
    border:1px solid #ededed;
    display:inline-block;
    padding:0 0 0 5px;
    border-radius:5px;
    margin: 0 0 5px 0;
}

.timeslotselection .daystring .uur{
    margin: 0 0 0 5px;
}


.book_info{
    position:fixed;
    bottom:-100px;
    left:0%;
    width:100%;

    height:150px;
    z-index:10;
    background:white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.22);
}

.book_info .button{
    position:absolute;
    right:20px;
    bottom:42px;
}

a.button{
    text-decoration: none;
}



.selectie_info{

}

#button_goto_fieldselection{

}


#step_timeslotselection{

}


#step_veldselection{
    display:none;
}

#step_payment{
    display:none;
}


.veldwrap{
 display:flex;
}

.veld{
    position:relative;
    background-color: #ededed;
    background-position:center;
    background-size:100% 100%;

    border: 3px solid white;
    border-radius:7px;
    width:100%;
    max-width:280px;
    height:60px;
    display:inline-block;
    cursor:pointer;
}

.veld:hover{
    border: 3px solid #ffc400;
}

.veld .overlay_bezet{
    position:absolute;
    width:100%;
    height:100%;
    background: rgba(255, 218, 96, 0.6);

    display:flex;
    justify-content: center;
    align-items: center;
    top:0;
    left:0;
    color: #383838;
    font-size:20px;
    font-weight:bold;
    border-radius:7px;

}

.veld.selected{
    border: 3px solid #ffc400;
}

.veld.hide{
    display:none;
}

.veld .overlay_bezet.hidden{
    display:none
}


.tag_parent{
    padding:0px 0 0 0;
    position:relative;
}

.veld.disabled{
    opacity:0.5;
}

.button.disabled{
    opacity:0.3;
}

.veld .tag{
    font-size:11px;
    background:#ffc400;
    display:inline-block;
    padding:2px 5px;
    border-radius:3px;
    position:absolute;
    left:0;
}

/****************************************/

 .reservation_item,
.reservation_info .reservation_item{
    display:flex;
    justify-content: flex-start;
    background: #ffc400;
    padding:5px;
    border-radius:5px;
    margin:5px 0 5px 0;
    font-weight:bold;
    color:white;
    align-items: center;

}
     .reservation_item:hover,
    .reservation_info .reservation_item:hover{
        font-weight:bold;
        color:white;
    }

     .reservation_item.finished,
    .reservation_info .reservation_item.finished{
        background:#ededed;
        color:gray;
        font-weight:normal;
    }

    .button_reservation_cancel{
        background: white;
        color:#ffc400;
        font-size:12px;
    }

.reservation_item .link{
    color:black;
    text-decoration: none;
}

.reservation_item .link:hover{
    color: white;
    text-decoration: none;
}

.reservation_item.light{
    background:#ededed;
}

.reservation_item.light:hover{
    background:#ffc400;
    color:black;
}

.res_status{
    background:#ffc400;
    color: #3d3d3d;
    font-size:12px;
    padding: 0 10px;
}

    .res_status.canceled{
        background: #fce8bf;
    }
.adminview{
    background: #ededed;
    border-radius: 10px;
    padding:10px;
    margin:25px 0 25px 0;
}

.resinfo_tag{
    background: #ffc400;
    color:white;
    padding:3px 10px;
    border-radius:5px;
    display:inline-block;
    font-weight:bold;
    margin-bottom:15px;
}


.res_role{
    background:white;
    text-transform: uppercase;
    background:black;
    color:white;
    border-radius: 10px;
    width:20px;
    height:20px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right:10px;
}


/****************************************/

.placeholder_timeslotselection{

}

.reservation_step .reservation_parentitem{
    height:60px;
    border-radius:8px;
    border:3px solid #ffc400;

    display:flex;
    justify-content: flex-start;
    align-items: center;
    margin:0 0 5px 0;
    width:280px;
}

.reservation_step .timeslot_finalcheck{
    background:rgba(255,255,255,0.8);
    display:inline-block;
    padding:0px 0 0 5px;
    margin: 0 0 0 5px;
    border-radius:5px;
}



.reservation_step .reservation_parentitem.nr1{
    background: url("../img/veld-1.png");
    background-position: right center;
    background-size:cover;
}

.reservation_step .reservation_parentitem.nr2{
    background: url("../img/veld-2.png");
    background-position: right center;
    background-size:cover;
}


.reservation_step .reservation_parentitem.nr3{
    background: url("../img/veld-3.png?v=3");
    background-position: right center;
    background-size:cover;
}


.reservation_step .reservation_parentitem.nr4{
    background: url("../img/veld-4.png");
    background-position: right center;
    background-size:cover;
}

.reservation_step .reservation_parentitem.nr5{
    background: url("../img/veld-5.png");
    background-position: right center;
    background-size:cover;
}

.reservation_step .reservation_parentitem.nr6{
    background: url("../img/veld-6.png");
    background-position: right center;
    background-size:cover;
}

.reservation_step .reservation_parentitem.nr7{
    background: url("../img/veld-7.png");
    background-position: right center;
    background-size:cover;
}

.reservation_step .reservation_parentitem.nr8{
    background: url("../img/veld-8.png");
    background-position: right center;
    background-size:cover;
}

.membership_keuze{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
}

.button_membership_type{
    background:silver;
    color:white;
    padding:10px;
    margin:5px;
    border-radius:5px;
    cursor:pointer;
    font-weight:bold;
    border:2px solid silver;
}

.button_membership_type:hover, .button_membership_type.selected{
    background: #ffc400;
    color:white;
}

#button_betaal_membership, #button_betaal_plus{

}


.content_img{
    width:100%;
}
.content_img:hover{
    opacity:0.8;
}

#insta_bottom{

}


.activity{
    background: rgb(255, 211, 188);;

    font-weight:bold;
    font-size:12px;
    color:white;
    border-radius: 5px;
    position:relative;
}

.activity_progress{
    max-width:80%;
    min-width:110px;
    padding:5px;
    background:rgba(252, 142, 91, 1);
    border-radius: 5px;
}

.activity_nextlevel{
    color: rgb(144, 59, 19);
    position: absolute;
    right:5px;
    top:5px;
}

.terra{
    color: rgb(144, 59, 19);
}

.linkwithpadding{
    display:block;
    padding:10px 0 0 0;
}



.clickitem{
    cursor:pointer;
}

    .clickitem .intro{

    }

    .clickitem .intro p:hover{
        color: #ffc400;
    }

    .clickitem .extrainfo{
        display:none;
    }

.buddy{
    background: #f5f5f5;
    border-radius: 5px;
    padding: 5px;
    border:2px solid #f5f5f5;
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin:5px 0 5px 0;
}

.buddy .info{
    padding: 0 0 0 25px;
    background: url("../img/icon-buddy.png");
    background-repeat: no-repeat;
    background-size: auto 100%; ;

}

.button_remove{
    background: silver;
    width:30px;
    height:30px;
    float:right;
    border-radius:5px;
    background: url("../img/icon-trash.png");
    background-size: 100% 100%;
    background-position:-3px -3px;
    border: 1px solid  silver;

}

.button_remove:hover{

    cursor:pointer;
    border:1px solid  #ffc400;
    background-color: #ffc400;
}


.extrapadding{
    padding-top:25px;
}

.partner_parent{
    display:flex;
    flex-direction: row;
    justify-content: center;
}

.partner{
    background:#ededed;
    margin:10px;

}

.partner.small{
    width:95%;
}

.partner.large{
    width:100%;
}


table.datumoverzicht{
width:100%;
}

table.datumoverzicht td{
    padding:3px 5px;
    font-size:11px;
    text-align:center;
}

table.datumoverzicht tr:nth-child(even){
    background:#ededed;
}


.marketpicture{
    width:250px;
}


.shop_item.market{
    width:250px;
    margin:10px;
    display:flex;
    flex-direction: column;

}

    .shop_item.market .price{
        padding: 0 25px 0 0;
    }

.market_price{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}



.marketitems_wrap{
    display:flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;

}






/*************** LOADER ***********************/

.loader{
    display:inline-block;
}


.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffc400;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

/**************************************/
.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s infinite;
}


@keyframes fade {
    0%,100% { opacity: 0 }
    50% { opacity: 1 }
}

/* LOADING STATE FOR DROPDOWNS */
.reservation_buddy.loading {
    opacity: 0.6;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    cursor: wait !important;
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

strong{
    font-weight:bold;
}

.academylink{
    text-decoration: none;
}
    .academylink:hover{
        color:#ffc400;
    }

    #academy_info h1{
        font-weight:bold;
        font-size:25px;
        padding:10px 0;
    }

    #academy_info h2{
        font-weight:bold;
        font-size:18px;
        padding:5px 0;
        margin:5px 0;
        border-bottom: 1px solid #ededed;
    }

    #academy_info p{
        padding:5px 0;
        line-height:1.5;
        font-weight:300;
    }

    #academy_info img{
        max-width:100%;
        height:auto;
    }

#academy_info td{
    padding:5px;
}



#aboinfo{
    background: #042444;
    color:white;
    padding:20px;
    border-radius: 5px;

}

#aboinfo .title{
    color:white;
}

#aboinfo .colwrap{
    display:flex;

}

.reservationinfoblock{
    background:white;
    color: #333333;
    border-radius:5px;
    margin:5px;
    display:flex;
    flex-direction: column;
    width:50%;

}

    .reservationinfoblock .top{
        padding:10px;
        font-weight:bold;
        background:#ffc400;
        border-radius:5px 5px 0 0;
    }

    .reservationinfoblock .aantal{
        font-size:40px;
        font-weight:bold;
        text-align:center;
    }

    .reservationinfoblock .small{
        font-size:20px;
    }
    .mini{
        font-size:11px;
    }

.reservationinfoblock .colors{
    display:flex;
    justify-content: center;
}

    .reservationinfoblock .zone{
        font-size:20px;
        padding:5px;
        margin:5px;
        border-radius:5px;
        width:40px;
        color:white;
        font-weight:bold;
        text-align: center;
    }
        .reservationinfoblock .zone.groen{
            background: #8de08d;
        }
        .reservationinfoblock .zone.paars{
            background:mediumpurple;
        }
        .reservationinfoblock .zone.blauw{
            background: #7cc1d5;
        }





.page_large{
    background: #ededed;
    border-radius: 10px;
    padding:10px;
    margin:25px;
}























/*************************************************************************/

@media (min-width: 900px) {


    .page{
        margin: 10px auto;
    }

    .openingsuren_parent{
        margin: 10px auto;
    }


    #accountinfo_top{
        margin: 0 auto;
    }

    .book_info{
        left:50%;
        max-width:640px;
        margin: 0 0 0 -320px;
    }

    .slide_title{
        font-size:18px;
    }

}

@media screen and (max-width: 480px) {
    /* Your CSS rules here */

    .shop_item{

    }

    .flexcolparent{

        justify-content: center;
        flex-wrap: wrap;
    }

    .flexcol{
        width:100%;
        text-align: center;
    }

}

/* Event Calendar Styles */
.calendar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.calendar-header {
    text-align: center;
    margin-bottom: 30px;
}

.calendar-header h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 5px;
}

.calendar-period {
    color: #666;
    font-size: 16px;
    margin: 0;
}

.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 5px;
}

.calendar-day-header {
    background: #ffc400;
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    font-size: 14px;
}

.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    min-height: 120px;
    padding: 8px;
    border-radius: 5px;
    position: relative;
    transition: all 0.2s ease;
}

.calendar-day:hover {
    background: #e9ecef;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calendar-day.past-day {
    background: #f1f3f4;
    opacity: 0.6;
}

.calendar-day.today {
    background: #fff3cd;
    border: 2px solid #ffc400;
}

.day-number {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    text-align: center;
}

.day-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-item {
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.event-item:hover {
    transform: scale(1.02);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.event-standalone {
    background: #d4edda;
    border-left-color: #28a745;
    color: #155724;
}

.event-reservation {
    background: #d1ecf1;
    border-left-color: #17a2b8;
    color: #0c5460;
}

.event-title {
    font-weight: bold;
    margin-bottom: 2px;
    line-height: 1.2;
}

.event-info {
    font-size: 10px;
    opacity: 0.8;
    line-height: 1.1;
}

.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 5px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border-left: 3px solid transparent;
}

.legend-color.event-standalone {
    background: #d4edda;
    border-left-color: #28a745;
}

.legend-color.event-reservation {
    background: #d1ecf1;
    border-left-color: #17a2b8;
}

/* Responsive design for mobile */
@media screen and (max-width: 768px) {
    .calendar-container {
        padding: 10px;
        margin: 10px;
    }
    
    .calendar-day {
        min-height: 80px;
        padding: 4px;
    }
    
    .day-number {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .event-item {
        font-size: 10px;
        padding: 2px 4px;
    }
    
    .event-title {
        font-size: 10px;
    }
    
    .event-info {
        font-size: 9px;
    }
    
    .calendar-legend {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .calendar-header h2 {
        font-size: 20px;
    }
    
    .calendar-period {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .calendar-day-header {
        font-size: 12px;
        padding: 8px 4px;
    }
    
    .calendar-day {
        min-height: 60px;
    }
    
    .day-number {
        font-size: 12px;
    }
    
    .event-item {
        font-size: 9px;
        padding: 1px 2px;
    }
}