body, html {
  min-height: 100%;
  position: relative;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
  color: #2E284C; }

body {
  height: 100vh; }

div {
  box-sizing: border-box; }

h2 {
  text-transform: uppercase;
  font-size: 18px; }

h1.monTitre {
  font-size: 18px;
  font-variant: small-caps; }

p.alert {
  text-align: center;
  font-size: 18px; }

#myMessage {
  position: fixed;
  right: 30px;
  width: 350px;
  bottom: 0px;
  overflow: hidden;
  background: #1D2643;
  text-overflow: clip;
  color: white;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  z-index: 99999999; }

@keyframes Appear {
  from {
    opacity: 0;
    top: 60%; }
  to {
    opacity: 1;
    top: 50%; } }
.pop {
  z-index: 9999999;
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  top: 0px;
  left: 0px; }
  .pop.small .containModal {
    position: absolute;
    border-radius: 3px;
    background: #f6f9fa;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    width: auto;
    height: auto;
    padding: 25px;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .pop h2 {
    text-transform: uppercase; }
  .pop .closePop {
    position: absolute;
    right: 15px;
    top: 6px;
    font-size: 24px; }
    .pop .closePop:hover {
      cursor: pointer;
      color: black; }
  .pop .containModal {
    position: absolute;
    border-radius: 3px;
    background: #f6f9fa;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    width: 75%;
    height: auto;
    padding: 25px;
    box-sizing: border-box;
    top: 50%;
    animation-delay: 0.3s;
    animation: Appear 0.5s forwards;
    left: 50%;
    transform: translate(-50%, -50%); }
    .pop .containModal.L80 {
      width: 80%; }
    .pop .containModal.L70 {
      width: 70%; }
    .pop .containModal.L60 {
      width: 60%; }
    .pop .containModal.L50 {
      width: 50%; }
    .pop .containModal.L40 {
      width: 40%; }
    .pop .containModal.L30 {
      width: 30%; }
    .pop .containModal.L20 {
      width: 20%; }
  .pop p.center {
    text-align: center;
    font-size: 18px; }

header {
  width: 100%;
  height: 60px;
  background: white;
  position: relative; }
  header .SiteName {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: 1vw; }

.btnStd {
  display: table;
  padding: 0px 25px;
  background: #7F8298;
  border-radius: 8px;
  text-transform: uppercase;
  color: white;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 40px;
  line-height: 40px;
  font-weight: 600; }
  .btnStd.center {
    margin: 20px auto; }
  .btnStd.right {
    margin: 20px 0px 20px auto; }
  .btnStd:hover {
    cursor: pointer; }
  .btnStd i {
    margin-right: 10px; }

.mainContainF {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #fbfbfb;
  min-height: 100%; }

.mainContainer {
  width: 100%;
  height: 100%;
  padding: 25px; }
  .mainContainer.connexion {
    background: #1D2643;
    color: white; }

.erroForm {
  color: red;
  font-style: italic;
  text-align: center;
  margin: 5px auto;
  height: 25px;
  display: none; }

.WrapInputD {
  width: 100%;
  height: 50px;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: stretch; }
  .WrapInputD label {
    display: block;
    padding-left: 35px;
    width: 50%;
    line-height: 50px;
    position: relative;
    text-transform: uppercase;
    font-weight: 600; }
    .WrapInputD label:before {
      content: '';
      display: block;
      position: absolute;
      left: 0px;
      width: 15px;
      height: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: #5541e7;
      border-radius: 50%; }
  .WrapInputD input {
    width: 50%;
    display: block;
    padding: 0px 0px 0px 15px;
    height: 50px;
    line-height: 50px;
    margin: 0px;
    border: none;
    background: white; }
    .WrapInputD input:focus {
      outline: none; }

.WrapInput {
  height: 60px;
  position: relative;
  padding-top: 30px; }
  .WrapInput input {
    height: 30px;
    width: 100%;
    line-height: 30px;
    background: white;
    display: block;
    margin: 0px;
    padding: 0px;
    padding-left: 10px;
    border: none;
    border-bottom: solid 1px #ccc; }
  .WrapInput label {
    position: absolute;
    display: block;
    height: 30px;
    line-height: 30px;
    left: 10px;
    top: 30px;
    transition: all 0.5s; }
    .WrapInput label.up {
      top: 0px;
      padding-left: 0px;
      transition: all 0.5s; }

.FullLine {
  width: 100%;
  height: auto;
  margin: 15px auto; }
  .FullLine .WrapInput {
    width: 100%; }

#BlocConnexion {
  color: black;
  width: 500px;
  margin: 50px auto;
  background: white;
  padding: 20px; }
  #BlocConnexion h2 {
    text-align: center;
    margin: 10px auto; }

#MenuContext {
  position: absolute;
  top: 10%;
  right: 0px;
  display: none; }

#BlocConnect {
  position: absolute;
  width: auto;
  height: 80%;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  #BlocConnect .NameO {
    margin-right: 15px; }
  #BlocConnect .Init {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #A4E05C;
    color: black;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold; }

.Avatar {
  width: 100%;
  height: 120px;
  margin: 40px auto; }
  .Avatar .inAvatarCustomer {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    margin: 10px auto;
    background: #A4E05C; }
    .Avatar .inAvatarCustomer .Init {
      font-size: 50px;
      left: 50%;
      top: 50%;
      width: 100%;
      position: absolute;
      text-align: center;
      transform: translate(-50%, -50%); }
  .Avatar .inAvatar {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    margin: 10px auto; }
    .Avatar .inAvatar img {
      position: absolute;
      display: block;
      transform-origin: center;
      left: 50%;
      top: 50%;
      width: 100%;
      height: auto;
      transform: translate(-50%, -50%); }

#SwitchMenu {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 5px;
  right: 5px; }
  #SwitchMenu i {
    font-size: 30px;
    line-height: 30px;
    display: block;
    transition: all 0.3s; }
  #SwitchMenu:hover {
    cursor: pointer; }

aside#Customeraside {
  background: #2E284C;
  color: white;
  position: relative; }
  aside#Customeraside #SwitchMenu {
    color: white; }
  aside#Customeraside .itemMenu {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border-radius: 4px; }
    aside#Customeraside .itemMenu:hover, aside#Customeraside .itemMenu.current {
      background: #C0D242;
      cursor: pointer; }
    aside#Customeraside .itemMenu i {
      line-height: 40px;
      margin-right: 10px; }

aside#Adminaside {
  background: black;
  color: white;
  position: relative; }
  aside#Adminaside #SwitchMenu {
    color: white; }
  aside#Adminaside .itemMenu {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border-radius: 4px; }
    aside#Adminaside .itemMenu:hover, aside#Adminaside .itemMenu.current {
      background: #C0D242;
      cursor: pointer; }
    aside#Adminaside .itemMenu i {
      line-height: 40px;
      margin-right: 10px; }

.ContentMenu {
  overflow: hidden; }

.mainContainCust {
  width: 100%;
  min-height: calc(100% - 100px);
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  position: relative; }
  .mainContainCust aside {
    min-height: 100%;
    width: 240px;
    padding: 20px;
    box-sizing: border-box;
    transition: all 0.3s; }
    .mainContainCust aside .ContentMenu {
      width: 100%;
      transition-delay: 0.3s; }
  .mainContainCust main {
    width: calc(100% - 240px);
    position: relative;
    padding: 30px;
    box-sizing: border-box;
    background: #fbfbfb; }
  .mainContainCust.MenuClose aside#Customeraside {
    min-height: 100%;
    width: 60px;
    padding: 5px;
    box-sizing: border-box;
    transition: all 0.3s; }
    .mainContainCust.MenuClose aside#Customeraside .ContentMenu {
      width: 30px;
      margin: auto;
      border-radius: 0px; }
      .mainContainCust.MenuClose aside#Customeraside .ContentMenu .Avatar {
        opacity: 0; }
      .mainContainCust.MenuClose aside#Customeraside .ContentMenu .itemMenu {
        padding-left: 0px;
        text-align: center;
        border-radius: 0px; }
        .mainContainCust.MenuClose aside#Customeraside .ContentMenu .itemMenu span {
          opacity: 0; }
        .mainContainCust.MenuClose aside#Customeraside .ContentMenu .itemMenu i {
          padding-left: 5px;
          font-size: 20px;
          margin: auto; }
    .mainContainCust.MenuClose aside#Customeraside #SwitchMenu {
      color: white; }
      .mainContainCust.MenuClose aside#Customeraside #SwitchMenu i {
        transform: rotate(180deg); }
  .mainContainCust.MenuClose main {
    width: calc(100% - 40px);
    height: 100%;
    position: relative;
    padding: 30px;
    box-sizing: border-box; }

.mainContainWA {
  width: 100%;
  min-height: calc(100% - 100px);
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  position: relative; }
  .mainContainWA aside {
    min-height: 100%;
    width: 240px;
    padding: 20px;
    box-sizing: border-box;
    transition: all 0.3s; }
    .mainContainWA aside .ContentMenu {
      width: 100%;
      transition-delay: 0.3s; }
  .mainContainWA main {
    width: calc(100% - 240px);
    position: relative;
    padding: 30px;
    box-sizing: border-box;
    background: #fbfbfb; }
  .mainContainWA.MenuClose aside#Adminaside {
    min-height: 100%;
    width: 60px;
    padding: 5px;
    box-sizing: border-box;
    transition: all 0.3s; }
    .mainContainWA.MenuClose aside#Adminaside .ContentMenu {
      width: 30px;
      margin: auto;
      border-radius: 0px; }
      .mainContainWA.MenuClose aside#Adminaside .ContentMenu .Avatar {
        opacity: 0; }
      .mainContainWA.MenuClose aside#Adminaside .ContentMenu .itemMenu {
        padding-left: 0px;
        text-align: center;
        border-radius: 0px; }
        .mainContainWA.MenuClose aside#Adminaside .ContentMenu .itemMenu span {
          opacity: 0; }
        .mainContainWA.MenuClose aside#Adminaside .ContentMenu .itemMenu i {
          padding-left: 5px;
          font-size: 20px;
          margin: auto; }
    .mainContainWA.MenuClose aside#Adminaside #SwitchMenu {
      color: white; }
      .mainContainWA.MenuClose aside#Adminaside #SwitchMenu i {
        transform: rotate(180deg); }
  .mainContainWA.MenuClose main {
    width: calc(100% - 40px);
    height: 100%;
    position: relative;
    padding: 30px;
    box-sizing: border-box; }

@keyframes bounce {
  From {
    bottom: 0px; }
  To {
    bottom: 10px; } }
#QuickAction {
  width: 100%;
  height: auto;
  margin: 20px auto; }
  #QuickAction #WrapQA {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start; }
    #QuickAction #WrapQA .OneQA {
      display: table;
      border-radius: 3px;
      margin: 7px;
      height: 50px;
      padding-left: 10px;
      padding-right: 10px;
      line-height: 50px;
      background: #7F8298;
      color: white;
      position: relative; }
      #QuickAction #WrapQA .OneQA span {
        margin-left: 30px; }
      #QuickAction #WrapQA .OneQA i {
        position: absolute;
        left: 10px;
        float: left; }
      #QuickAction #WrapQA .OneQA:hover {
        cursor: pointer; }
        #QuickAction #WrapQA .OneQA:hover i {
          display: block;
          animation: bounce 0.5s infinite; }
      #QuickAction #WrapQA .OneQA i {
        line-height: 50px;
        margin-right: 7px; }

.ItemCD {
  width: 100%;
  display: flex;
  height: 25px;
  justify-content: space-between; }
  .ItemCD .oneItemCD {
    width: 30%;
    line-height: 25px;
    text-align: center;
    border-radius: 12px; }
    .ItemCD .oneItemCD.current, .ItemCD .oneItemCD:hover {
      background: #7F8298;
      color: white;
      cursor: pointer; }

#WrapDash {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  flex-wrap: wrap; }
  #WrapDash .OneDash {
    width: 33.33%;
    position: relative;
    padding: 20px;
    box-sizing: border-box; }
    #WrapDash .OneDash .inD {
      width: 100%;
      background: white;
      border-radius: 6px;
      box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.15);
      padding: 10px;
      box-sizing: border-box;
      height: 100%; }
      #WrapDash .OneDash .inD h3.title_dash {
        width: 100%;
        font-size: 14px;
        padding-top: 0px;
        margin-top: 0px;
        padding-bottom: 10px;
        text-transform: uppercase;
        font-weight: 600;
        color: #2E284C; }

#ContentHour {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative; }
  #ContentHour #WrapCH {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 100%; }
    #ContentHour #WrapCH .OneSlide {
      width: 100%;
      height: 100%;
      position: relative; }
      #ContentHour #WrapCH .OneSlide .Number {
        position: absolute;
        font-size: 45px;
        font-weight: 600;
        color: #c6c2c2;
        font-family: 'monospace';
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }

.pseudoAvatar {
  width: 50px;
  height: 50px;
  position: relative;
  border: solid #ccc 1px;
  background: white;
  border-radius: 50%; }
  .pseudoAvatar span {
    position: absolute;
    display: block;
    font-size: 0.8vh;
    font-weight: 600;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }

.OlR {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 25px; }
  .OlR .avatar {
    width: 30px;
    height: 25px;
    text-align: center; }
    .OlR .avatar img {
      width: 25px;
      height: 25px; }
    .OlR .avatar .pseudoAvatar {
      width: 25px;
      height: 25px; }

.OAV {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 25px;
  margin-bottom: 15px; }
  .OAV .avatar {
    width: 30px;
    height: 25px;
    text-align: center; }
    .OAV .avatar img {
      width: 25px;
      height: 25px; }
    .OAV .avatar .pseudoAvatar {
      width: 25px;
      height: 25px; }
  .OAV .WrapSlider {
    width: 40%;
    position: relative;
    height: 25px; }

.SliderAv {
  width: 80%;
  margin: 2.5px auto;
  height: 20px;
  border-radius: 0px;
  background: #f4f1f1;
  overflow: hidden;
  position: relative; }
  .SliderAv .SlidyAv {
    position: absolute;
    top: 0px;
    left: 0px;
    background: #7F8298;
    height: 100%; }
    .SliderAv .SlidyAv.almostCritical {
      background: repeating-linear-gradient(45deg, #D49473, #D49473 10px, #93502D 10px, #93502D 20px); }
    .SliderAv .SlidyAv.Critical {
      background: repeating-linear-gradient(45deg, #FF2B2F, #FF2B2F 10px, red 10px, red 20px); }
  .SliderAv .pourc {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    line-height: 20px;
    text-align: center;
    color: black; }

input[type=file] {
  opacity: 0; }

.ContentStd {
  width: 1050px;
  margin: auto; }

.ContentWM {
  width: 1050px;
  margin: 80px auto 0px; }

.WrapChooseAvatar {
  width: 100%;
  height: 350px;
  margin: 25px auto;
  position: relative;
  background: white; }
  .WrapChooseAvatar .WrapInAvat {
    height: 80%;
    width: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 45%; }
    .WrapChooseAvatar .WrapInAvat img {
      height: 100%;
      width: auto; }
  .WrapChooseAvatar legend {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%); }

#NewDevContent {
  display: none; }

.WrapRessources {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; }
  .WrapRessources .initRess {
    margin: 3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #2E284C;
    color: white;
    font-size: 1vh;
    text-align: center;
    line-height: 25px;
    box-sizing: border-box; }
  .WrapRessources .noRess {
    display: table;
    height: 25px;
    line-height: 25px;
    padding-left: 5px;
    padding-right: 5px;
    background: #5541e7;
    color: white;
    border-radius: 13px; }

.WrapContentB {
  width: 100%;
  margin-top: 50px; }

.T-list {
  width: 100%;
  border-spacing: 3px;
  padding: 10px;
  border-radius: 6px;
  background: white; }
  .T-list thead tr {
    background: white; }
    .T-list thead tr th {
      color: #7F8298;
      height: 45px;
      text-align: center; }

#Tab-ListDev #NomDev {
  width: 16%; }
#Tab-ListDev #DebDev {
  width: 12%; }
#Tab-ListDev #FinDev {
  width: 10%; }
#Tab-ListDev #TLDev {
  width: 17%; }
#Tab-ListDev #AvDev {
  width: 17%; }
#Tab-ListDev #RessDev {
  width: 20%; }
#Tab-ListDev #EditDev {
  width: 5%; }
#Tab-ListDev #TrashDev {
  width: 5%; }
#Tab-ListDev td {
  font-weight: 600; }
#Tab-ListDev .name {
  font-weight: 600;
  padding-left: 10px; }
#Tab-ListDev .date, #Tab-ListDev .action {
  text-align: center; }
#Tab-ListDev .action:hover {
  cursor: pointer; }

.ItemTop {
  width: 19%;
  height: 100%;
  line-height: 3.5;
  text-align: center;
  text-transform: uppercase;
  color: #2E284C;
  font-weight: 600; }
  .ItemTop.current, .ItemTop:hover {
    border-bottom: solid #7F8298 2px;
    cursor: pointer; }

#MenuEditDev {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 70px;
  background: white;
  display: flex;
  justify-content: flex-start;
  padding: 10px;
  box-sizing: border-box; }
  #MenuEditDev #forAvat {
    width: 10%;
    height: 100%;
    position: relative; }
    #MenuEditDev #forAvat #WrapAv {
      height: 95%;
      width: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      #MenuEditDev #forAvat #WrapAv img {
        height: 100%;
        width: auto; }
  #MenuEditDev #MenuIn {
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: space-between; }

#WrapContentMix .oneContentIM {
  width: 100%;
  display: none; }

#MainKf {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #E4E3E3; }

#MenuKF {
  width: 60%;
  margin: 30px auto;
  display: flex;
  justify-content: flex-start; }
  #MenuKF .OneItemKF {
    border: solid #5541e7 1px;
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: black; }
    #MenuKF .OneItemKF:hover, #MenuKF .OneItemKF.current {
      background: #5541e7;
      cursor: pointer;
      color: white; }

#WrapperKF {
  width: 100%; }
  #WrapperKF .oneCkf {
    display: none; }
    #WrapperKF .oneCkf.current {
      display: block; }

#TAbKF, #tableVendor {
  width: 70%;
  margin: 30px auto;
  border-collapse: collapse; }
  #TAbKF thead tr, #tableVendor thead tr {
    background: white; }
    #TAbKF thead tr th, #tableVendor thead tr th {
      height: 30px;
      border: solid #ccc 1px; }
  #TAbKF tbody tr:nth-child(odd), #tableVendor tbody tr:nth-child(odd) {
    background: white; }
  #TAbKF tbody tr td, #tableVendor tbody tr td {
    text-align: center; }

#Contruct {
  margin-top: 40px; }

.OnePhaseContruct {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: white;
  display: flex;
  justify-content: flex-start;
  margin: 15px auto 15px 0px; }
  .OnePhaseContruct .namePhaseConstruct {
    background: #5541e7;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
    line-height: 40px;
    height: 40px;
    width: calc(50% + 15px); }
  .OnePhaseContruct .durrePhaseContruct {
    background: #2E284C;
    line-height: 40px;
    height: 40px;
    width: calc(50% - 25px);
    text-align: center;
    padding-right: 10px; }

.WrapTachesContruct {
  margin: 10px auto 10px 25px;
  width: calc(100% - 25px); }
  .WrapTachesContruct .oneTaskContruct {
    display: flex;
    justify-content: flex-start;
    margin: 10px auto;
    width: 100%; }
    .WrapTachesContruct .oneTaskContruct .nameTask {
      padding-left: 10px;
      padding-right: 10px;
      margin-right: 10px;
      background: #ccc;
      color: white;
      line-height: 30px;
      width: 50%; }
    .WrapTachesContruct .oneTaskContruct .dureeTask {
      border: solid #2E284C 1px;
      color: #2E284C;
      line-height: 30px;
      height: 30px;
      padding-left: 10px;
      padding-right: 10px;
      margin-right: 10px;
      font-weight: bold;
      width: 10%;
      text-align: center; }
    .WrapTachesContruct .oneTaskContruct .ressTask {
      line-height: 30px;
      height: 30px;
      display: flex;
      justify-content: flex-start;
      width: 38%;
      border-radius: 15px;
      border: solid #ccc 1px;
      overflow: hidden; }
      .WrapTachesContruct .oneTaskContruct .ressTask .oneRessC {
        height: 100%;
        border: solid #ccc 1px;
        color: black; }
        .WrapTachesContruct .oneTaskContruct .ressTask .oneRessC span {
          text-align: center;
          display: block;
          width: 100%; }

#TheGantt {
  margin-top: 60px; }

.movePhase, .moveTache {
  height: 30px;
  width: 20px;
  position: relative; }
  .movePhase .moveDown, .movePhase .moveUp, .moveTache .moveDown, .moveTache .moveUp {
    width: 100%;
    font-size: 14px;
    color: white;
    text-align: center;
    height: 50%;
    line-height: 15px; }
    .movePhase .moveDown.disable, .movePhase .moveUp.disable, .moveTache .moveDown.disable, .moveTache .moveUp.disable {
      display: none; }
    .movePhase .moveDown:hover, .movePhase .moveUp:hover, .moveTache .moveDown:hover, .moveTache .moveUp:hover {
      cursor: pointer;
      background: white;
      color: #2E284C; }

@keyframes Spinner {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(360deg); } }
.OnePhaseToBuild {
  width: 100%;
  height: auto; }
  .OnePhaseToBuild .wrapLinePhase {
    color: white;
    display: flex;
    justify-content: flex-start;
    margin: 15px auto 15px 0px;
    height: 40px; }
    .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild {
      background: #7F8298;
      margin-right: 10px;
      text-transform: uppercase;
      line-height: 40px;
      height: 40px;
      padding: 10px;
      width: calc(50% + 15px);
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild.onEdit span {
        display: none; }
      .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild.onEdit .wrapEdit {
        display: block; }
      .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild.onEdit .MenuEditPhase .WSA .onAction.Ed {
        display: none; }
      .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild.onEdit .MenuEditPhase .WSA .onAction.val {
        display: block; }
        .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild.onEdit .MenuEditPhase .WSA .onAction.val i.icon-spinner {
          display: inline-block;
          animation: Spinner 0.7s infinite; }
      .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild span {
        display: block;
        padding-left: 10px;
        padding-right: 10px; }
      .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild .wrapEdit {
        display: none;
        width: 60%; }
        .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild .wrapEdit input {
          height: 25px;
          border: none;
          width: 100%;
          padding: 0;
          margin: 0;
          background: transparent;
          color: white;
          border-bottom: solid white 1px; }
      .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild .MenuEditPhase {
        display: flex;
        width: 14%;
        justify-content: space-between; }
        .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild .MenuEditPhase .onAction:hover {
          cursor: pointer;
          color: #A4E05C; }
        .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild .MenuEditPhase .WSA {
          width: 50%; }
          .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild .MenuEditPhase .WSA .onAction.Ed {
            display: block; }
          .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild .MenuEditPhase .WSA .onAction.val {
            display: none; }
        .OnePhaseToBuild .wrapLinePhase .namePhaseToBuild .MenuEditPhase .onAction {
          width: 50%; }
    .OnePhaseToBuild .wrapLinePhase .dureePhaseToBuild {
      background: #9e97d0;
      line-height: 40px;
      height: 40px;
      width: calc(50% - 25px);
      text-align: center;
      padding-right: 10px; }

.WrapTachesToBuild {
  margin: 10px auto 10px 33px;
  width: calc(100% - 33px); }

.illAT {
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
  background: #7F8298;
  display: none; }
  .illAT:after {
    content: 'ajouter une tache';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    border: solid #7F8298 2px;
    border-radius: 12px;
    background: white;
    text-align: center;
    width: 150px;
    height: 20px;
    line-height: 16px;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 600;
    font-variant: small-caps;
    z-index: 2; }

.AddTask {
  width: 100%;
  position: relative;
  height: 10px; }
  .AddTask:hover {
    cursor: pointer; }
    .AddTask:hover .illAT {
      display: block; }

.oneTaskToBuild .wrapInfosTask {
  display: flex;
  justify-content: flex-start;
  margin: 10px auto;
  width: 100%; }
  .oneTaskToBuild .wrapInfosTask .nameTask {
    margin-right: 10px;
    background: #ccc;
    color: white;
    line-height: 20px;
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; }
    .oneTaskToBuild .wrapInfosTask .nameTask .poigne {
      position: absolute;
      width: 43px;
      height: 20px;
      right: 100%;
      top: 10px; }
    .oneTaskToBuild .wrapInfosTask .nameTask.onEdit span {
      display: none; }
    .oneTaskToBuild .wrapInfosTask .nameTask.onEdit .wrapEditT {
      display: block; }
    .oneTaskToBuild .wrapInfosTask .nameTask.onEdit .MenuEditTache .WSA .onAction.Ed {
      display: none; }
    .oneTaskToBuild .wrapInfosTask .nameTask.onEdit .MenuEditTache .WSA .onAction.val {
      display: block; }
      .oneTaskToBuild .wrapInfosTask .nameTask.onEdit .MenuEditTache .WSA .onAction.val i.icon-spinner {
        display: inline-block;
        animation: Spinner 0.7s infinite; }
    .oneTaskToBuild .wrapInfosTask .nameTask span {
      display: block;
      padding-left: 10px;
      padding-right: 10px; }
    .oneTaskToBuild .wrapInfosTask .nameTask .wrapEditT {
      display: none;
      width: 60%; }
      .oneTaskToBuild .wrapInfosTask .nameTask .wrapEditT input {
        height: 20px;
        border: none;
        width: 100%;
        padding: 0;
        margin: 0;
        background: transparent;
        color: white;
        border-bottom: solid white 1px; }
    .oneTaskToBuild .wrapInfosTask .nameTask .MenuEditTache {
      display: flex;
      width: 14%;
      justify-content: space-between; }
      .oneTaskToBuild .wrapInfosTask .nameTask .MenuEditTache .onAction:hover {
        cursor: pointer;
        color: black; }
      .oneTaskToBuild .wrapInfosTask .nameTask .MenuEditTache .WSA {
        width: 50%; }
        .oneTaskToBuild .wrapInfosTask .nameTask .MenuEditTache .WSA .onAction.val {
          display: none; }
      .oneTaskToBuild .wrapInfosTask .nameTask .MenuEditTache .onAction {
        width: 50%; }
  .oneTaskToBuild .wrapInfosTask .dureeTask {
    width: 50%;
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #A4E05C; }
    .oneTaskToBuild .wrapInfosTask .dureeTask.onEdit span {
      display: none; }
    .oneTaskToBuild .wrapInfosTask .dureeTask.onEdit .wrapEditHT {
      display: block; }
    .oneTaskToBuild .wrapInfosTask .dureeTask.onEdit .MenuEditDuree .onAction.Ed {
      display: none; }
    .oneTaskToBuild .wrapInfosTask .dureeTask.onEdit .MenuEditDuree .onAction.val {
      display: block; }
    .oneTaskToBuild .wrapInfosTask .dureeTask span {
      display: block;
      padding-left: 10px;
      padding-right: 10px;
      font-weight: 600; }
    .oneTaskToBuild .wrapInfosTask .dureeTask .wrapEditHT {
      display: none;
      width: 30%;
      margin-left: 20px; }
      .oneTaskToBuild .wrapInfosTask .dureeTask .wrapEditHT input {
        height: 25px;
        border: none;
        width: 100%;
        padding: 0;
        margin: 0;
        background: transparent;
        color: black;
        border-bottom: solid black 1px; }
    .oneTaskToBuild .wrapInfosTask .dureeTask .MenuEditDuree {
      width: 7%; }
      .oneTaskToBuild .wrapInfosTask .dureeTask .MenuEditDuree .onAction:hover {
        cursor: pointer;
        color: white; }
      .oneTaskToBuild .wrapInfosTask .dureeTask .MenuEditDuree .onAction.Ed {
        display: block; }
      .oneTaskToBuild .wrapInfosTask .dureeTask .MenuEditDuree .onAction.val {
        display: none; }

.oneRessToBuild {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60px; }
  .oneRessToBuild .nameRess {
    margin-right: 10px;
    background: black;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    height: 30px;
    width: 30px; }
  .oneRessToBuild .wrapSlideRess {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    .oneRessToBuild .wrapSlideRess .downPC, .oneRessToBuild .wrapSlideRess .upPc {
      font-size: 18px;
      width: 25px;
      text-align: center; }
      .oneRessToBuild .wrapSlideRess .downPC i:hover, .oneRessToBuild .wrapSlideRess .upPc i:hover {
        color: #A4E05C;
        cursor: pointer; }
    .oneRessToBuild .wrapSlideRess .TsliderRess {
      width: 394px;
      height: 20px;
      background: white;
      overflow: hidden;
      position: relative; }
      .oneRessToBuild .wrapSlideRess .TsliderRess .slidyR {
        position: absolute;
        top: 0px;
        left: 0px;
        background: #7F8298;
        height: 100%; }
        .oneRessToBuild .wrapSlideRess .TsliderRess .slidyR.almostCritical {
          background: #F3844B; }
        .oneRessToBuild .wrapSlideRess .TsliderRess .slidyR.Critical {
          background: #FC3B3E; }
      .oneRessToBuild .wrapSlideRess .TsliderRess .Tpc {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        line-height: 20px;
        text-align: center;
        color: black; }

@keyframes AppearChoixA {
  from {
    transform: scale(0) rotate(30deg); }
  to {
    transform: scale(1) rotate(30deg); } }
@keyframes AppearChoixB {
  from {
    transform: scale(0) rotate(0); }
  to {
    transform: scale(1) rotate(0); } }
@keyframes AppearChoixC {
  from {
    transform: scale(0) rotate(-30deg); }
  to {
    transform: scale(1) rotate(-30deg); } }
.poigne svg .forTache {
  fill: #ccc; }
.poigne .path {
  position: absolute;
  width: 80%;
  height: 6px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #CCC; }
.poigne .round {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: #CCC; }
  .poigne .round .secondRound {
    width: 15px;
    height: 15px;
    background: white;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
.poigne:hover {
  cursor: pointer; }
  .poigne:hover .choix.A {
    animation: AppearChoixA 0.3s forwards; }
    .poigne:hover .choix.A .inChoix {
      transition: 0.2s; }
      .poigne:hover .choix.A .inChoix:hover {
        cursor: pointer;
        width: 80%; }
  .poigne:hover .choix.B {
    animation: AppearChoixB 0.3s forwards;
    animation-delay: 0.1s; }
    .poigne:hover .choix.B .inChoix {
      transition: 0.2s; }
      .poigne:hover .choix.B .inChoix:hover {
        cursor: pointer;
        width: 80%; }
  .poigne:hover .choix.C {
    animation: AppearChoixC 0.3s forwards;
    animation-delay: 0.2s; }
    .poigne:hover .choix.C .inChoix {
      transition: 0.2s; }
      .poigne:hover .choix.C .inChoix:hover {
        cursor: pointer;
        width: 80%; }
.poigne .choix {
  position: absolute;
  width: 160px;
  text-align: center;
  right: 58%;
  top: 0px;
  color: black; }
  .poigne .choix.A {
    transform-origin: right 50%;
    transform: scale(0) rotate(30deg); }
  .poigne .choix.B {
    animation-delay: 0.3s;
    transform-origin: right 50%;
    transform: scale(0) rotate(0); }
    .poigne .choix.B .inChoix {
      background: #A4E05C;
      transition: 0.2s; }
  .poigne .choix.C {
    animation-delay: 0.6s;
    transform-origin: right 50%;
    transform: scale(0) rotate(-30deg); }
    .poigne .choix.C .inChoix {
      background: #FC4B4E;
      transition: 0.2s; }
  .poigne .choix .inChoix {
    background: #7F8298;
    border-radius: 8px;
    width: 75%;
    font-variant: small-caps;
    font-weight: 600; }

#WrapChoiceDev {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; }
  #WrapChoiceDev .WrapDev {
    width: 300px;
    height: 300px;
    padding: 25px;
    box-sizing: border-box; }
    #WrapChoiceDev .WrapDev .oneDev {
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
      background: #2E284C;
      color: #ADA6D0; }
      #WrapChoiceDev .WrapDev .oneDev .DevName {
        font-size: 38px; }
      #WrapChoiceDev .WrapDev .oneDev:hover {
        box-shadow: -6px -6px 6px 0px rgba(0, 0, 0, 0.25);
        cursor: pointer; }

.CircleWrap {
  width: 150px;
  height: 150px;
  margin: auto;
  background: #ccc;
  position: relative;
  border-radius: 50%;
  overflow: hidden; }
  .CircleWrap .CircleIn {
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; }
    .CircleWrap .CircleIn span {
      display: block;
      font-size: 18px;
      font-weight: 600;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }
  .CircleWrap .slice {
    background: #2E284C;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50%;
    height: 50%; }
    .CircleWrap .slice.Q0 {
      transform-origin: bottom right;
      z-index: 1; }
    .CircleWrap .slice.Q1 {
      transform-origin: bottom right;
      z-index: 1;
      transition: 0.3s; }
    .CircleWrap .slice.Q2 {
      transform-origin: bottom right;
      z-index: 2;
      transition: 0.3s; }
    .CircleWrap .slice.Q3 {
      transform-origin: bottom right;
      z-index: 3;
      transition: 0.3s; }
    .CircleWrap .slice.Q4 {
      transform-origin: bottom right;
      z-index: 4;
      transition: 0.3s; }

#T-TW {
  width: 100%; }
  #T-TW thead tr th {
    font-style: italic;
    text-align: left;
    padding-left: 5px; }

#ProgressLine {
  width: 80%;
  margin: 30px auto 30px 0px;
  height: 50px; }

#WrapProgress {
  width: 100%;
  height: 100%;
  background: #ccc;
  position: relative; }

#slidyProgress {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  transition: 0.4s all;
  background: #30EC86;
  width: 0%; }
  #slidyProgress:after {
    content: attr(data-heure);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    color: white; }

.onePhasePr {
  width: 80%;
  height: auto;
  margin-bottom: 15px; }
  .onePhasePr.ToOpen:hover {
    cursor: pointer; }
  .onePhasePr .HeadPP {
    width: 100%;
    height: 40px;
    background: #E9E6E6;
    color: black;
    position: relative;
    overflow: hidden; }
    .onePhasePr .HeadPP.inWait i.icon-spinner {
      display: inline-block; }
    .onePhasePr .HeadPP i.icon-spinner {
      margin-left: 5px;
      animation: Spinner 0.8s infinite;
      display: none; }
    .onePhasePr .HeadPP .namePP {
      line-height: 40px;
      position: absolute;
      z-index: 3;
      left: 10px;
      font-size: 16px;
      font-variant: small-caps;
      font-weight: 600; }
    .onePhasePr .HeadPP .SlidyPP {
      position: absolute;
      left: 0px;
      top: 0px;
      height: 100%;
      transition: 0.4s all;
      background: #8BC5E0;
      width: 0%; }
    .onePhasePr .HeadPP .infosPP {
      line-height: 40px;
      position: absolute;
      right: 10px;
      font-variant: small-caps;
      font-weight: 600; }

.ContentPP {
  display: none;
  padding: 7px;
  box-sizing: border-box;
  width: 80%;
  padding-left: 15px;
  box-sizing: border-box; }

.oneTachePP {
  width: 100%;
  height: auto;
  margin-bottom: 15px; }
  .oneTachePP.ToOpen:hover {
    cursor: pointer; }
  .oneTachePP .HeadTachePP {
    width: 100%;
    height: 30px;
    background: #E9E6E6;
    color: black;
    position: relative;
    overflow: hidden; }
    .oneTachePP .HeadTachePP.inWait i.icon-spinner {
      display: inline-block; }
    .oneTachePP .HeadTachePP i.icon-spinner {
      margin-left: 5px;
      animation: Spinner 0.8s infinite;
      display: none; }
    .oneTachePP .HeadTachePP .nameTP {
      line-height: 30px;
      position: absolute;
      z-index: 3;
      left: 10px;
      font-size: 16px;
      font-variant: small-caps;
      font-weight: 600; }
    .oneTachePP .HeadTachePP .SlidyTP {
      position: absolute;
      left: 0px;
      top: 0px;
      height: 100%;
      transition: 0.4s all;
      background: #FF9648;
      width: 0%; }
    .oneTachePP .HeadTachePP .infosTP {
      line-height: 30px;
      position: absolute;
      right: 10px;
      font-variant: small-caps;
      font-weight: 600; }
  .oneTachePP .ContentTP {
    display: none;
    padding: 7px;
    box-sizing: border-box;
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box; }

.oneTAP {
  margin-bottom: 15px;
  border-radius: 4px;
  box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
  padding: 5px;
  box-sizing: border-box; }
  .oneTAP .HeadTAP {
    font-weight: bold; }