@charset "UTF-8";
/* CSS Document */

* {box-sizing: border-box; font-family: 'Open Sans', sans-serif;}

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 22px;
	color: #3f3f3f;
	background-color: #f2f2f2;
}


.main-container {
	position: relative;
	width: 100%;
	max-width: 1280px;
	background-color: #ffffff;
	margin: 0 auto;
	background-image: url(background-230px-margin.gif);
	background-repeat: repeat-y;
}

.main-container-login {
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;
	background: #fff;
}

.footer-login {
    width: 100%;
    float: none;
    position: relative;
    margin-top: 0px;
}


div.login-bottom img {margin-top: 40px; width: 100%}

.sidenav {
	position: fixed;
	top: 0;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	width: 230px;
	float: left;
	background-color: #dbdbdb;
	display: block;
}
.content-container {
	width: -moz-calc(100% - 230px);
	width: -webkit-calc(100% - 230px);
	width: calc(100% - 230px);
	background-color: #ffffff;
	padding: 0px;
	float: right;
	padding-bottom: 48px;
	height: 100%;
}
.main-header {
	display: block;
	padding: 12px 20px 12px 20px;
	background-color: #0073b2;
	min-height: 80px;
	position: relative;
}
.main-sub-header {
	position: relative;
	padding: 19px 10px 21px 35px;
	font-weight: 300;
	color: #0073b2;
	font-style: italic;
	background-color: #edf8fe;
}

a, a:hover {outline: 0;}
b {font-weight: 600}

.content {
	position: relative;
	background-color: #ffffff;
	padding: 35px 35px 35px 35px;
}

p {
	margin: 0 0 10px 0;
}

ul {
	list-style: disc outside;
	margin: 0 0 0 14px;
	padding: 0;
}
ol {
	list-style: decimal outside;
	margin: 0 0 0 14px;
	padding: 0;
}

li {
	margin: 0 0 10px 0;
	padding: 0;
}

li ol,
li ul {
	margin: 4px 0px 4px 24px;
}


ol li ul li {margin-left: 18px}
ul.tight li {margin-top: 4px; margin-bottom: 4px}

a, a:visited {color: #333}


.v-space {width: 100%; clear: both}
.v-space.small {height: 10px}
.v-space.medium {height: 20px}

.h-space.small {margin-right: 10px}
.h-space.medium {margin-right: 20px}

.width-col3 {float: left; min-width: 33%;}

.f-left {float: left}

a.inline-link {
	color: #f2f2f2;
	font-weight: 600;
	text-decoration: none;
}

a.inline-link:hover {
	color: #fff;
}


/* Print page ****************/
.onlyPrintMe {
	display: none;
}

.print-button {
	position: absolute;
	height: 45px;
	width: 45px;
	padding: 12px;
	top: 0px;
	right: 0;
	text-align: center;
	cursor: pointer;
	color: #333;
	background-color: #f2f2f2;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.print-button:hover {
	color: #5c5c5c;
	background-color: #e2e2e2;
	transition: background .20s ease-in-out;
	-moz-transition: background .20s ease-in-out;
	-webkit-transition: background .20s ease-in-out;
}


.print-button::after {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	font-size: 20px;
	content: "\f02f"
}


.print-button-inline {
	padding: 2px 6px;
	text-align: center;
	color: #333;
	background-color: #f2f2f2;
	border: 1px solid #ddd;
}

.print-button-inline::after {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	font-size: inherit;
	content: "\f02f"
}


/* Sayings ****************/
.saying {float: left; font-size: 18px; line-height: 22px;}

.saying::before, 
 .saying::after 
{
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	color: #4dbbe8;
	padding-right: 12px;
	font-size: 20px;
	content: "\f10d"
}

.saying::after {
	padding-left: 8px;
	content: "\f10e"
}

.said-by {float: left; font-size: 12px; font-style: normal; white-space: nowrap;}


/* Accordion */

.accordion {
	width: 100%;
}

.accordion li ol,
 .accordion li ul {
	margin: 0;
}

.accordion ol li ul {
	margin-top: 8px;
}


.accordion li.open .dropdown-link {
	color: #ffffff;
	background-color: #707070;
}
.accordion li.open .dropdown-link .fa-chevron-right {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	right: 12px
	/* -webkit-transition: 0.3s;
		transition: 0.3s; */ /* animation is a bit jumpy */
}

.accordion-content {
	display: none;
	width: 100%;
	margin-bottom: 10px;
	border: 1px solid #bababa;
	border-top: 0px;
	margin: -10px 0 10 0;
	color: #333;
	background-color: #f2f2f2;
	padding: 32px 96px 30px 96px;
}

.accordion-content.wide {padding: 32px}
.accordion-content.full-width {padding: 0px}


/* Menu specific */ 

ul.accordion, ul.submenu-items, ul.straight-link {
	list-style: none;
	margin-left: 0;
}

.sidenav .accordion li {margin: 0;}


/* Dropdown link */ 

.dropdown-link {
	cursor: pointer;
	display: block;
	padding: 13px 60px 13px 25px;
	border-bottom: 1px solid #bababa;
	color: #3f3f3f;
	position: relative;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	font-size: 15px;
	font-weight: 300;
	background-color: #dbdbdb;
	background-image: url(drop-down-button-background.png);
	background-repeat: repeat-y;
	background-position: right; 
}
.dropdown-link:hover, .dropdown-link.selected  {
	color: #ffffff;
	background-color: #b1b1b1;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.dropdown-link i {
	position: absolute;
	top: calc(50% - 7px);
	left: 25px;
}

.dropdown-link .fa-chevron-right {
	right: 11px;
	left: auto;
	font-size: 15px;
}

.content .dropdown-link{
	margin-top: 10px;
	 border: 0px;
	 font-size: 16px;
	 font-weight: 600;
	 color: #575757;
}


/* BP2W menu help prompts link */

.main-help {
	position: relative;
	background-color: #787878;
	color: #fff;
	padding: 11px 12px 12px 25px;
	font-size: 15px;
	border-bottom: 1px solid #787878;
}


/* BP2W menu straight link */

.straight-link {
	background-color: #dbdbdb;
}

.straight-link a {
	display: block;
	border-bottom: 1px solid #bababa;
	color: #3f3f3f;
	padding: 13px 15px 13px 25px;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	font-size: 15px;
	font-weight: 300;
	line-height: 20px;
	text-decoration: none;
}
.straight-link a:hover, .straight-link .selected a {
	color: #ffffff;
	background-color: #b1b1b1;
}

/* BP2W menu sub-menu link */

.submenu-items {
	display: none;
	background: #d0d0d0;
}
.submenu-items li {
	border-bottom: 1px solid #B6B6B6;
}

.submenu-items a {
	display: block;
	color: #3f3f3f;
	padding: 13px 15px 13px 40px;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	font-size: 15px;
	font-weight: 300;
	line-height: 20px;
	text-decoration: none;
}
.submenu-items a:hover, .submenu-items .selected a {
	background-color: #b1b1b1;
	color: #ffffff;
}

.submenu-items-prompts li {
	margin-bottom: 10px;
}


.main-logo {
	display: block;
	float: left;
	width: 30%;
	max-width: 270px;
}
.main-logo img {
	width: 100%;
	height: auto;
}

.top-banner-container {
	float: right;
	font-weight: 300;
	line-height: 20px;
	color: #ffffff;
	text-align: right;
}

.banner-text {
	color: #fff;
	clear: right;
}

.strapline-container {
	font-size: 18px;
	font-weight: 300;
	line-height: 26px;
	color: #ffffff;
	width: 70%;
	text-align: right;
	position: absolute;
	bottom: 13px;
	right: 20px;
	text-transform: uppercase;
}
.strapline-container span {
		color: #4dbae8;
	font-weight: 400;
}

.login-strapline {
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
}	
.login-strapline img {width: 82%}

/* BP2W mobile header */

.mobile-header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 8px;
	z-index: 99;
	width: 100%;
	overflow: hidden;
	background-color: #0073b2;
}

.mobile-header img {margin: 0 0 0 10px; padding: 0; height: 40px; width: auto}


.mobile-header .mobile-menu-icon {
	display: none;
	padding: 6px 6px 4px 6px;
	margin: 2px 6px 0px 0px;
	background-color: #ffffff;
	font-size: 28px;
	color: #999999;
	width: 40px;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
}

.mobile-header .mobile-menu-icon:hover {
	background-color: #000000;
	color: #ffffff;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.mobile-header-spacer {
	display: none;
	height: 59px;
}

h1 {
	margin: 0px 0px 20px 0px;
	font-size: 40px;
	line-height: 46px;
	color: #5c5c5c;
	text-transform: lowercase;
}
.content h1::first-letter {text-transform: uppercase}

h2 {
	margin: 0px 0px 10px 0px;
	font-size: 24px;	
	line-height: 36px;
}
h3 {
	margin: 0px 0px 10px 0px;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
}
h4 {
	margin: 0px 0px 10px 0px;
	font-weight: 600;
	font-size: 19px;
	line-height: 26px;
}
h5 {
	margin: 18px 0px 5px 0px;
	font-weight: 600;
	font-size: 16px;
	line-height: 18px;
}

h1.h1-off {display: none !important}
h2.h2-off {display: none !important}

.content-frame-left {
	float: left;
	width: -moz-calc(72.36438% - 2px);
	width: -webkit-calc(72.36438% - 2px);
	width: calc(72.36438% - 2px);
}
.content-frame-left img {
	width: 100%;
	height: auto;
}
.content-frame-right {
	float: right; 
	border-left: 1px solid #bfbfbf;
	width: -moz-calc(27.635619% - 1px);
	width: -webkit-calc(27.635619% - 1px);
	width: calc(27.635619% - 1px);
}
.content-frame-right img {
	width: 100%;
	height: auto;
}
.footer-container {
	position: relative;
	width: 100%;
	clear: both;
}
.footer {
	background-color: #909399;
	line-height: 24px;
	fint-size: 12px;
	color: #c5c7ca;
	color: #fff;
	padding: 12px 20px 12px 20px;
	width: -moz-calc(100% - 230px);
	width: -webkit-calc(100% - 230px);
	width: calc(100% - 230px);
	float: right;
	position: absolute;
	margin-top: -48px;
	right: 0px;
}

.footer.login {
	position: relative;
	float: left;
	width: 100%;
	margin: 0;
}

.footer a {
	color: #fff;
	text-decoration: none;
}

.footer a:hover {
	color: #fff;
	text-decoration: underline
}

.footer .terms-privacy {
	width: 30%;
	float: left;
}

.footer .powered-by {
	width: 30%;
	margin: 0 auto;
	float: left;
	text-align: center;
}

.footer .copyright {
	width: 40%;
	float: right;
	text-align: right;
}


.clear {
	clear: both;
	width: 100%;
	height: 0px;
}
.rule {width: 100%; height: 1px; border-top: 1px solid #bfbfbf}
.top-pad {width: 100%; height: 14px}
.overflow-x {overflow-x: auto}

/* BP2W strapline */

.footer-strapline{
	width: 100%;
	padding: 25px 0px 0px 0px;
	font-size: 28px;
	font-weight: 300;
	line-height: 40px;
	font-style: italic;
	text-align: center;
	color: #999999;
}
.footer-strapline-weight{
	font-weight: 500;
	color: #bfbfbf;
}


/* Panels */

.panel-wrapper {
	position: relative;
	margin-top: 30px;
	border: 1px solid #bfbfbf;
	background-color: #ffffff;
}
.panel-wrapper.grey {
	background-color: #f2f2f2;
	color: #333;
}
.panel-wrapper.blue {
	background-color: #edf8fe;
	color: #3f3f3f;
}
.panel-wrapper.tm-small {
	margin-top: 18px;
}

.panel-container {
	padding: 30px 35px 25px 35px;
	background: inherit;
}
.panel-container.white {
	background-color: #ffffff;
}
.panel-container.grey {
	background-color: #f2f2f2;
}
.panel-container a {
	color: inherit;
}

/* BP2W four headers */

.panel-header-container {
	position: relative;
	width: 100%;
	background-color: #bfbfbf;
}

.panel-header-container.blue {
	width: 100%;
	background-color: #0073b2;
}

.panel-header-title {
	float: left;
	padding: 12px 32px 13px 25px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	max-width: calc(100% - 50px);
}

.panel-header-button-back a {
	font-weight: 400;
	line-height: 45px;
	padding: 0px 16px 1px 20px;
	display: block;
	color: #5c5c5c;
	float: left;
	background-color: #e2e2e2;
	text-decoration: none;
}

.panel-header-button-back a:hover {
	color: #ffffff;
	background-color: #909090;
	transition: background .20s ease-in-out;
	-moz-transition: background .20s ease-in-out;
	-webkit-transition: background .20s ease-in-out;
}
.panel-header-button-back a .fa-caret-right {
	font-size: 18px;
	display: block;
	float: right;
	line-height: 45px;
}

.panel-help-button {
	position: absolute;
	height: 45px;
	width: 45px;
	padding: 12px;
	top: 0;
	right: 0;
	text-align: center;
	cursor: pointer;
	background: #e2e2e2;
	color: #5c5c5c;
}

.panel-help-button:hover {
	color: #ffffff;
	background-color: #909090;
	transition: background .20s ease-in-out;
	-moz-transition: background .20s ease-in-out;
	-webkit-transition: background .20s ease-in-out;
}

div.panel-help-button::after {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	font-size: 20px;
	content: "\f059"
}

.help-icon {
	padding: 0px 2px;
	text-align: center;
	background: #e2e2e2;
	color: #5c5c5c;
	border: 1px solid #bfbfbf;
}

.help-icon::after {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	content: "\f059"
}


.instructions ol,
 .instructions ul {
	 margin-left: 35px
}


/* BP2W four buttons */

.button-wrapper {
	display: block;
	width: 23.362445%;
	height: 72px;
	float: left;
	margin-right: 2.1834061%;
	margin-bottom: 14px;
	cursor: pointer;
}
.button-wrapper a {color: inherit}
.button-wrapper.single {
	margin-top: 0px;
}
.button-container {
	background-color: #bfbfbf;
	border-radius: 6px 6px 6px 6px;
	border-style: solid;
	border-color: #bfbfbf;
	border-width: 1px;
}
.button-container:hover {
	background-color: #787878;
	border-color: #787878;
	/* transition: background .20s ease-in-out;
	-moz-transition: background .20s ease-in-out;
	-webkit-transition: background .20s ease-in-out; */
}
.button-wrapper:nth-child(4n + 4) {
	margin-right: 0%;
}
.button-wrapper:nth-child(4n + 5) {
	clear: left;
}
.button-text-container {
	display: table;
	width: calc(100% - 30px);
	border-radius: 6px;
	float: left;
	height: 72px;
}
.button-text-container-white {
	background-color: #ffffff;
}
.button-text-container-grey {
	background-color: #f2f2f2;
}
.button-arrow-container {
	display: table;
	width: 28px;
	height: 72px;
	float: left;
	padding-left: 6px;
}
.button-text {
	display: table-cell;
	vertical-align: middle;
	padding: 10px 5% 10px 10%;
    font-weight: 600;
    line-height: 18px;
}

.button-text small {
	display: block;
	margin-top: 3px;
	font-size: 12px;
}


.button-arrow {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
    font-size: 28px;
    line-height: 28px;
	color: #ffffff;
}



.button-join-line {
	float: left;
	width: 20px;
	height: 36px;
	border-bottom: 1px solid #bfbfbf;
}




/* Help panel */


.help-content {
	font-size: 14px;
	line-height: 20px;
	padding: 10px 20px 24px 20px;
}
.help-content h4 {
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	color: #0073b2;
	margin: 8px 0px 6px 0px;
}
.help-content h5 {
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	color: #333;
	margin: 8px 0px 4px 0px;
}
.help-content .divider {
	width: 100%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #bfbfbf;
	height: 12px;
	margin-bottom: 12px;
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


span.user-name {text-transform: none}

.tt-none {text-transform: none !important}
.tt-proper {text-transform: capitalize !important}
.tt-lower {text-transform: lowercase !important}
.tt-upper {text-transform: uppercase !important}
.bold-text {font-weight: 600}
.normal-text {font-weight: 300}
.nowrap {white-space: nowrap}
.link-button-below {font-weight: 600; color: #0073b2}
.survey-name {font-weight: 600; color: #07517d}
.app-name {font-weight: 600; color: #07517d}
.even-better {font-style: italic}
.emph1 {font-weight: 600}
.emph2 {font-weight: 600; font-style: italic}
.suspended {color: #d00; text-decoration: line-through}
.important {color: #d00}
.sub-text {font-size: 12px; color: #888;}

button {
	padding: 9px 18px 10px 18px;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	background: #787878;
	border: none;
}

button:hover {
	background: #3f3f3f;
	transition: background .20s ease-in-out;
	-moz-transition: background .20s ease-in-out;
	-webkit-transition: background .20s ease-in-out;	
}

span.translation_error {color: #d00}  /* depricated */
.content-error {color: #d00 !important}
.not-translated {color: #d0d !important}
.ui-error {color: #d00}
.hidden {display: none}
.data-hide {display: none !important}
.sort-order {display: none;}
.arrow {cursor: pointer}
.cursor-pointer {cursor: pointer}
.info {background: #fafafa; color: #333; padding: 4px 10px; border: 1px solid #bfbfbf}
.dialog-input .info {width: 100%; max-width: 350px}
.icon-large {font-size: 22px}
.read-only {background: #f2f2f2}
.confirm-dialog {padding: 10px 20px; color: #333;}
.indent1 {padding-left: 8px}
.indent2 {padding-left: 18px}
.indent3 {padding-left: 36px}

.soft-error {
	margin-top: 50px;
	border: 1px solid #bfbfbf;
	padding: 30px;
	text-align: center;
	font-size: 20px;
	font-weight: 600
}

.up-down {
	font-size: 15px;
	font-weight: 600;
	color: #5c5c5c;
	text-align: center;
}

.up-down:hover {color: #3f3f3f; cursor: pointer}

.up-down::after {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	padding-left: 8px;
	font-size: 20px;
	content: "\f338"
}

.sort-drag-row {border: 1px solid #333; background: #f2f2f2;}



.bdr0 {border-width: 0px !important}
.bdr1 {border-width: 1px !important}
.bdr2 {border-width: 2px !important}
.bdr3 {border-width: 2px !important}

.bdr-top0 {border-top-width: 0px !important}
.bdr-ryt0 {border-right-width: 0px !important}
.bdr-btm0 {border-bottom-width: 0px !important}
.bdr-lft0 {border-left-width: 0px !important}

.bdr-top1 {border-top-width: 1px !important}
.bdr-ryt1 {border-right-width: 1px !important}
.bdr-btm1 {border-bottom-width: 1px !important}
.bdr-lft1 {border-left-width: 1px !important}

.bdr-top2 {border-top-width: 2px !important}
.bdr-ryt2 {border-right-width: 2px !important}
.bdr-btm2 {border-bottom-width: 2px !important}
.bdr-lft2 {border-left-width: 2px !important}

.bdr-top3 {border-top-width: 3px !important}
.bdr-ryt3 {border-right-width: 3px !important}
.bdr-btm3 {border-bottom-width: 3px !important}
.bdr-lft3 {border-left-width: 3px !important}

.bdr-grey {border: 1px solid #bfbfbf}

.bg-light-grey {background: #f2f2f2}
.bg-mid-grey {background: #e4e4e4}

.bg-amber {background: #ff7700}
.bg-red {background: #fd2311}


.bg-score0, .bg-h-score0:hover, .bg-h-score0.selected  {background-color: #ff3333 !important}
.bg-score1, .bg-h-score1:hover, .bg-h-score1.selected  {background-color: #ff3534 !important}
.bg-score2, .bg-h-score2:hover, .bg-h-score2.selected  {background-color: #ff3734 !important}
.bg-score3, .bg-h-score3:hover, .bg-h-score3.selected  {background-color: #ff3a33 !important}
.bg-score4, .bg-h-score4:hover, .bg-h-score4.selected  {background-color: #ff3d35 !important}
.bg-score5, .bg-h-score5:hover, .bg-h-score5.selected  {background-color: #ff4035 !important}
.bg-score6, .bg-h-score6:hover, .bg-h-score6.selected  {background-color: #ff4235 !important}
.bg-score7, .bg-h-score7:hover, .bg-h-score7.selected  {background-color: #ff4736 !important}
.bg-score8, .bg-h-score8:hover, .bg-h-score8.selected  {background-color: #ff4a36 !important}
.bg-score9, .bg-h-score9:hover, .bg-h-score9.selected  {background-color: #ff4d36 !important}
.bg-score10, .bg-h-score10:hover, .bg-h-score10.selected  {background-color: #ff5137 !important}
.bg-score11, .bg-h-score11:hover, .bg-h-score11.selected  {background-color: #ff5538 !important}
.bg-score12, .bg-h-score12:hover, .bg-h-score12.selected  {background-color: #ff5b38 !important}
.bg-score13, .bg-h-score13:hover, .bg-h-score13.selected  {background-color: #ff5f39 !important}
.bg-score14, .bg-h-score14:hover, .bg-h-score14.selected  {background-color: #ff6239 !important}
.bg-score15, .bg-h-score15:hover, .bg-h-score15.selected  {background-color: #ff673a !important}
.bg-score16, .bg-h-score16:hover, .bg-h-score16.selected  {background-color: #ff6c3a !important}
.bg-score17, .bg-h-score17:hover, .bg-h-score17.selected  {background-color: #ff703b !important}
.bg-score18, .bg-h-score18:hover, .bg-h-score18.selected  {background-color: #ff763b !important}
.bg-score19, .bg-h-score19:hover, .bg-h-score19.selected  {background-color: #ff7b3c !important}
.bg-score20, .bg-h-score20:hover, .bg-h-score20.selected  {background-color: #ff813d !important}
.bg-score21, .bg-h-score21:hover, .bg-h-score21.selected  {background-color: #ff853d !important}
.bg-score22, .bg-h-score22:hover, .bg-h-score22.selected  {background-color: #ff8a3e !important}
.bg-score23, .bg-h-score23:hover, .bg-h-score23.selected  {background-color: #ff8f3f !important}
.bg-score24, .bg-h-score24:hover, .bg-h-score24.selected  {background-color: #ff943f !important}
.bg-score25, .bg-h-score25:hover, .bg-h-score25.selected  {background-color: #ff9a40 !important}
.bg-score26, .bg-h-score26:hover, .bg-h-score26.selected  {background-color: #ff9d41 !important}
.bg-score27, .bg-h-score27:hover, .bg-h-score27.selected  {background-color: #ffa441 !important}
.bg-score28, .bg-h-score28:hover, .bg-h-score28.selected  {background-color: #ffa842 !important}
.bg-score29, .bg-h-score29:hover, .bg-h-score29.selected  {background-color: #ffae42 !important}
.bg-score30, .bg-h-score30:hover, .bg-h-score30.selected  {background-color: #ffb143 !important}
.bg-score31, .bg-h-score31:hover, .bg-h-score31.selected  {background-color: #ffb844 !important}
.bg-score32, .bg-h-score32:hover, .bg-h-score32.selected  {background-color: #ffbd44 !important}
.bg-score33, .bg-h-score33:hover, .bg-h-score33.selected  {background-color: #ffc345 !important}
.bg-score34, .bg-h-score34:hover, .bg-h-score34.selected  {background-color: #ffc646 !important}
.bg-score35, .bg-h-score35:hover, .bg-h-score35.selected  {background-color: #ffcc46 !important}
.bg-score36, .bg-h-score36:hover, .bg-h-score36.selected  {background-color: #ffd047 !important}
.bg-score37, .bg-h-score37:hover, .bg-h-score37.selected  {background-color: #ffd448 !important}
.bg-score38, .bg-h-score38:hover, .bg-h-score38.selected  {background-color: #ffd948 !important}
.bg-score39, .bg-h-score39:hover, .bg-h-score39.selected  {background-color: #ffdc48 !important}
.bg-score40, .bg-h-score40:hover, .bg-h-score40.selected  {background-color: #ffe049 !important}
.bg-score41, .bg-h-score41:hover, .bg-h-score41.selected  {background-color: #ffe64a !important}
.bg-score42, .bg-h-score42:hover, .bg-h-score42.selected  {background-color: #ffe74a !important}
.bg-score43, .bg-h-score43:hover, .bg-h-score43.selected  {background-color: #ffec4b !important}
.bg-score44, .bg-h-score44:hover, .bg-h-score44.selected  {background-color: #ffef4b !important}
.bg-score45, .bg-h-score45:hover, .bg-h-score45.selected  {background-color: #fff34b !important}
.bg-score46, .bg-h-score46:hover, .bg-h-score46.selected  {background-color: #fff64c !important}
.bg-score47, .bg-h-score47:hover, .bg-h-score47.selected  {background-color: #fff84c !important}
.bg-score48, .bg-h-score48:hover, .bg-h-score48.selected  {background-color: #fffa4d !important}
.bg-score49, .bg-h-score49:hover, .bg-h-score49.selected  {background-color: #fffd4d !important}
.bg-score50, .bg-h-score50:hover, .bg-h-score50.selected  {background-color: #ffff4d !important}
.bg-score51, .bg-h-score51:hover, .bg-h-score51.selected  {background-color: #feff4d !important}
.bg-score52, .bg-h-score52:hover, .bg-h-score52.selected  {background-color: #fcff4d !important}
.bg-score53, .bg-h-score53:hover, .bg-h-score53.selected  {background-color: #f8ff4d !important}
.bg-score54, .bg-h-score54:hover, .bg-h-score54.selected  {background-color: #f7ff4d !important}
.bg-score55, .bg-h-score55:hover, .bg-h-score55.selected  {background-color: #f5ff4d !important}
.bg-score56, .bg-h-score56:hover, .bg-h-score56.selected  {background-color: #f1ff4d !important}
.bg-score57, .bg-h-score57:hover, .bg-h-score57.selected  {background-color: #edff4d !important}
.bg-score58, .bg-h-score58:hover, .bg-h-score58.selected  {background-color: #eaff4d !important}
.bg-score59, .bg-h-score59:hover, .bg-h-score59.selected  {background-color: #e8ff4d !important}
.bg-score60, .bg-h-score60:hover, .bg-h-score60.selected  {background-color: #e4ff4d !important}
.bg-score61, .bg-h-score61:hover, .bg-h-score61.selected  {background-color: #e0ff4d !important}
.bg-score62, .bg-h-score62:hover, .bg-h-score62.selected  {background-color: #dcff4d !important}
.bg-score63, .bg-h-score63:hover, .bg-h-score63.selected  {background-color: #d8ff4d !important}
.bg-score64, .bg-h-score64:hover, .bg-h-score64.selected  {background-color: #d6ff4d !important}
.bg-score65, .bg-h-score65:hover, .bg-h-score65.selected  {background-color: #d1ff4d !important}
.bg-score66, .bg-h-score66:hover, .bg-h-score66.selected  {background-color: #ceff4d !important}
.bg-score67, .bg-h-score67:hover, .bg-h-score67.selected  {background-color: #c8ff4d !important}
.bg-score68, .bg-h-score68:hover, .bg-h-score68.selected  {background-color: #c4ff4d !important}
.bg-score69, .bg-h-score69:hover, .bg-h-score69.selected  {background-color: #c0ff4d !important}
.bg-score70, .bg-h-score70:hover, .bg-h-score70.selected  {background-color: #bcff4d !important}
.bg-score71, .bg-h-score71:hover, .bg-h-score71.selected  {background-color: #b6ff4d !important}
.bg-score72, .bg-h-score72:hover, .bg-h-score72.selected  {background-color: #b3ff4d !important}
.bg-score73, .bg-h-score73:hover, .bg-h-score73.selected  {background-color: #aeff4d !important}
.bg-score74, .bg-h-score74:hover, .bg-h-score74.selected  {background-color: #a9ff4d !important}
.bg-score75, .bg-h-score75:hover, .bg-h-score75.selected  {background-color: #a5ff4d !important}
.bg-score76, .bg-h-score76:hover, .bg-h-score76.selected  {background-color: #a1ff4d !important}
.bg-score77, .bg-h-score77:hover, .bg-h-score77.selected  {background-color: #9bff4d !important}
.bg-score78, .bg-h-score78:hover, .bg-h-score78.selected  {background-color: #97ff4d !important}
.bg-score79, .bg-h-score79:hover, .bg-h-score79.selected  {background-color: #93ff4d !important}
.bg-score80, .bg-h-score80:hover, .bg-h-score80.selected  {background-color: #8efd4d !important}
.bg-score81, .bg-h-score81:hover, .bg-h-score81.selected  {background-color: #89fc4d !important}
.bg-score82, .bg-h-score82:hover, .bg-h-score82.selected  {background-color: #87fb4d !important}
.bg-score83, .bg-h-score83:hover, .bg-h-score83.selected  {background-color: #81fa4d !important}
.bg-score84, .bg-h-score84:hover, .bg-h-score84.selected  {background-color: #7ff94d !important}
.bg-score85, .bg-h-score85:hover, .bg-h-score85.selected  {background-color: #7af84d !important}
.bg-score86, .bg-h-score86:hover, .bg-h-score86.selected  {background-color: #76f74d !important}
.bg-score87, .bg-h-score87:hover, .bg-h-score87.selected  {background-color: #71f64d !important}
.bg-score88, .bg-h-score88:hover, .bg-h-score88.selected  {background-color: #6df54d !important}
.bg-score89, .bg-h-score89:hover, .bg-h-score89.selected  {background-color: #69f34d !important}
.bg-score90, .bg-h-score90:hover, .bg-h-score90.selected  {background-color: #66f24d !important}
.bg-score91, .bg-h-score91:hover, .bg-h-score91.selected  {background-color: #63f14d !important}
.bg-score92, .bg-h-score92:hover, .bg-h-score92.selected  {background-color: #60f14d !important}
.bg-score93, .bg-h-score93:hover, .bg-h-score93.selected  {background-color: #5cf04d !important}
.bg-score94, .bg-h-score94:hover, .bg-h-score94.selected  {background-color: #59f04d !important}
.bg-score95, .bg-h-score95:hover, .bg-h-score95.selected  {background-color: #56ef4d !important}
.bg-score96, .bg-h-score96:hover, .bg-h-score96.selected  {background-color: #54ee4d !important}
.bg-score97, .bg-h-score97:hover, .bg-h-score97.selected  {background-color: #51ed4d !important}
.bg-score98, .bg-h-score98:hover, .bg-h-score98.selected  {background-color: #50ee4d !important}
.bg-score99, .bg-h-score99:hover, .bg-h-score99.selected  {background-color: #4eed4d !important}
.bg-score100, .bg-h-score100:hover, .bg-h-score100.selected  {background-color: #3edd3d !important}

.bg-score-grey, .bg-h-score-grey:hover, .bg-h-score-grey.selected  {background-color: #787878 !important}


tr.as-complete td, tr.gl-complete td {background-color: #baffba !important}


.dark-text {color: #3f3f3f !important}

div.twisty {
	display: inline;
	cursor: pointer;
}

div.twisty.open::before {
	padding-right: 4.5px;
	content: "\f078"
}

div.twisty::before {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	padding-right: 8px;
	font-size: 12px;
	content: "\f054"
}

a.button-back {
	position: relative;
	display: block;
	margin: 0;
	padding: 0 40px 0 18px;
	float: right;
	background: #dbdbdb;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	color: #3f3f3f;
}

a.button-back:hover {
	background: #e4e4e4;
	text-decoration: none;
}
a.button-back::after {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	position: absolute;
	top: 0px;
	right: 18px;
	font-size: 22px;
	content: "\f054"
}

.button-link, a.button-link {
	display: block;
	margin: 0 10px 10px 0;
	padding: 8px 15px 8px 15px;
	float: left;
	background-color: #787878;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	color: #fff;
}


.link-container {
    display: block;
    width: 100%;
	clear: both;
	margin-top: 30px;
}

.link-container h5 {
	margin-bottom: 10px;
}


.button-link:hover, .button-link.complete {
	background-color: #b1b1b1;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}
.button-link::before {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	padding-right: 10px;
	content: "\f0da"
}

.button-link.video::before {
	content: "\f03d"
}


div#waiting {
	display: none;
	position: relative;
	width: 48px;
	height: 0px;
	margin: 0 auto;	
	text-align: center;
}

div.waiting-inner {
	position: fixed;
	top: 200px;
	z-index: 9999;
}



/* Frames ***************************************************/

.bp2w-box {
	postion: relative;
	width: 100%;
	border: 1px solid #bfbfbf;
	padding: 0;
	margin-bottom: 20px;
}

.bp2w-columns {
	postion: relative;
	width: 100%;
	xborder: 1px solid #bfbfbf;
	padding: 0;
	margin-bottom: 20px;
}

.bp2w-columns img {
	width: 100%;
	vertical-align: top;
	height: auto;
	padding: 0;
	margin: 0;
}

.col-1-2, .col-2-2 {float: left;}
.col-1-2{width: 55%; padding: 0px 18px 0px 0px}
.col-2-2{width: 45%;}


/* Forms ***************************************************/

div.field-group-container {
	margin-top: 26px;
}

div.field-group-container.tight {
	margin-top: 0px;
}


div.field-group-container.tight {
	margin-top: 1px;
	border: 1px solid #2of;
}


div.field-group {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

div.form-field {
	display: table-row;
	vertical-align: middle;
}

div.form-field.hide, div.form-hide {display: none}
div.form-field.hide.show, div.form-hide.show {display: table-row}

div.form-top-narrative {
	display: table-cell;
	background: #fff;
	border-top: 1px solid #bfbfbf;
	vertical-align: middle;
	text-align: left;
	padding: 5px 20px 5px 20px;
}

div.dialog-label {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
	padding: 0 20px 10px 0;
	min-width: 180px;
	width: 25%;
	font-size: 15px;
	line-height: 19px;
}

div.dialog-input {
	display: table-cell;
	vertical-align: middle;
	padding-bottom: 10px;
}

div.dialog-rule div {
	margin: 0;
	padding: 5px 0;
}

div.dialog-rule div.dialog-label div,
 div.dialog-rule div.dialog-input div {
	margin: 0px;
	height: 1px;
	border-top: 1px solid #bababa;
}

div.radio.horizontal div {float: left}

div.radio label, 
 div.checkbox label {
	margin-right: 12px;
}

/* Horizontal - Table Style*******************************************/

div.form-heading {
	display: table-row;
	background: #bfbfbf;
}

div.field-group.horizontal {width: 1px;}
div.field-group.horizontal.full-width {width: 100%}

div.field-group.horizontal div.dialog-input {border:1px solid #bfbfbf}


div.dialog-heading {
	display: table-cell;
	text-align: left;
	padding: 2px 5px;
}

div.dialog-heading.heading-vertical {
	height: 200px;
	border: 1px solid #ddd;
	background: #575757;
	color: #fff;
	font-weight: 400;
	text-align: left;
	white-space: nowrap;
}

div.dialog-heading.heading-vertical > div {
	transform: translate(0px, 160px) rotate(-90deg);
	width: 32px;
	padding: 0;
	font-size: 14px;
}

div.form-row {
	display: table-row;
}

div.form-row div.dialog-label {
	display: block;
	text-align: left;
}

div.form-row div.dialog-input {
	width: auto;
	padding: 2px 5px;
}

div.dialog-box {
	float: left;
	height: 72px;
	width: auto;
	border: 1px solid #bfbfbf;
	border-radius: 6px;
	background: #fff;
	padding: 10px 18px;
}



div.field-group.horizontal.full-width div.dialog-input textarea,
 div.field-group.horizontal.full-width div.dialog-input input[type="text"] {
	max-width: 900px;
}


table.goal-key {
	width: 100%;
	max-width: 400px;
	
}

table.goal-key td {
	padding: 5px 8px;
	border: 1px solid #bfbfbf;
	vertical-align: middle;
}

table.goal-key tr:first-child {
	background: #f2f2f2; 
}

table.goal-key td:first-child {
	text-align: center;
}

/* Survey Answers ******************************************/

.dialog-question {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	padding: 0px 10px;
	text-align: right;
	color:#333;
	font-weight: 400;
	font-size: 14px;
}

.dialog-question.small-text {
	font-size: 12px;	
}

.dialog-question b {
	font-weight: 600;
}


div.dialog-answers {display: table-cell;}
div.answer-table {display: table; width: 1%; float: right;}
div.answer-table.wide {width: 100%;}
div.answers-row {display: table-row;}
div.form-row.q-row {border-bottom: 1px solid #bfbfbf;}
div.form-row.q-row div.dialog-question {background: #f2f2f2}
div.survey-button {
	margin: 3px;
	width: 26px;
	height: 26px;
	line-height: 24px;
	text-align: center;
	font-size: 12px;
	color: #fff;
	border: 2px solid #aaa;
}
div.survey-button:hover {cursor: pointer}
div.survey-button.selected  {border: 2px solid #444}

/* Inputs *******************************************************/

textarea.answer {
	height: 80px;
}

div.dialog-input textarea {
	height: 100px;
	line-height: 22px;
	width: 95%;
}


div.dialog-input button:hover {
	background: #5c5c5c;
}

div.dialog-input button.save {
	margin-top: 12px;
	float: left;
}

button.small_button , 
 button.delete {
	float: right;
	font-size: 13px;
	padding: 4px 8px;
	background: #787878;
}

button.small_button:hover , 
 button.delete:hover {
	background: #3f3f3f;	
}

div.dialog-input button.delete {
	margin-right: 20px;
}

div.dialog-input button.right {
	float: right;
	font-size: 14px
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  height: 35px;
  font-size: 14px;
  line-height: 35px;
  max-width: 350px;
  width: 100%;
  padding: 0 5px;
  border:1px solid #bfbfbf;
  margin: 0;
}
select {
	cursor: pointer;
}

input.input-date {
	max-width: 120px;
}

input.input-small,
 select.input-small {
	max-width: 60px;
}

input[type="number"] {
	width: auto;
}

input[type="radio"] {
	height: 20px;
  	vertical-align: bottom;
}


/* Admin Tools Progress Bar ***************/

.ui-progressbar {
    position: relative;
}

.progress-label {
    position: absolute;
 	width: 80%;    
 	left: 10%;
 	text-align: center;
 	top: 4px;
    font-weight: 600;
 	color: #3f3f3f;    
}

.tool-message {
	font-weight: 600;
	margin-bottom: 10px;
}

.message-large {
	font-weight: 600;
	font-size: 150%;
	margin-bottom: 10px;
}

/* Welcome pages */

.welcome-delight {
	font-size: 18px;
	font-weight: 600;
	font-style: italic;
	margin-bottom: 18px;
}
ul.welcome {margin-top: 18px; font-size: 16px}

img.welcome-logo {width: 100%; max-width: 450px}

img.welcome-image {float: right; width: 80%; height: auto}

.welcome-team-name {
	margin-top: 18px;
	color: #0073b2;
	font-size: 16px;
	font-weight: 600
}

.welcome-team-name:first-child {
	margin-top: 0px;
}

.welcome-action, .welcome-action-read-only {
	cursor: pointer;
	margin: 8px 18px;
	line-height: 24px;
}


.welcome-action a {text-decoration: none}
.welcome-action:hover, .welcome-action a:hover {cursor: pointer; color: #4dbbe8}

.action-box {padding: 18px; border: 1px solid #bfbfbf; margin-bottom: 18px}
.action-box ol {list-style: decimal; margin-left: 18px;}

.expiry-date {font-size: 90%; float: right;}
.amber {color: #ff7700 !important}

div.tool-tip {
	padding: 0px 2px 5px 5px;
}


/* ******************************************************/
/* *** Charts *******************************************/
/* ******************************************************/


.chart-wrapper {
	display: table;
	width: 100%;
	border: 1px solid #bfbfbf;
}

.chart-wrapper.donut {border: none}

.chart-wrapper-inner {
	display: table-row;
}

.chart-body {
	display: table-cell;
	position: relative;
	width: 75%;
	margin: 0;
	z-index: 9;
}

.chart-body-inner {margin: 30px;}

.chart-wrapper.donut .chart-body-inner {margin: 10px}

div.chart-body svg {
	width: 100%;
	height: auto;
	z-index: 9;
	position: absolute;
	top: 0;
	left: 0;
}

img.svg-space-for-ie {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    xvisibility: hidden;
    z-index: -1;
}

img.chart-background {
	position: absolute;
	top: 12.6%;
	left: 19%;
	width: 62.5%;
	height: auto;
	z-index: 0;
}

img.chart-background.wide {
	position: absolute;
	top: 9px;
	left: 11px;
	width: 97%;
	height: auto;
	z-index: 0;
}

.chart-right {
	display: table-cell;
	width: 280px;
	min-width: 280px;
	text-align: left;
	vertical-align: top;
	background: #f2f2f2;
}

.chart-tooltip {	
	position: absolute;			
	text-align: left;			
	width: auto;
	max-width: 200px;					
	height: auto;					
	padding: 4px 6px;
	font: 12px sans-serif;		
	background: #f6f6f6;	
	border: 1px solid #bfbfbf;		
	xborder-radius: 8px;			
	pointer-events: none;		
	z-index: 999;
	color: #3f3f3f;	
}


div.small-pie {
	width: 72%; 
	margin: 0 auto; 
}

text.tooltip {
	cursor: pointer;
}

.chart-nav {
	max-height: 380px;
	overflow-y:auto; 
}

.chart-nav-desc {
	padding: 10px 20px;
	font-size: 13px;
}

div.chart-nav-head {
	line-height: 32px; 
	background: #ccc;	
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	padding-left: 16px;
}

div.chart-nav table {
	width: 100%
}

div.chart-nav table td {
	border: 1px solid #bfbfbf;
	background: #fff;
	text-align: center;
	font-weight: 600;
	font-size: 12px;
	line-height: 14px;
	padding: 2px 4px;
	vertical-align: middle;
}

div.chart-nav table tr.chart-nav-head td  {
	background-color: #f2f2f2;
	font-size: 10px;
}

div.chart-nav table tr.chart-nav-head td:first-child {
	font-size: 14px;
	vertical-align: top;
	padding-top: 12px;
	padding-bottom: 12px;
	cursor: default;
}

div.chart-nav table tr.chart-nav-head div.sub-head {
	margin-top: 8px;
	font-size: 12px;
	color: #07517d;
}

div.chart-nav table td:first-child {
	width: 70%;
	padding: 2px 4px 2px 8px;
	text-align: left;
	cursor: pointer;
}

/* ******************************************************/
/* *** Dials *******************************************/
/* ******************************************************/


div.dial-wrapper {
	background: #fff;
	float: left;
	width: 30%;
	margin-left: 5%;
	border: 1px solid #bfbfbf;
}

div.dial-wrapper:first-child {margin-left: 0}

div.dial-header {
	background: #bfbfbf;
	line-height: 34px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	padding-left: 18px;
}

div.dial-header-arrow {
	float: right;
	height: 34px;
	background: #f2f2f2;
	color: #575757;
	padding: 0 10px;
}	

div.dial-header-arrow::before {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	font-size: 16px;
	content: "\f0a9"
}

div.dial-body {
	position: relative;
	width: 100%;
}

div.dial-body svg {
	width: 100%;
	height: auto;
	z-index: 9;
	position: absolute;
	top: 0;
	left: 0;
}

div.dial-body img {
    display: block;
    width: 100%;
    height: auto;
    visibility: hidden;
}


div.dial-body svg g.label text {text-anchor:middle;font-size:16px;font-weight:600;fill:#666;}

div.dial-body svg g.pointer {fill: #000000;stroke: #000000;}

div.dial-footer {
	padding: 4% 0 5% 0;
}

div.dial-footer-label {
	margin: 2px auto;
	width: 50px;
	text-align: center;
	border: 1px solid #333;
	border-radius: 5px;
	color: #333;
	font-size: 16px;
	font-weight: 600
}

/* ******************************************************/
/* *** Select Tree **************************************/
/* ******************************************************/

div.tree-container {
	float: left;
	width: 75%;
	background: #fff;
}

div.tree-container-desc {
	float: left;
	width: 25%;
	font-size: 13px;
}

div.select-tree {
	margin: 16px 0;
	float: left;
}

div.tree-item {margin-left:32px;}
div.tree-item.first-item  {margin-left: 0px;}
div.tree-personal-chart {
	margin-bottom: 10px;
	margin-left: 0px;
}

div.tree-item span {padding: 1px 6px}

div.tree-item input {margin: 0 8px}

div.tree-item div.tree-input-invalid {
	font-size: 8px;
	font-weight: 600;
	border: 1px solid #ddd;
	background: #fff;
	color: #f00;
	display: inline;
	margin: 0 8px;
	padding: 0 3px
}

div.tree-item span:hover {
	cursor: pointer;
	background: #ddd;
} 

div.tree-item.open > span .fa-chevron-right {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

/* *******************************************************/
/* *** Pricing *******************************************/
/* *******************************************************/

table.pricing th, table.pricing td {padding: 8px 40px; border: 1px solid #bfbfbf; font-weight: 600}
table.pricing th {background: #ddd;}
table.pricing td {background: #fff;}


/* *******************************************************/
/* *** Reports *******************************************/
/* *******************************************************/

.table-container {
	position: relative;
    overflow-y: auto; 
    overflow-x: hidden; 
    width: 100%;
    height: 100%;
    max-height: 700px;
    color: #3f3f3f;
	background: #fff;
}

table.report {
	box-sizing: border-box;
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
	font-weight: 400;
}

table.report thead {background: #fff}

table.report thead th {
	background: #f2f2f2;
	border-style: solid;
    border-width: 0px;
	border-color: #bfbfbf;
	border-width-top: 1px;
	border-width-bottom: 1px;
}

table.report tbody tr {height: 40px; border-bottom: 1px solid #d3d3d3}
table.report tbody tr.expand {height: 0px}

table.report td {
	display: table-cell;
	vertical-align: middle;
	border: 0px solid #bfbfbf;
	line-height: 16px;
}
table.report thead td.normal {
	vertical-align: bottom; 
	font-size: 14px
}
table.report td.h-head,
 table.report th.h-head  {
	vertical-align: middle;
	color: #3f3f3f;
	padding: 8px 5px 8px 15px;
	background-color: #f2f2f2;
	text-align: left;
	font-size: 14px;
	line-height: 17px;
	border-color: #bfbfbf;
	border-style: solid;
	border-top-width: 2px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
table.report td.h-head:first-child,
 table.report th.h-head:first-child  {
 	border-left-width: 0px;
}


table.report td.h-head.center,
 table.report th.h-head.center  {
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

table.report td.h-head.bottom,
 table.report th.h-head.bottom  {
	vertical-align: bottom;
}

thead td.rotate {
	height: 200px;
	width: 1px;
	white-space: nowrap;
	vertical-align: top; 
	background: #575757;
	color: #fff;
	font-weight: 600;
	border-left: 0px solid #fff;
}
thead td.rotate.small > div {
  	width: 24px;
  	-webkit-transform: 	translate(0px, 170px) rotate(-90deg);
	-moz-transform: 	translate(0px, 170px) rotate(-90deg);
	-ms-transform: 		translate(0px, 170px) rotate(-90deg);
	-o-transform: 		translate(0px, 170px) rotate(-90deg);
	transform: 			translate(0px, 170px) rotate(-90deg);
}
thead td.rotate > div, 
 thead td.rotate.medium > div {
  	width: 30px;
  	-webkit-transform: 	translate(0px, 166px) rotate(-90deg);
	-moz-transform: 	translate(0px, 166px) rotate(-90deg);
	-ms-transform: 		translate(0px, 166px) rotate(-90deg);
	-o-transform: 		translate(0px, 166px) rotate(-90deg);
	transform: 			translate(0px, 166px) rotate(-90deg);
}
thead td.rotate.large > div {
  	width: 44px;
  	-webkit-transform: 	translate(0px, 160px) rotate(-90deg);
	-moz-transform: 	translate(0px, 160px) rotate(-90deg);
	-ms-transform: 		translate(0px, 160px) rotate(-90deg);
	-o-transform: 		translate(0px, 160px) rotate(-90deg);
	transform: 			translate(0px, 160px) rotate(-90deg);
}
thead td.rotate.xlarge > div {
	width: 54px;
  	-webkit-transform: 	translate(0px, 155px) rotate(-90deg);
	-moz-transform: 	translate(0px, 155px) rotate(-90deg);
	-ms-transform: 		translate(0px, 155px) rotate(-90deg);
	-o-transform: 		translate(0px, 155px) rotate(-90deg);
	transform: 			translate(0px, 155px) rotate(-90deg);
}

thead td.rotate.xxlarge > div {
	width: 80px;
  	-webkit-transform: 	translate(0px, 142px) rotate(-90deg);
	-moz-transform: 	translate(0px, 142px) rotate(-90deg);
	-ms-transform: 		translate(0px, 142px) rotate(-90deg);
	-o-transform: 		translate(0px, 142px) rotate(-90deg);
	transform: 			translate(0px, 142px) rotate(-90deg);
}


thead td.link-header {background: #f2f2f2; color: #3f3f3f}

th.tablesorter-header.icon-center {
  background-position: center center !important;
}

th.tablesorter-header.icon-left {
  background-position: center left !important;
}

table.report td.small 	{width: 24px}
table.report td.medium 	{width: 34px}
table.report td.large 	{width: 44px}
table.report td.xlarge 	{width: 54px}

.centre,
 .center {
	text-align: center !important
}
.left {text-align: left; padding-left: 5px !important}
.right {text-align: right; padding-right: 5px !important}

table.report td.data {
	padding: 4px;
	border: 1px solid #bfbfbf;
	color: #3f3f3f;
}

table.report td.data:first-child {
	padding-left: 15px;
	border-left-width: 0px;
}

table.report td.rpt-completions {
	text-align: center;
	border-left: 2px solid #fff;
	border-right: 2px solid #fff
}

table.report td.style0 {
	background: #3f3f3f;
	color: #fff;
	padding-left: 18px;
}

table.report tr td.style1 {
	background: #575757;
	color: #fff;
	padding-left: 18px;
}

table.report tr td.style2 {
	width: 10%;
	text-align: center;
	padding: 0 4px;
}

table.report tr td.style3 {
	width: 15%;
	padding-left: 1%;
	text-align: left;
}

table.report tr td.style4 {
	text-align: left;
	padding-left: 15px;
}

table.report.import-stats th,
 table.report.import-stats td {
 	text-align: left;
 	padding-left: 15px;
 	border: 1px solid #bfbfbf;
}


.rpt-entity-container {float: left; font-size: 14px; font-weight: 600; padding: 4px 0px;}
.rpt-title-entity {font-weight: 600; color: #3f3f3f}
.rpt-entity  {float: left; vertical-align: middle;}
.rpt-leader-owner {float: left; padding-left: 18px; font-size: 12px; font-weight: normal; white-space: nowrap}
.rpt-leader-owner span {padding-left: 4px; font-weight: 600; white-space: nowrap}
.rpt-structure {float: left; clear: left; vertical-align: middle; padding-left: 18px; font-size: 13px; font-weight: normal; font-style: italic}
.rpt-score {text-align: center; font-size: 12px; border: 0px solid #bfbfbf}
.rpt-progress-date {background: #fff; color: #3f3f3f; text-align: right; font-size: 12px}
.rpt-distribution {font-size: 12px; color: #999}
.rpt-small-space {width: 5px !important}
.rpt-label-left {font-size: 14px; font-weight: 600; text-align: left}
.rpt-label-right {font-size: 14px; font-weight: 600; text-align: right; padding-right: 12px;}



.rpt-response-count {font-size: 12px; float: right; font-weight: normal; text-transform: lowercase; white-space: nowrap}
.rpt-head-description {padding: 18px; vertical-align: middle;}
.rpt-head-description2 {padding: 18px; float: right;}  /* For use with rank tabs */
.rpt-heading-spacer {clear: both; height: 30px;}
.rpt-feedback-details {margin: 12px 30px 12px 5px; border-bottom: 1px solid #ddd}
.rpt-anchor {text-align: center; border-right: 1px solid #787878}
.rpt-normal {text-align: left; padding-left: 18px; padding-right: 18px; font-weight: normal;}
.rpt-numeric {text-align: right; padding-right: 8px;}
.rpt-indent1 {padding-left: 25px}
.rpt-indent2 {padding-left: 47px}
.rpt-indent3 {padding-left: 69px}
.rpt-indent4 {padding-left: 81px}
.rpt-indent5 {padding-left: 103px}
.rpt-indent6 {padding-left: 125px}
.rpt-pad-right5 {padding-right: 5px}

.rpt-stats-entity {float: left; font-size: 16px; padding: 0 10px; vertical-align: middle;}


.rpt-link {
	text-decoration: none;
	color: #4f4f4f;
	cursor: pointer;
}

.rpt-link::hover {
	color: #3f3f3f;
}

.rpt-link::before {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	font-size: 16px;
	content: "\f0a9"
}

.rpt-organisation::before {
	font-family: "Font Awesome 5 Free";
	padding-right: 10px;
	font-size: 15px;
	content: "\f015"
}


.goal-met-icon {width: 22px; margin: 0 auto; font-size: 20px; color: #3edd3d;}
.inline-icon {width: 22px; margin: 0 auto; font-size: 20px;}

/* TABS */

div.rpt-tabs {
	margin-left: 18px;
}

div.rpt-tab {
	float: left;
	margin-right: 8px;
	margin-bottom: -1px;
	border: 1px solid #bfbfbf;
	border-radius: 4px 4px 0px 0px;
	background: #dadada;
}

div.rpt-tab a {
	display: block;
	position: relative;
	padding-top: 12px;
	padding-right: 40px;
	padding-bottom: 13px;
	padding-left: 18px;
	font-size: 15px;
	font-weight: 600;
 	text-decoration: none;
 	color: #5c5c5c;
}

div.rpt-tab a::after {
	position: absolute;
	right: 14px;
	top: 12px;
	font-size: 30px;
	font-family: "Font Awesome 5 Free";
	content: "\f0d7";
}

.fa-caret-down::before {content:"\f0d7"}


div.rpt-tab.tab-active {background-color: #f2f2f2; border-bottom: 1px solid #f2f2f2;}


/* Score Key Table *****************/

table.score-key tbody tr {
	border: none;
	font-size: 14px;
}

table.score-key tbody td {
	padding: 0 10px;
	text-align: left;
	padding: 0;
}

/* Inner table *****************/

table.table-style1 {
	background: #fff;
	border: 1px solid #dadada;
	width: 100%;
}

table.table-style1 tbody tr {height: 30px;}

table.table-style1 th,
 table.table-style1 td {
	vertical-align: middle;
	text-align: center;
	border: 1px solid #dadada;
}

table.table-style1 th {font-weight: 600; background: #f2f2f2}

table.table-style1 th:first-child,
 table.table-style1 td:first-child {
 	text-align: left;
	padding-left: 18px;
}

table.table-style1 td.style1 {
	width: 10%
}

/* select2 - Overrides *****************/

.select2 {
	width:100% !important;
  	max-width: 350px;
}
	
div.form-field.wide .select2 {
	max-width: 600px;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #bfbfbf;
    border-radius: 0px;
    padding-top: 3px;
	height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}

ul.select2-results__options li {
	padding-top: 4px;
	padding-bottom: 4px;
	margin-bottom: 2px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #4dbbe8;
    color: white;

}

ul.select2-selection__rendered li.select2-selection__choice {
	clear: both;
}

/* Concern Details *********************/

.concern-key table {
	width: 100%;
	margin-top: 30px; 
}

.concern-key table td {padding: 3px 10px; border: 1px solid #bfbfbf}

.donut-chart-container {
	position: relative;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}


.donut-chart-container svg .slice {cursor: pointer}	

div.concern-key tr {cursor: pointer; font-weight: 600; color: #3f3f3f}
div.concern-key tr td.rpt-score {background: #fff}
div.concern-key tr.hover td.rpt-score {background: #ddd}
div.concern-key tr.heading td {text-align: center; background: #fff}
div.concern-key tr.heading:hover td {background: #ddd}

table.activity-help-table td {padding: 3px 5px}
table.activity-help-table td:first-child {font-weight: 600; white-space: nowrap}
table.activity-help-table h3 {margin: 6px 0 10px 0; padding: 0; color: #0073b2;}


/* Help Videos *********************/


.help-video-wrapper {
	display: table;
}

.help-video-row {
	display: table-row;
}

.help-video-container {
	display: table-cell;
	vertical-align: top;
	padding: 0 5px;
}

div.single-video {
	margin-top: 8px;
}

/* Emails ******************** */

div.example-email-text {
	font-family: Times;
	font-size: 16px;
	background: #f2f2f2;
	color: #333;
	padding: 20px 32px;
}

div.example-email-text ul, div.example-email-text ol {
	margin: 0 0 10px 40px;
	line-height: 20px;
}

div.example-email-text li {
	margin: 0 0 5px 0;
}

div.email-subject {
	xbackground: #fff;
	padding: 10px;
	border: 1px solid #bfbfbf;
	margin: 0 0 10px 0;
}


table.email-template {width: 100%; background: none; border-spacing: 10px; border-collapse: separate;}
table.email-template td {padding: 6px 12px; background: #fff; border: 1px solid #ddd; vertical-align: top}
table.email-template tr td:first-child {min-width: 100px; border: none; background: none; font-weight: 600}

/* jQuery UI CSS - Overrides *********************/


.ui-widget {
	font-family: 'Open Sans', sans-serif;
}

.ui-widget-header {
    border-width: 0px;
}

.ui-widget.ui-widget-content {
    border: 1px solid #fff;
}

.ui-widget-shadow {
	border: 1px solid #fff;
	-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
	box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
}

.ui-dialog {
	padding: 0px;
	position: fixed;
}

.ui-dialog .ui-dialog-title {
	margin: 0;
}

.ui-dialog .ui-dialog-titlebar {
	padding: 0px 32px 1px 21px;
	line-height: 44px;
}

.ui-dialog .ui-dialog-content {
	padding: 0;
}

.ui-dialog-titlebar.ui-widget-header button.ui-button {
	margin-right: 10px;
}

/* Bar Charts *********************/


.bar-chart-wrapper {
	width: 100%;
	overflow-x: auto;
	background: #fff;
	border: 1px solid #ddd;
}

.bar-chart-container {
	overflow-x: visible;
}

.bar-y-axis {
	position: relative;
	width: 60px;
	float: left;
	padding-bottom: 40px;
	margin-right: 1px;
	border-right: 1px solid #999;
	background: #eee;
}

.bar-y-label {
	position: absolute;
	right: 0;
	z-index: 1;
	padding-left: 4px;
	background: #eee;
}
	
	clear: both;
	font-size: 12px;
}

.bar-y-label.top-y {
	padding-top: 2px;
}

.bar-body, .bar-x-label {
	float: left;
	background: #4dbbe8;
	color: #fff;
}

x.bar-body {
-webkit-box-shadow: 4px -4px 0px 2px rgba(0,115,178,1);
-moz-box-shadow: 4px -4px 0px 2px rgba(0,115,178,1);
box-shadow: 4px -4px 0px 2px rgba(0,115,178,1);
}

.bar-body.first-time {
	background: #0073b2
}

.bar-x-axis {
	width: 100%;
	clear: both;
	height: 1px;
	background: #999;
}

.bar-x-label {
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
	line-height: 16px;
	color: #333;
	background: #fff;
}

.bar-inner-label {
	margin-top: 5px;
	text-align: center;
	font-weight: 600;
}

.br-theme-fontawesome-stars .br-widget {
	height: 22px;
	white-space: nowrap;
}
.br-theme-fontawesome-stars .br-widget a {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: 20px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  margin-right: 2px;
}
.br-theme-fontawesome-stars .br-widget a::after {
	content: "\f005";
	color: #d2d2d2;
}
.br-theme-fontawesome-stars .br-widget a.br-active::after {
	color: #EDB867;
}
.br-theme-fontawesome-stars .br-widget a.br-selected::after {
	color: #EDB867;
}
.br-theme-fontawesome-stars .br-widget .br-current-rating {
	display: none;
}
.br-theme-fontawesome-stars .br-readonly a {
	cursor: default;
}


span.arabic {xcolor: #0f0; font-size:180%}
span.arabicQ {xcolor: #00f; font-size:150%}