#top_toolbar {
    position: absolute;
    display: inline-block;
    top: 20px;
    left: 10%;
    z-index: 2;
}


#bottom_toolbar {
    position: absolute;
    display: inline-block;
    bottom: 20px;
    right: 10%;
    z-index: 2;
}

.toolbar .button_group {
    display: inline-block;
    border: 2px solid black;
    border-radius: 5px;
    margin: 0;
    padding: 0;
}

.toolbar .button_group > * {
    display: inline-block;
}

.toolbar button {
    color: black;
    padding: 0 0.5rem;
    border-radius: 4px;
    background-color: white;
    transition: 0.1s background ease;
}

.toolbar button:hover, .toolbar .mantine-Select-root input:hover, .toolbar .mantine-NumberInput-root input:hover {
    color: black;
    background-color: #f0f0f0;
}

.toolbar button:active, .toolbar .mantine-Select-root input:active, .toolbar .mantine-NumberInput-root input:active {
    /* erase mantine default */
    transform: none !important;
    background-color: #dbdbdb;
}

.toolbar #text_color_button svg {
    width: 15px;
}

.toolbar .toolbar_fill_color_button svg {
    width: 15px;
}


.toolbar .mantine-Select-root {
    width: 100px;
}

.toolbar .mantine-NumberInput-root {
    width: 50px !important;
}

.toolbar .mantine-NumberInput-root button {
    padding: 0;
    color: gray;
}

.toolbar .mantine-Select-root input, .toolbar .mantine-NumberInput-root input {
    /*border-radius: 0;*/
    border: none;
}

.mantine-Select-option[value="Arial"] {
    font-family: "Arial";
}

.mantine-Select-option[value="Courier New"] {
    font-family: "Courier New";
}

.mantine-Select-option[value="Georgia"] {
    font-family: "Georgia";
}

.mantine-Select-option[value="Times New Roman"] {
    font-family: "Times New Roman";
}

.mantine-Select-option[value="Verdana"] {
    font-family: "Verdana";
}

.mantine-Select-option[value="Comic Sans MS"] {
    font-family: "Comic Sans MS";
}

.mantine-Select-option[value="Rubik"] {
    font-family: "Rubik";
}