.time-ago{
	color:#336566;
	font-size:0.75em;
}

.message-text{
	font-size:0.8em;
	font-family: Arial,'‚l‚r ƒSƒVƒbƒN',sans-serif ;
}

.top-player-profile-link{
	position:relative;
	margin:-2px 0 0 0;
}

.top-player-image{
	position:relative;
	margin:3px 0 0 0;
	height:20px;
	width:20px;
	top: -3px;
}

.default-country{
	width:13px;
	height:13px;
	vertical-align:middle;	
}

#activity-title{
	text-align:center;
	/*font-style:bold;*/
	color:#336566;
	white-space: nowrap;

}

#block-userregistrationform input.username {
	width: 130px;
}
#block-userregistrationform input.form-email {
	width: 130px;
}
#block-requestnewpasswordform #edit-name--2 {
	width: 130px;
}
#block-userregistrationform div.description {
	display: none;
}

#block-requestnewpasswordform, 
#block-userregistrationform{
	display:none;
}

div.belt_icons_container {
	width: 670px;
	margin: 1.5em auto 1em;
	background-color: #fafbff;
	border: 1px solid #e5e8ef;
}

/* belts */
div.belts { 
	width: 100%; 
	overflow: hidden; 
	margin-top: 1em; 
	text-align: center; 
}

div.belts a { 
	display: inline-block;  
	text-decoration: none;
	width: 90px;
}

.belt { 
	background-repeat: no-repeat; 
	background-position: center; 
	width: 70px; 
	height: 70px; 
	padding: 0 3px; 
}

div.belts a img.rankImage {
	width: 70px; 
	height: 70px;
	background-color: white;
	margin-bottom: 10px;
	padding: 5px;
	border: 1px solid #e5e8ef;
}

div.belts a img.rankImage:hover { 
	background-color: #eeeef5;
	transform: scale(1.2);
}

div.belts a img.rankImage:hover ~ div.rankLabelForIcon { 
	/*font-size: 0.9em;*/
}

div.belts a img.activeRankImage {
	transform: scale(1.2);
	background-color: #eeeef5 !important;
	border: 3px solid #e5e8ef !important;
}

/*div.belts a img#Beginner {
	width: 25px; 
	height: 25px;	
}*/


.White{ 
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_whiteM.gif);          
	width: 59px; 
	height: 35px; 
}
#White, .White:hover{ 
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_whiteL.gif); 
	cursor:pointer; 
	width: 59px; 
	height: 35px; 
	padding-top: 20px; 
}

.Gray{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_grayM.gif);
	width: 59px;
	height: 35px;
}

#Gray, .Gray:hover{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_grayL.gif);
	cursor:pointer;
	width: 59px;
	height: 35px;
	padding-top: 20px;
}

.Yellow{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_yellowM.gif);
	width: 59px;
	height: 35px;
}

#Yellow, .Yellow:hover{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_yellowL.gif);
	cursor:pointer;
	width: 59px;
	height: 35px;
	padding-top: 20px;
}

.Orange{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_orangeM.gif);
	width: 59px;
	height: 35px;
}

#Orange, .Orange:hover{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_orangeL.gif);
	cursor:pointer; 
	width: 59px;
	height: 35px;
	padding-top: 20px;
}

.Green{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_greenM.gif);
	width: 59px;
	height: 35px;
}

#Green, .Green:hover{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_greenL.gif);
	cursor:pointer;
	width: 59px;
	height: 35px;
	padding-top: 20px;
}

.Blue{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_blueM.gif);
	width: 59px;
	height: 35px;
}

#Blue, .Blue:hover{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_blueL.gif);
	cursor:pointer;
	width: 59px;
	height: 35px;
	padding-top: 20px;
}

.Purple{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_purpleM.gif);
	width: 59px;
	height: 35px;
}

#Purple, .Purple:hover{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_purpleL.gif);
	cursor:pointer;
	width: 59px;
	height: 35px;
	padding-top: 20px;
}

.Red{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_redM.gif);
	width: 59px;
	height: 35px;
}

#Red, .Red:hover{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_redL.gif);
	cursor:pointer;
	width: 59px;
	height: 35px;
	padding-top: 20px;
}

.Brown{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_brownM.gif);
	width: 59px;
	height: 35px;
}

#Brown, .Brown:hover{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_brownL.gif);
	cursor:pointer;
	width: 59px;
	height: 35px;
	padding-top: 20px;
}

.Black{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_blackM.gif);
	width: 59px;
	height: 35px;
}

#Black, .Black:hover{
	background-image: url(/sites/kichijoji.thetamusic.com/themes/mobileresponsive/images/belts/belt_blackL.gif);
	cursor:pointer;
	width: 59px;
	height: 35px;
	padding-top: 20px;
}

#belt-table {
	width: 600px;
	line-height: 2em;
	margin: auto;
}

#belt-table tr:hover {
	background-color: #f2f2f2;
	cursor: pointer;
}

#belt_top_user_list th,
#belt_top_user_list td,
#belt-table th {
	line-height: 3 !important;
}

#belt_top_user_list tr:hover {
	background-color: #f2f2f2;
	cursor: pointer;
}

#belt_top_user_list tr:hover td.belt-username-column {
	font-weight: bold;
}

#belt_top_user_list tr:hover td.belt-username-column a {
	text-decoration: none;
}

#belt_top_user_list .tooltiptext {
	text-align: left;
	margin-left: -20px;
}

/*#belt_top_user_list .tooltip_box:hover {
	background-color: #f2f2f2;
}*/

#belt-table td {
	line-height: 5 !important;
}

.belt-class-row:hover {
	cursor: pointer;
	background-color: #f2f2f2;
}

td.belt-name-column { 
	width: 55%;
	padding-left: 18% !important;
	padding-right: 3% !important;
}

td.belt-name-column a:hover {
	text-decoration: none;
	font-weight: bold;
}

#belt-table tr:hover td.belt-name-column {
	text-decoration: none;
	font-weight: bold;
}

td.belt-name-value a{ width:140px; }
td.belt-levels-value { width:146px; }
.belt-explanation { padding: 10px 100px; }
.theta-rank-blank-table { border:1px solid;margin-left:25px; }
.theta-rank-not-blank-table .belt-table { border:1px solid; }
.theta-rank-not-blank-header { width:15px; }
.theta-rank-blank-value { width:15px; }
.theta-rank-not-blank-value { text-align:center;width:110px;font-size:125%;font-weight:bold; }
.belt-username-column { text-align:left !important;width:180px; }
.belt-user-picture { position:relative; width: 20px; height: 20px; }
.belt-username { position:relative; top:-2px; width: 20px; height: 20px; }
.belt-user-country { width:20px; }
.belt-levels .belt-points { width:160px; }
	
.belt-user-country img, .country_flag {
	display: block;
	margin: 0 auto;
}


#profile_avatar{
	margin-top:-1px;
}

.user-profile-link {
	text-decoration:none;
}
.kudo-item {
	padding: 5px 0;
}
.kudo-owner{
	color: #336566;
}
#block-userregistrationform #edit-account{
	border:none;
}
#block-userregistrationform #edit-user-picture-wrapper{
	display:none;
}
#block-musashino-classy-content .switch-item-list, #block-mobileresponsive-content .switch-item-list {
	display: none;
}

.region-content #edit-account{
	border: 1px #ccc solid;
	padding:10px;
}
.region-content #user-pass,
.region-content #user-login-form{
	border: 1px #ccc solid;
	padding:10px;
}

#block-musashino-classy-content .captcha-wrapper, #block-mobileresponsive-content .captcha-wrapper {
	/*border: 1px #ccc solid;
	padding:10px;*/
	background-color: #e4ba55;
}

#block-musashino-classy-content .captcha-wrapper input, #block-mobileresponsive-content .captcha-wrapper input {
	border: 1px solid black;
}

/* .user-register-form, */
/* .user-login-form { */
.user-login-form {
	margin-top: 0.7em;
}

.user-register-form {
	margin-top: 3em; /* same as the teacher registration page */
}

.user-register-form #edit-user-picture-wrapper{
	display:none;
}

/*.block-usernamelink, .block-tmcustom-username-link-block {
	position: relative;
	float: right;
}*/

div.username_link_div {
	float: right;
	margin-right: 2em;
	display: none;
	padding-top: 1.3em;
}

/*.block-tmcustom-username-link-block {
	margin-right: 16px;	
	float: left;
}*/


.block-tmcustom-username-link-block {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
}

/*
div.username_link_div, .block-tmcustom-username-link-block {
	float: left;
	margin-right: 16px;
}

div.username_link_div {
	float: right;
	display: none;
}
*/

div.user_picture {
	margin-right: 5px;
	float: left;
}

a.username_link {
	font-size: 1.1em;
	text-decoration: none !important;
}

.username-dropdown {
	position: relative;
	z-index: 1000;
	display: inline-block;
	margin-top: 0.1em;
}

.username-menu {
	float: left;
	display: none;
	position: absolute;
	background-color: white; /* #678b9b; */
	min-width: 230px;
	box-shadow: 0 8px 16px 0 rgba( 0,0,0,0.2 );
	z-index: 1000; /* Show user menu over the icons for Subscription, Rankings and Settings */
	left: auto;
	right: 0;
	border: 1px solid #e5e8ef;
}

.username-menu a {
	background-color: white; /* #678b9b; */
	color: #215489; /* #f2f2f2; */
	padding: 4px 16px;
	display: block;
}

.username-menu a:hover {
	background-color: #e5e5e5; /* #878ca2; */
	color: black; /* #794473; */
	font-weight: bold;
	text-decoration: none;
}

/*.username-dropdown:hover .username-menu {*/
.username_link_div:hover .username-menu {
	display: block;
}

.username-menu-icon {
	width: 30px !important;
	margin-left: -10px;
	margin-right: 3px;
}

.one-time-password-msg {
	margin-top: -15px;
}

/*.sign_in_sign_up {
	margin-top: 18px;
}*/

.username_link_div .top_sign_in, .username_link_div .top_create_account {
	font-size: 0.8em;
}

.username_link_div .top_sign_in {
	padding-right: 25px;
}

/* On sign up page, icon displayed within username input field */
.user_account_username, .sign_up_username {
	background: url( "/sites/kichijoji.thetamusic.com/files/images/username.png" ) no-repeat 18px 9px !important;
	background-color: white !important;
}

/* Icon displayed within username input field */
.user_account_email {
	background: url( "/sites/kichijoji.thetamusic.com/files/images/email.png" ) no-repeat 15px 12px !important;
	background-color: white !important;
}

/* Icon displayed within password input field */
.user_account_password, .user-register-form #edit-pass, .user-register-form #edit-pass-pass1, .user-register-form #edit-pass-pass2 {
	background: url( "/sites/kichijoji.thetamusic.com/files/images/lock.png" ) no-repeat 20px 11px;
}

.user-register-form #edit-pass {
	margin-bottom: 2em !important;
}

/* Icon displayed within school input field */
.user_account_school {
	background: url( "/sites/kichijoji.thetamusic.com/files/images/school.png" ) no-repeat 20px 11px;
}

/* Input fields on sign in / create account / forgot password pages / Captcha */
.user_account_username, .sign_up_username, .user_account_email, .user_account_password, .captcha_input, .user-register-form #edit-name, .user-register-form #edit-pass, .user-register-form #edit-pass-pass1, .user-register-form #edit-pass-pass2 {
	background-color: #ffffff;
	width: 98%;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin: 0 auto; /* center align inut field in div */
	line-height: 40px;
	text-indent: 50px; /* Padding for text displayed as placeholder in the input field */
}

.user_account_email {
	width: 97.5% !important;
	margin-left: 5px;
}

.user_account_username:-webkit-autofill, .user_account_password:-webkit-autofill, .user-register-form #edit-pass-pass1:-webkit-autofill, .user-register-form #edit-pass-pass2:-webkit-autofill, .sign_up_username:-webkit-autofill,
.user_account_email:-webkit-autofill {
	text-indent: 10px !important;
	background: none !important;
	background-color: white !important;
}

/* Extra settings for captch input */
.captcha_input {
	width: 99% !important;
	line-height: 30px;
	text-indent: initial;
}

.form-item-captcha label, #edit-pass label {
	text-align: left;
}

/* Remove placeholder text from the username field when the field has focus */
.user_account_username:focus::-webkit-input-placeholder {
	text-indent: -999px;
}
.user_account_username:focus:-moz-placeholder {
	text-indent: -999px;
}
.user_account_username:focus::-moz-placeholder {
	text-indent: -999px;
}
.user_account_username:focus::-ms-input-placeholder {
	text-indent: -999px;
}

/* Remove placeholder text from the username field when the field has focus */
.sign_up_username:focus::-webkit-input-placeholder {
	text-indent: -999px;
}
.sign_up_username:focus:-moz-placeholder {
	text-indent: -999px;
}
.sign_up_username:focus::-moz-placeholder {
	text-indent: -999px;
}
.sign_up_username:focus::-ms-input-placeholder {
	text-indent: -999px;
}

/* Remove placeholder text from the password field when the field has focus */
.user_account_password:focus::-webkit-input-placeholder, .user-register-form #edit-pass-pass1:focus::-webkit-input-placeholder, .user-register-form #edit-pass-pass2:focus::-webkit-input-placeholder {
	text-indent: -999px;
}
.user_account_password:focus:-moz-placeholder, .user-register-form #edit-pass-pass1:focus:-moz-placeholder, .user-register-form #edit-pass-pass2:focus:-moz-placeholder {
	text-indent: -999px;
}
.user_account_password:focus::-moz-placeholder, .user-register-form #edit-pass-pass1:focus::-moz-placeholder, .user-register-form #edit-pass-pass2:focus::-moz-placeholder {
	text-indent: -999px;
}
.user_account_password:focus::-ms-input-placeholder, .user-register-form #edit-pass-pass1:focus::-ms-input-placeholder, .user-register-form #edit-pass-pass2:focus::-ms-input-placeholder {
	text-indent: -999px;
}

/* Remove placeholder text from the email field when the field has focus */
.user_account_email:focus::-webkit-input-placeholder {
	text-indent: -999px;
}
.user_account_email:focus:-moz-placeholder {
	text-indent: -999px;
}
.user_account_email:focus::-moz-placeholder {
	text-indent: -999px;
}
.user_account_email:focus::-ms-input-placeholder {
	text-indent: -999px;
}

/* Create account: Remove placeholder text from the username field when the field has focus */
.user-register-form #edit-name:focus::-webkit-input-placeholder {
	text-indent: -999px;
}
.user-register-form #edit-name:focus:-moz-placeholder {
	text-indent: -999px;
}
.user-register-form #edit-name:focus::-moz-placeholder {
	text-indent: -999px;
}
.user-register-form #edit-name:focus::-ms-input-placeholder {
	text-indent: -999px;
}

/* Submit button sign in / create account / forgot password pages */
.user_account_submit, .user-register-form .button {
	background: none;
	background-color: #cc9900;
	border: 0;
	width: fit-content;
	/* padding: 0px 24px; */
	padding: 6px 38px;
	font-weight: bold;
	/* font-size: 17px; */
	font-size: 19px;
	line-height: 36px;
}

/* Main div wrapper of the sign in box */
/*.user_signin_div_wrapper, .forgot_password_div_wrapper {
	border-radius: 5px;
	background-color: #e6e6ea;
	margin: 0 auto;
	width: 60%;
}*/

/* div containing all elements of the Sign in, Create account or Forgot password box */
.user_signin_div, .forgot_password_div, .create_account_div {
	margin: 0 auto; /* center align div within its container */
	width: 40%;
	border-radius: 5px;
	background-color: #faf9f9;
	border: 1px solid #5c6485;
}

/* .user_signin_div, */
/* .create_account_div { */
.user_signin_div {
	margin-top: -10px;
	position: relative;
	/* left: -90px; */
}

.create_account_div { 
	margin-top: -10px;
	position: relative;
}

.user_signin_div input[type="text"], .user_signin_div input[type="password"], 
.create_account_div input[type="text"], .create_account_div input[type="password"], .create_account_div input[type="email"],
.forgot_password_div input[type="text"] {
	border: 1px solid #5c6485 !important;
}

.create_account_div .form-item-mail, .create_account_div .form-item-name, .create_account_div .form-item-pass {
	margin-bottom: 25px;
}

.user_signin_inner_div, .forgot_password_inner_div, .create_account_inner_div {
	width: 70%;
	text-align: center;
	margin:0 auto;
}

.forgot_password_inner_div {
	width: 100%;
}

.forgot_password_div .user_account_username, .forgot_password_div .user_account_submit {
	width: 60%;
}

/* Forgot password link container on sign in page */
.user_signin_forgot_password_div {
	width: 99%;	
}

/* Forgot password link on sign in page */
.user_signin_forgot_password_div a {
	color: #837f67;
	font-size: 1em;
	text-align: right;
}

/* Links to Sign in, Create Account and Forgot password pages */
.user_signin_create_account_div a, 
.user_sign_in_label,
.forgot_password_signin_div a, 
.forgot_password_create_account_div a, 
.create_account_signin_div a, 
.create_account_forgot_password_div a {
	font-size: 1.1em;
	color: #59415a;
	font-weight: bold;
}

/* Create account page: Email and username input fields */
.user-register-form .sign_up_username, .user-register-form .user_account_email, .user-register-form .captcha_input, .user-register-form #edit-name, .user-register-form #edit-pass, .user-register-form #edit-pass-pass1, .user-register-form #edit-pass-pass2 {
	line-height: 30px;
}

.user-register-form #edit-pass--description {
	text-align: left;
	font-size: 0.9em;
}

/* button class in musashino.css shows green button. Change it to show same button color as Sign in and Forgot password page */
.user-register-form .button {
	background: none;
	background-color: #cc9900;
	border: 0;
	width: fit-content;
	/* padding: 0 25px; */
	padding: 6px 38px;
	font-weight: bold;
}

.user-register-form .button:hover {
	border: none;
	background: none;
	background-color: #cc9900;
	color: black;
}

.downloadReceiptLinks {
	display: none;
	width: 52%;
	margin-top: -2.5rem;
	background-color: #f7f7f7;
	border: 0.1em solid #dddddd;	
	padding: 2.1rem 0 1rem;
}

.covid19_message {
	width: 70%;
	margin: 0 auto;
	margin-bottom: 1.5rem;
}

.covid19_form_fields {
	width: 70%;
	margin: 0 auto;
}

.covid19_form_fields .captcha-wrapper {
	width: 68%;
}

.covid19_mobile_app {
	float: right;
	padding-right: 6rem;
}

/* GK200609 Hide "Save" button on the user account page */
.user-form #edit-actions {
	text-align: center;
}

.user-form input[type='text'], .user-form input[type='email'], .user-form input[type='password'], .user-form .change_password, .user-form .change_personal_info, .user-form .add_more_students_in_current_plan, .user-form .renew_membership {
	width: 40rem;
	border: 1px solid #ccc;
}

/* Same width as input text fields on the page */
.user-form .change_password, .user-form .change_personal_info, .user-form .add_more_students_in_current_plan, .user-form .renew_membership {
	text-align: center;
}

/* bootstrap sets height for input.form-control class to 34px. form-control class is added by drupal on sign up page. changing the height back for the input fields. */
.user-register-form input.form-control {
	height: auto;
}

/* Main menu links */ 
li > a.settings,
li > a.signup, 
li > a.signin,
li.teachers, 
li.students,
li.belt-rankings,
li.subscription {
	display: none;
}

/*
li.settings, li.belt-rankings, li.subscription {
	float: right !important;
}
*/

/* Do not display "Teachers" link in the menu bar by default */
/*#main-menu-link-contentf6320b89-5a16-4753-bc2b-6120ac25eb18, #main-menu-link-content81500dce-2acf-4436-b4f1-a9427fe05a0d, #main-menu-link-content2870bcf0-0e9d-4359-9de8-b1ab0b0f9f2a {
	display: none;
}*/

.user-form #edit-reset-account label {
	width: 90%;
	word-wrap: normal;
	white-space: normal;	
	display: inline-block; 
  vertical-align: top;	
}

/* Hide "Preview" button */
.contact-message-form #edit-preview {
	display: none;
}

.user_account_page_logo {
	/* width: 240px; */
	width: auto;
	height: 37px;
}

.levels-completed-by-highest-level-in-games {
	font-size: 0.7em;
}

.rank-list-icon {
	width: 55px;
	height: 55px;
}

.rankLabelForIcon {
	text-decoration: none;
	font-size: 0.85em;
}

div.belts a:hover div.rankLabelForIcon {
	visibility: visible;
}

div.rank-page-header {
	font-size: large;
	font-weight: bold;
	color: #215587;
	text-align: center;
	margin-top: 1em;
}

.rankLinkWithIconAndText {
	display: inline-block !important;
	text-align: center;
	/*width: max-content !important;*/
}

.username-menu .teachers-menu-icon {
	padding-left: 40px !important;
	background-image: url( '/sites/kichijoji.thetamusic.com/files/images/menu_icons/teachers.png' ) !important;
	background-repeat: no-repeat !important;
	background-size: 20px 15px !important;
	background-position: top 10px left 10px !important;
}

.username-menu .students-menu-icon {
	padding-left: 40px !important;
	background-image: url( '/sites/kichijoji.thetamusic.com/files/images/menu_icons/students.png' ) !important;
	background-repeat: no-repeat !important;
	background-size: 20px 17px !important;
	background-position: top 10px left 10px !important;
}

.username-menu .progress-menu-icon {
	padding-left: 40px !important;
	background-image: url( '/sites/kichijoji.thetamusic.com/files/images/menu_icons/progress.png' ) !important;
	background-repeat: no-repeat !important;
	background-size: 20px 20px !important;
	background-position: top 10px left 10px !important;
}

.username-menu .my-account-menu-icon {
	padding-left: 40px !important;
	background-image: url( '/sites/kichijoji.thetamusic.com/files/images/menu_icons/account.png' ) !important;
	background-repeat: no-repeat !important;
	background-size: 20px 15px !important;
	background-position: top 10px left 10px !important;
}

.username-menu .user-profile-menu-icon {
	padding-left: 40px !important;
	background-image: url( '/sites/kichijoji.thetamusic.com/files/images/menu_icons/profile.png' ) !important;
	background-repeat: no-repeat !important;
	background-size: 20px 15px !important;
	background-position: top 10px left 10px !important;
}

.username-menu .signout-menu-icon {
	padding-left: 40px !important;
	background-image: url( '/sites/kichijoji.thetamusic.com/files/images/menu_icons/logout.png' ) !important;
	background-repeat: no-repeat !important;
	background-size: 20px 15px !important;
	background-position: top 10px left 10px !important;
}

.authentication-social-signin-separator {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 4rem;
    justify-content: center;
    margin: -1.5rem 0 2rem;
}

.authentication-social-signin-separator>:first-child, .authentication-social-signin-separator>:last-child {
    background-color: #c8c8c8;
    flex-grow: 1;
    height: 0.1rem;
}

.authentication-social-signin-paragraph {
	color: #5c6485;
	font-size: 1.4rem;
	margin-top: -0.1rem;
	padding: 0 2.5rem;	
}

.authentication-social-signin-options {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: space-between;
}

.authentication-social-signin-options-teacher-registration {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: space-between;
	width: max-content;
	margin: auto;
}

.authentication-social-signin-social-button {
	align-items: center;
    border-radius: 0.5rem;
    box-shadow: 0 0.1rem 0.2rem 0.05rem #c8c8c8; /*rgb(0 0 0 / 15%);*/
    display: flex;
    font-size: 1.4rem;
    font-weight: 400;
    justify-content: center;
    line-height: 1.2;
    min-height: 5rem;
    padding-left: 6.5rem;
    padding-right: clamp(2rem,8vw,4rem);
    position: relative;
    width: 100%;	
	text-decoration: none;
}

.authentication-social-signin-social-button-teacher-registration {
	align-items: center;
	border-radius: 0.5rem;
	box-shadow: 0 0.1rem 0.2rem 0.05rem #c8c8c8; /*rgb(0 0 0 / 15%);*/
	display: flex;
	font-size: 1.4rem;
	font-weight: 400;
	justify-content: center;
	line-height: 1.2;
	min-height: 5rem;
	padding-left: 6.5rem;
	padding-right: clamp(2rem,8vw,4rem);
	position: relative;
	width: 100%;	
	text-decoration: none;
	padding-left: 11rem;
	padding-right: 11rem;
}

.authentication-social-signin-social-button:hover,
.authentication-social-signin-social-button-teacher-registration:hover {
	text-decoration: none;
}

.authentication-social-signin-social-button .authentication-social-signin-social-icon,
.authentication-social-signin-social-button-teacher-registration .authentication-social-signin-social-icon {
	position: absolute;
}

.authentication-social-signin-social-icon {
	height: 2.2rem;
    left: 2.5rem;
    position: absolute;
    width: 2.2rem;
}	

/*.authentication-social-signin-social-icon.google {
	position: relative;
}*/

.authentication-social-signin-google { 
	background-color: #fff;
    border: 0.1rem solid #d9d8d8;
    color: #262421;
    transition: color .2s ease;
}

.authentication-social-signin-google:hover {
    color: #262421;
	opacity: 0.85;
}

.authentication-social-signin-social-icon.google:before {
    background-image: url(/sites/kichijoji.thetamusic.com/files/images/google_logo.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

.authentication-social-signin-google:visited {
	color: black;
}

.authentication-social-signin-apple {
    background-color: #000;
    border: 0.1rem solid #d9d8d8;
    color: #fff;
    transition: color .2s ease;
}

.authentication-social-signin-apple:hover {
  color: #fff;
	opacity: 0.85;
}

.authentication-social-signin-social-icon.apple:before {
    background-image: url(/sites/kichijoji.thetamusic.com/files/images/apple_logo.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

.authentication-social-signin-apple:visited {
	color: white;
}

.authentication-social-signin-microsoft { 
	background-color: #0077db;
	border: 0.1rem solid #d9d8d8;
	color: white;
	transition: color .2s ease;
}

.authentication-social-signin-microsoft:hover {
	color: #fff;
	opacity: 0.85;
}

.authentication-social-signin-social-icon.microsoft:before {
	background-image: url(/sites/kichijoji.thetamusic.com/files/images/microsoft_logo.png);
	background-repeat: no-repeat;
	background-size: 100%;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	width: 100%;
}

.authentication-social-signin-microsoft:visited {
	color: white;
}

.band-instrument-icon {
	width: 24px;
	height: 24px;
}

/* parent element containing all select options in select2 dropdown list */
.select2-results {
	margin: auto 4px 4px !important;	
	padding-top: 4px !important;
}

/* Height of the select2 dropdown list */
.select2-container--default .select2-results>.select2-results__options {
	max-height: 230px !important;
}

/* Down arrow for the dropdown list in select2 dropdown */
.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 5px !important;
	right: 3px !important;
}

/* Down arrow for the dropdown list in select2 dropdown */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-width: 8px 5px 0 5px !important;
}

/* Selected option displayed after it is selected in select2 dropdown list */
.select2-container .select2-selection--single {
	height: 40px !important;		
}

/* Selected option displayed after it is selected in select2 dropdown list */
.select2-container .select2-selection--single .select2-selection__rendered {
	margin: 4px 5px auto;
}

/* select2 dropdown search field */
.select2-search--dropdown .select2-search__field {
	padding: 1px auto !important;
	margin: 2px auto !important;
}

/* select2 dropdown option */
.select2-results__option {
	padding: 6px 8px !important;
}

/* Hover on option in select2 dropdown list */
.select2-container .select2-results__option--highlighted[aria-selected] {
	background-color: #f0f2f7 !important;
	color: black !important;
	border-radius: 4px !important;
}

/* Selected option in select2 dropdown list */
.select2-container .select2-results__option[aria-selected=true] {
	background-color: #dee3ec !important;
	border-radius: 4px !important;
}


.fyb_course_promotion_course_box {
	width: 98%;
	/* float: left; */
	background-color: #fafbff;
	/* padding: 0 10px; */
	/* margin: 0 10px; */
	line-height: 1 !important;
	text-align: center;
	white-space: nowrap;
	margin: auto;	
}

.fyb_course_promotion_header {
	text-align: center;
	font-size: x-large;
	font-weight: bold;
	color: #215587;
	margin: 1em 0;
}

.fyb_course_promotion_image_and_features {
	display: flex;
	height: fit-content;
	/*padding: 1.5em 1em;*/
	/*font-size: 1.5em;*/
	align-items: center;
	justify-content: center;	
	/* margin-right: 1em; */
	background-color: white;
	border: 1px solid #e5e8ef;
	cursor: pointer;
	width: fit-content;
	padding: 2em 4em;
	margin: auto;
}

.fyb_course_promotion_image_and_features:hover {
	background-color: #eeeef5;
}

.fyb_course_promotion_image {
	display: flex;
	margin-right: 2em;
	font-size: 1.3em;
}

.fyb_course_promotion_course_box a {
	font-size: 1em;	
	font-weight: bold;
	color: black;
}

.fyb_course_promotion_course_box a:link {
	text-decoration: none;		
}

.fyb_course_promotion_course_features {
	display: flex;
	width: min-content;
}

.fyb_course_promotion_course_features ul {
	display: flex;
	flex-flow: wrap;
	line-height: 1.7;
	justify-content: left;
	/*margin-top: 0.5em;*/
	font-size: medium;
}

/*.fyb_course_promotion_course_features ul li {
	display: inline;
	margin-right: 1em;
}

.fyb_course_promotion_course_features ul li:before {
	content: '\00a0\2022\00a0\00a0';
}*/

.fyb_course_promotion_games_container {
	clear: both;
	margin: 3em 0 1em;
}

.fyb_course_promotion_games_container h4 {
	font-size: 1.4em;
	font-weight: bold;
	white-space: pre-wrap;
	color: #215587;
}

.fyb_course_promotion_games {
	display: flex;
	margin-top: 1.5em;
}

.fyb_course_promotion_game_box {
	float: left;
	width: 25%;
	/*background-color: white;*/
	/*padding-top: 10px;*/
	/*padding-bottom: 10px;*/
	padding-left: 10px;
	padding-right: 10px;
	/*margin-left: 1%;
	margin-right: 1%;*/
	/*margin-bottom: 10px;*/
	line-height: 1.5 !important;
	text-align: center;
}

.fyb_course_promotion_game_box:hover {
	transform: scale(1.1);
}

.fyb_course_promotion_game_icon {
	width: max-content;
	margin: auto;
}

.fyb_course_promotion_game_icon img {
	height: 110px;
}

.account_benefits {
	display: block;
	font-size: small;
	cursor: pointer;
	float: right;
	margin-top: -1em;
	margin-bottom: 0.5em;
}

.account_benefits_description {
	display: none;
	clear: both;
	font-size: smaller;
	border: 1px solid black;
	padding: 0.5em;
	text-align: left;
	background: #e0e0e0;
	border-radius: 7px;
}

.close_x_transparent {
	position: absolute;
	display: none;
	top: 0px;
	right: 0px;
	width: 17px;
	height: 17px;
	background-image: url( "/sites/kichijoji.thetamusic.com/files/images/close_x_transparent.png" );
	background-repeat: no-repeat;
}

.close_x,
.close_create_new_class {
	position: absolute;
	display: block;
	top: 0px;
	right: 0px;
	width: 17px;
	height: 17px;
	background-image: url( "/sites/kichijoji.thetamusic.com/files/images/close_x.png" );
	background-repeat: no-repeat;
}

.close_create_new_class {
	top: 6px;
	right: 4px;
}

#payment_option_list {
	margin-bottom: 1em;
}

.payment_option {
	background-color: #fafbff;
	outline: 1px solid #e8ece8;
	margin: 0.6em auto;
	padding: 0.8em;
	border-radius: 4px;
}

.payment_option label:hover,
.payment_option:hover {
	cursor: pointer;
}

.payment_option_selected {
	background-color: #e8ece8;
	outline: 1px solid #fafbff;
}

.adjust_confirm_account_deletion_div {
	margin-top: 65px;
	position: initial;
	left: 0;
}

.make_default_payment_method {
	float: right;
	border-color: #aeaeae;
	border-radius: 5px;
	font-size: smaller;
	padding: 2px 15px;
}

.authentication-social-signin-clever { 
	background-color: white;
	border: 0.2rem solid #436cf2;
	color: #436cf2;
	transition: color .2s ease;
}

.authentication-social-signin-clever:hover {
	opacity: 0.85;
}

.authentication-social-signin-social-icon.clever:before {
	background-image: url(/sites/kichijoji.thetamusic.com/files/images/clever_logo.png);
	background-repeat: no-repeat;
	background-size: 100%;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	width: 100%;
}

.authentication-social-signin-clever:visited {
	color: black;
}

.authentication-social-signin-classlink { 
	background-color: #0a4d7f;
	color: white;
	/* font-family: 'Helvetica Neue Lt Std'; */
	/* font-weight: bold; */
	transition: color .2s ease;
}

.authentication-social-signin-classlink:hover {
	opacity: 0.9;
	color: white;
}

.authentication-social-signin-social-icon.classlink:before {
	background-image: url(/sites/kichijoji.thetamusic.com/files/images/classlink_logo.png);
	background-repeat: no-repeat;
	background-size: 100%;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	width: 100%;
}

.authentication-social-signin-classlink:visited {
	color: white;
}

.dashboard_class_leaderboard {
	padding-bottom: 1em;
}

.dashboard_class_leaderboard_row {
	clear: both;
	font-size: large;
	margin-left: 40px;
	padding: 5px 0;
	text-decoration: none;
}

a.go-premium-button-anonymous-user {
	float: left;
	margin-right: 2em;
	margin-top: -0.3em;
	background: #cc9900 !important;
	padding: 4px 12px !important;
	box-shadow: unset;
	border: none;
}

a.go-premium-button-logged-in {
	float: left;
	margin-right: 2em;
	margin-top: 0.8em;
	background: #cc9900 !important;
	border: none;
}

a.go-premium-button-anonymous-user:hover,
a.go-premium-button-logged-in:hover {
	color: white;
	background: #cc9900;
	background-color: #cc9900;
	border: none;
	-moz-box-shadow: unset;
	-webkit-box-shadow: unset;
	box-shadow: unset;
}

.signup-dialog-box-wide-screen,
.signup-dialog-box-small-screen {
	display: none;
}

.signup-or-login-dialog-box {
	display: none;
	align-items: center;
	box-sizing: border-box;
	box-shadow: 10px 2px 25px 0px rgba(0, 0, 0, .35);
	/* display: flex; */
	flex-flow: column;
	justify-content: center;
	margin: 0 .5rem;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	background-color: white;
	background-image: url( "/sites/kichijoji.thetamusic.com/files/images/signup_dialog_background.png" );
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.signup-or-login-dialog-box-close {
	position: absolute;
	display: block;
	top: 8px;
	right: -10px;
	width: 30px;
	height: 30px;
	transform: scale(1.1);
	background-image: url( "/sites/kichijoji.thetamusic.com/files/images/close_x.png" );
	background-repeat: no-repeat;
	z-index: 10; /* Make sure the "X" sign is not overlapped by other elements */
}

.signup-dialog-box {
	align-items: center;
	/* background-color: #fff; */
	border-radius: 5px;
	box-shadow: 0 2px 25px 50px rgba(0, 0, 0, .1);
	box-sizing: border-box;
	display: flex;
	flex-flow: column;
	justify-content: center;
	max-width: 875px;
	padding: 2rem 3.5rem;
	width: 100%;
	line-height: 3;
}

.signup-card-group {
	align-items: stretch;
	display: flex;
	flex-flow: row;
	justify-content: center;
	margin-bottom: 2rem;
	width: 100%;
}

.signup-card-wide-screen {
	display: flex;
	flex-flow: column;
}

.signup-card-group input {
	height: 1px;
	margin: 0 0 0 -1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.signup-card-group label {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-flow: column;
	/* justify-content: center; */
	margin: 0 .6rem;
	padding: 2.75rem 1.75rem;
	width: 250px;
	height: 175px;
	background-color: #fff;
	/* border: 1px solid #dfe1e9; */
	border-radius: 5px;
	box-shadow: 0 0 11px 0 rgba(0, 0, 0, .11);
	box-sizing: border-box;
	flex: 1;
	position: relative;
	font-weight: bold;
}

.signup-card-group label p {
	font-weight: normal;
	line-height: 1.5;
}

.signup_dialog_continue_button {
	display: none;
	width: max-content;
	margin-top: 0.5em;
	border-color: transparent;
}

.signup-or-login-dialog-box ul {
	font-size: small;
	line-height: 1.8;
}

.signup-option-border {
	border: 2px solid #e4ba55 !important;
}

.signup-message {
	display: none;
}

.signup-or-login-dialog-box .existing-account {
	margin-top: 1em;
}

.signup-or-login-dialog-box .existing-account-below-continue {
	margin-top: 2em;
}

.non-scrollable {
	overflow: hidden;
}

.signup-benefits-wide-screen {
	line-height: 1.5;
	font-size: small;
	clear: both;
	margin: 1em auto auto;
}

.signup-benefits,
.signup-message {
	line-height: 1.5;
	font-size: small;
	clear: both;
	margin: 1em auto auto;
}

.signup-page-header {
	font-size: large;
}

.user_signin_div .user_account_submit,
.forgot_password_div .user_account_submit {
	color: white;
}

.user_signin_div .user_account_submit:hover, 
.forgot_password_div .user_account_submit:hover {
	color: black;
}

.width_fit_content {
	width: fit-content;
}
	
.timezone_select_list {
	width: max-content;
}

#paymentModalLabel {
	font-weight: bold;
}

/* "x" button to close the dialog box */
#paymentModal .close {
	margin-top: -25px !important;
}

#edit-reset-account label {
	display: inline-block !important;
}

#card-errors {
	text-align: center;
}

#user-form {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;	
}

#user-form > div {
	width: 48%;
}

#edit-account {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 15px;	
}

#edit-personal-information--content {
	margin: auto;
	width: fit-content;	
}

#edit-reset-account .panel-body {
	width: fit-content;
	margin: auto;
}

.credit_card_operation_buttons {
	width: fit-content;
	margin: auto;
}

.credit_card_operation_buttons a {
	width: 100px;
	text-align: center;
	margin: auto 10px;
}

.user-form #edit-actions {
	text-align: center;
	flex: 2;
}

a.reset-user-account {
	display: block;
	text-align: center;
}

.student_account_layout {
	justify-content: center;
	align-items: center;
	flex-direction: column;	
}

.back-to-school-offer-ends {
	width: fit-content;
	margin: auto;
	margin-top: 1em;
	color: red;
	font-weight: bold;	
}


@media (min-width: 30em) {
	.authentication-social-signin-social-button {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	/* .authentication-social-signin-social-button-teacher-registration { */
		/* padding-left: 11rem; */
		/* padding-right: 11rem; */
	/* } */
}


/* For desktop browser */
@media (max-width : 1300px) {

	/* div containing all elements of the Sign in, Create account or Forgot password box */
	.user_signin_div, .forgot_password_div, .create_account_div {
		width: 55%;
	}
}


@media (max-width : 1150px) {

	#user-form {
		gap: 1em;
	}
	
	.make_default_payment_method {
		display: block;
		float: none;
		margin-top: 10px;
	}
	
	.user-form input[type='text'], .user-form input[type='email'], .user-form input[type='password'], .user-form .change_password, .user-form .change_personal_info, .user-form .add_more_students_in_current_plan, .user-form .renew_membership {
		width: 100%;
	}
}


/* For desktop browser */
@media (max-width : 1100px) {

	/* div containing all elements of the Sign in, Create account or Forgot password box */
	/* .user_signin_div, .forgot_password_div, .create_account_div { */
	.user_signin_div, .forgot_password_div {
		width: 65%;
	}
	
	.create_account_div {
		left: 0;
	}
}


/* For desktop browser */
@media (max-width : 930px) {

	/* div containing all elements of the Sign in, Create account or Forgot password box */
	.user_signin_div, .forgot_password_div, .create_account_div {
		width: 75%;
	}
	
	.belt-table tr th {
		font-size: 0.9em !important;
	}
	
	.theta-rank-not-blank-value {
		font-size: 100%;
	}
}


@media (max-width : 880px) {
	
	.signup-or-login-dialog-box {
		top: 2em;
		transform: translate(-50%, 0);
		font-size: small;
	}
	
	.signup-or-login-dialog-box h1 {
		margin-top: 0.5em;
		font-size: 1.9rem;
	}
	
	.signup-dialog-box {
		line-height: 1.5;
	}
	
	.signup-card-group {
		flex-flow: column;
		align-items: center;
		margin: 0.6em;
		width: 100%;
		line-height: 1.5;
	}
	
	.signup-card-group label {
		margin: 0.5em 0;
		width: 600px;
		height: auto;
		justify-content: center;
	}
	
	.signup-card-group span {
		margin-bottom: 0.3em;
	}
	
	.signup_dialog_continue_button {
		font-size: medium;
	}
}


@media (max-width : 860px) {
	a.go-premium-button-anonymous-user,
	a.go-premium-button-logged-in {
		display: none;
	}
}


/* Device width <= 800px */
@media (max-width : 800px) {

	/* Page header on sign up, sign in and forgot password apges */
	/*h1.sign_up_header, h1.sign_in_header, h1.forgot_password_header {
		font-size: 2rem;
	}*/

	/* Sign up page: Input fields and submit button */
	/*.user-register-form #edit-name, .user-register-form #edit-mail, .user-register-form #edit-actions {
		width: 90%;
		margin: 0 auto;
	}*/

	li.settings, li.belt-rankings, li.subscription {
		float: left !important;
	}
	
	/* Belt table displaying belt name list */
	#belt-table {
		width: 70%;
		line-height: 2rem;
		clear: both;
	}
	
	/*td.belt-name-value a { 
		width: 60%; 
	}*/
	
	/*td.belt-levels-value { 
		width: 40%; 
	}*/

	div.getting_started_course_special_label {
		font-size: 1.8rem;
		padding-top: 0.3rem;
	}
	
	div.getting_started_course_label {
		font-size: 1.8rem;
		padding-top: 2rem;
	}
	
	.user_signin_div, .create_account_div, .forgot_password_div {
		margin: 0 auto;
		width: 100%;
		position: initial;
		left: initial;
	}

	.create_account_inner_div {
		width: 90%;
	}
	
	.user-register-form #edit-pass--description {
		display: none;
	}
		
	.username_link_div {
		display: none;
	}	

	.user-form input[type='text'], .user-form input[type='password'], .user-form .change_password, .user-form .change_personal_info, .user-form .add_more_students_in_current_plan, .user-form .renew_membership {
		width: 100%;
	}

	td.belt-name-column {
		width: 50%;
		padding-left: 10% !important;
	}

	/* "X" icon at top right corner of the course box on home page and course workouts page */
	.close_x_transparent {
		display: block;
	}

	.signup-or-login-dialog-box {
		top: 5em; /* Show dialog box below the hamburger menu so it does not overlap with the menu */
		width: 90%; /* Keep some space on the side so the X mark is always clickable */
	}
}


@media (max-width : 799px) {	
	/* Smallest ipad width is 800px. Do not show Go premium button on devices smaller than ipad. */
	/* Because we show regular website on ipad but show mobile site on other mobile devices. */
	/* Go premium button is not required on the mobile site as mobile site has different menu and layout. */
	/* a.go-premium-button-anonymous-user, */
	/* a.go-premium-button-logged-in { */
		/* display: none; */
	/* } */
}


@media (max-width : 760px) {
	#user-form {
		gap: 1em;
	}

	#user-form > div {
		width: 100%;
	}

	#edit-personal-information--content {
		margin: initial;
	}

	#edit-reset-account .panel-body {
		margin: initial;
	}

	a.reset-user-account {
		display: inline-block;
	}
}

@media (max-width : 710px) {
	div.belt_icons_container {
		width: 100%;
	}
	
	div.belts a {
		width: 75px;
	}
	
	div.belts a img.rankImage {
		width: 55px; 
		height: 55px;
	}
	
	.belt-table {
		width: 100%;
		padding: 1em 0;
		text-align: justify;
	}

	td.belt-name-column {
		width: 60%;
	}
}


@media (max-width : 660px) {

	div.belt_icons_container {
		width: 100%;
	}
			
	#belt-table, .belt-table, .belt-explanation {
		width: 90%;
		margin: 0 auto;
		padding: 1em 0;
		text-align: justify;
	}

	.signup-card-group label {
		width: 500px;
	}
}

	
/* Portrait tablets and large phones, 600px and below */
@media (max-width : 600px) {
	
	div.username_link_div {
		float: right;
		/* clear: both; */ /* Theta Music logo is now shorter so no need to show the sign up/log in links on a new line */
	}
	
	.sign_in_sign_up {
		margin-top: 0;
		margin-right: 0;
	}

	.username_link_div .top_sign_in, .username_link_div .top_create_account {
		font-size: 0.9em;
	}
	
	.username_link_div .top_sign_in {
		padding-right: 1rem;
	}
	
	.top-player-table {
		width: 100%;
	}
	
	.belt-rank, .top-player-rank {
		width: 15%;
		vertical-align: middle !important;
	}

	.belt-levels, .belt-points, .top-player-levels, .top-player-points {
		width: 20%;
		vertical-align: middle !important;
	}
	
	.belt-username-column, .top-player-name {
		width: 45%;
		word-break: break-all;
		vertical-align: middle !important;
	}
	
	.belt-user-country, .top-player-country {
		vertical-align: middle !important;
	}

	div.belt_icons_container {
		width: 95%;
	}
	
	div.belts a {
		width: 65px;
	}
	
	div.belts a img.rankImage {
		width: 45px; 
		height: 45px;
	}

	.rankLabelForIcon {
		font-size: 0.8em;
	}
}


/* Device width <= 540px */
@media (max-width : 540px) {

	/* Page header on sign up, sign in and forgot password apges */
	/*h1.sign_up_header, h1.sign_in_header, h1.forgot_password_header {
		font-size: 1.5rem;
	}*/
	
	div.getting_started_description {
		margin-left: 1.5rem;
		margin-right: 1.5rem;
	}
	
	div.getting_started_intro_course {
		width: 100%;
		height: 12rem;
	}

	div.getting_started_start_button_div {
		margin: 1rem auto 0;
	}

	div.getting_started_course_label {
		font-size: 1.5rem;
		padding-top: 1rem;
	}
	
	div.getting_started_start_button {
		font-weight: bold;
		width: 100%;
		padding: 0.2rem 0 0 0;
		margin: 0 0.5rem 0 2.6rem;
	}
	
	.belt-user-country, .top-player-country {
		display: none;
	}

	#White, #Gray, #Yellow, #Orange, #Green, 
	#Blue, #Purple, #Red, #Brown, #Black {
		transform: scale(1.4, 1.4);
	}
	
	div.belt_icons_container {
		width: 100%;
	}
	
	.rankLabelForIcon {
		font-size: 0.7em;
	}
	
	div.belts a {
		width: 55px;
	}
	
	div.belts a img.rankImage {
		width: 40px; 
		height: 40px;
	}

	.signup-card-group label {
		width: 400px;
	}

	.authentication-social-signin-social-button-teacher-registration {
		padding-left: 8rem;
		padding-right: 8rem;
	}
}


@media (max-width : 460px) {
	
	.rankLabelForIcon {
		margin-top: -7px;
	}
	
	#belt_top_user_list {
		font-size: 0.9em !important;
	}

	.signup-or-login-dialog-box {
		top: 4em; /* Show dialog box below the hamburger menu so it does not overlap with the menu */
	}
}

@media (max-width : 430px) {
	.signup-card-group label {
		width: 300px;
	}
	
	.tmgradebook-teacher-registration-form {
		width: 98%;
	}
	
	.authentication-social-signin-options-teacher-registration {
		width: auto;
	}
	
	.authentication-social-signin-social-button-teacher-registration {
		padding-left: 5rem;
		padding-right: 5rem;
	}
}

@media (max-width : 420px) {
	
	div.belt_icons_container {
		width: 75%;
	}
}


/* Device width <= 410px */
@media (max-width : 412px) {

	td.belt-name-column {
		width: 70%;
		padding-left: 1% !important;
		padding-right: 1% !important;
	}
	
	td.belt-levels-value {
		padding-left: 1%;
		padding-right: 1%;
	}
	
	#belt-table th {
		font-size: 1em;
	}
	
	#belt-table td {
		font-size: 0.8em;
	}
	
	.authentication-social-signin-social-icon {
		left: 1.5rem;
	}
	
	.authentication-social-signin-social-button-teacher-registration {
		padding-left: 5rem;
		padding-right: 3rem;
	}
}


@media (max-width : 375px) {
	
	#belt_top_user_list .belt-username-column img.belt-user-picture {
		display: none;
	}

	.authentication-social-signin-social-button-teacher-registration .authentication-social-signin-social-icon {
		left: 1.5rem;
	}
	
	.tmgradebook-teacher-registration-form {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.teacher_registration_form_start {
		width: auto;
	}

	.signup-or-login-dialog-box {
		top: 3em; /* Show dialog box below the hamburger menu so it does not overlap with the menu */
	}
}


@media (max-width : 325px) {
	
	div.belt_icons_container {
		width: 90%;
	}

	.signup-card-group label {
		width: 250px;
	}
}


@media (max-width : 275px) {
	
	div.belt_icons_container {
		width: 100%;
	}
}


@media (max-width : 250px) {
	
	div.belts a {
		width: 45px;
	}
	
	div.belts a img.rankImage {
		width: 35px; 
		height: 35px;
	}
	
}