/* Begin user profile enhancements */

/* Style for the profile container */
.user-profile-container{
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important; /* Align content to the top */
    margin: 1em auto!important;
    padding: 1em;
    gap:1em !important;
    background-color: #ffffff;
    border-radius: 8px;
    border-width:0px;
    border-style:groove;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    width:calc(350px + (500 - 350) * ((100vw - 300px) / (1600 - 300))) !important;
}


.anonymous-login-container{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    text-align:center;
}


.subscription-info-content-column {
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    width:100%;
    gap: 1em;
}

.avatar-preview {
    border-radius: 50%;
    width: 104px;
    height: 104px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    background-color: #FFCC33;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-preview:hover {
    width:  108px;
    height: 108px;
}


.avatar-link img {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
}

.info_label_single_object{
    font-weight: bold; /* Make labels bold for better visibility */
    text-align: left; /* Align text to the left */
    font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
    font-family: 'Averia', 'Libre Serif', serif;
    width:100%;
}

.info_label_single_object_centered{
    font-weight: bold; /* Make labels bold for better visibility */
    text-align: center; /* Align text to the left */
    font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
    font-family: 'Averia', 'Libre Serif', serif;
    color: #446344;
    width:100%;
}

.label-group {
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: flex-start;
    width: 100%;
    font-family: 'Averia', 'Libre Serif', serif;
    color: #446344;
    width:100%;
}


.readonly-info-box-label {
    font-weight: bold; /* Make labels bold for better visibility */
    font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
    text-align:left;
    width:calc(80px + (120 - 80) * ((100vw - 300px) / (1600 - 300)));

}

.readonly-info-box {
    font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
    text-align:left;
}

.info-box-label {
    font-weight: bold; /* Make labels bold for better visibility */
    font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
    width:calc(80px + (120 - 80) * ((100vw - 300px) / (1600 - 300)));
}

.info-box {
    font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
}

#country_dropdown{
    width:calc(120px + (160 - 120) * ((100vw - 300px) / (1600 - 300)));
    font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
    font-family: 'Averia', 'Libre Serif', serif;
    color: #446344;
}

#profile_display_name{
    width:calc(130px + (170 - 130) * ((100vw - 300px) / (1600 - 300)));
    font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
    font-family: 'Averia', 'Libre Serif', serif;
    color: #446344;
    background-color: #FFFFFF;
}

#profile_biography{
    width:100%;
}


#admonition_displayname.show { display: block; }
#admonition_displayname.hide { display: none; }


/* Style for buttons */
.update-profile-button{
    font-family: 'Averia', 'Libre Serif', serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #446344;
    background-color: #ffffff;
    border-color: #446344 !important;
    border-width: 1px !important;
    border-style: groove !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    cursor: pointer;
}

.update-profile-button:hover{
    color: #FFCC33 !important;
    border-color: #FFCC33 !important;
    background-color: #FFFFFF !important;
}

.update-profile-button:active{
    color: #FFCC33 !important;
    border-color: #FFCC33 !important;
    background-color: #FFFFFF !important;
}

.update-profile-button.disabled{
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #E0E0E0 !important;
    border-color:#E0E0E0 !important;
}

.update-profile-button.disabled:hover{
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #E0E0E0 !important;
    border-color:#E0E0E0 !important;
}

#update-button-avatar.disabled{
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #E0E0E0 !important;
    border-color:#E0E0E0 !important;
}



.input{
    font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
    font-family: 'Verdana', sans-serif;
    max-width: calc(300px + (300 - 175) * ((100vw - 300px) / (1600 - 300)));
    width: 100%;
    display: block;
    margin: 0 auto;
}


.input-label{
    width: 185px; /* Set a fixed width for labels */
    font-weight: bold; /* Make labels bold for better visibility */
    text-align: left; /* Align text to the left */
    font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
    margin:1em !important; /* Space between rows */
    font-family:'Averia Serif Libre', serif !important;
    color:var(--e-global-color-primary) !important;
}

.subscription-activation {
    display: flex; /* Use flexbox for layout */
    flex-direction: column;
    margin:1em; 
    align-items: center;
}



.profile-membership-button.subscribed {
    background-color: var(--e-global-color-secondary,#446344); /* Green for active */
    color: #FFFFFF;
    border-color:var(--e-global-color-secondary,#446344);
}

.profile-membership-button.subscribed:hover {
    background-color: var(--e-global-color-7620581,#FFCC33);
    color: #FFFFFF;
    border-color: var(--e-global-color-7620581,#FFCC33);
}

.profile-membership-button.unsubscribed {
    background-color: #B22222;
    color: #FFFFFF;
    border-color:#B22222;
    font-weight:600 !important;
}

.profile-membership-button.unsubscribed:hover {
    background-color: var(--e-global-color-7620581,#FFCC33);
    border-color: var(--e-global-color-7620581,#FFCC33);
    font-weight:600 !important;
}


#subscription-email-newsletter-button{
     min-width:100%;
     width:300px;
     margin-bottom: 1em;
}