/*
	This is the primary CSS file for the external site. Please add any new CSS needed here and then
	add overrides in each sitexternal.css for colour changes needed per deployment.
	
	Note that this default CSS also does not use variables for now just in case we need to fall back
	to a fixed CSS file.
*/

/* General */

:root {
	--primary-color-light: #ECF9F1;
	--primary-color: #8CD99F;
	--primary-color-dark: #00664A;

	--secondary-color-light: #F0F0FF;
	--secondary-color: #B3B3FF;
	--secondary-color-dark: #5C20DF;

	--error-color: #a21c24;
	--error-bg:transparent;
	--light-grey: #f5f5fa;
	--light-grey-hover: #e5e5ea;
	--input-focus: #f9f9ff;

	--text-color: #333;
	--body-background:white;
	--header-background:white;
	--header-background-hover:#00000020;
	--header-text-color:#666;
	--header-text-hover:black;
	--footer-background:#f5f5fa;
}

/* Prototyping a dark mode for external pages */
body.display-dark {
	--text-color: #fff;
	--body-background:#333;
	--header-background:#333;
	--header-background-hover:#ffffff20;
	--header-text-color:#eee;
	--header-text-hover:white;
	--footer-background:#222;
}

* {
	font-family: 'Source Sans 3', sans-serif;
}

body.spacing * {
	line-height: 1.5 !important;
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

body {
	background-color: var(--body-background);
	color: var(--text-color);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x:hidden;
}

::placeholder {
	text-transform:uppercase;
	font-size:13px;
	color:#828282;
	font-weight:500;
}

legend {
	padding:5px 0px 5px 5px;
	font-weight:500;
	border-bottom:1px dotted #ccc;
}

label > p,
label {
	font-size:1.1em;
}

/*h1.lefth1,*/
h1 {
	font-weight:500;
	font-size:36px;
	margin:10px 0 20px 0;
}
h1 .feather,
h1 .glyphicon {
	font-size:0.8em;
}

h2 {
    font-weight: 500;
    font-size:30px;
}

h3 {
    font-weight: 500;
    font-size:24px;
}

h4 {
    font-weight: 500;
    font-size: 20px;
}

hr {
	border-top:1px dotted #bbb;
}

.assessment-panel h1 {
	font-size: 24px;
}

a,p,
.export-td span {
	font-size: 20px;
}

.html-label a, .html-label p, .html-label li {
	font-size: 20px;
}

a {
	color:var(--secondary-color-dark);
}
a:focus,
a:hover {
	color:black;
}
a[disabled="disabled"] {
	opacity:0.5;
	text-decoration:none;
}

.help-block p, .help-block ul {
    margin-bottom:0;
    font-size:1.0em;
    font-style:italic;    
}

dl,
dd {
	font-size:18px;
}

.long-text {
	display:inline-block;
}
.short-text {
	display:none;
}

/* Buttons */

/* Google font used has baseline-bug, need to apply more padding above
   to center texts in buttons (also problem in th,td). */
.btn {
	padding: 6px 16px 6px 16px;
	font-size:14px;
	box-shadow:none;
	text-shadow:none;
	border-radius:4px;
	text-transform:uppercase;
	white-space: normal;
}

.btn-lg {
	padding: 10px 16px;
    font-size:20px;
}

.btn-sm {
	padding: 5px 10px 3px 10px;
}

.btn-180 {
	width:180px;
	margin-bottom:5px;	
}

.btn-300 {
	width:300px;
	margin-bottom:5px;	
}

.btn-big {
	font-size:28px;
	padding:10px 10px 5px 10px;
}

.btn p {
	display:inline-block;
	font-size:16px;
	margin:0;
}

.btn-sm,
.btn-sm p {
	font-size:12px;
}

a.btn:not([href]) {
	background:#e0e0e0;
	cursor:not-allowed;
	box-shadow: none;
	background-image: none;
	opacity: .65;
	pointer-events: none;
	text-shadow:none;
	color:#888;
}

.btn[disabled],
.btn-default[disabled],
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
a.btn-primary:not([href]) {
	color:#00000080;
	border:1px solid #00000040;
	text-shadow:none;
	font-weight: normal;
}

.btn .feather {
	margin-right:5px;
}

.btn-default {
	background:transparent;
	color:#333;
	border:1px solid #00000040;	
	transition: background 0.3s ease;
}

.btn-default:hover,
.btn-default:active,
.btn-default:focus {
    background:#00000020;
	color:black;
	border:1px solid #00000080;	
}

.btn-primary:active, 
.btn-primary.active,
.btn-primary {
	background:var(--primary-color);
	color:#333;
	border:1px solid transparent;	
	box-shadow:none;
	font-weight:600;
	text-transform:uppercase;
	text-shadow:none;
	transition: background 0.3s ease;
}
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.btn-primary:hover,
.btn-primary:focus
{
	background:var(--primary-color-dark);
	color:white;
	border:1px solid var(--primary-color-dark);
	cursor:pointer;
}
.btn-primary[disabled]:hover,
.btn-primary[disabled]:active,
.btn-primary[disabled] {
	background:#ddd;
	color:#00000080;
	border:1px solid #00000040;
	cursor:default;
	font-weight: normal;
}
/*
.btn-primary.btn-big:active,
.btn-primary.btn-big.active {
	background:var(--primary-color-dark);
	border:1px solid var(--primary-color);
}
*/

.btn-danger:active, 
.btn-danger.active,
.btn-danger {
	background:var(--error-color);
	color:white;
	border:1px solid var(--error-color);
	box-shadow:none;
	font-size:14px;
	font-weight:600;
	text-transform:uppercase;
	text-shadow:none;
	transition: background 0.3s ease;
}
.btn-danger.active:hover,
.btn-danger.active:focus,
.btn-danger.active.focus,
.btn-danger:hover,
.btn-danger:focus
{
	background:var(--error-bg);
	color:var(--error-color);
	border:1px solid var(--error-color);
	cursor:pointer;
}

.btn-big {
	padding:20px 45px;
	min-height:64px;
	font-size:16px !important;
	border-radius:100px;
}

.bigbuttons .btn {
	background:#E9F7EF;
	color:#333;
	width:100%;
	height:120px;
	font-size:1.4em;
	border-radius:0;
	margin-bottom:20px;
	position:relative;
	border-radius:6px;
}

.bigbuttons .btn:hover {
	background:#6FCF97;
}
.bigbuttons .btn:hover i {
	color:#333;
}
.bigbuttons .badge {
	background:#405060;
	color:white;
}
.bigbuttons .btn h1 {
	font-size:1.6em;
	margin:0;
	padding:0;
	margin-top:22px;
}
.bigbuttons .btn i {
	color:#aaa;
	position:absolute;
	left:15px;
	top:30px;
	font-size:3em;
}
.bigbuttons .btn p {
	color:#405060;
	position:absolute;
	bottom:10px;
	left:0;
	right:0;
}

.input-group input {
	font-size:16px;
}
.input-group .btn {
	height:34px;
}

/* Big close button used on some dialog boxes */
.btn-circle {
	border-radius:50%;
	width:2em;
	height:2em;
	background:#E4E4E7;
	text-align:center;
	font-size:1.5em;
	padding:0;	
	border:0;	
}
.btn-circle:hover {
	background:#c4c4c7;
}
.btn-circle .feather {
	margin:0;
}
.top-right {
	position:absolute;
	top:15px;
	right:15px;
}

.formtable .btn-icon {
	background:transparent;
	text-decoration:none;
	border-radius:5px;
	padding:2px;
}
.formtable .btn-icon:hover {
	background:#00000020;
}
.spreadsheet tbody td .btn-icon {
	margin-top:6px !important;
}

/* Panels */

.panel-group .panel-heading h4 {
	display:block;
	max-width:100%;
}
.panel-group .panel-heading h4 a {
	display:block;
	text-decoration:none;
}
.panel-group .panel-heading h4 a:hover {
	text-decoration:none;
	color:#333
}
.panel-group .panel-heading:hover {
	cursor:pointer;
	background:var(--primary-color-light);
}
.panel-group .panel-heading.collapsed {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.panel-group a.panel-heading {
	display:block;
	text-decoration:none;
}

.panel-group .panel + .panel {
	margin-top:12px;
}

.panel-heading h1 {
	font-size:16px;
	font-weight:bold;
	margin:0;	
	padding-top:10px;
	display:inline-block;
}
.panel-heading .panel-icon {
	vertical-align:top;
	font-size:22px;
	padding-top:2px;
}
.panel-heading .toolbar {
	float:right;
	width:auto;
	height:auto;
}
.panel-heading .toolbar h4 {
	font-size: 1.2em;
	margin-top: 5px;
}
.panel-heading .toolbar .toolbarblock:last-child {
	margin-right:0;
}
.panel-heading .toolbar .toolbarblock {
	padding-bottom:0px;
}

.panel {
	box-shadow:none;
}

.panel-heading + .panel-collapse .panel-body, 
.panel-heading + .panel-body {
	border-top:0 !important;
	border-top-left-radius:0px;
	border-top-right-radius:0px;
}

.panel-body {
	border:1px solid #eee;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}

.panel-heading {
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	padding:6px 15px;
}

.panel-heading span + h4 {
	padding-top:4px;
}

.panel-heading h4 {
	display:inline-block;	
	margin:0;
	font-size:20px;
	font-weight:500;
	max-width:470px;	
}

.panel-default {
	border:0;	
}
.panel-default > .panel-heading {
	background:var(--light-grey);
    color:#333;
    border:0;
}
.panel-default .panel-heading .panel-icon {
	color:#333;
}

.panel-primary {
	border:0;	
}
.panel-primary .panel-heading {
	background:var(--primary-color-light);
	color:#333;
	border-bottom: 0;
}
.panel-primary .panel-heading .panel-icon {
	color:#333;
}


/* Toolbars */

.toolbar .toolbarblock {
	padding-bottom:15px;
}
.toolbar .toolbarblock.checkboxes {
	padding-top:5px;
}
.toolbar .checkbox-inline {
	margin-right:10px;
	font-size:18px;
}

.hide-label label {
	display:none !important;
}

.toolbar .toolbarblock.search.inline .has-feedback {	
	float:left;
}

.toolbar .input-group input {
	border-right:none;
}
.toolbar .input-group-addon {
	background:white;
	border-color:#BFBFBF;
	border-left:none;
}
.toolbar .form-control {
	padding:2px 16px;
	box-shadow:none;
}

.panel-heading .toolbar .toolbarblock {
	min-height:auto !important;
}


/* Tables */

.table {
	border-collapse:separate; 
    border-spacing:0 8px; 	
}

table.formtable th,
.table th {
	background:transparent;
	color:#666;
	text-transform:uppercase;
	font-size:14px;
	font-weight:600;
	border-bottom:1px solid #00000020 !important;
	padding:6px 20px 6px 6px !important;
}
table.spreadsheet th {
	padding:6px 6px 6px 6px !important;
}

.wicket_orderUp,
.wicket_orderDown {
	background-position: right 6px bottom 16px !important;
}

.table td.datetime div {
	width:130px;
}
.table td.status div {
	width:140px;
}

.formtable th span,
.table th span {
	font-size:14px;	
}

.formtable th a,
.table th a {
	text-decoration:none;
	font-size:16px;
	color:#666;
}
.table th a:hover {
	color:#219653;
}
.table tbody td {
	background:var(--primary-color-light);
	color:#333;
	font-weight:600;
	font-size:1em;
	border:none !important;
	padding:10px 15px;
	transition:background 0.3s ease;
}

.table tbody td:last-child {
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}

.linkid tbody td:nth-child(2),
.table tbody td:first-child {
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}

.noidcolumn tbody td:nth-child(2) {
	border-top-left-radius:0 !important;
	border-bottom-left-radius:0 !important;
}

.table tfoot td {
	font-size: 18px;
}

.clicktable tbody tr:hover,
.linkid tbody tr:hover,
.clicktable tbody tr:hover td,
.linkid tbody tr:hover td {
	background:var(--primary-color);
	color:black;
	cursor:pointer;
}

.linkid tbody td,
.clicktable tbody td {
	cursor:pointer;
}

.table tfoot td {
	border-top:0 !important;
}

.norecords-tr {
	font-size:18px;
	font-style:italic;
}
.norecords-td {
	color:#888;
	text-align:center;	
}

th.actionheader {
	width:1%;
}

.hideColumn {
	display:none;
}

.navigation {
	font-size:18px;
}
.navigation a {
	display:inline-block;
	padding: 0px 10px 0 10px;
	border-radius:4px;
	color:var(--primary-color-dark);
}
.navigation a:focus,
.navigation a:active,
.navigation a:hover {
	background:var(--light-grey);
	text-decoration: none;
}
.navigation a[disabled="disabled"] {
	color:var(--light-grey);
	opacity:1;
}
.navigation a[disabled="disabled"]:hover {
	background:transparent;
}
.navigation .goto a[disabled="disabled"] {
	background:var(--primary-color-dark);
	color:white;
	opacity:1;
}
.navigatorLabel {
	float:left;
}
.navigator {
	float:right;
}

.field-group-tile-wrapper .delete-tile {
	top:3px;
	padding:0px 4px 0px 7px;
	background:#00000020;
}

.field-group-tile-wrapper .delete-tile a:hover {
	text-decoration: none;
}

/* Modal dialogs */

.modal-header {
	background:var(--primary-color-dark);
	color:white;
	text-shadow:none;
	border-top-left-radius:4px;
	border-top-right-radius:4px;	
}
.modal-header h4 {
	font-size:20px;
}
.modal-content {
	border:0;
}


/* TinyMCE styling */

.mceEditor.focused table.mceLayout {
  border-color: var(--primary-color) !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 1, 27, .3);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 1, 27, .3) !important;
}

.defaultSkin .mceButton {
	width:28px !important;
	height:28px !important;
	padding: 3px !important;
	margin-bottom:1px !important;
	border-radius:6px;
}

.defaultSkin .mceSplitButton a.mceOpen,
.defaultSkin .mceListBox .mceOpen {
	height:28px !important;
	width:16px !important;
    background-position-y: 3px !important;
    background-position-x: -738px !important;
    border-top-right-radius:4px;    
    border-bottom-right-radius:4px;    
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	border: 1px solid #ccc;
}

.defaultSkin .mceSplitButton .mceFirst a {
	width:28px !important;
	height:28px !important;
	padding: 3px !important;
	margin-bottom:1px !important;
    border-top-left-radius:4px;    
    border-bottom-left-radius:4px;
}

.defaultSkin .mceFirst > .mceText {
	padding-top:4px !important;
	width:80px !important;
	height:28px !important;
    border-top-left-radius:4px;    
    border-bottom-left-radius:4px;
}


/* Main layout */

.maincontent {
	padding-top:25px;
	margin-left:250px;
	min-height:650px;
}

.maincontent.fluid-container {
	margin-left:70px;
	margin-right:70px;
}
footer {
	background:var(--footer-background);
	color:var(--text-color);
	display:block;
	width:100vw;
	margin-top:auto;
	padding:15px;
	font-size:18px;
	z-index: 1;
}

footer .version,
footer .version a,
footer .pageclass {
	font-size:14px;
	color:#00000080;
}
footer .version {
	text-align:right;
	line-height:1.1em;
}
footer .version a:hover {
	color:black;
}

.navbar-hamburger {
	display:none;
}

.mainbar {
	background-color:var(--header-background);
	color:var(--header-text-color);
	height:100px;
	padding:0;
	margin:0;
	z-index:10;
	position: fixed;
    right: 0;
    left: 0;
	top: 0;
    border-radius: 0;
    border-width:0;
	border-bottom:1px solid #E0E0E0;
}

.mainbar.expanded {
	background: rgb(240,240,240);
	background: linear-gradient(0deg, rgba(210,210,210,1) 0%, rgba(255,255,255,1) 100%);
	height:100%;
}

.topbar {
	background-color:transparent;
	color:var(--header-text-color);
	display: flex;
	position:fixed;
	top:0px;
	z-index:12;
	right:20px;
	height:100px;
	margin-bottom:0;
	align-items: center;
}

.topbar-menu.expanded {
	display:none;
}

.navbar-header {
	display:flex;
	align-items: center;
	height:100%;
	margin-left:25px;
}
.navbar-brand {
	display:block;
	height:auto;
	padding:0;
}
.navbar-brand:focus-visible {
	outline-offset: 5px;
}
.logodiv img {
	height:70px;
}

.navbar-block {
	margin:0 15px 0 15px;
}

.navbar-ui-control {
	font-size:18px;
}

.apptitle {	
	position:absolute;
    top:0;
    right:0;
    width:auto;
    font-size:1.5em;
    margin:0;
	padding:2px 10px;
	border-bottom-left-radius: 10px;
	color:white;
	background:#a94442
}

.navbar-block button.dropdown-toggle:focus-visible {
	outline:2px solid black;
}

.langbar-block {
	font-size:20px;
}
.langbar-block button {
	border:0;
	background:transparent;
	border-radius:15px;
}
.langbar-block button:hover {
	background:var(--header-background-hover);
	color:var(--header-text-hover);
}
.langbar-block button i {
	position: relative;
	top: -2px;
}

.profileblock {
	margin-top:0px;
	text-align:right;
}
.profileblock .dropdown-toggle {
	font-size: 20px;
}
.profileblock .dropdown-toggle .feather {
	font-size:22px;
}
.profileblock .dropdown-menu a {
	color:#333;
	font-size:18px;
	padding:2px 16px 2px 16px;
	margin-left:-10px;	
	margin-right:-10px;	
}
.profileblock a .feather,
.profileblock a .glyphicon {
	margin-right:5px;
}
.profileblock li {
	padding:0 10px;
	color:#102030;	
}
.profileblock li.info {
	color:#666;
	text-align:center;
}

.user-dropdown {
	background:transparent;
	border:none;
	max-width:350px;
	border-radius:15px;
}
.user-dropdown:hover {
	background:var(--header-background-hover);
	color:var(--header-text-hover);
}
.btn-group.open .user-dropdown {
	box-shadow:none;
	background:transparent;
	color:#666;
}

.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus {
	background:#d3d6d9;
	color:black;
}

.bottomseparator {
	border-bottom:1px solid rgba(0,1,39,.1);
	margin-bottom:30px;
}

.menubutton {
	border:0;
	background:transparent;
	position:fixed;
	top:22px;
	right:15px;
	cursor:pointer;
	color:#666;
	padding:10px;
	display:none;
	z-index: 2000;
}
.menubutton::after {
	font-family:'Feather';
	content: "\e88f";
	display: inline-block;
	margin:0 3px;
	font-size:3rem;
}
.menubutton:hover {
	color:black;
}


/* Left header that comes out when scrolling */
/*
h1.lefth1 {
	display:none;
}
*/

h1.fadedown {
	position: fixed;
    top: 120px;
    left: 20px;
    z-index: 2;
    display:inline-block;
    font-size: 26px !important;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-animation: fadedown .3s ease-out both;
    animation: fadedown .3s ease-out both;
}
@-webkit-keyframes fadedown {
	0% { opacity:0;top:120px; }
	100% { opacity:1;top:90px; }
}
@keyframes fadedown {
	0% { opacity:0;top:120px; }
	100% { opacity:1;top:90px; }
}

h1.fadeup {
	position: fixed;
    top: 120px;
    left: 20px;
    z-index: 2;
    display:inline-block;
    font-size: 26px !important;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-animation: fadeup .3s ease-out both;
    animation: fadeup .3s ease-out both;
}
@-webkit-keyframes fadeup {
	0% { opacity:1;top:90px; }
	100% { opacity:0;top:120px; }
}
@keyframes fadeup {
	0% { opacity:1;top:90px; }
	100% { opacity:0;top:120px; }
}


/* Program info box */

.program-info {
	position:relative;
	min-height:80px;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
}
.program-info h1 {
	margin-top:0;
	font-size:20px;
}
.program-info p {
	font-size:16px;
}
.program-info p:last-child {
	margin-bottom:0;
}
.program-info .alert {
	font-size:18px;
	margin-bottom:0;
	text-align:center;
}


/* All alerts use Bootstrap 4 colours that have WCAG compliant contrast */
.alert {
	box-shadow:none;
	text-shadow:none;
	border: 1px solid transparent;
    border-radius: .25rem;
}
.alert-info {
	color:#004085;
	/*
	background:#cce5ff;
	border-color:#b8daff;
	*/	
    background:transparent;
    border:2px solid #004085;
    border-radius:8px;
}
.alert-info a {
	color:#004085;
	font-weight:bold;	
}
.alert-info a:hover {
	color:#004085;
}
.alert-danger {
	color:var(--error-color);
    background:var(--error-bg);
    border:2px solid var(--error-color);
    border-radius:8px;
}
.alert-danger a {
	color:var(--error-color);
	font-weight:bold;	
}
.alert-success {
	color:#155724;
    background:transparent;
    border:2px solid #155724;
    border-radius:8px;    
}
.alert-success a {
	color:#155724;
	font-weight:bold;	
}
.alert-warning {
	color:#856404;
    background:transparent;
    border:2px solid #856404;
    border-radius:8px;    
}
.alert-warning a {
	color:#856404;
	font-weight:bold;	
}
.alert-danger-span {
	color:var(--error-color);
}


p.bg-danger {
	font-size: 16px;
	padding: 5px 10px 5px 35px;
	margin: 0;
	margin-top:10px;
	color:#800;
	position:relative;
	min-height:30px;
	border-radius:4px;
	border:1px solid #800;
}
p.bg-danger::before {
	position:absolute;
	top:2px;
	left:10px;
	content:"\e101";
	font-family: 'Glyphicons Halflings';
	font-style: normal;
    font-weight: 400;
	font-size:20px;
	color:#800;	
}

p.bg-success {
    font-size: 16px;
	padding: 5px 10px 5px 35px;
    margin: 0;
	margin-top:10px;
    color:#080;
    position:relative;
	min-height:30px;
	border-radius:4px;
	border:1px solid #080;
}
p.bg-success::before {
	position:absolute;
	top:2px;
	left:10px;
	content:"\e013";
	font-family: 'Glyphicons Halflings';
	font-style: normal;
    font-weight: 400;
	font-size:20px;
	color:#080;	
}

p.bg-info {
    font-size: 16px;
	padding: 5px 10px 5px 35px;
    margin: 0;
	margin-top:10px;
    color:#008;
    position:relative;
	min-height:30px;
	border-radius:4px;
	border:1px solid #008;
}
p.bg-info::before {
	position:absolute;
	top:2px;
	left:10px;
	content:"\e086";
	font-family: 'Glyphicons Halflings';
	font-style: normal;
    font-weight: 400;
	font-size:20px;
	color:#008;	
}


/* Select2 filter dropdown */

.select2-container .select2-choice {
	color: #555;
	background:white;
	border: 1px solid #ccc;
	height: 34px;
	padding: 3px 0 0 12px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);	
}
.select2-container .select2-choice abbr {
	right:30px;
	top:10px;
}
.select2-container .select2-choice div {
	width:24px;
	border-left:1px solid transparent;
	background:transparent;
}
.select2-container .select2-choice div b {
	background-position:3px 4px;
}
.select2-search input {
	border-radius: 4px;
	border: 1px solid #ccc;
    background: url(/wicket/resource/com.vaynberg.wicket.select2.ApplicationSettings/res/select2.png) no-repeat 100% -22px, 
    		    -webkit-gradient(linear, left bottom, left top, 
    		    color-stop(0.85, white), color-stop(0.99, #eeeeee));
}
.select2-drop {
	border: 1px solid #ccc;
	border-top:0;
}


/* Dropdown used for templates in messages */
/* Not used yet for external pages, but if enabled we need to style them */

.ddblock {
	position: relative;
    display: inline-block;    
}
.ddcontent {
    background-color: #f9f9f9;
    padding:0;
}
.ddcontent .template {
	display:block;
	height:30px;
}
.ddcontent .template > span {
	max-width:300px;
	float:left;
	clear:both;
	display:inline-block;
	white-space: nowrap;
	text-overflow:ellipsis;
	color: black;
    padding: 5px 0px 5px 25px;
    text-decoration: none;
	background-image:url(../images/file.png);
	background-repeat:no-repeat;
	background-position:4px 5px;
}
.ddcontent .template:hover {
	background-color: #e0e0e0;
}
.ddcontent .template .templatelanguages {
	float:right;
	display:block;		
}
.ddcontent .template .templatelanguages a {
	padding: 5px 5px 5px 5px;
	display:inline-block;
	text-align:center;
	text-decoration: none;
}
.ddcontent .template .templatelanguages a:hover {
	background:#d0d0d0;
}
.ddcontent .template .templatelanguages a.disabled,
.ddcontent .template .templatelanguages a:not([href]) {
	opacity:0.2 !important;
	color:black;
}
.ddcontent .folder {
    color: black;
    padding: 5px 0px 5px 25px;
    text-decoration: none;
    display: block;
	background-image:url(../images/file.png);
	background-repeat:no-repeat;
	background-position:4px 5px;
	background-image:url(../images/folder.png);
	background-repeat:no-repeat;
}
.ddcontent .folder:focus {
	outline:none;
}
.ddcontent .folder.open {
	background-image:url(../images/folder-open.png);
}
.ddcontent .folder:hover {
	background-color:#e0e0e0;
}
.ddcontent .ddheader {
	padding:3px 4px;
	vertical-align:middle;
	background-image: -webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);
    background-image: -o-linear-gradient(top,#337ab7 0,#2e6da4 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));
    background-image: linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
    background-repeat: repeat-x;
    border-top-left-radius:4px;	
    border-top-right-radius:4px;
    color:white;
}
.ddcontent .ddheader .langfilter.selected {
	background:#333;
}

.ddcontentinner {
	max-height:350px;
	overflow-y:scroll;
}


/* Course Plan */

.course-plan fieldset legend {
	padding: 6px 0px 2px 5px;
	margin-left:-5px;
	font-weight: bold;
	border-bottom: 1px solid #E0E0E0;
	margin-bottom:4px;
	color:#777; 
}
.course-plan fieldset div {
	font-size: 20px;
	margin-bottom:15px;
}
.course-plan dt {
	clear:both;
	display:block;
	width:250px;
	margin-right:15px;
	text-align:right;
	float:left;
	color:#666;
	padding:0;
	min-height:26px;
}
.course-dl dd {
	min-width:1px;
	min-height:26px;
	margin-left:250px;
}
.course-dl dd ul {
	margin:0;
}
.course-plan-topinfo {
	font-size:20px;
	color:#666;
	margin-bottom:10px;
}
.course-plan-topinfo .feather,
.course-plan-topinfo .glyphicon {
	margin-right:10px;
	font-size:16px;
}


/* Status bullets */

.icon-bullet {
	background:transparent;
	color:black;
	font-size:16px;
	border-radius:50%;
	display:inline-block;
	text-align:center;
	padding:6px 5px 5px 5px;
	margin-right:8px;
	margin-bottom:-3px;
	margin-top:-7px;
	border:1px solid transparent;
}
.table tbody tr:hover .icon-bullet {
	border:1px solid #00000040;
}
.icon-bullet:before {
	margin-left:1px;
}

.status-Draft { background:#d3d6d9; }
.status-Draft:before { content: "\e866"; }
.status-Granted { background:#6FCF97; }
.status-Granted:before { content: "\e83f"; }
.status-Reopened { background:#F2C94C; }
.status-Reopened:before { content: "\e866"; }
.status-Open { background:#F2C94C; }
.status-Open:before { content: "\e86a"; }
.status-New { background:#F2C94C; }
.status-New:before { content: "\e829"; }
.status-Rejected { background:#EB5757; }
.status-Rejected:before { content: "\e8f6"; }
.status-Dismissed { background:#EB5757; }
.status-Dismissed:before { content: "\e8f6"; }
.status-Closed { background:#aacdf4; }
.status-Closed:before { content: "\e887"; }
.status-Cancelled { background:#EB5757; }
.status-Cancelled:before { content: "\e8f6"; }
.status-Deleted { background:#EB5757; }
.status-Deleted:before { content: "\e8f6"; }

.recommendation-Yes { background:#6FCF97; }
.recommendation-Yes:before { content: "\e8d6"; }
.recommendation-No { background:#EB5757; }
.recommendation-No:before { content: "\e8d7"; }
.recommendation-Unsure { background:#F2C94C; }
.recommendation-Unsure:before { content: "\e903"; }

.docstatus-Draft { background: #F2C94C; }
.docstatus-Submitted { background: #6FCF97; }
.docstatus-Deleted { background: #EB5757; }

.pdficontable td.actionheader a {
	margin-top:-5px;
	margin-bottom:-4px;
} 

/* System Messages */

ul.systemmessages {
	padding:0;
	list-style: none;
}
ul.systemmessages li {
	position:relative;
	border-top:1px solid #00000020;
	margin:5px 0;
	padding-top:5px;
}
ul.systemmessages li:first-child {
	border-top:0;
	margin-top:0;
	padding-top:0;
}
ul.systemmessages li p:empty {
	display:none;
}
ul.systemmessages li span {
	font-weight:bold;
	display:block;
	font-size:12px;
	opacity:0.5;
	margin-right:10px;
}
ul.systemmessages li div {
	padding-left:50px;
}
ul.systemmessages li p {
	margin:0;
    width:100%;
}
ul.systemmessages li.information:before {
	display:block;
	content: "\e086";
    font-family: 'Glyphicons Halflings';
    position: absolute;
    font-size: 30px;
	left:5px;
    top:10px;
}
ul.systemmessages li.maintenance:before {
	display:block;
	content: "\e101";
    font-family: 'Glyphicons Halflings';
    position: absolute;
    font-size: 30px;
	left:5px;
    top:10px;
}


/* Expert Panel wizard steps */

.wizardstep {
	color:black;
	padding:10px 0;
	font-size:1em;
}
.panel-warning .wizardstep {
	color:black;
}
.wizardstep .radio-inline {
	margin-left:30px;
	display:block;
	clear:both;
	margin-bottom:5px;
	font-size:1.2em;
}
.wizardstep div p {
	font-size:1.2em;
	margin-bottom:10px !important;
}
.wizard-info {
	text-align:center;
	padding:28px 0;
	font-size:1.2em;
}
.wizardstep a:not(.btn) {
	color:#33a;
}

.panel-html .html .document-title {
	display:block;
}
.document-title dl,
.document-title dd,
.document-title dt {
	font-size:14px;
}


/* Home page */

.home-warning {	
	width:100%;
}
.home-welcome {
	/*border:2px solid #6FCF97;
	padding:15px;
	 */
}
.home-welcome h2 {
	margin-top:0;
}
.home-welcome img {
	max-width:35%;
	float:left;
	margin-right:15px;
}
.home-separator {
	border-bottom:2px solid var(--primary-color);
	padding-bottom:15px;
}

.noneInfo {
	font-style: italic;
	color:#888;
	margin-left:15px;
}


/* Miscellaneous */

.ql-container,
.form-control {
	font-size:1.1em;
	color:#333;
}

.select2-container.select2-container-active .select2-choice,
.form-control:focus,
.ql-container.focus {
	border-color: var(--primary-color);
	outline: 0;
	box-shadow:0 0 3px var(--primary-color-dark);
	background:var(--input-focus);
}
.ql-toolbar.focus {
    border-top-color: var(--primary-color-dark);
    border-left-color: var(--primary-color-dark);
    border-right-color: var(--primary-color-dark);
}

.select2-drop {
	border-color: #000127 !important;
}

textarea.form-control {
	padding:6px 12px 6px 12px;
}

.excel-export::before {	
	font-family: 'feather';
	content: "\e864";	
	display: inline-block;
	margin:0 3px;		
}

#wicketDebugLink {
	display:none
}

.background-glyph {
	position:absolute;
	top:15px;
	right:15px;
	font-size:4em !important;
	opacity:0.1;
}

.dl-tile {
    background: #f3f3f3;
}

.dd-font dd p {
	font-size:16px;	
}

.collapse-all {
	width:34px;
	height:34px;
	padding:0px !important;
	font-size:1.4em;
	text-align: center;
}
.collapse-all .feather {
	margin-right:0;
}

.atab-button.sectionerror .erroricon {
	margin-top:1px;
	margin-right: 0px;
}
.atab-button.btn-default.sectionerror {
    background-image: linear-gradient(to bottom, #fff 0%, #edcbcb 100%);
    border-color:#ecc6c6;
}

.filter-group {
	width:250px;
	float:left;
}


/* Feather icon font */
/* This is used on the external sites in some places. 
   We need to generalize a common set of icon classes to avoid glyphicon, feather etc. */

@font-face {
	font-family: "feather";
	font-display:block;
	src: url('../fonts/feather.eot?t=1525787366991'); /* IE9*/
	src: url('../fonts/feather.eot?t=1525787366991#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/feather.woff?t=1525787366991') format('woff'), /* chrome, firefox */
		url('../fonts/feather.ttf?t=1525787366991') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
		url('../fonts/feather.svg?t=1525787366991#feather') format('svg'); /* iOS 4.1- */
}

.feather {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'feather' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-alert-octagon:before { content: "\e81b"; }
.icon-alert-circle:before { content: "\e81c"; }
.icon-activity:before { content: "\e81d"; }
.icon-alert-triangle:before { content: "\e81e"; }
.icon-align-center:before { content: "\e81f"; }
.icon-airplay:before { content: "\e820"; }
.icon-align-justify:before { content: "\e821"; }
.icon-align-left:before { content: "\e822"; }
.icon-align-right:before { content: "\e823"; }
.icon-arrow-down-left:before { content: "\e824"; }
.icon-arrow-down-right:before { content: "\e825"; }
.icon-anchor:before { content: "\e826"; }
.icon-aperture:before { content: "\e827"; }
.icon-arrow-left:before { content: "\e828"; }
.icon-arrow-right:before { content: "\e829"; }
.icon-arrow-down:before { content: "\e82a"; }
.icon-arrow-up-left:before { content: "\e82b"; }
.icon-arrow-up-right:before { content: "\e82c"; }
.icon-arrow-up:before { content: "\e82d"; }
.icon-award:before { content: "\e82e"; }
.icon-bar-chart:before { content: "\e82f"; }
.icon-at-sign:before { content: "\e830"; }
.icon-bar-chart-2:before { content: "\e831"; }
.icon-battery-charging:before { content: "\e832"; }
.icon-bell-off:before { content: "\e833"; }
.icon-battery:before { content: "\e834"; }
.icon-bluetooth:before { content: "\e835"; }
.icon-bell:before { content: "\e836"; }
.icon-book:before { content: "\e837"; }
.icon-briefcase:before { content: "\e838"; }
.icon-camera-off:before { content: "\e839"; }
.icon-calendar:before { content: "\e83a"; }
.icon-bookmark:before { content: "\e83b"; }
.icon-box:before { content: "\e83c"; }
.icon-camera:before { content: "\e83d"; }
.icon-check-circle:before { content: "\e83e"; }
.icon-check:before { content: "\e83f"; }
.icon-check-square:before { content: "\e840"; }
.icon-cast:before { content: "\e841"; }
.icon-chevron-down:before { content: "\e842"; }
.icon-chevron-left:before { content: "\e843"; }
.icon-chevron-right:before { content: "\e844"; }
.icon-chevron-up:before { content: "\e845"; }
.icon-chevrons-down:before { content: "\e846"; }
.icon-chevrons-right:before { content: "\e847"; }
.icon-chevrons-up:before { content: "\e848"; }
.icon-chevrons-left:before { content: "\e849"; }
.icon-circle:before { content: "\e84a"; }
.icon-clipboard:before { content: "\e84b"; }
.icon-chrome:before { content: "\e84c"; }
.icon-clock:before { content: "\e84d"; }
.icon-cloud-lightning:before { content: "\e84e"; }
.icon-cloud-drizzle:before { content: "\e84f"; }
.icon-cloud-rain:before { content: "\e850"; }
.icon-cloud-off:before { content: "\e851"; }
.icon-codepen:before { content: "\e852"; }
.icon-cloud-snow:before { content: "\e853"; }
.icon-compass:before { content: "\e854"; }
.icon-copy:before { content: "\e855"; }
.icon-corner-down-right:before { content: "\e856"; }
.icon-corner-down-left:before { content: "\e857"; }
.icon-corner-left-down:before { content: "\e858"; }
.icon-corner-left-up:before { content: "\e859"; }
.icon-corner-up-left:before { content: "\e85a"; }
.icon-corner-up-right:before { content: "\e85b"; }
.icon-corner-right-down:before { content: "\e85c"; }
.icon-corner-right-up:before { content: "\e85d"; }
.icon-cpu:before { content: "\e85e"; }
.icon-credit-card:before { content: "\e85f"; }
.icon-crosshair:before { content: "\e860"; }
.icon-disc:before { content: "\e861"; }
.icon-delete:before { content: "\e862"; }
.icon-download-cloud:before { content: "\e863"; }
.icon-download:before { content: "\e864"; }
.icon-droplet:before { content: "\e865"; }
.icon-edit-2:before { content: "\e866"; }
.icon-edit:before { content: "\e867"; }
.icon-edit-1:before { content: "\e868"; }
.icon-external-link:before { content: "\e869"; }
.icon-eye:before { content: "\e86a"; }
.icon-feather:before { content: "\e86b"; }
.icon-facebook:before { content: "\e86c"; }
.icon-file-minus:before { content: "\e86d"; }
.icon-eye-off:before { content: "\e86e"; }
.icon-fast-forward:before { content: "\e86f"; }
.icon-file-text:before { content: "\e870"; }
.icon-film:before { content: "\e871"; }
.icon-file:before { content: "\e872"; }
.icon-file-plus:before { content: "\e873"; }
.icon-folder:before { content: "\e874"; }
.icon-filter:before { content: "\e875"; }
.icon-flag:before { content: "\e876"; }
.icon-globe:before { content: "\e877"; }
.icon-grid:before { content: "\e878"; }
.icon-heart:before { content: "\e879"; }
.icon-home:before { content: "\e87a"; }
.icon-github:before { content: "\e87b"; }
.icon-image:before { content: "\e87c"; }
.icon-inbox:before { content: "\e87d"; }
.icon-layers:before { content: "\e87e"; }
.icon-info:before { content: "\e87f"; }
.icon-instagram:before { content: "\e880"; }
.icon-layout:before { content: "\e881"; }
.icon-link-2:before { content: "\e882"; }
.icon-life-buoy:before { content: "\e883"; }
.icon-link:before { content: "\e884"; }
.icon-log-in:before { content: "\e885"; }
.icon-list:before { content: "\e886"; }
.icon-lock:before { content: "\e887"; }
.icon-log-out:before { content: "\e888"; }
.icon-loader:before { content: "\e889"; }
.icon-mail:before { content: "\e88a"; }
.icon-maximize-2:before { content: "\e88b"; }
.icon-map:before { content: "\e88c"; }
.icon-map-pin:before { content: "\e88e"; }
.icon-menu:before { content: "\e88f"; }
.icon-message-circle:before { content: "\e890"; }
.icon-message-square:before { content: "\e891"; }
.icon-minimize-2:before { content: "\e892"; }
.icon-mic-off:before { content: "\e893"; }
.icon-minus-circle:before { content: "\e894"; }
.icon-mic:before { content: "\e895"; }
.icon-minus-square:before { content: "\e896"; }
.icon-minus:before { content: "\e897"; }
.icon-moon:before { content: "\e898"; }
.icon-monitor:before { content: "\e899"; }
.icon-more-vertical:before { content: "\e89a"; }
.icon-more-horizontal:before { content: "\e89b"; }
.icon-move:before { content: "\e89c"; }
.icon-music:before { content: "\e89d"; }
.icon-navigation-2:before { content: "\e89e"; }
.icon-navigation:before { content: "\e89f"; }
.icon-octagon:before { content: "\e8a0"; }
.icon-package:before { content: "\e8a1"; }
.icon-pause-circle:before { content: "\e8a2"; }
.icon-pause:before { content: "\e8a3"; }
.icon-percent:before { content: "\e8a4"; }
.icon-phone-call:before { content: "\e8a5"; }
.icon-phone-forwarded:before { content: "\e8a6"; }
.icon-phone-missed:before { content: "\e8a7"; }
.icon-phone-off:before { content: "\e8a8"; }
.icon-phone-incoming:before { content: "\e8a9"; }
.icon-phone:before { content: "\e8aa"; }
.icon-phone-outgoing:before { content: "\e8ab"; }
.icon-pie-chart:before { content: "\e8ac"; }
.icon-play-circle:before { content: "\e8ad"; }
.icon-play:before { content: "\e8ae"; }
.icon-plus-square:before { content: "\e8af"; }
.icon-plus-circle:before { content: "\e8b0"; }
.icon-plus:before { content: "\e8b1"; }
.icon-pocket:before { content: "\e8b2"; }
.icon-printer:before { content: "\e8b3"; }
.icon-power:before { content: "\e8b4"; }
.icon-radio:before { content: "\e8b5"; }
.icon-repeat:before { content: "\e8b6"; }
.icon-refresh-ccw:before { content: "\e8b7"; }
.icon-rewind:before { content: "\e8b8"; }
.icon-rotate-ccw:before { content: "\e8b9"; }
.icon-refresh-cw:before { content: "\e8ba"; }
.icon-rotate-cw:before { content: "\e8bb"; }
.icon-save:before { content: "\e8bc"; }
.icon-search:before { content: "\e8bd"; }
.icon-server:before { content: "\e8be"; }
.icon-scissors:before { content: "\e8bf"; }
.icon-share-2:before { content: "\e8c0"; }
.icon-share:before { content: "\e8c1"; }
.icon-shield:before { content: "\e8c2"; }
.icon-settings:before { content: "\e8c3"; }
.icon-skip-back:before { content: "\e8c4"; }
.icon-shuffle:before { content: "\e8c5"; }
.icon-sidebar:before { content: "\e8c6"; }
.icon-skip-forward:before { content: "\e8c7"; }
.icon-slack:before { content: "\e8c8"; }
.icon-slash:before { content: "\e8c9"; }
.icon-smartphone:before { content: "\e8ca"; }
.icon-square:before { content: "\e8cb"; }
.icon-speaker:before { content: "\e8cc"; }
.icon-star:before { content: "\e8cd"; }
.icon-stop-circle:before { content: "\e8ce"; }
.icon-sun:before { content: "\e8cf"; }
.icon-sunrise:before { content: "\e8d0"; }
.icon-tablet:before { content: "\e8d1"; }
.icon-tag:before { content: "\e8d2"; }
.icon-sunset:before { content: "\e8d3"; }
.icon-target:before { content: "\e8d4"; }
.icon-thermometer:before { content: "\e8d5"; }
.icon-thumbs-up:before { content: "\e8d6"; }
.icon-thumbs-down:before { content: "\e8d7"; }
.icon-toggle-left:before { content: "\e8d8"; }
.icon-toggle-right:before { content: "\e8d9"; }
.icon-trash-2:before { content: "\e8da"; }
.icon-trash:before { content: "\e8db"; }
.icon-trending-up:before { content: "\e8dc"; }
.icon-trending-down:before { content: "\e8dd"; }
.icon-triangle:before { content: "\e8de"; }
.icon-type:before { content: "\e8df"; }
.icon-twitter:before { content: "\e8e0"; }
.icon-upload:before { content: "\e8e1"; }
.icon-umbrella:before { content: "\e8e2"; }
.icon-upload-cloud:before { content: "\e8e3"; }
.icon-unlock:before { content: "\e8e4"; }
.icon-user-check:before { content: "\e8e5"; }
.icon-user-minus:before { content: "\e8e6"; }
.icon-user-plus:before { content: "\e8e7"; }
.icon-user-x:before { content: "\e8e8"; }
.icon-user:before { content: "\e8e9"; }
.icon-users:before { content: "\e8ea"; }
.icon-video-off:before { content: "\e8eb"; }
.icon-video:before { content: "\e8ec"; }
.icon-voicemail:before { content: "\e8ed"; }
.icon-volume-x:before { content: "\e8ee"; }
.icon-volume-2:before { content: "\e8ef"; }
.icon-volume-1:before { content: "\e8f0"; }
.icon-volume:before { content: "\e8f1"; }
.icon-watch:before { content: "\e8f2"; }
.icon-wifi:before { content: "\e8f3"; }
.icon-x-square:before { content: "\e8f4"; }
.icon-wind:before { content: "\e8f5"; }
.icon-x:before { content: "\e8f6"; }
.icon-x-circle:before { content: "\e8f7"; }
.icon-zap:before { content: "\e8f8"; }
.icon-zoom-in:before { content: "\e8f9"; }
.icon-zoom-out:before { content: "\e8fa"; }
.icon-command:before { content: "\e8fb"; }
.icon-cloud:before { content: "\e8fc"; }
.icon-hash:before { content: "\e8fd"; }
.icon-headphones:before { content: "\e8fe"; }
.icon-underline:before { content: "\e8ff"; }
.icon-italic:before { content: "\e900"; }
.icon-bold:before { content: "\e901"; }
.icon-crop:before { content: "\e902"; }
.icon-help-circle:before { content: "\e903"; }
.icon-paperclip:before { content: "\e904"; }
.icon-shopping-cart:before { content: "\e905"; }
.icon-tv:before { content: "\e906"; }
.icon-wifi-off:before { content: "\e907"; }
.icon-minimize:before { content: "\e88d"; }
.icon-maximize:before { content: "\e908"; }
.icon-gitlab:before { content: "\e909"; }
.icon-sliders:before { content: "\e90a"; }
.icon-star-on:before { content: "\e90b"; }
.icon-heart-on:before { content: "\e90c"; }
.icon-archive:before { content: "\e90d"; }
.icon-arrow-down-circle:before { content: "\e90e"; }
.icon-arrow-up-circle:before { content: "\e90f"; }
.icon-arrow-left-circle:before { content: "\e910"; }
.icon-arrow-right-circle:before { content: "\e911"; }
.icon-bar-chart-line-:before { content: "\e912"; }
.icon-bar-chart-line:before { content: "\e913"; }
.icon-book-open:before { content: "\e914"; }
.icon-code:before { content: "\e915"; }
.icon-database:before { content: "\e916"; }
.icon-dollar-sign:before { content: "\e917"; }
.icon-folder-plus:before { content: "\e918"; }
.icon-gift:before { content: "\e919"; }
.icon-folder-minus:before { content: "\e91a"; }
.icon-git-commit:before { content: "\e91b"; }
.icon-git-branch:before { content: "\e91c"; }
.icon-git-pull-request:before { content: "\e91d"; }
.icon-git-merge:before { content: "\e91e"; }
.icon-linkedin:before { content: "\e91f"; }
.icon-hard-drive:before { content: "\e920"; }
.icon-more-vertical-:before { content: "\e921"; }
.icon-more-horizontal-:before { content: "\e922"; }
.icon-rss:before { content: "\e923"; }
.icon-send:before { content: "\e924"; }
.icon-shield-off:before { content: "\e925"; }
.icon-shopping-bag:before { content: "\e926"; }
.icon-terminal:before { content: "\e927"; }
.icon-truck:before { content: "\e928"; }
.icon-zap-off:before { content: "\e929"; }
.icon-youtube:before { content: "\e92a"; }


/* Jquery UI autocomplete */

.ui-autocomplete {
    border-radius: 4px;
    background:white;
    max-height:300px;
    overflow-y:auto;
    overflow-x:hidden;
}

.ui-front { 
	z-index:2070 !important;
}

.ui-icon-background, 
.ui-state-active 
.ui-icon-background { 
	border: #44a !important; 
	background-color: #005 !important; 
}

.ui-state-active a, 
.ui-state-active a:link, 
.ui-state-active a:visited { 
	color: #005 !important;
}

.ui-state-active, 
.ui-widget-content 
.ui-state-active, 
.ui-widget-header 
.ui-state-active, 
a.ui-button:active, 
.ui-button:active, 
.ui-button.ui-state-active:hover {
	border: 1px solid #44a !important;
	color: #005 !important;
	background:#f0f4f8 !important;
}

.autocomplete-group {
	position:relative;
}
.autocomplete-group label:empty {
	display:none;
}
.autocomplete-button {
	position:absolute;
	top:0px;
	right:0px;
	padding:2px 7px 3px 7px;
	text-decoration: none !important;
	color:black;
}
.autocomplete-button .feather {
	opacity:0.5;
}
.autocomplete-button:focus .feather,
.autocomplete-button:hover .feather {
	opacity:1.0;
	cursor:pointer;
}
.formtable .autocomplete-group {
	margin-bottom:0;
}


/* ImageLibraryPanel */

.imagelibrarycontainer {
	max-height:50vh;
	overflow-y:scroll;
}

.imagelibrary {
	text-align:center;
}

.imagelibrary div {
	display:inline-block;
	float:left;
	width:110px;
	height:110px;
	text-align:center;
	border-radius:6px;
	transition: 0.5s ease-out;
	border:1px solid #eee;
	white-space: nowrap;
	margin:1px;
}

.imagelibrary div:hover {
	cursor:pointer;	
	background:#ccc;
	vertical-align: middle;
}

.imagelibrary .centerhelper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.imagelibrary img {	
	vertical-align: middle;
	max-width:100px;
	max-height:100px;
}

.imageuploadfeedback {
	margin-left:20px;
	padding:6px 15px;
}

.imageuploadfeedback ul {
	list-style-type: none;
    padding: 0;
    background: transparent;
    border: none;
    margin: 0;
    color: black;
}


/* Border tiles */

.bordertiles {
	margin-bottom:20px;
}
.bordertiles a {
	display:block;
	border:1px solid #ccc; 
	background:transparent;
	color:#333;
	font-size:16px;
	transition:background 0.3s ease;
	text-align:left;
	position:relative;
	cursor:pointer;
	margin-bottom:6px;
	text-transform:none;
	display:flex;
	align-items: center;
	border-radius:10px;
	padding:5px 10px;
}
.bordertiles a:hover {
	background:#eee;
}
.bordertiles .row {
	vertical-align: middle;
	width:100%;
}
.bordertiles .description p {
	font-size:1em;
	margin-bottom:0;	
}
.bordertiles .row span, i, label {
	vertical-align:middle;
}
.bordertiles .lefticon {
	display:none;
	float:left;
	width:40px;	
	font-size:30px;
	margin:0;
}
.bordertiles label {
	display:inline-block;
	cursor:pointer;
	font-size:20px;
	margin:0;
	overflow:hidden; 
	white-space:nowrap; 
    text-overflow: ellipsis;
}
.bordertiles a::after {
	position:absolute;
	top:50%;
	right:15px;
	margin-top:-20px;
	font-family:'Glyphicons Halflings';
	content: "\e234";	
	display: inline-block;
	color:#00000030;
	font-size:30px;
}
@media (min-width: 768px) {
	.bordertiles .lefticon {
		display:inline-block;
	}
	.bordertiles a {
		height:70px;	
	}
	.bordertiles .row > div {
		display: flex;
	  	align-items: center;
	  	height:70px;
	}
}
span.green-bullet::before {
	content:'';
	display:inline-block;
	width:16px;
	height:16px;
	background:#8CD9AC;
	border-radius:8px;
	margin-right:8px;
	vertical-align:middle;
} 
span.red-bullet::before {
	content:'';
	display:inline-block;
	width:16px;
	height:16px;
	background:#EB5757;
	border-radius:8px;
	margin-right:8px;
	vertical-align:middle;
} 

.call-logo {
	max-width:100%;
	max-height:100px;
}
@media (min-width: 768px) {
	.call-logo {
		float:right;	
		max-width:350px;
		margin-left:20px;
	}
}

.search {
	width: 250px;
}

.feather.form-control-feedback {
    line-height: 36px;
}

/* Styling of application form panel to simplify looks but since this is
a common component used internally we dont mess with the actual panel. */

.application-form .panel {
	background:transparent;
}
.application-form .panel-heading {
	background:transparent !important;
}
.application-form .panel-heading > h4 {
	display:none;
}
.application-form .panel-body {
	padding:0;
	border:0;
}
.application-form .panel-body > div > h1 {
	font-weight:500;
	font-size:36px;
}

.application-form .field-group-tile-wrapper:hover .section-heading {
	background:var(--btn-primary-hover-bg);
	color:white;
}
.application-form .field-group-tile-wrapper:hover .info {
	color:#ffffffa0;
}
.application-form .field-group-tile-wrapper:hover .delete-tile a {
	color:white;
}

.application-form .field-group-tile-wrapper:hover .section {
	border-color:var(--btn-primary-hover-bg);
}

/* Base page main container and menu */

.maincontainer {
	padding:100px 15px 30px 15px;
	margin-right: auto;
	margin-left: auto;
	width: 1400px;
	position:relative;
}

.maincontent {
	margin-left:250px;
}

/* LeftMenuPanel */

.mainmenu-wrapper {
	position:absolute;
	left:0;
	top:0px;
	bottom:0;
}

.mainmenu {
	position:sticky;
	left:0;
	top:130px;
	bottom:15px;
	width:250px;
}

.mainmenu .user-info {
	text-align: left;
}

.mainmenu ul {
	margin-top:20px;
	list-style-type: none;
	padding: 0;
}
.mainmenu ul li {
	padding:0 0 1px 0;
}
.mainmenu ul li a {
	color:var(--text-color);
	font-size:1.7rem;
	margin-left:0px;
	padding:6px 10px;
	display:flex;
	border:1px solid transparent;
	border-radius:8px;
}
.mainmenu ul li a:focus,
.mainmenu ul li a:hover {
	color:#000;
	text-decoration:none;
	color:black;
	background:var(--primary-color-light);
	border:1px solid #00000030;
	border-radius: 8px;
}
.mainmenu ul li a.selected {
	background:var(--primary-color-light);
	border:1px solid #00000030;
	color:black;
}
.mainmenu ul li a i {
	font-size:2.8rem;
	height:30px;
}
.mainmenu ul li a span {
	margin-left:10px;
	margin-top: 3px;
	font-weight: bold;
}
.mainmenu ul li.gap-under {
	margin-bottom:30px;
}

/*
@media (max-width: 1550px) {
	.lefth1 {
		display: none !important;
	}
}
*/
@media (max-width: 1430px) {
	.maincontainer {
		width: 1170px;
		position:initial;
	}
	.maincontent {
		margin-left:100px;
	}
	.mainmenu {
		position:fixed;
		z-index:1;
		width:100px;
		top:0;
		left:0;
		bottom:0;
		background:#f5f5fa;
	}
	.mainmenu ul {
		margin-top:100px;
	}
	.mainmenu ul li a {
		display:block;
		height:auto;
		text-align: center;
		padding:10px 5px
	}
	/*.mainmenu ul li a span,*/
	.mainmenu ul li a span {
		display:block;
		font-size:1.2rem;
		font-weight: normal;
		margin:0;
	}
	.mainmenu .user-info {
		display:none;
	}
	.mainmenu ul li a {
		border-radius:0 !important;
	}
	.mainmenu ul li a:hover span {
	}
}

@media (max-width: 1170px) {
	.maincontainer {
		width: 100%;
		margin-right:15px;
	}
}

/* Search */

.searchbutton {
	margin-top: 1px;
	margin-right: 7px;
	font-size: 22px;
	padding: 1px 5px 0 5px;
	border-radius:50%;
}
.searchbutton:hover {
	background:var(--header-background-hover);
	color:var(--header-text-hover);
	cursor:pointer;
}
.search-form {
	margin-top:-1px;
	display:none;
}
.search-block {
	position:relative;
}
.search-block a {
	text-decoration: none;
	color:#333;
	position:absolute;
	top:7px;
	right:12px;
	font-size:22px;
}
.search-block a:hover {
	color:black;
}
.search-block input {
	width:250px;
	font-size:2rem;
	padding:6px 12px;
	border-radius: 20px;
}
.search-block input:focus {
	outline: none;
	border: 1px solid var(--primary-color);
	box-shadow:0 0 4px var(--primary-color-dark);
	background:var(--input-focus);
}
.topbar.search-active .search-form {
	display:inline-block;
}
.topbar.search-active .topbar-menu,
.topbar.search-active .searchbutton {
	display:none;
}

/* Hjemmeside */

.home-tile {
	color:#333;
	background:var(--primary-color-light);
	border-radius:5px;
	margin:5px 0;
	padding:5px 10px;
	font-size:1.5rem;
	display:block;
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height:52px;
}
.home-tile span,
.home-tile b {
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	margin-left:35px;
	margin-right:32px;
}
.home-tile span {
	font-weight:normal;
}
.home-tile:focus,
.home-tile:active,
.home-tile:focus-visible,
.home-tile:hover {
	background:var(--primary-color);
	color:black;
	text-decoration:none;
}
.home-tile.home-alert {
	background:#FAE9B8;
	min-height:75px;
}
.home-tile.home-alert:focus,
.home-tile.home-alert:active,
.home-tile.home-alert:focus-visible,
.home-tile.home-alert:hover {
	background:#F2C94C;
}
.home-tile.home-alert:before {
	position:absolute;
	left:12px;
	top:50%;
	margin-top:-15px;
	font-family: 'feather';
	content:'\e81c';
	font-size:2.2rem;
	color:#eb5757;
	font-weight: bold;
}
.home-tile:after {
	content: '\e844';
	font-family: 'feather';
	position:absolute;
	right:10px;
	top:50%;
	margin-top:-13px;
	color:#333;
	font-size:2rem;
	transition: right 0.2s ease-in-out;
}
.home-tile:hover:after {
	right:6px
}
.home-tile.linkobject {
	cursor:pointer;
}
.home-tile i {
	position:absolute;
	left:8px;
	top:50%;
	margin-top:-14px;
}

.home-tile.home-deadline:before {
	position:absolute;
	left:12px;
	top:50%;
	margin-top:-15px;
	font-family: 'feather';
	content:'\e83a';
	font-size:2.2rem;
	color:#333;
	font-weight: bold;
}

.home-date {
	font-weight:normal;
	font-style:italic;
	color:#000088;
}

.item-testcase .home-tile::before {
	content:'TEST';
	font-family: 'Source Sans 3', sans-serif;
	position: absolute;
	top:2px;
	right:6px;
	font-weight: bold;
	font-size:1.0em;
	color:#00000040;
}

.system-text img {
	max-width:100%;
}

.btn-delete-icon {
	margin-left:5px;
	/*vertical-align:middle;*/
	padding:0 2px;
	text-decoration:none !important;
}
.btn-delete-icon:hover {
	border-radius:50%;
	background:#00000020;
}

.maincontainer.full-width {
	width:100%;
}

.maincontainer.full-width .maincontent {
	margin-left:50px;
}
.maincontainer.full-width .mainmenu {
	position:fixed;
	z-index: 1;
	width:50px;
	top:0;
	left:0;
	background:#f5f5fa;
}
.maincontainer.full-width .mainmenu ul {
	margin-top:236px;
}
.maincontainer.full-width .mainmenu ul li a span,
.maincontainer.full-width .mainmenu .user-info {
	display:none;
}
.maincontainer.full-width .mainmenu ul li a:hover {
	width:250px;
}
.maincontainer.full-width .mainmenu ul li a:hover span {
	display: inline-block;
}
/*
.maincontainer.full-width .lefth1 {
	display: none !important;
}
*/

.maincontainer.full-width .mainmenu:hover {
	width:250px;
}

.goto-content:focus-visible,
.goto-content:focus {
	display:inline-block;
	width:auto;
	height:auto;
	padding:5px;
}

.goto-content {
	position:absolute;
	overflow:hidden;
	width:0;
	height:0;
	top:0;
	left:0;
	padding:0;
	z-index: 100;
	border:0;
	background:#ffffffe0;
	color:black;
}

/* this class can be used on a feedback panel to make it flat and can then be
   used to show a filtered error for just one field */
.field-feedback .feedbackPanel {
	background:transparent;
	border:0;
	padding:0;
	margin:5px 0;
}

body.display-spacing * {
	line-height: 1.5 !important;
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

var {
	font-style: normal;
}


/* Working overlay and animation */

#working-overlay {
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:10000;
	background: radial-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0));
	opacity:0;
	animation: workingFadeIn 2s ease 3s 1 normal forwards;
}
@keyframes workingFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.working-center {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	min-height:105px;
}
#working-reload {
	display:none;
	margin-top: 20px;
	padding: 15px 20px;
	color: black;
	border-radius: 30px;
	border: none;
	background: var(--primary-color);
	font-size: 1.2em;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#working-reload:hover {
	background: var(--primary-color-light);
}

#fountainG {
	position:relative;
	width:234px;
	height:28px;
	margin:auto;
}
.fountainG {
	position:absolute;
	top:0;
	background-color:rgba(255,255,255,0);
	width:28px;
	height:28px;
	animation-name:bounce_fountainG;
	-o-animation-name:bounce_fountainG;
	-ms-animation-name:bounce_fountainG;
	-webkit-animation-name:bounce_fountainG;
	-moz-animation-name:bounce_fountainG;
	animation-duration:1.5s;
	-o-animation-duration:1.5s;
	-ms-animation-duration:1.5s;
	-webkit-animation-duration:1.5s;
	-moz-animation-duration:1.5s;
	animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
	-ms-animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	animation-direction:normal;
	-o-animation-direction:normal;
	-ms-animation-direction:normal;
	-webkit-animation-direction:normal;
	-moz-animation-direction:normal;
	transform:scale(.3);
	-o-transform:scale(.3);
	-ms-transform:scale(.3);
	-webkit-transform:scale(.3);
	-moz-transform:scale(.3);
	border-radius:19px;
	-o-border-radius:19px;
	-ms-border-radius:19px;
	-webkit-border-radius:19px;
	-moz-border-radius:19px;
}

#fountainG_1{
	left:0;
	animation-delay:0.6s;
	-o-animation-delay:0.6s;
	-ms-animation-delay:0.6s;
	-webkit-animation-delay:0.6s;
	-moz-animation-delay:0.6s;
}
#fountainG_2{
	left:29px;
	animation-delay:0.75s;
	-o-animation-delay:0.75s;
	-ms-animation-delay:0.75s;
	-webkit-animation-delay:0.75s;
	-moz-animation-delay:0.75s;
}
#fountainG_3{
	left:58px;
	animation-delay:0.9s;
	-o-animation-delay:0.9s;
	-ms-animation-delay:0.9s;
	-webkit-animation-delay:0.9s;
	-moz-animation-delay:0.9s;
}
#fountainG_4{
	left:88px;
	animation-delay:1.05s;
	-o-animation-delay:1.05s;
	-ms-animation-delay:1.05s;
	-webkit-animation-delay:1.05s;
	-moz-animation-delay:1.05s;
}
#fountainG_5{
	left:117px;
	animation-delay:1.2s;
	-o-animation-delay:1.2s;
	-ms-animation-delay:1.2s;
	-webkit-animation-delay:1.2s;
	-moz-animation-delay:1.2s;
}
#fountainG_6{
	left:146px;
	animation-delay:1.35s;
	-o-animation-delay:1.35s;
	-ms-animation-delay:1.35s;
	-webkit-animation-delay:1.35s;
	-moz-animation-delay:1.35s;
}
#fountainG_7{
	left:175px;
	animation-delay:1.5s;
	-o-animation-delay:1.5s;
	-ms-animation-delay:1.5s;
	-webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
}
#fountainG_8{
	left:205px;
	animation-delay:1.64s;
	-o-animation-delay:1.64s;
	-ms-animation-delay:1.64s;
	-webkit-animation-delay:1.64s;
	-moz-animation-delay:1.64s;
}
@keyframes bounce_fountainG{
	0%{
		transform:scale(1);
		background-color:rgba(255,255,255,1);
	}
	100%{
		transform:scale(.3);
		background-color:rgba(255,255,255,0);
	}
}
@-o-keyframes bounce_fountainG{
	0%{
		-o-transform:scale(1);
		background-color:rgba(255,255,255,1);
	}
	100%{
		-o-transform:scale(.3);
		background-color:rgba(255,255,255,0);
	}
}
@-ms-keyframes bounce_fountainG{
	0%{
		-ms-transform:scale(1);
		background-color:rgba(255,255,255,1);
	}
	100%{
		-ms-transform:scale(.3);
		background-color:rgba(255,255,255,0);
	}
}
@-webkit-keyframes bounce_fountainG{
	0%{
		-webkit-transform:scale(1);
		background-color:rgba(255,255,255,1);
	}
	100%{
		-webkit-transform:scale(.3);
		background-color:rgba(255,255,255,0);
	}
}
@-moz-keyframes bounce_fountainG{
	0%{
		-moz-transform:scale(1);
		background-color:rgba(255,255,255,1);
	}
	100%{
		-moz-transform:scale(.3);
		background-color:rgba(255,255,255,0);
	}
}

.only-mobile {
	display:none;
}

.table.edit-ranking {
	user-select: none;
}
.table.edit-ranking a {
	pointer-events: none;
}
.table.edit-ranking tbody tr:hover td,
.table.edit-ranking tbody tr.dragging td {
	background:var(--primary-color);
	cursor:move;
}

.table.edit-ranking tbody tr.dragging {
	transform: scale(1.03);
	box-shadow: 0 3px 5px rgba(0,0,0,0.1);
	border-radius: 5px;
}