:root {
    --doc-height: 100svh;
}

html, body {
    padding: 0;
    margin: 0;
    height: 100svh; /* fallback for Js load */
    height: var(--doc-height);
    color: #311f1d;
}

.svh-100 {
    height: 100svh;
}

body {
    overflow-wrap: break-word;
}

body * {
    scrollbar-width: thin !important;
}

#map {
    background-image: linear-gradient(to right bottom, #3a4e3e 50%, #314235 50%) !important;
}

.text-shadow {
    text-shadow: 
    rgb(0, 0, 0) 2px 0px, 
    rgb(0, 0, 0) -2px 0px, 
    rgb(0, 0, 0) 0px 2px, 
    rgb(0, 0, 0) 0px -2px, 
    rgb(0, 0, 0) 1px 1px, 
    rgb(0, 0, 0) -1px -1px, 
    rgb(0, 0, 0) 1px -1px, 
    rgb(0, 0, 0) -1px 1px;
}

.transition-ease {
    transition: all ease .3s;
}

.transition-ease-slow {
    transition: all ease 2s;
}

.horizontal-scroll {
    white-space: nowrap;
    overflow-x: auto;
    transition: all ease .3s;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.overflow-auto-nobar::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
.overflow-auto-nobar {
    overflow-y: auto;
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
} 

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.header-icon {
    padding: 1.25rem !important;
    aspect-ratio: 1/1; 
    z-index: 100
}

.screen-icon {
    height: 2.7rem !important;
    width: 2.7rem !important;
}

.fs-5-c {
    font-size: 1.15rem !important;
}

.py-2-5 {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}

.outline {
    outline: 1px solid #000 !important;
}

.outline-3 {
    outline-width: 3px !important;
}

.border-none {
    border: none !important;
}

.col-2-5 {
    flex: 0 0 auto !important;
    width: 20% !important;
}

button {
    color: #311f1d;
}

.button-c {
    margin: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    font-size: unset !important;
    line-height: unset !important;
}

.cursor-pointer {
    cursor: pointer;
}

.hover {
    transition: all ease .3s;
}

.show-hover, .show-hover-flex {
    display: none !important;
}

.form-switch .form-check-input {
    float: right !important;
    height: 1.2rem !important;
    width: 2.5rem !important;
    margin-left: 0 !important;
}

.form-switch {
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
}

.public {
    display: none;
}

.dice {
    -webkit-mask-image: url(/img/d12.svg);
    mask-image: url(/img/d12.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    width: 2.3rem;
    height: 2.3rem;
}

.dice.weapon {
    width: 1.3rem !important;
    height: 1.3rem !important;
}

.angled-gradient-white .dice {
    background-color: #311f1d;
    color: #fefadf;
}

.alt-angled-gradient-grey-green .dice {
    background-color: #fefadf;
    color: #311f1d;
}
.alt-angled-gradient-grey-green .dice-critic-fail {
    background-color: #ff6f52 !important;
    color: #311f1d !important;
}
.alt-angled-gradient-grey-green .dice-critic-success {
    background-color: #99df75 !important;
    color: #311f1d !important;
}
.alt-angled-gradient-grey-green .result-fail {
    color: #ff6f52 !important;
}
.alt-angled-gradient-grey-green .result-success {
    color: #99df75 !important;
}

.angled-gradient-white .dice-critic-fail {
    background-color: #da4326 !important;
    color: #fefadf !important;
}
.angled-gradient-white .dice-critic-success {
    background-color: #75b753 !important;
    color: #fefadf !important;
}
.angled-gradient-white .result-fail {
    color: #da4326 !important;
}
.angled-gradient-white .result-success {
    color: #75b753 !important;
}

.smaller {
    font-size: .7em;
}

.dice-modifier {
    margin-top: -.3rem;
    padding-bottom: .4rem;
}

table {
    width: 100%;
    text-align: center !important;
}
tbody tr {
    border: none !important;
}
tbody tr:nth-of-type(odd) {
    --bs-table-bg: #9eb79a !important;
}
tbody tr:nth-of-type(even) {
    --bs-table-bg: #bad7b5 !important;
}

.rounded-bottom-3 {
    border-bottom-right-radius: var(--bs-border-radius-lg) !important;
    border-bottom-left-radius: var(--bs-border-radius-lg) !important;
}

.rounded-top-left-3 {
    border-top-left-radius: var(--bs-border-radius-lg) !important;
}

.rounded-top-right-3 {
    border-top-right-radius: var(--bs-border-radius-lg) !important;
}

.rounded-4-5 {
    border-radius: 1.5rem !important;
}

.flipped {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.scroll-parent {
    position: relative;
}

/* Top gradient */
.scroll-gradient-top, .scroll-gradient-bottom,
.scroll-gradient-top i, .scroll-gradient-bottom i,
.scroll-gradient-top i::before, .scroll-gradient-bottom i::before {
    position: absolute;
    height: 3rem; /* Gradient height */
    pointer-events: none;
    transition: all ease .5s;
    z-index: 1;
}

.scroll-gradient-top {
    top: 0;
    background: linear-gradient(to bottom, #311f1d7b, #fefadf00);
}
.scroll-gradient-top.scroll-white {
    background: linear-gradient(to bottom, #fefadf, #fefadf00) !important;
}
.scroll-gradient-top.scroll-modal {
    top: 100%;
}

.scroll-gradient-bottom {
    bottom: 0;
    background: linear-gradient(to top, #311f1d7b, #fefadf00);
}
.scroll-gradient-bottom.scroll-white {
    background: linear-gradient(to top, #fefadf, #fefadf00) !important;
}
.scroll-gradient-bottom.scroll-modal {
    bottom: 100%;
}

.scroll-gradient-top.scroll-darker {
    background: linear-gradient(to bottom, #311f1dbe, #fefadf00) !important;
}

.scroll-gradient-bottom.scroll-darker {
    background: linear-gradient(to top, #311f1dbe, #fefadf00) !important;
}

.scroll-gradient-top, .scroll-gradient-bottom {
    opacity: 0;
}

.scroll-gradient-top.show-gradient, .scroll-gradient-bottom.show-gradient {
    opacity: 1;
}

.scroll-gradient-top.show-gradient i::before, .scroll-gradient-bottom.show-gradient i::before {
    transform: translateY(0) !important;
}

.scroll-gradient-top i::before {
    transform: translateY(-100%); /* Slide the icon up when hidden */
}

.scroll-gradient-top.show-gradient i {
    animation: bounce-top 1.5s infinite ease-in-out;
}

.scroll-gradient-bottom i::before {
    transform: translateY(100%); /* Slide the icon up when hidden */
}

.scroll-gradient-bottom.show-gradient i {
    animation: bounce-bottom 1.5s infinite ease-in-out;
}

.scrollable-content {
    overflow-y: auto;
}

/* scroll arrow bounce */
@keyframes bounce-top {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(1rem);
    }
}
@keyframes bounce-bottom {
    0%, 100% {
        transform: translateY(.5rem);
    }
    50% {
        transform: translateY(-.5rem);
    }
}

/* animated D12 */
    .die-parent {
        height: 30vh;
        width: 100%;
        display: grid;
        font-size: .2vh;
        position: absolute;
        transform-style: preserve-3d;
    }

    .die-scene, .dodecahedron {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .die-scene {
        place-self: center;
        width: 100em;
        aspect-ratio: 1;
        perspective: 500em;
        z-index: -1;
    }

    .die-scene, .die-scene * {
        position: absolute;
        transform-style: preserve-3d;
    }

    .dodecahedron {
        --ngon: 5;
        --unit: calc(1em*var(--unitScale));
        --triAngle: calc(360deg/var(--ngon)); /* the central angle of the pentagon's triangular slice */
        --a3gon: calc( sin( calc( var(--triAngle)/2 ) ) * 100 ); /* the base of a pentagon's triangular slice*/
        --h3gon: calc( cos( calc( var(--triAngle)/2 ) ) * 50); /* the height of a pentagon's triangular slice*/
        --h5gon: calc(var(--h3gon) + 50); /* total height of that same pentagon */
        --pentAngle: asin(calc(var(--h3gon)/var(--h5gon))); /* the angle that the pentagon would be inclined at if it were leaning against the center pivot axis of another pentagon */
        --pentH: calc(cos(var(--pentAngle)) * var(--h5gon)); /* the height at which the tip of that pentagon touches the pivot axis */
        --median: calc((var(--a3gon)*sin(var(--triAngle)) + var(--h5gon))/2); /* the median value of the triangular slice's height and the pentagon's height */
        --Hratio: calc(var(--median)/var(--h5gon)); /* ratio of the median and the pentagram's height */
        --dodecaH: calc(var(--pentH)*var(--Hratio)); /* the height of the dodecahedron */
        --unitScale: calc(50/var(--dodecaH));
        inset: calc(50*(1em - var(--unit)));
        transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    }

    .diceroll {
        animation: diceroll 2s ease;
    }

    .lid {
        transform: rotateX(calc(-90deg*var(--dir))) translateZ(calc(var(--dodecaH)*var(--unit)));
    }

    .wall:nth-child(2n+1) {
        --dir: 1;
    }

    .wall:nth-child(2n) {
        --dir: -1;
    }

    .side {
        transform: rotateY(calc(var(--step)*var(--triAngle) + .5turn))  rotateX(calc(var(--pentAngle)*-1 + 90deg + 90deg*var(--dir))) translateZ(calc(var(--dodecaH)*var(--unit)));
    }

    .wall {
        inset: 0;
        background-image: radial-gradient(circle, #d5bb91, #ad936b, #4d360a);
        clip-path: polygon( 
            calc((1 - sin(calc(0*72deg)))*50%) calc((1 - cos(calc(0*72deg)))*50%),
            calc((1 - sin(calc(1*72deg)))*50%) calc((1 - cos(calc(1*72deg)))*50%),
            calc((1 - sin(calc(2*72deg)))*50%) calc((1 - cos(calc(2*72deg)))*50%),
            calc((1 - sin(calc(3*72deg)))*50%) calc((1 - cos(calc(3*72deg)))*50%),
            calc((1 - sin(calc(4*72deg)))*50%) calc((1 - cos(calc(4*72deg)))*50%)
        );
    }
    .failure .wall {
        background-image: radial-gradient(circle, #d59191, #ad6b6b, #4d0a0a) !important;
    }
    .success .wall {
        background-image: radial-gradient(circle, #91d591, #6bad6b, #0b4d0a) !important;
    }
    .failure .wall::after {
        color: #f9b6b6;
    }
    .success .wall::after {
        color: #bdf9b6;
    }

    .wall:nth-child(1), .wall:nth-child(2) {
        --step: 0;
    }

    .wall:nth-child(3), .wall:nth-child(4) {
        --step: 1;
    }

    .wall:nth-child(5), .wall:nth-child(6) {
        --step: 2;
    }

    .wall:nth-child(7), .wall:nth-child(8) {
        --step: 3;
    }

    .wall:nth-child(9), .wall:nth-child(10) {
        --step: 4;
    }

    .wall:nth-child(11), .wall:nth-child(12) {
        --step: 5;
    }

    .wall::after {
        content: attr(data-face-number);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        font-size: 30em;
        font-family: 'Arial', sans-serif;
        color: #f9e2b6;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    }

    .top-lid::after {
        color: white !important;
    }

    @keyframes diceroll {
        0% {
        transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
        }
        100% {
        transform: rotateX(630deg) rotateY(360deg) rotateZ(0deg); /* Flat face landing */
        }
    }
/* end animated D12 */

/* COLORS */
    .bgc-health {
        background-color: #da4326;
    }
    .color-health {
        color: #da4326;
    }

    .bgc-endurance {
        background-color: #75b753;
    }
    .color-endurance {
        color: #75b753;
    }

    .bgc-mana {
        background-color: #21b7bd;
    }
    .color-mana {
        color: #21b7bd;
    }

    .text-light-c, 
    .alt-linear-gradient-grey-green, .linear-gradient-grey {
        color: #fefadf !important;
    }
    .alt-bgc-lime-green:nth-of-type(odd),
    main .linear-gradient-grey, .alt-linear-gradient-grey-green:nth-of-type(even), .alt-gradient-checkbox:nth-of-type(odd) label,
    .linear-gradient-green, .alt-linear-gradient-grey-green:nth-of-type(odd), .alt-gradient-checkbox:nth-of-type(even) label, 
    .alt-linear-gradient-green-darker:nth-of-type(odd), .alt-linear-gradient-lime-green:nth-of-type(even),
    .linear-gradient-green::placeholder,
    .linear-gradient-green::-webkit-input-placeholder {
        color: #fefadf;
    }

    .bgc-white, .alt-bgc-white-lime:nth-of-type(odd) {
        background-color: #fefadf !important;
    }
    .alt-bgc-white-lime-darker:nth-of-type(odd) {
        background-color: #e9e6cd !important;
    }
    .alt-border-color-white-lime:nth-of-type(odd) {
        border-color: #e9e6cd !important;
    }
    .alt-border-color-white-lime:nth-of-type(even) {
        border: none !important;
    }

    .bgc-white-darker {
        background-color: #dfcead;
    }
    
    main .outline-color-white {
        outline-color: #fefadf !important;
    }
    
    .bgc-lime, .alt-bgc-lime-darker:nth-of-type(even), .alt-bgc-white-lime:nth-of-type(even), .alt-bgc-lime-green:nth-of-type(even) {
        background-color: #bad7b5;
    }
    .alt-bgc-lime-green:nth-of-type(even) {
        background-color: #bad7b5;
    }
    .alt-bgc-lime-darker:nth-of-type(odd), .alt-bgc-white-lime-darker:nth-of-type(even) {
        background-color: #9eb79a !important;
    }
    
    main .border-color-white-darker {
        border-color: #dfcead !important;
    }

    .bgc-orange, main mark {
        background-color: #eb9b44;
        font-weight: 700 !important;
    }

    .form-check-input:checked {
        background-color: #eb9b44 !important;
        border-color: #eb9b44 !important;
    }
    .form-check-input:focus {
        border-color: #f0b980 !important;
        box-shadow: 0 0 0 .25rem rgb(240, 185, 128, .25) !important;
    }
    .form-switch .form-check-input:focus {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f0b980'/%3e%3c/svg%3e") !important;
    }

    .white-mark mark {
        background-color: var(--bs-highlight-bg) !important;
    }

    .hover-orange {
        transition: all ease .3s;
    }

    .hover-white {
        transition: all ease .3s;
    }

    main .border-color-orange {
        border-color: #eb9b44 !important;
    }
    
    .bgc-orange-darker {
        background-color: #af512d;
    }

    .text-orange {
        color: #eb9b44;
    }
    
    .text-orange-darker {
        color: #af512d;
    }
    
    .bgc-green, .alt-bgc-green-darker:nth-of-type(even) .skill-attribute {
        background-color: #74a57f;
    }
    .alt-bgc-lime-green:nth-of-type(odd) {
        background-color: #74a57f;
    }
    .alt-bgc-green-darker:nth-of-type(even) {
        background-color: #638c6c;
    }

    .bgc-green-darker, .alt-bgc-green-darker:nth-of-type(odd) .skill-attribute {
        background-color: #3a4e3e;
    }
    .alt-bgc-green-darker:nth-of-type(odd) {
        background-color: #314235;
    }

    main .border-color-green {
        border-color: #74a57f !important;
    }

    main .border-color-green-darker {
        border-color: #3a4e3e !important;
    }

    .alt-border-color-green-darker:nth-of-type(even) {
        border-color: #314235 !important;
    }
    .alt-border-color-green-darker:nth-of-type(odd) {
        border: none !important;
    }
    
    .bgc-brown {
        background-color: #884424;
    }
    
    .bgc-brown-darker {
        background-color: #311f1d;
    }
    
    .bgc-dark {
        background-color: #311f1d !important;
    }
    
    .bgc-disabled {
        background-color: #d0ceb9 !important;
        color: #645d5c !important;
    }
    
    .text-dark-c,
    .important-linear-gradient-orange {
        color: #311f1d !important;
    }
    .alt-bgc-lime-green:nth-of-type(even),
    .alt-linear-gradient-lime-green:nth-of-type(odd) {
        color: #311f1d;
    }

    .text-grey {
        color: #c1c7be !important;
    }

    /* ~7.5% darker */
        .linear-gradient-white, 
        .alt-linear-gradient-white-lime:nth-of-type(odd), 
        .alt-linear-gradient-white-lime:nth-of-type(even) .alt-input {
            background-image: linear-gradient(#fefadf 50%, #e9e6cd 50%);
        }

        .angled-gradient-white {
            background-image: linear-gradient(to right bottom, #fefadf 50%, #e9e6cd 50%);
        }
        
    /* 15% darker */
        .linear-gradient-lime, 
        .alt-linear-gradient-white-lime:nth-of-type(even), 
        .alt-linear-gradient-white-lime:nth-of-type(odd) .alt-input,
        .alt-linear-gradient-lime-green:nth-of-type(odd) {
            background-image: linear-gradient(#bad7b5 50%, #9eb79a 50%);
        }

        .radial-gradient-portrait {
            background: #fff;
            -webkit-box-shadow: inset 0 0 2.5vh 3vh #3a4e3e;
            box-shadow: inset 0 0 2.5vh 3vh #3a4e3e;
        }

        main .linear-gradient-grey, .alt-linear-gradient-grey-green:nth-of-type(even), .alt-gradient-checkbox:nth-of-type(odd) label {
            background-image: linear-gradient(#8a9483 50%, #7b8474 50%);
        }
        
        .alt-angled-gradient-grey-green:nth-of-type(even) {
            background-image: linear-gradient(to right bottom, #8a9483 50%, #7b8474 50%);
        }
        
        .alt-border-grey-green:nth-of-type(even) {
            border-color: #5e6559 !important;
        }

        .linear-gradient-disabled {
            background-image: linear-gradient(#d0ceb9  50%, #bdbba7  50%) !important;
            color: #645d5c !important;
        }
        .linear-gradient-disabled *, .bgc-disabled * {
            color: #645d5c !important;
        }

        .important-linear-gradient-orange {
            background-image: linear-gradient(#eb9b44 50%, #c8843a 50%) !important;
        }

        .linear-gradient-orange {
            background-image: linear-gradient(#eb9b44 50%, #c8843a 50%);
        }

        .angled-gradient-orange {
            background-image: linear-gradient(to right bottom, #eb9b44 50%, #c8843a 50%);
        }
        
        .angled-gradient-orange-darker {
            background-image: linear-gradient(to right bottom, #af512d 50%, #954526 50%);
        }
        
        main .border-color-orange-darker {
            border-color: #af512d !important;
        }

        .linear-gradient-green, .alt-linear-gradient-grey-green:nth-of-type(odd), .alt-gradient-checkbox:nth-of-type(even) label, 
        .alt-linear-gradient-green-darker:nth-of-type(odd), .alt-linear-gradient-lime-green:nth-of-type(even) {
            background-image: linear-gradient(#74a57f 50%, #638c6c 50%);
        }

        .alt-linear-gradient-green-darker:nth-of-type(odd) .border-color-green-darker {
            border-color: #74a57f !important;
        }
        
        .alt-angled-gradient-grey-green:nth-of-type(odd) {
            background-image: linear-gradient(to right bottom, #74a57f 50%, #638c6c 50%);
        }
        
        .alt-border-grey-green:nth-of-type(odd) {
            border-color: #4f7056 !important;
        }

        main .border-color-screen-header {
            border-bottom-color: #121713 !important;
        }

        .linear-gradient-green-darker, 
        .alt-linear-gradient-green-darker:nth-of-type(even) {
            background-image: linear-gradient(#3a4e3e 50%, #314235 50%);
        }

        .angled-gradient-green-darker {
            background-image: linear-gradient(to right bottom, #3a4e3e 50%, #314235 50%);
        }

        .backdrop {
            background-image: linear-gradient(to right bottom, rgba(26, 35, 28, 0.95) 50%, rgba(19, 26, 21, 0.95) 50%);
        }

        .angled-gradient-brown {
            background-image: linear-gradient(to right bottom, #884424 50%, #743a1f 50%);
        }
    /* end 15% darker */

/* END COLORS */
        
/* backgrounds */
    .bg-overlay::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.2;
        mix-blend-mode: overlay;
        pointer-events: none;
    }

    .bg-login::before {
        background: url('/img/login_background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .bg-footer {
        background-image: url('/image/background/footer_background.jpg');
        background-size: contain;
        background-position: center;
    }

    .bg-header {
        background-image: url('/image/background/header_background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
    }

    .bg-stats {
        background-image: url('/image/background/stats_background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
        border-bottom-left-radius: var(--bs-modal-inner-border-radius);
        border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    }

    .bg-character-sheet {
        background-image: url('/image/background/character_sheet_background.jpg');
        background-size: cover;
        background-position: top;
    }

    .bg-aide {
        background-image: url('/image/background/aide_background.jpg');
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: top;
    }

    .bg-character {
        background-image: url('/image/background/character_background.jpg');
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: top;
    }

    .bg-creature {
        background-image: url('/image/background/creature_background.jpg');
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: top;
    }

    .bg-item {
        background-image: url('/image/background/item_background.jpg');
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: top;
    }

    .bg-faction {
        background-image: url('/image/background/faction_background.jpg');
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: top;
    }

    .bg-location {
        background-image: url('/image/background/location_background.jpg');
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: top;
    }
/* end backgrounds */

/* < md */
@media all and (max-width: 767px) {
    main .fs-md-3 {
        font-size: calc(1.3rem + .6vw) !important;
    }
}

/* md */
@media all and (min-width: 768px) {
    main .fs-md-3 {
        font-size: calc(1.3rem + .6vw) !important;
    }

    .skills-columns {
        -webkit-columns: 3;
        -moz-columns: 3;
        columns: 3;
        column-gap: 2rem;
    }
    
    .skills-2-columns {
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
        column-gap: 2rem;
    }

    .skills-columns > div, .skills-2-columns > div {
        break-inside: avoid;
        page-break-inside: avoid; 
        -webkit-column-break-inside: avoid;
    }
}

/* lg */
@media all and (min-width: 992px) and (max-width: 1199px) {
    .skills-columns {
        -webkit-columns: 2 !important;
        -moz-columns: 2 !important;
        columns: 2 !important;
    }
}

/* xl */
@media all and (min-width: 1200px) {
    main .position-xl-none {
        position: unset !important;
    }

    main .rounded-xl-none {
        border-radius: 0 !important;
    }

    main .border-xl-none {
        border: none !important;
    }

    .fw-xl-bold {
        font-weight: 700 !important;
    }

    main .fw-xl-none {
        font-weight: unset !important;
    }

    .linear-gradient-xl-green {
        background-image: linear-gradient(#74a57f 50%, #638c6c 50%) !important;
        color: #fefadf !important;
    }

    .linear-gradient-xl-orange {
        background-image: linear-gradient(#eb9b44 50%, #c8843a 50%) !important;
        color: #311f1d !important;
    }

    .text-xl-light {
        color: #fefadf !important;
    }

    .text-xl-dark {
        color: #311f1d !important;
    }
}

/* hover only on desk */
@media (hover:hover) {
    .hover:hover {
        font-weight: 700 !important;
    }

    .show-hover-origin:hover > .show-hover {
        display: block !important;
    }
    .show-hover-origin:hover > .show-hover-flex {
        display: flex !important;
    }

    .hover-orange:hover {
        color: #eb9b44 !important;
    }

    .hover-white:hover {
        color: #fefadf !important;
    }

    .linear-gradient-lime.hover:hover {
        background-image: linear-gradient(#fefadf 50%, #e9e6cd 50%);
    }

    .linear-gradient-green.hover:hover, .alt-linear-gradient-grey-green.hover:hover, .alt-gradient-checkbox.hover:hover label, 
    .alt-linear-gradient-green-darker.hover:hover,
    .linear-gradient-grey.hover:hover,
    .linear-gradient-orange.hover:hover,
    .linear-gradient-white.hover:hover {
        background-image: linear-gradient(#bad7b5 50%, #9eb79a 50%);
        color: #311f1d !important;
    }
    .linear-gradient-green.hover:hover::placeholder,
    .linear-gradient-green.hover:hover::-webkit-input-placeholder {
        color: #311f1d !important;
    }

    .linear-gradient-disabled.hover:hover {
        background-image: linear-gradient(#bad7b5 50%, #9eb79a 50%) !important;
        color: #311f1d !important;
    }

    .linear-gradient-disabled.hover:hover * {
        color: #311f1d !important;
    }
    
    .alt-linear-gradient-lime-green.hover:hover {
        background-image: linear-gradient(#eb9b44 50%, #c8843a 50%) !important;
        color: #311f1d !important;
    }
    
    .alt-linear-gradient-white-lime.hover:hover {
        background-image: linear-gradient(#74a57f 50%, #638c6c 50%);
        color: #fefadf !important;
    }
}