
::-webkit-scrollbar			{ width: 15px; }
::-webkit-scrollbar-track	{ background-color: transparent; }
::-webkit-scrollbar-thumb	{ background: url(/img/scrollbar.png) repeat-y 0px 0px; }
::-webkit-scrollbar-button	{ background-color: transparent; }
::-webkit-scrollbar-corner	{ background-color: transparent; }
body {
  scrollbar-base-color: #7AD0E0;
  scrollbar-3dlight-color: transparent;
  scrollbar-highlight-color: transparent;
  scrollbar-shadow-color: #7AD0E0;
	scrollbar-track-color: #FFFFFF;
	scrollbar-arrow-color: #7AD0E0;
  scrollbar-dark-shadow-color: transparent;
}
body.body--local:before,
body.body--staging:before {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99999;
    height: 8px;
    background: transparent url('/img/dev.png') repeat-x;
    background-size: 10%;
    content: '';
    opacity: 0.8;
}
#mid_blue {
  scrollbar-track-color: #26A9BA;
}

@font-face {
    font-family: 'aller';
    src: url('/fonts/aller_rg-webfont.eot');
    src: url('/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/aller_rg-webfont.woff') format('woff'),
         url('/fonts/aller_rg-webfont.ttf') format('truetype'),
         url('/fonts/aller_rg-webfont.svg#aller') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'aller_bold';
    src: url('/fonts/aller_bd-webfont.eot');
    src: url('/fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/aller_bd-webfont.woff') format('woff'),
         url('/fonts/aller_bd-webfont.ttf') format('truetype'),
         url('/fonts/aller_bd-webfont.svg#aller_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'aller_light';
    src: url('/fonts/aller_lt-webfont.eot');
    src: url('/fonts/aller_lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/aller_lt-webfont.woff') format('woff'),
         url('/fonts/aller_lt-webfont.ttf') format('truetype'),
         url('/fonts/aller_lt-webfont.svg#aller_light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'aller_lightalic';
    src: url('/fonts/aller_ltit-webfont.eot');
    src: url('/fonts/aller_ltit-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/aller_ltit-webfont.woff') format('woff'),
         url('/fonts/aller_ltit-webfont.ttf') format('truetype'),
         url('/fonts/aller_ltit-webfont.svg#aller_lightalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'opensans_reg';
    src: url('/fonts/opensans_reg.eot');
    src: url('/fonts/opensans_reg.eot?#iefix') format('embedded-opentype'),
         url('/fonts/opensans_reg.woff') format('woff'),
         url('/fonts/opensans_reg.ttf') format('truetype'),
         url('/fonts/opensans_reg.svg#opensans_reg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'neutra2_display';
    src: url('/fonts/Neutraface2Display-Titling.eot');
    src: url('/fonts/Neutraface2Display-Titling.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Neutraface2Display-Titling.woff') format('woff'),
         url('/fonts/Neutraface2Display-Titling.ttf') format('truetype'),
         url('/fonts/Neutraface2Display-Titling.svg#neutra2_display') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'icomoon';
	src: url('/fonts/icomoon/icomoon.eot?c111j9');
	src: url('/fonts/icomoon/icomoon.eot?c111j9#iefix') format('embedded-opentype'),
	url('/fonts/icomoon/icomoon.ttf?c111j9') format('truetype'),
	url('/fonts/icomoon/icomoon.woff?c111j9') format('woff'),
	url('/fonts/icomoon/icomoon.svg?c111j9#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
		font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: never;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-library:before {
	content: "\e90a";
}
.icon-user:before {
	content: "\e909";
}
.icon-check:before {
	content: "\e908";
}
.icon-courses:before {
	content: "\e902";
}
.icon-member:before {
	content: "\e903";
}
.icon-quiz:before {
	content: "\e904";
}
.icon-type:before {
	content: "\e905";
}
.icon-video:before {
	content: "\e906";
}
.icon-chat:before {
	content: "\e901";
}
.icon-nodes:before {
	content: "\e900";
}
.icon-organisation:before {
	font-weight: 500;
	content: "\e907";
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #CCCDCE;
	font-family: 'aller_lightalic', arial, sans-serif;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #CCCDCE;
	font-family: 'aller_lightalic', arial, sans-serif;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #CCCDCE;
	font-family: 'aller_lightalic', arial, sans-serif;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #CCCDCE;
	font-family: 'aller_lightalic', arial, sans-serif;
}

html, body {
	margin: 0;
	padding: 0;
	/*font-family: 'aller_light', arial, sans-serif;*/
	font-family: arial, sans-serif;
	font-size: 12px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #f0f0f1;
}
h1, h2, h3, h4, h5 {
	font-family: 'neutra2_display', arial, sans-serif;
	margin: 20px 0;
	font-weight: normal;
}
h3 {
	font-size: 20px;
	color: #26A9BA;
}
h4 {
	font-size: 16px;
	color: #26A9BA;
}
h5 {
	font-size: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #58BDCA;
}
a {
	color: white;
	text-decoration: none;
	cursor: pointer;
	font-family: 'aller_light', arial, sans-serif;
}
a:hover {
	color: #26A9BA;
}
#right_info a, #mid_white a, #mid_white_small a {
	color: #26A9BA;
}
#right_info a:hover, #mid_white a:hover, #mid_white_small a:hover {
	color: #000000;
}
form {
	margin: 0;
}
.clear {
	clear: both;
}
.hidden {
	display: none !important;
}
input[type="text"], input[type="password"], textarea {
	box-sizing: border-box;
	width: 95%;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid #ECEDEE;
	font-family: 'aller_light', arial, sans-serif;
	font-size: 12px;
}
select {
	-webkit-appearance: none;
	border: 1px solid #ECEDEE;
	padding: 4px 8px;
	margin: 0;
	font-family: 'aller_light', arial, sans-serif;
	font-size: 12px;
	min-height: 27px;
}
textarea {
	height: 450px;
	resize: none;
}
.field_error {
	border-color: red !important;
}
/* sigma.js context : */
.sigma {
  margin-left:auto;
  margin-right:auto;
  position: relative;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #F0F0F1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#left_holder {
	position: absolute;
	display: inline-block;
	top: 0px;
	left: 0px;
	z-index: 300;
	height: 100%;
	width: 50px;
	background-color: rgba(0,0,0,0.15);
	overflow: hidden;
}
#menu_holder {
	padding-left: 380px;
	height: 100%;
}
#left_nav {
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
	width: 50px;
	height: 100%;
	/*background: #404041;*/
	background: #2F5F85;
	color: white;
	z-index: 1000;
}
#mid_blue {
	position: relative;
	display: block;
	float: left;
	width: 0px;
	height: 100%;
	background: #26A9BA;
	color: white;
	overflow: auto;
	margin-left: -330px;
}
#mid_red {
	position: absolute;
	display: block;
	float: left;
	width: 100%;
	width: 330px;
	height: 100%;
	background: #F47F2A;
	color: #FFFFFF;
	overflow: auto;
	z-index: 200;
	display: none;
}
#mid_white, #mid_white_small {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	max-width: 820px;
	height: 100%;
	background: #FFFFFF;
	color: #404041;
	overflow: auto;
	display: none;
}
#mid_white_small {
	width: 40%;
	max-width: 330px;
}

#mid_white a {
	color: #26A9BA;
}
#mid_white a:hover {
	color: #404041;
}
#right_info, #right_search {
	position: absolute;
	display: block;
	width: 50%;
	max-width: 1000px;
	height: 100%;
	background: white;
	color: #404041;
	z-index: 90;
	top: 0px;
	right: 0px;
	border-left: 1px solid #E6E7E8;
	display: none;
	overflow: auto;
}
#right_info h2 {
	font-size: 24px;
	color: #26A9BA;
	margin: 20px 0;
}
#right_info p {
	margin: 20px 0;
	line-height: 150%;
}
#map_ready {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: teal;
	top: 0px;
	left: 0px;
	z-index: 1000;
	opacity: 0.5;
	text-align: center;
	cursor: pointer;
}
#map_ready p {
	color: white;
	font-size: 10em;
	margin: 1em 0 0 0;
}
#map_reset {
	position: absolute;
	display: block;
	width: 50px;
	height: 20%;
	background: teal;
	top: 10px;
	left: 110px;
	z-index: 100;
	cursor: pointer;
}
.close_white, .close_blue, .close_red {
	position: absolute;
	display: block;
	background: url('/img/sprites.png?v=1.2') no-repeat -0px -30px;
	width: 10px;
	height: 10px;
	top: 10px;
	right: 10px;
	z-index: 100;
}
.close_blue {
	background-position: -10px -30px;
}
.close_white:hover, .close_blue:hover, .close_red:hover {
	background-position: -0px -40px;
}
#mid_blue_close:hover {
	color: #404041;
}
#mid_white_close:hover, #mid_white_small_close:hover {
	color: #404041;
}
.area_content {
position: relative;
float: left;
}
#mid_blue .area_content, #mid_white_small .area_content, #mid_red .area_content {
	width: 250px;
	margin: 40px;
}
#mid_blue.blue_members .area_content {
	width: 350px;
}
#mid_white .area_content, #right_info .area_content, #right_search .area_content {
	width: calc(100% - 80px);
	margin: 40px;
}
.nav_type_on {
	background: #26A9BA !important;
	color: #FFFFFF;
}
.nav_type_on:hover {
	color: #404041;
}
.nav_blue {
	position: relative;
}
.nav_blue a {
	display: block;
	padding: 5px 10px;
	line-height: 20px;
	position: relative;
}
.nav_blue a:hover {
	background: #58BDCA;
	color: #FFFFFF;
}
.nav_blue span {
	font-family: 'aller_lightalic', arial, sans-serif;
	font-size: 10px;
	padding-left: 8px;
}
.nav_blue span:first-child {
	padding-left: 0;
	font-family: 'aller_light', arial, sans-serif;
	font-size: 12px;
}
.nav_blue_on {
	background: #58BDCA;
}
.nav_blue_loading .loading_light {
	background: url('/img/loading_lightbg.gif') no-repeat center center;
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: top;
	margin-left: 10px;
}
.nav_link {
	display: block;
	float: left;
	background: #F1F1F2;
	text-align: center;
}
.nav_link a {
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #E6E7E8;
	border-left: 1px solid #FFFFFF;
	height: 40px;
	line-height: 40px;
	color: #404041 !important;
	position: relative;

	& [class^="icon-"],
	& [class*=" icon-"] {
		font-size: 18px;
	}
}
.nav_link a:hover {
	color: #FFFFFF !important;
	background: #58BDCA;
}
.nav_link_on,
.node_nav_link_on,
.member_link_on,
.course_nav_link_on,
.organisation_nav_link_on {
	background: #26A9BA !important;

	& [class^="icon-"],
	& [class*=" icon-"] {
		color: #fff;
	}
}
.nav_link_loading {
	background: #58BDCA !important;
}
.nav_link_loading .nav_icon {
	background: url('/img/loading_lightbg.gif') no-repeat center center;
}
.node_edit_left {
	float: left;
	width: 24%;
	font-size: 16px;
	padding: 12px 0;
}
.node_edit_left iframe {
padding: 5%;
width: 90%;
}
.node_edit_right {
	float: left;
	width: 76%;
	margin-top: 8px;
}
.node_edit_right .edit_holder {
	position: relative;
	padding: 10px;
}
.edge_list_left ul, .edge_list_right ul {
	border: 1px solid #E6E7E8;
	padding: 5px 5px 0 5px;
	list-style: none;
	min-height: 22px;
}
.edge_list_left li, .edge_list_right li {
	background: #E6E7E8;
	padding: 5px 10px;
	line-height: 22px;
	margin-bottom: 5px;
	cursor: move;
}
#node_ajax_area li.sortable_off {
	background-color: white;
	border: 1px solid rgb(230, 231, 232);
	line-height: 20px;
	color: rgb(230, 231, 232);
	cursor: auto;
}
.course_obj_edit {
    position: relative;
	background: #FAFAFA;
	margin-bottom: 20px;
	padding: 20px;
    cursor: move;
}
.course_obj_edit::after {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    background: url('/img/reorder.png') no-repeat center center;
    background-size: cover;
    content: '';
    opacity: 0;
    transition: opacity 0.2s ease;
}
.course_obj_edit:hover::after {
    opacity: 0.5;
}
.course_obj_edit .edit_fields, .course_obj_edit .edit_buttons {
	margin-bottom: 10px;
}
.course_obj_edit input, .course_obj_edit textarea {
	margin-bottom: 10px;
	width: 90%;
	max-height: 150px;
}
.course_obj_edit .edit_fields {
	display: none;
}
.node_video_edit {
	background: #FAFAFA;
	margin-bottom: 20px;
	cursor: ns-resize;
}
.node_video_edit .edit_fields, .node_video_edit .edit_buttons {
	margin-bottom: 10px;
}
.node_video_edit input, .node_video_edit textarea {
	margin-bottom: 10px;
	width: 90%;
	max-height: 150px;
}
.node_video_edit .edit_fields {
	display: none;
}
.video_h4 {
	padding-right: 40px;
	margin-top: 0;
}
.video_q {
	position: absolute;
	top: 10px;
	right: 20px;
	width: 20px;
	height: 20px;
	background: url('/img/sprites.png?v=1.2') no-repeat -250px -90px;
}
.edge_list_left {
	width: 40%;
	float: left;
}
.edge_list_right {
	width: 40%;
	float: left;
}
.edge_list_mid {
	width: 20%;
	float: left;
	padding-top: 100px;
	text-align: center;
}
.half_input {
	width: 50% !important;
	margin-right: 10px !important;
}
.button_blue, .button_white, .button_block, .button_green, .login_form input[type="submit"], .button_red {
	width: 100px;
	line-height: 25px;
	text-align: center;
	border: 1px solid #26A9BA;
	border-radius: 4px;
	color: #26A9BA;
	font-size: 12px;
	font-weight: normal;
	display: inline-block;
	background: transparent;
	cursor: pointer;
	position: relative;
}
.button_white, .login_form input[type="submit"], .button_red, .button_green {
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
}
.login_form input[type="text"], .login_form input[type="password"] {
	color: #FFFFFF;
	background: #58BDCA;
	border: none;
}
.login_form input[type="submit"] {
	margin-top: 20px;
}
#infoMessage p {
	font-family: 'aller_lightalic', arial, sans-serif;
}
.button_block {
	color: #FFFFFF !important;
	background: #26A9BA;
}
.button_blue:hover {
	color: #FFFFFF !important;
	background: #26A9BA;
}
.button_red:hover {
	color: #FFFFFF !important;
	background: #F47F2A;
}
.button_white:hover, .login_form input[type="submit"]:hover {
	color: #26A9BA;
	background: #FFFFFF;
}
.button_green {
	width: 64px;
}
.button_green.is-default {
	color: #FFFFFF;
	background: rgb(141, 195, 73);
	border-color: rgb(141, 195, 73);
}
.button_green:hover {
	color: #FFFFFF;
	background: rgb(141, 195, 73);
}
.button_block:hover {
	background: #58BDCA;
}
.saved, .saving, .loading {
	position: absolute;
	width: 100%;
	height: 100%;
	color: white;
	top: 0px;
	left: 0px;
	display: none;
}
.saving, .loading {
	background: #26A9BA url('/img/loading_bluebg.gif') no-repeat center center;
}
.saved {
	background: #6EC39B;
}

.nav_content_on {
	background: #26A9BA;
}
#node_ajax_area {
	padding: 25px 0;
}
#node_videos_add_area, #node_cases_add_area, #node_primer_add_area {
	position: relative;
}
.add_holder {
	background: #FAFAFA;
	position: relative;
}
#edit_move_area {
	display: none;
}
.new_edit_area {
	padding: 20px;
	display: none;
}
.node_primer_edit_button, .node_case_edit_button {
	margin: 20px;
}
.node_video_edit_button {
	margin: 0 10px;
}
.course_obj_edit_button {
	margin: 0 10px;
}
.primer_title, .case_title {
	display: inline-block;
}
.add_area {
	display: block;
}
.node_video {
	margin-bottom: 25px;
}
#node_edit_tag_area a, #node_view_tag_area a, #node_edit_tag_area span, .obj_tag_holder span, .obj_tags span {
	display: inline-block;
	padding: 5px 10px;
	background: #F1F1F2;
	margin: 10px 10px 0 0;
	color: #BBBDBF;
}
.obj_tags span {
	margin: 0 10px 10px 0;
}
#node_edit_tag_area a:hover, #node_view_tag_area a:hover {
	color: #404041;
}
#node_edit_tag_area div, .obj_tag_holder div {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 10px;
	background: url('/img/sprites.png?v=1.2') no-repeat 0px -40px;
	cursor: pointer;
}
#node_edit_tag_area div:hover, .obj_tag_holder div:hover {
	background-position: -10px -30px;
}
.node_primer_edit, .node_case_edit, .node_primer_edit, .node_primer, .node_case, .node_primer {
	background: #F1F1F3;
	margin: 20px 0;
	position: relative;
}
.tag_on {
	background: orange !important;
	color: #FFFFFF !important;
}
#file_name_holder {
	display: none;
}
#file_name_holder span{
	margin-right: 20px;
    word-break: break-word;
}

#node_over {
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	background: url('/img/sprites.png?v=1.2') no-repeat 0px -40px;
	z-index: 200;
	top: 0px;
	left: 0px;
	overflow: visible;
	text-align: center;
	color: white;
	display: none;
}
#node_over:hover {
	background-position: 0px -140px;
}
#node_over_title {
	display: inline-block;
	width: 300px;
	position: relative;
	top: 0;
	left: -100px;
}
#node_over_title span {
	padding: 4px 10px;
	background: #F68F52;
	text-transform: uppercase;
	font-family: 'aller', arial, sans-serif;
	font-size: 14px;
}
.node_over_show {
	display: block;
	position: absolute;
	bottom: 0px;
	left: 20px;
	background: url('/img/sprites.png?v=1.2') no-repeat -100px -40px;
	width: 24px;
	height: 24px;
	cursor: pointer;
}
.node_over_show:hover {
	background-position: -124px -40px;
}
.node_over_hide {
	background-position: -148px -40px;
}
.node_over_hide:hover {
	background-position: -172px -40px;
}
.node_over_lock {
	display: block;
	position: absolute;
	bottom: 0px;
	right: 20px;
	background: url('/img/sprites.png?v=1.2') no-repeat -100px -64px;
	width: 24px;
	height: 24px;
	cursor: pointer;
}
.node_over_lock:hover {
	background-position: -124px -64px;
}
.node_over_unlock {
	background-position: -124px -64px;
}
#node_exit {
	display: block;
	position: absolute;
	width: 60px;
	height: 30px;
	color: white;
	background: url('/img/sprites.png?v=1.2') no-repeat -280px 0px;
	top: 0px;
	left: 25%;
	z-index: 200;
	display: none;
}
#node_exit:hover {
	background-position: -340px 0;
}

#left_nav a {
	width: 100%;
	height: 40px;
	display: block;
	line-height: 40px;
	/*border-bottom: 1px solid #3C3A3B;
	border-top: 1px solid #4C4D4E;*/
	border-bottom: 1px solid #4D7697;
	overflow: hidden;
}
#left_nav a.logout {
	border: none;
	border-top: 1px solid #4D7697;
}
#left_nav a:hover {
	background: #58BDCA;
}
.nav_icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	/*margin-top: 10px;*/
	background: url('/img/sprites.png?v=1.2') no-repeat 0 0;
	position: relative;
}
#left_nav .nav_icon {
	margin: 10px 15px;
	float: left;
}
#left_nav .nav_text {
	margin: 12px 2px 8px 2px;
	float: left;
	line-height: 20px;
}
#left_nav a:hover .nav_text {
	color: #FFFFFF;
}
#wb_logo .nav_icon {
	height: 30px;
	margin-top: 5px;
}
a#lb_logo {
	height: 50px;
}
#lb_logo .nav_icon {
	height: 30px;
	background: none;
}
#lb_logo .nav_icon img {
	width: 100%;
}
#lb_logo .nav_text {
	margin-top: 22px;
}
#wb_resource .nav_icon {
	background-position: -100px -20px;
}
#left_nav [data-type="courses"] .nav_icon {
	background-position: -120px -20px;
}
#left_nav [data-type="discussion"] .nav_icon {
	background-position: -140px -20px;
}
#left_nav [data-type="members"] .nav_icon {
	background-position: -160px -20px;
}
#left_nav [data-type="glossary"] .nav_icon {
	background-position: -180px -20px;
}
#left_nav [data-type="content"] .nav_icon {
	background-position: -200px -20px;
}
.logout .nav_icon {
	background-position: -220px -20px;
}
#left_nav [data-type="course_home"] .nav_icon {
	background-position: -120px -20px;
}
#left_nav [data-type="course_discuss"] .nav_icon {
	background-position: -140px -20px;
}
#left_nav [data-type="course_message"] .nav_icon {
	background-position: -80px -40px;
}
#left_nav [data-type="course_profile"] .nav_icon {
	background-position: -160px -20px;
}
#left_nav [data-type="course_glossary"] .nav_icon {
	background-position: -180px -20px;
}
#left_nav [data-type="course_object"] .nav_icon {
	background-position: -80px -60px;
}
#left_nav [data-type="course_object"] .nav_object_on {
	background-position: -80px -100px;
}
#left_nav .nav_type .nav_icon.no-sprite {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;

	& i {
		font-size: 16px;
	}
}
#left_nav .nav_type.nav_loading i {
	display: none;
}
#left_nav .nav_type:hover .nav_icon.no-sprite i {
	color: #fff;
}

.node_view_nav [data-type="info"] .nav_icon {
	background-position: -100px -0px;
}
.node_view_nav [data-type="info"] a:hover .nav_icon, .node_view_nav .node_nav_link_on[data-type="info"] a .nav_icon {
	background-position: -100px -20px;
}
.node_view_nav [data-type="discussion"] .nav_icon {
	background-position: -140px -0px;
}
.node_view_nav [data-type="discussion"] a:hover .nav_icon, .node_view_nav .node_nav_link_on[data-type="discussion"] a .nav_icon {
	background-position: -140px -20px;
}
.node_view_nav [data-type="videos"] .nav_icon {
	background-position: -20px -0px;
}
.node_view_nav [data-type="videos"] a:hover .nav_icon, .node_view_nav .node_nav_link_on[data-type="videos"] a .nav_icon {
	background-position: -20px -20px;
}
.node_view_nav [data-type="cases"] .nav_icon {
	background-position: -40px -0px;
}
.node_view_nav [data-type="cases"] a:hover .nav_icon, .node_view_nav .node_nav_link_on[data-type="cases"] a .nav_icon {
	background-position: -40px -20px;
}
.node_view_nav [data-type="data"] .nav_icon {
	background-position: -60px -0px;
}
.node_view_nav [data-type="data"] a:hover .nav_icon, .node_view_nav .node_nav_link_on[data-type="data"] a .nav_icon {
	background-position: -60px -20px;
}
.node_edit_nav [data-type="info"] .nav_icon {
	background-position: -100px -0px;
}
.node_edit_nav [data-type="info"] a:hover .nav_icon, .node_edit_nav .node_nav_link_on[data-type="info"] a .nav_icon {
	background-position: -100px -20px;
}
.node_edit_nav [data-type="edges"] .nav_icon {
	background-position: -80px -0px;
}
.node_edit_nav [data-type="edges"] a:hover .nav_icon, .node_edit_nav .node_nav_link_on[data-type="edges"] a .nav_icon {
	background-position: -80px -20px;
}
.node_edit_nav [data-type="videos"] .nav_icon {
	background-position: -20px -0px;
}
.node_edit_nav [data-type="videos"] a:hover .nav_icon, .node_edit_nav .node_nav_link_on[data-type="videos"] a .nav_icon {
	background-position: -20px -20px;
}
.node_edit_nav [data-type="cases"] .nav_icon {
	background-position: -40px -0px;
}
.node_edit_nav [data-type="cases"] a:hover .nav_icon, .node_edit_nav .node_nav_link_on[data-type="cases"] a .nav_icon {
	background-position: -40px -20px;
}
.node_edit_nav [data-type="data"] .nav_icon {
	background-position: -60px -0px;
}
.node_edit_nav [data-type="data"] a:hover .nav_icon, .node_edit_nav .node_nav_link_on[data-type="data"] a .nav_icon {
	background-position: -60px -20px;
}
.course_edit_nav [data-type="info"] .nav_icon {
	background-position: -120px -0px;
}
.course_edit_nav [data-type="info"] a:hover .nav_icon, .course_edit_nav .course_nav_link_on[data-type="info"] a .nav_icon {
	background-position: -120px -20px;
}
.course_edit_nav [data-type="members"] .nav_icon {
	background-position: -160px -0px;
}
.course_edit_nav [data-type="members"] a:hover .nav_icon, .course_edit_nav .course_nav_link_on[data-type="members"] a .nav_icon {
	background-position: -160px -20px;
}
.course_edit_nav [data-type="nodes"] .nav_icon {
	background-position: -100px -0px;
}
.course_edit_nav [data-type="nodes"] a:hover .nav_icon, .course_edit_nav .course_nav_link_on[data-type="nodes"] a .nav_icon {
	background-position: -100px -20px;
}
.course_edit_nav [data-type="objectives"] .nav_icon {
	background-position: -80px -80px;
}
.course_edit_nav [data-type="objectives"] a:hover .nav_icon, .course_edit_nav .course_nav_link_on[data-type="objectives"] a .nav_icon {
	background-position: -80px -60px;
}
.member_edit_nav [data-type="info"] .nav_icon {
	background-position: -160px -0px;
}
.member_edit_nav [data-type="info"] a:hover .nav_icon, .member_edit_nav .member_link_on[data-type="info"] a .nav_icon {
	background-position: -160px -20px;
}
.member_edit_nav [data-type="discussion"] .nav_icon {
	background-position: -140px -0px;
}
.member_edit_nav [data-type="discussion"] a:hover .nav_icon, .member_edit_nav .member_link_on[data-type="discussion"] a .nav_icon {
	background-position: -140px -20px;
}
.member_edit_nav [data-type="activity"] .nav_icon {
	background-position: -100px -0px;
}
.member_edit_nav [data-type="activity"] a:hover .nav_icon,
.member_edit_nav .member_link_on[data-type="activity"] a .nav_icon {
	background-position: -100px -20px;
}

.nav_loading .nav_icon {
	background: url(/img/loading_bluebg.gif) no-repeat center center !important;
}

.file_view {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background: url('/img/sprites.png?v=1.2') no-repeat -240px 0;
}
.member_holder {
	padding-left: 80px;
	margin-top: 20px;
}
.comment_photo_left {
	float: left;
	width: 80px;
	margin-left: -80px;
	background: url('/img/post_left.png') no-repeat right 15px;
}
.comment_content {
	position: relative;
	border-radius: 6px;
	background: #F1F1F2;
	float: left;
	width: 100%;
}
.comment_sub .comment_content {
	margin-bottom: 0;
}
.comment_photo_admin {
	background: url('/img/post_left_admin.png') no-repeat right 15px;
}
.comment_content p {
	padding: 10px 15px;
	margin: 0 !important;
}
.comment_content a {
	color: #26A9BA;
}
.comment_footer, .member_comment_footer {
	padding: 10px 15px;
	border-top: 1px solid #FFFFFF;
}
.comment_sub {
	padding: 0;
	border-top: 1px solid #FFFFFF;
}
.comment_admin {
	background: #E4F5F8;
}
.comment_admin_title {
	background: #26A9BA;
	text-align: center;
	font-family: 'aller_bold', arial, sans-serif;
	font-size: 9px;
	padding: 2px !important;
	color: white;
	width: 56px;
}
.expired_flag,
.num_unread {
	background: url('/img/sprites.png?v=1.2') no-repeat -240px -20px;
	display: block;
	float: right;
	width: 20px;
	height: 20px;
	text-align: center;
	position: absolute;
	top: 5px;
	right: 5px;
}
.expired_flag {
	background: url('/img/sprites.png?v=1.2') no-repeat -130px -90px;
}
.mem_joined {
    float: right;
    margin-right: 25px;
}
.post_unread, .member_unread {
	background: url('/img/sprites.png?v=1.2') no-repeat -250px -40px;
	display: inline-block;
	position: absolute;
	top: -6px;
	right: 10px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}
.icon_unread {
	background: url('/img/sprites.png?v=1.2') no-repeat -240px -20px;
	display: block;
	width: 20px;
	height: 20px;
	text-align: center;
	position: absolute;
	top: -8px;
	right: -8px;
	line-height: 20px;
	color: #FFFFFF;
}
#reposition {
	position: absolute;
	top: 60px;
	right: 20px;
	text-align: right;
}
.arrows_holder {
	display: block;
	position: relative;
	width: 64px;
	height: 64px;
	float: right;
	margin-right: 18px;
}
.node_arrow {
	display: block;
	position: absolute;
	cursor: pointer;
}
#node_up {
	width: 32px;
	height: 16px;
	top: 0;
	left: 16px;
	background: url('/img/sprites.png?v=1.2') no-repeat -0px -60px;
}
#node_up:hover {
	background-position: -32px -60px;
}
#node_down {
	width: 32px;
	height: 16px;
	top: 48px;
	left: 16px;
	background: url('/img/sprites.png?v=1.2') no-repeat -0px -76px;
}
#node_down:hover {
	background-position: -32px -76px;
}
#node_left {
	width: 16px;
	height: 32px;
	top: 16px;
	left: 0;
	background: url('/img/sprites.png?v=1.2') no-repeat -0px -60px;
}
#node_left:hover {
	background-position: -32px -60px;
}
#node_right {
	width: 16px;
	height: 32px;
	top: 16px;
	left: 48px;
	background: url('/img/sprites.png?v=1.2') no-repeat -16px -60px;
}
#node_right:hover {
	background-position: -48px -60px;
}
.search_form {
	position: absolute;
	top: 20px;
	right: 20px;
	background: #E6E7E8;
	border-radius: 15px;
	padding: 3px 10px;
}
.search_glossary {
	background: #58BDCA;
	border-radius: 15px;
	padding: 3px 10px;
	margin-bottom: 20px;
}
.search_icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url('/img/sprites.png?v=1.2') no-repeat -260px -0px;
	border: none;
	outline: none;
	cursor: pointer;
}
.search_glossary .search_icon {
	background-position: -260px -20px;
}
.search_field {
border: none !important;
background: none;
vertical-align: top;
width: auto !important;
}
.search_field:focus {
    outline: 0;
}
.search_results h4 {
	color: #404041;
}
.search_results h4 span {
	color: #26A9BA;
}
.result_holder {
	margin-bottom: 20px;
}
.result_left {
	float: left;
	width: 6%;
}
.result_right {
	float: left;
	width: 94%;
}
.result_left div {
	display: block;
	width: 20px;
	height: 20px;
}
.result_link {
	font-family: 'aller', arial, sans-serif;
	font-size: 14px;
	color: #26A9BA;
}
.result_holder[data-type="node"] .result_left div {
	background: url('/img/sprites.png?v=1.2') no-repeat -100px -0px;
}
.result_holder[data-type="video"] .result_left div {
	background: url('/img/sprites.png?v=1.2') no-repeat -20px -0px;
}
.result_holder[data-type="case"] .result_left div {
	background: url('/img/sprites.png?v=1.2') no-repeat -40px -0px;
}
.result_holder[data-type="term"] .result_left div {
	background: url('/img/sprites.png?v=1.2') no-repeat -180px -0px;
}
.term_hl {
	background: #26A9BA;
	color: #FFFFFF;
}
#main_current_node {
	display: block;
	position: absolute;
	top: 0;
	left: 5%;
}
.info_orange,
.info_green {
display: inline-block;
padding: 6px 12px;
font-family: 'aller', arial, sans-serif;
font-size: 14px;
color: #6EC39B;
background: #E1F2EA;
margin-bottom: 10px;
}
.info_orange {
color: #F68F52;
background: #FDEDE3;
}
#map_messages {
	position: absolute;
	top: 30px;
	left: 100px;
}
#course_message {
	font-family: 'neutra2_display', arial, sans-serif;
	font-size: 21px;
	display: inline-block;
	margin-right: 20px;
	color: #3F6B8E;
}

.uploadify_button, .uploadify_button_white {
	position: relative;
	width: 100px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border: 1px solid #26A9BA;
	border-radius: 4px;
	color: #26A9BA;
	font-size: 12px;
	font-weight: normal;
	display: inline-block;
	background: transparent;
	cursor: pointer;
}
.uploadify_button_white {
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
}
.uploadify_button_hover {
	color: #FFFFFF;
	background: #26A9BA;
}
.uploadify_button_white_hover {
	color: #26A9BA;
	background: #FFFFFF;
}
#file_upload_area object {
	position: absolute;
	top: 0;
	left: 0;
}
.bottom_delete {
	margin-top: 50px;
}
#form_profile label, .fake_profile_label, #form_message label {
	display: block;
	font-size: 14px;
	padding: 15px 0 5px 0;
}
#form_profile input, #form_message input, #form_message textarea {
	background: #58BDCA;
	font-family: 'aller_lightalic', arial, sans-serif;
	color: #FFFFFF;
	border: 1px solid #58BDCA;
}
#form_message textarea {
	height: 250px;
}

.activity_header {
	width: 100%;
	font-family: 'aller', arial, sans-serif;
	font-size: 14px;
	margin: 20px 0 10px 0;
}
.activity_holder {
	padding: 7px;
	border: 1px solid #E6E7E8;
}
.activity_header .cell {
	float: left;
}
.activity_table .cell {
	float: left;
	background: #F1F1F2;
	outline: 3px solid #FFFFFF;
}
.activity_table .cell div {
	margin: 10px 15px;
}

.cell-complete {
	box-sizing: border-box;
	padding-right: 10px;
	font-size: 12px;
	text-align: right;
}

.activity_table .ma-row {
	display: grid;
	grid-template-columns: 1fr 50px;
	background: #F1F1F2;

	& > div {
		padding: 10px 15px;
	}

	& .ma-title {
		font-weight: bold;
	}

	& .ma-complete {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background-color: #dedede;

		& .icon-check {
			display: none;
			color: #fff;
			font-size: 20px;
		}
	}

	& .ma-complete.active {
		background-color: #54b286;

		.icon-check {
			display: block;
		}
	}

	& .icon-video {
		display: inline-block;
		margin: 0 15px 0 5px;
		font-size: 12px;
		font-weight: bold;
		scale: 1.25;
		transform-origin: left center;
	}
}

.activity_table .ma-row + .ma-row {
	margin-top: 2px;
}

.activity_table .ma-node-group + .ma-node-group {
	margin-top: 10px;
}

#manual_zoom {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 70px;
	background: #E6E7E8;
	border-radius: 15px;
	width: 20px;
	padding: 5px;
}
#zoom_in, #zoom_out {
	display: block;
	width: 10px;
	height: 10px;
	background: url('/img/sprites.png?v=1.2') no-repeat -0px -50px;
	margin: 5px 5px 10px 5px;
	cursor: pointer;
}
#zoom_in:hover {
	background-position: -20px -50px;
}
#zoom_out {
	background-position: -10px -50px;
	margin: 10px 5px 5px 5px;
}
#zoom_out:hover {
	background-position: -30px -50px;
}
.zoom_level {
	display: block;
	width: 20px;
	height: 3px;
	margin: 5px 0;
}
.zoom_on {
	background: #5EC6D9;
}

.video_container {
    position: relative;
    padding-bottom: 56.25%;
    margin-top: 30px;
	height: 0;
	overflow: hidden;
	z-index: 100;
}
.video_container iframe,
.video_container object,
.video_container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 100;
}

#node_view_content li {
	margin-bottom: 10px;
	line-height: 150%;
}

.course_obj {
	border-bottom: 1px solid #58BDCA;
	margin-bottom: 20px;
	padding-bottom: 10px;
}
.obj_left {
	display: block;
	float: left;
	width: 40px;
}
.obj_right {
	display: block;
	float: left;
	width: 210px;
}
.obj_right h5 {
	border-bottom: none;
	padding: 0;
	margin: 0;
}
.obj_switch {
	display: block;
	width: 22px;
	height: 42px;
	background: url('/img/sprites.png?v=1.2') no-repeat -0px -92px;
	cursor: pointer;
}
.obj_switch_on {
	background-position: -22px -92px;
}
#course_objectives_area h4, #course_objectives_area p {
	margin: 0 0 20px 0;
}
#course_objectives_area .edit_buttons a {
	margin: 0 10px 0 0;
}
.obj_tags {
	padding-bottom: 10px;
}
.comment_delete, .comment_sub_delete {
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url('/img/sprites.png?v=1.2') no-repeat -40px -45px;
	float: right;
	margin-left: 5px;
	cursor: pointer;
}
.comment_delete:hover, .comment_sub_delete:hover {
	background-position: -55px -45px;
}
.node_restricted {
	text-align: center;
	background: url('/img/node_solo.png') no-repeat center top;
	padding-top: 80px;
}
.node_restricted h3, .node_restricted p {
	max-width: 450px;
	margin: 30px auto !important;
}

#trial_form input[type="text"], #trial_form input[type="password"] {
	color: #FFFFFF;
	background: #58BDCA;
	border: 1px solid #58BDCA;
	font-family: 'aller_lightalic', arial, sans-serif;
	width: 100%;
}
#trial_form label {
	display: block;
	margin: 16px 0 8px 0;
}
.trial_error {
	background: red;
	display: inline-block;
	padding: 5px 10px;
	display: none;
}

#node_complete {
	display: block;
	width: 36px;
	height: 36px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('/img/sprites.png?v=1.2') no-repeat -285px -35px;
	cursor: pointer;
}
#node_complete:hover {
	background-position: -325px -35px;
}
#node_complete.complete_on {
	background-position: -325px -35px;
}
#node_complete.complete_on:hover {
	background-position: -285px -35px;
}

.nav_complete {
	display: block;
	float: left;
	background: #F1F1F2;
	text-align: center;
}
.nav_complete a {
	display: block;
	border-right: 1px solid #E6E7E8;
	border-left: 1px solid #FFFFFF;
	height: 40px;
	line-height: 16px;
	position: relative;
}
.nav_complete a .nav_icon {
	background: url('/img/sprites.png?v=1.2') no-repeat -100px -90px;
}
.complete_on .nav_complete a .nav_icon {
	background-position: -100px -110px;
}
.complete_on .nav_complete a {
	background: #6DC39B;
}
.over_complete, .over_incomplete {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: #6DC39B;
	color: #FFFFFF;
}
.over_complete p, .over_incomplete p {
	margin: 5px 0 0 0 !important;
	line-height: 16px !important;
}
.nav_complete a:hover .over_incomplete {
	display: block;
}
.complete_on .nav_complete a:hover .over_complete {
	display: block;
}
.col_mem {
	width: 18%;
	float: left;
}
.col_but {
	width: 10%;
	float: right;
}
.new_member {
	margin-bottom: 10px;
}
.new_member .button_blue {
	width: 90%;
	max-width: 55px;
	float: right;
}
.col_mem input {
	padding: 6px 4%;
	width: 88%;
}
.col_mem select {
	padding: 5px 4%;
	width: 98%;
}
#form_new_members input, #form_new_members select {
	background: #F1F1F2;
}
#form_new_members .col_but a {
	background: url('/img/button_x.png') no-repeat center center;
}
#form_new_members .col_but a:hover {
	background: #26A9BA url('/img/button_x_over.png') no-repeat center center;
}
#form_new_members .col_but span {
	visibility: hidden;
}
#form_selects {
	margin-bottom: 10px;
	display: none;
}
#form_selects p {
	font-size: 16px;
	margin: 3px 0;
}
.obj_tag_holder span {
	cursor: move;
}
.area_content[data-type="trial_expired"] a {
	color: #4D4D4D;
}
.area_content[data-type="trial_expired"] a:hover {
	color: #FFFFFF;
}

#mid_blue select {
	background: #26A9BA url(/img/icon_arrow_down_white.png) no-repeat right center;
	color: white;
	border-color: white;
	border-radius: 4px;
	width: 100%;
}
.chosen-single {
	background: #26A9BA !important;
	color: white !important;
	border-color: #ECEDEE !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.chosen-container-single .chosen-drop {
	border-color: white !important;
}
.chosen-container {
	margin-top: 15px !important;
	width: 100% !important;
}
.chosen-container-single .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
	border: 1px solid #ECEDEE !important;
}

.wb_powered {
	position: absolute;
	bottom: 20px;
	right: 90px;
	width: 125px;
	height: 45px;
	background: transparent url(/img/sprites.png?v=1.2) no-repeat -270px -150px;
}

.input_small {
	max-width: 200px;
}
.textarea_small {
	max-height: 100px;
}
.send_welcome {
    font-family: 'aller_bold';
    line-height: 13px;
    text-decoration: underline;
    margin-left: 5px;
	cursor: pointer;
}

/* UPDATED TABLE DISPLAY */
/*#menu_holder {
  display: table;
  table-layout: fixed;
  padding: 0;
}
#left_holder {
  overflow: auto;
}
#left_nav,
#mid_blue,
#mid_white,
#mid_white_small,
#mid_red {
  display: table-cell;
  position: relative;
  margin: 0 !important;
  width: 0;
}*/

/* Name filter styles */
.input-filter {
	position: relative;
}
.input-filter input {
	display: block;
	width: 100%;
	height: 30px;
	padding: 0;
	margin: 30px 4px 40px 0;
	color: #FFFFFF;
	font-size: 13px;
	background: transparent;
	border: none;
	border-bottom: 1px solid #FFFFFF;
	border-radius: 0 !important;
	box-sizing: border-box;
	outline: none;
}
#clear_member_filter {
	margin-right: 4px;
	opacity: 0;
	transform: translateX(10%) scaleX(0.95);
	transition: all 0.3s ease;
}
#clear_member_filter.active {
	opacity: 1;
	transform: translateX(0) scaleX(1);
}
/*.input-filter input:focus,
.input-filter input:hover,
.input-filter input:active {
	border-color: orange;
}*/
.input-filter span {
	position: absolute;
	top: 50%;
	right: 0;
	background: url('/img/sprites.png?v=1.2') no-repeat -260px -20px;
	transform: translateY(-50%);
}

/* Placeholder styles for filter input */
.input-filter input::-webkit-input-placeholder { /* Chrome */
	color: #FFFFFF;
	font-size: 13px;
	font-style: normal;
}
.input-filter input:-ms-input-placeholder { /* IE 10+ */
	color: #FFFFFF;
	font-size: 13px;
	font-style: normal;
}
.input-filter input::-moz-placeholder { /* Firefox 19+ */
	color: #FFFFFF;
	font-size: 13px;
	font-style: normal;
	opacity: 1;
}
.input-filter input:-moz-placeholder { /* Firefox 4-18 */
	color: #FFFFFF;
	font-size: 13px;
	font-style: normal;
	opacity: 1;
}

/* chosen dropdown arrow update */
#mid_blue .chosen-container-single a.chosen-single b {
	opacity: 0 !important;
}
#mid_blue .chosen-container-single a.chosen-single:before {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 12px;
	height: 12px;
	background: no-repeat url(/img/chevron.svg) center center !important;
	background-size: 10px !important;
	content: '';
	transform: translateY(-50%) rotate(180deg);
	transition: all 0.2s ease;
}
#mid_blue .chosen-container-single.chosen-with-drop a.chosen-single:before {
	transform: translateY(-50%) rotate(0deg);
}

/* styles for alpha-filter */
ul#list-filter-alphabetical {
	position: absolute;
	left: -35px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	width: 30px;
	padding: 0;
	margin: 80px 0 0;
	list-style: none;
}
ul#list-filter-alphabetical li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0 0 1px;
	font-size: 10px;
	color: #CCCCCC;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.3s ease;
}
ul#list-filter-alphabetical li:hover {
	color: #FFFFFF;
	background-color: #26A9BA;
	opacity: 0.5;
}
ul#list-filter-alphabetical li.active,
ul#list-filter-alphabetical li.active:hover {
	color: #FFFFFF;
	background-color: #26A9BA;
	opacity: 1;
	transform: scale(1.1);
}

ul#sortable_rel,
ul#sortable_all {
	max-height: 540px;
	overflow: auto;
}

ul#sortable_rel li,
ul#sortable_all li {
	text-transform: capitalize;
}

ul#sortable_all li.alpha-filter-off {
	display: none !important;
}

/* User's course dashboard */
.couse_home-item + .couse_home-item {
	position: relative;
	margin-top: 60px;
}

.has-error {
	margin: 10px 0;
	color: red;
}

.btn_upload:hover {
	color: #26a9ba !important;
	background: transparent !important;
}

#msgBox {
	position: relative;
	width: 100%;
	padding-right: 30px;
}

#msgBox.uploadifyError:after {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 10px;
	height: 10px;
	background: no-repeat url('/css/uploadify/cancel.png') center center;
	cursor: pointer;
	content: '';
}

.midblue .btn_upload {
	color: #fff;
	border-color: #fff;
}

.position-absolute { position: absolute }
.position-relative { position: relative }

.d-none { display: none }

.p-0 { padding: 0 !important }
.m-0 { margin: 0 !important }
.mr-20 { margin-right: 20px; }
.mb-1 { margin-bottom: 2px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 32px; }
.w-200 { width: 200px; }
.float-left { float: left }
.float-right { float: right }

#toast {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999999;
    width: auto;
    max-width: calc(100vw - 95px);
    padding: 15px;
    border-radius: 4px;
    color: red;
    font-weight: bold;
    background: white;
    border: 1px solid red;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0;
    transform: translateY(200%);
    transition: all 0.3s ease;
}
#toast.active {
    opacity: 1;
    transform: translateY(0);
}
#toast:after {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 10px;
    background: white;
    border: 1px solid red;
    border-radius: 50%;
    content: 'X';
    transform: translate(30%, -30%);
}
#toast.success {
	color: green;
	border: 1px solid green;
	box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}
#toast.success:after {
	border-color: green;
}
#toast ul {
    padding: 0;
    margin: 0 0 0 15px;
}

#form-logout {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.alert-message {
    position: relative;
    padding: 0 0 0 16px;
    margin: 0 0 25px;
    color: orange;
}
.alert-message::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: url('/img/warning.png') no-repeat center;
    background-size: contain;
    content: '';
}

.ui-sortable .ui-state-highlight {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.ui-sortable-helper {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

.comment_group.active-comment {
    animation-name: glow;
    animation-duration: 5s;
}

/* CC - Course Contents. M -Members  */
.cc-m {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}
.cc-m li {
    display: none;
    padding: 5px 10px;
    margin-bottom: 5px;
    overflow: hidden;
    line-height: 22px;
    background: #E6E7E8;
}
.cc-m li.active {
    display: flex;
    flex-flow: row nowrap;
}
.cc-m__info {
    display: flex;
    flex: 1 0 calc(100% - 188px);
    gap: 10px;
}
.cc-m__action {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-basis: 0 0 100px;
    visibility: hidden;
}
.cc-m__status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin: -5px 0;
    flex: 0 0 88px;
    white-space: nowrap;
    color: #fff;
    background: #26a9ba;
    translate: 10px 0;
    transition: background-color 0.3s ease;
}
.cc-m__status[data-ref="0"] {
    cursor: pointer;
}
.cc-m__status[data-ref="0"]::before {
    content: 'Send welcome';
}
.cc-m__status[data-ref="0"]:hover {
    background-color: #58bdca;
}
.cc-m__status[data-ref="1"]::before {
    content: 'Sent';
}
.cc-m__status.sending {
    cursor: not-allowed;
}
.cc-m__status.sending::before {
    content: 'Sending...' !important;
}

.custom_radios input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}
.custom_radios label {
    display: inline-block;
    min-width: 100px;
    margin-right: 5px;
    color: #26A9BA;
    text-align: center;
    line-height: 25px;
    border: 1px solid #26A9BA;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.custom_radios label:hover {
    color: #fff;
    background-color: #26A9BA;
}
.custom_radios input[type="radio"]:checked + label {
    color: #fff;
    background-color: #26A9BA;
}

.cc-m__info > div {
    flex: 0 0 33.33%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.cc-m__action > span {
    cursor: pointer;
    color: #26a9ba;
}

.cc-m li:hover .cc-m__action {
    visibility: visible;
}
.cc-m li .cc-m__action > span:hover {
    text-decoration: underline;
}

.cc-m__update {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    margin-bottom: 40px;
}
.cc-m__select {
    flex: 1;
}
.cc-m__select-add {
    width: 120px;
    text-align: right;
}
.cc-m__select .chosen-container {
    margin-top: 1px !important;
}
.cc-m__select .chosen-single {
    height: 27px !important;
    padding-top: 1px !important;
    color: #000 !important;
    background: #fff !important;
    border-color: #ECEDEE !important;
}
.cc-m__select .chosen-single span {
    line-height: 26px !important;
}

button:disabled {
    opacity: 0.5;
}

@keyframes glow {
    0% {
      box-shadow: 0 0 15px 0 #ff902f;
    }
    100% {
      box-shadow: 0 0 15px 0 #ff902f00;
    }
}

[data-wide-fields] .node_edit_left {
	width: 30%;
}

[data-wide-fields] .node_edit_right {
	width: 70%;
}

.has-copy-button {
	display: flex;
	justify-content: space-between;

	& input {
		width: calc(100% - 150px);
	}
}

/* Hide "send welcome" button on organisation members list page */
.organisation_edit_nav + #node_ajax_area .cc-m__status {
	display: none;
}

.secondary-title {
	padding: 10px 0;
	margin: 0 0 10px;
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	border-bottom: 1px solid #fff;

	& span {
		float: right;
	}
}

#organisation_sort .organisation_members_count {
	float: right;
}

input[data-datepicker] {
	max-width: 150px;
	background: url('/img/calendar.svg') no-repeat right 5px center;
	background-size: 15px;
}

input[data-datepicker] + small {
	display: block;
	padding-top: 4px;
	color: #888;
}

/* Toggle View */
.nodes-view {
	display: none !important;
}
.nodes-view.active {
	display: block !important;
}

#sigma-alphabetical {
	position: absolute;
	top: 90px;
	right: 0;
	bottom: 0;
	left: 50px;
	overflow: auto;

	& #sigma-drag {
		gap: 30px;
		padding: 30px 30px 80px;
	}

	& #sigma-drag.ui-state-disabled {
		opacity: 1;
		pointer-events: auto;
	}

	& ul {
		display: none;
		flex-flow: row wrap;
		padding: 0;
		margin: 0 0 25px;
		list-style: none;

		& li {
			display: none;
			flex: 0 0 100%;
			order: 2;
			margin-bottom: 5px;
			font-size: 12px;
			font-weight: bold;

			& span {
				position: relative;
				display: inline-block;
				padding: 4px 8px;
				color: #404041;
				border: 2px solid #404041;
				opacity: 1;
				transition: opacity 0.3s ease;
				cursor: pointer;
			}

			& span.objective {
				color: #f47f2a !important;
				border-color: #f47f2a !important;
			}

			& span.objective::after {
				position: absolute;
				top: -2px;
				bottom: -2px;
				left: 100%;
				display: inline-block;
				min-width: 24px;
				padding: 2px 5px;
				align-content: center;
				color: #fff;
				text-align: center;
				background: #f47f2a;
				content: attr(data-view);
			}

			& span:hover {
				opacity: 0.8;
			}
		}

		& li.active {
			display: block;
		}

		& li.active ~ li.legend {
			display: block;
		}

		& li.legend {
			display: none;
			order: 1;
			margin-bottom: 5px;
			color: #000;
			font-family: 'neutra2_display', sans-serif;
			font-size: 20px;
		}

		& li.disabled {
			/* pointer-events: none !important; */

			& span {
				opacity: 0.3;
			}
		}

		& li.seen:not(.disabled) span {
			color: #26a9ba;
			border-color: #26a9ba;
		}

		& li.completed span {
			color: #6dc39b;
			border-color: #6dc39b;
		}
	}

	& ul.active {
		display: flex;
	}
}
#sigma-alphabetical.active ~ #reposition,
#sigma-alphabetical.active ~ #manual_zoom {
	display: none;
}
@media all and (min-width: 768px) {
	#sigma-drag {
		/*column-count: 2;*/
		padding: 50px 50px 100px;
	}
}
@media all and (min-width: 992px) {
	#sigma-alphabetical {
		overflow: hidden;

		& #sigma-drag {
			z-index: 1;
			gap: 50px;
			column-fill: auto;
			padding: 50px 80px;
			min-width: 800px;
			height: calc(100vh - 200px);
		}
	}
}

#toggle-view {
	position: absolute;
	top: 20px;
	right: 215px;
	display: flex;
	width: 80px;
	height: 30px;
	overflow: hidden;
	border-radius: 50px;

	& button {
		flex: 1;
		background-position: center;
		background-color: #e6e7e8;
		background-size: 16px;
		background-repeat: no-repeat;
		border: none;
		transition: background-color 0.3s ease;
	}

	& button:hover {
		background-color: #e2dbdb;
	}

	& button.active {
		background-color: #26A9BA;
	}

	& button[data-type="alphabetical"] {
		background-image: url('/img/icons/type.svg');
		background-position: right 10px center;
	}

	& button[data-type="nodes"] {
		background-image: url('/img/icons/connection.svg');
		background-position: left 10px center;
	}

	& button[data-type="alphabetical"].active {
		background-image: url('/img/icons/type-light.svg');
	}

	& button[data-type="nodes"].active {
		background-image: url('/img/icons/connection-light.svg');
	}
}

#node_ajax_area .node_video {
	border: 1px solid #f0f0f1;

	& .video_container {
		margin-top: 0;
	}

	& .video_container[data-type="quiz"] {
		display: none;
	}

	& .node_video_extra {
		padding: 0 1.33em;

		& button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 180px;
			min-height: 40px;
			padding: 0 1em;
			margin-bottom: 20px;
			color: #fff;
			background: #26A9BA;
			border: 0;

			& i {
				flex: 0;
				font-size: 20px;
			}

			& span {
				flex: 1;
			}

			& span:before {
				content: 'Mark as watched';
			}
		}

		& button:hover {
			background-color: #58BDCA;
		}

		& button.active {
			background-color: #54b286;

			& span:before {
				content: 'Watched';
			}
		}
	}

	& .video-tabs {
		display: flex;
		height: 40px;

		& button {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			color: #404041;
			font-size: 18px;
			background: #f1f1f2;
			border: 0;
			outline: none;
			transition: background-color 0.3s ease;
		}

		& button:hover {
			color: #fff;
			background-color: #58BDCA;
		}

		& button.active {
			color: #fff;
			background-color: #26A9BA;
		}
	}
}

#node_ajax_area .node_video[data-view="quiz"] {

	& .video_container[data-type="video"] {
		display: none;
	}

	& .video_container[data-type="quiz"] {
		display: block;
	}
}

/* autocomplete */
ul.ui-autocomplete {
	z-index: 999999;
	max-height: clamp(100px, 80vh, 400px);
	overflow: hidden auto;
	border-radius: 0;
	border-color: #ddd;
	box-shadow: 5px 5px 5px #0001;

	& li a {
		display: block;
		padding: 6px 12px;
	}

	& li a.ui-state-focus,
	& li a:hover {
		color: #fff;
		background-color: #58BDCA;
	}
}

.member_edit_nav[data-disabled-tabs] {
	opacity: 0.3;
	pointer-events: none !important;
}
.disabled-copy {
	padding: 8px 0;
	color: #ff902f;
	font-size: 13px;
	text-align: right;
}
.content-parent-heading {
	padding: 0 120px 30px 0;
	margin-bottom: 30px;
	line-height: 1;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	border-bottom: 1px solid #ddd;

	& [data-load-source] {
		position: absolute;
		right: 0;
	}
}
