:root {
    /* BG COLORS */
    --background-color-1: #FBFBFE;

    /* Text Color */
    --text-color-default: #1B1D2A;
    --text-color-gray: #7A8096;
    --text-color-light-gray: #565B70;

    /* #region SIDEBAR */

    --sidebar-bg: #FFFFFF;
    --collpase-btn-color: #F6F7FD;
    --sidebar-btn-hover: #F6F7FD;
    --sidebar-svg: #565B70;
    --sidebar-svg-active: #5A67F2;
    --side-btn-active: #EEF0FE;;
    --sidebar-border-div: #E8EAF4;
    --sidebar-border-right: #E8EAF4;

    /* #endregion SIDEBAR */

    /* #region Main */
    --card-bg-color: #FFFFFF;
    --card-border: #E8EAF4;
    --card-box-shadow: none;
    /* #endregion Main */

    /* #region Quick Actions */

    --qa-svg: #5A67F2;
    --qa-svg-bg: #EEF0FE;

    /* #endregion Quick Actions */

    /* #region Calories Card */

    --remaining-kcal: #5A67F2;
    --kcal-ring-bg: #EEF0F8;
    --kcal-ring: #5A67F2;

    /* #endregion Calories Card */

    /* #region Today's Logs */

    --tl-border: #E8EAF4;
    --tl-progress-bg: #EEF0F8;
    --tl-meal-border-bottom: #E8EAF4;
    --tl-placeholder-img: #E8EAF4;

    /* #endregion Today's Logs */

    /* #region Reminders */

    --reminder-svg-bg: #EEF0FE;

    /* #endregion Reminders */

    /* #region Streak */

    /* #endregion Streak */
}

main {
    display: flex;
    flex-direction: row;
    /* gap: 0.8rem; */
    /* margin: 0.8rem; */
    width: 100%;
}

main {
    flex: 1;
    background-color: #FBFBFE;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1.6rem;

    overflow-x: hidden;
    overflow-y: auto;
}

main::-webkit-scrollbar {
    width: 0.5rem;
}

main::-webkit-scrollbar-thumb {
    background: #CDD1E0;
    border-radius: 12px;
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;

    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0px;

    background-color: #FBFBFE;
    background-color: #FBFBFE;
    background-color: #FBFBFE;
    background-color: #FBFBFE;

    display: flex;
    height: 100dvh;
    color: var(--text-color-default);

    box-sizing: border-box;
}

p {
    margin: 0;
}

h1 {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

h2 {
    margin: 0;
}

h3 {
    margin: 0;
}

a {
    text-decoration: none;
}

img,
button,
a {
    -webkit-user-drag: none; /* Safari and Chrome */
    -ms-user-select: none; /* Standard syntax */
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Safari */
    user-select: none; /* IE 10+ */
}

button {
    padding: 0;
    cursor: pointer;
    border: none;
    color: var(--text-color-default);
    font-family: inherit;
}


input{
    font-family: inherit;
    field-sizing: content;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #F4F5FB inset !important;
    -webkit-text-fill-color: white !important;
    caret-color: white;
}

.mobile-view {
    display: none !important;
}

.desktop-view {
    display: var(--desktop-display, block) !important;
}

@media (max-width: 760px) {
    /* phone page background (desktop keeps #FBFBFE);
       "html ..." so it beats the page stylesheets' own body/main rules */
    html body,
    html body main {
        background-color: #EEF0F8;
    }

    html {
        font-size: 6.4px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        touch-action: manipulation;
    }

    body {
        flex-direction: column-reverse;
        padding: 0;
        gap: 0;
    }

    main {
        box-sizing: border-box;
        padding: 2rem;
        border-radius: 0rem;
        position: relative;
        z-index: 20;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    main::-webkit-scrollbar {
        display: none;
    }

    .mobile-view {
        display: var(--mobile-display, block) !important;
    }

    .desktop-view {
        display: none !important;
    }
}