@import url("./itpm-font-custom.css");

:root {
    --bs-font-sans-serif: "Nunito Sans", system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --bs-btn-disabled-bg: #c3c3c3;
    --bs-btn-disabled-border-color: #a3a3a3;
    --bs-btn-disabled-color: white;
    --bs-body-bg: #d3d3d3b3;
    --bs-bg-card: white;
    --bs-text-title: #333;
    --bs-text-link: #171b1d;
    --bs-text-link-hover: #000;
    --bs-text-label: #444054;
    --bs-text-muted: #3d3d3d;
    --bs-border-card: #e9ecef;
    --bs-text-black: #15141a;
    --bs-text-description: #667780;
    --bs-breadcrumb-active-color: #495057;
    --bs-text-dark: #1c1b22;
    --bs-bg-form-control: white;
    --bs-bg-aside-hover: #e2e3e5;
    --bs-bg-modal: #fff;
    --bs-bg-modal-footer: #f8f9fa;
    --bs-text-modal: #394247;
    --bs-text-emphasis: #595959;
    --bs-text-body: #394247;
    --bs-table-striped: #27252f;
    --bs-table-thead-th: #1c1b228c;
    --bs-border-form-control: #15141a1a;
    --bs-bg-disable-form-control: #f6f6f7;
    --bs-text-disable-form-control: 73, 80, 87, 0.23;
    --bs-select-hover: #ddd;
    --bs-black-50: 21, 20, 26, 0.5;
}

:root[data-bs-theme="dark"] {
    --bs-bg-aside-hover: #212529;
    --bs-light-rgb: 58, 63, 68;
    --bs-bg-card: #3a3f44;
    --bs-body-bg: #212529;
    --bs-text-title: white;
    --bs-white-rgb: 58, 63, 68;
    --bs-text-link: white;
    --bs-text-link-hover: #ddd;
    --bs-text-label: white;
    --bs-text-muted: white;
    --bs-border-card: #6c757d;
    --bs-text-black: white;
    --bs-text-description: #a3b5bf;
    --bs-breadcrumb-active-color: #f1f3f5;
    --bs-text-dark: white;
    --bs-bg-form-control: #3f4a5a;
    --bs-nav-link-color: #ddd;
    --bs-link-color: #ddd;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-bg-modal-footer: #394247;
    --bs-bg-modal: #394247;
    --bs-text-modal: #f8f9fa;
    --bs-text-emphasis: #aaa;
    --bs-text-body: white;
    --bs-secondary-rgb: 204, 204, 204;
    --bs-table-striped: #ddd;
    --bs-table-thead-th: #dee2e6;
    --bs-border-form-control: #bfbfc0ab;
    --bs-bg-disable-form-control: #242627;
    --bs-text-disable-form-control: 224, 239, 255, 0.75;
    --bs-secondary-color: #aaa;
    --bs-select-hover: #212529;
    --bs-purple: #976ce5;
    --bs-black-50: 207, 207, 207, 0.5;
}

.card,
.layout {
    border-radius: 8px !important;
    background: var(--bs-bg-card);
}

.card {
    border-color: var(--bs-border-card);
}

.text-black {
    color: var(--bs-text-black) !important;
}

.text-dark {
    color: var(--bs-text-dark) !important;
}

.breadcrumb {
    --bs-breadcrumb-item-active-color: var(--bs-breadcrumb-active-color);
}

.card-header {
    background-color: transparent !important;
}

.modal-lg {
    max-width: 1000px;
}

.font-cursive {
    font-family: cursive;
}

.w-fit {
    width: fit-content;
}

.height-kanban {
    height: calc(100vh - 230px);
    overflow-y: scroll;
}

.table {
    overflow: auto;
}

.toast-wrapper {
    z-index: 2000;
}

.w-4 {
    width: 1rem;
}

.h-4 {
    height: 1rem;
}

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

.aside .position-relative .nav-item:hover,
.aside .nav-item.active {
    background-color: var(--bs-bg-aside-hover);
    border-radius: 6px;
}

.command-bar .btn {
    padding: 0.35rem 1.25rem !important;
    border-radius: 8px !important;
}

.profile-container {
    background-color: var(--bs-bg-aside-hover) !important;
}
.profile-container small span:first-of-type {
    color: var(--bs-text-black) !important;
}

.profile-container .col-10 {
    width: auto;
    max-width: 83.33333333%;
}

.profile-container.aside-collapse {
    background-color: transparent !important;
}

.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-text-body);
}

.icon-collapse {
    display: none;
}

.rotate-180 {
    transform: rotate(180deg);
}

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

.aside-notificaiton {
    position: absolute !important;
    top: -10px;
    right: -5px;
}

.transition-all {
    transition: all 0.5s ease;
}

.text-muted-emphasis {
    color: var(--bs-text-emphasis);
}

legend p.text-muted {
    color: var(--bs-text-muted);
}

.bell-notification {
    animation: shake 1s ease-in-out infinite;
}

.text-purple {
    color: var(--bs-purple);
}

.page-platform-preventy-indicators svg .chart-legend {
    transform: translate(50px, 195px);
}

.bg-white,
.bg-white a,
a {
    color: var(--bs-text-link);
}

label {
    color: var(--bs-text-label);
}

theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 34px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sun-icon,
.moon-icon {
    position: absolute;
    top: 8px;
    font-size: 14px;
    transition: opacity 0.4s;
}

.sun-icon {
    left: 7px;
    color: #ffb300;
    opacity: 0;
}

.moon-icon {
    right: 7px;
    color: #5e35b1;
    opacity: 1;
}

[data-bs-theme="dark"] .sun-icon {
    opacity: 1;
}

[data-bs-theme="dark"] .moon-icon {
    opacity: 0;
}

.toogle-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e2e2e2;
    transition: 0.4s;
    border-radius: 34px;
}

.toogle-switch:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 5px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .toogle-switch {
    background-color: #3f51b5;
}

[data-bs-theme="dark"] .toogle-switch:before {
    transform: translateX(18px);
    background-color: #f0f0f0;
}

[data-bs-theme="dark"] .theme-image {
    content: url("/img/logo_v2_white.png");
}

[data-bs-theme="light"] .theme-image {
    content: url("/img/logo_v2.png");
}

@media (min-width: 1200px) {
    .icon-collapse {
        display: block;
        cursor: pointer;
    }
    .icon-collapse svg {
        width: 1.5em;
        height: 1.5em;
    }

    .aside-hidden {
        min-height: 100vh;
    }
    .aside-hidden,
    .aside {
        min-width: 15em;
        max-width: 100px;
    }

    .aside-hidden.aside-collapse,
    .aside.aside-collapse {
        min-width: 5em;
        max-width: 50px;
    }

    .container-body {
        width: calc(100% - 100px);
        margin: auto;
    }

    .aside {
        z-index: 1;
        position: fixed;
        min-height: 90vh;
        border: 1px solid var(--bs-border-card);
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 0.75rem;
        margin: 5vh 0;
    }

    .aside .sub-menu {
        right: -16em;
        border-radius: 8px;
        color: var(--bs-text-black);
        background-color: var(--bs-bg-card);
        border: 1px solid var(--bs-border-card);
        top: 0;
        width: 215px;
        position: absolute;
    }

    .workspace-limit {
        max-width: 100%;
    }
    .container-xl {
        max-width: min(90vw, 1580px);
        min-height: 100vh;
    }

    .workspace {
        min-height: 100vh;
    }

    .aside nav {
        min-height: 80vh;
    }

    /* .aside .sub-menu::before {
        content: "";
        position: absolute;
        top: 10px;
        left: -12px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #ffffff;
        transform: rotate(-90deg);
      } */
}

@media (max-width: 1199.98px) {
    .aside {
        height: calc(2rem + 0.9vw + 2em);
    }
}

@keyframes shake {
    0%,
    100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-5deg);
    }
    40% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(-5deg);
    }
    80% {
        transform: rotate(5deg);
    }
}

/*   Adjust color dark mode orchid  */

.bg-white .pagination .page-item.active .page-link,
.bg-white .pagination .page-item.active span,
.bg-white .pagination > li.active .page-link,
.bg-white .pagination > li.active span,
.bg-white .pagination > li.active span:focus,
.bg-white .pagination > li.active span:hover,
.bg-white .text-muted,
.dropzone .dz-preview .pagination .page-item.active .page-link,
.dropzone .dz-preview .pagination .page-item.active span,
.dropzone .dz-preview .pagination > li.active .page-link,
.dropzone .dz-preview .pagination > li.active span,
.dropzone .dz-preview .text-muted,
.dropzone .pagination .page-item.active .dz-preview .page-link,
.dropzone .pagination .page-item.active .dz-preview span,
.dropzone .pagination > li.active .dz-preview .page-link,
.dropzone .pagination > li.active .dz-preview span,
.dropzone-wrapper .dz-preview .pagination .page-item.active .page-link,
.dropzone-wrapper .dz-preview .pagination .page-item.active span,
.dropzone-wrapper .dz-preview .pagination > li.active .page-link,
.dropzone-wrapper .dz-preview .pagination > li.active span,
.dropzone-wrapper .dz-preview .text-muted,
.dropzone-wrapper .pagination .page-item.active .dz-preview .page-link,
.dropzone-wrapper .pagination .page-item.active .dz-preview span,
.dropzone-wrapper .pagination > li.active .dz-preview .page-link,
.dropzone-wrapper .pagination > li.active .dz-preview span,
.editor-preview-side .pagination .page-item.active .page-link,
.editor-preview-side .pagination .page-item.active span,
.editor-preview-side .pagination > li.active .page-link,
.editor-preview-side .pagination > li.active span,
.editor-preview-side .pagination > li.active span:focus,
.editor-preview-side .pagination > li.active span:hover,
.editor-preview-side .text-muted,
.layout .pagination .page-item.active .page-link,
.layout .pagination .page-item.active span,
.layout .pagination > li.active .page-link,
.layout .pagination > li.active span,
.layout .pagination > li.active span:focus,
.layout .pagination > li.active span:hover,
.layout .text-muted,
.pagination .page-item.active .bg-white .page-link,
.pagination .page-item.active .bg-white span,
.pagination .page-item.active .dropzone .dz-preview .page-link,
.pagination .page-item.active .dropzone .dz-preview span,
.pagination .page-item.active .dropzone-wrapper .dz-preview .page-link,
.pagination .page-item.active .dropzone-wrapper .dz-preview span,
.pagination .page-item.active .editor-preview-side .page-link,
.pagination .page-item.active .editor-preview-side span,
.pagination .page-item.active .layout .page-link,
.pagination .page-item.active .layout span,
.pagination > li.active .bg-white .page-link,
.pagination > li.active .bg-white span,
.pagination > li.active .bg-white span:focus,
.pagination > li.active .bg-white span:hover,
.pagination > li.active .dropzone .dz-preview .page-link,
.pagination > li.active .dropzone .dz-preview span,
.pagination > li.active .dropzone-wrapper .dz-preview .page-link,
.pagination > li.active .dropzone-wrapper .dz-preview span,
.pagination > li.active .editor-preview-side .page-link,
.pagination > li.active .editor-preview-side span,
.pagination > li.active .editor-preview-side span:focus,
.pagination > li.active .editor-preview-side span:hover,
.pagination > li.active .layout .page-link,
.pagination > li.active .layout span,
.pagination > li.active .layout span:focus,
.pagination > li.active .layout span:hover {
    color: var(--bs-text-description) !important;
}

.text-white {
    color: #fff !important;
}

.bootstrap-tagsinput,
.chosen-choices,
.chosen-single,
.form-control {
    background: var(--bs-bg-form-control) none;
    color: var(--bs-text-black);
    border: 1px solid var(--bs-border-form-control);
}

.attach .attach-image:before,
.bg-light,
.dropzone .dz-preview .dz-details,
.dropzone .dz-preview .dz-image img,
.dropzone img:before,
.dropzone-wrapper .dz-preview .dz-details,
.dropzone-wrapper .dz-preview .dz-image img,
.dropzone-wrapper img:before,
.modal .modal-footer {
    background-color: var(--bs-bg-modal-footer);
    color: var(--bs-text-modal);
}

a:focus,
a:hover {
    color: var(--bs-text-black);
}

.modal {
    --bs-modal-bg: var(--bs-bg-modal);
}

.list-group {
    --bs-list-group-bg: var(--bs-bg-card);
}

.bg-white a,
.dropzone .dz-preview a,
.dropzone-wrapper .dz-preview a,
.editor-preview-side a,
.layout a {
    color: var(--bs-text-link);
}

.bg-white a:hover,
.dropzone .dz-preview a:hover,
.dropzone-wrapper .dz-preview a:hover,
.editor-preview-side a:hover,
.layout a:hover {
    color: var(--bs-text-link-hover) !important;
}

.modal .bg-white {
    background-color: transparent !important;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--bs-bg-modal);
    border: 1px solid var(--bs-border-card);
}

.table {
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-bg-modal-footer);
    --bs-table-striped-color: var(--bs-table-striped);
}

.btn-link {
    color: var(--bs-text-body);
}

.table thead tr th {
    color: var(--bs-table-thead-th);
}

.pagination {
    --bs-pagination-bg: var(--bs-bg-card);
    --bs-pagination-disabled-bg: var(--bs-bg-card);
}

.ts-dropdown .active,
.ts-dropdown .active.create {
    color: var(--bs-text-black);
}

.ts-control,
.ts-control input,
.ts-dropdown {
    color: var(--bs-text-black);
}

.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
    background: var(--bs-bg-modal);
    border: 1px solid var(--bs-border-card);
}

.form-control[disabled],
.form-control[readonly],
[disabled].bootstrap-tagsinput,
[disabled].chosen-choices,
[disabled].chosen-single,
[readonly].bootstrap-tagsinput,
[readonly].chosen-choices,
[readonly].chosen-single,
fieldset[disabled] .bootstrap-tagsinput,
fieldset[disabled] .chosen-choices,
fieldset[disabled] .chosen-single,
fieldset[disabled] .form-control {
    background: var(--bs-bg-disable-form-control);
    color: rgba(var(--bs-text-disable-form-control));
}

.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:focus,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active span,
.pagination .page-item.active span:focus,
.pagination .page-item.active span:hover,
.pagination > li.active .page-link,
.pagination > li.active .page-link:focus,
.pagination > li.active .page-link:hover,
.pagination > li.active span,
.pagination > li.active span:focus,
.pagination > li.active span:hover,
.text-muted {
    color: var(--bs-text-description) !important;
}

.bootstrap-tagsinput::-moz-placeholder,
.chosen-choices::-moz-placeholder,
.chosen-single::-moz-placeholder,
.form-control::-moz-placeholder {
    color: var(--bs-secondary-color);
}
.bootstrap-tagsinput::placeholder,
.chosen-choices::placeholder,
.chosen-single::placeholder,
.form-control::placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
}

.text-black-50 {
    color: rgba(var(--bs-black-50)) !important;
}

.list-group-item-action.collapsed {
    background-color: var(--bs-list-group-bg);
}
.list-group-item-action,
.list-group-item-action.collapsed:hover {
    background-color: var(--bs-list-group-action-hover-bg);
}