/* I'VE MADE EDITS TO THIS FILE.  FOR ANY UPDATES, COMPARE THE UPDATED FILE TO THE ORIGINAL VERSION, THEN MERGE THE EDITS INTO THIS FILE IF THEY'RE RELEVANT. */


/* Bootstrap Overrides */


/* For making the text on buttons wrap properly */
	.btn {
		white-space: normal !important;
		word-wrap: break-word;
	}
	

/* --------------------------------------------------------------- */
	
	
/* Custom CSS */


/* For centering things */
	.lom_center {
		text-align: center;
		float: none;
	}

/* For making things float right */
	.float-right{
		float: right;
	}
	
/* For centering a close button on a modal box */
	.lom_center_close_modal_button {
		text-align: center;
		float: none;
		padding-bottom: 20px;
	}

/* For carousel on complete_account.php */
	.lom_carousel_box {
		width: 100%;
		min-height: 320px; 
		color: white;
		padding-top: 20px;
		//background-color: graytext;
		//background-color: #0047b3;
		background-color: #1a1a1a;
	}

/* For styling the circle checkmark glyphicon */
	.lom_big_success_icon {
		font-size: 80px;
		color: green;
	}

/* For styling the circle warning glyphicon */
	.lom_big_warning_icon {
		font-size: 80px;
		color: darkorange;
	}

/* For styling the circle X glyphicon */
	.lom_big_fail_icon {
		font-size: 80px;
		color: red;
	}


/* For centering a modal vertically on the page */
	.lom_vert_center_modal_dialog {
		height: 90%;
		width: 100%;
		display: flex;
		align-items: center;
		pointer-events: none;
	}
	.lom_vert_center_modal_content {
		margin: 0 auto;
		pointer-events: auto;
	}


/* For styling checkboxes as buttons */
	/* Hiding the checkbox, but allowing it to be focused */
	.badgebox {
		opacity: 0;
		display: none; 
		color: white;
	}
	.badgebox + .badge {
		/* Makes the badge's width stay the same checked and unchecked */
		width: 27px;
		display: none; 
		background-color: #00cc00;
		color: white;
	}

	
/* For styling a system message in the header */
	.lom_system_message_header {
		width: 100%;
		background-color: red;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		color: white;
		font-size: 20px;
	}

	
/* For styling breadcrumb buttons */
	.btn-breadcrumb .btn:not(:last-child):after {
		content: " ";
		display: block;
		width: 0;
		height: 0;
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent;
		border-left: 10px solid white;
		position: absolute;
		top: 50%;
		margin-top: -17px;
		left: 100%;
		z-index: 3;
	}
	.btn-breadcrumb .btn:not(:last-child):before {
		content: " ";
		display: block;
		width: 0;
		height: 0;
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent;
		border-left: 10px solid rgb(173, 173, 173);
		position: absolute;
		top: 50%;
		margin-top: -17px;
		margin-left: 1px;
		left: 100%;
		z-index: 3;
	}
	.btn-breadcrumb .btn {
		padding:6px 12px 6px 24px;
		background-color: #fff;
		color: black;
		border-color: #ccc;
		margin-top: 11px; /* For  */
	}
	.btn-breadcrumb .btn:first-child {
		background-color: #fff;
		padding:6px 6px 6px 10px;
		color: black;
	}
	.btn-breadcrumb .btn:last-child {
		padding:6px 18px 6px 18px;
		color: black;
	}

	.btn-breadcrumb .btn.btn-default:not(:last-child):after {
		border-left: 10px solid #fff;
		color: black;
	}
	.btn-breadcrumb .btn.btn-default:not(:last-child):before {
		border-left: 10px solid #ccc;
		color: black;
	}
	.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
		border-left: 10px solid #ebebeb;
		color: black;
	}
	.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
		border-left: 10px solid #adadad;
		color: black;
	}
	.btn-breadcrumb .btn.btn-default:hover {
		background-color: #ebebeb;
		color: black;
		border-color: #adadad;
	}

	
/* For styling buttons in sub-navigation */
	.btn-subnav .btn.btn-default{
		padding:5px 10px 5px 10px;
		background-color: #fff;
		color: black;
		border-color: #ccc;
		margin-top: 20px;
		margin-right: 5px;
	}
	.btn-subnav .btn.btn-default:hover {
		background-color: #ebebeb;
		color: black;
		border-color: #adadad;
	}
	
		
/* For the login / create account panels on index.php */
	.login_create_account_panel {
		padding: 10px;
		border-color: black;
		border: 2px solid;
		min-height: 360px;
		background: lightyellow;		
	}

	.login_create_account_panel_2 {
		padding: 10px;
		border-color: black;
		border: 2px solid;
		min-height: 360px;
		background: #deefff;
	}

	.login_create_account_panel_header {
		border-color: black;
		border: 1px solid;
		background: whitesmoke;
	}
		
	

/* For styling the icons in the right side of the navigation */
	.nav_icon_sizing {
		font-size: 30px;
	}
/*	
	.lom_right_navbar{
		position: relative;
		top: 5px;
	}
*/	

/* For styling the notifications icon in navigation */
	.notif_message_number {
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;   
		border: 2px solid red;
		width: 20px;
		height: 20px;  
		background-color: red;
		position: absolute;
		top: 8px;
		left: 30px;
		font-size: 12px;
		line-height: 15px;
		color: white;
		text-align: center;
	}
	.notif_message_number_hover {
		border: 2px solid black;
		background-color: black;
		color: red;
	}
	

/* For styling the notifications and pagination for notifications */
	.notif-style {
		background-color: white;
		padding-bottom: 10px;
		color: black;
		border: 1px solid black;
		margin-bottom: 3px !important;
	}
	.notif-style:hover {
		background-color: #dbdbdb;
		color: black;
	}
	

/* For styling the panels on the dashboard */	
	.dashboard_panel_1 {
		border-color: darkgreen;
	}
	.dashboard_panel_header_1 {
		border-color: darkgreen;
		background-color: darkgreen;
		color: white;
	}
	.dashboard_panel_body_1 {
		border-color: darkgreen;
	}
	.dashboard_panel_2 {
		border-color: darkblue;
	}
	.dashboard_panel_header_2 {
		border-color: darkblue;
		background-color: darkblue;
		color: white;
	}
	.dashboard_panel_body_2 {
		border-color: darkblue;
	}
	.dashboard_panel_3 {
		border-color: darkgoldenrod;
	}
	.dashboard_panel_header_3 {
		border-color: darkgoldenrod;
		background-color: darkgoldenrod;
		color: white;
	}
	.dashboard_panel_body_3 {
		border-color: darkgoldenrod;
	}
	.dashboard_panel_4 {
		border-color: #5b2c6f;
	}
	.dashboard_panel_header_4 {
		border-color: #5b2c6f;
		background-color: #5b2c6f;
		color: white;
	}
	.dashboard_panel_body_4 {
		border-color: #5b2c6f;
	}
	.dashboard_panel_5 {
		border-color: darkred;
	}
	.dashboard_panel_header_5 {
		border-color: darkred;
		background-color: darkred;
		color: white;
	}
	.dashboard_panel_body_5 {
		border-color: darkred;
	}
	.dashboard_heading_font	 {
		font-weight: bold;
		font-size: 26px;
	}	
	
	
/* For styling the buttons on the panels on the dashboard */	
	.dashboard_panel_button_all {
		margin-bottom: 8px !important;
		background-color: #e6e6e6;
		color: black !important;
		/*min-width: 210px;*/
	}
	.dashboard_panel_button_1 {
		border-color: darkgreen;
	}
	.dashboard_panel_button_2 {
		border-color: darkblue;
	}
	.dashboard_panel_button_2_no_click {
		border-color: darkblue;
	}
	.dashboard_panel_button_3 {
		border-color: darkgoldenrod;
	}
	.dashboard_panel_button_3_no_click {
		border-color: darkgoldenrod;
	}
	.dashboard_panel_button_4 {
		border-color: #5b2c6f;
	}
	.dashboard_panel_button_4_no_click {
		border-color: #5b2c6f;
	}
	.dashboard_panel_button_5 {
		border-color: darkred;
	}
	.dashboard_panel_button_5_no_click {
		border-color: darkred;
	}
	.dashboard_panel_button_1:hover {
		background-color: darkgreen !important;
		color: white !important;
	}
	.dashboard_panel_button_2:hover {
		background-color: darkblue !important;
		color: white !important;
	}
	.dashboard_panel_button_3:hover {
		background-color: darkgoldenrod !important;
		color: white !important;
	}
	.dashboard_panel_button_4:hover {
		background-color: #5b2c6f  !important;
		color: white !important;
	}
	.dashboard_panel_button_5:hover {
		background-color: darkred !important;
		color: white !important;
	}
	

/* For not underlining things (most commonly, links) */		
	.no_underline {
		text-decoration: none !important;
	}
	
	
/* For having no margin around the element */		
	.no_margin {
		margin: 0px;
	}
	
	
/* For having a small border and faint background colors */
	.panel_alt_1 {
		padding: 10px;
		border-color: black;
		border: 1px solid;
		background: lightyellow;
	}

	.panel_alt_2 {
		padding: 10px;
		border-color: black;
		border: 1px solid;
		background-color: #dafdda;
	}
	

/* For making product names stand out at the Students and Info. part of registration */
	.prod_name_header {
		color: white;
		background-color: darkblue;
		padding: 10px;
		border-color: darkblue;
		border: 1px solid;
	}
	

/* For showing medium sized radio buttons */
	.medium_radio:focus{
		outline:none;
	}
	.medium_radio{
		-webkit-appearance:button;
		-moz-appearance:button;
		appearance:button;
		border:4px solid #ccc;
		border-top-color:#bbb;
		border-left-color:#bbb;
		background:#fff;
		width:20px;
		height:20px;
		border-radius:50%;
		position: unset !important;
		vertical-align: bottom;
		margin-right: 5px;
	}
	.medium_radio:checked{
		border:10px solid #4099ff;
	}


/* For showing large radio buttons */
	.big_radio:focus{
		outline:none;
	}
	.big_radio{
		-webkit-appearance:button;
		-moz-appearance:button;
		appearance:button;
		border:4px solid #ccc;
		border-top-color:#bbb;
		border-left-color:#bbb;
		background:#fff;
		width:40px;
		height:40px;
		border-radius:50%;
		vertical-align: text-bottom;
		margin-right: 5px;
	}
	.big_radio:checked{
		border:20px solid #4099ff;
	}

	
/* For showing large-ish radio buttons for polls */	
	.big_radio_polls:focus{
		outline:none;
	}
	.big_radio_polls{
		-webkit-appearance:button;
		-moz-appearance:button;
		appearance:button;
		border:4px solid #ccc;
		border-top-color:#bbb;
		border-left-color:#bbb;
		background:#fff;
		width:20px;
		height:20px;
		border-radius:50%;
		vertical-align: text-bottom;
		margin-right: 5px;
	}
	.big_radio_polls:checked{
		border:10px solid #585858;
	}

	
/* For showing a kind of large checkbox */
	.big_checkbox{
		transform: scale(1.5);
		margin-left: -25px !important;
	}
	.big_checkbox_2{
		transform: scale(1.5);
		margin-left: 4px !important;
		margin-right: 8px !important;
	}
	.big_checkbox_3{
		transform: scale(1.5);
		top: 4px;
	}

	
/* For styling the "directions" during registration */
	.registration-directions{
		padding-left: 25px !important;
		border-color: darkblue;
		padding: 9px;
		border-radius: 4px;
		background-color: #ecf0f1;
		border: 1px solid;
	}

	
/* For styling the "progress" circle on order history */
	.order_status_circle_completed{
		background: #3cb521;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		font-size: 25px;
		text-align: center;
		color: white;
		padding: 7px;
		display: inline-block;
	}
	.order_status_circle_gray{
		background: black;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		font-size: 25px;
		text-align: center;
		color: white;
		padding: 7px;
		display: inline-block;
		opacity: 0.4;
	}
	.order_status_text{
		font-size: 18px;
	}
	.order_status_fade{
		opacity: 0.4;
	}
	
	
/* For making the close "X" fully visible.  This is to override bootstrap's opacity settings for this kind of thing. */	
	.lom_close{
		opacity: 1.0 !important;
		text-decoration: none !important;
		color: white !important;
	}

	
/* For improving Bootstrap's poor treatment of <hr>'s. */	
	.lom_hr{
		margin-top: 21px;
		margin-bottom: 21px;
		border: 0;
		border-top: 1px solid black;
	}

	
/* For making the something "pulsate". */	
	.pulsate {
		-webkit-animation: pulsate 1s ease-out;
		-webkit-animation-iteration-count: infinite; 
		opacity: 0.5;
	}
	@-webkit-keyframes pulsate {
		0% { 
			opacity: 0.5;
		}
		50% { 
			opacity: 1.0;
		}
		100% { 
			opacity: 0.5;
		}
	}

	
/* For styling "My Conversations" in messages */
	.lom_messages_list {
		background-color: cornflowerblue;
		color: black;
		border-color: black;
	}
	.lom_messages_list:hover {
		background-color: #585858;
		color: white;
		border-color: cornflowerblue;
	}

	
/* For styling the "link" to show user contact info. in a popover */
	.user_contact_info_link {
		color: #0066ff; 
		cursor: pointer;
	}


/* For making the container for courses have a width of 97.5% to match the blank space under the header */
	.container-courses {
		width: 99.5%;
		padding-bottom: 20px;
	}
	
	
/* For positioning icons for boxes on course_home (currently) in the upper right corner */
	.lom_right_corner_icon {
		float: right;
		padding: 5px;	
	}
	
	
/* For styling quiz questions */
	.lom_quiz_question {
		font-size: 18px;
	}
	
	.lom_quiz_radio_checkbox label {
		/*min-width: 400px;*/
		width: 100%;
		border-radius: 3px;
		border: 1px solid #D1D3D4;
		font-weight: normal;
	}
	.lom_quiz_radio_checkbox input[type="radio"]:empty, .lom_quiz_radio_checkbox input[type="checkbox"]:empty {
		display: none;
	}
	.lom_quiz_radio_checkbox input[type="radio"]:empty ~ label, .lom_quiz_radio_checkbox input[type="checkbox"]:empty ~ label {
		position: relative;
		/*line-height: 2.5em;*/
		min-height: 45px;
		padding-left: 3.25em;
		padding-top: 9px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.lom_quiz_radio_checkbox input[type="radio"]:empty ~ label:before, .lom_quiz_radio_checkbox input[type="checkbox"]:empty ~ label:before {
		position: absolute;
		display: block;
		top: 0;
		bottom: 0;
		left: 0;
		content:'';
		width: 2.5em;
		background: #D1D3D4;
		border-radius: 3px 0 0 3px;
	}
	.lom_quiz_radio_checkbox input[type="radio"]:hover:not(:checked) ~ label:before, .lom_quiz_radio_checkbox input[type="checkbox"]:hover:not(:checked) ~ label:before {
		content:'\2714';
		text-indent: .9em;
		color: #C2C2C2;
		padding-top: 9px;
	}
	.lom_quiz_radio_checkbox input[type="radio"]:hover:not(:checked) ~ label, .lom_quiz_radio_checkbox input[type="checkbox"]:hover:not(:checked) ~ label {
		/*color: #888;*/
		opacity: 0.8;
	}
	.lom_quiz_radio_checkbox input[type="radio"]:checked ~ label:before, .lom_quiz_radio_checkbox input[type="checkbox"]:checked ~ label:before {
		content:'\2714';
		text-indent: .9em;
		color: #333;
		background-color: #ccc;
		padding-top: 9px;
	}
	.lom_quiz_radio_checkbox input[type="radio"]:checked ~ label, .lom_quiz_radio_checkbox input[type="checkbox"]:checked ~ label {
		/*color: #777;*/
	}
	.lom_quiz_radio_checkbox input[type="radio"]:focus ~ label:before, .lom_quiz_radio_checkbox input[type="checkbox"]:focus ~ label:before {
		box-shadow: 0 0 0 3px #999;
	}
	.lom_quiz_radio_checkbox-default input[type="radio"]:checked ~ label:before, .lom_quiz_radio_checkbox-default input[type="checkbox"]:checked ~ label:before {
		color: #333;
		background-color: #ccc;
	}
	.lom_quiz_radio_checkbox-primary input[type="radio"]:checked ~ label:before, .lom_quiz_radio_checkbox-primary input[type="checkbox"]:checked ~ label:before {
		color: #fff;
		background-color: #337ab7;
	}
	.lom_quiz_radio_checkbox-success input[type="radio"]:checked ~ label:before, .lom_quiz_radio_checkbox-success input[type="checkbox"]:checked ~ label:before {
		color: #fff;
		background-color: #5cb85c;
	}
	.lom_quiz_radio_checkbox-danger input[type="radio"]:checked ~ label:before, .lom_quiz_radio_checkbox-danger input[type="checkbox"]:checked ~ label:before {
		color: #fff;
		background-color: #d9534f;
	}
	.lom_quiz_radio_checkbox-warning input[type="radio"]:checked ~ label:before, .lom_quiz_radio_checkbox-warning input[type="checkbox"]:checked ~ label:before {
		color: #fff;
		background-color: #f0ad4e;
	}
	.lom_quiz_radio_checkbox-info input[type="radio"]:checked ~ label:before, .lom_quiz_radio_checkbox-info input[type="checkbox"]:checked ~ label:before {
		color: #fff;
		background-color: #5bc0de;
	}
	
	.lom_angled_bracket_fraction {
		-webkit-transform:scaleY(2); /* Safari and Chrome */
		-moz-transform:scaleY(2); /* Firefox */
		-ms-transform:scaleY(2); /* IE 9 */
		-o-transform:scaleY(2); /* Opera */
		transform: scaleY(2); /* W3C */
		display: inline-block;
	}
	
	
/* For styling FIB questions and toolbar */
    .mathquill {
        min-height: 34px;
        height: auto;
    }
	
    #calcButtons {
        display: none;
        margin-top: 5px;
    }
    

/* For styling sortable items */	
	.lom_sortable {
		border: 2px dashed red;
		cursor: move;
		margin-bottom: 10px;
		padding: 10px 15px;
		border-radius: 3px;
	}
	
	.lom_sortable:hover {
		border-color: green;
		border-style: solid;
		cursor: move;
		opacity: .8;
	}
	.lom_sortable_results {
		border: 2px solid green;
		padding: 10px;
		border-radius: 3px;
		margin-right: 10px
	}
	
/* For styling draggable and droppable items */	
	.lom_draggable {
		border: 2px dashed red;
		cursor: move;
		margin-bottom: 10px;
		padding: 10px 15px;
		border-radius: 3px;
		width: 100%;
	}
	.lom_draggable:hover {
		border-color: green;
		border-style: solid;
		cursor: move;
		opacity: .8;
	}
	.lom_droppable {
		border: 2px solid black;
		border-radius: 3px;
		min-height: 50px;
		padding-top: 10px;
		padding-right: 10px;
		padding-left: 10px;
	}
	.lom_highlight_droppable {
		background-color: yellow !important;
		color: black !important;
	}


/* For styling things related to the right/wrong box for quiz results */		
	.lom_quiz_right_box {
		background: transparent;
		color: green;
		padding: 8px;
		margin-left: -5px;
		width: 55px;
		text-align: center;
	}
	.lom_quiz_wrong_box {
		background: transparent;
		color: red;
		padding: 8px;
		margin-left: -5px;
		width: 55px;
		text-align: center;
	}
	.lom_quiz_partial_wrong_box {
		background: transparent;
		color: darkorange;
		padding: 8px;
		margin-left: -5px;
		width: 55px;
		text-align: center;
	}
	.lom_quiz_blank_box {
		background: transparent;
		padding: 8px;
		margin-left: -5px;
		width: 55px;
	}
	.lom_flex {
		 display: flex;
	}
	.lom_corrected_result {
		border: 1px solid;
		padding: 10px;
		text-align: center;
	}
	.lom_corrected_result_correct {
		vertical-align: top;
	}
	.lom_corrected_result_FIB_IDK {
		min-width: 195px;
		text-align: left
	}	
	
/* For styling the input field for editing quiz results */	
	.lom_quiz_score_edit {
		color: black;
		width: 30px;
		text-align: center;		
	}

/* For styling the icon about the teacher adjusting a quiz score */		
	.lom_teacher_adjust_quiz_score {
		background: transparent;
		color: #db8b0b;
		padding-right: 8px;
		font-size: 25px;
		vertical-align: middle;
	}

	

/* For styling related to "The Latest" */	
	.lom_the_latest_content {
		font-size: 16px;
	}
	.lom_the_latest_content a {
		color: white;
		text-decoration: underline;
	}
	.lom_the_latest_content a:hover {
		color: yellow;
		background-color: gray;
		text-decoration: underline;
	}
	.rec_sessions_and_hw_latest {
		border-color: white;
	}


	
/* For styling the teacher view of Recorded Sessions and H.W. */	
	.table-striped-two-rows tbody tr:nth-child(4n+1), .table-striped-two-rows tbody tr:nth-child(4n+2) {
		background: #ecf0f1;
	}

	.table-striped-two-rows tbody tr:nth-child(8n+1), .table-striped-two-rows tbody tr:nth-child(8n+2) {
		background: #ecf0f1;
	}
	
	
	hr {
		height: 1px;
	}
	
	
	
/* For managing the width of the columns in the gradebook */

	.LOM_gradebook_table td.fit, 
	.LOM_gradebook_table th.fit {
		white-space: nowrap;
		width: 1%;
	}
		
/* For sizing icons in the gradebook */		
	.LOM_gradebook_icon {
		font-size: 150% !important;
		vertical-align: bottom;
		margin-bottom: 5px;
	}
	
/* For font size of header buttons in the gradebook */		
	.LOM_gradebook_header_button {
		font-size: 18px;
	}
	
/* For styling the percent displays in the gradebook */	
	.LOM_gradebook_percent_display {
		color: green;
		font-weight: bold;
		font-size: 125%;
	}
	
/* For coloring the "totals" part of the gradebook */	
	.LOM_gradebook_totals_1 {
		background-color: beige;
	}
	.LOM_gradebook_totals_2 {
		background-color: mistyrose;
	}
	.LOM_gradebook_totals_3 {
		background-color: lightgray;
	}
	
/* For styling the "late" in the gradebook */	
	.LOM_gradebook_late {
		color: red;
		font-weight: bold;
		text-decoration: underline;
	}

/* For hiding the exportable version of the gradebook until needed */	
	#exportable_gradebook {
		display: none;
	}
	
	
/* For vertically aligning cell contents of table in the editing area of the gradebook for teachers */	
	.LOM_edit_gradebook_cell {
		vertical-align: middle !important;
		cursor: pointer;
	}

/* For styling the percent displays in the editing area of the gradebook for teachers */	
	.LOM_edit_gradebook_percent_display {
		color: green;
		font-weight: bold;
	}
	
/* For styling the boxes in the update gradebook table  */	
	.LOM_update_gradebook {
		vertical-align: middle !important;
	}
	

/* For showing fractions in various places of the website */
	.fraction_display {
		display: inline-block;
		position: relative;
		vertical-align: middle; 
		letter-spacing: 0.001em;
		text-align: center;
		
	}
	.fraction_display > span { 
		display: block; 
		padding: 0.1em; 
	}
	.fraction_display span.denom_display {border-top: thin solid black;}
	.fraction_display span.bar_display {display: none;}
	
	
/* For styling the "unit headers" on the Lesson Assignments page */	
	.LOM_unit_header {
		font-size: 125%;
		font-weight: bold;
		padding-bottom: 10px;
	}

/* For styling the <hrs> on the Lesson Assignments page */	
	.lesson_assign_hr {
		margin-top: 5px;
		margin-bottom: 5px;
		border: 0;
		border-top: 1px solid black;
	}
	
	
/* For creating a faded background overlay (with #overlay_content) for IM */	
	#overlay {
		position: fixed; /* Sit on top of the page content */
		display: none; /* Hidden by default */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0; 
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5); /* Black background with opacity */
		z-index: 99999999999; /* Specify a stack order in case you're using a different order for other elements */
		cursor: pointer; /* Add a pointer on hover */
	}
	#overlay_content{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
	}
	
	
/* For styling Common Links in course_home.php */		
	.lom_course_home_special_boxes {
		color: white;
	}
	
	
/* For styling the "bullets" on the content page for video lessons */	
	.video_lesson_ul {
		list-style: none;
		padding: 0;
	}
	.video_lesson_li {
		padding-left: 10px;
		font-size: 35px;
	}
	.video_lesson_li_1:before {
		margin-right: 15px;
		vertical-align: bottom;
		content: '\e63a';
		font-family: "Material Icons"; 
	}
	.video_lesson_li_2:before {
		font-size: 42px;
		position: relative;
		top: 6px;
		left: 1px;
		margin-right: 18px;
		vertical-align: bottom;
		content: '\f453';
		font-family: "Ionicons"; 
	}
	.video_lesson_li_3:before {
		font-size: 41px;
		position: relative;
		top: 6px;
		margin-right: 12px;
		vertical-align: bottom;
		content: '\f44a';
		font-family: "Ionicons"; 
	}

/* For styling the text on the content page for video lessons */	
	.video_lesson_text {
		font-size: 20px;
	}

	
/* For styling the icons on the content page for video lessons */	
	.video_lesson_icon {
		font-size: 100px !important;
	}
	.video_lesson_icon_1 {
		color: royalblue;
	}
	.video_lesson_icon_2 {
		color: green;
	}
	.video_lesson_icon_3 {
		color: red;
	}

	
/* For styling buttons on take_test.php */	
	.take_test_box_1 {
		color: #ffffff;
		background-color: #dd4b39;
	}
	.take_test_box_1:hover {
		color: #ffffff;
		background-color: #b30000;
		border-color: #cd2a19;
	}
	.take_test_box_2 {
		color: #ffffff;
		background-color: #f39c12;
	}
	.take_test_box_2:hover {
		color: #ffffff;
		background-color: #c06a00;
		border-color: #c06a00;
	}
	.take_test_box_3 {
		color: #ffffff;
		background-color: #3c8dbc;
	}
	.take_test_box_3:hover {
		color: #ffffff;
		background-color: #286090;
		border-color: #204d74;
	}
	.take_test_box_video_course {
		color: #ffffff;
		background-color: #00a65a;
	}
	.take_test_box_video_course:hover {
		color: #ffffff;
		background-color: #008d4c;
		border-color: #008d4c;
	}

	
/* For styling the scratchpad for correcting tests */	
    .correct_test_containter {
        border: 2px dashed red;
        position: inherit;
        padding: 5px;
        font-size: 20px;
		font-family: sans-serif;
		min-height: 25px;
		background: beige;
      }

	  
/* For styling the clickable comments when correcting tests */		  
	.common_comment_link{
		cursor: pointer !important;
		text-decoration: underline !important;
	}

	
/* For helping with the display of textboxes when correcting tests */
	.correct_test_text_box {
        border: 3px dashed #007fff;
        position: absolute;
        padding: 5px;
        font-size: 20px;
		font-family: sans-serif;
		min-height: 25px;
    }
    text {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
      
    input.correct_test_text_box {
        background: transparent;
    }
	  
	
/* For displaying the "viewing student" info. when a non-student enters a course */
	.non_student_message_box {
		color: red;
		font-weight: bold;
		padding: 5px;
		background: white;
		border: 1px solid transparent;
		border-radius: 4px;
		margin: auto;
		margin-top: 8px;
		position: relative;
		left: -20px;		
      }

	  
/* For styling buttons to be white against a colored background */
	.btn-white_background{
		background-color: #fff;
		color: black;
		border-color: #ccc;
	}
	.btn-white_background:hover {
		background-color: #ebebeb;
		color: black;
		border-color: #adadad;
	}
	  
	  
/* For styling the student name "tiles" for the random student selector */
	.random_student_selector{
		background-color: lightgoldenrodyellow;
		width: 33.3%;
		vertical-align: middle;
		padding: 15px !important;
	}
	  
	.random_student_selector2{
		padding: 5px;
		background-color: lightgoldenrodyellow;
		border: 2px solid black;
		margin: 5px;		
	}
	
	
/* For styling a generic autocomplete widget made by Claude Code in Apr. 2026. */

	.autocomplete-wrapper {
		position: relative;
	}

	.autocomplete-results {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border: 1px solid #ccc;
		border-top: none;
		max-height: 300px;
		overflow-y: auto;
		z-index: 1000;
		display: none;
		box-shadow: 0 4px 8px rgba(0,0,0,0.08);
	}

	.autocomplete-item {
		padding: 8px 12px;
		cursor: pointer;
		border-bottom: 1px solid #eee;
	}

	.autocomplete-item:last-child {
		border-bottom: none;
	}

	.autocomplete-item:hover,
	.autocomplete-item.active {
		background-color: #f0f0f0;
	}

	/* Non-clickable status rows (loading, empty, error, "more results"). */
	.autocomplete-loading,
	.autocomplete-empty,
	.autocomplete-error,
	.autocomplete-more {
		color: #999;
		cursor: default;
		font-style: italic;
	}

	.autocomplete-loading:hover,
	.autocomplete-empty:hover,
	.autocomplete-error:hover,
	.autocomplete-more:hover {
		background-color: transparent;
	}

	.autocomplete-error {
		color: #c00;
	}