/*

We follow Chrome Devtools Media Query breakpoints: 

- Mobile S          smobile         0 to 320px       Ex: @media screen and (max-width:320px )  { mw-smobile--xyz   { ... } }
- Mobile M          mmobile         upto 375px       Ex: @media screen and (max-width:375px )  { mw-mmobile--xyz   { ... } }
- Mobile L          lmobile         upto 425px       Ex: @media screen and (max-width:425px )  { mw-lmobile--xyz   { ... } }
- Tablet            tab             upto 768px       Ex: @media screen and (max-width:768px )  { mw-tab--xyz       { ... } }
- Laptop            screen          upto 1024px      Ex: @media screen and (max-width:1024px ) { mw-screen--xyz    { ... } }
- Laptop L          lscreen         upto 1440px      Ex: @media screen and (max-width:1440px ) { mw-lscreen--xyz   { ... } }
- Laptop XL         xlscreen        upto 2560px      Ex: @media screen and (max-width:2560px ) { mw-xlscreen--xyz  { ... } }
- Laptop XXL        xxlscreen       2560px +         Ex: @media screen and (min-width:2560px ) { mw-xxlscreen--xyz { ... } }

*/




ul.default {
    list-style: inherit;
    margin-left: 32px !important;
    margin-bottom: 16px !important;
}

ul.default>li {
    margin-top: 8px !important;
}

.fs-12px {
    font-size: 12px;
}

.fs-14px {
    font-size: 14px !important;
}

.fs-16px {
    font-size: 16px !important;
}

.fs-20px {
    font-size: 20px !important;
}

.fs-24px {
    font-size: 24px;
}

.fs-32px {
    font-size: 32px;
}

.fs-40px {
    font-size: 40px;
}

.fw-normal {
    font-weight: normal !important;
}

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

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

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

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

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

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

.wmax-454px {
    max-width: 454px;
}

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

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

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

@media screen and (max-width: 600px) {
    .mw-600--text-center {
        text-align: center;
    }
}

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

@media screen and (max-width: 425px) {
    .mw-lmobile--text-left {
        text-align: left !important;
    }

}

.text-success {
    color: var(--green_a700) !important;
}

.text-black {
    color: black;
}

.text-green {
    color: rgb(0, 168, 0);
}

.text-red {
    color: red !important;
}

.text-light-purple {
    color: #F0D0FC !important;
}

.capitalize {
    text-transform: capitalize;
}

.underline {
    text-decoration: underline;
}

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

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

.pb-32px {
    padding-bottom: 32px;
}

.pb-48px {
    padding-bottom: 48px;
}

.pt-4px {
    padding-top: 4px;
}

.pt-8px {
    padding-top: 8px;
}

.pt-16px {
    padding-top: 16px;
}

.pt-48px {
    padding-top: 48px;
}

.ps-16px {
    padding-left: 16px;
}

.ps-32px {
    padding-left: 32px;
}

@media screen and (max-width: 1071.8px) {
    .mw-1072--ps-0 {
        padding-left: 0;
    }
}








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

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

.m-0 {
    margin: 0;
}

.m-4px {
    margin: 4px;
}

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

.me-4px {
    margin-right: 4px;
}

.me-8px {
    margin-right: 8px;
}

.ms-8px {
    margin-left: 8px;
}

.ms-16px {
    margin-left: 16px;
}

.ms-32px {
    margin-left: 32px;
}

.mb-8px {
    margin-bottom: 8px;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-8px {
    margin-top: 8px;
    margin-bottom: 8px;
}

.my-16px {
    margin-top: 16px;
    margin-bottom: 16px;
}

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

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


.my-24px {
    margin-top: 24px;
    margin-bottom: 24px;
}

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

.mb-24px {
    margin-bottom: 24px;
}


.my-32px {
    margin-top: 32px;
    margin-bottom: 32px;
}

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

.mb-32px {
    margin-bottom: 32px;
}

.my-40px {
    margin-top: 40px;
    margin-bottom: 40px;
}

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

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

.mt-56px {
    margin-top: 48px;
}

.mb-48px {
    margin-bottom: 48px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.p-0 {
    padding: 0 !important;
}
.p-8px {
    padding: 8px;
}
.p-16px {
    padding: 16px;
}

.py-8px {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.py-16px {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.py-32px {
    padding-top: 32px;
    padding-bottom: 32px;
}

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

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

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

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

.p-24px {
    padding: 24px;
}

.p-32px {
    padding: 32px;
}

.p-40px {
    padding: 40px;
}

.p-48px {
    padding: 48px;
}


.w-auto {
    width: auto !important;
}

.w-fit-content {
    width: fit-content;
}

.w-24px {
    width: 24px;
}

.w-48px {
    width: 48px;
}

.w-56px {
    width: 56px;
}

.w-72px {
    width: 72px;
}

.w-100 {
    width: 100%;
}

.h-16px {
    height: 16px;
}

.h-100 {
    height: 100%;
}

.w-100px {
    width: 100px;
}

.w-200px {
    width: 200px;
}

.w-250px {
    width: 250px !important;
}

.w-450px {
    width: 450px;
}

.w-655px {
    width: 655px;
}

.mw-655px {
    max-width: 655px;
}

.mw-700px {
    max-width: 700px;
}

.mw-1296px {
    max-width: 1296px;
}

.d-inline-block {
    display: inline-block;
}




.d-inline {
    display: inline;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

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

@media screen and (max-width: 425px) {
    .mw-lmobile--flex-column {
        flex-direction: column;
    }

}

.cc {
    justify-content: center;
}

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

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

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

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

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

.gap-8px {
    gap: 8px;
}

.gap-16px {
    gap: 16px;
}


.pointer {
    cursor: pointer;
}






.pos-fixed {
    position: fixed;
}

.pos-rel {
    position: relative;
}

.pos-abs {
    position: absolute;
}


.right-0 {
    right: 0
}

.top-0 {
    top: 0
}

.bottom-0 {
    bottom: 0
}


.b {
    border: 1px solid #ccc !important;
}

.bb-2px-ccc {
    border-bottom: 2px solid #ccc;
}

.bt {
    border-top: 1px solid #ccc;
}




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

.bg-light-gray {
    background-color: #F4F2F7;
}

.hover--bg-light-gray:hover {
    background-color: #F4F2F7;
}

.hover--bg-gray:hover {
    background-color: #ddd;
}

.bg-light-green {
    background-color: hsl(146, 94%, 80%) !important;
}

.hover--bg-light-green:hover {
    background-color: hsl(146, 94%, 80%) !important;
}

.bg-dark-purpe {
    background-color: #2A1843 !important;
}

.bg-light-red {
    background-color: #ffc6c6 !important;
}

.bg-cover {
    background-size: cover;
}

.bg-center {
    background-position: center center;
}


.filter-invert {
    filter: invert();
}

.hover--no-filter:hover {
    filter: none;
}


.br-8px {
    border-radius: 8px !important;
}


.flipped {
    transform: rotate(180deg);
}

.rotated45 {
    transform: rotate(45deg);
}


.visibility-hidden {
    visibility: hidden;
}




.float-start {
    float: left;
}

.float-end {
    float: right;
}

.clear {
    clear: both;
}

.muted {
    opacity: 0.5;
}
.o-8 {
    opacity: 0.8;
}


.lh-normal {
    line-height: normal;
}