@charset "UTF-8";

/* Betűtípusok és ikonkészletek */
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css');

/* Material Symbols */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v138/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v138/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
}

*[class*="material-symbols"] {
    --fs: 24;
    --fw: 400;
    font-weight: normal;
    font-style: normal;
    font-size: calc(var(--fs) * 1px);
    line-height: calc(var(--fs) * 1px);
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.material-symbols,
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';

}

.material-symbols-rounded,
.material-symbols-rounded-outlined,
.material-symbols-outlined-rounded {
    font-family: 'Material Symbols Rounded';
}

.material-symbols {
    font-variation-settings:
        'FILL' 1,
        'wght' var(--fw),
        'GRAD' 0,
        'opsz' auto
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' var(--fw),
        'GRAD' 0,
        'opsz' auto
}

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 1,
        'wght' var(--fw),
        'GRAD' 0,
        'opsz' auto
}

.material-symbols-rounded-outlined,
.material-symbols-outlined-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' var(--fw),
        'GRAD' 0,
        'opsz' auto
}

/* Hibakeresés */
.debug,
.debug-all,
.debug-all * {
    outline: 1px solid rgba(255, 0, 255, 0.4);
}

/* Alapértelmezések */
:root {
    --action: #f4b100;
    --on-action: #ffffff;
    --color1: #294656;
    --color2: #3e9e90;
    --color3: #efc100;
    /* Színtéma */
    --primary: rgb(27 101 133);
    --surface-tint: rgb(27 101 133);
    --on-primary: rgb(255 255 255);
    --primary-container: rgb(195 232 255);
    --on-primary-container: rgb(0 30 44);
    --secondary: rgb(0 107 95);
    --on-secondary: rgb(255 255 255);
    --secondary-container: rgb(158 242 227);
    --on-secondary-container: rgb(0 32 28);
    --tertiary: rgb(114 92 12);
    --on-tertiary: rgb(255 255 255);
    --tertiary-container: rgb(255 224 134);
    --on-tertiary-container: rgb(35 27 0);
    --error: rgb(144 74 67);
    --on-error: rgb(255 255 255);
    --error-container: rgb(255 218 214);
    --on-error-container: rgb(59 9 7);
    --background: rgb(246 250 254);
    --on-background: rgb(24 28 31);
    --surface: rgb(247 249 255);
    --on-surface: rgb(24 28 32);
    --surface-variant: rgb(220 228 233);
    --on-surface-variant: rgb(64 72 76);
    --outline: rgb(112 120 125);
    --outline-variant: rgb(192 200 204);
    --inverse-surface: rgb(45 49 53);
    --inverse-on-surface: rgb(238 241 246);
    --inverse-primary: rgb(143 206 243);
    --primary-fixed: rgb(195 232 255);
    --on-primary-fixed: rgb(0 30 44);
    --primary-fixed-dim: rgb(143 206 243);
    --on-primary-fixed-variant: rgb(0 76 104);
    --secondary-fixed: rgb(158 242 227);
    --on-secondary-fixed: rgb(0 32 28);
    --secondary-fixed-dim: rgb(130 213 199);
    --on-secondary-fixed-variant: rgb(0 80 71);
    --tertiary-fixed: rgb(255 224 134);
    --on-tertiary-fixed: rgb(35 27 0);
    --tertiary-fixed-dim: rgb(226 196 109);
    --on-tertiary-fixed-variant: rgb(87 69 0);
    --surface-dim: rgb(215 218 223);
    --surface-bright: rgb(247 249 255);
    --surface-container-lowest: rgb(255 255 255);
    --surface-container-low: rgb(241 244 249);
    --surface-container: rgb(235 238 243);
    --surface-container-high: rgb(230 232 237);
    --surface-container-highest: rgb(224 227 232);
    /* Alapszínek */
    --red: hsl(347, 91%, 50%);
    --rose: hsl(358, 100%, 74%);
    --orange: hsl(36, 93%, 58%);
    --amber: hsl(45, 100%, 51%);
    --lightgreen: hsl(145, 79%, 72%);
    --mint: hsl(159, 77%, 62%);
    --green: hsl(165, 100%, 40%);
    --pine: hsl(168, 51%, 50%);
    --teal: hsl(180, 100%, 25%);
    --blue: hsl(211, 91%, 61%);
    --lightblue: hsl(201, 100%, 68%);
    --lavender: hsl(270, 100%, 80%);
    --purple: hsl(291, 95%, 75%);
    --magenta: hsl(288, 99%, 63%);
    --gold: hsl(44, 81%, 70%);
    --silver: hsl(240, 10%, 86%);
    --bronze: hsl(32, 65%, 60%);
    /* Ragyogás */
    --glow1: rgb(255, 209, 73);
    --glow2: rgb(75, 253, 223);
    --glow3: rgb(70, 196, 255);
    /* Árnyékok */
    --elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.07), 0px 2px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 5px 0px rgba(0, 0, 0, 0.06);
    --elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.07), 0px 3px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 8px 0px rgba(0, 0, 0, 0.06);
    --elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.07), 0px 4px 5px 0px rgba(0, 0, 0, 0.06), 0px 1px 10px 0px rgba(0, 0, 0, 0.06);
    --elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.07), 0px 6px 10px 0px rgba(0, 0, 0, 0.06), 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
    --elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.07), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.06);
    --elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.1), 0px 16px 24px 2px rgba(0, 0, 0, 0.1), 0px 6px 30px 5px rgba(0, 0, 0, 0.1);
    --shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px, rgba(0, 0, 0, 0.1) 0px 3px 5px;
    --shadowHov: rgba(0, 0, 0, 0.1) 0px 14px 28px, rgba(0, 0, 0, 0.1) 0px 10px 10px;
    --shadowPressed: rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px;
    --buttonOutlineShadow: 0 0 0 0.5px hsl(0, 0%, 85%) inset;
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --action: #ffbb17;
        --on-action: #412d00;
        
        --primary: rgb(143 206 243);
        --surface-tint: rgb(143 206 243);
        --on-primary: rgb(0 53 73);
        --primary-container: rgb(0 76 104);
        --on-primary-container: rgb(195 232 255);
        --secondary: rgb(130 213 199);
        --on-secondary: rgb(0 55 49);
        --secondary-container: rgb(0 80 71);
        --on-secondary-container: rgb(158 242 227);
        --tertiary: rgb(226 196 109);
        --on-tertiary: rgb(60 47 0);
        --tertiary-container: rgb(87 69 0);
        --on-tertiary-container: rgb(255 224 134);
        --error: rgb(255 180 171);
        --on-error: rgb(86 30 25);
        --error-container: rgb(115 51 45);
        --on-error-container: rgb(255 218 214);
        --background: rgb(15 20 23);
        --on-background: rgb(223 227 231);
        --surface: rgb(16 20 23);
        --on-surface: rgb(224 227 232);
        --surface-variant: rgb(64 72 76);
        --on-surface-variant: rgb(192 200 204);
        --outline: rgb(138 146 150);
        --outline-variant: rgb(64 72 76);
        --shadow: rgb(0 0 0);
        --scrim: rgb(0 0 0);
        --inverse-surface: rgb(224 227 232);
        --inverse-on-surface: rgb(45 49 53);
        --inverse-primary: rgb(27 101 133);
        --primary-fixed: rgb(195 232 255);
        --on-primary-fixed: rgb(0 30 44);
        --primary-fixed-dim: rgb(143 206 243);
        --on-primary-fixed-variant: rgb(0 76 104);
        --secondary-fixed: rgb(158 242 227);
        --on-secondary-fixed: rgb(0 32 28);
        --secondary-fixed-dim: rgb(130 213 199);
        --on-secondary-fixed-variant: rgb(0 80 71);
        --tertiary-fixed: rgb(255 224 134);
        --on-tertiary-fixed: rgb(35 27 0);
        --tertiary-fixed-dim: rgb(226 196 109);
        --on-tertiary-fixed-variant: rgb(87 69 0);
        --surface-dim: rgb(16 20 23);
        --surface-bright: rgb(54 58 62);
        --surface-container-lowest: rgb(11 15 18);
        --surface-container-low: rgb(24 28 32);
        --surface-container: rgb(28 32 36);
        --surface-container-high: rgb(38 42 46);
        --surface-container-highest: rgb(49 53 57);
       
        --red: hsl(347, 91%, 65%);
        --rose: hsl(358, 100%, 82%);
        --orange: hsl(36, 93%, 68%);
        --amber: hsl(45, 100%, 65%);
        --lightgreen: hsl(145, 79%, 81%);
        --mint: hsl(159, 77%, 74%);
        --green: hsl(165, 100%, 55%);
        --pine: hsl(168, 51%, 65%);
        --teal: hsl(180, 100%, 40%);
        --blue: hsl(211, 91%, 75%);
        --lightblue: hsl(201, 100%, 82%);
        --lavender: hsl(270, 100%, 86%);
        --purple: hsl(291, 95%, 83%);
        --magenta: hsl(288, 99%, 75%);
        --gold: hsl(44, 81%, 80%);
        --silver: hsl(240, 10%, 90%);
        --bronze: hsl(32, 65%, 75%);
       
        --buttonOutlineShadow: 0 0 0 0.5px hsl(0, 0%, 35%) inset;
    }
} */

.elevation-2 {
    box-shadow: var(--elevation-2) !important;
}

.elevation-3 {
    box-shadow: var(--elevation-3) !important;
}

.elevation-4 {
    box-shadow: var(--elevation-4) !important;
}

.elevation-6 {
    box-shadow: var(--elevation-6) !important;
}

.elevation-8 {
    box-shadow: var(--elevation-8) !important;
}

.elevation-16 {
    box-shadow: var(--elevation-16) !important;
}

/* Alapvető működés */
* {
    font-family: 'Montserrat', sans-serif;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -ms-overflow-style: none;
    scrollbar-width: none;
    user-zoom: none;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.mdi:before {
    --fs: 24px;
    font-size: var(--fs);
}

::-webkit-scrollbar {
    background-color: transparent;
    -webkit-appearance: none;
    display: none;
    height: 0px;
    width: 0px;
}

::-webkit-scrollbar-thumb {
    background-color: transparent;
}

body {
    margin: 0;
    color: var(--on-background);
    background-color: var(--background);
}

img,
a {
    user-drag: none;
    -webkit-user-drag: none;
}

.anchor {
    scroll-margin: 100px;
}

/* Elrejtés, letiltás */
.hidden {
    display: none !important;
}

.transparent {
    opacity: 0;
}

.inactive {
    pointer-events: none;
}

.invisible {
    pointer-events: none;
    opacity: 0;
}

.active {
    pointer-events: auto;
}

.interactive {
    cursor: pointer;
}

/* Túlfolyás */
.nooverflow,
.o0 {
    overflow: hidden;
}

.nowrap {
    white-space: nowrap;
}

.l2,
.l3,
.l4,
.l5,
.l6,
.l7,
.l8,
.l9,
.l10 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.l1 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.l2 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-lines: 2;
}

.l3 {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-lines: 3;
}

.l4 {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    max-lines: 4;
}

.l5 {
    -webkit-line-clamp: 5;
    line-clamp: 5;
    max-lines: 5;
}

.l6 {
    -webkit-line-clamp: 6;
    line-clamp: 6;
    max-lines: 6;
}

.l7 {
    -webkit-line-clamp: 7;
    line-clamp: 7;
    max-lines: 7;
}

.l8 {
    -webkit-line-clamp: 8;
    line-clamp: 8;
    max-lines: 8;
}

.l9 {
    -webkit-line-clamp: 9;
    line-clamp: 9;
    max-lines: 9;
}

.l10 {
    -webkit-line-clamp: 10;
    line-clamp: 10;
    max-lines: 10;
}

/* Betűformázás */
.lc0 {
    text-transform: none !important;
}

.lc {
    text-transform: lowercase !important;
}

.uc {
    text-transform: uppercase !important;
}

/* Betűméretek */
.fs8 {
    font-size: 8px
}

.fs10 {
    font-size: 10px
}

.fs12 {
    font-size: 12px
}

.fs14 {
    font-size: 14px
}

.fs16 {
    font-size: 16px
}

.fs18 {
    font-size: 18px
}

.fs20 {
    font-size: 20px
}

.fs22 {
    font-size: 22px
}

.fs24 {
    font-size: 24px
}

.fs26 {
    font-size: 26px
}

.fs28 {
    font-size: 28px
}

.fs32 {
    font-size: 32px
}

.fs36 {
    font-size: 36px
}

.fs42 {
    font-size: 42px
}

.fs48 {
    font-size: 48px
}

.fs56 {
    font-size: 56px
}

.fs72 {
    font-size: 72px
}

/* Betűvastagságok */
.fw100 {
    font-weight: 100 !important;
}

.fw200 {
    font-weight: 200 !important;
}

.fw300 {
    font-weight: 300 !important;
}

.fw400 {
    font-weight: 400 !important;
}

.fw500 {
    font-weight: 500 !important;
}

.fw600 {
    font-weight: 600 !important;
}

.fw700 {
    font-weight: 700 !important;
}

.fw800 {
    font-weight: 800 !important;
}

.fw900 {
    font-weight: 900 !important;
}

/* Szélességek, eszközök */
@media screen and (max-width: 500px) {

    .show-tablet:not(.show-mobile),
    .show-laptop:not(.show-mobile),
    .show-desktop:not(.show-mobile),
    .min-tablet,
    .min-laptop {
        display: none !important;
    }
}

@media screen and (min-width: 500px) and (max-width: 1000px) {

    .show-mobile:not(.show-tablet),
    .show-laptop:not(.show-tablet),
    .show-desktop:not(.show-tablet),
    .min-laptop {
        display: none !important;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1800px) {

    .show-mobile:not(.show-laptop),
    .show-tablet:not(.show-laptop),
    .show-desktop:not(.show-laptop),
    .max-tablet {
        display: none !important;
    }
}

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

    .show-mobile:not(.show-desktop),
    .show-tablet:not(.show-desktop),
    .show-laptop:not(.show-desktop),
    .max-tablet,
    .max-laptop {
        display: none !important;
    }
}

@media (pointer: coarse) {
    .touch-hidden {
        display: none !important;
    }
}

@media (pointer: fine) {
    .touch-only {
        display: none !important;
    }
}

/* Pozicionálás */
.rel {
    position: relative;
}

.abs {
    position: absolute;
}

.stick {
    position: sticky;
    position: -webkit-sticky;
}

.fix {
    position: fixed;
}

.a-t {
    top: 0;
}

.a-l {
    left: 0;
}

.a-r {
    right: 0;
}

.a-b {
    bottom: 0;
}

.a-c {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.a-tc {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.a-bc {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.a-cl {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.a-cr {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* Oldalarány */
.square,
.ratio-1,
.ratio-1-1,
.ratio-square {
    aspect-ratio: 1;
}

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

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

.ratio-2-3 {
    aspect-ratio: 2/3;
}

.ratio-3-2 {
    aspect-ratio: 3/2;
}

/* Kijelés eszközök */
.selectable {
    user-select: auto !important;
    -webkit-user-select: auto;
}

::-moz-selection {
    background: color-mix(in srgb, var(--action), transparent 50%);
}

::selection {
    background: color-mix(in srgb, var(--action), transparent 50%);
}

/* Animációk */
/* *:not(#map *),
*:not(#map *)::before,
*:not(#map *)::after {
    transition: all ease 0.3s;
} */

.animate.a500,
.animate-all.a500 * {
    transition-duration: 500ms !important;
}

.animate.a400,
.animate-all.a400 * {
    transition-duration: 400ms !important;
}

.animate.a200,
.animate-all.a200 * {
    transition-duration: 200ms !important;
}

.animate.a150,
.animate-all.a150 * {
    transition-duration: 150ms !important;
}

.animate.a100,
.animate-all.a100 * {
    transition-duration: 100ms !important;
}

.animate,
.animate::before,
.animate::after {
    transition: all ease 0.3s;
}

.animate-all,
.animate-all *,
.animate-all *::after,
.animate-all *::before {
    transition: all ease 0.3s;
}

[class*="button"],
[class*="card"] {
    transition: all ease 0.3s;
}

.noanimate,
.noanimate::before,
.noanimate::after {
    transition: none !important;
}

.noanimate-all,
.noanimate-all *,
.noanimate-all *::after,
.noanimate-all *::before {
    transition: none !important;
}

/* Képek */
.cover {
    object-fit: cover;
}

.contain {
    object-fit: contain;
}

*[class*="bgimg"] {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #f0f0f0;
}

.bgimg-tl {
    background-position: 0% 0%;
}

.bgimg-tc {
    background-position: top;
}

.bgimg-tr {
    background-position: 100% 0%;
}

.bgimg-cl {
    background-position: left;
}

.bgimg,
.bgimg-c,
.bgimg-cc {
    background-position: center;
}

.bgimg-cr {
    background-position: right;
}

.bgimg-bl {
    background-position: 0% 100%;
}

.bgimg-bc {
    background-position: bottom;
}

.bgimg-br {
    background-position: 100% 100%;
}

/* Ragyogás */
.glow {
    position: relative;
}

.glow::after {
    transition: all ease 0.2s;
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 100000px;
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, var(--glow1), var(--glow2), var(--glow3));
}

.glow:hover::after {
    transform: scale(1.3);
    filter: blur(12px);
}

/* Linkek, gombok */
a {
    color: unset;
}

.link {
    color: var(--action);
}

a,
a:link:active,
a:visited:active {
    text-decoration: none;
}

button,
.button {
    cursor: pointer;
    border: none;
}

.fullbutton,
.halfbutton,
.outlinebutton,
.linebutton,
.tonalbutton {
    --c: var(--action);
    --sc: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

.fullbutton {
    color: var(--on-action);
    background-color: var(--c);
}

.halfbutton {
    color: var(--c);
    background-color: color-mix(in srgb, var(--c) 10%, var(--sc));
}

.outlinebutton {
    color: var(--c);
    background-color: var(--sc);
    box-shadow: 0 0 0 1px var(--c) inset;
}

.outlinebutton.thin {
    box-shadow: var(--buttonOutlineShadow);
}

.linebutton {
    color: var(--c);
    background-color: var(--sc);
}

.tonalbutton {
    --c1: var(--action);
    --c2: color-mix(in srgb, var(--c1) 60%, var(--background));
    --c3: var(--c1);
    color: var(--on-action);
    background-color: var(--c1);
    background-image: linear-gradient(90deg, var(--c1) 0%, var(--c2) 50%, var(--c3) 100%);
    background-size: 200% 100%;
}

.fullbutton:hover,
.fullbutton:focus {
    background-color: color-mix(in srgb, var(--c) 90%, black);
}

.halfbutton:hover,
.halfbutton:focus {
    background-color: color-mix(in srgb, var(--c) 20%, var(--sc));
}

.outlinebutton:hover,
.outlinebutton:focus {
    background-color: color-mix(in srgb, var(--c) 10%, var(--sc));
}

.linebutton:hover,
.linebutton:focus {
    background-color: color-mix(in srgb, var(--c) 10%, var(--sc));
}

.tonalbutton:hover,
.tonalbutton:focus {
    background-position: 100% 0%;
}

.fullbutton:active {
    background-color: color-mix(in srgb, var(--c) 80%, black);
}

.halfbutton:active {
    background-color: color-mix(in srgb, var(--c) 30%, var(--sc));
}

.outlinebutton:active {
    background-color: color-mix(in srgb, var(--c) 20%, var(--sc));
}

.linebutton:active {
    background-color: color-mix(in srgb, var(--c) 20%, var(--sc));
}

.fullbutton.elevated,
.halfbutton.elevated,
.linebutton.elevated,
.tonalbutton.elevated {
    box-shadow: var(--shadow);
}

.fullbutton.elevated:hover,
.halfbutton.elevated:hover,
.linebutton.elevated:hover,
.tonalbutton.elevated:hover {
    box-shadow: var(--shadowHov);
}

.fullbutton.elevated:active,
.halfbutton.elevated:active,
.linebutton.elevated:active,
.tonalbutton.elevated:active {
    box-shadow: var(--shadowPressed);
}

.FAB {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

button,
a.button {
    cursor: pointer;
    border: none;
}

button:focus-visible,
a:focus-visible {
    outline: none !important;
}

.buttongroup-v,
.buttongroup-h {
    --line: #f0f0f0;
    display: flex;
    overflow: hidden;
    box-shadow: var(--shadow);
    background-color: white;
}

.buttongroup-v {
    flex-direction: column;
}

.buttongroup-h>* {
    box-shadow: none !important;
    border-right: 1px solid var(--line);
}

.buttongroup-v>* {
    box-shadow: none !important;
    border-bottom: 1px solid var(--line);
}

.buttongroup-h>:last-child {
    border-right: none;
}

.buttongroup-v>:last-child {
    border-bottom: none;
}

.buttongroup-v,
.buttongroup-h {
    overflow: hidden;
}

.buttongroup-v:hover,
.buttongroup-h:hover {
    box-shadow: var(--shadowHov);
}

.buttongroup-v:active,
.buttongroup-h:active {
    box-shadow: var(--shadowPressed);
}

/* Gomb-elrendezések */
.txt {
    min-height: 40px;
    padding: 0 24px !important;
}

.txt.wide {
    min-height: 50px !important;
    padding: 0 24px !important;
}

.txt.chip {
    min-height: 32px !important;
    padding: 0 16px !important;
}

.ico-txt {
    min-height: 40px;
    padding: 0 24px 0 16px !important;
}

.txt-ico {
    min-height: 40px;
    padding: 0 16px 0 24px !important;
}

.ico-txt.wide {
    min-height: 50px !important;
    padding: 0 24px 0 16px !important;
}

.txt-ico.wide {
    min-height: 50px !important;
    padding: 0 16px 0 24px !important;
}

.ico-txt.chip {
    min-height: 32px !important;
    padding: 0 16px 0 8px !important;
}

.txt-ico.chip {
    min-height: 32px !important;
    padding: 0 8px 0 16px !important;
}

.ico {
    min-height: 40px;
    min-width: 40px !important;
}

.ico.wide {
    min-height: 50px !important;
    min-width: 50px !important;
}

.ico.chip {
    min-height: 32px !important;
    min-width: 32px !important;
}

.chip [class*="material"] {
    font-size: 18px;
    --fs: 18;
}

.ico-txt.reveal:not(:hover) {
    padding: 0 !important;
    min-width: 40px !important;
    gap: 0;
}

.ico-txt.reveal.wide:not(:hover) {
    min-width: 50px !important;
}

.ico-txt.reveal.chip:not(:hover) {
    min-width: 32px !important;
}

.ico-txt.reveal:not(:hover) span:last-child {
    max-width: 0;
    overflow: hidden;
}

.flexbutton {
    flex-wrap: wrap;
}

/* Kártyák */
.card,
.card0 {
    box-shadow: var(--shadow);
    overflow: hidden;
    background-color: white;
}

.card.outlined,
.card0.outlined {
    box-shadow: hsl(0, 0%, 85%) 0 0 0 .5px;
}

.card:hover {
    box-shadow: var(--shadowHov);
    cursor: pointer;
}

.card:active {
    box-shadow: var(--shadowPressed);
}

/* Interaktív nagyítás */
.scale-up:hover,
.scale:hover {
    scale: 1.1;
}

.scale-down:active,
.scale:active {
    scale: 0.9;
}

/* Lekerekítés */
.r {
    border-radius: 1000000px;
}

.r0 {
    border-radius: 0;
}

.r2 {
    border-radius: 2px;
}

.r3 {
    border-radius: 3px;
}

.r4 {
    border-radius: 4px;
}

.r5 {
    border-radius: 5px;
}

.r6 {
    border-radius: 6px;
}

.r7 {
    border-radius: 7px;
}

.r8 {
    border-radius: 8px;
}

.r9 {
    border-radius: 9px;
}

.r10 {
    border-radius: 10px;
}

.r12 {
    border-radius: 12px;
}

.r15 {
    border-radius: 15px;
}

.r20 {
    border-radius: 20px;
}

/* Fő elerendezés */
.main,
.allmain>*:not(.nomain) {
    max-width: calc(100vw - 30px);
    width: 900px;
    margin: 0 auto;
}

.main-wide,
.allmain-wide>*:not(.nomain) {
    max-width: calc(100vw - 30px);
    width: 1200px;
    margin: 0 auto;
}

/* Csemperács a fő elrendezésekben */
.main .tilegrid,
.allmain>*:not(.nomain) .tilegrid {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.main-wide .tilegrid,
.allmain-wide>*:not(.nomain) .tilegrid {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media screen and (max-width: 1230px) {

    .main-wide .tilegrid,
    .allmain-wide>*:not(.nomain) .tilegrid {
        max-width: 900px;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 930px) {

    .main .tilegrid,
    .allmain>*:not(.nomain) .tilegrid,
    .main-wide .tilegrid,
    .allmain-wide>*:not(.nomain) .tilegrid {
        max-width: 600px;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 630px) {

    .main .tilegrid,
    .allmain>*:not(.nomain) .tilegrid,
    .main-wide .tilegrid,
    .allmain-wide>*:not(.nomain) .tilegrid {
        max-width: 300px;
        grid-template-columns: 1fr;
    }

    .main .tilegrid.flexible,
    .allmain>*:not(.nomain) .tilegrid.flexible,
    .main-wide .tilegrid.flexible,
    .allmain-wide>*:not(.nomain) .tilegrid.flexible {
        max-width: calc(100vw - 30px);
    }
}

/* Dialog elem */
dialog {
    border: none;
}

dialog::backdrop {
    background-color: #00000080;
}

dialog.backdrop-dark-o8::backdrop {
    background-color: hsla(0, 0%, 0%, 0.8);
}

dialog :focus-visible {
    outline: none;
}

/* Szöveg elrendezés */
.center:not([class*="flex"]) {
    text-align: center;
}

.balanced {
    text-wrap: balance;
}

/* Flex elrendezések */
.flex0 {
    min-width: 0;
}

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

.flex-start {
    display: flex;
    align-items: flex-start;
}

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

.flex-stretch {
    display: flex;
    align-items: stretch;
}

.center {
    justify-content: center;
}

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

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

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

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

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

.stretch {
    justify-content: stretch;
}

.rev {
    flex-direction: row-reverse;
}

.col {
    flex-direction: column;
}

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

.wrap {
    flex-wrap: wrap;
}

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

.grow {
    flex-grow: 1;
}

.maxgrow {
    flex-grow: 10000;
}

/* Térköz */
.gap1 {
    gap: 1px;
}

.gap2 {
    gap: 2px;
}

.gap3 {
    gap: 3px;
}

.gap4 {
    gap: 4px;
}

.gap5 {
    gap: 5px;
}

.gap6 {
    gap: 6px;
}

.gap8 {
    gap: 8px;
}

.gap10 {
    gap: 10px;
}

.gap12 {
    gap: 12px;
}

.gap14 {
    gap: 14px;
}

.gap15 {
    gap: 15px;
}

.gap16 {
    gap: 16px;
}

.gap18 {
    gap: 18px;
}

.gap20 {
    gap: 20px;
}

.gap22 {
    gap: 22px;
}

.gap24 {
    gap: 24px;
}

.gap25 {
    gap: 25px;
}

.gap30 {
    gap: 30px;
}

.gap40 {
    gap: 40px;
}

.gap50 {
    gap: 50px;
}

.gaph1 {
    column-gap: 1px;
}

.gaph2 {
    column-gap: 2px;
}

.gaph3 {
    column-gap: 3px;
}

.gaph4 {
    column-gap: 4px;
}

.gaph5 {
    column-gap: 5px;
}

.gaph6 {
    column-gap: 6px;
}

.gaph8 {
    column-gap: 8px;
}

.gaph10 {
    column-gap: 10px;
}

.gaph12 {
    column-gap: 12px;
}

.gaph14 {
    column-gap: 14px;
}

.gaph15 {
    column-gap: 15px;
}

.gaph16 {
    column-gap: 16px;
}

.gaph18 {
    column-gap: 18px;
}

.gaph20 {
    column-gap: 20px;
}

.gaph22 {
    column-gap: 22px;
}

.gaph24 {
    column-gap: 24px;
}

.gaph25 {
    column-gap: 25px;
}

.gaph30 {
    column-gap: 30px;
}

.gaph40 {
    column-gap: 40px;
}

.gaph50 {
    column-gap: 50px;
}

.gapv1 {
    row-gap: 1px;
}

.gapv2 {
    row-gap: 2px;
}

.gapv3 {
    row-gap: 3px;
}

.gapv4 {
    row-gap: 4px;
}

.gapv5 {
    row-gap: 5px;
}

.gapv6 {
    row-gap: 6px;
}

.gapv8 {
    row-gap: 8px;
}

.gapv10 {
    row-gap: 10px;
}

.gapv12 {
    row-gap: 12px;
}

.gapv14 {
    row-gap: 14px;
}

.gapv15 {
    row-gap: 15px;
}

.gapv16 {
    row-gap: 16px;
}

.gapv18 {
    row-gap: 18px;
}

.gapv20 {
    row-gap: 20px;
}

.gapv22 {
    row-gap: 22px;
}

.gapv24 {
    row-gap: 24px;
}

.gapv25 {
    row-gap: 25px;
}

.gapv30 {
    row-gap: 30px;
}

.gapv40 {
    row-gap: 40px;
}

.gapv50 {
    row-gap: 50px;
}

/* Margók */
.m1 {
    margin: 1px;
}

.m2 {
    margin: 2px;
}

.m3 {
    margin: 3px;
}

.m4 {
    margin: 4px;
}

.m5 {
    margin: 5px;
}

.m6 {
    margin: 6px;
}

.m8 {
    margin: 8px;
}

.m10 {
    margin: 10px;
}

.m12 {
    margin: 12px;
}

.m14 {
    margin: 14px;
}

.m15 {
    margin: 15px;
}

.m16 {
    margin: 16px;
}

.m18 {
    margin: 18px;
}

.m20 {
    margin: 20px;
}

.m22 {
    margin: 22px;
}

.m24 {
    margin: 24px;
}

.m25 {
    margin: 25px;
}

.m30 {
    margin: 30px;
}

.m40 {
    margin: 40px;
}

.m50 {
    margin: 50px;
}

.mh1 {
    margin-left: 1px !important;
    margin-right: 1px !important;
}

.mh2 {
    margin-left: 2px !important;
    margin-right: 2px !important;
}

.mh3 {
    margin-left: 3px !important;
    margin-right: 3px !important;
}

.mh4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
}

.mh5 {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.mh6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
}

.mh8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.mh10 {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.mh12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

.mh14 {
    margin-left: 14px !important;
    margin-right: 14px !important;
}

.mh15 {
    margin-left: 15px !important;
    margin-right: 15px !important;
}

.mh16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

.mh18 {
    margin-left: 18px !important;
    margin-right: 18px !important;
}

.mh20 {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

.mh22 {
    margin-left: 22px !important;
    margin-right: 22px !important;
}

.mh24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
}

.mh25 {
    margin-left: 25px !important;
    margin-right: 25px !important;
}

.mh30 {
    margin-left: 30px !important;
    margin-right: 30px !important;
}

.mh40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
}

.mh50 {
    margin-left: 50px !important;
    margin-right: 50px !important;
}

.mv0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mv1 {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

.mv2 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.mv3 {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

.mv4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.mv5 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.mv6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

.mv8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.mv10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.mv12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.mv14 {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}

.mv15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.mv16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.mv18 {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}

.mv20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.mv22 {
    margin-top: 22px !important;
    margin-bottom: 22px !important;
}

.mv24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

.mv25 {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

.mv30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.mv40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.mv50 {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.m0,
.nomargin {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

/* Eltartás */
.p1 {
    padding: 1px;
}

.p2 {
    padding: 2px;
}

.p3 {
    padding: 3px;
}

.p4 {
    padding: 4px;
}

.p5 {
    padding: 5px;
}

.p6 {
    padding: 6px;
}

.p8 {
    padding: 8px;
}

.p10 {
    padding: 10px;
}

.p12 {
    padding: 12px;
}

.p14 {
    padding: 14px;
}

.p15 {
    padding: 15px;
}

.p16 {
    padding: 16px;
}

.p18 {
    padding: 18px;
}

.p20 {
    padding: 20px;
}

.p22 {
    padding: 22px;
}

.p24 {
    padding: 24px;
}

.p25 {
    padding: 25px;
}

.p30 {
    padding: 30px;
}

.p40 {
    padding: 40px;
}

.p50 {
    padding: 50px;
}

.ph1 {
    padding-left: 1px;
    padding-right: 1px;
}

.ph2 {
    padding-left: 2px;
    padding-right: 2px;
}

.ph3 {
    padding-left: 3px;
    padding-right: 3px;
}

.ph4 {
    padding-left: 4px;
    padding-right: 4px;
}

.ph5 {
    padding-left: 5px;
    padding-right: 5px;
}

.ph6 {
    padding-left: 6px;
    padding-right: 6px;
}

.ph8 {
    padding-left: 8px;
    padding-right: 8px;
}

.ph10 {
    padding-left: 10px;
    padding-right: 10px;
}

.ph12 {
    padding-left: 12px;
    padding-right: 12px;
}

.ph14 {
    padding-left: 14px;
    padding-right: 14px;
}

.ph15 {
    padding-left: 15px;
    padding-right: 15px;
}

.ph16 {
    padding-left: 16px;
    padding-right: 16px;
}

.ph18 {
    padding-left: 18px;
    padding-right: 18px;
}

.ph20 {
    padding-left: 20px;
    padding-right: 20px;
}

.ph22 {
    padding-left: 22px;
    padding-right: 22px;
}

.ph24 {
    padding-left: 24px;
    padding-right: 24px;
}

.ph25 {
    padding-left: 25px;
    padding-right: 25px;
}

.ph30 {
    padding-left: 30px;
    padding-right: 30px;
}

.ph40 {
    padding-left: 40px;
    padding-right: 40px;
}

.ph50 {
    padding-left: 50px;
    padding-right: 50px;
}

.pv1 {
    padding-top: 1px;
    padding-bottom: 1px;
}

.pv2 {
    padding-top: 2px;
    padding-bottom: 2px;
}

.pv3 {
    padding-top: 3px;
    padding-bottom: 3px;
}

.pv4 {
    padding-top: 4px;
    padding-bottom: 4px;
}

.pv5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pv6 {
    padding-top: 6px;
    padding-bottom: 6px;
}

.pv8 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.pv10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pv12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.pv14 {
    padding-top: 14px;
    padding-bottom: 14px;
}

.pv15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.pv16 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.pv18 {
    padding-top: 18px;
    padding-bottom: 18px;
}

.pv20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.pv22 {
    padding-top: 22px;
    padding-bottom: 22px;
}

.pv24 {
    padding-top: 24px;
    padding-bottom: 24px;
}

.pv25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.pv30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.pv40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.pv50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Méretezés */
.fullwidth {
    width: 100%;
}

.fullheight {
    height: 100%;
}

.expand {
    width: 100%;
    height: 100%;
}

.fullwindow {
    width: 100vw;
    height: 100svh;
}

/* Háttér homályosítása */
.blur,
.blur10 {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.blur15 {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.blur20 {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Űrlap vezérlők */
.form-field:not(:placeholder-shown):valid+label::before {
    font-family: 'Material Icons';
    content: "done";
    pointer-events: none;
    display: inline-block;
    transform: translateY(10%);
    padding-right: 2px;
}

.form-field:required~label::after {
    content: " *";
    margin-left: 4px;
}

.form-field.visited:invalid {
    border-bottom: 1px solid crimson;
}

.form-field.visited:invalid~label {
    color: crimson;
}

.form-field.visited:invalid:hover {
    background-color: rgba(220, 20, 60, 0.2);
}

.form-field.visited:invalid:focus {
    border-bottom: 2px solid crimson;
}

.form-field.visited:invalid~p.helper {
    display: none;
}

.form-field.visited:invalid~p.error {
    display: block;
}

.form-field.visited:invalid~label::before {
    font-family: 'Material Icons';
    content: "error_outline";
    color: crimson;
    pointer-events: none;
    display: inline-block;
    transform: translateY(10%);
    padding-right: 2px;
}

.form-group {
    position: relative;
    padding-top: 15px;
}

.form-group p.helper {
    display: block;
    position: absolute;
    font-size: 12px;
    color: rgba(105, 105, 105, 0.5);
    margin-top: 0;
    padding-left: 5px;
}

.form-group p.error {
    display: none;
    position: absolute;
    font-size: 12px;
    color: crimson;
    margin-top: 0;
    padding-left: 5px;
}

.form-group textarea~p.helper {
    transform: translateY(-4px);
}

.form-group textarea~p.error {
    transform: translateY(-4px);
}

/* .required.visited.error {
    color: crimson !important;
    visibility: visible !important;
}

.required.visited.error::before {
    font-family: 'Material Icons';
    content: "error_outline";
    color: crimson;
    pointer-events: none;
    display: inline-block;
    transform: translateY(10%);
    padding-right: 2px;
} */

.form-field {
    background-color: transparent;
    width: 100%;
    border: 0;
    outline: 0;
    border-bottom: 1px solid rgba(105, 105, 105, 0.5);
    font-size: 16px;
    color: var(--darkGrey);
    padding: 5px;
    box-sizing: border-box;
}

.form-field:hover {
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--action), transparent 80%);
    border-bottom: 1px solid color-mix(in srgb, var(--action), transparent 80%);
}

.form-field:hover~.form-label {
    color: var(--action);
}

.form-field::placeholder {
    color: transparent;
}

.form-field:placeholder-shown~.form-label,
select:invalid~.form-label {
    cursor: text;
    font-size: 16px;
    top: 20px;
    left: 5px;
    pointer-events: none;
}

.form-label,
.form-field:focus~.form-label {
    position: absolute;
    top: 0px;
    left: 5px;
    display: flex;
    font-size: 12px;
    color: #9b9b9b;
}

.form-field:focus~.form-label {
    color: var(--action);
}

.form-field:focus {
    padding-bottom: 4px;
    border-bottom: 2px solid var(--action);
}

select option {
    color: black;
    background-color: white;
    border-radius: 100px;
}

select:valid {
    color: black;
}

select:invalid {
    color: gray;
}

select {
    outline: none;
    border: none;
    font-size: 16px;
    padding: 4px 6px;
    height: 30px;
}

textarea {
    resize: none;
}

.checkbox-wrapper {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    line-height: 24px !important;
    margin: 4px 0 !important;
    cursor: pointer;
}

.checkbox-wrapper input[type=checkbox],
.checkbox-wrapper input[type=radio] {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.checkbox-wrapper input:checked~.checkradiocircle {
    opacity: 1;
}

.checkbox-wrapper input:checked~.unchecked {
    display: none;
}

.checkbox-wrapper input:checked~.checked {
    display: inline;
    color: var(--action) !important;
}

.checkbox-wrapper input:checked~.label {
    font-weight: 500;
    color: var(--action) !important;
}

.checkbox-wrapper:hover input:checked~.label {
    font-weight: 500;
    color: var(--action) !important;
}

.checkbox-wrapper[data-checked=checked]~.extras {
    display: flex;
}

.checkbox-wrapper input:checked:hover~.checked {
    color: var(--action) !important;
}

.unchecked {
    cursor: pointer;
    color: var(--silver);
    padding: 0;
    border-radius: 50px;
    margin-right: 3px;
    height: 24px;
}

.checked {
    cursor: pointer;
    display: none;
    color: var(--action);
    padding: 0;
    border-radius: 50px;
    margin-right: 3px;
    height: 24px;
}

.checked::before,
.unchecked::before {
    font-size: 24px;
}

.checkbox-wrapper span.toggle {
    cursor: pointer;
    color: var(--silver);
    padding: 0 5px;
    font-size: 32px;
}

.checkbox-wrapper span.toggle:hover {
    color: var(--action);
}

.checkbox-wrapper input~span.toggle.off,
.checkbox-wrapper input:checked~span.toggle.on {
    display: inline;
}

.checkbox-wrapper input~span.toggle.on,
.checkbox-wrapper input:checked~span.toggle.off {
    display: none;
}

/* Kód */
pre {
    font-family: monospace !important;
}

/* Kördiagram */

.piechart,
.piechart * {
    box-sizing: content-box;
    transition: none;
}

@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.piechart {
    --p: 70;
    --b: 10px;
    --c2: var(--defBlue);
    --c1: var(--defBlue);
    --w: 100px;

    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    margin: 5px;
    place-content: center;
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
}

.piechart:before,
.piechart:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.piechart:before {
    inset: 0;
    background:
        radial-gradient(farthest-side, var(--c1) 98%, #0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--c1) 0%, var(--c2) calc(var(--p)*1%), #0000 calc(var(--p)*1%), #0000 calc(var(--p)*1%));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.piechart:after {
    inset: calc(50% - var(--b)/2);
    background: var(--c2);
    transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(var(--w)/-2 + 50%));
}

.piechart.animate {
    animation: pie-animation 1s .5s both;
}

.piechart.no-round:before {
    background-size: 0 0, auto;
}

.piechart.no-round:after {
    content: none;
}

@keyframes pie-animation {
    from {
        --p: 0
    }
}