@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap");
@font-face {
  font-family: 'Futura-Book';
  src: url("../fonts/Futura-Book.eot");
  src: url("../fonts/Futura-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/Futura-Book.woff2") format("woff2"), url("../fonts/Futura-Book.woff") format("woff"), url("../fonts/Futura-Book.ttf") format("truetype"), url("../fonts/Futura-Book.svg#Futura-Book") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?dglz90");
  src: url("../fonts/icomoon.eot?dglz90#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?dglz90") format("truetype"), url("../fonts/icomoon.woff?dglz90") format("woff"), url("../fonts/icomoon.svg?dglz90#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-arrow:before {
  content: "\e900";
  color: #c99761; }

.icon-eyes:before {
  content: "\e901"; }

.icon-lock-open:before {
  content: "\e902"; }

.icon-profil:before {
  content: "\e903"; }

.icon-select:before {
  content: "\e904";
  color: #c99761; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

* {
  box-sizing: border-box; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.container {
  max-width: 1370px;
  padding: 0 15px;
  width: 100%;
  margin: 0 auto; }

.wrraper-login {
  height: 100vh;
  width: 100%;
  position: relative;
  background: url(../img/img-login.png) center center no-repeat;
  background-size: cover; }

.login-pg {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 700px;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  min-height: 340px;
  transform: translate(-50%, -50%);
  padding: 30px 50px; }

.welcome {
  color: #C99761;
  font-size: 30px;
  font-family: 'Futura-Book';
  text-align: center;
  letter-spacing: 10px;
  padding-bottom: 45px; }

.inner-login {
  display: flex;
  flex-wrap: wrap; }

.visu-login {
  width: 50%;
  padding-right: 50px; }
  .visu-login img {
    display: block;
    width: 100%; }
  .form-login .um-row._um_row_1 {
    margin-bottom: 5px !important;
  }
  .form-login .um-col-alt {
    margin: 0;
  }
  .form-login .um-col-alt-b {
    display: none;
  }
.form input[type="text"], .form input[type="password"],
.um .um-form input[type="text"], .um .um-form input[type="search"], .um .um-form input[type="tel"], .um .um-form input[type="number"], .um .um-form input[type="password"], .um .um-form textarea, .select2-container .select2-choice, .select2-container-multi .select2-choices {
  display: block;
  width: 100% !important;
  border: 1px solid #EDEDED !important;
  border-radius: 10px !important;
  background: #FAFAFA !important;
  padding: 0 20px !important;
  height: 50px !important;
  font-size: 14px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  color: #000 !important; }
  
  .form input[type="text"]:focus, .form input[type="password"]:focus {
    outline: none; }

.form input[type="submit"],
.um #um-submit-btn,
.um.um-login.um-logout .um-form li a {
  border: 0;
  background: none;
  color: #C99761;
  text-transform: uppercase !important;
  font-size: 18px;
  font-family: 'Futura-Book';
  display: inline-block !important;
  width: auto !important;
  min-width: auto !important;
  padding: 0 20px 0 0 !important;
  background: none !important;
  cursor: pointer; }

  .um.um-login.um-logout .um-form li a {
    padding: 10px 0 0 0 !important;
  }
  .um.um-login.um-logout .um-form li:first-child{
    float: left;
  }
  .um.um-login.um-logout .um-form li:last-child{
    float: right;
  }

  .um.um-login.um-logout .um-misc-with-img{
    display: none;
  }
.row-form {
  margin-bottom: 15px;
  position: relative; }
  .row-form .showpass {
    position: absolute;
    top: 20px;
    right: 15px;
    cursor: pointer;
    font-size: 13px; }

.row-action {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .row-action a {
    font-size: 12px;
    font-family: 'Nunito Sans', sans-serif;
    color: #000;
    text-decoration: none; }

.btn-action,
.um-col-alt .um-center {
  position: relative; }
  .um-col-alt .um-center input {
    padding-right: 23px; }
    .um-col-alt .um-center:after {
    content: "\e900";
    color: #c99761;
    font-family: 'icomoon' !important;
    pointer-events: none;
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%); }

    .um-col-alt {
      margin: 0;
      float: right;
    }
.form-login {
  width: 50%; }
  .label-connection {
    font-size: 16px;
    font-family: 'Nunito Sans', sans-serif;
    color: #000;
    display: flex;
    align-items: center;
    padding-bottom: 20px; }
    .label-connection span {
      margin-left: 20px;
      margin-right: 20px; }

.header-detail {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 50px; }

.logo img {
  display: block;
  max-width: 366px;
  width: 100%; }

.profil {
  display: flex;
  flex-direction: column; }
  .profil .welcome-profil {
    font-size: 14px;
    font-family: 'Nunito Sans', sans-serif;
    color: #000;
    padding-bottom: 10px; }
  .profil .name {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #C99761;
    font-family: 'Futura-Book'; }
    .profil .name .icon-profil {
      border: 1px solid #C99761;
      padding: 6px;
      margin-left: 20px;
      margin-right: 15px;
      font-size: 12px;
      color: #000; }
    .profil .name .icon-select {
      font-size: 10px; }

.solde-recharge {
  border-bottom: 1px solid #D9D9D9;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px; }
  .solde-recharge .solde {
    padding-bottom: 30px; }
    .solde-recharge .solde .label-solde {
      font-family: 'Nunito Sans', sans-serif;
      font-size: 16px;
      color: #000;
      padding-bottom: 20px; }
    .solde-recharge .solde .value-solde {
      display: flex;
      align-items: flex-end;
      color: #C99761;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 50px; }
      .solde-recharge .solde .value-solde span {
        color: #C99761;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 16px;
        margin-left: 20px;
        padding-bottom: 7px; }
  .solde-recharge .recharge {
    border-left: 1px solid #D9D9D9;
    padding-left: 35px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px; }
    .solde-recharge .recharge .label-recharge {
      font-family: 'Nunito Sans', sans-serif;
      font-size: 16px;
      color: #000;
      padding-bottom: 20px; }
    .solde-recharge .recharge .value-recharge {
      display: flex;
      align-items: flex-end;
      color: #C99761;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 30px; }
      .solde-recharge .recharge .value-recharge span {
        color: #C99761;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 14px;
        margin-left: 15px;
        padding-bottom: 4px; }
      .solde-recharge .recharge .value-recharge .date-recharge {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 14px;
        color: #000;
        margin-left: 18px;
        padding-bottom: 3px; }

.historique {
  padding-bottom: 40px;
  overflow: auto; }
  .historique .label-hisorique {
    padding-top: 55px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #000;
    padding-bottom: 30px;
    border-bottom: 1px solid #D9D9D9; }

.wrapper-hisposique {
  min-width: 800px; }

.item-facture:hover {
  background: #F9F4EF; }
  .item-facture:hover .info-facture .montant-link .link {
    background: #C99761;
    color: #fff; }
  .item-facture:hover .info-facture .montant-link .value-montant {
    background: #fff; }

.info-facture {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #D9D9D9;
  padding-top: 20px;
  padding-bottom: 20px; }
  .info-facture .nbr-facture {
    color: #141414;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px; }
  .info-facture .date-facture {
    color: #141414;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    display: flex;
    align-items: baseline span;
      align-items-font-size: 14px;
      align-items-margin-right: 10px; }
  .info-facture .montant-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 30px; }
    .info-facture .montant-link .montant {
      display: flex;
      align-items: center;
      padding-right: 60px;
      color: #141414;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 14px; }
    .info-facture .montant-link .value-montant {
      width: 152px;
      height: 40px;
      line-height: 40px;
      background: #F9F4EF;
      font-size: 20px;
      color: #C99761;
      text-align: right;
      font-family: 'Nunito Sans', sans-serif;
      padding-right: 20px;
      margin-left: 20px; }
      .info-facture .montant-link .value-montant span {
        font-size: 14px; }
    .info-facture .montant-link .link {
      border: 1px solid #C99761;
      width: 250px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #141414;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 14px;
      text-decoration: none; }

.infos-plus p {
  color: #141414;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px; }
  p.copyright {
    color: #141414;
  font-family: 'Nunito Sans', sans-serif;
  padding-bottom: 25px;
    font-size: 14px; }

.infos-plus ul {
  margin-bottom: 55px; }
  .infos-plus ul li {
    color: #141414;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    padding-left: 18px;
    position: relative;
    margin-bottom: 10px; }
    .infos-plus ul li a {
      color: #141414;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 16px;
      border-bottom: 2px solid #C99761;
      text-decoration: none; }
    .infos-plus ul li:before {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      background: #C99761; }

@media only screen and (max-width: 640px) {
  .header-detail, .solde-recharge {
    flex-direction: column; }
  .profil {
    padding-top: 30px; }
  .solde-recharge .recharge {
    padding-left: 0;
    border: 0; } }
    .profil{
      position: relative;
    }

    .profil .name{
      cursor: pointer;
    }
    .smenu{
      position: absolute;
      top: 60px;
      right: 0;
      width: 180px;
      background-color: #fff;
      box-shadow: 0 0 5px #dcdcdc;
      display:none;
    }
    .shownm{
      display: block;
    }
    .smenu a{
      display: block;
      color: #000;
      text-align: center;
      font-size: 14px;
      padding: 10px;
      border-bottom: 1px solid #dcdcdc;
      text-decoration: none;
      font-family: 'Nunito Sans', sans-serif;
    }
    .smenu a:hover{
      background-color: #dcdcdc;
    }
    .um-account *{
      font-family: 'Nunito Sans', sans-serif;
    }
    .um-page-account .page-header,
    .um-page-account .um-account-meta,
    .um-page-account .um-account-side li:nth-child(n+3){
      display: none !important;
    }

    .um-field{
      padding: 0 0 15px !important;
    }
    .detail .um-account .um-account-main div.um-account-heading{
      margin-bottom: 30px !important;
    }
    .um .um-tip:hover, .um .um-field-radio.active:not(.um-field-radio-state-disabled) i, .um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i, .um .um-member-name a:hover, .um .um-member-more a:hover, .um .um-member-less a:hover, .um .um-members-pagi a:hover, .um .um-cover-add:hover, .um .um-profile-subnav a.active, .um .um-item-meta a, .um-account-name a:hover, .um-account-nav a.current, .um-account-side li a.current span.um-account-icon, .um-account-side li a.current:hover span.um-account-icon, .um-dropdown li a:hover, i.um-active-color, span.um-active-color{
      color: #C99761 !important;
    }
    .um input[type="submit"].um-button, .um input[type="submit"].um-button:focus, .um a.um-button, .um a.um-button.um-disabled:hover, .um a.um-button.um-disabled:focus, .um a.um-button.um-disabled:active{
      background-color: #C99761 !important;
    }
    .date-facture > span {
      padding-right: 10px;
    }

    @media only screen and (max-width: 1023px) {
      .info-facture>div, 
      .info-facture{
        display: block !important;
      }
      .info-facture>div{
        padding-bottom: 20px;
      }
      .info-facture .montant-link .link{
        display: block;
        margin-top: 30px;
      }
      .infos-plus ul li{
        line-height: 24px;
      }
    }

    @media only screen and (max-width: 650px) {
      .inner-login {
        display: block;
      }
      .visu-login {
        width: 100%;
        padding-right: 0;
      }
      .form-login {
        width: 100%;
        padding-top: 30px;
      }
      .login-pg{
        height: auto;
        padding: 30px 40px;
      }
      .welcome {
        padding-bottom: 25px;
        letter-spacing: 5px;
        line-height: 40px;
      }
      .visu-login img {
        display: block;
        width: 100%;
        max-width: 210px;
        margin: 0 auto 10px;
      }
    }