:root {
    /* https://coolors.co/4bac3f-009dff-fd6b17-ab3ac4-194e98-faae22-ff0800 */
    /* https://company-243664.frontify.com/d/t9NmMbpGM26f/guidelines#/basics/colors */
    /* azure */
    --color-azure: #009dff;
    --color-azure25: #eff7ff;
    --color-azure33: #ade0ff;
    --color-azure50: #85d0ff;
    --color-azure100: var(--color-azure);
    --color-azure150: #0065a3;
    /* green */
    --color-green: #4bac3f;
    --color-green25: #f1f9f0;
    --color-green33: #c8e9c3;
    --color-green50: #9ed897;
    --color-green100: var(--color-green);
    --color-green150: #2e6827;
    /* pumpkin */
    --color-pumpkin: #fd6b17;
    --color-pumpkin25: #fff2eb;
    --color-pumpkin33: #ffcaad;
    --color-pumpkin50: #febf9a;
    --color-pumpkin100: var(--color-pumpkin);
    --color-pumpkin150: #b64402;
    /* violet */
    --color-violet: #ab3ac4;
    --color-violet25: #f8effa;
    --color-violet33: #e4c0ec;
    --color-violet50: #d7a1e3;
    --color-violet100: var(--color-violet);
    --color-violet150: #6e267e;
    /* blue */
    --color-blue: #194e98;
    --color-blue25: #edf4fc;
    --color-blue33: #b9d4f3;
    --color-blue50: #508de2;
    --color-blue100: var(--color-blue);
    --color-blue150: #0b2446;
    /* honey */
    --color-honey: #faae22;
    --color-honey25: #fff8eb;
    --color-honey33: #ffe2ad;
    --color-honey50: #fddb9b;
    --color-honey100: var(--color-honey);
    --color-honey150: #b47604;
    /* red, traffic light stop color */
    --color-red: #ff0800;
    --color-red25: #ffebeb;
    --color-red33: #ffb0ad;
    --color-red50: #ff7570;
    --color-red100: var(--color-red);
    --color-red150: #a30500;
    /* hyper links */
    --color-link: var(--color-pumpkin);
    --color-link-hover: var(--color-violet);
    /* backgrounds */
    --color-bkg-grey: grey;
    --color-bkg-blue: var(--color-azure25);
}




.footer {
    background-image: url("/data/web/logo/senifit-logo-heart-blue.png"); /* The image used */
    background-color: var(--color-bkg-blue); /* Used if the image is unavailable */
    background-position: left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
}


/* basics */

body {
    font-family: 'Montserrat';
    font-family: 'nunito', sans-serif serif;
}

.title {
    font-family: 'Signika';
    font-family: 'nunito', sans-serif;
    font-weight: 800;
}

a {
    color: var(--color-link);
    font-weight: bold;
}

a.nobold {
    color: var(--color-link);
    font-weight: normal;
}

a:hover {
    color: var(--color-link-hover);
}


a.menu {
    color: var(--color-link) !important;
    font-weight: bold;
    font-size: 1.2rem;
}



.dot-link a {
    border-bottom: 1px dotted var(--color-link);
}


seni {
    color: var(--color-azure);
    font-weight: bold;
}


.seni-title {
    color: var(--color-azure);
    font-weight: bold;
    font-size: 1.75rem;
}

.seni-sub-title {
    color: var(--color-azure);
    font-weight: bold;
    font-size: 1.5rem;
}

/* colors */
/* https://www.color-hex.com/color-palette/99267 */
.color-azure {
    color: var(--color-azure);
}

.color-green {
    color: var(--color-green);
}

.color-pumpkin {
    color: var(--color-pumpkin);
}

.color-violet {
    color: var(--color-violet);
}

.color-blue {
    color: var(--color-blue);
}

.color-honey {
    color: var(--color-honey);
}



/* backgrounds */

.color-bkg-azure {
    background-color: var(--color-azure25);
}
.color-bkg-green {
    background-color: var(--color-green25);
}
.color-bkg-pumpkin {
    background-color: var(--color-pumpkin25);
}
.color-bkg-violet {
    background-color: var(--color-violet25);
}
.color-bkg-blue {
    background-color: var(--color-blue25);
}
.color-bkg-honey {
    background-color: var(--color-honey25);
}




/* buttons*/

.color-button-azure {
    background-color: var(--color-azure) !important;
    border-color: var(--color-azure) !important;
    color: white;
}

.color-button-green {
    background-color: var(--color-green) !important;
    border-color: var(--color-green) !important;
    color: white;
}

.color-button-pumpkin {
    background-color: var(--color-pumpkin) !important;
    border-color: var(--color-pumpkin) !important;
    color: white;
}

.color-button-violet {
    background-color: var(--color-violet) !important;
    border-color: var(--color-violet) !important;
    color: white;
}


.color-button-blue {
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
    color: white;
}


.color-button-honey {
    background-color: var(--color-honey) !important;
    border-color: var(--color-honey) !important;
    color: white;
}





/* homepage */

.hp-video 
{
    border-radius: 15px;
}



/* FAQ */

.faq-block {
    position: relative;
    padding: 2rem 4rem 2rem 2rem;
    background-color: var(--color-green25);
    border-radius: 0.5rem;
}


.faq-icon {
    position: absolute;
    top: 2rem;
    right: 1rem;
    width: 32px;
}

.faq-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-azure);
}

.faq-body {
    padding-top: 0.5rem;
}



/* QUOTE */

.quote {
    font-size: 1.5rem;
    padding-left: 1.25rem;
    padding-right: 1.5rem;
    color: var(--color-azure);
    line-height: 1.25;
}


.quote p::before,
.quote p::after {
    content: "“";
    font-family: 'Signika';
    font-family: 'nunito', sans-serif;
    font-size: 8rem;
    margin: -2rem 0 0 -4rem;
    position: absolute;
    color: var(--color-green);
}

.quote p::after {
    margin: -2rem 0 2rem 0;
}


.quote cite {
    font-size: 1.25rem;
    color: black;
    font-style: normal;
    font-weight: bold;
}


.quote-floating {
    line-height: 1.25;
    background-color: var(--color-pumpkin25);
    color: var(--color-blue);
    width: 40%;
    float: right;
    padding: 4rem 1rem 1rem 1rem;
    margin-left: 1rem;
    border-radius: 15px;
}


.quote-floating p::before
{
    content: "“";
    font-family: 'Signika';
    font-family: 'nunito', sans-serif;
    font-size: 10rem;
    margin-top: -5rem;
    position: absolute;
    color: var(--color-green);
}


.quote-floating cite {
    font-size: 1.25rem;
    color: black;
    font-style: normal;
    font-weight: bold;
}




/* */

.hero.has-background {
    position: relative;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}

    .hero-background.is-transparent {
        opacity: 0.75;
    }



.senifit-full-screen 
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
}






.email-popup {
    z-index: 100;
    position: fixed !important;
    width: 300px;
    height: 275px;
    right: 2rem;
    bottom: 2rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background-image: url("/data/web/pills.jpg");
    background-image: url("/data/web/popup/wave-bkg.svg");
    background-repeat: no-repeat;
    background-color: #A8EFB7;
    background-size: 300px 300px;
    visibility:hidden;
}

.email-popup.is-active {
    visibility: visible;
}




.modal-entry {
    border-radius: 0.75rem;
    padding: 1rem;
    background-color: #E5E5E5 !important;
}



.senifit-green-background {
    background-color: #A8EFB7 !important;
}



.senifit-levander-background {
    background-color: #DCBEF8 !important;
}


.senifit-gold-background {
    background-color: #FCDF97 !important;
}




.homepage-icon
{
    width: 128px;
    height: 128px;
}



/* APPLICATION FRAME */

.application-body {
    margin: 5px !important;
    padding: 0;
    overflow: hidden;
    background-color: #FFFFFF;
}