.overlay {
    z-index: 1;
    margin-top: 2px;
    position: absolute;
    width: 100%;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    border: 2px solid var(--searchBackground);
    border-radius: 20px;
    border-top: none;
    background-color: var(--searchBackground);
    box-shadow: 0px 8px 20px 0px var(--backgroundShadow)
}

.overlay > * {
    z-index: 2;
}

.overlay > .flex-column {
    margin: 5px 10px;
}

.x-button {
    position: absolute;
    right: 10px;
    font-size: larger;
}

.x-button:hover {
    cursor: pointer;
}

.modal-header {
    border-bottom-color: var(--lineColor);
}

:root.dark .modal-header > .close {
    color: #fff;
}

:root.dark .modal-header > .close:hover {
    color: #97a495;
}

.modal-footer {
    border-top-color: var(--lineColor);
}

.modal-content {
    background-color: var(--overlay);
}

#default_lang_settings {
    margin-top: 0.25rem !important;
}

.form-control.small {
    width: 100%;
    height: 20px;
    padding: 0;
    padding-left: 1%;
    display: inline;
    color: var(--searchTextColor);
    background: var(--searchBackground);
    border-color: var(--lineColor);
}

.form-control.small:focus {
    box-shadow: unset;
}

.overlay-button {
    position: relative;
    display: inline-flex;
    flex: auto 0 0;
    justify-content: center;
    align-items: center;
    grid-gap: 4px;
    gap: 4px;
    padding: 0 0.625rem;
    margin: 0;
    border: none;
    height: 2rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.overlay-button {
    color: var(--buttonText);
    background-color: var(--buttonBg);
    flex-grow: 1;
    outline: 0px solid var(--primaryColor);
    transition: all .05s ease;
}

.overlay-button:hover, .overlay-button:active {
    background-color: var(--buttonBgActive);
}

.overlay-button:active {
    outline: 2px solid var(--primaryColor);
}