/*------------------------------------------------------------*/
/*Variables*/
/*------------------------------------------------------------*/
:root {
    --Background:           #ffffff;
    --ButtonPrimary:        #e02020;
    --ButtonPrimaryHover:   #b71111;
    --ButtonSecondary:      #185FA5;
    --ButtonSecondaryHover: #042c53;
    --Disabled:             #b8b9b9;
    --Error:                #e02020;
    --FormBackground:       #e6e6e6;
    --Glow:                 #2684e2;
    --Highlights:           #ef9f27;
    --HoverColor:           #042c53;
    --MainColor:            #185FA5;
    --NavBoarder:           #042c5330;
    --Section:              #b8b9b9;
    --Success:              #185FA5;
    --TextPrimary:          #ffffff;
    --TextSecondary:        #000000;
}


textarea {
    border-color: var(--NavBoarder);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    font-size: large;
    height: 100px;
    padding-left: 10px;
    width: 100%;
}


.cnci-um-wrapper-cs {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 40px auto;
    width: 100%;
}


.cnci-um-wrapper-cs .cnci-um-message-error-cs {
    color: var(--Error);
    font-size: larger;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
}


.cnci-um-wrapper-cs .cnci-um-message-success-cs {
    color: var(--Success);
    font-size: larger;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
}



.cnci-um-wrapper-cs form {
    background-color: var(--FormBackground);
    border-color: var(--NavBoarder);
    border-radius: 0 0 15px 15px;
    border-style: solid;
    border-width: 2px;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    padding: 15px;
    padding-bottom: 40px;
    padding-top: 20px;
    row-gap: 10px;
    width: 100%;
}


.cnci-um-form-head-cs {
    background-color: var(--MainColor);
    border-radius: 15px 15px 0 0;
    box-sizing: border-box;
    color: var(--TextPrimary) !important;
    font-size: x-large;
    font-weight: 700;
    max-width: 600px;
    padding: 15px;
    text-align: center;
    width: 100%;
}



.cnci-um-wrapper-cs form p label {
    color: var(--TextSecondary);
    font-size: large;
    font-weight: 500;
}


.cnci-um-wrapper-cs form p label input {
    border-color: var(--NavBoarder);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    font-size: large;
    height: 30px;
    padding-left: 10px;
    width: 100%;
}


.cnci-um-wrapper-cs p {
    color: var(--TextSecondary);
    font-size: large;
    font-weight: 500;
    width: 100%;
}


.cnci-um-wrapper-cs p button {
    background-color: var(--ButtonSecondary);
    border-color: var(--NavBoarder);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    color: var(--TextPrimary);
    font-size: large;
    height: 40px;
    margin-top: 20px;
    width: 100%;
}


.cnci-um-wrapper-cs p button:hover {
    background: var(--ButtonSecondaryHover);
    color: var(--Highlights);
    font-size: larger;
    text-shadow: 0 0 10px var(--Glow);
    transform: translateY(-2px);
}


.cnci-um-wrapper-cs p a {
    color: var(--Highlights);
    font-size: large;
    font-weight: 500;
    text-decoration: none;
}


.cnci-um-wrapper-cs p a:hover {
    color: var(--TextPrimary);
    text-decoration: underline;
}


.cnci-um-wrapper-cs p a:visited {
    color: var(--HoverColor);
    text-decoration: none;
}


.cnci-um-wrapper-cs form p label input[type="text"]:disabled,
.cnci-um-wrapper-cs form p label input[type="email"]:disabled {
    background-color: var(--Disabled);
    color: var(--TextSecondary);
    cursor: not-allowed;
    opacity: 0.8;
}


/*------------------------------------------------------------*/
/*Profile — static values (the view-mode face)*/
/*------------------------------------------------------------*/
/* The value shown in place of an input while not editing. Sized to match the
   input it replaces, so nothing on the page jumps when Edit Profile is pressed.

   34px, not the input's declared 30px. The input above is content-box, so its
   own 30px is only the text: the browser's 1px of padding above and below and
   this file's 1px border on each edge are added to it, and it lands on screen
   34px tall. Measured, not assumed. If the input rule ever gains
   box-sizing: border-box, this comes back down to 30px with it. */
.cnci-um-static-cs {
    align-items: center;
    border-bottom: 1px solid var(--NavBoarder);
    box-sizing: border-box;
    color: var(--TextSecondary);
    display: flex;
    font-size: large;
    font-weight: 400;
    min-height: 34px;
    padding-left: 10px;
    width: 100%;
}


.cnci-um-static-empty-cs {
    color: var(--Disabled);
    font-style: italic;
}


/* The address is the only value that can contain newlines, and the only one
   that deliberately does NOT match the height of what replaces it. The textarea
   is 106px on screen; a static value holding that much empty space where a
   one-line address sits would read as a mistake. It keeps two lines' worth and
   grows with the text instead. */
.cnci-um-static-multiline-cs {
    align-items: flex-start;
    min-height: 60px;
    padding-top: 4px;
    white-space: pre-wrap;
}


/* Scoped to the wrapper on purpose. Two classes beat the one-class display
   rules elsewhere in this file, so "hidden" wins wherever it is applied —
   including on .cnci-um-avatar-actions-cs, which is display:flex. */
.cnci-um-wrapper-cs .cnci-um-hidden-cs {
    display: none;
}


/*------------------------------------------------------------*/
/*Profile — picture*/
/*------------------------------------------------------------*/
.cnci-um-avatar-cs {
    background-color: var(--FormBackground);
    border: 3px solid var(--MainColor);
    border-radius: 50%;
    display: block;
    height: 130px;
    object-fit: cover;
    width: 130px;
}


.cnci-um-avatar-actions-cs {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: 6px;
}


.cnci-um-avatar-hint-cs {
    color: var(--TextSecondary);
    font-size: small;
    opacity: 0.7;
}


/* The real file input is hidden and its label is the visible button, so the
   control matches the rest of the form instead of showing the browser's own
   widget. Hiding it this way rather than with display:none keeps it focusable
   from the keyboard. */
.cnci-um-avatar-input-cs {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}


.cnci-um-avatar-label-cs {
    background-color: var(--ButtonSecondary);
    border: 1px solid var(--NavBoarder);
    border-radius: 5px;
    color: var(--TextPrimary) !important;
    cursor: pointer;
    font-size: small !important;
    padding: 6px 14px;
}


.cnci-um-avatar-label-cs:hover {
    background-color: var(--ButtonSecondaryHover);
    color: var(--Highlights) !important;
}


/* Shown until a picture is uploaded: the member's initials rather than an empty
   circle or a stranger's silhouette. */
.cnci-um-avatar-placeholder-cs {
    align-items: center;
    background-color: var(--MainColor);
    border: 3px solid var(--MainColor);
    border-radius: 50%;
    color: var(--TextPrimary);
    display: flex;
    font-size: 3rem;
    font-weight: 700;
    height: 130px;
    justify-content: center;
    width: 130px;
}


.cnci-um-avatar-wrap-cs {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    row-gap: 10px;
    width: 100%;
}


/*------------------------------------------------------------*/
/*Profile — Edit / Save / Cancel row*/
/*------------------------------------------------------------*/
.cnci-um-profile-actions-cs {
    column-gap: 10px;
    display: flex;
}


.cnci-um-wrapper-cs .cnci-um-profile-actions-cs button {
    margin-top: 20px;
}


.cnci-um-btn-cancel-cs {
    background-color: var(--Section) !important;
    color: var(--TextSecondary) !important;
}


.cnci-um-btn-cancel-cs:hover {
    background-color: var(--Disabled) !important;
    color: var(--TextSecondary) !important;
}