/*layout*/
.font-small {
    font-size: 14px !important;
}

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

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

p.font-large {
    font-size: 1.3em;
}

.p-10 {
    padding: 20px;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px;
}

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

.pt-20 {
    padding-top: 20px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-40 {
    padding-bottom: 40px !important;
}

.pb-50 {
    padding-bottom: 50px !important;
}

.pr-15 {
    padding-right: 20px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-23 {
    padding-right: 30px;
}

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

.pb-0 {
    padding-bottom: 0px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

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

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

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

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-30 {
    padding-left: 30px;
}

.pr-30 {
    padding-right: 30px;
}

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

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

.ml-0 {
    margin-left: 0px !important;
}

.mt-0 {
    margin-top: 0px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mt-60 {
    margin-top: 60px !important;
}

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

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

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

.flex {
    display: flex;
}

.column {
    flex-direction: column;
}

.remove-margin * {
    margin: 0px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

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

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

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

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

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

.justify-sb,
.space-between {
    justify-content: space-between;
    display: flex;
}

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

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-40 {
    gap: 40px;
}

.gap-50 {
    gap: 50px;
}

.gap-60 {
    gap: 60px;
}

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

.center-children > * {
    text-align: center !important;
}

h4 + ul,
h3 + ul,
ul > li > ul {
    margin: 0px;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

h2 + p {
    margin-top: 15px;
}

/*
h3 + p,
h4 + p {
    margin-top: 0px !important;
}
*/

h2 + h3 {
    margin-top: 10px !important;
}

hr + h2 {
    margin-top: 25px !important;
}

.body {
    padding-top: 0px;
    padding-bottom: 0px;
}

.h-100 {
    height: 100%;
}

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

.maxW-600 {
    max-width: 600px !important;
}

.maxW-900 {
    max-width: 900px;
}

.maxW-950 {
    max-width: 950px;
}

.maxW-1000 {
    max-width: 1000px;
}

.maxW {
    max-width: 100% !important;
}

.w100 {
    width: 100% !important;
}

.m-auto,
.mx-auto {
    margin: 0 auto;
}

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

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

.pageWrapper__inner > div:first-child > figure:first-child {
    margin-top: 15px;
}

.mobile-hide {
    display: block;
}

.mobile-show {
    display: none;
}

@media screen and (max-width: 600px) {
    .mobile-hide {
        display: none;
    }

    .mobile-show {
        display: block;
    }

    .row,
    .flex-mobile {
        flex-direction: column;
    }

    .row-nostack {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .mobile-nogap {
        gap: 0px;
    }

    .mobile-gap-20 {
        gap: 20px;

        .twoColumnMatrixBlock {
            gap: 20px;
        }
    }

    .mobile-d-none {
        display: none;
    }

    .pl-0-mobile {
        padding-left: 0px;
    }

    .pt-20-mobile {
        padding-top: 20px;
    }

    .pl-20-mobile {
        padding-left: 20px;
    }

    .pl-40-mobile {
        padding-left: 40px;
    }

    .mt-0-mobile {
        margin-top: 0px !important;
    }

    .mt-10-mobile {
        margin-top: 10px !important;
    }

    .mt-20-mobile {
        margin-top: 20px !important;
    }

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

    .mx-auto-mobile {
        margin: 0 auto;
    }

    .m-mobile-auto,
    .mx-mobile-auto {
        margin: 0 auto;
    }

    .mobile-column-reverse .twoColumnMatrixBlock,
    .mobile-column-reverse {
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 785px) {
    .md-flex-column {
        flex-direction: column;
        gap: 0px;

        .verticalDivider {
            display: none;
        }
    }

    .mt-0-mobile {
        margin-top: 0px !important;
    }
}

@media screen and (max-width: 1024px) {
    .lg-flex-column {
        flex-direction: column;
        gap: 0px;

        .verticalDivider {
            display: none;
        }
    }
}

.box-20 {
    width: 19%;
    max-width: 19%;
    flex-grow: 1;
}

.box-25 {
    width: 20%;
    max-width: 24%;
    flex-grow: 1;
}

.box-33 {
    width: 31%;
    max-width: 31%;
    flex-grow: 1;
}

.box-40 {
    flex: 1 1 40%;
}

.box-50 {
    flex: 1 1 42%;
}

.box-60 {
    flex: 1 1 58%;
}

.box-66 {
    flex: 1 1 66%;
}

.box-75 {
    flex: 1 1 74%;
}

:is(.box-50, .box-33, .box-20, .box-66, .box-75) > :is(h1, h2, h3, h4, h4):first-child {
    margin-top: 0px;
}

.br {
    border-right: solid 1px var(--hr);
    padding-right: 15px;
}

@media screen and (max-width: 992px) {
    .box-20,
    .box-25,
    .box-33,
    .box-50 {
        width: 47%;
        max-width: 47%;
    }

    .br:nth-child(even) {
        border-right: none;
    }

    .br:nth-child(odd) {
        border-right: solid 1px var(--hr);
    }
}

@media screen and (max-width: 768px) {
    .box-20,
    .box-25,
    .box-33,
    .box-50 {
        width: 100%;
        max-width: 100%;
    }

    .br,
    .br:nth-child(even),
    .br:nth-child(odd) {
        border-right: none;
    }
}

@media screen and (max-width: 576px) {
    .box-20,
    .box-33,
    .box-50 {
        width: 100%;
        max-width: 100%;
    }

    .br,
    .br:nth-child(even),
    .br:nth-child(odd) {
        border-right: none;
    }
}

span.break {
    display: inline;
}

span.break:before {
    content: "\a";
    white-space: pre;
}

@media screen and (max-width: 576px) {
    span.break:before {
        content: "";
        white-space: normal;
    }

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

    .mobile-m-0 {
        margin: 0px !important;
    }
}

.rounded-corners > img,
.rounded-corners {
    border-radius: 20px;
}

.box-shadow {
    box-shadow: 2px 2px 8px rgba(80, 80, 80, 0.4);
}

.border-right {
    border-right: solid 1px #333;
    padding-right: 15px;
}

@media screen and (max-width: 992px) {
    .border-right {
        border-right: none;
        padding-right: 0px;
    }
}

.newActive {
    display: none;
}

.table--ScrollWrapper > .grid {
    min-width: 600px;
}

.grid {
    display: grid;
}

.grid-border > div {
    border-right: solid 1px black;
    border-bottom: solid 1px black;
}

.grid-border > div:first-child {
    border-top: solid 1px black;
    border-left: solid 1px black;
}

.grid > div > p:first-child {
    margin-top: 0px;
}

.grid-2-col {
    grid-template-columns: 1fr 1fr;

    &.grid-border > div:nth-child(2) {
        border-top: solid 1px black;
    }

    &.grid-border > div:nth-child(odd) {
        border-left: solid 1px black;
    }
}

@media screen and (max-width: 992px) {
    .grid-mobile-stack {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 576px) {
    .grid-mobile-stack {
        grid-template-columns: 1fr;
    }
}

.wideHeader {
    margin-top: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;

    > div {
        max-width: 1200px;
        margin: 15px auto;
    }
}

@media screen and (max-width: 768px) {
    .section-banner {
        background-position: calc(50% - 155px) center !important;
    }
}

@media screen and (max-width: 576px) {
    .section-banner {
        background-position: calc(50% - 73px) center !important;
    }
}

@media screen and (max-width: 831px) {
    .pl-0-stacked {
        padding-left: 0 !important;
    }

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

.anchor-target {
    scroll-margin-top: 115px;
}

/*component specific*/
/*row component*/
.row-4-col > div > div:first-child {
    flex-wrap: wrap;
}

.col-6-4 {
    .box-0 {
        flex: 1 1 60%;
    }

    .box-1 {
        flex: 1 1 40%;
    }
}

/*Wrapper*/
.wrapperMatrixBlock.flex > div > div:first-child {
    display: flex;
}

.wrapperMatrixBlock.align-center > div > div {
    display: flex;
    align-items: center;
}

.wrapperMatrixBlock.justify-center > div > div {
    display: flex;
    justify-content: center;
}

.wrapperMatrixBlock.col-auto {
    .box-0 {
        flex: 0 0 auto;
    }

    .box-1 {
        flex: 0 0 auto;
    }
}

.wrapperMatrixBlock.col-3-1 {
    .box-0 {
        flex: 1 1 75%;
    }

    .box-1 {
        flex: 1 1 25%;
    }
}

.wrapperMatrixBlock.col-2-1 {
    .box-0 {
        flex: 1 1 66%;
        //border: solid 1px red;
    }

    .box-1 {
        flex: 1 1 33%;
        //border: solid 1px green;
    }
}

.wrapperMatrixBlock.col-1-2 {
    .box-0 {
        flex: 1 1 33%;
        //border: solid 1px red;
    }

    .box-1 {
        flex: 1 1 66%;
        //border: solid 1px green;
    }
}

@media screen and (max-width: 600px) {
    .wrapperMatrixBlock.flex > div > div:first-child {
        flex-direction: column;
    }

    .wrapperMatrixBlock.mobile-gap-20 > div > div:first-child {
        gap: 20px;
    }
}

.box1-flex-grow-2 .box-1 {
    flex-grow: 2;
}