:root{
    --purple:purple;
    --white:white;
    --pink:#f01e6fa9;
    --blue:#007BFF;
}

body{
    color:#000;
}

td{
    align-content: center;
}

.purple_background{
    background-color: var(--purple) !important;
}

.purple_color{
    color: var(--purple) !important;
}

.white_background{
    background-color: var(--white) !important;
}

.white_color{
    color: var(--white) !important;
}

.pink_background{
    background-color: var(--pink) !important;
}

.pink_color{
    color: var(--pink) !important;
}

.appconcept_link{
    text-decoration-line: underline;
}

.appconcept_link:hover{
    text-decoration-line: none;
    border:1px solid #1A9;
    padding:.3rem;
    border-radius:.3rem;
}

@media screen  and (max-width: 767px) {
    .password_class{
        width:100% !important;
    }
}

@media screen  and (min-width: 768px) {
    .password_class{
        width:70%;
    }
}

#left-panel .navbar .sub-menu.children {
    display: none;
}
#left-panel .navbar .sub-menu.children.show {
    display: block;
}

span.unit{
    color:red;
}

.search_by_container > *{
    display: inline-block !important;
}

.small-device .modal{
    position: fixed !important;
    top:0 !important;
    left:0 !important;

    /* position: fixed !important;
    width:100%;
    text-align: center; */
    /* height:100%; */
    /* top:1000px !important; */
}

.small-device.modal-open{
    overflow: auto;
}

.small-device .button_container{
    width:fit-content;
}

.small-device .button_container > *{
    display: block;
    margin-bottom: .5rem;
}

.small-device .button_container > * > *{
    display: block;
    margin-bottom: .5rem;
}


.button, .btn {
    align-items: center;
    appearance: none;
    /* background-color: #FCFCFD; */
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
    box-sizing: border-box;
    /* color: #36395A; */
    cursor: pointer;
    /* display: inline-flex; */
    font-family: "JetBrains Mono",monospace;
    /* height: 48px; */
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    /* position: relative; */
    /* text-align: left; */
    /* text-decoration: none; */
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    /* font-size: 18px; */
}

.button:focus , .btn:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button:hover , .btn:hover {
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    transform: translateY(-2px);
}

.button:active, .btn:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
}

.loader_modal{
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #000;
    opacity: .5;
    z-index: 1051;
    top:0;
    left:0;
}

.loader_modal img{
    width: 25rem;
    padding: 8rem;
}

.logo_and_company_name, .authenticated_name_role{
    display:block;
}

.logo_and_company_name > *{
    display: inline-block;
}

@media screen  and (max-width: 455px) {
    .company_name_container, .authenticated_name_role{
        display: none;
    }
}

.modal-backdrop.show{
    width:100%;
}

.materiel_container{
    text-align: left;

}

@media screen  and (max-width: 1024px) {
    aside.left-panel .navbar .navbar-nav li a{
        font-size: 14px;
    }

    aside.left-panel{
        max-width: 280px;
        width: 280px;
    }

    aside.left-panel .navbar .navbar-nav li>a{
        max-width: 100%;
    }

    .small-device .right-panel {
        margin-left: 300px;
    }

    aside.left-panel .navbar .navbar-nav li a .menu-icon{
        width: 3rem;
    }

    .navbar .navbar-nav li.menu-item-has-children > a:after {
        content: "";
        position: absolute;
        top: 23px;
        right: 0;
        width: 8px;
        height: 8px;
        border-style: solid;
        border-width: 1px;
        border-color: #607d8b #607d8b transparent transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        display: block;

    }

}

.select_materiels, .select_users{
    position: absolute !important;
    z-index: 1 !important;
    height:auto !important;
    max-height:15rem !important;
    overflow-y: auto !important;
}

.select_materiels li, .select_users li{
    cursor:pointer;
}

.select_materiels li:hover, .select_users li:hover{
    background-color: #1967D2 !important;
    color:#FFF;
}

.quantity_input > input {
    display: none;
}

table td{
    text-align: center;
    align-content:center;
    padding:1rem;
}

.special_text{
    color:rgb(78, 78, 223);
    font-weight:700;
}

.transaction_materiels #dynamic-container {
    margin-top: 20px;
}

.transaction_materiels input[type="text"] {
    padding: 5px;
    margin-bottom: 10px;
    width: 200px;
}

.transaction_materiels ul {
    list-style-type: none;
    padding-left: 0;
}

.transaction_materiels li {
    margin: 5px 0;
    cursor: pointer;
}

.transaction_materiels li:hover {
    background-color: #f0f0f0;
}

.transaction_materiels .readonly-input-container {
    display: flex;
    align-items: center;
}

.transaction_materiels input[readonly] {
    margin-right: 5px;
    background-color: #f0f0f0;
}

.transaction_materiels{
    display:none;
}

.span_stockage{
    font-size: large;
    font-weight: 700;
    color: #007BFF;
}

.transaction_materiels_form input, .transaction_materiels_form span, .transaction_materiels_form select{
    text-align: center;
}

.forgot-phone a:hover{
    text-decoration: none !important;
}

.clear_search{
    cursor:pointer;
}

.option_dropdown{
    padding:1rem;
    color: var(--white) !important;
    background-color: var(--blue) !important;
    /* border-width: 0px;
    border-radius: .5rem; */
}

.toggleDiv {
    position:relative;
    height: 0;
    opacity: 0;
    background-color: lightblue;
    padding: 0 20px;
    margin-top: 10px;
    overflow: hidden;
    visibility: hidden;
    /* top: -16rem; */
    z-index: 1;
    /* transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s linear 0.5s; */
}

.toggleDiv.show {
    height: auto; /* Auto height for the content */
    opacity: 1;
    visibility: visible;
    padding: 20px;
}

.optionDiv{
    display: none;
}

.change_option_container{
    display: none;
}

.align-content-center{
    align-content: center;
}


/*
**  START make header sticky in table
*/

    * {
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
        padding: 20px;
    }

    .table-container {
        max-height: 500px;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 13px; /* Smaller text for compact layout */
    }

    .table-container table {
        border-collapse: collapse;
        width: 100%;
        min-width: 600px;
    }

    .table-container thead th {
        position: sticky;
        top: 0;
        background-color: #f2f2f2;
        color: #333;
        z-index: 2;
        text-align: left;
        padding: 4px 6px; /* Ultra-tight padding */
        border-bottom: 1px solid #ccc;
        font-size: 13px;
    }

    .table-container tbody td {
        padding: 4px 6px; /* Ultra-tight padding */
        border-bottom: 1px solid #eee;
        font-size: 13px;
    }

    /* .table-container tbody tr:nth-child(even) {
        background-color: #fafafa;
    } */

    /* .table-container tbody tr:hover {
        background-color: #f1f1f1;
    } */

    /* Optional fixed column widths */
    .table-container th:nth-child(1),
    .table-container td:nth-child(1) {
        width: 150px;
    }

    .table-container th:nth-child(2),
    .table-container td:nth-child(2) {
        width: 200px;
    }

    .table-container th:nth-child(3),
    .table-container td:nth-child(3) {
        width: 250px;
    }

    /* Make container scrollable horizontally on small screens */
    @media (max-width: 768px) {
        .table-container {
            overflow-x: auto;
        }

        .table-container table {
            width: max-content;
        }
    }

    /* Fix the last column (Options) to the right */
    .table-container th:last-child,
    .table-container td:last-child {
        position: sticky;
        right: 0;
        background-color: #fff;
        z-index: 2;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 4px 6px; /* Match tight layout */
    }

    .table-container th:last-child::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 2px;
        background: #ccc;
    }



/*
**  END make header sticky in table
*/


.change_info_color button{
    display: inline-block;
    border:1px solid #000;
    width:2rem;
    height:2rem;
}

.fade-out {
    animation: fadeOut 20s forwards;
    width:inherit;
}

div:has(.fade-out){
    width:auto;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    80% {
        opacity: 1;
        visibility: visible;
    }
    99% {
        opacity: 0;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.product_name{
    cursor: pointer;
}

tr.highlight {
    background-color: #d1ecf1; /* Light blue */
    transition: background-color 0.3s ease;
}

input[disabled] {
    background-color: #f8f9fa;
    color: #aaa;
    cursor: not-allowed;
}

.card-header button{
    white-space: normal;
}

.is-invalid {
    border-color: #dc3545 !important;
}