:root 
{
    --white         :#ffffff;
    --rosaLight     :#fccdba;
    --rosaLighter   :#fae8e1 ;
    --lightGrey     :#b3adad;
    --darkGrey      :#333333;
    --darkBlack     :#000000;
}



body
{
    background-image:url("../medias/background-bnapp.jpg") ;
    background-position: center center;
    background-color:var(--darkBlack) ;

}


h1
{
    font-size:20px;
    font-weight:bold;
    text-transform:uppercase;
    
    padding:20px;

    border-top:3px solid var(--lightGrey);
    border-bottom:3px solid  var(--lightGrey);

    text-align:center;

}


label
{
    color:var(--darkBlack);
    font-size:17px;
}

a
{
    text-decoration:none;
}

table
{
    margin-top:50px;
}


table tr td
{
    background-color:var(--white) !important;

    font-size:15px;
}


.table-bnapp thead th
{
    background-color:var(--darkGrey) ;
    color:var(--white);
    text-transform:uppercase;
    font-size:13px;
    font-weight:normal;
    height:50px;
}




/* début menu principal */

#main-workspace-menu
{
    height:250px;
    background-color:var(--white);
    padding-top:10px;
    padding-bottom:10px;
}

#main-workspace-menu .workspace-user-picture
{
    width:80px;
    height:80px;
    border-radius:40px;
    background-color:var(--white);
    padding:5px;
    border:1px solid var(--darkBlack);

}

#main-workspace-menu .workspace-user-name
{
    color:var(--darkBlack);
    text-transform:uppercase;
}






#nav-top-header
{
    margin-top:10px;
    margin-bottom:10px;
}


.btn-menu-top-header
{
    
    font-size:17px;
    text-transform:uppercase;
    font-weight:normal;
    color:#000000;
    background-color:var(--rosaLight);
    border:2px solid var(--rosaLight);
    border-radius:0px;
    padding: 10px 15px;
    margin:5px;
    text-decoration:none;
   
}

.btn-menu-top-header:hover
{
    color:var(--white);
    background-color:var(--darkBlack);
    border:2px solid var(--white);
}



/*fin menu principal */





#main-container
{
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
    border:1px solid #ffffff;
    border-radius:10px;

    margin-top:10px;
    margin-bottom:10px;
    padding:50px;


    min-height:100vh;
}




.button-for-landing-page
{
    border:3px solid #b3adad;
    border-radius:5px;

    padding-top:10px;
    padding-bottom:10px;

    background-color:#ffffff;

    border-width: 3px;
    border-image:linear-gradient( rgb(255, 215, 0), rgb(219, 168, 99),  rgb(229, 200, 67)) 1 ;

    font-size:.9em;
    font-weight:normal;

    text-transform:uppercase;
    text-decoration:none;

    margin:10px 0px !important;

}

a .button-for-landing-page, a:hover .button-for-landing-page, a:link .button-for-landing-page
{
    color:#000000;
    text-decoration:none;
}



/*** réponse ****/

#response .space-response
{
    background-image: linear-gradient(to bottom, rgba(244, 230, 229, 0.95), rgba(242, 223, 217,1));
    color:#000000;
    font-weight:bold;
    margin:12px 0px;
    padding:12px 12px;

    font-size:16px;
    text-align:center;

}




/* zone active pour les actions du client */

.area-client-active-button
{
    background-color:var(--rosaLighter);
    padding:25px 12px ;
    border-radius:15px;
}

.area-client-active-button h2
{
    font-size:18px;
    text-align:center;
    color:#000000;
    font-weight:bold;
    text-transform:uppercase;
    margin-bottom:20px;

}


.area-client-active-button .button-for-landing-page
{
    border:3px solid #b3adad;
    border-radius:5px;
    height:110px;

    color:#000000;
    background-color:#fccdba !important;
    border:1px solid #000000;

    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;

    text-decoration:none;

    margin:10px 0px !important;

}


.area-client-active-button .button-for-landing-page:hover
{
    color:#ffffff;
    background-color:#000000 !important;
    border:1px solid #000000;
}






/* formulaire */

.form label
{
    text-transform:uppercase !important;
    color:var(--darkGrey) !important;
    font-size:15px;
    margin-top:20px;
}

input.form-control, select.form-control
{
    height:50px !important;
}

textarea.form-control
{
    height:250px !important;
}


.btn-style
{

    font-size:17px;
    text-transform:uppercase;
    color:#000000;
    background-color:#fccdba;
    border:1px solid #fccdba;
    border-radius:0px;
    padding: 10px 25px;

    text-decoration:none;
}

.btn-style:hover
{

    
    color:#ffffff;
    background-color:#000000;
    border:1px solid #000000;
    
    
}




input[type="checkbox"]
{
    width:20px;
    height:20px;
}



/* TOP HEADER*/



#logo 
{
    position:relative;
    top:-20px;
}


/* MODAL */

.space-product 
{

    margin-bottom:30px;
    padding:20px 5px;
}

.space-product h5
{
    font-size:17px;
    font-weight:bold;
    text-transform:uppercase;
    color:#000000;
    
}


.space-product .price
{
    font-size:23px;
    color:#b3adad;
    margin-bottom:10px;
    
}


/* DEVIS */


.information-total
{
    padding:10px;
    border:1px solid #787878 ;
    font-size:22px;
}

.information-element
{
    background-color:#ececec;
}

.information-total-price
{
    padding:10px;

    color:#000000;
    font-weight:bold;
    font-size:25px;
    text-transform:uppercase;

    border:1px solid #787878 ;
}


/* Fiche cliente */

.space-information
{
    border:1px solid #787878;
    margin-bottom:10px;
    padding:15px;
}

.space-information .information-user
{
    font-size:11px;
    margin-bottom:10px;
    font-weight:bold;

}

.space-information .information
{
    font-size:13px;
}


/* Agenda */

.action-appointment
{
    padding:10px 15px ;
    border:1px solid var(--darkGrey) ;
    border-radius:5px;
}

.action-appointment .time-layout
{
    font-size:22px;
    font-weight:bold;
}

.action-appointment .informations-company
{
    margin-top:15px;
    font-size:17px;
    text-transform:uppercase;
}

.action-appointment .informations-client
{
    margin-top:15px;
    font-size:17px;
    font-weight:bold;
    text-decoration:underline;
}


.action-appointment .informations-saler
{
    margin-top:15px;
    font-size:15px;
    background-color:var(--rosaLight);
    text-transform:uppercase;
}


.btn-area
{
    margin-top:15px;
    padding:10px 15px;
}

.action-appointment .btn-appointment
{
    
    font-size:13px;
    padding:10px 15px;

    background-color:var(--rosaLight);
    text-transform:uppercase;
    color:var(--darkBlack) ;
}





/* résultats */
.status-invoice-payment-bnapp-crm-1
{
    background-color:#fccdba ;
    text-align:center;
    border:1px solid var(--darkBlack) ;
    color:var(--darkBlack);
    border-radius:10px;
}

.status-invoice-payment-bnapp-crm-2
{
    background-color:#ffae88 ;
    text-align:center;
    border:1px solid var(--darkBlack) ;
    color:var(--darkBlack);
    border-radius:10px;
}

.status-invoice-payment-bnapp-crm-0
{
    background-color:#ededed ;
    text-align:center;
    border:1px solid var(--darkBlack) ;
    color:var(--darkBlack);
    border-radius:10px;
}

/* icones */
i.fa-bnapp-crm
{
    margin:0px 10px;
    color:#fccdba;
}

/* boutons */

.btn-bnapp-crm
{
    background-color:#ededed ;
    color:#000000;
}

.btn-bnapp-crm:hover
{
    background-color:#fccdba ;
    color:#000000;
}


.table-bnapp-crm th
{
    font-size:13px;
    background-color:#ededed !important;
    color:#000000;
    font-weight:bold;
    text-transform:uppercase;
}

.table-bnapp-crm td.td-title
{
    font-size:13px;
    background-color:#fccdba !important;
    color:#000000;
    font-weight:bold;
}


.table-bnapp-crm td
{
    font-size:12px;
    color:#000000;

}