:root {
  --container-padding: 20px;
  --container-width: calc(100vw - var(--container-padding) * 2);
}

.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  visibility: hidden !important;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  overflow: clip;
}

.section {
  position: relative;
  display: grid;
  width: 100%;
  padding-left: calc(50% - var(--container-width) / 2);
  padding-right: calc(50% - var(--container-width) / 2);
  overflow: hidden;
  overflow: clip;
}

.section-flex-center,
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
}

.section-flex-start {
  display: flex;
  flex-direction: column;
  align-items: start;
  height: auto;
}

.section-flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  justify-content: space-evenly;
}

.position-relative {
  position: relative;
}

.flex-wrap {
  flex-wrap: wrap;
}

.section-footer {
  min-height: 50px;
}

.opacity-09 {
  opacity: 0.9;
}

.layout-sidebar {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
}

.afnor-edition {
  background-color: var(--color-background-secondary);
  clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 0px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0px 100%, 0% calc(100% - 30px), 0 30px);
}

.afnor-edition p {
  line-height: 16px !important;
}

.markdown-content aside {
  border: var(--color) dotted 1px;
  padding: 20px;
  margin: 20px;
  background-color: var(--color-background-secondary);
}

.round {
  border-radius: 50%;
}

.grid {
  display: grid;
}

.height-200 {
  height: 200px;
}

.height-400 {
  height: 400px;
}

.min-height-175 {
  min-height: 175px;
}

.max-height-30vh {
  max-height: 30vh;
}

.max-width-700 {
  max-width: 700px;
}

.max-width-720 {
  max-width: 720px;
}

.max-width-200 {
  max-width: 200px;
}

.max-width-300 {
  max-width: 300px;
}

.min-width-300 {
  min-width: 300px;
}

.max-width-425 {
  max-width: 425px;
}

.max-width-500 {
  max-width: 500px;
}

.max-width-1080 {
  max-width: 1080px;
}

.max-width-500 {
  max-width: 500px;
}

.hidden {
  display: none;
}

/* exemple Prix + ht */
.flex-row-baseline-center {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

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

.width-100p {
  width: 100%;
}

.height-100p {
  height: 100%;
}

.width-auto {
  width: auto;
}

.aspect-ratio-16-9 {
  aspect-ratio: 16/9;
}

.flex {
  display: flex;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-center {
  align-items: center;
}

.align-items-flex-end {
  align-items: flex-end;
}

.align-content-center {
  align-content: center
}

.justify-items-center {
  justify-items: center;
}

.justify-content-flex-start {
  justify-content: flex-start;
}

.justify-content-flex-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-space-around {
  justify-content: space-around;
}

.justify-content-space-between {
  justify-content: space-between;
}

.justify-content-space-evenly {
  justify-content: space-evenly;
}

.color-background-primary {
  background-color: var(--color-background-primary);
}

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

.color-background-light-secondary {
  background-color: var(--color-background-light-secondary);
}

.color-background-primary-contrast {
  background-color: var(--color-background-primary-contrast);
}

.border-radius-10 {
  border-radius: 10px;
}

.float-right {
  float: right;
}

.highlight-next-action-user {
  border: 4px solid var(--color-secondary) !important;
}

.sticky-top-5vh {
  position: -webkit-sticky;
  position: sticky;
  top: 5vh;
  z-index: 998;
  max-height: 95vh;
  overflow-y: auto;
  overflow-x: clip;
}

.sticky-top-0 {
  position: -webkit-sticky;
  position: sticky;
  top: 0vh;
  z-index: 999;
  max-height: 95vh;
  overflow-y: auto;
  overflow-x: clip;
}

.overflow-auto {
  overflow: auto;
}


/* desktop styles sm */
@media only screen and (min-width: 500px) {
  .float-right-sm {
    float: right;
  }

  .float-left-sm {
    float: left;
  }

  .width-inherit-sm {
    width: inherit;
  }

  .flex-row-500 {
    display: flex;
    flex-direction: row;
  }

  .card.max-width-260-sm,
  .max-width-260-sm {
    max-width: 260px;
  }

}

/* desktop styles md */
@media only screen and (min-width: 720px) {

  .section-flex-start,
  .section-title {
    display: flex;
    flex-direction: column;
    align-items: start;
    height: auto;
  }
}

/* desktop styles */
@media only screen and (min-width: 900px) {
  :root {
    --container-padding: 32px;
    --section-body-margin: 120px;
  }

  .width-auto-lg {
    width: auto;
  }

  .container {
    width: var(--container-width);
    margin-left: calc(50% - var(--container-width) / 2);
    margin-right: calc(50% - var(--container-width) / 2);
    padding-left: 0px;
    padding-right: 0px;
  }

  .layout-sidebar {
    grid-template-columns: 1fr 300px;
  }

  .section-resource .layout-sidebar {
    grid-template-columns: 1fr 425px;
  }

  .flex-nowrap-900 {
    flex-wrap: nowrap;
  }

}

@media only screen and (min-width: 1480px) {
  :root {
    --container-padding: 20px;
    --container-width: 1440px;
  }
}