/* CSS FROMS */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

input {
    margin: 10px;
    text-align: center;
    border: 1px solid #F1F1F1;
    padding: 0.25em 0.25em 0.25em;
    -webkit-border-radius: 4px;
    border-radius: 0.2em;
    font-size: 1em;
    color: #333;
    font-family: 'Comfortaa' !important;
    font-weight: 200;
    width: 240px;
    background-color: #FFFFFF !important;
}

#arth-form input {
    font-size: 2.5em;
    width: 120px;
}

input::-webkit-input-placeholder { color:#505050; }
input::-moz-placeholder { color:#505050; } /* firefox 19+ */
input::-ms-input-placeholder { color:#505050; } /* ie */
input::-moz-placeholder { color:#505050; }

textarea:focus, input:focus{
    outline: none;
}

.arth-form {
    max-width: 1000px;
    margin: 5% auto;
    text-align: center;
}

.formtitle h1 {
    font-family: 'Cuprum', sans-serif;
    font-size: 26px;
    font-weight: 600;
    margin: 0px 0px -4px;
    line-height: 10px;
}

#roleform {
    color:  #fff;
}

#roleform a {
    color:  #fff;
}

.arth-form .formtitle h1 {
    font-size: 36px;
}

.arth-q-title {
    font-family: Comfortaa;
    font-size: 28px;
}

.arth-form-question#question0,
.arth-form-question#question51 {
    width: 800px !important;
}

.arth-form-question {
    width: 180px;
    display: inline-block !important;
    padding: 20px;
}

.formtitle h2 {
    font-size: 21px;
    font-family: 'Cuprum', sans-serif;
    margin: 10px 0px 22px;
}

.arth-form .formtitle h2 {
}

#login h4, #register h4, #forgot h4 {
	font-family: "Cuprum";
    font-weight: 200;
}

.errmsg {
	color: #BB0808;
	margin-bottom: 10px;
}

.retroaction {
	position: relative;
	margin-bottom: 10px;
	text-align: center;
	z-index: 10;
}

.retroaction .indicateur {
position: absolute;
right: 34px;
top: 4px;
}

.indicateur i.el-icon-asterisk {
    font-size: 16px;
    color: #457eca;
    margin-left: -32px;
    line-height: unset;
}

.indicateur i.el-icon-remove-sign {
	font-size: 23px;
	color: #BB0808;
}

.indicateur i.el-icon-ok-sign {
	font-size: 23px;
	color: #158D0D;
}
.indicateur i.el-icon-remove-circle {
	font-size: 23px;
	color: #B3B3B3;
}

/* BUTTONS CHOIX */
.roleimg input[type="radio"],
.modeimg input[type="radio"] {
  width: 0px;
  height: 0px;
  display: none; 
}

.roleimg.dim img,
.modeimg.dim img {
    width: 88px !important;
    height: 88px !important;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.roleimg img,
.modeimg img {
    width:100px;
    height: 100px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.roleimg.dim,
.roleimg.dim span {
  font-size: 0.9em;
}

/* Default role choice btn style */
.roleimg,
.modeimg {
  	-webkit-transition: all 0.3s ease;
  	-moz-transition: all 0.3s ease;
  	-o-transition: all 0.3s ease;
  	-ms-transition: all 0.3s ease;
}

.roleimg.teacher input:checked + label,
.roleimg.teacher label.selected {
  opacity: 1;
}

.roleimg.student input:checked + label,
.roleimg.student label.selected {
   opacity: 1; 
}

.roleimg.parent input:checked + label,
.roleimg.parent label.selected {
   opacity: 1; 
}
  
.roleimg.teacher.dim,
.roleimg.student.dim,
.roleimg.parent.dim {
	opacity: 0.44;
}

.modeimg.dim,
#start.dim {
  opacity: 0.44;
}

.roleimg,
.modeimg {
    vertical-align: top;
    height: 133px;
    display: inline-block;
    line-height: 14px;
    margin: 0px 0px;
    font-family: Comfortaa, sans-serif;
}

.roleimg {
    width: 100px;
}

.modeimg {
  font-size: 12px;
  width: 130px;
}

.modeimg i {
  font-size: 88px;
  color: #2771d4;
}

.roleimg span,
.modeimg span {
    font-size: 12px;
    color: #9c9c9c;
}

#roleform,
#modeform {
    font-family: Comfortaa, sans-serif;
}

.annuler {
    color: #447bbf;
    font-family: 'Comfortaa', sans-serif;
    font-size: 11px;
    z-index: 10;
    position: relative;
}

div#infoform {
    width: 360px;
    margin: 8px auto 0px;
    display: block;
    position: relative;
}

div#infoform:after {
  content: "";
  opacity: 0.11;
  top: -60px;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

div#infoform.teacher:after {
  background: url('../images/role-concept.png');
}

div#infoform.student:after {
  background: url('../images/role-player.png');
}

div#infoform.parent:after {
  background: url('../images/role-guardian.png');
}

.arth-form-container {
    width: 100%;
}

/*.login-button {
    height: 35px;
    position: relative;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: #2257a0;
    cursor: pointer;
    padding: 0 32px;
    overflow: hidden;
    border-radius: 8px 0px 8px 0px;
    z-index: 10;
    font-family: 'Cuprum', sans-serif;
}*/

.login-button {
    height: 35px;
    position: relative;
    text-align: center;
    font-size: 12px;
    color: #2257a0;
    background: #fff;
    cursor: pointer;
    padding: 0 32px;
    overflow: hidden;
    border-radius: 8px 0px 8px 0px;
    z-index: 10;
    font-family: 'Cuprum', sans-serif;
}