.fi-body {
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
}
.fi-body input,
.fi-body select,
.fi-body textarea,
.fi-body button,
.fi-body .fi-btn,
.fi-body .fi-input,
.fi-body .fi-select-input,
.fi-body .choices__inner,
.fi-body .choices__list--dropdown,
.fi-body .choices__item {
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
}
.fi-input,
.fi-select-input,
select.fi-select-input,
textarea.fi-input {
min-height: 1.9rem !important;
padding-block: 0.3rem !important;
}
.fi-input-wrp {
min-height: 1.9rem !important;
}
.choices__inner {
min-height: 1.9rem !important;
padding: 0.3rem 0.5rem !important;
}
textarea.fi-input {
min-height: 3.2rem !important;
}
.fi-fo-field-wrp {
margin-block-end: 0 !important;
}
.fi-fo-field-wrp-label {
font-size: 12px !important;
font-weight: 400 !important;
margin-block-end: 0.2rem !important;
}
.fi-input-wrp {
background-color: #fafafa !important;
border-radius: 0.5rem !important;
border: 1px solid rgba(9, 9, 11, 0.1) !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.fi-input-wrp,
.fi-input-wrp:focus-within {
--tw-ring-color: transparent !important;
--tw-ring-shadow: 0 0 #0000 !important;
--tw-ring-offset-shadow: 0 0 #0000 !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.fi-select-input,
.choices__inner,
.fi-input-wrp-prefix,
.fi-input-wrp-suffix,
.fi-input-wrp-actions {
background-color: transparent !important;
border: none !important;
border-radius: 0.5rem !important;
box-shadow: none !important;
}
.fi-input-wrp-prefix-icon,
.fi-input-wrp .fi-icon {
color: #9ca3af !important;
}
.fi-input-wrp-actions .fi-icon-btn,
.fi-input-wrp-suffix .fi-icon-btn,
.fi-input-wrp-prefix .fi-icon-btn {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
color: #9ca3af !important;
}
.fi-input-wrp-actions .fi-icon-btn:hover,
.fi-input-wrp-suffix .fi-icon-btn:hover,
.fi-input-wrp-prefix .fi-icon-btn:hover {
background-color: transparent !important;
color: #52525b !important;
}
.fi-input,
select.fi-select-input {
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.fi-simple-main .fi-input {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fi-simple-main .fi-input-wrp {
background-color: #fafafa !important;
}
.fi-modal-content .fi-input-wrp {
background-color: #fafafa !important;
border-radius: 0.5rem !important;
border: 1px solid rgba(9, 9, 11, 0.1) !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
--tw-ring-color: transparent !important;
--tw-ring-shadow: 0 0 #0000 !important;
--tw-ring-offset-shadow: 0 0 #0000 !important;
}
.fi-modal-content .fi-select-input,
.fi-modal-content .choices__inner,
.fi-modal-content .fi-input-wrp-prefix,
.fi-modal-content .fi-input-wrp-suffix {
background-color: transparent !important;
border: none !important;
border-radius: 0.5rem !important;
box-shadow: none !important;
}
.fi-modal-content .fi-input,
.fi-modal-content select.fi-select-input {
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
@media (max-width: 639px) {
.fi-fo-field-wrp {
margin-block-end: 0.5rem !important;
}
.fi-schema-component-ctn,
.fi-fo-component-ctn {
gap: 0.5rem !important;
}
}
.fi-fo-field-wrp-helper-text {
font-size: 11px !important;
line-height: 1.35 !important;
color: #a1a1aa !important;
margin-block-start: 0.15rem !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fi-section {
padding: 0.9rem !important;
}
.fi-section-header {
padding-block-end: 0.6rem !important;
}
.fi-section-content-ctn {
gap: 0.75rem !important;
}
.fi-ta-ctn,
.fi-ta-content,
.fi-ta-table {
border-radius: 0 !important;
}
.fi-ta-ctn {
width: 100% !important;
max-width: 100% !important;
}
table.fi-ta-table {
width: 100% !important;
}
.fi-ta-search-field {
max-width: 22rem !important;
min-width: 15rem !important;
flex: 1 1 auto !important;
}
.fi-ta-search-field .fi-input-wrp {
height: 32px !important;
border: 1.5px solid #e4e4e7 !important;
border-radius: 8px !important;
background: #fafafa !important;
box-shadow: none !important;
transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
.fi-ta-search-field .fi-input-wrp:hover {
border-color: #d4d4d8 !important;
background: #ffffff !important;
}
.fi-ta-search-field .fi-input-wrp:focus-within {
border-color: #d4d4d8 !important;
background: #ffffff !important;
box-shadow: none !important;
--tw-ring-color: transparent !important;
--tw-ring-shadow: 0 0 #0000 !important;
--tw-ring-offset-shadow: 0 0 #0000 !important;
}
.dark .fi-ta-search-field .fi-input-wrp {
background: #18181b !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
.dark .fi-ta-search-field .fi-input-wrp:hover,
.dark .fi-ta-search-field .fi-input-wrp:focus-within {
background: #27272a !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.dark .fi-ta-search-field input,
.dark .fi-ta-search-field .fi-input {
color: #e4e4e7 !important;
}
.dark .fi-ta-search-field input::placeholder,
.dark .fi-ta-search-field .fi-input::placeholder {
color: #71717a !important;
}
.dark .fi-global-search-ctn .fi-input-wrp {
background: #18181b !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
.dark .fi-global-search-ctn .fi-input-wrp:hover,
.dark .fi-global-search-ctn .fi-input-wrp:focus-within {
background: #27272a !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.dark .fi-global-search-ctn input,
.dark .fi-global-search-ctn .fi-input {
color: #e4e4e7 !important;
background: transparent !important;
}
.dark .fi-global-search-ctn input::placeholder,
.dark .fi-global-search-ctn .fi-input::placeholder {
color: #71717a !important;
}
.fi-ta-search-field input,
.fi-ta-search-field .fi-input {
font-size: 12px !important;
font-weight: 450 !important;
height: 32px !important;
padding-inline: 0.75rem !important;
background: transparent !important;
box-shadow: none !important;
color: #27272a !important;
}
.fi-ta-search-field input:focus,
.fi-ta-search-field .fi-input:focus {
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.fi-ta-search-field input::placeholder,
.fi-ta-search-field .fi-input::placeholder {
font-size: 12px !important;
font-weight: 400 !important;
color: #a1a1aa !important;
}
.fi-ta-search-field svg {
width: 15px !important;
height: 15px !important;
color: #a1a1aa !important;
transition: color 0.15s ease !important;
}
.fi-ta-search-field .fi-input-wrp:focus-within svg {
color: #a1a1aa !important;
}
.fi-ta-filters-trigger-action-ctn .fi-btn,
.fi-ta-filters-trigger-action,
.fi-ta-header-toolbar .fi-dropdown-trigger > .fi-icon-btn,
.fi-ta-header-toolbar > .fi-icon-btn {
background: #fafafa !important;
border: 1.5px solid #e4e4e7 !important;
border-radius: 8px !important;
color: #71717a !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
transition: all 0.15s ease !important;
}
.fi-ta-header-toolbar {
align-items: center !important;
}
.fi-ta-search-field,
.fi-ta-search-field .fi-input-wrp {
height: 34px !important;
min-height: 34px !important;
box-sizing: border-box !important;
}
.fi-ta-filters-trigger-action-ctn .fi-btn:hover,
.fi-ta-filters-trigger-action:hover,
.fi-ta-header-toolbar .fi-dropdown-trigger > .fi-icon-btn:hover,
.fi-ta-header-toolbar > .fi-icon-btn:hover {
background: #fff7ed !important;
border-color: #fdba74 !important;
color: #f97316 !important;
}
.dark .fi-ta-filters-trigger-action-ctn .fi-btn,
.dark .fi-ta-filters-trigger-action,
.dark .fi-ta-header-toolbar .fi-dropdown-trigger > .fi-icon-btn,
.dark .fi-ta-header-toolbar > .fi-icon-btn {
background: #27272a !important;
border-color: rgba(255, 255, 255, 0.14) !important;
color: #d4d4d8 !important;
}
.dark .fi-ta-filters-trigger-action-ctn .fi-btn:hover,
.dark .fi-ta-filters-trigger-action:hover,
.dark .fi-ta-header-toolbar .fi-dropdown-trigger > .fi-icon-btn:hover,
.dark .fi-ta-header-toolbar > .fi-icon-btn:hover {
background: rgba(249, 115, 22, 0.12) !important;
border-color: rgba(249, 115, 22, 0.4) !important;
color: #fb923c !important;
}
.fi-ta-filters-trigger-action .fi-btn-label {
font-size: 13px !important;
font-weight: 500 !important;
}
.fi-ta-filters-trigger-action-ctn svg,
.fi-ta-filters-trigger-action svg,
.fi-ta-header-toolbar .fi-dropdown-trigger > .fi-icon-btn svg,
.fi-ta-header-toolbar > .fi-icon-btn svg {
width: 16px !important;
height: 16px !important;
color: inherit !important;
}
.fi-ta-filters-trigger-action-ctn .fi-badge {
background: #f97316 !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: 700 !important;
min-width: 1.1rem !important;
height: 1.1rem !important;
padding-inline: 0.3rem !important;
box-shadow: 0 0 0 2px #ffffff !important;
}
.fi-ta-header-toolbar {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 0.65rem !important;
padding-block: 1.1rem !important;
padding-inline: 1.25rem !important;
background: #ffffff !important;
border-block-end: 1px solid #f4f4f5 !important;
}
.dark .fi-ta-header-toolbar {
background: #18181b !important;
border-block-end-color: rgba(255, 255, 255, 0.08) !important;
}
.fi-sidebar .fi-dropdown-panel,
.fi-sidebar-group-dropdown-trigger-btn + .fi-dropdown-panel {
border: none !important;
outline: none !important;
ring-width: 0 !important;
z-index: 70 !important;
}
.fi-sidebar .fi-dropdown-panel > div,
.fi-sidebar .fi-dropdown-list {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.fi-ta-actions {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.85rem !important;
flex-wrap: nowrap !important;
}
.fi-ta-actions .fi-icon-btn,
td .fi-icon-btn {
width: 1.9rem !important;
height: 1.9rem !important;
background: transparent !important;
border: none !important;
color: #f97316 !important;
}
.fi-ta-actions .fi-icon-btn svg,
td .fi-icon-btn svg {
color: #f97316 !important;
}
.fi-ta-actions .fi-icon-btn:hover,
td .fi-icon-btn:hover {
filter: brightness(0.85) !important;
}
.fi-toggle.fi-toggle-on {
background-color: #f97316 !important;
}
.tya-btn-outline-orange {
background: transparent !important;
border: 1px solid #f97316 !important;
color: #f97316 !important;
}
.tya-btn-outline-orange {
background: #f97316 !important;
border: 1px solid #f97316 !important;
color: #ffffff !important;
}
.tya-btn-outline-orange:hover {
background: #ea580c !important;
}
.fi-btn,
button.fi-btn,
a.fi-btn {
background: #f97316 !important;
border-color: #f97316 !important;
color: #ffffff !important;
font-weight: 400 !important;
border-radius: 3px !important;
}
.fi-btn:hover {
background: #ea580c !important;
border-color: #ea580c !important;
}
.fi-btn-label,
.fi-btn span {
color: #ffffff !important;
font-weight: 400 !important;
}
.fi-btn svg {
width: 0.9rem !important;
height: 0.9rem !important;
color: #ffffff !important;
}
.fi-dropdown-trigger .fi-btn {
font-weight: 400 !important;
border-radius: 3px !important;
}
.fi-main {
max-width: 100% !important;
margin-inline: 0 !important;
}
.fi-main [class*="max-w-"] {
max-width: 100% !important;
}
.fi-page {
padding-inline: 0.1rem !important;
}
@media (min-width: 1024px) {
.fi-page {
padding-inline: 0.2rem !important;
}
}
.fi-page-content {
padding-block-start: 1.85rem !important;
}
.fi-main {
background: #ffffff !important;
}
.dark .fi-main {
background: #0f0f10 !important;
}
.fi-header-heading,
.fi-breadcrumbs {
display: revert !important;
}
.fi-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
row-gap: 0.35rem !important;
column-gap: 1rem !important;
min-height: 36px !important;
background: transparent !important;
border-block-end: none !important;
box-shadow: none !important;
border-image: linear-gradient(to bottom, #ffffff calc(100% - 1px), #ececee calc(100% - 1px)) fill 0 / 0 / 0 100vmax !important;
overflow: visible !important;
position: relative !important;
z-index: 1 !important;
width: 100% !important;
align-self: stretch !important;
padding-inline-start: 2.2rem !important;
padding-inline-end: 0 !important;
}
.fi-header::before {
content: none !important;
display: none !important;
}
.dark .fi-header {
border-image: linear-gradient(to bottom, #18181b calc(100% - 1px), #000000 calc(100% - 1px)) fill 0 / 0 / 0 100vmax !important;
}
.fi-page-header-main-ctn {
padding-block-start: 0 !important;
padding-block-end: 0.5rem !important;
gap: 0.3rem !important;
}
.fi-header > div:not(.fi-header-actions-ctn) {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex: 1 1 auto !important;
column-gap: 1rem !important;
margin: 0 !important;
overflow: visible !important;
min-width: 0 !important;
}
.fi-header-heading {
font-size: 0.75rem !important;
font-weight: 600 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
color: #18181b !important;
order: 1 !important;
margin: 0 !important;
}
.dark .fi-header-heading {
color: #fafafa !important;
}
.fi-breadcrumbs {
display: block !important;
font-size: 0.75rem !important;
color: #a1a1aa !important;
order: 2 !important;
margin: 0 !important;
margin-inline-end: -1.78rem !important;
overflow: visible !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.fi-breadcrumbs ol {
display: flex !important;
align-items: center !important;
gap: 0.35rem !important;
}
.fi-breadcrumbs a {
color: #a1a1aa !important;
font-weight: 400 !important;
transition: color 0.15s ease !important;
}
.fi-breadcrumbs a:hover {
color: #f97316 !important;
}
.fi-breadcrumbs li:last-child {
color: #52525b !important;
font-weight: 500 !important;
}
.dark .fi-breadcrumbs li:last-child {
color: #d4d4d8 !important;
}
.fi-header-actions-ctn {
order: 3 !important;
flex: 0 0 auto !important;
}
@media (max-width: 639px) {
.fi-header-actions-ctn {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr)) !important;
gap: 0.5rem !important;
width: 100% !important;
}
.fi-header-actions-ctn > .fi-ac {
width: 100% !important;
flex: unset !important;
}
.fi-header-actions-ctn .fi-btn {
width: 100% !important;
justify-content: center !important;
padding-inline: 0.5rem !important;
gap: 0 !important;
}
.fi-header-actions-ctn .fi-btn-label {
display: none !important;
}
.fi-header-actions-ctn .fi-btn svg {
margin: 0 !important;
}
}
.fi-sidebar .fi-sidebar-group-collapse-btn.fi-icon-btn,
.fi-sidebar-group-collapse-btn {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
position: relative !important;
}
.fi-sidebar .fi-sidebar-group-collapse-btn.fi-icon-btn:hover,
.fi-sidebar-group-collapse-btn:hover {
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
}
.fi-sidebar-group-collapse-btn svg {
opacity: 0 !important;
}
.fi-sidebar-group-collapse-btn::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 0 !important;
height: 0 !important;
border-left: 4px solid transparent !important;
border-right: 4px solid transparent !important;
border-top: 5px solid #a1a1aa !important;
transform: translate(-50%, -50%) !important;
transition: border-top-color 0.15s ease !important;
}
.fi-sidebar-group:not(.fi-collapsed) .fi-sidebar-group-collapse-btn::after {
border-top-color: #f97316 !important;
}
table.fi-ta-table td {
height: 2.2rem !important;
min-height: 2.2rem !important;
max-height: 2.2rem !important;
padding-block: 0.3rem !important;
line-height: 1.2 !important;
font-size: 12px !important;
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}
table.fi-ta-table th {
height: 2.2rem !important;
min-height: 2.2rem !important;
max-height: 2.2rem !important;
padding-block: 0.3rem !important;
line-height: 1.2 !important;
font-size: 12px !important;
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}
@media (max-width: 639px) {
table.fi-ta-table td,
table.fi-ta-table th {
height: 1.9rem !important;
min-height: 1.9rem !important;
max-height: 1.9rem !important;
padding-inline: 0.5rem !important;
padding-block: 0.2rem !important;
font-size: 10.5px !important;
}
table.fi-ta-table th {
font-size: 9.5px !important;
}
.fi-ta-table .fi-badge {
font-size: 9.5px !important;
padding-inline: 0.4rem !important;
padding-block: 0.1rem !important;
}
.fi-ta-table .fi-ta-actions .fi-icon-btn {
width: 1.6rem !important;
height: 1.6rem !important;
}
.fi-ta-table .fi-ta-actions .fi-icon-btn svg {
width: 0.9rem !important;
height: 0.9rem !important;
}
}
.fi-ta-cell:not(.fi-align-end):not(.fi-align-right) {
text-align: center !important;
}
.fi-ta-header-cell {
text-align: left !important;
}
table.fi-ta-table td .fi-badge {
padding-block: 0.1rem !important;
line-height: 1.3 !important;
}
.fi-modal-window {
overflow-x: clip !important;
overflow-y: auto !important;
max-height: calc(100dvh - 2rem) !important;
}
@media (max-width: 639px) {
.fi-modal-window {
max-height: calc(100dvh - 1rem) !important;
}
}
.fi-modal-header {
position: sticky !important;
top: 0 !important;
z-index: 20 !important;
background: #ffffff !important;
}
.fi-modal-footer {
position: sticky !important;
bottom: 0 !important;
z-index: 20 !important;
background: #ffffff !important;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05) !important;
}
.dark .fi-modal-header {
background: #18181b !important;
}
.dark .fi-modal-footer {
background: #18181b !important;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
}
.fi-ta-header-toolbar > .fi-icon-btn,
.fi-ta-header-toolbar .fi-dropdown-trigger > .fi-icon-btn,
.fi-ta-filters-trigger-action-ctn .fi-btn,
.fi-ta-filters-trigger-action {
border-radius: 0 !important;
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
box-sizing: border-box !important;
}
.fi-ta-search-field .fi-input-wrp {
border-radius: 0 !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
box-sizing: border-box !important;
}
.fi-ta-search-field .fi-input,
.fi-ta-search-field input {
border-radius: 0 !important;
height: 30px !important;
min-height: 30px !important;
box-sizing: border-box !important;
}
.fi-ta-search-field .fi-input-wrp > *,
.fi-ta-search-field .fi-input-wrp-prefix,
.fi-ta-search-field .fi-input-wrp-prefix-icon {
border: none !important;
border-inline-end: none !important;
border-inline-start: none !important;
box-shadow: none !important;
}
.fi-input-wrp-prefix-has-content,
.fi-input-wrp-suffix-has-content {
border: none !important;
border-inline-end: none !important;
border-inline-start: none !important;
box-shadow: none !important;
}
.fi-ta-header .fi-ta-actions,
.fi-ta-header-toolbar .fi-ta-actions {
display: flex !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
gap: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
max-width: 100% !important;
overflow-x: auto !important;
}
.fi-ta-header .fi-ta-actions > *,
.fi-ta-header-toolbar .fi-ta-actions > * {
flex: 0 0 auto !important;
}
.fi-ta-header .fi-ta-actions .fi-btn,
.fi-ta-header-toolbar .fi-ta-actions .fi-btn {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 0.3rem !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
min-width: 4.5rem !important;
min-height: auto !important;
padding: 0.3rem 0.9rem !important;
position: relative !important;
color: #c2410c !important;
transition: opacity 0.15s ease, background-color 0.15s ease !important;
}
.fi-ta-header .fi-ta-actions .fi-btn > span,
.fi-ta-header-toolbar .fi-ta-actions .fi-btn > span {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.3rem !important;
}
.dark .fi-ta-header .fi-ta-actions .fi-btn,
.dark .fi-ta-header-toolbar .fi-ta-actions .fi-btn {
color: #fb923c !important;
}
.fi-ta-header .fi-ta-actions .fi-btn:hover,
.fi-ta-header-toolbar .fi-ta-actions .fi-btn:hover {
background: rgba(249, 115, 22, 0.08) !important;
border-radius: 0.6rem !important;
}
.fi-ta-header .fi-ta-actions .fi-btn:not(:first-child)::before,
.fi-ta-header-toolbar .fi-ta-actions .fi-btn:not(:first-child)::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 18% !important;
bottom: 18% !important;
width: 1px !important;
background: rgba(0, 0, 0, 0.08) !important;
}
.dark .fi-ta-header .fi-ta-actions .fi-btn:not(:first-child)::before,
.dark .fi-ta-header-toolbar .fi-ta-actions .fi-btn:not(:first-child)::before {
background: rgba(255, 255, 255, 0.1) !important;
}
.fi-ta-header .fi-ta-actions .fi-btn svg,
.fi-ta-header-toolbar .fi-ta-actions .fi-btn svg {
width: 1.15rem !important;
height: 1.15rem !important;
margin: 0 !important;
color: #f97316 !important;
fill: none !important;
stroke: #f97316 !important;
}
.dark .fi-ta-header .fi-ta-actions .fi-btn svg,
.dark .fi-ta-header-toolbar .fi-ta-actions .fi-btn svg {
color: #fb923c !important;
stroke: #fb923c !important;
filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.45)) !important;
}
.fi-ta-header .fi-ta-actions .fi-btn .fi-btn-label,
.fi-ta-header-toolbar .fi-ta-actions .fi-btn .fi-btn-label {
position: static !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
clip: auto !important;
white-space: nowrap !important;
border: 0 !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
color: #c2410c !important;
}
.dark .fi-ta-header .fi-ta-actions .fi-btn .fi-btn-label,
.dark .fi-ta-header-toolbar .fi-ta-actions .fi-btn .fi-btn-label {
color: #fb923c !important;
text-shadow: 0 0 10px rgba(249, 115, 22, 0.35) !important;
}
.tya-mute,
.fi-ta-header .fi-ta-actions .fi-btn.tya-mute,
.fi-ta-header-toolbar .fi-ta-actions .fi-btn.tya-mute {
opacity: 0.35 !important;
pointer-events: none !important;
cursor: not-allowed !important;
}
.fi-ta-header .fi-ta-actions:empty,
.fi-ta-header-toolbar .fi-ta-actions:empty,
.fi-ta-header .fi-ta-actions:not(:has(> *)),
.fi-ta-header-toolbar .fi-ta-actions:not(:has(> *)) {
display: none !important;
}
.fi-ta-header-ctn {
display: grid !important;
grid-template-columns: auto 1fr auto auto !important;
grid-template-areas:
"header . toolbar trigger"
"panel panel panel panel" !important;
align-items: center !important;
column-gap: 0.75rem !important;
row-gap: 0.6rem !important;
}
.fi-ta-header-ctn > .fi-ta-header {
grid-area: header !important;
justify-self: start !important;
}
.fi-ta-header-ctn > .fi-ta-header-toolbar {
grid-area: toolbar !important;
}
.fi-ta-header-ctn > .fi-ta-filters-above-content-ctn {
display: contents !important;
}
.fi-ta-header-ctn .fi-ta-filters-above-content-ctn > .fi-ta-filters {
grid-area: panel !important;
width: 100% !important;
box-sizing: border-box !important;
}
.fi-ta-header-ctn .fi-ta-filters-above-content-ctn > .fi-ta-filters-trigger-action-ctn {
grid-area: trigger !important;
justify-self: end !important;
align-self: center !important;
width: auto !important;
margin: 0 !important;
cursor: pointer !important;
}
@media (max-width: 767px) {
.fi-ta-header-ctn {
grid-template-columns: 1fr !important;
grid-template-areas:
"header"
"toolbar"
"trigger"
"panel" !important;
}
.fi-ta-header-ctn .fi-ta-filters-above-content-ctn > .fi-ta-filters-trigger-action-ctn {
justify-self: stretch !important;
}
.fi-ta-header-ctn .fi-ta-filters-above-content-ctn > .fi-ta-filters-trigger-action-ctn .fi-btn {
width: 100% !important;
}
}
.fi-ta-header-ctn .fi-ta-filters-above-content-ctn .fi-ta-filters-trigger-action-ctn .fi-btn {
width: auto !important;
height: auto !important;
min-width: 11rem !important;
min-height: auto !important;
flex-direction: row !important;
justify-content: center !important;
gap: 0.5rem !important;
padding-inline: 1.5rem !important;
padding-block: 0.65rem !important;
border-radius: 0 !important;
font-size: 0.875rem !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-trigger-action-ctn .fi-badge {
background: #f97316 !important;
color: #ffffff !important;
box-shadow: 0 0 0 2px #ffffff !important;
}
.dark .fi-ta-filters-above-content-ctn .fi-ta-filters-trigger-action-ctn .fi-badge {
box-shadow: 0 0 0 2px #18181b !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters {
background: #ffffff !important;
border: 1.5px solid #e4e4e7 !important;
border-radius: 0.85rem !important;
padding: 1.25rem 1.5rem !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.dark .fi-ta-filters-above-content-ctn .fi-ta-filters {
background: #202023 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-header {
margin-block-end: 0.85rem !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-heading {
font-size: 0.9rem !important;
font-weight: 700 !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 0.6rem !important;
margin-block-start: 1.1rem !important;
padding-block-start: 1rem !important;
border-top: 1px solid #f4f4f5 !important;
}
.dark .fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn {
border-top-color: rgba(255, 255, 255, 0.08) !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn .fi-color-primary {
border-radius: 0.6rem !important;
padding-inline: 1.1rem !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn .fi-color-danger,
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn a.fi-link {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
border: 1.5px solid #e4e4e7 !important;
border-radius: 0.6rem !important;
padding: 0.5rem 0.9rem !important;
background: #fafafa !important;
color: #71717a !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn .fi-color-danger::before,
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn a.fi-link::before {
content: "\21bb" !important;
font-size: 0.9rem !important;
line-height: 1 !important;
}
.dark .fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn .fi-color-danger,
.dark .fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn a.fi-link {
background: #27272a !important;
border-color: rgba(255, 255, 255, 0.14) !important;
color: #d4d4d8 !important;
}
@media (max-width: 639px) {
.fi-ta-filters-above-content-ctn {
margin-inline: 0 !important;
}
.fi-ta-filters-above-content-ctn > .fi-ta-filters-trigger-action-ctn {
align-self: stretch !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-trigger-action-ctn .fi-btn {
width: 100% !important;
justify-content: center !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters {
padding: 1rem !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-fo-component-ctn .fi-fo-grid,
.fi-ta-filters-above-content-ctn .fi-ta-filters .fi-fo-grid {
grid-template-columns: 1fr !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn {
flex-wrap: wrap !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn > * {
flex: 1 1 auto !important;
justify-content: center !important;
}
}
.fi-ta-header-toolbar {
position: relative !important;
}
.fi-ta-header-toolbar .fi-ta-filters-dropdown {
position: static !important;
}
.fi-ta-header-toolbar .fi-ta-filters-dropdown > .fi-dropdown-panel {
position: absolute !important;
top: calc(100% + 0.25rem) !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
transform: none !important;
margin: 0 !important;
border-radius: 0.85rem !important;
}
.fi-ta-header-toolbar .fi-ta-filters-dropdown > .fi-dropdown-panel .fi-ta-filters {
padding: 1.25rem 1.5rem !important;
}
@media (max-width: 639px) {
.fi-ta-header-toolbar {
flex-wrap: wrap !important;
}
.fi-ta-search-field {
max-width: 100% !important;
width: 100% !important;
flex: 1 1 100% !important;
order: -1 !important;
margin-block-end: 0.5rem !important;
}
.fi-ta-header .fi-ta-actions,
.fi-ta-header-toolbar .fi-ta-actions {
flex-wrap: wrap !important;
overflow-x: visible !important;
}
.fi-ta-header .fi-ta-actions .fi-btn,
.fi-ta-header-toolbar .fi-ta-actions .fi-btn {
min-width: 4rem !important;
padding-inline: 0.65rem !important;
}
.fi-ta-header-toolbar > * {
flex: 1 1 100% !important;
width: 100% !important;
flex-wrap: wrap !important;
}
.fi-ta-search-field .fi-input-wrp {
width: 100% !important;
}
}
.tya-sticky-col {
position: sticky !important;
z-index: 2 !important;
background-color: #ffffff !important;
}
th.tya-sticky-col {
z-index: 3 !important;
}
.tya-sticky-3 {
border-inline-end: 1px solid #e4e4e7 !important;
}
.tya-sticky-1 { left: 0; min-width: 2.75rem; max-width: 2.75rem; }
.tya-sticky-2 { left: 2.75rem; min-width: 4.5rem; max-width: 4.5rem; }
.tya-sticky-3 {
left: 7.25rem;
min-width: 9rem;
max-width: 9rem;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dark .tya-sticky-col {
background-color: #18181b !important;
}
.dark .tya-sticky-3 {
border-inline-end-color: rgba(255, 255, 255, 0.08) !important;
}
@media (max-width: 767px) {
.tya-sticky-col {
position: static !important;
max-width: none !important;
border-inline-end: none !important;
}
}
.fi-grid > *,
.fi-fo-field-wrp,
.fi-input-wrp {
min-width: 0;
}
.fi-fo-field-wrp-helper-text,
.fi-fo-field-lbl,
.fi-fo-field-wrp-error-message {
overflow-wrap: anywhere;
}
.fi-sc-wizard pre,
.fi-modal-content pre,
.fi-fo-field-wrp pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
max-width: 100%;
overflow-x: auto;
}
.fi-sc-wizard code,
.fi-modal-content code {
overflow-wrap: anywhere;
}
@media (max-width: 1279px) {
.fi-fo-field-wrp-helper-text {
display: block !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
overflow: visible !important;
}
.fi-sc-wizard .fi-sc-wizard-header {
overflow-x: auto;
padding: 0.25rem 0.35rem;
}
.fi-sc-wizard .fi-sc-wizard-header-step {
min-width: 0;
}
.fi-sc-wizard .fi-sc-wizard-header-step-btn {
gap: 0.5rem;
padding: 0.5rem 0.6rem;
min-width: 0;
}
.fi-sc-wizard .fi-sc-wizard-header-step-icon-ctn {
width: 2rem;
height: 2rem;
flex-shrink: 0;
}
.fi-sc-wizard .fi-sc-wizard-header-step-label {
font-size: 0.8125rem;
overflow-wrap: anywhere;
}
.fi-sc-wizard .fi-sc-wizard-header-step-description {
display: none !important;
}
.fi-sc-wizard.fi-contained .fi-sc-wizard-step.fi-active {
padding: 1rem 0.9rem;
}
.fi-modal-window {
max-width: calc(100vw - 1rem) !important;
}
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn {
overflow-y: auto !important;
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
display: flex !important;
flex-direction: column !important;
width: min(720px, calc(100vw - 2rem)) !important;
max-width: min(720px, calc(100vw - 2rem)) !important;
max-height: calc(100dvh - 2rem) !important;
overflow: hidden !important;
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window:has(.fi-sc-wizard) {
width: min(960px, calc(100vw - 2rem)) !important;
max-width: min(960px, calc(100vw - 2rem)) !important;
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window:not(.fi-modal-window-has-content) {
width: min(28rem, calc(100vw - 2rem)) !important;
max-width: min(28rem, calc(100vw - 2rem)) !important;
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
position: static !important;
flex: 0 0 auto !important;
box-shadow: none !important;
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-content {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
position: static !important;
flex: 0 0 auto !important;
z-index: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.6rem !important;
min-height: 0 !important;
padding: 0.85rem 1.5rem !important;
background: #ffffff !important;
border-top: 1px solid #e4e4e7 !important;
box-shadow: 0 -8px 16px -14px rgba(0, 0, 0, 0.35) !important;
}
.dark .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
background: #18181b !important;
border-top-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 -8px 16px -14px rgba(0, 0, 0, 0.9) !important;
}
.fi-modal .fi-modal-footer .fi-btn:not(.fi-color),
.fi-modal .fi-modal-footer .fi-btn.fi-color-gray {
background: #ffffff !important;
color: #3f3f46 !important;
border: 1px solid #d4d4d8 !important;
box-shadow: none !important;
}
.fi-modal .fi-modal-footer .fi-btn:not(.fi-color):hover,
.fi-modal .fi-modal-footer .fi-btn.fi-color-gray:hover {
background: #f4f4f5 !important;
}
.dark .fi-modal .fi-modal-footer .fi-btn:not(.fi-color),
.dark .fi-modal .fi-modal-footer .fi-btn.fi-color-gray {
background: rgba(255, 255, 255, 0.06) !important;
color: #e4e4e7 !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
.dark .fi-modal .fi-modal-footer .fi-btn:not(.fi-color):hover,
.dark .fi-modal .fi-modal-footer .fi-btn.fi-color-gray:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
@media (min-width: 768px) {
.fi-sc-wizard .fi-sc-wizard-header {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: minmax(0, 1fr) !important;
overflow-x: auto !important;
}
.fi-sc-wizard .fi-sc-wizard-header-step {
min-width: 0 !important;
}
.fi-sc-wizard .fi-sc-wizard-header-step-btn {
width: 100% !important;
min-width: 0 !important;
gap: 0.6rem !important;
padding: 0.65rem 0.75rem !important;
}
.fi-sc-wizard .fi-sc-wizard-header-step-text {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
.fi-sc-wizard .fi-sc-wizard-header-step-label {
white-space: normal !important;
overflow-wrap: anywhere;
line-height: 1.25 !important;
letter-spacing: 0.02em !important;
}
.fi-sc-wizard .fi-sc-wizard-header-step-icon-ctn {
width: 2.25rem !important;
height: 2.25rem !important;
flex-shrink: 0 !important;
}
.fi-modal .fi-sc-wizard .fi-sc-wizard-header-step-description {
display: none !important;
}
}
@media (max-width: 639px) {
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn {
padding: 0.5rem !important;
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window,
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window:has(.fi-sc-wizard) {
width: calc(100vw - 1rem) !important;
max-width: calc(100vw - 1rem) !important;
max-height: calc(100dvh - 1rem) !important;
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
padding: 0.7rem 1rem !important;
}
.fi-modal .fi-modal-footer .fi-modal-footer-actions {
width: 100% !important;
}
.fi-modal .fi-modal-footer .fi-modal-footer-actions .fi-btn {
flex: 1 1 0 !important;
}
}
.fi-ta-header-ctn .fi-ta-filters-above-content-ctn .fi-ta-filters-trigger-action-ctn .fi-btn,
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn {
position: relative !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 0.45rem !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 0.95rem !important;
white-space: nowrap !important;
line-height: 1 !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn > span,
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn .fi-btn-label {
white-space: nowrap !important;
font-size: inherit !important;
}
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn > .fi-icon,
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn > svg {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn .fi-btn-badge-ctn {
position: absolute !important;
top: -8px !important;
right: -8px !important;
left: auto !important;
inset-inline-start: auto !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 9999px !important;
padding: 0 !important;
width: auto !important;
z-index: 2 !important;
}
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn .fi-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
border: 0 !important;
border-radius: 9999px !important;
background: #ea580c !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: 700 !important;
line-height: 1 !important;
box-shadow: 0 0 0 2px #ffffff !important;
}
.dark .fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn .fi-badge {
box-shadow: 0 0 0 2px #18181b !important;
}
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn .fi-badge .fi-icon,
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn .fi-badge svg,
.fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn .fi-badge::before {
display: none !important;
content: none !important;
}
@media (max-width: 767px) {
.fi-ta-header-ctn .fi-ta-filters-above-content-ctn > .fi-ta-filters-trigger-action-ctn .fi-btn {
width: 100% !important;
}
}
@media (max-width: 767px) {
table.fi-ta-table.tya-kartu {
display: block !important;
width: 100% !important;
min-width: 0 !important;
border: 0 !important;
background: transparent !important;
}
table.fi-ta-table.tya-kartu > thead {
display: none !important;
}
table.fi-ta-table.tya-kartu > tbody {
display: block !important;
padding: 10px !important;
border: 0 !important;
background: transparent !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
margin: 0 0 10px !important;
padding: 12px !important;
background: #ffffff !important;
border: 1px solid #ececef !important;
border-radius: 14px !important;
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
grid-auto-rows: auto !important;
align-items: start !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row:last-child {
margin-bottom: 0 !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td {
position: static !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
white-space: normal !important;
text-align: start !important;
left: auto !important;
box-shadow: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td .fi-ta-col,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td .fi-ta-text,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td .fi-ta-text-item {
padding: 0 !important;
white-space: normal !important;
max-width: none !important;
overflow: visible !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row[data-tya-no]::before {
content: attr(data-tya-no);
position: absolute;
top: 12px;
left: 12px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #ffedd5;
color: #9a3412;
font-size: 15px;
font-weight: 800;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul {
grid-column: 1 / -1 !important;
min-height: 40px !important;
padding-left: 52px !important;
display: flex !important;
align-items: center !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row:has(> td.tya-pilih) > td.tya-judul {
padding-right: 34px !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul .fi-ta-text-item,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul .fi-ta-text-item * {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: #18181b !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi {
padding: 8px 10px !important;
background: #f6f6f7 !important;
border-radius: 10px !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi[data-tya-label]::before {
content: attr(data-tya-label);
display: block;
margin-bottom: 3px;
font-size: 10px;
font-weight: 500;
line-height: 1.2;
color: #71717a;
text-transform: none;
letter-spacing: 0;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-item,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-item-label {
font-size: 13px !important;
font-weight: 600 !important;
color: #27272a !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-lebar {
grid-column: 1 / -1 !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-no-asli {
display: none !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-pilih {
position: absolute !important;
top: 14px !important;
right: 12px !important;
left: auto !important;
width: auto !important;
z-index: 1 !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-aksi {
grid-column: 1 / -1 !important;
margin-top: 2px !important;
}
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: stretch !important;
gap: 6px !important;
width: 100% !important;
}
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions > * {
flex: 1 1 0 !important;
min-width: 0 !important;
}
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-dropdown,
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-dropdown-trigger {
display: flex !important;
width: 100% !important;
}
table.fi-ta-table.tya-kartu td.tya-aksi .fi-icon-btn,
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-btn,
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-link {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 48px !important;
max-height: none !important;
margin: 0 !important;
padding: 6px 4px !important;
border: 0 !important;
border-radius: 10px !important;
background: #fff7ed !important;
color: #ea580c !important;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1.1 !important;
box-shadow: none !important;
text-decoration: none !important;
}
table.fi-ta-table.tya-kartu td.tya-aksi .fi-icon-btn .fi-icon,
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-btn .fi-icon,
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-link .fi-icon {
width: 18px !important;
height: 18px !important;
color: inherit !important;
}
table.fi-ta-table.tya-kartu td.tya-aksi .fi-icon-btn[aria-label]::after {
content: attr(aria-label);
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
font-weight: 600;
}
table.fi-ta-table.tya-kartu td.tya-aksi .fi-color-danger,
table.fi-ta-table.tya-kartu td.tya-aksi .fi-color-danger .fi-icon {
background: #fef2f2 !important;
color: #dc2626 !important;
}
table.fi-ta-table.tya-kartu td.tya-aksi .fi-color-danger .fi-icon {
background: transparent !important;
}
table.fi-ta-table.tya-kartu > tfoot {
display: block !important;
padding: 0 10px 10px !important;
}
table.fi-ta-table.tya-kartu > tfoot > tr {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
table.fi-ta-table.tya-kartu > tfoot > tr > td:empty {
display: none !important;
}
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row {
background: #18181b !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
}
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row[data-tya-no]::before {
background: rgba(249, 115, 22, 0.16);
color: #fdba74;
}
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul,
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul .fi-ta-text-item,
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul .fi-ta-text-item * {
color: #fafafa !important;
}
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi {
background: rgba(255, 255, 255, 0.05) !important;
}
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi[data-tya-label]::before {
color: #a1a1aa;
}
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-item,
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-item-label {
color: #e4e4e7 !important;
}
.dark table.fi-ta-table.tya-kartu td.tya-aksi .fi-icon-btn,
.dark table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-btn,
.dark table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-link {
background: rgba(249, 115, 22, 0.12) !important;
color: #fb923c !important;
}
.dark table.fi-ta-table.tya-kartu td.tya-aksi .fi-color-danger {
background: rgba(239, 68, 68, 0.12) !important;
color: #f87171 !important;
}
.dark table.fi-ta-table.tya-kartu td.tya-aksi .fi-color-danger .fi-icon {
color: #f87171 !important;
}
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label) {
position: relative !important;
padding-inline-start: 64px !important;
min-height: 56px !important;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)))::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 14px;
width: 52px;
height: 52px;
border-radius: 12px;
background-color: #fff7ed;
background-image: none;
box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.14);
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)))::after {
content: "";
position: absolute;
inset-inline-start: 15px;
top: 29px;
width: 22px;
height: 22px;
background-color: #f97316;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.86%204.49l2.65%202.65M7.5%2019.5H4.5v-3L16.06%204.94a1.5%201.5%200%200%201%202.12%200l.88.88a1.5%201.5%200%200%201%200%202.12z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.86%204.49l2.65%202.65M7.5%2019.5H4.5v-3L16.06%204.94a1.5%201.5%200%200%201%202.12%200l.88.88a1.5%201.5%200%200%201%200%202.12z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
pointer-events: none;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator))):has(select, .fi-select-input, .fi-fo-select)::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.25%206.75h12M8.25%2012h12M8.25%2017.25h12M3.75%206.75h.01M3.75%2012h.01M3.75%2017.25h.01%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.25%206.75h12M8.25%2012h12M8.25%2017.25h12M3.75%206.75h.01M3.75%2012h.01M3.75%2017.25h.01%22%2F%3E%3C%2Fsvg%3E");
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator))):has(.fi-toggle, .fi-fo-toggle, input[type="checkbox"])::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.64%206.36a9%209%200%201%200%2012.73%200M12%203v9%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.64%206.36a9%209%200%201%200%2012.73%200M12%203v9%22%2F%3E%3C%2Fsvg%3E");
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator))):has(input[type="date"], input[type="datetime-local"], input[type="time"], .fi-fo-date-time-picker)::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.75%203v2.25M17.25%203v2.25M3.75%2018.75V7.5a2.25%202.25%200%200%201%202.25-2.25h12a2.25%202.25%200%200%201%202.25%202.25v11.25M3.75%2018.75A2.25%202.25%200%200%200%206%2021h12a2.25%202.25%200%200%200%202.25-2.25M3.75%2018.75v-7.5h16.5v7.5%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.75%203v2.25M17.25%203v2.25M3.75%2018.75V7.5a2.25%202.25%200%200%201%202.25-2.25h12a2.25%202.25%200%200%201%202.25%202.25v11.25M3.75%2018.75A2.25%202.25%200%200%200%206%2021h12a2.25%202.25%200%200%200%202.25-2.25M3.75%2018.75v-7.5h16.5v7.5%22%2F%3E%3C%2Fsvg%3E");
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator))):has(textarea)::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.75%206.75h16.5M3.75%2012h16.5M3.75%2017.25H12%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.75%206.75h16.5M3.75%2012h16.5M3.75%2017.25H12%22%2F%3E%3C%2Fsvg%3E");
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator))):has(input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"])::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.25%208.25h15M3.75%2015.75h15M10.5%203.75%207.5%2020.25M16.5%203.75l-3%2016.5%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.25%208.25h15M3.75%2015.75h15M10.5%203.75%207.5%2020.25M16.5%203.75l-3%2016.5%22%2F%3E%3C%2Fsvg%3E");
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator))):has(.fi-input-wrp-prefix-has-label, .fi-input-wrp-suffix-has-label)::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.25%2018.75a60%2060%200%200%201%2015.8%202.1c.73.2%201.45-.34%201.45-1.1v-1M3.75%204.5v.75A.75.75%200%200%201%203%206h-.75m0%200v-.38c0-.62.5-1.12%201.13-1.12h15.37c.62%200%201.13.5%201.13%201.13v9.74c0%20.63-.5%201.13-1.13%201.13H3.37c-.62%200-1.12-.5-1.12-1.13V6zM15%2010.5a3%203%200%201%201-6%200%203%203%200%200%201%206%200z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.25%2018.75a60%2060%200%200%201%2015.8%202.1c.73.2%201.45-.34%201.45-1.1v-1M3.75%204.5v.75A.75.75%200%200%201%203%206h-.75m0%200v-.38c0-.62.5-1.12%201.13-1.12h15.37c.62%200%201.13.5%201.13%201.13v9.74c0%20.63-.5%201.13-1.13%201.13H3.37c-.62%200-1.12-.5-1.12-1.13V6zM15%2010.5a3%203%200%201%201-6%200%203%203%200%200%201%206%200z%22%2F%3E%3C%2Fsvg%3E");
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)) .fi-input-wrp {
position: relative !important;
overflow: visible !important;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)) .fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator) {
position: absolute !important;
inset-inline-start: -64px !important;
top: calc(50% - 11px) !important;
transform: translateY(-50%) !important;
box-sizing: border-box !important;
width: 52px !important;
height: 52px !important;
max-width: none !important;
padding: 15px !important;
border-radius: 12px !important;
background: #fff7ed !important;
box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.14) !important;
color: #f97316 !important;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)) .fi-input-wrp-prefix:not(.fi-input-wrp-prefix-has-label):not(:has(.fi-input-wrp-actions)) {
width: 0 !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)) .fi-input-wrp-prefix.fi-input-wrp-prefix-has-label {
border-inline-end: 0 !important;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label) :is(.fi-fo-field-label, .fi-fo-field-wrp-label, .fi-fo-field-lbl) {
font-size: 12.5px !important;
font-weight: 500 !important;
color: #71717a !important;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label) :is(.fi-fo-field-label-content, .fi-fo-field-lbl-text) {
color: inherit !important;
font-weight: inherit !important;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label) .fi-input-wrp {
min-height: 46px !important;
border-radius: 12px !important;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label) .fi-input-wrp :is(.fi-input, .fi-select-input, select) {
min-height: 44px !important;
font-size: 14px !important;
font-weight: 600 !important;
}
@media (max-width: 639px) {
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label) {
padding-inline-start: 54px !important;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)))::before {
width: 44px;
height: 44px;
top: 18px;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)))::after {
inset-inline-start: 12px;
top: 30px;
width: 20px;
height: 20px;
}
:is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)) .fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator) {
inset-inline-start: -54px !important;
width: 44px !important;
height: 44px !important;
padding: 12px !important;
}
}
.dark :is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)))::before {
background-color: #232327;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dark :is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):not(:has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)))::after {
background-color: #fb923c;
}
.dark :is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label):has(.fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator)) .fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator) {
background: #232327 !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
color: #fb923c !important;
}
.dark :is(.fi-modal-content, .fi-main) :is(.fi-fo-field, .fi-fo-field-wrp):not(.fi-ta-filters *):not(:has(.fi-fo-field, .fi-fo-field-wrp)):not(.fi-fo-field-has-inline-label) :is(.fi-fo-field-label, .fi-fo-field-wrp-label, .fi-fo-field-lbl) {
color: #a1a1aa !important;
}
@media (max-width: 767px) {
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi {
grid-column: auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 58px !important;
min-height: 58px !important;
max-height: 58px !important;
overflow: hidden !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-col,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text > *:not(.fi-badge),
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-item {
display: block !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-item,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-item-label,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-description,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text > p {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-item,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-item-label {
font-size: 12.5px !important;
line-height: 1.3 !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-description,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text > p {
font-size: 10.5px !important;
line-height: 1.25 !important;
color: #71717a !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-badge {
display: inline-flex !important;
width: auto !important;
align-self: flex-start !important;
font-size: 10px !important;
padding-block: 1px !important;
max-width: 100% !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi[data-tya-label]::before {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi.tya-kosong::after {
content: "\2013";
font-size: 12.5px;
font-weight: 600;
color: #a1a1aa;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul .fi-ta-text-item,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul .fi-ta-text-item-label {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul .fi-ta-col,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-judul .fi-ta-text {
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-saklar.tya-saklar {
position: absolute !important;
top: 14px !important;
right: 12px !important;
left: auto !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
z-index: 1 !important;
display: flex !important;
align-items: center !important;
height: 40px !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-saklar.tya-saklar::before,
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-saklar.tya-saklar::after {
content: none !important;
display: none !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row:has(> td.tya-saklar) > td.tya-judul {
padding-right: 64px !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row:has(> td.tya-saklar) > td.tya-pilih {
right: 66px !important;
}
table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row:has(> td.tya-saklar):has(> td.tya-pilih) > td.tya-judul {
padding-right: 96px !important;
}
table.fi-ta-table.tya-kartu td.tya-aksi .fi-icon-btn,
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-btn,
table.fi-ta-table.tya-kartu td.tya-aksi .fi-ta-actions .fi-link {
height: 50px !important;
min-height: 50px !important;
max-height: 50px !important;
overflow: hidden !important;
}
.tya-fab.tya-fab {
position: fixed !important;
right: 16px !important;
bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
left: auto !important;
top: auto !important;
z-index: 35 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 56px !important;
height: 56px !important;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 9999px !important;
background: #f97316 !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
box-shadow: 0 8px 20px rgba(249, 115, 22, 0.45) !important;
overflow: hidden !important;
text-decoration: none !important;
}
.tya-fab.tya-fab > * {
display: none !important;
}
.tya-fab.tya-fab::before {
content: "";
display: block;
width: 26px;
height: 26px;
background: #ffffff;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%204.5v15M4.5%2012h15%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%204.5v15M4.5%2012h15%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.tya-fab.tya-fab:active {
transform: scale(0.94);
}
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text-description,
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi .fi-ta-text > p {
color: #a1a1aa !important;
}
.dark table.fi-ta-table.tya-kartu > tbody > tr.fi-ta-row > td.tya-isi.tya-kosong::after {
color: #71717a;
}
.dark .tya-fab.tya-fab {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6) !important;
}
}
@media (max-width: 767px) {
.tya-fab.tya-fab.tya-fab,
.tya-fab-asli.tya-fab-asli {
display: none !important;
}
.tya-hdr-kosong {
display: none !important;
}
.fi-ta-header-ctn {
padding-top: 0.75rem !important;
row-gap: 0.6rem !important;
}
#tya-fab {
position: fixed;
right: 16px;
bottom: calc(88px + env(safe-area-inset-bottom, 0px));
z-index: 35;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 0;
margin: 0;
border: 0;
border-radius: 9999px;
background: #f97316;
box-shadow: 0 8px 20px rgba(249, 115, 22, 0.45);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#tya-fab::before {
content: "";
display: block;
width: 26px;
height: 26px;
background: #ffffff;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%204.5v15M4.5%2012h15%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%204.5v15M4.5%2012h15%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
#tya-fab:active {
transform: scale(0.94);
}
.dark #tya-fab {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
}
.fi-ta-filters-actions-ctn .fi-btn {
white-space: nowrap !important;
min-width: 0 !important;
}
.fi-ta-filters-actions-ctn > .fi-btn:first-child,
.fi-ta-filters-actions-ctn > :first-child .fi-btn {
font-size: 0 !important;
gap: 0.4rem !important;
}
.fi-ta-filters-actions-ctn > .fi-btn:first-child::after,
.fi-ta-filters-actions-ctn > :first-child .fi-btn::after {
content: "Apply";
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
}
}
@media (min-width: 768px) {
#tya-fab {
display: none !important;
}
}
#tya-mtop,
#tya-menu-ikon {
display: none;
}
@media (max-width: 767px) {
.fi-topbar.tya-mtop-aktif > :not(#tya-mtop) {
display: none !important;
}
.fi-topbar.tya-mtop-aktif {
padding-inline: 16px !important;
}
#tya-mtop {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 56px;
}
#tya-mtop .tya-mtop-foto {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 9999px;
overflow: hidden;
display: flex;
}
#tya-mtop .tya-mtop-foto > * {
width: 40px !important;
height: 40px !important;
max-width: none !important;
border-radius: 9999px !important;
}
#tya-mtop .tya-mtop-teks {
flex: 1 1 auto;
min-width: 0;
line-height: 1.2;
}
#tya-mtop .tya-mtop-sapa {
font-size: 11px;
color: #71717a;
}
#tya-mtop .tya-mtop-nama {
font-size: 15px;
font-weight: 700;
color: #18181b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tya-mtop .tya-mtop-keluar {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 12px;
background: #fff7ed;
cursor: pointer;
}
#tya-mtop .tya-mtop-keluar::before {
content: "";
width: 22px;
height: 22px;
background: #ea580c;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.75%209V5.25A2.25%202.25%200%200%200%2013.5%203h-6a2.25%202.25%200%200%200-2.25%202.25v13.5A2.25%202.25%200%200%200%207.5%2021h6a2.25%202.25%200%200%200%202.25-2.25V15M12%209l3%203m0%200-3%203m3-3H2.25%22%20transform%3D%22translate%285%200%29%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.75%209V5.25A2.25%202.25%200%200%200%2013.5%203h-6a2.25%202.25%200%200%200-2.25%202.25v13.5A2.25%202.25%200%200%200%207.5%2021h6a2.25%202.25%200%200%200%202.25-2.25V15M12%209l3%203m0%200-3%203m3-3H2.25%22%20transform%3D%22translate%285%200%29%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.dark #tya-mtop .tya-mtop-nama {
color: #fafafa;
}
.dark #tya-mtop .tya-mtop-sapa {
color: #a1a1aa;
}
.dark #tya-mtop .tya-mtop-keluar {
background: rgba(249, 115, 22, 0.14);
}
.dark #tya-mtop .tya-mtop-keluar::before {
background: #fb923c;
}
body.tya-mtop-on .fi-sidebar,
body.tya-mtop-on .fi-sidebar-close-overlay,
body.tya-mtop-on .fi-topbar-open-sidebar-btn,
body.tya-mtop-on .fi-topbar-close-sidebar-btn {
display: none !important;
}
.tya-sembunyi-hp {
display: none !important;
}
.tya-statistik {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 10px !important;
}
.tya-statistik > * {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: none !important;
}
#tya-menu-ikon {
display: block;
grid-column: 1 / -1;
margin: 12px 0;
padding: 14px 10px 6px;
background: #ffffff;
border: 1px solid #ececef;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
#tya-menu-ikon .tya-menu-judul {
margin: 0 6px 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #71717a;
}
#tya-menu-ikon .tya-menu-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
}
#tya-menu-ikon a {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 4px 2px 8px;
border-radius: 12px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
#tya-menu-ikon .tya-menu-ikon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff7ed;
color: #ea580c;
}
#tya-menu-ikon .tya-menu-ikon svg {
width: 22px !important;
height: 22px !important;
color: inherit !important;
margin: 0 !important;
}
#tya-menu-ikon .tya-menu-label {
width: 100%;
font-size: 10px;
font-weight: 600;
line-height: 1.2;
text-align: center;
color: #3f3f46;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
#tya-menu-ikon a.tya-aktif .tya-menu-ikon {
background: #f97316;
color: #ffffff;
}
#tya-menu-ikon a:active .tya-menu-ikon {
transform: scale(0.94);
}
.dark #tya-menu-ikon {
background: #18181b;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: none;
}
.dark #tya-menu-ikon .tya-menu-judul {
color: #a1a1aa;
}
.dark #tya-menu-ikon .tya-menu-ikon {
background: rgba(249, 115, 22, 0.13);
color: #fb923c;
}
.dark #tya-menu-ikon a.tya-aktif .tya-menu-ikon {
background: #f97316;
color: #ffffff;
}
.dark #tya-menu-ikon .tya-menu-label {
color: #d4d4d8;
}
}
#tya-titik,
#tya-menu-utama,
#tya-lembar {
display: none;
}
@media (max-width: 767px) {
.tya-statistik.tya-slide {
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
gap: 12px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px !important;
}
.tya-statistik.tya-slide::-webkit-scrollbar {
display: none;
}
.tya-statistik.tya-slide > * {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
scroll-snap-align: center !important;
scroll-snap-stop: always !important;
grid-column: auto !important;
margin: 0 !important;
}
#tya-titik {
display: flex;
justify-content: center;
gap: 6px;
margin: 10px 0 2px;
grid-column: 1 / -1;
}
#tya-titik button {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 9999px;
background: #d4d4d8;
transition: width 0.2s ease, background 0.2s ease;
}
#tya-titik button.tya-aktif {
width: 20px;
background: #f97316;
}
.dark #tya-titik button {
background: #3f3f46;
}
.dark #tya-titik button.tya-aktif {
background: #f97316;
}
.tya-mata {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-inline-start: 6px;
padding: 0;
border: 0;
border-radius: 9999px;
background: transparent;
vertical-align: middle;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.tya-mata::before {
content: "";
width: 20px;
height: 20px;
background: #a1a1aa;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.98%208.22A10.5%2010.5%200%200%200%201.93%2012C3.23%2016.34%207.24%2019.5%2012%2019.5c.99%200%201.95-.14%202.86-.4M6.23%206.23A10.45%2010.45%200%200%201%2012%204.5c4.76%200%208.77%203.16%2010.07%207.5a10.52%2010.52%200%200%201-4.29%205.77M6.23%206.23%203%203m3.23%203.23%203.65%203.65m7.89%207.89L21%2021m-3.23-3.23-3.65-3.65m0%200a3%203%200%201%200-4.24-4.24m4.24%204.24L9.88%209.88%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.98%208.22A10.5%2010.5%200%200%200%201.93%2012C3.23%2016.34%207.24%2019.5%2012%2019.5c.99%200%201.95-.14%202.86-.4M6.23%206.23A10.45%2010.45%200%200%201%2012%204.5c4.76%200%208.77%203.16%2010.07%207.5a10.52%2010.52%200%200%201-4.29%205.77M6.23%206.23%203%203m3.23%203.23%203.65%203.65m7.89%207.89L21%2021m-3.23-3.23-3.65-3.65m0%200a3%203%200%201%200-4.24-4.24m4.24%204.24L9.88%209.88%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.tya-mata.tya-terbuka::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.04%2012.32a1%201%200%200%201%200-.64C3.42%207.51%207.36%204.5%2012%204.5s8.57%203%209.96%207.18a1%201%200%200%201%200%20.64C20.58%2016.49%2016.64%2019.5%2012%2019.5s-8.57-3-9.96-7.18z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.04%2012.32a1%201%200%200%201%200-.64C3.42%207.51%207.36%204.5%2012%204.5s8.57%203%209.96%207.18a1%201%200%200%201%200%20.64C20.58%2016.49%2016.64%2019.5%2012%2019.5s-8.57-3-9.96-7.18z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
background: #f97316;
}
#tya-menu-ikon.tya-diganti {
display: none !important;
}
#tya-menu-utama {
display: block;
grid-column: 1 / -1;
margin: 12px 0;
padding: 14px 10px 6px;
background: #ffffff;
border: 1px solid #ececef;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
#tya-menu-utama .tya-menu-judul,
#tya-lembar .tya-lembar-judul {
margin: 0 6px 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #71717a;
}
#tya-menu-utama .tya-menu-grid,
#tya-lembar .tya-menu-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
}
#tya-lembar .tya-menu-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 8px;
}
#tya-menu-utama .tya-menu-item,
#tya-lembar .tya-menu-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 4px 2px 8px;
border: 0;
border-radius: 12px;
background: transparent;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#tya-menu-utama .tya-menu-ikon,
#tya-lembar .tya-menu-ikon {
position: relative;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff7ed;
color: #ea580c;
}
#tya-menu-utama .tya-menu-ikon svg,
#tya-lembar .tya-menu-ikon svg {
width: 22px !important;
height: 22px !important;
margin: 0 !important;
color: inherit !important;
}
#tya-menu-utama .tya-menu-grup .tya-menu-ikon::after {
content: "";
position: absolute;
right: 4px;
bottom: 4px;
width: 6px;
height: 6px;
border-radius: 9999px;
background: #f97316;
}
#tya-menu-utama .tya-menu-label,
#tya-lembar .tya-menu-label {
width: 100%;
font-size: 10px;
font-weight: 600;
line-height: 1.2;
text-align: center;
color: #3f3f46;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
#tya-menu-utama .tya-aktif .tya-menu-ikon,
#tya-lembar .tya-aktif .tya-menu-ikon {
background: #f97316;
color: #ffffff;
}
#tya-menu-utama .tya-menu-grup.tya-aktif .tya-menu-ikon::after {
background: #ffffff;
}
#tya-lembar.tya-buka {
display: block;
position: fixed;
inset: 0;
z-index: 60;
}
#tya-lembar .tya-lembar-latar {
position: absolute;
inset: 0;
background: rgba(9, 9, 11, 0.5);
}
#tya-lembar .tya-lembar-isi {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: 75dvh;
overflow-y: auto;
padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
background: #ffffff;
border-radius: 20px 20px 0 0;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
animation: tya-naik 0.2s ease-out;
}
#tya-lembar .tya-lembar-pegangan {
width: 40px;
height: 4px;
margin: 0 auto 12px;
border-radius: 9999px;
background: #d4d4d8;
}
@keyframes tya-naik {
from { transform: translateY(30px); opacity: 0.4; }
to { transform: translateY(0); opacity: 1; }
}
.dark #tya-menu-utama {
background: #18181b;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: none;
}
.dark #tya-lembar .tya-lembar-isi {
background: #18181b;
}
.dark #tya-lembar .tya-lembar-pegangan {
background: #3f3f46;
}
.dark #tya-menu-utama .tya-menu-judul,
.dark #tya-lembar .tya-lembar-judul {
color: #a1a1aa;
}
.dark #tya-menu-utama .tya-menu-ikon,
.dark #tya-lembar .tya-menu-ikon {
background: rgba(249, 115, 22, 0.13);
color: #fb923c;
}
.dark #tya-menu-utama .tya-aktif .tya-menu-ikon,
.dark #tya-lembar .tya-aktif .tya-menu-ikon {
background: #f97316;
color: #ffffff;
}
.dark #tya-menu-utama .tya-menu-label,
.dark #tya-lembar .tya-menu-label {
color: #d4d4d8;
}
#tya-mtop .tya-mtop-invoice {
position: relative;
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #fff7ed;
text-decoration: none;
}
#tya-mtop .tya-mtop-invoice::before {
content: "";
width: 22px;
height: 22px;
background: #ea580c;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19.5%2014.25v-2.63A3.38%203.38%200%200%200%2016.13%208.25h-1.5A1.13%201.13%200%200%201%2013.5%207.13v-1.5A3.38%203.38%200%200%200%2010.13%202.25H8.25m0%2012.75h7.5m-7.5%203H12M10.5%202.25H5.63c-.62%200-1.13.5-1.13%201.13v17.25c0%20.62.5%201.13%201.13%201.13h12.75c.62%200%201.13-.5%201.13-1.13V11.25a9%209%200%200%200-9-9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19.5%2014.25v-2.63A3.38%203.38%200%200%200%2016.13%208.25h-1.5A1.13%201.13%200%200%201%2013.5%207.13v-1.5A3.38%203.38%200%200%200%2010.13%202.25H8.25m0%2012.75h7.5m-7.5%203H12M10.5%202.25H5.63c-.62%200-1.13.5-1.13%201.13v17.25c0%20.62.5%201.13%201.13%201.13h12.75c.62%200%201.13-.5%201.13-1.13V11.25a9%209%200%200%200-9-9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
#tya-mtop .tya-mtop-invoice .tya-lencana {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: #dc2626;
color: #ffffff;
font-size: 10px;
font-weight: 700;
line-height: 1;
box-shadow: 0 0 0 2px #ffffff;
}
.dark #tya-mtop .tya-mtop-invoice {
background: rgba(249, 115, 22, 0.14);
}
.dark #tya-mtop .tya-mtop-invoice::before {
background: #fb923c;
}
.dark #tya-mtop .tya-mtop-invoice .tya-lencana {
box-shadow: 0 0 0 2px #18181b;
}
}
@media (max-width: 767px) {
.tya-statistik.tya-slide > .tya-k {
position: relative !important;
height: 176px !important;
min-height: 176px !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 22px !important;
background: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #ea580c 100%) !important;
box-shadow: 0 10px 24px -10px rgba(234, 88, 12, 0.55) !important;
color: #ffffff !important;
isolation: isolate;
}
.tya-statistik.tya-slide > .tya-k::before,
.tya-statistik.tya-slide > .tya-k::after {
content: "";
position: absolute;
z-index: -1;
border-radius: 9999px;
pointer-events: none;
}
.tya-statistik.tya-slide > .tya-k::before {
width: 210px;
height: 210px;
top: -120px;
right: -40px;
background: radial-gradient(circle at 30% 70%, rgba(253, 186, 116, 0.55), rgba(253, 186, 116, 0) 70%);
}
.tya-statistik.tya-slide > .tya-k::after {
width: 420px;
height: 300px;
right: -190px;
bottom: -210px;
background: linear-gradient(160deg, rgba(251, 146, 60, 0.85), rgba(249, 115, 22, 0.2));
}
.tya-k *:not(.tya-mata):not(.tya-k-ikon):not(.tya-k-label):not(.tya-k-nilai):not(.tya-k-sub):not(.tya-k-chip):not(.tya-k-spark):not(.tya-k-titik) {
position: static !important;
transform: none !important;
}
.tya-k :is(p, span, div, a, h2, h3, h4, dd, dt, small, strong) {
color: inherit !important;
}
.tya-k > *:not(.tya-k-ikon):not(.tya-k-label):not(.tya-k-nilai):not(.tya-k-sub):not(.tya-k-chip):not(.tya-k-spark):not(.tya-k-titik) {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.tya-k .tya-k-ikon {
position: absolute !important;
top: 16px !important;
left: 16px !important;
width: 50px !important;
height: 50px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 15px !important;
background: linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%) !important;
box-shadow: 0 4px 10px rgba(124, 45, 18, 0.18) !important;
color: #ea580c !important;
}
.tya-k .tya-k-ikon svg {
width: 24px !important;
height: 24px !important;
color: #ea580c !important;
stroke: currentColor;
}
.tya-k .tya-k-label {
position: absolute !important;
top: 16px !important;
left: 78px !important;
right: 108px !important;
height: 50px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: #ffffff !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tya-k .tya-k-chip {
position: absolute !important;
top: 25px !important;
right: 16px !important;
left: auto !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
height: 30px !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: 9999px !important;
background: #fee2e2 !important;
color: #dc2626 !important;
font-size: 13px !important;
font-weight: 800 !important;
box-shadow: none !important;
}
.tya-k .tya-k-chip * {
color: inherit !important;
background: transparent !important;
}
.tya-k .tya-k-chip.tya-k-naik {
background: #dcfce7 !important;
color: #15803d !important;
}
.tya-k .tya-k-chip svg {
width: 14px !important;
height: 14px !important;
}
.tya-k .tya-k-titik {
position: absolute !important;
top: 32px !important;
right: 20px !important;
left: auto !important;
margin: 0 !important;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35) !important;
}
.tya-k .tya-k-nilai {
position: absolute !important;
top: 80px !important;
left: 16px !important;
right: 16px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
font-size: 30px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: -0.02em !important;
color: #ffffff !important;
white-space: nowrap !important;
}
.tya-k .tya-k-nilai .tya-mata {
width: 34px;
height: 34px;
margin-inline-start: 8px;
}
.tya-k .tya-k-nilai .tya-mata::before,
.tya-k .tya-k-nilai .tya-mata.tya-terbuka::before {
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.9) !important;
}
.tya-k .tya-k-sub {
position: absolute !important;
left: 16px !important;
right: 96px !important;
bottom: 16px !important;
margin: 0 !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: rgba(255, 255, 255, 0.9) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tya-k .tya-k-sub * {
color: inherit !important;
text-decoration-color: rgba(255, 255, 255, 0.5) !important;
}
.tya-k .tya-k-spark {
position: absolute !important;
right: 16px !important;
bottom: 16px !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
opacity: 1 !important;
color: #ffedd5 !important;
}
.tya-k .tya-k-spark,
.tya-k .tya-k-spark * {
background-color: transparent;
}
.tya-k .tya-k-spark > * {
background: linear-gradient(180deg, #ffffff, #fed7aa) !important;
opacity: 0.9 !important;
border-radius: 4px !important;
}
.tya-k .tya-k-spark svg,
.tya-k .tya-k-spark svg * {
color: #ffedd5 !important;
fill: currentColor;
background: none !important;
}
.dark .tya-statistik.tya-slide > .tya-k {
background: linear-gradient(135deg, #c2410c 0%, #9a3412 55%, #7c2d12 100%) !important;
box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8) !important;
}
.dark .tya-statistik.tya-slide > .tya-k::before {
background: radial-gradient(circle at 30% 70%, rgba(251, 146, 60, 0.35), rgba(251, 146, 60, 0) 70%);
}
.dark .tya-statistik.tya-slide > .tya-k::after {
background: linear-gradient(160deg, rgba(234, 88, 12, 0.55), rgba(154, 52, 18, 0.1));
}
.dark .tya-k .tya-k-ikon {
background: rgba(255, 255, 255, 0.14) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
.dark .tya-k .tya-k-ikon svg {
color: #fed7aa !important;
}
.dark .tya-k .tya-k-chip {
background: rgba(254, 226, 226, 0.16) !important;
color: #fecaca !important;
}
.dark .tya-k .tya-k-chip.tya-k-naik {
background: rgba(220, 252, 231, 0.16) !important;
color: #bbf7d0 !important;
}
.dark .tya-k .tya-k-spark > * {
background: linear-gradient(180deg, rgba(255, 237, 213, 0.9), rgba(253, 186, 116, 0.6)) !important;
}
}
@media (max-width: 767px) {
.tya-statistik.tya-slide > .tya-k {
height: 140px !important;
min-height: 140px !important;
border-radius: 20px !important;
}
.tya-k .tya-k-ikon {
top: 14px !important;
left: 14px !important;
width: 42px !important;
height: 42px !important;
border-radius: 13px !important;
}
.tya-k .tya-k-ikon svg {
width: 21px !important;
height: 21px !important;
}
.tya-k .tya-k-label {
top: 14px !important;
left: 66px !important;
right: 100px !important;
height: 42px !important;
font-size: 13.5px !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
align-content: center !important;
padding-top: 2px !important;
}
.tya-k .tya-k-chip {
top: 21px !important;
right: 14px !important;
height: 26px !important;
padding: 0 9px !important;
font-size: 12px !important;
}
.tya-k .tya-k-chip svg {
width: 12px !important;
height: 12px !important;
}
.tya-k .tya-k-titik {
top: 28px !important;
right: 18px !important;
}
.tya-k .tya-k-nilai {
top: 64px !important;
left: 14px !important;
right: 14px !important;
font-size: 25px !important;
}
.tya-k .tya-k-nilai .tya-mata {
width: 30px;
height: 30px;
margin-inline-start: 6px;
}
.tya-k .tya-k-nilai .tya-mata::before,
.tya-k .tya-k-nilai .tya-mata.tya-terbuka::before {
width: 21px;
height: 21px;
}
.tya-k .tya-k-sub {
left: 14px !important;
right: 84px !important;
bottom: 13px !important;
font-size: 11.5px !important;
}
#tya-mtop .tya-mtop-nama {
display: none !important;
}
#tya-mtop .tya-mtop-depan {
font-size: 15px;
font-weight: 700;
color: #18181b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark #tya-mtop .tya-mtop-depan {
color: #fafafa;
}
.tya-k .tya-k-spark {
right: 14px !important;
bottom: 13px !important;
transform: scale(0.85) !important;
transform-origin: bottom right !important;
}
}
@media (max-width: 767px) {
#tya-mtop .tya-mtop-foto.tya-ke-profil,
#tya-mtop .tya-mtop-teks.tya-ke-profil {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#tya-mtop .tya-mtop-foto.tya-ke-profil {
box-shadow: 0 0 0 2px #fed7aa;
}
.dark #tya-mtop .tya-mtop-foto.tya-ke-profil {
box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.45);
}
}
@media (max-width: 767px) {
#tya-titik {
margin: 8px 0 0 !important;
}
#tya-menu-utama {
margin-top: -10px !important;
margin-bottom: 4px !important;
}
#tya-menu-utama.tya-ringkas .tya-menu-grid > .tya-menu-item:nth-child(n+10):not(.tya-lainnya) {
display: none !important;
}
#tya-menu-utama .tya-lainnya .tya-menu-ikon {
background: #f4f4f5;
color: #52525b;
}
.dark #tya-menu-utama .tya-lainnya .tya-menu-ikon {
background: rgba(255, 255, 255, 0.08);
color: #d4d4d8;
}
}
html body .tya-ikon-excel.tya-ikon-excel:not(#tya-x),
html body .fi-header-actions-ctn .fi-btn.tya-ikon-excel:not(#tya-x) { background: #107c41 !important; color: #fff !important; border-color: #107c41 !important; --c-400: #107c41; --c-500: #107c41; --c-600: #0b5e31; }
html body .tya-ikon-excel.tya-ikon-excel:not(#tya-x):hover { background: #0b5e31 !important; }
html body .tya-ikon-pdf.tya-ikon-pdf:not(#tya-x),
html body .fi-header-actions-ctn .fi-btn.tya-ikon-pdf:not(#tya-x) { background: #e2231a !important; color: #fff !important; border-color: #e2231a !important; --c-400: #e2231a; --c-500: #e2231a; --c-600: #b71c15; }
html body .tya-ikon-pdf.tya-ikon-pdf:not(#tya-x):hover { background: #b71c15 !important; }
html body .tya-ikon-cetak.tya-ikon-cetak:not(#tya-x),
html body .fi-header-actions-ctn .fi-btn.tya-ikon-cetak:not(#tya-x) { background: #f97316 !important; color: #fff !important; border-color: #f97316 !important; }
html body .tya-ikon-cetak.tya-ikon-cetak:not(#tya-x):hover { background: #ea580c !important; }
:is(.tya-ikon-excel, .tya-ikon-pdf, .tya-ikon-cetak) > svg:not(.fi-loading-indicator),
:is(.tya-ikon-excel, .tya-ikon-pdf, .tya-ikon-cetak) > .fi-icon:not(.fi-loading-indicator) {
display: none !important;
}
:is(.tya-ikon-excel, .tya-ikon-pdf, .tya-ikon-cetak)::before {
content: "";
flex-shrink: 0;
width: 1.2rem;
height: 1.2rem;
background-color: currentColor;
-webkit-mask: var(--tya-logo) center / contain no-repeat;
mask: var(--tya-logo) center / contain no-repeat;
}
.tya-ikon-excel {
--tya-logo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13%202.5h6.5A2.5%202.5%200%200%201%2022%205v14a2.5%202.5%200%200%201-2.5%202.5H13v-2h6.5a.5.5%200%200%200%20.5-.5v-3h-5v-2h5v-3h-5v-2h5V5a.5.5%200%200%200-.5-.5H13z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2%204.2%2014%202v20L2%2019.8zm3.3%204.3%202.1%203.5-2.2%203.5h1.9l1.3-2.3%201.3%202.3h1.9L9.4%2012l2.1-3.5H9.7l-1.3%202.2-1.2-2.2z%22%2F%3E%3C%2Fsvg%3E");
}
.tya-ikon-pdf {
--tya-logo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%201.5h8.6L20%206.9V11h-2V8.2h-3.4a1%201%200%200%201-1-1V3.5H6V11H4V3.5a2%202%200%200%201%202-2zM15.6%203.9v2.3h2.3zM4%2019.5h2v1h12v-1h2v1a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M3.6%2011h16.8a1.6%201.6%200%200%201%201.6%201.6v5.3a1.6%201.6%200%200%201-1.6%201.6H3.6A1.6%201.6%200%200%201%202%2017.9v-5.3A1.6%201.6%200%200%201%203.6%2011zM4.6%2012.9h2.1c1.1%200%201.8.6%201.8%201.6s-.7%201.6-1.8%201.6h-.9v1.5H4.6zm1.2%201v1.3h.8c.4%200%20.7-.2.7-.65s-.3-.65-.7-.65zm3.7-1h2c1.6%200%202.5.9%202.5%202.35s-.9%202.35-2.5%202.35h-2zm1.2%201v2.7h.7c.9%200%201.4-.5%201.4-1.35s-.5-1.35-1.4-1.35zm4-1h3.3v1h-2.1v.9h1.9v1h-1.9v1.8h-1.2z%22%2F%3E%3C%2Fsvg%3E");
}
.tya-ikon-cetak {
--tya-logo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209V2h12v7M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2214%22%20width%3D%2212%22%20height%3D%228%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
}
@media (max-width: 639px) {
html body .fi-header {
width: auto !important;
padding-inline: 1.25rem !important;
}
html body .fi-header .fi-header-actions-ctn {
display: flex !important;
justify-content: center !important;
width: 100% !important;
grid-template-columns: none !important;
}
html body .fi-header .fi-header-actions-ctn > .fi-ac {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: .65rem !important;
width: auto !important;
max-width: 100% !important;
margin-inline: auto !important;
}
html body .fi-header .fi-header-actions-ctn .fi-ac > *:not(.tya-fab) {
width: auto !important;
flex: 0 0 auto !important;
}
html body .fi-header .fi-header-actions-ctn .fi-btn:not(.tya-fab) {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: 3rem !important;
min-width: 3rem !important;
height: 3rem !important;
min-height: 3rem !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 14px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important;
}
html body .fi-header .fi-header-actions-ctn .fi-btn:not(.tya-fab) .fi-btn-label {
display: none !important;
}
html body .fi-header .fi-header-actions-ctn .fi-btn:not(.tya-fab) > :is(svg, .fi-icon) {
width: 1.35rem !important;
height: 1.35rem !important;
margin: 0 !important;
}
html body .fi-header .fi-header-actions-ctn :is(.tya-ikon-excel, .tya-ikon-pdf, .tya-ikon-cetak)::before {
width: 1.45rem;
height: 1.45rem;
}
}
html body .fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x) {
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
padding: 0 !important;
gap: 0 !important;
border: 0 !important;
border-radius: 11px !important;
background: linear-gradient(135deg, #fb923c, #ea580c) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(249, 115, 22, .3) !important;
}
html body .fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x):hover {
background: linear-gradient(135deg, #f97316, #c2410c) !important;
}
html body .fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x) .fi-btn-label,
html body .fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x) > span:not(.fi-btn-badge-ctn):not(.fi-badge) {
display: none !important;
}
html body .fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x) > :is(svg, .fi-icon):not(.fi-loading-indicator) {
display: none !important;
}
html body .fi-ta-header-ctn .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x)::before {
content: "";
width: 19px;
height: 19px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204.5h17l-6.5%208v6l-4%202v-8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204.5h17l-6.5%208v6l-4%202v-8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.tya-mtop-kembali {
display: none;
}
@media (max-width: 767px) {
#tya-mtop .tya-mtop-kembali {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
margin-inline-end: -2px;
border: 0;
border-radius: 12px;
background: #fff7ed;
color: #ea580c;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#tya-mtop .tya-mtop-kembali:active {
transform: scale(.94);
}
#tya-mtop .tya-mtop-kembali::before {
content: "";
width: 22px;
height: 22px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.dark #tya-mtop .tya-mtop-kembali {
background: rgba(249, 115, 22, .14);
color: #fb923c;
}
}
@media (max-width: 639px) {
html body .fi-header > div:not(.fi-header-actions-ctn),
html body .fi-header .fi-header-heading,
html body .fi-header .fi-header-subheading,
html body .fi-breadcrumbs {
display: none !important;
}
html body .fi-header:not(:has(.fi-header-actions-ctn .fi-btn:not(.tya-fab-asli))),
html body .fi-header.tya-hdr-kosong {
display: none !important;
}
html body .fi-page:has(.tya-lap) .fi-header {
display: none !important;
}
html body .fi-page:has(.tya-lap) .fi-page-content {
padding-block-start: .75rem !important;
}
}
html body .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x):not(#tya-y) {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
padding: 0 !important;
gap: 0 !important;
border: 0 !important;
border-radius: 11px !important;
font-size: 0 !important;
line-height: 0 !important;
letter-spacing: 0 !important;
text-indent: 0 !important;
overflow: visible !important;
background: linear-gradient(135deg, #fb923c, #ea580c) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(249, 115, 22, .3) !important;
}
html body .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x):not(#tya-y) > :is(svg, .fi-icon):not(.fi-loading-indicator),
html body .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x):not(#tya-y) .fi-btn-label,
html body .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x):not(#tya-y) > span:not(.fi-btn-badge-ctn) {
display: none !important;
}
html body .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x):not(#tya-y)::before {
content: "";
display: block;
width: 19px;
height: 19px;
flex-shrink: 0;
background-color: #ffffff;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204.5h17l-6.5%208v6l-4%202v-8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204.5h17l-6.5%208v6l-4%202v-8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
html body .fi-ta-filters-trigger-action-ctn .fi-btn:not(#tya-x):not(#tya-y) .fi-btn-badge-ctn {
position: absolute !important;
top: -7px !important;
right: -7px !important;
font-size: 10px !important;
line-height: 1 !important;
}
html body .fi-ta-filters-trigger-action-ctn .fi-btn-badge-ctn.tya-badge-nol {
display: none !important;
}
@media (max-width: 767px) {
html body .tya-baris-cari:not(#tya-x) {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: .6rem !important;
width: 100% !important;
}
html body .tya-baris-cari:not(#tya-x) > :not(.fi-ta-filters-trigger-action-ctn) {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
}
html body .tya-baris-cari:not(#tya-x) > .fi-ta-filters-trigger-action-ctn {
flex: 0 0 auto !important;
order: 99 !important;
margin: 0 !important;
}
}
#tya-mtop .tya-mtop-judul {
display: none;
}
@media (max-width: 767px) {
body.tya-bukan-dasbor #tya-mtop > :not(.tya-mtop-kembali):not(.tya-mtop-judul) {
display: none !important;
}
body.tya-bukan-dasbor #tya-mtop {
min-height: 52px !important;
gap: 10px !important;
}
body.tya-bukan-dasbor #tya-mtop .tya-mtop-judul {
display: block;
flex: 1 1 auto;
min-width: 0;
font-size: 16px;
font-weight: 800;
color: #18181b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark body.tya-bukan-dasbor #tya-mtop .tya-mtop-judul,
body.tya-bukan-dasbor.dark #tya-mtop .tya-mtop-judul {
color: #fafafa;
}
body.tya-bukan-dasbor .tya-bnav {
display: none !important;
}
}
@media (max-width: 767px) {
html body .fi-ta-header-ctn:not(#tya-x) {
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"header header"
"toolbar trigger"
"panel panel" !important;
column-gap: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
html body .fi-ta-header-ctn:not(#tya-x) > .fi-ta-header-toolbar {
padding-inline-end: .65rem !important;
padding-block-end: .9rem !important;
border-block-end: 0 !important;
min-width: 0 !important;
align-self: end !important;
}
html body .fi-ta-header-ctn:not(#tya-x) .fi-ta-filters-above-content-ctn > .fi-ta-filters-trigger-action-ctn,
html body .fi-ta-header-ctn:not(#tya-x) > .fi-ta-filters-trigger-action-ctn {
grid-area: trigger !important;
justify-self: end !important;
align-self: end !important;
width: auto !important;
margin: 0 1.25rem calc(.9rem + 5px) 0 !important;
}
html body .fi-ta-header-ctn:not(#tya-x) .fi-ta-search-field {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin-inline-end: 0 !important;
}
html body .fi-topbar-ctn,
html body .fi-topbar,
html body .fi-topbar.tya-mtop-aktif {
border-bottom: 0 !important;
border-block-end: 0 !important;
box-shadow: none !important;
}
html body .fi-topbar-ctn::before,
html body .fi-topbar-ctn::after,
html body .fi-topbar::before,
html body .fi-topbar::after {
content: none !important;
display: none !important;
}
body.tya-bukan-dasbor .tya-bnav,
body.tya-bukan-dasbor .tya-bnav-v3 {
display: none !important;
}
body.tya-bukan-dasbor #tya-mtop .tya-mtop-judul {
text-align: center !important;
padding-inline-end: 50px !important;
}
}
@media (max-width: 767px) {
html,
body,
html body .fi-layout,
html body .fi-main-ctn,
html body .fi-main {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
html body .fi-layout::-webkit-scrollbar,
html body .fi-main-ctn::-webkit-scrollbar,
html body .fi-main::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
background: transparent !important;
}
html body .fi-main:not(#tya-x) {
padding-inline: 12px !important;
margin-inline: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body .fi-main-ctn:not(#tya-x) {
margin-inline: 0 !important;
padding-inline: 0 !important;
width: 100% !important;
max-width: 100vw !important;
}
html body .fi-page:not(#tya-x) {
padding-inline: 0 !important;
}
}
:root {
--tya-i-tag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2011.6V4.5a1%201%200%200%201%201-1h7.1a1%201%200%200%201%20.7.3l8.2%208.2a1%201%200%200%201%200%201.4l-7.1%207.1a1%201%200%200%201-1.4%200l-8.2-8.2a1%201%200%200%201-.3-.7z%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E");
--tya-i-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5M6%2011l6-6%206%206%22%2F%3E%3C%2Fsvg%3E");
--tya-i-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M6%2013l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
--tya-i-router: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%2218%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2016.5h.01M11%2016.5h.01M8.5%209.5a5%205%200%200%201%207%200M6%207a8.5%208.5%200%200%201%2012%200%22%2F%3E%3C%2Fsvg%3E");
--tya-i-store: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209.5%205.5%204h13L20%209.5M4%209.5v10.5h16V9.5M4%209.5c0%201.4%201.1%202.5%202.7%202.5S9.3%2010.9%209.3%209.5c0%201.4%201.2%202.5%202.7%202.5s2.7-1.1%202.7-2.5c0%201.4%201.1%202.5%202.6%202.5S20%2010.9%2020%209.5M10%2020v-4.5h4V20%22%2F%3E%3C%2Fsvg%3E");
--tya-i-percent: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%205%205%2019%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E");
--tya-i-save: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203.5h11l3.5%203.5v12a1.5%201.5%200%200%201-1.5%201.5H6a1.5%201.5%200%200%201-1.5-1.5V5A1.5%201.5%200%200%201%206%203.5z%22%2F%3E%3Cpath%20d%3D%22M8%203.5v5h7v-5M8%2020.5v-6h8v6%22%2F%3E%3C%2Fsvg%3E");
--tya-i-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4.4%203.6-7%208-7s8%202.6%208%207%22%2F%3E%3C%2Fsvg%3E");
--tya-i-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3.5%206.5%2012%2013l8.5-6.5%22%2F%3E%3C%2Fsvg%3E");
--tya-i-lock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224.5%22%20y%3D%2210.5%22%20width%3D%2215%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010.5V7a4%204%200%200%201%208%200v3.5%22%2F%3E%3C%2Fsvg%3E");
--tya-i-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203.5h3.2l1.6%204.2-2.1%201.3a11%2011%200%200%200%205.3%205.3l1.3-2.1%204.2%201.6V17a2.5%202.5%200%200%201-2.5%202.5A15.5%2015.5%200%200%201%202.5%206%202.5%202.5%200%200%201%205%203.5z%22%2F%3E%3C%2Fsvg%3E");
--tya-i-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-6.2-7-11.5a7%207%200%201%201%2014%200C19%2014.8%2012%2021%2012%2021z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
--tya-i-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
--tya-i-building: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V5a1.5%201.5%200%200%201%201.5-1.5h8A1.5%201.5%200%200%201%2015%205v16M15%209h3.5A1.5%201.5%200%200%201%2020%2010.5V21M3%2021h18M8%207.5h3M8%2011h3M8%2014.5h3%22%2F%3E%3C%2Fsvg%3E");
--tya-i-globe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c2.5%202.6%203.8%205.6%203.8%209s-1.3%206.4-3.8%209c-2.5-2.6-3.8-5.6-3.8-9S9.5%205.6%2012%203z%22%2F%3E%3C%2Fsvg%3E");
--tya-i-server: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%224%22%20width%3D%2217%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%223.5%22%20y%3D%2213%22%20width%3D%2217%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M7.5%207.5h.01M7.5%2016.5h.01%22%2F%3E%3C%2Fsvg%3E");
--tya-i-shield: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%204.5%206v5.5c0%204.6%203.2%208.4%207.5%209.5%204.3-1.1%207.5-4.9%207.5-9.5V6z%22%2F%3E%3C%2Fsvg%3E");
--tya-i-key: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m10.8%2012.2%208.7-8.7M16.5%206.5l2.5%202.5M14%209l2%202%22%2F%3E%3C%2Fsvg%3E");
--tya-i-link: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2014a4%204%200%200%200%205.7%200l3-3a4%204%200%200%200-5.7-5.7l-1%201M14%2010a4%204%200%200%200-5.7%200l-3%203a4%204%200%200%200%205.7%205.7l1-1%22%2F%3E%3C%2Fsvg%3E");
--tya-i-money: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%226%22%20width%3D%2219%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M6%209.5v.01M18%2014.5v.01%22%2F%3E%3C%2Fsvg%3E");
--tya-i-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22%2F%3E%3C%2Fsvg%3E");
--tya-i-hash: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%209h14M4%2015h14M10%204%208%2020M16%204l-2%2016%22%2F%3E%3C%2Fsvg%3E");
--tya-i-send: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%203%2010.5%2013.5M21%203l-6.5%2018-4-7.5L3%209.5z%22%2F%3E%3C%2Fsvg%3E");
--tya-i-message: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%22%2F%3E%3C%2Fsvg%3E");
--tya-i-text: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2011h16M4%2016h10%22%2F%3E%3C%2Fsvg%3E");
--tya-i-list: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%206.5h12M8.5%2012h12M8.5%2017.5h12M4%206.5h.01M4%2012h.01M4%2017.5h.01%22%2F%3E%3C%2Fsvg%3E");
--tya-i-pencil: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.9%204.5l2.6%202.6M7.5%2019.5h-3v-3L16.1%204.9a1.5%201.5%200%200%201%202.1%200l1%201a1.5%201.5%200%200%201%200%202.1z%22%2F%3E%3C%2Fsvg%3E");
--tya-i-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%229.5%22%20r%3D%221.8%22%2F%3E%3Cpath%20d%3D%22m21%2016-5-5L5%2020%22%2F%3E%3C%2Fsvg%3E");
--tya-i-database: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226%22%20rx%3D%227%22%20ry%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%206v6c0%201.7%203.1%203%207%203s7-1.3%207-3V6M5%2012v6c0%201.7%203.1%203%207%203s7-1.3%207-3v-6%22%2F%3E%3C%2Fsvg%3E");
--tya-i-receipt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12v18l-3-2-3%202-3-2-3%202zM9%208h6M9%2012h6%22%2F%3E%3C%2Fsvg%3E");
--tya-i-ban: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m5.6%205.6%2012.8%2012.8%22%2F%3E%3C%2Fsvg%3E");
--tya-i-gear: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.6%201.6%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.6%201.6%200%200%200-1.8-.3%201.6%201.6%200%200%200-1%201.5V21a2%202%200%201%201-4%200v-.1a1.6%201.6%200%200%200-1-1.5%201.6%201.6%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.6%201.6%200%200%200%20.3-1.8%201.6%201.6%200%200%200-1.5-1H3a2%202%200%201%201%200-4h.1a1.6%201.6%200%200%200%201.5-1%201.6%201.6%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.6%201.6%200%200%200%201.8.3H9a1.6%201.6%200%200%200%201-1.5V3a2%202%200%201%201%204%200v.1a1.6%201.6%200%200%200%201%201.5%201.6%201.6%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.6%201.6%200%200%200-.3%201.8V9a1.6%201.6%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.6%201.6%200%200%200-1.5%201z%22%2F%3E%3C%2Fsvg%3E");
--tya-i-wifi: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.3%2015.7a5.3%205.3%200%200%201%207.4%200M5.1%2012.5a9.8%209.8%200%200%201%2013.8%200M2%209.3c5.6-5.6%2014.4-5.6%2020%200M12%2019h.01%22%2F%3E%3C%2Fsvg%3E");
}
[data-tya-ikon="user"] { --tya-ikon: var(--tya-i-user); }
[data-tya-ikon="mail"] { --tya-ikon: var(--tya-i-mail); }
[data-tya-ikon="lock"] { --tya-ikon: var(--tya-i-lock); }
[data-tya-ikon="phone"] { --tya-ikon: var(--tya-i-phone); }
[data-tya-ikon="pin"] { --tya-ikon: var(--tya-i-pin); }
[data-tya-ikon="clock"] { --tya-ikon: var(--tya-i-clock); }
[data-tya-ikon="building"] { --tya-ikon: var(--tya-i-building); }
[data-tya-ikon="globe"] { --tya-ikon: var(--tya-i-globe); }
[data-tya-ikon="server"] { --tya-ikon: var(--tya-i-server); }
[data-tya-ikon="shield"] { --tya-ikon: var(--tya-i-shield); }
[data-tya-ikon="key"] { --tya-ikon: var(--tya-i-key); }
[data-tya-ikon="link"] { --tya-ikon: var(--tya-i-link); }
[data-tya-ikon="money"] { --tya-ikon: var(--tya-i-money); }
[data-tya-ikon="calendar"] { --tya-ikon: var(--tya-i-calendar); }
[data-tya-ikon="hash"] { --tya-ikon: var(--tya-i-hash); }
[data-tya-ikon="send"] { --tya-ikon: var(--tya-i-send); }
[data-tya-ikon="message"] { --tya-ikon: var(--tya-i-message); }
[data-tya-ikon="text"] { --tya-ikon: var(--tya-i-text); }
[data-tya-ikon="list"] { --tya-ikon: var(--tya-i-list); }
[data-tya-ikon="pencil"] { --tya-ikon: var(--tya-i-pencil); }
[data-tya-ikon="image"] { --tya-ikon: var(--tya-i-image); }
[data-tya-ikon="database"] { --tya-ikon: var(--tya-i-database); }
[data-tya-ikon="receipt"] { --tya-ikon: var(--tya-i-receipt); }
[data-tya-ikon="ban"] { --tya-ikon: var(--tya-i-ban); }
[data-tya-ikon="gear"] { --tya-ikon: var(--tya-i-gear); }
[data-tya-ikon="wifi"] { --tya-ikon: var(--tya-i-wifi); }
.fi-section-header[data-tya-ikon="user"] { --tya-ikon: var(--tya-i-user); }
.fi-section-header[data-tya-ikon="mail"] { --tya-ikon: var(--tya-i-mail); }
.fi-section-header[data-tya-ikon="lock"] { --tya-ikon: var(--tya-i-lock); }
.fi-section-header[data-tya-ikon="phone"] { --tya-ikon: var(--tya-i-phone); }
.fi-section-header[data-tya-ikon="pin"] { --tya-ikon: var(--tya-i-pin); }
.fi-section-header[data-tya-ikon="clock"] { --tya-ikon: var(--tya-i-clock); }
.fi-section-header[data-tya-ikon="building"] { --tya-ikon: var(--tya-i-building); }
.fi-section-header[data-tya-ikon="globe"] { --tya-ikon: var(--tya-i-globe); }
.fi-section-header[data-tya-ikon="server"] { --tya-ikon: var(--tya-i-server); }
.fi-section-header[data-tya-ikon="shield"] { --tya-ikon: var(--tya-i-shield); }
.fi-section-header[data-tya-ikon="key"] { --tya-ikon: var(--tya-i-key); }
.fi-section-header[data-tya-ikon="link"] { --tya-ikon: var(--tya-i-link); }
.fi-section-header[data-tya-ikon="money"] { --tya-ikon: var(--tya-i-money); }
.fi-section-header[data-tya-ikon="calendar"] { --tya-ikon: var(--tya-i-calendar); }
.fi-section-header[data-tya-ikon="hash"] { --tya-ikon: var(--tya-i-hash); }
.fi-section-header[data-tya-ikon="send"] { --tya-ikon: var(--tya-i-send); }
.fi-section-header[data-tya-ikon="message"] { --tya-ikon: var(--tya-i-message); }
.fi-section-header[data-tya-ikon="text"] { --tya-ikon: var(--tya-i-text); }
.fi-section-header[data-tya-ikon="list"] { --tya-ikon: var(--tya-i-list); }
.fi-section-header[data-tya-ikon="pencil"] { --tya-ikon: var(--tya-i-pencil); }
.fi-section-header[data-tya-ikon="image"] { --tya-ikon: var(--tya-i-image); }
.fi-section-header[data-tya-ikon="database"] { --tya-ikon: var(--tya-i-database); }
.fi-section-header[data-tya-ikon="receipt"] { --tya-ikon: var(--tya-i-receipt); }
.fi-section-header[data-tya-ikon="ban"] { --tya-ikon: var(--tya-i-ban); }
.fi-section-header[data-tya-ikon="gear"] { --tya-ikon: var(--tya-i-gear); }
.fi-section-header[data-tya-ikon="wifi"] { --tya-ikon: var(--tya-i-wifi); }
[data-tya-ikon="tag"] { --tya-ikon: var(--tya-i-tag); }
[data-tya-ikon="up"] { --tya-ikon: var(--tya-i-up); }
[data-tya-ikon="down"] { --tya-ikon: var(--tya-i-down); }
[data-tya-ikon="router"] { --tya-ikon: var(--tya-i-router); }
[data-tya-ikon="store"] { --tya-ikon: var(--tya-i-store); }
[data-tya-ikon="percent"] { --tya-ikon: var(--tya-i-percent); }
[data-tya-ikon="save"] { --tya-ikon: var(--tya-i-save); }
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x),
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field-wrp:not(#tya-x) {
padding-inline-start: 0 !important;
min-height: 0 !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x)::before,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x)::after,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field-wrp:not(#tya-x)::before,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field-wrp:not(#tya-x)::after {
content: none !important;
display: none !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp-prefix:not(.fi-input-wrp-prefix-has-label) {
width: auto !important;
min-width: 0 !important;
padding-inline: .8rem .7rem !important;
border-inline-end: 1px solid #e4e4e7 !important;
align-self: stretch !important;
display: flex !important;
align-items: center !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp-prefix > .fi-icon:not(.fi-loading-indicator) {
position: static !important;
inset: auto !important;
transform: none !important;
width: 18px !important;
height: 18px !important;
padding: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: #71717a !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp {
position: relative !important;
min-height: 42px !important;
border-radius: 10px !important;
background: #ffffff !important;
box-shadow: none !important;
border: 1px solid #e4e4e7 !important;
overflow: hidden !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp:focus-within {
border-color: #f97316 !important;
box-shadow: 0 0 0 3px rgba(249, 115, 22, .14) !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field[data-tya-ikon]:not(#tya-x) .fi-input-wrp:not(:has(.fi-input-wrp-prefix > .fi-icon))::before {
content: "";
flex: 0 0 auto;
align-self: center;
width: 18px;
height: 18px;
margin-inline: .8rem .7rem;
background-color: #71717a;
-webkit-mask: var(--tya-ikon) center / contain no-repeat;
mask: var(--tya-ikon) center / contain no-repeat;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field[data-tya-ikon]:not(#tya-x) .fi-input-wrp:not(:has(.fi-input-wrp-prefix > .fi-icon)) > .fi-input-wrp-content-ctn {
border-inline-start: 1px solid #e4e4e7 !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field[data-tya-ikon]:not(#tya-x) .fi-input-wrp:has(textarea)::before {
align-self: flex-start;
margin-top: .8rem;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp :is(.fi-input, .fi-select-input, select, textarea) {
min-height: 40px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
background: transparent !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp textarea {
padding-block: .7rem !important;
width: 100% !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp > .fi-input-wrp-content-ctn {
flex: 1 1 auto !important;
min-width: 0 !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) :is(.fi-fo-field-label, .fi-fo-field-wrp-label) {
font-size: 12.5px !important;
font-weight: 600 !important;
color: #3f3f46 !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-fo-field-label-content {
color: inherit !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-sc.fi-grid,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-component-ctn {
row-gap: 1rem !important;
column-gap: 1.25rem !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(#tya-x) {
border-radius: 16px !important;
background: #ffffff !important;
border: 1px solid #ececef !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
overflow: hidden !important;
--tw-ring-shadow: 0 0 #0000;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header {
display: flex !important;
align-items: flex-start !important;
gap: .85rem !important;
padding: 1.15rem 1.35rem .35rem !important;
border: 0 !important;
background: transparent !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header::before {
content: "";
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 11px;
background: #fff7ed;
box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .12);
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header {
position: relative !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header::after {
content: "";
position: absolute;
left: calc(1.35rem + 10px);
top: calc(1.15rem + 10px);
width: 20px;
height: 20px;
background-color: #ea580c;
-webkit-mask: var(--tya-ikon, var(--tya-i-gear)) center / contain no-repeat;
mask: var(--tya-ikon, var(--tya-i-gear)) center / contain no-repeat;
pointer-events: none;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header:has(> .fi-icon)::before,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header:has(> .fi-icon)::after {
display: none !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header > .fi-icon {
flex: 0 0 auto !important;
box-sizing: border-box !important;
width: 40px !important;
height: 40px !important;
padding: 10px !important;
margin: 0 !important;
border-radius: 11px !important;
background: #fff7ed !important;
box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .12) !important;
color: #ea580c !important;
}
.dark :is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header > .fi-icon {
background: rgba(249, 115, 22, .14) !important;
box-shadow: none !important;
color: #fb923c !important;
}
.fi-modal .fi-modal-content .fi-section:not(#tya-x) {
border-radius: 14px !important;
background: #ffffff !important;
border: 1px solid #ececef !important;
box-shadow: none !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
--tw-ring-shadow: 0 0 #0000;
}
.fi-modal .fi-modal-content .fi-section:not(#tya-x)::before,
.fi-modal .fi-modal-content .fi-section:not(#tya-x)::after {
content: none !important;
display: none !important;
}
.dark .fi-modal .fi-modal-content .fi-section:not(#tya-x) {
background: #1c1c20 !important;
border-color: rgba(255, 255, 255, .08) !important;
}
.fi-modal .fi-modal-content .fi-section:not(#tya-x) > .fi-section-content-ctn {
display: block !important;
}
.fi-modal .fi-modal-content .fi-sc:has(> .fi-grid-col > .fi-section),
.fi-modal .fi-modal-content .fi-sc:has(> .fi-section) {
row-gap: 1rem !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) .fi-section-header-heading {
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #18181b !important;
line-height: 1.3 !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) .fi-section-header-description {
font-size: 12px !important;
color: #71717a !important;
margin-top: .15rem !important;
line-height: 1.45 !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-content-ctn {
border-top: 0 !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-content-ctn > .fi-section-content {
padding: 1rem 1.35rem 1.4rem !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) + .fi-section,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-sc > .fi-grid-col + .fi-grid-col > .fi-section {
margin-top: 0 !important;
}
body.tya-hal-pengaturan .fi-main .tya-aksi-kanan:not(#tya-x) {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
align-items: center !important;
gap: .6rem !important;
width: 100% !important;
}
body.tya-hal-pengaturan .fi-main .tya-btn-simpan:not(#tya-x) {
display: inline-flex !important;
align-items: center !important;
gap: .5rem !important;
border-radius: 10px !important;
min-height: 2.65rem !important;
padding-inline: 1.2rem !important;
font-weight: 700 !important;
box-shadow: 0 4px 12px rgba(249, 115, 22, .28) !important;
}
body.tya-hal-pengaturan .fi-main .tya-btn-simpan:not(#tya-x):not(:has(> svg:not(.fi-loading-indicator), > .fi-icon:not(.fi-loading-indicator)))::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: var(--tya-i-save) center / contain no-repeat;
mask: var(--tya-i-save) center / contain no-repeat;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-form-actions .fi-btn,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-sc-actions .fi-btn,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) form > .fi-ac .fi-btn {
border-radius: 10px !important;
min-height: 2.6rem !important;
padding-inline: 1.2rem !important;
font-weight: 700 !important;
}
@media (max-width: 767px) {
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header {
padding: 1rem 1rem .25rem !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header::after {
left: calc(1rem + 10px);
top: calc(1rem + 10px);
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-content-ctn > .fi-section-content {
padding: .9rem 1rem 1.15rem !important;
}
}
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(#tya-x) {
background: #1c1c20 !important;
border-color: rgba(255, 255, 255, .08) !important;
}
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header::before {
background-color: rgba(249, 115, 22, .14);
box-shadow: none;
}
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-section:not(#tya-x) > .fi-section-header::after {
background-color: #fb923c;
}
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-section:not(#tya-x) .fi-section-header-heading {
color: #fafafa !important;
}
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-section:not(#tya-x) .fi-section-header-description {
color: #a1a1aa !important;
}
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp {
background: #141417 !important;
border-color: rgba(255, 255, 255, .1) !important;
}
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-fo-field[data-tya-ikon]:not(#tya-x) .fi-input-wrp::before {
background-color: #a1a1aa;
}
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-fo-field[data-tya-ikon]:not(#tya-x) .fi-input-wrp:not(:has(.fi-input-wrp-prefix > .fi-icon)) > .fi-input-wrp-content-ctn,
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp-prefix:not(.fi-input-wrp-prefix-has-label) {
border-color: rgba(255, 255, 255, .1) !important;
}
.dark :is(:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content), .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) :is(.fi-fo-field-label, .fi-fo-field-wrp-label) {
color: #d4d4d8 !important;
}
body.tya-hal-pengaturan .fi-main .tya-aksi-kanan:not(#tya-x):not(#tya-y) {
margin-top: 1.5rem !important;
padding-top: .25rem !important;
}
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-header {
display: flex !important;
align-items: flex-start !important;
gap: 0 !important;
margin: 0 0 1rem !important;
padding: .6rem 0 1rem !important;
border: 0 !important;
border-bottom: 1px solid #f0f0f2 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
list-style: none !important;
}
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-header > .fi-sc-wizard-header-step,
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-header > .fi-sc-wizard-header-step:last-child {
display: flex !important;
justify-content: center !important;
flex: 1 1 0 !important;
min-width: 0 !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-header > .fi-sc-wizard-header-step:not(:last-child)::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: 6px !important;
left: 50% !important;
right: -50% !important;
height: 3px !important;
margin: 0 !important;
border-radius: 3px !important;
background: #e4e4e7 !important;
z-index: 0 !important;
}
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-header > .fi-sc-wizard-header-step.fi-completed:not(:last-child)::after {
background: #f97316 !important;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-separator {
display: none !important;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-btn {
position: relative !important;
z-index: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: .55rem !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
cursor: pointer;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-icon-ctn {
box-sizing: border-box !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border: 2.5px solid #3f3f46 !important;
border-radius: 9999px !important;
background: #ffffff !important;
box-shadow: none !important;
transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-icon-ctn > * {
display: none !important;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
border-color: #f97316 !important;
background: #f97316 !important;
box-shadow: 0 0 0 5px rgba(249, 115, 22, .2) !important;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {
border-color: #f97316 !important;
background: #f97316 !important;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-text {
display: block !important;
justify-items: center !important;
align-self: stretch !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
text-align: center !important;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-label {
display: block !important;
width: 100% !important;
font-size: 11.5px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
color: #52525b !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label {
color: #ea580c !important;
font-weight: 700 !important;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-description {
display: none !important;
}
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-step.fi-active {
margin-top: 0 !important;
padding: 0 !important;
}
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-step.fi-active:not(:has(.fi-section)) {
padding: 1.1rem 1.25rem 1.25rem !important;
border: 1px solid #ececef !important;
border-radius: 14px !important;
background: #ffffff !important;
}
.tya-wiz-judul {
display: flex;
align-items: flex-start;
gap: .8rem;
margin: 0 0 1.1rem;
}
.tya-wiz-judul > i {
position: relative;
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 11px;
background: #fff7ed;
box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .12);
}
.tya-wiz-judul > i::after {
content: "";
position: absolute;
inset: 10px;
background-color: #ea580c;
-webkit-mask: var(--tya-ikon, var(--tya-i-tag)) center / contain no-repeat;
mask: var(--tya-ikon, var(--tya-i-tag)) center / contain no-repeat;
}
.tya-wiz-judul b {
display: block;
font-size: 15px;
font-weight: 800;
color: #18181b;
line-height: 1.3;
}
.tya-wiz-judul small {
display: block;
margin-top: .15rem;
font-size: 12px;
color: #71717a;
line-height: 1.45;
}
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-footer {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: .75rem !important;
margin-top: 1.1rem !important;
padding: .9rem 0 .15rem !important;
border-top: 1px solid #f0f0f2 !important;
}
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-footer > :has(.tya-wiz-maju) {
margin-inline-start: auto !important;
}
.fi-modal .fi-modal-footer .fi-btn {
border-radius: 11px !important;
min-height: 2.6rem !important;
padding-inline: 1.15rem !important;
font-weight: 700 !important;
gap: .5rem !important;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-maju:not(#tya-y),
.fi-sc-wizard:not(#tya-x) .tya-wiz-mundur:not(#tya-y) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 9999px !important;
font-size: 0 !important;
line-height: 0 !important;
width: auto !important;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-maju:not(#tya-y) .fi-btn-label,
.fi-sc-wizard:not(#tya-x) .tya-wiz-mundur:not(#tya-y) .fi-btn-label,
.fi-sc-wizard:not(#tya-x) .tya-wiz-maju:not(#tya-y) > :is(svg, .fi-icon):not(.fi-loading-indicator),
.fi-sc-wizard:not(#tya-x) .tya-wiz-mundur:not(#tya-y) > :is(svg, .fi-icon):not(.fi-loading-indicator) {
display: none !important;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-maju:not(#tya-y) {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
background: linear-gradient(135deg, #fb923c, #ea580c) !important;
border: 0 !important;
color: #ffffff !important;
box-shadow: 0 8px 20px rgba(249, 115, 22, .35) !important;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-maju:not(#tya-y):hover {
background: linear-gradient(135deg, #f97316, #c2410c) !important;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-mundur:not(#tya-y) {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
background: #ffffff !important;
color: #27272a !important;
border: 1.5px solid #e4e4e7 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .05) !important;
}
.fi-modal .fi-modal-footer .tya-btn-batal:not(#tya-y) {
background: #ffffff !important;
color: #27272a !important;
border: 1px solid #e4e4e7 !important;
box-shadow: none !important;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-maju:not(#tya-y)::after,
.fi-sc-wizard:not(#tya-x) .tya-wiz-mundur:not(#tya-y)::before,
.fi-modal .fi-modal-footer .tya-btn-batal:not(#tya-y)::before {
content: "";
flex: 0 0 auto;
width: 17px;
height: 17px;
background-color: currentColor;
-webkit-mask: var(--tya-panah) center / contain no-repeat;
mask: var(--tya-panah) center / contain no-repeat;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-maju:not(#tya-y)::after {
width: 20px;
height: 20px;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-mundur:not(#tya-y)::before {
width: 20px;
height: 20px;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-maju:not(#tya-y) {
--tya-panah: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-mundur:not(#tya-y) {
--tya-panah: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E");
}
.fi-modal .fi-modal-footer .tya-btn-batal:not(#tya-y) .fi-btn-label {
color: inherit !important;
display: inline !important;
}
.fi-modal .fi-modal-footer .fi-modal-footer-actions:has(.tya-btn-batal) {
display: flex !important;
flex-direction: row !important;
justify-content: flex-end !important;
gap: .6rem !important;
}
.fi-modal .fi-modal-footer .fi-modal-footer-actions > :has(> .tya-btn-batal),
.fi-modal .fi-modal-footer .tya-btn-batal:not(#tya-y) {
order: -1 !important;
}
.fi-modal .fi-modal-footer .tya-btn-batal:not(#tya-y) {
--tya-panah: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M9%2014L4%209l5-5M4%209h10.5a5.5%205.5%200%200%201%200%2011H11%22%2F%3E%3C%2Fsvg%3E");
display: inline-flex !important;
align-items: center !important;
}
.fi-modal .fi-modal-footer .tya-btn-batal:not(#tya-y) > :is(svg, .fi-icon):not(.fi-loading-indicator),
.fi-modal .fi-modal-footer .tya-btn-simpan2:not(#tya-y) > :is(svg, .fi-icon):not(.fi-loading-indicator) {
display: none !important;
}
.fi-modal .fi-modal-footer .tya-btn-simpan2:not(#tya-y) {
display: inline-flex !important;
align-items: center !important;
gap: .5rem !important;
}
.fi-modal .fi-modal-footer .tya-btn-simpan2:not(#tya-y)::before {
content: "";
flex: 0 0 auto;
width: 17px;
height: 17px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203.5h11l3.5%203.5v12a1.5%201.5%200%200%201-1.5%201.5H6a1.5%201.5%200%200%201-1.5-1.5V5A1.5%201.5%200%200%201%206%203.5z%22%2F%3E%3Cpath%20d%3D%22M8%203.5v5h7v-5M8%2020.5v-6h8v6%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203.5h11l3.5%203.5v12a1.5%201.5%200%200%201-1.5%201.5H6a1.5%201.5%200%200%201-1.5-1.5V5A1.5%201.5%200%200%201%206%203.5z%22%2F%3E%3Cpath%20d%3D%22M8%203.5v5h7v-5M8%2020.5v-6h8v6%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.fi-modal-window.tya-wiz-popup:not(#tya-x) {
position: relative !important;
}
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-modal-content,
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-modal-content .fi-sc,
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-modal-content .fi-grid-col,
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-sc-wizard {
position: static !important;
}
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-sc-wizard > .fi-sc-wizard-footer {
position: absolute !important;
left: auto !important;
right: 1.25rem !important;
bottom: var(--tya-kaki, 14px) !important;
z-index: 5 !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
gap: .55rem !important;
justify-content: flex-start !important;
}
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-sc-wizard > .fi-sc-wizard-footer > :has(.tya-wiz-maju) {
margin-inline-start: 0 !important;
}
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-modal-footer {
padding-inline-end: calc(1.25rem + 46px * 2 + .55rem + 1rem) !important;
}
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-modal-footer .fi-modal-footer-actions {
width: 100% !important;
justify-content: flex-start !important;
}
.tya-kartu-aktif:not(#tya-x) {
position: relative !important;
}
.tya-kartu-aktif:not(#tya-x) .fi-sc,
.tya-kartu-aktif:not(#tya-x) .fi-grid-col,
.tya-kartu-aktif:not(#tya-x) .fi-section-content-ctn,
.tya-kartu-aktif:not(#tya-x) .fi-section-content {
position: static !important;
}
.tya-aktif-pojok:not(#tya-x) {
position: absolute !important;
top: var(--tya-aktif-atas, 1.2rem) !important;
right: 1.25rem !important;
left: auto !important;
z-index: 3 !important;
width: max-content !important;
max-width: 55% !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: .5rem !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.tya-aktif-pojok:not(#tya-x) > *,
.tya-aktif-pojok:not(#tya-x) .fi-fo-field-label-col {
width: auto !important;
min-width: 0 !important;
}
.tya-aktif-pojok:not(#tya-x) .fi-fo-field-label-ctn {
justify-content: flex-end !important;
flex-direction: row !important;
align-items: center !important;
gap: .55rem !important;
}
.fi-grid-col.tya-aktif-kolom:not(#tya-x) {
display: contents !important;
}
.tya-kartu-aktif:not(#tya-x) > .fi-section-header,
.tya-kartu-aktif:not(#tya-x) > .tya-wiz-judul {
padding-inline-end: 7.5rem !important;
}
@media (max-width: 767px) {
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-header {
padding: .5rem 0 .85rem !important;
}
.fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-label {
font-size: 10px !important;
white-space: normal !important;
overflow: visible !important;
}
.fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-step.fi-active:not(:has(.fi-section)) {
padding: .95rem 1rem 1.05rem !important;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-maju:not(#tya-y) {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
}
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-sc-wizard > .fi-sc-wizard-footer {
left: auto !important;
right: 1rem !important;
gap: .45rem !important;
}
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-modal-footer {
padding-inline-end: calc(1rem + 44px * 2 + .45rem + .75rem) !important;
}
.fi-modal-window.tya-wiz-popup:not(#tya-x) .fi-modal-footer .fi-btn {
padding-inline: .8rem !important;
}
.tya-aktif-pojok:not(#tya-x) {
right: 1rem !important;
}
.fi-sc-wizard:not(#tya-x) .tya-wiz-mundur:not(#tya-y) {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
}
}
.dark .fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-header,
.dark .fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-footer {
border-color: rgba(255, 255, 255, .08) !important;
}
.dark .fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-header > .fi-sc-wizard-header-step:not(:last-child)::after {
background: rgba(255, 255, 255, .12) !important;
}
.dark .fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-header > .fi-sc-wizard-header-step.fi-completed:not(:last-child)::after {
background: #f97316 !important;
}
.dark .fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-icon-ctn {
background: #18181b !important;
border-color: #a1a1aa !important;
}
.dark .fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn,
.dark .fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {
background: #f97316 !important;
border-color: #f97316 !important;
}
.dark .fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step-label {
color: #d4d4d8 !important;
}
.dark .fi-sc-wizard:not(#tya-x) .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label {
color: #fb923c !important;
}
.dark .fi-sc-wizard:not(#tya-x) > .fi-sc-wizard-step.fi-active:not(:has(.fi-section)) {
background: #1c1c20 !important;
border-color: rgba(255, 255, 255, .08) !important;
}
.dark .tya-wiz-judul > i {
background: rgba(249, 115, 22, .14);
box-shadow: none;
}
.dark .tya-wiz-judul > i::after {
background-color: #fb923c;
}
.dark .tya-wiz-judul b {
color: #fafafa;
}
.dark .tya-wiz-judul small {
color: #a1a1aa;
}
.dark .fi-sc-wizard:not(#tya-x) .tya-wiz-mundur:not(#tya-y),
.dark .fi-modal .fi-modal-footer .tya-btn-batal:not(#tya-y) {
background: transparent !important;
color: #e4e4e7 !important;
border-color: rgba(255, 255, 255, .14) !important;
}
@media (max-width: 767px) {
body.tya-oranye {
--tya-oranye: linear-gradient(90deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
}
body.tya-oranye .fi-topbar-ctn:not(#tya-x) {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.tya-oranye .fi-topbar-ctn:not(#tya-x) .fi-topbar,
body.tya-oranye .fi-topbar.tya-mtop-aktif:not(#tya-x) {
background:
radial-gradient(circle at 92% -20%, rgba(255, 255, 255, .12) 0 52px, transparent 53px),
var(--tya-oranye) !important;
border: 0 !important;
box-shadow: none !important;
}
body.tya-oranye #tya-mtop .tya-mtop-sapa {
color: rgba(255, 255, 255, .85) !important;
}
body.tya-oranye #tya-mtop .tya-mtop-nama {
color: #ffffff !important;
}
body.tya-oranye #tya-mtop .tya-mtop-foto {
box-shadow: 0 0 0 2px rgba(255, 255, 255, .85) !important;
}
body.tya-oranye #tya-mtop :is(.tya-mtop-invoice, .tya-mtop-keluar) {
background: rgba(255, 255, 255, .2) !important;
box-shadow: none !important;
border: 0 !important;
}
body.tya-oranye #tya-mtop :is(.tya-mtop-invoice, .tya-mtop-keluar)::before {
background-color: #ffffff !important;
}
body.tya-oranye #tya-mtop .tya-lencana {
box-shadow: 0 0 0 2px #f97316 !important;
}
body.tya-oranye #tya-mtop .tya-mtop-kembali:not(#tya-x) {
background: rgba(255, 255, 255, .2) !important;
color: #ffffff !important;
}
body.tya-oranye #tya-mtop .tya-mtop-judul:not(#tya-x) {
color: #ffffff !important;
}
body.tya-oranye .fi-main:not(#tya-x) {
position: relative !important;
}
body.tya-oranye .fi-main-ctn:not(#tya-x) {
background: var(--tya-oranye) left top / 100% var(--tya-atas, 0px) no-repeat !important;
}
body.tya-oranye .fi-main:not(#tya-x)::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--tya-pita, 96px);
background: var(--tya-oranye);
border-radius: 0 0 26px 26px;
z-index: 0;
pointer-events: none;
}
body.tya-oranye .fi-main:not(#tya-x) > * {
position: relative;
z-index: 1;
}
body.tya-oranye .tya-statistik.tya-slide > .tya-k:not(#tya-x) {
background: #ffffff !important;
color: #18181b !important;
border: 1px solid rgba(0, 0, 0, .03) !important;
box-shadow: 0 12px 28px -8px rgba(234, 88, 12, .28), 0 1px 3px rgba(0, 0, 0, .06) !important;
}
body.tya-oranye .tya-statistik.tya-slide > .tya-k:not(#tya-x)::before,
body.tya-oranye .tya-statistik.tya-slide > .tya-k:not(#tya-x)::after {
display: none !important;
}
body.tya-oranye .tya-k .tya-k-ikon:not(#tya-x) {
background: #fff7ed !important;
box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .15) !important;
}
body.tya-oranye .tya-k .tya-k-ikon:not(#tya-x) svg {
color: #ea580c !important;
}
body.tya-oranye .tya-k :is(.tya-k-label, .tya-k-nilai):not(#tya-x) {
color: #18181b !important;
}
body.tya-oranye .tya-k .tya-k-nilai .tya-mata:not(#tya-x)::before {
background: #71717a !important;
}
body.tya-oranye .tya-k .tya-k-sub:not(#tya-x) {
color: #71717a !important;
}
body.tya-oranye .tya-k .tya-k-chip:not(#tya-x) {
background: rgba(220, 38, 38, .09) !important;
color: #dc2626 !important;
}
body.tya-oranye .tya-k .tya-k-chip.tya-k-naik:not(#tya-x) {
background: rgba(22, 163, 74, .1) !important;
color: #15803d !important;
}
body.tya-oranye .tya-k .tya-k-titik:not(#tya-x) {
box-shadow: 0 0 0 4px rgba(249, 115, 22, .2) !important;
}
body.tya-oranye .tya-k .tya-k-spark:not(#tya-x) {
color: #f97316 !important;
}
body.tya-oranye .tya-k .tya-k-spark:not(#tya-x) > * {
background: linear-gradient(180deg, #fb923c, #f97316) !important;
}
body.tya-oranye .tya-k .tya-k-spark:not(#tya-x) svg,
body.tya-oranye .tya-k .tya-k-spark:not(#tya-x) svg * {
color: #f97316 !important;
}
.dark body.tya-oranye .tya-statistik.tya-slide > .tya-k:not(#tya-x) {
background: #1c1c21 !important;
color: #f4f4f5 !important;
border-color: rgba(255, 255, 255, .06) !important;
box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .55) !important;
}
.dark body.tya-oranye .tya-k .tya-k-ikon:not(#tya-x) {
background: rgba(249, 115, 22, .14) !important;
box-shadow: none !important;
}
.dark body.tya-oranye .tya-k .tya-k-ikon:not(#tya-x) svg {
color: #fb923c !important;
}
.dark body.tya-oranye .tya-k :is(.tya-k-label, .tya-k-nilai):not(#tya-x) {
color: #f4f4f5 !important;
}
.dark body.tya-oranye .tya-k .tya-k-sub:not(#tya-x) {
color: #a1a1aa !important;
}
.dark body.tya-oranye .tya-k .tya-k-nilai .tya-mata:not(#tya-x)::before {
background: #a1a1aa !important;
}
.dark body.tya-oranye .tya-k .tya-k-chip:not(#tya-x) {
background: rgba(220, 38, 38, .16) !important;
color: #fca5a5 !important;
}
.dark body.tya-oranye .tya-k .tya-k-chip.tya-k-naik:not(#tya-x) {
background: rgba(22, 163, 74, .16) !important;
color: #86efac !important;
}
}
#tya-mpenuh {
display: none;
}
@media (max-width: 767px) {
#tya-mpenuh {
display: block;
position: fixed;
inset: 0;
z-index: 9990;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: #f4f4f6;
color: #18181b;
transform: translateX(100%);
visibility: hidden;
transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
scrollbar-width: none;
}
#tya-mpenuh::-webkit-scrollbar {
display: none;
}
#tya-mpenuh.tya-mp-buka {
transform: none;
visibility: visible;
transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
html.tya-mp-kunci,
html.tya-mp-kunci body {
overflow: hidden !important;
}
#tya-mpenuh .tya-mp-kepala {
position: relative;
padding: 0 16px 46px;
background:
radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .12) 0 70px, transparent 71px),
radial-gradient(circle at 6% 100%, rgba(255, 255, 255, .08) 0 54px, transparent 55px),
linear-gradient(90deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
border-radius: 0 0 26px 26px;
color: #ffffff;
}
#tya-mpenuh .tya-mp-bar {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
min-height: 60px;
padding-top: env(safe-area-inset-top, 0px);
margin: 0 -16px;
padding-inline: 12px;
background: linear-gradient(90deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
}
#tya-mpenuh .tya-mp-tutup {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 12px;
background: rgba(255, 255, 255, .2);
color: #ffffff;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#tya-mpenuh .tya-mp-tutup:active {
transform: scale(.94);
}
#tya-mpenuh .tya-mp-tutup::before {
content: "";
width: 22px;
height: 22px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
#tya-mpenuh .tya-mp-judul {
flex: 1 1 auto;
min-width: 0;
padding-inline-end: 50px;
text-align: center;
font-size: 16px;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tya-mpenuh .tya-mp-sapa {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 2px 18px;
}
#tya-mpenuh .tya-mp-sapa-ikon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 16px;
background: rgba(255, 255, 255, .2);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
#tya-mpenuh .tya-mp-sapa-ikon svg {
width: 26px;
height: 26px;
color: #ffffff;
}
#tya-mpenuh .tya-mp-besar {
font-size: 21px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -.01em;
}
#tya-mpenuh .tya-mp-kecil {
margin-top: 3px;
font-size: 13px;
color: rgba(255, 255, 255, .85);
}
#tya-mpenuh .tya-mp-cari {
display: flex;
align-items: center;
gap: 10px;
height: 46px;
padding-inline: 14px;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 8px 20px -10px rgba(124, 45, 18, .45);
}
#tya-mpenuh .tya-mp-cari::before {
content: "";
flex: 0 0 auto;
width: 19px;
height: 19px;
background-color: #a1a1aa;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M20%2020l-4.2-4.2%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M20%2020l-4.2-4.2%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
#tya-mpenuh .tya-mp-cari input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: 0;
outline: 0;
background: transparent;
box-shadow: none;
padding: 0;
font-size: 15px;
color: #18181b;
}
#tya-mpenuh .tya-mp-cari input::placeholder {
color: #a1a1aa;
}
#tya-mpenuh .tya-mp-isi {
position: relative;
z-index: 1;
margin-top: -26px;
padding: 0 16px calc(28px + env(safe-area-inset-bottom, 0px));
}
#tya-mpenuh .tya-mp-grup + .tya-mp-grup {
margin-top: 18px;
}
#tya-mpenuh .tya-mp-grup-judul {
margin: 0 4px 8px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: #71717a;
}
#tya-mpenuh .tya-mp-grup:first-child .tya-mp-grup-judul {
display: none;
}
#tya-mpenuh .tya-mp-kartu {
overflow: hidden;
border-radius: 18px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, .04);
box-shadow: 0 12px 28px -14px rgba(234, 88, 12, .3), 0 1px 3px rgba(0, 0, 0, .05);
}
#tya-mpenuh .tya-mp-baris {
position: relative;
display: flex;
align-items: center;
gap: 13px;
min-height: 64px;
padding: 10px 14px;
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
#tya-mpenuh .tya-mp-baris + .tya-mp-baris::before {
content: "";
position: absolute;
top: 0;
left: 67px;
right: 14px;
border-top: 1px solid #f0f0f2;
}
#tya-mpenuh .tya-mp-baris:active {
background: #fff7ed;
}
#tya-mpenuh .tya-mp-baris.tya-mp-anak {
padding-left: 30px;
}
#tya-mpenuh .tya-mp-ikon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: #fff7ed;
box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .14);
}
#tya-mpenuh .tya-mp-ikon svg {
width: 21px;
height: 21px;
color: #ea580c;
}
#tya-mpenuh .tya-mp-teks {
flex: 1 1 auto;
min-width: 0;
}
#tya-mpenuh .tya-mp-label {
display: block;
font-size: 14.5px;
font-weight: 650;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tya-mpenuh .tya-mp-ket {
display: block;
margin-top: 2px;
font-size: 12px;
color: #a1a1aa;
}
#tya-mpenuh .tya-mp-lencana {
flex: 0 0 auto;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: #fee2e2;
color: #dc2626;
font-size: 11.5px;
font-weight: 800;
line-height: 22px;
text-align: center;
}
#tya-mpenuh .tya-mp-panah {
flex: 0 0 auto;
width: 18px;
height: 18px;
background-color: #c4c4cc;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
#tya-mpenuh .tya-mp-baris.tya-mp-aktif .tya-mp-ikon {
background: linear-gradient(135deg, #fb923c, #ea580c);
box-shadow: 0 6px 14px -6px rgba(234, 88, 12, .7);
}
#tya-mpenuh .tya-mp-baris.tya-mp-aktif .tya-mp-ikon svg {
color: #ffffff;
}
#tya-mpenuh .tya-mp-baris.tya-mp-aktif .tya-mp-label {
color: #ea580c;
}
#tya-mpenuh .tya-mp-sembunyi {
display: none !important;
}
#tya-mpenuh .tya-mp-kosong {
display: none;
padding: 34px 16px;
text-align: center;
font-size: 14px;
color: #a1a1aa;
}
#tya-mpenuh.tya-mp-tidak-ada .tya-mp-kosong {
display: block;
}
.dark #tya-mpenuh {
background: #0e0e11;
color: #f4f4f5;
}
.dark #tya-mpenuh .tya-mp-cari {
background: #1c1c21;
box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .7);
}
.dark #tya-mpenuh .tya-mp-cari input {
color: #f4f4f5;
}
.dark #tya-mpenuh .tya-mp-grup-judul {
color: #a1a1aa;
}
.dark #tya-mpenuh .tya-mp-kartu {
background: #1c1c21;
border-color: rgba(255, 255, 255, .06);
box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .7);
}
.dark #tya-mpenuh .tya-mp-baris + .tya-mp-baris::before {
border-top-color: rgba(255, 255, 255, .06);
}
.dark #tya-mpenuh .tya-mp-baris:active {
background: rgba(249, 115, 22, .08);
}
.dark #tya-mpenuh .tya-mp-ikon {
background: rgba(249, 115, 22, .14);
box-shadow: none;
}
.dark #tya-mpenuh .tya-mp-ikon svg {
color: #fb923c;
}
.dark #tya-mpenuh .tya-mp-baris.tya-mp-aktif .tya-mp-label {
color: #fb923c;
}
.dark #tya-mpenuh .tya-mp-lencana {
background: rgba(220, 38, 38, .18);
color: #fca5a5;
}
.dark #tya-mpenuh .tya-mp-panah {
background-color: #52525b;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
#tya-mpenuh,
#tya-mpenuh.tya-mp-buka {
transition: none;
}
}
.tya-ks-titik {
display: none;
}
@media (max-width: 767px) {
.tya-ks:not(#tya-x) {
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
gap: 12px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
padding: 6px 12px 26px !important;
margin: -6px -12px -18px !important;
scroll-padding-inline: 12px;
width: calc(100% + 24px) !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.tya-ks::-webkit-scrollbar {
display: none;
}
.tya-ks-wadah:not(#tya-x) {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
--tw-ring-shadow: 0 0 #0000 !important;
padding: 0 !important;
}
.tya-ks > .tya-ks-k:not(#tya-x) {
--ks-w: #f97316;
position: relative !important;
display: block !important;
flex: 0 0 calc((100% - 12px) / 2) !important;
width: calc((100% - 12px) / 2) !important;
max-width: none !important;
min-width: 0 !important;
height: 124px !important;
min-height: 124px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid rgba(0, 0, 0, .04) !important;
border-radius: 18px !important;
background: #ffffff !important;
box-shadow: 0 8px 18px -10px rgba(234, 88, 12, .35), 0 1px 2px rgba(0, 0, 0, .05) !important;
color: #18181b !important;
text-decoration: none !important;
transform: none !important;
scroll-snap-align: start !important;
-webkit-tap-highlight-color: transparent;
}
.tya-ks-k .tya-ks-aksen:not(#tya-x) {
display: none !important;
}
.tya-ks-k .tya-ks-baris:not(#tya-x),
.tya-ks-k .tya-ks-baris:not(#tya-x) > div:not(.tya-ks-ikon) {
display: block !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
}
.tya-ks-k .tya-ks-ikon:not(#tya-x) {
position: absolute !important;
top: 12px !important;
left: 12px !important;
width: 34px !important;
height: 34px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 11px !important;
background: #fff7ed !important;
background: color-mix(in srgb, var(--ks-w) 12%, #ffffff) !important;
box-shadow: none !important;
color: var(--ks-w) !important;
}
.tya-ks-k .tya-ks-ikon:not(#tya-x) svg {
width: 18px !important;
height: 18px !important;
color: var(--ks-w) !important;
}
.tya-ks-k .tya-ks-label:not(#tya-x) {
position: absolute !important;
top: 53px !important;
left: 12px !important;
right: 10px !important;
margin: 0 !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #52525b !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tya-ks-k .tya-ks-nilai:not(#tya-x) {
position: absolute !important;
top: 70px !important;
left: 12px !important;
right: 10px !important;
margin: 0 !important;
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -.02em !important;
color: #18181b !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tya-ks-k .tya-ks-sub:not(#tya-x) {
position: absolute !important;
left: 12px !important;
right: 10px !important;
bottom: 10px !important;
margin: 0 !important;
font-size: 10.5px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: #a1a1aa !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
a.tya-ks-k:not(#tya-x)::after {
content: "\203A";
position: absolute;
top: 17px;
right: 12px;
width: 24px;
height: 24px;
border-radius: 9999px;
background: #fff7ed;
background: color-mix(in srgb, var(--ks-w) 10%, #ffffff);
color: var(--ks-w);
font-size: 17px;
font-weight: 800;
line-height: 22px;
text-align: center;
}
.tya-ks-titik {
display: flex;
width: 100%;
justify-content: center;
gap: 6px;
margin: 2px 0 6px;
}
.tya-ks-titik button {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 9999px;
background: #d4d4d8;
cursor: pointer;
transition: width .45s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease;
}
.tya-ks-titik button.tya-aktif {
width: 20px;
background: #f97316;
}
.tya-ks > .tya-ks-k:not(#tya-x) {
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease !important;
}
.tya-ks.tya-ks-siap > .tya-ks-k:not(.tya-ks-aktif):not(#tya-x) {
transform: scale(.9) !important;
opacity: .6 !important;
}
.tya-statistik.tya-slide > .tya-k:not(#tya-x) {
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease !important;
}
.tya-statistik.tya-slide.tya-ks-siap > .tya-k:not(.tya-ks-aktif):not(#tya-x) {
transform: scale(.9) !important;
opacity: .6 !important;
}
.tya-statistik.tya-slide:not(#tya-x) {
overscroll-behavior-x: contain;
padding: 6px 12px 30px !important;
margin: -6px -12px -22px !important;
scroll-padding-inline: 12px;
box-sizing: border-box !important;
}
#tya-titik button {
transition: width .45s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease !important;
}
.dark .tya-ks > .tya-ks-k:not(#tya-x) {
background: #1c1c21 !important;
border-color: rgba(255, 255, 255, .06) !important;
box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6) !important;
color: #f4f4f5 !important;
}
.dark .tya-ks-k .tya-ks-ikon:not(#tya-x) {
background: rgba(249, 115, 22, .14) !important;
background: color-mix(in srgb, var(--ks-w) 20%, transparent) !important;
}
.dark .tya-ks-k .tya-ks-label:not(#tya-x) {
color: #d4d4d8 !important;
}
.dark .tya-ks-k .tya-ks-nilai:not(#tya-x) {
color: #fafafa !important;
}
.dark .tya-ks-k .tya-ks-sub:not(#tya-x) {
color: #8b8b94 !important;
}
.dark a.tya-ks-k:not(#tya-x)::after {
background: rgba(249, 115, 22, .16);
background: color-mix(in srgb, var(--ks-w) 20%, transparent);
color: #fb923c;
}
.dark .tya-ks-titik button {
background: #3f3f46;
}
.dark .tya-ks-titik button.tya-aktif {
background: #fb923c;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.tya-ks > .tya-ks-k:not(#tya-x),
.tya-statistik.tya-slide > .tya-k:not(#tya-x),
.tya-ks-titik button,
#tya-titik button {
transition: none !important;
}
}
@media (max-width: 767px) {
.fi-ta-header-toolbar:not(#tya-x) {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
min-height: 0 !important;
}
.fi-ta-header-toolbar:not(#tya-x) > .fi-ta-actions {
order: 2 !important;
flex: 0 0 auto !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin: 0 !important;
width: auto !important;
}
.fi-ta-header-toolbar:not(#tya-x) > .fi-ta-actions.tya-kosong {
display: none !important;
}
.fi-ta-header-toolbar:not(#tya-x) > :not(.fi-ta-actions) {
order: 1 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
}
.fi-ta-header-toolbar > .fi-ta-actions :is(.fi-btn, .fi-icon-btn):not(#tya-x) {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
gap: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background: #fff1f2 !important;
color: #e11d48 !important;
box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .16) !important;
font-size: 0 !important;
line-height: 0 !important;
flex-direction: row !important;
}
.fi-ta-header-toolbar > .fi-ta-actions :is(.fi-btn, .fi-icon-btn):not(#tya-x) .fi-btn-label {
display: none !important;
}
.fi-ta-header-toolbar > .fi-ta-actions :is(.fi-btn, .fi-icon-btn):not(#tya-x) > :is(svg, .fi-icon) {
width: 20px !important;
height: 20px !important;
margin: 0 !important;
color: inherit !important;
}
.fi-ta-header-toolbar > .fi-ta-actions :is(.fi-btn, .fi-icon-btn):is([disabled], .fi-disabled):not(#tya-x) {
opacity: .45 !important;
}
.fi-ta-header-toolbar > .fi-ta-actions :is(.fi-btn, .fi-icon-btn):not(#tya-x) .fi-btn-badge-ctn,
.fi-ta-header-toolbar > .fi-ta-actions :is(.fi-btn, .fi-icon-btn):not(#tya-x) .fi-icon-btn-badge-ctn {
position: absolute !important;
top: -6px !important;
right: -6px !important;
font-size: 10px !important;
line-height: 1 !important;
}
.fi-ta-header-toolbar > .fi-ta-actions .fi-dropdown-trigger :is(.fi-btn, .fi-icon-btn):not(#tya-x) {
background: #fff7ed !important;
color: #ea580c !important;
box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .18) !important;
}
.dark .fi-ta-header-toolbar > .fi-ta-actions :is(.fi-btn, .fi-icon-btn):not(#tya-x) {
background: rgba(225, 29, 72, .14) !important;
color: #fb7185 !important;
box-shadow: none !important;
}
html body .fi-header .fi-header-actions-ctn .fi-btn:not(.tya-fab):not(#tya-x) {
font-size: 0 !important;
line-height: 0 !important;
gap: 0 !important;
}
body.tya-oranye .fi-header:not(#tya-x) {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
}
body.tya-ada-modal #tya-fab:not(#tya-x),
body.tya-ada-modal .tya-fab:not(#tya-x) {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: scale(.6) !important;
}
#tya-fab {
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x):not(#tya-y) .fi-input-wrp,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x):not(#tya-y),
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-section:not(#tya-x):not(#tya-y) > .fi-section-content-ctn,
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-sc-wizard-step:not(#tya-x):not(#tya-y),
.fi-modal .fi-modal-content .fi-sc-wizard:not(#tya-x):not(#tya-y) {
overflow: visible !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x):not(#tya-y) .fi-input-wrp > .fi-input-wrp-prefix {
border-start-start-radius: 9px !important;
border-end-start-radius: 9px !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x):not(#tya-y) .fi-input-wrp > .fi-input-wrp-suffix {
border-start-end-radius: 9px !important;
border-end-end-radius: 9px !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x):not(#tya-y) .fi-input-wrp > .fi-input-wrp-content-ctn:last-child {
border-start-end-radius: 9px;
border-end-end-radius: 9px;
}
.fi-select-input .fi-dropdown-panel:not(#tya-x),
.fi-select-input-ctn > .fi-dropdown-panel:not(#tya-x) {
z-index: 60 !important;
}
:is(body.tya-hal-pengaturan .fi-main, .fi-modal .fi-modal-content) .fi-fo-field:not(#tya-x) .fi-input-wrp:focus-within {
z-index: 20 !important;
}
@media (max-width: 767px) {
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn:not(#tya-x) {
padding: 20px 12px !important;
align-items: center !important;
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window:not(#tya-x):not(#tya-y) {
max-height: calc(100dvh - 180px) !important;
margin-block: auto !important;
}
body.tya-ada-modal .tya-footer:not(#tya-x),
body.tya-ada-modal .tya-bottom-nav:not(#tya-x) {
display: none !important;
}
body.tya-ada-modal .fi-topbar-ctn:not(#tya-x),
body.tya-ada-modal .fi-topbar:not(#tya-x) {
z-index: 5 !important;
}
}
@media (max-width: 767px) {
body.tya-oranye .fi-topbar-ctn:not(#tya-x):not(#tya-y) .fi-topbar,
body.tya-oranye .fi-topbar.tya-mtop-aktif:not(#tya-x):not(#tya-y) {
background:
linear-gradient(180deg, #f97316 0, rgba(249, 115, 22, .6) 18px, rgba(249, 115, 22, 0) 52px),
var(--tya-oranye, linear-gradient(90deg, #fb923c 0%, #f97316 50%, #ea580c 100%)) !important;
}
}
@media (max-width: 767px) {
.tya-footer:not(#tya-x),
.fi-footer:has(> .tya-footer):not(#tya-x) {
display: none !important;
}
}
@media (max-width: 767px) {
html body table.fi-ta-table.tya-ls:not(#tya-x) {
display: block !important;
width: 100% !important;
min-width: 0 !important;
border: 0 !important;
background: transparent !important;
}
html body table.tya-ls:not(#tya-x) > thead {
display: none !important;
}
html body table.tya-ls:not(#tya-x) > tbody {
display: block !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
}
html body table.tya-ls:not(#tya-x) > tbody > tr.tya-ls-r {
display: block !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-top: 1px solid #f1f2f4 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
html body table.tya-ls:not(#tya-x) > tbody > tr.tya-ls-r:first-child {
border-top: 0 !important;
}
html body table.tya-ls:not(#tya-x) > tbody > tr.tya-ls-r::before,
html body table.tya-ls:not(#tya-x) > tbody > tr.tya-ls-r::after {
content: none !important;
display: none !important;
}
html body table.tya-ls:not(#tya-x) > tbody > tr.tya-ls-r > td:not(.tya-ls-c) {
display: none !important;
}
html body table.tya-ls:not(#tya-x) > tbody > tr.tya-ls-r > td.tya-ls-c {
display: flex !important;
align-items: center !important;
gap: 11px !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
padding: 11px 14px !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
transition: background-color .12s ease;
}
html body table.tya-ls:not(#tya-x) > tbody > tr.tya-ls-r > td.tya-ls-c:active {
background: #fafafa !important;
}
html body table.tya-ls:not(#tya-x) > tbody > tr.tya-ls-r.fi-selected > td.tya-ls-c {
background: #fff7ed !important;
}
.tya-ls-cb {
display: none;
flex: none;
width: 20px;
height: 20px;
border-radius: 6px;
border: 2px solid #d1d5db;
background: #fff;
}
html.tya-ls-pilih .tya-ls-cb {
display: block;
}
tr.fi-selected .tya-ls-cb {
border-color: #f97316;
background: #f97316 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.tya-ls-av {
flex: none;
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--tya-ls-a, #fff7ed);
color: var(--tya-ls-b, #ea580c);
font-size: 12.5px;
font-weight: 800;
letter-spacing: -.2px;
line-height: 1;
}
.tya-ls-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tya-ls-m {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.tya-ls-t {
font-size: 15px;
font-weight: 700;
color: #111827;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
.tya-ls-s {
font-size: 12px;
color: #6b7280;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tya-ls-k {
flex: none;
max-width: 42%;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
text-align: right;
}
.tya-ls-h {
font-size: 13.5px;
font-weight: 700;
color: #111827;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.tya-ls-st {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 2px 8px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #f3f4f6;
color: #4b5563;
}
.tya-ls-st::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.tya-ls-hijau { background: #ecfdf5; color: #059669; }
.tya-ls-oranye { background: #fff7ed; color: #c2410c; }
.tya-ls-merah { background: #fef2f2; color: #dc2626; }
.tya-ls-biru { background: #eff6ff; color: #2563eb; }
html body table.tya-ls:not(#tya-x) > tfoot {
display: block !important;
padding: 8px 12px !important;
}
html body table.tya-ls:not(#tya-x) > tfoot > tr {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
html body table.tya-ls:not(#tya-x) > tfoot > tr > td:empty {
display: none !important;
}
#tya-ls-lapis {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(17, 24, 39, .45);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
#tya-ls-lembar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 2001;
max-height: 84dvh;
overflow-y: auto;
overscroll-behavior: contain;
background: #fff;
border-radius: 22px 22px 0 0;
padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
transform: translateY(105%);
transition: transform .24s cubic-bezier(.2, .9, .3, 1);
box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
}
html.tya-ls-buka #tya-ls-lapis {
opacity: 1;
pointer-events: auto;
}
html.tya-ls-buka #tya-ls-lembar {
transform: translateY(0);
}
html.tya-ls-buka,
html.tya-ls-buka body {
overflow: hidden !important;
}
html.tya-ls-buka #tya-fab,
html.tya-ls-buka .tya-bottom-nav,
html.tya-ls-pilih #tya-fab {
visibility: hidden !important;
pointer-events: none !important;
}
.tya-ls-grip {
width: 40px;
height: 4px;
border-radius: 4px;
background: #d1d5db;
margin: 0 auto 12px;
}
.tya-ls-kepala {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.tya-ls-kepala .tya-ls-t {
font-size: 18px;
white-space: normal;
word-break: break-word;
}
.tya-ls-kepala .tya-ls-st {
margin-left: auto;
flex: none;
max-width: 45%;
}
.tya-ls-rinci {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: #f1f2f4;
border-radius: 14px;
overflow: hidden;
margin-bottom: 14px;
}
.tya-ls-rinci > div {
background: #fafafa;
padding: 9px 12px;
min-width: 0;
}
.tya-ls-rinci > div.tya-ls-lebar {
grid-column: 1 / -1;
}
.tya-ls-rinci b {
display: block;
margin-bottom: 2px;
font-size: 10.5px;
font-weight: 600;
color: #9ca3af;
}
.tya-ls-rinci .tya-ls-isi {
font-size: 13px;
font-weight: 600;
color: #111827;
word-break: break-word;
}
.tya-ls-rinci .tya-ls-isi * {
max-width: 100%;
}
.tya-ls-rinci .tya-ls-isi .fi-ta-text-item,
.tya-ls-rinci .tya-ls-isi .fi-ta-col {
padding: 0 !important;
white-space: normal !important;
}
.tya-ls-saklar {
display: inline-flex;
align-items: center;
gap: 8px;
border: 0;
background: none;
padding: 0;
font: inherit;
color: inherit;
}
.tya-ls-saklar i {
position: relative;
width: 36px;
height: 20px;
border-radius: 99px;
background: #d1d5db;
transition: background .15s;
}
.tya-ls-saklar i::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
transition: transform .15s;
}
.tya-ls-saklar.tya-ls-nyala i {
background: #f97316;
}
.tya-ls-saklar.tya-ls-nyala i::after {
transform: translateX(16px);
}
.tya-ls-aksi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
gap: 8px;
}
.tya-ls-aksi button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 58px;
padding: 8px 4px;
border: 0;
border-radius: 12px;
background: #fff7ed;
color: #ea580c;
font: 700 12px/1.15 inherit;
font-family: inherit;
text-align: center;
cursor: pointer;
}
.tya-ls-aksi button svg {
width: 20px;
height: 20px;
}
.tya-ls-aksi button.tya-ls-bahaya {
background: #fef2f2;
color: #dc2626;
}
.tya-ls-aksi button.tya-ls-netral {
background: #f3f4f6;
color: #374151;
}
.tya-ls-aksi button.tya-ls-hijau-b {
background: #ecfdf5;
color: #059669;
}
#tya-ls-bilah {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
z-index: 1990;
display: none;
align-items: center;
gap: 8px;
padding: 10px 10px 10px 14px;
border-radius: 16px;
background: #111827;
color: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
font-size: 13px;
font-weight: 700;
}
html.tya-ls-pilih body:not(.tya-ada-modal) #tya-ls-bilah {
display: flex;
}
html.tya-ls-pilih .tya-bottom-nav {
visibility: hidden !important;
}
#tya-ls-bilah .tya-ls-jml {
flex: none;
}
#tya-ls-bilah .tya-ls-tb {
margin-left: auto;
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
#tya-ls-bilah button {
flex: none;
display: inline-flex;
align-items: center;
gap: 5px;
height: 34px;
padding: 0 11px;
border: 0;
border-radius: 10px;
background: #374151;
color: #fff;
font: 700 12px/1 inherit;
font-family: inherit;
white-space: nowrap;
}
#tya-ls-bilah button svg {
width: 16px;
height: 16px;
}
#tya-ls-bilah button.tya-ls-bahaya {
background: #dc2626;
}
#tya-ls-bilah button.tya-ls-x {
width: 34px;
padding: 0;
justify-content: center;
background: transparent;
font-size: 18px;
}
html.tya-tanpa-kartu body .fi-ta-header-ctn > .fi-ta-header:not(#tya-x) {
padding: 12px 12px 2px !important;
gap: 0 !important;
min-height: 0 !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions:not(#tya-x) {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 6px !important;
width: 100% !important;
overflow-x: auto !important;
padding: 0 !important;
scrollbar-width: none !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions:not(#tya-x)::-webkit-scrollbar {
display: none !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn:not(#tya-x) {
flex: 0 0 auto !important;
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
min-width: 0 !important;
width: auto !important;
justify-content: center !important;
width: 40px !important;
min-width: 40px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
font-size: 0 !important;
border-radius: 10px !important;
background: #fff7ed !important;
box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .16) !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn:not(#tya-x) > span {
flex-direction: row !important;
gap: 5px !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn:not(#tya-x)::before {
content: none !important;
display: none !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn:not(#tya-x) svg {
width: 18px !important;
height: 18px !important;
filter: none !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn:not(#tya-x) .fi-btn-label {
display: none !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn.fi-color-danger:not(#tya-x) {
background: #fef2f2 !important;
box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .14) !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn.fi-color-danger:not(#tya-x),
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn.fi-color-danger:not(#tya-x) .fi-btn-label {
color: #dc2626 !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn.fi-color-danger:not(#tya-x) svg {
color: #dc2626 !important;
stroke: #dc2626 !important;
}
html.tya-tanpa-kartu body .fi-ta-header .fi-ta-actions .fi-btn:is(.tya-mute, [x-bind\:class*="SelectedRecords"]):not(#tya-x),
html.tya-tanpa-kartu body .fi-ta-header-toolbar > .fi-ta-actions:not(#tya-x) {
display: none !important;
}
html.tya-tanpa-kartu body .fi-ta-header-ctn:not(#tya-x) > .fi-ta-header-toolbar {
padding-block-start: 8px !important;
padding-block-end: 10px !important;
}
html.tya-tanpa-kartu body .fi-ta-header-ctn:not(#tya-x) .fi-ta-filters-above-content-ctn > .fi-ta-filters-trigger-action-ctn,
html.tya-tanpa-kartu body .fi-ta-header-ctn:not(#tya-x) > .fi-ta-filters-trigger-action-ctn {
margin-bottom: 15px !important;
}
.dark.tya-tanpa-kartu .fi-ta-header .fi-ta-actions .fi-btn:not(#tya-x) {
background: rgba(249, 115, 22, .12) !important;
box-shadow: none !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: minmax(0, 1fr) !important;
grid-template-columns: none !important;
gap: 0 !important;
row-gap: 0 !important;
flex: 1 1 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 12px 4px !important;
overflow: hidden !important;
scroll-snap-type: none !important;
box-sizing: border-box !important;
background: #fff !important;
border: 0 !important;
border-radius: 18px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .06) !important;
}
html.tya-tanpa-kartu body .tya-rs.tya-rs-2:not(#tya-x):not(#tya-y) {
grid-auto-flow: row !important;
grid-template-columns: 1fr 1fr !important;
row-gap: 12px !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) > * {
position: relative !important;
display: block !important;
flex: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-left: 1px solid #f1f2f4 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
opacity: 1 !important;
text-align: center !important;
overflow: hidden !important;
color: inherit !important;
text-decoration: none !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) > :first-child,
html.tya-tanpa-kartu body .tya-rs.tya-rs-2:not(#tya-x):not(#tya-y) > :nth-child(odd) {
border-left: 0 !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) > *::after,
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) > *::before {
content: none !important;
display: none !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) :is(.tya-sc-accent, .tya-sc-icon, .tya-hs-icon-ctn, .tya-sc-note, .tya-hs-note, .tya-ks-aksen, .tya-ks-ikon, .tya-ks-sub),
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) > .tya-hs-card > div:first-child {
display: none !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) :is(.tya-sc-row, .tya-hs-card > div) {
display: block !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) :is(.tya-sc-row, .tya-hs-card > div) > div:first-child {
display: flex !important;
flex-direction: column-reverse !important;
align-items: center !important;
position: static !important;
min-width: 0 !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) :is(.tya-sc-value, .tya-hs-value) {
position: static !important;
max-width: 100% !important;
margin: 0 !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: -.01em !important;
color: #111827 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-variant-numeric: tabular-nums;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) :is(.tya-sc-label, .tya-hs-label) {
position: static !important;
max-width: 100% !important;
margin: 3px 0 0 !important;
font-size: 10.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #6b7280 !important;
white-space: normal !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
text-align: center !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) .tya-rs-merah {
color: #dc2626 !important;
}
html.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) .tya-rs-hijau {
color: #16a34a !important;
}
html.tya-tanpa-kartu body .tya-rs ~ .tya-ks-titik,
html.tya-tanpa-kartu body .tya-rs ~ #tya-titik,
body.tya-bukan-dasbor #tya-menu-ikon,
body.tya-bukan-dasbor #tya-menu-utama,
body.tya-bukan-dasbor #tya-titik {
display: none !important;
}
.dark.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) {
background: #1c1c21 !important;
box-shadow: none !important;
}
.dark.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) > * {
border-left-color: rgba(255, 255, 255, .07) !important;
}
.dark.tya-tanpa-kartu body .tya-rs:not(#tya-x):not(#tya-y) :is(.tya-sc-value, .tya-hs-value):not(.tya-rs-merah):not(.tya-rs-hijau) {
color: #f4f4f5 !important;
}
.dark .tya-ls-t,
.dark .tya-ls-h,
.dark .tya-ls-rinci .tya-ls-isi {
color: #f4f4f5;
}
.dark .tya-ls-s {
color: #a1a1aa;
}
.dark table.tya-ls > tbody > tr.tya-ls-r {
border-top-color: rgba(255, 255, 255, .07) !important;
}
.dark table.tya-ls > tbody > tr.tya-ls-r.fi-selected > td.tya-ls-c {
background: rgba(249, 115, 22, .12) !important;
}
.dark #tya-ls-lembar {
background: #18181b;
}
.dark .tya-ls-rinci {
background: rgba(255, 255, 255, .06);
}
.dark .tya-ls-rinci > div {
background: #1f1f23;
}
}
@media (min-width: 768px) {
#tya-ls-lapis,
#tya-ls-lembar,
#tya-ls-bilah {
display: none !important;
}
}
html body .fi-main .fi-section-header-description:not(#tya-x),
html body .fi-modal-content .fi-section-header-description:not(#tya-x),
html body .fi-header .fi-header-subheading:not(#tya-x) {
display: none !important;
}
html body .fi-fo-field .fi-fo-field-content-col .fi-sc-text:not(#tya-x),
html body .fi-fo-field-wrp-helper-text:not(#tya-x) {
display: none !important;
}
html body .fi-section-header:not(#tya-x) {
align-items: center !important;
}
html body .fi-fo-field :is(input, textarea):not(#tya-x)::placeholder {
color: transparent !important;
opacity: 0 !important;
}
html body .fi-fo-field .fi-select-input-placeholder:not(#tya-x),
html body .fi-fo-field .choices__placeholder:not(#tya-x) {
color: transparent !important;
}
@media (max-width: 767px) {
body.tya-oranye .fi-page-content form[wire\:submit]:not(:has(.fi-section)):not(#tya-x) {
position: relative !important;
z-index: 1 !important;
margin: 0 !important;
padding: 16px 14px 8px !important;
background: #fff !important;
border: 0 !important;
border-radius: 18px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .06) !important;
}
body.tya-oranye .fi-page-content form[wire\:submit]:not(#tya-x) .fi-sc {
row-gap: 14px !important;
}
body.tya-oranye .fi-page-content form[wire\:submit]:not(#tya-x) .fi-fo-field-label-ctn,
body.tya-oranye .fi-page-content form[wire\:submit]:not(#tya-x) .fi-fo-field-label {
margin-bottom: 2px !important;
}
body .fi-page-content :is(.fi-form-actions, form > .fi-ac, .fi-sc-actions) .fi-btn:not([type="submit"]):not(.tya-btn-simpan):not(#tya-x) {
background: #f3f4f6 !important;
color: #374151 !important;
border: 0 !important;
box-shadow: none !important;
}
body .fi-page-content :is(.fi-form-actions, form > .fi-ac, .fi-sc-actions) .fi-btn:not([type="submit"]):not(.tya-btn-simpan):not(#tya-x) :is(.fi-btn-label, svg, .fi-icon) {
color: #374151 !important;
}
.dark body.tya-oranye .fi-page-content form[wire\:submit]:not(:has(.fi-section)):not(#tya-x) {
background: #1c1c21 !important;
box-shadow: none !important;
}
.dark body .fi-page-content :is(.fi-form-actions, form > .fi-ac, .fi-sc-actions) .fi-btn:not([type="submit"]):not(.tya-btn-simpan):not(#tya-x) {
background: rgba(255, 255, 255, .08) !important;
color: #e4e4e7 !important;
}
}