* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root {
    --color-paragraph: #5E5D5D;
    --color-primary: #18639c;
    --color-secondary: #02dac5;
    --color-gray: #a0a0a0;
    --color-gray-shadow: #77777725;
    --color-gray-light: #eceef0;
    --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 {
    --color-paragraph: #fff;
    --color-primary: #18639c;
    --color-secondary: #02dac5;
    --color-gray: #ececec;
    --color-gray-shadow: #3838382c;
    --color-gray-light: #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;
}

:root.dark-green {
    --color-primary: #00e980;
    --color-secondary: #00e980;
    --color-gray: #ececec;
    --color-gray-shadow: #3838382c;
    --color-gray-light: #012e46;
    --color-white: #011926;
    --color-white-2: #000c13;
    --toogle-switch: #00e980;
    --gray-gradient: linear-gradient(#00151f, #011926);
    --color-black: #e0e0e0;
    --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(83%) sepia(36%) saturate(4851%) hue-rotate(98deg) brightness(92%) contrast(107%);
    --theme-btn: transparent;
    --topbar-color: #fff;
    --doc-icon: brightness(0) saturate(100%) invert(83%) sepia(36%) saturate(4851%) hue-rotate(98deg) brightness(92%) contrast(107%) !important;
    --black-icon: brightness(0) saturate(100%) invert(97%) sepia(99%) saturate(1%) hue-rotate(89deg) brightness(105%) contrast(100%);
    --filter-pragraph: brightness(0) saturate(100%) invert(39%) sepia(15%) saturate(0%) hue-rotate(283deg) brightness(87%) contrast(88%);
}

:root.light-blue {
    --color-primary: #385eca;
    --color-secondary: #385eca;
    --color-gray: #000;
    --color-gray-shadow: #385eca;
    --color-gray-light: #b6bdd1;
    --color-white: #fff;
    --color-white-2: #c8cedf;
    --gray-gradient: linear-gradient(#f2f4f5, #e1e4ee);
    --filter-inverse: invert(0);
    --color-black: #000;
    --default-font-size: 18px;
    --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: #000;
    --doc-icon: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7500%) hue-rotate(202deg) brightness(101%) contrast(96%);
    --popup-activecolor: #18639c;
    --black-icon: brightness(0);
}

body {
    background: var(--gray-gradient);
    min-height: 100vh;
    font-size: var(--default-font-size);
    font-family: var(--font-family);
    line-height: 1.8;
    position: relative;
}

html {
    overflow-x: hidden;
}

.mt-10 {
    margin-top: 10px;
}

.pt-10 {
    padding-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.pt-20 {
    padding-top: 20px;
}

.d-none {
    display: none !important;
}

.alert {
    color: #6b0000;
    background-color: #ffa8a8;
    border-color: #f99;
    padding: 10px 20px;
    width: 100%;
    margin: 20px auto;
    border-radius: var(--border-radius-default);
}

.main-content {
    overflow-x: hidden;
    min-height: 100vh;
    width: calc(100% - 94px);
    position: relative;
    margin-left: 5.1em;
}

.page-contents {
    padding: 30px 50px 10px 0px;
    transition: 0.3s ease;
}

.page-contents.active {
    padding: 24px;
}

.doc__title-active {
    left: 24px !important;
}

#img_toggler {
    filter: var(--filter-inverse);
}

.main-container {
    min-height: 100vh;
    display: flex;
    align-items: start;
    justify-content: start;
}

.container {
    max-width: 1200px;
    width: 90%;
    margin: auto;
}

.active .tooltip p {
    display: none;
}

.inactive .tooltip {
    position: relative;
    text-align: left;
}

.inactive .tooltip .right .inactive .tooltipTest {
    font: normal normal 15px open sans;
    color: var(--color-white);
}

.inactive .tooltip .right {
    top: 10px;
    left: 0;
    margin-left: 10px;
    transform: translate(0, 30%);
    padding: 5px 10px;
    color: var(--color-white);
    background-color: #333;
    font-weight: 400;
    font-size: 13px;
    border-radius: 5px;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    width: 0;
    transition: 300ms all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.inactive .tooltip:hover .right {
    visibility: visible;
    opacity: 1;
    width: max-content;
    left: 100%;
}

.inactive .tooltip .bottom {
    top: 80%;
    left: unset;
    width: max-content;
    transform: translate(-50%, 30%);
}

.inactive .tooltip:hover .bottom {
    top: 120%;
    left: unset;
}

.inactive .tooltip .right i {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -12px;
    width: 12px;
    height: 24px;
    overflow: hidden;
}

.inactive .tooltip .right i::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 0;
    top: 50%;
    transform: translate(50%, -50%) rotate(-45deg);
    background-color: #18639c;
}

.inactive .tooltip .bottom i::after {
    left: 50%;
    top: -10%;
}

.inactive .tooltip .bottom i {
    top: 50%;
    right: 60%;
    overflow: unset;
}

.custom-file-input {
    display: none;
}

.hamburger {
    z-index: 50000000;
}

.nav__toggler {
    display: none;
    z-index: 1e15;
    /* position: absolute;
    top: 0px;
    right: 55px; */
}

.hamburger {
    cursor: pointer;
    transition: 300ms all cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* position: absolute;
    top: 10px;
    left: 10px; */
    /* padding: 10px; */
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-direction: column;
    width: 28px;
    /* height: 50px; */
}

.hamburger span {
    border: 2px solid #5E5D5D;
    width: 100%;
    min-width: 30px;
    border-radius: 5px;
    transition: 500ms all cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: #5E5D5D;
}


.hamburger.iconVisible span:first-child {
    transform: rotate(45deg) translate(10px, 10px);
}

.hamburger.iconVisible span:last-child {
    transform: rotate(135deg) translate(-6px, 6px);
}

.hamburger.iconVisible span:nth-child(2) {
    opacity: 0;
}

aside .toggle__nav__options {
    position: absolute;
    left: 108px;
    top: 31px;
    padding: 0px !important;
    transition: 0.3s ease;
    transform: translatey(14px);
}

aside .toggle__nav__options.active {
    left: 38px;
    transition: 0.3s ease;
    transform: translatey(14px);
}

aside .toggle__nav__options img {
    width: 26px !important;
    height: 25px !important;
    background: white;
    border-radius: 100px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

aside a img,
aside label img {
    width: 24px;
    height: 24px;
}

aside a:hover,
aside label:hover,
aside a.active,
aside label.active {
    background-color: var(--color-gray-light);
    color: var(--color-black);
}

aside a:hover img,
aside label:hover img,
aside a.active img,
aside label.active img {
    filter: var(--doc-icon);
}

aside nav {
    display: flex;
    flex-direction: column;
    height: 100%;
}

aside nav img {
    filter: var(--black-icon);
    width: 20px;
    height: 20px;
}

aside::-webkit-scrollbar {
    display: none !important;
}

aside .important-links {
    margin-top: 20px;
}

aside .important-links a {
    border: none;
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-content: space-between;
    background-color: var(--color-white-2);
    /* border-bottom: 1px solid var(--color-gray-light); */
    gap: 5px;
}



.file__section {
    display: none;
}



.newtab-btn {
    background-color: #f8f8f8;
    padding: 2px 20px;
    border: 2px solid #f8f8f8;
    border-radius: 5px;
    font-size: 14px;
    color: var(--color-white);
    cursor: pointer;
    margin-left: 10px;
    text-decoration: none;
}

.newtab-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-white);
}


aside {
    background-color: var(--color-white-2);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 100vh;
    gap: 10px;
    border: 1px solid var(--color-gray-light);
    z-index: 999999999;
    width:94px;
}

aside a,
aside label {
    color: var(--topbar-color) !important;
    text-decoration: none;
    width: 100%;
    min-height: 64px;
    display: flex;
    place-content: center;
    position: relative;
    z-index: 5;
    cursor: pointer;
    font-weight: 300;
    font-size: 12px;
    align-items: center;
    flex-direction: column;
    padding: 8px;
    border-bottom: 1px solid var(--color-gray-light);
    transition: 0.3s ease;
    gap:8px;
}

aside,
aside * {
    transition: 0.3s ease;
}

aside nav a span {
    visibility: hidden;
    height: 0px;
    width: 0px;
    overflow: hidden;
    opacity: 0;
    font-size: 12px;
    transition: 0.3s ease;
}

aside nav.active a {
    min-width: 94px;
}

aside nav.active a span {
    visibility: visible;
    height: auto;
    width: auto;
    overflow: hidden;
    opacity: 1;
    line-height: 16px;
    font-size: 12px;
    font-weight: 500;
    transition: all ease-in-out .1s;
}

.dark .btn_dark img {
    filter: invert(1);
}

.dark .ql-snow .ql-picker-options {
    background-color: #181818;
    color: #ffffff;
}

.dark .privacy h1,
.dark .privacy h2,
.dark .privacy h3 {
    color: #ffffff !important;
}

.dark .assign__label img {
    filter: invert(1);
}

.dark .inactive .tooltip .right {
    color: #ffffff;
}

.dark .title__bar .doc__title::placeholder {
    color: #ffffff;
}

.dark .ql-snow .ql-picker-label::before {
    color: #ffffff;
}

.dark .feedback__popup .row button img {
    filter: invert(1);
}

.dark .contact_us .input-group label {
    color: #ffffff;
}

.dark .contact_us .input-group textarea::placeholder {
    color: #cfcfcf;
}

.dark .card__footer .restoreBtn>img,
.card__footer .labelBtn>img,
.card__footer .deleteBtn>img {
    filter: none !important;
}

.dark .contact_us .input-group input,
.contact_us .input-group textarea {
    border-bottom: 1px solid #cfcfcf;
}

.dark aside a,
.dark aside label {
    border-color: #000 !important;
}

/* aside a:first-child,
aside label:first-child {
    border-top: 1px solid var(--color-gray-light);
} */

/* .dark aside a:first-child,
.dark aside label:first-child {
    border-top: 1px solid #000 !important;
} */

.mianSidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.mianSidebar .nav-btn-MinMax {
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mianSidebar .nav-btn-MinMax img {
    width: 32px;
    height: 32px;
}

.input__group {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
}

.input__group input,
.input__group textarea,
.tox-tinymce {
    padding: 10px 20px;
    border: 1px solid var(--color-gray-light) !important;
    font-size: var(--default-font-size);
    border-radius: var(--border-radius-default);
    background: var(--color-white-2);
    color: var(--color-black);
}

.dark .search input {
    background-color: #000;
}

.tox-tinymce {
    padding: 10px;
}

.input__group input:focus,
.input__group textarea:focus,
.tox-tinymce:focus {
    outline: none;
    border: 1px solid var(--color-primary) !important;
}

.header-main .right__header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-main .input__group {
    position: relative;
}

.popup__search {
    margin: 10px auto;
}

#searchResult {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    border: 1px solid var(--color-gray-light);
    font-size: var(--default-font-size);
    z-index: 9999999990;
    background-color: var(--color-white);
    display: none;
    max-height: 250px;
    overflow: auto;
    box-shadow: 13px 12px 20px 4px #0000000f;
    max-width: 350px;
    margin-top: 10px;
    border-radius: 5px;
}

.searchResults {
    cursor: pointer;
    margin: 0 auto;
    padding: 3px 20px 0;
    border-radius: 0 0 10px 10px;
}

.searchResults:not(:last-child) {
    border-bottom: 1px solid #f8f8f8;
}

.searchResults a,
.searchResults span,
.searchResults div {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-decoration: none;
    color: var(--color-black);
}

.searchResults span,
.searchResults div {
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.searchResults:hover,
.searchResults.focus {
    background-color: var(--color-gray-light);
}

.searchResults:hover a {
    text-decoration: underline;
}

.searchResults small {
    color: var(--color-gray);
    position: relative;
    display: inline-block;
    top: -5px;
    font-size: 12px;
}

.searchResults small:last-child {
    top: 0;
}

#searchBtn {}

#searchBtn:hover,
#chatToggleBtn:hover {
    background-color: var(--color-primary) !important;
}

#searchBtn img,
#chatToggleBtn img {
    width: 34px;
    height: 20px;
}

#searchBtn:hover img,
#chatToggleBtn:hover img {
    filter: brightness(2);
}

#searchPopup {
    min-width: 420px;
}

#searchPopup .popup__header {
    display: flex;
    justify-content: end;
    height: auto;
    padding: 0 !important;
}

#searchPopup .popup__header .popup__close {
    color: var(--color-black);
    position: relative;
    padding: 3px 20px;
}

#searchPopup .popup__body {
    padding: 0 2em 2em;
}

.header-main button {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-default);
    color: var(--color-gray-dark);
    /* width: 34px; */
    height: 32px;
    cursor: pointer;
    display: grid;
    place-content: center;
}

header .right__header .icon__btn {
    min-width: 32px !important;
    height: 32px;
}

header .right__header .icon__btn img {
    width: 20px;
    height: 20px;
}

#pricingBtn {
    padding: 6px 10px;
    color: var(--topbar-color);
}

.coffee__btn img {
    max-height: 38px;
    margin-bottom: -10px;
}

.coffee__btn div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.coffee__btn {
    background: #ffdd00;
    height: 34px;
    display: flex;
    align-items: center;
    padding: 10px 10px !important;
    border-radius: 6px;
}

.coffee__btn div img {
    max-height: 22px;
}

.coffee__btn svg {
    max-width: 22px;
    max-height: 22px;
    animation: coffee 3s ease infinite;
    transform-origin: bottom center;
    transform: translateY(-30px) rotate(-15deg);
    position: relative;
    overflow: hidden;
    /* filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(7%) hue-rotate(240deg) brightness(95%)
        contrast(101%);
        ; */
    margin-bottom: -15px;
}

.coffee__btn div img {
    margin-top: -5px;
    max-height: 19px;
}

.coffee__water {
    transform: scale(0.9);
    position: absolute;
    bottom: 0px;
    animation: coffee_water 2s ease infinite;
    transform-origin: bottom center;
    filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(7%) hue-rotate(240deg) brightness(95%) contrast(101%);
    /* filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(113%) hue-rotate(304deg) brightness(115%) contrast(101%) !important;  */
    /* filter: brightness(0) saturate(100%) invert(85%) sepia(5%) saturate(5930%) hue-rotate(324deg) brightness(95%) contrast(86%); */
}

.cofee__border {
    animation: coffee_border 2s ease infinite;
    /* filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(312deg) brightness(104%) */
    /* contrast(101%) !important; */
    filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(7%) hue-rotate(240deg) brightness(95%) contrast(101%);
}

@keyframes coffee_border {
    0% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(312deg) brightness(104%) contrast(101%) !important;
    }

    50% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(312deg) brightness(104%) contrast(101%) !important;
    }

    100% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(312deg) brightness(104%) contrast(101%) !important;
    }
}

@keyframes coffee_water {
    0% {
        transform: scale(0.9) rotate(1deg);
    }

    50% {
        transform: scale(1) rotate(-1deg);
    }

    100% {
        transform: scale(0.9) rotate(1deg);
    }
}

@keyframes coffee {
    0% {
        transform: translateY(-8px) rotate(-3deg);
    }

    25% {
        transform: translateY(-7px) rotate(3deg);
    }

    50% {
        transform: translateY(-6px) rotate(-3deg);
    }

    75% {
        transform: translateY(-7px) rotate(3deg);
    }

    100% {
        transform: translateY(-8px) rotate(-3deg);
    }
}

.d-flex {
    display: flex;
}

.d-flex-column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.theme__btn img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(2998%) hue-rotate(82deg) brightness(120%) contrast(100%) !important;
}

.title__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    height: 40px;
    padding: 10px 12px;
}

.title__bar .doc__title {
    position: absolute;
    top: 8px;
    left: 100px;
    max-width: 260px;
    width: 260px;
    min-width: 260px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;

    &::placeholder{
        color: #A6ABB3;
    }
}

.doc__title__wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

#doc__status {
    display: flex;
    align-items: center;
    margin-left: 10px;
    gap: 10px;
    font-size: 14px;
    color: rgb(180, 180, 180) !important;
}

#doc__status::before {
    content: "";
    color: rgb(180, 180, 180) !important;
    width: 14px;
    height: 14px;
    border: 2px solid rgb(211, 211, 211);
    border-top: 2px solid var(--color-secondary);
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    display: block;
}

.doc__status_stop::before {
    animation: none !important;
    border-color: #e55353 !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* .doc__title__wrapper {
    min-width: 350px;
} */

.title__bar .document__options {
    max-width: fit-content;
    flex: 5;
    display: flex;
    justify-content: flex-end;
    border-radius: 4px;
    border-radius: 7px;
    overflow: visible;
    height: 100%;
    background: var(--color-white-2);
    position: relative;
    z-index: 5;
    /* gap: 20px; */
    /* padding-right: 20px; */

    @media(max-width:980px){
        &{
            display: none !important;
        }
    }
}

.label_color_setting {
    display: flex;
    align-items: center;
    gap: 10px;
}

.document__options label {
    border-left: 0px !important;
}

.title__bar .document__options div,
.title__bar .document__options label {
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    background: var(--color-white-2);
    color: var(--topbar-color) !important;
    border-left: 1px solid #eee;
    text-align: center;
    /* padding-left: 20px; */
    transition: 0.3s ease;
    cursor: pointer;
    line-height: 20px;
    font-weight: 500;
}

.title__bar .document__options label img,
.title__bar .document__options div img {
    width: 20px;
    transition: 0.3s ease;
    filter: none !important;
}

.title__bar .document__options label:hover,
.title__bar .document__options div:hover {
    color: var(--topbar-color) !important;
}

.title__bar .document__options label:hover img,
.title__bar .document__options div:hover img {
    filter: var(--doc-icon);
}

.title__bar .fullscreen__btn {
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    gap: 10px;
    background: var(--color-white);
    border-radius: 100px;
    color: #a6abb3 !important;
    cursor: pointer;
    width: 32px;
    height: 32px;
}

.notepad__text__area .fullscreen__btn img {
    width: 10px;
}

main {
    padding: 30px 50px 10px 70px;
}

main section .input__group input,
main section .input__group textarea {
    width: 100%;
}

main section .input__group textarea {
    resize: none;
}

#textEditor {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.search {
    display: flex;
    flex-direction: row;
    padding: 5px 15px;
    border: 1px solid var(--color-gray-light);
    border-radius: 5px;
    gap: 10px;
}

.search img {
    height: 24px;
    filter: var(--filter-inverse);
    transform: scale(-1) rotate(270deg);
}

.search input {
    border: none !important;
    padding: 0 !important;
    width: 100%;
}

/* p.char__counter {
    margin-right: 20px;
} */

.search input:focus {
    border: none !important;
}

.dark .search {
    background-color: #000 !important;
}

.tox-tinymce {
    position: unset !important;
    z-index: 0 !important;
}

.tox .tox-edit-area__iframe {
    background-color: var(--color-white) !important;
}

.tox .tox-edit-area__iframe>* {
    color: var(--color-black) !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    position: absolute;
    top: 14px;
    left: 160px;
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
    background: unset !important;
}

#chat-widget-minimized {
    display: none !important;
}



.tox .tox-tbtn svg {
    fill: var(--color-gray) !important;
}

.tox .tox-tbtn {
    color: var(--color-gray) !important;
}

.tox .tox-tbtn:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.tox .tox-collection--list .tox-collection__item {
    padding: 8px !important;
    background-color: var(--color-gray-light) !important;
}

.dark .tox .tox-collection--list .tox-collection__item--active * {
    background-color: var(--color-gray) !important;
}

.tox-collection__item-label * {
    color: var(--color-black) !important;
    background-color: var(--color-gray-light) !important;
}

.tox .tox-collection--list .tox-collection__item--active {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.tox-collection__item:hover .tox-collection__item-label *,
.tox .tox-collection--list .tox-collection__item--active .tox-collection__item-label *,
.tox .tox-collection--list .tox-collection__item--active .tox-collection__item-label *,
.tox .tox-collection--list .tox-collection__item--enabled * {
    background-color: var(--color-primary) !important;
    color: var(--color-white);
}

.tox .tox-collection--list .tox-collection__item--active .tox .tox-tbtn:hover svg {
    fill: var(--color-white) !important;
    color: var(--color-white);
}

.tox .tox-collection--list .tox-collection__item--enabled {
    color: var(--color-white) !important;
    background-color: var(--color-primary) !important;
}

.tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type) {
    border-right: none !important;
    gap: 15px !important;
}

.tox .tox-tbtn--enabled svg,
.tox .tox-tbtn--enabled:hover svg {
    fill: var(--color-white) !important;
    background-color: var(--color-primary) !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
    background-color: var(--color-primary) !important;
}

.tox:not([dir="rtl"]) {
    border-radius: 5px;
}

.tox .tox-toolbar-overlord {
    background-color: var(--color-white) !important;
}

.tox .tox-dialog-wrap__backdrop {
    background-color: var(--color-gray-shadow);
}

.tox .tox-dropzone {
    background-color: transparent !important;
}

.popup__wrapper {
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 50000000000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    overflow: auto;
    display: none;
}

.popup,
.secondPopUp {
    background-color: var(--color-white);
    color: var(--color-black);
    min-width: 300px;
    border-radius: 10px;
    width: 800px;
    height: max-content;
    overflow-x: hidden;
    position: relative;
    top: 0;
    transition: 300ms all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.popup .popup__body {
    height: 70vh;
}

.secondPopUp {
    width: auto;
    max-height: 800px;
    margin-top: 50px;
    min-width: 350px;
}

.popup .popup__header,
.secondPopUp .popup__header {
    background-color: var(--color-primary);
    padding: 0 0 0 1rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-white);
    font-size: var(--default-font-size);
    border-radius: 10px 10px 0 0;
    position: sticky;
    top: 0;
    left: 0;
    width: 101%;
    z-index: 3333;
    height: 55px;
}

.secondPopUp .popup__header {
    color: var(--color-black) !important;
    padding: 10px 30px !important;
}

.errorSnap .popup__header {
    gap: 40px;
}

.errorSnap .popup__header div:first-of-type {
    max-width: 350px;
}

.downloadPopup,
.login_popup,
.feedback__popup,
.applicationsPopup,
.popup__header {
    min-width: 450px;
}

.applicationsPopup .popup__body a span:not(.file_size),
.downloadPopup .popup__body button span:not(.file_size),
.login_popup .popup__body button span:not(.file_size) {
    font-size: 18px !important;
    color: var(--color-black) !important;
    font-weight: 700 !important;
}

.applicationsPopup .popup__footer {
    padding: 0 30px 15px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.applicationsPopup .row a img {
    width: 45px;
    height: 45px;
}

.applicationsPopup .row a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
    text-decoration: none;
}

.applicationsPopup .row a:hover {
    background-color: var(--color-gray-light);
}

.downloadPopup .popup__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px 15px;
}

.sharePopup .row a {
    text-decoration: none;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 20px 10px;
    width: 130px;
    height: 90px;
    font-size: 14px;
}

.sharePopup .row a span {
    margin-top: 10px;
}

.sharePopup .row a:hover {
    background-color: var(--color-gray-shadow);
}

.downloadPopup .btn_dark {
    color: var(--color-white);
    background-color: var(--color-black);
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}

.btn_download {
    display: flex;
    justify-content: end;
    margin-top: 30px;
}

.popup__close {
    background-color: transparent;
    padding: 10px 20px;
    border: none;
    color: var(--color-white);
    font-size: 30px;
    cursor: pointer;
    border-radius: 10px;
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5555;
}

.popup__body {
    padding: 2em;
    overflow: auto;
}

::-webkit-scrollbar,
.popup__wrapper::-webkit-scrollba,
.searchResults::-webkit-scrollbar {
    background: var(--color-gray);
    width: 6px;
    height: 4px;
}

::-webkit-scrollbar-thumb,
.popup__wrapper::-webkit-scrollbar-thumb,
.searchResults::-webkit-scrollbar-thumb {
    background: var(--color-primary);
}

#content {
    padding: 0 0 30px;
}

#aboutTool,
#viewAllBox {
    display: none;
    padding: 0 0 30px;
}

.aboutTool {
    list-style-type: none;
    position: relative;
    padding-left: 20px;
    color: var(--color-black) !important;
}

.aboutTool h2 {
    color: var(--color-primary);
    margin: 20px auto 7px;
    position: relative;
    font-size: 22px;
}

.aboutTool h3 {
    color: var(--color-primary);
    margin: 20px auto 7px;
    position: relative;
}

.aboutTool> ::marker {
    display: none;
}

.aboutTool>h2::before {}

.aboutTool ol {
    padding-left: 30px;
}

.btn__primary {
    background-color: var(--color-secondary);
    border: none;
    color: var(--color-white-2);
    font-size: var(--default-font-size);
    padding: 10px 20px;
    margin: 30px auto 10px;
    text-align: center;
    border-radius: var(--border-radius-default);
    cursor: pointer;
}

.tool__footer {
    display: flex;
    justify-content: center;
}

.cardsRow {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* view card search bar  */
#popup__searchBtn {
    border: none;
    outline: none;
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 7px;
    font-size: 16px;
    background-color: var(--color-white);
    cursor: pointer;
    flex: 1;
    border: 1px solid var(--color-gray-light);
}

#popup__searchBtn span {
    color: var(--color-gray-dark) !important;
}

.viewcard__searchbar {
    display: flex;
    margin-bottom: 20px;
    gap: 20px;
}

#notes__filter {
    border: 1px solid var(--color-gray-light);
    border-radius: 7px;
    min-width: 150px;
    background-color: var(--color-white);
}

.viewcard__searchbar>div {
    display: flex;
    gap: 20px;
    flex: 3;
}

.viewcard__searchbar>div>* {
    flex: 1;
}

.searchbar__label {
    display: flex;
    align-items: center;
}

.viewCard {
    flex: 1;
    min-width: 100%;
    /*max-width: 32%;*/
    /*min-width: 200px;*/
    /*background-color: var(--color-gray-light);*/
    position: relative;
    border-radius: var(--border-radius-default);
    transition: 300ms all ease-in-out;
    border: 1px solid var(--color-gray-light);
}

.viewCard .card__content {
    position: relative;
    padding: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 8px;
    height: 150px;
    color: var(--color-gray);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    margin: 10px 10px 0;
    background-color: var(--color-white-2);
}

.viewCard .card__title {
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* height: 70px; */
    -webkit-box-orient: vertical;
}

.viewCard .layer {
    border-radius: var(--border-radius-default);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: 300ms all;
    background-color: var(--color-gray);
    transition: 300ms all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.viewCard .layer a {
    border: 1px solid var(--color-white);
    text-decoration: none;
    background-color: var(--color-gray);
    padding: 5px 20px;
    border-radius: var(--border-radius-default);
    color: var(--color-white);
    transition: 300ms all;
    transform: scale(0);
    font-size: 16px;
}

.viewCard .layer a:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.viewCard:hover {
    box-shadow: 1px 2px 10px var(--color-gray-shadow);
}

.viewCard:hover .layer {
    visibility: visible !important;
    opacity: 1;
}

.viewCard:hover .layer a {
    transform: scale(1);
}

.card__footer {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    background: var(--color-white-2);
    /*margin-top: 10px;*/
}

.card__footer>div {
    display: flex;
    flex-direction: column;
}

.card__footer>div:nth-child(2) {
    align-self: flex-end;
    flex-direction: column;
    gap: 5px;
}

.viewCard .noteColorList span:hover {
    cursor: pointer;
}

.viewCard .noteColorList {
    display: flex;
    gap: 10px;
    padding-top: 0px;
    align-items: end;
    /*padding-bottom: 15px;*/
    background: var(--color-white-2);
}

.card__footer>div>div {
    display: flex;
    margin: 5px 0px;
}

.card__footer>div>div:nth-child(2) {
    gap: 8px;
}

.card__footer .deleteBtn,
.card__footer .restoreBtn,
.card__footer .labelBtn {
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    position: relative;
}

.card__footer .labelBtn>img {
    width: 20px !important;
    height: 20px !important;
}

.card__footer .restoreBtn>img,
.card__footer .labelBtn>img,
.card__footer .deleteBtn>img {
    width: 18px;
    height: 18px;
    filter: var(--filter-inverse);
    transition: all 0.2s ease-in-out;
}

.card__footer .restoreBtn:hover>img,
.card__footer .labelBtn:hover>img,
.card__footer .deleteBtn:hover img {
    transform: scale(1.1);
    filter: var(--doc-icon);
}

.card__footer .deleteForecBtn:hover img {
    transform: scale(1.1);
    filter: var(--danger-icon) !important;
}

.card__footer small {
    color: var(--color-gray);
}

/* assign label */
.assign__label {
    position: absolute;
    min-width: 400px;
    max-width: 400px;
    background: var(--color-white);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray-light);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: none;
}

.manage__labels {
    padding-top: 10px;
    margin-top: 10px;
    flex-direction: column;
    gap: 10px;
}

.manage__labels>div {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.manage__labels>div>button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px !important;
}

.manage__labels>div>button span:first-child {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 100px;
}

.manage__labels>div>button span:last-child {
    font-size: 28px;
}

.assign__label.show {
    display: flex !important;
}

#dismissLabelPopup {
    cursor: pointer;
}

#create__new__label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.assign__label>div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--color-gray-light);
}

.assign__label>div:nth-child(2) {
    flex-direction: column;
    padding: 10px !important;
}

.assigned__label {
    display: flex;
    gap: 9px;
    flex-direction: column;
}

.assigned__label button {
    background: transparent !important;
    color: #000 !important;
}

.label__dropdown {
    position: relative;
}

.label__dropdown>div:nth-child(1) {
    width: 100%;
    border: 1px solid var(--color-gray-light) !important;
    padding: 6px 10px;
    border-radius: 7px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    cursor: pointer;
}

.label__dropdown>div:nth-child(2) {
    padding: 6px 10px;
    border: 1px solid var(--color-gray-light) !important;
    border-radius: 7px;
    position: absolute;
    margin-top: 10px;
    width: 100%;
    background: white;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.label__dropdown>div:nth-child(2) {
    cursor: pointer;
}

#new__label__dropdown.show,
#filter__by__label.show {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    background-color: var(--color-white-2);
}

#new__label__dropdown p span,
#filter__by__label p span {
    color: var(--color-black);
}

.m-auto {
    margin: auto;
}

.text-center {
    text-align: center;
}

.label__dropdown>div:nth-child(2) p {
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: 4px;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--color-gray-light) !important;
}

.label__dropdown>div:nth-child(2) p span:nth-child(1) {
    display: flex;
    width: 15px;
    height: 15px;
    border-radius: 100%;
}

.assign__label a,
.assign__label button {
    font-size: 16px;
    background: var(--color-white-2);
    border: none;
    outline: none;
    padding: 8px 10px;
    border: 1px solid var(--color-gray-light) !important;
    min-width: 90px;
    border-radius: 7px;
    color: var(--color-black);
    text-decoration: none;
    cursor: pointer;
}

.assign__label #assignLabelBtn {
    background-color: var(--color-primary);
    color: white;
}

.viewCard .created {
    position: absolute;
    background: var(--color-secondary);
    color: var(--color-white) !important;
    padding: 5px 15px;
    border-radius: 5px 0 0 0;
    z-index: 44444444;
}

.secondPopUp .header__bg {
    background: url(../images/download_bg.svg) no-repeat;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    background-position: center;
    background-size: cover;
    width: 104%;
    margin: auto -8px;
    overflow: hidden;
    flex-direction: column;
}

.secondPopUp .header__bg img {
    padding: 30px;
    text-align: center;
    margin: auto;
    margin: -4px auto;
    width: 60%;
    height: auto;
}

.secondPopUp {
    display: none;
}

.secondPopUp .popup__header {
    background-color: transparent;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.secondPopUp .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.secondPopUp .row button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    color: var(--color-gray);
}

.secondPopUp .row button img {
    transition: 300ms all ease-out;
}

.secondPopUp .row button:hover img {
    transform: scale(1.1);
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.2));
}

.download__btn,
.applicationsPopup .row>a {
    padding: 15px 50px;
    position: relative;
    border: 1px solid var(--color-gray) !important;
    border-radius: 5px;
}

.download__btn.active {
    border-color: var(--color-primary) !important;
}

.dark .download__btn.active {
    border-color: #18639c !important;
}

.download__btn::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    background-color: var(--color-gray);
    border-radius: 50%;
}

.download__btn.active::after {
    background-color: var(--color-primary);
}

.dark .download__btn.active::after {
    background-color: #18639c;
}

.secondPopUp .row .download__btn img {
    width: 45px !important;
}

.shareLink {
    cursor: pointer;
    position: relative;
}

.shareLink::before {
    opacity: 0;
    visibility: hidden;
    content: "Copied";
    position: absolute;
    bottom: 0;
    left: 34px;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 9999999;
    transition: 100ms all ease-out;
}

.shareLink.active::before {
    opacity: 1;
    visibility: visible;
    bottom: -36px;
    left: 34px;
}

.shareLink.inactive .tooltip .bottom {
    left: 35%;
}

.shareLink.inactive .tooltip:hover .bottom {
    top: 78%;
    left: 35%;
}

.sharePopup .header__bg {
    padding: 30px;
    text-align: center;
}

.sharePopup .header__bg p {
    font-size: 14px;
}

.sharePopup .popup__body .text__muted {
    width: 100%;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    margin-top: 15px;
}

.text__muted a {
    color: var(--color-gray);
    text-decoration: none;
}

.normalScreen {
    display: none;
}

.change_log {
    background-color: var(--color-white);
    padding-bottom: 200px;
}

.section-header {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.change-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.change-card-header span:first-of-type {
    background-color: var(--color-gray-light);
    padding: 3px 20px;
    border-radius: 5px;
    position: relative;
    color: #838383;
}

.change-card-header span:first-of-type::before {
    position: absolute;
    background: var(--color-secondary);
    content: "";
    width: 15px;
    height: 15px;
    clip-path: circle();
    top: 30%;
    left: -50px;
}

.badge-success {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: 3px 15px;
    border-radius: 30px;
    font-size: 14px;
}

.change-card-body {
    padding: 20px;
}

.change-card {
    padding-left: 42px;
    border-left: 1px solid #d1d1d1;
    margin-top: 100px;
}

.change-card h2 {
    font-size: 24px;
}

.change-card ul,
.change-card ol {
    padding-left: 40px;
}

.change_log .card-main {
    margin-top: 50px;
}

.change-log-footer {
    text-align: center;
    margin-top: 150px;
    font-size: 20px;
    font-weight: 600;
}

.change-log-footer a {
    color: #000;
    text-decoration: none;
}

.contact_us {
    background-color: var(--color-white);
    min-height: 100vh;
}

.contact_us form {
    max-width: 600px;
    border: 1px solid lightgray;
    border-radius: 7px;
    padding: 20px;
    margin: 20px 0px;
}

.contact_us .input-group {
    width: 100%;
    margin-bottom: 20px;
}

.contact_us .input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    color: #8d8d8d;
}

.contact_us .input-group input,
.contact_us .input-group textarea {
    font-family: var(--font-family);
    padding: 10px;
    border: none;
    border-bottom: 1px solid var(--color-gray-light);
    width: 100%;
    background: transparent;
    border-radius: 5px;
    resize: none;
}

.contact_us .input-group textarea {
    background-color: var(--color-gray-light);
}

.contact_us .input-group input:focus,
.contact_us .input-group textarea:focus {
    outline: none;
}

.contact_us div.input-group:last-of-type {
    text-align: right;
}

.contact_us .btn-primary {
    color: var(--color-white);
    width: max-content !important;
}

.contact_us p {
    font-size: 14px;
}

.btn-primary {
    background-color: var(--color-secondary) !important;
    padding: 10px 30px;
    cursor: pointer;
}

.row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.contact_us .row {
    gap: 30px;
}

.col {
    flex: 1;
    min-width: 260px;
}

.contact_us div.col:first-of-type {
    flex: 2;
}

.contact_us div.col:first-of-type a {
    text-decoration: none;
    color: var(--color-black);
}

.contact_us div.col:last-of-type {
    max-width: 300px;
}

.contact_us div.col:last-of-type .img-main {
    width: 100%;
    height: auto;
}

.contact_us address {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact_us address a {
    text-decoration: none;
    display: flex;
    gap: 10px;
    align-items: start;
    color: var(--color-black);
    font-style: normal;
    font-size: 16px;
}

.contact_us address a img {
    width: 28px;
    height: 28px;
}

#contact_success {
    max-width: 450px;
    text-align: center;
}

#contact_success .btn-primary {
    margin: auto auto 30px;
    border-radius: 5px;
    border: none;
    position: relative !important;
    top: unset !important;
    left: unset !important;
    padding: 10px 30px;
    font-size: 18px;
}

.privacy h1,
.privacy h2,
.privacy h3 {
    color: var(--color-primary);
}

.privacy h1 {
    border-bottom: 4px solid var(--color-primary);
    margin-bottom: 20px;
}

.privacy a {
    text-decoration: none;
    color: var(--color-primary);
}

.privacy .container {
    width: 60%;
    font-size: 14px;
}

.login_popup .popup__header {
    border-bottom: 1px solid var(--color-gray);
}

.login_popup .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

.login_popup .row button {
    display: flex !important;
    flex-direction: row !important;
    border: 1px solid var(--color-gray);
    padding: 15px 10px 15px 15%;
    width: 100%;
    border-radius: 5px;
}

.login_popup .popup__footer {
    border-top: 1px solid var(--color-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.popup__dismiss {
    color: var(--color-gray);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
}

.sharePopup .popup__footer,
.errorSnap .popup__footer {
    display: grid;
    place-content: center;
    margin-bottom: 20px;
    margin-top: 15px;
}

.feedback__popup .row button {
    padding: 15px 30px 10px;
    background: var(--color-gray-light);
    border-radius: 5px;
    width: 100px;
}

.feedback__popup .row button img {
    width: 30px;
    border-radius: 50%;
}

.feedback__popup .row button:hover img,
.feedback__popup .row button.active img {
    background-color: #ffd053;
}

.feedback__popup .row button:hover,
.feedback__popup .row button.active {
    background-color: var(--color-white);
    box-shadow: 0 3px 10px var(--color-gray-shadow);
    font-weight: 700;
}

.feedback__popup .popup__body {
    width: 700px;
}

.message_div {
    display: flex;
    align-items: center;
    width: 90%;
    gap: 10px;
}

.message_div textarea {
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--color-gray);
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    resize: none;
}

.message_div button img {
    width: 40px;
}

.message_div button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.message_div button.disable {
    filter: brightness(0.4);
}

.message_div textarea:focus {
    outline: none;
}

.message_box,
.emoji_box {
    position: absolute;
    transform: translate(0px, -100px);
    opacity: 0;
    visibility: visible;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
}

.message_box {
    width: 100%;
}

.feedback__popup .popup__body {
    height: 180px;
    width: 635px;
}

.feedback__success div {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 30px;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

div.disclaimer-1 {
    padding: 10px 5px 5px 10px;
}

div#disclaimer {
    width: 700px;
    min-height: 254px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #fff;
    position: absolute;
    z-index: 999;
    right: 1%;
    bottom: 2%;
    box-shadow: 0px -11px 38px -3px lightgray;
    display: none;
    padding-bottom: 15px;
}

.disclaimer-close {
    color: var(--color-black) !important;
}

.disclaimer-content {
    padding: 10px 5px;
}

.disclaimer-title>div {
    padding: 10px 5px;
    gap: 10px;
}

.disclaimer-heading-text {
    margin-top: 3px;
    color: #000;
    font-family: Open Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    /* 120% */
}

.loader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
    background: url(../images/loader.gif) no-repeat center center;
    background-color: var(--color-white);
    background-size: 100px;
    opacity: 0.8;
}

.loader video {
    width: 100px;
    height: auto;
    margin: auto;
}

.disclaimer-footer {
    justify-content: right;
    padding-right: 20px;
    margin-top: 10px;
}

.disclaimer-cancel {
    margin-right: 15px;
    width: 130px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid #eceef0;
    background: #fff;
    cursor: pointer;
}

.disclaimer-email_us {
    width: 130px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #000;
    color: var(--color-white);
    cursor: pointer;
}

.disclaimer-content p {
    color: #000;
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    width: 100%;
}

/*
|======================================================*
|               profile
|======================================================*
*/

.profile__setting__page {
    padding: 10px;
    border: 1px solid var(--color-gray-light) !important;
    box-shadow: var(--color-gray-shadow);
    background-color: var(--color-white);
    border-radius: 8px;
    margin-top: 10px;
    min-height: 500px;
}

.profile__topbar {
    display: flex;
    gap: 20px;
    border-bottom: 2px solid #eee;
    background-color: var(--color-white-2);
}

.profile__topbar>div {
    display: flex;
    gap: 10px;
    padding: 20px;
    flex: 1;
    max-width: 170px;
    margin-bottom: -1px;
    justify-content: center;
    transition: color 0.3s ease;
    border-bottom: 2px solid transparent !important;
    cursor: pointer;
}

.profile__topbar>div.active,
.profile__topbar>div:hover {
    border-bottom: 2px solid var(--color-secondary) !important;
}

.profile__topbar>div.active p,
.profile__topbar>div:hover p {
    color: var(--color-black);
    font-weight: 600;
}

.profile__topbar>div.active img,
.profile__topbar>div:hover img {
    filter: var(--doc-icon);
}

.profile__topbar>div img {
    max-width: 20px;
    width: 100%;
    transition: 0.3s ease;
}

.profile__topbar>div p {
    color: #cfcfcf;
    transition: 0.3s ease;
}

/* profile update */
.profile__wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 20px;
}

.profile__wrapper>div {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.profile__wrapper>div>div:nth-child(1) {
    flex: 0.6;
    padding-right: 60px;
}

.profile__wrapper>div>div {
    flex: 1;
}

.profile__img__edit>div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#profile__img {
    width: 120px;
    height: 120px;
    background-color: var(--color-secondary);
    border-radius: 100%;
    display: grid;
    place-items: center;
}

#profile__img span {
    color: var(--color-white);
    font-size: 42px !important;
}

.profile__wrapper button {
    border: 1px solid #dddddd;
    background: transparent;
    padding: 10px 15px;
    min-width: 140px;
    font-size: 18px;
    border-radius: 7px;
    margin: 0px 6px;
}

.profile__info__edit>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.profile__info__edit>div:nth-child(2)>div {
    display: flex;
    justify-content: space-between;
}

.profile__wrapper div div div input {
    border: 1px solid var(--color-gray-light);
    background-color: var(--color-white-2);
    min-width: 315px;
    border-radius: 7px;
    padding: 12px;
}

.default-circle {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    margin-right: 5px;
    transition: background-color 0.3s;
}

.default-circle::before {
    content: "✔";
    color: white;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    /* Initially hide the checkmark */
}

.default-circle.selected {
    background-color: #146ff9 !important;
}

.default-circle.selected::before {
    display: block;
    /* Show the checkmark only on the selected circle */
}

.default-color-selection {
    display: flex;
    gap: 30px !important;
    align-items: center;
}

.color-picker {
    display: flex;
    align-items: center !important;
    position: relative;
}

.color-picker p {
    flex: 0.5 !important;
    font-size: 18px;
    font-weight: 400;
    color: var(--paragraph-color);
    align-items: end;
    justify-content: end;
    display: flex;
}

#selectedColor {
    border: 1px solid var(--color-gray-light);
    padding: 10px;
    border-radius: 5px;
    max-width: 90px;
}

#colorInput {
    width: 0px;
    right: 75%;
    opacity: 0;
    cursor: pointer;
    position: absolute;
}

.color-label {
    border: 2px solid #5ebfff;
    border-radius: 50%;
    padding: 2px;
}

.color-picker input {
    padding: 10px;
}

.color-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #5ebfff;
    border: 2px solid #5ebfff;
    position: relative;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}



/*
|======================================================*
|           profile preferences
|======================================================*
*/
.profile__preferences {
    display: flex;
    padding: 30px;
    gap: 60px;
}

.profile__preferences>div:nth-child(1) {
    flex: 0.5;
    min-width: 300px;
}

.theme__list {
    flex: 1;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: center;
}

.theme__list>div {
    border: 1px solid var(--color-gray-light) !important;
    box-shadow: var(--color-gray-shadow);
    background-color: var(--color-white-2) !important;
    padding: 10px;
    border-radius: 7px;
    transition: 0.3s ease;
    cursor: pointer;
}

.theme__list>div>div:nth-child(1) img {
    filter: var(--black-icon) !important;
}

.theme__list>div:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px;
}

.theme__list>div>div:nth-child(1) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
}

.theme__list>div>div:nth-child(1) p {
    font-size: 16px;
}

.theme__list>div>div:nth-child(1) img {
    width: 20px;
    gap: 10px;
}

.theme__list>div>div:nth-child(2) img {
    max-width: 220px;
}

.theme__list>div>div:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme__list>div>div:last-child p {
    font-size: 16px;
}

.theme__list>div>div:last-child span {
    font-size: 14px;
}

/*
|======================================================*
|              profile setting label
|======================================================*
*/
.settings__label {
    display: flex;
    gap: 90px;
    padding: 20px;
}

.settings__label>div:nth-child(1) {
    flex: 0.4;
    min-width: 300px;
}

.setting__label__list {
    flex: 1;
}

.new__label__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.new__label__list>div {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 20px;
}

.new__label__list>div>div {
    display: flex;
    gap: 30px;
    align-items: center;
}

.new__label__list>div>div>*:first-child {
    flex: 0.3;
}

.new__label__list>div>div>input {
    border: 1px solid #dddddd;
    min-width: 315px;
    border-radius: 7px;
    padding: 12px !important;
    font-size: 18px;
}

.new__label__list>div>div>*:last-child {
    flex: 1;
    display: flex;
    gap: 20px;
}

.new__label__list input {
    background: var(--color-white-2) !important;
}

.label__color__list span {
    display: flex;
    height: 30px;
    width: 30px;
    background-color: red;
    border-radius: 100%;
    border: 3px solid transparent;
    cursor: pointer;
}

.label__color__list span:nth-child(5) {
    background-color: orange;
}

.label__color__list span:nth-child(2),
.label__color__list span:nth-child(6) {
    background-color: purple;
}

.label__color__list span:nth-child(3),
.label__color__list span:nth-child(7) {
    background-color: #02dac5;
}

.label__color__list span:nth-child(4),
.label__color__list span:nth-child(8) {
    background-color: limegreen;
}

.label__color__list span.active::before,
.label__color__list span:hover::before {
    content: "";
    display: flex;
    min-width: 33px;
    min-height: 33px;
    margin-top: -6px;
    margin-left: -6.5px;
    border: 3px solid var(--color-primary);
    border-radius: 100%;
}

.file__section {
    display: none;
    align-items: center;
    gap: 5px;
}

/* label errors */

.label__errors {
    display: flex;
    flex-direction: row !important;
    margin-top: 0px !important;
    flex-wrap: wrap;
    gap: 10px !important;
}

.label__errors p {
    background: #ffe8e8;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 16px;
    color: #e10909;
}

.label__errors p span:nth-child(2) {
    border: 1px solid #e10909;
    padding: 1px 7px;
    border-radius: 100%;
    cursor: pointer;
    margin-left: 30px;
}

.add__label__button.btn__primary {
    max-width: fit-content !important;
    width: fit-content !important;
    margin-left: auto;
}

.create__label__btn {
    width: fit-content !important;
    margin-left: auto;
}

.holder {
    position: relative;
}

.holder .holder-menu {
    position: absolute;
    top: 0;
    left: calc(100% + 4px);
    background-color: var(--color-white);
    box-shadow: 1px 4px 12px 0px var(--Shodowtool);
    z-index: 10;
    min-width: 174px;
    border-radius: 8px;
    overflow: hidden;
    padding: 8px;
    border:0.5px solid #ECEEF0;
}

.holder-menu a {
    width: 100%;
    min-width: 158px !important;
    flex-direction: row;
    justify-content: start;
    gap: 8px;
    padding: 10px;
    height: 100%;
    min-height: 44px !important;
    border-bottom: none;
    border: 0px;
    border-radius: 6px;

    span{
        font-size: 12px !important;
        line-height: 16px !important;
        font-weight: 500 !important;
        color: var(--color-paragraph) !important;
    }
}

.holder-menu a img {
    width: 20px;
    height: 20px;
}
.right__header {
    display: flex;
    align-items: center;
    justify-content: end;
}

.ql-snow.ql-toolbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected{
    color: var(--color-black);
}
.undo_container {
    display: flex;
    align-items: center;
    gap:8px;
}
#customUndoRedo {
    display: none;
    align-items: center;
    justify-content: center;
    gap:20px;
}

@media only screen and (max-width: 1120px) {

    /* .document__options label span,
    .document__options div span {
        display: none;
    } */
    .title__bar .document__options {
        gap: 0;
    }

    .title__bar .document__options div,
    .title__bar .document__options label {
        padding-left: 10px;
    }

    .settings__label {
        flex-direction: column;
    }

    .sponser_link {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    .title__bar {
        gap: 5px;
    }

    .title__bar .document__options div,
    .title__bar .document__options label {
        gap: 5px;
        padding: 0 5px;
    }

    #doc__status {
        /* position: absolute !important;
        top: 160px;
        right: 22px; */
        /* left: auto; */
        z-index: 1;
        gap: 5px;
        padding-left: 6px;
        font-size: 10px;
    }
}

.tox-notifications-container {
    display: none !important;
}

.coffee__mob {
    margin-top: -10px;
    display: none !important;
}

@media only screen and (max-width: 1080px) {
    .coffee__web {
        display: none !important;
    }

    .coffee__mob {
        /* margin-top: -10px; */
        display: block !important;
    }
}

@media screen and (max-width:980px) {
    .word__counter {
        /* border-right: 1px solid var(--color-gray); */
        padding-right: 10px;
    }

    .words__wrapper p {
        font-size: 14px !important;
    }

     .words__wrapper {
        align-items: flex-end;
        max-height: 47px;
        border-top: 1px solid var(--color-gray-light);
        overflow: visible;
    }

    .words__wrapper_left {
        display: flex !important;
    }

    .words__wrapper_right {
        width: fit-content !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: flex-end !important;
        margin-bottom: 5px;
    }

    .words__wrapper .words__wrapper_right div:nth-child(1) {
        z-index: 1;
    }

    .words__wrapper #clear__document span {
        display: none !important;
    }

    .words__wrapper #clear__document:hover {
        filter: var(--filter-pragraph) !important;
        color: var(--color-paragraph) !important;
    }

     .words__wrapper #clear__document {
        border: none !important;
        padding: 0px 9px !important;
        /* border-radius: 5px; */
        cursor: pointer;
    }

    #customUndoRedo {
        display: flex;
    }
    #customUndoRedo button{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background-color: transparent;
        outline: none;
        border: none;
        cursor: pointer;
    }
    #customUndoRedo button:hover{
        background-color: unset;
    }
    #customUndoRedo button img{
        margin: 0 !important;
    }
}

@media only screen and (max-width: 768px) {
     .holder-menu a {
        min-height: 55px !important;
    }

    #editorTextarea {
        padding-bottom: 26px !important;
    }

    .title__bar {
        height: fit-content;
    }

    aside nav {
        overflow: auto;
        padding-bottom: 100px !important;
    }

    #pricingBtn {
        display: none;
    }

    .title__bar {
        flex-direction: column;
        gap: 0;
        padding: 0 !important;
    }

    .file__section {
        display: block;
    }

    .file__section img {
        display: block;
        width: 24px;
        height: 24px;
    }
    .file__section span {
        font-size: 14px !important;
    }


    div#disclaimer {
        width: 98%;
    }

    .header-main .right__header {
        gap: 20px;
    }

    .title__bar .doc__title {
        position: static;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        border: none !important;
        outline: none !important;
        border-bottom: 1px solid var(--color-gray-light) !important;
        border-radius: 0 !important;
        border-top-right-radius: 6px !important;
        border-top-left-radius: 6px !important;
        font-weight: 400 !important;
        height: 45px;
    }

    .title__bar .doc__title:focus {
        outline: none !important;
        border-top: none !important;
        border-right: none !important;
        border-left: none !important;
        border-color: var(--color-gray-light);
    }

    .page-contents.active {
        padding: 0 !important;
    }

    .page-contents.active form {
        border-radius: 0 !important;
    }

    .doc__title__wrapper {
        width: 100%;
    }

    .document__options {
        display: none !important;
    }

    .title__bar {
        flex-direction: column-reverse;
        padding-inline: 0 !important;

    }

    .toolbar-wrapper {
        width: 100%;
        justify-content: start !important;
        min-height: 44px;
    }

    .file__section {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .holder .holder-menu {
        position: relative;
        top: 0;
        left: 0;
        padding: 0px;
        border: 0px;
        z-index: 1;
        min-width: 100%;
        border-radius: 0 !important;
        overflow: visible;
    }

    .holder-menu a {
        min-width: 120px;
        flex-direction: row;
        justify-content: start;
        gap: 8px;
        padding: 0;
        min-height: 40px;
        border-bottom: 1px solid var(--color-gray-light);
        border-radius: 0px;
    }

    .holder-menu a img {
        width: 20px;
        height: 20px;
    }

    .ql-undo ,
    .ql-redo {
        display: none !important;
    }
    .guestUser {
        padding: 12px 16px !important;
    }

    .input__group {
        position: relative !important;
        gap: 0px !important;
        height: unset !important;
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 660px) {
    .right__header {
        flex-direction: row;
    }

    .title__bar .doc__title:focus {
        outline: none !important;
        border-top: none !important;
        border-right: none !important;
        border-left: none !important;
        border-radius: 0;
    }

    .ql-toolbar.ql-snow {
        margin: 0;
    }

    #pricingBtn {
        display: none !important;
    }

    .words__wrapper div:nth-child(2) {
        border: none !important;
    }

}

@media only screen and (max-width: 940px) {
    .langs__dropdown a img {
        filter: unset !important;
    }

    .langs__dropdown a {
        border-top: unset !important;
        padding: 0 !important;
    }

    .page-contents.active {
        padding: 24px;
    }

    .formating__langauge {
        display: flex;
    }

    aside a {
        flex-direction: row;
        gap: 8px;
        justify-content: start !important;
        padding: 0px;
        min-height: 55px !important;
    }

    aside nav.active a span {
        font-size: 12px !important;
        line-height: 16px !important;
        font-weight: 500 !important;
        color: var(--color-paragraph) !important;
    }

    .nav-btn-MinMax {
        display: none !important;
    }

    .mianSidebar {
        position: absolute !important;
        left: 0 !important;
        z-index: 9999 !important;
        width: 230px !important;
        background-color: var(--color-white);
        top: 0 !important;
    }
    aside {
        position: fixed ;
    }

    aside a:first-child {
        border-top: none !important;
    }

    aside nav.active a {
        background-color: var(--color-white) !important;
    }

    aside .toggle__nav__options img {
        display: none !important;
    }

    aside nav {
        padding: 0px 10px;
        margin-top: 0px !important;
    }
    .main-content {
        width: 100%;
    }

    .doc__title__wrapper {
        flex-direction: column;
    }

    .about__web__btn {
        display: none !important;
    }

    .title__bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
    }

    .title__bar .document__options div,
    .title__bar .document__options label {
        padding: 0 10px;
    }

    /* .title__bar .document__options {
        min-height: 43px !important;
        float: right;
        margin-top: -4px;
    } */

    #doc__status {
        /* position: absolute !important;
        top: 160px;
        right: 22px; */
        /* left: auto; */
        z-index: 1;
        background-color: unset;
        padding-left: 6px;
        font-size: 10px;
    }

    .sidebar {
        transition: 300ms all cubic-bezier(0.175, 0.885, 0.32, 1.275);
        left: -100%;
    }

    .popup,
    .secondPopUp {
        width: auto;
        min-width: 280px !important;
    }

    .sideVisible.sidebar {
        visibility: visible;
        left: 0;
        width: 230px !important;
    }

    .header-main .input__group {
        display: none;
    }

    .right__header {
        display: none;
    }

    .main-content {
        margin-left: unset !important;
        padding-left: 0;
        position: relative;
    }

    .ql-toolbar {
        top: 95px !important;
    }

    .page-contents {
        padding: 42px 10px 10px 3px;
    }

    .nav__toggler {
        display: block;
    }

    .popup,
    .secondPopUp {
        width: 90%;
    }

    .privacy .container {
        width: 90%;
    }

    .downloadPopup,
    .login_popup,
    .feedback__popup,
    .popup__header {
        min-width: 280px;
    }

    .doc__title {
        margin-top: -27px !important;
    }

    /* #editorTextarea {
        margin-top: 15px !important;
    } */

    .input__group {
        gap: 5px;
    }

    .toolbar-wrapper {
        min-width: 392px !important;
    }

    .header__lang {
        display: none !important;
    }

    .title__bar .doc__title {
        top: 40px;
        left: 10px !important;
    }

    .guestUser {
        padding: 12px 24px;
    }

    .switch__langs {
        background: var(--color-white);
        border: none;
        padding: 10px 0;
        justify-content: space-between;
    }

    .switch__langs img {
        filter: none;
    }

    .langs__dropdown {
        bottom: 42px;
        top: unset;
    }
}

@media only screen and (max-width: 550px) {
    header {
        padding: 0 !important;
    }

    .LoggedUser {
        padding: 10px 55px 10px 13px !important;
    }

    .guestUser {
        padding: 8px 16px !important;
    }

    .document__options label span,
    .document__options div span {
        display: none;
    }

    .document__options {
        justify-content: space-evenly !important;
        gap: 0 !important;
    }

    .document__options label,
    .document__options div {
        padding: 0 !important;
        flex: 1 !important;
        display: flex;
        justify-content: center;
        margin: 0 !important;
    }

    .document__options label:first-child {
        border: none !important;
    }

    .words__wrapper {
        display: flex;
        gap: 20px;
        background: var(--color-white);
        left: 4px;
        justify-content: flex-end;
        padding: 5px;
    }

    #editorTextarea {
        height: 60vh !important;
    }

    .page-contents.active {
        padding: 0px;
    }

    .ql-toolbar {
        margin: 0 14px;
        display: flex !important;
        align-items: center;
        gap: 5px;
    }

    .title__bar {
        padding: 8px 0px;
    }

    .ql-snow .ql-picker-label {
        padding-left: 0px;
    }

    [data-tooltip]::before,
    [data-tooltip]::after {
        display: none;
    }

    .title__bar .fullscreen__btn {
        display: none !important;
    }

    #doc__status::before {
        width: 10px;
        height: 10px;
    }

    #doc__status {
        gap: 5px;
        font-size: 10px;
        margin-left: 0;
    }

    .ql-toolbar.ql-snow {
        margin-right: 0;
    }

     .toolbar-wrapper {
        padding: 0px 8px !important;
    }
}

@media only screen and (max-width: 515px) {
    .doc_status_text {
        display: none;
    }
}

@media only screen and (max-width: 500px) {

    /* .ql-toolbar.ql-snow {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    } */
    .popup__body {
        padding: 1em;
    }

    /* #doc__status {
        top: 95px !important;
    } */

    .title__bar .doc__title {
        top: 70px;
    }

    /* #editorTextarea {
        margin-top: 45px !important;
    } */

    .ql-toolbar .ql-formats button svg {
        transform: scale(1.1);
    }

    .ql-toolbar {
        display: none;
        /* position: absolute; */
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        padding: 6px;
        border-radius: 4px;
        z-index: 99;
    }

    .settings__label {
        gap: 10px;
    }

    .new__label__list {
        gap: 0;
        margin-top: 0;
    }

    .new__label__list>div>div>input {
        min-width: 100%;
    }

    .new__label__list>div {
        gap: 15px;
    }

    .btn__primary {
        margin: 0;
    }

    .feedback__popup .row button {
        padding: 10px 10px 10px;
    }

    .feedback__popup .popup__body {
        height: 220px;
    }

    .secondPopUp .row {
        padding-right: 15px;
    }

    .ql-toolbar.ql-snow {
        margin: 0;
    }
}

@media only screen and (max-width: 450px) {
    .words__wrapper {
        display: flex;
        gap: 20px;
        background: var(--color-white);
        left: 4px;
        justify-content: flex-end;
        padding: 5px;
    }

    .nav_btn {
        align-self: end;
    }

    .current__lang {
        display: none;
    }


    #doc__status {
        position: absolute;
        top: 12px !important;
        right: 10px !important;
    }

    #doc__status::before {
        width: 16px;
        height: 16px;
    }

    .title__bar .doc__title {
        padding-right: 15px;
    }

    .toolbar-wrapper {
        min-height: 40px;
    }

    .ql-snow .ql-picker {
        width: 74px !important;
    }
}

.sidebar__about__btn {
    display: none;
}

@media only screen and (max-width: 400px) {
    header .right__header .icon__btn {
        min-width: 30px !important;
        height: 30px;
    }

    .header-main button {
        width: 30px;
        height: 30px;
    }

    .responsive-logo {
        width: 25px;
    }

    .dropdown__file {
        font-size: 14px;
    }

    .guestUser {
        padding: 8px 16px !important;
    }

    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 0 !important;
    }

    .words__wrapper div:nth-child(2) {
        padding: 0 3px !important;
    }

    .login_popup .row button {
        padding: 5px !important;
    }

    .login_popup .popup__body .row {
        padding-right: 0 !important;
    }

    #contact_success .popup__body img {
        width: 100% !important;
    }

    .words__wrapper {
        gap: 0 !important;
    }

    .words__wrapper div:nth-child(2) {
        font-size: 12px;
    }

    #pricingBtn {
        min-width: 64px;
    }

    .guestUser {
        padding: 5px !important;
    }
}


@media only screen and (max-width: 375px) {
    .ql-image {
        display: none !important;
    }

    .hamburger {
        top: 10px !important;
    }

    .hamburger span {
        top: 10px !important;
    }

    .file__section span {
        font-size: 14px !important;
    }

}

@media only screen and (max-width: 375px) {
    .ql-snow .ql-picker-label::before {
        font-size: 12px !important;
    }

    .ql-toolbar.ql-snow {
        flex-wrap: wrap;
    }

}

.file__section span {
    font-size: 24px;
}

@media only screen and (max-width: 320px) {
    div#disclaimer {
        flex-direction: column;
    }

    .file__section span {
        font-size: 14px !important;
    }

    .file__section img {
        width: 24px;
        height: 24px;
    }

    .hamburger {
        top: 3px !important;
    }

    /* #doc__status {
        top: 126px !important;
        right: 12px !important;
    } */
     header .right__header #loginBtn {
        font-size: 12px !important;
     }
     .hamburger span {
        min-width: 20px;
     }
     .hamburger {
            gap: 6px;
     }
}

.ql-editor {
    font-size: 18px;
    padding-top: 0;
}

.ql-toolbar svg {
    filter: var(--filter-pragraph) !important;
}

.toolbar-wrapper {
    min-width: 390px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.ql-toolbar {
    /* position: absolute;
    top: 85px; */
    border-radius: 5px;
    /* transform: scale(1.08); */
    border: none !important;
    z-index: 1;
    background-color: var(--color-white-2) !important;
    /* margin-left: 15px; */
}

.notepad__text__area,
#editorTextarea .ql-editor {
    min-height: 400px !important;
    height: 100%;
}
#editorTextarea .ql-editor {
    padding-bottom: 50px;
}


.ql-editor * {
    color: var(--color-black) !important;
}

#editorTextarea {
    background: var(--color-white-2);
    border: 1px solid var(--color-white) !important;
    /* border-radius: 5px !important; */
    min-height: calc(1vh * 100 - 235px);
    height: calc(-192px + 100vh) ;
    /* max-height: 560px;  */
    overflow: hidden;
    padding-left: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-gray-light) !important;

    /* @media (max-width:980px) {
        height: calc(100vh - 180px) !important;
    } */
}

#editorTextarea .ql-editor {
    min-height: 400px !important;
    height: 100%;
}

.ql-toolbar svg {
    filter: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(9%) hue-rotate(54deg) brightness(100%) contrast(85%);
}

.ql-toolbar button.ql-active svg {
    filter: none;
}

.words__wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
    padding-left: 10px;
    /* margin-top: 20px !important; */
    font-size: 16px !important;
    padding: 8px 16px;
    position: sticky;
    top: 0;
}

.words__wrapper_left {
    display: none;
    align-items: center;
    gap: 20px;
}


.words__wrapper_right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 20px;
}

.words__wrapper.active {
    visibility: hidden;
}

.words__wrapper>div:first-child.active {
    visibility: hidden;
    opacity: 0;
}

.words__wrapper img {
    max-width: 20px;
    width: 20px;
    height: 20px;
    margin-top: 5px !important;
    margin-bottom: -3px !important;
}

.words__wrapper .words__wrapper_right div:nth-child(1) {
    display: flex;
    gap: 20px;
    align-items: center;
    gap: 8px;
}

.words__wrapper p {
    font-size: 16px;
}

.words__wrapper #clear__document {
    border: 1px solid var(--color-paragraph);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;

    span{
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        color: var(--color-paragraph);
    }
}

.words__wrapper #clear__document:hover {
    filter: var(--filter-pragraph);
    color: var(--filter-pragraph);
}

.labelColorspan {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: relative;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.labelColorspan:hover>.labelNametooltip {
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
    justify-content: center;
}

.labelShowDiv {
    position: absolute;
    top: 14px;
    right: 10px;
}

.deleteBtn:hover>.labelNametooltip {
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
    justify-content: center;
    left: -18px;
    top: -30px !important;
}

.labelBtn:hover>.labelNametooltip {
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
    justify-content: center;
    left: -18px;
    top: -30px !important;
}

.labelShowDiv:hover>.labelNametooltip {
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
    justify-content: center;
}

.labelNametooltip {
    display: none;
    position: absolute;
    background-color: #212121;
    color: #fff !important;
    top: -40px;
    z-index: 99999;
    padding: 5px 8px;
    width: max-content;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 100;
    pointer-events: none;
    opacity: 80%;
}

.labelNametooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #212121 transparent transparent transparent;
}

.labelShow {
    display: flex;
}

.labelShow div {
    display: flex;
    align-self: center;
    padding-left: 12px;
}

.label__wrapper {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: flex-start;
}

.label__wrapper>div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.label__wrapper>div label {
    font-size: 16px;
    font-weight: 600;
}

.label__color__input {
    overflow: hidden;
    border: none;
    background: transparent;
    width: 100%;
    padding: 0px;
    height: 30px;
}

.label__name__input {
    flex: 1;
    border-radius: 7px;
    padding: 10px;
    font-size: 16px;
    width: 100%;
    outline: none;
}

.popop__label__button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.label__list__wrapper {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: white;
    padding: 20px;
    padding-top: 10px;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
    border-top: 1px solid lightgray;
    min-height: 183px;
    box-shadow: 0px -11px 38px -3px lightgray;
}

.label__list__wrapper .close {
    background-color: transparent;
    padding: 10px 20px;
    border: none;
    color: var(--color-black);
    font-size: 30px;
    cursor: pointer;
    border-radius: 10px;
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5555;
    float: right;
}

.label__list {
    display: flex;
    margin-top: 10px;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.label__list>div {
    display: flex;
    align-items: center;
    border: 1px solid lightgray;
    gap: 20px;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.delete_label {
    display: flex;
    align-items: center;
}

.nav_btn {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.label__list>div span {
    background: red;
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 100px;
}

.label__list>div p {
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
}

.label__list>div.active {
    border: 1px solid var(--color-secondary);
}

.done__label__list {
    position: absolute;
    bottom: 0px;
    padding: 10px;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: flex-end;
}

.done__label__list .btn__primary {
    background-color: var(--color-primary) !important;
    margin: 0px 0px 0px !important;
    padding: 6px 10px;
}

.filtered__content {
    display: flex;
    flex-direction: column;
}

.filtered__content>p {
    margin-top: 30px;
    background: whitesmoke;
    padding: 0px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.filtered__content>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#clear__document {
    display: flex;
    align-items: center;
    gap: 2px;
}

.filter-paragraph{
    filter: var(--filter-pragraph) !important;
}

#clear__document svg {
    width: 20px;
    height: 20px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    filter: var(--filter-pragraph);
}

.visible {
    transform: translate(0, 0);
    opacity: 1;
    visibility: visible;
}

#clear__document.active {
    margin-left: 65px !important;
    transition: 0.2s ease-in;
}

@media only screen and (max-width: 640px) {
    #editorTextarea {
        padding-bottom: 26px !important;
    }
    .viewcard__searchbar,
    .viewcard__searchbar>div {
        flex-direction: column;
    }

    .default-color-selection {
        flex-wrap: wrap;
    }

    .theme__list>div>div:nth-child(2) img {
        max-width: unset;
    }

    .theme__list {
        justify-content: center !important;
    }

    .autosave-seleect {
        position: absolute;
        top: 36px;
    }

    .preferences__btn {
        margin-top: 60px;
    }

    .header__option {
        flex-direction: column !important;
    }

    .upload_profile_btn {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .header-main .right__header {
        gap: 10px !important;
    }

    .viewcard__searchbar div select {
        padding: 16px 10px;
    }

    .viewCard {
        max-width: 100%;
    }

    .assign__label {
        min-width: 320px !important;
        width: 90%;
    }

    .manage__labels {
        display: flex;
        flex-direction: column;
    }

    /* MObile reponsive design */
    body {
        background-color: var(--color-white) !important;
    }

    .responsive-logo {
        width: 30px;
    }

    .mianSidebar {
        top: 58px;
    }

    .hamburger {
        top: 10px;
    }

    #editorTextarea {
        /* border: none !important; */
        padding: 10px 0 !important;
        overflow: auto;
        margin-bottom: 15px;
    }

    .words__wrapper {
        flex-direction: unset !important;
        padding: 10px;
    }

    .word__counter {
        /* border-right: 1px solid var(--color-gray); */
        padding-right: 10px;
    }

    .document__options {
        display: none !important;
    }

    .title__bar .doc__title,
    .document__options {
        min-width: 100% !important;
        border: none !important;
        border-bottom: 1px solid var(--color-gray-light) !important;
        font-weight: 600 !important;
    }

    .title__bar .doc__title {
        font-weight: 400 !important;
    }

    .input__group {
        position: relative !important;
        gap: 0px !important;
        height: unset !important;
        margin-bottom: 0;
    }

    .input__group input {
        padding: 10px 10px !important;
    }

    .title__bar .doc__title {
        width: 100% !important;
        width: unset !important;
        left: 1px;
        font-weight: 400;
        height: 45px;
    }

    .ql-editor {
        padding: 0 15px !important;
    }

    .doc__title__wrapper {
        flex-direction: unset !important;
        width: 100%;
    }

    .title__bar {
        width: 100% !important;
    }

    .toolbar-wrapper {
        min-width: 100% !important;
        justify-content: start;
    }

    .ql-toolbar.ql-snow {
        width: fit-content !important;
    }

    /* #doc__status {
        top: 90px !important;
        right: 10px !important;
    } */

    .ql-toolbar {
        /* position: absolute; */
        /* top: -35px !important; */
        display: block;
        width: 93% !important;
        background-color: var(--color-white-2) !important;
        z-index: 999;
        margin: 0 14px;
    }

    .ql-snow.ql-toolbar button svg,
    .ql-snow .ql-toolbar button svg {
        height: 18px !important;
    }

    .ql-snow .ql-picker.ql-expanded .ql-picker-options {
        top: 25px;
    }

    .ql-snow .ql-picker-label::before {
        font-size: 16px;
    }

    .document__options span {
        display: none !important;
    }

    .title__bar .document__options div,
    .title__bar .document__options label {
        background-color: #fbfbfc !important;
        border-left: 1px solid var(--color-gray);
    }


    .title__bar {
        flex-direction: column-reverse !important;
        padding: 0;
    }

    .title__bar .doc__title {
        position: static;
    }

    .doc__title {
        margin-top: 0 !important;
    }


    .notepad__text__area,
    #editorTextarea .ql-editor {
        height: 100% !important;
        min-height: 100% !important;
    }



    .file__dropdown {
        position: absolute;
        top: 50px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: var(--color-white-2);
        padding: 10px;
        min-width: 180px;
        align-items: flex-start;
        border: 1px solid var(--color-gray-light);
        border-radius: 7px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
    }

    .guestUser {
        padding: 8px 16px !important;
    }
    .ql-undo, .ql-redo {
        bottom: 14px !important;
    }
}

/*
|======================================================*
|           blogs css
|======================================================*
*/

.row {
    gap: 20px;
}

.blog-card-header img {
    width: 100% !important;
}

.blog-card {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
}

.blog-card img {
    width: 100%;
    border-radius: 12px;
}

.recent-blog {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-card a {
    color: #000;
    text-decoration: none;
}

.blogs-section {
    width: 96% !important;
    max-width: unset !important;
    margin: unset !important;
}

.recent-blog .blog-card img {
    height: 265px;
    object-fit: cover;
    object-position: center;
}

.top-blogs .col:nth-child(1) {
    flex: 1.54 !important;
}

.top-blogs {
    margin-bottom: 50px;
}

.blog-card-footer {
    display: flex;
    justify-content: space-between;
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.blogs-section h1 {
    font-size: 42px;
    margin: auto;
    text-align: center;
    margin-top: 20px;
}

.related__blogs img {
    height: 200px;
    object-fit: cover;
    object-position: center center;
}

.related__blogs {
    margin-bottom: 50px;
}

.related__blogs .col {
    max-width: 330px;
}

.blogs-section>h2 {
    font-size: 38px;
    margin: auto;
    text-align: center;
    margin-bottom: 10px;
}

.suggested-blog img {
    max-height: 415px;
    object-fit: cover;
    object-position: center;
}

/*New Css*/
/*New Css*/
.formating__section {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.formatting-head {
    font-size: 18px;
    font-weight: 400;
}

/* toogle switch btn */
.toggle-switch {
    position: relative;
    width: 50px;
    height: 25px;
}

.toggle-switch input {
    display: none;
}

.switch {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 24px;
    width: 100%;
    height: 100%;
    transition: background-color 0.3s;
}

.switch:before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    top: 1px;
    left: 1px;
    transition: transform 0.3s;
}

input[id^="customToggle"]:checked+.switch {
    background-color: var(--toogle-switch);
}

input[id^="customToggle"]:checked+.switch:before {
    transform: translateX(26px);
}

/* formating model */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: linear-gradient(180deg, #f4f6f7 0%, #ffffff 64.51%);
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 500px;
}

.warning-paragraph {
    padding: 0px 60px;
    margin-bottom: 20px;
}

.modal-content h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.modal-content p {
    font-size: 14px;
    color: #5e5d5d;
    font-weight: 400;
}

.ql-picker-label {
    display: flex !important;
    align-items: center !important;
}

/* Format card section */
.format-options {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.format-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    width: 50%;
    text-align: left;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.format-card h3 {
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: 700;
}

.formating-off {
    font-size: 10px;
    font-weight: 400;
    line-height: 18px;
}

.format-card p {
    font-size: 12px;
    line-height: 20px;
    color: #000000;
}

.format-status {
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
}

.format-status span {
    font-size: 12px;
    font-weight: 600;
}

.format-card ul {
    padding-left: 20px;
    font-size: 12px;
}

.format-status.off {
    background: #ffeeef;
    color: #000000;
}

.format-status.on {
    background: #e8fbf0;
    color: #000000;
}

/* Buttons */
.modal-buttons {
    display: flex;
    justify-content: space-between;
}

.disable-button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.modal-buttons span {
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.disable-button {
    background-color: #000;
    color: #fff;
}

/*Custom Tool Bar*/
.ql-font-helvetica {
    font-family: "Helvetica", sans-serif;
}

.ql-font-arial {
    font-family: "Arial", sans-serif;
}

.ql-font-times-new-roman {
    font-family: "Times New Roman", serif;
}

.ql-font-verdana {
    font-family: "Verdana", sans-serif;
}

.ql-font-trebuchet-ms {
    font-family: "Trebuchet MS", sans-serif;
}

.ql-font-terminal {
    font-family: "Terminal", monospace;
}

.ql-font-georgia {
    font-family: "Georgia", serif;
}

.ql-font-comic-sans-ms {
    font-family: "Comic Sans MS", cursive;
}

.ql-font-arial-black {
    font-family: "Arial Black", sans-serif;
}

.ql-font-andale-mono {
    font-family: "Andale Mono", monospace;
}

.ql-font-comfortaa {
    font-family: "Comfortaa", cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"] {
    font-family: sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"] {
    font-family: serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"] {
    font-family: monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica"] {
    font-family: Helvetica, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"] {
    font-family: Arial, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"] {
    font-family: "Times New Roman", serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"] {
    font-family: Verdana, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet-ms"] {
    font-family: "Trebuchet MS", sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="terminal"] {
    font-family: Terminal, monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"] {
    font-family: Georgia, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="comic-sans-ms"] {
    font-family: "Comic Sans MS", cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial-black"] {
    font-family: "Arial Black", sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="andale-mono"] {
    font-family: "Andale Mono", monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="comfortaa"] {
    font-family: "Comfortaa", cursive;
}


[data-tooltip]:not(.inverse-tooltip) {
    position: relative;

    &::before,
    &.initial::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 9px);
        left: 50%;
        transform: translateX(-50%) translateY(0) scale(0);
        width: max-content;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        text-align: center;
        background: #333;
        color: var(--color-white);
        padding: 6px 8px;
        border-radius: 4px;
        min-width: 54px;
        transition: all 100ms;
    }

    &::after,
    &.initial::after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(-200%) scale(0);
        border: 5px solid transparent;
        border-top-color: #333;
        transition: all 100ms;
    }

    &:hover::before,
    &.initial::before,
    &:hover::after,
    &.initial::after {
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.inverse-tooltip[data-tooltip] {
    position: relative;

    &::before,
    &.initial::before {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + 9px);
        /* Changed from bottom */
        left: 50%;
        transform: translateX(-50%) translateY(0) scale(0);
        width: max-content;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        text-align: center;
        background: #333;
        color: #fff;
        padding: 6px 8px;
        border-radius: 4px;
        min-width: max-content;
        width:max-content;
        transition: all 100ms;
    }

    &::after,
    &.initial::after {
        content: '';
        position: absolute;
        top: 100%;
        /* Changed from bottom */
        left: 50%;
        transform: translateX(-50%) translateY(200%) scale(0);
        border: 5px solid transparent;
        border-bottom-color: #333;
        /* Changed from border-top-color */
        transition: all 100ms;
    }

    &:hover::before,
    &.initial::before,
    &:hover::after,
    &.initial::after {
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.ql-toolbar button:hover,
.ql-snow .ql-picker:hover {
    background-color: var(--color-gray-light);
    border-radius: 4px;
}

/* 28 july 2025  new design */
#downloadPDFForm {
    background-color: var(--color-white);
    border-radius: 6px;
}

.ql-toolbar.ql-snow {
    padding: 0 !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;

    @media (max-width: 768px) {
        gap:4px;
        margin: 4px 0px;
    }

     @media (max-width: 390px) {
        gap:3px;
        margin: 4px 0px;
    }
}

.pointer-events-none{
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.word__counter,
.char__counter{
    font-size: 14px !important;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-paragraph)
}

.pointer-events-none{
    pointer-events: none !important;
}

/* hr + utility class */
.border-r{
    border: 0px;
    outline: unset;
    border-right: 1px solid var(--color-gray-light);
    height:14px;
    display: none;

    @media(max-width:980px){
        display: block;
    }
}

@media screen and (min-width:981px) {
    .d-lg-none{
        display: none;
    }
}

@media screen and (max-width:980px){
    .d-md-none{
        display: none !important;
    }
}

.dropdown-more-menu{
    position: relative;
}

.dropdown-more-items{
    position: absolute;
    top: 33px;
    right: 0;
    z-index: 5;
    padding: 8px;
    border-radius: 8px;
    background-color: var(--color-white);
    border: 0.5px solid var(--color-gray-light);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;

    @media (max-width:372px){
        right: unset;
        left: 0;
    }
}

/* hr + utility class */

/* Dark mode */
html.dark .ql-editor [style*="background-color: yellow"],
html.dark .ql-editor p [style*="background-color: yellow"] *,
html.dark .ql-editor h1[style*="background-color: yellow"] *,
html.dark .ql-editor h2[style*="background-color: yellow"] *,
html.dark .ql-editor h3[style*="background-color: yellow"] *,
html.dark .ql-editor h4[style*="background-color: yellow"] *,
html.dark .ql-editor h5[style*="background-color: yellow"] *,
html.dark .ql-editor h6[style*="background-color: yellow"] *,
html.dark .ql-editor strong[style*="background-color: yellow"] *,
html.dark .ql-editor em[style*="background-color: yellow"] *,
html.dark .ql-editor u[style*="background-color: yellow"] * {
  color: black !important;
}

/* quill rich text editor css */
.ql-picker-label{
    color: #5E5D5D;
    font-size: 14px;
    font-weight: 500;
}


#toolbar button.ql-active{
    background-color: var(--color-gray-light);
    border-radius: 4px;
}
/* From Home page */
.ql-font-helvetica {
    font-family: "Helvetica", sans-serif;
}

.ql-font-arial {
    font-family: "Arial", sans-serif;
}

.ql-font-times-new-roman {
    font-family: "Times New Roman", serif;
}

.ql-font-verdana {
    font-family: "Verdana", sans-serif;
}

.ql-font-trebuchet-ms {
    font-family: "Trebuchet MS", sans-serif;
}

.ql-font-terminal {
    font-family: "Terminal", monospace;
}

.ql-font-georgia {
    font-family: "Georgia", serif;
}

.ql-font-comic-sans-ms {
    font-family: "Comic Sans MS", cursive;
}

.ql-font-arial-black {
    font-family: "Arial Black", sans-serif;
}

.ql-font-andale-mono {
    font-family: "Andale Mono", monospace;
}

.ql-font-comfortaa {
    font-family: "Comfortaa", cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"] {
    font-family: sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"] {
    font-family: serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"] {
    font-family: monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"] {
    font-family: sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"] {
    font-family: serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"] {
    font-family: monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica"] {
    font-family: Helvetica, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"] {
    font-family: Arial, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"] {
    font-family: "Times New Roman", serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"] {
    font-family: Verdana, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet-ms"] {
    font-family: "Trebuchet MS", sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="terminal"] {
    font-family: Terminal, monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"] {
    font-family: Georgia, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="comic-sans-ms"] {
    font-family: "Comic Sans MS", cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial-black"] {
    font-family: "Arial Black", sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="andale-mono"] {
    font-family: "Andale Mono", monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="comfortaa"] {
    font-family: "Comfortaa", cursive;
}

.ql-snow .ql-picker-label::before {
    min-width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    @media (max-width: 768px) {
        width: 60px;
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

@media (max-width: 768px) {
    .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
        min-width: 16px !important;
        width: 16px !important;
        height: 16px !important;
        min-height: 16px !important;
        margin-top: -6px !important;
    }

    .ql-snow .ql-picker.ql-header,
    .ql-snow .ql-picker.ql-font {
        width: 80px;
    }
}