@font-face {
    src: url("/fonts/inter/Inter-VariableFont_opsz,wght.ttf") format("woff2 supports variations");
    font-family: 'Inter';
    font-weight: 100 1000;
}

:root {
    --liwe3-main-font-family: Inter, sans-serif !important;
    --liwe3-font-family: Inter, sans-serif !important;
    --liwe3-secondary-font-family: Inter, sans-serif !important;

    --liwe3-contenttab-btn-border: none;
    --liwe3-contenttab-btn-active-bg: none;
    --liwe3-contenttab-btn-bg: transparent;
    --liwe3-contenttab-btn-hover-bg: transparent;
    --liwe3-contenttab-btn-active-bg: transparent;
    --liwe3-contenttab-btn-hover-color: var(--liwe3-mode4-500);
}

body {
    /*background-color: var(--liwe3-background);*/
    background-color: #DFB8D7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23d7b7e1' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23c4b7e3' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23b6bde5' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23b6d3e7' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23B5E9E7' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23c4edec' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23d3f2f1' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23e1f6f5' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23f0fbfa' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFFFFF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23e1e1b7' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23e3c7b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23e5cdb6' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23e7d3b6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23E9D5B5' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ecdcc4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23f2e7d3' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23f6e1e1' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fbf0f0' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF5E1' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");*/
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    scrollbar-width: thin;
    scrollbar-color: var(--liwe3-accent-color) var(--liwe3-paper);
}

.planet-main-container {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.planet-datagrid {
    width: 100%;
    background-color: var(--liwe3-background);
    border-radius: var(--liwe3-border-radius);

    --liwe3-datagrid-container-border: none;
    --liwe3-datagrid-td-border-color: none;
    --liwe3-datagrid-header-bg: var(--liwe3-mode1-500);
    --liwe3-datagrid-head-bg: var(--liwe3-background);
    --liwe3-datagrid-footer-bg: var(--liwe3-background);
    --liwe3-datagrid-title-bg: var(--liwe3-background);
    --liwe3-datagrid-tr-even-bg: var(--liwe3-background);
    --liwe3-datagrid-th-resizer-bg: var(--liwe3-mode1-600);
    --liwe3-datagrid-tr-hover: var(--liwe3-mode4-100);

    --liwe3-paginator-text-size: .8rem;
    --liwe3-paginator-text-weight: 900;
}

.planet-datagrid.front {
    --liwe3-datagrid-header-bg: var(--liwe3-background);
    --liwe3-datagrid-head-bg: var(--liwe3-background);
    --liwe3-datagrid-th-resizer-bg: var(--liwe3-mode1-400);
}

/* toolbar */
.toolbar-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 1rem;
}

.toolbar-list li {
    display: inline-block;
}

.toolbar-list a {
    position: relative;
    color: var(--liwe3-color);
}

.toolbar-list a:hover {
    color: var(--liwe3-mode4-800);
    text-decoration: none;
}

.liwe3-form-container {
    background-color: var(--liwe3-form-bg) !important;
    color: var(--liwe3-form-text-color) !important;
    /*
  --liwe3-form-accent: var(--liwe3-dark-mode4);
  --liwe3-form-accent-color: var(--liwe3-dark-mode4-700);
  --liwe3-form-focus-bg: var(--liwe3-dark-mode3-500-hover);
  --liwe3-form-error: var(--liwe3-dark-error-500);
  */
    border-color: var(--liwe3-form-border-color) !important;
}

@media (max-width: 768px) {
    .planet-page-container {
        display: contents;
    }
}

/* tabs */
.liwe3-tabs>.container>.tabs-buttons {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--liwe3-background-700) var(--liwe3-background-500);
}

.liwe3-tabs>.container>.tabs-buttons>.tab-label {
    background-color: var(--liwe3-paper) !important;
}

.liwe3-tabs>.container>.tabs-buttons>.tab-label.active {
    background-color: var(--liwe3-lighter-primary-color) !important;
}

/* Content Tabs */

.planet-content-tabs {
    padding-bottom: 1.9rem;
    border-bottom: 1px solid var(--liwe3-accent-color) !important;
    .tab {
        font-size: 1.3rem !important;
    }
}

.planet-contenb

/* form interfaces */

.planet-ui-container {
    margin: 1rem 0px;
}

.planet-ui-container .content {
    padding: 0.5rem;
    padding-bottom: 1rem;
    background-color: var(--liwe3-paper);
}

.planet-ui-container .content h4 {
    padding-bottom: 1rem;
}

.form .simple-row label,
.custom-select .label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    font-size: 0.6rem;
    margin: var(--liwe3-input-w-unit) 0;
    user-select: none;
}

.planet-clear-button {
    background: none;
    border: none;
    color: inherit;
}

.input-container label {
    font-size: inherit !important;
}

.insta-comments-cnt .liwe3-form:is(textarea) {
    background-color: var(--liwe3-background) !important;
    border: 1px solid var(--liwe3-color) !important;
}

.insta-comments-cnt .liwe3-form:is(textarea)::placeholder {
    color: var(--liwe3-mode4-500) !important;
}

/* rise z-index to Google Places suggestions div so to be visibile when using it in a Modal */
.pac-container {
    z-index: 10000 !important;
}

/** BACKEND CUSTOM STYLES **/
.planet-page-header {
    margin-bottom: .5rem;
}

.planet-page-header h1 {
    font-size: 1.7rem;
    margin: 1rem .5rem;
}

/** FRONTEND CUSTOM STYLES **/

h2 {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    line-height: 1.4rem !important;
    padding: 0 .5rem;
}

#upload .container {
    padding: 1rem !important;
}

#upload .upload-area {
    border: none !important;
}

/* Base styles for the grid container */
.planet-frontend {
    display: grid;
    grid-template-areas:
        /*"header"*/
        "content"
        "footer";
    grid-template-columns: 1fr;
    gap: 0.3rem;
    width: fit-content;

    padding-left: 0 !important;
    padding-right: 0 !important;

    --liwe3-contenttab-btn-hover-color: var(--liwe3-mode4-500);
}

.share {
    .planet-frontend {
        grid-template-areas:
            /*"header"*/
            "content"
            "footer";
        grid-template-columns: 1fr;
        width: 100%;
    }

    .content {
        max-width: 960px;
    }

    .sidebar {
        display: none;
    }
}

.planet-frontend.webapp {
    max-width: 1024px;
    height: 100vh;
}

/* Style individual grid items */
/*
.header {
    display: none;
    grid-area: header;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 3.5rem;
    z-index: 20;
    background-color: var(--liwe3-background);
}
*/
.content {
    grid-area: content;
}

.content.full {
    margin-bottom: 0;
}

.footer {
    grid-area: footer;
}

.sidebar {
    grid-area: sidebar;
    position: relative;
    margin-top: 1rem;
    padding-right: 4px;
    width: clamp(90px, 20vw, 330px);
    /*border-right: 1px solid var(--liwe3-form-border-color);*/
    display: none;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 700;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    border-top: 1px solid var(--liwe3-form-border-color);
    background-color: var(--liwe3-background);
}

.planet-sidepanel {
    background-color: var(--liwe3-background);
    border-left: 1px solid var(--liwe3-form-border-color);
}

/* Mobile screens */
@media (max-width: 709px) {
    .planet-frontend {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .content {
        padding-bottom: 3rem;
    }

    .sidebar {
        display: none;
    }
}

/* Tablet and larger screens */
@media (min-width: 710px) {
    .planet-frontend {
        grid-template-areas:
            /*"header header"*/
            "sidebar content"
            "footer footer";
        grid-template-columns: 200px 500px;
    }

    .sidebar {
        display: grid;
    }

    .content {
        margin-top: 1rem;
    }

    .footer {
        display: none;
    }
}

/* Desktop screens */
@media (min-width: 1024px) {
    .planet-frontend {
        grid-template-columns: minmax(250px, 330px) minmax(600px, 960px);
        /*grid-template-columns: 960px;*/
    }

    .footer {
        display: none;
    }
}

.planet-content-cnt-max-size {
    width: 100% !important;
    max-width: 960px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.planet-auto-height {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative;
    padding: 0 !important;
    background-color: var(--liwe3-background);
    border-radius: var(--liwe3-border-radius);
}

.planet-auto-height>* {
    flex: 1;
    width: 100%;
}

.planet-gradient-button {
    color: #F2F2F2 !important;
    font-weight: 600;
    width: 100%;
    max-width: 300px;
}

.planet-gradient-button:hover:not(:disabled) {
    filter: brightness(1.2);
    transform: scale(0.95);
}

.planet-spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.feed-filter-tabs-cnt {
    background-color: var(--liwe3-background);
    border-radius: var(--liwe3-border-radius);
    padding: 0.5rem 0;
    width: 100%;
}

/* tags */
.tags-list .tag {
    font-size: .8rem !important;
    padding: .3rem !important;
}

.tags-list .tag .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    font-weight: bold;
    background-color: var(--liwe3-accent-color);
    color: var(--liwe3-background);
    height: 100%;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

.planet-generic-container {
    background-color: var(--liwe3-background);
    border-radius: var(--liwe3-border-radius);
    padding: 1rem;
    margin: 0.5rem;
}

/* posts / pois */
.planet-post-page {
    border-radius: var(--liwe3-border-radius);
    background-color: var(--liwe3-background);
}

.planet-post-page .main-image img {
    border-radius: var(--liwe3-border-radius);
    padding: .5rem;
}

.planet-post-page h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 .5rem;
    margin-top: 1.3rem;
    word-wrap: break-word;
}

.planet-post-page .post-source,
.planet-post-page .post-link,
.planet-post-page .post-body {
    padding: 1rem;
    white-space: pre-line;
}

.planet-post-page .url-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.planet-post-page .url-link a,
.planet-post-page .url-link a:visited,
.planet-post-page .url-link a:active {
    color: var(--liwe3-accent-color);
}

.planet-post-page .url-link a:hover {
    color: var(--liwe3-success-700);
}

.planet-post-page .insta-comments {
    display: flex;
    /* padding: 1rem; */
    width: 100%;
}

.planet-post-page #planet-post-show-desktop {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.planet-post-page #planet-post-show-desktop .aside,
.planet-post-page #planet-post-show-mobile .aside {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.planet-post-page #planet-post-show-mobile {
    display: none;
}

@media (max-width: 1023px) {
    .planet-post-page #planet-post-show-desktop {
        display: none;
    }

    .planet-post-page #planet-post-show-mobile {
        display: block;
    }
}

.feed-item-icons .menu-label {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
    font-size: 1.5rem;
    font-weight: 600;
}

/* profile posts grid */
.planet-postGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 5px;
    padding-bottom: 3rem;
}

.planet-postGrid .postGridItem {
    background: transparent;
    border: none;
    border-radius: var(--liwe3-border-radius);
    cursor: pointer;
    padding: 0;
    aspect-ratio: 1 / 1;
    position: relative;
    padding-bottom: 100%;
    padding-right: 100%;
}

.planet-postGrid .postGridItem img {
    border-radius: var(--liwe3-border-radius);
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.planet-postGrid .postGridItem:hover {
    filter: brightness(1.8);
}

/* profile events list */
.planet-eventList {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-bottom: 3rem;
}

.planet-eventList .eventListItem {
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-template-rows: 50% 15% 5% 30%;
    max-height: 12rem;
    background-color: transparent;
    border: none;
    text-align: left;
}

.planet-eventList .eventListItem:hover {
    filter: brightness(1.8);
}

.planet-eventList .eventListItem .dateSquare {
    grid-column: 1;
    grid-row: 1;
    width: 60px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--liwe3-mode4-500);
    margin: auto;
    color: var(--liwe3-background);
}

.planet-eventList .eventListItem .dateSquare .day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.planet-eventList .eventListItem .dateSquare .month {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
}


.planet-eventList .eventListItem .image {
    grid-column: 2;
    grid-row: 1;
    height: 70px;
}

.planet-eventList .eventListItem .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--liwe3-border-radius);
}

.planet-eventList .eventListItem .title {
    grid-column: 2;
    grid-row: 2;
    font-size: 1rem;
    font-weight: 600;
    padding-top: 0.5rem;
}

.planet-eventList .eventListItem .location {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.8rem;
    padding: 0.3rem;
}

.planet-eventList .eventListItem .body {
    grid-column: 2;
    grid-row: 4;
    font-size: 0.8rem;
    padding: 0.3rem;
}

/* sidebar */
.menu-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 100%;
    border-top: 1px solid var(--liwe3-accent-color);
    padding-top: 1rem;
}

.menu-list li {
    display: inline-block;
    width: 100%;
}

.menu-list li.active {
    color: var(--liwe3-mode2-100-hover);
    background-color: var(--liwe3-mode2-100);
}

.menu-list a {
    position: relative;
    color: var(--liwe3-color);
}

.menu-list a:hover {
    color: var(--liwe3-mode4-800);
    text-decoration: none;
}

.menu-list li button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    min-width: 100%;
    color: var(--liwe3-color);
    transition: all 0.4s ease-in-out;
}

.menu-list li button:hover {
    color: var(--liwe3-color-hover);
    background-color: var(--liwe3-background-700);
}

.menu-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: normal;
    gap: 1rem;
    width: 100%;
    height: 2.2rem;
    font-weight: 700;
}

/* footer menu */
.footer-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 100%;
}

.footer-list li {
    display: inline-block;
    min-width: 50px;
    height: 40px;
}

.footer-list a {
    position: relative;
    color: var(--liwe3-color);
}

.footer-list a:hover {
    color: var(--liwe3-mode4-800);
    text-decoration: none;
}

.footer-list li button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 50px;
    height: 40px;
    color: var(--liwe3-color);
    border-radius: var(--liwe3-border-radius);
    transition: all 0.4s ease-in-out;
}

.footer-list li button:hover {
    color: var(--liwe3-color-hover);
    background-color: var(--liwe3-background-700);
}

.footer-list li button.active,
.footer-list li button:active {
    fill: var(--liwe3-background);
    background-color: var(--liwe3-accent-color);
}

.footer-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: normal;
    gap: 1rem;
    width: 100%;
}

.planet-overlay-div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--liwe3-background);
    opacity: 0.8;
    z-index: 9999;
}

.modal,
.gradient-border {
    --border-width: calc(var(--liwe3-border-width) * 3);
    position: relative;
    border-radius: var(--liwe3-border-radius);
}

.modal::after,
.gradient-border::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(60deg,
            var(--liwe3-mode1-500),
            var(--liwe3-mode2-500),
            var(--liwe3-mode3-500),
            var(--liwe3-mode4-500),
            var(--liwe3-info-500),
            var(--liwe3-success-500),
            var(--liwe3-warning-500),
            var(--liwe3-error-500));
    background-size: 300% 300%;
    border-radius: var(--liwe3-border-radius);
    animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/** override MODAL styles **/
.modal .modal-header {
    font-size: 1.3rem;
    font-weight: 900;
    text-shadow: var(--liwe3-background) 2px 2px 1px;
    color: var(--liwe3-mode4-900);
    background-color: var(--liwe3-mode2-500) !important;
}

.modal .modal-body {
    padding: 0.5rem;
}

/** Google Map Markers **/

.liwe3-GMmarkers {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: fit-content;
    border-radius: var(--liwe3-border-radius);
    list-style: none;
    background-color: var(--liwe3-accent-color);
    transition: all .8s ease;
}

.liwe3-GMmarkers-icon-route,
.liwe3-GMmarkers-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 4px solid var(--liwe3-background) !important;
    color: var(--liwe3-background) !important;
    fill: var(--liwe3-background) !important;
    stroke: var(--liwe3-background) !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color .3s ease;
}

.liwe3-GMmarkers-icon-route {
    font-size: 1.2rem !important;
}

.liwe3-GMmarkers-icon-route:hover,
.liwe3-GMmarkers-icon:hover {
    background-color: var(--liwe3-mode2-500) !important;
    color: var(--liwe3-accent-color) !important;
    fill: var(--liwe3-accent-color) !important;
    stroke: var(--liwe3-accent-color) !important;
}

.liwe3-GMmarkers-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--liwe3-color);
    transition: color .3s ease;
}

.liwe3-GMmarkers-description {
    font-size: .8rem;
    padding: .5rem 0;
    color: var(--liwe3-color);
    border-bottom: 1px solid var(--liwe3-secondary-color);
    transition: color .3s ease;
}

.liwe3-GMmarkers-description h1 {
    font-size: 1rem;
    font-weight: 600;
}

.liwe3-GMmarkers-description h2,
.liwe3-GMmarkers-description h3 {
    font-size: .8rem;
    font-weight: 600;
}

.liwe3-GMmarkers-description p,
.liwe3-GMmarkers-description li {
    font-size: .8rem;
    font-weight: 400;
}

.liwe3-GMmarkers-address {
    padding: 0.5rem 0 1rem 0;
}

.liwe3-GMmarkers-address,
.liwe3-GMmarkers-address a,
.liwe3-GMmarkers-address p {
    font-size: .8rem;
    color: var(--liwe3-color);
    transition: color .3s ease;
}

.liwe3-GMmarkers-address a {
    color: var(--liwe3-link-color);
}

.liwe3-GMmarkers-address a:hover,
.liwe3-GMmarkers-address a:active,
.liwe3-GMmarkers-address a:focus,
.liwe3-GMmarkers-address a:visited {
    color: var(--liwe3-link-hover-color);
}

.liwe3-GMmarkers-details {
    display: none;
    width: 250px;
    height: 100%;
}

.planet-GMmarkers-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100% 100%;
    gap: .5rem;
    width: 250px;
}

.planet-GMmarkers-content {
    width: 100%;
    height: 100%;
}

.planet-GMmarkers-image {
    width: 100%;
    height: 100%;
    border-radius: var(--liwe3-border-radius);
}

.planet-GMmarkers-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.liwe3-GMmarkers-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    background-color: var(--liwe3-mode4);
    color: var(--liwe3-color);
    border-radius: var(--liwe3-border-radius);
}

/* Active Marker */

.marker-active {
    background-color: var(--liwe3-lighter-paper);
    width: 20rem !important;
    /*min-width: fit-content;*/
    border-radius: var(--liwe3-border-radius) !important;
    padding: .5rem !important;
}

.marker-active .liwe3-GMmarkers-icon {
    display: none !important;
}