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

@font-face {
    font-family: "Roboto Light Italic";
    src: url("../assets/fonts/Roboto/Roboto-LightItalic.ttf") format("truetype");
    font-weight: lighter;
    font-style: italic;
}

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

@font-face {
    font-family: "Roboto Medium";
    src: url("../assets/fonts/Roboto/Roboto-Medium.ttf") format("truetype");
    font-weight: medium;
}

@font-face {
    font-family: "Roboto Italic";
    src: url("../assets/fonts/Roboto/Roboto-Italic.ttf") format("truetype");
    font-style: italic;
}

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

:root {
    --btn-normal: #1DA1F2;
    --btn-hover: #8DD0F8;
    --btn-active: #CED6E6;
    --operator-background: #F0EEE7;
    --operator-messages: #847F70;
    --clients-background: #dadafd;
    --clients-bg2: #bebefd;
    --warning-messages: #FF6550;
    --marron-clair : #898476;
    --couleur-banner : #1d8a8a;
    --btn-banner : #62ffaa;
}

input:invalid+span:after {
    content: '✖';
    padding-left: 5px;
  }
  
  input:valid+span:after {
    content: '✓';
    padding-left: 5px;
  }

.line-link{
    max-width:100%;
    display:inline;
    margin:0 auto;
    padding:0 0.2em;
    font-family:"Roboto Regular",sans-serif;
    font-size:13px;
    color:#169475;
}

#modal-box{
    width:100%;
    max-width:100%;
    height:100vh;
    max-height:100vh;
    display:none;
    backdrop-filter:blur(4px);
    margin:0 auto;
    padding:0;
    position:fixed;
    top:0;
    left:0;
}
#modal-content{
    max-width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:#fff;
    font-family:"Roboto Medium", sans-serif;
    font-size:14px;
    line-height:1.3em;
    text-align:center;
    margin:0 auto;
    padding:2em;
    border-radius:4px;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover{
    cursor:pointer;
}

.warning-annonce {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0.25em auto;
    padding: 0.15em;
    font-family: 'Roboto Medium', sans-serif;
    font-size: 1.1em;
    line-height: 1.3em;
    color:#E50000;
}

.test-container {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0.5em auto;
    padding: 0.5em;
    border: 2px solid #e92626;
}

html, body {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100vh;
    max-height: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
html::-webkit-scrollbar {
    width: 0.5em;
    background-color: #FBFCFC; 
  }
  html::-webkit-scrollbar-thumb {
      background: #2E86C1;
      border-radius:4px;
  }

.main-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    max-height:auto;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background-image:url('../assets/images/zen_back_02.jpg');
    background-position: center 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.main-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    min-height: 10vh;
    margin: 0;
    padding: 1.5em 1.2em;
    position: relative;
    background:rgba(251,251,251,0.5);
    backdrop-filter: blur(8px);
    z-index:0;
}


.main-head-title {
    max-width:100%;
    display: block;
    margin: 0;
    padding: 0 5px;
    color:var(--couleur-banner);
    font-family: sans-serif;
    text-transform: uppercase;
    z-index:2;
    position:relative;
}

.main-nav {
    max-width: 100%;
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    margin: 0;
    padding: 0;
    z-index:2;
    position:relative;
}

.main-menu {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    flex:1;
    list-style:none;
    margin: auto;
    padding: 0;
    position: relative;
    transition: 0.3s all ease-in-out;
}

.main-menu-items {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex:1;
    width: 100%;
    max-width: 100%;
    margin: 0 5px;
    padding: 0;
    position: relative;
}

.main-menu-links {
    text-decoration: none;
    max-width:100%;
    display: block;
    min-height:5vh;
    margin: 0 auto;
    padding:0.15em;
    text-align:center;
    color:var(--couleur-banner);
    font-family: monospace;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    position: relative;
}

.main-menu-links:hover {
    cursor:pointer;
    text-decoration: underline;
}

.home-link::before{
    content:'';
    width:24px;
    height:24px;
    display:block;
    margin:0 auto;
    padding:0;
    border-radius:8px;
    background:url('../assets/images/icons/house_24px_negative.png');
    background-position:center;
    background-size: contain;
    background-repeat:no-repeat;
}

.guide-link::before{
    content:'';
    width:24px;
    height:24px;
    display:block;
    margin:0 auto;
    padding:0;
    border-radius:8px;
    background:url('../assets/images/icons/two-coins_24px_negative.png');
    background-position:center;
    background-size: contain;
    background-repeat:no-repeat;
}

.register-link::before{
    content:'';
    width:24px;
    height:24px;
    display:block;
    margin:0 auto;
    padding:0;
    border-radius:8px;
    background:url('../assets/images/icons/inscription_24px_negative.png');
    background-position:center;
    background-size: contain;
    background-repeat:no-repeat;
}

.connexion-link::before{
    content:'';
    width:24px;
    height:24px;
    display:block;
    margin:0 auto;
    padding:0;
    border-radius:8px;
    background:url('../assets/images/icons/deconnexion_24px_negative.png');
    background-position:center;
    background-size: contain;
    background-repeat:no-repeat;
}

.coins-link::before{
    content:'';
    width:24px;
    height:24px;
    display:block;
    margin:0 auto;
    padding:0;
    border-radius:8px;
    background:url('../assets/images/icons/two-coins_24px_negative.png');
    background-position:center;
    background-size: contain;
    background-repeat:no-repeat;
}

.selection-link::before{
    content:'';
    width:24px;
    height:24px;
    display:block;
    margin:0 auto;
    padding:0;
    border-radius:8px;
    background:url('../assets/images/icons/talk_24px_negative.png');
    background-position:center;
    background-size: contain;
    background-repeat:no-repeat;
}

.piece-jointe-link::before{
    content:'';
    width:24px;
    height:24px;
    display:block;
    margin:0 auto;
    padding:0;
    border-radius:8px;
    background:url('../assets/images/icons/piece_jointe_24px_negative.png');
    background-position:center;
    background-size: contain;
    background-repeat:no-repeat;
}

.messages-link::before{
    content:'';
    width:24px;
    height:24px;
    display:block;
    margin:0 auto;
    padding:0;
    border-radius:8px;
    background:url('../assets/images/icons/chat_bubble_24px_negative.png');
    background-position:center;
    background-size: contain;
    background-repeat:no-repeat;
}

.deconnexion-link::before{
    content:'';
    width:24px;
    height:24px;
    display:block;
    margin:0 auto;
    padding:0;
    border-radius:8px;
    background:url('../assets/images/icons/deconnexion_24px_negative.png');
    background-position:center;
    background-size: contain;
    background-repeat:no-repeat;
}

.wrapper {
    max-width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.wrapper_btn {
    width: 100%;
    max-width: 100%;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0 0;
    border: none;
    background: none;
    color: #fff;
    font-family: sans-serif;
    font-size: 1.015em;
    transition: 0.475s all ease-in-out;
    font-weight: bold;
}

.wrapper_btn:hover {
    cursor:pointer;
    background: rgb(185, 185, 185);
    color: #000;
}

.wrapper_btn:active, .wrapper_btn:focus {
    cursor:pointer;
    background: rgb(185, 185, 185);
    color: #000;
}


.main-sections {
    max-width: 100%;
    height: 90vh;
    display: block;
    margin: 0;
    padding: 0 1em;
    overflow-y: auto;
    background: linear-gradient(to left, #45454535 55%, #ffffff10);
    position: relative;
}

.main-articles {
    width:96%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin: 3em auto;
    padding: 0.4em;
    background:rgba(251,251,251,0.7);
    backdrop-filter: blur(4px);
    border-radius: 4px;
}

.main-articles-aside{
    max-width: 100%;
    display: block;
    margin: 1em auto;
    padding:0;
    background: #ffffff;
    border-radius: 4px;
}

.main-articles-title {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 5px auto;
    padding: 0.5em;
}

.inscription-form, .connexion-form {
    min-width: 75%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0.5em;
}

.inscription-form label, .connexion-form label {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0.2em;
    text-align: center;
    font-family: 'Roboto Regular', sans-serif;
    font-size: 15px;
    line-height: 2em;
}

.inscription-form input:not([type='submit']), .connexion-form input:not([type='submit']) {
    width: 100%;
    max-width: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 0.4em auto;
    padding: 0.2em 0.5em;
}

.inscription-form select, .connexion-form select {
    width: 100%;
    max-width: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 0.4em auto;
    padding: 0.2em 0.5em;
}

.inscription-form input[type="submit"], .connexion-form input[type="submit"] {
    width: 100%;
    max-width: 80%;
    display: block;
    margin: 0 auto;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #169475;
    font-family: 'Roboto Medium', sans-serif;
    font-size: 0.9em;
    letter-spacing: 0.3px;
    border-radius: 4px;
    border:none;
}

form input[type="submit"]:hover {
    background: #16be75;
    outline-color: #16be75;
    cursor: pointer;
}

form input[type="submit"]:active {
    background: #48be8b;
    outline-color: #48be8b;
    opacity: 0.8;
    cursor: pointer;
}

.home-sections {
    padding: 0 1em;
}

.home-articles {
    width: 100%;
    max-width: 100%;
    padding: 1em 1.5em;
    background: #ffffff70;
    backdrop-filter: blur(2px);
}

.home-articles-title {
    font-family: 'Roboto Light', sans-serif;
    color: #4C5570;
}

.guide_container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin: 1.5em auto;
    padding: 1.5em 1em;
    background: #ffffff30;
    backdrop-filter: blur(2px);
    border-radius: 4px;
}

.guide-container-title {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0.5em auto;
    padding: 0;
    transform: translateY(-45%);
    font-family: 'Roboto Medium', sans-serif;
    color: #2A3450;
}

.guide-container-title-home {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0.5em auto;
    padding: 0;
    transform: translateY(-45%);
    font-family: 'Roboto Regular', sans-serif;
    color:var(--couleur-banner);
}

.guide-container-description {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin: 1em auto;
    padding: 0.5em 12.5%;
    font-family: 'Roboto Regular', sans-serif;
    font-size: 15px;
    line-height: 2em;
    background: #edeef3;
    border-radius: 4px;
    position: relative;
}

.guide-container-description-home {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align:center;
    margin: 1em auto;
    padding: 0.5em 12.5%;
    font-family: 'Roboto Regular', sans-serif;
    font-size: 15px;
    line-height: 2em;
    background: #d7dae480;
    backdrop-filter: blur(2px);
    border-radius: 4px;
    position: relative;
}

.goldy_span {
    width: 100%;
    display: block;
    margin: 0.2em auto;
    padding: 0.1em;
    font-family: 'Roboto Bold', sans-serif;
    font-size: 18px;
    color:var(--couleur-banner);
}

.goldy_span_connect{
    width:100%;
    max-width:100%;
    display:block;
    margin:0.1em auto 0.5em auto;
    padding:0.1em;
    font-family:'Roboto Bold', sans-serif;
    font-size:0.8em;
    color:#169475;
}

.goldy_span_disconnect{
    width:100%;
    max-width:100%;
    display:block;
    margin:0.1em auto 0.5em auto;
    padding:0.1em;
    font-family:'Roboto Bold', sans-serif;
    font-size:0.8em;
    color:#164894;
}

.packs_nav {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0.25em auto;
    padding: 0;
    position:relative;
}

.packs_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 1em;
    list-style: none;
}

.packs_list_items {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0.8em auto;
    padding: 0;
}

.packs_list_links {
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0.5em 0.8em;
    text-decoration: none;
    border: 1px solid #169475;
    background: #169475;
    color: #f2f3f4;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.packs_list_links:hover {
    color: #f2f3f4;
    background: #16BE75;
}

.packs_list_links:active {
    color: #f2f3f4;
    background: #48be8b;
    opacity:0.8;
}
.messages-container {
    width: 100%;
    max-width: 100%;
    min-height: 90vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1em;
    row-gap: 1em;
    grid-auto-rows: minmax(20vh, auto);
    margin: 0;
    padding: 0.5em 1em 0.5em 1em;
}

.messages-sections, .messages-aside {
    width: 100%;
    max-width: 100%;
    min-height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    padding: 1em;
    background: var(--operator-background);
    box-shadow: inset 0px 0px 3px 3px #656565;
    position: relative;
}

.operator-aside, .messages-operator-aside {
    grid-column: 1;
    grid-row: 1;
}

.messages-sections {
    grid-column: 2/5;
    grid-row: 1;
}

.client-aside {
    grid-column: 4/5;
    grid-row: 1;
}

.messages-view {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0em 0.6em 0.8em 0.6em;
    overflow: auto;
}

.messages-nav {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 1em;
    box-shadow: inset 0px 0px 2px 2px #858585;
    border-radius: 4px;
}

.messages-list {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.messages-list-items {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0.5em auto;
    padding: 0.5em;
}

.messages-list-items:nth-child(2n+1) {
    background: #b6bdca85;
    border-right: 0.4em solid #00BDBF;
    border-left: 0.4em solid #00BDBF;
    border-radius: 4px;
    box-shadow: 0px 2px 5px 0px #000;
}

.messages-list-items:nth-child(2n) {
    background: #e8e8e8;
    border-right: 0.4em solid #a7afc5;
    border-left: 0.4em solid #a7afc5;
    border-radius: 4px;
    box-shadow: 0px 2px 5px 0px #000;
}

.messages-list-author {
    max-width: 100%;
    display: block;
    margin: 0.5em;
    padding: 0;
    text-align: left;
    color: #2b3e49;
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}

.messages-list-links {
    width: 40rem;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0.4em;
    text-align: center;
    color: #016b6d;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.messages-list-p {
    width: 40rem;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0.4em;
    text-align: center;
    color: #016b6d;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.messages-list-date {
    max-width: 100%;
    display: block;
    margin: 0.5em;
    padding: 0.5em;
    text-align: center;
    color: #507050;
    font-family: sans-serif;
    font-size: 0.6em;
    font-weight: bolder;
}


.operators-selection-sections {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;
}

#banner-selection-container{
    width:100%;
    max-width:100%;
    display:block;
    margin:1em auto;
    padding:1em;
    text-align:center;
    background:rgba(251,251,251,0.5);
    backdrop-filter: blur(4px);
}

#time-selection{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    margin:auto;
    padding:0;
}

.operators-selection-articles {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0.5em;
    grid-row-gap: 0.5em;
    grid-auto-rows: minmax(50vh, auto);
    margin: 0 auto;
    padding: 0;
}

.operators-cards {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 0.5em;
    padding: 0.2em;
    position: relative;
    border-radius:4px;
    border:1px solid #515151;
    background:rgba(251,251,251,0.6);
    backdrop-filter: blur(4px);
}

.operators-cards-list {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    list-style: none;
}

.operators-cards-list-items {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1 1 100%;
    margin: 0 auto;
    padding: 0.2em;
    text-align: center;
    list-style: none;
}

.operators-name {
    font-family: 'Roboto Bold', sans-serif;
    font-size: 16px;
    color: #1D1D1E;
    text-transform: uppercase;
}

.operators-name-home {
    font-family: 'Roboto Bold', sans-serif;
    font-size: 16px;
    color: #169475;
    text-transform: uppercase;
}

.operators-pictures-items {
    width: 100%;
    max-width: 50%;
    margin: 0.5em auto;
    padding: 0.2em;
    text-align: center;
    list-style: none;
    flex: 1 1 100%;
}

.operators-pictures {
    max-width: 100%;
    height: auto;
    max-height:120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0.2em;
    text-align: center;
    list-style: none;
    border-radius: 8px;
}

.operators-pictures-home {
    max-width: 100%;
    height: auto;
    max-height:120px;
    display: block;
    margin: 0 auto;
    padding: 0.2em;
    text-align: center;
    list-style: none;
    border-radius: 4px;
}

.operators-description {
    max-width: 20rem;
    text-align: left;
    margin: 1em auto;
    padding: 0 0.5em;
    font-family: 'Roboto Light', sans-serif;
    font-size: 13px;
}

.operators-description-home {
    max-width: 100%;
    text-align: left;
    margin: 1em auto;
    padding: 0 0.5em;
    font-family: 'Roboto Regular', sans-serif;
    font-size: 13px;
}

.operators-selection-btn {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0.2em auto;
    padding: 0.3em;
}

.operators-selection-links {
    width: 100%;
    max-width: 80%;
    display: block;
    margin: 0 auto;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-family: 'Roboto Medium', sans-serif;
    font-size: 0.9em;
    letter-spacing: 0.3px;
    border-radius: 6px;
}
.operators-selection-links-connect{
    background: #169475;
    color:#f2f3f4;
}.operators-selection-links-disconnect{
    background: #164894;
    color:#f2f3f4;
}

.operators-selection-links-connect:hover {
    background: #16be75;
    color:#f2f3f4;
}

.operators-selection-links-connect:active {
    background: #48be8b;
    color:#f2f3f4;
    opacity: 0.8;
}


.chat-container {
    width: 100%;
    max-width: 100%;
    min-height: 90vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1em;
    row-gap: 1em;
    grid-auto-rows: minmax(20vh, auto);
    margin: 0;
    padding: 0.5em 1em 0.5em 1em;
}

.chat-sections {
    width: 100%;
    max-width: 100%;
    min-height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    background:rgba(251,251,251,0.6);
    backdrop-filter: blur(6px);
    position: relative;
    border-radius: 4px;
}

.chat-sections-title {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0.2em;
}

.chat-aside {
    width: 100%;
    max-width: 100%;
    min-height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    padding: 1em;
    background:rgba(251,251,251,0.6);
    backdrop-filter: blur(6px);
    border-radius:4px;
    position: relative;
}

.chat-aside::-webkit-scrollbar {
    width: 0.5em;
    background-color: #FBFCFC; 
  }
  .chat-aside::-webkit-scrollbar-thumb {
      background: #2E86C1;
      border-radius:4px;
  }

.chat-aside-title {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0.2em auto;
    padding: 0;
    font-family: "Roboto Medium", sans-serif;
    color:#169475;
}

.chat-operator-id {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0;
    font-size: 10px;
}

.chat-aside-articles {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0;
    overflow: auto;
}

.chat-articles::-webkit-scrollbar {
    width: 0.5em;
    background-color: #FBFCFC; 
  }
  .chat-articles::-webkit-scrollbar-thumb {
      background: #2E86C1;
      border-radius:4px;
  }

.chat-aside-articles::-webkit-scrollbar {
    width: 0.5em;
    background-color: #FBFCFC; 
  }
  .chat-aside-articles::-webkit-scrollbar-thumb {
      background: #2E86C1;
      border-radius:4px;
  }

.chat-aside-nav {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 1em auto;
    padding: 0;
}

.chat-aside-menu {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.chat-aside-menu::-webkit-scrollbar {
    width: 0.5em;
    background-color: #FBFCFC; 
  }
  .chat-aside-menu::-webkit-scrollbar-thumb {
      background: #2E86C1;
      border-radius:4px;
  }

.chat-aside-menu-items {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0.2em auto;
    padding: 0.3em;
    line-height: 1.5em;
}

.chat-aside-menu-avatar {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.chat-aside-profile-picture {
    max-width: 100%;
    height: auto;
    max-height:120px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

.chat-aside-menu-specialite {
    max-width: 90%;
    text-align: center;
    font-family: "Roboto Light", sans-serif;
    color: #656565;
}

.chat-aside-menu-description {
    max-width: 90%;
    text-align: left;
    font-family: "Roboto Regular", sans-serif;
    color: #656565;
}

.chat-aside-menu-phone-link {
    color: #252565;
    font-family: "Roboto Medium", sans-serif;
}

.chat-aside-menu-phone-link:hover {
    color: #555575;
}

.chat-aside-menu-phone-link:active {
    color: #757595;
}

.operator-aside, .messages-operator-aside {
    grid-column: 1;
    grid-row: 1;
}

.chat-sections {
    grid-column: 2/5;
    grid-row: 1;
}

.chat-view {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0.2em;
    padding: 0em 0.6em 0.8em 0.6em;
    overflow: auto;
}

.chat-nav {
    width: 100%;
    max-width: 100%;
    min-height: 70vh;
    display: block;
    margin: 0.2em;
    padding: 0em 0.6em 0.8em 0.6em;
    border-bottom: 1px solid #c9c9c9;
}

.chat-list {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.chat-list-items {
    max-width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0.4em 0.2em;
    padding: 0;
}

.operator-chat-items {
    background: #1D8A8A;
    border-radius: 4px;
    box-shadow: 0px 0.5px 2px 0px #515151;
    align-self: flex-end;
}

.client-chat-items {
    background: #F1F0F0;
    color: #000;
    border-radius: 4px;
    box-shadow: 0px 0.5px 2px 0px #515151;
    align-self: flex-start;
}

.server-chat-items {
    background: var(--btn-hover);
    color: #000;
    border-radius: 4px;
    box-shadow: 0px 0.5px 4px 0px #333333;
    align-self: center;
}

.server-chat-items .chat-list-messages {
    max-width: 80%;
    color: #000;
    text-align: center;
    padding: 2em;
}

.server-list-author {
    text-transform: uppercase;
}

.operator-chat-items .chat-list-author, .operator-chat-items .chat-list-date {
    color: #dedede;
    text-align: right;
    align-self: flex-end;
}

.client-chat-items .chat-list-author, .client-chat-items .chat-list-date {
    text-align: right;
    align-self: flex-end;
}

.operator-chat-items .chat-list-messages {
    color: #fff;
    text-align: left;
}

.client-chat-items .chat-list-messages {
    color: #000;
    text-align: left;
}

.chat-list-author {
    max-width: 100%;
    display: block;
    margin: 0;
    padding: 0.1em 0.5em;
    text-align: left;
    color: #486448;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    order: 3;
}

.chat-list-messages {
    width: 40rem;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0.5em;
    text-decoration: none;
    font-family: "Roboto Regular", sans-serif;
    font-size: 14px;
    order: 1;
}

.chat-list-date {
    max-width: 100%;
    display: block;
    margin: 0;
    padding: 0.1em 0.5em;
    text-align: center;
    color: #486448;
    font-family: sans-serif;
    font-size: 0.6em;
    font-weight: bolder;
    order: 2;
}

.chat-write {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0.2em;
}

.chat-write-form {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 1em;
    row-gap: 1em;
    grid-auto-rows: minmax(1em, auto);
    margin: 0 auto;
    padding: 0.2em;
}

.chat-write-message {
    width: 100%;
    max-width: 100%;
    min-height:3em;
    max-height:3em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0.2em 0.5em;
    grid-column: 1/7;
    grid-row: 1;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
}

.chat-send-message {
    width: 2.5em;
    max-width: 100%;
    height: 2.5em;
    border-radius: 4px;
    display: block;
    text-align: center;
    margin:auto;
    padding: 0;
    border: none;
    background: #1D8A8A;
    color: #f2f3f4;
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.2px;
    grid-column: span 1/8;
    grid-row: 1;
}

#jelly_btn{
    -webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}
@-webkit-keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  @keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  


.payment_form {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1em auto;
    padding: 1em;
}

.payment_table {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

.payment_table tr {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

.payment_table td {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

.payment_select {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1em auto;
    padding: 1em;
}

/*CLIENTS ADRESS*/
.actual_adress_nav{
    width:100%;
    max-width:100%;
    display:block;
    margin:0 auto;
    padding:0;
}
.actual_adress_list{
    width:100%;
    max-width:100%;
    list-style:none;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    margin:0.5em auto;
    padding:0.15em 0.1em;
}
.actual_adress_list_items{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    margin:0.25em auto;
    padding:0.1em;
    font-size:16px;
    font-family:"Roboto Regular", sans-serif;
}
.adress_span{
    text-transform:uppercase;
    font-weight:bold;
    padding:0.15em 0.25em;
}

.modif_adress_form{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    margin:0.25em auto;
    padding:0.15em 0.25em;
}
.form_group{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:stretch;
    margin:0.5em auto;
    padding:0.1em;
}
.modif_adress_form label{
    max-width:100%;
    display:block;
    margin:0.15em auto;
    padding:0;
    font-size:0.85em;
    line-height:1em;
    font-family:"Roboto Regular", sans-serif;
    font-weight:bold;
    text-transform:uppercase;
}
.modif_adress_form input:not([type="submit"]){
    width:100%;
    max-width:calc(100%-40px);
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    margin:0.1em auto;
    padding:0.15em;
    text-align:center;
    font-family:"Roboto Regular", sans-serif;
    line-height:1.5em;
    font-size:1.3em;
}
.modif_adress_form input[type="submit"]{
    max-width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-family:"Roboto Regular", sans-serif;
    font-size:1em;
    margin:0.25em auto;
    padding:0.2em 0.3em;
    border:none;
    border-radius:4px;
    background:#1D8A8A;
    color:#fff;
}
/*END CLIENTS ADRESS*/


@media all and (max-width:980px) {
    html, body {
        overflow: auto;
    }
html::-webkit-scrollbar {
    width: 0.5em;
    background-color: #FBFCFC; 
  }
  html::-webkit-scrollbar-thumb {
      background: #2E86C1;
      border-radius:4px;
  }
    .main-head {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        min-height: auto;
        max-height: auto;
    }
    .main-nav {
        width: 100%;
        max-width: 100%;
        position: relative;
        display:block;
        margin:0.5em auto;
    }
    .main-menu {
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        column-gap:1em;
        row-gap:1em;
        grid-auto-rows: minmax(1.5em, auto);
        margin: 0 auto;
        padding: 5px;
        list-style:none;
    }
    .main-menu-items {
        margin: 3px auto;
    }
    .main-sections {
        height: auto;
        min-height: auto;
        max-height: auto;
        padding: 0 2.5em;
    }
    .messages-sections, .messages-aside {
        min-height: 85vh;
        max-height: auto;
    }
    .messages-sections {
        grid-column: 1/5;
        grid-row: 1;
    }
    .chat-sections {
        grid-column: 1/5;
        grid-row: 1;
    }
    .messages-operator-aside {
        grid-column: 1/5;
        grid-row: 2;
    }
    .operator-aside {
        grid-column: 1/5;
        grid-row: 2;
    }
    .client-aside {
        grid-column: 1/5;
        grid-row: 3;
    }
    .operators-selection-articles {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 0.5em;
        grid-row-gap: 0.5em;
        grid-auto-rows: minmax(1fr, auto);
    }
}