body{
      font-size: 19px;
      color: #2d353c;
      padding: 0;
      margin: 0;
      height: 100%;
  }
 .menuPortailP.ui-menubar{
  position: absolute!important;
 background-color: #338e83 !important; 
     border-radius: 0;
     width: 100%;
     margin-left: -4px;
    border: none;
     background-image:#eaf3f2
    padding-right: 0px; 
 border-radius:0px 0px 20px 20px; 
  box-shadow: none !important;
  height: 20px !important;
}

  .mainColorPP{
       /*background-image: -webkit-linear-gradient(left, #360033, #5cb3bb); */
      background-color:#338e83!important;
  /*    opacity: 0.9;*/ 
      height: 55px;
     margin-top: -7px;
     width: 100%;

  }
   .mainColor {
       /*background-image: -webkit-linear-gradient(left, #360033, #5cb3bb); */
      background-color:#338E83;
  /*    opacity: 0.9;*/ 
      height: 55px;
     margin-top: -7px;
     width: 100%;

  }
  /*navbar+ header*/
  .save{
    position: relative;
    left: -2% !important;
  }

  .save .ui-button.saveBtn{ 
      left: -3% !important;
    text-align: center;
    position: relative;
    text-decoration: none;
    color: #fff;
      border: 1px dashed yellow !important;
      box-shadow:6px 6px 10px 1px rgba(69,19,15,0.5),
  -1px 2px 20px rgba(255,255,255,0.6) inset !important; 
     
  }
  .save .ui-button.saveBtn:before,
  .save .ui-button.saveBtn:after{
    position: absolute;
    content: "";
    transition: all .25s;
  }

  .save .ui-button.saveBtn:before{
    border-bottom: 2px solid yellow;
    border-left: 2px solid yellow;
    width: 10%;
    height: 33%;
    left: -10px;
    bottom: -10px;
  }

  .save .ui-button.saveBtn:after{
    border-top: 2px solid yellow;
    border-right: 2px solid yellow;
    width: 10%;
    height: 33%;
    top: -10px;
    right: -10px;
  }

  .save .ui-button.saveBtn:hover:before{
    width: 50%;
    height: 80%;
  }

  .save .ui-button.saveBtn:hover:after{
    width: 50%;
    height: 80%;
  }
  .menu{

  top:0px; /*distance du bord superieur*/
  bottom: 0px; /*distance bord gauche negatif car retrait*/
  width:100%; /*largeur menu1*/
  height: 17%; /*hauteur de l'onglet*/
   } 
  .menu:hover{ /*positionnement et style menu survol souris*/
  top:0; 
  overflow:/*auto si menu trop long*/; 
  transition:0.6s; }

  .fiche.ui-menubar{
     background-color: #338e83; 
     color:white !important;
     border-radius: 0;
     width: 100%;
     margin-left: -4px;
     border: none;
     padding-right: 0px; 
    /* background-image:rgba(51, 143, 132));*/ /*style fond et bords*/
     border-radius:0px 0px 20px 20px; 
     /*box-shadow:2px 2px 8px 0px rgba(75,76,76,.5);*/
     -webkit-box-shadow: 0px 3px 10px 0px rgba(75,76,76,0.66);
-moz-box-shadow: 0px 3px 10px 0px rgba(75,76,76,0.66);
box-shadow: 0px 3px 10px 0px rgba(75,76,76,0.66);
  
  -webkit-transition: all 0.5s linear; /*réglage coulisse*/
  -moz-transition: all 0.5s linear; 
  transition: all 0.5s linear;

  }
div.ui-datepicker{
 font-size: 12px !important;
 font-weight:700 !important;
padding: 2.4px 0px !important;
width: 200px !important;
 border: none !important;
}
div.ui-datepicker-header,.ui-layout-unit-header{
   background: #70b4df !important;
  opacity: 0.8 !important;
  font-size: 1rem !important;
}
.ui-datepicker .ui-state-default{
    border: 1px solid white !important;
}
  .ui-menubar a{
      color: white;
      font-weight: 600 !important;
      text-transform: uppercase ;   
      border: 1.5px solid #3eb8d7;
      padding: 10px 10px;
    
  }

  .logo a{
      font-family: 'Open Sans', sans-serif;
      color: white;
      text-transform: capitalize;
      letter-spacing: 2px;
      font-size: 30px;
      font-weight: 600;
      text-decoration: none;
  }
  #clock {
      color:white;
  }
  .Cadre_Body{
      width: 98% !important;
      top: 150px !important;
      left: 10px !important;
     /* box-shadow: 0 0 15px #1AAB8A!important ;*/
     -webkit-box-shadow: 0px 0px 14px  rgba(51,142,131,1);
-moz-box-shadow: 0px 0px 15px  rgba(51,142,131,1);
box-shadow: 0px 0px 15px  rgba(51,142,131,1);
  }

  /**/
  /*Recherche Patient*/
  .criteriaPop{
      width: 35%;
      height: 27px !important;
      margin-left: 20%;

  }
  .criteria{
       outline:none;
      width: 33%;
      height: 33px; 
       font-size: 19px !important;
      margin-left: 26%;
      border-radius:  3px;
      border-top: 2px solid #1AAB8A !important;
      border-bottom: 2px solid #1AAB8A !important;
      border-left: 2px solid #1AAB8A !important;
      border-right: none !important;
      border-radius: 3px 0px 0px 3px !important;

  }
  .criteriaAutoc{
       height: 35px !important;
       margin-left: 26%;
  }
  .ui-autocomplete-input{
     font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif !important;
     width: 100%;
     font-size: 20px   !important;
     border-radius:  3px;
      border-top: 2px solid #1AAB8A !important;
      border-bottom: 2px solid #1AAB8A !important;
      border-left: 2px solid #1AAB8A !important;
       border-right: none !important;
      border-radius: 3px 0px 0px 3px !important;
      box-shadow: none !important;
      height: 27px;

     }
  .closePopBtn{
        font-size: 1em !important;
      height: 39px !important ;
      width: 100px!important ;
      color: #fff !important;
      background:linear-gradient(to right, #eb6f62 , #f5b7b1) !important;
      transition:500ms ease all !important;
      outline:none !important;
      border:none !important;
      border-radius: 0 3px 3px 0 !important;
      bottom: 1px !important;
      color: white!important;
  }   
  .addPopBtn{
     font-size: 1.2em !important;
      height: 39px !important ;
      width: 100px!important ;
      transition:500ms ease all !important;
      outline:none !important;
      border:none !important;
      border-radius: 0 3px 3px 0 !important;
      bottom: 1px !important;
      background:linear-gradient(to right, #3399FF ,#70b7ff) !important;
      border-top-left-radius: 15px !important;
      border-bottom-right-radius: 15px !important;


  }
  .closePopBtn:hover,.addPopBtn:hover{
      transition:500ms ease all;
    border:1px solid #e74c3c !important;
    background: white !important;
    color: #e74c3c !important;
  }
  .addPopBtn:hover{
  color:#3399FF !important;
  border: 1px solid #add6ff !important;
  }
  #searchBtn,.searchBtnPop{
      font-size: 1em;
      height: 39px ;
      width: 120px ;
      color: #fff;
      background:linear-gradient(to right, #5ba59c , #99c7c1);
      transition:500ms ease all;
      outline:none;
      border:none !important;
      border-radius: 0 3px 3px 0 !important;
      bottom: 1px !important;
    }
  #searchBtn:hover,.searchBtnPop:hover{
      background:#fff;
      color:#1AAB8A;
      border-right:2px solid #1AAB8A !important; } 
  #searchBtn:before,#searchBtn:after,.searchBtnPop:before,.searchBtnPop:after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    height:2px;
    width:0;
    background: #1AAB8A;
    transition:400ms ease all;
  }
  #searchBtn:after,.searchBtnPop:after{
    right:inherit;
    top:inherit;
    left:0;
    bottom:0;
  }
  #searchBtn:hover:before,.searchBtnPop:hover:before,.searchBtnPop:hover:after,#searchBtn:hover:after{
    width:100%;
    transition:500ms ease all;
  }

  .tableColor{
      font-size: 1.1em;
  }
  .tableColor tr{
      border:1px solid #1AAB8A !important ;
  }
  .tableColor th{
       border:1px solid #1AAB8A !important ;
       background:#eaf3f2;
       color:#0f6652 !important ;
  }
  .tableColor .ui-state-default{
    width: 100% auto !important;
  }

  /**/
  /*Fiche patient*/

  .fiche .box,.smallbox,.code{
    
      border-right: 2px solid #3399FF  ;
      border-left:  2px solid #3399FF  ;
      border-top:   1px solid rgba(51, 143, 132, 0.8) ;
      border-bottom: 1px solid rgba(51, 143, 132, 0.8) ;
      background: white;
      height: auto;
  }

  /*.smallbox{
      height: 340px !important;
  }*/
  .postop{
      margin-top: 15px !important;

  }
  .large,.code{
      width: 100% !important;
      height: auto !important;
  }
  .code{
      margin-top: 10%;
  }
  #tbv{
      background-color:#eaf3f2;
  }

  .fiche .profileBox{
     width: 150px !important;
     height: 150px !important;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border: 8px solid white;
    overflow: hidden;
    border-radius: 50%;

  }
  .fiche .profileBox img{
   margin-top: -6% !important;
    height: 100%;
    width: 100%;

  }
  .fiche .profileBox .ui-widget-header{
      background-color: transparent;
      border:none;

  }
  .fiche .profileBox .ui-button{
      position: absolute;
      height: 150px;
      width: 150px; 
      margin-left: -6px !important;
      margin-top: -3px !important;
      background: transparent;  
      border-radius: 50% !important;
      transition: 0ms ease-in-out !important;
       color: transparent !important;
       border: none !important;
        text-align: center !important;

  }
  .fiche .profileBox .ui-button span{
      position: relative;
      right: 18px !important;
      top: 30px !important;
      font-size: 1.8em;
     text-align: center;
      }
  .fiche .profileBox .ui-button:hover{
            color:#3399FF !important;
            border: none !important;

      }
    .fiche .profileBox:hover{
          transition: 100ms ease-in-out;
      background-position: 0;     
        border: 8px solid #3399FF !important;
  } 


  .box .ui-widget-header,.smallbox .ui-widget-header{
      font-family: Helvetica, Arial, sans-serif !important;
      font-size: 18pt !important;
      text-transform: uppercase;
     color:#404a58!important;
      letter-spacing: 3px;
      width: 80%;
      padding: 0.9em 0;
      text-align: center !important;
      margin-top: 0;
      margin-left: 10%;
      letter-spacing: 2px;
      border: none;
      border-radius: 8px;
      border-bottom: 3px solid #3399FF;
      outline: none;
     background: white !important;
      transition: 0.2s all ease; 
      height: 15px !important;
  }
  .dash .ui-panelgrid .ui-grid-responsive .ui-panelgrid-cell{
background:#f0f0f0!important;
  }
 .caseTitle{
 border:none !important;
 -webkit-box-shadow: 3px 3px 10px 0px rgba(51,153,255,1) !important;
-moz-box-shadow: 3px 3px 10px 0px rgba(51,153,255,1)!important;
box-shadow: 3px 3px 10px 0px rgba(51,153,255,1)!important;

 }
  .darkHeader{
   border-right: 2px solid #3399FF  ;
      border-left:  2px solid #3399FF  ;
      border-top:   1px solid rgba(51, 143, 132, 0.8) ;
      border-bottom: 1px solid rgba(51, 143, 132, 0.8) ;
      background: white;
      height: auto;
  }
  .darkHeader .ui-widget-header{
      font-family: Helvetica, Arial, sans-serif !important;
       font-size: 12pt !important;
      text-transform: uppercase;
      color:white ;
      margin-top: 0;
      letter-spacing: 2px;
      border: none;
      outline: none;
      background: white!important;
      transition: 0.2s all ease; 
      height: 15px !important;
      padding: 0.9em;
      -webkit-box-shadow: inset 3px 20px 149px 14px rgba(51,142,131,1);
-moz-box-shadow: inset 3px 20px 149px 14px rgba(51,142,131,1);
box-shadow: inset 3px 20px 149px 14px rgba(51,142,131,1);
  }
  .darkHeader .ui-widget-header .ui-button ,.ui-datatable-header .ui-button{
     margin-top: -8px !important;
    }
  .darkHeader .ui-datatable-header .ui-button{
    right: -300px !important;

    }
    .black{
      background: red !important;
    }
  .lefttxt .ui-widget-header{
    text-align: left;
  }
  .ui-state-error{
    background: linear-gradient(to left, pink 60%, white )!important;
    width: 100% !important;
    color: red !important;
    border-radius: 10px !important;
  }
  .fichePatient{
      border-right: 2px solid #3399FF  ;
      border-left:  2px solid #3399FF  ;
      border-top:   1px solid rgba(51, 143, 132, 0.8) ;
      border-bottom: 1px solid rgba(51, 143, 132, 0.8) ;
      box-shadow: 0 0 15px #808080;

  }
  .shadow{
  box-shadow: 0 0 15px #808080;
  }
   .tableColor .ui-state-error {
  border:1px solid #681818 !important;
  background:#b83400 !important;
   }
  .ui-tabs{
    border: 1px solid #99c7c1;
  }
   .tabExamen .ui-tabs .ui-tabs-panel {
    padding: 3px !important;
    }
  .ui-tabs-nav{
      background-color: #eaf3f2!important;
      height: 40px;
  }
   .ui-tabs-nav li{
      border-radius: 0px 10px 0px 10px;
  }
  .fiche .ui-button{
      /*font-size: 1em !important;*/
      border-radius: 10px 0px 10px 0px;
      background-color: #5ba59c;
      background-image: linear-gradient(45deg, #d6e8e6 50%, transparent 50%);
      background-position: 100%;
      background-size: 400%;
      transition: 300ms ease-in-out;
      border: 1px solid white !important;
      color: white !important;
        cursor:pointer !important;
        outline: none !important;

  }
  .fiche .ui-button:hover{
       background-position: 0;
    color:#37474f !important;
    border: 1px solid #5ba59c !important;
      cursor:pointer !important;
      background: white !important;
  }
  .ui-tabs-nav li:hover{
      border-radius: 0px 10px 0px 10px;
      background-position: 0;
    border: 1px solid #5ba59c !important;
  }
  .ui-tabs-selected a{
      background-color: #e74c3c !important;
      color: white !important;
      font-size: 1.2em !important;
        cursor:pointer !important;
     
    }

  .ui-tabs-nav a{
      font-size: 1em;
      border-radius: 0px 10px 0px 10px;
      border: none !important;
      background-color: #5ba59c;
    background-image: linear-gradient(45deg, #d6e8e6 50%, transparent 50%);
    background-position: 100%;
    background-size: 400%;
    transition: 300ms ease-in-out;
  }
  .ui-tabs-nav a:hover {
    background-position: 0;
    color:#37474f !important;
   
  }
  /*Mouvemment*/
  /*.ficheArticle input{
      outline: none !important;
      background: none !important;
      border: none !important;
      border-bottom: 2px solid #3eb8d7 !important;
      border-right: 2px solid #3eb8d7 !important;
      border-left:2px solid #3eb8d7 !important;
      font-size: 14px !important;
      font-style: normal !important;
      color: #212121;
      font-weight: 600;
    font-family: 'Raleway', sans-serif;
    box-shadow: none !important;
    
  }
  .ficheArticle .ui-inputnumber{
    font-size: 1.2em !important;
   
  }
  .ficheArticle .ui-spinner-input,.ficheArticle  .hasDatepicker,.ficheArticle .ui-inputtextarea {
    font-size: 1em !important;
  }
  .ficheArticle label{
    font-size: 1.2em !important;
    font-weight: 500 !important;
  }*/
  .ficheArticle {
    border-right: 1px solid #3399FF  ;
      border-left:  1px solid #3399FF  ;
      border-top:   1px solid rgba(51, 143, 132, 0.8) ;
      border-bottom: 1px solid rgba(51, 143, 132, 0.8) ;
   /*   box-shadow: 0 0 15px #808080;*/
      border-radius:10px !important;
  }
  .nonFicheArticle {
     border-right: 2px solid white !important ;
      border-left:  2px solid white !important  ;
      border-top:   1px solid white !important;
      border-bottom: 1px solid white !important ;
      box-shadow: none !important;
      border-radius:10px !important;
  }
  .ficheArticle  .ui-inputtextarea{
    height: 50px !important;
     font-size: 13pt !important;

  }


  .ficheArticle .ui-inputfield{
   outline: none !important;
      background: none !important;
      border: none !important;
      border-bottom: 2px solid #3eb8d7 !important;
      border-right: 2px solid #3eb8d7 !important;
      border-left:2px solid #3eb8d7 !important;
      font-size: 13pt !important;
      font-style: normal !important;
      color: #212121 !important;
      font-weight: 600;
    font-family: 'Raleway', sans-serif;
    box-shadow: none !important;
    border-radius: 0px !important;

  }
  .ficheArticle input{
    text-align: center !important;
     border: none !important;
      border-bottom: 2px solid #3eb8d7 !important;
      border-right: 2px solid #3eb8d7 !important;
      border-left:2px solid #3eb8d7 !important;
      font-size: 13pt !important;
       min-width: 150px !important;
      outline: none !important;
      background: none !important;
      font-style: normal !important;
      color: #212121 !important;
      font-weight: 600;
    font-family: 'Raleway', sans-serif;
    box-shadow: none !important;
    border-radius: 0px !important;

    }
  .ficheArticle label{
    color: #37474f !important;
    font-size: 13pt !important;
    letter-spacing: 0px !important;
    text-align: center !important;
    text-indent: 0px !important;
  }
  .ficheArticle .ui-spinner-button{
    border-radius: 0 !important;
    left: -10px !important;

    
  }
  .ficheArticle .ui-selectonemenu,.selectM .ui-selectonemenu{
  outline: none !important;
      background: none !important;
      border: none !important;
      border-bottom: 2px solid #3eb8d7 !important;
      border-right: 2px solid #3eb8d7 !important;
      border-left:2px solid #3eb8d7 !important;
      font-size: 12pt !important;
      font-style: normal !important;
      color: #212121;
      font-weight: 600;
    font-family: 'Raleway', sans-serif;
    box-shadow: none !important;
    border-radius: 0px !important;
  }
  .ficheArticle .ui-selectonemenu:hover,.selectM .ui-selectonemenu:hover{
   border-top: none !important;
  }

  .ficheArticle .ui-accordion-header{
    font-size: 1.1em !important;
  }
  .ui-selectonemenu .ui-selectonemenu-trigger{
    background-color: #b1e2ef !important;
  }
  .ui-selectonemenu .ui-selectonemenu-trigger:hover{
    background-color: #b1e2ef !important;
    border-left: 1px solid #3EB8D7 !important;
  }
  .ficheArticle .ui-accordion-content button{
    outline: none;
    text-decoration:    none;
    text-shadow:      rgba(255,255,255,.5) 0 1px 0;
  /* layout */
    display: inline-block !important;
    min-width: 100px !important;
    width:  auto !important;
    font-size: 85% !important;
    padding:0 auto !important;
    margin: 0 auto !important;
    height: auto !important;
    -webkit-border-radius:  8px;
    -moz-border-radius:   8px;
    border-radius:  8px;
    font-weight: bolder !important; 
  /* effects */
    border-top:     1px solid rgba(255,255,255,0.8);
    border-bottom:    1px solid rgba(0,0,0,0.1);
    background-image:   -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));
    background-image:   -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
    background-image:   gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));
    -webkit-transition: background .2s ease-in-out;
    -moz-transition:  background .2s ease-in-out;
    transition:     background .2s ease-in-out;
  /* color */
   color: #263F3C !important;
    background-color:   #f2f8ff;
    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
                #3399ff 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px,  /* color border */
                rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow:  inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
                #3399ff 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
                rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
              #3399ff 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
                rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
  }
  .ficheArticle .ui-accordion-content button:hover{ 
    background-color: #add6ff; 
    border: 1px solid #3399ff;
  }
  .ficheArticle .ui-accordion-header{
    background: #338e83 !important;
  }

  /***/
  .TransTab .ui-widget-header{
      font-family: Helvetica, Arial, sans-serif !important;
      font-size: 14pt !important;
      text-transform: uppercase;
      color:#263f3c !important;
      letter-spacing: 3px;
      width: 80%;
      padding: 0.9em 0;
      text-align: center;
      margin-top: 0;
      margin-left: 10%;
      letter-spacing: 2px;
      border: none;
      border-radius: 8px;
      border-bottom: 3px solid #3399FF !important;
      outline: none;
     background: white !important;
      transition: 0.2s all ease; 
      height: 15px !important;
  }
  .TransTab tr{ 
    font-weight: 600 !important;
    border:1px solid #1AAB8A !important ;
       background:#eaf3f2;
       color:#0f6652 !important ;
  }


  /**ordonnance**/
  .ficheOrdo{
    background-image: linear-gradient( 45deg, #d6eaff,white, #d6e8e6 ) !important;


  }
  .ficheOrdo label{
    text-align: left !important;
    }
  .ficheOrdo .ui-widget-header{
    margin-left: 0 !important; 
    margin-left: 13%!important;
  }
  .ficheOrdo  .ui-inputfield{
  color:#0f2d4c !important;
  padding: 15px !important
  }
  .ficheOrdo  label{
  color:#0f2d4c !important;
  padding: 15px !important
  }

  .ficheNote .ui-inputtextarea{
    height: 80px !important;
    width: 90% !important;
     font-size: 13pt !important;
  }
   .parcours .ui-inputtextarea{
    height: 50px !important;
    width: 90% !important;
     font-size: 13pt !important;
  }
  /***/
  /**dashBoard**/
  .dashAlertNbr{
    margin-left: 90px!important;
  font-size: 4em !important;
   color: #e74c3c !important;
   font-weight: 600 !important;
  }
  /***/
  .fiche .ui-inputfield  ~ .focus-border{
    position: absolute;
    bottom: 1.6px;
    left: 0;
    width: 0; 
    height: 2px;
    background-color: #16abf0;
    transition: 0.4s;}
  .fiche .ui-inputfield:focus ~ .focus-border{width: 100%; transition: 0.4s; }
  .fiche .smallInput{
    width: 30% !important;
  }

  .fiche .ui-inputfield, .floating-placeholder{
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 20pt;
    line-height: 1.4em ;
    height: 1.4em ;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% ;

  }
  .fiche .floating-placeholder .ui-inputfield:focus ~ label{
    color: #16abf0 !important;
  }

  .fiche .floating-placeholder input[value] + label {
    color: red;
  }

  .fiche .floating-placeholder {
    position: relative !important;
    padding: 22px 0 0 0 !important;
  }


  .fiche .floating-placeholder .ui-inputfield{
    font-size: 15pt !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 30px 0 0 0 !important;
    display: block !important;
    background: transparent !important;
    z-index: 2 !important;
    border-bottom: 1px solid #ccc !important;
    text-indent: 50px !important;

  }
  .ui-selectonemenu .ui-inputfield{
    font-size: 12pt !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
    display: block !important;
    background: transparent !important;
    z-index: 2 !important;
    text-indent: 20px !important;
    width: 100% !important;
    border-radius: 0px !important;
   
  }
  .ui-selectonemenu{
    width: auto !important;
    border: 2px solid #ccc !important;
  }
  .ui-selectonemenu:hover{
    width: auto !important;
    border-top: 2px solid #16abf0 !important;
    border-bottom: 2px solid #16abf0 !important;
     border-right: 2px solid #16abf0 !important;
    border-left: 2px solid #16abf0 !important;
    background-color: transparent;
  }
  .ui-selectonemenu .ui-selectonemenu-trigger{
    border-radius: 0px !important;
  }
  .ui-selectonemenu .ui-selectonemenu-trigger:hover{
       background-color: #16abf0;
  }
  /*.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{
    background-color: #16abf0 !important; 
  color:#ffffff;}*/
  .fiche .floating-placeholder label {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 15px !important;
    font-size: 14pt !important;
    z-index: 1 !important;
    -moz-transform-origin: 0 0em !important;
    -ms-transform-origin: 0 0em !important;
    -webkit-transform-origin: 0 0em !important;
    transform-origin: 0 0em !important;
    -moz-transition: -moz-transform 160ms, color 200ms !important;
    -o-transition: -o-transform 160ms, color 200ms !important;
    -webkit-transition: -webkit-transform 160ms, color 200ms !important;
    transition: transform 160ms, color 200ms !important;
    -moz-transform: scale(1, 1) rotateY(0) !important;
    -ms-transform: scale(1, 1) rotateY(0) !important;
    -webkit-transform: scale(1, 1) rotateY(0) !important;
    transform: scale(1, 1) rotateY(0) !important;
    color: #999 ;
  }
  .fiche label{
    display: block !important;
    top: -30px !important;
    left: 20px !important;
    font-size: 14pt !important;
    z-index: 1 !important;
    color: #999 ;
    text-indent: 20px ;
  }
  .fiche .labelDark{
      color: #263f3c !important;  
  }
  .fiche .floating-placeholder-float label {
    -moz-transform: scale(0.65, 0.65) rotateY(0) !important;
    -ms-transform: scale(0.65, 0.65) rotateY(0) !important;
    -webkit-transform: scale(0.65, 0.65) rotateY(0) !important;
    transform: scale(0.65, 0.65) rotateY(0) !important;
    color: #16abf0 !important;
  }

  .fiche .floating-placeholder-float .ui-inputfield {
    line-height: 1em !important;
  }


      /* RADIO BUTTON */
  .fiche .ui-radiobutton-box,.fond-ficheProt .ui-radiobutton-box{
  appearance:none !important;
    background: #eeeeee !important;
    box-shadow:
      inset 0 0 0 .2em white,
      0 0 0 .1em !important;
    border-radius: 50%;
    transition: .2s;
    cursor:pointer !important;
    color: #363945 !important;
  }
  .fiche .ui-chkbox-icon,#showHide,.fond-ficheProt .ui-chkbox-icon{
    appearance:none !important;
    background: #eeeeee ;
    box-shadow:
      inset 0 0 0 .2em white,
      0 0 0 .1em ;
    transition: .2s;
    cursor:pointer;
    color: #363945 ;
  }
  .fiche .ui-icon-check,#showHide,.fond-ficheProt .ui-icon-check{
     box-shadow: inset 0 0 0 .4em white, 0 0 0 .32em #16abf0;
   border-radius: 0px !important;
    transition: .2s;
    cursor:pointer !important;
  } 

  .fiche .ui-radiobutton-box:hover,.ui-chkbox-icon:hover,#showHide:hover,.fond-ficheProt .ui-radiobutton-box:hover,.ui-chkbox-icon:hover,{
    background: #363945;
    box-shadow: inset 0 0 0 .2em white, 0 0 0 .16em !important;

  }
  #Cacherdiag{
    position: relative;
  top: -20px !important;
  }
  .fiche .ui-state-active .ui-icon,.fond-ficheProt .ui-state-active .ui-icon{background: #16abf0;
    box-shadow: inset 0 0 0 .4em white, 0 0 0 .32em #16abf0;
   border-radius: 50%;
    transition: .2s;
    cursor:pointer !important;
    }
  .fiche .ui-radiobutton-box:focus,.fond-ficheProt .ui-radiobutton-box:focus{
    outline: 0;
  }

  /*EXAMEN*/
  /*

  .bigmenu{
  }
  .ficheExamen .ui-accordion .ui-accordion-header{

  }
  @media screen and (min-width: 1600px) {
  .menuDent{

  }
  .mapDent{

    }
      body {
          background-color: olive;
          color: white;
      }
    }*/
  .mapDent{
  background:white;
  border: none !important;
  height: 580px !important;

  }
  .menuDent{
    padding: 0 !important;
  background:white; 
  border: none !important;
  height: 492px !important;
  }
  .Mapp .ui-panel-content{
    padding: .5em 0em !important;
  }
  .menuDentPlan{
    background:white; 
  border: none !important;
  height: 580px !important;

  }
    
  @media only screen and (max-width: 1300px) {
  .bigmenu{
    width: 150% !important;
  }
  }

  .ui-accordion .ui-accordion-header{
    z-index: 1 !important;
  }
  .ficheExamen .ui-scrollpanel,.ui-accordion .ui-accordion-header,.menuDentPlan .ui-panel .ui-panel-titlebar{
  -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -ms-border-radius: 20px;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    outline: none !important;
   /* padding: 8px 40px 8px 15px;*/
    color: white;
    font-weight: 900;
    margin-top: 2px;
    font-family: "Open Sans", sans-serif;
    background: #88B999 ;
     box-shadow: 0px 15px 10px -15px #111;
  }
  .menuDentPlan .ui-panel .ui-panel-titlebar{
  font-size: 17px;
   -webkit-box-shadow: inset 3px 20px 149px -15px rgba(51,142,131,1);
-moz-box-shadow: inset 3px 20px 149px -15px rgba(51,142,131,1);
box-shadow: inset 3px 20px 149px -15px rgba(51,142,131,1);
   border-radius: 0px !important;
  }
  .ficheExamen .ui-scrollpanel{
   height: 445px !important;
   min-width: 400px !important;
   width: 100%;
  }


  .ficheExamen .ui-accordion .ui-accordion-header:hover{
  cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    color: #338e83;
  }
  /*.ficheExamen .ui-scrollpanel-container{
    background-color: white !important;
     /* background-image: linear-gradient(to bottom, #37474f, #add2cd )!important;*/
    /* background-image:radial-gradient(rgba(51, 143, 132),#eaf3f2);
      
  }*/
  .ficheExamen .ui-accordion-content button,.ficheExamen .menuDentPlan button{
    outline: none;
    text-decoration:    none;
    text-shadow:rgba(255,255,255,.5) 0 1px 0;
  /* layout */
    display: inline-block !important;
    min-width: 100px !important;
    width:  auto !important;
    font-size: 85% !important;
    padding:0 auto !important;
    margin: 0 auto !important;
    height: 0 auto !important;
  /*  min-height: 30px;*/
    -webkit-border-radius:  8px;
    -moz-border-radius:   8px;
    border-radius:  8px;
   /* font-weight: bolder !important; */
  /* effects */
 /*   border-top:     1px solid rgba(255,255,255,0.8);
    border-bottom:    1px solid rgba(0,0,0,0.1);
    background-image:   -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));
    background-image:   -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
    background-image:   gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));
    -webkit-transition: background .2s ease-in-out;
    -moz-transition:  background .2s ease-in-out;
    transition:     background .2s ease-in-out;*/
  /* color */
   color: #303742 !important;
    background-color:   white !important;
    border:2px solid #3399ff !important;
  
  }
  .ficheExamen .ui-accordion-content button:hover,.ficheExamen .menuDentPlan button:hover{ 
    background-color: hsl(88, 70%, 75%); 
  }
  .ficheExamen .ui-accordion-content th{
     outline: none;
    text-decoration:    none;
    font: 11px 'Droid Sans', sans-serif;
    letter-spacing: 2px;
   border-bottom: 1px solid orange;
   font-weight: bolder !important;
   text-transform: uppercase !important;
   color: #37474f !important;
       }

  .ficheExamen .ui-accordion div:nth-of-type(1){
   background:#abceb7!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(2){
    background: #abceb7 !important;
   /* background-image:radial-gradient(#88B999,white ); */
    border-radius: 20px;
    }
  .ficheExamen .ui-accordion div:nth-of-type(3){
    background: #af88b9!important;
      border-radius: 20px;
  }
  .ficheExamen .ui-accordion div:nth-of-type(4){
    background: #af88b9!important;
        border-radius: 20px;
  }
  .ficheExamen .ui-accordion div:nth-of-type(5){
    background: #d59acb!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(6){
    background:#d59acb!important;
        border-radius: 20px;
  }
  .ficheExamen .ui-accordion div:nth-of-type(7){
    background: #cd8484!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(8){
    background: #cd8484!important;
        border-radius: 20px;
  }
  .ficheExamen .ui-accordion div:nth-of-type(9){
    background: #cdb274!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(10){
    background:#cdb274!important;
        border-radius: 20px;
  }
  .ficheExamen .ui-accordion div:nth-of-type(11){
    background: #88b2b9!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(12){
    background: #88b2b9!important;
        border-radius: 20px;
  }
   .ficheExamen .ui-accordion div:nth-of-type(13){
    background: #e16975!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(14){
    background: #e16975 !important;
        border-radius: 20px;
  }
     .ficheExamen .ui-accordion div:nth-of-type(15){
    background: #718ca4!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(16){
    background: #718ca4 !important;
        border-radius: 20px;
  }
  
     .ficheExamen .ui-accordion div:nth-of-type(17){
    background:#897b95!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(18){
    background:#897b95 !important;
        border-radius: 20px;
  }
   .ficheExamen .ui-accordion div:nth-of-type(19){
    background:#f79f79!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(20){
    background:#f79f79 !important;
        border-radius: 20px;
  }
   .ficheExamen .ui-accordion div:nth-of-type(21){
    background:#e8bd4c!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(22){
    background:#e8bd4c !important;
        border-radius: 20px;
  }
   .ficheExamen .ui-accordion div:nth-of-type(23){
    background:#78c5c2!important;
  }
  .ficheExamen .ui-accordion div:nth-of-type(24){
    background:#78c5c2 !important;
        border-radius: 20px;
  }

  .planTraitPrix .titrePlanPrix{
    float: left;
    font-size: 18px;
    letter-spacing: 1px;
  }
  .planTraitPrix .planPrix{
     font-size: 17px; 
  }
  .planTraitPrix .planPrix button{
    /* background:linear-gradient(45deg,#1e554f,#add2cd) !important;*/
    left: 230px !important;
    top: -10px;
  }

  .planTraitPrix .total {
    font-size: 22px !important; 
   color: white!important;
   letter-spacing: 1px;
   font-weight: 800 !important;
  }
  .ficheDiagno .ui-panel .ui-panel-content{
    padding: 0 !important;
  }
  /*deslection*/
  .menuDentPlan .scrollplan button{
    width: 100% !important;
    }
  .menuDentPlan .scrollplan{
    height: 520px !important;
  }
  /*.ficheDiagno .scrollplan{
    overflow: hidden !important;
  }*/
  .ficheExamen #deslec{
    height: 38px !important;
    outline: none;
    text-decoration:    none;
    font: 15px/1em 'Droid Sans', sans-serif;
    font-weight:      bold;
    text-shadow:      rgba(255,255,255,.5) 0 1px 0;
    -webkit-user-select:  none;
    -moz-user-select:     none;
    user-select:      none;
    width: 20%;
    min-width: 300px;
  /* layout */
    padding: .1em;
    display:        inline-block;
    position:         relative; 
    -webkit-border-radius:  8px;
    -moz-border-radius:   8px;
    border-radius:  8px;
  /* effects */
    border-top:     1px solid rgba(255,255,255,0.8);
    border-bottom:    1px solid rgba(0,0,0,0.1);

   /* background-image:   -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));
    background-image:   -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
    background-image:   gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));*/
    -webkit-transition: background .2s ease-in-out;
    -moz-transition:  background .2s ease-in-out;
    transition:     background .2s ease-in-out;  
  /* color */
    color:#e74c3c  !important;
    background-color:white;
    border: 1px solid  hsl(39, 100%, 40%) ; 
  }
  .ficheExamen #deslec:hover {  background-color: hsl(39, 100%, 65%); }
  .ficheExamen .ui-accordion .ui-accordion-header:hover .ui-accordion .ui-accordion-header span {
    background: #669999 ;
  }
  .ficheExamen .ui-scrollpanel,.ui-accordion .ui-accordion-header:after,.ficheExamen .ui-scrollpanel,.ui-accordion .ui-accordion-header:before {
    content: " ";
   background-color: transparent !important; 
   border: none !important;
   box-shadow: none !important;

  }
  .ficheExamen .ui-panelgrid .ui-panelgrid-cell {
      border: none;
      padding: 4px 5px;
      background-color: white !important;
  }
  .ficheExamen .menu-1{
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 50px;
    cursor: pointer;
    transition: all 0.3s;
  }
  .ficheExamen .menu-1:before, .menu-1:after {
    content: "";
    position: absolute;
    transition: all 0.3s;
  }

  .ficheExamen .menu-1 {
    border: 4px solid #e3e3e3;
    border-radius: 50px;
  }
  .ficheExamen .menu-1:hover {
    border-color: limegreen;
    background-color: limegreen;
  }
  .ficheExamen .menu-1:before, .menu-1:after {
    width: 60px;
    height: 4px;
    background-color: #e3e3e3;
    left: 50%;
    margin-left: -30px;
  }
  .ficheExamen .menu-1:before {
    top: 50%;
    margin-top: -8px;
  }
  .ficheExamen .menu-1:after {
    top: 50%;
    margin-top: 4px;
  }

  .ficheExamen .menu-1-active {
    background-color: red !important;
    border-color: red !important;
  }
  .ficheExamen .menu-1-active:before, .menu-1-active:after {
    margin-top: -2px;
  }
  .ficheExamen .menu-1-active:before {
    transform: rotate(45deg);
  }
  .ficheExamen .menu-1-active:after {
    transform: rotate(-45deg);
  }


  /*
  .ficheExamen .ui-scrollpanel-container{
   

  }
  .ficheExamen .ui-accordion-content  {

  }
  */
  /**/
  .ui-outputlabel-rfi{
      font-size: 20px;
      vertical-align: -5px;
      color: #E91E63;
  }
  .ui-layout-north {
      z-index: 20 !important;
      overflow: visible !important;
      padding: 0;   
  }

  .ui-layout-north .ui-layout-unit-content {
      overflow: visible !important;
      width: 100%;

  }
  /* button profile navbar*/
   .ui-menu-dynamic .ui-menu-list .ui-widget-header {
      font-family: Helvetica, Arial, sans-serif !important;
      font-size: 12pt !important;
      text-transform: uppercase;
      color:#3399FF !important;
      letter-spacing: 3px;
      letter-spacing: 2px;
      border: none;
      border-radius: 8px;
      border-bottom: 3px solid #3399FF;
      outline: none;
      background: white !important;
      transition: 0.2s all ease;    
      text-align: center !important; 
      }
  .ui-menu-dynamic .ui-menu-list .ui-widget-header h3{
    position: relative !important;
    text-align: center !important;
  }
  .ui-menu-dynamic{
     border-radius: 20px;
     background: white !important;
    /*background-image: linear-gradient(45deg,#9edbeb, white)!important; */ 
  }
 .ui-menu-dynamic .ui-menuitem-link:hover{
     text-shadow: 0 0 6px white !important; 
     color:#3399FF !important;
  } 
.ui-menuitem-link:hover{
     text-shadow: 0 0 6px white !important; 
     background: none !important;
  } 

  .ui-menu .ui-menu-parent .ui-menu-child{
    /*  border-radius: 20px;*/
     background: #338e83!important; 
      border-radius:0px 0px 20px 20px;
      -webkit-box-shadow: 0px 3px 10px 0px rgba(75,76,76,0.66);
-moz-box-shadow: 0px 3px 10px 0px rgba(75,76,76,0.66);
box-shadow: 0px 3px 10px 0px rgba(75,76,76,0.66);
border:1px solid #dbdbdb !important;
  }
   .ui-menuitem-link.ui-submenu-link.ui-corner-all.ui-state-hover:hover{
    text-shadow: 0 0 6px white !important;
    }
  .ui-menu .ui-state-hover{
    background: transparent !important;
  }

 /* .ui-menu-dynamic .ui-menu-list{
     color: red !important;
  }*/
  .profileNav .labelnav {
    
    font-size: 13px !important;
    font-weight: 200 !important;
    color:  white !important;
    text-shadow: #3eb8d7 1px 1px 1px !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    left: -105px;
    top: 20px;

  } 
  .logoutbtn{
    font-size: 1em !important;
     color: red !important; 
     width: 150px !important;
     margin-left: 35px!important
     }
     .logoutbtn:hover{
     color: black !important; 
      text-shadow: 0 0 6px red !important;

     }
  .profileNav .ui-clock{
       text-align: center !important;
    font-size: 20px !important;
    font-weight: 200 !important;
    color:  white !important;
      letter-spacing: 1px;
    text-transform: uppercase;
   padding-top: 5px !important;
  }
   .profileNav .menuitem:hover{
    color: #3399ff !important;
   }
  .profileNav .button{
    outline: none;
    text-align: center !important;
    text-decoration: none;
    font-size: 15px !important;
    font-weight: 100;
    right: 20px;
    
    }
 .profileNav .button:before {
    border-radius: 100px;
    border: 2px solid white;
    box-shadow: 0 0 15px rgba(214,234,255, 0.15), 0 0 15px rgba(214,234,255, 0.15) inset;
    content: "";
    display: block;
    position: absolute;
    left: -20%;
    top: -9%;
    height: 30px;
    width: 40px;
    opacity: 1;
    transform: scale(1);
    transition: all 300ms;
  }
  .profileNav .button:hover:before {
    transform: scale(1.05);
  }
 .profileNav .button.circle {
    top: 6px;
    background-color:inherit;
    border: none;
    border-radius: 900px;
    color: #e4ecfa;
    cursor: pointer;
    display: block;
    width: 30px;
    height: 30px;
    line-height: 100px;
    position: absolute;
    margin: auto;
    margin-top: 10px;
    transition: 0.5s;
  }
  .profileNav .separte{
  position: relative;
  height: 50px !important;
    border-left:1px dashed white !important;
   left: 133px !important;
    top: -13px !important;

  
  }
  .profileNav .dentistH{
      background-image: url('../images/dentistHn.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    }
  .profileNav .dentistF{
       background-image: url('../images/dentistFn.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  .diagnoIcon{
    height: 37px!important;
    width: 37px !important;
   background-image: url('../images/diagnostic.png') !important;
   background-size: 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  .planTraitIcon{
      height: 37px!important;
    width: 37px !important;
   background-image: url('../images/plantraitement.png') !important;
   background-size: 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  .planTraitIcon:hover,.diagnoIcon:hover{
    background-color: transparent;
  }
  .profileNav .button.circle:hover {
    background: white;
    padding: -2px;
  }
  .LogoImgN{
      position: absolute;
    margin-top: -30px; 
    margin-left:100px;
    border: 1px solid white;
    box-shadow: 0 0 15px rgba(214,234,255, 0.15), 0 0 15px rgba(214,234,255, 0.15) inset;
  }

  /*****/
  /*****PROTHESISTE***/
  .ficheProt {}
  .Cadre_Body_Prot{
  left: 5px !important;


  }
  /*.onDrag-inverse{
    transform: rotate(-15deg) !important;
    box-shadow: -10px -10px 5px 5px rgba(0, 0, 0, .75) !important;
    position: relative !important;
    top: -15px !important;
    z-index: 5 !important;
    opacity: 1 !important;
  }*/
  .drag-state{
  -moz-box-shadow: 1px 1px 3px 2px #41403E !important;
    -webkit-box-shadow: 1px 1px 3px 2px #41403E !important;
    box-shadow:         1px 1px 3px 2px #41403E !important;
     background-image: linear-gradient(45deg,#FFEEEE,#DDEFBB) !important;
  }
  .ficheTravailProtLeft .ui-widget-header{
    width: 80% !important;
    background-color: white!important;
   align-self: center !important;
   text-align: center !important;
    padding: .5rem 1rem .5rem 1rem !important;
    margin: 0  !important;
    color: #287acc !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
      box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2) !important;
        transition: all .5s ease !important;
        border-top-left-radius: 55px;

  }

  .ficheTravailProtRight .ui-widget-header{
        width: 80% !important;
    background-color: white !important;
   align-self: center !important;
   text-align: center !important;
    padding: .5rem 1rem .5rem 1rem !important;
    margin: 0  !important;
    color: #287acc!important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
      box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2) !important;
        transition: all .5s ease !important;
        border-top-right-radius: 55px;
  }

  .ficheTravailProt .ui-panel-title{
      font-size: 1.2rem !important;
  }
  .ficheTravailProt .ui-widget-header:hover {
    box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
  }
  /*.radius-droite .ui-widget-header{
  border-top-right-radius: 160px;
  }
  .radius-gauche .ui-widget-header{
    border-top-left-radius: 160px ;
  }*/
  .fond-ficheProt{
     background: white !important;
  }
  .ficheTravailProt{
       color: #41403E !important;   
       box-shadow: -15px 0 15px -15px #2C3E50, 15px 0 15px -15px #2C3E50;
      border: solid 2px #287acc!important;
      padding: 5px 5px !important;

  }
  .radius-droite{ 
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  }
  .radius-gauche{
    border-top-left-radius: 60px;
  border-bottom-right-radius: 60px;
  }
  .photoTeinte{
    position: relative;
    margin-top: -157px !important;
  }
  .photoTeinte .ui-widget-header {
    overflow: visible !important;
  }
  .titreProtGrand{
    background: white !important;
    color: #41403E !important;
    font-size: 18px !important;
       box-shadow: -15px 0 15px -15px #2C3E50, 15px 0 15px -15px #2C3E50;
      border: dotted 2px #a09f9e!important;
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;}
  .titreProt{
    padding: 5px !important;
    align-self: center !important;
    background: white !important;
    margin: 0 1rem !important;
    color: #41403E !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
      border: dotted 2px #44aacc !important;
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
  }
  .fond-ficheProt input{
    text-transform: uppercase;
    text-align: center !important;
    align-self: center !important;
    background: white !important;
    margin: 0 1rem !important;
    color: #41403E !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
     border: solid 2px #2cbbbb !important;}
  .ficheNavette{
    border-radius: 15px/45px;
    color: #41403E !important; 
    box-shadow: 0 0 15px #2C3E50;
  }
  .ficheNavettesPlus{
    border-radius: 15px/45px;
    color: #41403E !important; 
    box-shadow: 0 0 15px #2C3E50;

  }
  .ficheNavettesPlus .ui-widget-header{
    align-self: center;
    background:white;
    margin: 0 1rem;
    /*text-align: center;*/
    color: #41403E;
    font-size: 1.1rem;
    letter-spacing: 1px;
      box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
      border:none !important;
   
  }
  /*.panelImagePro{
  margin-top: -100px;
      width: 60%;
      margin-left: 110px;
      line-height: 150%;
  }

  .panelImagePro .ui-panel-content{
    display: inline-flex !important; 

  }*/
  .ficheTravailPop:nth-of-type(1){
    width: 80%!important;
     align-self: center;
     margin-left: 5%  !important;
  }
  .ficheNavettesPlus:nth-of-type(1){
    width: 93%!important;
     align-self: center;
     margin-left: 4%  !important;
     font-size: 13px !important;
     font-weight: 600 !important;
  }
  .ficheNavettesPlus .ui-panel-titlebar-icon{
    background: #41403E !important;
  }
  .ficheNavette .ui-widget-header{
   align-self: center;
    background: white;
    overflow: hidden !important;
  /*  padding: 1rem 1rem;*/
    margin: 0 1rem;
    text-align: center;
    color: #41403E;
    font-size: 1.2rem;
    letter-spacing: 1px;
      box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    border: solid 2px #44aacc!important;
     width: 80% !important;
     margin-left: 10%  !important;
   }
  .ficheNavette .ButtonFichePro,.ficheNavettesPlus .ButtonFichePro{
    color: #287acc !important;
      align-self: center;
    background: white;  
    margin: 0 1rem;
    transition: all .3s ease;
    color: white;
    font-size: 15px !important;
    outline: none;
       -moz-box-shadow:    1px 5px 15px 2px  #2C3E50;
  -webkit-box-shadow: 1px 5px 15px 2px  #2C3E50;
  box-shadow:         1px 5px 15px 2px  #2C3E50;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
      border: solid 2px #287acc;
   }
   .selectProthesiste{ 
    margin: 0 1rem !important;
    transition: all .5s ease;
    color: #41403E !important;
    font-size: 15px !important;
    outline: none;
        -moz-box-shadow:    1px 5px 15px 2px  #2C3E50;
  -webkit-box-shadow: 1px 5px 15px 2px  #2C3E50;
  box-shadow:         1px 5px 15px 2px  #2C3E50;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
      border: solid 2px #2cbbbb !important;
      margin-left: 600px !important;
      position: relative;

   }
   .ficheNavette .ButtonFichePro:hover{
    box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3) !important;
    border: solid 2px #41403E;
    color: #41403E;
    background-color: white;
   }
   .ButtonFichePro:hover{
    box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3) !important;
    border: solid 2px #41403E;
    color: #41403E;
      background-color: white;
   }
   .ficheNavette .ui-panel-title, .ficheNavettesPlus .ui-panel-title{
    font-size: 1.1em ;
   } 
  .fond-fiche-travail-prot{
    background-image:radial-gradient(#d4e4f4,white ) !important; 
    width: 95%!important;
    margin-left: 2% !important;
    border: none  !important;
  }
  .drag-aFaire-Panel .ui-widget-header{
    align-self: center;
    background: white;
    padding: 1rem 1rem;
    margin: 0 1rem;
    color: #41403E;
    font-size: 1.2rem;
    letter-spacing: 1px;
      box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
     border: dashed 2px #41403E;
  }
  .drag-aFaire-Panel{
    align-self: center;
    background: transparent;
    padding: 1rem 1rem;
    margin: 0 1rem;
    color: #41403E;
    letter-spacing: 1px;
    outline: none;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
     border: solid 1px #a09f9e;
  }
  .drag-aFaire-Panel:hover {
    box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
  }
  .ui-widget-header .thick {
    border: solid 2px #41403E;
  }
  .drag-aFaire{
    background: #fee5d9;
     box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
    border: 1px solid #FB7D44 !important;
  }
  .drag-aFaire legend{
    box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
  background: #FB7D44 !important;
  color:white !important;
  font-size: 1.2em !important;
  }
  .btnDragFaire{
     box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
  background: #FB7D44 !important;
  color:white !important;
  }
  .btnDrag{
     box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
  background: #41403E  !important;
  color:white !important;
  }
  .btnDragFaire:hover,.btnDragenCour:hover,.btnDragenAttente:hover,.btnDragaValider:hover,.btnDrag:hover{
    border: dashed 2px #41403E;
  background: white !important;

  }
  .drag-enCour{
    background: #d4e9f2;
     box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
    border: 1px solid #2A92BF !important;
  }
  .drag-enCour legend{
    box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
  background: #2A92BF !important;
  color:white !important;
  font-size: 1.2em !important;
  }
  .btnDragenCour{
      box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
  background: #2A92BF !important;
  color:white !important;
    }
  .drag-enAttente{
    background: #fcf5da;
     box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
    border: 1px solid #F4CE46 !important;
  }
  .drag-enAttente legend{
    box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
  background: #F4CE46 !important;
  color:white !important;
  font-size: 1.2em !important;
  }
  .btnDragenAttente{
    box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
  background: #F4CE46 !important;
  color:white !important;
  }
  .drag-aValider{
    background: #ccf1df;
     box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
    border: 1px solid #00B961 !important;
  }
  .drag-aValider legend{
    box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
  background: #00B961 !important;
  color:white !important;
  font-size: 1.2em !important;
  }
  .btnDragaValider{
   box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
  background: #00B961 !important;
  color:white !important;
  }

  /****QUESTIONAIRE**/
  .questionnaire{
  /*  background-image:linear-gradient(45deg,white,#90caf9,white);*/
  background: #90caf9 !important;
    padding: 20px 25px;
    border-radius: 45px/15px;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.13);
  }

  .questionnaire .ui-widget-header{
  background: white;
  width: 50% !important;
  border-bottom-right-radius: 40px;
  border-top-left-radius: 40px;
   background: white;
   margin-left: 270px !important;
   margin-top: 3px !important;
   padding-left: 50px !important;
   border-right: 7px solid #082943;
   border-left: 7px solid #082943;
    box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
     color: #082943 !important;
     letter-spacing:4px !important;
     font-size: 1.5rem;
  }


  .questionnaire input[type="text"]{
    text-align: center !important;
     border: none !important;
      border-bottom: 2px solid #3eb8d7 !important;
      border-right: 2px solid #3eb8d7 !important;
      border-left:2px solid #3eb8d7 !important;
      font-size: 13pt !important;
       min-width: 150px !important;
      outline: none !important;
      background: none !important;
      font-style: normal !important;
      color: #212121 !important;
      font-weight: 600;
    font-family: 'Raleway', sans-serif;
    box-shadow: none !important;
    border-radius: 0px !important;

    }
    .questionnaire input[type="text"]:hover{
    box-shadow: inset 0 15px 15px -15px #082943, o 0 -15px 15px -15px #082943 !important;

    }
  .questionnaire label{
    color: #37474f !important;
    font-size: 13pt !important;
    letter-spacing: 0px !important;
    text-align: center !important;
    text-indent: 0px !important;
  }
  .questionnaire input{
    appearance:none !important;
    background: #eeeeee ;
    box-shadow:
      inset 0 0 0 .2em white,
      0 0 0 .1em ;
    transition: .2s;
    cursor:pointer;
    color: #363945 ;
  }
  .questionnaire input:checked{
     box-shadow: inset 0 0 0 .2em white, 0 0 0 .32em #16abf0;
     border-radius: 50px !important;
    transition: .2s;
    cursor:pointer !important;
  } 

  .questionnaire input:hover{
    background: #363945;
    box-shadow: inset 0 0 0 .2em white, 0 0 0 .16em !important;
  }

  .quest-menu{
    border-radius: 15px/45px;
   border-right: 7px solid #082943;
   border-left: 7px solid #082943;
    margin-top: -15px;
    color: #AAAAAA !important;
     box-shadow: 0 0 15px #2C3E50;

  }

  .questionnaire button {
    margin-top: -10%!important;
   margin-left: 35% !important;
    background: white !important;
    border: 2px solid !important;
    line-height: 1;
    margin: 0.5em;
    letter-spacing: 5px;
    width: 300px !important;
    font-size: 1.5em !important;
     box-shadow: 0.3em 0.3em 0 0 #082943, inset 0.3em 0.3em 0 0 #082943 !important;
  }

  .questionnaire button {
    color:  #3eb8d7 !important;
    transition: 0.25s !important;
  }
  .questionnaire button:hover,.questionnaire button:focus {
    border-color:  #082943 !important;
    color: #fff !important;
     box-shadow: 0 0 0 0 #082943, inset 6em 3.5em 0 0 #082943 !important;
  }

  .hr-custom {  
    border-top: solid 5px;
    max-width: 85%;
    margin: 30px auto 30px auto;
    text-align: center;
  }

  /*****/
  h1,.titre{
      font-size: 70px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 700;
      text-align: center;
  }
  h1 span{
      color: #3eb8d7;
  }
  .leftMenuLayoutStyleClass {
      padding-top: 0px;padding-bottom: 0px;
      padding-left: 10px;padding-right: 0px;
  }

  .leftMenuLayoutStyleClass .ui-menu {
       background-color: #f7f7f7; 
  }

  .leftMenuLayoutStyleClass .ui-layout-unit-content {
       background-color: #f7f7f7; 
  }

  .footerLayoutStyleClass {
      padding-top: 0px;padding-bottom: 0px;
  }

  .footerLayoutStyleClass .ui-layout-unit-content {
      background-color: rgba(9, 57, 76, 0.96);
      text-align: center;
  }

  .ui-clock {
      border: 0px;
      color: #FFF8DC;
     background-color: inherit;
  } 

  .ui-layout-unit {
      border: 0px;
      height: 200px;
  }

  .ui-panelgrid-content {
      border: 0px;    
  }

  .ui-widget, .ui-widget .ui-widget {
      font-size: 95%;

  }

  .ui-panelgrid .ui-panelgrid-cell {
      border: none;
      padding: 4px 5px;
  }

  .ui-panel {
      padding: .15em;
  }

  .noborder .ui-widget-content{
      border: none;
  }

  .form-style-8{
      font-family: 'Open Sans Condensed', arial, sans;
      width: 500px;
      padding: 30px;
      background: #FFFFFF;
      margin: 50px auto;
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
      -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
      -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);

  }
  .form-style-8 h2{
      background: rgba(9, 57, 76, 0.96);;
      text-transform: uppercase;
      font-family: 'Open Sans Condensed', sans-serif;
      color: #797979;
      font-size: 18px;
      font-weight: 100;
      padding: 20px;
      margin: -30px -30px 30px -30px;
  }
  .form-style-8 input[type="text"],
  .form-style-8 input[type="date"],
  .form-style-8 input[type="datetime"],
  .form-style-8 input[type="email"],
  .form-style-8 input[type="number"],
  .form-style-8 input[type="search"],
  .form-style-8 input[type="time"],
  .form-style-8 input[type="url"],
  .form-style-8 input[type="password"],
  .form-style-8 textarea,
  .form-style-8 select 
  {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      outline: none;
      display: block;
      width: 100%;
      padding: 7px;
      border: none;
      border-bottom: 1px solid #ddd;
      background: transparent;
      margin-bottom: 10px;
      font: 16px Arial, Helvetica, sans-serif;
      height: 45px;
  }
  .form-style-8 textarea{
      resize:none;
      overflow: hidden;
  }
  .form-style-8 input[type="button"], 
  .form-style-8 input[type="reset"],
  .form-style-8 input[type="submit"]{
      -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
      -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
      box-shadow: inset 0px 1px 0px 0px #45D6D6;
      background-color: #2CBBBB;
      border: 1px solid #27A0A0;
      display: inline-block;
      cursor: pointer;
      color: #FFFFFF;
      font-family: 'Open Sans Condensed', sans-serif;
      font-size: 14px;
      padding: 8px 18px;
      text-decoration: none;
      text-transform: uppercase;
  }
  .form-style-8 input[type="button"]:hover, .form-style-8 input[type="reset"]:hover, .form-style-8 input[type="submit"]:hover {
    
  }
  /**Login page **/
  .loginPage .form {
    margin-left: -5%;
    margin-top: 10%;
    padding: 20px 0;
    position: relative;
    z-index: 2;
    background:  rgba(71,154,144, 0.4);
    width: 40% !important;
    border-top: 3px solid #3399FF;
    border-radius: 30px !important;
  }
  .loginPage .form  label{
    color: white !important;
  }

  .loginPage .form input{
            appearance: none;
    outline: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.2);
    width: 250px;
    border-radius: 3px;
    padding: 10px 15px;
    margin: 0 auto 10px auto;
    display: block;
    text-align: center;
    font-size: 18px;
    color: white;
    -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
    font-weight: 300;
  }
  .loginPage .form input:hover {
    background-color: rgba(255, 255, 255, 0.4);
  }
  .loginPage .form input:focus {
    background-color: white;
    width: 300px;
    color: #53e3a6;
  }
  .loginPage .form button {
            appearance: none;
    outline: 0;
    background-color: white;
    border: 0;
    padding: 10px 15px;
    color: #53e3a6;
    border-radius: 3px;
    width: 250px;
    cursor: pointer;
    font-size: 18px;
    transition-duration: 0.25s;

  }
  .loginPage .form button:hover {
    background-color: #f5f7f9;
  }


  .loginPage .ui-widget-content{
     background-color: inherit !important; 
    border: none !important;
    overflow: hidden !important;
  }
  .loginPage .area{
       background: #50a3a2;
    background: linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);

      width: 100%;
      height:100vh;
      
     
  }
.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  -webkit-animation: square 20s infinite;
  animation: square 20s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}

  /***DENT**/
  .loginPage .tooth {
    position: relative;
    top: 50vh;
    margin-top: -20%;
    margin-left: -1%;
    left: 50%;
  }
  .loginPage .body {
    position: absolute;
    background-color: #fff;
  }
  .crown01 {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    top: 0;
    left: -20px;
  }
  .crown02 {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    top: 0;
    left: 20px;
  }
  .crown03 {
    border-radius: 50%;
    width: 50px;
    height: 30px;
    top: -25px;
    left: 0px;
  }
  .crown04 {
    border-radius: 50%;
    width: 50px;
    height: 30px;
    top: 5px;
    left: 0px;
  }
  .crown05 {
    top: 15px;
    left: -15px;
    width: 40px;
    height: 70px;
    border-radius: 30%  40%  70%  70%;
    transform: rotate(-12deg);
  }
  .crown06 {
    top: 15px;
    left: 25px;
    width: 40px;
    height: 70px;
    border-radius: 30%  30%  70%  70%;
    transform: rotate(12deg);
  }
  .crown07 {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 35px;
    left: 15px;
  }
  .root01 {
    top: 55px;
    left: -10px;
    width: 24px;
    height: 70px;
    border-radius: 40%  40%  100%  500%;
  }
  .root02 {
    top: 55px;
    left: 35px;
    width: 24px;
    height: 70px;
    border-radius: 40%  40%  500%  100%;
  }
  .root04 {
    width: 13px;
    height: 13px;
    top: 73px;
    left: 18px;
    border-radius: 50%;
  }
  .root03 {
    width: 15px;
    height: 15px;
    top: 64px;
    left: 17px;
    border-radius: 50%;
  }
  .root05 {
    top: 50px;
    left: -12px;
    width: 20px;
    height: 40px;
    border-radius: 100%  100%  100%  500%;
    transform: rotate(-2deg);
  }
  .root06 {
    top: 50px;
    left: 42px;
    width: 20px;
    height: 40px;
    border-radius: 40%  40%  500%  100%;
  }
  .root07 {
    top: 60px;
    left: -3px;
    width: 20px;
    height: 40px;
    border-radius: 50%  30%  30%  50%;
    transform: rotate(10deg);
  }
  .root08 {
    top: 60px;
    left: 32px;
    width: 20px;
    height: 40px;
    border-radius: 30%  50%  50%  30%;
    transform: rotate(-10deg);
  }
  .root09 {
    top: 74px;
    left: 15px;
    width: 10px;
    height: 28px;
    border-radius: 50%  30%  30%  50%;
    transform: rotate(11deg);
  }
  .root10 {
    top: 74px;
    left: 24px;
    width: 10px;
    height: 28px;
    border-radius: 30%  50%  50%  30%;
    transform: rotate(-11deg);
  }
  .face {
    position: absolute;
    width: 30px;
    height: 25px;
    top: 30px;
    left: 10px;
  }
  .f {
    position: absolute;
  }
  .eye01 {
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #000;
  }
  .eye02 {
    right: 0;
    top: 0;
    width: 6px;
    height: 7px;
    border-radius: 50%;
    background-color: #000;
  }
  .eye {
    animation: wink 4s linear infinite;
  }
  .mouth {
    top: 4px;
    left: 5px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid pink;
    border-top: 20px solid transparent;
    border-radius: 50%;
    transform: rotate(90deg);
  }
  @keyframes wink {
    0% {
      height: 7px;
    }
    4% {
      height: 2px;
      width: 7px;
    }
    8% {
      height: 7px;
      width: 6px;
    }
    100% {
      height: 7px;
    }
  }
  /****/


  /**Responsive**/
  @media only screen and (max-width: 1200px) {
  .Cadre_Body{ 
       margin-top: 20px !important;
  }
  }
  @media only screen and (max-width: 1000px) {
  .dash{ 
     font-size: 1.4rem !important;
  }
  .dash .box .ui-widget-header 
  { font-size: 25pt !important;
    
  }
  .dash .ui-tabs-selected a {
     font-size: 1.6rem !important;
  }
  .dash .ui-tabs-nav{
  height: auto !important;
  }
  .ficheExamen .ui-accordion-content button, .ficheExamen .menuDentPlan button{
    font-size: 20px !important;
  }
  .planTraitPrix .planPrix button{
    left: 30px !important;
  }
  .ficheArticle .ui-accordion-content button{
    font-size: 20px !important;
  }
  .menu .ui-widget,.menu .ui-widget .ui-widget  {
    font-size: 100% !important;
  }
  .questionnaire{
    width: 90% !important;
    height: 1200px !important;

  }
  .questionnaire .ui-dialog-content{
     height: 1300px !important;
  }
  .loginPage .form{
    margin-top: 40% !important;
    width: 80% !important;
    height:100% !important;
    font-size:  2em !important;
  }
  .loginPage .form button {

  }
  .loginPage .form input {
   font-size:  40px !important;
   width: 500px !important;
  }
  .loginPage .tooth {
    position: relative;
    margin-top: -50% !important;
    margin-left: -1%;
    left: 50%;
  }
  .BgSP{
       position: absolute !important;
       font-size: 2.5em !important;
       bottom: 10% !important;
       left: 25% !important;
  }
  .firstPg{
   font-size: 2.5em !important;
  }
 .midBox{
    position: relative !important;
margin-top: -100px !important; 
left: 0px !important;
height: 500px !important;
 }
  div.ui-datepicker{
 font-size: 18px !important;
 font-weight:700 !important;
padding: 4px 0px !important;
width: 280px !important;
 border: none !important;
}
  .PortailPatient .pulse-button {
    height: 180px !important;
    width: 180px !important;
    font-size: 2em !important;
      top: 20% !important;
      left: 47% !important;
  margin-left: -50px !important;
  margin-top: -50px !important;
  }

.PortailPatient .loader h2 {
  position: relative;
  font-size: 40px;
  margin-top: 200px !important;

  text-align: center;
  margin: 0;
  color: rgba(255, 255, 255, .7)
}
 .fond-fiche-travail-prot{
 
    width: 110%!important;
    position: relative !important;
    margin-left: -50px !important;

  }
  .ficheOrdo  .ui-inputfield,.ficheOrdo .ui-selectonemenu{
    width: 150px!important;
  
  }

}
  .midBox{
    position: relative !important;
    top: 117px !important; 
 }

  /***PORTAIL PATEINT*****/
  
.PortailPatient .ui-button-text-only .ui-button-text{
  padding: 0em 0em !important;
}
/*.ui-layout-unit.ui-widget.ui-widget-content.ui-corner-all.ui-layout-center.ui-layout-pane.ui-layout-pane-center{
 background-image: -webkit-linear-gradient(top, #338F84, #99c7c1);
}*/
  /****/
/*.BgSP .ui-widget-content{
background-image: -webkit-linear-gradient(bottom, #d6eaff, white) !important;
}*/

.PortailPatient .hero{
  position: absolute !important;
 /* background: #262626 !important;*/
background-image: -webkit-linear-gradient(top, #338e83, #84bbb4);
/*background-image: -webkit-linear-gradient(bottom, #4ac29a, #bdfff3);*/
  position: relative;
  overflow: hidden !important;
  height: 99% !important;
  width: 100% !important;
  right: 5px !important;
  
}

.PortailPatient .hero__title {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 50px;
  z-index: 1;
}

.PortailPatient .cube {
  position: absolute;
  top: 80vh;
  left: 45vw;
  width: 10px;
  height: 10px;
  border: solid 1px #3399FF;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
          transform: scale(0) rotate(0deg) translate(-50%, -50%);
  -webkit-animation: cube 7s ease-in forwards infinite;
          animation: cube 7s ease-in forwards infinite;

}
.PortailPatient .cube:nth-child(2n) {
  border-color: #3399FF;
}
.PortailPatient .cube:nth-child(2) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  left: 25vw;
  top: 40vh;
}
.PortailPatient .cube:nth-child(3) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  left: 75vw;
  top: 50vh;
}
.PortailPatient .cube:nth-child(4) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  left: 90vw;
  top: 10vh;
}
.PortailPatient .cube:nth-child(5) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  left: 10vw;
  top: 85vh;
}
.PortailPatient .cube:nth-child(6) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  left: 50vw;
  top: 10vh;
}

@-webkit-keyframes cube {
  from {
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
            transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(20) rotate(960deg) translate(-50%, -50%);
            transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes cube {
  from {
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
            transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(20) rotate(960deg) translate(-50%, -50%);
            transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}









.PortailPatient .container {
  width: 200px;
  height: 100%;
  margin: 0 auto 0;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  background: #fff;
}

.PortailPatient .pulse-button {
  position: relative;
  top: 20%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: block;
  width: 100px;
  height: 100px;
  font-size: 1.1em;
  font-weight: light;
  font-family: 'Hind regular', sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 100px;
  letter-spacing: -1px;
  color: #e74c3c;
  /*border: 2px dashed #e74c3c;*/
  border: none !important;
  border-radius: 50%;
  background:#70B7FF;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(231,76,60, 0.5);
  -webkit-animation: pulse 1.5s infinite;
}

.PortailPatient .pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(231,76,60, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(231,76,60, 0);
  }
}






.PortailPatient .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.PortailPatient .loader h2 {
  font-size: 40px;
  text-align: center;
  margin: 0;
  color: rgba(255, 255, 255, .7)
}

.PortailPatient .loader h1 {
  margin: 0;
  padding: 0;
  font-size: 10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  background-image: url('https://image.ibb.co/mhFBHG/water_image.png');
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  animation: animate 15s linear infinite;
}

@keyframes animate {
  0%{
    background-position: left 0 top 50px;
  }
  20%{
    background-position: left 800PX top -50px;
  }
  40%{
    background-position: left 1800px top -60px;
  }
  60%{
    background-position: left 2800px top -80px;
  }
  80%{
    background-position: left 3800px top -50px;
  }
  100%{
    background-position: left 4800px top 50px;
  }
}







/* butoon suivant de portail patient*/
@keyframes jump {
  0% {
    left: 85%;
  }
  50% {
    left: 80%;
  }
  100% {
    left: 85%;
  }
}

.arrow-right {
  position: absolute;
  text-align: center;
  animation: jump 5s infinite;
  top:300px!important;
  font-size: 1.8rem !important;
  height: 105px !important;
  width: 100px !important;
  border-radius: 0px !important;
  background: #3399FF !important;

}
.arrow-right.ui-button:hover{
 background: #338E83 !important;
}
.arrow-right:before {
  content: 'NEXT';
  position: absolute;
  top: 0px;
  width: 100px;
  height: 100px;
  background: inherit;
  border: inherit;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0px 4px 0px 20px;
}

.arrow-right:before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  right: -60px;
}

/**button précedent de portail patient*/
@keyframes jumpp {
  0% {
    right: 85%;
  }
  50% {
    right: 80%;
  }
  100% {
    right: 85%;
  }
}

.arrow-left {
  position: absolute;
  text-align: center;
  animation: jumpp 5s infinite;
  top:300px!important;
  font-size: 1.8rem !important;
  height: 105px !important;
  width: 100px !important;
  border-radius: 0px !important;
  background: #3399FF !important;

}
.arrow-left.ui-button:hover{
 background: #338E83 !important;
}
.arrow-left:before {
  content: 'BACK';
  position: absolute;
  top: 0px;
  width: 100px;
  height: 100px;
  background: inherit;
  border: inherit;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 4px 0px 0px 0px;
}

.arrow-left:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  right: 60px;
}

.rowReceived {
    background-color: green;
}