/* @import url(bootstrap/bootstrap-grid.css);
@import url(bootstrap/bootstrap-utilities.css);
@import url(bootstrap/bootstrap-grid.rtl.css);
@import url(bootstrap/bootstrap-utilities.rtl.css); */
@import url(bootstrap/bootstrap.css);

/* google font */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* bootstrap icon */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --login-left-bg: #FAFAFB;
    --white-bg: #fff;
    --border-color: #ccd3de;
    --login-shadow: #dddddd8f;
    --primary-color: #28b24b;
    --primary-light: #F3FFF8;
    --primary-color-semi-transparent: rgba(40, 178, 75, 0.5);
    --inner-menu-bg: #fff;
    --inner-page-bg: #fff;
    --text-primary: #0E0E0E;
    --text-secondary: #333333;
    --black: #000;
    --bs-body-bg: #F0F5FB;
    --menu-select-bg: #DCF3EB;
    --color-green: #25D366;
    --color-red: #FF0000;
    --color-light-gray: #838DA0;
    --ligth-blue: #0D97E333;
    --soft-mint: #F0F8F3;
    --light-gray: #F9F9F9;
    --sky-blue: #0D97E3;
    --light-blue-tint: #F8FAFBF0;
    --highlight: #c8feee;
    --disableBg: #BDBDBD;
    --disableText: #757575;
}

.alert-success {
    --bs-alert-bg: #ECFDF5;
    --bs-alert-border-color: #ECFDF5;
    --bs-alert-color: #28b24b;
    padding: 10px 20px
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    padding: 1rem 1rem;
    width: 12px;
    height: 12px;
    background-size: 12px 12px;
    translate: 0 -50%;
}

.alert-info {
    --bs-alert-bg: #ECFEFF;
    --bs-alert-border-color: #ECFDF5;
    --bs-alert-color: #00B8D9;
    padding: 10px 20px
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: var(--border-color);
}

::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: var(--primary-color);
}

::selection {
    color: #fff;
    background: var(--primary-color);
}

[data-bs-theme="dark"] .alert-success {
    --bs-alert-bg: transparent;
    --bs-alert-border-color: #28b24b;
    --bs-alert-color: #28b24b;
    padding: 10px 20px
}

[data-bs-theme="dark"] .alert-info {
    --bs-alert-bg: transparent;
    --bs-alert-border-color: #00B8D9;
    --bs-alert-color: #00B8D9;
    padding: 10px 20px;
}
/* dark theme */
[data-bs-theme="dark"] {
    --login-left-bg: #1B1F22;
    --white-bg: #212529;
    --border-color: #242424;
    --login-shadow: #dddddd14;
    --primary-light: #11221A;
    --inner-menu-bg: #1C1C1C;
    --inner-page-bg: #161616;
    --text-primary: #0E0E0E;
    --text-primary: #F6F6F6;
    --bs-body-bg: #161616;
    --input-bg: #2c2c2c;
    --token-05b8d98e-abe0-4137-a801-0f724209b039: rgb(57, 57, 57);
    --token-1ae38199-cbce-439f-ab23-4f321f5e3f62: rgb(36, 36, 36);
    --ligth-blue: #0B6B9A33;
    --soft-mint: #4B6B5A;
    --light-gray: #2D2D2D;
    --sky-blue: #3BA8E0;
    --light-blue-tint: #E4F1F6;
    --highlight: #1f4e50;
    --disableBg: #333333;
    --disableText: #BDBDBD;
}

    [data-bs-theme="dark"] .light {
        display: none;
    }

    [data-bs-theme="dark"] .dark {
        display: block;
    }

strong {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

button {
    outline: none;
}

/* light theme */
.light {
    display: block;
}

.dark {
    display: none;
}

body {
    overflow-x: hidden;
}


.themeSwitcher {
    position: relative;
    display: block;
    width: 50px;
    height: 30px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

    .themeSwitcher:before {
        content: "";
        text-align: right;
        position: relative;
        top: 3px;
        left: 3px;
        width: 50px;
        height: 22px;
        font-size: 10px;
        display: block;
        background: #cad3dc;
        border-radius: 30px;
        -webkit-transition: background .2s ease;
        -o-transition: background .2s ease;
        transition: background .2s ease;
        padding: 2px 8px;
    }

    .themeSwitcher span {
        position: absolute;
        top: 2px;
        left: 0;
        width: 24px;
        height: 24px;
        display: block;
        background: #fff;
        border-radius: 50%;
        -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        -webkit-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
        text-align: center;
    }

        .themeSwitcher span:before {
            font-family: bootstrap-icons;
            content: '\F1D2';
            position: absolute;
            display: block;
            margin: 0;
            width: 24px;
            height: 24px;
            background: #000;
            border-radius: 50%;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            opacity: 1;
            pointer-events: none;
            color: #fff;
        }



#darkModeSwitch:checked + .themeSwitcher:before {
    background: #c6c6c6;
    content: '';
    text-align: left;
    color: #fff;
}

#darkModeSwitch:checked + .themeSwitcher span {
    background: #f1bc31;
    -webkit-transform: translateX(31px);
    -ms-transform: translateX(31px);
    transform: translateX(31px);
    -webkit-transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
    -o-transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
    transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
}

    #darkModeSwitch:checked + .themeSwitcher span:before {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
        font-family: bootstrap-icons;
        content: '\F496';
        background: #029b68;
        color: #ffffff;
    }

.theme-switch {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 65;
}


/* primary color: #00A76F */

/* reset css */
body {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    scrollbar-width: thin;
}

.form-label {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
}


/* theme font varients */
.public-sans-regular {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.public-sans-medium {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.public-sans-semibold {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.public-sans-bold {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.public-sans-extrabold {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}




/* login page */
.login-cover {
    display: flex;
}

.login-left {
    /* background-color:var(--login-left-bg) ; */
    width: 50%;
    display: inline-block;
    height: 100vh;
    margin-right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgb(212,243,224);
    background: linear-gradient(180deg, rgba(212,243,224,1) 0%, rgba(255,255,255,1) 100%);
    flex-flow: column;
}

.login-logo {
    position: absolute;
    top: 10%;
    left: 10%;
}

.login-left h3 {
    color: var(--primary-color);
    text-align: left;
    font-size: 20px;
    padding: 20px 40px 0 40px;
    font-weight: 700;
}

.login-left p {
    color: #000;
    padding: 0px 40px 0 40px;
    text-align: left;
}

.login-right {
    background-color: var(--white-bg);
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-form-cover {
    width: 80%
}

.login-form-inner-cover {
    /* border: solid 1px var(--border-color); */
    border-radius: 12px;
    padding: 40px 30px;
    position: relative;
}

.btn-primary {
    position: relative;
}

[data-bs-theme="dark"] .login-form-inner-cover {
    border: solid 1px #383838
}

.login-form-cover h1 {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 36px;
}

.login-form-cover h5 {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
}

.form-control {
    border: solid 1px var(--border-color);
    height: 34px;
    background-color: var(--bs-white);
}

[data-bs-theme="dark"] .form-control {
    border: solid 1px var(--border-color);
    height: 34px;
    background-color: transparent;
}

.modal-body .form-control {
    border: solid 1px #999999;
    height: 34px;
}

.modal-body .vs--searchable .vs__dropdown-toggle {
    height: 34px;
    border: solid 1px #999999;
}

.login-input {
    padding: 20px 15px;
    background-color: #F5F5F5;
    border: solid 1px #F2F1F1
}

.logo-login-responsive {
    display: none;
}

.company-logo {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

    .company-logo img {
        height: 50px;
    }


.login-system-img img {
    width: 100%;
    margin: auto;
}





/* Error pages */

.error-cover {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: auto 15%;
}

.error-left {
    width: 50%;
    text-align: center;
}

.error-right {
    width: 50%;
    text-align: center;
    padding: 0 50px;
}

.error-left img {
    width: 80%;
    text-align: center;
}

.error-right h1 {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 40px;
}

.error-right p {
    color: var(--color-light-gray);
    font-size: 14px;
}

.error-right a.backBtn {
    background-color: #0E0E0E;
    color: #fff;
    font-size: 14px;
    border-radius: 20px;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    text-wrap: nowrap;
}

[data-bs-theme="dark"] .error-right a.backBtn {
    background-color: var(--primary-color);
}
/* page loader */
.darksoul-layout {
    margin: auto;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(21, 21, 21,.4);
    backdrop-filter: blur(4px);
    z-index: 1800;
    color: var(--color-green);
}

.darksoul-grid {
    margin: auto;
    margin-right: 1px;
    width: 80px;
    height: 80px;
    display: grid;
    gap: 0px;
    grid-template-columns: auto auto;
    animation: rotate 2s linear 0s infinite;
}

.item1 {
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 0%;
    background-color: var(--color-green);
}

.item2 {
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 0%;
    background-color: var(--color-green);
}

.item3 {
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 0%;
    background-color: var(--color-green);
}

.item4 {
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 0%;
    background-color: var(--color-green);
}

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

    50% {
        rotate: 100deg;
        transform: scale(0.4);
    }

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

.darksoul-loader-h {
    font-family: "Public Sans", sans-serif;
    margin: auto;
    margin-left: 5px;
    font-weight: 900;
    font-size: 38px;
}

/* dashboard */
::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.wrapper {
    display: flex;
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    background-color: var(--inner-page-bg);
    min-width: 0;
    background-color: #F0F5FB;
}

[data-bs-theme="dark"] .main {
    background-color: #161616;
}

#sidebar {
    width: 80px;
    min-width: 70px;
    z-index: 56;
    transition: all .25s ease-in-out;
    background: var(--inner-menu-bg);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 1rem 0 rgba(33, 37, 41, .1);
}

#toggle-btn {
    position: absolute;
    right: -13px;
    top: 17px;
    border-radius: 20px;
    line-height: 25px;
    width: 25px;
    height: 25px;
    border: none;
    background-color: #fff;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 3px #e1dada;
    font-size: 14px;
}

    #toggle-btn:hover i {
        transition: 0.4s 0.02s ease-in all;
        transform: translateX(-2px);
    }

[data-bs-theme="dark"] #toggle-btn {
    box-shadow: none;
    background-color: #2d2e2e;
    color: #ffffff;
}

#sidebar.expand {
    width: 225px;
    min-width: 225px;
}

    #sidebar.expand #toggle-btn {
        rotate: 0deg;
    }

#sidebar #toggle-btn {
    rotate: 180deg;
}

.toggle-btn {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    padding: 1rem 1.5rem;
}

    .toggle-btn i {
        font-size: 1.5rem;
        color: #FFF;
    }

.sidebar-logo {
    margin: auto 0;
    width: 100%;
    align-items: center;
    display: flex;
    padding-left: 20px;
    padding: 8px 17px;
}

    .sidebar-logo a {
        color: #FFF;
        font-size: 1.15rem;
        font-weight: 600;
    }

#sidebar:not(.expand) a.sidebar-link span {
    display: none;
}

#sidebar:not(.expand) .sidebar-dropdown a.sidebar-link span {
    display: inline-block;
}

#sidebar:not(.expand) .sidebar-nav {
    align-self: center;
}

#sidebar:not(.expand) .sidebar-logo {
    padding: 17px 5px;
    justify-content: center;
    transition: all .2s ease-out;
}

#sidebar.expand .sidebar-logo,
#sidebar.expand a.sidebar-link span {
    animation: fadeIn .25s ease;
}

#sidebar:not(.expand) .sidebar-logo .small-menu {
    display: block;
}

#sidebar .sidebar-logo .small-menu {
    display: none;
}

#sidebar:not(.expand) .sidebar-logo .light {
    display: none;
}

#sidebar:not(.expand) .sidebar-logo .dark {
    display: none;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.sidebar-nav {
    padding: 1rem .5rem;
    flex: 1 1 auto;
    margin-bottom: 0px;
}

#sidebar:not(.expand) a.sidebar-link {
    width: 45px;
    padding: 11px;
}

a.sidebar-link {
    padding: .625rem 1.625rem .625rem .625rem;
    color: var(--bs-black);
    display: flex;
    font-size: 0.9rem;
    white-space: nowrap;
    border-left: 3px solid transparent;
    align-items: center;
    border-radius: 5px;
    width: inherit;
}

.sidebar-link i, .sidebar-link img {
    color: gray;
}

.sidebar-item.active .sidebar-link object {
    filter: invert(27%) sepia(100%) saturate(2637%) hue-rotate(458deg) brightness(77%) contrast(88%);
    width: 18px
}

.sidebar-link object {
    filter: invert(27%) sepia(100%) saturate(0%) hue-rotate(365deg) brightness(96%) contrast(88%);
    width: 18px
}

.sidebar-link i,
.dropdown-item i,
.sidebar-link object,
.dropdown-item object {
    font-size: 1.1rem;
    margin-right: .75rem;
}

.dropdown-item span i {
    vertical-align: top;
}

a.sidebar-link:hover {
    background-color: rgba(255, 255, 255, .2);
}

.multiselect__tags {
    min-height: 33px;
    display: block;
    padding: 3px 40px 0 8px;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    background: #fff;
    font-size: 14px;
}

.multiselect__single {
    margin-top: 5px;
}

.sidebar-item {
    position: relative;
    margin-bottom: 5px;
}

    .sidebar-item.active a.sidebar-link {
        background-color: var(--menu-select-bg);
        color: var(--primary-color);
        font-weight: 500;
    }

        .sidebar-item.active a.sidebar-link i {
            color: #00a76f;
        }

#sidebar:not(.expand) .sidebar-item .sidebar-dropdown {
    position: absolute;
    top: 0;
    left: 40px;
    background-color: var(--white-bg);
    padding: 0;
    min-width: 15rem;
    overflow: auto;
    display: none;
}

#sidebar:not(.expand) .sidebar-item:hover .has-dropdown + .sidebar-dropdown {
    display: block;
    max-height: 15em;
    width: 100%;
    opacity: 1;
}

#sidebar:not(.expand) .sidebar-item .sidebar-dropdown .sidebar-item {
    margin-bottom: 0;
}

    #sidebar:not(.expand) .sidebar-item .sidebar-dropdown .sidebar-item a {
        width: 100% !important;
        display: block !important;
        padding: 5px 11px
    }

        #sidebar:not(.expand) .sidebar-item .sidebar-dropdown .sidebar-item a:hover {
            background-color: var(--primary-light);
        }

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.2rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}

#sidebar.expand .sidebar-item {
    margin-bottom: 0;
}

#sidebar.expand ul li ul li.sidebar-item {
    margin-left: 25px
}

    #sidebar.expand ul li ul li.sidebar-item .sidebar-link {
        padding: 5px 8px;
    }

        #sidebar.expand ul li ul li.sidebar-item .sidebar-link i {
            margin-right: .25rem;
            font-size: 1rem;
        }

.navbar {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 2rem 0 rgba(33, 37, 41, .1);
}

.navbar-expand .navbar-collapse {
    min-width: 200px;
}

.avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.content {
    flex: 1 1 auto;
}

.user-section {
    display: grid;
    grid-template-columns: 20px auto;
}

footer {
    background-color: #fff;
    padding: 1rem .875rem;
}

    footer .text-body-secondary strong {
        font-size: 13px;
    }

    footer .list-inline-item {
        font-size: 13px;
    }

[data-bs-theme="dark"] .footer {
    background-color: var(--inner-menu-bg);
}

.search {
    background: #fff;
    height: 40px;
    border-radius: 5px;
    padding: 2px 45px;
    display: flex;
    align-items: center;
}

[data-bs-theme="dark"] .search {
    background-color: var(--input-bg);
}

.filter {
    position: absolute;
    background-color: var(--white-bg);
    border-radius: 5px;
    height: 32px;
    width: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 5px;
}

    .filter i {
        color: var(--primary-color);
        font-size: 20px;
    }

[data-bs-theme="dark"] .filter i {
    color: #fff;
}

[data-bs-theme="dark"] .search:hover > .search-txt {
    color: var(--bs-white);
}

.search-btn {
    color: var(--black);
    width: 40px;
    height: 40px;
    border-radius: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 3px;
}

[data-bs-theme="dark"] .search-btn {
    color: #fff;
}

.search-txt {
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    font-size: 14px;
    line-height: 40px;
    width: 300px;
}

.fas .fa-search {
    font-weight: 200;
    font-size: 40px;
}

.search:hover > .filter-cover ul {
    width: 100%;
    transition: ease-in 0.4s;
}

.filter {
    margin-left: auto;
}

    .filter img {
        width: 50px;
        border-radius: 50%;
        border: 2px solid #fff;
    }

.filter-cover {
    transition: 0.5s ease;
}

    .filter-cover ul {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        background: var(--bs-white);
        position: absolute;
        top: 45px;
        right: 0rem;
        border-radius: 10px;
        padding: 10px 6px;
        z-index: 55;
        width: 100%;
        box-shadow: 0 0 2rem 0 rgba(33, 37, 41, .3);
        max-height: 80vh;
        overflow: auto;
        scrollbar-width: thin;
    }

        .filter-cover ul li {
            color: #FFF;
            font-size: 14px;
            display: block;
            width: 100%;
        }

            .filter-cover ul li:hover {
                background-color: var(--menu-select-bg);
                border-radius: 5px;
            }

            .filter-cover ul li.selected {
                background-color: var(--menu-select-bg);
                border-radius: 5px;
            }

            .filter-cover ul li a {
                display: block;
                padding: 5px;
                color: #000;
            }

.hidden {
    display: none;
}

.user-head {
    line-height: 16px;
    text-align: left;
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 300px;
    padding: 5px 15px;
    border-bottom: solid 1px #ddd;
}

    .user-head small {
        font-size: 14px;
        color: var(--text-secondary);
        font-style: italic;
        font-weight: 200;
    }

[data-bs-theme="dark"] .user-head small {
    color: #ababab;
}

.default-avtar {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #7c837e;
    color: var(--white-bg);
    border-radius: 50%;
    font-style: normal;
}

[data-bs-theme="dark"] .default-avtar {
    color: #fff;
}

.cursor-pointer {
    cursor: pointer;
}

.noti-icon {
    position: relative;
}

    .noti-icon i {
        font-size: 18px;
    }

    .noti-icon span {
        position: absolute;
        min-width: 20px;
        height: 20px;
        background-color: #FF5630;
        color: var(--white-bg);
        border-radius: 50px;
        font-size: 12px;
        text-align: center;
        top: -6px;
        right: -6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

[data-bs-theme="dark"] .noti-icon span {
    color: #fff;
}

.notificationDiv {
    width: 450px;
    background-color: #fff;
    min-height: auto;
    max-height: 90vh;
    overflow-y: scroll;
    scrollbar-width: thin;
    padding-right: 3px;
}

    .notificationDiv .nav-tabs .nav-link {
        font-size: 13px;
        font-weight: 600;
        color: gray !important;
        border-bottom: 3px !important;
    }

        .notificationDiv .nav-tabs .nav-link.color-blue {
            color: #0D97E3 !important;
        }

    .notificationDiv .nav-link.active {
        border-bottom: inherit !important;
    }

.notiCover {
}

    .notiCover .notiSingle {
        position: relative;
        padding: 10px 15px;
        padding-left: 25px;
        font-size: 14px;
        margin-bottom: 2px;
        border-bottom: solid 1px #ddd;
        line-height: 17px;
        word-break: break-all;
    }

        .notiCover .notiSingle:last-child {
            border-bottom: none;
        }

        .notiCover .notiSingle small {
            color: rgb(145, 145, 145);
        }

        .notiCover .notiSingle.lastLog {
            /* position: relative; */
            background-color: var(--menu-select-bg);
        }

            .notiCover .notiSingle.lastLog:after {
                position: absolute;
                z-index: 1;
                content: " ";
                left: 0px;
                top: 0;
                bottom: 0;
                font-size: 35px;
                line-height: 0;
                border-left: 5px solid var(--primary-color)
            }

        .notiCover .notiSingle:after {
            position: absolute;
            z-index: 1;
            font-family: bootstrap-icons !important;
            content: "\F309";
            left: -5px;
            top: 19px;
            color: rgb(175, 174, 174);
            font-size: 45px;
            line-height: 0;
        }

        .notiCover .notiSingle.selected:after {
            color: var(--primary-color);
        }

        .notiCover .notiSingle.selected {
            background-color: #F0F5FB;
            border-bottom: solid 1px transparent;
        }

.sidebar-footer {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

    .sidebar-footer .theme-switch {
        position: inherit;
        width: auto;
        margin-bottom: 10px;
    }

[data-bs-theme="dark"] .sidebar-item.active a.sidebar-link {
    background-color: #1B1F22;
}

[data-bs-theme="dark"] a.sidebar-link {
    color: #fff;
}

.margin-control-top {
    margin-top: 9px !important;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bd-violet-bg);
    --bs-tooltip-color: var(--bs-white);
}

.breadcrumb {
    font-size: 12px;
    color: var(--text-primary);
    border-bottom: solid 1px #ddd;
}

[data-bs-theme="dark"] .breadcrumb {
    background: transparent;
    border-bottom: solid 1px #3a3a3a;
}

.breadcrumb-item a {
    color: #353535;
}

[data-bs-theme="dark"] .breadcrumb-item a {
    color: #5c5c5c;
}

.breadcrumb-item.active {
    color: var(--primary-color);
    font-weight: 500;
}

.multisteps-form__progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    width: 60%;
    margin: auto;
}


.multisteps-form__progress-btn {
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    transition-delay: 0s;
    position: relative;
    padding-top: 0px;
    color: var(--black);
    /* text-indent: -9999px; */
    border: none;
    background-color: transparent;
    outline: none !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
    font-size: 14px;
    z-index: 2;
    text-indent: 0;
}

[data-bs-theme="dark"] .multisteps-form__progress-btn {
    color: var(--bs-secondary-color) !important;
}





.multisteps-form__progress-btn:not(:nth-of-type(1)):after {
    /* position: absolute;
    top: 20px;
    left: -8%;
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    transition-delay: 0s;
    display: block;
    width: 30px;
  height: 9px;
  content: '';
  background-image: url(../img/next-wizard-black.svg);
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1; */
    display: none;
}

[data-bs-theme="dark"] .multisteps-form__progress-btn:after {
    filter: invert(1);
}

[data-bs-theme="dark"] .js-active.multisteps-form__progress-btn:after {
    filter: invert(0);
}

[data-bs-theme="dark"] .multisteps-form__progress-btn span img {
    filter: invert(1);
}

.multisteps-form__progress-btn.js-active {
    color: var(--primary-color);
    font-weight: 600;
}

.js-active.multisteps-form__progress-btn:not(:nth-of-type(1)):after {
    /* position: absolute;
    top: 20px;
    left: -11px;
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    transition-delay: 0s;
    display: block;
    width: 30px;
    height: 9px;
    content: '';
    background-image: url(../img/next-wizard.svg);
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1; */
    display: none;
}


.multisteps-form__progress-btn:first-child:after {
    display: none;
}


.multisteps-form__progress-btn.js-active:before {
    -webkit-transform: translateX(-50%) scale(1.2);
    transform: translateX(-50%) scale(1.2);
    background-color: currentColor;
}

.multisteps-form__progress-btn span {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    min-width: 50px;
    margin-bottom: 5px;
}

    .multisteps-form__progress-btn span img {
        filter: invert(0);
        height: 25px;
        margin: auto;
    }

.js-active.multisteps-form__progress-btn span {
    display: inline-block;
    background-color: var(--primary-color);
    padding: 5px;
    border-radius: 5px;
    min-width: 50px;
    margin-bottom: 5px;
}

    .js-active.multisteps-form__progress-btn span img {
        filter: invert(100%) brightness(300%) contrast(100%)
    }

.multisteps-form__form {
    position: relative;
    overflow: hidden;
}

.multisteps-form__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

    .multisteps-form__panel.js-active {
        height: auto;
        opacity: 1;
        visibility: visible;
    }

    .multisteps-form__panel[data-animation="scaleOut"] {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

        .multisteps-form__panel[data-animation="scaleOut"].js-active {
            transition-property: all;
            transition-duration: 0.2s;
            transition-timing-function: linear;
            transition-delay: 0s;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

    .multisteps-form__panel[data-animation="slideHorz"] {
        left: 50px;
    }

        .multisteps-form__panel[data-animation="slideHorz"].js-active {
            transition-property: all;
            transition-duration: 0.25s;
            transition-timing-function: cubic-bezier(0.2, 1.13, 0.38, 1.43);
            transition-delay: 0s;
            left: 0;
        }

    .multisteps-form__panel[data-animation="slideVert"] {
        top: 30px;
    }

        .multisteps-form__panel[data-animation="slideVert"].js-active {
            transition-property: all;
            transition-duration: 0.2s;
            transition-timing-function: linear;
            transition-delay: 0s;
            top: 0;
        }

    .multisteps-form__panel[data-animation="fadeIn"].js-active {
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: linear;
        transition-delay: 0s;
        background-color: var(--bs-white);
        box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgba(82, 63, 105, 0.05);
    }

[data-bs-theme="dark"] .multisteps-form__panel[data-animation="fadeIn"].js-active {
    background-color: var(--bs-body-bg);
    box-shadow: inset 0 0 0 0px var(--token-05b8d98e-abe0-4137-a801-0f724209b039, rgb(57, 57, 57)), inset 0 0 0 1px var(--token-1ae38199-cbce-439f-ab23-4f321f5e3f62, rgb(36, 36, 36));
    border: none;
}

.multisteps-form__panel[data-animation="scaleIn"] {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

    .multisteps-form__panel[data-animation="scaleIn"].js-active {
        transition-property: all;
        transition-duration: 0.2s;
        transition-timing-function: linear;
        transition-delay: 0s;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

.btn-black {
    background-color: var(--black);
    color: var(--white-bg);
}

    .btn-black:hover {
        border: solid 1px var(--black);
        color: var(--black);
    }

.multisteps-form__title {
    font-size: 18px;
}

.multisteps-form__content {
    min-height: calc(100vh - 320px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

[data-bs-theme="dark"] .btn-black {
    background-color: transparent;
    border: solid 1px var(--bs-white);
    color: var(--bs-white);
}

    [data-bs-theme="dark"] .btn-black:hover, [data-bs-theme="dark"] .btn-black:focus, [data-bs-theme="dark"] .btn-black:active {
        background-color: var(--bs-white);
        color: var(--white-bg);
    }

fieldset {
    border: solid 1px rgba(0, 0, 0, 0.175);
    padding: 12px 10px;
    margin: 10px 0;
    position: relative;
    margin-bottom: 20px;
    border-radius: 5px;
    padding-bottom: 7px;
    box-shadow: 0 0 1px #dddddd;
}

.weblinkCover {
    padding: 10px 0;
}

.linkColor {
    color: green !important;
}

.weblinkCover fieldset {
    margin: 5px;
    box-shadow: none;
}

[data-bs-theme="dark"] fieldset {
    box-shadow: inset 0 0 0 0px var(--token-05b8d98e-abe0-4137-a801-0f724209b039, rgb(57, 57, 57)), inset 0 0 0 1px var(--token-1ae38199-cbce-439f-ab23-4f321f5e3f62, rgb(36, 36, 36));
    border: none;
}

fieldset legend {
    padding: 0 5px;
    position: absolute;
    top: -12px;
    font-size: 15px;
    font-weight: 600;
    background-color: #fff;
    width: auto;
    left: 50%;
    translate: -50%;
}

fieldset.uploaded-files {
    box-shadow: 0px 0 15px var(--login-shadow);
    border-radius: 10px;
    border: solid 1px #f3f3f3;
    margin: 20px 5px;
    padding: 30px 20px;
    position: relative;
    padding-bottom: 5px;
}

    fieldset.uploaded-files legend {
        position: absolute;
        top: -13px;
        font-size: 15px;
        font-weight: 600;
        background-color: var(--bs-white);
        display: inline-block;
        width: auto;
        padding: 0 5px;
    }

[data-bs-theme="dark"] fieldset.uploaded-files legend, [data-bs-theme="dark"] fieldset legend {
    background-color: #1b1f22;
    border-radius: 5px;
}

.file-upload-cover {
    margin: 5px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0 10px var(--login-shadow);
    border-radius: 10px;
    border: solid 1px #f3f3f3;
}

[data-bs-theme="dark"] .file-upload-cover, [data-bs-theme="dark"] fieldset.uploaded-files, [data-bs-theme="dark"] .doc-property-box {
    box-shadow: none;
}

.file-upload-cover button, .file-upload-cover a {
    padding: 8px 10px !important;
}

.multiselect__tags {
    border: solid 1px var(--border-color);
}

.multiselect__content-wrapper {
    z-index: 55;
}

[data-bs-theme="dark"] .file-upload-cover, [data-bs-theme="dark"] fieldset.uploaded-files, [data-bs-theme="dark"] .doc-property-box, [data-bs-theme="dark"] fieldset {
    border-color: #525252;
}

[data-bs-theme="dark"] .multiselect__tags, [data-bs-theme="dark"] .multiselect__input, [data-bs-theme="dark"] .multiselect__single, [data-bs-theme="dark"] .vs__dropdown-toggle {
    background-color: transparent;
    color: var(--bs-white);
}

[data-bs-theme="dark"] .multiselect__content-wrapper {
    background-color: var(--black);
    color: var(--bs-white);
}

[data-bs-theme="dark"] .vs__open-indicator {
    fill: var(--bs-white)
}

[data-bs-theme="dark"] .vdpInnerWrap {
    background-color: var(--black);
}

[data-bs-theme="dark"] .vdpComponent.vdpWithInput > input {
    background-color: transparent;
}

[data-bs-theme="dark"] .vdpClearInput:before {
    color: #bebebe;
    border: 1px solid #bebebe;
}

[data-bs-theme="dark"] .vdpHeader {
    background-color: transparent;
}

[data-bs-theme="dark"] .vdpCell.selectable, [data-bs-theme="dark"] .vs__selected {
    color: var(--bs-white);
}

[data-bs-theme="dark"] .vdpCell.outOfRange, [data-bs-theme="dark"] .vs__clear {
    color: #828282;
    fill: #828282;
}

[data-bs-theme="dark"] .vs__dropdown-menu {
    background-color: var(--black)
}

    [data-bs-theme="dark"] .vs__dropdown-menu li:hover {
        background-color: var(--primary-color)
    }

.vs__dropdown-menu li:hover {
    background-color: var(--primary-color)
}

.multiselect__element:hover, .multiselect__option--selected.multiselect__option--highlight {
    background: var(--primary-color) !important;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0px;
    right: 0;
    background-color: transparent;
    transition: 0.5s;
    overflow-y: auto;
}

    .sidenav .card {
        height: 100%;
    }

        .sidenav .card .card-header {
            padding: 15px 10px;
            box-shadow: 2px 2px 15px #c5c5c58f;
            border-bottom: none;
            font-size: 15px;
        }

        .sidenav .card .card-body {
            white-space: inherit;
        }

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover {
            color: #f1f1f1;
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 12px;
        font-size: 30px;
        line-height: 28px;
    }

        .sidenav .closebtn:hover {
            color: #000;
        }

.opacityBody {
    --bs-backdrop-zindex: 997;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 998;
    display: block;
}

    .opacityBody::after {
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 998;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        content: "";
    }

#mySidenav.widthside {
    display: block;
}

#mySidenav {
    display: none;
}

.widthside {
    width: 50%;
}

.vdpComponent {
    display: block !important;
}

.vs__selected {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0px;
    width: 70%;
}

.vdpComponent.vdpWithInput > input {
    padding: 5px 10px;
    padding-right: 30px;
    width: 100%;
    border: solid 1px var(--border-color);
    border-radius: 5px;
    height: 34px;
    font-size: 14px;
}

    .vdpComponent.vdpWithInput > input:focus, .vs--searchable .vs__dropdown-toggle {
        outline: var(--primary-color);
        box-shadow: 0 0 0 0 #00a76f2d;
        border: solid 1px var(--primary-color)
    }

.form-control:focus {
    outline: var(--primary-color);
    box-shadow: 0 0 0 0 #00a76f2d;
    border: solid 1px var(--primary-color)
}

.vs--searchable .vs__dropdown-toggle {
    height: 34px;
    border: solid 1px var(--border-color);
}

.modal-body .permission-inner-div .vs--searchable .vs__dropdown-toggle {
    height: 34px;
    border: solid 1px var(--border-color);
    text-align: left;
}

.vs__dropdown-menu {
    font-size: 14px;
}

    .vs__dropdown-menu li {
        text-indent: 0;
        padding-left: 5px;
    }

.doc-property-box {
    border: solid 1px #efefef;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0 15px var(--login-shadow);
    padding-bottom: 0px;
}

.vdpClearInput:before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    top: 55%;
    color: rgb(56 56 56);
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    background-color: transparent;
    font-size: 17px;
}

.input-close {
    position: relative;
}

    .input-close input {
        padding-right: 30px;
    }

    .input-close i {
        position: absolute;
        z-index: 1;
        right: 0px;
        top: 2px;
        font-size: 22px;
    }

.hidden {
    display: none;
}

.uploadedFile {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: flex-start;
}

    .uploadedFile .remove {
        color: #f00;
        margin: 2px;
        position: relative;
        padding-right: 8px;
    }

        .uploadedFile .remove:after {
            position: absolute;
            content: "|";
            right: 0px;
            color: var(--black);
            top: -1px;
        }

[data-bs-theme="dark"] .uploadedFile .remove:after {
    color: var(--bs-white);
}

.uploadedFile .edit {
    color: #FFAB00;
    margin: 2px;
}

.uploadedFile .override {
    color: #000;
    margin: 2px;
    font-size: 17px;
}

.uploadedFile .description {
    display: inline-block;
    margin-left: 4px;
    font-size: 14px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.firstSection.disabled .description {
    width: 85%;
}

.uploadedFile .restricted {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 8px;
    background-color: #d6f5f4;
}

.form-check-normal {
    border: solid 1px #727171;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* .form-check .form-check-input {
  border: solid 1px #727171;
    width: 16px;
    height: 16px;
} */
.table.dataTable tbody td {
    background-color: transparent !important;
}

    .table.dataTable tbody td .options {
        margin: 0 5px;
    }

        .table.dataTable tbody td .options i {
            font-size: 18px;
        }

.lock {
    color: red;
}

.unLock {
    color: #000;
}

.view {
    color: #0d97e3 !important;
}

.trash {
    color: red;
}

.edit {
    color: orange;
}

.pagination li.disabled button, .pagination li button.next, .pagination li button.last {
    background-color: transparent !important;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: gray;
}

.pagination li button {
    font-size: 15px;
    background-color: transparent !important;
    border: none;
}

.pagination li.active button {
    background-color: var(--primary-color) !important;
    font-size: 13px;
}

div.dt-container div.dt-paging ul.pagination {
    align-items: baseline;
}

.addUser {
    border: solid 2px #DDDDDD;
    border-radius: 4px;
    color: #000;
    padding: 5px 10px;
    font-weight: 600;
    margin: 2px;
    outline: none;
    transition: border-color 0.3s ease;
}

    .addUser:focus, .addUser:hover {
        border-color: var(--primary-color);
    }

    .addUser i {
        color: var(--primary-color);
        font-size: 18px;
        margin-right: 3px;
        vertical-align: middle;
    }

.filterBy {
    border: solid 2px #DDDDDD;
    border-radius: 4px;
    color: #000;
    padding: 5px 10px;
    font-weight: 600;
    margin: 2px;
}

    .filterBy:hover {
        border-color: orange;
    }

    .filterBy i.gray {
        color: gray;
    }

.masterForms .form-select {
    background-color: transparent !important;
    font-size: 14px;
    height: 36px;
    border: solid 1px #ccd3de;
}

body:has(#sidebar) .footer-float, .paginationBox {
    position: fixed;
    bottom: 0px;
    width: 95.3%;
    /* height: 70vh; */
    background: #dddddd;
    border: solid 1px #ddd;
    border-radius: 10px;
    /* filter: blur(8px); */
    /* -webkit-filter: blur(8px); */
    opacity: .9;
    box-shadow: 2px 2px 2px #ddd;
    z-index: 555;
    /* transition: transform 1s, width 95.3%; */
}

body:has(#sidebar.expand) .footer-float, .paginationBox {
    position: fixed;
    bottom: 40px;
    width: 89.5%;
    /* height: 70vh; */
    background: #dddddd;
    border: solid 1px #ddd;
    border-radius: 10px;
    /* filter: blur(8px); */
    /* -webkit-filter: blur(8px); */
    opacity: .9;
    box-shadow: 2px 2px 2px #ddd;
    z-index: 555;
}

.footer-float .btn {
    margin-bottom: 0px !important;
}

[data-bs-theme="dark"] body:has(#sidebar.expand) .footer-float, [data-bs-theme="dark"] body:has(#sidebar.expand) .paginationBox {
    position: fixed;
    bottom: 0px;
    /* height: 70vh; */
    background: #262626;
    border: solid 1px #606060;
    border-radius: 10px;
    /* filter: blur(8px); */
    /* -webkit-filter: blur(8px); */
    opacity: .9;
    box-shadow: none;
}

.uploadedFile .edit i, .uploadedFile .remove i {
}

input, button, select, optgroup, textarea {
    font-family: "Public Sans", sans-serif;
}

.uploadedFile .doc-img {
    width: 24px;
    height: auto;
    margin-left: 7px;
    background-color: var(--white-bg);
    box-shadow: 0px 0px 2px #c4c2c2;
    border-radius: 5px;
    padding: 3px;
    margin-right: 4px;
    text-align: center;
}

.modal-xl {
    width: 90% !important;
}

.logout-modal {
    min-height: 250px;
    flex-flow: column;
}

    .logout-modal i {
        font-size: 25px;
    }

    .logout-modal button, .logout-modal a {
        min-width: 80px;
    }

[data-bs-theme="dark"] .doc-type {
    background-color: rgb(45 109 45);
}

[data-bs-theme="dark"] .uploadedFile .doc-img {
    box-shadow: none;
}

.uploadedFile .doc-img img {
    max-width: 18px;
    max-height: 18px;
    min-width: 18px;
    vertical-align: sub;
}

[data-bs-theme="dark"] .uploadedFile .doc-img {
    background: #fff;
}

.btn-discard, .btn-discard:hover, .btn-discard:focus, .btn-discard:active, .btn-discard:visited {
    background-color: #FF0000;
    color: var(--bs-white);
}

    .btn-draft, .btn-draft:hover, .btn-draft:focus, .btn-draft:active, .btn-discard:visited {
        background-color: #FFAB00;
        color: var(--bs-white);
    }

    .btn-submit, .btn-submit:hover, .btn-submit:focus, .btn-submit:active, .btn-discard:visited {
        background-color: var(--primary-color);
        color: var(--bs-white);
    }

        .btn-submit:disabled, /* Targeting button disabled attribute */
        .btn-submit:disabled:hover,
        .btn-submit:disabled:focus,
        .btn-submit:disabled:active,
        .btn-submit.disabled, /* Targeting the disabled class*/
        .btn-submit.disabled:hover,
        .btn-submit.disabled:focus,
        .btn-submit.disabled:active {
            pointer-events: none;
            color: var(--disableText);
            background-color: var(--disableBg);
            border-color: var(--disableBg);
        }

.btn-black, .btn-black:hover, .btn-black:focus, .btn-black:active, .btn-black:visited {
    background-color: #0E0E0E;
    color: var(--bs-white);
}

.vdpCell.today {
    color: var(--primary-color);
    border-radius: 50%;
}

    .vdpCell.today .vdpCellContent {
        border: solid 1px var(--primary-color);
    }

        .vdpCell.today .vdpCellContent:hover {
            background-color: var(--primary-color);
        }

.vdpCell .vdpCellContent:hover {
    background-color: var(--primary-color);
}

.vdpCell.selectable:hover .vdpCellContent {
    color: #fff;
    background: var(--primary-color);
}

.vdpArrowNext:after {
    border-left-color: var(--primary-color);
}

.vdpArrowPrev:after {
    border-right-color: var(--primary-color);
}

.vdpCell.selected .vdpCellContent {
    color: #fff;
    background: var(--primary-color);
}
/* .multiselect__tags-wrap .multiselect__tag:nth-child(1), .multiselect__tags-wrap .multiselect__tag:nth-child(8) {
  background-color: #D1EDE5;
  color: #007867;
}
.multiselect__tags-wrap .multiselect__tag:nth-child(2), .multiselect__tags-wrap .multiselect__tag:nth-child(9) {
  background-color: #E8DAFC;
  color: #5119B7;
}
.multiselect__tags-wrap .multiselect__tag:nth-child(3), .multiselect__tags-wrap .multiselect__tag:nth-child(10) {
  background-color: #D1EFF6;
  color: #006C9C;
}
.multiselect__tags-wrap .multiselect__tag:nth-child(4), .multiselect__tags-wrap .multiselect__tag:nth-child(11) {
  background-color: #ECEFF1;
  color: #212B36;
}
.multiselect__tags-wrap .multiselect__tag:nth-child(5), .multiselect__tags-wrap .multiselect__tag:nth-child(12) {
  background-color: #D6F2E2;
  color: #1D935F;
}
.multiselect__tags-wrap .multiselect__tag:nth-child(6), .multiselect__tags-wrap .multiselect__tag:nth-child(13) {
  background-color: #FAEDD3;
  color: #B76E00;
}
.multiselect__tags-wrap .multiselect__tag:nth-child(7), .multiselect__tags-wrap .multiselect__tag:nth-child(14) {
  background-color: #FAE0DB;
  color: #B71D18;
} */
.multi .ts-control .item:nth-child(7n+1) {
    background-color: #D1EDE5;
    color: #007867;
}

.multi .ts-control .item:nth-child(7n+2) {
    background-color: #E8DAFC;
    color: #5119B7;
}

.multi .ts-control .item:nth-child(7n+3) {
    background-color: #D1EFF6;
    color: #006C9C;
}

.multi .ts-control .item:nth-child(7n+4) {
    background-color: #ECEFF1;
    color: #212B36;
}

.multi .ts-control .item:nth-child(7n+5) {
    background-color: #D6F2E2;
    color: #1D935F;
}

.multi .ts-control .item:nth-child(7n+6) {
    background-color: #FAEDD3;
    color: #B76E00;
}

.multi .ts-control .item:nth-child(7n+7) {
    background-color: #FAE0DB;
    color: #B71D18;
}

.file-upload-width {
    width: 60%;
    background-color: #d9d9d94d;
    border: dashed 2px #cfcfcf;
    border-radius: 5px;
}

.multiselect, .multiselect__input, .multiselect__single {
    font-size: 15px;
}

.vs__search, .vs__search:focus {
    font-size: 14px;
}

.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    width: 70%;
    max-width: 70%;
    padding: 7px 14px;
    border: 2px dashed var(--border-color);
    transition: 0.2s;
    justify-content: center;
    border-radius: 5px;
    background-image: url(../img/browsefileicon.svg);
    background-repeat: no-repeat;
    background-position: 95% center;
    background-color: #def7e559;
}

    .file-drop-area:hover img {
        scale: 1.1;
        margin-top: 5px;
        margin-bottom: -5px;
    }

    .file-drop-area.is-active {
        background-color: rgba(255, 255, 255, 0.05);
    }

.fake-btn {
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 8px 15px;
    margin-right: 10px;
    font-size: 12px;
    text-transform: uppercase;
}

.file-msg {
    font-size: small;
    font-weight: 300;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    font-size: 14px;
}

    .file-msg img {
        vertical-align: middle;
        width: 50px;
        filter: opacity(0.5);
    }

    .file-msg strong {
        font-size: 16px;
        color: #000;
        font-weight: 600;
    }

[data-bs-theme="dark"] .file-msg img {
    filter: invert(1);
}

.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}

    .file-input:focus {
        outline: none;
    }

.nav-item .theme-switch {
    position: inherit;
}

a.addMore {
    display: flex;
    float: right;
    border: solid 1px green;
    width: auto;
    height: 27px;
    text-align: center;
    line-height: 25px;
    border-radius: 20px;
    /* justify-content: center; */
    align-items: center;
    font-size: 13px;
    margin-right: 3px;
    padding: 5px 5px;
    /* color: green; */
    font-weight: 500;
    position: relative;
    /* background: green; */
    /* color: #fff; */
    min-width: 103px;
    transition: 0.5s;
}

    a.addMore span {
        background: green;
        color: #fff;
        position: absolute;
        right: 0px;
        border-radius: 20px;
        padding: 0 10px;
        font-size: 13px;
    }

    a.addMore:hover span {
        background: green;
        color: #fff;
    }

    a.addMore i {
        color: green;
        margin-right: 5px;
    }

    a.addMore:hover {
        background-color: transparent;
    }

[data-bs-theme="dark"] .folder {
    background-color: transparent;
}

[data-bs-theme="dark"] .caret .arrow {
    color: #fff;
}

[data-bs-theme="dark"] .modal-content {
    background-color: var(--inner-menu-bg)
}

.folder .card-header {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    padding: 7px 10px !important;
    align-items: center;
    min-height: 51px;
}

.folder .card-body {
    padding: 10px
}

.folder .card-header div:first-child {
    display: flex;
    align-items: center;
}

.folder-listing .card-header {
    background-color: var(--bs-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 8px 10px !important;
    min-height: 40px;
}

.folder-structure {
    width: 100%;
}

.folder-main {
    position: relative;
    border: solid 1px #ddd;
    border-radius: 5px;
    padding: 7px 10px;
    width: 100%;
    display: inline-block;
    margin-bottom: 7px;
}

    .folder-main p {
        display: inline-block;
        margin: 0px;
        padding: 0px;
        font-size: 14px;
    }

    .folder-main .down-arrow {
        color: var(--black);
        font-size: 17px;
    }

.folder {
    color: var(--black);
    font-size: 15px;
    background: #fff;
    vertical-align: middle;
}

    .folder.card {
        margin-top: 10px;
    }

        .folder.card .card-footer {
            background-color: #fff;
            padding: 0 10px;
            border-top: none;
        }

    .folder h4 {
        font-size: 18px;
        margin: 0;
        padding: 0px
    }

a.folder {
    background-color: transparent;
}

    a.folder i {
        color: #ec9806;
    }

.folder-show-hide {
    display: inline-block;
    float: right;
    margin-right: 5px;
    margin-left: 5px;
    display: none;
    line-height: 18px;
    margin-top: 0px;
}

    .folder-show-hide a.edit {
        color: orange;
        font-size: 15px;
        margin-right: 5px;
    }

.label {
    font-weight: 600;
}

.trash {
    font-size: 15px;
    color: red !important;
}

a.trash {
    font-size: 15px;
    color: red;
}

.folder-show-hide a.trash {
    font-size: 15px;
    color: red;
}

.folder-main:hover .folder-show-hide, .uploadedFile:hover .folder-show-hide {
    display: block;
}

.positionadd {
    position: absolute;
    background-color: green;
    width: 20px;
    height: 20px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    right: -10px;
    top: 24%;
    border-radius: 5px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.folder-inner {
    width: 95%;
    float: right;
    display: inline-block;
}

.folder-main:hover {
    border-color: var(--primary-color);
}

/* auto search */
.folder .card-header .search-bar {
    background: transparent;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    position: relative;
    border: solid 1px #cfcfcf;
}

.search-bar {
    background: #ffffff;
    padding: 3px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    position: relative;
    border: solid 1px #cfcfcf;
}

    .search-bar.active {
        border-bottom: 1px solid #cfcfcf;
    }

    .search-bar i {
        color: var(--black);
        font-size: 16px;
    }

.list-group {
    padding: 10px;
    background: white;
    border-radius: 0 0 7px 7px;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    position: absolute;
    z-index: 56;
    box-shadow: 2px 2px 10px var(--login-shadow);
    width: 100%;
}

    .list-group li {
        color: var(--text-secondary);
        list-style: none;
        background: white;
        padding: 7px 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.2s ease;
        line-height: 16px;
        font-size: 14px;
        font-weight: 700;
    }

        .list-group li:hover {
            background: #dfe4ea;
        }

.search-bar.active {
    border-bottom: 1px solid #cfcfcf;
}

.search-bar input {
    font-size: 15px;
    border: none;
    outline: none;
    padding: 5px;
    width: 100%;
    height: 25px;
}

.card-header .search-bar.active {
    border-bottom: 1px solid #cfcfcf;
}

.card-header .search-bar input {
    font-size: 15px;
    border: none;
    outline: none;
    padding: 5px;
    width: 100%;
    height: 25px;
    background: transparent;
}

.card-header .search-bar i {
    color: var(--black);
    font-size: 16px;
}

.card-header .list-group {
    padding: 10px;
    background: white;
    border-radius: 0 0 7px 7px;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    position: absolute;
    z-index: 56;
    box-shadow: 2px 2px 10px var(--login-shadow);
    width: 362px;
}

    .card-header .list-group li {
        color: var(--text-secondary);
        list-style: none;
        background: white;
        padding: 7px 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.2s ease;
        line-height: 16px;
        font-size: 14px;
        font-weight: 700;
    }

        .card-header .list-group li:hover {
            background: #dfe4ea;
        }

.modal-body .vh-75 {
    min-height: 75vh !important;
}

.vh-75 {
    height: 74vh !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.vh-78 {
    height: 78vh !important;
}

.vh-55 {
    min-height: 55vh !important;
}

.padding-bottom-30 {
    padding-bottom: 30px;
}

.sidenavtag .tag-box {
    max-width: inherit;
    min-width: auto;
    padding-right: 22px;
}

.side-mata-head {
    font-size: 15px;
    font-weight: 500;
}

.mata-bg {
    background-color: #EAFFF8;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
}

[data-bs-theme="dark"] .mata-bg {
    background-color: var(--bs-body-bg);
}

.mata-bg ul li {
    margin-bottom: 5px;
}

.tag-box.alert-dismissible button {
    padding: 0;
    top: 7px;
    right: 5px;
    z-index: 0;
}

.multiselect__content-wrapper {
    z-index: 55 !important;
}

.folder-listing {
    border: none;
    box-shadow: 0 0 15px var(--login-shadow);
    width: 48%;
    display: inline-block;
    flex-flow: wrap;
    margin: 4px;
    margin-bottom: 10px;
    vertical-align: top;
    margin-top: 0;
}

.listingCard .folder-listing {
    border: none;
    box-shadow: 0 0 15px var(--login-shadow);
    width: 31.75%;
    display: inline-block;
    flex-flow: wrap;
    margin: 8px;
    margin-bottom: 10px;
    vertical-align: top;
    background-color: var(--bs-white);
    padding-top: 8px;
    border: solid 1px #c3ecd4;
    min-height: 203px;
}

.listingCard.list-view-filter .folder-listing {
    min-height: auto;
}

[data-bs-theme="dark"] .listingCard .folder-listing {
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .folder-listing, [data-bs-theme="dark"] .folder .card-header .search-bar, [data-bs-theme="dark"] .folder.card, [data-bs-theme="dark"] .tab-content {
    box-shadow: inset 0 0 0 0px var(--token-05b8d98e-abe0-4137-a801-0f724209b039, rgb(57, 57, 57)), inset 0 0 0 1px var(--token-1ae38199-cbce-439f-ab23-4f321f5e3f62, rgb(36, 36, 36));
    border: none;
}

.listingCard.list-view-filter .folder-listing {
    width: 100%;
}

.list-view-filter .folder-listing.card {
    display: flex;
    flex-flow: wrap !important;
    width: auto;
}

.list-view-filter .listing-title .listing-details {
    width: fit-content;
}

    .list-view-filter .listing-title .listing-details div {
        margin: 0 5px;
    }

        .list-view-filter .listing-title .listing-details div:first-child {
            margin-left: 0;
        }

.list-view-filter .folder-listing.card .card-footer {
    border-top: none;
    width: 30%;
    padding: 0 10px
}

.list-view-filter .folder-listing.card .card-body {
    padding: 0 10px;
    min-height: auto;
    width: 68%;
    display: grid;
    grid-template-columns: auto auto;
}

.list-view-filter .folder-listing.card {
    padding-bottom: 13px;
}

    .list-view-filter .folder-listing.card .card-body .listing-title {
        margin-bottom: 0;
    }

.premissionGrid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: flex-start;
    gap: 8px;
}

    .premissionGrid span {
        display: inline-block;
        font-size: 13px;
        padding: 2px 5px;
    }

        .premissionGrid span:first-child, .premissionGrid span:nth-child(2) {
            position: relative;
            padding-left: 0;
            padding-right: 5px;
        }

        .premissionGrid span:nth-child(2) {
            padding-left: 5px;
        }

.porfolio-listing .premissionGrid span:first-child, .porfolio-listing .premissionGrid span:nth-child(2) {
    padding-left: 5px;
}

    .porfolio-listing .premissionGrid span:first-child:after, .porfolio-listing .premissionGrid span:nth-child(2):after {
        display: none
    }

.premissionGrid span:first-child:after {
    position: absolute;
    width: 1px;
    background-color: #000;
    content: "";
    right: -5px;
    height: 50%;
    translate: 0 30%;
}

.versionFiles {
    background: #0da3e9;
    color: #ffffff;
    padding: 1px 3px;
    border-radius: 5px;
}
/* .list-view-filter .premissionGrid {
  display: none;
} */
.list-view-filter .folder-listing .card-header {
    min-height: 40px;
    display: grid;
}

.grid-view-filter .premissionList {
    display: none;
}

.list-view-filter .premissionList {
    display: block;
    margin-top: 10px;
}

.list-view-filter .folder-listing .card-footer .date {
    margin-right: 10px;
}

.list-view-filter .listing-link-fav {
    position: relative;
    margin-left: 0px;
    padding-left: 0px;
}

    .list-view-filter .listing-link-fav:before {
        display: none;
    }

    .list-view-filter .listing-link-fav a {
        margin: 0 3px;
    }

.fileSettings {
    display: flex;
    justify-content: space-between;
}

[data-bs-theme="dark"] .listingCard .folder-listing .card-header {
    background-color: transparent;
}

.modal-body .folder-listing {
    border: none;
    box-shadow: 0 0 15px var(--login-shadow);
    width: 48%;
    display: inline-block;
    flex-flow: wrap;
    margin: 4px;
    margin-bottom: 10px;
    vertical-align: top;
}

.folder-listing .card-header {
    border: none;
    display: grid;
    grid-template-columns: auto 50px;
    align-items: start;
    padding-bottom: 0 !important;
}

.folder-listing .card-body {
    border: none;
    padding-top: 3px;
    background-color: var(--bs-white);
    min-height: 104px;
    padding-bottom: 5px;
}

.listing-header {
    display: flex;
    padding-top: 10px;
}

    .listing-header .form-check {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }

        .listing-header .form-check input {
            width: 16px;
            height: 16px;
            border-color: #a7a7a7;
        }

    .listing-header .link {
        color: #0081FD;
        font-size: 20px;
        margin-right: 5px;
    }

    .listing-header .fav {
        color: #FFD767;
        font-size: 20px;
    }

        .listing-header .fav.disabled {
            color: rgb(121, 121, 121);
            font-size: 20px;
        }

.listing-title {
    display: flex;
    flex-flow: column;
    margin-bottom: 10px;
}

    .listing-title h3 {
        font-weight: 500;
        font-size: 15px;
        margin: 0;
        padding: 0;
        margin-bottom: 3px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .listing-title h3 a {
            color: var(--bs-black);
        }

[data-bs-theme="dark"] .listing-title h3 a {
    color: var(--bs-white);
}

.listing-title .listing-details {
    color: #000;
    display: grid;
    justify-content: flex-start;
    font-size: 12px;
    grid-template-columns: auto auto;
    gap: 10px;
    margin-bottom: 5px;
}

.listingCard .folder-listing.porfolio-listing {
    min-height: 179px;
}

.listingCard.list-view-filter .folder-listing.porfolio-listing {
    min-height: auto;
}

.porfolio-listing .listing-title {
    margin-bottom: 3px;
}

    .porfolio-listing .listing-title .listing-details {
        grid-template-columns: 33% 103px auto;
    }

.folder-listing.porfolio-listing .card-body {
    min-height: 80px;
}

.porfolio-listing .listing-title .listing-details div:first-child {
    width: 100%;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.listing-title .listing-details div i {
    color: var(--primary-color);
    font-size: 16px;
}

.folder-listing .card-footer .date {
    color: #000;
    font-size: 13px;
}

    .folder-listing .card-footer .date.red {
        color: #f00;
        font-size: 13px;
    }

    .folder-listing .card-footer .date.orange {
        color: #ffae00;
        font-size: 13px;
    }

    .folder-listing .card-footer .date.date-expiry {
        color: #f00;
    }

.listing-tags {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-flow: wrap;
    font-size: 13px;
}

.list-thumbnail {
    color: var(--black);
    font-size: 20px;
}

.icons-footer {
    color: #c2c2c2
}

    .icons-footer a {
        color: var(--black);
        font-size: 15px;
        margin: 2px 5px;
    }

    .icons-footer .dropdown {
        display: inline-block;
    }

    .icons-footer .dropdown-toggle:after {
        border: none
    }

    .icons-footer .dropdown-menu {
        border: solid 1px #228C22;
    }

[data-bs-theme="dark"] .icons-footer .dropdown-menu {
    border: solid 1px #bebebe;
}

ul.moretag {
    /* width: 322px;
    left: -179px !important; */
    padding: 10px;
    border: solid 1px var(--primary-color);
    box-shadow: 0 0 10px #9a9999;
}

[data-bs-theme="dark"] ul.moretag {
    border: solid 1px #bebebe;
    box-shadow: none;
}

ul.moretag h4 {
    font-size: 20px;
}

ul.pathview {
    width: 322px;
    left: -220px !important;
    padding: 10px;
    border: solid 1px var(--primary-color);
    box-shadow: 0 0 10px #9a9999;
    font-size: 13px;
}

[data-bs-theme="dark"] ul.pathview {
    box-shadow: none;
    background-color: white;
    color: #000;
}

ul.adjustul li a.dropdown-item {
    padding-left: 5px !important;
    padding-right: 5px !important;
    width: auto;
    font-size: 14px;
}

    ul.adjustul li a.dropdown-item img, ul.adjustul li a.dropdown-item i {
        height: 20px;
        width: 20px;
        display: inline-block;
        margin-right: 7px;
        font-size: 17px;
    }

.fav .bi.bi-star-fill {
    color: #FFD767;
}

.bi.bi-star-fill {
    color: #FFD767;
}

.folder-fav {
    position: absolute;
    right: 5px;
}

.fav .bi.bi-star {
    color: gray;
}

[data-bs-theme="dark"] ul.adjustul li a.dropdown-item img {
    filter: invert(1);
}

.dropdown-menu li, .listing-link-fav {
    position: relative !important;
}

    .dropdown-menu .tooltip, .listing-link-fav .tooltip {
        position: absolute;
        opacity: 0;
        top: -30px;
        right: -20px;
        background-color: var(--text-primary);
        border-radius: 5px;
        color: #fff;
        padding: 5px 10px;
        text-transform: none;
        transition: all 0.75s ease;
        text-wrap: nowrap;
        font-size: 14px;
        z-index: 100;
    }

.modal .tooltip {
    z-index: 9999;
}

[data-bs-theme="dark"] .dropdown .tooltip, [data-bs-theme="dark"] .listing-link-fav .tooltip {
    color: #000;
}

.dropdown .tooltip::after, .listing-link-fav .tooltip::after {
    position: absolute;
    bottom: -7px;
    left: 50px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid var(--text-primary);
    content: "";
    font-size: 0;
    line-height: 0;
    margin-left: -10px;
    width: 0;
    rotate: 90deg;
}


.dropdown .tooltip.active, .listing-link-fav .tooltip.active {
    opacity: 1;
}

.tag-box {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 15px;
    border: solid 1px;
    margin: 3px 2px;
    max-width: 100px;
    height: 26.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    line-height: 20px;
    font-size: 13px;
}

    .tag-box:nth-child(8n-1) {
        border-color: #18B2F8;
    }

    .tag-box:nth-child(8n-2) {
        border-color: #E0B080;
    }

    .tag-box:nth-child(8n-3) {
        border-color: #33BD94;
    }

    .tag-box:nth-child(8n-4) {
        border-color: #F99A9A;
    }

    .tag-box:nth-child(8n-5) {
        border-color: #EFC3ED;
    }

    .tag-box:nth-child(8n-6) {
        border-color: #79d4fe;
    }

    .tag-box:nth-child(8n-7) {
        border-color: #7c7c7c;
    }

    .tag-box:nth-child(8n-8) {
        border-color: #9cec8e;
    }

    .tag-box.more {
        background-color: #fff;
        border: none;
        overflow: visible;
        width: 26px;
        height: 26px;
        cursor: pointer;
        border: solid 1px var(--primary-color);
        border-radius: 20px;
        text-align: center;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
    }

        .tag-box.more .dropdown-toggle::after {
            border: none;
        }

        .tag-box.more .dropdown-toggle {
            color: var(--primary-color);
        }

[data-bs-theme="dark"] .tag-box.more .dropdown-toggle {
    color: var(--bs-white);
}

.folder-listing .card-footer {
    border: none;
    background-color: var(--bs-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: solid 1px #ddd
}

[data-bs-theme="dark"] .folder-listing .card-body, [data-bs-theme="dark"] .folder-listing .card-footer {
    background-color: var(--bs-card-bg);
    margin: 1px;
}

.card-header.listing-header .permission-check-cover {
    font-size: 12px;
    display: grid !important;
    grid-template-columns: 20px 20px auto;
    gap: 5px;
}

.permission-check-cover div img {
    width: 22px
}

.permission-check-cover h3 {
    font-size: 16px;
    margin-bottom: 0;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .permission-check-cover h3 a {
        color: #000;
        font-weight: 600;
    }

.permission-check-cover .permission-box {
    padding: 4px 12px;
    border-radius: 5px;
    margin: 2px;
}

.permission-box {
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12px;
}

    .permission-box.pending {
        background-color: #FFF1E3;
        color: #FF7C00;
    }

    .permission-box.common-permission {
        background-color: #D8F3FF;
        color: #006C9C;
    }

    .permission-box.rejected {
        background-color: #FFE6E9;
        color: #DF0000;
    }

    .permission-box.organization {
        background-color: #dcf9f6;
        color: #186c62;
    }

    .permission-box.private, .permission-box.approved {
        background-color: #dcfff3;
        color: #46bc6d;
    }

    .permission-box.public {
        background-color: #D8F3FF;
        color: #006C9C;
    }

    .permission-box.restricted {
        background-color: #fee9e9;
        color: #8a1616;
    }

    .permission-box.recalled {
        background-color: #FFE6E9;
        color: #DF0000;
    }

.listing-link-fav {
    text-align: right;
}

    .listing-link-fav a i {
        font-size: 18px;
    }

.permission-radio {
    border: solid 1px var(--color-light-gray);
    border-radius: 20px;
    padding: 3px;
    height: 38px;
    margin-bottom: 10px;
}

.permission-radio {
    > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn

{
    border-radius: 20px !important;
    margin-right: 5px;
    min-width: 150px;
    border: none;
    padding: 5px 8px !important;
    font-size: 14px;
}

> .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn {
    border-radius: 20px !important;
    margin-right: 5px;
    min-width: 150px;
    border: none;
    padding: 5px 8px !important;
    line-height: 20px;
    height: 30px;
    font-size: 14px;
}

}

.permission-radio .btn {
    border-radius: 20px;
}

    .permission-radio .btn:last-child {
        margin-right: 0px;
    }

.btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn:hover, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active {
    font-weight: 500;
}

.fileSettings {
    position: relative;
    margin-top: -10px;
}


.filter-buttons {
    display: flex;
    margin-bottom: 1px;
}

.list-view-button,
.grid-view-button {
    border: 1px solid var(--input-bg);
    padding: 5px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    background: #D8D8D8;
    color: var(--bs-white);
    min-width: 33px;
    text-align: center;
    color: #444444;
}

[data-bs-theme="dark"] .list-view-button,
[data-bs-theme="dark"] .grid-view-button {
    border: 1px solid var(--input-bg);
    background: var(--input-bg);
    color: var(--bs-white);
}



.list-view-button {
    margin-right: 10px;
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

    .list li {
        border-radius: 3px;
        margin-bottom: 10px;
        transition: 0.3s;
    }


    .list.list-view-filter {
        flex-direction: column;
    }

        .list.list-view-filter li {
            padding: 10px;
        }

    .list.grid-view-filter {
        flex-flow: row wrap;
    }

        .list.grid-view-filter li {
            width: calc(50% - 210px);
            padding: 100px;
            margin-right: 10px;
            text-align: center;
        }

.totalcount {
    display: inline-block;
    background-color: gainsboro;
    border-radius: 20px;
    min-width: 25px;
    height: 25px;
    text-align: center;
    font-size: 12px;
    line-height: 25px;
    margin-left: 5px;
}

.nav-tabs .nav-link {
    color: var(--black) !important;
}

    .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active:active, .nav-tabs .nav-link.active:hover {
        font-weight: 700;
        color: var(--text-secondary) !important;
        background: transparent;
        border: none;
        border-bottom: solid 3px #FFCE46;
    }

.nav-tabs .nav-link {
    border: none;
    color: var(--text-secondary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-tabs .nav-link:hover {
        border: none;
    }

[data-bs-theme="dark"] .nav-tabs .nav-link, [data-bs-theme="dark"] .nav-tabs .nav-link:hover, [data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .totalcount {
    color: #333;
}

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

.fileOptions {
    /* background-color:#dcf3eb; */
    display: flex;
    align-items: center;
    border-radius: 0px;
    padding: 5px 20px;
    position: relative;
    padding-right: 35px;
    margin-right: 10px;
    margin-top: 0;
    margin-bottom: 1px;
    border-right: solid 2px #ddd;
    font-size: 12px;
}

    .fileOptions .selectedBox {
        background-color: var(--primary-color);
        color: #fff;
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 5px;
        text-align: center;
        line-height: 25px;
    }

    .fileOptions .btn-close {
        opacity: 1;
        padding: 5px;
        outline: none;
    }

    .fileOptions.alert-dismissible .btn-close {
        top: 9px;
        right: 14px;
    }

    .fileOptions .btn-close:hover {
        opacity: 1;
        background-color: var(--primary-color);
    }

button:focus, button:active, button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.fileOptions .me-3:nth-child(3) {
    margin-right: 0px !important;
}

[data-bs-theme="dark"] .fileOptions {
    background-color: #2c2c2c;
}

[data-bs-theme="dark"] .strokebtn {
    color: var(--bs-white);
}

    [data-bs-theme="dark"] .strokebtn img {
        filter: invert(1);
    }

.strokebtn {
    padding: 3px 10px;
    border: solid 2px;
    border-radius: 5px;
    margin: 0 3px;
    color: var(--black);
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    vertical-align: middle;
}

    .strokebtn i, .strokebtn img {
        margin-right: 6px;
        height: 20px;
        font-size: 18px;
    }

    .strokebtn img {
        vertical-align: bottom;
    }

    .strokebtn i {
        vertical-align: sub;
    }

    .strokebtn.green {
        border-color: var(--primary-color);
    }

    .strokebtn.red {
        border-color: #CA0000;
    }

nav.fileView {
    margin-top: -16px;
}

.fileView .nav {
    justify-content: flex-start;
}

.fileView .nav-link object {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    height: auto;
}

.fileView .nav-link.active object {
    filter: invert(27%) sepia(100%) saturate(2637%) hue-rotate(458deg) brightness(77%) contrast(88%);
    vertical-align: middle;
    margin-right: 5px;
    font-weight: 500;
    width: 24px;
    height: auto;
}

.fileView .nav-tabs .nav-link.active, .fileView .nav-tabs .nav-link.active:focus, .fileView .nav-tabs .nav-link.active:active, .fileView .nav-tabs .nav-link.active:hover {
    border-bottom: solid 3px var(--primary-color);
    color: var(--primary-color) !important;
}

.fileView .nav-link:nth-child(1) {
    position: relative
}

    .fileView .nav-link:nth-child(1):before {
        position: absolute;
        right: 0;
        content: "";
        border-right: solid 2px #b1a6a6;
        height: 20px;
        top: calc(50% - 10px);
    }

.fileviewborder.tab-content {
    border: none;
}

.fileviewCon {
    background-color: var(--bs-white);
    border-radius: 8px;
    box-shadow: 0 0 10px #9a999936;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 100vh;
    vertical-align: top;
}

.min-vh-100 {
    min-height: 100vh;
}

.fileviewCon .details {
    padding: 20px;
    padding-bottom: 10px;
    width: 60%;
}

    .fileviewCon .details .table {
        border: solid 1px #A2D7A2;
        border-radius: 8px;
        border-collapse: separate;
    }

        .fileviewCon .details .table thead tr th {
            background-color: #EFFBEF !important;
            padding: 10px;
        }

        .fileviewCon .details .table tbody tr td {
            background-color: #fff !important;
            padding: 10px;
        }

        .fileviewCon .details .table thead {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .fileviewCon .details .table i {
            font-size: 18px;
            vertical-align: middle;
        }

    .fileviewCon .details h5.steps {
        position: relative;
    }

        .fileviewCon .details h5.steps:before {
            position: absolute;
            content: "";
            height: 50px;
            border-left: solid 1px var(--primary-color);
            top: 21px;
            width: 15px;
            border-bottom: solid 1px var(--primary-color);
        }

    .fileviewCon .details .desc p {
        background-color: #e7fbf5;
        padding: 10px;
        border-radius: 5px;
    }

    .fileviewCon .details fieldset {
        border: solid 1px var(--primary-color);
        box-shadow: none;
        height: 100%;
        margin-top: 10px;
    }

        .fileviewCon .details fieldset p {
            margin-bottom: 7px;
        }

    .fileviewCon .details h5 {
        font-size: 16px;
        color: var(--primary-color);
        margin-bottom: 10px;
    }

    .fileviewCon .details .shadowBox {
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
        padding: 10px;
        border-radius: 10px;
    }

.fileviewCon .property {
    width: 40%;
    height: 100%;
    padding: 20px;
    padding-bottom: 10px;
}

    .fileviewCon .property .linkedProtfolio, .fileviewCon .details .linkedProtfolio {
        background-color: #E8FFE8;
        padding: 20px;
        margin-bottom: 10px;
    }

        .fileviewCon .property .linkedProtfolio ul, .fileviewCon .details .linkedProtfolio ul {
            padding: 0px
        }

            .fileviewCon .property .linkedProtfolio ul li, .fileviewCon .details .linkedProtfolio ul li {
                padding-left: 15px;
                position: relative;
                margin-bottom: 6px;
            }

                .fileviewCon .property .linkedProtfolio ul li a, .fileviewCon .details .linkedProtfolio ul li a {
                    color: #000;
                    text-decoration: underline;
                }

                [data-bs-theme="dark"] .fileviewCon .property .linkedProtfolio ul li a, .fileviewCon .details .linkedProtfolio ul li a {
                    color: #fff;
                    text-decoration: underline;
                }

                .fileviewCon .property .linkedProtfolio ul li:before, .fileviewCon .details .linkedProtfolio ul li:before {
                    position: absolute;
                    left: 0;
                    width: 10px;
                    height: 10px;
                    background-color: var(--primary-color);
                    content: "";
                    top: 6px;
                }

        .fileviewCon .property .linkedProtfolio h5, .fileviewCon .property .mataData h5, .fileviewCon .details .linkedProtfolio h5, .fileviewCon .details .mataData h5 {
            color: var(--primary-color);
            font-size: 15px;
            margin-bottom: 8px;
        }

    .fileviewCon .property .mataData, .fileviewCon .details .mataData {
        background-color: #FAFFDC;
        padding: 20px;
        margin-bottom: 10px;
    }

        .fileviewCon .property .mataData p, .fileviewCon .details .mataData p {
            margin-bottom: 6px;
        }

            .fileviewCon .details .mataData p a {
                text-decoration: underline;
                color: #1f00d9;
            }

.fileviewHeader {
    background-color: var(--bs-white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px #9a999936;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 8px;
    font-size: 13px;
}

.fileviewHeader_innerBox {
    /* background-color: var(--bs-white); */
    padding: 20px 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px #9a999936;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 8px;
    font-size: 13px;
}

.fileviewHeader .innerData {
    /* display: flex; */
    font-weight: 200;
    font-size: 13px;
    width: 100%;
    display: block;
}

.fileviewHeader .innerOptions {
    /* width: 365px; */
    width: 100px;
    text-align: right;
    display: inline-block;
    justify-content: center;
}

.width-365 {
    width: 365px !important;
}

.fileviewHeader .innerOptions a {
    display: inline-flex;
    /* background-color:rgb(34 140 34 / 39%); */
    /* border-radius: 20px; */
    justify-content: center;
    align-items: center;
    margin: 5px 5px;
}

    .fileviewHeader .innerOptions a.view i {
        color: var(--primary-color);
        font-size: 18px;
        vertical-align: middle;
    }

    .fileviewHeader .innerOptions a.edit i {
        color: #4791FF;
        font-size: 18px;
        vertical-align: middle;
    }

    .fileviewHeader .innerOptions a.link i {
        color: #0026EE;
        font-size: 18px;
        vertical-align: middle;
    }

    .fileviewHeader .innerOptions a i {
        color: #000;
        font-size: 15px;
    }

.color-red {
    color: red !important;
}

.color-green {
    color: green !important;
}

.color-orange {
    color: orange !important;
}

.color-black {
    color: #000 !important;
}

.fileviewHeader .color-green strong {
    color: var(--bs-black);
}

.fileviewHeader h4, .fileviewHeader_innerBox h4 {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 17px;
    color: var(--bs-black);
    word-wrap: break-word;
    word-break: break-all;
}

.fileviewHeader .headerIcon {
    display: inline-block;
    width: 25px;
    margin-right: 5px;
}

    .fileviewHeader .headerIcon i, .fileviewHeader .headerIcon img {
        font-size: 21px;
        color: #000;
        margin: 5px 0;
        width: 20px;
    }

[data-bs-theme="dark"] .fileviewHeader .headerIcon i {
    color: #fff;
}
/* Radio group moving select
.radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  position: relative;
  width: 60%;
    margin: auto;
    background: var(--bs-white);
    border: solid 1px #838DA0;
    border-radius: 20px;
    overflow: hidden;

  > input[type="radio"] {
    display: none;
  }

  > label {
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: center;
    z-index: 2;
    color: #000;
  }

  
}

.selection-indicator {
  --labels:4;
  width: calc(100% / var(--labels));
  height: 100%;
  background-color: var(--primary-color);
  position: absolute;
 
  transition-duration: 0.2s;
border-radius: 20px;
  left: 0;
  pointer-events: none;
}

.radio-group input[type="radio"]:nth-of-type(2):checked ~ .selection-indicator {
  left: 25%;
}
.radio-group input[type="radio"] + label{
  color: #fff;
}

.radio-group input[type="radio"]:nth-of-type(3):checked ~ .selection-indicator {
  left: 50%;
}
.radio-group input[type="radio"]:nth-of-type(4):checked ~ .selection-indicator {
  left: 75%;
} */
.portfolio-permission .permission-cover .permission-inner-div {
    width: 48.5%;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    margin-bottom: 10px;
}

    .portfolio-permission .permission-cover .permission-inner-div:after {
        border-bottom: none;
    }

.permission-cover {
    margin: 10px;
    padding: 10px;
    border: solid 1px #E2DADA;
    border-radius: 10px;
    position: relative;
}

[data-bs-theme="dark"] .permission-cover {
    box-shadow: inset 0 0 0 0px var(--token-05b8d98e-abe0-4137-a801-0f724209b039, rgb(57, 57, 57)), inset 0 0 0 1px var(--token-1ae38199-cbce-439f-ab23-4f321f5e3f62, rgb(36, 36, 36)) !important;
    border: none !important;
}

.permission-cover h3 {
    font-size: 15px;
    font-weight: 600;
}

.permission-cover .permission-inner-div {
    margin-bottom: 10px;
    text-indent: 7px;
    position: relative;
    margin-bottom: 20px;
}

.modal-body .permission-cover .permission-inner-div {
    margin-bottom: 10px;
    text-indent: 7px;
    position: relative;
    margin-bottom: 20px;
    overflow: inherit;
    vertical-align: top;
}

.modal-body .scrollDiv {
    /* max-height: 190px;
  overflow: auto; */
}

.modal-body .permission-cover .permision-bg {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px var(--login-shadow);
    /* min-height: 280px; */
    position: relative;
    padding-bottom: 50px;
    overflow: inherit;
}

[data-bs-theme="dark"] .modal-body .permission-cover .permision-bg, [data-bs-theme="dark"] .permision-bg {
    box-shadow: inset 0 0 0 0px var(--token-05b8d98e-abe0-4137-a801-0f724209b039, rgb(57, 57, 57)), inset 0 0 0 1px var(--token-1ae38199-cbce-439f-ab23-4f321f5e3f62, rgb(36, 36, 36)) !important;
    border: none !important;
    background-color: var(--bs-body-bg) !important;
}

.permission-inner-div::after {
    position: absolute;
    content: " ";
    border-bottom: solid 1px #d2e3dd;
    width: 100%;
    bottom: -10px;
    left: 0;
}

.permission-inner-div .add-btn {
    border: dashed 3px #fff;
    display: block;
    padding: 5px;
    border-radius: 10px;
    margin: 10px auto;
    text-align: center;
    background-color: #DBF2EB;
    color: var(--text-primary);
    position: absolute;
    bottom: 0px;
    width: 95%;
    left: 5px;
    right: 5px;
}

.permission-cover .permision-bg {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px var(--login-shadow);
    /* min-height: 185px; */
    position: relative;
    overflow: auto;
    padding-bottom: 30px;
}

.permision-bg .details-permission {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 130px;
}

.color-remove-select .vs__dropdown-toggle {
    background: transparent;
    margin: 0 5px;
}

.group-team-1 .vs__selected, .group-permission-1 .vs__selected {
    width: 69px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permission-cover .permission-delete {
    color: red;
    display: inline-block;
    margin-top: 8px;
}

.modal-body .permission-inner-div {
    width: 49%;
    display: inline-block;
    margin-right: 8px;
}

.btn-outline-submit {
    border: solid 1px #8b8b8b;
}

    .btn-outline-submit:hover, .btn-outline-submit:focus {
        border: solid 1px #8b8b8b;
        background: #ebebea;
    }

    .btn-outline-submit.primary {
        border: solid 1px var(--primary-color);
        color: var(--primary-color);
    }

        .btn-outline-submit.primary:hover, .btn-outline-submit.primary:focus {
            border: solid 1px var(--primary-color);
            color: var(--primary-color);
            background: #ebebea;
        }

.doc-type {
    padding: 3px 8px;
    display: inline-block;
    background-color: rgba(34, 140, 34, 17%);
    border-radius: 5px;
    margin: 3px;
    text-align: center;
    min-width: 54px;
    font-weight: 500;
}

input[type="password"]::-ms-reveal {
    display: none;
}

.password-show-hide {
    background: none;
    border: none;
    color: var(--primary-color);
    /* display: none; */
    /* font-size: .9em; */
    font-weight: 600;
    /* padding: .5em; */
    position: absolute;
    right: 7px;
    top: 55%;
    translate: -50%;
    z-index: 9;
}

.link-portfolio-cover {
    background-color: var(--bs-white);
    box-shadow: 0 0 15px var(--login-shadow);
    border-radius: 10px;
    padding: 10px;
}

    .link-portfolio-cover .description {
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.width-reducer {
    max-width: 70%;
    min-width: 70%;
}

.min-width-reducer {
    max-width: 45%;
    min-width: 45%;
}

.header-customize {
    border-bottom: none;
}

/* tree view */
#myUL {
    margin: 0;
    padding: 0;
    width: calc(100% - 10px);
}

.listParent {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    border: solid 1px #ddd;
    border-radius: 5px;
    padding: 0 0 0 9px;
    margin-bottom: 5px;
    position: relative;
    /* margin-left: 0px !important; */
}

    .listParent.selected, .caret.selected, .nested.active li.selected {
        background-color: var(--menu-select-bg);
    }

[data-bs-theme="dark"] .listParent, [data-bs-theme="dark"] .caret, [data-bs-theme="dark"] .nested.active li {
    border: solid 1px #dddddd4a;
}

    [data-bs-theme="dark"] .listParent.selected, [data-bs-theme="dark"] .caret.selected, [data-bs-theme="dark"] .nested.active li.selected {
        background-color: rgb(27 31 34);
        color: var(--primary-color);
    }

.caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    display: block;
    border: solid 1px #ddd;
    border-radius: 5px;
    padding: 0px 0px 0 9px;
    margin-bottom: 5px;
    position: relative;
    margin-left: 15px
}

    .caret .arrow {
        color: #000;
        display: inline-block;
    }

/* .caret .arrow i {
  font-size: 22px;
} */
.arrow-down .arrow {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}

.caret p, .listParent p {
    display: inline-block;
    margin-bottom: 0;
    width: 75%;
    vertical-align: text-top;
}

.nested .caret p {
    display: inline-block;
    margin-bottom: 0;
    width: 75%;
    vertical-align: text-top;
}

.caret:hover .folder-show-hide, .listParent:hover .folder-show-hide {
    display: block;
}

.nested {
    display: none;
}

    .nested.active {
        display: block;
        padding-left: 0;
        margin-left: 15px;
    }

        .nested.active .subsec {
            position: relative;
            display: block;
        }

            .nested.active .subsec p {
                display: inline-block;
                margin-bottom: 0;
                width: 75%;
                vertical-align: top;
            }

            .nested.active .subsec:hover .folder-show-hide {
                display: block;
            }

            .nested.active .subsec .positionadd {
                right: -19px;
                top: 12%;
            }

        .nested.active li {
            display: block;
            /* border: solid 1px #ddd; */
            border-radius: 5px;
            padding: 0 0 0 9px;
            margin-bottom: 5px;
            /* margin-left: 15px; */
        }

            .nested.active li.border-0 {
                padding: 0;
            }

.Portfolio-linking {
    background-color: #fff;
}

[data-bs-theme="dark"] .Portfolio-linking {
    background-color: transparent;
}

[data-bs-theme="dark"] .bg-white {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .singleFile:nth-child(even) {
    background-color: #373737;
}

.Portfolio-linking .card-header {
    background-color: #DCF3DC;
    padding: 15px;
    font-weight: 600;
}

.Portfolio-linking .card-body .caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    display: block;
    border: none;
    border-radius: 5px;
    padding: 6px 9px;
    margin-bottom: 5px;
    position: relative
}

.Portfolio-linking .card-body .nested.active li {
    border: none;
}

.Portfolio-linking .uploadedFile {
    margin-bottom: 5px;
    width: 95%;
}

.form-style-change .form-check label .tag-box {
    padding: 0px 8px;
    height: 21px;
}

.card-header .list-group li small {
    display: block;
    font-size: 12px;
    color: gray;
    position: relative;
    padding-left: 15px;
    line-height: 14px;
    margin-top: 9px;
}

    .card-header .list-group li small:before {
        font-family: bootstrap-icons;
        position: absolute;
        content: "\F3D9";
        left: 0;
    }

.list-group .highlight {
    background: #dfe4ea !important;
}

.web-show {
    display: block
}

.web-show-inline {
    display: inline-block
}

.mobile-show {
    display: none
}

.singleFile {
    padding: 10px
}

    .singleFile .vs--searchable .vs__dropdown-toggle {
        height: 38px;
    }

    .singleFile:nth-child(even) {
        background-color: #f3f3f3;
    }

    .singleFile .uploadedFile {
        margin-bottom: 0;
    }

.tab-content {
    padding: 10px;
    border: solid 1px #ddd;
    border-radius: 8px;
    background: #fff
}

.nav.nav-tabs {
    border-bottom: none;
    margin-bottom: 1px;
    padding-left: 15px;
}

.positionButton {
    position: relative;
}

    .positionButton .form-control {
        padding-right: 60px;
    }

.positioningBtn {
    position: absolute;
    z-index: 1;
    right: 2px;
    top: 31px;
}

.positioningBtn2 {
    position: absolute;
    z-index: 1;
    right: 35px;
    top: 35px;
    font-size: 16px;
    cursor: pointer;
}

[data-bs-theme="dark"] .permission-cover .permision-bg {
    background-color: #1B1F22;
}

[data-bs-theme="dark"] .permission-inner-div .add-btn {
    border: dashed 3px #434343;
    background-color: #2c2c2c;
}

[data-bs-theme="dark"] .folder .card-header {
    background-color: transparent;
}

    [data-bs-theme="dark"] .folder .card-header .search-bar {
        background-color: transparent;
    }

[data-bs-theme="dark"] .card-header .search-bar i {
    color: var(--bs-white);
}

[data-bs-theme="dark"] .card-header .search-bar input {
    background-color: transparent;
}

[data-bs-theme="dark"] .card {
    color: var(--bs-white);
}

[data-bs-theme="dark"] .tag-box.more {
    color: var(--bs-white);
    background-color: transparent;
    border: solid 1px var(--bs-white)
}

[data-bs-theme="dark"] .down-arrow, [data-bs-theme="dark"] .icons-footer a, [data-bs-theme="dark"] .folder, [data-bs-theme="dark"] .list-thumbnail {
    color: var(--bs-white);
}

[data-bs-theme="dark"] .folder-listing .card-footer .date {
    color: #e19f9f;
}

[data-bs-theme="dark"] .link-portfolio-cover {
    background-color: var(--bs-body-bg);
    box-shadow: inset 0 0 0 0px var(--token-05b8d98e-abe0-4137-a801-0f724209b039, rgb(57, 57, 57)), inset 0 0 0 1px var(--token-1ae38199-cbce-439f-ab23-4f321f5e3f62, rgb(36, 36, 36));
    border: none;
}

[data-bs-theme="dark"] .Portfolio-linking .card-header {
    background-color: #323232;
}

[data-bs-theme="dark"] .caret::before {
    color: #fff
}

[data-bs-theme="dark"] .Portfolio-linking .card-header {
    background-color: #2d2d2d;
}

[data-bs-theme="dark"] .override {
    filter: invert(1);
}

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

    .override-uploadedFile .remove {
        color: #f00;
        margin: 2px;
        position: relative;
        padding-right: 8px;
    }

.uploadedFile .remove:after {
    position: absolute;
    content: "|";
    right: 0px;
    color: var(--black);
    top: -1px;
}

[data-bs-theme="dark"] .override-uploadedFile .remove:after {
    color: var(--bs-white);
}

.override-uploadedFile .edit {
    color: #FFAB00;
    margin: 2px;
}

.override-uploadedFile .override {
    color: #000;
    margin: 2px;
    font-size: 17px;
}

.override-uploadedFile .override-description {
    display: inline-block;
    margin-left: 4px;
    font-size: 14px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.override-uploadedFile .restricted {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 8px;
    background-color: #d6f5f4;
}

.override-uploadedFile .doc-img-override {
    width: 24px;
    height: auto;
    margin-left: 7px;
    background-color: var(--white-bg);
    box-shadow: 0px 0px 10px #c4c2c2;
    border-radius: 5px;
    padding: 3px;
    margin-right: 4px;
    text-align: center;
}

    .override-uploadedFile .doc-img-override img {
        max-width: 18px;
        max-height: 18px;
        min-width: 18px;
        vertical-align: sub;
    }

[data-bs-theme="dark"] .override-uploadedFile .doc-img-override {
    background: #fff;
}

.accordion {
    --bs-accordion-bg: transparent;
}

.accordion-button {
    background-color: var(--bs-accordion-btn-bg);
}

    .accordion-button:not(.collapsed) {
        background-color: transparent;
        box-shadow: none;
    }

    .accordion-button:focus {
        outline: none;
        box-shadow: none;
    }

.accordion-item {
    border: solid 1px #ddd !important;
    border-radius: 8px !important;
    margin-bottom: 5px;
}

.accordion-button:disabled:after {
    background-image: none !important;
    border: none;
}

.mandatory {
    color: red;
    margin-left: -5px;
}

.permissionAccordian {
    border: solid 1px #A2D7A2;
    border-radius: 8px;
    padding: 10px;
}

    .permissionAccordian .accordion-button {
        padding: 5px;
        /* border: none; */
        font-size: 14px;
        font-weight: 600;
    }

    .permissionAccordian .accordion-item {
        border: none !important;
        border-radius: 8px !important;
        margin-bottom: 5px;
    }

    .permissionAccordian .accordion-body {
        background-color: #EFFBEF;
        border-radius: 5px;
        padding: 10px;
    }

        .permissionAccordian .accordion-body .form-control {
            border: none;
            font-size: 13px;
        }

.authorizationCover {
    border: solid 1px #A2D7A2;
    border-radius: 8px;
    padding: 10px;
}

.authCard {
    box-shadow: 0 0 10px #ddd;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}

    .authCard .leftICon {
        width: 60px;
    }

    .authCard .rightCon {
        width: auto;
        color: #989898;
    }

        .authCard .rightCon strong {
            color: var(--primary-color)
        }

    .authCard .leftICon .icon {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        position: relative;
    }

        .authCard .leftICon .icon:before {
            position: absolute;
            content: "";
            border: solid 1px #ddd;
            border-radius: 50%;
            width: 30px;
            height: 30px;
        }

        .authCard .leftICon .icon.approved {
            background-color: #EFFBEF;
            position: relative;
            color: #548054;
            ;
        }

            .authCard .leftICon .icon.approved:before {
                border-color: #548054;
            }

        .authCard .leftICon .icon.archived {
            background-color: #fbfaef;
            position: relative;
            color: #8a5443;
            ;
        }

            .authCard .leftICon .icon.archived:before {
                border-color: #8a5443;
            }

        .authCard .leftICon .icon.returned {
            background-color: #fbefef;
            position: relative;
            color: #c93434;
            ;
        }

            .authCard .leftICon .icon.returned:before {
                border-color: #c93434;
            }

        .authCard .leftICon .icon.retrived {
            background-color: #f5effb;
            position: relative;
            color: #563675;
            ;
        }

            .authCard .leftICon .icon.retrived:before {
                border-color: #563675;
            }

        .authCard .leftICon .icon.modified {
            background-color: #eff2fb;
            position: relative;
            color: #344a8d;
        }

            .authCard .leftICon .icon.modified:before {
                border-color: #344a8d;
            }

.property .details {
    width: 100%;
}

.accordion-button:not(.collapsed) {
    color: var(--primary-color);
}

.accordion-button::after {
    border: solid 1px var(--primary-color);
    border-radius: 5px;
    padding: 5px;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A76F'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    background-size: 14px;
    background-position: center center;
}

[data-bs-theme="dark"] .fileviewHeader {
    background-color: transparent;
}

    [data-bs-theme="dark"] .fileviewHeader h4 {
        color: #fff
    }
/* [data-bs-theme="dark"] .fileviewHeader .innerOptions a {
  background-color: var(--primary-color);
} */
[data-bs-theme="dark"] .fileviewCon {
    background-color: transparent
}

[data-bs-theme="dark"] .fileviewHeader .color-green strong {
    color: #fff
}

[data-bs-theme="dark"] .fileView .nav-link object {
    filter: invert(1) sepia(0%) saturate(2637%) hue-rotate(458deg) brightness(100%) contrast(100%);
}

[data-bs-theme="dark"] .fileView .nav-link.active object {
    filter: invert(27%) sepia(100%) saturate(2637%) hue-rotate(458deg) brightness(77%) contrast(88%);
}

[data-bs-theme="dark"] .fileviewCon .details .desc p {
    background-color: #262626;
}

[data-bs-theme="dark"] .fileviewCon .property .linkedProtfolio, [data-bs-theme="dark"] .fileviewCon .property .mataData {
    background-color: #262626;
}

[data-bs-theme="dark"] .fileviewCon .details .table thead tr th {
    background-color: #262626 !important
}

[data-bs-theme="dark"] .fileviewCon .details .table tbody tr td {
    background-color: #2c2c2c !important;
}

[data-bs-theme="dark"] .fileviewCon .details .table {
    border: solid 1px #6a6a6a;
}

[data-bs-theme="dark"] .color-black {
    color: #fff
}

[data-bs-theme="dark"] .authCard {
    box-shadow: 0 0 10px #262626;
    padding: 10px;
    background-color: #262626;
}

[data-bs-theme="dark"] .color-green {
    color: #34ac34;
}

[data-bs-thme="dark"] .permissionAccordian .accordion-body {
    background-color: #252625;
}

[data-bs-theme="dark"] .permissionAccordian .accordion-body {
    background-color: #212121;
}

.paginationBox {
    /* display: block;
  text-align: right; */
    display: flex;
    text-align: right;
    justify-content: space-between;
    border-top: solid 1px #ddd;
    padding: 5px;
    font-size: 13px;
}

    .paginationBox ul {
        padding: 0;
        margin: 0;
    }

        .paginationBox ul li {
            display: inline-block;
            font-size: 13px;
        }

            .paginationBox ul li a {
                background-color: #ffffff;
                color: var(--primary-color);
                padding: 5px;
                border: solid 1px #ddd;
                border-radius: 5px;
                min-width: 30px;
                display: block;
                text-align: center;
            }

                .paginationBox ul li a:hover {
                    background-color: var(--primary-color);
                    color: #fff
                }

                .paginationBox ul li a.active {
                    background-color: var(--primary-color);
                    color: #fff;
                }

                .paginationBox ul li a.prev, .paginationBox ul li a.next {
                    min-width: 50px;
                }

body:has(#sidebar) .card-footer .paginationBox {
    width: 52.5%;
}

body:has(#sidebar.expand) .card-footer .paginationBox {
    width: 45.5%;
}

.listingCard {
    margin-bottom: 10px;
    height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.verticalTab {
    width: 100%;
    max-width: 100%;
    min-height: 80vh;
    margin: auto;
    display: grid;
    place-content: normal;
}

    .verticalTab .verticalBox {
        display: flex;
        background-color: transparent;
        color: #000;
        margin: 0em auto;
        width: 100%;
        padding: 0;
    }

        .verticalTab .verticalBox .tab {
            height: 100%;
            padding: 0 25px;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
            transition: 800ms;
            cursor: pointer;
            border-radius: 10px;
            margin: 0px 3px;
            background-color: #fff;
        }

[data-bs-theme="dark"] .verticalTab .verticalBox .tab {
    background-color: transparent;
}

.verticalTab .verticalBox .tab h2 {
    font-size: 17px;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    writing-mode: vertical-rl;
    rotate: 0deg;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #000;
    letter-spacing: 0px;
    padding-top: 10px;
    font-weight: 500;
}

.verticalTab .verticalBox .tab.active h2 {
    left: 0px;
    right: auto;
    margin: 0;
    font-weight: 600;
    rotate: 0deg;
    writing-mode: horizontal-tb;
    align-items: baseline;
    height: auto;
    z-index: 1;
    padding: 10px 15px;
    background-color: transparent;
}

.verticalTab .verticalBox .tab .innerBox {
    display: block;
    gap: 10px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
    color: #000;
    padding: 33px 15px;
    opacity: 0;
    transform: translate(1);
    transition: 300ms;
    cursor: pointer;
}

.verticalTab .verticalBox .tab.active {
    width: 100% !important;
    cursor: default;
    background-color: #f9f9f9;
}

    .verticalTab .verticalBox .tab.active .innerBox {
        opacity: 1;
        transform: none;
    }

        .verticalTab .verticalBox .tab.active .innerBox.active {
            overflow: auto;
            scrollbar-width: thin;
        }

.border-blue {
    border: solid 1px #0d97e3 !important;
    border-top: solid 4px #0d97e3 !important;
    border-radius: 10px;
    border-right: solid 1px #0d97e3 !important;
}

.border-orange {
    border: solid 1px #F17300 !important;
    border-top: solid 4px #F17300 !important;
    border-radius: 10px;
    border-right: solid 1px #F17300 !important;
}

.border-green {
    border: solid 1px var(--color-green) !important;
    border-top: solid 4px var(--color-green) !important;
    border-radius: 10px;
    border-right: solid 1px var(--color-green) !important;
}

.border-red {
    border: solid 1px #DF0000 !important;
    border-top: solid 4px #DF0000 !important;
    border-radius: 10px;
    border-right: solid 1px #DF0000 !important;
}

.border-yellow {
    border: solid 1px #E4B125 !important;
    border-top: solid 4px #E4B125 !important;
    border-radius: 10px;
    border-right: solid 1px #E4B125 !important;
}

.verticalTab .verticalBox .tab.border-blue h2 {
    /* background-color: #0d97e3; */
    display: flex;
    width: fit-content;
    color: #0d97e3;
    border-radius: 5px;
    margin: 3px auto;
    height: auto;
    padding: 6px 8px;
    margin-top: 10px;
    /* height: 167px; */
    justify-content: space-between;
}

.verticalTab .verticalBox .tab.border-blue.active h2 {
    /* background-color:#0d97e3; */
    padding-left: 13px;
    width: 100%;
    height: auto !important;
    border-radius: 0;
    justify-content: flex-start;
    margin-top: 0px;
}

.verticalTab .verticalBox .tab.border-orange h2 {
    /* background-color: #F17300; */
    display: flex;
    width: fit-content;
    color: #F17300;
    border-radius: 5px;
    margin: 3px auto;
    height: auto;
    padding: 6px 8px;
    margin-top: 10px;
    /* height: 167px !important; */
    justify-content: space-between;
}

.verticalTab .verticalBox .tab.border-green h2 {
    /* background-color: #F17300; */
    display: flex;
    width: fit-content;
    color: var(--color-green);
    border-radius: 5px;
    margin: 3px auto;
    height: auto;
    padding: 6px 8px;
    margin-top: 10px;
    /* height: 167px !important; */
    justify-content: space-between;
}

.verticalTab .verticalBox .tab.border-orange.active h2 {
    /* background-color: #F17300; */
    padding-left: 13px;
    width: 100%;
    height: auto !important;
    border-radius: 0;
    justify-content: flex-start;
    margin-top: 0;
}

.verticalTab .verticalBox .tab.border-red h2 {
    /* background-color: #DF0000; */
    display: flex;
    width: fit-content;
    color: #DF0000;
    border-radius: 5px;
    margin: 3px auto;
    height: auto;
    padding: 6px 8px;
    margin-top: 10px;
    /* height: 167px !important; */
    justify-content: space-between;
}

.verticalTab .verticalBox .tab.border-red.active h2 {
    /* background-color: #DF0000; */
    padding-left: 13px;
    width: 100%;
    height: auto !important;
    border-radius: 0;
    justify-content: flex-start;
    margin-top: 0px;
}

.verticalTab .verticalBox .tab.border-yellow h2 {
    /* background-color: #E4B125; */
    display: flex;
    width: fit-content;
    color: #E4B125;
    border-radius: 5px;
    margin: 3px auto;
    height: auto;
    padding: 6px 8px;
    margin-top: 10px;
    /* height: 167px !important; */
    justify-content: space-between;
}

.verticalTab .verticalBox .tab.border-yellow.active h2 {
    /* background-color: #E4B125; */
    color: #E4B125;
    ;
    padding-left: 13px;
    width: 100%;
    height: auto !important;
    border-radius: 0;
    justify-content: flex-start;
    margin-top: 0px;
}

.verticalTab .verticalBox .tab h2 span {
    display: inline-block;
    background-color: #ffffff;
    color: #000;
    min-width: 25px;
    min-height: 25px;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
    line-height: 25px;
    margin-top: 10px;
    border: solid 1px #7D7D7D;
}

.verticalTab .verticalBox .tab.active h2 span {
    margin-top: 0;
    margin-left: 5px;
    display: inline-block;
    background-color: #ffffff;
    color: #000;
    min-width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 14px;
    text-align: center;
    line-height: 21px;
    padding: 2px
}

.verticalTab .verticalBox .tab.border-blue.active h2 span {
    /* background-color: #0d97e3; */
    color: #656565;
    font-size: 12px;
    font-weight: 600;
    border: solid 1px #7D7D7D;
}

.verticalTab .verticalBox .tab.border-orange.active h2 span {
    /* background-color: #F17300; */
    color: #656565;
    font-size: 12px;
    font-weight: 600;
    border: solid 1px #7D7D7D;
}

.verticalTab .verticalBox .tab.border-red.active h2 span {
    /* background-color: #DF0000; */
    color: #656565;
    font-size: 12px;
    font-weight: 600;
    border: solid 1px #7D7D7D;
}

.verticalTab .verticalBox .tab.border-yellow.active h2 span {
    /* background-color: #E4B125; */
    color: #656565;
    font-size: 12px;
    font-weight: 600;
    border: solid 1px #7D7D7D;
}

.verticalTab .verticalBox .tab.border-green.active h2 span {
    /* background-color: #E4B125; */
    color: #656565;
    font-size: 12px;
    font-weight: 600;
    border: solid 1px #7D7D7D;
}

.verticalTab .verticalBox .tab.active .innerBox {
    padding-top: 10px;
    margin-top: 40px;
}

.coverItem {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px var(--login-shadow);
    margin-bottom: 10px;
    padding-top: 10px;
    justify-content: flex-start;
}

    .coverItem .title {
        /* position: absolute;  */
        top: 0;
        left: 0;
        /* border-top-left-radius: 5px; */
        background-color: var(--primary-color);
        padding: 3px 10px 3px 0;
        font-size: 13px;
        color: #fff;
        min-width: 75px;
        text-align: center;
        /* border: solid 1px #000; */
        border-radius: 0;
    }

        .coverItem .title i {
            display: block;
            font-size: 25px;
        }

.verticalTab .verticalBox .tab.active .coverItem .title {
    background-color: transparent;
    color: #0d97e3;
}

.coverItem .conItem {
    width: 60%;
}

    .coverItem .conItem h3 {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 3px;
        word-break: break-all;
    }

    .coverItem .conItem .listing-details {
        display: flex;
        font-size: 12px;
        color: #868686;
        align-items: center;
    }

.coverItem .statusItem {
    width: 20%;
    text-align: left;
}

.coverItem .optionItem {
    width: 20%;
    text-align: center;
    vertical-align: middle;
}

    .coverItem .optionItem a {
        vertical-align: middle;
        margin: 2px 5px;
    }

        .coverItem .optionItem a.edit {
            font-size: 18px;
            color: #F17300;
        }

.verticalTab .verticalBox .tab.active {
    min-height: 500px;
}

    .verticalTab .verticalBox .tab.active .innerContent {
        padding-bottom: 15px;
        min-height: 450px;
        overflow: auto;
    }

[data-bs-theme="dark"] .verticalTab .verticalBox .tab.border-blue.active h2 {
    color: #fff;
}

[data-bs-theme="dark"] .coverItem {
    background-color: #1c1c1c;
    box-shadow: none;
}

    [data-bs-theme="dark"] .coverItem .conItem h3 {
        color: #fff;
    }

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

    .uploadedFile-portfolio .remove {
        color: #f00;
        margin: 2px;
        position: relative;
        padding-right: 8px;
    }

        .uploadedFile-portfolio .remove:after {
            position: absolute;
            content: "|";
            right: 0px;
            color: var(--black);
            top: -1px;
        }

[data-bs-theme="dark"] .uploadedFile-portfolio .remove:after {
    color: var(--bs-white);
}

.uploadedFile-portfolio .edit {
    color: #FFAB00;
    margin: 2px;
}

/*.override-uploadedFile .override {
    color: #000;
    margin: 2px;
    font-size: 17px;
}*/

.uploadedFile-portfolio .description-link-portfolio {
    display: inline-block;
    margin-left: 4px;
    font-size: 14px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploadedFile-portfolio .restricted {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 8px;
    background-color: #d6f5f4;
}

.uploadedFile-portfolio .doc-img-link {
    width: 24px;
    height: auto;
    margin-left: 7px;
    background-color: var(--white-bg);
    box-shadow: 0px 0px 10px #c4c2c2;
    border-radius: 5px;
    padding: 3px;
    margin-right: 4px;
    text-align: center;
}

    .uploadedFile-portfolio .doc-img-link img {
        max-width: 18px;
        max-height: 18px;
        min-width: 18px;
        vertical-align: sub;
    }

[data-bs-theme="dark"] .uploadedFile-portfolio .doc-img-link {
    background: #fff;
}


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

    .uploadedFile-list .remove {
        color: #f00;
        margin: 2px;
        position: relative;
        padding-right: 8px;
    }

        .uploadedFile-list .remove:after {
            position: absolute;
            content: "|";
            right: 0px;
            color: var(--black);
            top: -1px;
        }

[data-bs-theme="dark"] .uploadedFile-list .remove:after {
    color: var(--bs-white);
}

.uploadedFile-list .edit {
    color: #FFAB00;
    margin: 2px;
}

/*.override-uploadedFile .override {
    color: #000;
    margin: 2px;
    font-size: 17px;
}*/

.uploadedFile-list .file-portfolio-description {
    display: inline-block;
    margin-left: 4px;
    font-size: 14px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploadedFile-list .restricted {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 8px;
    background-color: #d6f5f4;
}

.uploadedFile-list .img-file-portfolio {
    width: 24px;
    height: auto;
    margin-left: 7px;
    background-color: var(--white-bg);
    box-shadow: 0px 0px 10px #c4c2c2;
    border-radius: 5px;
    padding: 3px;
    margin-right: 4px;
    text-align: center;
}

    .uploadedFile-list .img-file-portfolio img {
        max-width: 18px;
        max-height: 18px;
        min-width: 18px;
        vertical-align: sub;
    }

[data-bs-theme="dark"] .uploadedFile-list .img-file-portfolio {
    background: #fff;
}

.modal-content {
    background-color: #fff;
}

[data-bs-theme="dark"] .search-bar input {
    background: #161616;
}

[data-bs-theme="dark"] .search-bar i {
    color: #fff;
    font-size: 16px;
}

[data-bs-theme="dark"] .search-bar.active, [data-bs-theme="dark"] .search-bar:focus, [data-bs-theme="dark"] .search-bar:active {
    border: 1px solid var(--primary-color) !important;
}

[data-bs-theme="dark"] .search-bar {
    background: #161616;
    border: solid 1px var(--border-color);
}

[data-bs-theme="dark"] .list-group {
    padding: 10px;
    background: #272626;
    box-shadow: none;
}

    [data-bs-theme="dark"] .list-group li {
        color: #fff;
        list-style: none;
        background: #272626;
    }

        [data-bs-theme="dark"] .list-group li:hover {
            color: #fff;
            list-style: none;
            background: #272626;
        }

[data-bs-theme="dark"] .tab-content {
    background: transparent;
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    /* height: 500px; */
    margin: 10px 0;
    max-height: 97vh;
}

    .modal-fullscreen .modal-header {
        padding: 10px
    }

    .modal-fullscreen .modal-body {
        display: flex;
        overflow-x: hidden;
        flex-flow: wrap;
    }

    .modal-fullscreen .modal-body {
        scrollbar-width: thin;
    }

.searchSection {
    height: 350px;
    min-width: 24%;
    max-width: 24%;
    margin-bottom: 20px;
    display: flex;
    margin-right: 12px;
    flex-flow: column;
    /* border: solid 1px #ddd; */
    border: solid 2px #DCF3EB;
    border-radius: 6px;
}

.customeDiv {
    height: 350px;
    min-width: 190px;
    margin-bottom: 20px;
    display: flex;
    margin-right: 5px;
    flex-flow: column;
    margin: 10px;
    box-shadow: 0px 0px 10px #ddd;
    border-radius: 10px;
    margin-left: -12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-top: -0px;
    max-width: 24%;
}

.cutomeHead {
    font-weight: 500;
    color: var(--primary-color);
    padding: 10px;
    font-size: 15px;
}

.arrow--4 {
    position: relative;
}

    .arrow--4:after, .arrow--4:before {
        border: solid transparent;
        content: " ";
        display: block;
        height: 0;
        position: absolute;
        pointer-events: none;
        width: 0;
        right: 100%;
    }

    .arrow--4:after {
        border-color: rgba(255, 255, 255, 0);
        border-right-color: #fff;
        top: 80%;
        margin-top: -8px;
        border-width: 8px;
    }

    .arrow--4:before {
        border-color: rgba(255, 255, 255, 0);
        border-right-color: var(--primary-color);
        top: 80%;
        margin-top: -12px;
        border-width: 12px;
    }


.searchSection .searchHead {
    font-weight: 600;
    padding: 5px 10px;
    flex-flow: column;
    /* border-top: double 4px #ddd; */
    border-bottom: solid 1px #ddd;
    font-size: 15px;
    position: relative;
    padding-left: 24px;
    cursor: default;
}

.searchSection .searchBody {
    padding: 10px;
    height: 100%;
    overflow: auto;
    scrollbar-width: thin;
    flex-flow: column;
    padding-left: 10px;
    padding-top: 20px;
    font-weight: 100;
}

.form-control-sm {
    height: 31px !important;
}

.form-check-label {
    padding-top: 1.7px
}

.docUl {
    margin: 0;
    padding: 0;
    margin-top: 10px;
    padding: 5px 2px;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-left: 15px;
}

    .docUl li {
        margin-bottom: 5px;
        font-weight: 400;
        display: flex;
        justify-content: space-between;
        /* border-bottom: solid 1px #ddd; */
        list-style-type: circle;
        list-style-position: outside;
        display: list-item;
    }

        .docUl li:last-child {
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: 0;
        }

        .docUl li div {
            line-height: 18px;
        }

            .docUl li div.details-content {
                word-wrap: break-word;
            }

            .docUl li div:first-child {
                width: 80%;
            }

.form-select-sm:focus, .form-select-sm:active {
    outline: none;
    box-shadow: none;
    border: solid 1px var(--primary-color)
}

.form-select-sm, .form-select {
    background-color: #fff;
}

[data-bs-theme="dark"] .form-select-sm {
    background-color: transparent;
}

[data-bs-theme="dark"] .searchSection {
    color: #fff;
}

    [data-bs-theme="dark"] .searchSection .form-check-input {
        background-color: #fff;
    }

[data-bs-theme="dark"] .form-select-sm {
    color: #fff;
}

[data-bs-theme="dark"] .searchSection .searchHead {
    border-top: double 4px #181818;
    border-bottom: double 4px #181818;
}

[data-bs-theme="dark"] .searchSection:nth-child(even) {
    background-color: rgba(236, 236, 236, 0.7);
}

[data-bs-theme="dark"] .searchSection:nth-child(5n-1) .searchHead {
    background-color: #181818;
}

[data-bs-theme="dark"] .searchSection:nth-child(5n-2) .searchHead {
    background-color: #181818;
}

[data-bs-theme="dark"] .searchSection:nth-child(5n-3) .searchHead {
    background-color: #181818;
}

[data-bs-theme="dark"] .searchSection:nth-child(5n-4) .searchHead {
    background-color: #181818;
}

[data-bs-theme="dark"] .searchSection:nth-child(5n-5) .searchHead {
    background-color: #181818;
}


[data-bs-theme="dark"] .searchSection:nth-child(5n-1) .searchBody {
    background-color: #181818;
}

[data-bs-theme="dark"] .searchSection:nth-child(5n-2) .searchBody {
    background-color: #181818;
}

[data-bs-theme="dark"] .searchSection:nth-child(5n-3) .searchBody {
    background-color: #181818;
}

[data-bs-theme="dark"] .searchSection:nth-child(5n-4) .searchBody {
    background-color: #181818;
}

[data-bs-theme="dark"] .searchSection:nth-child(5n-5) .searchBody {
    background-color: #181818;
}


[data-bs-theme="dark"] .filter-cover ul {
    background-color: #000;
}

    [data-bs-theme="dark"] .filter-cover ul li a {
        color: #fff;
    }

    [data-bs-theme="dark"] .filter-cover ul li:hover a {
        color: #000;
    }

.searchBody ul {
    width: 100%;
}

    .searchBody ul li span {
        font-weight: 200;
        margin-bottom: 0;
    }

    .searchBody ul li small {
        display: block;
        color: #333;
        margin-bottom: 0;
        font-style: italic;
        font-size: 13px;
    }

    .searchBody ul li {
        line-height: 15px;
        padding-bottom: 3px;
        font-weight: 100;
        font-size: 14px;
    }

        .searchBody ul li strong {
            font-weight: 300;
        }

.coverCustom {
    border: dashed 2px var(--primary-color);
    padding: 20px;
    border-radius: 10px;
    position: relative;
}

    .coverCustom strong {
        font-weight: 700;
    }

.innerCoverCustom {
    border: dashed 2px #afafaf50;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    margin-right: 20px;
    margin-left: auto;
}

.coverCustom .main-delete {
    position: absolute;
    right: -5px;
    top: -10px;
    color: red;
    font-size: 20px;
    background: #fff;
    border-radius: 20px;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 27px;
}

.innerCoverCustom .main-delete {
    position: absolute;
    right: -11px;
    top: 46%;
    color: red;
    font-size: 20px;
    background: #fff;
    border-radius: 20px;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 27px;
}

.innerCoverCustom .note {
    position: absolute;
    top: 0;
    background: orange;
    color: #000;
    padding: 2px 8px;
    border-radius: 2px;
    /* rotate: 90deg; */
    right: 0;
    /* bottom: 0; */
}

    .innerCoverCustom .note .form-select, .innerCoverCustom .note .form-select-sm {
        background-color: transparent;
    }

        .innerCoverCustom .note .form-select:focus, .innerCoverCustom .note .form-select-sm:focus {
            border: none;
            outline: none;
            box-shadow: none;
        }

.paginationBox ul li a.disabled {
    border-color: #c3c3c3;
    color: #7a7171;
    opacity: .8;
    cursor: default;
}

    .paginationBox ul li a.disabled:hover {
        background-color: transparent;
        border-color: #c3c3c3;
        color: #7a7171;
        opacity: .8;
    }

[data-bs-theme="dark"] .paginationBox ul li a {
    background-color: #272727;
    color: #fff;
}

    [data-bs-theme="dark"] .paginationBox ul li a.active {
        background-color: #272727;
        color: var(--primary-color)
    }

    [data-bs-theme="dark"] .paginationBox ul li a:hover {
        background-color: #272727;
        color: var(--primary-color)
    }

    [data-bs-theme="dark"] .paginationBox ul li a.disabled {
        color: #7a7171;
    }

        [data-bs-theme="dark"] .paginationBox ul li a.disabled:hover {
            background-color: transparent;
            border-color: #c3c3c3;
            color: #7a7171;
            opacity: .8;
            background-color: #272727;
        }

.tag-box.more .dropdown-menu.show {
    z-index: 6000 !important;
}

.dropdown-menu.show {
    min-width: 11rem;
}

.input-box {
    position: absolute;
    height: 26px;
    max-width: 30px;
    width: 100%;
    margin: 2px 0px;
    border-radius: 6px;
    background-color: #fff;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-block;
    right: 5px;
    top: 1px;
    cursor: pointer;
}

    .input-box.open {
        max-width: 100%;
        left: 0;
    }

    .input-box input {
        position: relative;
        outline: none;
        border: none;
        height: 100%;
        width: 100%;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 400;
        color: #333;
        background-color: #fff;
    }

    .input-box.open {
        padding: 0 15px 0 35px;
        width: 100%;
    }

.icon {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 30px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.search-icon,
.close-icon {
    position: absolute;
    top: 50%;
    font-size: 15px;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.search-icon {
    color: #000;
    transform: translateY(-50%) rotate(90deg);
}

.input-box.open .search-icon {
    transform: translateY(-50%) rotate(0);
}

.close-icon {
    right: -28px;
    color: #000;
    border-radius: 6px;
    background: #fff;
    padding: 4px 5px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
}

.input-box.open .close-icon {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) rotate(180deg);
    right: 0;
}

.login-form-cover > .was-validated .form-control:valid, .login-form-cover > .form-control.is-valid {
    background-position: right calc(1.375em + 0.1875rem) center !important;
    background-image: none
}

[data-bs-theme="dark"] .login-form-cover .form-control {
    border-color: #6c757d
}

.modal-header {
    font-size: 18px;
    padding: 10px;
}

.vdpHeadCell {
    padding: .3em .2em 1em;
}

.vdpCell {
    padding: .3em 0;
}

.vdpCellContent {
    font-size: 1.3em;
    display: block;
    margin: 0 auto;
    width: 1.500em;
    height: 1.500em;
    line-height: 1.500em;
    text-align: center;
    border-radius: 100%;
    transition: background .1s, color .1s;
}

.vdpPeriodControl > button {
    font-size: 1.3em;
    padding: .5em .4em;
    display: inline-block;
}

[data-bs-theme="dark"] select option {
    margin: 40px;
    background: rgba(0, 0, 0, 1);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .customeDiv {
    box-shadow: none;
}

[data-bs-theme="dark"] .docUl li {
    color: #fff;
}

[data-bs-theme="dark"] .searchBody ul li small {
    display: block;
    color: #9b9b9b;
    margin-bottom: 0;
}

[data-bs-theme="dark"] .searchSection .searchHead {
    border-top: double 4px #434343;
    border-bottom: double 4px #434343;
}

[data-bs-theme="dark"] .arrow--4:before {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #453e3e;
}

[data-bs-theme="dark"] .arrow--4:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #1c1c1c;
}

.modal-small {
    display: flex;
    font-size: 13px;
    font-weight: 400;
    align-items: center;
}

    .modal-small i {
        vertical-align: middle;
        margin-right: 2px;
        margin-bottom: 0;
    }

    .modal-small span.active {
        color: var(--primary-color);
    }

.weblinks ul {
    padding: 0px
}

    .weblinks ul li {
        padding-left: 20px;
        position: relative;
        margin-bottom: 6px;
    }

        .weblinks ul li a {
            color: #1f00d9;
            text-decoration: underline;
        }

        .weblinks ul li:before {
            position: absolute;
            left: 0;
            width: 10px;
            height: 10px;
            background-color: var(--primary-color);
            content: "";
            top: 6px;
        }

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

    .workflow-uploadedFile .remove {
        color: #f00;
        margin: 2px;
        position: relative;
        padding-right: 8px;
    }

        .workflow-uploadedFile .remove:after {
            position: absolute;
            content: "|";
            right: 0px;
            color: var(--black);
            top: -1px;
        }

[data-bs-theme="dark"] .workflow-uploadedFile .remove:after {
    color: var(--bs-white);
}

.workflow-uploadedFile .edit {
    color: #FFAB00;
    margin: 2px;
}

/*.override-uploadedFile .override {
    color: #000;
    margin: 2px;
    font-size: 17px;
}*/

.workflow-uploadedFile .workflow-description {
    display: inline-block;
    margin-left: 4px;
    font-size: 14px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workflow-uploadedFile .restricted {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 8px;
    background-color: #d6f5f4;
}

.workflow-uploadedFile .work-img {
    width: 24px;
    height: auto;
    margin-left: 7px;
    background-color: var(--white-bg);
    box-shadow: 0px 0px 10px #c4c2c2;
    border-radius: 5px;
    padding: 3px;
    margin-right: 4px;
    text-align: center;
}

    .workflow-uploadedFile .work-img img {
        max-width: 18px;
        max-height: 18px;
        min-width: 18px;
        vertical-align: sub;
    }

[data-bs-theme="dark"] .workflow-uploadedFile .work-img {
    background: #fff;
}

.advanceList {
    /* background: aliceblue; */
    padding: 6px;
    border-radius: 10px;
    margin-bottom: 5px;
    font-weight: 600;
    border: solid 1px #ddd;
    font-weight: 100;
    color: #000;
}

[data-bs-theme="dark"] .advanceList {
    background-color: #000;
}

.addModals {
    background-color: green;
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

a.edit {
    color: orange;
    font-size: 15px;
}

.companyLogo {
    display: inline-block;
    margin: 0 5px;
}

    .companyLogo img {
        height: 30px;
    }

[data-bs-theme="dark"] .grouping {
    background-color: #201f1f;
}

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



[data-bs-theme="dark"] .checkallDiv .remove:after {
    color: var(--bs-white);
}


.checkallDiv .checkall-label {
    display: inline-block;
    margin-left: 4px;
    font-size: 14px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.firstSection {
    width: 100%;
}

    .firstSection.disabled {
        width: 80%;
    }

.progressdiv {
    width: 20%;
}

.progress {
    min-width: 180px;
}

.firstSection.disabled {
    color: #a9a9a9 !important;
}

    .firstSection.disabled a.remove, .firstSection.disabled a.edit {
        color: #a9a9a9 !important;
    }

    .firstSection.disabled .doc-img {
        filter: grayscale(100%)
    }

.customGrid {
}

.customGridHead, .customGridBody {
    display: grid;
    grid-template-columns: auto 150px 130px 20px;
    gap: 5px;
    margin-bottom: 10px;
}

.customGridBody {
    border-bottom: solid 1px #ddd;
    padding-bottom: 10px;
}

    .customGridBody:last-child:nth-last-child(odd) {
        grid-column: auto / span 4;
        text-align: right;
    }

.font-size-17 {
    font-size: 17px;
}

[data-bs-theme="dark"] .footer-float, [data-bs-theme="dark"] .paginationBox {
    background: #161616;
    box-shadow: none;
    border-color: #000;
    color: #fff;
}

.linkedfileslist .uploadedFile-list {
    margin-bottom: 0px
}

.todoPagination {
    position: sticky;
    width: 100%;
    margin-bottom: 15px;
    bottom: 15px;
}

.sidenav fieldset legend {
    background-color: transparent;
}

.created-by {
    width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

.modal-fullscreen .modal-content {
    width: 99%;
    margin: 5px auto;
    border-radius: 10px;
}

    .modal-fullscreen .modal-content .form-check-label {
        padding-top: 1.7px;
        /* color: #000; */
        font-weight: 100;
    }

    .modal-fullscreen .modal-content .form-check-label, .modal-fullscreen .modal-content .form-check-input {
        cursor: pointer;
    }

    .modal-fullscreen .modal-content .form-check .form-check-input {
        border: solid 1px #aba6a6;
        width: 13px;
        height: 13px;
        /* background: transparent; */
        margin-top: 0.40em;
    }

.modal-header .btn-close {
    font-size: 13px;
    margin-right: 2px;
}

.modal-fullscreen .form-control-sm {
    height: 23px !important;
    padding: 2px;
    border: solid 1px #d3d3d3;
    min-height: 23px;
    font-weight: 100;
}

.modal-fullscreen .col-form-label {
    font-weight: 100;
    padding: 0 0 0 13px;
}

.modal-fullscreen .form-select-sm {
    height: 23px;
    padding: 2px;
    line-height: 17px;
    font-size: 14px;
    font-weight: 100;
}

.vue-select-height .v-select ul {
    max-height: 110px;
    overflow: auto;
}

.grouping {
    background-color: #fff;
    padding: 5px !important;
    border-radius: 20px;
}

.tabing {
    margin-bottom: 10px;
    font-size: 14px;
    padding: 10px;
    box-shadow: 0 0 10px #9a999936;
    border-radius: 5px;
    margin: 5px 5px 10px 5px;
    position: relative;
}

    .tabing label {
        font-size: 12px;
        color: var(--color-light-gray);
        margin-bottom: 0px;
        line-height: 19px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Number of lines to show */
        -webkit-box-orient: vertical;
        word-wrap: break-word;
    }

    .tabing .form-control-plaintext {
        height: 34px;
    }

    .tabing .form-value {
        /* padding: 9px 2px 5px; */
        line-height: 16px;
        font-size: 14px;
        margin-bottom: 2px;
        word-wrap: break-word;
    }

        .tabing .form-value .form-control {
            padding: 9px 5px;
            font-size: 13px;
            height: 30px;
        }

.fileViewminHeight {
    height: 450px;
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-x: hidden;
    position: relative;
}

.portViewminHeight {
    height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-x: hidden;
    position: relative;
}

.fileViewminHeightRight {
    height: 250px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.fileviewHeader .tag-box.more {
    width: auto;
    cursor: pointer;
}

.fileviewHeader .tag-box {
    max-width: 250px;
}

    .fileviewHeader .tag-box i {
        vertical-align: middle;
    }

.linkedProtfoliofile {
    padding: 0;
    margin: 0;
}

    .linkedProtfoliofile li {
        padding-left: 25px;
        position: relative;
        margin-bottom: 5px;
    }

        .linkedProtfoliofile li a {
            color: #0026EE;
            text-decoration: underline;
            word-wrap: break-word;
            word-break: break-all;
        }

            .linkedProtfoliofile li a.trash {
                font-size: 15px;
                color: red;
            }

        .linkedProtfoliofile li:before {
            position: absolute;
            content: "\F2CC";
            left: 0;
            color: #0D97E3;
            font-family: bootstrap-icons !important;
            font-size: 17px;
            top: -4px;
        }

.sectionCover .linkedProtfoliofile li a {
    color: #000;
    text-decoration: none;
}

.linkedfolderfile {
    padding: 0;
    margin: 0;
}

    .linkedfolderfile li {
        padding-left: 25px;
        position: relative;
        margin-bottom: 5px;
    }

        .linkedfolderfile li a {
            color: #000;
            text-decoration: none;
            word-wrap: break-word;
            word-break: break-all;
        }

            .linkedfolderfile li a.trash {
                font-size: 15px;
                color: red;
            }

        .linkedfolderfile li:before {
            position: absolute;
            content: "\F3D9";
            left: 0;
            color: #ec9806;
            font-family: bootstrap-icons !important;
            font-size: 18px;
            top: -4px;
        }

.linkedFiles {
    padding: 0;
    margin: 0;
}

    .linkedFiles li {
        padding-left: 0px;
        position: relative;
        margin-bottom: 5px;
    }

        .linkedFiles li a {
            color: #000;
            text-decoration: none;
            word-wrap: break-word;
            word-break: break-all;
            display: grid;
            grid-template-columns: 25px auto;
        }

            .linkedFiles li a img {
                width: 20px;
            }


.userProtfoliofile {
    padding: 0;
    margin: 0;
}

    .userProtfoliofile li {
        padding-left: 0px;
        position: relative;
        margin-bottom: 5px;
    }

        .userProtfoliofile li a {
            color: #000;
            text-decoration: none;
            word-wrap: break-word;
            word-break: break-all;
            display: grid;
            grid-template-columns: 25px auto;
            align-items: flex-start;
        }

            .userProtfoliofile li a img {
                width: 14px;
            }

.morebtn {
    color: var(--primary-color);
    text-decoration: none;
    position: relative;
}

    .morebtn i {
        vertical-align: middle;
    }

.blank-details img {
    width: 60%;
    margin: 5px auto;
}

.blank-details p {
    color: var(--color-light-gray);
    font-size: 14px;
}

.blank-details a {
    color: var(--primary-color);
}

.fileviewHeader h5, .fileviewHeader_innerBox h6 {
    font-size: 17px;
    display: inline-block;
}

.fileviewHeader h6, .fileviewHeader_innerBox h6 {
    font-size: 15px;
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 0;
}

    .fileviewHeader h6.attGroupname .ts-wrapper.form-select, .fileviewHeader_innerBox h6.attGroupname .ts-wrapper.form-select {
        width: 92%;
        display: inline-block;
    }

.tabing .alertBtn {
    position: absolute;
    right: 7px;
    top: 7px;
    color: #f9cf0c;
    width: 32px;
    height: 32px;
    border-radius: 20px;
    -webkit-animation: positionchange 2s infinite alternate;
    rotate: 0;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

@-webkit-keyframes positionchange {
    0% {
        rotate: 0deg;
    }

    25% {
        rotate: 20deg;
    }

    50% {
        rotate: 20deg;
    }

    75% {
        rotate: -20deg;
    }
}

.tabing .alertBtn:before {
    position: absolute;
    padding: 4px;
}

.list-group li small {
    display: block;
    font-size: 12px;
    color: gray;
    position: relative;
    padding-left: 0;
    line-height: 14px;
    margin-top: 2px;
}

.portfolio-name {
    display: inline-block;
    width: 94%;
    vertical-align: top;
}
/* #myUL li {
  margin-bottom: 5px;
  padding: 5px;
}
#myUL li:hover {
  box-shadow: 0px 0px 2px #c4c2c2;
border-radius: 5px;
}
#myUL li:hover .folder-show-hide a.trash {
  box-shadow: 0px 0px 10px #ffb5b5;
  border-radius: 20px;
  
} */
.uploadedFile .doc-img {
    margin-right: 10px;
}
/* [data-bs-theme="dark"] #myUL li:hover .folder-show-hide a.trash {
  box-shadow: 0px 0px 10px rgba(255,255,255,.2);
  border-radius: 20px;
  
} */
.permissionCurrent {
    margin: 10px auto;
    /* width: 300px; */
    text-align: center;
}

    .permissionCurrent .permission-btn {
        color: var(--primary-color);
        display: inline-block;
        font-weight: 500;
    }

        .permissionCurrent .permission-btn a {
            margin: 5px;
            display: inline-block;
            vertical-align: bottom;
        }

            .permissionCurrent .permission-btn a img {
                width: 16px;
                height: auto;
                vertical-align: inherit;
            }

[data-bs-theme="dark"] .permissionCurrent .permission-btn a img {
    filter: invert(1);
}

.permissionBoxes {
    width: 97%;
    box-shadow: 5.4px 6.8px 7.9px -10px rgba(0, 0, 0, 0.035), 9.2px 11.6px 26.6px -10px rgba(0, 0, 0, 0.056), 16px 10px 13px -10px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    display: table;
    min-height: 250px;
    margin: 15px auto;
    transition: box-shadow .5s;
}

    .permissionBoxes:hover {
        box-shadow: 5.4px 6.8px 7.9px 5px rgba(0, 0, 0, 0.035), 9.2px 11.6px 26.6px 5px rgba(0, 0, 0, 0.056), 16px 20px 119px 5px rgba(0, 0, 0, 0.08);
    }

[data-bs-theme="dark"] .permissionBoxes {
    border: solid 1px #323232;
}

.permissionBoxes:nth-child(even) {
    /* direction: ltr; */
    margin: 20px;
    direction: rtl;
}

.emptyPermissionBox {
    direction: ltr !important;
    padding: 0 20px;
}

.permissionBoxes .imgBox {
    padding: 10px;
    border-right: solid 1px #ddd;
    background: rgb(242,242,242);
    background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 100%);
    height: 100%;
    width: 25%;
    text-align: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    display: table-cell;
    text-align: center;
}

.permissionBoxes:nth-child(even) .imgBox {
    border-right: 0;
    text-align: center;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: solid 1px #ddd;
    background: rgb(242,242,242);
    height: 100%;
    display: table-cell;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
}

[data-bs-theme="dark"] .permissionBoxes:nth-child(even) .imgBox {
    border-left: solid 1px #323232;
}

[data-bs-theme="dark"] .permissionBoxes .imgBox {
    background: none;
    border-right: solid 1px #323232;
}

.permissionBoxes .imgBox img {
    margin: 20px auto;
}

.permissionBoxes .permissionCon {
    padding: 20px;
    height: 100%;
    width: 75%;
    display: table-cell;
    vertical-align: top;
    position: relative;
    padding-bottom: 60px;
}

.permissionBoxes:nth-child(even) .permissionCon {
    direction: ltr;
    height: 100%;
    display: table-cell;
}

.permissionBoxes .permissionCon h4 {
    font-size: 19px;
}

.permissionBoxes .permissionCon .permissionItem {
    margin: 0;
    padding: 0;
}

    .permissionBoxes .permissionCon .permissionItem .userIcon {
        width: 18px;
        height: auto;
        vertical-align: sub;
        display: inline-block;
        margin-right: 3px;
    }

    .permissionBoxes .permissionCon .permissionItem .totalUsers {
        display: inline-block;
        margin-left: 3px;
        font-size: 13px;
        color: #515151;
        /* border: solid 1px #ddd; */
        border-radius: 5px;
        padding: 1px 5px;
        cursor: pointer;
        border: solid 1px transparent;
    }

[data-bs-theme="dark"] .permissionBoxes .permissionCon .permissionItem .totalUsers {
    color: #7f7f7f;
}

.inheritIcon {
    height: 13px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}

.permissionBoxes .permissionCon .permissionItem li {
    list-style-position: inside;
    list-style-type: square;
    display: flex;
    flex-flow: row;
    position: relative;
    padding: 15px;
    margin-bottom: 8px;
    word-break: break-word;
    padding-left: 25px;
    padding-bottom: 5px;
    padding-top: 5px
}

.permissionItem li div.permissionLeft {
    width: 80%;
    line-height: 17px;
}

.permissionItem li div.permissionOption {
    text-align: right;
    width: 20%;
}

.permissionBoxes .permissionCon .permissionItem li:hover {
    padding: 15px;
    padding-left: 25px;
    border-radius: 10px;
    padding-bottom: 5px;
    padding-top: 5px
}

    .permissionBoxes .permissionCon .permissionItem li:hover .totalUsers {
        border: solid 1px var(--primary-color);
    }

        .permissionBoxes .permissionCon .permissionItem li:hover .totalUsers:hover {
            background-color: #e3ffe7;
        }

.permissionBoxes .permissionCon .permissionItem li:before {
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    width: 10px;
    height: 10px;
    top: 10px;
    left: 10px;
}

.permissionBoxes .permissionCon .permissionItem li small {
    color: #999;
}

.permissionBoxes .permissionCon .footerPermission {
    border-top: solid 1px #ddd;
    margin: 0 -20px;
    padding: 10px;
    height: 55px;
    line-height: 35px;
    text-align: right;
    padding-right: 20px;
    margin-bottom: -20px;
    border-bottom-right-radius: 8px;
    position: absolute;
    bottom: 20px;
    width: 100%;
}

[data-bs-theme="dark"] .permissionBoxes .permissionCon .footerPermission {
    border-top: solid 1px #323232;
}

[data-bs-theme="dark"] .permissionBoxes .permissionCon .footerPermission {
    border-top: solid 1px #323232;
}

.permissionBoxes .permissionCon .footerPermission a {
    color: var(--primary-color);
    transition: transform 1s, border-radius .3s, background-color .5s;
    border-radius: 0;
    padding: 5px 15px;
}

    .permissionBoxes .permissionCon .footerPermission a i {
        font-size: 20px;
        vertical-align: middle;
    }

.permissionBoxes:nth-child(even) .permissionCon .footerPermission {
    text-align: left;
    padding-right: 10px;
    padding-left: 20px;
}
/* .permissionBoxes:hover .footerPermission {
   background-color: #3dba5d1a;

} */
.footerPermission a {
    border: solid 1px var(--primary-color);
    padding: 5px 15px;
    border-radius: 5px !important;
}

    .footerPermission a:hover {
        border: solid 1px var(--primary-color);
        padding: 5px 15px;
        border-radius: 5px !important;
        background-color: #e3f9e9;
    }

.permissionBoxes .permission-box {
    padding: 3px 12px;
    border-radius: 5px;
    font-size: 13px;
}

.permissionBoxes .permissionCon a.trash {
    margin-left: 0px;
    vertical-align: middle;
}

.addedPermission {
}

    .addedPermission h5 {
        font-size: 17px;
        font-size: 600;
    }

    .addedPermission .permissionItem {
        display: flow;
    }

        .addedPermission .permissionItem .trash {
            vertical-align: middle;
            transition: transform 1s, width .5s;
            width: 17px;
            display: contents;
            height: 17px;
            overflow: hidden;
            font-weight: 200;
            font-size: 14px;
        }

    .addedPermission .trash i {
        margin: 0 1px;
    }

.permissionItem .permissionSpan {
    font-size: 13px;
    font-weight: 300;
    padding: 3px 10px;
    border-radius: 3px;
    margin: 2px;
    display: inline-block;
    vertical-align: middle;
}

.permissionItem li:nth-child(10n-1) .permissionSpan, .permissionItem:nth-child(10n-1) .permissionSpan {
    background-color: #FFF1E3;
    color: #FF7C00;
}

.permissionItem li:nth-child(10n-2) .permissionSpan, .permissionItem:nth-child(10n-2) .permissionSpan {
    background-color: #D8F3FF;
    color: #006C9C;
}

.permissionItem li:nth-child(10n-3) .permissionSpan, .permissionItem:nth-child(10n-3) .permissionSpan {
    background-color: #FFE6E9;
    color: #DF0000;
}

.permissionItem li:nth-child(10n-4) .permissionSpan, .permissionItem:nth-child(10n-4) .permissionSpan {
    background-color: #FFF1E3;
    color: #837b1b;
}

.permissionItem li:nth-child(10n-5) .permissionSpan, .permissionItem:nth-child(10n-5) .permissionSpan {
    background-color: #dcfff3;
    color: #46bc6d;
}

.permissionItem li:nth-child(10n-6) .permissionSpan, .permissionItem:nth-child(10n-6) .permissionSpan {
    background-color: #fbe6fe;
    color: #86009C;
}

.permissionItem li:nth-child(10n-7) .permissionSpan, .permissionItem:nth-child(10n-7) .permissionSpan {
    background-color: #fff0ec;
    color: #DF4300;
}

.permissionItem li:nth-child(10n-8) .permissionSpan, .permissionItem:nth-child(10n-8) .permissionSpan {
    background-color: #e4ffff;
    color: #37949A;
}

.permissionItem li:nth-child(10n-9) .permissionSpan, .permissionItem:nth-child(10n-9) .permissionSpan {
    background-color: #f4e4ec;
    color: #B15587;
}

.permissionItem li:nth-child(10n-10) .permissionSpan, .permissionItem:nth-child(10n-10) .permissionSpan {
    background-color: #ffefe7;
    color: #9A4816;
}

.permissionCon h4 a {
    color: #0D97E3;
}

.permissionItem {
    font-size: 14px;
    margin-bottom: 5px;
    padding: 2px 0;
    line-height: 15px;
}

    .permissionItem small {
        color: #b01d1d;
    }

.permissionBoxes .permissionCon .permissionItem li small.expiry {
    color: #b01d1d;
}

.permissionHelp {
    position: fixed;
    right: 10px;
    bottom: 70px;
    background-color: #d7ffe1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: zoom-in-zoom-out 2s ease-out infinite;
    border: solid 1px #28b24b;
    z-index: 999;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

.dateContainer {
    position: relative
}

    .dateContainer .calendarIcon {
        position: absolute;
        right: 5px;
        top: 5px
    }

    .dateContainer .clear-date {
        position: absolute;
        right: 27px;
        top: 5px;
    }

.focus .ts-control {
    outline: var(--primary-color);
    box-shadow: 0 0 0 0 #00a76f2d;
    border: solid 1px var(--primary-color)
}

.ts-control, .ts-wrapper.single.input-active .ts-control {
    background-color: transparent;
}

.ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {
    background: #fff;
}

    [data-bs-theme="dark"] .ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {
        background: #000;
    }

[data-bs-theme="dark"] .ts-dropdown, .ts-control input {
    color: #93999f;
}

.full .ts-control {
    background: transparent;
}

.editonHover {
    display: none;
}

.fileviewHeader_innerBox:hover .editonHover, .fileviewHeader:hover .editonHover {
    display: inline-block;
}

    .fileviewHeader_innerBox:hover .editonHover img, .fileviewHeader:hover .editonHover img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
    }

[data-bs-theme="dark"] .fileviewHeader_innerBox:hover .editonHover img, [data-bs-theme="dark"] .fileviewHeader:hover .editonHover img {
    filter: invert(1);
}

.upArrow {
    position: absolute;
    top: -17px;
    color: gray
}

    .upArrow.active, .downArrow.active {
        color: #000
    }

.downArrow {
    position: absolute;
    top: -5px;
    color: gray
}

.addBtn {
    border: solid 1px #8b8b8b;
    background-color: transparent;
    color: #0E0E0E;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

    .addBtn i {
        color: var(--primary-color);
        font-weight: 700;
    }

    .addBtn:hover {
        background-color: #DCF3EB;
        border: solid 1px var(--primary-color);
    }

[data-bs-theme="dark"] .addBtn {
    color: #fff;
}

    [data-bs-theme="dark"] .addBtn:hover {
        color: #000;
    }

.form-control {
    font-size: 13px;
}

.fileviewHeader .form-control {
    font-size: 13px !important;
}

.removeBtn {
    float: right;
}

.attGroupname {
    /* border: solid 1px #8b8b8b; */
    border-radius: 3px;
    padding: 5px;
    width: 100%;
    justify-content: end;
}

    .attGroupname span {
        width: 93%;
        word-break: break-all;
        display: inline-block;
    }

.input-widthReducer {
    width: 88% !important;
    display: inline-block;
}

.fileviewHeader_innerBox .form-group {
    margin-bottom: 8px;
}

.fileviewHeader_innerBox h5 {
    font-size: 17px;
    margin-left: -10px;
    margin-right: -10px;
    border-bottom: solid 1px #ddd;
    text-indent: 10px;
    margin-top: -10px;
    padding-bottom: 8px;
}

[data-bs-theme="dark"] .fileviewHeader_innerBox h5 {
    border-bottom: solid 1px #373333;
}

.deprecated {
    color: #c91f1f;
    text-align: left;
    font-size: 12px;
    display: block;
    width: 100%;
    font-weight: 200;
}

.deprecatedView {
    box-shadow: 0 0 10px #ff010136;
}

.depriHover {
    display: none;
}

.deprecatedView .depriHover {
    transform: 1s ease, opacity 0, height auto;
    opacity: 0;
}

.deprecatedView:hover .depriHover {
    display: block;
    color: #ff010182;
    text-align: center;
    margin-bottom: 10px;
    opacity: 1;
    height: auto;
    margin-top: -10px;
}

.newlyAddedview {
    box-shadow: 0 0 10px #01ff3154;
}

.addedHover {
    display: none;
}

.newlyAddedview .addedHover {
    transform: 1s ease, opacity 0, height auto;
    opacity: 0;
}

.newlyAddedview:hover .addedHover {
    display: block;
    color: #52a166;
    text-align: center;
    margin-bottom: 10px;
    opacity: 1;
    height: auto;
    margin-top: -10px;
}

.depri-btnGroup {
    border: solid 1px #ddd;
    border-radius: 20px;
    padding: 1px 22px;
    display: inline-block;
    margin: 2px;
}

.userListpop {
    margin: 0;
    padding: 0;
}

    .userListpop li {
        display: flex !important;
        justify-content: flex-start;
        align-items: flex-start;
        position: inherit !important;
        flex-flow: row !important;
        padding-left: 0px !important;
        margin-bottom: 10px !important;
    }

        .userListpop li:before {
            position: inherit !important;
            content: inherit !important;
        }

        .userListpop li span.userPhoto {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: gray;
            margin-right: 10px;
            font-weight: 400;
            color: #fff;
            box-shadow: 2px 2px 2px #ddd;
        }

        .userListpop li span.userName {
            font-weight: 500;
            width: 80%;
            text-align: left;
        }

.ui-popover-header {
    border-bottom: solid 1px #dedede !important;
    padding: 10px 14px;
}

.ui-popover-body {
    padding: 15px !important
}

.userListpop li:nth-child(10n-1) span.userPhoto {
    background-color: #A65C84;
}

.userListpop li:nth-child(10n-2) span.userPhoto {
    background-color: #4C525B;
}

.userListpop li:nth-child(10n-3) span.userPhoto {
    background-color: #2C9042;
}

.userListpop li:nth-child(10n-4) span.userPhoto {
    background-color: #97AE71;
}

.userListpop li:nth-child(10n-5) span.userPhoto {
    background-color: #A3A3A3;
}

.userListpop li:nth-child(10n-6) span.userPhoto {
    background-color: #E09729;
}

.userListpop li:nth-child(10n-7) span.userPhoto {
    background-color: #2C9042;
}

.userListpop li:nth-child(10n-8) span.userPhoto {
    background-color: #A3A3A3;
}

.userListpop li:nth-child(10n-9) span.userPhoto {
    background-color: #4C525B;
}

.userListpop li:nth-child(10n-10) span.userPhoto {
    background-color: #582c90;
}

.helpSide .ui-dialog-header {
    padding: 10px;
    border: solid 1px #ddd;
}

.helpSide .ui-dialog-body {
    padding: 10px;
}

.helpSide .helpsideBox {
    background: rgb(218,255,233);
    background: linear-gradient(315deg, rgba(218,255,233,0.08296729336265751) 0%, rgba(246,246,246,1) 100%);
    margin: 10px;
    padding: 10px;
    border: solid 1px #F2F2F2;
    border-radius: 10px;
    width: 95%;
}

    .helpSide .helpsideBox .classHead {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 5px;
    }

        .helpSide .helpsideBox .classHead h5 {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 0px;
            height: 25px;
            line-height: 25px;
        }

    .helpSide .helpsideBox .iconBox {
        width: 30px;
        margin-right: 0px;
        display: inline-block;
        height: 30px;
    }

        .helpSide .helpsideBox .iconBox img {
            width: 25px;
            /* background-color: #fff; */
            /* border-radius: 50%; */
            height: 25px;
            /* padding: 5px; */
            display: inline-block;
        }

    .helpSide .helpsideBox .contentSection h5 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .helpSide .helpsideBox .contentSection p {
        font-size: 14px;
    }

.helpSide .underConSec h3 {
    font-size: 16px;
    font-weight: 500;
}

.helpSide .underConSec ul {
    margin: 0;
    padding: 0;
}

    .helpSide .underConSec ul li {
        margin-bottom: 20px;
    }

        .helpSide .underConSec ul li .subHead {
            position: relative;
            padding-left: 30px;
            font-weight: 500;
            font-size: 16px;
            margin-bottom: 8px;
        }

            .helpSide .underConSec ul li .subHead:before {
                position: absolute;
                background: rgb(218,255,233);
                background: linear-gradient(315deg, rgba(218,255,233,0.08296729336265751) 0%, rgba(246,246,246,1) 100%);
                content: "\F135";
                width: 22px;
                height: 22px;
                color: #000;
                font-family: bootstrap-icons !important;
                left: 0;
                top: 0;
                border: solid 1px #F2F2F2;
                border-radius: 3px;
                font-size: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        .helpSide .underConSec ul li a {
            color: #000;
            margin-bottom: 8px;
            line-height: 20px;
            display: list-item;
            /* margin-left:32px */
        }

        .helpSide .underConSec ul li div.indentDiv {
            margin-left: 32px;
            color: #000;
        }

            .helpSide .underConSec ul li div.indentDiv p {
                margin-bottom: 8px;
            }

            .helpSide .underConSec ul li div.indentDiv ul li {
                margin-bottom: 8px;
            }

.flex-colum {
    flex-flow: column;
}

.color-gray {
    color: var(--color-light-gray);
}

.w-30 {
    width: 30% !important;
}

.custom-subhead {
    position: relative;
    height: 20px;
    text-align: center;
    margin: 15px 0;
}

    .custom-subhead span {
        position: absolute;
        text-align: center;
        z-index: 1;
        background-color: #fff;
        padding: 2px 5px;
        border-radius: 5px;
        left: 0;
        width: 110px;
        /* right: 50%; */
        margin: auto;
        right: 0;
        color: #959595
    }

    .custom-subhead:before {
        position: absolute;
        content: "";
        background-color: #ddd;
        height: 2px;
        left: 0;
        right: 0;
        top: calc(100% - 42%);
        z-index: 0;
    }

.light-greenBG {
    background-color: #f0f8f3d1;
}

.color-maroon {
    color: maroon !important;
}

.link-blue {
    color: #0026EE !important
}

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

.font-size-17 {
    font-size: 17px !important;
}

[data-bs-theme="theme"] .custom-subhead span {
    background-color: #161616;
}

[data-bs-theme="theme"] .custom-subhead:before {
    background-color: #dddddd40;
}

.headingTop {
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.scBtn {
    width: 25px;
    height: 33px;
    text-align: center;
    padding: 5px 3px;
    border-radius: 5px;
    border: solid 1px #ddd;
    vertical-align: top;
}

    .scBtn i {
        font-size: 18px;
    }

    .scBtn:hover {
        background-color: #ededed;
    }

.dataview {
    padding-top: calc(0.375rem + var(--bs-border-width));
    padding-bottom: calc(0.375rem + var(--bs-border-width));
    word-wrap: break-word;
    word-break: break-all;
}

.result-note-content {
    word-break: break-all;
}

.fileviewHeader_innerBox .shadowBox {
    max-height: 157px;
    overflow: auto;
    scrollbar-width: thin;
}

    .fileviewHeader_innerBox .shadowBox .tag-box.more {
        width: auto
    }

.modal-fieldset {
    border: solid 1px #ddd;
    padding: 15px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
}

    .modal-fieldset legend {
        margin: 0 auto;
        display: inline-block;
        width: max-content;
        margin-top: -27px;
        text-align: center;
        background: #fff;
        padding: 0 5px;
        top: inherit;
        left: 50%;
        translate: -50%;
    }

.note {
    color: var(--color-light-gray);
}

.modal-fieldset .form-check label {
    font-weight: 600;
}

.modal-fieldset .form-check small {
    display: block;
    color: var(--color-light-gray);
    font-weight: 200;
}

.border {
    border-color: rgba(0, 0, 0, 0.175) !important;
}

[data-bs-theme="dark"] .border {
    border-color: rgba(255, 255, 255, 0.175) !important;
}

.linkport-Modal-scroll {
    max-height: 250px;
    overflow: auto;
    scrollbar-width: thin;
}

.w-75 {
    width: 75%;
}

.separate-loader {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: url(../img/div-loader.svg);
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    background-size: 100px 100px;
}

.weblinkUl {
    margin: 10px;
    padding: 0;
    position: absolute;
}

    .weblinkUl li {
        background-image: url(../img/weblinks_icon.svg);
        padding-left: 23px;
        background-repeat: no-repeat;
        background-position: left top;
        margin-bottom: 11px;
    }

        .weblinkUl li a {
            text-decoration: underline;
            color: #0026EE;
            font-weight: 500;
            word-wrap: break-word;
            display: block;
            line-height: 14px;
            font-size: 14px;
        }

.linkedfileUl {
    margin: 10px;
    padding: 0;
    position: absolute;
}

    .linkedfileUl li {
        background-image: url(../img/linked-file-icon.svg);
        padding-left: 18px;
        background-repeat: no-repeat;
        background-position: left top;
        margin-bottom: 8px;
    }

        .linkedfileUl li a {
            text-decoration: underline;
            color: #0026EE;
            font-weight: 500;
            /* word-wrap: break-word; */
            /* display: contents; */
            line-height: 14px;
            /* margin-bottom: 4px; */
            /* width: 100%; */
            word-break: break-word;
            font-size: 14px;
        }

        .linkedfileUl li small {
            color: #333333;
            word-wrap: break-word;
            line-height: 13px;
            display: block;
        }


        .folderUl {
    margin: 10px;
    padding: 0;
    position: absolute;
}

    .folderUl li {
        /* background-image: url(../img/linked-file-icon.svg); */
        /* padding-left: 18px; */
        /* background-repeat: no-repeat;
        background-position: left top; */
        margin-bottom: 8px;
    }
.folderUl li i {
    color: #e7a828;
    vertical-align: top;
    margin-left: 5px;
}
        .folderUl li {
            text-decoration: none;
            color: #000;
            font-weight: 500;
            /* word-wrap: break-word; */
            /* display: contents; */
            line-height: 14px;
            /* margin-bottom: 4px; */
            /* width: 100%; */
            word-break: break-word;
            font-size: 14px;
        }

        .folderUl li small {
            color: #333333;
            word-wrap: break-word;
            line-height: 13px;
            display: block;
        }

[data-bs-theme="dark"] .uploading-singleItem .fileOption .edit img {
    filter: invert(1);
}

[data-bs-theme="dark"] .uploading-singleItem.selected .fileOption .edit img {
    filter: invert(0);
}

.width-65 {
    width: 65px !important;
}

.portViewminHeight a.trash {
    color: #f00;
    display: inline-block;
    width: auto;
    margin-top: 2px;
}

.form-select-sm {
    font-size: 13px;
}

.fileviewHeader .dateContainer {
    display: inline-block;
}

.ts-wrapper.form-select, .ts-wrapper.single {
    width: 100%;
    display: inline-block;
}

.permission-top-alert {
    width: 50%;
    margin: 0 auto;
    border-radius: 0;
    border-left: 4px solid #1B4888 !important;
    padding: 10px;
    background: #E5EFFD;
    border: none;
    color: var(--color-light-gray);
}

[data-bs-theme="dark"] .permission-top-alert {
    background: #3b3b3b;
    color: #acbfe4;
}

.fileuploadmainCover {
    display: flex;
    justify-content: space-between;
}

    .fileuploadmainCover .fileUploadleftBox {
        width: 60%;
        margin-top: 5px;
    }

    .fileuploadmainCover .fileUploadrightBox {
        width: 40%;
    }

        .fileuploadmainCover .fileUploadrightBox .tabing {
            box-shadow: none;
        }

        .fileuploadmainCover .fileUploadrightBox .blank-details img {
            width: 40%;
        }

        .fileuploadmainCover .fileUploadrightBox .blank-details p {
            margin-bottom: 5px;
        }

.bd-callout {
    border-left: 8px solid #dee2e6;
    background-color: #f8f9fa;
    color: #333;
    display: block;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bd-callout-green {
    border-left: 8px solid var(--primary-color);
    background-color: #EAF9F4;
    color: #333;
}

.bd-callout .dataBold {
    font-weight: 600;
    color: #000;
}

.bd-callout-green .dataBold {
    color: #0D6130;
}

.folderPathChange {
    border: solid 1px #3D8D5E;
    border-radius: 5px;
    padding: 5px 10px;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uploadgroupBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

.buttonPath {
    width: 100px;
}

.importFilebtn {
    border: 2px dashed var(--border-color);
    background-color: #00b8d924;
    padding: 7px 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 98px;
    border-radius: 5px;
    width: 29%;
    flex-flow: column;
    cursor: pointer;
    transition: 1s;
}

    .importFilebtn:hover img {
        cursor: pointer;
        transform: scale(1.2);
    }

    .importFilebtn strong {
        display: contents;
        margin-left: 4px;
        font-weight: 600;
    }

    .importFilebtn img {
        margin-bottom: 10px;
    }

.edit img {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.uploadingshadowBox {
    box-shadow: 0 0 10px #9a999936;
    padding: 15px;
    border-radius: 8px;
    max-height: 520px;
    overflow: auto;
    scrollbar-width: thin;
}

.uploading-singleItem {
    display: grid;
    align-items: baseline;
    margin-bottom: 10px;
    grid-template-columns: auto 50px;
}

    .uploading-singleItem.selected .form-control {
        border: solid 1px #2EBCD6;
        color: #0D6399;
        font-weight: 600;
    }

    .uploading-singleItem:has(.progressdiv) {
        display: grid;
        /* align-items: baseline; */
        margin-bottom: 10px;
        grid-template-columns: auto 1fr auto;
    }

.uploading-singleItem {
    border-radius: 9px;
    background-color: var(--light-gray);
    align-items: start;
    padding: 4px;
    display: grid;
    margin-bottom: 10px;
    grid-template-columns: auto 1fr auto;
}

    .uploading-singleItem.selected {
        background-color: #eff8ff;
        padding: 5px 0;
        border-radius: 9px;
    }

    .uploading-singleItem .fileDetails .form-control {
        /* width: 75%; */
        position: relative;
    }

    .uploading-singleItem .fileName {
        margin: 0 3px;
    }

        .uploading-singleItem .fileName > img {
            width: 20px;
        }

    .uploading-singleItem .fileOption {
        display: flex;
        gap: 5px;
        justify-content: space-around;
        margin: 0px 4px;
        margin-top: 6px;
        align-items: center;
    }

    .uploading-singleItem .fileDetails .fileName {
        margin-top: 3px;
        margin-left: 15px;
        word-break: break-all;
        word-wrap: break-word;
        line-height: 15px;
        font-size: 12px;
    }

        .uploading-singleItem .fileDetails .fileName img {
            width: 15px;
            vertical-align: middle;
        }

.fileUploadrightBox .tabing h6 {
    font-size: 14px;
    margin-bottom: 15px;
}

.propertiesBox {
    display: block;
    width: 96%;
    border-radius: 0px;
    box-shadow: 0 0 10px #9a999936;
    margin: 2%;
}

    .propertiesBox .propertyHead {
        box-shadow: 2px 2px 5px #ededed;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        font-weight: 600;
    }

        .propertiesBox .propertyHead .sectionHideShow {
            color: #000;
        }

            .propertiesBox .propertyHead .sectionHideShow i {
                font-size: 18px;
            }

    .propertiesBox .propertiesBody {
        padding: 10px;
        overflow: auto;
        scrollbar-width: thin;
        max-height: 100%;
        min-height: 100%;
        max-height: 720px;
    }

.propertiesBody .permission-top-alert {
    padding-right: 40px;
    line-height: 15px;
    font-size: 12px;
}

    .propertiesBody .permission-top-alert.alert-dismissible .btn-close {
        top: 20px;
    }

.propertiesBox .propertiesBody .modal-fieldset .tabing {
    padding-bottom: 10px;
    border: solid 1px #00000029;
}

    .propertiesBox .propertiesBody .modal-fieldset .tabing:nth-child(odd) {
        background-color: transparent;
    }




.expandDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 35px;
}

    .expandDiv .btn-outline-info {
        --bs-btn-color: #1B4888;
        --bs-btn-border-color: #1B4888;
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: #1B4888;
        --bs-btn-hover-border-color: #1B4888;
        --bs-btn-focus-shadow-rgb: 13, 202, 240;
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: #1B4888;
        --bs-btn-active-border-color: #1B4888;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #1B4888;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #1B4888;
        --bs-gradient: none;
    }

    .expandDiv .bi-info-circle {
        color: #0D97E3;
        font-size: 18px;
        position: absolute;
        left: 10px;
    }



.permissionBoxes .permissionCon a.trash.disabled {
    color: gray !important;
    cursor: default;
}

.editPositioning {
    position: relative;
}

    .editPositioning .scBtn {
        position: absolute;
        right: 0;
        width: 25px;
        height: 28px;
        line-height: 28px;
        padding: 0;
        top: 17px;
        translate: -1px -50%;
    }

        .editPositioning .scBtn i {
            font-size: 16px;
        }

        .editPositioning .scBtn.color-red {
            right: 2px;
        }

        .editPositioning .scBtn.color-green {
            right: 29px;
        }

    .editPositioning .form-control {
        padding-right: 45px;
    }

.ui-popover-close {
    top: 2%;
}

.btn-outline-info:hover {
    color: #fff;
}

.tabing .trash.trash-position {
    position: absolute;
    right: 2px;
    top: 2px;
}

.tabing .trash.disabled {
    color: #feaeae;
}

.offcanvas {
    background-color: #fff;
}

    .offcanvas .tabing {
        box-shadow: none;
    }

        .offcanvas .tabing .form-control {
            border: solid 1px var(--border-color);
            color: #000;
            font-weight: inherit;
        }

    .offcanvas .offcanvas-header {
        box-shadow: 2px 2px 5px #ededed;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        font-weight: 600;
    }

        .offcanvas .offcanvas-header h5 {
            font-size: 15px;
        }

        .offcanvas .offcanvas-header .btn-close {
            width: 15px;
            height: 15px;
        }

.blank-details h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-light-gray);
}

.offcanvas-body {
    scrollbar-width: thin;
}

.portfolioModal .modal-header {
    border-bottom: none !important;
}

    .portfolioModal .modal-header h1 {
        font-size: 15px !important;
    }

.portfolioModal .alert {
    font-size: 13px;
}

.portfolioModal .modal-footer {
    border-top: none !important;
    padding-top: 0 !important;
}

.portfolioModal .modal-body {
    padding-top: 0 !important;
}

    .portfolioModal .modal-body .form-control {
        border: solid 1px var(--border-color);
        border-radius: 5px !important;
        height: 42px;
    }

.dateContainer .clear-date {
    font-size: 17px;
}

.tabing .form-value .dateContainer .clear-date {
    top: 8px;
}

.tabing .form-value .dateContainer .calendarIcon {
    top: 8px;
}

.editPositioning .dateContainer .calendarIcon {
    right: inherit;
    left: 5px;
    top: 8px;
}

.editPositioning .dateContainer .date-picker {
    padding-left: 25px
}

.editPositioning .dateContainer .clear-date {
    right: 65px;
}

.permissionDefaultimg {
    min-height: 250px;
    margin: auto;
    width: 100%;
    position: relative;
    text-align: center;
}

    .permissionDefaultimg img {
        position: absolute;
        left: 50%;
        translate: -50% -50%;
        height: 90%;
        opacity: .1;
        z-index: 0;
        top: 50%;
    }

    .permissionDefaultimg p {
        top: 50%;
        translate: 0 -50%;
        position: absolute;
    }

.w-92p {
    width: 92%;
}

.folderStructure {
    margin: 0;
    padding: 0;
}

    .folderStructure li {
        position: relative;
    }

        .folderStructure li:before {
            background-color: #000;
            height: 100%;
            width: 1px;
            content: "";
            position: absolute;
            left: 7px;
            z-index: 0;
            top: 17px;
        }

        .folderStructure li:after {
            background-color: green;
            height: 1px;
            width: 15px;
            content: "";
            position: absolute;
            left: 7px;
            z-index: 0;
            top: 17px;
        }

        .folderStructure li:first-child:after {
            background-color: red;
            display: none;
        }

        .folderStructure li:first-child {
            padding-left: 0px
        }

    .folderStructure li {
        padding-left: 13px
    }

        /* .folderStructure li:last-child:has(ul):before {
display: inherit;
} */
        .folderStructure li ul li {
            position: relative;
        }

            .folderStructure li ul li:before {
                background-color: #000;
                height: 100%;
                width: 1px;
                content: "";
                position: absolute;
                left: 7px;
                z-index: 0;
                top: 17px;
            }

        .folderStructure li:has(.caret):before {
            display: none;
        }

        .folderStructure li:has(.caret.arrow-down):before {
            background-color: #000;
            height: 100%;
            width: 1px;
            content: "";
            position: absolute;
            left: 54px;
            z-index: 0;
            top: 17px;
        }

.folderIconbutton {
    display: flex;
    width: 25px;
    height: 25px;
    border: solid 1px #bbbbbb;
    border-radius: 5px;
    margin: 2px;
    padding: 3px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

    .folderIconbutton i {
        font-size: 13px;
        margin-bottom: 0;
        color: #000;
    }

[data-bs-theme="dark"] .folderIconbutton i, [data-bs-theme="dark"] .folderIconbutton img {
    filter: invert(1);
}

    [data-bs-theme="dark"] .folderIconbutton i.trash {
        filter: invert(0);
    }

.folderIconbutton img {
    width: 13px;
}

.uploadLink {
    color: var(--primary-color);
    display: inline-block;
    font-size: 14px;
    margin: 2px;
    padding: 2px 10px;
    border-right: solid 1px #bbb;
    margin-right: -5px;
}

.newFolderLink {
    color: #F6C937;
    display: inline-block;
    font-size: 14px;
    margin: 2px;
    padding: 2px 10px;
}

.weblinkIconmanage {
    display: grid;
    grid-template-columns: 20px auto;
}

.ql-editor:focus {
    outline: none !important;
    box-shadow: inherit !important;
    border: none !important;
}

.folderListingHead {
    width: 100%;
    word-wrap: break-word;
    word-break: break-word;
    font-size: 15px;
}

.editPositioning .dateContainer {
    width: 185px
}

.folderPath {
    background-color: #EAF9F4;
    color: #0D6130;
    padding: 10px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
}

    .folderPath img {
        display: inline-block;
    }

[data-bs-theme="dark"] .folderPath {
    background-color: #2b413a;
    color: #bcfdd7;
}

.permissionDefaultimg .position-relative {
    position: relative;
    z-index: 1
}

.form-checkbox .form-check-input {
    --bs-form-switch-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e);
    width: 2em;
    margin-left: -2.5em;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    border-radius: 2em;
    transition: background-position 0.15s ease-in-out;
}

.form-checkbox .form-check-input {
    float: inherit;
    margin-left: -1.5em;
    vertical-align: sub;
}

.font-size-12 {
    font-size: 12px !important;
}

.font-size-13 {
    font-size: 13px !important;
}

.bg-profile {
    background-image: url(../img/profile-d.svg);
    background-position: 5% center;
}

.pop-attributeUl {
    margin: 0;
    padding: 0;
    /* display: flex; */
    /* flex-flow: column; */
}

    .pop-attributeUl li {
        background-color: #E9F6FC;
        border-radius: 5px;
        /* float: left; */
        padding: 2px 10px;
        margin: 3px 5px;
        align-items: center;
        font-size: 13px;
        display: inline-block;
    }

[data-bs-theme="dark"] .pop-attributeUl li {
    background-color: #304141;
    color: #ffffff;
}

.pop-attributeUl li img {
    vertical-align: middle;
    display: inline-block;
}

.pop-attributeUl li .trash {
    text-align: right;
    margin-left: 8px;
}

    .pop-attributeUl li .trash.disabled {
        cursor: default;
        color: gray !important;
    }

.padding-right-65 {
    padding-right: 65px !important;
}

.word-break {
    word-break: break-all;
    word-wrap: break-word;
}

.defaultSearchportfolioBox {
    background-color: #F5FEFF;
    padding: 20px;
    box-shadow: 0 0 10px #9a999936;
    /* width: 100%; */
    border-radius: 5px;
    margin: 5px;
}

    .defaultSearchportfolioBox p, .defaultlinkportfolioBox p {
        font-size: 13px;
        line-height: 17px;
        color: var(--color-light-gray);
    }

    .defaultSearchportfolioBox h3, .defaultlinkportfolioBox h3 {
        font-size: 16px;
        color: #000;
        font-weight: 600;
    }

.w-80 {
    width: 80%;
}

.linkfileList {
    padding: 0;
    margin: 0;
}

    .linkfileList li {
        display: grid;
        grid-template-columns: 30px auto 150px;
        margin-bottom: 10px;
    }

        .linkfileList li p {
            font-size: 13px;
            line-height: 17px;
            color: var(--color-light-gray);
        }

        .linkfileList li button, .linkfileList li a.btn {
            height: fit-content;
            margin-top: 10px;
        }

.linkport-Modal-scroll .form-check label img {
    width: 17px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}
/* tree */

.tree {
    position: relative;
    background: white;
    margin-top: 0px;
    padding: 10px;
    font-family: "Roboto Mono", monospace;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
}

    .tree span {
        font-size: 13px;
        font-style: italic;
        letter-spacing: 0.4px;
        color: #a8a8a8;
    }

    .tree .fa-folder-open, .tree .fa-folder {
        color: #007bff;
    }

    .tree .fa-html5 {
        color: #f21f10;
    }

    .tree ul {
        padding-left: 5px;
    }

        .tree ul li {
            position: relative;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 15px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            user-select: none;
            list-style-type: disclosure-closed;
            list-style-position: outside;
            display: list-item;
        }

            .tree ul li::marker {
                text-indent: 25px;
            }

            .tree ul li details summary::-webkit-details-marker {
                display: block;
            }

            .tree ul li details[open] > summary i:before {
                font-family: "Font Awesome 6 Free";
                content: " \f07b";
            }

            .tree ul li details[disabled] > summary {
                cursor: not-allowed;
            }

                .tree ul li details[disabled] > summary i:before {
                    font-family: "Font Awesome 6 Free";
                    content: "\f65d";
                    color: #7f96ae;
                }

            .tree ul li:before {
                position: absolute;
                top: 15px;
                left: 0;
                width: 10px;
                height: 1px;
                margin: auto;
                content: "";
                background-color: #666;
            }

            .tree ul li:after {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 1px;
                height: 100%;
                content: "";
                background-color: #666;
            }

            .tree ul li:last-child:after {
                height: 15px;
            }

        .tree ul a {
            cursor: pointer;
        }

            .tree ul a:hover {
                text-decoration: none;
            }

.bg-weblink {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
}

    .bg-weblink img {
        width: 34%;
        opacity: .4;
        margin: auto;
        right: 0;
        position: absolute;
        translate: -108% -28%;
        border: 0;
        top: 50%;
        left: 100%;
    }

.bg-linkedfile {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
}

    .bg-linkedfile img {
        width: 34%;
        opacity: .4;
        margin: auto;
        right: 0;
        position: absolute;
        translate: -108% -28%;
        border: 0;
        top: 50%;
        left: 100%;
    }

.workflowLeft {
    box-shadow: 0 0 10px #9a999936;
    padding: 20px;
    border-radius: 5px;
    background-color: rgba(0,184,217,3% );
    min-height: 480px;
}

    .workflowLeft h3 {
        font-size: 14px;
        font-weight: 600;
    }

    .workflowLeft p {
        font-weight: 13px;
        color: var(--color-light-gray);
    }

.workflowRight {
    box-shadow: 0 0 10px #9a999936;
    padding: 20px;
    border-radius: 5px;
    min-height: 480px;
}

    .workflowRight small {
        font-size: 13px;
        color: var(--color-light-gray);
    }

.margin-auto {
    margin-left: auto;
    margin-right: auto;
}

.info-blue {
    color: #0D97E3;
}

.workflow-item {
    border: solid 1px var(--border-color);
    border-radius: 5px;
    padding: 10px;
    display: grid;
    grid-template-columns: 40px auto;
}

.bg-transparent {
    background-color: transparent;
}

.workflow-item div.icons {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: solid 1px #CCD3DE; */
    background-color: rgba(241,241,241,1);
    color: green;
    font-size: 17px;
}

.workflow-item h4 {
    font-size: 15px;
}

.workflow-item .workflow-person {
    display: inline-block;
    margin: 3px;
    background-color: rgba(33,192,99,17%);
    padding: 3px 10px;
    border-radius: 20px;
}

    .workflow-item .workflow-person:first-child {
        margin-left: 0;
    }

.workflow-small {
    font-size: 13px;
    color: var(--color-light-gray);
    display: block;
    margin-top: 5px;
}

.versionTable tr {
    border-bottom: 0;
    border-style: hidden;
}

.versionTable th, .versionTable td {
    background-color: transparent;
    vertical-align: middle;
    line-height: 16px;
}

    .versionTable td small {
        display: block;
        color: var(--color-light-gray);
    }

    .versionTable td img.option {
        width: 19px;
    }

        .versionTable td img.option.version {
            vertical-align: baseline;
        }

[data-bs-theme="dark"] .versionTable td img.option.version {
    filter: invert(0);
}

[data-bs-theme="dark"] .versionTable img {
    filter: invert(1);
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.namespan {
    font-weight: 500;
    white-space: nowrap;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.popper {
    font-size: 13px;
    line-height: 20px;
}

    .popper .approved {
        color: rgba(51,51,51,70%);
        display: grid;
        grid-template-columns: 102px auto;
    }

        .popper .approved span.name {
            color: #228C22;
        }

    .popper .dates {
        color: rgba(51,51,51,70%);
    }

    .popper .comments {
        color: #000;
        display: grid;
        grid-template-columns: 18px auto;
    }

        .popper .comments i {
            color: rgba(51,51,51,70%);
        }

        .popper .comments span.chatBox {
            color: #000;
        }

.ui-popover .max-details {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.UserAuditwidth {
}

.loglist {
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    background-image: url(../img/audit-log.svg);
    background-size: 80%;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 285px;
}

.UserAuditwidth .logCover {
    display: grid;
    grid-template-columns: 50% 50%;
}

.logCover {
    display: grid;
    grid-template-columns: 70% auto;
}

.UserAuditwidth .logCover span.color-green {
    width: 90%;
}

.logCover span {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    font-weight: 500;
}

    .logCover span.nowrap {
        white-space: break-spaces;
        line-height: 15px;
    }

.logCover small {
    font-size: 12px;
    color: var(--color-light-gray);
    display: block;
}

.height-98 {
    height: 98%;
}

.fileviewHeader .footer {
    border-top: solid 1px #E2DADA;
    margin-top: 10px;
}

.detailsModal {
    border: none;
    background-color: transparent;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    .detailsModal .card-head {
        background-color: #F7FDFE;
        padding: 10px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

[data-bs-theme="dark"] .detailsModal .card-head {
    background-color: #282828;
}

.detailsModal .card-head small {
    color: var(--color-light-gray);
    display: block;
}

.detailsModal .card-body {
}

    .detailsModal .card-body ul {
        margin: 0;
        padding: 0;
    }

        .detailsModal .card-body ul li {
            margin-bottom: 20px;
            font-size: 13px;
            display: grid;
            grid-template-columns: 40px auto;
            align-items: flex-start;
            gap: 5px;
        }

    .detailsModal .card-body li div:first-child {
        border: solid 1px var(--border-color);
        border-radius: 50%;
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
    }

    .detailsModal .card-body ul li small {
        color: var(--color-light-gray);
        display: block;
        font-size: 14px;
    }

.timelineTree {
    position: relative;
}

    .timelineTree .steps {
        position: relative;
        width: 33%;
        display: inline-block;
        vertical-align: top;
        padding: 20px;
        padding-top: 0px;
    }

        .timelineTree .steps .timelineIcon.disabled {
            color: #CCD3DE;
        }

        .timelineTree .steps:not(:last-child):after {
            position: absolute;
            z-index: 0;
            content: "";
            border-top: dashed 1px var(--primary-color);
            top: 13px;
            width: 93%;
            left: 11%;
        }

        .timelineTree .steps:last-child:after {
            display: none;
        }

        .timelineTree .steps:has(.disabled):after {
            position: absolute;
            z-index: 0;
            content: "";
            border-top: dashed 1px #CCD3DE;
            top: 13px;
            width: 93%;
            left: 11%;
        }

        .timelineTree .steps .approved .permission-box {
            display: inline-block;
            margin: 5px 0;
            padding: 3px 12px;
            margin-bottom: 7px;
        }

            .timelineTree .steps .approved .permission-box.approved {
                background-color: var(--primary-color);
                color: #fff;
            }

        .timelineTree .steps .user {
            font-size: 14px;
            font-weight: 500;
        }

        .timelineTree .steps .dates, .timelineTree .steps .user, .timelineTree .steps .comments {
            display: grid;
            grid-template-columns: 20px auto;
            color: #000;
        }

.color-small-gray {
    color: rgba(51,51,51,70%) !important;
}

.timelineTree .timelineIcon {
}

    .timelineTree .timelineIcon i {
        font-size: 19px;
    }

    .timelineTree .timelineIcon.color-green {
        color: #21C063
    }

.authDetailsHead {
    display: grid;
    grid-template-columns: 35px auto;
    gap: 5px;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

    .authDetailsHead .icons {
        display: flex;
        width: 30px;
        height: 30px;
        background-color: #ddd;
        border-radius: 30px;
        justify-content: center;
        align-items: center;
    }

        .authDetailsHead .icons i {
            font-size: 20px;
        }

    .authDetailsHead .details small {
        color: rgba(51,51,51,70%);
        font-size: 13px;
    }

    .authDetailsHead .details span strong {
        font-size: 14px;
    }

.levelbox {
    background-color: #D9F1FF;
    display: flex;
    padding: 5px 10px;
    width: fit-content;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: 500
}

    .levelbox img {
        margin-right: 5px
    }

.levelCover {
    padding-left: 20px;
    margin-bottom: 15px;
    font-size: 14px;
}

    .levelCover .note strong {
        font-weight: 500;
    }

    .levelCover .note i {
        color: #0D97E3;
        font-size: 16px;
    }

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}
/* .ts-control .item {
  width:93%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
} */
.ts-control .item {
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: inherit;
    display: block;
}

.ts-wrapper.form-control, .ts-wrapper.form-select {
    height: auto !important;
}

.form-check-input:focus {
    border-color: #00a76f82;
    outline: 0;
    box-shadow: none;
}

.discard {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #da3333;
    &:hover

{
    background-color: #8d8d8d;
    border-color: #8d8d8d;
}

}

.w-40 {
    width: 40% !important;
}
.w-50px {
    width:50px
}
.login-copy {
    color: #9598A4;
    font-size: 13px;
}

.upload-btn {
    background-color: #fff;
    border-radius: 5px;
    padding: 2px 10px;
    display: inline-block;
    color: #000;
    border: solid 1px #ccc;
}

    .upload-btn i {
        margin-right: 5px;
    }

    .upload-btn:hover {
        border: solid 1px #ddd;
    }

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

.font-size-15 {
    font-size: 15px;
}

.grayP {
    color: #999999;
    font-size: 12px;
}

.max-w-100 {
    max-width: 100% !important;
}

.modal-body .file-drop-area {
    background-size: 20%;
    justify-content: center;
}

.modal-body .file-msg {
    font-size: 13px;
}

    .modal-body .file-msg strong {
        font-size: 13px;
    }

    .modal-body .file-msg img {
        width: 30px;
    }

.modal-body .uploading-singleItem .fileDetails {
    text-align: left;
    font-size: 13px;
}

.modal-body .uploading-singleItem .fileOption a.trash {
    min-width: inherit;
}

    .modal-body .uploading-singleItem .fileOption a.trash i {
        font-size: 18px;
    }

.dashboard .card {
    background: #fff;
    border: none;
    -webkit-box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
    padding: 10px 5px
}

    .dashboard .card.tile:hover, .dashboard .card.tile2:hover, .dashboard .card.tile3:hover, .dashboard .card.tile4:hover {
        -webkit-box-shadow: 0 0 40px rgba(8, 21, 66, 0.05);
        box-shadow: 0 0 40px rgba(8, 21, 66, 0.05);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .dashboard .card .card-header {
        background-color: transparent;
        border-bottom: 0;
    }

        .dashboard .card .card-header h4 {
            font-size: 14px;
            color: #000;
            font-weight: 600;
            text-transform: uppercase;
        }

.dashboard .masterForms.card .card-header h4 {
    display: inline-block;
    vertical-align: middle;
}

.dashboard .card .card-header h4 small {
    color: #9e9e9e;
    text-transform: capitalize;
}

.dashboard .card-header {
    padding-left: .6rem;
}

.dashboard .card .card-body {
    padding: 16px 10px;
    font-size: 14px;
}

    .dashboard .card .card-body .flex-shrink-0 {
        width: 52px;
        height: 52px;
        border-radius: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 4px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
    }

        .dashboard .card .card-body .flex-shrink-0::before {
            content: "";
            position: absolute;
            width: 115%;
            height: 115%;
            opacity: 0;
            border-radius: 50%;
            border: 2px dashed #28b24b;
            padding: 10px;
            -webkit-transition: 0.8s;
            transition: 0.8s;
            -webkit-animation: spin 10s infinite linear;
            animation: spin 10s infinite linear;
        }

.dashboard .card.tile .card-body .flex-shrink-0::before {
    border: 2px dashed #28b24b;
}

.dashboard .card.tile2 .card-body .flex-shrink-0::before {
    border: 2px dashed #0d97e3;
}

.dashboard .card.tile3 .card-body .flex-shrink-0::before {
    border: 2px dashed #FF5630;
}

.dashboard .card.tile4 .card-body .flex-shrink-0::before {
    border: 2px dashed #FF7C00;
}

.flex-shrink-0 {
    background-color: #7A70BA;
}

.dashboard .card:hover .d-flex .flex-shrink-0::before {
    opacity: 1;
}

@keyframes spin {
    100% {
        transform: rotate(1turn);
    }
}

.dashboard .card .card-body .flex-shrink-0 i {
    font-size: 25px;
    color: #fff;
}

.dashboard .card.tile .flex-shrink-0 {
    background-color: #28b24b;
}

.dashboard .card.tile2 .flex-shrink-0 {
    background-color: #0d97e3;
}

.dashboard .card.tile3 .flex-shrink-0 {
    background-color: #FF5630;
}

.dashboard .card.tile4 .flex-shrink-0 {
    background-color: #FF7C00;
}

.dashboard .storage-1 .card.tile {
    background-color: #FFFBF0;
    border: solid 1px #ebc668;
}

.dashboard .storage-2 .card.tile {
    background-color: #E7F9F4;
    border: solid 1px #7ce993;
}

.dashboard .storage-3 .card.tile {
    background-color: #fff3e5;
    border: solid 1px #ffc789;
}

.dashboard .storage-4 .card.tile {
    background-color: #E3F6FE;
    border: solid 1px #64c5f6;
}



.dashboard .storage-1 .card.tile h4 {
    color: #d19b10;
}

.dashboard .storage-2 .card.tile h4 {
    color: #2FB44B;
}

.dashboard .storage-3 .card.tile h4 {
    color: #fc8d12;
}

.dashboard .storage-4 .card.tile h4 {
    color: #49a5d4;
}

.dashboard .card.tile h4 {
    color: #000;
    text-transform: uppercase;
}

.dashboard .storage .card.tile .listDetail-2 {
    width: 32%;
    height: 35px;
    background: rgb(81,215,109);
    background: linear-gradient(180deg, rgba(81,215,109,1) 0%, rgba(47,180,75,1) 11%);
    color: #fff;
    display: grid;
    grid-template-columns: 21px auto;
    /* justify-content: space-between; */
    align-items: center;
    text-align: left;
    position: relative;
    margin-bottom: 9px;
}

.dashboard .storage .card.tile .listDetail-1 {
    width: 32%;
    height: 35px;
    background: rgb(246,188,39);
    background: linear-gradient(180deg, rgba(246,188,39,1) 0%, rgba(209,155,16,1) 11%);
    color: #fff;
    display: grid;
    grid-template-columns: 21px auto;
    /* justify-content: space-between; */
    align-items: center;
    text-align: left;
    position: relative;
    margin-bottom: 9px;
}

.dashboard .storage .card.tile .listDetail-4 {
    width: 32%;
    height: 35px;
    background: rgb(100,197,246);
    background: linear-gradient(180deg, rgba(100,197,246,1) 0%, rgba(73,165,212,1) 11%);
    color: #fff;
    display: grid;
    grid-template-columns: 21px auto;
    /* justify-content: space-between; */
    align-items: center;
    text-align: left;
    position: relative;
    margin-bottom: 9px;
}

.dashboard .storage .card.tile .listDetail-3 {
    width: 32%;
    height: 35px;
    background: rgb(255,174,84);
    background: linear-gradient(180deg, rgba(255,174,84,1) 0%, rgba(252,141,18,1) 11%);
    color: #fff;
    display: grid;
    grid-template-columns: 21px auto;
    /* justify-content: space-between; */
    align-items: center;
    text-align: left;
    position: relative;
    margin-bottom: 9px;
}

.dashboard .card.tile .listDetail i {
    font-size: 20px;
    vertical-align: middle;
}

.dashboard .card.tile .listDetail strong {
    font-size: 20px;
}

.dashboard .card.tile .listDetail small {
    font-size: 12px;
    font-weight: 200 !important;
}

.listDetail-1 .titles {
    color: #d19b10
}

.listDetail-2 .titles {
    color: #2FB44B
}

.listDetail-3 .titles {
    color: #fc8d12
}

.listDetail-4 .titles {
    color: #49a5d4
}

.titles {
    position: absolute;
    color: #000;
    bottom: -21px;
    left: 0;
}

.storageLine {
    display: block;
    width: 100%;
}

    .storageLine small {
        font-size: 12px;
        font-weight: 400 !important;
        padding-left: 3px;
        letter-spacing: 1px;
    }

    .storageLine ul {
        background-color: gray;
        height: 50px;
        border-radius: 20px;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        align-items: center;
    }

        .storageLine ul li {
            text-align: center;
            height: 50px;
            line-height: 50px;
            color: #fff;
            font-weight: 700;
        }

            .storageLine ul li.list-1 {
                background: rgb(246, 188, 39);
                background: linear-gradient(180deg, rgba(246, 188, 39, 1) 0%, rgba(209, 155, 16, 1) 11%);
            }

            .storageLine ul li.list-2 {
                background: rgb(81, 215, 109);
                background: linear-gradient(180deg, rgba(81, 215, 109, 1) 0%, rgba(47, 180, 75, 1) 11%);
            }

            .storageLine ul li.list-3 {
                background: rgb(255, 174, 84);
                background: linear-gradient(180deg, rgba(255, 174, 84, 1) 0%, rgba(252, 141, 18, 1) 11%);
            }

            .storageLine ul li.list-4 {
                background: rgb(100, 197, 246);
                background: linear-gradient(180deg, rgba(100, 197, 246, 1) 0%, rgba(73, 165, 212, 1) 11%);
            }

.dashboard .sectionhead {
    padding: 15px 5px 5px 0;
    margin-bottom: 15px;
    border-bottom: solid 1px #ddd;
}

    .dashboard .sectionhead h4 {
        font-size: 18px;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .dashboard .sectionhead input {
        background-color: transparent;
    }

.storageLine ul li.list-5 {
    background-color: gray !important;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.spaceUtilizeation div {
}

.spaceUtilizeation .utilizationBox {
    margin: 0 10px;
    min-width: 100px;
    position: relative;
    padding: 5px 15px;
    text-wrap: nowrap;
}

    .spaceUtilizeation .utilizationBox:after {
        height: 50%;
        width: 1px;
        background-color: #ddd;
        content: "";
        position: absolute;
        right: -15px;
        top: calc(100% - 76%);
    }

    .spaceUtilizeation .utilizationBox:nth-child(3):after {
        opacity: 0;
        display: none;
    }

    .spaceUtilizeation .utilizationBox small {
        font-size: 12px;
        font-weight: 400 !important;
        padding-left: 2px;
        letter-spacing: 1px;
    }

.chart {
    height: auto !important;
    width: 100% !important;
}

.recentList {
    margin: 0;
    padding: 0;
    overflow: auto;
    border: none;
    background: #fff;
    scrollbar-width: thin;
    max-height: 265px
}

    .recentList li {
        margin-bottom: 3px;
        height: 50px;
    }

        .recentList li a {
            border-bottom: dotted 1px #ccc;
            display: flex;
            flex-flow: column;
            padding: 5px 10px;
            position: relative;
            font-weight: 600;
            background: linear-gradient(to right, #f7f6ff 50%, white 50%);
            background-size: 200% 100%;
            background-position: right bottom;
            transition: all .5s ease-out;
            background-color: #fff;
            overflow: hidden;
            color: #3D434A;
        }

            .recentList li a h3 {
                margin: 0;
                font-size: 14px;
                font-weight: 600;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-right: 40px;
            }

        .recentList li:last-child a {
            border-bottom: none;
        }

        .recentList li a small {
            font-weight: 400;
            color: gray;
        }

        .recentList li a::before {
            position: absolute;
            content: "";
            width: 3px;
            background-color: rgb(150,139,223);
            left: 0;
            height: 90%;
            top: 3px;
        }

        .recentList li a::after {
            right: 10px;
            width: 13px;
            height: 95%;
            content: "\F285";
            font-family: bootstrap-icons !important;
            position: absolute;
            padding: 11px 0;
        }

        .recentList li a:hover {
            background-position: left bottom;
        }

            .recentList li a:hover::after {
                color: rgb(150,139,223);
            }

.list-view-filter .folder-listing .card-header {
    width: 100%;
    grid-template-columns: auto 80px;
}

.list-view-filter .folder-listing {
    flex-flow: column !important;
}

.tableBg {
    background-image: url(../img/version-history-bg.svg);
    background-size: 30%;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
}

.spaceUtilizeation .utilizationBox:has(::after) .utilizationBox:after {
    display: none;
}

.card.porfolio-listing .permission-check-cover {
    grid-template-columns: 20px auto;
}

.chartHeight {
    height: 400px !important;
    width: 100% !important;
}

.height-fix {
    height: 425px !important;
}

.topSize li a small {
    display: inline-block !important;
    width: 30%;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

    .topSize li a small:first-child {
        width: 20%;
        font-weight: 600;
        color: var(--primary-color);
    }

    .topSize li a small:nth-child(2) {
        margin: 0 10px;
        width: 40%;
    }

    .topSize li a small:last-child {
        text-align: center;
    }

.topSize.recentList li a::before {
    background-color: var(--primary-color);
}

.topSize.recentList li a:hover {
    background-position: left bottom;
}

.topSize.recentList li a {
    background: linear-gradient(to right, #f6fff6 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
    background-color: #fff;
    overflow: hidden;
}

    .topSize.recentList li a:hover::after {
        color: var(--primary-color);
    }

.portfolio.recentList li a::before {
    background-color: #0d97e3;
}

.portfolio.recentList li a {
    background: linear-gradient(to right, #d9f6ff 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
    background-color: #fff;
    overflow: hidden;
}

    .portfolio.recentList li a:hover {
        background-position: left bottom;
    }

        .portfolio.recentList li a:hover::after {
            color: #0d97e3;
        }

.min-height-200 {
    min-height: 200px;
}

.flex-column {
    flex-flow: column;
}

.filteredBox {
    border: solid 1px #0c93dd;
    border-radius: 7px;
    display: block;
    display: flex;
    padding: 5px 8px;
    margin-bottom: 10px;
    background-color: transparent;
    -webkit-box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
    justify-content: space-between;
    min-height: 27px;
    overflow: hidden;
    align-items: center;
}

    .filteredBox .innerDIv {
        width: 92%;
        overflow: hidden;
    }

    .filteredBox .appliedfilter {
        /* background: rgba(245, 245, 220, 1);
    background: linear-gradient(180deg, rgb(188 231 255) 0%, rgb(12 147 221) 11%); */
        position: absolute;
        left: -9px;
        top: -22px;
        bottom: -22px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 5px 0 10px;
        color: #000;
        font-size: 13px;
        font-weight: 500;
    }

    .filteredBox ul {
        margin: 0;
        padding: 0;
        display: flex;
        height: 27px;
    }

        .filteredBox ul li {
            padding: 3px 5px;
            font-weight: 400;
            border: solid 1px #ddd;
            border-radius: 4px;
            margin: 0 3px;
            min-width: 60px;
            font-size: 13px;
            background-color: #ffffffc7;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 27px;
        }

            .filteredBox ul li i {
                font-size: 15px;
                height: 18px;
            }

                .filteredBox ul li i:hover {
                    cursor: pointer;
                }

            .filteredBox ul li:first-child {
                margin-left: 0;
            }

            .filteredBox ul li:last-child {
                margin-right: 0;
            }

.main-filter-close {
    font-size: 27px;
    cursor: pointer;
    height: 33px;
}

    .main-filter-close.bi::before, .filteredBox ul li i.bi::before {
        line-height: 0;
        vertical-align: 0;
    }

.filerAnchor {
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
}

.moreFilter {
    border: solid 1px var(--primary-color);
    width: 27px;
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 3px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--primary-color)
}

.searchSection .form-select-sm:focus, .searchSection .form-select-sm:active {
    outline: none;
    box-shadow: none;
    border: solid 1px var(--primary-color);
}

.searchSection .form-select-sm {
    width: 100% !important;
}

.searchSection .form-select .ts-control {
    height: 23px;
    font-size: 13px;
    border: none !important;
}

.searchSection .plugin-clear_button .clear-button {
    top: 50%;
    transform: translateY(-30%);
}

.modal-fullscreen .col-form-label {
    font-weight: 100;
    padding: 0 0 0 13px;
    line-height: 17px
}

.folder-listing.porfolio-listing .card-header {
    grid-template-columns: auto 57px;
}

.versionChange {
    font-size: 13px;
    margin: 0 5px;
    padding: 3px 10px;
    background-color: #ededed;
    border: solid 1px #ddd;
    border-radius: 3px;
}

.was-validated .form-control:valid, .form-control.is-valid {
    background-position: right calc(24px + 0.1875rem) center;
    background-image: none;
}

.list-view-filter .porfolio-listing .icons-footer .dropdown a {
    margin-right: 0;
}

.login-form-cover input[type="password"]:has(.form-control.is-valid), .login-form-cover input[type="password"]:has(.was-validated .form-control:valid) {
    background-position: right calc(30px + 0.1875rem) center !important;
}

.customeDiv .dateContainer .clear-date {
    position: absolute;
    right: 29px !important;
}

.js-btn-next, .js-btn-next:hover, .js-btn-next:active, .js-btn-next:focus {
    background-color: #2243b3;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    background-image: none !important;
}

.masterHeadCover {
    display: flex;
    align-items: center;
    box-shadow: 0px 0px 10px #ddd;
    border-radius: 10px;
    padding: 10px;
}

    .masterHeadCover .leftBox {
        width: 70%;
    }

        .masterHeadCover .leftBox h4 {
            font-size: 18px;
            font-weight: 600;
        }

            .masterHeadCover .leftBox h4 small {
                font-size: 12px;
                color: red;
                font-weight: 500;
            }

                .masterHeadCover .leftBox h4 small strong {
                    font-weight: 700;
                }

        .masterHeadCover .leftBox .disabled {
            color: #a0a0a0;
        }

        .masterHeadCover .leftBox .profilePic {
            padding: 5px;
            box-shadow: 0px 0px 10px #ddd;
        }

    .masterHeadCover .rightBox {
        width: 30%;
        display: flex;
        flex-flow: column;
        text-align: right;
    }

.sectionCover {
    box-shadow: 0px 0px 10px #ddd;
    padding: 10px;
    border-radius: 8px;
    margin: 8px 0;
}

.f-w-700 {
    font-weight: 700;
}

.groupList {
    margin: 0;
    padding: 0;
}

    .groupList li {
        margin: 3px;
        display: inline-block;
        vertical-align: top;
        padding: 2px 12px;
        border-radius: 5px;
    }

        .groupList li:first-child {
            margin-left: 0;
        }

        .groupList li:last-child {
            margin-right: 0;
        }



        .groupList li:nth-child(10n-1) {
            background-color: #FFF1E3;
            color: #000;
        }

        .groupList li:nth-child(10n-2) {
            background-color: #D8F3FF;
            color: #000;
        }

        .groupList li:nth-child(10n-3) {
            background-color: #FFE6E9;
            color: #000;
        }

        .groupList li:nth-child(10n-4) {
            background-color: #FFF1E3;
            color: #000;
        }

        .groupList li:nth-child(10n-5) {
            background-color: #dcfff3;
            color: #000;
        }

        .groupList li:nth-child(10n-6) {
            background-color: #fbe6fe;
            color: #000;
        }

        .groupList li:nth-child(10n-7) {
            background-color: #fff0ec;
            color: #000;
        }

        .groupList li:nth-child(10n-8) {
            background-color: #e4ffff;
            color: #000;
        }

        .groupList li:nth-child(10n-9) {
            background-color: #f4e4ec;
            color: #000;
        }

        .groupList li:nth-child(10n-10) {
            background-color: #ffefe7;
            color: #000;
        }

.lockedSts {
    background-color: red;
    color: #fff;
    border-radius: 20px;
    display: inline-block;
    padding: 6px 10px;
    /* height:25px; */
    /* line-height: 20px; */
    /* margin: 2px; */
    line-height: 1;
    margin-right: 0;
    font-weight: 400;
    font-size: 12px;
}

.activeSts {
    background-color: var(--color-green);
    color: #fff;
    border-radius: 20px;
    display: inline-block;
    padding: 6px 10px;
    /* height:25px; */
    /* padding-left: 19px; */
    /* line-height: 20px; */
    /* margin: 2px; */
    line-height: 1;
    margin-right: 0;
    font-weight: 400;
    font-size: 12px;
}

    .activeSts i {
        font-size: 15px;
        position: relative;
    }

        .activeSts i:before {
            line-height: 15px;
            width: 10px;
            height: 10px;
            top: 3px;
            position: absolute;
            left: -15px;
        }

.inactiveSts {
    background-color: var(--color-light-gray);
    color: #fff;
    border-radius: 20px;
    display: inline-block;
    padding: 6px 10px;
    /* height:25px; */
    /* padding-left: 19px; */
    /* line-height: 20px; */
    /* margin: 2px; */
    line-height: 1;
    margin-right: 0;
    font-weight: 400;
    font-size: 12px;
}

    .inactiveSts i {
        font-size: 15px;
        position: relative;
    }

        .inactiveSts i:before {
            line-height: 15px;
            width: 10px;
            height: 10px;
            top: 3px;
            position: absolute;
            left: -15px;
        }

.ad {
    background-color: #F0F0F0;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
}

.gu {
    background-color: #DCF3EB;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
}

.geu {
    background-color: #CFEAF9;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
}

.backBtnarrow {
    display: inline-block;
    font-size: 35px;
    vertical-align: middle;
    width: 30px;
    height: 27px;
    color: #000;
}

    .backBtnarrow i {
        position: relative;
    }

        .backBtnarrow i:before {
            position: absolute;
            top: -7px;
            left: -5px;
        }

.w-70 {
    width: 70%;
}

.textEllips {
    white-space: nowrap;
    width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ownerTab {
}

    .ownerTab .nav-pills {
        box-shadow: 0 0 15px #ddd;
        min-width: 250px;
        padding: 15px;
    }

        .ownerTab .nav-pills li, .ownerTab .nav-pills li button {
            width: 100%;
            text-align: left;
        }

    .ownerTab .tab-content {
        box-shadow: 0 0 15px #ddd;
        padding: 15px;
    }

.-webkit-fill-available {
    width: -webkit-fill-available;
}

.ownerTab .portfolioBtn {
    border: solid 1px #0d97e3;
    color: #000;
}

    .ownerTab .portfolioBtn.active {
        background-color: #E8F7FF;
        color: #0d97e3;
    }

.ownerTab .filesBtn {
    border: solid 1px var(--color-green);
    color: #000;
}

    .ownerTab .filesBtn.active {
        background-color: #F5FFF8;
        color: var(--color-green);
    }

.ownerTab .folderBtn {
    border: solid 1px #ddb32a;
    color: #000;
}

    .ownerTab .folderBtn.active {
        background-color: #FFFCF3;
        color: #ddb32a;
    }

.ownerTab .nav-link {
    margin-bottom: 10px;
}

    .ownerTab .nav-link i {
        vertical-align: middle;
        margin-right: 5px;
    }

.changeOwnershipbtn {
    min-width: 185px
}

.PortlistBox {
    border: solid 1px #ddd;
    padding: 10px;
    border-radius: 6px;
    padding-left: 30px;
}

    .PortlistBox i {
        color: #0d97e3;
    }

.filesBox {
    border: solid 1px #ddd;
    padding: 10px;
    border-radius: 6px;
    padding-left: 30px;
}

    .filesBox i {
        color: var(--color-green);
    }

.foldersBox {
    border: solid 1px #ddd;
    padding: 10px;
    border-radius: 6px;
    padding-left: 30px;
}

    .foldersBox i {
        color: #ddb32a;
    }

.levelsHead {
    font-size: 15px;
    font-weight: 500;
}

    .levelsHead i {
        color: #0d97e3;
        margin-left: 5px;
    }

.levels {
    border-radius: 3px;
    background-color: #DCF3EB;
    padding: 2px 4px;
    font-weight: 600;
    display: inline-block;
}

    .levels.one {
        background-color: #DCF3EB;
        color: #000 !important;
    }

    .levels.two {
        background-color: #F1F1F1;
        color: #000 !important;
    }

    .levels.three {
        background-color: #F4E4EC;
        color: #000 !important;
    }

    .levels.four {
        background-color: rgba(13, 151, 277, .2);
        color: #000 !important;
    }

    .levels.five {
        background-color: #FFF0EC;
        color: #000 !important;
    }

.levelSectionBox {
    background-color: rgba(248, 250, 251, .9);
    border: solid 1px #ddd;
    border-radius: 10px;
    padding: 15px;
    margin: 5px 0;
}

.addLevel {
    background-color: #0E0E0E;
    border-radius: 5px;
    color: #fff;
    padding: 3px 5px;
    display: inline-block;
}

    .addLevel.disabled {
        background-color: rgba(0, 0, 0, 0.5);
        cursor: default
    }

/*  Toggle Switch  */

.toggleSwitch span span {
    display: none;
}

.toggleSwitch {
    display: inline-block;
    height: 18px;
    position: relative;
    overflow: visible;
    padding: 0;
    cursor: pointer;
    width: 150px;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 20px;
    height: 30px;
}

    .toggleSwitch * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .toggleSwitch label,
    .toggleSwitch > span {
        line-height: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .toggleSwitch input:focus ~ a,
    .toggleSwitch input:focus + label {
        outline: none;
    }

    .toggleSwitch label {
        position: relative;
        z-index: 3;
        display: block;
        width: 100%;
    }

    .toggleSwitch input {
        position: absolute;
        opacity: 0;
        z-index: 5;
    }

    .toggleSwitch > span {
        position: absolute;
        left: 0;
        width: calc(100% - 6px);
        margin: 0;
        text-align: left;
        white-space: nowrap;
        margin: 0 3px;
    }

        .toggleSwitch > span span {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            display: block;
            width: 50%;
            margin-left: 50px;
            text-align: left;
            font-size: 0.9em;
            width: auto;
            left: 0;
            top: -1px;
            opacity: 1;
            width: 40%;
            text-align: center;
            line-height: 30px;
        }

    .toggleSwitch a {
        position: absolute;
        right: 50%;
        z-index: 4;
        display: block;
        top: 3px;
        bottom: 3px;
        padding: 0;
        left: 3px;
        width: 50%;
        background-color: var(--primary-color);
        border-radius: 20px;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .toggleSwitch > span span:first-of-type {
        color: #FFF;
        opacity: 1;
        left: 0;
        margin: 0;
        width: 50%;
    }

    .toggleSwitch > span span:last-of-type {
        left: auto;
        right: 0;
        color: #999;
        margin: 0;
        width: 50%;
    }

    .toggleSwitch > span:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: -2px;
        /* background-color: #fafafa;
	border: 1px solid #ccc; */
        border-radius: 30px;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }

    .toggleSwitch input:checked ~ a {
        left: calc(50% - 3px);
    }

    .toggleSwitch input:checked ~ span:before {
        /* border-color: #0097D1;
	box-shadow: inset 0 0 0 30px #0097D1; */
    }

    .toggleSwitch input:checked ~ span span:first-of-type {
        left: 0;
        color: #999;
    }

    .toggleSwitch input:checked ~ span span:last-of-type {
        /* opacity: 1;
	color: #fff;	 */
        color: #FFF;
    }
/* Switch Sizes */
/* .toggleSwitch.large {
	width: 60px;
	height: 27px;
}
.toggleSwitch.large a {
	width: 27px;
}
.toggleSwitch.large > span {
	height: 29px;
	line-height: 28px;
}
.toggleSwitch.large input:checked ~ a {
	left: 41px;
}
.toggleSwitch.large > span span {
	font-size: 1.1em;
}
.toggleSwitch.large > span span:first-of-type {
	left: 50%;
}
.toggleSwitch.xlarge {
	width: 80px;
	height: 36px;
}
.toggleSwitch.xlarge a {
	width: 36px;
}
.toggleSwitch.xlarge > span {
	height: 38px;
	line-height: 37px;
}
.toggleSwitch.xlarge input:checked ~ a {
	left: 52px;
}
.toggleSwitch.xlarge > span span {
	font-size: 1.4em;
}
.toggleSwitch.xlarge > span span:first-of-type {
	left: 50%;
} */
.addRemove {
    margin: 0 5px;
    display: grid;
    width: 90px;
    grid-template-columns: auto 20px auto;
    border: solid 1px #ddd;
    border-radius: 5px;
    height: 30px;
    padding: 5px;
    justify-content: space-between;
    background-color: #fff;
}

    .addRemove span {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        background-color: gray;
    }

    .addRemove input {
        text-align: center;
    }

    .addRemove span.minus {
        background-color: #F4F4F4;
        color: #000;
    }

    .addRemove span.plus {
        background-color: #0E0E0E;
        color: #fff;
    }

.coverItemImportBulk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--white-bg);
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px var(--login-shadow);
}

.coverItemImportBulkNumber {
    background-color: var(--primary-color);
    color: var(--white-bg);
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    padding: 4px 8px;
}

.coverItemImportBulkTitle {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

.coverItemImportModalItem {
    width: 100%;
    background-color: var(--white-bg);
    padding: 10px;
}

    .coverItemImportModalItem span {
        font-size: 13px;
        font-weight: 400;
        display: inline-block;
        margin-right: 8px;
        color: #535050;
    }

        .coverItemImportModalItem span strong {
            font-size: 13px;
            font-weight: 500;
            color: #000;
        }

.coverItemImport {
    display: grid;
    grid-template-columns: 80% 20%;
    width: 100%;
    align-items: center;
    position: relative;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px var(--login-shadow);
    margin-bottom: 10px;
    padding-top: 10px;
    justify-content: space-between;
    align-items: center;
}

    .coverItemImport .d-flex {
        display: grid !important;
        grid-template-columns: auto 90%;
        align-items: flex-start;
        justify-content: flex-start;
    }

        .coverItemImport .d-flex .d-flex {
            display: flex !important;
        }

    .coverItemImport .optionItem {
        text-align: right;
    }

    .coverItemImport .form-check-input, .coverItemImportBulk .form-check-input {
        border: solid 1px #918a8a;
    }

.form-check-input {
    border: solid 1px #918a8a;
}

.coverItemImport h3 {
    font-size: 15px;
    margin-bottom: 3px;
    /* word-wrap: break-word; */
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

.coverItemImport span {
    font-size: 13px;
    font-weight: 400;
    display: inline-block;
    margin-right: 8px;
    color: #535050;
}

    .coverItemImport span strong {
        font-size: 13px;
        font-weight: 500;
        color: #000;
    }

.uploadScan h3 {
    font-size: 15px;
    margin-bottom: 3px;
}

.uploadScan span {
    font-size: 13px;
    font-weight: 400;
    display: inline-block;
    margin-right: 8px;
    color: #535050;
}

    .uploadScan span strong {
        font-size: 13px;
        font-weight: 500;
        color: #000;
    }
/*  End Toggle Switch  */

.button-oultline {
    outline: 1;
    --bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)
}

.fs-25 {
    font-size: 25px;
}

.fs-20 {
    font-size: 20px;
}

.w-70px {
    width: 70px;
}

.dark-contained-btn {
    background-color: var(--text-primary);
    color: var(--white-bg);
    border-radius: 6px;
    padding: 4px 10px;
}

    .dark-contained-btn:focus {
        outline: 2px solid var(--primary-color); /* Visible outline on focus */
    }

#cropperImage {
    max-width: 100%;
    display: block;
}

.cropper-container {
    width: 100%;
    height: 350px;
}

.lightBlueBg {
    background-color: var(--ligth-blue);
}

.lightBlueColor {
    color: var(--ligth-blue);
}

.w-fit {
    width: fit-content;
}

.attributeFieldTable {
    width: 100%;
    border-spacing: 0 10px;
    border-collapse: separate;
}

    .attributeFieldTable > thead > tr {
        background-color: var(--soft-mint);
    }

    .attributeFieldTable > tbody > tr:nth-child(odd) {
        background-color: var(--light-gray);
    }

    .attributeFieldTable > thead > tr > th,
    .attributeFieldTable > tbody > tr > td {
        padding: 8px;
        font-weight: 400;
    }

.skyBlueText {
    color: var(--sky-blue) !important;
}

.skyBlueBg {
    background-color: var(--sky-blue) !important;
}

.bgWhite {
    background-color: var(--white-bg);
}

.fs-13 {
    font-size: 13px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

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

.fs-16 {
    font-size: 16px;
}

.w-120 {
    width: 120px;
}

.primaryColor {
    color: var(--primary-color);
}

.ligthGrayBg {
    background-color: var(--color-light-gray);
}

.ligthGrayText {
    color: var(--color-light-gray);
}

.fileDetailsModalTable {
    width: 100%;
    margin-top: 5px;
}

    .fileDetailsModalTable td {
        padding: 4px 0px;
    }

    .fileDetailsModalTable tbody tr td:first-child {
        color: var(--color-light-gray);
    }

    .fileDetailsModalTable tbody tr td:nth-child(2) {
        padding-left: 6px;
    }

.tableChip {
    font-size: 10px;
    font-weight: 400;
    border: 1px solid #FF0000;
    color: #FF0000;
    border-radius: 2px;
    padding: 3px 6px;
}

.lightBlueTintBg {
    background-color: var(--light-blue-tint);
}

.fileDetailsCol {
    height: calc(100vh - 140px);
    overflow: auto;
}

.colorGreeenText {
    color: var(--color-green)
}

.colorRedText {
    color: var(--color-red)
}

.departModalBody {
    display: flex;
    gap: 10px;
    padding: 5px;
}

    .departModalBody > :nth-child(2) {
        flex: 0;
        display: flex;
        align-items: center;
    }

    .departModalBody > :first-child,
    .departModalBody > :nth-child(3) {
        flex: 1;
        height: calc(100vh - 300px);
        overflow: auto;
        padding: 5px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }

.depListBtn {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    background-color: var(--light-gray);
    text-align: start;
    padding: 10px;
    outline: none;
    transition: filter 0.3s ease;
}

    .depListBtn:hover {
        filter: brightness(0.9);
    }

    .depListBtn:focus {
        outline: 1px solid var(--primary-color);
    }

    .depListBtn.active {
        background-color: var(--menu-select-bg);
    }

.arrowBtn {
    border: 1px solid var(--border-color);
    color: var(--border-color);
    border-radius: 6px;
    font-size: 17px;
    padding: 4px 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .arrowBtn:hover {
        background-color: var(--light-gray);
    }

    .arrowBtn.active {
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
    }

.h-265 {
    height: 265px;
}

.max-w-300 {
    max-width: 300px;
}

.highlight {
    background-color: var(--highlight) !important;
}

.profileMenu {
    padding: 0px;
}

    .profileMenu::before,
    .profileMenu::after {
        display: none !important;
    }

    .profileMenu .header {
        background-color: var(--bs-body-bg) !important;
        border-radius: var(--radius) var(--radius) 0px 0px;
        padding: 5px 10px 10px 10px;
    }

        .profileMenu .header .btn {
            font-size: 12px;
            font-weight: 600;
        }

        .profileMenu .header .close {
            padding: 0px;
        }

    .profileMenu .labelContainer {
        display: flex;
        flex-direction: column;
    }

        .profileMenu .labelContainer h3 {
            font-weight: 600;
            font-size: 16px;
            word-break: break-all;
        }

        .profileMenu .labelContainer button {
            margin-left: 5px;
        }

    .profileMenu .close {
        border: none;
    }

    .profileMenu button:hover {
        opacity: 0.8;
    }

    .profileMenu .labelContainer button i {
        font-size: 12px;
    }

    .profileMenu .labelContainer span {
        font-size: 12px;
        font-weight: 400;
    }

    .profileMenu .avatar {
        width: 48px;
        height: 48px;
        min-width: 48px !important;
        min-height: 48px !important;
        color: #fff;
        background-color: #0C3B5E;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        flex-shrink: 0;
        position: relative;
    }

    .profileMenu .avatarEditIconContainer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        background-color: var(--primary-color-semi-transparent);
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .profileMenu .avatar:hover .avatarEditIconContainer {
        opacity: 1;
    }

    .profileMenu .editImageSelector {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 3;
    }

.otherDetailsContainer {
    margin-top: 8px;
}

    .otherDetailsContainer .detailText {
        word-break: break-all;
    }

    .otherDetailsContainer > div {
        display: flex;
        gap: 5px;
        align-items: start;
        font-size: 13px;
        font-weight: 400;
    }

.profileMenu .bi-diagram-2 {
    font-size: 17px;
    margin-left: -2px;
    margin-right: -2px;
    margin-top: -3px;
}

.profileMenu .body {
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

    .profileMenu .body .bodyItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--bs-body-bg) !important;
        border-radius: 10px;
        padding: 10px;
        font-size: 14px;
        font-weight: 400;
    }

        .profileMenu .body .bodyItem .flexContainer {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .profileMenu .body .bodyItem .bi-question-circle {
            font-size: 18px;
        }

    .profileMenu .body .bodyItemHover:hover {
        filter: brightness(0.9);
    }

    .profileMenu .body .bi-download {
        background-color: hsl(from var(--primary-color) h s 80%);
        padding: 5px 7px;
        border-radius: 4px;
    }

.tPrimary {
    color: var(--text-primary);
}

.tSecondary {
    color: var(--text-secondary);
}

.scannerTemplateGrid {
    padding-top: 100px;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

    .scannerTemplateGrid .divider {
        height: 230px;
        /* the height of divider and item should be same  */
        display: flex;
        align-items: center;
        margin: 0px 10px;
    }

    .scannerTemplateGrid .item {
        height: 230px;
        /* the height of divider and item should be same  */
        width: 365px;
        margin-bottom: 150px;
        border-radius: 12px;
        background-color: var(--white-bg);
        box-shadow: 0px 3.28px 31.97px 0px #978C8C33;
        display: flex;
        flex-direction: column;
    }

        .scannerTemplateGrid .item > .header {
            height: 40px;
            position: relative;
        }

            .scannerTemplateGrid .item > .header > .number {
                background-color: #37474F;
                color: #fff;
                border-radius: 50%;
                width: 37px;
                height: 37px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                font-weight: 600;
                position: absolute;
                left: 25px;
                top: -15px;
            }

            .scannerTemplateGrid .item > .header img {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
            }

            .scannerTemplateGrid .item > .header > img.printTemplate {
                bottom: -25px;
            }

            .scannerTemplateGrid .item > .header > img.firstTemplate {
                bottom: -10px;
            }

            .scannerTemplateGrid .item > .header > img.scanDoc {
                bottom: -15px;
            }

            .scannerTemplateGrid .item > .header img.importFromScanner {
                transition: filter 0.3s ease;
                cursor: pointer;
            }

                .scannerTemplateGrid .item > .header img.importFromScanner:hover {
                    filter: brightness(0.8);
                }

            .scannerTemplateGrid .item > .header .bi-arrows-fullscreen {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 50px;
                opacity: 0;
                transition: opacity 0.3s ease;
                pointer-events: none;
            }

            .scannerTemplateGrid .item > .header img.importFromScanner:hover + i.bi-arrows-fullscreen {
                opacity: 1;
                /* Show the icon on hover */
            }

        .scannerTemplateGrid .item > .contentContainer {
            flex: 1;
            height: 100%;
            overflow: auto;
            padding: 20px 20px 5px 20px;
        }

            .scannerTemplateGrid .item > .contentContainer > .title {
                font-size: 16px;
                font-weight: 600;
                margin: 0px;
            }

            .scannerTemplateGrid .item > .contentContainer > .content {
                font-size: 13;
                font-weight: 300;
            }

/* template download page  */
.templateDownloadBtn {
    background-color: var(--primary-color);
    color: #fff;
    padding: 8px 10px;
    border-radius: 4px;
}

.a4Container {
    width: 595px !important;
    height: 842px !important;
    background-color: var(--white-bg);
    position: relative;
    margin: 0px auto;
}


    .a4Container > img {
        width: 100%;
        height: 100%;
    }

    .a4Container > .headerContainer {
        background-color: var(--white-bg);
        width: 90%;
        box-shadow: 0px 3.28px 31.97px 0px #00000024;
        padding: 20px;
        position: absolute;
        top: 77px;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
    }

    .a4Container > .barcodeContainer {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .a4Container > .barcodeContainer > .imgContainer {
            width: 240px;
            height: 240px;
            background-color: var(--white-bg);
            box-shadow: 0px 3.28px 31.97px 0px #A59A9A24;
            padding: 20px;
        }

            .a4Container > .barcodeContainer > .imgContainer > img {
                width: 100%;
                height: 100%;
            }
/* template download page end  */

/* create password  */
.createPasswordContainer {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
}

    .createPasswordContainer .form {
        background-color: var(--white-bg);
        border-radius: 8px;
        width: 95%;
        max-width: 550px;
        padding: 35px 45px;
        box-shadow: 0px 3.28px 14.97px 0px #BEB5B540;
        max-height: 90vh;
        overflow-y: auto;
    }

    .createPasswordContainer .title {
        font-weight: 700;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .createPasswordContainer .btn-submit {
        width: 100%;
        margin-top: 30px;
        padding: 8px 8px;
    }

/* create password end  */

.checkboxContainer {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 0px;
    margin: 0px;
}

    .checkboxContainer a {
        color: var(--primary-color);
    }

/* mail template  */
.mailTemplateContainer {
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding: 25px 25px;
}

    .mailTemplateContainer .imageWrapper {
        width: 650px !important;
        margin: auto;
        position: relative;
    }

        .mailTemplateContainer .imageWrapper img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

    .mailTemplateContainer .textContent {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 60px;
        text-align: center;
        width: 85%;
        max-width: 400px;
        display: flex;
        flex-direction: column;
        color: var(--text-secondary);
    }

    .mailTemplateContainer .usernameText {
        font-size: 13px;
        font-weight: 400;
    }

    .mailTemplateContainer .userNameHighlight {
        color: var(--primary-color);
        font-weight: 700;
        font-size: 16px;
    }

    .mailTemplateContainer .btn-submit {
        width: 100%;
        margin-top: 15px;
        padding: 8px 8px;
    }

    .mailTemplateContainer .regardsText {
        margin-top: 20px;
        font-size: 14px;
        font-weight: 400;
    }

    .mailTemplateContainer .signature {
        font-size: 14px;
        font-weight: 600;
    }


    .mailTemplateContainer .descriptionContainer {
        width: 500px;
        height: 130px;
        /* background-color: red; */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 263px;
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
    }

    .mailTemplateContainer .triangleText {
        margin: 0 auto;
        text-align: center;
        font-size: 13px;
        font-weight: 400;
    }

    .mailTemplateContainer .line {
        display: block;
        margin: 0 auto;
        white-space: nowrap;
    }

/* mail template end */


.placeholder {
    opacity: 0.1;
}

/* loader card  */
.skeletonCardHeader {
    display: flex;
    justify-content: space-between;
    padding: 8px;
}

    .skeletonCardHeader > .skeletonCardHeaderLeft {
        flex: 1;
        display: flex;
        gap: 5px;
    }

    .skeletonCardHeader > .skeletonCardHeaderRight {
        width: 60px;
        border-radius: 4px;
    }

.checkbox.placeholder {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.skeletonTitle.placeholder {
    width: 70%;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.skeletonCardBody {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.skeletonCardBodyItem {
    width: 80%;
    border-radius: 4px;
    height: 25px;
}

.skeletCardChipContainer {
    display: flex;
    gap: 6px;
}

.chip.placeholder {
    width: 60px;
    height: 25px;
    border-radius: 12px;
}


.chipMore.placeholder {
    border-radius: 50%;
    width: 25px;
    height: 25px;
}


.skeletonCardFooter {
    border-top: solid 1px #ddd;
    margin-top: 10px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    height: 40px;
}

    .skeletonCardFooter > .skeletonCardFooterRight,
    .skeletonCardFooter > .skeletonCardFooterLeft {
        width: 100px;
        border-radius: 4px;
        height: 100%;
    }


/* loader card end  */

/* list loader  */
.fileUpoadListLoaderContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 15px 0px;
}

.fileUpoadListLoader {
    padding: 6px;
    border-radius: 4px;
    background-color: var(--light-blue-tint);
    /* border: 1px solid var(--border-color); */
    margin-bottom: 3px;
    display: flex;
    gap: 8px;
    align-items: center;
}

    .fileUpoadListLoader .file {
        height: 20px;
        width: 18px;
        border-radius: 4px;
    }

    .fileUpoadListLoader .mainSec {
        flex: 1;
        height: 20px;
        border-radius: 4px;
    }

    .fileUpoadListLoader .lastSec {
        height: 20px;
        width: 60px;
        border-radius: 4px;
    }
/* list loader end */


/* conver item loader  */
.coverItemLoaderContainer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 15px 0px;
}

.coverItemLoader {
    width: 100%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    background-color: var(--white-bg);
    border-radius: 10px;
    box-shadow: 0 0 15px var(--login-shadow);
    position: relative;
    gap: 15px;
    justify-content: space-between;
}

    .coverItemLoader .leftSection {
        display: flex;
        gap: 15px;
        align-items: center;
        width: 40%;
    }

    .coverItemLoader .secOne {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

        .coverItemLoader .secOne .iconLoader {
            width: 40px;
            height: 25px;
            border-radius: 4px;
        }

        .coverItemLoader .secOne .labelLoader {
            width: 50px;
            height: 10px;
            border-radius: 4px;
        }

    .coverItemLoader .secTwo {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
    }

        .coverItemLoader .secTwo .titleLoader {
            width: 60%;
            height: 20px;
            border-radius: 4px;
        }

        .coverItemLoader .secTwo .descLoader {
            width: 100%;
            height: 10px;
            border-radius: 4px;
        }

    .coverItemLoader .rightSec {
        display: flex;
        gap: 15px;
        align-items: center;
        width: 30%;
    }

        .coverItemLoader .rightSec .first {
            flex: 1;
            height: 30px;
            border-radius: 4px;
        }

.coverItemLoaderTitle {
    display: flex;
    gap: 5px;
}

.coverItemLoaderTitle {
    display: flex;
    gap: 10px;
    padding: 5px;
    position: absolute;
    left: 10px;
    top: 10px;
}

    .coverItemLoaderTitle .title {
        width: 200px;
        height: 30px;
        border-radius: 4px;
    }

    .coverItemLoaderTitle .count {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

.converItemContainerBorder {
    border: solid 1px var( --border-color) !important;
    border-top: solid 4px var( --border-color) !important;
    border-radius: 10px;
    border-right: solid 1px var( --border-color) !important;
}
/* conver item loader end */

/* General company settings  */
.companySettings .companyName {
    font-size: 22px;
    font-weight: 600;
    margin: 0px;
}

.companySettings .companyMail {
    font-size: 14px;
}

.companySettings .mailDivider {
    background-color: var(--text-primary);
    width: 1px;
    height: 14px;
}

.companySettings .planTitle {
    font-size: 13px;
    font-weight: 400;
}

.companySettings .planCard {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    padding: 2px 10px;
}

.companySettings .planDetailCard {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

    .companySettings .planDetailCard .name {
        font-size: 13px;
        font-weight: 300;
    }

    .companySettings .planDetailCard .value {
        font-size: 13px;
        font-weight: 600;
    }

.companySettings .profile {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0px 0 15px var(--login-shadow);
    position: relative;
}

.companySettings .profileImage {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

    .companySettings .profileImage > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
        transition: opacity 0.3s ease;
    }

.companySettings .profileUploadImg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.companySettings .profile:hover .profileImage {
    opacity: 0;
}

.companySettings .profile:hover .profileUploadImg {
    opacity: 1;
}

.companySettings .profile:active {
    filter: brightness(0.9);
}

.companySettings .bi-camera {
    font-size: 20px;
    margin-bottom: -8px;
}

.companySettings .storageContainer {
    margin-top: 20px;
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}

.companySettings .percentage {
    color: var(--color-light-gray);
}

.companySettings .storageCardContainer {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
    grid-gap: 10px;
}

.companySettings .storageCard {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 20px;
}

.companySettings .storageValue {
    color: var(--color-light-gray);
    font-size: 10px;
    margin-top: 8px;
}

.companySettings .storageCardName {
    font-size: 13px;
    font-weight: 500;
}

.companySettings .storageCardValue {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-light-gray);
}

.companySettings .storageCardIcon {
    background-color: #EBFFF4;
    color: #20C997;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .companySettings .storageCardIcon i {
        font-size: 18px;
    }

    .companySettings .storageCardIcon.delete {
        background-color: #FEF5ED;
        color: #FF5630;
    }

    .companySettings .storageCardIcon.unused {
        background-color: #F4F4F4;
        color: #161C24;
    }

.companySettings .deleteContainer {
    font-size: 14px;
    font-weight: 300;
}

.companySettings .detailsFieldContainer {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
}

.companySettings .detailsLabel {
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 2px;
}
/* General company settings end */

/* Progress  */
.progress-container {
    width: 100%;
    height: 6px;
    border-radius: 90px;
    margin: 10px 0;
    overflow: hidden;
    display: flex;
}

.progress-segment {
    height: 100%;
}

.legend-container {
    display: flex;
    gap: 24px;
    margin-top: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.green-progress {
    background-color: #21C063;
}

.red-progress {
    background-color: #FF5630;
}

.gray-progress {
    background-color: #F3F3F3;
}

.legend-label {
    font-size: 14px;
    font-weight: 500;
}
/* Progress end  */

/* Licensing  */
.licensing .renewContainer {
    background-color: var(--light-gray);
    padding: 15px 20px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
}

    .licensing .renewContainer > a {
        color: var(--primary-color);
    }

.licensing .planContainer {
    margin: 0px auto;
    width: 100%;
    max-width: 900px;
    box-shadow: 0px 0 15px var(--login-shadow);
    border-radius: 8px;
}

.licensing .colContainer {
    padding: 25px 20px;
}

    .licensing .colContainer.leftSide {
        border-left: 2px solid var(--light-gray);
    }

.licensing .whatsIncluded {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 400;
}

    .licensing .whatsIncluded i {
        display: inline-block;
        margin-right: 3px;
    }

.licensing .includedList {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
}

    .licensing .includedList i {
        color: var(--primary-color);
        font-size: 20px;
    }

.licensing .planTitle {
    font-weight: 700;
    margin: 0;
}

.licensing .logoContainer {
    background-color: var(--light-gray);
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.licensing .logoLetterContainer {
    background-color: var(--white-bg);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.licensing .planDetailContainer {
    margin-top: 6px;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.licensing .usersContainer {
    width: 73px;
    height: 73px;
    background-color: var(--primary-color);
    color: #fff;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 13px;
}

    .licensing .usersContainer span {
        line-height: 1;
    }

.licensing .usersNumber {
    font-size: 16px;
    font-weight: 700;
}

.licensing .planPrice {
    font-size: 30px;
    font-weight: 700;
}

.licensing .planValidity {
    font-size: 13px;
    color: var(--color-light-gray);
}

.licensing .addUpContainer {
    background-color: var(--primary-light);
    margin-top: 15px;
    border-radius: 6px;
    padding: 25px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .licensing .addUpContainer strong {
        font-weight: 600;
    }

.licensing .bulbIcon {
    display: inline-block;
    margin-top: -4px;
    margin-right: 4px;
}

.licensing .mainContainer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Licensing end */

/* Choose plan */
.choosePlan .planTitleContainer {
    background-color: var(--light-gray);
    padding: 15px 20px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
}

.choosePlan .discountContainer {
    border-radius: 6px;
    color: #0D97E3;
    background-color: #EEF8FF;
    font-weight: 600;
    font-size: 1rem;
    padding: 8px 16px;
}

.choosePlan .planContainer {
    margin-top: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px;
}

.choosePlan .billCycleContainer {
    border: 1px solid var(--border-color);
    border-radius: 22px;
    font-size: 12px;
    color: var(--color-light-gray);
    font-weight: 300;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 18px;
    font-weight: 600;
}

    .choosePlan .billCycleContainer .active {
        color: var(--text-primary);
        transform: scale(1.1);
    }

.choosePlan .planTypeContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* Key for equal width */
    gap: 20px;
    max-width: 1000px;
    margin: 35px auto 0px auto;
    align-items: start;
}

    .choosePlan .planTypeContainer > div {
        margin-top: 60px;
    }

        .choosePlan .planTypeContainer > div.popularContainer {
            margin: 0px;
        }

.choosePlan .includedList {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
}

    .choosePlan .includedList i {
        color: var(--primary-color);
        font-size: 20px;
    }

.choosePlan .whatsIncluded {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
}

    .choosePlan .whatsIncluded i {
        display: inline-block;
        margin-right: 3px;
    }

.choosePlan .planCard {
    box-shadow: 0px 0 15px var(--login-shadow);
    border-radius: 20px;
    padding: 50px 30px;
}

.choosePlan .popularContainer {
    box-shadow: 0px 0 15px var(--login-shadow);
    border-radius: 20px;
}

.choosePlan .popularTitle {
    color: #fff;
    border-radius: 20px 20px 0px 0px;
    background: linear-gradient(91.45deg, #28B24B 40.38%, #0D97E3 98.77%);
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    font-size: 19px;
    font-weight: 700;
}

.choosePlan .popular {
    border-radius: 0px;
    box-shadow: none;
}

.choosePlan .logoContainer {
    background-color: var(--light-gray);
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.choosePlan .logoLetterContainer {
    background-color: var(--white-bg);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.choosePlan .planTitle {
    font-weight: 700;
    margin: 0;
}

.choosePlan .additionalDetails {
    font-size: 14px;
    color: var(--color-light-gray);
    margin-top: 16px;
    max-width: 195px;
}

.choosePlan .priceTitle {
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.choosePlan .userNumDetails {
    font-size: 13px;
    font-weight: 500;
    color: var(--sky-blue);
}

.choosePlan .subTitle {
    font-size: 14px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 10px;
}

.choosePlan .cardBtn {
    border-radius: 70px;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 12px;
}

/* Choose plan end */

/* Toggle Switch  */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    cursor: pointer;
}

.toggle-switch-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #28B24B;
    border-radius: 24px;
    transition: 0.4s;
}

.toggle-switch-handle {
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

.toggle-switch.right .toggle-switch-handle {
    transform: translateX(14px);
}
/* Toggle Switch end  */
.vh-85 { 
height: 85vh;
}

.noteDIv {
    display: grid;
    grid-template-columns: 30px auto;
    color: var(--disableText);
}
.noteDIv i {
    font-size: 20px;
    color: var(--color-green);
}
.permission-box.protected {
    background-color: #f3e3b9; /* Soft yellowish background */
    color: #9C6C00;            /* Dark golden text */
}


/* media query */

@media (min-width:2600px) {
    .footer-float, .paginationBox {
        width: 90.5%;
    }
}

@media (min-width:2400px) {
    .footer-float, .paginationBox {
        width: 90%;
    }

    .card-footer .paginationBox {
        width: 50%;
    }
}

@media (min-width:2250px) {
    .footer-float, .paginationBox {
        width: 89%;
    }
}

@media (max-width:2200px) {
    body:has(#sidebar) .footer-float, .paginationBox {
        width: 94.5%;
    }

    body:has(#sidebar.expand) .footer-float, .paginationBox {
        width: 87.5%;
    }
}

@media (min-width:2060px) {
    .footer-float, .paginationBox {
        width: 87.5%;
    }
}

@media (min-width:2000px) {
    .card-footer .paginationBox {
        width: 49%;
    }
}

@media (min-width:1400px) and (max-width:2000px) {
    body {
        font-size: 15px;
    }

    .uploading-singleItem .fileDetails .fileName {
        font-size: 14px;
    }
}

@media (max-width:1920px) {
    body:has(#sidebar) .footer-float, .paginationBox {
        width: 98%;
    }

    body:has(#sidebar.expand) .footer-float, .paginationBox {
        width: 86%;
    }

    .footer-float, .paginationBox {
        width: 86.5%;
    }
}

@media (max-width:1800px) {
    body:has(#sidebar.expand) .footer-float, body:has(#sidebar.expand) .paginationBox {
        width: 83%;
    }

    body:has(#sidebar) .footer-float, body:has(#sidebar) .paginationBox {
        width: 92.3%;
    }

    .card-footer .paginationBox {
        width: 48%;
    }
}

@media (min-width:1700px) {
    .card-footer .paginationBox {
        width: 47%;
    }
}

@media (max-width:1500px) {
    .footer-float, .paginationBox {
        width: 82%;
    }
}

@media (min-width:1500px) {
    .tab-content {
        min-height: 80vh;
    }

    .fileViewminHeight {
        height: 650px;
    }
}

@media (max-width:1440px) {
    .chartHeight {
        height: auto !important;
        width: 100% !important;
    }

    .height-fix {
        height: 380px !important;
    }
}

@media (max-width:1400px) {
    body:has(#sidebar.expand) .footer-float, body:has(#sidebar.expand) .paginationBox {
        width: 91%;
    }

    body:has(#sidebar) .footer-float, body:has(#sidebar) .paginationBox {
        width: 80%;
    }
}

@media screen and (max-width:1440px) {
    .modal-body .permission-inner-div {
        width: 300px;
        display: inline-block;
        margin-right: 8px;
    }
}

@media (max-width:1366px) {
    .listingCard .folder-listing {
        width: 31.5%;
    }

    body:has(#sidebar.expand) .footer-float, body:has(#sidebar.expand) .paginationBox {
        width: 81%;
    }

    body:has(#sidebar) .footer-float, body:has(#sidebar) .paginationBox {
        width: 91.3%;
    }
}

@media (max-width:1320px) {
    .card-footer .paginationBox {
        flex-flow: column;
        text-align: center;
    }

    .paginationBox ul li:first-child {
        display: block;
    }
}

@media (max-width:1300px) {
    body:has(#sidebar.expand) .footer-float, body:has(#sidebar.expand) .paginationBox {
        width: 78%;
    }

    body:has(#sidebar) .footer-float, body:has(#sidebar) .paginationBox {
        width: 90%;
    }
}

@media (max-width:1200px) {
    .fileviewCon .property {
        width: 45%;
    }

        .fileviewCon .property .details {
            width: 100%;
        }

    .fileviewCon .details {
        width: 55%;
    }

    body:has(#sidebar.expand) .footer-float, body:has(#sidebar.expand) .paginationBox {
        width: 75%;
    }

    body:has(#sidebar) .footer-float, body:has(#sidebar) .paginationBox {
        width: 90%;
    }

    body:has(#sidebar.expand) .fileUploadleftBox {
        display: flex;
        flex-flow: column;
        width: 100%;
    }

    body:has(#sidebar.expand) .fileUploadrightBox {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 55;
        background-color: #fff;
        width: 300px;
    }

    .fileDetailsCol {
        height: auto;
    }

    .fileDetailsContainer {
        overflow-y: auto !important;
    }

    .departModalBody {
        height: calc(100vh - 300px);
        overflow: auto;
        flex-direction: column;
    }

        .departModalBody > :first-child,
        .departModalBody > :nth-child(3) {
            height: auto;
            overflow: visible;
        }

        .departModalBody > :nth-child(2) {
            flex-direction: column;
        }

            .departModalBody > :nth-child(2) > button {
                rotate: 90deg;
            }

    .choosePlan .planTypeContainer {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

        .choosePlan .planTypeContainer > div {
            margin-top: 0px;
        }
}


@media (max-width:1200px) and (max-height: 700px) {
    .departModalBody {
        height: calc(100vh - 200px);
    }
}

@media screen and (max-width:1150px) {
    .modal-body .permission-inner-div {
        width: 48%;
        display: inline-block;
        margin-right: 8px;
    }

    .multisteps-form__progress {
        width: 80%
    }
}

@media (max-width:1147px) {
    .firstSection.disabled {
        width: 60%;
    }
}

@media (max-width:1145px) {
    .paginationBox {
        flex-flow: column;
    }

    .folder-listing {
        width: 100%;
    }
}

@media (max-width:1100px) {
    .paginationBox {
        flex-flow: column;
    }
}


@media (max-width:1025px) {
    .fileSettings {
        display: flow;
    }

    .rightWingmenu {
        flex-flow: column;
    }

    .fileOptions {
        border-right: none
    }

    .strokebtn {
        margin: 3px 3px;
        vertical-align: middle;
        display: inline-block;
    }
}

@media (max-width:1024px) {
    .permissionBoxes {
        width: 100%
    }
}

@media (min-width: 992px) {

    .modal-lg-md {
        --bs-modal-width: 60%;
    }

    .licensing .mainContainer {
        grid-template-columns: 55% 45%;
        /* Left 55%, right 5% */
    }
}

@media (max-width:992px) {
    body:has(#sidebar) .card-footer .paginationBox {
        width: 87.5%;
    }

    body:has(#sidebar.expand) .card-footer .paginationBox {
        width: 72.5%;
    }

    .paginationBox {
        flex-flow: row !important;
    }

    .mobile-show {
        display: block;
        margin-top: 10px;
    }

    .web-show, .web-show-inline {
        display: none
    }

    .modal-body .permission-inner-div {
        width: 99%;
        display: inline-block;
        margin-right: 8px;
    }

    .permision-bg {
        padding-bottom: 45px !important;
    }

    .customGridBody {
        display: flex;
        flex-flow: column;
    }
}

@media (max-width:991px) {
    .portViewminHeight .form-control {
        width: 100% !important;
    }

    .portViewminHeight img {
        display: block;
        margin: 2px auto;
        margin-right: auto !important;
    }

    .portViewminHeight a.trash {
        width: 100%;
        text-align: center;
        background-color: #fff1f1;
        padding: 3px;
        border-radius: 5px;
        margin: 2px
    }
}

@media(max-width:981px) {
    .login-form-cover {
        padding: 10px;
        border-radius: 20px;
    }

    [data-bs-theme="dark"] .login-form-cover {
        background-color: #32363a;
        padding: 10px;
        border-radius: 20px;
    }

    .list-view-filter .folder-listing.card {
        display: flex;
        flex-flow: column;
    }

    .folder.card {
        margin-bottom: 10px;
    }

    body:has(#sidebar.expand) .footer-float, body:has(#sidebar.expand) .paginationBox {
        width: 73%;
    }

    body:has(#sidebar) .footer-float, body:has(#sidebar) .paginationBox {
        width: 89%;
    }

    .timelineTree .steps {
        width: 100%;
        position: relative;
    }

        .timelineTree .steps:not(:last-child):after {
            position: absolute;
            z-index: 0;
            content: "";
            border-left: dashed 1px var(--primary-color);
            top: 25px;
            width: 2px;
            left: 8px;
            height: 84%;
        }

        .timelineTree .steps:last-child:after {
            display: none;
        }

        .timelineTree .steps:has(.disabled):after {
            position: absolute;
            z-index: 0;
            content: "";
            border-left: dashed 1px #CCD3DE;
            top: 25px;
            width: 2px;
            left: 8px;
            height: 84%;
        }

    .timelineTree .timelineIcon {
        margin-left: -21px;
    }
}

@media screen and (max-width: 980px) {
    .login-cover {
        justify-content: center;
        align-items: center;
        flex-flow: column;
        height: auto;
    }

    .login-system-img {
        display: none;
    }

    .login-right {
        width: 100%
    }

    .login-left {
        display: none;
    }

        .login-left img {
            width: 50%;
        }

    .login-logo img {
        height: 120px
    }

    .login-form-cover h1 {
        font-size: 30px;
    }

    .login-form-cover h5 {
        font-size: 14px;
    }

    .logo-login-responsive {
        display: flex;
        justify-content: center;
        padding: 50px 0;
    }

        .logo-login-responsive img {
            height: 50px;
        }

    .error-cover {
        flex-flow: column;
        margin: 20px 2%;
    }

    .error-left {
        width: 90%;
    }

    .error-right {
        width: 90%;
    }

        .error-right h1 {
            margin: 15px 0;
        }

    .error-left img {
        width: 300px;
    }

    .multisteps-form__progress {
        width: 100%
    }
}


@media (max-width:960px) {
    .verticalTab .verticalBox .tab.border-red.active h2, .verticalTab .verticalBox .tab.border-yellow.active h2, .verticalTab .verticalBox .tab.border-blue.active h2, .verticalTab .verticalBox .tab.border-orange.active h2 {
        padding-left: 10px;
    }

    .verticalTab {
        display: flex;
    }

        .verticalTab .verticalBox {
            display: block;
        }

            .verticalTab .verticalBox .tab h2 {
                writing-mode: horizontal-tb;
                padding: 6px 10px;
                font-size: 15px;
            }

            .verticalTab .verticalBox .tab.active {
                min-height: 500px;
                overflow: auto;
            }

                .verticalTab .verticalBox .tab.active .innerContent {
                    padding-bottom: 15px;
                }

            .verticalTab .verticalBox .tab {
                min-height: auto;
                height: inherit;
                min-height: 45px;
                margin: 5px 0px;
            }

                .verticalTab .verticalBox .tab.border-orange h2, .verticalTab .verticalBox .tab.border-blue h2, .verticalTab .verticalBox .tab.border-yellow h2, .verticalTab .verticalBox .tab.border-red h2 {
                    padding: 8px 10px;
                    margin-left: 5px;
                }

                .verticalTab .verticalBox .tab h2 {
                    padding-top: 0 !important
                }

                    .verticalTab .verticalBox .tab.active h2 span, .verticalTab .verticalBox .tab h2 span {
                        margin-top: 0;
                        font-size: 12px;
                        background-color: transparent;
                        width: inherit;
                        height: inherit;
                        line-height: inherit;
                        color: #000;
                        margin-left: 10px;
                        padding: 3px;
                        font-weight: 500;
                    }

                .verticalTab .verticalBox .tab.active h2 span {
                    color: #000;
                    min-width: 25px;
                    height: 25px;
                    line-height: 21px;
                }

    .coverItem {
        display: flex;
        flex-flow: column;
        align-items: flex-start;
    }

        .coverItem .conItem, .coverItem .statusItem, .coverItem .optionItem {
            width: 100%;
            margin: 2px 0;
            text-align: left;
        }

    .coverItemLoader .leftSection {
        flex-direction: column;
        align-items: start;
    }

    .coverItemLoader .secTwo {
        width: 100%;
    }

        .coverItemLoader .secTwo .titleLoader {
            width: 80%;
            max-width: 200px;
        }

        .coverItemLoader .secTwo .descLoader {
            width: 100%;
            max-width: 300px;
        }

    .coverItemLoader {
        flex-direction: column;
        align-items: start;
    }

        .coverItemLoader .rightSec {
            flex-direction: column;
            width: 100%;
            max-width: 200px;
            flex: none;
        }

            .coverItemLoader .rightSec .first {
                width: 100%;
            }
}

@media (max-width:945px) {
    body:has(#sidebar) .card-footer .paginationBox {
        width: 87%;
    }

    body:has(#sidebar.expand) .card-footer .paginationBox {
        width: 71%;
    }

    .paginationBox {
        flex-flow: column !important;
        text-align: center;
    }
}


@media screen and (max-width:900px) {
    .file-upload-cover {
        flex-flow: column;
    }

    body:has(#sidebar.expand) .footer-float, body:has(#sidebar.expand) .paginationBox {
        width: 69%;
    }

    body:has(#sidebar) .footer-float, body:has(#sidebar) .paginationBox {
        width: 86%;
    }
}

@media (max-width:891px) {
    .fileviewCon {
        display: block;
    }

        .fileviewCon .property {
            width: 100%;
        }

        .fileviewCon .details {
            width: 100%;
        }
}

@media (max-width:885px) {
    .listingCard .folder-listing {
        width: 48%;
    }
}

@media (max-width:820px) {
    body:has(#sidebar) .card-footer .paginationBox {
        width: 87%;
    }

    body:has(#sidebar.expand) .card-footer .paginationBox {
        width: 67%;
    }
}

@media (max-width:801px) {
    .navbar-nav button {
        min-width: 125px;
    }

    .navbar-expand .navbar-nav {
        flex-direction: row;
        flex-flow: wrap;
    }

    .nav-item {
        margin-bottom: 10px;
    }

    .search {
        margin-bottom: 10px;
    }

    #sidebar.expand {
        width: 200px;
        min-width: 200px;
    }
}

@media (max-width:781px) {
    .folder .card-header {
        flex-flow: column;
        align-items: flex-start;
    }

    .fileOptions {
        flex-flow: wrap;
    }

    .folder-listing {
        width: 100%;
    }

    .folder .card-body.vh-75 {
        min-height: auto !important;
    }
}

@media (max-width:769px) {
    body:has(#sidebar.expand) .card-footer .paginationBox {
        width: 85%;
    }

    body:has(#sidebar) .card-footer .paginationBox {
        width: 95%;
    }

    .paginationBox div {
        display: none;
    }

    body:has(#sidebar.expand) .footer-float, body:has(#sidebar.expand) .paginationBox {
        width: 95%;
    }

    body:has(#sidebar) .footer-float, body:has(#sidebar) .paginationBox {
        width: 95%;
    }
}

@media (min-width: 768px) {
    .licensing .mainContainer {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:768px) {
    .singleFile {
        margin-bottom: 10px;
    }

    .uploadedFile {
        margin-bottom: 10px !important;
    }

    .navbar from {
        max-width: 320px;
    }

    .input-group-navbar .form-control:focus {
        outline: none;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
        border: none;
    }

    .input-group-navbar .form-control {
        color: #333;
    }

    .form-control::placeholder {
        background-color: transparent;
    }

    .input-group-navbar .btn {
        background-color: #3b7ddd;
        color: #fff;
        cursor: pointer;
        z-index: 10000;
    }

    .navbar-expand .navbar-nav .dropdown-menu {
        box-shadow: 0 .1rem .2rem rgba(33, 37, 41, .1);
    }

    #sidebar.expand {
        position: absolute;
        height: 100vh;
    }

    .search-txt {
        width: 175px;
    }

    .fileviewHeader {
        flex-flow: column;
    }

        .fileviewHeader .innerOptions {
            width: 100%;
        }

    .portfolio-permission .permission-cover .permission-inner-div {
        width: 100%;
    }

    .color-remove-select .vs__dropdown-toggle {
        background: transparent;
        margin: 0 0px 3px 0;
    }

    .permision-bg .row:nth-child(odd) {
        background-color: #f7f7f7;
        padding: 5px;
    }

    .permissionBoxes .imgBox {
        display: none;
    }

    .permissionBoxes:nth-child(even) .imgBox {
        display: none;
    }
}

@media(max-width:767px) {
    .width-reducer {
        max-width: 90%;
        min-width: 90%;
    }

    .permission-top-alert {
        width: 80%
    }

    .permissionBoxes .permissionCon .permissionItem li {
        flex-flow: column;
        border-bottom: solid 1px #ddd;
    }

    .permissionItem li div.permissionLeft {
        width: 100%;
    }

    .permissionItem li div.permissionOption {
        text-align: center;
        width: 100%;
        background-color: #ededed;
        padding: 5px 0;
    }

    .permissionBoxes:nth-child(even) .permissionCon .footerPermission {
        text-align: center;
        padding-right: 10px;
        padding-left: 20px;
    }

    .permissionBoxes .permissionCon .footerPermission {
        text-align: center;
    }

    .storageLine {
        display: none;
    }

    .masterHeadCover {
        display: block;
    }

        .masterHeadCover .leftBox {
            width: 100%;
        }

            .masterHeadCover .leftBox div:first-child {
                display: block !important;
            }

                .masterHeadCover .leftBox div:first-child h4 small {
                    display: block;
                }

        .masterHeadCover .rightBox {
            width: 100%;
        }
}

@media (max-width:764px) {
    .coverItem .conItem .listing-details {
        flex-flow: column;
        justify-content: flex-start;
        text-align: left;
        align-items: flex-start;
    }
}

@media (max-height: 700px) {
    .departModalBody > :first-child,
    .departModalBody > :nth-child(3) {
        height: calc(100vh - 200px);
    }
}

@media screen and (max-width: 640px) {
    .login-right {
        width: 100%;
    }

    .login-left img {
        width: 80%;
    }

    .error-right h1 {
        font-size: 35px;
    }
}

@media (max-width:602px) {
    .listingCard .folder-listing {
        width: 100%;
    }

    .folder-listing .card-body {
        min-height: inherit;
    }
}

@media (max-width:550px) {
    .progressdiv {
        width: 38%;
    }

    .progress {
        min-width: 150px;
    }
}

@media (max-width:500px) {
    /* .multisteps-form__progress {
  display: none;
} */
    .multisteps-form__progress-btn {
        text-indent: 0;
    }

    .card-header .search-bar input {
        width: 100%;
    }

    .fileOptions .me-3 {
        margin-bottom: 5px;
    }

    .strokebtn {
        margin-bottom: 5px;
    }

    .caret p, .listParent p {
        width: 70%;
    }

    #sidebar {
        width: 50px;
        min-width: 50px;
    }

    .sidebar-nav {
        padding: 1rem 0rem;
    }

    nav.navbar {
        padding: 10px 5px !important
    }

    .container-fluid {
        padding: 5px 0px;
    }

    .spaceUtilizeation {
        flex-flow: wrap
    }

        .spaceUtilizeation .utilizationBox:after {
            display: none
        }

        .spaceUtilizeation .utilizationBox {
            width: 49%;
            margin: 0;
            margin-bottom: 10px;
        }

    .recentList {
        max-height: 316px;
    }

        .recentList li {
            height: 60px
        }

    .rightWingmenu {
        display: none
    }

    .tab-content {
        padding: 10px 0px;
    }

    .listingCard .folder-listing {
        width: 96%;
    }

    .folder-listing .card-body {
        min-height: auto;
    }

    .listingCard .folder-listing {
        min-height: auto
    }

    .listing-title .listing-details {
        color: #000;
        display: flex;
        flex-flow: wrap;
    }

    .premissionGrid {
        display: flex;
        flex-flow: wrap;
    }

    .fileuploadmainCover {
        flex-flow: column;
    }

        .fileuploadmainCover .fileUploadleftBox {
            width: 100%
        }

        .fileuploadmainCover .fileUploadrightBox {
            width: 100%;
        }

    .uploadgroupBox {
        flex-flow: column
    }

    .file-drop-area {
        min-width: 100%;
        margin-bottom: 10px;
    }

    .importFilebtn {
        width: 100%
    }

    body:has(#sidebar) .footer-float, body:has(#sidebar) .paginationBox {
        width: 84%;
    }

    .permissionBoxes:nth-child(even) {
        margin: 20px 0
    }

    .permissionBoxes .permissionCon .footerPermission a {
        padding: 5px
    }

        .permissionBoxes .permissionCon .footerPermission a i {
            display: none;
        }

    .multisteps-form__panel {
        padding: 5px !important
    }

    fieldset legend {
        left: 10%;
        translate: -10%;
    }
}

@media screen and (max-width: 480px) {
    .login-form-cover {
        width: 95%;
    }

    .login-form-inner-cover {
        padding: 20px 20px;
    }
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 15px;
        }
}

@media (min-width:320px) {
    .navbar-expand {
        flex-wrap: wrap !important;
    }

    .modal-lg-md {
        --bs-modal-width: 95%;
    }
}
/* 
@media (max-width:591px) {
  @media (max-width: 1366px) {
}
} */