/* CSS Document */
/* On écrase le style par défaut */
.inline-wrapper {
    padding-left: 10px;
    padding-right: 0;
}

.gras {
    font-weight: bold;
}

.inline-background {
    background-color: #f2f2f2;
}

.navbar-toggle {
    padding: 7px 10px;
}

.nopadding {
    padding-left: 0;
    padding-right: 0;
}

.vert-fonce {
    color: #0d6214;
}

.titre-vert-fonce {
    color: #0d6214;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.violet {
    color: #b72084;
}

.jaune {
    color: #f9eb25;
}

.blanc {
    color: #ffffff;
}

.rouge {
    color: #d42a2a;
}

.rouge-alert {
    color: #d42a2a;
    font-weight: bold;
}

.show {
    display: block !important;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.pagination > li > a, .pagination > li > span {
    color: #232323;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #0d6214 !important;
    outline: 0;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    color: white !important;
    background-color: #0d6214 !important;
    border-color: #0d6214 !important;
}

.btn-primary {
    background-color: #0d6214;
    min-width: 150px;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100% !important;
}

/** fix height select dans form group **/
.form-group > div[class*="col-"],
.form-group .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn),
.form-group .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) .btn.dropdown-toggle.btn-default {
    height: 100%;
}

.form-horizontal > .form-group {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 7px;
}

.bouton-vert {
    border: 1px solid #0d6214 !important;
    background-color: #0d6214 !important;
    min-width: 150px !important;
    color: white !important;
    border-radius: 0 0 0 0 !important;
}

.bouton-vert-clair, .bouton-vert-clair:hover {
    border: 1px solid #77b800 !important;
    background-color: #77b800 !important;
    min-width: 150px !important;
    color: white !important;
    border-radius: 0 0 0 0 !important;
    font-weight: bold;
}

.bouton,
.bouton:hover {
    border: 1px solid #0d6214;
    background-color: #0d6214;
    min-width: 150px;
    color: white;
    border-radius: 0 0 0 0;
}

.bouton.jaune,
.bouton.jaune:hover {
    border: 1px solid #f9eb25;
    background-color: #f9eb25;
    color: black;
}

.btn-info {
    background-color: #0d6214;
    min-width: 150px;
}

.btn-info:hover {
    background-color: #0d6214;
    border: 1px solid #0d6214;
    min-width: 150px;
}

.btn-primary:hover {
    background-color: #0d6214;
    border: 1px solid #0d6214;
    min-width: 150px;
}

.btn {
    border-color: #0d6214;
    border-radius: 0;
    font-size: 12px;
}

.btn-default {
    color: #333;
}

#btnSearch,
#btnClear,
.fix-btn {
    display: inline-block;
    vertical-align: top;
}

.bandeauTop {
    display: flex;
    vertical-align: center;
    align-items: center;
    gap: 15px;
}

.bandeauTop span {
    margin-left: 10px;
}

.bandeauTop p {
    color: white;
    margin-bottom: -1px;
}

#bandeauTop {
    top: 0;
    width: 100%;
    background-color: #0d6214;
    height: 45px;
}

div#bandeauTop img {
    position: relative;
    top: -2px;
}

.menu-horizontal {
    height: 45px;
    background-color: #77b800;;
    border: none;
}

.navbar-inverse {
    background-color: #0d6214;
    border-color: #0d6214;
}

.menu-horizontal > .navbar {
    height: 45px;
    background-color: #77b800 !important;
    border: none;
}

.navbar-collapse {

    color: #0d6214;
    padding-left: 50px;
    background-color: #77b800 !important;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    background-color: transparent;
    color: white;
}

.navbar-default .navbar-nav > li > a {
    background-color: transparent;
    color: white;
}

.navbar .divider-vertical {
    height: 15px;
    margin: 14px 0;

    border-left: 1px solid #ffffff;
}

.navbar-inverse .divider-vertical {
    border-right-color: #0d6214;
    border-left-color: #111111;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #0d6214;
}

.navbar {
    min-height: 45px;
}

.navbar-top-stimdata {
    width: 50px;
    height: 45px;
    text-align: center;
    display: block;
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 15px;
}

.navbar-default .navbar-nav > .open > a {
    background-color: transparent;
    color: white;
}

.navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background-color: #0d6214;
    color: white;
}

/* Fin modification général du thème */
#blocErreur {
    border: 1px solid #0d6214;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    clear: both;
}

#blocOk {
    border: 1px solid #0d6214;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    clear: both;
}

.gris-clair {
    color: #8e8e8e;
}

.souligne {
    text-decoration: underline !important;
}

.gris-fonce {
    color: #585858;
}

.gris {
    color: #232323;
}

.gris:hover {
    color: #232323;
}

.vert-fonce {
    color: #0d6214;
}


.vert {
    color: #77b800 !important;
}

.table-stim th {
    color: white;
    background-color: #0d6214 !important;
}

.grand-titre {
    background-color: #0d6214;
    color: white;
    height: 45px;
    line-height: 45px;
    font-size: 25px;
    text-align: center;
    margin-bottom: 15px;
}

.grand-titre-fonce {
    background-color: #4f2357;
    color: white;
    height: 45px;
    line-height: 45px;
    font-size: 25px;
    text-align: center;
}

.edit-nom-image {
    font-size: 10px;
    cursor: pointer;
}

.box {
    border-color: #2081c9;
    background-color: #eee;
    color: #2081c9;
    height: 80px;
    text-align: center;
    line-height: 80px;
}

.bordered {
    border: 1px solid inherit;
}

.dotted {
    border-style: dashed;
}

.dotted {
    border-style: dotted;
}

.top {
    border: none;
    border-top: 1px solid #000;
}

.left {
    border: none;
    border-left: 1px solid #000;
}

.right {
    border: none;
    border-right: 1px solid #000;
}

.bottom {
    border: none;
    border-bottom: 1px solid #000;
}

h2 {
    color: #2081c9;
    text-align: center;
}

.cadre {
    border-radius: 2px;
    background: white;
    padding: 5px;
    border: 2px solid #eeeeee;
}

div#popupLogin {
    color: #232323;
    text-align: center;
}

/* FORM CONTROL */

.form-control[readonly] {
    cursor: not-allowed;
    background-color: #eee;
    border: none;
}

/* Souligne */
.underline {
    border-bottom: 1px dotted #0d6214;
    width: 100%;
    display: block;
    font-size: 14px;
}

/* Bloc evnement */
.bloc-liste-event {
    border: 2px solid #77b800;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.choix-reglement {
    height: 210px;
}

#container-programme {
    display: flex;
    justify-content: space-between;
}

.bloc-lien-programme {
    height: 35px;
    color: white;
    background-color: #77b800;
    line-height: 35px;
    text-align: center;
    border: 2px solid #77b800;
}

#container-programme .bloc-lien-programme {
    line-height: 1;
    min-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 1px;
}

.bloc-lien-programme-active, .bloc-lien-programme:hover {
    background-color: white;
    color: #77b800;
}

.img-cb {
    width: 100%;
}

.checkbox-container-bdc {
    clear: both;
}

.export-avoir-container,
.export-commandes-container {
    clear: both;
    text-align: right;
    text-transform: uppercase;
}

.container-inscription .titre-vert-fonce {
    margin-top: 40px;
}

.display-form-important {
    margin-bottom: 10px;
}

.display-form-important p {
    color: red;
    margin-bottom: 0;
}

.display-form-close {
    margin-bottom: 10px;
}

.display-form-close p {
    margin-bottom: 0;
}

.form-select-libelle {
    padding-left:20px;
}

.form-select-container {
    margin-top: 10px;
    height: 30px;
}

.form-select-container .selectpicker {
    padding-left: 15px;
    height: 25px;
}

.form-checkbox-container .checkbox {
    padding-left:30px;
}

.form-checkbox-container input[type=radio] {
    top: 5px;
}

.form-horizontal-inscription {
    margin-left: 40px;
}

.form-horizontal-inscription label.control-label {
    text-align: left;
    padding-left: 0;
    color: #7f7f7f;
    font-weight: 300;
    margin-top: 8px;
}

.form-horizontal-inscription h4 {
    font-size: 15px;
}

.form-horizontal.form-horizontal-inscription .form-group {
    margin-left: 28px;
    margin-bottom: 12px;
}

.form-price-container {
    /*display: inline-block;*/
    /*position: relative;*/
    top: 4px;
    width: 60px;
    height: 24px;
    padding: 2px 5px;
    vertical-align: middle;
    line-height: 20px;
    text-align: right;
    background-color: #f2f2f2;
}

.sous-total{
    padding: 0.5%;
}

.sous-total .fix-total {
    float: right;
    width: calc(100% - 144px);
}

.form-option-date-title {
    margin-top: 30px;
}

.option-prix-div,
.option-prix-div .form-price-container {
    display: inline-block;
}

.option-prix-div {
    margin-left: 37px;
}

.form-horizontal.form-horizontal-inscription .form-group.sous-total {
    margin-top: 20px;
    margin-left: 218px;
}

.sous-total > div + div {
    padding-left: 9px;
}

.sous-total h5 {
    text-transform: uppercase;
    color: #0d6214;
    font-weight: bold;
    margin-top: 0;
}

.separator-options {
    display: block;
    height: 2px;
    background-color: #f2f2f2;
    margin: 10px 0;
}

.form-horizontal-inscription label.control-label.option-label {
    color: black;
    font-weight: 500;
    float: left;
}

.form-horizontal-inscription .option-input-div {
    float: right;
    width: calc(100% - 190px);
}

.form-radio-container {
    clear: both;
}

.bloc-option {
    width: 470px;
    margin-top: 10px;
    padding-bottom: 3px;
    background-color: #C7EDD8;
    margin-left: 20px;
}

.form-horizontal.form-horizontal-inscription .bloc-option .form-group {
    margin-left: 8px;
}

.input-code,
.input-code-option {
    width: 150px;
}

.btn-promo {
    display: inline-block;
    padding: 1px 6px;
    height: 23px;
    margin: 0;
}

.btn-promo,
.btn-promo:hover,
.btn-promo:active
{
    min-width: 0;
}

.code-invitation-container,
.code-option-container {
    margin-top: 10px;
    text-align: left;
}

.titre-evenement {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.details-evenement {
    margin-top: 10px;
    line-height: 1.6;
}

#codeAcces {
    width: 175px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7px;
}

.confirm-modal-code.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons,
.confirm-modal-code.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons {
    float: none;
    text-align: center;
}

.confirm-modal-code.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
.confirm-modal-code.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
    color: #fff;
    background-color: #0d6214;
    border: 2px solid #0d6214;
    border-radius: 0;
    padding: 3px 16px;
}

.confirm-modal-code.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-medium,
.confirm-modal-code.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-medium {
    width: 135px;
}

.confirm-modal-code.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button:hover,
.confirm-modal-code.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
    background-color: #0d6214;
    border: 2px solid #0d6214;
    color: #fff;
}

.confirm-modal-code.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default,
.confirm-modal-code.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default {
    color: #fff;
    font-weight: normal;
}

.confirm-modal-code.jconfirm.jconfirm-white .jconfirm-box,
.confirm-modal-code.jconfirm.jconfirm-light .jconfirm-box {
    border-radius: 0;
}

.confirm-modal-code.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default:hover,
.confirm-modal-code.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default:hover {
    background: #0d6214;
    color: #fff;
}

/* Style CSS pour faciliter l'accessibilité */
.container-accessible,
.container-accessible h5,
.container-accessible h4,
.container-accessible h3,
.container-accessible h2,
.container-accessible .btn,
.container-accessible .control-label ,
.container-accessible .form-control {
    font-size: 18px;
}

.container-accessible .bootstrap-select .btn {
    padding: 1px 25px 1px 6px;
}

.container-accessible .form-option-date-title {
    margin-top: 35px;
}

.container-accessible .btn-promo {
    display: inline-block;
    padding: 1px 6px;
    height: 31px;
    margin: 0;
    top: 0;
    position: absolute;
}

.container-accessible .titre-vert-fonce {
    margin-top: 35px;
    margin-bottom: 15px;
}

/* Fin accessibilité */

.profil-select-picker {
    height: 25px;
}

.container-unapei {
    margin-top:60px;
    padding-left:0;
}

.grand-titre-container {
    margin-left:10px;
    margin-right:10px;
}

.grand-titre-container .icon {
    color:white;
    top:-3px;
}

.grand-titre-texte {
    padding-left:10px;
}

/* remove hardcoded css style in html by class */
.btn-width-fix {
    width: 170px;
}

.fix-margin-top-zero {
    margin-top: 0;
}

.fix-margin-top-15 {
    margin-top:15px;
}


.fix-margin-top-20 {
    margin-top:20px;
}

.fix-margin-top-30 {
    margin-top:30px;
}

.fix-col-padding-margin-top {
    padding:0;
    margin-top:0;
}

.fix-margin-top-5 {
    margin-top:5px;
}

.btn-width-padding-fix {
    width: 170px;
    padding: 6px 4px;
}

.bo-dropdown-menu {
    min-width:250px;
}

.inline-block-btn {
    display: inline-block;
    vertical-align: middle;
}


/** FLASHBAG **/
.flashbag-container {
    position: fixed;
    z-index: 1030;
    left: 50%;
    transform: translateX(-50%);
}

.flashbag-container .alert {
    border-radius: 0;
}

.titre-comment-venir {
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: underline;
    margin-top: 0;
}

/* Tooltip text */
.tooltip-container .tooltiptext {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip-container .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-container:hover .tooltiptext,
.tooltip-container input:focus + .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* dans le formulaire de contact : pour cacher le champ aux humains */
.field-name, .field-remarque {
    position: fixed;
    top: -500px;
}

.g-recaptcha {
    display: inline-block;
}

/* CONFIRM MODAL */
.confirm-modal-unapei.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons,
.confirm-modal-unapei.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons {
    float: none;
    text-align: center;
    margin: 5px 0 10px 0;
}

.confirm-modal-unapei.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
.confirm-modal-unapei.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
    line-height: 1.2;
}

/** FLOATING LABELS **/
.form-group.float-label-control {
    position: relative;
    margin-bottom: 1.4em;
}

.float-label-control ::-webkit-input-placeholder {
    color: #aaaaaa;
}

.float-label-control :-moz-placeholder {
    color: #aaaaaa;
}

.float-label-control ::-moz-placeholder {
    color: #aaaaaa;
}

.float-label-control :-ms-input-placeholder {
    color: #aaaaaa;
}

.float-label-control label {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.float-label-control textarea:focus {
    padding-bottom: 4px;
}

.float-label-control input, .float-label-control textarea {
    display: block;
    width: 100%;
    outline: none;
    margin: 0;
    background: none;
}

.float-label-control textarea {
    padding: 0.1em 0 5px 0;
}

.float-label-control label {
    position: absolute;
    font-weight: normal;
    top: -1.2em;
    left: 1em;
    color: #aaaaaa;
    z-index: -1;
    font-size: 0.85em;
    -moz-animation: float-labels 300ms none ease-out;
    -webkit-animation: float-labels 300ms none ease-out;
    -o-animation: float-labels 300ms none ease-out;
    -ms-animation: float-labels 300ms none ease-out;
    -khtml-animation: float-labels 300ms none ease-out;
    animation: float-labels 300ms none ease-out; /* There is a bug sometimes pausing the animation. This avoids that.*/
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
}

.float-label-control input.empty + label,
.float-label-control textarea.empty + label {
    display: none;
    top: 0.1em;
    font-size: 0.85em;
    animation: none;
    -webkit-animation: none;
}

.float-label-control input:not(.empty) + label,
.float-label-control textarea:not(.empty) + label {
    z-index: 1;
}

.float-label-control input:not(.empty):focus + label,
.float-label-control textarea:not(.empty):focus + label {
    color: #aaaaaa;
}

.float-label-control.label-bottom label {
    -moz-animation: float-labels-bottom 300ms none ease-out;
    -webkit-animation: float-labels-bottom 300ms none ease-out;
    -o-animation: float-labels-bottom 300ms none ease-out;
    -ms-animation: float-labels-bottom 300ms none ease-out;
    -khtml-animation: float-labels-bottom 300ms none ease-out;
    animation: float-labels-bottom 300ms none ease-out;
}

.float-label-control.label-bottom input:not(.empty) + label,
.float-label-control.label-bottom textarea:not(.empty) + label {
    top: 3em;
}


@keyframes float-labels {
    0% {
        opacity: 1;
        color: #aaa;
        top: 0.5em;
        font-size: 12px;
    }
    20% {
        font-size: 0.85em;
        opacity: 0;
    }
    30% {
        top: 0.1em;
    }
    50% {
        opacity: 0;
        font-size: 0.85em;
    }
    100% {
        top: -1em;
        opacity: 1;
    }
}

@-webkit-keyframes float-labels {
    0% {
        opacity: 1;
        color: #aaa;
        top: 0.1em;
        font-size: 0.85em;
    }
    20% {
        font-size: 0.85em;
        opacity: 0;
    }
    30% {
        top: 0.1em;
    }
    50% {
        opacity: 0;
        font-size: 0.85em;
    }
    100% {
        top: -1em;
        opacity: 1;
    }
}

@keyframes float-labels-bottom {
    0% {
        opacity: 1;
        color: #aaa;
        top: 0.1em;
        font-size: 0.85em;
    }
    20% {
        font-size: 0.85em;
        opacity: 0;
    }
    30% {
        top: 0.1em;
    }
    50% {
        opacity: 0;
        font-size: 0.85em;
    }
    100% {
        top: 3em;
        opacity: 1;
    }
}

@-webkit-keyframes float-labels-bottom {
    0% {
        opacity: 1;
        color: #aaa;
        top: 0.1em;
        font-size: 1.5em;
    }
    20% {
        font-size: 1.5em;
        opacity: 0;
    }
    30% {
        top: 0.1em;
    }
    50% {
        opacity: 0;
        font-size: 0.85em;
    }
    100% {
        top: 3em;
        opacity: 1;
    }
}
/** FIN FLOATING LABELS **/

/** TOOLTIP **/
.tooltip {
    border-top: none;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #0d6214;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #0d6214;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #0d6214;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #0d6214;
}

.tooltip-inner
{
    background-color: #0d6214;
    height: auto;
    padding: 10px 8px 8px;
    border-radius:0;
}
/** FIN TOOLTIP **/

/** MEDIA QUERIES **/
@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .navbar-collapse .nav > .divider-vertical {
        display: none;
    }
}