:root 
{
    --white             : #ffffff;
    --light             : #fcf8f8;
    --lighterGrey       : #e7dede;
    --lightGrey         : #b3adad;
    --darkGrey          : #333333;
    --darkBlack         : #000000;
    --blue              : #2060AC ;
    --darkBlue          : #092441 ;
    --orange            : #f59512 ;


    --bleuGrey : #c5cedc ;
    --bleuGrey-1 : #7a808a ;

    --colorButton       : #2060AC ;
    --colorButtonHover  : #f3920c ;
    
    --colorCommonButton : linear-gradient(#c4c4c4,#dfdfdf,#b4b4b4);
    --colorBorderCommonButton : #666666;

    --backgroundColor   : #2060AC ;
    --backgroundMainContentColor   : #ffffff ;
    --backgroundWorkSpace : linear-gradient(#c5cedc,#d0e0f6);
    --backgroundWorkSpaceUniColor : #c5cedc ;

    --colorTitle        : #2060AC ;

    --colorLabel         : #2060AC ;


    --backgroundLightGrey : #dadada;
    --backgroundLighterBlueGrey : #e5e9ee;
    --backgroundDarkGrey   : #333333;



    --statusValid           :#62ca42 ;
    --statusError           :#f7171d;
}



body
{
    background-color:var(--backgroundMainContentColor) ;
    font-size:14px;
    color:var(--darkBlack);
}


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

    color:var(--colorTitle);
}

h2
{
    text-transform:uppercase;
    font-size:30px;
    color:var(--colorTitle);
}

h3
{
    font-size:16px;
    font-weight:normal;
    text-transform:uppercase;
    padding:5px;
    margin:18px 30px;
    text-align:center;
    background-color:var(--backgroundColor) ;
    color:var(--white);
}


a
{
    text-decoration:none;
}




/* début menu principal */

#main-workspace-menu
{
    min-height:250px;
    background:var(--backgroundWorkSpaceUniColor);
    padding-top:10px;
    padding-bottom:10px;

    border-bottom:5px solid var(--backgroundColor) ;
}

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

}

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






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

.navbar 
{
    background-color:var(--backgroundWorkSpaceUniColor) !important;
}

.navbar .dropdown-menu
{
    background-color:var(--backgroundWorkSpaceUniColor) !important;
    border:0px solid #ffffff;
    border-radius:0px;
}


.item-menu
{
    
    font-size:16px;
    text-transform:uppercase;
    font-weight:normal;
    color:var(--white);
    background-color:var(--colorButton);
    border:1px solid var(--colorButton);
    border-radius:0px;
    padding: 10px 15px;
    margin:5px;
    text-decoration:none;
   
}

.item-menu:hover
{
    color:var(--white);
    background-color:var(--colorButtonHover);
    border:1px solid var(--colorButtonHover);
}


.dropdown-item
{
    font-size:14px;
    text-transform:uppercase;
    font-weight:normal;
    color:var(--white);
    background-color:#06182b;
    border:1px solid #06182b;
    border-radius:0px;
    padding: 10px 15px;
    margin:0 5px;
    text-decoration:none;
}


/*fin menu principal */




#main-container
{
    background-color: var(--white);
    margin-top:10px;
    margin-bottom:10px;
    padding:50px;
    min-height:100vh;
}





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

#response .space-response, .modal-result
{
    background-color:var(--lightGrey);
    color:#000000;
    font-weight:bold;
    margin:12px 0px;
    padding:12px 12px;

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



/* formulaire */

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

input.form-control, select.form-control
{
    height:40px !important;
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom:10px;
}

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




.btn-style
{
    font-size:13px;
    text-transform:uppercase;
    border-radius:0px;
    padding: 10px 25px;
    margin:5px;
    text-decoration:none;

    color:var(--bleuGrey-1);
    background-color:var(--bleuGrey);
    border:1px solid var(--bleuGrey-1) !important;

}

.btn-style:hover
{
    color:var(--white);
    background-color:var(--colorButtonHover);
    border:1px solid var(--bleuGrey-1) !important;
}



.btn-little-style
{
    font-size:11px;
    text-transform:uppercase;
    border-radius:0px;
    padding: 2px 6px;
    margin:0px 5px;
    text-decoration:none;

    color:var(--bleuGrey-1);
    background-color:var(--bleuGrey);
    border:1px solid var(--bleuGrey-1) !important;

}

.btn-little-style:hover
{
    color:var(--white);
    background-color:var(--colorButtonHover);
    border:1px solid var(--bleuGrey-1) !important;
}





/* 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;
    
}








span.title 
{
    color:#000000;
    font-size:15px;
    text-transform:normal;
    padding:5px;
}


span.data 
{
    color:var(--darkBlue);
    font-size:15px;
    font-weight:bold;

}





/*************************/
/********* tables *********/
/*************************/

table thead tr th
{
    background-color: var(--backgroundColor) !important;
    color:#ffffff !important;
}





/*************************/
/****** statistiques *****/
/*************************/


h3 div.general-title-statistic
{
    font-size:17px;
    font-weight:bold;
    text-transform:uppercase;
}

h3 div.general-title-statistic-detail
{
    font-size:13px;
    font-weight:normal;
    text-transform:capitalize;
}


div.space-statistic
{
    border:1px solid var(--colorButton) ;
    border-radius:10px;
    padding:10px 20px;
    margin-bottom:10px;

    min-height:140px;
    
}

.title-statistic
{
    font-weight:normal;
    text-transform:uppercase;
    color: #000000;
}

.value-statistic
{
    font-weight:bold;
    color: var(--colorButton);
    font-size:23px;
}




/* Modal */
.modal-body h3
{
    
}

.modal-body h4
{
    font-weight:bold;
    text-decoration:underline;
    font-size:18px;
    text-transform:uppercase;
    color:#333333;
}

.modal-body h5
{
    font-weight:normal;
    font-size:16px;
    color:#000000;
}


/*********************************/
/********** LANDING PAGE *********/ 
/*********************************/


/************* menu **************/

div.space-menu
{
    border:1px solid var(--darkGrey) ;
    background-color: var(--backgroundLightGrey) ;
    border-radius:10px;
    padding:30px 20px ;
    height:150px;
    margin-bottom:20px;

    color:var(--darkGrey);

}

div.space-menu a:link
{
    color:var(--darkGrey);
}


.title-menu
{
    font-weight:bold;
    font-size:20px;
    text-transform:uppercase;
}


div.space-menu:hover
{
    border:1px solid var(--colorButton) ;
    background-color: var(--white) ;

    color:var(--colorTitle);
}

div.space-menu:hover a:link
{
    color:var(--colorTitle);
}


/**********************************/
/************* DETAILS ************/ 
/**********************************/

div.space-informations
{
    border:1px solid var(--backgroundColor);
    
}