html,
body {
  height: 100%;
}

body {
  font-family: "Roboto", sans-serif;
}

button {
  outline: none;
}

.body-axium {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/header-bg.jpg);
  height: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

.sidebar-scroll {
  -webkit-overflow-scrolling: touch;
}

#map {
  height: 365px;
}

/********************
 * CHECKBOX
 ********************/

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.side-label {
  display: block;
  position: relative;
  margin: 10px 0;
  padding-left: 30px;
  cursor: pointer;
  line-height: 19px;
  color: #666;
  font-weight: normal;

}

.side-label::before,
.side-label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

input[type="radio"]+.side-label::before,
input[type="radio"]+.side-label::after {
  border-radius: 50%;
}

.side-label::before {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #666;
}

input:focus+.side-label::before {
  border-color: #4c70bc;
}

.side-label::after {
  display: none;
  width: 12px;
  height: 12px;
  margin: 4px;
  background-color: #4c70bc;
}

input:checked+.side-label::after {
  display: block;
}


/********************
 * LOADER
 ********************/
.loader {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1051;
}

.s2 {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: transparent;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
}

.s1 {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 50vh;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: transparent;
}

.bigcon {
  position: absolute;
  height: 95px;
  width: 95px;
  top: 50vh;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-45deg);
  background-color: transparent;
  animation: bigcon 2s infinite linear;
  animation-delay: 0.25s;
}

.b {
  border-radius: 50%;
  position: absolute;
}

.s {
  width: 25px;
  height: 25px;
  animation: small 2s infinite ease;
  box-shadow: 0px 2px rgba(0, 0, 0, 0.3);
  background-color: #0090ff;
}

.s:nth-child(1) {
  top: 0%;
  left: 0%;
}

.s:nth-child(2) {
  top: 0%;
  right: 0%;
}

.s:nth-child(3) {
  right: 0%;
  bottom: 0%;
}

.s:nth-child(4) {
  bottom: 0%;
  left: 0%;
}

/* Boule qui tourne */
.big {
  width: 20px;
  height: 20px;
  border-radius: 15px;
  box-shadow: 0px 0px 10px #46b9ff, 0px 0px 20px #46b9ff, 0px 0px 30px #46b9ff, 0px 0px 50px #46b9ff, 0px 0px 60px #46b9ff;
  z-index: 1;
  background-color: #46b9ff;
  animation: bigball 1s infinite linear;
}

.sb1 {
  animation-delay: -1.75s;
}

.sb6 {
  animation-delay: -1.5s;
}

.sb2 {
  animation-delay: -1.25s;
}

.sb7 {
  animation-delay: -1s;
}

.sb3 {
  animation-delay: -0.75s;
}

.sb8 {
  animation-delay: -0.5s;
}

.sb4 {
  animation-delay: -0.25s;
}

.sb5 {
  animation-delay: -0s;
}

@keyframes bigcon {
  0% {
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  100% {
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(405deg);
  }
}

@keyframes small {
  0% {
    transform: scale(1);
    background-color: #0090ff;
  }

  10% {
    transform: scale(1.3);
    background-color: #46b9ff;
  }

  15% {
    transform: scale(1);
  }

  25% {
    transform: scale(1);
    background-color: #0090ff;
  }

  100% {
    transform: scale(1);
    background-color: #0090ff;
  }
}

/********************
 * LOADER 2
 ********************/

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1051;
  opacity: 0;
  visibility: hidden;
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #222222;
  z-index: 1031;
}

#loader-wrapper .loader-section.section-left {
  left: -50%;
}

#loader-wrapper .loader-section.section-right {
  right: -50%;
}

#loader {
  z-index: 1033;
  /* anything higher than z-index: 1032 of .loader-section */
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -150px 0 0 -75px;

  border: 3px solid transparent;
  border-top-color: #3498db;
  border-radius: 50%;

  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  transform: translateX(-50%);
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  border-radius: 50%;

  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  border-radius: 50%;

  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

/* copy and paste the animation inside all 3 elements */
/* #loader, #loader:before, #loader:after */
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;

/* include this only once */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }

  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }

  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

#loader-wrapper .loader-content {
  z-index: 1035;
  color: white;
  position: relative;
  margin: 0 auto;
  text-align: center;
  top: 63%;
}

.loaded #loader {
  opacity: 1;
  -webkit-transition: all 6s ease-out;
  transition: all 6s ease-out;
}

.loaded #loader-wrapper {
  top: 0;
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

.loaded #loader-wrapper .loader-section.section-left {
  left: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper .loader-section.section-right {
  right: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}


/********************
 * BADGE BOOTSTRAP
 ********************/

.badge {
  position: absolute;
  top: 37.5%;
  right: 4%;
}

.badge-new {
  background: #ffb53d;
  position: relative;
  color: white;
  border-radius: 5px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  padding: 2px 10px;
}

/********************
 * TOP NAVIGATION
 ********************/
.layout-fullwidth #wrapper .btn-toggle-fullwidth {
  color: rgb(0, 144, 255);
}

.navbar-nav>li>a {
  padding: 30px 20px;
}

.navbar-right>li>a:hover {
  cursor: pointer;
}

/********************
 * LEFT NAVIGATION
 ********************/

.nav>li.phone-only {
  display: none;
}

.sidebar .nav>li>a:focus,
.sidebar .nav>li>a.active {
  border-left-color: rgb(0, 144, 255);
}

.sidebar .nav>li>a:hover i,
.sidebar .nav>li>a:focus i,
.sidebar .nav>li>a.active i {
  color: rgb(0, 144, 255);
}

/********************
 * LAYOUT
 ********************/

#wrapper .main {}

#wrapper .bandeau {
  margin-top: 0em;
  margin-bottom: 2em;
}

#wrapper .square-background {
  background-image: url(../img/main-background2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 460px;
  background-position: 100% 70%;
  opacity: 0.8;
  margin-left: -10px;
  margin-right: -10px;
  position: relative;
}

#wrapper .square-layout {
  position: relative;
  left: 0;
  right: 0;
  top: 75px;
}

#wrapper .square-layout ul {
  margin: 0 auto;
  padding: 0 0;
  text-align: center;
}

#wrapper .square-layout ul li {
  display: inline-block;
  background-color: rgba(29, 102, 249, 0.55);
  transition: 0.4s;
}

#wrapper .square-layout ul li:hover {
  background-color: rgba(29, 102, 249, 0.8);
  cursor: pointer;
}

#wrapper .square-building {
  height: 280px;
  width: 280px;
  position: relative;
  color: white;
  ;
}

#wrapper .square-building .square-title {
  position: absolute;
  top: 6%;
  left: 0;
  right: 0;
  text-transform: uppercase;
  font-weight: bold;
}

#wrapper .square-building .square-content {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
}

#wrapper .square-building .square-footer {
  position: absolute;
  top: 93%;
  left: 0;
  right: 0;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 1.0px;
}

#wrapper .square-building .square-icon {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  font-size: 4em;
}

#wrapper .square-layout ul li.square-selected {
  background-color: rgba(29, 102, 249, 0.95);
}

.p-perso1 {
  color: rgba(0, 0, 0, 0.90);
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

.p-perso2 {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.60);
  font-weight: normal;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
}

.p-perso3 {
  font-size: 13px;
  color: #222;
  font-weight: normal;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
}

.p-perso4 {
  font-size: 22px;
  color: #333;
  font-weight: normal;
  font-family: "Roboto", sans-serif;
}

.p-perso5 {
  font-size: 15px;
  color: #666;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
}

.p-perso6 {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.60);
  font-weight: normal;
  font-family: "Roboto", sans-serif;
  text-transform: capitalize;
}

.p-perso7 {
  font-size: 12px;
  color: rgba(0, 0, 0, .60);
  font-weight: normal;
  font-family: "Roboto", sans-serif;
}

.text-dark {
  color: black !important;
}

.titreblock {
  padding: 20px 0;
  text-transform: uppercase;
  color: white;
  background-color: rgb(29, 102, 249);
}

.disabled {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65;
}

.disabled:hover,
.disabled:focus {
  cursor: not-allowed !important;
  opacity: .65 !important;
}

/********************
 * SLIDER OWL
 ********************/

.owl-carousel .owl-item {
  float: unset !important;
  display: inline-block;
}

.owl-stage {
  margin: 0 auto;
}

.owl-carousel .owl-dots,
.owl-carousel .owl-nav {
  text-align: center;
  -webkit-tap-highlight-color: transparent
}

.owl-carousel .owl-nav {
  margin-top: 10px
}

.owl-carousel .owl-nav [class*=owl-] {
  color: #FFF;
  font-size: 14px;
  margin: 5px;
  padding: 4px 20px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s;
}

.owl-carousel .owl-nav [class*=owl-]:hover {
  color: #FFF;
  text-decoration: none
}

.owl-carousel .owl-nav .disabled {
  opacity: .5;
  cursor: default
}

.owl-carousel .owl-nav.disabled+.owl-dots {
  margin-top: 10px
}

.owl-carousel .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1
}

.owl-carousel .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  background: #D6D6D6;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity .2s ease;
  border-radius: 30px
}

.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
  background: #869791
}

.owl-carousel .owl-nav .disabled:hover {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: transparent;
}

/********************
 * BUTTON / COMPONENTS
 ********************/

.btn-timci {
  display: inline-block;
  padding: 1rem 2.3em;
  font-size: 16px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  margin: .375rem;
  border: 0;
  border-radius: .125rem;
  cursor: pointer;
  text-transform: uppercase;
  white-space: normal;
  word-wrap: break-word;
  color: #fff !important;
  background-color: #4285f4 !important;
  font-weight: 500;
}

.m-btn {
  margin: 0 auto;
  padding: 12px 20px;
  width: 100%;
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 40px;
  color: white !important;
  background-color: #3477E7;
  background-color: #3855FF;
  outline: none;
  text-decoration: none;
  transition: 0.3s;
  border: none;
  border-radius: 4px;
}

.m-btn:hover {
  opacity: 0.85;
}

.w-auto {
  width: auto !important;
}

.btn-timci:hover {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
}

/********************
 * LOGIN
 ********************/
.auth-box .logo {
  padding: 10px;
}

.auth-box .right .overlay {
  background-color: rgba(29, 102, 249, 0.80);
}

.btn-login {
  color: white;
  background-color: rgb(29, 102, 249);
  transition: 0.2s;
}

.btn-login:hover,
.btn-login:focus {
  color: white;
  opacity: 0.85;
}



/********************
 * COMPTE
 ********************/

#section-compte .header-compte {
  background-color: white;
  padding: 20px 20px 10px 20px;
  ;
}

#section-compte .header-compte p,
#compte .header-compte h3 {
  margin: 0 auto;
  margin-top: 20px;
  color: #333;
}

#section-compte h3 {
  margin: 0 auto;
}

#section-compte .header-compte p.solde,
.solde {
  padding: 8px 20px;
  border-radius: 5px;
  color: #444;
  font-weight: bold;
}

.solde-credits {
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.solde-debits {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #ad061a !important;
}

.solde-default {
  background-color: #d8d6d6;
  border-color: #a8a8a8;
}

#section-compte .previous-situation p {
  font-style: italic;
  font-size: 14px;
  margin-top: 10px;
  text-decoration: underline;
}

#section-compte .header-compte p.titre-quittance,
#section-compte .header-compte p.titre-quittance:focus {
  color: rgb(66, 133, 244);
  font-size: 15px;
  line-height: 23px;
  transition: 0.3s all;
  font-size: 15px;
  text-transform: none;
  margin-top: 2px;
}

/********************
 * GESTIONNAIRE
 ********************/
.headline {
  display: block;
  border-bottom: 1px dotted #ddd;
  margin-bottom: 1em;
}

.info .info-content i {
  color: rgb(180, 1, 1);
}

.title-gestionnaire {
  font-weight: normal;
  color: #444;
  padding-bottom: 6px;
  border-bottom: solid 2px rgb(190, 1, 1);
  display: inline-block
}

/********************
 * PANEL
 ********************/

.panel {
  margin-top: 2em;
  border: none;
}

.panel .right {
  top: 20%;
}

.panel-responsive {
  min-width: 427.533px;
}

#section-profil .section-informations .panel {
  overflow-x: hidden;
}

#section-profil #section-informations .panel-body {
  overflow: auto;
}

/********************
 * TABLE
 ********************/

#document .p-perso1 {
  font-size: 12px;
}

#table-compte-locataire td:nth-of-type(1) {
  width: 6%;
}

#table-compte-locataire td:nth-of-type(2) {
  width: 11%;
}

#table-compte-locataire td:nth-of-type(3) {
  width: 45%;
}

#table-compte-locataire td:nth-of-type(4) {
  width: 9%;
  text-align: right;
}

#table-compte-locataire td:nth-of-type(5) {
  width: 9%;
  text-align: right;
}

#table-compte-locataire td:nth-of-type(6) {
  width: 15%;
  text-align: right;
  font-weight: bold;
  padding-right: 10px;
}

#table-compte-locataire td:nth-of-type(7) {
  width: 5%;
}

#table-compte-locataire tr.selected td {
  background-color: #faf2cc;
}

#table-compte td:nth-of-type(1) {
  width: 12%;
}

#table-compte td:nth-of-type(2) {
  width: 50%;
}

#table-compte td:nth-of-type(3) {
  width: 10%;
  text-align: right;
}

#table-compte td:nth-of-type(4) {
  width: 10%;
  text-align: right;
}

#table-compte td:nth-of-type(5) {
  width: 15%;
  text-align: right;
  font-weight: bold;
  padding-right: 10px;

}

#table-compte td:nth-of-type(6) {
  width: 7%;
}

#table-quittance-loc tr td:nth-of-type(1),
#table-quittance-loc th:nth-of-type(1) {
  width: 5%;
}

#table-quittance-loc tr:nth-of-type(2) td {
  border-top: unset;
}

#table-quittance-loc>tbody>tr.histo,
#table-quittance>tbody>tr.histo {
  background-color: #D1F7FF !important;
}

#table-quittance-loc>tbody>tr.histo:hover,
#table-quittance>tbody>tr.histo:hover {
  background-color: #D1F7FF;
}

.tableBodyScroll tbody {
  display: block;
  max-height: ;
  overflow: auto;
}

.tableBodyScroll thead,
.tableBodyScroll tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.ligne-details.open,
.table-hover>tbody>tr.ligne-details.open:hover>td {
  background-color: #fff5c0 !important;
}

.open {
  background-color: rgb(226, 226, 226);
}

.my-table {
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.table {
  margin: 0 auto;
}

.table>thead>tr>th {
  border-bottom: none;
}

.table-hover>tbody>tr>td {
  transition: 0.3s;
}

.table-hover>tbody>tr:hover>td {
  background-color: rgb(242, 242, 242);
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
  padding: 20px;
  vertical-align: middle;
}

/*============ TABLE QUITTANCE (connexion propriétaire) ==============*/
.btn-historique {
  border-radius: 8px;
  padding: 7px 10px;
  box-sizing: border-box;
  font-size: 12.5px;
  box-shadow: unset;
  border: solid 1px #eee;
  color: rgb(58, 123, 145) !important;
  background: rgb(224, 240, 244) !important;
}

.btn-historique:hover {
  opacity: 0.8;
  transition: 0.3s all;
}

.table-hover>tbody>tr.ligne-histo:hover,
.table-hover>tbody>tr:hover>td {
  background-color: unset !important;
}


.panel-row {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-bottom: solid 1px whitesmoke;
}

.panel-row p {
  font-size: 13px;
  margin-left: 5px;
  margin-right: 5px;
}

.card-title {
  font-size: 20px;
  color: black;
}

/********************
 * MODAL
 ********************/

#documentModal .modal-dialog,
#locatairesModal .modal-dialog,
#unModal .modal-dialog {
  width: 60%;
  max-width: 60%;
}

#unModal .modal-dialog,
#modalPassword .modal-dialog {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
}

#associateModal .modal-body,
#documentModal .modal-body,
#unModal .modal-body {
  padding: 0;
}

#documentModal .modal-header,
#documentModal .modal-footer,
#unModal .modal-header,
#unModal .modal-footer,
#associateModal .modal-header,
#associateModal .modal-footer {
  background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(60, 60, 60) 100%) !important;
  border-color: transparent;
  color: whitesmoke;
}

#locatairesModal .modal-content {
  min-width: 540px;
}

#modalPassword .modal-dialog {
  max-width: 550px;
}

#modalPassword .modal-content {
  border: unset;
  border-radius: 20px;
}

#modalPassword .modal-body {
  color: #111;
  font-family: "Roboto", sans-serif;
  padding: 20px 35px;
}

#modalPassword .modal-body .form-forgot-img {
  margin: 0 auto;
  max-width: 180px;
}

#modalPassword .modal-body h3 {
  font-size: 20px;
  margin-top: 15px;
}

.btn-perso,
.btn-perso2 {
  transition: 0.3s;
  color: #ffffff;
  background-color: rgb(29, 102, 249);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.btn-perso:hover,
.btn-perso2:hover,
.btn-perso:focus,
.btn-perso2:focus {
  opacity: 0.8;
  color: white;
}

.btn-perso2 {
  background: #485563;
}

.solde-trop-percu,
.table-hover>tbody>tr.solde-trop-percu:hover>td {
  background-color: rgb(252, 244, 159) !important;
  background-color: rgb(255, 215, 173) !important;
  font-size: 13px;
  color: #111;
  text-decoration: underline;
}

/********************
 * MEDIA QUERIES
 ********************/

@media (max-width: 1024px) {

  /******************** 
     * RESPONSIVE TABLE 
     ********************/

  /* Force table to not be like tables anymore */
  #table-locataires,
  #table-locataires thead,
  #table-locataires tbody,
  #table-locataires th,
  #table-locataires td,
  #table-locataires tr {
    display: block;
  }

  #table-locataires thead {
    padding: 0 26px;
    margin-bottom: 10px;
    margin-top: -20px;
  }

  #table-locataires thead:before {
    /*content: "\26A0 \00A0 Cliquez pour afficher la quittance du locataire"; 
        font-style: italic;
        color: rgb(40, 96, 226);
        letter-spacing: 0.5px;*/
  }

  /* 
    Hide table headers (but not display: none;, for accessibility) 
    */
  #table-locataires thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #table-locataires tr {
    border: 1px solid #ccc;
    cursor: pointer;
  }

  #table-locataires tr:nth-child(odd) {
    background-color: rgb(225, 225, 225);
  }



  /*
    Ancien champs du tbody
    */
  #table-locataires td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    color: rgba(0, 0, 0, 0.60);
    font-weight: normal;
    font-size: 12px;
  }

  /*
    Ancien champs du thead
    */
  #table-locataires td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0px;
    left: 28px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    padding-top: 20px;
    color: black;
    font-weight: bold;
    font-size: 13px;
  }

  /*
	Label the data / Texte des différents champ du thead
	*/
  #table-locataires td:nth-of-type(1):before {
    content: "NUMERO";
  }

  #table-locataires td:nth-of-type(2):before {
    content: "LOCATAIRES";
  }

  #table-locataires td:nth-of-type(3):before {
    content: "ENTREE LE";
  }

  #table-locataires td:nth-of-type(4):before {
    content: "FIN BAIL";
  }

  #table-locataires td:nth-of-type(5):before {
    content: "LOT";
  }

  #table-locataires td:nth-of-type(6):before {
    content: "LOYER";
  }

  #table-locataires td:nth-of-type(7):before {
    content: "CHARGES";
  }

  #table-locataires td:nth-of-type(8):before {
    content: "SOLDE";
  }

  /******************** 
     * END RESPONSIVE TABLE 
     ********************/

  #section-profil h3 span {
    display: block;
    margin-bottom: 10px;
  }

  #section-locataires .panel-heading p {
    margin-bottom: 0 !important;
  }

  #wrapper .btn-toggle-fullwidth {
    color: rgb(0, 144, 255);
  }

  #documentModal .modal-dialog,
  #locatairesModal .modal-dialog {
    width: 85%;
    max-width: 85%;
  }

  #locatairesModal {
    overflow-x: auto;
  }

  .tableBodyScroll tbody {
    max-height: none;
    display: contents;
  }

  .tableBodyScroll thead,
  .tableBodyScroll tbody tr {
    /*display: table-header-group;*/
  }
}

@media (max-width: 767px) {

  .navbar-left {
    float: left !important;
    font-size: 14px;
  }

  .navbar-right {
    float: right !important;
  }

  .navbar-nav {
    width: auto;
  }

  .modal-dialog {
    margin: 0 auto;
  }

}

@media (max-width: 640px) {

  /*** RESPONSIVE TABLE ***/

  /*============ TABLE COMPTE ==============*/

  /* Force table to not be like tables anymore */
  #table-compte,
  #table-compte thead,
  #table-compte tbody,
  #table-compte th,
  #table-compte td,
  #table-compte tr {
    display: block;
  }

  /* 
    Hide table headers (but not display: none;, for accessibility) 
    */
  #table-compte thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #table-compte tr {
    border: 1px solid #ccc;
  }

  #table-compte tr:nth-child(odd) {
    background-color: rgb(225, 225, 225);
  }

  /*
    Ancien champs du tbody
    */
  #table-compte td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    color: rgba(0, 0, 0, 0.60);
    font-weight: normal;
    font-size: 12px;
  }

  /*
    Ancien champs du thead
    */
  #table-compte td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0px;
    left: 28px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    padding-top: 20px;
    color: black;
    font-weight: bold;
    font-size: 13px;
  }

  #table-compte.table-hover>tbody>tr:hover>td {
    background-color: rgb(252, 244, 159);
  }

  /*
	Label the data / Texte des différents champ du thead
	*/
  #table-compte td:nth-of-type(1):before {
    content: "DATE";
  }

  #table-compte td:nth-of-type(2):before {
    content: "INTUTLE";
  }

  #table-compte td:nth-of-type(3):before {
    content: "DEBITS";
  }

  #table-compte td:nth-of-type(4):before {
    content: "CREDITS";
  }

  #table-compte td:nth-of-type(5):before {
    content: "";
  }

  #table-compte td:nth-of-type(1) {
    width: auto;
  }

  #table-compte td:nth-of-type(2) {
    width: auto;
  }

  #table-compte td:nth-of-type(3) {
    width: auto;
    text-align: unset;
  }

  #table-compte td:nth-of-type(4) {
    width: auto;
    text-align: unset;
  }

  #table-compte td:nth-of-type(5) {
    width: auto;
    border-bottom: unset;
    padding: 28px 0;
    text-align: center;
  }

  /*============ TABLE DOCUMENT ==============*/

  /* Force table to not be like tables anymore */
  #table-document,
  #table-document thead,
  #table-document tbody,
  #table-document th,
  #table-document td,
  #table-document tr {
    display: block;
  }

  /* 
    Hide table headers (but not display: none;, for accessibility) 
    */
  #table-document thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #table-document tr {
    border: 1px solid #ccc;
  }

  #table-document tr:nth-child(odd) {
    background-color: rgb(225, 225, 225);
  }

  /*
    Ancien champs du tbody
    */
  #table-document td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    color: rgba(0, 0, 0, 0.60);
    font-weight: normal;
  }

  /*
    Ancien champs du thead
    */
  #table-document td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0px;
    left: 28px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    padding-top: 20px;
    color: black;
    font-weight: bold;
  }

  #table-document.table-hover>tbody>tr:hover>td {
    background-color: rgb(252, 244, 159);
  }

  /*
	Label the data / Texte des différents champ du thead
	*/
  #table-document td:nth-of-type(1):before {
    content: "NUMERO";
  }

  #table-document td:nth-of-type(2):before {
    content: "DESCRIPTIF";
  }

  #table-document td:nth-of-type(3):before {
    content: "DATE";
  }

  #table-document td:nth-of-type(4):before {
    content: "VISUALISER";
    padding: 32px 0;
  }

  #table-document td:nth-of-type(1) {
    width: auto;
  }

  #table-document td:nth-of-type(2) {
    width: auto;
  }

  #table-document td:nth-of-type(3) {
    width: auto;
    text-align: unset;
  }

  #table-document td:nth-of-type(4) {
    width: auto;
    text-align: unset;
  }

  /*============ TABLE QUITTANCE (connexion locataire) ==============*/

  #table-quittance-loc {
    background: rgb(245, 245, 250) !important;
  }

  /* Force table to not be like tables anymore */
  #table-quittance-loc,
  #table-quittance-loc thead,
  #table-quittance-loc tbody,
  #table-quittance-loc th,
  #table-quittance-loc td,
  #table-quittance-loc tr {
    display: block;
  }

  /* 
    Hide table headers (but not display: none;, for accessibility) 
    */
  #table-quittance-loc thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #table-quittance-loc tr {
    border: 1px solid #ccc;
  }

  #table-quittance-loc tr:nth-child(odd) {
    background-color: rgb(225, 225, 225);
  }

  #table-quittance-loc tr.ligne {
    margin-top: 2em;
  }

  #table-quittance-loc tr.ligne:first-of-type {
    margin-top: 1em;
  }

  #table-quittance-loc tr.details {
    margin-bottom: 1em;
  }

  #table-quittance-loc tr.ligne2 {
    margin-top: 2em;
  }

  #table-quittance-loc tr.phone-hide {
    display: none;
  }

  #table-quittance-locc tr.ligne-details

  /*
    Ancien champs du tbody
    */
  #table-quittance-loc td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    color: rgba(0, 0, 0, 0.60);
    font-weight: normal;
  }

  /*
    Ancien champs du thead
    */
  #table-quittance-loc td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0px;
    left: 28px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    padding-top: 20px;
    color: black;
    font-weight: bold;
  }

  #table-quittance-loc.table-hover>tbody>tr.ligne>td {
    background-color: rgb(246, 245, 245);
  }

  #table-quittance-loc.table-hover>tbody>tr.ligne.open>td {
    background-color: rgb(252, 244, 159);
  }

  #table-quittance-loc.table-hover>tbody>tr.details>td {
    background-color: rgb(255, 255, 255);
  }

  /*
	Label the data / Texte des différents champ du thead pour la classe .ligne
	*/
  #table-quittance-loc tr.ligne td:nth-of-type(1):before {
    content: "";
  }

  #table-quittance-loc tr.ligne td:nth-of-type(2):before {
    content: "TERME";
    text-align: left;
  }

  #table-quittance-loc tr.ligne td:nth-of-type(3):before {
    content: "QUITTANCE";
    text-align: left;
  }

  #table-quittance-loc tr.ligne td:nth-of-type(4):before {
    content: "REGLE";
    text-align: left;
  }

  #table-quittance-loc tr.ligne td:nth-of-type(5):before {
    content: "SOLDE";
    text-align: left;
  }

  #table-quittance-loc tr.ligne td:nth-of-type(1) {
    width: auto;
    text-align: center;
    padding: 25px 0;
  }

  #table-quittance-loc tr.ligne td:nth-of-type(2) {
    width: auto;
    text-align: right;
    color: black;
  }

  #table-quittance-loc tr.ligne td:nth-of-type(3) {
    width: auto;
    text-align: right;
    color: black;
  }

  #table-quittance-loc tr.ligne td:nth-of-type(4) {
    width: auto;
    text-align: right;
    color: black;
  }

  #table-quittance-loc tr.ligne td:nth-of-type(5) {
    width: auto;
    text-align: right;
    color: black;
  }

  /*
	Label the data / Texte des différents champ du thead pour la classe .details
	*/

  #table-quittance-loc tr.details td:nth-of-type(2):before {
    content: "TERME";
    text-align: left;
  }

  #table-quittance-loc tr.details td:nth-of-type(3):before {
    content: "QUITTANCE";
    text-align: left;
  }

  #table-quittance-loc tr.details td:nth-of-type(4):before {
    content: "REGLE";
    text-align: left;
  }

  #table-quittance-loc tr.details td:nth-of-type(5):before {
    content: "SOLDE";
    text-align: left;
  }

  #table-quittance-loc tr.details td:nth-of-type(1) {
    display: none;
  }

  #table-quittance-loc tr.details td:nth-of-type(2) {
    width: auto;
    text-align: right;
  }

  #table-quittance-loc tr.details td:nth-of-type(3) {
    width: auto;
    text-align: right;
  }

  #table-quittance-loc tr.details td:nth-of-type(4) {
    width: auto;
    text-align: right;
  }

  #table-quittance-loc tr.details td:nth-of-type(5) {
    width: auto;
    text-align: right;
  }

  /*
	Label the data / Texte des différents champ du thead pour la classe .ligne2
	*/
  #table-quittance-loc tr.ligne2 td:nth-of-type(3):before {
    content: "TOTAL QUITTANCE";
    text-align: left;
  }

  #table-quittance-loc tr.ligne2 td:nth-of-type(4):before {
    content: "TOTAL REGLE";
    text-align: left;
  }

  #table-quittance-loc tr.ligne2 td:nth-of-type(5):before {
    content: "TOTAL SOLDE";
    text-align: left;
  }

  #table-quittance-loc tr.ligne2 td:nth-of-type(1) {
    display: none;
  }

  #table-quittance-loc tr.ligne2 td:nth-of-type(2) {
    display: none;
  }

  #table-quittance-loc tr.ligne2 td:nth-of-type(3) {
    width: auto;
    color: black;
  }

  #table-quittance-loc tr.ligne2 td:nth-of-type(4) {
    width: auto;
    color: black
  }

  #table-quittance-loc tr.ligne2 td:nth-of-type(5) {
    width: auto;
    color: black;
  }

  /*** END RESPONSIVE TABLE ***/
  .panel-responsive {
    min-width: auto;
  }

  .navbar-right {
    display: none;
  }

  .nav>li.phone-only {
    display: block;
  }

  .navbar-nav>li>a.welcome {
    padding: 30px 4px;
  }

  .btn-perso,
  .btn-perso2 {
    font-size: 10px;
  }

  #documentModal .modal-dialog {
    width: 95%;
    max-width: 95%;
  }
}

@media (max-width: 350px) {
  #wrapper .square-building {
    width: 250px;
  }

  .navbar-left {
    font-size: 10px;
  }

  .btn-perso,
  .btn-perso2 {
    margin: 0 auto !important;
    display: block;
  }

  /*
    Ancien champs du tbody
    */
  #table-quittance-loc td,
  #table-quittance-loc td:before {
    font-size: 10px;
  }

}

#toast-container-perso {
  position: fixed;
  position: relative;
  z-index: 999999;
  z-index: 0;
  pointer-events: none;
  left: 0;
  right: 0;
  margin: -10px auto 20px;
  width: 100%;
  transition: 1.5s all;
}

#toast-container-perso.toast-login {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  left: 0;
  right: 0;
  margin: 10px;
  width: auto;
  transition: 1.5s all;
}

#toast-container-perso>div {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

#toast-container-perso .toast {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px;
  border-radius: 0;
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999;
  -webkit-box-shadow: 0 0 12px #999;
  box-shadow: 0 0 12px #999;
  color: #FFF;
  opacity: 0.9;
  transition: 0.2s all;
}

.toast-error {
  background-color: #BD362F;
}

.toast-warning {
  background-color: #e4cb10;
}

.toast-success {
  background-color: #41B314;
  background-color: #22a800;
}

.toast-info {
  background-color: #007bff;
}

toast .toast-message {
  font-size: 14px;
  line-height: 2;
}

#toast-container-perso .toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  margin-right: 10px;
}

#toast-container-perso #toast-close-button {
  background: transparent;
  border: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translate(0, -50%);
}

/******************** 
 * DOSSIER FACILE
 ********************/
.blue-dossier-facile {
  color: #000091 !important;
  font-size: 18px;
  font-weight: 500 !important;
  margin-top: 10px !important;
}

.content-dossier-facile {
  background: rgba(255, 255, 255, 1);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  max-width: 500px;
  padding: 15px 15px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}

.p-dossier-facile {
  margin-top: 15px !important;
  font-size: 14px !important;
  color: #333 !important;
}

.title-hyphens {
  display: flex;
  flex-direction: row;
  margin: 1.5em 0px;
  margin-bottom: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  text-align: center;
  font-weight: 300;
}

.title-hyphens:before,
.title-hyphens:after {
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}

.title-hyphens:before {
  margin-right: 10px
}

.title-hyphens:after {
  margin-left: 10px
}

/********************
 * MESSAGE GLOBAL
 ********************/
#message_global p {
  margin: 0 auto;
  color: #333;
  font-size: 14px;
  white-space: pre-wrap;
  margin-top: 10px;
}

#message_global p.objet {
  border-bottom: 1px solid #CCC;
  margin: 0 -10px;
  padding: 10px 10px 20px;
}

/********************
 * LOADER 2
 ********************/
.loader2 {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
  position: relative;
  left: 42%;
}

.loader2:before,
.loader2:after {
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;
  width: 20px;
}

.loader2:before {
  animation: ball1 1s infinite;
  background-color: #cb2025;
  box-shadow: 30px 0 0 #f8b334;
  margin-bottom: 10px;
}

.loader2:after {
  animation: ball2 1s infinite;
  background-color: rgb(56, 117, 171);
  box-shadow: 30px 0 0 #00a096;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(0.8);
    -moz-transform: rotate(0deg) scale(0.8);
  }

  50% {
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
  }

  100% {
    -webkit-transform: rotate(720deg) scale(0.8);
    -moz-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #f8b334;
  }

  50% {
    box-shadow: 0 0 0 #f8b334;
    margin-bottom: 0;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
  }

  100% {
    box-shadow: 30px 0 0 #f8b334;
    margin-bottom: 10px;
  }
}



@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #00a096;
  }

  50% {
    box-shadow: 0 0 0 #00a096;
    margin-top: -20px;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
  }

  100% {
    box-shadow: 30px 0 0 #00a096;
    margin-top: 0;
  }
}

/***********************/
/* Input angular style */
/***********************/

.custom-form {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.custom-form .prefix {
  position: absolute;
  -webkit-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s;
  top: .65rem;
  font-size: 1.75rem;
  font-size: 20px;
  color: #9e9e9e !important;
}

.custom-form label.active {
  top: -20px;
}

.custom-form .prefix~label {
  margin-left: 2.5rem;
}

.custom-form label.active {
  font-size: 15px;
  width: 100%;
}

.custom-form label {
  position: absolute;
  top: .65rem;
  left: 1.5rem;
  -webkit-transition: .3s ease-out;
  -o-transition: .3s ease-out;
  transition: .3s ease-out;
  cursor: text;
  color: #757575;
}

.custom-form label {
  display: inline-block;
  margin-bottom: .5rem;
  font-size: 15px;
  font-weight: normal;
}

.custom-form .prefix~input,
.custom-form .prefix~textarea {
  margin-left: 4rem;
  width: calc(100% - 4rem);
}

.custom-form input[type="date"],
.custom-form input[type="datetime-local"],
.custom-form input[type="email"],
.custom-form input[type="number"],
.custom-form input[type="password"],
.custom-form input[type="search-md"],
.custom-form input[type="search"],
.custom-form input[type="tel"],
.custom-form input[type="text"],
.custom-form input[type="time"],
.custom-form input[type="url"],
.custom-form textarea.md-textarea {
  -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
  -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  border-bottom-color: currentcolor;
  border-bottom-style: none;
  border-bottom-width: medium;
  border-bottom: 1px solid #ced4da;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  background-color: transparent;
}

.custom-form input[type="date"]:focus:not([readonly]),
.custom-form input[type="datetime-local"]:focus:not([readonly]),
.custom-form input[type="email"]:focus:not([readonly]),
.custom-form input[type="number"]:focus:not([readonly]),
.custom-form input[type="password"]:focus:not([readonly]),
.custom-form input[type="search-md"]:focus:not([readonly]),
.custom-form input[type="search"]:focus:not([readonly]),
.custom-form input[type="tel"]:focus:not([readonly]),
.custom-form input[type="text"]:focus:not([readonly]),
.custom-form input[type="time"]:focus:not([readonly]),
.custom-form input[type="url"]:focus:not([readonly]),
.custom-form textarea.md-textarea:focus:not([readonly]) {
  -webkit-box-shadow: 0 1px 0 0 rgb(66, 133, 244);
  box-shadow: 0 1px 0 0 rgb(66, 133, 244);
  border-bottom: 1px solid rgb(66, 133, 244);

}

.custom-form input[type="date"]:focus:not([readonly])+label,
.custom-form input[type="datetime-local"]:focus:not([readonly])+label,
.custom-form input[type="email"]:focus:not([readonly])+label,
.custom-form input[type="number"]:focus:not([readonly])+label,
.custom-form input[type="password"]:focus:not([readonly])+label,
.custom-form input[type="search-md"]:focus:not([readonly])+label,
.custom-form input[type="search"]:focus:not([readonly])+label,
.custom-form input[type="tel"]:focus:not([readonly])+label,
.custom-form input[type="text"]:focus:not([readonly])+label,
.custom-form input[type="time"]:focus:not([readonly])+label,
.custom-form input[type="url"]:focus:not([readonly])+label,
.custom-form textarea.md-textarea:focus:not([readonly])+label {
  color: rgb(66, 133, 244);
}

/* ============== */
/* Input valide */
.custom-form input[type="date"].valid,
.custom-form input[type="date"]:focus.valid,
.custom-form input[type="datetime-local"].valid,
.custom-form input[type="datetime-local"]:focus.valid,
.custom-form input[type="email"].valid,
.custom-form input[type="email"]:focus.valid,
.custom-form input[type="number"].valid,
.custom-form input[type="number"]:focus.valid,
.custom-form input[type="password"].valid,
.custom-form input[type="password"]:focus.valid,
.custom-form input[type="search-md"].valid,
.custom-form input[type="search-md"]:focus.valid,
.custom-form input[type="search"].valid,
.custom-form input[type="search"]:focus.valid,
.custom-form input[type="tel"].valid,
.custom-form input[type="tel"]:focus.valid,
.custom-form input[type="text"].valid,
.custom-form input[type="text"]:focus.valid,
.custom-form input[type="time"].valid,
.custom-form input[type="time"]:focus.valid,
.custom-form input[type="url"].valid,
.custom-form input[type="url"]:focus.valid,
.custom-form textarea.md-textarea.valid,
.custom-form textarea.md-textarea:focus.valid {
  border-bottom: 1px solid #00c851;
  -webkit-box-shadow: 0 1px 0 0 #00c851;
  box-shadow: 0 1px 0 0 #00c851;
}

.custom-form input[type="date"].form-control.valid+label::after,
.custom-form input[type="date"].form-control:focus.valid+label::after,
.custom-form input[type="datetime-local"].form-control.valid+label::after,
.custom-form input[type="datetime-local"].form-control:focus.valid+label::after,
.custom-form input[type="email"].form-control.valid+label::after,
.custom-form input[type="email"].form-control:focus.valid+label::after,
.custom-form input[type="number"].form-control.valid+label::after,
.custom-form input[type="number"].form-control:focus.valid+label::after,
.custom-form input[type="password"].form-control.valid+label::after,
.custom-form input[type="password"].form-control:focus.valid+label::after,
.custom-form input[type="search-md"].form-control.valid+label::after,
.custom-form input[type="search-md"].form-control:focus.valid+label::after,
.custom-form input[type="search"].form-control.valid+label::after,
.custom-form input[type="search"].form-control:focus.valid+label::after,
.custom-form input[type="tel"].form-control.valid+label::after,
.custom-form input[type="tel"].form-control:focus.valid+label::after,
.custom-form input[type="text"].form-control.valid+label::after,
.custom-form input[type="text"].form-control:focus.valid+label::after,
.custom-form input[type="time"].form-control.valid+label::after,
.custom-form input[type="time"].form-control:focus.valid+label::after,
.custom-form input[type="url"].form-control.valid+label::after,
.custom-form input[type="url"].form-control:focus.valid+label::after,
.custom-form textarea.md-textarea.form-control.valid+label::after,
.custom-form textarea.md-textarea.form-control:focus.valid+label::after {
  top: 60px;
}

.custom-form input[type="date"].valid+label::after,
.custom-form input[type="date"]:focus.valid+label::after,
.custom-form input[type="datetime-local"].valid+label::after,
.custom-form input[type="datetime-local"]:focus.valid+label::after,
.custom-form input[type="email"].valid+label::after,
.custom-form input[type="email"]:focus.valid+label::after,
.custom-form input[type="number"].valid+label::after,
.custom-form input[type="number"]:focus.valid+label::after,
.custom-form input[type="password"].valid+label::after,
.custom-form input[type="password"]:focus.valid+label::after,
.custom-form input[type="search-md"].valid+label::after,
.custom-form input[type="search-md"]:focus.valid+label::after,
.custom-form input[type="search"].valid+label::after,
.custom-form input[type="search"]:focus.valid+label::after,
.custom-form input[type="tel"].valid+label::after,
.custom-form input[type="tel"]:focus.valid+label::after,
.custom-form input[type="text"].valid+label::after,
.custom-form input[type="text"]:focus.valid+label::after,
.custom-form input[type="time"].valid+label::after,
.custom-form input[type="time"]:focus.valid+label::after,
.custom-form input[type="url"].valid+label::after,
.custom-form input[type="url"]:focus.valid+label::after,
.custom-form textarea.md-textarea.valid+label::after,
.custom-form textarea.md-textarea:focus.valid+label::after {
  content: attr(data-success);
  color: #00c851;
  opacity: 1;
}

/* ============== */
/* Input invalide */
.custom-form input[type="date"].invalid,
.custom-form input[type="date"]:focus.invalid,
.custom-form input[type="datetime-local"].invalid,
.custom-form input[type="datetime-local"]:focus.invalid,
.custom-form input[type="email"].invalid,
.custom-form input[type="email"]:focus.invalid,
.custom-form input[type="number"].invalid,
.custom-form input[type="number"]:focus.invalid,
.custom-form input[type="password"].invalid,
.custom-form input[type="password"]:focus.invalid,
.custom-form input[type="search-md"].invalid,
.custom-form input[type="search-md"]:focus.invalid,
.custom-form input[type="search"].invalid,
.custom-form input[type="search"]:focus.invalid,
.custom-form input[type="tel"].invalid,
.custom-form input[type="tel"]:focus.invalid,
.custom-form input[type="text"].invalid,
.custom-form input[type="text"]:focus.invalid,
.custom-form input[type="time"].invalid,
.custom-form input[type="time"]:focus.invalid,
.custom-form input[type="url"].invalid,
.custom-form input[type="url"]:focus.invalid,
.custom-form textarea.md-textarea.invalid,
.custom-form textarea.md-textarea:focus.invalid {
  border-bottom: 1px solid #f44336;
  -webkit-box-shadow: 0 1px 0 0 #f44336;
  box-shadow: 0 1px 0 0 #f44336;
}

.custom-form input[type="date"].form-control.invalid+label::after,
.custom-form input[type="date"].form-control:focus.invalid+label::after,
.custom-form input[type="datetime-local"].form-control.invalid+label::after,
.custom-form input[type="datetime-local"].form-control:focus.invalid+label::after,
.custom-form input[type="email"].form-control.invalid+label::after,
.custom-form input[type="email"].form-control:focus.invalid+label::after,
.custom-form input[type="number"].form-control.invalid+label::after,
.custom-form input[type="number"].form-control:focus.invalid+label::after,
.custom-form input[type="password"].form-control.invalid+label::after,
.custom-form input[type="password"].form-control:focus.invalid+label::after,
.custom-form input[type="search-md"].form-control.invalid+label::after,
.custom-form input[type="search-md"].form-control:focus.invalid+label::after,
.custom-form input[type="search"].form-control.invalid+label::after,
.custom-form input[type="search"].form-control:focus.invalid+label::after,
.custom-form input[type="tel"].form-control.invalid+label::after,
.custom-form input[type="tel"].form-control:focus.invalid+label::after,
.custom-form input[type="text"].form-control.invalid+label::after,
.custom-form input[type="text"].form-control:focus.invalid+label::after,
.custom-form input[type="time"].form-control.invalid+label::after,
.custom-form input[type="time"].form-control:focus.invalid+label::after,
.custom-form input[type="url"].form-control.invalid+label::after,
.custom-form input[type="url"].form-control:focus.invalid+label::after,
.custom-form textarea.md-textarea.form-control.invalid+label::after,
.custom-form textarea.md-textarea.form-control:focus.invalid+label::after {
  top: 60px;
}

.custom-form input[type="date"].invalid+label::after,
.custom-form input[type="date"]:focus.invalid+label::after,
.custom-form input[type="datetime-local"].invalid+label::after,
.custom-form input[type="datetime-local"]:focus.invalid+label::after,
.custom-form input[type="email"].invalid+label::after,
.custom-form input[type="email"]:focus.invalid+label::after,
.custom-form input[type="number"].invalid+label::after,
.custom-form input[type="number"]:focus.invalid+label::after,
.custom-form input[type="password"].invalid+label::after,
.custom-form input[type="password"]:focus.invalid+label::after,
.custom-form input[type="search-md"].invalid+label::after,
.custom-form input[type="search-md"]:focus.invalid+label::after,
.custom-form input[type="search"].invalid+label::after,
.custom-form input[type="search"]:focus.invalid+label::after,
.custom-form input[type="tel"].invalid+label::after,
.custom-form input[type="tel"]:focus.invalid+label::after,
.custom-form input[type="text"].invalid+label::after,
.custom-form input[type="text"]:focus.invalid+label::after,
.custom-form input[type="time"].invalid+label::after,
.custom-form input[type="time"]:focus.invalid+label::after,
.custom-form input[type="url"].invalid+label::after,
.custom-form input[type="url"]:focus.invalid+label::after,
.custom-form textarea.md-textarea.invalid+label::after,
.custom-form textarea.md-textarea:focus.invalid+label::after {
  content: attr(data-error);
  color: #f44336;
  opacity: 1;
}

.custom-form input[type="date"]+label::after,
.custom-form input[type="datetime-local"]+label::after,
.custom-form input[type="email"]+label::after,
.custom-form input[type="number"]+label::after,
.custom-form input[type="password"]+label::after,
.custom-form input[type="search-md"]+label::after,
.custom-form input[type="search"]+label::after,
.custom-form input[type="tel"]+label::after,
.custom-form input[type="text"]+label::after,
.custom-form input[type="time"]+label::after,
.custom-form input[type="url"]+label::after,
.custom-form textarea.md-textarea+label::after {
  content: "";
  position: absolute;
  top: 65px;
  display: block;
  opacity: 0;
  -webkit-transition: .2s opacity ease-out, .2s color ease-out;
  -o-transition: .2s opacity ease-out, .2s color ease-out;
  transition: .2s opacity ease-out, .2s color ease-out;
}

.custom-form .validate {
  margin-bottom: 2.5rem;
}

.custom-form .form-control {
  margin: 0 0 .5rem 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding: .6rem 0 1.05rem 0;
  background-image: none;
  background-color: transparent;
  height: auto;
}

.custom-form .form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/***************************/
/* FIN Input angular style */
/***************************/

/***************************/
/* Flex Bootstrap */
/***************************/
.d-flex {
  display: flex !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.justify-content-center {
  justify-content: center !important;
}

.align-items-center {
  align-items: center !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

#verify .content {
  background-color: white;
  color: #111;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 40px;
  border-radius: 10px;
  box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.1);
  font-family: "Nunito", sans-serif;
}

#verify .content p {
  font-weight: 700;
  margin-top: 1em;
}

#verify .content a,
#verify .content .btn-login {
  margin-top: 15px;
  width: 50%;
  font-weight: 600;
  font-size: 16px;
}

#verify .content .small {
  font-weight: 500;
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 0px;
}