.newUserRow{
    @media (min-width: 768px) {
        display: grid;
        grid-template-columns: 220px auto;
    }
    font-size: 18px;
}
.american-club-panel{
    display: none;
    grid-template-columns: 1fr 1fr;
    white-space: pre;
    font-size: 1.2em;
    margin:2ch 0;
    & img{
        max-width: 100%;
        margin: auto;
        border-radius: 1ch;
        max-height: 15ch;
        margin: auto;
        padding: 0.2ch;
        border: solid 0.2ch var(--accent-color);
    }
}
#updateSubscriptionDialog{
    background: white;
    border: solid 0.5ch var(--primary-alt-color);
    border-radius: 2ch;
    font-size: 16px;
    font-weight: unset;
    width: 100%;
    padding: 15px;
}
@media only screen and (min-width: 600px) {
    #updateSubscriptionDialog {
        width: 500px;
    }
}
/* @media only screen and (max-width: 640px) {
    #newUserDialog {
        & select,
        & *[contenteditable],
        & input{
            margin-left: 0px !important;
        }
    }
    #newUserDialog #add_created_at {
        margin-left: 0px !important;
    }
} */
#newUserDialog{
    background: #b7b7b7;
    font-size: 16px;
    font-weight: unset;
    & select,
    & *[contenteditable],
    & input{
        color: #000;
        font-size: 16px;
        font-weight: unset;
        border: var(--primary-alt-color) solid 2px;
        margin-bottom: 2px; 
        border-radius: 0.5ch;
        padding-left: 1ch;
        /* margin-left: 40px; */
    }
}
#newUserDialog .newUserRow div{
    display: flex;
    justify-content: space-between;
    display: grid;
    grid-auto-columns: initial;
    grid-auto-flow: column;
}
#newUserDialog.confirm-new-user .buttonRowConfirmation{
    display:flex;
}
#newUserDialog.add-dialog #delete_user,
#newUserDialog.add-dialog .buttonRowConfirmation,
#newUserDialog.update-dialog .buttonRowConfirmation,
#newUserDialog.confirm-new-user .newUserRow,
#newUserDialog.confirm-new-user .buttonLookEdit{
    display:none;
}
#newUserDialog label{
    white-space: nowrap;
    text-align: left;
    font-weight: unset;
    grid-column: 1;
}
#newUserDialog span[contenteditable]:empty::before {
    content:"_________________";
}
#newUserDialog span {
    text-align:left;
}
#newUserDialog select {
    width:auto;
    max-width:100%;
    overflow: auto;
    /* margin-left: 38px; */
}
/* #newUserDialog #add_created_at{
    margin-left: 38px;
} */
#newUserDialog .buttonRow{
    width: 100%;
    grid-column: 1/3;
    min-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* margin-top:2ch; */
    justify-content: space-evenly;
}
#newUserDialog {
    background: #b7b7b7;
    background: white;
    border: solid 0.5ch var(--primary-alt-color);
    border-radius: 2ch;
}
.buttonLook{
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 0 0 30px;
    line-height: 34px;
    width: 212px;
    width: min-content;
    height: 34px;
    border-radius: 20px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    float: right;
    text-align: left;
    font-family: var(--alternate-font-family);
    padding: 0ch 3ch 0ch 3ch;
}
.buttonLook:hover {
    text-decoration: none;
}
#set_rewards{
    visibility: hidden;
}
#add_reward_system:checked + #set_rewards{
    visibility: visible;
}
.rewards-table{
    display:flex;
    flex-direction: column;
    width: 50vw;
    display: flex;
    flex-direction: column;
    width: 50vw;
    max-height: 40ch;
    overflow: auto;
    /*
    display: grid;
    grid-template-columns: 20ch auto;
     */
}
.reward-item{
    display: grid;
    grid-template-columns: 20ch auto;
}
input[type="number"]{
    width: 100%;
}
textarea{
    min-width: 100%;
    max-width: 100%;
    height:6ch;
    min-height: 6ch;
    max-height: 20ch;
}
/* h3 span{ */
/*     display:none; */
/* } */

h3 span.caption_user{
	text-align: center ! important;
	font-size: 2rem;
	line-height: 2.5rem;
    display: block;
}

dialog[data-user-type='27'] h3 span.caption_user:before{
    content: "Sign up a Territorial Educational Consultant:";
}
dialog[data-user-type='26'] h3 span.caption_user:before{
    content: "Sign up a District Educational Consultant:";
}
dialog a.closeDialog:before{
    content: "";
}
.know-africa-container, .know-america-container, .know-europe-container {
	& dialog[data-user-type='30'] a.closeDialog{  /* temporary user */
    	display:none;
	}
}
/* dialog[data-user-type='30'] a.closeDialog:before{
    content: "Close";
}
 */


/* .manageStudents dialog h3{ */
/*     display:none; */
/* } */

/* dialog fieldset{ */
/*     display:contents; */
/* } */

/* This is a list of all possible dialog controls, all disabled initially */
/* The following blocks enable the desired controls for each type of user */
dialog {
    & #manage_subscription,
    & #view_agreement,
    & .access_results,
    & .age-controls,
    & .birth-date-controls,
    & .children-controls,
    & .city-controls,
    & .company-controls,
    & .country-controls,
    & .email-controls,
    & .first-name-controls,
    & .font-preference-controls,
    & .gender-controls,
    & .grade-level-controls,
    & .grade-teacher-controls,
    & .grade-teacher-email-controls,
    & .hobbies-controls,
    & .instruction-level-controls,
    & .last-name-controls,
    & .mailing-address-controls,
    & .middle-name-controls,
    & .nickname-controls,
    & .occupation-controls,
    & .other-phone-controls,
    & .password-controls,
    & .phone-controls,
    & .postal-code-controls,
    & .rate-a-controls,
    & .rate-b-controls,
    & .rate-c-controls,
    & .rate-d-controls,
    & .rate-e-controls,
    & .rate-f-controls,
    & .rate-g-controls,
    & .registration-date-controls,
    & .relationship-controls,
    & .school-address-controls,
    & .school-city-controls,
    & .school-controls,
    & .school-country-controls,
    & .school-district-controls,
    & .school-email-controls,
    & .school-phone-controls,
    & .school-postal-code-controls,
    & .school-state-controls,
    & .school-email-controls,
    & .state-controls,
    & .supervisor-controls,
    & .user-access-controls,
    & .username-controls,
    & .user-type-controls,
    & .test-block-size-controls,
    & .study-repetitions-controls,
    & .rewards-controls{
        display:none;
    }
}

/****** braincoins related dialogs ************************************************/

/* administrator (braincoins) - add/edit user*/
dialog[data-is-braincoins-session='true'][data-current-user-type='1'].add-dialog h3 span.caption_user:before {
    	content: "Add user:";
	}
dialog[data-is-braincoins-session='true'][data-current-user-type='1'].update-dialog h3 span.caption_user:before {
    	content: "Edit user:";
	}
dialog[data-is-braincoins-session='true'][data-current-user-type='1'] {
	&[data-user-type='null'],  /* new user */
	&[data-user-type='25'] {   /* family member */
		& .supervisor-controls, 
		& .user-access-controls,
		& .grade-level-controls,
		& .font-preference-controls,
		& .country-controls,
		& .state-controls,
	    & .study-repetitions-controls,
	    & .test-block-size-controls,
		& .username-controls,
		& .password-controls,
		& .email-controls {
			display:contents;
		}
	}
	&[data-user-type='24'] {   /* family head */
		& .user-access-controls,
		& .grade-level-controls,
		& .font-preference-controls,
		& .country-controls,
		& .state-controls,
	    & .study-repetitions-controls,
	    & .test-block-size-controls,
		& .username-controls,
		& .password-controls,
		& .email-controls {
			display:contents;
		}
	}
	&[data-user-type='28'] {   /* secondary contact */
		& .supervisor-controls, 
	    & .access_results,
		& .username-controls,
		& .password-controls,
		& .email-controls, 
	    & .relationship-controls {
			display:contents;
		}
	}
	&[data-user-type='1'] {   /* administrator */
		& .username-controls,
		& .password-controls,
		& .email-controls {
			display:contents;
		}
	}   /* common controls */
	&[data-user-type='33'] {   /* demo user */
		& .user-access-controls,
		& .grade-level-controls,
		& .font-preference-controls,
		& .country-controls,
		& .state-controls,
	    & .study-repetitions-controls,
	    & .test-block-size-controls,
		& .username-controls,
		& .password-controls,
		& .email-controls {
			display:contents;
		}
	}
	& .user-type-controls,
	& .registration-date-controls,
	& .first-name-controls,
	& .last-name-controls,
	& .nickname-controls {
		display:contents;
	}
}

/* family head (24) - add/edit family member (25) */
dialog[data-current-user-type='24'][data-user-type='25'].add-dialog h3 span.caption_user:before {
    content: "Add family member:";
}
dialog[data-current-user-type='24'][data-user-type='25'].update-dialog h3 span.caption_user:before {
    content: "Edit family member:";
}
dialog[data-current-user-type='24'][data-user-type='25'] {
	& .user-access-controls,
	& .registration-date-controls,
	& .first-name-controls,
	& .last-name-controls,
	& .nickname-controls,
	& .username-controls,
	& .password-controls,
	& .email-controls,
	& .grade-level-controls,
	& .font-preference-controls,
	& .country-controls,
	& .state-controls,
    & .study-repetitions-controls,
    & .test-block-size-controls,
    & .rewards-controls
    {
		display:contents;
    }
}

/* family member (25) - edit own profile */
dialog[data-current-user-type='25'][data-user-type='25'].update-dialog h3 span.caption_user:before {
    content: "Edit profile:";
}
dialog[data-current-user-type='25'][data-user-type='25'] {
	& .supervisor-controls,
	& .user-access-controls,
	& .registraion-date-controls,
	& .first-name-controls,
	& .last-name-controls,
	& .nickname-controls,
	& .password-controls,
	& .email-controls,
	& .grade-level-controls,
	& .font-preference-controls,
	& .country-controls,
	& .state-controls,
    & .study-repetitions-controls,
    & .test-block-size-controls,
    & .rewards-controls
    {
		display:contents;
    }
}

/* family head (24) - add secondary contact (28) */
dialog[data-current-user-type='24'][data-user-type='28'].add-dialog h3 span.caption_user:before {
    content: "Add secondary contact:";
}
dialog[data-current-user-type='24'][data-user-type='28'].update-dialog h3 span.caption_user:before {
    content: "Edit secondary contact:";
}
dialog[data-current-user-type='24'][data-user-type='28'] {
	& .registration-date-controls,
	& .first-name-controls,
	& .last-name-controls,
    & .nickname-controls,
	& .username-controls,
	& .password-controls,
	& .email-controls,
    & .access_results,
    & .relationship-controls
    {
		display:contents;
    }
}

/* secondary contact (28) - edit own profile */
dialog[data-current-user-type='28'][data-user-type='28'] h3 span.caption_user:before{
    content: "Edit profile:";
}
dialog[data-current-user-type='28'][data-user-type='28'] {
	& .registration-date-controls,
	& .first-name-controls,
	& .last-name-controls,
    & .nickname-controls,
	& .password-controls,
	& .email-controls,
    & .relationship-controls
    {
		display:contents;
    }
}

/* family head (24) or demo user (33) - edit own profile */
dialog[data-current-user-type='24'][data-user-type='24'].update-dialog h3 span.caption_user:before,
dialog[data-current-user-type='33'][data-user-type='33'].update-dialog h3 span.caption_user:before {
    content: "Edit profile:";
}
dialog[data-current-user-type='24'][data-user-type='24'],
dialog[data-current-user-type='33'][data-user-type='33'] {
	& .user-access-controls,
	& .registration-date-controls,
	& .first-name-controls,
	& .last-name-controls,
	& .nickname-controls,
	& .password-controls,
	& .email-controls,
	& .grade-level-controls,
	& .font-preference-controls,
	& .country-controls,
	& .state-controls,
    & .study-repetitions-controls,
    & .test-block-size-controls,
    & .rewards-controls
    {
		display:contents;
	}
}
dialog[data-current-user-type='24'][data-user-type='24'][data-mepr-login='1'] .password-controls {
  display: none;  /* don't allow password change in this dialog if user is family head and has a wordpress login */
}

/* 'TemporaryUser' */
div[data-is-complete] dialog[data-user-type='30'] h3 span.caption_user:before{
    content: "Congratulations! You've started your learning journey";
    white-space: break-spaces;
    font-size: 1.5em;
    font-weight: bold;
}
div[data-is-complete='1'] dialog[data-user-type='30'] h3 span.caption_user:before{
    content: "Congratulations!\a";
    font-size: 1.5em;
    font-weight: bold;
    white-space: pre;
}
div[data-is-complete='0'] dialog[data-user-type='30'] ,
div[data-is-complete] dialog[data-user-type='30'] {
    & .american-club-panel{
        display: none;
    }
    & .age-controls,
    & .first-name-controls{
        display:contents;
    }
}


/****** dolphin related dialogs ************************************************/

/* administrator (dolphin) - add/edit user*/
dialog[data-is-braincoins-session='false'][data-current-user-type='1'] {
	& .company-controls,
	& .supervisor-controls,
	& .user-type-controls
	& .user-access-controls,
	& .registration-date-controls,
	& .first-name-controls,
	& .last-name-controls,
	& .username-controls,
	& .password-controls,
	& .email-controls,
	& .grade-level-controls,
	& .country-controls,
	& .state-controls,
    & .study-repetitions-controls,
    & .test-block-size-controls,
    & .rewards-controls
    {
		display:contents;
	}
}

/* 'Individual' user  */
dialog[data-user-type='32']{
    & .school-controls,
    & .school-address-controls,
    & .school-city-controls,
    & .school-state-controls,
    & .school-postal-code-controls,
    & .school-country-controls,
    & .school-phone-controls,
    & .school-email-controls,
    & .school-controls,
    & .school-district-controls,
    & .grade-level-controls,
    & .hobbies-controls,
    & .gender-controls,
    & .nickname-controls,
    & .birth-date-controls,
    & .grade-teacher-controls,
    & .grade-teacher-email-controls,
    & .test-block-size-controls,
    & .study-repetitions-controls,
    & .rewards-controls{
        display:contents;
    }
/*    & .supervisor-controls,
    & .company-controls,
    & .user-access-controls,
    & .user-type-controls {
        display:none;
    } */
}

/* 'Moderator', 'instructor_col', or 'SeniorManagemConsultant' user */
dialog[data-user-type='3'],
dialog[data-user-type='14'] ,
dialog[data-user-type='31'] {
    & .rate-a-controls,
    & .rate-b-controls,
    & .rate-c-controls,
    & .rate-d-controls,
    & .rate-e-controls,
    & .rate-f-controls,
    & .rate-g-controls{
        display:contents;
    }

    &.update-dialog #view_agreement{
        display:block;
    }
}

/*TerritorialEducationalConsultant 27*/
/*DistrictEducationalConsultant 26*/
dialog[data-user-type='27'] ,
dialog[data-user-type='26'] {
    & .email-controls,
    & .phone-controls,
    & .other-phone-controls,
    & .country-controls,
    & .state-controls,
    & .city-controls,
    & .mailing-address-controls,
    & .postal-code-controls,
    & .supervisor-controls,
    & .occupation-controls,
    & .instruction-level-controls,
    & .email-controls{
        display:contents;
    }

/*    & .company-controls,
    & .user-type-controls {
        display:none;
    }
    & .user-access-controls {
        display:none;
    } */
}

/* 'TemporaryUser' */
/* dialog[data-user-type='30'] { */
/*     & .american-club-panel{ */
/*         display: grid; */
/*     } */

/*     & .last-name-controls, */
/*     & .email-controls, */
/*     & .birth-date-controls, */
/*     & .first-name-controls{ */
/*         display:contents; */
/*     } */

/* /*    & .middle-name-controls, */
/*     & .school-controls, */
/*     & .grade-level-controls, */
/*     & .city-controls, */
/*     & .state-controls, */
/*     & .country-controls, */
/*     & .username-controls, */
/*     & .company-controls, */
/*     & .supervisor-controls, */
/*     & .password-controls, */
/*     & .user-type-controls */
/*     { */
/*         display:none; */
/*     }  */
/*     & .username-controls { */
/*         display:none; */
/*     } */
/* } */

select.add_security_id option:disabled, select.security_id option:disabled {
    background: #47474730;
    color: #121111;
    font-weight: bold;
}
#add_first_name, #add_last_name, #add_middle_name {
    text-transform: capitalize;
}
.openNewUserDialog{
    margin-bottom:2ch;
}
fieldset.disabled {
    pointer-events: none;
    /*visibility: hidden;*/
    & select,
    & input{
        background: lightgray;
    }
}

.related-user details{
    display: none;
    grid-column: 1;
    grid-column-end: 9;
}
.related-user details:has(.related-user){
    display: inherit;
}
.container-related-users > .related-user[data-is-main-user='1']{
    border-top: solid 5px #bfa204;
    border-left: solid 5px #bfa204;
    font-weight: bold;
}
.age_main_label:has(#age_label:empty){
    visibility: hidden;
}

.navigation-actions{
    border-bottom: solid 1px lightgray;
    border-left: solid 1px lightgray;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.related-user{
    border-bottom: solid 1px lightgray;
    border-left: solid 1px lightgray;
    gap: 10px;
}

#newUserDialog .newUserRow .rate-a-controls div,
#newUserDialog .newUserRow .rate-b-controls div,
#newUserDialog .newUserRow .rate-c-controls div,
#newUserDialog .newUserRow .rate-d-controls div,
#newUserDialog .newUserRow .rate-e-controls div{
    display: grid;
    width: 100%;
    grid-column-gap: 1ch;
    & input{
        width: min-content;
    }
    & label{
        grid-column:unset;
    }
}

button.new-related-user{
    display: none;
}

#newUserDialog[data-is-main-user='1'][data-user-type='24'] button.new-related-user{
    display: block;
}

.container-related-users{
    border: solid 2px #d4e7f6;
    margin-top: 2ch;
}

.related-user-button-container{
    margin-top: 1ch;
    border-bottom: solid 1px lightgray;
    border-left: solid 1px lightgray;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.related-user-button-container[hidden], .editUser[hidden], .delete_user[hidden] {
  display: none;
}

.container-related-users .btn {
	min-width: 15ch;
}

.related-user-name {
	font-size: max(2.4vmin, 20px);
}

#delete_user {
    margin-left: auto;
    min-width: auto;
    width:auto;
    float: right;
}

.user-column:last-child {
  margin-left: auto; /* pushes the third button to the right */
}

.edit-user-container, .delete-user-container {
    margin-bottom: 1ch;
    margin-right: 0;
    margin-left: auto;
}

.invalid-field{
    background:#ff000014
}

#newUserDialog .newUserRow div.spellcheck_container{
    position: relative;
    display:block;
    & input,
    & textarea{
        position: relative;
        background: transparent;
    }
}
#newUserDialog .newUserRow div.spell_layer{
    display: block;
    position: absolute;
    font-size: 16px;
    left: 2px;
    top: 4px;
    color: transparent;
    white-space: break-spaces;
    width: 100%;
    height: 100%;
    & mark{
        padding: 0;
        color: transparent;
        background-color: #ff440021;
        text-decoration: underline;
    }
}
#newUserDialog .newUserRow div.city-picker{
    display: flex;
    width: 100%;
    flex-direction: column;
    & select{
        display: none;
    }

    &:has(input:focus) select{
        display: block;
    }
    &:hover select{
        display: block;
    }
}
input#add_supervisor_text,
input#add_company_text{
    display: none;
}
.container-related-users>a{
    margin: 1ch 0;
}

.sky {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 80%;
    /* z-index: 9999999999999999999; */
}
.rocket {
    position: fixed;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
    animation:   launch 3s ease-in forwards;
    animation-delay: 2s;
}
@keyframes launch {
    0% {transform: translateX(-50%) translateY(0); }
    100% {transform: translateX(-50%) translateY(-100vh);}
}
.flame {
    width: 50%;
    aspect-ratio: 1.0 / 2;
    background: linear-gradient(to bottom, #ffffff 0%, #ffeb3b 20%, #ff5722 50%, transparent 100%);
    border-radius: 50% 50% 20% 20% / 100% 100% 10% 10%; /* Taper the bottom */
    filter: blur(2px); /* Soften the exhaust look */
    animation: tail-flicker 0.1s 6s alternate;
}
@keyframes flame-flicker {
  0% { transform: scaleY(1); opacity: 0.9; }
  100% { transform: scaleY(1.05); opacity: 1; }
}
.hidden { 
    display: none;
}
.confetti {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: #f2d74e; 
    top: 0px;
    animation: fall linear forwards;
}
@keyframes fall {
    0% { transform: translate3d(0,0,0); }
    100% { transform: translate3d(0,100vh,0); }
}

/* Busy state for the dialog's Add button while the create-user POST is in
   flight. Without it the button stays live and looks inert, so people press it
   again — and each press is another POST, i.e. another user. Mirrors the
   pv-busy / pv-spin convention in parent_voice_stories.css. */
body.mu-busy-cursor, body.mu-busy-cursor * { cursor: progress !important; }

.buttonLook.mu-busy,
button.mu-busy {
    opacity: .65;
    pointer-events: none;   /* belt and braces alongside [disabled] */
}
.buttonLook.mu-busy::before,
button.mu-busy::before {
    content: ""; display: inline-block; width: .9em; height: .9em;
    margin-right: .5em; vertical-align: -.12em;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: mu-spin .7s linear infinite;
}
@keyframes mu-spin { to { transform: rotate(360deg); } }