.hebergementlms {


  .loader-container {
    width: 100%;
    height: 100vh;
    display: flex;
    //justify-content: center;
    align-items: center;
    left: -5%;
    position: fixed;
    z-index: 1;
    top: 0px;
    background: white;
    background-color: transparent;
  }

  .mysy_spinner {
    border-radius: 5px;
    border: 1px solid black;
    opacity: 100%;
  }

  .spinner {
    width: 20rem;
    height: 10rem;
    border: 8px solid;
    border-color: #3d5af1 transparent #3d5af1 transparent;
    border-radius: 50%;
    animation: spin-anim 1.2s linear infinite;
    background-color: red;
    color: black;
  }


  @media only screen and (max-width: 600px) {
    /*style smartphones et petites tablettes en portrait*/

    .okUpdateData {
      font-size: small;
      color: green;
      font-style: italic;
    }

    .koUpdateData {
      font-size: small;
      color: red;
      font-style: italic;
    }

    .div_row {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 100%;
      margin-bottom: 1rem;
    }

    .div_row_gauche {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 95%;
      border-radius: 0px;
      margin-bottom: 1rem;
    }

    .div_row_droite {
      float: right;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 95%;
      padding-left: 2%;
      border-radius: 0px;
    }

    .btn_modif {
      width: 10rem;
      background-color: #212121 !important;
      color: white;
    }

    .btn_enreg {
      width: 10rem;
      background-color: green !important;
      color: white;
    }

    .div_row_center {
      border-left: 0rem solid;
      border-width: 0rem;
      width: 80%;
      padding-left: 5px;
      border-radius: 0px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      margin-top: 2rem;
    }

    .btn_modif {
      background-color: #212121 !important;
      color: white;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 15rem;
      text-align: center;
      border: 1px solid #9cf;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .btn_enreg {
      background-color: green !important;
      color: white;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 15rem;
      text-align: center;
      border: 1px solid #9cf;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .preview_certif {
      display: block;
      width: 90%;
      height: 200px;
      border-radius: 1rem !important;
      margin-top: 1rem !important;
    }

    .preview_certif:hover {
      //transform: scale(1.8);
      //margin-left: 10rem;
    }

    .session_caract {
      width: 95%;
      padding: 5px;
      float: left;
      text-align: left;
      font-size: small;
    }

    .selectsession {
      width: 90%;
      height: 2rem;
      font-size: small;
    }


    .detail_class_submenu {
      background: #d8edfc;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 95%;
      text-align: center;
      border: 1px solid #9cf;
      color: #3b3e40;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .detail_class_submenu:hover:active,
    .detail_class_submenu:hover {
      background-color: #104277;
      color: white;
    }

    .detail_class_submenu:focus {
      //border: 3px dotted green;
      background-color: #104277;
      color: white;
    }

    .detail_class_submenu_data {
      width: 100%;
      background-color: #d8edfc;
      padding-left: 5px;
      text-align: left;
      padding: 0;
      border: 0px;
      color: #3b3e40;
      padding-left: 5px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      border-radius: 10px;
      border: 1px solid;
      display: block;
    }

  }

  @media only screen and (min-width: 601px) and (max-width: 991px) {
    /*style petites-moyennes tablettes */

    .okUpdateData {
      font-size: small;
      color: green;
      font-style: italic;
    }

    .koUpdateData {
      font-size: small;
      color: red;
      font-style: italic;
    }

    .div_row {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 100%;
      margin-bottom: 1rem;
    }

    .div_row_gauche {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 45%;
      border-radius: 0px;
    }

    .div_row_droite {
      border-left: 1rem solid;
      float: right;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 45%;
      padding-left: 2%;
      border-radius: 0px;
    }

    .btn_modif {
      width: 10rem;
      background-color: #212121 !important;
      color: white;
    }

    .btn_enreg {
      width: 10rem;
      background-color: green !important;
      color: white;
    }

    .div_row_center {
      border-left: 0rem solid;
      border-width: 0rem;
      width: 60%;
      padding-left: 5px;
      border-radius: 0px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      margin-top: 2rem;
    }

    .btn_modif {
      background-color: #212121 !important;
      color: white;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 15rem;
      text-align: center;
      border: 1px solid #9cf;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .btn_enreg {
      background-color: green !important;
      color: white;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 15rem;
      text-align: center;
      border: 1px solid #9cf;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .preview_certif {
      display: block;
      width: 90%;
      height: 200px;
      border-radius: 1rem !important;
      margin-top: 1rem !important;
    }

    .preview_certif:hover {
      transform: scale(1.1);
      //margin-left: 10rem;
    }

    .session_caract {
      width: 95%;
      padding: 5px;
      float: left;
      text-align: left;
      font-size: small;
    }

    .selectsession {
      width: 90%;
      height: 2rem;
      font-size: small;
    }


    .detail_class_submenu {
      background: #d8edfc;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 11rem;
      text-align: center;
      border: 1px solid #9cf;
      color: #3b3e40;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .detail_class_submenu:hover:active,
    .detail_class_submenu:hover {
      background-color: #104277;
      color: white;
    }

    .detail_class_submenu:focus {
      //border: 3px dotted green;
      background-color: #104277;
      color: white;
    }

    .detail_class_submenu_data {
      width: 100%;
      background-color: #d8edfc;
      padding-left: 5px;
      text-align: left;
      padding: 0;
      border: 0px;
      color: #3b3e40;
      padding-left: 5px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      border-radius: 10px;
      border: 1px solid;
      display: block;
    }

  }

  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .okUpdateData {
      font-size: small;
      color: green;
      font-style: italic;
    }

    .koUpdateData {
      font-size: small;
      color: red;
      font-style: italic;
    }

    .div_row {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 100%;
      margin-bottom: 1rem;
    }

    .div_row_gauche {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 45%;
      border-radius: 0px;
    }

    .div_row_droite {
      border-left: 1rem solid;
      float: right;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 45%;
      padding-left: 2%;
      border-radius: 0px;
    }

    .btn_modif {
      width: 10rem;
      background-color: #212121 !important;
      color: white;
    }

    .btn_enreg {
      width: 10rem;
      background-color: green !important;
      color: white;
    }

    .div_row_center {
      border-left: 0rem solid;
      border-width: 0rem;
      width: 50%;
      padding-left: 5px;
      border-radius: 0px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      margin-top: 2rem;
    }

  
    .btn_modif {
      background-color: #212121 !important;
      color: white;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 15rem;
      text-align: center;
      border: 1px solid #9cf;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .btn_enreg {
      background-color: green !important;
      color: white;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 15rem;
      text-align: center;
      border: 1px solid #9cf;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .preview_certif {
      display: block;
      width: 90%;
      height: 200px;
      border-radius: 1rem !important;
      margin-top: 1rem !important;
    }

    .preview_certif:hover {
      transform: scale(1.2);
      //margin-left: 10rem;
    }

    .session_caract {
      width: 95%;
      padding: 5px;
      float: left;
      text-align: left;
      font-size: small;
    }

    .selectsession {
      width: 90%;
      height: 2rem;
      font-size: small;
    }


    .detail_class_submenu {
      background: #d8edfc;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 11rem;
      text-align: center;
      border: 1px solid #9cf;
      color: #3b3e40;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .detail_class_submenu:hover:active,
    .detail_class_submenu:hover {
      background-color: #104277;
      color: white;
    }

    .detail_class_submenu:focus {
      //border: 3px dotted green;
      background-color: #104277;
      color: white;
    }

    .detail_class_submenu_data {
      width: 100%;
      background-color: #d8edfc;
      padding-left: 5px;
      text-align: left;
      padding: 0;
      border: 0px;
      color: #3b3e40;
      padding-left: 5px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      border-radius: 10px;
      border: 1px solid;
      display: block;
    }


  }

  @media only screen and (min-width: 1200px) {
    /*style grande tablettes & Pc portable */

    .okUpdateData {
      font-size: small;
      color: green;
      font-style: italic;
    }

    .koUpdateData {
      font-size: small;
      color: red;
      font-style: italic;
    }

    .div_row {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 100%;
      margin-bottom: 1rem;
    }

    .div_row_gauche {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 48%;
      border-radius: 0px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
    }

    .div_row_droite {
      border-left: 0rem solid;
      float: right;
      //border:0px solid black;
      border-width: 0rem;
      width: 48%;
      padding-left: 5px;
      border-radius: 0px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
    }

    .div_row_center {
      border-left: 0rem solid;
      border-width: 0rem;
      width: 50%;
      padding-left: 5px;
      border-radius: 0px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      margin-top: 2rem;
    }


    .btn_modif {
      background-color: #212121 !important;
      color: white;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 15rem;
      text-align: center;
      border: 1px solid #9cf;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .btn_enreg {
      background-color: green !important;
      color: white;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 15rem;
      text-align: center;
      border: 1px solid #9cf;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .preview_certif {
      display: block;
      width: 90%;
      height: 200px;
      border-radius: 1rem !important;
      margin-top: 1rem !important;
    }

    .preview_certif:hover {
      transform: scale(1.3);
      //margin-left: 10rem;
    }

    .session_caract {
      width: 45%;
      padding: 5px;
      float: left;
      text-align: left;
      font-size: small;
    }

    .selectsession {
      width: 90%;
      height: 2rem;
      font-size: small;
    }


    .detail_class_submenu {
      background: #d8edfc;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 11rem;
      text-align: center;
      border: 1px solid #9cf;
      color: #3b3e40;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
    }

    .detail_class_submenu:hover:active,
    .detail_class_submenu:hover {
      background-color: #104277;
      color: white;
    }

    .detail_class_submenu:focus {
      //border: 3px dotted green;
      background-color: #104277;
      color: white;
    }

    .detail_class_submenu_data {
      width: 95%;
      background-color: #d8edfc;
      padding-left: 5px;
      text-align: left;
      padding: 0;
      border: 0px;
      color: #3b3e40;
      padding-left: 5px;
      font-family: "verdana", "Quicksand", "Signika", sans-serif;
      font-size: small;
      border-radius: 10px;
      border: 1px solid;
      display: block;
    } 

  }

  .img_bg_file_css{
    width: 90%;
  }

  // End media

}