/* Container */
/* https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css */
.dilla-container,
.dilla-container-fluid,
.dilla-container-xxl,
.dilla-container-xl,
.dilla-container-lg,
.dilla-container-md,
.dilla-container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .dilla-container-sm,
  .dilla-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .dilla-container-md,
  .dilla-container-sm,
  .dilla-container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .dilla-container-lg,
  .dilla-container-md,
  .dilla-container-sm,
  .dilla-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .dilla-container-xl,
  .dilla-container-lg,
  .dilla-container-md,
  .dilla-container-sm,
  .dilla-container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .dilla-container-xxl,
  .dilla-container-xl,
  .dilla-container-lg,
  .dilla-container-md,
  .dilla-container-sm,
  .dilla-container {
    max-width: 1320px;
  }
}
.dilla-btn-reset {
  margin: 0;
  padding: 0.25rem 0.5rem;
  color: #6c757d;
  text-align: center !important;
  border: 1px solid #6c757d;
  border-radius: 0.25rem;
  width: 100% !important;
  margin-top: 0.5rem !important;
  background-color: transparent;
  cursor: pointer;
  font-size: 0.8rem;
}

.dilla-btn-reset:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* Tabs */
.dilla-tabbed {
  overflow-x: hidden;
}

.dilla-tabbed [type=radio] {
  display: none;
}

.dilla-tabs {
  display: flex;
  align-items: stretch;
  list-style: none;
  padding: 0;
  border-bottom: 1px solid #ccc;
}

.dilla-tab > label {
  display: block;
  margin-bottom: -1px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  color: #666;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s;
}

.dilla-tab:hover label {
  border-color: #dee2e6 #dee2e6;
  color: #333;
}

.dilla-tab-content {
  display: none;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.dilla-tabbed [type=radio]:nth-of-type(1):checked ~ .dilla-tabs .dilla-tab:nth-of-type(1) label,
.dilla-tabbed [type=radio]:nth-of-type(2):checked ~ .dilla-tabs .dilla-tab:nth-of-type(2) label,
.dilla-tabbed [type=radio]:nth-of-type(3):checked ~ .dilla-tabs .dilla-tab:nth-of-type(3) label,
.dilla-tabbed [type=radio]:nth-of-type(4):checked ~ .dilla-tabs .dilla-tab:nth-of-type(4) label,
.dilla-tabbed [type=radio]:nth-of-type(5):checked ~ .dilla-tabs .dilla-tab:nth-of-type(5) label {
  border-color: #dee2e6 #dee2e6 #fff;
  color: #000;
}

.dilla-tabbed [type=radio]:nth-of-type(1):checked ~ .dilla-tab-content:nth-of-type(1),
.dilla-tabbed [type=radio]:nth-of-type(2):checked ~ .dilla-tab-content:nth-of-type(2),
.dilla-tabbed [type=radio]:nth-of-type(3):checked ~ .dilla-tab-content:nth-of-type(3),
.dilla-tabbed [type=radio]:nth-of-type(4):checked ~ .dilla-tab-content:nth-of-type(4) {
  display: block;
}

/* Offcanvas meu (Theming & examples) */
.dilla-offcanvas-menu {
  position: absolute;
  z-index: 999;
}
.dilla-offcanvas-menu nav {
  position: fixed;
  height: 100%;
  width: 400px;
  left: -400px;
  overflow-y: auto;
  background: #fff;
  transition: 0.3s ease;
  padding: 1rem 1rem 2rem 1rem;
}
.dilla-offcanvas-menu nav label.dilla-offcanvas-toggle-close {
  font-size: 2rem;
  float: right;
  margin-right: 10px;
  cursor: pointer;
}
.dilla-offcanvas-menu nav .dilla-offcanvas-title {
  width: 80%;
  margin: 10px 0 10px 10px;
}
.dilla-offcanvas-menu nav table {
  width: 100%;
  text-align: left;
}
.dilla-offcanvas-menu nav table input {
  max-width: 165px;
}
.dilla-offcanvas-menu nav code {
  font-size: 0.875em;
  color: #d63384;
  word-wrap: break-word;
}
.dilla-offcanvas-menu input[type=checkbox] {
  display: none;
}
.dilla-offcanvas-menu input[type=checkbox]:checked ~ label {
  opacity: 0;
  pointer-events: none;
}
.dilla-offcanvas-menu input[type=checkbox]:checked ~ nav {
  left: 0;
}
.dilla-offcanvas-menu input[type=checkbox]:checked ~ nav ul li {
  opacity: 1;
}

.dilla-offcanvas-toggle-open {
  display: inline;
}

.dilla-offcanvas-content .pure-menu {
  padding: 1rem 0;
}

.dilla-btn {
  background-color: transparent;
  border-radius: 0.375rem;
  border: 1px solid #0d6efd;
  color: #0d6efd;
  cursor: pointer;
  margin-right: 1.5rem !important;
  margin: 0;
  padding: 0.375rem 0.75rem;
  text-align: center;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none;
}

.dilla-btn:hover {
  background-color: #0d6efd;
  color: #fff;
}

/* Fix some components position */
dilla-render > p,
dilla-render > div,
dilla-render > header {
  position: relative !important;
  margin-bottom: 10px !important;
}

.fragrance_1 {
  padding-top: 10px !important;
}

.fragrance_1 .pure-menu {
  font-size: 1.7rem !important;
  font-family: sans-serif !important;
}

.fragrance_1 .pure-menu-heading {
  font-size: 2rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.fragrance_1 .pure-menu-link {
  line-height: 1.15 !important;
  padding-bottom: 8px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 8px !important;
  font-size: 1.7rem !important;
}

.fragrance_1 .dilla-h1 {
  font-size: 3.5rem !important;
}

.fragrance_1 .dilla-h2 {
  font-size: 3rem !important;
}

.fragrance_1 .dilla-description {
  font-size: 1.5rem !important;
}

.dilla-description {
  font-family: sans-serif !important;
}

/* Menu, Typo and others */
.pure-img-responsive {
  max-width: 100%;
  height: auto;
}

.pure-table {
  width: 100% !important;
  font-family: system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.pure-table .pure-cell-full {
  padding: 0;
  margin: 0;
}

.pure-table .pure-cell-full pre {
  background: none;
  padding: 5px;
  margin: 0;
}

.pure-table {
  border: 1px solid #cbcbcb !important;
  font-family: sans-serif !important;
}

.pure-table caption {
  color: #000 !important;
}

.pure-table td,
.pure-table th {
  border-left: 1px solid #cbcbcb !important;
}

.pure-table thead {
  background-color: #e0e0e0 !important;
  color: #000 !important;
}

.pure-table td {
  background-color: transparent !important;
}

.pure-table-striped tr:nth-child(2n-1) td {
  background-color: #f2f2f2 !important;
}

tr:nth-child(even) {
  background-color: transparent !important;
}

.pure-table th[scope=col] {
  background-color: #e0e0e0 !important;
  color: #000 !important;
}

.pure-custom-restricted-width {
  /* To limit the menu width to the content of the menu: */
  display: inline-block;
  /* Or set the width explicitly: */
  /* width: 10em; */
}

.pure-menu-heading {
  color: rgb(33, 37, 41) !important;
  text-transform: inherit !important;
  margin-top: 0.5rem !important;
  padding-left: 0 !important;
  font-family: sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

.pure-menu-link {
  /* color: #0d6efd !important; */
  font-family: sans-serif !important;
  color: rgb(119, 119, 119) !important;
  border: 0 none;
}

.pure-menu-active > .pure-menu-link,
.pure-menu-link:focus,
.pure-menu-link:hover {
  background-color: #eee !important;
}

.pure-menu-link.disabled {
  pointer-events: none !important;
  color: rgb(33, 37, 41) !important;
}

.pure-menu-link[href] {
  background-image: none !important;
}

.pure-g.gutters {
  margin: 0 -0.5em;
}

.pure-g.gutters > [class*=pure-u] {
  box-sizing: border-box !important;
  padding: 0em 0.5em !important;
}

.dilla-h1,
.dilla-h2,
.dilla-h3,
.dilla-h4 {
  font-family: sans-serif !important;
}

.dilla-h1 {
  font-size: 2.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.dilla-h2 {
  font-family: sans-serif !important;
  color: rgb(119, 119, 119) !important;
  font-size: 2rem !important;
  /* font-size: 1.25rem !important; */
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.dilla-h2 a {
  text-decoration: underline !important;
  color: rgb(119, 119, 119) !important;
}

.dsfr_1 .dilla-h2 a {
  background-image: none !important;
}

.dilla-h2 code,
.dilla-h3 code {
  font-size: 0.875em !important;
  color: #d63384 !important;
  word-wrap: break-word !important;
}

.dilla-h3 {
  font-size: calc(1.3rem + 0.6vw) !important;
  font-weight: normal !important;
}

.dilla-h4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.dilla-h5 {
  font-size: 1.25rem !important;
}

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

.dilla-mt-4 {
  margin-top: 1rem !important;
}

.dilla-mt-2 {
  margin-top: 0.5rem !important;
}

.dilla-mb-5 {
  margin-bottom: 3rem !important;
}

.dilla-message {
  background-color: rgb(252, 252, 253);
  border: 1px solid rgb(233, 236, 239);
  border-radius: 6px;
  color: rgb(73, 80, 87);
  margin: 1rem;
  padding: 1rem;
}
.dilla-message.dilla-error {
  background-color: rgb(248, 215, 218);
  border-color: rgb(241, 174, 181);
}