/* Screen Width of 1200px or Greater
==================================================================================== */

	#super,
	#notify,
	#message,
	#header,
	#content,
	#footer						{ width: 1200px; margin: 0 auto; }
	
	#super.row					{ padding: 16px 0; }
	#notify.row,
	#message.row,
	#header.row,
	#footer.row					{ padding: 32px 0; }
	.slim #footer.row			{ padding: 0; }
	
/* Screen Width of 960px - 1199px
==================================================================================== */

    @media only screen and (max-width: 1199px) {
  
		#super,
		#notify,
		#message,
		#header,
		#content,
		#footer						{ width: 960px; }

		.tbl_column_xl				{ width: 176px; }
		.tbl_column_lrg				{ width: 144px; }
		.tbl_column_med				{ width: 128px; }
		.tbl_column_sml				{ width: 96px; }

		.course_passed,
		.course_failed 				{ width: 128px; height: 128px; }
		
	}
    
/* Screen Width of 768px - 959px
==================================================================================== */

    @media only screen and (max-width: 959px) {
	
		#super,
		#notify,
		#message,
		#header,
		#content,
		#footer						{ width: 768px; }
				
		.box_scroll					{ height: 256px; }

		textarea					{ height: 192px; }

		table						{ font-size: 0.9rem; }
		table .icon					{ width: 24px; height: 24px; background-size: 24px; }
		.tbl_column_xl				{ width: 160px; }
		.tbl_column_lrg				{ width: 144px; }
		.tbl_column_med				{ width: 112px; }
		.tbl_column_sml				{ width: 80px; }

		.course_passed,
		.course_failed 				{ width: 96px; height: 96px; font-size: 0.8rem; }
		.trainee_course_status h1,
		.course_passed h1,
		.course_failed h1			{ font-size: 1.5rem; }

		
	}

/* Screen Width of 320px - 479px
==================================================================================== */
	
	@media only screen and (max-width: 767px) {

		#super,
		#notify,
		#message,
		#header,
		#content,
		#footer						{ width: 100%; }

		#super.row					{ padding: 12px 0; }
		#notify.row,
		#message.row,
		#header.row,
		#footer.row					{ padding: 24px 0; }

		html						{ font-size: 81.25%; /* 81.25% of 16px = 13px */ }

		h1,
		h2,
		h3,
		p,
		ul,
		ol 							{ margin-bottom: 24px; }

		.padding_half				{ padding: 12px !important; }
		.margin_bottom_full 		{ margin-bottom: 24px !important; }
		.margin_bottom_half 		{ margin-bottom: 12px !important; }
		.margin_bottom_quarter 		{ margin-bottom: 6px !important; }
		.margin_top_full 			{ margin-top: 24px !important; }
		.margin_top_half 			{ margin-top: 12px !important; }
		.margin_top_quarter 		{ margin-top: 6px !important; }
		.margin_left_full 			{ margin-left: 24px !important; }
		.margin_left_half 			{ margin-left: 12px !important; }
		.margin_left_quarter 		{ margin-left: 6px !important; }
		.margin_right_full 			{ margin-right: 24px !important; }
		.margin_right_half 			{ margin-right: 12px !important; }
		.margin_right_quarter 		{ margin-right: 6px !important; }
		
		.row_collapse				{ flex-direction: column; }
		.row_collapse .dot			{ display: none; }
		.row_align .dot				{ display: block; }
		.column,
		.column_full,
		.column_half				{ width: 100%; padding: 0 12px; }
		.column_quarter				{ width: 50%; min-width: 136px; padding: 0 12px; }

		.box_accent,
		.box_light,
		.box_dark,
		.box_green,
		.box_white					{ padding: 24px; border-radius: 24px; margin-bottom: 24px; }
		.box_scroll					{ height: 192px; border-width: 4px; margin-bottom: 24px; }

		.btn						{ width: 48px; height: 48px; background-size: 48px; }
		.btn_small					{ width: 24px; height: 24px; background-size: 24px; }	
		.btn_txt 					{ width: 176px; padding: 12px 0; border-radius: 24px; }
		
		.icon						{ width: 24px; height: 24px; background-size: 24px; }

		.preloader					{ width: 48px; height: 48px; background-size: 48px; }
		
		.dot						{ margin: 0 12px; }
		.divider					{ height: 4px; border-radius: 24px; }
		.arrow						{ margin: 0 12px; }
		.list_bulleted				{ margin: 0 24px; }
		
		#header .logo img			{ height: 48px; }
		#header_identity			{ width: 100%; margin: 12px 0; text-align: center; }
		#header_nav a				{ margin-right: 12px; }
		#content_container			{ border-width: 4px 0; }
		
		.form_row					{ margin-bottom: 24px; }
		.form_comment				{ margin-left: 12px; }
		input[type=text],
		input[type=email],
		input[type=password],
		input[type=search],
		select,
		textarea,
		.stripe_field.StripeElement	{ padding: 12px 24px; border-radius: 24px; }
		label,
		.stripe_label				{ padding: 0 12px; margin-bottom: 12px; }	

		input[type="checkbox"] + label .form_checkbox	{ margin-right: 12px; }
		.form_checkbox_text 		{ width: 144px; }
		
		.form_radio_row label { padding: 0 24px; }
		.form_radio_group { margin-right: 12px; }
		input[type="radio"] + .form_radio_btn { height: 24px; width: 24px; }
		input[type="radio"]:checked + .form_radio_btn { background-size: 12px; }

		input[type=search],
		select,
		.form_error_row input,
		.form_error_row select		{ padding-right: 66px; background-position: right 24px top 50%; background-size: 18px; }
		input[type=search]			{ width: 90%; }

		textarea					{ height: 128px; }
				
		#tbl_summary				{ width: 100%; text-align: center; }
		#tbl_control				{ width: 100%; margin: 12px auto 0 auto; }
		table						{ font-size: 1.0rem; text-align: left; }
		table.margin_bottom_full	{ margin-bottom: 0 !important; }
		table .icon 				{ display: inline-flex; margin: 0; }
		tr:nth-of-type(odd)			{ background-color: transparent; }
		th							{ display: none; }
		td							{ display: flex; align-items: center; padding: 0 12px; width: 100%; }
		td:first-child				{ padding: 12px; background-color: #D7D7D7; font-weight: 600; }
		td:nth-child(2)				{ padding-top: 12px; }
		td:last-child				{ padding-bottom: 24px; }
		.preloader_row td:last-child	{ padding-bottom: 8px; } /* Corrects a display issue with the preloader. */
		td::before					{ margin-right: 6px; color: #AAAAAA; }
		.tbl_column_xl,
		.tbl_column_lrg,
		.tbl_column_med,
		.tbl_column_sml				{ width: 100%; }
		.tbl_ascend,
		.tbl_descend,
		.tbl_multi					{ padding-right: 36px; background-size: 12px; background-position: right 12px top 50%; }
		.no_results					{ display: block; padding: 24px !important; }
		.no_results .icon			{ display: block; margin: 0 auto; }

		.tbl_column_company_phone::before 			{ content: "Phone: "; }
		.tbl_column_company_state::before 			{ content: "State: "; }
		.tbl_column_company_status::before 			{ content: "Status: "; }
		.tbl_column_company_subscription::before	{ content: "Subscription: "; }
		.tbl_column_compliance::before 				{ content: "Compliance: "; }
		.tbl_column_course_passing::before			{ content: "Passing: "; }
		.tbl_column_course_questions::before		{ content: "Questions: "; }
		.tbl_column_course_status::before			{ content: "Status: "; }
		.tbl_column_question_correct::before		{ content: "Answer: "; }
		.tbl_column_question_options::before		{ content: "Options: "; }
		.tbl_column_result::before 					{ content: "Result: "; }
		.tbl_column_result_date::before 			{ content: "Date: "; }
		.tbl_column_trainee_ssn::before 			{ content: "SSN: "; }
		.tbl_column_trainee_status::before 			{ content: "Status: "; }
		.tbl_column_trainee_type::before 			{ content: "Type: "; }
		
		#price,
		#price2,
		#price3						{ margin: 0 6px; }
		#stripe_logo img			{ height: 24px; }

		#video_player				{ border-width: 4px; background-size: 48px; }
		
		.trainee_course_ttl,
		.trainee_course_status,
		.admin_course_ttl,
		.admin_course_stats			{ width: 100%; }
		.trainee_course_status,
		.admin_course_stats			{ margin-top: 24px; margin-left: 0; }
		.course_passed,
		.course_failed 				{ width: 92px; height: 92px; font-size: 1.0rem; }
		
		.test_question				{ margin-bottom: 12px; }
		
		#trainee_compliance_answers a	{ margin: 0 12px 0 0; }
		
		#trainee_course_results #tbl_control.row_align,
		#result #tbl_control.row_align	{ justify-content: center; }
		#trainee_course_results #tbl_control a,
		#result #tbl_control a			{ margin: 0 12px 0 0; }
		.result_question				{ margin-bottom: 24px; }
		.result_question .icon,
		.result_statement .icon			{ margin: 0 0 0 24px; }
		.result_question ol				{ margin: 0 24px 0 36px; }
		
		#super_admin_functions a 		{ margin: 0 6px; }
		#company #tbl_summary.row_align { justify-content: center; }
		#company #tbl_summary a 		{ margin: 0 auto; }
		.course_manage					{ padding: 12px 24px; }
		.course_manage_ttl				{ margin-right: 12px; font-size: 0.9rem; }

	}
												
/* Screen Width of 480px - 767px
==================================================================================== */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

		#super,
		#notify,
		#message,
		#header,
		#content,
		#footer						{ width: 480px; }
						
	}