html {
    /* overflow: hidden; */
    overscroll-behavior: none;
    overscroll-behavior-y: contain;
}
body{
    overscroll-behavior-y: contain;
}
.bgprimary {background: #F06303;}
.bgterciary {background: #fcb900;}


.btn-primary {background: #F06303; border: 1px solid #F06303;}
.btn-success {background: #1DB24F; border: 1px solid #1DB24F;}
.btn-info {background: #1e90ff; border: 1px solid #1e90ff; color:#FFFFFF;}
.btn-light {background-color: transparent; border: 0; font-size: .9rem;}

.form-control{background-color: #F0F0F0 !important;}
.form-check-input{background-color: #E4E4E4;border-color: #ccc;}

select.form-control {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC'); background-repeat: no-repeat; background-position: 99% center;}

.loader {position: fixed; z-index: 10000; background-color: rgba(0,0,0,.5); top: 0; left: 0; right: 0; bottom: 0; display: none;}
    .loader i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 3rem;}

body {margin: 80px 0;}
    #login {margin: 0; background: url(/assets/images/bg.jpg) top center no-repeat; background-size: cover; height: 100vh;}
    #login #topbar {display: none;}

#topbar {position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 50px; padding: 20px 40px; background: #F06303; display: flex; align-items:center; color: white; justify-content: space-between;}
    #topbar .logo {color: white; font-weight: bold; text-align: center;}
    #topbar .submenu {color: white;}
    #topbar .submenu.dropdown-toggle::after {display: none;}
    
    #topbar .topbar-left {display: flex; align-items: center;}
        #topbar .btn_retour.btn-light {font-size: 1rem; background-color: white; margin-right: 2rem;}
    #topbar .topbar-right {}
    
    #bottombar {position: fixed; z-index: 100; bottom: 0; left: 0; right: 0; height: 60px; padding: 20px; background: #f5f5f5; border-top: 1px solid #ccc; display: flex; align-items:center; color: black; justify-content: center;}
    #bottombar a {color: black; display: block; text-align: center; margin: 0 20px; text-decoration: none;}
    #bottombar a.current {color: #F06303;}
    
.loginContent {margin: auto; width: 80%; max-width: 450px; padding-top: 100px; text-align: center;}
    .loginContent .logo {color: white; font-weight: bold; text-align: center; font-size: 2rem; margin: 0 0 50px 0;}

main {padding: 0 40px; }

.sign {display: flex; justify-content: space-between;}
    .sign #signature {margin-right: 1rem;}
    .sign #signature2 {margin-right: 1rem;}

#signature.border {border: 1px solid #dee2e6; border-radius: 0.375rem;}
#signature2.border {border: 1px solid #dee2e6; border-radius: 0.375rem;}
.select2-container .select2-selection--single {height: 40px;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 40px;}
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 38px;}

.documents .list-group-item {display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
    .documents .card-header {font-weight: bold;}
    .documents .list-group-item a {display: block; }

.btn-parcoursjeune {text-align: center; margin: 20px auto; display: block; max-width: 250px;}
.btn-sendform {text-align: center; margin: 20px auto; display: block; width: 250px;}

.dec {display: flex; flex-wrap: nowrap; justify-content: space-between; border-bottom: 1px solid #ccc; padding-bottom: 1rem; margin-bottom: 1rem;}
    .dec .dec-col2 img {display: block;}

main.emargement .card-header {font-weight: bold;}
main.emargement h1 {text-align: center; margin-bottom: 30px;}
main.emargement h2 {text-align: center; margin-bottom: 30px;}
main.emargement h3 {text-align: center; margin-bottom: 30px;}
main.emargement canvas {border: 1px solid #dee2e6; border-radius: 0.375rem;  }
.liste-emargement .btn {width: 150px;}
main.emargement .sign {display: flex; justify-content: start;}
    main.emargement .sign canvas {margin-right: 10px;}

.btnEmargement {display: block; margin: 0 0 5px 0; width: 170px;}

main.jeune h1 {text-align: center; margin-bottom: 30px;}
main.jeune h2 {margin: 20px 0 10px 0; font-size: 1.4rem;}
main.jeune h3 {margin: 20px 0 10px 0; font-size: 1.2rem;}

.signature {position: relative; width:360px; height: 180px; background-color: #F0F0F0;}
    .signature .efface {position: absolute; background-color: #999; right: 0; top: 0; border-radius: 0 4px 0 0; width: 25px; height: 25px; text-align: center; color: white;}
    .signature canvas {position: absolute; left: 0; top: 0; width:360px; height:180px;} 
.signature.middle {position: relative; width: 300px; height: 150px}
    .signature.middle canvas {width: 300px; height: 150px;} 
.signature.large {position: relative; width: 100%; height: 150px}
    .signature.large canvas {width: 100%; height: 150px;} 
.signature.fse {position: relative; width: 200px; height: 100px}
    .signature.fse canvas {width: 200px; height: 100px;} 

.signanimateur {position: relative; width:400px; height: 200px; background-color: #F0F0F0;}
.signanimateur .efface {position: absolute; background-color: #999; right: 0; top: 0; border-radius: 0 4px 0 0; width: 25px; height: 25px; text-align: center; color: white;}
.signanimateur canvas {position: absolute; left: 0; top: 0; width:400px; height:200px;} 

.cacheSignature {display: none;}