@layer utilities {
    .profile-edit-card {
    }

    .profile-edit-card__header {
        @apply flex flex-col gap-6 px-7 py-7 md:flex-row md:items-start md:justify-between;
    }

    .profile-edit-card__title {
        @apply flex items-center gap-3 text-3xl font-bold leading-tight text-slate-900;
    }

    .profile-edit-card__title-icon {
        @apply text-lg text-slate-400;
    }

    .profile-edit-card__subtitle {
        @apply mt-2 text-xl text-slate-500;
    }

    .profile-edit-card__actions {
        @apply flex flex-nowrap items-center gap-3;
    }

    .profile-edit-card__actions .btn {
        @apply min-w-[8.75rem] rounded-xl px-5 py-3 text-base font-semibold normal-case;
    }

    .profile-edit-card__body {
        @apply px-7 py-8;
    }

    .profile-edit-form-shell {
        @apply mt-2;
    }

    .profile-section-heading {
        @apply mb-5 block w-full border-b-2 border-primary pb-3 text-2xl font-bold leading-tight text-slate-900;
    }

    .profile-edit-form-shell #profile-form {
        @apply grid grid-cols-1 gap-x-4 gap-y-5 md:grid-cols-2;
    }

    .profile-edit-form-shell #profile-form > .form-group,
    .profile-edit-form-shell #profile-form > .group-container,
    .profile-edit-form-shell #profile-form > .form-button {
        @apply m-0;
    }

    .profile-edit-form-shell #profile-form > .form-group,
    .profile-edit-form-shell #profile-form > .group-container,
    .profile-edit-form-shell #profile-form > .form-button,
    .profile-edit-form-shell #profile-form > .alert,
    .profile-edit-form-shell #profile-form > .help-block {
        grid-column: 1 / -1;
    }

    .profile-edit-form-shell #profile-form .form-group:has(#first),
    .profile-edit-form-shell #profile-form .form-group:has(#last) {
        grid-column: auto;
    }

    .profile-edit-form-shell #profile-form .form-group:has(#type),
    .profile-edit-form-shell #profile-form .form-group:has(#country),
    .profile-edit-form-shell #profile-form .form-group:has(#state),
    .profile-edit-form-shell #profile-form .form-group:has(#postal),
    .profile-edit-form-shell #profile-form .form-group:has(#phone1),
    .profile-edit-form-shell #profile-form .form-group:has(#ssn),
    .profile-edit-form-shell #profile-form .form-group:has(#agree_confirm_1) {
        grid-column: 1 / -1;
    }

    .profile-edit-form-shell #profile-form .form-group {
        @apply relative;
    }

    .profile-edit-form-shell #profile-form .form-group:has(#agree_confirm_1) {
        @apply inline-block items-start gap-x-4 gap-y-2;
    }

    .profile-edit-form-shell #profile-form .form-group:has(#agree_confirm_1) > label {
        @apply mx-[30px] my-[-20px];
    }

    .profile-edit-form-shell #profile-form .form-group:has(#agree_confirm_1) .checkbox,
    .profile-edit-form-shell #profile-form .form-group:has(#agree_confirm_1) .choice-wrapper {
        @apply mb-0;
    }

    .profile-edit-form-shell #profile-form .form-group:has(#agree_confirm_1) .help-block,
    .profile-edit-form-shell #profile-form .form-group:has(#agree_confirm_1) .theme-help,
    .profile-edit-form-shell #profile-form .form-group:has(#agree_confirm_1) .theme-error {
        @apply basis-full;
    }

    .profile-edit-form-shell #profile-form label {
        @apply mb-2 text-base font-semibold text-slate-600;
    }

    .profile-edit-form-shell #profile-form label.required::after {
        content: ' *';
        @apply text-rose-500;
    }

    .profile-edit-form-shell #profile-form input,
    .profile-edit-form-shell #profile-form select,
    .profile-edit-form-shell #profile-form textarea {
        @apply rounded-xl px-4 py-3.5 text-lg text-slate-800 shadow-none focus:ring-2 focus:ring-primary/10;
    }

    .profile-edit-form-shell #profile-form select {
        @apply bg-white;
    }

    .profile-edit-form-shell #profile-form input[readonly],
    .profile-edit-form-shell #profile-form textarea[readonly],
    .profile-edit-form-shell #profile-form select[readonly],
    .profile-edit-form-shell #profile-form input:disabled,
    .profile-edit-form-shell #profile-form textarea:disabled,
    .profile-edit-form-shell #profile-form select:disabled {
        @apply cursor-not-allowed bg-slate-100 text-slate-500;
        -webkit-text-fill-color: #64748b;
        opacity: 1;
    }

    .profile-edit-form-shell #profile-form .help-block {
        @apply mt-2 text-sm text-slate-500;
    }

    .profile-edit-form-shell #profile-form .checkbox label,
    .profile-edit-form-shell #profile-form .checkbox-inline {
        @apply flex items-start gap-3 text-base font-medium text-slate-700;
    }

    .profile-edit-form-shell #profile-form input[type="checkbox"],
    .profile-edit-form-shell #profile-form input[type="radio"] {
        @apply mx-[0] h-5 w-5 rounded;
    }

    .profile-edit-form-shell #profile-form .form-button {
        @apply mt-3 flex justify-end;
    }

    .profile-edit-form-shell #profile-form .form-button .btn {
        @apply min-w-[10rem] rounded-xl px-6 py-3.5 text-base font-semibold normal-case;
    }
}
