/*========================================

Luana 2: Pico Extension - Protoype 1
by Angga

L01. Initialization
L02. Main Navigation
L03. Hero Area
L04. Blog List
    L04a. Lapor Rutemu Specific
    L04b. Blog List Navigation
L05. Aside
L06. Footer
L07. Articles
    L07a. Articles Navigation & Sharing
L08. Third Party Animation Libraries
L09. Desktop Mod
L10. Tablet Mod
L11. Edge case: Narrow Width Phone Mod
L12. Edge case: iOS WebKiiiiiiiiit
L13. Reduced Motion Accessibility
L14. Miscellaneous (Inluding RTL stuff)


/*========================================

/*========================================
L01. Initialization
==========================================*/

:root {
    --lu-color-black: #373c44;
    --lu-color-orange: #e69f00;
    --lu-color-blue: #56b4e9;
    --lu-color-jade: #009e73;
    --lu-color-red: #D55E00;
    --lu-color-puce: #CC79A7;
    --lu-color-alice: #ebf8ff;
    --lu-color-lavender: #ebeeff;
    --lu-color-shell: #fff2eb;
    --lu-color-honeydew: #ebfff2;
    --lu-color-floral: #fffceb;
    --lu-color-pearl: #fff3f3;
    --lu-color-prussian: #003d61;
    --lu-color-grey: #F5F5F5;
    --lu-color-ebony: #545454;
    --lu-border-radius: 0.6rem;
    --lu-border-radius-small: 5px;
    --lu-font-family-serif: "Georgia", "Times New Roman", "DejaVu Serif", "Noto Serif", serif;
    --pico-font-family: Figtree,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
}

@font-face {
    font-family: "Figtree";
    src: url("./Figtree-VariableFont_wght.woff2") format("woff2"); 
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Colorsym";
    src: url("./ColorSym-Calligraphic.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pico-background-color);
    /*background: linear-gradient(180deg, rgba(229, 244, 254, 1) 0%, rgba(237, 248, 255, 1) 5%, rgba(255, 255, 255, 1) 30%);*/
    background: linear-gradient(180deg, rgba(192, 220, 206, 1) 0%, rgba(192, 220, 206, 0.3) 5%, rgba(255, 255, 255, 1) 30%);
}

main {
    flex: 1;
    margin-block-start: 6rem;
}

a {
    color: var(--lu-color-prussian);
    text-decoration-color: var(--lu-color-prussian);
}

h2 {
    font-size: 2rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding-block: 0;
    padding-inline: 0;
    margin-block: -1px;
    margin-inline: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    transform: translate(-50%, -150%);
    left: 50%;
}

.skip-link:focus {
    position: absolute;
    inset-block-start: 1rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
    z-index: 3000;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border-radius: var(--pico-border-radius);
    text-decoration: none;
}

.overflow-list {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
}

.element-box {
    background-color: var(--pico-primary-inverse);
    padding: 1rem;
    border-radius: var(--lu-border-radius-small);
    flex: 0 0 85%;
    scroll-snap-align: start;
    max-width: 13rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.element-box img {
    width: 11rem;
}

/*========================================
L02. Main Navigation
==========================================*/

.site-header {
    position: fixed;
    z-index: 1000;
    inset-block-start: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    transition: opacity 250ms ease, visibility 250ms ease;
}

.site-header.nav-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.main-navigation {
    border-radius: 999px;
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--pico-background-color) 70%, transparent);
    box-shadow: 0 1px 0 rgb(0 0 0 / .05);
    padding-block: 0.8rem;
    padding-inline: 1rem;
    align-items: center;
}

.main-navigation:has(.menu-toggle[aria-expanded="true"]){
    box-shadow: none;
    backdrop-filter: none;
}

.branding {
    font-weight: 900;
}

a.branding {
    color: var(--lu-color-black);
    text-decoration: none;
}

.menu-toggle {
    padding-block: 0;
    padding-inline: 0;
    position: relative;
    width: 1.2em;
    height: 1.5em;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    z-index: 2100;
}

.menu-toggle::before,
.menu-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.12em;
    background: currentColor;
    border-radius: 999px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle {
    background: linear-gradient(currentColor, currentColor) center / 100% 0.12em no-repeat;
    transition: background 0.2s ease;
}

.menu-toggle::before {
    inset-block-start: 0.4em;
}

.menu-toggle::after {
    inset-block-end: 0.4em;
}

.menu-toggle[aria-expanded="true"] {
    background: none;
}
  
.menu-toggle[aria-expanded="true"]::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
  
.menu-toggle[aria-expanded="true"]::after {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.menu-toggle:focus {
    box-shadow: none;
}

.menu-toggle:focus-visible {
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}

.menu {
    position: fixed;
    inset-block: 10rem 0;
    inset-inline: 0;
    background: var(--pico-background-color);
    color: var(--pico-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: self-start;
    /*gap: 1rem;*/
    z-index: 2000;
}

.menu a {
    padding-block: 0;
    padding-inline: 2.5rem 0;
    font-size: 2rem;
    font-weight: 600;
}

.menu[hidden] {
    display: none;
}

body.menu-open {
    overflow: hidden;
    touch-action: none;
}

.menu-backdrop {
    position: fixed;
    inset-block: 0;
    inset-inline: 0;
    background: var(--pico-background-color);
    z-index: 100;
}

/*========================================
L03. Hero Area
==========================================*/

.hero h1 {
    font-size: clamp(3rem, 9vw, 7rem);   
}

.hero {
    padding-block-end: 1rem;
    margin-block-end: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><g transform="translate(0 100) scale(1 -1)" fill="%23C1E2F9"><path d="M0 1v99c134.3 0 153.7-99 296-99H0Z" opacity=".5"></path><path d="M1000 4v86C833.3 90 833.3 3.6 666.7 3.6S500 90 333.3 90 166.7 4 0 4h1000Z" opacity=".5"></path><path d="M617 1v86C372 119 384 1 196 1h421Z" opacity=".5"></path><path d="M1000 0H0v52C62.5 28 125 4 250 4c250 0 250 96 500 96 125 0 187.5-24 250-48V0Z"></path></g></svg>') no-repeat center bottom;
}

/*========================================
L04. Blog List
==========================================*/

.lu-container {
    padding-block-start: 1rem;
    padding-inline: 0;
}

.lu-container > section.lavender {
    background-color: var(--lu-color-lavender);
}

.lu-container > section.lavender .element-box {
    max-width: none;
    background-color: transparent;
}

.lu-container > section.lavender .element-box h3 {
    font-size: 4rem;
}

.lu-container > section {
    margin-bottom: var(--pico-block-spacing-vertical);
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    background: var(--pico-card-background-color);
    border-radius: var(--lu-border-radius);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    background-color: var(--lu-color-alice);
}

.lu-container > section > footer {
    margin-top: var(--pico-block-spacing-vertical);
    margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
    border-bottom-right-radius: var(--pico-border-radius);
    border-bottom-left-radius: var(--pico-border-radius);
}

.lu-container > section > footer, .lu-container > section > header {
    margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
    margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
    padding: calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);
}

.lu-container > article {
    box-shadow: none;
    border-radius: var(--lu-border-radius);
}

.lu-container > article:nth-child(3n+2) {
    background-color: var(--lu-color-shell);
}

.lu-container > article:nth-child(3n+1) {
    background-color: var(--lu-color-alice);
}

.lu-container > article:nth-child(3n) {
    background-color: var(--lu-color-lavender);
}

.lu-container > article > header, .lu-article-container > article > header, .lu-container > section > header {
    background: none;
    border: none;
}

.lu-container > article > header > p, .lu-container > section > header > p {
    margin-block-end: 0;
}

.lu-container > article > div:first-of-type p, .lu-container > section > div:first-of-type p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lu-container > article > footer, .lu-article-container > article > footer, .lu-container > section > footer {
    background: none;
    border: none;
    position: relative;
    isolation: isolate;
}

/*.lu-container > article > footer::before, .lu-article-container > article > footer::before {
    content: "\00a0";
    border-inline-start: 10px solid var(--lu-color-prussian);
    height: 3rem;
    position: absolute;
    inset-inline-start: 1rem;
}*/

.lu-container > article > footer > address, .lu-article-container > article > footer > address, .lu-container > section > address {
    margin-block-end: 0;
    margin-inline-start: 1rem;
}

/*.lu-container > article:nth-child(3n+2) > footer::after {
    content:"O";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-end: 1rem;
}*

.lu-container > article:nth-child(3n+1) > footer::after {
    content:"B";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-end: 1rem;
}

.lu-container > article:nth-child(3n) > footer::after {
    content:"V";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-end: 1rem;
}*/

.meta-tag {
    display: flex;
    flex-direction: row;
    margin-block-end: 1rem;
    margin-inline-start: 1rem;
}

.meta-tag p {
    padding-inline-end: 0.5rem;
}

.meta-tag ul {
    padding-inline-start: 0;
}

.meta-tag ul li{
    display: inline;
}

.meta-tag ul li:not(:last-child)::after {
    content: '\002C';
}

/*========================================
L04a. Lapor Rutemu Specific
==========================================*/
:root {
    --ipj-primary-color: #027338;
    --ipj-primary-25: #C0DCCE;
    --ipj-secondary-75: #CBCBCB;
    --ipj-secondary-50: #DDDDDD;
    --ipj-tertiary-50: #A5D8A4;
    --ipj-tertiary-25: #D3EBD2;
}

a {
    color: var(--ipj-primary-color);
    text-decoration-color: var(--ipj-primary-color);
}

[role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button {
    --pico-primary-background: var(--ipj-primary-color);
    --pico-primary-border: var(--ipj-primary-color);
}

[role=button]:is(:hover,:active,:focus), [role=button]:is([aria-current]:not([aria-current=false])), [type=button]:is(:hover,:active,:focus), [type=button]:is([aria-current]:not([aria-current=false])), [type=file]::file-selector-button:is(:hover,:active,:focus), [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])), [type=reset]:is(:hover,:active,:focus), [type=reset]:is([aria-current]:not([aria-current=false])), [type=submit]:is(:hover,:active,:focus), [type=submit]:is([aria-current]:not([aria-current=false])), button:is(:hover,:active,:focus), button:is([aria-current]:not([aria-current=false])) {
    --pico-background-color: var(--ipj-primary-color);
    --pico-border-color: var(--ipj-primary-color);
    --pico-primary-focus: rgba(2, 115, 56, 0.5);
}

:where(select,textarea):not([readonly]):focus, input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus {
    --pico-form-element-focus-color: var(--ipj-primary-color);
}

.logo {
    width: 10rem;
}

.divider-gradient {
    background: linear-gradient(180deg, rgba(129, 185, 156, 1) 0%, rgba(255, 255, 255, 1) 50%);
}

.hero {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><g transform="translate(0 100) scale(1 -1)" fill="%2381B99C"><path d="M0 1v99c134.3 0 153.7-99 296-99H0Z" opacity=".5"></path><path d="M1000 4v86C833.3 90 833.3 3.6 666.7 3.6S500 90 333.3 90 166.7 4 0 4h1000Z" opacity=".5"></path><path d="M617 1v86C372 119 384 1 196 1h421Z" opacity=".5"></path><path d="M1000 0H0v52C62.5 28 125 4 250 4c250 0 250 96 500 96 125 0 187.5-24 250-48V0Z"></path></g></svg>') no-repeat center bottom;
}

.lu-container > section {
    background-color: var(--ipj-tertiary-25);
}

.lu-container > section.lavender {
    background-color: var(--ipj-secondary-50);
}

.lu-container > section.lavender .element-box {
    border: none;
}

.element-box {
    border: 1px solid rgba(2, 115, 56, 0.5);
}

#form-laporan {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lu-laporan-container.has-report #form-laporan {
    flex: 1 1 auto;
}

.lu-laporan-container.has-report select {
    margin-block-end: 0;
}

#kirim, #lanjutkan {
    margin-block-start: 0.5rem;
    margin-block-end: 0;
}

/*.lu-laporan-container {
    margin-block-start: 2rem
}*/

.lu-laporan-container {
    box-sizing: border-box;
    margin-block-start: 0;
    padding-block: 0.5rem;
    display: flex;
    flex-direction: column;
}

.lu-laporan-container.has-report, .lu-laporan-container.chooser-focused {
    height: 100vh;
    height: 100dvh;
}

.lu-laporan label, .lu-laporan p.label {
    color: var(--pico-color);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    font-family: var(--pico-font-family);
    margin-block-start: 1.5rem;
}

/*.lu-laporan .pin-map, .lu-laporan iframe {
    width: 100%;
    border-radius: var(--lu-border-radius);
    height: 20rem;
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
}*/

.lu-laporan .map-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
    isolation: isolate;
}

.lu-laporan .map-wrapper[hidden] {
    display: none;
}

.lu-laporan .photo-info {
    font-weight: normal;
    font-size: 1rem;
    justify-self: left;
    margin-inline-start: 1rem;
}

.lu-laporan .confirmation-photo {
    height: 5rem;
    margin-block-end: 1rem;
}

.lu-laporan .confirmation-photo p{
    margin-block-start: 1rem;
    margin-block-end: 0;
}

.lu-laporan .confirmation-photo img {
    height: 4rem;
    object-fit: cover;
    width: 100%;
    border-radius: var(--lu-border-radius);
}

#location-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--lu-color-prussian);
    font-size: 0.875rem;
    line-height: 1.4;
    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
    pointer-events: none;
}

.lu-laporan #location-counter[hidden] {
    display: none;
}

.lu-laporan .form-konfirmasi {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.lu-laporan .pin-map, .lu-laporan .confirmation-map {
    height: auto;
    flex: 1 1 auto;
    min-height: 6rem;
    border-radius: var(--lu-border-radius);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
}

/*.lu-laporan .pin-map iframe {
    width: 100%;
    height: 100%;
    border-radius: var(--lu-border-radius);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
}*/

.pin-map .leaflet-control-zoom a, .confirmation-map .leaflet-control-zoom a {
    display: block;
    padding: 0;
    /*line-height: 26px;*/
    text-align: center;
    text-decoration: none;
    border-radius: 0;
}

.leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile {
    background: transparent;
    border: none;
}

.lu-laporan .leaflet-container a.leaflet-popup-close-button {
    top: auto;
    right: auto;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid #284686;
    border-radius: 50%;
    color: #284686;
    font-size: 1rem;
    line-height: 1px;
    text-align: center;
}

.lu-laporan .leaflet-popup-content {
    margin-block-start: 1rem;    
    margin-block-end: 1rem;
    margin-inline-end: 1rem;
    margin-inline-start: 1rem;
}

img.leaflet-marker-icon:focus {
    --pico-box-shadow: transparent;
}

.lu-laporan .upload-box {
    display: grid;
    place-items: center;
    height: 4rem;
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    background-color: var(--pico-form-element-background-color);
    border-radius: var(--pico-border-radius);
    /* box-shadow: var(--pico-box-shadow); */
    cursor: pointer;
    transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
    margin-block-start: 0;
}

.lu-laporan .upload-box:focus {
    border: var(--pico-outline-width) solid var(--pico-form-element-focus-color);
}

.lu-laporan .upload-icon img {
    width: 2rem;
    height: 2rem;
}

.lu-laporan input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-konfirmasi h3 {
    margin-block-start: 2rem;
}

.form-konfirmasi > .persetujuan {
    font-size: 1rem;
    font-weight: normal;
    padding-block-end: 1rem;
}

.form-konfirmasi > button > img {
    padding-inline-end: 0.5rem;
}

button#kembali, button#batal-keluar {
    width: 100%;
    margin-block-end: 0;
}

button#lanjutkan {
    width: 100%;
}

button#lanjutkan > img {
    padding-inline-start: 0.5rem;
}

.lu-container a[role=button] {
    width: 100%;
}

.tombol-lapor-tentang {
    margin-block-start: 1rem;
}

.report-wrapper .report {
    border-top: 1px solid var(--lu-color-prussian);
    margin-block-end: 1rem;
    padding-block-start: 1rem;
}

.report-wrapper > .report button {
    width: 100%;
}

.kategori-filter {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    /*padding: 0.2rem 0 0.5rem 0;*/
    scrollbar-width: none;
    -ms-overflow-style: none;
    /*mask-image: linear-gradient(to right,transparent,black 1rem,black calc(100% - 1rem),transparent);*/
}

.kategori-filter.can-scroll-right:not(.can-scroll-left) {
    -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 1rem), transparent);
    mask-image: linear-gradient(to right, black, black calc(100% - 1rem), transparent);
}

.kategori-filter.can-scroll-left:not(.can-scroll-right) {
    -webkit-mask-image: linear-gradient(to right, transparent, black 1rem, black);
    mask-image: linear-gradient(to right, transparent, black 1rem, black);
}

.kategori-filter.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
    mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
}

.kategori-filter button {
    padding: 0.6rem 1rem;
    border-radius: 999px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.report-map {
    width: 100%;
    height: 18rem;
    margin-block-start: 0.75rem;
    border-radius: var(--lu-border-radius);
    overflow: hidden;
    margin-block-end: 1rem;
    animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.report-photo {
    margin-block-start: 0.75rem;
    animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.report-photo img {
    display: block;
    width: 100%;
    max-height: 24rem;
    object-fit: contain;
    border-radius: var(--lu-border-radius);
}

.status-laporan p {
    margin-block-end: 0.2rem;
}

.status-laporan ul {
    padding-inline-start: 0;
}

.status-laporan ul li{
    list-style: none;
}

.icon-dasbor {
    width: 1rem;
    height: 1rem;
    margin-inline-end: 0.3rem;
}

/*========================================
L04b. Blog List Navigation
==========================================*/

.list-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-block: 2rem;
    /* overflow: hidden; for testing*/
}

.list-nav ul {
    gap: clamp(0.6rem, 3vw, 3rem);
    flex-wrap: wrap;
}

/* -- WRAP -- */
/* Hide everything */
.list-nav ul.compact li {
    display: none;
    list-style-type: none;
}

/* Display everything */
.list-nav ul.compact li:first-child,
.list-nav ul.compact li:last-child,
.list-nav ul.compact li.active,
.list-nav ul.compact li.prev-active,
.list-nav ul.compact li.next-active {
    display: list-item;
}
/* -- WRAP -- */

.list-nav ul li {
    padding-block: 0;
}

.list-nav ul li a {
    padding-block: 1rem;
    padding-inline: 1rem;
    text-decoration: underline;
}

.list-nav ul li.active a {
    text-decoration: none;
    background-color: var(--lu-color-alice);
    position: relative;
    isolation: isolate;
}

.list-nav ul li.active a::after {
    content:"B";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0.2rem;
    font-size: 0.7rem;
}

/*========================================
L05. Aside
==========================================*/

.lu-container aside ul, .lu-article-container aside ul {
    padding-inline-start: 0;
}

.lu-container aside ul li, .lu-article-container aside ul li {
    display: inline;
    padding-inline-end: 0;
}

.lu-container aside ul li::before, .lu-article-container aside ul li::before {
    content: "\25A0 ";
    color: var(--lu-color-prussian);
    font-size: 0.7rem;
    margin-inline-end: 0.3rem;
}

.lu-container aside ul li a, .lu-article-container aside ul li a {
    display: inline;
}

/*========================================
L06. Footer
==========================================*/

.site-footer {
    padding-block-end: 3rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.site-footer > div:nth-child(1) {
    flex-grow: 1;
}

.site-footer p {
    margin-block-end: 0;
}

.site-footer > div:nth-child(2) {
    position: relative;
    isolation: isolate;
    max-width: 100px;
    max-height: 100px;
}

.site-footer > div:nth-child(2)::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 5px double var(--lu-color-prussian);
    pointer-events: none;
    inset-block: -0.25rem;
    inset-inline: -0.25rem;
}

.site-footer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    align-self: center;
}

.site-footer img.easter-active {
    animation: rotate-vert-center 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/*========================================
L07. Articles
==========================================*/

.breadcrumbs {
    font-size: 0.8rem;
    padding-inline-start: 0; 
}

.breadcrumbs ol:first-of-type {
    margin-inline-start: 0;
}

.breadcrumbs ol li {
    padding-inline: 0;
    padding-block: 0;
}
 
.breadcrumbs ol li:not(:last-child)::after {
    content: "\203A ";
    color: var(--lu-color-prussian);
    padding-inline: 0.3rem;
}
   
.lu-article-container > article {
    background-color: var(--pico-background-color);
    box-shadow: none;
    border-radius: 0;
    padding-inline: 0;
}

.lu-article-container > article > header > h1 {
    font-size: clamp(3rem, 9vw, 7rem);
}

hgroup {
    margin-block-start: 2rem;
    border-block: 1px solid var(--lu-color-black);
    padding-block: 1rem;
}

hgroup > :not(:first-child):last-child {
    color: var(--lu-color-black);
    font-family: var(--lu-font-family-serif);
}

hr {
    border-top: 0;
    height: 1px;
    opacity: 0.5;
    background: linear-gradient(to right, transparent, currentColor 40%, currentColor 60%, transparent);
}

:not(pre) > code,kbd,samp {
    display: inline-block;
    padding-block: 0.13rem;
    padding-inline: 0.35rem; 
    margin-inline: 0.1rem;
    border-radius: 0.3rem;
    line-height: 1.2;
    vertical-align: baseline;
}

.callout {
    padding-block: 1rem;
    padding-inline: 1rem;
    margin-block-end: 1rem;
    border-radius: var(--lu-border-radius);
    position: relative;
    isolation: isolate;
}

.callout :is(h1, h2, h3, h4, h5, h6) {
    margin-block-end: 0;
}

.callout p {
    color: var(--lu-color-black);
    margin-block: 0;
}

.callout-info {
    background-color: var(--lu-color-alice);
    border-inline-start: 0.5rem solid var(--lu-color-blue);
}

/*.callout-info::after {
    content:"B";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0.2rem;
    inset-inline-end: 1rem;
}*/

.callout-tip {
    background-color: var(--lu-color-honeydew);
    border-inline-start: 0.5rem solid var(--lu-color-jade);
}

.callout-tip::after {
    content:"G";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0.2rem;
    inset-inline-end: 1rem;
}

.callout-warning {
    background-color: var(--lu-color-floral);
    border-inline-start: 0.5rem solid var(--lu-color-orange);
}

.form-konfirmasi > .callout-warning {
    margin-block-start: 1rem;
    margin-block-end: 0;
    padding-block: 0.2rem;
}

/*.callout-warning::after {
    content:"Y";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0.2rem;
    inset-inline-end: 1rem;
}*/

.callout-danger {
    background-color: var(--lu-color-pearl);
    border-inline-start: 0.5rem solid var(--lu-color-red);
}

.callout-danger::after {
    content:"P";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0.2rem;
    inset-inline-end: 1rem;
}

cite, ins, del, mark {
    display: inline-block;
    line-height: 1.2;
    padding-block: 0;
    vertical-align: baseline;  
    font-family: var(--pico-font-family-sans-serif);
}

cite {
    border-inline-start: 0.2rem solid var(--lu-color-puce);
    padding-inline-start: 0.2rem;
    padding-inline-end: 0.4rem;
    background-color: var(--lu-color-lavender);
}

ins, del {
    position: relative;
    isolation: isolate;
    padding-inline-start: 0.7rem;
    padding-inline-end: 0.2rem;
}

ins {
    color: var(--lu-color-black);
    background-color: var(--lu-color-honeydew);
    border: 1px solid var(--lu-color-jade);
}

ins::before {
    content: "+";
    position:absolute;
    inset-inline-start: 0.1rem;
}

del {
    background-color: var(--lu-color-pearl);
    border: 1px solid var(--lu-color-red);
}

del::before {
    content: "-";
    position: absolute;
    inset-inline-start: 0.1rem;
    inset-block-end: -0.2rem;
    text-decoration: none;
    font-size: 1.5rem; 
}

abbr[title] {
    font-family: var(--pico-font-family-sans-serif);
}

u,span[style*="underline"] {
    text-decoration-style: wavy;
}

samp {
    padding-inline-start: 0.9rem;
    padding-inline-end: 0.2rem;
    position:relative;
    isolation: isolate;
}

samp::before {
    content: ">";
    position: absolute;
    inset-inline-start: 0.2rem;
    inset-block-start: 0.1rem;
}

em {
    font-weight: 600;
}

blockquote {
    background-color: var(--lu-color-lavender);
    border-radius: var(--lu-border-radius);
    position: relative;
    isolation: isolate;
    border-inline: none;
    border-block: none;
    font-family: var(--lu-font-family-serif);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    text-align: center;
    padding-block-end: 2rem;
}

blockquote::before {
    content: "\201C";
    font-family: var(--pico-font-family-monospace);
    color: var(--lu-color-puce);
    font-size: 5rem;
    line-height: 0.2;
    align-self: flex-start;
    text-shadow: 0.2rem 0 var(--lu-color-black);
}

[dir="rtl"] blockquote::before {
    transform: scaleX(-1);
}

blockquote::after {
    content: "V";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0.2rem;
    inset-inline-end: 1rem;
    font-size: 1rem;
}

blockquote > footer > cite {
    border-inline-start: 0;
    padding-inline: 0;
    background-color: transparent;
    color: var(--pico-color);
    font-size: 1rem;
}

blockquote > footer > cite::before {
    content: "\2014";
    margin-inline-end: 0.2rem;
}

pre[class*="language-"]::after {
    content: "K";
    font-family: Colorsym;
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-end: 1rem;
}

pre[class*="language-"] > code[class*="language-"] {
    padding-block-end: 1rem;
}

td, th {
    border-block-end: var(--pico-border-width) solid var(--lu-color-ebony);
}

tfoot td, tfoot th {
    border-block-start: var(--pico-border-width) solid var(--lu-color-ebony);
}

table.striped tbody tr:nth-child(odd) td, table.striped tbody tr:nth-child(odd) th {
    background-color: var(--lu-color-grey);
}

.table-scroll {
    overflow-x: auto;
    margin-block-end: 1rem;
    max-width: 100%;
}

fieldset {
    margin-block-start: 2rem;
    border: 1px solid var(--lu-color-black);
    border-radius: var(--lu-border-radius);
    padding-inline: 1rem;
    padding-block-end: 1rem;
}

fieldset legend {
    font-size: 1.1rem;
    padding-inline: 0.5rem;
    margin-inline-start: 0.5rem;
}

fieldset:not(:has(legend)) {
    padding-block-start: 2rem;
}

:is(input:not([type="checkbox"]):not([type="radio"]), textarea)::placeholder, select:has(> option:checked:disabled) {
    color: var(--lu-color-black);
    opacity: 1;
    font-style: italic;
    font-family: var(--lu-font-family-serif);
    font-size: 0.9rem;
}

input[type="date"]::-webkit-date-and-time-value {
    text-align: start;
}

/* For orphaned images without figure. The cause of my initial suffering trying to find what causes the ever slightly content-shift when panzooming */
article div:not(.panzoom-viewport) > img {
    margin-block-end: var(--pico-typography-spacing-vertical);
    border-radius: var(--lu-border-radius);
}

figure {
    position: relative;
    border-radius: var(--lu-border-radius);
    overflow: hidden;
    margin-block-end: var(--pico-typography-spacing-vertical);
}

figure:hover {
    cursor: zoom-in;
}

figure figcaption {
    background-color: rgba(0, 0, 0, 0.75);
    color: var(--pico-contrast-inverse);
    padding-inline: 0.5rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: end;
    border-end-start-radius: var(--lu-border-radius);
    border-end-end-radius: var(--lu-border-radius);
    transition: opacity 1s ease;
}

figure.is-inspecting figcaption {
    opacity: 0;
    pointer-events: none;
}

.panzoom-viewport {
    border-radius: var(--lu-border-radius);
    position: relative;
    isolation: isolate;
}

.image-controls {
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 100%;
    padding-inline: 1rem;
    display: flex;
    gap: 0.5rem;
}

.image-controls > button {
    padding-block: 0.1rem;
    color: var(--lu-color-black);
    background-color: rgba(255, 255, 255, 0.8);
    
    border: none;
    width: 3rem;
}

.image-controls > button:first-of-type {
    font-weight: 900;
}

.image-controls > button:focus {
    box-shadow: none;
}

.image-controls > input[type="range"] {
    align-self: anchor-center;
}


/*========================================
L07a. Articles Navigation & Sharing
==========================================*/

.social-sharing {
    background-color: var(--lu-color-alice);
    padding: 0.5rem;
    border-radius: var(--lu-border-radius-small);
}

.social-sharing p {
    margin-block-end: 0.2rem;
    font-weight: bolder;
}

.social-sharing ul {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding-inline-start: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /*mask-image: linear-gradient(to right, transparent, black 0.3rem, black calc(100% - 0.5rem), transparent);*/
}

.social-sharing ul li {
    list-style: none;
    background-color: var(--lu-color-prussian);
    border-radius: var(--lu-border-radius-small);
    border-bottom: solid 5px var(--lu-color-blue);
    padding-block: 5px;
    padding-inline: 10px;
    min-width: 6rem;
    text-align: center;
}

.social-sharing ul li a {
    color: #ffffff;
    text-decoration: none;
}

.article-nav {
    flex-direction: column;
    gap: 1rem;
    margin-block-end: 1rem;
}

.article-nav a {
    text-decoration: none;
}

.article-nav a:nth-child(2n), .article-nav a:nth-child(2n+1) {
    display: flex;
}

.article-nav a:nth-child(2n) > p, .article-nav a:nth-child(2n+1) > p {
    align-content: center;
    font-size: 1.5rem;
    color: var(--lu-color-prussian);
}

[dir="rtl"] .article-nav a:nth-child(2n) > p, [dir="rtl"] .article-nav a:nth-child(2n+1) > p {
    transform: scaleX(-1);
}

.article-nav a:nth-child(2n+1) > p {
    margin-inline-end: 1rem;
}

.article-nav a:nth-child(2n) > p {
    margin-inline-start: 1rem;
}

.article-nav a:nth-child(2n+1) {
    border-bottom: var(--pico-border-width) solid var(--lu-color-prussian);
}

.article-nav a:nth-child(2n) {
    flex-direction: row-reverse;
}

.article-nav a > div > p:nth-child(2n+1) {
    margin-block-end: 0;
    font-family: var(--lu-font-family-serif);
    color: var(--lu-color-prussian);
    font-size: 0.8rem;
}

.article-nav a > div > p:nth-child(2n) {
    color: var(--lu-color-prussian);
    text-decoration: underline;
}

/*========================================
L08. Third Party Animation Libraries
==========================================*/

/* ----------------------------------------------
 * Generated by Animista on 2026-7-20 15:51:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-vert-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation roll-in-left
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-scroll {
    opacity: 0;
}

.fade-in-scroll.is-visible {
   animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.slide-left-scroll {
    opacity: 0;
}

.slide-left-scroll.is-visible {
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.roll-in-scroll {
    opacity: 0;
}

.roll-in-scroll.is-visible {
    animation: roll-in-left 0.6s ease-out both;
    -webkit-animation: roll-in-left 0.6s ease-out both; 
}

.slide-bottom-scroll {
    opacity:0;
}

.slide-bottom-scroll.is-visible {
    animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


/*========================================
L09. Desktop Mod
==========================================*/

@media (hover: hover) and (pointer: fine) {
    .site-footer img:hover {
        animation: rotate-vert-center 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards;
    }
    
    /* Disable the Pico built in tooltip on desktop (check script.js), back to abbr default behavior for desktop users */
    abbr[data-tooltip]::after,
    abbr[data-tooltip]::before {
        display: none;
    }

    /* Give indicator for mouse/desktop users that, hey, you can click and zoom on the image.
    Native pinch-to-zoom is already familiar for mobile users, so I'll keep panzoom hush-hush as just a bonus(?) if they 
    happen to tap the image.*/
    figure:hover::after {
        content: "\1F50D";
        position: absolute;
        top: 0.8rem;
        right: 1rem;
        background-color: var(--pico-contrast-inverse);
        padding-inline: 1rem;
        border-radius: var(--lu-border-radius);
        visibility: visible;
        animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    figure.is-inspecting::after {
        visibility: hidden;
        animation: none;
    }

    .element-box {
        flex: 1 1 0;
        max-width: none;
    }

    .lu-laporan .confirmation-map {
        flex: 1 1 auto;
        min-height: 18rem;
        height: auto;
    }

    .lu-laporan .confirmation-photo {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    .lu-laporan .confirmation-photo img {
        object-fit: contain;
        min-height: 5rem;
        height: auto;
    }
}

@media (min-width: 1024px) {
    .element-box {
        flex: 1 1 0;
        max-width: none;
    }

    /* Lebar tombol di halaman depan
    button#kembali, button#lanjutkan, button#kirim {
        width: 20rem;
        align-self: center;
    }

    .lu-container a[role=button] {
        width: 20rem;
        display: flex;
        justify-content: center;
        justify-self: center;
    }
    */

    .gsi-material-button {
        display: flex;
        place-self: center;
    }

    .kategori-filter {
        display: block;
        mask-image: none;
    }

    .report-wrapper > .report button {
        width: 20rem;
    }

}

/*========================================
L10. Tablet Mod
==========================================*/

/*========================================
L11. Edge case: Narrow Width Phone Mod
==========================================*/

@media (min-width: 357px) and (max-width: 376px) {
    .list-nav ul {
        gap: 0.5rem;
    }
}

@media (max-width: 356px) {
    .list-nav ul {
        gap: 0.2rem;
    }
}

/*========================================
L12. Edge case: iOS WebKiiiiiiiiit
==========================================*/

/* 
And here I thought I won't need to use this space, but here we gooo, lol.
This will fix RTL positioning of ::before markers inside inline list items in iOS WebKit (I only tested in on my old iPhone 13 mini, I don't have any other Apple devices to test).
I think WebKit incorrectly places pseudo-elements in RTL unless the list item establishes a flex formatting context, maybe, perhaps, mayhaps.
*/

@supports (-webkit-touch-callout: none) {
    :dir(rtl) .lu-container aside ul li {
        display: inline-flex;
    }

    :dir(rtl) .lu-container aside ul li::before {
        align-self: center;
        margin-inline-end: 0.3rem;
    }

}

/*========================================
L13. Reduced Motion Accessibility
==========================================*/

@media (prefers-reduced-motion: reduce) { 
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/*========================================
L14. Miscellaneous (Inluding RTL and Prism)
==========================================*/

:dir(rtl) .rtl-flip {
    display: inline-block;
    transform: scaleX(-1);
}

code,
pre,
kbd,
samp {
    direction: ltr;
    unicode-bidi: isolate;
    background: #2b2b2b;
    color: var(--pico-background-color);
}

code,pre {
    border-radius: var(--lu-border-radius);
}

kbd,samp,:not(pre) code {
    border-radius: 5px;
}

.code-toolbar {
    background: #2b2b2b;
    border-radius: var(--lu-border-radius);
}

pre > code[class*="language-"] {
    display: inline-block;
    min-width: 100%;
    padding-inline-end: 1rem;
    box-sizing: border-box;
    padding-block: 0;
    padding-inline: 0;
}

/*Prism Toolbar Start*/
div.code-toolbar {
	position: relative;
}

div.code-toolbar > .toolbar {
	position: absolute;
	z-index: 10;
	top: .3em;
	right: .2em;
	transition: opacity 0.3s ease-in-out;
	opacity: 0;
}

div.code-toolbar:hover > .toolbar {
	opacity: 1;
}

/* Separate line b/c rules are thrown out if selector is invalid.
   IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
	opacity: 1;
}

div.code-toolbar > .toolbar > .toolbar-item {
	display: inline-block;
}

div.code-toolbar > .toolbar > .toolbar-item > a {
	cursor: pointer;
}

div.code-toolbar > .toolbar > .toolbar-item > button {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	line-height: normal;
	overflow: visible;
	padding: 0;
	-webkit-user-select: none; /* for button */
	-moz-user-select: none;
	-ms-user-select: none;
    user-select: none;
}

div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
	color: var(--lu-color-black);
	font-size: .8em;
	padding: 0 .5em;
	background: #ffffff;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	border-radius: .5em;
}

div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
	color: inherit;
	text-decoration: none;
}
/*Prism Toolbar End*/

/*Prism Unescaped Markup Start*/
/* Fallback, in case JS does not run, to ensure the code is at least visible */
[class*='lang-'] script[type='text/plain'],
[class*='language-'] script[type='text/plain'],
script[type='text/plain'][class*='lang-'],
script[type='text/plain'][class*='language-'] {
	display: block;
	font: 100% Consolas, Monaco, monospace;
	white-space: pre;
	overflow: auto;
}
/*Prism Unescaped Markeup End*/

/*Google SSO Button*/
.OIDCButtons {
    background-color: var(--pico-background-color);
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    max-width: 400px;
    min-width: min-content;
    justify-self: center;
}

.OIDCButtons:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.OIDCButtons a>svg {
    height: 20px;
    margin-right: 10px;
    min-width: 20px;
    width: 20px;
}

.OIDCButtons a {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
}

.OIDCButtons:not(:disabled):active, .OIDCButtons:not(:disabled):focus {
  background-color: rgba(48, 48, 48, 0.08);
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 0;
  flex-grow: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

.divider-gradient {
    /*background: linear-gradient(180deg,rgba(193, 226, 249, 1) 0%, rgba(255, 255, 255, 1) 50%);*/
    margin-block-start: -1px;
}

#location-counter {
    color: var(--ipj-primary-color);
}