@media all and (orientation:portrait){ 


    


    .usermelding{
        margin: 15px;
        font-weight: bold;
        color :#1F8FD0;
    }

    .body{
 
    font-size: 16px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: white;
    color:#bddfff;

    width: 100%;
 


    }


    
    .topmenu{
        width: 100%;
        height: 70px;
        margin-top: 10px;
      
        display: flex;
        flex-direction: row;
        border-bottom: #9D8AD3;
        border-bottom-style: solid;
        border-bottom-width: 3;
        color:#EA6E62;
        padding-right: 30px;
        justify-content: right;

    }
    .topmenuitem{
        margin-right: 10px;
      
    }
    .mainwindow{
        background-color: white;

    
    }
    .menuarea{
        display: flex;
        flex-direction: row;
        width: 97%;
        height: 60px;
        background-color: #bddfff;
        display: flex;
        flex-direction: row;
    
        padding: 5px;
        justify-content: flex-end;
    
    }

    .menuicon{
        width:'100px';
    }

    .menuitem{
        text-align: center;
        font-size: 12px;
        background-color: #F49712;
        border-color:white;
        color:white;
        border: solid;
        border-radius: 10px;
        border-width: 1px;
        padding: 5px;
        margin-right: 2px;
        text-decoration: none;
        box-shadow: 1px 3px 2px rgb(73, 73, 70);
       
 
    }
    .menuitem:hover{
        background-color: #1F8FD0;
    color:#F49712;
        border-color: white;
        
    }
    
    .menuitem50{
        text-align: center;
        font-size: 12px;
        background-color: #F49712;
        border-color:white;
        color:white;
        border: solid;
        border-radius: 10px;
        border-width: 1px;
        padding: 5px;
        width: 48%;
        margin-right: 2px;
        text-decoration: none;
        box-shadow: 1px 3px 2px rgb(73, 73, 70);
       
 
    }
    .menuitem50:hover{
        background-color: #bddfff;
    color:#F49712;
        border-color: white;
        
    }
    .menulogo{
        width: 50px;
   
    }
    .sublogo{
        color: white;
        font-size: 10px;
        font-weight: bold;
    }
    .schermtitel{
        color: #F49712;
        border-bottom: #bddfff;
        border-bottom-style: solid;
        margin: 5px;
        margin-bottom: 15px;
        font-size: 16px;

        text-align: left;
    }
    .subschermtitel{
        
        color:#F49712;
        border-bottom: #bddfff;
        border-bottom-style: solid;
        margin: 5px;
        margin-bottom: 15px;
        font-size: 16px;

        text-align: left;
    }


    .centerscherm50{
        width: 88%;
      
        border-color:#1F8FD0;

        border-style: solid;
        margin-left: 2%;
        align-items: center;
        text-align: center;
        border-radius: 25px;
        padding: 15px;
        margin-top: 5%;
        
    } 
    .infoscherm50{
        width: 88%;
      
        border-color:#1F8FD0;

        border-style: solid;
        margin-left: 2%;
        align-items: center;
        text-align: center;
        border-radius: 25px;
        padding: 15px;
        margin-top: 5%;
        
    } 
    .centerscherm90{
        margin-top: 1%;


        background-color:  white;
 

        padding: 5px;

        
    } 
    .bottommenu{
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center;
        margin-top: 10px;
        color:  white;
 
     
    }
    .vraagmenu{
        width: 50%;
     
        margin-left: 25%;
      
        display: flex;
        flex-direction: column;
     
    }
    .vraag{
        border-radius: 10px;
        border-style:solid;
        border-color: #F49712;
        color: #1F8FD0;
        background-color: #bddfff;
        text-align: center;
        width: 100%;
       
        font-size: 18px;
    }

    .invoerveld{
        display: inline-grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: auto auto auto;
      
        width: 98%;
    }
    .invoergebied{
        margin-left:1%;
        margin-top: 10px;
        padding: 10px;
        width: 80%;
        text-align: center;
        border-color: #F49712;
        border-style: solid;
        border-radius: 10px;
        color: #1F8FD0;
        font-size: 12px;
    }
    .invoergebiedblanco{
        margin-left:1%;
        margin-top: 10px;
        padding: 10px;
        width: 80%;
        text-align: center;
        border-radius: 10px;
        color: #1F8FD0;
        font-size: 12px;
    }
    .invoergebiedstart{
        margin-left:1%;
        margin-top: 10px;
        padding: 10px;
        width: 80%;
        text-align: center;
        border-color: #F49712;
        background-color: #f5d6ab;
        border-style: solid;
        border-radius: 10px;
        color:#1F8FD0;
        font-size: 16px;
    }
    .invoernaam{
        margin-left:1%;
        margin-top: 10px;
        padding: 10px;
        width: 80%;
       
        text-align: center;      
        border-radius: 10px;
        color: #1F8FD0;
        font-size: 12px;
    }
    .resultaatregel{
        display: flex;
        flex-direction: row;
    }
    .resultaatvraag{
        text-align: left;
        color:#F49712;
        width: 70%;
    }
    .resultaatcijfer{
        text-align: right;
        color:#1F8FD0;
        font-weight: bold;
        width: 25%;
    }
    .invoerregel{
        display: flex;
        flex-direction: row;
        justify-content:space-around;
    }
    .cijfer{
     
        font-size: 26px;
    }
    .range-wrap {
        display: none;
      }
      .range {
        display: none;

      }

}   

@media only screen and (min-width: 768px){ 


    .usermelding{
        margin: 24px;
        font-weight: bold;
        color :#bddfff;
    }


    .body{
 
    font-size: 16px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: white;
    color:#1F8FD0;
    display: block;

    width: 100%;

    @media all and (orientation:portrait){ 


    


        .usermelding{
            margin: 15px;
            font-weight: bold;
            color :#9D8AD3;
        }
    
        .body{
     
        font-size: 16px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        background-color: white;
        color: #9D8AD3;
    
    
        }
    
        .info{
            width: 95%;
            margin-left: 2%;
            font-size:16px;
            
        }
        
        .topmenu{
            width: 100%;
            height: 70px;
            margin-top: 10px;
          
            display: flex;
            flex-direction: row;
            border-bottom: #9D8AD3;
            border-bottom-style: solid;
            border-bottom-width: 3;
            color:#EA6E62;
            padding-right: 30px;
            justify-content: right;
    
        }
        .topmenuitem{
            margin-right: 10px;
          
        }
        .mainwindow{
            background-color: white;
    
        
        }
        .menuarea{
            display: flex;
            flex-direction: row;
            width: 97%;
            height: 28px;
            background-color: #ACC4E8;
            display: flex;
            flex-direction: row;
        
            padding: 5px;
            justify-content: flex-end;
        
        }
    
        .menuicon{
            width:'100px';
        }
    
        .menuitem{
            display: block;
            width:250px;
    
          
       
     
        }
    
        .menuitem:hover{
            border-color: #9D8AD3;
            color: 'white';
            
        }
        .kaarttabel{
           
            width:  60px;
            height: 25px;
            cursor: pointer;
            margin: 5px;
            object-fit:contain;
        }
        .beroepsvideo{
            width: 100px;
            height: 200px;
            border-color: #9D8AD3;
            border-style: solid;
            border-width: 2;
            object-fit: contain;
        }
        .button{
            display: block;
            text-align: left;
            color: black;
            border-color: white;
            width: 50px;
            background-image:linear-gradient(to right,white,#ACC4E8);
            border: solid;
            font-size: 16px;
            border-radius: 7px;
            border-width: 2px;
            padding: 15px;
            margin: 15px;
            text-decoration: none;
            box-shadow: 5px 7px 6px rgb(73, 73, 70);
       
     
        }
        .button:hover{
            color: #9D8AD3;
    
            
        }
        .buttonitem{
            display: block;
            text-align: left;
    
            color: #ACC4E8;
            border-color:#ACC4E8;
            width:150px;
            border-style: solid;
            border-radius: 7px;
            border-width: 2px;
            padding: 15px;
            margin: 15px;
            text-decoration: none;
            box-shadow: 5px 7px 6px rgb(184, 191, 209);
       
     
        }
        .buttonitem:hover{
          
            color: #9D8AD3;
            
        }
        .menulogo{
            width: 50px;
       
        }
        .appscreen{
            width: 175px;
            height: 350px;
            border-width: 2px;
            border-color: #9D8AD3;
            border-radius: 15px;
            border-style: solid;
    
        }
        .avatar{
           
            width: 75px;
            height: 75px;
            border-radius: 50%;
            cursor: pointer;
            margin: 5px;
            object-fit: cover;
           
        }
        .avatarklein{
           
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-left: 5px;
            margin-right: 5px;
            cursor: pointer;
            object-fit: cover;
    
        }
        .avatarzeerklein{
           
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-left: 5px;
            margin-right: 5px;
            border-width: 1;
            border-style: solid;
            border-color: #EA6E62;
            cursor: pointer;
            object-fit: cover;
    
        }
        .menuklein{
            vertical-align: middle;
            width: 40px;
            height: 40px;
            margin-left: 5px;
            cursor: pointer;
    
        }
        .stadion{
            vertical-align: middle;
            height: 250px;
            width: 350px;
            object-fit: cover;
            border-color: #9D8AD3;
            border-radius: 4px;
            border-width: 1px;
            cursor: pointer;
            box-shadow: 5px 5px 5px rgb(131, 188, 241);
    
           
        }
        .stadionklein{
         
            width: 150px;
            border-color: #9D8AD3;
            border-radius: 4px;
            border-width: 5px;
            cursor: pointer;
            object-fit: cover;
           
        }
        .schermtitel{
            display: flex;
            flex-direction: row;
            color:#EA6E62;
            border-bottom: #EA6E62;
            border-bottom-style: solid;
            margin: 5px;
            margin-bottom: 15px;
            font-size: 20px;
    
            text-align: left;
        }
        .schermsubtitel{
            display: flex;
            flex-direction: row;
            color:#9D8AD3;
            border-bottom: #9D8AD3;
            border-bottom-style: solid;
            margin: 5px;
            margin-bottom: 15px;
            font-size: 16px;
    
            text-align: left;
        }
        .uitslag{
            font-size: 20px;
            text-align: center;
        }
        .wedstrijdinfo{
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin: 1%;
    
        }
        .speeldatum{
            color:#ACC4E8;
            font-size: 12px;
        }
    
    
        .centerscherm50{
            margin-top: 1%;
    
    
            background-color:  white;
            color:  #9D8AD3;
    
            padding: 5px;
            
        } 
        .centerscherm90{
            margin-top: 1%;
    
    
            background-color:  white;
            color:  #9D8AD3;
    
            padding: 5px;
    
            
        } 
        .bottommenu{
            display: flex;
            flex-direction: roW;
            width: 100%;
         
            margin-top: 10px;
            align-items: center;
            justify-content: baseline;
            display: flex;
            flex-direction: row;
            color:  white;
            padding: 10px;
         
        }
        .wedstrijdinfo{
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin: 1%;
           
        }
        .wedstrijd{
            display: flex;
            flex-direction: row;
            justify-content:space-around;
            margin: 1%;
           
        }
        .clubnaam{
            width: 175px;
            text-align: center;
            padding: 3px;
            background-color: #9D8AD3;
            color: white;
            font-size: 20px;
            margin: 5px;
            border-style: solid;
            border-radius: 7px;
            border-width: 2px;
    
        }
        .uitslaglist{
            width: 40px;
            text-align: center;
            padding: 3px;
            background-color: #9D8AD3;
            color: white;
            font-size: 12px;
            margin: 1px;
            border-style: solid;
            border-radius: 3px;
            border-width: 1px;
    
    
        }
        .blancolist{
            width: 40px;
            text-align: center;
            padding: 3px;
       
           
            font-size: 12px;
            margin: 1px;
    
    
    
    
        }
        .voorspellist{
            width: 40px;
            text-align: center;
            padding: 3px;
            color:#9D8AD3;
            border-style:solid;
            background-color: white;
            border-color: #9D8AD3;
            font-size: 12px;
            margin: 1px;
            border-style: solid;
            border-radius: 3px;
            border-width: 1px;
    
    
        }
    
    
    }   
    
    @media all and (orientation:landscape){ 
    
    
    
    
    
        .body{
     
        font-size: 16px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    ;
        color: #E1D8C7;
        display: block;
    
        }
    
    
        
        .topmenu{
    
            width: 100%;
            height: 70px;
            margin-top: 10px;
          
            display: flex;
            flex-direction: row;
            border-bottom: #9D8AD3;
            border-bottom-style: solid;
            border-bottom-width: 3;
            color:#EA6E62;
            padding-right: 30px;
            justify-content: flex-end;
    
        }
        .topmenuitem{
            margin-right: 20px;
        }
        .info{
            width: 60%;
            margin-left: 5%;
            
            
        }
        .mainwindow{
    
     
            align-content: center;
            text-align: center;
        }
        .menuarea{
            background-color: #ACC4E8;
            display: flex;
            flex-direction: column;
            padding: 15px;
            align-content: center;
            width: 10%;
            height: 100vh;
        }
        .menuicon{
            width:'100px';
        }
    
        .menuitem{
            display: block;
            width:250px;
    
          
       
     
        }
        .menuitem:hover{
            border-color: #9D8AD3;
            color: 'white';
            
        }
        .buttonitem{
            display: block;
            text-align: left;
          
            color: #ACC4E8;
            border-color:#ACC4E8;
            width:220px;
    
            margin: 15px;
            text-decoration: none;
    
     
        }
    
        .appscreen{
            width: 300px;
            height: 600px;
            border-style: solid;
            border-width: 2px;
            border-color: #9D8AD3;
            border-radius: 30px;
        }
    
        .menulogo{
            margin-top: 50px;
            margin: 15px;
            width: 220px;
            align-self: center;
            border-radius: 5%;
            box-shadow: 8px 10px 9px #CEC5E9;
    
        }
        .usercontainer{
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        .avatarcontainer{
           
            width: 150px;
            height: 150px;
            cursor: pointer;
            margin: 25px;
            background-color: 'white';
            border-radius: 50%;
            border-width: 2;
            border-color: #EA6E62;
            border-style: solid;
            align-items: center;
        }
        .avatarzeerklein{
           
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: 5px;
            margin-right: 5px;
            border-width: 1;
            border-style: solid;
            border-color: #EA6E62;
            cursor: pointer;
            object-fit: contain;
    
        }
        .avatar{
           
            width: 100px;
            height: 100px;
            cursor: pointer;
            margin: 25px;
            object-fit:contain;
        }
        .kaartlos{
           
            width: 250px;
            height: 200px;
            cursor: pointer;
            margin: 5px;
        }
        
        .kaartlosklein{
           
            width: 50px;
            height: 40px;
            cursor: pointer;
            margin: 2px;
        }
        .hartjeklein{
           
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        
        .kaarttabel{
           
            width: 250px;
            height: 50px;
            cursor: pointer;
            margin: 5px;
            object-fit:contain;
        }
    
        .sectortabel{
           
            width: 30px;
            height: 30px;
            cursor: pointer;
            margin: 5px;
            object-fit:contain;
        }
        .kaartupload{
           
            width: 400px;
            height: 150px;
            cursor: pointer;
            object-fit:contain;
        }
        .kaartcontainer{
           
           display: flex;
            flex-direction: column;   
         }
        .avatarklein{
          
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 5px;
            object-fit: cover;
            
        }
        .menuklein{
            vertical-align: middle;
            width: 40px;
            height: 40px;
            margin: 5px;
            object-fit: cover;
            
        }
        .menuzeerklein{
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin: 5px;
            object-fit: cover;
            
        }
        .positieklein{
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin: 5px;
            margin-left: 15px;
            text-align: 'center';
            color: 'black';
    
            
        }
        .stadion{
            vertical-align: middle;
            height: 200px;
            width: 300px;
            object-fit: cover;
            border-color: #9D8AD3;
            border-style: solid;
            border-radius: 4px;
            border-width: 1px;
            cursor: pointer;
            box-shadow: 5px 7px 6px rgb(184, 191, 209);
           
        }
    
        .stadionklein{
            vertical-align: middle;
            width: 80px;
            border-color: #9D8AD3;
            border-radius: 4px;
            border-width: 1px;
            cursor: pointer;
           
        }
        .schermtitel{
            display: flex;
            flex-direction: row;
            color:#EA6E62;
            border-bottom: #EA6E62;
            border-bottom-style: solid;
            margin: 5px;
            margin-bottom: 15px;
            font-size: 28px;
    
            text-align: left;
        }
        .centerschermtitel{
            display: flex;
            flex-direction: row;
            color:#EA6E62;
            border-bottom: #EA6E62;
            border-bottom-style: solid;
            margin: 5px;
            margin-bottom: 15px;
            font-size: 28px;
    
            text-align: center;
        }
        .schermsubtitel{
            display: flex;
            flex-direction: row;
            color:#9D8AD3;
            margin: 5px;
            margin-bottom: 15px;
            font-size: 18px;
        }
        .subschermtitel{
            font-size: 16px;
            color:#9D8AD3;
        }
        .speeldatum{
            color:#ACC4E8;
            font-size: 18px;
        }
        .uitslag{
            font-size: 28px;
            text-align: center;
        }
    
    
        .centerscherm50{
            width: 50%;
            background-color: white;
            color:  #9D8AD3;
            border-color:  #9D8AD3;
            border-style: solid;
            margin-left: 20%;
            align-items: center;
            text-align: center;
            border-radius: 25px;
            padding: 15px;
            margin-top: 5%;
            
        } 
        
        .centerscherm55{
            width: 50%;
            background-color: white;
            color:  #9D8AD3;
            border-color:  #9D8AD3;
            border-style: solid;
            margin-left: 20%;
            align-items: center;
            text-align: center;
            border-radius: 25px;
            padding: 15px;
            margin-top: 5%;
            display: flex;
            flex-direction: column;
            
        } 
        .centerscherm90{
        
            margin-left: 5%;
            width: 90%;
    
            color:  #EA6E62;
    
            padding: 15px;
            height: 100vh;
            
        } 
        .centerscherm80{
        
            margin-left: 5%;
            width: 90%;
            display: flex;
            flex-direction: column;
            
            color:  #EA6E62;
    
            padding: 15px;
            height: 100vh;
            
        } 
        .kopinfo{
        flex-direction: column;
            color:  #EA6E62;
            text-align: left ;
        
        } 
        .bottommenu{
    
            width: 100%;
         
            margin-top: 10px;
          
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: baseline;
            color:  white;
            padding: 30px;
         
        }
        .iconmenu{
            display: flex;
            flex-direction: row;
        }
        .wedstrijdinfo{
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin: 1%;
           
        }
        .horizontaal{
            display: flex;
            flex-direction: row;
            justify-content:space-around;
            margin: 1%;
           
     
    
           
        }
        .horizontaallinks{
            display: flex;
            flex-direction: row;
            width: 350;
            margin: 1%;
     
    
           
        }
        .verticaal{
            display: flex;
            flex-direction: column;
            justify-content:center;
            text-align: center;
            
    
           
        }
        .spelerprofiel{
            display: flex;
            flex-direction: row;
            width: '90%';
            margin-left: '5%';
        }
        .verticaallinks{
            display: flex;
            flex-direction: column;
            text-align: left;
            width: 350px;
            margin-left: 25px;
            
    
           
        }
        .clubnaam{
           
            text-align: left;
            padding: 3px;
            
            color: #9D8AD3;
            font-size: 20px;
            margin: 5px;
     
    
        }
        .spelerinfo{
           
            text-align: left;
            width: '80%';
            padding: 3px;
            
            color: #9D8AD3;
            font-size: 20px;
            margin: 5px;
     
    
        }
    
        .uitslaglist{
            width: 75px;
            text-align: center;
            padding: 3px;
            background-color: #9D8AD3;
            color: white;
            font-size: 20px;
            margin: 5px;
            border-style: solid;
            border-radius: 7px;
            border-width: 2px;
    
        }
        .voorspellist{
            width: 75px;
            text-align: center;
            padding: 3px;
            color:#9D8AD3;
            border-style:solid;
            background-color: white;
            border-color: #9D8AD3;
            font-size: 20px;
            margin: 5px;
            border-style: solid;
            border-radius: 7px;
            border-width: 2px;
    
        }
        .blancolist{
            width: 75px;
            text-align: center;
            padding: 3px;
            margin: 5px;
       
    
    
        }
        .puntenlist{
            width: 75px;
            text-align: center;
            padding: 3px;
            background-color: #9D8AD3;
            color: white;
            font-size: 20px;
            margin: 5px;
            border-style: solid;
            border-radius: 50%;
            border-width: 2px;
    
        }
        .beroepsvideo{
            width: 170px;
            height: 300px;
            border-color: #9D8AD3;
            border-style: solid;
            border-width: 2;
            object-fit: contain;
        }
    
        .beroepsvideoklein{
            width: 30;
            height: 40;
        }
       
       
    }
    }


    
    .topmenu{

        width: 99%;
        height: 50px;
        margin-top: 10px;
      
        display: flex;
        flex-direction: row;
        color:  white;
        background-color: black;
        padding-right: 30px;
        justify-content: flex-end;

    }
    .topmenuitem{
        margin-right: 20px;
    }
    .mainwindow{
        display: flex;
        flex-direction: row;
    }
    .menuarea{
        background-color: #bddfff;
        display: flex;
        flex-direction: column;
        padding: 10px;
        align-content: center;
        width: 8%;
        height: 100vh;
    }
    .menuicon{
        width:'100px';
        background-color: #F49712;
        color: #bddfff;
    }

    .menuitem{
        display: block;
        text-align: left;
        background-color: #F49712;
        border-color:white;
        color:white;
        border: solid;
        border-radius: 7px;
        border-width: 2px;
        padding: 5px;
        margin: 5px;
        font-size: 16px;
        text-decoration: none;
        text-align: center;
        width: 150px;
        box-shadow: 5px 7px 6px rgb(73, 73, 70);
   
 
    }
    .menuitem:hover{
        background-color: #1F8FD0;
    color:#F49712;
        border-color: white;

        
    }
    .menuitem50{
        display: block;
        text-align: left;
        background-color: #F49712;
        border-color:white;
        color:white;
        border: solid;
        border-radius: 7px;
        border-width: 2px;
        padding: 15px;
       
        width: 48%;
        text-decoration: none;
        box-shadow: 5px 7px 6px rgb(73, 73, 70);
   
 
    }
    .menuitem50:hover{
        background-color: #bddfff;
        color:#F49712;
        border-color: white;

        
    }
    .menulogo{
        margin-top: 50px;
        margin: 15px;
        width: 75px;
        align-self: center;
    }
    .sublogo{
        color: white;
        font-size: 20px;
        font-weight: bold;
        margin-left: 26px;
    }
    .schermtitel{
        color:#F49712;
        border-bottom: #bddfff;
        border-bottom-style: solid;
        margin: 5px;
        font-size: 28px;

        text-align: left;
    }
    .subschermtitel{
        color:#F49712;

        margin: 5px;
        margin-bottom: 15px;
        font-size: 20px;

        text-align: left;
    }

    .centerscherm50{
        width: 83%;

        border-style: solid;
        margin-left: 25%;
        align-items: center;
        text-align: center;
      
        padding: 15px;
        margin-top: 5%;
        
    } 
    .infoscherm50{
    
        width: 83%;

        margin-left: 1%;
        align-items: center;
        text-align: left;
  
        padding: 25px;

        margin-top: 1%;
        font-size:16px;
        
    } 
    .centerscherm90{
        margin-top: 1%;

        width: 86%;
        background-color:  white;


        padding: 5px;
        height: 100vh;
        
    } 
    .bottommenu{
        display: flex;
        flex-direction: row;
        width: 100%;
     justify-content: center;
        margin-top: 5px;
        align-items: center;
        text-align: center;

        color:  white;
       
     
    }
    .vraag{
        border-radius: 10px;
        border-style:solid;
        border-color: #F49712;
        color:#1F8FD0;
        background-color: #bddfff;
        text-align: center;
        width: 96%;
        padding: 5px;
        padding-left:15px;
        padding-right:15px;

        font-size: 16px;
    }
    .invoerveld{
        display: inline-grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: auto auto auto;
      
        width: 98%;
    }
    .invoergebied{
        margin-left:9%;
        margin-top: 2px;
        padding: 10px;
        width: 220px;
        text-align: center;
        border-color: #F49712;
        border-style: solid;
        border-radius: 10px;
        color: #1F8FD0;
        font-size: 16px;
    }
    .invoergebiedblanco{
        margin-left:1%;
        margin-top: 10px;
        padding: 10px;
 
        text-align: center;
        width: 220px;
        border-radius: 10px;
        color: #1F8FD0;
        font-size: 12px;
    }
    .invoergebiedstart{
        margin-left:9%;
        margin-top: 10px;
        padding: 10px;
        width: 220px;
        text-align: center;
        border-color: #F49712;
        background-color:#f5d6ab;
        border-style: solid;
        border-radius: 10px;
        color:#1F8FD0;
        font-size: 16px;
    }
    .invoernaam{
        margin-left:9%;
        margin-top: 10px;
        padding: 10px;
        width: 80%;
        text-align: center;
        align-content: center;
        color: #1F8FD0;
        font-size: 18px;
    }


    .sliderarea{
    margin-left: 5%;
    display: flex;
    flex-direction: row;
    align-content: center;
    text-align: center;
    color:#F49712;

    
    }
    .saldotext{
        text-align: center;
        font-size: larger;
        color: #bddfff;
        width: 95%;
        
       
    }
    .resultaatregel{
        display: flex;
        flex-direction: row;
    }
    .resultaatvraag{
        text-align: left;
        color:#F49712;
        width: 70%;
    }
    .resultaatcijfer{
        text-align: right;
        color:#1F8FD0;
        font-weight: bold;
        width: 25%;
    }
    .invoerregel{
        display: flex;
        flex-direction: row;
        justify-content:space-around;
    }
    .cijfer{
     
        font-size: 28px;
    }
    .vraagmenu{
        width: 50%;
     
        margin-left: 25%;
      
        display: flex;
        flex-direction: column;
     
    }
    .helft{
        width: 48%;
        color:#F49712;
    }
    .range-wrap {
        display: none;
      }
      .range {
        display: none;

      }
      input[type=text]{
        border-radius: 5px;
        font-size: 15px;
        padding: 5px;
        margin: 5px;
        font-size: 22px;
        border-color:#F49712;
        color:#175B99;
        width: 150px;
      
      }
      


}
.progressbar{
    width: 98%;
    border: #bddfff;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;
}


@media only screen and (min-width: 1200px) {
    .infoscherm50{
        width: 50%;
        

        margin-left: 5%;
        align-items: center;
        text-align: left;
        border-radius: 25px;
        padding-left: 15%;
        padding-right: 15%;
        padding-top: 5%;

        margin-top: 5%;
        font-size:22px;
        
    } 
    .vraag{
        border-radius: 10px;
        border-style:solid;
        border-color: #F49712;
        color:#1F8FD0;
        background-color: #bddfff;
        text-align: center;
        width: 96%;
        padding: 15px;
        font-size: 22px;
    }
    .menuitem{
        display: block;
        text-align: left;
        background-color: #F49712;
        border-color:white;
        color:white;
        border: solid;
        border-radius: 7px;
        border-width: 2px;
        padding: 5px;
        margin: 5px;
        font-size: 22px;
        text-align: center;
        width: 150px;
        text-decoration: none;
        box-shadow: 5px 7px 6px rgb(73, 73, 70);
   
 
    }
    .menuarea{
        background-color: #bddfff;
        display: flex;
        flex-direction: column;
        padding: 10px;
        align-content: center;
        width: 12%;
        height: 100vh;
    }
    .invoergebied{
        margin-left:9%;
        margin-top: 10px;
        padding: 10px;
        width: 80%;
        text-align: center;
        border-color: #F49712;
 
        border-style: solid;
        border-radius: 10px;
        color: #1F8FD0;
        font-size: 24px;
    }
    .invoergebiedblanco{
        margin-left:9%;
        margin-top: 10px;
        padding: 10px;
        width: 80%;
        text-align: center;

        border-radius: 10px;
        color: #1F8FD0;
        font-size: 24px;
    }
    .invoergebiedstart{
        margin-left:9%;
        margin-top: 10px;
        padding: 10px;
        width: 80%;
        text-align: center;
        border-color: #F49712;
        background-color:#f5d6ab;
        border-style: solid;
        border-radius: 10px;
        color:#1F8FD0;
        font-size: 24px;
    }
    .invoernaam{
        margin-left:9%;
        margin-top: 10px;
        padding: 10px;
        width: 80%;
        text-align: center;
        align-content: center;
        color: #1F8FD0;
        font-size: 18px;
    }


    .sliderarea{
    margin-left: 5%;
    display: flex;
    flex-direction: row;
    align-content: center;
    text-align: center;
    color:#F49712;

    
    }
    .range-wrap {
        position: relative;
        margin: 0 auto 3rem;
      }
      .range {
        width: 100%;
        color:#175B99;
      }
      
      input[type=text]{
        border-radius: 5px;
        font-size: 15px;
        padding: 5px;
        margin: 5px;
        font-size: 36px;
        border-color:#F49712;
        color:#175B99;
        width: 200px;
      
      }
}