button.delete-button {
    background-color: rgba(255, 47, 47, 1);
}

.doka input[type="file"] {
    visibility: hidden;
}

.doka {
    position: relative;
    overflow: hidden;
    min-height: 120px;
    min-width: 200px;
    max-width: 100%;
    background-color: var(--white, #fff);
    box-shadow: -1px 3px 9px -5px rgb(0 0 0 / 50%);
    border: 1px solid var(--gray, #b9bbc6);
    border-radius: 12px;
    display: block;
}

.doka .modal-button,
.doka .delete-button,
.doka .replace-button {
    position: absolute;
    margin: 0;
    z-index: 30;
    transition: all .4s;
}

.doka .modal-button {
    top: 50%;
    right: -100%;
    height: 50%;
    width: 10%;
    border-radius: 0 0 0 4px;
}

.doka .delete-button {
    right: -100%;
    height: 50%;
    width: 10%;
    border-radius: 4px 0 0 0;
}

.doka .delete-button:hover,
.doka .replace-button:hover {
    border-color: var(--danger, #eb4b4b);
    color: var(--white, #fff);
}

.doka .replace-button {
    left: -100%;
    height: 100%;
    width: 10%;
    border-radius: 0 4px 4px 0;
}

.doka.no-delete .modal-button {
    top: 0;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.doka .modal-result {
    display: block;
    width: 100%;
    height: auto;
}

.doka label {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    text-overflow: unset;
    z-index: 20;
    margin: 0;
    margin-top: 0 !important;
    color: var(--dark, #393b47);
}

.doka label strong {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -25%);
}

.doka label strong i,
.doka label strong span {
    margin: 0 auto;
    display: block;
    text-align: center;
}

.doka label strong i {
    color: var(--primary, #0073c9);
}

.doka label:hover {
    cursor: pointer;
}

.doka input {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.doka:hover .delete-button,
.doka:hover .modal-button {
    right: 0;
}

.doka:hover .replace-button {
    left: 0;
}

.doka.hasnoimage label {
    opacity: 1;
    color: var(--primary, #0073c9);
}

.doka.hasnoimage label strong i {
    margin: 0 auto;
    display: block;
    text-align: center;
    font-size: 32px;
}

.doka.hasnoimage .modal-button,
.doka.hasnoimage .delete-button {
    display: none;
}

.doka img[src=""].modal-result {
    display: none;
}

div.doka-modal {
    border-radius: 4px;
}

/* sorgt dafür, dass das platzhalter-padding wieder verschwindet sobald ein Bild vorhanden ist */
div.doka-modal:not(.hasnoimage) .dokaspacerdiv {
    padding-bottom: 0 !important;
}

.PinturaRoot>.PinturaNav .PinturaButton:not(.PinturaButtonIconOnly):not(.PinturaDropdownIconOnly) .PinturaButtonLabel {
    color: black;
}

.PinturaRoot>.PinturaNav .PinturaButton:not(.PinturaButtonIconOnly):not(.PinturaDropdownIconOnly):not(.PinturaDropdownButton) {
    box-shadow: inset 0 0 0 1px black;
}