.btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 10px 18px;
    gap: 10px;
    font-family: "Open Sans", sans-serif;
    font-size: 23px;
    line-height: 1.2;
    transition: all 100ms ease-in-out;
    height: 48px;
    min-width: 110px;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-primary {
    background-color: var(--primaryColor);
    color: var(--secondaryColor);
}

.btn-primary:hover {
    background-color: #005DFF;
    box-shadow: 0px 4px 8px 0px #00000033;
}

.btn-primary:active {
    background-color: var(--secondaryColor);
    box-shadow: 0px 4px 8px 0px #00000033;
    color: var(--primaryColor);
}

.btn-secondary {
    background-color: var(--secondaryColor);
    color: #647188;
    border-color: #647188;
}

.btn-secondary:hover {
    border: 2px solid var(--primaryColor);
    box-shadow: 0px 4px 8px 0px #00000033;
    color: var(--primaryColor);
}

.btn-secondary:active {
    border: 1px solid #005DFF;
    box-shadow: 0px 4px 8px 0px #00000033;
    color: #005DFF;
}

.btn-container {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--secondaryColor);
    padding: 32px 24px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.btn-add-contact {
    padding: 16px 10px;
    border-radius: 10px;
    width: 100%;
    height: 60px;
}

.btn-add-contact::after {
    content: url("../assets/icons/person_add-white.svg");
    width: 32px;
    height: 32px;
}

.btn-add-contact:active::after {
    content: url("../assets/icons/person_add-blue.svg");
}

.btn-check {
    padding: 16px 10px;
    gap: 4px;
    min-height: 60px;
    min-width: 174px;
    border-radius: 10px;
}

.btn-check > span {
    flex: 1;
}

.btn-check::after {
    content: url("../assets/icons/check-primary-button.svg");
    width: 24px;
    height: 24px;
}

.btn-check:active:after {
    content: url("../assets/icons/check_blue.svg");
}

.btn-cancel {
    padding: 16px 10px;
    gap: 10px;
    min-height: 60px;
    min-width: 136px;
    border-radius: 10px;
}

.btn-cancel::after {
    content: url("../assets/icons/cancel-gray.svg");
    width: 24px;
    height: 24px;
}

.btn-cancel:hover:after {
    content: url("../assets/icons/cancel-light-blue.svg");
}

.btn-cancel:active:after {
    content: url("../assets/icons/cancel-blue.svg");
}

.overlay-footer .btn-delete {
    padding: 16px 10px;
    gap: 10px;
    min-height: 60px;
    min-width: 106px;
    border-radius: 10px;
}

.contact-action {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: #2A3647;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
}

.overlay-footer {
    display: flex;
    padding: 32px 0;
    justify-content: center;
    column-gap: 25px;
}

.btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: transparent;
    border: none;
    padding: 0;
    height: 32px;
    width: 32px;
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
}

.btn-close::after {
    content: "";
    width: 32px;
    height: 32px;
    background-image: url("../assets/icons/close_white.svg");

}

.btn-close:hover::after {
    content: "";
    background-image: url("../assets/icons/close_white_hover.svg");
}

.contact-action .btn-delete {
    display: inline-flex;
    align-items: center;
    column-gap: 6px;
}

.contact-action .btn-delete:hover {
    color: var(--lightBlue);
    font-weight: 700;
}

.contact-action .btn-delete::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("../assets/icons/delete.svg");
}

.contact-action .btn-delete:hover:before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("../assets/icons/delete_hover_blue.svg");
}

.contact-action .btn-edit {
    display: inline-flex;
    align-items: center;
    column-gap: 6px;
}

.btn-edit, .btn-delete {
    font-size: 16px;
}

.contact-action .btn-edit:hover {
    color: var(--lightBlue);
    font-weight: 700;
}

.contact-action .btn-edit::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("../assets/icons/edit.svg");
}

.contact-action .btn-edit:hover:before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("../assets/icons/edit_hover_blue.svg");
}