header > div:first-child{
  min-width: 100%!important;
  margin-left: 0px!important;
  margin-right: 150px!important;
  }

  

/* #sp-top-bar{
  background: #3D80E4;
  height: 83px;
 
}
.logo{
  margin-left: 8vw!important;
}
.sp-megamenu-wrapper{

  width:100%
}
.sp-megamenu-wrapper >ul {
  float: left;
  width: 100%;

}
.home_menu_item{
  display: none!important;
}
#sp-header.header-sticky {
  background-color: #3D80E4!important;
}
#sp-header {
  background-color: #3D80E4!important;
}
#sp-header.header-sticky .sp-megamenu-parent > li > a {
  color:white!important;
}
#sp-menu > div {

  justify-content:left!important;
}
.img_login {
  padding: 4px!important;
}
.img_login {
  content:url('../images/img/avatar.svg');
 
}

.sp-megamenu-wrapper >ul li:last-child {
  float: right;

  padding-top: 2vh;
}
.sp-megamenu-parent > li.active:after {
  background-color: #ff5351;
  height: 6px;
}
.sp-megamenu-parent > li.active > a {
  text-shadow: none;
}
.liste_pays_validation >a:before  {
   
  content: url('../images/img/Nouvelle_Validation.svg');
  padding-right: 10px; 

}
.liste_devis >a:before  {
   
  content: url('../images/img/Devis.svg');
  padding-right: 10px; 
}
.liste_commandes >a:before  {
   
  content: url('../images/img/Commandes.svg');
  padding-right: 10px; 

}
.simulation >a:before  {
   
  content: url('../images/img/Simulation.svg');
  padding-right: 10px; 

}

.img_login {
  margin-left: auto;
  width: 40px;
  height: 40px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; 
  -webkit-border-radius: 50%;
          border-radius: 50%;
  border: 1px solid #fff;

}
.header-principal nav a img {
  margin-right: 1rem;
}
.header-principal nav a.actif::after, .header-principal nav a:hover::after, .header-principal nav a:focus::after {
  width: 100%;
} */
  /* FIN header */
/* custom menu end */
@media (max-width: 576px) {
  /* .container {
    width: 50%;
  } */
}
/* @media (min-width: 768px) {
  .container {
    width: 50%;
  }
}
@media (min-width: 992px) {
  .container {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 50%;
  }
} */
.form-horizontal .controls {
  margin: 0;
  text-align: center;
}
.central {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
/* sweet alertcustom begin */
.swal-wide{
  width:650px !important;
  font-size: 20px!important;
}
.swal2-icon.swal2-success .swal2-success-ring{
  border-color: #3D80E4!important;
  color: #3D80E4!important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
  background: #3D80E4!important;
}
.swal2-popup .swal2-modal .swal-wide .swal2-icon-success .swal2-show{
  font-size: 20px!important;
}

.swal2-styled.swal2-confirm {
  background: #3D80E4!important;
  color: #fff!important;
  font-weight: 500!important;
  font-size: 1.5rem!important;
  display: -webkit-box!important;
  display: -webkit-flex!important;
  display: -ms-flexbox!important;
  display: flex!important;
  -webkit-box-align: center!important;
  -webkit-align-items: center!important;
      -ms-flex-align: center!important;
          align-items: center!important;
  padding: 0 4rem!important;
  height: 45px!important;
  -webkit-border-radius: 23px!important;
          border-radius: 23px!important;
  -webkit-appearance: none!important;
  outline: none!important;
  cursor: pointer!important;
  text-shadow: 0 2px 44px 0 rgba(0, 0, 0, 0.24)!important;
  -webkit-transition: all 0.35s ease!important;
          transition: all 0.35s ease!important;
  border: none!important;
}
/* sweet alertcustom begin */
.label_file{
  cursor: pointer;
  color: blue;
  text-decoration: underline;
}

/* .text_trad {
  text-transform: lowercase;
}
.text_trad::first-letter {
  text-transform: uppercase;
}
.text_trad:nth-child(2){
  text-transform: uppercase!important;
} */
#section1{
    padding-left: 0px;
    padding-right: 0px;
}
#sp-main-body{
    padding-top: 0!important;
}
#sp-footer {
    background-color: #232e42;
    /* bottom: 0;
    width: 100%; */
    /* position: absolute; */
}
#sp-footer2 div:first-child{
  display: -webkit-inline-box;
}



/* .info_box{
    -webkit-box-shadow: -15px 14px 13px -13px rgba(212,223,255,1);
-moz-box-shadow: -15px 14px 13px -13px rgba(212,223,255,1);
box-shadow: -15px 14px 13px -13px rgba(212,223,255,1);
background-color: white;
padding: 3vh;
position: relative;
margin: auto ;
display: inline-block;
border-radius: 5px;
}
._left{
    margin: auto auto auto 0;
}
._right{
    margin: auto 0 auto auto;
}
.select_inge{
    width: 22vw!important;
    border-radius: 2vw!important;
}
#num_dossier{
    width: 22vw!important;
    border-radius: 2vw!important;
    height: 5vh;
}

._box_left{
    margin: auto auto auto 0;
}


._box_right{
    margin: auto 0 auto auto;
}

._table{
    background-color: white;
    padding: 1vh;
} */

/* roboto-regular - latin */
/* @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("../fonts/roboto-v20-latin-regular.woff") format("woff")
     */
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  /* } */
  /* roboto-500 - latin */
  /* @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"), url("../fonts/roboto-v20-latin-500.woff2") format("woff2"), url("../fonts/roboto-v20-latin-500.woff") format("woff")
     */
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  /* } */
  /* roboto-700 - latin */
  /* @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-v20-latin-700.woff2") format("woff2"), url("../fonts/roboto-v20-latin-700.woff") format("woff")
     */
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  /* } */
  /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
  /**
   * 1. Change the default font family in all browsers (opinionated).
   * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
   */
  html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%
    /* 2 */
  }
  
  /**
   * Remove the margin in all browsers (opinionated).
   */
  body {
    margin: 0;
  }
  
  /* HTML5 display definitions
     ========================================================================== */
  /**
   * Add the correct display in IE 9-.
   * 1. Add the correct display in Edge, IE, and Firefox.
   * 2. Add the correct display in IE.
   */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  main,
  menu,
  nav,
  section,
  summary {
    /* 1 */
    display: block;
  }
  
  /**
   * Add the correct display in IE 9-.
   */
  audio,
  canvas,
  progress,
  video {
    display: inline-block;
  }
  
  /**
   * Add the correct display in iOS 4-7.
   */
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Add the correct display in IE 10-.
   * 1. Add the correct display in IE.
   */
  template,
  [hidden] {
    display: none;
  }
  
  /* Links
     ========================================================================== */
  /**
   * 1. Remove the gray background on active links in IE 10.
   * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
   */
  a {
    background-color: transparent;
    /* 1 */
    -webkit-text-decoration-skip: objects
    /* 2 */
  }
  
  /**
   * Remove the outline on focused links when they are also active or hovered
   * in all browsers (opinionated).
   */
  a:active,
  a:hover {
    outline-width: 0;
  }
  
  /* Text-level semantics
     ========================================================================== */
  /**
   * 1. Remove the bottom border in Firefox 39-.
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted
    /* 2 */
  }
  
  /**
   * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
   */
  b,
  strong {
    font-weight: inherit;
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * Add the correct font style in Android 4.3-.
   */
  dfn {
    font-style: italic;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /**
   * Add the correct background and color in IE 9-.
   */
  mark {
    background-color: #ff0;
    color: #000;
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  /**
   * Remove the border on images inside links in IE 10-.
   */
  img {
    border-style: none;
  }
  
  /**
   * Hide the overflow in IE.
   */
  svg:not(:root) {
    overflow: hidden;
  }
  
  /* Grouping content
     ========================================================================== */
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  code,
  kbd,
  pre,
  samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em
    /* 2 */
  }
  
  /**
   * Add the correct margin in IE 8.
   */
  figure {
    margin: 1em 40px;
  }
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  hr {
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible
    /* 2 */
  }
  
  /* Forms
     ========================================================================== */
  /**
   * 1. Change font properties to `inherit` in all browsers (opinionated).
   * 2. Remove the margin in Firefox and Safari.
   */
  button,
  input,
  select,
  textarea {
    font: inherit;
    /* 1 */
    margin: 0
    /* 2 */
  }
  
  /**
   * Restore the font weight unset by the previous rule.
   */
  optgroup {
    font-weight: bold;
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  button,
  input {
    /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  button,
  select {
    /* 1 */
    text-transform: none;
  }
  
  /**
   * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
   *    controls in Android 4.
   * 2. Correct the inability to style clickable types in iOS and Safari.
   */
  button,
  html [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button
    /* 2 */
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Change the border, margin, and padding in all browsers (opinionated).
   */
  fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  legend {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal
    /* 1 */
  }
  
  /**
   * Remove the default vertical scrollbar in IE.
   */
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10-.
   * 2. Remove the padding in IE 10-.
   */
  [type="checkbox"],
  [type="radio"] {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 1 */
    padding: 0
    /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  [type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px
    /* 2 */
  }
  
  /**
   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
   */
  [type="search"]::-webkit-search-cancel-button,
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * Correct the text style of placeholders in Chrome, Edge, and Safari.
   */
  ::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit
    /* 2 */
  }
  
  /* ----------------------------- */
  /* ==Forms                       */
  /* ----------------------------- */
  /* thanks to HTML5boilerplate,
  * github.com/nathansmith/formalize and www.sitepen.com
  */
  /* forms items */
  form,
  fieldset {
    border: none;
  }
  
  input,
  button,
  select,
  label {
    font-family: inherit;
    font-size: inherit;
  }
  
  button,
  input,
  optgroup,
  select,
  textarea {
    color: #000;
  }
  
  label {
    vertical-align: middle;
    cursor: pointer;
  }
  
  legend {
    border: 0;
    white-space: normal;
  }
  
  textarea {
    min-height: 5em;
    vertical-align: top;
    font-family: inherit;
    font-size: inherit;
    resize: vertical;
  }
  
  select {
    -webkit-appearance: menulist-button;
  }
  
  /* if select styling bugs on WebKit */
  /* select { -webkit-appearance: none; } */
  /* 'x' appears on right of search input when text is entered. This removes it */
  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
    display: none;
  }
  
  ::-webkit-input-placeholder {
    color: #777;
  }
  
  input:-moz-placeholder,
  textarea:-moz-placeholder {
    color: #777;
  }
  
  input[type="button"]:focus,
  button:focus {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* unstyled forms */
  button.unstyled,
  input[type="button"].unstyled,
  input[type="submit"].unstyled,
  input[type="reset"].unstyled {
    padding: 0;
    border: none;
    line-height: 1;
    text-align: left;
    background: none;
    -webkit-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  button.unstyled:focus,
  input[type="button"].unstyled:focus,
  input[type="submit"].unstyled:focus,
  input[type="reset"].unstyled:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    outline: none;
  }
  
  /* ----------------------------- */
  /* ==Base (basic styles)         */
  /* ----------------------------- */
  /* switching to border-box model for all elements */
  html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  
  * {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
  }
  
  html {
    /* set base font-size to equiv "10px", which is adapted to rem unit */
    font-size: 62.5%;
    /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
    /* thanks to @guardian, @victorbritopro and @eQRoeil */
    font-size: calc(1em * 0.625);
  }
  
  body {
    font-size: 1.6rem;
    background-color: #F4F6FC;
    color: #000;
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-weight: 400;
    line-height: 1.5;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  
  a {
    color: #3D80E4;
  }
  
  ul,
  ol {
    padding-left: 2em;
  }
  
  img {
    vertical-align: middle;
  }
  
  blockquote,
  figure {
    margin-left: 0;
    margin-right: 0;
  }
  
  /* font-sizing for content */
  p,
  ul,
  label,
  textarea,
  caption {
    margin-top: 0.75em;
    margin-bottom: 0;
    line-height: 1.5;
  }
  caption {

    caption-side: top!important;
  }
  
  em {
    font-style: italic;
  }
  
  /* avoid margins on nested elements */
  li p,
  li ul,
  li ol {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  /* max values */
  img
  textarea,
  input {
    max-width: 100%;
  }
  
  img {
    height: auto;
  }
  
  a {
    -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
  }
  
  .txtcenter {
    text-align: center;
  }
  
  .typo1 {
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-weight: 400;
  }
  
  .typo2 {
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-weight: 500;
  }
  
  .typo3 {
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-weight: 700;
  }
  
  .flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  
  ul.unstyled {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  
  .man {
    margin: 0;
  }
  
  .txtleft {
    text-align: left;
  }
  
  .txtright {
    text-align: right;
  }
  
  .txtcenter {
    text-align: center;
  }
  
  .uppercase {
    text-transform: uppercase;
  }
  
  .color1 {
    color: #000;
  }
  
  .color2 {
    color: #fff;
  }
  
  .color3 {
    color: #3D80E4;
  }
  
  .color4 {
    color: #FF5351;
  }
  
  .color5 {
    color: #DCDCDC;
  }
  
  .color6 {
    color: #D8D8D8;
  }
  
  .color7 {
    color: #B8B8B8;
  }
  
  .color8 {
    color: #242E42;
  }
  
  .color9 {
    color: #BFC5D2;
  }
  
  .color10 {
    color: #32373C;
  }
  
  .color11 {
    color: #F4F6FC;
  }
  
  .color12 {
    color: #B5FFB7;
  }
  
  .color13 {
    color: #F5F5F5;
  }
  
  .color14 {
    color: #E43D3D;
  }
  
  .color15 {
    color: #FFE364;
  }
  
  .color16 {
    color: #2F6AC3;
  }
  
  .color17 {
    color: #1D2947;
  }
  
  .size12 {
    font-size: 1.2rem;
  }
  
  .size13 {
    font-size: 1.3rem;
  }
  
  .size14 {
    font-size: 1.4rem;
  }
  
  .size15 {
    font-size: 1.5rem;
  }
  
  .size20 {
    font-size: 2rem;
  }
  
  .size50 {
    font-size: 5rem;
  }
  

  /* Commun */
  /* .main-content {
    /* padding: 4.5rem 8rem 11.5rem; */
  /* } */ 
  /* .main-content h1 {
    line-height: 1.2;
    margin-bottom: 4.5rem;
  }
  .main-content h1.small-margin {
    margin-bottom: 0.6rem;
  } */
  
  .shadow {
    -webkit-box-shadow: 0 10px 20px 0 rgba(46, 91, 255, 0.07)!important;
            box-shadow: 0 10px 20px 0 rgba(46, 91, 255, 0.07)!important;
  }
  
  /* FIN Commun*/
  /* Recap */
  .infos-recap {
    margin-top: 1rem;
  }
  .infos-recap > div {
    width: calc(50% - 2rem);
    background: #fff;
    padding: 2.5rem 16rem 3.5rem 3rem;
    border: 1px solid rgba(46, 91, 255, 0.08);
    -webkit-border-radius: 0.4rem;
            border-radius: 0.4rem;
  }
  .infos-recap > div + div {
    margin-left: 4rem;
  }
  .infos-recap > div span {
    font-weight: 700;
  }
  .infos-recap > div p {
    margin: 0;
    line-height: 1.5;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .tableau-recapitulatif {
    margin-top: 4rem;
    padding: 3rem 3rem 0;
    background: #fff;
  }
  .tableau-recapitulatif.estimatif {
    margin-top: 1.5rem;
  }
  .tableau-recapitulatif caption {
    margin: 0;
    padding-bottom: 2.2rem;
    line-height: 1.2;
    border-bottom: 1px solid #D8D8D8;
  }
  .tableau-recapitulatif th {
    padding-top: 1.4rem;
    line-height: 1.666;
    font-weight: 400;
  }
  .tableau-recapitulatif th + th {
    padding-left: 1.3rem;
  }
  .tableau-recapitulatif td {
    height: 20px;
    border-left: 1px solid #D8D8D8;
    padding-left: 1.3rem;
  }
  .tableau-recapitulatif td.empty {
    border-left: 1px solid #fff;
  }
  .tableau-recapitulatif tbody tr {
    border-top: 0.7rem solid #fff;
  }
  .tableau-recapitulatif tbody tr + tr {
    border-top: 1rem solid #fff;
  }
  .tableau-recapitulatif p {
    margin-top: 1.2rem;
    line-height: 2.3;
  }
  
  .prix-final {
    padding: 4rem 3rem 3.5rem;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid #D8D8D8;
  }
  .prix-final p {
    line-height: 1.2;
  }
  
  .tools {
    padding-top: 4rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .tools .cta + a {
    margin-left: 2rem;
  }
  .tools .cta + a + a {
    margin-left: 3rem;
  }
  .tools a {
    -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
  }
  .tools a:hover, .tools a:focus {
    color: #2F6AC3;
  }
  .tools span + a {
    margin-left: 2rem;
  }
  .tools span + a + a {
    margin-left: 2rem;
  }

  .cta {
    background: #3D80E4;
    color: #fff;
    font-weight: 500;
    font-size: 1.5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 4rem;
    height: 45px;
    -webkit-border-radius: 23px;
            border-radius: 23px;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    text-shadow: 0 2px 44px 0 rgba(0, 0, 0, 0.24);
    -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
    border: none;
  }
  .cta:hover, .cta:focus, .cta:active {
    outline: none;
    background: #2F6AC3;
  }
  
  /* FIN Recap*/
  /* Devis */
  .tableau-devis {
    -webkit-border-radius: 0.4rem;
            border-radius: 0.4rem;
    background: #fff;
    padding: 2rem 1.5rem;
  }
  .tableau-devis th, .tableau-devis td {
    width: 20%;
  }
  .tableau-devis th {
    height: 42px;
    padding-left: 2rem;
    vertical-align: top;
    font-weight: 400;
  }
  .tableau-devis th + th {
    border-left: 1px solid #D8D8D8;
  }
  .tableau-devis td {
    padding-left: 2rem;
    height: 30px;
  }
  .tableau-devis td + td {
    border-left: 1px solid #D8D8D8;
  }
  .tableau-devis tbody tr:hover, .tableau-devis tbody tr:focus {
    cursor: pointer;
  }
  .tableau-devis tbody tr:hover td, .tableau-devis tbody tr:focus td {
    color: #3D80E4;
  }
  .tableau-devis tbody tr:nth-child(odd) {
    background: #F5F5F5;
  }
  
  /* FIN Devis */
  /* Commandes */
  .tools-commandes {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .tools-commandes .retour {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
  }
  .tools-commandes .retour span {
    margin-right: 1rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 20px;
    height: 20px;
    background: #e6e7eb;
    -webkit-border-radius: 50%;
            border-radius: 50%;
  }
  .tools-commandes .retour + .cta {
    margin-left: auto;
  }
  .tools-commandes .retour svg {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .tools-commandes .retour polyline {
    stroke: #1D2947;
  }
  .tools-commandes .cta {
    min-width: 240px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .tools-commandes .cta + .cta {
    margin-left: 2rem;
  }
  
  .tableau-commandes {
    background: #fff;
    padding: 2rem 0 4rem;
    margin-top: 3.5rem;
  }
  .tableau-commandes tr.actif {
    background: rgba(61, 128, 228, 0.08);
  }
  .tableau-commandes tbody tr:hover, .tableau-commandes tbody tr:focus {
    cursor: pointer;
  }
  .tableau-commandes tbody tr:hover td, .tableau-commandes tbody tr:focus td {
    color: #3D80E4;
  }
  .tableau-commandes th, .tableau-commandes td {
    padding: 0 1.3rem 0 2rem;
    line-height: 1.333;
  }
  .tableau-commandes th:first-child, .tableau-commandes td:first-child {
    width: 120px;
    padding-left: 2.5rem;
  }
  .tableau-commandes th:nth-child(3), .tableau-commandes td:nth-child(3) {
    width: 240px;
  }
  .tableau-commandes th:nth-child(4), .tableau-commandes th:nth-child(4), .tableau-commandes td:nth-child(4), .tableau-commandes td:nth-child(5) {
    width: 160px;
  }
  .tableau-commandes th:nth-child(7), .tableau-commandes td:nth-child(6) {
    width: 95px;
  }
  .tableau-commandes th:nth-child(8), .tableau-commandes td:nth-child(8) {
    width: 80px;
  }
  .tableau-commandes th:nth-child(7), .tableau-commandes th:nth-child(8), .tableau-commandes td:nth-child(7), .tableau-commandes td:nth-child(8) {
    padding: 0 0.5rem;
  }
  .tableau-commandes th {
    height: 43px;
    vertical-align: top;
    font-weight: 400;
  }
  .tableau-commandes th + th {
    border-left: 1px solid #D8D8D8;
  }
  .tableau-commandes td {
    height: 30px;
    border-top: 1px solid #fff;
  }
  .tableau-commandes td + td {
    border-left: 1px solid #D8D8D8;
  }
  .tableau-commandes .valid span, .tableau-commandes .invalid span {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    display: block;
    margin: auto;
    position: relative;
  }
  .tableau-commandes .valid span::before, .tableau-commandes .valid span::after, .tableau-commandes .invalid span::before, .tableau-commandes .invalid span::after {
    content: '';
    position: absolute;
    height: 2px;
    background: #fff;
  }
  .tableau-commandes .valid span {
    background: #3D80E4;
  }
  .tableau-commandes .valid span::before {
    bottom: 9px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    left: 6px;
    width: 7px;
  }
  .tableau-commandes .valid span::after {
    bottom: 11px;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    right: 4px;
    width: 12px;
  }
  .tableau-commandes .invalid span {
    background: #E43D3D;
  }
  .tableau-commandes .invalid span::before, .tableau-commandes .invalid span::after {
    width: 14px;
    left: 6px;
  }
  .tableau-commandes .invalid span::before {
    top: 12px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .tableau-commandes .invalid span::after {
    bottom: 11px;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  
  /* FIN Commande */
  /* Layout */
  .layout {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    padding: 2rem;
  }
  .layout .close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: 0 0;
    -webkit-appearance: none;
    border: none;
    outline: none;
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
  }
  .layout .close::after, .layout .close::before {
    content: '';
    height: 2px;
    width: 44px;
    background: #fff;
    position: absolute;
    left: -5px;
    top: 15px;
  }
  .layout .close::before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .layout .close::after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .layout .box {
    padding: 5.5rem 4rem 4rem;
    border: 1px solid rgba(46, 91, 255, 0.08);
    -webkit-border-radius: 4px;
            border-radius: 4px;
    background-color: #fff;
    width: 560px;
    margin: auto;
  }
  .layout .box.box-fournisseurs {
    height: 600px;
    padding: 1rem 0.7rem 1rem 3rem;
  }
  .layout .box.box-fournisseurs.large {
    width: 840px;
  }
  .layout .box.box-fournisseurs.large td:nth-child(2), .layout .box.box-fournisseurs.large th:nth-child(2) {
    width: 360px;
  }
  .layout .box.box-fournisseurs > div {
    height: 100%;
  }
  .layout .box.box-fournisseurs h2 {
    line-height: 1.2;
    padding-top: 1rem;
    margin-bottom: 3rem;
  }
  .layout .box.box-fournisseurs th {
    height: 35px;
    font-weight: 400;
  }
  .layout .box.box-fournisseurs td {
    height: 30px;
    -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
  }
  .layout .box.box-fournisseurs td + td {
    font-weight: 400;
  }
  .layout .box.box-fournisseurs td:nth-child(1), .layout .box.box-fournisseurs th:nth-child(1) {
    width: 60px;
  }
  .layout .box.box-fournisseurs td:nth-child(2), .layout .box.box-fournisseurs th:nth-child(2) {
    width: 340px;
  }
  .layout .box.box-fournisseurs td:nth-child(2), .layout .box.box-fournisseurs td:nth-child(3), .layout .box.box-fournisseurs th:nth-child(2), .layout .box.box-fournisseurs th:nth-child(3) {
    padding-right: 2rem;
  }
  .layout .box.box-fournisseurs tbody tr:first-child td {
    border-top: 6px solid #fff;
    height: 36px;
  }
  .layout .box.box-fournisseurs tbody tr:hover, .layout .box.box-fournisseurs tbody tr:focus {
    cursor: pointer;
  }
  .layout .box.box-fournisseurs tbody tr:hover td, .layout .box.box-fournisseurs tbody tr:focus td {
    color: #3D80E4;
  }
  .layout .box.box-fournisseurs.zebra {
    padding: 1rem .7rem 1rem 1rem;
  }
  /* .layout .box.box-fournisseurs.zebra table {
    border-right: 18px solid #fff;
  } */
  .layout .box.box-fournisseurs.zebra .entete {
    padding: 1rem 3.3rem 3rem 1rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .layout .box.box-fournisseurs.zebra .entete a {
    margin-left: auto;
    -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
  }
  .layout .box.box-fournisseurs.zebra .entete a:hover, .layout .box.box-fournisseurs.zebra .entete a:focus {
    color: #2F6AC3;
  }
  .layout .box.box-fournisseurs.zebra .entete h2 {
    padding-right: 2rem;
    margin-bottom: 0;
    padding-top: 0;
  }
  .layout .box.box-fournisseurs.zebra td:nth-child(1), .layout .box.box-fournisseurs.zebra th:nth-child(1) {
    width: 70px;
    padding-left: 1rem;
  }
  .layout .box.box-fournisseurs.zebra td:nth-child(2), .layout .box.box-fournisseurs.zebra th:nth-child(2) {
    width: auto;
  }
  .layout .box.box-fournisseurs.zebra tbody tr:nth-child(odd) {
    background: #F5F5F5;
  }
  .layout .forme {
    width: 128px;
    height: 128px;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    border: 7px solid #000;
    margin: auto;
    position: relative;
  }
  .layout .forme.fail {
    border-color: #E43D3D;
  }
  .layout .forme.fail::before, .layout .forme.fail::after {
    width: 56px;
    background: #E43D3D;
    top: 53px;
    left: 29px;
  }
  .layout .forme.fail::before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .layout .forme.fail::after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .layout .forme.success {
    border-color: #3D80E4;
  }
  .layout .forme.success::before, .layout .forme.success::after {
    background: #3D80E4;
  }
  .layout .forme.success::before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    width: 38px;
    left: 22px;
    bottom: 43px;
  }
  .layout .forme.success::after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    width: 56px;
    right: 17px;
    bottom: 50px;
  }
  .layout .forme::before, .layout .forme::after {
    content: '';
    height: 8px;
    position: absolute;
    -webkit-border-radius: 4px;
            border-radius: 4px;
  }
  .layout .cta {
    width: 145px;
    margin: 3rem auto 0;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .layout h3, .layout p {
    max-width: 325px;
    margin-left: auto;
    margin-right: auto;
  }
  .layout h3 {
    line-height: 1.2;
    margin-top: 1.2rem;
  }
  .layout p {
    line-height: 1.42;
    margin-top: 0.5rem;
  }
  
  /* FIN Layout */
  /* Recherche */
  .encart-recherche {
    margin-top: 5rem;
    background: #fff;
    -webkit-border-radius: 4px;
            border-radius: 4px;
    padding: 4rem 3rem 4.5rem;
  }
  .encart-recherche > h3 {
    line-height: 1.2;
  }
  .encart-recherche > p {
    line-height: 1.333;
  }
  .encart-recherche fieldset {
    margin: 0;
    padding: 0;
  }
  .encart-recherche form {
    margin-top: 3rem;
  }
  .encart-recherche form p {
    margin-top: 1.2rem;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .encart-recherche ul {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .encart-recherche li {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .encart-recherche li + li {
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid #D8D8D8;
  }
  .encart-recherche input[type="radio"] {
    margin-right: 0.7rem;
  }
  .encart-recherche input[type="submit"] {
    width: 225px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .encart-recherche input[type="text"] {
    margin-right: 2.2rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 40px;
    border: 1px solid #DCDCDC;
    -webkit-border-radius: 20px;
            border-radius: 20px;
    background: #F4F6FC url("../images/img/loupe.svg") no-repeat calc(100% - 1.5rem) center;
    -webkit-background-size: 21px 20px;
            background-size: 21px 20px;
    color: #242E42;
    padding: 0 2rem;
    font-size: 1.4rem;
    outline: none;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .encart-recherche input[type="text"]:hover, .encart-recherche input[type="text"]:focus, .encart-recherche input[type="text"]:active {
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .encart-recherche label {
    margin: 0;
    line-height: 1.2;
  }
  
  .tools-recherche {
    margin-top: 6rem;
    padding-top: 4.5rem;
    padding-bottom: 4rem;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
  }
  
  /* FIN Recherche */
  /* Post form */
  .post-form {
    margin-top: 4rem;
  }
  .post-form.small-margin {
    margin-top: 2rem;
  }
  .post-form fieldset {
    -webkit-border-radius: 4px;
            border-radius: 4px;
    background-color: #fff;
    padding: 0;
    margin: 0 0 2rem;
    padding: 3.5rem 3rem;
  }
  .post-form fieldset.no-background {
    background: none;
    -webkit-border-radius: 0;
            border-radius: 0;
    padding: 3rem 0;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
  }
  .post-form fieldset.no-background > div > div {
    width: calc(50% - 2rem);
    margin-right: 4rem;
  }
  .post-form fieldset.no-background > div > div:nth-child(2n) {
    margin-right: 0;
  }
  .post-form fieldset.no-background > div > div:nth-child(n+3) {
    margin-top: 3rem;
  }
  .post-form fieldset.no-background > div > div > label {
    font-size: 2rem;
    font-weight: 400;
    margin: 0 0 1rem;
    color: #32373C;
    display: block;
  }
  .post-form fieldset.no-background ul {
    margin-top: 1.2rem;
  }
  .post-form fieldset.no-background ul label {
    margin-top: 0;
    margin-left: 0.7rem;
    line-height: 1.2;
    font-size: 1.5rem;
  }
  .post-form fieldset.no-background ul li {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .post-form fieldset.no-background ul li + li {
    margin-left: 4rem;
  }
  .post-form fieldset.no-background input[type="text"] {
    height: 40px;
    border: 1px solid #DCDCDC;
    -webkit-border-radius: 21.5px;
            border-radius: 21.5px;
    background-color: #fff;
    padding: 0 2.2rem;
    color: #242E42;
    font-size: 1.4rem;
    line-height: 1.14;
    width: 100%;
  }
  .post-form fieldset:first-of-type, .post-form fieldset:last-of-type {
    margin-bottom: 4rem;
  }
  .post-form .cta {
    width: 185px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .post-form .liste h2 {
    line-height: 1.2;
  }
  .post-form .liste > ul {
    margin-top: 2.2rem;
  }
  .post-form .liste > ul > li {
    width: 33.333%;
    /* padding: 0.8rem 0.9rem 0.8rem 0; */
    border-bottom: 1px solid #D8D8D8;
  }
  .post-form .liste > ul > li:nth-child(1), .post-form .liste > ul > li:nth-child(2), .post-form .liste > ul > li:nth-child(3) {
    border-top: 1px solid #D8D8D8;
  }
  .post-form .liste > ul > li > div {
    position: relative;
    height: 44px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding-left: 2rem;
  }
  /* .post-form .liste > ul > li > div::before {
    content: '';
    width: 1px;
    height: 20px;
    background: #D8D8D8;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  } */
  .post-form .liste > ul > li > div > label {
    margin-top: 0;
    margin-left: 0.7rem;
    /* line-height: 1.2; */
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
    height: 100%;
    line-height: 3em;
  }
  .post-form .liste > ul > li > div > label:hover, .post-form .liste > ul > li > div > label:focus {
    color: #3D80E4;
  }
  /* .post-form .liste > ul > li:nth-child(3n) > div::after {
    content: '';
    width: 1px;
    height: 20px;
    background: #D8D8D8;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  } */
  .post-form .liste > ul > li.disabled > div {
    background: #F5F5F5;
  }
  .post-form .liste > ul > li.disabled > div > label:hover, .post-form .liste > ul > li.disabled > div > label:focus {
    color: #242E42;
  }
  .post-form .liste > ul > li.disabled input, .post-form .liste > ul > li.disabled label {
    opacity: 0.3;
  }

  .post-form .liste > ul > li.disabled label {
    cursor: default;
  }
  .post-form .liste > ul > li.checked_verify > div {
    background: #FFE364;
  }
  .post-form .liste > ul > li.checked_valid {
    background: #B5FFB7;
  }
  .post-form .liste-agents h2 {
    line-height: 1.2;
  }
  .post-form .liste-agents > ul {
    margin-top: 2.2rem;
    padding-bottom: 1.4rem;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
  }
  .post-form .liste-agents > ul > li {
    width: 33.333%;
    padding-top: 1.4rem;
  }
  .post-form .liste-agents > ul > li > div > ul {
    border-left: 1px solid #D8D8D8;
    padding-left: 2rem;
    margin-top: 0.7rem;
  }
  .post-form .liste-agents > ul > li > div > ul > li {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .post-form .liste-agents > ul > li > div > ul > li + li {
    margin-top: 0.5rem;
  }
  .post-form .liste-agents label {
    margin-top: 0;
    margin-left: 0.7rem;
    line-height: 1.2;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .post-form .select-container {
    width: 100%;
    overflow: hidden;
    height: 40px;
    border: 1px solid #DCDCDC;
    -webkit-border-radius: 21.5px;
            border-radius: 21.5px;
    background: #fff url("../images/img/chevron-select.svg") no-repeat calc(100% - 2rem) center;
    padding: 0 1.9rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .post-form .select-container select {
    width: calc(100% + 20px);
    color: #242E42;
    font-size: 1.4rem;
    line-height: 1.14;
    -webkit-appearance: none;
    border: none;
    background: none;
    outline: none;
    padding: 0;
    -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
  }
  .post-form .select-container select:hover, .post-form .select-container select:focus {
    outline: none;
  }
  .post-form .select-container:hover select, .post-form .select-container:focus select {
    color: #3D80E4;
  }
  
  /* FIN post form */
  /* Footer */
  .footer-general {
    background: #242E42;
    height: 60px;
    margin-top: auto;
  }
  .footer-general ul {
    height: 60px;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .footer-general ul li + li {
    margin-left: 2.5rem;
  }
  
  /* FIN Footer */
  /*
  == malihu jquery custom scrollbar plugin ==
  Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
  */
  /*
  CONTENTS: 
    1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 
    2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 
    3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
    4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 
    5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 
    6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 
      6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
  */
  /* 
  ------------------------------------------------------------------------------------------------------------------------
  1. BASIC STYLE  
  ------------------------------------------------------------------------------------------------------------------------
  */
  .mCustomScrollbar {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom
    /* direct pointer events to js */
  }
  
  .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action {
    -ms-touch-action: auto;
    touch-action: auto;
  }
  
  .mCustomScrollBox {
    /* contains plugin's markup */
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
  }
  
  .mCSB_container {
    /* contains the original content */
    overflow: hidden;
    width: auto;
    height: auto;
  }
  
  /* 
  ------------------------------------------------------------------------------------------------------------------------
  2. VERTICAL SCROLLBAR 
  y-axis
  ------------------------------------------------------------------------------------------------------------------------
  */
  .mCSB_inside > .mCSB_container {
    margin-right: 0px;
  }
  
  .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
    margin-right: 0;
  }
  
  /* non-visible scrollbar */
  .mCS-dir-rtl > .mCSB_inside > .mCSB_container {
    /* RTL direction/left-side scrollbar */
    margin-right: 0;
    margin-left: 30px;
  }
  
  .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
    margin-left: 0;
  }
  
  /* RTL direction/left-side scrollbar */
  .mCSB_scrollTools {
    /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
    position: absolute;
    width: 7px;
    height: auto;
    left: auto;
    top: 0;
    right: 0;
    bottom: 0;
  }
  
  .mCSB_outside + .mCSB_scrollTools {
    right: -26px;
  }
  
  /* scrollbar position: outside */
  .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
  .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
    /* RTL direction/left-side scrollbar */
    right: auto;
    left: 0;
  }
  
  .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
    left: -26px;
  }
  
  /* RTL direction/left-side scrollbar (scrollbar position: outside) */
  .mCSB_scrollTools .mCSB_draggerContainer {
    /* contains the draggable element and dragger rail markup */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: auto;
  }
  
  .mCSB_scrollTools a + .mCSB_draggerContainer {
    margin: 20px 0;
  }
  
  .mCSB_scrollTools .mCSB_draggerRail {
    width: 2px;
    height: 100%;
    margin: 0 auto;
    -webkit-border-radius: 16px;
    border-radius: 16px;
  }
  
  .mCSB_scrollTools .mCSB_dragger {
    /* the draggable element */
    cursor: pointer;
    width: 100%;
    height: 30px;
    /* minimum dragger height */
    z-index: 1;
  }
  
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    /* the dragger element */
    position: relative;
    width: 7px;
    height: 100%;
    margin: 0 auto;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    text-align: center;
  }
  
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
    width: 12px
    /* auto-expanded scrollbar */
  }
  
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
    width: 8px
    /* auto-expanded scrollbar */
  }
  
  .mCSB_scrollTools .mCSB_buttonUp,
  .mCSB_scrollTools .mCSB_buttonDown {
    display: block;
    position: absolute;
    height: 20px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
  }
  
  .mCSB_scrollTools .mCSB_buttonDown {
    bottom: 0;
  }
  
  /* 
  ------------------------------------------------------------------------------------------------------------------------
  5. TRANSITIONS  
  ------------------------------------------------------------------------------------------------------------------------
  */
  .mCSB_scrollTools,
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCSB_scrollTools .mCSB_buttonUp,
  .mCSB_scrollTools .mCSB_buttonDown,
  .mCSB_scrollTools .mCSB_buttonLeft,
  .mCSB_scrollTools .mCSB_buttonRight {
    -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  }
  
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
  .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
  .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail {
    -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
    transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
  }
  
  /* 
  ------------------------------------------------------------------------------------------------------------------------
  6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS  
  ------------------------------------------------------------------------------------------------------------------------
  */
  /* 
  ----------------------------------------
  6.1 THEMES 
  ----------------------------------------
  */
  /* default theme ("light") */
  .mCSB_scrollTools {
    opacity: 0.75;
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)";
  }
  
  .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
  .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
    opacity: 0;
    filter: "alpha(opacity=0)";
    -ms-filter: "alpha(opacity=0)";
  }
  
  .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
  .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
  .mCustomScrollBox:hover > .mCSB_scrollTools,
  .mCustomScrollBox:hover ~ .mCSB_scrollTools,
  .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
  .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools {
    opacity: 1;
    filter: "alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)";
  }
  
  .mCSB_scrollTools .mCSB_draggerRail {
    background-color: #000;
    background-color: #FFF;
    filter: "alpha(opacity=40)";
    -ms-filter: "alpha(opacity=40)";
  }
  
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #d8d8d8;
  }
  
  .mCSB_scrollTools .mCSB_buttonUp,
  .mCSB_scrollTools .mCSB_buttonDown,
  .mCSB_scrollTools .mCSB_buttonLeft,
  .mCSB_scrollTools .mCSB_buttonRight {
    background-image: url(mCSB_buttons.png);
    /* css sprites */
    background-repeat: no-repeat;
    opacity: 0.4;
    filter: "alpha(opacity=40)";
    -ms-filter: "alpha(opacity=40)";
  }
  
  .mCSB_scrollTools .mCSB_buttonUp {
    background-position: 0 0;
  }
  
  .mCSB_scrollTools .mCSB_buttonDown {
    background-position: 0 -20px;
  }
  
  .mCSB_scrollTools .mCSB_buttonLeft {
    background-position: 0 -40px;
  }
  
  .mCSB_scrollTools .mCSB_buttonRight {
    background-position: 0 -56px;
  }
  
  .mCSB_scrollTools .mCSB_buttonUp:hover,
  .mCSB_scrollTools .mCSB_buttonDown:hover,
  .mCSB_scrollTools .mCSB_buttonLeft:hover,
  .mCSB_scrollTools .mCSB_buttonRight:hover {
    opacity: 0.75;
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)";
  }
  
  .mCSB_scrollTools .mCSB_buttonUp:active,
  .mCSB_scrollTools .mCSB_buttonDown:active,
  .mCSB_scrollTools .mCSB_buttonLeft:active,
  .mCSB_scrollTools .mCSB_buttonRight:active {
    opacity: 0.9;
    filter: "alpha(opacity=90)";
    -ms-filter: "alpha(opacity=90)";
  }