/*************************************************/
/* GLOBAL */
/*************************************************/

*
{
    box-sizing:border-box;
}


html
{
    background:#333;
}


body
{
    margin:0;
    min-height:100vh;

    font-family:"Segoe UI",Arial,sans-serif;

    background:#333;

    color:var(--text-color);
}


/*************************************************/
/* A4 PAGE */
/*************************************************/

.a4-page
{
    width:794px;
    height:1123px;

    min-width:794px;
    min-height:1123px;

    max-width:794px;
    max-height:1123px;

    margin:40px auto;

    background:#fff;

    position:relative;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.35);

    overflow:visible;
}


/*************************************************/
/* A4 BULLETIN */
/*************************************************/

.a4-page .bulletin
{
    width:794px;
    height:1123px;

    min-width:794px;
    min-height:1123px;

    max-width:794px;
    max-height:1123px;

    display:flex;

    flex-direction:column;

    position:relative;

    overflow:visible;

    background:#f7f8f6;

    color:var(--text-color);
}


/*************************************************/
/* HEADER */
/*************************************************/

.bulletin-header
{
    position:relative;

    flex:0 0 104px;

    width:100%;
    height:104px;

    display:grid;

    grid-template-columns:
        165px
        minmax(0,1fr)
        82px;

    align-items:center;

    gap:16px;

    padding:6px 24px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--main-color-dark)
        );
}


/*************************************************/
/* HEADER LOGO */
/*************************************************/

.header-logo
{
    width:165px;
    height:88px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:4px;

    background:#fff;

    border-radius:12px;

    box-shadow:
        0 6px 16px
        rgba(0,0,0,.20);

    overflow:hidden;
}


.header-logo img
{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:80px;

    object-fit:contain;
}


/*************************************************/
/* HEADER CONTENT */
/*************************************************/

.header-content
{
    min-width:0;
}


.header-content h1
{
    margin:
        0
        0
        5px
        0;

    font-size:22px;

    line-height:1.50;

    font-weight:700;

    letter-spacing:.15px;

    color:#fff;
}


.header-content p
{
    margin:0;

    font-size:14px;

    line-height:1.6;

    color:
        rgba(255,255,255,.92);
}


/*************************************************/
/* HEADER QR */
/*************************************************/

.header-qr
{
    width:112px;
    height:112px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#fff;

    border-radius:10px;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.22);

    overflow:hidden;
}


.header-qr img
{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


/*************************************************/
/* MAIN */
/*************************************************/

.bulletin-main
{
    flex:1 1 auto;

    min-width:0;
    min-height:0;

    display:flex;

    flex-direction:column;

    overflow:visible;
}


/*************************************************/
/* SECTIONS */
/*************************************************/

.about-section,
.priorities-section,
.candidates-section
{
    width:100%;

    padding-left:28px;
    padding-right:28px;
}


/*************************************************/
/* SECTION HEADING */
/*************************************************/

.section-heading
{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;
}


/*************************************************/
/* SECTION NUMBER */
/*************************************************/

.section-number
{
    flex:0 0 36px;

    width:36px;
    height:36px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        var(--main-color);

    color:#fff;

    font-size:17px;

    font-weight:800;

    box-shadow:
        0 5px 12px
        rgba(0,0,0,.16);
}


.section-heading-content
{
    min-width:0;

    flex:1 1 auto;
}


.section-heading h2
{
    margin:0;

    font-size:24px;

    line-height:1.15;

    font-weight:800;

    color:var(--title-color);
}


.heading-line
{
    width:100%;

    height:3px;

    margin-top:7px;

    background:
        linear-gradient(
            90deg,
            var(--main-color),
            rgba(0,0,0,0)
        );
}


/*************************************************/
/* ABOUT SECTION */
/*************************************************/

.about-section
{
    flex:0 0 auto;

    padding:
        14px
        28px
        24px
        28px;
}


/*************************************************/
/* ABOUT CONTENT */
/*************************************************/

.about-content
{
    position:relative;

    width:100%;

    padding:
        14px
        28px
        20px
        28px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f9faf8 100%
        );

    border-radius:
        20px
        20px
        20px
        5px;

    border:
        1px solid
        rgba(0,0,0,.07);

    border-left:
        7px solid
        var(--main-color);

    box-shadow:
        0 14px 34px
        rgba(0,0,0,.12);

    overflow:hidden;
}


/*************************************************/
/* ABOUT TOP ACCENT */
/*************************************************/

.about-content::before
{
    content:"";

    position:absolute;

    top:0;
    left:42px;

    width:92px;
    height:6px;

    background:
        linear-gradient(
            90deg,
            var(--main-color),
            var(--main-color-dark)
        );

    border-radius:
        0 0 6px 6px;
}


/*************************************************/
/* ABOUT DECORATIVE BACKGROUND */
/*************************************************/

.about-content::after
{
    content:"";

    position:absolute;

    right:-48px;
    bottom:-60px;

    width:200px;
    height:200px;

    border:
        25px solid
        rgba(76,159,56,.055);

    border-radius:50%;

    pointer-events:none;
}


/*************************************************/
/* HEADER QR SECTION */
/*************************************************/

.header-qr-section
{
    flex:0 0 auto;

    padding:
        14px
        28px
        24px
        28px;

    display:flex;

    align-items:center;

    gap:32px;
}


/*************************************************/
/* HEADER QR */
/*************************************************/

.header-qr
{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:3px;
}


/*************************************************/
/* QR IMAGE */
/*************************************************/

.header-qr img
{
    display:block;

    width:96px;
    height:96px;

    object-fit:contain;

    background:#fff;

    border-radius:6px;
}


/*************************************************/
/* QR LABEL */
/*************************************************/

.header-qr span
{
    color:var(--title-color);

    font-size:10px;

    line-height:1.1;

    font-weight:700;

    text-align:center;

    white-space:nowrap;
}


/*************************************************/
/* ABOUT TEXT 1 */
/*************************************************/

.about-text1
{
    font-size:15px;

    line-height:1.68;

    font-weight:500;

    color:var(--title-color);

    letter-spacing:.05px;

    text-align:left;
}


/*************************************************/
/* ABOUT TEXT 2 */
/*************************************************/

.about-text2
{
    position:relative;

    z-index:1;

    margin:0;

    font-size:15px;

    line-height:1.68;

    font-weight:400;

    letter-spacing:.05px;

    color:var(--text-secondary);

    text-align:left;
}


/*************************************************/
/* ABOUT CONTENT CRITICAL */
/*************************************************/

.about-content-critical
{
    position:relative;

    width:100%;

    margin-top:22px;

    padding:
        26px
        34px
        26px
        40px;

    background:
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #faf9f4 100%
        );

    border-radius:
        18px
        18px
        18px
        5px;

    border:
        1px solid
        rgba(0,0,0,.08);

    border-left:
        7px solid
        var(--main-color);

    box-shadow:
        0 11px 26px
        rgba(0,0,0,.10);

    overflow:hidden;
}


/*************************************************/
/* ABOUT CRITICAL TOP ACCENT */
/*************************************************/

.about-content-critical::before
{
    content:"";

    position:absolute;

    top:0;
    left:40px;

    width:80px;
    height:5px;

    background:
        linear-gradient(
            90deg,
            var(--main-color),
            var(--main-color-dark)
        );

    border-radius:
        0 0 5px 5px;
}


/*************************************************/
/* ABOUT CRITICAL DECORATION */
/*************************************************/

.about-content-critical::after
{
    content:"";

    position:absolute;

    right:-45px;
    bottom:-55px;

    width:170px;
    height:170px;

    border:
        22px solid
        rgba(0,0,0,.035);

    border-radius:50%;

    pointer-events:none;
}


/*************************************************/
/* ABOUT CRITICAL TEXT */
/*************************************************/

.about-content-critical p
{
    position:relative;

    z-index:1;

    margin:0;

    font-size:15px;

    line-height:1.58;

    font-weight:500;

    color:var(--title-color);

    text-align:left;
}


/*************************************************/
/* PRIORITIES SECTION */
/*************************************************/

.priorities-section
{
    flex:1 1 auto;

    min-width:0;
    min-height:0;

    padding:
        14px
        28px
        24px
        28px;

    overflow:visible;

    display:flex;

    flex-direction:column;
}


/*************************************************/
/* PRIORITY GRID */
/*************************************************/

.priority-grid
{
    flex:1 1 auto;

    width:100%;

    min-width:0;
    min-height:0;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    grid-template-rows:
        repeat(3,minmax(0,1fr));

    gap:14px;

    padding:3px;

    overflow:visible;
}


/*************************************************/
/* PRIORITY CARD */
/*************************************************/

.priority-card
{
    position:relative;

    min-width:0;
    min-height:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:
        18px
        32px
        14px
        58px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafbf9 100%
        );

    border-radius:14px;

    border:
        1px solid
        rgba(0,0,0,.07);

    border-left:
        5px solid
        var(--main-color);

    box-shadow:
        0 6px 15px
        rgba(0,0,0,.12);

    overflow:visible;
}


/*************************************************/
/* PRIORITY TOP ACCENT */
/*************************************************/

.priority-card::before
{
    content:"";

    position:absolute;

    top:0;
    left:22px;

    width:48px;
    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--main-color),
            var(--main-color-dark)
        );

    border-radius:
        0 0 4px 4px;
}


/*************************************************/
/* PRIORITY INNER HIGHLIGHT */
/*************************************************/

.priority-card::after
{
    content:"";

    position:absolute;

    inset:0;

    border:
        1px solid
        rgba(255,255,255,.65);

    border-radius:13px;

    pointer-events:none;
}


/*************************************************/
/* PRIORITY ICON */
/*************************************************/

.priority-icon
{
    position:absolute;

    left:17px;
    top:18px;

    width:32px;
    height:32px;

    display:flex;

    align-items:center;
    justify-content:center;

    color:var(--main-color);

    font-size:27px;

    line-height:1;

    z-index:2;
}


/*************************************************/
/* PRIORITY NUMBER */
/*************************************************/

.priority-number
{
    position:absolute;

    top:16px;
    right:22px;

    color:var(--main-color);

    opacity:.20;

    font-size:25px;

    line-height:1;

    font-weight:800;

    z-index:1;
}


/*************************************************/
/* PRIORITY TITLE */
/*************************************************/

.priority-card h3
{
    position:relative;

    z-index:1;

    margin:
        0
        5px
        0
        0;

    font-size:15px;

    line-height:1.2;

    font-weight:800;

    color:var(--title-color);
}


/*************************************************/
/* PRIORITY TEXT */
/*************************************************/

.priority-card p
{
    position:relative;

    z-index:1;

    margin:0;

    font-size:12px;

    line-height:1.4;

    color:var(--text-color);
}


/*************************************************/
/* CANDIDATES SECTION */
/*************************************************/

.candidates-section
{
    flex:1 1 auto;

    min-width:0;
    min-height:0;

    padding:
        14px
        28px
        24px
        28px;

    display:flex;

    flex-direction:column;

    overflow:visible;
}


/*************************************************/
/* CANDIDATE GRID */
/*************************************************/

.candidate-grid
{
    flex:1 1 auto;

    min-width:0;
    min-height:0;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    grid-template-rows:
        repeat(5,minmax(0,1fr));

    gap:12px;

    padding:4px;

    overflow:visible;

    position:relative;

    z-index:1;
}


/*************************************************/
/* CANDIDATE CARD */
/*************************************************/

.candidate-card
{
    position:relative;

    min-width:0;
    min-height:0;

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:14px;

    border:
        1px solid
        rgba(0,0,0,.07);

    border-bottom:
        3px solid
        var(--main-color);

    overflow:hidden;

    box-shadow:
        0 5px 13px
        rgba(0,0,0,.14);

    z-index:1;
}


/*************************************************/
/* CARD HEADER */
/*************************************************/

.candidate-card::before
{
    content:"";

    display:block;

    flex:none;

    width:100%;
    height:38px;

    background:
        var(--main-color);

    border-radius:
        13px
        13px
        0
        0;

    box-shadow:
        inset 0 -1px 0
        rgba(0,0,0,.10);
}


/*************************************************/
/* CANDIDATE PHOTO */
/*************************************************/

.candidate-photo
{
    position:relative;

    flex:none;

    width:100%;
    height:82px;

    margin-top:0;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:visible;

    z-index:2;
}


/*************************************************/
/* CANDIDATE PHOTO IMAGE */
/*************************************************/

.candidate-photo img
{
    display:block;

    width:82px;
    height:82px;

    object-fit:cover;

    object-position:50% 50%;

    border-radius:50%;

    border:
        4px solid
        #fff;

    box-shadow:
        0 5px 12px
        rgba(0,0,0,.22);
}


/*************************************************/
/* CANDIDATE CONTENT */
/*************************************************/

.candidate-content
{
    flex:1 1 auto;

    min-width:0;
    min-height:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    overflow:hidden;
}


/*************************************************/
/* CANDIDATE NAME */
/*************************************************/

.candidate-content h3
{
    position:absolute;

    top:0;
    left:24px;
    right:24px;

    width:auto;
    height:38px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:0;
    padding:0;

    color:#fff;

    background:transparent;

    border:0;

    font-size:14px;

    line-height:1;

    font-weight:900;

    text-align:center;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.25);

    z-index:5;
}


/*************************************************/
/* CANDIDATE AGE */
/*************************************************/

.candidate-content h3 .candidate-age
{
    display:inline;

    width:auto;

    margin-left:5px;

    color:
        rgba(255,255,255,.82);

    font-size:12px;

    line-height:1;

    font-weight:600;

    white-space:nowrap;
}


/*************************************************/
/* CANDIDATE NUMBER */
/*************************************************/

.candidate-number
{
    position:absolute;

    top:3px;
    left:7px;

    width:32px;
    height:32px;

    display:flex;

    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    background:#fff;

    color:var(--main-color);

    border:
        3px solid
        var(--main-color);

    border-radius:50%;

    font-size:14px;

    font-weight:900;

    line-height:1;

    text-shadow:none;

    box-shadow:none;

    z-index:10;
}


/*************************************************/
/* CANDIDATE ROLE */
/*************************************************/

.candidate-role
{
    width:100%;

    margin:0;

    color:var(--main-color);

    font-size:12px;

    font-weight:700;

    line-height:1.4;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


/*************************************************/
/* CANDIDATE JOB */
/*************************************************/

.candidate-job
{
    width:100%;

    margin-top:3px;

    color:var(--text-secondary);

    font-size:12px;

    line-height:1.4;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


.candidate-job i
{
    font-size:10px;

    margin-right:2px;
}


/*************************************************/
/* CANDIDATE LOCATION */
/*************************************************/

.candidate-location
{
    width:100%;

    margin-top:3px;

    color:var(--text-secondary);

    font-size:8px;

    line-height:1.1;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


.candidate-location i
{
    font-size:8px;

    margin-right:2px;
}


/*************************************************/
/* NEWS SECTION */
/*************************************************/

.news-section
{
    background:#f5faf3;

    flex:0 0 auto;

    padding:
        14px
        28px
        24px
        28px;
}


/*************************************************/
/* NEWS GRID */
/*************************************************/

.news-section .row
{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:15px;

    margin:0;
}


.news-section .row > [class*="col-"]
{
    width:auto;

    max-width:none;

    padding:0;
}


/*************************************************/
/* NEWS CARD */
/*************************************************/

.news-card
{
    position:relative;

    min-width:0;
    min-height:148px;

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:15px;

    border:
        1px solid
        rgba(0,0,0,.07);

    border-top:
        4px solid
        var(--main-color);

    overflow:hidden;

    box-shadow:
        0 7px 17px
        rgba(0,0,0,.13);
}


/*************************************************/
/* NEWS DECORATIVE BACKGROUND */
/*************************************************/

.news-card::after
{
    content:"";

    position:absolute;

    width:105px;
    height:105px;

    right:-42px;
    bottom:-48px;

    border-radius:50%;

    background:
        rgba(78,145,61,.055);

    pointer-events:none;
}


/*************************************************/
/* NEWS ICON */
/*************************************************/

.news-icon
{
    position:absolute;

    top:14px;
    left:14px;

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            145deg,
            var(--main-color),
            var(--main-color-dark)
        );

    color:#fff;

    border-radius:50%;

    font-size:23px;

    box-shadow:
        0 4px 9px
        rgba(0,0,0,.22);

    z-index:3;
}


/*************************************************/
/* ICON INNER RING */
/*************************************************/

.news-icon::before
{
    content:"";

    position:absolute;

    inset:4px;

    border-radius:50%;

    border:
        1px solid
        rgba(255,255,255,.30);
}


.news-icon i
{
    position:relative;

    z-index:2;

    text-shadow:
        0 2px 3px
        rgba(0,0,0,.20);
}


/*************************************************/
/* NEWS CONTENT */
/*************************************************/

.news-card .p-4
{
    position:relative;

    z-index:2;

    flex:1 1 auto;

    display:flex;

    flex-direction:column;

    padding:
        14px
        15px
        11px
        74px !important;
}


/*************************************************/
/* NEWS TITLE */
/*************************************************/

.news-card h4
{
    margin:
        1px
        0
        5px;

    color:var(--title-color);

    font-size:14px;

    line-height:1.15;

    font-weight:900;
}


/*************************************************/
/* NEWS TEXT */
/*************************************************/

.news-card p
{
    margin:0;

    color:var(--text-color);

    font-size:12px;

    line-height:1.35;
}


/*************************************************/
/* NEWS LINK */
/*************************************************/

.news-card a
{
    margin-top:auto;

    padding-top:6px;

    color:var(--main-color);

    font-size:9px;

    line-height:1;

    font-weight:900;

    text-decoration:none;
}


.news-card a::after
{
    content:"  →";

    font-size:12px;
}


/*************************************************/
/* INDIVIDUAL CARD VARIATION */
/*************************************************/

.news-card:nth-child(1)
{
    border-top-color:#4f9f3d;
}


.news-card:nth-child(2)
{
    border-top-color:#70b844;
}


.news-card:nth-child(2) .news-icon
{
    background:
        linear-gradient(
            145deg,
            #70b844,
            #4f9635
        );
}


.news-card:nth-child(3)
{
    border-top-color:#3d8735;
}


.news-card:nth-child(3) .news-icon
{
    background:
        linear-gradient(
            145deg,
            #3d8735,
            #286b2c
        );
}


/*************************************************/
/* FOOTER */
/*************************************************/

.bulletin-footer
{
    flex:0 0 46px;

    width:100%;
    height:46px;

    display:grid;

    grid-template-columns:
        82px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:10px;

    padding:
        4px
        28px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--footer-color),
            var(--footer-color-dark)
        );
}


/*************************************************/
/* FOOTER LOGO */
/*************************************************/

.footer-logo
{
    width:76px;
    height:38px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#fff;

    border-radius:6px;

    overflow:hidden;
}


.footer-logo img
{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


/*************************************************/
/* FOOTER SOCIAL */
/*************************************************/

.footer-social
{
    min-width:0;

    display:flex;

    align-items:center;

    gap:6px;

    white-space:nowrap;

    font-size:11px;

    line-height:1.1;

    color:
        rgba(255,255,255,.95);
}


.footer-social strong
{
    font-size:12px;

    font-weight:700;
}


.footer-social span
{
    font-size:11px;

    font-weight:400;
}


.footer-social a
{
    color:#fff;

    text-decoration:none;

    font-size:8px;

    font-weight:400;
}


/*************************************************/
/* ELECTION BADGE */
/*************************************************/

.mesnice-election
{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:
        6px
        12px;

    border-radius:17px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--main-color-dark)
        );

    font-size:10px;

    line-height:1;

    font-weight:500;

    letter-spacing:.5px;

    white-space:nowrap;

    box-shadow:
        0 5px 12px
        rgba(0,0,0,.22);

    border:
        1px solid
        rgba(255,255,255,.18);
}


/*************************************************/
/* ACTION BUTTONS */
/*************************************************/

.bulletin-actions
{
    position:fixed;

    top:15px;
    right:15px;

    z-index:1000;

    display:flex;

    gap:8px;
}


.bulletin-actions button
{
    border:0;

    padding:
        9px
        14px;

    border-radius:9px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--main-color-dark)
        );

    font-family:inherit;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.25);
}


.bulletin-actions button:hover
{
    filter:brightness(1.05);
}


.bulletin-actions button:active
{
    transform:translateY(1px);
}


.bulletin-actions button:disabled
{
    opacity:.7;

    cursor:wait;
}

/*************************************************/
/* PAGE 4 - MAP */
/*************************************************/

#bulletinPage4
{
    width:794px;
    height:1123px;

    min-width:794px;
    min-height:1123px;

    max-width:794px;
    max-height:1123px;

    background:#fff;

    overflow:hidden;
}


#bulletinPage4 .bulletin-main
{
    width:100%;
    height:100%;

    flex:none;

    margin:0;
    padding:0;

    display:block;

    overflow:hidden;
}


#bulletinPage4 .map-section
{
    width:100%;
    height:100%;

    margin:0;
    padding:0;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;
}


#bulletinPage4 .map-section img
{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    object-fit:contain;
}


/*************************************************/
/* THEMES */
/*************************************************/

body.style-green
{
    --card-bg:#fff;

    --main-color:#4c9f38;
    --main-color-dark:#87c442;

    --title-color:#12345b;

    --text-color:#333;
    --text-secondary:#555;

    --footer-color:#4c9f38;
    --footer-color-dark:#87c442;
}


body.style-blue
{
    --card-bg:#fff;

    --main-color:#2878b8;
    --main-color-dark:#1d5f96;

    --title-color:#12345b;

    --text-color:#333;
    --text-secondary:#555;

    --footer-color:#2878b8;
    --footer-color-dark:#1d5f96;
}


body.style-nature
{
    --card-bg:#fff;

    --main-color:#5c8d3a;
    --main-color-dark:#416d27;

    --title-color:#304d25;

    --text-color:#333;
    --text-secondary:#555;

    --footer-color:#5c8d3a;
    --footer-color-dark:#416d27;
}


body.style-gold
{
    --card-bg:#fff;

    --main-color:#c28b25;
    --main-color-dark:#9d6d16;

    --title-color:#59410e;

    --text-color:#333;
    --text-secondary:#555;

    --footer-color:#c28b25;
    --footer-color-dark:#9d6d16;
}


body.style-stone
{
    --card-bg:#fff;

    --main-color:#777;
    --main-color-dark:#555;

    --title-color:#333;

    --text-color:#333;
    --text-secondary:#555;

    --footer-color:#777;
    --footer-color-dark:#555;
}