body{
    padding: 0;
    margin: 0;
    background-color:white;
    direction: rtl;

}
form{
    margin: 20vh auto;
    box-shadow: 0 0 15px black;
    width: 30%;
    /* background-color: rgb(239, 240, 239); */
    text-align: center;
    padding: 20px;

}
form label{
    display: inline-block;
    width: 17%; 
    margin-right:  3%;
    padding: 2vh ;
    

}
form input  {
    width: 65%;
    border: none;
    outline: none;
    border-bottom: 1px solid black ;
    display: inline-block;
    padding: 2vh 0;
    /* background-color: rgb(239, 240, 239); */
    border-radius: 10px;

    margin: 1vh;
}
form span{
    display: block;
    
    margin: 0 auto;
    padding: 10px ;
}
form button {
    display: block;
    width: 50%;
    margin: 2vh auto;
    background-color: rgb(216, 237, 224);

    font-weight: bold;
    transition: all 500ms;
    padding: 2vh;
    border-radius: 2px;
    border: none;
    box-shadow: 0 0 10px black; 

    

}
form button:hover{
    background-color: rgb(64, 149, 95);
    
    /* transform: scale(1.1); */
    width: 55%;
    cursor: pointer;
}
.error{
    box-shadow: 0 0 15px red;
}
.spnError {
    text-shadow: 0 0 5px red;
}


.male{
    background-color: rgb(209, 209, 244);
}
.maleForm{
    background-color: rgb(209, 209, 244);
}
.maleForm input{
    background-color: rgb(209, 209, 244);
}





.female{
    background-color: rgb(247, 224, 228);
}
.femaleForm{
    background-color: rgb(247, 224, 228);
}
.femaleForm input{
    background-color: rgb(247, 224, 228);
}

form  > section  > input {
    display: inline-block !important;
    width: 6%;
    margin: 0;
    margin-left: 60%;

}
form  > section  > label {
    display: inline-block !important;
    width: 15%;
    margin: 0;

}

#rules label{
    width: 30% !important;
}
#rules input{
    width: 10% !important;
}


@media only screen and ( max-width : 800px) {
    form{
        margin: 5vh auto;
        box-shadow: 0 0 15px black;
        width: 90%;
        /* background-color: rgb(239, 240, 239); */
        text-align: center;
        padding: 10px;

    }
    form label{
        display: inline-block;
        width: 15%; 
        margin-right:  1%;
        padding: 2vh ;
        font-size: 0.8em;
        

    }
    form input  {
        width: 55%;
        border: none;
        outline: none;
        border-bottom: 1px solid black ;
        display: inline-block;
        padding: 2vh 0;
        /* background-color: rgb(239, 240, 239); */
        border-radius: 10px;

        margin: 1vh 0;
    }
    
}


#TablE{
    width: 70%;
    background-color: red;
    margin-top: 20px;
}