:root {
    --accent-color: blueviolet;
}

.exlg-button {
    border-radius: 0;
    border: 1px solid black;
    outline: none;
    background: white;
    padding: 3px 15px 5px 15px;
    line-height: 1.15;
}
.exlg-button:disabled {
    color: gray;
    text-decoration: line-through;
}

.exlg-hr {
    margin: 16px 0;
    border-top: 1px solid black;
}
.exlg-hr.close-to-top {
    margin-top: 0;
}
.exlg-hr.close-to-bottom {
    margin-bottom: 0;
}

.exlg-select,
.exlg-input {
    border: 1px solid black;
    outline: none;
    line-height: 1.6;
    vertical-align: baseline !important;
    background: white;
    transition: border-color 0.5s;
}

.exlg-select:focus,
.exlg-input:focus {
    border-color: var(--accent-color);
}

.exlg-checkbox {
    accent-color: var(--accent-color);
    width: 1em;
    height: 1em;
    vertical-align: text-bottom;
    margin: 2px 3px !important;
}

.exlg-tooltip {
    position: relative;
    cursor: help;
}
.exlg-tooltip:hover::after {
    content: attr(data-exlg-tooltip);
    position: absolute;
    z-index: 70001;
    border: 1px solid black;
    background: white;
    white-space: normal;
    line-height: 1.3em;
    padding-bottom: 0.15em;
    padding-left: 0.3em;
    padding-right: 0.3em;
}

.exlg-tooltip.left:hover::after {
    right: 100%;
}

.exlg-tooltip.nowrap:hover::after {
    white-space: nowrap;
}

.exlg-window {
    top: 0;
    right: calc(100% + 20px);
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: white;
    box-shadow: 0 0 1px 1px #000;
}

.exlg-window-header {
    display: flex;
    justify-content: space-between;
}
