@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,900&display=swap');


  body {
    font-weight: normal;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif !important;
    line-height: 20px !important;
  }

  .webix_view, .webix_el_box {
    font-family: 'DM Sans', sans-serif !important;
  }

  .webix_ss_header, .webix_ss_header TD, .webix_ss_vscroll_header, .webix_dd_drag_column {
    font-family: 'DM Sans', sans-serif !important;
  }
  
  h1, .h1 div {
    margin: 5px 10px;
    font-size: 32px !important;
    color: #0066ae !important;
    font-weight: bold;
  }

  h2, .h2 div {
    margin: 0px 10px;
    font-weight: bold;
    font-size: 20px !important;
  }

img {  
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
 }


  .bg_dark {
    background-color: #0066ae;
  }


  .topbar {
    background-color: #3D5470!important;
  }

  .profilBox {
    background-color: white !important;
    border-radius:100px !important;

  } 

  .profile-img {
    border-radius: 200px;
  }

  .nameProfile div {
    color: #151B48;
    font-size: 13.3px !important;
    font-style: normal;
    font-weight: bold;
    line-height: normal !important;
    text-transform: uppercase !important;
    letter-spacing: -0.3px;
    word-spacing: -0.7px;
  }

  .typeProfile div {
    color: rgba(41, 45, 50, 0.44);
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal !important;
  }

  .bntProfile button,  .bntProfile div {
    background-color: #FFF !important;
  }

  .bntProfile button:hover, .bntProfile button:focus, .bntProfile button:visited {
    background-color: #FFF !important;
  }

  .bntProfile .webix_icon {
    color: #292D32 !important;
  }
  
  .switchConvention {
    margin: 0px !important;
  }
  

  .switchConvention .webix_switch_box {

    
    margin-top: -21px;
    

    border-radius: 24px;
    background: #FFF;
    align-items: center;
    color: #151B48;
    font-family: DM Sans;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    height: 42px !important;
    border:0px;

    width: 100% !important;

  }

  .switchConvention .webix_switch_box.webix_switch_on .webix_switch_handle {
    margin-left: -4px;
    background: #3ABD9C;
  }

  .switchConvention.SM .webix_switch_box.webix_switch_on .webix_switch_handle {
    margin-left: 5Px;
}


  .switchConvention .webix_switch_box .webix_switch_handle {
    
    margin-left: 4px;
  }

  .switchConvention .webix_switch_handle {

    margin-top: 10px;

    background: rgba(50, 50, 58, 0.24);;
    
    border: 0px;
  }
  


  .switchConvention  .webix_switch_text {
    font-family: DM Sans;
    font-size: 12.3px !important;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    line-height: 36px;
  }

  .switchConvention .webix_switch_box .webix_switch_text {
    /*color:rgba(50, 50, 58, 0.24);*/
  }

  .switchConvention .webix_switch_box.webix_switch_on .webix_switch_text {
    color: #151B48;
  }
  

  .switchConvention .webix_el_box {
    padding: 0px;
    margin: 0px;
    overflow: initial;
  }


  .switchConvention.webix_disabled_view .webix_switch_text {
    color: #777 !important;
  }

  .switchConvention.webix_disabled_view .webix_switch_box.webix_switch_on .webix_switch_handle {
    background: #777 !important;
    /* margin-left: 0px; */
  }


  .switchConvention.login {
  }

  .switchConvention.login .webix_switch_on .webix_switch_handle {
    left: 130px !important;
  }


  img.homeImg {
    width: 100%;
  }



  /* TOP CSS margin left blocks */
  /*
  .banImg, .imgHome, .switchConvention, .profilBox {
    margin-right: 10px !important;
  }
  */
  /**/

  
  .footer {
    position:absolute;
    bottom:0;
    
  }
  

  .footer, .footer div {
    background: #32323A;
  }

  .textCopyright, .textCopyright div {
    font-size: 13px;
    color: #FFF;
  }

  .textDevelopedBy, .textDevelopedBy div {
    font-size: 12px;
    color: #FFF;
    /*text-transform: uppercase;*/
  }


  .footer a {
    color:#FFF;
    text-decoration: none;
  }

  .banImg img {
    margin-top: 10px;
    margin-left: 20px;
}

.noBorder {
    border-width: 0px !important;
}

.autoHeight {
  height: auto !important;
}

.overflowHide {
  overflow: hidden !important;
}

  .webix_sidebar_icon {
    color:#FFF !important;
  }



  .btnPrimary button {
    border-radius: 56px;
    background: #065E7C !important;
    box-shadow: 0px 3px 5px 0px rgba(74, 58, 255, 0.18);
    border: 0px !important;
    color: #FFF!important;
    text-align: center;
    font-family: DM Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .btnPrimary button:hover {
    background: #03536e !important;
  }

  .btnSuccess button {
    border-radius: 56px;
    background: #01A59E !important;
    box-shadow: 0px 3px 5px 0px rgba(74, 58, 255, 0.18);
    border: 0px !important;
    color: #FFF!important;
    text-align: center;
    font-family: DM Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }


  .btnSuccess button:hover {
    background: #008e87 !important;
  }



  .btnSecondary button {
    border-radius: 56px;
    background: #395464!important;
    box-shadow: 0px 3px 5px 0px rgba(74, 58, 255, 0.18);
    color: #FFF!important;

    border: 0px !important;
    text-align: center;
    font-family: DM Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

  }


  .btnSecondary button:hover {
    background: #2c4654!important;
  }


/*
----------
Login
----------
*/

.login-page{
  background-image: url('../images/bg-login.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bg-login {
  background-color: #01C9E1 !important;
}

.login-label div {
  color: #0F3951;
  font-family: DM Sans !important;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400;
  line-height: normal !important;
}
.forgetPass div {
  color: #065E7C;
    font-family: DM Sans !important;
    font-size: 13px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal !important;
}

.btnLogin button {
  border-radius: 56px !important;
  background: #01A59E !important;
  border: 0px !important;
  box-shadow: 0px 0px 8px 0px rgba(74, 58, 255, 0.18) !important;
  color: #FFF !important;
  text-align: center;
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.input-login input {
  border-radius: 46px !important;
  border: 1px solid var(--neutral-300, #EFF0F6) !important;
  background: var(--neutral-100, #FFF) !important;
  box-shadow: 0px 2px 6px 0px rgba(19, 18, 66, 0.07) !important;
  
 

}

.input-login input::placeholder {
  color: #808080;

  font-family: DM Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


.FormLogin {
  /*margin-top:50px !important;*/
  border-radius: 50px;
  background-color: #ffffff;
}

.welcomeText div {
  color: #0F3951;
  font-family: 'DM Sans' !important;
  font-size: 15px !important;
  font-style: normal;
  font-weight: 400;
  line-height: normal !important;
}

.marqueText div {
  color: #1A5C7A;
    font-family: DM Sans !important;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 10px !important;
    text-transform: uppercase !important;
}

.clientText div {
  color: #8D8D8D;
  font-family: DM Sans !important;
  font-size: 13px !important;
  font-style: normal;
  font-weight: 400;
}

.createAccount div {
  color: #065E7C;
  font-family: DM Sans !important;
  font-size: 13px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 10px !important;
}


.segmlogin button.webix_segment_0 {
  border-radius: 33px 0px 0px 33px;
  background: #EBF0F3;
  color: #1A5C7A;
  font-size: 14px;
  border-width: 0px;
}

.segmlogin button.webix_segment_N {
  border-radius:  0px 33px 33px 0px;
  background: #EBF0F3;
  color: #1A5C7A;
  font-size: 14px;
  border-width: 0px;
}

.segmlogin .webix_selected {
  background: #1C5E7C !important;
  color: #fff !important;
}

/* Form Validate */

.webix_invalid .webix_el_box input, .webix_invalid .webix_custom_radio, .webix_invalid .webix_el_box .webix_inp_static, .webix_invalid .webix_el_box select, .webix_invalid .webix_el_box textarea, input.webix_invalid, select.webix_invalid, textarea.webix_invalid {
  background-color: #FFF !important;
  border-color: #ce6a6e !important;
  color:  #ce6a6e !important;
}



.webix_invalid .webix_el_box input::placeholder, .webix_invalid .webix_custom_radio::placeholder, .webix_invalid .webix_el_box .webix_inp_static::placeholder, .webix_invalid .webix_el_box select::placeholder, .webix_invalid .webix_el_box textarea::placeholder, input.webix_invalid::placeholder, select.webix_invalid::placeholder, textarea.webix_invalid::placeholder {
  background-color: #FFF !important;
  border-color: #ce6a6e !important;
  color:  #ce6a6e !important;
}

/* END FORM VALIDATE */



/* Tableau de bord */

.bg-logo {
  background-color: #EFF3F6 !important;
  background: #EFF3F6 !important;
  /*background-image: url('../images/logobg.png');*/
  background-repeat: no-repeat;
  /**/background-size: contain;
  background-position: center;
}










/* Pager */
.webix_view .webix_pager_item_selected {
  background: #01c9e0 !important;
  font-weight: bold;
}

.webix_view .webix_pager_item {
  color: #00b3c7 !important;
  background: transparent;
  border: 0px;
  font-weight: bold;
}

.webix_view .webix_pager_item:hover {
  background: #F1F1F1 !important;
}



/*
------
DataTables
-------------
*/

.styleDT.webix_dtable {
  box-shadow: 0Px 0Px 3px #cecece;
  border-radius: 5px !important;
}

.styleDT .webix_hcell{
  background:#2A3441;
  color:white;
  font-weight:bold;
  border: 0px;

}
.styleDT .webix_column{
  background:#ffffff;
}
.styleDT .webix_column > div{
  border-color:#ddd;
}

.styleDT .webix_cell{
  color: #222 !important;
  padding: 0 5px;
}

.styleDT .webix_ss_header td.webix_last_row {
  border-bottom: 0px;
  border-color: #2A3441;
}

.styleDT .webix_ss_header .webix_hs_center {
  background:#2A3441;
}

.styleDT.webix_dtable .webix_ss_vscroll_header {
  border: 0px !important;
  background-color: #2A3441;
}


.styleDT .webix_ss_header, .styleDT .webix_ss_header TD, .styleDT .webix_ss_vscroll_header, .styleDT .webix_dd_drag_column {
  background: #2A3441;
  border:0px;
}

.styleDT.webix_dtable_focused .webix_column > div.webix_row_select,
.styleDT.webix_dtable_focused .webix_column > div.webix_column_select {
  background: #cad2db;
}

.webix_column > div.webix_cell_select, .webix_column > div.webix_column_select, .webix_column > div.webix_row_select {
  background: #cad2db;
}

.styleDT.webix_dtable .webix_select_mark > div.webix_row_select {
  box-shadow: inset 2px 0 #cad2db;
}


.styleDT.webix_dtable .webix_ss_right .webix_column.webix_first > div {
  border-left: 1px solid #dddddd !important;
}

.styleDT.webix_dtable .webix_ss_header td.webix_last_row {
  border-bottom: 0px;
}

.styleDT .webix_cell .icon {
  font-size: 20px;
  cursor: pointer;
}


.styleDT .webix_ss_sort_asc, .styleDT .webix_ss_sort_desc  {
  line-height: 24px;
}



.styleDT input[type=checkbox]{
  position: relative;
  cursor: pointer;
}
.styleDT input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 13px;
  height: 13px;
  top: -1px;
  left: 0px;
  border: 1px solid #9c9c9c;
  border-radius: 3px;
  background-color: white;
}
.styleDT input[type=checkbox]:checked:after {
  content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid #01aec5;
    border-width: 0px 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(
45deg
);
    position: absolute;
    top: -2px;
    left: 5px;
}

.webix_table_checkbox {
  color: #00aeef;
  font-size: 20px;
}

.webix_custom_checkbox {
  border: 1px solid #9c9c9c;
}

.checkboxCenter button.webix_custom_checkbox {
  margin: 0 auto !important;
  display: block !important;
  float: none !important;
}


.checkboxRight button.webix_custom_checkbox {
  display: block !important;
  float: right !important;
}

.styleDT .statut {
  background-color: transparent;
  border-radius: 10px;
  font-weight: bold;
  padding: 3px 8px;
}

.styleDT .encours {
  border:2px solid #f6378f;
  color:#f6378f;
}

.styleDT .cloture {
  border:2px solid #2a3441;
  color:#2a3441;
}



.simDT .webix_ss_header td {
  border-right: 1px solid #3e556f;
  border-bottom: 1px solid #3e556f;
}


.simDT .webix_ss_header, .simDT .webix_ss_header TD, .simDT .webix_ss_vscroll_header, .simDT .webix_dd_drag_column {
  font-size: 14px;
  color: #FFF;
  background: #3e556f;
}


.simDT.webix_dtable_focused .webix_column > div.webix_row_select, .simDT.webix_dtable_focused .webix_column > div.webix_column_select {
  background: #42bc9d !important;
}


.simDT .webix_column > div.webix_cell_select, .simDT .webix_column > div.webix_column_select, .simDT .webix_column > div.webix_row_select {
  background: #42bc9d !important;
}

.simDT .webix_column > div.webix_row_select {
  border-bottom: 1px solid #42bc9d;
}


.simDT .webix_vscroll_x {
  overflow-x: auto !important;
}

/*
Home page
*/

.ficheBTN button {
  background: url(../images/ficheVehicule.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 0px !important;
  padding: 0px !important;
  margin: 0px !important;
  border-radius: 50px  !important;

  color: #FFF;

  text-align: center;
  font-family: DM Sans;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;

 
}

.ficheBTN button:hover {
  font-size: 30px;
  transition-duration: 1s;
  transition-property:font-size;
}

.nouvelleBTN button:hover {
  font-size: 30px;
  transition-duration: 1s;
  transition-property:font-size;
}


.ficheBTN button img {
  border-radius: 100px !important;
    margin-right: 0px !important;
}


.ficheBTN.webix_disabled_view button {
  color: #07536D !important;

}

.nouvelleBTN button {
  background: url(../images/nouvelleSimul.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 0px !important;
  padding: 0px !important;
  margin: 0px !important;
  border-radius: 50px  !important;


  color: #FFF;
  text-align: center;
  font-family: DM Sans;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  padding: 20px;


  
}
.nouvelleBTN button img {
  border-radius: 100px !important;
    margin-right: 0px !important;
    width: 100%;
}


.welcomeTextHm div {
  color: #065E7C;
  font-family: DM Sans !important;
  font-size: 30px !important;
  font-style: normal;
  font-weight: 400;
}

.marqueTextHm div {
  color: #3ABD9C;
  font-family: DM Sans;
  font-size: 30px !important;
  font-style: normal;
  font-weight: 700;
  /* text-transform: uppercase !important; */
}




/************* STEPS ************/
.step button{
  border-radius: 100px;
  border-radius: 100px;
  background: #EFF0F6 !important;
  color: rgba(13, 102, 174, 0.35) !important;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;

}

.bg-step, .bg-step div{
  border-radius: 40px;
  background: #EFF0F6 !important;
}

.step.fill button {
  background:#3D5470 !important;
  color:#FFF !important;
}

.bg-step.fill, .bg-step.fill div{
  border-radius: 40px;
  background: #3D5470 !important;
}





/*********** SIMUL FORM **********/
.titleSimul div {
  color: #065E7C;
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;
  /* font-family: DM Sans !important; */
  font-size: 22px !important;
  font-style: normal;
  font-weight: 700;
  line-height: 26px !important;
}

.descSimul div {
  color: #395464;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: DM Sans;
    font-size: 13.5px !important;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    line-height: 14.564px !important;
}



.form-label div {

  color: #395464;
  font-family: DM Sans !important;
  font-size: 13.107px !important;
  font-style: normal;
  font-weight: 500;
  line-height: 24px !important; /* 111.111% */


}


.input-Text input {
  border-radius: 46px !important;
  border: 1px solid var(--neutral-300, #EFF0F6) !important;
  background: var(--neutral-100, #FFF) !important;
  box-shadow: 0px 2px 6px 0px rgba(19, 18, 66, 0.07) !important;
  
 
  color: #065E7C;

  text-align: right;
  font-family: DM Sans;
  font-size: 13.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 14.564px; /* 111.111% */


}

.input-Text input::placeholder {
  color: #808080;
  font-family: DM Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


.input-Text .webix_input_icon.wxi-menu-down {
  border: 0px !important;
  background: transparent;
}


.input-Text .wxi-menu-down:before {
  color: #292D32;
  margin-left: -5px !important;
}

.input-Text label.webix_inp_top_label {
    color: #395464;
    font-family: DM Sans !important;
    font-size: 13px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 18px !important;
}


label.webix_label_right {
  color: #151B48;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
}



.webix_custom_checkbox {
  height: 16px;
    width: 16px;
}

.webix_custom_checkbox:before {
  color: #3ABD9C;
  font-size: 18px;
  height: 18px;

}

.webix_custom_checkbox {
  border: 1px solid #D9DBE9;
  margin-right: 5px;
}


.webix_el_radio .webix_label_right {
  color: #151B48;
  font-size: 17px;
}

.webix_el_radio .webix_custom_radio {
  
  height: 18px;
  width: 18px;
  border: 1px solid #d9dbe9;
}

.webix_el_radio .webix_custom_radio:before {
 
  width: 10px;
  height: 10px;
  background-color: #3ABD9C;
}


.webix_radio_option {
  margin-right: 50px;
}


/* LIST */

.webix_list  .webix_list_item {
  border: 0px solid #FFF;
  padding: 2px 5px;
}

.webix_list  .webix_list_item.webix_selected {
  color: #ffffff;
  background: #3D5470;
}

.webix_view.webix_window.webix_popup {
  border-radius: 10px;
}


/************  List options *************/


.listOptions {
  border: 0px !important;

}

.listOptions .mcItem {
  margin-bottom: 10px;
}


.listOptions .webix_list_item  .mcItem {
  border-radius: 16px;
  border: 1px solid var(--neutral-300, #EFF0F6);
  background: var(--neutral-100, #FFF);

  /* Input/Default */
  box-shadow: 0px 2px 6px 0px rgba(19, 18, 66, 0.07);

  color: #151B48;
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; 

  padding: 12px !important;
  

}

.listOptions .webix_list_item{
  border:0px !important;
}

.listOptions .webix_list_item.webix_selected {
  background: #fff;
}

.listOptions .webix_list_item .imgOptions {
  /* background: url(../images/Ellipse.png) !important; */
  height: 26px;
  width: 25px;
  background-repeat: no-repeat !important;
  border: 0px !important;
  display: block;
  float: left;
  margin-right: 10px;
  
  border: none !important;
  outline: none !important;
}


.listOptions .webix_list_item.webix_selected .imgOptions {
  
  font-size: 24px;
  background-repeat: no-repeat !important;
  border: 0px !important;
}

.listOptions .webix_list_item .imgOptions:before {
  
  color: #d9dbe9;
  font-size: 24px;
}

.listOptions .webix_list_item.webix_selected .imgOptions:before {
  content: "\F43E";
  color: #3ABD9C;
  font-size: 24px;
}


.descTarif div {
  color: #065E7C;
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: DM Sans;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 30px !important;
}


.mtTarif div {
  color: #3D5470;
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: DM Sans;
  font-size: 32px!important;
  font-style: normal;
  font-weight: 700;
  line-height: 30px !important; /* 93.75% */
}



/********* PACKS *********/

.listPacks {
  border: 0px;
  width: fit-content !important;
  margin: 0px auto !important;
}

.listPacks .webix_dataview_item {
  border: 0px;
  padding: 0Px 10px;
  min-width: 240px;
}

.listPacks .boxPack {
  display: grid;
  grid-template-columns: 100%;
}


.listPacks  .webix_dataview_item.webix_selected {
  background: #FFF !important;
} 


.listPacks .boxPack .rectangle {
  
  width: 100%;
  height: 100%;
  margin-top: 5px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 2px solid #01A59E;
  box-shadow: 0px 4px 10px #1e245912, 0px 2px 11px #4440a30f;
}


.listPacks  .webix_selected .boxPack .rectangle  {
  border-radius: 16px;
  background: #01A59E;
  /* Input/Focus */
  box-shadow: 0px 4px 10px 0px rgba(31, 37, 89, 0.07), 0px 2px 11px 0px rgba(69, 65, 164, 0.06);


} 






.titlepAck {
  color: #065E7C;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;

/* Headings/Typography Size 3 */
font-family: DM Sans;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 30px; /* 145.833% */

margin-top: 15px;
margin-bottom: 15px;
}

.listPacks  .webix_selected .boxPack .rectangle .titlepAck  {
  color: #0F3951;
}


.textPrice {
  color: #3ABD9C;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;

/* Headings/Typography Size 3 */
font-family: DM Sans;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 30px; /* 145.833% */
}

.devisePrice {
  color: #3ABD9C;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: DM Sans;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 35px;
}


button.calculer {
  border-radius: 56px;
  background: #C2DEF4;
  border:0px;
  width: 160px;
  height: 32px;
  margin: 0 auto;
  display: block;
  color: #0D66AE;
  text-align: center;
  font-family: DM Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;

  cursor: pointer;


}

button.calculer:hover {
  background: rgb(147, 187, 219);
}

button.details {
  margin-top: 10px !important;
  border-radius: 50px;
  background: #EFF0F6;
  border:0px;
  width: 110px;
  height: 24px;
  margin: 0 auto;
  display: block;
  color: #0D66AE;
  text-align: center;
  font-family: DM Sans;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;

  cursor: pointer;
}

button.details:hover {
  background: #dee1ee;
}



.titreGaranties {
  color: #065E7C;
font-feature-settings: 'clig' off, 'liga' off;
font-family: DM Sans;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 11.764px; /* 84.025% */
text-align: center;
margin-top: 15px;
margin-bottom: 15Px;
}

.displayB {
  display: flow-root;
  width: 50%;
  margin: 0 auto;
  line-height: 20px;
}

.displayN {
  display: none;
}


.mtPeriode{
  color: #3ABD9C;
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: DM Sans;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 10px;
  margin-bottom: 20Px;
}


.dhs {
  text-align: center;
}




.gar {
  color: #065E7C;
font-feature-settings: 'clig' off, 'liga' off;
font-family: DM Sans;
font-size: 10.587px;
font-style: normal;
font-weight: 500;
line-height: 11.764px; /* 111.111% */
}


img.imgGar {
  float: right;
  width: 20Px;
  height: 20px;
}


.listPacks  .webix_selected .textPrice, .listPacks  .webix_selected .devisePrice, .listPacks  .webix_selected .mtPeriode {
  color: #FFF;
}

.listPacks  .webix_selected .titreGaranties {
  color: #FFF;
}

.listPacks  .webix_selected .gar {
  color: #FFF;
}


.listPacks .mdi-check-circle:before {
  content: "\F5E0";
  float: right;
  color: #3bba9e;
  font-size: 16px;
}

.listPacks .webix_selected .mdi-check-circle:before {
  color: #0F3951;
}


.garO:before {
  content: "\F5E0";
  float: right;
  color: #3bba9e;
  font-size: 16px;
}

.listPacks .webix_selected .garO:before {
  color: #0F3951;
}



.garN:before {
  content: "\F5E0";
  float: right;
  color: #D0D4FC;
  font-size: 16px;
}

.listPacks .webix_selected .garN:before {
  color: #D0D4FC;
}





/********** Modal *********/

.modalBox {
  border-radius: 24.758px;
  border: 0.728px solid var(--neutral-300, #EFF0F6);
  background: var(--neutral-100, #FFF);
  box-shadow: 0px 3.64093px 11.65097px 0px rgba(8, 15, 52, 0.06);
}

.modalBox .webix_scrollview {
  /* overflow-y: auto !important; */
}

.modalBox.loading {
  background: transparent;
    border: 0px;
    box-shadow: none !important;
}


img.load {
  border-radius: 80px;
}


.labelLeft, .labelLeft div {
  color: #395464;
font-feature-settings: 'clig' off, 'liga' off;
font-family: DM Sans;
font-size: 13.107px;
font-style: normal;
font-weight: 500;
line-height: 14.564px; /* 111.111% */
}

.labelRight, .labelRight div {
  color: #065E7C;
  text-align: right;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: DM Sans;
  font-size: 13.107px;
  font-style: normal;
  font-weight: 500;
  line-height: 14.564px; /* 111.111% */
}


.boxPrimeAn {
  border-radius: 24.758px;
  background: #CEDEEA;
  box-shadow: 0px 3.64093px 11.65097px 0px rgba(8, 15, 52, 0.06);
}


.boxPrimeAn .labelLeft, .boxPrimeAn .labelLeftB div {
  color: #065E7C;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: DM Sans;
  font-size: 14px!important;
  font-style: normal;
  font-weight: 700;
  line-height: 30px!important; 
}

.boxPrimeAn .labelRight, .boxPrimeAn .labelRightB div {
  color: #3D5470;
  text-align: right;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 20px !important;
  font-style: normal;
  font-weight: 700;
  line-height: 30px !important;
}


.boxPrimeAn .priceSM, .boxPrimeAn .priceSM div {
  color: #3D5470;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: DM Sans;
  font-size: 10px !important;
  font-style: normal;
  font-weight: 700;
  text-align: right !important;
  line-height: 2px !important;
}


.boxPrimeAn .labelLeftBG div {
  font-size: 20px!important;
  color: #065E7C;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: DM Sans;
  font-style: normal;
  font-weight: 700;
  line-height: 30px!important; 

}

.boxPrimeAn .labelRightBG div {
  font-size: 30px !important;
  color: #3D5470;
  text-align: right;
  font-feature-settings: 'clig' off, 'liga' off;
  font-style: normal;
  font-weight: 700;
  line-height: 30px !important;
}


.boxPrimeAn .priceSMG div {
  font-size: 32px !important;
  color: #3D5470;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: DM Sans;
  font-style: normal;
  font-weight: 700;
  text-align: right !important;
}



.listGarnties {
  border-width: 0px 0px !important;
  overflow-y: auto !important;
}

.listGarnties .gar {
  color: #395464;
font-feature-settings: 'clig' off, 'liga' off;
font-family: DM Sans;
font-size: 13.107px;
font-style: normal;
font-weight: 500;
line-height: 14.564px; /* 111.111% */
}

.listGarnties .imgGar {
  color: #3ABD9C;
    float: right;
    font-size: 20px;
}

.listGarnties .webix_dataview_item {
  border:0px solid #FFF !important;
  border-right-color: #FFF !important;
  border-width: 0px;
  float: inherit !important;
}



.listGarnties .actif0  .imgGar {
  color: #D0D4FC !important;
}



.titleSuccess, .titleSuccess div {
  color: #065E7C;
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;

  /* Headings/Typography Size 3 */
  font-family: DM Sans;
  font-size: 24px !important;
  font-style: normal;
  font-weight: 700;
  line-height: 35px; /* 145.833% */
}
.textSuccess, .textSuccess div {
  color: #395464;
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: DM Sans;
  font-size: 13.107px !important;
  font-style: normal;
  font-weight: 500;
  line-height: 15.6px; /* 119.017% */
}

/*
-----
FORM 
----------
*/

.webix_inp_label, .webix_inp_top_label, .webix_label_right {
  font-size: 13px;
  color:#0B4F86;
  font-weight: bold;
}

.btnSearch button {
  background-color: #01A59E !important;
  border-width: 0px !important;
  color:#FFF !important;
  border-radius: 6px;
  font-weight: bold;
  font-size: 13px;
}


input:read-only  {
  background-color: #fafafa;
}




/*
-----------
TOOLS
-----------
*/

.textUppercase, .textUppercase div {
  text-transform: uppercase !important;
}

.textCapitalize, .textCapitalize div {
  text-transform: capitalize !important;
}

.left{
  text-align: left !important;
}

.right{
  text-align: right !important;
}


.floatRight {
  float: right !important;
}

.ml1 {margin-left: 10px !important;}
.ml2 {margin-left: 20px !important;}
.ml3 {margin-left: 30px !important;}
.ml4 {margin-left: 40px !important;}
.ml5 {margin-left: 50px !important;}


.colorH1 {color: #136fb2 !important;}
.colorRose {color: #f6378f !important;}
.colorTxt {color: #2a3441 !important;}

.Bold {font-weight: bold !important;}
.fontNormal {font-weight: normal !important;}

.borderLeft {border-left: 1px solid #ddd !important;}
.borderRight {border-right: 1px solid #ddd !important;}
.borderBottom {border-bottom: 1px solid #ddd !important;}

.noBg {
  background-color: transparent !important;
  background: transparent !important;
}
.noBorder {
  border-width: 0px !important;
}




.bg-light{
  background: #D9DBE9 !important;
}

.bg-white {
  background: #FFF !important;
}

.radius-bloc {
  border-radius: 20px !important;
}


.text-center, .text-center div {
  text-align: center !important;
}

.text-left, .text-left div {
  text-align: left !important;
}

.text-right, .text-right div {
  text-align: right !important;
}

.bloc-Initial {
  border-radius: 24.758px;
  border: 0.728px solid var(--neutral-300, #EFF0F6);
  background: var(--neutral-100, #FFF);
  box-shadow: 0px 3.64093px 11.65097px 0px rgba(8, 15, 52, 0.06);

}






.pointer {
  cursor: pointer !important;
}


.webix_view > .webix_disabled {
  background-color: #fff;
}




/* Spinner - Loading */
.loader {
  margin: 50px auto 0px auto;
  border: 10px solid #e4e8ea;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    width: 16px;
    height: 16px;
    -webkit-animation: spin 500ms linear infinite;
    animation: spin 500ms linear infinite;
  color:red !important;
}



/*
------------
Responsive
------------
*/

/*  Resonsive listPacks */
@media screen and (max-width: 1470px) {
  .listPacks .webix_dataview_item {
    width:33% !important;
    
  } 

  
}

@media screen and (max-width: 1110px) {
  .listPacks .webix_dataview_item {
     width:49% !important;
  } 

  .listPacks {
    font-size: 19px;
  }
}

@media screen and (max-width: 750px) {
  .listPacks .webix_dataview_item {
    width:99% !important;
  } 

  .listPacks {
    font-size: 17px;
  }

}

/*  End Resonsive listPacks */




/* OTHER RESPONSIVE */


@media screen and (max-width: 992px) {
  
  .FormLogin {
    margin-right: 0px !important;
  }

  .switchConvention .webix_switch_box.webix_switch_on .webix_switch_handle {
    margin-left: -4px;
}

  .switchConvention.SM .webix_switch_box {
    width: auto !important;
  }

  .ficheBTN button {
    font-size: 21px;
  }
  
  .ficheBTN button:hover {
    font-size: 22px !important;;
  }


  .nouvelleBTN button {
    font-size: 21px;
  }
  .nouvelleBTN button:hover {
    font-size: 22px !important;
  }


}


@media screen and (max-width: 728px) {
  .FormLogin {
    margin-right: 0px !important;
  }

  .lastBtnHome {
    display: none !important;
  }

  .banImg img {
    /* text-align: center !important; */
    margin: 10px auto !important;
    display: block;
  }


  .listPacks .webix_dataview_item {
    display: inline-table;
    /* width: 95% !important; */
  }


  .ficheBTN button {
    font-size: 16px;
  }
  
  .ficheBTN button:hover {
    font-size: 16.3px !important;;
  }


  .nouvelleBTN button {
    font-size: 16px;
  }
  .nouvelleBTN button:hover {
    font-size: 16.3px !important;
  }


  .boxPrimeAn .labelLeft, .boxPrimeAn .labelLeftB div {
    font-size:13.7px !important;
  }

  
}


@media screen and (max-width: 530px) {
  .FormLogin {
    margin-right: 0px !important;
  }
  

  .ficheBTN {
    margin:0px !important;
    padding:0px !important;
  }
  .lastBtnHm {
    display: none !important;
  }

  .ficheBTN button {
    font-size: 16px;
  }
  .nouvelleBTN button {
    font-size: 16px;
  }

  .ficheBTN button:hover  {
    font-size: 16px;
  }
  .nouvelleBTN button:hover  {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .FormLogin {
    margin-right: 0px !important;
    margin-left: 10px !important;
  }
  
  .ficheBTN button {
    font-size: 16px;
  }
  .nouvelleBTN button {
    font-size: 16px;
  }

  .ficheBTN button:hover {
    font-size: 16px;
  }
  .nouvelleBTN button:hover {
    font-size: 16px;
  }

 
}