.ReactModal__Content--after-open {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin-right: 50%;
    transform: translate(50%, 50%);
    height: 50%;
    width: 50%;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(0,0,0,0.2);
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(0,0,0,0.2);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(0,0,0,0.2);
}

.modal-create-info-text {
    font-size: medium;
    padding: 1vw 0;
}

button {
    --naskalit-button-color-success: rgb(0,180,0);
    --naskalit-button-color-success-hover: rgba(0,180,0, 5%);
    --naskalit-button-color-danger: rgb(200,20,0);
    --naskalit-button-color-danger-hover: rgba(200,20,0, 5%);
    border-radius: 5px;
    padding: 4px 5px;
    margin: 5px;
    font-size: 16px;
    align-self: center;
    color: white;
    background-color: var(--naskalit-button-color-primary);
    cursor: pointer;
    border: 1px solid var(--naskalit-button-color-primary);
}

button.success {
    background-color: var(--naskalit-button-color-success);
    border-color: var(--naskalit-button-color-success);
    border-radius: 5px;
}

button.success:hover {
    color: var(--naskalit-button-color-success);
    background-color: var(--naskalit-button-color-success-hover);
}

button.danger {
    background-color: var(--naskalit-button-color-danger);
    border-color: var(--naskalit-button-color-danger);
    border-radius: 5px;
}

button.danger:hover {
    color: var(--naskalit-button-color-danger);
    background-color: var(--naskalit-button-color-danger-hover);
}