.dropdown-header { border-radius: 10px; padding: 8px; border: 1px solid #ccc; background: white; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background-color: #f8f9fa; height: 40px; color: #666; } .dropdown-header.open { border-color: #1976d2; } .dropdown-container { position: relative; overflow: visible; width: 300px; margin: 10px 5px; } .select-icon svg { transition: transform 0.2s ease; } .dropdown-header.open .select-icon svg { transform: rotate(180deg); } .select-icon{ width: 14px; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } h1 { text-align: center; color: #1976d2; margin: 0 0 20px; font-weight: bold; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { text-decoration: none; background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-size: 100%; line-height: 1.15; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } body, button, input, select, optgroup, textarea { font-size: 17px; line-height: 1.5; max-width: 100%; } @media (max-width: 600px) { body, button, input, select, optgroup, textarea { font-size: 14px; } .btn-diagnosis, .btn-service{ min-width: 90px; } } h1, h2, h3, h4, h5, h6 { clear: both; } p { margin: 10px 0 0 0; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", courier, monospace; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } body { background: #f5f5f5; font-family: sans-serif; margin: 0; padding: 0; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } embed, iframe, object { max-width: 100%; } img { height: auto; max-width: 100%; } figure { margin: 1em 0; } table { margin: 0; width: 100%; } a { color: #0659a1; } a:hover, a:focus, a:active { color: #191970; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { background-color: #f7f8f9; border-color: #f0f0f0; padding: 8px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } select { } textarea { width: 100%; } .main-navigation { display: block; width: 100%; } .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { display: block; left: auto; } .main-navigation ul ul a { width: 200px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation li { position: relative; } .main-navigation a { display: block; text-decoration: none; } .menu-toggle, .main-navigation.toggled ul { display: block; } @media screen and (min-width: 37.5em) { .menu-toggle { display: none; } .main-navigation ul { display: flex; } } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; } .comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: flex; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { flex: 1 0 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; flex: 1 0 50%; } .sticky { display: block; } .post, .page { margin: 0 ; } .updated:not(.published) { display: none; } .page-links { clear: both; margin: 0 0 1.5em; } .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } .widget { margin: 0 0 1.5em; } .widget select { max-width: 100%; } .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .custom-logo-link { display: inline-block; } .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } .gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; } .gallery-item { display: inline-block; text-align: center; width: 100%; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } .gallery-caption { display: block; } .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; } .infinity-end.neverending .site-footer { display: block; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } #primary[tabindex="-1"]:focus { outline: 0; } .alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } #appendix-modal .modal-content { max-width: 750px; max-height: 70vh; height: auto; } .appendix-title { text-align: center; margin: 0 0 10px; font-size: 15px; font-weight: bold; } #appendix-modal { inset: 0; z-index: 9999; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); justify-content: center; align-items: center; animation: .3s ease-in fadeIn; } #appendix-modal .modal-title { margin-top: 0; width: 95%; font-size: 22px; margin-bottom: 20px; line-height: 1.2em; font-weight: 400; text-transform: none; } #appendix-modal .body-appendix-modal { overflow-y: auto; font-size: 14px; } .tooltip-popup { position: absolute; background: #4a4a4a; color: white; padding: 10px; border-radius: 10px; font-size: 14px; max-width: 315px; word-wrap: break-word; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10000; opacity: 0; transform: translateY(-5px); animation: tooltipFadeIn 0.2s ease forwards; text-align: center; } @keyframes tooltipFadeIn { to { opacity: 1; transform: translateY(0); } } .tooltip-popup::before { content: ''; position: absolute; top: -8px; left: var(--arrow-left); transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #4a4a4a; } .tooltip-popup.tooltip-bottom::before { top: auto; bottom: -8px; border-top: 8px solid #4a4a4a; border-bottom: none; } .tooltip-popup.tooltip-right::before { top: var(--arrow-top); left: -8px; transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #4a4a4a; border-left: none; } .tooltip-popup.tooltip-left::before { top: var(--arrow-top); left: auto; right: -8px; transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #4a4a4a; border-right: none; } .additional-codes-btn { display: block; width: 100%; margin-top: 12px; color: white; font-size: 13px; cursor: pointer; border-radius: 10px; transition: background 0.2s ease; } .dsg-table-container { transition: opacity 0.2s ease-in-out; opacity: 1; } .dsg-table-container.fading { opacity: 0; } tr.force-hover, tr.force-hover:hover, tr.tooltip-row-active, tr:hover, li:hover, li.tooltip-row-active, li.force-hover { background-color: #eaf4ff; box-shadow: inset 0px 0px 10px 1px #d3e8ff; } .row-fade-start, li.row-fade-start { background-color: #eaf4ff; } .row-fade-animate, li.row-fade-animate { transition: background-color 5s ease-out !important; } .sortable-header { position: relative; user-select: none; padding-right: 25px; } .sortable-header:hover { background-color: #f5f5f5; } .sort-arrows { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; } .sort-arrow { display: block; width: 12px; height: 10px; text-align: center; cursor: pointer; font-size: 10px; color: #ccc; border-radius: 2px; transition: all 0.2s ease; user-select: none; line-height: 10px; } .sort-arrow:hover { color: #0a54ad; background-color: #f0f8ff; } .sort-arrow.active { color: #2196F3; background-color: #e3f2fd; box-shadow: 0 1px 2px rgba(33, 150, 243, 0.3); } .sort-arrow.asc::before { content: "▲"; } .sort-arrow.desc::before { content: "▼"; } .icons-group { display: inline-flex; align-items: center; white-space: nowrap; vertical-align: middle; padding-left: 5px; } .episode-icon, .referral-icon, .note-icon, .observation-icon{ cursor: pointer; transition: all 0.2s ease; opacity: 0.8; height: 23px; width: 23px; border-radius: 4px; } .body-appendix-modal .episode-icon, .body-appendix-modal .referral-icon, .body-appendix-modal .note-icon, .body-appendix-modal .observation-icon { height: 20px; width: 20px; } @media (hover: hover) and (pointer: fine) { .episode-icon:hover, .referral-icon:hover, .note-icon:hover, .observation-icon:hover, .episode-icon.tooltip-active, .referral-icon.tooltip-active, .note-icon.tooltip-active, .observation-icon.tooltip-active{ transform: scale(1.1); opacity: 1; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 60%, transparent 100%); border-radius: 50%; transition: all 0.2s ease; } } @media (hover: none) and (pointer: coarse) { .episode-icon.tooltip-active, .referral-icon.tooltip-active, .note-icon.tooltip-active, .observation-icon.tooltip-active{ transform: scale(1.1); opacity: 1; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 60%, transparent 100%); border-radius: 50%; transition: all 0.2s ease; } } #modal-list li, #tab-content li { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; } #modal-list .icons-group, #tab-content .icons-group, #dsg-table-container .icons-group{ margin-left: auto; margin-bottom: 0; gap: 8px; } #modal-list li:last-child, #tab-content li:last-child { border-bottom: none; } .loading-container { position: relative; min-height: 100px; } .table-loading-overlay { display: flex !important; flex-direction: column; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.95); border-radius: 8px; justify-content: center; align-items: center; gap: 10px; z-index: 999; transition: opacity 0.3s ease; } .table-loading-overlay.hide { opacity: 0; } .meta-info, .floating-info-inside { opacity: 0; } #dsg-table-container.visible ~ * .meta-info, .table-ready .meta-info, .table-ready .floating-info-inside { opacity: 1; transition: opacity 0.5s ease; } .input-group, .all-services-wrapper { width: 300px; margin: 10px 5px; } .all-services-wrapper { transition: all 0.3s ease; } .all-services-button { width: 100%; padding: 10px 12px; border: none; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .all-services-button:not(:disabled) { background: #2196F3; color: white; box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2); } .all-services-button:not(:disabled):hover { background: #1976D2; box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3); } .all-services-button:not(:disabled):active { box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2); } .all-services-button:disabled { background: #e0e0e0; color: #9e9e9e; cursor: not-allowed; box-shadow: none; transform: none; } .empty-message { text-align: center; color: #ff0000; display: none; } .tab-button { padding: 5px 10px; background-color: #eee; border: none; cursor: pointer; border-radius: 10px; } .tab-button.active { background-color: #4a4a4a; color: white; } .tabs { display: flex; gap: 10px; margin: 10px 0 10px 0; } #tabs-container { grid-template-rows: auto 1fr; overflow: hidden; flex: 1; flex-direction: column; } #tabs-container #tab-content { overflow-y: auto; border-top: 1px solid #ccc; padding-top: 10px; margin-bottom: 10px; } #tab-content ul { list-style: none; padding: 0; margin: 0; } .custom-table-9 tbody tr td:nth-child(2) { text-align: left; vertical-align: middle; } #modal.dimmed::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2; pointer-events: auto; } #info-iframe { position: relative; z-index: 3; } .coeff-details-btn { background: none; border: none; padding: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; transition: color 0.2s ease; } .coeff-details-btn:hover { opacity: 1; background: #b3b2b2; } .coeff-details-btn .icon { width: 25px; height: 25px; } .loader { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 10px 0; } .modal-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } .spinner { width: 16px; height: 16px; border: 3px solid #ccc; border-top-color: #007bff; border-radius: 50%; animation: spin 1s linear infinite; } .spinner:nth-child(2) { animation-delay: 0.2s; } .spinner:nth-child(3) { animation-delay: 0.4s; } @keyframes spin { to { transform: rotate(360deg); } } .loading-title { text-align: center; font-weight: 600; margin-top: 5px; color: #333; } h1 { font-size: 1.5em; text-align: center; font-style: normal; font-weight: 400; color: #000; } h1 strong { font-weight: 700; } #scrollToTop, .entry-header, .main-navigation, .switch input { display: none; } .site-branding, .site-footer, .site-main { background-color: #fff; } .floating-info-inside, .slider { transition: background-color .3s; } #scrollToTop, button { color: #fff; cursor: pointer; } .close-btn, .coeff-badge, .site-branding, mark { font-weight: 700; } #scrollToTop, .close-btn, .input-group button, .switch, button { cursor: pointer; } .coeff-badge, .meta-info, .site-branding, .site-footer, td:not(:first-child), th:not(:first-child) { text-align: center; } #scrollToTop { position: fixed; bottom: 20px; right: 20px; width: 44px; height: 44px; min-width: 45px; background-color: #0006; font-size: 20px; border: none; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); z-index: 1000; transition: background-color .2s, transform .2s; } #scrollToTop:hover { background-color: #777777db; transform: translateY(-2px); } .site-branding { align-items: center; padding: 15px 40px; font-size: 25px; } .site-footer { padding: 10px 40px; font-size: 15px; } .site-title { margin: 0; padding: 0; } .site-main { width: auto; padding: 40px; margin: 20px auto; border-radius: 10px; max-width: 1400px; position: relative; } .site-title { position: relative; display: inline-block; padding-bottom: 10px; } .site-title::after { content: ''; position: absolute; width: 60%; height: 3px; background-color: #0a59a0; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 2px; } .floating-info-inside { position: absolute; display: flex; padding: 8px; top: 10px; right: 10px; z-index: 10; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); border: 1px solid #ccc; font-style: italic; height: 42px; width: 42px; } .slider, .switch { position: relative; } .floating-info-inside:hover, button:hover { background-color: #1565c0; } .autocomplete-wrapper { width: 100% } .toggle-group { display: flex; justify-content: center; gap: 20px; align-items: center; margin: 10px 5px; flex-wrap: wrap; min-height: 42px; } .switch { display: flex; align-items: center; -webkit-tap-highlight-color: transparent; } .slider { width: 40px; height: 22px; background-color: #ccc; border-radius: 50px; margin-right: 10px; } .coeff-0-6 .slider { background-color: #dd9f9f; } .coeff-0-8 .slider { background-color: #83a9cf; } .coeff-1-1 .slider { background-color: #7dc8c1; } .coeff-1-21 .slider { background-color: #b180ca; } .coeff-1-22 .slider { background-color: #72c877; } .coeff-1-3 .slider { background-color: #b180ca; } .slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; transition: transform .3s; } input:checked+.slider { background-color: #1c88f5; } input:checked+.slider::before { transform: translateX(18px); } .label-text { color: #333; } .autocomplete-box { border: 1px solid #ccc; z-index: 10; max-height: 250px; max-width: 300px; overflow-y: auto; width: 100%; display: none; border-radius: 10px; position: absolute; background: #fff; font-size: 14px; } .autocomplete-box div { padding: 8px; cursor: pointer; align-items: center; display: flex; border-bottom: 1px solid #f0f0f0; } .autocomplete-box div:hover { background-color: #f0f0f0; } .popup-text { white-space: normal; line-height: 1.5; color: #333; } .dod-coeff-cell { white-space: nowrap; user-select: none; } .fade-in { transition: opacity .3s; } .fade-out { opacity: 0; transition: opacity .2s; } .coeff-badge { display: inline-block; border-radius: 4px; padding: 3px 6px; font-size: 13px; min-width: 20px; } .coeff-0\.6 { background: #c14545; } .coeff-0\.8 { background: #1976d2; } .coeff-1\.1 { background: #009688; } .coeff-1\.2g { background: #2c8d31; } .coeff-1\.2d { background: #9108d5; } .coeff-1\.3 { background: #9108d5; } .coeff-0\.6:hover { background: #9b0101; } .coeff-0\.8:hover { background: #03519f; } .coeff-1\.1:hover { background: #006d63; } .coeff-1\.2g:hover { background: #227326; } .coeff-1\.2d:hover { background: #7005a5; } .coeff-1\.3:hover { background: #7005a5; } mark { background-color: #ff0; color: #000; } #dsg-table-container { opacity: 0; margin-top: 20px; transition: opacity 0.5s ease; overflow-y: visible; overflow-x: auto; -webkit-overflow-scrolling: touch; } #dsg-table-container.visible { opacity: 1; } #dsg-table-container.fading { opacity: 0; } .input-group, body.modal-open { overflow: hidden; } table { border-collapse: collapse; width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #cccccc; } .simple-table { border: 1px solid #cccccc; } .simple-table td:nth-child(1), .simple-table td:nth-child(3) { text-align: center; white-space: nowrap; } .simple-table td:nth-child(2) { text-align: left; } table.simple-table thead th { text-align: center; vertical-align: middle; } td, th { padding: 8px; overflow: visible; } th { background-color: #f2f2f2; } .custom-select { position: relative; display: inline-block; width: 100%; } .custom-select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 2rem; width: 100%; box-sizing: border-box; } button { padding: 6px 12px; background-color: #1976d2; border: none; border-radius: 10px; margin: 2px; } .btn-column { display: grid; grid-template-columns: 0.5fr 0.5fr; gap: 5px; align-items: center; } .btn-column-9 { display: grid; grid-template-columns: 0.5fr 0.5fr 0.5fr; gap: 5px; align-items: center; } .btn-diagnosis, .btn-diagnosis-9 { min-width: 95px; background-color: #0a54ad; } .btn-diagnosis:hover, .btn-diagnosis-9:hover { background-color: #004393; } .btn-service, .btn-service-9 { min-width: 95px; background-color: #d9821a; } .btn-service:hover, .btn-service-9:hover { background-color: #ca6e00; } .btn-position-9 { min-width: 95px; background-color: #009018; } .btn-position-9:hover { background-color: #006f13; } .btn-info, td, th { border: 1px solid #ccc; } #filter-service-id{ border: none; outline: 0; background-color: transparent; padding: 10px 12px; width: 100%; box-shadow: none; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); justify-content: center; align-items: center; z-index: 1000; animation: .3s ease-in fadeIn; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .modal.fade-out { animation: .2s ease-in forwards fadeOut; } .modal-content { position: relative; background-color: #fff; max-width: 1000px; width: 90%; height: 90%; padding: 20px; border-radius: 10px; display: flex; flex-direction: column; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .modal-content.slide-out-left { animation: slideOutLeft 0.3s ease-out forwards; } .modal-content.slide-in-right { animation: slideInRight 0.3s ease-out forwards; } .modal-content.slide-out-right { animation: slideOutRight 0.3s ease-out forwards; } .modal-content.slide-in-left { animation: slideInLeft 0.3s ease-out forwards; } .modal-content.fade-transition { animation: fadeTransition 0.4s ease-out forwards; } .modal-content.scale-transition { animation: scaleTransition 0.3s ease-out forwards; } @keyframes slideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeTransition { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes scaleTransition { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } .modal-search-group { position: relative; align-items: center; margin-bottom: 10px; display: none; } .modal-search-group .clear-btn { position: absolute; right: 0; background: #f7f8f9; font-size: 16px; cursor: pointer; color: #999; } .input-group, .meta-info { width: 300px; margin: 10px 5px; } .modal h2, .modal h3 { margin-top: 0; width: 95%; font-size: 25px; margin-bottom: 20px; line-height: 1.2em; font-weight: 400; text-transform: none; } .modal input { width: 100%; border: 1px solid #e1e1e1; border-radius: 10px; display: block; } .modal input:focus-within { outline: 0; border-color: #1976d2; } .modal ul, .body-appendix-modal ul { list-style: none; padding-left: 0; overflow-y: auto; flex-grow: 1; margin-top: 10px; margin-bottom: 10px; margin-left: 0; } .close-btn { position: absolute; top: 7px; right: 7px; font-size: 30px; color: #333; padding: 0 12px; } .close-btn:hover { color: red; } .clear-btn { min-width: unset; } .input-group { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 10px; background-color: #f8f9fa; height: 40px; } .input-group input { border: none; outline: 0; background-color: transparent; width: 100%; box-shadow: none; padding-right: 0; } .input-group button { border: none; background: 0 0; padding: 6px; font-size: 16px; color: #999; } .input-group:focus-within { border-color: #1976d2; } .meta-wrapper { display: flex; align-items: center; gap: 20px; } .meta-info { font-size: 14px; color: #555; } .filter-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; } @media (max-width:768px) { .site-main { padding: 30px; } .modal h2, .modal h3 { font-size: 22px; } .icons-group { gap: 4px; margin-left: 6px; } .episode-icon, .referral-icon, .note-icon, .observation-icon { height: 20px; width: 20px; } #modal-list li, #tab-content li { padding: 8px 8px; gap: 4px; } .filter-controls { gap: 5px!important; } .toggle-group { gap: 15px; } } @media (max-width:480px) { .site-main { padding-left: 20px; padding-right: 20px; } .tabs { display: grid; } }