header { margin: 1rem 0rem; }
header .h-header { display: flex; align-items: center; border-bottom:10px #ffd25f solid; padding-bottom: 1rem; }
header .h-logo img { max-height: 5rem; }
header .h-title { margin-left: 2rem; font-weight: bold; font-size: 1.5rem; line-height: 1.5rem; }

html, body { height: 100%; min-height: 100%; }
body, main { position: relative; min-height: 50%; }

h1 { font-size: 1.2em; font-weight: bold; text-transform: uppercase; }

.mr-4 { margin-right: 15px; }

.btn-yellow { outline: none; border-radius: 0px; text-transform: uppercase;  padding: 2px 12px; border:2px #000 solid; background-color: #FFD25F; color: #000; font-size: 1.8em; }
.btn-yellow:hover { border:2px #FFD25F solid; background-color: #000; color:#FFD25F; }
.btn-grey { outline: none; border-radius: 0px; text-transform: uppercase;  padding: 2px 12px; border:2px #000 solid; background-color: #f1f1f1; color: #000; font-size: 1.8em; }
.btn-grey:hover { border:2px #f1f1f1 solid; background-color: #000; color:#f1f1f1; }
.btn-small { font-size: 0.9em; }
.logo-entreprise { float: right; max-width: 90px; }

#step-qrcode { padding:0px 15px; }
#qr-reader { width:50%; min-height:50px; aspect-ratio: 1 / 1;}
#step-signpad { position: relative; width:50%; min-height:100px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; border:2px #ccc solid; aspect-ratio: 1 / 1; }
#signature-pad { position: absolute; left: 0; top: 0; width:100%; min-height:100px; aspect-ratio: 1 / 1; }
table.infoSession { font-size: 0.8em; }
table.listSessions { font-size: 0.8em; }

.check-sign { float:right; }
.check-sign i { font-size: 3em; color: green; }

.card-session { background-color: #f1f1f1; text-align: center; }
.card-session .titre { font-size: 1.1em; line-height: 1em; }
.card-session .seance { margin-top:1em; }
.card-session .seance strong { background-color: #000; color: #fff; padding: 4px; }
.card-stagiaire .titre strong { font-size: 1.4em; }
.card-signStag { font-size: 1.2em; white-space: nowrap; font-weight: bold; padding: 0.5em; text-align: center; }
.bottomHome {  position: absolute; bottom: 0; right: 0; margin-right: 1em; color: #FFD25F; font-size: 2em; border: 1px solid #dfdfdf; padding: 0px 15px; }

#p-formateurStagiaires.s-signStagiaire .bottomHome { display:none; }

.togglebutton {
    vertical-align:middle
}
.togglebutton,
.togglebutton .toggle,
.togglebutton input,
.togglebutton label {
    user-select:none
}
.togglebutton label {
    cursor:pointer
}
.form-group.is-focused .togglebutton label,
.togglebutton label {
    color:rgba(0,0,0,1)
}
.form-group.is-focused .togglebutton label:focus,
.form-group.is-focused .togglebutton label:hover {
    color:rgba(0,0,0,.54)
}
fieldset[disabled] .form-group.is-focused .togglebutton label {
    color:rgba(0,0,0,.26)
}
.togglebutton label input[type=checkbox] {
    opacity:0;
    width:0;
    height:0
}
.togglebutton label .toggle {
    text-align:left;
    margin-left:5px
}
.togglebutton label .toggle,
.togglebutton label input[type=checkbox][disabled]+.toggle {
    content:"";
    display:inline-block;
    width:30px;
    height:15px;
    background-color:rgba(80,80,80,.7);
    border-radius:15px;
    margin-right:15px;
    transition:background .3s ease;
    vertical-align:middle
}
.togglebutton label .toggle:after {
    content:"";
    display:inline-block;
    width:20px;
    height:20px;
    background-color:#fff;
    border-radius:20px;
    position:relative;
    box-shadow:0 1px 3px 1px rgba(0,0,0,.4);
    left:-5px;
    top:-2.5px;
    border:1px solid rgba(0,0,0,.54);
    transition:left .3s ease,background .3s ease,box-shadow .1s ease
}
.togglebutton label input[type=checkbox][disabled]+.toggle:after,
.togglebutton label input[type=checkbox][disabled]:checked+.toggle:after {
    background-color:#bdbdbd
}
.togglebutton label input[type=checkbox]+.toggle:active:after,
.togglebutton label input[type=checkbox][disabled]+.toggle:active:after {
    box-shadow:0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(0,0,0,.1)
}
.togglebutton label input[type=checkbox]:checked+.toggle:after {
    left:15px
}
.togglebutton label input[type=checkbox]:checked+.toggle {
    background-color:#ffd25f
}
.togglebutton label input[type=checkbox]:checked+.toggle:after {
    border-color:#ffd25f
}
.togglebutton label input[type=checkbox]:checked+.toggle:active:after {
    box-shadow:0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(156,39,176,.1)
}