:root 
{
    --white             : #ffffff;
    --rosaLight         : #fccdba;
    --lightGrey         : #b3adad;
    --darkGrey          : #333333;
    --darkBlack         : #000000;
    --blue              : #2060AC ;
    --darkBlue          : #092441 ;
    --orange            : #f59512 ;

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

    --colorButton       : #2060AC ;
    --colorButtonHover  : #f3920c ;

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

    --colorTitle        : #2060AC ;

    --colorLabel         : #2060AC ;


    --backgroundLightGrey : #dadada;
    --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;
}


.btn-menu-top-header
{
    
    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;
   
}

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



/*fin menu principal */




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




.button-content
{
    padding:5px 10px;
    border:1px solid var(--colorButton) ;
    background-color:var(--colorButton) ;
    color:var(--white);
    font-size:11px;
    font-weight:normal;
    text-transform:uppercase;
    text-decoration:none;

    margin:3px;
}

.button-content:hover
{
    border:1px solid var(--colorButton) ;
    background-color:var(--white) ;
    color:var(--colorButton);
}

.button-content-valid
{
    padding:5px 10px;
    border:1px solid var(--statusValid) ;
    background-color:var(--statusValid) ;
    color:var(--white);
    font-size:11px;
    font-weight:normal;
    text-transform:uppercase;
    text-decoration:none;

    margin:3px;
}

.button-content-error
{
    padding:5px 10px;
    border:1px solid var(--statusError) ;
    background-color:var(--statusError) ;
    color:var(--white);
    font-size:11px;
    font-weight:normal;
    text-transform:uppercase;
    text-decoration:none;

    margin:3px;
}



/*** 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:50px !important;
}

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




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




/* TABLES */

/* CSS SPECIAUX POUR LE SUIVI - LE TABLEAU EST TROP GRAND */
table.monitoring
{
    margin-top:30px;
}

table.monitoring thead th
{
    background-color:var(--colorButtonHover) !important ;
    color:var(--white) !important;
    text-transform:uppercase;
    font-size:12px;
    font-weight:normal;
    height:50px;
    text-align:center;
}

table.monitoring tr td
{
    background-color:var(--white);
    font-size:12px;
}


table.monitoring tr td.client
{
    background-color:var(--blue);
    color:var(--white);
    font-size:16px;
    font-weight:bold;
    text-transform:normal;
}

table.monitoring tr td.title
{
    background-color:var(--blue);
    color:var(--white);
    font-size:12px;
    text-transform:uppercase;
}

table.monitoring tr td span.title 
{
    background-color:var(--blue);
    color:var(--white);
    font-size:12px;
    text-transform:uppercase;
    padding:5px;
}


table.monitoring tr td span.data 
{
    color:var(--darkBlue);
    font-size:13px;
    text-transform:normal;
    font-weight:bold;
    padding-left:5px;
    padding-right:5px;
}



table
{
    margin-top:30px;
}

table thead tr th, 
table tr.header-column td
{
    background-color:var(--colorButtonHover) !important ;
    color:var(--white) !important;
    text-transform:uppercase;
    font-weight:bold;
    height:50px;
    text-align:center !important;
}

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

table.monitoring tr td.title, 
table.monitoring tr.header-column td.title,
table tr.header-column td.title
{
    background-color:var(--backgroundColor);
    color:var(--white);
    text-transform:uppercase;
}






/* Status */

.status
{
    border-radius:0px;
    padding:3px 5px;
    color:var(--white);
    font-size:11px;
    font-weight:normal;
    text-decoration:none;

    margin-bottom:3px;
}


.status-to-do
{
    background-color:#a8a8a8 ;
    border:1px solid #a8a8a8 ;
}

.status-valid
{
    background-color:#62ca42 ;
    border:1px solid #62ca42 ;
}

.status-in-progress
{
    background-color:#f1aa22 ;
    border:1px solid #f1aa22 ;
}

.status-cancel
{
    background-color:#f7171d ;
    border:1px solid #f7171d ;
}

.status-delete
{
    background-color:#f7171d ;
    border:1px solid #f7171d ;
}

/* Type */

.type
{
    border-radius:20px;
    padding:5px 10px;
    border:1px solid var(--colorButton) ;
    background-color:var(--white) ;
    color:var(--colorButton);
    font-size:11px;
    font-weight:normal;
    text-decoration:none;
}


/* statistiques */

div.space-statistic
{
    border:1px solid var(--colorButton) ;
    border-radius:10px;
}

.title-statistic
{
    font-weight:bold;
}


/* podium */


@font-face {
    font-family: DaggerSquare;
    src: url("fonts/podium-font.woff") format("woff"), url("fonts/podium-font.ttf") format("truetype");
  }
  
  #podium-box {
    margin: 0 auto;
    display: flex;
  }

  .podium-number 
  {
    font-family: DaggerSquare;
    font-weight: bold;
    font-size: 4em;
    color: white;
  }
  
  .podium-number-sales
  {
    background-color:var(--colorButtonHover);
    color:var(--white);
  }


  .step-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .step-container>div:first-child 
  {
    margin-top: auto;
    text-align: center;
  }
  
  .step 
  {
    text-align: center;
  }
  
  .bg-blue 
  {
    background-color:var(--backgroundColor);
  }
  
  #first-step 
  {
    height: 50%;
  }
  
  #second-step {
    height: 35%;
  }
  
  #third-step {
    height: 30%;
  }









/* vidéos */

div.space-video
{
    margin-bottom:35px;
}

.title-video
{
    font-weight:bold;
    color:var(--colorTitle);
    text-transform:uppercase;
}


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


/* AGENDA */

.action
{
    border:2px solid var(--colorButton) ;
    padding:10px 20px;
    background-color:var(--white);
}

.action .time-layout
{
    font-size:20px;
    color:var(--colorButton);
    font-weight:bold;
}