:root { --bs-border-width:1px; --bs-border-style:solid; --bs-border-color:#737373; --bs-border-color-translucent:rgba(255, 255, 255, 0.15); --bs-border-radius:0.375rem; --bs-border-radius-sm:0.25rem; --bs-border-radius-lg:0.5rem; --bs-border-radius-xl:1rem; --bs-border-radius-xxl:2rem; --bs-border-radius-pill:50rem; --bs-light-border-subtle:#495057; --bs-dark-border-subtle:#333333; --main-bs:#446E9B; --main-dk:#385A7F; --main-dkr:#2D4A69; --main-lig:#5E86B0; --bs-primary-border-subtle:#7CAAD9; --sec-bs:#777777; --sec-dk:#5D5D5D; --sec-dkr:#444444; --sec-lig:#999999; --bs-secondary-border-subtle:#5C5C5C; --succ-bs:#78C22A; --succ-dk:#2E921A; --succ-dkr:#227213; --succ-lig:#4FCC33; --bs-success-border-subtle:#246D14; --dang-bs:#CD0200; --dang-dk:#A90200; --dang-dkr:#8A0100; --dang-lig:#F41310; --bs-danger-border-subtle:#7B0100; --warn-bs:#FEB204; --warn-dk:#FF8503; --warn-dkr:#D53600; --warn-lig:#FFBF00; --bs-warning-border-subtle:#C78500; --info-bs:#3399F3; --info-dk:#117BE0; --info-dkr:#0B66BC; --info-lig:#5DB1FF; --bs-info-border-subtle:#1F5C92; --light-bs:#EEEEEE; --light-dk:#DDDDDD; --light-dkr:#CCCCCC; --light-lig:#F8F9FA; --dark-bs:#333333; --dark-dk:#2D2D2D; --dark-dkr:#222222; --dark-lig:#555555; --nav-bs:#0F79A1; --nav-hov:#1A95C3; --nav-act:#085C7C; --nav-acc:#57C3EE; --btn-borderW:1px; --btn-shadow:0 1px 3px rgba(0, 0, 0, 0.15); --btn-shadowHov:0 3px 6px rgba(0, 0, 0, 0.2); --bs-pagination-bg:#1A2332; --bs-pagination-border-color:#2D3748; --bs-pagination-color:#E2E8F0; --bs-pagination-hover-bg:#2D3748; --bs-pagination-hover-border-color:#4A5568; --bs-pagination-hover-color:#FFFFFF; --bs-pagination-active-bg:#3182CE; --bs-pagination-active-border-color:#3182CE; --bs-pagination-active-color:#FFFFFF; --bs-pagination-disabled-bg:#1A2332; --bs-pagination-disabled-border-color:#2D3748; --bs-pagination-disabled-color:#718096; --bs-pagination-focus-box-shadow:0 0 0 0.2rem rgba(49, 130, 206, 0.25); --shadow-box-white:0 0px 2px rgba(255, 255, 255, 0.67); }

.txt-c { text-align: center; }

.w-10 { width: 10%; }

.tag.w-10 { width: 10% !important; overflow: hidden !important; }

.w-11 { width: 11%; }

.tag.w-11 { width: 11% !important; overflow: hidden !important; }

.w-12 { width: 12%; }

.tag.w-12 { width: 12% !important; overflow: hidden !important; }

.w-13 { width: 13%; }

.tag.w-13 { width: 13% !important; overflow: hidden !important; }

.w-14 { width: 14%; }

.tag.w-14 { width: 14% !important; overflow: hidden !important; }

.w-15 { width: 15%; }

.tag.w-15 { width: 15% !important; overflow: hidden !important; }

.w-16 { width: 16%; }

.tag.w-16 { width: 16% !important; overflow: hidden !important; }

.w-17 { width: 17%; }

.tag.w-17 { width: 17% !important; overflow: hidden !important; }

.w-18 { width: 18%; }

.tag.w-18 { width: 18% !important; overflow: hidden !important; }

.w-19 { width: 19%; }

.tag.w-19 { width: 19% !important; overflow: hidden !important; }

.w-20 { width: 20%; }

.tag.w-20 { width: 20% !important; overflow: hidden !important; }

.w-21 { width: 21%; }

.tag.w-21 { width: 21% !important; overflow: hidden !important; }

.w-22 { width: 22%; }

.tag.w-22 { width: 22% !important; overflow: hidden !important; }

.w-23 { width: 23%; }

.tag.w-23 { width: 23% !important; overflow: hidden !important; }

.w-24 { width: 24%; }

.tag.w-24 { width: 24% !important; overflow: hidden !important; }

.w-25 { width: 25%; }

.tag.w-25 { width: 25% !important; overflow: hidden !important; }

.w-26 { width: 26%; }

.tag.w-26 { width: 26% !important; overflow: hidden !important; }

.w-27 { width: 27%; }

.tag.w-27 { width: 27% !important; overflow: hidden !important; }

.w-28 { width: 28%; }

.tag.w-28 { width: 28% !important; overflow: hidden !important; }

.w-29 { width: 29%; }

.tag.w-29 { width: 29% !important; overflow: hidden !important; }

.w-30 { width: 30%; }

.tag.w-30 { width: 30% !important; overflow: hidden !important; }

.w-31 { width: 31%; }

.tag.w-31 { width: 31% !important; overflow: hidden !important; }

.w-32 { width: 32%; }

.tag.w-32 { width: 32% !important; overflow: hidden !important; }

.w-33 { width: 33%; }

.tag.w-33 { width: 33% !important; overflow: hidden !important; }

.w-34 { width: 34%; }

.tag.w-34 { width: 34% !important; overflow: hidden !important; }

.w-35 { width: 35%; }

.tag.w-35 { width: 35% !important; overflow: hidden !important; }

.w-36 { width: 36%; }

.tag.w-36 { width: 36% !important; overflow: hidden !important; }

.w-37 { width: 37%; }

.tag.w-37 { width: 37% !important; overflow: hidden !important; }

.w-38 { width: 38%; }

.tag.w-38 { width: 38% !important; overflow: hidden !important; }

.w-39 { width: 39%; }

.tag.w-39 { width: 39% !important; overflow: hidden !important; }

.w-40 { width: 40%; }

.tag.w-40 { width: 40% !important; overflow: hidden !important; }

.w-41 { width: 41%; }

.tag.w-41 { width: 41% !important; overflow: hidden !important; }

.w-42 { width: 42%; }

.tag.w-42 { width: 42% !important; overflow: hidden !important; }

.w-43 { width: 43%; }

.tag.w-43 { width: 43% !important; overflow: hidden !important; }

.w-44 { width: 44%; }

.tag.w-44 { width: 44% !important; overflow: hidden !important; }

.w-45 { width: 45%; }

.tag.w-45 { width: 45% !important; overflow: hidden !important; }

.w-46 { width: 46%; }

.tag.w-46 { width: 46% !important; overflow: hidden !important; }

.w-47 { width: 47%; }

.tag.w-47 { width: 47% !important; overflow: hidden !important; }

.w-48 { width: 48%; }

.tag.w-48 { width: 48% !important; overflow: hidden !important; }

.w-49 { width: 49%; }

.tag.w-49 { width: 49% !important; overflow: hidden !important; }

.w-50 { width: 50%; }

.tag.w-50 { width: 50% !important; overflow: hidden !important; }

.w-51 { width: 51%; }

.tag.w-51 { width: 51% !important; overflow: hidden !important; }

.w-52 { width: 52%; }

.tag.w-52 { width: 52% !important; overflow: hidden !important; }

.w-53 { width: 53%; }

.tag.w-53 { width: 53% !important; overflow: hidden !important; }

.w-54 { width: 54%; }

.tag.w-54 { width: 54% !important; overflow: hidden !important; }

.w-55 { width: 55%; }

.tag.w-55 { width: 55% !important; overflow: hidden !important; }

.w-56 { width: 56%; }

.tag.w-56 { width: 56% !important; overflow: hidden !important; }

.w-57 { width: 57%; }

.tag.w-57 { width: 57% !important; overflow: hidden !important; }

.w-58 { width: 58%; }

.tag.w-58 { width: 58% !important; overflow: hidden !important; }

.w-59 { width: 59%; }

.tag.w-59 { width: 59% !important; overflow: hidden !important; }

.w-60 { width: 60%; }

.tag.w-60 { width: 60% !important; overflow: hidden !important; }

.w-61 { width: 61%; }

.tag.w-61 { width: 61% !important; overflow: hidden !important; }

.w-62 { width: 62%; }

.tag.w-62 { width: 62% !important; overflow: hidden !important; }

.w-63 { width: 63%; }

.tag.w-63 { width: 63% !important; overflow: hidden !important; }

.w-64 { width: 64%; }

.tag.w-64 { width: 64% !important; overflow: hidden !important; }

.w-65 { width: 65%; }

.tag.w-65 { width: 65% !important; overflow: hidden !important; }

.w-66 { width: 66%; }

.tag.w-66 { width: 66% !important; overflow: hidden !important; }

.w-67 { width: 67%; }

.tag.w-67 { width: 67% !important; overflow: hidden !important; }

.w-68 { width: 68%; }

.tag.w-68 { width: 68% !important; overflow: hidden !important; }

.w-69 { width: 69%; }

.tag.w-69 { width: 69% !important; overflow: hidden !important; }

.w-70 { width: 70%; }

.tag.w-70 { width: 70% !important; overflow: hidden !important; }

.w-71 { width: 71%; }

.tag.w-71 { width: 71% !important; overflow: hidden !important; }

.w-72 { width: 72%; }

.tag.w-72 { width: 72% !important; overflow: hidden !important; }

.w-73 { width: 73%; }

.tag.w-73 { width: 73% !important; overflow: hidden !important; }

.w-74 { width: 74%; }

.tag.w-74 { width: 74% !important; overflow: hidden !important; }

.w-75 { width: 75%; }

.tag.w-75 { width: 75% !important; overflow: hidden !important; }

.w-76 { width: 76%; }

.tag.w-76 { width: 76% !important; overflow: hidden !important; }

.w-77 { width: 77%; }

.tag.w-77 { width: 77% !important; overflow: hidden !important; }

.w-78 { width: 78%; }

.tag.w-78 { width: 78% !important; overflow: hidden !important; }

.w-79 { width: 79%; }

.tag.w-79 { width: 79% !important; overflow: hidden !important; }

.w-80 { width: 80%; }

.tag.w-80 { width: 80% !important; overflow: hidden !important; }

.w-81 { width: 81%; }

.tag.w-81 { width: 81% !important; overflow: hidden !important; }

.w-82 { width: 82%; }

.tag.w-82 { width: 82% !important; overflow: hidden !important; }

.w-83 { width: 83%; }

.tag.w-83 { width: 83% !important; overflow: hidden !important; }

.w-84 { width: 84%; }

.tag.w-84 { width: 84% !important; overflow: hidden !important; }

.w-85 { width: 85%; }

.tag.w-85 { width: 85% !important; overflow: hidden !important; }

.w-86 { width: 86%; }

.tag.w-86 { width: 86% !important; overflow: hidden !important; }

.w-87 { width: 87%; }

.tag.w-87 { width: 87% !important; overflow: hidden !important; }

.w-88 { width: 88%; }

.tag.w-88 { width: 88% !important; overflow: hidden !important; }

.w-89 { width: 89%; }

.tag.w-89 { width: 89% !important; overflow: hidden !important; }

.w-90 { width: 90%; }

.tag.w-90 { width: 90% !important; overflow: hidden !important; }

.w-91 { width: 91%; }

.tag.w-91 { width: 91% !important; overflow: hidden !important; }

.w-92 { width: 92%; }

.tag.w-92 { width: 92% !important; overflow: hidden !important; }

.w-93 { width: 93%; }

.tag.w-93 { width: 93% !important; overflow: hidden !important; }

.w-94 { width: 94%; }

.tag.w-94 { width: 94% !important; overflow: hidden !important; }

.w-95 { width: 95%; }

.tag.w-95 { width: 95% !important; overflow: hidden !important; }

.w-96 { width: 96%; }

.tag.w-96 { width: 96% !important; overflow: hidden !important; }

.w-97 { width: 97%; }

.tag.w-97 { width: 97% !important; overflow: hidden !important; }

.w-98 { width: 98%; }

.tag.w-98 { width: 98% !important; overflow: hidden !important; }

.w-99 { width: 99%; }

.tag.w-99 { width: 99% !important; overflow: hidden !important; }

.w-100 { width: 100%; }

.tag.w-100 { width: 100% !important; overflow: hidden !important; }

ul { margin-bottom: 0; padding-left: 1rem; }

div .inline { display: inline-block; }

div .txt-AL { text-align: left; }

button { text-decoration: none; }

html, body { margin: 0; padding: 0; }

body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background-color: #505050; color: #efefef; min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; }

.navbar { padding: 5px 10px 8px 10px !important; }

h3 { font-size: 1.68rem; }

.hide { display: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track { background: #1a1a1a; }

::-webkit-scrollbar-thumb { background: #555555; border-radius: 4px; }

::-webkit-scrollbar-thumb:hover { background: #777777; }

.fake-checkbox { pointer-events: none; display: inline-block; width: 1rem; height: 1rem; margin-right: 0.5rem; vertical-align: sub; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid #adb5bd; border-radius: 0.25em; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }

.fake-checkbox.checked { background-color: #0d6efd; border-color: #0d6efd; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }

.page .side { flex: 0 0 250px; min-width: 200px; max-width: 300px; }

.page > div > div > .body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3px 8px; padding: 12px; }

.page > div > div > .body .body-header { display: flex; justify-content: space-between; margin: 0 10px 6px 10px; }

.page > div > div > .body > .main { flex: 0 0 calc(100vw - 300px); margin-left: auto; }

.page > div > div > .body > .main ~ div { flex: 1 0 50vw; }

.sidebar { position: relative; width: 0; height: 0; }

.sidebar > div:first-child { margin-top: 23px; }

.sidebar > div { margin-top: 12px; margin-left: 12px; width: 250px; }

.sidebar > div small { font-size: 12px; }

.footer { margin-top: auto; border-top: 1px solid #333333; background-color: #212121; padding: 15px 0; text-align: center; width: 100%; color: #a0a0a0; margin-bottom: 0; box-sizing: border-box; position: relative; }

.footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; z-index: 1; background: linear-gradient(to right, color-mix(in srgb, var(--nav-bs) 30%, transparent), color-mix(in srgb, var(--nav-acc) 50%, transparent), color-mix(in srgb, var(--nav-bs) 30%, transparent)); }

.alert.fade { transition: opacity 0.5s linear !important; }

.progress-container { margin: 20px 0; }

.progress { height: 15px; border-radius: 5px; background-color: #333333; }

.progress-bar { transition: width 0.5s ease-in-out; }

.pagination-control { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; }

.photo-details { padding: 10px; background-color: #3a3a3a; border-radius: 5px; margin-top: 10px; }

.photo-comparison-container { position: relative; width: 100%; overflow: hidden; margin: 20px 0; }

.selected-photo { border: 3px solid #3772ff !important; }

.duplicate-group { padding: 15px; margin-bottom: 20px; border: 1px solid #444444; border-radius: 5px; background-color: #3a3a3a; }

.loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: #3772ff; border-radius: 50%; animation: spin 1s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.info-label { font-size: 14px; color: #a0a0a0; margin-right: 5px; }

.info-value { font-size: 14px; font-weight: 500; color: #e0e0e0; }

/*======================== Modal ========================*/
.modal .modal-header { padding: 8px; }

.modal .modal-header span:first-child { margin: 0px auto auto 10px; color: #bbbbbb; }

.modal .modal-header button { font-size: 13px; }

.modal .btn-close { color: red; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M1.707 1.707a2 2 0 0 1 2.828 0L8 5.172l3.465-3.465a2 2 0 1 1 2.828 2.828L10.828 8l3.465 3.465a2 2 0 0 1-2.828 2.828L8 10.828l-3.465 3.465a2 2 0 0 1-2.828-2.828L5.172 8 1.707 4.535a2 2 0 0 1 0-2.828'/%3e%3c/svg%3e"); border: 1px solid #bbbbbb; margin-right: 10px; }

.modal-content { border-radius: 12px; box-shadow: 0 0 12px 5px rgba(255, 255, 255, 0.3); background-color: #3a3a3a; border: 1px solid #5db1ff99; }

.modal-header { border-bottom: 1px solid #333333; background-color: #212121; color: #e0e0e0; border-top-left-radius: 12px; border-top-right-radius: 12px; font-size: 15px; }

.modal-body { color: #e0e0e0; margin: 10px 20px 20px 20px; text-align: center; font-size: 17px; }

.modal-footer { border-top: 1px solid #333333; background-color: #212121; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

.modal-dialog.img-pop .modal-body { margin: auto; text-align: center; padding: 5px 0px; }

.img-pop img { max-width: 98vw; margin: auto; }

.img-pop.auto img, .img-pop.auto .livephoto video { max-height: calc(100vh - 70px); }

.img-pop .modal-header { background: #385a7f; }

.img-pop .modal-body { flex: none; padding: 0; max-height: calc(100vh - 70px); overflow: auto; }

.img-pop .modal-content { max-height: 100vh; }

.img-pop .livephoto { position: relative; }

.img-pop .livephoto video { width: 100%; height: auto; max-height: 80vh; object-fit: contain; }

.img-pop .livephoto .ctrls { position: absolute; bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.7); padding: 8px 16px; border-radius: 20px; display: flex; align-items: center; gap: 10px; transition: opacity 0.3s ease; opacity: 0; }

.img-pop .livephoto .ctrls .play-pause-btn { background: none; border: none; color: white; cursor: pointer; font-size: 16px; padding: 4px; }

.img-pop .livephoto .ctrls .progress-bar { width: 200px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; position: relative; cursor: pointer; }

.img-pop .livephoto .ctrls .progress-bar .progress-fill { height: 100%; background: #4acdff; border-radius: 2px; transition: width 0.1s ease; }

.img-pop .livephoto .ctrls .time-display { color: white; font-size: 12px; min-width: 60px; text-align: center; }

.img-pop .livephoto:hover .ctrls { opacity: 1; }

.img-pop .acts { position: fixed; bottom: 0; margin: auto auto 10px auto; z-index: 1000; display: flex; justify-content: center; align-items: center; width: 96%; gap: 10px; }

.img-pop .acts span, .img-pop .acts button { box-shadow: 0 0 5px #1f5c92; }

.img-pop .acts.L { width: auto; justify-content: start; }

.img-pop .acts.R { width: auto; right: 0px; justify-content: end; }

.img-pop .acts.B { bottom: 42px; }

.img-pop .acts table { font-size: 13px; }

.img-pop .acts table td { text-align: left; }

.img-pop .acts table td:first-child { font-size: 11px; }

.img-pop .help { position: fixed; border: #1f5c92 1px solid; width: auto; right: 25px; top: 55%; background: rgba(30, 30, 30, 0.95); border-radius: 8px; padding: 12px; max-width: 280px; }

.img-pop .help.collapsed { padding: 8px; min-width: auto; }

.img-pop .help.collapsed .help-content { display: none; }

.img-pop .help .desc { position: relative; }

.img-pop .help .desc .help-content h6 { color: #4acdff; margin: 0; }

.img-pop .help .desc .help-content table { margin: 0; width: 100%; }

.img-pop .help .desc .help-content table td { padding: 4px 0; vertical-align: top; }

.img-pop .help .desc .help-content table td code { background: rgba(74, 205, 255, 0.15); color: #4acdff; padding: 2px 6px; border-radius: 4px; font-size: 12px; }

.img-pop .info { position: fixed; border: #1f5c92 1px solid; width: auto; left: 10px; top: 55%; background: rgba(30, 30, 30, 0.95); border-radius: 8px; padding: 12px; max-width: 350px; max-height: 400px; overflow: auto; }

.img-pop .info.collapsed { padding: 8px; min-width: auto; }

.img-pop .info.collapsed .info-content { display: none; }

.img-pop .info .desc { position: relative; }

.img-pop .info .desc .info-content h6 { color: #4acdff; margin: 0 0 8px 0; }

.img-pop .info .desc .info-content table { margin: 0; width: 100%; background: transparent; color: #e0e0e0; }

.img-pop .info .desc .info-content table td { padding: 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.img-pop .info .desc .info-content table td:first-child { font-weight: bold; color: #4acdff; width: 28%; padding: 0 0 0 0; }

.tag { display: inline-block; border: #e0e0e099 1px solid; padding: 0 4px 0 4px; margin: 1px 3px; border-radius: 5px; font-size: 12px !important; vertical-align: middle; background: #2d4a69; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

.tag.multiline { white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; display: block; line-height: 1.25; }

.tag.warp { white-space: normal !important; overflow: visible !important; }

.tag.second { background: #4a4a4a; }

.tag.info { background: #6daa2b; }

.tag.blue { background: #3399f6; }

.tag.red { background: #a90200; }

.tag.warn { background: #f38c12; }

.tag.sm { font-size: 10px !important; padding: 0 2px 2px 5px; }

.tag.lg { font-size: 15px !important; padding: 0 4px 2px 4px; }

.tag.xl { font-size: 19px !important; padding: 0 8px 2px 8px; }

.tag.no-border { border: none; }

/* Exif info tooltip styling */
.tooltip-exif-info .tooltip-inner { padding: 10px !important; background-color: rgba(20, 20, 20, 0.95) !important; backdrop-filter: blur(5px) !important; border: 1px solid var(--info-dkr) !important; }

.exif-badge { cursor: pointer !important; transition: all 0.2s ease-in-out !important; }

.exif-badge:hover { transform: scale(1.1) !important; box-shadow: 0 0 5px rgba(87, 195, 238, 0.7) !important; }

.navLnk { color: #e0e0e0 !important; border-radius: 6px; padding: 8px 15px !important; transition: all 0.3s ease; position: relative; margin: 0 5px; overflow: hidden; font-weight: 500; letter-spacing: 0.3px; background: var(--nav-bs); }

.navLnk::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--nav-acc); transition: all 0.3s ease; transform: translateX(-50%); }

.navLnk:hover { color: #ffffff !important; background-color: var(--nav-hov); transform: translateY(-2px); text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); text-decoration: none; animation: navHover 1s ease infinite; }

.navLnk:hover::before { width: 100%; }

.navLnk.active { color: #ffffff !important; background-color: var(--nav-act); font-weight: 600; animation: pulse 2s infinite; }

.navLnk.active::before { width: 100%; height: 3px; }

.navLnk.disabled { color: #d3d3d3 !important; pointer-events: none; opacity: 0.6; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); position: relative; border-radius: 6px; transform: none !important; animation: none !important; }

.navLnk span { display: flex; align-items: center; gap: 8px; }

.nav-glow { position: relative; }

.nav-glow::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(to right, color-mix(in srgb, var(--nav-bs) 70%, transparent), color-mix(in srgb, var(--nav-acc) 80%, transparent), color-mix(in srgb, var(--nav-bs) 70%, transparent)); }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 121, 161, 0.4); }
  70% { box-shadow: 0 0 0 5px rgba(15, 121, 161, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 121, 161, 0); } }

@keyframes navHover { 0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); } }

.popover { background-color: #2d2d2d !important; border-color: var(--bs-border-color) !important; }

.popover-header { background-color: #212121 !important; border-bottom-color: var(--bs-border-color) !important; color: #e0e0e0 !important; }

.popover-body { color: #e0e0e0 !important; }

.test { background: #0b66bc; color: #1a95c3; border: red 1px solid; }

/*======================== task ========================*/
.tskPanel { flex: inherit !important; width: 80vw; margin: 15px auto 15px auto; padding: 10px 30px 10px 30px; border-radius: 16px; border: 2px solid #4acdff99; box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); background: #2d4a69; background: #264a69; }

.tskPanel .progress { border: #999999 1px solid; }

.tskPanel.fly { position: fixed; top: 33vw; left: 10px; margin: 0; width: 48vw; z-index: 1050; box-shadow: 0 0 10px 3px #ffffff55; animation: slideIn 0.3s ease-out; }

.tskPanel button:not(:last-child) { margin-right: auto; }

.tskPanel > .msgs { display: flex; justify-content: space-between; }

.tskPanel > .msgs > * { width: inherit; }

.tskPanel > .msgs div:last-child { margin-left: auto; }

@keyframes slideIn { from { transform: translateX(100%);
    opacity: 0; }
  to { transform: translateX(0);
    opacity: 1; } }

/*======================== taber ========================*/
.ITab .nav-tabs { border: none; }

.ITab .nav > div { cursor: pointer !important; border-radius: 4px 4px 0 0; transition: all 0.2s ease; margin-right: 5px; }

.ITab .nav .nav-link { border: var(--bs-border-color) 1px solid; border-bottom: none; margin-bottom: 0; background: #666666; }

.ITab .nav .nav-link:hover { background: var(--main-dkr); }

.ITab .nav .nav-link.active { background: #3772ff; color: white; font-weight: 500; background: #385a7f; }

.ITab .nav .nav-link.dis { opacity: 0.5; cursor: not-allowed !important; pointer-events: none; background: #444444; color: #999999; }

.ITab .tab-acts { display: flex; justify-content: space-between; margin-bottom: 10px; padding-bottom: 5px; border-bottom: #cccccc 1px dotted; }

.ITab .tab-acts .left > button:not(:last-child) { margin-right: 6px; }

.ITab .tab-acts .left > button { margin-top: 20px; }

.ITab .tab-acts .right { display: flex; }

.ITab .tab-acts .right > div:not(:last-child) { margin: auto 6px auto auto; }

.ITab .tab-acts.floating { position: fixed; top: 0; left: 0; right: 0; z-index: 999; margin-bottom: 0; padding: 10px 15px 8px 15px; background: #2d4a69; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(204, 204, 204, 0.3); box-shadow: 0 2px 20px 10px rgba(0, 0, 0, 0.5); transform: translateY(-100%); transition: transform 0.3s ease-in-out; }

.ITab .tab-acts.floating.show { transform: translateY(0); }

.ITab .tab-acts.floating .left > button { margin-top: 0; }

.ITab .tab-acts-placeholder { height: 0; transition: height 0.3s ease-in-out; }

.ITab .tab-acts-placeholder.active { height: 60px; }

.ITab .tab-content { border-radius: 0 12px 12px 12px; border: 1px solid var(--bs-border-color); padding: 15px 10px 15px 10px; background: linear-gradient(to bottom, rgba(52, 99, 148, 0.5) 0%, rgba(52, 99, 148, 0.2) 10%, rgba(52, 99, 148, 0) 50%, rgba(52, 99, 148, 0.2) 90%, rgba(52, 99, 148, 0.5) 100%); }

.goto-top-btn { position: fixed; bottom: 30px; right: 30px; z-index: 1000; border: white 1px solid; background: #78c22a; color: white; border-radius: 20px; padding: 12px 26px; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 0 12px 12px rgba(255, 255, 255, 0.15); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease-in-out; }

.goto-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }

.goto-top-btn:hover { background-color: var(--main-dk); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes nfyFadeIn { from { opacity: 0;
    transform: translateY(-20px); }
  to { opacity: 1;
    transform: translateY(0); } }

.pager { display: inline-flex; list-style: none; padding: 6px 0 6px 0; margin: 5px auto 5px auto; border-radius: 6px; border: rgba(26, 149, 195, 0.4) 1px solid; box-shadow: 0 0 3px rgba(26, 149, 195, 0.5); }

.pager li:first-child .lnk { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }

.pager li:last-child .lnk { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

.pager .item.active .lnk { background-color: #667eea; border-color: #667eea; color: #ffffff; }

.pager .item.disabled { opacity: 0.5; cursor: not-allowed; }

.pager .item:not(.disabled) .lnk:hover { background-color: #62c0ff; border-color: #667eea; color: #ffffff; text-shadow: 0 0 3px #260564, 0 0 3px #2d3748; }

.pager .lnk { padding: 0.375rem 0.75rem; text-decoration: none; background-color: #2d3748; border-color: #4a5568; color: #e2e8f0; cursor: pointer; }

.pager .lnk:focus { box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); }

.pager-info { display: inline-flex; padding: 2px 10px 4px 10px; margin: 0 0 0 10px; font-size: 0.8rem; border-radius: 6px; background: #1f5c92; border: rgba(195, 195, 195, 0.3) 1px solid; box-shadow: 0 0 2px rgba(195, 195, 195, 0.5); }

.pager-size { display: inline-flex; font-size: 0.8rem; padding: 3px 6px 3px 6px; margin: 0 0 0 5px; border-radius: 6px; background: #1f5c92; border: rgba(195, 195, 195, 0.3) 1px solid; box-shadow: 0 0 2px rgba(195, 195, 195, 0.5); }

.pager-size select { font-size: 13px; padding: 2px 3px 2px 3px; text-align: center; }

.pager-size span { text-wrap: nowrap; vertical-align: middle; margin: 3px 0 0 3px; }

/*======================== common ========================*/
.curP { cursor: pointer !important; }

.card { border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; background-color: #3a3a3a; border: 1px solid #444444; }

.card:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }

.card-header { background-color: #212121; border-bottom: 1px solid #333333; }

.card-body { color: #e0e0e0; }

.card .igrid hr { margin: 0.6rem 0 0.3rem 0; }

.card .igrid.txt-sm { font-size: 12px; }

.card .igrid .row { margin-bottom: 3px !important; }

.card .igrid select { padding: 0; display: inline-block; width: 30px; text-align: center; }

.card .igrid .row > * { padding-left: 0.5rem; padding-right: 0.5rem; }

.card .igrid.divRows { padding: 2px 8px 2px 8px !important; }

.card .igrid.divRows > div { display: grid; grid-template-columns: 30% 70%; gap: 2px 2px; margin: 5px 6px; padding: 0; }

.card .igrid.divRows > div > *:nth-child(2n-1) { justify-self: center; white-space: nowrap; font-size: 12px; overflow: visible; padding: 0px; }

.card .igrid.divRows > div > *:nth-child(2n) { justify-self: start; }

.card .igrid .icriteria { display: grid; grid-template-columns: 28% repeat(4, 1fr); }

.card .igrid .icriteria span { overflow: hidden; text-wrap: balance; }

.card .igrid .icriteria.icriteria-wrap > *:nth-child(6) { grid-column-start: 2; }

.card .igrid .icriteria.icriteria-user > *:nth-child(2) { grid-column: span 2; }

.card .irow { font-size: 14px; margin: 0; }

.card .irow:not(:last-child) { border-bottom: 1px solid #888888aa; padding-bottom: 5px; }

.card .irow:nth-child(n + 2) { margin-top: 3px; }

.card .irow ul { margin-top: 3px; }

.card .irow li { font-size: 12px; color: #aaaaaa; }

.card .irow li b { font-size: 12px; }

.icbxs { margin-top: 3px; }

.icbxs > div { margin-right: 10px; display: inline-block; }

.icbxs label { margin-left: 10px; margin-right: 5px; }

.icbxs select { padding: 0; display: inline-block; width: 50px; text-align: center; }

.icbxs input { padding: 0 3px 0 3px; width: 130px; display: inline-block; }

.gv .hr { grid-column: 1 / -1; width: 100%; padding: 0.5rem 0; border-bottom: #999999 1px dashed; }

.gv .hr label { background: #6daa2b; border-radius: 6px; border: #6daa2b; padding: 5px 12px 7px 12px; text-shadow: 0 0 3px #4a4a4a; box-shadow: 0 0 3px #6daa2b; }

.card.sim { border: #555555 solid 3px; }

.card.sim.has-related { border: 2px solid var(--warn-bs) !important; box-shadow: 0 0 8px rgba(254, 178, 4, 0.3); }

.card.sim.has-related .card-header { background: linear-gradient(to right, rgba(254, 178, 4, 0.2), transparent); }

.card.sim.main { background: #1f5c92; background: #1f5c92; }

.card.sim.main .card-header { background: linear-gradient(to right, rgba(13, 110, 253, 0.15), transparent); }

.card.sim.rels { background: #4a4a4a; background: #4a4a4a; }

.card.sim.rels .card-header { background: linear-gradient(to right, rgba(13, 110, 253, 0.15), transparent); }

.card.sim .card-header .row > div:first-child { white-space: nowrap; overflow: hidden; }

.card.sim .card-header .row > div:last-child { text-align: right; }

.card.sim.checked { border: 3px solid var(--info-bs); }

.card.sim.view img, .card.sim.view video { object-fit: cover !important; }

.card.sim .viewer { position: relative; }

.card.sim .viewer:has(video) { background: #555555; }

.card.sim .viewer .view { height: 180px; width: 100%; }

.card.sim .viewer img, .card.sim .viewer video { position: absolute; object-fit: contain; height: 180px; width: 100%; cursor: pointer !important; z-index: 1; }

.card.sim .viewer img:hover, .card.sim .viewer video:hover { opacity: 1; transform: scale(1.02); transition: all 0.3s ease; cursor: pointer; box-shadow: 0 0 10px white; }

.card.sim .viewer video { z-index: 2; }

.card.sim .viewer i { margin-right: 4px; }

.card.sim .viewer > div { z-index: 2; }

.card.sim .viewer > div span, .card.sim .viewer > div div { pointer-events: auto; }

.card.sim .viewer > div.LT { position: absolute; top: 5px; left: 5px; display: flex; justify-content: start; pointer-events: none; }

.card.sim .viewer > div.RT { position: absolute; top: 5px; right: 5px; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }

.card.sim .viewer > div.LB { position: absolute; bottom: 5px; left: 5px; display: flex; justify-content: start; pointer-events: none; }

.card.sim .viewer > div.RB { position: absolute; bottom: 5px; right: 5px; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }

.card.sim .grid { display: grid; grid-template-columns: 20% 80%; gap: 2px 2px; margin: 5px 10px; padding: 0px; }

.card.sim .grid > *:nth-child(2n-1) { justify-self: center; white-space: nowrap; font-size: 12px; overflow: visible; padding: 0px; }

.card.sim .grid > *:nth-child(2n) { justify-self: start; }

.card.sim .tagbox { padding: 3px 10px 12px 10px; }

.card.sim .tagbox i { margin-right: 4px; }

.card.sim .exif { width: 90%; margin: 0 auto 0 auto; }

.card.sim .exif tr td { font-size: 12px; text-wrap: balance; overflow: hidden; text-overflow: ellipsis; }

.card.sim .exif tr td:first-child { color: #36ccff; font-size: 10px; width: 32%; }

.txt-sm { font-size: 0.75rem !important; }

.txt-smx { font-size: 0.6rem !important; }

.txt-c { text-align: center; }

.txt-r { text-align: right; }

.txt-l { text-align: left; }

/*======================== DivTip ========================*/
.divtip { position: relative; }

.divtip::after { content: attr(data-tooltip); position: absolute; background-color: rgba(0, 0, 0, 0.9); color: white; padding: 8px 12px; border-radius: 6px; font-size: 14px; white-space: pre-line; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; min-width: 200px; max-width: 400px; text-align: left; line-height: 1.4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }

.divtip::before { content: ""; position: absolute; border: 6px solid transparent; z-index: 1001; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }

.divtip::after { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.divtip::before { display: none; }

.divtip.T::after { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; }

.divtip.T::before { display: block; bottom: 100%; left: 50%; transform: translateX(-50%); border-top-color: rgba(0, 0, 0, 0.9); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; margin-bottom: 2px; }

.divtip.B::after { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; }

.divtip.B::before { display: block; top: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: rgba(0, 0, 0, 0.9); border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; margin-top: 2px; }

.divtip.L::after { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; }

.divtip.L::before { display: block; right: 100%; top: 50%; transform: translateY(-50%); border-left-color: rgba(0, 0, 0, 0.9); border-top-color: transparent; border-bottom-color: transparent; border-right-color: transparent; margin-right: 2px; }

.divtip.R::after { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; }

.divtip.R::before { display: block; left: 100%; top: 50%; transform: translateY(-50%); border-right-color: rgba(0, 0, 0, 0.9); border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; margin-left: 2px; }

.divtip:hover::after, .divtip:hover::before { opacity: 1; visibility: visible; }

.notify { position: fixed; top: 58px; left: 38px; max-width: 50vw; z-index: 199; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }

.notify .box { border-radius: 6px; opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; width: fit-content; max-width: 80vw; animation: nfyFadeIn 0.3s ease-out forwards; pointer-events: auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; font-weight: 500; }

.notify .box.info { background-color: #e8f5e8; border: 1px solid #4caf50; color: #1b5e20; box-shadow: 0 2px 4px rgba(56, 142, 60, 0.1); }

.notify .box.error { background-color: #ffebee; border: 1px solid #f44336; color: #b71c1c; box-shadow: 0 2px 4px rgba(211, 47, 47, 0.1); }

.notify .box.warn { background-color: #fff3e0; border: 1px solid #ff9800; color: #e65100; box-shadow: 0 2px 4px rgba(245, 124, 0, 0.1); }

.notify .box.success { background-color: #e8f5e8; border: 1px solid #4caf50; color: #1b5e20; box-shadow: 0 2px 4px rgba(56, 142, 60, 0.1); }

.notify .box.fade-out { opacity: 0; transform: translateY(20px); }

.notify .box.slide-out { opacity: 0; transform: translateX(-100%); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }

.notify .box .nfy-close { background: none; border: none; color: inherit; font-size: 18px; font-weight: bold; cursor: pointer; padding: 0; margin-left: 12px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 0.7; transition: opacity 0.2s ease; }

.notify .box .nfy-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }

.notify .alert { box-shadow: 0 0 3px 3px #ffffff66 !important; margin: 20px; text-shadow: 0 0 10px #1a1a1a; }

.poptip { display: none; z-index: 20; }

.poptip > div { padding: 8px 12px; border-radius: 8px; background: #333333cc; box-shadow: 0 0 5px #fff; white-space: nowrap; min-width: fit-content; }

.poptip-arrow { position: absolute; z-index: 21; color: #333333cc; font-size: 16px; }

.js-notify { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 10px; z-index: 9999; align-items: center; width: auto; height: auto; }

.js-notify .jsnfy { border-radius: 6px; opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; flex-grow: 0; flex-shrink: 0; width: fit-content; max-width: 80vw; }

.js-notify .jsnfy.info { background-color: #e8f5e8; border: 1px solid #4caf50; color: #1b5e20; box-shadow: 0 2px 4px rgba(56, 142, 60, 0.1); }

.js-notify .jsnfy.error { background-color: #ffebee; border: 1px solid #f44336; color: #b71c1c; box-shadow: 0 2px 4px rgba(211, 47, 47, 0.1); }

.js-notify .jsnfy.warn { background-color: #fff3e0; border: 1px solid #ff9800; color: #e65100; box-shadow: 0 2px 4px rgba(245, 124, 0, 0.1); }

.js-notify .jsnfy.success { background-color: #f5f5f5; border: 1px solid #e0e0e0; color: #616161; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.js-notify .jsnfy .box { padding: 12px 16px; display: flex; align-items: center; font-weight: 500; }

.js-notify .bi { margin-right: 8px; flex-shrink: 0; }

.js-notify .bi.rotating { display: inline-block; animation: spin 1.5s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }