.folder-section {
    display: flex;
    width: 100vw;
    padding-right: 48px;
}

.folder__main {
    min-height: 84vh;
    padding-top: 24px;
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.folder__container {
    padding-left: 32.5px;
    width: 100%;
    max-width: 1280px;
}

.folder__header {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
    gap: 24px;
}

.folder__header-title {
    margin-left: 24px;
}

.folder__buttons {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-left: auto;
}

.folder__buttons > .design-sys-generic-search-bar {
    width: 226px;
}

.folders-left-menu {
    width: fit-content;
    padding: 24px 0px;
    border-right: 2px solid var(--design-sys-sec-color__grey--8);
    z-index: 1;
}

.folders-left-menu ul {
    margin: 0;
    padding: 0;
}

.folders-left-menu li {
    list-style: none;
}

.folders-left-menu li.uk-active {
    background-color: var(--design-sys-sec-color__blue--1);
}

.folders-left-menu .design-sys-tab-btn img {
    filter: brightness(0%) saturate(100%) invert(28%) sepia(7%) hue-rotate(202deg) contrast(93%);
}

.folders-left-menu .design-sys-tab-btn li:nth-of-type(2) img {
    transform: scaleX(-1);
}

.folders-left-menu__team-management,
.folders-left-menu__social,
.folders-left-menu__testimonials {
    position: relative;
}

.folders-left-menu li i {
    position: absolute;
    left: 238px;
    top: 12px;
    width: 14px;
    height: 14px;
    filter: invert(69%) sepia(55%) saturate(484%) hue-rotate(176deg) brightness(96%) contrast(87%);
}

.folders-left-menu__title {
    margin-bottom: 7px;
    text-transform: uppercase;
    color: #454545;
    padding-left: 48px;
}

.folder__table {
    width: 100%;
    margin-bottom: 40px;
    min-height: 360px;
}

.folder__table-row-header {
    border-bottom: 1px solid var(--design-sys-sec-color__grey--9);
    border-top: 1px solid var(--design-sys-sec-color__grey--9);
}

.folder__table-row-body {
    position: relative;
    transition: filter ease-out 0.3s;
}

.folder__table-row-body--loading {
    pointer-events: none;
}

.folder__table-row-body > #loading_container_element {
    position: absolute;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity ease-out 0.3s, backdrop-filter ease-out 0.3s;
}

.folder__table-row-body--loading > #loading_container_element {
    backdrop-filter: blur(8px);
    opacity: 1;
}

.folder__title {
    margin-bottom: 4px;
}

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

.folder__table-row:not(.folder__table-row-header .folder__table-row):hover {
    background-color: var(--design-sys-sec-color__grey--10);
}

.folder__table-row--active {
    background-color: var(--design-sys-sec-color__blue--1) !important;
}

.folder__table-col .design-sys-typo__button-2 {
    color: var(--design-sys-sec-color__grey--1);
}

.folder__table-col:not(.folder__table-col--actions) {
    padding: 15px 0px 15px 24px;
}

.folder__table--option1 .folder__table-col:nth-of-type(2) {
    width: 153px;
    flex-shrink: 0;
}

.folder__table--option3 .folder__table-col:nth-last-of-type(2) {
    width: 153px;
    flex-shrink: 0;
}

.folder__table--option2 .folder__table-col:nth-of-type(2),
.folder__table--option2 .folder__table-col:nth-of-type(3) {
    width: 173px;
    flex-shrink: 0;
}

.folder__table--option2 .folder__table-col:nth-of-type(3) {
    padding-right: 24px;
    text-align: end;
}

.folder__table-col--actions {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 99px;
}

.folder__table-col--actions:not(.folder__table-col--header) {
    cursor: pointer;
}

.folder__table-col--actions img {
    pointer-events: none;
    width: 24px;
    filter: brightness(0%) saturate(100%) invert(28%) sepia(7%) hue-rotate(202deg) contrast(93%);
}

.folder__table-col--actions a {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
}

.folder__table-col:first-child {
    flex-grow: 1;
    width: 0px;
    min-width: 100px;
}

.folder__table-col:first-child p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.folder__empty-state {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.folder__empty-title p {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.folder__empty-title p {
    margin-bottom: 8px;
}

.folder__empty-state img {
    margin-top: 80px;
    margin-bottom: 24px;
}

.folder__empty-state-thumbnail {
    color: var(--design-sys-sec-color__blue--4);
}

.folder__empty-state-thumbnail:hover {
    color: var(--design-sys-sec-color__blue--4);
}

.folder__paginate {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 46px;
}

.folder__paginate .disabled img {
    filter: invert(79%) sepia(6%) saturate(160%) hue-rotate(202deg) brightness(87%) contrast(95%);
}

.folder__paginate img:first-of-type {
    margin-right: 12px;
}

.folder__paginate img:last-of-type {
    margin-left: 12px;
}

.folder__paginate-number {
    padding: 0px 4px;
}

.folder__paginate-number a {
    color: var(--design-sys-sec-color__grey--3);
}

.folder__paginate-number a:hover,
.folder__paginate-number a:active,
.folder__paginate-number a:focus {
    text-decoration: none;
}

.folder__paginate .current {
    color: var(--design-sys-sec-color__blue--5);
    font-size: 14px;
    line-height: 20px;
    font-family: 'Inter';
    font-weight: 600;
    letter-spacing: 0px;
}

.folder__paginate .prev img,
.folder__paginate .next img {
    filter: invert(30%) sepia(5%) saturate(191%) hue-rotate(201deg) brightness(92%) contrast(95%);
}

#DeleteBrochureModal > .modal-dialog,
#DuplicateSaveBrochureModal > .modal-dialog,
#DeleteWebpageModal > .modal-dialog,
#DeleteBrochureModal > .modal-dialog {
    left: 50%;
    top: 50%;
    margin: 0 !important;
    transform: translate(-50%, -50%);
}

@media (max-width: 650px) {
    .folder-section,
    .folder__table {
        overflow-x: auto;
    }

    .folder__table-row-header,
    .folder__table-row-body {
        width: fit-content;
    }

    .folders-left-menu li i {
        left: unset;
        right: 50px;
        top: 12px;
    }
}

/* padding tab button */
@media (max-width: 430px) {
    .folders-left-menu__title {
        padding-left: 16px;
    }
}

@media (min-width: 431px) and (max-width: 1440px) {
    .folders-left-menu__title {
        padding-left: 24px;
    }
}