* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

:root {
    --bg-gray: #F0F0F0;
    --color-paragraph: #5E5D5D;
    --color-primary: #18639c;
    --color-secondary: #02dac5;
    --color-gray: #a0a0a0;
    --color-gray-shadow: #77777725;
    --color-gray-light: #eceef0;
    --color-gray-accent: #F9F9F9;
    --color-white: #fff;
    --color-white-2: #fff;
    --toogle-switch: #00549c;
    --gray-gradient: linear-gradient(#f0f0f0, #f0f0f0);
    --filter-inverse: invert(0);
    --color-black: #000;
    --default-font-size: 18px;
    --default-14-font-size: 14px;
    --border-radius-default: 5px;
    color-scheme: light;
    --font-family: "Open Sans", sans-serif;
    --profile-icon: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7500%) hue-rotate(202deg) brightness(101%) contrast(96%);
    --theme-btn: #18639c;
    --topbar-color: #5E5D5D;
    --doc-icon: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(11%) hue-rotate(250deg) brightness(99%) contrast(99%);
    --popup-activecolor: #18639c;
    --black-icon: brightness(0) saturate(100%) invert(71%) sepia(3%) saturate(10%) hue-rotate(353deg) brightness(92%) contrast(82%);
    --danger-icon: brightness(0) saturate(100%) invert(41%) sepia(29%) saturate(1094%) hue-rotate(313deg) brightness(106%) contrast(99%);
    --filter-pragraph: brightness(0) saturate(100%) invert(39%) sepia(15%) saturate(0%) hue-rotate(283deg) brightness(87%) contrast(88%);
    --copy-hover: black
}

:root.dark {
    --bg-gray: #252525;
    --color-paragraph: #fff;
    --color-primary: #248DDD;
    --color-secondary: #02dac5;
    --color-gray: #ececec;
    --color-gray-shadow: #3838382c;
    --color-gray-light: #424242;
    --color-gray-accent: #424242;
    --color-white: #181818;
    --color-white-2: #181818;
    --gray-gradient: #000000;
    --color-black: #e0e0e0;
    --toogle-switch: #00549c;
    --filter-inverse: invert(1);
    --default-font-size: 18px;
    --border-radius-default: 5px;
    --font-family: "Open Sans", sans-serif;
    color-scheme: dark;
    --profile-icon: brightness(0) saturate(100%) invert(94%) sepia(96%) saturate(0%) hue-rotate(229deg) brightness(105%) contrast(103%);
    --theme-btn: transparent;
    --topbar-color: #fff;
    --filter-pragraph: brightness(0) saturate(100%) invert(100%) sepia(92%) saturate(185%) hue-rotate(327deg) brightness(122%) contrast(99%);
    --doc-icon: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(331deg) brightness(102%) contrast(101%);
    --black-icon: brightness(0) saturate(100%) invert(97%) sepia(99%) saturate(1%) hue-rotate(89deg) brightness(105%) contrast(100%);
    --popup-activecolor: #18639c
}

.ContentEditable__root {
    min-height: calc(100vh - 44px) !important;
}

@media (width < 1024px) {
    .ContentEditable__root {
        min-height: calc(100vh - 50px) !important;
    }

    .editor-shell {
        display: flex;
        flex-direction: column;
    }

    .toolbar {
        position: sticky !important;
        height: 48px !important;
        overflow-x: auto !important;
        /* bottom: 0 !important;
        top: unset !important; */
    }

    .actions {
        display: none !important;
    }

    /* .dropdown {
        top: unset !important;
        bottom: 62px;
    } */
}