@font-face {
	font-family: Franklin Gothic Demi Regular;
	src: url('../open-iconic/font/fonts/Franklin Gothic Demi Regular.ttf') format('truetype');
}

@font-face {
	font-family: Franklin Gothic Book Regular;
	src: url('../open-iconic/font/fonts/Franklin Gothic Book Regular.ttf') format('truetype');
}

@font-face {
	font-family: Franklin Gothic Medium Regular;
	src: url('../open-iconic/font/fonts/Franklin Gothic Medium Regular.ttf') format('truetype');
}
.div-stitle {
    position: absolute;
    font-family: 'GravityBold';
    top: 2px;
}
.span-stitle {
    font-family: 'GravityBold';
}
.div-container-card {
    margin-top: 12px;
    border-radius: 8px;
    box-shadow: 2px 1px 10px #00000040;
    flex: 0 0 calc(33.33% - 10px); /* Adjust the width as needed */
    margin-right: 10px;
    border: 1px solid #ccc;
    height: 171px;
}
    .div-container-card:last-child {
        margin-right: 0; /* Remove margin for the last div in each row */
    }
.scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
}


::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #dcdcdc59;
    margin: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 4px;
}

    /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #dcdcdc59;
    display: block;
    border-style: solid;
    height: 7px;
}
    /* Up */
    ::-webkit-scrollbar-button:single-button:horizontal:increment {
        border-width: 4px 0px 4px 4px;
        border-color: transparent transparent transparent #E0E0E0;
    }

        ::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
            border-color: transparent transparent transparent #777777;
        }
    /* Down */
    ::-webkit-scrollbar-button:single-button:horizontal:decrement {
        border-width: 4px 4px 4px 0px;
        border-color: transparent #E0E0E0 transparent transparent;
    }

::-webkit-scrollbar-button:horizontal:decrement:hover {
    border-color: transparent #777777 transparent transparent;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent #E0E0E0 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
        border-color: transparent transparent #777777 transparent;
    }
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    border-width: 4px 4px 0 4px;
    border-color: #E0E0E0 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
    border-color: #777777 transparent transparent transparent;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid #ffffff;
    position: absolute;
    right: -2px;
    top: 20px;
}


.div-card {
    border-radius: 1px;
    /*width: 366px;*/
    /*height: 182px;*/
    height: auto;
    box-shadow: 2px 2px 3px #00000040;
}

    .card-task:hover {
        box-shadow: 2px 1px 10px #00000040;
    }


.taskCode {
    /*overflow: visible;
    width: 37px;
    white-space: nowrap;*/
    line-height: 20.550020217895508px;
    margin-top: -3.275010108947754px;
    text-align: left;
    font-family: 'Franklin Gothic Medium Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: rgba(131,149,167,1);
    letter-spacing: 0.25px;
}
.percentage-task-progress {
    text-align: left;
    font-family: 'Franklin Gothic Demi Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 0.35px;
    color: #808080;
    opacity: 1;
    margin-right: 8px;
    padding-top: 16px;
    position: relative;
    top: 5px;
}
.taskTitle {
    /*overflow: visible;
    width: 197px;
    white-space: nowrap;*/
    line-height: 20px;
    margin-top: -1.5px;
    text-align: left;
    font-family: 'Franklin Gothic Demi Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0px;
    color: #222F3E;
    opacity: 1;
}
.emplacement {
    /*overflow: visible;*/
    /*width: 55px;*/
    /*white-space: nowrap;*/
    line-height: 16.80000114440918px;
    /*margin-top: -1.4000005722045898px;*/
    text-align: left;
    font-family: 'Franklin Gothic Medium Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: rgba(87,101,116,1);
    overflow-wrap: break-word;
}

.userimg {
    width: 47px;
    object-fit: cover;
    border-radius: 50%;
    border-radius: 23px;
    margin-top: 5px;
}

.city {
    overflow: visible;
    width: 55px;
    white-space: nowrap;
    line-height: 16.80000114440918px;
    margin-top: -1.4000005722045898px;
    text-align: left;
    font-family: 'Franklin Gothic Demi Regular';
    font-size: 14px;
    color: #576574;
    color: rgba(87,101,116,1);
}

.cityimg {
    width: 15px;
    height: 15px;
    transform: matrix(1,0,0,1,0,0);
    float: left;
    margin-top: 5px;
    margin-left: 15px;
}

.citynb {
    overflow: visible;
    width: 58px;
    white-space: nowrap;
    line-height: 16.80000114440918px;
    margin-top: -1.4000005722045898px;
    text-align: left;
    font-family: 'Franklin Gothic Medium Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: rgba(131,149,167,1);
    float: left;
    margin-left: 17px;
}
.b1 , .b2 , .b3 {
    display:inline-table;
}
.bl1, .bl2{
    display: inline-table;
}
.datestyle {
    overflow: visible;
    width: 80px;
    white-space: nowrap;
    line-height: 16.80000114440918px;
    margin-top: -1.4000005722045898px;
    text-align: left;
    font-family: 'Franklin Gothic Medium Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    color: rgba(87,101,116,1);
}

.dateimg {
    width: 14px;
    height: 13px;
    transform: matrix(1,0,0,1,0,0);
    float: left;
    margin-top: 7px;
    margin-right: 5px;
}

.labelper {
    color: #808080;
    font-family: 'Franklin Gothic Medium Regular';
    font-size: 10px;
    margin-left: 168px;
}

progress[value] {
    /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    width: 62px;
    height: 6px;
    margin-left: 126px;
    margin-top: -9px;
}



    progress[value]::-webkit-progress-bar {
        background-color: #F2F2F2;
        border-radius: 7px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    }



    progress[value]::-webkit-progress-value {
        background-color: #8395A7;
        border-radius: 7px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    }

.taskTitle:hover {
    text-decoration: underline;
}

/*.task-card {
    width: 368px;width: 368px;
}*/
.task-card {
    width: auto;
}

.div-search-filter {
    display: flex;
    flex-direction: row;
    /*width: 368px*/
}

.div-list-cards {
    height: calc(100vh);
    overflow: scroll;
    overflow-x: hidden;
    width: 368px;
}

.NbreResource {
    border-radius: 50%;
    border: 1px solid #007bff;
    background: #007bff;
    color: white;
    text-align: center;
    /* min-width: 23px; */
    opacity: 1;
    float: right;
    font-size: 10.6px;
    width: 23px;
    height: 23px;
    font-family: Franklin Gothic Medium Regular;
    margin-top: -14px;
    line-height: 18px;
}
.TagMap {
    border-radius: 50%;
    border: 1px solid #ac92ec;
    background: #ac92ec;
    color: white;
    text-align: center;
    /* min-width: 23px; */
    opacity: 1;
    float: right;
    font-size: 10.6px;
    width: 23px;
    height: 23px;
    font-family: Franklin Gothic Medium Regular;
    line-height: 18px;
}

[data-letters]:before {
    content: attr(data-letters);
    display: inline-block;
    font-size: 1em;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    background: plum;
    vertical-align: middle;
    margin-right: 1em;
    color: white;
}