@font-face {
  font-family: 'Cairo-ExtraLight';
  src: url('fonts/Cairo-ExtraLight.ttf');
}

@font-face {
  font-family: 'Cairo-Light';
  src: url('fonts/Cairo-Light.ttf');
}

@font-face {
  font-family: 'Cairo-Regular';
  src: url('fonts/Cairo-Regular.ttf');
}

@font-face {
  font-family: 'Cairo-Medium';
  src: url('fonts/Cairo-Medium.ttf');
}

@font-face {
  font-family: 'Cairo-SemiBold';
  src: url('fonts/Cairo-SemiBold.ttf');
}

@font-face {
  font-family: 'Cairo-Bold';
  src: url('fonts/Cairo-Bold.ttf');
}

@font-face {
  font-family: 'Cairo-ExtraBold';
  src: url('fonts/Cairo-ExtraBold.ttf');
}

@font-face {
  font-family: 'Cairo-Black';
  src: url('fonts/Cairo-Black.ttf');
}

@font-face {
  font-family: 'Cairo-VariableFont';
  src: url('fonts/Cairo-VariableFont_slntwght.ttf');
}

@font-face {
  font-family: 'The-Sans-Plain';
  src: url('fonts/The-Sans-Plain.otf');
}


/* CSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.1s;
  /*border: 1px solid #092c56;*/
}

#loadingDiv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 9999;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
a {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

bold {
  font-weight: bolder;
}

body {
  cursor: default;
  font-family: 'Cairo-Regular', sans-serif;
  background-color: #FFFFFF;
  --content-background: rgba(255, 255, 255, 0.7);
  --primary-color: #20bcdd;
  --secondary-color: #0263ac;
  --primary-color-transparent: #20bedda2;
  --secondary-color-transparent: #0262acc7;

  --primary-color-hover: #32d4fb;
  --secondary-color-hover: #03487c;
  --dark-color: #033152;
  --dark-color-transparent: #033152a2;
  --light-color: #52dbfc;

  /*60%*/
  --bs-body-font-family: 'Cairo-Regular';
  --font-12: 7.2px;
  --font-13: 7.8px;
  --font-14: 8.4px;
  --font-15: 9px;
  --font-16: 9.5px;
  --font-18: 10.8px;
  --font-19: 11.4px;
  --font-20: 12px;
  --font-21: 12.6px;
  --font-22: 13.2px;
  --font-23: 13.8px;
  --font-24: 14.4px;
  --font-25: 15px;
  --font-26: 15.6px;
  --font-27: 16.2px;
  --font-28: 16.8px;
  --font-29: 17.4px;
  --font-30: 18px;
  --font-32: 19.2px;
  --font-35: 21px;
  --font-37: 22.2px;
  --font-38: 22.8px;
  --font-40: 24px;
  --font-43: 25.8px;
  --font-44: 26.4px;
  --font-45: 27px;
  --font-47: 28.2px;
  --font-50: 30px;
  --font-52: 31.2px;
  --font-55: 33px;
  --font-56: 33.6px;
  --font-78: 46.8px;
  --font-82: 48.62px
    /*80%*/
    /*  --font-12: 9.6px;
    --font-13: 10.4px;
    --font-14: 11.2px;
    --font-15: 12px;
    --font-18: 14.4px;
    --font-19: 15.2px;
    --font-20: 16px;
    --font-21: 16.8px;
    --font-22: 17.6px;
    --font-23: 18.4px;
    --font-24: 19.2px;
    --font-25: 20px;
    --font-26: 20.8px;
    --font-27: 21.6px;
    --font-28:22.4px;
    --font-29: 23.2px;
    --font-30: 24px;
    --font-32: 25.6px;
    --font-35: 28px;
    --font-37: 29.6px;
    --font-38: 30.4px;
    --font-40: 32px;
    --font-43: 34.4px;
    --font-44: 35.2px;
    --font-45: 36px;
    --font-47: 37.6px;
    --font-48: 48.62px
    --font-50: 40px;
    --font-52: 41.6px;
    --font-55: 44px;
    --font-56: 44.8px;
    --font-82: 48.62px
  */
}

/*Custom Bootstrap*/
.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

.btn-primary {
  border-radius: 0px;
  background-color: var(--primary-color) !important;
  width: 100%;
  border: none;
}

.btn-primary:hover {
  border-radius: 0px;
  background-color: var(--primary-color-hover) !important;

}

.btn-secondary {
  border-radius: 5px;
  background-color: var(--secondary-color) !important;
  width: 100%;
  border: none;
}

.btn-secondary:hover {
  background-color: var(--secondary-color-hover) !important;
  transition: 0.5s;
}

.link-primary {
  color: var(--primary-color) !important;
}

.link-primary:hover {
  color: var(--primary-color-hover) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--primary-color-hover) !important;
}

.slick-next:before {
  content: '';
}

.slick-prev:before {
  content: '';
}


/***********************************************************/
/****************** Tags customisation  *********************/
/***********************************************************/

.h1-inverted {
  display: inline-block;
  position: relative;
  font-family: 'Cairo-Black';
  font-size: var(--font-43);
  color: var(--primary-color);
  margin-bottom: 20px;

}

.h1-inverted::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  border: solid white;
  width: 60px;
  border-width: 2px;
  text-align: center;
}


h1 {
  display: inline-block;
  position: relative;
  font-family: 'Cairo-Black';
  font-size: var(--font-55);
  color: var(--dark-color);
  margin-bottom: 20px;

}

h1::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
  text-align: center;
}


/***********************************************************/
/***********************************************************/
html,
body {
  height: 100%;
  overflow-x: hidden;
}

.logo {

  width: auto;
  height: 60px;
  margin-bottom: 10px;
  margin-left: 10px;
}


.img-full {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.active {
  background-color: var(--primary-color);
  border-radius: 10px;
  color: white !important;
}

.section_padding {
  padding: 0 10%;
}

.navbar-toggler {
  border-color: var(--primary-color);
  --bs-navbar-toggler-focus-width: 0px;
}

.navbar-toggler:focus {
  outline-color: var(--primary-color);
  border: solid 2px var(--primary-color);
}

.navbar-toggler i {
  color: var(--primary-color);
  font-size: 20px;

}

/***********************************************************/
/**********************Tableau documents requises************************/
/***********************************************************/

table {
  width: 100%;
}

/***********************************************************/
/**********************Body BG************************/
/***********************************************************/

body {
  position: relative;
}

/***********************************************************/
/**********************Header-Footer************************/
/***********************************************************/
header {
  position: relative;
  font-size: var(--font-18);
  font-family: 'Cairo-Bold';
  color: black;
  margin-bottom: 50px;
  width: 100%;
}

/*
header::after {
  content: "";
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100vw;
  height: 956px;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image: url('../img/headerlayer.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100vw auto;
  z-index: -100;

}*/

header button {
  font-size: var(--font-18) !important;
  color: rgb(255, 255, 255);
}

header .dropdown-menu {
  font-size: var(--font-18);
  font-family: 'Cairo-Bold';
  background-color: var(--primary-color);
  border-radius: 0;
  width: 572px;

}

header .dropdown-menu[data-bs-popper] {
  top: 84%;
  left: -1px;
  margin-top: var(--bs-dropdown-spacer);
}

header .dropdown-item {
  background-color: var(--primary-color);
  color: white;
  margin: 5px auto 5px auto;
}

header .dropdown-item:hover {
  background-color: var(--primary-color);
  color: var(--dark-color);
}

header .nav-item {
  color: black !important;
  font-weight: bold;
}

header .nav-item .nav-link {
  font-size: 13px;
}

header .navbar-brand img {
  font-size: 13px;
  height: 75px;
}

main {
  position: relative;
}

main .white-bg-layer {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 50%;
  margin-right: -50vw;
  width: 100vw;
  height: 100%;
  background-color: #ffffff99;
  z-index: -8;
}


footer {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  /*background-color: #00d6ff;*/

  background-image: url('../img/bg-footer.png');
  background-size: contain;
}

footer .btn {
  border-color: white;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0px 0px 2px 5px #99eeff !important;
  font-size: var(--font-24);
}

footer ul li a.nav-link {

  font-size: var(--font-26);
}

footer .logos {
  display: flex;
}

footer .logos img {
  height: 95px;
  margin: 0 10px;
}

.coppyright-container {
  position: relative;
  padding: 5px;
  background-color: white;
  width: 100%;
}

/*
.coppyright-container::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 650px;
  background-image: url('../img/footerlayer-darker.png');
  background-repeat: no-repeat;
  background-position: center;
  z-index: -100;
}
*/

.coppyright {
  font-size: var(--font-18);
  font-family: 'Cairo-Medium';
  width: 100vw;
  text-align: center;
  margin: 10px;
}

/***********************************************************/
/********************* Acceuil  ****************************/
/***********************************************************/


.acceuil .banner-section {
  padding: 0;
  margin: 0;
  height: min-content;
}

.acceuil .banner-section .titre>h1 {
  font-family: 'Cairo-Black';
  font-size: var(--font-56);
  color: white;
  margin: 75px 0 10px 40px;
  text-align: center;
  width: 100%;
}

.acceuil .banner-section .titre>h1::after {
  position: absolute;
  content: '';
  border: none;
}

.acceuil .banner-section .sub-title h2 {
  font-family: 'The-Sans-Plain';
  font-size: var(--font-52);
  color: white;
  margin: 5px 0 10px 32px;

  text-align: center;
  width: 100%;
}

.acceuil .banner-section .bouton {

  text-align: center;
  width: 100%;
}

.acceuil .banner-section .bouton>a {
  font-family: 'Cairo-Bold';
  font-size: var(--font-24);
  width: auto;
  padding: 8px 25px;
  border-radius: 10px;
  margin: 5px;
  box-shadow: 0px 0px 6px #ffffff;
}

.acceuil .banner-section .banner-row-bg {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

.acceuil .banner-section .banner-row-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: #00d6ff;
  clip-path: polygon(0 20%, 100% 30%, 100% 100%, 0 100%);
  z-index: -1;
  background-image: url('../img/headerlayer.png');
  background-size: cover;
}

.acceuil .services-assurance {
  padding: 50px;
}

.acceuil .services-assurance-btns {
  padding: 50px;

}

.acceuil .services-assurance a {
  font-size: var(--font-24);
  font-family: 'Cairo-Black';
  color: var(--dark-color);
  text-decoration: none;
  padding: 10px;

}

.acceuil .cart {
  height: 150px;
  background-color: white;
  border: solid 1px var(--primary-color);
  display: grid;
  padding: 20px;
}


.acceuil .secton-nouveautes {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100vw;
  background-color: var(--secondary-color);

}

.acceuil .secton-nouveautes .dateetsource-article {
  font-family: 'Cairo-Bold';
  font-size: var(--font-15);
  color: var(--light-color);
  padding: 10px 0;
}

.acceuil .secton-nouveautes a {
  font-family: 'Cairo-Bold';
  font-size: var(--font-20);
  color: var(--primary-color-hover);
  text-decoration: none;
}

.acceuil .secton-nouveautes p {
  font-family: 'Cairo-Bold';
  font-size: var(--font-25);
  color: white;
  height: 40px;
  text-decoration: none;
}


.acceuil .h1-inverted {
  display: inline-block;
  position: relative;
  font-family: 'Cairo-Black';
  font-size: var(--font-55);
  color: var(--primary-color);
  margin-bottom: 20px;

}

.acceuil .h1-inverted::after {
  content: "";
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  bottom: -20px;
  border: solid white;
  width: 60px;
  border-width: 2px;
  text-align: center;
}

.acceuil .slick-dots {
  position: relative;
  list-style: none;
  bottom: 0;
}

.acceuil .slick-dots li {
  width: 30px;
  height: auto;
  color: white;
  border: solid 1px white;
  border-radius: 100%;
  font-family: 'Cairo-Regular';
}

.acceuil .slick-dots .slick-active {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.acceuil .btn-prev-next-position {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.acceuil .btn-prev-next-position button {
  background-color: transparent;
  color: white;
  border: solid 1px white;
  width: auto;
  height: 27px;
  border: none;
  margin-left: 5px;
  margin-right: 5px;
}

.acceuil .MAP-liste-des-centres {
  position: relative;
}

.acceuil .MAP-liste-des-centres .white-bg {
  position: absolute;
  left: 50%;
  right: 50%;
  top: 0;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  height: 100%;
  background-color: rgb(255, 255, 255);
  z-index: -5;
}

.acceuil .map-container {
  position: relative;
  background-color: #ffffff;
  height: 700px;
  margin-top: 20px;
}

.acceuil .floatingContainer {
  position: absolute;
  display: flex;
  flex-direction: column;
  /*background-image: url(../img/map-selection.png);*/
  /*background-repeat: repeat;*/
  background: #fff;
  height: auto;
  max-width: 320px;
  padding: 8px 15px;
  color: black;
  z-index: 50;
  box-shadow: -14px 3px 32px -10px var(--primary-color);
  -webkit-box-shadow: -14px 3px 32px -10px var(--primary-color);
  -moz-box-shadow: -14px 3px 32px -10px var(--primary-color);
  transition: 0s;
  visibility: hidden;
}
.info_bull_data{
  height: 0;
  overflow: auto;
  opacity: 0;
}
.acceuil .floatingContainer .region {
  font-size: var(--font-28);
  font-family: 'Cairo-Black';
  color: var(--primary-color);
  line-break: auto;
padding-bottom: 5px;
}

.acceuil .floatingContainer .nom-du-centre {
  font-size: var(--font-22);
  font-family: 'Cairo-Bold';
  color: black;
}

.acceuil .floatingContainer .ville {
  font-size: var(--font-22);
  font-family: 'Cairo-Regular';
  /*padding-top: 10px;*/
  color: black;
  line-break: auto;

}

.acceuil .contactInfoContainer {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 250px;
  width: 35%;
  overflow-y: auto;

}

.acceuil .contactInfoContainer .decoration {
  position: relative;
  margin-top: 25px;
}

.acceuil .contactInfoContainer .decoration bold {
  font-family: 'Cairo-Black';
}

.acceuil .contactInfoContainer .decoration::before {
  position: absolute;
  content: '';
  top: -10px;
  right: 0;
  width: 30px;
  border-top: solid 4px green;
}


/***********************************************************/
/*********************  About   ****************************/
/***********************************************************/
.about {
  width: 90%;
  padding-top: 50px;

  margin: auto;
}


.about h1 {
  margin-bottom: 50px;
}

.about h1::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
}

.about .about-paragraph {
  padding: 25px;
  margin-bottom: 120px;
}
.about .about-paragraph ul{
  margin-right: 40px;
}
.about .about-paragraph ul,
.about .about-paragraph h4,
.about .about-paragraph p{
  margin-bottom: 10px;
}

/***********************************************************/
/****************      nouveautes       *******************/
/***********************************************************/

.nouveautes {
  width: 90%;
  margin: auto;
}

.nouveautes>div>h1 {
  margin-top: 75px;
  margin-bottom: 75px;
}

.nouveautes h1::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
}

.nouveautes .dateetsource-article {
  font-family: 'Cairo-Bold';
  font-size: var(--font-20);
  color: var(--light-color);
  margin-bottom: 10px;
}

.nouveautes .card {
  margin: auto;
}

.nouveautes h2 {
  font-weight: bolder;
  margin-bottom: 50px;
  margin-top: 10px;
}

.nouveautes p:last-child {
  margin-bottom: 50px;
}


.nouveautes .card-link a {
  font-family: 'Cairo-Bold';
  font-size: var(--font-24);
  color: var(--light-color);
}


.nouveautes .slick-dots {
  position: relative;
  list-style: none;
  bottom: 0;
}

.nouveautes .slick-dots li {
  width: 30px;
  height: auto;
  color: black;
  border: solid 1px black;
  border-radius: 100%;
  font-family: 'Cairo-Regular';
}

.nouveautes .slick-dots .slick-active {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.nouveautes .btn-prev-next-position {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.nouveautes .btn-prev-next-position button {
  background-color: transparent;
  color: black;
  border: solid 1px black;
  width: 27px;
  height: auto;
  border: none;
  margin-left: 20px;
  margin-right: 20px;
}

/***********************************************************/
/****************  Preparation-Dossier   *******************/
/***********************************************************/

.preparation-dossier {
  width: 90%;
  margin: auto;
  padding-bottom: 90px;
}

.preparation-dossier>div>h1 {
  margin-top: 75px;
  margin-bottom: 75px;
}


.preparation-dossier h1::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
}

.preparation-dossier td,
.preparation-dossier tr {
  padding: 25px;
  font-size: var(--font-30);
}

.preparation-dossier p {
  font-size: var(--font-30);
}

.preparation-dossier th {
  font-size: var(--font-45);
}

.preparation-dossier .rounded-header-bg {
  position: relative;
  height: 100px;
  margin: 20px;
  font-family: 'cairo-black';
  text-indent: 25px;
}

.preparation-dossier .rounded-header-bg::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 15px;
  z-index: -1;
}


.preparation-dossier .rounded-bg {
  position: relative;
}

.preparation-dossier .rounded-bg::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  z-index: -2;
}

.preparation-dossier tbody {
  font-family: 'cairo-regular';
  font-size: 23px;
  text-overflow: clip;
}

.preparation-dossier .vertical-separator {
  position: relative;

}

.preparation-dossier .vertical-separator::after {
  position: absolute;
  content: '';
  top: 25%;
  left: 0;
  width: 100%;
  height: 50%;
  border-left: solid 2px white;
  z-index: 0;
}

.preparation-dossier .separator-grid td,
.preparation-dossier .separator-grid tr {
  position: relative;

}

.preparation-dossier .separator-grid tr:not(:last-child) td::after {
  position: absolute;
  content: '';
  bottom: 0;
  right: 25px;
  width: 90%;
  border-bottom: solid 2px #0000002d;
  z-index: 1;
}

.preparation-dossier .separator-grid tr:not(:first-child):not(:last-child) td:not(:first-child)::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: solid 2px #0000002d;
  z-index: 1;
}

.preparation-dossier .separator-grid tr:first-child td:not(:first-child)::before {
  position: absolute;
  content: '';
  top: 20%;
  left: 0;
  width: 100%;
  height: 80%;
  border-right: solid 2px #0000002d;
  z-index: 1;
}

.preparation-dossier .separator-grid tr:last-child td:not(:first-child)::before {
  position: absolute;
  content: '';
  bottom: 20%;
  left: 0;
  width: 100%;
  height: 80%;
  border-right: solid 2px #0000002d;
  z-index: 1;
}


/***********************************************************/
/****************  assurance-accident-scolaire   *******************/
/***********************************************************/


.assurance-accident-scolaire {
  position: relative;
  width: 90%;
  margin: auto;
  padding-bottom: 90px;
}

.liste-des-centres::after,
.services-dassurance::after,
.about::after,
.preparation-dossier::after,
.assurance-accident-scolaire::after {
  content: '';
  background-image: url(../img/footerlayer-2.png);
  background-repeat: no-repeat;
  /* background-position: bottom; */
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 270px;
  bottom: 0;
  z-index: -3;
}

.liste-des-centres::after {
  z-index: 1;
  opacity: 0.8;
}

.assurance-accident-scolaire .rounded-5 {
  padding: 0;
}

.assurance-accident-scolaire td {
  font-size: var(--font-30);
}

.assurance-accident-scolaire>div>h1 {
  margin-top: 75px;
  margin-bottom: 75px;
}

.assurance-accident-scolaire h1 {
  position: relative;
}

.assurance-accident-scolaire table h5 {
  font-family: 'Cairo-Black';
  font-size: var(--font-40);
  font-weight: bold;
  color: var(--dark-color);
  margin-bottom: 20px;

}

.assurance-accident-scolaire h1::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
}

.assurance-accident-scolaire h5 {
  font-family: 'Cairo-Bold';
  font-size: var(--font-38);
  font-weight: bold;
}

.assurance-accident-scolaire p {
  font-family: 'Cairo-Regular';
  font-size: var(--font-30);
  font-weight: 400;
}


.assurance-accident-scolaire .titre-tableau-b {
  font-family: 'Cairo-Black';
  font-size: var(--font-40) !important;
  font-weight: bolder;
  color: white;
}

.assurance-accident-scolaire .titre-tableau {
  font-family: 'Cairo-Black';
  font-size: var(--font-40) !important;
  font-weight: bolder;
  color: var(--dark-color);
}

.assurance-accident-scolaire .title-withlogo {
  display: block;
  position: relative;
  font-size: var(--font-28);
  font-family: 'Cairo-Medium';
  color: white;
  background-color: var(--primary-color);

  width: 290px;
  height: auto;
  padding: 13px;
  padding-right: 80px;
  margin-bottom: 30px;
}

.assurance-accident-scolaire .title-withlogo::before {
  content: '';
  position: absolute;
  background-image: url(../img/icones/school-white.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
  top: 0px;
  right: 0px;
  height: 50px;
  width: 60px;
  background-color: var(--secondary-color);
  border-radius: 15px;

}

.assurance-accident-scolaire tr,
.assurance-accident-scolaire td {
  padding: 5px;
}

.assurance-accident-scolaire .right-rounded-table-column {
  position: relative;
}

.assurance-accident-scolaire .right-rounded-table-column::after {
  position: absolute;
  content: '';
  background-color: white;
  height: 100%;
  width: 100%;
  border-radius: 30px;
  top: 0;
  left: 0;
  z-index: -2;
}

.assurance-accident-scolaire .right-rounded-table-column tr td:first-child {
  position: relative;
  color: white;
  font-family: 'Cairo-Regular';
  font-size: var(--font-30);
  width: 35%;
  padding: 35px 35px 35px 35px;
  vertical-align: top;
  border-bottom: 1px solid #fff;
}

.assurance-accident-scolaire .right-rounded-table-column tr:last-child td {
  border-bottom: none;
}

.assurance-accident-scolaire .right-rounded-table-column tr td:not(first-child) {
  position: relative;
  color: rgb(0, 0, 0);
  font-family: 'Cairo-Regular';
  font-size: var(--font-30);
}

.assurance-accident-scolaire .right-rounded-table-column tr:not(:first-child):not(:last-child) td:first-child::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--primary-color);
  z-index: -1;
}

.assurance-accident-scolaire .right-rounded-table-column tr:first-child td:first-child::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 30px 30px 0px 0px;
  z-index: -1;
}

.assurance-accident-scolaire .right-rounded-table-column tr:last-child td:first-child::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 0px 0px 30px 30px;
  z-index: -1;
}

.assurance-accident-scolaire .right-rounded-table-column tr td table {
  background-color: white;
  z-index: -2;
}

.assurance-accident-scolaire .right-rounded-table-column tr td table tr td {
  background-color: white;
  font-family: 'Cairo-Regular';
  font-size: 20px;
  color: black !important;
}

.assurance-accident-scolaire .right-rounded-table-column td:not(:first-child) {
  text-align: center;
}

.assurance-accident-scolaire .separator-grid td,
.assurance-accident-scolaire .separator-grid tr {
  position: relative;
}

.assurance-accident-scolaire .separator-grid tr:not(:last-child) td:not(:first-child):not(:nth-child(3)):after {
  position: absolute;
  content: '';
  bottom: 0;
  right: 10%;
  width: 90%;
  border-bottom: solid 2px #0000002d;
  z-index: -1;
}

.assurance-accident-scolaire .separator-grid tr:not(:last-child) td:nth-child(3)::after {
  position: absolute;
  content: '';
  bottom: 0;
  right: 0;
  width: 90%;
  border-bottom: solid 2px #0000002d;
  z-index: -1;
}


.assurance-accident-scolaire .separator-grid tr:not(:first-child):not(:last-child) td:not(:first-child):not(:nth-child(2)) ::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: solid 2px #0000002d;
  z-index: 1;
}

.assurance-accident-scolaire .separator-grid tr:first-child td:not(:first-child):not(:nth-child(2))::before {
  position: absolute;
  content: '';
  top: 20%;
  left: 0;
  width: 100%;
  height: 80%;
  border-right: solid 2px #0000002d;
  z-index: 1;
}

.assurance-accident-scolaire .separator-grid tr td:nth-child(3)::before {
  position: absolute;
  content: '';
  right: 0;
  bottom: 15%;
  width: 100%;
  height: 70%;
  border-right: solid 2px #0000002d;
  z-index: 1;
}

.assurance-accident-scolaire .separator-grid .separtorRow::before {
  position: absolute;
  content: '';
  right: 0;
  bottom: 15%;
  width: 100%;
  height: 70%;
  border-right: solid 2px #0000002d;
  z-index: 1;
}

.assurance-accident-scolaire tbody {
  font-family: 'cairo-regular';
  font-size: 23px;
  text-overflow: clip;
}

.assurance-accident-scolaire .vertical-separator {
  position: relative;
}

.assurance-accident-scolaire .vertical-separator::after {
  position: absolute;
  content: '';
  top: 25%;
  left: 0;
  width: 100%;
  height: 50%;
  border-left: solid 2px white;
  z-index: 0;
}


/***********************************************************/
/**************** services-dassurance   *******************/
/***********************************************************/


.assurance-accident-scolaire {

  width: 90%;
  margin: auto;
}

.services-dassurance>div>h1 {
  margin-top: 75px;
  margin-bottom: 75px;
}


.services-dassurance h5 {
  font-family: 'Cairo-Bold';
  font-size: var(--font-38);
  font-weight: bold;
}

.services-dassurance p {
  font-family: 'Cairo-Regular';
  font-size: var(--font-30);
  font-weight: 400;
}


.services-dassurance h1 {
  position: relative;
}


.services-dassurance h1::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
}

.services-dassurance .title-withlogo {
  display: block;
  position: relative;
  font-size: var(--font-28);
  font-family: 'Cairo-Medium';
  color: white;
  background-color: var(--primary-color);

  width: 550px;
  height: auto;
  padding: 13px;
  padding-right: 80px;
}

.services-dassurance .title-withlogo::before {
  content: '';
  position: absolute;
  background-image: url(../img/icones/businessman-white.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30%;
  top: 0px;
  right: 0px;
  height: 50px;
  width: 60px;
  background-color: var(--secondary-color);
  border-radius: 15px;

}

.services-dassurance .services-dassurance-paragraph {
  padding: 25px;
  margin-bottom: 120px;
}


/***********************************************************/
/**************** liste-des-centres   *******************/
/***********************************************************/


.liste-des-centres {

  width: 90%;
  margin: auto;
}

.liste-des-centres>div>h1 {
  margin-top: 75px;
  margin-bottom: 75px;
}


.liste-des-centres h5 {
  font-family: 'Cairo-Bold';
  font-size: var(--font-38);
  font-weight: bold;
  padding: 7px;
}

.liste-des-centres h1::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
}

.liste-des-centres .vertical-separator,
.liste-des-centres .vertical-separator-white {
  position: relative;

}

.liste-des-centres .vertical-separator::after,
.liste-des-centres .vertical-separator-white::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: solid 2px rgba(0, 0, 0, 0.233);
  z-index: 0;
}

.liste-des-centres .vertical-separator-white::after {
  top: 0;
  border-left: solid 2px white
}


.liste-des-centres .section-regions,
.liste-des-centres .section-contacts {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  background-color: #0262ac;
}

.liste-des-centres .section-contacts {
  background-color: white;
}


.liste-des-centres .section-regions h5 {
  font-family: 'Cairo-Black';
  font-size: var(--font-32);
  color: var(--primary-color);
}

.liste-des-centres .section-regions p {
  font-family: 'Cairo-Regular';
  font-size: var(--font-32);
  color: white;
}

.liste-des-centres .green-line {
  position: relative;
}

.liste-des-centres .green-line ::before {
  position: absolute;
  content: '';
  top: -15px;
  right: 0;
  width: 7%;
  border-bottom: solid 5px #4abc18;
  z-index: 1;
}


.liste-des-centres tr,
.liste-des-centres td {
  padding: 5px;
}

.liste-des-centres .right-rounded-table-column {
  position: relative;
  border-radius: 10px !important;
}

.liste-des-centres .right-rounded-table-column::after {
  position: absolute;
  content: '';
  background-color: white;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  top: 0;
  left: 0;
  z-index: -2;
}

.liste-des-centres .right-rounded-table-column tr td:first-child {
  position: relative;
  color: white;
  font-family: 'Cairo-Regular';
  width: 35%;
  padding: 5px 35px 5px 35px;
  vertical-align: top;
  font-size: var(--font-30);
  border-bottom: 1px solid #ffffff;
}
.table-centres.liste-des-centres tr td:nth-last-child(1),
.table-centres.liste-des-centres tr td:nth-last-child(2)
{
  background-color: white;
  color: #000 ;
  text-align: center;
}
.table-centres.liste-des-centres tr td:nth-last-child(1)::after ,
.table-centres.liste-des-centres tr td:nth-last-child(2)::after {
  border-bottom: solid 2px #0000002d !important;

}
.liste-des-centres .right-rounded-table-column tr:first-child td:first-child {
  border-radius: 10px;
}

.table-centres.liste-des-centres tr td
{
  /*border-bottom: solid 2px #0000002d*/
}
.table-centres.liste-des-centres tr td:nth-last-child(3)
{
  background-color:  var(--primary-color);
}
.table-centres.liste-des-centres tr td:nth-last-child(3)
{
  background-color:  var(--primary-color);
}
.liste-des-centres .right-rounded-table-column tr:last-child td {
}

.liste-des-centres .right-rounded-table-column tr td:not(first-child) {
  position: relative;
  color: rgb(0, 0, 0);
  font-family: 'Cairo-Regular';
  font-size: var(--font-30);
}

.liste-des-centres .right-rounded-table-column tr:not(:first-child):not(:last-child) td:first-child::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  /*background-color: var(--primary-color);*/
  /*z-index: -1;*/
}

.liste-des-centres .right-rounded-table-column tr:first-child td:first-child::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 10px 10px 0px 0px;
  z-index: -1;
}

.liste-des-centres .right-rounded-table-column tr:last-child td:first-child::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 0px 0px 10px 10px;
  z-index: -1;
}


.liste-des-centres .right-rounded-table-column td:not(:first-child) {
  /*text-align: center;*/
  vertical-align: middle;
}

.liste-des-centres .separator-grid td,
.liste-des-centres .separator-grid tr {
  position: relative;
}

.liste-des-centres .separator-grid tr:not(:last-child) td::after {
  position: absolute;
  content: '';
  bottom: 0;
  right: 10%;
  width: 80%;
  /*border-bottom: solid 2px #0000002d;*/
  /*z-index: -1;*/
}

.liste-des-centres .separator-grid tr td:first-child {
  position: relative;
  padding-left: 30px !important;
  padding-right: 30px !important;
}


.liste-des-centres .separator-grid tr:not(:first-child):not(:last-child) td:not(:first-child)::before {
  position: absolute;

}

.liste-des-centres .separator-grid tr:first-child td:not(:first-child)::before {
  position: absolute;
}

.liste-des-centres .separator-grid tr:last-child td:not(:first-child)::before {
  position: absolute;
}

.liste-des-centres .separator-grid tr td:first-child::after {
  position: absolute;
  border-bottom: none;
}

.liste-des-centres .separator-grid tr td p {
  position: relative;
  padding: 5px 15px 5px 15px;
  min-height: 100%;
  vertical-align: middle;
}

.liste-des-centres .separator-grid tr td:first-child p::after {
  position: absolute;
  content: '';
  top: -7px;
  left: 0;
  width: 100%;
  border-bottom: solid 2px white;
  z-index: 1;
}


.liste-des-centres tbody {
  font-family: 'cairo-regular';
  font-size: 23px;
  text-overflow: clip;
}


/*******************************************************/
/*************       login       ***********/
/*******************************************************/

.form_login {
  /*background: url("../images/bg3.png") center no-repeat;*/
  background-color: transparent;
  position: relative;

  background-size: cover;
  padding: 10% 0;

}

.form_login .login_container img {
  width: 50px;
  margin-bottom: 30px;
}

.form_login .login_container {
  width: 400px;
  max-width: 90%;
  margin: auto;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 30px;
  text-align: center;
}

.form_login .login_container .description {
  opacity: 0;
}


/***********************************************************/
/****************        inter1           *******************/
/***********************************************************/

.inter1 {}

.inter1 .button-center-container {
  min-height: 50vh;
  padding: 150px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inter1 .button-center-container>ul {
  list-style: none;
}

.inter1 .button-center-container>ul>li>a {
  font-family: 'cairo-black';
  font-size: var(--font-43);
  margin-bottom: 20px;
  border-radius: 12px;
  padding: 20px 60px;
  width: 500px;
}

/***********************************************************/
/**************** plainte-institution   *******************/
/***********************************************************/
.declaration-incident,
.plainte-tuteur,
.plainte-institution {
  padding: 75px 100px;
}

.declaration-incident h1,
.plainte-tuteur h1,
.plainte-institution h1 {
  margin-bottom: 75px;
  color: black;
}

.declaration-incident h1::after,
.plainte-tuteur h1::after,
.plainte-institution h1::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
}

.plainte-tuteur-iframe {
  height: 800px;
  width: 100%;
}

.plainte-institution-iframe {
  height: 600px;
  width: 100%;
}


.declaration-incident-iframe {
  height: 1280px;
  width: 100%;
}

.plainte-tuteur .top-buttons,
.plainte-institution .top-buttons {
  display: flex;
  flex-direction: row;
  flex-basis: auto;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 75px;
}

.plainte-tuteur .top-buttons a,
.plainte-institution .top-buttons a {
  font-family: 'Cairo-Black';
  font-size: var(--font-40);
  border-radius: 12px;
  padding: 15px 0px;
}

.plainte-tuteur .top-buttons .inverted,
.plainte-institution .top-buttons .inverted {
  background-color: white !important;
  color: var(--primary-color);
  border-style: solid;
  border-color: var(--primary-color);
}

.plainte-tuteur .top-buttons a:last-child,
.plainte-institution .top-buttons a:last-child {
  margin-right: 20px;
}

.declaration-incident .formulaire input,
.plainte-tuteur .formulaire input,
.plainte-institution .formulaire input {
  font-family: 'Cairo-Regular';
  font-size: var(--font-23);
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 12px;
  border-color: transparent;
  background-color: white;
  padding: 5px 10px;
  box-shadow: 0 0 10px rgba(128, 128, 128, 0.523);
}

.declaration-incident .formulaire,
.plainte-tuteur .formulaire,
.plainte-institution .formulaire {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.declaration-incident .formulaire a,
.plainte-tuteur .formulaire a,
.plainte-institution .formulaire a {
  align-self: self-end;
  width: 250px;
  font-family: 'Cairo-Bold';
  font-weight: bold;
  font-size: var(--font-30);
  margin-top: 50px;
  border-radius: 12px;
  padding: 10px 0px;
}

.declaration-incident .formulaire fieldset {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding-right: 10px;
}

.declaration-incident .formulaire fieldset input {
  width: 10px;
  margin-right: 10px;
  margin-left: 10px;
}

.declaration-incident .formulaire fieldset label {
  color: gray;
  font-family: 'cairo-regular';
  font-size: var(--font-23);
}


.declaration-incident .formulaire .checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  margin-right: 5px;
  cursor: pointer;
}

.declaration-incident .formulaire .checkbox-input:checked {
  background-color: var(--primary-color);
}

.declaration-incident .formulaire .title-label {
  width: 100px;
}

.declaration-incident .filesgroup {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding-right: 10px;
  padding-left: 10px;
  margin-top: 20px;

}

.declaration-incident .filesgroup label:first-child {
  width: 100%;
  font-family: 'Cairo-Regular';
  font-size: var(--font-23);
  margin-bottom: 5px;

}

.declaration-incident .filesgroup label:not(:first-child) {
  width: 100%;
  font-family: 'Cairo-ExtraBold';
  font-size: var(--font-23);
  font-weight: bolder;
  position: relative;
  display: inline-block;
  margin-bottom: 3px;
  border-bottom: solid 1px transparent;
  cursor: pointer;
}

.declaration-incident .filesgroup label:not(:first-child):hover {
  border-bottom: solid 1px var(--primary-color);
}

.declaration-incident .filesgroup label>img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
}


/***********************************************************/
/****************  suivi-dossier-auth    *******************/
/***********************************************************/

.suivi-dossier-auth {
  padding: 75px 100px;
}

.suivi-dossier-auth h1::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
}

.suivi-dossier-auth h2 {
  font-size: 'Cairo-Bold';
  font-weight: bold;
  font-size: var(--font-40);
  color: var(--primary-color);
}

.suivi-dossier-auth .formulaire {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.suivi-dossier-auth .formulaire h2 {
  align-self: self-start;
  margin: 50px 0px;
}

.suivi-dossier-auth .formulaire input {
  font-family: 'Cairo-Regular';
  font-size: var(--font-23);
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 12px;
  border-color: transparent;
  background-color: white;
  padding: 5px 10px;
  box-shadow: 0 0 10px rgba(128, 128, 128, 0.523);
}

.suivi-dossier-auth .formulaire button {
  align-self: self-end;
  width: 250px;
  font-family: 'Cairo-Bold';
  font-weight: bold;
  font-size: var(--font-30);
  margin-top: 50px;
  border-radius: 12px;
  padding: 10px 0px;
}



/***********************************************************/
/****************  Liste des dossiers    *******************/
/***********************************************************/
.dossier-id a {
  text-decoration: none;
  background-color: var(--primary-color-hover);
  color: white;
  border-radius: 20px;
  text-align: center;
  padding: 10px 25px 10px 25px;
}

.dossier-id a:hover {
  background-color: var(--primary-color);
}

ol {

  width: 100%;
  text-align: center;
  list-style-position: inside;
}

ol.gradient-list>li::before,
ol.gradient-list>li {
  box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.125rem rgba(75, 0, 0, 0.05);
}


ol.gradient-list {
  counter-reset: gradient-counter;
  list-style: none;
  margin: 1.75rem 0;
  padding-left: 1rem;
}

ol.gradient-list>li {
  background: white;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  counter-increment: gradient-counter;
  margin-top: 1rem;
  min-height: 3rem;
  padding: 5px 5px 5px 5px;
  position: relative;
  width: 400px;
}

ol.gradient-list>li::before,
ol.gradient-list>li::after {
  background: linear-gradient(135deg, #20bcdd 0%, #20bcdd 100%);
  border-radius: 1rem 1rem 1rem 0rem;
  content: "";
  height: 3rem;
  right: -1rem;
  overflow: hidden;
  position: absolute;
  top: -1rem;
  width: 3rem;
}

ol.gradient-list>li::before {
  align-items: flex-end;
  content: counter(gradient-counter);
  color: #fafafa;
  display: flex;
  font: 900 1.5em/1 "Montserrat";
  justify-content: flex-end;
  padding: 0.125em 0.25em;
  z-index: 1;
}

ol.gradient-list>li:nth-child(10n+1):before {
  background: linear-gradient(135deg, rgba(32, 188, 221, 0.2) 0%, rgba(2, 99, 172, 0.2) 100%);
}

ol.gradient-list>li:nth-child(10n+2):before {
  background: linear-gradient(135deg, rgba(32, 188, 221, 0.4) 0%, rgba(2, 99, 172, 0.4) 100%);
}

ol.gradient-list>li:nth-child(10n+3):before {
  background: linear-gradient(135deg, rgba(32, 188, 221, 0.6) 0%, rgba(2, 99, 172, 0.6) 100%);
}

ol.gradient-list>li:nth-child(10n+4):before {
  background: linear-gradient(135deg, rgba(32, 188, 221, 0.8) 0%, rgba(2, 99, 172, 0.8) 100%);
}

ol.gradient-list>li:nth-child(10n+5):before {
  background: linear-gradient(135deg, #20bcdd 0%, #0263ac 100%);
}

ol.gradient-list>li:nth-child(10n+6):before {
  background: linear-gradient(135deg, rgba(32, 188, 221, 0.8) 0%, rgba(2, 99, 172, 0.8) 100%);
}

ol.gradient-list>li:nth-child(10n+7):before {
  background: linear-gradient(135deg, rgba(32, 188, 221, 0.6) 0%, rgba(2, 99, 172, 0.6) 100%);
}

ol.gradient-list>li:nth-child(10n+8):before {
  background: linear-gradient(135deg, rgba(32, 188, 221, 0.4) 0%, rgba(2, 99, 172, 0.4) 100%);
}

ol.gradient-list>li:nth-child(10n+9):before {
  background: linear-gradient(135deg, rgba(32, 188, 221, 0.2) 0%, rgba(2, 99, 172, 0.2) 100%);
}

ol.gradient-list>li:nth-child(10n+10):before {
  background: linear-gradient(135deg, rgba(32, 188, 221, 0) 0%, rgba(2, 99, 172, 0) 100%);
}

ol.gradient-list>li+li {
  margin-top: 2rem;
}

ol.gradient-list>li>a {
  width: 100%;
  text-decoration: none;
  font-family: 'Cairo-Black';
  font-size: var(--font-25);
  color: var(--secondary-color);
}



ol.gradient-list>li>a:hover {

  color: var(--secondary-color-hover);
}


/***********************************************************/
/****************  suivi-dossier-Statut    *******************/
/***********************************************************/

.suivi-dossier-statut {
  padding: 75px 0px;
  min-height: 60vh;
}

.suivi-dossier-statut h1::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  border: solid var(--primary-color);
  width: 60px;
  border-width: 2px;
}

.suivi-dossier-statut h2 {
  font-family: 'Cairo-Bold';
  font-weight: bold;
  font-size: var(--font-40);
  color: var(--primary-color);
}

.suivi-dossier-statut .statut {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 150px;
  margin-bottom: 150px;

}

.suivi-dossier-statut .statut .statut-bullet {
  width: 150px;
  height: 100px;
  font-family: 'Cairo-Black';
  font-size: var(--font-40);
  color: grey;
  text-align: center;

}

.suivi-dossier-statut .statut .statut-bullet label:first-child {
  width: 56px;
  height: 56px;
  text-align: center;
  vertical-align: middle;
  border: grey solid 10px;
  border-radius: 100%;
  transform: translateX(-50%);
  margin-bottom: 20px;
  background-color: white;

}

.suivi-dossier-statut .statut .statut-bullet label:last-child {
  width: 100%;
  font-family: 'Cairo-SemiBold';
  font-size: var(--font-23);
  text-align: center;
  transform: translateX(-20%);
}

.suivi-dossier-statut .statut .statut-bullet {
  position: relative;
}

.suivi-dossier-statut .statut .statut-bullet:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 24px;
  right: -30px;
  width: 100%;
  border-bottom: 7px solid grey;
  z-index: -5;
}

.statut-bullet .accepted {}

.suivi-dossier-statut .statut .accepted label {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.suivi-dossier-statut .statut .accepted:not(:first-child)::before {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.statut-bullet .rejected {}

.suivi-dossier-statut .statut .rejected label {
  color: red !important;
  border-color: red !important;
}

.suivi-dossier-statut .statut .accepted label:last-child,
.suivi-dossier-statut .statut .rejected label:last-child {
  font-family: 'Cairo-Black';
  font-size: var(--font-30);
}

.suivi-dossier-statut .statut .rejected:not(:first-child)::before {
  color: red !important;
  border-color: red !important;
}

/***************************************************/
main div[role="contentinfo"] {
  text-align: center;
  color: red;
  font-size: 20px;
  font-family: 'Cairo-Black';

}