@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap");
/* Couleurs */
/* Typo */
/* animation left - Application - Bloc Info/Dekstop - Loupe/UserAdvanced */
.swing-in-left-fwd {
  -webkit-animation: swing-in-left-fwd 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: swing-in-left-fwd 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }

@-webkit-keyframes swing-in-left-fwd {
  0% {
    -webkit-transform: rotateY(100deg);
    transform: rotateY(100deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 0; }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1; } }

@keyframes swing-in-left-fwd {
  0% {
    -webkit-transform: rotateY(100deg);
    transform: rotateY(100deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 0; }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1; } }

/* animation left - Application - Bloc Info - Mobile/Tablette */
.swing-in-top-bck {
  -webkit-animation: swing-in-top-bck 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: swing-in-top-bck 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }

@-webkit-keyframes swing-in-top-bck {
  0% {
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0; }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1; } }

@keyframes swing-in-top-bck {
  0% {
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0; }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1; } }

.bounce-top {
  -webkit-animation: bounce-top 2s both;
  animation: bounce-top 2s both; }

/* ----------------------------------------------
 * Generated by Animista on 2023-3-7 10:24:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1; }
  24% {
    opacity: 1; }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1; } }

@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1; }
  24% {
    opacity: 1; }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1; } }

body {
  scroll-behavior: smooth;
  background-color: #F5F5F5;
  width: 100vw;
  height: 100vh;
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  display: flex;
  flex-direction: column; }
  body header {
    margin: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-basis: 8%; }
    body header .os_logo {
      width: 8rem; }
      @media screen and (min-width: 1280px) {
        body header .os_logo {
          width: 15rem; } }
    body header .homeImg {
      width: 2rem; }
      @media screen and (min-width: 1280px) {
        body header .homeImg {
          width: 3.5rem; } }
  body .appUser {
    display: flex;
    flex-basis: 92%; }
    body .appUser .appUserDashboard {
      background-color: #E9E7E7;
      border-radius: 1rem;
      margin: 2rem;
      margin-top: 0.5rem;
      padding: 1rem;
      width: 100vw; }
      body .appUser .appUserDashboard .appSearchContainer {
        font-size: 1rem;
        margin: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 90%; }
        @media screen and (min-width: 768px) {
          body .appUser .appUserDashboard .appSearchContainer {
            font-size: 1.2rem; } }
        @media screen and (min-width: 1280px) {
          body .appUser .appUserDashboard .appSearchContainer {
            font-size: 1.5rem; } }
        body .appUser .appUserDashboard .appSearchContainer p {
          margin: 0; }
      body .appUser .appUserDashboard .appGridContainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem; }
        @media screen and (min-width: 1280px) {
          body .appUser .appUserDashboard .appGridContainer {
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-gap: 1rem; } }
        body .appUser .appUserDashboard .appGridContainer .appInfo {
          grid-column: 1 / span 2;
          background-color: #D9D9D9;
          border-radius: 1rem;
          display: flex;
          flex-direction: column; }
          body .appUser .appUserDashboard .appGridContainer .appInfo .appHeadInfo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-basis: 20%;
            padding-bottom: 1rem; }
            body .appUser .appUserDashboard .appGridContainer .appInfo .appHeadInfo .crossImg {
              height: 1.5rem;
              padding-right: 0.6rem;
              cursor: pointer; }
            body .appUser .appUserDashboard .appGridContainer .appInfo .appHeadInfo .appLogo {
              padding: 1rem;
              height: 4rem; }
          body .appUser .appUserDashboard .appGridContainer .appInfo .allUserLogDekstop {
            flex-basis: 80%; }
            body .appUser .appUserDashboard .appGridContainer .appInfo .allUserLogDekstop table {
              margin: 0;
              padding: 0.5rem;
              width: 100%;
              table-layout: fixed;
              word-wrap: break-word; }
              body .appUser .appUserDashboard .appGridContainer .appInfo .allUserLogDekstop table tr th {
                text-align: center;
                height: 2rem;
                text-overflow: initial; }
                body .appUser .appUserDashboard .appGridContainer .appInfo .allUserLogDekstop table tr th div {
                  padding: 0 !important; }
              body .appUser .appUserDashboard .appGridContainer .appInfo .allUserLogDekstop table td {
                padding: 0.2rem;
                padding-top: 0.3rem;
                padding-bottom: 0.3rem;
                text-align: center; }
        body .appUser .appUserDashboard .appGridContainer .appGrid {
          height: 8rem;
          background-color: #D9D9D9;
          border-radius: 1rem;
          display: flex;
          align-items: center;
          cursor: pointer; }
          @media screen and (min-width: 768px) {
            body .appUser .appUserDashboard .appGridContainer .appGrid {
              height: 12rem; } }
          body .appUser .appUserDashboard .appGridContainer .appGrid .appGridBackground:hover {
            transform: scale(1.15); }
          body .appUser .appUserDashboard .appGridContainer .appGrid .appGridBackground {
            width: 100%;
            height: 100%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-origin: content-box;
            padding: 1rem; }
            @media screen and (min-width: 768px) {
              body .appUser .appUserDashboard .appGridContainer .appGrid .appGridBackground {
                padding: 2rem; } }
            @media screen and (min-width: 1280px) {
              body .appUser .appUserDashboard .appGridContainer .appGrid .appGridBackground {
                height: 15rem; } }
          body .appUser .appUserDashboard .appGridContainer .appGrid .appLogo {
            width: 80%; }
          body .appUser .appUserDashboard .appGridContainer .appGrid .crossImg {
            width: 1.5rem;
            padding-right: 0.6rem;
            cursor: pointer; }
    body .appUser .appUserDashboardInfo {
      background-color: #E9E7E7;
      border-radius: 1rem;
      margin: 2rem;
      margin-top: 0.5rem;
      padding: 1rem;
      width: 50vw; }
      body .appUser .appUserDashboardInfo .appHeadInfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 2rem; }
        body .appUser .appUserDashboardInfo .appHeadInfo .appLogo {
          height: 3rem; }
        body .appUser .appUserDashboardInfo .appHeadInfo .crossImg {
          height: 1.6rem;
          cursor: pointer; }
      body .appUser .appUserDashboardInfo table {
        margin: 0;
        padding: 0.5rem;
        width: 100%;
        table-layout: fixed;
        word-wrap: break-word; }
        body .appUser .appUserDashboardInfo table tr th {
          text-align: center;
          height: 2rem;
          text-overflow: initial; }
          body .appUser .appUserDashboardInfo table tr th div {
            padding: 0 !important; }
        body .appUser .appUserDashboardInfo table td {
          padding: 0.2rem;
          padding-top: 0.3rem;
          padding-bottom: 0.3rem;
          text-align: center; }

.none {
  display: none !important; }

.half_windows {
  width: 50vw !important; }

.borderActiveApp {
  border: 2px solid #B0FFDB; }