.visible {
    display: inline-flex;
}

.hidden {
    display: none !important; 
}

[data-type="text"]
{
    text-overflow: ellipsis;
}

.two-lines-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens:auto;
}

.desktop {
    background-color: var(--colors-bg-primary);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

    .desktop .menu {
        position: absolute;
        width: 300px;
        height: 100%;
        top: 0;
        left: 0;
        background-color: var(--colors-bg-tretiery);
    }

.search-bar {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 21px var(--general-gaps-l-duplicate) 21px var(--general-gaps-l-duplicate);
    margin-right: 20px;
    position: relative;
    background-color: var(--colors-bg-tretiery);
    border-radius: var(--numbers-roundness-m);
}

    .search-bar .text-wrapper {
        position: relative;
        margin: 16px;
        width: 100%;
        background: none;
        font-family: var(--p-secondary-regular-font-family);
        font-weight: var(--p-secondary-regular-font-weight);
        color: var(--colors-text-disabled);
        font-size: var(--p-secondary-regular-font-size);
        letter-spacing: var(--p-secondary-regular-letter-spacing);
        line-height: var(--p-secondary-regular-line-height);
        white-space: nowrap;
        font-style: var(--p-secondary-regular-font-style);
    }

    .search-bar .search {
        position: relative;
        width: 16px;
        height: 16px;
        margin-top: -4px;
        margin-bottom: -4px;
    }


#boards-panel {
    /* margin-top: 72px; */
    display: flex;
    flex-direction: column;
    width: 293px;
    max-height: calc(100vh - 130px);
    position: absolute;
    top: 130px;
}

    .navbar-header {
        display: flex;
        flex-direction: row;
        position: relative;
        width: 100%;
    }

#boards-panel-title {
    margin-left: 40px;
    margin-bottom: 30px;
    flex: 1;
    height: 36px;
    font-family: var(--h-h3-font-family);
    font-weight: var(--h-h3-font-weight);
    color: var(--colors-text-primary);
    font-size: var(--h-h3-font-size);
    line-height: var(--h-h3-line-height);
    position: relative;
    letter-spacing: var(--h-h3-letter-spacing);
    font-style: var(--h-h3-font-style);
}

    #button-icon-boards {
        width: 40px;
        height: 40px;
        position: relative;
        overflow: hidden;
    }

.small-group {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.button-icon-link {
    background: none;
    margin: 10px;
    position: relative;
    width: 20px;
    height: 20px;
    
    /* cursor: pointer; */
}

    .button-icon-link svg {
        display: none;
        fill: transparent;
        margin-left: -6px;
        margin-top: -1px;
        width: 20px;
        height: 20px;
    }
.board-link:hover .button-icon-link svg {
    display: block;
    fill: var(--colors-icon-accent-secondary);
}

#navigation .btn-delete {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 20px;
    background-color: var(--colors-bg-accent-subdedube-additional-1);
    opacity: 0.0;
    border-radius: var(--numbers-roundness-XXS);
}

    #navigation .btn-delete img {
        border: 0;
        width: 12px;
        height: 12px;
    }

    #navigation .board-link:hover .btn-delete {
        opacity: 0.5;
    }

    #boardNavigation {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    position: relative;
    width: auto;
    /* flex: 0 0 auto; */
    overflow-x: hidden;
    overflow-y: auto;
    max-height: -webkit-fill-available;
}

.subboards-container {
    background: var(--button-secondary, #E6E6E6);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

.menu-li-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.board-link {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .board-link:hover {
        fill: #006EF0;
        background-color: #E6F1FE;
        color: #006EF0;
    }

.menu-li {
    display: flex;
    height: 56px;
    align-items: center;
    position: relative;
    width: 100%;
    justify-content: space-between;
}

.board-link:hover .chevron-wrapper path {
    fill: var(--colors-icon-accent-secondary);
}

    .dragging {
        opacity: 0.1 !important;
    }

.dragover {
    background-color:aqua;
}

.menu-sub-li {
    background-color: var(--colors-bg-secondary);
}

    .menu-sub-li .chevron-wrapper
    {
        display: none;
    }

    .menu-sub-li .board-name {
        margin-left: 30px;
    }

    .desktop .board-text {
        position: relative;
        flex: 1;
        font-family: var(--p-regular-font-family);
        font-weight: var(--p-regular-font-weight);
        color: var(--colors-text-primary);
        font-size: var(--p-regular-font-size);
        letter-spacing: var(--p-regular-letter-spacing);
        line-height: var(--p-regular-line-height);
        font-style: var(--p-regular-font-style);
    }

.chevron {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 20px;    
}


.chevron-right-round {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 20px;
}

    .board-link.active {
        background-color: #007bff;
        color: white;
    }

        .board-link.active .chevron-wrapper path {
            fill: white;
        }

.board-link.active:hover .chevron-wrapper path {
    fill: var(--colors-icon-accent-secondary);
}

        .desktop .menu-li-2 {
            background-color: var(--colors-bg-accent-subdedube-primary);
            display: flex;
            align-items: center;
            gap: 10px;
            padding: var(--numbers-gaps-l) var(--numbers-gaps-XL) var(--numbers-gaps-l) 40px;
            position: relative;
            align-self: stretch;
            width: 100%;
        }

    .desktop .text-wrapper-3 {
        position: relative;
        flex: 1;
        font-family: var(--p-regular-font-family);
        font-weight: var(--p-regular-font-weight);
        color: var(--colors-text-accent-accent);
        font-size: var(--p-regular-font-size);
        letter-spacing: var(--p-regular-letter-spacing);
        line-height: var(--p-regular-line-height);
        font-style: var(--p-regular-font-style);
    }

    .desktop .menu-li-3 {
        background-color: var(--colors-bg-accent-primary);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: var(--numbers-gaps-l) var(--numbers-gaps-XL) var(--numbers-gaps-l) 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .desktop .selectedboard-text {
        position: relative;
        flex: 1;
        font-family: var(--p-regular-font-family);
        font-weight: var(--p-regular-font-weight);
        color: var(--colors-text-on-color);
        font-size: var(--p-regular-font-size);
        letter-spacing: var(--p-regular-letter-spacing);
        line-height: var(--p-regular-line-height);
        font-style: var(--p-regular-font-style);
    }

    .desktop .frame-4 {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 0 0 var(--numbers-gaps-XL);
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .desktop .text-wrapper-5 {
        flex: 1;
        font-family: var(--p-secondary-regular-font-family);
        font-weight: var(--p-secondary-regular-font-weight);
        color: var(--colors-text-primary);
        font-size: var(--p-secondary-regular-font-size);
        line-height: var(--p-secondary-regular-line-height);
        position: relative;
        letter-spacing: var(--p-secondary-regular-letter-spacing);
        font-style: var(--p-secondary-regular-font-style);
    }

    .desktop .button-add-new-card {
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 36px;
        background-color: var(--colors-button-secondary);
        border-radius: var(--general-roundness-XS);
        overflow: hidden;
    }

    .add {
        position: relative;
        width: 24px;
        height: 24px;
    }

    .desktop .finger {
        position: absolute;
        width: 21px;
        height: 25px;
        top: 75px;
        left: 206px;
    }

    .desktop .cursor {
        position: absolute;
        width: 15px;
        height: 23px;
        top: 130px;
        left: 186px;
    }

    .logo {
        display: flex;
        flex-direction: column;
        width: 269px;
        height: 42px;
        align-items: flex-start;
        position: relative;
        margin-top: -5px;
        margin-left: 40px;
    }

#rightSide > header .logo {
    margin-left: 0;
    margin-top: -10px;
}

    .logo-text-wrapper {
        margin-top: -1px;
        font-family: var(--p-primary-primary-font-family);
        font-weight: var(--p-primary-primary-font-weight);
        color: var(--pallete-black-primary);
        font-size: var(--p-primary-primary-font-size);
        line-height: var(--p-primary-primary-line-height);
        white-space: nowrap;
        position: relative;
        letter-spacing: var(--p-primary-primary-letter-spacing);
        font-style: var(--p-primary-primary-font-style);
    }

    .logo-wrapper {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 0 0 0 1px;
        position: relative;
        flex: 0 0 auto;
    }

    .logo-dark {
        position: absolute;
        width: 197px;
        height: 24px;
        top: 0;
        left: 0;
    }

    .desktop .content {
        position: absolute;
        width: 80vw;
        height: 100vh;
        top: 0;
        left: 300px;
        overflow-x:auto;
        overflow-y:hidden;
    }

    .desktop .top {
        display: flex;
        width: 50%;
        align-items: end;
        justify-content: flex-end;
        gap: var(--general-gaps-XL-duplicate);
        padding: var(--numbers-gaps-XL) 0 var(--numbers-gaps-XL) 0;
        position: absolute;
        top: 0;
        left: 40px;
    }

    .desktop .button-icon-empty-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--general-gaps-m);
        position: relative;
        align-self: stretch;
        flex: 0 0 auto;
    }

    .desktop .logout-wrapper {
        width: 50px;
        border-radius: var(--general-roundness-XS);
        overflow: hidden;
    }

    .desktop .logout {
        position: absolute;
        width: 24px;
        height: 24px;
        top: 13px;
        left: 13px;
    }

    .desktop .columns {
        display: flex;
        width: 1580px;
        height: 805px;
        align-items: flex-start;
        gap: var(--numbers-gaps-s);
        position: absolute;
        top: 219px;
        left: 40px;
        overflow: hidden;
    }

    .desktop .category {
        display: flex;
        flex-direction: column;
        width: 280px;
        margin: 0 30px 0 0;
        align-items: flex-start;
        gap: var(--numbers-gaps-XXS);
        position: relative;
        align-self: stretch;
    }

    .category-title {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .category-title-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        border-radius: var(--numbers-roundness-m);
    }

    .category-title-2 {
        position: relative;
        height: 60px;
        margin-top: 16px;
        margin-bottom: 10px;
        font-family: var(--h-h3-font-family);
        font-weight: var(--h-h3-font-weight);
        color: var(--colors-text-primary);
        font-size: var(--h-h3-font-size);
        letter-spacing: var(--h-h3-letter-spacing);
        line-height: var(--h-h3-line-height);
        overflow: hidden;
        /* word-wrap: normal; */
        white-space:break-spaces;
        font-style: var(--h-h3-font-style);
        min-width: 100px;
        max-width: 100%;
        border: none;
    }

    .desktop .category-cards {
        gap: var(--numbers-gaps-XS);
        padding: var(--numbers-gaps-l);
        flex: 1;
        flex-grow: 1;
        background-color: var(--colors-bg-secondary);
        border-radius: var(--numbers-roundness-m);
        overflow: hidden;
        border: 0 none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        border-color: var(--colors-bg-secondary);
    }

    .desktop .add-wrapper {
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 36px;
        background-color: var(--colors-button-additional-1);
        border-radius: var(--general-roundness-XS);
        overflow: hidden;
    }

    .add-img {
        position: relative;
        width: 24px;
        height: 24px;
    }

    .desktop .cards {
        display: flex;
        flex-direction: column;        
        align-items: flex-start;
        gap: 8px;
        position: relative;
        align-self: stretch;
        width: 100%;
        border-radius: var(--numbers-roundness-m);
        overflow: hidden;
        overflow-y: auto;
    }



.chapter-title {
    width: auto;
    margin: 45px;
    transition: margin 0.5s ease-out;
    margin-left: 40px;
    font-family: var(--h-h1-font-family);
    font-weight: var(--h-h1-font-weight);
    color: var(--colors-text-primary);
    font-size: var(--h-h1-font-size);
    letter-spacing: var(--h-h1-letter-spacing);
    line-height: var(--h-h1-line-height);
    font-style: var(--h-h1-font-style);
}

    .chapter-title.chapter-title__small {
        height: 25px;
        font-weight: 400;
        font-size: 20px;
        margin-top: 0px;
        margin-bottom: 0px
    }

#confirmButtons {
    font-size: 16px;
    font-style: normal;
    line-height: normal;
    display: flex;
    gap: 10px;
    justify-content: center;
}

    #confirmButtons button {
        width: 138px;
        height: 50px;
        border: none;
        font-size: 16px;
        font-weight: 700;
        border-radius: 8px;
        display: flex; /* Use flexbox for button */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Adjust padding as needed */
    }

        #confirmButtons button .small-group {
            display: flex;
            align-items: center;
            flex-direction: row;
        }

            #confirmButtons button .small-group span {
                flex-grow: 1; /* Allows the span to grow and fill the space */
                text-align: center; /* Center the text within the span */
            }

            #confirmButtons button .small-group img {
                /* Adjust margin for spacing between text and image */
                margin-left: 10px; /* Or any value that suits your design */
            }

.cancelBtn {
    background-color: #ffe8e8;
    color: #CA3939;
}

.confirmBtn {
    color: #006EF0;
    background-color: #E6F1FE;
}

.closeBtn {
    background-color: #E6E6E6;
    color: #1A1A1A;
}



.desktop .botton-gap {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1px;
    background-color: var(--colors-bg-secondary);
}

.desktop .finger-2 {
    position: absolute;
    width: 19px;
    height: 23px;
    top: 115px;
    left: 229px;
}

.desktop .polsunok {
    position: absolute;
    width: 4px;
    height: 674px;
    top: 30px;
    left: 289px;
}

.desktop .overlap-group {
    position: relative;
    height: 644px;
    top: 30px;
    background-color: var(--colors-bg-tretiery);
    border-radius: 26px;
}

.desktop .rectangle {
    position: relative;
    width: 4px;
    height: 119px;
    top: 40px;
    background-color: #b4b4b4;
    border-radius: 26px;
}

.desktop .add-3 {
    position: absolute;
    width: 24px;
    height: 24px;
    top: -446px;
    left: -2008px;
}


/* This styles the scrollbar itself (vertical scrollbar) */
::-webkit-scrollbar {
    width: 4px; /* Adjust the width as needed */
    border-radius: 2px; /* This will make the scrollbar itself have rounded corners */
}

/* This styles the scrollbar track */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Style as needed */
    border-radius: 2px; /* Rounded corners for the track */
}

/* This styles the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: #888; /* Style as needed */
    border-radius: 2px; /* Rounded corners for the thumb */
}

    /* Change the thumb color on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555; /* Style as needed */
    }

[contenteditable="true"] {
    border: none;
    outline: none;
}