.accordion { width: 100%; margin: 0 auto; } .accordion-item { margin-bottom: 0; background-color: var(--background-alt-color,#ebebeb); border-top: 1px solid var(--border-color,#dee2e6); border-right: 1px solid var(--border-color,#dee2e6); border-left: 1px solid var(--border-color,#dee2e6); color: var(--background-color-contrast,#212529); align-content: start; } .accordion-label{ margin: 15px 0; padding: 15px; background-color: var(--background-color,#ffffff); border: 1px solid var(--border-color,#dee2e6); color: var(--background-color-contrast,#212529); align-content: start; } .accordion-selector{ float: left; height: 100%; display: flex; background: transparent !important; font-size:0; } .accordion-item:last-of-type { border-bottom: 1px solid var(--border-color,#dee2e6); } .accordion-column>input[type="checkbox"], .accordion-column>input[type="radio"], .accordion-item>input[type="checkbox"], .accordion-item>input[type="radio"] { display: none !important; } .accordion-item > label { padding: var(--padding,6px); background-color: inherit; cursor: pointer; transition: background-color 0.25s ease-in-out; align-content: center; width: 100%; display: block; } .accordion-item input[type="checkbox"]:checked+label, .accordion-item input[type="radio"]:checked+label, .accordion-item>label:hover { background-color: inherit; } .accordion-content { display: none; padding: var(--padding,6px); background-color: var(--background-color,#ffffff); border-top: 1px solid var(--border-color,#dee2e6); } .accordion-column { display: none; } @container (min-width: 992px) { .accordion-column { grid-column: span 4 !important; } .grid:has(.grid-toggle:checked) .col-grow { grid-column: span 8 !important; } } .accordion-item input[type="checkbox"]:checked+label+.accordion-content, .accordion-item input[type="radio"]:checked+label+.accordion-content, .accordion-item input[type="checkbox"]:checked+.accordion-content, .accordion-item input[type="radio"]:checked+.accordion-content{ display: block; } .accordion-column:has(input[type="checkbox"]:checked), .accordion-column input[type="checkbox"]:checked + .accordion-content { display: initial; } .accordion-sidebar{ max-width: max(30%,400px); display: flex; } .accordion.primary .accordion-item input[type="checkbox"]:checked+label, .accordion.primary .accordion-item input[type="radio"]:checked+label, .accordion.primary .accordion-item>label:hover { background-color: var(--primary-color-hover,#0056b3); } .accordion.primary .accordion-item, .accordion.primary .accordion-item>label { background-color: var(--primary-color,#007bff); border-color: var(--primary-color-hover,#0056b3); color: var(--primary-color-contrast,var(--light-color,#ffffff)) } .accordion.primary .accordion-content { display: none; padding: var(--padding,6px); background-color: var(--primary-color-hover,#0056b3); border-top: 1px solid var(--primary-color-hover,#0056b3); } .accordion.secondary .accordion-item input[type="checkbox"]:checked+label, .accordion.secondary .accordion-item input[type="radio"]:checked+label, .accordion.secondary .accordion-item>label:hover { background-color: var(--secondary-color-hover,#5a6268); } .accordion.secondary .accordion-item, .accordion.secondary .accordion-item>label { background-color: var(--secondary-color,#6c757d); border-color: var(--secondary-color-hover,#5a6268); color: var(--secondary-color-contrast, var(--light-color,#ffffff)) } .accordion.secondary .accordion-content { display: none; padding: var(--padding,6px); background-color: var(--secondary-color-hover,#5a6268); border-top: 1px solid var(--secondary-color-hover,#5a6268); } .accordion.success .accordion-item input[type="checkbox"]:checked+label, .accordion.success .accordion-item input[type="radio"]:checked+label, .accordion.success .accordion-item>label:hover { background-color: var(--success-color-hover,#218838); } .accordion.success .accordion-item, .accordion.success .accordion-item>label { background-color: var(--success-color,#28a745); border-color: var(--success-color-hover,#218838); color: var(--success-color-contrast, var(--light-color,#ffffff)) } .accordion.success .accordion-content { display: none; padding: var(--padding,6px); background-color: var(--success-color-hover,#218838); border-top: 1px solid var(--success-color-hover,#218838); } .accordion.warning .accordion-item input[type="checkbox"]:checked+label, .accordion.warning .accordion-item input[type="radio"]:checked+label, .accordion.warning .accordion-item>label:hover { background-color: var(--warning-color-hover,#1e7e34); } .accordion.warning .accordion-item, .accordion.warning .accordion-item>label { background-color: var(--warning-color,#ff7b07); border-color: var(--warning-color-hover,#1e7e34); color: var(--warning-color-contrast, var(--light-color,#ffffff)) } .accordion.warning .accordion-content { display: none; padding: var(--padding,6px); background-color: var(--warning-color-hover,#1e7e34); border-top: 1px solid var(--warning-color-hover,#1e7e34); } .accordion.danger .accordion-item input[type="checkbox"]:checked+label, .accordion.danger .accordion-item input[type="radio"]:checked+label, .accordion.danger .accordion-item>label:hover { background-color: var(--danger-color-hover,#c82333); } .accordion.danger .accordion-item, .accordion.danger .accordion-item>label { background-color: var(--danger-color,#dc3545); border-color: var(--danger-color-hover,#c82333); color: var(--danger-color-contrast, var(--light-color,#ffffff)) } .accordion.danger .accordion-content { display: none; padding: var(--padding,6px); background-color: var(--danger-color-hover,#c82333); border-top: 1px solid var(--danger-color-hover,#c82333); } .accordion.info .accordion-item input[type="checkbox"]:checked+label, .accordion.info .accordion-item input[type="radio"]:checked+label, .accordion.info .accordion-item>label:hover { background-color: var(--info-color-hover, #138496); } .accordion.info .accordion-item, .accordion.info .accordion-item>label { background-color: var(--info-color,#17a2b8); border-color: var(--info-color-hover, #138496); color: var(--info-color-contrast, var(--light-color,#ffffff)) } .accordion.info .accordion-content { display: none; padding: var(--padding,6px); background-color: var(--info-color-hover, #138496); border-top: 1px solid var(--info-color-hover, #138496); }
.fade-in { animation: fadeIn var(--fade-duration,10s) ease-in-out; } .fade-out { opacity: 1; animation: fadeOut var(--fade-duration,10s) ease-out; animation-fill-mode: forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; position: fixed; visibility: hidden; top: -100vh; } }
.bg-primary { background-color: var(--primary-color,#007bff); } .bg-secondary { background-color: var(--secondary-color,#6c757d); } .bg-success { background-color: var(--success-color,#28a745); } .bg-warning { background-color: var(--warning-color,#ff7b07); } .bg-danger { background-color: var(--danger-color,#dc3545); } .bg-info { background-color: var(--info-color,#17a2b8); } .bg-alt { background-color: var(--background-alt-color,#ebebeb); } .bg { background-color: var(--background-color,#ffffff); } .bg-none { background-color: transparent; }
.badges{ display: flex; gap: var(--gap,3px); flex-wrap: wrap; } .badge-combo { padding: 0 !important; display: flex; gap: 1px; } .badge-combo .badge svg{ margin: 0 } .badge-combo .badge { border-radius: 0 !important; } .badge-combo .badge:first-child { border-top-left-radius: 5px !important; border-bottom-left-radius: 5px !important; } .badge-combo .badge:last-child { border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; } .badge i { margin-left: 0; margin-right: 0; text-align: center; } label.badge input{ display:none } label.badge:has(:checked){ background-color: var(--primary-color,#007bff); border: 1px solid var(--primary-color-hover,#0056b3); color: var(--primary-color-contrast,var(--light-color,#ffffff)) } .badge { text-decoration: none !important; border-radius: 5px !important; padding: calc(0.3 * var(--padding,6px)) var(--padding,6px) !important; margin: 0 !important; background-color: var(--border-color,#dee2e6); border: 1px solid var(--border-color,#dee2e6); color: var(--background-color-contrast,#212529); transition: background-color 0.25s ease-in-out; vertical-align: middle !important; text-indent: 0 !important; font-size: 0.75em; display: inline-flex; justify-content: center !important; line-height: inherit; align-content: center !important; align-items: center !important; } .badge:hover{ background-color: var(--background-alt-color,#ebebeb); } .badge.primary { background-color: var(--primary-color,#007bff); border: 1px solid var(--primary-color-hover,#0056b3); color: var(--primary-color-contrast,var(--light-color,#ffffff)) } .badge.primary:hover,.badge.primary-hover:hover { background-color: var(--primary-color-hover,#0056b3); border: 1px solid var(--primary-color-hover,#0056b3); color: var(--primary-color-contrast,var(--light-color,#ffffff)) } .badge.primary:focus,.badge.primary-focus:focus { background-color: var(--primary-color-active,#004085); border: 1px solid var(--primary-color-hover,#0056b3); color: var(--primary-color-contrast,var(--light-color,#ffffff)) } .badge.secondary { background-color: var(--secondary-color,#6c757d); border: 1px solid var(--secondary-color-hover,#5a6268); color: var(--secondary-color-contrast, var(--light-color,#ffffff)) } .badge.secondary:hover,.badge.secondary-hover:hover { background-color: var(--secondary-color-hover,#5a6268); border: 1px solid var(--secondary-color-hover,#5a6268); color: var(--secondary-color-contrast, var(--light-color,#ffffff)) } .badge.secondary:focus,.badge.secondary-focus:focus { background-color: var(--secondary-color-active,#545b62); border: 1px solid var(--secondary-color-hover,#5a6268); color: var(--secondary-color-contrast, var(--light-color,#ffffff)) } .badge.success { background-color: var(--success-color,#28a745); border: 1px solid var(--success-color-hover,#218838); color: var(--success-color-contrast, var(--light-color,#ffffff)) } .badge.success:hover,.badge.success-hover:hover { background-color: var(--success-color-hover,#218838); border: 1px solid var(--success-color-hover,#218838); color: var(--success-color-contrast, var(--light-color,#ffffff)) } .badge.success:focus,.badge.success-focus:focus { background-color: var(--success-color-active,#1e7e34); border: 1px solid var(--success-color-hover,#218838); color: var(--success-color-contrast, var(--light-color,#ffffff)) } .badge.warning { background-color: var(--warning-color,#ff7b07); border: 1px solid var(--warning-color-hover,#1e7e34); color: var(--warning-color-contrast, var(--light-color,#ffffff)) } .badge.warning:hover,.badge.warning-hover:hover { background-color: var(--warning-color-hover,#1e7e34); border: 1px solid var(--warning-color-hover,#1e7e34); color: var(--warning-color-contrast, var(--light-color,#ffffff)) } .badge.warning:focus,.badge.warning-focus:focus { background-color: var(--warning-color-active,#ff7b07); border: 1px solid var(--warning-color-hover,#1e7e34); color: var(--warning-color-contrast, var(--light-color,#ffffff)) } .badge.danger { background-color: var(--danger-color,#dc3545); border: 1px solid var(--danger-color-hover,#c82333); color: var(--danger-color-contrast, var(--light-color,#ffffff)) } .badge.danger:hover,.badge.danger-hover:hover { background-color: var(--danger-color-hover,#c82333); border: 1px solid var(--danger-color-hover,#c82333); color: var(--danger-color-contrast, var(--light-color,#ffffff)) } .badge.danger:focus,.badge.danger-focus:focus { background-color: var(--danger-color-active,#bd2130); border: 1px solid var(--danger-color-hover,#c82333); color: var(--danger-color-contrast, var(--light-color,#ffffff)) } .badge.info { background-color: var(--info-color,#17a2b8); border: 1px solid var(--info-color-hover, #138496); color: var(--info-color-contrast, var(--light-color,#ffffff)) } .badge.info:hover, .badge.info-hover:hover { background-color: var(--info-color-hover, #138496); border: 1px solid var(--info-color-hover, #138496); color: var(--info-color-contrast, var(--light-color,#ffffff)) } .badge.info:focus, .badge.info-focus:focus { background-color: var(--info-color-active, #117a8b); border: 1px solid var(--info-color-hover, #138496); color: var(--info-color-contrast, var(--light-color,#ffffff)) }
blockquote { font-size: inherit; margin: var(--margin,6px) auto; font-style: italic; color: var(--text-muted-color, #6c757d); padding: var(--padding,6px); line-height: 1.6; position: static; background: var(--background-alt-color,#ebebeb); display: flex; } .blockquote::before { font-family: inherit; content: "\201C"; color: var(--primary-color,#007bff); font-size: 4em; margin-right: calc(2*var(--padding,6px)); display: block; width: 47px; overflow: hidden; height: auto; line-height: 50px; align-content: center; align-self: center; } .blockquote::after{ content: ''; } .blockquote > div{ flex-grow: 1; } blockquote p { margin: var(--margin,6px) 0 0 0; } blockquote span { display: block; color: var(--text-color,#212529); font-style: normal; font-weight: bold; margin-top: 0 !important; }
.rounded { border-radius: 5px; } .separator{ border: none; border-top: 1px solid var(--border-color,#dee2e6); margin: 5px 0; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; } .bd-t { border-top-style: solid; border-color: var(--border-color,#dee2e6); } .bd-r { border-right-style: solid; border-color: var(--border-color,#dee2e6); } .bd-b { border-bottom-style: solid; border-color: var(--border-color,#dee2e6); } .bd-l { border-left-style: solid; border-color: var(--border-color,#dee2e6); } .bd { border-style: solid; border-width: 1px; border-color: var(--border-color,#dee2e6); } .bd-1 { border-width: 1px; } .bd-2 { border-width: 2px; } .bd-3 { border-width: 3px; } .bd-4 { border-width: 4px; } .bd-5 { border-width: 5px; } .bd-primary { border-color: var(--primary-color,#007bff); } .bd-secondary { border-color: var(--secondary-color,#6c757d); } .bd-success { border-color: var(--success-color,#28a745); } .bd-warning { border-color: var(--warning-color,#ff7b07); } .bd-danger { border-color: var(--danger-color,#dc3545); } .bd-info { border-color: var(--info-color,#17a2b8); } .bd-none { border: none; } @media (max-width: 576px) { .bd-sm-t { border-top-style: solid; border-color: var(--border-color,#dee2e6); } .bd-sm-r { border-right-style: solid; border-color: var(--border-color,#dee2e6); } .bd-sm-b { border-right-style: none; border-bottom-style: solid; border-color: var(--border-color,#dee2e6); } .bd-sm-l { border-left-style: solid; border-color: var(--border-color,#dee2e6); } .bd-sm { border-style: solid; border-width: 1px; border-color: var(--border-color,#dee2e6); } .bd-sm-1 { border-width: 1px; } .bd-sm-2 { border-width: 2px; } .bd-sm-3 { border-width: 3px; } .bd-sm-4 { border-width: 4px; } .bd-sm-5 { border-width: 5px; } .bd-sm-primary { border-color: var(--primary-color,#007bff); } .bd-sm-secondary { border-color: var(--secondary-color,#6c757d); } .bd-sm-success { border-color: var(--success-color,#28a745); } .bd-sm-warning { border-color: var(--warning-color,#ff7b07); } .bd-sm-danger { border-color: var(--danger-color,#dc3545); } .bd-sm-info { border-color: var(--info-color,#17a2b8); } .bd-sm-none { border: none; } } @media (min-width: 576px) { .bd-md-t { border-top-style: solid; border-color: var(--border-color,#dee2e6); } .bd-md-r { border-right-style: solid; border-color: var(--border-color,#dee2e6); } .bd-md-b { border-bottom-style: solid; border-color: var(--border-color,#dee2e6); } .bd-md-l { border-left-style: solid; border-color: var(--border-color,#dee2e6); } .bd-md { border-style: solid; border-width: 1px; border-color: var(--border-color,#dee2e6); } .bd-md-1 { border-width: 1px; } .bd-md-2 { border-width: 2px; } .bd-md-3 { border-width: 3px; } .bd-md-4 { border-width: 4px; } .bd-md-5 { border-width: 5px; } .bd-md-primary { border-color: var(--primary-color,#007bff); } .bd-md-secondary { border-color: var(--secondary-color,#6c757d); } .bd-md-success { border-color: var(--success-color,#28a745); } .bd-md-warning { border-color: var(--warning-color,#ff7b07); } .bd-md-danger { border-color: var(--danger-color,#dc3545); } .bd-md-info { border-color: var(--info-color,#17a2b8); } .bd-md-none { border: none; } } @media (min-width: 768px ) { .bd-lg-t { border-top-style: solid; border-color: var(--border-color,#dee2e6); } .bd-lg-r { border-right-style: solid; border-color: var(--border-color,#dee2e6); } .bd-lg-b { border-bottom-style: solid; border-color: var(--border-color,#dee2e6); } .bd-lg-l { border-left-style: solid; border-color: var(--border-color,#dee2e6); } .bd-lg { border-style: solid; border-width: 1px; border-color: var(--border-color,#dee2e6); } .bd-lg-1 { border-width: 1px; } .bd-lg-2 { border-width: 2px; } .bd-lg-3 { border-width: 3px; } .bd-lg-4 { border-width: 4px; } .bd-lg-5 { border-width: 5px; } .bd-lg-primary { border-color: var(--primary-color,#007bff); } .bd-lg-secondary { border-color: var(--secondary-color,#6c757d); } .bd-lg-success { border-color: var(--success-color,#28a745); } .bd-lg-warning { border-color: var(--warning-color,#ff7b07); } .bd-lg-danger { border-color: var(--danger-color,#dc3545); } .bd-lg-info { border-color: var(--info-color,#17a2b8); } .bd-lg-none { border: none; } } @media (min-width: 992px) { .bd-xl-t { border-top-style: solid; border-color: var(--border-color,#dee2e6); } .bd-xl-r { border-right-style: solid; border-color: var(--border-color,#dee2e6); } .bd-xl-b { border-bottom-style: solid; border-color: var(--border-color,#dee2e6); } .bd-xl-l { border-left-style: solid; border-color: var(--border-color,#dee2e6); } .bd-xl { border-style: solid; border-width: 1px; border-color: var(--border-color,#dee2e6); } .bd-xl-1 { border-width: 1px; } .bd-xl-2 { border-width: 2px; } .bd-xl-3 { border-width: 3px; } .bd-xl-4 { border-width: 4px; } .bd-xl-5 { border-width: 5px; } .bd-xl-primary { border-color: var(--primary-color,#007bff); } .bd-xl-secondary { border-color: var(--secondary-color,#6c757d); } .bd-xl-success { border-color: var(--success-color,#28a745); } .bd-xl-warning { border-color: var(--warning-color,#ff7b07); } .bd-xl-danger { border-color: var(--danger-color,#dc3545); } .bd-xl-info { border-color: var(--info-color,#17a2b8); } .bd-xl-none { border: none; } }
button:not(.link), .btn:not(.link), input::file-selector-button { background-color: var(--border-color,#dee2e6); border: 0 solid var(--border-color,#dee2e6); color: var(--background-color-contrast,#212529); padding: var(--padding,6px) calc(2 * var(--padding,6px)); cursor: pointer; border-radius: 5px; line-height: inherit; font-size: inherit; display: inline-flex; vertical-align: middle; align-content: center; align-items: center; align-self: center; text-indent: 0; user-select: none; } button.plain { all:inherit; background: inherit; border: none; display: inherit; text-align: inherit; cursor: pointer; } button.link, .btn.link { background-color: transparent !important; border-color: transparent !important; color: var(--link-color,#007bff); text-decoration: none; padding: 0; margin: 0; cursor: pointer; font-size: inherit; } button.link:hover, .btn.link:hover{ text-decoration: underline; } button.large, .btn.large { padding: calc(2 * var(--padding,6px)); font-size: 2rem; } button.small, .btn.small { padding: calc(0.5 * var(--padding,6px)) !important; font-size: 0.875rem !important; } button.small i{ font-size: 0.875rem !important; } input::file-selector-button.large { padding: calc(2 * var(--padding,6px)); font-size: 2rem; } input::file-selector-button.small { padding: calc(0.5 * var(--padding,6px)) !important; font-size: 0.875rem !important; } .icon-button{ padding: 0; background: inherit; margin: 0; cursor:pointer; } .icon-button .icon, .icon-button .bi{ pointer-events: all !important; touch-action: auto !important; } .compound-button { position: relative; display: inline-flex; justify-content: center; vertical-align: middle; } .compound-button button:first-child, .compound-button .btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; display: inline-flex; align-self: normal; padding: var(--padding,6px) calc(3 * var(--padding,6px)); } .compound-button button:not(:first-child), .compound-button .btn:not(:first-child) { border-radius: 0 !important; } .compound-button .dropdown { position: relative; display: inline-flex; justify-content: center; } .compound-button .dropdown .dropdown-toggle { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding: var(--padding,6px); border-left: 1px solid var(--border-color,#dee2e6); } button.flush, .btn.flush{ margin:0; width: 100%; text-align: center; display: inline-block; } button.center, .btn.center{ justify-content: center; text-align: center; } button:not(.outline):hover, .btn:not(.outline):hover { background-color: var(--background-alt-color,#ebebeb); } .btn-group{ display: inline-flex; align-content: center; align-items: center; vertical-align: middle; } .btn-group > * { border-radius: 0; margin:0; } .btn-group > *:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .btn-group > *:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } button.primary, .btn.primary, input.primary::file-selector-button { background-color: var(--primary-color,#007bff); border-color: var(--primary-color,#007bff); color: var(--primary-color-contrast,var(--light-color,#ffffff)); } button.primary:not(.outline):hover, .btn.primary:not(.outline):hover, input.primary::file-selector-button:hover { background-color: var(--primary-color-hover,#0056b3); border-color: var(--primary-color-hover,#0056b3); } button.primary:active, .btn.primary:active, input.primary::file-selector-button:active { background-color: var(--primary-color-active,#004085); border-color: var(--primary-color-active,#004085); } button.secondary, .btn.secondary, input.secondary::file-selector-button { background-color: var(--secondary-color,#6c757d); border-color: var(--secondary-color,#6c757d); color: var(--secondary-color-contrast, var(--light-color,#ffffff)); } button.secondary:not(.outline):hover, .btn.secondary:not(.outline):hover, input.secondary::file-selector-button:hover { background-color: var(--secondary-color-hover,#5a6268); border-color: var(--secondary-color-hover,#5a6268); } button.secondary:active, .btn.secondary:active, input.secondary::file-selector-button:active { background-color: var(--secondary-color-active,#545b62); border-color: var(--secondary-color-active,#545b62); } button.success, .btn.success, input.success::file-selector-button { background-color: var(--success-color,#28a745); border-color: var(--success-color,#28a745); color: var(--success-color-contrast, var(--light-color,#ffffff)); } button.success:not(.outline):hover, .btn.success:not(.outline):hover, input.success::file-selector-button:hover { background-color: var(--success-color-hover,#218838); border-color: var(--success-color-hover,#218838); } button.success:active, .btn.success:active, input.success::file-selector-button:active { background-color: var(--success-color-active,#1e7e34); border-color: var(--success-color-active,#1e7e34); } button.warning, .btn.warning, input.warning::file-selector-button { background-color: var(--warning-color,#ff7b07); border-color: var(--warning-color,#ff7b07); color: var(--warning-color-contrast, var(--light-color,#ffffff)); } button.warning:not(.outline):hover, .btn.warning:not(.outline):hover, input.warning::file-selector-button:hover { background-color: var(--warning-color-hover,#1e7e34); border-color: var(--warning-color-hover,#1e7e34); } button.warning:active, .btn.warning:active, input.warning::file-selector-button:active { background-color: var(--warning-color-active,#ff7b07); border-color: var(--warning-color-active,#ff7b07); } button.danger, .btn.danger, input.danger::file-selector-button { background-color: var(--danger-color,#dc3545); border-color: var(--danger-color,#dc3545); color: var(--danger-color-contrast, var(--light-color,#ffffff)); } button.danger:not(.outline):hover, .btn.danger:not(.outline):hover, input.danger::file-selector-button:hover { background-color: var(--danger-color-hover,#c82333); border-color: var(--danger-color-hover,#c82333); } button.danger:active, .btn.danger:active, input.danger::file-selector-button:active { background-color: var(--danger-color-active,#bd2130); border-color: var(--danger-color-active,#bd2130); } button.info, .btn.info, input.info::file-selector-button { background-color: var(--info-color,#17a2b8); border-color: var(--info-color,#17a2b8); color: var(--info-color-contrast, var(--light-color,#ffffff)); } button.info:not(.outline):hover, .btn.info:not(.outline):hover, input.info::file-selector-button:hover { background-color: var(--info-color-hover, #138496); border-color: var(--info-color-hover, #138496); } button.info:active, .btn.info:active, input.info::file-selector-button:active { background-color: var(--info-color-active, #117a8b); border-color: var(--info-color-active, #117a8b); } button.blend, .btn.blend, input.blend::file-selector-button, button.blend:hover, .btn.blend:hover, input.blend::file-selector-button:hover { background-color: inherit; color: inherit; border: inherit; } button.alt, .btn.alt, input.alt::file-selector-button { background-color: var(--background-alt-color,#ebebeb); color: var(--background-color-contrast,#212529); border: 1px solid var(--border-color,#dee2e6); } button.alt:not(.outline):hover, .btn.alt:not(.outline):hover, input.alt::file-selector-button:hover { background-color: var(--background-color,#ffffff); } button.outline, .btn.outline, input.outline::file-selector-button { background-color: transparent; border-width: 1px; border-style: solid; color: inherit; } button.primary.outline, .btn.primary.outline, input.primary.outline::file-selector-button { border-color: var(--primary-color, #007bff); color: var(--primary-color, #007bff); } button.primary.outline:hover, .btn.primary.outline:hover, input.primary.outline::file-selector-button:hover { background-color: var(--primary-color, #007bff); color: var(--primary-color-contrast, var(--light-color, #ffffff)); } button.secondary.outline, .btn.secondary.outline, input.secondary.outline::file-selector-button { border-color: var(--secondary-color, #6c757d); color: var(--secondary-color, #6c757d); } button.secondary.outline:hover, .btn.secondary.outline:hover, input.secondary.outline::file-selector-button:hover { background-color: var(--secondary-color, #6c757d); color: var(--secondary-color-contrast, var(--light-color, #ffffff)); } button.success.outline, .btn.success.outline, input.success.outline::file-selector-button { border-color: var(--success-color, #28a745); color: var(--success-color, #28a745); } button.success.outline:hover, .btn.success.outline:hover, input.success.outline::file-selector-button:hover { background-color: var(--success-color, #28a745); color: var(--success-color-contrast, var(--light-color, #ffffff)); } button.warning.outline, .btn.warning.outline, input.warning.outline::file-selector-button { border-color: var(--warning-color, #ff7b07); color: var(--warning-color, #ff7b07); } button.warning.outline:hover, .btn.warning.outline:hover, input.warning.outline::file-selector-button:hover { background-color: var(--warning-color, #ff7b07); color: var(--warning-color-contrast, var(--light-color, #ffffff)); } button.danger.outline, .btn.danger.outline, input.danger.outline::file-selector-button { border-color: var(--danger-color, #dc3545); color: var(--danger-color, #dc3545); } button.danger.outline:hover, .btn.danger.outline:hover, input.danger.outline::file-selector-button:hover { background-color: var(--danger-color, #dc3545); color: var(--danger-color-contrast, var(--light-color, #ffffff)); } button.info.outline, .btn.info.outline, input.info.outline::file-selector-button { border-color: var(--info-color, #17a2b8); color: var(--info-color, #17a2b8); } button.info.outline:hover, .btn.info.outline:hover, input.info.outline::file-selector-button:hover { background-color: var(--info-color, #17a2b8); color: var(--info-color-contrast, var(--light-color, #ffffff)); }
.cards { display: flex; gap: var(--gap, 3px); flex-wrap: wrap; } .card i { margin-left: 0; margin-right: 0; text-align: center; } .card { padding: var(--padding, 6px); border: 1px solid var(--border-color); } .card.alt { background-color: var(--background-alt-color,#ebebeb); color: var(--background-color-contrast,#212529); border: 1px solid var(--border-color,#dee2e6); } .card.primary { background-color: var(--primary-color, #007bff); border: 1px solid var(--primary-color-hover, #0056b3); color: var(--primary-color-contrast, var(--light-color, #ffffff)) } .card.secondary { background-color: var(--secondary-color, #6c757d); border: 1px solid var(--secondary-color-hover, #5a6268); color: var(--secondary-color-contrast, var(--light-color, #ffffff)) } .card.success { background-color: var(--success-color, #28a745); border: 1px solid var(--success-color-hover, #218838); color: var(--success-color-contrast, var(--light-color, #ffffff)) } .card.warning { background-color: var(--warning-color, #ff7b07); border: 1px solid var(--warning-color-hover, #1e7e34); color: var(--warning-color-contrast, var(--light-color, #ffffff)) } .card.danger { background-color: var(--danger-color, #dc3545); border: 1px solid var(--danger-color-hover, #c82333); color: var(--danger-color-contrast, var(--light-color, #ffffff)) } .card.info { background-color: var(--info-color, #17a2b8); border: 1px solid var(--info-color-hover, #138496); color: var(--info-color-contrast, var(--light-color, #ffffff)) } .card-outline { background-color: transparent; border: 1px solid var(--border-color); padding: var(--padding, 6px); } .card-outline.primary { color: var(--primary-color, #007bff); border-color: var(--primary-color-hover, #007bff); } .card-outline.secondary { color: var(--secondary-color, #6c757d); border-color: var(--secondary-color-hover, #6c757d); } .card-outline.success { color: var(--success-color, #28a745); border-color: var(--success-color-hover, #28a745); } .card-outline.warning { color: var(--warning-color, #ff7b07); border-color: var(--warning-color-hover, #ff7b07); } .card-outline.danger { color: var(--danger-color, #dc3545); border-color: var(--danger-color-hover, #dc3545); } .card-outline.info { color: var(--info-color, #17a2b8); border-color: var(--info-color-hover, #17a2b8); }
.chart-container { overflow-x: auto; scrollbar-width: thin; } .chart-container .y-axis { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 5px; font-size: 10px; } .chart-container .chart { display: flex; align-items: flex-end; height: 50vh; min-height: 300px; min-width: 600px; display: flex; height: 300px; align-items: flex-end; padding: 20px 0 0 40px; position: relative; } .chart-container .month { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; } .chart-container .bars { display: flex; height: 100%; align-items: flex-end; } .chart-container .bar { width: 20px; margin: 0 2px; min-height: 1px; } .chart-container .label { margin-top: 5px; font-size: 0.8em; } @media (max-width: 576px) { .chart-container .chart { height: 40vh; } .chart-container .label { font-size: 0.7em; } .chart-container .bar { width: 15px; } } .chart-container .legend { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .chart-container .legend-item { display: flex; align-items: center; margin: 0 10px 10px 0; } .chart-container .legend-color { width: 20px; height: 20px; margin-right: 5px; } .chart-container .legend-color.sale { background-color: var(--success-color,#28a745); } .chart-container .legend-color.fulfillment { background-color: var(--info-color,#17a2b8); } .chart-container .legend-color.net { background-color: var(--warning-color,#ff7b07); } .chart-container .sale { background-color: var(--success-color,#28a745); } .chart-container .fulfillment { background-color: var(--info-color,#17a2b8); } .chart-container .net { background-color: var(--warning-color,#ff7b07); } .chart-bar{ overflow-x: auto; } .chart-bar .chart { display: flex; height: 300px; align-items: flex-end; padding: 20px 0 0 40px; position: relative; justify-content: space-around; min-height: 300px; min-width: 600px; } .chart-bar .bar { flex: 1; margin: 0 10px; display: flex; flex-direction: column-reverse; height: 100%; max-width: 30px; } .chart-bar .commission, .chart-bar .net-sales { width: 100%; } .chart-bar .commission { background-color: #40E0D0; } .chart-bar .net-sales { background-color: #4169E1; } .chart-bar .month-label { text-align: center; margin-top: 10px; } .chart-bar .y-axis { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 5px; font-size: 10px; } .chart-bar .legend { display: flex; justify-content: center; margin-top: 20px; } .chart-bar .legend-item { display: flex; align-items: center; margin: 0 10px; } .chart-bar .legend-color { width: 20px; height: 20px; margin-right: 5px; }
.collapse{ display:none; } .collapse:has(.collapse-control:checked){ display: block; } .collapse-control{ display: none; }
.container { padding: 0; display: block; flex-grow: 1; } .embed-container { width: 100%; height: 100%; min-height: max(800px, 100vh); padding: 0; display: flex; flex-direction: column; } .embed-responsive { width: 100%; height: auto; flex-grow: 1; } .container.sm { max-width: min(calc(1.5 * var(--container-units,256px)), var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); } .container.md { max-width: min(calc(3 * var(--container-units,256px)), var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); } .container.lg { max-width: min(calc(4 * var(--container-units,256px)), var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); } .container.xl { max-width: min(calc(6 * var(--container-units,256px)), var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); } .container.contain-y { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .container.contain-x { width: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } .container.contain { width: 100%; overflow-x: auto; overflow-y: auto; scrollbar-width: thin; }
.cs-pointer{ cursor: pointer; }
.op-80{ opacity: .80; } .op-60{ opacity: .60; } .op-40{ opacity: .40; } .valign-top{ vertical-align: top; } .valign-center{ vertical-align: center; } .valign-bottom{ vertical-align: bottom; } .ds-inherit { display: inherit; gap: inherit; padding: inherit; } .border-box{ box-sizing: border-box; } .content-box{ box-sizing: content-box; } .ds-none { display: none !important; } .ds-block { display: block !important; } .ds-flex { display: flex !important; } .ds-inline { display: inline !important; } .ds-inline-block { display: inline-block !important; } .pe-none{ pointer-events: none !important; } .disabled, .disabled *{ cursor: not-allowed !important; } .disabled input, .disabled select, .disabled textarea, .disabled button { pointer-events: none !important; touch-action: none !important; cursor: not-allowed !important; user-select: none !important; } .disabled:hover{ opacity: 0.95 !important; cursor: not-allowed !important; } .disabled::before { content: "This field is disabled" !important; position: absolute; background-color: var(--danger-color); color: var(--danger-color-contrast); padding: 5px 10px !important; border-radius: 5px !important; white-space: nowrap !important; border: 1px solid var(--danger-color-contrast); opacity: 0 !important; pointer-events: none !important; transition: opacity 0s; } .disabled:hover::before { opacity: 1 !important; transition: opacity 0.25s ease 3s !important; } .readonly{ pointer-events: none !important; touch-action: none !important; cursor: not-allowed !important; user-select: none !important; } @media (max-width: 576px) { .ds-sm-none { display: none !important; } .ds-sm-block { display: block !important; } .ds-sm-flex { display: flex !important; } .ds-sm-inline { display: inline !important; } .ds-sm-inline-block { display: inline-block !important; } } @media (max-width: 768px) { .ds-md-none { display: none !important; } .ds-md-block { display: block !important; } .ds-md-flex { display: flex !important; } .ds-md-inline { display: inline !important; } .ds-md-inline-block { display: inline-block !important; } } @media (max-width: 992px) { .ds-lg-none { display: none !important; } .ds-lg-block { display: block !important; } .ds-lg-flex { display: flex !important; } .ds-lg-inline { display: inline !important; } .ds-lg-inline-block { display: inline-block !important; } } @media (max-width: 1200px) { .ds-xl-none { display: none !important; } .ds-xl-block { display: block !important; } .ds-xl-flex { display: flex !important; } .ds-xl-inline { display: inline !important; } .ds-xl-inline-block { display: inline-block !important; } }
.dropdown { position: relative; display: inline-block; } .dropdown .sep { border-top: 1px solid var(--border-color,#dee2e6); height: 0; display: block; width: 100%; } .dropdown .dropdown-toggle { background-color: var(--border-color,#dee2e6); border: 1px solid var(--border-color,#dee2e6); color: var(--background-color-contrast,#212529); transition: background-color 0.25s ease-in-out; border: none; cursor: pointer; padding: var(--padding,6px) calc(2 * var(--margin,6px)); border-radius: 5px; margin: 0; } .dropdown-end { left: auto !important; right: 0; } .dropdown-bottom { bottom: calc(100% + 1px ); top: auto !important; } .dropdown .dropdown-menu { position: absolute; top: calc(100% + 1px ); left: 0; background-color: var(--border-color,#dee2e6); color: var(--background-color-contrast,#212529); min-width: 160px; padding: 0; display: none; z-index: 3; border-radius: 5px; overflow: hidden; } .dropdown .dropdown-menu > *{ width: 100%; text-align: left; border-radius: 0; } .dropdown .dropdown-toggle:hover{ background-color: var(--background-alt-color,#ebebeb); } .dropdown:focus .dropdown-menu, .dropdown:focus-visible .dropdown-menu, .dropdown:focus-within .dropdown-menu, .dropdown.open .dropdown-menu { display: block; } .dropdown:focus .dropdown-toggle, .dropdown:focus-visible .dropdown-toggle, .dropdown:focus-within .dropdown-toggle, .dropdown.open .dropdown-toggle { background-color: var(--background-alt-color,#ebebeb); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dropdown:focus~.dropdown:not(:focus) .dropdown-menu, .dropdown:focus-visible~.dropdown:not(:focus-visible) .dropdown-menu, .dropdown:focus-within~.dropdown:not(:focus-within) .dropdown-menu { display: none; } .dropdown .dropdown-label { color: inherit; background-color: inherit; padding: 4px 8px; text-decoration: none; display: block; margin:0; } .dropdown .dropdown-item { color: var(--text-color,#212529); background-color: var(--background-alt-color,#ebebeb); padding: 8px 16px; text-decoration: none; display: block; margin:0; } .dropdown .dropdown-item:hover { background-color: var(--border-color,#dee2e6); color: var(--text-color,#212529); text-decoration: none; } .dropdown.primary .dropdown-item, .dropdown.primary .dropdown-toggle{ background-color: var(--primary-color,#007bff); color: var(--primary-color-contrast,var(--light-color,#ffffff)); } .dropdown.primary .dropdown-menu{ background-color: var(--primary-color,#007bff); border-color: var(--primary-color-hover,#0056b3); } .dropdown.primary .dropdown-item:hover, .dropdown.primary .dropdown-toggle:hover{ background-color: var(--primary-color-hover,#0056b3); } .dropdown.secondary .dropdown-item, .dropdown.secondary .dropdown-toggle { background-color: var(--secondary-color,#6c757d); color: var(--secondary-color-contrast, var(--light-color,#ffffff)); } .dropdown.secondary .dropdown-menu { background-color: var(--secondary-color,#6c757d); border-color: var(--secondary-color-hover,#5a6268); } .dropdown.secondary .dropdown-item:hover, .dropdown.secondary .dropdown-toggle:hover { background-color: var(--secondary-color-hover,#5a6268); } .dropdown.success .dropdown-item, .dropdown.success .dropdown-toggle { background-color: var(--success-color,#28a745); color: var(--success-color-contrast, var(--light-color,#ffffff)); } .dropdown.success .dropdown-menu { background-color: var(--success-color,#28a745); border-color: var(--success-color-hover,#218838); } .dropdown.success .dropdown-item:hover, .dropdown.success .dropdown-toggle:hover { background-color: var(--success-color-hover,#218838); } .dropdown.warning .dropdown-item, .dropdown.warning .dropdown-toggle { background-color: var(--warning-color,#ff7b07); color: var(--warning-color-contrast, var(--light-color,#ffffff)); } .dropdown.warning .dropdown-menu { background-color: var(--warning-color,#ff7b07); border-color: var(--warning-color-hover,#1e7e34); } .dropdown.warning .dropdown-item:hover, .dropdown.warning .dropdown-toggle:hover { background-color: var(--warning-color-hover,#1e7e34); } .dropdown.danger .dropdown-item, .dropdown.danger .dropdown-toggle { background-color: var(--danger-color,#dc3545); color: var(--danger-color-contrast, var(--light-color,#ffffff)); } .dropdown.danger .dropdown-menu { background-color: var(--danger-color,#dc3545); border-color: var(--danger-color-hover,#c82333); } .dropdown.danger .dropdown-item:hover, .dropdown.danger .dropdown-toggle:hover { background-color: var(--danger-color-hover,#c82333); } .dropdown.info .dropdown-item, .dropdown.info .dropdown-toggle { background-color: var(--info-color,#17a2b8); color: var(--info-color-contrast, var(--light-color,#ffffff)); } .dropdown.info .dropdown-menu { background-color: var(--info-color,#17a2b8); border-color: var(--info-color-hover, #138496); } .dropdown.info .dropdown-item:hover, .dropdown.info .dropdown-toggle:hover { background-color: var(--info-color-hover, #138496); } @media (max-width: 576px) { .dropdown .dropdown-menu { width: 100%; } }
.shadow-1{ box-shadow: 0 0 3px var(--background-alt-color,#ebebeb); } .blur-1{ filter: blur(2px); }
.flex-row, .flex { display: flex; flex-direction: row !important; flex-wrap: wrap; } .flex:not(.ds-none), .flex-row:not(.ds-none), .flex-row-reverse:not(.ds-none), .flex-column:not(.ds-none), .flex-column-reverse:not(.ds-none){ display: flex !important; } .flex-row-reverse { display: flex; flex-direction: row-reverse !important; } .flex-column { display: flex; flex-direction: column !important; } .flex-column-reverse { display: flex; flex-direction: column-reverse !important; } .flex-wrap { display: flex; flex-wrap: wrap !important; } .flex-nowrap { display: flex; flex-wrap: nowrap !important; } .flex-md-nowrap { flex-wrap: nowrap !important; } @media (max-width: 768px) { .flex-md-nowrap { flex-wrap: wrap !important; } .flex-row-reverse { display: flex !important; flex-direction: column-reverse !important; } .flex-nowrap { flex-wrap: wrap !important; } .flex-sm-grow-1{ flex-grow: 1; } } .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-around { justify-content: space-around !important; } .align-self-start { align-self: flex-start !important; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-stretch { align-items: stretch !important; } .align-items-baseline { align-items: baseline !important; } .align-content-start { align-content: flex-start !important; } .align-content-end { align-content: flex-end !important; } .align-content-center { align-content: center !important; } .align-content-stretch { align-content: stretch !important; } .align-content-baseline { align-content: baseline !important; } .flex-grow-0 { flex-grow: 0 !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-shrink-1 { flex-shrink: 1 !important; } .flex-basis-auto { flex-basis: auto !important; } .flex-basis-100px { flex-basis: 100px !important; }
.footer-sm{ height:28px; } .footer{ height:56px; } #footer { width: 100%; text-align: center; padding: 10px; align-content: center; gap: 10px; display: flex; } #theme-switcher { padding: 0x; color: var(--background-color-contrast,#212529); } #theme-switcher:hover{ text-decoration: none; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(33%, 1fr)); margin: 0 auto; gap: var(--form-gap,1rem); padding: var(--padding,6px); grid-auto-rows: max-content; } .form-grid.full { min-height: 100vh; } .form-field { display: flex; flex-direction: column; } .form-grid .span-2 { grid-column: span 2; } .form-grid .span-3 { grid-column: span 3; } .form-grid .span-full { grid-column: 1 / -1; } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: var(--padding,6px); border: 1px solid var(--border-color,#dee2e6); border-radius: 5px; } .form-field textarea { resize: vertical; min-height: 100px; } .form-submit { grid-column: 1 / -1; justify-self: start; margin-top: var(--margin,6px); } @media (max-width: 576px) { .form-grid.full { min-height: 0; } .form-grid { grid-template-columns: 1fr; } .form-field, .form-grid .span-2, .form-grid .span-3, .form-grid .span-full { grid-column: 1 / -1; } .form-field input, .form-field select, .form-field textarea { font-size: 16px; } .form-submit { width: 100%; } }
:root { --grid-gap: 3px; --flex-min: 10ch; } .grid-flex { display: flex; flex-wrap: wrap; } .grid-flex > * { flex: 1 1 var(--flex-min); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); container-type: inline-size; } .grid.uniform { grid-auto-rows: 1fr; } .grid > * { grid-column: span 12; } .grid-no-grid { display: flex; flex-wrap: wrap; } .grid-no-grid > * { flex: 1 1 calc(100% / 12); } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; } .col-auto { grid-column: auto !important; } .col-auto-1 { grid-column: span 1 / auto !important;} .col-auto-2 { grid-column: span 2 / auto !important;} .col-auto-3 { grid-column: span 3 / auto !important;} .col-auto-4 { grid-column: span 4 / auto !important;} .col-auto-5 { grid-column: span 5 / auto !important;} .col-auto-6 { grid-column: span 6 / auto !important;} .col-auto-7 { grid-column: span 7 / auto !important;} .col-auto-8 { grid-column: span 8 / auto !important;} .col-auto-9 { grid-column: span 9 / auto !important;} .col-auto-10 { grid-column: span 10 / auto !important;} .col-auto-11 { grid-column: span 11 / auto !important;} .col-auto-12 { grid-column: span 12 / auto !important;} @media (max-width: 480px) { .col-xs-1 { grid-column: span 1 !important; } .col-xs-2 { grid-column: span 2 !important; } .col-xs-3 { grid-column: span 3 !important; } .col-xs-4 { grid-column: span 4 !important; } .col-xs-5 { grid-column: span 5 !important; } .col-xs-6 { grid-column: span 6 !important; } .col-xs-7 { grid-column: span 7 !important; } .col-xs-8 { grid-column: span 8 !important; } .col-xs-9 { grid-column: span 9 !important; } .col-xs-10 { grid-column: span 10 !important; } .col-xs-11 { grid-column: span 11 !important; } .col-xs-12 { grid-column: span 12 !important; } } @media (max-width: 576px) { .col-sm-1 { grid-column: span 1 !important; } .col-sm-2 { grid-column: span 2 !important; } .col-sm-3 { grid-column: span 3 !important; } .col-sm-4 { grid-column: span 4 !important; } .col-sm-5 { grid-column: span 5 !important; } .col-sm-6 { grid-column: span 6 !important; } .col-sm-7 { grid-column: span 7 !important; } .col-sm-8 { grid-column: span 8 !important; } .col-sm-9 { grid-column: span 9 !important; } .col-sm-10 { grid-column: span 10 !important; } .col-sm-11 { grid-column: span 11 !important; } .col-sm-12 { grid-column: span 12 !important; } } @media (min-width: 577px) { .col-md-1 { grid-column: span 1 !important; } .col-md-2 { grid-column: span 2 !important; } .col-md-3 { grid-column: span 3 !important; } .col-md-4 { grid-column: span 4 !important; } .col-md-5 { grid-column: span 5 !important; } .col-md-6 { grid-column: span 6 !important; } .col-md-7 { grid-column: span 7 !important; } .col-md-8 { grid-column: span 8 !important; } .col-md-9 { grid-column: span 9 !important; } .col-md-10 { grid-column: span 10 !important; } .col-md-11 { grid-column: span 11 !important; } .col-md-12 { grid-column: span 12 !important; } } @media (min-width: 992px) { .col-lg-1 { grid-column: span 1 !important; } .col-lg-2 { grid-column: span 2 !important; } .col-lg-3 { grid-column: span 3 !important; } .col-lg-4 { grid-column: span 4 !important; } .col-lg-5 { grid-column: span 5 !important; } .col-lg-6 { grid-column: span 6 !important; } .col-lg-7 { grid-column: span 7 !important; } .col-lg-8 { grid-column: span 8 !important; } .col-lg-9 { grid-column: span 9 !important; } .col-lg-10 { grid-column: span 10 !important; } .col-lg-11 { grid-column: span 11 !important; } .col-lg-12 { grid-column: span 12 !important; } } @media (min-width: 1600px) { .col-xl-1 { grid-column: span 1 !important; } .col-xl-2 { grid-column: span 2 !important; } .col-xl-3 { grid-column: span 3 !important; } .col-xl-4 { grid-column: span 4 !important; } .col-xl-5 { grid-column: span 5 !important; } .col-xl-6 { grid-column: span 6 !important; } .col-xl-7 { grid-column: span 7 !important; } .col-xl-8 { grid-column: span 8 !important; } .col-xl-9 { grid-column: span 9 !important; } .col-xl-10 { grid-column: span 10 !important; } .col-xl-11 { grid-column: span 11 !important; } .col-xl-12 { grid-column: span 12 !important; } } @media (min-width: 2600px) { .col-xxl-1 { grid-column: span 1 !important; } .col-xxl-2 { grid-column: span 2 !important; } .col-xxl-3 { grid-column: span 3 !important; } .col-xxl-4 { grid-column: span 4 !important; } .col-xxl-5 { grid-column: span 5 !important; } .col-xxl-6 { grid-column: span 6 !important; } .col-xxl-7 { grid-column: span 7 !important; } .col-xxl-8 { grid-column: span 8 !important; } .col-xxl-9 { grid-column: span 9 !important; } .col-xxl-10 { grid-column: span 10 !important; } .col-xxl-11 { grid-column: span 11 !important; } .col-xxl-12 { grid-column: span 12 !important; } } @container (max-width: 400px) { .cont-xs-1 { grid-column: span 1 !important; } .cont-xs-2 { grid-column: span 2 !important; } .cont-xs-3 { grid-column: span 3 !important; } .cont-xs-4 { grid-column: span 4 !important; } .cont-xs-5 { grid-column: span 5 !important; } .cont-xs-6 { grid-column: span 6 !important; } .cont-xs-7 { grid-column: span 7 !important; } .cont-xs-8 { grid-column: span 8 !important; } .cont-xs-9 { grid-column: span 9 !important; } .cont-xs-10 { grid-column: span 10 !important; } .cont-xs-11 { grid-column: span 11 !important; } .cont-xs-12 { grid-column: span 12 !important; } } @container (max-width: 576px) { .cont-sm-1 { grid-column: span 1 !important; } .cont-sm-2 { grid-column: span 2 !important; } .cont-sm-3 { grid-column: span 3 !important; } .cont-sm-4 { grid-column: span 4 !important; } .cont-sm-5 { grid-column: span 5 !important; } .cont-sm-6 { grid-column: span 6 !important; } .cont-sm-7 { grid-column: span 7 !important; } .cont-sm-8 { grid-column: span 8 !important; } .cont-sm-9 { grid-column: span 9 !important; } .cont-sm-10 { grid-column: span 10 !important; } .cont-sm-11 { grid-column: span 11 !important; } .cont-sm-12 { grid-column: span 12 !important; } } @container (min-width: 577px) { .cont-md-1 { grid-column: span 1 !important; } .cont-md-2 { grid-column: span 2 !important; } .cont-md-3 { grid-column: span 3 !important; } .cont-md-4 { grid-column: span 4 !important; } .cont-md-5 { grid-column: span 5 !important; } .cont-md-6 { grid-column: span 6 !important; } .cont-md-7 { grid-column: span 7 !important; } .cont-md-8 { grid-column: span 8 !important; } .cont-md-9 { grid-column: span 9 !important; } .cont-md-10 { grid-column: span 10 !important; } .cont-md-11 { grid-column: span 11 !important; } .cont-md-12 { grid-column: span 12 !important; } } @container (min-width: 992px) { .cont-lg-1 { grid-column: span 1 !important; } .cont-lg-2 { grid-column: span 2 !important; } .cont-lg-3 { grid-column: span 3 !important; } .cont-lg-4 { grid-column: span 4 !important; } .cont-lg-5 { grid-column: span 5 !important; } .cont-lg-6 { grid-column: span 6 !important; } .cont-lg-7 { grid-column: span 7 !important; } .cont-lg-8 { grid-column: span 8 !important; } .cont-lg-9 { grid-column: span 9 !important; } .cont-lg-10 { grid-column: span 10 !important; } .cont-lg-11 { grid-column: span 11 !important; } .cont-lg-12 { grid-column: span 12 !important; } } @container (min-width: 1600px) { .cont-xl-1 { grid-column: span 1 !important; } .cont-xl-2 { grid-column: span 2 !important; } .cont-xl-3 { grid-column: span 3 !important; } .cont-xl-4 { grid-column: span 4 !important; } .cont-xl-5 { grid-column: span 5 !important; } .cont-xl-6 { grid-column: span 6 !important; } .cont-xl-7 { grid-column: span 7 !important; } .cont-xl-8 { grid-column: span 8 !important; } .cont-xl-9 { grid-column: span 9 !important; } .cont-xl-10 { grid-column: span 10 !important; } .cont-xl-11 { grid-column: span 11 !important; } .cont-xl-12 { grid-column: span 12 !important; } } @container (min-width: 2600px) { .cont-xxl-1 { grid-column: span 1 !important; } .cont-xxl-2 { grid-column: span 2 !important; } .cont-xxl-3 { grid-column: span 3 !important; } .cont-xxl-4 { grid-column: span 4 !important; } .cont-xxl-5 { grid-column: span 5 !important; } .cont-xxl-6 { grid-column: span 6 !important; } .cont-xxl-7 { grid-column: span 7 !important; } .cont-xxl-8 { grid-column: span 8 !important; } .cont-xxl-9 { grid-column: span 9 !important; } .cont-xxl-10 { grid-column: span 10 !important; } .cont-xxl-11 { grid-column: span 11 !important; } .cont-xxl-12 { grid-column: span 12 !important; } }
.hov-child, .hov-container:hover .hov-hidden { visibility: hidden; max-height: 0; overflow: hidden; transition: visibility, max-height, opacity 0.25s ease-in-out; opacity: 0; max-width: 0; } .hov-container:hover .hov-child, .hov-container.active .hov-child { visibility: visible; max-height: 1000px !important; opacity: 1; max-width: 10000px; }
.icon, .bi { min-width: var(--icon,16px); height: auto; fill: currentColor; margin: 0 var(--margin,6px); pointer-events: none; touch-action: none; } .icon.xl, .bi.xl { font-size: 85px; } .icon.lg, .bi.lg { font-size: 60px; } .icon.md, .bi.md { font-size: 35px; } .icon.sm, .bi.sm { font-size: 20px; } .icon.xs, .bi.xs { font-size: 12px; }
img.responsive-width,.img-fluid-width { width: 100%; height: auto; } img.responsive-height,.img-fluid-height { height: 100%; width: auto; } img.responsive,.img-fluid{ max-width: 100%; max-height: 100%; } img.uniform { width: auto; height: 100%; } .img-container { overflow: hidden; display: flex; justify-content: center; align-items: center; } .img-container.contain img { object-fit: contain; } .img-container.cover img { object-fit: cover; } .img-container.fill img { object-fit: fill; } .img-container-user { overflow: hidden; border-radius: 50%; border: 1px solid var(--border-color,#dee2e6); display: flex; } .img-container-user.sm { width: 26px; height: 26px; } .img-container-user.md { width: 52px; height: 52px; } .img-container-user { width: 208px; height: 208px; } .img-container-user.sm .bi { font-size: 12px; align-content: center; } .img-container-user.md .bi { font-size: 24px; align-content: center; } .img-container-user .bi { font-size: 48px; align-content: center; }
.in-group { display: flex; grid-gap: var(--gap,3px); grid-row-gap: var(--gap,3px); line-height: inherit; font-size: inherit; align-content: start; color: var(--background-color-contrast,#212529); flex-direction: column; justify-content: start; align-items: stretch; flex-wrap: wrap; background-color: inherit; border-color: none; border-width: 0; min-width: min(95%,var(--container-units,256px),var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); box-sizing: border-box; } input{ box-sizing: border-box; color: inherit; } input.hide_step::-webkit-outer-spin-button, input.hide_step::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input.hide_step[type="number"] { -moz-appearance: textfield; } .sidebar .in-group{ min-width: min(95%,var(--sidebar-units),var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); } .input-blended{ border: none; width: 100%; padding: 0; margin: 0; border-radius: 0; box-sizing: border-box; background-color: inherit; } .input-blended:focus{ border:none !important; outline: none !important; } fieldset{ border: none; margin: 0; padding: inherit; display: block; } .in-group label span{ margin-left: var(--margin,6px); } .in-group label { display: inline-block; } input:not(.input-blended), .in-group .in-container, select:not(.input-blended), textarea:not(.input-blended), .input:not(.input-blended), .radios:not(.input-blended), .checkboxes:not(.input-blended) { border: 1px solid var(--border-color,#dee2e6); line-height: inherit; font-size: inherit; background-color: var(--background-color,#ffffff); padding: var(--padding,6px); margin: 0; border-radius: 5px; min-width: 0; color: inherit; } .in-icon{ border: 1px solid var(--border-color,#dee2e6); line-height: inherit; font-size: inherit; background-color: var(--background-color,#ffffff); color: var(--background-color-contrast,#212529); padding: var(--padding,6px); border-radius: 5px; min-width: 0; margin-left: 5px; margin-right: 5px; } .in-group.uniform .radios, .in-group.uniform .checkboxes { border-radius: 0 !important; } .in-container { width: 100%; display: flex; flex-direction: row; align-items: center; gap: var(--gap,3px); flex-wrap: wrap; } .in-group > input:only-of-type, .in-group > select:only-of-type, .in-group > textarea:only-of-type, .in-group > .radios:only-of-type, .in-group > .checkboxes:only-of-type{ border-radius: 5px; } .in-group > .flex > input{ flex-grow: 1; } .in-group textarea{ width: 100%; } .in-group > *{ margin:0; } .in-group:has(.flex) > *{ border-radius: 0; } .in-group .flex > *:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .in-group .flex > *:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .in-group .flex .icon{ border: 1px solid var(--border-color,#dee2e6); line-height: inherit; font-size: inherit; background-color: var(--background-color,#ffffff); color: var(--background-color-contrast,#212529); padding: var(--padding,6px); } .in-group input[type="file"] { padding: var(--padding,6px); border: 1px solid var(--border-color,#dee2e6); border-radius: 4px; } .in-group input[type="radio"], .in-group input[type="checkbox"] { margin: var(--margin,6px); display: inline-block; } .in-group textarea { resize: vertical; } .in-group input[type="file"] { padding: var(--padding,6px); border: 1px solid var(--border-color,#dee2e6); border-radius: 5px; } .in-group input[type="file"]::-webkit-file-upload-button, .in-group input[type="file"]::file-selector-button{ background-color: var(--primary-color,#007bff); color: var(--primary-color-contrast,var(--light-color,#ffffff)); border: none; border-radius: 5px; padding: var(--padding,6px) calc(2*var(--padding,6px)); margin-right: var(--margin,6px); cursor: pointer; } .in-group input[type="file"]::-webkit-file-upload-button:hover, .in-group input[type="file"]::file-selector-button:hover { background-color: var(--primary-color-hover,#0056b3); } input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 0 !important; } .checkbox-md, .radio-md { height: 20px; width: 20px; display: block; margin: var(--margin,6px); } .checkbox-container,.radio-container{ transition: background 0.25s ease-in-out; } .checkbox-container:has(input:checked),.radio-container:has(input:checked) { background: var(--background-active-color,#e0dce9); } .checkbox-container:has(input) .only-checked, .checkbox-container:has(input:checked) .only-unchecked, .radio-container:has(input) .only-checked, .radio-container:has(input:checked) .only-unchecked{ display:none; } .checkbox-container:has(input:checked) .only-checked, .checkbox-container:has(input) .only-unchecked, .radio-container:has(input:checked) .only-checked, .radio-container:has(input) .only-unchecked{ display:initial; } .checkboxes, .radios { width: 100%; box-sizing: border-box; align-content: center; } .checkboxes.vert input[type="checkbox"], .radios.vert input[type="radio"]{ display:inline-block; max-width:50px; } .checkboxes.vert label, .radios.vert label{ width:calc(100% - 50px); display:inline-block; } .checkboxes input, .radios input { width:auto !important; } .checkbox, .radio { padding: 2px; display: flex; align-content: center; align-items: center; } .in-group.primary input[type="checkbox"], .in-group.primary input[type="radio"] { accent-color: var(--primary-color,#007bff); } .in-group.secondary input[type="checkbox"], .in-group.secondary input[type="radio"] { accent-color: var(--secondary-color,#6c757d); } .in-group.success input[type="checkbox"], .in-group.success input[type="radio"] { accent-color: var(--success-color,#28a745); } .in-group.warning input[type="checkbox"], .in-group.warning input[type="radio"] { accent-color: var(--warning-color,#ff7b07); } .in-group.danger input[type="checkbox"], .in-group.danger input[type="radio"] { accent-color: var(--danger-color,#dc3545); } .in-group.info input[type="checkbox"], .in-group.info input[type="radio"] { accent-color: var(--info-color,#17a2b8); } .in-group.primary{ color: var(--primary-color,#007bff); } .in-group.primary input, .in-group.primary select, .in-group.primary textarea, .in-group.primary .input, .in-group.primary .radios, .in-group.primary .checkboxes { border-color: var(--primary-color,#007bff); background-color: var(--primary-color-light); } .in-group.primary input[type="file"]::-webkit-file-upload-button, .in-group.primary input[type="file"]::file-selector-button { background-color: var(--primary-color,#007bff); color: var(--primary-color-contrast,var(--light-color,#ffffff)); } .in-group.primary input[type="file"]::-webkit-file-upload-button:hover, .in-group.primary input[type="file"]::file-selector-button:hover { background-color: var(--primary-color-hover,#0056b3); } .in-group.primary input:focus-visible, .in-group.primary select:focus-visible, .in-group.primary textarea:focus-visible { border-color: var(--primary-color,#007bff); } .in-group.secondary{ color: var(--secondary-color,#6c757d) } .in-group.secondary input, .in-group.secondary select, .in-group.secondary textarea, .in-group.secondary .input, .in-group.secondary .radios, .in-group.secondary .checkboxes { border-color: var(--secondary-color,#6c757d); background-color: var(--secondary-color-light); } .in-group.secondary input[type="file"]::-webkit-file-upload-button, .in-group.secondary input[type="file"]::file-selector-button { background-color: var(--secondary-color,#6c757d); color: var(--secondary-color-contrast, var(--light-color,#ffffff)); } .in-group.secondary input[type="file"]::-webkit-file-upload-button:hover, .in-group.secondary input[type="file"]::file-selector-button:hover { background-color: var(--secondary-color-hover,#5a6268); } .in-group.secondary input:focus-visible, .in-group.secondary select:focus-visible, .in-group.secondary textarea:focus-visible { border-color: var(--secondary-color,#6c757d); } .in-group.success{ color: var(--success-color,#28a745) } .in-group.success input, .in-group.success select, .in-group.success textarea, .in-group.success .input, .in-group.success .radios, .in-group.success .checkboxes { border-color: var(--success-color,#28a745); background-color: var(--success-color-light); } .in-group.success input[type="file"]::-webkit-file-upload-button, .in-group.success input[type="file"]::file-selector-button { background-color: var(--success-color,#28a745); color: var(--success-color-contrast, var(--light-color,#ffffff)); } .in-group.success input[type="file"]::-webkit-file-upload-button:hover, .in-group.success input[type="file"]::file-selector-button:hover { background-color: var(--success-color-hover,#218838); } .in-group.success input:focus-visible, .in-group.success select:focus-visible, .in-group.success textarea:focus-visible { border-color: var(--success-color,#28a745); } .in-group.warning{ color: var(--warning-color,#ff7b07) } .in-group.warning input, .in-group.warning select, .in-group.warning textarea, .in-group.warning .input, .in-group.warning .radios, .in-group.warning .checkboxes { border-color: var(--warning-color,#ff7b07); background-color: var(--warning-color-light); } .in-group.warning input[type="file"]::-webkit-file-upload-button, .in-group.warning input[type="file"]::file-selector-button { background-color: var(--warning-color,#ff7b07); color: var(--warning-color-contrast, var(--light-color,#ffffff)); } .in-group.warning input[type="file"]::-webkit-file-upload-button:hover, .in-group.warning input[type="file"]::file-selector-button:hover { background-color: var(--warning-color-hover,#1e7e34); } .in-group.warning input:focus-visible, .in-group.warning select:focus-visible, .in-group.warning textarea:focus-visible { border-color: var(--warning-color,#ff7b07); } .in-group.danger{ color: var(--danger-color,#dc3545) } .in-group.danger input, .in-group.danger select, .in-group.danger textarea, .in-group.danger .input, .in-group.danger .radios, .in-group.danger .checkboxes { border-color: var(--danger-color,#dc3545); background-color: var(--danger-color-light); } .in-group.danger input[type="file"]::-webkit-file-upload-button, .in-group.danger input[type="file"]::file-selector-button { background-color: var(--danger-color,#dc3545); color: var(--danger-color-contrast, var(--light-color,#ffffff)); } .in-group.danger input[type="file"]::-webkit-file-upload-button:hover, .in-group.danger input[type="file"]::file-selector-button:hover { background-color: var(--danger-color-hover,#c82333); } .in-group.danger input:focus-visible, .in-group.danger select:focus-visible, .in-group.danger textarea:focus-visible { border-color: var(--danger-color,#dc3545); } .in-group.info{ color: var(--info-color,#17a2b8) } .in-group.info input, .in-group.info select, .in-group.info textarea, .in-group.info .input, .in-group.info .radios, .in-group.info .checkboxes { border-color: var(--info-color,#17a2b8); background-color: var(--info-color-light); } .in-group.info input[type="file"]::-webkit-file-upload-button, .in-group.info input[type="file"]::file-selector-button { background-color: var(--info-color,#17a2b8); color: var(--info-color-contrast, var(--light-color,#ffffff)); } .in-group.info input[type="file"]::-webkit-file-upload-button:hover, .in-group.info input[type="file"]::file-selector-button:hover { background-color: var(--info-color-hover, #138496); } .in-group.info input:focus-visible, .in-group.info select:focus-visible, .in-group.info textarea:focus-visible { border-color: var(--info-color,#17a2b8); }
.g-1 { gap: var(--gap,3px); } .g-2 { gap: calc(2 * var(--gap,3px)); } .g-3 { gap: calc(3 * var(--gap,3px)); } .g-4 { gap: calc(4 * var(--gap,3px)); } .g-5 { gap: calc(5 * var(--gap,3px)); } .full-60{ min-height: 60vh; } .full-80{ min-height: 80vh; } .full{ min-height: 100vh; } .relative { position: relative !important; } .absolute { position: absolute !important; } .fixed { position: fixed !important; } .fixed.top { top: 0; } .sticky { position: sticky; } .sticky.top { top: 0; } .sticky.top-nav { top: 0; } .sticky.bottom { bottom: 0; } .w-25 { width: 25%; } .w-50 { width: 50%; } .w-75 { width: 75%; } .w-100 { width: 100%; } .h-25 { height: 25%; } .h-50 { height: 50%; } .h-75 { height: 75%; } .h-100 { height: 100%; } .h-150-px{ height: 150px; } .h-300-px{ height: 300px; } .maxw-25 { max-width: 25%; } .maxw-50 { max-width: 50%; } .maxw-75 { max-width: 75%; } .maxw-100 { max-width: 100%; } .minw-25 { min-width: 25%; } .minw-50 { min-width: 50%; } .minw-75 { min-width: 75%; } .minw-100 { min-width: 100%; } .minh-50vh { min-height: 50vh; } .minh-75vh { min-height: 75vh; } .minh-100vh { min-height: 100vh; } .top-main { top: calc(var(--padding,6px) + var(--padding,6px) + var(--main-menu-logo-height,35px)); } @media (max-width: 576px) { .full { min-height: 0; } .mobile-w-100 { width: 100%; } .mobile-w-75 { width: 75%; } .mobile-w-50 { width: 50%; } .mobile-w-25 { width: 25%; } .mobile-h-100 { height: 100%; } .mobile-h-75 { height: 75%; } .mobile-h-50 { height: 50%; } .mobile-h-25 { height: 25%; } .mobile-minh-100vh { min-height: 100vh; } .mobile-minh-75vh { min-height: 75vh; } .mobile-minh-50vh { min-height: 50vh; } .mobile-maxw-100 { max-width: 100%; } .mobile-maxw-75 { max-width: 75%; } .mobile-maxw-50 { max-width: 50%; } .mobile-maxw-25 { max-width: 25%; } } @media (min-width: 768px) { .desktop-w-100 { width: 100%; } .desktop-w-75 { width: 75%; } .desktop-w-50 { width: 50%; } .desktop-w-25 { width: 25%; } .desktop-h-100 { height: 100%; } .desktop-h-75 { height: 75%; } .desktop-h-50 { height: 50%; } .desktop-h-25 { height: 25%; } .desktop-minh-100vh { min-height: 100vh; } .desktop-minh-75vh { min-height: 75vh; } .desktop-minh-50vh { min-height: 50vh; } .desktop-maxw-100 { max-width: 100%; } .desktop-maxw-75 { max-width: 75%; } .desktop-maxw-50 { max-width: 50%; } .desktop-maxw-25 { max-width: 25%; } .sticky-md { position: sticky; } } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .z-6 { z-index: 6; } .z-7 { z-index: 7; } .z-8 { z-index: 8; } .z-9 { z-index: 9; } .z-10 { z-index: 10; } .z-auto { z-index: auto; } .right-0 { right: 0; } .top-0 { top: 0; } .left-0 { left: 0; } .bottom-0 { bottom: 0; } .float-right { float: right; } .float-left { float: left; } .float-none { float: none; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-scroll { overflow: scroll; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-hidden { overflow-y: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-scroll { overflow-x: scroll; } .overflow-y-scroll { overflow-y: scroll; }
a:not(.wrapped) { color: var(--link-color,#007bff); text-decoration: none; margin: 0; transition: color 0.25s ease-in-out; } a.stretched{ display: block; height: 100%; width: 100%; } a.wrapped { text-decoration: none; color: inherit; display: block; } a.wrapped:hover{ text-decoration: none !important; } a:not(.btn):not(.badge) { border: 0 !important; } a.primary { color: var(--primary-color,#007bff); } a.primary:not(.btn):not(.badge):hover { color: var(--primary-color-hover,#0056b3); } a.primary:active:not(.btn) { color: var(--primary-color-active,#004085); } a.secondary { color: var(--secondary-color,#6c757d); } a.secondary:not(.btn):not(.badge):hover { color: var(--secondary-color-hover,#5a6268); } a.secondary:active:not(.btn) { color: var(--secondary-color-active,#545b62); } a.success { color: var(--success-color,#28a745); } a.success:not(.btn):not(.badge):hover { color: var(--success-color-hover,#218838); } a.success:active:not(.btn) { color: var(--success-color-active,#1e7e34); } a.warning { color: var(--warning-color,#ff7b07); } a.warning:not(.btn):not(.badge):hover { color: var(--warning-color-hover,#1e7e34); } a.warning:active:not(.btn) { color: var(--warning-color-active,#ff7b07); } a.danger { color: var(--danger-color,#dc3545); } a.danger:not(.btn):not(.badge):hover { color: var(--danger-color-hover,#c82333); } a.danger:active:not(.btn) { color: var(--danger-color-active,#bd2130); } a.info { color: var(--info-color,#17a2b8); } a.info:not(.btn):not(.badge):hover { color: var(--info-color-hover, #138496); } a.info:active:not(.btn) { color: var(--info-color-active, #117a8b); } a.primary-hov { color: inherit; } a.primary-hov:not(.btn):not(.badge):hover { color: var(--primary-color-hover,#0056b3); } a.primary-hov:active:not(.btn) { color: var(--primary-color-active,#004085); } a.secondary-hov { color: inherit; } a.secondary-hov:not(.btn):not(.badge):hover { color: var(--secondary-color-hover,#5a6268); } a.secondary-hov:active:not(.btn) { color: var(--secondary-color-active,#545b62); } a.success-hov { color: inherit; } a.success-hov:not(.btn):not(.badge):hover { color: var(--success-color-hover,#218838); } a.success-hov:active:not(.btn) { color: var(--success-color-active,#1e7e34); } a.warning-hov { color: inherit; } a.warning-hov:not(.btn):not(.badge):hover { color: var(--warning-color-hover,#ff7b07); } a.warning-hov:active:not(.btn) { color: var(--warning-color-active,#e36a00); } a.danger-hov { color: inherit; } a.danger-hov:not(.btn):not(.badge):hover { color: var(--danger-color-hover,#c82333); } a.danger-hov:active:not(.btn) { color: var(--danger-color-active,#bd2130); } a.info-hov { color: inherit; } a.info-hov:not(.btn):not(.badge):hover { color: var(--info-color-hover,#138496); } a.info-hov:active:not(.btn) { color: var(--info-color-active,#117a8b); }
.list { padding: 0; margin: 0; counter-reset: list-counter; } .list > * { color: var(--text-color,#212529); background-color: inherit; padding: var(--padding,6px); text-decoration: none; display: block; position: relative; margin: 0; } .list > li { text-indent: var(--margin,6px); } .list.rounded > * { border-radius: 5px; } .list a:hover { text-decoration: none; } ul.list > *, ol.list > * { list-style-type: none; padding: var(--padding,6px) calc(2*var(--padding,6px)) var(--padding,6px) calc(4*var(--padding,6px)); } ul.list li::before { content: "•"; position: absolute; left: 5px; } ol.list li::before { content: counter(list-counter) "."; counter-increment: list-counter; position: absolute; left: 10px; } .list > *:hover { background-color: var(--background-alt-color,#ebebeb); color: var(--text-color,#212529); } .list.primary > * { background-color: var(--primary-color,#007bff); color: var(--primary-color-contrast,var(--light-color,#ffffff)); } .list.primary > *:hover { background-color: var(--primary-color-hover,#0056b3); } .list.primary > *:active { background-color: var(--primary-color-active,#004085); } .list.secondary > * { background-color: var(--secondary-color,#6c757d); color: var(--secondary-color-contrast, var(--light-color,#ffffff)); } .list.secondary > *:hover { background-color: var(--secondary-color-hover,#5a6268); } .list.secondary > *:active { background-color: var(--secondary-color-active,#545b62); } .list.success > * { background-color: var(--success-color,#28a745); color: var(--success-color-contrast, var(--light-color,#ffffff)); } .list.success > *:hover { background-color: var(--success-color-hover,#218838); } .list.success > *:active { background-color: var(--success-color-active,#1e7e34); } .list.warning > * { background-color: var(--warning-color,#ff7b07); color: var(--warning-color-contrast, var(--light-color,#ffffff)); } .list.warning > *:hover { background-color: var(--warning-color-hover,#1e7e34); } .list.warning > *:active { background-color: var(--warning-color-active,#ff7b07); } .list.danger > * { background-color: var(--danger-color,#dc3545); color: var(--danger-color-contrast, var(--light-color,#ffffff)); } .list.danger > *:hover { background-color: var(--danger-color-hover,#c82333); } .list.danger > *:active { background-color: var(--danger-color-active,#bd2130); } .list.info > * { background-color: var(--info-color,#17a2b8); color: var(--info-color-contrast, var(--light-color,#ffffff)); } .list.info > *:hover { background-color: var(--info-color-hover, #138496); } .list.info > *:active { background-color: var(--info-color-active, #117a8b); }
.loader-ellipsis, .loader-ellipsis div { box-sizing: border-box; } .loader-ellipsis { align-content: center; display: flex; height: auto; position: relative; min-width: 75px; } .loader-ellipsis div { position: absolute; top: 3px; width: 13.33333px; height: 13.33333px; border-radius: 50%; background: currentColor; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .loader-ellipsis div:nth-child(1) { left: 8px; animation: loader-ellipsis1 0.6s infinite; } .loader-ellipsis div:nth-child(2) { left: 8px; animation: loader-ellipsis2 0.6s infinite; } .loader-ellipsis div:nth-child(3) { left: 32px; animation: loader-ellipsis2 0.6s infinite; } .loader-ellipsis div:nth-child(4) { left: 56px; animation: loader-ellipsis3 0.6s infinite; } @keyframes loader-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes loader-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes loader-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }
.loader-grid, .loader-grid div { box-sizing: border-box; } .loader-grid { display: inline-block; position: relative; width: 80px; height: 80px; } .loader-grid div { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: currentColor; animation: loader-grid 1.2s linear infinite; } .loader-grid div:nth-child(1) { top: 8px; left: 8px; animation-delay: 0s; } .loader-grid div:nth-child(2) { top: 8px; left: 32px; animation-delay: -0.4s; } .loader-grid div:nth-child(3) { top: 8px; left: 56px; animation-delay: -0.8s; } .loader-grid div:nth-child(4) { top: 32px; left: 8px; animation-delay: -0.4s; } .loader-grid div:nth-child(5) { top: 32px; left: 32px; animation-delay: -0.8s; } .loader-grid div:nth-child(6) { top: 32px; left: 56px; animation-delay: -1.2s; } .loader-grid div:nth-child(7) { top: 56px; left: 8px; animation-delay: -0.8s; } .loader-grid div:nth-child(8) { top: 56px; left: 32px; animation-delay: -1.2s; } .loader-grid div:nth-child(9) { top: 56px; left: 56px; animation-delay: -1.6s; } @keyframes loader-grid { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.logo { height: var(--main-menu-logo-height,40px); width: auto; max-width: 250px; min-width: 50px; } .logo-w { max-width: min(90%,300px); height: auto; max-height: calc(2 * var(--main-menu-logo-height,40px)); } .logo-sidebar{ display: block; width: 90%; margin: 5px auto; height: auto; max-height: 200px; object-fit: contain; }
.m-auto { margin: auto !important; } .ms-auto { margin: 0 auto !important; } .m-0 { margin: 0 !important; } .m-1 { margin: var(--margin,6px) !important; } .m-2 { margin: calc(2*var(--margin,6px)) !important; } .m-3 { margin: calc(3*var(--margin,6px)) !important; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--margin,6px) !important; } .mt-2 { margin-top: calc(2*var(--margin,6px)) !important; } .mt-3 { margin-top: calc(3*var(--margin,6px)) !important; } .mt-4 { margin-top: calc(4*var(--margin,6px)) !important; } .mt-5 { margin-top: calc(5*var(--margin,6px)) !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--margin,6px) !important; } .mb-2 { margin-bottom: calc(2*var(--margin,6px)) !important; } .mb-3 { margin-bottom: calc(3*var(--margin,6px)) !important; } .ml-auto{ margin-left: auto !important; } .ml-0 { margin-left: 0 !important; } .ml-1 { margin-left: var(--margin,6px) !important; } .ml-2 { margin-left: calc(2*var(--margin,6px)) !important; } .ml-3 { margin-left: calc(3*var(--margin,6px)) !important; } .mr-auto{ margin-right: auto !important; } .mr-0 { margin-right: 0 !important; } .mr-1 { margin-right: var(--margin,6px) !important; } .mr-2 { margin-right: calc(2*var(--margin,6px)) !important; } .mr-3 { margin-right: calc(3*var(--margin,6px)) !important; } @media (max-width: 576px) { .m-sm-auto { margin: auto !important; } .m-sm-0 { margin: 0 !important; } .m-sm-1 { margin: var(--margin,6px) !important; } .m-sm-2 { margin: calc(2*var(--margin,6px)) !important; } .m-sm-3 { margin: calc(3*var(--margin,6px)) !important; } .mt-sm-1 { margin-top: var(--margin,6px) !important; } .mt-sm-2 { margin-top: calc(2*var(--margin,6px)) !important; } .mt-sm-3 { margin-top: calc(3*var(--margin,6px)) !important; } .mt-sm-4 { margin-top: calc(4*var(--margin,6px)) !important; } .mt-sm-5 { margin-top: calc(5*var(--margin,6px)) !important; } .mb-sm-1 { margin-bottom: var(--margin,6px) !important; } .mb-sm-2 { margin-bottom: calc(2*var(--margin,6px)) !important; } .mb-sm-3 { margin-bottom: calc(3*var(--margin,6px)) !important; } .ml-sm-1 { margin-left: var(--margin,6px) !important; } .ml-sm-2 { margin-left: calc(2*var(--margin,6px)) !important; } .ml-sm-3 { margin-left: calc(3*var(--margin,6px)) !important; } .mr-sm-1 { margin-right: var(--margin,6px) !important; } .mr-sm-2 { margin-right: calc(2*var(--margin,6px)) !important; } .mr-sm-3 { margin-right: calc(3*var(--margin,6px)) !important; } } @media (min-width: 577px) { .m-md-auto { margin: auto !important; } .m-md-0 { margin: 0 !important; } .m-md-1 { margin: var(--margin,6px) !important; } .m-md-2 { margin: calc(2*var(--margin,6px)) !important; } .m-md-3 { margin: calc(3*var(--margin,6px)) !important; } .mt-md-1 { margin-top: var(--margin,6px) !important; } .mt-md-2 { margin-top: calc(2*var(--margin,6px)) !important; } .mt-md-3 { margin-top: calc(3*var(--margin,6px)) !important; } .mt-md-4 { margin-top: calc(4*var(--margin,6px)) !important; } .mt-md-5 { margin-top: calc(5*var(--margin,6px)) !important; } .mb-md-1 { margin-bottom: var(--margin,6px) !important; } .mb-md-2 { margin-bottom: calc(2*var(--margin,6px)) !important; } .mb-md-3 { margin-bottom: calc(3*var(--margin,6px)) !important; } .ml-md-1 { margin-left: var(--margin,6px) !important; } .ml-md-2 { margin-left: calc(2*var(--margin,6px)) !important; } .ml-md-3 { margin-left: calc(3*var(--margin,6px)) !important; } .mr-md-1 { margin-right: var(--margin,6px) !important; } .mr-md-2 { margin-right: calc(2*var(--margin,6px)) !important; } .mr-md-3 { margin-right: calc(3*var(--margin,6px)) !important; } } @media (min-width: 992px) { .m-lg-auto { margin: auto !important; } .m-lg-0 { margin: 0 !important; } .m-lg-1 { margin: var(--margin,6px) !important; } .m-lg-2 { margin: calc(2*var(--margin,6px)) !important; } .m-lg-3 { margin: calc(3*var(--margin,6px)) !important; } .mt-lg-1 { margin-top: var(--margin,6px) !important; } .mt-lg-2 { margin-top: calc(2*var(--margin,6px)) !important; } .mt-lg-3 { margin-top: calc(3*var(--margin,6px)) !important; } .mt-lg-4 { margin-top: calc(4*var(--margin,6px)) !important; } .mt-lg-5 { margin-top: calc(5*var(--margin,6px)) !important; } .mb-lg-1 { margin-bottom: var(--margin,6px) !important; } .mb-lg-2 { margin-bottom: calc(2*var(--margin,6px)) !important; } .mb-lg-3 { margin-bottom: calc(3*var(--margin,6px)) !important; } .ml-lg-1 { margin-left: var(--margin,6px) !important; } .ml-lg-2 { margin-left: calc(2*var(--margin,6px)) !important; } .ml-lg-3 { margin-left: calc(3*var(--margin,6px)) !important; } .mr-lg-1 { margin-right: var(--margin,6px) !important; } .mr-lg-2 { margin-right: calc(2*var(--margin,6px)) !important; } .mr-lg-3 { margin-right: calc(3*var(--margin,6px)) !important; } } @media (min-width: 1200px) { .m-xl-auto { margin: auto !important; } .m-xl-0 { margin: 0 !important; } .m-xl-1 { margin: var(--margin,6px) !important; } .m-xl-2 { margin: calc(2*var(--margin,6px)) !important; } .m-xl-3 { margin: calc(3*var(--margin,6px)) !important; } .mt-xl-1 { margin-top: var(--margin,6px) !important; } .mt-xl-2 { margin-top: calc(2*var(--margin,6px)) !important; } .mt-xl-3 { margin-top: calc(3*var(--margin,6px)) !important; } .mt-xl-4 { margin-top: calc(4*var(--margin,6px)) !important; } .mt-xl-5 { margin-top: calc(5*var(--margin,6px)) !important; } .mb-xl-1 { margin-bottom: var(--margin,6px) !important; } .mb-xl-2 { margin-bottom: calc(2*var(--margin,6px)) !important; } .mb-xl-3 { margin-bottom: calc(3*var(--margin,6px)) !important; } .ml-xl-1 { margin-left: var(--margin,6px) !important; } .ml-xl-2 { margin-left: calc(2*var(--margin,6px)) !important; } .ml-xl-3 { margin-left: calc(3*var(--margin,6px)) !important; } .mr-xl-1 { margin-right: var(--margin,6px) !important; } .mr-xl-2 { margin-right: calc(2*var(--margin,6px)) !important; } .mr-xl-3 { margin-right: calc(3*var(--margin,6px)) !important; } }
.modal { opacity: 0; visibility: hidden; position: fixed; inset: 0px; text-align: left; background: rgba(0, 0, 0, 0.9); transition: opacity 0.25s; display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .modal.sm .modal-inner { max-width: min(calc(2 * var(--container-units,256px)), var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); } .modal.md .modal-inner{ max-width: min(calc(3 * var(--container-units,256px)), var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); } .modal.lg .modal-inner{ max-width: min(calc(4 * var(--container-units,256px)), var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); } .modal.xl .modal-inner{ max-width: min(calc(6 * var(--container-units,256px)), var(--max-container-width,min(90vw, calc(6*var(--container-units,256px))))); } .modal-bg { position: absolute; inset: 0; cursor: pointer; } .modal-state { display: none; } .modal-state:checked + .modal { opacity: 1; visibility: visible; z-index: 99999; } .modal-state:checked + .modal .modal-inner { top: 0; } .modal-inner { transition: top 0.25s; position: absolute; width: 90%; max-width: 90%; height: 90%; overflow: auto; background: var(--background-color,#ffffff); border-radius: 5px; display: flex; flex-direction: column; margin-top: calc(var(--main-menu-height) + 10px); } .modal-close { cursor: pointer; margin-left: auto; height: 45px; width: auto; display: flex; align-items: center; } .modal-header, .modal-footer { padding: var(--padding,6px); display: flex; align-items: center; justify-content: space-between; position: sticky; background: var(--background-alt-color,#ebebeb); } .modal-header { top: 0; border-bottom: 1px solid var(--border-color,#dee2e6); } .modal-body { padding: var(--padding,6px); background: var(--background-color,#ffffff); flex-grow: 1; overflow-y: auto; } .modal-footer { bottom: 0; border-top: 1px solid var(--border-color,#dee2e6); } .modal-close:hover:after, .modal-close:hover:before { background: #aaa; }
nav.main{ z-index:20; } .nav-item input[type="text"] { height: 28px; border-radius: 5px; } .nav-item.primary { background-color: var(--primary-color,#007bff); color: var(--primary-color-contrast,var(--light-color,#ffffff)) !important; } .nav-item.primary:hover { background-color: var(--primary-color-hover,#0056b3) !important; } .nav-item.secondary { background-color: var(--secondary-color,#6c757d); color: var(--secondary-color-contrast, var(--light-color,#ffffff)) !important; } .nav-item.secondary:hover { background-color: var(--secondary-color-hover,#5a6268) !important; } .nav-item.success { background-color: var(--success-color,#28a745); color: var(--success-color-contrast, var(--light-color,#ffffff)) !important; } .nav-item.success:hover { background-color: var(--success-color-hover,#218838) !important; } .nav-item.warning { background-color: var(--warning-color,#ff7b07); color: var(--warning-color-contrast, var(--light-color,#ffffff)) !important; } .nav-item.warning:hover { background-color: var(--warning-color-hover,#1e7e34) !important; } .nav-item.danger { background-color: var(--danger-color,#dc3545); color: var(--danger-color-contrast, var(--light-color,#ffffff)) !important; } .nav-item.danger:hover { background-color: var(--danger-color-hover,#c82333) !important; } .nav-item.info { background-color: var(--info-color,#17a2b8); color: var(--info-color-contrast, var(--light-color,#ffffff)) !important; } .nav-item.info:hover { background-color: var(--info-color-hover, #138496) !important; }
nav.vert-dropdown { display: flex; align-items: start; } nav.vert-dropdown .nav-end { display: flex; flex-grow: 1; justify-content: flex-end; } nav.vert-dropdown .nav-end .nav-dropdown{ right:15px } nav.vert-dropdown .nav-end .dropdown-menu{ left: auto; right: 0; } nav.vert-dropdown > * { padding: 0; align-content: center; justify-content: start; } nav.vert-dropdown .nav-tab .icon{ margin-right: var(--margin,6px); } nav.vert-dropdown .nav-tab > *{ display:flex; border-radius: 5px; transition: background-color 0.25s ease-in-out; padding: var(--padding,6px); align-content: center; align-items: center; vertical-align: middle; color: var(--background-color-contrast,#212529) } nav.vert-dropdown .nav-tab.active{ border-bottom: 2px solid var(--primary-color,#007bff); } nav.vert-dropdown .nav-tab > *:hover{ background-color: var(--border-color,#dee2e6); text-decoration: none; color: var(--background-color-contrast,#212529); } nav.vert-dropdown .nav-toggle, nav.vert-dropdown .nav-toggle-input{ display:none; } nav.vert-dropdown .nav-toggle { display: flex; align-content: center; align-items: center; vertical-align: middle; display: flex; border-radius: 5px; transition: background-color 0.25s ease-in-out; padding: var(--padding,6px); align-content: center; align-items: center; vertical-align: middle; color: var(--background-color-contrast,#212529); cursor: pointer; } nav.vert-dropdown .nav-toggle:hover{ background-color: var(--background-alt-color,#ebebeb); text-decoration: none; color: var(--background-color-contrast,#212529); } nav.vert-dropdown .nav-dropdown{ display:none; position: absolute; } nav.vert-dropdown .nav-toggle-input:checked ~ .nav-dropdown { position: absolute; background: var(--background-alt-color,#ebebeb); display: block; margin-top: 25px; padding: var(--padding,6px) 0; border-radius: 5px; border: 1px solid var(--border-color,#dee2e6); z-index: 99; } nav.hero .nav-toggle-input:checked ~ .nav-dropdown{ position:fixed !important; top:5px; margin-top: 0; max-width: calc(60% - 12px); min-width: 50%; min-height: 100vh; align-content: start; } nav.vert-dropdown .nav-toggle-input:checked ~ .nav-dropdown .nav-item{ border-radius: 0; margin:0; } nav.vert-dropdown .nav-toggle-input:checked ~ .nav-dropdown .nav-tab > *:hover{ background-color: var(--border-color,#dee2e6); text-decoration: none; color: var(--background-color-contrast,#212529); } @media (max-width: 576px) { nav.hero .nav-toggle-input:checked ~ .nav-dropdown{ width: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; min-height: 100vh; } }
nav.horiz { display: flex; align-items: center; vertical-align: middle; align-content: center; } nav.horiz, nav.horiz .nav-dropdown { display: flex; flex-wrap: nowrap; gap: var(--gap,3px); } nav.horiz .nav-tab{ padding-bottom:1px; } nav.horiz > * { align-content: center; align-items: center; vertical-align: middle; } nav.horiz .nav-tab .icon{ margin-right: var(--margin,6px); } nav.horiz .nav-tab > *{ display:flex; border-radius: 5px; transition: background-color 0.25s ease-in-out; margin: 0; padding: var(--padding,6px); align-content: center; align-items: center; vertical-align: middle; color: var(--background-color-contrast,#212529) } nav.horiz .nav-tab.active{ border-bottom: 2px solid var(--primary-color,#007bff); } nav.horiz .nav-tab > *:hover{ background-color: var(--border-color,#dee2e6); text-decoration: none; color: var(--background-color-contrast,#212529); } nav.horiz .nav-toggle, nav.horiz .nav-toggle-input{ display:none; } nav.horiz.collapsed .nav-dropdown{ display:none; position: absolute; } nav.horiz .nav-toggle:hover{ background-color: var(--background-alt-color,#ebebeb); text-decoration: none; color: var(--background-color-contrast,#212529); } nav.horiz.collapsed .nav-toggle { display: flex; align-content: center; align-items: center; vertical-align: middle; margin-left: auto; display: flex; border-radius: 5px; transition: background-color 0.25s ease-in-out; padding: var(--padding,6px); align-content: center; align-items: center; vertical-align: middle; color: var(--background-color-contrast,#212529); cursor: pointer; } nav.horiz .nav-toggle-input:checked ~ label .nav-dropdown { position: absolute; background: var(--background-alt-color,#ebebeb); align-self: flex-start; display: block; margin-top: 35px; padding: var(--padding,6px) 0; border-radius: 5px; border: 1px solid var(--border-color,#dee2e6); z-index: 10; right: 14px; } nav.horiz .nav-toggle-input:checked ~ label .nav-dropdown .nav-item:first{ border-top: 0; } nav.horiz .nav-toggle-input:checked ~ label .nav-dropdown .nav-item { border-radius: 0; margin: 0; background: inherit; border-radius: 0; border-left: 0; border-bottom: 0; } nav.horiz .nav-dropdown .nav-item{ width: 100%; } nav.horiz .nav-toggle-input:checked ~ label .nav-dropdown .nav-tab > *:hover{ background-color: var(--border-color,#dee2e6); text-decoration: none; color: var(--background-color-contrast,#212529); } @media (max-width: 576px) { nav.horiz, nav.horiz .nav-dropdown { flex-wrap: wrap; } nav.horiz .nav-toggle { display: flex; align-content: center; align-items: center; vertical-align: middle; margin-left: auto; display: flex; border-radius: 5px; transition: background-color 0.25s ease-in-out; padding: var(--padding,6px); align-content: center; align-items: center; vertical-align: middle; color: var(--background-color-contrast,#212529); cursor: pointer; } nav.horiz .nav-dropdown{ display:none; position: absolute; left: 5%; width: 90%; } }
nav.main { display: flex; background-color: var(--background-color,#ffffff); align-items: center; vertical-align: middle; width: 100%; padding-right: var(--margin,6px); box-sizing: border-box; z-index: 90; height: var(--main-menu-height,50px); border: 1px solid var(--border-color,#dee2e6); min-height: 50px; } .vs-is-fullscreen nav.main{ display:none !important; } nav.main .nav-tab{ position: relative; } nav.main>* { padding: 0; align-content: center; align-items: center; vertical-align: middle; } nav.main .nav-tab > * { display: flex; border-radius: 5px; transition: background-color 0.25s ease-in-out; padding: 0; align-content: center; align-items: center; vertical-align: middle; color: var(--background-color-contrast,#212529); margin: 0 0 0 5px; } nav.main .nav-dropdown { display: none; position: absolute; background-color: var(--background-alt-color,#ebebeb); color: var(--background-color-contrast,#212529); align-self: first baseline; padding: var(--padding,6px); border-radius: 5px; border: 1px solid var(--border-color,#dee2e6); right: 15px; min-width: 80px; width: max-content; max-width: 100vw; } nav.main .nav-list { display: flex; flex-direction: column; } nav.main .nav-list>* { margin: var(--margin,6px) 0; } nav.main .nav-tab:focus .nav-dropdown, nav.main .nav-tab:focus-within .nav-dropdown, nav.main .nav-tab:hover .nav-dropdown, nav.main .nav-dropdown:hover { display: block; } nav.main .nav-tab:focus .nav-item svg, nav.main .nav-tab:focus-within .nav-item svg, nav.main .nav-tab:hover .nav-item svg { transform: rotate(180deg); } nav.main .nav-item svg { margin-left: 5px; pointer-events: none; transition: transform 0.3s; } nav.main .nav-toggle-input { display: none; } nav.main .nav-item { display: flex; border-radius: 5px; transition: background-color 0.25s ease-in-out; margin: calc(0.5 * var(--margin,6px)) 0px; padding: var(--padding,6px); align-content: center; align-items: center; vertical-align: middle; color: var(--background-color-contrast,#212529); cursor: pointer; } nav.main .nav-item { transition: opacity 0.25s ease-in; text-decoration: none; } nav.main .nav-end { display: flex; flex-direction: row-reverse; } nav.main .nav-end .nav-dropdown{ right:15px } nav.main .nav-item:hover { opacity: 0.7; } nav.main .nav-items { display: flex; width: auto; } nav.main .nav-toggle { display: flex; align-content: center; align-items: center; vertical-align: middle; display: flex; border-radius: 5px; transition: background-color 0.25s ease-in-out; padding: var(--padding,6px); align-content: center; align-items: center; vertical-align: middle; color: var(--background-color-contrast,#212529); cursor: pointer; } nav.main .nav-toggle:hover { background-color: var(--background-alt-color,#ebebeb); text-decoration: none; color: var(--background-color-contrast,#212529); } nav.main .nav-toggle, nav.main .nav-toggle-input { display: none; } nav.main .nav-toggle-input:checked~.nav-items { position: absolute; background: var(--background-alt-color,#ebebeb); display: block; margin-top: 35px; padding: var(--padding,6px) 0; border-radius: 5px; border: 1px solid var(--border-color,#dee2e6); left: 5px; } nav.main .nav-toggle-input:checked~.nav-items { position: fixed !important; top: 5px; margin-top: 0; max-width: calc(60% - 12px); min-width: 50%; min-height: 100vh; align-content: start; } nav.main a { color: var(--background-color-contrast,#212529) } nav.main .nav-items-header { display: none; } nav.main .nav-items-header label { display: flex; height: 40px; width: 40px; text-align: center; align-items: center; align-content: center; justify-content: center; cursor: pointer; } @media (min-width:768px) { nav.main { position:sticky; top:0; } } @media (max-width: 767px) { nav.main { position:sticky; top:0; } nav.main .nav-toggle { display: flex; margin-left: auto; } nav.main .nav-items { display: none; max-width: calc(100% - 12px) !important; width: calc(100% - 12px) !important; } nav.main .nav-dropdown { display: none; color: inherit; align-self: first baseline; padding: 0; border-radius: 5px; padding: var(--padding,6px); } nav.main .nav-items .nav-dropdown{ border: 0; border-radius: 0; } nav.main .nav-items-header { display: flex; flex-direction: row-reverse; margin-bottom: 5px; padding: var(--padding,6px) calc(2 * var(--margin,6px)); } }
nav.vert { display: flex; flex-direction: column; background-color: inherit; align-items: start; align-content: center; gap: var(--gap,3px); } nav.vert>* { padding: 0; align-content: center; align-items: center; vertical-align: middle; width: 100%; } nav.vert .nav-tab .icon { margin-right: var(--margin,6px); } nav.vert .nav-tab > * { display: block; border-radius: 5px; transition: background-color 0.25s ease-in-out; margin: 0 calc(0.5 * var(--margin,6px)); padding: var(--padding,6px); align-content: start; width: 100%; border: 0 !important; background: inherit; text-align: left; } nav.vert .nav-tab.active { border-left: 2px solid var(--primary-color,#007bff); } nav.vert .nav-tab.active>* { background: var(--background-alt-color,#ebebeb); } nav.vert .nav-tab>*:hover { background-color: var(--border-color,#dee2e6); text-decoration: none; color: var(--background-color-contrast,#212529); }
.overflow{ overflow: auto; } .overflow-visible{ position: static; overflow: visible; } .overflow.y{ overflow-y: auto; } .overflow.x{ overflow-x: auto; } .overflow.thin{ scrollbar-width: thin; } .overflow.sm{ max-height: var(--overflow-units,125px); } .overflow.md{ max-height: calc( 2 * var(--overflow-units,125px) ) } .overflow.lg{ max-height: calc( 3 * var(--overflow-units,125px) ) } .overflow.xl{ max-height: calc( 5 * var(--overflow-units,125px) ) } .overflow.xxl{ max-height: calc( 7 * var(--overflow-units,125px) ) } @container (max-width: 992px) { .overflow-sm{ overflow: auto; } .overflow-sm.y{ overflow-y: auto; } .overflow-sm.x{ overflow-x: auto; } .overflow-sm.thin{ scrollbar-width: thin; } .overflow-sm.sm{ max-height: var(--overflow-units,125px); } .overflow-sm.md{ max-height: calc( 2 * var(--overflow-units,125px) ) } .overflow-sm.lg{ max-height: calc( 3 * var(--overflow-units,125px) ) } .overflow-sm.xl{ max-height: calc( 5 * var(--overflow-units,125px) ) } .overflow-sm.xxl{ max-height: calc( 7 * var(--overflow-units,125px) ) } } @container (min-width: 992px) { .overflow-lg{ overflow: auto; } .overflow-lg.y{ overflow-y: auto; } .overflow-lg.x{ overflow-x: auto; } .overflow-lg.thin{ scrollbar-width: thin; } .overflow-lg.sm{ max-height: var(--overflow-units,125px); } .overflow-lg.md{ max-height: calc( 2 * var(--overflow-units,125px) ) } .overflow-lg.lg{ max-height: calc( 3 * var(--overflow-units,125px) ) } .overflow-lg.xl{ max-height: calc( 5 * var(--overflow-units,125px) ) } .overflow-lg.xxl{ max-height: calc( 7 * var(--overflow-units,125px) ) } }
.p-0 { padding: 0 !important; } .p-1 { padding: var(--padding,6px) !important; } .p-2 { padding: calc(2*var(--padding,6px)) !important; } .p-3 { padding: calc(3*var(--padding,6px)) !important; } .p-children-0 *{ padding: 0; } .pt-1 { padding-top: var(--padding,6px) !important; } .pt-2 { padding-top: calc(2*var(--padding,6px)) !important; } .pt-3 { padding-top: calc(3*var(--padding,6px)) !important; } .pt-4 { padding-top: calc(4*var(--padding,6px)) !important; } .pt-5 { padding-top: calc(5*var(--padding,6px)) !important; } .pb-1 { padding-bottom: var(--padding,6px) !important; } .pb-2 { padding-bottom: calc(2*var(--padding,6px)) !important; } .pb-3 { padding-bottom: calc(3*var(--padding,6px)) !important; } .pl-1 { padding-left: var(--padding,6px) !important; } .pl-2 { padding-left: calc(2*var(--padding,6px)) !important; } .pl-3 { padding-left: calc(3*var(--padding,6px)) !important; } .pr-1 { padding-right: var(--padding,6px) !important; } .pr-2 { padding-right: calc(2*var(--padding,6px)) !important; } .pr-3 { padding-right: calc(3*var(--padding,6px)) !important; } @media (max-width: 576px) { .p-sm-0 { padding: 0 !important; } .p-sm-1 { padding: var(--padding,6px) !important; } .p-sm-2 { padding: calc(2*var(--padding,6px)) !important; } .p-sm-3 { padding: calc(3*var(--padding,6px)) !important; } .pt-sm-1 { padding-top: var(--padding,6px) !important; } .pt-sm-2 { padding-top: calc(2*var(--padding,6px)) !important; } .pt-sm-3 { padding-top: calc(3*var(--padding,6px)) !important; } .pt-sm-4 { padding-top: calc(4*var(--padding,6px)) !important; } .pt-sm-5 { padding-top: calc(5*var(--padding,6px)) !important; } .pb-sm-1 { padding-bottom: var(--padding,6px) !important; } .pb-sm-2 { padding-bottom: calc(2*var(--padding,6px)) !important; } .pb-sm-3 { padding-bottom: calc(3*var(--padding,6px)) !important; } .pl-sm-1 { padding-left: var(--padding,6px) !important; } .pl-sm-2 { padding-left: calc(2*var(--padding,6px)) !important; } .pl-sm-3 { padding-left: calc(3*var(--padding,6px)) !important; } .pr-sm-1 { padding-right: var(--padding,6px) !important; } .pr-sm-2 { padding-right: calc(2*var(--padding,6px)) !important; } .pr-sm-3 { padding-right: calc(3*var(--padding,6px)) !important; } } @media (min-width: 577px) { .p-md-0 { padding: 0 !important; } .p-md-1 { padding: var(--padding,6px) !important; } .p-md-2 { padding: calc(2*var(--padding,6px)) !important; } .p-md-3 { padding: calc(3*var(--padding,6px)) !important; } .pt-md-1 { padding-top: var(--padding,6px) !important; } .pt-md-2 { padding-top: calc(2*var(--padding,6px)) !important; } .pt-md-3 { padding-top: calc(3*var(--padding,6px)) !important; } .pt-md-4 { padding-top: calc(4*var(--padding,6px)) !important; } .pt-md-5 { padding-top: calc(5*var(--padding,6px)) !important; } .pb-md-1 { padding-bottom: var(--padding,6px) !important; } .pb-md-2 { padding-bottom: calc(2*var(--padding,6px)) !important; } .pb-md-3 { padding-bottom: calc(3*var(--padding,6px)) !important; } .pl-md-1 { padding-left: var(--padding,6px) !important; } .pl-md-2 { padding-left: calc(2*var(--padding,6px)) !important; } .pl-md-3 { padding-left: calc(3*var(--padding,6px)) !important; } .pr-md-1 { padding-right: var(--padding,6px) !important; } .pr-md-2 { padding-right: calc(2*var(--padding,6px)) !important; } .pr-md-3 { padding-right: calc(3*var(--padding,6px)) !important; } } @media (min-width: 992px) { .p-lg-0 { padding: 0 !important; } .p-lg-1 { padding: var(--padding,6px) !important; } .p-lg-2 { padding: calc(2*var(--padding,6px)) !important; } .p-lg-3 { padding: calc(3*var(--padding,6px)) !important; } .pt-lg-1 { padding-top: var(--padding,6px) !important; } .pt-lg-2 { padding-top: calc(2*var(--padding,6px)) !important; } .pt-lg-3 { padding-top: calc(3*var(--padding,6px)) !important; } .pt-lg-4 { padding-top: calc(4*var(--padding,6px)) !important; } .pt-lg-5 { padding-top: calc(5*var(--padding,6px)) !important; } .pb-lg-1 { padding-bottom: var(--padding,6px) !important; } .pb-lg-2 { padding-bottom: calc(2*var(--padding,6px)) !important; } .pb-lg-3 { padding-bottom: calc(3*var(--padding,6px)) !important; } .pl-lg-1 { padding-left: var(--padding,6px) !important; } .pl-lg-2 { padding-left: calc(2*var(--padding,6px)) !important; } .pl-lg-3 { padding-left: calc(3*var(--padding,6px)) !important; } .pr-lg-1 { padding-right: var(--padding,6px) !important; } .pr-lg-2 { padding-right: calc(2*var(--padding,6px)) !important; } .pr-lg-3 { padding-right: calc(3*var(--padding,6px)) !important; } } @media (min-width: 1200px) { .p-xl-0 { padding: 0 !important; } .p-xl-1 { padding: var(--padding,6px) !important; } .p-xl-2 { padding: calc(2*var(--padding,6px)) !important; } .p-xl-3 { padding: calc(3*var(--padding,6px)) !important; } .pt-xl-1 { padding-top: var(--padding,6px) !important; } .pt-xl-2 { padding-top: calc(2*var(--padding,6px)) !important; } .pt-xl-3 { padding-top: calc(3*var(--padding,6px)) !important; } .pt-xl-4 { padding-top: calc(4*var(--padding,6px)) !important; } .pt-xl-5 { padding-top: calc(5*var(--padding,6px)) !important; } .pb-xl-1 { padding-bottom: var(--padding,6px) !important; } .pb-xl-2 { padding-bottom: calc(2*var(--padding,6px)) !important; } .pb-xl-3 { padding-bottom: calc(3*var(--padding,6px)) !important; } .pl-xl-1 { padding-left: var(--padding,6px) !important; } .pl-xl-2 { padding-left: calc(2*var(--padding,6px)) !important; } .pl-xl-3 { padding-left: calc(3*var(--padding,6px)) !important; } .pr-xl-1 { padding-right: var(--padding,6px) !important; } .pr-xl-2 { padding-right: calc(2*var(--padding,6px)) !important; } .pr-xl-3 { padding-right: calc(3*var(--padding,6px)) !important; } }
.pagination { display: flex; margin: var(--margin,6px) 0; gap: var(--gap,3px); } .pagination *{ word-wrap: normal; } .pagination a { color: var(--background-color-contrast,#212529); padding: var(--padding,6px); text-decoration: none; transition: background-color .3s; border: 1px solid var(--border-color,#dee2e6); font-size: inherit; margin: 0; } .pagination a.active { background-color: var(--primary-color,#007bff); color: var(--primary-color-contrast,var(--light-color,#ffffff)); border: 1px solid var(--primary-color-hover,#0056b3); } .pagination a:hover:not(.active) {background-color: var(--background-alt-color,#ebebeb);}
:root { --doc-footer-height: 10mm; --doc-header-height: 15mm; --doc-page-padding: 4mm; --doc-col-padding: 1mm; } html, body.print, body.print-preview { margin: 0; padding: 0; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 0.9rem; } .doc-root { width: 100%; padding: 20px 0; } .doc-header, .doc-footer, .doc-body { width: 100%; } body.print, body.print * { box-sizing: border-box; } body.print .grid { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; } body.print .grid-row { display: table-row; } body.print .grid > * { display: table-cell; vertical-align: top; padding: var(--doc-col-padding); } body.print .col-1 { width: 8.3333%; } body.print .col-2 { width: 16.6667%; } body.print .col-3 { width: 25%; } body.print .col-4 { width: 33.3333%; } body.print .col-5 { width: 41.6667%; } body.print .col-6 { width: 50%; } body.print .col-7 { width: 58.3333%; } body.print .col-8 { width: 66.6667%; } body.print .col-9 { width: 75%; } body.print .col-10 { width: 83.3333%; } body.print .col-11 { width: 91.6667%; } body.print .col-12 { width: 100%; } body.print .col-auto { width: auto; } body.print [class*="col-xs-"], body.print [class*="col-sm-"], body.print [class*="col-md-"], body.print [class*="col-lg-"], body.print [class*="col-xl-"], body.print [class*="col-xxl-"] { width: 100% !important; } @media print { @page { size: letter portrait; margin: 0; } body.print { background: none; } body.print .doc-page { display: table; width: 8.5in; height: 11in; padding: var(--doc-page-padding); background: #fff; box-shadow: none; overflow: hidden; page-break-after: auto; } body.print .doc-header, body.print .doc-body, body.print .doc-footer { display: table-row; } body.print .doc-footer { height: var(--doc-footer-height); border-top: 1px solid #000; } } body.print .doc-table { width: 100%; table-layout: fixed; border-collapse: collapse; } body.print .doc-table thead { display: table-header-group; } body.print .doc-table tr { page-break-inside: avoid; } body.print .doc-table th, body.print .doc-table td { border: 1px solid #000; padding: 6px 8px; font-size: 0.75rem; vertical-align: top; white-space: nowrap; } body.print .doc-table td.description { white-space: normal; } body.print-preview { background: #e6e6e6; } body.print-preview .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--doc-col-padding); } body.print-preview .col-1 { grid-column: span 1; } body.print-preview .col-2 { grid-column: span 2; } body.print-preview .col-3 { grid-column: span 3; } body.print-preview .col-4 { grid-column: span 4; } body.print-preview .col-5 { grid-column: span 5; } body.print-preview .col-6 { grid-column: span 6; } body.print-preview .col-7 { grid-column: span 7; } body.print-preview .col-8 { grid-column: span 8; } body.print-preview .col-9 { grid-column: span 9; } body.print-preview .col-10 { grid-column: span 10; } body.print-preview .col-11 { grid-column: span 11; } body.print-preview .col-12 { grid-column: span 12; } body.print-preview .doc-page { display: grid; grid-template-rows: var(--doc-header-height) 1fr var(--doc-footer-height); width: 8.5in; height: 11in; margin: 10mm auto; padding: var(--doc-page-padding); background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); } body.print-preview .doc-table th, body.print-preview .doc-table td { white-space: normal; }
.pulse { display:block; width: 30px; height: 30px; border-radius: 50% !important; box-shadow: 0 0 2px #fff, -2px 0 8px #f0f, 2px 0 8px #0ff, inset 0 0 5px #fff, inset 5px 0 8px #f0f, inset -5px 0 8px #0ff, inset 5px 0 30px #f0f, inset -5px 0 30px #0ff; animation: pulsate 4s linear infinite; } @keyframes pulsate { 50% { box-shadow: 0 0 2px #fff, 2px 0 8px #f0f, -2px 0 8px #0ff, inset 0 0 5px #fff, inset -5px 0 8px #f0f, inset 5px 0 8px #0ff, inset -5px 0 30px #f0f, inset 5px 0 30px #0ff; } } .pulse:hover{ box-shadow: 0 0 2px #fff, -2px 0 8px rgb(45, 4, 135), 2px 0 8px #0ff, inset 0 0 5px #fff, inset 5px 0 8px rgb(45, 4, 135), inset -5px 0 8px #0ff, inset 5px 0 30px rgb(45, 4, 135), inset -5px 0 30px #0ff; } .pulse-center:not(.ds-none) { margin: 0 auto 0 auto; display: block; position: relative; top: -15px; }
:root { --font-size: 1em; --default-font-family: sans-serif, Arial, Helvetica; --line-height: 1.05em; --min: 10ch; --gap: 6px; --margin: 6px; --padding: 6px; --icon: 16px; --main-menu-logo-height: 35px; --main-menu-height: 50px; --container-units: 256px; --sidebar-width: max(256px, 15vw); --min-body-width: 245px; --max-container-width: min(90vw, calc(6*var(--container-units,256px))); --overflow-units: 125px; --fade-duration: 10s; --form-gap: 1rem; } body{ min-width:var(--min-body-width,245px); font-family: var(--font-family,sans-serif, Arial, Helvetica); color: var(--text-color,#212529); background-color: var(--background-color,#ffffff); padding: 0; margin: 0; font-optical-sizing: auto; } main.full{ min-height: 100vh; align-content: start; } *{ box-sizing: border-box; font-family: var(--font-family,sans-serif, Arial, Helvetica); } @media (max-width: 767px) { main{ flex-wrap: wrap; } .body-content { height: auto; min-height: 100vh; } } @media (min-width:768px) { .body-content{ height: calc(100vh - var(--main-menu-height, 50px)); overflow: auto; scrollbar-width: thin; display: flex; } body:has(.body-content){ overflow: hidden; } } .blend { color: inherit; background-color: inherit; border-color: inherit; }
.selected-container:not(:has(:checked)) .selected-child{ display: none; }
.sidebar{ overflow: hidden; z-index: 9; } .vs-is-fullscreen .sidebar{ display:none !important; } .sidebar-tools > * { height: 35px; border-radius: 5px; transition: background-color 0.25s ease-in-out; align-content: center; align-items: center; cursor: pointer; width: 35px; margin: 0 var(--margin) !important; background: transparent !important; padding: 0 !important; } .sidebar-content{ overflow: auto; scrollbar-width: thin; } .sidebar-tools > *:hover { background-color: var(--background-color); text-decoration: none; color: var(--background-color-contrast); } .sidebar,.sidebar .sidebar-content{ background-color: var(--background-color,#ebebeb); border-color: var(--border-color,var(--light-color,#ffffff)); } .sidebar .sidebar-tools > *:hover{ background-color: var(--background-color,#ebebeb); border-color: var(--border-color,var(--light-color,#ffffff)); } .sidebar.alt,.sidebar.alt .sidebar-content{ background-color: var(--background-alt-color,#ebebeb); border-color: var(--border-color,var(--light-color,#ffffff)) !important; } .sidebar.alt .sidebar-tools > *:hover{ background-color: var(--background-alt-color,#ebebeb); border-color: var(--border-color,var(--light-color,#ffffff)) !important; } .sidebar.primary,.sidebar.primary .sidebar-content{ background-color: var(--primary-color,#007bff); border-color: var(--primary-color-hover,var(--light-color,#ffffff)) !important; } .sidebar.primary .sidebar-tools > *:hover{ background-color: var(--primary-color-hover,#0056b3); border-color: var(--primary-color-hover,var(--light-color,#ffffff)) !important; } .sidebar.secondary,.sidebar.secondary .sidebar-content{ background-color: var(--secondary-color,#6c757d); border-color: var(--secondary-color-hover,var(--secondary-color,#6c757d)) !important; } .sidebar.secondary .sidebar-tools > *:hover{ background-color: var(--secondary-color-hover,#6c757d); border-color: var(--secondary-color-hover,var(--secondary-color,#6c757d)) !important; } .sidebar.success,.sidebar.success .sidebar-content{ background-color: var(--success-color,#28a745); border-color: var(--success-color-hover,var(--success-color,#28a745)) !important; } .sidebar.success .sidebar-tools > *:hover{ background-color: var(--success-color-hover,#28a745); border-color: var(--success-color-hover,var(--success-color,#28a745)) !important; } .sidebar.warning,.sidebar.warning .sidebar-content{ background-color: var(--warning-color,#ff7b07); border-color: var(--warning-color-hover,var(--warning-color,#ff7b07)) !important; } .sidebar.warning .sidebar-tools > *:hover{ background-color: var(--warning-color-hover,#ff7b07); border-color: var(--warning-color-hover,var(--warning-color,#ff7b07)) !important; } .sidebar.reverse{ flex-direction: row-reverse; } .sidebar.reverse .sidebar{ flex-direction: row-reverse; } .sidebar-sibling { width: 100%; display: block; overflow: auto; } .sidebar-sibling:has(.sidebar) { display: flex; flex-grow: 1; transition: flex-basis 0.3s ease-in-out; padding: 0 !important; flex-basis: 100%; } .sidebar { display: inline-flex; overflow: hidden; } .sidebar:has(.sidebar-toggle-input:checked) .sidebar-content { display: block; } .sidebar-content { display: none; padding: 0 var(--padding,6px) var(--padding,6px) var(--padding,6px); } .sidebar-tools { height:100%; max-width: 50px; display: flex; justify-content: center; text-align: center; padding: var(--padding,6px); background: inherit; transition: background-color 0.5s ease-in-out; align-items: flex-start; } .sidebar-tools a{ color: inherit !important; } .sidebar-toggle-input{ display:none; } @media (min-width:768px) { .sidebar:not(.static) .sidebar-content{ width: calc(100% - 50px); } .sidebar.static .sidebar-content{ width: calc(var(--sidebar-width, max(356px, 28vw)) - 50px) !important; } .sidebar.static .sidebar-content.sm{ width: calc(var(--sidebar-width, max(356px, 28vw)) / 2) !important; } .sidebar.static .sidebar-content.lg{ width: calc(var(--sidebar-width, max(356px, 28vw)) * 2) !important; } .sidebar.static .sidebar-content.xl{ width: calc(var(--sidebar-width, max(356px, 28vw)) * 3) !important; } .sidebar.static{ position: sticky; top:0; } .sidebar:not(.static) .sidebar-tools { position: fixed; z-index: 9; } .sidebar-tools { justify-content: start; justify-items: start; text-align: center; height: 100%; max-width: 50px; flex-direction: column; gap: 10px; padding: 10px 0; min-width: 50px; } .sidebar:not(.static) .sidebar-content { z-index: 9; position: fixed; top: 50px; } .sidebar-content { border-left: 1px solid var(--border-color, #dee2e6); border-right: 1px solid var(--border-color,#dee2e6); word-wrap: break-word; background: inherit; left: 50px; overflow: auto; } .sidebar-sibling:has(.sidebar) { overflow: auto; } .sidebar-sibling.reverse:has(.sidebar) { flex-direction: row-reverse; } .sidebar.static .sidebar-sibling{ width: calc(100% - var(--sidebar-width, max(356px, 28vw))); } .sidebar { display: inline-flex; overflow: hidden; border-left: 1px solid var(--border-color, #dee2e6); border-right: 1px solid var(--border-color,#dee2e6); } .sidebar:has(.sidebar-tools){ min-width: 50px !important; } .sidebar-sibling.reverse .sidebar{ flex-direction: row-reverse; } .sidebar:has(.sidebar-toggle-input:checked) { width: auto; border-right: 0 !important; overflow: auto; scrollbar-width: thin; } .sidebar:has(.sidebar-toggle-input:checked):not(.static) { max-width:var(--sidebar-width, max(356px, 28vw)) !important; } .sidebar:has(.sidebar-toggle-input:checked).static { max-width: 50vw !important; } } @media (max-width:767px) { .sidebar-sibling:has(.sidebar) { flex-direction: column; } .sidebar-sibling.reverse:has(.sidebar) { flex-direction: column; } .sidebar { display: flex; flex-direction: column !important; width: 100% !important; height: auto; overflow: auto; scrollbar-width: thin; } .sidebar-content { width: 100%; border-bottom: 1px solid var(--border-color); padding: var(--padding,6px); } .sidebar-tools { height: 50px; max-width: 100%; width: 100%; justify-content: flex-start; align-items: center; border-right: none; border-bottom: 1px solid var(--border-color,#dee2e6); } .sidebar.reverse .sidebar-tools{ align-items:start; } }
.switch { --switch-on-color: var(--primary-color, #2196F3); --switch-off-color: var(--background-color, #ccc); --switch-thumb-color: var(--background-alt-color, white); --switch-focus-color: var(--primary-color-hover, rgba(33, 150, 243, 0.25)); position: relative; display: inline-block; width: 30px; height: 17px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--switch-off-color); transition: .4s; } .slider:before { position: absolute; content: ""; height: 13px; width: 13px; left: 2px; bottom: 2px; background-color: var(--switch-thumb-color); transition: .4s; } input:checked + .slider { background-color: var(--switch-on-color); } input:focus + .slider { box-shadow: 0 0 1px var(--switch-focus-color); } input:checked + .slider:before { transform: translateX(13px); } .slider.round { border-radius: 17px; } .slider.round:before { border-radius: 50%; } .switch.primary { --switch-on-color: var(--primary-color,#007bff); --switch-off-color: var(--grey-color,#6c757d); --switch-focus-color: var(--primary-color-hover,#0056b3); --switch-thumb-color: var( --primary-color-contrast, white); } .switch.secondary { --switch-on-color: var(--secondary-color,#6c757d); --switch-off-color: var(--grey-color,#6c757d); --switch-focus-color: var(--secondary-color-hover,#5a6268); --switch-thumb-color: var( --secondary-color-contrast, white); } .switch.success { --switch-on-color: var(--success-color,#28a745); --switch-off-color: var(--grey-color,#6c757d); --switch-focus-color: var(--success-color-hover,#218838); --switch-thumb-color: var( --success-color-contrast, white); } .switch.warning { --switch-on-color: var(--warning-color,#ff7b07); --switch-off-color: var(--grey-color,#6c757d); --switch-focus-color: var(--warning-color-hover,#1e7e34); --switch-thumb-color: var( --warning-color-contrast, white); } .switch.danger { --switch-on-color: var(--danger-color,#dc3545); --switch-off-color: var(--grey-color,#6c757d); --switch-focus-color: var(--danger-color-hover,#c82333); --switch-thumb-color: var( --danger-color-contrast, white); } .switch.info { --switch-on-color: var(--info-color,#17a2b8); --switch-off-color: var(--grey-color,#6c757d); --switch-focus-color: var(--info-color-hover, #138496); --switch-thumb-color: var( --info-color-contrast, white); }
table { border: 1px solid var(--border-color); margin: 0; padding: 0; width: 100%; table-layout: auto; border-collapse: collapse; } table.separate{ border-collapse: separate !important; border: 0px !important; } table.fixed{ table-layout: fixed; } tr:nth-child(even) { background-color: var(--background-color,#ffffff); } tr:nth-child(odd) { background-color: var(--background-alt-color,#ebebeb); } tbody tr:hover{ background-color: rgb(228, 236, 254); } .table-wrapper { width: 100%; position: relative; overflow:auto; } .table-wrapper.full { max-height: 100vh; height: 100%; min-height: 0px !important; } .table-wrapper.lg { max-height: 800px } .table-wrapper.md { max-height: 600px } .table-wrapper.sm { max-height: 400px } .table-wrapper table{ min-width: 100%; border-collapse: collapse; } .table-wrapper table th, .table-wrapper table td { white-space: nowrap; } table caption { font-size: 1.5em; margin: .5em 0 .75em; } table tr { background-color: transparent; vertical-align: inherit; } table.valign-top tr { vertical-align: top; } table th, table td { padding: var(--padding,6px); border: 1px solid rgb(204, 204, 204); } table th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; } @media screen and (max-width: 600px) { table { border: 0; } table caption { font-size: 1.3em; } table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } table tr { display: block; } table td { display: block; font-size: .8em; } table td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; } table td:last-child { border-bottom: 0; } }
.timeline-horiz { display: flex; align-items: first baseline; justify-content: flex-start; margin: 5px; min-height: 150px; padding: 50px 10px; } .timeline-horiz ol, .timeline-horiz li { margin: 0; padding: 0; font-family: inherit; font-size: 14px; } .timeline-horiz li { min-width: 200px; width: min-content; } .timeline-horiz ol { display: flex; width: auto; justify-content: space-between; position: relative; } .timeline-horiz ol::after { content: ''; display: block; width: 100%; height: 3px; position: absolute; top: 50%; left: 0; transform: translate(0, calc(-50% - 1px)); z-index: 1; border-bottom: 1px dashed; } .timeline-horiz li { list-style-type: none; position: relative; cursor: pointer; z-index: 2; } .timeline-horiz li::after { content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; transition: background-color .2s ease; } .timeline-horiz span { position: absolute; left: 50%; transform: translate(-50%, 0); display: inline-block; text-align: center; max-height: 50px; overflow: hidden; width: 200px; word-wrap: break-word; color: var(--text-color); } .timeline-horiz span.above { bottom: calc(100% + 10px); } .timeline-horiz span.bottom { top: calc(100% + 10px); } .timeline-horiz.primary ol, .timeline-horiz.primary li, .timeline-horiz li.primary { color: var(--primary-color, #007bff); } .timeline-horiz.primary ol::after { border-color: var(--primary-color, #007bff); } .timeline-horiz.primary li::after, .timeline-horiz li.primary::after { background-color: var(--background-color, #ffffff); border: 2px solid var(--primary-color, #007bff); } .timeline-horiz.primary li.active::after, .timeline-horiz li.active.primary::after { background-color: var(--primary-color, #007bff) !important; border: 2px solid var(--primary-color, #007bff) !important; } .timeline-horiz.secondary ol, .timeline-horiz.secondary li, .timeline-horiz li.secondary { color: var(--secondary-color, #6c757d); } .timeline-horiz.secondary ol::after { border-color: var(--secondary-color, #6c757d); } .timeline-horiz.secondary li::after, .timeline-horiz li.secondary::after { background-color: var(--background-color, #ffffff); border: 2px solid var(--secondary-color, #6c757d); } .timeline-horiz.secondary li.active::after, .timeline-horiz li.active.secondary::after { background-color: var(--secondary-color, #6c757d) !important; border: 2px solid var(--secondary-color, #6c757d) !important; } .timeline-horiz.success ol, .timeline-horiz.success li, .timeline-horiz li.success { color: var(--success-color, #28a745); } .timeline-horiz.success ol::after { border-color: var(--success-color, #28a745); } .timeline-horiz.success li::after, .timeline-horiz li.success::after { background-color: var(--background-color, #ffffff); border: 2px solid var(--success-color, #28a745); } .timeline-horiz.success li.active::after, .timeline-horiz li.active.success::after { background-color: var(--success-color, #28a745) !important; border: 2px solid var(--success-color, #28a745) !important; } .timeline-horiz.warning ol, .timeline-horiz.warning li, .timeline-horiz li.warning { color: var(--warning-color, #ff7b07); } .timeline-horiz.warning ol::after { border-color: var(--warning-color, #ff7b07); } .timeline-horiz.warning li::after, .timeline-horiz li.warning::after { background-color: var(--background-color, #ffffff); border: 2px solid var(--warning-color, #ff7b07); } .timeline-horiz.warning li.active::after, .timeline-horiz li.active.warning::after { background-color: var(--warning-color, #ff7b07) !important; border: 2px solid var(--warning-color, #ff7b07) !important; } .timeline-horiz.danger ol, .timeline-horiz.danger li, .timeline-horiz li.danger { color: var(--danger-color, #dc3545); } .timeline-horiz.danger ol::after { border-color: var(--danger-color, #dc3545); } .timeline-horiz.danger li::after, .timeline-horiz li.danger::after { background-color: var(--background-color, #ffffff); border: 2px solid var(--danger-color, #dc3545); } .timeline-horiz.danger li.active::after, .timeline-horiz li.active.danger::after { background-color: var(--danger-color, #dc3545) !important; border: 2px solid var(--danger-color, #dc3545) !important; } .timeline-horiz.info ol, .timeline-horiz.info li, .timeline-horiz li.info { color: var(--info-color, #17a2b8); } .timeline-horiz.info ol::after { border-color: var(--info-color, #17a2b8); } .timeline-horiz.info li::after, .timeline-horiz li.info::after { background-color: var(--background-color, #ffffff); border: 2px solid var(--info-color, #17a2b8); } .timeline-horiz.info li.active::after, .timeline-horiz li.active.info::after { background-color: var(--info-color, #17a2b8) !important; border: 2px solid var(--info-color, #17a2b8) !important; }
.toast { position: static; bottom: 0; left: 0; width: 100%; padding: 10px; margin: 0; padding: 0; display:none; } .toast.show { display:block; }
.tooltip::before { content: attr(data-tooltip); background-color: var(--background-color-contrast); color: var(--background-color); border: 1px solid var(--border-color); padding: 5px 10px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0s; position: fixed; z-index: 9999; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease; } .tooltip.danger::before { background-color: var(--danger-color); color: var(--danger-color-contrast); border: 1px solid var(--danger-color-contrast); } .tooltip:hover::before { position: absolute; visibility: visible; opacity: 0.95; transform: translateX(0%) translateY(-100%); display: block; }
.fs-xs { font-size: 0.75rem; } .fs-sm { font-size: 0.875rem; } .fs-md,.fs-1 { font-size: 1rem; } .fs-lg,.fs-2 { font-size: 1.125rem; } .fs-xl,.fs-3 { font-size: 1.25rem; } .fs-2xl,.fs-4 { font-size: 1.5rem; } .fs-3xl,.fs-5 { font-size: 1.875rem; } .fs-4xl,.fs-6 { font-size: 2.25rem; } .fs-5xl,.fs-7 { font-size: 3rem; } p { max-width: 100%; } .txt-inherit{ color: inherit; font-weight: inherit; font-size: inherit; } .fw-light { font-weight: 300; } .fw-normal { font-weight: 400; } .fw-medium { font-weight: 500; } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; } .txt-left { text-align: left; } .txt-center { text-align: center; } .txt-right { text-align: right; } .txt-justify { text-align: justify; } .txt-uppercase { text-transform: uppercase; } .txt-lowercase { text-transform: lowercase; } .txt-capitalize { text-transform: capitalize; } .lh-tight { line-height: 1.25; } .lh-normal { line-height: 1.5; } .lh-loose { line-height: 2; } .ls-tight { letter-spacing: -0.05em; } .ls-normal { letter-spacing: 0; } .ls-wide { letter-spacing: 0.05em; } .txt-underline { text-decoration: underline; } .txt-line-through { text-decoration: line-through; } .txt-no-decoration { text-decoration: none; } .txt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .txt-balance{ text-wrap: balance; } .break-words { word-wrap: break-word; } .break-all { word-break: break-all; } .txt-auto { color: inherit; font-size:inherit; font-weight:inherit; font-family: inherit; } .txt-expandable { scroll-behavior: smooth; scrollbar-width: thin; } .txt-expandable:has(.txt-expandable-content:empty){ display:none !important; visibility: hidden !important; } .txt-expandable.collapsed{ max-height: 100vh; overflow: auto; } .txt-expander-toggle { position: sticky; bottom: 0; cursor: pointer; display: none; border-radius: 0; } .txt-expandable:not(.collapsed) .txt-expander-toggle-content:after{ content: "Show Less" } .txt-expandable.collapsed .txt-expander-toggle-content:after{ content: "Show More" } p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: var(--padding,6px); } p:empty, .ds-empty-none:empty{ display:none; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title.primary{ background-color: var(--primary-color,#007bff); color: var(--primary-color-contrast,var(--light-color,#ffffff)); border: 1px solid var(--primary-hover-color) } .txt-h1, h1 { margin: var(--margin,6px) 0; } .txt-h2, h2 { margin: var(--margin,6px) 0; } .txt-h3, h3 { margin: var(--margin,6px) 0; } h4, h5, h6{ margin: var(--margin,6px) 0; } .txt-lead { font-size: 1.25rem; } .txt-small { font-size: 0.875rem; } .txt-center { text-align: center; } .txt-left { text-align: left; } .txt-contrast{ color: var(--background-color-contrast,#212529) } .txt-default { color: var(--text-color,#111) } .txt-danger { color: var(--danger-color,#dc3545) } .txt-danger-contrast { color: var(--danger-color-contrast, var(--light-color,#ffffff)) } .txt-primary { color: var(--primary-color,#007bff) } .txt-primary-contrast { color: var(--primary-color-contrast,var(--light-color,#ffffff)) } .txt-secondary { color: var(--secondary-color,#6c757d) } .txt-secondary-contrast { color: var(--secondary-color-contrast, var(--light-color,#ffffff)) } .txt-info { color: var(--info-color,#17a2b8) } .txt-info-contrast { color: var(--info-color-contrast, var(--light-color,#ffffff)) } .txt-warning { color: var(--warning-color,#ff7b07) } .txt-warning-contrast { color: var(--warning-color-contrast, var(--light-color,#ffffff)) } .txt-success { color: var(--success-color,#28a745) } .txt-success-contrast { color: var(--success-color-contrast, var(--light-color,#ffffff)) } .txt-muted,.txt-alt { color: var(--text-muted-color, #6c757d) } .bold{ font-weight: bold; } .txt-300{ font-weight: 300; } .txt-400{ font-weight: 400; } .txt-500{ font-weight: 500; } .txt-600{ font-weight: 600; } .txt-700{ font-weight: 700; } .txt-800{ font-weight: 800; }