.primary-color {
    background-color: var(--primary-color) !important;
}
.primary-color:active a, .primary-color:hover a {
    background-color: var(--secondary-color);
}
.secondary-color {
    background-color: var(--secondary-color);
}
.third-color {
    background-color: var(--third-color) !important;
    color: white;
}
.secondary-color:hover {
    background-color: var(--third-color) !important;
}
.text-primary {
    color: var(--primary-color) !important;
}
.text-secondary {
    color: var(--secondary-color) !important;
}
h1 {
    font-size: 1.7rem;
    margin-bottom: 0;
}
h2 {
    color: var(--secondary-color) !important;
    font-size: 1.6rem !important;
    /*font-weight: 700 !important;*/
}
body {
    background-color: #F4F4F4;
}
a {
    text-decoration: none !important;
}
a:hover {
    background-color: none !important;
}
.card {
    border: none !important;
}
.card-title {
    text-decoration: none !important;
}
#main {
    margin-top: 4.5rem !important;
}
.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
input[type=range]::-webkit-slider-thumb {
    background: var(--primary-color) !important!important;                  /* sert pour couleur de référence, via currentColor, pour le curseur */
}
legend, label {
    font-weight: 500;
}
.form-validated-zone-bilan:checked {
    background-color: var(--secondary-color) !important;
}
.form-validated-zone-bilan.form-check-input[type=checkbox] {
    width: 30px;
    height: 30px;
}
#signature_process.form-check-input[type=checkbox], #signature_informations.form-check-input[type=checkbox],
#signature_conditions.form-check-input[type=checkbox], #signature_duration.form-check-input[type=checkbox] {
    width: 25px;
    height: 25px;
}
.help-text {
    font-size: 12px;
}
#accordion-form-customer {
    --bs-accordion-bg: white !important;
}
.form-check-input[type=checkbox], .form-check-input[type=radio] {
    border-color: var(--primary-color) !important;
}
/* Sidebar*/
.logo-sidebar {
    width: 100%;
}
.row-canvas {
    height: 130px
}
#offcanvasScrolling {
    max-width: 300px;
}
#menu a {
    color: black;
    text-decoration: none !important;
    font-size: 1.2rem;
}
.offcanvas-body {
    /*overflow-y: unset !important;*/
}
#background-menu {
    background-color: var(--background-menu-color) !important;
}
.nav-item {
    margin-bottom: .5rem;
}
.text-size-nav-title{
    font-size: 1.7rem !important;
}
/* End sidebar*/

/*#operatorBody {*/
.navbar a {
    background-color: var(--primary-color) !important;
}
#navbarNav {
    margin-left: 0;
}
/* Dashboard */
.newsletter-card-image {
    background-color: #2C707C;
}
.card-operator-dashboard {
    height: 500px;
    max-height: 650px;
}
.card-operator-dashboard-right {
    height: 237px;
    max-height: 237px;
}
.card-body-dashboard {
    overflow: scroll;
}
.card-listing-dashboard {
    background-color: #F4F4F4;
}
.card-listing-dashboard a {
    color: black !important;
    text-decoration: none !important;
}
.color-zone {
    color: var(--primary-color) !important;
    width: auto;
}
/* End dashboard */

/* List customers */
.circle-statut {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.text-note {
    color: #a8a8a8;
}
.btn-blue {
    background-color: var(--third-color) !important;
    color: white;
}
.btn-blue:hover {
    background-color: var(--secondary-color);
    color: white;
}
.buton-picture-replace {
    position: relative;
    top: -34px;
    left: -22px;
}
.buton-picture-replace-edit {
    position: relative;
    top: -34px;
    left: -27px;
}
.icon-selector::before {
    background: red;
    color: white;
    border-radius: 50%;
}
.font-treatment{
    font-size: .7rem !important;
}
.fs-8 {
    font-size: .9rem !important;
}
.fs-9 {
    font-size: .8rem !important;
}
.full-font{
    font-size: .7rem !important;
}
.box-size-trigger{
    width: 20%;
}
.font{
    font-size: .6rem !important;
}
.btn-more-info {
    height: 40px;
    max-height: 40px
}
/* End list customers */
/* choice customer */
.div-picture {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 170px;
    position: relative;
    overflow: hidden;
}
.div-picture:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.5;
    transition: opacity .5s;
}
.card-choice:hover .div-picture:before {
    opacity: 0.7;
    transition: opacity .5s;
}
.card-choice:hover .btn-blue {
    background-color: var(--secondary-color);
    transition: background-color .5s;
}
.card-choice .btn-blue {
    transition: background-color .5s;
}
.card-choice:hover .icon-card {
    color: var(--secondary-color);
    transition: color .5s;
}
.card-choice .icon-card {
    color: white;
    transition: color .5s;
}
.icon-card {
    z-index: 1029;
    font-size: 5rem;
}
.disabled-card {
    pointer-events: none;
}
.disabled-bg {
    background-color: #797979 !important;
}
.icon-disabled-bg {
    color: #797979 !important;
}
.margin-top-button{
    margin-top: 7rem !important;
}
.action-buttons {
    bottom: 20px;
    width: 100%;
}
.check-icon-choice-operator {
    width: 20%;
    position: absolute;
    z-index: 2;
    right: -4%;
    top: -5%;
    background-color: #F4F4F4;
    border-radius: 50%;
}
.btn-orange {
    background-color: #F28C25;
}
.btn-orange:hover {
    background-color: #d07a24;
}
.text-orange {
    color: #F28C25 !important;
}

/* End choice customer */

/* Show customer */
.accordion-button:not(.collapsed) {
    background-color: white !important;
    box-shadow: none !important;
}
#customer_customerForm_alreadyPractice, #customer_medical_form_pacemaker, #customer_medical_form_epileptic,
#customer_medical_form_backgroundTreatment, #customer_medical_form_breastfeeding, #customer_medical_form_medication,
#customer_medical_form_ketoprofen, #customer_medical_form_antibiotics, #customer_medical_form_acne, #customer_medical_form_contraceptive,
#customer_medical_form_seriousDisease, #customer_medical_form_hormonalImbalance, #customer_medical_form_hasBackground,
#customer_medical_form_antiInflammatories, #customer_medical_form_contraceptive, #customer_medical_form_seriousDisease,
#customer_medical_form_pregnant, #operator_session_form_sunExposure, #operator_session_form_indirectSunExposure,
#operator_session_form_tan, #operator_session_form_medication, #operator_session_form_pregnant, #operator_session_form_perfume,
#operator_session_form_perfume, #operator_session_form_essentialOilsUsage, #operator_session_form_lastSessionChange,
#customer_medical_form_contraceptive3Month, #customer_medical_form_contraceptiveHair, #customer_medical_form_whenLastSunExposureNew,
#customer_medical_form_hairColorAsAChildNew, #operator_session_form_hairFallAfterOneMonth, #customer_medical_form_whenSeriousDisease, #customer_medical_form_stillDiseaseTreatment,
#customer_medical_form_solarTreatment, #customer_medical_form_breastfeedingTime, #customer_medical_form_medicalFormTattoo_diabetic,
#customer_medical_form_my_laser_autoimmuneDisease, #customer_medical_form_my_laser_cancer, #customer_medical_form_my_laser_dermatologicalPathology,
#customer_medical_form_my_laser_sensoryDeficit, #customer_medical_form_my_laser_diabetic, #customer_medical_form_my_laser_woundHeadlingDisorders,
#customer_medical_form_my_laser_hematologicalPathology, #customer_medical_form_my_laser_psychiatricHistory,
#customer_medical_form_my_laser_skinPhotosensitivity, #customer_medical_form_my_laser_pacemaker, #customer_medical_form_my_laser_superficialImplant,
#customer_medical_form_my_laser_recentSurgery, #customer_medical_form_my_laser_viralInfection, #customer_medical_form_my_laser_surgicalScar,
#customer_medical_form_my_laser_allergies, #customer_medical_form_my_laser_drugs, #customer_medical_form_my_laser_foodSupplements,
#customer_medical_form_my_laser_medicatedCreams, #customer_medical_form_my_laser_laserRecently, #customer_medical_form_my_laser_peelingRecently,
#customer_medical_form_my_laser_cosmeticTreatment, #customer_medical_form_my_laser_injections,  #customer_medical_form_my_laser_pregnant,
#customer_medical_form_my_laser_breastfeed, #customer_medical_form_my_laser_cancerDate, #customer_medical_form_my_laser_cancerTreatment,
#customer_medical_form_my_laser_abnormalHealing, #customer_medical_form_my_laser_allergicPigment,
#customer_medical_form_my_laser_sunExposureDate {
    display: flex;
}
#customer_customerForm_alreadyPractice > .form-check, #session_checkpointValuesDetatou_0_relief > .form-check,
#session_checkpointValuesDetatou_0_eyebrow > .form-check {
    display: inline-block !important;
}
.inline-form-problem {
    width: 80%;
}
#customer_customerForm_alreadyPractice > .form-check:nth-child(1), #customer_medical_form_pacemaker > .form-check:nth-child(1),
#customer_medical_form_epileptic > .form-check:nth-child(1), #customer_medical_form_backgroundTreatment > .form-check:nth-child(1),
#customer_medical_form_breastfeeding > .form-check:nth-child(1), #customer_medical_form_medication > .form-check:nth-child(1),
#customer_medical_form_ketoprofen > .form-check:nth-child(1), #customer_medical_form_antibiotics > .form-check:nth-child(1),
#customer_medical_form_acne > .form-check:nth-child(1), #customer_medical_form_contraceptive > .form-check:nth-child(1),
#customer_medical_form_seriousDisease > .form-check:nth-child(1), #customer_medical_form_hormonalImbalance > .form-check:nth-child(1),
#customer_medical_form_hasBackground > .form-check:nth-child(1), #customer_medical_form_antiInflammatories > .form-check:nth-child(1),
#customer_medical_form_contraceptive > .form-check:nth-child(1), #customer_medical_form_seriousDisease > .form-check:nth-child(1),
#customer_medical_form_pregnant > .form-check:nth-child(1), #operator_session_form_sunExposure> .form-check:nth-child(1),
#operator_session_form_indirectSunExposure > .form-check:nth-child(1), #operator_session_form_tan > .form-check:nth-child(1),
#operator_session_form_medication > .form-check:nth-child(1), #operator_session_form_pregnant > .form-check:nth-child(1),
#operator_session_form_perfume > .form-check:nth-child(1), #operator_session_form_perfume > .form-check:nth-child(1),
#operator_session_form_essentialOilsUsage > .form-check:nth-child(1), #operator_session_form_lastSessionChange > .form-check:nth-child(1),
#customer_medical_form_contraceptive3Month > .form-check:nth-child(1), #customer_medical_form_contraceptiveHair > .form-check:nth-child(1),
#customer_medical_form_whenLastSunExposureNew > .form-check:nth-child(1), #customer_medical_form_hairColorAsAChildNew > .form-check:nth-child(1),
#operator_session_form_hairFallAfterOneMonth > .form-check:nth-child(1), #customer_medical_form_whenSeriousDisease > .form-check:nth-child(1),
#customer_medical_form_stillDiseaseTreatment > .form-check:nth-child(1), #customer_medical_form_solarTreatment > .form-check:nth-child(1),
#customer_medical_form_breastfeedingTime > .form-check:nth-child(1), #customer_medical_form_medicalFormTattoo_diabetic > .form-check:nth-child(1),
#customer_medical_form_my_laser_sensoryDeficit > .form-check:nth-child(1), #customer_medical_form_my_laser_diabetic > .form-check:nth-child(1),
#customer_medical_form_my_laser_woundHeadlingDisorders > .form-check:nth-child(1), #customer_medical_form_my_laser_hematologicalPathology > .form-check:nth-child(1),
#customer_medical_form_my_laser_psychiatricHistory > .form-check:nth-child(1), #customer_medical_form_my_laser_skinPhotosensitivity > .form-check:nth-child(1),
#customer_medical_form_my_laser_pacemaker > .form-check:nth-child(1), #customer_medical_form_my_laser_superficialImplant > .form-check:nth-child(1),
#customer_medical_form_my_laser_recentSurgery > .form-check:nth-child(1), #customer_medical_form_my_laser_viralInfection > .form-check:nth-child(1),
#customer_medical_form_my_laser_surgicalScar > .form-check:nth-child(1), #customer_medical_form_my_laser_allergies > .form-check:nth-child(1),
#customer_medical_form_my_laser_drugs > .form-check:nth-child(1), #customer_medical_form_my_laser_foodSupplements > .form-check:nth-child(1),
#customer_medical_form_my_laser_medicatedCreams > .form-check:nth-child(1), #customer_medical_form_my_laser_laserRecently > .form-check:nth-child(1),
#customer_medical_form_my_laser_peelingRecently > .form-check:nth-child(1),
#customer_medical_form_my_laser_cosmeticTreatment > .form-check:nth-child(1), #customer_medical_form_my_laser_injections > .form-check:nth-child(1),
#customer_medical_form_my_laser_autoimmuneDisease > .form-check:nth-child(1), #customer_medical_form_my_laser_cancer > .form-check:nth-child(1),
#customer_medical_form_my_laser_dermatologicalPathology > .form-check:nth-child(1), #customer_medical_form_my_laser_pregnant > .form-check:nth-child(1),
#customer_medical_form_my_laser_breastfeed > .form-check:nth-child(1), #customer_medical_form_my_laser_cancerDate > .form-check:nth-child(1),
#customer_medical_form_my_laser_cancerTreatment > .form-check:nth-child(1), #customer_medical_form_my_laser_abnormalHealing > .form-check:nth-child(1),
#customer_medical_form_my_laser_allergicPigment > .form-check:nth-child(1), #customer_medical_form_my_laser_sunExposureDate  > .form-check:nth-child(1) {
    display: none !important;
}

.icon-btn-add-plus {
    height: 30px;
    width: 30px;
    background-color: var(--secondary-color);
    border-radius: 50%;
}
#table-already-practiced-shaving, #otherCustomerShavingZones {
    display: none;
}
.btn-edit-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.shadow-custom {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .500) !important;
}
@media only screen and (max-width: 767px) {
    .form-check label {
        font-size: 13px;
    }
}
/* End customer */

.nav-pills .nav-link.active {
    box-shadow: 0 2px 10px rgba(67, 94, 190, 0.5);
}

.nav-tabs,
.nav-tabs .nav-link {
    border: none;
}

.nav-tabs .nav-link:hover {
    border: none;
    text-shadow: 0 0 2px rgba(67, 94, 190, 0.3);
}

.nav-tabs .nav-link.active {
    border: none;
    color: var(--third-color) !important;
    position: relative;
}

.nav-tabs .nav-link.active:after {
    background-color: var(--third-color) !important;
    bottom: 0;
    box-shadow: 0 2px 5px rgba(67, 94, 190, 0.5);
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%;
}

.nav-tabs .nav-link {
    background: none;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    margin-bottom: -1px;
    color: var(--secondary-color);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #f2f7ff;
}

/* Message */
#messageCustomer {
    z-index: 99999;
}
.font-size-modal{
    font-size: .9rem;
}
.height-modal-alert {
    height: 250px;
}
.modal-message {
    max-width: 70% !important;
    width: 70% !important;
}
.chat-app .people-list {
    width: 280px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px;
    z-index: 7
}

.people-list {
    -moz-transition: .5s;
    -o-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s
}

.people-list .chat-list li {
    padding: 10px 15px;
    list-style: none;
    border-radius: 3px
}

.people-list .chat-list li:hover {
    background: #efefef;
    cursor: pointer
}

.people-list .chat-list li.active {
    background: #efefef
}

.people-list .chat-list li .name {
    font-size: 15px
}

.people-list .chat-list img {
    width: 45px;
    border-radius: 50%
}

.people-list img {
    float: left;
    border-radius: 50%
}

.people-list .about {
    float: left;
    padding-left: 8px
}

.people-list .status {
    color: #999;
    font-size: 13px
}

.chat .chat-header {
    padding: 15px 20px;
    border-bottom: 2px solid #f4f7f6
}

.chat .chat-header img {
    float: left;
    border-radius: 40px;
    width: 40px
}

.chat .chat-header .chat-about {
    float: left;
    padding-left: 10px
}

.chat .chat-history {
    padding: 20px;
    border-bottom: 2px solid #fff
}

.chat .chat-history ul {
    padding: 0
}

.chat .chat-history ul li {
    list-style: none;
    margin-bottom: 30px
}

.chat .chat-history ul li:last-child {
    margin-bottom: 0px
}

.chat .chat-history .message-data {
    margin-bottom: 15px
}

.chat .chat-history .message-data img {
    border-radius: 40px;
    width: 40px
}

.chat .chat-history .message-data-time {
    color: #434651;
    padding-left: 6px
}

.chat .chat-history .message {
    color: #444;
    padding: 18px 20px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    display: inline-block;
    position: relative
}

.chat .chat-history .message:after {
    bottom: 99%;
    /*left: 7%;*/
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .my-message {
    background: #efefef
}

.chat .chat-history .my-message:after {
    bottom: 99%;
    left: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #efefef;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .other-message {
    background: var(--primary-color) !important;
    text-align: right;
    color: white;
}

.chat .chat-history .other-message:after {
    border-bottom-color: var(--primary-color) !important;
    /*left: 93%*/
    right: 10%;
}
.other-message-alert:after {
    border-bottom-color: #dc3545 !important;
    right: 10%;
}

.chat .chat-message {
    padding: 20px
}

.online,
.offline,
.me {
    margin-right: 2px;
    font-size: 8px;
    vertical-align: middle
}

.online {
    color: #86c541
}

.offline {
    color: #e47297
}

.me {
    color: #1d8ecd
}

.float-right {
    float: right
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

/*Css for treatments list*/
.height-treatment-pills {
    height: 83px!important;
}

.circle-treatment,
.circle {
    width:20px!important;
    height:20px!important;
    border-radius:50px;
}
.circle-treat-side {
    width: 19px !important;
    height: 16px !important;
    border-radius: 50px;
}

.first-div-rounded {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}

.last-div-rounded {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.bg-pill-treatment {
    background-color:#F4F4F4!important;
}
.image-container {
    position: relative;
    height: 125px;
}
.image-container img {
    width: auto;
    height: 125px;
    display: block; /* pour éviter tout espace en dessous de l'image */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Noir avec 50% de transparence */
}
.delete-button {
    background-color:#63C3C9!important;
}
.history-button {
    background-color:black!important;
    height:40px!important
}
.modify-button {
    background-color:#DBAE38!important;
    height:40px!important
}
.end-button {
    background-color:#DB3838!important;
    height:40px!important
}
/*end css for treatment list*/

/* css for new zone */
#collapseOne, #zoneAccordion {
    background-color: #F4F4F4;
}

.accordion {
    --bs-accordion-bg: #F4F4F4 !important;
}

.custom-button:not(.collapsed) div.col-2 {
    background-image: url('/assets/images/samples/button-collapse.svg')!important;
    background-repeat: no-repeat!important;
    background-size: contain!important;
    background-position: center!important;
    width: 10px!important;
}
.custom-button div.col-2 {
    background-image: url('/assets/images/samples/button-collapsed.svg')!important;
    background-repeat: no-repeat!important;
    background-size: contain!important;
    background-position: center!important;
    width: 10px!important;
}
.fixed-button {
    position: fixed!important;
    bottom : 0!important;
    right:0!important;
    width:100px!important;
}
#checkpointValuesForm div.mb-3 {
    margin-bottom: 0px!important;
}
/* end css for new zone */

/* css for treatment table */
#treatment-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}
.treatment-detail th {
    background-color: #63C3C9 !important;
    color: white !important;
    text-align: center !important;
    border: 1px solid black!important;
    padding-bottom: 10px!important;
    padding-top: 10px !important;
}
.treatment-detail tr {
    width: 100% !important;
}
.treatment-detail td {
    text-align: center !important;
}
.treatment-detail td.empty {
    background-color: #AEAEAE !important;
}
.treatment-detail tr.first td:not(.empty) {
    background-color: rgb(99,195,201,0.3) !important;
    color: black !important;
}
.treatment-detail tr.first table td {
    font-size: 10px !important;
    height: 100%!important;
    padding-bottom: 10px!important;
    padding-top: 10px !important;
}
.treatment-detail table {
    width: 100% !important;
    height: 50px !important;
}
.treatment-detail button {
    border-radius: 50px !important;
    padding: 0px !important;
    margin: 0px !important;
}
/* end css for treatment table */

/* start css for bilan */
#validateBilan h2 {
    font-weight: 400!important;
}
#validateBilan span, #validateBilan label {
    color: var(--primary-color) !important!important;
    font-weight: 600!important;
}
#validateBilan p {
    margin: 0px!important;
    padding:0px!important;
    color:grey!important;
    font-size:15px!important;
}
#validateBilan div#medicalForm div.col-12 {
    margin-top:0.5rem!important;
    margin-bottom: 0.5rem!important;
}
.treatment-red {
    color: red !important;
}
.treatment-orange-red {
    color:orangered !important;
}
.treatment-orange {
    color:orange !important;
}
.treatment-yellow {
    color: rgba(255, 213, 0, 0.56) !important;
}
.treatment-yellow-green {
    color:yellowgreen !important;
}
.treatment-green {
    color:green !important;
}
/* end css for bilan */

@media (max-width: 768px) {
    .first-div-rounded {
        border-top-right-radius: 20px !important;
        border-top-left-radius: 20px !important;
        border-bottom-left-radius: 0 !important;
    }
    .last-div-rounded {
        border-radius: 0 0 20px 20px !important;
    }
    .treatment-div div:not(#last-div) {
        border-bottom: 20px !important;
    }
    .treatment-div .col-md-4 div.d-flex {
        justify-content: center!important;
        align-items: start!important;
        flex-direction: column!important;
    }
    .treatment-div .col-md-3.flex-row div.height-treatment-pills {
        height: 75px!important;
    }
    .treatment-div #last-div {
        border-bottom-width: 5px!important;
    }
}

@media only screen and (max-width: 767px) {
    .chat-app .people-list {
        height: 465px;
        width: 100%;
        overflow-x: auto;
        background: #fff;
        left: -400px;
        display: none
    }
    .chat-app .people-list.open {
        left: 0
    }
    .chat-app .chat {
        margin: 0
    }
    .chat-app .chat .chat-header {
        border-radius: 0.55rem 0.55rem 0 0;
    }
    .chat-app .chat-history {
        height: 350px;
        max-height: 350px;
        overflow-x: auto;
    }
    .chat-detail {
        height: 600px !important;
        max-height: 600px;
    }
}

.chat-history {
    max-height: 300px;
    height: 300px;
    overflow-y: auto;
}

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
.img-message-operator {
    margin-right: -1.5%;
}
.bi-camera-fill{
    font-size: 25px;
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .chat-app .chat-list {
        height: 650px;
        max-height: 650px;
        overflow-x: auto
    }
    .chat-app .chat-history {
        height: 600px;
        max-height: 600px;
        overflow-x: auto
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .chat-app .chat-list {
        height: 480px;
        max-height: 480px;
        overflow-x: auto
    }
    .chat-app .chat-history {
        height: 420px;
        max-height: 420px;
        overflow-x: auto
    }
}

#listMessages label {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 5px 10px;
    font-family: 'Helvetica', sans-serif;
    transition: .5s;
}

#listMessages label:hover {
    background-color: #eee;
}

#messageAlertCustomer, #SendEmailTreatmentModal {
    z-index: 999999;
}
/* End message */
.legend-size {
    font-size: 1.2rem;
}
/* End Legend */

.index-modal {
    z-index: 999999 !important;
}

/* Presentation Caroussel*/
.carousel-control-next{
    right: 32px !important;
}

.picture-presentation {
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    height: 75vh;
    overflow: hidden;
}

.picture-presentation-slide-0 {
    background-image: url("../images/presentation/slider 0.jpg");
}

.circle-operator {
    width:10px!important;
    height:10px!important;
    border-radius:50px;
}

.manage-operator{
    border: 1px solid #707070 !important;
    color: #707070!important;
    height:40px!important
}

.manage-operator-button{
    border: 1px solid #707070 !important;
}

.manage-operator-text{
    color: #707070!important;
}

.manage-operator-date{
    font-size: 0.75rem !important;
}

.manage-operator-button-disabled{
    background-color:#C9C9C9 !important;
}
.picture-presentation-slide-1 {
    background-image: url("../images/presentation/slider 1.jpg");
}

.picture-presentation-slide-2 {
    background-image: url("../images/presentation/slider 2.jpg");
}

.picture-presentation-slide-3 {
    background-image: url("../images/presentation/slider 3.jpg");
}

.picture-presentation-slide-4 {
    background-image: url("../images/presentation/slider 4.jpg");
}

.picture-presentation-slide-5 {
    background-image: url("../images/presentation/slider 5.jpg");
}

.picture-presentation-slide-6 {
    background-image: url("../images/presentation/slider 6.jpg");
}
.picture-presentation-slide-7 {
    background-image: url("../images/presentation/slider 7.jpg");
}
/* End Presentation */

/* Formulaire Opérateur*/
.form-operator-create > div,
div.form-techno-create > div.mb-3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
    margin-right: 2em;
}
/* End Formulaire Opérateur*/

/** Doctor partner **/
.text-doctor-partner {
    margin-top: 7rem;
}
#btn-camera {
    height: 50px;
    width: 50px;
}
#display-images {
    min-height: 110px;
}
/** End doctor partner **/

.btn-success {
    background-color: var(--primary-color) !important!important;
    color: white!important;
}
/** Choice Zone  **/
.col-list-zone {
    position: relative;
}
.icon-check-zone {
    width: 35px;
    z-index: 2;
    position: absolute;
    right: 10px;
    margin-top: -5px;
}
.picture-session {
    height: 100px;
    width: 100px;
}
/** End choice zone **/

/** Operator session **/
#ml-session > #session_checkpointValues_0_melanineMeter, #ml-session > #session_checkpointValues_1_melanineMeter,
#ml-session > #session_checkpointValues_2_melanineMeter, #ml-session > #session_checkpointValues_3_melanineMeter,
#ml-session > #session_checkpointValues_4_melanineMeter {
    width: 10%;
}

.bilan-hair-type > #session_checkpointValues_0_hairType, .bilan-hair-type > #session_checkpointValues_1_hairType,
.bilan-hair-type > #session_checkpointValues_2_hairType, .bilan-hair-type > #session_checkpointValues_3_hairType,
.bilan-hair-type > #session_checkpointValuesLasea_0_hairType, .bilan-hair-type > #session_checkpointValuesLasea_1_hairType,
.bilan-hair-type > #session_checkpointValuesLasea_2_hairType, .bilan-hair-type > #session_checkpointValuesLasea_3_hairType {
    display: flex;
}
/** End operator session **/
#signatureDisplay {
    display: none;
}
.height-signature {
    height: 320px;
}
.font-size-title {
    font-size: 1rem !important;
}

@media screen and (max-device-width: 768px) {
    #messageDoctor .modal-message {
        max-width:100%!important;
        width: 100%!important;
    }
    #messageDoctor .modal-dialog {
        margin: 0!important;
    }
    #messageDoctor #sendComment {
        margin-bottom: 20px!important;
    }
}

.loader {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    column-gap: 5px;
    height: 200px;
    width: 200px;
    background-color: #fff;
    border-radius: 1rem;
    padding-bottom: 4rem;
}


.loader span {
    --duration: 1s;
    height: var(--height);
    width: 10px;
    background-color: rgba(0, 213, 255, 1);
    border: none;
    border-radius: 5px;
    animation: animation var(--duration) ease-in-out infinite;
}

.loader span:nth-child(1) {
    --height: 40px;
    animation-delay: 0.25s;
}

.loader span:nth-child(2) {
    --height: 60px;
    animation-delay: 0.55s;
}

.loader span:nth-child(3) {
    --height: 75px;
    animation-delay: 0.75s;
}

.loader span:nth-child(4) {
    --height: 60px;
    animation-delay: 1s;
}

.loader span:nth-child(5) {
    --height: 40px;
    animation-delay: 1.25s;
}

.attribute{
    position: absolute;
    bottom: 10px;
}
.row-action-button-doctor {
    position: fixed;
    bottom: 0;
}
@keyframes animation {
    0%, 100% {
        transform: translateY(25%);
        opacity: 0.4;
        box-shadow: 0 0 20px rgba(0, 213, 255, 0.8);
    }
    50% {
        transform: translateY(0);
        opacity: 1;
        box-shadow: none;
        height: calc(var(--height) + 25px);
    }
}

.loader-container {
    font-family: sans-serif;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'poppins';
}
#alert-session {
    margin-top: -74px;
}

/** Newsletters **/
#pagination .page-link  {
    color: var(--secondary-color) !important;
}
#pagination .active .page-link {
    color: white !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
/** End newsletters **/
.card-header-operator-dashboard {
    height: 70px;
}

/** Mobile **/
@media screen and (max-width: 767px) {
    #background-menu {
        height: 300px;
        overflow-y: scroll !important;
    }
    .offcanvas-header {
        height: 250px;
    }
    .row-canvas {
        height: 200px
    }
    .box-size-trigger {
        width: 39%;
    }
    .btn-more-info {
        width: 100%;
    }
    .check-icon-choice-operator {
        width: 16%;
    }
    .margin-top-button {
        margin-top: 2rem !important;
    }
    .btn-mobile {
        width: 100%;
    }
    .modal-message {
        width: 96% !important;
        max-width: 96% !important
    }
    #table-already-practiced-shaving, #table-customerShavingZone {
        overflow-x: scroll;
    }
    #table-already-practiced-shaving table tr th, #table-customerShavingZone table tr th, .treatment-detail tr th,
    #table-session tr th {
        width: 140px !important;
        min-width: 140px !important;
    }
    .height-signature {
        height: 200px;
    }
    .col-list-zone-mobile {
        margin-top: -8px;
    }
    .buton-picture-replace {
        top: -104px;
        left: 64px;
    }
    .icon-selector {
        font-size: 30px;
    }
    #alert-session {
        margin-top: 0;
    }
    #ml-session > #session_checkpointValues_0_melanineMeter, #ml-session > #session_checkpointValues_1_melanineMeter,
    #ml-session > #session_checkpointValues_2_melanineMeter, #ml-session > #session_checkpointValues_3_melanineMeter,
    #ml-session > #session_checkpointValues_4_melanineMeter {
        width: 15%;
    }
    .card-title {
        font-size: 15px !important;
    }
    .card-header-operator-dashboard {
        height: 50px;
    }
    .text-doctor-partner {
        margin-top: 1rem;
    }
    .doctor-button {
        font-size: 11px;
        padding: 5% 2%;
    }
    .row-action-button-doctor {
        position: relative;
    }
}
/** Tablette portrait **/
@media screen and (min-width: 768px) and (max-width: 1200px) {
    h5 {
        font-size: 1rem;
    }
    .offcanvas-body {
        overflow-y: scroll !important;
    }
    #background-menu {
        height: 300px;
        overflow-y: scroll !important;
    }
    .offcanvas-header {
        min-height: 250px;
    }
    .row-canvas {
        height: 200px;
    }
    .text-note {
        font-size: 14px;
    }
    .first-div-rounded {
        border-top-right-radius: 20px !important;
        border-top-left-radius: 20px !important;
        border-bottom-left-radius: 0 !important;
    }
    .last-div-rounded {
        border-radius: 0 0 20px 20px !important;
        height: 330px;
    }
    .row-info-listing-zone {
        height: 120px;
    }
    .buttons-action-listing-zone {
        height: 161px;
    }
    .btn-mobile {
        width: 100%;
    }
    .modal-satisfaction {
        max-width: 720px !important;
    }
    .col-list-zone-mobile {
        margin-top: -8px;
    }
    #ml-session > #session_checkpointValues_0_melanineMeter, #ml-session > #session_checkpointValues_1_melanineMeter,
    #ml-session > #session_checkpointValues_2_melanineMeter, #ml-session > #session_checkpointValues_3_melanineMeter,
    #ml-session > #session_checkpointValues_4_melanineMeter {
        width: 7%;
    }
    .card-title {
        font-size: 13px !important;
    }
    .card-header-operator-dashboard {
        height: 50px;
    }
}

/** center message **/
.tab-message {
    height: 700px;
    overflow-y: scroll;
}
#center-message .nav-pills {
    --bs-nav-pills-link-active-bg: var(--secondary-color) !important;
}
#center-message .nav-pills .nav-link.active {
    box-shadow: 0 2px 10px rgba(76, 78, 84, 0.5);
}
#center-message .chat-history-center {
    max-height: 500px;
    height: 500px;
    overflow-y: auto;
}
#center-message .nav-link.active {
    color: white !important;
    background-color: var(--secondary-color) !important;

}
#center-message .nav-link {
    color: var(--secondary-color) !important;
    background-color: #ffffff !important;
}
#center-message .last-message {
    font-size: 10px !important;
    color: #c8c8c8;
}
#center-message .date-message {
    font-size: .9rem;
}
.recipient-message {
    font-size: .8rem !important;
    color: #c8c8c8;
}
#form-message-new-subject {
    margin-top: 170px;
}

/* for new technologies in treatmentlist and bilan */
div.default-logo_california {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
}

div.default-logo_detatouage {
    display: flex!important;
    align-items: center!important;
}

div.default-logo_detatouage img {
    width: 100%!important;
    height: auto!important;
}

div.form-validated-zone-bilan.newTechnology {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain!important;
}