/*
html {filter: invert(1);}
img, button,svg {filter: invert(1);}
 */
/* HTML: <div class="loader"></div> */
span.notifications {
    position: absolute;
    top: 50%;
    right: 13px;
    font-size: 1rem!important;
    background-color: var(--bs-primary-400)!important;
    color: white!important;
    min-width: 13px;
    text-align: center;
    border-radius: 2px;
    padding: 2px;
    transform: translate(0px, -50%);
}

.my-profile span.notifications {
    top: -6px;
    right: -5px;
}

.customize-btn-shadow {
}

.customize-btn-shadow button {
    margin: unset!important;
    border-radius: 8px!important;
    text-align: center;
}

.customize-btn-shadow i {
    margin-left: 10px;
}

#fluid .select-input {
    width: 10px!important;
    max-width: 10px!important;
}

#fluid .new-data-row td:nth-child(1) {
    max-width: 30px!important;
    width: 30px!important;
}

#fluid .btn[data-widget=pushmenu] {
    width: 30px;
    padding: 4.5px 5px 5.5px 5px;
    border: 1px solid var(--Videntium-Blue-Videntium-100, #CBD6E2);
    background: var(--Videntium-Blue-Videntium-50, #EEF1F5);
    line-height: 1;
}

i#add-member {
    width: 20px;
    height: 100%;
    text-align: center;
}

.loader {
    width: 200px;
    height: 200px;
    clip-path: inset(-40px 0 -5px);
    position: absolute!important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
    background-image: url('/dist/img/loading.gif')!important;
    background-size: contain!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    font-size: 0px;
}

.dataTables_wrapper .dataTables_processing {
    height: 150px;
    clip-path: inset(-40px 0 -5px);
    position: absolute!important;
    left: 50%;
    top: 50%;
    transform: translate(0px, -50%);
    z-index: 9999999;
    background-image: url('/dist/img/loading.gif')!important;
    background-size: contain!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    font-size: 0px;
    filter: opacity(0.8);
    border-radius: 37px;
}

.select-control {
    font-size: 0px!important;
}

/*
#fluid div#t_processing {
    max-width: 200px;
    line-height: 0;
    padding: 20px;
    border-radius: 20px;
    margin: auto;
    display:block!important;
    z-index:9999;
    overflow: hidden;
}
#fluid div#t_processing:after {
    content:"";
    animation-delay: 11s;
    animation-name: loading!important;
    animation-duration: 5s!important;
    animation-iteration-count: infinite!important;
    background-blend-mode: revert;
    mix-blend-mode: difference;
    display:block!important;
    position: absolute;
    background-color: #30618f;
    z-index: 99999;
    height: 10px;
    width: 100px;
    left: 0;
    border-radius: 5px;
}
*/
#fluid .gray-badge {
    display: flex;
    align-items: center;
    border-radius: 3px;
    background: #f0f6fb;
    color: var(--bs-primary-700-text-emphasis);
    width: fit-content;
    border: 1px solid var(--bs-primary-100);
    padding: .25rem;
    font-size: .756rem;
}

li.projectChangeButton.cursor-pointer {
    position: absolute;
    left: 15px;
    bottom: 30px;
    font-size: 1rem;
    list-style: none;
    text-align: center;
    color: var(--bs-primary-700);
    padding: 10px;
    border-radius: 20px;
    display: block;
    width: 77%;
    font-weight: bold;
    z-index: 9;
    background-color: #fcfcfd;
}

li.projectChangeButton.cursor-pointer .changeButton {
    display: flex;
    align-items: center;
    gap: 5px;
}

.modal-dialog.modal-dialog-centered {
    max-width: 800px;
    width: 50%;
}

.modal-backdrop.fade.show {
    z-index: 2003;
}

.modal {
    z-index: 2004;
}

li.projectChangeButton.cursor-pointer > span {
    display: inline-block;
    border-radius: 10px;
    color: var(--bs-primary-600);
    font-size: 1.5rem;
}

li.projectChangeButton.cursor-pointer ul:before {
    content: "";
    width: 20px;
    height: 20px;
    border-left: 10px solid transparent;
    display: block;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--bs-primary-800);
    position: absolute;
    bottom: -20px;
}

li.projectChangeButton.cursor-pointer ul:before {
    content: "";
    width: 20px;
    height: 20px;
    border-left: 10px solid transparent;
    display: block;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--bs-gray-100);
    position: absolute;
    bottom: -20px;
}

li.projectChangeButton.cursor-pointer ul a.all-project {
    text-decoration: none;
    color: var(--bs-primary-600);
    width: 100%;
    text-align: right;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    font-size: 1rem;
    align-items: center;
}

li.projectChangeButton.cursor-pointer ul {
    display: none;
    list-style: none;
    background-color: var(--bs-gray-100);
    border-radius: 4px;
    width: 321px;
    height: 360px;
    color: white;
    margin-top: -402px;
    filter: drop-shadow(2px 4px 6px #9994);
    text-align: left;
    padding: 21px;
    margin-left: 42px;
    border-radius: 19px;
    position: relative;
    z-index: 9999;
}

li.projectChangeButton.cursor-pointer ul li {
    border: 1px solid var(--bs-gray-200);
    margin: 10px 10px;
    font-size: .8rem;
    padding: 4px;
    display: flex;
    gap: 20px;
    align-items: center;
}

li.projectChangeButton.cursor-pointer ul li.current {
    background-color: var(--bs-gray-500);
    color: white;
}

li.projectChangeButton.cursor-pointer ul a {
    text-decoration: none;
    color: var(--bs-gray-700);
}

li.projectChangeButton.cursor-pointer ul h4 {
    margin: 10px!important;
}

li.projectChangeButton.cursor-pointer ul li .projectPhoto {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    filter: drop-shadow(2px 4px 6px #9992);
    color: white;
}

li.projectChangeButton.cursor-pointer ul h4, .projectItem span {
    font-size: .8rem;
    color: var(--bs-primary-500);
    margin: 10px 0px;
}

div#user-list {
    position: absolute;
    top: -356px;
    height: 365px;
    background-color: var(--bs-primary-400);
    overflow-y: auto;
    z-index: 9999;
    padding: 10px;
    border: 1px solid var(--bs-primary-50);
    border-radius: 10px;
    filter: drop-shadow(2px 4px 6px #0001);
    display: none;
    min-width: 501px;
}

div#user-list:before {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 0;
}

form#fSendMsg {
    position: relative;
}

.user-list img {
    border-radius: 14px;
    width: 20px;
    height: 20px;
}

.user-list > div {
    border-bottom: 1px solid var(--bs-gray-100);
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
}

input::placeholder, input {
    font-size: .87rem!important;
}

#fluid .gray-badge span {
    font-size: .8rem;
    margin-right: 2px;
}

#fluid td.dtfc-fixed-left {
    background-color: var(--bs-gray-50) !important;
    color: var(--bs-gray-700) !important;
    z-index: 88;
}

#fluid th.dtfc-fixed-left {
    background-color: #f2f4f7 !important;
    color: var(--bs-gray-700) !important;
    z-index: 88;
}

#fluid td.dtfc-fixed-left div {
    display: flex;
    align-items: center;
    gap: .4rem;
}

#fluid td.dtfc-fixed-left div i {
    font-size: 1rem;
}

tr.odd, tr.even {
    background: transparent;
    background-color: transparent;
}

.sX {
    min-width: 70px !important;
    max-width: 70px !important;
    width: 70px !important;
    vertical-align: middle !important;
}

.xX {
    min-width: 100px !important;
    max-width: 100px !important;
    width: 100px !important;
    vertical-align: middle !important;
}

.X {
    min-width: 150px !important;
    max-width: 150px !important;
    width: 150px !important;
    vertical-align: middle !important;
}

.XL {
    min-width: 200px !important;
    max-width: 200px !important;
    width: 200px !important;
    vertical-align: middle !important;
}

.XX {
    min-width: 250px !important;
    max-width: 250px !important;
    width: 250px !important;
    vertical-align: middle !important;
}

.XXL {
    min-width: 350px !important;
    max-width: 350px !important;
    width: 350px !important;
    vertical-align: middle !important;
}

/* Page & Sections */
.page-title {
    color: var(--bs-gray-800);
    font-weight: 600;
    line-height: 1rem;
    margin-bottom: 0;
    font-family: var(--bs-font-sans-serif);
    font-size: 1.2rem;
}

.documentModal {
    width: 100vw!important;
    height: 100vh!important;
}

.documentModal {
    width: 100vw!important;
    height: 100vh!important;
    top: 0;
    bottom: 0;
}

.documentModal .modal-dialog {
    width: 100vw!important;
    height: 100vh!important;
    padding: 0px!important;
    max-width: 100vw!important;
    margin: 0px;
}

.documentModal .modal-content {
    padding: 0px!important;
}

.documentModal .modal-content .card-header {
    display: none!important;
}

.documentModal .modal-content .closed-button {
    text-align: right;
    margin: 0px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 1.2rem;
}

/* GENERAL */
* {
    -webkit-font-smoothing: antialiased;
}

sup {
    font-size: 1.125rem;
    font-weight: bold;
    top: 2px;
    color: #bb254a;
}

.content-scroll {
    height: 100vh;
    overflow: auto;
    padding-bottom: 200px;
}

input {
    border: 1px solid transparent;
}

input:focus {
    box-shadow: 0px 0px 4px 3px rgba(117, 173, 222, 0.25)!important;
    border: 1px solid #2626260f !important;
}

input:focus-within {
    outline: none!important
}

#fluid a.paginate_button.current, #fluid a#t_previous, #fluid .dataTables_wrapper .dataTables_paginate .paginate_button, #fluid .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: transparent!important;
    color: var(--bs-primary-700)!important;
    border: none!important;
    padding: .4rem;
    margin-top: 12px;
}

a.paginate_button.current {
}

.dataTables_info {
    margin-top: 20px!important;
    font-size: .7rem!important;
}

.dataTables_info span {
    margin-left: 10px;
    font-weight: 400;
}

.dataTables_info span b {
    font-size: .9rem;
    color: var(--bs-body-bg);
    background: var(--bs-success-400-border-subtle);
    padding: 0px 4px;
}

#fluid a.paginate_button.current {
    border: none;
    font-weight: bold;
    font-size: 1rem!important;
    border-bottom: 1px solid;
}

, .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      background: unset!important;
      border: unset!important
  }

.percent-input-content {
    position: relative;
}

.percent-input-content span:before {
    content: "%";
    position: absolute;
    font-family: 'Inter',sans-serif;
    color: #98A2B3;
    top: 50%;
    transform: translate(10px, -50%);
    font-weight: bold;
}

.percent-input-content input {
    padding-left: 26px;
    color: #1D2939;
    font-weight: 500;
}

.percent-input-content input:placeholder {
    color: #1D2939;
    font-size: 2.5rem
}

#fluid .soft-badge-danger {
    border-radius: 4px!important;
    border: 1px solid rgba(187, 37, 74, 0.20)!important;
    background: rgba(187, 37, 74, 0.10)!important;
    color: #BB254A;
}

#fluid .soft-badge-danger:before {
    content: "";
}

#fluid .tags .btn {
    height: auto!important;
}

.tagContent .search-icon:before {
}

#fluid table td .btn {
    padding: .2rem .5rem;
    margin: .2rem 0px;
    font-size: .7rem!important;
}

#fluid table td .btn:before {
    font-size: 1.2rem!important;
}

#fluid .soft-badge-warning {
    border-radius: 4px!important;
    border: 1px solid rgba(241, 88, 43, 0.20)!important;
    background: rgba(241, 88, 43, 0.10)!important;
    color: #F1582B;
    max-width: 130px;
}

#fluid .soft-badge-primary {
    border-radius: 4px!important;
    border: 1px solid rgba(29, 78, 122, 0.20)!important;
    background: rgba(29, 78, 122, 0.05)!important;
    color: #2c567e;
}

#fluid .soft-badge-success {
    border-radius: 4px!important;
    border: 1px solid #52a89485!important;
    background: #52a89445 !important;
    color: #297a67;
    max-width: 130px;
}

#fluid .soft-badge-primary.download-button:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_676_33752)'%3E%3Cpath d='M15.8327 7.5H12.4993V2.5H7.49935V7.5H4.16602L9.99935 13.3333L15.8327 7.5ZM9.16602 9.16667V4.16667H10.8327V9.16667H11.8077L9.99935 10.975L8.19102 9.16667H9.16602ZM4.16602 15H15.8327V16.6667H4.16602V15Z' fill='%231D4E7A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_676_33752'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

#fluid .soft-badge-primary.view-button:before, .btn-primary.view-button:before {
    content: "visibility";
    color: var(--bs-primary-700);
}

.time-button:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_669_28220)'%3E%3Cpath d='M9.9915 1.66699C5.3915 1.66699 1.6665 5.40033 1.6665 10.0003C1.6665 14.6003 5.3915 18.3337 9.9915 18.3337C14.5998 18.3337 18.3332 14.6003 18.3332 10.0003C18.3332 5.40033 14.5998 1.66699 9.9915 1.66699ZM9.99984 16.667C6.3165 16.667 3.33317 13.6837 3.33317 10.0003C3.33317 6.31699 6.3165 3.33366 9.99984 3.33366C13.6832 3.33366 16.6665 6.31699 16.6665 10.0003C16.6665 13.6837 13.6832 16.667 9.99984 16.667ZM10.4165 5.83366H9.1665V10.8337L13.5415 13.4587L14.1665 12.4337L10.4165 10.2087V5.83366Z' fill='%231D4E7A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_669_28220'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")!important;
}

.comment-button:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_669_28222)'%3E%3Cpath d='M12.4998 3.33366V9.16699H4.30817L3.33317 10.142V3.33366H12.4998ZM13.3332 1.66699H2.49984C2.0415 1.66699 1.6665 2.04199 1.6665 2.50033V14.167L4.99984 10.8337H13.3332C13.7915 10.8337 14.1665 10.4587 14.1665 10.0003V2.50033C14.1665 2.04199 13.7915 1.66699 13.3332 1.66699ZM17.4998 5.00033H15.8332V12.5003H4.99984V14.167C4.99984 14.6253 5.37484 15.0003 5.83317 15.0003H14.9998L18.3332 18.3337V5.83366C18.3332 5.37533 17.9582 5.00033 17.4998 5.00033Z' fill='%231D4E7A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_669_28222'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")!important;
}

#fluid .soft-badge-button:before, #fluid .soft-badge-danger:before, #fluid .soft-badge-primary:before, #fluid .soft-badge-success:before, #fluid .soft-badge-warning:before, .soft-bage-content:before {
    font-family: 'Material Symbols Outlined'!important;
    line-height: 27px;
}

.soft-bage-content {
}

.soft-badge-button {
    font-size: .755rem!important;
    border-radius: 3px!important;
    cursor: unset;
    padding: .1rem .37rem!important;
    position: relative;
    height: unset!important;
    font-weight: 500;
    text-transform: capitalize;
    text-decoration: none;
}

td button {
    max-width: 200px;
}

#fluid .soft-badge-bg {
    position: absolute;
    width: 100%;
    display: block;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 8px;
}

#fluid .btn:not(.option, .dt-button) {
    border-radius: 8px!important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-height: 52px;
    margin: 2px;
    gap: .25rem;
    line-height: 20px;
}

#fluid .modal .btn:not(.dt-button) {
    border-radius: 4px!important;
}

#fluid tr .btn:not(.option, .dt-button) {
    border-radius: 4px!important
}

.btn:hover {
    opacity: .8;
}

.btn-primary {
    background: #1D4E7A!important;
    color: #FFFFFF !important;
}

.btn-success {
    background: #52A894!important;
    color: #FFFFFF !important;
}

.btn-gray {
    background: #98A2B3!important;
    color: #FFFFFF !important;
}

.btn-danger {
    background: #BB254A!important;
    color: #FFFFFF !important;
}

.btn i {
}

#fluid .soft-badge-button:after {
    content: "";
    background: var(--bg-color);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: .1;
    border-radius: 3px;
}

#fluid .soft-badge-button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--bg-color);
    border-radius: 4px;
    opacity: 0.2;
}

#fluid .offcanvas-body .btn {
    border-radius: 4px!important;
    font-weight: 600;
    line-height: 1rem!important;
    z-index: 9999;
    padding: .8rem;
}

button.btn#fluid .soft-badge-button {
}

button.accept-the-data {
    position: absolute;
    right: 6px;
    top: 44%;
    transform: translate(-20px, -50%);
    font-size: 1rem;
    padding: 5px 20px;
    border-radius: 4px!important;
    background-color: var(--bs-primary-600)!important;
}

div.modal button:not(.dt-button) {
}

th[data-filter-name] button i {
    display: none;
}

th[data-filter-name] button {
    background: transparent;
    border: none;
    font-size: .2rem!important;
    display: none;
}

th[data-filter-name] button:before {
    content: "filter_alt";
    font-family: 'Material Symbols Outlined';
    font-size: .8rem;
    color: var(--bs-primary-600);
}

div#page-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

div#loading {
    width: calc(100vw - 256px);
}

aside.main-sidebar {
    max-width: 260px;
    padding: 14px;
    background: #FCFCFD;
    position: relative;
    border-right: 1px solid #E0E0E0;
    z-index: 999;
}

.sidebar-collapse div#brandLarge > svg {
    display: none !important;
}

.sidebar-collapse div#brandLarge button {
    margin: auto!important;
    display: block!important;
    margin-bottom: 10px!important;
}

.sidebar-collapse nav.main-header {
}

.sidebar-collapse .my-project a {
    gap: 0px!important
}

.sidebar-collapse aside.main-sidebar {
    min-width: 50px!important;
    width: 70px;
    overflow: hidden;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.sidebar-collapse aside.main-sidebar h6 {
    font-size: 0px
}

.sidebar-collapse aside.main-sidebar p {
    font-size: 0px;
}

.sidebar-collapse aside.main-sidebar .sidebar svg {
    width: 20px!important;
    height: 20px!important
}

.sidebar-collapse aside.main-sidebar span {
    font-size: 20px!important;
}

span.notifications-badge {
    position: absolute;
    background-color: var(--bs-primary);
    padding: 2px;
    right: 1px;
    font-size: 0.813rem!important;
    color: #ffffff;
    border-radius: 4px;
    top: 0px;
    font-weight: bold;
    width: auto;
    height: auto;
    text-align: center;
    line-height: 1;
    font-family: "Inter", sans-serif;
}

.sidebar-collapse aside.main-sidebar .profile-avatar {
}

.sidebar-collapse aside.main-sidebar a#account-dropdown-profile {
}

.sidebar-collapse aside.main-sidebar .my-profile {
    display: none;
}

.sidebar-collapse aside.main-sidebar a.material-symbols-outlined {
    display: none;
}

.sidebar-collapse aside.main-sidebar a.material-symbols-outlined.right {
    display: block!important;
    margin: auto;
}

.sidebar-collapse div#brandLarge {
    display: none!important;
}

#fluid button.btn.bc-pushmenu {
    display: none;
}

body.xsidebar-mini.layout-navbar-fixed.layout-fixed.sidebar-collapse #fluid button.btn.bc-pushmenu {
    display: block;
}

.sidebar-collapse .side-search.dropdown label {
    display: none;
}

.side-search.dropdown .dropdown-menu.search-results {
    transform: translate3d(0px, 52.6667px, 0px) !important;
}

.dashboard-cover-photo {
    height: 210px;
    background-image: url('/dist/img/project-cover.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -10px -71px;
    width: 100%;
    left: 0;
    right: 0;
    top: 50px;
    padding-left: 0px!important;
}

nav.main-header {
    width: -webkit-fill-available;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    background-color: #ffffff;
    padding: 0px;
}

nav.main-header ul.navbar-nav:last-child {
    display: flex;
    align-items: center;
}

nav.main-header ul.navbar-nav li.nav-item:first-child {
    /* display: none; */
}

li.breadcrumb-item.active {
    font-weight: bold;
    color: var(--bs-gray-400)!important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .775rem;
}

ol.breadcrumb a {
    color: var(--bs-primary-700)!important;
    text-decoration: unset;
}

div#admin-bc {
    font-size: .9rem;
    font-weight: bold;
    margin: 30px 0px;
}

div#admin-bc p {
    color: #8E8E8E;
}

.dropdown-menu-content {
    left: 0;
    display: none;
    position: absolute;
    width: 100%;
    max-width: 300px;
    border: none;
    border: 1px solid var(--bs-gray-300);
    z-index: 9999999;
    background-color: white;
    padding: 24px;
    border-radius: 6px;
    color: var(--bs-gray-900);
    min-width: 300px;
}

.main-header ul#profile-dropdown-menu {
    right: 0px!important;
    left: unset;
}

.dropdown-menu-content .profile-avatar:before {
    content: "" !important;
}

ul#profile-dropdown-menu li {
    list-style: none;
    padding: 7px 0px;
}

ul#profile-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem!important;
}

ul#profile-dropdown-menu li a span {
    background-color: var(--bs-primary-700);
    color: white;
    padding: 6px;
    border-radius: 4px;
    font-size: 1rem;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    color: var(--bs-gray-400);
}

nav.main-header ul.navbar-nav:last-child li.nav-item.dropdown {
}

nav.main-header ul.navbar-nav:last-child a.nav-link.active {
    background-color: transparent!important;
}

nav.main-header ul.navbar-nav:last-child .w3-animate-zoom.account-name {
    display: none;
}

.my-profile {
    margin: 5px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.my-profile span {
    /* font-size: 1.2rem; */
}

input#search-box, input#search-box-sidebar {
    border-radius: 8px;
    background-color: transparent;
    padding: 8px 0px 8px 30px;
    font-weight: 400;
    border: 1px solid #e5e7eb;
}

input#search-box::placeholder, input#search-box-sidebar::placeholder {
    font-size: 0.88rem;
    color: #8E8E8E;
    letter-spacing: -0.14px;
}

.my-profile li {
    list-style: none;
}

.my-profile li a {
    color: var(--bs-gray-500);
    font-size: 0.875rem;
    position: relative;
}

ul.nav {
    display: block;
}

ul.nav {
    he}

.my-project h6 {
    white-space: nowrap;
    max-width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212121;
    font-weight: 500;
    font-size: .8rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    width: 90%;
    overflow: hidden;
}

.my-project {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.my-project a {
    color: var(--bs-gray-400)!important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    text-decoration: none;
}

.my-project a:before {
    font-family: 'Material Icons';
    color: var(--bs-primary-100);
}

.my-project span {
}

nav#mainMenu {
    height: calc(100vh - 200px);
    overflow: auto;
    margin: 0px!important;
    position: relative;
    background-color: #fcfcfd;
    height: min-content;
    z-index: 2;
}

.sidebarBadge {
    padding: 0px 10px;
    border-radius: 5px!important;
    border: 1px solid var(--bs-primary-200)!important;
    background-color: var(--bs-primary-50)!important;
}

.sidebarBadge span {
    color: var(--bs-primary-700)!important;
}

li.nav-item {
}

ul.nav.nav-treeview hr {
    height: 0px;
    margin: 5px 0px;
}

li.nav-item a, li.nav-item a i, li.nav-item span:not(.material-symbols-outlined) {
}

li.nav-item span {
    font-size: 1.3rem;
    font-weight: 500;
}

.nav-pills .nav-link {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #444;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.14px;
    font-family: "Inter", sans-serif;
    white-space: nowrap;
    align-items: center;
    line-height: 1.4rem;
    position: relative;
    padding: 8px 12px 8px 12px;
}

.nav-pills .nav-link span {
    font-size: 1.25rem;
    color: var(--bs-primary-300)
}

.nav-pills .nav-link p {
    margin: 0px;
    padding: 0px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 400;
    color: #444;
    width: 100%;
    justify-content: space-between;
}

a.nav-link.nav-item2.active p {
    color: var(--bs-primary-700);
}

.nav-pills .nav-link p i {
    color: var(--bs-gray-400)
}

.card:hover {
}

.modal-body {
    padding: 0px!important;
}

.modal-content {
    padding: 30px 30px;
}

.modal-content button:not(.dt-button) {
    border-radius: 4px!important;
    height: 48px;
    font-weight: 500;
}

.modal-footer {
    background-color: transparent!important;
    border: none!important;
}

.nav-link.active {
    background-color: var(--bs-primary-25)!important;
    color: var(--bs-primary-700)!important;
}

a.nav-link.nav-item2 {
    padding: 0.5rem 1.125rem!important;
}

.admin .nav-link span {
    color: #444444!important;
}

.admin li.nav-item.menu-open.active span {
    color: var(--bs-primary-600)!important;
}

a.nav-link.nav-item2 div {
    background-color: var(--bs-primary-400);
}

.account-name {
    color: var(--bs-gray-900);
    font-size: .9rem;
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

h5.offcanvas-title {
    color: #212121;
    font-size: 1.30rem;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -0.44px;
}

#updWeights label {
    border-bottom: 1px solid #E6E8EE;
    margin: 10px 0px;
    width: 100%;
}

/* TABLE */
#fluid table thead {
    background-color: var(--bs-gray-100)!important;
    background: var(--bs-gray-100)!important;
    background-color: var(--bs-gray-100)!important;
}

table .dataTables_scrollBody {
    border: none!important;
}

table.dataTable thead th {
    background: var(--bs-gray-50)!important;
    color: var(--bs-gray-700);
    font-size: .75rem;
    !importan;!importa;!import;!impor;!impo;!imp;!im;!i;!; }

table .dataTables_scrollBody {
    border: none!important;
}

table .dataTables_scrollHead {
}

#fluid table.dataTable thead th, table.dataTable thead td {
    border-bottom: var(--bs-primary-200)!important;
    background-image: unset!important;
    line-height: 2;
}

table td.wide-column {
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
    letter-spacing: -0.14px;
    color: var(--bs-gray-700);
}

.dataTables_scrollBody {
    border: none!important;
}

.dt-buttons {
    margin-bottom: 1rem;
    display: flex;
    gap: 9px;
    margin-left: 301px;
}

/*
.dt-buttons button {
    transform: translate(100vw);
    transition: all ease-out 1700ms;
}*/
.selectedRows {
    transform: translate(0)!important;
}

.buttons-colvis, .buttons-page-length {
    transform: unset!important;
}

#fluid .dt-buttons button {
    border-radius: 8px!important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: unset;
    max-height: 31px;
    &:hover {
        opacity: .8
    }
}

.dataTables_scrollBody thead {
    display: none!important;
}

.dt-buttons button:not(.btn) {
    border: 1px solid #A3C8E9!important;
    background: #F0F6FB!important;
    color: #0F273D!important;
    box-shadow: none!important;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: auto!important;
    margin: 0px;
}

.dt-buttons button span {
    font-weight: 500;
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: .8rem;
    top: unset!important;
}

.excel-button {
    background-color: var(--bs-primary-700)!important;
    color: var(--bs-gray-100)!important;
    font-weight: bold;
    box-shadow: none!important;
}

button.dt-button.buttons-collection.dots-button span {
    font-size: 1.7rem!important;
    height: 100%;
    display: block;
    line-height: normal;
}

.btn {
    position: relative;
    font-size: .8rem;
    border: none;
    line-height: 1.4rem;
}

.btn:before {
    font-family: "Material Icons";
    font-size: 1rem;
}

.btn span {
}

.edit-button:before {
    content: "create";
}

#fluid .soft-badge-warning.edit-button:before {
    content: "create";
    color: var(--bs-orange);
}

.sortable-button:before {
    content: "swap_vert";
}

#fluid .soft-badge-secondary {
    background-color: var(--bs-gray-25);
    border: 1px solid var(--bs-gray-300)!important;
    border-radius: 4px!important;
}

#fluid .soft-badge-secondary.clone-button:before {
    content: "flip_to_front";
    color: var(--bs-gray-800);
}

.add-button:before {
    content: "add";
}

.click-button {
    text-decoration: none;
    background-color: var(--bs-primary-25);
    padding: .2rem;
    color: #000000;
    position: relative;
    font-weight: 700!important;
    border-radius: 5px;
    text-align: left;
    display: block;
    margin: 3px 0px;
    border: 1px solid #ececec;
    text-align: center;
}

.click-button:after {
    font-family: 'Material Symbols Outlined'!important;
    font-size: 1.3rem;
    margin-top: 10px;
    position: absolute;
    right: -4px;
    top: -2px;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
    filter: drop-shadow(2px 4px 6px #0002);
}

.save-button:before {
    content: "save";
!important; font-size: 1.2rem;
    font-family: 'Material Symbols Outlined';
}

#fluid .soft-badge-publish, .btn-publish {
    background: var(--swipe-btn, linear-gradient(90deg, #7346E8 0%, #4B19CC 100%))!important;
    box-shadow: 0 1px 2px -.5px #ffffff1f inset,0 .5px .5px #ffffff29 inset,0 8px 24px -4px #ffffff29 inset,0 8px 8px -3px #07011308,0 5px 5px -2.5px #07011308,0 3px 3px -1.5px #07011308,0 2px 2px -1px #07011308,0 1px 1px -.5px #07011308,0 .5px .5px #07011308;
    text-align: center;
    color: white;
    span {
        color: white;
        &.material-symbols-outlined {
            font-size: 1.2rem!important;
        }
    }
}

.buttons-colvis, .buttons-page-length {
    transform: unset!important;
}

.dt-buttons {
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 301px;
}

.dt-buttons button:not(.btn) {
}

.dt-buttons button:not(.btn, .circle-button) {
    background: #F0F6FB!important;
    color: #0F273D!important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: auto !important;
    border-radius: 8px;
    margin: 0px!important;
    font-size: 0px;
    border: none;
    > span {
        font-size: 0px;
        display: none;
    }

    &.clearStateButton, &.buttons-colvis, &.buttons-page-length, &.filter-button, &.tag-filter {
        &:before {
            content: "refresh";
            height: 32px;
            width: 32px;
            background-color: var(--bs-gray-100);
            color: #1d4e7a;
            font-size: 1.4rem!important;
            line-height: 32px;
            font-family: 'Material Symbols Outlined';
        }
    }

    &.buttons-colvis {
        &:before {
            content: "visibility";
        }
    }

    &.buttons-page-length {
        &:before {
            content: "list";
        }
    }

    &.filter-button {
        &:before {
            content: "filter_list";
        }
    }
}

#fluid .dt-button-collection {
    span {
        display: block!important;
        font-size: .8rem!important;
        height: 16px;
        line-height: 16px;
        margin: 6px 10px;
    }
}

.dt-buttons button span {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: .76rem;
    font-weight: 500;
}

.excel-button {
    background-color: var(--bs-primary-700)!important;
    color: var(--bs-gray-100)!important;
    font-weight: bold;
    box-shadow: none!important;
}

.tag-filter:before {
    content: "filter_alt"!important;
    font-family: "Material Icons";
    font-size: 1rem;
}

.import-button:before {
    content: "upload_2";
    font-family: 'Material Symbols Outlined'!important;
}

.download-button:before {
    content: "download_2";
    font-family: 'Material Symbols Outlined';
}

.answers-button:before {
    content: "tv_options_edit_channels";
    font-family: 'Material Symbols Outlined';
}

.toggle-button:before {
    content: "toggle_on";
}

.group-button:before {
    content: "workspaces";
}

.mail-button:before {
    content: "send";
}

.delete-button:before {
}

.dt-buttons .excel-button span:before {
    content: "";
    background-image: url("/dist/img/excel.ico");
    display: block;
    width: 17px;
    height: 17px;
    background-position: center;
    background-size: cover;
}

#fluid .soft-badge-danger:before {
    content: "delete_outline"!important;
    color: var(--bs-danger)!important;
}

#fluid .soft-badge-primary.import-button:before {
    content: "upload_2";
}

.btn-danger:before {
    content: "delete_outline";
    color: var(--bs-white);
}

.btn-text-center {
    /* padding-left: 8px!important; */
}

button.dt-button span.dt-down-arrow, div.dt-button span.dt-down-arrow, a.dt-button span.dt-down-arrow, input.dt-button span.dt-down-arrow {
    color: #463d3d45!important;
}

div#t_filter, .dataTables_filter {
    position: absolute;
    width: 290px;
    margin: 0px!important;
}

.dataTables_filter label, .dataTables_filter label input {
    margin: 0px;
    width: 100%;
    height: 100%;
}

.dataTables_wrapper .dataTables_filter input, #search-label {
    border-radius: 8px;
    border: 1px solid #E4E7EC;
    height: 100%;
    margin: 0px!important;
    color: #8E8E8E;
    font-weight: 400;
    font-size: .76rem;
    padding: 0.4rem 37px;
    outline: 0px;
}

.dataTables_filter label:after, .dataTables_filter label input:after,#search-label {
    position: absolute;
    content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_549_17372)'%3E%3Cpath d='M12.9167 11.6667H12.2583L12.025 11.4417C12.8417 10.4917 13.3333 9.25833 13.3333 7.91667C13.3333 4.925 10.9083 2.5 7.91667 2.5C4.925 2.5 2.5 4.925 2.5 7.91667C2.5 10.9083 4.925 13.3333 7.91667 13.3333C9.25833 13.3333 10.4917 12.8417 11.4417 12.025L11.6667 12.2583V12.9167L15.8333 17.075L17.075 15.8333L12.9167 11.6667ZM7.91667 11.6667C5.84167 11.6667 4.16667 9.99167 4.16667 7.91667C4.16667 5.84167 5.84167 4.16667 7.91667 4.16667C9.99167 4.16667 11.6667 5.84167 11.6667 7.91667C11.6667 9.99167 9.99167 11.6667 7.91667 11.6667Z' fill='%238E8E8E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_549_17372'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    transform: translate(10px, 0px);
}

.search-icon:before {
    position: absolute;
    left: 10px;
    top: -9px;
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_549_17372)'%3E%3Cpath d='M12.9167 11.6667H12.2583L12.025 11.4417C12.8417 10.4917 13.3333 9.25833 13.3333 7.91667C13.3333 4.925 10.9083 2.5 7.91667 2.5C4.925 2.5 2.5 4.925 2.5 7.91667C2.5 10.9083 4.925 13.3333 7.91667 13.3333C9.25833 13.3333 10.4917 12.8417 11.4417 12.025L11.6667 12.2583V12.9167L15.8333 17.075L17.075 15.8333L12.9167 11.6667ZM7.91667 11.6667C5.84167 11.6667 4.16667 9.99167 4.16667 7.91667C4.16667 5.84167 5.84167 4.16667 7.91667 4.16667C9.99167 4.16667 11.6667 5.84167 11.6667 7.91667C11.6667 9.99167 9.99167 11.6667 7.91667 11.6667Z' fill='%238E8E8E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_549_17372'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

label.search-container {
    position: relative;
    width: 100%;
}

label.search-container > span {
    position: absolute;
    z-index: 99999;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
    color: #8E8E8E;
    font-weight: 400;
}

.dataTables_wrapper .dataTables_filter input:focous {
}

#t_wrapper button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled) {
}

button.dt-button.buttons-columnVisibility.active {
}

span.dt-down-arrow {
    font-size: 0px!important;
}

span.dt-down-arrow:after {
    content: "\f078";
    opacity: 1;
    font-family: 'FontAwesome';
    font-size: .75rem;
    display: inline-block;
}

.table>:not(caption)>*>* {
    box-shadow: unset!important;
    background-color: transparent!important;
    border-bottom: .04rem solid var(--bs-gray-200)!important;
    padding: 0.05rem .375rem!important;
    color: var(--bs-gray-800);
    font-size: 0.775rem;
    box-sizing: content-box!important;
    !importan;!importa;!import;!impor;!impo;!imp;!im;!i;!; }

.table th {
    /* text-align: center; */
}

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: #30618e30 !important;
    color: #ffffff;
}

table.dataTable tbody>tr.selected .fast-action .faster-delete-id {
    transform: translate(-450%, -50%) !important;
}

table.dataTable tbody>tr.selected td:nth-child(1) {
    border-left: 1px solid black!important;
}

table.dataTable tbody>tr.selected td {
    padding: 0rem .375rem!important;
    transition: all ease 700ms;
    color: var(--bs-primary-900);
}

/* Change */
.info-box {
    height: 150px;
    font-size: 1.063rem;
    background-color: #00000012;
    padding: 15px;
    margin: 10px;
    border-radius: 10px;
}

/* TOAST */
div#swal2-html-container {
    font-size: 0.875rem;
    margin: 0px;
    margin-left: 17px;
    color: #98A2B3!important;
}

.swal2-center div#swal2-html-container {
    font-size: 1rem;
    margin: 0px;
    padding-inline: 60px; }

.swal2-container {
    left: 50%!important;
    transform: translate(-50%, 20%);
    padding: unset!important;
    width: fit-content!important;
    min-width: 400px!important;
    height: auto;
    filter: drop-shadow(0px 2px 5px #9993);
}

.swal2-center {
    width: 100vw!important;
    height: 100vh!important;
    z-index: 9999999;
    position: fixed;
    transform: none!important;
    left: 0!important;
}

.swal2-container.swal2-center.swal2-backdrop-show h2#swal2-title {
    font-size: 23px;
    margin: 10px;
}

.swal2-popup.swal2-modal.swal2-icon-question.swal2-show {
    box-shadow: none!important;
}

.swal2-popup.swal2-toast.swal2-show {
    background: #FFF!important;
    margin-bottom: 14px!important;
    -webkit-box-shadow: unset!important;
    -moz-box-shadow: 0px 5px 10px 0px rgba(90, 90, 90, 0.7) !important;
    box-shadow: unset!important;
    border: 1px solid var(--bs-gray-200);
    border-radius: 10px;
}

.swal2-timer-progress-bar-container {
    overflow: visible!important;
}

.swal2-icon.swal2-success.swal2-icon-show {
    background-color: #52a894;
    border-color: #52a894a6!important;
    filter: drop-shadow(0px 0px 16px #95f2c8);
}

span.swal2-success-line-tip, span.swal2-success-line-long {
    background-color: #ffffffd4 !important;
}

.swal2-timer-progress-bar {
    height: 6px;
    background-color: #52a894!important;
    border-bottom-right-radius: 10px!important;
    border-top-right-radius: 10px!important;
}

.swal2-icon-error .swal2-timer-progress-bar {
    background-color: #F04248!important;
}

h2#swal2-title {
    color: var(--bs-primary-900);
    font-size: 1rem;
}

.swal2-center .swal2-icon:after {
    width: 100px!important;
    height: 100px!important;
    border-radius: 50%;
}

div:where(.swal2-container) div:where(.swal2-icon) {
    filter: drop-shadow(0px 0px 26px rgb(64 195 237))!important;
}

.swal2-icon div {
    background-color: transparent!important;
}

.swal2-icon-error div:where(.swal2-container) div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
    background-color: #ef4348!important;
}

.swal2-icon.swal2-error.swal2-icon-show {
}

div:where(.swal2-container) div:where(.swal2-icon).swal2-error {
    filter: drop-shadow(0px 0px 16px #F04248)!important;
    border-color: #ff9ea1 !important;
    color: #F04248!important;
    animation-name: error!important;
    animation-duration: 5s!important;
    animation-iteration-count: infinite!important;
    background-color: #F04248;
}

div:where(.swal2-container) div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
    background-color: #ffffff!important;
}

.swal2-popup.swal2-toast.swal2-icon-info.swal2-show {
}

.swal2-popup.swal2-toast.swal2-icon-info.swal2-show .swal2-timer-progress-bar {
    background-color: #c4c4c4 !important;
    position: relative;
    height: 8px;
    overflow: hidden;
}

.swal2-popup.swal2-toast.swal2-icon-info.swal2-show .swal2-timer-progress-bar:before {
    content: "";
    position: absolute;
    background-image: linear-gradient(45deg, rgb(49 0 0) 25%, #74aede 25%, #b0c5e2 50%, rgb(30 12 12 / 3%) 50%, rgb(165 157 217 / 40%) 75%, #d5d087 75%, #6588ab);
    width: 100%;
    height: 200px;
    top: 0;
    animation-delay: 1s;
    animation-name: loading!important;
    animation-duration: 2s!important;
    animation-iteration-count: infinite!important;
    background-blend-mode: revert;
    mix-blend-mode: hard-light;
}

.swal2-icon.swal2-warning.swal2-icon-show {
    background-color: #FFD21F;
    border-color: #ffeda5;
    color: #ffffff;
    filter: drop-shadow(0px 0px 26px #FFD21F)!important;
}

.swal2-icon-warning .swal2-timer-progress-bar {
    background-color: #ffd21f !important;
}

div:where(.swal2-container) div:where(.swal2-icon):after {
    content: "";
    border: 10px solid #eedbdb57;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 32px;
    z-index: 9;
    top: -9px!important;
    animation-name: shake;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

/*

body.dark div#swal2-html-container {
    color: var(--bs-gray-300)!important;
}

body.dark .swal2-popup.swal2-toast.swal2-show {
    background: #242C32!important;
}

body.dark span.swal2-success-line-tip, body.dark span.swal2-success-line-long {
    background-color: #252c32d4 !important;
}

.dark h2#swal2-title {
    color: #FFF!important;
}

body.dark div:where(.swal2-container) div:where(.swal2-icon).swal2-error {
    filter: drop-shadow(0px 0px 16px #F04248)!important;
    border-color: #F04248!important;
    color: #F04248!important;
    animation-name: error!important;
    animation-duration: 5s!important;
    animation-iteration-count: infinite!important;
}

body.dark div:where(.swal2-container) div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
    background-color: #252c32 !important;
}

body.dark .swal2-icon.swal2-warning.swal2-icon-show {
    background-color: #FFD21F;
    border-color: #FFD21F;
    color: #252c32;
    filter: drop-shadow(0px 0px 26px #FFD21F)!important;
}

@keyframes shake {
    0% {
        border: 8px solid #eedbdb63
    }

    50% {
        border: 8px solid #eedbdb00
    }

    100% {
        border: 8px solid #eedbdb63
    }
}

.dark div:where(.swal2-container) div:where(.swal2-icon):after {
}
*/
button.swal2-confirm.swal2-styled.swal2-default-outline {
    border: 1px solid #98a2b369 !important;
    background-color: #1D4E7A!important;
    width: 100%;
    color: white;
    margin: 5px 10px;
    line-height: 20px;
}

button.swal2-cancel.swal2-styled.swal2-default-outline {
    border: 1px solid #98a2b369 !important;
    background-color: #98a2b32e;
    margin: 0px;
    width: 100%;
    color: #98A2B3;
    line-height: 20px;
}

button.swal2-confirm.swal2-styled.swal2-default-outline:focus, button.swal2-cancel.swal2-styled.swal2-default-outline:focus {
    box-shadow: none!important
}

.swal2-actions {
    width: 80%;
    flex-wrap: nowrap;
    padding: 10px;
    gap: 3px;
    justify-content: center;
    flex-direction: row-reverse;
}

div#page-tab-menu {
    display: flex;
    gap: 8px!important;
    position: relative;
    width: 100%;
    margin: .75rem 0px .75rem 0px;
    list-style: none;
    background-color: #EAF0F6;
    padding: 9px 12px 9px 12px;
    border-radius: 12px;
}

div#page-tab-menu .btn {
    /* position: absolute; */
    /* right: 0; */
    /*top: -8px;*/
}

div#page-tab-menu .page-tab-menu-item {
    border-radius: 4px 4px 0px 0px;
    padding: 8px 10px;
    &.active {
        background-color: white;
        border-radius: 8px;
    }
}

.page-tab-menu-item.active:after {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 38px;
    left: 0;
    border-radius: 8px 8px 0px 0px;
    transition: all ease 700ms;
    background-color: #F9FAFB;
    z-index: 1;
    border: 1px solid #D0D5DD;
    border-bottom: none;
    transition: all ease 700ms;
}

div#page-tab-menu .page-tab-menu-item button {
    border: none;
    background-color: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: #5D6D7D;
    padding: 0px;
    font-weight: 500;
}

div#page-tab-menu .page-tab-menu-item.active button {
    color: #2E5B8D!important;
    position: relative;
    z-index: 99;
    font-weight: bold;
}

.page-tab-menu-content.active {
    display: block;
}

.page-tab-menu-content {
    display: none;
}

.info-card {
    width: 374px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid #F3F3F3;
    background: #FCFCFC;
    display: flex;
    align-items: center;
    padding-left: 30px;
    color: black;
    gap: 5px;
}

.info-card .count {
    font-size: 28px;
    font-weight: bold;
}

.profile-bg {
    height: 200px;
    width: 100%;
    background-image: url('/dist/img/profile-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-position: -7px -51px;
}

.profile-profile-photo {
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: -60px;
    left: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid white;
    background-color: white;
}

.profile-profile-photo label {
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: white;
}

.profile-profile-photo img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image-upload-sections , .document-upload-sections {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-upload-sections.cropper input {
    display: none
}

.document-upload-sections label {
    border: 2px dashed var(--bs-gray-300);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 52px;
    gap: 4px;
}

.document-upload-sections path {
    animation: pixie 10s infinite;
    animation-delay: initial;
}

@keyframes pixie {
    0% {
        opacity: .2
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: .2
    }
}

.document-upload-sections.active {
    background-color: var(--bs-gray-100);
    transition: all ease 700ms;
}

.document-upload-sections > img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
}

.document-upload-sections label img {
    width: auto;
    height: auto;
}

.document-upload-sections p {
    font-size: 1.125rem;
}

.document-upload-sections span {
    color: var(--bs-gray-400);
}

@keyframes success {
    0% {
        filter: drop-shadow(0px 0px 16px #FFD426)
    }

    50% {
        filter: drop-shadow(0px 0px 16px #ffd42600)
    }

    100% {
        filter: drop-shadow(0px 0px 16px #FFD426)
    }
}

@keyframes error {
    0% {
        filter: drop-shadow(0px 0px 16px #F04248)
    }

    50% {
        filter: drop-shadow(0px 0px 16px #ffd42600)
    }

    100% {
        filter: drop-shadow(0px 0px 16px #F04248)
    }
}

@keyframes warning {
    0% {
        filter: drop-shadow(0px 0px 16px #FFD426)
    }

    50% {
        filter: drop-shadow(0px 0px 16px #ffd42600)
    }

    100% {
        filter: drop-shadow(0px 0px 16px #FFD426)
    }
}

.faster-delete-id, .faster-delete, .faster-edit {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all ease 700ms;
}

.faster-delete {
    transform: translate(150%, -50%);
}

.faster-edit {
    transform: translate(250%, -50%);
}

.faster-edit-content .faster-delete-id {
    transform: translate(-250%, -50%)!important;
}

tr:hover .faster-delete-id {
    transform: translate(-450%, -50%)!important;
}

tr:hover .faster-delete {
    transform: translate(-50%, -50%)!important;
}

#fluid .faster-edit-content .faster-delete {
    transform: translate(-250%, -50%)!important;
}

.faster-edit-content .faster-edit {
    transform: translate(-50%, -50%)!important;
}

table.dataTable tbody>tr.selected .fast-action .faster-delete {
    transform: translate(-50%, -50%) !important;
}

.fast-action .btn {
    padding-left: 0px!important
}

section.content {
}

div#projectList {
    display: flex;
    flex-wrap: wrap;
}

.selectProjectLogo {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 4px;
    border: 1px solid var(--bs-gray-200);
    position: relative;
    z-index: 2;
}

.selectProjectLogoBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    filter: blur(12px);
    background-position: center;
    background-size: contain;
    z-index: 1;
    overflow: hidden;
    border-radius: 4px;
}

.projectCard {
    border-radius: 5px;
    margin: 7px;
}

.bottom-info {
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
    margin: 10px 0px;
    padding-top: 10px;
    gap: 5px 20px;
    flex-direction: column;
}

span.info-box-number.text-dark.text-truncate {
    font-size: .9rem;
    color: #2e629e!important;
}

.projectCard {
    color: #000;
    font-family: "Inter",sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 142.857% */
    position: relative;
    overflow: hidden;
}

.projectCard span {
    color: #8E8E8E;
    font-size: 0.813rem;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 153.846% */
    letter-spacing: -0.14px;
    text-decoration: none!important;
}

h5.projectName {
    color: #000;
    font-weight: bold;
    font-size: 0.875rem;
}

.projectCard a {
    text-decoration: none;
}

td.templateCol {
    max-height: 100px!important;
    overflow: hidden;
    height: 100px!important;
}

.viewTemplateModal {
    position: absolute;
    background-color: var(--bs-gray-100);
    padding: 45px;
    border-radius: 10px;
    filter: drop-shadow(2px 4px 6px #9993);
    top: 0;
    left: 0;
    transform: translate(-110%, -50%);
    max-width: 900px;
    max-height: 900px;
    border: 2px dashed var(--bs-gray-200);
}

.viewTemplateModal:before {
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--bs-gray-100);
    display: block;
    position: absolute;
    right: -9px;
    top: calc(50% - 0px);
}

.viewTemplateModal figure, .viewTemplateModal table {
    max-width: 700px;
    max-height: 700px;
}

th.sorting:nth-child(1) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.dataTable tbody tr td:nth-child(1) {
    width: 50px;
}

span.w-100.h-100.position-absolute.d-flex.align-items-center.text-bold {
    padding: .0rem 0.5rem;
    font-weight: bold;
}

.content-gray-letter {
    color: #98a2b3;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fast-action {
    width: 50px!important;
    height: 30px;
    cursor: pointer;
}

.checkmark-sm {
    background-color: #e4e7ec5e !important;
    border: 1px solid var(--bs-gray-300);
    width: 1.2rem;
    height: 1.1rem;
    display: block;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

thead .select-control .checkmark-sm {
    background: #E4E7EC !important;
}

.checkmark-sm:hover {
    box-shadow: 0px 0px 4px 3px rgba(117, 173, 222, 0.25)!important;
    border: 1px solid #262626!important;
}

.checkmark-sm svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: black !important;
    display: none;
}

.dark .checkmark-sm:hover {
    box-shadow: 0px 0px 4px 3px rgba(117, 173, 222, 0.25)!important;
    border: 1px solid #262626!important;
}

.dark .checkmark-sm {
    background-color: #F8FAFC!important;
    border: 1px solid #CDD5DF;
}

.checkmark-sm svg path {
    fill: black !important;
}

.dark .checkmark-sm svg path {
}

input[type=checkbox]:checked ~ .checkmark-sm svg {
    display: block;
}

div.empty-data {
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
}

div.empty-data p {
    font-weight: bold;
    font-size: 1.25rem;
}

.circular-progress {
    --size: 86px;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 33px;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
}

.circular-progress circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: round;
}

.circular-progress circle.bg {
    stroke: #E4E7EC;
}

.circular-progress circle.fg {
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    transition: stroke-dasharray 0.3s linear 0s;
    stroke: #579BD7;
}

.custom-checkbox {
    max-width: 30px!important;
}

.gap-1 {
    gap: .25rem
}

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-7 {
    gap: 2rem
}

.gap-8 {
    gap: 2.5rem
}

.gap-9 {
    gap: 3rem
}

.gap-10 {
    gap: 4rem
}

.gap-x-1 {
    column-gap: .25rem
}

.gap-x-2 {
    column-gap: .5rem
}

.gap-x-3 {
    column-gap: .75rem
}

.gap-x-4 {
    column-gap: 1rem
}

.gap-x-5 {
    column-gap: 1.25rem
}

.gap-x-6 {
    column-gap: 1.5rem
}

.gap-x-7 {
    column-gap: 2rem
}

.gap-x-8 {
    column-gap: 2.5rem
}

.gap-x-9 {
    column-gap: 3rem
}

.gap-x-10 {
    column-gap: 4rem
}

.gap-y-1 {
    row-gap: .25rem
}

.gap-y-2 {
    row-gap: .5rem
}

.gap-y-3 {
    row-gap: .75rem
}

.gap-y-4 {
    row-gap: 1rem
}

.gap-y-5 {
    row-gap: 1.25rem
}

.gap-y-6 {
    row-gap: 1.5rem
}

.gap-y-7 {
    row-gap: 2rem
}

.gap-y-8 {
    row-gap: 2.5rem
}

.gap-y-9 {
    row-gap: 3rem
}

.gap-y-10 {
    row-gap: 4rem
}

.croppr-container {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
}

.croppr-handle {
    filter: drop-shadow(2px 4px 6px #9999);
    border: none;
    background-color: var(--bs-cyan);
    width: 10px;
    height: 10px;
    padding: 6px;
}

.img-thumbnail {
    border: none;
}

.croppr-container {
    position: fixed;
    z-index: 9999999;
    opacity: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='167' height='107' viewBox='0 0 167 107' fill='none'%3E%3Cpath d='M85.3009 22.0721L47.1708 125.502C43.7174 132.616 29.9963 132.032 24.0017 127.081C18.007 122.13 -11.5359 59.0363 -11.5359 59.0363C2.91277 56.6273 14.5947 59.3028 22.4236 69.0307L31.9228 87.1951L52.7658 30.6314C54.8767 24.891 60.441 21.17 66.5484 21.3955L85.2906 22.0823L85.3009 22.0721Z' fill='%23F3F5F4'/%3E%3Cpath d='M80.7921 85.2884L118.922 -18.1416C122.376 -25.2556 136.097 -24.6713 142.091 -19.7202C148.086 -14.7691 177.629 48.3242 177.629 48.3242C163.18 50.7331 151.498 48.0577 143.669 38.3297L134.17 20.1654L113.327 76.729C111.216 82.4694 105.652 86.1905 99.5446 85.965L80.8024 85.2781L80.7921 85.2884Z' fill='%23F3F5F4'/%3E%3C/svg%3E");
    background-size: 135px 140px;
}

.croppr {
    height: 700px;
    border-radius: 29px;
    overflow: hidden;
    filter: drop-shadow(0px 0px 16px #999);
}

.croppr-container img {
    height: 100%!important;
}

.croppr-container:after {
    content: "";
    background-color: white;
    position: fixed;
    width: 100%;
    height: 70%;
    top: 0;
    z-index: -1;
    filter: drop-shadow(30px 40px 126px white);
    box-shadow: 1px 20px 20px 0px #ffffffe3;
}

.croppr-region {
    border: 4px dotted rgb(255 255 255 / 90%);
    z-index: 3;
    cursor: move;
}

.croppr-overlay {
    background: rgb(0 0 0 / 83%);
}

.croppr span {
    width: 100%;
    height: 20px;
    display: block;
    font-size: 1.063rem;
    position: absolute;
    top: 0;
    padding: 10px;
    color: white;
    z-index: 999999999999;
}

/*
ul.nav.nav-treeview {
    position: absolute;
    right: -134px;
    background-color: var(--bs-gray-100);
    min-width: 209px;
    display: none!important;
    margin-top: -73px;
    border-radius: 10px;
    padding: 20px;
}
li.nav-item:hover .nav-treeview, li.nav-treeview:hover .nav-treeview {
    display: block!important;
}
*/
.profile {
    /* position: relative; */
}

.profile-avatar {
    width: 2rem;
    height: 2rem;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    display: block;
    min-width: 32px;
    min-height: 32px;
    margin-right: 7px;
}

.profile-avatar {
    &:before {
        content: "expand_more";
        font-family: 'Material Icons';
        font-size: 1.875rem;
        position: absolute;
        right: -25px;
        color: #667085;
        top: 6px;
    }
}

tr {
    .profile-avatar {
        width: 1.5rem;
        height: 1.5rem;
    }

    .profile-avatar {
        &:before {
            display:none;
        }
    }
}

ul#profile-dropdown-menu .profile-avatar {
    min-width: 50px;
    min-height: 50px;
    margin-bottom: 17px;
}

.dots-button {
    display: none;
}

.dots-button span.dt-down-arrow {
    display: none!important;
}

.dots-button span {
    /* font-size: 2rem!important; */
    display: block;
    margin: auto;
    height: 14px;
    line-height: .5;
}

.project-header {
    display: flex;
    /*justify-content: start;*/
    /*flex-direction: column;*/
    /*width: 100%;*/
}

.project-header-titles {
    display: flex;
    justify-content: start;
    flex-direction: column;
    width: 100%;
    /* -webkit-box-shadow: rgba(0, 0, 0, 0.15) -2px 4px 5.6px; */
    -moz-box-shadow: rgba(0, 0, 0, 0.15) -2px 4px 5.6px;
    padding: .4rem .8rem 1.6rem 0;
    /* background: linear-gradient(27deg, rgb(48 97 143) 0%, rgb(195 195 195 / 66%) 16%, rgb(116 174 222 / 51%) 39%, rgb(195 195 195 / 0%) 61%, rgb(116 174 222 / 9%) 68%); */
    /* max-width: max-content; */
}

.project-header-titles h1 {
    font-size: 3rem;
    font-weight: bold;
    color: var(--bs-primary-700);
    max-width: max-content;
    padding: 0px 30px;
    border-radius: 9px;
}

.project-header-titles h2 {
    font-size: 1rem;
    font-weight: normal;
    color: white;
    max-width: max-content;
    padding: 0px 30px;
    text-align: justify;
}

.project-header h1 {
    /*font-size: 40px;*/
    /*font-weight: bold;*/
}

.project-header h2 {
    /*font-size: 24px;*/
    /*font-weight: normal;*/
}

.dashboard-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: .8rem 1.4rem;
    border-radius: 8px;
    background-color: #F0F6FB;
}

.dashboard-card.zero {
    background-color: #D0D5DD !important;
}

.dashboard-card.zero .dc-number {
    color: #667085;
}

.dashboard-card.zero .dc-text {
    color: #667085;
}

.dc-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--bs-primary-600);
}

.dc-text {
    font-size: 1.4rem;
    font-weight: normal;
    color: var(--bs-primary-600);
    margin-top: 8px;
}

.col-container {
    .card {
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        padding-right: 2rem;
        height: 100%;
        padding: 2rem;
    }

    .card-title {
        flex-grow: unset !important;
    }
}

.margin-rem-2-0 {
    margin: 1rem 0 !important;
}

.margin-rem-1-0 {
    margin: 1.5rem 0;
}

.gutter-x-0-5 {
    --bs-gutter-x: 0.5rem;
}

.margin-rem-3-1-5 {
    margin: 3rem 0 1.5rem 0;
}

.middle-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-layout-btn {
    background-color: #F9FAFC !important;
    color: #94969E !important;
    border-color: #5B5E6633;
    gap: 8px;
    cursor: pointer;
    border-radius: 4px;
    padding: 4px 8px 4px 8px;
    font-weight: 500;
    font-size: 0.875rem;
}

.layout-svg {
    width: 20px;
    height: 20px;
    background-color: #94969E;
    -webkit-mask: url(/dist/svg/layout.svg) no-repeat center;
    mask: url(/dist/svg/layout.svg) no-repeat center;
}

.plus-svg {
    width: 20px;
    height: 20px;
    background-color: #94969E;
    -webkit-mask: url(/dist/svg/plus.svg) no-repeat center;
    mask: url(/dist/svg/plus.svg) no-repeat center;
}

.page-width-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: #767b89;
    font-family: "Inter", sans-serif;
}

.layout-img {
    /*border: 1px solid #000;*/
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
}

.layout-img-active {
    border: 1px solid #71bfef;
    padding: 5px !important;
    background-color: #ebf5fa;
}

#layoutArea {
    width: max-content;
    border-radius: 10px;
    border: 1px solid #e9e9e9;
    z-index: 9999;
    position: absolute;
    background-color: #fff;
    margin-top: 40px;
}

.align-content {
    width: 82px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid #E8E8E8;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.align-content span {
    font-size: 0.75rem;
    font-weight: 500;
    color: #767b89;
    font-family: "Inter", sans-serif;
}

.leftContent {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: unset !important;
}

.centerContent {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: unset !important;
}

.ac-border {
    border: 1px solid #E8E8E8;
    border-radius: 4px;
}

.ac-border-active {
    border-color: #66b7ed;
    background-color: #e8f3f9;
}

.set-as-default {
    width: max-content;
    color: #1d4e7a;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.layout-title {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #909090 !important;
    font-family: "Inter", sans-serif;
}

.narrow-svg {
    width: 60px;
    height: 45px;
    background-color: #94969E;
    -webkit-mask: url(/dist/svg/narrow.svg) no-repeat center;
    mask: url(/dist/svg/narrow.svg) no-repeat center;
}

.standart-svg {
    width: 60px;
    height: 45px;
    background-color: #94969E;
    -webkit-mask: url(/dist/svg/standart.svg) no-repeat center;
    mask: url(/dist/svg/standart.svg) no-repeat center;
}

.wide-svg {
    width: 60px;
    height: 45px;
    background-color: #94969E;
    -webkit-mask: url(/dist/svg/wide.svg) no-repeat center;
    mask: url(/dist/svg/wide.svg) no-repeat center;
}

.sidebar-search-group {
    width: 100%;
    height: 40px;
    padding: 12px 8px;
    background: #F3F3F3;
    border-radius: 8px;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.sidebar-search-input {
    border: none;
    outline: none;
    background: none;
    width: 100%;
    font-size: 0.875rem;
    font-family: Inter, sans-serif;
    font-weight: 400;
}

.sidebar-search-icon {
    padding: 8px;
}

.sidebar-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: #212121;
    font-family: "Inter", sans-serif;
}

.sidebar-card {
    width: 100%;
    height: 56px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: inline-flex;
    border: 1px solid #efefef;
    cursor: pointer;
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    transition: all ease 0.5s;
}

.sidebar-card:hover {
    background: #f0f0f0;
}

.sidebar-card-img {
    width: 56px;
    height: 56px;
    background-color: #FAFAFA;
}

.sidebar-card-img img {
    width: 20px;
    height: 20px;
}

.sidebar-card-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212121;
    font-family: "Inter", sans-serif;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 18px;
}

#sidebarDashboardModal .modal-dialog {
    width: 350px;
}

.cursor-pointer {
    cursor: pointer;
}

.cant-find-chart {
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2c76b6;
    text-decoration: none;
}

.sidebar-close-modal {
    color: #8e8e8e;
    stroke: #8e8e8e;
    fill: #8e8e8e;
}

.progress-blue {
    background-color: #6ca7dc !important;
}

.progress-purple {
    background-color: #c598ff !important;
}

#save-changes {
    position: fixed;
    bottom: 20px;
    right: 40px;
    font-size: 1.125rem;
    padding: 10px;
    z-index: 99;
    cursor: pointer;
}

#fluid .icon-0:before {
    content: unset!important;
}

/* Bootstrap's original tab navigation structure, Videntium style */
.nav.nav-tabs {
    gap: 1rem;
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 20px;
    position: relative;
    border: none;
}

.nav.nav-tabs:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #E0E0E0;
    content: "";
}

.nav.nav-tabs .nav-item button.nav-link {
    display: flex;
    column-gap: .5rem;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #8E8E8E;
    font-size: 0.875rem;
    border-radius: 0;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.14px;
    padding: 12px 2px 16px 2px;
    background: none !important;
    border: none;
}

.nav.nav-tabs .nav-item {
    position: relative;
}

.nav.nav-tabs .nav-item:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #E0E0E0;
    content: "";
    z-index: 1;
    display: none;
}

.nav.nav-treeview li a {
    padding-left: 40px!important;
    display: flex;
    justify-content: space-between;
}

.nav.nav-tabs .nav-item:hover:after {
    display: block;
}

.nav.nav-tabs .nav-item:has(button.nav-link.active):after {
    display: block;
    background-color: #444;
}

.nav.nav-tabs .nav-item button.nav-link:hover {
}

.nav.nav-tabs .nav-item button.nav-link.active {
    color: #444;
}

.image-upload-sections.cropper {
    height: 250px;
    border: 1px dashed var(--bs-gray-400);
    border-radius: 7px;
    overflow: hidden;
}

span.material-symbols-outlined.saveCrop.save-button.btn-success {
    max-width: 40px;
    height: 40px;
    margin-top: 20px;
    border-radius: 4px;
    right: 18px;
}

.image-upload-sections.cropper img, .image-upload-sections.cropper label {
    height: 100%;
}

div#notifications .list-body {
    height: calc(100vh - 300px);
    overflow: auto;
}

div#notifications .list a {
    padding: 10px;
    color: var(--bs-primary-700);
    text-decoration: none;
    display: block;
    text-align: justify;
    border: 1px solid var(--bs-primary-25-bg-subtle);
    margin: 10px 0px;
    border-radius: 10px;
}

.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
    background-color: var(--bs-primary-25);
}

div#notifications .list i {
}

span.material-icons.notification-active {
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

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

    1% {
        transform: rotate(30deg);
    }

    3% {
        transform: rotate(-28deg);
    }

    5% {
        transform: rotate(34deg);
    }

    7% {
        transform: rotate(-32deg);
    }

    9% {
        transform: rotate(30deg);
    }

    11% {
        transform: rotate(-28deg);
    }

    13% {
        transform: rotate(26deg);
    }

    15% {
        transform: rotate(-24deg);
    }

    17% {
        transform: rotate(22deg);
    }

    19% {
        transform: rotate(-20deg);
    }

    21% {
        transform: rotate(18deg);
    }

    23% {
        transform: rotate(-16deg);
    }

    25% {
        transform: rotate(14deg);
    }

    27% {
        transform: rotate(-12deg);
    }

    29% {
        transform: rotate(10deg);
    }

    31% {
        transform: rotate(-8deg);
    }

    33% {
        transform: rotate(6deg);
    }

    35% {
        transform: rotate(-4deg);
    }

    37% {
        transform: rotate(2deg);
    }

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

    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes loading {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(600px, 0px);
    }

    100% {
        transform: translate(-600px, 0px);
    }
}

.material-symbols-outlined {
    /* display: none; */
}

/* Sidebar*/
.sidebar-collaps aside.main-sidebar {
    white-space: nowrap;
    overflow: hidden;
    max-width: 64px;
}

.sidebar-collaps aside.main-sidebar * {
    font-size: 0px;
}

.sidebar-collaps aside.main-sidebar span.material-symbols-outlined {
    font-size: 1.4rem;
}

.sidebar-collaps aside.main-sidebar .sidebar svg {
    min-width: 23px;
}

.sidebar-collaps aside.main-sidebar .side-search.dropdown {
    display: none;
}

.sidebar-collaps aside.main-sidebar li.projectChangeButton.cursor-pointer {
    z-index: 999999999999;
}

.sidebar-collapse aside.main-sidebar a.nav-link {
    min-width: 550px;
    padding-left: 15px!important;
}

.sidebar-collapse aside.main-sidebar li.projectChangeButton.cursor-pointer {
    z-index: 9999999999;
    font-size: 0px;
}

.sidebar-collapse ul.nav.nav-treeview {
    position: fixed;
    background-color: var(--bs-primary-100);
    border-radius: 10px;
    width: 150px;
    left: 63px;
    overflow: hidden;
}

.sidebar-collapse ul.nav.nav-treeview p {
    font-size: 11px;
}

li.nav-item i[data-toggle="tooltip"] {
    display: none;
}

.sidebar-collapse main#sidebar li.nav-item i {
    display: inline-block;
    top: 0;
    width: 20px;
    height: 20px;
    position: absolute;
}

div#brandSmallLogo {
    display: none;
}

.sidebar-collapse {
    nav#mainMenu {
        overflow-x: hidden !important;
    }
}

.sidebar-collapse div#brandSmallLogo {
    display: block;
    width: 100%;
}

.sidebar-collapse div#brandSmallLogo svg {
    width: 36px;
    margin-bottom: 10px;
}

.sidebar-collapse .my-project {
    justify-content: center;
}

.sidebar-collapse li.projectChangeButton p {
    font-size: .7rem!important
}

.sidebar-collapse li.projectChangeButton span {
    font-size: .6rem!important
}

.sidebar-collapse li.projectChangeButton .changeButton span {
    font-size: 1.4rem!important;
}

.sidebar-collapse li.projectChangeButton .changeButton span {
    font-size: 1.4rem!important;
}

.sidebar-collapse ul.projectList {
    margin-left: -11px!important;
}

.tooltip {
    z-index: 20039;
    background: var(--bs-primary-300)!important;
    border-radius: 10px;
}

.tooltip > * {
    z-index: 2003;
    background: var(--bs-primary-300)!important
}

.special-table-rows tr {
    height: 52px !important;
    cursor: pointer;
}

.special-table-rows td {
    padding: 0 20px !important;
}

.special-table-rows tr:hover {
    background-color: #f0f0f0;
    scale: 1.05;
}

li.nav-item.menu-is-opening.menu-open .fa-chevron-down {
    transform: rotate(180deg);
    transition: all ease 700ms;
}

div.dataTables_info, div.dataTables_paginate {
    display: none;
}

div#tbl_paginate {
}

.pagination-custom {
}

#fluid .pagination-custom select, #fluid .pagination-custom button {
    border-radius: 4px!important;
    border: 1px solid #F3F3F3!important;
    background-color: #FCFCFC!important;
    padding: 8px;
}

button.dt-button.button-page-length {
    border: unset!important;
    border-bottom: 1px solid var(--bs-primary-100)!important;
    margin-top: 2px!important;
}

button.dt-button.active {
    background-color: var(--bs-primary-700)!important;
    color: white!important;
}

.dt-button-background {
    display: none;
}

.dynamic-sidebar .main-sidebar {
    position: absolute;
    top: 0!important;
    z-index: 99999;
}

.dynamic-sidebar-closed .main-sidebar {
    transform: translate(-300px, 0px);
    transition: all ease 700ms;
    height: 100vh;
}

/*
table.dataTable > tbody > tr:before {
    content: "";
    width: 100%;
    height: 30px;
    display: block;
    position: absolute;
    z-index: 9;
    background: linear-gradient(90deg, #F1EFEF -24.18%, #F9F8F8 50.26%, #E7E5E5 114.84%);
}
#fluid .dt-button-collection button { width:200px;}
#fluid .dt-button-collection {
    float: none;
    position: fixed;
    width: 100%;
    left: 0 !important;
    height: 50px;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
    box-shadow: unset;
    border: none;
    filter: drop-shadow(2px 4px 6px #9992);
    border-bottom: 1px solid var(--bs-gray-200);
    margin: unset!important;
}
#fluid .dt-button-collection  > div {display:flex; gap:4px;}
.dt-button-background {
    display: none!important;
}

*/
.switchery {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 20px;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    position: relative;
    vertical-align: middle;
    width: 50px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: content-box;
    background-clip: content-box
}

.switchery > small {
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    height: 30px;
    position: absolute;
    top: 4px;
    width: 30px
}

.switchery-small {
    border-radius: 20px;
    height: 20px;
    width: 33px
}

.switchery-small > small {
    height: 12px;
    width: 12px
}

.switchery-large {
    border-radius: 40px;
    height: 40px;
    width: 66px
}

.switchery-large > small {
    height: 40px;
    width: 40px
}

.attachment-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.attachment-area .uploads-area {
    border: 2px dashed var(--bs-gray-300);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 1rem;
    gap: 4px;
}

.attachment-area label img {
    width: auto;
    height: auto;
}

.attachment-area span {
    color: var(--bs-gray-400);
}

.attachment-area label {
    border: 2px dashed var(--bs-gray-300);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 52px;
    gap: 4px;
}

#attachmentList .filename {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-color-gray {
    color: #7492B3;
    fill: #7492B3;
    stroke: #7492B3;
}

.text-gray-attachment {
    color: #667085;
}

.attachment-border-bottom {
    border-bottom: 1px solid #F2F4F7;
}

.h6-header.text-dark {
    color: #000 !important;
}

.icon-animate {
    display: inline-block;
    animation: bounce 0.2s ease-in-out 2;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.icon-loading {
    display: inline-block;
    position: relative;
}

#progressContainerDownload {
    width: 320px;
    height: 80px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    position: absolute;
    left: -160px;
    border-radius: 4px;
    padding: 12px;
}

.downloading {
    display: none;
}

#progressContainerDownload.download {
    .downloading {
        display: block !important;
    }

    .not-downloading {
        display: none;
    }
}

#edit-stakeholders-photo {
    max-height: 200px;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    border-radius: 25px!important;
}

.position-unset {
    position: unset !important;
}

.details-row.selected {
    background-color: #52a894;
    padding: 6px 4px;
    border-radius: 4px;
    color: #fff !important;
}

.attachment-area .details-row.selected span {
    color: #fff !important;
}

.details-row.selected .icon-color-gray {
    color: #fff !important;
}

.selected-list-row {
    background-color: #52a894;
    color: #fff !important;
}

ul.highcharts-menu {
    height: 240px;
    overflow: auto;
}

.highcharts-data-table table {
    height: 300px !important;
    overflow: auto;
    display: block;
}

#progressBar {
    transition: .3s;
}

.profile-avatar-table {
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: cover;
    color: red;
    border-radius: 50%;
    display: block;
    min-width: 30px;
    min-height: 30px;
    position: relative;
    border: 1px solid var(--bs-gray-200);
}

.profile-avatar-table.online:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    background-color: #00e17b;
}

.profile-avatar-table.offline:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    background-color: #FFD21F;
}

.big-light-header {
    font-size: .8rem;
    color: #98A2B3 !important;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.w-news {
    span {
        color: #FF9800 !important;
        font-size: 1.5rem !important;
        line-height: unset !important;
        border-radius: 50%;
        background-color: #ffc1073b;
        height: 22px;
        width: 22px;
        border: 1px solid #FFC107;
        display: flex;
        padding: 0px !important;
        margin: 0px !important;
        text-align: center;
        align-items: center;
    }
}

.badge-saved-filter, .badge-new-filter {
    height: 1.5rem;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.25rem;
    background: var(--bs-gray-25);
    padding: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    column-gap: .25rem;
    &.enabled {
        border-color: var(--bs-primary-300);
        & > button.enable-saved-table-filter {
            display: none;
        }
    }

    & > input {
        font-size: 12px;
        text-wrap: nowrap;
        flex-grow: 1;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        &:hover, &:focus, &:focus-within, &:active {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }

        background: transparent;
        height: 14px !important;
        min-width: 4rem;
        width: auto;
    }

    & > button {
        height: 14px !important;
        width: 14px !important;
        margin: 0;
        padding: 0;
        border: 0;
        color: var(--bs-gray-500);
        background: transparent;
        & > * {
            height: 14px;
            font-size: 14px !important;
            transition: color .5s ease;
            &:hover {
                color: var(--bs-primary-500)
            }
        }
    }
}

#filters, .advanced-filters-container {
    & .filter-nest {
        position: relative;
        padding: 1rem;
        border-radius: .5rem;
        margin-bottom: .625rem;
        background-color: var(--bs-gray-200);
        flex-grow: 1;
        & .nested-filter {
            display: flex;
            align-items: center;
            column-gap: .5rem;
            & ~ & {
                margin-top: .5rem;
            }
        }
    }

    .operator-select {
        text-align: center;
        width: 100px;
        flex-shrink: 0;
    }
}

.response-waiting {
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
}

.more-btn {
    text-decoration: none;
    background-color: var(--bs-primary-25) !important;
    padding: .5rem !important;
    color: var(--bs-primary-700) !important;
    cursor: pointer !important;
    line-height: normal;
}

.more-dropdown-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.before-none.download-button:before {
    display: none !important;
}

.h-40px {
    height: 40px;
}

.selectLanguage {
    .btn {
        gap: 0px!important;
        padding: 8px!important;
        &:after {
            display: none!important;
        }
    }

    .form-control {
        padding: 0px!important;
        background: none;
        border: none;
    }

    .filter-option {
        gap: 0px!important;
        font-size: 0px!important;
        display: flex!important;
    }

    span {
        align-items: center;
        gap: 9px;
    }

    img {
        width: 25px;
    }
}

.revision-for {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

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

.bootstrap-select.form-control {
    height: 46px !important;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
}

.bootstrap-select.btn-group .dropdown-menu {
    z-index: 999999;
}

.bootstrap-select .dropdown-menu .dropdown-item .text small {
    margin-left: .3rem;
    font-size: .8rem;
    font-style: italic;
}

.selectpicker {
    font-size: 0.875rem;
    line-height: 3.5rem !important;
    padding: 6px 12px;
}

.bootstrap-select.form-control {
    font-size: 0.875rem;
    height: 3.5rem !important;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    border: 1px solid #f2f4f7;
}

.modal .bootstrap-select .filter-option {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    font-size: 0.875rem;
    height: 2.725rem;
}

label[data-required]::after {
    content: " *";
    color: rgba(191, 38, 0, 1);
    display: inline;
}

.bs-actionsbox > div {
    display: flex !important;
    margin-top: .25rem !important;
}

.fs-16px {
    font-size: 16px !important;
}

.new-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #9747FF;
    padding: 4px;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-weight: 600 !important;
    font-size: 0.438rem !important;
    color: #fff !important;
    border-radius: 4px !important;
    line-height: 8.47px !important;
    letter-spacing: -0.14px !important;
}

.custom-location-cell {
    display: flex;
    max-height: 100px;
    overflow: auto;
    line-height: 24px;
    white-space: nowrap;
    padding-right:20px;
    position:relative;
}
.custom-location-cell::scroll {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.custom-location-cell::-webkit-scrollbar {
    display:;
    width:1px;
    height:5px;
}

.bootstrap-select.open {
    z-index: 99999 !important;
}

.selectLanguage {
    background: transparent!important;
    padding: 0px!important;
    .dropdown-menu.inner.open.show {
        padding: 0px;
        a {
            padding: 0px 10px;
            display: block!important;
            * {
                font-size: .85rem!important;
                line-height: 0px;
                justify-content: left;
            }
        }
    }
}

.note-relations-button:before {
    content: url("/dist/svg/link.svg");
}

.note-relations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    background-color: #F9FAFB;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    border: 1px solid #E4E7EC;
}

.note-relations-body {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 0 0 8px 8px;
    border: 1px solid #E4E7EC;
    border-top: none !important;
}

.btn-small-delete {
    padding: .1rem .4rem !important;
}

.note-relations-text-equipment {
    font-weight: 600;
    font-size: 14px;
    transition: all .1s ease;
    text-decoration: none !important;
}

.note-relations-text-equipment:hover {
    cursor: pointer;
    color: #000;
}

.note-relations-text-title {
    font-weight: 500;
    font-size: 14px;
}

.note-relations-created_by {
    font-weight: 400;
    font-size: 14px;
}

.note-relations-created_at {
    font-weight: 400;
    font-size: 14px;
}

#noteRelationsContainer {
    overflow: auto;
    max-height: 90vh;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 12px 4px;
}
tr.odd.relations-note:after {
    content: "diagonal_line";
    position: absolute;
    left: -64px;
    top: -3px;
    width: 169px;
    background-color: #ffffff;
    height: 29px;
    transform: rotateZ(
            333deg);
    color: #000000;
    font-family: 'Material Symbols Outlined';
    text-align: center;
    font-size: 18px;
    filter: drop-shadow(2px 4px 6px #0002);
    line-height: 1.4;
}

#fluid tr.odd.relations-note {
    background-color: #00bcd424 !important;
    margin-left: 20px;

}
.dropdown-menu {
    background-color: #f4f4f4;
    border: none;
    width: max-content!important;

    .bs-searchbox {
        input {
            height: 40px;
            border-radius: 10px!important;
        }
    }
    .dropdown-menu.inner.open.show {
        padding:10px;

        a {
            color:black!important;
            border-bottom: 1px solid #0000000a;
            font-size: .8rem!important;
            &.selected {
                background-color:#a3b6d72e;
                border-radius:5px;
                font-weight: bold;
            }
        }
    }
}

.bs-actionsbox .btn-group button {
    width: 50%;
    padding: 0px !important;
    height: 20px;
    background-color: #f9fafb;
    color: #433f3f;
    font-weight: 600;
    font-family: 'Inter';
}
tr label {
    margin: 0px!important;
}
.save_table_filter {
    cursor: unset !important;
    flex: 1 !important;
    span{
        cursor: pointer;
    }
}
#save_table{
    cursor: pointer;
}
.remove-filter-wizard {
    justify-content: center;
    background: #6643c4;
    position: absolute;
    right: 0;
    height: 99%;
    display: none !important;
    z-index: 999999 !important;
    width: 25px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid #6537de;
}
.filter-wizard:hover {
    .remove-filter-wizard{
        display: block !important;
        line-height: 27px;
    }
}
.filter-wizard{
    padding: 5px 10px !important;
}
.filter-wizard-wrapper{
    display: flex;
    gap: 4px;
}

.py-7px {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.viewTemplateModal2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    z-index: 9999;
    height: 100%;
    width: 100%;
}

.templateModalWrapper {
    width: 900px;
    height: 600px;
    overflow: scroll;
    background: aliceblue;
    padding: 40px;
    position: relative;
    z-index: 1000;
}

.templateModalRing{
    height: 100%;
    width: 100%;
    position:absolute;
    z-index: 999;
}
.buttons-collection.dots-button{
    padding-left: 6px;
    padding-right: 12px;
}