#flexitModalOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background:#000; z-index: 10000000;
    filter:alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}
#flexitModal { position: fixed; left: 50%; top: 50%; margin: -130px 0 0 -200px; min-width: 400px;max-width: 600px; height: auto; background: #fff; z-index: 10000001; padding-bottom: 40px; color: #333333; }
#flexitModal h4 { border-bottom: 1px solid #d2d1d1; font-size: 1.8em; line-height: 1.2em; margin: 0 0 12px; padding: 0 0 12px; }
.flexitModalContent { padding: 20px 20px 40px; min-height: 120px; position: relative; }
/* Descritption */
.flexitModalDesc { padding: 0; }
.boite_msg #flexitModal .flexitModalContent { min-height: 0; }
.flexitModalDesc .ftemplate .groupe_check label {  display: inline-block; }
.flexitModalFooter { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 10px; font-size: 0.9em; text-align: right; border-top: 1px solid #d2d1d1; }

/* Boutons */
#flexitModal .flexitModalBtns { position: absolute; left: 20px; right: 20px; bottom: 0; }

.btnLeft { float: left; margin: 0 5px 0 0; }
.btnRight { float: right; margin: 0 0 0 5px; }

.btnNormal {
    margin: 0 5px 0 0;
    color: #656669; text-decoration: none; border: 1px solid #d2d1d1; padding: 5px 10px; cursor: pointer;
    /* box-shadow & border-radius & gradient */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 1px 0 #fff inset;
    -moz-box-shadow: 0 0 1px 0 #fff inset;
    box-shadow: 0 0 1px 0 #fff inset;
    background: -webkit-gradient(linear, center top, center bottom, color-stop(30%,#f9f9f9), color-stop(100%,#e1e2e2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(center top, #f9f9f9 0%, #e1e2e2 100%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(center top, #f9f9f9 30%, #e1e2e2 100%); /* FF3.6+ */
    background: -ms-linear-gradient(center top, #f9f9f9 30%, #e1e2e2 100%); /* IE10+ */
    background: -o-linear-gradient(center top, #f9f9f9 30%, #e1e2e2 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom, #f9f9f9 30%, #e1e2e2 100%); /* W3C */
    /* FIX IE CSS3 */
    -pie-background: linear-gradient(center top, #f9f9f9 30%, #e1e2e2 100%);
    behavior: url(/js/PIE.htc);
    position: relative !important;
}
.btnNormal:focus,
.btnNormal:hover { color: #272730; text-decoration: none; }

.btnImportant {
    margin: 0 5px 0 0;
    color: #fff; font-weight: bold; text-decoration: none; border: 1px solid transparent; padding: 5px 10px; cursor: pointer;
    /* box-shadow & border-radius & gradient */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 1px 0 #4e8100 inset;
    -moz-box-shadow: 0 0 1px 0 #4e8100 inset;
    box-shadow: 0 0 1px 0 #4e8100 inset;
    background: -webkit-gradient(linear, center top, center bottom, color-stop(30%,#a2d14e), color-stop(100%,#5fac00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(center top, #a2d14e 0%, #5fac00 100%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(center top, #a2d14e 30%, #5fac00 100%); /* FF3.6+ */
    background: -ms-linear-gradient(center top, #a2d14e 30%, #5fac00 100%); /* IE10+ */
    background: -o-linear-gradient(center top, #a2d14e 30%, #5fac00 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom, #a2d14e 30%, #5fac00 100%); /* W3C */
    /* FIX IE CSS3 */
    -pie-background: linear-gradient(center top, #a2d14e 30%, #5fac00 100%);
    behavior: url(/js/PIE.htc);
    position: relative !important;
}

.btnImportant:hover {
    /* gradient */
    background: -moz-linear-gradient(center top , #81c718 30%, #5fac00 100%);
    background: -webkit-gradient(linear, center top, center bottom, color-stop(30%,#81c718), color-stop(100%,#5fac00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(center top, #81c718 0%, #5fac00 100%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(center top, #81c718 30%, #5fac00 100%); /* FF3.6+ */
    background: -ms-linear-gradient(center top, #81c718 30%, #5fac00 100%); /* IE10+ */
    background: -o-linear-gradient(center top, #81c718 30%, #5fac00 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom, #81c718 30%, #5fac00 100%); /* W3C */
    /* FIX IE CSS3 */
    -pie-background: linear-gradient(center top, #81c718 30%, #5fac00 100%);
    behavior: url(/js/PIE.htc);
}

.btnImportant:focus,
.btnImportant:hover { color: #fff; text-decoration: none; }

.btnSecondaire {
    margin: 0 5px 0 0;
    color: #fff; font-weight: bold; text-decoration: none; border: 1px solid transparent; padding: 5px 10px; cursor: pointer;
    /* box-shadow & border-radius & gradient */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 1px 0 #323232 inset;
    -moz-box-shadow: 0 0 1px 0 #565656 inset;
    box-shadow: 0 0 1px 0 #343434 inset;
    background: #848484;
    position: relative !important;
}

.btnSecondaire:hover {
    /* gradient */
    background: #6e6e6e;
}

.btnSecondaire:focus,
.btnSecondaire:hover { color: #fff; text-decoration: none; }

.btnNormal:focus { border: 1px solid #508E00; }
.btnImportant:focus { border: 1px solid #3E6D00; }
.btnSecondaire:focus { border: 1px solid #3E6D00; }

.flexitModalCloseTop { position: absolute; right: 10px; top: 12px; width: 16px; height: 16px; z-index: 10; }
.flexitModalCloseTop:before, .flexitModalCloseTop:after { position: absolute; left: 6px; content: ''; height: 17px; width: 3px; background-color: #333; }
.flexitModalCloseTop:before { transform: rotate(45deg); }
.flexitModalCloseTop:after { transform: rotate(-45deg); }

/* Version simple sans titre ou version sans footer */
#flexitModal.flexitModalSimple, #flexitModal.flexitModalNoFooter { padding-bottom: 20px; }
#flexitModal.flexitModalSimple .flexitModalContent { min-height: 0; }

/* Version relative à un élément */
#flexitModalWrapper.flexitModalWrapperRelative #flexitModalOverlay { display: none; }
#flexitModal.flexitModalRelative { position: absolute; margin: 0; left: auto; top: auto; right: auto; transform: translate(0,0); -webkit-filter: drop-shadow(0 0 5px #bdbdbd); filter: drop-shadow(0 0 5px #bdbdbd); }
/* Hack IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #flexitModal.flexitModalRelative { box-shadow: 0px 0px 6px #bdbdbd; } }
#flexitModal.flexitModalRelative:after { content: ''; display: block; position: absolute; top: 50%; left: -10px; right: auto; margin-top: -20px; width: 0; height: 0; border-style: solid; border-width: 20px 10px 20px 0; border-color: transparent #fff transparent; }
#flexitModal.flexitModalRelative.flexitModalLeft:after { left: auto; right: -10px; border-width: 20px 0 20px 10px; border-color: transparent transparent transparent #fff; }
#flexitModal.flexitModalRelative.flexitModalTop { transform: none; }
#flexitModal.flexitModalRelative.flexitModalTop:after { left: 50%; right: auto; margin-left: -20px; top: auto; bottom: -10px; border-width: 10px 20px 0 20px; border-color: #fff transparent transparent; }

/* Des styles spécifiques pour les alertes de critères de la boutique */
.flexitModalCritAlert { font-size: 13px; text-align: left; }
.flexitModalCritAlert > span { display: block; padding-left: 10px; }
.flexitModalCritAlert > div:last-child { padding-top: 6px; }

/* Quand on a pas de boutons dans la modale */
#flexitModalWrapper.flexitModalWrapperNoButtons #flexitModal .flexitModalContent { padding-bottom: 20px; }
#flexitModalWrapper.flexitModalSmall.flexitModalWrapperNoButtons #flexitModal .flexitModalContent { padding-bottom: 10px; }

/* THEMES */
/* flexitModalSmall - Peut être combiné avec un autre thème */
#flexitModalWrapper.flexitModalSmall #flexitModal { width: 300px; }
#flexitModalWrapper.flexitModalSmall #flexitModal h4 { font-size: 1.4em; margin-bottom: 8px; padding-bottom: 8px; }
#flexitModalWrapper.flexitModalSmall #flexitModal .flexitModalContent { padding: 10px 10px 40px; }
#flexitModalWrapper.flexitModalSmall #flexitModal.flexitModalSimple, #flexitModalWrapper.flexitModalSmall #flexitModal.flexitModalNoFooter { padding-bottom: 10px; }
#flexitModalWrapper.flexitModalSmall #flexitModal .flexitModalBtns { left: 10px; right: 10px; }

/* flexitModalDark */
#flexitModalWrapper.flexitModalDark #flexitModal { background: #333; color: #fff; }
#flexitModalWrapper.flexitModalDark #flexitModal h4 { border-color: #818181; }

#flexitModalWrapper.flexitModalDark #flexitModal.flexitModalRelative:after { border-color: transparent #333 transparent; }
#flexitModalWrapper.flexitModalDark #flexitModal.flexitModalRelative.flexitModalLeft:after { border-color: transparent transparent transparent #333; }

#flexitModalWrapper.flexitModalDark .btnNormal {
    color: #fff; border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: #555;
    behavior: inherit;
}
#flexitModalWrapper.flexitModalDark .btnNormal:focus,
#flexitModalWrapper.flexitModalDark .btnNormal:hover { background: #666; }

#flexitModalWrapper.flexitModalDark .btnImportant {
    color: #000; border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: #cecece;
    behavior: inherit;
}
#flexitModalWrapper.flexitModalDark .btnImportant:focus,
#flexitModalWrapper.flexitModalDark .btnImportant:hover { background: #ffffff; }

/* Landscape phones and down */
@media (max-width: 480px) {
    #flexitModal h4 { font-size: 1.5em; font-weight: normal; }
    #flexitModal { width: 90%; margin-left: 0; left: 5%; padding-bottom: 12px; margin-top: -150px; min-width: 290px; }
    .flexitModalContent { padding-bottom: 120px; }
    .flexitModalDesc { margin: 0 0 0 4px; }
    #flexitModal .btnLeft,
    #flexitModal .btnRight { display: block; float: none; text-align: center; margin-bottom: 6px; }
    .flexitModalFooter { display: none; }

    #flexitModalWrapper.flexitModalSmall #flexitModal { width: 90%; }
}

@media (max-width: 767px) {
    #flexitModalWrapper.flexitModalWrapperRelative #flexitModalOverlay { display: block; }
    #flexitModal.flexitModalRelative { position: fixed; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; -webkit-filter: none; filter: none; }
    #flexitModal.flexitModalRelative:after { display: none; }
}