* {

  font-family: "Poppins", sans-serif;

  font-weight: 400;

}



:root {

  --creme: #f1efe7;

  --orange: #FF9F1C;

  --framboise: #d3214c;

  --vert:#0ece4d;

  --framboise-fonce: #b30029;

  --fonce:#011627;

  --navy:#676F54;

  --blue:#aeccd7;

}



body {

  font-size: 15px;

  background-color: var(--creme);

}



main {

  margin: 40px 0;

}



.xcrud-num {

  color: #a9a48d;

}



.hidden {

  display: none;

}



.alert-danger {

  color: #ffffff;

  background-color: #d3214c;

  border-color: #d3214c;

}



.alert-danger a {

  color: #ffffff;

  text-decoration: underline;

}



.redbutton:hover,

.tele:hover

 {

  color: #fff;

  background-color:#b4022d ;

  text-decoration: none;

}



.intro_accueil {

  text-align: center;

}



.intro_profil {

  display: flex;

  flex-direction: column;

  align-items: center;

  background-color: white;

  padding: 30px;

  border-radius: 20px;

}



.w100 {

  width: 100%;

}



.progress-bar {

  width: 100%;

  max-width: 700px;

  height: 12px;

  background-color: #fff;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

}



.progress {

  height: 100%;

  /* margin: 2px; */

  background-color: #4caf50;

  border-radius: 10px;

  transition: width 0.5s ease;

}



.img-illus {

  margin: 35px auto;

  width: 100%;

  max-width: 418px;

  display: block;

}







.icone-empty {

  margin: 20px auto;

  width: 100%;

  max-width: 140px;

  opacity: 0.3;

  display: block;

}



.profilbutt {

  margin-top: 20px;

  font-size: 14px;

}



.profil_message {

  margin-bottom: 15px;

}



.table-striped > tbody > tr:nth-child(odd) > td,

.table-striped > tbody > tr:nth-child(odd) > th,

.table-striped > tbody > tr:nth-child(even) > td,

.table-striped > tbody > tr:nth-child(even) > th {

  background-color: #fff;

}



.form-control {

  font-size: 16px;

}





.table-bordered > thead > tr > th,

.table-bordered > tbody > tr > th,

.table-bordered > tfoot > tr > th,

.table-bordered > thead > tr > td,

.table-bordered > tbody > tr > td,

.table-bordered > tfoot > tr > td {

  border: 0;

}



.container > .navbar-header {

}





.table-bordered {

  border: 0;

}



.table thead th {

  color: white;

  background-color: var(--fonce);

  border: 0;

}



.btn-success,

.btn-danger,

.btn-primary {

  color: #fff;

  background-color: var(--framboise);

  border-color: var(--framboise);

  border-radius: 40px;

  padding-left: 20px;

  padding-right: 20px;

}



.btn-success:hover,

.btn-primary:hover,

.btn-danger:hover

{

  background-color: var(--framboise-fonce);

  border-color: var(--framboise-fonce);

}



.btn-default {

  color: #333;

  background-color: #fff;

  border: 0;

}



.btn:disabled {

background: #aaa;

    border-color: #aaa;

}



.navbar .container {

  display: flex;

  align-items: flex-start;

}



.navbar-nav {

  display: flex;

  flex-direction: row;

}



#bs-example-navbar-collapse-1 {

  flex: 1;

  display: flex;

  justify-content: flex-end;

}





.navbar-default .navbar-nav > li > a {

  margin-right: 20px;

}

.navbar-nav > li > a > .icon {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 28px;

}



.navbar-nav.nav {

  display: flex;

  justify-content: space-around;

  margin-right: 50px;

}



.navbar-nav > li > a > .icon > i {

  color:#b30029;

  transform: scale(0.8);

}



.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

  background: transparent;

  color:#b30029

}



.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

  background: transparent;

  color:#ffffff

}



.navbar-nav > li.active > a > .icon > i {

  color:#ffffff

}







.xcrud-top-actions {

  padding: 20px 0;

}



.rowboot3 {

  margin-bottom: 15px;

}



.rowboot3 .control-label {

  text-align: right;

}



h1,

h2,

h3,

h4 {

  font-family: "Poppins";

  color:var(--fonce)

}



h2 {

  border-bottom: 0;

  font-size: 40px;

  font-weight: 700;

  font-family: "Poppins";

}



.dashh2 {

  font-size: 30px;

}



.navbar-brand {

  font-weight: 400;

  font-size: 20px;

  color: #333 !important;

  padding: 10px 25px 0px 0px !important;

}

.navbar-brand span {

  font-weight: 400;

  font-size: 20px;

  color: var(--framboise);

}

.navbar-brand > img {

  display: block !important;

  width: 100%;

  max-width: 360px;

  height: auto;

}



.decolink {

  width:27px; 

  padding:10px 5px;

  position: absolute;

  right: 5px;

}



.table td, .table th {

  border-top: 1px solid transparent;

}



.nav > li > a {

  padding: 8px 20px;

}



.btn-light {

  color: #212529;

  background-color: #f8f9fa;

  border-color: #e0e0e0;

}



.btn-light:hover {

  color: #212529;

  background-color: #e2e6ea;

  border-color: #dae0e5;

}



.navbar-default {

  background-color: transparent;

  border: none;

  padding: 0;

}

.btn-cream {

  color: var(--fonce);

  background: var(--creme);

}



.entete_index {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



#searchInput {

  border: 0;

  border-radius: 20px;

  padding: 8px 20px;

}



#searchForm {

  margin: 15px 0;

}

.navbar-default .navbar-nav > li:hover > a {

  background-color: #e5e3dc;

  text-decoration: none;

}

.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus,

.navbar-default .navbar-nav > li.active:hover > a

 {

  color: #fff;

  background-color: var(--framboise);

}







.table > thead > tr > th,

.table > tbody > tr > th,

.table > tfoot > tr > th,

.table > thead > tr > td,

.table > tbody > tr > td,

.table > tfoot > tr > td {

  padding: 16px 8px;

}



.btn-default.active {

  background-color: #e7e5da;

}



.table > tbody > tr > td {

  border-bottom: 1px solid var(--fonce);

}



.container_header {

  position: relative;

}



.navbar-default .navbar-nav > li > a {

  color: var(--fonce);

  display: block;

  /* background: var(--fonce); */

  margin: 0 10px;

  margin: 0;

  padding: 4px 14px;

  border-radius: 0 0 10px 10px;

  font-size: 13px;

}



.navbar-default .navbar-nav > li > a:last-child {

margin-right: 20px;

}



.form-control {

  height: auto;

  padding: 11px 12px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}



tr.link {

  cursor: pointer;

}



.alert-content {

  display: flex;

  align-items: center;

  padding: 5px 10px;

  border-radius: 8px;

  background-color: #dad8cd;

  position: relative;

  font-size: 13px;

  margin-bottom: 10px;

}



.alert-content::before {

  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>');

  margin-right: 16px;

  width: 24px; /* Largeur de l'icône */

  height: 24px; /* Hauteur de l'icône */

}



.alert-content p {

  margin: 0;

}

.alert-warning {
  color: #6a5310;
  background-color: #dcd8c7;
  border-color: #dcd8c7;
  font-size: 90%;
}
.alert-warning a {
    color: #dc3545;
    text-decoration: none;
    background-color: transparent;
}

select#template {
  padding: 3px 10px;
  border-radius: 20px;
}
/*Popup*/

.modal {
  display: none; /* Masqué par défaut */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4); /* Ombre de fond */
}

.modal-content {
  background-color: #fefefe;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border-radius: 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.boutonok {
  background-color: var(--fonce);
  color: white;
  font-size: 100%;
  border: 0;
  border-radius: 30px;
  padding: 5px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.boutonvert {
  background-color: var(--framboise);
  font-size: 120%;
}

.contratfichier {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}


.fichier {
  background-color: #fff;
  padding: 3px 15px;
  border-radius: 30px;
  color: #000;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fichier:hover {
  color: var(--framboise);
}

.delete { 
  color: var(--framboise);
  text-decoration: none; 
  display: inline-flex;
  align-items: center;
  gap: 0px;
}
.delete:hover {
 color: var(--fonce);
}

.fichier .gg-file-document {
  color:var(--framboise);
  transform: scale(var(--ggs, 0.8));
}


/* Icones */

.gg-arrows-exchange {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 16px;
  height: 14px;
}
.gg-arrows-exchange::after,
.gg-arrows-exchange::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  height: 2px;
  background: currentColor;
  border-radius: 4px;
}
.gg-arrows-exchange::before {
  width: 6px;
  transform: rotate(45deg);
  box-shadow: 2px -13px 0;
  top: 10px;
}
.gg-arrows-exchange::after {
  width: 12px;
  box-shadow: -4px 4px 0;
  left: 4px;
  top: 4px;
}

.gg-file-document {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 14px;
  height: 16px;
  border: 2px solid transparent;
  border-right: 0;
  border-top: 0;
  box-shadow: 0 0 0 2px;
  border-radius: 1px;
  border-top-right-radius: 4px;
  overflow: hidden;
}
.gg-file-document::after,
.gg-file-document::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
}
.gg-file-document::before {
  background: currentColor;
  box-shadow:
    0 4px 0,
    -6px -4px 0;
  left: 0;
  width: 10px;
  height: 2px;
  top: 8px;
}
.gg-file-document::after {
  width: 6px;
  height: 6px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  right: -1px;
  top: -1px;
}


.gg-close {

  box-sizing: border-box;

  position: relative;

  display: block;

  transform: scale(var(--ggs,1));

  width: 22px;

  height: 22px;

  border: 2px solid transparent;

  border-radius: 40px

}

.gg-close::after,

.gg-close::before {

  content: "";

  display: block;

  box-sizing: border-box;

  position: absolute;

  width: 16px;

  height: 2px;

  background: currentColor;

  transform: rotate(45deg);

  border-radius: 5px;

  top: 8px;

  left: 1px

}

.gg-close::after {

  transform: rotate(-45deg)

}

.gg-pen {

  box-sizing: border-box;

  position: relative;

  display: block;

  transform: rotate(-45deg) scale(var(--ggs,0.95));

  width: 13px;

  height: 4px;

  border-right: 2px solid transparent;

  box-shadow: 0 0 0 1.8px;

  border-top-right-radius: 1px;

  border-bottom-right-radius: 1px;

  margin-right: -2px;

}

.gg-pen::after,

.gg-pen::before {

  content: "";

  display: block;

  box-sizing: border-box;

  position: absolute

}

.gg-pen::after {

  width: 8px;

  height: 8px;

  border-top: 4px solid transparent;

  border-bottom: 4px solid transparent;

  border-right: 6px solid;

  left: -9px;

  top: -2px;

}



.gg-arrow-down {

  box-sizing: border-box;

  position: relative;

  display: block;

  transform: scale(var(--ggs,1));

  width: 22px;

  height: 22px

}

.gg-arrow-down::after,

.gg-arrow-down::before {

  content: "";

  display: block;

  box-sizing: border-box;

  position: absolute;

  bottom: 4px

}

.gg-arrow-down::after {

  width: 8px;

  height: 8px;

  border-bottom: 2px solid;

  border-left: 2px solid;

  transform: rotate(-45deg);

  left: 7px

}

.gg-arrow-down::before {

  width: 2px;

  height: 16px;

  left: 10px;

  background: currentColor

}







.gg-search {

  box-sizing: border-box;

  position: relative;

  display: block;

  transform: scale(var(--ggs,0.95));

  width: 16px;

  height: 16px;

  border: 2px solid;

  border-radius: 100%;

  margin-left: -4px;

  margin-top: -4px

}

.gg-search::after {

  content: "";

  display: block;

  box-sizing: border-box;

  position: absolute;

  border-radius: 3px;

  width: 2px;

  height: 8px;

  background: currentColor;

  transform: rotate(-45deg);

  top: 10px;

  left: 12px

}



.gg-search-pt {

  transform: scale(var(--ggs,0.85));

  margin-left: 0px;

  margin-top: -4px

}



.gg-home-screen {

  display: block;

  position: relative;

  box-sizing: border-box;

  transform: scale(var(--ggs,1));

  width: 14px;

  height: 22px;

  border-radius: 3px;

  border: 2px solid

}

.gg-home-screen::after,

.gg-home-screen::before {

  content: "";

  display: block;

  position: absolute;

  box-sizing: border-box;

  border-radius: 2px;

  width: 2px;

  height: 2px;

  left: 1px;

  background: currentColor

}

.gg-home-screen::after {

  top: 1px;

  box-shadow:

      3px 0,6px 0,0 3px,

      3px 3px,6px 3px,0 6px

}

.gg-home-screen::before {

  bottom: 1px;

  box-shadow: 3px 0 0,6px 0 0

}



.gg-home-alt {

  box-sizing: border-box;

  position: relative;

  display: block;

  transform: scale(var(--ggs,1));

  width: 18px;

  height: 14px;

  border: 2px solid;

  border-top: 0;

  border-radius: 2px;

  border-bottom-left-radius: 3px;

  border-bottom-right-radius: 3px;

  margin-bottom: -2px

}

.gg-home-alt::after,

.gg-home-alt::before {

  content: "";

  display: block;

  box-sizing: border-box;

  position: absolute

}

.gg-home-alt::before {

  border-top: 2px solid;

  border-left: 2px solid;

  border-top-left-radius: 4px;

  transform: rotate(45deg);

  top: -5px;

  border-radius: 3px;

  width: 14px;

  height: 14px;

  left: 0

}

.gg-home-alt::after {

  width: 6px;

  height: 10px;

  background: currentColor;

  border-top-left-radius: 100px;

  border-top-right-radius: 100px;

  left: 4px;

  bottom: -2px

}



.gg-user-list {

  display: block;

  transform: scale(var(--ggs,1));

  box-sizing: border-box;

  width: 20px;

  height: 18px;

  background:

    linear-gradient(

      to left,

      currentColor 8px,

      transparent 0)

      no-repeat 14px 4px/6px 2px,

    linear-gradient(

      to left,

      currentColor 8px,

      transparent 0)

      no-repeat 14px 8px/6px 2px,

    linear-gradient(

      to left,

      currentColor 8px,

      transparent 0)

      no-repeat 14px 12px/6px 2px

}

.gg-user-list::after,

.gg-user-list::before {

  content: "";

  display: block;

  box-sizing: border-box;

  position: absolute;

  border: 2px solid

}

.gg-user-list::before {

  width: 8px;

  height: 8px;

  border-radius: 30px;

  top: 0;

  left: 2px

}

.gg-user-list::after {

  width: 12px;

  height: 9px;

  border-bottom: 0;

  border-top-left-radius: 3px;

  border-top-right-radius: 3px;

  top: 9px

}



.gg-desk,

.gg-desk::before {

    display: block;

    box-sizing: border-box

}

.gg-desk {

    position: relative;

    transform: scale(var(--ggs,1));

    width: 18px;

    height: 18px;

    border: 2px solid;

    border-top: 4px solid;

    border-radius: 3px

}



.gg-credit-card {

  box-sizing: border-box;

  position: relative;

  display: block;

  transform: scale(var(--ggs,1));

  width: 24px;

  height: 18px;

  border: 2px solid;

  border-radius: 4px

}

.gg-credit-card::after,

.gg-credit-card::before {

  content: "";

  display: block;

  box-sizing: border-box;

  position: absolute;

  border-radius: 3px;

  width: 24px;

  left: -2px;

  height: 2px;

  background: currentColor;

  top: 9px

}

.gg-credit-card::before {

  width: 6px;

  left: 2px;

  top: 3px

}



.gg-menu-grid-o {

  box-sizing: border-box;

  position: relative;

  display: block;

  transform: scale(var(--ggs,1));

  width: 16px;

  height: 16px;

}

.gg-menu-grid-o::before {

  content: "";

  display: block;

  box-sizing: border-box;

  position: absolute;

  width: 4px;

  height: 4px;

  background: currentColor;

  box-shadow:

      0 6px 0,

      6px 6px 0,

      12px 6px 0,

      6px 12px 0,

      12px 12px 0,

      6px 0 0,

      12px 0 0,

      0 12px 0

  ;

  border-radius: 22px;

}



.gg-options {

    box-sizing: border-box;

    position: relative;

    display: block;

    transform: scale(var(--ggs,1));

    width: 10px;

    height: 2px;

    box-shadow:

        -3px 4px 0 0,

        3px -4px 0 0

}

.gg-options::after,

.gg-options::before {

    content: "";

    display: block;

    box-sizing: border-box;

    position: absolute;

    width: 8px;

    height: 8px;

    border: 2px solid;

    border-radius: 100%

}

.gg-options::before {

    top: -7px;

    left: -4px

}

.gg-options::after {

    bottom: -7px;

    right: -4px

}



.actions {

  display: flex;

}



.action {

 width: 30px;

 height: 30px;

 display: flex;

 justify-content: center;

 align-items: center;

 padding:5px;

 border-radius: 5px;

 margin-right: 5px;

 color: white;

}



.action:hover {

  color: white;

  opacity: 0.7;

 }



.action.delete { background: var(--framboise); }

.action.voir { background: var(--creme); color:var(--fonce);   }

.action.voirdash { width: auto; gap:5px   }

.action.edit { background: var(--orange) }



/* Switch */

.switch {

  position: relative;

  display: inline-block;

  width: 47px;

  height: 23px;

}



.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}



.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

}



.slider:before {

  position: absolute;

  content: "";

  height: 18px;

  width: 18px;

  left: 3px;

  bottom: 3px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}







input:checked + .slider {

  background-color: var(--vert);

}





input:checked + .slider:before {

  -webkit-transform: translateX(21px);

  -ms-transform: translateX(21px);

  transform: translateX(22px);

}



/* Rounded sliders */

.slider.round {

  border-radius: 23px;

}



.slider.round:before {

  border-radius: 50%;

}



/*  Fin switch */



@media screen and (max-width: 700px) {

  #accordion {

    display: block;

  }

  #accordion h3 {

    position: absolute;

    top: -60px;

    right: 0;

  }



  select#proj {

    display: block;

    max-width: 100%;

  }

}



.table > tbody > tr:last-child > td {

  border: 0;

}

.table > thead:first-child > tr:first-child > th:first-child {

  border-radius: 15px 0 0 0;

}



.table > thead:first-child > tr:first-child > th:last-child {

  border-radius: 0 15px 0 0;

}

.table > tbody > tr:last-child > td:first-child {

  border-radius: 0 0 0 15px;

}

.table > tbody > tr:last-child > td:last-child {

  border-radius: 0 0 15px 0;

}



.table-striped tbody tr:nth-of-type(odd) {

  background-color: transparent;

}



/* Details */



.mep {

  display: flex;

  flex-wrap: wrap;

}



.mp-12,

.mp-4,

.mp-3,

.mp-6 {

  padding: 0px 15px;

}



.mp-12 {

  width: 100%;

}



.mp-4 {

  width: 33.3%;

}



.mp-3 {

  width: 25%;

}



.mp-6 {

  width: 50%;

}



.intro {

  margin: 40px 0 0 0;

}



.badgeok {

  background-color: var(--fonce);

  border-radius: 5px;

  padding: 4px 8px;

  color: white;

  font-size: 12.5px;

}



.entete {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin: 10px 0 0 0;

}



tr.link:hover td {

  background-color: var(--blue)!important;

}



.entete h1 {

  font-size: 42px;

  color: var(--framboise);

  font-weight: 700;

}



.etat {

  display: flex;

  align-items: center;

}



.point {

  width: 15px;

  height: 15px;

  border-radius: 50%;

  margin-right: 10px;

  background-color: #f71414;

  font-size: 1px; 

  color: transparent;

  text-align: center;

}

.point.active {

  background-color: var(--vert);

}

.etat .text {

  font-size: 13px;

  font-weight: 700;

  color: var(--fonce);

}



.box {

  padding: 20px;

  border-radius: 10px;

  margin: 20px 0;

}



.box_dash {

 display: flex;

 gap: 30px;

 margin: 0;

 height: 100%;

}

.box_container {

  margin-bottom: 20px;

}







.img-illus-box {

  margin: 5px auto;

  width: 100%;

  min-width: 50px;

  max-width: 80px;

  opacity: 0.3;

  display: block;

}



.infos {

  color: var(--fonce);

  background-color: white;

}

.quittances {

  color: var(--fonce);

  background-color: white;

}

.periode {

  color: white;

  background-color: var(--framboise);

}

.montant {

  color: white;

  background-color: var(--fonce);

}



.darkb {

  color: white;

  background-color: var(--fonce);

}



.framboise {

  color: white;

  background-color: var(--framboise);

}



.infos p {

  color: var(--fonce);

  font-size: 15px;

  margin: 0;

}



.infos p strong,

.infos p strong a {

  color: var(--framboise);

}



.infos h2 {

  font-weight: 700;

  font-size: 24px;

  margin: 0;

  padding: 12px 0;

}



.infos .periodes {

  display: flex;

}



.infos .periodes > div.periodes_start {

  padding-right: 30px;

}



.infos .periodes > div.periodes_end {

  border-left: 2px solid var(--fonce);

  padding-left: 30px;

}



.infos .periodes > div > div {

  font-size: 12px;

}



.infos .periodes > div > h3 {

  font-size: 18px;

  margin: 0;

  font-weight: 700;

}



.periode .stitre {

  font-size: 13px;

  color: var(--fonce);

  /* background: #fff; */

  /* border-radius: 20px; */

  line-height: 1;

  padding: 1px 5px;

}





.periode .chiffre1 {

  font-size: 20px;

  line-height: 1;

  font-weight: 700;

  color: white;

  padding-left: 5px;

  padding-bottom: 10px;

}



.periode .chiffre1 span {

  font-size: 14px;

}



.periode .chiffre2 {

  font-size: 18px;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--fonce);

}



.montant .stitre {

  font-size: 14px;

  color: white;

}

.box_dash .stitre {

  font-size: 18px;

  color: white;

}



.montant .chiffre1{

  font-size: 42px;

  font-weight: 700;

  color: white;

}



.box_dash .chiffre1 {

  font-size: 50px;

  font-weight: 700;

  color: white;

}



.montant .chiffre2, .box_dash .chiffre2 {

  font-size: 25px;

  font-weight: 700;

  color: white;

}







.quittance {

  color: var(--fonce);

  font-size: 28px;

  font-weight: 700;

  margin: 0;

  margin-top: 20px;

}



.quittances {

}



.quittances h3 {

  color: var(--framboise);

  font-size: 28px;

  font-weight: 700;

  margin: 8px 0;

}



.quittances .ligne {

  display: flex;

  padding: 13px 0;

  border-bottom: 1px solid #ddd;

}



.quittances .ligne .cbox {

  margin: 0;

  margin-right: 10px;

  border: 1px solid var(--fonce);

  border-radius: 5px;

  background-color: white;

}



.quittances .label {

  font-size: 15px;

  font-weight: 700;

  color: var(--fonce);

}



.tele {

  padding: 10px 30px;

  border-radius: 40px;

  background-color: var(--framboise);

  font-weight: 700;

  color: white;

  font-size: 16px;

  margin: 0 0 60px 0;

  border: 0;

  display: inline-block;

}



.redbutton {

  padding: 10px 30px;

  border-radius: 40px;

  background-color: var(--framboise);

  font-weight: 700;

  color: white;

  font-size: 16px;

  margin: 10px 0;

  border: 0;

  display: inline-block;

}



.premium-offre {

  margin: 0;

  padding: 10px 20px; 

  background: #fff;

  border-bottom: 1px solid #b30029;

  text-align: center;

  display: flex;

  justify-content: center;

  align-items: center;

}





.premium-offre a, .premium-offre-set a {

  background-color:var(--vert);

  padding: 3px 10px;

  color: white;

  font-weight: 400;

  font-size: 14px;

}



.form-control::placeholder {

  font-size: 13px;

}



h3 {

  color: var(--framboise);

  font-weight: 700;

}



form h3 {

  margin-top: 30px;

}



.disab td {

  background-color: #d1cfc8!important

}



/*Account*/

.account-body{

  /* background:#cdcabc url("https://app.quittanceplus.fr/img/fond3.jpg") no-repeat top center fixed; */
  background-image:url("https://app.quittanceplus.fr/img/fond3.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-x: center;
  background-position-y: top;
  background-size: cover;
  background-color: #cdcabc;

}

.backimg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.account-body > .container{
  position: relative;
}




.eye-icon {

  cursor: pointer;

}



.textaccount {

  font-size: 13px;

}



.mdp {

  font-size: 12px;            

  padding-left: 8px;

  padding-top: 5px;

}

.mdp > div {

  display: inline;

}



#passwordMatch {

  color: var(--framboise);            

  padding-left: 8px;

  padding-top: 5px;

  font-size: 12px;   

} 



.box-account a  {

  color: var(--framboise);

} 



.box-account .passlost a {

 color:black;

 font-size: 12px;

 margin-right: 20px;

}



.box-account a:hover {

  color: var(--framboise-fonce);

} 



.account-body .form-control {

  padding: 10px;

  border-radius: 40px;

}



.btn-outline-secondary {

    border-radius: 0 40px 40px 0;

    background: var(--fonce);

    color: white;

}



.account-body .form-label {

  margin-bottom: 0.2rem;

  font-size: 14px;

  font-weight: 700;

  padding-left: 8px;

}





.account-logo img{

  width: 100%;

  display: block;

  margin: 0 auto;

  max-width:200px;

  height: auto;

}



.box-account{

  border-radius: 20px;

  background-color: var(--creme);

  padding: 30px;

}



th[data-sort] .int {

  cursor: pointer;

    display: flex;

    align-items: center;

}



th[data-sort] .int:after {

  content:"\f0dc";

  display: inline-block;

  font: normal normal normal 14px/1 FontAwesome;

  font-size: inherit;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  opacity:0.4;

  padding-left: 10px;

}



th[data-sort].asc .int:after {

content:"\f0de";

opacity: 1;

}

th[data-sort].desc .int:after {

content:"\f0dd";

opacity: 1;

}



.th-text-color {

  color: var(--framboise)!important;

}





footer {

  padding: 10px 0;

  background-color: #011627;

}





footer .col-sm-12 {

  text-align: center;

  color: white;

}



footer ul.menufoot {

  list-style: none;

  display: flex;

  gap: 15px;

  justify-content: center;

  padding: 0;

  margin: 0;

}



.copyr {

  padding: 0;

  margin: 3px 0;

  font-size: 13px;

}





.menufoot a {

  font-size: 14px;

  color: #d3214c;

}





@media screen and (max-width: 992px) {

  .navbar-brand > img {

    width: 100%;

    max-width: 300px;

    margin: 0 auto;

    height: auto;

    display: block;

  }



  .navbar-nav {

    margin: 0;

    display: flex;

  }

}



@media screen and (max-width: 720px) {

  .navbar .container {

    display: flex;

    flex-direction: column;

    padding: 0;

    width: 100%;

    max-width: 100%;



  }



  .desktop {

    display: none;

  }

  .column_prenom,

  .column_etat,

  .column_entree,

  .column_sortie,

  table > thead > tr > th[data-orderby="locataires.prenom"],

  table > thead > tr > th[data-orderby="locataires.etat"],

  table > thead > tr > th[data-orderby="locataires.date_entree"],

  table > thead > tr > th[data-orderby="locataires.date_sortie"] {

    display: none;

  }



  .table-striped tr > td,

  .table-striped tr > th {

    font-size: 13px;

    padding: 12px 6px;

  }



  .btn-group.pull-right {

    display: none;

  }



  .mp-12,

  .mp-4,

  .mp-3,

  .mp-6 {

    width: 100%;

  }



  .navbar {

    margin-bottom: 0px;

  }

  .container > .navbar-header {

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    width: 100%;

    display: flex;

    justify-content: space-between;

  }



  .navbar-brand {

    padding: 8px 15px 0 15px !important;

  }



  .navbar-nav > li > a {

    padding-top: 6px;

    padding-bottom: 6px;

    padding: 6px 20px;

    line-height: 20px;

    border-radius: 10px;

  }

  .navbar-nav {

    margin: 0;

  }



  .nav {

    display: flex;

    justify-content: center;

  }



  h2 {

    font-size: 30px;

  }



  .entete h1 {

    font-size: 29px;

  }

  .infos h2,

  .quittance {

    font-size: 20px;

  }



  .entete {

    align-items: flex-start;

    flex-direction: column;

  }



  .chiffre1 {

    font-size: 32px;

  }



  .chiffre2 {

    font-size: 18px;

  }



  .navbar-brand > img {

    width: 100%;

    max-width: 200px;

    margin: 0 auto;

    height: auto;

    display: block;

  }



  .intro {

    margin: 0;

  }

}





@media screen and (max-width:520px) {

  #bs-example-navbar-collapse-1 {

    position: fixed;

    bottom: 0;

    z-index: 9999;

    width: 100%;

    background: #f1efe7;

  }



  footer

  {

      padding-bottom: 110px;

  }



  #bs-example-navbar-collapse-1 > ul {

    padding: 15px;

    /* margin: 20px; */

    width: 100%;

    /* border-radius: 20px; */

    background-color: white;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    margin-right:0

  }



  .navbar-default .navbar-nav > li > a {

    font-size: 13px;

    display: flex;

    gap:5px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    margin-right: 0;

    padding:4px

  }



  .tele {

    padding: 7px 20px;

    font-size: 15px;

  }



  .tele {

    padding: 7px 20px;

    font-size: 15px;

  }



  .navbar-default .navbar-nav > li > a:last-child {

    margin-right: 0px;

}

  .navbar-nav > li > a > .icon {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 30px;

  }



  .navbar-nav.nav {

    display: flex;

    justify-content: space-around;

  }



  .navbar-nav > li > a > .icon > i {

    color:#b30029;

  }



  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

    background: transparent;

    color:#b30029

  }



  .dashh2 {

    font-size: 22px;

  }

  #searchInput {

    max-width: 120px;

  }



  .navbar-default .navbar-nav > li:hover > a {

    background-color: #eceae3;

    text-decoration: none;

    border-radius: 6px;

  }



  th[data-sort] .int:after {

    padding-left: 4px;

}



  .col_etat span {

    display: none;

  }

  .col_etat .int {

    min-height: 20px;

  }

}