.error {
	width: 100%;
	padding: 5px;
	font-size: 12px;
	background: red;
	color: #FFF;
}

#modal {
	background: rgba(61, 162, 199,.5);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30000;	
}

#modal .modal-header {
	text-align: left;
	padding: 10px;
	width: 100%;
	background: #102552;
	color: #FFF;
}

#modal .modal-header label {
	font-size: 12px;
	font-weight: 300;
	float: left;	
}

#modal .modal-header i {
	float: right;
}

#modal .modal-header::after {
	content: '';
	display: block;
	clear: both;
}

#modal .modal-action {
	cursor: pointer;
}

#modal .modal-container {
	border-radius: 4px;
	overflow: hidden;	
	background: #FFF;
	color: #666;
	width: 80%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	top: 50%;
	box-shadow:0px 2px 4px rgba(0,0,0,.25);
	
	-webkit-animation:modal-container-anim .2s 1;
    -moz-animation:modal-container-anim .2s 1;
    -o-animation:modal-container-anim .2s 1;
    animation:modal-container-anim .2s 1;
    
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    
	text-align: center;
	position: relative;	
}

@-webkit-keyframes modal-container-anim {
    0%   {
        -webkit-transform: scale(0,0);
        -webkit-transform-origin: 50% 50%;
    }100% {
		-webkit-transform: scale(1,1);
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: translateY(-50%);
    }
}
@-moz-keyframes modal-container-anim {
    0%   {
        -moz-transform: scale(0,0);
        -moz-transform-origin: 50% 50%;
    }100% {
        -moz-transform: scale(1,1);
        -moz-transform-origin: 50% 50%;
        -moz-transform: translateY(-50%);
    }
}
@-o-keyframes modal-container-anim {
    0%   {
        -o-transform: scale(0,0);
        -o-transform-origin: 50% 50%;
    }100% {
        -o-transform: scale(1,1);
        -o-transform-origin: 50% 50%;
		-o-transform: translateY(-50%);	        
    }
}
@keyframes modal-container-anim {
    0%   {
        transform: scale(0,0);
        transform-origin: 50% 50%;
    }100% {
        transform: scale(1,1);
        transform-origin: 50% 50%;
		transform: translateY(-50%);	        
    }
}


#modal .modal-container .confirm-text,
#modal .modal-container .frequest-text {
	padding: 40px;	
	font-size: 24px;
	font-weight: 300;
	padding-bottom: 100px;
}


#modal .modal-container .frequest-text .text {
	font-size: 24px;
	font-weight: 300;
	padding-bottom: 30px;
}

#modal .modal-container .frequest-text .sub-text {
	padding-bottom: 30px;
}

#modal .modal-container .frequest-text label {
	text-align: left;
	display: block;
	font-size: 14px;
	color: #102552;
	padding-bottom: 5px;
}

#modal .modal-container .frequest-text input {
	width: 100%;
	height: 40px;
	font-size: 20px;
	padding: 10px;
	border: 1px solid #CCC;
/* 	-webkit-appearance: none;	 */
}

#modal .modal-container .frequest-text .frequest-input-footnote {
	font-size: 10px;
	text-align: left;
	padding-top: 5px;
	color: #999;
}

#modal .modal-container .confirm-actions,
#modal .modal-container .frequest-actions {
	width: 100%;
	position: absolute;
	bottom: 20px;
}

#modal .modal-container .button.disable {
	pointer-events: none;
	opacity: .25;
}

#modal .frequest-indicator,
#sidebar .frequest-indicator {
	position: absolute;
	right: 30px;
	font-size: 20px;
}


#modal .frequest-indicator {
	position: relative;
	margin-top: -30px;
	float: right;
}

#sidebar .frequest-indicator {
	top: 20px;
}


#modal .frequest-indicator .loader svg path,
#modal .frequest-indicator .loader svg rect,
#sidebar .frequest-indicator .loader svg path,
##sidebar .frequest-indicator .loader svg rect {
	fill: #102552;
}

.password-checker {
	padding-left: 30px;
	margin-top: -7px;
	margin-bottom: 20px;
	min-height: 53px;	
}

#signup .password-checker {
	display: none;
}

.password-checker .rule {
	font-size: 12px;
	font-weight: 300;
	color: #999;
	display: inline-block;
	width: 190px;
	min-width: inherit;
}

.password-checker .rule.good {
	color: #102552;
}


.password-checker .rule svg {
}

.steps {
	padding-top: 50px;	
}

.steps .step {
	width: 24%;
	min-width: 130px;
	max-width: 200px;
	display: inline-block;
	line-height: auto;
	font-size: 24px;
	font-weight: 300;
	padding-right: 20px;
	padding-bottom: 30px;
	vertical-align: top;
}

.switch {
	width: 30px;
	height: 20px;
	border-radius: 15px;	
	background: #EEE;
/* 	border: 1px solid #9ed0e3; */
	position: relative;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	cursor: pointer;	
}

.switch.big {
	width: 50px;
	height: 30px;

}

.switch.on {
	background: #102552;
}

.switch .toggle {
	width: 16px;
	height: 16px;
	border-radius: 15px;
	background: white;
	position: absolute;
	left: 3px;
	top: 2px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;			
}

.switch.big .toggle {
	width: 26px;
	height: 26px;
}

.switch.on .toggle {
	right: 3px;
	left: auto;
}