/* Rafferty Health App CSS */
:root {
    --bg: #ffffff;
    --modal-card-bg: #f8f9fa;
    --card-bg: #f0f0f0;
}

[data-theme="dark"] {
    --modal-card-bg: #2a2a2a;
}

.rha-button.squared {
    width: calc(100% - 32px);
    border: none;
    background: var(--modal-card-bg);
    color: var(--text);
    border-radius: 14px;
    padding: 14px;
    margin: 6px 16px;
}
.rha-button {
    width: calc(100% - 32px);
    border: none;
    background: var(--modal-card-bg);
    color: var(--text);
    border-radius: 999px;
    padding: 14px;
    margin: 10px 16px;
}
    
.rha-header {
    font-size: 16px;
    padding: 10px 20px;
    font-weight: bold;
}
.rha-inputfield {
	padding: 10px 16px;
}
.rha-inputfield input {
	color: var(--text);
	border: none;
	outline: none;
	width: 100%;
	border-radius: 50px;
	padding: 10px 20px;
    background: var(--modal-card-bg);
}
.rha-password-field {
    position: relative;
}

.rha-password-field input {
    width: 100%;
    padding-right: 40px; /* space for icon */
}

.rha-password-field i {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
}

.rha-password-field i:hover {
    color: #333;
}

.rha-modal-label {
	text-align: center;
	padding: 12px;
}

.rha-element-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.rha-container {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 12px 24px;
}
.rha-container.centered {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.rha-label {
    font-weight: bold;
    font-size: 24px;
    color: var(--text);
}
.rha-sublabel {
	padding: 0px 20px;
    font-weight: bold;
    font-size: 18px;
    color: var(--text);
}

.rha-footer {
    /*background: var(--card-bg);
    border-radius: 16px;
    padding: 12px 24px;*/
}

.rha-large-pfp {
    border-radius: 999px;
    width: 72px;
    aspect-ratio: 1;
}