@charset "utf-8";
/* CSS Document */

/**
 * Cette feuille de style gère l'apparence des formulaires.
 */

/*
 * HEXA COLORS
    Gris TF : 646665
    Gris : C9C9C9
    Gris clair : EEE8E6
    
    Bleu foncé : 0C78A3
    Bleu TF : 00B6DC
    Bleu : 0099D4
    Bleu clair : 80CCE9
    Bleu pale : D9F4FA 
    
    Jaune : FFF500
*/

/*
==================================================
    Table of Contents / Sommaire
==================================================
    #Mobile (Portrait)    // 320px
    #Mobile (Landscape)    // 576px
    #Tablet (Portrait)    // 768px
    #Tablet (Landscape)    // 992px
    #Computer            // 1200px+ > 1250 + scrollbar 
*/

/*
==================================================
    Mobile (Portrait)    // 320px
==================================================
*/
fieldset {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    /*margin-right: -15px;
    margin-left: -15px;*/
}
.mandatory {
    margin: 1rem 0;
    color:red;
}

input[type=checkbox] {
    margin-right: 10px;
}

input[type=file] {
    width: 100%;
}

input[type=submit] {
    border: 0;
    background:var(--color-main);
    color:#FFF;
    height:4rem;
    font-size: 21px;
    font-size:1.313rem;
    margin-top:15px;
    width: 100%;
    border-radius:var(--radius-lg)
}

.error {
    color:red;
    font-size: .813rem;
}

/* input file */
.custom-file-label {
    right: 15px;
    left: 15px;
    font-size: .813rem;
}

/* Infos Bulles */
.dtooltip .tip {
    width:100%;
    float:left;
    overflow:hidden;
    height:0;
    color:#777;
    font-size:13px;
    font-size:.813rem;
}

.dtooltip .tip.ON {
    height:auto;
    margin-bottom:.5em;
}

.dtooltip > i {
    display: block;
    position: absolute;
    z-index:10;
    color: #CCC;
    font-size: 21px;
    font-size: 1.313rem;
    right: 0;
    top: 0;
    cursor: pointer;
}



.dtooltip .tip strong {
    font-weight:800;
}

.dtooltip .tip .title {
    display:inline;
    font-weight:800;
    margin-right:.3rem;
}

/*Input fichier*/
.custom-file{
    height: auto;
}

.custom-file .dtooltip > i {
    right: 100px;
    top: 7px;
}

.custom-file .dtooltip .tip.ON {
    margin-top: 35px;
}


/*
==================================================
    Mobile (Landscape)    // 576px
==================================================
*/
@media screen and (min-width: 576px) {

}/*/mediaquery*/



/*
==================================================
    Tablet (Portrait)    // 768px
==================================================
*/
@media screen and (min-width: 768px) {

form div.submit {
    margin-left: auto;
    margin-right: auto;
}

.dtooltip > i {
    top:.5rem;
}

.dtooltip .tip {
    overflow:inherit;
    height:auto;
    width:auto;
    color:#000;
    background:#FEFEFE;
    display:block;
    padding:7px;
    position:absolute;
    right:0;
    border:1px solid #DDD;
    text-align:left;
    z-index:-1;
    opacity:0;
    top:42px;
    transition:all .3s ease;
}

.dtooltip:hover .tip {
    opacity:1;
    top:37px;
    z-index:11;
}

.dtooltip .tip:before {
    content:"";
    border-bottom:10px solid #DDD;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    position:absolute;
    right:-1px;
    top:-10px;
}

.dtooltip .tip .title {
    display:block;
}

/*Input fichier*/
.custom-file .dtooltip .tip,
.custom-file .dtooltip .tip.ON {
    margin-top: 0;
    right: 100px;
}

.custom-file .dtooltip:hover .tip {
    right: 100px;
}


}/*/mediaquery*/




/*
==================================================
    Tablet (Landscape)    // 992px
==================================================
*/
@media screen and (min-width: 992px) {



/**/
input[type=submit] {
    transition:     all .3s ease;
}

input[type=submit]:hover {
    background:#1B8ACE;
    color:#FFF;    
}

}/*/mediaquery*/


/*
==================================================
    #Computer            // 1200px+ > 1250 + scrollbar 
==================================================
*/
@media screen and (min-width: 1200px) {

/* Infos Bulles */
.dtooltip {
    margin-right:3%;
}

}/*/mediaquery*/