libreqda 1.2.0__py3-none-any.whl

taguette/static/css/custom.css

@@ -0,0 +1,1696 @@
+/* Add Taguette font */
+@font-face {
+    font-family: BadScript;
+    font-display: swap;
+    src: url(../webfonts/BadScript.ttf);
+}
+
+/* Add body font */
+@font-face {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-display: fallback;
+    src: url(../webfonts/Montserrat-Light.ttf);
+}
+
+/* Change link colors */
+.container-body a:not(.btn) {
+    color: #005a20;
+}
+
+/* Disabled links */
+#document-contents a:not([href]):not(.highlight) {
+    color: #216490;
+}
+
+/* Change body font */
+body {
+    font-family: Montserrat !important;
+    font-size: 1.11em !important;
+    transition: all 0.3s ease-in-out;
+}
+
+/* Some space before content */
+.container-body {
+    padding-top: 6.5em;
+}
+
+body.scrolled .container-body {
+    padding-top: 0;
+}
+
+/* Border for the tab container */
+.tab-content {
+    border-style: solid;
+    border-width: 1px;
+    border-color: #fff #dee2e6 #dee2e6 #dee2e6;
+    padding: 0.4em;
+}
+
+/* Left pane scrolls on overflow */
+div.sticky-top {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: calc(100vh - 5.25em);
+    top: 6.25em;
+    transition: all 0.3s ease-in-out;
+}
+
+body.scrolled div.sticky-top {
+    height: calc(100vh - 5.25em);
+    top: 0;
+    transition: all 0.3s ease-in-out;
+}
+
+/* Footer */
+.footer {
+    font-size: 0.82em;
+    text-align: center;
+}
+
+/* Navigation */
+
+.navbar.navbar-expand-lg.navbar-dark.bg-primary {
+    background-color: #018849 !important;
+    margin-bottom: 2em;
+    height: 3.5em;
+
+    position: fixed;
+    top: 0;
+    z-index: 100;
+    width: 100%;
+    transition: all 0.3s ease-in-out;
+}
+
+body.scrolled .navbar.navbar-expand-lg.navbar-dark.bg-primary {
+    overflow: hidden;
+    margin-bottom: 2em;
+    top: -5.5em;
+    transition: all 0.3s ease-in-out;
+}
+
+body.scrolled .navbar.navbar-expand-lg.navbar-dark.bg-primary button,
+body.scrolled .navbar.navbar-expand-lg.navbar-dark.bg-primary input {
+    font-size: 1em;
+    line-height: 1;
+}
+
+body.page-index .navbar.navbar-expand-lg.navbar-dark.bg-primary {
+    margin-bottom: 1em;
+}
+
+#navbar {
+    padding-left: 115px;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+    color: #fff !important;
+}
+
+.navbar-dark .navbar-nav .nav-link.disabled {
+    color: #edbd9d !important;
+}
+
+.navbar-dark .navbar-nav .nav-link.active {
+    color: #bcc3ac !important;
+}
+
+.navbar-dark .navbar-nav .nav-link.disabled:hover,
+.navbar-dark .navbar-nav .nav-link.disabled:focus {
+    color: #e9ad85 !important;
+}
+
+.navbar-dark .navbar-nav .nav-link:hover,
+.navbar-dark .navbar-nav .nav-link:focus {
+    color: #3a3a3a !important;
+}
+
+.navbar-dark .navbar-nav .dropdown-item.active {
+    color: #fff !important;
+    background-color: #6c757d !important;
+}
+
+/* Make icon lighter */
+.navbar-dark .navbar-nav .nav-link .fas {
+    opacity: 0.7;
+}
+
+.navbar-brand {
+    position: absolute;
+    background: #fff;
+    display: block;
+    top: 0.5em;
+}
+
+.navbar-brand img.not-scrolled {
+    max-width: 100px;
+    display: block;
+}
+
+.navbar-brand img.scrolled {
+    display: none;
+}
+
+body.scrolled .navbar-brand {
+    padding: 0;
+    top: 0.1em;
+}
+
+.mr-auto {
+    margin-right: auto !important;
+}
+
+/* Tab navs for project*/
+
+.nav-link {
+    padding: 0.5rem 0.5rem !important;
+    overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Colors for button primary */
+
+.btn.btn-primary {
+    background-color: #018849 !important;
+    border-color: #018849 !important;
+}
+
+.btn.btn-primary:hover,
+.btn.btn-primary:focus,
+.btn.btn-primary:active {
+    background-color: #4f9b4b !important;
+    border-color: #4f9b4b !important;
+}
+
+.btn.btn-outline-primary {
+    color: #018849;
+    background-color: transparent;
+    background-image: none;
+    border-color: #018849;
+}
+
+.btn.btn-outline-primary:hover {
+    color: #fff !important;
+    background-color: #018849 !important;
+    border-color: #018849 !important;
+}
+
+.btn.btn-outline-primary:focus,
+.btn-outline-primary.focus {
+    box-shadow: none !important;
+}
+
+.btn.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-primary.dropdown-toggle:focus {
+    box-shadow: none !important;
+}
+
+.btn.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
+.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-secondary.dropdown-toggle:focus {
+    box-shadow: none !important;
+}
+
+.btn.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-primary.dropdown-toggle:focus {
+    color: #fff !important;
+    background-color: #018849 !important;
+    border-color: #018849 !important;
+}
+
+.btn.btn-outline-primary.disabled,
+.btn-outline-primary:disabled {
+    color: #018849 !important;
+    background-color: transparent !important;
+}
+
+.btn.btn-outline-primary:not(:disabled):not(.disabled):active,
+.btn-outline-primary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-primary.dropdown-toggle {
+    color: #fff !important;
+    background-color: #018849 !important;
+    border-color: #018849 !important;
+}
+
+.btn.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
+.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-primary.dropdown-toggle:focus {
+    box-shadow: none !important;
+}
+
+.dropdown-item:focus,
+.dropdown-item:hover {
+    color: #fff !important;
+    background-color: #018849 !important;
+    border-color: #018849 !important;
+}
+
+/* Colors for secondary buttons */
+.btn.btn-outline-secondary {
+    background-color: #3a3a3a;
+    border-color: #3a3a3a;
+    color: #ffffff;
+}
+
+.btn.btn-secondary {
+    background-color: #3a3a3a;
+    border-color: #3a3a3a;
+    color: #ffffff;
+}
+
+.btn.btn-secondary:hover,
+.btn.btn-secondary:focus,
+.btn.btn-secondary:active {
+    background-color: #6c757d;
+    border-color: #6c757d;
+}
+
+.btn.btn-outline-secondary:hover,
+.btn.btn-outline-secondary:focus,
+.btn.btn-outline-secondary:active {
+    background-color: #6c757d;
+    border-color: #6c757d;
+}
+
+.btn.btn-secondary.me-3 {
+    background-color: #018849 !important;
+    border-color: #018849 !important;
+}
+
+.btn.btn-secondary.me-3:hover,
+.btn.btn-primary:focus,
+.btn.btn-primary:active {
+    background-color: #4f9b4b !important;
+    border-color: #4f9b4b !important;
+}
+
+.btn-sm.btn-outline-secondary {
+    color: #6c757d !important;
+    background-color: #fff !important;
+}
+
+.btn-sm.btn-outline-secondary:hover {
+    color: var(--bs-btn-hover-color) !important;
+    background-color: var(--bs-btn-hover-bg) !important;
+    border-color: var(--bs-btn-hover-border-color) !important;
+}
+
+.btn-sm.btn-outline-secondary.my-2 {
+    color: #6c757d !important;
+    background-color: #fff !important;
+}
+
+.btn-sm.btn-outline-secondary.my-2:hover {
+    color: var(--bs-btn-hover-color) !important;
+    background-color: var(--bs-btn-hover-bg) !important;
+    border-color: var(--bs-btn-hover-border-color) !important;
+}
+
+/* Colors for button info */
+.btn.btn-info {
+    background-color: #bcc3ac !important;
+}
+
+/* Colors for badges */
+.badge-secondary {
+    color: #fff !important;
+}
+
+.badge-info {
+    color: #fff !important;
+}
+
+.badge-dark {
+    color: #fff !important;
+}
+
+.badge-warning {
+    color: #fff !important;
+}
+
+.badge-danger {
+    color: #fff !important;
+}
+
+.badge-secondary {
+    color: #fff !important;
+    background-color: #005a20 !important;
+}
+
+.badge-primary {
+    color: #fff !important;
+    background-color: #018849 !important;
+}
+
+.badge-primary[href]:hover,
+.badge-primary[href]:focus {
+    color: #fff !important;
+    text-decoration: none !important;
+    background-color: #1a252f !important;
+}
+
+.badge-dark[href]:focus,
+.badge-dark[href]:hover {
+    color: #abacaf !important;
+    text-decoration: none !important;
+}
+
+/* Search in document form */
+form.search {
+    width: 40%;
+    position: relative;
+}
+
+form.search button {
+    color: #fff !important;
+    border: 1px solid #fff !important;
+}
+
+form.search button.btn-outline-primary:hover {
+    color: #3a3a3a !important;
+    border-color: #fff !important;
+}
+
+form.search button i.searching {
+    display: none;
+}
+
+form.search button i.search-icon {
+    display: inline-block;
+}
+
+form.search.searching button i.searching {
+    display: inline-block;
+    animation: spin 2s linear infinite;
+}
+
+form.search.searching button i.search-icon {
+    display: none;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+ul.dropdown-menu {
+    z-index: 1030;
+    max-height: 75vh;
+    overflow: scroll;
+}
+
+ul.dropdown-menu.show:empty {
+    display: none !important;
+}
+
+span.search-item {
+    color: #fff;
+    background-color: #005a20;
+    display: inline-block;
+    border-radius: 0.375rem;
+    padding: 0 0.2rem;
+}
+
+/* Don't show the resize control on textareas */
+textarea.form-control {
+    resize: none;
+    height: 150px;
+    padding: 10px;
+    line-height: 1.5;
+}
+
+select.form-control {
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    appearance: auto;
+}
+
+/* To match bs4 css, may be removed in a future release */
+.form-group {
+    margin-bottom: 1rem;
+}
+
+/* Wrap long tag names and long doc names */
+.tag-name {
+    word-break: break-all;
+}
+
+#tag-selection-return a {
+    display: none;
+}
+
+a.document-link-a {
+    word-break: break-all;
+}
+
+.collection-selected {
+    background-color: #edefe9 !important;
+    border-left: 3px solid #018849 !important;
+}
+
+/* Work-around to make a whole element clickable while it contains links */
+.overlay-outer {
+    position: relative;
+}
+
+.overlay-bottom {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.overlay-top {
+    position: relative;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.overlay-top a {
+    pointer-events: all;
+}
+
+li.document-link-current {
+    background-color: #f8f9fa;
+}
+
+li.document-link-current a.document-link-a {
+    font-weight: bold;
+}
+
+#ul-search-results {
+    padding-top: 0;
+}
+
+li.disabled.sticky {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    position: sticky;
+    top: 30px;
+    background-color: #ceeadd;
+    color: #005a20;
+}
+
+li.disabled.sticky.first {
+    font-weight: bold;
+}
+
+li.disabled.sticky.first {
+    top: 0;
+}
+
+span.pagination {
+    float: right;
+}
+
+button.page-selector {
+    display: none;
+}
+
+button.page-selector:disabled,
+button.page-selector[disabled] {
+    color: #f8f9fa !important;
+    background-color: rgba(245, 245, 245, 0.75) !important;
+}
+
+.document-view {
+    border: 2px solid #dee2e6;
+    padding: 0.5em 0.5em 0.5em 0.5em;
+    position: relative;
+    text-align: initial; /* Reset alignment so RTL works */
+}
+
+li.tag-current {
+    background-color: #f8f9fa;
+}
+
+.backlight {
+    color: #bbb;
+}
+
+/*#export-button {*/
+/*  position: absolute;*/
+/*  top: .1em;*/
+/*  right: .5em;*/
+/*}*/
+
+#export-button .dropdown-toggle {
+    padding: 0.125rem 0.25rem;
+}
+
+a.dropdown-item:hover {
+    color: white !important;
+    text-decoration: none;
+}
+
+#document-view .highlight {
+    color: black;
+    text-decoration: none;
+}
+
+#document-view .flash-once {
+    animation: flashOnceBackground 2s;
+}
+@keyframes flashOnceBackground {
+    0% {
+        background-color: #fff;
+    }
+    50% {
+        background-color: #92b2cb;
+    }
+    100% {
+        background-color: #fff;
+    }
+}
+
+#hlinfo {
+    display: none;
+    position: absolute;
+    background-color: white;
+    border: 1px solid grey;
+    padding: 0.2em;
+    z-index: 9999999;
+}
+
+#hlinfo em {
+    text-decoration: underline;
+    font-style: normal;
+}
+
+.list-group-item-primary a {
+    color: #404041;
+}
+
+.list-group .sublist {
+    padding-left: 0;
+    margin: 5px -20px -12px 5px;
+    border-top: 1px solid #dee2e6;
+    display: flex;
+    flex-direction: column;
+}
+
+.list-group .sublist li {
+    padding: 12px 20px;
+}
+
+.dropdown-item.active {
+    background-color: #e7f2ff !important;
+}
+
+.expand-marker {
+    width: 7px;
+}
+
+.highlight-entry {
+    border: 3px dotted rgba(0, 0, 0, 0.125);
+    margin: 1rem 0;
+    padding: 1rem 0.6rem 1rem 0.6rem;
+    border-radius: 10px;
+}
+
+/* Badge row in highlight entries: principal left, associated right */
+.badge-outline-tag {
+    font-size: 0.85em;
+}
+
+/* SVG underlines in highlight results */
+.tag-underline-svg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    overflow: visible;
+}
+
+.draggable {
+    /*cursor: grab;*/
+    user-select: none;
+}
+
+.smooth-stroke {
+    transition: stroke-width 0.3s ease-in-out;
+}
+
+/* Left middle right panel styles */
+
+#middle-panel {
+    padding-bottom: 150px;
+}
+
+.col-md-2-5 {
+    width: 20.8333% !important;
+    transition: all 0.3s ease-in-out;
+}
+
+.col-md-7-5 {
+    width: calc(100% - 41.6666%) !important;
+}
+
+@media (max-width: 768px) {
+    .col-md-2-5,
+    .col-md-7-5 {
+        width: 100% !important;
+        margin-bottom: 1rem;
+    }
+
+    .order-1 {
+        margin-bottom: 2rem;
+    }
+
+    .row .reduced-col,
+    div.reduced-col {
+        flex: 0 0 100% !important;
+        max-width: 100% !important;
+        height: 50px !important;
+        width: 100% !important;
+    }
+
+    .bordered-container {
+        height: auto !important;
+    }
+
+    .btn-outline-secondary i {
+        transform: rotate(180deg);
+    }
+
+    .reduced-col .btn-outline-secondary i {
+        transform: rotate(-360deg) !important;
+    }
+}
+
+.btn-outline-secondary i {
+    transition: transform 0.3s;
+}
+
+.reduced-col .btn-outline-secondary i {
+    transform: rotate(180deg);
+}
+
+.reduced-col {
+    flex: 0 0 5% !important;
+    max-width: 5% !important;
+    overflow: hidden;
+}
+
+.reduced-col .panel-content {
+    display: none;
+}
+
+.expanded-col {
+    flex: 0 0 70% !important;
+    max-width: 70% !important;
+}
+
+.bordered-container {
+    border: 1px solid #ddd;
+    padding: 10px;
+    border-radius: 5px;
+    z-index: 0;
+}
+
+.dropdown-toggle {
+    width: 100%;
+}
+
+[contenteditable] {
+    outline: 0 solid transparent;
+}
+
+.tag-badges {
+    /*position: absolute;*/
+    right: 2px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 3px;
+}
+
+@media (max-width: 1430px) {
+    .tag-badges {
+        flex-direction: column;
+    }
+}
+
+#dropdownMenuButtonTag {
+    letter-spacing: -0.5px !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.expand-icon {
+    color: #005a20;
+    min-width: 22px;
+    padding: 2px;
+    border-radius: 5px;
+}
+
+.expand-icon:hover {
+    border: 0.25px solid #005a20;
+}
+
+.tag-text {
+    font-size: 1rem !important;
+    letter-spacing: -0.5px !important;
+    white-space: normal !important;
+    overflow: visible !important;
+    /*text-overflow: ellipsis !important;*/
+    max-width: 200px !important;
+    max-height: 25px !important;
+    display: inline-block;
+    padding-right: 5px;
+}
+
+/* Spinner animation */
+#spinner {
+    border: 3vh solid #dcdcdc;
+    border-top: 3vh solid #018849;
+    border-radius: 50%;
+    width: 30vh;
+    height: 30vh;
+    animation: spinneranim 2s linear infinite;
+}
+
+@keyframes spinneranim {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+#spinner-modal .modal-dialog {
+    display: table;
+    position: relative;
+    margin: 0 auto;
+    top: calc(50% - 15vh);
+}
+
+#spinner-modal .modal-dialog .modal-content {
+    background-color: transparent;
+    border: none;
+    width: 30vh;
+}
+
+#spinner-modal button.cancel {
+    display: none;
+    margin-top: 1em;
+}
+
+#progress {
+    margin-top: -15vh;
+    margin-bottom: 15vh;
+    width: 20vh;
+    text-align: center;
+    margin-left: 5vh;
+}
+
+.progress-bar {
+    background-color: #018849;
+}
+
+/* --------------------SCROLLBAR FOR MODALS--------------------------*/
+
+.modal-body {
+    max-height: calc(100vh - 210px);
+    overflow-y: auto;
+}
+
+.modal-body.no-scroll {
+    max-height: calc(100vh - 210px);
+    overflow-y: unset;
+}
+
+/* --------------------RESPONSIVE DISPLAY HEADINGS--------------------------*/
+@media (max-width: 575.98px) {
+    .display-1 {
+        font-size: 3rem;
+        font-weight: 300;
+        line-height: 1;
+    }
+    .display-2 {
+        font-size: 2.75rem;
+        font-weight: 300;
+        line-height: 1;
+    }
+    .display-3 {
+        font-size: 2.25rem;
+        font-weight: 300;
+        line-height: 1;
+    }
+    .display-4 {
+        font-size: 1.75rem;
+        font-weight: 300;
+        line-height: 1;
+    }
+}
+
+/*========================
+Index project view custom
+=========================*/
+
+.main {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: rgb(33, 37, 41);
+    text-align: left;
+}
+
+/*========================
+ Home - Project card
+=========================*/
+
+.project-card {
+    display: flex;
+    flex-direction: column;
+    height: 230px;
+    width: 100%;
+    background-color: #fff;
+    text-align: left;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    margin-bottom: 20px;
+    transition: transform 0.3s ease;
+}
+
+.description-container {
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+    text-align: left;
+}
+
+.description-container p {
+    margin: 0;
+    text-align: left;
+}
+
+.description-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 0;
+}
+
+.stats-container {
+    z-index: 1;
+}
+
+.project-card .fas {
+    color: #018849;
+}
+
+.action {
+    background-color: #018849;
+}
+
+.project-card:hover {
+    transform: scale(1.05);
+    border: 2px solid #018849;
+}
+
+.icon-circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: #f8f9fa;
+    color: #333;
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+
+.project {
+    text-align: center;
+    font-size: 22px;
+    font-weight: 600;
+    color: #fff;
+}
+
+.star {
+    font-size: 20px !important;
+    color: #b1b4b7;
+}
+
+.dot {
+    font-size: 20px !important;
+    color: #b1b4b7;
+}
+
+.project-icon {
+    border-radius: 50%;
+    background-color: #018849;
+    width: 70px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: -10px;
+}
+
+.project-icon span {
+    color: #fff;
+    font-size: 36px;
+    font-weight: bold;
+}
+
+.project-card .name {
+    font-size: 20px;
+    color: #464e56;
+    font-weight: 600;
+    text-align: left;
+    white-space: normal;
+    word-wrap: break-word !important;
+    overflow: hidden;
+    text-overflow: clip;
+    max-width: 300px;
+    text-decoration: underline;
+}
+
+.empty i.fas,
+.empty .project-icon {
+    visibility: hidden;
+}
+
+.quote {
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: #fff;
+}
+
+.quote2 {
+    font-size: 14px;
+    font-weight: 500;
+    color: #868e94;
+    text-align: left;
+    overflow: auto;
+    max-height: 80px;
+    margin: 0;
+}
+
+.custom-hr {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 3px dotted #ccc !important;
+    text-align: center;
+    justify-content: center;
+    height: 0;
+    width: 100%;
+    background: transparent;
+    margin: 8px 0;
+}
+
+.no-underline,
+.no-underline:hover,
+.no-underline:visited,
+.no-underline:active {
+    text-decoration: none;
+}
+
+.tags-container {
+    border: 2px solid #ccc;
+    border-radius: 8px;
+    padding: 10px;
+    overflow: hidden;
+    background-color: #fff;
+}
+
+/*========================
+Document custom select
+=========================*/
+
+.custom-select {
+    position: relative;
+    width: 90%;
+    max-width: 100%;
+    font-size: 1.15rem;
+    color: #000;
+    z-index: 1;
+}
+
+@media (max-width: 768px) {
+    .custom-select {
+        width: 80%;
+    }
+}
+
+.select-button {
+    width: 100%;
+    height: 40px;
+    font-size: 1.15rem;
+    background-color: #fff;
+    padding: 0.675em 1em;
+    border: 1px solid #caced1;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.selected-value {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: left;
+    flex: 1;
+    margin-right: 10px;
+}
+
+.custom-select.active .selected-value {
+    white-space: normal;
+}
+
+.arrow {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid #000;
+    transition: transform ease-in-out 0.3s;
+}
+
+.select-dropdown {
+    position: absolute;
+    list-style: none;
+    width: 100%;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    background-color: #fff;
+    border: 1px solid #caced1;
+    border-radius: 0.5rem;
+    padding: 10px;
+    margin-top: 10px;
+    max-height: 200px;
+    overflow-y: auto;
+    transition: 0.5s ease;
+
+    transform: scaleY(0);
+    opacity: 0;
+    visibility: hidden;
+}
+
+.select-dropdown:focus-within {
+    box-shadow: 0 10px 25px rgba(94, 108, 233, 0.6);
+}
+
+.select-dropdown li {
+    position: relative;
+    cursor: pointer;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.create-document-option a {
+    width: 100%;
+    padding: 8px 10px;
+    cursor: pointer;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.create-document-option a:hover {
+    color: white;
+}
+
+.select-dropdown li label {
+    width: 100%;
+    padding: 8px 10px;
+    cursor: pointer;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.select-dropdown::-webkit-scrollbar {
+    width: 7px;
+}
+.select-dropdown::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 25px;
+}
+
+.select-dropdown::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 25px;
+}
+
+.select-dropdown li:hover,
+.select-dropdown input:checked ~ label {
+    background-color: #018849;
+    color: #f1f1f1;
+}
+
+.select-dropdown input:focus ~ label {
+    background-color: #dfdfdf;
+}
+
+.select-dropdown input[type="radio"] {
+    position: absolute;
+    left: 0;
+    opacity: 0;
+}
+
+/* interactivity */
+
+.custom-select.active .arrow {
+    transform: rotate(180deg);
+}
+
+.custom-select.active .select-dropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: scaleY(1);
+}
+
+/* document toolbar */
+
+.toolbar-container {
+    position: sticky;
+    top: 3.25em;
+    z-index: 10;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f8f9fa;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease-in-out;
+}
+
+body.scrolled .toolbar-container {
+    top: 0;
+    transition: all 0.3s ease-in-out;
+}
+
+#project-sidebar-open {
+    color: white;
+    cursor: pointer;
+    padding-right: 10px;
+    font-size: 1.5em;
+}
+
+/* project sidebar */
+.project-sidebar {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1025;
+    top: 0;
+    left: 0;
+    background-color: #fefefe;
+    overflow-x: hidden;
+    border: 3px solid #5a6268;
+    transition: 0.5s;
+}
+
+.project-sidebar-content {
+    position: relative;
+    top: 6%;
+    width: 100%;
+    text-align: left;
+}
+
+.close-project-navbar {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+    text-decoration: none;
+}
+
+/* Backlight checkbox */
+.custom-checkbox {
+    display: inline-block;
+    position: relative;
+    padding-left: 25px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.custom-checkbox .custom-control-input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.custom-checkbox .custom-control-label:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 2px solid #018849;
+    border-radius: 4px;
+    background-color: white;
+}
+
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:after {
+    content: "✓";
+    position: absolute;
+    left: 4px;
+    top: -2px;
+    font-size: 18px;
+    color: #018849;
+}
+
+.custom-checkbox:hover .custom-control-input ~ .custom-control-label:before {
+    background-color: #f0f0f0;
+}
+
+.tag-selection-box {
+    display: none;
+    border: 1px solid #cccccc;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    border-radius: 10px;
+    background-color: #ffffff;
+    margin: 10px 0;
+    width: 100%;
+}
+
+.tag-badge {
+    color: white;
+    padding: 3px 8px;
+    border-radius: 15px;
+    margin-top: 15px;
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.8rem;
+}
+
+.tag-badge-button {
+    background-color: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+    margin-left: 5px;
+    font-size: 1rem;
+    font-weight: bold;
+}
+
+#clear-selection:hover i {
+    color: red;
+}
+
+#clear-selection {
+    display: block;
+    text-align: right;
+}
+
+.introjs-tooltip {
+    min-width: 30vw;
+    max-width: 30vw;
+}
+
+.introjs-prevbutton {
+    display: none;
+}
+
+button#start-tutorial {
+    position: fixed;
+    right: 50px;
+    bottom: 50px;
+}
+
+/* Tag highlight */
+.highlight-tag {
+    background-color: #edefe9 !important;
+    transition: background-color 1s ease;
+}
+
+.highlight-tag.fade-out {
+    background-color: transparent !important;
+}
+
+/* Collection highlight */
+.highlight-collection {
+    background-color: #edefe9 !important;
+    transition: background-color 1s ease;
+}
+
+.highlight-collection.fade-out {
+    background-color: transparent !important;
+}
+
+/* Document highlight */
+.highlight-document {
+    background-color: #edefe9 !important;
+    transition: background-color 1s ease;
+}
+
+.highlight-document.fade-out {
+    background-color: transparent !important;
+}
+
+/* Override bootstrap-treeview icon spacing for document treeview */
+body #treeview-documents span.icon {
+    margin-right: 10px !important;
+    width: 12px !important;
+}
+
+/* Indent only documents within collections, not collection names */
+#treeview-documents .document-link {
+    padding-left: 50px !important; /* All lines indented to same column */
+    padding-right: 60px !important; /* Space for edit and favorite icons */
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+/* Hierarchical collection display in document dispatch */
+#document-files-list select option {
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+#document-files-list select option[style*="padding-left"] {
+    color: #6c757d;
+    font-style: italic;
+}
+
+/* Document selection in collection modal */
+.document-item {
+    border: 1px solid #dee2e6;
+    background-color: #f8f9fa;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.document-item:hover:not(.selected) {
+    background-color: #e9ecef;
+}
+
+.document-item.selected {
+    background-color: #edefe9 !important;
+    color: #495057;
+    border-color: #c3d9c0;
+}
+
+/* Selected documents display */
+.selected-document-badge {
+    display: inline-block;
+    background-color: #edefe9;
+    color: #495057;
+    border: 1px solid #c3d9c0;
+    border-radius: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    margin: 0.125rem;
+    font-size: 0.875rem;
+}
+
+.selected-document-badge .remove-btn {
+    margin-left: 0.5rem;
+    cursor: pointer;
+    color: #6c757d;
+}
+
+.selected-document-badge .remove-btn:hover {
+    color: #dc3545;
+}
+
+#collection-add-modal .modal-body .col-md-4,
+#collection-add-modal .modal-body .col-md-8 {
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    padding-right: 1.5rem;
+}
+
+#collection-add-modal .modal-body .col-md-8:last-child {
+    border-right: none;
+    padding-left: 1.5rem;
+    padding-right: 0;
+}
+
+@media (max-width: 767.98px) {
+    #collection-add-modal .modal-body .col-md-4,
+    #collection-add-modal .modal-body .col-md-8 {
+        border-right: none;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        padding-right: 0;
+        padding-bottom: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    #collection-add-modal .modal-body .col-md-8:last-child {
+        border-bottom: none;
+        padding-left: 0;
+        padding-bottom: 0;
+        margin-bottom: 0;
+    }
+}
+
+/* Document file item */
+.document-file-item {
+    background-color: #f8f9fa;
+    transition: background-color 0.2s ease;
+}
+
+.document-file-item:hover {
+    background-color: #e9ecef;
+}
+
+.document-file-item .file-name {
+    font-weight: 500;
+    color: #495057;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 767.98px) {
+    .document-file-item {
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        gap: 0.75rem;
+    }
+
+    .document-file-item > div:first-child {
+        width: 100%;
+    }
+
+    .document-file-item .collection-selector {
+        width: 100%;
+        min-width: 100% !important;
+        flex-direction: column !important;
+        align-items: stretch !important;
+        gap: 0.5rem;
+    }
+
+    .document-file-item .collection-selector select {
+        width: 100% !important;
+        max-width: none !important;
+        margin-right: 0 !important;
+        order: 1;
+    }
+
+    .document-file-item .collection-selector button {
+        width: 100% !important;
+        order: 2;
+    }
+
+    #bulk-actions-container .d-flex {
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        gap: 0.75rem;
+    }
+
+    #bulk-actions-container .d-flex > div,
+    #bulk-actions-container .d-flex > button {
+        width: 100%;
+    }
+
+    #assign-all-collection-select {
+        width: 100% !important;
+        max-width: none !important;
+    }
+}
+
+.document-file-item .collection-selector select {
+    border: 1px solid #ced4da;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+}
+
+.document-file-item .collection-selector select:focus {
+    border-color: #80bdff;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.create-new-for-file {
+    min-width: 38px;
+    height: 31px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.create-new-for-file:hover {
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+    color: white;
+}
+
+.new-collection-indicator {
+    white-space: nowrap;
+    left: 0;
+    top: 100%;
+}
+
+.text-direction-selector {
+    font-size: 0.875rem;
+}
+
+.text-direction-selector option {
+    padding: 0.25rem 0.5rem;
+}
+
+.collection-selector {
+    min-width: 332px; /* 300px select + 32px button */
+}
+
+.document-file-item .collection-selector select {
+    width: 300px;
+    flex-shrink: 0;
+}
+
+.document-file-item .collection-selector button {
+    flex-shrink: 0;
+}
+
+.scroll-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.scroll-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 9999;
+    width: 40px;
+    height: 40px;
+}
+
+/* Multi-select tip */
+#multi-select-tip {
+    margin-bottom: 1rem;
+    background-color: #d4edda !important;
+    border-left: 4px solid #4f9b4b;
+    border-color: #4f9b4b !important;
+    color: #155724;
+    animation: slideInDown 0.4s ease-out;
+}
+
+#multi-select-tip .fa-lightbulb {
+    color: #4f9b4b;
+}
+
+@keyframes slideInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.badge-fixed-width {
+    width: 40px;
+    text-align: center;
+    display: inline-block;
+}
+
+line {
+    cursor: pointer;
+}
+
+/* Treeview help button */
+#treeview-help-icon {
+    padding: 0.4rem 0.6rem;
+    font-size: 1rem;
+}
+
+#treeview-help-icon:hover {
+    background-color: #f8f9fa;
+}
+
+/* Treeview help popover */
+.popover {
+    max-width: 350px;
+    background-color: #d4edda;
+    border: 1px solid #4f9b4b;
+    border-left: 4px solid #4f9b4b;
+}
+
+.popover-header {
+    background-color: #d4edda !important;
+    color: #155724 !important;
+    border-bottom: 1px solid #4f9b4b !important;
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.popover-body {
+    background-color: #d4edda;
+    color: #155724;
+    font-size: 1rem;
+}
+
+.popover-arrow::before,
+.popover-arrow::after {
+    border-right-color: #4f9b4b !important;
+}
+
+.bs-popover-start > .popover-arrow::after {
+    border-left-color: #d4edda !important;
+}
+
+/* Drag hint popup */
+.drag-hint-popup {
+    position: relative;
+    display: block;
+    background-color: #d4edda;
+    color: #155724;
+    padding: 1rem 1rem;
+    border-radius: 0.375rem;
+    border-left: 4px solid #4f9b4b;
+    border: 1px solid #4f9b4b;
+    font-size: 1rem;
+    font-weight: normal;
+    z-index: 1000;
+    animation: slideInDown 0.4s ease-out;
+    margin-bottom: 1rem;
+}
+
+.drag-hint-popup i {
+    margin-right: 0.5rem;
+    color: #4f9b4b;
+}
+
+@keyframes popupFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.8) translateY(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}