/* button */

.btn {
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn-about-us i {
  margin-left: 5px;
  margin-right: 5px;
}

.btn-about-us:hover {
  background: var(--white);
  color: var(--black);
}

/* bouton home */
.btn-home {
  border-radius: var(--border-raduis-default);
  padding-top: 11px;
  background: var(--bg-button-primary);
  color: var(--color-text-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  width: 100%;
  font-size: 18px !important;
}

.btn-home i {
  margin-left: 10px;
  margin-right: 10px;
}

.btn-home:hover {
  background: var(--bg-button-third);
  color: var(--color-text-button-hover-primary) !important;
  border: var(--size-border-solid) solid var(--color-border-button-primary);
}

.btn-card-home {
  border-radius: var(--border-raduis-default);
  background: var(--white);
  transition: background 0.3s ease;
  color: var(--black);
  border: none;
  font-size: 18px !important;
}

.btn-card-home i {
  margin-left: 10px;
  margin-right: 10px;
}

.btn-card-home:hover {
  background: var(--black);
  color: var(--white);
}

.btn-home-outline {
  width: 100%;
  border-radius: var(--border-raduis-default);
  background: var(--bg-button-secondary);
  transition: background 0.3s ease;
  color: var(--color-text-button-primary) !important;
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  font-size: 18px !important;
  opacity: 1;
}

.btn-home-outline:hover {
  background: var(--bg-button-third);
}

.btn-home-outline i {
  margin-left: 10px;
  margin-right: 10px;
}

.btn-continu-connection {
  width: 100%;
  display: flex;
  color: var(--color-text-button-primary);
  background: var(--bg-button-fifth);
  border-radius: var(--border-raduis-default);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  align-items: center;
  justify-content: left;
  margin-top: 10px;
  padding: 5px;
  padding-left: 20px !important;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-continu-connection:hover {
 background: var(--bg-hover-button-secondary);
}

.btn-continu-connection p {
  color: var(--color-text-title-primary);
  border: none;
  font-size: 18px;
  margin: 5px;
  font-weight: bold;
}

.btn-continu-connection i.icons-google {
  font-size: 25px;
  margin: 5px;
  width: 25px;
  height: 25px;
  background-image: url('../../img/icon/auth/njdweb-google-48x48.png');
  background-size: cover;
}

.btn-continu-connection i.icon-apple {
  font-size: 25px;
  margin: 5px;
  color: var(--color-text-title-primary);
}

.btn-continu-connection i.icons-windows {
  font-size: 25px;
  margin: 5px;
  width: 25px;
  height: 25px;
  background-image: url('../../img/icon/auth/njdweb-windows-11-48x48.png');
  background-size: cover;
}

.btn-continu-connection i.icon-github {
  font-size: 25px;
  margin: 5px;
  color: var(--color-text-title-primary);
}

.btn-continu-payment {
  width: 100%;
  display: flex;
  text-align: center;
  border-radius: var(--border-raduis-default);
  border: 2px solid var(--border-color-btn);
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 5px;
  cursor: pointer;
  background: var(--bg-color-input);
}

.btn-continu-payment:hover {
  border: 2px solid var(--border-color-input-hover);
}

.btn-continu-payment p {
  color: var(--color-text-title-primary);
  border: none;
  font-size: 18px;
  margin: 5px;
}

.btn-continu-payment i.icon-google {
  font-size: 25px;
  margin: 5px;
}

.btn-continu-payment i.icon-apple {
  font-size: 25px;
  margin: 5px;
}

.btn-width {
  width: 150px;
}


.btn-add-more {
  width: 5px;
  height: 10px;
  border-radius: var(--border-raduis-default);
  background: var(--bg-button-primary);
  color: var(--color-text-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-add-more:hover {
  background: var(--bg-hover-button-primary);
  color: var(--color-text-button-hover-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
}

/* Username Auth */
.container-input .input-username,
.container-input .input-subject,
.container-input .input-email,
.container-input .input-search,
.container-input .input-password {
  display: flex;
  color: var(--color-input-primary);
  background: var(--bg-input-primary);
  border-radius: var(--border-raduis-default);
  border: var(--size-border-solid) solid var(--color-border-input-primary);
  width: 100%;
  height: 50px;
  align-items: center;
  margin-bottom: 10px;
  transition: border 0.3s ease;
}

.container-input .input-username:focus-within,
.container-input .input-subject:focus-within,
.container-input .input-email:focus-within,
.container-input .input-search:focus-within,
.container-input .input-password:focus-within {
  border: var(--size-border-solid) solid var(--color-border-hover-input-primary);
}

.container-input .input-username:focus-visible,
.container-input .input-subject:focus-visible,
.container-input .input-email:focus-visible,
.container-input .input-search:focus-visible,
.container-input .input-password:focus-visible {
  border: none;
}

.container-input .input-username input[type="text"],
.container-input .input-subject input[type="text"],
.container-input .input-email input[type="email"],
.container-input .input-search input[type="search"],
.container-input .input-password input[type="password"] {
  padding: 0.7rem 1rem;
  font-size: 1rem;
  width: 100%;
  border: none;
  background: transparent;
}

.container-input .input-username input[type="text"]:focus,
.container-input .input-subject input[type="text"]:focus,
.container-input .input-email input[type="email"]:focus,
.container-input .input-search input[type="search"]:focus,
.container-input .input-password input[type="password"]:focus {
  outline: none;
}

.container-input .input-username i,
.container-input .input-subject i,
.container-input .input-email i,
.container-input .input-password i {
  color: var(--color-icon);
  font-size: 1.5rem;
  cursor: pointer;
  font-weight: 400;
  margin-left: 5px;
}

.container-input .input-search button {
  color: var(--color-btn);
  font-size: 1.5rem;
  cursor: pointer;
  font-weight: 400;
  background: var(--bg-color-btn);
  border: none;
  padding: 10px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-right: 1px;
}

/* forget */

.input-forget {
  width: 100%;
  text-align: right;
  padding: 5px;
  margin-bottom: 5px;
}

.input-forget a {
  color: #2196f3;
  text-decoration: none;
  cursor: pointer;
}

.input-forget a:hover {
  text-decoration: underline;
}

/* Texterea */

.box-textarea,
.contact-textarea {
  flex: 1;
  display: flex;
  align-items: center;
  height: 80px;
  border: var(--size-border-solid) solid var(--color-border-input-primary);
  border-radius: var(--border-raduis-default);
  background: var(--bg-input-primary);
  color: var(--color-input-primary);
  transition: border 0.3s ease;
}

.box-textarea:focus-within,
.contact-textarea:focus-within {
  border: var(--size-border-solid) solid var(--color-border-hover-input-primary);
}

.box-textarea textarea,
.contact-textarea textarea {
  width: 100%;
  border: none;
  background: transparent;
}

.box-textarea textarea:focus,
.contact-textarea textarea:focus {
  outline: none;
}

.contact-textarea i {
  color: var(--color-border-hover-input-primary);
  font-size: 1.5rem;
  cursor: pointer;
  font-weight: 400;
  margin-top: 5px;
  margin-left: 5px;
}

/* Check conditions */

.options input[type="checkbox"] {
  width: 20px;
  height: 20px;
  appearance: none;
  background: var(--white);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease, border 0.3s ease;
  margin: 5px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.options .icon-check {
  color: var(--white);
  font-size: 15px;
  background: var(--bg-button-fourth);
}

.options .icon-check:checked {
  background: var(--bg-button-primary);
  color: var(--color-text-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
}

.options input[type="checkbox"]:hover {
  border-color: var(--color-border-button-secondary);
}

.options label {
  color: var(--color-text-paragraph-primary);
  font-size: 16px;
  margin-bottom: 10px;
}

/* Bouton Login */

.btn-auth-login {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: var(--bg-button-primary);
  color: var(-color-text-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  border-radius: var(--border-raduis-default);
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  transition: background 0.3s ease;
}

.btn-auth-login:hover {
  background: var(--bg-hover-button-primary);
}

.btn-auth-login i {
  font-size: 18px;
  font-weight: 400;
  margin-right: 5px;
}

.btn-auth-login:disabled {
  background-color: var(--bg-button-sixth);
  cursor: not-allowed;
}

.btn-card-book {
  width: 100%;
  border-radius: var(--border-raduis-default);
  background: var(--bg-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  color: var(--color-text-button-primary);
  padding: 8px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.btn-card-book:hover {
  background: var(--bg-hover-button-primary);
  color: var(--color-text-button-hover-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
}

.btn-card-book i {
  margin-left: 10px;
  margin-right: 10px;
}

.custom-bookmark {
  width: 50px;
  border-radius: var(--border-raduis-default);
  padding: 8px;
  background: var(--bg-button-fifth);
  margin-right: 5px;
  color: var(--color-text-button-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-card-book-download {
  border-radius: var(--border-raduis-default);
  background: transparent;
  border: var(--size-border-solid) solid transparent;
  color: var(--color-btn);
  padding: 8px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.btn-card-book-download i {
  margin-left: 10px;
  margin-right: 10px;
}

.btn-book-download {
  background: var(--bg-button-fifth);
  color: var(--green);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  border-radius: var(--border-raduis-default);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-book-download:hover {
  background: var(--bg-hover-button-secondary);
}

.btn-book-favorite {
  background: var(--bg-button-fifth);
  color: #9ca3af;
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  border-radius: var(--border-raduis-default);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-book-favorite:hover {
  background: var(--bg-hover-button-secondary);
}

.btn-book-buy-now {
  background: var(--bg-button-fifth);
  color: var(--color-text-button-secondary);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  border-radius: var(--border-raduis-default);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-book-buy-now:hover {
  background: var(--bg-hover-button-secondary);
}

.btn-book-preview {
  text-align: center;
  background: var(--bg-button-fifth);
  color: var(--indigo);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  border-radius: var(--border-raduis-default);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn-book-preview:hover {
  background: var(--bg-hover-button-secondary);
}

.btn-book-buy {
  width: 100%;
  background: var(--bg-button-fifth);
  color: var(--primary);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  border-radius: var(--border-raduis-default);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  margin-left: 5px;
  margin-right: 5px;
  transition: background 0.3s ease;
}

.btn-book-buy i {
  font-size: 18px;
}

.btn-book-buy:hover {
  background: var(--bg-hover-button-secondary);
}

.btn-book-share {
  width: 100%;
  background: var(--bg-button-fifth);
  color: var(--orange);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  border-radius: var(--border-raduis-default);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  margin-left: 5px;
  margin-right: 5px;
  transition: background 0.3s ease;
}

.btn-book-share:hover {
  background: var(--bg-hover-button-secondary);
}

.activeBtnMark {
  background: var(--bg-hover-button-secondary) !important;
}

.btn-book-qr-code {
  width: 100%;
  background: var(--bg-button-fifth);
  color: var(--pink);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  border-radius: var(--border-raduis-default);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  margin-left: 5px;
  margin-right: 5px;
  transition: background 0.3s ease;
}

.btn-book-qr-code:hover {
  background: var(--bg-hover-button-secondary);
}

.activeBtnQr {
  background: var(--white) !important;
}

.btn-book-send {
  background: var(--bg-button-primary);
  color: var(--color-text-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  border-radius: var(--border-raduis-default);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-book-send:hover {
  background: var(--bg-hover-button-primary);
  color: var(--color-text-button-hover-primary);
}


/* Bouton download */
.btn-download {
  border-radius: var(--border-raduis-default);
  background: var(--bg-button-primary);
  color: var(--color-text-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.btn-download i {
  margin-left: 5px;
  margin-right: 5px;
}

.btn-download:hover {
  background: var(--bg-hover-button-primary);
  color: var(--color-text-button-hover-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
}

.btn-download-simple {
  border-radius: var(--border-raduis-default);
  background: transparent;
  color: var(--color-text-button-primary);
  border: var(--size-border-solid) solid var(--bg-hover-button-primary);
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.btn-download-simple i {
  margin-left: 5px;
  margin-right: 5px;
}

.btn-download-simple:hover {
  background: var(--bg-hover-button-primary);
  color: var(--color-text-button-hover-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
}

/* Bouton Popup */
.btn-popup {
  border-radius: var(--border-raduis-default);
  background: var(--bg-button-primary);
  color: var(--color-text-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  font-size: 18px;
}

.btn-popup:hover {
  background: var(--bg-hover-button-primary);
  color: var(--color-text-button-hover-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
}

.btn-popup i {
  margin-left: 5px;
  margin-right: 5px;
}

/* bouton Search */

.btn-search {
  width: 180px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  font-size: 20px;
  padding: 8px 14px 8px 10px !important;
  color: var(--color-text-button-primary);
  background-color: var(--bg-button-fifth);
  border-radius: var(--border-raduis-default);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
  transition: background 0.3s ease;
}

.btn-search:hover {
  background-color: var(--bg-hover-button-secondary);
}

/* Notification */

.btn-notification {
  position: relative;
  display: inline-block;
  border-radius: var(--border-raduis-default);
  background: var(--bg-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  color: var(--color-text-button-primary);
  padding: 8px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
  font-weight: 400;
  transition: background 0.3s ease;
}

.btn-notification i {
  cursor: pointer;
}

.btn-notification:hover {
  background: var(--bg-hover-button-primary);
}

.btn-notification .notifinombr {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--red);
  color: var(--white);
  padding: 2px 2px;
  font-weight: bold;
  font-size: 12px;
  border-radius: 5px;
}

/* Shopping */

.btn-shopping-cart {
  position: relative;
  display: inline-block;
  border-radius: var(--border-raduis-default);
  background: var(--bg-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  color: var(--color-text-button-primary);
  padding: 8px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
  font-weight: 400;
  transition: background 0.3s ease;
  margin-left: 5px;
  margin-right: 5px;
}

.btn-shopping-cart i {
  cursor: pointer;
}

.btn-shopping-cart:hover {
  background: var(--bg-hover-button-primary);
}

.btn-shopping-cart .shopnomb {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--blue);
  color: var(--white);
  padding: 2px 2px;
  font-weight: bold;
  font-size: 12px;
  border-radius: 5px;
}
/* User btn */

.btn-users {
  position: relative;
  border-radius: var(--border-raduis-default);
  background: var(--bg-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  color: var(--color-text-button-primary);
  padding: 2px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  font-weight: 400;
  transition: background 0.3s ease;
  margin-left: 5px;
  margin-right: 5px;
}

.btn-users:hover {
  background: var(--bg-hover-button-primary);
}

.btn-users .nomber {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--bg-button-primary);
  color: var(--color-text-button-primary);
  padding: 2px 2px;
  font-weight: bold;
  font-size: 12px;
  border-radius: 5px;
}

.btn-users .profils {
  width: 30px;
  height: 30px;
  border-radius: var(--border-raduis-default);
  object-fit: cover;
}

.btn-users span i {
  font-size: 14px;
  padding: 2px;
  color: var(--color-text-button-primary);
}

/* Bouton about us */
.btn-about-us {
  border-radius: var(--border-raduis-default);
  color: var(--color-text-button-primary);
  font-size: 18px !important;
}


.text-content-about-us .link-see-more {
  text-align: right;
}

.review .link-see-more {
  text-align: right;
}

.link-see-more a i {
  margin-right: 5px;
  margin-left: 10px;
}

.link-see-more a {
  text-decoration: none;
  color: var(--background-fourth);
  font-size: 1rem;
  font-weight: 700;
}

.link-see-more a:hover {
  text-decoration: underline;
}

/* Portable Ordi */
@media screen and (max-width: 980px) {
  .btn-home, .btn-card-home, .btn-home-outline , .btn-continu-connection p, .btn-continu-payment p, .btn-auth-login, .btn-auth-login i.icon-lock2, .btn-auth-login i.icon-user, .btn-auth-login i.icon-repeat {
    font-size: 16px !important;
  }
}

/* Tablette */
@media screen and (max-width: 736px) {
  .btn-home, .btn-card-home, .btn-home-outline , .btn-continu-connection p, .btn-continu-payment p, .btn-auth-login, .btn-auth-login i.icon-lock2, .btn-auth-login i.icon-user, .btn-auth-login i.icon-repeat {
    font-size: 14px !important;
  }
}

/* Smartphone */
@media screen and (max-width: 480px) {
  .btn-home, .btn-card-home, .btn-home-outline , .btn-continu-connection p, .btn-continu-payment p, .btn-auth-login, .btn-auth-login i.icon-lock2, .btn-auth-login i.icon-user, .btn-auth-login i.icon-repeat {
    font-size: 12px !important;
  }
}

.back-to-top {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 30px;
  bottom: 30px;
  z-index: 11;
  padding: 5px;
  width: 50px;
  height: 50px;
  border-radius: var(--border-raduis-default);
  border: var(--size-border-solid) solid var(--color-border-button-primary);
  box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.1);
  background: var(--bg-button-primary);
  -moz-transition: opacity 1s ease, -moz-transform 1s ease;
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
  -ms-transition: opacity 1s ease, -ms-transform 1s ease;
  transition: opacity 1s ease, transform 1s ease;
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
    opacity: 0;
}

.back-to-top i.icon-chevron-up {
  font-size: 18px;
  color: var(--color-text-button-primary);
}

.back-to-top.active {
  -moz-transform: none;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1;
}

.back-to-option {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 30px;
  bottom: 30px;
  z-index: 11;
  padding: 5px;
  width: 50px;
  height: 50px;
  border-radius: var(--border-raduis-default);
  border: var(--size-border-solid) solid var(--border-color-btn);
  box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.1);
  background: var(--bg-button-primary);
  -moz-transition: opacity 1s ease, -moz-transform 1s ease;
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
  -ms-transition: opacity 1s ease, -ms-transform 1s ease;
  transition: opacity 1s ease, transform 1s ease;
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
    opacity: 0;
}

.back-to-option i.icon-chevron-up {
  font-size: 18px;
  color: var(--color-btn);
}

.back-to-option.active {
  -moz-transform: none;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1;
}

.btn-profile {
  display: flex;
  background: var(--color-default);
  overflow: hidden;
  align-items: center;
  border-radius: var(--border-raduis-default);
  padding: 2px;
  background: var(--color-default);
  border: var(--size-border-solid) solid var(--border-color-btn);
  color: var(--color-icon);
  cursor: pointer;
}

.btn-profile .profile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
}

/* paginantion */

.pagination-container {
  text-align: center;
  margin-top: 20px;
  width: 100%;
}

.pagination {
  list-style: none;
  padding: 0;
  align-items: center;
  border-radius: 5px;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}

.pagination-btn {
  padding: 8px 12px;
  margin: 2px;
  border: var(--size-border-solid) solid var(--color-three);
  cursor: pointer;
  color: var(--color-primary);
  font-size: 14px;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
}

.pagination-btn:hover {
  background: var(--bg-section-primary);
}

.pagination-btn.active {
  background: var(--bg-button-primary);
  color: var(--color-text-button-primary);
  border: var(--size-border-solid) solid var(--color-border-button-secondary);
}

.pagination-btn.active:hover {
  background: var(--bg-hover-button-primary);
  color: var(--color-text-button-hover-primary);
  border: var(--size-border-solid) solid var(--border-color-btn);
}

.pagination-btn.désactivé {
  pointer-events: none;
  color: #aaa;
  border: var(--size-border-solid) solid var(--color-three);
}

.pagination-btn.dots {
  border: none;
  cursor: default;
  color: #888;
  font-weight: bold;
}

.pagination-btn.icon-caret-left {
  padding: 8px 12px;
  font-size: 18px;
}

.pagination-btn.icon-caret-right {
  padding: 8px 12px;
  font-size: 18px;
}

/* option-user */

.divoptions-select-wrapper {
  position: relative;
  width: 100%;
}

/* Select Box */
.divoptions-select {
  position: relative;
  background: var(--background-primary);
  border-radius: var(--border-raduis-default);
  border: var(--size-border-solid) solid var(--color-border-section-primary);
  cursor: pointer;
  user-select: none;
  padding: 5px;
}

/* Trigger (Display of selected value) */
.bokksre-custme .divoptions-options {
  width: 40%;
}

.container-input .field-custme {
  margin-bottom: 5px;
  display: flex;
  -webkit-box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.1);
  --_filter: blur(5px) saturate(200%);
  background-color: var(--bg-nav-mobile-primary);
  backdrop-filter: var(--_filter) blur(5px) saturate(200%);
  -webkit-backdrop-filter: var(--_filter);
  border-radius: var(--border-raduis-default);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: var(--size-border-solid) solid var(--color-border-section-primary);
  width: 100%;
  height: 50px;
  align-items: center;
  margin-bottom: 10px;
  transition: border 0.3s ease;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  padding: 10px 5px;
}

.container-input .field-custme span {
  width: 100%;
}

.container-input .field-custme i {
  color: var(--color-icon);
  font-size: 1.5rem;
  cursor: pointer;
  font-weight: 400;
  margin-right: 4px;
}

.field-custme {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
}

.field-custme span {
  width: 100%;
}

.divoptions-select-trigger {
  font-size: 16px;
  color: var(--color-text-paragraph-primary);
}

/* Options Container */
.divoptions-options {
  position: absolute;
  width: 100%;
  z-index: 12;
  right: 0;
  top: 100%;
  border-top: none;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  max-height: 200px;
  overflow-y: auto;
  min-width: 150px;
  border-radius: var(--border-raduis-default);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  --_filter: blur(5px) saturate(200%);
  background-color: var(--bg-popup-message-primary);
  backdrop-filter: var(--_filter);
  -webkit-backdrop-filter: var(--_filter);
}

/* Option Styling */
.divoptions-option {
  padding: 10px;
  font-size: 16px;
  color: var(--color-text-paragraph-primary);
  cursor: pointer;
  transition: background 0.3s ease;
}

/* Hover & Active Effects */
.divoptions-option:hover {
  background-color: var(--bg-hover-button-secondary);
}

/* Show options */
.divoptions-select.open .divoptions-options {
  display: block;
}

/* button delete notification */

.deletex {
  margin: 0;
  padding: 0;
}

#button_documentary {
  display: block;
}

.btn-checked .toggle-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-checked .toggle {
  appearance: none;
  width: 40px;
  height: 20px;
  background: var(--bg-button-seventh);
  border-radius: var(--border-raduis-default);
  position: relative;
  cursor: pointer;
  border: var(--size-border-solid) solid var(--bg-button-primary);
}

.btn-checked .toggle::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--color-text-button-primary);
  border-radius: 50%;
  top: 1px;
  left: 2px;
  transition: 0.3s;
}

.btn-checked .toggle:checked::before {
  left: 20px;
  background: var(--color-text-button-primary);
}