@charset "utf-8";
/* Texte de l'application */

/* ---------------------------------------------------------*/
/*Web fonts*/

/* ---------------------------------------------------------*/
body,
td,
th {
    font-size: var(--text-size-medium);
    line-height: calc(var(--text-size-medium) + 9px);
    color: #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --text-color-black: #000;
    --text-color-mediumblack: #222;
    --text-color-lightblack: #444444;
    --text-color-grey: #666;
    --text-color-mediumgrey: #999;
    --text-color-lightgrey: #ccc;
    --text-color-white: #fff;

    /*
	--text-color: #32aaa8;
	--text-color2: #f2bb38;
	--text-color3: #e52040;
	--text-color4: #0f74bb;

	--text-color5: #ff2525;
	--text-color6: #057bc9;
	--text-color7: #ecfd00;
	*/

    --text-primary-color1: #3157d4;
    --text-primary-color2: #ff9900;
    --text-primary-color2-rgb: 255, 153, 0;
    --text-primary-color3: #f9cd16;
    --text-primary-color4: #00d0b4;

    --text-secondary-color1: #2ac4fa;
    --text-secondary-color2: #ff9900;
    --text-secondary-color3: #00c54f;
    --text-secondary-color4: #a6ff00;

    --text-tertiary-color1: #243777;

    --text-primary-pal-color1: #4565d2;

    --text-quad-color1: #316bf2;

    --text-extra-color1: #ff0000;

    --text-size-extralarge: 55px;
    --text-size-big: 18px;
    --text-size-medium: 16px;
    --text-size-medium2: 15px;
    --text-size-small: 14px;
    --text-size-small2: 13px;
    --text-size-lil: 12px;
}

a {
    /*font-family:  "Gotham-Regular", Arial, Helvetica, sans-serif;*/
    font-size: 16px;
    line-height: 20px;
    color: var(--text-primary-color1);
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: var(--text-quad-color1);
}
a:hover {
    text-decoration: underline;
    color: var(--text-quad-color1);
}
a:active {
    text-decoration: none;
    color: var(--text-quad-color1);
}

/* ---------------------------------------------------------- */
/* Links */
a.Linkbreak {
    text-decoration: none;
    line-height: inherit;
}
a.Linkbreak:visited {
    text-decoration: none;
}
a.Linkbreak:hover {
    text-decoration: none;
}
a.Linkbreak:active {
    text-decoration: none;
}

h1 {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    font-size: 44px;
    line-height: 50px;
    font-weight: bold;
    margin: 10px 0 10px 0;
}
h2 {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    font-size: 34px;
    line-height: 40px;
    font-weight: 900;
    margin: 10px 0 10px 0;
}
h3 {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    font-size: 30px;
    line-height: 38px;
    font-weight: 900;
    margin: 10px 0 10px 0;
}
h4 {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    font-size: 24px;
    line-height: 31px;
    font-weight: bold;
    margin: 10px 0 10px 0;
}
h5 {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 26px;
    font-weight: bold;
    margin: 10px 0 10px 0;
}
h6 {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 23px;
    font-weight: bold;
    margin: 10px 0 10px 0;
}

.text-extralarge {
    font-size: var(--text-size-extralarge);
    line-height: calc(var(--text-size-extralarge) + 7px);
}
.text-big {
    font-size: var(--text-size-big);
    line-height: calc(var(--text-size-big) + 5px);
}
.text-medium {
    font-size: var(--text-size-medium);
    line-height: calc(var(--text-size-medium) + 8px);
}
.text-medium2 {
    font-size: var(--text-size-medium2);
    line-height: calc(var(--text-size-medium2) + 8px);
}
.text-small {
    font-size: var(--text-size-small);
    line-height: calc(var(--text-size-small) + 7px);
}
.text-lil {
    font-size: var(--text-size-lil);
    line-height: calc(var(--text-size-lil) + 6px);
}

.text-read {
    font-size: var(--text-size-big);
    line-height: calc(var(--text-size-big) + 15px);
    color: var(--text-color-mediumblack);
    font-weight: 500;
}

.text-primary-black {
    font-family: "Encode Sans", Arial, Helvetica, sans-serif;
    font-weight: 900;
}
.text-primary-bold {
    font-family: "Encode Sans", Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.text-primary-regular {
    font-family: "Encode Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
}
.text-primary-light {
    font-family: "Encode Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.text-secondary-bold {
    font-family: "Dosis", Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.text-secondary-regular {
    font-family: "Dosis", Arial, Helvetica, sans-serif;
    font-weight: 600;
}
.text-secondary-light {
    font-family: "Dosis", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.text-tertiary-bold {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    font-weight: 700;
}
.text-tertiary-regular {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    font-weight: 600;
}
.text-tertiary-light {
    font-family: "Cabin", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.text-shadow {
    text-shadow: 0px 0px 2px rgb(0, 0, 0, 0.5);
}
.text-shadow-white {
    text-shadow: 0px 0px 2px rgb(255, 255, 255, 1);
}

.text-color-white {
    color: var(--text-color-white);
}

/*Form*/
form {
    margin: 60px 0 0 0 !important;
}
.form {
    margin: 0 0 0 0 !important;
}

.form-field {
    width: 90%;
    float: left;
    padding: 15px 5% 10px 5%;
    margin: 0 0px 10px 0px;
    font-size: var(--text-size-small);
    color: #333;
    line-height: 20px;
    border: solid 2px #ddd;
    border-radius: 20px;
    outline: none;
}
.form-field:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/*
.form-button1 { 
	width: 200px; padding: 15px 0; border: none; background-color: #000; border-radius: 18px; 
	font-family: "Gotham-Bold", Arial, Helvetica, sans-serif; color: #FFF; font-size: 13px; 
}
.form-button1:hover { background-color: #DB0051; cursor: pointer; }
*/

/*Custom file upload*/
input[id="file-upload"] {
    display: none;
}
input[id="file-upload1"] {
    display: none;
}
input[id="file-upload2"] {
    display: none;
}
input[id="file-upload3"] {
    display: none;
}
input[id="file-upload4"] {
    display: none;
}
input[id="file-upload5"] {
    display: none;
}
input[id="file-upload6"] {
    display: none;
}
input[id="file-upload7"] {
    display: none;
}
input[id="file-upload8"] {
    display: none;
}
input[id="file-upload9"] {
    display: none;
}
input[id="file-upload10"] {
    display: none;
}

input[id="file-upload-image"] {
    display: none;
}
input[id="file-upload-image2"] {
    display: none;
}
input[id="file-upload-image3"] {
    display: none;
}
input[id="file-upload-image4"] {
    display: none;
}
input[id="file-upload-image5"] {
    display: none;
}
input[id="file-upload-image6"] {
    display: none;
}
input[id="file-upload-image7"] {
    display: none;
}
input[id="file-upload-image8"] {
    display: none;
}
input[id="file-upload-image9"] {
    display: none;
}
input[id="file-upload-image10"] {
    display: none;
}

label.custom-upload i {
    margin: 0 4px 0 0;
}

.custom-upload,
.custom-upload2 {
    width: 100%;
    height: 90px;
    padding: 0 0;
    margin: 12px 0 0 0;
    display: block;
    position: relative;
    background-color: #8dabc7;
    border-radius: 15px;
    box-shadow: 1px 1px 10px rgb(0, 0, 0, 0.15);
    font-size: var(--text-size-small);
    cursor: pointer;
    color: #fff;
    overflow: hidden;
}
.custom-upload:hover {
    background-color: #6494c0;
}

.custom-upload2 {
    margin: 10px 0 0 0;
    height: 90px;
    background-color: #3d8df5;
}
.custom-upload2:hover,
.custom-upload.active:hover,
.custom-upload2.active:hover {
    background-color: var(--text-secondary-color1);
}

.custom-upload.active,
.custom-upload2.active {
    background-color: #bbb;
}

.custom-upload-text {
    font-size: var(--text-size-small2);
    font-weight: bold;
}
.custom-upload-text2 {
    font-size: var(--text-size-lil);
}

.custom-upload-st1 {
    width: 100%;
    height: inherit;
    float: left;
    display: flex;
    align-items: center;
}
.custom-upload-st2,
.custom-upload2-st2 {
    width: 80%;
    height: inherit;
    float: left;
    padding: 15px 10% 0 10%;
    position: absolute;
    display: flex;
    align-items: center;
    font-size: var(--text-size-small);
    line-height: calc(var(--text-size-small) + 5px);
    text-align: center;
    background-color: rgb(0, 0, 0, 0.1);
    padding-top: 10px;
    transition: 0.2s;
}
.custom-upload2-st2 {
    height: 100px;
    padding-top: 0;
    font-size: var(--text-size-big);
}

.ultra { border-radius: 50px; }



/*#file-upload-image-title,#file-upload-title { font-size: var(--text-size-small); font-weight: bold;  }*/
.custom-upload-st2 > div .custom-upload-text {
    display: none;
}
.custom-upload-st2:hover > div .custom-upload-text {
    display: inline-block;
}
.custom-upload-st2 > div .custom-upload-text2 {
    display: none;
}
.custom-upload-st2:hover > div .custom-upload-text2 {
    display: inline-block;
}

.custom-upload-st2:hover {
    background-color: rgb(0, 0, 0, 0.6);
    padding-top: 0;
    transition: 0.2s;
}
.custom-upload-st3 {
    width: 12%;
    float: left;
    padding-top: 25px;
}

.selected-file-label {
    width: 80%;
    border: 1px solid #ccc;
}

/* Tooltip container */
a.tooltip2 {
    text-decoration: none;
    line-height: inherit;
}
.tooltip2 {
    position: relative;
    /* display: inline-block; */
}

/* Tooltip text */
.tooltip2 .tooltip2text {
    visibility: hidden;
    width: 150px;
    background-color: var(--text-primary-color1);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    font-size: var(--text-size-lil);
    font-weight: 600;

    /* Position the tooltip2 text - see examples below! */
    position: absolute;
    z-index: 1;
}
.tooltip2 .tooltip2text.right {
    top: 5px;
    left: 100%;
}
.tooltip2 .tooltip2text.left {
    top: 10px;
    right: 100%;
}
.tooltip2 .tooltip2text.top {
    bottom: 102%;
    left: calc(50% - 75px);
}
.tooltip2 .tooltip2text.bottom {
    top: 102%;
    left: calc(50% - 75px);
}

/* Show the tooltip2 text when you mouse over the tooltip2 container */
.tooltip2:hover .tooltip2text {
    visibility: visible;
}

/* Responsive design */
/* phones portrait */
@media screen and (max-width: 600px) {
    :root {
        --text-size-extralarge: 35px;
        --text-size-big: 17px;
        --text-size-medium: 15px;
        --text-size-medium2: 14px;
        --text-size-small: 13px;
        --text-size-small2: 12px;
        --text-size-lil: 11px;
    }

    h1 {
        font-size: 30px;
        line-height: 36px;
        margin: 10px 0 10px 0;
    }
    h2 {
        font-size: 26px;
        line-height: 30px;
        margin: 10px 0 10px 0;
    }
    h3 {
        font-size: 22px;
        line-height: 26px;
        margin: 10px 0 10px 0;
    }
    h4 {
        font-size: 19px;
        line-height: 23px;
        margin: 10px 0 10px 0;
    }
    h5 {
        font-size: 18px;
        line-height: 21px;
        margin: 10px 0 10px 0;
    }
    h6 {
        font-size: 16px;
        line-height: 21px;
        margin: 10px 0 10px 0;
    }

    .text-align-left-tab {
        text-align: center;
    }
    .text-align-right-tab {
        text-align: center;
    }
    .text-align-left-mobile {
        text-align: center;
    }
    .text-align-right-mobile {
        text-align: center;
    }
}

/* tablets portrait, phones landscape */
@media screen and (min-width: 768px) {
    :root {
        --text-size-extralarge: 35px;
        --text-size-big: 17px;
        --text-size-medium: 15px;
        --text-size-medium2: 14px;
        --text-size-small: 13px;
        --text-size-small2: 12px;
        --text-size-lil: 11px;
    }

    h1 {
        font-size: 32px;
        line-height: 36px;
        margin: 10px 0 10px 0;
    }
    h2 {
        font-size: 26px;
        line-height: 30px;
        margin: 10px 0 10px 0;
    }
    h3 {
        font-size: 22px;
        line-height: 26px;
        margin: 10px 0 10px 0;
    }
    h4 {
        font-size: 19px;
        line-height: 23px;
        margin: 10px 0 10px 0;
    }
    h5 {
        font-size: 17px;
        line-height: 20px;
        margin: 10px 0 10px 0;
    }
    h6 {
        font-size: 16px;
        line-height: 21px;
        margin: 10px 0 10px 0;
    }

    /*
	h1 { font-size: 40px; line-height: 44px; margin: 10px 0 10px 0; } 
	h2 { font-size: 32px; line-height: 38px; margin: 10px 0 10px 0; } 
	h3 { font-size: 26px; line-height: 35px; margin: 10px 0 10px 0; } 
	h4 { font-size: 22px; line-height: 26px; margin: 10px 0 10px 0; } 
	h5 { font-size: 18px; line-height: 24px; margin: 10px 0 10px 0; } 
	h6 { font-size: 16px; line-height: 21px; margin: 10px 0 10px 0; } 
	*/

    .text-align-left-tab {
        text-align: center;
    }
    .text-align-right-tab {
        text-align: center;
    }
    .text-align-left-mobile {
        text-align: left;
    }
    .text-align-right-mobile {
        text-align: right;
    }
}

/* tablets landscape */
@media screen and (min-width: 992px) {
}

/**/
@media screen and (min-width: 1200px) {
    .text-align-left-tab {
        text-align: left;
    }
    .text-align-right-tab {
        text-align: right;
    }
    .text-align-left-mobile {
        text-align: left;
    }
    .text-align-right-mobile {
        text-align: right;
    }
}

/**/
@media screen and (min-width: 1500px) {
}

/**/
@media screen and (min-width: 1600px) {
    :root {
        --text-size-extralarge: 50px;
        --text-size-big: 18px;
        --text-size-medium: 16px;
        --text-size-medium2: 15px;
        --text-size-small: 14px;
        --text-size-small2: 13px;
        --text-size-lil: 12px;
    }

    h1 {
        font-size: 42px;
        line-height: 52px;
        margin: 10px 0 10px 0;
    }
    h2 {
        font-size: 34px;
        line-height: 40px;
        margin: 10px 0 10px 0;
    }
    h3 {
        font-size: 28px;
        line-height: 34px;
        margin: 10px 0 10px 0;
    }
    h4 {
        font-size: 23px;
        line-height: 28px;
        margin: 10px 0 10px 0;
    }
    h5 {
        font-size: 20px;
        line-height: 26px;
        margin: 10px 0 10px 0;
    }
    h6 {
        font-size: 17px;
        line-height: 22px;
        margin: 10px 0 10px 0;
    }
}

/**/
@media screen and (min-width: 1800px) {
}

/**/
@media screen and (min-width: 2000px) {
}