/*The platform that contains the contact form*/
.main_form_container {
	padding: 20px;
	background: rgba(250, 250, 250, 0.5) !important;
	box-shadow: 2px 1px 2px 1px #333 !important;
	border: none; border-radius: 15px !important;
}
/*Inputs extra style*/
.extra_style_fields {
	font-size: 18px !important; padding: 10px !important; border: none !important;
	box-shadow: 0 0 10px 1px transparent !important; background-color: rgba(250, 250, 250, 0) !important;
	border-bottom: 2px #ccc solid !important; border-radius: 0px !important;
}
/*Container of the icons*/
.input-group-text {
	background-color: #1ea59a;
}
/*Extra style for the input icons*/
.form_icons {
	font-size: 20px;
	color: #333333 !important;
}
/*The titles styles*/
.title_texts {
	color: #333333;
	font-weight: bold;
	font-size: 18px;
	margin-top: 7px;
}
/*The star style*/
.require_style{
	color: #e50000;
	font-weight: bold;
}

/*The select option*/
#select_option {
	cursor: pointer;
	font-size: 18px !important; border: none !important; box-shadow: 0 0 10px 1px transparent !important;
	background-color: rgba(250, 250, 250, 0) !important; border-bottom: 2px #ccc solid !important;
	border-radius: 0px !important;
}

/*Question mark containter icon style*/
.question_mark_icon {
	background-color: #ffffff;
	border: none !important;
}
/*Question mark icon style*/
.question_icon {
	color: #000000;
	font-size: 30px;
}

/*Submit the form button & mouse hover*/
.submit_the_form {
	position: relative;
	color: #ffffff;
	font-weight: bold;
	font-size: 20px;
	background: rgba(30,165,154, 1);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	border: 1px solid #ccc;
	border-radius: 7px;
	border-bottom: 2px solid #14947b;
	cursor: pointer;
	-webkit-box-shadow: inset 0 -2px #14947b;
	box-shadow: inset 0 -2px #14947b;

	/*padding: 5px 20px;*/
	width: 100% !important;
	display: inline-block;
}
.submit_the_form:hover {
	background: rgba(25,175,150, 1);
}
/*Already have an account? Click here to login message above register button style*/
.already_have_an_dc_account_loginhere {
	color: #1ea59a !important;
	font-weight: bold !important;
}
.already_have_an_dc_account_loginhere:hover {
	color: #11d4c3 !important;
	font-weight: bold !important;
}
/*The line between the register button and the link to sign in style*/
hr.line_between_regi_and_login {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/*Icons container*/
.input-group-text {
	background-color: transparent !important; border: none;
}

/*Input fields on focus*/
#provide_the_name:focus,
#provide_the_last_name:focus,
#provide_the_email:focus,
#provide_the_phone_number:focus,
#select_option:focus,
#provide_the_password:focus,
#provide_the_password_again:focus {
	outline: none !important;
	box-shadow: none !important;
	border-bottom: 2px rgba(30,165,154, 1) solid !important;
}

/*First name/last name/password/repeat pass side by side*/
.inputs_sbs {
	display: inline-block !important;
	width: 170px !important;
	vertical-align: top !important;
}
/*Hide the icon on the last name*/
.hideme_resp {
	display: none !important;
}
/*Set margin bottom for the inputs*/
.input_texts {
	margin-top: 20px !important;
}

/*Alert success message*/
.alert-box {
	background-color: rgba(250,250,250,0.7) !important;
	padding: 10px;
	color: #000;
	border-radius: 5px;
}

/*Loading bar style*/
.loader {
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 5px solid rgba(30,165,154, 1);
	border-bottom: 5px solid rgba(30,165,154, 1);

	border-right: 5px solid rgba(0,0,0,0.3);
	border-left: 5px solid rgba(0,0,0,0.3);

	width: 30px;
	height: 30px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
/* Loading bar animation style */
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* THE FORM STYLE ENDS HERE */


/* ADMIN STYLE STARTS HERE */
/*Lines from the admin section style*/
.lines_admin_section {
	border-color: #333 !important;
}

/*Required fields style*/
.require-fields {
	color: #cc0000 !important;
	font-weight: bold;
}
/*Notice message style*/
.notice-message {
	color: #000;
	font-weight: bold;
	font-size: 18px;
}
/*Notice message at the end*/
.notice-above-button {
	color: #fff !important;
	background-color: rgba(0,0,0,0.5) !important;
	border-radius: 5px;
	margin-top: 10px !important;
	padding: 5px;
}
/*Notice checkbox style*/
#notice_checkbox {
	cursor: pointer !important;
}


/**
 * Download user report button style & mouse hover
**/
.download-btn{
	position: relative;
	color: #ffffff;
	font-weight: bold;
	font-size: 20px;
	background: rgba(30,165,154, 1);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	border: 1px solid #ccc;
	border-radius: 7px;
	border-bottom: 2px solid #14947b;
	cursor: pointer;
	-webkit-box-shadow: inset 0 -2px #14947b;
	box-shadow: inset 0 -2px #14947b;

	padding: 10px 20px 10px 20px;
	display: inline-block;
}
.download-btn:hover{
	background: rgba(25,175,150, 1);
}

/*Back to top button style*/
#admin_bk_top {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 9999;
	font-size: 30px !important;
	font-weight: bold !important;
	color: #000 !important;
	cursor: pointer !important;
}
/*Back to top button style on hover*/
#admin_bk_top:hover {
	color: #333 !important;
}

/*Container of Already have an account? Click here to login message above register button style*/
.container_of_login {
	text-align: center !important;
}


/* **PAGINATION DESIGN STARTS HERE** */
/*Top total pages of pagination*/
.pages_t {
	border: 1px #333 solid !important;
	border-radius: 2px !important;
	width: 100% !important;
	padding: 5px !important;
	margin-bottom: 2px !important;
	background-color: #333 !important;
	color: #fff !important;
}
/*Below total pages of pagination*/
.below_pages_t {
	margin-top: -10px;
	padding: 20px 0px;
	background-color: #222 !important;
	border-radius: 6px;
}
/*The numbers*/
.page-numbers {
	border: 1px #333 solid !important;
	border-radius: 10px;
	padding: 10px;
	color: #fff;
	background-color: #333 !important;
	margin-left: 5px;
	text-decoration: none !important;
}
.page-numbers:hover {
	color: #f1f1f1 !important;
	background-color: #444 !important;
}
.page-numbers:active {
	color: #f1f1f1 !important;
	background-color: #444 !important;
}
.page-numbers:focus {
	color: #f1f1f1 !important;
	background-color: #444 !important;
}
/* **PAGINATION DESIGN ENDS HERE** */


/* THE TABLE STYLE STARTS HERE */
/* Generic Styling, for Desktops/Laptops */
.the-table-sev {
	color: #000 !important;
	width: 100% !important;
	border-collapse: collapse !important;
}
/* Zebra striping */
/*.the-tr-sev:nth-of-type(odd)*/.the-tr-sev {
	background: #eee !important;
}
.the-th-sev {
	background: rgba(30,165,154, 1) !important;
	color: white !important;
	font-weight: bold !important;
}
.the-td-sev, .the-th-sev {
	padding: 6px !important;
	border: 1px solid #ccc !important;
	text-align: left !important;
}
/* THE TABLE STYLE ENDS HERE */

.title_of_admin_dashboard {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;

    font-weight: bold !important; color: #1ea59a !important; margin-top: 5px !important;
}
.title_of_admin_dashboard:before,
.title_of_admin_dashboard:after {
    content: '';
    border-top: 2px #333 solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}
.title_of_admin_dashboard:after {
    margin: 0 0 0 20px;
}

/*Responsive style*/
@media screen and (max-width: 800px) {
	.g-recaptcha {
	    transform:scale(0.8);
	    transform-origin:0 0;
	}
	/*Set max width on mobile view for the first name/last name/password/repeat pass*/
	.inputs_sbs {
		display: block !important;
		width: 100% !important;
		margin-top: 20px !important;
		vertical-align: top !important;
	}
	/*Reveal the icon on the last name*/
	.hideme_resp {
		display: block !important;
	}
}


/* Max width before this PARTICULAR table gets nasty
 * This query will take effect for any screen smaller than 760px
 * and also iPads specifically.
*/
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
	/* Force table to not be like tables anymore */
	.the-table-sev, .the-thead-sev, .the-tbody-sev, .the-th-sev, .the-td-sev, .the-tr-sev { 
		display: block; 
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	.the-thead-sev > .the-tr-sev { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.the-tr-sev { border: 1px solid #ccc; }
	.the-td-sev { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	.the-td-sev:before {
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}

	/* Add a border top of ID */
	.the-tr-sev {
		border-bottom: 3px #333 solid !important;
	}

	/* Add the ths before the texts so the users can understand the data of the table */
	.id_before::before {
		content: "ID:";
		font-weight: bold !important;
	}
	.time_before::before {
		content: "TIME:";
		font-weight: bold !important;
	}
	.user_name_before::before {
		content: "USERNAME:";
		font-weight: bold !important;
	}
	.name_before::before {
		content: "FIRST NAME:";
		font-weight: bold !important;
	}
	.last_before::before {
		content: "LAST NAME:";
		font-weight: bold !important;
	}
	.email_before::before {
		content: "EMAIL:";
		font-weight: bold !important;
	}
	.phone_before::before {
		content: "PHONE:";
		font-weight: bold !important;
	}
	.chapters_before::before {
		content: "CHAPTER:";
		font-weight: bold !important;
	}
	.activation_before::before {
		content: "A-CODE:";
		font-weight: bold !important;
	}
	.user_status_before::before {
		content: "USER STATUS:";
		font-weight: bold !important;
	}
}
/* THE TABLE STYLE ENDS HERE */