html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
    background: #FF0000;
}*/

body{
    font-family:'Franklin Gothic Book', 'Arial Narrow', Arial, sans-serif;
    background-image:url(images/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.bold{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}

/*1.775*/

#flex_container{
    display:flex;
    width:100%;
    height:100vh;
    align-items: center;
    text-align:center;
    justify-content: center;
    flex-direction: column;
    padding-top:10px;
    /*background-image:url(images/background.jpg);
    background-size: cover;*/
}

#vp{
    background-color: whitesmoke;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    opacity:0.9;
    padding:10px;
    display:flex;
    flex-direction: column;
    flex:1;

    
    min-height: calc(100% - 30px);
    max-height:calc(90% - 30px);
    width:calc(attr(height) * 0.563);
    max-width:400px;

    margin-bottom:40px;
    margin-top:10px;

    overflow-y:auto;
    word-wrap: normal;
    margin-left:auto;
    margin-right: auto;
    /*outline:solid 1px black;*/
}

#titre{
    display:block;
    /*background-color:#90b850;*/
    background-color:none;
    margin:-10px;
    margin-top:-30px;
    padding:0px;
    /*outline:solid 1px red;*/
}
#titre img{
    width:100%;
    margin-bottom:-30px;
}
#footer{
    background-color:#90b850;
    /*background-color:#681c4d;*/
    margin-bottom:auto;
    padding:5px;
    /*width:calc(attr(height) * 0.563);*/
    margin:-10px;
    color:white;
    margin-top:auto;
    /*outline:solid 1px blue;*/
}
#footer hr{
    width:70%;
    border:solid 1px white;
}
#footer p{
    margin-top:4px;
    margin-bottom:4px;
}
.pseudo_link, a{
    cursor:pointer;
    color:inherit;
    text-transform: none;
    text-decoration: none;
}
.pseudo_link:hover, a:hover{
    font-weight: bold;
    color:inherit;
}
#reglement{
    text-align:left;
    background-color: whitesmoke;
    color:#444;
    padding:10px;
    overflow-y:hidden;
}
.hidden{
    height:0px;
    visibility:hidden;
    display:none;
}
.visible{
    height:auto;
    visibility: visible;
    display:block;
}

#content{
    display:flex;
    flex-direction: column;
    margin-top:30px;
    margin-bottom:50px;
    min-height:50%;
    align-items: center;
    text-align:center;
    justify-content: center;
}

input.gift, img.gift{
    background:none;
    border:none;
    width:70%;
}

#output{
    display:block;
    position:relative;
    width:300px;
    border:solid 1px black;
    overflow-x: hidden;
}
input:invalid+span:after {
    position: relative; content: '✖';
    padding-left: 5px;
}
  
input:valid+span:after {
    position: relative;
    content: '✓';
    padding-left: 5px;
}

/*.blocLinkToForm{
    display:flex;
    flex-direction: row;
    height:75px;
}
.blocLinkToForm p{
    border:solid 5px #681c4d;
    height:75px;
    padding:5px;
}
.blocLinkToForm .sbmt{
    height:75px;
    width:75px;
    border:none;
    background:none;
    border:solid 1px #681c4d;
    background-color: #681c4d;
}*/
.sbmt{
    width:90%;
    background-color:#90b850;
    border:none;
    color:white;
    background-image:url(images/arrowgt.png);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 60px 60px;
    height:75px;
    border:none;
    padding:5px;
    padding-left:60px;
    padding-right:5px;
    white-space: normal;
    word-wrap:break-word;
    cursor:pointer;
    font-weight:bold;
    transition: all 0.3s ease-out;
    
}
.sbmt:hover{
    background-color:#627f37;
    background-position: center right;
    padding-right:60px;
    padding-left:5px;
    transition: all 0.3s ease-out;
}
.colLeft{
    text-align:right;
}
.colRight{
    text-align:left;
}

#content table td{
    height:1.5rem;
}
#content form{
    font-size:1.2rem;
}
#valid_btn_form{
    border:none;
    background: none;
    background-color: #90b850;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color:white;
    font-size:1.5em;
    font-weight:bold;
    padding-right:1rem;
    padding-left:1rem;
    padding-top:0.2rem;
    padding-bottom:0.2rem;
    float:right;
    margin-top:10px;
    cursor:pointer;
}
#valid_btn_form:hover{
    background-color: #627f37;
}

#mag-select{
    cursor:pointer;
    font-size:1.2rem;
    display:block;
    margin-top:0.7rem;
    margin-bottom:0.7rem;
    margin-left:auto;
    margin-right:auto;
}