:root{

    --color-neutral-900: #171717;
    --color-neutral-800: #3B3935;
    --color-neutral-700: #928b86;
    --color-neutral-600: #A19B96;
    --color-neutral-500: #c0bbb8;
    --color-neutral-400: #CFCCC9;
    --color-neutral-300: #d2cfcc;
    --color-neutral-200: #d6d3d1;
    --color-neutral-150: #eceae9;
    --color-neutral-100: #f3f3f1;
    --color-neutral-000: #FFFFFF;

    --ff-serif: 'Fjord One', 'serif';
    --ff-sans: 'Josefin sans', 'sans serif';
    --ff-accent:'';

    --text: hsl(30, 31%, 5%);
    --text-secondary:#928b86;
    --background: #fcfaf8;
    --background-secondary: #f8f8f7;
    --primary: #b79a71;
    --primary-200: #b79a7133;
    --secondary: #e7ddd0;
    --accent: #ed900c;
    --accent-secondary: #a1cc81;
    --accent-secondary-200: #a1cc8157;
    --success: #a1cc81;
    --warning: #d55222;
    --accent-tertiary: #d55222;
    --accent-tertiary-200: #f2bfad;
}

#anchor {
  scroll-margin-top: 100px;
}

* {margin: 0;padding: 0;list-style: none; text-decoration: none;}

.hidden {display:none}

body {font-family: 'Fjord One','Serif'; background-color:var(--background);}
html,body {height: 100%;overflow-x: hidden;}

hr{ width: 50%;  margin: auto;  border: 1px solid var(--accent-secondary);  margin: 1rem auto; }

h1,h2,h3,h4,button,a {font-family:'Josefin Sans','Sans Serif'}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-neutral-700);
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2; }

h1 span {color :var(--text)}
h2 span {color :var(--text)}

@media only screen and (min-width: 1200px) {

  h1 {font-size: 3rem; line-height: 1;}
  h2 {font-size: 1.875rem; line-height: 2.25rem;}
  h3 {font-size: 1rem;}
  h6 {font-size: 1rem;}

  .progress-container { width:240px }
}

p, li      {max-width:80ch}
p          {margin: 0.5rem 0;max-width:80ch;}
p svg      {vertical-align:sub}
ol, ul, dl { margin-top: 0;  margin-bottom: 1rem; }
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section    { display: block; }
a          {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    color: var(--text);
    cursor:pointer;
    text-decoration: none;
    background-color: transparent;
    font-family: 'Josefin Sans','Sans Serif'; }
a:hover    {
  color:var(--accent);
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s ! important; }
b, strong  {font-weight: bolder;}
i          {
  text-transform: uppercase;
  font-size: 75%;
  font-weight: 600;
  font-style: normal; }

/* utilities */
.vh100  {height:100vh}
.center {text-align:center}
.sm-center{text-align:center}
.md-center{text-align:center}
@media only screen and (min-width: 600px) {
  .sm-center{text-align:left}
 }
@media only screen and (min-width: 768px) {
  .md-center{text-align:left}
 }
.w100   {width:100% !important;max-width:100% !important}
.w45    {width:45% !important;max-width:45% !important}
.w50    {width:50% !important;max-width:50% !important}
.w80ch  {width:100% !important;max-width:80ch !important}

.flex       {display:flex}
.flex-ac    {display:flex;align-items:center}
.flex-jc    {display:flex;justify-content:center}
.flex-js    {display:flex;justify-content:space-around}
.flex-jb    {display:flex;justify-content:space-between}
.flex-c     {display:flex;justify-content:center;align-items:center}
.flex-column{flex-direction:column}
.flex-row   {flex-direction:row}
.flex-wrap  {flex-wrap:wrap}
.gap-1      {gap:0.5rem}
.gap-2      {gap:0.75rem}
.gap-3      {gap:1rem}

.small   {font-style: italic; font-size: 0.875rem; line-height: 1.25rem; }
.p0      {padding:0 !important}
.mb-4    {margin-bottom:1rem;}
.my-4    {margin-bottom:1rem;margin-top:1rem;}
.mv-4    {margin-top:1rem;margin-bottom:1rem;}
.mb-6    {margin-bottom:2rem}

#wrapper {max-width: 1920px;margin: auto}

#sidebar                   {position:absolute !important; display: flex; flex-direction: column;align-items: center;
                            min-width:270px;max-width: 100%;
                            background: var(--secondary) !important;color: var(--text);
                            -webkit-transition: all .5s; -o-transition: all .5s;transition: all .5s ! important; }
#sidebar.show              {transform: none !important} /* remove the translatioon if class show is present */

#sidebar a.sidebar-close   {display:block;margin:16px; }
#sidebar .logo             {margin: 32px;}
#sidebar.sidebar-start     {top: 0;left: 0; width: 100%; min-height:100vh;transform: translateX(-100%); }
#sidebar .menu             {background-color:var(--secondary);padding: 0 2rem;margin-top:32px; }
#sidebar ul                {list-style: none; padding: 0;background:none; }
#sidebar ul li             {font-size: 16px;border-bottom: 1px solid var(--primary-200);padding: 10px 0;color: var(--text);  }
#sidebar ul li a:hover     {color: var(--accent); }
#sidebar .identification   {display:flex;align-items: center;font-family: 'Josefin Sans','Sans Serif';line-height:1; }
#sidebar .identification a {display:inline-flex;align-items:center; }
#sidebar .identification a.deconnexion {padding-left:2rem; }
#sidebar .identification .name         {padding-top:3px;text-transform:uppercase; }
#sidebar .credit                    {display:flex;align-content:center;justify-content:center; align-items: center;
                                     background: var(--color-neutral-200) url('/css/asset/decors-bg-coin.svg') 0 0 no-repeat;
                                     width:154px;margin-left:10px;min-height:64px}
#sidebar .credit .number            {font-weight:bold;line-height: 100%;font-size: 3.5rem;font-family: 'Josefin Sans','Sans Serif'}
#sidebar .credit .number.subscribed {border: 2px solid var(--text);background-color: var(--background-secondary);}
#sidebar .footer p                  {font-size:var(--step--2);text-align:center}

@media only screen and (min-width: 1024px) {
    #sidebar                 {max-width:270px;}
    #sidebar a.sidebar-close {display:none !important}
    #sidebar.sidebar-start   {transform:none;}
    #sidebar .menu           {width:100%}

    #sidebar .credit .number.subscribed {
        background-color: var(--background-secondary);
        border: 2px solid var(--text);
        border-style: solid;
    }
} /** end media */

main            {padding-top: 0; min-height:100vh;-webkit-transition: all .3s;-o-transition: all .3s;transition: all .3s; }

section.content {margin:64px auto 0px}
#mobile-menu    {display:block;position: absolute; top: 0; z-index:2000;background-color:#ffffff;border-radius: 0px 0px 20px 0px;padding:0 2px 2px 0;box-shadow: 2px 2px 2px var(--color-neutral-300);}
#mobile-menu a  {display:flex;align-items:center;justify-content:left; padding:8px;border-radius: 0px 0px 20px 0px;background-color: var(--secondary); }
.content        {display:grid;grid-row-gap: 3rem;}

@media screen and (min-width: 1024px) {
    #mobile-menu    {display:none}
    section.content {margin: 0 0 0 270px;}
}

/** OFFCANVAS */
.offcanvas.show {
    transform: none;}
.offcanvas-start {
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(100%); }
.offcanvas {
    visibility: visible !important;
    position: fixed;
    top:0;
    bottom: 0;
    z-index: 1050;
    max-width: 100%;
    background-clip: padding-box;
    outline: 0;
    transition: transform .3s ease-in-out;
    background-color:var(--primary); }
.offcanvas header {
    display: flex;
    flex-direction: row-reverse;
    padding: 8px;
    height: 48px;
}
.offcanvas header a {height: 32px}
.offcanvas article {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color:var(--primary) !important; }
.offcanvas .htmx-indicator{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index:2000; }

/* LINKS */
.toggle-icon-highlight {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    fill:var(--color-neutral-200);
}
.icon-highlight {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    fill:var(--primary); }

.on .toggle-icon-highlight {
  fill: var(--accent-secondary)
}
.off .toggle-icon-highlight {
      fill:var(--color-neutral-200);
}

button:hover .icon-highlight,
a:hover .icon-highlight,
button:hover .toggle-icon-highlight,
a:hover .toggle-icon-highlight
   {fill:var(--accent) !important; }
svg:hover .icon-highlight, svg:hover .toggle-icon-highlight {
    fill:var(--accent) !important; }

.current .icon-highlight {
  fill: var(--accent-secondary) !important }
.current:hover .icon-highlight {
  fill: var(--accent-secondary) !important }



/* BUTTON + / - */
.plus-is-on  .icon-plus  {opacity:1}
.plus-is-on  .icon-moins {opacity:0}
.minus-is-on .icon-plus  {opacity:0}
.minus-is-on .icon-moins {opacity:1}

/* FORM **/

fieldset {border:none}
fieldset button .loader {
  display:none;
  z-index:100;
  background-image: url(/css/asset/spinner-dao.svg);
  background-size:contain;
  background-position:center;
  height: 32px;
  width: 32px; }
fieldset.disabled button .loader {display:block}
fieldset.disabled button svg {display:none}
fieldset.disabled button, fieldset.disabled input, fieldset.disabled select, fieldset.disabled textarea {cursor: not-allowed;}
fieldset.disabled span { color: var(--color-neutral-300) !important}
fieldset.disabled button:hover span { color: var(--color-neutral-300) !important}

  /* source  https://codepen.io/arefeh_htmi/pen/mdPYZKJ */
input,
input[type="radio"] + label,
input[type="checkbox"] + label:before,
select option,
select {
  width: 100%;
  padding: 1em;
  line-height: 1.4;
  background-color: var(--background);
  border: 1px solid var(--secondary);
  border-radius: 3px;
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  transition: all 0.35s ease-in-out; }
input:focus {
  outline: 0;
  border-color: var(--accent); }
input:focus + .input-icon:after {
  border-right-color: var(--accent); }
input:checked + label:before,
select:focus,
select:active {
  background-color: #f0a500;
  color: #fff;
  border-color: #bd8200; }
input[type="radio"] {
    display: none;
}
input[type="checkbox"] {
  display: none; }
input[type="checkbox"] + label {
  position: relative;
  display: block;
  padding-left: 1.6em; }
input[type="checkbox"] + label:before {
  position: absolute;
  top: 0.2em;
  left: 0;
  display: block;
  width: 1em;
  height: 1em;
  padding: 0;
  content: ""; }
input[type="checkbox"] + label:after {
  position: absolute;
  top: 0.45em;
  left: 0.2em;
  font-size: 0.8em;
  color: #fff;
  opacity: 0;
  font-family: FontAwesome;
  content: "\f00c"; }
input:checked + label:after {
  opacity: 1; }
select {
  height: 3.4em;
  line-height: 2; }
select:first-of-type {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px; }
select:last-of-type {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px; }
select:focus,
select:active {
  outline: 0; }
select option {
  background-color: #f0a500;
  color: #fff; }
.input-group {
  margin-bottom: 1em;
  zoom: 1; }
.input-group:before,
.input-group:after {
  content: "";
  display: table; }
.input-group:after {
  clear: both; }
.input-group-icon {
  position: relative; }
.input-group-icon input {
  padding-left: 4.4em; }
.input-group-icon .input-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.4em;
  height: 3.4em;
  line-height: 3.4em;
  text-align: center;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center; }
input[type="radio"]:checked + label, input:checked + label:before, select:focus, select:active {
    background-color: #f0a500;
    color: #fff;
    border-color: #bd8200;
}
.htmx-indicator.htmx-request{
    display:block; }
.htmx-indicator{
  min-height:100px;
  background: #FFFFFF99 url(/css/asset/spinner-dao.svg) center no-repeat;
  display:none;  }

.input-group-icon .input-icon:after {
  position: absolute;
  top: 0.6em;
  bottom: 0.6em;
  left: 3.4em;
  display: block;
  border-right: 1px solid var(--secondary);
  content: "";
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  transition: all 0.35s ease-in-out; }
.input-group-icon .input-icon i {
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  transition: all 0.35s ease-in-out; }
.form-container {
  display:flex;
  justify-content:center;
  background-color: var(--background);
  border-radius: 4.2px;
  box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.2);}
.form-container form {
  display:flex;
  flex-direction:column;
  position:relative; }
.form-container .block {
  margin : 1rem 1rem 0 1rem; }
.form-container form h4 {
  text-align:center;
  margin:1rem;}
.form-container input {
  font-size:1rem; }
.form-container input:focus + .input-icon .icon-highlight {
  fill: var(--accent) !important; }
.form-container .htmx-indicator{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index:2000;
  background: #FFFFFF99 url(/css/asset/spinner-dao.svg) center no-repeat;
  display:none; }
.form-container .htmx-indicator.htmx-request{
    display:block; }
.form-container .input-group:last-of-type {margin-bottom:0;}
.form-container .block:last-of-type {margin-bottom:1rem;margin-top:2rem;}
.form-container a.secondary-button {
  width:50%;
  text-align:center;
  line-height:1;
  padding:0rem;
  color: var(--text-secondary);
  font-size: 80%;
  text-wrap: nowrap; }
.form-container a.secondary-button:last-of-type {
  border-left: 1px solid var(--secondary); }
.form-container .no-error {display:none}
.form-container .message {
  display:flex;
  align-items:center;
  margin: 1rem 0; }
.form-container .message svg{
  margin-right:1rem; }
.form-container button {
  display: flex;
  border: none;
  background: none;
  align-items: center;}

/** ************
 *  Double Block
 *
 */
.doubleBlock              {display:grid;grid-template-rows:1fr 1fr}
.doubleBlock21            {display:grid;grid-template-rows:1fr 1fr}
.block       {padding: 1rem;}
.block.left  {background-color: var(--color-neutral-100);display:flex;justify-content:center}
.block.right {background-color: var(--accent-secondary)}
.block .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

@media only screen and (min-width:1024px) {
    .columns.one_one      {display:grid;grid-template-columns: 1fr 1fr;gap:1rem;}
  .columns.two_one      {display:grid;grid-template-columns: 2fr 1fr;gap:1rem;}
  .columns .left  {background-color: var(--color-neutral-100);display: block;}
  .columns .right {background-color: var(--accent-secondary);display: block;}
}

/** ************
 * Liste une colonne / deux colonnes
 * video.tpl,  blocModuleContent.tpl podcast.tpl
 *
 */
.itemList                   {display:grid;justify-content:center;grid-column-gap: 1rem;}
.itemList .item a           {padding: 1rem;}
@media only screen and (min-width: 600px) {
.itemList                   {grid-template-columns: 1fr 1fr}
}



/** ************
 * BREADCRUMB
 */
.breadcrumbs {
    padding-right:10px;
    margin-bottom:30px;
    display: flex;
    overflow: hidden;
    flex-wrap:wrap;
    text-transform:uppercase; }
.breadcrumbs a {
    font-size:0.75rem;
    background: var(--secondary);
    color: var(--text);
    outline: none;
    padding: 0.5rem 0.5em 0.5em 1em;
    position: relative;
    text-decoration: none;
    transition: color 0.2s linear;
    border-style: solid;
    border-width: 1px 0px 1px 1px;
    border-color: var(--primary);
    display:flex;
    align-items:center;  }
.breadcrumbs a:hover:after,
.breadcrumbs a:hover {
  color: var(--accent); }
.breadcrumbs a:focus:after,
.breadcrumbs a:focus{
  background: var(--secondary); }
.breadcrumbs a:after,
.breadcrumbs a:before {
  background: var(--secondary);
  bottom: 0;
  clip-path: polygon(50% 50%, -50% -50%, 0 100%);
  content: "";
  left: 100%;
  position: absolute;
  top: 0;
  transition: color 0.2s linear;
  width: 1em;
  z-index: 1; }
.breadcrumbs a:before {
  background: var(--text);
  margin-left: 1px; }
.breadcrumbs a:last-child {
    border-right: none;
    background:var(--accent-secondary);
    margin-right:10px; }
.breadcrumbs a:last-child:after {
    background: var(--accent-secondary); }
.breadcrumbs a:last-child:hover {
  color: var(--text);
  cursor:default; }

/**
* COMMON TO SEVERAL PAGES
*/

.inside-container {padding: 0 0.5rem;}
@media only screen and (min-width: 1024px) {
    .inside-container {padding: 0}
}

.oneliner-button       {width:100%;display:flex;justify-content:center};

.textIconButton        {margin:1rem 0rem;}
.textIconButton a      {display:flex;align-items: center;}
.textIconButton a span {margin-right:0.5rem;}

.progress-container {height: 20px;background-color: var(--secondary);border-radius: 10px;min-width: 150px; }
.progress           {height: 20px;border-radius: 10px;background-color: var(--accent-secondary);color: var(--text);font-size: 12px;text-align: center;line-height: 20px; }
@media only screen and (min-width: 1200px) {
.progress-container { width:240px }
}

/** COMMUN aux page cursus.tpl et pack.tpl */
/* ---------------------------------------- liste des modules du cursus */
.moduleList                        {clear: both;display: flex;flex-wrap: wrap;padding-top: 2rem; }
.moduleList li.module              {padding-right: 30px;background: url('/css/asset/fleche-droite.svg') center right no-repeat;margin-bottom: 1rem;margin-right:8px }
.moduleList li.module:last-of-type {background: none;}
.moduleList li.module:last-of-type {background:none;padding-right:0;margin-right:0; }
.moduleList .module div            {border: 1px solid var(--primary);border-radius: 1rem;padding: 0.5rem;padding: 0.5rem }
.moduleList .module a:hover        {color: var(--accent); }
.moduleList .module div.completed  {background-color: var(--accent-secondary);border-color: var(--accent-secondary)}
.module span.current                           {display: block;background: url('/css/asset/flame.svg');height: 20px;width: 19px;float: right;margin-left: 10px; }
.module span.basic                             {display: block;background: url('/css/asset/basic-credit.svg');height: 20px;width: 20px;float: right;margin-left: 10px; }
.module span.gold                              {display: block;background: url('/css/asset/gold-credit.svg');height: 20px;width: 20px;float: right;margin-left: 10px; }
.module span.premium                           {display: block;background: url('/css/asset/premium-credit.svg');height: 20px;width: 20px;float: right;margin-left: 10px; }
.module span.soon                              {display: block;background: url('/css/asset/sablier.svg') no-repeat;height: 20px;width: 20px;float: right;margin-left: 10px; }


/** COMMUN aux page field.tpl et module.tpl */
.abstract a                   {color: var(--accent-tertiary) !important; font-size: var(--step-0) !important;}
.abstract, .description       {margin:1rem 0}
.abstract p, .description p   {max-width:80ch}
.abstract h2, .description h2 {font-size:1.1rem;}
.abstract li, .description li {list-style-type: disc; margin-left: 20px;}

.descriptionModule        {margin:1rem 0;max-width:80ch}
.descriptionModule p      {max-width:80ch}
.descriptionModule a      {color: var(--accent-tertiary) !important; font-size: var(--step-0) !important;}
.descriptionModule h2     {font-size: var(--step-2);}
.descriptionModule li     {list-style-type: disc; margin-left: 20px;}
.descriptionModule dt     {font-size: var(--step-1); font-weight: bold;}
.descriptionModule dd     {margin-left: 1rem;}
.descriptionModule strong {font-size:var(--step-0)}

/**
 *LES BOITES D'INFORMATION AVC OU SANS  BOUTONS
 */
.box               {padding: 1rem; margin-bottom:1rem;border-left:2px solid transparent;background-color: transparent}

.box.info          { background-color: var(--accent-secondary-200);max-width:80ch}
.box.warning       { background-color: var(--accent-tertiary-200);max-width:80ch}
.box.warning h2    { color: var(--warning)}

  .controlBox {
      padding:1rem;
      background-color: var(--accent-secondary-200);
      color: var(--color-neutral-900);
      border: 1px solid var(--accent-secondary)
  }
  .buttonBox {
      display:flex;
      flex-direction:row;
      justify-content:space-around;
      align-items:center;
      gap:1rem;
  }


@media only screen and (min-width: 1024px) {
  .box.info             { border-left:2px solid var(--accent-secondary)}
  .box.neutral          { border-left:2px solid var(--color-neutral-300);background-color:var(--color-neutral-100)}
  .box.neutral.darker   { border-left:2px solid var(--color-neutral-400);background-color:var(--color-neutral-150)}
  .box.neutral.secondary{ border-left:2px solid var(--color-neutral-400);background-color:var(--accent-secondary-200)}
  .box.neutral.light    { border: 1px solid var(--color-neutral-300);border-radius: 10px;background-color:white}
  .box.warning          { border-left:2px solid var(--warning)}
}


.box h1,
.box h2,
.box h3            {color: var(--text) !important}

.icon-text        { display:flex;align-items:center}
.icon-text svg    {align-self:center;margin-right:0.5rem;}

.box .button       { display:flex;justify-content:center}
.box .icon-text p,
.box .icon-text h2 { margin: 10px 0px 10px 10px;}


/**
 * Les boutons
 */
.btn {
  position: relative;
  box-sizing: border-box;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  opacity: 1;
  outline: 0 solid transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:none;
  background:none;}
.btn:disabled {
  color:var(--text-secondary) !important;
  cursor: not-allowed;}
.btn-large a, .btn-large button {font-size:24px}
.btn:hover{
  color:var(--accent);}
.btn svg {z-index:100}
.btn img {width:32px;height:32px}
.btn span {
  background-color: var(--color-neutral-100);
  padding-left: 10px;
  margin-left: -16px;
  border-radius: 0 16px 16px 0;
  padding: 2px 10px 2px 20px;
  border: 1px solid var(--secondary); }
.btn small {color:var(--color-neutral-500)}


.vignette-title {display:flex; align-items:center;column-gap:1rem}


.right h1,
.right h2,
.right h3 {
  color: var(--text) !important;
}


/**
 * COMMUN pageCursus & pageModule
 */

.legend-credit{text-align:center}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .legend-credit {
    display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr;grid-column-gap: 0.5rem;
    text-align:center;
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .legend-credit {
    display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;
  }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width:1024px) {
  .legend-credit {
    display:grid;grid-template-columns:1fr;grid-template-columns:1fr 1fr 1fr;grid-row-gap: 0.5rem;
  }
}

.messageBox   {display:flex;align-items:center;padding:0.5rem}
.messageBox p {margin-left:10px;font-weight: bold;}
.messageBox.error {
    background-color: var(--warning);
    color: var(--color-neutral-100);
}
.messageBox.attention {
  background-color: var(--accent-secondary-200);
  color: var(--color-neutral-900);
  border: 1px solid var(--accent-secondary);
}
.messageBox.success {
    background-color: var(--accent-secondary);
    color: var(--color-neutral-100);
}

/**
 * FORUM
*/



.forum                                    {background-color:var(--color-neutral-100);}
.forum .section li                        {padding:0.5rem}
.forum .section li .section-name          {font-size:var(--step-2);color:var(--color-neutral-600)}
.forum a                                  {color: var(--accent);}

.forum ul.board                           {margin-bottom:0}
.forum .board  li                         {background-color:var(--color-neutral-150);border-bottom:1px dashed var(--color-neutral-500)}
.forum .board  li:nth-of-type(even)       {background-color:var(--color-neutral-100);}

.forum .board li                          {font-size: var(--step-1);padding:0.5rem;margin-left:1rem;border-bottom:1px dashed var(--color-neutral-500)}
.forum .board .board-name                 {font-size:var(--step-1);color: var(--color-neutral-800); font-family: 'josefin sans';}
.forum .board-description                 {font-size: var(--step--2); padding: 0 1rem 0 1rem;}

.forum .board .message-number             {font-size: var(--step-0);color:var(--color-neutral-600)}
.forum .board .new-message                {padding:0}
.forum .board .comment                    {font-size:var(--step--1);color:var(--accent-tertiary)}
.forum .board .thread-title               {font-size:var(--step--1);font-family:'josefin sans'}
.forum .board .new-thread                 {margin : 0 1rem}

.forum .thread .title                      {font-size:var(--step-2); padding: 0.5rem;}
.forum .thread .post li                    {background-color:var(--color-neutral-150);margin-left:1rem;border-bottom:1px dashed var(--color-neutral-500)}
.forum .thread .post li:nth-of-type(even)  {background-color:var(--color-neutral-100);}
.forum .thread .post .header               {padding:0.2rem 0.5rem;text-align:right;font-size:var(--step--1)}
.forum .thread .post .author               {color:var(--accent-secondary)}
.forum .thread .post .author-admin         {color:var(--accent-tertiary);font-weight:bold}
.forum .thread .post .datetime b           {font-weight:normal}
.forum .thread .post .content              {font-size:var(--step--1);padding:0.2rem 0.5rem}
.forum .thread .postContent blockquote     {margin-left: 2rem;  font-style: italic;font-size:var(--step--1);padding:0.2rem 0.5rem; border-left:4px solid var(--color-neutral-200)}

.forum .section li                         {padding:0rem}
.forum .board li                           {margin-left:0}
.forum .board li                           {padding:0;margin-left:0}
.forum .thread .post li                    {margin-left:0;;border: 1px solid var(--color-neutral-300)}
.forum .thread .post .header               {padding:0rem 0.2rem 1rem 0rem;}
.forum .thread .post .content              {padding:1rem 1rem}

.forum .newThread                          {padding:1rem;background-color: var(--color-neutral-600);color:var(--color-neutral-900)}
.forum .newReply                           {padding:1rem;background-color: var(--color-neutral-600);color:var(--color-neutral-900)}
.forum .newThread h3                       {color:var(--color-neutral-100)}

.forum .postContent                        {display:block;padding:1rem;}
.forum .postContent h1                     {font-size:var(--step-1)}
.forum .postContent h2                     {font-size:var(--step-0)}
.forum .postContent h3                     {font-size:var(--step-0)}
.forum .postContent p,strong,u,i,a,li      {font-size:var(--step--1)}
.forum .postContent ul                     {margin-left:1rem;}
.forum .postContent li                     {list-style:disc;border:none !important;background-color:transparent !important;font-size:var(--step--1);padding-left:1rem}
.forum .postContent ol                     {margin-left:1rem;}
.forum .postContent li                     {list-style:decimal;border:none !important;background-color:transparent !important;font-size:var(--step--1);padding-left:1rem}
.forum .likes                              {padding-left:1rem;font-size:var(--step--2); color:var(--color-neutral-600);background-color:var(--color-neutral(150))}
.forum .likeButton                         {padding-left:1rem}
.forum .likes span:after                   {content:", "}
.forum .likes span:last-of-type:after      {content:" "}

.forum .votes                              {padding-left:1rem;font-size:var(--step--2); color:var(--color-neutral-600);background-color:var(--color-neutral(150))}
.forum .votes span:after                   {content:", "}
.forum .votes span:last-of-type:after      {content:" "}


.tooltip{
  display: inline;
  position: relative;
  font-size:var(--step--2)
  }
.tooltip span {font-size:var(--step--2)}
.tooltip:hover:after{
  background: #333;
  background: rgba(0,0,0,.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
  }
.tooltip:hover:before{
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;}

footer {
    text-align:center;
    background-color: var(--color-neutral-200);
    border-top:4px solid var(--color-neutral-300);
    color: var(--text); }

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

footer .footer-block                    {padding:1rem;display:flex;flex-direction: column;justify-content:center;align-items:center;}
footer .footer-block:after              {display:block;content:' ';width:33%;margin:1rem auto;border-bottom:2px solid var(--color-neutral-100)}
footer .footer-block:after:last-of-type {display:none;}

footer .cookies p, footer .copyright    {font-size:var(--step--2)}

@media only screen and (min-width: 1024px) {
    footer .inside              {display: grid; grid-template-columns: 1fr 1fr 1fr;grid-gap: 1rem; }
    footer .footer-block:after  {display: none;}
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .forum .section li                         {padding:0.5rem}
  .forum .board li                           {margin-left:0}
  .forum .board li                           {padding:0;margin-left:0}
  .forum .thread .post li                    {margin-left:0}
  .forum .thread .post .header               {padding:0rem 0.2rem 1rem 0rem;}
  .forum .thread .post .content              {padding:1rem 1rem}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .forum .section li                         {padding:0.5rem}
  .forum .board li                           {margin-left:0}
  .forum .board li                           {padding:0;margin-left:0}
  .forum .thread .post li                    {margin-left:0}
  .forum .thread .post .header               {padding:0rem 0rem;}
  .forum .thread .post .content              {padding:1rem 1rem}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width:1024px) {
  .forum .section li                         {padding:0.5rem}
  .forum .board li                           {padding:0.5rem}
  .forum .thread .post li                    {margin-left:0}
  .forum .thread .post .header               {padding:1rem 2rem;}
  .forum .thread .post .content              {padding:1rem 2rem}
  .forum .newThread                          {margin: 0 1rem;}
}