:root {
    --lwa-text-color: #000;
    --lwa-background-color: #fff;
    --lwa-panel-background-color: #efefef;
    --lwa-panel-border-color: #cecece;
    --lwa-hover: #e9e9e9;
    --lwa-margin-normal: 8px;
    --lwa-margin-small: 5px;
    --lwa-border-radius: 16px;
    --lwa-max-width: 100vw;
    --lwa-min-width: 420px;
    --lwa-font-size: 16px;
}

.lwa-big-white-cursor, .lwa-big-white-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 24 24'><g transform='translate(-4.5,-1.7)'><path fill='%23FFF' stroke='%23000' stroke-width='2' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z'/></g></svg>") 20 0, auto !important;
}

.lwa-big-black-cursor, .lwa-big-black-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 24 24'><g transform='translate(-4.5,-1.7)'><path fill='%23000' stroke='%23FFF' stroke-width='2' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z'/></g></svg>") 20 0, auto !important;
}

.lwa-0 {
    filter: none !important;
}

.lwa-0h {
    filter: contrast(180%) !important;
}

.lwa-0i {
    filter: invert(100%) !important;
}

.lwa-0m {
    filter: grayscale(100%) !important;
}

.lwa-0n {
    filter: invert(100%) !important;
}
.lwa-0n img,
.lwa-0n video {
    filter: invert(100%) !important; /* double-invert for media */
}

/* Combinations */
.lwa-0hi {
    filter: contrast(180%) invert(100%) !important;
}

.lwa-0hm {
    filter: contrast(180%) grayscale(100%) !important;
}

.lwa-0hn {
    filter: contrast(180%) invert(100%) !important;
}
.lwa-0hn img,
.lwa-0hn video {
    filter: invert(100%) !important;
}

.lwa-0im {
    filter: invert(100%) grayscale(100%) !important;
}

.lwa-0in {
    filter: invert(100%) !important;
}
.lwa-0in img,
.lwa-0in video {
    filter: invert(100%) !important;
}

.lwa-0mn {
    filter: grayscale(100%) invert(100%) !important;
}
.lwa-0mn img,
.lwa-0mn video {
    filter: invert(100%) !important;
}

.lwa-0him {
    filter: contrast(180%) invert(100%) grayscale(100%) !important;
}

.lwa-0hin {
    filter: contrast(180%) invert(100%) !important;
}
.lwa-0hin img,
.lwa-0hin video {
    filter: invert(100%) !important;
}

.lwa-0hmn {
    filter: contrast(180%) grayscale(100%) invert(100%) !important;
}
.lwa-0hmn img,
.lwa-0hmn video {
    filter: invert(100%) !important;
}

.lwa-0imn {
    filter: invert(100%) grayscale(100%) !important;
}
.lwa-0imn img,
.lwa-0imn video {
    filter: invert(100%) !important;
}

.lwa-0himn {
    filter: contrast(180%) invert(100%) grayscale(100%) !important;
}
.lwa-0himn img,
.lwa-0himn video {
    filter: invert(100%) !important;
}

.lwa-disable-animations *,
.lwa-disable-animations *::before,
.lwa-disable-animations *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

.lwa-root {
    font-size: var(--lwa-font-size);
    font-family: Helvetica, Verdana, Arial, sans-serif;
    position: fixed;
    bottom: 25px;
    right: 25px;
    margin-left: auto;
    width: max-content;
    z-index: 9999;
    color: var(--lwa-text-color);
    background: var(--lwa-background-color);
    border: 1px solid var(--lwa-panel-background-color);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    display: flex;
    flex-wrap: wrap;

    /* Optional: make it ignore filters */
    transform: translateZ(0);
    will-change: transform;
    display: flex;
    flex-direction: column;
    max-width: min(var(--lwa-min-width), var(--lwa-max-width));
    border: 1px solid var(--lwa-panel-border-color);
    font-size: var(--lwa-font-size);
    isolation: isolate;
    z-index: 999999;
}

.lwa-root-left {
    right: unset!important;
    left: 25px;
}

.lwa-start-button {
    width: calc(3 * var(--lwa-font-size));
}

.lwa-panel {
    padding-right: 0;
    max-width: 100%;
}

.lwa-panel-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.lwa-root button {
    font-size: var(--lwa-font-size);
    padding: 5px 8px;
    border: 1px solid #999;
    border-radius: var(--lwa-border-radius);
    cursor: pointer;
    transition: background 0.2s;
    color: var(--lwa-text-color);
    margin: var(--lwa-margin-small);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    
    width: auto;
    min-width: 2.4em;
    background: white;
}

.bigger-font {
    --lwa-font-size: calc(16px * 1.2);
}

.lwa-root button:hover {
    background: var(--lwa-hover);
}

.lwa-panel-section {
    background-color: var(--lwa-panel-background-color);
    border-radius: var(--lwa-border-radius);
    border: 1px solid var(--lwa-panel-border-color);
    padding-bottom: var(--lwa-margin-normal);
}

.lwa-panel-section:not(:last-of-type) {
    margin-bottom: var(--lwa-margin-normal);
}

.lwa-panel-section-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: calc(1.25 * var(--lwa-font-size));
    padding-bottom: var(--lwa-margin-small);
    font-weight: 600;
    background: var(--lwa-text-color);
    color: var(--lwa-background-color);
    border-top-left-radius: var(--lwa-border-radius);
    border-top-right-radius: var(--lwa-border-radius);
    padding: var(--lwa-margin-normal);
    padding-bottom: var(--lwa-margin-normal);
}

.lwa-panel-font-size-description {
    padding: var(--lwa-margin-normal);
}

.lwa-panel-font-display-label {
    font-weight: 500;
}

.lwa-panel-font-reset {
    padding-top: 0;
    min-height: calc(4 * var(--lwa-font-size));
    align-items: stretch;
    justify-content: center;
}

.lwa-panel-font-reset-description {
    display: flex;
    align-items: center;
}

.lwa-panel-section-row {
    display: flex;
    flex-direction: row;
    padding-left: var(--lwa-margin-normal);
    padding-right: var(--lwa-margin-normal);
    padding-top: var(--lwa-margin-normal);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.lwa-panel-section-row button {
    width: calc(3 * var(--lwa-font-size));
}

.lwa-panel-font-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding: var(--lwa-margin-normal);
    align-items: center;
}

.lwa-panel-top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    font-size: calc(1.5 * var(--lwa-font-size));
    margin-left: calc(-1 * var(--lwa-margin-normal));
    padding-left: var(--lwa-margin-normal);
    border-bottom: 1px solid var(--lwa-panel-border-color);
    margin-right: calc(-1 * var(--lwa-margin-normal));
}

.lwa-panel-title {
    flex: 1;
    padding-right: var(--lwa-font-size);
}

.lwa-panel-close {
    color: var(--lwa-text-color);
}

.lwa-panel svg {
    width: calc(1.5 * var(--lwa-font-size))!important;
}

.lwa-panel-content {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    max-height: 60vh;
    margin-bottom: calc(-1 * var(--lwa-margin-small));
}

.lwa-panel-content-scrollable {
    display: flex;
    flex-direction: column;
    padding: var(--lwa-margin-normal);
}

.lwa-panel-section-label {
    display: flex;
    align-items: center;
    flex: 1;
}

.lwa-panel-button-toggle {
    width: auto!important;
}

.lwa-active {
    background-color: var(--lwa-text-color)!important;
    color: var(--lwa-background-color)!important;
}

.lwa-panel-language {
    padding-bottom: 0!important;
    display: flex;
    justify-content: center;
}

.lwa-fill {
    flex: 1;
}

.lwa-0,
.lwa-0h,
.lwa-0i,
.lwa-0m,
.lwa-0n,
.lwa-0hi,
.lwa-0hm,
.lwa-0hn,
.lwa-0im,
.lwa-0in,
.lwa-0mn,
.lwa-0him,
.lwa-0hin,
.lwa-0hmn,
.lwa-0imn,
.lwa-0himn {
    /* Panel should ignore filters */
}

.lwa-0 .lwa-root,
.lwa-0h .lwa-root,
.lwa-0i .lwa-root,
.lwa-0m .lwa-root,
.lwa-0n .lwa-root,
.lwa-0hi .lwa-root,
.lwa-0hm .lwa-root,
.lwa-0hn .lwa-root,
.lwa-0im .lwa-root,
.lwa-0in .lwa-root,
.lwa-0mn .lwa-root,
.lwa-0him .lwa-root,
.lwa-0hin .lwa-root,
.lwa-0hmn .lwa-root,
.lwa-0imn .lwa-root,
.lwa-0himn .lwa-root {
    filter: none !important;
}

.lwa-root-mobile {
    bottom: 0!important;
    right: 0!important;
    width: 100%;
}
