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

/*
==================================================
    Table of Contents / Sommaire
==================================================
    // Extra small screen / phone           XS 0
    // Small screen / phone                 SM 576px
    // Medium screen / tablet               MD 768px
    // Large screen / desktop               LG 992px
    // Extra large screen / wide desktop    XL 1200px
    // Special Pixel Ratio
*/


/*
====================================================
    // Extra small screen / phone           XS 0
====================================================
*/

/**
 * FORM
 */
label {
    margin-bottom: .3rem;
    margin-top: .813rem;
}

form > div,
fieldset > div {
    position: relative;
    float: left;
    width: 100%;
}

/**
 * INFOS BULLES
 */
.dtooltip > i { 
    display:block;
    position: absolute;
    color: #CCC;
    font-size:21px;
    font-size: 1.313rem;
    right: 0;
    top: 1rem;
    cursor: pointer;
    z-index: 1000; /* Impportant pour colonnage formulaire */
}

.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 .tip .title {
    display:inline;
    font-weight:bold;
    margin-right:.3rem;
}

/**
 * MODULE MESSAGE
 */
 
.message,
.messageError,
.messageInfo,
.messageWarning {
    border-color: #DAE6E6;
    padding:1rem;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    /*white-space: nowrap;*/
    vertical-align: middle;
    display: block;
    min-width: 320px;
    max-width: 80%;
    text-align: center !important;
    font-size: 16px;
    font-size: 1rem;
    margin: 2rem auto;
    clear: both;
}

h1.login + .messageError,
h1.login + .messageInfo,
h1.login + .messageWarning  {
    width:320px;
    margin: .5rem auto 2rem;
}

.messageError {
    background:#F7F0F0;
    color: #D60F0F;
}

.messageInfo {
    background:#F6FFDC;
    color: #8FB713;
}

.messageWarning {
    background:#FCEEDE;
    color: #F48B19;
}

.message .h4,
.messageError .h4,
.messageInfo .h4,
.messageWarning .h4 {
	color: inherit;
}

.message a:link,
.message a:visited,
.messageError a:link,
.messageError a:visited,
.messageInfo a:link,
.messageInfo a:visited,
.messageWarning a:link,
.messageWarning a:visited {
    color: #000;
    text-decoration: underline;
}

/* Message with icon */
[class*="message"].iconLeft i,
[class*="message"].iconRight i  {
    display: block;
    float: left;
    width: 10vw;
    text-align: center;
    font-size:4vw;
    font-size:3vmin;
    font-size:4vmax;
    padding-bottom: 4vmax;
    margin: 0 1vmax;
}
    [class*="message"].iconRight i {
        float: right;
    }

    [class*="message"].iconLeft,
    [class*="message"].iconRight {
        text-align: left !important;
    }
    

[class*=message].iconTop i,
[class*=message].iconBottom i {
    display: block;
    text-align: center;
    font-size:4vw;
    font-size:3vmin;
    font-size:4vmax;
}

    [class*=message].iconBottom i {
        margin-top: 1rem;
    }

/*
====================================================
    // Small screen / phone                 SM 576px
====================================================
*/


@media (min-width: 576px) {


}/*@media*/

/*
====================================================
    // Medium screen / tablet               MD 768px
====================================================
*/

@media (min-width: 768px) {
    
    
    
}/*@media*/

/*
====================================================
    // Large screen / desktop               LG 992px
====================================================
*/

@media (min-width: 992px) {

/**
 * INFOS BULLES
 */
.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: 37px;
    
    transition: all .3s ease;
} 

    .dtooltip:hover .tip  {
        opacity: 1;
        top: 45px;
        z-index: 2;
    } 

.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;
}

.checkbox .dtooltip {
    float:left;
}
    
}/*@media*/

/*
====================================================
    // Extra large screen / wide desktop    XL 1200px
====================================================
*/

@media (min-width: 1200px) {

    
}/*@media*/

/*
====================================================
    // Special Pixel Ratio
====================================================
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    
}/*@media*/