/**
    James:
    This is a utility css file, it holds a large range of commonly used css properties attached to various classes.
    Think like tailwind, but with no preporcessing and a much more limited set of classes.
    The way I prefer to structure css is:
        Set a strong set of default behaviours (pico handles this for us happily :))
        Use utility classes where possible on elements to preserve as much Locality of Behaviour (LOB) as possible
        If you need a custom class, styles for that class go in a style tag on the relevant element if its not a repeated element (i.e a page holding a list would have a style tag, but a list mixin item would not)
        If a custom class is appearing in 4 or more style tags, across multiple pages, review if its really a utility class + a small amount of custom information or if it actually really needs a custom class 
        if so, then put it in here like I did for .pill and update the table of contents

    Table of Contents
    Use the number codes + ctrl + f 
    to navigate to the relevant section quickly
    1.0 PICO - Tweaks
    1.1 WRAP -  data-tooltip-wrap enhancement
    2.0 UTIL - general utility classes
    3.0 DISP - Display Utilities
    4.0 PADD - Padding Utilities
    5.0 MARG - Margin Utilities
    6.0 FONT - font utils
    7.0 SIZE - size utils
    8.0 STRU - structure utils like grid and flex
    9.0 CURS - cursor utils
    10.0 PSEU - pseudo utils 
    11.0 ANIM - anim utils
    12.0 PILL - pill utils
    13.0 DIAL - dialog utils
    14.0 BRND - Branding Utils (colours etc)
    15.0 BRDR - Border Utils (radius etc)
    16.0 POSI - Positioning Utils (absolute, relative, top, left, right, bottom, zindex etc)
    17.0 LIST - List Utils (list style et)
    18.0 SVG - Utilities for svg like fill etc
*/

/**
    1.0 PICO - Pico Default Tweaks
*/
article.container {
    position: relative;
    padding: 1rem;
}

article.container h1 {
    margin-top: 0.25rem;
}

body > main {
    padding: 1rem;
}

textarea {
    /* 
        https://caniuse.com/?search=field-sizing
        Not yet supported in firefox, give it time 
    */
    field-sizing: content;
}

/** 1.1 DATA-TOOLTIP-WRAP ENHANCEMENT */

[data-tooltip-wrap] {
    position: relative;
}

[data-tooltip-wrap]:not(a, button, input) {
    border-bottom: 1px dotted;
    text-decoration: none;
    cursor: help;
}

[data-tooltip-wrap]::after,
[data-tooltip-wrap]::before,
[data-tooltip-wrap][data-placement="top"]::after,
[data-tooltip-wrap][data-placement="top"]::before {
    display: block;
    z-index: 99;
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    transform: translate(-50%, -0.25rem);
    border-radius: var(--pico-border-radius);
    background: var(--pico-tooltip-background-color);
    content: attr(data-tooltip-wrap);
    color: var(--pico-tooltip-color);
    font-style: normal;
    font-weight: var(--pico-font-weight);
    font-size: 0.875rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: wrap;
    opacity: 0;
    pointer-events: none;
    min-width: 25rem;
    min-height: 3rem;
    text-align: left;
}

[data-tooltip-wrap]::after,
[data-tooltip-wrap][data-placement="top"]::after {
    padding: 0;
    transform: translate(-50%, 0);
    border-top: 0.3rem solid;
    border-right: 0.3rem solid transparent;
    border-left: 0.3rem solid transparent;
    border-radius: 0;
    background-color: transparent;
    content: "";
    color: var(--pico-tooltip-background-color);
}

[data-tooltip-wrap][data-placement="bottom"]::after,
[data-tooltip-wrap][data-placement="bottom"]::before {
    top: 100%;
    bottom: auto;
    transform: translate(-50%, 0.25rem);
}

[data-tooltip-wrap][data-placement="bottom"]:after {
    transform: translate(-50%, -0.3rem);
    border: 0.3rem solid transparent;
    border-bottom: 0.3rem solid;
}

[data-tooltip-wrap][data-placement="left"]::after,
[data-tooltip-wrap][data-placement="left"]::before {
    top: 50%;
    right: 100%;
    bottom: auto;
    left: auto;
    transform: translate(-0.25rem, -50%);
}

[data-tooltip-wrap][data-placement="left"]:after {
    transform: translate(0.3rem, -50%);
    border: 0.3rem solid transparent;
    border-left: 0.3rem solid;
}

[data-tooltip-wrap][data-placement="right"]::after,
[data-tooltip-wrap][data-placement="right"]::before {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 100%;
    transform: translate(0.25rem, -50%);
}

[data-tooltip-wrap][data-placement="right"]:after {
    transform: translate(-0.3rem, -50%);
    border: 0.3rem solid transparent;
    border-right: 0.3rem solid;
}

[data-tooltip-wrap]:focus::after,
[data-tooltip-wrap]:focus::before,
[data-tooltip-wrap]:hover::after,
[data-tooltip-wrap]:hover::before {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    [data-tooltip-wrap]:focus::after,
    [data-tooltip-wrap]:focus::before,
    [data-tooltip-wrap]:hover::after,
    [data-tooltip-wrap]:hover::before {
        --pico-tooltip-slide-to: translate(-50%, -0.25rem);
        transform: translate(-50%, 0.75rem);
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
        animation-name: tooltip-slide;
        opacity: 0;
    }

    [data-tooltip-wrap]:focus::after,
    [data-tooltip-wrap]:hover::after {
        --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
        transform: translate(-50%, -0.25rem);
        animation-name: tooltip-caret-slide;
    }

    [data-tooltip-wrap][data-placement="bottom"]:focus::after,
    [data-tooltip-wrap][data-placement="bottom"]:focus::before,
    [data-tooltip-wrap][data-placement="bottom"]:hover::after,
    [data-tooltip-wrap][data-placement="bottom"]:hover::before {
        --pico-tooltip-slide-to: translate(-50%, 0.25rem);
        transform: translate(-50%, -0.75rem);
        animation-name: tooltip-slide;
    }

    [data-tooltip-wrap][data-placement="bottom"]:focus::after,
    [data-tooltip-wrap][data-placement="bottom"]:hover::after {
        --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
        transform: translate(-50%, -0.5rem);
        animation-name: tooltip-caret-slide;
    }

    [data-tooltip-wrap][data-placement="left"]:focus::after,
    [data-tooltip-wrap][data-placement="left"]:focus::before,
    [data-tooltip-wrap][data-placement="left"]:hover::after,
    [data-tooltip-wrap][data-placement="left"]:hover::before {
        --pico-tooltip-slide-to: translate(-0.25rem, -50%);
        transform: translate(0.75rem, -50%);
        animation-name: tooltip-slide;
    }

    [data-tooltip-wrap][data-placement="right"]:focus::after,
    [data-tooltip-wrap][data-placement="right"]:focus::before,
    [data-tooltip-wrap][data-placement="right"]:hover::after,
    [data-tooltip-wrap][data-placement="right"]:hover::before {
        --pico-tooltip-slide-to: translate(0.25rem, -50%);
        transform: translate(-0.75rem, -50%);
        animation-name: tooltip-slide;
    }

    [data-tooltip-wrap][data-placement="right"]:focus::after,
    [data-tooltip-wrap][data-placement="right"]:hover::after {
        --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
        transform: translate(-0.05rem, -50%);
        animation-name: tooltip-caret-slide;
    }
}

/**
2.0 UTIL - Utility Classes
*/
.scrollable {
    overflow-y: auto;
}

.noscrolly {
    overflow-y: hidden;
}

.noscrollx {
    overflow-x: hidden;
}

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

.left-text {
    text-align: left;
}

.right-text {
    text-align: right;
}

.animated_resize {
    transition: width 0.25s, height 0.25s, scale 0.25s;
}

.stickytop0 {
    position: sticky;
    top: 0;
}

.zindex0 {
    z-index: 0;
}

.zindex1 {
    z-index: 1;
}

.zindex2 {
    z-index: 2;
}

.zindex3 {
    z-index: 3;
}

/**
3.0 DISP - display utilities
*/
html body .block {
    display: block;
}

html body .inline {
    display: inline;
}

html body .inlineblock {
    display: inline-block;
}

html body *.hidden {
    display: none;
}

html body .visible {
    display: block;
}

/**
4.0 PADD - padding utilities
*/
html body .p0 {
    padding: 0rem;
}

html body .p025 {
    padding: 0.25rem;
}

html body .p05 {
    padding: 0.5rem;
}

html body .p1 {
    padding: 1rem;
}

html body .p2 {
    padding: 2rem;
}

html body .p3 {
    padding: 3rem;
}

html body .p5 {
    padding: 5rem;
}

html body .p10 {
    padding: 10rem;
}

html body .p20 {
    padding: 20rem;
}

html body .pbottom0 {
    padding-bottom: 0rem;
}

html body .pbottom025 {
    padding-bottom: 0.25rem;
}

html body .pbottom05 {
    padding-bottom: 0.5rem;
}

html body .pbottom1 {
    padding-bottom: 1rem;
}

/** ptop */

html body .ptop0 {
    padding-top: 0rem;
}

html body .ptop025 {
    padding-top: 0.25rem;
}

html body .ptop05 {
    padding-top: 0.5rem;
}

html body .ptop1 {
    padding-top: 1rem;
}

/** pleft */
html body .pleft0 {
    padding-left: 0rem;
}

html body .pleft025 {
    padding-left: 0.25rem;
}

html body .pleft05 {
    padding-left: 0.5rem;
}

html body .pleft1 {
    padding-left: 1rem;
}

html body .pleft15 {
    padding-left: 1.5rem;
}

html body .pleft2 {
    padding-left: 2rem;
}

html body .blockpadding0 {
    padding-block: 0;
}

html body .inlinepadding0 {
    padding-inline: 0;
}

html body .indentleft1 {
    padding-left: 1rem;
}

html body .indentleft15 {
    padding-left: 1.5rem;
}

html body .indentleft2 {
    padding-left: 2rem;
}

/**
5.0 MARG - margin utilities
*/
html body .m0 {
    margin: 0rem;
}

html body .m025 {
    margin: 0.25rem;
}

html body .m05 {
    margin: 0.5rem;
}

html body .m1 {
    margin: 1rem;
}

html body .m2 {
    margin: 2rem;
}

html body .m3 {
    margin: 3rem;
}

html body .m5 {
    margin: 5rem;
}

html body .m10 {
    margin: 10rem;
}

html body .m20 {
    margin: 20rem;
}

/* margin left utils */
html body .mleft0 {
    margin-left: 0rem;
}

html body .mleft1 {
    margin-left: 1rem;
}

html body .mleft2 {
    margin-left: 2rem;
}

html body .mleft3 {
    margin-left: 3rem;
}

html body .mleft5 {
    margin-left: 5rem;
}

html body .mleft10 {
    margin-left: 10rem;
}

html body .mleft20 {
    margin-left: 20rem;
}

/* margin top utils */
html body .mtop0 {
    margin-top: 0rem;
}

html body .mtop1 {
    margin-top: 1rem;
}

html body .mtop2 {
    margin-top: 2rem;
}

html body .mtop3 {
    margin-top: 3rem;
}

html body .mtop5 {
    margin-top: 5rem;
}

html body .mtop10 {
    margin-top: 10rem;
}

html body .mtop20 {
    margin-top: 20rem;
}

/* margin right utils */
html body .mright0 {
    margin-right: 0rem;
}

html body .mright1 {
    margin-right: 1rem;
}

html body .mright2 {
    margin-right: 2rem;
}

html body .mright3 {
    margin-right: 3rem;
}

html body .mright5 {
    margin-right: 5rem;
}

html body .mright10 {
    margin-right: 10rem;
}

html body .mright20 {
    margin-right: 20rem;
}

/* margin bottom utils */
html body .mbottom0 {
    margin-bottom: 0rem;
}

html body .mbottom1 {
    margin-bottom: 1rem;
}

html body .mbottom2 {
    margin-bottom: 2rem;
}

html body .mbottom3 {
    margin-bottom: 3rem;
}

html body .mbottom5 {
    margin-bottom: 5rem;
}

html body .mbottom10 {
    margin-bottom: 10rem;
}

html body .mbottom20 {
    margin-bottom: 20rem;
}

/**
    margin-block utilities
*/
html body .blockmargin0 {
    margin-block: 0;
}

html body .blockmargin05 {
    margin-block: 0.5rem;
}

html body .blockmargin1 {
    margin-block: 1rem;
}

/**
    margin-inline utilities
*/
html body .inlinemargin0 {
    margin-inline: 0;
}

html body .inlinemargin05 {
    margin-inline: 0.5rem;
}

html body .inlinemargin1 {
    margin-inline: 1rem;
}

/* 6.0 FONT - font and general text utilities */

.fs06 {
    font-size: 0.6rem;
}

.fs08 {
    font-size: 0.8rem;
}

.fs09 {
    font-size: 0.9rem;
}

.fs1 {
    font-size: 1rem;
}

.fs12 {
    font-size: 1.2rem;
}

.fs15 {
    font-size: 1.5rem;
}

.fs175 {
    font-size: 1.75rem;
}

.fs2 {
    font-size: 1.75rem;
}

.capitalise {
    text-transform: capitalize;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.monospace {
    font-family: monospace;
}
.notextdecoration {
    text-decoration: none;
}
/* 7.0 SIZE - size utils */

/* height utils */
html body .h1 {
    height: 1rem;
}

html body .h2 {
    height: 2rem;
}

html body .h5 {
    height: 5rem;
}

html body .h10 {
    height: 10rem;
}

html body .h15 {
    height: 15rem;
}

html body .h20 {
    height: 20rem;
}

html body .h25 {
    height: 25rem;
}

html body .h30 {
    height: 30rem;
}

html body .h35 {
    height: 35rem;
}

html body .h40 {
    height: 40rem;
}

/** width content */
.hfit {
    height: fit-content;
}

.hmax {
    height: max-content;
}

.hmin {
    height: min-content;
}

/* width utils */
html body .w1 {
    width: 1rem;
}

html body .w2 {
    width: 2rem;
}
html body .w3 {
    width: 3rem;
}
html body .w4 {
    width: 4rem;
}

html body .w5 {
    width: 5rem;
}

html body .w10 {
    width: 10rem;
}

html body .w15 {
    width: 15rem;
}

html body .w20 {
    width: 20rem;
}

html body .w25 {
    width: 25rem;
}

html body .w30 {
    width: 30rem;
}

html body .w35 {
    width: 35rem;
}

html body .w40 {
    width: 40rem;
}

html body .whalf {
    width: 50%;
}

html body .wfull {
    width: 100%;
}

/* Min Size utils */

/* Min Width utils*/
html body .minw1 {
    min-width: 1rem;
}

html body .minw2 {
    min-width: 2rem;
}

html body .minw5 {
    min-width: 5rem;
}

html body .minw10 {
    min-width: 10rem;
}

html body .minw15 {
    min-width: 15rem;
}

/* Min Height utils*/
html body .minh1 {
    min-height: 1rem;
}

html body .minh2 {
    min-height: 2rem;
}

html body .minh5 {
    min-height: 5rem;
}

html body .minh10 {
    min-height: 10rem;
}

html body .minh15 {
    min-height: 15rem;
}

html body .minh20 {
    min-height: 20rem;
}

/*Max Size utils*/

/* max height utils */
.maxh5 {
    max-height: 5rem;
}

.maxh10 {
    max-height: 10rem;
}

.maxh15 {
    max-height: 15rem;
}

.maxh20 {
    max-height: 20rem;
}

.maxh25 {
    max-height: 25rem;
}

.maxh30 {
    max-height: 30rem;
}

.maxh35 {
    max-height: 35rem;
}

.maxh40 {
    max-height: 40rem;
}

/* max width utils*/

.maxw5 {
    max-width: 5rem;
}

.maxw10 {
    max-width: 10rem;
}

.maxw15 {
    max-width: 15rem;
}

.maxw20 {
    max-width: 20rem;
}

.maxw25 {
    max-width: 25rem;
}

.maxw30 {
    max-width: 30rem;
}

.maxw35 {
    max-width: 35rem;
}

.maxw40 {
    max-width: 40rem;
}

/** width content */
.wfit {
    width: fit-content;
}

.wmax {
    width: max-content;
}

.wmin {
    width: min-content;
}

/** line-height util */
.lineh05 {
    line-height: 0.5rem;
}

.lineh1 {
    line-height: 1rem;
}

.lineh2 {
    line-height: 2rem;
}

/* 8.0 STRU - Grid/Flex */

.center_content {
    align-content: center;
}

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

.flex {
    display: flex;
}

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

.flex-col-reverse {
    flex-direction: column-reverse;
}

.flex1 {
    flex:1;
}

.flex2 {
    flex:2
}

.flex3 {
    flex:3;
}
/** general gap */
.gap0 {
    gap: 0rem;
}

.gap025 {
    gap: 0.25rem;
}

.gap05 {
    gap: 0.5rem;
}

.gap1 {
    gap: 1rem;
}

/* grid column manipulation */
.grid-1col {
    grid-template-columns: 1fr;
}

/* 2 column variations */
.grid-2col {
    grid-template-columns: 1fr 1fr;
}

.grid-2col13 {
    grid-template-columns: 1fr 3fr;
}

.grid-2col23 {
    grid-template-columns: 2fr 3fr;
}

/* 3 column variations */
.grid-3col {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-3col131 {
    grid-template-columns: 1fr 3fr 1fr;
}

.grid-3col311 {
    grid-template-columns: 3fr 1fr 1fr;
}

.grid-3col113 {
    grid-template-columns: 1fr 1fr 3fr;
}

.grid-3col241 {
    grid-template-columns: 2fr 4fr 1fr;
}

/** grid 4 colum variations */
.grid-4col {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/** grid 5 colum variations */
.grid-5col {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

/* grid-gap */
.grid-gap0 {
    grid-gap: 0;
}

.grid-gap05 {
    grid-gap: 0.5rem;
}

.grid-gap1 {
    grid-gap: 1rem;
}

.grid12 {
    grid-template-columns: repeat(12, 1fr);
}

/** row gap */

.rowgap0 {
    row-gap: 0;
}

.rowgap05 {
    row-gap: 0.5rem;
}

.rowgap1 {
    row-gap: 1rem;
}

/** column gap */
.colgap0 {
    column-gap: 0;
}

.colgap05 {
    column-gap: 0.5rem;
}

.colgap1 {
    column-gap: 1rem;
}

.columngap0 {
    column-gap: 0;
}

.columngap05 {
    column-gap: 0.5rem;
}

.columngap1 {
    column-gap: 1rem;
}

/** 9.0 CURS - Cursor utilities */
html body .clickable {
    cursor: pointer;
}

/** 10.0 PSEU - pseudo element utilities */

/** side arrows **/
.leftsidearrowup::before {
    position: absolute;
    content: "⮝";
    /* Unicode character for upward diagonal arrow */
    left: 0;
}

.leftsidearrowdown::after {
    position: absolute;
    content: "⮟";
    /* Unicode character for downward diagonal arrow */
    left: 0;
}

.rightsidearrowup::before {
    position: absolute;
    content: "⮝";
    /* Unicode character for upward diagonal arrow */
    right: 0;
}

.rightsidearrowdown::after {
    position: absolute;
    content: "⮟";
    /* Unicode character for downward diagonal arrow */
    right: 0;
}

/** 11.0 ANIM - Animations */
html body .wiggle_short {
    animation: anim_wiggle_source 0.25s ease 0s 1 normal forwards;
}

html body .hover-wiggle-short:focus-within,
.hover-wiggle-short:focus-visible,
.hover-wiggle-short:hover {
    animation: anim_wiggle_source 0.25s ease 0s 1 normal forwards;
}

html body .wiggle {
    animation: anim_wiggle_source 2s ease 0s 2 normal forwards;
}

html body .hover-wiggle:focus-within,
.hover-wiggle:focus-visible,
.hover-wiggle:hover {
    animation: anim_wiggle_source 2s ease 0s 2 normal forwards;
}

.transition05 {
    transition: 0.5s;
}

.fadeOut {
    transition: opacity 10s;
    opacity: 0;
}

.slidein05 {
    animation: slidein 0.5s ease-in 0s 1 normal none;
}

.fadein025 {
    animation: fadein 0.25s ease-out 0s 1 normal none;
}
.fadein05 {
    animation: fadein 0.5s ease-out 0s 1 normal none;
}

.fadein1 {
    animation: fadein 1s ease 0s 1 normal none;
}

.fadein2 {
    animation: fadein 2s ease 0s 1 normal none;
}

.background {
    top: 1rem;
    left: 0;
    width: 100%;
    position: fixed;
    height: 100%;
    background-color: black;
    z-index: -1;
}

.background img {
    aspect-ratio: auto;
    min-width: 100%;
    min-height: 100%;
    filter: blur(25px) saturate(50%);
}

@keyframes anim_wiggle_source {
    0%,
    100% {
        transform: rotate(0deg);
        transform-origin: 50% 100%;
    }

    10% {
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(4deg);
    }

    80% {
        transform: rotate(-2deg);
    }

    90% {
        transform: rotate(2deg);
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slidein {
    0% {
        opacity: 0;
        transform: translateY(500px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/** 12.0 PILL - pill utilities */
.pill {
    background-color: lightgray;
    border-radius: calc(var(--pico-border-radius) * 2);
    text-align: center;
    padding: 0.15rem;
}

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

/**
13.0 DIAL - UTILS
*/
dialog article {
    margin: 0;
}

html:has(dialog[open]) {
    & body {
        overflow-y: hidden;
    }

    & main {
        overflow-y: hidden;
    }
}

dialog header button[aria-label="Close"] {
    scale: 1.5;
}

/**
14.0 BRND - Colour itls etc
*/
html body .bgnone {
    background: none;
}

html body .bgwhite {
    background: white;
}

html body .bgerror {
    background: var(--pico-del-color);
}

html body .bgprimary {
    background: var(--pico-primary);
}

html body .hover-bgnone:focus-visible,
html body .hover-bgnone:hover {
    background: none;
}

html body .hover-bgwhite:focus-visible,
html body .hover-bgwhite:hover {
    background: white;
}

html body .hover-bgprimary:focus-visible,
html body .hover-bgprimary:hover {
    background: var(--pico-primary);
}

html body .white {
    color: white;
}

html body .grey {
    color: grey;
}

html body .gray {
    color: gray;
}

html body .primary {
    color: var(--pico-primary);
}

html body .hover-white:focus-visible,
html body .hover-white:hover,
html body .hover-white:focus-within {
    color: white;
}

html body .hover-grey:focus-visible,
html body .hover-grey:hover,
html body .hover-grey:focus-within {
    color: grey;
}

html body .hover-gray:focus-visible,
html body .hover-gray:hover,
html body .hover-gray:focus-within {
    color: gray;
}

html body .hover-primary:focus-visible,
html body .hover-primary:hover,
html body .hover-primary:focus-within {
    color: var(--pico-primary);
}

/**
15.0 BRDR - Radius etc
*/
html body .radiuscircle {
    border-radius: 50%;
}

html body .radius {
    border-radius: var(--pico-border-radius);
}

html body .radiusx2 {
    border-radius: calc(var(--pico-border-radius) * 2);
}

html body .borderprimary {
    border: 1px solid var(--pico-primary);
}

html body .border {
    border: solid;
}

html body .noborder {
    border: none;
}

html body .border1px {
    border-width: 1px;
}

html body .border2px {
    border-width: 2px;
}

html body .border3px {
    border-width: 3px;
}

html body .border4px {
    border-width: 4px;
}

html body .border5px {
    border-width: 5px;
}

/**
16.0 POSI - Positioning Utils (absolute, relative, top,left,right,bottom, zindex etc)
*/
html body .sticky {
    position: sticky;
}

html body .relative {
    position: relative;
}

html body .absolute {
    position: absolute;
}
html body .fixed {
    position: fixed;
}

/** LEFT */
html body .left0 {
    left: 0;
}

html body .left05 {
    left: 0.5rem;
}

html body .left1 {
    left: 1rem;
}

/** TOP */
html body .top0 {
    top: 0;
}

html body .top05 {
    top: 0.5rem;
}

html body .top1 {
    top: 1rem;
}

/** RIGHT */
html body .right0 {
    right: 0;
}

html body .right05 {
    right: 0.5rem;
}

html body .right1 {
    right: 1rem;
}

/** BOTTOM */
html body .bottom0 {
    bottom: 0;
}

html body .bottom05 {
    bottom: 0.5rem;
}

html body .bottom1 {
    bottom: 1rem;
}

/** Z indexes */
html body .z-1 {
    z-index: 0;
}

html body .z0 {
    z-index: 0;
}

html body .z1 {
    z-index: 1;
}

html body .z2 {
    z-index: 2;
}

html body .z3 {
    z-index: 3;
}

/** 17.0 LIST - List Utils (list style et) */

html body .noliststyle {
    list-style: none;
}

/** 18.0 SVG - Utilities for svg like fill etc */

html body .fillPrimary {
    fill: var(--pico-primary);
}

html body .fillInvesrse {
    fill: var(--pico-primary-inverse);
}

html body .fillWhite {
    fill: white;
}