The scroll on the cms that hold the body color of the app
.rt-template-body .content .scrollable::-webkit-scrollbar-thumb {
    background-color: #eaecf0;
    border-radius: 8px;
    border: 0px;
}

Below inherit changes the font colors on the core app as well
h2, h4, h5, h6, p {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}


BUTTON
.rt-button-widget {
    width: 100%;
    display: flex;
    justify-content: center;
}

IMAGE WIDGET

.rt-image-widget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}


LARGE IMAGE CAROUSEL: Widget, TitleContainer, button, ItemsContainer, ItemContainer, Image, textContainer, title,
.rt-large-image-carousel-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between flex-direction: row;
    overflow: hidden;
    gap: 48px;
    text-align: center width: 400px;
    width: 400px;
    line-height: 1;
}

.widget-title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
}

.widget-button {
    text-align: center;
}

.widget-items-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
    gap: 48px;
    width: 400px;
    width: 260px;
    line-height: 1;
    flex-direction: column;
    justify-content: space-between;
}

.widget-item-container {
    display: flex;
    flex-direction: column;
    width: 400px;
    width: 260px;
    overflow: hidden;
    line-height: 1;
    justify-content: space-between;
}

.widget-image {
    overflow: hidden;
    width: 260px;
    line-height: 1;
}

.widget-text-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


TEXT
.rt-text-editor {
    width: 100%;
    height: 100%;
}

TOP ITEM

.rt-top-story-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
}

Below is also used in other widgets
.widget-title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.widget-button {
    text-align: center;
}


.widget-image-ti {
    width: 100%;
    overflow: hidden;
}


LARGE COLLECTION

.rt-large-image-list-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    line-height: 1;
}

.widget-item-container-lc {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    line-height: 1;
}

.widget-image-lc {
    overflow: hidden;
    width: 100%;
    line-height: 1;
}

.widget-text-container-lc {
    display: flex;
    flex-direction: column;
}

    .widget-text-container-lc h4 {
        color: var(--app-theme-font-color) !important;
    }

.widget-text-container-lc-one h4 {
    color: var(--app-theme-font-color) !important;
}

SMALL CAROUSEL

Below is also used in other widgets
.rt-large-image-carousel-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    overflow: hidden;
    gap: 48px;
    width: 400px;
}

.widget-title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.widget-items-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
    gap: 48px;
    flex-direction: column;
    width: 400px;
}

.widget-item-container {
    display: flex;
    flex-direction: column;
    width: 400px;
}

.widget-text-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.widget-image-sc {
    overflow: hidden;
    line-height: 1;
}


SMALL COLLECTION/SINGLE COLUMN
.rt-small-image-list-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.widget-item-container-sc {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

Below is also used in other widgets
.widget-image-sc {
    overflow: hidden;
    line-height: 1;
}

.widget-text-container-sc {
    display: flex;
    flex-direction: column;
    flex: 1;
}


DOUBLE COLLECTION/TWOCOLOMN
.rt-two-image-list-widget {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.widget-row-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.widget-item-container-dc {
    display: flex;
    flex-direction: column;
    flex: 0.5;
}

.widget-image-dc {
    overflow: hidden;
    width: 100%;
    line-height: 1;
}

.widget-text-container-dc {
    display: flex;
    flex-direction: column;
}

SECTION CAROUSEL

.rt-section-carousel-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
}

Below is also used in other widgets
.widget-title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.widget-items-container-sc {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    width: 100%;
    height: 100%;
    gap: 48px;
}

.widget-item-container-scar {
    display: flex;
    flex-direction: column;
}

.widget-image-scar {
    overflow: hidden;
    width: 120px;
    height: 120px;
    line-height: 1;
}

.widget-text-container-scar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;