@font-face {
    font-family: 'poppinssemibold';
    src: url('/skin/default/fonts/poppins/poppins-semibold-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/poppins/poppins-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinssemibold_italic';
    src: url('/skin/default/fonts/poppins/poppins-semibolditalic-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/poppins/poppins-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinsbold';
    src: url('/skin/default/fonts/poppins/poppins-bold-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/poppins/poppins-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinsbold_italic';
    src: url('/skin/default/fonts/poppins/poppins-bolditalic-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/poppins/poppins-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinsitalic';
    src: url('/skin/default/fonts/poppins/poppins-italic-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/poppins/poppins-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinsregular';
    src: url('/skin/default/fonts/poppins/poppins-regular-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/poppins/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'simonettablack';
    src: url('/skin/default/fonts/simonetta/simonetta-black-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/simonetta/simonetta-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'simonettablack_italic';
    src: url('/skin/default/fonts/simonetta/simonetta-blackitalic-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/simonetta/simonetta-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'simonettaitalic';
    src: url('/skin/default/fonts/simonetta/simonetta-italic-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/simonetta/simonetta-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'simonettaregular';
    src: url('/skin/default/fonts/simonetta/simonetta-regular-webfont.woff2') format('woff2'),
         url('/skin/default/fonts/simonetta/simonetta-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{font-family: "poppinsregular"; font-size: 16px; color: #222222;}

h1{font-size: 1.5em; font-family: "simonettablack"; color: #de2c31;}
h2{font-size: 1.25em; font-family: "simonettablack"; color: #de2c31; margin-bottom:2em;}
h3{font-size: 1.05em; font-family: "simonettablack"; color: #de2c31;}

a:hover{color: #f58184;}
.button:focus, .button:hover{background-color: #de2c31;}
.ok{color: green;}
.ko{color: #de2c31;}
.wait{color: orange;}
.actif{cursor: pointer;}
.mini{font-size: 0.65em; vertical-align: super; display: inline-block; height: 1em; position: relative; top: 0.25em;}
#legende{font-size: 0.85em; margin: 10px 0px;}
#legende span{margin-right: 20px;}

.pagination a, .pagination button{display: inline-block;}
#blocPagination{font-size: 0.8em; border: solid 1px #f8f8f8; padding: 10px; margin: 10px 0px; vertical-align: middle; align-items: center;}
#blocPagination input, #blocPagination select{font-size: 1em}

/*** Login page ***/
body#home{
	background: url("/skin/default/image/montagne.jpg") no-repeat;
	background-position: center;
	background-size: cover;
	min-height: 1024px;
}
body#home #loginForm{margin-top: 5%;}
body#home #loginForm #blocForm{background-color: white; padding: 20px; border-radius: 20px;}
body#home #loginForm #blocForm h1{display: inline-block; margin-top: 25px; margin-right: 20px; color: #de2c31; float: right; }
body#home #loginForm #blocForm img{margin-bottom: 20px;}
body#home #loginForm #blocForm form{padding: 20px; border-top: solid 1px #de2c31; clear: both;}
body#home #loginForm #blocForm form input[type="text"]{max-width: 500px;}
body#home #loginForm #blocForm form input[type="password"]{max-width: 500px;}

header{background-color: #b2c4f7;}
header a {color: white;}
header .dropdown.menu>li.is-dropdown-submenu-parent>a::after{border-color: white transparent transparent;}
header a:hover,  header .dropdown.menu>li.is-active>a {color: #f58184;}
header div.top-bar, header div.top-bar ul{background-color: #044f94;}
header .menu li{white-space: nowrap;}
header .menu li.menu-text{color:white; font-family: "simonettablack"; font-size: 1.15em; }

header span.collaborateur{background-color: #de2c31; color: white; padding: 15px; margin-top: 10px; display: inline-block; border-radius: 20px;}

#main{margin-top: 30px;margin-bottom: 30px;}
#main form{padding: 20px 10px; border: solid 1px #B2C4F7; clear: both;}
#main form dl{display: flex; flex-wrap: wrap;}
#main form dl dt{width:14%; text-align: right; margin-right: 1%; font-family: "poppinssemibold";}
#main form dl dd{width:34%; margin-right: 1%;}
#main form label.required:after{content:" * ";color: #de2c31;}
#main form ul.errors{color: #de2c31;font-size:0.9em; font-family: "poppinssemibold";}
#main form p.description{color: #888888; font-size: 0.75em; position: relative; top: -1rem; text-align: left;}

#main form#sejour #act_id-element, #main form#disponibilite #act_id-element, #main form#reservation #act_id-element{width: 82%; display: flex; flex-wrap: wrap;}
#main form#reservation #part_sexe-element{display: flex; flex-wrap: wrap;}
#main form#sejour #act_id-element br, #main form#disponibilite #act_id-element br, #main form#reservation #act_id-element br, #main form#reservation #part_sexe-element br{display: none;}
#main form#sejour #act_id-element label, #main form#disponibilite #act_id-element label, #main form#reservation #act_id-element label, #main form#reservation #part_sexe-element label{width:24%;}
#main form#sejour #act_id-element ul.errors, #main form#disponibilite #act_id-element ul.errors, #main form#reservation #act_id-element ul.errors, #main form#reservation #part_sexe-element ul.errors{width:100%;}

#main form#reservation{border: none;}
#main form#reservation dl{display: block; flex-wrap: unset;}
#main form#reservation dl #contentSejour, #main form#reservation dl #contentParticipant, #main form#reservation dl #contentPrix{width: 100%; margin-bottom: 20px;}
#main form#reservation dl #contentSejour fieldset, #main form#reservation dl #contentParticipant fieldset, #main form#reservation dl #contentPrix fieldset{width: 100%; display: flex; flex-wrap: wrap; padding: 20px 10px; border: solid 1px #B2C4F7;}
#main form#reservation dl #contentSejour fieldset legend, #main form#reservation dl #contentParticipant fieldset legend, #main form#reservation dl #contentPrix fieldset legend{font-family: "simonettablack"; color: #de2c31; font-size: 1.15em; padding: 0px 20px;}
#main form#reservation #res_arrivee_dimanche-label,
#main form#reservation #res_dossier_sanitaire-label,
#main form#reservation #res_droit_photo-label,
#main form#reservation #res_autorisation_sortie-label,
#main form#reservation #res_css-label,
#main form#reservation #res_mutuelle-label,
#main form#reservation #res_pass_nautique-label,
#main form#reservation #res_liste_attente-label,
#main form#reservation #res_desistement-label{width: unset;}
#main form#reservation #res_arrivee_dimanche-element,
#main form#reservation #res_dossier_sanitaire-element,
#main form#reservation #res_droit_photo-element,
#main form#reservation #res_autorisation_sortie-element,
#main form#reservation #res_css-element,
#main form#reservation #res_mutuelle-element,
#main form#reservation #res_pass_nautique-element,
#main form#reservation #res_liste_attente-element,
#main form#reservation #res_desistement-element{width: 1%;}
#main form#reservation #spacer2-element{width:10%;}
#main form#reservation #spacer4-element{width:48%;}
#main form#reservation #res_notes_suivi-element, #main form#reservation #part_observations-element{width: 74%;}
#main form#reservation .duplicate, #main form#reservation .deletepaiement{color: #1779ba; cursor: pointer;}
#main form#reservation .duplicate:hover, #main form#reservation .deletepaiement:hover{color: #f58184;}
#main form#reservation #btnSubmit-element{width: 60%;}

#main #btnNvResa{background-color: #de2c31; color: white; padding: 15px; margin-top: 10px; display: inline-block; border-radius: 20px; transition: 1s;}
#main #btnNvResa:hover{background-color: #f58184; transition: 1s;}


#main form#reservation #res_validee-label, #main form#reservation #res_validee-element{display: inline-block;}

#main #res_age_sejour{color: green; font-weight: bold;}
#main #res_age_sejour.ageKO{color: red;}

#main .saisieprix{width:95%; float: left;}
#main form#reservation dl #contentPrix p.description{float: left; top: 0; line-height: 40px; margin-left:5px;}
#main form#reservation .total{background-color: #b2c4f7;}
#main form#reservation #supplements-element, #main form#reservation #aides-element, #main form#reservation #paiements-element{width:100%; padding: 10px; background-color: #f9f9f9; margin-bottom: 20px;}
#main form#reservation .saisiemontant{line-height: 39px;}
#main form#reservation .montantaide, #main form#reservation .totalaide, #main form#reservation .montantpaie{width: 85%; float:left; margin-right: 10px;}
#main form#reservation #choixsemaine{width: 100%; display: flex; justify-content: left;}
#main form#reservation #choixsemaine div{margin-right:20px;}

#main form#reservationsearch dl dt, #main form#reservationsearch dl dd{width: unset;}

#main #visualiseResa fieldset{width: 100%; padding: 20px 10px; border: solid 1px #B2C4F7;}
#main #visualiseResa fieldset legend{font-family: "simonettablack"; color: #de2c31; font-size: 1.15em; padding: 0px 20px;}
#main #visualiseResa p span{display: inline-block; margin-right:40px;}

#main #ReservationList .numfacture{font-size: 0.85em; font-weight: bold;}

#main .listeDispo i{margin-left:20px;}
#main .listeDispo tr.libre td.dates{color: green; font-weight: bold;}
#main .listeDispo tr.complet td.dates{color: #de2c31; /*font-weight: bold;*/}

#main form#accesdirect {border: none; padding: 10px;}

#main form#participant #part_sexe-element{display: flex; flex-wrap: wrap;}
#main form#participant #part_sexe-element br{display: none;}
#main form#participant #part_sexe-element label{width:24%;}
#main form#participant #part_sexe-element ul.errors{width:100%;}
#main form#participant #part_parents-element, #main form#participant #part_observations-element{width: 82%; }

#main form#participantsearch{padding-bottom: 0px;}
#main form#participantsearch dl{margin-bottom: 0px;}
#main form#participantsearch dl dt, #main form#participantsearch dl dd{width: unset;}

#main form#export{border: none;}
#main form#export #champs-element{width: 82%;}
#main form#export #ori_id-element{width: 82%;}
#main form#export #ori_id{width: 41.5%;}
#main form#export #champs-element .ms-container{width: 100%;}
#main form#export #champs-element .ms-container .ms-list{height: 500px;}
#main form#export #btnExport{margin-top: 15px;}

#main #planningActivites h3{margin-top:50px;}
#main #planningActivites table tbody tr td{text-align: center;}