/*
    GENERAL
*/
body {
    color: white;
}

.restricted {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem
}

h3 {
    padding: 1.5rem 0;
}
form .disable, .mobile-navigation {
    display: none !important;
}
header {
    border-top: 1px solid #aeaeae;
}
input.is-invalid {
    border: 1px solid red !important;
}
.form-control .alert-danger {
    background: rgb(219, 45, 45);
    padding: 10px;
    color: #444;
    border-radius: 16px;
    margin: 10px 0px;
}
.guest-background {
    background: white !important;
}
.box-login {
    box-shadow: 0px 0px 8px -1px #000000;
}
.login-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}
.login-logo {
    width: 200px !important;
}
.nav-logo-container {
    margin-right: 50px;
}
.nav-logo {
    width: 100px;
}
.submit-form {
    margin: 0 auto;
}
.hidden-link {
    opacity: 0;
}
.login-request {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}
.login-request button {
    background: #3f76fa;
    border-radius: 16px;
    padding: 10px;
    color: white;
    border: 1px solid #3f76fa;
    transition: all linear 0.2s;
}
.login-request button:hover {
    background: transparent;
    color: #3f76fa;
}
/* Item achat*/
.purchase-item {
    display: flex;
    border: 1px solid white;
    justify-content: space-between;
    padding: 1.5rem;
    margin-bottom: 15px;
    border-radius: 6px;
    background: white;
    transition: all linear 0.3s;
}
.purchase-item p {
    color: white;
    width: 25%;
    color: #444;
}

.purchase-item:hover {
    transform: scale(0.99);
}

.text-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.delete-button {
    padding: 10px;
    background: rgb(227, 25, 25);
    border-radius: 6px;
}

.update-button {
    padding: 10px;
    background: rgb(196, 196, 52);
    border-radius: 6px;
}
.purchase-title {
    display: flex;
    align-items: center;
}
.purchase-item .text-item.pending {
    background: rgb(163, 163, 29);
}
.purchase-item .text-item.valid {
    background: rgb(28, 148, 28);
}
.purchase-item .text-item.pending, .purchase-item .text-item.valid {
    padding: 10px;
    border-radius: 6px;
    color: white;
}
/* Header de la page */
.hearder-page-purchase {
    display: flex;
    gap: 20px;
}
.container-delete-purchase, .container-success-purchase, .container-success-society {
    background: white;
    color: black;
    border-radius: 16px;
    margin-top: 100px;
    text-align: center;
}
.container-delete-purchase .delete-title, .container-success-purchase .success-title, .container-success-society .success-title{
    font-weight: bold;
    font-size: 25px;
}
.container-success-update {
    background: white;
    border-radius: 16px;
    padding: 30px;
    color: black;
    text-align: center;
    margin-top: 100px;
}
.container-success-update .update-title {
    font-weight: bold;
    font-size: 25px;
}
/*
    MULTIPLE PURCHASE
*/
.container-multiple-form-achat {
    overflow-x: scroll;
}
.container-multiple-form-achat form .multiple-form-table {
    width: 100%;
}
.container-multiple-form-achat form .multiple-form-table th {
    color: #444;
}
.container-multiple-form-achat form .multiple-form-table td input, .container-multiple-form-achat form .multiple-form-table td select, .container-multiple-form-achat form .multiple-form-table td textarea{
    border: 1px solid #D0D0D0;
    border-radius: 16px;
}
.container-multiple-form-achat form .multiple-form-table td input[type="file"] {
    display: none;
}
.container-multiple-form-achat form .multiple-form-table td .label-picture-multiple {
    border: 1px solid rgb(31 41 55 / var(--tw-bg-opacity));
    color: rgb(31 41 55 / var(--tw-bg-opacity));
    display: block;
    width: 160px;
    text-align: center;
    padding: 10px;
    border-radius: 16px;
    cursor: pointer;
    transition: all linear 0.3s;
    background: transparent;
}

.container-multiple-form-achat form .multiple-form-table td .label-picture-multiple:hover, .multiple-form-action button:hover {
    background: rgb(31 41 55 / var(--tw-bg-opacity));
    color: white;
}

.multiple-form-action {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}
.multiple-form-action button {
    border: 1px solid rgb(31 41 55 / var(--tw-bg-opacity));
    padding: 10px;
    border-radius: 16px;
    background: transparent;
    color: rgb(31 41 55 / var(--tw-bg-opacity));
    transition: all linear 0.3s;
}

/*
    LIST
*/
.list-result-date {
    background: white;
    padding: 1.5rem;
    border-radius: 6px;
    margin-bottom: 10px;
}
.list-result-date p {
    color: #275E7AFF;
}
.list-result {
    border-top: 2px solid #e0e0e0;
    padding-top: 30px;
}
.list-result .item-title {
    text-align: center;
    background: white;
}
.list-result .item-title p {
    color: black;
}
.purchase-item form, .purchase-item #disable-preview{
    margin: 0px 20px;
}
.purchase-item #disable-preview {
    opacity: 0;
}
#submit-purchase-pdf img {
    width: 60px;
}
#submit-preview img {
    width: 60px;
}
.list-no-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #444;
}

/* Filtre */
.container-list .list-title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #444;
}
.container-filter-list form {
    display: flex;
    margin-bottom: 30px;
    align-items: end;
    justify-content: space-evenly;
    color: #444;
    padding: 30px;
    background: white;
    border-radius: 16px;
}

.container-filter-list form select {
    border: 1px solid #929292;
    border-radius: 16px;
}

.container-filter-list form  .submit-filter {
    background: rgb(31 41 55 / var(--tw-bg-opacity));
    padding: 10px;
    border-radius: 6px;
    width: 200px;
    height: 45px;
    color: white;
}
.select-item-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.select-item-container .item-box {
    width: 100%;
}

#submit-export-month {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    color: #444;
    margin: 15px 0px;
    transition: all linear 0.3s;
    width: fit-content;
}

#submit-export-month img {
    width: 30px;
}

#submit-export-month:hover {
    transform: scale(0.95);
}
/*
    ADMINISTRATION
*/
.container-admin-dashboard {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 100px 0px 0px 0px;
}
.container-admin-dashboard .admin-dashboard-up, .container-admin-dashboard .admin-dashboard-down {
    width: 60%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.container-admin-dashboard .admin-dashboard-link {
    border: 1px solid white;
    border-radius: 6px;
    padding: 25px;
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: white;
    color: #444;
    box-shadow: 1px 3px 10px 2px rgba(0,0,0,0.58);
    transition: all linear 0.3s;
}

.container-admin-dashboard .admin-dashboard-link:hover {
    transform: scale(0.95);
}
/* Register user */
.register-submit {
    background: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
    color: white !important;
}
/* Liste des société */
.container-list-society .item-list-society {
    display: flex;
    justify-content: space-between;
    border: 1px solid white;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
    gap: 15px;
}

.container-list-society .item-list-society p, .container-list-society .item-list-society a, .container-list-society .item-list-society form {
    width: 22%;
}

/*
    VALIDATION
*/
.container-validation .section-title {
    font-size: 30px;
    color: #444;
    font-weight: bold;
    padding: 20px 0px;
    border-bottom: 2px solid #D0D0D0;
    margin-bottom: 40px;
}
.load-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0px;
}
.load-more-container button {
    background: rgb(31 41 55 / var(--tw-bg-opacity));
    padding: 15px;
    border-radius: 6px;
    border: 1px solid rgb(31 41 55 / var(--tw-bg-opacity));
    cursor: pointer;
    transition: all linear 0.2s;
    color: white;
}
.load-more-container button:hover {
    background: transparent;
    color: rgb(31 41 55 / var(--tw-bg-opacity));
}
/*
    UPDATE PURCHASE
*/
.container-purchase-picture img {
    width: 250px;
}

/*********************************
    RESPONSIVE
*********************************/

@media screen and (max-width: 767px) {
    .restricted {
        padding: 1rem;
        padding-bottom: 150px;
    }
    .mobile-navigation {
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100px;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        background: white;
        box-shadow: 0px -3px 16px -1px rgba(0,0,0,0.56);
        border-radius: 16px 16px 0px 0px;
        z-index: 10;
    }
    .mobile-navigation .mobile-icon-navigation {
        height: fit-content;
        color: #444;
        font-size: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mobile-navigation .mobile-icon-navigation img {
        width: 40px;
    }
    .mobile-navigation .mobile-icon-navigation.active-menu img, .mobile-navigation .mobile-icon-navigation.active-menu p {
        filter: invert(16%) sepia(56%) saturate(2677%) hue-rotate(231deg) brightness(90%) contrast(93%);
    }

    .purchase-item {
        flex-direction: column;
        gap: 5px;
    }
    .purchase-item .purchase-title, .purchase-item .text-item {
        width: 100%;
        justify-content: center;
    }
    .container-admin-dashboard .admin-dashboard-up, .container-admin-dashboard .admin-dashboard-down {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .container-admin-dashboard {
        gap: 30px;
    }
    .delete-button, .update-button {
        text-align: center;
    }
    .purchase-item form {
        margin: 0;
    }
    .container-purchase-detail h3 {
        text-align: center;
    }
    .purchase-detail-description {
        flex-direction: column;
        gap: 15px;
    }
    .container-purchase-picture img {
        width: 150px;
    }
    .container-delete-purchase, .container-success-purchase, .container-success-society, .container-success-update  {
        margin: 100px 10px;
        padding-bottom: 1rem;
    }
    .hearder-page-purchase h2 {
        display: none;
    }
    .profile-edit {
        padding-bottom: 150px !important;
    }
    .container-filter-list form {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .container-filter-list form .form-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .container-filter-list form .form-group select {
        width: 100%;
    }
    .purchase-item #disable-preview {
        display: none;
    }
    #submit-purchase-pdf img, #submit-preview img {
        width: 30px;
        margin: 10px 0px;
    }
    .purchase-detail-box {
        padding: 20px;
    }
    #submit-export-month {
        font-size: 15px;
        gap: 10px;
    }
    #submit-export-month img {
        width: 25px;
    }
    .pager .page-number {
        display: none;
    }
    .btn-export-pdf {
        bottom: 120px;
    }
    .select-item-container {
        flex-direction: column;
    }
    .list-no-result {
        position: initial;
        margin-top: 20px;
        text-align: center;
        transform: none;
        font-size: 25px;
    }
}


/******************
*
*
*   STYLE V2
*
************************/

/*
    GENERAL
*/
body {
    color: black;
}
.title {
    font-size: 40px;
    font-weight: bold;
}
.sub-title {
    font-size: 30px;
}
.blue-button {
    background: #4379ff !important;
    border-radius: 50px;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    border: 1px solid #4379ff;
    transition: all linear 0.3s;
    cursor: pointer;
    text-align: center;
}
.blue-button:hover {
    background: transparent !important;
    color: #4379ff;
}
.red-button {
    background: #ff5151 !important;
    border-radius: 50px;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    border: 1px solid #ff5151;
    transition: all linear 0.3s;
    cursor: pointer;
}
.red-button:hover {
    background: transparent !important;
    color: #ff5151;
}
.green-button {
    background: #06b623 !important;
    border-radius: 50px;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    border: 1px solid #06b623;
    transition: all linear 0.3s;
    cursor: pointer;
}
.green-button:hover {
    background: transparent !important;
    color: #06b623;
}
.yellow-button {
    background: #ff9b0b !important;
    border-radius: 50px;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    border: 1px solid #ff9b0b;
    transition: all linear 0.3s;
    cursor: pointer;
}
.yellow-button:hover {
    background: transparent !important;
    color: #ff9b0b;
}
.center {
    text-align: center;
}
.end {
    text-align: end;
}
.service-status {
    color: #ff9b0b !important;
}
.service-status.validate {
    color: #00c944 !important;
}
.fade-text {
    color: #A5A5A5;
}
.submit-form-button {
    width: fit-content;
    padding: 10px 20px;
    background: #4379ff !important;
    border-radius: 6px;
    color: white !important;
    border: 1px solid #4379ff;
    transition: all linear 0.3s;
}
.submit-form-button:hover {
    background: transparent !important;
    color: #4379ff !important;
}
img.more-option {
    width: 30px;
}
.container-success-update a, .container-success-purchase a {
    display: inline-block;
    margin-top: 50px;
}
/* Mise en place du layoute général */
.app-container {
    display: flex;
}
nav {
    width: 350px;
    display: flex;
    flex-direction: column;
    height: 100vh;
}
main {
    width: 100%;
    height: 100vh;
    background: #f3f5f9;
    display: flex;
    flex-direction: column;
}

.logo-mobile {
    display: none;
}
.header-profile {
    background: white;
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.header-profile img {
    width: 30px;
}
.header-profile .relative {
    display: flex;
    justify-content: end;
}
.display-user {
    width: fit-content;
}
.dropdown-user {
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-right: 20px;
}
.user-dropdown-menu {
    margin-top: 2.5rem !important;
}
.main-content-container {
    overflow: scroll;
    flex-grow: 1;
}
nav .header-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    background: white;
}
#navigation-content {
    background: white;
    flex-grow: 1;
    transition: all linear 0.3s;
}
#navigation-content.collapse {
    background: white;
    height: 100%;
    transform: translateX(-100%);
}
nav .header-navigation .header-logo {
    width: 80px;
}
nav .header-navigation .header-menu-action {
    width: 30px;
    cursor: pointer;
}
.navigation-item {
    color: black;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 10px;
    border-left: 2px solid white;
}
.navigation-item img {
    width: 30px;
}
.navigation-item.active-link {
    color: #3f76fa;
    background: #e7E7E7;
    border-left: 2px solid #3f76fa;
    transition: all linear 0.3s;
}
.navigation-item.active-link img {
    filter: invert(42%) sepia(38%) saturate(4321%) hue-rotate(209deg) brightness(97%) contrast(102%);
}
.navigation-item:hover {
    background: #e7E7E7;
    border-left: 2px solid #3f76fa;
}

/*
    DASHBOARD V2
*/
.dashboard-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding: 20px;
}
.purchase-container {
    width: 45%;
    background: white;
    padding: 15px;
    border-radius: 6px;
    height: 100%;
}
.purchase-container-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    padding: 10px 10px 20px 10px;
}
.purchase-container-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    cursor: pointer;
    transition: all linear 0.3s;
    background: transparent;
    border-radius: 6px;
}
.purchase-container-item:nth-child(2n + 1) {
    background: #eaeaea;
}
.purchase-meta-container {
    width: 80%;
    display: flex;
    justify-content: space-around;
}
.purchase-meta-container p {
    width: 25%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.purchase-status-container {
    width: 20%;
}
.purchase-container-item:hover {
    background: #c2c2c2;
}
.no-result {
    text-align: center;
    padding: 50px 0px;
}

/*
    ADMIN MENU V2
*/
.admin-menu-container {
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
}
.admin-menu-up, .admin-menu-down {
    display: flex;
    gap: 100px;
}
.admin-mneu-selector {
    width: 400px;
    background: white;
    border-radius: 6px;
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 50px;
    cursor: pointer;
    transition: all linear 0.3s;
}
.admin-mneu-selector:hover {
    transform: scale(1.05);
    box-shadow: 0px 7px 17px -3px rgba(0,0,0,0.7);
}
.container-list-user .accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}
.container-list-user .active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}
/*
    FORMULAIRE ACHAT
*/
.purchase-form-container, .multiple-purchase-form-container {
    height: auto;
    padding: 20px;
}
.purchase-nav-container {
    padding: 20px 0px;
}
.purchase-nav-item {
    padding: 15px;
    border-bottom: 2px solid #eaeaea;
    transition: all linear 0.3s;
}
.purchase-nav-item.active-link {
    border-bottom: 2px solid #3f76fa;
}
.purchase-form-title {
    padding: 50px 0px;
}
.purchase-form-container form {
    width: 50%;
}
.purchase-form-container .form-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.purchase-form-container .form-control {
    display: flex;
    flex-direction: column;
    width: 48%;
}
.purchase-form-container .form-control input, .purchase-form-container .form-control select, .purchase-form-container .form-control textarea {
    width: 100%;
    border: 1px solid #eaeaea;
    border-radius: 6px;
}
.purchase-form-container .form-control input[type='file'] {
    border: none;
    display: none;
}
.purchase-form-container .form-control label[for='picture'] {
    width: 60%;
    text-align: center;
}
.form-img-title {
    margin-bottom: 10px;
}
/* Achat multiple */
.multiple-purchase-form-container .form-group {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    align-items: center;
}
.multiple-purchase-form-container .form-control {
    display: flex;
    flex-direction: column;
}
.multiple-purchase-form-container .form-control button {
    margin-bottom: 15px;
}
.multiple-purchase-form-container .form-control input, .multiple-purchase-form-container .form-control select, .multiple-purchase-form-container .form-control textarea {
    width: 200px;
    border: 1px solid #eaeaea;
    border-radius: 6px;
}
.multiple-purchase-form-container .form-control input[type='file'] {
    border: none;
    display: none;
}
.multiple-purchase-form-container .form-control label[for='picture'] {
    text-align: center;
}
.multiple-purchase-form-container .form-separator {
    width: 100%;
    height: 2px;
    border: 1px solid #c6c5c5;
    margin: 10px 0px 20px 0px;
}
.remove-tr {
    background-color: #ff5151 !important;
    padding: 2px 10px;
    border-radius: 50%;
    transition: all linear 0.2s;
    color: white;
    margin-bottom: 30px;
}
.remove-tr:hover {
    transform: scale(0.9);
}
/*
    LISTE
*/
.page-list-container {
    height: 100%;
    padding: 40px;
}
.list-title-container {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* Filtre de recherche */
.list-filter-container form {
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.list-filter-container form label {
    color: #afafaf;
}
.list-filter-container form select {
    border: none;
    border-radius: 50px;
}
.select-filter {
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.text-filter {
    display: flex;
    gap: 20px;
}
.text-filter input {
    border-radius: 6px;
    border: none;
}
/* Accordion */
.accordion {
    background-color: white !important;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    border-radius: 16px 16px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion:hover {
    background-color: #ccc !important;
}
/* Pagination */
.pager {
    display: flex;
    width: fit-content;
}
.pager .disabled {
    display: none;
}
.pager li {
    color: #afafaf;
    padding: 10px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all linear 0.3s;
}
.pager li:hover {
    color: #4379ff;
}
.pager .active-page, .pager .prev-link-button, .pager .next-link-button {
    color: #3f76fa;
}
/* Panel */
.accordion.active + .panel {
    overflow: visible;
}
.panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
}
.panel-item {
    background: #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    transition: all linear 0.3s;
}
.panel-item:hover {
    background: #4379ff;
}
.panel .user-dropdown-menu {
    position: absolute;
    margin-top: 0px !important;
    margin-right: 50px;
}
.panel-item.select {
    background: #4379ff !important;
}
.panel-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
}
.panel-item-meta p, .panel-item .service-status, .panel-item .meta-block {
    width: 20%;
}
.panel-item .meta-block {
    display: flex;
    justify-content: space-between;
}
.panel-item .preview-download {
    width: 25%;
    margin-right: 25px;
}
/**
    DETAIL PURCHASE
**/
.container-purchase-detail {
    height: auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.purchase-detail-box {
    width: 70%;
    background: white;
    border-radius: 6px;
    padding: 20px;
    min-height: 100%;
}
.purchase-detail-header, .purchase-detail-action {
    display: flex;
    align-items: center;
}
.purchase-detail-header {
    gap: 50px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
}
.purchase-detail-action {
    gap: 15px;
}
.purchase-detail-description {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}
.purchase-detail-text {
    width: 50%;
}
.purchase-detail-text p {
    margin-bottom: 20px;
}
.container-delete-purchase button {
    margin-top: 50px;
}
/**
    UPDATE PURCHASE
**/
.form-achat-title {
    margin-bottom: 50px;
}
/**
    FRAIS DE DEPLACEMENT
**/
.travel-purchase-container {
    border-top: 2px solid #cecece;
    margin-bottom: 20px;
}
.travel-purchase-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.travel-purchase-detail img {
    width: 200px;
}
.travel-purchase-item {
    display: flex;
    gap: 20px;
}
/**
    RESPONSIVE ECRAN PORTABLE
**/
@media screen and (max-width: 1500px) {
    .dashboard-container {
        height: auto;
        flex-direction: column;
    }
    .purchase-container {
        width: 70%;
    }
    .list-filter-container form {
        gap: 10px;
    }
    .list-filter-container .form-group {
        width: 20%;
        display: flex;
        flex-direction: column;
    }
    .page-list-container {
        padding: 20px;
    }
}
/**
    RESPONSIVE TABLETTE
**/
@media screen and (max-width: 1024px) {
    .main-content-container {
        padding-bottom: 150px;
    }
    .admin-menu-container, .container-purchase-detail, .purchase-form-container, .multiple-purchase-form-container {
        height: auto;
    }
    .admin-menu-up, .admin-menu-down {
        flex-direction: column;
    }
    .dashboard-container {
        padding: 10px;
    }
    .purchase-container, .purchase-form-container .form-control label[for='picture'] {
        width: 90%;
    }
    .purchase-detail-box, .purchase-detail-text, .list-filter-container .form-group {
        width: 100%;
    }
    .purchase-detail-description {
        flex-direction: column;
    }
    .purchase-detail-image img {
        width: 300px;
        margin: 0 auto;
    }
    .purchase-form-container form, .panel-item-meta p, .panel-item .service-status, .panel-item .meta-block {
        width: 100%;
    }
    .multiple-purchase-form-container .form-group {
        gap: 10px;
    }
    /* .list-filter-container form {
        flex-direction: column;
    } */
    .select-filter, .text-filter {
        flex-direction: column;
    }
    .list-filter-container button {
        width: 200px;
        margin: 0 auto;
    }
    .list-filter-container {
        margin-bottom: 30px;
    }
    .panel-item-meta .meta-type, .panel-item-meta .meta-date, .panel-item input {
        display: none;
    }
    .panel-item-meta {
        flex-direction: column;
        width: 50%;
    }
    .panel-item-meta .meta-name, .panel-item-meta .meta-block, .panel-item-meta .meta-user, .panel-item-meta .meta-society {
        justify-content: start;
    }
    img.more-option {
        width: 50px;
    }
    .panel .user-dropdown-menu {
        position: absolute;
        top: 0;
    }
    .panel {
        overflow-y: visible;
    }
}
/**
    RESPONSIVE MOBILE
**/
@media screen and (max-width: 767px) {
    .panel-item-meta {
        flex-direction: column;
        gap: 10px;
    }
    .panel-item-meta p {
        width: 100%;
        text-align: start;
    }
    .text-item {
        justify-content: start;
    }
    .title {
        font-size: 25px;
    }
    .sub-title {
        font-size: 20px;
    }
    .red-button, .blue-button {
        padding: 5px 10px;
        font-size: 15px;
    }
    .submit-form-button {
        padding: 5px 10px;
    }
    nav {
        display: none;
    }
    .main-content-container, .page-list-container {
        height: auto;
    }
    .header-profile .relative {
        justify-content: space-between;
        align-items: center;
    }
    .admin-menu-container, .admin-menu-up, .admin-menu-down {
        gap: 30px;
    }
    .admin-mneu-selector, .purchase-form-container .form-control, .purchase-form-container .form-control label[for='picture'], .multiple-purchase-form-container .form-control, .multiple-purchase-form-container .form-control input, .multiple-purchase-form-container .form-control select, .multiple-purchase-form-container .form-control textarea {
        width: 100%;
    }
    .meta-type, .meta-society, .meta-date, .panel-item .logo-mobile {
        display: none;
    }
    .purchase-meta-container {
        flex-direction: column;
    }
    .purchase-meta-container p {
        width: 100%;
        text-align: start !important;
    }
    .purchase-meta-container, .purchase-status-container {
        width: 50%;
    }
    .purchase-status-container  {
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .purchase-detail-header {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .purchase-form-container .form-group, .multiple-purchase-form-container .form-group {
        flex-direction: column;
        gap: 15px;
    }
    .purchase-nav-item {
        font-size: 13px;
    }
    .panel-item .service-status {
        justify-content: center;
    }
    .pager .next-link-button, .pager .prev-link-button {
        font-size: 25px;
    }
    .panel .user-dropdown-menu {
        margin-top: 0px !important;
    }
    .panel-item .preview-download {
        width: 45%;
    }
    .travel-purchase-item {
        flex-direction: column;
    }
}
@media (hover: none) {
    .panel-item:hover { background: #eaeaea; }
}