/*****************************************
* 0.0 Général 
*     0.1 Fonts
*     0.2 Flash messages
*     0.3 Side menu
*     0.4 Top Menu / Footer
*     0.5 Pagination
*     0.6 Puce
*     0.7 Loaders
*     0.8 Overlay
*     0.9 Scrollbar
*     1.0 Datepicker
*     1.1 Modal
*     1.2 Responsive Menu
* 1.0 Login
* 2.0 Client
*     2.1 Client accueil
*     2.2 Client services
*     2.3 Vue officine
*     2.4 Officine Administratif
*     2.5 Officine contact
*     2.6 Officine contrat creation
*     2.7 Officine factures
*     2.8 Officine photos preuves
* 3.0 Officine
*     3.1 Officine connexion
* Animations
*****************************************/

/*-- 0.0 Général --*/

body {
    margin: 0;
    height: 100vh;
}

#app {
    height: 100%;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #03003C;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.w-50 {
    width: 50%;
}

.w-33 {
    width: 33%;
}

.pos-middle {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.form-control:focus {
    color: #03003C !important;
    background-color: #fff;
    border-color: #8D7E79;
    outline: 0;
    box-shadow: 0 0 0 0rem rgb(13 110 253 / 25%);
}

.relative {
    position: relative;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    background-image: none;
    border-color: #ff4d4d;
}

.py-4 {
    position: relative;
    padding-top: 96px;
    padding-bottom: 64px;
}

.h-100vh {
    height: 100vh;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-group-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.little-loader {
    width: 38px;
    height: 38px;
    border: 5px solid #FFF;
    border-bottom-color: #03003C;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

/* 0.1 Fonts */

@font-face {
    font-family: "TitilliumWeb-Black";
    src: url(fonts/TitilliumWeb-Black.ttf) format("truetype");
}

@font-face {
    font-family: "TitilliumWeb-Bold";
    src: url(fonts/TitilliumWeb-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "TitilliumWeb-ExtraLight";
    src: url(fonts/TitilliumWeb-ExtraLight.ttf) format("truetype");
}

@font-face {
    font-family: "TitilliumWeb-Light";
    src: url(fonts/TitilliumWeb-Light.ttf) format("truetype");
}

@font-face {
    font-family: "TitilliumWeb-Regular";
    src: url(fonts/TitilliumWeb-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "TitilliumWeb-SemiBold";
    src: url(fonts/TitilliumWeb-SemiBold.ttf) format("truetype");
}

/* 0.2 Flash messages */

.flash-messages {
    position: fixed;
    z-index: 200;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.flash-messages-ajax {
    position: fixed;
    z-index: -200;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.flash-messages-ajax.active {
    z-index: 200;
    opacity: 1;
}

.flash-messages-card {
    position: relative;
    display: flex;
    flex-direction: row;
    min-width: 250px;
    max-width: 350px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 15px;
    margin-bottom: 12px;
    overflow: hidden;
    -webkit-animation: fadeInBottom 1s;
    -moz-animation: fadeInBottom 1s;
    -o-animation: fadeInBottom 1s;
    animation: fadeInBottom 1s;
}

.flash-messages-card-ajax {
    position: relative;
    display: flex;
    flex-direction: row;
    min-width: 250px;
    max-width: 350px;
    border-radius: 15px;
    margin-bottom: 12px;
    overflow: hidden;
    opacity: 0;
    -webkit-animation: fadeOutBottom 1s;
    -moz-animation: fadeOutBottom 1s;
    -o-animation: fadeOutBottom 1s;
    animation: fadeOutBottom 1s;
}

.flash-messages-ajax.active .flash-messages-card-ajax {
    -webkit-animation: fadeInBottom 1s;
    -moz-animation: fadeInBottom 1s;
    -o-animation: fadeInBottom 1s;
    animation: fadeInBottom 1s;
    opacity: 1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.flash-messages-card.inactive {
    -webkit-animation: fadeOutBottom 1s;
    -moz-animation: fadeOutBottom 1s;
    -o-animation: fadeOutBottom 1s;
    animation: fadeOutBottom 1s;
    opacity: 0
}

.flash-messages-card .indication.error, .flash-messages-card-ajax .indication.error {
    position: relative;
    background: #ff4d4d;
    padding: 12px;
}

.flash-messages-card .indication.success, .flash-messages-card-ajax .indication.success {
    position: relative;
    background: #3ae374;
    padding: 12px;
}

.flash-messages .content, .flash-messages-ajax .content {
    width: 100%;
    font-size: 16px;
    line-height: 21px;
    color: #03003C !important;
    font-family: 'TitilliumWeb-Regular';
    padding: 12px 24px;
    background: #fff;
}

/* 0.3 Side Menu */

.side-menu {
    width: 160px;
    background: linear-gradient(178.28deg, #03003C 0%, #0E0A5F 100%);
    position: fixed;
    z-index: 100;
    left: 0%;
    right: 88.89%;
    top: 0%;
    bottom: 0%;
    border-radius: 0 22px 22px 0;
}

.side-menu .logo-side-menu {
    position: relative;
}

.side-menu .logo-side-menu .logo-white {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 47px;
    height: auto;
}

.side-menu ul, .responsive-menu ul {
    padding-inline-start: 8px;
}

.side-menu ul li, .responsive-menu ul li {
    margin-bottom: 8px;
}

.side-menu ul li a, .responsive-menu ul li a {
    display: flex;
    align-items: center;
    height: 30px;
    font-family: 'TitilliumWeb-Light';
    font-style: normal;
    font-size: 15px;
    line-height: 14px;
    color: #fff;
    text-decoration: none;
    padding: 2px 6px;
}

.side-menu ul li a .nav-clients, .responsive-menu ul li a .nav-clients {
    background-image: url('../img/users.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-services, .responsive-menu ul li a .nav-services {
    background-image: url('../img/settings.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-contracts, .responsive-menu ul li a .nav-contracts {
    background-image: url('../img/clipboard.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-factures, .responsive-menu ul li a .nav-factures {
    background-image: url('../img/file-text.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-evidences, .responsive-menu ul li a .nav-evidences {
    background-image: url('../img/camera.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-administratif, .responsive-menu ul li a .nav-administratif {
    background-image: url('../img/book-open.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-contact, .responsive-menu ul li a .nav-contact {
    background-image: url('../img/message-square.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-refresh {
    background-image: url('../img/Rafraichir.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-increase {
    background-image: url('../img/maximize.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-decrease {
    display: none;
    background-image: url('../img/minimize.png');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li a .nav-logout {
    background-image: url('../img/Log-out.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover, .side-menu ul li.active,
.responsive-menu ul li:hover, .responsive-menu ul li.active {
    background: #fff;
    border-radius: 2px 0 0 2px;
}

.side-menu ul li:hover a, .side-menu ul li.active a,
.responsive-menu ul li:hover a, .responsive-menu ul li.active a {
    color: #03003C;
}

.side-menu ul li:hover a .nav-clients, .side-menu ul li.active a .nav-clients,
.responsive-menu ul li:hover a .nav-clients, .responsive-menu ul li.active a .nav-clients {
    background-image: url('../img/users-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover a .nav-services, .side-menu ul li.active a .nav-services,
.responsive-menu ul li:hover a .nav-services, .responsive-menu ul li.active a .nav-services {
    background-image: url('../img/settings-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover a .nav-contracts, .side-menu ul li.active a .nav-contracts,
.responsive-menu ul li:hover a .nav-contracts, .responsive-menu ul li.active a .nav-contracts {
    background-image: url('../img/clipboard-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover a .nav-factures, .side-menu ul li.active a .nav-factures,
.responsive-menu ul li:hover a .nav-factures, .responsive-menu ul li.active a .nav-factures {
    background-image: url('../img/file-text-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover a .nav-evidences, .side-menu ul li.active a .nav-evidences,
.responsive-menu ul li:hover a .nav-evidences, .responsive-menu ul li.active a .nav-evidences {
    background-image: url('../img/camera-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover a .nav-administratif, .side-menu ul li.active a .nav-administratif,
.responsive-menu ul li:hover a .nav-administratif, .responsive-menu ul li.active a .nav-administratif {
    background-image: url('../img/book-open-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover a .nav-contact, .side-menu ul li.active a .nav-contact,
.responsive-menu ul li:hover a .nav-contact, .responsive-menu ul li.active a .nav-contact {
    background-image: url('../img/message-square-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover a .nav-refresh, .side-menu ul li.active a .nav-refresh {
    background-image: url('../img/Rafraichir-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover a .nav-increase, .side-menu ul li.active a .nav-increase {
    background-image: url('../img/maximize-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

.side-menu ul li:hover a .nav-logout, .side-menu ul li.active a .nav-logout {
    background-image: url('../img/Log-out-blue.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-right: 16px;
}

/* menu responsive */

.side-menu-responsive {
    display: none;
    background: linear-gradient(178.28deg, #03003C 0%, #0E0A5F 100%);
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 10px 10px 0 0;
    padding: 2px 24px;
}

.side-menu-responsive ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-inline-start: 0px;
}

.side-menu-responsive ul li {
    list-style-type: none;
}

.side-menu-responsive ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'TitilliumWeb-Light';
    font-style: normal;
    font-size: 15px;
    line-height: 12px;
    color: #fff;
    text-decoration: none;
}

.side-menu-responsive ul li a .nav-refresh {
    background-image: url('../img/Rafraichir.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
}

.side-menu-responsive ul li a .nav-increase {
    background-image: url('../img/maximize.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
}

.side-menu-responsive ul li a .nav-logout {
    background-image: url('../img/Log-out.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
}

.side-menu-responsive ul li a .nav-menu {
    background-image: url('../img/menu.svg');
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
}

.bottom-menu {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .5)
}

/* 0.4 Top menu / Footer -- Main content */

.main-content {
    position: relative;
    right: 0;
    margin-left: 200px;
    margin-right: 40px;
    padding-top: 16px;
}

.main-content .top-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 9px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f3f3;
}

.main-content .top-menu .user-auth {
    display: flex;
    align-items: center;
    font-family: 'TitilliumWeb-Light';
    font-style: normal;
    font-size: 15px;
    line-height: 14px;
    color: #03003C;
}

.main-content .top-menu .user-auth img {
    margin-left: 16px;
}

.user-top-menu {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    font-family: 'TitilliumWeb-Light';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    background: #fff;
    z-index: 99;
}

.user-top-menu .user-auth {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 40px;
    border-bottom: 1px solid #f3f3f3;
    font-family: 'TitilliumWeb-Light';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.user-top-menu .user-auth strong {
    font-family: 'TitilliumWeb-SemiBold';
}

.user-top-menu .user-auth.user-auth-space-between {
    justify-content: space-between;
    align-items: center;
}

.user-top-menu .user-auth img {
    margin-left: 16px;
}

.user-top-menu .user-auth__pharmacy {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.user-top-menu .user-auth__link {
    margin-left: 160px;
}

.user-top-menu .user-auth__link a {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    color: #03003C;
    text-decoration: none;
}

.user-top-menu .user-auth__link a img {
    margin-right: 12px;
}

footer {
    position: fixed;
    background: #fff;
    bottom: 0;
    right: 0px;
    left: -40px;
    width: 100%;
    padding: 12px 0;
    text-align: right;
}

footer a, footer span {
    color: #03003C;
    font-family: 'TitilliumWeb-Light';
    font-style: normal;
    font-size: 15px;
    line-height: 14px;
    text-decoration: none;
}

footer a.active {
    color: #03003C;
    text-decoration: underline;
}

.footer-page-legal {
    font-family: 'TitilliumWeb-Regular';
}

/* 0.5 Pagination */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline-start: 0px;
}

.pagination .page-item:first-child a, .pagination .page-item:last-child a {
    font-size: 32px;
    line-height: 14px;
    text-transform: uppercase;
    color: #03003C;
    cursor: pointer;
}

.pagination .page-item:first-child span, .pagination .page-item:last-child span {
    font-size: 32px;
    line-height: 14px;
    color: #ED1C24;
    font-family: 'TitilliumWeb-Regular';
}

.pagination .page-item {
    list-style-type: none;
    margin: 0 10px;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 18px;
    line-height: 14px;
    text-transform: uppercase;
    color: #03003C;
    cursor: pointer;
}

.pagination .page-item a {
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 18px;
    line-height: 14px;
    text-transform: uppercase;
    color: #03003C;
    cursor: pointer;
    text-decoration: none;
}

.pagination .page-item.active {
    color: #ED1C24;
    font-family: 'TitilliumWeb-Bold';
}

/* 0.6 Puce */

.puce {
    display: block;
    width: 15px;
    height: 15px;
    background: #C1B5B1;
    border-radius: 360px;
}

.puce.verte {
    background: #76B9A2;
}

.puce.rouge {
    background: #D9665D;
}

.puce.jaune {
    background: #F2D659;
}

.puce.bleue {
    background: #165C7D;
}

/* 0.7 Loaders */

.lds-roller {
    position: relative;
    width: 80px;
    height: 80px;
    margin: auto;
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0E0A5F;
    margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}

/* Form input loader */

.icon-container {
    position: absolute;
    right: 10px;
    top: calc(50% - 10px);
}

.loader {
    position: relative;
    height: 20px;
    width: 20px;
    display: inline-block;
    animation: around 5.4s infinite;
}

.loader::after, .loader::before {
    content: "";
    background: transparent;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-color: #03003C #03003C transparent transparent;
    border-style: solid;
    border-radius: 20px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    animation: around 0.7s ease-in-out infinite;
}

.loader::after {
    animation: around 0.7s ease-in-out 0.1s infinite;
    background: transparent;
}

.loader-email {
    position: relative;
    height: 20px;
    width: 20px;
    display: inline-block;
    animation: around 5.4s infinite;
}

.loader-email::after, .loader-email::before {
    content: "";
    background: transparent;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-color: #ED1C24 #ED1C24 transparent transparent;
    border-style: solid;
    border-radius: 20px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    animation: around 0.7s ease-in-out infinite;
}

.loader-email::after {
    animation: around 0.7s ease-in-out 0.1s infinite;
    background: transparent;
}

/* 0.8 Overlay */

.overlay.active {
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #03003C;
    opacity: 0.7;
    backdrop-filter: blur(10px);
    z-index: 100;
}

/* 0.9 Scrollbar */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #03003C #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-track {
    background: #f3f3f3;
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
    background-color: #03003C;
    border-radius: 10px;
    border: 0px none #ffffff;
}

/* Scroll indicator */

.scroll-bottom-arrow {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 120px;
    right: 40px;
    background: #ED1C24;
    width: 42px;
    height: 42px;
    border-radius: 500%;
    cursor: pointer;
}

.scroll-bottom-arrow.active {
    display: flex;
}

.scroll-bottom-arrow img {
    transform: rotate(-90deg);
}

/* 1.0 Datepicker */

.ui-datepicker {
    width: 398px !important;
    height: 388px;
    position: relative;
    background: #F3F3F3;
    border-radius: 10px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    padding: 32px !important;
    box-sizing: border-box;
    z-index: 101;
}

.ui-datepicker .ui-datepicker-title {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 37px;
    color: #03003C;
}

.ui-datepicker th {
    width: 34px;
    height: 34px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 8px;
    color: #8D7E79;
}

.ui-datepicker td {
    width: 34px;
    height: 34px;
    box-sizing: border-box;
}

.ui-datepicker td span, .ui-datepicker td a {
    width: 34px;
    height: 34px;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    color: #03003C;
    text-align: center !important;
    box-sizing: border-box;
    padding: 5px !important;
}

.ui-datepicker td .ui-state-active {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
    background: #03003C;
    border-radius: 5px;
}

.ui-datepicker td .ui-datepicker-unselectable span {
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    color: #03003C;
}

.ui-datepicker .ui-datepicker-header {
    margin-bottom: 12px;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 10px !important;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    font-size: 24px;
}

.ui-datepicker .ui-state-unselectable span {
    background: #C1B5B1;
    border-radius: 5px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
}

.ui-datepicker .ui-state-highlight .ui-state-default {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
    background: #C1B5B1;
    border-radius: 5px;
}

.ui-datepicker .ui-state-highlight .ui-state-active {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
    background: #03003C;
    border-radius: 5px;
}

.ui-datepicker .ui-state-disabled span {
    color: #8D7E79;
}

/* 1.1 Modal */

.modal, .modal-evidence {
    display: none;
    opacity: 0;
    position: fixed;
    width: 100%;
    max-width: 896px;
    height: 302px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 69px 16px 63px;
    background: #fff;
    border-radius: 10px;
    z-index: 1050;
    box-sizing: border-box;
}

.modal-evidence {
    height: auto !important;
    padding: 36px 83px !important;
}

.modal.active, .modal-evidence.active {
    display: block;
    -webkit-animation: fadeInFromNone 0.6s;
    -moz-animation: fadeInFromNone 0.6s;
    -o-animation: fadeInFromNone 0.6s;
    animation: fadeInFromNone 0.6s;
    opacity: 1;
}

.modal-evidence img {
    width: 100%;
    margin-bottom: 35px;
}

.modal-evidence-close {
    text-align: center;
}

.close-modal-evidence {
    cursor: pointer;
}

.modal-evidence .close-modal-evidence {
    border: 1px solid #ED1C24;
    background: #ED1C24;
    border-radius: 10px;
    color: #fff;
    padding: 8px 24px;
    box-sizing: border-box;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
    box-sizing: border-box;
    text-decoration: none;
    height: 32px;
}

.modal .modal-title {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 35px;
    line-height: 53px;
    color: #03003C;
    margin-bottom: 8px;
    text-align: center;
}

.modal .modal-content {
    font-family: 'TitilliumWeb-SemiBold';
    font-style: normal;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: #03003C;
}

.modal .modal-actions {
    margin-top: 16px;
    text-align: center;
}

.modal .modal-actions button {
    cursor: pointer;
}

.modal .modal-actions .modal-red-button {
    display: inline-block;
    border: 1px solid #ED1C24;
    background: #ED1C24;
    border-radius: 10px;
    color: #fff;
    padding: 8px 24px;
    box-sizing: border-box;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
    box-sizing: border-box;
    text-decoration: none;
    height: 32px;
}

.modal .modal-actions .modal-red-border-button {
    border: 1px solid #ED1C24;
    background: #fff;
    border-radius: 10px;
    color: #ED1C24;
    padding: 8px 24px;
    box-sizing: border-box;
    margin-top: 13px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    color: #ED1C24;
}

/* 1.2 Responsive Menu */

.responsive-menu {
    height: 100%;
    width: 50%;
    transform: translateX(200%);
    position: fixed;
    z-index: 1000;
    right: 0;
    background: linear-gradient(178.28deg, #03003C 0%, #0E0A5F 100%);
    overflow-x: hidden;
    transition: 0.3s;
}

.responsive-menu.open {
    transform: translateX(0%);
    transition: 0.3s;
}

.responsive-menu-content {
    position: relative;
    width: 100%;
    text-align: center;
}

.responsive-menu-content ul li {
    list-style-type: none;
}

.responsive-menu-content .logo-side-menu {
    position: relative;
}

.responsive-menu-content .logo-side-menu .background-logo-responsive {
    width: 100%;
}

.responsive-menu-content .logo-side-menu .logo-white-responsive {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.responsive-menu a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.responsive-menu a:hover, .responsive-menu a:focus {
    color: #f1f1f1;
}

.responsive-menu .closebtn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: center;
    cursor: pointer;
}

.responsive-menu .closebtn img {
    margin-bottom: 8px;
}

.responsive-menu .closebtn .close-text-responsive-menu {
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 12px;
    color: #FFFFFF;
}

.responsive-menu .user-logged {
    padding: 40px 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #FFFFFF;
}

.responsive-menu .user-logged img {
    margin-right: 20px;
}

.responsive-menu .user-logged span {
    font-family: 'TitilliumWeb-Light';
    font-style: normal;
    font-size: 18px;
    line-height: 20px;
    color: #fff;
    text-align: left;
}

/*-- 1.0 Login --*/

.navbar-auth {
    text-align: center;
}

.navbar-auth .logo {
    width: 120px;
    height: 120px;
}

.main-auth {
    width: 100%;
    height: auto;
}

.main-auth h1, .main-auth h2, .main-auth h3, .main-auth h4, .main-auth h5, .main-auth h6 {
    color: #03003C;
    text-align: center;
}

.main-auth h1 {
    font-family: 'TitilliumWeb-Bold';
    font-size: 35px;
    line-height: 53px;
    margin-bottom: 0;
}

.main-auth h3 {
    font-family: 'TitilliumWeb-SemiBold';
    font-size: 18px;
    line-height: 27px;
}

.main-auth p {
    font-family: 'TitilliumWeb-Regular';
    font-size: 16px;
    line-height: 27px;
    text-align: center;
    color: #03003C;
}

.auth-title {
    margin-bottom: 35px;
}

.card-auth-body {
    max-width: 440px;
    margin: auto;
}

.form-auth {
    position: relative;
    margin-bottom: 24px;
}

.label_absolute {
    position: absolute;
    z-index: 1;
    top: -10px;
    left: 16px;
    font-family: 'TitilliumWeb-Regular';
    padding: 0px 4px;
    gap: 10px;
    font-size: 14px;
    line-height: 18px;
    background: #fff;
    color: #03003C;
}

.form-auth input {
    background: #FFFFFF;
    border: 1px solid #8D7E79;
    border-radius: 5px;
    height: 48px;
    font-size: 14px;
    line-height: 21px;
    color: #03003C !important;
    font-family: 'TitilliumWeb-Regular';
    box-sizing: border-box;
}

.btn-auth button {
    background: #ED1C24;
    border-radius: 7px;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 13px 24px;
    border: none;
    margin-top: 30px;
    font-family: 'TitilliumWeb-Bold';
}

.btn-auth button:hover {
    background: #ED1C24;
}

.btn-link {
    text-align: center;
    margin-top: 16px;
}

.btn-link a {
    text-decoration: underline;
    font-size: 16px;
    line-height: 21px;
    font-family: 'TitilliumWeb-regular';
    color: #03003C;
}

.btn-link a:hover {
    color: #03003C;
}

.icon-input {
    position: absolute;
    top: 50%;
    right: 16px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}

.icon-input .eye-off {
    display: none;
}

/*-- 2.0 Client --*/

/* 2.1 Client accueil */

.search-pharmacy form, .search-services form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 80px;
}

.form-pharmacy, .form-services {
    width: 100%;
    max-width: 520px;
}

.form-region, .form-secteur {
    width: 180px;
}

.form-pharmacy .relative, .form-services .relative {
    width: 100%;
    max-width: 520px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.form-region .relative, .form-secteur .relative {
    width: 180px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main-input:-webkit-autofill,
.main-input:-webkit-autofill:hover,
.main-input:-webkit-autofill:focus,
.main-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f3f3f3 inset !important;
    box-shadow: 0 0 0 30px #f3f3f3 inset !important;
    -webkit-text-fill-color: #03003C;
}

.main-input, .main-select {
    width: 100%;
    display: block;
    background: #F3F3F3;
    border-radius: 10px;
    border: none;
    padding: 0.75rem;
    color: #03003C;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
}

.search-pharmacy input, .search-services input {
    display: block;
    width: -webkit-fill-available;
    padding-left: 2.125rem;
}

.main-input:focus {
    background: #F3F3F3 !important;
}

.main-select {
    display: block;
    width: 100%;
    height: 47px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../img/Check.svg');
    background-repeat: no-repeat;
    background-position:
        calc(100% - 15px),
        calc(100% - 20px) 1em,
        calc(100% - 2.5em) 0.5em;
}

.form-customer .icon-input {
    width: 16px;
    left: 12px;
    right: 0px;
}

.form-region {
    margin-right: 16px;
}

.form-region-secteur {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.selected_trimester {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 600px;
    margin: auto;
    padding-bottom: 32px;
}

.selected_trimester div {
    min-width: 150px;
}

.selected_trimester .button_trimester {
    position: relative;
    background: transparent;
    border: none;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    text-transform: uppercase;
    color: #03003C;
    cursor: pointer;
    text-decoration: none;
}

.selected_trimester .button_trimester.actif {
    color: #ED1C24;
    font-family: 'TitilliumWeb-Bold';
}

.selected_trimester .button_trimester.actif:after {
    position: absolute;
    z-index: 100;
    content: '';
    height: 2px;
    bottom: -8px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 43px;
    background: #ED1C24;
}

.selected_trimester .button_trimester::after {
    position: absolute;
    z-index: 100000;
    content: '';
    height: 2px;
    bottom: -8px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 0%;
    background: #ED1C24;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.selected_trimester .button_trimester:hover::after {
    width: 43px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.selected_trimester_filters form {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.selected_trimester_filters input {
    width: -webkit-fill-available;
    padding-left: 2.125rem;
}

.selected_trimester_filters .form-filter_pharmacy {
    width: 100%;
    max-width: 400px;
    margin-right: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.selected_trimester_filters .form-status-contract {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.selected_trimester_filters .form-filter_pharmacy .relative {
    width: 100%;
    max-width: 400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.selected_trimester_filters .form-status-contract .relative {
    width: 100%;
    max-width: 400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.selected_trimester_filters .form-status-contract .relative .main-select {
    width: 100%;
}

.pharmacy-search.active {
    z-index: 110;
}

.pharmacy-search-results.active {
    display: block;
}

.pharmacy-search-results {
    display: none;
    position: absolute;
    z-index: 110;
    width: 100%;
    background: #F3F3F3;
    border-radius: 10px;
    top: calc(47px + 16px);
    height: 285px;
    overflow-y: auto;
}

.pharmacy-search-results .pharmacy-search-datas {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 16px;
    font-family: 'TitilliumWeb-Regular';
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 16px;
    line-height: 24px;
    color: #03003C;
    border-bottom: 1px solid #03003c52;
    cursor: pointer;
}

.pharmacy-search-results .pharmacy-search-datas:last-child {
    border-bottom: 0px solid #03003c52;
}

.pharmacy-search-results .pharmacy-search-datas:hover {
    background: #fff;
}

.pharmacy-search-results .pharmacy-search-datas span {
    display: block;
    margin-left: 8px;
    margin-right: 8px;
}

.pharmacy-search-loading, .pharmacy-search-close {
    display: none;
}

.pharmacy-search-close img {
    width: 16px;
    height: 16px;
}

.pharmacy-search-close {
    position: absolute;
    top: 50%;
    right: 16px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}

.icon-empty-search-filter {
    display: none;
    width: 16px;
    position: absolute;
    top: 50%;
    right: 16px !important;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}

.pharmacy-search-loading.active, .pharmacy-search-close.active {
    display: block;
}

.pharmacy-search-results::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0px 10px 10px 0;
}

.buttons-send-email-autonomous {
    display: none;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
}

.buttons-send-email-autonomous.active {
    display: flex;
}

.buttons-send-email-autonomous img {
    cursor: pointer;
}

.buttons-send-email-autonomous .loader-reminder {
    display: none;
}

/* The container */
.contracts-list .contract-inner .contract-pharmacy-name .select-pharmacy-radio {
    display: none;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 10px;
}

.contracts-list .contract-inner .contract-pharmacy-name .select-pharmacy-radio.active {
    display: block;
}

/* Hide the browser's default radio button */
.contracts-list .contract-inner .contract-pharmacy-name .select-pharmacy-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.contracts-list .contract-inner .contract-pharmacy-name .select-pharmacy-radio .checkmark {
    position: relative;
    display: block;
    height: 18px;
    width: 18px;
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid #03003C;
}

/* On mouse-over, add a grey background color */
.contracts-list .contract-inner .contract-pharmacy-name .select-pharmacy-radio:hover input~.checkmark {
    background-color: transparent;
}

/* When the radio button is checked, add a blue background */
.contracts-list .contract-inner .contract-pharmacy-name .select-pharmacy-radio input:checked~.checkmark {
    background-color: transparent;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.contracts-list .contract-inner .contract-pharmacy-name .select-pharmacy-radio .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.contracts-list .contract-inner .contract-pharmacy-name .select-pharmacy-radio input:checked~.checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.contracts-list .contract-inner .contract-pharmacy-name .select-pharmacy-radio .checkmark:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #03003C;
}

/* 2.2 Accueil client */

.contracts-list {
    margin-top: 40px;
}

.contracts-list .contract-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 24px 20px;
    border: 1px solid #f3f3f3;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.contracts-list .contract-inner .contract-pharmacy-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 275px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.contracts-list .contract-inner .contract-pharmacy-name .can_sign {
    margin-left: 8px;
}

.contracts-list .contract-inner .contract-infos {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}

.contracts-list .contract-inner .contract-status {
    width: 350px;
}

.contracts-list .contract-inner .contract-status .status-card {
    display: flex;
    flex-direction: row;
}

.contracts-list .contract-inner .contract-status .puce {
    margin-right: 12px;
}

.contracts-list .contract-inner .contract-status .budget-amounts {
    margin-top: 16px;
    margin-left: 27px;
    background: #f3f3f3;
    padding: 16px;
    border-radius: 10px;
}

.contracts-list .contract-inner .contract-status .budget-amounts div {
    margin-bottom: 8px;
}

.contracts-list .contract-inner .contract-status .budget-amounts div:last-child {
    margin-bottom: 0;
}

.contracts-list .contract-inner .contract-button-details a {
    background: #fff;
    border: 1px solid #ED1C24;
    border-radius: 7px;
    text-decoration: none;
    color: #ED1C24;
    padding: 8px 24px;
    width: 73px;
    height: 30px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
}

.contracts-list .contract-inner .contract-button-details .ask-for-plv {
    background: #ED1C24;
    border: 1px solid #ED1C24;
    border-radius: 7px;
    text-decoration: none;
    color: #fff;
    width: 73px;
    height: 30px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    margin-right: 8px;
}

.contracts-list .contract-inner .contract-button-details .ask-for-plv:hover {
    color: #fff;
    border: 1px solid #ED1C24;
    background: #ED1C24;
}

.contracts-loading, .services-loading {
    display: none;
}

.contracts-loading {
    margin-top: 80px;
}

/* 2.2 Clients services */

.service-accordion {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid #E5E5E5;
}

.service-accordion.active {
    border-bottom: 0px solid #E5E5E5;
}

.service-accordion .service-datas {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.service-accordion .service-datas .service-name {
    width: 380px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.service-accordion .service-datas .service-subtitle {
    width: 25%;
    margin-right: 24px;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.service-accordion .service-datas .service-subtitle:last-child {
    margin-right: 0;
}

.service-panel {
    height: 0;
    transition: height 0.3s cubic-bezier(0.5, 0, 0.1, 1);
    -webkit-transition: height 0.3s cubic-bezier(0.5, 0, 0.1, 1);
    overflow: hidden;
}

.service-panel.open {
    height: 380px;
    transition: height 0.3s cubic-bezier(0.5, 0, 0.1, 1);
    -webkit-transition: height 0.3s cubic-bezier(0.5, 0, 0.1, 1);
    border-bottom: 1px solid #E5E5E5;
}

.service-button .accordion {
    background: #fff;
    border: 1px solid #ED1C24;
    border-radius: 7px;
    text-decoration: none;
    color: #ED1C24;
    padding: 6px 24px;
    width: 73px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    cursor: pointer;
}

.service-button .accordion:hover {
    color: #fff;
    background: #ED1C24;
}

.service-description strong {
    font-family: 'TitilliumWeb-Regular';
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 16px;
    line-height: 24px;
    color: #03003C;
}

.service-description em {
    font-family: 'TitilliumWeb-Regular';
    font-weight: normal !important;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    color: #03003C;
}

.service-description u {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    color: #03003C;
}

.service-panel__inner {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.service-description-text {
    font-family: 'TitilliumWeb-Regular';
    font-weight: normal !important;
    font-style: normal !important;
    background: #F3F3F3;
    border-radius: 10px;
    padding: 24px 24px 61px;
    width: 50%;
    margin-right: 8px;
    box-sizing: border-box;
    height: 331px;
    overflow: hidden;
}

.service-description-image {
    position: relative;
    width: 50%;
    margin-left: 8px;
    height: 331px;
    border-radius: 10px;
    overflow: hidden;
}

.service-description-image img {
    width: 100%;
    height: auto;
}

.service-description-text p:first-child {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 20px;
    line-height: 30px;
    color: #03003C;
    margin-bottom: 24px;
}

.service-description-text p {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 24px;
    color: #03003C;
}

.slideshow-container {
    position: relative;
}

.slideshow-container .mySlides {
    display: none;
}

.slideshow-container .prev, .slideshow-container .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 38px;
    height: 38px;
    margin-top: -22px;
    color: #000000;
    font-weight: bold;
    font-size: 24px;
    transition: 0.3s ease;
    border-radius: 10px;
    user-select: none;
    background: #fff;
    box-sizing: border-box;
}

.slideshow-container .prev img, .slideshow-container .next img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 12px;
}

.slideshow-container .prev {
    left: 16px;
}

.slideshow-container .next {
    right: 16px;
    background: #FFFFFF;
}

.slideshow-container .prev:hover, .slideshow-container .next:hover {
    transform: scale(1.2);
}

.slideshow-container .fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

/* 2.3 Vue officine */

.pharmacy-contracts-year-select {
    width: 136px;
}

.pharmacy-contracts__inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px;
    border-bottom: 1px solid #f3f3f3;
    border-right: 0;
    border-left: 0;
}

.pharmacy-contracts-periodname {
    width: 110px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.pharmacy-contracts-perioddates {
    width: 205px;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.pharmacy-contracts-budget {
    width: 201px;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.pharmacy-contracts-budget span {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.pharmacy-contracts-souscritdate {
    width: 169px;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.pharmacy-contracts-souscritdate span {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.pharmacy-contracts-button {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 220px;
    gap: 16px;
}

.pharmacy-contracts-button a {
    background: #fff;
    border: 1px solid #ED1C24;
    border-radius: 7px;
    text-decoration: none;
    color: #ED1C24;
    padding: 8px 24px;
    width: 142px;
    height: 30px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
}

.pharmacy-contracts-button .reinit-cancel {
    display: inline-block;
    border: none;
    padding: 0;
    width: fit-content; 
    height: auto;
    cursor: pointer;
}

.pharmacy-contracts-button .pharmacy-contracts-button-cansign {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ED1C24;
    border: 1px solid #ED1C24;
    border-radius: 7px;
    text-decoration: none;
    color: #fff;
    padding: 8px 24px;
    width: 142px;
    height: 30px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
}

.pharmacy-contracts-button .pharmacy-contracts-button-cannotsign {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F3F3;
    border: 1px solid #F3F3F3;
    border-radius: 7px;
    text-decoration: none;
    color: #03003C;
    padding: 8px 24px;
    width: 142px;
    height: 30px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
}

.pharmacy-contracts-button .pharmacy-contracts-button-see {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ED1C24;
    border-radius: 7px;
    text-decoration: none;
    color: #ED1C24;
    padding: 8px 24px;
    width: 142px;
    height: 30px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
}

.pharmacy-contracts-button .altinfos-contract-span {
    font-family: 'TitilliumWeb-Bold';
}

.pharmacy-contracts__inner__responsive {
    display: none;
}

.pharmacy-contracts__inner__responsive .pharmacy-contracts-periods .pharmacy-contracts-periodname,
.pharmacy-contracts__inner__responsive .pharmacy-contracts-datas .pharmacy-contracts-budget {
    margin-bottom: 16px;
}

.pharmacy-contracts__none {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.services-search-close {
    display: none;
}

.services-search-close img {
    width: 16px;
    height: 16px;
}

.services-search-close {
    position: absolute;
    top: 50%;
    right: 16px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}

/* 2.4 Officine administratif */

.selected_administratif_form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 338px;
    margin: auto;
    padding-top: 32px;
    padding-bottom: 50px;
}

.selected_administratif_form .button_selected_form {
    position: relative;
    background: transparent;
    border: none;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    text-transform: uppercase;
    color: #03003C;
    cursor: pointer;
    text-decoration: none;
}

.selected_administratif_form .button_selected_form.actif {
    color: #ED1C24;
    font-family: 'TitilliumWeb-Bold';
}

.selected_administratif_form .button_selected_form.actif:after {
    position: absolute;
    z-index: 100000;
    content: '';
    height: 2px;
    bottom: -8px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 43px;
    background: #ED1C24;
}

.selected_administratif_form .button_selected_form::after {
    position: absolute;
    z-index: 100000;
    content: '';
    height: 2px;
    bottom: -8px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 0%;
    background: #ED1C24;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.selected_administratif_form .button_selected_form:hover::after {
    width: 43px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.infos-blocked {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.infos-blocked-card {
    width: 100%;
    border: 1px solid #F3F3F3;
    border-radius: 10px;
    padding: 16px 24px;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
    box-sizing: border-box;
}

.infos-blocked-card p {
    margin-top: 16px;
    margin-bottom: 16px;
}

.infos-blocked-card:first-child {
    margin-right: 16px;
}

.infos-blocked-card:last-child {
    margin-left: 16px;
}

.form-pharmacie {
    padding: 48px 75px;
    background: #f3f3f3;
    border-radius: 10px;
}

.form-pharmacie form .form-pharmacy-fields {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.form-pharmacie form .form-pharmacy-fields .form-auth {
    width: calc(33% - 8px);
}

.form-pharmacie input {
    width: 100%;
    background: transparent;
}

.form-pharmacie input:disabled {
    color: #03003C;
    -webkit-text-fill-color: #03003C;
    opacity: 1;
}

.form-pharmacie label {
    background: #f3f3f3;
}

.form-pharmacie input:focus {
    background: transparent;
}

.form-pharmacie .btn-auth {
    text-align: center;
}

.form-pharmacie .btn-auth button {
    width: 100px;
    margin: auto;
    color: #ED1C24;
    padding: 8px 24px;
    background: transparent;
    border: 1px solid #ED1C24;
    cursor: pointer;
}

.form-pharmacie .btn-auth .update-button {
    display: none;
    width: 117px;
    margin: auto;
    color: #fff;
    padding: 8px 24px;
    background: #ED1C24;
    border: 1px solid #ED1C24;
    cursor: pointer;
}

.form-titulaire-mandataire {
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.form-titulaire, .form-mandataire {
    width: 50%;
    background: #f3f3f3;
    padding: 32px;
    border-radius: 10px;
    box-sizing: border-box;
}

.form-titulaire label, .form-mandataire label {
    background: #f3f3f3;
}

.form-titulaire input, .form-mandataire input {
    background: transparent;
}

.form-titulaire input:disabled, .form-mandataire input:disabled {
    color: #03003C;
    -webkit-text-fill-color: #03003C;
    opacity: 1;
}

.form-titulaire input:focus, .form-mandataire input:focus {
    background: transparent;
}

.form-titulaire {
    margin-right: 8px;
}

.form-mandataire {
    margin-left: 8px;
}

.form-titulaire_titlebutton, .form-mandataire_titlebutton {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    color: #ED1C24;
}

.form-titulaire_titlebutton h1, .form-mandataire_titlebutton h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 14px;
    margin-right: 16px;
}

.form-titulaire_titlebutton button, .form-mandataire_titlebutton button {
    margin-top: 0;
}

.form-titulaire_titlebutton button, .form-titulaire_titlebutton button:hover, .form-mandataire_titlebutton button, .form-mandataire_titlebutton button:hover {
    width: 100px;
    background: transparent;
    color: #ED1C24;
    border: 1px solid #ED1C24;
    cursor: pointer;
}

.form-titulaire_titlebutton button.update-button, .form-mandataire_titlebutton button.update-button {
    display: none;
    width: 117px;
    background: #ED1C24;
    color: #fff;
    cursor: pointer;
    border: 1px solid #ED1C24;
}

/* 2.5 Officine contact */

.contact-delegue {
    margin-bottom: 80px;
}

.contact-delegue h1, .contact-service-client h1 {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 22px;
    line-height: 26px;
    color: #03003C;
    margin-bottom: 24px;
}

.contact-delegue__inner, .contact-service-client__inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: #F3F3F3;
    border-radius: 10px;
    padding: 16px;
    box-sizing: border-box;
    margin-right: 16px;
}

.contact-card:last-child {
    margin-right: 0;
}

.contact-card p {
    margin-bottom: 0;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 22px;
    line-height: 22px;
    color: #03003C;
    text-align: center;
}

.contact-card p a {
    text-decoration: none;
    color: #03003C;
}

/* 2.6 Officine contrat creation */

.contract-details {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 77px;
}

.bilan-gamme {
    display: none;
}

.bilan-gamme.active {
    display: block;
}

.bilan-gamme-border {
    display: none;
    border-top: 1px solid #f3f3f3;
}

.bilan-gamme-border.active {
    display: block;
    margin-bottom: 48px;
}

.bilan-gamme .bilan-title {
    font-family: 'TitilliumWeb-Bold';
    color: #ED1C24;
    text-transform: uppercase;
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    margin-bottom: 24px;
}

.bilan-gamme .bilan-amounts {
    width: 75%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 24px;
}

.contract-details .contract-details-card,
.bilan-gamme .bilan-amounts .contract-details-card {
    position: relative;
    width: 33%;
    height: 67px;
    background: #F3F3F3;
    border-radius: 10px;
    margin-right: 16px;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #03003C;
    box-sizing: border-box;
    padding: 8px;
}

.contract-details .contract-budgetsouscrit-all {
    width: 45%;
}

.bilan-gamme .bilan-amounts .contract-details-card {
    width: 40%;
}

.bilan-gamme .bilan-amounts .correct-gamme {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    text-transform: uppercase;
    color: #fff;
    background: #03003C;
    font-size: 14px;
    font-family: 'TitilliumWeb-Bold';
    cursor: pointer;
    height: calc(67px - 16px);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
}

.contract-details .contract-details-card span,
.bilan-gamme .bilan-amounts .contract-details-card span {
    display: flex;
    align-items: center;
}

.contract-details .contract-details-card .text-red, 
.bilan-gamme .bilan-amounts .contract-details-card .text-red, 
.contract-service-totalprice .text-red {
    font-family: 'TitilliumWeb-Bold';
    color: #ED1C24;
}

.contract-details .contract-details-card img {
    margin-right: 6px;
}

.contract-details .contract-details-card:last-child {
    margin-right: 0;
}

.contract-details .contract-details-card .contract-budgetmax-infobulles,
.contract-details .contract-details-card .contract-trimester-infobulles,
.bilan-gamme .bilan-amounts .contract-details-card .contract-budgetmax-infobulles {
    display: none;
    background: #F3F3F3;
    position: absolute;
    z-index: 10;
    top: calc(67px + 16px);
    width: calc(100% - 32px);
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    border-radius: 10px;
    padding: 16px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.contract-details .contract-budgetmax,
.contract-details .contract-budgetsouscrit {
    display: none;
}

.contract-details .contract-budgetmax.active,
.contract-details .contract-budgetsouscrit.active {
    display: flex;
}

.sign-contract-phone-infobulles {
    display: none;
    background: #fff;
    position: absolute;
    z-index: 10;
    top: calc(48px + 16px);
    width: calc(100% - 16px);
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    border-radius: 10px;
    padding: 16px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.contract-details .contract-details-card .contract-budgetmax-infobulles-arrow-border {
    position: absolute;
    top: -9px;
    left: 64px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #F3F3F3;
    width: 0;
    height: 0;
}

.contract-details .contract-details-card .contract-trimester-infobulles-arrow-border {
    position: absolute;
    top: -9px;
    left: 32px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #F3F3F3;
    width: 0;
    height: 0;
}

.sign-contract-phone-infobulles .sign-contract-phone-infobulles-arrow-border {
    position: absolute;
    top: -9px;
    right: 30px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    width: 0;
    height: 0;
}

.contract-create-form-steps {
    width: 100%;
    max-width: 992px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 64px;
    gap: 16px;
}

.contract-create-form-steps .contract-create-form-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    text-transform: uppercase;
    color: #C4C4C4;
}

.contract-create-form-steps .contract-create-form-step .step-number {
    margin-right: 4px;
}

.contract-create-form-steps .contract-create-form-step.step-active {
    font-family: 'TitilliumWeb-Bold';
    color: #ED1C24;
}

.contract-services {
    display: none;
}

.contract-services.active {
    display: block;
}

.contract-services .contract-services-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
    padding: 12px 16px;
    border-top: 1px solid #f3f3f3;
}

.contract-services .contract-services-item.item-background-red {
    background: rgba(237, 28, 36, .2);
}

.contract-services .contract-services-item-align-center {
    align-items: center;
}

.contract-services .contract-services-item .contract-service-datas {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 55%;
}

.contract-services .contract-services-item .contract-service-infos,
.contract-services .contract-services-item .contract-service-quantity-totalprice {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.contract-services .contract-services-item .contract-service-infos {
    width: 45%;
}

.contract-services .contract-services-item .contract-service-infos .contract-service-name {
    margin-right: 16px;
}

.contract-services .contract-services-item .contract-service-quantity-totalprice {
    width: 45%;
}

.contract-services .contract-services-item .contract-service-quantity-totalprice .contract-service-quantity {
    margin-right: 16px;
}

.contract-services .contract-services-item .contract-service-quantity-totalprice .contract-service-quantity label {
    margin-right: 8px;
}

.contract-services .contract-services-item .contract-service-quantity-totalprice .contract-service-quantity select {
    width: 70px;
    padding: 12px;
    box-sizing: border-box;
}

.contract-service-choosedate {
    width: 35%;
}

.contract-service-choosedate .contract-service-selectdate {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.contract-service-choosedate .contract-service-selectdate:last-child {
    margin-bottom: 0;
}

.contract-service-choosedate .contract-service-selectdate .contract-service-selectdate-button button {
    background: #fff;
    color: #ED1C24;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    padding: 8px 24px;
    cursor: pointer;
    border: 1px solid #ED1C24;
    box-sizing: border-box;
    border-radius: 7px;
}

.contract-service-choosedate .contract-service-selectdate .contract-service-selectdate-button button:hover {
    background: #ED1C24;
    color: #fff;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    padding: 8px 24px;
    cursor: pointer;
    border: 1px solid #ED1C24;
    box-sizing: border-box;
    border-radius: 7px;
}

.contract-service-selectdate .contract-service-selectdate-datepicker,
.contract-service-selecteddate .contract-service-selectdate-datepicker {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 30;
}

.contract-service-selecteddate {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
    margin-bottom: 9px;
}

.contract-service-selecteddate:last-child {
    margin-bottom: 0;
}

.contract-service-selecteddate .contract-service-dates {
    margin-right: 26px;
}

.contract-service-selecteddate .contract-service-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.contract-service-selecteddate .contract-service-actions button {
    border: none;
    background: transparent;
    cursor: pointer;
}

.button-validate-step {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 24px;
}

.button-validate-step .next-step {
    width: 212px;
    height: 40px;
    box-sizing: border-box;
    background: #ED1C24;
    border-radius: 7px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
    padding: 13px 16px;
    border: 1px solid #ED1C24;
    cursor: pointer;
    opacity: 1;
}

.button-validate-step .next-step:disabled {
    opacity: 0.5;
}

.button-validate-step .next-step img {
    margin-left: 8px;
}

.service-quantity-selected {
    display: none;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 16px;
    width: 32px !important;
    height: 47px;
    background: #F3F3F3;
    border-radius: 10px;
    color: #03003C;
    padding: 16px 12px;
    box-sizing: border-box;
}

.service-quantity-selected.active {
    display: block;
}

.contract-creation-search-loading {
    display: none;
    margin-top: 128px;
}

.button-validate-step .correct-contract {
    display: none;
    align-items: center;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    color: #03003C;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-right: 16px;
}

.button-validate-step .correct-contract.displayed {
    display: flex;
}

.button-validate-step .correct-contract img {
    position: relative;
    top: 50%;
    margin-right: 12px;
}

.inputs-services-datas-form {
    width: 100%;
    margin-bottom: 0;
    margin-top: 0;
}

.inputs-services-datas-form.active {
    width: 100%;
    margin-bottom: 60px;
    margin-top: 60px;
}

.create-signataire {
    display: none;
}

.create-signataire .relative img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}

/* The container */
.create-signataire .radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.create-signataire .radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.create-signataire .checkmark {
    position: absolute;
    top: -2px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid #ED1C24;
}

/* On mouse-over, add a grey background color */
.create-signataire .radio-container:hover input~.checkmark {
    background-color: transparent;
}

/* When the radio button is checked, add a blue background */
.create-signataire .radio-container input:checked~.checkmark {
    background-color: transparent;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.create-signataire .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.create-signataire .radio-container input:checked~.checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.create-signataire .radio-container .checkmark:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ED1C24;
}

/* Officine factures */

.facture-item {
    padding: 24px 0;
    border-top: 1px solid #E5E5E5;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.facture-item div {
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.facture-item .facture-detail {
    display: block;
}

.facture-item .facture-detail a {
    display: block;
    width: 100%;
    max-width: 184px;
    margin: auto;
    color: #ED1C24;
    padding: 8px 24px;
    background: #fff;
    border: 1px solid #ED1C24;
    text-decoration: none;
    border-radius: 7px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    box-sizing: border-box;
}

.facture-item .facture-detail a:hover {
    color: #fff;
    background: #ED1C24;
}

.facture-item-responsive {
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.facture-datas {
    width: 75%;
    display: flex;
    flex-direction: row;
}

.facture-item-infos, .facture-item-dates {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.facture-item-infos div:first-child, .facture-item-dates div:first-child {
    margin-bottom: 16px;
}

.facture-item-infos {
    margin-bottom: 16px;
}

.factures-empty {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

/* 2.8 Officine photos preuve */

.preuves-selected-trimester {
    margin-top: 50px;
}

.preuve-accordion {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid #E5E5E5;
}

.preuve-accordion.active {
    border-bottom: 0px solid #E5E5E5;
}

.preuve-button .accordion {
    background: #fff;
    border: 1px solid #ED1C24;
    border-radius: 7px;
    text-decoration: none;
    color: #ED1C24;
    padding: 6px 24px;
    width: 73px;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    cursor: pointer;
}

.preuve-button .accordion:hover {
    color: #fff;
    background: #ED1C24;
}

.preuve-panel {
    height: 0;
    transition: height 0.3s cubic-bezier(0.5, 0, 0.1, 1);
    -webkit-transition: height 0.3s cubic-bezier(0.5, 0, 0.1, 1);
    overflow: hidden;
}

.preuve-panel.open {
    height: auto;
    transition: height 0.3s cubic-bezier(0.5, 0, 0.1, 1);
    -webkit-transition: height 0.3s cubic-bezier(0.5, 0, 0.1, 1);
    border-bottom: 1px solid #E5E5E5;
}

.preuve-label {
    width: 85%;
    display: flex;
    flex-direction: row;
}

.preuve-label-title {
    width: 26%;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.preuve-label-gamme {
    width: 15%;
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.preuve-label-status {
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.preuve-label-status-date {
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
}

.preuve-label-status-date .puce {
    margin-right: 8px;
}

.preuve-panel__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
}

.preuve-label-uploads {
    width: 288px;
    margin-bottom: 16px;
    margin-right: 16px;
}

.preuve-label-uploads-dates {
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
}

.preuve-label-uploads .puce {
    margin-right: 8px;
}

.input-uploads-evidences .evidence-nophoto-input {
    display: none;
}

.input-label {
    display: block;
    background: rgba(193, 181, 177, .1);
    border-radius: 10px;
    padding: 10px;
}

.input-uploads-evidences .input-label label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #8D7E79;
    padding: 30px 44px;
    box-sizing: border-box;
    border: 1px dashed #8D7E79;
    border-radius: 10px;
    cursor: pointer;
}

.input-uploads-evidences .input-label label img {
    margin: auto;
    margin-bottom: 24px;
}

.input-uploads-evidences .input-label label p {
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 18px;
    color: #8D7E79;
}

.uploaded-evidence {
    border-radius: 10px;
    overflow: hidden;
}

.uploaded-evidence-img {
    height: 192px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.uploaded-evidence-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.uploaded-evidence-actions button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-bottom: 4px;
}

.uploaded-evidence-actions button:last-child {
    margin-bottom: 0;
}

.uploaded-evidence-date {
    margin-top: 10px;
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-size: 16px;
    line-height: 14px;
    color: #03003C;
    background: transparent;
}

.preuve-label-uploads-fields .evidences-loader {
    display: none;
    margin-top: 48px;
}

.preuve-label-uploads-fields .evidences-loader.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.preuve-label-uploads-fields form {
    margin-bottom: 0;
}

/*-- 3.0 Officine --*/

/* 3.1 Officine connexion */

.pharmacy-login {
    background: #03003C;
    border: 1px solid #000000;
}

.pharmacy-login .pharmacy-auth {
    width: 100%;
    max-width: 692px;
    background: #fff;
    border-radius: 7px;
    padding: 55px 104px;
}

/*-- Animations --*/

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateX(-50%);
        transform: translateY(100%);
    }

    to {
        opacity: 1
    }
}

@-o-keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateX(-50%);
        transform: translateY(100%);
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateX(-50%);
        transform: translateY(100%);
    }

    to {
        opacity: 1
    }
}

@-moz-keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateX(-50%);
        transform: translateY(100%);
    }

    to {
        opacity: 1
    }
}

/* Fade out bottom */

@keyframes fadeOutBottom {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateY(100%);

    }
}

@-o-keyframes fadeOutBottom {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateY(100%);

    }
}

@-webkit-keyframes fadeOutBottom {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateY(100%);

    }
}

@-moz-keyframes fadeOutBottom {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateY(100%);

    }
}

/* Loader */

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Input Loader */

@keyframes around {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-o-keyframes around {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes around {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-moz-keyframes around {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* Opacity from none */

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

/* Rotation loader */

@-webkit-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}