@media screen and (max-width: 770px) {
  #tablo-compteur {
    width: 100%; }
    #tablo-compteur td, #tablo-compteur th {
      text-align: center; }
    #tablo-compteur thead tr {
      line-height: 35px; }
      #tablo-compteur thead tr th {
        background: #11909F; }
    #tablo-compteur tbody tr td {
      background: #2dd5e9; }

  #MobileDetect {
    width: 10px;
    height: 0px;
    opacity: 0;
    position: absolute;
    left: -100px; }

  h1.userContext {
    font-size: 24px;
    color: #022662;
    text-align: center; }

  header#pcpal {
    height: 80px;
    background: #EEEEEE;
    width: 100%;
    position: relative;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); }
    header#pcpal #logo {
      position: absolute;
      left: 10px;
      width: 50px;
      height: auto;
      top: 50%;
      transform: translateY(-50%); }
      header#pcpal #logo img {
        width: 100%;
        height: auto; }
    header#pcpal #titreGlobal {
      font-size: 24px;
      color: #022662;
      font-weight: 600;
      left: 50px;
      width: auto;
      display: table;
      height: 150px;
      line-height: 80px;
      margin: 0px auto; }
    header#pcpal #unlockMe {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px; }

  #BlocConnexion {
    width: 90%;
    padding: 0px; }
    #BlocConnexion input {
      display: block;
      padding: 0px;
      width: 100%; }

  #PopPic {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999;
    width: 100vw;
    height: 100vh;
    background: white; }
    #PopPic #NameOfMed {
      position: absolute;
      top: 20px;
      width: calc(100% - 120px);
      text-align: center;
      font-size: 16px;
      left: 50%;
      transform: translateX(-50%); }
    #PopPic #ClosePic {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 30px;
      height: 30px; }
      #PopPic #ClosePic i {
        font-size: 30px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); }
      #PopPic #ClosePic:hover {
        cursor: pointer; }
    #PopPic img {
      width: 80%;
      height: auto;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }

  .pop h2 {
    font-size: 1.3em; }
  .pop .containModal {
    height: 100%; }
    .pop .containModal.L100 {
      width: 100%; }
    .pop .containModal.L90 {
      width: 100%; }
    .pop .containModal.L80 {
      width: 100%; }
    .pop .containModal.L70 {
      width: 100%; }
    .pop .containModal.L60 {
      width: 100%; }
    .pop .containModal.L50 {
      width: 100%; }
    .pop .containModal.L40 {
      width: 100%; }
    .pop .containModal.L30 {
      width: 100%; }
    .pop .containModal.L20 {
      width: 100%; }

  #blockConnect {
    display: none; }

  #footerMobile2 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0px;
    top: auto;
    left: 0px;
    color: black;
    background: #EEEEEE;
    transition: all 0.5s;
    z-index: 1200;
    box-sizing: border-box; }
    #footerMobile2 #WrapperFM {
      position: absolute;
      width: calc(100% - 40px);
      height: 30px;
      overflow: hidden;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }
      #footerMobile2 #WrapperFM #WrappyFM {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 200%;
        height: 100%;
        display: flex;
        justify-content: flex-start; }
        #footerMobile2 #WrapperFM #WrappyFM .WrapPageFooter {
          width: 50%;
          display: flex;
          justify-content: flex-start;
          height: 100%; }
          #footerMobile2 #WrapperFM #WrappyFM .WrapPageFooter .itemFooter {
            height: 100%;
            width: 16.667%;
            position: relative;
            flex: none; }
            #footerMobile2 #WrapperFM #WrappyFM .WrapPageFooter .itemFooter.Move {
              display: block; }
            #footerMobile2 #WrapperFM #WrappyFM .WrapPageFooter .itemFooter i {
              color: black;
              position: absolute;
              font-size: 30px;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%); }
            #footerMobile2 #WrapperFM #WrappyFM .WrapPageFooter .itemFooter.current i {
              color: #828282; }
            #footerMobile2 #WrapperFM #WrappyFM .WrapPageFooter .itemFooter #CountNM {
              display: none;
              border-radius: 50%;
              position: absolute;
              top: 0px;
              left: 100%;
              transform: translate(-50%, -50%);
              width: 20px;
              height: 20px;
              background: red;
              color: white;
              text-align: center;
              line-height: 20px;
              font-size: 12px; }

  #footerMobile {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0px;
    top: auto;
    left: 0px;
    color: black;
    background: #EEEEEE;
    transition: all 0.5s;
    z-index: 1200;
    padding: 20px;
    box-sizing: border-box; }
    #footerMobile .itemFooter {
      height: 50px;
      text-align: center;
      font-size: 30px;
      position: relative; }
      #footerMobile .itemFooter.current {
        color: #828282; }
      #footerMobile .itemFooter #CountNM {
        display: none;
        border-radius: 50%;
        position: absolute;
        top: 0px;
        left: 100%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        background: red;
        color: white;
        text-align: center;
        line-height: 20px;
        font-size: 12px; }

  #ChoixTypeMede {
    width: 100%;
    height: 40px;
    border: solid #022662 1px;
    border-radius: 4px; }

  #WrapperTrombi {
    width: 100%;
    height: calc(100vh - 272px);
    overflow-y: scroll;
    margin-top: 20px; }

  .MainContainerUser {
    width: 90%;
    padding-top: 0px;
    margin: auto;
    padding-bottom: 90px; }
    .MainContainerUser.full {
      width: 100%; }

  .datePubli {
    font-size: 10px; }
    .datePubli.right {
      text-align: right; }

  .NewsUser {
    width: 100%;
    box-sizing: border-box;
    border: solid #f1ebeb 1px;
    margin-bottom: 20px;
    transition: all 0.2s; }
    .NewsUser.ToDev .wrapNews {
      display: flex;
      justify-content: flex-start; }
      .NewsUser.ToDev .wrapNews .ForIll {
        width: 33%;
        padding-bottom: 33%;
        overflow: hidden;
        position: relative; }
        .NewsUser.ToDev .wrapNews .ForIll img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto; }
      .NewsUser.ToDev .wrapNews .ForDescr {
        display: block;
        width: 67%;
        position: relative;
        box-sizing: border-box;
        padding-bottom: 30%;
        overflow: hidden; }
        .NewsUser.ToDev .wrapNews .ForDescr.Long {
          display: none; }
        .NewsUser.ToDev .wrapNews .ForDescr span {
          display: block;
          position: absolute;
          left: 10px;
          width: calc(100% - 20px);
          top: 0px; }
          .NewsUser.ToDev .wrapNews .ForDescr span.Complete {
            display: none; }
      .NewsUser.ToDev .wrapNews.wOImg .ForIll {
        display: none; }
      .NewsUser.ToDev .wrapNews.wOImg .ForDescr {
        width: 100%; }
    .NewsUser.ToDev.open .wrapNews {
      display: block; }
      .NewsUser.ToDev.open .wrapNews .ForIll {
        width: 33%;
        padding-bottom: 33%;
        overflow: hidden;
        position: relative;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px; }
        .NewsUser.ToDev.open .wrapNews .ForIll img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto; }
      .NewsUser.ToDev.open .wrapNews .ForDescr {
        display: block;
        width: 100%;
        position: relative;
        box-sizing: border-box;
        padding: 10px;
        overflow: visible; }
        .NewsUser.ToDev.open .wrapNews .ForDescr.Long {
          display: none; }
        .NewsUser.ToDev.open .wrapNews .ForDescr span {
          display: block;
          position: relative;
          left: 10px;
          width: calc(100% - 20px);
          top: 0px; }
          .NewsUser.ToDev.open .wrapNews .ForDescr span.Complete {
            display: block; }
          .NewsUser.ToDev.open .wrapNews .ForDescr span.Before {
            display: none; }
      .NewsUser.ToDev.open .wrapNews.wOImg .ForIll {
        display: none; }
      .NewsUser.ToDev.open .wrapNews.wOImg .ForDescr {
        width: 100%; }
    .NewsUser .TitleNews {
      width: 100%;
      color: #0C4DA2;
      font-size: 18px;
      padding: 8px;
      box-sizing: border-box;
      font-weight: 600; }
    .NewsUser.Left .TitleNews {
      text-align: left; }
    .NewsUser.Right .TitleNews {
      text-align: right; }
    .NewsUser .wrapNews {
      display: flex;
      justify-content: flex-start; }
      .NewsUser .wrapNews .ForIll {
        width: 33%;
        padding-bottom: 33%;
        overflow: hidden;
        position: relative; }
        .NewsUser .wrapNews .ForIll img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto; }
      .NewsUser .wrapNews .ForDescr {
        display: block;
        width: 67%;
        position: relative;
        box-sizing: border-box;
        padding-bottom: 30%;
        overflow: hidden; }
        .NewsUser .wrapNews .ForDescr.Long {
          display: none; }
        .NewsUser .wrapNews .ForDescr span {
          display: block;
          position: absolute;
          left: 10px;
          width: calc(100% - 20px);
          top: 0px; }
      .NewsUser .wrapNews.wOImg .ForIll {
        display: none; }
      .NewsUser .wrapNews.wOImg .ForDescr {
        width: 100%; }

  #WrapSide {
    width: 100%;
    height: 500px;
    overflow-y: scroll;
    float: left;
    -webkit-overflow-scrolling: touch; }

  #WrapPlanUser.close #WrapSide {
    width: 31px;
    overflow: hidden; }
  #WrapPlanUser.close #WrapContentPlanning {
    width: calc(100% - 31px); }

  #SidePlanning {
    -webkit-transform: translate3d(0, 0, 0);
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    box-sizing: border-box; }
    #SidePlanning.close {
      width: 31px;
      height: 500px; }

  #WrapContentPlanning {
    float: left;
    width: 0%;
    height: 500px;
    overflow: hidden;
    position: relative; }
    #WrapContentPlanning #wrappyContentPlanning {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      overflow: scroll;
      padding-right: 16px;
      padding-bottom: 16px;
      -webkit-overflow-scrolling: touch; }

  #ContentPlanning {
    min-height: 1200px;
    width: 230%;
    margin: auto;
    padding: 20px 10px 0px 30px;
    box-sizing: border-box;
    font-size: 13px; }

  .oneItemP {
    width: 100%;
    margin-top: 25px;
    padding: 5px;
    box-sizing: border-box;
    border: solid #f1ebeb 1px;
    margin-bottom: 20px; }
    .oneItemP .DatePP {
      width: 100%;
      color: #0C4DA2;
      font-size: 18px;
      padding: 8px;
      box-sizing: border-box;
      font-weight: 600; }
    .oneItemP .OnePeriodePP {
      width: 80%;
      margin: auto; }
      .oneItemP .OnePeriodePP:first-child {
        border-bottom: solid #f1ebeb 1px; }
      .oneItemP .OnePeriodePP .titlePeriode {
        font-weight: bold; }
      .oneItemP .OnePeriodePP.Day:first-child {
        border-bottom: none; }

  .oneCrenToA {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border: solid #f1ebeb 1px;
    margin-bottom: 20px; }
    .oneCrenToA .CrenDate {
      width: 100%;
      color: #0C4DA2;
      font-size: 18px;
      padding: 8px;
      box-sizing: border-box;
      font-weight: 600; }
    .oneCrenToA .InfoCren {
      width: 90%;
      margin-left: 10%; }
      .oneCrenToA .InfoCren i {
        margin-right: 6px; }

  #FormToTake {
    display: none;
    width: 100%;
    border: solid #f1ebeb 1px;
    padding: 5px; }

  .FormValideCren .WrapInfosValideCren {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; }
    .FormValideCren .WrapInfosValideCren label {
      text-transform: uppercase;
      width: 50%;
      line-height: 25px;
      display: block; }
    .FormValideCren .WrapInfosValideCren select {
      display: block;
      width: 50%;
      border: solid #f1ebeb 1px;
      padding: 0px;
      margin: 0px;
      height: 25px; }

  #WrapContextMessUser {
    width: 100%;
    height: auto;
    margin-top: 60px; }
    #WrapContextMessUser .ItemMenuMU {
      width: 100%;
      border: solid #ccc 1px;
      height: 40px;
      line-height: 40px;
      position: relative;
      margin-bottom: 25px; }
      #WrapContextMessUser .ItemMenuMU i {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px; }
      #WrapContextMessUser .ItemMenuMU span {
        display: block;
        padding-left: 25px; }
      #WrapContextMessUser .ItemMenuMU #NLMU {
        position: absolute;
        left: 0px;
        top: 0px;
        background: #022662;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: white;
        display: none; }

  .SlideTrash {
    width: 30%;
    float: left;
    background: red;
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
    height: 120px;
    transform-origin: right; }
    .SlideTrash span {
      display: block;
      text-align: center;
      position: absolute;
      width: 100%;
      left: 0px;
      top: 50%;
      transform: translateY(-50%); }

  .OneMessage .SlideTrash {
    width: 0%;
    opacity: 0;
    transition: all 0s;
    transform-origin: right; }
  .OneMessage.color .wrapInMessage {
    float: left;
    width: 70%; }
  .OneMessage.color .SlideTrash {
    width: 30%;
    opacity: 1;
    transition: all 0.2s;
    transform-origin: right; }

  .newContent {
    display: table;
    margin: 35px auto;
    padding: 5px 10px;
    width: auto;
    text-align: center;
    background: #022662;
    color: white;
    height: 40px;
    line-height: 40px;
    text-transform: uppercase; }

  #FormND {
    display: none; }

  .oneDemande {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border: solid #f1ebeb 1px;
    margin-bottom: 20px; }
    .oneDemande .DateDemande {
      width: 100%;
      color: #0C4DA2;
      font-size: 18px;
      padding: 8px;
      box-sizing: border-box;
      font-weight: 600; }
    .oneDemande .InfosD {
      width: 90%;
      margin-left: 10%; }
      .oneDemande .InfosD i {
        margin-right: 6px; } }