.modal {
    font-family: inherit;
}

.modal input::placeholder {
    text-overflow: ellipsis;
}

.modal-background {
    background-color: rgba(10, 10, 10, 0.35);
}

.searchBtn {
    background-color: #2e79cf;
    color: #ffffff;
    border: none;
    width: 40%;
    margin: 0 auto;
}

.searchBtn:hover {
    background-color: #4d88cc;
    color: #ffffff;
}

.modal-card-head button.delete::before,
.modal-card-head button.delete::after {
    all: unset;
}

.modal-card-head button.delete {
    --buttonDimentions: 1.9rem;
    height: var(--buttonDimentions);
    width: var(--buttonDimentions);
    max-width: unset;
    max-height: unset;
    border-radius: 0.3rem;
    background-color: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

.modal-card-head button.delete:hover {
    background-color: #f44336;
    color: #ffffff;
}

.modal-card-head,
.modal-card-foot {
    background-color: #ffffff;
}

.modal .delete-close-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10;
}

.modal .delete-close-btn:hover {
    transform: scale(1.2);
}