/* The Modal (background) */
.modal {
	z-index: 4; /* Sit on top */   /*top_navigation_main_wrapper is z-index 3*/	
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	padding-top: 70px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #000;
  background-color: #29343E;
  background-color: #2B2A4A;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  border: 5px solid #EBA521;
  width: 7%;
  border-radius: 5px;
}

.modal label{
    width: 100%;
}


/* The Close Button */
.close {
  color: #fff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}


/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
	background-color: #ddd;
	outline: none;
}



/*********************Error Message***********************************/



/*********************Error Message***********************************/



/***************************************************Styled CHeckmark***********************************/
/******************************************************************************************************/
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: transparent;
  border: 2px solid yellow;
  border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  left: 7px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/***************************************************End: Styled CHeckmark*******************************/
/******************************************************************************************************/



/***************************************************GENERAL STYLES FOR SIGN IN AND CREATE ACCOUNT*******************************/
/*****************************************************************************************/

.input-wrapper {
  position: relative;
  width: 100%;
}

.input-wrapper i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none; /* click goes to input */
}

.input-wrapper input {
  padding-left: 40px; /* space for icon */
}

h3.sign_in_create_account_headings{
	font-size:215%;
	font-weight: 100;
	text-align:center; 
	padding: 0; 
	color:#fff;
	letter-spacing: 0;
	margin: 30px 0 20px 0;
	font-family: Comfortaa-Bold;
}

.create_account_error_message_for_sign_in{
	color: #FF1E5A !important; 
	font-weight:bold;
	letter-spacing:0px;
}


._sign_in_from_create_account_section{
	text-align: center;
    cursor: pointer;
	text-decoration: none;
	cursor: pointer;
	font-size: 95%; /**********************/
	/*
	padding-top: 5%;
	padding-bottom: 7%;
	*/
}

._sign_in_from_create_account_section_link{
	font-family: 'comfortaa-bold';
	font-size:105%;
}
._sign_in_from_create_account_section a:hover {
  text-decoration: underline;
}
.sign_in_btn, .create_account_btn { 
    padding: 8px 0;
    margin: 10px auto 20px;
    display: block;
    background-color: orange;
	background-color: #EA9907;
    font-size: 160%;
    border-radius: 5px;
	font-weight:bold;
	width: 60%;
}

/* Full-width input fields */


.sign_in_email, .sign_in_password,
.create_account_email, .create_account_username, .create_account_password,
.captcha
{	
	width: 100%;
	display: inline-block !important;
	padding: 10px 0 10px 45px !important;
	border: 1px solid rgba(0,0,0,.125) !important;
	border-top-right-radius: 0.25rem !important;
	border-top-left-radius: 0.25rem !important;
	border-bottom-right-radius: 0.25rem !important;
	border-bottom-left-radius: 0.25rem !important;
	margin: 3px 0;
	font-family: roboto-light;
}

._sign_in_fields, 
._create_account_fields{
	font-size: 100%;
	border-radius:5px;
}

._email, 
._password, 
.forgot_password, 
.create_account_email, 
.create_account_username, 
.create_account_password,
._captcha_label{
	font-size: 100%;
	display:block;
	color: #000;
}

.forgot_password, .create_account{
	text-align: center;
	font-weight: medium;
	cursor: pointer;
	font-family: 'roboto';
} 


/***************************************************END: GENERAL STYLES*******************************/
/**********************************************************************************************/

/***************************************************SIGN IN*******************************/
/*****************************************************************************************/
.sign_in_top_container{
	width: 100%;
    padding: 0 10px;
}

.sign_in_error_password{
	font-size: 115%;
	background-color: #fff;
	padding-top: 16px;
    padding-bottom: 14px;
	
	display:block; text-align: center; 
	color: #FF1E5A; line-height: 0; 
	letter-spacing:0px;
	
	margin-top: 5px;
    margin-bottom: 30px;
}

._sign_in_cancel_wrapper{    
	float: right;
	margin-right: 30px;
}

/* Float cancel and create_account buttons and add an equal width */

.sign_in_btn_for_forgot { 
	width: 14%;
    padding: 8px 0;
    margin: 25px 15px 0 8px;
}

.sign_in_email_password_separator{
	padding-bottom:10px;
}
.forgot_password{
	text-align: left; 
	font-size: 65%;
}

/***************************************************END: SIGN IN*******************************/
/**********************************************************************************************/


/***************************************************Create Account / Sign Up*******************************/
/********************************************************************************************/
._create_account_optinal_agreement, . _create_account_terms_privacy{
	font-size: 85% !important;
}
._create_account_encouragement{
	margin: 0 auto;
    display: block;
    /* background-color: red; */
    text-align: center;
    margin-bottom: 25px;
    margin-top: -10px;
}
.create_account_top_container{
	margin: 0 auto 0;
	width: 100%;
}

.forgot_password a{
	color: #fff; 
	padding: 15px 0 30px;
	text-decoration:none;
	font-family: comfortaa-bold;
	font-size:130%;
	display: block;
}

.create_account_email{
	padding-right: 61px;
}

.create_account_username{
	padding-right: 20px;
} 

.create_account_captcha{
	font-size: 79%;
}

.create_account{
	padding:10px 0 10px;
	color: #fff; 
	margin: 10px auto 0;
	display: block;
	font-family: 'roboto-thin';
	font-size: 90%; 
}

._sign_in_from_create_account_section{
	text-align: center;
    cursor: pointer;
	text-decoration: none;
	cursor: pointer;
	font-size: 95%; /**********************/
	/*
	padding-top: 5%;
	padding-bottom: 7%;
	*/
}
/*
.create_account a{
	color:#0E7E0F !important; 
	text-decoration:none;
	font-weight:bold;
}
*/
.create_account_link{    
    padding: 15px 0 10px;
	font-size: 100%;
	font-family: 'comfortaa-bold';
	/*text-decoration: underline;*/
	/*color: #EBA521;*/
}

.create_account_link:hover {
	text-decoration: underline;
}

.create_account_button
{
	text-align: center; padding-top: 10px;
}

.c_text{
	font-style: italic;
    letter-spacing: 10px;
    border: 1px solid;
    margin: 25px 0 5px;
    width: 45%;
    padding: 5px;
    font-size: 100%;
    cursor: none;
	color: #fff;
	background-color: #34AED3;
	background-color:#0B9F25;
	background-color:transparent;
	
	color: green;
    background: linear-gradient(120deg, #dfe9f3, #0000);
    font-weight: bold;
	
	/*
	background-image: url(https://eduquizme.com/images/_captcha_background.PNG);
    background-repeat: no-repeat;
	*/

}

.create_account_successful_msg{
	color: #fff; 
	margin-top: 5px; 
	text-align: center;
	font-size: 100%;
    font-family: 'roboto-light';
}

.create_account_successful_msg.msg2{
	margin-bottom: 20px;
}

.create_account_email_username_separator{
	display:block;padding-bottom:10px;
}
.create_account_username_password_separator{
	display:block;padding-bottom:10px;
}
.create_account_captcha_separator{
	margin-bottom:10px;
}
input[type=text].captcha {
	width:45%;
	font-size: 100%;
    font-family: roboto-light;
}
.create_account_password_error{
	display:block; text-align: center; 
	color: #FF1E5A; 
	line-height: 0; 
	margin: 10px 0 5px; 
	letter-spacing:0px;
	background-color: #fff;
    padding: 20px 0;
    font-weight: bold;
}

._show_password{
	margin-top:10px;
}
._password_rules{ 
	color: #fff !important;
	margin: 0 auto;
	padding: 20px 0 10px 0px;
	font-size: 80%;
    font-family: roboto-light;
}

._password_rules span {
    display: block;
    padding: 3px;
}
._password_rules .fa-check{
	color:#90ee90;	
}

._password_rules_heading{
	padding: 0 0 10px 0;
    font-size: 95%;
    font-family: 'roboto-light';
    font-family: 'roboto-light';
}
._password_rules .fa-xmark {
	color:#FF1E5A;	
}


.create_account_section .agree_to_terms_container.agree_to_emails_container{
	overflow: hidden;
	font-size: 85%;
	padding-top: 5px;
	margin-top: 25px;
	margin-botom: 0;
}

p.terms_privacy{
	letter-spacing:0px;
	word-spacing:0px;
	color:#fff;
	margin: 10px auto 1px;
	font-size: 76%;
	margin: 0px auto 10px;
    padding: 0;
	font-family: 'roboto';
}

.agree_to_emails_text, .agree_to_terms_privacy{
	position:relative;
    color: #fff;
   /*  width: 95% !important;
    text-align: left;
    margin: -17px 0 0 24px !important; */
    display: block;
	font-family: 'roboto';
	font-size: 144%;
}

.agree_to_terms_agree_to_emails_separator{
	margin: -9px auto 0;
}

.email_error_for_create_account, 
.username_error_for_create_account, .password_error_for_create_account, .captcha_error, 
.error_agree_to_terms_privacy{
	color: #FF1E5A;
	position: absolute;
	padding-left: 11px;
	margin-top: 11px;
	letter-spacing:0px;
}

.captcha_error{
	position: relative;
	margin-top: -1px;
    font-weight: bold;
	font-size: 70%;
}

.error_agree_to_terms_privacy{
    text-align: center;
    font-size: 90%;
    margin: 0;
    position: relative;
	padding: 0 0 15px;
    font-weight: bold;
}

.show_password_label{
	font-family: 'roboto';
	color: #fff;
    font-size: 120%;
}

.cancelbtn {
	padding: 14px 20px;
	background-color: #f44336;
	width: 10%;
	text-align: center;
	padding: 10px 20px;
    margin: 5px 0;
	border-radius:5px;
}
/***************************************************END: Create Account*******************************/
/**********************************************************************************************/



._email{
	padding-right: 38px;
}

._password{
	padding-right: 7px;
}


/****************************************************************************************/
/****************************************************************************************/

@media only screen and (max-width: 7536px) {
	.modal-content {
		width:7.25%;
	}
}
@media only screen and (max-width: 7276px) {
	.modal-content {
		width:7.35%;
	}
}
@media only screen and (max-width: 7176px) {
	.modal-content {
		width:7.45%;
	}
}
@media only screen and (max-width: 7080px) {
	.modal-content {
		width:7.55%;
	}
}
@media only screen and (max-width: 7000px) {
	.modal-content {
		width:8%;
	}
}
@media only screen and (max-width: 5860px) {
	.modal-content {
		width:8%;
	}
}
@media only screen and (max-width: 6594px) {
	.modal-content {
		width:8.5%;
	}
}
@media only screen and (max-width: 6205px) {	
	.modal-content {
		width:9%;
	}
}
@media only screen and (max-width: 6000px) {
	.modal-content {
		width:9.5%;
	}
	.sign_in_btn, .create_account_btn {
		font-size: 150%;
	}
}
	
	
@media only screen and (max-width: 5552px) {
	.modal-content {
		width:10%;
	}
}	
	
@media only screen and (max-width: 5275px) {
	.modal-content {
		width:11%;
	}
	.sign_in_btn, .create_account_btn {
		width:55%;
	}
}
@media only screen and (max-width: 4795px) {
	.modal-content {
		width:12%;
	}
}
	
@media only screen and (max-width: 4396px) {
	.modal-content {
		width:13%;
	}
}	
@media only screen and (max-width: 4390px) {
	
	h3.sign_in_create_account_headings {
		font-size: 185%;
	}
}

@media only screen and (max-width: 4057px) {
	.modal-content {
		width:14%;
	}
}

@media only screen and (max-width: 3840px) {
	.create_account_btn {
		font-size: 85%;
	}
	.sign_in_btn, .create_account_btn {
		font-size: 130%;
	}
}
@media only screen and (max-width: 3768px) {
	.modal-content {
		width:15%;
	}
}
@media only screen and (max-width: 3516px) {
	.modal-content {
		width:16%;
	}
}

		
@media only screen and (max-width: 3440px) {
	.sign_in_btn, .create_account_btn {
		width: 50%;
	}
}	
@media only screen and (max-width: 3296px) {
	.modal-content {
		width:17%;
	}
}

@media only screen and (max-width: 3102px) {
	.modal-content {
		width:18%;
	}
}
@media only screen and (max-width: 2880px) {
	.sign_in_btn, .create_account_btn {
		width: 60%;
	}
}	

@media only screen and (max-width: 2560px) {
	
    .modal-content {
        width: 25%;
    }
}

@media only screen and (max-width: 2930px) {
	.modal-content {
		width:19%;
	}
}	

@media only screen and (max-width: 2776px) {
	.modal-content {
		width:20%;
	}
}

@media only screen and (max-width: 2637px) {
	.modal-content {
		width:21%;
	}
}	
	
@media only screen and (max-width: 2512px) {
	.modal-content {
		width:22%;
	}
}	
@media only screen and (max-width: 2397px) {
	.modal-content {
		width:23%;
	}
}
	
@media only screen and (max-width: 2295px) {
	.modal-content {
		width:25%;
	}
}	

@media only screen and (max-width: 2110px) {
	.modal-content {
		width:27%;
	}
}

@media only screen and (max-width: 1955px) {
	.modal-content {
		width:28%;
	}
}	
@media only screen and (max-width: 1885px) {
	.modal-content {
		width: 32%;
	}
}	


@media only screen and (max-width: 1650px) {
	.modal-content {
		width: 33%;
	}
	.sign_in_btn,
	.create_account_btn{
		width: 65%;
	}
}


@media only screen and (max-width: 1500px) {
	.sign_in_email, .sign_in_password, .create_account_email, .create_account_username, .create_account_password, .captcha {
		padding: 10px 0 10px 40px !important;	
	}
}
	
@media only screen and (max-width: 1300px) {
	.c_text, input[type=text].captcha{
		width:50%;
	}
}

@media only screen and (max-width: 1250px) {
	._password_rules{ 
		font-size: 77%;
	}
	.sign_in_btn,
	.create_account_btn{
		width: 80%;
	}
}	

@media only screen and (max-width: 1200px) {
	.modal-content {
		width: 45%;
	}
	.c_text, input[type=text].captcha{
		width:55%;
	}
}

@media only screen and (max-width: 1020px) {
	
}
	
@media only screen and (max-width: 1000px) {
	.modal-content {
		width: 50%;
	}
}

@media only screen and (max-width: 800px) {
	.modal-content {
		width: 60%;
	}
}

@media only screen and (max-width: 750px) {
    .modal-content {
        width: 70%;
    }
}
@media only screen and (max-width: 700px) {
	._password_rules{ 
		font-size: 70%;
	}
	.c_text, input[type=text].captcha{
		width:60%;
	}
}	
@media only screen and (max-width: 600px) {
	.modal-content {
		width: 75%;
	}
	.sign_in_error_password{
		font-size: 85%;
	}
	.c_text, input[type=text].captcha{
		width:75%;
	}
}

@media only screen and (max-width: 550px) {
	.sign_in_error_password {
		font-size: 95%;
	}
	
	._sign_in_fields, ._create_account_fields {
		font-size: 85%;
	}
	
	._email, ._password, .create_account_email, .create_account_username, .create_account_password, ._captcha_label {
		font-size: 85%;
	}
	
}

@media only screen and (max-width: 530px) {
    h3.sign_in_create_account_headings {
        font-size: 160%;
    }
	
	._sign_in_from_create_account_section {
        font-size: 90%;
    }
	._sign_in_from_create_account_section_link{
        font-size: 100%;
    }
	.forgot_password a {
		font-size: 120%;
	}
	.create_account{
		font-size: 80%;
	}
}

@media only screen and (max-width: 500px) {
	.modal-content {
		width: 90%;
	}
	._password_rules{ 
		font-size: 65%;
	}
}

@media only screen and (max-width: 415px) {
	.sign_in_error_password {
		font-size: 80%;
	}
	._email, ._password, .create_account_email, .create_account_username, .create_account_password, ._captcha_label {
		font-size: 80%;
	}
	.forgot_password a {
		font-size: 105%;
	}
	.create_account_link {
		display:block;
		padding: 5px 0 10px;
	}
}

@media only screen and (max-width: 400px) {
    .sign_in_btn, .create_account_btn {
        width: 90%;
    }
	
	._sign_in_fields, ._create_account_fields, input[type=text].captcha {
		font-size: 80%;
	}
}

@media only screen and (max-width: 380px) {
	.sign_in_error_password {
		font-size: 70%;
	}
	._email, ._password, .create_account_email, .create_account_username, .create_account_password, ._captcha_label {
		font-size: 70%;
	}
	.forgot_password a {
		font-size: 100%;
	}
}

@media only screen and (max-width: 366px) {
    h3.sign_in_create_account_headings {
        font-size: 135%;
    }
	
	._sign_in_from_create_account_section {
        font-size: 80%;
	}	
	._sign_in_from_create_account_section_link{
        font-size: 90%;
	}	
	
}
	
	
@media only screen and (max-width: 350px) {
	._email, ._password, .create_account_email, .create_account_username, .create_account_password, ._captcha_label {
		font-size: 65%;
	}
}
@media only screen and (max-width: 330px) {
    ._sign_in_fields, ._create_account_fields, input[type=text].captcha {
        font-size: 60%;
    }
}
	
@media only screen and (max-width: 325px) {
	._sign_in_from_create_account_section {
        font-size: 75%;
    }
	._sign_in_from_create_account_section_link {
        font-size: 100%;
    }
	
	.forgot_password a {
		font-size: 90%;
	}
}	

@media only screen and (max-width: 320px) {
   .modal-content {
		width: 100%;
	}
	.c_text, input[type=text].captcha {
        width: 100%;
    }
	.sign_in_btn, .create_account_btn {
        width: 100%;
		font-size: 100%;
    }
	._password_rules {
		font-size: 76%;
		float: left;
		padding: 5px 0 10px;
    }
	.modal label {
        font-size: 80% !important;
        width: 100%;
        float: right;
	}
}

@media only screen and (max-width: 290px) {
    ._sign_in_from_create_account_section {
        font-size: 75%;
    }
	._sign_in_from_create_account_section_link {
        font-size: 90%;
    }
}