body {
    --color-bg: #f0f0f0;
    --pretty-hover: #3d95cc80;
    --pretty-hover-weak: #3d95cc4d;
    --pretty-border: #4d4d4d;
    --pretty-border-weak: #4d4d4d4d;

    
    --color-body-1: #f0f8ff;
    --color-body-2: #f0f0f0;
    --color-body-3: #FFF0F0;

    --pretty-border-weak-full: 1px solid var(--pretty-border-weak);
    --pretty-border-full: 1px solid var(--pretty-border);
    --pretty-border-hover-full: 1px solid var(--pretty-hover);

    --backdrop-color: #00000066;
}

h1 {
    margin: 0px;
}

.flex-centered {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}

.force-left {
    margin-left: auto;
}

.hoverable-weak:hover {
    background-color: var(--pretty-hover-weak);
}

.rotate-180 {
    rotate: 180deg;
}

.all-borders-soft {
    border-right: 1px solid #4d4d4d4d;
}

.disabled {
    display: none !important;
}


.icon-border-round {
    border-radius: 50%;
    border: 1px solid #4d4d4d;
    padding: 4px;
}

.hint {
    display: flex;
    align-items: center;
    outline: var(--pretty-border-full);
    margin: 8px;
}
.hint::before {
    display: block;
    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='currentColor' class='bi bi-info-square' viewBox='0 0 16 16'><path d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/><path d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/></svg>");
    width: 20px;
    height: 20px;
    margin-right: 4px;
    margin-left: 4px;
}