@media screen and (max-width: 767px) {
    *,
     ::before,
     ::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .navbar {
        z-index: 99;
        position: sticky;
        top: 0%;
        /* padding-bottom: 30rem; */
    }
    /*************************authentification*********************/
    .login .card .form-control:focus {
        border-bottom: 2px solid #0dcaf0;
    }
    .login .card .form-control {
        border: 1px solid transparent;
        border-radius: 0;
        border-bottom: 1px solid black;
        transition: all 0.4s ease-in-out;
    }
    .login .card {
        box-shadow: 1px 2px 1px #0dcaf0, -2px -2px 1px rgb(221, 218, 218);
        border: 1px solid transparent;
        border-radius: 0;
        transition: all 0.4s ease-in-out;
    }
    .login .card:hover {
        box-shadow: 1px 1px 3px #0dcaf0, -2px -1px 3px #0dcaf0;
        border: 1px solid transparent;
        border-radius: 0;
    }
    .login .card .card-header {
        border-radius: 0;
        box-shadow: 1px 1px 3px gray, -1px -1px 3px gray;
    }
    .loaddr {
        content: "";
        width: 3em;
        height: 3em;
        border-radius: 50%;
        background-color: transparent;
        position: absolute;
        border-bottom: 2px solid #0dcaf0;
        left: 90%;
        top: 24px;
        animation: load 1s linear infinite;
    }
    @keyframes load {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /************************compte**************************/
    .compte {
        font-size: 10px;
        width: 100%;
    }
    .compte .card .card-body .row .showbar {
        display: none;
        animation: scal 1s;
    }
    .compte .card .card-body .row .card-left {
        animation: scal 1s;
    }
    .compte .card-header {
        border-top: 1px solid rgb(224, 215, 215);
    }
    .compte .card .card-body .row .card-left .card-header {
        background-color: #0dcaf0;
        color: #fff;
    }
    .compte .card .card-body .row .card-left .card-body {
        border: 1px solid #0dcaf0;
    }
    .compte .card .card-body .row .card-left {
        border: 1px solid #0dcaf0;
    }
    .compte .card .card-body .row .card-right .card-body .ajoutP {
        /* background-color: #0dcaf0; */
        position: fixed;
        top: 0%;
        right: 0.5%;
        z-index: 1000;
        width: 100%;
        transform: translateX(0%);
        /* display: none; */
        height: 100%;
        /* visibility: visible; */
        color: #fff;
        padding: 1em;
        border-radius: 0;
        box-shadow: 1px 1px 1px #0dcaf0, -1px -1px 1px #0dcaf0;
        transition: width 0.2s ease-in-out;
    }
    .compte .card .card-body .row .card-right .card-body .hideP {
        /* background-color: #0dcaf0; */
        position: fixed;
        top: 22%;
        right: 0;
        z-index: 1000;
        width: 0%;
        transform: translateX(100%);
        /* display: none; */
        min-height: 25em;
        color: #fff;
        padding: 1em;
        /* visibility: hidden; */
        border-radius: 0;
        box-shadow: 1px 1px 1px #0dcaf0, -1px -1px 1px #0dcaf0;
        /* font-size:   ; */
        transition: width 0.2s ease-in-out;
    }
    .compte .card .card-body .row .card-right .card-body .ajoutP .form-control {
        border: 1px solid transparent;
        border-radius: 0;
        border-bottom: 1px solid black;
        transition: all 0.4s ease-in-out;
    }
    .compte .card .card-body .row .card-right .card-body .ajoutP .form-select {
        border: 1px solid transparent;
        border-radius: 0;
        border-bottom: 1px solid black;
        transition: all 0.4s ease-in-out;
    }
    .compte .card .card-body .row .card-right .card-body {
        width: auto;
    }
    .compte .card .card-body .row .card-right .card-body .ajoutP textarea {
        resize: none;
        /* background-color: rgb(219, 213, 213); */
        border: 1px solid transparent;
        border-radius: 0;
        border-bottom: 1px solid black;
        transition: all 0.4s ease-in-out;
    }
    #liste_preocupations {}
    .table-responsive {
        margin: 0;
        padding: 0;
    }
    .table-responsive select {
        margin-bottom: 1em;
        margin-left: -2px;
    }
    /* .compte .card .card-body .row .card-right .card-body .ajoutP label {} */
    /****************************************************historique**************************/
    .historique {
        position: fixed;
        width: 100%;
    }
    .historique .card-header {
        border-top: 1px solid rgb(224, 215, 215);
        position: sticky;
        top: 10%;
        z-index: 99;
    }
    .historique .card-chat {
        padding-top: 1em;
        background-color: rgb(233, 232, 232);
        height: 100%;
        max-height: 30em;
        padding-bottom: 1em;
        border: none;
        border-radius: 0;
        /* position: fixed; */
        overflow: auto;
    }
    .historique .card-footer .input-group {
        background-color: #fff;
        border: 1px solid #0dcaf0;
        transition: all 0.4s ease-in-out;
        padding: 0.4em;
        border-radius: 10px;
        bottom: 0;
    }
    .historique .navbtn {
        bottom: 12%;
        left: 65%;
        right: 0%;
        justify-content: center;
        align-items: center;
        position: fixed;
        /* visibility: hidden; */
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
    }
    .historique .show {
        bottom: 12%;
        left: 65%;
        right: 0%;
        justify-content: center;
        align-items: center;
        position: fixed;
        /* visibility: visible; */
        opacity: 1;
        transition: opacity 0.4s ease-in-out;
    }
    .historique .card-footer {
        background-color: rgb(233, 232, 232);
        /* border: 1px solid #0dcaf0; */
        transition: all 0.4s ease-in-out;
        bottom: 0%;
        left: 0%;
        /* right: 50%; */
        justify-content: center;
        align-items: center;
        width: 100%;
        position: fixed;
    }
    .historique .card-footer .input-group-text {
        padding: 0.5em 0.76em;
        border-radius: 0 100% 100% 0;
        color: #fff;
        font-weight: bold;
        font-size: 15px;
    }
    .historique .card-chat .card-body .chatR {
        min-height: 0.4em;
        border-radius: 20px;
    }
    .cloturerP {
        background-color: #0dcaf0;
        transition: all 0.4s ease-in-out;
        /* padding: 0.3em; */
        position: fixed;
        width: 10%;
        top: 83%;
        /* border-radius: 10px; */
    }
    /*********button responsive*****/
    .compte .navbarreshide {
        /* display: none; */
        position: fixed;
        z-index: 99;
        left: 5%;
        top: 0%;
        padding-top: .3125rem;
        padding-bottom: .3125rem;
        margin-right: 1rem;
        font-size: 2rem;
        text-decoration: none;
        white-space: nowrap;
        display: block;
    }
    /*******animation******/
    .loaddr {
        content: "";
        width: 3em;
        height: 3em;
        border-radius: 50%;
        background-color: transparent;
        position: absolute;
        border-bottom: 2px solid #0dcaf0;
        left: 90%;
        top: 24px;
        animation: load 1s linear infinite;
    }
    @keyframes load {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes scal {
        0% {
            transform: scaleY(0.1);
        }
        100% {
            transform: scaleY(1);
        }
    }
}