/*------------------------RESET---------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}
article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }
/*------------------------------------------------------*/

:root                                           {
    --font1:          'inter-variable', sans-serif; /* -10-0 / 100-900 */
    --font2:          'degular-mono', sans-serif; /* 500, 700 */

    --color0:       #1f3159;
    --color0b:      #264078;
    --color0c:      #14213e;
    --color1:       #3359b1;
    --color1b:      #1f49aa;
    --color2:       #8191b9;
    --color2b:      #a9bbea;
    --color2c:      #edf2ff;
    --color2d:      #f9faff;
    --color2e:      #ffffff;
    --color3:       #ed354b; /* rgb(237,53,75) */
    --color3b:      #da2338;
    --color3c:      #f95165;

    --wrapper-side:         5vw;
    --section-padding:      min(4rem, calc(1rem + 5vw));
    --border-radius1:       min(1rem, 3vw);
    --gap1:                 min(1.3rem, calc(0.2rem + 3vw));
    --gap2:                 2.5rem;
    --gap3:                 3.5rem;
    --dropdown-border:      solid 0.07em rgb(200,200,200);
    --box-padding:          min(3rem, calc(0.8rem + 5vw));

/*    Sidebar*/
    --sidebar-w: 280px;
    --collapsed-w: 52px;
    --bg: #faf9f7;
    --sidebar-bg: #ffffff;
    --border: #e8e4df;
    --text: #2c2825;
    --muted: #9a9188;
    --accent: #c17f4a;
    --accent-light: #fdf3e8;
    --tag-bg: #f3f0ec;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

button                                          {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;}

html                                            {width: 100%; height: 100%;}
body                                            {display: flex; width: 100%; min-height: 100%; flex-direction: column; font-family: var(--font1); font-size: min(17px, calc(10px + 1vw)); color: var(--color0); font-variation-settings: "slnt" 0, "wght" 400; line-height: 1.6; position: relative; transition: .15s ease-in-out;}
body.fixed                                      {overflow-y: hidden;}
body.fixed :is(.main, .footer)                  {opacity: 0.65; filter: blur(4px);}
.wrapper                                        {display: flex; width: calc(100vw - 2 * var(--wrapper-side)); max-width: 74rem; flex-wrap: wrap; margin-inline: auto; position: relative;}
.wrapper-reset                                  {display: flex; max-width: 74rem; flex-wrap: wrap; margin-inline: auto; position: relative;}

/*@media screen and (min-width: 1081px)         {*/
/*    .wrapper.narrow                               {max-width: 50rem;}*/

/*}*/

body:has(.hero) .header                             {position: absolute; left: 0; top: 0;}

.header                                             {display: block; width: 100%; height: var(--header-height); position: relative; z-index: 10000;}
.header .wrapper                                    {height: 100%; justify-content: space-between; align-items: center; gap: 1em 2em; max-width: 85rem}
.header .custom-dropdown                            {display: flex; width: var(--logo-dropdown-width); justify-content: space-between; align-items: center; gap: 0 0.7em; position: relative; z-index: 10; box-sizing: border-box;}
.header .custom-dropdown:before                     {display: block; width: calc(100% + 1.8em); height: calc(100% + 1.4em); opacity: 0; position: absolute; left: -0.7em; top: -0.7em; z-index: -1; background: var(--color2c); padding-block: 0.3rem; border-radius: 0.4em; box-sizing: border-box; content: ""; transition: .15s ease-in-out;}
.header .custom-dropdown .hover                     {display: block; width: calc(100% + 1.8em); height: calc(100% + 1.4em); position: absolute; left: -0.7em; top: -0.7em; z-index: 31; cursor: pointer; content: "";}
.header .custom-dropdown:has(.hover:hover):before   {opacity: 1;}
.header .custom-dropdown .logo                      {display: block; width: calc(100% - 1.7em); cursor: pointer; transition: .15s ease-in-out;}
.header .custom-dropdown .logo.white                {opacity: 0; position: absolute; left: 0; top: 0;}
.header .custom-dropdown .title                     {display: block; font-size: 1.15em; font-variation-settings: "slnt" 0, "wght" 700;}
.header .custom-dropdown .chevron                   {display: block; width: 1em; position: relative; top: 0.1em; transition: .15s ease-in-out;}
.header .custom-dropdown .dropdown                  {width: calc(100% + 1.8em); position: absolute; left: -0.7em; top: 100%; padding-top: 0.9em;}
.header .custom-dropdown.show .chevron              {transform: rotate(180deg);}
.header .custom-dropdown.show .dropdown             {height: 22rem;}
.header .collapse                                   {display: flex;}
.header-chapters                                    {display: flex;}
.header-chapters .custom-dropdown                   {width: auto;}
.header-chapters .custom-dropdown .dropdown         {width: 19rem;}
.header-account                                     {display: flex; height: 2.6rem; align-items: center; background: var(--color2c); padding: 0 1.4em; border-radius: 1.3rem; box-sizing: border-box; transition: .15s ease-in-out;}
.header-account:has(.create-account)                {gap: 1em; font-size: 0.9em; padding-left: 0;}
.header-account .create-account                     {height: 2.6rem; font-size: 0.9em; border-radius: 1.3rem;}
.header-account .avatar                             {display: block; width: 0.9em; margin-right: 0.4em; position: relative;}
.header-account .avatar img                         {display: block; width: 100%; height: 100%; transition: .15s ease-in-out;}
.header-account .avatar img:nth-child(2)            {position: absolute; left: 0; top: 0; opacity: 0;}
.header-account span                                {display: flex; align-items: center;}
.header-account span > *                            {font-size: 1em; color: var(--color0); font-variation-settings: "slnt" 0, "wght" 700; transition: .15s ease-in-out;}
.header-account span > *:hover                      {color: var(--color3);}
.header-account span:nth-of-type(n+2):before        {display: block; width: 0.08em; height: 0.9em; background: var(--color3); margin-inline: 0.5em; content: "";}
.header .mode                                       {display: flex; width: 4.1rem; height: var(--mode-height); --mode-height: 2.6rem; justify-content: space-around; align-items: center; background: var(--color2c); border-radius: calc(0.5 * var(--mode-height)); padding-inline: 0.35rem; box-sizing: border-box; position: relative; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.header .mode span                                  {display: inline-block; width: 1.6rem; height: 1.6rem; background: var(--color1); border-radius: 100%; position: absolute; left: 0.4rem; top: 0.5rem; transition: .15s ease-in-out;}
.header .mode img                                   {display: block; width: 0.9rem; height: 0.9rem; opacity: 1; position: relative; z-index: 2; transition: .15s ease-in-out}
.header .mode img:nth-of-type(2)                    {filter: invert(); opacity: 0.3;}
@media screen and (min-width: 1081px)             {
    .header                                           {--header-height: 6rem; --logo-dropdown-width: 15em;}
    .header :is(.mobile-only, #navicon)               {display: none;}
    .header .collapse                                 {flex-grow: 2; justify-content: flex-end; align-items: center; gap: 1em;}
    .header .collapse:has(.header-chapters)           {justify-content: end;}
    .header-chapters                                  {flex-grow: 2; display: none}
    .header .lang                                     {display: block; height: var(--lang-size); --lang-size: 2.2em; overflow: hidden; position: relative; transition: .15s ease-in-out;}
    .header .lang ul                                  {display: block; height: var(--lang-size); overflow: hidden; border-radius: 0.35em; border: solid 1px transparent; box-sizing: border-box; transition: .15s ease-in-out;}
    .header .lang ul li                               {display: block; height: var(--lang-size); box-sizing: border-box; position: relative; order: 1; transition: .15s ease-in-out;}
    .header .lang ul li a                             {display: flex; width: 100%; height: 100%; align-items: center; font-size: 1em; font-variation-settings: "slnt" 0, "wght" 700; color: var(--color0); padding-inline: 0.55em; box-sizing: border-box; transition: .15s ease-in-out;}
    .header .lang ul li a:hover                       {color: var(--color1); cursor: pointer;}
    .header .lang ul li.sel a                         {color: var(--color0);}
    .header .lang ul li:not(.sel) a:hover             {background: var(--color2c);}
    .header .lang.hover                               {overflow: visible;}
    .header .lang:hover ul                            {border: var(--dropdown-border);}
    .header .lang.hover ul                            {height: auto; background: white; border: var(--dropdown-border);}
    .header .lang.hover ul li                         {opacity: 1;}

/*    test*/

    .sidenav {
        height: 90vh;
        width: 18rem;
        position: fixed;
        z-index: 1;
        left: 0;
        background-color: #fff;
        overflow-x: auto;
        overflow-y: auto;
        display: flex;
        border: var(--dropdown-border);
        transition: width var(--transition);
        flex-direction: column;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /* The navigation menu links */
    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
    }

    /* When you mouse over the navigation links, change their color */
    /*.sidenav a:hover {*/
    /*    color: #f1f1f1;*/
    /*}*/

    .sidenav.collapsed {
        width: 3rem;
    }


    /* Toggle button */
    .toggle-btn {
        position: absolute;
        top: 20px;
        right: 14px;
        width: 28px;
        height: 28px;
        border: var(--dropdown-border);
        background: var(--sidebar-bg);
        border-radius: 0.4em;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: background 0.2s, border-color 0.2s;

    }
    .toggle-btn:hover { background: var(--color2c); border-color: var(--color1); }
    .toggle-btn svg {
        width: 14px; height: 14px;
        stroke: var(--muted);
        transition: transform var(--transition), stroke 0.2s;
    }
    .sidenav.collapsed .toggle-btn svg { transform: rotate(180deg); }
    .toggle-btn:hover svg { stroke: var(--accent); }

    /* Sidebar inner — fades out when collapsed */
    .sidebar-inner {
        opacity: 1;
        transition: opacity 0.2s;
        min-width: 16rem;
    }
    .sidenav.collapsed .sidebar-inner { opacity: 0; pointer-events: none; }

    .sidebar-inner                                {display: flex; width: 100%; height: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; background: white; padding-bottom: 0.3rem; overflow-y: auto; box-sizing: border-box;}
    .sidebar-inner ul                             {display: block; width: 100%; box-sizing: border-box;}
    .sidebar-inner ul li                          {display: block; width: 100%;}
    .sidebar-inner ul li a                        {display: block; width: 100%; white-space: nowrap; font-size: 1em; color: var(--color0); font-variation-settings: "slnt" 0, "wght" 500; line-height: 1.35; padding-inline: 0.9rem; box-sizing: border-box; transition: .15s ease-in-out;}
    .sidebar-inner ul li a[href]:hover            {color: var(--color1); background: var(--color2c);}
    .sidebar-inner > ul > li                      {padding-block: 0.3rem 0.45rem;}
    .sidebar-inner > ul > li:not(:last-child)     {border-bottom: solid 1px rgba(0,0,0,0.25);}
    .sidebar-inner > ul > li > a                  {font-variation-settings: "slnt" 0, "wght" 700; padding-block: 0.4rem;}
    .sidebar-inner > ul > li > ul                 {font-size: 0.75em; padding-bottom: 0.2rem;}
    .sidebar-inner > ul > li > ul > li > a        {padding-block: 0.25rem; text-decoration: none;}

}

@media screen and (max-width: 1080px)             {
    .header                                           {--header-height: calc(2.5rem + 4vw); --logo-dropdown-width: 13em;}
    .header .desktop-only                             {display: none;}
    .header .mobile-only                              {display: flex; justify-content: flex-end; flex-grow: 2;}
    .header .collapse                                 {width: 19em; height: 100%; flex-direction: column; justify-content: flex-start; background: white; --inner-padding: calc(0.8rem + 2vw); overflow: hidden; position: fixed; right: -25rem; top: 0; z-index: 100; padding-bottom: 0.6rem; box-sizing: border-box; opacity: 0; box-shadow: 0 0 1em rgba(0,0,0,0.1); transition: opacity .5s ease-in-out, right .5s ease-in-out;}
    .header .lang                                     {display: block; width: 100%; height: var(--header-height); order: -1; padding: 0 var(--inner-padding) 0 calc(var(--inner-padding) + 5rem); box-sizing: border-box;}
    .header .lang ul                                  {display: flex; height: 100%; align-items: center; gap: 0.5em; padding: 0;}
    .header .lang ul li                               {display: block; order: 1; transition: .15s ease-in-out;}
    .header .lang ul li a                             {display: flex; justify-content: center; align-items: center; font-size: 1em; font-variation-settings: "slnt" 0, "wght" 500; color: var(--color0); opacity: 0.6; padding-top: 0.15em; transition: .15s ease-in-out;}
    .header .lang ul li a:hover                       {opacity: 1; cursor: pointer;}
    .header .lang ul li.sel a                         {font-variation-settings: "slnt" 0, "wght" 700; opacity: 1;}
    .header .mode                                     {position: absolute; top: calc(0.5 * calc(2.5rem + 4vw) - 0.5 * var(--mode-height)); left: var(--inner-padding); z-index: 5;}
    .header-account                                   {order: 0; width: calc(100% - 2 * var(--inner-padding)); justify-content: center; margin-left: var(--inner-padding);}
    .header-account .button                           {width: 100%;}
    .header .collapse:has(.create-account)            {flex-direction: row; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;}
    .header-chapters                                  {order: 2; width: 100%; height: calc(100% - (5rem + 5vw)); margin-top: 1rem; overflow: hidden;}
    .header-chapters .custom-dropdown                 {width: 100%; flex-direction: column;}
    .header-chapters .custom-dropdown:before,
    .header-chapters .custom-dropdown .hover          {display: none;}
    .header-chapters .custom-dropdown .title          {width: 100%; font-size: 1.5em; color: var(--color0) !important; padding-inline: var(--inner-padding); box-sizing: border-box;}
    .header-chapters .custom-dropdown .chevron        {display: none;}
    .header-chapters .custom-dropdown .dropdown       {width: 100%; height: auto; position: relative; inset: auto; padding: 0;}
    .header-chapters .custom-dropdown .dropdown .inner {padding: 0; border: 0; border-radius: 0}
    .header-chapters .custom-dropdown .dropdown .inner ul li a
    {padding-inline: var(--inner-padding);}
    .header #navicon                                  {display: flex; width: 1.4em; height: 16px; font-size: 1em; cursor: pointer; position: relative; z-index: 101;}
    .header #navicon span                             {display: block; width: 100%; height: 0.16em; background: var(--color0); position: absolute; transition: .2s ease-in-out;}
    .header #navicon:hover span                       {background: var(--color1);}
    .header #navicon span:nth-child(1)                {top: 0;}
    .header #navicon span:nth-child(2),
    .header #navicon span:nth-child(3)                {top: calc(50% - 0.08em);}
    .header #navicon span:nth-child(4)                {bottom: 0;}
    .header #navicon div                              {display: none; width: 6em; height: 2em; position: absolute; left: 0; top: calc(50% - 1em); z-index: 2;}
    .header.show #navicon span:nth-child(2)           {transform: rotate(45deg);}
    .header.show #navicon span:nth-child(3)           {transform: rotate(-45deg);}
    .header.show #navicon span:nth-child(1),
    .header.show #navicon span:nth-child(4)           {opacity: 0 !important;}
    .header.show #navicon div                         {display: block;}
    .header.show .collapse                            {right: 0; opacity: 1;}
    .sidenav                                          {display: none}
}

.footer                                         {display: block; width: 100%; background: var(--color0); padding-block: 1.8rem 1.6rem; transition: .15s ease-in-out;}
.footer .wrapper                                {justify-content: space-between; gap: 1rem 2.5rem;}
.footer .wrapper > div                          {display: flex; gap: 1em; flex-wrap: wrap;}
.footer .wrapper > div > *                      {display: flex; align-items: center; gap: 0.3em; font-size: 0.9em; color: var(--color2); font-variation-settings: "slnt" 0, "wght" 600; transition: .15s ease-in-out;}
.footer .wrapper > div a:hover                  {color: var(--color2b);}
.footer .wrapper > div a svg                    {display: block; width: 1.1em; height: 1.1em; fill: var(--color2); transition: .15s ease-in-out;}
.footer .wrapper > div a:hover svg              {fill: var(--color2b);}
.footer .wrapper .soc                           {gap: 0.65em;}
.footer .wrapper .soc a                         {font-size: 1.15em;}
@media screen and (min-width: 1081px)         {
    .footer .wrapper > div:nth-child(1)           {flex-grow: 2;}
}
@media screen and (max-width: 1080px)         {
    .footer .wrapper > div                        {width: 100%; justify-content: center;}
    .footer .wrapper > div > *                    {font-size: 1em;}
    .footer .wrapper .copyright                   {order: 2;}
    .footer .wrapper .soc                         {font-size: 1.2em; margin-block: 0.5em;}
    .footer .wrapper .copyright > *               {font-size: 0.8em;}
}

strong                                          {font-variation-settings: "slnt" 0, "wght" 700;}
em                                              {font-style: italic;}
.text-color3                                    {color: var(--color3);}

h1, h2, h3                                      {display: block; width: 100%; color: var(--color0); font-variation-settings: "slnt" 0, "wght" 700; line-height: 1.1; box-sizing: border-box; position: relative; transition: .15s ease-in-out;}
h1                                              {font-size: min(2.5em, calc(0.8em + 4vw));}
h2                                              {font-size: min(2em, calc(0.6em + 4vw)); margin-bottom: var(--gap1);}
h3                                              {font-size: min(1.85em, calc(0.4em + 4vw)); color: var(--color1);}

.main                                           {display: flex; width: 100%; flex-direction: column; flex-grow: 1; flex-wrap: wrap; margin: 0 auto; box-sizing: border-box; position: relative; transition: .3s ease-in-out;}
.main :is(p, li)                                {font-size: 1.1em;}
.main p                                         {display: block; width: 100%; box-sizing: border-box;}
.main p.large                                   {font-size: min(1.6em, calc(0.9em + 1vw));}
.main p a, .main li a, .main td a               {text-decoration: underline; color: var(--color1); transition: .15s ease-in-out;}
.main :is(p a, li a, td a):hover                {color: var(--color3) !important; text-decoration-color: transparent;}

p.large                                         {font-size: 1.3em; line-height: 1.3;}

.section                                        {display: flex; width: 100%; flex-direction: column; align-items: center; position: relative; padding-block: var(--section-padding); box-sizing: border-box; overflow: hidden; transition: .15s ease-in-out;}
.section.padding-top-0                          {padding-top: 0;}
.section.padding-bottom-0                       {padding-bottom: 0;}
@media screen and (max-width: 768px)          {
    .section:not(.hero):first-of-type             {padding-top: var(--header-height);}
}

.section:has(.course-hero, .account)            {padding-top: 0;}

.dropdown                                       {display: block; width: 100%; height: 0; overflow-y: hidden; transition: .4s ease-in-out;}
.dropdown .inner                                {display: flex; width: 100%; height: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; background: white; padding-bottom: 0.3rem; border: var(--dropdown-border); border-radius: 0.4em; overflow-y: auto; box-sizing: border-box;}
.dropdown .inner ul                             {display: block; width: 100%; box-sizing: border-box;}
.dropdown .inner ul li                          {display: block; width: 100%;}
.dropdown .inner ul li a                        {display: block; width: 100%; font-size: 1em; color: var(--color0); font-variation-settings: "slnt" 0, "wght" 500; line-height: 1.35; padding-inline: 0.9rem; box-sizing: border-box; transition: .15s ease-in-out;}
.dropdown .inner ul li a[href]:hover            {color: var(--color1); background: var(--color2c);}
.dropdown .inner > ul > li                      {padding-block: 0.3rem 0.45rem;}
.dropdown .inner > ul > li:not(:last-child)     {border-bottom: solid 1px rgba(0,0,0,0.25);}
.dropdown .inner > ul > li > a                  {font-variation-settings: "slnt" 0, "wght" 700; padding-block: 0.4rem;}
.dropdown .inner > ul > li > ul                 {font-size: 0.9em; padding-bottom: 0.2rem;}
.dropdown .inner > ul > li > ul > li > a        {padding-block: 0.2rem;}

.flex                                           {display: flex !important; width: 100%; flex-wrap: wrap; gap: 0.6em; box-sizing: border-box; margin-top: var(--gap1);}

.button                                         {display: flex; height: 2.8em; justify-content: center; align-items: center; gap: 0.4em; font-size: 1em; color: white; font-variation-settings: "slnt" 0, "wght" 700; white-space: nowrap; padding: 0 1.5em; border-radius: 1.4em; border: none; outline: solid 0.15em transparent; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1;; transition: .15s ease-in-out;}
.button img                                     {display: block; height: 1em; width: auto;}
.button.color3                                  {background: var(--color3);}
.button.color3:hover                            {background: var(--color3b);}
.button.color3:focus                            {outline-color: var(--color1)}
.button.border0                                 {color: var(--color0); border: solid 0.12em var(--color0);}
.button.border0:hover                           {color: var(--color0b); border-color: var(--color0b);}

.breadcrumbs                                    {display: block; width: 100%;}
.breadcrumbs + *                                {margin-top: 0.8rem;}
.breadcrumbs > div                              {display: flex; flex-wrap: wrap; margin: 0; padding: 0;}
.breadcrumbs > div > span                       {display: flex; width: auto ; align-items: center; font-size: 0.9em; position: relative;}
.breadcrumbs > div > span:before                {display: none;}
.breadcrumbs > div > span:not(:last-child) a:after
{display: inline-block; width: 1.2em; text-align: center; content: "/";}
.breadcrumbs > div > span a                     {display: block; color: var(--color0); text-decoration: underline; font-variation-settings: "slnt" 0, "wght" 500; border: none; transition: .15s ease-in-out;}
.breadcrumbs > div > span:last-child a          {color: var(--color0); text-decoration: none; font-variation-settings: "slnt" 0, "wght" 700;}
.breadcrumbs > div > span a[href]:hover         {color: var(--color0); text-decoration-color: transparent;}
@media screen and (max-width: 768px)          {
    .breadcrumbs                                  {overflow-x: auto; scrollbar-width: none;}
    .breadcrumbs::-webkit-scrollbar               {display: none;}
    .breadcrumbs > div                            {flex-wrap: nowrap;}
    .breadcrumbs > div > span a                   {white-space: nowrap;}
}

.padding-inline                                 {box-sizing: border-box;}
@media screen and (min-width: 769px)          {
    .padding-inline                               {padding-inline: var(--gap1);}
}

.hp :is(h2, h3),

.content                                        {display: flex; width: 100%; flex-wrap: wrap; gap: 0.75em;}

.box                                            {display: flex; background: var(--color2c); padding-block: var(--box-padding); border-radius: var(--border-radius1); box-sizing: border-box; transition: .15s ease-in-out;}

.message                                        {display: block; width: 100%; font-size: 0.8em;padding-bottom: 0.6em;}
.message .inner                                 {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; gap: 1.2em; padding: 1em 1.5em; border-radius: 0.8em; position: relative; z-index: 5; overflow: hidden; box-sizing: border-box;}
.message .inner:before                          {display: block; opacity: 0.1; position: absolute; inset: 0; z-index: -1; content: "";}
.message.red .inner:before                      {background: var(--color3b);}
.message.red .inner p                           {color: var(--color3b);}
.message.green .inner:before                    {background: #00b147;}
.message.green .inner p                         {color: #00b147;}
.message.yellow .inner:before                   {background: #b19900;}
.message.yellow .inner p                        {color: #b19900;}
.message p                                      {font-variation-settings: "wght" 550;}
.message .close                                 {display: block; width: 1.2em; height: 1.2em; position: relative; cursor: pointer; transition: .15s ease-in-out;}
.message .close:before,
.message .close:after                           {display: block; width: 90%; height: 0.12em; position: absolute; left: 5%; top: 0.75em; content: "";}
.message .close:before                          {transform: rotate(45deg);}
.message .close:after                           {transform: rotate(-45deg);}
.message .close:hover                           {opacity: 0.7;}
.message.red .close:before,
.message.red .close:after                       {background: var(--color3b);}
.message.green .close:before,
.message.green .close:after                     {background: #00b147;}
.message.yellow .close:before,
.message.yellow .close:after                    {background: #b19900;}

.hero                                           {padding-top: min(12rem, calc(3rem + 8vw));}
.hero .background                               {display: block; width: 100rem; height: calc(100% - 1.5em); background-image: linear-gradient(to right, transparent, var(--color2c), transparent); position: absolute; left: calc(50% - 50rem); bottom: 0; content: ""; transition: .15s ease-in-out;
    -webkit-mask-image: linear-gradient(to top, black, transparent); mask-image: linear-gradient(to top, black, transparent);
    -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; ; mask-size: contain; mask-repeat: no-repeat; mask-position: center center;
}
.hero .background:before                        {display: block; width: 100%; height: 100%; opacity: 0.1; background: url("../images/pictogram-color1.svg") no-repeat center bottom; background-size: auto min(115%, 70vw); position: absolute; left: 0; bottom: -15%; content: "";}
.hero .wrapper                                  {justify-content: center;}
.hero .wrapper .content                         {max-width: 38em; justify-content: center; font-size: 1.1em;}
.hero h1                                        {font-size: min(3em, calc(1.2em + 4vw));}
.hero :is(h1, p)                                {text-align: center;}
.hero .button                                   {margin-top: 0.5em;}
.hero:has(.button)                              {padding-bottom: 0;}
.hero:has(.button) .background                  {bottom: 1.4em;}

.preview                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.3em; padding-bottom: var(--gap1); border-radius: var(--border-radius1); border: solid 0.1em rgba(0,0,0,0.15); box-sizing: border-box; transition: .15s ease-in-out;}
.preview:hover                                  {background: var(--color2d); border-color: var(--color2b);}
.preview .img                                   {display: block; width: 100%; padding-top: 66.66%; border-radius: calc(0.5 * var(--border-radius1)); overflow: hidden; position: relative; transition: .15s ease-in-out;}
.preview .img span                              {display: block; position: absolute; inset: 0; transition: .15s ease-in-out;}
.preview .img span img                          {display: block; width: 100%; height: 100%; object-fit: cover;}
.preview .img span:hover                        {opacity: 0.85;}
.preview > div                                  {display: flex; width: calc(100% - var(--gap2)); align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 3.5em; position: relative;}
.preview .title                                 {display: block; width: 100%; text-align: left; font-size: min(1.4rem, calc(0.5rem + 2vw)); font-variation-settings: "slnt" 0, "wght" 700; line-height: 1.3;}
.preview .title a                               {color: var(--color0); transition: .15s ease-in-out;}
.preview .title a:hover                         {color: var(--color3) !important;}
.preview .text                                  {display: block; width: 100%; text-align: left; font-size: 0.85em; opacity: 0.7;}
.preview .bottom                                {display: flex; width: 100%; justify-content: flex-end; align-items: center; gap: 1em 1.5em; position: absolute; left: 0; bottom: 0;}
.preview .bottom .button                        {font-size: 0.8em;}

.previews                                       {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1); box-sizing: border-box;}
.previews + h2                                  {margin-top: var(--gap2);}
@media screen and (min-width: 1081px)         {
    .previews .preview                            {width: calc(33.33% - 2 / 3 * var(--gap1));}
}
@media screen and (min-width: 641px) and (max-width: 1080px){
    .previews .preview                            {width: calc(50% - 0.5 * var(--gap1));}
}

.course-hero, .cols                             {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;}
.course-hero                                    {align-content: flex-start; gap: var(--gap1) 0;}
.course-hero .perex                             {display: flex; width: 100%; align-items: start; align-content: start; flex-wrap: wrap; gap: 0.5em;}
.course-hero .img                               {display: block; width: 100%; border-radius: calc(0.8 * var(--border-radius1)); overflow: hidden;}
.course-hero .img img                           {display: block; width: 100%; height: auto;}
.cols                                           {gap: var(--gap2) 0; margin-top: 1em}
.cols > *                                       {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2) 0;}
.fixing-area                                    {display: block; width: 100%; flex-grow: 2; position: relative;}
.fixing-area .fixing-element                    {display: block;}
@media screen and (min-width: 1081px)         {
    .course-hero, .cols                           {padding-inline: var(--gap3); --right-width: 400px;}
    .course-hero .perex,
    .cols > *:nth-child(1)                        {width: calc(100% - var(--right-width) - var(--gap3));}
    .course-hero .img,
    .cols > *:nth-child(2)                        {width: var(--right-width);}
    .fixing-area                                  {top: -1rem;}
    .fixing-area.no-fixing                        {margin-bottom: -2rem;}
    .fixing-area .fixing-element                  {width: var(--right-width); padding: 1rem 0; box-sizing: border-box;}
    .fixing-area .fixing-element.fixed            {position: fixed; top: 0;}
    .fixing-area .fixing-element.fixed.fixed-end  {position: absolute; top: auto; bottom: -2rem;}
}
@media screen and (max-width: 1080px)         {
    .course-hero                                  {background: none !important; border-radius: 0 !important; padding-block: 0 !important;}
    .cols aside                                   {order: -1;}
}

.cta1                                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em; background: url("../images/pictogram-color1.svg") no-repeat center bottom -2em, var(--color1b); background-size: auto 100%; padding: var(--gap2); box-sizing: border-box; border-radius: var(--border-radius1);}
.cta1 > span                                    {display: block; width: 100%; text-align: center;}
.cta1 > span > a                                {color: var(--color2e);}
.cta1 .title                                    {font-size: 1.85em; color: white; font-variation-settings: "slnt" 0, "wght" 700; line-height: 1.3;}
.cta1 .text                                     {font-size: 1.05em; color: var(--color2b); font-variation-settings: "slnt" 0, "wght" 500; line-height: 1.3; margin-block: -0.2em 0.6em;}
.cta1 .checkbox                                 {width: auto; font-size: 0.8em; margin-bottom: 0.2em;}
.cta1 .checkbox label                           {color: var(--color2b);}
.cta1 .checkbox label a                         {color: var(--color2b); text-decoration: underline;}
.cta1 .checkbox label a:hover                   {text-decoration-color: transparent;}
.cta1 .chk1:not(:checked) + label:before        {background-color: var(--color2b); border: none;}
.cta1 .price                                    {font-size: 1.3em; color: white;}
.cta1 .price span                               {font-size: 0.5em;}

.block                                          {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);}
.block:not(:last-of-type)                       {padding-bottom: var(--gap2); border-bottom: solid 1px var(--color2);}
.block:has(+ .bottom-nav)                       {padding-bottom: 0; border-bottom: none;}

/* Start Course section */
.course                                        {display: block; width: 100%}
.course h2                                     {font-size: min(2rem, calc(0.6em + 4vw));}
.course h3                                     {font-size: min(1.4rem, calc(0.5em + 3vw));}
.course :is(h2, h3)                            {margin-bottom: calc(0px - 0.2 * var(--gap1));}
.course :is(p, li)                             {line-height: 1.5;}
@media screen and (max-width: 1080px)         {
    .section:has(.course) .wrapper               {max-width: 40rem;}
    .course                                      {gap: var(--gap1);}
}

.course-styles :is(ul, ol)                     {display: block; padding: 0 0 0 1em; margin: -0.15em 0 0;}
.course-styles :is(ul li, ol li)               {width: 100%; padding-left: 1.8em; position: relative; box-sizing: border-box;}
.course-styles :is(ul li, ol li):not(:first-child)
{margin-top: 0.2em;}
.course-styles li:before                       {display: block; position: absolute; content: "";}
.course-styles ul li:before                    {width: 1em; height: 0.6em; left: 0; top: 0.42em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 490 800'%3E%3Cpath d='M445.8,499.2l-271.5,271.5c-19.6,19.6-45.1,29.3-70.7,29.3s-51.2-9.7-70.7-29.3c-39-39-39-102.3,0-141.5l229.2-229.2L32.6,170.8C-6.4,131.7-6.4,68.4,32.6,29.3c39-39,102.3-39,141.5,0l271.5,271.5c26.5,26.5,41.1,61.7,41.1,99.2s-14.6,72.7-41.1,99.2h.2Z' fill='rgb(237,53,75)' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center; background-size: contain;}
.course-styles ul.checks li:before             {width: 0.7em; height: 0.7em; left: 0; top: 0.4em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M298.5,678.7c-44.7,0-86.7-17.4-118.3-49L28,477.5c-37.3-37.3-37.3-97.7,0-135,37.3-37.3,97.7-37.3,135,0l135.5,135.5,338.5-338.5c37.3-37.3,97.7-37.3,135,0,37.3,37.3,37.3,97.7,0,135l-355.3,355.3c-31.6,31.6-73.6,49-118.3,49Z' fill='rgb(237,53,75)' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain; content: "";}
.course-styles ol                              {list-style-type: none; counter-reset: li;}
.course-styles ol > li                         {counter-increment: li;}
.course-styles ol > li:before                  {color: var(--color3); font-variation-settings: "slnt" 0, "wght" 600; left: -0.04em; top: 0; content: counter(li)".";}
.course-styles :is(ul, ol) :is(ul, ol)         {margin-block: 0.25em 0.4em;}
.course-styles :is(ul, ol) :is(ul li, ol li)   {font-size: 1em;}
@media screen and (min-width: 1281px)         {
    .course-styles :is(ul, ol).cols2             {column-count: 2; column-gap: 1.5em;}
}
@media screen and (min-width: 641px) and (max-width: 1080px){
    .course-styles :is(ul, ol).cols2             {column-count: 2; column-gap: 1.5em;}
}

/* End Course section */


/* Start Chapter section */
/* Start of markdown CSS style */
code:not(pre code)                             {font-size: 0.85em; color: var(--color3); font-weight: 500; background-color: #f9f2f4; border-radius: 0.18em; padding: .1em .355em; word-wrap: break-word; box-sizing: border-box; position: relative; top: -0.1em; font-family: var(--font2);}
.markdown-text code:not(pre code)              {font-size: 0.85em; color: var(--color3); font-weight: 500; background-color: #f9f2f4; border-radius: 0.18em; padding: .1em .355em; word-wrap: break-word; box-sizing: border-box; position: relative; top: -0.1em; font-family: var(--font2);}
.markdown-text pre code                        {font-family: Verdana, sans-serif !important;}

.markdown-text hr                              {margin-block-end: 1.5rem}

.markdown-text h1                               {font-size: 2.6rem; text-align: center; text-decoration: underline; margin-top: 1em}
.markdown-text h2                               {font-size: 2.3rem;}
.markdown-text h3                               {font-size: 2.0rem;}
.markdown-text h4                               {font-size: 1.7rem;}
.markdown-text h5                               {font-size: 1.3rem; margin-bottom: 0.5em}
.markdown-text h6                               {font-size: 1rem; margin-top: 0.5em}

.markdown-text ul                              {list-style-type: disc; padding-left: 1.8em;  display: block}
.markdown-text ul ul                           {list-style-type: circle; margin-top: 0.1rem; margin-bottom: 0.1rem;}
.markdown-text ul ul ul                        {list-style-type: square; margin-top: 0.1rem; margin-bottom: 0.1rem;}

.markdown-text :is(p, li)                      {font-size: 1.03em;}
.markdown-text p                               {margin-bottom: 1rem;}
.markdown-text :is(ul, ol)                     {margin-bottom: 1rem; padding-left: 2rem;}
/* End of markdown CSS style */

.article                                        {display: block; width: 100%}
.article h2                                     {font-size: min(2rem, calc(0.6em + 4vw));}
.article h3                                     {font-size: min(1.4rem, calc(0.5em + 3vw));}
.article :is(h2, h3)                            {margin-bottom: calc(0px - 0.2 * var(--gap1));}
.article :is(p, li)                             {line-height: 1.5;}
@media screen and (max-width: 1080px)         {
    .section:has(.article) .wrapper               {max-width: 40rem;}
    .article                                      {gap: var(--gap1);}
}

.article-styles :is(ul, ol)                     {display: block; padding: 0 0 0 1em; margin: -0.15em 0 0;}
.article-styles :is(ul li, ol li)               {width: 100%; padding-left: 0.6em; position: relative; box-sizing: border-box;}
.article-styles li:before                       {display: block; position: absolute; content: "";}
.article-styles ul li:before                    {width: 1em; height: 0.6em; left: 0; top: 0.42em;}
.article-styles ul.checks li:before             {width: 0.7em; height: 0.7em; left: 0; top: 0.4em;}
.article-styles ol                              {list-style-type: none; counter-reset: li;}
.article-styles ol > li                         {counter-increment: li;}
.article-styles ol > li:before                  {color: var(--color3); font-variation-settings: "slnt" 0, "wght" 600; left: -0.04em; top: 0; content: counter(li)".";}
.article-styles :is(ol) :is(ol li)              {font-size: 1em; padding-left: 1.5em;}
@media screen and (min-width: 1281px)         {
    .article-styles :is(ul, ol).cols2             {column-count: 2; column-gap: 1.5em;}
}
@media screen and (min-width: 641px) and (max-width: 1080px){
    .article-styles :is(ul, ol).cols2             {column-count: 2; column-gap: 1.5em;}
}

/* End Chapter section */

.dropdown-items                                 {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap;}
.dropdown-items > div                           {display: block; width: 100%; padding: 1em; border: solid 1px transparent; box-sizing: border-box; position: relative; z-index: 1; overflow: hidden; transition: .15s ease-in-out;}
.dropdown-items > div:not(:first-of-type)       {border-top: solid 1px var(--color2);}
.dropdown-items .title                          {display: block; width: 100%; font-size: 1.1em; font-variation-settings: "slnt" 0, "wght" 600; line-height: 1.4; cursor: pointer; padding-right: 2em; box-sizing: border-box; position: relative; transition: .15s ease-in-out;}
.dropdown-items .title:after                    {display: block; width: 0.7em; height: 0.7em; position: absolute; right: 0; top: 0.34em; background: url("../images/icon-color3-chevron.svg") no-repeat center center; background-size: contain; content: ""; transition: .15s ease-in-out;}
.dropdown-items .title:hover                    {color: var(--color3);}
.dropdown-items .collapse                       {display: none; width: 100%; padding-block: 0.6rem 0.2rem; box-sizing: border-box;}
.dropdown-items .collapse :is(p, li)            {font-size: 1em;}
.dropdown-items .collapse > *:not(:first-child) {margin-top: 0.65em;}
.dropdown-items > div.sel                       {border-color: var(--color2); border-radius: var(--border-radius1);}
.dropdown-items > div.sel .title:after          {transform: rotate(180deg);}
.dropdown-items > div.sel + div                 {border-color: transparent !important;}

ul.list-access li                               {padding-left: 1.5em;}
ul.list-access li:before                        {width: 0.9em; height: 0.9em; top: 0.25em; border-radius: 0; background: url("../images/icon-color0-book.svg") no-repeat center center; background-size: contain;}
ul.list-access li.locked:before                 {background-image: url("../images/icon-color3-lock.svg");}

.chapter-hero                                   {display: block; width: 100%; flex-wrap: wrap; gap: var(--gap1);}
.chapter-hero h1                                {text-align: center; text-decoration: underline;}


.bottom-nav                                     {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.7em; margin-top: 0.7em; transition: .15s ease-in-out;}
.bottom-nav .next                               {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5em; background: var(--color2c); padding: var(--gap1); border-radius: var(--border-radius1); box-sizing: border-box;}
.bottom-nav .next .button                       {font-size: 0.85em;}
.bottom-nav .next .next-chapter                 {display: block; width: 100%; text-align: center; font-size: 0.85em;}
.bottom-nav .prev                               {display: block; width: 100%; text-align: center; font-size: 0.85em;}
.bottom-nav .prev strong                        {display: inline-block; margin-right: 0.8em;}
.bottom-nav .prev a .title                      {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.bottom-nav .prev a svg                         {display: inline-block; width: auto; height: 0.55em; fill: var(--color0); margin-right: 0.1em; position: relative; top: -0.1em; transition: .15s ease-in-out;}
.bottom-nav .prev a:hover .title                {color: var(--color3); text-decoration-color: transparent;}
.bottom-nav .prev a:hover svg                   {fill: var(--color3);}

.form-items                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--form-gap); --form-gap: 0.8rem; --form-item-height: 2.8rem;}
.form-items-reset                               {display: flex; width: 100%; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: var(--form-gap); --form-gap: 0.8rem; --form-item-height: 2.8rem;}

.form-item                                      {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.25em; position: relative;}
.form-item label                                {display: block; width: 100%; font-size: 0.85em; font-variation-settings: "slnt" 0, "wght" 600; color: var(--color0); transition: .15s ease-in-out;}
.form-item > div                                {display: block; width: 100%;}
.form-item :is(input, textarea, select)         {display: block; width: 100%; height: var(--form-item-height); background: white; font-size: 1em; color: var(--color0); font-variation-settings: "slnt" 0, "wght" 700; border: solid 0.08em var(--color2b); outline: solid 0.15em transparent; padding: 0 0.6em; border-radius: 0.35em; box-sizing: border-box; position: relative; z-index: 2; font-family: var(--font1); transition: .15s ease-in-out;}
.form-item textarea                             {height: 10em; padding-block: 0.8em;}
.form-item select                               {padding-right: 2em; background-image: url("../images/icon-color3-chevron.svg"); background-repeat: no-repeat; background-position: right 0.8em center; background-size: 0.6em auto; -moz-appearance: none; -webkit-appearance: none; appearance: none; cursor: pointer;}
.form-item :is(input, textarea, select):focus   {border-color: transparent; outline-color: var(--color3);}
.form-item:has(textarea)                        {width: 100% !important;}
.form-item .note                                {display: block; width: 100%; font-size: 0.7em;}
.form-item .note a                              {color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;}
.form-item .note a:hover                        {color: var(--color0); text-decoration-color: transparent;}
.form-item .form-error                          {display: block; font-size: 0.75em; color: var(--color3b); font-variation-settings: "wght" 600; margin-top: -0.3em;}

.checkbox                                       {display: block; width: 100%; position: relative;}

.form                                           {flex-wrap: wrap; padding: var(--gap2);}
.form h2                                        {text-align: center; margin-bottom: var(--gap1);}
.form-bottom                                    {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1em; margin-top: var(--gap1);}
.form-bottom .checkbox                          {width: auto; font-size: 0.8em;}
.form-bottom .checkbox a                        {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}
.form-bottom .checkbox a:hover                  {color: var(--color0); text-decoration-color: transparent;}
@media screen and (min-width: 641px)          {
    .form .form-item                              {width: calc(50% - 0.5 * var(--form-gap));}
}

.chk1:not(:checked),
.chk1:checked                                   {position: absolute; top: 0; left: -9999px;}
.chk1:not(:checked) + label,
.chk1:checked + label                           {display: block; position: relative; text-align: left; font-size: 1em; font-variation-settings: "wght" 500; line-height: 1.25; padding-inline-start: 1.35em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}
.chk1:not(:checked) + label:before,
.chk1:checked + label:before                    {display: block; width: 0.95em; height: 0.95em; border-radius: 0.2em; position: absolute; left: 0; top: 0.13em; border: solid 0.08em var(--color2b); outline: solid 0.15em transparent; box-sizing: border-box; overflow: hidden; content: "";}
.chk1:not(:checked) + label:before              {background-color: white;}
.chk1:checked + label:before                    {background: URL('../images/check.svg') no-repeat center center, var(--color3); background-size: 100% 100%; border-color: transparent;}
.chk1:disabled + label,
.chk1:disabled + label:before                   {opacity: 0.4;}
.chk1:not(:checked):focus + label:before ,
.chk1:checked:focus + label:before              {border-color: transparent; outline-color: var(--color1);}

.log-reg                                        {width: 100%; flex-direction: column; align-items: center; gap: 1em; padding-inline: min(3rem, calc(0.8rem + 5vw));}
.log-reg h1                                     {text-align: center; margin-bottom: 1.5rem}
.log-reg :is(.form-items, .button)              {width: 100%; max-width: 20rem;}
.log-reg .to-log-reg                            {display: block; width: 100%; text-align: center; font-size: 0.9em;}
.log-reg .to-log-reg a                          {color: var(--color2); font-variation-settings: "slnt" 0, "wght" 600; text-decoration: underline; transition: .15s ease-in-out;}
.log-reg .to-log-reg a:hover                    {color: var(--color1b); text-decoration-color: transparent;}

.log-reg-reset                                   {width: 100%; flex-direction: column; align-items: center; gap: 1em; padding-inline: min(3rem, calc(0.8rem + 5vw));}
.log-reg-reset h1                                {text-align: center; margin-bottom: 1.5rem}
.log-reg-reset :is(.form-items, .button)         {width: 100%; max-width: 20rem;}
.log-reg-reset .to-log-reg                       {display: block; width: 100%; text-align: center; font-size: 0.9em;}
.log-reg-reset .to-log-reg a                     {color: var(--color2); font-variation-settings: "slnt" 0, "wght" 600; text-decoration: underline; transition: .15s ease-in-out;}
.log-reg-reset .to-log-reg a:hover               {color: var(--color1b); text-decoration-color: transparent;}


.account                                        {width: 100%; justify-content: center; padding-inline: var(--box-padding);}
.account-container                              {display: flex; width: 100%; max-width: 48rem; flex-wrap: wrap; gap: var(--gap1);}
.account .user                                  {display: block; width: 100%; font-size: min(1.8em, calc(0.6em + 2vw)); padding-left: 1.3em; box-sizing: border-box; position: relative;}
.account .user .avatar                          {display: block; width: 1em; position: absolute; left: 0; top: 0.05em;}
.account .user .avatar img                      {display: block; width: 100%; height: 100%; transition: .15s ease-in-out;}
.account .user .avatar img:nth-child(2)         {position: absolute; left: 0; top: 0; opacity: 0;}
.account .user h1                               {font-size: 1em;}
@media screen and (min-width: 961px)          {
    .account .account-container                   {justify-content: space-between; align-items: flex-end;}
    .account .form-items                          {width: auto;}
    .account .form-item                           {width: 18em;}
}
@media screen and (max-width: 960px)          {
    .account .account-container                   {justify-content: flex-end;}
    .account .form-items                          {width: 100%;}
}
@media screen and (min-width: 769px) and (max-width: 960px){
    .account .form-item                           {width: calc(50% - 0.5 * var(--form-gap));}
}
@media screen and (max-width: 540px)          {
    .account .user                                {text-align: center; padding: 2.2rem 0 0;}
    .account .user .avatar                        {width: 1.6rem; left: calc(50% - 0.8rem); top: 0;}
}

.subs                                           {margin: var(--gap1) auto 0;}
.subs h2                                        {margin-block: 0.3em -0.15em;}
.subs > div                                     {display: flex; width: 100%; flex-wrap: wrap; gap: 0.4em;}

.sub                                            {display: flex; width: 100%; min-height: 3.4rem; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.25em 1em; border-radius: 1.7rem; border: solid 0.08em var(--color2b); padding: 0.65em 1.5em; box-sizing: border-box; transition: .15s ease-in-out;}
.sub:hover                                      {background: var(--color2d);}
.sub .price                                     {font-variation-settings: "wght" 600;}
.sub .price span                                {display: inline-block; font-size: 0.65em; margin-left: 0.25em;}
.sub .status                                    {display: flex; width: 4.5em; height: 2em; justify-content: center; align-items: center; text-align: center; font-size: 0.85em; font-variation-settings: "wght" 600; padding: 0 1em; border-radius: 1em; border: solid 0.12em transparent;}
.sub .status.active                             {color: #00b147; border-color: #00b147;}
.sub .status.canceled                           {color: var(--color2); border-color: var(--color2);}
.sub .info1                                     {display: block; text-align: right; font-size: 0.9em; flex-grow: 2;}
.sub .action                                    {display: block; width: 4em; text-align: right; font-size: 0.9em; order: 3;}
.sub .action > *                                {font-size: 1em; text-decoration: underline; font-variation-settings: "wght" 500; transition: .15s ease-in-out;}
.sub .action > *:hover                          {text-decoration-color: transparent;}
.sub .action.cancel > *                         {color: var(--color2);}
.sub .action.cancel > *:hover                   {color: var(--color1);}
.sub .action:is(.renew, .resume) > *            {color: var(--color3);}
.sub .action:is(.renew, .resume) > *:hover      {color: var(--color3b);}
@media screen and (min-width: 1081px)         {
    .sub                                          {width: calc(100% + 3em); margin-inline: -1.5em;}
}
@media screen and (max-width: 540px)          {
    .sub                                          {justify-content: flex-start; border-radius: 1.2em;}
    .sub .price                                   {font-size: 1.4em; order: 0;}
    .sub .status                                  {order: 1; font-size: 0.7em;}
    .sub .info1                                   {order: 2; width: calc(100% - 5.5em); text-align: left; flex-grow: unset;}
}

/* Dark mode --------------------------------------------------------------------------------------------------- */
.dark-mode                                              {color: white; background: var(--color0);}
.dark-mode .header .custom-dropdown .logo               {opacity: 0;}
.dark-mode .header .custom-dropdown .logo.white         {opacity: 1;}
.dark-mode .header .custom-dropdown:before              {background: var(--color0c);}
.dark-mode .header .custom-dropdown .title              {color: white;}
.dark-mode .mode span                                   {left: 2.1rem;}
.dark-mode .mode img:nth-of-type(2)                     {filter: none; opacity: 1;}
.dark-mode .footer                                      {background: var(--color0c);}
.dark-mode :is(h1, h2, h3),
.dark-mode .main :is(p a, li a, td a)                   {color: white;}
.dark-mode .box                                         {background: var(--color0c);}
.dark-mode .hero .background                            {background-image: linear-gradient(to right, transparent, var(--color0c), transparent);;}
.dark-mode .preview                                     {border-color: var(--color0c);}
.dark-mode .preview:hover                               {background: var(--color0c);}
.dark-mode .preview .title a                            {color: white; transition: .15s ease-in-out;}
.dark-mode .preview .text                               {color: var(--color2b);}
.dark-mode .breadcrumbs > div > span a                  {color: white;}
.dark-mode ul.list-access li:not(.locked):before        {background-image: url("../images/icon-white-book.svg");}
.dark-mode .code                                        {color: var(--color3c); background-color: var(--color0c);}
.dark-mode .bottom-nav .next                            {background: var(--color0c);}
.dark-mode .bottom-nav .prev                            {color: var(--color2);}
.dark-mode .bottom-nav .prev a .title                   {color: var(--color2);}
.dark-mode .bottom-nav .prev a svg                      {fill: var(--color2);}
.dark-mode .form-item label                             {color: var(--color2c);}
.dark-mode .form-item :is(input, textarea, select)      {background-color: var(--color0); color: white; border-color: var(--color0b);}
.dark-mode .form-item .note a                           {color: var(--color2);}
.dark-mode .form-item .note a:hover                     {color: var(--color2c);}
.dark-mode .log-reg                                     {background: var(--color0c);}
.dark-mode .log-reg .to-log-reg a                       {color: var(--color2);}
.dark-mode .log-reg .to-log-reg a:hover                 {color: var(--color2c);}
.dark-mode .account .user .avatar img:nth-child(1)      {opacity: 0;}
.dark-mode .account .user .avatar img:nth-child(2)      {opacity: 1;}
.dark-mode .sub:hover                                   {background: var(--color0c);}
.dark-mode .message .inner:before                       {opacity: 0.15; filter: brightness(2);}
@media screen and (min-width: 1081px)                 {
    .dark-mode .header-account                            {background: var(--color0c);}
    .dark-mode .header-account .avatar img:nth-child(1)   {opacity: 0;}
    .dark-mode .header-account .avatar img:nth-child(2)   {opacity: 1;}
    .dark-mode .header-account span > *                   {color: var(--color2b);}
    .dark-mode .header-account span > *:hover             {color: var(--color2c);}
    .dark-mode .mode                                      {background: var(--color0c);}
    .dark-mode .mode img:nth-of-type(1)                   {opacity: 0.5;}
    .dark-mode .header .lang                              {--dropdown-border: solid 0.07em rgb(50,50,50);}
    .dark-mode .header .lang ul li a                      {color: var(--color2b);}
    .dark-mode .header .lang ul li a:hover                {color: var(--color2c);}
    .dark-mode .header .lang ul li.sel a                  {color: var(--color2b);}
    .dark-mode .header .lang ul li:not(.sel) a:hover      {background: var(--color0b);}
    .dark-mode .header .lang:hover ul                     {background: var(--color0c); border-color: transparent;}
    .dark-mode .header .lang.hover ul                     {background: var(--color0c); border-color: transparent;}
}
@media screen and (max-width: 1080px)                 {
    .dark-mode .mode img:nth-of-type(1)                   {filter: invert(); opacity: 0.3;}
    .dark-mode .header:not(.show) #navicon span           {background: var(--color2b);}

}

/* Cookie consent banner */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e1e2e;
    color: #fff;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    z-index: 9999;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
}

#cookie-banner p {
    margin: 0;
}

#cookie-banner a {
    color: var(--color2b);
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.btn-accept {
    background: var(--color3);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.btn-decline {
    background: transparent;
    color: #aaa;
    border: 1px solid #aaa;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.btn-accept:hover { background: var(--color3b); }
.btn-decline:hover { color: #fff; border-color: #fff; }