/* Primary Colours: #16b, #47b, #09f, #3af, #def, #e8f4ff */
.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none; }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Generic Elements */
html { -webkit-text-size-adjust: 100%; word-wrap: break-word; }
body { font-family: Lato; font-weight: 300; 	margin: 0px; background: #f0f8ff; font-size:14px; line-height:26px; color:#333; -webkit-font-smoothing: subpixel-antialiased; }
body.modal_open { overflow:hidden; }
a { text-decoration:none; color:#16b; transition: background .1s ; cursor: pointer; }
a:hover { color:#09f; }
a img { border:0px; }
h1, h2, h3, h4, ol, ul, p { font-weight:300; margin:0px; }
h1 { font-size:26px; padding:8px 0px; } 
h2 { font-size:20px; padding:4px 0px 8px 0px; } 
h3 { font-size:18px; padding:2px 0px 8px 0px; }
h4 { font-size:16px; padding:2px 0px 8px 0px; } 
p { padding:2px 0px 6px 0px; }
pre { font-size:12px; line-height:16px; background:#fff; border-radius:2px;  padding:20px; text-align: left; max-width:100%; box-sizing: border-box; white-space:pre-wrap;}

/* Icons */
i.fa:not(.fa-short) { margin-right:4px; }

/* Warning */
#browser_nosupport { text-align:center; background:#f55; padding:20px; display:block; color:#fff; }
#browser_nosupport:hover{ background:#f77; }

/* Title */
#title_container { background:#16b; position:fixed; top:0px; width:100%; z-index:500;  }
#title { height:60px; padding:10px 38px; max-width:1184px; margin:0px auto; transition:height .2s; display: flex; align-items: center; gap: 38px; }
#logo_link, #logo, #logo_mobile { height:38px; }
#status { transition:opacity .2s; color:#fff; }
#quicklinks { font-size:12px; line-height:12px; border-radius:0px 0px 2px 2px; margin:6px 0px 0px 0px; padding:0px; text-align:center; list-style-type:none; }
#quicklinks li { display:inline-block; padding:0px; margin-left:0px; border-radius:2px; background:rgba(51,170,255,0); transition: all .2s; }
#quicklinks a img { height:20px; width:20px; display:inline-block; }
#quicklinks a img.extended_bottom { height:23px; margin-bottom:-3px }
#quicklinks a { display:inline-block; padding:6px; transition: all 0.2s; position:relative; color:#fff; vertical-align:top; }
#quicklinks li:hover { background:#09f; }
#quicklinks .quicklink_stat, .comment_bubble { position:absolute; background:#3af; padding:0px 4px; border-radius:30px 30px 30px 0px; margin-top:-14px; margin-left:12px; font-size:9px; min-width:12px; transition: all .2s; line-height:18px; }
#quicklinks .quicklink_stat.ql_notification_count { background:#f66; } t
#quicklinks a:hover .quicklink_stat { margin-top:-20px; }
#quicklinks #ql_timetable { position:absolute; border-radius:2px; display:block; max-height:0px; overflow:hidden; transition:all .2s; margin-top:-4px; background:rgba(51,170,255,0); }
 #quicklinks li:hover #ql_timetable { max-height:400px; background:#09f; } 
#quicklinks #ql_timetable a, #quicklinks #ql_timetable .loading_indicator { width:68px; display:block; margin:6px; overflow:hidden; font-size:12px; text-align:left; border-radius:2px; }
#quicklinks #ql_timetable a:hover { background:#3af; }
#quicklinks .ql_tt_room { font-size:8px; line-height:18px; max-height:18px; }

/* The Menu */
#mobile_menu_button { color: #fff; font-size: 24px; display: none }
#mobile_menu_button:hover { cursor: pointer; }
#menu { background: #16b; flex-grow: 1; }
#menu a { display: block; color: #fff; padding: 2px 12px; }
.no-touch #menu li li:hover { background: #3af; }
#menu ul { list-style-type: none; padding: 0px; max-width:1184px; margin:0px auto; z-index:200; }
#menu ul ul { max-height: 0px; position: absolute; max-width: 212px; padding:0px 6px; border-radius:0px 2px 2px 2px; transition: all .2s; overflow:hidden; }
#menu li { margin: 0px 6px 0px 0px; 	padding: 0px; float: left; transition: all .2s; border-radius:2px; background:rgba(51,170,255,0); }
#menu li.active { background:#17c; }
#menu li:hover { background:#09f; }
#menu li li:hover { border-radius:2px 2px 2px 2px; }
#menu li li a { width: 188px; padding:4px 12px; color:rgba(255,255,255,0); }
#menu li:hover { border-radius:2px 2px 0px 0px; }
#menu li:hover > ul { max-height: 1000px; background: #09f; box-shadow:2px 2px 2px rgba(0,0,0,0.2); padding:6px; opacity:1; }
#menu li:hover > ul li a { color:#fff; }

/* Search modal */
#modal_window_site_search { bottom:auto; }
#modal_window_site_search .site_search_input { width:100%; max-width:100%; }

/* Modal results */
.modal_results { list-style-type:none; padding: 0px; margin: 12px 0px; }
.modal_results li { list-style-type:none; padding: 0px; margin: 8px 0px; }
.modal_results li a.record { padding:3px 10px; display:inline-block; width:100%; border-radius:2px; box-sizing:border-box; }
.modal_results li a.record.active_result { background:#def; }
.modal_results li a.record_short { width:320px; width:calc(100% - 78px); }
.modal_results li a.record:hover { background:#def; }
.modal_results li a.button { float:right; width:70px; padding: 4px 12px; text-align:center; font-size:12px; }

/* Main */
#main { max-width:1200px; margin:0px auto; padding:12px 20px; padding-top:100px; }

/* Page Header */
#page_header { padding:12px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#page_header:has(h1+p) {flex-direction: column; align-items: flex-start; gap: 0}
#page_header h1 {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
#page_header .page_header_title { display: flex; flex: 1;max-width: 100%; min-width: 0;align-items: center;justify-content: flex-start; gap: 10px;}
#page_header .page_header_title .student_photo_placeholder.small  {margin: 0; }
#page_header .page_header_options { white-space: nowrap;display: flex; align-items: center; gap: 10px; max-width: 100%;}
.page_actions_button { flex-shrink: 0; order: 2; position:relative; cursor:default; background:#09f; line-height:0px; border-radius:2px; padding:8px 0px;  width:58px; text-align: center;}
.page_actions_button img { height: 16px; }
.page_actions_button:hover { border-radius:2px 2px 0px 0px; background:#3af; }
.page_actions_button:hover > .actions_list { display:block; visibility:visible; opacity:1; }
.page_actions_button .actions_list { display:none; opacity:0; transition:opacity .2s; border-radius:2px 0px 2px 2px; background:#3af; position:absolute; line-height:24px; list-style-type:none; padding: 6px; z-index:199; width:164px; margin:4px 0px 0px -118px;text-align: left;  }
.page_actions_button .actions_list li { padding:0px; margin:0px; float:none; }
.page_actions_button .actions_list a.selected { background:#4bf; }
.page_actions_button .actions_list a { padding:6px 12px; color:#fff; display:block; border-radius:2px; }
.page_actions_button .actions_list a:hover { background:#4bf !important; }

.display_options.with_actions { margin-right:68px; }
.display_options ul { list-style-type:none; margin:0px; padding: 0px; float:right ; }
.display_options li { float:left; position:relative; }
.display_options li span.label { padding:0px 8px; margin-left:2px; display:block; }
.display_options li a { padding:0px 8px; border-radius:2px; margin-left:2px; transition:color .2s, background .2s; display:block; }
.display_options li a.selected { background:#3af; color:#fff;}
.no-touch #main .display_options li a:hover { background:#09f; color:#fff; cursor:pointer; }
.modal_window .display_options { float:none; text-align: right; margin:0px;  clear:both; height:32px; }
.modal_window table .display_options { text-align: center; margin: 2px 0px; height: auto; }
.filter_form { line-height:32px; }

/* Layout elements */
.content { margin:12px 8px; border-radius:2px; padding:4px 0px; position:relative; }
.content .content { margin:8px 0px; }
.content.sub_heading { margin-top:0px; }
.content_label { padding:8px 8px 4px; }
.stat_container { display: flex; justify-content: space-between; align-items: center; }
.stat { font-size:24px; line-height:42px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.content.info, .content.warning, .content.error, .content.action_completed, .content.action_not_completed { color:#fff; padding:4px 12px; text-align:center; }
.content.info { background:#e8f4ff; color:#47b; } .content.info a { text-decoration:underline; color:#16b; }
.content.warning { background:#ffa800; } .content.warning a { color:#fff; text-decoration:underline; }
.content.error { background:#f66; } .content.error a { color:#fff; text-decoration:underline; }
.content.action_completed{ background:#0c6; transition:background .2s; }  .content.action_not_completed a { color:#fee; text-decoration:underline; }
.content.action_completed a { color:#efe; text-decoration:underline; }
.content.action_not_completed{ background:#f66; transition:background .2s; } 
.content.action_completed:hover { cursor:pointer; background:#1c8; }
.content.action_not_completed:hover { cursor:pointer; background:#f77; }
.content.block_light { background:#fff; padding:8px 16px; }
.content.block_dark { background:#def; padding:8px 16px; }
.layout { clear:both; }
.layout.light { background:#fff; }
.layout.dark{ background:#3af; color:#fff; }
.layout.dark a { color:#def;  }
.layout.dark a:hover { color:#d0e0f0;  }
.layout.two_col .col { width:50%; overflow:hidden; }
.layout.two_col .col:first-child { float:left; }
.layout.three_col .col { width:33.333%; overflow:hidden; float:left; } 
.layout.three_col .col:last-child { float:none; }
.content .chart { padding:12px; }
.content .pie_chart, .content .column_chart, .content .line_chart { height:300px; }
.content .bar_chart, .content .column_chart_attendance { height:260px; }
.content .bar_chart_short { height:100px; }
.scrollable { max-width:100%; overflow:auto; }
.sticky_header { overflow:initial; }
.content ol { line-height:28px; }
.layout .sidebar { float:right; width:220px; text-align:center; }
.layout .sidebar .content { background:#fff; padding:8px 12px; border-radius:2px; }
.layout .with_sidebar { margin-right:220px; overflow:auto; }
.layout .sidebar h3 { color:#444; }
.layout .sidebar h3:not(:first-child) { padding-top:10px; }
.layout .sidebar ul{ list-style-type:none; margin:0px; padding:4px; }
.layout .sidebar ul li { padding:0px; margin:4px 0px; }
.layout .sidebar ul li a { display:block; border-radius:2px; padding:2px; }
.layout .sidebar ul li a.button { padding:4px 14px; font-size:14px; }
.layout .sidebar ul li a.button:hover { background:#3af; }
.layout .sidebar ul li a.active { background:#f0f8ff; }
.layout .sidebar ul li a:hover { background:#def; }
.content.badges .badge { float:left; margin:8px; height:100px; width:100px; }
.badge_image img { max-height:100px; max-width:100px; vertical-align: middle; }
td.badge_image img { max-height:50px; max-width:50px; }
.content.badges .badge_details { height:96px; width:104px; position:absolute; font-size:10px; line-height:16px; padding:8px 4px; background:#def; background:rgba(221,238,255,0.95); color:#000; text-align:center; margin:-6px; border-radius:2px; visibility:hidden; opacity:0; transition:all .2s; }
.content.badges .badge:hover > .badge_details{ visibility:visible; opacity:1; cursor:default; }
.content.badges .subtitle { font-style:italic; }
.content.badges .title { font-size:11px; }
.content.badges .actions { text-align:center; position:absolute; margin-top:72px; width:104px; }

/* Generic colours */
.warning { color:#f66; }
.confirmed { color:#1c8; }

/* Action Icons */
.icon_action { border-radius:2px; padding:2px; display:inline-block; transition:background-color .2s; line-height:16px; }
.icon_action img { vertical-align: text-top; height:16px; display:inline-block; }
.icon_action:hover { background:#def }
.icon_action.disabled { opacity:0.3; pointer-events: none; cursor: default;}
.icon_action.disabled:hover { background:none; }

td.actions_one { width: 50px; }
td.actions_two { width: 60px; }
td.actions_three { width: 85px; }
td.actions_four { width: 100px; }
td.actions_five { width: 130px; }

/* Tables */
table { width:100%; border-spacing:0px; background:#def; border-radius:2px; }
th, td { padding: 4px; transition: background .2s; text-align:center; }
td { background:#fff; border:solid 1px #f0f8ff; border-width:0px 1px 1px 0px; }
.modal_window td { background:#fbfdff; }
.layout.light td:not(.warning,.error,.ok) { border-color:#def; }
.layout.light td:last-child { border-right:1px solid #def; }
th { padding:6px 12px; background:#09f; color:#fff; font-weight:300; border:solid 1px #def; border-width:0px 1px 1px 0px; z-index: 100; }
th.secondary { background:#def; color:#000; border-color:#f0f8ff; } 
.sticky_header th { position: sticky; top: 0; }
table th:first-child { border-radius:2px 0 0 0; }
table th:last-child { border-radius: 0 2px 0 0; border-width:0px 0px 1px 0px; }
table tr:last-child td:first-child{ border-radius:0 0 0 2px ; }
table tr:last-child td:last-child{ border-radius:0 0 2px 0; border-width:0px; }
table tr td:last-child { border-width:0px 0px 1px 0px; }
table tr:last-child td { border-width:0px 1px 0px 0px; }
table.headers_in_first_column th { width:200px; }
.no-touch table.selectable tr:hover td { background:#def; cursor:pointer; }
td.position, th.position { width:40px; font-size:16px; }
td.points { width:60px; font-size:16px; }
td.inactive,tr.inactive td, tr.expired td,.calendar_day.inactive, .item_list.view_grid.selectable li.inactive { background:#f2f2f2; color:#999; }
.item_list.view_grid.selectable li.inactive:hover { cursor:default;}
td.highlight,tr.highlight td{ background:#e8f4ff; }
td.actions { min-width: 112px; }
tr.pulse td { animation: pulse 1s 3; }
td.pulse { animation: pulse 1s 3; }
tr.row_with_attendance_indicators { height: 46px; }
@keyframes pulse { 
	0% { background:#fff; }
   	50% { background:#def; }
  	100% { background:#fff; }
}

td.highlight_error,tr.highlight_error td, td.no, td.error, td.nonefound { background:#fcc; }
td.ok,tr.ok td{ background:#cfd; }
td.warning { background:#ffc; color:#000; }
td.name, th.name { text-align:left; padding:4px 12px; }
.no-touch td.clickable:hover { cursor: pointer; background: #def; color:#16b; }
td.thin { max-width:40px;  white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
th.selectable:hover { cursor:pointer; background:#3af; }
th a { color:#fff; padding:1px; } th a:hover { color:#def; }
td.small_images { padding:6px 0px 0px 0px; }
table .badge_leaderboard_more { display:inline-block; font-size: 12px; vertical-align:top; }
th.with_delete_button { position:relative; }
table.three_col_even th, table.three_col_even td { width:33.333%; }
table .display_options { float: none; margin:0px; }
table .display_options li, table .display_options ul { float:none; display:inline-block; }
tr.timeslot_expired td { background: #fbfbfb; transition: .5s all; color: #999; }
tr.timeslot_current td { background: #f6fbff; transition: .5s all; color:#000; }
tr.timeslot_current td:first-child { background:#3af; color:#fff; }
table.increased_row_spacing td { padding:20px 4px 20px 4px; }
.admin_table th, .admin_table td { font-size:12px; line-height:22px; padding:6px 8px; }
.admin_table th { padding:10px 8px; }
tfoot tr td { background:#3af; color:#fff; }

/* Forms */
input[type="text"],input[type="email"],input[type="password"],input[type="submit"],button[type="submit"],input[type="button"],input[type="file"], select, textarea, .button, .fake_text_box { font-size:14px; font-family:Lato; font-weight:300; border-radius:2px; padding:4px 12px; background:#fff; border:solid 1px #def; -webkit-appearance: none; margin:0px 0px 1px 0px; transition: background-color .2s, border .2s; line-height:22px; box-sizing: border-box !important; color:#222; display:inline-block; height:32px; vertical-align: top; min-width: 340px;}  
input.invalid, select.invalid, textarea.invalid, .fake_text_box.invalid { border: solid 1px #f55!important; background:#fcc!important; transition:all .2s; }
input.valid, select.valid, textarea.valid, .fake_text_box.valid { border: solid 1px #1c8; background:#dfd; transition:all .2s; }
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus, select:focus, textarea:focus, .button:focus { outline: none; border:solid 1px #acf; }
.flexbox_container { height: 100%;  padding: 0;  margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }
.flexbox_container div, .flexbox_container input:first-child { width: 100% !important; max-width: 100% !important;  margin-right:4px; }
.options_grid img { width:150px; margin-bottom:8px; }
.options_grid div { float:left; padding:12px; text-align: center;  margin-bottom:8px;}
.options_grid div a { width:100%; }
.fake_text_box { width:160px; overflow:hidden; display: inline-block; margin-right: 4px; cursor:text; white-space: nowrap; text-overflow: ellipsis; }
#message_recipients_display, #message_students_display, #student_search { min-height: 32px; padding: 1px 12px; }
.fake_text_box input { line-height: 26px; }
.fake_text_box_placeholder { position: absolute; margin: 3px 0px; color: #888; }
.fake_text_box.inline { float:none; width:auto; overflow: visible; white-space: normal; }
.fake_text_box.disabled { color:#444; background:#f0f8ff; }
.fake_text_box .user_list li { padding: 0px 12px; cursor: default; line-height:26px; height:26px;}
.fake_text_box .user_list li .user_group_count { line-height:26px; height:26px;}
input[readonly="readonly"]:not(.clickable), input[disabled], input[disabled]:hover, .button.disabled, .no-touch .button.disabled:hover, select[disabled], select[disabled]:hover { background:#f8fafc; color:#888; border-color:#f8fafc; cursor:default; }
input.clickable[readonly="readonly"] { cursor:pointer; background:#fff; }
input:hover, select:hover, textarea:hover { border:solid 1px #acf; }
textarea { width:280px; height:100px; resize:none; }
textarea.large { width:420px; height:140px; resize:none; }
select::-ms-expand { display:none; }
select { background: #fff url(data:image/gif;base64,R0lGODlhDAAKAJEAAN7e3vf39+np6f///yH5BAAHAP8ALAAAAAAMAAoAAAIdFI4pkw0zgjsBDtOWla3aq3wQR4kQppnMo46eVQAAOw==) no-repeat 96% center; padding-right:40px; background-size:8px; overflow:hidden; max-width:400px;   }
select:hover { cursor:pointer; background-image: url(data:image/gif;base64,R0lGODlhDAAKAJEAALu7u////9PT0/Dw8CH5BAAHAP8ALAAAAAAMAAoAAAIdFI4pkQ0RhjsDBtOWla3aq3xWIlqYVjJPCg2eVQAAOw==); }
input[type="button"],input[type="submit"],button[type="submit"], .button { background:#09f; color:#fff; border:solid 1px #09f; padding:4px 16px; }
.button:hover { color:#fff; }
.button.select_assist, .button.select_assist.disabled:hover { background:#def; border-color:#def; color:#16b; }
.button.select_assist:hover { background:#def; border-color:#def; color:#16b; }
select + .button.select_assist, input + .button.select_assist, .fake_text_box + .button.select_assist { margin-left:4px; }
.button.select_assist i.fa { font-size: 18px; vertical-align: middle;} 
.no-touch input[type="button"]:hover,.no-touch input[type="submit"]:hover,.no-touch button[type="submit"]:hover, .no-touch .button:hover { background:#3af; cursor:pointer; border:solid 1px #3af; color:#fff; transition:background .2s, border .2s; }

.button.completed { background:#0c7; border-color:#0c7; text-align:center; }
.button.completed:hover  { background:#00d47f; border-color:#00d47f; }
.button.completed.disabled,.button.completed.disabled:hover { background:#3c9; border-color:#3c9; color:#fff; }

.button.incomplete { background:#f66; border-color:#f66; text-align:center; }
.button.incomplete:hover{ background:#f77; border-color:#f77;}
.button.incomplete.disabled, .button.incomplete.disabled:hover { background:#f88; border-color:#f88; color:#fff; }

.button.delete_button { background:#f55; border-color:#f55; }
.button.delete_button:hover { background:#f77!important; border-color:#f77!important; }
.button.edit_button { background:#fd0; border-color:#fd0; }
.button.edit_button:hover { background:#fb0; border-color:#fb0; }
.button.points_button { background:#0c7; border-color:#0c7; }
.button.points_button:hover { background:#0d8; border-color:#0d8; }
.button.demerits_button { background:#f66; border-color:#f66; }
.button.demerits_button:hover { background:#f88; border-color:#f88; }
.button.in_table_award { width:90px; text-align:center; }
.button.short { height:26px; padding:2px 12px; }
.button.sso_button {position:relative; padding-left:36px; }
.button.sso_button img { position: absolute; left:0px; margin-left:5px; margin-top:1px;  padding:2px;  height:16px;  border-radius:2px; background:#fff;}

td.with_table_cell_action { position: relative; }
.button_table_cell_action { position: absolute; right:4px; padding:0px 4px;   color:#f77; display: none; transition: all .2s;}
.button_table_cell_action:hover { color:#f99; }
td.with_table_cell_action:hover .button_table_cell_action { display: inline-block; }

.field { padding:4px 0px; line-height:32px; clear:both; }
.field .label { float:left; width:184px; text-align:right; }
.field .control { margin-left:200px; }
.field .help { float:right; font-size:12px; margin-top:-32px; margin-right:100px; } 

.submit_field { margin:10px 0px 0px 200px; }
.button_disabled, input[type="button"].button_disabled { background:#ccc; border:solid 1px #ccc; } 
.no-touch .button_disabled:hover, .no-touch input[type="button"].button_disabled:hover { background:#ccc; border:solid 1px #ccc; cursor:default; }
input[type="file"] { border:0px; background:initial; padding: 0px; }
::-webkit-file-upload-button { height:100%; background:#d0e8ff; color:#16b; border:solid 1px #d0e8ff; border-radius:2px; font-family :"Lato", Arial; font-weight:300; font-size: 14px; padding: 4px 16px; transition: all .2s; } 
::-webkit-file-upload-button:hover { background:#3af; border-color:#3af; color:#fff; cursor: pointer; transition: all .2s; }
::-webkit-file-upload-text { padding-right:10px; }
::-ms-browse { height:24px; background:#d0e8ff; color:#16b; border:solid 1px #d0e8ff; border-radius:2px; font-family :"Lato", Arial; font-weight:300; font-size: 14px; padding: 4px 16px; transition: all .2s; }
::-ms-browse:hover { background:#3af; border-color:#3af; color:#fff; cursor:pointer; transition: all .2s; }
::-ms-value { border:0px; border-radius:2px; }
label { cursor: pointer; }
.attachment a { padding:4px 16px; margin:0px 4px 4px 0px; line-height: 22px; transition:all .2s; border: 1px solid #def; background: #fff; max-width:200px; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;  vertical-align: top; }
.attachment a:hover { background:#fff; }
.attachment.conversation_attachment { margin: 8px 16px 16px; }
.attachment a img { margin-right:8px; margin-bottom: -2px;}
#audience.disabled { background:#eee!important; color:#aaa; cursor:default; }

/* classnotes for individuals changes */
#student_search { width: 100%; height: auto; white-space: normal; margin-bottom: 8px; }
#student_search.inline { width: 420px; }
#student_search input { border: none; padding: 0px; background: transparent; height: 20px; width: 0px; margin-top: 2px; }
#student_search input:focus{ width:120px!important; }
#matching_students { padding:2px 10px 10px; border-radius: 2px; line-height:24px; }
#matching_students li { cursor: pointer; margin: 2px; min-height: 0px!important; padding:0px 12px!important; }
#student_search li { cursor: pointer; margin: 2px; }
#student_search li.nonefound, #matching_students li.nonefound { cursor: default; background:#fb0; box-shadow:none; }

/* Delete icon */
.fake_text_box .user_list li:hover { padding: 0px 30px 0px 12px; }
#user_delete { display: block; position: absolute; color:#fff; background:rgba(255,255,255,0.4); transition: all .2s; max-width:30px; height: 26px; line-height:26px; padding:0px 6px; top:0px; right:0px; }
#user_delete:hover, #user_delete:hover { background:rgba(255,255,255,0.6); }

/* Tooltip */
.tip { position:absolute; padding:4px 8px; border-radius:2px; margin:4px 0px 0px -8px; max-width:180px; background:#fff; display:none; box-shadow:0 4px 8px rgba(0,0,0,0.2) }

/* Notifications */
.notification_count { background: #3af; border-radius:20px; text-align:center; 
 color:#fff; font-size:8px; line-height:12px; padding:2px; min-width:14px; position:absolute; top:-6px; right:-2px; transition:all .2s; } 
 li:hover .notification_count { top:-12px; }

.page_actions_button .notification_count { background: #f66; top:-6px; right:-9px; }
.page_actions_menu.notification_count { background: #f66; top: 8px; right: 8px; font-size: 10px; line-height: 16px; min-width: 16px; }
li:hover .page_actions_menu.notification_count { top: 8px; }

.indicator_dot_red { background: #f66; height: 8px; width: 8px; border-radius: 6px; display: inline-block; margin-right: 8px; }
.indicator_dot_green { background: #0c6; height: 8px; width: 8px; border-radius: 6px; display: inline-block; margin-right: 8px; }

/* Footer */
#footer { text-align:center; padding:20px; font-size:12px; clear:both; }

/* Users */
.user_list { list-style:none; margin:0px; padding:0px; display:inline-block; white-space: normal; }
.user_list li, .user, .item_data li.user { list-style:none; display:inline-block; padding:1px 12px; margin:1px; border-radius:2px; color:#fff !important;  position: relative; transition: all .2s; }
.user_list li, .user { padding: 0px 12px; line-height: 28px; }

.user_list li.text_only { color: #333!important; background: none!important; }
.user_list .selectable { cursor:pointer; }
.user_list .teacher, .user.teacher, .item_data li.user.teacher { background:#0ce; }
.user_list .student, .user.student, .item_data li.user.student { background:#0c9; }
.user_list .parent, .user.parent, .item_data li.user.parent { background:#c0f; }
.user_list .self, .user.self, .item_data li.user.self { background:#4bf; }
.user_list li.more { background:#aaa; }
.user_list li .group_user_count { display: inline-block; padding: 0px 6px; height:28px; background:rgba(255,255,255,0.4); color:#fff; margin-left:10px; margin-right:-12px; transition: all .2s; }

/* Item Lists */
.item_list { list-style-type:none; padding:0px; margin:4px 0px; display:block; }
.item_list li { list-style-type:none; padding: 16px; margin:0px 0px 8px 0px; background:#fff; border-radius:2px; position:relative; }
.item_list.inside_column li { min-height: 164px; }
.item_list li li { list-style-type: circle; min-height:0px; padding:0px; margin:0px; background:transparent; }
.item_list .item_data { list-style-type:none; margin:0px; padding:0px; display: inline-block; }
.item_list .item_data li { list-style-type:none; background:#f0f8ff; color:#444; display: inline-block; margin: 1px;}
.item_list .item_data li.joining_text { background:transparent; color:#222;  }
.item_list .item_data li { min-height: 0; line-height: 28px ; padding:0px 12px; }
.item_actions .button { height:28px; line-height: 26px; padding:0px 12px; margin:1px; }
.item_list .item_data li.text_only { color: #333!important; background: none!important; }
.item_actions { display:inline-block; text-align:right; }
.item_actions.inside_column { float: right; }
.item_content { display: flex; justify-content: space-between; margin-bottom: 8px; }
.item_content.card { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.item_content.card h2 { max-width: 258px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item_content .item_description { min-width: 0; } /* required to set the minimum width of the flexbox container (.item_content) contents */ 
.item_content.title_only { margin-bottom: 0px; }
.item_content.no_margin { margin-bottom: 0px; }
.item_footer { display: flex; justify-content: space-between; }
.item_footer.card { text-align: center; }
.item_footer.card a { width: 100%; }
.item_list h2, .item_list h3 { padding-top:0px; }
.item_list.view_grid { margin:4px -8px 4px 0px; }
.item_list.view_grid li { width: calc(25% - 40px); float: left; margin: 0px 8px 8px 0px; }
.item_list.view_grid.wide li { width:calc(50% - 40px); }
.item_list.view_grid.wide li li { width:auto; }
.item_list.view_grid.selectable.full_width li { width: calc(100% - 40px); }
.item_list.view_grid.selectable.half_width li { width: calc(50% - 40px); }
.item_list.view_grid.selectable.preview li { width: auto; }
.item_list.view_grid.selectable.preview li:hover { cursor: default; background: #def; color: #47b; }
.item_list.view_grid .item_description { overflow: hidden; }
.item_list.view_grid .item_description.item_description_fixed_height { height:160px; }
.item_list.view_grid .item_description.item_description_fixed_height.card { height:100px; }
.item_list.view_grid .item_scroll { overflow:auto; }
.item_list.view_grid.selectable li, .calendar_day.selectable { height:50px; min-height:50px; padding: 16px; background:#def; color:#47b; transition:background .2s; }
.item_list.view_grid.selectable li.delete_button { background:#fdd; color:#e55; }
.item_list.view_grid.selectable_large li { transition:background .2s; background:#def; }
.item_list.view_grid.selectable li:hover, .item_list.view_grid.selectable_large li:hover { cursor:pointer; background:#3af; color:#fff; }
.item_list.view_grid.selectable li.delete_button:hover { background:#f77; color:#fff; } 
.item_list.view_grid.selectable .item_description { font-size:12px; line-height:24px; height:50px; margin-bottom: 0; }
.item_list.view_grid.selectable .item_description p { padding: 0px; }
.item_list.view_grid.selectable.tall li { height:auto; }
.item_list.view_grid.selectable.tall .item_description { height:auto; }
.item_list.selectable .item_image  { width:50px; max-height:50px; } 
.item_list.selectable .item_image img { max-width:50px; max-height:50px; } 
.item_list.selectable li.disabled, .item_list.selectable li.disabled:hover { background:#eee; color:#aaa; cursor:default; }

.item_list .html_badge { background:#4bf; height:100px; width:100px; line-height:100px; color:#fff; text-align:center; border-radius:50px; }
.item_list .item_image { width: 100px; height: 100px; margin-left: 4px; z-index: 1; }
.item_list .item_image.card { max-width: 80px; height: 80px; margin-left: 0px; margin-bottom: 8px; display: flex; align-items: center; }
.item_list .item_image img { max-width:100px; max-height:100px; border-radius:2px; }
.item_list .item_image.card img { max-width: 80px; height: auto; border-radius: 8px; }
.item_list.showcase .item_image { margin-top:16px; }
.item_list .item_image_overlay_badge { position:absolute; right:4px; top:4px; }
.item_list .item_image_overlay_badge .html_badge { height:46px; width:46px; line-height:46px; color:#fff; font-size:8px; }
.item_list .item_image_overlay_badge.available { background:#6c6; }
.item_list .item_image_overlay_badge.not_available { background:#f66; }
.item_list .html_badge.status_ok { background:#5d5; }
.item_list .html_badge.status_warning { background:#fa0; }
.item_list .item_count { font-size:26px; line-height:34px; text-align:center; }
.item_list .item_count .item_count_description { font-size:10px; line-height:16px; }

.item_list.showcase { height:160px; box-sizing:border-box; }
.item_list.showcase li { height:160px; width:100% ; box-sizing:border-box; overflow:hidden; transition:background .2s; }
.item_list.showcase li:hover { cursor:pointer; background:#def; }
.item_list .item_data li.highlight { background:#6c6; color:#fff; }
.item_list .item_data li:hover { cursor:default !important; }
.item_list.view_grid.selectable_large .item_data li { background:#f0f8ff; }
.item_list .item_data .item_price { vertical-align: top; font-size:17px; background:#4bf; color:#fff;  }
.item_list .item_data .item_price.unaffordable { background:#f66; }
.item_list .item_data .item_price.affordable { background:#0c6; }
.item_list .item_data .item_unavailable { background:transparent; }
.item_list ul.student_list { margin:12px 0px; padding:0px; list-style: none; transition: all .6s; max-height:1000px; overflow:auto; }
.item_list ul.student_list.inactive { max-height:0px; margin:0px; }
.item_list ul.student_list li { list-style: none; min-height:0px; padding:0px; margin:0px 0px 0px 16px; }
.item_list ul.student_list li:before { content: "•"; color: #09f; padding-right:12px; }
.item_list ul.student_list li a.icon_action { margin-bottom: -8px; }
.item_list.view_grid li li { width:auto; margin: 0px 2px 0px 0px; }
.item_list.view_grid.vote_counts li { text-align:center; }
.item_list.view_grid.vote_counts li .item_actions { text-align:center; width: 100%; margin-top: 8px; }
.item_list .vote_count { font-size:26px; color:#09f; min-height: 100px; }
.item_list .vote_count .vote_text { margin-top:-64px; }
.item_list .vote_count img { width:100px; }
.item_list .item_description.api_description { overflow: auto; }
.api_key { font-size:18px; line-height:30px; font-family:Consolas,"Courier New",Courier; background:#fff; padding:6px 12px; border-radius:2px; display:inline-block; word-wrap: break-word; max-width: 100%; box-sizing: border-box;}
.api_key.with_action {  padding:4px 4px 4px 12px; }
.api_key .api_key_action { margin-left:12px; }
.with_sidebar .item_list { margin:-4px 0px 0px; }
.modal_window .item_list .item_description { margin-bottom: 12px; }
.modal_window .item_list .item_data { position: relative; float:left;  left:0px; bottom:0px; }
.modal_window .item_list .item_actions { position:relative; float:right; left:0px; bottom:0px; vertical-align: middle; }
.modal_window .item_list .item_actions .icon_action { margin-top:4px; }

.type_HW, .type_CW, .type_CO , .type_PL, .type_OT, .type_PE { color:#fff !important; }
.type_HW { background:#3af !important; }
.type_CW { background:#0cc !important; } 
.type_CO { background:#d4f !important; }
.type_PL { background:#b5f !important; }
.type_OT { background:#fb0 !important; }
.type_PE { background:#ffa000 !important; }
.field_clear_button { width: 16px; height: 16px; border-radius: 16px; background: #3af; display: block; line-height: 16px; text-align: center; color: white; font-size: 8px; position: absolute; right: 26px; margin-top: -25px; float: left; }
.field_clear_button:hover{ cursor: pointer; }

/* Selectable tiles */
.selectable_tiles { display: block; padding:8px 0px; margin:0px -4px 0px 0px; }
.selectable_tiles li { display: block; padding:22px 2px; margin: 0px 4px 4px 0px; background:#def; text-align:center;  width: calc(11.11% - 4px); box-sizing: border-box;  float:left; height:112px; color:#16b; transition:.2s all; border-radius: 2px; }
.selectable_tiles.short_tiles li { height:80px; }
.selectable_tiles.wide_tiles li { width:calc(14.285% - 4px);}
.selectable_tiles li.inactive { background:#eee; color:#aaa; }
.selectable_tiles li.active { background:#fff; }
.selectable_tiles li.light { background:#fff;  }
.selectable_tiles li.template { background:#fff; border:dashed 1px #def; }
.selectable_tiles li:hover {  cursor: pointer; background:#3af; color:#fff; transition:.2s all; }
.selectable_tiles .tile_title { font-size:16px; line-height:20px; white-space: nowrap; height:20px; text-overflow: ellipsis; overflow: hidden; }
.selectable_tiles .long_tile_title { font-size:13px; }
.selectable_tiles .very_long_tile_title { font-size:12px; }
.selectable_tiles li.title_only .tile_title { margin-top:24px;   }
.selectable_tiles .tile_subtitle { font-size:11px; line-height:20px; white-space: nowrap; height:20px; text-overflow: ellipsis; overflow: hidden; }
.selectable_tiles .tile_value { font-size:14px; color:#3af; margin-top:8px;  line-height:24px; white-space: nowrap; height:24px; text-overflow: ellipsis; overflow: hidden; }
.selectable_tiles li:hover .tile_value {  color:#def; }

/* Selectable tiles apps */
.selectable_tiles.apps { padding:0px; }
.selectable_tiles.apps li { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 8px; }
.selectable_tiles.apps li .tile_img_wrapper { width: 50px; height: 50px; display: flex; align-items: center; }
.selectable_tiles.apps li img.tile_img { max-width: 50px; height: auto; margin: 0px auto; border-radius: 8px; }
.selectable_tiles.apps li .tile_title { font-size: 14px; height: auto; line-height: initial; margin-top: 8px; max-width: 112px; }

/* File Container */
.file_container { list-style-type:none; margin:0px; padding:0px; }
.file_container li { display:block; margin:0px 8px 8px 0px; float:left; }
.file_container li a { display:block; background:#def; padding:8px; border-radius:2px; height:80px; width:80px; text-align:center; font-size:12px; line-height:16px; transition: background .2s; background-image:url('../images/icons/silhouette/download_small.png'); background-size:24px; background-repeat:no-repeat; background-position:center 58px; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	.file_container li a { background-image:url('../images/icons/silhouette/download_small%402x.png'); }
}

.file_container li a:hover { background-color:#3af; color:#fff; background-size:26px; background-position:center 60px; }

/* Bottom Actions*/
.bottom_actions { float:right; margin-top:0px; }

/* Live Streams */
.live_stream, .live_stream_item { list-style-type:none; padding:0px; }
.live_stream { padding:12px; }
.live_stream_item { margin-bottom:16px; clear:left; }
.live_stream_image { float:left; }
.live_stream_image img { height:36px; }
.live_stream_description { margin-left: 48px; line-height:18px; overflow:hidden; }
.live_stream_timestamp { margin-left: 48px; font-size:12px; line-height: 20px; color:#777; font-style:italic; }

/* Modal Windows */
#modal_background { background-color:#000; background-color:rgba(0,0,0,0.3); position:fixed; opacity:0; width:100%; height:100%; left:0px; top:0px; z-index:200; transition: opacity .2s, -webkit-backdrop-filter .2s; max-height:1px; bottom:0px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(20px); }
#modal_background.modal_open { max-height:2000px; opacity: 1; }
.modal_window { background-color:#fff; color:#000; position:fixed; top:100px; padding:10px 20px 20px 20px; z-index:300; right:50%; margin-right:-260px; width:480px; border-radius:2px; display: none; max-height:90%; max-height:calc(90% - 100px); overflow:auto; box-shadow: 0px 0px 4px rgba(0,0,0,0.2);}
.modal_window.modal_wide { margin-right: -380px; width: 720px; }
.modal_window.modal_full_screen { width:80%; right:10%; margin-right:0px; margin-right:-20px; }
.modal_window .close_button { position:absolute; top:4px; right:4px; border: solid 2px #fff; border-radius: 2px; width: 26px; height: 26px; }
.modal_window .close_button a { padding:4px; width:26px; height:26px; line-height:12px; text-align:center; font-size:20px; }
.modal_window .field .help { clear:both; float:none; }
.modal_open { display: block; }
.modal_window select { max-width:100%; }	
.modal_window .full_width_field { width: 100%; max-width:100%; }	
.modal_window .content.info, .modal_window .content.warning  { text-align:center; margin:16px 0px; clear:both; }
.modal_window .content.info { background:#f0f8ff; }
.modal_window .field .label { width:140px; }
.modal_window .field .control, .modal_window .submit_field { margin-left:150px; }
.modal_window .student_profile_link { display:inline-block; padding:2px 8px; margin:0px 2px; background:#f0f8ff; border-radius:2px; transition: background .2s; }
.modal_window .student_profile_link:hover { background:#fff; }
.modal_window .student_profile_link img { height:16px; }
.modal_window .layout .content { margin:0px; }
.modal_window .layout.two_col .col {box-sizing: border-box;padding-right: 4px;}
.modal_window .layout.two_col .col:last-child {padding-right: 0px; padding-left: 4px;}

/* Dialogs */
.dialog { background-color:#fff; color:#000; position:fixed; transition: all .5s; bottom:0px; padding:40px; z-index:600; box-sizing: border-box; width:96%; right:2%; display:none; max-height:90%; max-height:calc(90% - 40px); overflow:auto; box-shadow: 0px 0px 36px rgba(0,0,0,0.4); border-radius:4px 4px 0px 0px; }
.dialog.dialog_open { display: block; } 
.dialog .dialog_options { text-align: right; margin-bottom:20px; }
.dialog .dialog_options:last-child { margin-bottom: 0px; }
.dialog .button { padding: 8px 16px; height:auto; } 

.empty_field { border-color: red !important; }
.shake { animation: shake 0.2s ease-in-out 0s 2; }
.big_shake { animation: big_shake 0.2s ease-in-out 0s 2; }

@keyframes shake { 
	0% { margin-left: 0rem; }
	25% { margin-left: 0.5rem; }
	75% { margin-left: -0.5rem; }
	100% { margin-left: 0rem; }
}

@keyframes big_shake { 
	0% { margin-left: 0rem; }
	25% { margin-left: 1rem; }
	75% { margin-left: -1rem; }
	100% { margin-left: 0rem; }
}

/* Random */
.image_badge_student_name { max-height:14px; max-width:14px; margin-bottom:-2px; margin-right:3px; }
.image_medium { max-width:50px; max-height:50px; }
.image_small { max-width:26px; max-height:26px; }
.print_only { display:none; }
.student_photo { width:60px; height:60px; overflow:hidden; border-radius:60px; border:solid 2px #fff; display:inline-block; }
.student_search_photo { width: 24px; height: 24px; overflow: hidden; border-radius: 60px; border: solid 2px #fff; margin-right: 12px; float: left; }
.student_photo img { width:60px; float:left; margin:0px !important; min-height:60px; max-height:none !important; }
.student_photo.large { width:100px; height:100px; border: none; }
.student_photo.large img { width:100px; min-height:100px; }
.student_photo.medium { width:80px; height:80px; }
.student_photo.medium img { width:80px; min-height:80px; }
.student_photo.small { width:48px; height:48px; }
.student_photo.small img { width:48px; min-height:48px; }
.student_photo.profile_image { float:left; margin:8px 16px 8px 0px; }
.student_photo.profile_image.in_header { height: 50px; width: 50px; border-radius: 50px; float: none; margin: 0; flex-shrink: 0; }
.student_name_with_photo .student_photo{ display:inline-block; }
.in_header img { width: 50px; min-height:50px; }
p.small { font-size:13px; line-height:20px; }
p.note { color:#aaa; }
.notification_quick { position:fixed; bottom:0px; width:100%; background:#3af; color:#fff; padding:20px; text-align:center; font-size:18px; }
.image_choose_preview { width:32px; height:32px; margin:0px 12px 8px 0px; line-height:20px; border-radius:2px; display:block; float:left; }
.image_choose_preview_background { width:auto; height:auto; max-width:60%; max-width:400px; max-height:32px; }
.table_actions { float:right; }
td.td_with_long_text { max-width: 300px; }
td .long_text { max-height: 52px; transition: max-height 1s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
td .long_text:hover { max-height: 500px; -webkit-line-clamp: 10; }

/* Classnotes */
.copy_classnote_action_buttons { margin-top: 10px; float: right; }
.copy_classnote_group_holder { margin-top: 6px; }
.copy_classnote_group_holder select, .copy_classnote_group_holder input { width:calc(33.3333% - 2px) !important; }
.copy_classnote_group_holder.with_teacher_select select, .copy_classnote_group_holder.with_teacher_select input { width:25% !important; width:calc(25% - 2.1px) !important; }
.copy_classnote_group_holder.for_individual_search input { width:50% !important; width:calc(50% - 2.1px) !important; }

/* Clearfix */
.clearfix { clear:both; }

/* Notice banner */
#notice_banner { position:fixed; bottom:0px; text-align:center; background:#3af; color:#fff; padding:2px 12px; font-size:12px; line-height:16px; border-top:solid 1px #4bf; width:100%; z-index:1000; box-sizing:border-box; }
#notice_banner h2 { font-size:16px; line-height:20px; padding:4px; }
#notice_banner a { color:#def; }

/* Notice container */
#notice_container { text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; }
#notice_image_container { padding: 20px; }
#notice_image_container img { max-width: 300px; width: 100%; height: auto; }
#notice_content { max-width: 100%; }

/* Photo Box (downloads) */
.photobox { padding: 10px; background: #fff; border-radius: 2px; width: 420px; margin: 10px auto; transition: background .2s; }
.darkbox { background: #333; }
.bluebox { background: #16b; }
.gallery .photobox { min-width:200px; width: 300px; width: calc(33.3333% - 40px); float: left; margin-right: 20px; }
a:hover .photobox { background: #def; }
a:hover .photobox img{ border: solid 10px #def; }
.photobox img { border: solid 10px #fff; width: 100%; margin: 0 auto; display: block; transition: background .2s, border .2s; box-sizing: border-box; }
.darkbox img { border: solid 10px #333; }
.bluebox img { border: solid 10px #16b; }
a .darkbox, a .bluebox { color: #fff!important; }
a .darkbox:hover, a .bluebox:hover { color: #3af!important; }
.photobox .photocomment { margin: 10px 20px; text-align: center; height:40px; }

/* Tutorials */
.progress_dots { list-style-type:none; padding:0px; margin:10px; }
.progress_dots li { display:inline-block; width:10px; height:10px; background:#def; border-radius:6px; margin:4px;  }
.progress_dots li.active { background:#3af; }
.tutorial_highlight { animation: blinker 3.6s ease-in-out 2; }

/* Info labels */
.info_label { background:#f0f8ff; color:#47b; border-radius:2px; display:inline-block; padding:2px 4px; font-size:10px; line-height:14px; margin-left:4px; }
.info_label.error { background:#ffe0e0; color:#f66; }
.info_label.ok { background:#e0ffe0; color:#0a6; }
.info_label.warning { background:#fff8e0; color:#ffa000; }

/* Segment controls */
.segment_control { display:flex; list-style-type:none; padding:0px; margin:0px 0px 12px; height:32px; width:100%; line-height:26px; background: #fff!important; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; }
.segment_control li { width:100%; margin:0px; padding: 2px; border:solid 1px #09f; border-width: 1px 0px 1px 1px; border-radius: 0px; color:#09f; box-sizing:border-box; text-align:center; height:32px; overflow:hidden; transition:all .2s; }
.segment_control li.active { color:#fff; background:#09f; }
.segment_control li:first-child { border-radius: 2px 0px 0px 2px; }
.segment_control li:last-child { border-radius: 0px 2px 2px 0px; border-width:1px; }
.segment_control:hover { cursor:pointer; opacity:0.9; }
.segment_control li:hover:not(.active) { background:#def }

/* Segment controls - classnote type classes */
.segment_control.type_HW li { border-color: #3af; color: #3af; }
.segment_control.type_HW li.active { background-color:#3af; color: #fff; }
.segment_control.type_CW li { border-color: #0cc; color: #0cc; }
.segment_control.type_CW li.active { background-color:#0cc; color: #fff; }
.segment_control.type_CO li { border-color: #d4f; color: #d4f; }
.segment_control.type_CO li.active { background-color:#d4f; color: #fff; }
.segment_control.type_PL li {  border-color: #b5f; color: #b5f }
.segment_control.type_PL li.active { background-color:#b5f; color: #fff; }
.segment_control.type_OT li { border-color: #fb0; color: #fb0; }
.segment_control.type_OT li.active { background-color:#fb0; color: #fff; }

/* Segment controls - user type classes */
.segment_control.parent li { border-color: #c0f; color: #c0f; }
.segment_control.parent li.active { background-color: #c0f; color:#fff; }
.segment_control.student li { border-color: #0c9; color: #0c9; }
.segment_control.student li.active { background-color: #0c9; color:#fff; }
.segment_control.teacher li { border-color: #0ce; color: #0ce; }
.segment_control.teacher li.active { background-color: #0ce; color:#fff; }

/* Status */
.status { background-color: #09f; display:inline-block; padding: 0px 8px; color: white; border-radius: 2px; margin-left:2px; transition: .2s background; }
.status:hover { color:#fff; background-color: #3af; }
.status.active { background-color: #0c6; }
.status.inactive { background-color: #f66; }

/* Attendance */
.attendance_indicator { display:inline-block; width:20px; height:20px; line-height:20px; background:#0c6; border-radius:14px; padding:4px; text-align: center; vertical-align: top; position: relative;}
.attendance_indicator_word { width:auto; }
.attendance_not_required { background:#ccc !important; color:#ccc; }
.attendance_present { background:#3da !important; color:#3da; }
.attendance_absent { background:#f66 !important; color:#f66; }
.attendance_late { background:#fd5 !important; color:#fd5; }
.attendance_aea{ background:#3bf !important; color:#3bf; }
.attendance_not_entered { background:#def !important; color:#def; }
.attendance_unknown{ background:#6dd !important; color:#6dd; }
.attendance_code_visible { color:#fff; }

/* Timeline */
.vertical_timeline { list-style-type: none; display: block; padding:10px 20px; margin:0px; }
.vertical_timeline li { font-size:16px; padding-bottom:16px; position: relative; border-left:solid 4px #def; padding-left:20px; line-height: 16px; }
.vertical_timeline li:last-child { border-left: solid 4px #fff; }
.vertical_timeline li .date { color:#999; font-size:12px; line-height:30px; }
.vertical_timeline li:before { content: ""; position: absolute; left: -12px; top: -2px; width: 20px; height: 20px; background: #3af; border-radius:50px; }
.vertical_timeline li.intervention_demerit:before { background: #f55; }
.vertical_timeline li.current:before { border:solid 4px #def; left:-16px; }
.vertical_timeline .comment_expandable { font-size:12px; line-height:22px; }

.grouped_timeline h2 { float: left; padding: 0px; font-size: 16px; width: 128px; text-align: right; }
.grouped_timeline ul { border-left: 1px solid #3af; padding: 0px 0px 0px 16px; margin: 0px 0px 16px 144px; }

.grouped_timeline ul li { font-size: 14px; list-style-type: none; }
.grouped_timeline ul ul {  border-left: 0px; padding: 0px; margin: 0px 0px 6px 4px; }
.grouped_timeline ul ul li { font-size: 12px; margin-left: 0px; padding: 0px; color: #000; }

.grouped_timeline ul li .tags { display: inline-block; }
.grouped_timeline.selectable ul li { background:#fff; color:#16b; margin-bottom:2px; border-radius:2px; padding:2px 6px; transition: all .2s;  }
.grouped_timeline.selectable li:hover { padding-left:12px; background:#def; cursor:pointer;}

span.tag { padding:0px 12px; display:inline-block; line-height:24px;  border-radius:2px; background:#47b;	color:#fff; }
span.tag.warning { background:#fc0; }
span.tag.not_ok { background:#f66; }
span.tag.ok { background:#0c6; }

/* Expermental settings */
.experimental_setting_indicator { color:#6ca;} 

/* Call to action */
.call_to_action a { display:inline-block; border:solid 1px #3af; color:#3af; padding:12px 30px; border-radius:4px; font-size:24px; opacity:1; transition: all .6s; }
.preload .call_to_action a { opacity:0; }
.call_to_action a:hover { background:#def; }

/* Blog */
.blog_collection { margin: 0px -16px;  }
.blog_item { width: 50%; box-sizing: border-box; float: left; padding: 0px 16px;   }
.blog_tile { text-align: left; background: #fff; border-radius: 4px; margin-bottom:32px;min-height:540px; position: relative; transition: all .2s; }
.blog_tile_large { min-height: auto; margin-bottom: 0px; }
.blog_item.selectable { cursor: pointer; color: #333 !important;}
.blog_item.selectable:hover >  .blog_tile { box-shadow: 0px 0px 12px rgba(0,0,0,0.2); margin-top:-2px;   margin-bottom: 34px }
.blog_content {  margin:1em calc(50% - 50vw); }
.blog_content .call_to_action { margin-bottom:30px; }
.blog_content ul { list-style-position: inside; }

.blog_tile_info { padding: 20px; }
.blog_tile h1 { font-size: 26px; font-weight: 400; padding-bottom: 10px; }
.blog_tile h2 { font-size: 25px; font-weight: 400; padding-bottom: 10px; }
.blog_tile_banner_wrapper { width: 100%; background: #3af; border-radius: 4px 4px 0 0; transition: all .2s; }
.blog_banner { overflow: hidden; height: 200px; width: 200px; margin: auto; padding: 20px; transition: all .2s; display: flex; align-items: center; }
.blog_banner img { width: 100%; height: auto; margin: 0 auto; vertical-align: middle; border-radius: 4px; }
.blog_tile_author { display: block; font-size: 14px; white-space: nowrap; }
.blog_tile_date { display: block; font-size: 12px; }
.blog_tile_social_links { display: block; padding: 2px 0px 6px 0px; }
.blog_collection .blog_profile {  position: absolute; bottom:20px; left:20px; width:300px;  }
.blog_profile_img { width: 54px; border-radius: 60px; margin-right: 12px; float: left; }
.blog_table { display: table; }
.blog_table td { padding: 16px; }
.blog_table_mobile { display:none; }
.blog_share { text-align: center; font-size: 26px; padding: 0 0 20px; }
.blog_share i { color: #fff; background: #3af; border-radius: 50%; padding: 12px; width: 25px; height: 25px; border: 1px solid #fff; }
.blog_share i:hover { color: #3af; background: #fff; border: 1px solid #3af; }
.blog_quote { padding: 40px!important; border-radius: 4px; background: #f0f8ff; }
.content.linear ul.blog_ul { padding-left: 0px; }

.fa-quote-left { color: #666; font-size: 10px!important; vertical-align: text-top; margin-right: 2px; }
.fa-quote-right { color: #666; font-size: 10px!important; vertical-align: text-top; margin-left: 2px; }
.left_ul { text-align: left; }
.image_responsive { max-width: 100%; height: auto; border-radius: 4px; }
.media_caption {text-align: center; color:#666; margin-bottom:24px; }

/* Tags */
.tags { display: block; clear: both; }
.tag { padding: 2px 8px; border-radius: 12px; font-size: 12px; background: #def; color: #16b; margin-right: 2px; }
a.tag:hover { background: #3af; color: #fff; }

/* Loading indicator */
.loading_indicator_container { padding:4px; text-align:center; }
.loading_indicator {margin: 0px auto; border: 1px solid #4bf; border-top: 1px solid transparent; border-radius: 50%; width: 14px; height: 14px; animation: spin 0.5s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

/* Admin marksheets */
#add_admin_marksheet_form input[type="text"], #add_admin_marksheet_form select { width: 241px; resize: none; }
#marksheet_edit input[type="text"], #marksheet_edit select { max-width:100%; width:100%; resize:none; }
@media screen and (max-width: 680px) {
	#add_admin_marksheet_form input[type="text"], #marksheet_edit input[type="text"], #add_admin_marksheet_form select, #marksheet_edit select, #add_admin_marksheet_form input[type="submit"], #marksheet_edit input[type="submit"] { max-width:100%; width:100%; resize:none; }
}

/* Custom message modals */
#custom_message_recipient_list li { display:block; background: #fff; margin:2px; padding:2px 8px; line-height:20px; width:calc(33.3333% - 20px); max-height:20px; display: inline-block; overflow:hidden; }
#custom_message_recipient_list label { transition: color .2s; }
#custom_message_recipient_list label:hover { color:#16b; }
.check_options { float:right; clear:both; }

#custom_message_recipient_list input[type=checkbox] { margin-right: 6px; }

@media screen and (max-width: 720px) { 
	#custom_message_recipient_list li { width:50%; width:calc(50% - 20px); }
}
@media screen and (max-width: 480px) { 
	#custom_message_recipient_list li { width:calc(100% - 20px); }
}

.student_photo_placeholder { display: flex; flex-direction: column; justify-content: center; height: 100px; width: 100px; background: #f0f8ff; border-radius: 50px; font-size: 26px; text-align: center; position: absolute; z-index: -1; }
.student_photo_placeholder.small { height: 50px; width: 50px; font-size: 13px; margin: -4px 2px 0px; }

@keyframes blinker { 
	0% { border-radius:2px; }
	5% { background:#3af; }
	10% { background:inherit; }
	15% { background:#3af; }
	20% { background:inherit; } 
	25% { background:#3af; }
	30% { background:inherit; } 
	40% { border-radius:2px; }
}

.halo_image { border-radius:200px; width:100px; height:100px; margin:20px; padding:16px; display:inline-block; background:#def; }

@media screen and (max-width: 620px) { 
	.halo_image { padding:4px; margin:8px; }
 }

@keyframes imgpulse { 
	0% { transform:rotate(0deg); }
	5% { transform:rotate(10deg); }
	15% { transform:rotate(-10deg); }
	20% { transform:rotate(0deg); }
	100% { transform:rotate(0deg); }
}

/* Groups list */
@media screen and (max-width: 820px) { 
	.gallery .photobox { width: calc(50% - 40px); }
}
@media screen and (max-width: 520px) { 
	.gallery .photobox { min-width:none; width:100%; box-sizing: border-box; }
}

/* Non Mobile */
@media screen and (min-width: 681px) { 
	.mobile_only { display:none; }
}
@media screen and (min-width: 1001px) { 
	.mobile_only_large { display:none; }
	#logo_mobile { display:none; }
}

/* Mobile */
@media screen and (max-width: 1200px) { 
	.hidden_large_screen { display:none!important; }
	.item_list.view_grid li { width:calc(33.3333% - 40px); }
	.sticky_header { overflow:auto; }
	.blog_quote { padding: 20px!important; }
	.blog_tile h2 { font-size: 22px; line-height: 32px; }
	.blog_table { display: none; }
	.blog_table_mobile { display: table; margin-bottom: 20px; }
	.blog_table_mobile td { padding: 8px; }
}
@media screen and (max-width: 1100px) { 
	.field .help { margin-right:0px; }
	#menu li { margin-right:2px; }
	 .selectable_tiles li { width:calc(12.5% - 4px); }
	.selectable_tiles.wide_tiles li { width:calc(16.666% - 4px); }
}
@media screen and (max-width: 1000px) { 
	/* General */
	#logo { display:none; }
	.hidden_medium_screen { display:none !important; }
	#title_container.menu_open { position:absolute; }
	#title { height:32px; padding:8px 20px; }
	#main { padding: 50px 0px; overflow:hidden; }
	#title { padding: 8px 12px; }
	.content { margin:8px 12px; }
	#page_header { padding:8px 12px; flex-direction: column; align-items: flex-start; }
	.content_label { padding: 8px 12px 4px;}
	
	.display_options.with_actions { margin-right:0px; }
	.display_options ul a { margin-right:2px;  margin-left:0px; }
	
	#status { order: 2; flex-grow: 1; }
	#status #quicklinks { border-radius:0px; text-align:center; }
	#status #quicklinks .quicklink_stat { padding:0px 3px; font-size:8px; line-height:14px; margin-top:-10px; }
	#status_display { display:none; }

	/* Menu */
	#mobile_menu_button { display: block; border-radius:2px; transition:.2s; padding: 2px 4px 0px; }
	.menu_open #mobile_menu_button { background:#3af; border-radius:2px; }
	#menu { padding: 0px; z-index:300; transition: all .2s; order: 3; flex-grow: 0; }
	#menu>ul { margin: 4px 0px 0px!important; }
	#menu ul { position: absolute; background: #16b; max-height:0px; transition: all .2s; padding: 0px 8px; margin:0px; width:100%; box-sizing:border-box; overflow:hidden; left: 0; }
	#menu ul ul { position: relative; max-width: none; padding:0px 8px; display:block; }
	#menu li { float: none; margin:0px; }
	#menu li:hover > ul { box-shadow:none; }
	#title_container.menu_open #menu { height:auto; }
	#title_container.menu_open #menu ul { max-height:1200px; padding: 16px 8px 8px 8px; }
	#title_container.menu_open #menu ul ul { max-height:0px; padding: 0px 8px; }
	#title_container #menu li { border-radius:2px; }
	#title_container.menu_open #menu ul li:hover ul{ max-height:1000px; padding: 0px 8px 8px 8px; }
	#menu li li a { width: auto; }
	#menu li.active, #menu li:hover { border-radius:0px; background-color:transparent; }
	#menu li:hover { background:#09f; }

	/* Layout */
	.layout .col { float:none !important; width:auto !important; }
	.modal_window, .modal_window.modal_wide, .modal_window.modal_full_screen { top:60px; max-height:calc(100% - 100px); }
	.modal_window .layout.two_col .col { padding:0px !important; }
	.item_list li { padding: 12px; }
	.item_list.view_grid li { width:calc(33.3333% - 32px); }
	.item_list.view_grid.selectable li { width: calc(33.3333% - 40px); }
	.item_list.view_grid.wide li { width: calc(50% - 40px); }
	.item_list.view_grid.selectable_large li { width:calc(50% - 32px); }

	/* Forms */
	.field .help { float:none; clear:both; margin-top:0px; line-height:20px; color:#666; margin-left:200px; }
	td.points, th.position, td.position { font-size:14px; }
	td.name, th.name { padding:4px 8px; }
	body.modal_open { overflow:hidden; position:fixed; width:100%; }
	.image_choose_preview_background { max-width:60%; }
	.segment_control li { padding: 2px; }

	/* Classnotes */
	.copy_classnote_group_holder.with_teacher_select select, .copy_classnote_group_holder.with_teacher_select input { width:30% !important; width:calc(33.333% - 2px) !important; }

	/* Blog */
	.blog_tile h2 { font-size: 20px; }
	
    /* Lists */
    .selectable_tiles li { width:calc(14.285% - 4px); }
	.selectable_tiles.wide_tiles li { width:calc(20% - 4px); }
}

@media screen and (max-width: 920px) { 
	.item_list.view_grid li { width:calc(50% - 32px); }
	.item_list.view_grid.selectable li { width: calc(50% - 40px); }
}

@media screen and (max-width: 800px) { 
	.blog_item { width: 100%; }
	.blog_tile { min-height: auto; }
	.blog_collection .blog_profile { position: inherit; }
	.selectable_tiles li { width:calc(16.667% - 4px); }
	.selectable_tiles.wide_tiles li { width:calc(25% - 4px); }
	.modal_window.modal_wide, .modal_window.modal_full_screen { margin:0px; width:calc(100% - 60px); left:10px; }
}

@media screen and (max-width: 680px) { 
	.hidden_small_screen { display:none!important; }
	.tip { margin:0px; left:20px; right:20px; max-width:none; }
	textarea, input, select { max-width:220px; }
	.modal_window { margin:0px; width:calc(100% - 60px); left:10px; }
	.layout .sidebar { float:none; width:auto; }
	.layout .with_sidebar { margin-right:0px; }
	.item_content.planner_stream{ display: block; }
	.selectable_tiles li { width:calc(20% - 4px); }
	.item_list.view_grid.wide li { width:calc(100% - 40px); }
	.selectable_tiles.wide_tiles li { width:calc(33.3% - 4px); }
	.item_list.view_grid.selectable_large li { width:calc(100% - 32px); }

}
@media screen and (max-width: 640px) { 
	.item_list.view_grid { margin:4px 0px; }
	.item_list.view_grid.tall { margin: 4px -8px 4px 0px; } 
	.item_list.view_grid li { width:auto; float: none; margin: 0px 0px 8px 0px; }
	.item_content.card h2 { max-width: auto; }
	.item_list.view_grid.selectable li, .item_list.view_grid.selectable.half_width li { width: auto; }
	.item_list.view_grid.wide li { width:calc(100% - 40px); }
	.item_list.view_grid li.item_data
	.item_list.view_grid .item_description { height:auto; margin-bottom:36px; }
	.item_list.view_grid .item_description.item_description_fixed_height.card { height:auto; }
	.item_content.card { height: auto; }
	table .student_photo { width:40px; height:40px; }
	table .student_photo img { width:40px; }
	.item_list .item_description { margin-bottom:0px; }
	.item_list .item_data , .item_list .item_actions { margin:0px; position:relative; bottom:0px; left:0px; right:0px; text-align:left; }
	.selectable_tiles li { width:calc(25% - 4px); }
	.selectable_tiles.wide_tiles li { width:calc(50% - 4px); }
	.item_list.view_grid.selectable_large li { width:calc(100% - 32px); }
	.item_footer.long { display: block; }
	.item_footer.long .item_data { margin-bottom: 8px!important; display: block; }
}

@media screen and (max-width: 600px) { 
	.blog_content { text-align: left; }
}

@media screen and (max-width: 480px) { 
	.hidden_extra_small_screen { display:none !important; }
	.field .control { clear:both; margin-left:0px !important; }
	.field .label { text-align:left; }
	.field .help { margin-left:0px; }
	i.fa.fa-small-mobile-short { margin-right:0px; }
	.button.completed, .button.incomplete { padding: 1px 10px; }
	.button.submit_online, .button.download { padding: 1px 8px; }
	.modal_window { padding:6px 12px 12px 12px; }
	.modal_window, .modal_window.modal_wide, .modal_window.modal_full_screen { width:calc(100% - 44px); }
	.modal_window .student_profile_link { margin: 4px 0px 0px; }

	.segment_control li { font-size:12px; }
	.display_options li { display: list-item; margin-bottom: 2px; }
	ul.tabbed_buttons { margin-right: 0px!important; }
	.top_icons { float: none!important; }
	.grouped_timeline h2 { float: none; padding: 4px 0px 8px 0px; width: auto; text-align: left; }
	.grouped_timeline ul { margin: 0px; }

	/* Forms */
	form { max-width: 100%; margin: 2px 0px!important; }
	form textarea, input:not(input[type="checkbox"], input[type="radio"]), select, button, .attachment a { max-width: 100%; width: 100%; display: block; margin: 0px 0px 4px!important;  box-sizing: border-box;}
	.button_full_width_mobile, .button.delete_button, .submit_field .button { max-width: 100%; width: 100%; display: block!important; margin: 0px 0px 4px!important; text-align: center; }
	.button.sso_button { padding-left:16px }
	form .date_select, .time_select { width: auto!important; display: inline-block!important; }
	.button.select_assist.browse { margin-left: 0px; width: 100%; text-align: center; }
	#attachment_or { display: none; }
	.submit_field { margin:10px 0px 0px 0px !important; }
	#student_search.inline { width: 100%; }
	.flexbox_container { display: block; }
	.image_choose_preview { margin-bottom: 4px; }

	/* classnote forms */
	#add_classnote_form_button a { width: 100%; text-align: center; }
	.copy_classnote_group_holder.with_teacher_select select, .copy_classnote_group_holder.with_teacher_select input { width: 100%!important; }
	.copy_classnote_group_holder { padding-bottom: 4px; }
	.copy_classnote_action_buttons { width: 100%; }
	.field_clear_button { position: relative; float: right; margin-top: -28px; right: 12px!important; }

	/* selectable tiles */
	.selectable_tiles li { width:calc(33.333% - 4px); }
	.selectable_tiles.wide_tiles li { width:calc(50% - 4px); }
	.blog_tile_author { white-space: break-spaces; }

	/* Bottom Actions*/
	.bottom_actions { float: none; }
	.bottom_actions a { width: 100%; text-align: center; }
}