#headerimg > h1 > a {
    text-decoration: none;
}

.font-tools #font-dropzone {
    background: #f5f7f9;
    border-width: 1px;
    border-style: dashed;
    margin: 0;
    border-radius: .5rem;
    padding: 1rem;
}

.font-tools .dropzone {
    position: relative;
}

.font-tools .dropzone .template-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.font-tools #font-dropzone .mantine-Group-root {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

.font-tools .dropzone .template-container input[type="file"] {
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    margin: 0 -1px -1px 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.font-tools .dropzone .template-container svg {
    width: 52px;
    height: 52px;
    color: #868e96;
}

.font-tools .dropzone > *:not(.template-container),
.font-tools .dropzone .dz-complete,
.font-tools .dropzone .dz-message {
    display: none;
}

.font-tools .dropzone .template-container .mantine-Text-root {
    font-size: 15px;
}

.font-tools .dropzone .template-container .mantine-Text-root:first-child {
    font-weight: 700;
    font-size: 16px;
}

.font-tools #webfont-converter {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.font-tools .mantine-Stack-root {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.font-tools .mantine-Group-root {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.font-tools .mantine-Button-root {
    color: #fa5252;
    font-weight: 600;
    padding: 5px 18px;
    border-radius: .25rem;
    cursor: pointer;
    transition: all .25s;
    font-size: 15px;
}

.font-tools .mantine-Button-root:hover {
    background-color: #fa52521f;
}

.font-tools #webfont-converter > .mantine-UnstyledButton-root {
    background-color: #625bf8;
    height: 42px;
}

.font-tools .mantine-Table-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none;
    font-size: 0.875rem;
}

.font-tools .mantine-Table-table thead,
.font-tools .mantine-Table-table tr {
    border-bottom: 1px solid #dee2e6;
}

.font-tools .mantine-Table-table td,
.font-tools .mantine-Table-table th {
    padding: 0.4375rem 0.625rem;
    text-align: left;
}

.font-tools .mantine-Table-table td {

}

.font-tools .mantine-Table-table tr:last-child {
    border-bottom: none;
}

.font-tools .mantine-Checkbox-body {
    display: flex;
    align-items: center;
}

.font-tools .mantine-Checkbox-label {
    padding-inline-start: .75rem;
    font-size: .875rem;
}

.font-tools .mantine-Checkbox-input {
    background-color: #fff;
    border: 1px solid #ced4da;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 0.25rem;
    transition: border-color .1s, background-color .1s;
    display: block;
}

.font-tools .mantine-Checkbox-body svg {
    width: 60%;
    color: #fff;
    pointer-events: none;
    transform: translateY(.3125rem) scale(.5);
    opacity: 0;
    margin: auto;
    transition: transform .1s, opacity .1s;
    position: absolute;
    inset: 0;
}

.font-tools .mantine-Group-root.list-extensions {
    justify-content: flex-start;
}

.font-tools .mantine-Checkbox-input:checked {
    background-color: #625bf8;
    border-color: #625bf8;
}

.font-tools .mantine-Checkbox-inner {
    position: relative;
}

.font-tools .mantine-Checkbox-input:checked + svg {
    opacity: 1;
    transform: none;
}

.font-tools .mantine-Button-inner {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.font-tools .mantine-Button-inner .mantine-Button-section {
    color: #fff;
}

.font-tools #webfont-converter > .mantine-UnstyledButton-root .mantine-Button-label {
    color: #fff;
}

.font-tools #webfont-converter > .mantine-UnstyledButton-root:focus,
.font-tools #webfont-converter > .mantine-UnstyledButton-root:active {
    transform: translateY(.0625rem);
}

.font-tools #webfont-converter.waiting,
.font-tools #webfont-converter.waiting *,
.font-tools #webfont-converter.waiting form {
    pointer-events: none;
}

.font-tools #webfont-converter.no-file > .mantine-UnstyledButton-root,
.font-tools #webfont-converter.waiting .mantine-Button-root,
.font-tools #webfont-converter.waiting > .mantine-UnstyledButton-root {
    cursor: not-allowed;
    color: #fff;
    background: #adb5bd;
    border: 1px solid #0000;
    transform: none;
    pointer-events: none;
}

.font-tools #webfont-converter:not(.has-converted) button.download-all,
.font-tools #webfont-converter:not(.has-converted) .result-area,
.font-tools #webfont-converter.no-file button.download-all,
.font-tools #webfont-converter.no-file .result-area,
.font-tools .result-template,
.font-tools .table-template {
    display: none;
}

.font-tools #webfont-converter.no-file .file-details {
    display: none;
}

#font-changer-container .font-output:not([data-alphabet="emoji"]) {
    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Arial Unicode MS', sans-serif;
}

#font-changer-container h2 {
    font-size: 1.1em;
    font-family: var(--font-mono), sans-serif;
}

#font-changer-container .card-body p {
    font-weight: 500;
}

#frequency-stats > * {
    display: inline-grid;
    place-items: center;
    min-width: 90px;
    overflow: hidden;
}

#frequency-stats[data-group-size="2"] > * {
    min-width: 120px;
}

#frequency-stats[data-group-size="3"] > * {
    min-width: 144px;
}

.font-tools .alert {
    box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));
}

#morse-code-translator .grid.swapped #input-container {
    order: 2;
}

#morse-code-translator .grid.swapped #output-container {
    order: 1;
}

#binary-translator #input-1 {
    font-family: Consolas, "Courier New", monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.font-tools h1 {
    line-height: 1.5;
}

.admin-bar .font-tools .sticky {
    top: 32px;
}

.font-tools #fonts-input input {
    display: block;
}