/*############################################################################################################
//  Droits d'auteur © 2022-2023 P.ink, l'ancre d'une vie Tous droits réservés, en collaboration avec OptimalC
//############################################################################################################*/

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Conteneur des Panneaux
 *  ############################################################################################################
 */
div.panelID {
    position:relative;top:0;left:0;margin:0.25rem 0.5rem 0.5rem 0.5rem;padding:1rem 0.5rem;width:calc( 100% - 2.5rem );height:auto;
    display:inline-flex;flex:1 0 auto;flex-direction:row;flex-wrap:wrap;
    border-style:solid;border-width:2px;border-color:white;border-radius:0.5rem;
}
div.panelID::before {
    position:absolute;top:-8px;left:1rem;
    font-size:16px;font-weight:400;padding:0 0.5rem;
    content:"Gestion";background-color:#A7A7A7;color:#212121;text-shadow:0 0 1px #212121;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Onglets des Panneaux
 *  ############################################################################################################
 */
div.panelID > .onglet {
    padding:0 2rem;width:auto;height:50px;
    background-color:#DADADA;color:#212121;
    border-style:solid;border-width:1px 1px 0 0;border-color:#212121;border-radius:0.5rem 0.5rem 0 0;
    cursor:pointer;
}
div.panelID > .onglet:first-of-type {
    border-width:1px 1px 0 1px;
}

div.panelID > .onglet.active {
    background-color:#006F00;color:#FAFAFA;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Contenu des Panneaux | Conteneur
 *  ############################################################################################################
 */
div.panelID > .panelContent {

    padding:0.5rem;

    width:calc(100% - 2px);height:auto;
    display:inline-flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;
    background-color:#C7C7C7;
    border:solid 1px #212121;
    border-radius:0 0.5rem 0.5rem 0.5rem;
    overflow-y:hidden;overflow-x:hidden;
}
div.panelID > .panelContent > .panelToggle {
    margin:0;padding:0;
    display:inline-flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;
    width:100%;height:auto;
}
div.panelID > .panelContent > .panelToggle.hidden {
    display:none;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Contenu des Panneaux | Boutons
 *  ############################################################################################################
 */
.panelID > .panelContent > .panelToggle > button {
    position:relative;margin:0 0 0.25rem 0.25rem;padding:0 24px 0 48px;width:auto;max-width:256px;height:32px;
    display:inline-flex;flex:0 1 auto;align-items:center;justify-content:flex-start;
    font-weight:600;line-height:32px;
    border-style:solid;border-width:1px;border-color:#FAFAFA;border-radius:0.5rem;outline:0;
    background-color:#212121;color:#FAFAFA;
    cursor:pointer;outline:0;
}

.panelID > .panelContent > .panelToggle > button:hover {
    background-color:#DADADA;color:#212121;
}
.panelID > .panelContent > .panelToggle > button::before {
    position:absolute;top:0;left:0;width:30px;height:30px;
    font-family:"FontAwesome";line-height:30px;
    background-color:#006F00;color:#FAFAFA;
    border-style:solid;border-width:0 1px 0 0;border-color:#FAFAFA;border-radius:0.5rem 0 0 0.5rem;
}
.panelID > .panelContent > .panelToggle > button.addButton::before {
    content:"\F067";
}
.panelID > .panelContent > .panelToggle > button.searchButton::before {
    content:"\F002";
}
.panelID > .panelContent > .panelToggle > button.refreshButton::before {
    content:"\F021";
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Contenu des Panneaux | Tablature
 *  ############################################################################################################
 */
.panelID > .panelContent > .panelToggle > table {
    width:100%;margin:0;padding:0;
    table-layout:fixed;border-collapse:separate;border-spacing:0.25rem;
}
.panelID > .panelContent > .panelToggle > table > caption {
    width:calc( 100% - 0.5rem );height:24px;margin:0 0.25rem 0 0.25rem;padding:0;
    background-color:#006F00;color:#FAFAFA;
    font-weight:800;line-height:24px;
    border:none;border-radius:0.5rem;
}
.panelID > .panelContent > .panelToggle > table > tr > th {
    margin:0;padding:0;height:24px;
    font-family:"FontAwesome";font-weight:800;line-height:24px;text-align:center;
    background-color:#4A4A4A;color:#FAFAFA;border-radius:0.5rem;
    border-style:solid;border-width:0;border-color:#DADADA;
}
.panelID > .panelContent > .panelToggle > table > tr > td {
    padding:0;height:24px;
    vertical-align:center;align-content:center;justify-content:center;
    border-radius:0.5rem;overflow:hidden;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > tr > td > .linkButtonConteneur {
    position:relative;top:2px;margin:0;padding:0;width:100%;height:24px;
    display:inline-flex;flex:1 1 auto;background-color:transparent;
}
.panelID > .panelContent > .panelToggle > table > tr > td > .linkButtonConteneur > button.linkButton {
    margin:0;padding:0;width:24px;height:24px;
    display:inline-flex;flex:0 0 auto;
    background-color:#212121;color:#FAFAFA;
    border:none;border-radius:0.5rem 0 0 0.5rem;outline:none;
    cursor:pointer;
}
.panelID > .panelContent > .panelToggle > table > tr > td > .linkButtonConteneur > button.linkButton::before {
    position:absolute;top:0;left:0;width:24px;height:24px;
    font-family:"FontAwesome";line-height:24px;
    content:"\F129";
    background-color:transparent;color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table > tr > td > .linkButtonConteneur > input {
    background-color:#DADADA;border-radius:0 0.5rem 0.5rem 0;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > tr > td input {
    margin:0;padding:0 0 0 0.25rem;width:calc( 100% - 0.25rem );height:24px;
    display:inline-flex;flex:1 1 auto;
    border:none;border-radius:0.5rem;outline:none;
    background-color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table > tr > td input.disabled {
    background-color:#DADADA;
    
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > tr > td > button {
    margin:0;padding:0;width:32px;height:24px;
    display:inline-flex;flex:1 1 auto;justify-content:center;
    font-size:0;font-weight:bold;line-height:24px;
    background-color:#212121;color:#FAFAFA;
    border:none;border-radius:0.5rem;outline:none;
    cursor:pointer;
}
.panelID > .panelContent > .panelToggle > table > tr > td > button:hover,
.panelID > .panelContent > .panelToggle > table > tr > td > button:focus,
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer.active:hover,
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer.active:focus {
    background-color:#DADADA;color:#212121;
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer {
    background-color:#7A7A7A;color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer.active {
    background-color:#212121;color:#FAFAFA;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > tr > td > button::before {
    position:relative;top:0;left:0;width:32px;height:24px;
    font-family:"FontAwesome";font-size:14px;font-weight:400;
    border:none;border-radius:0.5rem;outline:none;
    color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer::before {
    content:"\F040";
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.desactiver::before {
    content:"\F1F8";
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.visualiser::before {
    content:"\F129";
}

.panelID > .panelContent > .panelToggle > table > tr > td > button.editerDate::before {
    content:"\F017";
}

.panelID > .panelContent > .panelToggle > table > tr > td > button.cree::before {
    content:"\F069";
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.transferer::before {
    content:"\F1d8";
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.consommer::before {
    content:"\F0f5";
}

.panelID > .panelContent > .panelToggle > table td:has(button:last-child):hover > button::before {
    background-color:#DADADA;color:#212121;
}
.panelID > .panelContent > .panelToggle > table td:has(button:last-child):hover > button.editer::before {
    background-color:#7A7A7A;color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table td:has(button:last-child):hover > button.editer.active::before {
    background-color:#DADADA;color:#212121;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Contenu des Panneaux | Tablature | Dimensions des colones
 *  ############################################################################################################
 */
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="editer"] {
    width:32px;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="desactiver"] {
    width:32px;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="visualiser"] {
    width:32px;
}

.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="editerDate"] {
    width:32px;
}

.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="cree"] {
    width:32px;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="transferer"] {
    width:32px;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="consommer"] {
    width:32px;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Commentaires"] {
    width:auto;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Description"] {
    width:24rem;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="No"] {
    width:12rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="NoManufacturier"] {
    width:12rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Magasin"] {
    width:12rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Nom"] {
    width:16rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Prix"] {
    width:6rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="LeadTime"] {
    width:6rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Min"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Max"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Qty"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="QtyHand"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="QtyOrder"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="QtyProject"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Date"] {
    width:10rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Operation"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Rappel"] {
    width:10rem;
}
/*  --------------------------------------------------------------------------------------------------------  */