/*? Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/*? Normalize */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dd,
dt {
    margin : 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color          : inherit;
}

a,
button,
input,
select,
textarea {
    outline    : none;
    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Quicksand', sans-serif;
}

body {
    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Quicksand', sans-serif;
    font-size  : 14px;
    line-height: 1.5;
    font-weight: 500;
}

body {
    background-color: #fff;
    color           : var(--text-color);
}

/*? Variables */

:root {
    /* Colors */
    --main-color      : #FF365F;
    --secondary-color : #bababa;
    --border-color    : #EBEBEB;
    --text-color      : #212933;
    --background-color: #F9FAFC;

    /* Sizes */
    --font-size      : 16px;
    --line-height    : 1.5;
    --container-width: 1200px;

    /* Borders and Shadows */
    --border-width : 1px;
    --border-radius: 12px;
    --box-shadow   : 0px 0px 50px 0px rgba(0, 0, 0, 0.02);

    /* Spacings */
    --padding: 20px;
    --margin : 16px;

    /* Animations and Transitions */
    --transition-duration: .2s;

    /* Z-index */
    --z-index-high  : 9999;
    --z-index-medium: 1000;
    --z-index-low   : 1;
}


/*? Bootstrap */

input:hover {
    border-color: #cdcdcd;
}


::-moz-selection {
    background: var(--main-color);
    color     : #fff;
}

::selection {
    background: var(--main-color);
    color     : #fff;
}

.flex {
    display: flex;
}

.column {
    flex-direction: column;
}

.primaryColor {
    color: var(--main-color);
}

.width100 {
    width: 100%;
}

.height100 {
    height: 100%;
}

.link {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.link.currentPage{
    color: var(--main-color);
    font-weight: 700;
}

.bounce {
    transition: transform .2s;
}

.primaryBtnBig {
    border       : none;
    background   : var(--main-color);
    margin-top   : 16px;
    color        : #fff;
    padding      : 16px;
    border-radius: 12px;
    font-weight  : 600;
    cursor       : pointer;
}

.primaryBtn {
    border       : none;
    background   : var(--main-color);
    color        : #fff;
    padding      : 10px 32px;
    border-radius: 12px;
    font-weight  : 500;
    cursor       : pointer;
    font-size    : 14px;
    margin       : 0;
}

input:focus {
    border-color: var(--main-color);
}

.label:focus-within .labelContent {
    color: var(--main-color);
}

label:focus-within svg path,
label:focus-within svg circle {
    stroke: var(--main-color);
}

input:-webkit-autofill {
    background-color: rgb(255 239 242) !important;
}

/* Header */

.headerContainer {
    display        : flex;
    justify-content: space-between;
    border-bottom  : 1px solid var(--border-color);
    padding        : 0 30px;
    align-items    : center;
}

.headerLeftSide {
    display    : flex;
    gap        : 40px;
    align-items: center;
}

.logoLink {
    margin : 0;
    display: flex;
}

.hrVertical {
    margin      : 0;
    height      : 70px;
    border      : none;
    border-right: 1px solid var(--border-color);
    width       : 0;
}

.navbarItems {
    display: flex;
    gap    : 40px;
}

.headerRightSide {
    display    : flex;
    align-items: center;
    gap        : 12px;
}

.profilePicture {
    height         : 40px;
    background     : #C4C4C4;
    width          : 40px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #fff;
    font-weight    : 600;
    border-radius  : 7px;
}

.signupContainer {
    display        : flex;
    align-items    : center;
    justify-content: center;
    height         : calc(100vh - 71px);
}

.signup {
    display        : flex;
    align-items    : center;
    flex-direction : column;
    justify-content: center;
    background     : var(--background-color);
    padding        : 52px;
    border-radius  : 16px;
}

.title {
    font-weight  : bold;
    font-size    : 20px;
    margin-bottom: 6px;
}

.desc {
    margin-bottom: 40px;
    font-size    : 14px;
    color        : #bababa;
    width        : 280px;
    text-align   : center;
    font-weight  : 400;
}

.label {
    position: relative;
}


.inputsContainer {
    display       : flex;
    flex-direction: column;
    gap           : 12px;
}

.labelContent {
    position      : absolute;
    font-size     : 12px;
    left          : 14px;
    top           : 9px;
    font-weight   : 500;
    pointer-events: none;
    color         : #bababa;
}

.textInput,
.mailInput,
.passwordInput {
    padding      : 24px 14px 14px;
    border-radius: 12px;
    font-size    : 14px;
    border       : 1px solid #ebebeb;
}

.svgRightSideInput {
    position : absolute;
    right    : 12px;
    top      : 50%;
    transform: translateY(-50%);
    cursor   : pointer;

}

.subLoginSentence {
    display: flex;
    gap: 6px;
    font-size  : 12px;
    color      : #bababa;
    text-align : center;
    margin-top : 12px;
    font-weight: 400;
}

/*? Tables */

.tableContainer {
    table-layout: fixed;
    border-collapse: collapse;
    width          : 100%;
}

.tableHead {
    font-size: 14px;
    color    : #bababa;
}

th {
    font-weight: 500;
    width      : auto;
}

td {
    padding      : 10px;
    width        : 100px;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
    text-align: left;

}

td span {
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
}

td svg {
    cursor: pointer;
}

.tableBody {
    text-align: center;
}

.homeContainer {
    display        : flex;
    justify-content: space-between;
    /* padding     : 20px 30px; */
}

table tr {
    font-weight: 600;
}

table tr:nth-child(even) {
    background-color: var(--background-color);
}

table tr:hover,
table tr:hover svg path {
    /* background: #F9F4F7;
    color: var(--main-color);
    stroke: var(--main-color); */
    background: #f5f6f8;
    color     : #000;
    stroke    : #000;
}

thead tr:hover,
thead tr:hover svg path {
    color : #bababa;
    stroke: #bababa;
}

thead tr:hover {
    background: none;
    color     : inherit;
}

.thDate{
    width: 100px;
}

.thPrice{
    width: 90px;
}

.thOptions {
    width: 70px;
}

.center{
    text-align: center;
}

.thLibelle{
    width:25%
}

.filtersRow {
    display    : flex;
    gap        : 20px;
    align-items: center;
}

.textInputSecondary {
    font-size    : 14px;
    border       : 1px solid #EBEBEB;
    border-radius: 12px;
    padding      : 11px;
    padding-right: 60px;
}

.btnSelectContainer {
    background      : #fff;
    display         : flex;
    border          : 1px solid #ebebeb;
    border-radius   : 12px;
    padding         : 6px;
    /* width        : 340px; */
}

.btnSelectOption {
    background   : none;
    padding      : 6px 12px;
    color        : var(--text-color);
    font-weight  : 400;
    font-size    : 14px;
    border-radius: 7px;
    font-weight  : 500;
    cursor       : pointer;
}

.btnSelectOption.selected {
    background   : var(--main-color);
    padding      : 6px 12px;
    color        : #fff;
    font-weight  : 500;
    font-size    : 14px;
    border-radius: 7px;
}

.btnSelectHr {
    border     : none;
    border-left: 1px solid #EBEBEB;
}

.selectInput {
    cursor          : pointer;
    background-color: #fff;
    display         : flex;
    align-items     : center;
    gap             : 20px;
    border          : 1px solid #EBEBEB;
    border-radius   : 12px;
    padding         : 11px;
}

.filtersInputContainer {
    display           : flex;
    align-items       : center;
    justify-content   : space-between;
    /* margin         : 12px 0 24px; */
    margin            : 12px 0 20px;
}

.filtersCountContainer {
    display    : flex;
    align-items: center;
    gap        : 7px;
}

.countPage {
    color      : var(--main-color);
    font-weight: 600;
}

.arrowContainer {
    display    : flex;
    align-items: center;
    gap        : 8px;
}

.arrowContainer svg {
    cursor: pointer;
}

.contentPageContainer {
    padding: 20px 30px;
}

.headerPageContainer {
    padding         : 20px 30px;
    background-color: #F9FAFC;
}

.notifsContainer {
    display      : none;
    position     : sticky;
    min-height   : calc(100vh - 71px);
    top          : 0;
    /* background: #F9FAFC; */
    height       : auto;
    border-left  : 1px solid var(--border-color);
    padding      : 20px 30px;
}

.newNotif {
    display      : flex;
    align-items  : center;
    color        : var(--main-color);
    font-weight  : 600;
    gap          : 6px;
    margin-top   : -8px;
    margin-bottom: 20px;
}

.notifContainer {
    display      : flex;
    align-items  : center;
    border       : 1px solid #ebebeb;
    border-radius: 12px;
    padding      : 15px;
    gap          : 12px;
    background   : #ffff;
}

.notifTitle {
    font-weight: 600;
}

.date {
    font-size  : 12px;
    color      : #bababa;
    font-weight: 400;
}

/*? Nav table */
.navTableContainer {
    display        : flex;
    align-items    : center;
    gap            : 12px;
    justify-content: center;
    margin-top     : 20px;
}

.navTableContainer svg,
.navTableContainer span {
    cursor: pointer;
}

.navTable {
    display    : flex;
    align-items: center;
    gap        : 12px;
}

.navPage.currentNavPage,
.pageFinal.currentNavPage {
    color      : var(--main-color);
    font-weight: bold;
}

.seeAll {
    margin-left: 4px;
}

.navPages {
    display    : flex;
    align-items: center;
    gap        : 12px;
    max-width  : 45px;
}

.svgButton {
    position: relative;
}

.svgButton svg {
    position      : absolute;
    top           : 50%;
    transform     : translateY(-50%);
    right         : 12px;
    pointer-events: none;
}

.state {
    border-radius: 5px;
    padding      : 6px 12px;
}

.state.finished {
    background: #14AA1110;
    color     : #14AA11;
}

.state.progress {
    background: #2862C110;
    color     : #2862C1;
}

.errorMessage {
    color     : var(--main-color);
    display   : inline-block;
    margin    : 14px 0 0px;
    visibility: hidden;
}


.invalid {
    border-color: var(--main-color);
}

.invalid:hover {
    border-color: var(--main-color);
}

#eyeClose {
    display: none;
}

#allFoldersTable tbody tr {
    display: none;
}

#noResult {
    display        : none;
    justify-content: center;
    margin-top     : 10px;
}

.notif.active path {
    stroke: var(--main-color);
}

/* Nav folder */

.navFolderContainer {
    display        : flex;
    flex-direction : column;
    min-width      : 300px;
    height         : calc(100vh - 71px);
    justify-content: space-between;
    padding        : 25px 30px;
    background     : var(--background-color);
}

.navFolderTop {
    display       : flex;
    flex-direction: column;
    gap           : 20px;
}

.tertiaryLink {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    color        : var(--secondary-color);
    border-radius: 6px;
    padding      : 10px;
    margin       : -10px;
    transition   : .2s;
}

.tertiaryLink:hover {
    color     : #959595;
    background: #eff0f2;
}

.horizontalHr {
    border    : none;
    border-top: 1px solid var(--border-color);
    width     : 100%;
}

.navFolder {
    display       : flex;
    flex-direction: column;
    gap           : 12px;
    font-weight   : 600;
}

.folder {
    display    : flex;
    align-items: center;
    gap        : 6px;
    padding    : 10px 30px;
    margin-left: -30px;
    width      : calc(100% + 60px);
}

.folderItem.currentPage .folder {
    background : #F9F4F7;
    /* width   : calc(100% + 60px);
    margin-left: -30px;
    padding    : 10px 30px; */
    color      : var(--main-color);
}

.folderItem.currentPage .folder svg path,
.folderItem.currentPage .folder svg circle {
    stroke: var(--main-color);
}

.folder:hover {
    color: #434343;
}

.flex {
    display: flex;
}

.folderPageContent {
    width     : 100%;
    /* padding: 25px 30px; */
}

.titleFolderTop {
    padding         : 25px 30px;
    background-color: #0C419A;
    color           : #fff;
}

.breadcrumb {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    margin-bottom: 10px;
    font-weight  : 400;
}

.pageFolder {
    padding: 20px 30px;
}

.titleFolderContainer {
    display         : flex;
    align-items     : center;
    gap             : 12px;
    /* margin-bottom: 25px; */
}

.breadcrumbElement {
    cursor       : pointer;
    padding      : 4px 6px;
    transition   : .2s;
    border-radius: 6px;
    margin       : -4px -6px;
}

.breadcrumbElement:hover {
    background: #2454A4;
}

.status {
    color        : #fff;
    padding      : 6px 12px;
    border-radius: 5px;
    background   : #2454A4;
}

.titleFolder {
    font-size  : 19px;
    font-weight: 600;
}

.title {
    font-size     : 18px;
    font-weight   : 700;
    /* margin     : 20px 0 12px; */
}

/*? Banner */

.bannerContainer {
    background: #0C419A;
    position  : relative;
    padding   : 30px;
    color     : #fff;
}

.welcomeSentence {
    font-size: 24px;
}

.welcomeDesc {
    font-size       : 14px;
    font-weight     : 400;
    /* margin-bottom: 12px; */
}

.welcomeLogo {
    padding  : 31px 0px 32px;
    position : absolute;
    right    : 30px;
    top      : 50%;
    transform: translateY(-50%);
}

.titleFolderTop {
    display        : flex;
    justify-content: space-between;
}

.titleFolderRightside {
    text-align     : right;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    gap            : 6px;
}

.dataUserContainer {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    justify-content: flex-end;
}

.dataUser {
    display       : flex;
    flex-direction: column;
}

.usernameUserFolder {
    font-weight: 600;
}

.streetUserFolder {
    font-weight: 400;
    font-size  : 12px;
}

.backFolder {
    display    : flex;
    align-items: center;
    gap        : 6px;
}

.price {
    text-align: right;
}

.selectBtn {
    position: relative;
    cursor  : pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.selectContainer {
    display       : none;
    top           : 24px;
    position      : absolute;
    background    : #fff;
    left          : 50%;
    transform     : translateX(-50%);
    padding       : 12px;
    z-index       : 9;
    border-radius : 6px;
    box-shadow    : 0 0 8px #00000010;
    flex-direction: column;
}

.selectOption {
    padding      : 8px 20px;
    border-radius: 6px;
    display      : inline-block;
    font-weight  : 500;
    cursor       : pointer;
}

.selectOption:hover {
    background: var(--main-color);
    color     : #fff;
}

.selectBtnRight .selectContainer {
    right    : 0;
    left     : auto;
    transform: translateX(18px);
}

.libelle{
    text-align: left;
}