:root {
    /* Brand Color Palette */
    --primary-color: #e9eaee; /* Very Light Gray for page background */
    --secondary-color: #03a9f4; /* Dark blue (header/nav) */
    --tertiary-color: #ffffff; /* White (text/buttons background) */
    --quaternary-color: #cccccc; /* Neutral gray for borders */
    --link-color: #3b78c4; /* Softer blue for hyperlinks */
    --hover-blue: #2c3f7c; /* Darker blue for hover state */
    --near-black: #1a2947; /* Near black for text */
    /* Font Styles */
    --header-font: 'Roboto', sans-serif;
    --header-font-size: 1.5em;
    --header-font-weight: 700;
    --primary-font: 'Roboto', sans-serif;
    --primary-font-size: 0.9em;
    --primary-font-weight: 400;
    /* Button Styles */
    --button-font: 'Roboto', sans-serif;
    --button-font-size: 1em;
    --button-font-weight: 400;
    --button-background-color: var(--link-color);
    --button-border-color: var(--primary-color);
    --button-border-radius: 5px;
    --button-border-width: 2px;
    --button-text-color: white;
    --button-hover-background-color: var(--secondary-color);
    /* Div Styles */
    --div-shadows: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --div-border-radius: 5px;
    --div-border-color: var(--quaternary-color);
    --div-border-width: 1px;
    --div-background-color: var(--tertiary-color); /* subtle contrast from white */
}

/* Generic Styles */
.header-text {
    color: var(--near-black);
    font-family: var(--header-font);
    font-size: var(--header-font-size);
    font-weight: var(--header-font-weight);
}

.paragraph-text {
    color: var(--near-black);
    font-family: var(--primary-font);
    font-size: var(--primary-font-size);
    font-weight: var(--primary-font-weight);
}

.button {
    font-family: var(--button-font);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    padding: 5px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .button:hover {
        background-color: var(--button-hover-background-color);
    }

a {
    text-decoration: none !important;
    color: var(--link-color);
}

    a:hover {
        text-decoration: underline !important;
        color: var(--hover-purple);
    }

/* Section headers like "Default Fields" and "Custom Fields" */
.section-header {
    background-color: var(--quaternary-color);
}

/* Create Page Styles */
.create-header-div {
    border: var(--div-border-width) solid var(--div-border-color);
    border-radius: var(--div-border-radius);
    box-shadow: var(--div-shadows);
    overflow: hidden;
    margin-bottom: 30px;
    background-color: var(--div-background-color);
}

.create-title-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: fit-content;
    background-color: var(--tertiary-color);
    padding: 0px 20px;
    color: var(--tertiary-color);
}

.create-header-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: fit-content;
    background-color: var(--primary-color);
    border-bottom: var(--div-border-width) solid var(--primary-color);
    color: var(--tertiary-color);
    padding: 10px 20px;
}

.create-main-content {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--div-shadows);
    background-color: var(--primary-color);
}

.create-fields {
    background-color: var(--div-background-color);
    border: var(--div-border-width) solid var(--div-border-color);
    border-radius: var(--div-border-radius);
    width: 100%;
    max-width: 100%;
    padding: 0px;
    box-shadow: var(--div-shadows);
}

.activity {
    background-color: var(--div-background-color);
    box-shadow: var(--div-shadows);
    border: var(--div-border-width) solid var(--div-border-color);
    border-radius: var(--div-border-radius);
}

@media (max-width: 1200px) {
    .create-fields {
        width: 100%;
        max-width: 100%;
    }

    .activity {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 5%;
    }

    .create-main-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

/* Index Page Styles */
.index-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--div-background-color);
    color: var(--tertiary-color);
    border: var(--div-border-width) solid var(--div-border-color);
    border-radius: var(--div-border-radius);
    box-shadow: var(--div-shadows);
    overflow: hidden;
    margin-bottom: 10px;
    padding: 0px 20px;
}

.index-buttons-and-fields {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 10px;
}

/* General Div Styles */
.div-general {
    display: flex;
    background-color: var(--div-background-color);
    border: var(--div-border-width) solid var(--div-border-color);
    border-radius: var(--div-border-radius);
    box-shadow: var(--div-shadows);
    width: fit-content;
    height: fit-content;
    padding: 10px;
    margin: 10px;
}

body {
    background-color: #eef1f6 !important;
}


/* FAB Styles */
.fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
}

.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #03a9f4;
    color: white;
    font-size: 24px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
    margin-top: 12px;
}

    .fab-main:hover {
        background-color: cornflowerblue !important;
    }

.fab-action {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    margin-right: 8px;
    min-width: 40px;
    max-height: 40px;
    background-color: transparent;
    color: rgba(0,0,0,.87);
    overflow: visible;
    -webkit-box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
    background-color: #fff;
    border-radius: 50%;
    border-color: lightgray;
}

    .fab-action:hover {
        background-color: cornflowerblue !important;
    }

.fab-label {
    font-size: 14px;
    color: #333;
    background-color: white;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
    margin-right: 5px;
}

.fab-action-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    opacity: 0;
    /*            transform: translateY(20px); */
    animation: fadeInUp 0.3s ease forwards;
}

.fade-out {
    animation: fadeOutDown 0.3s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.dx-icon-arrowback-red:before {
    content: "\f00e"; /* Use a different glyph */
    color: red; /* Change color */
    font-size: 30px; /* Resize */
}