body {
  font-size: 1.2vw;
  position: relative;
  overflow-x: hidden; }

h2 {
  font-size: 4vw;
  margin: 1.5vw 0 !important;
  text-align: center;
  font-weight: lighter;
  color: #3D3D3D; }
  h2 > span {
    color: #19a699;
    background-color: #fff;
    padding: 0.5vw 1vw !important;
    border-radius: 15px; }

button {
  outline: none;
  font-size: 1.3vw;
  border: none;
  color: #3d3d3d;
  padding: 1vw !important;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  display: flex !important;
  align-items: center; }
  button > i {
    margin-right: 1vw; }

label, .checkbox {
  cursor: pointer; }

.hidden {
  display: none !important; }

i {
  font-size: 1.2vw; }

.checkbox > input {
  display: none; }

.checkbox > div {
  width: 1.8vw;
  height: .8vw;
  border-radius: 50px;
  background-color: lightgrey;
  position: relative;
  display: flex;
  align-items: center; }
  .checkbox > div > span {
    left: 0;
    position: absolute;
    border-radius: 100%;
    width: 1.35vw !important;
    height: 1.35vw !important;
    background-color: grey;
    transform: translateX(-50%);
    transition: left .2s; }

.checkbox > label {
  margin-left: 1vw; }

.checkbox > input:checked + div {
  background-color: #90c78d; }
  .checkbox > input:checked + div > span {
    background-color: #40ab39;
    left: 100%; }

.search {
  position: relative; }
  .search > input {
    border: none;
    outline: none;
    border-radius: 5px; }
    .search > input:focus {
      box-shadow: 0 0 15px silver; }
  .search > i {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%); }

.liste-checkbox {
  position: absolute;
  left: 2.5%;
  padding: .5vw;
  border-radius: 100%;
  border: 1px solid silver;
  color: gray;
  cursor: pointer; }

.checkbox-div > div.checkbox {
  width: 1vw;
  height: 1vw;
  border-radius: 100%;
  margin-right: .5vw;
  padding: .5vw;
  border: 1px solid silver; }
  .checkbox-div > div.checkbox > i {
    font-size: .9vw;
    color: silver; }

.checkbox-div.active {
  background-color: rgba(144, 199, 141, 0.5) !important;
  font-weight: bold; }
  .checkbox-div.active > div.checkbox {
    background-color: #fff;
    border-color: #90c78d; }
    .checkbox-div.active > div.checkbox > i {
      color: #90c78d; }

.nb-complete {
  color: #6fb66b; }

.tooltip {
  z-index: 100;
  font-size: .9vw;
  position: absolute;
  transition: transform .1s, opacity .1s;
  background-color: #3D3D3D;
  color: #fff;
  padding: .5vw;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  width: max-content; }
  .tooltip.show {
    opacity: 1;
    transform: translate(-50%, 35%); }

#tasks > #list > .task, #result > #by-task > div > .content > .task {
  display: flex;
  position: relative;
  background-color: #fff;
  padding: 0 1vw; }
  #tasks > #list > .task:not(:first-child), #result > #by-task > div > .content > .task:not(:first-child) {
    box-shadow: 0 1px 1px silver inset; }
  #tasks > #list > .task:last-child, #result > #by-task > div > .content > .task:last-child {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 5vw; }
  #tasks > #list > .task:nth-child(1), #result > #by-task > div > .content > .task:nth-child(1) {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px; }
  #tasks > #list > .task:hover, #result > #by-task > div > .content > .task:hover {
    background-color: #f5f5f5; }
  #tasks > #list > .task.selected, #result > #by-task > div > .content > .task.selected {
    box-shadow: 0 0 0 2px lightskyblue inset; }
  #tasks > #list > .task.focused, #result > #by-task > div > .content > .task.focused {
    background-color: #e4f4ff; }
  #tasks > #list > .task.no-attributions > .attributions, #result > #by-task > div > .content > .task.no-attributions > .attributions {
    opacity: .3; }
  #tasks > #list > .task > .content, #result > #by-task > div > .content > .task > .content {
    padding: 1vw 0;
    width: min-content;
    outline: none;
    margin-left: 1vw; }
    #tasks > #list > .task > .content.working, #result > #by-task > div > .content > .task > .content.working {
      margin-left: 4vw; }
  #tasks > #list > .task > .attributions, #result > #by-task > div > .content > .task > .attributions {
    width: 12%;
    margin: 0 .5vw;
    color: #3D3D3D; }
    #tasks > #list > .task > .attributions > i, #result > #by-task > div > .content > .task > .attributions > i {
      font-size: 1.5vw; }
    #tasks > #list > .task > .attributions > p, #result > #by-task > div > .content > .task > .attributions > p {
      text-align: center; }
  #tasks > #list > .task > span, #result > #by-task > div > .content > .task > span {
    font-size: 1vw;
    padding: .5vw;
    border-radius: 100%;
    width: 1vw;
    height: 1vw; }

#user-connect {
  position: absolute;
  top: 5vh;
  left: 5vw; }
  #user-connect > div > div {
    width: 5vw;
    height: 5vw;
    font-size: 2vw; }

.color-1 {
  background-color: indigo;
  color: #fff; }
  .color-1 + p > span {
    color: #2e004f;
    box-shadow: 0 0 0 2px rgba(75, 0, 130, 0.3); }

.color-2 {
  background-color: darkviolet;
  color: #fff; }
  .color-2 + p > span {
    color: #7000a0;
    box-shadow: 0 0 0 2px rgba(148, 0, 211, 0.3); }

.color-3 {
  background-color: darkcyan;
  color: #fff; }
  .color-3 + p > span {
    color: #005858;
    box-shadow: 0 0 0 2px rgba(0, 139, 139, 0.3); }

.color-4 {
  background-color: darkturquoise;
  color: #fff; }
  .color-4 + p > span {
    color: #009c9e;
    box-shadow: 0 0 0 2px rgba(0, 206, 209, 0.3); }

.color-5 {
  background-color: darkseagreen;
  color: #fff; }
  .color-5 + p > span {
    color: #6fa96f;
    box-shadow: 0 0 0 2px rgba(143, 188, 143, 0.3); }

.color-6 {
  background-color: burlywood;
  color: #fff; }
  .color-6 + p > span {
    color: #d3a05f;
    box-shadow: 0 0 0 2px rgba(222, 184, 135, 0.3); }

.color-7 {
  background-color: mediumaquamarine;
  color: #fff; }
  .color-7 + p > span {
    color: #40c095;
    box-shadow: 0 0 0 2px rgba(102, 205, 170, 0.3); }

.color-8 {
  background-color: mediumslateblue;
  color: #fff; }
  .color-8 + p > span {
    color: #533ae9;
    box-shadow: 0 0 0 2px rgba(123, 104, 238, 0.3); }

.infos-user {
  font-size: 1vw;
  padding: .5vw;
  border-radius: 100%;
  width: 1vw;
  height: 1vw;
  font-weight: normal !important; }

#user-connect > div > div, #login > div > div {
  border-radius: 100%; }

#container {
  min-width: 50vh; }
  #container.login > article:not(#login), #container:not(.login) > #login {
    display: none; }
  #container #login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    #container #login > .user {
      padding: 1vw;
      padding-bottom: 6vw;
      margin: 0 .5vw;
      width: 8vw;
      border-radius: 10px;
      cursor: pointer;
      overflow: hidden;
      transition: background-color .1s, transform .3s, width 0.2s, padding .2s, margin .2s, opacity .1s; }
      #container #login > .user:hover, #container #login > .user.selected {
        background-color: #fff;
        transform: scale(1.2); }
      #container #login > .user.selected {
        margin-bottom: 5vw; }
      #container #login > .user.user-hidden {
        width: 0;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        opacity: 0; }
      #container #login > .user > div {
        width: 8vw;
        height: 8vw;
        font-size: 3.5vw; }
      #container #login > .user > p {
        font-size: 1.5vw;
        margin-top: 1vw;
        position: relative; }
        #container #login > .user > p > span {
          font-size: 2vw;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 120%);
          border-radius: 100%;
          background-color: #fff;
          width: 4vw;
          height: 4vw; }
    #container #login > #password {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 90%);
      opacity: 0; }
      #container #login > #password.show {
        opacity: 1; }
      #container #login > #password > input {
        padding: .8vw 1.5vw;
        font-size: 1.1vw;
        border: none;
        border-bottom: 2px solid #3D3D3D;
        color: #3D3D3D;
        background: #fff;
        outline: none; }
      #container #login > #password > div > span {
        cursor: pointer;
        margin: 2vw;
        border-radius: 100%;
        width: 6vw;
        height: 6vw;
        font-size: 2vw;
        background-color: #fff;
        color: #3D3D3D; }
  #container #menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity .1s;
    transform: translate(-50%, -50%); }
    #container #menu > aside {
      margin: 0 2vw; }
      #container #menu > aside > i {
        color: #3D3D3D;
        font-size: 4vw;
        padding: 4vw;
        background-color: #fff;
        border-radius: 100%;
        cursor: pointer;
        transition: background-color .1s, color .2s, box-shadow .5s; }
        #container #menu > aside > i:hover {
          background-color: rgba(89, 230, 217, 0.2);
          color: #19a699;
          box-shadow: 0 0 0 10px #fff; }
      #container #menu > aside > p {
        margin-top: 1.5vw;
        padding: .7vw;
        font-size: 1.3vw;
        background-color: #19a699;
        color: #fff;
        border-radius: 5px; }
  #container > #container-tasks {
    opacity: 0;
    margin-top: 2vw;
    pointer-events: none;
    width: 90vw;
    transition: opacity .1s, margin-top .3s; }
    #container > #container-tasks > #actions {
      margin-bottom: 2vw; }
      #container > #container-tasks > #actions > #back {
        margin-right: 2vw;
        background-color: lightgrey; }
      #container > #container-tasks > #actions > [id^=add-] {
        margin-right: 2vw;
        background-color: #40ab39;
        color: #fff; }
      #container > #container-tasks > #actions > #show-complete {
        background-color: #fff;
        padding: 1vw;
        border-radius: 5px; }
      #container > #container-tasks > #actions > #search-task-pharma {
        margin-left: 1.5vw; }
        #container > #container-tasks > #actions > #search-task-pharma > input {
          padding: .8vw;
          padding-right: 2vw;
          font-size: 1.3vw; }
    #container > #container-tasks > #title {
      font-size: 1.5vw; }
      #container > #container-tasks > #title.show {
        margin-bottom: 2vw; }
    #container > #container-tasks > #tasks {
      width: 90vw;
      border-radius: 5px;
      overflow: hidden; }
      #container > #container-tasks > #tasks > #list {
        margin-right: 2vw;
        width: 52vw; }
        #container > #container-tasks > #tasks > #list > .task.complete:not(.focused) {
          background-color: #e1edef; }
          #container > #container-tasks > #tasks > #list > .task.complete:not(.focused) > .content, #container > #container-tasks > #tasks > #list > .task.complete:not(.focused) .attributions {
            opacity: .5; }
      #container > #container-tasks > #tasks > #attributions {
        height: 65vh;
        width: 35vw; }
        #container > #container-tasks > #tasks > #attributions.scrolling {
          top: 20%;
          position: fixed;
          right: 5.5%; }
        #container > #container-tasks > #tasks > #attributions.no-selection > #tools-attribution, #container > #container-tasks > #tasks > #attributions.no-selection #select-attributions {
          display: none; }
        #container > #container-tasks > #tasks > #attributions:not(.no-selection) > .no-selection {
          display: none; }
        #container > #container-tasks > #tasks > #attributions > .no-selection {
          width: 100%;
          text-align: center;
          padding-top: 1vw; }
        #container > #container-tasks > #tasks > #attributions > #tools-attribution > #search-pharma {
          width: 100%; }
          #container > #container-tasks > #tasks > #attributions > #tools-attribution > #search-pharma > input {
            padding: .7vw 1.2vw;
            padding-right: 2vw;
            font-size: 1.3vw; }
        #container > #container-tasks > #tasks > #attributions > #tools-attribution > span {
          margin: 0 1vw; }
        #container > #container-tasks > #tasks > #attributions > #tools-attribution > button {
          padding: 0.7vw !important;
          background-color: #40ab39;
          color: #fff; }
          #container > #container-tasks > #tasks > #attributions > #tools-attribution > button:first-of-type {
            margin-right: .5vw; }
          #container > #container-tasks > #tasks > #attributions > #tools-attribution > button:last-of-type > span:last-child {
            color: indianred;
            position: absolute; }
          #container > #container-tasks > #tasks > #attributions > #tools-attribution > button > span {
            font-size: 1.5vw; }
        #container > #container-tasks > #tasks > #attributions > #select-attributions {
          max-height: 55vh;
          overflow-y: auto;
          width: 100%;
          margin-top: 1vw;
          border-radius: 5px; }
          #container > #container-tasks > #tasks > #attributions > #select-attributions > .pharmacie {
            background-color: #fff;
            padding: .5vw;
            font-size: 1.1vw;
            opacity: .7;
            cursor: pointer; }
            #container > #container-tasks > #tasks > #attributions > #select-attributions > .pharmacie:hover, #container > #container-tasks > #tasks > #attributions > #select-attributions > .pharmacie.active, #container > #container-tasks > #tasks > #attributions > #select-attributions > .pharmacie.complete {
              opacity: 1; }
            #container > #container-tasks > #tasks > #attributions > #select-attributions > .pharmacie.complete {
              background-color: #d8e2d7 !important; }
              #container > #container-tasks > #tasks > #attributions > #select-attributions > .pharmacie.complete > div {
                background-color: #b1ceae !important;
                border-color: #b1ceae !important; }
                #container > #container-tasks > #tasks > #attributions > #select-attributions > .pharmacie.complete > div > i {
                  color: #45a542; }
    #container > #container-tasks > #select-pharma {
      overflow: hidden; }
      #container > #container-tasks > #select-pharma > #search > input {
        padding: 1vw 1.5vw;
        padding-right: 4vw;
        width: 35vw;
        font-size: 2vw;
        transition: box-shadow .3s;
        border: none;
        border-radius: 5px 5px 0 0;
        border-bottom: 3px solid #2c2c2c;
        background-color: #fefefe; }
      #container > #container-tasks > #select-pharma > #search > i {
        font-size: 1.8vw; }
      #container > #container-tasks > #select-pharma > #select-by > p {
        cursor: pointer;
        margin: 1vw .5vw;
        padding: 1.5vw 2vw;
        font-size: 1.5vw;
        border-radius: 5px; }
        #container > #container-tasks > #select-pharma > #select-by > p.active {
          font-weight: bold;
          background-color: #fff; }
      #container > #container-tasks > #select-pharma > #result {
        width: 45vw;
        margin-bottom: 5vw; }
        #container > #container-tasks > #select-pharma > #result:not(.by-pharmacie) > #by-pharmacie, #container > #container-tasks > #select-pharma > #result:not(.by-task) > #by-task {
          display: none; }
        #container > #container-tasks > #select-pharma > #result > div {
          width: 100%; }
        #container > #container-tasks > #select-pharma > #result > #by-task > .task {
          cursor: pointer; }
          #container > #container-tasks > #select-pharma > #result > #by-task > .task:hover {
            background-color: #cde4f3; }
        #container > #container-tasks > #select-pharma > #result > #by-pharmacie > div > .content > div {
          display: flex;
          padding: 1.5vw 2vw; }
          #container > #container-tasks > #select-pharma > #result > #by-pharmacie > div > .content > div > p {
            font-weight: bold;
            font-size: 1.5vw; }
          #container > #container-tasks > #select-pharma > #result > #by-pharmacie > div > .content > div > span {
            font-size: 1.2vw; }
        #container > #container-tasks > #select-pharma > #result > #by-task > .tasks-complete > .content > div > p {
          font-size: 1vw; }
        #container > #container-tasks > #select-pharma > #result > div > div > .title {
          margin: 2vw 0;
          font-size: 1.8vw; }
        #container > #container-tasks > #select-pharma > #result > div > div > .content {
          overflow: hidden;
          background-color: #fff;
          border-radius: 10px;
          width: 100%; }
          #container > #container-tasks > #select-pharma > #result > div > div > .content > div {
            margin-bottom: 0; }
            #container > #container-tasks > #select-pharma > #result > div > div > .content > div.empty {
              padding: 1.5vw 2vw; }
        #container > #container-tasks > #select-pharma > #result > div > .tasks-none > .content > div > p {
          opacity: .5;
          font-size: 1.3vw; }
        #container > #container-tasks > #select-pharma > #result > div > div:not(.tasks-none) > .content > div:not(.empty) {
          cursor: pointer; }
          #container > #container-tasks > #select-pharma > #result > div > div:not(.tasks-none) > .content > div:not(.empty):hover {
            background-color: #cde4f3; }
    #container > #container-tasks.completeTasks > #actions > #add-task, #container > #container-tasks.completeTasks > #actions #add-group {
      display: none !important; }
    #container > #container-tasks.completeTasks > #tasks {
      justify-content: center; }
      #container > #container-tasks.completeTasks > #tasks > #attributions {
        display: none; }
      #container > #container-tasks.completeTasks > #tasks > #list > .task > .editable {
        pointer-events: none; }
    #container > #container-tasks:not(.completeTasks) > #actions > #search-task-pharma {
      display: none; }
  #container.show-tasks > #menu, #container.show-search > #menu {
    opacity: 0;
    pointer-events: none; }
  #container.show-tasks > #container-tasks, #container.show-search > #container-tasks {
    z-index: 100;
    opacity: 1;
    pointer-events: all; }
  #container:not(.show-tasks) #tasks, #container:not(.show-search) #select-pharma {
    display: none; }
  #container:not(.show-tasks) #actions > #add-task, #container:not(.show-tasks) #actions #add-group, #container:not(.show-tasks) #actions > #show-complete {
    display: none !important; }

#modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 100;
  box-shadow: 0 0 10px silver;
  border-radius: 5px;
  overflow: hidden;
  min-height: 20vh; }
  #modal:not(.show) {
    opacity: 0;
    pointer-events: none; }
  #modal > div {
    padding: .5vw 1vw;
    font-size: 1vw !important; }
  #modal #modal-title, #modal #modal-buttons {
    background-color: #efefef; }
  #modal #modal-title > span {
    color: #3D3D3D;
    padding: .5vw;
    background-color: #e0e0e0;
    border-radius: 5px; }
  #modal #modal-buttons > button {
    font-size: 1vw !important;
    background-color: #e0e0e0;
    margin-right: .5vw;
    padding: 0.5vw 1vw !important; }