/*****************************************************************************************************
 *
 *****************************************************************************************************/
/*       font-family: "Font Awesome 5 Free";*/


/***********************************************************
*                         1. Global
*************************************************************/
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Actor', sans-serif;
}


[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: unset !important;
}

/*******TITLING*********/
h1,h2,h3,h4,h1,h6{
    font-family: 'Prosto One', cursive;
    text-align: center;
    color: #555;
}

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

section{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.pagecontent .container{
   margin-bottom: 15vh;
}


/***********************************************************
*                         2.Header
*************************************************************/
header{
    display: flex;
    position: relative;
    height: 10vh;
    width: 100%;
    background-color: #fff;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    box-shadow: 5px 5px 60px 15px rgba(0,0,0,0.3);
    margin-bottom: 40px;
}

header#masthead.fixed{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1500 !important;
}

header .resume-topbar{
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
}



.salutations{

}

.deconnexion{
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 100%;
   background-color: #333;
   color: white;
}

.deconnexion a{
   color: white;
}

/********************/
header.siteheader.login .branding,
header.siteheader.login .branding a{
   display: block;
   position: relative;
   height: 100%;
   margin: 0;
   padding: 0;
}

header.siteheader.login .branding a img{
   display: block;
   position: relative;
   height: 100%;
   width: auto;
   margin: 0;
   padding: 0;
}

/***********************************************************
*                         3. Navigation
*************************************************************/


/***********************************************************
*                         4. Slider/Featured
*************************************************************/

/***********************************************************
*                         5.0. Sidebar
*************************************************************/
.sidebar{
   display: block;
   position: fixed;
   height: 100%;
   z-index: 1;
   background-color: #333;
   margin: 0;
   padding: 0;
}

.sidebar .branding{
   display: block;
   position: relative;
   height: 10vh;
   background-color: #3399cc;
   border-bottom: 1px solid rgba(0,0,0,0.05);
}

.sidebar .branding img{
   display: block;
   position: relative;
   height: 100%;
   width: auto;
}

nav.sitenav{
    display: block;
    position: relative;
    width: 100%;
    height: 80vh;
    margin: 0;
    padding: 0;
}

a.nav-link{
    display: flex;
    position: relative;
    height: 10vh;
    padding-left: 15%;
    align-items: center;
    justify-content: flex-start;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

a.nav-link:hover,
a.nav-link:active{
   background-color: #777 !important;
}



/***********************************************************
*                         5. Content
*************************************************************/
.pagecontent{
   padding: 0;
   height: 100%;
   background-color: #f5f5f5;
}
/***********************************************************
*                         5.1. Pages Layout
*************************************************************/
h1.sitetitle{
   font-size: 2em;
}

h2.page-sub-title{
   font-size: 1.4em;
   margin-top: 25px;
}

.rdv-blocktitle{
    display: flex;
    position: relative;
    height: 10vh;
    align-items: center;
    justify-content: center;
    background-color: #3399cc;
    margin-top: 0;
    margin-bottom: 25px;
}



h3.h3-title{
    display: flex;
    position: relative;
    height: 10vh;
    align-items: center;
    justify-content: center;
    background-color: #3399cc;
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 0;
    color: white;
}

/*===================PAGE RDV============*/

.nombre-rdv{
    display: flex;
    position: absolute;
    width: 20%;
    height: 100%;
    align-items: center;
    justify-content: center;
    right: 0;
    top: 0;
    background-color: rgba(0,0,0,0.25);
}

.nombre-rdv p{
    color: white;
    margin: 0;
    text-align: center;
}

.todostate.done{
    font-size: 1.2em;
    font-weight: bold;
    color: #555;
    border-bottom: 1px dashed #555;
    border-top: 1px dashed #555;
}

.rdvfooter{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10vh;
}

.rdvfooter a.edit{
    background-color: orange;
    color: white !important;
    margin: 5px;
    /*margin-left: 15px;*/
}

.rdvfooter a.delete{
    background-color: red;
    color: white !important;
    margin: 5px;
    /*margin-left: 15px;*/
}

.rdvfooter a.delete:after{
    font-family: "Font Awesome 5 Free";
    content: "\f2ed";
    position: absolute;
    right: 15px;
    color: white;
}

.rdvfooter a.edit:after{
    font-family: "Font Awesome 5 Free";
    content: "\f303";
    position: absolute;
    right: 15px;
    color: white;
}



/*================LOGIN PAGE==============*/
div#LoginForm{
    display: flex;
    background-image: url(https://hdwallsource.com/img/2014/9/blur-26347-27038-hd-wallpapers.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 10px;
    height: 100vh;
    align-items: center;
}

.form-heading { color:#fff; font-size:23px;}
.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0;}
.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px;}
.login-form .form-control {
  background: #f7f7f7 none repeat scroll 0 0;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
}
.main-div {
  background: #ffffff none repeat scroll 0 0;
  border-radius: 2px;
  margin: 10px auto 30px;
  max-width: 38%;
  padding: 50px 70px 70px 71px;
}

.login-form .form-group {
  margin-bottom:10px;
}
.login-form{ text-align:center;}
.forgot a {
  color: #777777;
  font-size: 14px;
  text-decoration: underline;
}
.login-form  .btn.btn-primary {
  background: #f0ad4e none repeat scroll 0 0;
  border-color: #f0ad4e;
  color: #ffffff;
  font-size: 14px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0;
}
.forgot {
  text-align: left; margin-bottom:30px;
}
.botto-text {
  color: #ffffff;
  font-size: 14px;
  margin: auto;
}
.login-form .btn.btn-primary.reset {
  background: #ff9900 none repeat scroll 0 0;
}
.back { text-align: left; margin-top:10px;}
.back a {color: #444444; font-size: 13px;text-decoration: none;}



/***********************************************************
*                         5.2. Singles Posts Layout
*************************************************************/
.rdvsingle{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.single-rdv-blocktitle{
    display: block;
    position: relative;
    width: 100%;
}

#map{
    display: block;
    position: relative;
    height: 500px;
    width: 100%;
    margin-bottom: 15vh;
}
/***********************************************************
*                         6. Archives
*************************************************************/
/*====================RDV ARCHIVES==============*/

.rdvswrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
/*********** TODO CARDS********/
.card.rdv{
    display: block;
    position: relative;
    width: 100%;
    height: auto !important;
    font-size: 1em !important;
    margin: auto;
    margin-bottom: 3vh;
}

.card-header{
    display: flex;
    position: relative;
    background-color: #3399cc;
    color: white !important;
    border-radius: 0 !important;
}

.card-header:first-child {
    border-radius: 0;
}

.card .btn.btn-primary{
    background-color: #3399cc;
    display: block;
    width: 80%;
    margin: auto;
    border-radius: 0;
}

.rdvcard-icon{
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    right: 15px;
    top: 15px;
}

/*========================PAGE A FAIRE===============*/

.afairepage-header{
    display: flex;
    position: relative;
    height: 10vh;
    background-color: #3399cc;
    color: white;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0;
}

 .pagetitle h2.pageth2{
    color: white;
    font-size: 1.5em;
    cursor: pointer;
}


.todocounter{
    display: flex;
    position: relative;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
    background-color: red;
}

.todocounter p{
    font-size: 1em;
    margin-bottom: 0;
    text-align: center;
}

.afaire-inner-wrapper{
   display: flex;
   position: relative;
   padding: 0 15px;
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
}

.todoitem-shortv{
   display: flex;
   position: relative;
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
   margin-bottom: 30px;
}

.todoitem-shortv-bodyinner{
   height: 20vh;
   box-shadow: 10px 10px 80px 5px rgba(0,0,0,0.15);
}

.todotitle{
   display: flex;
   position: relative;
   width: 100%;
   padding: 0 15px;
   height: 7vh;
   align-items: center;
   font-size: 0.8em;
   text-transform: uppercase;
   color: #555;
   background-color: #3399cc;
   color: white;
}

.todoshort-title-date{
   display: flex;
   position: relative;
   height: 7vh;
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
}

.tododate-short{
   display: block;
   position: absolute;
   z-index: 2;
   top: 0;
   right: 0;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #555;
}

.priorite{
   display: flex;
   height: 13vh;
   align-items: center;
   justify-content: center;
    font-weight: bold;
   color: #fff;
}

.priorite.normal{
    background-color: orange;
}

.priorite.urgent{
    background-color: red;
}

a.addbutton span{
    font-size: 3em;
}

a.addbutton.haut,
a.addbutton.bas{
    display: flex;
    position: relative;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 70px;
    background-color: green;
    color: white;
    text-align: center;
    margin: 15px auto;

}

.todoitem-longv{
   display:  none;
   transition:all ease-in;
   transition-duration: 800ms;
    
}


.todoitem-longv.show{
   display: block;
   position: relative;
   height: 40vh;
   padding: 0;
    box-shadow: 10px 10px 80px 5px rgba(0,0,0,0.15);
    margin-bottom:  25px;
    transition:all ease-in;
   transition-duration: 800ms;
}

.todoitem-longv.show .todobody{
   display: block;
   position: relative;
   height: 100%;
   margin-bottom:  25px;
   transition:all ease-in;
   transition-duration: 800ms;
}

.todoitem-longv-bodyinner{
   display: block;
   position: relative;
   
   margin:0;
   padding: 0;
}


.todoitem-longv.show span.closelongone{
   display: flex;
   position: absolute;
   align-items: center;
   justify-content: center;
   width: 7vh;
   height: 7vh;
   top: 0;
   right: 0;
   background-color: #333;
   color: white;
   z-index: 2;
   cursor: pointer;
   
}

.afairepage-header.termine{
   margin-bottom: 25px;
}


.todocontentwrapper{
   display: block;
   position: relative;
   padding:15px;
}



.todoitem-longv.show .todostate.afaire{
   display: block;
   position: relative;
}



.todoitem.short:hover{
   
}

.todobody.urgentcolor > .todocontent{
    background-color: yellow;
}







.todostate.afaire{
    font-size: 1.2em;
    font-weight: bold;
    color: #555;
    border-bottom: 1px dashed #555;
    border-top: 1px dashed #555;
}

.todostate.done{
    font-size: 1.2em;
    font-weight: bold;
    color: #555;
    border-bottom: 1px dashed #555;
    border-top: 1px dashed #555;
}

.todofooter{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10vh;
}

.todofooter a.edit{
   display: block;
   position: relative;
   width: 150px;
    background-color: orange;
    color: white !important;
    margin: 5px;
}

.todofooter a.delete{
    background-color: red;
    color: white !important;
    width: 150px;
    margin: 5px;
}

.todofooter a.delete:after{
    font-family: "Font Awesome 5 Free";
    content: "\f2ed";
    position: absolute;
    right: 30px;
    color: white;
}

.todofooter a.edit:after{
    font-family: "Font Awesome 5 Free";
    content: "\f303";
    position: absolute;
    right: 30px;
    color: white;
}



/************ADD PAGE******************/
.content.add{
    display: block;
    min-height: 80vh;
}

.content.add .container .success,
.content.add .container .failedinsert{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    flex-wrap: wrap;
}

.content.add .container p{
    display: block;
    position: relative;
    width: 100%;  
}

.content.add .container a{
    display: flex;
    width: 200px;
    height: 50px;
    padding: 15px;
    align-items: center;
    justify-content: center;
    background-color: #555;
    color: white;
}

/***********************************************************
*                         7. Singe Post/Page Pagination
*************************************************************/
/***********************************************************
*                         8. Media
*************************************************************/
/***********************************************************
*                         9. Widgets
*************************************************************/
/***********************************************************
*                         10. Buttons
*************************************************************/
a.btn.btn-default.haut{
    position: fixed;
    top: 15vh;
    right: 0;
    border: none !important;
    border-color: transparent !important;
    background-color: #3399cc !important;
    background-image: none !important;
    border-radius: 0;
    color: white !important;
    outline: none !important;
    z-index: 1500 !important;
}

a.btn.btn-default.bas{
    display: block;
    position: relative;
    width: 200px;
    border: none !important;
    border-color: transparent !important;
    background-color: #3399cc !important;
    background-image: none !important;
    border-radius: 0;
    color: white !important;
    outline: none !important;
    margin: 20px auto;
}
/***********************************************************
*                         11. Infinite Scroll
*************************************************************/
/***********************************************************
*                         12. Custom Styles
*************************************************************/
.form.rdvform{
   display: block;
   position: relative;
   width: 100%;
   max-width: 600px;
   margin: auto;
}
/***********************************************************
*                         13. Social icons
*************************************************************/
/***********************************************************
*                         14. Call For Action
*************************************************************/
/***********************************************************
*                         15. Comments
*************************************************************/
/***********************************************************
*                         16. Attachment styling
*************************************************************/
/***********************************************************
*                         17. Prefooter
*************************************************************/
/***********************************************************
*                         18. Footer
*************************************************************/

footer{
    display: block;
    position: relative;
    height: 10vh;
    width: 100%;
    background-color: #777;
}

footer .container{
    display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
}


footer p{
    text-align: center;
    color: white;
    margin-bottom: 0;
}

footer a{
   color: white;
   text-decoration: none !important;
}
/*****************************************************************************************************
 *
 *****************************************************************************************************/
@media all and (min-width:768px){
    


/***********************************************************
*                         1. Global
*************************************************************/

/***********************************************************
*                         2.Header
*************************************************************/


/***********************************************************
*                         3. Navigation
*************************************************************/

/***********************************************************
*                         4. Slider/Featured
*************************************************************/

/***********************************************************
*                         5. Content
*************************************************************/

/***********************************************************
*                         5.1. Pages Layout
*************************************************************/



/***********************************************************
*                         5.2. Singles Posts Layout
*************************************************************/

/***********************************************************
*                         6. Archives
*************************************************************/
.project-wrapper{
    display: block;
    position: relative;
    width: 100%;
    height: auto !important;
    font-size: 1em !important;
    margin: auto;
    margin-bottom: 3vh;
}

.projectcard{
    display: block;
    position: relative;
    width: 80%;
    height: auto !important;
    font-size: 1em !important;
    box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.05);
    margin: auto;
}



/***********************************************************
*                         7. Singe Post/Page Pagination
*************************************************************/
/***********************************************************
*                         8. Media
*************************************************************/
/***********************************************************
*                         9. Widgets
*************************************************************/
/***********************************************************
*                         10. Buttons
*************************************************************/
/***********************************************************
*                         11. Infinite Scroll
*************************************************************/
/***********************************************************
*                         12. Custom Styles
*************************************************************/
/***********************************************************
*                         13. Social icons
*************************************************************/
/***********************************************************
*                         14. Call For Action
*************************************************************/
/***********************************************************
*                         15. Comments
*************************************************************/
/***********************************************************
*                         16. Attachment styling
*************************************************************/
/***********************************************************
*                         17. Prefooter
*************************************************************/
/***********************************************************
*                         18. Footer
*************************************************************/

/*======================================GENERAL====================================
 *================================================================================*/
}

/*****************************************************************************************************
 *
 *****************************************************************************************************/
@media all and (min-width:992px){
    /***********************************************************
*                         1. Global
*************************************************************/

/***********************************************************
*                         2.Header
*************************************************************/


/***********************************************************
*                         3. Navigation
*************************************************************/

/***********************************************************
*                         4. Slider/Featured
*************************************************************/

/***********************************************************
*                         5. Content
*************************************************************/

/***********************************************************
*                         5.1. Pages Layout
*************************************************************/



/***********************************************************
*                         5.2. Singles Posts Layout
*************************************************************/

/***********************************************************
*                         6. Archives
*************************************************************/
.project-wrapper{
    display: block;
    position: relative;
    width: 100%;
    height: auto !important;
    font-size: 1em !important;
    margin: auto;
    margin-bottom: 3vh;
}

.projectcard{
    display: block;
    position: relative;
    width: 70%;
    height: auto !important;
    font-size: 1em !important;
    box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.05);
    margin: auto;
}


/***********************************************************
*                         7. Singe Post/Page Pagination
*************************************************************/
/***********************************************************
*                         8. Media
*************************************************************/
/***********************************************************
*                         9. Widgets
*************************************************************/
/***********************************************************
*                         10. Buttons
*************************************************************/
/***********************************************************
*                         11. Infinite Scroll
*************************************************************/
/***********************************************************
*                         12. Custom Styles
*************************************************************/
/***********************************************************
*                         13. Social icons
*************************************************************/
/***********************************************************
*                         14. Call For Action
*************************************************************/
/***********************************************************
*                         15. Comments
*************************************************************/
/***********************************************************
*                         16. Attachment styling
*************************************************************/
/***********************************************************
*                         17. Prefooter
*************************************************************/
/***********************************************************
*                         18. Footer
*************************************************************/
}

/*****************************************************************************************************
 *
 *****************************************************************************************************/
@media all and (min-width:1200px){
    /***********************************************************
*                         1. Global
*************************************************************/

/***********************************************************
*                         2.Header
*************************************************************/


/***********************************************************
*                         3. Navigation
*************************************************************/

/***********************************************************
*                         4. Slider/Featured
*************************************************************/

/***********************************************************
*                         5. Content
*************************************************************/

/***********************************************************
*                         5.1. Pages Layout
*************************************************************/



/***********************************************************
*                         5.2. Singles Posts Layout
*************************************************************/

/***********************************************************
*                         6. Archives
*************************************************************/
.projectcard{
    display: block;
    position: relative;
    width: 60%;
    height: auto !important;
    font-size: 1em !important;
    box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.05);
    margin: auto;
}


/***********************************************************
*                         7. Singe Post/Page Pagination
*************************************************************/
/***********************************************************
*                         8. Media
*************************************************************/
/***********************************************************
*                         9. Widgets
*************************************************************/
/***********************************************************
*                         10. Buttons
*************************************************************/
/***********************************************************
*                         11. Infinite Scroll
*************************************************************/
/***********************************************************
*                         12. Custom Styles
*************************************************************/
/***********************************************************
*                         13. Social icons
*************************************************************/
/***********************************************************
*                         14. Call For Action
*************************************************************/
/***********************************************************
*                         15. Comments
*************************************************************/
/***********************************************************
*                         16. Attachment styling
*************************************************************/
/***********************************************************
*                         17. Prefooter
*************************************************************/
/***********************************************************
*                         18. Footer
*************************************************************/
}



/*****************************************************************************************************
 *
 *****************************************************************************************************/
@media all and (min-width:1400px){
    /***********************************************************
*                         1. Global
*************************************************************/

/***********************************************************
*                         2.Header
*************************************************************/


/***********************************************************
*                         3. Navigation
*************************************************************/

/***********************************************************
*                         4. Slider/Featured
*************************************************************/

/***********************************************************
*                         5. Content
*************************************************************/

/***********************************************************
*                         5.1. Pages Layout
*************************************************************/



/***********************************************************
*                         5.2. Singles Posts Layout
*************************************************************/

/***********************************************************
*                         6. Archives
*************************************************************/
.projectcard{
    display: block;
    position: relative;
    width: 50%;
    height: auto !important;
    font-size: 1em !important;
    box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.05);
    margin: auto;
}


/***********************************************************
*                         7. Singe Post/Page Pagination
*************************************************************/
/***********************************************************
*                         8. Media
*************************************************************/
/***********************************************************
*                         9. Widgets
*************************************************************/
/***********************************************************
*                         10. Buttons
*************************************************************/
/***********************************************************
*                         11. Infinite Scroll
*************************************************************/
/***********************************************************
*                         12. Custom Styles
*************************************************************/
/***********************************************************
*                         13. Social icons
*************************************************************/
/***********************************************************
*                         14. Call For Action
*************************************************************/
/***********************************************************
*                         15. Comments
*************************************************************/
/***********************************************************
*                         16. Attachment styling
*************************************************************/
/***********************************************************
*                         17. Prefooter
*************************************************************/
/***********************************************************
*                         18. Footer
*************************************************************/
    
}


















/********************************************************
 *                      NAVIGATION
 ********************************************************/



/*******************************/
.container-header{
    display: flex;
    position: relative;
    height: 10vh;
    background-color: #e9ecef;
    align-items: center;
    justify-content: center;
}







/****************************/
.form_fields{
    display: block;
    position: relative;
    min-width: 300px;
    max-width: 600px;
    width: 60%;
   
}