*,
*::before,
*::after {
    box-sizing: border-box;
}

html, * {
    font-family: var(--main-font);
    font-stretch: semi-expanded;
    font-synthesis: none;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*:not(input):not(textarea) {
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

html, body {
    overflow: hidden;
    color: var(--color-default);
    text-align: left;
    background: var(--color-background);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

body ::-webkit-scrollbar {
    background-color: var(--scrollbar-background-color);
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

body ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: var(--scrollbar-border-radius);
    min-width: var(--scrollbar-size);
    min-height: var(--scrollbar-size);
}

body ::-webkit-scrollbar-corner {
    background-color: var(--scrollbar-background-color);
}

::selection {
    background: var(--color-selection);
    color: var(--color-foreground-black);
}

.splashscreen {
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.splashscreen-row {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 12px;
    margin-top: auto;
    margin-bottom: auto;
}

.splashscreen-row p {
    color: var(--color-foreground-black);
    font-size: 64px;
    font-family: var(--logo-font);
    user-select: none;
    -webkit-user-select: none;
}

.splashscreen-row img {
    width: 84px;
    margin-right: 8px;
    -webkit-animation: bounce 1s ease-in-out infinite;
    animation: bounce 1s ease-in-out infinite;
}

input, textarea {
    caret-color: var(--color-primary);
}

input:disabled, textarea:disabled {
    color: initial !important;
}

input:read-only, textarea:read-only {
    cursor: default;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: white !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;

    /* This transition hack helps ensure that the background remains white */
    transition: background-color 5000s ease-in-out 0s !important;
}

.editor-field:not(.state-disabled):not(.state-readonly) .field-base:hover {
    box-shadow: var(--input-hover-shadow);
    border: var(--input-hover-border);
}

.editor-field:not(.state-disabled):not(.state-readonly) .field-base:focus-within {
    border: var(--input-focus-border);
    outline: var(--input-focus-outline);
    outline-offset: var(--input-focus-outline-offset);
}

.editor-field:focus-visible .checkbox-field .field-label {
    border-bottom: var(--input-focus-border) !important;
}

.material-icons, .material-icons-outlined, .sys-icons {
    user-select: none;
}

/* timeline view */
.columns-overlay{
    position: absolute;
    bottom: 20px;
    left: 4px;
    right: 4px;
    width: unset !important;
    height: 100%;
    box-shadow: var(--shadow-8-r) !important;
    z-index: 1000;
    opacity: 0;
    transition: var(--opacity-transition);
    gap: 0 !important;
    padding: 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.columns-overlay::-webkit-scrollbar {
    width: 0;
    height: 0;
}


.columns-overlay div {
    min-width: unset !important;
    max-width: 100% !important;
}

.columns-overlay .column-setting {
    display: flex;
}

.columns-overlay .column-setting:nth-of-type(1) {
    margin-left: -4px;
    opacity: 0;
}

.columns-overlay .column-setting:nth-of-type(2) {
    opacity: 0;
}

.columns-overlay .column-setting .dropdown {
    position: relative;
    left: 1px;
    width: 100% !important;
    border: none;
    border-right: 2px solid lightgray;
    border-radius: 0;
 
}

.columns-overlay .column-setting .dropdown .item {
    margin-left: auto;
    margin-right: auto;

}

.columns-overlay .column-setting .dropdown .text {
    text-align: center;

}


@keyframes bounce {
    0%, 100% {
        -webkit-transform: translateY(0px) scaleX(1.10) scaleY(0.90);
    }

    50% {
        -webkit-transform: translateY(-40px) scaleX(1) scaleY(1);
    }
}

@keyframes explode {

    50% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    0%, 100% {
        opacity: 0.3;
        -webkit-transform: scale(0.4);
    }
}