@charset "UTF-8";
@font-face {
    font-family: "CeraRoundPro";
    font-display: swap;
    src:    url("../fonts/cera-pro/CeraPro.woff2") format("woff2"), /* chrome firefox */
            url("../fonts/cera-pro/CeraPro.woff") format("woff"), /* chrome firefox */
            url("../fonts/cera-pro/CeraPro.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
            url("../fonts/cera-pro/CeraPro.svg#CeraRoundPro") format("svg"); /* iOS 4.1- */
}
@font-face {
    font-family: 'Dosis';
    font-style: normal;
    font-display: block;
    font-weight: 400;
    src: url('../fonts/dosis/Dosis-Medium.ttf') format("truetype");
}
@font-face {
    font-family: 'Dosis-bold';
    font-style: normal;
    font-display: block;
    font-weight: 400;
    src: url('../fonts/dosis/Dosis-SemiBold.ttf') format("truetype");
}
:root {
    --color-green-dark: #00dc82;
    --ri5-color-primary-hsl: #5635fd;
    --ri5-color-primary-hsl-light-contrast: #5a38ff;
    --ri5-color-bg-hsl: 0, 0%, 100%;
    --ri5-color-contrast-high-hsl: 230, 7%, 23%;
    --ri5-color-contrast-higher-hsl: 230, 13%, 9%;
    --ri5-color-bg-darker-hsl: 240, 4%, 90%;
    --ri5-color-white-hsl: 0, 0%, 100%;
    --ri5-text-sm: 0.833rem;
    --radio-switch-width: 250px;
    --radio-switch-height: 46px;
    --radio-switch-padding: 3px;
    --radio-switch-radius: 50em;
    --radio-switch-animation-duration: 0.3s;
}
@media(min-width: 64rem){
    :root {
        /* typography */
        --ri5-text-sm: 1rem;
    }
}
/* Custom Stylesheet */
@media only screen and (min-width: 601px) {
    ::-webkit-scrollbar {
        height: 6px;
        width: 6px;
        background: #a9a9a9;
    }
    ::-webkit-scrollbar-thumb {
        background: #1856b7;
        -webkit-border-radius: 1ex;
        -webkit-box-shadow: 0px 1px 2px rgba(15, 15, 15, 0.85);
    }
    ::-webkit-scrollbar-corner {
        background: #a9a9a9;
    }
    /* Fix width collapsible when using display:grid on medium+ screens */
    .collapsible.fix_grid {
        min-width: 545px !important;
    }
}
::selection {
    background-color: #5faff5;
    color: #ffffff;
}
html,
.sidenav,
.modal {
    scroll-behavior: smooth;
    scrollbar-color: #1856b7 #a9a9a9;
    scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
}
html,
body {
    font-family: "CeraRoundPro", Arial, SansSerif, serif;
    font-size: .95rem;
    color: #151515;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    font-feature-settings: "ss01"
}
@media only screen and (max-width: 600px) {
    html:not(.logged-in) nav .brand-logo {
        left: 88%;
    }
    html:not(.logged-in) nav .brand-logo img {
        width: 55px !important;
    }
    html,
    body {
        font-size: 15px;
    }
}
@media only screen and (max-width: 992px) {
    html:not(.logged-in) nav .brand-logo {
        left: 85%;
    }
    html:not(.logged-in) nav .brand-logo img {
        width: 56px !important;
    }
}
body {
    background-color: #f4f4f4;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow-x: hidden;
}
body.fullscreen:not(.inscription-page) > header {
    background: #121212 !important;
}
body.fullscreen > main {
    background: 0 !important;
}
body.fullscreen:not(.inscription-page) > footer {
    color: #1f1f1f !important;
}
body.fullscreen:not(.inscription-page) {
    background: #0042a8 url('/ressources/images/public/design/snow_banner.jpg?v=1') 50% -3px no-repeat !important;
    background-size: cover !important;
}
body.fullscreen.inscription-page {
    background: #ffffff url('/ressources/images/public/design/shape.svg') no-repeat 100% 100% !important;
    background-size: 50em !important;
}
main {
    flex: 1 0 auto;
    background: #ffffff;
    line-height: 1.7;
}
a {
    outline: 0;
}
b {
    font-weight: 700;
}
p {
    font-weight: 600;
}
h1 {
    font-family: "Dosis", serif;
    font-size: 2.5rem;
    margin: 0 0 1.168rem 0;
}
h2 {
    font-family: "Dosis", serif;
    font-size: 2.35rem;
}
h3 {
    font-family: "Dosis", serif;
    font-size: 1.95rem;
}
h4 {
    font-family: "Dosis", serif;
    font-size: 1.75rem;
}
h5,
h6 {
    font-family: "Dosis", serif;
    font-size: 1.44rem;
}
h6 {
    font-size: 1.28rem;
}
.as-h3 {
    font-size: 1.95rem;
}
.as-h4 {
    font-size: 1.75rem;
}
.as-h5 {
    font-size: 1.5rem;
}
p, span {
    -webkit-text-stroke-width: 0.1px;
}
@-moz-document url-prefix() {
    html,
    body {
        -webkit-text-stroke-width: 0.1px;
    }
}
progress {
    height: 7px;
    border-radius: 7px;
}
progress::-webkit-progress-bar,
progress::-moz-progress-bar {
    background-color: #2d93e5;
}
progress::-webkit-progress-value {
    background-color: #2d93e5;
}
.page-footer {
    background-color: #ffffff;
    color: black;
}
.color-green-contrast {
    color: var(--color-green-dark) !important;
}
/* Datepicker dropdown scroll fix */
.dropdown-content.select-dropdown {
    overflow: auto;
}
/* Pagination edit */
.pagination li.active {
    background-color: #1b87c8;
}
/* Dropdown select input edit */
.dropdown-content li.optgroup-option > span {
    font-size: 16px;
}
.dropdown-content li.optgroup > span {
    font-size: 18px;
}
.select-dropdown li img {
    width: auto;
}
/* Toast edit */
#toast-container {
    top: auto;
    right: auto;
    bottom: 3%;
    left: 2%;
}
.toast {
    font-family: Arial, sans-serif;
    min-height:50px;
    border-radius:3px;
    background-color: #0e0e0e;
    font-size:1rem;
}
/* input's edit */
.input-field > label {
    margin-left: 12px;
}
.input-field .prefix ~ label {
    margin-left: 3.7rem;
}
/* figure attribute edit */
figure {
    margin: 0 5px;
}
/* tabs edit */
.tabs .tab a {
    color: white;
    background-color: #4ea1ea;
}
.tabs .tab a:hover,
.tabs .tab a:focus,
.tabs .tab a:focus.active,
.tabs .tab a.active {
    color: #ffffff;
    background-color: #0f8eff;
    outline: 0;
}
.tabs .indicator {
    background-color: #007bff;
}
.tab.indigo > a {
    background: #222f88 !important;
    color: #ffffff !important;
}
.tabs .tab.indigo a:hover {
    background: #384aad !important;
}
.tabs .tab.indigo a:focus.active,
.tabs .tab.indigo a.active {
    background: #3f51b5 !important;
    color: #ffffff !important;
}
/* tables edit */
table.minimal-table tbody tr td,
table.minimal-table thead tr th {
    padding: 6px 5px;
}
table.striped > tbody > tr:nth-child(2n+1) {
    background-color: rgba(223, 223, 223, 0.5);
}
table.highlight > tbody > tr:hover {
    background-color: rgba(150, 216, 255, 0.5);
}
tr.striped-line {
    background-color: #5858e6;
    color: #FFFFFF;
}
tr.striped-line td input[type="text"],
tr.striped-line td input[type="number"] {
    color: #FFFFFF;
}
tr.striped-line td .select-wrapper .caret {
    fill: #FFFFFF;
}
/* Form elements edit */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #6e6e6e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #6e6e6e;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #6e6e6e;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #6e6e6e;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #6e6e6e;
}
::placeholder { /* Most modern browsers support this now. */
    color: #6e6e6e;
}
input:not(.browser-default) {
    font-size: 15px !important;
}
.input-field > label {
    font-size: .95em;
}
input:not([type]),
input[type="text"]:not(.browser-default),
input[type="password"]:not(.browser-default),
input[type="email"]:not(.browser-default),
input[type="url"]:not(.browser-default),
input[type="time"]:not(.browser-default),
input[type="date"]:not(.browser-default),
input[type="datetime"]:not(.browser-default),
input[type="datetime-local"]:not(.browser-default),
input[type="tel"]:not(.browser-default),
input[type="number"]:not(.browser-default),
input[type="search"]:not(.browser-default),
textarea.materialize-textarea {
    background: #e8e8e8;
}
input:not([type]):not(.browser-default):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-color: #1279d9;
    -webkit-box-shadow: 0 1px 0 0 #1279d9;
    box-shadow: 0 1px 0 0 #1279d9;
}
input:not([type]):not(.browser-default):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=url]:not(.browser-default):focus:not([readonly]) + label,
input[type=time]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
input[type=search]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
    color: rgba(43, 43, 43, 0.9);
}
.input-field .prefix.active {
    color: #1279d9;
}
.switch label input[type="checkbox"]:checked + .lever::after {
    background-color: #00e138;
}
.switch label input[type="checkbox"]:checked + .lever {
    background-color: #269200;
}
.datepicker-date-display {
    background-color: #3a7fc8;
}
.input-field input[type="search"]:focus:not(.browser-default) {
    background-color: transparent;
    border-bottom: 2px solid #3a7fc8;
}
[type="radio"]:not(:checked) + span.white-radio-btn::before,
[type="radio"]:not(:checked) + span.white-radio-btn::after {
    border: 2px solid #efefef;
}
[type="radio"]:checked + span.white-radio-btn::after,
[type="radio"].with-gap:checked + span.white-radio-btn::after {
    background-color: #fff;
}
[type="radio"]:checked + span.white-radio-btn::after,
[type="radio"].with-gap:checked + span.white-radio-btn::before,
[type="radio"].with-gap:checked + span.white-radio-btn::after {
    border: 2px solid #fff;
}
[type="radio"]:not(:checked) + span,
[type="radio"]:checked + span {
    font-size: 1rem !important;
    padding: 0 30px 0 25px;
}
[type="radio"]:not(:checked) + span,
[type="radio"]:checked + span,
[type="checkbox"] + span:not(.lever) {
    line-height: 22px;
}
[type="checkbox"] + span:not(.lever) {
    padding-left: 28px;
    margin-right: 30px;
    font-size: .95rem;
}
[type="checkbox"] + span.xs {
    font-size: .95rem;
}
[type="checkbox"]:checked + span:not(.lever):before {
    border-right: 2px solid #3ea51d;
    border-bottom: 2px solid #3ea51d;
}
[type="checkbox"].filled-in:checked + span:not(.lever):after {
    border: 2px solid #3ea51d;
    background-color: #3ea51d;
}
[type="checkbox"]:indeterminate + span:not(.lever):before {
    border-right: 2px solid #3ea51d;
}
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
    border: 2px solid #3ea51d;
}
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
    background-color: #3ea51d;
}
[type="radio"] + span::before,
[type="radio"] + span::after {
    margin: 2px;
}
label,
.input-field > label {
    color: #262626;
}
select {
    border: 1px solid #ddd;
}
.select-dropdown li > span {
    font-size: 16px !important;
}
textarea.medium-textarea {
    height: 250px !important;
}
textarea.materialize-textarea {
    padding: .8rem .35rem;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select.browser-default {
    color: #000000;
}
select.browser-default:disabled {
    background: #d5d5d5;
}
.btn-floating-small {
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 11px;
}
.btn-floating-small i {
    line-height: 30px;
    font-size: 1.15rem;
}
.ck-editor__main {
    color: black !important;
}
input.limited-w {
    width: 200px;
}
.limited-w .select-wrapper {
    max-width: 190px;
}
.limited-w.min-select .select-wrapper {
    max-width: 120px;
}
.ultra-limited-w .select-wrapper {
    max-width: 150px;
}
td.select-limited-w div.select-wrapper {
    width: 150px;
}
td.select-centered div.select-wrapper {
    margin-left: auto;
    margin-right: auto;
}
.dropdown-content li > a,
.dropdown-content li > span {
    font-size: 16px;
    color: #1640a4;
}
@media only screen and (min-width: 601px) {
    .input-field {
        min-width: 270px;
    }
}
/* ScrollSpy edit */
.table-of-contents a.active {
    border-left: 3px solid #0076c4;
}
.table-of-contents a:hover {
    border-left: 2px solid #0076c4;
}
/* Tooltip used into forms */
.valid-tooltip,
.invalid-tooltip {
    width: max-content;
    width: -moz-max-content;
    width: -webkit-max-content;
    padding: 1% 2%;
    margin: .1rem 5px 5px 5px;
    font-size: 1rem;
    line-height: 2;
    color: #fff;
    background-color: rgba(40,167,69,0.9);
    border-radius: .25rem;
    transition: all .1s ease-out;
}
.invalid-tooltip {
    background-color: rgba(220,53,69,0.9);
}
/* Tooltip edit */
.material-tooltip {
    max-width: 500px;
}
/* Sidenav edit */
.sidenav.sidenav-fixed,
.sidenav.sidenav-fixed .collapsible-body {
    background-color: transparent !important;
}
html.logged-in body:not(.fullscreen) header:not(.cs2-flex),
html.logged-in body:not(.fullscreen) main,
html.logged-in body:not(.fullscreen) footer:not(.cs2-padding-x-sm) {
    padding-left: 280px;
}
.sidenav.sidenav-fixed {
    margin-top: 75px;
    height: 100%;
    max-height: 850px;
    position: fixed;
    padding-bottom: 25px;
    transition: margin-top 350ms ease-in-out;
    overflow-y: auto;
}
ul.liste-constributeurs-alliance li,
.sidenav li > a {
    font-size: .96rem !important;
    font-weight: 400;
    color: #ffffff;
    padding: 0;
    margin: 0 16px;
    height: 52px;
}
.sidenav li > a > i {
    color: #ffffff;
}
.sidenav.sidenav-fixed li > a {
    height: 48px;
}
.sidenav.sidenav-fixed li > a,
.sidenav.sidenav-fixed li > a > i {
    color: #272727;
}
.sidenav .collapsible-header,
.sidenav.sidenav-fixed .collapsible-header {
    padding: 0;
}
.sidenav li.active {
    background-color: transparent;
}
.sidenav li > a.active {
    background-color: rgba(221, 221, 221, 0.65) !important;
}
.liste-joueurs .player-card:hover,
ul.liste-constributeurs-alliance li:hover,
.sidenav li > a:hover {
    background-color: rgba(213, 213, 213, 0.7) !important;
}
.sidenav li img {
    display: block;
    margin: 4% auto;
}
.sidenav .user-view {
    padding: 16px 0;
}
.sidenav-content {
    display: block;
    width: 100%;
}
.sidenav .collapsible-header i,
.sidenav.sidenav-fixed .collapsible-header i {
    line-height: 40px;
}
.sidenav .collapsible-body {
    margin: .5em 0;
}
.blue-light-1 {
    background-color: #2a81ce !important;
}
/* icon edit */
i.left {
    margin-right: 10px;
}
/* Navbar edit */
.navbar-item {
    color: #263238;
}
nav ul a {
    padding: 0 10px;
    letter-spacing: 0.365px;
}
nav,
nav ul a:hover {
    background: none;
}
nav ul a:not(.with-icon):not(.list__item--link),
nav ul a div.shadow-btn {
    margin-top: 8px;
    line-height: 54px;
    padding: 0 .75rem;
    border-radius: 50px;
    color: #fbfbfb;
}
nav ul a:not(.with-icon):not(.list__item--link) {
    background: #3b9bf0;
}
nav ul a div.shadow-btn {
    height: 100%;
    width: 100%;
    position: absolute;
    background: #215392;
    left: -4px;
    top: -5px;
    z-index: -1;
}
nav ul a.premium-btn:not(.with-icon) {
    background: linear-gradient(160deg,#6627f0 40%,#ca2362 100%) !important;
}
nav ul a:not(.with-icon):not(.premium-btn):not(.list__item--link):hover,
nav ul a.active:not(.with-icon):not(.premium-btn):not(.list__item--link) {
    background: #1565c0;
}
nav div.nav-wrapper.custom-container ul li.hide-on-med-and-down {
    margin: 0 5px;
}
nav.fullscreen {
    box-shadow: none;
    -webkit-box-shadow: none;
}
.custom-container {
    margin: 0 auto 10px auto;
    width: 90%;
    max-width: 1500px;
}
@media only screen and (min-width: 601px) and (max-width: 850px) {
    .custom-container {
        margin: 5px auto;
        width: 97%;
    }
}
nav ul li a,
nav ul li span {
    padding: 0;
    font-size: 1.05rem;
}
@media only screen and (min-width: 601px) and (max-width: 1290px) {
    nav ul li a,
    nav ul li span {
        font-size: 1.1rem;
    }
    nav > .custom-container {
        width: 95%;
    }
}
nav ul li {
    margin: 0 12px;
}
.nav-avatar {
    height: 50px;
    width: 50px;
    background-size: cover !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -webkit-background-clip: padding-box !important;
    -moz-border-radius: 50px;
    -moz-background-clip: padding !important;
    background-clip: padding-box !important;
    background-position: center center !important;
    margin-top: .7rem;
}
.sidenav li > a {
    font-size: 16px;
}
.sidenav li.theme-btn {
    position: absolute;
    bottom: 5%;
    left: 25%;
}
nav {
    position: inherit;
    z-index: 2;
}
/* Homepage css */
.signup-btn {
    margin-top: 1rem !important;
    background: linear-gradient(160deg,#6627f0 40%,#ca2362 100%);
}
/* Dropdown and account container navbar */
span.content-navbar {
    display: block;
    line-height: 22px;
    width: 100%;
    padding: 15px 10px !important;
}
span.content-navbar span.right-content-navbar{
    color: #212121;
}
span.content-navbar > i {
    height: 40px;
    font-size: 1.22rem;
}
span.content-navbar.min-text {
    font-size: 15px;
}
span.left-content-navbar {
    width: 20%;
}
span.right-content-navbar {
    width: 80%;
    margin-left: 5%;
}
.beta-badge {
    font-size: 1rem;
    background: #0087ff;
    padding: 0 .75rem;
    cursor: default;
}
.beta-badge.pad-1r {
    padding: 1rem .95rem;
}
.liaison-badge {
    padding: 0 .5rem;
    margin-bottom: 1rem;
}
#account_dropdown,
#msg_dropdown {
    width: 250px;
    background: #fbfbfb;
}
#account_dropdown li:hover,
#msg_dropdown li:hover {
    background: rgba(222, 222, 222, 0.75);
}
.li-container-navbar {
    cursor: default !important;
}
.li-container-navbar:not(.messagerie-menu-title):hover {
    background: none !important;
}
/* Breadcrumbs edit */
.breadcrumb {
    font-size: 15px;
}
ol:not(.custom-ol) {
    list-style-type: none;
}
ol:not(.custom-ol) li a:hover, ol li a::after{
    border: none !important;
    transition: none !important;
}
ol:not(.custom-ol) li::before {
    content: '›';
    color: #232323;
    display: inline-block;
    margin: 0 2px 0 6px;
    font-size: 1.52rem !important;
    -webkit-font-smoothing: antialiased;
}
ol:not(.custom-ol) li:first-child::before {
    display: none;
}
.breadcrumb-icon:not(.icon-standalone) {
    padding-right: 4px;
}
.breadcrumb-icon.icon-standalone {
    float: none !important;
}
.breadcrumb-navigation {
    display: inline-block;
    border: none;
    box-shadow: none;
    line-height: 60px !important;
    height: 60px !important;
    z-index: 0;
    text-align: center;
    text-overflow: clip;
    overflow: hidden;
    float: inherit;
}
.breadcrumb-link {
    display: inline-block;
    font-style: normal;
}
.breadcrumb-navigation i {
    line-height: 58px !important;
    font-size: 1.15rem !important;
}
.breadcrumb-link .breadcrumb {
    color: #232323;
}
.breadcrumb-link:last-child .breadcrumb {
    color: #232323; !important;
}
ol:not(.custom-ol).white-text .breadcrumb-link .breadcrumb,
ol:not(.custom-ol).white-text .breadcrumb-link:last-child .breadcrumb,
ol:not(.custom-ol).white-text li::before {
    color: #efefef;
}
@media only screen and (max-width: 992px) {
    .breadcrumb {
        font-size: 13px;
    }
    .breadcrumb-navigation i {
        font-size: 1.05rem !important;
    }
}
.sidenav-overlay {
    z-index: 3;
}
.not-logged-in-sidenav li a {
    padding: 0 1em;
}
/* collapsible edit */
.collapsible-body {
    padding: 1.45rem;
}
/* cards edit */
.card-image {
    max-height: 70% !important;
}
.card-content {
    max-height: 30% !important;
}
.card-panel {
    padding: 10px;
    margin: .5rem 0 .5rem 0;
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
/* collection edit */
.collection,
.collection .collection-item,
.collection.with-header .collection-header {
    background: none;
}
.hide-border,
table.no-bd,
.collection.no-bd,
.collection.no-bd .collection-item,
.collection.no-bd.with-header .collection-header {
    border: none !important;
}
.collection .collection-item .title {
    font-size: 18px !important;
    margin: 6px 0;
    display: block;
}
.modern-collection {
    border: none !important;
}
.collection.collection-compact li.collection-item {
    padding: 1% 0;
}
.collection-item.collection-header-custom {
    background: #1f85df;
}
@media only screen and (max-width : 992px) {
    header,
    main,
    footer {
        padding-left: 0 !important;
    }
    .premium-minimal-container,
    .infos-minimal-container {
        margin: 1rem 0;
    }
}
hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.45);
}
.modal {
    max-width: 1000px;
}
@media only screen and (min-width: 993px) {
    .modal { width: 65%; }
}
.limited-w {
    width: max-content !important;
    width: -moz-max-content;
    width: -webkit-max-content;
}
.full-w {
    width: 100%;
}
.privacy-block {
    font-size: 10px;
    display: block;
    color: #2d2d2d;
    font-family: Arial, sans-serif;
    margin: 10px 0 20px 1% !important;
}
.privacy-block a {
    color: #2d2d2d;
}
.recaptcha-logo {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background: url('https://www.gstatic.com/recaptcha/api2/logo_48.png') center center no-repeat;
    background-size: 100%;
    vertical-align: middle;
}
.full-alert-block {
    margin: 2rem 0 0 0;
    padding: .5rem 1.5rem;
    background: #ce592c;
    color: #ffffff;
    min-width: 220px;
}
.alert_block .card-panel {
    min-height: 52px;
    line-height: 30px;
}
.alert_block .card-panel span {
    display: inline-block;
    width: 100%;
}
.alert_block .card-panel a {
    float: right;
    margin-left: 0 !important;
}
.transform-link {
    background: none!important;
    border: none;
    margin:  0 auto 10px auto;
    color: #36a6ff;
    text-decoration: none;
    font-size: 0.975em;
    font-weight: 700;
    cursor: pointer;
    padding: 8px;
}
a.transform-link.darken-link {
    color: #326eb3;
    font-weight: 400;
}
a.transform-link.lighten-link {
    color: #a9d2ff;
    font-weight: 400;
}
.waves-effect.waves-ultra-light .waves-ripple {
    background-color: rgba(200, 200, 200, 0.35);
}
.shift-container {
    margin-left: 5% !important;
}
.z-0 {
    z-index: 0;
}
@media only screen and (max-width: 600px) {
    .liaison-badge {
        width: 100%;
        display: inline-block;
    }
    .full-w-mobile {
        width: 100%;
    }
    .login-form {
        padding: 1em 1.8em;
    }
    .no-margin-mobile {
        margin: 0 !important;
    }
    #toast-container {
        top: auto !important;
        left: 0;
        right: 0;
        bottom: 2%;
    }
    .shift-container {
        margin-left: 0 !important;
    }
    .block-on-mobile-no-pad {
        display: block !important;
    }
    .nav-avatar {
        margin-top: .2rem;
    }
    .custom-container {
        margin: 5px auto;
        width: 98%;
    }
    .no-padding-mobile {
        padding: 0 !important;
    }
    #tab > [class*="wtab-selected"] {
        margin-top: 150px !important;
        margin-left: 0 !important;
    }
    #tab > .wtab-content {
        padding: 25px 5px !important;
    }
    #tab > .wtab-content > .wtab-current > .col {
        padding: 0 !important;
    }
    #beta-banner {
        display: none !important;
    }
}
.materiel-img {
    max-height: 450px;
}
.no-z-depth {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
.home-container {
    border: 1px solid #c6c6c6;
}
.big-icon {
    font-size: 28px;
}
.min-regular-text-2 {
    font-size: 15px !important;
}
.min-regular-text {
    font-size: 16px !important;
}
.regular-text {
    font-size: 1.14rem !important;
}
.red-cs-text {
    color: #ef5350 !important;
}
.green-cs-text {
    color: #66bb6a !important;
}
.blue-cs-text {
    color: #097bbf !important;
}
.blue-cs-text-lighteen {
    color: #2ba6ef !important;
}
.planning-table-container {
    overflow-x: auto;
}
table.planning-table {
    padding-bottom: 1.5rem;
    border-collapse: separate;
    border-spacing: 8px;
}
table.planning-table > th, td {
    border-radius: 10px;
}
span.simple-label,
h6.label-damage {
    padding: 8px 15px;
}
td.planning-td.light-blue.lighten-4:hover {
    background-color: #b9f6ca !important;
}
td.planning-td.red.lighten-4:hover {
    background-color: #ef9a9a !important;
}
.planning-red-td {
    background-color: #ff001975 !important;
}
.planning-red-td:hover {
    background-color: rgba(255, 0, 25, 0.58) !important;
}
.planning-blue-td {
    background-color: #00b0ff91 !important;
}
.planning-blue-td:hover {
    background-color: rgba(0, 255, 71, 0.57) !important;
}
.planning-table tbody tr:not(:first-child) td:first-child {
    border-radius: 0;
    border-top: 1px solid #acacac;
}
.planning-table tbody tr td:not(:first-child):not(:last-child) {
    min-width: 110px;
    font-size: 15px;
}
.planning_radio_container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f2f2f2;
    width: 690px;
    height: 50px;
    border-radius: 9999px;
    box-shadow: inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.15);
}
input[type="radio"].js-jour-planning-desktop {
    appearance: none;
    display: none;
}
label.label-jour-planning {
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: inherit;
    width: 77px;
    height: 40px;
    text-align: center;
    border-radius: 9999px;
    overflow: hidden;
    transition: linear 0.2s;
    color: #6e6e6edd;
}
label.label-jour-planning.label-xl {
    width: 100px;
}
input[type="radio"].js-jour-planning-desktop:checked + label.label-jour-planning {
    background-color: #1d87ef;
    color: #f1f3f5;
    transition: 0.3s;
}
.catalogue-card .card-image .card-title {
    width: 100%;
    font-size: 1.2rem;
    background: #003f91b3;
    border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
}
.catalogue-card .card-image .card-title.backto-title {
    z-index: 2;
    background: #00000052;
    height: 100%;
    line-height: 20rem;
}
.catalogue-card .occasion-icon {
    position: absolute;
    z-index: 1;
    top: .25em;
    left: .25em;
    color: #fff;
}
.backto_overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    border-radius: 8px;
    background: #008600e0;
    z-index: 1;
}
/* Medias edit */
.materialboxed {
    border: 1px solid #b0b0b0;
}
/* Custom cards and edit blockquote element */
.card.stepper-container-card .card-content p {
    margin: revert;
}
blockquote {
    border-left: 4px solid #4a9fff;
    background: #eff7ff;
    color: #207aca;
    margin: 5px 0;
    padding: 0.8rem 1.5rem;
    font-size: 15px;
}
blockquote span.text-small {
    font-size: 13px;
}
/* Home header section */
@media only screen and (min-width: 601px) {
    blockquote.resized {
        width: max-content;
        width: -moz-max-content;
        width: -webkit-max-content;
    }
}
header {
    background-color: white;
    position: relative;
}
.brand-logo > img,
.sidenav li img {
    max-width: 115px;
}
.dropdown-content {
    overflow: hidden;
}
.dropdown-content li > a,
.dropdown-content li > span {
    font-size: 15px;
    padding: 14px 25px;
}
.dropdown-content li {
    margin: 0;
}
.small-btn-vignette {
    padding: .5rem 1rem;
    border-radius: 20px;
}
.card-alliances-candidature {
    padding: .7rem 1rem;
    background: #ececec;
}
.alliance-card {
    background: linear-gradient(160deg,#e8e8e8 40%, #9d9d9d 190%) !important;
}
.alliances-events-list {
    max-height: 400px;
    overflow: auto;
    overflow-y: scroll;
}
.alliances-events-list .collection-item {
    background: #dcdcdc !important;
    padding: .35rem .675rem .15rem .675rem;
    margin: 22px 0 35px 0;
}
.alliances-events-list li .small-badge {
    position: absolute;
    top: -17px;
}
table.light-bg,
.container-light-bg,
.stat-container-v2 .stat-content.light-bg {
    background: #e8e8e8;
}
.green-container {
    padding: 1rem;
    background: linear-gradient(100deg, #005f01 65%, #037205 70%, #fff 92%);
    border-radius: 8px;
    margin: 1em 0;
}
.amber-container {
    padding: 1rem;
    background: linear-gradient(100deg,#ac5700 65%,#b36500 70%,#fff 92%);
    border-radius: 8px;
    margin: 1em 0;
}
.amber-container .list-alliance-1 li:not(.cd-item):hover {
    background: #994d00 !important;
}
.stat-container-v2 {
    display: inline-block;
    border-radius: 8px;
    width: 100%;
    position: relative;
    background: linear-gradient(90.09deg, #7644ff 17.61%, #d02aff 47.78%, #18d9f9 78.77%);
    padding: 1px;
    margin-bottom: 1rem;
    z-index: 1;
}
.stat-container-v2.blue-v2 {
    background: linear-gradient(90.09deg, #2182ef 17.61%, #2ea4e3 47.78%, #2182ef 78.77%);
}
.stat-container-v2.green-gradient {
    background: linear-gradient(90.09deg, #73ff44 17.61%, #10a706 47.78%, #00e822 78.77%);
}
.stat-container-v2.red-gradient {
    background: linear-gradient(90.09deg, #ff4444 17.61%, #a70606 47.78%, #e80000 78.77%);
}
.stat-container-v2.orange-gradient {
    background: linear-gradient(90.09deg, #f58709 17.61%, #f5a209 47.78%, #f58709 78.77%);
}
.stat-container-v2.white {
    background: #262626;
}
.stat-container-v2 .stat-content {
    position: relative;
    border-radius: 8px;
    color: #ffffff;
    background: #051c60;
    padding: 2rem 1rem;
    z-index: 4;
}
.stat-container-v2 .stat-content.light-bg {
    padding: 1rem;
}
.stat-container-v2 .stat-content h2.stat-title {
    font-size: 20px !important;
    position: relative;
    font-family: Arial;
    font-weight: 600;
    color: #ffffff;
}
.stat-container-v2.blue-v2,
.stat-container-v2.blue-v2 .stat-content h2.stat-title {
    color: #1a1a1a;
}
.stat-container-v2.blue-v2 .stat-content h2.stat-title {
    font-size: 18px !important;
}
.stat-container-v2:not(.red-gradient):not(.green-gradient):not(.blue-v2) .stat-content h2.stat-title {
    font-size: 24px !important;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90.09deg, #ff3e3e 17.61%, #d02aff 47.78%, #07e3ff 80.77%);
}
.hover-gradient-bg {
    position: absolute;
    display: block;
    height: 80%;
    width: 85%;
    top: 10%;
    left: 7.5%;
    background: linear-gradient(90deg, #8e13ff 20%, #00cdf3 80%);
    transition: all 300ms ease-in, all 600ms ease-out;
    z-index: 3;
}
.stat-container-v2:hover .hover-gradient-bg {
    filter: blur(190px);
}
.home-container-v2 {
    display: flex;
    align-items: center;
    padding: 1.5rem 2.5rem;
    min-height: 150px;
}
.list-modal {
    padding: .75rem;
    background: #ececec;
}
.bg-ellipse {
    background: linear-gradient(97.62deg, rgba(255, 0, 0, 0.55) 2.27%, rgba(182, 50, 255, 0.7) 50.88%, rgba(239, 0, 0, 0.55) 98.48%);
    filter: blur(169px);
    height: 160px;
    left: 9rem;
    position: absolute;
    top: -11rem;
    transform: matrix(-.95,-.3,-.3,.95,200,250);
    width: 600px;
    z-index: 0;
}
.snow-border::before {
    content: "";
    background: transparent url('../ressources/images/public/design/snow-border-1.png') no-repeat;
    position: absolute;
    height: 30px;
    width: 250px;
    top: -1.15rem;
    z-index: 1;
    left: 0;
}
.snow-border.snow-right::before {
    left: auto;
    right: 0;
}
/* Custom progress bar */
.progress-bar-green { background-color: #5cb85c !important; }
.progress-bar-orange { background-color: #f0ad4e !important; }
.progress-bar-red { background-color: #d9534f !important; }
.progress {
    height: 25px;
    margin: auto;
    overflow: hidden;
    background-color: #ddd;;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    width: 80%;
}
.progress-bar {
    float: left;
    width: 80%;
    height: 100%;
    font-size: 15px;
    line-height: 25px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
/*
 * Begin IE Fix
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /*
     * dropdown arrow icon fix
     */
    .dropdown-trigger > i {
        display: none !important;
    }
}
/*
 * End IE Fix
 */
.minimale-alert {
    background-color: #f44336;
    padding: .75rem 1rem !important;
    width: auto !important;
}
.alert {
    padding: 15px !important;
    background: linear-gradient(160deg,#f44336 40%,#9d0000 100%);
    color: white;
    margin: 1em 0;
    font-size: 1rem !important;
    border-radius: 5px;
}
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: 500;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.closebtn:hover {
    color: #000000;
}
.alert.success {
    background: linear-gradient(160deg,#16a225 40%,#097900 100%);
}
.alert.info {
    background: linear-gradient(160deg,#0874e8 40%,#290bbb 100%);
}
.action-btn-tab-modal {
    position: absolute;
    left: 40%;
    top: 25%;
}
.elem-no-bg {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
blockquote,
blockquote.contain-text {
    word-break: break-word;
}
.action_link {
    display: block;
    margin-left: 1em;
    line-height: 1.5em;
    font-weight: 500;
    font-size: 1.05rem;
}
.success-min-svg-icon {
    height: 25px;
    fill: #fff;
    vertical-align: middle;
}
.premium-minimal-container {
    background: #ffedd4;
}
.premium-minimal-container,
.infos-minimal-container {
    padding: .55rem;
}
.divider {
    width: 70%;
    margin: 2% auto;
    background-color: #a6a6a6;
}
.divider.darken {
    background-color: #393939 !important;
}
.divider.lighten {
    background-color: #cacaca !important;
}
.payement_methods {
    float: right;
    margin-right: 5%;
}
.payement_methods > i,
.payement_methods > img {
    margin-left: 8px;
    filter: grayscale(1);
}
.profil-avatar-rounded-image,
.avatar-rounded-image,
.min-rounded-image,
.rounded-image {
    width: 100px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}
.js-accordion-button.fixed-accordion::after {
    background-image: none !important;
}
.js-accordion-button.white-text:after {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.js-accordion-button.white-text:active,
.js-accordion-button.white-text:focus,
.js-accordion-button.white-text:hover {
    color: #FFFFFF !important;
}
.rounded-image.shifted {
    margin-left: 3%;
}
.min-rounded-image {
    width: 32px;
    height: 32px;
}
.avatar-rounded-image {
    width: 65px;
    height: 65px;
}
.profil-avatar-rounded-image {
    width: 100px;
    height: 100px;
}
.min-text {
    font-size: 13px;
    font-family: Arial, sans-serif;
    letter-spacing: normal;
}
.rounded-img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.light-blue-container {
    background: #e3f2fd;
}
.container-infos.d-flex {
    padding: 10px 16px;
    justify-content: center;
    min-height: 56px;
}
.container-infos > span.d-inline-flex {
    align-items: center;
}
.parsley-required {
    color: #ce1616;
}
.form-section {
    padding: 2% 0 0 1%;
    display: none;
}
.form-section.current {
    display: inherit;
}
.btn-min-pad {
    padding: 0 10px;
}
.card-secteur,
.col-info-reports {
    background: #028aee;
    color: white;
    padding: 5px 20px;
}
.card-secteur {
    background: #0063ac;
}
.col-info-reports.fixed-h {
    min-height: 100px;
}
.content-select-rm div .select-dropdown li > span {
    font-size: 15px !important;
}
.options-rm-inputs label {
    display: inline-block;
    margin: .5em .25em;
}
.black-text-on-lightmode {
    color: #151515;
}
.valign-btn {
    margin-top: 1.5rem;
}
.pd-top-4 {
    padding-top: 4%;
}
.pd-0-5 {
    padding: 0 5%;
}
.mg-top-1 {
    margin-top: 1%;
}
.mg-top-2 {
    margin-top: 2%;
}
.mg-top-4 {
    margin-top: 4%;
}
.mg-top-6 {
    margin-top: 6%;
}
.mg-top-8 {
    margin-top: 8%;
}
.mg-bot-1 {
    margin-bottom: 1%;
}
.mg-bot-3 {
    margin-bottom: 3%;
}
.mg-bot-5 {
    margin-bottom: 5%;
}
.mg-bot-8 {
    margin-bottom: 8%;
}
.mg-left-1 {
    margin-left: 1%;
}
.mg-left-2 {
    margin-left: 2%;
}
.mg-left-4 {
    margin-left: 4% !important;
}
.mg-right-1 {
    margin-right: 1%;
}
.mg-right-3 {
    margin-right: 3%;
}
.marg-1 {
    margin: 1%;
}
.pad-1 {
    padding: 1% !important;
}
.pad-5 {
    padding: 5% !important;
}
.fixed-pad {
    padding: 1rem 1.2rem !important;
}
@media only screen and (max-width: 600px) {
    nav .brand-logo {
        left: 30%;
        -webkit-transform: translateX(-38%);
        transform: translateX(-38%);
    }
    .payement_methods {
        float: none;
        margin-right: 0;
    }
    .pd-top-4 {
        padding-top: 3%;
    }
    .mg-top-8 {
        margin-top: 4%;
    }
    .mg-top-6 {
        margin-top: 3%;
    }
    .mg-top-4 {
        margin-top: 2%;
    }
    .valign-btn {
        margin-top: 1.5rem;
    }
    .sc__container {
        height: 252px !important;
    }
    .sc__wrapper {
        height: 262px !important;
    }
    label.chkbx-ui {
        margin: 20px 5px !important;
    }
}
.filtre-alliance {
    min-height: 70px;
    line-height: 70px;
}
.filtre-alliance input {
    max-width: 320px;
    margin: 0 .5rem 0 2rem !important;
}
.rounded-badge {
    padding: 6px;
    border-radius: 50%;
    height: 24px;
    width: 24px;
}
#counter {
    background-color: #e55a63;
    display: block;
    height: 130px;
    width: 240px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    font-size: 1.05rem;
    margin-left: auto;
    margin-right: auto;
}
#counter-number {
    font-size: 2.21rem;
}
#illustration-container {
    display: block;
    position: relative;
}
#illustration-container > .text-subcontent {
    position: absolute;
    bottom: 0;
    height: 48px;
    line-height: 48px;
    background-color: rgba(96,96,96,0.7);
    border-radius: 0 0 6px 6px;
    font-size: 20px;
}
.basic-card-extended {
    right: 0;
    top: 0;
    width: 180px;
    height: 100%;
}
.basic-card,
.sub-basic-card {
    padding: 1rem 1.5rem;
    background: #eaeaea;
}
.sub-basic-card {
    background: #cecece;
}
.red-info-block {
    border: 1px solid #ff3935;
    padding: 0 20px;
    background: #ffdada;
    color: #ec211c;
    border-radius: 8px;
}
.blue-info-block {
    border: 1px solid #226dbe;
    padding: 0 20px;
    background: #e0f6ff;
    color: #226dbe;
    border-radius: 8px;
}
.green-info-block {
    border: 1px solid #208a2f;
    padding: 0 20px;
    background: #e0ffe1;
    color: #208a2f;
    border-radius: 8px;
}
.section-title {
    border-bottom: 2px solid #4094ff;
    padding-bottom: 0.8em;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-basic {
    cursor: default;
}
.col.highlight {
    background: #eaeaea;
}
.col.highlight.improve-pad {
    padding: 0 1.5rem !important;
}
.reset-uppercase {
    text-transform: none;
}
.parallax {
    z-index: 1 !important;
}
.parallax .header {
    position: relative;
}
.span-tab-line {
    height: 50px;
    line-height: 50px;
    padding: 0 1em;
}
span.text-label {
    min-width: 30px;
    max-width: 100px;
    width: auto;
    display: block;
    height: 35px;
    line-height: 35px;
    margin: 6px 1em 0 0;
}
span.text-label.full-w {
    max-width: none;
}
.block-overlay {
    min-height: 25%;
    top: 25%;
    display: block;
    position: relative;
    margin: 0 auto;
    background: #000000b3;
    padding: 1em 0;
    width: 50%;
}
.text-spacer {
    margin: 0 10px;
}
.bg-gradient-purple {
    background: linear-gradient(160deg,#6627f0 40%,#0258df 100%) !important;
}
.bg-gradient-blue {
    background: linear-gradient(160deg,#0874e8 40%,#290bbb 100%) !important;
}
.bg-gradient-green {
    background: linear-gradient(160deg,#16a225 40%, #095e01 100%) !important;
}
.bg-gradient-red {
    background: linear-gradient(160deg,#f44336 40%,#9d0000 100%) !important;
}
.bg-gradient-metal {
    background: linear-gradient(160.09deg, #979797 17.61%, #c8c8c8 47.78%, #777 80.77%) !important;
}

.primary-btn {
    background: #4827ec;
    min-width: 180px;
}
.primary-btn:focus,
.primary-btn:hover {
    background: #6043ef !important;
}
.primary-btn:focus {
    box-shadow: rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset, rgba(43, 16, 178, 0.25) 0px 1px 2px 0px, rgba(43, 16, 178, 0.1) 0px 1px 4px 0px, rgba(43, 16, 178, 0.25) 0px 3px 6px -2px, rgb(255, 255, 255) 0px 0px 0px 2px, rgb(72, 39, 236) 0px 0px 0px 4px;
}
.btn,
.btn-small,
.btn-large:not(.btn-floating),
.modal,
.rounded-collection,
.col-info-reports,
.rounded-corners {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
.rounded-corners-2,
.sidenav li > a {
    border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
}
.rounded-btn {
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
}
/* Profils blocks */
.profil_details.blue_block {
    border: 3px solid #0087ff;
}
.profil_details.blue_block .profil_details_icon {
    background: #0087ff;
}
.profil_details.grey_block {
    border: 3px solid #454545;
}
.profil_details.grey_block .profil_details_icon {
    background: #454545;
}
.profil_details.green_block {
    border: 3px solid #319019;
}
.profil_details.green_block .profil_details_icon {
    background: #319019;
}
.profil_details {
    position: relative;
    border-radius: 12px;
    margin-top: 2%;
}
.profil_details_icon {
    position: absolute;
    width: 11rem;
    height: 100%;
    left: 0;
    border-radius: 8px 0 0 8px;
}
.profil_details > .col {
    margin-left: 12.5rem !important;
}
.lighteen-blue {
    background: #e2e7f3 !important;
}
.li-margin-top-1 {
    margin-top: 1.5em;
}
.catalogue-desc {
    font-size: 15px;
    line-height: 1.25rem;
}
.vignette-marque-catalogue-container span img {
    height: 39px;
    width: auto;
    max-width: 150px;
}
.vignette-marque-catalogue {
    display: inline-flex;
    padding: .1rem .75rem;
    margin: .5rem .75rem;
    border: 1px solid #9c9c9c;
    height: 50px;
    width: auto;
}
tr.table-head-grey td:first-child,
tr.table-head-red td:first-child,
tr.table-head-blue td:first-child,
tr.table-head-catalogue td:first-child {
    background: #5858e6;
    border-radius: 8px 0 0 0 !important;
    text-align: center;
}
tr.table-head-grey td,
tr.table-head-red td,
tr.table-head-blue td,
tr.table-head-catalogue td {
    background: #5858e6;
    border-radius: 0;
}
tr.table-head-grey td:last-child,
tr.table-head-red td:last-child,
tr.table-head-blue td:last-child,
tr.table-head-catalogue td:last-child {
    background: #5858e6;
    border-radius: 0 10px 0 0 !important;
}
tr.table-head-blue td:first-child,
tr.table-head-blue td,
tr.table-head-blue td:last-child {
    text-align: left;
    background: #0497f9;
}
tr.table-head-red td:first-child,
tr.table-head-red td,
tr.table-head-red td:last-child {
    text-align: left;
    background: #8c1801;
}
tr.table-head-grey td:first-child,
tr.table-head-grey td,
tr.table-head-grey td:last-child {
    text-align: left;
    background: #e2e7f3;
}
tr td.force-round-bd {
    border-radius: 0 10px 0 0 !important;
}
.rm-card {
    background: #2c85d5;
    color: #FFFFFF;
}
.small-rm-card {
    background: #aaf3ff;
    height: 60px;
    min-width: 220px;
    max-width: 350px;
    margin: 1rem;
    padding-right: 40px;
}
.small-rm-card img {
    max-height: 60px;
}
.max-w-220 {
    max-width: 220px;
}
.js-hide-elem {
    display:none !important;
}
.vignettes-catalogue-container .vignette-catalogue {
    height: 120px;
    width: 290px;
}
.vignettes-catalogue-container .vignette-back {
    background-color: #1e9f23;
    height: 120px;
    width: 100px;
    margin-right: 3.5rem;
    line-height: 32px;
}
.vignettes-catalogue-container .vignette-catalogue span.card-title {
    position: absolute;
    background: #003f91b3;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px 24px;
    border-radius: 0 0 6px 6px;
}
@media only screen and (min-width: 660px) and (max-width: 1200px) {
    .vignettes-catalogue-container .vignette-catalogue {
        width: 220px;
    }
    .vignettes-catalogue-container .vignette-back {
        margin-right: 2.2rem;
    }
}
@media only screen and (max-width: 660px) {
    .vignettes-catalogue-container .vignette-catalogue {
        width: 210px;
    }
    .vignettes-catalogue-container .vignette-back {
        margin-right: 1rem;
    }
    .vignettes-catalogue-container .vignette-back {
        height: 100px;
    }
}
.quantity-navbar-badge {
    border-radius: 50% !important;
    width: 1.3rem;
    min-width: auto !important;
    margin-top: 2.1rem;
    position: absolute;
    margin-left: -.5rem !important;
}
@media only screen and (min-width: 380px) and (max-width: 700px) {
    .hide-home-container-med-btw-down {
        display: none;
    }
}
@media only screen and (max-width : 1000px) {
    .hide-home-container-med-down {
        display: none;
    }
}
@media only screen and (max-width : 992px) {
    .section.head-page {
        height: 100vh !important;
    }
    .quantity-navbar-badge {
        width: 1.2rem;
        margin-top: .75rem;
        margin-left: -.4rem !important;
    }
    tr.table-head-grey td:last-child,
    tr.table-head-red td:last-child,
    tr.table-head-blue td:last-child,
    tr.table-head-catalogue td:last-child {
        border-radius: 0  0 0 10px !important;
    }
}
.pt-separator {
    margin: auto .5rem;
}
@media only screen and (max-width: 600px) {
    ul.stepper .step:not(:last-of-type)::after {
        background-color: transparent !important;
    }
    .pt-separator {
        margin: auto .15rem;
    }
    .liste-joueurs {
        flex-direction: column;
    }
    h1 {
        font-size: 2.65rem;
    }
    .profil_details_icon {
        position: absolute;
        width: 100%;
        height: 80px;
        left: 0;
        top: 0;
        border-radius: 8px 8px 0 0;
    }
    .profil_details > .col {
        margin-left: 0 !important;
    }
    .profil_details > .col:nth-child(2) {
        margin-top: 80px !important;
    }
    .block-overlay {
        width: 90%;
    }
    .align-desktop-mobile-left {
        float: none !important;
        text-align: center;
        display: block;
        margin: 0 auto;
    }
    .align-desktop-mobile-right {
        float: none;
        text-align: center;
        display: block;
        margin: 5% auto 2% auto;
    }
    .backto_btn {
        margin: 8px 0 0 4px;
        float: left;
    }
    .backto_btn i {
        line-height: 40px !important;
    }
    .mg-bot-5-mobile {
        margin-bottom: 5% !important;
    }
    .modal {
        width:95% !important;
    }
    .center-align-mobile {
        text-align: center;
    }
    ul.stepper .step .step-content {
        margin-left: 0px !important;
    }
    button.js-maintenance {
        margin-top: 1.25em;
    }
    .modal .modal-content {
        padding: 24px 14px;
    }
}
@media only screen and (min-width: 1000px) {
    #modal-stats-contributeurs {
        min-width: 1000px;
    }
}
@media only screen and (min-width: 601px) {
    .align-desktop-mobile-left {
        float: left;
        text-align: initial;
    }
    .left-on-desktop,
    .align-desktop-mobile-right {
        float: right;
        text-align: initial;
    }
    .premium-minimal-text,
    .infos-minimal-text {
        display: inline-block;
        padding: .75rem;
        background: #fff6e9;
        border-radius: 8px;
        vertical-align: middle;
    }
    .infos-minimal-text {
        background: #e9f9ff;
        display: initial;
    }
    .mg-left-2-not-mobile {
        margin-left: 2%;
    }
}
@media only screen and (min-width: 601px) and (max-width: 994px) {
    .backto_btn {
        margin: 0 0 0 10px;
        float: left;
    }
}

@media only screen and (min-width: 995px) {
    .backto_btn {
        margin-top: 3.2em;
        position: absolute;
        left: 270px;
        z-index: 999 !important;
    }
}
@media only screen and (max-width: 1315px) {
    .img_catalogue {
        max-height: 75px !important;
    }
}
.vignette-ligne-transports {
    width: 50px;
    height: 35px;
    font-family: "CeraRoundPro",Arial,SansSerif,serif;
    font-size: 1.5rem;
}
.vignette-ligne-transports-container a {
    display: inline-block;
    margin: .75em 0 .5em 1em;
}
.vignette-transports-alerte {
    position: absolute;
    font-size: 1.3rem;
    margin: 50px 0 0 60px !important;
}
.dashboard-card {
    display: inline-block;
    width: 280px;
    height: 140px;
    margin: 1em;
}
.dashboard-card.card-image-top .banner-card {
    position: absolute;
    top: -95px;
    left: 0;
    height: 100px;
    width: 100%;
    background-size: cover !important;
    border-radius: 8px 8px 0 0;
}
.dashboard-card.card-image-top .footer-card {
    height: 40px;
    line-height: 40px;
}
.dashboard-card.card-image-top .footer-card:last-child {
    border-radius: 0 0 8px 8px;
}
.dashboard-card.card-image-top {
    margin-top: 125px;
    margin-bottom: 40px;
}
.messages-list {
    height: auto;
    max-height: 600px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.left-messages-col,
.right-messages-col {
    border: 1px solid #626262;
}
.left-messages-col {
    border-radius: 6px 0 0 6px;
}
.right-messages-col {
    border-radius: 0 6px 6px 0;
}
.fix-pad {
    padding: 0 .75rem;
}
.alliances-events-list li .small-badge {
    background: #95cdff;
}
.list-alliance-1 {
    font-size: 15px;
}
.list-alliance-1 li:not(.cd-item) {
    padding: .85rem .5rem;
}
.list-alliance-1 li:not(.cd-item):hover,
.list-alliance-1 li:not(.cd-item):focus {
    background: #dcdcdc !important;
}
.list-alliance-1.blue-light li:not(.cd-item):hover,
.list-alliance-1.blue-light li:not(.cd-item):focus {
    background: #2a81ce !important;
}
.first_title_block {
    background: linear-gradient(90deg, #1774c4 20%, #3b9bf0 80%);
    color: white;
    min-height: 55px;
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
}
.sub_content_title {
    margin-top: 50px;
}
.indigo-1 {
    background: var(--ri5-color-primary-hsl) !important;
}
#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 15px;
    margin-left: 30px;
    visibility: hidden;
}
.desc_content {
    border-left: 8px solid #1565c0;
    min-height: 100px;
    height: auto;
    max-height: 300px;
    overflow-x: auto;
    width: 95%;
    padding: 12px 10px;
}
.fixed-action-btn {
    right: 80px;
    bottom: 20px;
}
.action-contexte {
    width: 220px;
}
.red-light-bg {
    background: #fff3f3;
}
.svg-icon-noresult {
    height: 55px;
}
.catalogue-prix-container {
    width: 100%;
    max-width: 350px;
}
#tab > [class*="wtab-selected"] {
    background-color: #f0f0f0 !important;
    border: 1px solid #d0d0d0 !important;
}
#register-form {
    background: #f2f2f2;
    border: 2px solid #114291;
    border-radius: 9px;
    padding: 1.5em 0 1em 0;
}
.large-underline {
    box-shadow: inset 0 -0.45em 0 #C3C9FF;
    transition: box-shadow .5s ease;
}
.large-underline:hover {
    box-shadow: inset 0 -1.25em 0 #C3C9FF;
}
/* Helpers */
td.center-align { text-align: center !important; }
.med-line-height { line-height: 25px; }
.nowrap { white-space: nowrap; }
.ws-initial { white-space: initial; }
.ws-normal { white-space: normal; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.hidden { display: none; }
.d-block { display: block; }
.d-grid { display: grid; }
.d-flex { display: flex; }
.d-inline { display: inline !important; }
.flex-col { flex-direction: column; }
.inline-b,
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex; }
.ps-relative { position: relative !important; }
.ps-absolute { position: absolute !important; }
.ps-initial { position: initial !important; }
.d-flow-root { display: flow-root; }
.bold, strong { font-weight: 600; }
.italic { font-style: italic; }
.wd-auto { width: auto !important; }
.grecaptcha-badge { visibility: hidden; }
.align-bot { vertical-align: bottom; }
.align-text-bot { vertical-align: text-bottom; }
.align-text-top { vertical-align: text-top; }
.align-md { vertical-align: middle; }
.align-sub { vertical-align: sub; }
.align-initial { vertical-align: initial; }
.align-inherit { vertical-align: inherit; }
.align-top { vertical-align: top; }
.underline { text-decoration: underline; }
.m-auto { margin: auto; }
.no-margin { margin: 0 !important; }
.no-marg-top { margin-top: 0 !important; }
.no-marg-bot { margin-bottom: 0 !important; }
.no-marg-left { margin-left: 0 !important; }
.no-pad-left { padding-left: 0 !important; }
.no-pad-right { padding-right: 0 !important; }
.no-pad-bot { padding-bottom: 0 !important; }
.basic-font { font-family: Arial, sans-serif; }
.line-spacer { line-height: 1.75rem; }
.xs-input { max-width: 80px; }
.no-float { float: none !important; }
.z-index-2 { z-index: 2; }
@media only screen and (min-width: 993px) {
    .breadcrumb-container {
        margin-left: -300px !important;
    }
}
@media only screen and (max-width: 600px) {
    .center-block-on-small-only {
        display: block !important;
        margin-left: auto;
        margin-right: auto;
    }
    .block-on-med-mobile,
    .block-on-mobile {
        display: block !important;
        padding: 5px 0;
    }
    .justify-content-center-mobile { justify-content: center; }
}
/* Improve flexbox collapsible for reports list */
span.second_block_title_report {
    flex: 1 1 200px;
    text-align: center;
}
.collapsible-header.title_block_report {
    flex-wrap: wrap;
}
/* Chip widget */
.chip.custom-chip {
    width: 240px;
    height: 57px;
    border-radius: 57px;
    line-height: 57px;
    padding: 0;
    color: black;
}
.chip.custom-chip.chip-grey {
    background: #c4c4c4;
}
.chip.custom-chip.chip-green {
    background: #d6ffda;
}
.chip.custom-chip.chip-red {
    background: #ffd6d6;
}
.chip.custom-chip.chip-red {
    background: #ffd6d6;
}
.chip.custom-chip.chip-blue {
    background: #d6e8ff;
}
.chip.custom-chip.chip-brown {
    background: #9f7e7242;
}
.chip.custom-chip.disabled {
    background: #b3b3b3;
}
.chip.custom-chip > span {
    margin-left: 10px;
    font-size: 1.12em;
}
/* Badge edit */
span.badge {
    line-height: 25px;
    height: 25px;
}
span.badge.new {
    font-size: .9rem;
}
span.badge.new::after {
    content: "";
}
/* Fix background color disabled button */
.btn.disabled,
.btn-floating[disabled],
.btn-flat.disabled,
.btn-flat.btn-flat[disabled] {
    background-color: #c9c9c9 !important;
    color: #626262 !important;
}
/* Force .center-block class */
.center-block {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* fadein/fadeout */
@-webkit-keyframes fadeout {
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes fadeout {
    0% {opacity:1;}
    100% {opacity:0;}
}
.fadeOut {
    opacity:0;
    -moz-animation   : fadeout 1s linear;
    -webkit-animation: fadeout 1s linear;
    animation        : fadeout 1s linear;
}
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
.fadeIn {
    opacity:1;
    -moz-animation   : fadeout 1s linear;
    -webkit-animation: fadeout 1s linear;
    animation        : fadeout 1s linear;
}
.player-card .player-card-footer {
    bottom: 0;
    left: 0;
    height: 50px;
    line-height: 50px;
    background: #071;
    border-radius: 0 0 8px 8px;
}
.liste-joueurs .player-card,
ul.liste-constributeurs-alliance li:nth-child(2n+1) {
    background: rgba(221, 221, 221, 0.5);
}
.amber-normal-btn,
.amber-normal-container,
.liste-joueurs .player-card,
.small-rm-card.amber-card {
    background: #884600 !important;
}
.green-normal-btn,
.green-normal-container,
.small-rm-card.green-card {
    background: #004601 !important;
}
.amber-normal-btn:hover,
.liste-joueurs .player-card:hover {
    background: #7c4000 !important;
}
ul.liste-constributeurs-alliance li {
    color: #000000;
    line-height: 52px;
    padding: 0 1rem;
}
.player-card {
    min-height: 110px !important;
    padding: 1rem .5rem !important;
    width: 280px;
    flex-direction: column;
    margin-bottom: 1.5rem !important;
    height: auto !important;
}
.small-badge {
    background: #d1d1d1;
    padding: 4px 10px;
}
.badge.badge-large {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 2rem;
    border-radius: 0 6px 6px 0;
}
.mail-success-img {
    max-height: 180px;
}
.light-border {
    border: 1px solid #c4c4c4;
}
/* carte secteur virtuel */
.card-secteur {
    width: 280px;
    min-height: 200px;
    margin: 1.5rem 1rem;
    padding-top: 70px;
}
.card-secteur span {
    top: 0;
    left: 0;
    min-height: 50px;
    width: 100%;
}
/* steps grid */
.rpp-stepper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
}
.rpp-stepper .rpp-stepper-divider {
    align-self: center;
    height: 2px;
    background-color: #b8b4b4;
}
.rpp-stepper .rpp-stepper-item {
    outline: none;
    box-shadow: none;
    text-decoration: none;
    padding: 0;
    width: max-content;
    width: -moz-max-content;
    width: -webkit-max-content;
    transition: ease-in-out;
    display: grid;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    position: relative;
    border: 2px solid #b8b4b4;
    font-size: 1.1rem;
    cursor: default;
}
.rpp-stepper .rpp-stepper-item:focus,
.rpp-stepper .rpp-stepper-item *:focus {
    outline: none;
}
.rpp-stepper .rpp-stepper-item.rpp-stepper-item-completed {
    background: #39b54a;
    border: 2px solid #39b54a;
}
.rpp-stepper .rpp-stepper-item.rpp-stepper-item-completed .rpp-stepper-item-content {
    display: none;
}
.rpp-stepper .rpp-stepper-item.rpp-stepper-item-completed::after {
    align-self: center;
    content: "\2713";
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.1rem;
    text-align: center;
}
.rpp-stepper .rpp-stepper-item.rpp-active {
    background: #1e88e5;
    color: #ffffff;
    border-color: #656565;
}
.rpp-stepper .rpp-stepper-item.rpp-stepper-item-pending {
    color: #3e3e3e;
    background: #ffffff;
}
.rpp-stepper .rpp-stepper-item .rpp-stepper-item-content {
    text-align: center;
    align-self: center;
}
/* UI indicators */
.container-indicators {
    height: 6px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 180px;
}
.container-indicators span {
    position: relative;
    height: 100%;
    width: 100%;
    background: lightgrey;
    border-radius: 5px;
}
.container-indicators span:not(:first-child):not(:last-child) {
    margin: 0 2px;
}
.container-indicators span:first-child {
    margin-right: 2px;
}
.container-indicators span:last-child {
    margin-left: 2px;
}
.container-indicators span.active:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 4px;
}
.container-indicators span.low.active {
    background-color: #ff4757;
}
.container-indicators span.medium-1.active {
    background-color: #ffb42a;
}
.container-indicators span.medium-2.active {
    background-color: #23c464;
}
.container-indicators span.high.active {
    background-color: #1a934d;
}
.text-indicators {
    font-size: 20px;
    font-weight: 500;
    display: none;
    margin-bottom: -10px;
}
.text-indicators.low {
    color: #ff4757;
}
.text-indicators.medium-1 {
    color: #ff8400;
}
.text-indicators.medium-2 {
    color: #ffb700;
}
.text-indicators.high {
    color: #23ad5c;
}
/* status colors */
.feu_1 {
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background: green;
    display: inline-block;
}
.feu_2 {
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background: orange;
    display: inline-block;
}
.feu_3 {
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background: red;
    display: inline-block;
}
/* filter link */
.container-filter-btn {
    display: inline-block;
    border-radius: 16px;
}
.filter-btn {
    margin: 0 12px 16px 0;
    border: 1px solid transparent;
    position: relative;
    height: 32px;
    border-radius: 16px;
    padding: 6px 8px;
    outline: 0;
    cursor: pointer;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    text-decoration: none;
    -moz-user-select: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 1rem;
    min-width: 64px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    -moz-appearance: none;
    justify-content: center;
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 500;
}
.filter-btn.c1:hover {
    background-color: rgba(14, 154, 167, 0.2) !important;
}
.filter-btn.c2:hover {
    background-color: rgba(48, 79, 254, 0.2) !important;
}
.filter-btn.c3:hover {
    background-color: rgba(101, 64, 193, 0.2) !important;
}
.filter-btn.c4:hover {
    background-color: rgba(215, 35, 101, 0.2) !important;
}
.filter-btn.c5:hover {
    background-color: rgba(174, 20, 10, 0.2) !important;
}
.filter-btn.c6:hover {
    background-color: rgba(2, 119, 189, 0.2) !important;
}
/* externals icon
/* externals icons */
.svg-icon {
    height: 35px;
    width: 60px;
    display: inline-block;
}
.med-icon {
    height: 30px;
}
.hammer-icon {
    background: url('/ressources/images/public/icons/svg/hammer.svg') 43% 50% no-repeat;
    background-size: contain;
}
.buildings-icon {
    background: url('/ressources/images/public/icons/svg/buildings.svg') 43% 50% no-repeat;
    background-size: contain;
}
.money-icon {
    background: url('/ressources/images/public/icons/svg/euro.svg') 43% 50% no-repeat;
    background-size: contain;
    height: 25px;
}
.fence-icon {
    background: url('/ressources/images/public/icons/svg/fence.svg') 43% 50% no-repeat;
    background-size: contain;
}
.sketch-icon {
    background: url('/ressources/images/public/icons/svg/sketch.svg') 43% 50% no-repeat;
    background-size: contain;
}
.wheelbarrow-icon {
    background: url('/ressources/images/public/icons/svg/wheelbarrow.svg') 43% 50% no-repeat;
    background-size: contain;
}
.map-icon {
    background: url('/ressources/images/public/icons/svg/map.svg') 43% 50% no-repeat;
    background-size: contain;
}
.cup-icon {
    background: url('/ressources/images/public/icons/svg/cup.svg') 43% 50% no-repeat;
    background-size: contain;
    height: 25px;
}
.cup-silver-icon {
    background: url('/ressources/images/public/icons/svg/cup-silver.svg') 43% 50% no-repeat;
    background-size: contain;
    height: 25px;
}
.cup-bronze-icon {
    background: url('/ressources/images/public/icons/svg/cup-bronze.svg') 43% 50% no-repeat;
    background-size: contain;
    height: 25px;
}
.hook-icon {
    background: url('/ressources/images/public/icons/svg/hook.svg') 43% 50% no-repeat;
    background-size: contain;
}
.home-icon {
    background: url('/ressources/images/public/icons/svg/house.svg') 43% 50% no-repeat;
    background-size: contain;
}
.meteo-icon {
    background: url('/ressources/images/public/icons/svg/cloudy.svg') 43% 50% no-repeat;
    background-size: contain;
}
.office-icon {
    background: url('/ressources/images/public/icons/svg/responsive.svg') 43% 50% no-repeat;
    background-size: contain;
}
.materiel-icon {
    background: url('/ressources/images/public/icons/svg/rm.svg') 43% 50% no-repeat;
    background-size: contain;
}
.domaine-icon {
    background: url('/ressources/images/public/icons/svg/ski.svg') 43% 50% no-repeat;
    background-size: contain;
}
.station-icon {
    background: url('/ressources/images/public/icons/svg/wood.svg') 43% 50% no-repeat;
    background-size: contain;
}
.tps-icon {
    background: url('/ressources/images/public/icons/svg/school-bus.svg') 43% 50% no-repeat;
    background-size: contain;
}
.challenge-icon {
    background: url('/ressources/images/public/icons/svg/goal.svg') 43% 50% no-repeat;
    background-size: contain;
}
.mail-icon {
    background: url('/ressources/images/public/icons/svg/marketing.svg') 43% 50% no-repeat;
    background-size: contain;
}
.classement-icon {
    background: url('/ressources/images/public/icons/svg/cup-rounded.svg') 43% 50% no-repeat;
    background-size: contain;
}
.support-icon {
    background: url('/ressources/images/public/icons/svg/support.svg') 43% 50% no-repeat;
    background-size: contain;
}
.teamwork-icon {
    background: url('/ressources/images/public/icons/svg/teamwork.svg') 43% 50% no-repeat;
    background-size: contain;
}
.conversation-icon {
    background: url('/ressources/images/public/icons/svg/conversation.svg') 43% 50% no-repeat;
    background-size: contain;
}
.talk-icon {
    background: url('/ressources/images/public/icons/svg/talk.svg') 43% 50% no-repeat;
    background-size: contain;
}
.megaphone-icon {
    background: url('/ressources/images/public/design/megaphone.png') 43% 50% no-repeat;
    background-size: contain;
}
.stats-icon {
    background: url('/ressources/images/public/icons/svg/growth.svg') 43% 50% no-repeat;
    background-size: contain;
}
.vignette-tri {
    display: inline-grid;
    margin: .25em .75em .5em .75em;
    min-width: 160px;
    width: auto;
    max-width: 185px;
    padding: 0 1.25em;
    background: #686868;
    height: 70px;
}
.vignette-tri i {
    position: absolute;
    bottom: .6em;
    right: .2em;
}
.vignette-tri.active {
    border: 1px solid #00a200;
}
.vignette-tri.active > i {
    display: block !important;
}
/* Vignettes enneigeurs */
.vignette_planning_canon {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    margin: 20px 0 20px 30px;
    position: relative;
    box-shadow: 0 2px 0 rgba(0,0,0,.2);
    background: #f7f7f7 !important;
}
.header_vignette {
    text-align: center;
    font-weight: bold;
    top: 0;
    position: absolute;
    height: 35px;
    line-height: 35px;
    display: flex;
    margin: 0;
    width: 100%;
    justify-content: center;
    padding: 5px 0;
}
.body-vignette {
    display: block;
    position: relative;
    margin-top: 25px;
    padding: 15px 10px;
}
.section-vignette {
    display: block;
    margin-top: 10px;
}
.vignette_planning_canon .vignette_corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 2em;
    height: 2em;
    background-color: #d7d7d7;
}
.vignette_planning_canon .vignette_corner .vignette_corner_triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2em 2em 0;
    border-color: transparent #fff transparent transparent;
}
.title_vignette {
    width: 100%;
}
.sec-vign-1 {
    font-size: 12px;
    line-height: 25px;
}
.sec-vign-2 {
    line-height: 20px;
}
.info-enneigement-canons-texte {
    display: block;
    margin-top: 4%;
    background: url('../ressources/images/public/design/canon_work.svg') no-repeat 0 50%;
    background-size: 120px 120px;
    padding-left: 130px;
    width: 100%;
    height: 110px;
}
/* Animation retenue eau */
.water-lvl-img {
    display: block;
    width: 18em;
    height: 10em;
    border: .3em solid #3A3A3A;
    border-top: none;
    box-sizing: border-box;
    position: relative;
    margin-left: 35px;
    margin-top: 20px;
}
.water-lvl-img .liquid {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
.water-lvl-img .liquid svg {
    height: 30em;
    position: absolute;
    animation: waves 5s infinite linear;
}
@keyframes waves {
    0% { transform:translateX(-15em); }
    100% { transform:translateX(0); }
}
.water-lvl-img .label {
    position: absolute;
    color: white;
    line-height: 2em;
    width: 4.2em;
    text-align: center;
    border-radius: .5em;
    margin-bottom: -1em;
    background-color: #3A3A3A;
    left: -4.9em;
}
.water-lvl-img .label:before {
    content: "";
    position: absolute;
    background-color: #3A3A3A;
    width: 0.7em;
    height: 0.7em;
    top: .65em;
    right: -0.3em;
    transform: rotate(45deg);
}
.water-lvl-img .indicator {
    position: absolute;
    background-color: #3A3A3A;
    height: 0.3em;
    width: 1em;
    margin-bottom: -0.15em;
}
.water-lvl-img .indicator[data-value="25"] {
    bottom: 25%;
}
.water-lvl-img .indicator[data-value="50"] {
    bottom: 50%;
}
.water-lvl-img .indicator[data-value="75"] {
    bottom: 75%;
}
@media only screen and (min-width: 993px) and (max-width: 1540px) {
    .water-lvl-img {
        width: 14em !important;
        height: 8em !important;
    }
}
@media only screen and (min-width: 601px) and (max-width: 992px) {
    .water-lvl-img {
        width: 12em !important;
        height: 6em !important;
    }
    .modal {
        width: 95% !important;
    }
    .block-on-med-mobile {
        display: block !important;
    }
}
/* Pagination grid.js */
.gridjs-summary {
    font-size: .975rem;
    margin: 10px 0;
    color: #727272;
}
.gridjs-pages {
    display: block;
    text-align: center;
    padding: 2% 0;
}
.gridjs-pages button {
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    vertical-align: top;
    height: 30px;
    margin: 0 4px;
}
.gridjs-pages button {
    color: #444;
    display: inline-block;
    font-size: 1.2rem;
    padding: 0 10px;
    line-height: 30px;
}
.gridjs-pages button:disabled {
    background-color: transparent !important;
}
.gridjs-pages button.active {
    color: #fff;
}
.gridjs-pages button.active {
    background-color: #3483cb !important;
}
.gridjs-pages button.disabled {
    cursor: default;
    color: #999;
}
.gridjs-pages button i {
    font-size: 2rem;
}
.gridjs-pages button.pages {
    display: inline-block;
    float: none;
}
/* Fix to display short icon in grid.js table */
.gridjs-th-content,
button.gridjs-sort {
    display: inline;
    padding: 0;
}
.colored-top-border::before {
border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: linear-gradient(to right, #ff8983 17.85%, #7f0e7f 53.28%, #007a65 100%);
    content: "";
    height: 4px;
    width: 100%;
}
/* CSS of CKeditor */
.demo-update__controls {
     display: flex;
     flex-direction: row;
     align-items: center;
}
.demo-update__chart {
    margin-right: 1em;
}
.demo-update__chart__circle {
    transform: rotate(-90deg);
    transform-origin: center;
}
.demo-update__chart__characters {
    fill: #2b96d9;
    font-size: 13px;
    font-weight: bold;
}
.demo-update__words {
    flex-grow: 1;
    opacity: .5;
    display: none;
}
.demo-update__limit-close .demo-update__chart__circle {
    stroke: hsl( 30, 100%, 52% );
}
.demo-update__limit-exceeded .demo-update__chart__circle {
    stroke: hsl( 0, 100%, 52% );
}
.demo-update__limit-exceeded .demo-update__chart__characters {
    fill: hsl( 0, 100%, 52% );
}
.icons-in-select .dropdown-content li span,
.icons-in-select .select-wrapper input { font-family: 'Material Icons'; }
/* Pricing cards */
.card-pricing{
    position: relative;
    width: 300px;
    height: auto;
    background: linear-gradient(-45deg,#dc61ff,#2667ff);
    border-radius: 15px;
    margin: 0 auto;
    padding: 40px 20px;
    -webkit-box-shadow: 0 10px 15px rgba(0,0,0,.1) ;
    box-shadow: 0 10px 15px rgba(0,0,0,.1) ;
    -webkit-transition: .5s;
    transition: .5s;
}
@media only screen and (min-width: 992px) {
    .card-pricing:hover{
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    .msg-box {
        display: flex;
        height: calc(100% - 51px);
    }
    .block-on-desktop {
        display: block;
    }
}
@media only screen and (max-width: 991px) {
    .messages-list {
        max-height: 330px;
    }
}
.col:nth-child(1) .card-pricing ,
.col:nth-child(1) .card-pricing .title .material-icons {
    background: linear-gradient(-45deg,#f403d1,#64b5f6);
}
.col:nth-child(2) .card-pricing,
.col:nth-child(2) .card-pricing .title .material-icons {
    background: linear-gradient(-45deg,#dc61ff,#2667ff);
}
.col:nth-child(3) .card-pricing,
.col:nth-child(3) .card-pricing .title .material-icons {
    background: linear-gradient(-45deg,#24ff72,#9a4eff);
}
.card-pricing::before {
    content: '';
    position: absolute;
    bottom: 5.2rem;
    left: 3.1rem;
    width: 200px;
    height: 42%;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    -webkit-transform: skewY(-5deg) scale(1.5);
    transform: skewY(-5deg) scale(1.5);
}
.card-pricing .title .material-icons {
    color:#fff;
    font-size: 60px;
    width: 100px;
    height: 100px;
    border-radius:  50%;
    text-align: center;
    line-height: 100px;
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,.1) ;
    box-shadow: 0 10px 10px rgba(0,0,0,.1) ;
}
.card-pricing .title h2 {
    position: relative;
    margin: 8px 0 28px;
    padding: 0;
    color: #fff;
    font-size: 28px;
    z-index: 2;
}
.price,
.pricing-option {
    position: relative;
    z-index: 2;
}
.price h4 {
    margin: 0;
    padding: 20px 0;
    color: #fff;
    font-size: 60px;
}
.pricing-option ul {
    margin: 0;
    padding: 0;
}
.pricing-option ul li {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    color: #fff;
    font-size: 16px;
}
.card-pricing a {
    position: relative;
    z-index: 2;
    background: #fff;
    color : black;
    width: 150px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    display: block;
    text-align: center;
    margin: 20px auto 0 ;
    font-size: 16px;
    cursor: pointer;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}
.pricing-btn:hover {
    text-decoration: none;
    background: #f5d1fd;
    -webkit-transition: background 250ms linear;
    -ms-transition: background 250ms linear;
    transition: background 250ms linear;
}
.pricing-offer {
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    line-height: 36px;
    width: 100%;
    border-radius: 10px 10px 0 0;
    background: #2440ae;
    text-align: center;
}
/* UI indicators */
.container-indicators {
    height: 5px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 230px;
}
.container-indicators span {
    position: relative;
    height: 100%;
    width: 100%;
    background: lightgrey;
    border-radius: 5px;
}
.container-indicators span:not(:first-child):not(:last-child) {
    margin: 0 2px;
}
.container-indicators span:first-child {
    margin-right: 2px;
}
.container-indicators span:last-child {
    margin-left: 2px;
}
.container-indicators span.active:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 4px;
}
.container-indicators span.low.active {
    background-color: #ff4757;
}
.container-indicators span.medium-1.active {
    background-color: #ffb42a;
}
.container-indicators span.medium-2.active {
    background-color: #23c464;
}
.container-indicators span.high.active {
    background-color: #1a934d;
}
.text-indicators {
    font-size: 20px;
    font-weight: 500;
    display: none;
    margin-bottom: -10px;
}
.text-indicators.low {
    color: #ff4757;
}
.text-indicators.medium-1 {
    color: #ff8400;
}
.text-indicators.medium-2 {
    color: #ffb700;
}
.text-indicators.high {
    color: #23ad5c;
}
/* Number input with controls */
.quantity {
    position: relative;
    display: inline-block;
    color: #7f7f7f;
}
.quantity input[type=number] {
    transition: border 0.3s ease-in-out, color 0.3s ease-in-out;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    box-shadow: none;
    outline: none;
    width: 60px;
    height: 34px;
    text-align: center;
    float: right;
    border: 1px solid #c7c7c7;
    background-color: #fff;
    color: #342f2f !important;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
.quantity input[type=number]:focus {
    border-color: #57b8f6 !important;
}
.quantity input[type=number]:hover {
    border-color: #a5a5a5;
}
.speed-button,
.quantity-button {
    width: 39px;
    height: 34px;
    display: inline-block;
    float: right;
    position: relative;
    cursor: pointer;
}
.speed-button::before, .speed-button::after,
.quantity-button::before, .quantity-button::after {
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 7px);
    content: "";
    width: 14px;
    height: 2px;
    background-color: currentColor;
    display: block;
}
.speed-remove::after,
.quantity-remove::after {
    display: none;
}
.speed-add::after,
.quantity-add::after {
    transform: rotate(90deg);
}
/* Scratch Card */
.sc__inner {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sc__wrapper {
    display: block;
    width: 100%;
    height: 310px;
    max-width: 350px;
    margin: 0 auto;
    border: 5px solid white;
}
.sc__container {
    position: relative;
    overflow: hidden;
    height: 300px;
    max-width: 350px;
}
.sc__container > img {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
}
.sc__container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 350px;
}
.sc__infos {
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    font-weight: bold;
    font-size: 18px;
}
/* Checkbox UI */
label.chkbx-ui {
    margin: 20px;
    cursor: pointer;
    display: inline-flex;
    width: 120px;
}
label.chkbx-ui input[type="radio"] {
    display: none;
}
label.chkbx-ui .icon-box {
    position: relative;
    display: flex;
    width: 120px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    background-color: #464857;
    color: #fff;
    border-radius: 6px;
    font-size: 21px;
    transition: 0.5s;
    user-select: none;
}
label.chkbx-ui input[type="radio"]:checked ~ .icon-box {
    background: linear-gradient(138deg,#4b9aff,#0b5579);
    color: #fff;
}
label.chkbx-ui .icon-box span {
    margin: 5px;
    font-size: 18px;
}
label.chkbx-ui.lg-html {
    width: 170px;
    margin: 20px 8px;
}
label.chkbx-ui .icon-box.lg-html {
    width: 170px;
    padding: 20px 0;
}
label.chkbx-ui .icon-box.lg-html span {
    margin: 5px 0;
    font-size: 16px;
}
label.chkbx-ui.circle {
    width: auto;
    margin: 20px 0;
}
label.chkbx-ui .icon-box.circle {
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background: #994d00;
}
label.chkbx-ui.circle input[type="radio"]:checked ~ .icon-box {
    background: linear-gradient(138deg,#cc7300,#4f2800);
    color: #fff;
}
/* Percentage circle */
.flex-wrapper {
    display: flex;
    flex-flow: row nowrap;
}
.single-chart {
    width: 33%;
    justify-content: space-around;
}
.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
}
.circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
}
.circle-chart {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}
@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}
.circular-chart.orange-chart .circle-chart {
    stroke: #ff9f00;
}
.circular-chart.mid-green-chart .circle-chart {
    stroke: #30a55b;
}
.circular-chart.green-chart .circle-chart {
    stroke: #1f9c3e;
}
.percentage-circle-chart {
    fill: #666;
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
}
/* Shine animation */
.shine-anim-container {
    position: relative;
    overflow: hidden;
    padding: 1rem 3rem;
    text-decoration: none;
}
.shine-anim-container::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    -webkit-animation: shine 4s ease-in-out infinite;
    animation: shine 4s ease-in-out infinite;
}
@-webkit-keyframes shine {
    0% {
        left: -100%;
        transition-property: left;
    }
    11.5044247788%, 100% {
        left: 100%;
        transition-property: left;
    }
}
@keyframes shine {
    0% {
        left: -100%;
        transition-property: left;
    }
    11.5044247788%, 100% {
        left: 100%;
        transition-property: left;
    }
}
/* Input radio v2 */
.radio-option-btn {
    width: 220px;
}
div.radio-with-Icon {
    display: block;
}
div.radio-with-Icon p.radioOption-Item {
    display: inline-block;
    width: 100px;
    height: 120px;
    box-sizing: border-box;
    margin: 14px 8px;
    border: none;
}
div.radio-with-Icon p.radioOption-Item label {
    display: block;
    height: 100%;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--ri5-color-primary-hsl);
    color: #de1831;
    cursor: pointer;
    opacity: .8;
    transition: none;
    font-size: 13px;
    text-align: center;
    margin: 0 !important;
}
div.radio-with-Icon p.radioOption-Item label:hover, div.radio-with-Icon p.radioOption-Item label:focus, div.radio-with-Icon p.radioOption-Item label:active {
    opacity: .5;
    background-color: var(--ri5-color-primary-hsl-light-contrast);
    color: #fff;
    margin: 0 !important;
}
div.radio-with-Icon p.radioOption-Item label::after, div.radio-with-Icon p.radioOption-Item label:after, div.radio-with-Icon p.radioOption-Item label::before, div.radio-with-Icon p.radioOption-Item label:before {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}
div.radio-with-Icon p.radioOption-Item label i.fa {
    display: block;
    font-size: 50px;
}
div.radio-with-Icon p.radioOption-Item input[type="radio"] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
div.radio-with-Icon p.radioOption-Item input[type="radio"]:active ~ label {
    opacity: 1;
}
div.radio-with-Icon p.radioOption-Item input[type="radio"]:checked ~ label {
    opacity: 1;
    border: none;
    background-color: var(--ri5-color-primary-hsl-light-contrast);
    color: #fff;
}
div.radio-with-Icon p.radioOption-Item input[type="radio"]:hover, div.radio-with-Icon p.radioOption-Item input[type="radio"]:focus, div.radio-with-Icon p.radioOption-Item input[type="radio"]:active {
    margin: 0 !important;
}
div.radio-with-Icon p.radioOption-Item input[type="radio"] + label:before, div.radio-with-Icon p.radioOption-Item input[type="radio"] + label:after {
    margin: 0 !important;
}
div.radio-with-Icon p.radioOption-Item.extended-input {
    width: 220px;
    height: 180px;
}
div.radio-with-Icon p.radioOption-Item.extended-input label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 15px;
}
/* Switch input */
.radio-switch {
    position: relative;
    display: inline-block;
    padding: var(--radio-switch-padding);
    border-radius: calc(var(--radio-switch-radius) * 1.4);
    background-color: hsl(var(--ri5-color-bg-darker-hsl));
}
.radio-switch:focus-within, .radio-switch:active {
    box-shadow: 0 0 0 2px hsla(var(--ri5-color-contrast-higher-hsl), 0.15);
}
.radio-switch__item {
    position: relative;
    display: inline-block;
    height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding));
    width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding));
}
.radio-switch__label {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-switch-radius);
    cursor: pointer;
    font-size: var(--ri5-text-sm);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all var(--radio-switch-animation-duration);
}
.radio-switch__input:checked ~ .radio-switch__label {
    color: hsl(var(--ri5-color-white-hsl));
}
.radio-switch__input:focus ~ .radio-switch__label,
.radio-switch__input:checked ~ .radio-switch__label {
    background-color: var(--ri5-color-primary-hsl) !important;
}
.radio-switch__label :not(*):focus-within, .radio-switch__input:focus ~ .radio-switch__label {
    background-color: transparent;
}
.radio-switch__input:checked ~ .radio-switch__marker {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

/* utility classes */
.ri5-sr-only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
}
/* fil inpug */
.file-input {
    display: inline-block;
    text-align: left;
    padding: 16px;
    width: auto;
    max-width: 350px;
    position: relative;
    border-radius: 3px;
}
.file-input > [type='file'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
}
.file-input > .button {
    display: inline-block;
    cursor: pointer;
    background: #e3e3e3;
    padding: 8px 16px;
    border-radius: 2px;
    margin-right: 8px;
}
.file-input:hover > .button {
    background: dodgerblue;
    color: white !important;
    transition: all 0.1s ease-out;
}
.file-input > .label {
    color: #505050;
    white-space: nowrap;
    opacity: .65;
}
.file-input.-chosen > .label {
    opacity: 1;
}
@media only screen and (max-width: 600px) {
    .label {
        display: inline-block;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
    .file-input {
        width: 100%;
    }
}
/* chatbox */
.chat {
    max-width: 700px;
    height: 360px;
    background-color: #fff;
    padding-right: 5px;
    padding-left: 5px;
    margin: 20px auto;
    border-radius: 1rem;
}

/* messages */
.messages {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 385px;
    font-size: .9rem;
}
.message-list {
    overflow-y: scroll;
    max-height: 400px;
}
.message-item {
    background: #374151;
    color: #ffffff;
    padding: 1rem 1rem;
    margin: 14px 0;
    line-height: 1.25rem;
}
.message-item:last-child {
    margin-bottom: 0;
}
.item-primary {
    border-radius: 0 0.75rem 0.75rem 0.75rem;
    margin-right: 2.85rem;
}
.item-primary .small-badge {
    margin-right: .5rem;
}
.item-secondary {
    border-radius: 0.75rem 0.75rem 0 0.75rem;
    margin-left: 2.85rem;
}
.item-secondary .small-badge {
    margin-right: .5rem;
}
.msg-username {
    width: 100%;
    display: block;
    font-weight: bold;
    margin-bottom: .65rem;
}

/* messages input */
.message-input {
    display: flex;
    padding: 20px 0;
}
.message-input input {
    width: 100%;
    padding: 10px;
    border-radius: 2rem;
    border: 1px solid #a5a5a5;
}
.message-input button {
    margin-left: 10px;
    margin-top: 3px;
}
@media only screen and (max-width: 600px) {
    .item-primary {
        margin-right: .25rem;
    }

    .item-secondary {
        margin-left: .25rem;
    }
    .header__notification .bell-icon {
        margin-top: .25rem !important;
    }
}
/*
 * Progress bar indicator
 */
.progress-bar-messages {
    width: 100%;
    height: 5px;
    padding: 2px 0;
    border-radius: .375em .375em 0 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.progress-bar-fill {
    display: block;
    height: 5px;
    background: #aa0a08;
    border-radius: .375em .375em 0 0;
    transition: width 15s ease-in-out;
}
.alert.success .progress-bar-fill {
    transition: width 7s ease-in-out !important;
}
.alert.success .progress-bar-fill {
    background: hsl(99, 91%, 48%);
}
/*
 * Notification
 */
.header__notification {
    display: inline-flex;
    align-items: center;
    height: 64px;
    line-height: 64px;
    margin: 0 10px;
}
.header__notification .bell-icon {
    font-size: 1.75rem;
    margin-top: 1rem;
    position: relative;
    cursor: pointer;
}
.header__notification .bell-icon:hover {
}
.header__notification .bell-icon .notification-number {
    font-size: 0.9rem;
    border-radius: 50%;
    background-color: #bf0000;
    border: 5px solid #bf0000;
    color: #FFFFFF;
}
.header__notification .bell-icon .bell-number {
    position: absolute;
    top: -50%;
    left: 50%;
    height: 22px;
    width: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header__notification .bell-icon .notification__list {
    position: absolute;
    background: #d0eaf4;
    width: 280px;
    list-style-type: none;
    text-align: center;
    left: -127px;
    top: 50px;
    border-radius: 7px;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    max-height: 300px;
    overflow: auto;
}
.header__notification .bell-icon .notification__list:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    left: 50%;
    top: -20px;
    transform: translate(-50%);
}
.header__notification .bell-icon .notification__list__name {
    background: #d0eaf4;
    color: #526873;
    padding: 10px 0;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 1px solid #d0eaf4;
    transition: all 1s ease-in-out;
}
.header__notification .bell-icon .notification__list .large-number {
    font-size: 0.8em;
    border-width: 5px;
}
.header__notification .bell-icon .list__item {
    border-bottom: 1px solid #d0eaf4;
    transition: all .1s ease-in-out;
    padding: .25rem .1rem;
}
.header__notification .bell-icon .list__item .user-image {
    width: 40px;
    height: 40px;
    border-radius: 50px;
}
.header__notification .bell-icon .list__item .notif__messages {
    font-size: .9rem;
    line-height: 1.4;
    padding-left: 10px;
    color: #5b636a !important;
    font-family: Arial, SansSerif, serif;
}
.header__notification .bell-icon .list__item--link {
    display: flex;
    padding: 10px;
    text-decoration: none;
    text-align: left;
    font-size: 0.7em;
    opacity: 1;
    align-items: center;
}
.header__notification .bell-icon .list__item:hover,
.header__notification .bell-icon .list__item:active,
.header__notification .bell-icon .list__item:focus {
    background-color: #c5d9e1;
}
.header__notification .bell-icon .list__item:hover .notif__messages,
.header__notification .bell-icon .list__item:focus .notif__messages,
.header__notification .bell-icon .list__item:active .notif__messages {
    color: #5b636a;
}
.unread__notif {
    height: 10px;
    width: 10px;
    display: inline-block;
    position: absolute;
    background: #1788ff;
    border-radius: 50%;
    left: 0;
    top: .9rem;
}
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -10%, 0);
        transform: translate3d(0, -10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -10%, 0);
        transform: translate3d(0, -10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -10%, 0);
        transform: translate3d(0, -10%, 0);
    }
}
@keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -10%, 0);
        transform: translate3d(0, -10%, 0);
    }
}
.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}
@keyframes zoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}
.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}