@import 'variables.css';

html,
body{
    margin: 0px;
    padding: 0px;
    font-family: 'Montserrat', sans-serif !important;
    color: var(--text-color);
    width: 100vw;
    height: 100vh;
}

.col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.row{
    margin: 0px;
    padding: 0px;
}

.fs-row{
    width: 100%;
}
.fs-row:nth-child(1){
    margin: 20px 0px 0px 0px;
}
.fs-rows{
    width: 100%;
    margin: 0px;
    display: grid;
    grid-template-columns: 2.9fr 1.1fr;
    gap: 20px;
    box-sizing: border-box;
}
.fs-container{
    margin: 0px;
    padding: 0px;
    background-color: var(--secondary-tint);
    width: 100vw;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}
.fs-body{
    margin: 0px;
    padding: 0px;
    width: 100vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100vh;
}
.fs-navbar-admin-container{
    width: 100vw;
    padding: 0px;
    margin: 0px;
    position: relative;
}
.fs-navbar-container{
    margin: 0px;
    padding: 0px;
    width: 100%;
    position: relative;
}
.fs-sidebar-container{
    width: 17vw;
    min-height: calc(100vh - 60px);
    background-color: rgba(var(--black-rgb), 0.9);
}
.fs-content{
    margin: 0px;
    /* padding: 0px 5%; */
    position: relative;
    width: 100%;
}
.fs-admin-content{
    margin: 0px;
    padding: 20px 4vw 6vh 4vw;
    width: 83vw;
    max-height: calc(100vh - 60px);
    overflow: auto;
}
.fs-user-container{
    margin: 0px;
    padding: 20px 5vw 6% 5vw;
    width: 100%;
    max-height: calc(100vh - 60px);
    overflow: auto;
}


/* ================================================================= */
/* le style du navbar de la page user                                */
/* ================================================================= */
.fs-navbar{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
.fs-navbar .fs-baner{
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
    width: 100%;
    background-color: rgba(var(--black-rgb), 0.9);
}
.fs-navbar .fs-row{
    margin: 0px;
    padding: 0px 5%;
    height: 60px;
    background: #ffffff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0px 2px 6px rgba(var(--tertiary-rgb), 0.10);
    width: 100%;
}
.fs-navbar .fs-logo-container{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 12vw;
    overflow: hidden;
}
.fs-navbar .fs-logo-container a{
    text-decoration: none;
}
.fs-navbar .fs-logo-container a img{
    height: 6vh;
}
.fs-navbar .fs-menu-container{
    display: flex;
    justify-content: space-between;
    margin: 0px;
    padding: 0px;
    height: 100%;
    flex: 1;
}
.fs-navbar .fs-menu-container ul{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 20px;
    height: 100%;
}
.fs-navbar .fs-menu-container ul li{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.fs-navbar .fs-menu-container ul li a{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--black);
    font-size: 0.85rem;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    letter-spacing: 0.02rem;
    height: 35px;
    min-width: 130px;
    /* background-color: tomato; */
    margin: 0px;
    padding: 8px 15px;
}
.fs-navbar .fs-menu-container ul li a .fs-border-bottom{
    position: absolute;
    width: 0px;
    height: 5px;
    background-color: rgba(var(--black-rgb), 0.9);
    left: 0px;
    bottom: 0px;
    transition: width 300ms ease-in-out;
}
.fs-navbar .fs-menu-container ul li a:hover .fs-border-bottom,
.fs-navbar .fs-menu-container ul li .fs-dropdown:hover ~ .fs-border-bottom{
    width: 100%;
    height: 5px;
}
.fs-navbar .fs-menu-container ul li .fs-dropdown{
    display: block;
    position: absolute;
    /* border: 1px solid royalblue; */
    height: 0px;
    width: 50vw;
    transition: height 300ms ease-in-out;
    overflow: hidden;
    background-color: transparent;
    /* box-shadow: 0px 0px 3px 3px hsl(0, 0%, 70%); */
    box-shadow: 0px 2px 6px rgba(var(--tertiary-rgb), 0.18);
}
.fs-navbar .fs-menu-container ul li .fs-dropdown .fs-dropdown-content{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
}
.fs-navbar .fs-menu-container ul li .fs-dropdown .fs-dropdown-content .fs-pick{
    position: absolute;
    top: -7px;
    left: 60px;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 7px;
    border-left-width: 7px;
    border-bottom: 7px solid rgb(255, 255, 255);
}
.fs-navbar .fs-menu-container ul li .fs-dropdown:hover,
.fs-navbar .fs-menu-container ul li a:hover ~ .fs-dropdown{
    height: 45vh;
    padding-top: 7px;
    z-index: 10000;
    /* border: 1px solid royalblue; */

}
.fs-submenu-content{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
    padding: 0px 10px;
}
.fs-submenu-content .fs-submenu{
    margin: 0px;
    padding: 0px;
    width: 50%;
}
.fs-submenu-content .fs-submenu .fs-title-4{
    text-align: center;
    padding: 15px 0px;
}
.fs-submenu-content .fs-submenu ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
    margin: 0px;
    padding: 0px;
}
.fs-submenu-content .fs-submenu ul li{
    list-style: none;
    margin: 0px 0px 4px 0px;
    padding: 0px;
    /* border-bottom: 0.01rem solid rgba(var(--tertiary-rgb), 0.05); */
    display: block;
    /* background-color: rgba(var(--tertiary-rgb), 0.05); */
    background-color: var(--secondary-tint);
    width: 100%;
    border-radius: 3px;
}
.fs-submenu-content .fs-submenu ul li a{
    margin: 0px;
    padding: 10px 20px;
    cursor: pointer;
    height: auto;
    font-weight: 300;
}
.fs-search-bar-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 59vw;
}

.fs-search-bar-container .fs-search-bar .fs-form-control .fs-input input{
    width: 30vw;
    padding-left: 15px;
}
.fs-admin-navbar .fs-search-bar .fs-form-control .fs-input input {
    padding-left: 15px;
}
.header-toolsbar{
    display: flex;
    align-items: center;
    gap: 20px;
}
#helpPassword{
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
    width: 30px;
    height: 25px;
    font-size: 0.86rem;
}



/* Le style de la page ouverte au publique  */
.fs-guide-container{
    margin: 0px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    height: 65vh;
    background-color: #ffffff;
    box-shadow: 0px 2px 6px rgba(var(--tertiary-rgb), 0.18);
}
.fs-guide-container .fs-title-3{
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
}
.guide-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.guide-footer a.fs-p{
    text-decoration: underline;
}



/* Style du Tableau de bord pour prestataire  */
.fs-profil-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    color: var(--black);
    /* box-shadow: 0px 0px 3px 3px hsl(0, 0%, 86%); */
    box-shadow: 0px 2px 6px rgba(var(--tertiary-rgb), 0.1);
}
.fs-profil-container .fs-profil{
    margin: 0px;
    padding: 0px;
}
.fs-profil-container .fs-profil .fs-dash,
.fs-profil-container .fs-profil .fs-name-space{
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}
.fs-profil-container .fs-profil .fs-dash .fs-setting{
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    font-size: 1.2rem;
}
.fs-profil-container .fs-profil .fs-name-space{
    margin: 0px;
    padding: 0px;
}
.fs-profil-container .fs-work-space{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fs-profil-container .fs-work-space .fs-entreprise{
    display: block;
    padding: 5px 10px;
    border: 1px solid rgba(var(--black-rgb), 0.2);
    border-radius: 5px;
}

/* style des box du tableau de bord  */
.fs-content .fs-row{
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.fs-box-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 0px;
    margin: 0px;
    gap: 20px;
}


/* Style de la liste de appels d'offres  */
.fs-list-container{
    margin: 0px;
    padding: 0px;
    box-shadow: 0px 2px 6px rgba(var(--tertiary-rgb), 0.1);
}
.list-header{
    margin: 0px;
    padding: 10px;
    width: 100%;
    background-color: rgba(var(--black-rgb), 0.9);
    text-align: center;
}
.detail-header .fs-admin-title{
    line-height: 2rem;
    color: #ffffff;
}
.list-header .fs-title-2{
    color: var(--light);
    text-transform: uppercase;
}
#date{
    text-transform: capitalize;
}
.list-body{
    margin: 0px;
    padding: 15px 30px;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
}
a.fs-list-item{
    text-decoration: none;
    margin: 0px;
    padding: 15px;
    border: 1px solid rgba(var(--black-rgb), 0.18);
    border-radius: 5px;
    transition: all 300ms ease-in-out;
}
a.fs-list-item:hover{
    transform: scale(1.01);
}
.list-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px;
    padding: 0px;
}
.list-title .fs-title-3{
    color: var(--primary);
    text-transform: uppercase;
}
.fs-list-item .fs-p{
    color: rgba(var(--black-rgb), 0.9);
}
.list-publisher{
    margin: 5px 0px 5px 0px;
    padding: 7px 15px;
    background-color: rgba(var(--tertiary-rgb), 0.1);
    width: fit-content;
    border-radius: 5px;
    width: 100%;
}
.list-description{
    max-height: 80px;
    overflow: hidden;
    /* border: 1px solid; */
    -moz-box-shadow: inset 0 -10px 10px -10px #e8e9ea;
    -webkit-box-shadow: inset 0 -10px 10px -10px #e8e9ea;
    box-shadow: inset 0 -10px 10px -10px #e8e9ea;
}
.list-publisher .fs-title-4{
    color: rgba(var(--black-rgb), 0.52);
}
.list-publisher .fs-title-4 b{
    color: rgba(var(--black-rgb), 0.9);
    text-transform: uppercase;
    font-weight: 800;
}
.list-price{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0px 0px 0px;
    padding: 0px;
}
.price{
    margin: 0px;
    padding: 5px 10px;
    background-color: var(--success);
    width: fit-content;
    border-radius: 5px;
}
.price .fs-p{
    color: var(--light);
    text-transform: uppercase;
    font-weight: 700;
}
.list-price .fs-p b,
.list-price .fs-p i{
    color: var(--danger);
}


/* Le style du fil d'ariane  */
.fs-breadcrumb{
    margin: 0px;
    padding: 5px 10px;
    width: fit-content;
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: 5px;
}
.fs-breadcrumb > ul{
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}
.fs-breadcrumb > ul > li{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(var(--black-rgb), 0.75);
}
.fs-breadcrumb > ul > li > a{
    color: var(--primary);
    letter-spacing: 0rem;
    text-decoration: none;
}
.fs-breadcrumb > ul > li > span.guillemets{
    color: rgba(var(--black-rgb), 0.5);
    font-size: 1.05rem;
}
.fs-breadcrumb > ul > li > i.fa.fa-home{
    font-size: 0.9rem;
    color: var(--primary);
}




/* Les éléments de formulaires les input et textarea  */
form{
    width: 100%;
}
.fs-form-control{
    margin: 0px 0px 15px 0px;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    width: 100%;
}
.fs-form-control label{
    width: 95%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.80rem;
    color: var(--grey-color);
}
.form-button-container{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 20px;
    padding-top: 10px;
}
.fs-form-control:last-child{
    margin-bottom: 0px !important;
}
.fs-input{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 38px;
    width: auto;
    opacity: 0.5;
	background-color: rgba(var(--tertiary-rgb), 0.1);
	box-shadow: 0px 1px 3px rgba(var(--tertiary-rgb), 0.02);
	transition: all ease-in-out 300ms;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    /* overflow: hidden; */
}
.fs-textarea{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100px;
    max-height: 100px;
    width: auto;
    opacity: 0.5;
	background-color: rgba(var(--tertiary-rgb), 0.1);
	box-shadow: 0px 1px 3px rgba(var(--tertiary-rgb), 0.02);
	transition: all ease-in-out 300ms;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
textarea{
    width: 100%;
    min-height: 100px;
    max-height: 100px;
    height: 100px;
    font-size: 0.9em;
	padding: 9px 15px 9px 2px;
    background-color: transparent;
	transition: all ease-in-out 300ms;
    border-radius: 5px;
    border: none;
    outline: none;
    color: var(--black);
}
input, select{
    width: 100%;
    height: 38px;
	font-size: 0.9em;
	padding: 9px 15px 9px 2px;
    background-color: transparent;
	transition: all ease-in-out 300ms;
    border-radius: 0px 5px 5px 0px;
    border: none;
    outline: none;
    color: var(--black);
}
input[type=checkbox], .form-switch .form-check-input{
    width: 35px;
}
input::placeholder, textarea::placeholder{
    font-size: 0.72rem;
    color: var(--grey-color);
}
input:focus, select:focus, textarea:focus{
	background-color: rgba(var(--tertiary-rgb), 0.1);
}
.fs-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 100%;
    border-radius: 5px;
    /* background-color: turquoise; */
}
textarea{
    width: 100%;
    height: auto;
    min-height: 100px;
	font-size: 0.82em;
	padding: 9px 15px;
    background-color: transparent;
	transition: all ease-in-out 300ms;
}
.fs-msg{
    position: absolute;
    top: 34px;
    font-size: 0.80em;
    font-weight: 400;
    color: var(--danger);
}
.fs-help{
    width: 100%;
    position: relative;
    margin: 0px;
    padding: 10px;
    background-color: var(--secondary-tint);
    font-weight: 300;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fs-help p{
    font-size: 0.78rem;
    margin: 0px;
}


/* le style du select2 option multiple  */
.select2-container {
    height: 38px;
    padding: 0px;
}
.select2-container .select2-selection--multiple{
    height: 100%;
    background-color: rgba(var(--tertiary-rgb), 0.05);
    box-shadow: 0px 1px 3px rgba(var(--tertiary-rgb), 0.02);
    border: none;
}
textarea.select2-search__field{
    width: 0px;
    min-height: 0px;
    max-height: 0px;
    height: 0px;
}
#select2-permisid-container{
    background-color: #ffffff;
    z-index: 100;
}




/* Bull de notification  */
.sup-notif{
    display: block;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: red;
}
.notification-dropdown{
    width: 250px !important;
}
.list-group{
    /* background-color: var(--light-shade); */
    background-color: #e7e7e7;
    padding: 10px;
    border-radius: 10px 0px 0px 10px;
}
.group-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    padding: 0px;
    height: 55.4vh;
    overflow-y: auto;
}
.contact-item{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    width: 100%;
    background-color: #ffffff;
    cursor: pointer;
}
.user-profil{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.96rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    width: 30px;
    height: 30px;
    background-color: #6c7c9e;
    border-radius: 50%;
}
.profil-container{
    flex: 1;
}
.name-container, .msg-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.name{
    font-size: 0.8025rem;
}
.date-receve{
    font-size: 0.66rem;
    font-style: italic;
}
.msg{
    font-size: 0.7025rem;
    color: var(--grey-color);
    font-weight: 300;
}


.msg-detail-content {
    height: 58.4vh;
    padding: 0px;
    margin: 0px;
    position: relative;
}
#messagescontent {
    width: 100%;
    height: 100%;
    border: 1px solid var(--light);
    position: relative;
}
.msg-content{
    height: 58.4vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
.empty-chat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.godown{
    position: absolute;
    right: 30px;
    bottom: 60px;
    z-index: 10000;
}
.godown i{
    font-size: 1.225rem;
}
.chat-space{
    width: 100%;
    height: 48vh !important;
    padding: 0px 0px 0px 10px;
    margin: 0px;
}
.msgthread{
    height: 51vh !important;
    overflow-y: auto;
    padding: 0px;
}
.msg-content-footer{
    padding: 0px;
    margin: 0px;
    height: 47px;
    width: 100%;
    /* background-color: red; */
}
.msg-content-footer form{
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.textarea-content{
    flex: 1;
    height: 100%;
}
.textarea-content textarea{
    height: 45px !important;
    max-height: 45px !important;
    min-height: 45px !important;
    background-color: rgba(var(--tertiary-rgb), 0.1) !important;
    border-radius: 0px;
}
.submsgbtn{
    border: 0px;
    background-color: transparent;
    color: var(--primary-color);
    height: 45px;
    width: 45px;
    font-size: 1.5rem;
}
.text-msg{
    font-size: 0.7525rem;
    font-weight: 500;
    line-height: 17px;
    margin: 0px;
    color: #000000;
}
.msg-bull{
    margin: 0px;
    padding: 0px;
    margin: 7px;
}
.msg-bull small{
    font-size: 0.58rem;
    color: rgba(var(--black-rgb), 0.45);
    line-height: 0px;
    padding: 0px;
}
.accsend{
    line-height: 0px;
    display: block;
    margin-top: 15px;
    text-align: right;
}
.contact-list{
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: -27px;
    right: 20px;
    /* border: 1px solid; */
    padding: 5px;
    cursor: pointer;
}
#contactList{
    position: absolute;
    height: 55.4vh !important;
    width: 23.92vw;
    top: 0px;
}
.listContact{
    height: 58.5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px;
    padding: 5px 20px;
    overflow-y: auto;
}
.listContact .card-header{
    width: 100%;
    background-color: transparent;
    font-size: 0.88rem;
    text-align: center;
    border-bottom: 1px solid var(--light-shade);
    margin-bottom: 10px;
}
.listContact .card-body{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
}
hr{
    margin: 0px;
    padding: 0px;
    background-color: var(--light-shade);
}
.listContact .card-body .send_new{
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0px;
    cursor: pointer;
}
.listContact .card-body .send_new > div{
    display: flex;
    flex-direction: column;

}
.listContact .card-body .send_new .job{
    font-size: 0.60rem;
    line-height: 10px;
    color: rgba(0, 0, 0, 0.4);
}
.chatter{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: -28px;
    left: 10px;
}
.chatter span:nth-child(1){
    font-size: 0.84rem;
    line-height: 12px;
}
.chatter span:nth-child(2) {
    font-size: 0.60rem;
    color: rgba(0, 0, 0, 0.4);;
}





/* le style des boutons  */

.btn.btn-secondary{
    background-color: transparent !important;
    border: none !important;
    color: rgba(var(--black-rgb), 0.45) !important;
}
button.fs-btn-not-bg{
    background-color: transparent;
    border: none;
    color: var(--primary);
    transition: all 300ms ease-in-out;
}
button.fs-btn-not-bg:hover {
    background-color: #F2F2F2;
}

button.fs-btn-tools, a.fs-btn-tools, .fs-btn-tools{
    display: flex;
    align-items: center;
    padding: 7px 10px !important;
    gap: 10px;
    font-size: 0.7025rem !important;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    width: fit-content;
}
.fs-btn-tools i, .fs-btn-tools em{
    font-size: 0.7525rem;
}

a.fs-btn,
button.fs-btn,
.fs-btn{
    display: flex;
    align-items: center;
    gap: 10px;
    outline: none;
    padding: 10px 15px !important;
	font-size: 0.72rem !important;
    line-height: 0px;
    margin: 0px;
    /* min-width: fit-content; */
    width: fit-content;
    font-weight: 500 !important;
    min-height: 35px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    justify-self: center;
    transition: all 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    cursor: pointer;
}
.fs-btn span{
    line-height: 0px;
}
.fs-btn i, .fs-btn em{
    font-size: 1rem !important;
}
.fs-btn:active{
    transform: scale(0.85);
}
.fs-btn.btn--primary,
.fs-btn-tools.btn--primary
{
    color: var(--milk-color) !important;
    background: var(--primary-color);
    transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fs-btn-tools.btn--primary-outline,
.fs-btn.btn--primary-outline
{
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    padding: 11px 20px;
}

.fs-btn.btn--info,
.fs-btn-tools.btn--info
{
    color: var(--milk-color) !important;
    background: var(--infos-color);
    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fs-btn.btn--info-outline,
.fs-btn-tools.btn--info-outline
{
    border: 1px solid var(--infos-color);
    background-color: transparent;
    color: var(--infos-color);
    padding: 11px 20px;
}

.fs-btn.btn--success,
.fs-btn-tools.btn--success
{
    color: var(--milk-color) !important;
    background: var(--success-color);
    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fs-btn.btn--success-outline,
.fs-btn-tools.btn--success-outline
{
    border: 1px solid var(--success-color);
    background-color: transparent;
    color: var(--success-color);
    padding: 11px 20px;
}

.fs-btn.btn--danger,
.fs-btn-tools.btn--danger
{
    color: var(--milk-color) !important;
    background: var(--danger-color);
    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fs-btn.btn--danger-outline,
.fs-btn-tools.btn--danger-outline
{
    border: 1px solid var(--danger-color);
    background-color: transparent;
    color: var(--danger-color);
    padding: 11px 20px;
}

.fs-btn.btn--warning,
.fs-btn-tools.btn--warning
{
    color: var(--black) !important;
    background: var(--warning-color);
    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fs-btn.btn--warning-outline,
.fs-btn-tools.btn--warning-outline
{
    border: 1px solid var(--warning-color);
    background-color: transparent;
    color: var(--warning-color);
    padding: 11px 20px;
}

.fs-btn.btn--secondary,
.fs-btn-tools.btn--secondary
{
    color: var(--milk-color) !important;
    background: var(--secondary-color);
    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fs-btn.btn--secondary-outline,
.fs-btn-tools.btn--secondary-outline
{
    border: 1px solid var(--secondary-color);
    background-color: transparent;
    color: var(--secondary-color);
    padding: 11px 20px;
}


.fs-btn.btn--primary:hover,
button.fs-btn-tools.btn--primary:hover
{
    color: var(--milk-color) !important;
    background: var(--primary-color) !important;
}
.fs-btn.btn--secondary:hover,
button.fs-btn-tools.btn--secondary:hover
{
    color: var(--milk-color) !important;
    background: var(--secondary-color) !important;
}
.fs-btn.btn--success:hover,
button.fs-btn-tools.btn--success:hover
{
    color: var(--milk-color) !important;
    background: var(--success-color) !important;
}
.fs-btn.btn--danger:hover,
button.fs-btn-tools.btn--danger:hover
{
    color: var(--milk-color) !important;
    background: var(--danger-color) !important;
}
.fs-btn.btn--warning:hover,
button.fs-btn-tools.btn--warning:hover
{
    color: var(--black) !important;
    background: var(--warning-color) !important;
}
.fs-btn.btn--info:hover,
button.fs-btn-tools.btn--info:hover
{
    color: var(--milk-color) !important;
    background: var(--infos-color) !important;
}



/* Style des badge de tout le projet  */
.fs-badge-container{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.fs-badge, .fs-badge span{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 0.6525rem;
    font-style: italic;
    font-weight: 500;
    width: fit-content;
}
.badge--primary{
    background-color: var(--primary-color);
    color: var(--milk-color);
}
.badge--primary-outline {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}
.badge--secondary {
    background-color: var(--secondary-color);
    color: var(--milk-color);
}
.badge--secondary-outline {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}
.badge--info {
    background-color: var(--infos-color);
    color: var(--milk-color);
}
.badge--info-outline {
    border: 1px solid var(--infos-color);
    color: var(--infos-color);
}
.badge--success {
    background-color: var(--success-color);
    color: var(--milk-color);
}
.badge--success-outline {
    border: 1px solid var(--success-color);
    color: var(--success-color);
}
.badge--danger {
    background-color: var(--danger-color);
    color: var(--milk-color);
}
.badge--danger-outline {
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}
.badge--warning {
    background-color: var(--warning-color);
    color: var(--black);
}
.badge--warning-outline {
    border: 1px solid var(--warning-color);
    color: var(--warning-color);
}





/* code et style de la partie admin  */
.fs-admin-navbar-content{
    margin: 0px;
    padding: 0px;
    height: 60px;
    width: 100%;
    background-color: #ffffff;
    position: relative;
    box-shadow: 0px 2px 10px rgba(var(--tertiary-rgb), 0.10);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.fs-admin-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 17vw;
    height: 100%;
    /* background-color: #000000; */
    border-right: 1px solid rgba(var(--tertiary-rgb), 0.10);
}
.fs-admin-logo a{
    text-decoration: none;
    height: 100%;
    width: 70%;
    /* background-color: pink; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.fs-admin-logo a img{
    height: 70%;
}

.fs-admin-navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding-right: 4vw;
    padding-left: 1vw;
    /* background-color: #000000; */
}
.fs-admin-navbar .menu-burger, .fs-admin-navbar .admin-tools .tools-item{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 35px;
    cursor: pointer;
    border-radius: 3px;
    text-decoration: none;
    transition: all 300ms ease-in-out;
    /* background-color: #7777; */
}
.fs-admin-navbar .menu-burger:hover, .fs-admin-navbar .admin-tools .tools-item:hover{
    background-color: rgba(var(--tertiary-rgb), 0.1);
}
.fs-admin-navbar .menu-burger i{
    font-size: 1.1rem;
    padding: 0px;
    margin: 0px;
}
.fs-admin-navbar .search-bar{
    width: 45%;
}
.fs-admin-navbar .admin-tools{
    display: flex;
    gap: 10px;
}
.fs-admin-navbar .admin-tools ul.dropdown-menu{
    padding: 10px;
    border-radius: 5px;
    width: 11vw;
    margin: 0px;
    transform: translate(0px, 45px) !important;
}
.fs-admin-navbar .admin-tools ul.dropdown-menu li{
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.fs-admin-navbar .admin-tools ul.dropdown-menu li a{
    width: 100%;
    position: relative;
    border-radius: 5px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px auto;
}



/* le code du side bar de la partie admin  */
.fs-admin-sidebar-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    height: 100vh;
    color: #ffffff;
}
.fs-admin-profil{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0px;
    gap: 10px;
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(var(--black-rgb), 0.9);
}
.fs-admin-profil .fs-photo-id{
    height: 100px;
    width: 100px;
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}
.fs-admin-profil .fs-photo-id img{
    width: 100%;
}
.fs-admin-profil .fs-name{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fs-admin-profil .fs-name span{
    font-weight: 500;
}
.fs-admin-profil .fs-name small{
    font-size: 0.75rem;
    font-weight: 300;
}

.fs-sidebar{
    margin: 0px;
    padding: 0px 0px 20px 0px;
    width: 100%;
    height: calc(100vh - 280px);
    overflow-y: auto;
    -moz-box-shadow: inset 0 -10px 10px -10px #000000;
    -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
    box-shadow: inset 0 -10px 10px -10px #000000;
}

 /* Simple */
 .fs-sidebar, .custum-scrollbar{
    scrollbar-color: transparent;
    scrollbar-width: none;
    transition: all 300ms ease-in-out;
 }
 .fs-sidebar:hover,
 .custum-scrollbar:hover {
     scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.5);
     scrollbar-width: thin;
 }
.fs-sidebar::-webkit-scrollbar, .custum-scrollbar::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    transition: all 300ms ease-in-out;
}
.fs-sidebar:hover::-webkit-scrollbar, .custum-scrollbar:hover::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.fs-sidebar::-webkit-scrollbar-track, .custum-scrollbar::-webkit-scrollbar-track{
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
}

.fs-sidebar::-webkit-scrollbar-thumb, .custum-scrollbar::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.fs-sidebar::-webkit-scrollbar-thumb:hover, .custum-scrollbar::-webkit-scrollbar-thumb:hover{
    background: rgba(0, 0, 0, 0.4);
}

.fs-sidebar::-webkit-scrollbar-thumb:active, .custum-scrollbar::-webkit-scrollbar-thumb:active{
    background: rgba(0, 0, 0, 0.9);
}

.fs-sidebar ul{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.fs-sidebar ul li{
    width: 100%;
    margin: 0px;
    padding: 0px;
    list-style: none;
    cursor: pointer;
}
.fs-sidebar ul li a{
    position: relative;
    width: 100%;
    margin: 0px;
    padding: 10px;
    text-decoration: none;
    color: #ffffff;
    font-size: 0.80rem;
    font-weight: 300;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    transition: all 300ms ease-in-out;
    border-right: 7px solid transparent;
}
.fs-sidebar ul li a i{
    font-size: 0.9rem;
    text-align: right;
    height: 14px;
    width: 20px;
    /* background-color: aqua; */
}
.fs-sidebar ul li.active{
    background-color: rgba(var(--primary-rgb), 0.32);
    border-right: 7px solid var(--primary);
}
.fs-sidebar ul li:hover{
    background-color: rgba(var(--primary-rgb), 0.32);
    border-right: 7px solid var(--primary);
}
#settingDropdown::after{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0.17em 0.17em 0 0;
    content: '';
    display: inline-block;
    height: 0.55em;
    width: 0.55em;
    right: 0.15em;
    top: 1.25em;
    transform: rotate(135deg);
    vertical-align: top;
}


/* style tableau de bord  */
.content{
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.fs-admin-title{
    padding: 0px;
    margin: 0px;
    width: 100%;
    font-size: 1.38rem;
    font-weight: 400;
    line-height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fs-admin-sub-title{
    padding: 0px;
    margin: 0px;
    width: 45%;
    font-size: 1.19rem;
    font-weight: 400;
    line-height: 1rem;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.fs-admin-sub-title span{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stat-box-container{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    position: relative;
    width: 100%;
}
.stat-box-container .stat-box{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: calc((100% / 3) - 20px);
    background-color: #ffffff;
    padding: 13px 20px;
    border-radius: 7px;
    box-shadow: 0px 0px 10px rgba(var(--black-rgb), 0.1);
}
.stat-box-container .stat-box .box-title{
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-color);
    width: 100%;
    /* padding: 5px 10px; */
    /* background-color: var(--light); */
    /* border-radius: 5px; */
}
.stat-box-container .stat-box .box-body{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}
.stat-box-container .stat-box .box-body .value{
    font-size: 1.8rem;
    font-weight: bolder;
}
.stat-box-container .stat-box .box-body img{
    width: 8vw;
}

.fs-card-container{
    margin: 0px;
    padding: 15px 20px 20px 20px;
    background: #ffffff;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
    box-shadow: 0px 0px 10px rgba(var(--black-rgb), 0.1);
    border-radius: 8px;
}
.fs-card-container .fs-card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}
.fs-card-container .fs-card-header .fs-card-title{
    font-size: 0.98rem;
    font-weight: 500;
}
.fs-card-body{
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    width: 100%;
}
.fs-card-container .nav{
    padding: 10px;
    background-color: var(--light);
    border-radius: 5px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 15px;
}
.fs-card-tools{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 2px;
    gap: 30px;
    width: fit-content;
}
.fs-card-tools-block{
    display: flex;
    align-items: center;
    gap: 5px;
}
.fs-card-tools button.fs-tools-tip-btn{
    border: none;
    border-radius: 5px;
    font-size: 0.83rem;
    padding: 3px 8px;
    background-color: transparent;
    transition: all 300ms ease-in-out;
}
.fs-card-tools button.fs-tools-tip-btn:hover{
    background-color: #F2F2F2;
}
.fs-card-container .nav .nav-item{
    padding: 0px;
    margin: 0px;
    /* border: 1px solid var(--primary); */
    /* border-radius: 5px; */
}
.fs-card-container .fs-card-footer{
    padding-top: 10px;
}
.nav-link{
    color: var(--primary) !important;
    padding: 0.18rem 1.2rem;
}
.fs-card-container .nav .nav-item .nav-link.active{
    background-color: var(--primary);
    color: #ffffff !important;
}


/* style du tableau  */
.fs-table-container{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.fs-table-container table{
    width: 100%;
}
.fs-table-container table thead{
    font-size: 0.70rem;
    padding: 10px;
}
.fs-table-container table thead th{
    padding: 10px 15px;
    color: #ffffff;
    font-weight: 500;
    border-bottom: 2px solid #060053;
    text-transform: uppercase;
    background-color: var(--primary);
    /* min-width: 150px; */
}
.fs-table-container table thead th.col-action{
    text-align: right;
}
.fs-table-container table tbody tr:nth-child(even){
    background-color: #ecf0ff;
}
.fs-table-container.table_scrollable{
    overflow: auto;
    max-height: 230px;
}
.fs-table-container.table_scrollable thead th {
    position: sticky;
    top: 0;
    margin-bottom: 3px;
}

.fs-table-container table tbody td{
    padding: 0px 15px;
    height: 38px !important;
    color: var(--text-color);
    font-weight: 300;
    font-size: 0.69rem;
    /* border-bottom: 1px solid rgba(var(--secondary-rgb), 0.3); */
}
.fs-table-container table tbody td.col-action{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.fs-table-container table tbody td.col-action form{
    width: fit-content;
}
button.show_confirm{
    background-color: transparent;
    border: none;
}
.fs-table-container table tbody td a{
    text-decoration: none;
}
.fs-table-container table tbody td i{
    height: 24px;
    width: 24px;
    font-size: 0.6735rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 300ms ease-in-out;
}
.fs-table-container table tbody td i:hover{
    background-color: var(--light);
}
.fs-table-container table tbody td i.fa-eye{
    color: var(--primary-color);
}
.fs-table-container table tbody td i.fa-pen{
    color: var(--success-color);
}
.fs-table-container table tbody td i.fa-download{
    color: var( --secondary-color);
}
.fs-table-container table tbody td i.fa-trash{
    color: var(--danger-color);
}
.user-form-container{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}
.user-form-container .user-form{
    width: 85%;
}



/* style du sweetAlert 2  */
.swal2-icon-success{
    background: rgba(var(--success-rgb), 1);
}



/* style des infos sous les inputs  */
.fs-infos{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 5px;
}
.fs-infos small{
    font-size: 0.70rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
}


/* style de la pagination  */
.fs-pagination{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 0px 0px 0px ;
}
.fs-navigation .navigation-container{
    margin: 0px;
    padding: 0px;
    height: auto;
}
.fs-pagination .pagination-body{
    display: flex;
    gap: 30px;
    width: 100%;
}
.fs-pagination .pagination-body .showing p{
    margin: 0px;
    font-size: 0.82rem;
}
.fs-pagination .pagination-body .pages{
    margin: 0px;
    padding: 0px;
    font-size: 0.75rem;
}
.fs-pagination .pagination-body .pages .pages-bloc{
    font-weight: 600;
}
.fs-pagination .pagination-body .pages .pages-bloc a{
    text-decoration: 0px;
}
.fs-pagination .pagination-body .pages .pages-bloc .previous{
    border-radius: 5px 0px 0px 5px;
}
.fs-pagination .pagination-body .pages .pages-bloc .next{
    border-radius: 0px 5px 5px 0px;
}
.current-page{
    margin: 0px;
    padding: 0px;
    width: 100%;
}
.page-active{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff;
    width: 100%;
}

/* Details des appels d'offres  */
.tender-details{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0px;
    padding: 0px;
    font-size: 0.83rem;
    width: 100%;
}
.tender-details > span, .tender-details > div{
    width: calc((100% / 3) - 10px);
    display: flex;
    align-items: center;
    gap: 10px;
}
.tender-details > span label{
    max-width: 38%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tender-details > span b, .tender-details > span strong {
    max-width: 62%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.plaint-onglets{
    font-size: 0.86rem;
    padding: 6px !important;
}
.comment-button{
    display: flex;
    align-items: center;
    gap: 15px;
}
/* .comment-button.accordion-button::after {
    top: 50px;
    position: absolute;
    right: 15px;
} */
.comment-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}
.comment-header small{
    font-size: 0.76rem;
    color: rgba(var(--black-rgb), 0.30);
}
.comment-title{
    font-weight: bold;
    font-size: 0.90rem;
}
.fs-file-upload{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.fs-file-upload span{
    font-size: 0.88rem;
    font-style: italic;
    font-weight: bold;
    margin: 0px;
    color: rgba(var(--black-rgb), 0.35);
}
.fs-file-upload a{
    padding: 5px;
    background: rgba(0, 0, 0, 0.03);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
.fs-file-upload a img{
    width: 18px;
}
.comment-text{
    /* width: 97%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; */
    margin: 0px;
    font-size: 0.84rem;
}
.comment-answer-text{
    font-size: 0.88rem;
    font-style: italic;
    font-weight: bold;
    margin: 20px 0px 10px 0px;
    color: rgba(var(--black-rgb), 0.35);
}
.comment-answer{
    font-size: 0.86rem;
}
.comment-answer p img, .comment-answer p svg{
    height: 20px;
    width: 20px;
}
.tender-details span.description, .tender-details div.description{
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.no-data-display{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
    padding-top: 5px;
    /* border: 1px solid red; */
}
.no-data-display.welcome-page{
    height: 53vh;
}
.no-data-display img{
    height: 130px;
}
.no-data-display span{
    font-size: 1.2rem;
    font-weight: 300;
}



/* Style Decaissement et suivi des AO  */
.fs-decaisse-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(fit-content, 100px);
    /* display: flex;
    flex-wrap: wrap; */
    gap: 10px;
    background-color: rgba(var(--tertiary-rgb), 0.05);
    padding: 15px;
    border-radius: 5px;
}
.decaisse-list-item{
    /* width: calc((100% / 2) - 7.5px); */
    background-color: #ffffff;
    padding: 10px 15px 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fs-decaisse-list a.decaisse-list-item{
    text-decoration: none;
    color: #666;
}
.fs-decaisse-list a .infos{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fs-decaisse-list a .infos .fs-progress-container{
    display: flex;
    align-items: center;
    gap: 10px;
}
.fs-decaisse-list a .infos .fs-progress-container img{
    width: 40px;
}
.fs-decaisse-list a .infos .fs-progress-container > div .percent{
    font-weight: bold;
    line-height: 15px;
    padding-top: 6px;
}
.fs-decaisse-list a .infos .fs-progress-container > div small{
    font-size: 0.70rem;
    line-height: 0px;
    margin: 0px;
}
.desc-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    height: 100%;
}
.fs-decaisse-list a .desc-container .body-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.fs-decaisse-list a .desc-container .body-content .description{
    font-size: 0.78rem;
    max-height: 50px;
    height: 50px;
    margin-bottom: 10px;
    background-color: #ffffff;
    overflow-y: hidden;
    position: relative;
}
.fs-decaisse-list a .desc-container .body-content .description .flou{
    position: absolute;
    width: 100%;
    height: 20px;
    background-image: linear-gradient(#ffffff00, #ffffff);;
    bottom: 0px;
}
.fs-decaisse-list a .desc-container .body-content .fs-progress-bar{
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.70rem;
    border: 1px solid #ededed;
    border-radius: 5px;
    padding: 5px 10px 8px 10px;
    width: 100%;
}
.fs-decaisse-list a .desc-container .body-content .fs-progress-bar .progress-item{
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fs-decaisse-list a .desc-container .body-content .fs-progress-bar .progress-item >div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.fs-decaisse-list a .desc-container .body-content .fs-progress-bar .progress{
    height: 4px;
    flex: 1;
}
.fs-decaisse-list a .desc-container .body-content .fs-progress-bar > div .value{
    width: 30px;
    line-height: 0px;
    font-size: bold;
}
.fs-decaisse-list a .desc-container .date{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: rgb(155, 155, 155);
}



/* LEs alert  */
.fs-row.fs-alert {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
}

.fs-row.fs-alert.warning {
    background-color: #ffeda6;
    color: #000000;
}

.fs-row.fs-alert.infos {
    background-color: #17a2b8;
    color: #000000;
}
.fs-row.fs-alert.danger {
    background-color: #f8d7da;
    color: #000000;
}
.fs-row.fs-alert.success {
    background-color: #d1e7dd;
    color: #000000;
}

.fs-alert .fa-solid {
    margin-right: 10px;
}


/* app.css */
/* body {
    font-family: Arial, sans-serif;
}

@media (max-width: 768px) {
    body {
        background-color: red;
    }
}

@media (min-width: 769px) {
    body {
        background-color: lightgreen;
    }
} */

/* Pour les petits écrans (téléphones, par exemple) */
@media (max-width: 576px) {
    /* Styles spécifiques aux petits écrans */
    body {
        background-color: blue;
    }
}

/* Pour les écrans moyens (tablettes, par exemple) */
@media (min-width: 577px) and (max-width: 992px) {
    /* Styles spécifiques aux écrans moyens */
    body {
        background-color: red;
    }
}

/* Pour les grands écrans (ordinateurs de bureau, par exemple) */
@media (min-width: 993px) {
    /* Styles spécifiques aux grands écrans */
    body {
        background-color: black;
    }
}