.displaypartnertrainingpagination {

  .tooltip_css {
    background: #81BC3A;
    z-index: 9999;
  }
 

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


  .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;
  }
 
  .css-qc6sy-singleValue {
    color: white !important;
  }

  .css-1s2u09g-control {
    background: #107758;
    font-weight: bold;
    letter-spacing: 2px;
    color: white !important;
    border-radius: 5px;
  }

  .css-19mk8g1-MuiInputBase-root-MuiFilledInput-root {
    line-height: 2rem !important;
    height: 2rem;
    border: 1px solid;
    border-radius: 5px;
    background: white;
  }

  .hr_break {
    border: 3px solid grey;
  }


  @media only screen and (max-width: 600px) {
    text-align: left;
    font-size: small !important;

    .datagridclass {
      font-size: x-small !important;
      padding: 5px !important;
      font-family: 'DM Sans';
    }

    .my_hr {
      margin: 0;
      color: inherit;
      background-color: currentColor;
      border: 0;
      opacity: 0.25;
      margin-bottom: 0.3rem;
      margin-top: 0.3rem;
    }

    .texte_area {
      width: 90% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    .texte_area_adress {
      width: 90% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    .texte_area_passwd {
      width: 90% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }
 
    /* input {
      font-size: small !important;
      padding-top: 0.2rem;
      padding-bottom: 0.2rem;
    }*/

    .titre1 {
      font-family: "DM Sans", "sans-serif";
      font-size: medium;
      text-align: center;
      margin-bottom: 0.8rem;
      color: white;
      cursor: default;
      font-style: italic;
      background-color: gray;
      font-weight: normal;
    }

    .big_hr {
      height: 0.2rem;
      border-width: 0;
      color: black;
    }

    .div_row2 {
      text-align: center;
      border-width: 0.01rem;
      margin-bottom: 0.1rem;
      margin-top: 0.3rem;
      border-radius: 1rem;
      font-size: small;
    }

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

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

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

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

    .parter_div_filtrer_center {
      cursor: pointer;
      border-width: 0.01rem;
      width: 50%;
      border-radius: 1rem;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      font-size: small;

    }

    .action_mass {
      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
      font-weight: 500;
      text-align: left;
      font-size: small;
      line-height: 1.75;
      letter-spacing: 0.02857em;
      text-transform: uppercase;
      min-width: 64px;
      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      color: #fff;
      background-color: #81bc3a;
      box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
        0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    }

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

    .parter_div_filtrer_row_droite {
      float: right;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 100%;
      border-radius: 1rem;
      margin-top: 0.5rem !important;
    }

    .parter_div_filtrer_row {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 100%;
      margin-bottom: 1rem;
      border-radius: 1rem;
      font-size: small !important;
    }

    .css-6j8wv5-Input {
      font-size: small !important;
    }

    .traitement_mass {
      margin-left: 0.5rem;
      margin-right: 1rem;
      text-align: left;
      float: left;
      font-size: small;
      padding-top: 0.5rem;
    }

    .tick_ok_ko {
      max-width: 6%;
      cursor: pointer;
      padding-top: 4px;
    }

    .myTextField {
      width: 90% !important;
    }

    .detail_training {
      border: none;
      margin-bottom: 1rem;
      height: fit-content;
      margin-left: auto;
      margin-right: auto;
    }

    .bton_rechercher {
      width: 100%;
      background: #81BC3A;
      padding: 0.3rem;
      border-radius: 5rem;
      font-size: small;
      text-align: left;
      border: solid 1px;
      height: 2.5rem;
      color: white;

    }

    .texte_area_filter {
      float: left;
      width: 100% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin-top: 0px !important;
      margin-bottom: 2px !important;
    }

    .texte_area_filter_value {
      float: left !important;
      width: 100% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;

    }


    .filter_bton_add {
      float: left;
      width: 40% !important;
      font-size: xx-large !important;
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;
      text-align: right;
      cursor: pointer;
    }


    .div_row {
      float: left;
      border-width: 0.01rem;
      width: 100%;

      border-radius: 1rem;
    }

    .div_row_gauche {
      float: left;
      width: 100%;
      border-radius: 1rem;
      text-align: left;
    }

    .div_row_droite {
      float: left;
      width: 100%;
      border-radius: 1rem;
      text-align: left;

    }

    .bton_suppr {
      background: transparent;
      color: red;
      border-radius: 5rem;
      font-size: small;
      text-align: center;
      height: 2.5rem;
      width: 100%;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 1rem !important;
    }

    .bton_enreg {
  font-family: DM sans;
      border-radius: 5rem;
      font-size: small;
      background: #81BC3A !important;
      text-align: center;
      height: 2.5rem;
      width: 100%;
      color: white;
      margin-bottom: 1rem !important;
    }

    .bton_edit {
      border-radius: 5rem;
      font-size: small;
      background: black !important;
      text-align: right;
      height: 2.5rem;
      width: 100%;
      color: white;
      margin-bottom: 1rem !important;
    }

    .bton_annule {
      border-radius: 5rem;
      font-size: small;
      background: lightgray !important;
      text-align: right;
      height: 2.5rem;
      width: 100%;
      color: black;
      margin-bottom: 1rem !important;
    }


    .css-1t10bd6-MuiFormControl-root-MuiTextField-root fieldset {
      border-color: transparent !important;
      border-radius: 20px !important;
    }

    .disabled_style {
      //background-color: #ECEFF1;
      font-size: small !important;
      color: black;
      width: 100% !important;
      height: 3.5rem !important;

      //border: none !important;
      border-radius: 5px;
      background: white;
      border: solid gainsboro 1px;

    }

    .training_caract {
      width: 100%;

      float: left;
    }

    .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input .Mui-disabled {
   font-family:'DM Sans','Sans-serif';
      font: inherit;
      letter-spacing: inherit;
      color: currentColor;
      border: 0;
      box-sizing: content-box;
      background: none;
      background-color: rgba(0, 0, 0, 0);
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      display: block;
      min-width: 0;
      width: 100%;
      -webkit-animation-name: mui-auto-fill-cancel;
      animation-name: mui-auto-fill-cancel;
      -webkit-animation-duration: 10ms;
      animation-duration: 10ms;
      height: 3rem !important;
      padding: 0 !important;
      padding-left: 5px !important;
    }

    .css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input {
      padding: 1px !important;
    }

    .block_en_mass {
      width: 100%;
      float: left;
      margin-bottom: 1rem;
    }

    .block_en_mass_select {
      width: 100%;
      float: left;
      margin-bottom: 1rem;
    }

    .block_en_mass_bton_action {
      width: 100%;
      float: left;
      margin-bottom: 1rem;
      padding-top: 0.5rem !important;
    }

    .import_excel{
      background: #d8edfc !important;
      min-width: 15rem;
      color: #3b3e40;
      width: auto;
      height: 2rem !important;
    }

    .detail_class_submenu {
      background: #d8edfc;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      width: 10.5rem;
      text-align: center;
      border: 1px solid #9cf;
      color: #3b3e40;
      font-family: "DM Sans", "sans-serif";
      font-size: small;
      letter-spacing: 0.1rem;
      font-weight: normal;
      width: 100%;
      height: 2rem !important;
    }

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

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

    .detail_class_submenu_data {
      width: 100%;
      min-height: 10rem;
      background-color: #d8edfc;
      padding-left: 5px;
      text-align: left;
      padding: 0;
      border: 0px;
      color: #3b3e40;
      padding-left: 5px;
      font-family: "DM Sans", "sans-serif";
      font-size: small;
      border-radius: 10px;
      border: 1px solid;
    }

    .icon_plus {
      width: 6%;
    }

    .session_data {
      float: left;
      width: 100%;
      box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .bton_add_session {
      background: #c8cfd5;
      color: black;
      width: 100%;
      height: 2rem !important;
    }

    .bton_add_session_long {
      background: #c8cfd5;
      color: black;
      width: 100%;
      height: 2rem !important;
      line-height: 0.9rem !important;
    }

    .icon_excel {
      width: 10%;
    }


    .block_groupe_class{
      width: 100%;
      float: right;
  
    }
  
    .block_groupe_class_text{
      font-family: "DM Sans", "sans-serif";
      width: 100%;
      float: left;
      text-align: left;
      padding-top: 15px;
    }
  
    .block_groupe_class_list{
      width: 100%;
      text-align: right;
      float: left;
  
    } 
  }

  @media only screen and (min-width: 601px) and (max-width: 991px) {
    text-align: left;
    font-size: medium !important;

    .datagridclass {
      font-size: small !important;
      padding: 5px !important;
      font-family: 'DM Sans';
    }

    .texte_area {
      width: 47% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    .texte_area_adress {
      width: 96% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    .texte_area_passwd {
      width: 95% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    /* input {
      font-size: small !important;
      padding-top: 0.2rem;
      padding-bottom: 0.2rem;
    }*/

    .titre1 {
      font-family: "DM Sans", "sans-serif";
      font-size: medium;
      text-align: center;
      margin-bottom: 0.8rem;
      color: white;
      cursor: default;
      font-style: italic;
      background-color: gray;
      font-weight: normal;
    }

    .big_hr {
      height: 0.2rem;
      border-width: 0;
      color: black;
    }

    .div_row2 {
      text-align: center;
      border-width: 0.01rem;
      margin-bottom: 0.1rem;
      margin-top: 1rem;
      border-radius: 1rem;
      font-size: small;
    }

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

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

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

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

    .parter_div_filtrer_center {
      cursor: pointer;
      border-width: 0.01rem;
      width: 50%;
      border-radius: 1rem;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      font-size: small;
      margin-bottom: 1rem;
    }

    .action_mass {
      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
      font-weight: 500;
      text-align: left;
      font-size: small;
      line-height: 1.75;
      letter-spacing: 0.02857em;
      text-transform: uppercase;
      min-width: 64px;
      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      color: #fff;
      background-color: #81bc3a;
      box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
        0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    }

    .parter_div_filtrer_row_gauche {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 48%;
      border-radius: 1rem;
    }

    .parter_div_filtrer_row_droite {
      float: right;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 48%;
      border-radius: 1rem;
    }

    .parter_div_filtrer_row {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 100%;
      margin-bottom: 1rem;
      border-radius: 1rem;
      font-size: small !important;
    }

    .css-6j8wv5-Input {
      font-size: small !important;
    }

    .css-1krn5vm-MuiFormControl-root-MuiTextField-root {
      //width: 90% !important;
    }

    .traitement_mass {
      margin-left: 0.5rem;
      margin-right: 1rem;
      text-align: left;
      float: left;
      font-size: small;
      padding-top: 0.5rem;
    }

    .tick_ok_ko {
      max-width: 6%;
      cursor: pointer;
      padding-top: 5px;
    }

    .myTextField {
      width: 15rem !important;
    }

    .detail_training {
      border: "1px solid black";
      margin-bottom: 1rem;
      height: fit-content;
    }

    .bton_rechercher {
      width: 30%;
      background: #81BC3A;
      padding: 0.3rem;
      border-radius: 5rem;
      font-size: small;
      text-align: left;
      border: solid 1px;
      height: 2.5rem;
      color: white;
      letter-spacing: 3px;
    }

    .texte_area_filter {
      float: left;
      width: 40% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;
    }

    .texte_area_filter_value {
      float: left !important;
      width: 40% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;

    }


    .filter_bton_add {
      float: left;
      width: 5% !important;
      font-size: large !important;
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;
      text-align: right;
      cursor: pointer;
      margin-top: 1rem !important;
    }


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

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

    .div_row_droite {
      float: right;
      //border:1px solid black;
      //border-width:0.01rem;
      width: 45%;
      border-radius: 1rem;
      text-align: right;
    }

    .bton_suppr {
      background: transparent;
      color: red;
      border-radius: 5rem;
      font-size: small;
      text-align: center;
      height: 2.5rem;
      width: 40%;
      margin-left: 10px;
      margin-right: 10px;
      min-width: 15rem;
    }

    .bton_enreg {
  font-family: DM sans;
      border-radius: 5rem;
      font-size: small;
      background: #81BC3A !important;
      text-align: center;
      height: 2.5rem;
      width: 40%;
      color: white;
      margin-left: 10px;
      margin-right: 10px;
      min-width: 15rem;
    }

    .bton_edit {
      border-radius: 5rem;
      font-size: small;
      background: black !important;
      text-align: right;
      height: 2.5rem;
      width: 40%;
      color: white;
      margin-left: 10px;
      margin-right: 10px;
      min-width: 15rem;
    }

    .bton_annule {
      border-radius: 5rem;
      font-size: small;
      background: lightgray !important;
      text-align: right;
      height: 2.5rem;
      width: 40%;
      color: black;
      margin-left: 10px;
      margin-right: 10px;
      min-width: 15rem;
    }


    .css-1t10bd6-MuiFormControl-root-MuiTextField-root fieldset {
      border-color: transparent !important;
      border-radius: 20px !important;
    }

    .disabled_style {
      //background-color: #ECEFF1;
      font-size: small !important;
      color: black;
      width: 90% !important;
      height: 3.5rem !important;
      margin: 5px !important;
      //border: none !important;
      border-radius: 5px;
      background: white;
      border: solid gainsboro 1px;
    }

    .training_caract {
      width: 30%;
      padding: 5px;
      float: left;
    }

    .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input .Mui-disabled {
   font-family:'DM Sans','Sans-serif';
      font: inherit;
      letter-spacing: inherit;
      color: currentColor;
      border: 0;
      box-sizing: content-box;
      background: none;
      background-color: rgba(0, 0, 0, 0);
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      display: block;
      min-width: 0;
      width: 100%;
      -webkit-animation-name: mui-auto-fill-cancel;
      animation-name: mui-auto-fill-cancel;
      -webkit-animation-duration: 10ms;
      animation-duration: 10ms;
      height: 3rem !important;
      padding: 0 !important;
      padding-left: 5px !important;
    }

    .css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input {
      padding: 1px !important;
    }

    .block_en_mass {
      width: 50%;
      float: left;
      margin-bottom: 1rem;
    }

    .block_en_mass_select {
      width: 45%;
      float: left;
      margin-bottom: 1rem;
    }

    .block_en_mass_bton_action {
      width: 45%;
      float: left;
      margin-bottom: 1rem;
      padding-top: 0.5rem !important;
    }

    .import_excel{
      background: #d8edfc !important;
      min-width: 15rem;
      color: #3b3e40;
      width: auto;
      height: 2rem !important;
    }

    .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: "DM Sans", "sans-serif";
      font-size: 11px;
      letter-spacing: 0.1rem;
      font-weight: normal;
      height: 2rem !important;
    }

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

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

    .detail_class_submenu_data {
      width: 100%;
      min-height: 10rem;
      background-color: #d8edfc;
      padding-left: 5px;
      text-align: left;
      padding: 0;
      border: 0px;
      color: #3b3e40;
      padding-left: 5px;
      font-family: "DM Sans", "sans-serif";
      font-size: small;
      border-radius: 10px;
      border: 1px solid;
    }

    .icon_plus {
      width: 6%;
    }

    .session_data {
      float: left;
      width: 100%;
      box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      margin-top: 10px;
      margin-bottom: 10px;

    }

    .bton_add_session {
      background: #c8cfd5;
      color: black;
      width: 80%;
      height: 2rem !important;
      text-align: left;
    }
    .bton_add_session_long {
      background: #c8cfd5;
      color: black;
      width: 80% ;
      height: 2rem !important;
      text-align: left;
      line-height: 0.9rem !important;
    }

    .icon_excel {
      width: 10%;
    }

    .block_groupe_class{
      width: 50%;
      float: right;
  
    }
  
    .block_groupe_class_text{
      font-family: "DM Sans", "sans-serif";
      width: 30%;
      float: left;
      text-align: left;
      padding-top: 15px;
    }
  
    .block_groupe_class_list{
      width: 69%;
      text-align: right;
      float: left;
  
    } 
  }

  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    text-align: left;
    font-size: larger !important;

    .datagridclass {
      font-size: small !important;
      padding: 5px !important;
      font-family: 'DM Sans';
    }

    .titre1 {
      font-family: "DM Sans", "sans-serif";
      font-size: medium;
      text-align: center;
      margin-bottom: 0.8rem;
      color: white;
      cursor: default;
      font-style: italic;
      background-color: gray;
      font-weight: normal;
    }

    .texte_area {
      width: 47% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    .texte_area_adress {
      width: 96% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    .texte_area_passwd {
      width: 95% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    /*
    input {
      font-size: small !important;
      padding-top: 0.2rem;
      padding-bottom: 0.2rem;
    }*/

    .big_hr {
      height: 0.2rem;
      border-width: 0;
      color: black;
    }

    .div_row2 {
      text-align: center;
      border-width: 0.01rem;
      margin-bottom: 0.1rem;
      margin-top: 1rem;
      border-radius: 1rem;
      font-size: small;
    }

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

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

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

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

    .parter_div_filtrer_center {
      cursor: pointer;
      border-width: 0.01rem;
      width: 50%;
      border-radius: 1rem;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      font-size: small;
      margin-bottom: 1rem;
    }

    .action_mass {
      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
      font-weight: 500;
      text-align: left;
      font-size: small;
      line-height: 1.75;
      letter-spacing: 0.02857em;
      text-transform: uppercase;
      min-width: 64px;
      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      color: #fff;
      background-color: #81bc3a;
      box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
        0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    }

    .parter_div_filtrer_row_gauche {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 48%;
      border-radius: 1rem;
    }

    .parter_div_filtrer_row_droite {
      float: right;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 48%;
      border-radius: 1rem;
    }

    .parter_div_filtrer_row {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 100%;
      margin-bottom: 1rem;
      border-radius: 1rem;
      font-size: small !important;
    }

    .css-6j8wv5-Input {
      font-size: small !important;
    }

    .css-1krn5vm-MuiFormControl-root-MuiTextField-root {
      //width: 90% !important;
    }

    .traitement_mass {
      margin-left: 0.5rem;
      margin-right: 1rem;
      text-align: left;
      float: left;
      font-size: small;
      padding-top: 0.5rem;
    }

    .tick_ok_ko {
      max-width: 6%;
      cursor: pointer;
      padding-top: 4px;
    }

    .myTextField {
      width: 20rem !important;
    }

    .detail_training {
      border: "1px solid black";
      margin-bottom: 1rem;
      height: fit-content;
    }

    .bton_rechercher {
      width: 20%;
      background: #81BC3A;
      padding: 0.3rem;
      border-radius: 5rem;
      font-size: small;
      text-align: left;
      border: solid 1px;
      height: 2.5rem;
      color: white;
      letter-spacing: 3px;
    }

    .texte_area_filter {
      float: left;
      width: 40% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;
    }

    .texte_area_filter_value {
      float: left !important;
      width: 40% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;

    }


    .filter_bton_add {
      float: left;
      width: 5% !important;
      font-size: x-large !important;
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;
      text-align: right;
      cursor: pointer;
      margin-top: 0.5rem !important;
    }


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

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

    .div_row_droite {
      float: right;
      //border:1px solid black;
      //border-width:0.01rem;
      width: 45%;
      border-radius: 1rem;
      text-align: right;
    }

    .bton_suppr {
      background: transparent;
      color: red;
      border-radius: 5rem;
      font-size: small;
      text-align: center;
      height: 2.5rem;
      width: 40%;
      margin-left: 10px;
      margin-right: 10px;
      min-width: 15rem;
    }

    .bton_enreg {
  font-family: DM sans;
      border-radius: 5rem;
      font-size: small;
      background: #81BC3A !important;
      text-align: center;
      height: 2.5rem;
      width: 40%;
      color: white;
      margin-left: 10px;
      margin-right: 10px;
      min-width: 15rem;
    }

    .bton_edit {
      border-radius: 5rem;
      font-size: small;
      background: black !important;
      text-align: right;
      height: 2.5rem;
      width: 40%;
      color: white;
      margin-left: 10px;
      margin-right: 10px;
      min-width: 15rem;
    }

    .bton_annule {
      border-radius: 5rem;
      font-size: small;
      background: lightgray !important;
      text-align: right;
      height: 2.5rem;
      width: 40%;
      color: black;
      margin-left: 10px;
      margin-right: 10px;
      min-width: 15rem;
    }


    .css-1t10bd6-MuiFormControl-root-MuiTextField-root fieldset {
      border-color: transparent !important;
      border-radius: 20px !important;
    }

    .disabled_style {
      //background-color: #ECEFF1;
      font-size: small !important;
      color: black;
      width: 90% !important;
      height: 3.5rem !important;
      margin: 5px !important;
      //border: none !important;
      border-radius: 5px;
      background: white;
      border: solid gainsboro 1px;
    }

    .training_caract {
      width: 30%;
      padding: 5px;
      float: left;
    }

    .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input .Mui-disabled {
   font-family:'DM Sans','Sans-serif';
      font: inherit;
      letter-spacing: inherit;
      color: currentColor;
      border: 0;
      box-sizing: content-box;
      background: none;
      background-color: rgba(0, 0, 0, 0);
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      display: block;
      min-width: 0;
      width: 100%;
      -webkit-animation-name: mui-auto-fill-cancel;
      animation-name: mui-auto-fill-cancel;
      -webkit-animation-duration: 10ms;
      animation-duration: 10ms;
      height: 3rem !important;
      padding: 0 !important;
      padding-left: 5px !important;
    }

    .css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input {
      padding: 1px !important;
    }

    .block_en_mass {
      width: 50%;
      float: left;
      margin-bottom: 1rem;
    }

    .block_en_mass_select {
      width: 45%;
      float: left;
      margin-bottom: 1rem;
    }

    .block_en_mass_bton_action {
      width: 45%;
      float: left;
      margin-bottom: 1rem;
      padding-top: 0.5rem !important;
    }

    .import_excel{
      background: #d8edfc !important;
      min-width: 15rem;
      color: #3b3e40;
      width: auto;
      height: 2rem !important;
    }

    .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: "DM Sans", "sans-serif";
      font-size: 11px;
      letter-spacing: 0.1rem;
      font-weight: normal;
      height: 2rem !important;
    }

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

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

    .detail_class_submenu_data {
      width: 100%;
      min-height: 10rem;
      background-color: #d8edfc;
      padding-left: 5px;
      text-align: left;
      padding: 0;
      border: 0px;
      color: #3b3e40;
      padding-left: 5px;
      font-family: "DM Sans", "sans-serif";
      font-size: small;
      border-radius: 10px;
      border: 1px solid;
    }

    .icon_plus {
      width: 8%;
    }

    .session_data {
      float: left;
      width: 100%;
      box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .bton_add_session {
      background: #c8cfd5;
      color: black;
      width: 45%;
      height: 2rem !important;
    } 
    .bton_add_session_long {
      background: #c8cfd5;
      color: black;
      width: 45% ;
      height: 2rem !important;
      line-height: 0.9rem !important;
    }
    .icon_excel {
      width: 10%;
    }

    .block_groupe_class{
      width: 50%;
      float: right;
  
    }
  
    .block_groupe_class_text{
      font-family: "DM Sans", "sans-serif";
      width: 45%;
      float: left;
      text-align: left;
      padding-top: 15px;
    }
  
    .block_groupe_class_list{
      width: 54%;
      text-align: right;
      float: left;
  
    } 
  }

  @media only screen and (min-width: 1200px) {
    text-align: left;
    font-size: larger !important;

    .datagridclass {
      font-size: small !important;
      padding: 5px !important;
      font-family: 'DM Sans';
    }

    .titre1 {
      font-family: "DM Sans", "sans-serif";
      font-size: medium;
      text-align: center;
      margin-bottom: 0.8rem;
      color: white;
      cursor: default;
      font-style: italic;
      background-color: gray;
      font-weight: normal;
    }

    .texte_area {
      width: 47% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    .texte_area_adress {
      width: 96% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    .texte_area_passwd {
      width: 95% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
    }

    /*
    input {
      font-size: medium !important;
      padding-top: 0.2rem;
      padding-bottom: 0.2rem;
    }*/

    .big_hr {
      height: 0.2rem;
      border-width: 0;
      color: black;
    }

    .div_row2 {
      text-align: center;
      border-width: 0.01rem;
      margin-bottom: 0.1rem;
      margin-top: 1rem;
      border-radius: 1rem;
      font-size: small;
    }

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

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

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

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

    .parter_div_filtrer_center {
      cursor: pointer;
      border-width: 0.01rem;
      width: 50%;
      border-radius: 1rem;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      font-size: small;
      margin-bottom: 1rem;
    }

    .action_mass {
      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
      font-weight: 500;
      text-align: left;
      font-size: small;
      line-height: 1.75;
      letter-spacing: 0.02857em;
      text-transform: uppercase;
      min-width: 64px;
      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      color: #fff;
      background-color: #81bc3a;
      box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
        0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    }

    .parter_div_filtrer_row_gauche {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 48%;
      border-radius: 1rem;
    }

    .parter_div_filtrer_row_droite {
      float: right;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 48%;
      border-radius: 1rem;
    }

    .parter_div_filtrer_row {
      float: left;
      //border:0px solid black;
      border-width: 0.01rem;
      width: 100%;
      margin-bottom: 1rem;
      border-radius: 1rem;
      font-size: small !important;
    }

    .css-6j8wv5-Input {
      font-size: small !important;
    }

    .css-1krn5vm-MuiFormControl-root-MuiTextField-root {
      //width: 90% !important;
    }

    .traitement_mass {
      margin-left: 0.5rem;
      margin-right: 1rem;
      text-align: left;
      float: left;
      font-size: small;
      padding-top: 0.5rem;
    }

    .tick_ok_ko {
      max-width: 4%;
      cursor: pointer;
      padding-top: 4px;
    }

    .myTextField {
      width: 20rem !important;
    }

    .detail_training {
      border: "1px solid black";
      margin-bottom: 1rem;
      height: fit-content;
    }

    .bton_rechercher {

      width: 20%;
      background: #81BC3A;
      padding: 0.3rem;
      border-radius: 5rem;
      font-size: small;
      text-align: left;
      border: solid 1px;
      height: 2.5rem;
      color: white;
      letter-spacing: 3px;
    }

    .texte_area_filter {
      float: left;
      width: 40% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;
    }

    .texte_area_filter_value {
      float: left !important;
      width: 40% !important;
      font-size: x-small !important;
      font-family: "DM Sans", "sans-serif";
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;

    }


    .filter_bton_add {
      float: left;
      width: 5% !important;
      font-size: xx-large !important;
      margin: 0.4rem !important;
      margin-top: 0px !important;
      margin-bottom: 2px !important;
      text-align: right;
      cursor: pointer;
    }


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

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

    .div_row_droite {
      float: right;
      //border:1px solid black;
      //border-width:0.01rem;
      width: 45%;
      border-radius: 1rem;
      text-align: right;
    }

    .bton_suppr {
      background: transparent;
      color: red;
      border-radius: 5rem;
      font-size: small;
      text-align: center;
      height: 2.5rem;
      width: 40%;
      margin-left: 10px;
      margin-right: 10px;
    }

    .bton_enreg {
  font-family: DM sans;
      border-radius: 5rem;
      font-size: small;
      background: #81BC3A !important;
      text-align: center;
      height: 2.5rem;
      width: 40%;
      color: white;
      margin-left: 10px;
      margin-right: 10px;
    }

    .bton_edit {
      border-radius: 5rem;
      font-size: small;
      background: black !important;
      text-align: right;
      height: 2.5rem;
      width: 40%;
      color: white;
      margin-left: 10px;
      margin-right: 10px;
    }

    .bton_annule {
      border-radius: 5rem;
      font-size: small;
      background: lightgray !important;
      text-align: right;
      height: 2.5rem;
      width: 40%;
      color: black;
      margin-left: 10px;
      margin-right: 10px;
    }


    .css-1t10bd6-MuiFormControl-root-MuiTextField-root fieldset {
      border-color: transparent !important;
      border-radius: 20px !important;
    }

    .disabled_style {
      //background-color: #ECEFF1;
      font-size: small !important;
      color: black;
      width: 90% !important;
      height: 3.5rem !important;
      margin: 5px !important;
      //border: none !important;
      border-radius: 5px;
      background: white;
      border: solid gainsboro 1px;
    }

    .training_caract {
      width: 30%;
      padding: 5px;
      float: left;
    }

    .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input .Mui-disabled {
   font-family:'DM Sans','Sans-serif';
      font: inherit;
      letter-spacing: inherit;
      color: currentColor;
      border: 0;
      box-sizing: content-box;
      background: none;
      background-color: rgba(0, 0, 0, 0);
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      display: block;
      min-width: 0;
      width: 100%;
      -webkit-animation-name: mui-auto-fill-cancel;
      animation-name: mui-auto-fill-cancel;
      -webkit-animation-duration: 10ms;
      animation-duration: 10ms;
      height: 3rem !important;
      padding: 0 !important;
      padding-left: 5px !important;
    }

    .css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input {
      padding: 1px !important;
    }

    .block_en_mass {
      width: 50%;
      float: left;
      margin-bottom: 1rem;
    }

    .block_en_mass_select {
      width: 45%;
      float: left;
      margin-bottom: 1rem;
    }

    .block_en_mass_bton_action {
      width: 45%;
      float: left;
      margin-bottom: 1rem;
      padding-top: 0.5rem !important;
    }


    .import_excel{
      background: #d8edfc !important;
      min-width: 15rem;
      color: #3b3e40;
      width: auto;
      height: 2rem !important;
    }

    .detail_class_submenu {
      background: #d8edfc;
      border-radius: 15px;
      margin-right: 1rem;
      padding: 0.3rem;
      margin-bottom: 0.5rem;
      min-width: 12rem;
      text-align: center;
      border: 1px solid #9cf;
      color: #3b3e40;
      font-family: "DM Sans", "sans-serif";
      font-size: 11px;
      letter-spacing: 0.1rem;
      font-weight: normal;
      height: 2em !important;
    }

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

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

    .detail_class_submenu_data {
      width: 100%;
      min-height: 10rem;
      background-color: #d8edfc;
      padding-left: 5px;
      text-align: left;
      padding: 0;
      border: 0px;
      color: #3b3e40;
      padding-left: 5px;
      font-family: "DM Sans", "sans-serif";
      font-size: small;
      border-radius: 10px;
      border: 1px solid;
    }

    .icon_plus {
      width: 8%;
    }

    .session_data {
      float: left;
      width: 100%;
      box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .bton_add_session {
      background: #c8cfd5;
      color: black;
      width: 20% ;
      height: 2rem !important;
    }

    .bton_add_session_long {
      background: #c8cfd5;
      color: black;
      width: 40% ;
      height: 2rem !important;
    }

    .icon_excel {
      width: 10%;
    }

    .block_groupe_class{
      width: 30%;
      float: right;
  
    }
  
    .block_groupe_class_text{
      font-family: "DM Sans", "sans-serif";
      width: 30%;
      float: left;
      text-align: left;
      padding-top: 15px;
    }
  
    .block_groupe_class_list{
      width: 65%;
      text-align: right;
      float: left;
  
    }
  }


  // end media
}