/**
*  Registration page of the /new app.
*  Loaded on top of login.css: the shell, the inputs, the separator and the
*  social buttons are shared, here are only the pieces the register form adds
*  (live validation notes, the privacy checkbox and the publication radios).
*/

#content{
	max-width: 30rem;
}



/** --------------------------------------
              LIVE VALIDATION
    --------------------------------------*/

.field_notes{
	display:block;
	width:100%;
	margin-top: 0.28rem;
	font-size:0.75rem;
	line-height:1.1rem;
	color:#999;
}

.field_notes.wrong{
	color:#cc0000;
}

.field_notes.right{
	color:#2e8b30;
}

#pwd_rules{
	display:block;
	width:100%;
	margin-top: 0.4rem;
}

#pwd_rules li{
	display:block;
	width:100%;
	padding-left: 1.1rem;
	font-family:'Roboto', sans-serif;
	font-size:0.75rem;
	line-height:1.25rem;
	font-weight:300;
	color:#999;
}

/* The bullet doubles as the state: dot -> pending, tick -> met, cross -> not met. */
#pwd_rules li:before{
	position:absolute;
	left:0;
	content:"\00b7";
	font-size:0.9rem;
	line-height:1.25rem;
}

#pwd_rules li.right{
	color:#2e8b30;
}

#pwd_rules li.right:before{
	content:"\2713";
	font-size:0.75rem;
}

#pwd_rules li.wrong{
	color:#cc0000;
}

#pwd_rules li.wrong:before{
	content:"\2715";
	font-size:0.75rem;
}



/** --------------------------------------
          CHECKBOX AND RADIO BLOCKS
    --------------------------------------*/

.checkbox_blocks,
.radio_blocks{
	display:block;
	width:100%;
	margin-top: 1.5rem;
	text-align:left;
}

.radio_blocks{
	margin-bottom:2rem;
}

.radio_rows{
	display:block;
	width:100%;
	margin-top: 0.4rem;
}

.block_titles{
	display:block;
	width:100%;
	font-size:0.8rem;
	line-height:1.4rem;
	color:#777;
}

.checkbox_blocks input,
.radio_blocks input{
	position:absolute;
	top: 0.22rem;
	width: 1rem;
	height: 1rem;
	accent-color:#ff6600;
	cursor:pointer;
}

.checkbox_blocks label,
.radio_blocks label{
	display:block;
	width:100%;
	padding-left: 1.6rem;
	font-size:0.85rem;
	line-height:1.4rem;
	color:#555;
	cursor:pointer;
}

#register_btn{
	margin-top: 2rem;
	width: 100%;
}

#register_btn.deactivated{
	background:#ccc;
	border-color:#ccc;
	cursor:default;
}

#ok_msg{
	display:block;
	width:100%;
	margin-top: 1.5rem;
	padding: 0.4rem 0.72rem;
	border-radius: 0.5rem;
	background:#eaf6ea;
	font-size:0.9rem;
	line-height:1.4rem;
	color:#2e8b30;
}

#sign_in_note{
	display:block;
	width:100%;
	margin-top: 2rem;
	font-size:0.85rem;
}

div:has(.grecaptcha-badge){
	position: absolute;
}



@media (max-width: 12cm){

	#content{
		max-width:100%;
	}

	.field_notes,
	#pwd_rules li{
		font-size:3.6vw;
		line-height:6vw;
	}

	#pwd_rules li{
		padding-left:5vw;
	}

	.block_titles{
		font-size:3.8vw;
		line-height:7vw;
	}

	.checkbox_blocks label,
	.radio_blocks label{
		padding-left:7vw;
		font-size:3.8vw;
		line-height:6.4vw;
	}

	.checkbox_blocks input,
	.radio_blocks input{
		top:0.8vw;
		width:4.4vw;
		height:4.4vw;
	}

	#ok_msg,
	#sign_in_note{
		font-size:4vw;
		line-height:6.4vw;
	}
}