@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
@import './cards.css';

html {
    overflow-x: hidden;
}

body {
    --main-bg: white;
    --main-text: #222222;
    --shadow: rgba(121, 151, 191, 0.25);
    --blue-start-gradient: #03A0F1;
    --blue-end-gradient: #3F3FD8;
    --orange-start-gradient: #FF9100;
    --orange-end-gradient: #FF3100;
    --purple-start-gradient: #E650E6;
    --purple-end-gradient: #7306FF;
    --green-start-gradient: #19CF89;
    --green-end-gradient: #01754E;
    --grey-light: #F1F1F1;
    --grey-dark: #727272;
    --blue-primary: #03A0F1;
    --blue-dark: #2F59DE;
    --orange-primary: #FF9100;
    --dark-orange: #FF3E00;
    --purple-primary: #8C75EB;
    --green-primary: #19CF89;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    /*font-weight: <weight>;*/
    font-style: normal;
    /*font-variation-settings: "wdth" 100;*/
    font-size: 1rem;
    /*font-family: 'Montserrat', sans-serif;*/
    overflow-x: hidden;
    background-color: white;
    background-color: var(--main-bg);
    margin: 0;
    min-width: 320px;
    box-sizing: border-box;
    position: relative;
    /*Menu Navigation*/
    padding-top: 65px;
    color: #222222;
    color: var(--main-text);
}

    body.no-overflow {
        overflow: visible;
    }

    body.dark {
        --main-bg: #121212;
        --main-text: #F1F1F1;
        --shadow: rgba(0, 0, 0, 0.25);
        --grey-light: #353a48;
    }

* {
    box-sizing: border-box;
}

@media screen and (max-width:1170px) {
    body {
        /*Menu Navigation*/
        padding-top: 50px;
    }
}

.text-white {
    color: white;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    /*-webkit-box-shadow: 0 0 0px 1000px var(--main-bg) inset !important;*/
}


input:-webkit-autofill {
    -webkit-text-fill-color: var(--main-text) !important;
}

input:autofill {
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    background-color: transparent;
    color: #222222;
    color: var(--main-text);
}


:-webkit-autofill::first-line {
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #222222;
    color: var(--main-text);
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

::placeholder {
    font-size: 1rem;
    color: #808080;
}

*:focus {
    outline: none;
}

::-webkit-input-placeholder {
    font-style: normal;
}

:-moz-placeholder {
    font-style: normal;
}

::-moz-placeholder {
    font-style: normal;
}

:-ms-input-placeholder {
    font-style: normal;
}

.no-margin {
    margin: 0px;
}

.color-white{
    color: white;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

body.dark hr {
    border-color: #353A48;
}

hr.blue {
    border-top: 1px solid var(--blue-primary) !important;
}

hr.orange {
    border-top: 1px solid var(--orange-primary) !important;
}

hr.green {
    border-top: 1px solid var(--green-primary) !important;
}

hr.purple {
    border-top: 1px solid var(--purple-primary) !important;
}

hr.grey {
    border-top: 1px solid var(--grey-light) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


input[type=number] {
    -moz-appearance: textfield;
}

[type="checkbox"],
[type="radio"] {
    padding: 0;
}

textarea {
    display: block;
    overflow: auto;
    width: 100%;
    color: #222222;
    color: var(--main-text);
    padding: 10px 15px;
    text-align: left;
    resize: none;
    height: 120px;
    border: solid 1px var(--grey-dark);
    border-radius: 5px;
    transition: all .2s ease;
    overflow-y: scroll;
    scrollbar-width: thin;
    background-color: transparent;
}

    textarea::-webkit-scrollbar {
        width: 3px;
    }

    textarea::-webkit-scrollbar-thumb {
        background-color: #929292;
    }

    textarea:hover {
        border-color: var(--blue-primary);
    }

    textarea:focus {
        border-color: var(--blue-primary);
        box-shadow: 0px 0px 6px 0px #03A0F182;
    }

    textarea.entreprise:hover {
        border-color: var(--purple-primary);
    }

    textarea.school:hover {
        border-color: var(--orange-primary);
    }

    textarea.entreprise:focus {
        border-color: var(--purple-primary);
        box-shadow: 0px 0px 6px 0px #8C75EB40;
    }

    textarea.school:focus {
        border-color: var(--orange-primary);
        box-shadow: 0px 0px 6px 0px #FF910040;
    }

a {
    color: #222222;
    color: var(--main-text);
    background-color: transparent;
    text-decoration: none;
    transition: all .2s ease;
}

    a:hover {
        color: var(--blue-primary);
    }


b,
strong {
    font-weight: bolder;
}

ul {
    padding: 0px;
    list-style: none;
    margin: 0px;
}

    ul.classic {
        padding-left: 20px;
        list-style-type: disc;
    }

ol {
    padding: 0px;
    margin: 0px;
}

.rotate-90 {
    transform: rotate(90deg);
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    font-weight: 500;
}

button {
    user-select: none;
}

button,
input {
    overflow: hidden;
}

button,
select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

label {
    cursor: pointer;
}

    label.label-btn {
        background-color: var(--blue-primary);
        border: solid 1px var(--blue-primary);
        width: 250px;
        border-radius: 50px;
        height: 40px;
        transition: all ease .2s;
        color: white;
        cursor: pointer;
        display: block;
        text-align: center;
        padding: 10px;
        font-weight: 500;
    }

        label.label-btn:hover {
            background-color: rgb(0, 195, 255);
            border: solid 1px rgb(0, 195, 255);
        }

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
}

  h1 span {
    display: block;
  }


input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="url"] {
    padding: 10px 15px 10px 15px;
    border-radius: 5px;
    border: solid 1px var(--grey-dark);
    transition: all .2s ease;
    background-color: transparent;
    width: 100%;
    display: block;
    position: relative;
    color: #222222;
    color: var(--main-text);
}

    input[type="text"]:hover,
    input[type="number"]:hover,
    input[type="email"]:hover,
    input[type="tel"]:hover,
    input[type="password"]:hover,
    input[type="date"]:hover,
    input[type="url"]:hover {
        border-color: var(--blue-primary);
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="password"]:focus,
    input[type="date"]:focus,
    input[type="url"]:focus {
        border-color: var(--blue-primary);
        padding: 15px 15px 15px 15px;
        box-shadow: 0px 0px 6px 0px #28c1ff82;
    }

    input[type="text"].entreprise:hover,
    input[type="number"].entreprise:hover,
    input[type="email"].entreprise:hover,
    input[type="tel"].entreprise:hover,
    input[type="password"].entreprise:hover,
    input[type="url"].entreprise:hover {
        border-color: var(--purple-primary);
    }

    input[type="text"].entreprise:focus,
    input[type="number"].entreprise:focus,
    input[type="email"].entreprise:focus,
    input[type="tel"].entreprise:focus,
    input[type="password"].entreprise:focus,
    input[type="url"].entreprise:focus {
        border-color: var(--purple-primary);
        box-shadow: 0px 0px 6px 0px #8C75EB82;
    }

    input[type="text"].school:hover,
    input[type="number"].school:hover,
    input[type="email"].school:hover,
    input[type="tel"].school:hover,
    input[type="password"].school:hover,
    input[type="url"].school:hover {
        border-color: var(--dark-orange);
    }

    input[type="text"].school:focus,
    input[type="number"].school:focus,
    input[type="email"].school:focus,
    input[type="tel"].school:focus,
    input[type="password"].school:focus,
    input[type="url"].school:focus {
        border-color: var(--dark-orange);
        box-shadow: 0px 0px 6px 0px #FF910040;
    }

input.hasValue {
    border-color: var(--blue-primary);
}

input.school.hasValue {
    border-color: var(--dark-orange);
}

input.entreprise.hasValue {
    border-color: var(--purple-primary);
}

input.ic-euros {
    padding-right: 35px;
    background-image: url(../images/icons/ic_euros.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 15px 15px;
}

body.dark input.ic-euros {
    background-image: url(../images/icons/ic_euros_white.svg);
}


input.ic-euros.entreprise {
    background-image: url(../images/icons/ic_euros_purple.svg);
}

input.ic-euros:focus {
    padding-right: 35px;
}

input.ic-rubis {
    padding-right: 35px;
    background-image: url(../images/icons/ic_rubis_med.png);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 25px 25px;
}

input.ic-percent {
    padding-right: 35px;
    background-image: url(../images/icons/ic_percent.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px 20px;
}

body.dark input.ic-percent {
    background-image: url(../images/icons/ic_percent_white.svg);
}

input.ic-percent:focus {
    padding-right: 35px;
}

input.ic-date {
    padding-left: 40px !important;
    background-image: url(../images/icons/ic_calendar_grey.svg);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 20px 20px;
}

    input.ic-date:focus {
        background-image: url(../images/icons/ic_calendar_blue.svg);
        padding-left: 40px;
    }

    input.ic-date.hasValue {
        background-image: url(../images/icons/ic_calendar_blue.svg);
    }

    input.ic-date.school:focus {
        background-image: url(../images/icons/ic_calendar_orange.svg);
    }

    input.ic-date.school.hasValue {
        background-image: url(../images/icons/ic_calendar_orange.svg);
    }

    input.ic-date.entreprise:focus {
        background-image: url(../images/icons/ic_calendar_purple.svg);
    }

    input.ic-date.entreprise.hasValue {
        background-image: url(../images/icons/ic_calendar_purple.svg);
    }

input.ic-heures {
    padding-right: 65px;
    background-image: url(../images/icons/ic_heures.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 50px 25px;
}

    input.ic-heures:focus {
        padding-right: 65px;
    }

input.search-bar {
    padding-left: 40px;
    border-radius: 20px;
    background-image: url(../images/icons/ic_search_grey.svg);
    background-repeat: no-repeat;
    background-size: 17px 17px;
    background-position: 12px center;
}

    input.search-bar:focus {
        padding-left: 40px;
        background-image: url(../images/icons/ic_search_blue.svg);
    }



input.school.search-bar:focus {
    background-image: url(../images/icons/ic_search_orange.svg) !important;
}

input.search-bar.entreprise:focus {
    background-image: url(../images/icons/ic_search_purple.svg) !important;
}

input.school.search-bar.hasValue {
    background-image: url(../images/icons/ic_search_orange.svg) !important;
}

input.search-bar.entreprise.hasValue {
    background-image: url(../images/icons/ic_search_purple.svg) !important;
}

.search-bar-wrapper input.search-bar {
    border-radius: 8px 0px 0px 8px;
    height: 39px;
    padding-right: 0px;
    position: relative;
    z-index: 1;
}

    .search-bar-wrapper input.search-bar + button {
        background-image: url(../images/icons/ic_search_white.svg);
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        z-index: 2;
    }

    .search-bar-wrapper input.search-bar:focus + button {
        box-shadow: rgb(40 193 255 / 51%) 3px 0px 6px 0px;
    }

input.xs {
    width: 150px;
}

input.error {
    border-color: #EA4335;
    background-image: url(../images/icons/ic_x_circle_red.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: right 10px center;
}

    input.error:focus {
        border-color: #EA4335;
        box-shadow: 0px 0px 6px 0px #EA433582;
    }

    input.error:hover {
        border-color: #EA4335;
    }

input.valid {
    border-color: var(--green-primary);
    background-image: url(../images/icons/ic_check_circle_green.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: right 10px center;
}

    input.valid:focus {
        border-color: var(--green-primary);
        box-shadow: 0px 0px 6px 0px #19CF8982;
    }

    input.valid:hover {
        border-color: var(--green-primary);
    }

select {
    border: solid 1px var(--grey-dark);
    border-radius: 5px;
    background-color: white;
    background-color: var(--main-bg);
    color: #222222;
    color: var(--main-text);
    padding: 5px;
    font-weight: 500;
    max-width: 300px;
}

    select.ic-clock {
        padding-left: 30px !important;
        background-image: url(../images/icons/ic_clock_grey.svg);
        background-repeat: no-repeat;
        background-size: 17px 17px;
        background-position: 8px center;
    }

@media screen and (max-width:800px) {
    .datepickers-container {
        display: none !important;
    }
}

.rem07 {
    font-size: 0.7rem;
}

.rem09 {
    font-size: 0.9rem;
}

.rem1 {
    font-size: 1rem;
}

.rem11 {
    font-size: 1.1rem;
}

.rem125 {
    font-size: 1.25rem;
}

.rem105 {
    font-size: 1.5rem;
}

.rem175 {
    font-size: 1.75rem;
}

.rem2 {
    font-size: 2rem;
}

.rem25 {
    font-size: 2.5rem;
}

.rem3 {
    font-size: 3rem;
}

.rem4 {
    font-size: 4rem;
}

.wn {
    font-weight: normal;
}

.w1 {
    font-weight: 100;
}

.w4 {
    font-weight: 400;
}

.w5 {
    font-weight: 500;
}

.w6 {
    font-weight: 600;
}

.w7 {
    font-weight: 700;
}

.w8 {
    font-weight: 800;
}

.italic {
    font-style: italic;
}

.cw {
    color: white;
}

.cg {
    color: var(--grey-dark);
}

.cg2 {
    color: var(--grey-dark);
}

.cv {
    color: var(--green-primary);
}

.cn {
    color: #222222;
    color: var(--main-text);
}

.cb {
    color: var(--blue-primary);
}

.cr {
    color: #FF5050;
}

.cdg {
    color: darkgray;
}

.cj {
    color: var(--orange-primary);
}

.cp {
    color: var(--purple-primary);
}

.co {
    color: var(--orange-primary);
}

.co2 {
    color: var(--dark-orange);
}

.cb-hover,
.co-hover,
.cv-hover,
.cw-hover,
.cp-hover,
.cn-hover,
.ts2 {
    transition: all .2s ease;
}

.no-ts {
    transition: 0s !important;
}

.cb-hover:hover {
    color: var(--blue-primary);
}

.cv-hover:hover {
    color: var(--green-primary);
}

.co-hover:hover {
    color: var(--orange-primary);
}

.cp-hover:hover {
    color: var(--purple-primary);
}

.cw-hover:hover {
    color: white;
}

.cn-hover:hover {
    color: var(--main-text);
}

.border-grey-1 {
    border: solid 1px var(--grey-light);
}

.border-grey-2 {
    border: solid 2px var(--grey-light);
}

.bg-white {
    background-color: white;
    background-color: var(--main-bg);
}

.bg-grey {
    background-color: var(--grey-light);
}

.bg-green {
    background: linear-gradient(180deg, var(--green-start-gradient), var(--green-end-gradient));
}

.bg-orange {
    background: linear-gradient(180deg, var(--orange-start-gradient), var(--orange-end-gradient));
}

.bg-blue {
    background: linear-gradient(180deg, var(--blue-start-gradient), var(--blue-end-gradient));
}

@media screen and (min-width:1170px) {
    .bg-grey-hov:hover {
        background-color: var(--grey-light);
    }
}

.br5 {
    border-radius: 5px;
}

.br8 {
    border-radius: 8px;
}

.br10 {
    border-radius: 10px;
}

.br15 {
    border-radius: 15px;
}

.br20 {
    border-radius: 20px;
}

.br50p {
    border-radius: 50%;
}

.brtop {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.brbottom {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.brleft {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.brright {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}



.shadow {
    box-shadow: 0px 3px 16px 0px var(--shadow);
}

.box-shadow-none {
    box-shadow: none !important;
}

.box-shadow-none:focus {
    box-shadow: none !important;
}

.text-shadow {
    text-shadow: 2px 2px 4px #00000049;
}

.no-text-overflow {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overflow-hidden {
    overflow: hidden;
}

.animated-shadow {
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    animation: animation-shadow 4s ease-in-out infinite;
}

.gap5 {
  gap : 5px;
}

.gap10 {
  gap: 10px;
}

.gap15 {
  gap: 15px;
}

.gap20 {
  gap: 20px;
}

.margin-auto {
    margin: auto;
}

.margin-top-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.margin5 {
    margin: 5px;
}

.margin10 {
    margin: 10px;
}

.margin20 {
    margin: 20px;
}

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

.margin-top10 {
    margin-top: 10px;
}

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

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

.margin-top40 {
    margin-top: 40px;
}

.margin-top50 {
    margin-top: 50px;
}

.margin-top100 {
    margin-top: 100px;
}

.margin-top150 {
    margin-top: 150px;
}

.margin-top200 {
    margin-top: 200px;
}

.margin-right5 {
    margin-right: 5px;
}

.margin-right10 {
    margin-right: 10px;
}

.margin-right20 {
    margin-right: 20px;
}

.margin-right30 {
    margin-right: 30px;
}

.margin-right40 {
    margin-right: 40px;
}

.margin-right50 {
    margin-right: 50px;
}

.margin-right100 {
    margin-right: 100px;
}

.margin-right200 {
    margin-right: 200px;
}

.margin-bottom5 {
    margin-bottom: 5px;
}

.margin-bottom10 {
    margin-bottom: 10px;
}

.margin-bottom20 {
    margin-bottom: 20px;
}

.margin-bottom30 {
    margin-bottom: 30px;
}

.margin-bottom40 {
    margin-bottom: 40px;
}

.margin-bottom50 {
    margin-bottom: 50px;
}

.margin-bottom100 {
    margin-bottom: 100px;
}

.margin-bottom200 {
    margin-bottom: 200px;
}

.margin-left5 {
    margin-left: 5px;
}

.margin-left10 {
    margin-left: 10px;
}

.margin-left20 {
    margin-left: 20px;
}

.margin-left30 {
    margin-left: 30px;
}

.margin-left40 {
    margin-left: 40px;
}

.margin-left50 {
    margin-left: 50px;
}

.margin-left100 {
    margin-left: 100px;
}

.margin-left200 {
    margin-left: 200px;
}

.margin-leftauto {
    margin-left: auto;
}

.no-padding {
    padding: 0px;
}

.padding5 {
    padding: 5px;
}

.padding10 {
    padding: 10px;
}

.padding20 {
    padding: 20px;
}

.padding30 {
    padding: 30px;
}

.padding40 {
    padding: 40px;
}

.padding50 {
    padding: 50px;
}

.padding-top5 {
    padding-top: 5px;
}

.padding-top10 {
    padding-top: 10px;
}

.padding-top20 {
    padding-top: 20px;
}

.padding-top30 {
    padding-top: 30px;
}

.padding-top40 {
    padding-top: 40px;
}

.padding-top50 {
    padding-top: 50px;
}

.padding-top100 {
    padding-top: 100px;
}

.padding-top150 {
    padding-top: 150px;
}

.padding-top200 {
    padding-top: 200px;
}

.padding-right5 {
    padding-right: 5px;
}

.padding-right10 {
    padding-right: 10px;
}

.padding-right20 {
    padding-right: 20px;
}

.padding-right30 {
    padding-right: 30px;
}

.padding-right40 {
    padding-right: 40px;
}

.padding-right50 {
    padding-right: 50px;
}

.padding-right100 {
    padding-right: 100px;
}

.padding-right200 {
    padding-right: 200px;
}

.padding-bottom5 {
    padding-bottom: 5px;
}

.padding-bottom10 {
    padding-bottom: 10px;
}

.padding-bottom20 {
    padding-bottom: 20px;
}

.padding-bottom30 {
    padding-bottom: 30px;
}

.padding-bottom40 {
    padding-bottom: 40px;
}

.padding-bottom50 {
    padding-bottom: 50px;
}

.padding-bottom100 {
    padding-bottom: 100px;
}

.padding-bottom200 {
    padding-bottom: 200px;
}

.padding-left5 {
    padding-left: 5px;
}

.padding-left10 {
    padding-left: 10px;
}

.padding-left20 {
    padding-left: 20px;
}

.padding-left30 {
    padding-left: 30px;
}

.padding-left40 {
    padding-left: 40px;
}

.padding-left50 {
    padding-left: 50px;
}

.padding-left100 {
    padding-left: 100px;
}

.padding-left200 {
    padding-left: 200px;
}

.align-center {
    margin-left: auto;
    margin-right: auto;
}

.vertical-center {
    position: absolute;
    top: 50%;
    transform: translate(0%,-50%);
}

.align-text-center {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.align-text-left {
    text-align: left;
}

.align-text-right {
    text-align: right;
}

.align-text-justify {
    text-align: justify;
}

.float-right {
    float: right;
}

.width-auto
{
    width: auto;
}

.width20 {
    width: 20px;
}

.width30 {
    width: 30px;
}

.width40 {
    width: 40px;
}

.width50 {
    width: 50px;
}

.width60 {
    width: 60px;
}

.width100 {
    width: 100px;
}

.width100p {
    width: 100%;
}

.height100 {
    height: 100px;
}

.height20 {
    height: 20px;
}

.height30 {
    height: 30px;
}

.height40 {
    height: 40px;
}

.height50 {
    height: 50px;
}

.height60 {
    height: 60px;
}

.height100 {
    height: 100px;
}

.height100p {
    height: 100%;
}

.maxwidth350 {
    width: 95%;
    max-width: 350px;
}

.maxheight350 {
    max-height: 350px;
}

.maxwidth500 {
    /*width: 95%;*/
    max-width: 500px;
}

.maxwidth700 {
    width: 95%;
    max-width: 700px;
}

.maxwidth900 {
    width: 95%;
    max-width: 900px;
}

.hidden {
    display: none !important;
}

.disabled-hidden {
    opacity: 0;
    pointer-events: none;
}

.pc-hide {
    display: none !important;
}

.flex-pc-hide {
    display: none !important;
}

.flex-mobile-hide {
    display: flex !important;
}

.mobile-overflow {
    white-space: nowrap;
}

@media screen and (max-width:800px) {
    .mobile-hide {
        display: none !important;
    }

    .flex-mobile-hide {
        display: none !important;
    }

    .pc-hide {
        display: block !important;
    }

    .flex-pc-hide {
        display: flex !important;
    }
}

.underline {
    text-decoration: underline;
}

/*Container edit*/
.edit-container {
    width: 95%;
    max-width: 800px;
    margin: 30px auto 30px auto;
    position: relative;
}

    .edit-container .group {
        position: relative;
        padding-left: 30px;
        padding-right: 10px;
    }

        .edit-container .group::before {
            content: '';
            position: absolute;
            left: 0px;
            height: 100%;
            width: 5px;
            background-color: var(--blue-primary);
            top: 0px;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .edit-container .group.school::before {
            content: '';
            position: absolute;
            left: 0px;
            height: 100%;
            width: 5px;
            background-color: var(--orange-primary);
            top: 0px;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .edit-container .group.entreprise::before {
            content: '';
            position: absolute;
            left: 0px;
            height: 100%;
            width: 5px;
            background-color: var(--purple-primary);
            top: 0px;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

    .edit-container .change-couverture-container.profil .croppie-container {
        margin-bottom: 100px;
    }

/*Container large*/
.large-container {
    width: 95%;
    max-width: 1100px;
    margin: 30px auto 30px auto;
    position: relative;
}

/*Positions*/
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

/*Flex*/
.d-flex {
    display: flex;
}

    .d-flex.align-start {
        align-items: flex-start;
    }

    .d-flex.align-end {
        align-items: flex-end;
    }

.align-items-center {
    align-items: center;
}

    .d-flex .flex1, .flex-pc-hide .flex1, .flex-mobile-hide .flex1 {
        flex: 1;
    }

    .d-flex .flex1-r {
        flex: 1;
    }

    .d-flex .flex100 {
        flex: 0 0 100%;
        max-width: 100%;
    }

.d-flex .flexauto, .flex-pc-hide .flexauto, .flex-mobile-hide .flexauto {
    flex: 0 0 auto;
}

    .d-flex .flex50 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .d-flex .flex50-r {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .d-flex .flex33 {
        flex: 0 0 33%;
        max-width: 33%;
    }

    .d-flex .flex33-r {
        flex: 0 0 33%;
        max-width: 33%;
    }

    .d-flex button.flexauto {
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

@media screen and (max-width:800px) {
    .flex-wrap-mobile {
        flex-wrap: wrap;
    }
}

.justify-center {
    justify-content: center;
}

@media screen and (max-width:800px) {
    .mobile-justify-center {
        justify-content: center;
    }
}

.justify-right {
    justify-content: right;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-space-around {
    justify-content: space-around;
}

.justify-flex-end {
    justify-content: flex-end;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}



@media screen and (max-width:800px) {
    .d-flex .flex50-r {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .d-flex .flex33-r {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-first-r {
        order: -1;
    }

    .d-flex .flex1-r {
        flex: 0 0 100%;
    }
}

/*Curseur*/
.cursor-pointer {
    cursor: pointer;
}

/*No event*/
.no-pointer-event {
    pointer-events: none;
}

.svgFillColor {
    fill: currentColor;
}

.svgFillColor text {
    fill: white;
}

body.dark .svgFillColor text {
    fill: black;
}

.svgStrokeColor {
    stroke: currentColor;
}

/*icone img texte*/
.ic-text {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -4px;
}

.ic-text-small {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -2px;
}

.ic-text-big {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: -7px;
}

/*Images viewers*/
.pswp {
    z-index: 500000 !important;
}

.pswp__button:hover {
    background-color: transparent;
    border: none;
}

img.pswp__img {
    border-radius: 8px;
}

/*Datepicker*/
.datepicker {
    border: none;
    border-radius: 6px;
}

.datepicker--nav {
    border: none;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    width: auto;
    position: relative;
    max-height: none;
    left: auto;
    top: auto;
    z-index: 7000;
}

.datepicker--pointer {
    border-top: 1px solid #dbdbdb8c;
    border-right: 1px solid #dbdbdb8c;
}

.datepicker--cell.-selected- {
    background: var(--blue-primary);
}

/*Chargement*/
#loader {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

    #loader img {
        width: 70px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        margin-bottom: 50px;
        pointer-events: none;
    }

/*Menu Navigation*/
nav {
    width: 100%;
    height: 65px;
    max-height: 65px;
    background-color: white;
    background-color: var(--main-bg);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100000;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
    transition: all .2s ease-in-out;
}

    nav.opened {
        transition: all .1s ease-in-out;
        box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
        background-color: white;
        background-color: var(--main-bg);
    }

    nav .nav-logo {
        flex: 0 0 auto;
        position: relative;
        display: flex;
        margin-left: 10px;
    }

        nav .nav-logo a {
            margin: auto;
        }

        nav .nav-logo .nav-logo-content {
            width: 164px;
            height: 54px;
            margin-top: -1px;
            background-image: url(../images/logos/LOGO-PrePeers.svg);
            background-repeat: no-repeat;
            background-position: left center;
            transition: all .2s ease;
        }

            nav .nav-logo .nav-logo-content.b2b {
                background-image: url(../images/logos/LOGO-PrePeers-Baseline.svg);
            }

.dark nav .nav-logo .nav-logo-content {
    background-image: url(../images/logos/LOGO-nav-dark-mode.svg);
}

nav.connected .nav-logo .nav-logo-content {
    background-image: url(../images/logos/logo_prepeers_small_blue.svg);
    height: 48px;
    width: 48px;
    margin-top: 0px;
}

    nav.connected .nav-logo .nav-logo-content.b2b {
        width: 165px;
        height: 40px;
        margin-top: -3px;
        background-image: url(../images/logos/LOGO-PrePeers-Baseline.svg);
    }

nav.connected .nav-logo .search-content input {
    margin-top: 12px;
    padding: 10px 15px 10px 15px;
    padding-left: 40px;
    background-color: var(--grey-light);
    border-color: var(--grey-light);
    border-radius: 8px;
}

    nav.connected .nav-logo .search-content input::placeholder {
        color: #929292;
        font-weight: 400;
    }

nav.connected .nav-logo .search-content .nav-search-suggestions-wrapper {
    left: 0px;
    top: 60px;
    display: none;
    max-height: 250px;
    overflow-y: scroll;
}

    nav.connected .nav-logo .search-content .nav-search-suggestions-wrapper .item {
        padding: 7px 10px;
        cursor: pointer;
        position: relative;
        font-weight: 500;
        transition: all .2s ease;
    }

        nav.connected .nav-logo .search-content .nav-search-suggestions-wrapper .item:not(:last-child) {
            border-bottom: solid 1px var(--grey-light);
        }

nav.connected .nav-logo .search-content #nav-search-bar.show-suggests + .nav-search-suggestions-wrapper {
    display: block;
}

nav.premium .nav-logo .nav-logo-content.b2b {
    width: 165px;
    height: 40px;
    margin-top: -3px;
    background-image: url(../images/logos/LOGO-PrePeers-Premium.svg);
}

nav.pro.school .nav-logo .nav-logo-content {
    background-image: url(../images/logos/LOGO-PrePeers-pro-school.svg);
}

.dark nav.premium .nav-logo .nav-logo-content.b2b {
    background-image: url(../images/logos/LOGO-PrePeers-Premium-dark.svg);
}

nav .nav-pro-switch {
    position: relative;
    width: 70px;
    height: 100%;
    margin-right: auto;
}

    nav .nav-pro-switch .icons-container {
        padding-top: 18px;
        padding-bottom: 18px;
        margin-left: 5px;
        height: 100%;
    }

        nav .nav-pro-switch .icons-container svg path {
            transition: all .2s ease;
        }

nav.school.pro .nav-pro-switch.open .icons-container svg path {
    fill: var(--orange-primary);
}

nav.job.pro .nav-pro-switch.open .icons-container svg path {
    fill: var(--purple-primary);
}

nav .nav-pro-switch .dropdown-content {
    position: absolute;
    transition: all .2s ease;
    max-height: 0px;
    left: 0px;
    top: 65px;
    opacity: 0;
    padding: 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: solid 1px #f7f7f7;
    width: 235px;
    overflow: hidden;
    pointer-events: none;
}

nav .nav-pro-switch.open .dropdown-content {
    max-height: 500px;
    opacity: 1;
    box-shadow: 0px 5px 6px 0px rgb(0 0 0 / 4%);
    pointer-events: all;
}

nav .nav-pro-switch .dropdown-content .item {
    border: solid 1px var(--grey-light);
    transition: all .2s ease;
    padding: 15px 15px;
    padding-left: 55px;
    background-repeat: no-repeat;
    background-position: left 15px center;
    background-size: 25px;
}

nav .nav-pro-switch.open .dropdown-content .item:hover {
    background-color: #f8f8f8;
}

nav .nav-pro-switch .dropdown-content .item.home {
    background-image: url(../images/icons/ic_home_blue.svg);
}

nav .nav-pro-switch.open .dropdown-content .item.home:hover {
    color: #03a0f1 !important;
}

nav .nav-pro-switch .dropdown-content .item.school {
    background-image: url(../images/icons/ic_rocket_blue_light.svg);
}

nav .nav-pro-switch.open .dropdown-content .item.school:hover {
    color: #00AEC9 !important;
}

nav .nav-pro-switch .dropdown-content .item.job {
    background-image: url(../images/icons/ic_briefcase_purple.svg);
}

nav .nav-pro-switch.open .dropdown-content .item.job:hover {
    color: var(--purple-primary);
}

nav .nav-cats {
    display: flex;
    flex: 0 0 auto;
    position: absolute;
    height: 100%;
    transform: translateX(-50%);
    left: 50%;
}

    nav .nav-cats .cat {
        padding: 40px 20px 8px 20px;
        border-radius: 8px;
        margin: 2px;
        transition: all .2s ease;
        background-repeat: no-repeat;
        background-position: top 8px center;
        background-size: 25px 25px;
        background-color: #f7f7f7;
        height: 61px;
    }

body.dark nav .nav-cats .cat {
    background-color: #1a1d26;
    color: white;
}

nav .nav-cats .cat img {
    width: 25px;
    height: 25px;
    margin-bottom: 2px;
}

nav .nav-cats .cat:hover {
    color: white;
}

nav .nav-cats .cat.active {
    color: white;
}

nav .nav-cats .cat.home {
    background-image: url(../images/icons/ic_home_blue.svg);
}

    nav .nav-cats .cat.home:hover {
        background-image: url(../images/icons/ic_home_white.svg);
        background-color: var(--blue-primary);
    }

    nav .nav-cats .cat.home.active {
        background-image: url(../images/icons/ic_home_white.svg);
        background-color: var(--blue-primary);
    }

nav .nav-cats .cat.coach {
    background-image: url(../images/icons/ic_hat_green.svg);
    background-size: 30px 27px;
}

    nav .nav-cats .cat.coach:hover {
        background-color: var(--green-primary);
        background-image: url(../images/icons/ic_hat_white.svg);
    }

    nav .nav-cats .cat.coach.active {
        background-color: var(--green-primary);
        background-image: url(../images/icons/ic_hat_white.svg);
    }

nav .nav-cats .cat.school {
    background-image: url(../images/icons/ic_compass_orange_trans.svg);
    background-size: 27px 27px;
}

    nav .nav-cats .cat.school:hover {
        background-color: var(--orange-primary);
        background-image: url(../images/icons/ic_compass_white_full.svg);
    }

    nav .nav-cats .cat.school.active {
        background-color: var(--orange-primary);
        background-image: url(../images/icons/ic_compass_white_full.svg);
    }

    nav .nav-cats .cat.school.pro {
        background-image: url(../images/icons/ic_lightning_shine_orange.svg);
        background-size: 27px 27px;
    }

        nav .nav-cats .cat.school.pro:hover {
            background-color: var(--orange-primary);
            background-image: url(../images/icons/ic_lightning_shine_white.svg);
        }

        nav .nav-cats .cat.school.pro.active {
            background-color: var(--orange-primary);
            background-image: url(../images/icons/ic_lightning_shine_white.svg);
        }

nav .nav-cats .cat.business {
    background-image: url(../images/icons/ic_briefcase_purple.svg);
}

    nav .nav-cats .cat.business:hover {
        background-color: var(--purple-primary);
        background-image: url(../images/icons/ic_briefcase_white.svg);
    }

    nav .nav-cats .cat.business.active {
        background-color: var(--purple-primary);
        background-image: url(../images/icons/ic_briefcase_white.svg);
    }

nav .nav-cats .cat.pro-business {
    background-image: url(../images/icons/ic_lightbolt_purple.svg);
}

nav .nav-cats .cat.pro-school {
    background-image: url(../images/icons/ic_lightbolt_orange.svg);
}

nav .nav-cats .cat.pro-business.active,
nav .nav-cats .cat.pro-business:hover {
    background-color: var(--purple-primary);
    background-image: url(../images/icons/ic_lightbolt_white.svg);
}

nav .nav-cats .cat.pro-school.active,
nav .nav-cats .cat.pro-school:hover {
    background-color: var(--orange-primary);
    background-image: url(../images/icons/ic_lightbolt_white.svg);
}

nav .nav-btns {
    flex: 0 0 auto;
    display: flex;
    line-height: 65px;
}

    nav .nav-btns button {
        line-height: normal;
        width: 170px;
        height: 40px;
        margin: auto 5px auto 5px;
    }

    nav .nav-btns a {
        display: flex;
    }

nav .nav-burger {
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-right: 10px;
    display: none;
}

    nav .nav-burger .nav-burger-item {
        position: relative;
        z-index: 12000;
        width: 30px;
        height: 6px;
        background-color: #02a0f1;
        border-radius: 10px;
        transition: all .25s ease-in-out;
    }

        nav .nav-burger .nav-burger-item:first-child.rotated {
            transform: translateY(10px) rotate(45deg);
        }

        nav .nav-burger .nav-burger-item:last-child.rotated {
            transform: translateY(-10px) rotate(-45deg);
        }

        nav .nav-burger .nav-burger-item:first-child {
            margin-bottom: 4px;
        }

        nav .nav-burger .nav-burger-item:nth-child(2) {
            margin-bottom: 4px;
        }

nav.opened .nav-burger .nav-burger-item:first-child {
    transform: translateY(10px) rotate(45deg);
}

nav.opened .nav-burger .nav-burger-item:nth-child(2) {
    transform: translateX(60px);
    opacity: 0;
}

nav.opened .nav-burger .nav-burger-item:last-child {
    transform: translateY(-10px) rotate(-45deg);
}

@media screen and (max-width:1600px) {
    nav:not(.connected) .nav-cats {
        position: relative;
        transform: none;
        left: auto;
    }
}

@media screen and (max-width:1260px) and (min-width:1170px) {
    nav .nav-logo .nav-logo-content {
        background-image: url(../images/logos/LOGO-PP-PrePeers.svg);
        height: 35px;
        width: 35px;
        background-size: cover;
        margin-top: -1px;
    }
}

@media screen and (max-width:1170px) {
    nav .nav-pro-switch .icons-container {
        display: none;
    }

    nav {
        height: 50px;
    }

        nav .nav-logo .nav-logo-content {
            height: 40px;
        }

        nav .nav-cats {
            display: none;
        }

        nav .nav-btns {
            display: none;
        }

        nav .nav-burger {
            display: block;
        }

        nav.connected .nav-logo .search-content {
            display: none;
        }
}

/*Menu navigation connecté*/
nav.connected .nav-items-connected-container {
    height: 65px;
    /*position: absolute;*/
    /*right: 20px;*/
    display: flex;
}

nav.connected .nav-items-connected {
    cursor: pointer;
    display: flex;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
}

    @media screen and (max-width:800px){
        nav.connected .nav-items-connected {
            margin-left: 10px;
            margin-right: 10px;
        }
    }

    nav.connected .nav-items-connected.modules {
        padding-left: 20px;
        margin-top: 5px;
        margin-bottom: 5px;
        border-left: solid 2px #707070;
    }

    nav.connected .nav-items-icons.modules::after {
        width: 50px; 
        height:50px;
    }

nav.connected .nav-items-connected.open {
    cursor: auto;
}

nav.connected .nav-items-icons + .nav-item-title {
    position: absolute;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
    background-color: var(--grey-light);
    padding: 5px 8px;
    pointer-events: none;
    border-radius: 10px;
    z-index: 5002;
    font-size: 0.8rem;
    opacity: 0;
    font-weight: 500;
    transition: all .2s ease;
    color: var(--main-text) !important;
}

nav.connected .nav-items-icons + .nav-item-title.community {
    bottom: -28px;
}

@media screen and (min-width:1170px) {
    nav.connected .nav-items-icons:hover + .nav-item-title {
        opacity: 1;
    }
}


nav.connected .nav-items-icons {
    position: relative;
    margin: auto;
    cursor: pointer;
    transition: all .2s ease;
}

    nav.connected .nav-items-icons::after {
        content: '';
        width: 40px;
        height: 40px;
        background-color: var(--grey-light);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        border-radius: 8px;
        transition: all .2s ease;
        opacity: 0;
    }

    nav.connected .nav-items-connected.modules .nav-items-icons::after {
        content: '';
        width: 60px;
        height: 55px;
        background-color: var(--grey-light);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        border-radius: 8px;
        transition: all .2s ease;
        opacity: 0;
    }

@media screen and (min-width:1170px) {
    nav.connected .nav-items-connected:not(.profil) .nav-items-icons:hover::after {
        opacity: 1;
    }
}


nav.connected .nav-items-connected.open:not(.profil) .nav-items-icons::after {
    opacity: 1;
}

nav.connected .nav-items-icons img {
    width: 25px;
    height: 25px;
}

nav.connected .nav-items-icons .nav-icons-content {
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: center;
    transition: all .2s ease;
    position: relative;
}

    nav.connected .nav-items-icons .nav-icons-content svg {
        width: 100%;
    }

        nav.connected .nav-items-icons .nav-icons-content svg path {
            transition: all .2s ease;
            fill: #000000;
        }

        nav.edu.connected .nav-items-icons .nav-icons-content svg path {
            transition: all .2s ease;
            fill: #727272;
        }

        body.dark nav.connected .nav-items-icons .nav-icons-content svg path {
            fill: #FFFFFF;
        }

    nav.edu.connected .nav-items-icons .nav-icons-content.etab-profil:hover svg path {
        fill: var(--orange-primary);
    }

nav.connected .etab-profil.open .nav-items-icons .nav-icons-content.etab-profil svg path {
    fill: var(--orange-primary);
}

nav.connected .nav-items-icons .nav-icons-content.search {
    background-image: url(../images/icons/ic_search_grey.svg);
    transition: all .2s ease;
    backface-visibility: hidden;
}

nav.connected .nav-items-icons .nav-icons-content.commu {
    background-image: url(../images/icons/ic_commu_black.svg);
}

nav.connected .nav-items-icons .nav-icons-content.agenda {
    background-image: url(../images/icons/ic_calendar2_black.svg);
    background-size: 30px 30px;
}

nav.connected .nav-items-icons .nav-icons-content.dashboard {
    background-image: url(../images/icons/ic_dashboard_black.svg);
    background-size: 25px 25px;
}

nav.connected .nav-items-icons .nav-icons-content.peers {
    background-image: url(../images/icons/ic_people_black.svg);
}

body.dark nav.connected .nav-items-icons .nav-icons-content.commu {
    background-image: url(../images/icons/ic_commu_white.svg);
}

body.dark nav.connected .nav-items-icons .nav-icons-content.agenda {
    background-image: url(../images/icons/ic_calendar2_white.svg);
}

body.dark nav.connected .nav-items-icons .nav-icons-content.dashboard {
    background-image: url(../images/icons/ic_dashboard_white.svg);
}

body.dark nav.connected .nav-items-icons .nav-icons-content.peers {
    background-image: url(../images/icons/ic_people_white.svg);
}

nav.connected .nav-items-connected.open .nav-items-icons .nav-icons-content.search {
    background-image: url(../images/icons/ic_search_blue.svg);
}

nav.connected .nav-items-icons .nav-icons-content.search:hover {
    transform: scale(1.08);
}

nav.connected:not(.edu) .nav-items-icons .nav-icons-content.notif {
    background-image: url(../images/icons/ic_notif_black.svg);
}

nav.connected:not(.edu) .nav-items-icons .nav-icons-content.chat {
    background-image: url(../images/icons/ic_chat_black.svg);
}

body.dark nav.connected:not(.edu) .nav-items-icons .nav-icons-content.notif {
    background-image: url(../images/icons/ic_notif_white.svg);
}

body.dark nav.connected:not(.edu) .nav-items-icons .nav-icons-content.chat {
    background-image: url(../images/icons/ic_chat_white.svg);
}




nav.connected .nav-items-icons .nav-notification-number {
    padding: 4px;
    background-color: #FF5050;
    border-radius: 90px;
    color: white;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    position: absolute;
    top: -10px;
    right: -12px;
    overflow: hidden;
    min-width: 10px;
    min-height: 10px;
}

.nf-mobile-nav .nav-notification-number {
    padding: 2px;
    background-color: #FF5050;
    border-radius: 90px;
    color: white;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    position: absolute;
    top: 17px;
    left: 20px;
    overflow: hidden;
    min-width: 10px;
    min-height: 10px;
}

.nf-mobile-nav .nav-match-number {
    padding: 2px;
    background-color: #FF5050;
    border-radius: 90px;
    color: white;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    position: relative;
    min-width: 20px;
    min-height: 10px;
    height: 20px;
    top: 15px;
    right: 10px;
}

nav.connected .nav-items-icons .no-verified-warning {
    position: absolute;
    bottom: -8px;
    left: -8px;
}

    nav.connected .nav-items-icons .no-verified-warning img {
        width: 22px !important;
        height: 22px !important;
    }

    nav.connected .nav-items-icons .no-verified-warning::before {
        content: 'Profil non vérifié';
        position: absolute;
        background-color: #FF5050;
        border-radius: 5px;
        padding: 5px 10px;
        color: white;
        font-weight: 500;
        font-size: 0.8rem;
        width: 115px;
        bottom: -25px;
        opacity: 0;
        pointer-events: none;
        text-align: center;
        transform: scale(0.8);
        pointer-events: none;
        transition: all .2s ease;
        right: -50px;
        z-index: 150;
    }

    nav.connected .nav-items-icons .no-verified-warning:hover::before {
        pointer-events: all;
        opacity: 1;
        transform: none;
    }

nav.connected .nav-items-connected-container .nav-items-dropdown-menu {
    position: absolute;
    width: 370px;
    background-color: white;
    background-color: var(--main-bg);
    right: 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    top: 65px;
    max-height: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    transition: all .2s ease-out;
    opacity: 0;
    box-shadow: 0px 15px 16px 0px var(--shadow);
}

nav.connected .nav-items-connected-container .nav-items-connected.peers .nav-items-dropdown-menu {
    width: 500px;
}

nav.connected .nav-items-connected-container .nav-items-connected.open .nav-items-dropdown-menu {
    opacity: 1;
    max-height: 700px;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu::-webkit-scrollbar {
    width: 3px;
    position: absolute;
    right: 0;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #929292;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu.etab-profil {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    border-top: solid 1px #f7f7f7;
}




    nav.connected .nav-items-connected-container .nav-items-dropdown-menu.etab-profil .ic-rubis {
        width: 27px;
        height: 27px;
        vertical-align: -6px;
    }

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu.etab-profil .btn-orange {
        width: 100%;
        border-radius: 0px;
    }

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-container {
    width: 100%;
    display: flex;
    padding: 25px 15px;
    transition: all .1s ease;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu ul li {
    margin-right: 0px;
    width: 100%;
    margin-top: 0px;
    position: relative;
    border-bottom: solid 1px var(--grey-light);
    cursor: pointer;
}

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu ul li.margin-top20 {
        margin-top: 20px;
    }

nav.connected .nav-items-connected-container .nav-items-connected.notification .nav-items-dropdown-menu ul li:first-child {
    border-top: none;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu ul li.unseen {
    background-color: #EEF9FF;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu ul li.empty img {
    width: 50px;
    height: 50px;
}

@media screen and (max-height:730px) {
    nav.connected .nav-items-connected-container .nav-items-dropdown-menu ul.profil-list {
        margin-bottom: 10px;
    }
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu ul li:not(.loading) .nav-notification-container:hover {
    background-color: #C8ECFF;
}

body.dark nav.connected .nav-items-connected-container .nav-items-dropdown-menu ul li:not(.loading) .nav-notification-container:hover {
    background-color: #353a48;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-image {
    padding: 0px;
    flex: 0 0 50px;
    max-width: 50px;
    margin-right: 15px;
    position: relative;
}

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-image img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        pointer-events: none;
    }

.nav-items-connected:last-child .nav-items-dropdown-menu li:not(.loading) .nav-notification-image::after {
    content: "";
    width: 25px;
    height: 25px;
    /* background-image: url(../images/icons/ic_warning_red.svg); */
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 30px;
    left: 30px;
    border-radius: 50%;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu li.loading .nav-notification-image .loading-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    background-color: #E1E6E8;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-content .title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0px;
    display: flex;
    padding-right: 10px;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu li.loading .nav-notification-content .title {
    position: relative;
    overflow: hidden;
    background-color: #E1E6E8;
    border-radius: 8px;
    width: 170px;
    height: 17px;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-content {
    flex: 1;
    max-width: 100%;
}

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-content .nav-notification-title {
        display: flex;
        justify-content: space-between;
        position: relative;
        max-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


        nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-content .nav-notification-title .time {
            color: #929292;
            margin-bottom: 0px;
            font-size: 0.7rem;
        }

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-title span {
    width: 8px;
    height: 8px;
    background-color: transparent;
    border: solid 1px #929292;
    border-radius: 50%;
    margin-top: 5px;
    position: absolute;
    right: 0px;
    top: 20px;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu li.unseen span {
    background-color: #929292;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-content .nav-notification-message {
    font-size: 0.8rem;
    color: #929292;
    font-weight: 300;
    margin-bottom: 0px;
    padding-right: 20px;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-content .nav-notification-time {
    position: relative;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu li.unseen .nav-notification-content .nav-notification-time:after {
    content: '';
    position: absolute;
    left: -15px;
    top: 3px;
    width: 8px;
    height: 8px;
    background-color: #FF5050;
    border-radius: 50%;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu li.unseen .nav-notification-content .nav-notification-message {
    color: var(--main-text);
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu li.loading .nav-notification-content .nav-notification-message {
    position: relative;
    overflow: hidden;
    background-color: #E1E6E8;
    border-radius: 8px;
    width: 275px;
    height: 30px;
    margin-top: 5px;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-content .number_unseen {
    margin-left: 5px;
}

nav.connected .nav-items-connected-container .nav-items-connected.profil .nav-items-icons img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

nav.connected .nav-items-connected-container .nav-items-connected.profil .nav-items-icons .arrow-bottom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    right: -15px;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil {
    overflow-y: hidden;
    /*background-color: var(--grey-light);*/
    top: 65px;
    width: 300px;
    cursor: auto;
    right: -20px;
}

nav.connected .nav-items-connected-container .nav-items-connected.modules .nav-items-dropdown-menu {
    display: none;
    overflow-y: auto;
    /*background-color: var(--grey-light);*/
    top: 65px;
    width: 450px;
    cursor: auto;
    right: -20px;
    padding: 20px;
}

nav.connected .nav-items-connected-container .nav-items-connected.modules.open .nav-items-dropdown-menu {
    display: block;
}

    nav .connected .nav-items-connected-container .nav-items-connected.modules .nav-items-dropdown-menu ul li {
        border: none;
    }

    nav.connected .nav-items-connected-container .nav-items-connected.modules .nav-items-dropdown-menu #recruit-dropdown + #recruit-sublist {
        display: none;
    }

    nav.connected .nav-items-connected-container .nav-items-connected.modules .nav-items-dropdown-menu #recruit-dropdown .arrow-bottom {
        transform: rotate(45deg);
        margin-left: 10px;
        margin-bottom: 3px;
    }

    nav.connected .nav-items-connected-container .nav-items-connected.modules .nav-items-dropdown-menu #recruit-dropdown.open + #recruit-sublist {
        display: block;
    }

    nav.connected .nav-items-connected-container .nav-items-connected.modules .nav-items-dropdown-menu #recruit-dropdown.open .arrow-bottom {
        transform: rotate(225deg);
        margin-left: 10px;
        margin-bottom: 0px;
    }

    body.dark nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil {
        background-color: #151619;
    }

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil .dropdown-menu-profil-head {
        height: 90px;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        width: 100%;
    }

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil .b2b-dropdown-menu-profil-head {
        display: flex;
        padding: 20px;
        background-color: var(--blue-primary);
    }

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil .grey {
        color: #929292;
    }

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .profil-recap .item {
    padding: 0px 10px;
    border-right: solid 2px var(--grey-dark);
}

.nav-profil-overflow-wrapper .profil-recap .item {
    padding: 0px 10px;
    border-right: solid 2px var(--grey-dark);
}

    .nav-profil-overflow-wrapper .profil-recap .item.lvl, nav.connected .nav-items-connected-container .nav-items-dropdown-menu .profil-recap .item.lvl {
        position: relative;
        padding-left: 33px;
        background-image: url(../images/icons/ic_shard_small.png);
        background-size: 25px;
        background-position: left 0px top -6px;
        background-repeat: no-repeat;
    }

    .nav-profil-overflow-wrapper .profil-recap .item:last-child {
        border-right: none;
    }

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .profil-recap .item:last-child {
    border-right: none;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil .dropdown-menu-profil {
    margin-top: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid 2px var(--main-bg);
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil .dropdown-menu-profil-head img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil ul li {
    border-bottom: none;
    padding: 5px 25px;
    width: auto;
}

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil ul li.no-verified {
        background-image: url(../images/icons/ic_warning_red.svg);
        background-size: 15px 15px;
        background-position: left 5px center;
        background-repeat: no-repeat;
    }

        nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil ul li.no-verified a {
            font-weight: 500;
            color: #FF5050;
        }

nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil .help {
    margin-top: 10px;
    margin-bottom: 10px;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil .logout {
    color: #929292;
    margin-top: 15px;
}

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu.profil .logout img {
        width: 15px;
        height: 15px;
        vertical-align: -1px;
        display: inline-block;
        margin-right: 10px;
    }

nav.connected .nav-items-connected-container .nav-items-connected .nav-items-dropdown-menu.search {
    overflow-y: hidden;
}

    nav.connected .nav-items-connected-container .nav-items-connected .nav-items-dropdown-menu.search input {
        margin: 10px;
        width: calc(100% - 20px);
    }

nav.connected .nav-items-connected-container .nav-items-connected.open .nav-items-dropdown-menu.search {
    max-height: 450px;
}

nav.connected .nav-items-connected-container .nav-items-connected .nav-items-dropdown-menu.search .search-btn {
    position: absolute;
    right: 9px;
    top: 10px;
    height: 40px;
    width: 40px;
    border-radius: 0px 8px 8px 0px;
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/icons/ic_search_white.svg);
    transition: all .2s;
}

nav.connected .nav-items-connected-container .nav-items-connected.open .nav-items-dropdown-menu.search input[type="text"]:focus + .search-btn {
    height: 50px;
}

nav.connected .nav-items-connected-container .nav-items-connected.open .nav-items-dropdown-menu.search input[type="text"] {
    padding-right: 45px;
}

nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-content .peers-btns-wrapper {
    margin-left: -5px;
    margin-right: -5px;
}

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu .nav-notification-content .peers-btns-wrapper button {
        height: 30px;
        line-height: 1px;
    }

.nav-items-connected .nav-items-dropdown-menu.search .suggestions-preset {
    display: flex;
    padding: 10px 10px;
    width: 100%;
    overflow-x: scroll;
    scrollbar-width: thin;
}

    .nav-items-connected .nav-items-dropdown-menu.search .suggestions-preset::-webkit-scrollbar {
        height: 5px;
    }

    .nav-items-connected .nav-items-dropdown-menu.search .suggestions-preset::-webkit-scrollbar-thumb {
        background-color: rgb(225, 225, 225);
        border-radius: 5px;
    }

    .nav-items-connected .nav-items-dropdown-menu.search .suggestions-preset li {
        flex: 0 0 auto;
        position: relative;
        width: auto;
        border-bottom: none;
    }

        .nav-items-connected .nav-items-dropdown-menu.search .suggestions-preset li .preset-content {
            border-radius: 8px;
            padding: 7px 6px;
            color: #BCBCBC;
            cursor: pointer;
            border: solid 1px #BCBCBC;
            margin-left: 4px;
            margin-right: 4px;
            transition: all .2s ease;
        }

        .nav-items-connected .nav-items-dropdown-menu.search .suggestions-preset li input {
            display: none;
        }

        .nav-items-connected .nav-items-dropdown-menu.search .suggestions-preset li:hover .preset-content {
            color: white;
            background-color: var(--blue-primary);
            border-color: var(--blue-primary);
        }

        .nav-items-connected .nav-items-dropdown-menu.search .suggestions-preset li input:checked + .preset-content {
            color: white;
            background-color: var(--blue-primary);
            border-color: var(--blue-primary);
        }

.nav-items-connected .nav-items-dropdown-menu.search .suggestions-content {
    overflow-y: scroll;
    max-height: 425px;
    scrollbar-width: thin;
    padding-bottom: 100px;
    margin-top: 10px;
}

    .nav-items-connected .nav-items-dropdown-menu.search .suggestions-content::-webkit-scrollbar {
        width: 3px;
    }

    .nav-items-connected .nav-items-dropdown-menu.search .suggestions-content::-webkit-scrollbar-thumb {
        background-color: rgb(228, 228, 228);
        border-radius: 5px;
    }

    .nav-items-connected .nav-items-dropdown-menu.search .suggestions-content li {
        transition: all .2s ease;
        width: 100%;
        padding: 10px 20px;
        cursor: pointer;
    }



        .nav-items-connected .nav-items-dropdown-menu.search .suggestions-content li .item-container {
            display: flex;
        }

        .nav-items-connected .nav-items-dropdown-menu.search .suggestions-content li:hover {
            background-color: #E5F6FF;
        }

        .nav-items-connected .nav-items-dropdown-menu.search .suggestions-content li .item-img {
            margin-right: 20px;
        }

            .nav-items-connected .nav-items-dropdown-menu.search .suggestions-content li .item-img img {
                border-radius: 50%;
                width: 55px;
                height: 55px;
            }

        .nav-items-connected .nav-items-dropdown-menu.search .suggestions-content li .item-title {
            height: 100%;
            padding-top: 7px;
            padding-bottom: 7px;
            display: flex;
            flex-direction: column;
        }

@media screen and (max-width:1500px) {
    nav.connected .nav-cats {
        position: absolute;
        transform: translateX(-50%);
        left: 45%;
    }
}

@media screen and (max-width:1170px) {

    nav.connected .nav-logo .nav-logo-content, nav.connected .nav-logo .nav-logo-content.b2b {
        background-image: url(../images/logos/LOGO-PP-PrePeers.svg);
        height: 35px;
        width: 35px;
        background-size: cover;
        margin-top: -1px;
    }

    nav.connected.premium .nav-logo .nav-logo-content, nav.connected.premium .nav-logo .nav-logo-content.b2b {
        background-image: url(../images/logos/LOGO-compact-PrePeers-Premium.svg);
    }


    nav.connected .nav-items-connected-container.b2b {
        /*right: auto;*/
        height: 50px;
        top: 0px;
        /*left: 50%;*/
        /*transform: translateX(-50%);*/
    }

    nav.connected .nav-items-connected-container.b2b .nav-items-dropdown-menu {
        left: 50%;
        transform: translateX(-50%);
    }

    nav.connected .nav-items-connected-container:not(.b2b) {
        right: 10px;
        height: 50px;
        top: 0px;
    }

    nav.connected .nav-items-connected-container .nav-items-connected.open .nav-items-dropdown-menu {
        height: calc(100vh - 50px);
        max-height: none;
    }

        nav.connected .nav-items-connected-container .nav-items-connected.open .nav-items-dropdown-menu.search {
            max-height: none;
        }

    nav.connected .nav-items-connected-container .nav-items-connected.peers .nav-items-dropdown-menu {
        width: auto;
    }

    .nav-items-connected .nav-items-dropdown-menu.search .suggestions-content {
        max-height: 100%;
        padding-bottom: 125px;
    }

    nav.connected .nav-items-connected-container .nav-items-dropdown-menu {
        min-width: 100vw;
        width: 100%;
        position: fixed;
        left: 0px;
        top: 50px;
    }

    nav.connected .nav-items-connected {
        position: static;
    }


    nav.connected .nav-items-connected-container .nav-items-connected.profil {
        display: none;
    }
}

/*Navigation*/
nav .navigation-container {
    position: fixed;
    top: 65px;
    width: 100%;
    left: 0px;
    background-color: white;
    background-color: var(--main-bg);
    transition: all .2s ease;
    max-height: 0px;
    overflow: hidden;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
    display: flex;
}

    nav .navigation-container.open {
        height: 295px;
        max-height: 295px;
    }

    nav .navigation-container .navigation-cat {
        border-right: solid 1px var(--grey-light);
        flex: 0 0 auto;
    }

        nav .navigation-container .navigation-cat li {
            padding: 20px 30px 20px 65px;
            transition: all .2s ease;
        }

body.dark nav .navigation-container .navigation-cat li {
    color: white;
}

nav .navigation-container .navigation-cat li:hover {
    color: white;
}

nav .navigation-container .navigation-cat li.active {
    color: white;
}

nav .navigation-container .navigation-cat li {
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: left 20px center;
}

    nav .navigation-container .navigation-cat li.home {
        background-image: url(../images/icons/ic_home_blue.svg);
    }

        nav .navigation-container .navigation-cat li.home:hover {
            background-color: var(--blue-primary);
            background-image: url(../images/icons/ic_home_white.svg);
        }

        nav .navigation-container .navigation-cat li.home.active {
            background-color: var(--blue-primary);
            background-image: url(../images/icons/ic_home_white.svg);
        }

    nav .navigation-container .navigation-cat li.coach {
        background-image: url(../images/icons/ic_hat_green.svg);
    }

        nav .navigation-container .navigation-cat li.coach:hover {
            background-color: var(--green-primary);
            background-image: url(../images/icons/ic_hat_white.svg);
        }

        nav .navigation-container .navigation-cat li.coach.active {
            background-color: var(--green-primary);
            background-image: url(../images/icons/ic_hat_white.svg);
        }

    nav .navigation-container .navigation-cat li.school {
        background-image: url(../images/icons/ic_compass_orange_trans.svg);
    }

        nav .navigation-container .navigation-cat li.school:hover {
            background-color: var(--orange-primary);
            background-image: url(../images/icons/ic_compass_white_full.svg);
        }

        nav .navigation-container .navigation-cat li.school.active {
            background-color: var(--orange-primary);
            background-image: url(../images/icons/ic_compass_white_full.svg);
        }

        nav .navigation-container .navigation-cat li.school.pro {
            background-image: url(../images/icons/ic_lightning_shine_orange.svg);
        }

            nav .navigation-container .navigation-cat li.school.pro:hover {
                background-color: var(--orange-primary);
                background-image: url(../images/icons/ic_lightning_shine_white.svg);
            }

            nav .navigation-container .navigation-cat li.school.pro.active {
                background-color: var(--orange-primary);
                background-image: url(../images/icons/ic_lightning_shine_white.svg);
            }

    nav .navigation-container .navigation-cat li.business {
        background-image: url(../images/icons/ic_briefcase_purple.svg);
    }

        nav .navigation-container .navigation-cat li.business:hover {
            background-color: var(--purple-primary);
            background-image: url(../images/icons/ic_briefcase_white.svg);
        }

        nav .navigation-container .navigation-cat li.business.active {
            background-color: var(--purple-primary);
            background-image: url(../images/icons/ic_briefcase_white.svg);
        }

    nav .navigation-container .navigation-cat li.pro-business {
        background-image: url(../images/icons/ic_lightbolt_purple.svg);
        background-size: 15px;
    }

    nav .navigation-container .navigation-cat li.pro-school {
        background-image: url(../images/icons/ic_lightbolt_orange.svg);
        background-size: 15px;
    }

    nav .navigation-container .navigation-cat li.pro-business:hover,
    nav .navigation-container .navigation-cat li.pro-business.active {
        background-color: var(--purple-primary);
        background-image: url(../images/icons/ic_lightbolt_white.svg);
    }

    nav .navigation-container .navigation-cat li.pro-school:hover,
    nav .navigation-container .navigation-cat li.pro-school.active {
        background-color: var(--orange-primary);
        background-image: url(../images/icons/ic_lightbolt_white.svg);
    }



nav .navigation-container .navigation-content {
    flex: 1;
}

    nav .navigation-container .navigation-content .cat {
        display: none;
        padding: 20px 50px;
        width: 100%;
    }

        nav .navigation-container .navigation-content .cat.active {
            display: flex;
            height: 100%;
        }

        nav .navigation-container .navigation-content .cat .link {
            padding: 5px 8px;
            border-radius: 8px;
            margin-bottom: 10px;
        }

            nav .navigation-container .navigation-content .cat .link .svg-container {
                width: 23px;
                margin-right: 5px;
                display: inline-block;
            }

            nav .navigation-container .navigation-content .cat .link svg {
                vertical-align: -5px;
                width: 100%;
                max-height: 20px;
                transition: all .2s ease;
            }

            nav .navigation-container .navigation-content .cat .link img {
                width: 100%;
                vertical-align: -5px;
            }

            nav .navigation-container .navigation-content .cat .link:hover svg {
                transform: scale(1.15);
            }

            nav .navigation-container .navigation-content .cat .link:hover {
                background-color: var(--grey-light);
            }

    nav .navigation-container .navigation-content .col.pro {
        border-left: solid 1px var(--grey-light);
        padding-left: 50px;
    }

    nav .navigation-container .navigation-content .search-box {
        flex: 1;
        max-width: 330px;
        margin-left: auto;
        padding: 20px 40px;
        position: relative;
    }

    nav .navigation-container .navigation-content .cat.coach .search-box {
        background: rgb(3, 160, 241);
        background: -moz-linear-gradient(50deg, rgba(3, 160, 241, 1) 0%, rgba(25, 207, 137, 1) 100%);
        background: -webkit-linear-gradient(50deg, rgba(3, 160, 241, 1) 0%, rgba(25, 207, 137, 1) 100%);
        background: linear-gradient(50deg, rgba(3, 160, 241, 1) 0%, rgba(25, 207, 137, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#03a0f1", endColorstr="var(--green-primary);", GradientType=1);
    }

    nav .navigation-container .navigation-content .cat.school .search-box {
        background: rgb(255, 145, 0);
        background: -moz-radial-gradient(circle, rgba(255, 145, 0, 1) 0%, rgba(255, 204, 0, 1) 100%);
        background: -webkit-radial-gradient(circle, rgba(255, 145, 0, 1) 0%, rgba(255, 204, 0, 1) 100%);
        background: radial-gradient(circle, rgba(255, 145, 0, 1) 0%, rgba(255, 204, 0, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--orange-primary);", endColorstr="#ffcc00", GradientType=1);
    }

    nav .navigation-container .navigation-content .cat.business .search-box {
        background: rgb(140, 117, 235);
        background: -moz-linear-gradient(53deg, rgba(140, 117, 235, 1) 0%, rgba(172, 154, 255, 1) 100%);
        background: -webkit-linear-gradient(53deg, rgba(140, 117, 235, 1) 0%, rgba(172, 154, 255, 1) 100%);
        background: linear-gradient(53deg, rgba(140, 117, 235, 1) 0%, rgba(172, 154, 255, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--purple-primary);", endColorstr="#ac9aff", GradientType=1);
    }

    nav .navigation-container .navigation-content .search-box input {
        border: none;
        color: white;
        box-shadow: none;
        background-image: url(../images/icons/ic_search_white.svg);
        width: calc(100% - 40px);
        margin-top: 20px;
        padding: 10px 15px 10px 40px;
        position: absolute;
        bottom: 20px;
        left: 20px;
    }

        nav .navigation-container .navigation-content .search-box input::placeholder {
            color: rgba(255, 255, 255, 0.699);
        }

    nav .navigation-container .navigation-content .search-box img {
        position: absolute;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        width: 100%;
    }

    nav .navigation-container .navigation-content .cat.coach .search-box img {
        top: -38px;
        width: 253px;
    }

    nav .navigation-container .navigation-content .cat.school .search-box img {
        width: 200px;
        top: -5px;
    }

    nav .navigation-container .navigation-content .cat.business .search-box img {
        width: 150px;
    }


@media screen and (max-width:1620px) {


    nav .navigation-container .navigation-content .cat .col {
        margin-left: 20px;
    }

        nav .navigation-container .navigation-content .cat .col.pro {
            padding-left: 20px;
        }

        nav .navigation-container .navigation-content .cat .col:first-child {
            margin-left: 0px;
        }

    nav .navigation-container .navigation-content .search-box {
        max-width: 284px;
        flex: 0 0 284px;
    }

    nav .navigation-container .navigation-content .cat.coach .search-box img {
        top: -27px;
        width: 239px;
    }
}

@media screen and (min-width:1500px) {
    nav .navigation-container .navigation-content .cat.pro .col:not(:first-child) {
        margin-left: 8%;
    }
}

@media screen and (max-width:1500px) {
    nav .navigation-container .navigation-content .cat .search-box {
        display: none;
    }

    nav .navigation-container .navigation-content .cat .col {
        margin-left: 4%;
    }
}

@media screen and (max-width:1280px) {
    nav .navigation-container .navigation-cat {
        display: none;
    }

    nav .navigation-container .navigation-content .cat {
        justify-content: left;
    }

        nav .navigation-container .navigation-content .cat .col {
            margin-left: 100px;
        }

            nav .navigation-container .navigation-content .cat .col:first-child {
                margin-left: 00px;
            }

            nav .navigation-container .navigation-content .cat .col.pro {
                padding-left: 50px;
            }
}

@media screen and (max-width:1170px) {
    nav .navigation-container {
        display: none;
    }
}


/*Menu mobile*/
.mobile-menu .mobile-menu-nav-box .link {
    padding: 5px 8px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    position: relative;
}

    .mobile-menu .mobile-menu-nav-box .link .svg-container {
        width: 23px;
        margin-right: 10px;
        display: inline-block;
    }

    .mobile-menu .mobile-menu-nav-box .link svg {
        vertical-align: -5px;
        width: 100%;
        max-height: 20px;
    }

    .mobile-menu .mobile-menu-nav-box .link img {
        width: 100%;
        vertical-align: -5px;
    }

.mobile-menu .mobile-menu-nav-box {
    max-height: 50px;
    background-color: var(--main-bg);
    border-radius: 8px;
    overflow: hidden;
    padding: 0px 15px 0px 15px;
    transition: all .3s ease;
    box-shadow: 0px 3px 16px 0px rgba(121, 151, 191, 0.25);
}

body.dark .mobile-menu .mobile-menu-nav-box {
}

.mobile-menu .mobile-menu-nav-box.open {
    max-height: 800px;
}

.mobile-menu .mobile-menu-nav-box .title {
    width: 100%;
    position: relative;
    padding: 15px 10px 15px 40px;
    transition: all .2s ease;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 25px;
}

.mobile-menu .mobile-menu-nav-box.home .title {
    background-image: url(../images/icons/ic_home_blue.svg);
}

.mobile-menu .mobile-menu-nav-box.coach .title {
    background-image: url(../images/icons/ic_hat_green.svg);
}

.mobile-menu .mobile-menu-nav-box.school .title {
    background-image: url(../images/icons/ic_compass_orange_trans.svg);
}

.mobile-menu .mobile-menu-nav-box.school.pro .title {
    background-image: url(../images/icons/ic_lightning_shine_orange.svg);
}

.mobile-menu .mobile-menu-nav-box.school.pro .title.general {
    background-image: url(../images/icons/ic_eye_rounded_grey.svg);
}
.mobile-menu .mobile-menu-nav-box.school.pro .title.param {
    background-image: url(../images/icons/ic_param_menu.svg);
}
.mobile-menu .mobile-menu-nav-box.school.pro .title.modules {
    background-image: url(../images/icons/ic_aca_modules.svg);
}

.mobile-menu .mobile-menu-nav-box.business .title {
    background-image: url(../images/icons/ic_briefcase_purple.svg);
}

.mobile-menu .mobile-menu-nav-box.pro-business .title {
    background-image: url(../images/icons/ic_lightbolt_purple.svg);
    background-size: 16px;
}

.mobile-menu .mobile-menu-nav-box.pro-school .title {
    background-image: url(../images/icons/ic_lightbolt_orange.svg);
    background-size: 16px;
}

.mobile-menu .mobile-menu-nav-box .title .arrow-bottom {
    position: absolute;
    right: 10px;
    top: calc(50% - 6px);
    border-width: 0 3px 3px 0;
    padding: 4px;
}

.mobile-menu .mobile-menu-nav-box.open .arrow-bottom {
    transform: rotate(-135deg);
}

.mobile-menu .mobile-menu-nav-box.home.open .title {
    color: var(--blue-primary);
}

.mobile-menu .mobile-menu-nav-box.coach.open .title {
    color: var(--green-primary);
}

.mobile-menu .mobile-menu-nav-box.school.open .title {
    color: var(--orange-primary);
}

.mobile-menu .mobile-menu-nav-box.school.open .subtitle {
    font-size: 0.9rem;
    padding-left: 20px;
}

.mobile-menu .mobile-menu-nav-box.school.open .subtitle-link {
    font-size: 0.9rem;
    padding-left: 30px;
}

.mobile-menu .mobile-menu-nav-box.business.open .title,
.mobile-menu .mobile-menu-nav-box.pro-business.open .title {
    color: var(--purple-primary);
}


.mobile-menu .mobile-menu-nav-box .rem105.w6 {
    margin-left: 5px;
    margin-top: 20px;
}

@media screen and (min-width:2000px) {
    nav .navigation-container .navigation-content .cat .col {
        margin-left: 10%;
    }
}

.mobile-menu .mobile-menu-content .auth-btns-container {
    margin-top: 20px;
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}

    .mobile-menu .mobile-menu-content .auth-btns-container.margin-top100 {
        margin-top: 100px;
    }

    .mobile-menu .mobile-menu-content .auth-btns-container.position-absolute {
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        margin-left: 0px;
        margin-right: 0px;
        opacity: 0;
        transition: all .2s ease;
        transition-delay: .5s;
    }

.mobile-menu.open .mobile-menu-content .auth-btns-container.position-absolute {
    opacity: 1;
}

.mobile-menu .mobile-menu-content .auth-btns-container a {
    padding: 10px;
}

    .mobile-menu .mobile-menu-content .auth-btns-container a button {
        border-radius: 5px;
        width: 100%;
    }

.mobile-menu .mobile-menu-content .auth-btns-container.logout {
    margin-top: 20px;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

.mobile-menu .mobile-menu-content .auth-btns-container button.btn-rouge {
    border-radius: 5px;
    width: 100%;
}

.mobile-menu .mobile-menu-content .connected-box {
    border: solid 1px #dadada;
    background-color: white;
    background-color: var(--main-bg);
}

body.dark .mobile-menu .mobile-menu-content .connected-box {
    border-color: var(--grey-light);
}

.mobile-menu .mobile-menu-content .connected-box .box-icon img {
    width: 25px;
    height: 25px;
    vertical-align: -5px;
}

    .mobile-menu .mobile-menu-content .connected-box .box-icon img.profil {
        border-radius: 50%;
        width: 48px;
        height: 48px;
    }

.mobile-menu .mobile-menu-content .connected-box.no-verified .box-icon {
    position: relative;
}

    .mobile-menu .mobile-menu-content .connected-box.no-verified .box-icon::after {
        content: '';
        position: absolute;
        left: -6px;
        bottom: -5px;
        width: 20px;
        height: 20px;
        background-image: url(../images/icons/ic_warning_red.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }

.mobile-menu .mobile-menu-content .connected-box .box-content .arrow-bottom {
    position: absolute;
    right: 13px;
    top: 15px;
    border-width: 0 3px 3px 0;
    padding: 4px;
}

.mobile-menu .mobile-menu-content .connected-box.open .box-content .arrow-bottom {
    transform: rotate(-135deg);
}

.mobile-menu .mobile-menu-content .connected-box .box-dropdown {
    transition: all .2s ease;
    max-height: 0px;
    overflow: hidden;
    flex: 0 0 100%;
    max-width: 100%;
}

.mobile-menu .mobile-menu-content .connected-box.open .box-dropdown {
    max-height: 250px;
    margin-top: 10px;
}

.mobile-menu .mobile-menu-content .connected-box .box-dropdown .item {
    border: solid 1px var(--grey-light);
    transition: all .2s ease;
    padding: 15px 15px;
    padding-left: 55px;
    background-repeat: no-repeat;
    background-position: left 15px center;
    background-size: 25px;
}

    .mobile-menu .mobile-menu-content .connected-box .box-dropdown .item.home {
        background-image: url(../images/icons/ic_home_blue.svg);
    }

    .mobile-menu .mobile-menu-content .connected-box .box-dropdown .item.school {
        background-image: url(../images/icons/ic_rocket_blue_light.svg);
    }

    .mobile-menu .mobile-menu-content .connected-box .box-dropdown .item.job {
        background-image: url(../images/icons/ic_briefcase_purple.svg);
    }

/*Menu Gestion*/
.menu-gestion {
    display: flex;
    width: 100%;
    position: relative;
    z-index: 5002;
    box-shadow: 0px 3px 6px 0px rgba(121, 151, 191, 0.15);
}

    .menu-gestion a {
        transition: none;
    }

    .menu-gestion a {
        flex: 1;
    }

    .menu-gestion li {
        cursor: pointer;
        text-align: center;
        transition: all .2s ease;
        flex: 1;
        background-color: white;
        background-color: var(--main-bg);
    }

        .menu-gestion li .content:not(.mobile) {
            padding: 15px;
        }

        .menu-gestion li.active {
            color: white;
            background-color: var(--blue-primary);
        }

            .menu-gestion li.active .content.pc {
                color: white;
            }

        .menu-gestion li:hover .content.pc {
            color: white;
        }

        .menu-gestion li:hover {
            color: white;
            background-color: var(--blue-primary);
        }

    .menu-gestion.school li.active {
        background: linear-gradient(0deg, var(--orange-primary) 0%, var(--dark-orange) 100%);
    }

    .menu-gestion.school li:hover {
        background: linear-gradient(0deg, var(--orange-primary) 0%, var(--dark-orange) 100%);
    }

    .menu-gestion.entreprise li.active {
        background-color: var(--purple-primary);
    }

    .menu-gestion.entreprise li:hover {
        background-color: var(--purple-primary);
    }

    .menu-gestion li .content.mobile {
        display: none;
    }

        .menu-gestion li .content.mobile img {
            filter: grayscale(1);
            width: 25px;
            height: 25px;
        }

            .menu-gestion li .content.mobile img.offres {
                width: 30px;
                height: 30px;
                margin-top: -4px;
            }

        .menu-gestion li .content.mobile .ic-profil {
            border-radius: 50%;
            transform: scale(1.3);
        }

/* .menu-gestion li .content.mobile */
@media screen and (max-width:1170px) {
    .menu-gestion {
        position: fixed;
        bottom: -1px;
        left: 0px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        overflow: hidden;
        box-shadow: 0px -3px 16px 0px rgba(121, 151, 191, 0.35);
    }

        .menu-gestion li .content.pc {
            display: none;
        }

        .menu-gestion li:hover {
            background-color: white;
            background-color: var(--main-bg);
        }

        .menu-gestion.school li:hover {
            background-color: white;
            background-color: var(--main-bg);
        }

        .menu-gestion li.active {
            background-color: white;
            background-color: var(--main-bg);
        }

        .menu-gestion.school li.active {
            background-color: white;
            background-color: var(--main-bg);
        }

        .menu-gestion.entreprise li.active {
            background-color: white;
            background-color: var(--main-bg);
        }

        .menu-gestion li.active .content.mobile img {
            filter: grayscale(0);
        }

        .menu-gestion li.active .content.mobile .ic-profil {
            border: solid 2px var(--blue-primary);
        }

        .menu-gestion.school li.active .content.mobile .ic-profil {
            border: solid 2px var(--orange-primary);
        }

        .menu-gestion.entreprise li.active .content.mobile .ic-profil {
            border: solid 2px var(--purple-primary);
        }

        .menu-gestion li .content.mobile {
            display: block;
            height: 25px;
        }

        .menu-gestion li {
            padding: 10px;
        }
}

/*Mobile nav Overlay*/
.mobile-menu {
    position: fixed;
    height: 0px;
    width: 100vw;
    top: 0px;
    right: 0px;
    left: 0px;
    z-index: 99999;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: all .5s ease-in-out;
    padding-top: 50px;
    background-color: white;
    background-color: var(--main-bg);
    display: none;
}

@supports (backdrop-filter: none) {
    .mobile-menu {
        background-color: rgba(255, 255, 255, 0.80);
        backdrop-filter: blur(10px);
    }

    body.dark .mobile-menu {
        background-color: rgba(0, 0, 0, 0.80);
        backdrop-filter: blur(10px);
    }
}

@media screen and (max-width:1170px) {
    .mobile-menu {
        display: block;
    }
}

.mobile-menu.open {
    height: 100vh;
    animation: mobileNavOverlayOpening .5s ease-in-out;
}

.mobile-menu.closed {
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
}

.mobile-menu .mobile-menu-content {
    margin-top: 30px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    width: 90%;
    min-height: calc(100vh - 110px);
}

    .mobile-menu .mobile-menu-content .no-verified-warning {
        position: absolute;
        bottom: 0px;
        left: -8px;
    }

        .mobile-menu .mobile-menu-content .no-verified-warning img {
            width: 25px !important;
            height: 25px !important;
        }

.mobile-menu .mobile-menu-profil {
    display: block;
    margin: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/*Footer*/
footer {
    width: 100%;
    height: auto;
    background-color: #303069;
    color: white;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 30px;
    position: relative;
    z-index: 40;
}

.dark footer {
    background-color: #2C323D;
}

footer .footer-head {
    width: 100%;
    padding: 50px 0px;
    display: flex;
    justify-content: space-between;
}

    footer .footer-head .footer-head-logo {
        width: 90%;
        max-width: 300px;
        flex: 0 0 auto;
    }

footer .footer-head-social {
    display: flex;
    flex: 0 0 auto;
}

    footer .footer-head-social .footer-head-social-txt {
        margin: auto;
        min-width: 165px;
    }

    footer .footer-head-social li {
        flex: 0 0 40px;
        max-width: 40px;
        margin: 10px 10px;
    }

        footer .footer-head-social li img {
            width: 100%;
            transition: all .2s ease;
        }

            footer .footer-head-social li img:hover {
                transform: scale(1.05);
            }

footer .footer-body-container {
    display: flex;
    justify-content: space-between;
}

    footer .footer-body-container .footer-body-content {
        flex: 0 0 25%;
        max-width: 25%;
        position: relative;
    }

        footer .footer-body-container .footer-body-content.center {
            flex: 50%;
            max-width: 50%;
        }

        footer .footer-body-container .footer-body-content ul li {
            margin-top: 10px;
        }

            footer .footer-body-container .footer-body-content ul li a {
                color: white;
            }

                footer .footer-body-container .footer-body-content ul li a:hover {
                    color: var(--blue-primary);
                }

        footer .footer-body-container .footer-body-content.left .footer-body-content-title {
            text-align: left;
        }

        footer .footer-body-container .footer-body-content.center .footer-body-content-title {
            text-align: center;
        }

        footer .footer-body-container .footer-body-content.right .footer-body-content-title {
            text-align: right;
        }

        footer .footer-body-container .footer-body-content .footer-title-uderline {
            width: 30px;
            height: 2px;
            background-color: white;
            background-color: var(--main-bg);
            margin-top: 10px;
        }

footer .footer-body-content:last-child .footer-title-uderline {
    margin-left: auto;
    display: flex;
}

footer .footer-body-content .footer-body-content-links-group {
    display: flex;
}

footer .footer-body-container .footer-body-content ul {
    margin-top: 15px;
}

footer .footer-body-container .footer-body-content.right ul {
    text-align: right;
}

footer .footer-body-content .footer-body-content-links-group ul.left {
    text-align: right;
    flex: 1;
    max-width: 50%;
    margin-right: 10px;
}

footer .footer-body-content .footer-body-content-links-group ul.right {
    text-align: left;
    flex: 1;
    max-width: 50%;
    margin-left: 10px;
}

footer .footer-body-container .footer-body-content ul li img {
    width: 15px;
    height: 15px;
    margin-right: 10px;
}

@media screen and (max-width:1300px) {
    footer {
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media screen and (max-width:1170px) {
    footer .footer-head {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

        footer .footer-head .footer-head-logo {
            margin-left: auto;
            margin-right: auto;
            display: block;
            margin-bottom: 30px;
        }

    footer .footer-head-social {
        flex-wrap: wrap;
        justify-content: center;
    }

        footer .footer-head-social .footer-head-social-txt {
            text-align: center;
            flex: 0 0 100%;
            margin-bottom: 20px;
        }

    footer .footer-body-container {
        justify-content: left;
        flex-wrap: wrap;
    }

        footer .footer-body-container .footer-body-content {
            flex: 0 0 100%;
            max-width: 100%;
            margin-top: 50px;
        }

            footer .footer-body-container .footer-body-content.center {
                flex: 0 0 100%;
                max-width: 100%;
            }

            footer .footer-body-container .footer-body-content.left .footer-body-content-title {
                text-align: center;
            }

            footer .footer-body-container .footer-body-content.right .footer-body-content-title {
                text-align: center;
            }

            footer .footer-body-container .footer-body-content .footer-title-uderline {
                margin-left: auto;
                margin-right: auto;
            }

            footer .footer-body-container .footer-body-content.left ul {
                text-align: center;
            }

            footer .footer-body-container .footer-body-content.right ul {
                text-align: center;
            }

    footer .footer-head {
        padding: 30px 0px;
    }
}

@media screen and (max-width:600px) {
    footer .footer-body-content .footer-body-content-links-group {
        justify-content: center;
        flex-wrap: wrap;
    }

        footer .footer-body-content .footer-body-content-links-group ul.left {
            text-align: center;
            max-width: 100%;
            flex: 0 0 100%;
            margin-right: 0px;
        }

        footer .footer-body-content .footer-body-content-links-group ul.right {
            text-align: center;
            max-width: 100%;
            flex: 0 0 100%;
            margin-left: 0px;
            margin-top: 0px;
        }
}

/*Flèches*/
.arrow-right {
    border: solid;
    border-width: 0 2px 2px 0;
    border-radius: 2px;
    display: inline-block;
    padding: 3px;
    margin-bottom: 1px;
    margin-left: 2px;
    transition: all .2s ease;
    transform: rotate(-45deg);
}

    .arrow-right.big {
        border-width: 0 4px 4px 0;
        padding: 5px;
    }

.arrow-left {
    border: solid;
    border-width: 0 2px 2px 0;
    border-radius: 2px;
    display: inline-block;
    padding: 3px;
    margin-bottom: 1px;
    margin-left: 2px;
    transition: all .2s ease;
    transform: rotate(135deg);
}

    .arrow-left.big {
        border-width: 0 4px 4px 0;
        padding: 5px;
    }

.arrow-top {
    border: solid;
    border-width: 0 2px 2px 0;
    border-radius: 2px;
    display: inline-block;
    padding: 3px;
    margin-bottom: -1px;
    margin-left: 2px;
    transition: all .2s ease;
    transform: rotate(-135deg);
}

    .arrow-top.big {
        border-width: 0 4px 4px 0;
        padding: 5px;
    }

.arrow-bottom {
    border: solid;
    border-width: 0 2px 2px 0;
    border-radius: 2px;
    display: inline-block;
    padding: 3px;
    margin-bottom: 1px;
    margin-left: 2px;
    transition: all .2s ease;
    transform: rotate(45deg);
}

.menu-arrow-bottom {
  border: solid;
  border-width: 0 2px 2px 0;
  border-radius: 2px;
  display: inline-block;
  padding: 3px;
  margin-bottom: 1px;
  margin-left: 2px;
  margin-right: 15px;
  transition: all .2s ease;
  transform: rotate(45deg);
  cursor:pointer;
}

    .arrow-bottom.big {
        border-width: 0 4px 4px 0;
        padding: 5px;
    }

/*Articles du blog*/
.articles-container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    position: relative;
    align-items: flex-start;
    max-width: 1420px;
}

    .articles-container .article {
        flex: 1;
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        border-radius: 8px;
        max-width: 450px;
        position: relative;
        transition: all .2s ease;
        background-color: white;
        background-color: var(--main-bg);
        margin: 10px;
        min-width: 410px;
        min-height: 404px;
    }

@media screen and (min-width:800px) {
    .articles-container .article:hover {
        transform: translateY(-8px);
    }
}

.articles-container .article a:hover {
    color: #222222;
    color: var(--main-text);
    text-decoration: none;
}

.articles-container .article .article-image {
    height: 220px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
    width: 100%;
    background-size: 101%;
    background-repeat: no-repeat;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    transition: all .2s ease;
    overflow: hidden;
    background-position: top center;
}

    .articles-container .article .article-image .article-image-content {
        width: 100%;
        transition: all .2s ease;
    }

.articles-container .article:hover .article-image {
    filter: brightness(1.1);
    background-size: 110%;
}

    .articles-container .article:hover .article-image .article-image-content {
        transform: scale(1.1);
    }

.articles-container .article .article-content .article-title {
    font-size: 1rem;
    min-height: 46px;
}

.articles-container .article .article-content {
    margin-top: 250px;
    padding: 40px 30px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 15;
    background-color: white;
    background-color: var(--main-bg);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 100% !important;
}

.articles-container .article .article-description {
    transition: all .4s ease;
    max-height: 0px;
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 20px;
}


.articles-container .article:hover .article-description {
    max-height: 150px;
}

.articles-container .article .article-content li {
    font-weight: 500;
    padding-top: 7px;
    padding-bottom: 7px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
}

.articles-container .article .article-more {
    width: 110px;
    position: absolute;
    right: 30px;
    bottom: 30px;
}

.articles-container .article.skeleton .article-image {
    background-color: #E1E6E8;
    background-image: none;
    filter: none;
}

body.dark .articles-container .article.skeleton .article-image {
    background-color: #1a1d26;
}

.articles-container .article.skeleton .article-title {
    background-color: #E1E6E8;
    height: 30px;
    border-radius: 25px;
    width: 290px;
    overflow: hidden;
    max-height: 30px;
    position: relative;
}

body.dark .articles-container .article.skeleton .article-title {
    background-color: #1a1d26;
}

.articles-container .article.skeleton .article-description .skeleton-item {
    border-radius: 20px;
    height: 10px;
    background-color: #E1E6E8;
    margin-top: 5px;
    margin-left: 13px;
    position: relative;
    overflow: hidden;
}

body.dark .articles-container .article.skeleton .article-description .skeleton-item {
    background-color: #1a1d26;
}

.articles-container .article.skeleton .article-description .skeleton-item:nth-child(1) {
    width: 180px;
}

.articles-container .article.skeleton .article-description .skeleton-item:nth-child(2) {
    width: 160px;
}

.articles-container .article.skeleton .article-description .skeleton-item:nth-child(3) {
    width: 120px;
}

.articles-container .article.skeleton .article-description .skeleton-item:nth-child(4) {
    width: 90px;
}

.articles-container .article.skeleton .article-description .skeleton-item:nth-child(5) {
    width: 50px;
}

.articles-container .article.skeleton .article-content li {
    background-color: #E1E6E8;
    height: 20px;
    border-radius: 25px;
    width: 150px;
    overflow: hidden;
    max-height: 30px;
    position: relative;
}

body.dark .articles-container .article.skeleton .article-content li {
    background-color: #1a1d26;
}

.articles-container .article.skeleton .article-more {
    background-color: #E1E6E8;
    height: 15px;
    border-radius: 25px;
    width: 100px;
    overflow: hidden;
    max-height: 30px;
    position: absolute;
}

body.dark .articles-container .article.skeleton .article-more {
    background-color: #1a1d26;
}

@media screen and (max-width:450px) {
    .articles-container .article {
        min-width: 280px;
    }

        .articles-container .article .article-image {
            background-size: cover;
        }

        .articles-container .article .article-more {
            bottom: 15px;
        }
}

/*Vignettes*/
.thumbs-container {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.thumb {
    position: relative;
    border-radius: 8px;
    flex: 1 0 280px;
    min-width: 280px;
    max-width: 450px;
    width: 95%;
    overflow: hidden;
    transition: all .2s ease;
    margin: 5px;
    box-shadow: 0px 13px 16px 0px var(--shadow);
    background-color: white;
    background-color: var(--main-bg);
}

    .thumb a:hover {
        color: #222222;
        color: var(--main-text);
    }

    .thumb.space {
        box-shadow: none;
        background-color: transparent;
    }

    .thumb.school.premium {
        border: solid 4px var(--orange-primary);
        animation: premiumBorder ease 2s infinite alternate-reverse;
        box-shadow: 0px 5px 16px 0px #FF91004b;
    }

@keyframes premiumBorder {
    from {
        border-color: var(--dark-orange);
    }

    to {
        border-color: #FF910077;
    }
}

@keyframes premiumRegisterBorder {
    from {
        border-color: var(--blue-dark);
    }

    to {
        border-color: #2196f37d;
    }
}

.thumb.school.formation {
    border: solid 2px var(--orange-primary);
}

.thumb.school.offer {
    border: solid 2px var(--orange-primary);
}

.thumb.entreprise {
    border: solid 2px var(--purple-primary);
}

    .thumb.entreprise.event {
        border: none;
    }


@media screen and (min-width:800px) {
    .thumb:hover {
        transform: translateY(-8px);
    }
}

.thumb .thumb-image-container {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.thumb.skeleton {
    border: 0px transparent !important;
}

    .thumb.skeleton .thumb-image-container {
        background-color: #E1E6E8;
    }

body.dark .thumb.skeleton .thumb-image-container {
    background-color: #1a1d26;
}

.thumb.school .thumb-image-container {
    height: 84px;
}

.thumb.entreprise .thumb-image-container {
    height: 84px;
}

.thumb.school.formation .thumb-image-container {
    height: 100px;
    position: relative;
    z-index: 1;
}

.thumb.event .thumb-image-container {
    height: 110px;
    margin-bottom: -10px;
    display: flex;
}

.thumb.school.event .thumb-image-container {
    background-color: var(--orange-primary);
}

.thumb.entreprise.event .thumb-image-container {
    background-color: var(--purple-primary);
}

.thumb.event .thumb-image-container .event-name {
    padding: 10px 10px 20px 10px;
    margin: auto;
}

.thumb .thumb-image-container .thumb-image {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    transition: all .2s ease;
}

.thumb.coach .thumb-image-container .thumb-image {
    top: 50%;
    transform: translateY(-50%);
}

.thumb .chat-action-container {
    width: 115px;
    position: relative;
    margin-top: 4px;
    margin-left: 15px;
}

    .thumb .chat-action-container .chat-text {
        font-size: 1rem;
        font-weight: 500;
        color: var(--green-primary);
        position: absolute;
        left: -10px;
        transition: all .2s ease;
        top: 0px;
        opacity: 0;
        font-weight: 500;
    }

    .thumb .chat-action-container:hover .chat-text {
        left: 35px;
        opacity: 1;
    }

    .thumb .chat-action-container .chat-text::after {
        content: '';
        position: absolute;
        bottom: -3px;
        width: 100%;
        left: 0px;
        height: 3px;
        background-color: var(--green-primary);
    }

    .thumb .chat-action-container .chat-img {
        width: 25px;
        height: 25px;
        position: relative;
    }

        .thumb .chat-action-container .chat-img .top {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 20px;
            transition: all .2s ease;
        }

        .thumb .chat-action-container .chat-img .bottom {
            position: absolute;
            bottom: 0px;
            right: 0px;
            width: 18px;
            transition: all .2s ease;
        }

    .thumb .chat-action-container:hover .chat-img .top {
        transform: translate(-1px, -1px);
    }

    .thumb .chat-action-container:hover .chat-img .bottom {
        transform: translate(1px, 1px);
    }

.thumb .thumb-tdb-actions {
    padding: 15px;
    padding-top: 0px;
    display: flex;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.thumb.candidat .chat-action-container .chat-text {
    color: var(--purple-primary);
}

    .thumb.candidat .chat-action-container .chat-text::after {
        background-color: var(--purple-primary);
    }

.thumb.candidat .thumb-infos-container li.location {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (min-width:800px) {
    .thumb:hover .thumb-image-container .thumb-image {
        transform: scale(1.06);
    }

    .thumb.coach:hover .thumb-image-container .thumb-image {
        transform: translateY(-50%) scale(1.06);
    }
}

@media screen and (max-width:500px) {
    .thumb.candidat .thumb-infos-container ul {
        padding: 15px;
    }
}

.thumb .thumb-image-container .filter-shadow {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: -moz-linear-gradient(top, rgba(34, 34, 34, 0.65) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 45%, rgba(34, 34, 34, 0.95) 100%);
    background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0.65) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 45%, rgba(34, 34, 34, 0.95) 100%);
    background: linear-gradient(to bottom, rgba(34, 34, 34, 0.65) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 45%, rgba(34, 34, 34, 0.95) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6222222', endColorstr='#a6222222', GradientType=0);
}

.thumb .thumb-image-container .availability-container {
    color: white;
    position: absolute;
    font-weight: 600;
    left: 20px;
    top: 10px;
    z-index: 3;
}

    .thumb .thumb-image-container .availability-container::before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: solid 1px white;
        background-color: #929292;
        margin-right: 5px;
        display: inline-block;
        z-index: 3;
    }

    .thumb .thumb-image-container .availability-container.available::before {
        background-color: var(--green-primary);
    }

.thumb .like-container {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(../images/icons/ic_like_heart.svg);
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .2s ease;
}

    .thumb .like-container.liked {
        background-image: url(../images/icons/ic_like_heart_red.svg);
    }

    .thumb .like-container:hover {
        transform: scale(1.1);
    }


.thumb .thumb-image-container .thumb-coach-infos {
    position: absolute;
    bottom: 10px;
    left: 20px;
    z-index: 3;
    width: calc(100% - 40px);
}

.thumb.skeleton .thumb-image-container .thumb-coach-infos {
    height: 35px;
    width: 170px;
    background-color: #bfbfbf;
    border-radius: 20px;
}

body.dark .thumb.skeleton .thumb-image-container .thumb-coach-infos {
    background-color: #2e323c;
}

.thumb .thumb-image-container .thumb-coach-infos {
    color: white;
}

    .thumb .thumb-image-container .thumb-coach-infos .coach-statut {
        max-height: 57px;
        overflow: hidden;
    }

    .thumb .thumb-image-container .thumb-coach-infos .coach-name.top-coach {
        padding-left: 28px;
        background-image: url(../images/icons/ic_top_coach.svg);
        background-size: 35px;
        background-position: left -6px top -6px;
        background-repeat: no-repeat;
        position: relative;
    }

        .thumb .thumb-image-container .thumb-coach-infos .coach-name.top-coach::after {
            content: 'Super Coach';
            position: absolute;
            padding: 6px;
            border-radius: 8px;
            background-color: var(--green-primary);
            color: white;
            transition: all .2s ease;
            opacity: 0;
            pointer-events: none;
            top: -37px;
            left: 0;
            font-weight: 500;
            font-size: 0.9rem;
            text-align: center;
            width: 110px;
        }

@media screen and (min-width:800px) {
    .thumb .thumb-image-container .thumb-coach-infos .coach-name.top-coach:hover::after {
        opacity: 1;
        pointer-events: all;
    }
}

.thumb .thumb-image-container .thumb-coach-infos .coach-reviews {
    display: flex;
}

    .thumb .thumb-image-container .thumb-coach-infos .coach-reviews li {
        margin-right: 5px;
    }

        .thumb .thumb-image-container .thumb-coach-infos .coach-reviews li img {
            width: 15px;
            height: 15px;
        }

.thumb.offer .thumb-image-container .offer-logo {
    position: absolute;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    left: 15px;
    top: calc(50% - 32.5px);
    background-color: white;
    background-color: var(--main-bg);
    z-index: 7;
    border: solid 2px white;
}

.thumb .thumb-infos-container {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: white;
    background-color: var(--main-bg);
}

.thumb.event .thumb-infos-container {
    border-radius: 8px;
    position: relative;
    z-index: 7;
}

.thumb.event.school .thumb-infos-container {
    border: solid 2px var(--orange-primary);
}

.thumb.event.entreprise .thumb-infos-container {
    border: solid 2px var(--purple-primary);
}

.thumb.coach .thumb-infos-container {
    border: solid 2px var(--green-primary);
    border-top: unset;
}

.thumb .thumb-infos-container .thumb-logo {
    margin-top: -37px;
    position: relative;
    z-index: 7;
}

.thumb.formation .thumb-infos-container .thumb-logo {
    margin-top: 15px;
}

    .thumb.formation .thumb-infos-container .thumb-logo .formation-school-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 275px;
        display: inline-block;
    }

.thumb .thumb-infos-container .thumb-logo img {
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 75px;
    height: 75px;
    margin-left: 15px;
    background-color: white;
    background-color: var(--main-bg);
    border: solid 2px white;
}

.thumb.school.premium .thumb-infos-container .thumb-logo img {
    border: solid 3px var(--orange-primary);
    animation: premiumBorder ease 2s infinite alternate-reverse;
}

.thumb.formation .thumb-infos-container .thumb-logo img {
    margin-right: 5px;
    width: 20px;
    height: 20px;
    vertical-align: 0px;
}

.thumb .thumb-infos-container ul {
    padding: 15px;
    min-height: 165px;
    position: relative;
}

.thumb.school .thumb-infos-container ul {
    min-height: 190px;
}

.thumb.entreprise .thumb-infos-container ul {
    min-height: 215px;
}

.thumb.offer .thumb-infos-container ul {
    min-height: 160px;
}

.thumb.event .thumb-infos-container ul {
    min-height: 96px;
}

.thumb.school.formation .thumb-infos-container ul {
    min-height: 215px;
    padding-top: 5px;
}

.thumb .thumb-infos-container li {
    padding-left: 35px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
    padding-top: 7px;
    padding-bottom: 7px;
    width: 100%;
}

.thumb.coach .thumb-infos-container li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thumb.skeleton .thumb-infos-container {
    border-width: 0px;
    border-color: transparent;
}

    .thumb.skeleton .thumb-infos-container li {
        height: 20px;
        margin-top: 10px;
        position: relative;
        margin-left: 3px;
        background-color: #E1E6E8;
        border-radius: 20px;
        overflow: hidden;
    }

body.dark .thumb.skeleton .thumb-infos-container li {
    background-color: #1a1d26;
}

.thumb.skeleton .thumb-infos-container li.school-name {
    height: 30px;
    margin-top: 10px;
    position: relative;
    margin-left: 3px;
    background-color: #E1E6E8;
    border-radius: 20px;
    overflow: hidden;
    width: 70%;
    min-width: 200px;
    margin-bottom: 20px;
}

.thumb.skeleton .thumb-infos-container .thumb-logo {
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 75px;
    height: 75px;
    background-color: #E1E6E8;
    margin-left: 15px;
    position: relative;
    overflow: hidden;
}

body.dark .thumb.skeleton .thumb-infos-container .thumb-logo {
    background-color: #1a1d26;
}

.thumb.skeleton.formation .thumb-infos-container .thumb-logo {
    width: 20px;
    height: 20px;
}

.thumb.skeleton .thumb-infos-container li::after {
    content: '';
    display: block;
    position: absolute;
    left: -150px;
    top: 0;
    height: 100%;
    width: 150px;
    background: linear-gradient(to right, transparent 0%, #eaeff1 50%, transparent 100%);
    animation: thumbSkeletonAnimation 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

body.dark .thumb.skeleton .thumb-infos-container li::after {
    background: linear-gradient(to right, transparent 0%, #22252e 50%, transparent 100%);
}

.thumb.skeleton .thumb-infos-container li:nth-child(1) {
    width: 190px;
}

.thumb.skeleton .thumb-infos-container li:nth-child(2) {
    width: 120px;
}

.thumb.skeleton .thumb-infos-container li:nth-child(3) {
    width: 150px;
}

.thumb.skeleton .thumb-infos-container li:nth-child(4) {
    width: 100px;
}

.thumb.skeleton .thumb-infos-container li:nth-child(5) {
    width: 120px;
}

.thumb.coach .thumb-infos-container li.location {
    background-image: url(../images/icons/ic_pin_green.svg);
}

.thumb.school .thumb-infos-container li.location {
    background-image: url(../images/icons/ic_pin_orange.svg);
}

.thumb.entreprise .thumb-infos-container li.location {
    background-image: url(../images/icons/ic_pin_purple.svg);
}

.thumb.coach .thumb-infos-container li.subject {
    background-image: url(../images/icons/ic_subject_green.svg);
    background-size: 25px 25px;
    background-position: left -2px center;
}

.thumb.school .thumb-infos-container li.subject {
    background-image: url(../images/icons/ic_briefcase_orange.svg);
}

.thumb.entreprise .thumb-infos-container li.subject {
    background-image: url(../images/icons/ic_briefcase_purple.svg);
}

.thumb.coach .thumb-infos-container li.price {
    background-image: url(../images/icons/ic_euros_green.svg);
}

.thumb.coach .thumb-infos-container li.gift {
    background-image: url(../images/icons/ic_gift_green.svg);
}

.thumb.school .thumb-infos-container li.formations {
    background-image: url(../images/icons/ic_diplome_orange.svg);
}

.thumb.entreprise .thumb-infos-container li.formations {
    background-image: url(../images/icons/ic_diplome_purple.svg);
}

.thumb.coach .thumb-infos-container li.time {
    background-image: url(../images/icons/ic_clock_green.svg);
}

.thumb.school .thumb-infos-container li.time {
    background-image: url(../images/icons/ic_clock_orange.svg);
}

.thumb.entreprise .thumb-infos-container li.time {
    background-image: url(../images/icons/ic_clock_purple.svg);
}

.thumb.entreprise .thumb-infos-container li.salary {
    background-image: url(../images/icons/ic_euros_purple.svg);
}

.thumb.coach .thumb-infos-container li.book {
    background-image: url(../images/icons/ic_book_green.svg);
}

.thumb.coach .thumb-infos-container li.date {
    background-image: url(../images/icons/ic_calendar_green.svg);
}

.thumb.offer .thumb-infos-container .offer-name {
    padding: 15px;
}

.thumb.offer .thumb-infos-container .offer-name-separation {
    margin: 0px;
}

.thumb.offer.skeleton .thumb-infos-container .offer-name {
    background-color: #E1E6E8;
    height: 40px;
    border-radius: 25px;
    width: 290px;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 15px;
}

body.dark .thumb.offer.skeleton .thumb-infos-container .offer-name {
    background-color: #1a1d26;
}

.thumb .formation-details {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: flex-end;
    margin-bottom: 15px;
}

    .thumb .formation-details .item {
        padding: 5px;
        position: relative;
        flex: 1;
    }

.thumb.skeleton .formation-details .item .content {
    height: 60px;
    width: 80px;
    border-radius: 8px;
    position: relative;
    background-color: #E1E6E8;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

body.dark .thumb.skeleton .formation-details .item .content {
    background-color: #1a1d26;
}

.thumb .formation-details .item hr {
    position: absolute;
    width: 1px;
    height: 90%;
    margin: 0px;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background-color: var(--grey-light);
    border: none;
}

.thumb .thumb-link {
    transition: all .2s ease;
    padding: 15px 25px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 2;
}

@media screen and (max-width:800px) {
    .thumb .thumb-link {
        display: none;
    }

    .thumb.school.formation .thumb-infos-container ul {
        min-height: 0px;
    }
}

.thumb.skeleton .thumb-link {
    height: 50px;
    background-color: #E1E6E8 !important;
    cursor: default;
    display: none;
}

    .thumb.skeleton .thumb-link::before {
        content: '';
        position: absolute;
        width: 150px;
        height: 20px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        background-color: #bfbfbf;
        z-index: 50;
    }



.thumb.coach .thumb-link {
    color: var(--green-primary);
}

.thumb.coach:hover .thumb-link {
    color: white;
    background-color: var(--green-primary);
}

.thumb.school .thumb-link {
    color: var(--orange-primary);
}

.thumb.school .school-name .w7 {
    transition: all .2s ease;
}

.thumb.school:hover .school-name .w7 {
    color: var(--orange-primary);
}

.thumb.school:hover .thumb-link {
    color: white;
    background-color: var(--orange-primary);
}

.thumb.entreprise .thumb-link {
    color: var(--purple-primary);
}

.thumb.entreprise:hover .thumb-link {
    color: white;
    background-color: var(--purple-primary);
}

.thumb.event .save-event {
    transition: all .2s ease;
    padding: 15px 25px;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
}

.thumb.school.event .save-event {
    color: var(--orange-primary);
}

    .thumb.school.event .save-event.saved {
        background-color: var(--orange-primary);
        color: white;
    }

.thumb.school.event:hover .save-event {
    color: white;
    background-color: var(--orange-primary);
}

.thumb.entreprise.event .save-event {
    color: white;
    background-color: var(--purple-primary);
}

.thumb.entreprise.event:hover .save-event {
    color: white;
    background-color: var(--purple-primary);
}

.thumb.event .save-event .heart {
    background-image: url(../images/icons/ic_like_heart.svg);
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: left top -5px;
    transition: all .2s ease;
    width: 130px;
    height: 23px;
    padding-left: 40px;
    padding-top: 3px;
}

.thumb.event .save-event.liked .heart {
    background-image: url(../images/icons/ic_like_heart_red.svg);
}

@media screen and (max-width:800px) {
    .thumb.entreprise.event .save-event {
        color: white;
        background-color: var(--purple-primary);
    }

    .thumb.school.event .save-event {
        color: white;
        background-color: var(--orange-primary);
    }

    .thumb.school .thumb-link {
        color: white;
        background-color: var(--orange-primary);
    }

    .thumb.entreprise .thumb-link {
        color: white;
        background-color: var(--purple-primary);
    }

    .thumb.coach .thumb-link {
        color: white;
        background-color: var(--green-primary);
    }
}

@media screen and (max-width:800px) {
    .thumb:not(.event) .thumb-infos-container {
        padding-bottom: 0px;
    }
}

@media screen and (max-width:630px) {
    .thumb .thumb-infos-container ul {
        min-height: 0px !important;
        height: auto;
    }
}

/*Inputs*/
.input-left-icon {
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 15px center;
    padding-left: 40px;
}

.input-right-icon {
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: right 15px center;
    padding-right: 40px;
}

.input-field-style {
    position: relative;
    width: 100%;
    cursor: text;
}

    .input-field-style input {
        border: 1px solid #929292;
        padding: 10px 15px 10px 15px;
        border-radius: 8px;
        width: 100%;
        transition: all 100ms ease-out;
        font-size: 1rem;
        height: 100%;
    }

        .input-field-style input::placeholder {
            color: white;
            transition: all .2s ease;
            opacity: 0;
        }

        .input-field-style input:focus::placeholder {
            color: #929292;
            opacity: 1;
        }

        .input-field-style input:focus {
            padding: 15px;
        }

    .input-field-style.hasValue input {
        padding: 15px;
    }

    .input-field-style .input-field-placeholder {
        font-size: 16px;
        position: absolute;
        top: calc(50% - 10px);
        color: #929292;
        left: 0px;
        padding: 0 8px;
        transition: all 100ms ease-out;
        z-index: 1;
        text-align: left;
        width: 100%;
    }

        /*Specific case of tel input with dial code*/
        .input-field-style .iti input:not([disabled]):not(:focus) ~ .input-field-placeholder {
            left: 80px;
            width: calc(100% - 80px);
        }

        .input-field-style .input-field-placeholder span {
            background-color: white;
            background-color: var(--main-bg);
            padding: 0px 8px;
            font-weight: 500;
        }

            .input-field-style .input-field-placeholder span img {
                width: 17px;
                height: 18px;
                margin-right: 10px;
                vertical-align: -3px;
            }

    .input-field-style:hover input {
        border-color: var(--blue-primary);
        box-shadow: 0px 0px 6px 0px #28c1ff82 !important;
    }

    .input-field-style input:focus {
        border-color: var(--blue-primary);
        box-shadow: 0px 0px 6px 0px #28c1ff82 !important;
    }

    .input-field-style input:not([disabled]):focus ~ .input-field-placeholder {
        color: var(--blue-primary);
    }

    .input-field-style input:not([disabled]):focus ~ .input-field-placeholder,
    .input-field-style.hasValue input:not([disabled]) ~ .input-field-placeholder {
        -webkit-transform: scale(.85) translateY(-33px) translateX(-9%);
        transform: scale(.85) translateY(-33px) translateX(-9%);
        color: var(--blue-primary);
    }

    .input-field-style.disabled input:not([disabled]):focus ~ .input-field-placeholder,
    .input-field-style.disabled.hasValue input:not([disabled]) ~ .input-field-placeholder {
        transform: none;
        color: #929292;
    }

    .input-field-style input:not([disabled]):focus,
    .input-field-style.hasValue input:not([disabled]) {
        border: 1px solid var(--blue-primary);
    }

    .input-field-style.disabled input:not([disabled]):focus,
    .input-field-style.disabled.hasValue input:not([disabled]) {
        border: 1px solid #929292;
    }

    .input-field-style input:not([disabled]):-webkit-autofill ~ .input-field-placeholder {
        -webkit-transform: scale(.85) translateY(-27px) translateX(-9%);
        transform: scale(.85) translateY(-27px) translateX(-9%);
    }

    .input-field-style input:not([disabled]):-webkit-autofill {
        padding: 15px;
    }


    /*Entreprise*/
    .input-field-style.entreprise input:focus {
        border-color: var(--purple-primary);
        box-shadow: 0px 0px 6px 0px #8C75EB82 !important;
    }

    .input-field-style.entreprise:hover input {
        border-color: var(--purple-primary);
        box-shadow: 0px 0px 6px 0px #8C75EB82 !important;
    }

    .input-field-style.entreprise input:not([disabled]):focus ~ .input-field-placeholder {
        color: var(--purple-primary);
    }

    .input-field-style.entreprise input:not([disabled]):focus ~ .input-field-placeholder,
    .input-field-style.entreprise.hasValue input:not([disabled]) ~ .input-field-placeholder {
        color: var(--purple-primary);
    }

    .input-field-style.entreprise input:not([disabled]):focus,
    .input-field-style.entreprise.hasValue input:not([disabled]) {
        border: 1px solid var(--purple-primary);
    }

    /*School*/
    .input-field-style.school input:focus {
        border-color: var(--orange-primary);
        box-shadow: 0px 0px 6px 0px #FF910040 !important;
    }

    .input-field-style.school:hover input {
        border-color: var(--orange-primary);
        box-shadow: 0px 0px 6px 0px #FF910040 !important;
    }

    .input-field-style.school input:not([disabled]):focus ~ .input-field-placeholder {
        color: var(--orange-primary);
    }

    .input-field-style.school input:not([disabled]):focus ~ .input-field-placeholder,
    .input-field-style.school.hasValue input:not([disabled]) ~ .input-field-placeholder {
        color: var(--orange-primary);
    }

    .input-field-style.school input:not([disabled]):focus,
    .input-field-style.school.hasValue input:not([disabled]) {
        border: 1px solid var(--orange-primary);
    }

    /*Input désactivé pour premium*/
    .input-field-style.disabled-premium {
        cursor: default;
        overflow: hidden;
    }

        .input-field-style.disabled-premium::before {
            position: absolute;
            content: 'Fonctionnalité accessible avec un compte Premium';
            z-index: 10;
            top: 50%;
            transform: translateY(-50%);
            left: -500px;
            background-color: var(--orange-primary);
            color: white;
            border-radius: 5px;
            padding: 5px;
            transition: all .2s ease;
        }

    .input-field-style.entreprise.disabled-premium::before {
        background-color: var(--purple-primary);
    }

    .input-field-style.disabled-premium:hover::before {
        left: 5px;
    }

    .input-field-style.disabled-premium .input-field-placeholder span {
        background-color: transparent;
    }

    /*Erreur*/
    .input-field-style.error input:focus {
        box-shadow: 0px 0px 6px 0px #FF505082 !important;
    }

    .input-field-style.error:hover input {
        box-shadow: 0px 0px 6px 0px #FF505082 !important;
    }

    .input-field-style.error input:not([disabled]):focus ~ .input-field-placeholder {
        color: #FF5050;
    }

    .input-field-style.error input:not([disabled]):focus ~ .input-field-placeholder,
    .input-field-style.error.hasValue input:not([disabled]) ~ .input-field-placeholder {
        -webkit-transform: scale(.85) translateY(-27px) translateX(-9%);
        transform: scale(.85) translateY(-27px) translateX(-9%);
        color: #FF5050;
    }

    .input-field-style.error input:not([disabled]):focus,
    .input-field-style.error.hasValue input:not([disabled]) {
        border: 1px solid #FF5050;
    }

    .input-field-style.error input {
        border-color: #FF5050;
        background-image: url(../images/icons/ic_x_circle_red.svg);
        background-repeat: no-repeat;
        background-size: 20px;
        background-position: right 10px center;
    }

        .input-field-style.error input[verif-data="password"] {
            background-position: right 40px center;
        }

        .input-field-style.error input[verif-password="second"] {
            background-position: right 40px center;
        }


    /*Validé*/
    .input-field-style.valid input:focus {
        box-shadow: 0px 0px 6px 0px #19CF8982 !important;
    }

    .input-field-style.valid:hover input {
        box-shadow: 0px 0px 6px 0px #19CF8982 !important;
    }

    .input-field-style.valid input:not([disabled]):focus ~ .input-field-placeholder {
        color: var(--green-primary);
    }

    .input-field-style.valid input:not([disabled]):focus ~ .input-field-placeholder,
    .input-field-style.valid.hasValue input:not([disabled]) ~ .input-field-placeholder {
        -webkit-transform: scale(.85) translateY(-27px) translateX(-9%);
        transform: scale(.85) translateY(-27px) translateX(-9%);
        color: var(--green-primary);
    }

    .input-field-style.valid input:not([disabled]):focus,
    .input-field-style.valid.hasValue input:not([disabled]) {
        border: 1px solid var(--green-primary);
    }

    .input-field-style.valid input {
        border-color: var(--green-primary);
        background-image: url(../images/icons/ic_checked_green.svg);
        background-repeat: no-repeat;
        background-size: 20px;
        background-position: right 10px center;
    }

        .input-field-style.valid input[verif-data="password"] {
            background-position: right 40px center;
        }

        .input-field-style.valid input[verif-password="second"] {
            background-position: right 40px center;
        }

    /*Input avec icones*/
    .input-field-style.ic-website .input-field-placeholder {
        padding-left: 50px;
    }

    .input-field-style.ic-website input {
        background-image: url(../images/icons/ic_link_grey.svg);
        background-repeat: no-repeat;
        background-size: 25px 25px;
        background-position: 12px center;
        padding-left: 50px !important;
        width: 100%;
    }

    .input-field-style.school.ic-website input:focus {
        background-image: url(../images/icons/ic_link_orange.svg);
    }

    .input-field-style.school.ic-website.hasValue input {
        background-image: url(../images/icons/ic_link_orange.svg);
    }

    .input-field-style.entreprise.ic-website input:focus {
        background-image: url(../images/icons/ic_link_purple.svg);
    }

    .input-field-style.entreprise.ic-website.hasValue input {
        background-image: url(../images/icons/ic_link_purple.svg);
    }

    .input-field-style.ic-onisep .input-field-placeholder {
        padding-left: 50px;
    }

    .input-field-style.ic-onisep input {
        background-image: url(../images/icons/ic_onisep_grey.svg);
        background-repeat: no-repeat;
        background-size: 25px 25px;
        background-position: 12px center;
        padding-left: 50px !important;
        width: 100%;
    }

        .input-field-style.ic-onisep input:focus {
            background-image: url(../images/icons/ic_onisep_orange.svg);
        }

    .input-field-style.ic-onisep.hasValue input {
        background-image: url(../images/icons/ic_onisep_orange.svg);
    }

    .input-field-style.ic-facebook .input-field-placeholder {
        padding-left: 50px;
    }

    .input-field-style.ic-facebook input {
        background-image: url(../images/icons/ic_facebook_grey.svg);
        background-repeat: no-repeat;
        background-size: 25px 25px;
        background-position: 12px center;
        padding-left: 50px !important;
        width: 100%;
    }

        .input-field-style.ic-facebook input:focus {
            background-image: url(../images/icons/ic_facebook_orange.svg);
        }

    .input-field-style.ic-facebook.hasValue input {
        background-image: url(../images/icons/ic_facebook_orange.svg);
    }

    .input-field-style.entreprise.ic-facebook input:focus {
        background-image: url(../images/icons/ic_facebook_purple.svg);
    }

    .input-field-style.entreprise.ic-facebook.hasValue input {
        background-image: url(../images/icons/ic_facebook_purple.svg);
    }

    .input-field-style.ic-linkedin .input-field-placeholder {
        padding-left: 50px;
    }

    .input-field-style.ic-linkedin input {
        background-image: url(../images/icons/ic_linkedin_grey.svg);
        background-repeat: no-repeat;
        background-size: 25px 25px;
        background-position: 12px center;
        padding-left: 50px !important;
        width: 100%;
    }

        .input-field-style.ic-linkedin input:focus {
            background-image: url(../images/icons/ic_linkedin_orange.svg);
        }

    .input-field-style.ic-linkedin.hasValue input {
        background-image: url(../images/icons/ic_linkedin_orange.svg);
    }

    .input-field-style.entreprise.ic-linkedin input:focus {
        background-image: url(../images/icons/ic_linkedin_purple.svg);
    }

    .input-field-style.entreprise.ic-linkedin.hasValue input {
        background-image: url(../images/icons/ic_linkedin_purple.svg);
    }

    .input-field-style.ic-twitter .input-field-placeholder {
        padding-left: 50px;
    }

    .input-field-style.ic-twitter input {
        background-image: url(../images/icons/ic_twitter_grey.svg);
        background-repeat: no-repeat;
        background-size: 25px 25px;
        background-position: 12px center;
        padding-left: 50px !important;
        width: 100%;
    }

        .input-field-style.ic-twitter input:focus {
            background-image: url(../images/icons/ic_twitter_orange.svg);
        }

    .input-field-style.ic-twitter.hasValue input {
        background-image: url(../images/icons/ic_twitter_orange.svg);
    }

    .input-field-style.entreprise.ic-twitter input:focus {
        background-image: url(../images/icons/ic_twitter_purple.svg);
    }

    .input-field-style.entreprise.ic-twitter.hasValue input {
        background-image: url(../images/icons/ic_twitter_purple.svg);
    }

    .input-field-style.ic-instagram .input-field-placeholder {
        padding-left: 50px;
    }

    .input-field-style.ic-instagram input {
        background-image: url(../images/icons/ic_instagram_grey.svg);
        background-repeat: no-repeat;
        background-size: 25px 25px;
        background-position: 12px center;
        padding-left: 50px !important;
        width: 100%;
    }

        .input-field-style.ic-instagram input:focus {
            background-image: url(../images/icons/ic_insta_orange.svg);
        }

    .input-field-style.ic-instagram.hasValue input {
        background-image: url(../images/icons/ic_insta_orange.svg);
    }

    .input-field-style.ic-tiktok .input-field-placeholder {
        padding-left: 50px;
    }

    .input-field-style.ic-tiktok input {
        background-image: url(../images/icons/ic_tiktok_grey.svg);
        background-repeat: no-repeat;
        background-size: 25px 25px;
        background-position: 12px center;
        padding-left: 50px !important;
        width: 100%;
    }

    .input-field-style.ic-tiktok.hasValue input {
        background-image: url(../images/icons/ic_tiktok_orange.svg);
    }

    .input-field-style.ic-tiktok input:focus {
        background-image: url(../images/icons/ic_tiktok_orange.svg);
    }

    .input-field-style.entreprise.ic-instagram input:focus {
        background-image: url(../images/icons/ic_tiktok_purple.svg);
    }

    .input-field-style.entreprise.ic-instagram.hasValue input {
        background-image: url(../images/icons/ic_tiktok_purple.svg);
    }

    .input-field-style.entreprise.ic-tiktok input:focus {
        background-image: url(../images/icons/ic_insta_purple.svg);
    }

    .input-field-style.entreprise.ic-tiktok.hasValue input {
        background-image: url(../images/icons/ic_insta_purple.svg);
    }

    .input-field-style.ic-youtube .input-field-placeholder {
        padding-left: 50px;
    }

    .input-field-style.ic-youtube input {
        background-image: url(../images/icons/ic_youtube_grey.svg);
        background-repeat: no-repeat;
        background-size: 25px 25px;
        background-position: 12px center;
        padding-left: 50px !important;
        width: 100%;
    }

        .input-field-style.ic-youtube input:focus {
            background-image: url(../images/icons/ic_youtube_orange.svg);
        }

    .input-field-style.ic-youtube.hasValue input {
        background-image: url(../images/icons/ic_youtube_orange.svg);
    }

    .input-field-style.entreprise.ic-youtube input:focus {
        background-image: url(../images/icons/ic_youtube_purple.svg);
    }

    .input-field-style.entreprise.ic-youtube.hasValue input {
        background-image: url(../images/icons/ic_youtube_purple.svg);
    }

    .input-field-style.ic-youtube.yt input {
        background-image: url(../images/icons/ic_youtube_original.svg) !important;
    }

    .input-field-style.ic-youtube.fb input {
        background-image: url(../images/icons/ic_facebook_blue_full.svg) !important;
    }

    .input-field-style.ic-youtube.dm input {
        background-image: url(../images/icons/ic_dailymotion_original.svg) !important;
    }

    .input-field-style.ic-youtube.vm input {
        background-image: url(../images/icons/ic_vimeo_original.svg) !important;
    }

    .input-field-style.ic-pin .input-field-placeholder {
        padding-left: 50px;
    }

    .input-field-style.ic-pin input {
        background-image: url(../images/icons/ic_pin_grey.svg);
        background-repeat: no-repeat;
        background-size: 25px 25px;
        background-position: 12px center;
        padding-left: 50px !important;
        width: 100%;
    }

        .input-field-style.ic-pin input:focus {
            background-image: url(../images/icons/ic_pin_blue.svg);
        }

    .input-field-style.ic-pin.school input:focus {
        background-image: url(../images/icons/ic_pin_orange.svg);
    }

    .input-field-style.ic-pin.hasValue input {
        background-image: url(../images/icons/ic_pin_blue.svg);
    }

    .input-field-style .show-password {
        position: absolute;
        width: 30px;
        height: 25px;
        background-image: url(../images/icons/ic_showpassword_disable.svg);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .2s ease;
        z-index: 200;
        cursor: pointer;
    }

    .input-field-style:focus-within .show-password {
        background-image: url(../images/icons/ic_showpassword_disable_blue.svg);
    }

    .input-field-style.hasValue .show-password {
        background-image: url(../images/icons/ic_showpassword_disable_blue.svg);
    }

    .input-field-style .show-password.active {
        background-image: url(../images/icons/ic_showpassword_enable.svg);
    }

    .input-field-style.entreprise:focus-within .show-password {
        background-image: url(../images/icons/ic_showpassword_disable_purple.svg);
    }

    .input-field-style.entreprise.hasValue .show-password {
        background-image: url(../images/icons/ic_showpassword_disable_purple.svg);
    }

    .input-field-style.entreprise .show-password.active {
        background-image: url(../images/icons/ic_showpassword_enable_purple.svg);
    }

    .input-field-style.school:focus-within .show-password {
        background-image: url(../images/icons/ic_showpassword_disable_orange.svg);
    }

    .input-field-style.school.hasValue .show-password {
        background-image: url(../images/icons/ic_showpassword_disable_orange.svg);
    }

    .input-field-style.school .show-password.active {
        background-image: url(../images/icons/ic_showpassword_enable_orange.svg);
    }

/*Numero de telephone*/
input[type="tel"].verif-tel-input {
    flex: 0 0 220px;
    max-width: 220px;
}

    input[type="tel"].verif-tel-input:focus {
        padding: 10px 15px 10px 15px;
    }

/*Adresse email*/
input[type="email"].verif-mail-input {
    flex: 1;
    min-width: 320px;
}

    input[type="email"].verif-mail-input:focus {
        padding: 10px 15px 10px 15px;
    }

.boite-deroulante-container.phone-indicatif {
    flex: 0 0 250px;
    max-width: 250px;
}

.code-input-container {
    display: flex;
    margin-left: -5px;
    margin-right: 20px;
}

    .code-input-container input {
        font-weight: 600;
        font-size: 1.7rem;
        width: 70px;
        height: 70px;
        padding: 15px;
        margin: 5px;
        text-align: center;
    }

    .code-input-container input::placeholder {
        font-weight: 600;
        font-size: 1.7rem;
    }

    .code-input-container.error input {
        animation: errorPhoneValidation 0.9s ease;
        animation-iteration-count: 1;
    }

    .code-input-container.valid input {
        border-color: var(--green-primary);
        ;
    }

@media screen and (max-width:480px) {
    .code-input-container input {
        width: 50px;
        height: 50px;
    }
}

@media screen and (max-width:350px) {
    .code-input-container input {
        width: 45px;
        height: 45px;
    }
}

.tel-code-verif-container .code-input-container.error input {
    animation: errorPhoneValidation 0.9s ease;
    animation-iteration-count: 1;
}

.tel-code-verif-container .code-input-container.valid input {
    border-color: var(--green-primary);
    ;
}

@media screen and (max-width:480px) {
    .tel-code-verif-container input {
        width: 50px;
        height: 50px;
    }
}

@media screen and (max-width:350px) {
    .tel-code-verif-container input {
        width: 45px;
        height: 45px;
    }
}


/*Vérification ID*/
.verif-id-container {
    border-radius: 8px;
    background-color: white;
    background-color: var(--main-bg);
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
    max-width: 700px;
    border: solid 1px transparent;
}

    .verif-id-container.valid {
        border: solid 1px var(--green-primary);
    }

    .verif-id-container.error {
        border: solid 1px #FF5050;
    }

    .verif-id-container .fake-id {
        flex: 0 0 200px;
        max-width: 200px;
        margin: auto;
        height: 140px;
    }

    .verif-id-container .verif-id-content {
        flex: 1;
        margin-left: 30px;
        max-width: 100%;
        display: flex;
    }

    .verif-id-container .loading {
        width: 20px;
        height: 20px;
        vertical-align: -4px;
    }

@media screen and (max-width:550px) {
    .verif-id-container {
        padding: 15px;
    }

        .verif-id-container .verif-id-content {
            margin-left: 0px;
            justify-content: center;
            flex-wrap: wrap;
            text-align: center;
            flex: 0 0 100%;
        }

            .verif-id-container .verif-id-content button {
                margin-left: auto;
                margin-right: auto;
            }
}

/*CGU Case*/
.cgu-container {
    max-width: 350px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}


.cgu-container > div {
    display: flex;
    flex-direction: column;
}

    .cgu-container label {
        position: relative;
        padding-left: 30px;
        width: 100%;
        font-weight: 600;
    }

    .cgu-container .cgu-text {
        display: inline-block;
        transition: all .2s ease;
        font-weight: normal;
    }

    .cgu-container .cgu-text a {
        color: var(--blue-primary);
    }

    .cgu-container .checkmark {
        position: absolute;
        top: 0px;
        left: 0;
        height: 18px;
        width: 18px;
        background-color: white;
        /*background-color: var(--main-bg);*/
        border-radius: 50%;
        border: solid 1px #929292;
        transition: all .2s ease;
        cursor: pointer;
        overflow: hidden;
    }

    .cgu-container label:hover input[type="checkbox"] ~ .checkmark {
        background-color: var(--blue-primary);
        border-color: var(--blue-primary);
    }

    .cgu-container.entreprise label:hover input[type="checkbox"] ~ .checkmark {
        background-color: var(--purple-primary);
        border-color: var(--purple-primary);
    }

    .cgu-container.school label:hover input[type="checkbox"] ~ .checkmark {
        background-color: var(--orange-primary);
        border-color: var(--orange-primary);
    }

    .cgu-container label input[type="checkbox"]:checked ~ .checkmark {
        background-color: var(--blue-primary);
        border-color: var(--blue-primary);
    }

    .cgu-container.entreprise label input[type="checkbox"]:checked ~ .checkmark {
        background-color: var(--purple-primary);
        border-color: var(--purple-primary);
    }

    .cgu-container.school label input[type="checkbox"]:checked ~ .checkmark {
        background-color: var(--orange-primary);
        border-color: var(--orange-primary);
    }

    .cgu-container label input[type="checkbox"]:checked + .cgu-text {
        color: var(--blue-primary);
    }

    .cgu-container.school label input[type="checkbox"]:checked + .cgu-text {
        color: var(--orange-primary);
    }

    .cgu-container.entreprise label input[type="checkbox"]:checked + .cgu-text {
        color: var(--purple-primary);
    }

    .cgu-container label input[type="checkbox"]:checked ~ .checkmark {
        color: var(--blue-primary);
        animation: checkedSpan .3s ease-in-out;
    }

    .cgu-container.entreprise label input[type="checkbox"]:checked ~ .checkmark {
        color: var(--purple-primary);
    }

    .cgu-container.school label input[type="checkbox"]:checked ~ .checkmark {
        color: var(--orange-primary);
    }

    .cgu-container label input[type="checkbox"]:checked ~ .checkmark:after {
        display: block;
    }


    .cgu-container label .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 5px;
        top: 2px;
        width: 3px;
        height: 8px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        animation: checkmarkFromTop .2s ease-in-out;
    }

    .cgu-container label.error {
        color: #EA4335;
    }

@media screen and (max-width:800px) {
    .cgu-container label:hover input[type="checkbox"] ~ .checkmark {
        border: solid 1px #929292;
        background-color: white;
        background-color: var(--main-bg);
    }

    .cgu-container.entreprise label:hover input[type="checkbox"] ~ .checkmark {
        border: solid 1px #929292;
        background-color: white;
        background-color: var(--main-bg);
    }

    .cgu-container label:hover input[type="checkbox"]:checked ~ .checkmark {
        background-color: var(--blue-primary);
        border-color: var(--blue-primary);
    }

    .cgu-container.entreprise label:hover input[type="checkbox"]:checked ~ .checkmark {
        background-color: var(--purple-primary);
        border-color: var(--purple-primary);
    }
}

/*Input mot clés*/
.keywords-input-container {
    width: 100%;
}

    .keywords-input-container input {
        width: 100%;
        border-radius: 5px;
        margin-top: 10px;
        transition: all .2s ease;
        max-width: 100%;
    }

        .keywords-input-container input:focus {
            border-color: var(--blue-primary);
        }

    .keywords-input-container.entreprise input:hover {
        border-color: var(--purple-primary);
    }

    .keywords-input-container.school input:hover {
        border-color: var(--orange-primary);
    }

    .keywords-input-container.entreprise input:focus {
        border-color: var(--purple-primary);
        box-shadow: 0px 0px 6px 0px #8C75EB82;
    }

    .keywords-input-container.school input:focus {
        border-color: var(--orange-primary);
        box-shadow: 0px 0px 6px 0px #FF910040;
    }

    .keywords-input-container input.error {
        border-color: #EA4335;
        background-position: right 210px center;
    }

    .keywords-input-container .keywords-input {
        position: relative;
    }

        .keywords-input-container .keywords-input .btn-add-keyword {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            right: 0px;
            cursor: pointer;
            z-index: 100;
            transition: all .2s ease;
            padding-left: 50px;
            padding-right: 20px;
            color: white;
            background-color: var(--blue-primary);
            height: 100%;
            border-radius: 5px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            width: auto;
            border: none;
        }

            .keywords-input-container .keywords-input .btn-add-keyword:hover {
                filter: brightness(1.1);
            }

    .keywords-input-container.entreprise .keywords-input .btn-add-keyword {
        background-color: var(--purple-primary);
    }

    .keywords-input-container.school .keywords-input .btn-add-keyword {
        background-color: var(--orange-primary);
    }

    .keywords-input-container .keywords-input .btn-add-keyword span {
        position: absolute;
        transform: translateY(-50%) rotate(45deg);
        top: 50%;
        left: 10px;
        font-size: 2.7rem;
    }

@media screen and (max-width:800px) {
    .keywords-input-container .keywords-input .btn-add-keyword {
        position: relative;
        top: auto;
        right: auto;
        border-radius: 5px;
        height: 40px;
        transform: none;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
}

/*mots-clés*/
.keywords-container {
    min-height: 35px;
    padding: 2px 4px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: -4px;
    margin-right: -4px;
}


    .keywords-container li {
        margin-left: 4px;
        margin-right: 4px;
        margin-top: 2px;
        margin-bottom: 2px;
        font-size: 0.8rem;
        font-weight: 500;
        padding: 7px 15px;
        border-radius: 30px;
        border: solid 1px #E2E2E2;
        margin-top: 5px;
        -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.05);
        box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.05);
        position: relative;
        max-height: 35px;
        transition: all .2s ease;
        cursor: pointer;
        background-color: white;
        background-color: var(--main-bg);
    }

        .keywords-container li span {
            display: none;
        }

    .keywords-container.delete li {
        padding-right: 30px;
    }

    .keywords-container.add li {
        padding-right: 30px;
    }

    .keywords-container li:hover {
        transform: scale(1.05);
        color: var(--blue-primary);
        border-color: var(--blue-primary);
    }

    .keywords-container.entreprise li:hover {
        transform: scale(1.05);
        color: var(--purple-primary);
        border-color: var(--purple-primary);
    }

    .keywords-container.school li:hover {
        transform: scale(1.05);
        color: var(--dark-orange);
        border-color: var(--dark-orange);
    }

    .keywords-container.coach li:hover {
        transform: scale(1.05);
        color: var(--green-primary);
        border-color: var(--green-primary);
    }

    .keywords-container.delete span {
        display: block;
        font-size: 2rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 7px;
        transition: all .2s ease;
    }

    .keywords-container.add span {
        display: block;
        font-size: 2rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        right: 7px;
        transition: all .2s ease;
    }

    .keywords-container.delete li:hover span {
        color: #FF5050;
    }

    .keywords-container.register.delete li:hover span {
        color: var(--blue-primary);
    }

    .keywords-container.add li:hover span {
        color: var(--blue-primary);
    }

    .keywords-container.coach.add li:hover span {
        color: var(--green-primary);
    }

    .keywords-container.entreprise.add li:hover span {
        color: var(--purple-primary);
    }

    .keywords-container.school.add li:hover span {
        color: var(--orange-primary);
    }

@media screen and (max-width:500px) {
    .keywords-container li {
        max-height: none;
    }
}

/*Boite déroulante*/
.boite-deroulante-container {
    width: 100%;
}

    .boite-deroulante-container select {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 8px 12px;
        border-radius: 5px;
        background-color: white;
        background-color: var(--main-bg);
        border-width: 1px;
        max-width: none;
    }

        .boite-deroulante-container select option {
            color: #222222;
            color: var(--main-text);
        }

            .boite-deroulante-container select option:disabled {
                color: #929292;
            }

    .boite-deroulante-container.round select {
        border-radius: 20px;
    }

    .boite-deroulante-container select.error {
        border-color: #FF5050;
    }

/*Selects checkbox*/
.select-checkbox-container {
    width: 100%;
    margin-right: 10px;
    padding: 10px;
    border: solid 1px var(--grey-dark);
    border-radius: 8px;
    min-height: 40px;
    position: relative;
    background-color: white;
    background-color: var(--main-bg);
}

    .select-checkbox-container:hover {
        border-color: var(--blue-primary);
    }

    .select-checkbox-container.entreprise:hover {
        border-color: var(--purple-primary);
    }

    .select-checkbox-container.school:hover {
        border-color: var(--dark-orange);
    }

    .select-checkbox-container.hasValue {
        border-color: var(--blue-primary);
    }

    .select-checkbox-container.entreprise.hasValue {
        border-color: var(--purple-primary);
    }

    .select-checkbox-container.school.hasValue {
        border-color: var(--orange-primary);
    }

    .select-checkbox-container .title-container .arrow-bottom {
        position: absolute;
        top: calc(50% - 5px);
        right: 10px;
    }

    .select-checkbox-container.open .title-container .arrow-bottom {
        transform: rotate(-135deg);
    }

    .select-checkbox-container .cases-list-container {
        transition: all .2s ease;
        max-height: 0px;
        overflow: hidden;
        scrollbar-width: thin;
    }

    .select-checkbox-container .title-container {
        padding: 10px;
        border-radius: 8px;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 10;
        transition: all .2s ease;
        background-color: white;
        background-color: var(--main-bg);
        height: 38px;
    }

    .select-checkbox-container .cases-list-container::-webkit-scrollbar {
        width: 4px;
    }

    .select-checkbox-container .cases-list-container::-webkit-scrollbar-thumb {
        background-color: #929292;
    }

    .select-checkbox-container.open .cases-list-container {
        max-height: 350px;
        overflow-y: scroll;
        margin-top: 28px;
    }

        .select-checkbox-container.open .cases-list-container li {
            padding-left: 0px;
            margin-top: 0px;
            transition: all .2s ease;
            border-radius: 8px;
            display: flex;
            padding-top: 5px;
            padding-bottom: 5px;
        }

            .select-checkbox-container.open .cases-list-container li:hover {
                background-color: var(--grey-light);
            }

            .select-checkbox-container.open .cases-list-container li span:not(.checkmark) {
                padding-left: 30px;
                transition: all .1s ease;
            }

            .select-checkbox-container.open .cases-list-container li .checkmark {
                top: 5px;
                left: 5px;
            }

    .select-checkbox-container .cases-list-container ul li input:checked ~ span:not(.checkmark) {
        font-weight: 500;
    }

/*Select*/
.select-container {
    width: 100%;
    padding: 10px;
    border: solid 1px var(--grey-dark);
    border-radius: 8px;
    min-height: 40px;
    position: relative;
    background-color: white;
    background-color: var(--main-bg);
    z-index: 100;
}

    .select-container:hover {
        border-color: var(--blue-primary);
    }

    .select-container.entreprise:hover {
        border-color: var(--purple-primary);
    }

    .select-container.school:hover {
        border-color: var(--dark-orange);
    }

    .select-container.hasValue {
        border-color: var(--blue-primary);
    }

    .select-container.entreprise.hasValue {
        border-color: var(--purple-primary);
    }

    .select-container.school.hasValue {
        border-color: var(--orange-primary);
    }

    .select-container .title-container .arrow-bottom {
        position: absolute;
        top: calc(50% - 5px);
        right: 10px;
    }

    .select-container.open .title-container .arrow-bottom {
        transform: rotate(-135deg);
    }

    .select-container ul {
        position: absolute;
        width: calc(100% + 2px);
        top: 33px;
        left: -1px;
        transition: all 0s ease;
        max-height: 0px;
        overflow: hidden;
        scrollbar-width: thin;
        background-color: white;
        background-color: var(--main-bg);
        z-index: -1;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

        .select-container ul li {
            cursor: pointer;
            transition: all .2s ease;
            padding: 5px 5px;
            margin-left: 10px;
            margin-right: 10px;
            border-radius: 8px;
        }

            .select-container ul li:hover {
                color: var(--blue-primary);
                background-color: var(--grey-light);
                padding-left: 20px;
                font-weight: 500;
            }

    .select-container.open.no-border ul {
        border: none;
        width: 100%;
        margin-left: 1px;
    }

    .select-container.no-border {
        border: none;
    }

    .select-container.entreprise ul li:hover {
        color: var(--purple-primary);
    }

    .select-container.school ul li:hover {
        color: var(--orange-primary);
    }

    .select-container ul li.selected {
        color: var(--blue-primary);
        font-weight: 500;
    }

    .select-container.school ul li.selected {
        color: var(--dark-orange);
        font-weight: 500;
    }

    .select-container.entreprise ul li.selected {
        color: var(--purple-primary);
        font-weight: 500;
    }

    .select-container .title-container {
        padding: 10px;
        border-radius: 8px;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 10;
        transition: all .2s ease;
        background-color: white;
        background-color: var(--main-bg);
        height: 38px;
    }

    .select-container.open {
        z-index: 110;
    }

        .select-container.open ul {
            transition: all .2s ease;
            max-height: 375px;
            overflow-y: auto;
            border: solid 1px var(--grey-dark);
            border-top: none;
            padding-top: 10px;
            z-index: 9;
            padding-bottom: 10px;
        }

    .select-container:hover ul {
        border-color: var(--blue-primary);
    }

    .select-container.entreprise:hover ul {
        border-color: var(--purple-primary);
    }

    .select-container.school:hover ul {
        border-color: var(--dark-orange);
    }

    .select-container ul::-webkit-scrollbar {
        width: 2px;
    }

    .select-container ul::-webkit-scrollbar-thumb {
        background-color: #929292;
    }


/*Double input*/
.double-input-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

    .double-input-container input {
        flex: 1;
    }

    .double-input-container .input-field-style {
        flex: 1;
    }

    .double-input-container .boite-deroulante-container {
        flex: 1;
    }

    .double-input-container *:first-child {
        margin-right: 5px;
    }

    .double-input-container *:last-child {
        margin-left: 5px;
    }

    .double-input-container.single .input-field-style:first-child {
        margin-right: 5px;
        flex: 1 0 70%;
    }

    .double-input-container select {
        margin: 0px !important;
    }

    .double-input-container .delete-line {
        font-size: 2rem;
        color: #929292;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -30px;
        cursor: pointer;
        transition: all .2s ease;
        display: block;
        font-weight: 800;
        height: 20px;
        width: 20px;
        background-image: url(../images/icons/ic_bin_blue.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: none;
    }

    .double-input-container.school .delete-line {
        background-image: url(../images/icons/ic_bin_orange.svg);
    }

    .double-input-container .delete-line:hover {
        transform: translateY(-50%) scale(1.1);
        color: var(--blue-primary);
    }

@media screen and (max-width:800px) {
    .double-input-container .delete-line {
        position: absolute;
        top: 0px;
        right: auto;
        left: 0px;
    }

        .double-input-container .delete-line::before {
            content: 'Supprimer';
            font-size: 1rem;
            color: var(--blue-primary);
            font-weight: 500;
            line-height: normal;
            position: absolute;
            top: 0px;
            left: 25px;
        }

    .double-input-container .input-field-style {
        flex: 0 0 100%;
    }

    .double-input-container .boite-deroulante-container {
        flex: 0 0 100%;
    }

    .double-input-container input {
        flex: 0 0 100%;
        margin-top: 20px;
    }

    .double-input-container .input-field-style input {
        margin-top: 0px;
    }

    .double-input-container.single *:first-child {
        flex: 0 0 100%;
        margin-right: 0px;
    }

    .double-input-container *:first-child {
        margin-right: 0px;
    }

    .double-input-container .input-field-style:last-child {
        margin-left: 0px;
        margin-top: 20px;
    }
}


/*Double input date*/
.double-input-date-container {
    display: flex;
    justify-content: left;
    width: 100%;
}


    .double-input-date-container .double-input-date:first-child {
        margin-right: 30px;
    }

@media screen and (max-width:450px) {
    .double-input-date-container {
        justify-content: space-between;
    }

        .double-input-date-container .double-input-date:first-child {
            margin-right: 0px;
        }
}

/*Boutons*/
button {
    background-color: var(--blue-primary);
    border: solid 1px var(--blue-primary);
    width: 250px;
    border-radius: 50px;
    height: 39px;
    transition: all ease .2s;
    color: white;
    cursor: pointer;
    display: block;
}

    button.orange {
        background-color: var(--orange-primary);
        border: solid 1px var(--orange-primary);
    }

    button.xl {
        width: 350px;
    }

    button.xxs {
        width: 75px;
    }

    button.xs {
        width: 150px;
    }

    button:hover {
        background-color: rgb(0, 195, 255);
        border: solid 1px rgb(0, 195, 255);
    }

.btn-blanc {
    background-color: transparent;
    color: var(--blue-primary);
}

    .btn-blanc:hover {
        background-color: var(--blue-primary);
        border-color: var(--blue-primary);
        color: white;
    }

    .btn-blanc.b-violet {
        border-color: var(--purple-primary);
        color: var(--purple-primary);
    }

        .btn-blanc.b-violet:hover {
            background-color: var(--purple-primary);
            border-color: var(--purple-primary);
            color: white;
        }

    .btn-blanc.b-blanc {
        border-color: white;
        color: white;
    }

        .btn-blanc.b-blanc:hover {
            background-color: white;
            background-color: var(--main-bg);
            border-color: white;
            color: #222222;
            color: var(--main-text);
        }

    .btn-blanc.b-rouge {
        border-color: #FF5050;
        color: #FF5050;
    }

        .btn-blanc.b-rouge:hover {
            background-color: #FF5050;
            border-color: #FF5050;
            color: white;
        }

    .btn-blanc.b-gris {
        border-color: #929292;
        color: #929292;
    }

        .btn-blanc.b-gris:hover {
            background-color: #929292;
            border-color: #929292;
            color: white;
        }

    .btn-blanc.b-orange {
        border-color: var(--orange-primary);
        color: var(--orange-primary);
    }

        .btn-blanc.b-orange:hover {
            background-color: var(--orange-primary);
            border-color: var(--orange-primary);
            color: white;
        }

    .btn-blanc.b-gris.ic-x {
        background-position: left 15px center;
        background-repeat: no-repeat;
        background-size: 15px 15px;
        padding-left: 40px;
        padding-right: 40px;
        background-image: url(../images/icons/ic_x_grey.svg);
    }

        .btn-blanc.b-gris.ic-x:hover {
            background-image: url(../images/icons/ic_x_white.svg);
        }

    .btn-blanc.b-vert {
        border-color: var(--green-primary);
        color: var(--green-primary);
    }

        .btn-blanc.b-vert:hover {
            background-color: var(--green-primary);
            border-color: var(--green-primary);
            color: white;
        }

.btn-violet {
    background-color: var(--purple-primary);
    border-color: var(--purple-primary);
    color: white;
}

    .btn-violet:hover {
        background-color: rgb(160, 139, 245);
        border-color: rgb(160, 139, 245);
    }

.square-btn {
    width: auto;
    min-height: 55px;
    border-radius: 8px !important;
    padding: 10px;
}

.square-btn-purple {
    background: linear-gradient(180deg, var(--purple-start-gradient) 0%, var(--purple-end-gradient) 100%);
    border: 1px var(--purple-primary) solid;
}

.btn-gris {
    background-color: #929292;
    border-color: #929292;
    color: white;
}

    .btn-gris:hover {
        background-color: rgb(185, 184, 184);
        border-color: rgb(185, 184, 184);
        color: white;
    }

.btn-dark {
    background: #353A48 0% 0% no-repeat padding-box;
    border-color: var(--grey-dark);
    color: white;
}

.btn-dark:hover {
    background-color: rgb(185, 184, 184);
    border-color: rgb(185, 184, 184);
    color: white;
}

.btn-grey {
    background-color: var(--grey-light);
    border-color: var(--grey-light);
    color: var(--main-text);
}

    .btn-grey:hover {
        background-color: var(--grey-light);
        border-color: var(--grey-light);
        color: var(--main-text);
        filter: brightness(1.1);
    }

.btn-orange {
    background: linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange));
    border-color: var(--orange-primary);
    color: white;
}

    .btn-orange:hover {
        background: rgb(253, 207, 89);
        border-color: rgb(253, 207, 89);
        color: white;
    }

.action-btn.btn-orange {
    background: linear-gradient(180deg, var(--orange-start-gradient) 0%, var(--orange-end-gradient) 100%);
    /*border-color: var(--orange-primary);*/
    color: white;
}

.btn-vert {
    background-color: var(--green-primary) !important;
    border-color: var(--green-primary) !important;
    color: white;
}

    .btn-vert:hover {
        background-color: var(--green-primary);
        border-color: var(--green-primary);
        filter: brightness(1.13);
    }

.btn-rouge {
    background-color: #FF5050;
    border-color: #FF5050;
    color: white;
}

    .btn-rouge:hover {
        background-color: #FF5050;
        border-color: #FF5050;
        filter: brightness(1.3);
    }



@media screen and (max-width:370px) {
    button.xl {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        height: auto;
    }
}

/*Boutons connexion login*/
.btn-auth {
    border-radius: 5px;
    text-align: right;
    width: auto;
    padding: 0px 15px 0px 40px;
    border: none;
    background-position: left 10px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

    .btn-auth:hover {
        border: none;
        filter: brightness(1.2);
    }

    .btn-auth.google {
        background-color: #EA4335;
        background-image: url(../images/icons/ic_google_white.svg);
    }

    .btn-auth.linkedin {
        background-color: #0077B5;
        background-image: url(../images/icons/ic_linkedin_white.svg);
    }

    .btn-auth.facebook {
        background-color: #3B5998;
        background-image: url(../images/icons/ic_facebook_white.svg);
    }

/*Boutons avec icones*/
button.ic-check {
    background-position: left 10px center;
    background-repeat: no-repeat;
    background-size: 35px 35px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_coche_white.svg);
}

button.ic-check.btn-orange {
    background: url(../images/icons/ic_coche_white.svg) no-repeat left 10px center/35px 35px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-check.btn-orange:hover {
        background: url(../images/icons/ic_coche_white.svg) no-repeat left 10px center/35px 35px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-star {
    background-position: left 10px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_star_white_full.svg);
}

button.ic-star.btn-orange {
    background: url(../images/icons/ic_star_white_full.svg) no-repeat left 10px center/20px 20px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-star.btn-orange:hover {
        background: url(../images/icons/ic_star_white_full.svg) no-repeat left 10px center/20px 20px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-lightbolt {
    background-position: left 10px center;
    background-repeat: no-repeat;
    background-size: 20px 25px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_lightbolt_white.svg);
}

button.ic-lightbolt.btn-orange {
    background: url(../images/icons/ic_lightbolt_white.svg) no-repeat left 10px center/20px 25px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-lightbolt.btn-orange:hover {
        background: url(../images/icons/ic_lightbolt_white.svg) no-repeat left 10px center/20px 25px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-next {
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    padding-left: 20px;
    padding-right: 40px;
    background-image: url(../images/icons/full_arrow_right_white.svg);
}

button.ic-next.btn-orange {
    background: url(../images/icons/full_arrow_right_white.svg) no-repeat right 15px center/15px 15px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-next.btn-orange:hover {
        background: url(../images/icons/full_arrow_right_white.svg) no-repeat right 15px center/15px 15px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-previous {
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/full_arrow_left_white.svg);
}

button.ic-previous.btn-orange {
    background: url(../images/icons/full_arrow_left_white.svg) no-repeat left 15px center/15px 15px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-previous.btn-orange:hover {
        background: url(../images/icons/full_arrow_left_white.svg) no-repeat left 15px center/15px 15px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-calendar {
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_calendar_white.svg);
}

button.ic-calendar.btn-orange {
    background: url(../images/icons/ic_calendar_white.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-calendar.btn-orange:hover {
        background: url(../images/icons/ic_calendar_white.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-bin {
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    padding-left: 20px;
    padding-right: 40px;
    background-image: url(../images/icons/ic_bin_white.svg);
}

button.ic-bin.btn-orange {
    background: url(../images/icons/ic_bin_white.svg) no-repeat right 15px center/15px 15px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-bin.btn-orange:hover {
        background: url(../images/icons/ic_bin_white.svg) no-repeat right 15px center/15px 15px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-plus {
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_plus_white.svg);
}

button.ic-plus.btn-orange {
    background: url(../images/icons/ic_plus_white.svg) no-repeat left 15px center/15px 15px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-plus.btn-orange:hover {
        background: url(../images/icons/ic_plus_white.svg) no-repeat left 15px center/15px 15px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-pen {
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 17px 17px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_pencil_white.svg);
}

button.ic-pen.btn-orange {
    background: url(../images/icons/ic_pencil_white.svg) no-repeat left 15px center/17px 17px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-pen.btn-orange:hover {
        background: url(../images/icons/ic_pencil_white.svg) no-repeat left 15px center/17px 17px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-send {
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    padding-left: 20px;
    padding-right: 40px;
    background-image: url(../images/icons/ic_send_white.svg);
}

button.ic-send.btn-orange {
    background: url(../images/icons/ic_send_white.svg) no-repeat right 15px center/15px 15px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-send.btn-orange:hover {
        background: url(../images/icons/ic_send_white.svg) no-repeat right 15px center/15px 15px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-download {
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_download_white.svg);
}

button.ic-download.btn-orange {
    background: url(../images/icons/ic_download_white.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-download.btn-orange:hover {
        background: url(../images/icons/ic_download_white.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-chat {
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_chat_bulle_white.svg);
}

button.ic-chat.btn-orange {
    background: url(../images/icons/ic_chat_bulle_white.svg) no-repeat left 15px center/25px 25px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-chat.btn-orange:hover {
        background: url(../images/icons/ic_chat_bulle_white.svg) no-repeat left 15px center/25px 25px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-bag {
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_briefcase_white.svg);
}

button.ic-bag.btn-orange {
    background: url(../images/icons/ic_briefcase_white.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-bag.btn-orange:hover {
        background: url(../images/icons/ic_briefcase_white.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-search {
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 40px;
    padding-right: 20px;
    background-image: url(../images/icons/ic_search_white.svg);
}

button.ic-search.btn-orange {
    background: url(../images/icons/ic_search_white.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-search.btn-orange:hover {
        background: url(../images/icons/ic_search_white.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

button.ic-linkedin {
    background-image: url(../images/icons/ic_linkedin_share_profil.svg);
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 40px;
    padding-right: 20px;
}

button.ic-linkedin.btn-orange {
    background: url(../images/icons/ic_linkedin_share_profil.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, var(--orange-start-gradient), var(--dark-orange)) !important;
}

    button.ic-linkedin.btn-orange:hover {
        background: url(../images/icons/ic_linkedin_share_profil.svg) no-repeat left 15px center/20px 20px, linear-gradient(180deg, rgb(253, 207, 89), var(--dark-orange)) !important;
    }

/*Toast*/
.toast-container {
    position: fixed;
    bottom: -300px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    background-color: var(--main-bg);
    overflow: hidden;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px 15px 20px 70px;
    background-position: left 20px center;
    background-size: 30px;
    background-repeat: no-repeat;
    display: flex;
    transition: all .8s ease;
    z-index: 2147483647;
}

    .toast-container.success {
        background-image: url(../images/icons/ic_checked_green.svg);
        border: solid 2px var(--green-primary);
        box-shadow: 0px 3px 6px 0px rgba(25, 207, 137, 0.3);
    }

    .toast-container.error {
        background-image: url(../images/icons/ic_x_circle_red.svg);
        border: solid 2px #EA4335;
        box-shadow: 0px 3px 6px 0px rgba(234, 68, 53, 0.3);
    }

    .toast-container.info {
        background-image: url(../images/icons/ic_infos_blue.svg);
        border: solid 2px var(--blue-primary);
        box-shadow: 0px 3px 6px 0px #03a2f12a;
    }

    .toast-container.show {
        bottom: 30px;
    }

    .toast-container .toast-progress-bar {
        position: absolute;
        width: 7px;
        left: 0px;
        bottom: 0px;
        height: 0%;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        transition: all .2s ease;
    }

    .toast-container.success .toast-progress-bar {
        background-color: var(--green-primary);
    }

    .toast-container.error .toast-progress-bar {
        background-color: #FF5050;
    }

    .toast-container.info .toast-progress-bar {
        background-color: var(--blue-primary);
    }

    .toast-container.show .toast-progress-bar {
        animation: toast-progress-animation 5s ease-in forwards;
    }

    .toast-container .toast-text {
        overflow: hidden;
        max-width: 450px;
        margin: auto;
        margin-right: 30px;
        font-weight: 500;
    }

    .toast-container .toast-buttons {
        line-height: 38px;
        display: flex;
        justify-content: right;
    }

        .toast-container .toast-buttons .toast-action-buttons {
            transition: all .2s ease;
            color: var(--blue-primary);
            cursor: pointer;
            margin-right: 8px;
            padding-right: 8px;
            position: relative;
        }

            .toast-container .toast-buttons .toast-action-buttons::before {
                content: '';
                position: absolute;
                width: 1px;
                height: 20px;
                background-color: #D8D8D8;
                top: 50%;
                transform: translateY(-50%);
                right: 0px;
            }

        .toast-container .toast-buttons .toast-close-buttons {
            width: 1rem;
            height: 100%;
            background-image: url(../images/icons/ic_x_grey.svg);
            background-repeat: no-repeat;
            background-size: 15px 15px;
            background-position: center;
            cursor: pointer;
        }

@media screen and (max-width:800px) {
    .toast-container {
        min-width: 310px;
        padding-left: 25px;
        width: 80%;
        justify-content: space-between;
    }

        .toast-container .toast-text {
            margin-left: 40px;
        }
}

@media screen and (max-width:450px) {
    .toast-container {
        padding-left: 53px;
        background-position: 15px center;
        width: 95%;
    }

        .toast-container .toast-text {
            margin-left: 0px;
        }
}

/*Checkbox*/
.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

    .checkbox-container .checkbox-content {
        margin: 10px 20px 10px 0px;
    }

.checkbox-content {
    width: 250px;
}

    .checkbox-content.xsmall {
        width: 170px;
    }

    .checkbox-content.small {
        width: 200px;
    }

    .checkbox-content.xl {
        width: 300px;
    }

    .checkbox-content.full {
        width: 100%;
    }

    .checkbox-content .checkbox-item {
        position: relative;
        background-color: transparent;
        border: solid 1px var(--blue-primary);
        width: auto;
        border-radius: 20px;
        min-height: 40px;
        transition: all ease .2s;
        color: var(--blue-primary);
        cursor: pointer;
        display: flex;
        overflow: hidden;
    }

    .checkbox-content.entreprise .checkbox-item {
        color: var(--purple-primary);
        border-color: var(--purple-primary);
    }

    .checkbox-content.school .checkbox-item {
        color: var(--orange-primary);
        border-color: var(--orange-primary);
    }

    .checkbox-content input:checked ~ .checkbox-item {
        background-color: var(--blue-primary);
        color: white;
    }

    .checkbox-content.entreprise input:checked ~ .checkbox-item {
        background-color: var(--purple-primary);
    }

    .checkbox-content.school input:checked ~ .checkbox-item {
        background-color: var(--orange-primary);
    }

    .checkbox-content .checkbox-item .checkbox-text {
        margin: auto;
        padding: 7px 15px 7px 45px;
        font-weight: 500;
    }

    .checkbox-content input {
        display: none;
    }

    .checkbox-content .checkbox-item .checkmark {
        position: absolute;
        top: calc(50% - 12px);
        left: 8px;
        height: 25px;
        width: 25px;
        background-color: white;
        background-color: var(--main-bg);
        border-radius: 50%;
        border: solid 1px var(--blue-primary);
        transition: all .2s ease;
        cursor: pointer;
        overflow: hidden;
    }

    .checkbox-content.entreprise .checkbox-item .checkmark {
        border-color: var(--purple-primary);
    }

    .checkbox-content.school .checkbox-item .checkmark {
        border-color: var(--orange-primary);
    }

    .checkbox-content .checkbox-item .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 8px;
        top: 3px;
        width: 5px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        animation: checkmarkFromTop .2s ease-in-out;
    }

    .checkbox-content input[type="radio"] ~ .checkbox-item .checkmark:after {
        width: 11px;
        height: 11px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        border-width: 3px;
        background-color: white;
        animation: radioAnimation .2s ease-in-out;
    }

    .checkbox-content input:checked ~ .checkbox-item .checkmark {
        background-color: transparent;
        border-color: white;
    }


        .checkbox-content input:checked ~ .checkbox-item .checkmark:after {
            display: block;
        }

    .checkbox-content input:checked ~ .checkbox-item .checkmark {
        animation: checkedSpan .2s ease-in-out;
    }


@media screen and (max-width:800px) {
    .checkbox-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

        .checkbox-container .checkbox-content {
            margin: 10px 10px 10px 10px;
        }
}

/*Bouton switch*/
.checkbox-btn-switch {
    width: 60px;
    height: 30px;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

    .checkbox-btn-switch label {
        width: 100%;
        height: 100%;
    }

    .checkbox-btn-switch input {
        display: none;
    }

    .checkbox-btn-switch label::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #BCBCBC;
        top: 0px;
        left: 0px;
        z-index: 5;
        transition: all .2s ease;
    }

    .checkbox-btn-switch label::after {
        content: '';
        position: absolute;
        width: 26px;
        height: 26px;
        top: 2px;
        left: 2px;
        transition: all .2s ease;
        border-radius: 50%;
        background-color: white;
        z-index: 10;
    }

    .checkbox-btn-switch input:checked ~ label::before {
        background-color: var(--blue-primary);
    }

    .checkbox-btn-switch.entreprise input:checked ~ label::before {
        background-color: var(--purple-primary);
    }

    .checkbox-btn-switch input:checked ~ label::after {
        transform: translateX(30px);
    }

/*Bouton switch avec texte*/
.checkbox-btn-switch-text .checkbox {
    width: 60px;
    min-width: 60px;
    height: 30px;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.checkbox-btn-switch-text label {
    width: 100%;
    height: 100%;
    display: flex;
}

.checkbox-btn-switch-text input {
    display: none;
}

.checkbox-btn-switch-text .checkbox::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #BCBCBC;
    top: 0px;
    left: 0px;
    z-index: 5;
    border-radius: 15px;
    transition: all .2s ease;
}

.checkbox-btn-switch-text .checkbox::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    top: 2px;
    left: 2px;
    transition: all .2s ease;
    border-radius: 50%;
    background-color: white;
    z-index: 10;
}

.checkbox-btn-switch-text .checkbox-title {
    margin: 6px;
    margin-left: 20px;
}


.checkbox-btn-switch-text input:checked ~ .checkbox::before {
    background: var(--blue-start-gradient);
    background: linear-gradient(180deg, var(--blue-start-gradient) 0%, var(--blue-end-gradient) 100%);
}

.checkbox-btn-switch-text.entreprise input:checked ~ .checkbox::before {
    background: var(--purple-start-gradient);
    background: linear-gradient(180deg, var(--purple-start-gradient) 0%, var(--purple-end-gradient) 100%);
}

.checkbox-btn-switch-text.school input:checked ~ .checkbox::before {
    background: var(--orange-start-gradient);
    background: linear-gradient(180deg, var(--orange-start-gradient) 0%, var(--orange-end-gradient) 100%);
}

.checkbox-btn-switch-text input:disabled ~ .checkbox::before {
    background-color: #77ccf6;
}

.checkbox-btn-switch-text input:checked ~ .checkbox-title {
    font-weight: 600;
}

.checkbox-btn-switch-text input:checked ~ .checkbox::after {
    transform: translateX(30px);
}

/*Case à cocher list*/
.cases-list-container {
    width: 100%;
}


    .cases-list-container ul {
        display: flex;
        flex-direction: row;
        justify-content: left;
        flex-wrap: wrap;
        position: relative;
    }

        .cases-list-container ul li {
            flex: 1;
            min-width: 40%;
            max-width: 50%;
            position: relative;
            padding-left: 18px;
            cursor: pointer;
            margin-top: 15px;
            display: flex;
        }

            .cases-list-container ul li input {
                display: none;
            }

            .cases-list-container ul li label {
                width: 100%;
                height: 100%;
                min-width: 100%;
                max-width: 100%;
                padding: 0px 5px 0px 10px;
            }

            .cases-list-container ul li .checkmark {
                position: absolute;
                top: 0;
                left: 0;
                height: 18px;
                width: 18px;
                background-color: white;
                background-color: var(--main-bg);
                border-radius: 3px;
                border: solid 1px #929292;
                transition: all .2s ease;
                cursor: pointer;
                overflow: hidden;
            }

    .cases-list-container.error ul li .checkmark {
        border-color: #FF5050;
    }

    .cases-list-container.large ul li {
        flex: 1;
        min-width: 100%;
        max-width: 100%;
    }

    .cases-list-container ul li input[type="radio"] ~ .checkmark {
        border-radius: 50%;
    }

    .cases-list-container ul li:hover {
        color: var(--blue-primary);
    }

    .cases-list-container.coach ul li:hover {
        color: var(--green-primary);
    }

    .cases-list-container.school ul li:hover {
        color: var(--dark-orange);
    }

    .cases-list-container.entreprise ul li:hover {
        color: var(--purple-primary);
    }

    .cases-list-container ul li:hover input ~ .checkmark {
        background-color: var(--blue-primary);
        border-color: var(--blue-primary);
    }

    .cases-list-container.entreprise ul li:hover input ~ .checkmark {
        background-color: var(--purple-primary);
        border-color: var(--purple-primary);
    }

    .cases-list-container.coach ul li:hover input ~ .checkmark {
        background-color: var(--green-primary);
        border-color: var(--green-primary);
    }

    .cases-list-container.school ul li:hover input ~ .checkmark {
        background-color: var(--dark-orange);
        border-color: var(--dark-orange);
    }

    .cases-list-container ul li input:checked ~ .checkmark {
        background-color: var(--blue-primary);
        border-color: var(--blue-primary);
    }

    .cases-list-container.entreprise ul li input:checked ~ .checkmark {
        background-color: var(--purple-primary);
        border-color: var(--purple-primary);
    }

    .cases-list-container.coach ul li input:checked ~ .checkmark {
        background-color: var(--green-primary);
        border-color: var(--green-primary);
    }

    .cases-list-container.school ul li input:checked ~ .checkmark, .cases-list-group-title.school label input:checked ~ .checkmark {
        background-color: var(--dark-orange);
        border-color: var(--dark-orange);
    }

    .cases-list-container ul li input:checked ~ span.checkmark {
        color: var(--blue-primary);
        animation: checkedSpan .3s ease-in-out;
    }

    .cases-list-container.entreprise ul li input:checked ~ span {
        color: var(--purple-primary);
    }

    .cases-list-container.coach ul li input:checked ~ span {
        color: var(--green-primary);
    }

    .cases-list-container.school ul li input:checked ~ span, .cases-list-group-title.school label input:checked ~ span {
        color: var(--dark-orange);
    }

    .cases-list-container ul li input:checked ~ .checkmark:after, .cases-list-group-title label input:checked ~ .checkmark:after {
        display: block;
    }

    .cases-list-container ul li .checkmark:after, .cases-list-group-title label input:checked .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 5px;
        top: 0px;
        width: 4px;
        height: 10px;
        border: solid var(--main-bg);
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        animation: checkmarkFromTop .2s ease-in-out;
    }

    .cases-list-container ul li input[type="radio"] ~ .checkmark:after {
        border-radius: 50%;
        border-width: 4px;
        width: 8px;
        height: 8px;
        left: 0px;
        top: 0px;
        animation: radioAnimation .2s ease-in-out;
    }

@media screen and (max-width:800px) {
    .cases-list-container ul li:hover {
        color: #222222;
        color: var(--main-text);
    }

    .cases-list-container.entreprise ul li:hover {
        color: #222222;
        color: var(--main-text);
    }

    .cases-list-container.coach ul li:hover {
        color: #222222;
        color: var(--main-text);
    }

    .cases-list-container.school ul li:hover {
        color: #222222;
        color: var(--main-text);
    }

    .cases-list-container ul li:hover input ~ .checkmark {
        background-color: white;
        background-color: var(--main-bg);
        border-color: #929292;
    }

    .cases-list-container.entreprise ul li:hover input ~ .checkmark {
        background-color: white;
        background-color: var(--main-bg);
        border-color: #929292;
    }

    .cases-list-container.coach ul li:hover input ~ .checkmark {
        background-color: white;
        background-color: var(--main-bg);
        border-color: #929292;
    }

    .cases-list-container.school ul li:hover input ~ .checkmark {
        background-color: white;
        background-color: var(--main-bg);
        border-color: #929292;
    }

    .cases-list-container ul li input:checked ~ .checkmark {
        background-color: var(--blue-primary);
        border-color: var(--blue-primary);
    }

    .cases-list-container.entreprise ul li input:checked ~ .checkmark {
        background-color: var(--purple-primary);
        border-color: var(--purple-primary);
    }

    .cases-list-container.coach ul li input:checked ~ .checkmark {
        background-color: var(--green-primary);
        border-color: var(--green-primary);
    }

    .cases-list-container.school ul li input:checked ~ .checkmark {
        background-color: var(--orange-primary);
        border-color: var(--orange-primary);
    }

    .cases-list-container ul li {
        max-width: 100%;
        min-width: 100%;
    }
}

/*Barre de progession avec étapes*/
.progress-step-container {
    width: 100%;
    position: relative;
    z-index: 10;
}

    .progress-step-container .progress-step-bar {
        counter-reset: progressBarStep;
        display: flex;
    }

        .progress-step-container .progress-step-bar li {
            list-style: none;
            flex: 1;
            width: 30.33%;
            position: relative;
            text-align: center;
            font-weight: 600;
        }

            .progress-step-container .progress-step-bar li:before {
                content: counter(progressBarStep);
                counter-increment: progressBarStep;
                width: 50px;
                height: 50px;
                line-height: 50px;
                border: 2px solid #ddd;
                border-radius: 100%;
                display: block;
                text-align: center;
                margin: 0 auto 10px auto;
                background-color: grey;
                z-index: 5;
                position: relative;
                color: white;
            }

            .progress-step-container .progress-step-bar li.current {
                color: var(--green-primary);
            }

    .progress-step-container.entreprise .progress-step-bar li.current {
        color: var(--purple-primary);
    }

    .progress-step-container.school .progress-step-bar li.current {
        color: var(--current-color);
        font-weight: 800;
    }

    .progress-step-container.register .progress-step-bar li.current {
        color: var(--current-color);
        font-weight: 800;
    }

    .progress-step-container .progress-step-bar li.current:before {
        /*transform: scale(1.3);*/
        border-color: var(--green-primary);
        box-shadow: 0px 3px 6px 0px rgba(20, 170, 113, 0.4);
    }

    .progress-step-container.entreprise .progress-step-bar li.current:before {
        border-color: var(--purple-primary);
        box-shadow: 0px 3px 6px 0px rgba(141, 117, 235, 0.4);
    }

    .progress-step-container.school .progress-step-bar li.current:before {
        border-color: var(--orange-primary);
        border: none;
        background: linear-gradient(180deg, var(--orange-start-gradient) 0%, var(--dark-orange) 100%);
        box-shadow: 0px 3px 6px 0px #FF910040;
    }

    .progress-step-container.register .progress-step-bar li.current:before {
        border-color: var(--blue-primary);
        border: none;
        background: linear-gradient(180deg, rgba(63, 63, 216, 1) 0%, rgba(3, 160, 241, 1) 100%);
        box-shadow: 0px 3px 6px 0px #FF910040;
    }

    .progress-step-container .progress-step-bar li:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 5px;
        background-color: grey;
        top: 23px;
        left: -50%;
        z-index: -1;
    }

    .progress-step-container .progress-step-bar li.passed:after {
        background-color: var(--green-primary);
    }

    .progress-step-container.entreprise .progress-step-bar li.passed:after {
        background-color: var(--purple-primary);
    }

    .progress-step-container.school .progress-step-bar li.passed:after {
        background-color: var(--orange-primary);
    }

    .progress-step-container .progress-step-bar li:first-child:after {
        content: none;
    }

    .progress-step-container .progress-step-bar li.passed {
        color: var(--green-primary);
    }

        .progress-step-container .progress-step-bar li.passed:before {
            border-color: var(--green-primary);
            background-color: var(--green-primary);
            color: white;
        }

    .progress-step-container.register .progress-step-bar li.passed:before {
        border-color: var(--blue-primary);
        border: none;
        background: linear-gradient(180deg, rgba(63, 63, 216, 1) 0%, rgba(3, 160, 241, 1) 100%);
        color: white;
    }

    .progress-step-container .progress-step-bar li.passed + li:after {
        background-color: var(--green-primary);
    }

    .progress-step-container.register .progress-step-bar li.passed + li:after {
        background-color: var(--blue-primary);
    }

    .progress-step-container.entreprise .progress-step-bar li.passed {
        color: var(--purple-primary);
    }

    .progress-step-container.school .progress-step-bar li.passed {
        color: var(--dark-orange);
    }

    .progress-step-container.register .progress-step-bar li.passed {
        color: var(--blue-primary);
    }

    .progress-step-container.entreprise .progress-step-bar li.passed:before {
        border-color: var(--purple-primary);
        background-color: var(--purple-primary);
    }

    .progress-step-container.entreprise .progress-step-bar li.passed + li:after {
        background-color: var(--purple-primary);
    }

    .progress-step-container.school .progress-step-bar li.passed:before {
        border: none;
        background: linear-gradient(180deg, var(--orange-start-gradient) 0%, var(--dark-orange) 100%);
    }

    .progress-step-container.school .progress-step-bar li.passed + li:after {
        background: linear-gradient(180deg, var(--orange-start-gradient) 0%, var(--dark-orange) 100%);
    }

    .progress-step-container .progress-step-bar li:last-child.passed {
        transform: scale(2);
    }

.inscription-header .progress-step-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.inscription-header.entreprise .progress-step-container .progress-step-bar li.passed {
    color: var(--purple-primary);
}

    .inscription-header.entreprise .progress-step-container .progress-step-bar li.passed:before {
        background-color: white;
        color: var(--purple-primary);
        border-color: white;
    }

    .inscription-header.entreprise .progress-step-container .progress-step-bar li.passed + li:after {
        background-color: white;
    }

.inscription-header.entreprise .progress-step-container .progress-step-bar li.current::before {
    border-color: white;
    color: var(--purple-primary);
    background-color: white;
}

.inscription-header.entreprise .progress-step-container .progress-step-bar li.passed {
    color: white;
}

.inscription-header.entreprise .progress-step-container .progress-step-bar li.current {
    color: white;
}

.inscription-header.entreprise .progress-step-container .progress-step-bar li:not(.passed):not(.current) {
    color: #CCCCCC;
}

.inscription-header.entreprise .progress-step-container .progress-step-bar li:before {
    background-color: #CCCCCC;
    color: var(--purple-primary);
    border-color: #CCCCCC;
}

.inscription-header.entreprise .progress-step-container .progress-step-bar li:after {
    background-color: #CCCC;
}

@media screen and (max-width:450px) {
    .progress-step-container .progress-step-bar li {
        font-size: 0.8rem;
    }
}

/*Comment ça marche ?*/
.comment-marche-container {
    width: 100%;
    overflow: hidden;
}

    .comment-marche-container .comment-marche-cat {
        max-width: 1000px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 65px;
        display: flex;
    }

        .comment-marche-container .comment-marche-cat button {
            flex: 1;
            max-width: 100%;
            padding-top: 15px;
            padding-bottom: 15px;
            min-height: 50px;
            background-color: white;
            background-color: var(--main-bg);
            color: #222222;
            color: var(--main-text);
            border: solid 1px var(--blue-primary);
            font-size: 1rem;
            transition: all .2s ease-in-out;
            border-radius: 0px;
        }

            .comment-marche-container .comment-marche-cat button:hover {
                background-color: var(--blue-primary);
                color: white;
            }

        .comment-marche-container .comment-marche-cat .comment-marche-cat-left-button {
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            margin-right: -2px;
        }

            .comment-marche-container .comment-marche-cat .comment-marche-cat-left-button.active {
                background-color: var(--blue-primary);
                color: white;
            }

        .comment-marche-container .comment-marche-cat .comment-marche-cat-right-button {
            border-top-right-radius: 100px;
            border-bottom-right-radius: 100px;
            margin-left: -2px;
        }

            .comment-marche-container .comment-marche-cat .comment-marche-cat-right-button:hover {
                background-color: var(--green-primary);
                border-color: var(--green-primary);
            }

            .comment-marche-container .comment-marche-cat .comment-marche-cat-right-button.active {
                background-color: var(--green-primary);
                border-color: var(--green-primary);
                color: white;
            }

    .comment-marche-container .comment-marche-steps-container.coach .step .dot {
        background-color: var(--green-primary);
    }

    .comment-marche-container .comment-marche-steps-container.coach .middle-line {
        background-color: var(--green-primary);
    }

    .comment-marche-container .comment-marche-first-container {
        display: none;
    }

    .comment-marche-container .comment-marche-second-container {
        display: none;
    }

    .comment-marche-container .comment-marche-first-container.active {
        display: block;
    }

    .comment-marche-container .comment-marche-second-container.active {
        display: block;
    }

    .comment-marche-container .comment-marche-nav-mobile.coach li.active {
        background-color: var(--green-primary);
    }

    .comment-marche-container .comment-marche-steps-container {
        display: flex;
        justify-content: space-between;
        position: relative;
        flex-wrap: nowrap;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

        .comment-marche-container .comment-marche-steps-container .step {
            flex: 1;
            max-width: 320px;
            text-align: center;
        }

            .comment-marche-container .comment-marche-steps-container .step .dot {
                width: 120px;
                height: 120px;
                border-radius: 50%;
                background-color: var(--blue-primary);
                text-align: center;
                color: white;
                line-height: 120px;
                font-size: 1.5rem;
                font-weight: 500;
                margin: 40px auto 30px auto;
                z-index: 2;
                position: relative;
            }

    .comment-marche-container .comment-marche-second-container .comment-marche-steps-container .step .dot {
        background-color: var(--green-primary);
    }

    .comment-marche-container.entreprise .comment-marche-steps-container .step .dot {
        background-color: var(--purple-primary);
    }

    .comment-marche-container .comment-marche-steps-container .middle-line {
        width: 80%;
        height: 2px;
        background-color: var(--blue-primary);
        position: absolute;
        top: 100px;
        z-index: 1;
        left: 50%;
        transform: translateX(-50%);
    }

    .comment-marche-container .comment-marche-second-container .comment-marche-steps-container .middle-line {
        background-color: var(--green-primary);
    }

    .comment-marche-container.entreprise .comment-marche-steps-container .middle-line {
        background-color: var(--purple-primary);
    }

    .comment-marche-container .comment-marche-steps-container.mobile {
        display: none;
    }

    .comment-marche-container .comment-marche-steps-container.mobile {
        width: 90%;
    }

    .comment-marche-container.entreprise {
        position: relative;
        padding-bottom: 40px;
    }

    .comment-marche-container .comment-marche-head-image {
        position: absolute;
        width: 250px;
        left: 20%;
        top: -50px;
    }

    .comment-marche-container .comment-marche-nav-mobile {
        display: none;
    }

@media screen and (max-width:1200px) {
    .comment-marche-container .comment-marche-steps-container {
        width: 98%;
        overflow: hidden;
        position: relative;
    }
}

@media screen and (max-width:800px) {

    .comment-marche-container .comment-marche-steps-container.pc {
        display: none;
    }

    .comment-marche-container .comment-marche-steps-container.mobile {
        display: flex;
    }

    .comment-marche-container .comment-marche-nav-mobile {
        display: block;
    }

    .comment-marche-container .comment-marche-head-image {
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.7;
        top: -30px
    }

    .comment-marche-container .comment-marche-steps-container.mobile {
        display: block;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

        .comment-marche-container .comment-marche-steps-container.mobile .owl-stage-outer .owl-stage {
            display: flex;
            flex-direction: row;
        }

        .comment-marche-container .comment-marche-steps-container.mobile .owl-nav.disabled {
            display: none;
        }

        .comment-marche-container .comment-marche-steps-container.mobile .step {
            margin-left: auto;
            margin-right: auto;
        }

            .comment-marche-container .comment-marche-steps-container.mobile .step .step-text {
                padding: 0px 8px;
            }

    .comment-marche-container .comment-marche-nav-mobile {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 30px;
        position: relative;
        z-index: 10;
    }

        .comment-marche-container .comment-marche-nav-mobile li {
            cursor: pointer;
            border: none;
            height: 12px;
            max-height: 12px;
            width: 12px;
            margin: 10px;
            border-radius: 50%;
            overflow: hidden;
            transition: all .2s ease;
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
            flex: 0 0 12px;
            max-width: 12px;
            background-color: #ddd;
        }

            .comment-marche-container .comment-marche-nav-mobile li.active {
                background-color: var(--blue-primary);
            }

    .comment-marche-container .comment-marche-second-container .comment-marche-nav-mobile li.active {
        background-color: var(--green-primary);
    }

    .comment-marche-container.entreprise .comment-marche-nav-mobile li.active {
        background-color: var(--purple-primary);
    }
}

@media screen and (max-width:420px) {
    .comment-marche-container .comment-marche-cat {
        width: 95%;
    }
}

/*Quill*/
.ql-container {
    font-family: 'Montserrat', sans-serif;
}

.quill-container .quill-content {
    min-height: 400px;
}

.quill-container .ql-editor {
    font-size: 1rem;
    max-height: 600px;
}

    .quill-container .ql-editor h4 {
        font-size: 1.3rem;
        font-weight: 800;
    }

    .quill-container .ql-editor h5 {
        font-size: 1.1rem;
        font-weight: 600;
    }

.ql-editor-content {
    line-height: 25px;
    font-size: 1rem;
    overflow-wrap: break-word;
}

    .ql-editor-content h4 {
        font-size: 1.3rem;
        font-weight: 800;
    }

    .ql-editor-content h5 {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .ql-editor-content h4 {
        font-size: 1.3rem;
        font-weight: 800;
    }

    .ql-editor-content h5 {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .ql-editor-content ul {
        list-style: disc;
        padding-left: 10px;
    }

.pp-program-section .ql-editor-content ul {
    list-style: disc;
    padding-left: 30px;
    list-style-image: url(../images/icons/ic_dots_ul_orange.svg);
}

        .ql-editor-content ul li {
            margin-top: 10px;
            font-weight: 500;
            font-size: 1.05rem;
        }

    .ql-editor-content .ql-align-center {
        text-align: center;
    }

    .ql-editor-content .ql-align-right {
        text-align: right;
    }

    .ql-editor-content .ql-align-justify {
        text-align: justify;
    }


body.dark .ql-editor-content span {
    color: white !important;
}

.quill-container {
    border-radius: 8px !important;
    /* overflow: hidden; */
    box-shadow: 0px 9px 16px 0px var(--shadow) !important;
}

.ql-toolbar.ql-snow {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border: none !important;
    border-bottom: solid 1px var(--grey-light) !important;
    padding-top: 20px !important;
    margin-bottom: 5px !important;
    padding-bottom: 20px !important;
    background-color: white !important;
    background-color: var(--main-bg) !important;
}

.ql-container.ql-snow {
    border: none !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    background-color: white !important;
    background-color: var(--main-bg) !important;
    position: relative !important;
    z-index: 80 !important;
}

.ql-editor {
    scrollbar-width: thin;
    line-height: 1.7 !important;
    padding: 20px 25px;
    margin-top: -5px;
}

    .ql-editor::-webkit-scrollbar {
        width: 3px;
    }

    .ql-editor::-webkit-scrollbar-thumb {
        background-color: #929292;
    }

    .ql-editor.ql-blank::before {
        font-style: normal;
        left: 25px;
    }

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    z-index: 9999;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: 'Titre' !important;
    font-weight: bolder !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: 'Sous-titre' !important;
    font-weight: bold !important;
}

.ql-snow .ql-tooltip[data-mode=link]::before {
    content: 'Entrez un lien' !important;
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: 'Ajouter' !important;
}

.ql-bubble .ql-formats .ql-header[value="4"] {
    width: 40px;
    text-align: center;
}

.ql-bubble .ql-formats .ql-header[value="5"] {
    width: 75px;
    text-align: center;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: var(--main-text);
}

.ql-snow .ql-stroke {
    stroke: var(--main-text);
}

.ql-snow .ql-picker {
    color: var(--main-text);
}

.ql-snow .ql-picker-options {
    background-color: var(--grey-light);
    border-color: var(--grey-light);
}

.ql-editor.ql-blank::before {
    color: var(--grey-dark) !important;
}

/*Changement de photo de profil*/
.change-pdp-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    min-width: 150px;
    min-height: 150px;
}

    .change-pdp-container.square {
        border-radius: 8px;
    }

    .change-pdp-container.not-center {
        margin-left: 0px;
        margin-right: 0px;
    }

    .change-pdp-container .photo-content {
        transition: all .2s ease;
        width: 100%;
        height: 100%;
    }

    .change-pdp-container:hover .photo-content {
        transform: scale(1.05);
        filter: brightness(0.6);
    }

    .change-pdp-container .change-pdp-text {
        position: absolute;
        z-index: 5;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-shadow: 2px 2px 4px #00000049;
        font-weight: 800;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        width: 130px;
        opacity: 0;
        transition: all .2s ease;
    }

    .change-pdp-container:hover .change-pdp-text {
        opacity: 1;
    }

    .change-pdp-container .change-pdp-text .photo-img {
        width: 40px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }

/*Changement de photo de couverture*/
.change-couverture-container {
    height: auto;
    width: 100%;
    border-radius: 5px;
    overflow: visible;
    position: relative;
    cursor: pointer;
}

    .change-couverture-container .couverture-viewer {
        height: 200px;
        overflow: hidden;
        width: 100%;
        position: relative;
        border-radius: 5px;
        background-color: transparent;
    }

        .change-couverture-container .couverture-viewer .couverture-src {
            position: absolute;
            z-index: 1;
            width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all .2s ease;
            border-radius: 5px;
        }

        .change-couverture-container .couverture-viewer:hover .couverture-src {
            transform: translate(-50%, -50%) scale(1.05);
            filter: brightness(0.8);
        }

    .change-couverture-container .change-couverture-text {
        position: absolute;
        z-index: 5;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-weight: 800;
        font-size: 1.25rem;
        font-weight: bold;
        text-align: center;
        width: 200px;
        opacity: 0;
        transition: all .2s ease;
    }

    .change-couverture-container .couverture-viewer:hover .change-couverture-text {
        opacity: 1;
    }

    .change-couverture-container .change-couverture-text .photo-img {
        width: 40px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }

    .change-couverture-container.profil .change-couverture-text {
        top: 35%;
    }

    .change-couverture-container.profil .change-pdp-container {
        margin-top: -78px;
        z-index: 10;
    }

@media screen and (max-width:800px) {

    .change-couverture-container .change-couverture-text .photo-img {
        display: none;
    }

    .change-couverture-container.profil .change-couverture-text {
        top: 40%;
    }
}

/*Inscription*/
.inscription-header {
    padding-top: 130px;
    padding-bottom: 130px;
    position: relative;
}

    .inscription-header .inscription-header-bg {
        background: var(--blue-primary);
        background: -moz-linear-gradient(left, #03A0F1 0%, var(--green-primary) 100%);
        background: -webkit-linear-gradient(left, #03A0F1 0%, var(--green-primary) 100%);
        background: linear-gradient(to right, #03A0F1 0%, var(--green-primary) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03A0F1', endColorstr='#19CF89', GradientType=1);
        width: 100%;
        height: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
        background-size: 200% 200%;
        animation: header-bg-animation 15s ease infinite;
    }

    .inscription-header.school .inscription-header-bg {
        background: rgb(255, 145, 0);
        background: -moz-linear-gradient(90deg, rgba(255, 145, 0, 1) 0%, rgba(255, 204, 0, 1) 100%);
        background: -webkit-linear-gradient(90deg, rgba(255, 145, 0, 1) 0%, rgba(255, 204, 0, 1) 100%);
        background: linear-gradient(90deg, rgba(255, 145, 0, 1) 0%, rgba(255, 204, 0, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--orange-primary);", endColorstr="#ffcc00", GradientType=1);
    }

    .inscription-header.entreprise .inscription-header-bg {
        background: rgb(132, 112, 238);
        background: -moz-linear-gradient(45deg, rgba(132, 112, 238, 1) 0%, rgba(197, 168, 255, 1) 100%);
        background: -webkit-linear-gradient(45deg, rgba(132, 112, 238, 1) 0%, rgba(197, 168, 255, 1) 100%);
        background: linear-gradient(45deg, rgba(132, 112, 238, 1) 0%, rgba(197, 168, 255, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8470ee', endColorstr='#c5a8ff', GradientType=1);
    }

    .inscription-header .inscription-header-infos {
        display: flex;
        height: 120px;
        max-width: 800px;
        width: 95%;
        margin-left: 15%;
    }

        .inscription-header .inscription-header-infos .profil-container {
            margin: 0px 40px;
        }

            .inscription-header .inscription-header-infos .profil-container img {
                width: 120px;
                height: 120px;
                border-radius: 50%;
            }

        .inscription-header .inscription-header-infos .profil-txt {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

            .inscription-header .inscription-header-infos .profil-txt * {
                margin: auto 0px;
            }

@media screen and (max-width:1170px) {
    .inscription-header {
        padding-top: 50px;
        padding-bottom: 150px;
    }

        .inscription-header .inscription-header-bg {
            clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
        }

        .inscription-header .inscription-header-infos {
            flex-wrap: wrap;
        }

        .inscription-header .inscription-header-infos {
            margin: 0px auto;
            height: auto;
        }

            .inscription-header .inscription-header-infos .profil-container {
                margin: 20px auto;
            }

            .inscription-header .inscription-header-infos .profil-txt {
                width: 100%;
            }

                .inscription-header .inscription-header-infos .profil-txt * {
                    text-align: center;
                    margin-bottom: 10px;
                }
}

/*Modifications*/
.modif-header {
    padding-top: 130px;
    padding-bottom: 130px;
    position: relative;
    background: var(--blue-primary);
    background: -moz-linear-gradient(left, #03A0F1 0%, var(--green-primary) 100%);
    background: -webkit-linear-gradient(left, #03A0F1 0%, var(--green-primary) 100%);
    background: linear-gradient(to right, #03A0F1 0%, var(--green-primary) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03A0F1', endColorstr='#19CF89', GradientType=1);
    overflow: hidden;
    background-size: 200% 200%;
    animation: header-bg-animation 15s ease infinite;
}

    .modif-header.school {
        background: rgb(255, 145, 0);
        background: -moz-linear-gradient(90deg, rgba(255, 145, 0, 1) 0%, rgba(255, 204, 0, 1) 100%);
        background: -webkit-linear-gradient(90deg, rgba(255, 145, 0, 1) 0%, rgba(255, 204, 0, 1) 100%);
        background: linear-gradient(90deg, rgba(255, 145, 0, 1) 0%, rgba(255, 204, 0, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--orange-primary);", endColorstr="#ffcc00", GradientType=1);
    }

    .modif-header.entreprise {
        background: rgb(132, 112, 238);
        background: -moz-linear-gradient(45deg, rgba(132, 112, 238, 1) 0%, rgba(197, 168, 255, 1) 100%);
        background: -webkit-linear-gradient(45deg, rgba(132, 112, 238, 1) 0%, rgba(197, 168, 255, 1) 100%);
        background: linear-gradient(45deg, rgba(132, 112, 238, 1) 0%, rgba(197, 168, 255, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8470ee', endColorstr='#c5a8ff', GradientType=1);
    }

    .modif-header.shape {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        animation: none;
    }

    .modif-header.entreprise.shape {
        background-image: url(../images/head_bg_bus_shape.svg);
    }

    .modif-header .back-container {
        position: absolute;
        left: 30px;
        top: 30px;
        transition: all .2s ease;
    }

        .modif-header .back-container:hover {
            transform: scale(1.05);
        }

    .modif-header .progress-step-container {
        max-width: 700px;
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
    }

    .modif-header.entreprise .progress-step-container.entreprise .progress-step-bar li {
        color: #CCCCCC;
    }

        .modif-header.entreprise .progress-step-container.entreprise .progress-step-bar li:before {
            background-color: #CCCCCC;
            color: var(--purple-primary);
            border-color: #CCCCCC;
        }

        .modif-header.entreprise .progress-step-container.entreprise .progress-step-bar li:after {
            background-color: #CCCC
        }

        .modif-header.entreprise .progress-step-container.entreprise .progress-step-bar li.current {
            color: white;
        }

            .modif-header.entreprise .progress-step-container.entreprise .progress-step-bar li.current::after {
                background-color: white;
            }

            .modif-header.entreprise .progress-step-container.entreprise .progress-step-bar li.current:before {
                background-color: white;
                border-color: white;
                position: relative;
            }

        .modif-header.entreprise .progress-step-container.entreprise .progress-step-bar li.passed:before {
            background-color: white;
            border-color: white;
        }

        .modif-header.entreprise .progress-step-container.entreprise .progress-step-bar li.passed {
            color: white;
        }

            .modif-header.entreprise .progress-step-container.entreprise .progress-step-bar li.passed::after {
                background-color: white;
            }

    .modif-header .progress-step-container .progress-step-bar li:after {
        z-index: 2;
    }

@media screen and (max-width:800px) {
    .modif-header {
        padding-top: 80px;
        padding-bottom: 50px;
    }

        .modif-header.steps {
            padding-top: 160px;
            padding-bottom: 70px;
        }

        .modif-header .progress-step-container {
            max-width: 400px;
            top: 65px;
        }
}

/*Formats des cours*/
.edit-formats-cours-container .formats-box-container {
    width: 100%;
    overflow: hidden;
    border: solid 1px var(--blue-primary);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

    .edit-formats-cours-container .formats-box-container .formats-box-title {
        background-color: white;
        background-color: var(--main-bg);
        position: relative;
        padding: 12px 12px 12px 45px;
        transition: all .2s ease;
        color: var(--blue-primary);
    }

        .edit-formats-cours-container .formats-box-container .formats-box-title:hover {
            background-color: var(--blue-primary);
            color: white;
        }

.edit-formats-cours-container .checkmark {
    height: 20px;
    width: 20px;
    background-color: white;
    background-color: var(--main-bg);
    border-radius: 50%;
    border: solid 1px var(--blue-primary);
    transition: all .2s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

    .edit-formats-cours-container .checkmark:after {
        content: '';
        top: 2px;
        left: 5px;
        animation: checkmarkFromTop .2s ease-in-out;
        position: absolute;
        display: none;
        width: 4px;
        height: 9px;
        border: solid var(--blue-primary);
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

.edit-formats-cours-container .formats-box-container .formats-box-title .checkmark {
    position: absolute;
    top: 13px;
    left: 10px;
}

.edit-formats-cours-container .formats-box-container .formats-box-content {
    overflow: hidden;
    max-height: 0px;
    transition: all .2s ease;
    padding: 0px;
}

.edit-formats-cours-container .open-formats-box:checked + .formats-box-container .formats-box-content {
    max-height: 500px;
    padding: 30px;
}

.edit-formats-cours-container .open-formats-box:checked + .formats-box-container .formats-box-title .checkmark::after {
    display: block;
}

.edit-formats-cours-container .open-formats-box:checked + .formats-box-container .formats-box-title .checkmark {
    animation: checkedSpan .3s ease-in-out;
}

.edit-formats-cours-container .open-formats-box:checked + .formats-box-container .formats-box-title {
    background-color: var(--blue-primary);
    color: white;
}

.edit-formats-cours-container .formats-box-container .formats-box-content .tarif-container {
    border-bottom: solid 1px #929292;
    margin-left: 15px;
}

.edit-formats-cours-container .formats-box-container .formats-box-content .input-tarif {
    position: relative;
    opacity: 1;
    width: 40px;
    font-size: 1rem;
    border: none;
    line-height: 1;
    padding: 0px 5px;
    padding-left: 0px;
    max-height: 20px;
    border: none;
    box-shadow: none;
}

    .edit-formats-cours-container .formats-box-container .formats-box-content .input-tarif.valid {
        background-image: none !important;
    }

.edit-formats-cours-container .formats-box-container .formats-box-content .checkbox-offer:checked + .checkbox-offer-label .checkmark:after {
    display: block;
}

.edit-formats-cours-container .formats-box-container .formats-box-content .checkbox-offer:checked + .checkbox-offer-label .checkmark {
    animation: checkedSpan .3s ease-in-out;
}

.edit-formats-cours-container .formats-box-container .formats-box-content .checkbox-offer-container {
    position: relative;
    padding-left: 35px;
    margin-top: 20px;
    padding-top: 2px;
    flex-wrap: wrap;
}

    .edit-formats-cours-container .formats-box-container .formats-box-content .checkbox-offer-container .checkmark {
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .edit-formats-cours-container .formats-box-container .formats-box-content .checkbox-offer-container select {
        border-color: var(--blue-primary);
        border-radius: 5px;
        margin-left: 7px;
        margin-right: 7px;
        margin-top: -5px;
    }

.edit-formats-cours-container .formats-box-container .formats-box-content .slider-max-distance {
    position: relative;
    opacity: 1;
    width: 200px;
    border-radius: 3px;
    height: 5px;
    margin-top: 15px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--blue-primary);
    outline: none;
    overflow: visible;
}

    .edit-formats-cours-container .formats-box-container .formats-box-content .slider-max-distance::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background-color: white;
        background-color: var(--main-bg);
        border-radius: 50%;
        border: solid 1px var(--blue-primary);
        cursor: pointer;
        transition: all .2s ease;
    }

        .edit-formats-cours-container .formats-box-container .formats-box-content .slider-max-distance::-webkit-slider-thumb:hover {
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
            transform: scale(1.2);
        }

    .edit-formats-cours-container .formats-box-container .formats-box-content .slider-max-distance::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background-color: white;
        background-color: var(--main-bg);
        border-radius: 50%;
        border: solid 1px var(--blue-primary);
        cursor: pointer;
    }

/*Cookie*/
.cookies-container {
    position: fixed;
    z-index: 10000;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    bottom: 0;
    box-shadow: 0px -3px 5px 0px rgba(0, 0, 0, 0.16);
    padding: 25px;
    backdrop-filter: blur(5px);
    transition: all .2s ease;
}

body.dark .cookies-container {
    background-color: rgba(0, 0, 0, 0.8);
}

.cookie-pop-up {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0px -3px 5px 0px rgba(0, 0, 0, 0.16);
    padding: 25px 40px;
    border-radius: 8px 8px 0px 0px;
    transition: all .2s ease;
    bottom: -110%;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
    z-index: 5002;
}

    .cookie-pop-up button {
        width: 100%;
    }

.cookies-container.close {
    bottom: -110%;
}

.cookie-pop-up.open {
    bottom: 0px;
}

.cookie-pop-up .checkbox-btn-switch-text.default {
    display: flex;
}

    .cookie-pop-up .checkbox-btn-switch-text.default .checkbox-title {
        font-weight: 600;
    }

.cookie-pop-up .checkbox-btn-switch-text .checkbox {
    padding-top: 11px;
    padding-bottom: 11px;
}

.cookies-container .content {
    max-width: 1500px;
    width: 97%;
}

    .cookies-container .content .btns {
        margin-left: 20px;
    }

.cookies-container .cookie-img {
    position: absolute;
    opacity: 0.8;
    width: 90px;
    height: 90px;
}

    .cookies-container .cookie-img._1 {
        bottom: -37px;
        left: -42px;
    }

    .cookies-container .cookie-img._2 {
        bottom: -37px;
        right: -42px;
    }

.cookies-container .see-more {
    display: none;
}

@media screen and (max-width:1300px) {
    .cookies-container .content .btns {
        flex: 0 0 250px;
        max-width: 250px;
    }

        .cookies-container .content .btns button {
            flex: 0 0 100%;
            max-width: 100%;
            width: 100%;
        }
}

@media screen and (max-width:850px) {
    .cookies-container {
        padding: 20px 20px;
    }

        .cookies-container .content .btns {
            flex: 0 0 100%;
            max-width: 100%;
            margin-left: 0px;
            margin-top: 20px;
        }

            .cookies-container .content .btns .margin-top-auto {
                width: 100%;
            }

            .cookies-container .content .btns button {
                margin-left: 0px;
                margin-right: 0px;
            }

        .cookies-container .cookie-img._1 {
            bottom: -17px;
            left: -62px;
        }

        .cookies-container .cookie-img._2 {
            bottom: auto;
            top: 56px;
            right: -60px;
        }
}

@media screen and (max-width:500px) {
    .cookies-container .content .txt {
        max-height: 77px;
        overflow: hidden;
        position: relative;
        margin-bottom: 10px;
        width: 291px;
    }

    .cookies-container .see-more {
        display: block;
    }

    .cookies-container .content .txt.open {
        max-height: 400px;
        margin-bottom: 0px;
    }

        .cookies-container .content .txt.open + .see-more {
            display: none;
        }
}

@media screen and (max-width:420px) {
    .cookie-pop-up {
        padding: 20px;
    }
}

/*FAQ*/
.faq-item {
    height: auto;
    font-size: 1.1rem;
    font-weight: 800;
    display: block;
    position: relative;
    transition: all .2s ease;
    width: 90%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .faq-item .faq-title {
        width: auto;
        transition: all .2s ease;
        overflow: hidden;
        border-radius: 5px;
        border: solid 1px #E1E6E8;
        background-color: white;
        background-color: var(--main-bg);
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        position: relative;
        padding: 15px 45px 15px 20px;
        box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.16);
    }

        .faq-item .faq-title:hover {
            transform: scale(1.01);
        }

    .faq-item.open .faq-title {
        transform: translateY(-5px);
    }

    .faq-item .faq-content {
        overflow: hidden;
        transition: all .2s ease;
        background-color: white;
        background-color: var(--main-bg);
        width: auto;
        margin-left: auto;
        margin-right: auto;
        max-height: 0px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        font-weight: normal;
    }

    .faq-item .faq-title .arrow-right {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: rotate(-45deg) translateY(-50%);
    }

    .faq-item.open .faq-content {
        max-height: 800px;
        padding: 30px 40px;
        margin-bottom: 10px;
        margin-top: -10px;
        -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.16);
        -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.16);
        box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.16);
    }

    .faq-item.open .faq-title .arrow-right {
        transform: rotate(45deg) translateY(-50%);
    }

@media screen and (max-width:450px) {
    .faq-item.open .faq-content {
        padding: 15px 20px;
    }
}

/*Liste documents uploadés*/
.uploaded-docs ul li {
    padding-left: 30px;
    background-image: url(../images/icons/ic_bin_blue.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
    transition: all .2s ease;
    cursor: pointer;
    margin-top: 10px;
    transition: all .2s ease;
    font-weight: 500;
}

    .uploaded-docs ul li:hover {
        color: var(--blue-primary);
    }

/*Illustration fusée*/
.illustrations-rocket {
    position: absolute;
    height: 120px;
    width: 120px;
    margin-left: 5%;
    z-index: 40;
}

    .illustrations-rocket .rocket {
        position: absolute;
        width: 75px;
        height: 75px;
        top: 50%;
        transform: translateY(-50%);
        left: 0px;
    }

    .illustrations-rocket .fire1 {
        width: 13px;
        position: absolute;
        top: 77px;
        left: 9px;
        transform: rotate(212deg);
    }

    .illustrations-rocket .fire2 {
        width: 23px;
        position: absolute;
        top: 80px;
        left: 12px;
        transform: rotate(208deg);
    }

    .illustrations-rocket .fire3 {
        width: 13px;
        position: absolute;
        top: 86px;
        left: 30px;
        transform: rotate(212deg);
    }

    .illustrations-rocket .rocket-bg {
        width: 130px;
        position: absolute;
        top: 16px;
        left: -26px;
        animation: rocketBg 3s ease infinite running;
    }

    .illustrations-rocket .rocket-stars {
        width: 150px;
        position: absolute;
        top: 8px;
        left: -35px;
        animation: rocketStars 3s ease infinite running;
    }



    /*illustrations fusée version grosse*/
    .illustrations-rocket.big {
        position: relative;
        height: 250px;
        width: 250px;
        margin-left: auto;
        margin-right: auto;
        z-index: 40;
    }

        .illustrations-rocket.big .rocket {
            position: absolute;
            width: 150px;
            height: 150px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .illustrations-rocket.big .fire1 {
            width: 26px;
            position: absolute;
            top: 158px;
            left: 69px;
            transform: rotate(212deg);
        }

        .illustrations-rocket.big .fire2 {
            width: 55px;
            position: absolute;
            top: 161px;
            left: 68px;
            transform: rotate(208deg);
        }

        .illustrations-rocket.big .fire3 {
            width: 26px;
            position: absolute;
            top: 176px;
            left: 111px;
            transform: rotate(212deg);
        }

        .illustrations-rocket.big .rocket-bg {
            width: 250px;
            position: absolute;
            top: 16px;
            left: 0px;
            animation: rocketBg 3s ease infinite running;
        }

        .illustrations-rocket.big .rocket-stars {
            width: 300px;
            position: absolute;
            top: 8px;
            left: -35px;
            animation: rocketStars 3s ease infinite running;
        }



/*Calendrier réservation cours*/
.resa-calendar {
    min-width: 550px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

    .resa-calendar .days-list {
        width: 100%;
        max-width: 490px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }

        .resa-calendar .days-list li {
            margin: 5px;
            height: 60px;
            width: 60px;
            font-weight: 600;
            position: relative;
        }

            .resa-calendar .days-list li input {
                display: none;
            }

            .resa-calendar .days-list li label {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .resa-calendar .days-list li.disabled label {
                cursor: not-allowed;
            }

            .resa-calendar .days-list li .checkmark {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                border-radius: 8px;
                box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
                transition: all .2s ease;
                background-color: white;
                background-color: var(--main-bg);
            }

            .resa-calendar .days-list li:hover .checkmark {
                background-color: var(--green-primary);
            }

    .resa-calendar.inscription .days-list li:hover .checkmark {
        background-color: var(--blue-primary);
    }

    .resa-calendar.inscription.entreprise .days-list li:hover .checkmark {
        background-color: var(--purple-primary);
    }

    .resa-calendar.inscription.school .days-list li:hover .checkmark {
        background-color: var(--orange-primary);
    }

    .resa-calendar.inscription.coach .days-list li:hover .checkmark {
        background-color: var(--green-primary);
    }

    .resa-calendar .days-list li.disabled:hover .checkmark {
        background-color: #D1D1D1;
    }

    .resa-calendar .days-list li.disabled .checkmark {
        background-color: #D1D1D1 !important;
    }

body.dark .resa-calendar .days-list li.disabled .checkmark {
    background-color: #353a48 !important;
}

.dark .resa-calendar .days-list li.disabled .checkmark {
    background-color: #515A6A
}

.resa-calendar .days-list li.modified .checkmark {
    background-color: #E5F6FF;
}

.resa-calendar.entreprise .days-list li.modified .checkmark {
    background-color: #e5e1f3;
}

.resa-calendar.school .days-list li.modified .checkmark {
    background-color: #f7d7ae;
}

.resa-calendar .days-list li input:checked ~ .checkmark {
    background-color: var(--green-primary);
    transform: scale(1.05);
}

.resa-calendar.inscription .days-list li input:checked ~ .checkmark {
    background-color: var(--blue-primary);
}

.resa-calendar.inscription.entreprise .days-list li input:checked ~ .checkmark {
    background-color: var(--purple-primary);
}

.resa-calendar.inscription.coach .days-list li input:checked ~ .checkmark {
    background-color: var(--green-primary);
}

.resa-calendar.inscription.school .days-list li input:checked ~ .checkmark {
    background-color: var(--orange-primary);
}

.resa-calendar .days-list li .number {
    flex: 0 0 50px;
    text-align: center;
    color: #222222;
    color: var(--main-text);
    position: relative;
    z-index: 10;
    transition: all .2s ease;
}

.resa-calendar .days-list li .week-day {
    font-size: 0.7rem;
    text-align: center;
    transition: all .2s ease;
    color: #979797;
}

.resa-calendar .days-list li:hover * {
    color: white;
}

.resa-calendar .days-list li.disabled:hover * {
    color: #979797;
}

.resa-calendar .days-list li.disabled .number {
    color: #979797;
}

.resa-calendar .days-list li input:checked ~ .number {
    color: white;
}

    .resa-calendar .days-list li input:checked ~ .number .week-day {
        color: white;
    }

@media screen and (max-width:800px) {
    .resa-calendar .days-list li:hover .checkmark {
        background-color: white;
        background-color: var(--main-bg);
    }

    .resa-calendar.inscription .days-list li:hover .checkmark {
        background-color: white;
        background-color: var(--main-bg);
    }

    .resa-calendar .days-list li:hover * {
        color: #222222;
        color: var(--main-text);
    }

    .resa-calendar .days-list li .week-day {
        color: #979797;
    }
}

@media screen and (max-width:520px) {
    .resa-calendar {
        min-width: 100%;
        max-width: 100% !important;
    }

        .resa-calendar .days-list li {
            width: calc(14.2% - 10px);
        }
}

/*Réservation d'heure liste*/
.resa-hours-list-container {
    overflow-y: scroll;
    scrollbar-width: thin;
}

    .resa-hours-list-container::-webkit-scrollbar {
        width: 3px;
    }

    .resa-hours-list-container::-webkit-scrollbar-thumb {
        background-color: #a3a3a3;
    }

    .resa-hours-list-container .hours-list-content {
        margin-top: 20px;
    }

        .resa-hours-list-container .hours-list-content hr {
            width: 200px;
            margin: 20px auto;
            border-width: 2px;
        }

        .resa-hours-list-container .hours-list-content li {
            width: 150px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            padding: 13px 5px;
            text-align: center;
            margin-top: 5px;
            margin-bottom: 5px;
            height: 45px;
        }

            .resa-hours-list-container .hours-list-content li input {
                display: none;
            }

            .resa-hours-list-container .hours-list-content li label {
                width: 100%;
                height: 100%;
            }

            .resa-hours-list-container .hours-list-content li .checkmark {
                position: absolute;
                top: 0px;
                left: 0px;
                background-color: white;
                background-color: var(--main-bg);
                width: 100%;
                height: 100%;
                border-radius: 5px;
                box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
                transition: all .2s ease;
                overflow: hidden;
                outline: solid 2px transparent;
            }

            .resa-hours-list-container .hours-list-content li:hover .checkmark {
                background-color: var(--green-primary);
            }

    .resa-hours-list-container.school .hours-list-content li:hover .checkmark {
        background-color: var(--orange-primary);
    }

    .resa-hours-list-container .hours-list-content li .hour {
        text-align: center;
        color: #222222;
        color: var(--main-text);
        position: relative;
        z-index: 10;
        transition: all .2s ease;
    }

    .resa-hours-list-container .hours-list-content li:hover .hour {
        color: white;
        font-weight: 800;
    }

    .resa-hours-list-container .hours-list-content li.disabled label {
        cursor: default;
    }

    .resa-hours-list-container .hours-list-content li.disabled .checkmark {
        color: white;
        background-color: #BCBCBC;
    }

    .resa-hours-list-container .hours-list-content li.disabled .hour {
        color: white;
        font-weight: 500;
    }

    .resa-hours-list-container .hours-list-content li input:checked ~ .checkmark {
        background-color: var(--green-primary);
    }

    .resa-hours-list-container.school .hours-list-content li input:checked ~ .checkmark {
        background-color: var(--orange-primary);
    }

    .resa-hours-list-container .hours-list-content li input ~ .checkmark::after {
        content: "";
        position: absolute;
        display: none;
        left: 17px;
        top: 13px;
        width: 5px;
        height: 14px;
        border: solid var(--green-primary);
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        animation: checkmarkFromTop .2s ease-in-out;
        z-index: 10;
    }

    .resa-hours-list-container.school .hours-list-content li input ~ .checkmark::after {
        border-color: var(--orange-primary);
    }

    .resa-hours-list-container .hours-list-content li input ~ .checkmark::before {
        content: "";
        position: absolute;
        border: solid 2px white;
        top: -2px;
        left: -2px;
        width: 0px;
        background-color: white;
        background-color: var(--main-bg);
        height: calc(100% + 2px);
        z-index: 5;
        transition: all .2s ease;
        opacity: 0;
    }

    .resa-hours-list-container .hours-list-content li input:checked ~ .checkmark::after {
        display: block;
    }

    .resa-hours-list-container .hours-list-content li input:checked ~ .checkmark::before {
        width: 42px;
        opacity: 1;
    }

    .resa-hours-list-container .hours-list-content li input:checked ~ .hour {
        padding-left: 40px;
        color: white;
        font-weight: 800;
    }

@media screen and (max-width:1170px) {
    .resa-hours-list-container .hours-list-content li:hover .checkmark {
        background-color: white;
        background-color: var(--main-bg);
    }
}

/*Progression du profil*/
.progress-bar-profil-container {
    border-radius: 20px;
    height: 15px;
    width: 100%;
    position: relative;
    background-color: #E8E8E8;
}

    .progress-bar-profil-container .progess-bar-profil-content {
        position: relative;
        border-radius: 10px;
        z-index: 5;
        width: 100%;
        height: 15px;
    }

        .progress-bar-profil-container .progess-bar-profil-content .progress-bar-profil-bg-color {
            position: absolute;
            background: rgb(242, 72, 49);
            background: -moz-linear-gradient(45deg, rgba(242, 72, 49, 1) 0%, rgba(218, 63, 185, 1) 50%, rgba(28, 158, 248, 1) 100%);
            background: -webkit-linear-gradient(45deg, rgba(242, 72, 49, 1) 0%, rgba(218, 63, 185, 1) 50%, rgba(28, 158, 248, 1) 100%);
            background: linear-gradient(45deg, rgba(242, 72, 49, 1) 0%, rgba(218, 63, 185, 1) 50%, rgba(28, 158, 248, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24831', endColorstr='#1c9ef8', GradientType=1);
            left: 0px;
            top: 0px;
            height: 100%;
            width: 100%;
            z-index: 5;
            border-radius: 10px;
        }

        .progress-bar-profil-container .progess-bar-profil-content .progress-bar-profil-indicator {
            position: absolute;
            top: -5px;
            border-radius: 10px;
            height: 25px;
            width: 10px;
            border: solid 2px white;
            background-color: var(--blue-primary);
            z-index: 15;
        }


    .progress-bar-profil-container .progress-bar-profil-bg {
        height: 100%;
        position: absolute;
        z-index: 10;
        background-color: #E8E8E8;
        right: 0px;
        top: 0px;
        border-radius: 10px;
    }

    .progress-bar-profil-container .progress-bar-current-percent {
        top: 22px;
        font-weight: 600;
        position: absolute;
    }

.complete-steps-container {
    overflow: hidden;
    transition: all .3s ease;
}

    .complete-steps-container.open {
        max-height: 1000px !important;
    }

        .complete-steps-container.open + .see-more .arrow-bottom {
            transform: rotate(-135deg);
        }

    .complete-steps-container .complete-step-item {
        margin-top: 30px;
        padding-left: 30px;
        background-image: url(../images/icons/ic_arrow_right_blue.svg);
        background-repeat: no-repeat;
        background-size: 15px;
        background-position: left center;
    }

        .complete-steps-container .complete-step-item .step-desc {
            font-size: 0.9rem;
            padding-right: 15px;
        }

        .complete-steps-container .complete-step-item .step-btns {
            flex: 0 0 100px;
            max-width: 100px;
            display: flex;
        }



/*Barre de recherche + suggestions*/
.search-container-overlay {
    position: relative;
    z-index: 5000;
    width: 100%;
}

    .search-container-overlay .input-search-container {
        display: flex;
        padding: 10px;
        width: 100%;
        max-width: 1500px;
        position: relative;
    }

    .search-container-overlay:not(.notfix) .input-search-container .mobile-close-suggestions {
        flex: 0 0 40px;
        max-width: 40px;
        background-image: url(../images/icons/full_arrow_left_blue.svg);
        background-size: 25px 25px;
        background-position: center;
        transition: all .2s ease;
        margin-right: 10px;
        background-repeat: no-repeat;
        display: none;
    }

        .search-container-overlay .input-search-container .content {
            overflow: hidden;
            border-radius: 5px;
            border: solid 1px var(--blue-primary);
            display: flex;
            width: 100%;
            position: relative;
            transition: all .2s ease;
        }

            .search-container-overlay .input-search-container .content input {
                border: none;
                padding: 15px;
                box-shadow: none;
            }

            .search-container-overlay .input-search-container .content .search-content {
                padding-left: 50px;
                background-image: url(../images/icons/ic_search_blue.svg);
                background-position: left 15px center;
                background-size: 20px 20px;
                background-repeat: no-repeat;
                border-radius: 5px 0px 0px 5px;
                flex: 1;
                transition: all .2s ease;
            }

            .search-container-overlay .input-search-container .content .location-bar {
                flex: 0 0 25%;
                padding-left: 50px;
                background-image: url(../images/icons/ic_pin_blue.svg);
                background-position: left 15px center;
                background-size: 20px 20px;
                background-repeat: no-repeat;
                transition: all .2s ease;
            }

            .search-container-overlay .input-search-container .content hr {
                flex: 0 0 1px;
                max-width: 1px;
                box-sizing: border-box;
                height: 70%;
                margin: 0px;
                margin-top: 7px;
                border: none;
                background-color: #C4C4C4;
            }

        .search-container-overlay .input-search-container .search-btn {
            height: 100%;
            background-color: var(--blue-primary);
            padding-left: 40px;
            background-image: url(../images/icons/ic_search_white.svg);
            background-position: left 15px center;
            background-repeat: no-repeat;
            border: none;
            flex: 0 0 170px;
            max-width: 170px;
            background-size: 20px 20px;
            border-radius: 0px;
        }

    .search-container-overlay .search-suggestions-container {
        position: absolute;
        background-color: white;
        background-color: var(--main-bg);
        left: 10px;
        top: 60px;
        width: calc(100% - 25% - 183px);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        z-index: 10;
        box-shadow: 0px 13px 16px 0px rgba(121, 151, 191, 0.25);
        max-height: 500px;
        overflow: hidden;
        display: none;
        transition: all .2s ease;
    }

    .mobile-search-container-overlay {
        width: calc(100% - 40px);
    }

    .mobile-search-suggestions-container {
        position: absolute;
        background-color: var(--main-bg);
        top: 50px;
        left: 0;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        z-index: 10;
        box-shadow: 0px 13px 16px 0px rgba(121, 151, 191, 0.25);
        height: calc(100vh - 100px);
        min-height: calc(100vh - 100px);
        min-width: 100%;
        overflow: auto;
        display: none;
        transition: all .2s ease;
    }

    #search-mobile-input.search-content {
        padding-left: 50px;
        background-image: url(../images/icons/ic_search_blue.svg);
        background-position: left 15px center;
        background-size: 20px 20px;
        background-repeat: no-repeat;
        border-radius: 5px 0px 0px 5px;
        flex: 1;
        transition: all .2s ease;
    }

    .mobile-search-suggestions-container ul li {
        padding: 10px;
    }

    .search-container-overlay .search-suggestions-location-container {
        position: absolute;
        background-color: white;
        background-color: var(--main-bg);
        left: calc(100% - 25% - 181px);
        top: 60px;
        width: calc(25% + 173px);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        z-index: 10;
        box-shadow: 0px 13px 16px 0px rgba(121, 151, 191, 0.25);
        max-height: 500px;
        overflow: hidden;
        display: none;
        transition: all .2s ease;
    }

    .search-container-overlay.is-typing .search-suggestions-container {
        display: block;
    }

    .mobile-search-container-overlay.is-typing .mobile-search-suggestions-container {
        display: block;
    }

    .search-container-overlay.is-typing-location .search-suggestions-location-container {
        display: block;
    }

    .search-container-overlay .search-suggestions-container .suggestions-preset {
        display: flex;
        margin-left: -4px;
        margin-right: -4px;
        padding: 10px 20px;
        width: 100%;
        overflow-x: scroll;
        scrollbar-width: thin;
    }

        .search-container-overlay .search-suggestions-container .suggestions-preset::-webkit-scrollbar {
            height: 5px;
        }

        .search-container-overlay .search-suggestions-container .suggestions-preset::-webkit-scrollbar-thumb {
            background-color: rgb(225, 225, 225);
            border-radius: 5px;
        }

        .search-container-overlay .search-suggestions-container .suggestions-preset li {
            flex: 0 0 auto;
            position: relative;
        }

            .search-container-overlay .search-suggestions-container .suggestions-preset li .preset-content {
                border-radius: 8px;
                padding: 7px 6px;
                color: #BCBCBC;
                cursor: pointer;
                border: solid 1px #BCBCBC;
                margin-left: 4px;
                margin-right: 4px;
                transition: all .2s ease;
                font-weight: 500;
            }

            .search-container-overlay .search-suggestions-container .suggestions-preset li input {
                display: none;
            }

            .search-container-overlay .search-suggestions-container .suggestions-preset li:hover .preset-content {
                border-color: var(--blue-primary);
                color: var(--blue-primary);
            }

            .search-container-overlay .search-suggestions-container .suggestions-preset li input:checked + .preset-content {
                color: white;
                background-color: var(--blue-primary);
                border-color: var(--blue-primary);
            }

            .search-container-overlay .search-suggestions-container .suggestions-preset li.school:hover .preset-content {
                border-color: var(--orange-primary);
                color: var(--orange-primary);
            }

            .search-container-overlay .search-suggestions-container .suggestions-preset li.school input:checked + .preset-content {
                color: white;
                background-color: var(--orange-primary);
                border-color: var(--orange-primary);
            }

            .search-container-overlay .search-suggestions-container .suggestions-preset li.coach:hover .preset-content {
                border-color: var(--green-primary);
                color: var(--green-primary);
            }

            .search-container-overlay .search-suggestions-container .suggestions-preset li.coach input:checked + .preset-content {
                color: white;
                background-color: var(--green-primary);
                border-color: var(--green-primary);
            }

            .search-container-overlay .search-suggestions-container .suggestions-preset li.business:hover .preset-content {
                border-color: var(--purple-primary);
                color: var(--purple-primary);
            }

            .search-container-overlay .search-suggestions-container .suggestions-preset li.business input:checked + .preset-content {
                color: white;
                background-color: var(--purple-primary);
                border-color: var(--purple-primary);
            }

    .search-container-overlay .search-suggestions-container .suggestions-content {
        overflow-y: auto;
        max-height: 425px;
        scrollbar-width: thin;
    }

    .search-container-overlay .search-suggestions-location-container .suggestions-content {
        overflow-y: scroll;
        max-height: 250px;
        scrollbar-width: thin;
    }

    .search-container-overlay .suggestions-content::-webkit-scrollbar {
        width: 7px;
    }

    .search-container-overlay .suggestions-content::-webkit-scrollbar-thumb {
        background-color: rgb(204, 204, 204);
        border-radius: 5px;
    }

    .search-container-overlay .search-suggestions-container .suggestions-content li {
        transition: all .2s ease;
        width: 100%;
        padding: 10px 20px;
        cursor: pointer;
    }

        .search-container-overlay .search-suggestions-container .suggestions-content li a {
            color: var(--main-text);
        }

        .search-container-overlay .search-suggestions-container .suggestions-content li.coach .suggestion-type {
            color: var(--green-primary);
        }

        .search-container-overlay .search-suggestions-container .suggestions-content li.school .suggestion-type {
            color: var(--orange-primary);
        }

        .search-container-overlay .search-suggestions-container .suggestions-content li.business .suggestion-type {
            color: var(--purple-primary);
        }

        .search-container-overlay .search-suggestions-container .suggestions-content li.businessOffer .suggestion-type {
            color: var(--purple-primary);
        }

    .search-container-overlay .search-suggestions-location-container .suggestions-content li {
        transition: all .2s ease;
        width: 100%;
        padding: 15px 20px;
        cursor: pointer;
    }

        .search-container-overlay .search-suggestions-location-container .suggestions-content li:hover {
            background-color: #E5F6FF;
        }

        .search-container-overlay .search-suggestions-location-container .suggestions-content li:focus-within {
            background-color: #E5F6FF;
        }

    .search-container-overlay .search-suggestions-container .suggestions-content li .item-container {
        display: flex;
    }

    .search-container-overlay .search-suggestions-container .suggestions-content li:hover {
        background-color: #E5F6FF;
    }

    .search-container-overlay .search-suggestions-container .suggestions-content li:focus-within {
        background-color: #E5F6FF;
    }

    .search-container-overlay .search-suggestions-container .suggestions-content li .item-img {
        margin-right: 20px;
    }

        .search-container-overlay .search-suggestions-container .suggestions-content li .item-img img {
            border-radius: 50%;
            width: 55px;
            height: 55px;
        }

    .search-container-overlay .search-suggestions-container .suggestions-content li .item-title {
        height: 100%;
        padding-top: 7px;
        padding-bottom: 7px;
        display: flex;
        flex-direction: column;
    }

@media screen and (max-width:1170px) {
    .search-container-overlay.is-typing:not(.notfix) {
        position: fixed;
        top: 50px;
        left: 0px;
        width: 100%;
        background-color: white;
        background-color: var(--main-bg);
        z-index: 10000;
    }

    .search-container-overlay .search-suggestions-container {
        width: 100%;
        left: 0px;
        max-height: none;
        height: calc(100vh - 100px);
    }

        .search-container-overlay .search-suggestions-container .suggestions-content {
            height: 100%;
            max-height: none;
            padding-bottom: 100px;
        }

        .search-container-overlay .search-suggestions-container .suggestions-preset::-webkit-scrollbar {
            height: 0px;
        }

        .search-container-overlay .search-suggestions-container .suggestions-preset::-webkit-scrollbar-thumb {
            background-color: rgba(228, 228, 228, 0);
            border-radius: 5px;
        }

    .search-container-overlay.is-typing .input-search-container .mobile-close-suggestions {
        display: block;
    }

    .search-container-overlay {
        width: 100%;
    }

        .search-container-overlay .head-search-content {
            border-radius: 0px;
        }

        .search-container-overlay .input-search-container .content .location-bar {
            display: none;
        }

        .search-container-overlay .input-search-container .search-btn {
            display: none;
        }

        .search-container-overlay .input-search-container .content hr {
            display: none;
        }

        .search-container-overlay .input-search-container .content {
            border-radius: 20px;
        }

            .search-container-overlay .input-search-container .content .search-content {
                padding: 10px 5px 10px 40px;
                background-size: 17px 17px;
                background-position: 12px center
            }

        .search-container-overlay .input-search-container .filters-btn {
            display: block;
        }
}

/*Liste des favoris*/
.fav-list li {
    position: relative;
    width: 100%;
    display: flex;
    padding: 15px 20px;
    background-color: white;
    background-color: var(--main-bg);
    margin-top: 20px;
    color: #222222;
    color: var(--main-text);
    cursor: pointer;
    border-radius: 8px;
    transition: all .2s ease;
    box-shadow: 0px 3px 16px 0px rgba(121, 151, 191, 0.25);
}

    .fav-list li .fav-img {
        flex: 0 0 100px;
        max-width: 100px;
        display: flex;
        justify-content: center;
        height: 55px;
    }

        .fav-list li .fav-img img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
        }

        .fav-list li .fav-img .more {
            width: 40px;
            height: 40px;
            margin-left: 5px;
            border-radius: 50%;
            border: solid 1px white;
            background-color: #E2E2E2;
            color: var(--grey-dark);
            padding: 10px 0px;
            text-align: center;
            margin-top: auto;
            margin-bottom: auto;
        }

    .fav-list li .fav-name {
        margin-left: 20px;
        margin-top: auto;
        margin-bottom: auto;
        flex: 1;
        padding-right: 30px;
    }

    .fav-list li .fav-options {
        position: relative;
        z-index: 50;
    }

        .fav-list li .fav-options img {
            cursor: pointer;
            position: absolute;
            right: 0px;
            height: 25px;
            width: 30px;
            top: calc(50% - 12px);
            padding-left: 10px;
            padding-right: 10px;
        }

        .fav-list li .fav-options .options-container {
            border-radius: 5px;
            overflow: hidden;
            max-height: 0px;
            position: absolute;
            right: 19px;
            top: 41px;
            background-color: white;
            background-color: var(--main-bg);
            transition: all .2s ease;
            box-shadow: 0px 3px 16px 0px rgba(121, 151, 191, 0.4);
        }

            .fav-list li .fav-options .options-container .option {
                padding: 10px;
                transition: all .2s ease;
            }

                .fav-list li .fav-options .options-container .option:hover {
                    background-color: var(--blue-primary);
                    color: white;
                }

        .fav-list li .fav-options.open .options-container {
            max-height: 150px;
        }

@media screen and (max-width:500px) {
    .fav-list li {
        flex-direction: column;
        margin-top: 15px;
    }

        .fav-list li .fav-img {
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }

            .fav-list li .fav-img .more {
                position: absolute;
                left: 44px;
                top: 42px;
                border-width: 2px;
            }

            .fav-list li .fav-img img {
                width: 70px;
                height: 70px;
            }

        .fav-list li .fav-name {
            text-align: center;
            padding-right: 0px;
        }

        .fav-list li .fav-options {
            position: absolute;
            right: 5px;
            top: 15px;
        }

            .fav-list li .fav-options img {
                top: 0px;
            }

            .fav-list li .fav-options .options-container {
                right: 7px;
                top: 29px;
            }

    .favoris-header .favoris-header-content .favoris-title {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    .favoris-header .favoris-header-content .fav-add {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
}

.add-fav-overlay {
    position: fixed;
    bottom: 0px;
    left: calc(50% - 500px);
    max-width: 1000px;
    z-index: 5000;
    width: 95%;
}

    .add-fav-overlay .list-content {
        transition: all .3s ease;
        background-color: white;
        background-color: var(--main-bg);
        width: 100%;
        padding: 20px;
        position: absolute;
        bottom: -800px;
        left: 0px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.25);
    }

        .add-fav-overlay .list-content.select-list {
            max-height: 550px;
            overflow-y: scroll;
            scrollbar-width: thin;
        }

            .add-fav-overlay .list-content.select-list::-webkit-scrollbar {
                width: 3px;
            }

            .add-fav-overlay .list-content.select-list::-webkit-scrollbar-thumb {
                background-color: rgb(197, 197, 197);
                border-radius: 3px;
            }

        .add-fav-overlay .list-content .close {
            position: absolute;
            right: 10px;
            top: 10px;
            height: 15px;
            width: 15px;
            cursor: pointer;
            background-image: url(../images/icons/ic_x_grey.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        .add-fav-overlay .list-content.open {
            bottom: 0px;
        }

    .add-fav-overlay .added-to-list .actions-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .add-fav-overlay .added-to-list .actions-container .list-btns {
            display: flex;
            flex-wrap: wrap;
        }

            .add-fav-overlay .added-to-list .actions-container .list-btns button {
                border-radius: 5px;
                background-color: white;
                background-color: var(--main-bg);
                color: #222222;
                color: var(--main-text);
                border-color: #a3a3a3;
                height: 45px;
                width: 180px;
            }

                .add-fav-overlay .added-to-list .actions-container .list-btns button.change {
                    border-color: var(--blue-primary);
                }

                .add-fav-overlay .added-to-list .actions-container .list-btns button:hover {
                    border-color: var(--blue-primary);
                    box-shadow: 0px 13px 16px 0px rgba(121, 151, 191, 0.25);
                }

    .add-fav-overlay .fav-list li:hover {
        transform: scale(1.01);
    }

    .add-fav-overlay .create-list .create-list-content {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        .add-fav-overlay .create-list .create-list-content input {
            flex: 1;
            max-width: 100%;
            margin-right: 20px;
            height: 40px;
        }

@media screen and (max-width:1060px) {
    .add-fav-overlay {
        left: 2.5%;
    }
}

@media screen and (max-width:720px) {
    .add-fav-overlay .create-list .create-list-content input {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .add-fav-overlay .create-list .create-list-content .create-list-btns {
        margin-top: 10px;
    }

        .add-fav-overlay .create-list .create-list-content .create-list-btns button {
            margin-top: 5px;
        }
}

@media screen and (max-width:600px) {
    .add-fav-overlay .added-to-list .actions-container .list-title {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    .add-fav-overlay .added-to-list .actions-container .list-btns {
        justify-content: center;
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 20px;
    }
}

/*Expérience pro et aca*/
.xp-container .head .img-container {
    flex: 0 0 90px;
    margin-right: 20px;
    height: 90px;
}

    .xp-container .head .img-container img {
        max-width: 90px;
        width: 90px;
        border-radius: 8px;
    }

.xp-container .title {
    flex: 1;
}

.xp-container .edit-xp {
    margin-left: auto;
    padding-left: 10px;
}

    .xp-container .edit-xp .btn {
        background-color: var(--grey-light);
        background-size: 15px;
        height: 30px;
        width: 30px;
        background-position: center;
        transition: all .2s ease;
        background-repeat: no-repeat;
    }

        .xp-container .edit-xp .btn:hover {
            background-color: #BCBCBC;
        }

        .xp-container .edit-xp .btn.edit {
            background-image: url(../images/icons/ic_pencil_purple.svg);
        }

        .xp-container .edit-xp .btn.delete {
            background-image: url(../images/icons/ic_bin_red.svg);
        }

/*PopUp Générale*/
html:has(.pop-up-overlay-container.open), html:has(.pop-up-lead-info.open), html:has(.pop-up-lead-details.open) {
    overflow: hidden;
}

.pop-up-overlay-container.open .pop-up-overlay-background {
    position: fixed;
    transition: all .3s ease;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 9999;
    backdrop-filter: blur(5px);
    top: 0px;
    left: 0px;
}

.pop-up-overlay-container.open .pop-up-overlay-background {
    opacity: 1;
    pointer-events: all;
}

.pop-up-overlay-container .pop-up-overlay-content {
    position: fixed;
    z-index: 9999;
    background-color: white;
    background-color: var(--main-bg);
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    max-width: 550px;
    width: 95%;
    display: none;
}

    .pop-up-overlay-container .pop-up-overlay-content .close {
        width: 20px;
        height: 20px;
        background-image: url(../images/icons/ic_x_grey.svg);
        background-size: cover;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    .pop-up-overlay-container .pop-up-overlay-content .popup-title {
        position: absolute;
        left: 20px;
        top: 20px;
        color: var(--blue-primary);
    }

.pop-up-overlay-container.delete .pop-up-overlay-content .popup-title {
    color: #FF5050;
}

.pop-up-overlay-container.register .pop-up-overlay-content .confirm {
    background-color: var(--main-bg);
    border: none;
    color: var(--main-text);
}

.pop-up-overlay-container.delete .pop-up-overlay-content .confirm {
    background-color: #FF5050;
    border-color: #FF5050;
}

    .pop-up-overlay-container.delete .pop-up-overlay-content .confirm:hover {
        background-color: #FF5050;
        border-color: #FF5050;
        filter: brightness(1.3);
    }

.pop-up-overlay-container.open .pop-up-overlay-content {
    display: block;
}

/*PopUp vérifier profil*/
.pop-up-profil-no-verified.open .pop-up-overlay-background {
    position: fixed;
    transition: all .3s ease;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 9998;
    backdrop-filter: blur(5px);
}

.pop-up-profil-no-verified.open .pop-up-overlay-background {
    opacity: 1;
    pointer-events: all;
}

.pop-up-profil-no-verified .pop-up-overlay-content {
    position: fixed;
    z-index: 9999;
    background-color: white;
    background-color: var(--main-bg);
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    max-width: 550px;
    width: 95%;
    display: none;
}

    .pop-up-profil-no-verified .pop-up-overlay-content .close {
        width: 20px;
        height: 20px;
        background-image: url(../images/icons/ic_x_grey.svg);
        background-size: cover;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    .pop-up-profil-no-verified .pop-up-overlay-content .popup-title {
        position: absolute;
        left: 20px;
        top: 20px;
        color: var(--blue-primary);
    }


.pop-up-profil-no-verified.open .pop-up-overlay-content {
    display: block;
}

.pop-up-profil-no-verified .popup-text img {
    width: 80px;
    height: 80px;
}

@media screen and (min-width:600px) {
    .pop-up-profil-no-verified.open .pop-up-overlay-content {
        left: calc(50% - 275px);
        top: 50%;
        transform: translateY(-50%);
    }
}

@media screen and (max-width:600px) {
    .pop-up-profil-no-verified.open .pop-up-overlay-content {
        left: 50%;
        top: calc(50% + 25px);
        transform: translate(-50%, -50%);
        padding: 15px 20px;
    }
}

/*PopUp etab lead info*/
.pop-up-lead-info .pop-up-overlay-background {
    position: fixed;
    transition: all .3s ease;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 9998;
    backdrop-filter: blur(5px);
}

.pop-up-lead-info.open .pop-up-overlay-background {
    opacity: 1;
    pointer-events: all;
}

.pop-up-lead-info .pop-up-overlay-content {
    position: fixed;
    z-index: 9999;
    background-color: white;
    background-color: var(--main-bg);
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    max-width: 550px;
    width: 95%;
    display: none;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    scrollbar-width: thin;
}

    .pop-up-lead-info .pop-up-overlay-content ::-webkit-scrollbar {
        width: 3px;
    }

    .pop-up-lead-info .pop-up-overlay-content ::-webkit-scrollbar-thumb {
        background-color: #929292;
    }

    .pop-up-lead-info .pop-up-overlay-content .close {
        width: 20px;
        height: 20px;
        background-image: url(../images/icons/ic_x_grey.svg);
        background-size: cover;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    .pop-up-lead-info .pop-up-overlay-content .popup-title {
        position: absolute;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        white-space: nowrap;
    }


.pop-up-lead-info.open .pop-up-overlay-content {
    display: block;
}


@media screen and (min-width:600px) {
    .pop-up-lead-info.open .pop-up-overlay-content {
        left: calc(50% - 275px);
        top: 50%;
        transform: translateY(-50%);
    }
}

@media screen and (max-width:600px) {
    .pop-up-lead-info.open .pop-up-overlay-content {
        left: 50%;
        top: calc(50% + 25px);
        transform: translate(-50%, -50%);
        padding: 15px 20px;
        max-height: calc(100vh - 80px);
    }
}

/*PopUp add student info*/
.pop-up-student-missing-info.open .pop-up-overlay-background {
    position: fixed;
    transition: all .3s ease;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 9998;
    backdrop-filter: blur(5px);
}

.pop-up-student-missing-info.open .pop-up-overlay-background {
    opacity: 1;
    pointer-events: all;
}

.pop-up-student-missing-info .pop-up-overlay-content {
    position: fixed;
    z-index: 9999;
    background-color: white;
    background-color: var(--main-bg);
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    max-width: 550px;
    width: 95%;
    display: none;
}

    .pop-up-student-missing-info .pop-up-overlay-content .close {
        width: 20px;
        height: 20px;
        background-image: url(../images/icons/ic_x_grey.svg);
        background-size: cover;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    .pop-up-student-missing-info .pop-up-overlay-content .popup-title {
        position: absolute;
        left: 20px;
        top: 20px;
        color: var(--blue-primary);
    }


.pop-up-student-missing-info.open .pop-up-overlay-content {
    display: block;
}

.pop-up-student-missing-info .popup-text img {
    width: 250px;
    border-radius: 8px;
}

@media screen and (min-width:600px) {
    .pop-up-student-missing-info.open .pop-up-overlay-content {
        left: calc(50% - 275px);
        top: 50%;
        transform: translateY(-50%);
    }
}

@media screen and (max-width:600px) {
    .pop-up-student-missing-info.open .pop-up-overlay-content {
        left: 50%;
        top: calc(50% + 25px);
        transform: translate(-50%, -50%);
        padding: 15px 20px;
    }
}

/*Animations*/
.skeleton-loading-animation::after {
    content: '';
    display: block;
    position: absolute;
    left: -150px;
    top: 0;
    height: 100%;
    width: 150px;
    background: linear-gradient(to right, transparent 0%, #eaeff1 50%, transparent 100%);
    animation: thumbSkeletonAnimation 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

body.dark .skeleton-loading-animation::after {
    background: linear-gradient(to right, transparent 0%, #22252e 50%, transparent 100%);
}

@keyframes checkedSpan {
    0% {
        transform: scale(0.8);
    }

    33% {
        transform: scale(1.03);
    }

    66% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes checkmarkFromTop {
    from {
        top: -20px;
    }

    top {
        top: 2px;
    }
}

@keyframes radioAnimation {
    from {
        transform: scale(0.5);
    }

    top {
        transform: scale(1);
    }
}

@keyframes toast-progress-animation {
    from {
        height: 100%;
    }

    to {
        height: 0%;
    }
}


@keyframes mobileNavOverlayOpening {
    0% {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    50% {
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
    }

    100% {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
}

@keyframes animation-shadow {
    0% {
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
    }

    50% {
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
    }
}

@keyframes header-bg-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes rocketStars {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-10px);
    }

    100% {
        transform: translatey(0px);
    }
}

@keyframes rocketBg {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-7px);
    }

    100% {
        transform: translatey(0px);
    }
}

@keyframes errorPhoneValidation {

    0%, 100% {
        border-color: #FF5050;
    }

    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@keyframes thumbSkeletonAnimation {
    from {
        left: -150px;
    }

    to {
        left: 100%;
    }
}

.existsOnlyOnDesktop {
    visibility: visible;
}

.existsOnlyOnMobile {
    visibility: hidden;
}

@media screen and (max-width:1270px) {
    .existsOnlyOnDesktop {
        visibility: hidden;
    }

    .existsOnlyOnMobile {
        visibility: visible;
    }
}

/*Bug OWL Carousel*/
.owl-nav.disabled {
    display: none !important;
}

/*Croppie*/
.croppie-container .cr-boundary {
    border-radius: 8px !important;
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
    border-color: #0a0a0ab5 !important;
}

#croppie-container button.xs {
    width: 135px;
}

.input-characters-counter {
    position: absolute;
    right: 10px;
    height: 20px;
    top: calc(50% - 10px);
}

    .input-characters-counter.textarea {
        position: absolute;
        right: 10px;
        height: 20px;
        top: auto;
        bottom: 0px;
    }

    .input-characters-counter + input {
        padding-right: 60px !important;
    }

    .input-characters-counter + textarea {
        padding-bottom: 60px !important;
    }

.appointment-wrapper {
    width: 305px;
    height: 88px;
    border: solid 2px var(--grey-light);
    background-color: var(--main-bg);
}

    .appointment-wrapper.active {
        background-color: var(--grey-light);
    }

    .appointment-wrapper::after {
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
        width: 25px;
        height: 100%;
        background: var(--blue-start-gradient);
        background: linear-gradient(180deg, var(--blue-start-gradient) 0%, var(--blue-end-gradient) 100%);
        z-index: 1;
    }

    .appointment-wrapper.green::after {
        background: var(--green-start-gradient);
        background: linear-gradient(180deg, var(--green-start-gradient) 0%, var(--green-end-gradient) 100%);
    }

    .appointment-wrapper.orange::after {
        background: var(--orange-start-gradient);
        background: linear-gradient(180deg, var(--orange-start-gradient) 0%, var(--orange-end-gradient) 100%);
    }

    .appointment-wrapper.purple::after {
        background: var(--purple-start-gradient);
        background: linear-gradient(180deg, var(--purple-start-gradient) 0%, var(--purple-end-gradient) 100%);
    }

    .appointment-wrapper .title {
        font-size: 1.1rem;
    }

    .appointment-wrapper .content {
        z-index: 5;
    }

/*Events details overlay*/

.events-details-overlay {
    right: 0px;
    top: 65px;
    height: calc(100vh - 65px);
    max-width: 800px;
    width: 800px;
    overflow-y: auto;
    z-index: 8000;
    pointer-events: none;
    opacity: 0;
    padding: 30px;
    scrollbar-width: thin;
}

    .events-details-overlay.visible {
        pointer-events: all;
        opacity: 1;
    }

    .events-details-overlay::-webkit-scrollbar-thumb {
        background-color: var(--grey-dark);
        border-radius: 3px;
    }

    .events-details-overlay::-webkit-scrollbar {
        width: 5px;
    }

.events-details-overlay-background {
    right: 0px;
    top: 65px;
    height: calc(100vh - 65px);
    max-width: 100%;
    width: 100%;
    z-index: 7999;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    pointer-events: none;
    opacity: 0;
}

    .events-details-overlay-background.visible {
        pointer-events: all;
        opacity: 1;
    }

.events-details-overlay .close {
    top: 5px;
    right: 5px;
}

.events-details-overlay .no-text-overflow.contact-name {
    max-width: calc(100% - 330px);
}

.events-details-overlay .progress-step-container .progress-step-bar li:before {
    content: "";
}

.events-details-overlay .progress-step-container .progress-step-bar li.current:before {
    box-shadow: 0px 3px 6px 0px rgb(47 89 222 / 40%);
    border-color: var(--blue-dark);
}

.events-details-overlay .progress-step-container .progress-step-bar li.passed,
.events-details-overlay .progress-step-container .progress-step-bar li.current {
    color: var(--blue-dark);
}

    .events-details-overlay .progress-step-container .progress-step-bar li.passed:before,
    .events-details-overlay .progress-step-container .progress-step-bar li.passed + li:after {
        border-color: var(--blue-dark);
        background-color: var(--blue-dark);
    }

.events-details-overlay .appointment-state-wrapper {
    max-width: 670px;
    width: 95%;
    padding: 25px 30px;
    background-color: #D5FFEF;
    color: #222222;
}

.events-details-overlay .review-star {
    width: 20px;
    height: 20px;
}

.appointment-validation-wrapper .accept {
    height: 60px;
    filter: none;
}

.appointment-validation-wrapper .decline {
    height: 60px;
    background-color: var(--grey-light);
    border-color: var(--grey-light);
    color: var(--grey-dark);
}

    .appointment-validation-wrapper .accept span,
    .appointment-validation-wrapper .decline span {
        display: inline-block;
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
        backface-visibility: hidden;
    }

.appointment-validation-wrapper button svg {
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    transform: translateX(-600%);
    transition: all 0.3s ease;
}

@media screen and (min-width:1170px) {

    .appointment-validation-wrapper .accept:hover span,
    .appointment-validation-wrapper .decline:hover span {
        transform: translateX(200%);
    }

    .appointment-validation-wrapper button:hover svg {
        transform: translateX(0%);
    }
}

@media screen and (max-width:1170px) {
    .events-details-overlay .close {
        background-color: var(--grey-light);
    }

    .events-details-overlay {
        top: 50px;
        height: calc(100vh - 50px);
        max-width: 100%;
        width: 100%;
        padding: 10px;
    }

    .events-details-overlay-background {
        display: none;
    }
}

.nav-profil-overflow-container {
    position: fixed;
    top: 0px;
    width: 100%;
    left: 0px;
    height: 100vh;
    overflow: hidden;
    z-index: 100002;
    pointer-events: none;
}

    .nav-profil-overflow-container .background {
        position: fixed;
        transition: all .3s ease;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        z-index: 100003;
        left: 0px;
        top: 0px;
        backdrop-filter: blur(3px);
    }

    .nav-profil-overflow-container .nav-profil-overflow-wrapper {
        position: fixed;
        pointer-events: none;
        right: -120%;
        transition: all .3s ease;
        background-color: var(--main-bg);
        height: 100%;
        max-width: 400px;
        width: 80%;
        z-index: 100004;
        opacity: 0;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        overflow-y: scroll;
    }

    .nav-profil-overflow-container.open {
        pointer-events: all;
    }

        .nav-profil-overflow-container.open .background {
            opacity: 1;
            pointer-events: all;
        }

        .nav-profil-overflow-container.open .nav-profil-overflow-wrapper {
            opacity: 1;
            pointer-events: all;
            right: 0px;
        }

    .nav-profil-overflow-container .nav-profil-overflow-wrapper .dropdown-menu-profil-head {
        height: 90px;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        width: 100%;
    }

        .nav-profil-overflow-container .nav-profil-overflow-wrapper .dropdown-menu-profil-head img {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    .nav-profil-overflow-container .nav-profil-overflow-wrapper .dropdown-menu-profil {
        margin-top: -30px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: solid 2px var(--main-bg);
    }

    .nav-profil-overflow-container .nav-profil-overflow-wrapper ul li {
        border-bottom: none;
        padding: 5px 25px;
        width: auto;
    }

    .nav-profil-overflow-container .nav-profil-overflow-wrapper .grey {
        color: #929292;
    }



.nav-match-overflow-container {
    position: fixed;
    top: 0px;
    width: 100%;
    left: 0px;
    height: 100vh;
    overflow: hidden;
    z-index: 100002;
    pointer-events: none;
}

    .nav-match-overflow-container .background {
        position: fixed;
        transition: all .3s ease;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        z-index: 100003;
        left: 0px;
        top: 0px;
        backdrop-filter: blur(3px);
    }

    .nav-match-overflow-container .nav-match-overflow-wrapper {
        position: fixed;
        pointer-events: none;
        right: -120%;
        transition: all .3s ease;
        background-color: var(--main-bg);
        height: 100%;
        max-width: 400px;
        width: 80%;
        z-index: 100004;
        opacity: 0;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        overflow-y: scroll;
    }

    .nav-match-overflow-container.open {
        pointer-events: all;
    }

        .nav-match-overflow-container.open .background {
            opacity: 1;
            pointer-events: all;
        }

        .nav-match-overflow-container.open .nav-match-overflow-wrapper {
            opacity: 1;
            pointer-events: all;
            right: 0px;
        }

    .nav-match-overflow-container .nav-match-overflow-wrapper .dropdown-menu-match-head {
        height: 90px;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        width: 100%;
    }

        .nav-match-overflow-container .nav-match-overflow-wrapper .dropdown-menu-match-head img {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    .nav-match-overflow-container .nav-match-overflow-wrapper .dropdown-menu-profil {
        margin-top: -30px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: solid 2px var(--main-bg);
    }

    .nav-match-overflow-container .nav-match-overflow-wrapper ul li {
        border-bottom: none;
        padding: 5px 25px;
        width: auto;
    }

    .nav-match-overflow-container .nav-match-overflow-wrapper .grey {
        color: #929292;
    }





.custom-scroll {
    scrollbar-width: thin;
}

    .custom-scroll::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .custom-scroll::-webkit-scrollbar-thumb {
        background-color: #aaaaaa;
        border-radius: 8px;
    }

body.dark .custom-scroll::-webkit-scrollbar-thumb {
    background-color: #353a48;
}

img.emoji {
    height: 1.25em;
    width: 1.25em;
    margin: 0.2em .05em 0 .1em;
    vertical-align: -0.1em;
}

/*-------------------------------*/

.nf-mobile-nav {
    display: flex;
    bottom: 0px;
    left: 0px;
    z-index: 5002;
    padding: 12px 12px;
    box-shadow: 0px -3px 16px 0px var(--shadow);
    border-radius: 15px 15px 0 0;
}

@media (max-width: 991px) {
    .nf-mobile-nav {
        box-shadow: unset;
        border-radius: 0;
    }
}

    .nf-mobile-nav .nav-item svg,
    .nf-mobile-nav .nav-item img {
        width: 30px;
        height: 30px;
    }

        .nf-mobile-nav .nav-item svg.home {
            width: 26px;
            height: 26px;
        }

        .nf-mobile-nav .nav-item svg.plus {
            margin: -5px;
            width: 37px;
            height: 37px;
        }

        .nf-mobile-nav .nav-item svg.pp {
            margin: -5px;
            width: 37px;
            height: 37px;
        }

    body.dark .nf-mobile-nav {
        background-color: #1D2024;
        color: #82849A;
    }

    .nf-mobile-nav .nav-item.current {
        color: #2170E5;
        transform: scale(1.2);
    }

    .max-lines2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2; /* number of lines to show */
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .overflow-wrap-break-word {
        overflow-wrap: break-word
    }



    /* 
    On force le z-index de l'autocomplete Google à 10000 
    Car, quand celui-ci est dans une popup/modal, le z-index de cette dernière est à 9999
*/
    .pac-container {
        z-index: 10000
    }

    .big_toggle {
        --uiToggleSize: var(--toggleSize, 3rem);
        --uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
        --uiToggleColor: var(--toggleColor, var(--blue-start-gradient));
        display: var(--toggleDisplay, inline-flex);
        position: relative;
    }

    .big_toggle__input {
        /*
  The pattern by Sara Soueidan https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
  */
        width: var(--uiToggleSize);
        height: var(--uiToggleSize);
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
    }

    /*
1. Calculation of the gap for the custom checkbox
*/

    .big_toggle__label {
        display: inline-flex;
        min-height: var(--uiToggleSize);
        padding-left: calc(var(--uiToggleSize) + var(--toggleIndent, .4em));
    }

    .big_toggle__input:not(:disabled) ~ .big_toggle__label {
        cursor: pointer;
    }

    /*
1. Ems helps to calculate size of the checkbox
*/

    .big_toggle__label::after {
        content: "";
        box-sizing: border-box;
        width: 1em;
        height: 1em;
        font-size: var(--uiToggleSize); /* 1 */

        background-color: transparent;
        border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
    }

    .big_toggle__input:checked ~ .big_toggle__label::after {
        background-color: var(--uiToggleColor);
    }

    .big_toggle__text {
        margin-top: auto;
        margin-bottom: auto;
    }

    /*
The arrow size and position depends from sizes of square because I needed an arrow correct positioning from the top left corner of the element toggle

1. Ems helps to calculate size and position of the arrow
*/

    .big_toggle__label::before {
        content: "";
        width: 0;
        height: 0;
        font-size: var(--uiToggleSize); /* 1 */

        border-left-width: 0;
        border-bottom-width: 0;
        border-left-style: solid;
        border-bottom-style: solid;
        border-color: var(--toggleArrowColor, #fff);
        position: absolute;
        top: .5428em;
        left: .25em;
        z-index: 3;
        transform-origin: left top;
        transform: rotate(-40deg) skew(10deg);
    }

    .big_toggle__input:checked ~ .big_toggle__label::before {
        --uiToggleArrowWidth: var(--toggleArrowWidth, 2px);
        width: .4em;
        height: .2em;
        border-left-width: var(--uiToggleArrowWidth);
        border-bottom-width: var(--uiToggleArrowWidth);
    }

    /*
States
*/

    /* disabled state */

    .big_toggle__input:disabled ~ .big_toggle__label {
        opacity: var(--toggleOpacityDisabled, .24);
        cursor: var(--toggleCursorDisabled, not-allowed);
        user-select: none;
    }

    /*
=====
PRESENTATION STYLES
=====
*/

    /* 
The demo skin
*/

    .big_toggle__label::after {
        border-radius: var(--toggleBorderRadius, 2px);
    }

    /* 
The animation of switching states
*/

    .big_toggle__input:not(:disabled) ~ .big_toggle__label::before {
        will-change: width, height;
        opacity: 0;
    }

    .big_toggle__input:not(:disabled):checked ~ .big_toggle__label::before {
        opacity: 1;
        transition: opacity .1s ease-out .15s, width .1s ease-out .3s, height .1s ease-out .2s;
    }

    .big_toggle__input:not(:disabled) ~ .big_toggle__label::after {
        will-change: background-color;
        transition: background-color .15s ease-out;
    }

    #lead-info-form .input-field-style input[disabled] {
        background-color: var(--grey-light);
        color: var(--grey-dark);
    }

        #lead-info-form .input-field-style input[disabled]:hover {
            background-color: var(--grey-light);
            color: var(--grey-dark);
            border: 1px var(--grey-dark) solid;
        }

    #pasteCheck {
        background-color: var(--grey-dark);
        top: 5px;
        right: -130px;
        padding: 10px;
        color: white;
        transition: opacity 2s;
        position: absolute;
    }

        #pasteCheck:before {
            content: "";
            position: absolute;
            left: -15px;
            border-style: solid;
            border-width: 10px 10px 0;
            border-color: var(--grey-dark) transparent;
            display: block;
            width: 0;
            /*z-index: 1;*/
            transform: rotate(90deg);
            transition: opacity 2s;
        }

    body.dark #pasteCheck {
        background-color: var(--grey-light);
    }

        body.dark #pasteCheck:before {
            border-color: var(--grey-light) transparent;
        }

    /** CREATE REPORT COMPONENT */
    .pop-up-overlay-container.create-report.mobile .pop-up-overlay-content {
        bottom: 0;
        width: 100%;
        /*height: calc(100vh - '20px');*/
    }

    .pop-up-overlay-container.create-report.pc .pop-up-overlay-content {
        background-color: #970B4E;
    }

    .pop-up-overlay-container.create-report.pc .pop-up-overlay-subcontent {
        background-color: var(--main-bg);
        padding: 20px;
    }

    .pop-up-overlay-container.create-report.pc .pop-up-overlay-subcontent {
        background-color: var(--main-bg);
        padding: 20px;
        border-radius: 0px 0px 15px 15px;
    }

    .pop-up-overlay-container.create-report.pc .popup-mentor-title {
        margin-top: 40px;
        margin-bottom: 20px;
        text-align: center;
        color: white;
    }

    .pop-up-overlay-container.create-report.pc .popup-mentor-subtitle {
        margin-bottom: 20px;
        margin-left: 20px;
        margin-right: 20px;
        text-align: center;
        color: white;
    }

    .pop-up-overlay-container.create-report.pc .checkbox-btn-switch-text {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 50px;
    }

        .pop-up-overlay-container.create-report.pc .checkbox-btn-switch-text label {
            width: auto;
            align-items: center;
        }

    @media screen and (max-width:800px) {
        .pop-up-overlay-container.create-report.pc .checkbox-btn-switch-text .checkbox {
            margin-top: 15px;
        }
    }

    .pop-up-overlay-container.create-report.pc .checkbox-title {
        margin-left: 10px;
    }

    .pop-up-overlay-container.create-report.pc .pop-up-overlay-content {
        padding: 0;
    }

    .badge.mentor {
        border-radius: 8px;
        border: solid 1px var(--grey-light);
        box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
        color: white;
        font-size: 0.85rem;
        padding-top: 2px;
        padding-right: 5px;
        padding-left: 5px;
        padding-bottom: 2px;
        text-align: center;
        margin-right: 5px;
    }

        .badge.mentor.green {
            background: linear-gradient(180deg, var(--green-start-gradient) 0%, var(--green-end-gradient) 100%);
        }

    /*BLAZOR DISCONNECTION*/
    /*#components-reconnect-modal {
    display: flex !important;
    opacity: 1 !important;
    background-color: rgb(255 255 255 / 80%) !important;
}

    #components-reconnect-modal::before {
        content: &#039;
        &#039;
        ;
        width: 300px;
        height: 65px;
        background: #BDCBFF;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
    }

    #components-reconnect-modal h5 {
        margin-top: 50px !important;
        padding: .75rem 1.25rem;
        width: 300px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1050;
        color: #003494;
        background-color: #BDCBFF;
        box-shadow: 0px 10px 10px 0px hsl(0deg 0% 0% / 20%);
    }

    #components-reconnect-modal div {
        border-color: rgb(0 52 148) rgb(89 127 222) rgb(161 180 235) !important;
        margin: auto;
        z-index: 1050;
    }

    #components-reconnect-modal h5 a {
        color: #092464 !important;
    }

    #components-reconnect-modal button {
        color: #515151;
        padding: 4px 8px;
        font-size: .875rem;
        min-width: 64px;
        box-sizing: border-box;
        transition: background-color 250ms cubic-bezier(.4,0,.2,1) 0ms,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0ms,border 250ms cubic-bezier(.4,0,.2,1) 0ms;
        font-weight: 500;
        line-height: 1;
        letter-spacing: .02857em;
        text-transform: uppercase;
        margin: auto !important;
        background: rgb(46 121 232 / 28%);
        z-index: 1500;
        border: 0;
    }*/

    .components-reconnect-hide > div,
    .components-reconnect-show > div,
    .components-reconnect-failed > div,
    .components-reconnect-rejected > div {
        display: none;
    }

    .components-reconnect-hide > .hide,
    .components-reconnect-show > .show,
    .components-reconnect-failed > .failed,
    .components-reconnect-rejected > .rejected {
        display: block;
    }



    .componentsReconnectp5 {
        padding-right: 5px;
    }

    .componentsReconnectp10 {
        padding-right: 10px;
    }

    .componentsReconnectDialogMain {
        position: fixed;
        inset: 0px;
        z-index: 1050;
        display: block;
        overflow: hidden;
        background-color: rgb(255, 255, 255, 0.8);
        text-align: center;
        font-weight: bold;
        transition: visibility 0s linear 500ms;
        visibility: visible;
    }

    .componentsReconnectDialog {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1050;
        margin: auto;
        border: 1px solid #888;
        height: 180px;
        width: 400px;
        border-radius: 6px;
        background-color: rgb(255, 255, 255, 1);
        box-shadow: 0 10px 20px rgb(0 0 0 / 10%), 0 6px 6px rgb(0 0 0 / 16%);
    }

    .components-reconnect-top {
        background: #080a35;
        display: flex;
        flex-direction: row;
        height: 60px;
        transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        padding: 20px;
        color: white;
        width: 100%;
    }

    .components-reconnect-bottom {
        display: flex;
        flex-direction: row;
        padding: 20px;
    }

    body.dark .iti__country-list li {
        background-color: black;
    }

    body .dark .iti__country-list li {
        background-color: black;
    }

    .slider-container .owl-stage {
        display: flex;
        flex-direction: row;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .slider-container .item {
        text-align: center;
    }

    /*.pop-up-onboarding {
    overflow-x: auto;
}*/

    .pop-up-onboarding::-webkit-scrollbar {
        height: 0px;
        width: 5px;
    }

    .pop-up-onboarding .slide-nav .nav-dots li, .pop-up-onboarding .slide-nav-static .nav-dots li {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        max-height: 15px;
        max-width: 15px;
        min-width: 15px;
        margin-left: 5px;
        margin-right: 5px;
        cursor: pointer;
        background-color: var(--grey-dark);
        border-radius: 50%;
        transition: all .1s ease;
        /*box-shadow: 0px 3px 5px 0px rgba(121, 151, 191, 0.25);*/
    }

    body.dark .pop-up-onboarding .slide-nav .nav-dots li, body.dark .pop-up-onboarding .slide-nav-static .nav-dots li {
        background-color: var(--grey-light);
    }

    .pop-up-onboarding .slide-nav .nav-dots li.active, .pop-up-onboarding .slide-nav-static .nav-dots li.active {
        background-color: var(--blue-primary);
    }

    body.dark .pop-up-onboarding .slide-nav .nav-dots li.active, body.dark .pop-up-onboarding .slide-nav-static .nav-dots li.active {
        background-color: white;
    }

    .pop-up-onboarding .slide-nav .nav-dots button, .pop-up-onboarding .slide-nav-static .nav-dots button {
        display: none;
    }

    /*PopUp onboarding*/
    .pop-up-onboarding .pop-up-overlay-background {
        position: fixed;
        transition: all .3s ease;
        background-color: rgba(0, 0, 0);
        opacity: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        z-index: 9998;
        backdrop-filter: blur(5px);
        top: 0;
        left: 0;
    }

    .pop-up-onboarding.open .pop-up-overlay-background {
        opacity: 1;
        pointer-events: all;
    }

    .pop-up-onboarding .pop-up-overlay-content {
        position: fixed;
        z-index: 9999;
        background-color: white;
        background-color: var(--main-bg);
        background-repeat: no-repeat;
        background-image: url("../images/background-onboarding.svg");
        background-position-x: 200px;
        background-position-y: -250px;
        padding: 30px 40px;
        border-radius: 20px;
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        max-width: 550px;
        width: 95%;
        display: none;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        scrollbar-width: thin;
        text-align: center;
    }

    .create-post-popup-container.first-post .slide-nav-static .nav-dots li {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        max-height: 15px;
        max-width: 15px;
        min-width: 15px;
        margin-left: 5px;
        margin-right: 5px;
        cursor: pointer;
        background-color: var(--grey-dark);
        border-radius: 50%;
        transition: all .1s ease;
        /*box-shadow: 0px 3px 5px 0px rgba(121, 151, 191, 0.25);*/
    }

    body.dark .create-post-popup-container.first-post .slide-nav-static .nav-dots li {
        background-color: var(--grey-light);
    }

    .create-post-popup-container.first-post .slide-nav-static .nav-dots li.active {
        background-color: var(--blue-primary);
    }

    body.dark .create-post-popup-container.first-post .slide-nav-static .nav-dots li.active {
        background-color: #FFFFFF;
    }

    .create-post-popup-container.first-post .slide-nav-static .nav-dots button {
        display: none;
    }

    .pop-up-onboarding .pop-up-overlay-content ::-webkit-scrollbar {
        width: 3px;
    }

    .pop-up-onboarding .pop-up-overlay-content ::-webkit-scrollbar-thumb {
        background-color: #929292;
    }

    .pop-up-onboarding .pop-up-overlay-content .close {
        width: 20px;
        height: 20px;
        background-image: url(../images/icons/ic_x_grey.svg);
        background-size: cover;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }


    .pop-up-onboarding.open .pop-up-overlay-content {
        display: block;
    }

    .pop-up-onboarding .img-container {
        height: 320px;
    }

    .pop-up-onboarding .matchContainer {
        height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        text-align: left;
        padding-top: 7px;
        padding-bottom: 10px;
    }

    .pop-up-onboarding .contentContainer {
        background-color: var(--grey-light);
        height: 400px;
        text-align: left;
        padding: 20px;
    }

    body.dark .pop-up-onboarding .contentContainer {
        background-color: #1D2024;
    }

    @media screen and (min-width:600px) {
        .pop-up-onboarding.open .pop-up-overlay-content {
            left: calc(50% - 275px);
            top: 50%;
            transform: translateY(-50%);
        }
    }

    @media screen and (max-width:600px) {
        .pop-up-onboarding.open .pop-up-overlay-content, .create-post-popup-container.first-post .content {
            left: 0px;
            top: 50px;
            padding: 15px 5px;
            width: 100%;
            max-height: none;
            height: calc(100vh - 50px);
            border-radius: unset;
            min-height: unset;
        }

        .create-post-popup-container.first-post .newpost-container {
            min-height: calc(100vh - 450px);
        }

        .pop-up-onboarding.open .pop-up-overlay-content .img-container {
            height: 190px;
        }

            .pop-up-onboarding.open .pop-up-overlay-content .img-container img {
                opacity: 0.4;
            }

        .pop-up-onboarding .matchContainer {
            height: calc(100vh - 350px);
            overflow-y: auto;
            overflow-x: hidden;
            text-align: left;
            padding-top: 7px;
            padding-bottom: 10px;
        }

        .pop-up-onboarding .avatar-container {
            flex-wrap: wrap;
        }

            .pop-up-onboarding .avatar-container .avatar {
                margin-left: auto;
                margin-right: auto;
            }
    }


    /**
    Cards overload
*/

    /* Remove cross close */
    button.gm-ui-hover-effect {
        display: none !important;
    }

    .gm-style-iw-a:has(.estab-popup) .gm-style-iw-d::-webkit-scrollbar-track,
    .gm-style-iw-a:has(.estab-popup) .gm-style-iw-d::-webkit-scrollbar-track-piece,
    .gm-style-iw-a:has(.estab-popup) .gm-style-iw-c,
    .gm-style-iw-a:has(.estab-popup) .gm-style-iw-t::after {
        background: rgba(0,0,0,0);
    }

    .gm-style-iw.gm-style-iw-c:has(.estab-popup) {
        background: linear-gradient(180deg, var(--orange-start-gradient) 0%, var(--orange-end-gradient) 100%);
    }

    .gm-style-iw:has(.estab-popup) + .gm-style-iw-tc::after {
        background: var(--orange-end-gradient) !important;
    }

    .estab-popup a {
        color: white;
        font-weight: 600;
    }

        .estab-popup a:hover {
            color: black;
            font-weight: 600;
        }

    /**
    Video presentation component
*/

    .video-container .ytbPresentationSchool {
        width: 100%;
        max-width: 710px;
        height: 400px;
        border-radius: 10px;
    }

    .video-container .btn-edit {
        position: absolute;
        right: 15px;
        top: 15px;
        background: var(--main-bg);
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    /*Cas spécifique de la pop-up onboarding -> Le fond est systématiquement sombre, peu importe le thème*/
    .content3 .contentContainer a {
        color: white;
    }

    .search-site {
        max-width: 550px;
        max-height: 40px;
        padding-left: 50px !important;
        background-image: url(../images/icons/ic_search_grey.svg);
        background-position: left 15px center;
        background-size: 20px 20px;
        background-repeat: no-repeat;
        border-radius: 10px;
        flex: 1;
        transition: all .2s ease;
        color: black !important;
    }

    body.dark .search-site {
        background-color: var(--grey-light) !important;
        background-image: url(../images/icons/ic_search_white.svg);
        border: none !important;
        color: white !important;
    }

    .search-site::placeholder {
        color: grey !important;
    }

    body.dark .search-site::placeholder {
        color: white !important;
    }

    .input-field-style.ic-currency input {
        background-image: url(../images/icons/ic_euros.svg);
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: calc(100% - 12px) center;
        padding-right: 50px !important;
        width: 100%;
    }

    body.dark .input-field-style.ic-currency input {
        background-image: url(../images/icons/ic_euros_white.svg);
    }

    /*END BLAZOR DISCONNECTION*/

#expandableDynMenu {
  position: absolute;
  background-color: var(--main-bg);
  top: 65px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: normal;
  border-right: 2px rgb(38 38 38) solid;
  border-bottom: 2px rgb(38 38 38) solid
}