:root {
  --caps-green: rgb(48, 180, 167);
  --caps-green-50: rgba(48, 180, 167, 0.5);

  --caps-dark-blue: rgb(22, 60, 75);
  --caps-blue-green: rgb(67, 150, 167);
  --caps-paon: rgb(45, 105, 122);
  --caps-paon-50: rgba(45, 105, 122, 0.5);
  --caps-neon: rgb(163, 251, 246);

  --bg-dark: #0a0a0a;

  /* Ado User */
  /* Use Tailwind Teal */
  --caps-ado: rgb(127, 217, 208);
  --caps-ado-light: rgb(166, 236, 231);
  --caps-ado-dark: rgb(93, 177, 172);
  --caps-ado-accent: rgb(0, 173, 239);

  --caps-ado-50: rgb(240, 253, 250);
  --caps-ado-100: rgb(204, 251, 241);
  /* --caps-ado-200: rgb(153, 246, 228); */
  --caps-ado-200: rgb(127, 217, 208);
  --caps-ado-300: rgb(94, 234, 212);
  --caps-ado-400: rgb(45, 212, 191);
  --caps-ado-500: rgb(20, 184, 166);
  --caps-ado-600: rgb(13, 148, 136);
  --caps-ado-700: rgb(15, 118, 110);
  --caps-ado-800: rgb(17, 94, 89);
  --caps-ado-900: rgb(19, 78, 74);
  --caps-ado-950: rgb(7, 38, 48);

  /* Jeune User */
  /* Use Tailwind Orange */
  --caps-jeune: rgb(255, 204, 128);
  --caps-jeune-light: rgb(255, 224, 178);
  --caps-jeune-dark: rgb(255, 188, 88);
  --caps-jeune-accent: rgb(255, 138, 101);

  --caps-jeune-50: rgb(255, 247, 237);
  --caps-jeune-100: rgb(255, 237, 213);
  --caps-jeune-200: rgb(254, 215, 170);
  --caps-jeune-300: rgb(253, 186, 116);
  --caps-jeune-400: rgb(251, 146, 60);
  --caps-jeune-500: rgb(249, 115, 22);
  --caps-jeune-600: rgb(234, 88, 12);
  --caps-jeune-700: rgb(194, 65, 12);
  --caps-jeune-800: rgb(154, 52, 18);
  --caps-jeune-900: rgb(124, 45, 18);
  --caps-jeune-950: rgb(67, 20, 7);

  /* Parent User */
  /* Use Tailwind Fuchsia */
  --caps-parent: rgb(220, 121, 244);
  --caps-parent-light: rgb(238, 162, 251);
  --caps-parent-dark: rgb(164, 77, 185);
  --caps-parent-accent: rgb(255, 138, 101);

  --caps-parent-50: rgb(253, 244, 255);
  --caps-parent-100: rgb(250, 232, 255);
  --caps-parent-200: rgb(245, 208, 254);
  --caps-parent-300: rgb(240, 171, 252);
  --caps-parent-400: rgb(232, 121, 249);
  --caps-parent-500: rgb(217, 70, 239);
  --caps-parent-600: rgb(192, 38, 211);
  --caps-parent-700: rgb(162, 28, 175);
  --caps-parent-800: rgb(134, 25, 143);
  --caps-parent-900: rgb(112, 26, 117);
  --caps-parent-950: rgb(74, 4, 78);

  /* Pro User */
  /* Use Tailwind Yellow */
  --caps-pro: rgb(255, 237, 121);
  --caps-pro-light: rgb(255, 248, 178);
  --caps-pro-dark: rgb(216, 194, 93);
  --caps-pro-accent: rgb(67, 160, 71);

  --caps-pro-50: rgb(254, 252, 232);
  --caps-pro-100: rgb(254, 249, 195);
  --caps-pro-200: rgb(254, 240, 138);
  --caps-pro-300: rgb(253, 224, 71);
  --caps-pro-400: rgb(250, 204, 21);
  --caps-pro-500: rgb(234, 179, 8);
  --caps-pro-600: rgb(202, 138, 4);
  --caps-pro-700: rgb(161, 98, 7);
  --caps-pro-800: rgb(133, 77, 14);
  --caps-pro-900: rgb(113, 63, 18);
  --caps-pro-950: rgb(66, 32, 6);

  /* Admin User */
  /* User Tailwind Neutral */
  --caps-admin: rgb(73, 73, 73);
  --caps-admin-light: rgb(115, 115, 115);
  --caps-admin-dark: rgb(40, 40, 40);
  --caps-admin-accent: rgb(0, 0, 0);

  --caps-admin-50: rgb(250, 250, 250);
  --caps-admin-100: rgb(245, 245, 245);
  --caps-admin-200: rgb(229, 229, 229);
  --caps-admin-300: rgb(212, 212, 212);
  --caps-admin-400: rgb(163, 163, 163);
  --caps-admin-500: rgb(115, 115, 115);
  --caps-admin-600: rgb(82, 82, 82);
  --caps-admin-700: rgb(64, 64, 64);
  --caps-admin-800: rgb(38, 38, 38);
  --caps-admin-900: rgb(23, 23, 23);
  --caps-admin-950: rgb(10, 10, 10);

  /* Super Admin User */
  /* Same as admin */
  --caps-superadmin: rgb(73, 73, 73);
  --caps-superadmin-light: rgb(115, 115, 115);
  --caps-superadmin-dark: rgb(40, 40, 40);
  --caps-superadmin-accent: rgb(0, 0, 0);

  --caps-superadmin-50: rgb(250, 250, 250);
  --caps-superadmin-100: rgb(245, 245, 245);
  --caps-superadmin-200: rgb(229, 229, 229);
  --caps-superadmin-300: rgb(212, 212, 212);
  --caps-superadmin-400: rgb(163, 163, 163);
  --caps-superadmin-500: rgb(115, 115, 115);
  --caps-superadmin-600: rgb(82, 82, 82);
  --caps-superadmin-700: rgb(64, 64, 64);
  --caps-superadmin-800: rgb(38, 38, 38);
  --caps-superadmin-900: rgb(23, 23, 23);
  --caps-superadmin-950: rgb(10, 10, 10);
}

@font-face {
  font-family: "Capsule";
  src: url("/fonts/RazedLight.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

h4.landing {
  margin-top: 25px;
}

a {
  text-decoration: none;
}

a.admin {
  color: white;
}

.test {
  border: 1px white solid;
}

div.faded {
  border: 1px solid white;
  background-color: black;
  color: grey;
}

div.profilAdmin {
  border: 1px solid white;
  border-radius: 10px;
}

/* div.pave {
  border-radius: 2vh;
  margin-bottom: 15px;
  position: relative;
} */

div.supera {
  background-color: grey;
  border: 1px dotted red;
  margin: 5%;
  padding: 5%;
}

div.navbar-nav a.nav-link {
  margin: auto;
  color: var(--caps-ado-light);
}

div.arrondi {
  border-radius: 5px;
  border: 1px solid grey;
}

table.profile {
  width: 100%;
}

table.account {
  width: 100%;
}

table.account td.left {
  width: 50%;
  text-align: left;
}

table.account td.right {
  width: 50%;
  text-align: right;
}

table.connected {
  margin-left: 10%;
  width: 90%;
}

table.connected td.kid {
  text-align: left;
  width: 60%;
}

table.connected td.balance {
  text-align: right;
  width: 20%;
}

table.connected td.transfer {
  text-align: right;
}

table.wallet {
  width: 100%;
}

table.wallet td.date {
  text-align: left;
  width: 15%;
}

table.wallet td.transaction {
  text-align: left;
}

table.wallet td.amount,
th.amount {
  text-align: right;
  width: 12%;
}

table.wallet td.balance,
th.balance {
  text-align: right;
  width: 12%;
}

.btn-help {
  border: 1px solid var(--caps-neon);
  border-radius: 5px;
  color: var(--caps-neon);
  background-color: black;
  padding: 5px 15px;
  font-size: 1rem;
}

td.label {
  padding-left: 5px;
  padding-right: 15px;
  text-align: left;
  color: grey;
}

td.adminLabel {
  padding-left: 5px;
  padding-right: 15px;
  text-align: left;
  color: white;
}

td.value {
  padding-left: 5px;
  text-align: left;
}

div.adoHome {
  border-radius: 25px;
  padding: 1vw 0;
}

p.adoHome {
  color: black;
  text-decoration: none;
  margin: 1vw 0 0 0;
}

a.adoHome {
  color: black;
  font-size: 1em;
  text-decoration: none;
  margin: 15px 0;
}

.text-bg-ado {
  background: rgb(127, 217, 208);
  border-radius: 5px;
}

.btn {
  transition:
    background 0.3s ease-in-out,
    border 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

.btn-ado,
.btn-ado-light:hover {
  background: var(--caps-ado-700);
  border: 1px solid black;
  color: white;
}

.btn-ado:disabled {
  background: var(--caps-ado-200);
  border: 1px solid var(--caps-ado-950);
  color: var(--caps-ado-950);
}

.btn-ado-light,
.btn-ado:hover {
  background: var(--caps-ado-200);
  border: 1px solid var(--caps-ado-950);
  color: var(--caps-ado-950);
}

.text-bg-jeune {
  background: var(--caps-jeune);
  border-radius: 5px;
}

.btn-jeune,
.btn-jeune-light:hover {
  background: var(--caps-jeune-700);
  border: 1px solid black;
  color: white;
}

.btn-jeune-light,
.btn-jeune:hover {
  background: var(--caps-jeune-200);
  border: 1px solid var(--caps-jeune-950);
  color: var(--caps-jeune-950);
}

.text-bg-parent {
  background: var(--caps-parent);
  border-radius: 5px;
}

.btn-parent,
.btn-parent-light:hover {
  background: var(--caps-parent-700);
  border: 1px solid black;
  color: white;
  border-radius: 5px;
}

.btn-parent-light,
.btn-parent:hover {
  background: var(--caps-parent-200);
  border: 1px solid var(--caps-parent-950);
  color: var(--caps-parent-950);
}

.btn-pro,
.btn-pro-light:hover {
  background: var(--caps-pro-700);
  border: 1px solid black;
  color: white;
  border-radius: 5px;
}

.btn-pro-light,
.btn-pro:hover {
  background: var(--caps-pro-200);
  border: 1px solid var(--caps-pro-950);
  color: var(--caps-pro-950);
}

.text-bg-pro {
  background: var(--caps-pro);
  border-radius: 5px;
}

.text-bg-admin {
  background: var(--caps-admin);
  border-radius: 5px;
}

.btn-admin,
.btn-superadmin,
.btn-admin-light:hover,
.btn-superadmin-light:hover {
  background: var(--caps-admin-700);
  border: 1px solid black;
  color: white;
}

.btn-admin-light,
.btn-superadmin-light,
.btn-admin:hover,
.btn-superadmin:hover {
  background: var(--caps-admin-200);
  border: 1px solid var(--caps-admin-950);
  color: var(--caps-admin-950);
}

.print-button {
  display: none;
}

.download-button {
  display: none;
}

.message-ado {
  background: var(--caps-ado);
  color: black;
  border-radius: 15px;
  padding: 5px;
  margin-bottom: 15px;
}

.message-jeune {
  background: var(--caps-jeune);
  color: black;
  border-radius: 15px;
  padding: 5px;
  margin-bottom: 15px;
}

.message-parent {
  background: var(--caps-parent);
  color: black;
  border-radius: 15px;
  padding: 5px;
  margin-bottom: 15px;
}

.message-pro {
  background: var(--caps-pro);
  color: black;
  border-radius: 15px;
  padding: 5px;
  margin-bottom: 15px;
}

.message-admin,
.message-superadmin {
  background: var(--caps-admin);
  border: 1px solid white;
  color: white;
  border-radius: 15px;
  padding: 5px;
  margin-bottom: 15px;
  margin-left: 20%;
}

.container {
  min-height: 656px;
  width: 90%;
  padding: 50px 0;
}

footer a {
  color: var(--caps-ado-light);
  text-decoration: none;
}

/* Pour les écrans de taille smartphone */
@media screen and (max-width: 768px) {
  .navigation {
    display: none;
    /* Cache la navigation */
  }

  .content {
    width: 100%;
    /* Prend toute la largeur */
  }
}

.navigation {
  width: 20%;
}

.content {
  width: 80%;
  /* Prend toute la largeur */
}

.react-international-phone-country-selector button {
  padding: 0 5px;
  border: none;
}

.react-international-phone-input-container input {
  width: 100%;
  border: none !important;
  font-size: medium !important;
}

.col-to-row {
  display: flex;
  flex-direction: column;
}

@media (min-width: 800px) {
  .col-to-row {
    flex-direction: row;
  }
}

.card {
  font-size: small;
}

@media (min-width: 700px) {
  .card {
    font-size: medium;
  }
}

.patient-dashboard {
  display: flex;
  flex-direction: column;
}

.patient-dashboard-1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  max-width: 100%;
  height: fit-content;
}

.patient-dashboard-2 {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

@media (min-width: 768px) {
  .patient-dashboard {
    flex-direction: row;
    gap: 1rem;
  }

  .patient-dashboard-1 {
    max-width: 40%;
  }

  .patient-dashboard-2 {
    max-width: 60%;
    flex-grow: 1;
  }
}

#cookie-banner-text,
#cookie-banner-buttons {
  width: 100%;
}

@media (min-width: 576px) {
  #cookie-banner-text {
    width: 80%;
  }

  #cookie-banner-buttons {
    width: 20%;
  }
}

.profile-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: fit-content;
  gap: 3vw;
  /* Espacement entre les deux cadres */
  flex-wrap: wrap;
  /* Permet de passer en colonne si l'écran est trop petit */
  padding: 5vh 0;
}

/* Cadre de la photo de profil */
.profile-frame {
  width: 14vw;
  height: 26vw;
  border-radius: 1.8vw;
  /* Angles arrondis dynamiques */
  border: 5px solid #333;
  /* Bordure ajustée en fonction de l'écran */
  overflow: hidden;
  position: relative;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Stylisation de la photo de profil */
.profile-picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Remplit bien sans déformer */
}

.ado-home-round {
  border: 1px solid black;
  border-radius: 25px;
}

.video-link {
  display: block;
  position: relative;
  width: 195px;
  height: 195px;
  overflow: hidden;
  border-radius: 10px;
  /* Arrondi des bords */
}

.video-auto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Coupe la vidéo pour qu'elle remplisse parfaitement le cadre */
  border-radius: 10px;
  /* Appliquer aux vidéos aussi */
  cursor: pointer;
  /* Afficher la main quand on passe dessus */
}

.h-40 {
  flex: 0 0 32%;
  /* Fixe à 40% de la hauteur */
}

.h-60 {
  flex: 0 0 62%;
  /* Fixe à 60% de la hauteur */
}

/* Conteneur de la vidéo */
.video-container {
  position: relative;
  overflow: hidden;
}

/* Vidéo en background */
.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Remplit bien sans distorsion */
  z-index: -1;
  /* Place la vidéo derrière le contenu */
}

/* Contenu au-dessus de la vidéo */
.content {
  position: relative;
  z-index: 1;
  /* Devant la vidéo */
  max-width: 1344px;
  margin: auto;
  text-align: center;
  padding: 50px;
}

.ado-suggestion {
  background-color: var(--caps-ado-dark);
  color: white;
  border-radius: 30px;
  margin: 0 2vw;
  height: 300px;
  padding: 3vh;
  font-size: 1.4rem;
}

#jeune-home-section,
#parent-home-section {
  display: flex;
  flex-direction: column;
  min-height: 656px;
  padding: 40px 20px;
}

#jeune-home-section {
  background: linear-gradient(to bottom, var(--caps-green) 8%, black 8%);
  gap: 40px;
}

#parent-home-section {
  background: linear-gradient(to bottom, var(--caps-green) 95px, white 95px);
  gap: 60px;
}

#jeune-home-section p,
#jeune-home-section li,
#jeune-home-section h5,
#jeune-home-section h6 {
  color: white;
}

#jeune-home-section h2,
#jeune-home-section h3,
#jeune-home-section h4 {
  color: var(--caps-green);
}

#jeune-home-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#jeune-home-left-container,
#jeune-home-center-container,
#jeune-home-right-container {
  display: contents;
}

#jeune-home-name-container {
  display: flex;
  flex-direction: column;
  text-align: start;
  order: 1;
}

#jeune-home-welcome-container {
  display: flex;
  flex-direction: column;
  order: 2;
}

#jeune-home-bio-container {
  text-align: start;
  order: 3;
}

#jeune-home-moods-container {
  text-align: start;
  order: 4;
}

#parent-home-moods-container {
  text-align: start;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: end;
  min-width: 200px;
  padding: 20px 30px;
  border-radius: 10px;
  background-color: white;
}

#parent-home-img {
  width: 150px;
  border-radius: 10%;
  border: 5px solid white;
  background-color: var(--caps-ado-light);
}

#parent-home-img-container {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

#jeune-home-services-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 30px;
  border-radius: 5px;
  background-image: url("https://vieww.my.canva.site/copie-de-copie-de-copie-de-capsule/images/085ba9a45acb4c43b1b117026a9cce38.jpg");
}

#parent-home-services-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  border-radius: 5px;
}

#jeune-home-services-container a {
  color: white;
}

/* Media Query (sm) */
@media (min-width: 576px) {
  #jeune-home-section,
  #parent-home-section {
    padding: 40px 50px;
  }

  #parent-home-section {
    background: linear-gradient(
      to bottom,
      var(--caps-green) 100px,
      white 100px
    );
  }
}

/* Media Query (md) */
@media (min-width: 768px) {
  #jeune-home-section,
  #parent-home-section {
    padding: 50px 100px;
  }

  #parent-home-section {
    background: linear-gradient(to bottom, var(--caps-green) 13%, white 13%);
  }
}

/* Media Query (lg) */
@media (min-width: 992px) {
  #jeune-home-section,
  #parent-home-section {
    padding: 60px 150px;
  }

  #jeune-home-section {
    background: linear-gradient(to bottom, var(--caps-green) 24%, black 24%);
    gap: 60px;
  }

  #jeune-home-container {
    flex-direction: row;
  }

  #jeune-home-left-container,
  #jeune-home-center-container,
  #jeune-home-right-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  #jeune-home-left-container {
    align-items: flex-start;
    justify-content: space-between;
    width: 30%;
  }

  #jeune-home-center-container {
    align-items: center;
    gap: 20px;
  }

  #jeune-home-right-container {
    align-items: flex-end;
    justify-content: end;
    width: 30%;
  }

  #jeune-home-name-container {
    width: 100%;
    height: 40%;
  }

  #jeune-home-bio-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 60%;
    padding-top: 30px;
  }

  #jeune-home-moods-container {
    width: 100%;
    height: 60%;
    padding-top: 30px;
  }

  #jeune-home-name-container > h3 {
    color: black;
  }

  #jeune-home-services-container {
    gap: 40px 120px;
    padding: 50px 80px;
  }

  #jeune-home-img {
    display: block;
    width: 250px;
    border-radius: 100%;
    border: 20px solid white;
  }

  #parent-home-moods-container {
    margin-top: 30px;
  }

  #parent-home-img {
    width: 200px;
  }
}

/* Media Query (xl) */
@media (min-width: 1200px) {
  #jeune-home-section {
    padding: 70px 200px;
    background: linear-gradient(to bottom, var(--caps-green) 26%, black 26%);
  }

  #parent-home-section {
    padding: 70px 200px;
  }
}

/* Media Query (xxl) */
@media (min-width: 1400px) {
  #jeune-home-section {
    padding: 80px 250px;
  }

  #parent-home-section {
    padding: 80px 250px;
  }
}

.mood-slider {
  width: 100%;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    to right,
    var(--caps-green, #4caf50) 0%,
    white 0%
  );
  border-radius: 5px;
  outline: none;
  transition: background 0.2s ease-out;
}

/* Custom thumb */
.mood-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid var(--caps-green, #4caf50);
  border-radius: 50%;
  cursor: pointer;
}

.mood-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid var(--caps-green, #4caf50);
  border-radius: 50%;
  cursor: pointer;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='var(--caps-green)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Dark Accordion Styling Override */
.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  color: #d1d5db !important;
  box-shadow: none !important;
}

.accordion-button {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  color: #d1d5db !important;
}

.accordion-button:focus {
  border-color: #404040 !important;
  box-shadow: 0 0 0 0.25rem rgba(64, 64, 64, 0.25) !important;
}

.accordion-button:hover {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
}

/* White arrow for accordion */
.accordion-button::after {
  filter: brightness(0) invert(1);
}

/* Dark DayPicker Styling */
.rdp {
  --rdp-cell-size: 40px;
  --rdp-accent-color: var(--caps-green);
  --rdp-background-color: #2d2d2d;
  --rdp-accent-color-dark: #2dd4bf;
  --rdp-background-color-dark: #1a1a1a;
  --rdp-outline: 2px solid var(--rdp-accent-color);
  --rdp-outline-selected: 2px solid var(--caps-green);
  color: #d1d5db;
}

.rdp-caption {
  color: #d1d5db;
}

.rdp-day {
  color: #d1d5db;
}

.rdp-day:hover:not(.rdp-day_selected):not(.rdp-day_disabled) {
  background-color: #404040;
}

.rdp-day_selected {
  background-color: var(--caps-green) !important;
  color: white;
}

.rdp-day_today {
  font-weight: bold;
  color: var(--caps-green);
}

.rdp-day_disabled {
  color: #6b7280;
}

.rdp-head_cell {
  color: #9ca3af;
  font-weight: 600;
}

.rdp-nav_button {
  color: #d1d5db;
}

.rdp-nav_button:hover {
  background-color: #404040;
}

.rdp-dropdown_month,
.rdp-dropdown_year {
  background-color: #2d2d2d;
  color: #d1d5db;
  border: 1px solid #404040;
  border-radius: 0.25rem;
}

.rdp-dropdown_month option,
.rdp-dropdown_year option {
  background-color: #2d2d2d;
  color: #d1d5db;
}

.rdp-dropdown_month:focus,
.rdp-dropdown_year:focus {
  border-color: var(--caps-green);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(48, 180, 167, 0.25);
}