/*
.text-color-{color}-{level}
.bg-color-{color}-{level}
*/

.bg-color-primary-900 {
    background-color: var(--color-neutral-900);
}

.bg-color-secondary-900 {
    background-color: var(--color-secondary-900);
}

.bg-color-neutral-900 {
    background-color: var(--color-neutral-900);
}

.bg-color-text-primary {
    background-color: var(--color-text-primary);
}

.bg-color-text-secondary {
    background-color: var(--color-text-secondary);
}

.bg-color-text-white {
    background-color: white;
}

.text-color-primary-900 {
    color: var(--color-neutral-900);
}

.text-color-secondary-900 {
    color: var(--color-secondary-900);
}

.text-color-neutral-900 {
    color: var(--color-neutral-900);
}

.text-color-text-primary {
    color: var(--color-text-primary);
}

.text-color-text-secondary {
    color: var(--color-text-secondary);
}

.text-color-text-white {
    color: white;
}/*
Typo skála
https://material.io/design/typography/the-type-system.html#type-scale
*/

.fs-headline1 {
    font-size: var(--fs-headline1);
    letter-spacing: -1.5px;
}

.fs-headline2 {
    font-size: var(--fs-headline2);
    letter-spacing: -.5px;
}

.fs-headline3 {
    font-size: var(--fs-headline3);
}

.fs-headline4 {
    font-size: var(--fs-headline4);
    letter-spacing: .25px;
}

.fs-headline5 {
    font-size: var(--fs-headline5);
}

.fs-headline6 {
    font-size: var(--fs-headline6);
    letter-spacing: .15px;
}

.fs-body1 {
    font-size: var(--fs-body1);
    
}

.fs-body2 {
    font-size: var(--fs-body2);
    
}

.fs-subtitle1 {
    font-size: var(--fs-subtitle1);
    letter-spacing: .15px;
}

.fs-subtitle2 {
    font-size: var(--fs-subtitle2);
    letter-spacing: .1px;
}

.fs-button {
    font-size: var(--fs-button);
    letter-spacing: 1.25px;
}

.fs-overline {
    font-size: var(--fs-overline);
    letter-spacing: .4px;
}

.fs-caption {
    font-size: var(--fs-caption);
    letter-spacing: .4px;
    line-height: 130%;
}
.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}.lh-100 {
    line-height: 100%;
}

.lh-110 {
    line-height: 110%;
}

.lh-120 {
    line-height: 120%;
}

.lh-130 {
    line-height: 130%;
}

.lh-140 {
    line-height: 140%;
}

.lh-150 {
    line-height: 150%;
}

.lh-160 {
    line-height: 160%;
}

.lh-170 {
    line-height: 170%;
}/*
Bootstrap méretezés bootstrap szintaxissal
https://getbootstrap.com/docs/5.2/utilities/spacing/#margin-and-padding
(t)op, (b)ottom, (s)tart, (e)nd, (x)-axis, (y)-axis,
0 – 0, 1 – 0.25rem, 2 – 0.5rem, 3 - 1rem, 4 - 1.5rem, 5 - 2rem, auto
*/

.m-0 {
    margin: 0;
}

.m-1 {
    margin: .25rem;
}

.m-2 {
    margin: .5rem;
}

.m-3 {
    margin: 1rem;
}

.m-4 {
    margin: 1.5rem;
}

.m-5 {
    margin: 3rem;
}


.mt-auto {
    margin-top: auto;
}

.mt-0 {
    margin-top: 0;
}

.mt-1px {
    margin-top: 1px;
}

.mt-1 {
    margin-top: .25rem;
}

.mt-2 {
    margin-top: .5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mt-5 {
    margin-top: 3rem;
}


.mb-auto {
    margin-bottom: auto;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: .25rem;
}

.mb-2 {
    margin-bottom: .5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}


.ms-auto {
    margin-left: auto;
}


.me-auto {
    margin-right: auto;
}/*
Padding méretezés bootstrap szintaxissal
https://getbootstrap.com/docs/5.2/utilities/spacing/#margin-and-padding
(t)op, (b)ottom, (s)tart, (e)nd, (x)-axis, (y)-axis,
0 – 0, 1 – 0.25rem, 2 – 0.5rem, 3 - 1rem, 4 - 1.5rem, 5 - 2rem, auto
*/

.p-0 {
    padding: 0;
}

.p-1 {
    padding: .25rem;
}

.p-2 {
    padding: .5rem;
}

.p-3 {
    padding: 1rem;
}

.p-4 {
    padding: 1.5rem;
}

.p-5 {
    padding: 3rem;
}


.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-1 {
    padding-left: .25rem;
    padding-right: .25rem;
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem;
}

.px-3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-4 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-5 {
    padding-left: 3rem;
    padding-right: 3rem;
}


.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

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

.py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}



.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: .25rem;
}

.pt-2 {
    padding-top: .5rem;
}

.pt-3 {
    padding-top: 1rem;
}

.pt-4 {
    padding-top: 1.5rem;
}

.pt-5 {
    padding-top: 3rem;
}


.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: .25rem;
}

.pb-2 {
    padding-bottom: .5rem;
}

.pb-3 {
    padding-bottom: 1rem;
}

.pb-4 {
    padding-bottom: 1.5rem;
}

.pb-5 {
    padding-bottom: 3rem;
}
.scrollbar--hidden {
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

.scrollbar--hidden::-webkit-scrollbar {
    display: none; 
}/*
(x)-axis, (y)-axis,
0 – 0, 1 – 0.25rem, 2 – 0.5rem, 3 - 1rem, 4 - 1.5rem, 5 - 2rem, auto
*/
.stack-y-0 {
    display: flex;
    flex-direction: column;
}

.stack-y-1 {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.stack-y-2 {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.stack-y-3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stack-x-0 {
    display: flex;
    flex-direction: row;
}

.stack-x-1 {
    display: flex;
    flex-direction: row;
    gap: .25rem;
}

.stack-x-2 {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.stack-x-3 {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}


.stack-align--start {
    align-items: start;
}

.stack-align--center {
    align-items: center;
}

.stack-align--end {
    align-items: end;
}


.stack-justify--center {
    justify-content: center;
}
.text-start {
    text-align: right;
}

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

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

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


.text-wrap {
    white-space: normal;
}

.text-nowrap {
    white-space: nowrap;
}

.text-break {
    
    word-wrap: break-word;
    word-break: break-word;
}


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

.text-underline {
    text-decoration: underline;
}